@justifi/webcomponents 6.0.0-rc.1 → 6.0.0-rc.11

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

@@ -2,8 +2,7 @@ import { h } from "@stencil/core";
 import { StyledHost } from "../../ui-components";
 import { checkPkgVersion } from "../../utils/check-pkg-version";
 import JustifiAnalytics from "../../api/Analytics";
-import { PaymentMethodTypes } from "../../api/Payment";
-import { ComponentErrorCodes, ComponentErrorSeverity } from "../../api";
+import { ComponentErrorCodes, ComponentErrorSeverity, PaymentMethodTypes } from "../../api";
 import { checkoutStore } from "../../store/checkout.store";
 // Constants
 const PAYMENT_METHOD_TYPE_LABELS = {
@@ -18,14 +17,12 @@ const ERROR_MESSAGES = {
 };
 export class TokenizePaymentMethod {
     constructor() {
-        this.isLoading = false;
         this.computedHideSubmitButton = false;
+        this.isLoading = false;
         this.submitButtonText = 'Submit';
     }
-    componentWillLoad() {
-        checkPkgVersion();
-        this.analytics = new JustifiAnalytics(this);
-        this.validateRequiredProps();
+    paymentMethodsChanged() {
+        this.setDefaultSelectedPaymentMethod();
     }
     connectedCallback() {
         this.setDefaultSelectedPaymentMethod();
@@ -34,12 +31,17 @@ export class TokenizePaymentMethod {
     disconnectedCallback() {
         var _a;
         (_a = this.analytics) === null || _a === void 0 ? void 0 : _a.cleanup();
+        if (this.unsubscribeFromStore) {
+            this.unsubscribeFromStore();
+        }
     }
-    paymentMethodsChanged() {
-        this.setDefaultSelectedPaymentMethod();
+    componentWillLoad() {
+        checkPkgVersion();
+        this.analytics = new JustifiAnalytics(this);
     }
     handleRadioClick(event) {
-        this.selectedPaymentMethodId = event.detail;
+        this.selectedPaymentMethod = event.detail;
+        checkoutStore.selectedPaymentMethod = { type: event.detail };
     }
     async fillBillingForm(fields) {
         var _a;
@@ -47,6 +49,7 @@ export class TokenizePaymentMethod {
     }
     async tokenizePaymentMethod(event) {
         event === null || event === void 0 ? void 0 : event.preventDefault();
+        this.validateRequiredProps();
         this.isLoading = true;
         try {
             const validation = await this.validate();
@@ -89,11 +92,27 @@ export class TokenizePaymentMethod {
             this.billingFormRef.validate(),
             this.paymentMethodFormRef.validate(),
         ]);
-        return {
+        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({
@@ -109,14 +128,16 @@ export class TokenizePaymentMethod {
         }
     }
     setDefaultSelectedPaymentMethod() {
-        if (this.selectedPaymentMethodId) {
+        if (this.selectedPaymentMethod) {
             return;
         }
         if (!this.disableCreditCard) {
-            this.selectedPaymentMethodId = PaymentMethodTypes.card;
+            this.selectedPaymentMethod = PaymentMethodTypes.card;
+            checkoutStore.selectedPaymentMethod = { type: PaymentMethodTypes.card };
         }
         else if (!this.disableBankAccount) {
-            this.selectedPaymentMethodId = PaymentMethodTypes.bankAccount;
+            this.selectedPaymentMethod = PaymentMethodTypes.bankAccount;
+            checkoutStore.selectedPaymentMethod = { type: PaymentMethodTypes.bankAccount };
         }
     }
     setComputedHideSubmitButton() {
@@ -182,7 +203,8 @@ export class TokenizePaymentMethod {
                     },
                 };
             }
-            return await this.performTokenization();
+            const result = await this.performTokenization();
+            return result;
         }
         catch (error) {
             return { error };
@@ -200,20 +222,6 @@ export class TokenizePaymentMethod {
             data: tokenizeResponseData,
         };
     }
-    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;
-        }
-    }
     buildPaymentMethodMetadata(billingFormFieldValues) {
         return this.shouldSavePaymentMethod
             ? Object.assign(Object.assign({}, billingFormFieldValues), { payment_method_group_id: this.paymentMethodGroupID }) : Object.assign({}, billingFormFieldValues);
@@ -228,17 +236,17 @@ export class TokenizePaymentMethod {
         return this.disableCreditCard || this.disableBankAccount;
     }
     renderPaymentMethodOption(paymentMethodType) {
-        const isSelected = this.selectedPaymentMethodId === 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(paymentMethodId) {
-        return (h("div", { class: "mt-4 pb-4" }, this.renderPaymentMethodForm(paymentMethodId), h("div", { class: "mt-4" }, h("justifi-billing-form", { ref: (el) => (this.billingFormRef = el), hideCardBillingForm: this.hideCardBillingForm, hideBankAccountBillingForm: this.hideBankAccountBillingForm, paymentMethodType: paymentMethodId })), h("justifi-save-new-payment-method", { hidden: !this.paymentMethodGroupID })));
+        return (h("div", { class: "mt-4 pb-4" }, this.renderPaymentMethodForm(paymentMethodId), h("div", { class: "mt-4" }, h("justifi-billing-form", { ref: (el) => (this.billingFormRef = el), hideCardBillingForm: this.hideCardBillingForm, hideBankAccountBillingForm: this.hideBankAccountBillingForm, paymentMethodType: paymentMethodId })), h("div", { class: "mt-4" }, h("justifi-save-new-payment-method", { hidden: !this.paymentMethodGroupID, label: this.savePaymentMethodLabel }))));
     }
     renderPaymentMethodForm(paymentMethodId) {
         return paymentMethodId === PaymentMethodTypes.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: '11b857dea77d2f753e400cfaf021db51326ffc36' }, h("form", { key: 'fd1c625c62b1699157b24834e15c4c6e0bc93b84' }, h("fieldset", { key: 'febf7db57a5ceda457e21287c20df817b101b45d' }, h("div", { key: '1089c358094a3f0cea1c97b807779c7eb6e9e692', class: "row gy-3" }, h("div", { key: 'f564fbfec389008e352f9de54fdb604be56d8826', class: "col-12" }, this.availablePaymentMethods.map((method) => this.renderPaymentMethodOption(method))), h("div", { key: 'e3e7f46529d1a659f387fb6df0914c168d556e27', class: "col-12" }, h("justifi-button", { key: 'd729f38c5b55c174de479ab57da56defd327366b', 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: '8a7983cbb634e39612d9f464c3dde43c646356dd' }, h("form", { key: 'ef1d8bc768aeb880445283d4b00d41cd85b77d16' }, h("fieldset", { key: 'be8f72bb4aab7b52098f034a06ad8586fe3b89cb' }, h("div", { key: '0155b97ff6bf1c9364b2b71b337e981c89774bbe', class: "row gy-3" }, h("div", { key: '27bf72ad4b2729a94be20b8a22e196cb5550c078', class: "col-12" }, this.availablePaymentMethods.map((method) => this.renderPaymentMethodOption(method))), h("div", { key: '3a9c4c7bf7830f66d22fa99fc1ca12f3dcaad390', class: "col-12" }, h("justifi-button", { key: '860fbcdc509a72abecc1e6abe2c8ff45a565ea46', text: this.submitButtonText, variant: "primary", type: "submit", clickHandler: (e) => this.tokenizePaymentMethod(e), isLoading: this.isLoading, "data-testid": "submit-button", hidden: this.computedHideSubmitButton })))))));
     }
     static get is() { return "justifi-tokenize-payment-method"; }
     static get properties() {
@@ -414,14 +422,33 @@ export class TokenizePaymentMethod {
                 "setter": false,
                 "reflect": false,
                 "defaultValue": "'Submit'"
+            },
+            "savePaymentMethodLabel": {
+                "type": "string",
+                "attribute": "save-payment-method-label",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false
             }
         };
     }
     static get states() {
         return {
+            "computedHideSubmitButton": {},
             "isLoading": {},
-            "selectedPaymentMethodId": {},
-            "computedHideSubmitButton": {}
+            "selectedPaymentMethod": {}
         };
     }
     static get events() {
@@ -552,6 +579,27 @@ export class TokenizePaymentMethod {
                     "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": []
+                }
             }
         };
     }

package/dist/collection/index.js

@@ -1 +1,2 @@
 export * from './components';
+export { PAYMENT_METHODS } from './components/modular-checkout/ModularCheckout';

package/dist/collection/store/checkout.store.js

@@ -1,4 +1,6 @@
 import { createStore } from "@stencil/store";
+import { PaymentMethodTypes } from "../api";
+import { PAYMENT_METHODS } from "../components/modular-checkout/ModularCheckout";
 const initialState = {
     accountId: '',
     authToken: '',
@@ -6,23 +8,28 @@ const initialState = {
         address_postal_code: '',
     },
     bnplEnabled: false,
+    insuranceEnabled: false,
     bnplProviderApiVersion: '',
     bnplProviderCheckoutUrl: '',
     bnplProviderClientId: '',
     bnplProviderMode: '',
     checkoutId: '',
+    bankAccountVerification: undefined,
     disableBankAccount: false,
     disableBnpl: false,
     disableCreditCard: false,
     disablePaymentMethodGroup: false,
     paymentAmount: 0,
+    paymentCurrency: 'USD',
     paymentDescription: '',
     paymentMethodGroupId: undefined,
     paymentMethods: [],
     paymentToken: undefined,
     savePaymentMethod: false,
-    selectedPaymentMethod: '',
+    selectedPaymentMethod: { type: PaymentMethodTypes.card },
     totalAmount: 0,
+    plaidPublicToken: undefined,
+    plaidLinkTokenId: undefined,
 };
 const { state: checkoutStore, onChange } = createStore(initialState);
 Object.keys(initialState).forEach((key) => {
@@ -31,4 +38,43 @@ Object.keys(initialState).forEach((key) => {
         checkoutStore[key] = newValue;
     });
 });
-export { checkoutStore, onChange };
+// Helper: compute available payment methods based on store flags
+export function getAvailablePaymentMethodTypes() {
+    var _a;
+    const methods = [];
+    if (!checkoutStore.disablePaymentMethodGroup &&
+        ((_a = checkoutStore.paymentMethods) === null || _a === void 0 ? void 0 : _a.length)) {
+        const hasSavedCard = checkoutStore.paymentMethods.some((pm) => pm.type === 'card');
+        const hasSavedBank = checkoutStore.paymentMethods.some((pm) => pm.type === 'bank_account');
+        if (hasSavedCard && !checkoutStore.disableCreditCard) {
+            methods.push(PAYMENT_METHODS.SAVED_CARD);
+        }
+        if (hasSavedBank && !checkoutStore.disableBankAccount) {
+            methods.push(PAYMENT_METHODS.SAVED_BANK_ACCOUNT);
+        }
+    }
+    if (!checkoutStore.disableCreditCard) {
+        methods.push(PAYMENT_METHODS.NEW_CARD);
+    }
+    if (!checkoutStore.disableBankAccount) {
+        methods.push(PAYMENT_METHODS.NEW_BANK_ACCOUNT);
+    }
+    if (checkoutStore.bnplEnabled && !checkoutStore.disableBnpl) {
+        methods.push(PAYMENT_METHODS.SEZZLE);
+    }
+    if (checkoutStore.bankAccountVerification === true &&
+        !checkoutStore.disableBankAccount) {
+        methods.push(PAYMENT_METHODS.PLAID);
+    }
+    return methods;
+}
+export function isNewCardSelected() {
+    return checkoutStore.selectedPaymentMethod.type === PaymentMethodTypes.card;
+}
+export { checkoutStore as checkoutStore, onChange };
+export function onAnyChange(callback) {
+    Object.keys(initialState).forEach((key) => {
+        // @ts-ignore - onChange is generically typed by stencil/store but not exported here
+        onChange(key, (newValue) => callback(key, newValue));
+    });
+}

package/dist/collection/ui-components/apple-pay-button.js

@@ -0,0 +1,146 @@
+import { h } from "@stencil/core";
+import { ApplePayButtonType, ApplePayButtonStyle } from "../api/ApplePay";
+const ProcessingSpinner = () => (h("div", { class: 'processing-overlay' }, h("div", { class: 'spinner' }), h("span", null, "Processing...")));
+export const ApplePayButton = (props) => {
+    const getApplePayButtonClass = () => {
+        let classes = "apple-pay-button";
+        switch (props.buttonStyle) {
+            case ApplePayButtonStyle.WHITE:
+                classes += " apple-pay-button-white";
+                break;
+            case ApplePayButtonStyle.WHITE_OUTLINE:
+                classes += " apple-pay-button-white-outline";
+                break;
+            case ApplePayButtonStyle.BLACK:
+            default:
+                classes += " apple-pay-button-black";
+                break;
+        }
+        switch (props.buttonType) {
+            case ApplePayButtonType.BUY:
+                classes += " apple-pay-button-type-buy";
+                break;
+            case ApplePayButtonType.DONATE:
+                classes += " apple-pay-button-type-donate";
+                break;
+            case ApplePayButtonType.PLAIN:
+            default:
+                classes += " apple-pay-button-type-plain";
+                break;
+        }
+        if (props.disabled || props.isProcessing || !props.isAvailable) {
+            classes += " disabled";
+        }
+        return classes;
+    };
+    const getButtonStyles = () => {
+        return {
+            width: props.width || "200px",
+            height: props.height || "48px",
+        };
+    };
+    const handleClick = () => {
+        if (!props.disabled &&
+            !props.isProcessing &&
+            props.isAvailable &&
+            props.clickHandler) {
+            props.clickHandler();
+        }
+    };
+    return (h("div", { class: 'apple-pay-button-container' }, h("button", Object.assign({ class: getApplePayButtonClass(), style: getButtonStyles(), onClick: handleClick, disabled: props.disabled || props.isProcessing || !props.isAvailable, "aria-label": 'Pay with Apple Pay', type: 'button' }, props), props.isProcessing && ProcessingSpinner()), h("style", null, `
+          .apple-pay-button-container {
+            display: inline-block;
+            position: relative;
+          }
+
+          /* Apple Pay CSS classes - these are the official Apple Pay button styles */
+          .apple-pay-button {
+            display: inline-block;
+            -webkit-appearance: -apple-pay-button;
+            -apple-pay-button-type: plain; /* default */
+            -apple-pay-button-style: black; /* default */
+            border-radius: 8px;
+            cursor: pointer;
+            border: none;
+            outline: none;
+            transition: opacity 0.2s ease;
+            position: relative;
+          }
+
+          /* Button styles */
+          .apple-pay-button.apple-pay-button-black {
+            -apple-pay-button-style: black;
+          }
+
+          .apple-pay-button.apple-pay-button-white {
+            -apple-pay-button-style: white;
+          }
+
+          .apple-pay-button.apple-pay-button-white-outline {
+            -apple-pay-button-style: white-outline;
+          }
+
+          /* Button types */
+          .apple-pay-button.apple-pay-button-type-plain {
+            -apple-pay-button-type: plain;
+          }
+
+          .apple-pay-button.apple-pay-button-type-buy {
+            -apple-pay-button-type: buy;
+          }
+
+          .apple-pay-button.apple-pay-button-type-donate {
+            -apple-pay-button-type: donate;
+          }
+
+          /* Hover and disabled states */
+          .apple-pay-button:hover:not(.disabled) {
+            opacity: 0.9;
+          }
+
+          .apple-pay-button.disabled {
+            opacity: 0.5;
+            cursor: not-allowed;
+          }
+
+          /* Processing overlay */
+          .processing-overlay {
+            position: absolute;
+            top: 0;
+            left: 0;
+            right: 0;
+            bottom: 0;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            gap: 8px;
+            background: rgba(0, 0, 0, 0.8);
+            color: white;
+            border-radius: 8px;
+            font-size: 14px;
+            font-weight: 500;
+          }
+
+          .spinner {
+            width: 16px;
+            height: 16px;
+            border: 2px solid rgba(255, 255, 255, 0.3);
+            border-top: 2px solid #fff;
+            border-radius: 50%;
+            animation: spin 1s linear infinite;
+          }
+
+          @keyframes spin {
+            0% { transform: rotate(0deg); }
+            100% { transform: rotate(360deg); }
+          }
+
+          /* Responsive design */
+          @media (max-width: 480px) {
+            .apple-pay-button {
+              width: 100% !important;
+              min-width: 200px;
+            }
+          }
+        `)));
+};

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: '90bfd87560ce73c566c4cad1f1b3e4af97abd028' }, h("style", { key: '12f5050a144cabe57c13e8f1b9ffffdf6e0f848a' }, `
+        return (h("div", { key: '934b4f1a706507deb0fc3611d058abc4b6139554' }, h("style", { key: '7616b56bacde615f8cb1fa5c395feecae067eed4' }, `
           .popper-content {
             display: none;
           }
@@ -88,7 +88,7 @@ export class CustomPopper {
             display: block;
             z-index: 1030;
           }
-          `), h("div", { key: '66add24bb0e6f3c9b9d7a32ef9d21526daa34b27', class: "popper-content", ref: (el) => this.popperContentRef = el }, h("slot", { key: '87db476f26c537bd917c090fbceaf37c75c7ad2c' }))));
+          `), h("div", { key: '356093b1adf4a56d1bd9f636b199f32cc6eecd8d', class: "popper-content", ref: (el) => this.popperContentRef = el }, h("slot", { key: '55c408d7f9ca66c67f6965cdfd0b7c7ce2c330e6' }))));
     }
     static get is() { return "custom-popper"; }
     static get properties() {

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

@@ -31,10 +31,10 @@ export class CheckboxInput {
         return inputCheckbox;
     }
     render() {
-        return (h(Host, { key: 'a1bda4ddbc60f80361e2beb00a82b245cf1a3a72' }, h("div", { key: '4014edd86cf53845641a5c375cce4443163e5c3d', class: 'form-group d-flex flex-column' }, h("div", { key: 'ab637ada5a12cc81d9bc0698d8b31a64e1e4b7f1', class: "form-check" }, h("input", { key: 'bc5997c9074d9d6232d0325c48fa525c61e5b1c2', ref: el => (this.checkboxElement = el), type: "checkbox", id: this.name, name: this.name, onFocus: () => this.isFocused = true, onBlur: () => {
+        return (h(Host, { key: 'cb4fce894bdb9a24689e6a8b4078727b00001b3a' }, h("div", { key: 'da4671582783f5ebace5105434e484d816215f9e', class: 'form-group d-flex flex-column' }, h("div", { key: 'b8cd2036001fa732528391b6dbf1d0ae53043579', class: "form-check" }, h("input", { key: 'ae87dba4cdf3786e3c9a48c466deb9ef622cb5a9', 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: '7205de8817a92454b2a5b2d00748510434a67439', class: "form-check-label", htmlFor: this.name, part: label }, this.label)), h(FormControlHelpText, { key: '55d0fbaef5bb148e7309504ce090604f30e2766b', helpText: this.helpText, name: this.name }), h(FormControlErrorText, { key: '58144acc4a7a5ccf1ff70b0b273570ea58759a81', 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: 'bd2521e5b1af0a415f0780ee9708ff3c59707bcb', class: "form-check-label", htmlFor: this.name, part: label }, this.label)), h(FormControlHelpText, { key: '29ac1320b027c81203fd4f5f424a25dd83bfbb80', helpText: this.helpText, name: this.name }), h(FormControlErrorText, { key: 'a9206d48a18006459f7ae079413e7a5cc528aab5', 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

@@ -42,10 +42,10 @@ export class DateInput {
         return part;
     }
     render() {
-        return (h(Host, { key: '9e06145d50ff23ff7c7b3ef2bc0542f9e6cec388' }, h("div", { key: 'eb787b4488da0ca4b836cb4fe8577d32c5dac531', class: "form-group d-flex flex-column" }, h("div", { key: '9edd445e5b576c2087a96ab65f97f406adc61647', class: "d-flex gap-2" }, h("label", { key: '2ee675cc282033bba8f52f444cce60181eed58a3', part: label, class: "form-label", htmlFor: this.name }, this.label), h("form-control-tooltip", { key: '7c6e69baf4d521c232e48a36d42da426cfcb8573', helpText: this.helpText })), h("input", { key: 'c0364e383a104264bc8f0cb770d29309463b7b97', 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: 'bbeb4c2a8177f067f448d8dbdd1a3cb4231edca0' }, h("div", { key: '73cbd532399f7c1f3b8165d1b4e32c91698cb8af', class: "form-group d-flex flex-column" }, h("div", { key: 'bda1044c15ef82183369dee491d37bec84ef76bc', class: "d-flex gap-2" }, h("label", { key: '858e0dbe67055585a108604f8ee142047431938f', part: label, class: "form-label", htmlFor: this.name }, this.label), h("form-control-tooltip", { key: 'de42e98c63b984570a420ccef8dee18038164b23', helpText: this.helpText })), h("input", { key: '87148f5d0d56720377293de8856a0cb5a6c04333', 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: 'd3bc10c598d942b513c62f4ed2f0fdfa9b0703b2', 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: '526352380506480c7e60bd0d3a9b2dad6a96278e', errorText: this.errorText, name: this.name }))));
     }
     static get is() { return "form-control-date"; }
     static get properties() {

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

@@ -26,21 +26,21 @@ export class RadioInput {
         return inputRadio;
     }
     render() {
-        return (h(Host, { key: '984c9f44082c3672f4b27b5a0059061763b6fede', class: 'form-group d-flex flex-column' }, h("div", { key: 'e5782af27624f153276d2c4cc3d7f899560ff7a9', class: "form-check" }, h("input", { key: '3d36bf3f4fc10fa36cff6a8b9fd38ec3bd082713', ref: el => (this.radioElement = el), type: "radio", id: `${this.name}-${this.value}`, name: this.name, onFocus: () => this.isFocused = true, onBlur: () => {
+        return (h(Host, { key: '215443342d15bd2ab9ad4103e3798ed77a3c6d48', class: 'form-group d-flex flex-column' }, h("div", { key: 'a7ec61cb97c5fc10b799a90d1df55e11bee7945c', class: "form-check" }, h("input", { key: 'ee46d4ae13daca74f42ce2c472e08255c90a0a80', 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: '9f647a6cf94d280aa665a21fb2b6f492d2d6a931', class: "form-check-label", htmlFor: `${this.name}-${this.value}`, part: label }, this.label)), h("form-control-help-text", { key: 'bc315679286f429d49b1f113e74cb0c6307f7e96', helpText: this.helpText, name: this.name }), h("form-control-error-text", { key: 'e315ab0413dc4e82fd7bd6457e95199980daa732', 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: '87bf82a7c8512f598c00091d56a35488ad6f26b7', class: "form-check-label", htmlFor: `${this.name}-${this.value}`, part: label }, this.label)), h("form-control-help-text", { key: '905f1c94bf8538cd7550840935c2951007ed33c2', helpText: this.helpText, name: this.name }), h("form-control-error-text", { key: '0a0a531f057ab7bd2658ea8f1dc4b028a87b39a3', errorText: this.errorText, name: this.name })));
     }
     static get is() { return "form-control-radio"; }
     static get properties() {
         return {
             "label": {
-                "type": "string",
+                "type": "any",
                 "attribute": "label",
                 "mutable": false,
                 "complexType": {
-                    "original": "string",
-                    "resolved": "string",
+                    "original": "any",
+                    "resolved": "any",
                     "references": {}
                 },
                 "required": false,

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

@@ -35,10 +35,10 @@ export class SelectInput {
     }
     render() {
         var _a;
-        return (h(Host, { key: '9842d5b2a2069292ded1b960bc024d7995a6d58e' }, h("div", { key: 'b4b5fe37f88661d2f592864adb16ae997a38b484', class: "form-group d-flex flex-column" }, h("div", { key: 'f70c40c7e4bdd58b985ac9b6e76fbf48ff15261e', class: "d-flex align-items-start gap-2" }, h("label", { key: '6b1d9e1f3b22e702962c1d23a057f08222af5e1a', part: label, class: "form-label", htmlFor: this.name }, this.label), h("form-control-tooltip", { key: 'fae7835adde280a8c4f48f3c9b169240aac3672d', helpText: this.helpText })), h("select", { key: 'bee75d1bb56ed104473efcad7d8c432b50bfbb38', ref: el => (this.selectElement = el), id: this.name, name: this.name, onFocus: () => this.isFocused = true, onBlur: () => {
+        return (h(Host, { key: 'a7428cd8a89414d877dafe9948f5652f28c36a5f' }, h("div", { key: 'c9d5d5d2f8a6292484d3606d883dbb9d168aa316', class: "form-group d-flex flex-column" }, h("div", { key: 'c1aba6560934b966de02e9afef77428c6060eefb', class: "d-flex align-items-start gap-2" }, h("label", { key: '5fbbb09c3955ff3285b006f24c3873082394d39c', part: label, class: "form-label", htmlFor: this.name }, this.label), h("form-control-tooltip", { key: 'f756a05a8273ab6fd65205bb5c32cd34c30a9db3', helpText: this.helpText })), h("select", { key: 'ffd0fa461d3c35da5595e705a7c4068066d8f971', ref: el => (this.selectElement = el), id: this.name, name: this.name, onFocus: () => this.isFocused = true, onBlur: () => {
                 this.isFocused = false;
                 this.formControlBlur.emit();
-            }, onInput: this.handleFormControlInput, part: this.part, class: this.errorText ? 'form-select is-invalid' : 'form-select', disabled: this.disabled }, (_a = this.options) === null || _a === void 0 ? void 0 : _a.map(option => (h("option", { value: option.value }, option.label)))), h(FormControlErrorText, { key: 'f5df46552aa8124b344260bca05bd02c695d0fe6', errorText: this.errorText, name: this.name }))));
+            }, onInput: this.handleFormControlInput, part: this.part, class: this.errorText ? 'form-select is-invalid' : 'form-select', disabled: this.disabled }, (_a = this.options) === null || _a === void 0 ? void 0 : _a.map(option => (h("option", { value: option.value }, option.label)))), h(FormControlErrorText, { key: '6ee60bb236ccf7cea7bc8ccf946a363d2cd26906', errorText: this.errorText, name: this.name }))));
     }
     static get is() { return "form-control-select"; }
     static get properties() {

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

@@ -10,7 +10,7 @@ export class JustifiRadioListItem {
         };
     }
     render() {
-        return (h(StyledHost, { key: '492a73e2bab02c04aa8733ce0b9ab801e5ff8875' }, h("div", { key: 'c095a98ba11739b85ece4c7bb0e0c30e7e08ec7b', class: `radio-list-item p-3 ${this.class || ''}`, part: radioListItem, onClick: this.handleClick, hidden: this.hidden }, h("form-control-radio", { key: '050ed9e552c4a8bf4462e544d3496bed356e7c06', name: this.name, value: this.value, checked: this.checked, label: this.label, inputHandler: () => null }))));
+        return (h(StyledHost, { key: '1ae40f787970160e38b72f917bda96f480d2a890' }, h("div", { key: '2130596c8294cc38365e6126806735da0f93ef4a', class: `radio-list-item p-3 ${this.class || ''}`, part: radioListItem, onClick: this.handleClick, hidden: this.hidden }, h("form-control-radio", { key: '7d5524f518430f2bfd1c9863f354318929353cfb', name: this.name, value: this.value, checked: this.checked, label: this.label, inputHandler: () => null }))));
     }
     static get is() { return "justifi-radio-list-item"; }
     static get encapsulation() { return "shadow"; }
@@ -55,12 +55,12 @@ export class JustifiRadioListItem {
                 "reflect": false
             },
             "label": {
-                "type": "string",
+                "type": "any",
                 "attribute": "label",
                 "mutable": false,
                 "complexType": {
-                    "original": "string",
-                    "resolved": "string",
+                    "original": "any",
+                    "resolved": "any",
                     "references": {}
                 },
                 "required": true,

package/dist/collection/utils/check-pkg-version.js

@@ -5,6 +5,12 @@ const latestVersion = async (packageName) => {
     return json.version;
 };
 export const checkPkgVersion = async () => {
+    var _a, _b;
+    // Skip version check in test environments to avoid async logs after tests complete
+    if (typeof process !== 'undefined' &&
+        (((_a = process.env) === null || _a === void 0 ? void 0 : _a.NODE_ENV) === 'test' || ((_b = process.env) === null || _b === void 0 ? void 0 : _b.JEST_WORKER_ID))) {
+        return;
+    }
     const version = packageJson.version;
     const packageName = packageJson.name;
     const latest = await latestVersion(packageName);

package/dist/collection/utils/utils.js

@@ -177,3 +177,8 @@ export function generateId(length = 10) {
     }
     return result;
 }
+export function generateTabId() {
+    var _a;
+    return (((_a = crypto.randomUUID) === null || _a === void 0 ? void 0 : _a.call(crypto)) ||
+        `${Date.now()}-${Math.random().toString(36).slice(2)}`);
+}