@justifi/webcomponents 5.7.7 → 6.0.0-rc.10

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

@@ -0,0 +1,78 @@
+import { createStore } from "@stencil/store";
+import { PaymentMethodTypes } from "../api";
+import { PAYMENT_METHODS } from "../components/modular-checkout/ModularCheckout";
+const initialState = {
+    accountId: '',
+    authToken: '',
+    billingFormFields: {
+        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: { type: PaymentMethodTypes.card },
+    totalAmount: 0,
+};
+const { state: checkoutStore, onChange } = createStore(initialState);
+Object.keys(initialState).forEach((key) => {
+    // @ts-ignore
+    onChange(key, (newValue) => {
+        checkoutStore[key] = newValue;
+    });
+});
+// 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: 'fe9f155b8fc3d007a94654801edeacf2d52b9382' }, h("style", { key: '00f31be773f765a7857f0e07d8e1162b721bde11' }, `
+        return (h("div", { key: '90bfd87560ce73c566c4cad1f1b3e4af97abd028' }, h("style", { key: '12f5050a144cabe57c13e8f1b9ffffdf6e0f848a' }, `
           .popper-content {
             display: none;
           }
@@ -88,7 +88,7 @@ export class CustomPopper {
             display: block;
             z-index: 1030;
           }
-          `), h("div", { key: '8a790cb7a27fe293308ab5845c8911e4857d92a4', class: "popper-content", ref: (el) => this.popperContentRef = el }, h("slot", { key: 'fc26f065c685d6787561157d1deac4f1f8757024' }))));
+          `), h("div", { key: '66add24bb0e6f3c9b9d7a32ef9d21526daa34b27', class: "popper-content", ref: (el) => this.popperContentRef = el }, h("slot", { key: '87db476f26c537bd917c090fbceaf37c75c7ad2c' }))));
     }
     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: 'ef460f128592bfd184fca86069bfab332a64eeff' }, h("div", { key: '78325197057fa5e0596cd61b9afd49fde6af8450', class: 'form-group d-flex flex-column' }, h("div", { key: '6e378253d00756ffd119e6a1a2ac077c1ab174c1', class: "form-check" }, h("input", { key: '0472ba4b38c104af063a486b73126ed7b0a4fec3', ref: el => (this.checkboxElement = el), type: "checkbox", id: this.name, name: this.name, onFocus: () => this.isFocused = true, onBlur: () => {
+        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: () => {
                 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: '304f9cf54c6e04abf68de2f2105693591e0d01ac', class: "form-check-label", htmlFor: this.name, part: label }, this.label)), h(FormControlHelpText, { key: 'ecff18172b609cf841b3e56312f533c09003fc70', helpText: this.helpText, name: this.name }), h(FormControlErrorText, { key: '640c5b72c4eab21d6e0d4c07e1c0cc7982c11d06', 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: '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 }))));
     }
     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: '387ca851d0ba965900607a3dd417dd59f974c718' }, h("div", { key: 'bdf79a396ecdae500c55a6686531cc78325c4580', class: "form-group d-flex flex-column" }, h("div", { key: '3196864654ab4f9724119daf618fe1b64cca13df', class: "d-flex gap-2" }, h("label", { key: 'a0c9fce77a892dea1d8a87f2771f8131eae677db', part: label, class: "form-label", htmlFor: this.name }, this.label), h("form-control-tooltip", { key: 'a4c89f3d96d7f41f8659f57a0899e3867ecc483a', helpText: this.helpText })), h("input", { key: '071accb6b7f5f8c4af48aaeb5cac85a521e32876', 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: '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: () => {
                 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: '57fce536cd671823b56a78fddf9d9059082f1dde', 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: 'd3bc10c598d942b513c62f4ed2f0fdfa9b0703b2', 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

@@ -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: '65a74abf67c4a1042e464bdfe54639e741d26b6a', exportparts: "label,input,input-invalid" }, h("div", { key: '0f1b64014947338a330121a173db5e2ac6a23922', class: "form-group d-flex flex-column" }, h("div", { key: '96adc32860be2d6c5b39413c88eb27110867b84b', class: "d-flex align-items-start gap-2" }, h("label", { key: '307d3a47e2eaa2ef4db50c5c2024bd05d6734713', part: "label", class: "form-label", htmlFor: this.name }, this.label), h("form-control-tooltip", { key: '19c747ac4b049cd36f16fcb7ab9d701ce860b3cc', helpText: this.helpText })), h("input", { key: 'b2fc110e75ccf066a69696b514dfcc347bfa4533', 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: '6f8c055b12038b984eadafcffe15f2c0fb1c3eba', errorText: this.errorText, name: this.name }))));
+        return (h(Host, { key: '44f72494590e41cc25ce8df4b14d7e73e0e0e0b2', exportparts: "label,input,input-invalid" }, h("div", { key: '7cf04dc8c5e41b9d93335f75ce2b06b898e0c061', class: "form-group d-flex flex-column" }, h("div", { key: 'a23e716bedb23a53c53a1426fddbdb962c5747bc', class: "d-flex align-items-start gap-2" }, h("label", { key: '9fc7762d30b7bb20651a152d64f549d465c8024a', part: "label", class: "form-label", htmlFor: this.name }, this.label), h("form-control-tooltip", { key: '3d5ee1381ae6f32b3eaeaa6b0033ab6897aaee0a', helpText: this.helpText })), h("input", { key: 'ed14e978a997b98e23496a58ec419025b3927c23', 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: '04281c0fcaa93ef1341ef727d34b028bf162c804', 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: 'd2a65bf95224f0c7a4ee68d926e2895df0a3503d' }, h("div", { key: '522a1224df863e600dfa574642cc93716c11280f', class: "form-group d-flex flex-column" }, h("div", { key: 'a7d95e45e7faac780142ae5a0cdf6eb6bf23012b', class: "d-flex align-items-start gap-2" }, h("label", { key: '19d0d2c0282d443b36e6a817c622e2015f1d636e', part: label, class: "form-label", htmlFor: this.name }, this.label), h("form-control-tooltip", { key: '52ecd0a5185ea7cedb5b13de82b3e66eb8252915', helpText: this.helpText })), h("input", { key: '1414537ee264cbbc7e69edb38911401c6de29717', 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: '7c6694e256d2b10d2789d3325848c782ee59628d' }, h("div", { key: 'b8b9da61559547cb162fc4e9d6226fa963b32392', class: "form-group d-flex flex-column" }, h("div", { key: '928b0a8403151c01c10335407e9763650a334f2d', class: "d-flex align-items-start gap-2" }, h("label", { key: 'be1158705e4cf3efdf94d2ff2959cdbe064b4f7b', part: label, class: "form-label", htmlFor: this.name }, this.label), h("form-control-tooltip", { key: 'ca3ab534358d1dbbbf5635215d9c97e83b91750e', helpText: this.helpText })), h("input", { key: '97c1e48f9d615f3adcebf305bd8368e06ac69ed1', 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: 'de236bb9de009da258b2780c6097bf8f7101bd18', errorText: this.errorText, name: this.name }))));
+            } }), h(FormControlErrorText, { key: '6c4aa5ad35ae4590e4a80e95a582157418d3103f', 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: 'e8ab870c05f8b7afe5d88dd5a140f7a7755352a8' }, h("div", { key: '20d0d1829323bd768d35f7b705ea217b2dae6c68', class: "form-group d-flex flex-column" }, h("label", { key: 'd070a678bb54d81ee94cc4d9e9e1a9e061f1f982', part: label, class: "form-label", htmlFor: this.name }, this.label), h(FormControlHelpText, { key: 'f2497f970c6701e1079cdb5d7b2d7cf756d57077', name: this.name, helpText: this.helpText }), h("div", { key: 'ef456df0dddcafcd5af8f93c5b65b435544a98ee', class: "input-group" }, h("span", { key: '4c7e2380dacaf41fe6297832e5e0c91fa886685d', class: "input-group-text", part: inputAdornment }, "$"), h("input", { key: 'e78dcb0ccd5a75ee13ec8ef8aff63b3cd0bd767a', ref: el => this.formControl = el, id: this.name, name: this.name, onFocus: () => this.isFocused = true, onBlur: () => {
+        return (h(Host, { key: 'e3fc90899be1e53399be9a2d1cb7dc044a66cd9a' }, h("div", { key: 'ecc516c61f700f329022dd842b5abac11ede210e', class: "form-group d-flex flex-column" }, h("label", { key: 'c893dfa4275404d9f511f04289f59b2fff72eebb', part: label, class: "form-label", htmlFor: this.name }, this.label), h(FormControlHelpText, { key: 'fdb479013a60ad6dc75fc49ac43821678713be94', name: this.name, helpText: this.helpText }), h("div", { key: 'cad6f25647339c0754160a55016d61c4613f8160', class: "input-group" }, h("span", { key: 'eb5206a0f63ba81581edaf401239d6dd7f55257a', class: "input-group-text", part: inputAdornment }, "$"), h("input", { key: '65265e64b5d31c676cefe0f580a801bc2a763c3b', 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: 'd79a5ef4dd32486c8fb94602e02ceb8ef5e9ca21', 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: 'ac486c8cc0a3f4ec0cf63cbac77935d479a2f376', 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: '3b909f365c2a545a2d255bfaec281812a391c3f7' }, h("div", { key: 'd40c59e5911aabeaf738bddb4b9fe4938f043f9f', class: "form-group d-flex flex-column" }, h("div", { key: 'bad6d496763bfa3eb91797369a67f1501439d053', class: "d-flex align-items-start gap-2" }, h("label", { key: 'ecd7157e378449736090d37deab6143e91e26f2d', part: label, class: "form-label", htmlFor: this.name }, this.label), h("form-control-tooltip", { key: '76f4f2b7e2103087bf2fb15c0ef9f2444f61b746', helpText: this.helpText })), h("input", { key: '5ab0ee72a81073b62170a1136429f2e7f7fb61a1', ref: el => (this.textInput = el), id: this.name, name: this.name, onFocus: () => (this.isFocused = true), onBlur: () => {
+        return (h(Host, { key: 'b80051f9e971bac339a5ce7e8abb0475a91f9c46' }, h("div", { key: 'f5c63c2723e6faa33263b12f5b4728d4255f6725', class: "form-group d-flex flex-column" }, h("div", { key: '6aafb989bd1c3bc4ed66fec7cc94189dc17cb0f0', class: "d-flex align-items-start gap-2" }, h("label", { key: 'cfc242e804398f642869dd9cc1a97d841798d66d', part: label, class: "form-label", htmlFor: this.name }, this.label), h("form-control-tooltip", { key: 'db7dc909c2545e30ff31579499363af2c33da5af', helpText: this.helpText })), h("input", { key: 'd68876ebd0b5d6395f83a427d5b2f2095ed76623', 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: 'c6a0f38dfb4ad8b12c75dead15cca55e16bdcf1d', 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: '99a1db5f72d19ae22eb52db419dcdc01c3053ec2', 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: '4b7549a92438ca0c2af28ca1c01c0aafcbafb0b5' }, h("div", { key: '4367a89894beca5359a4a1fe6e000b99e89c4cf8', class: 'form-group d-flex flex-column' }, h("label", { key: '989fa10991b685da0e3419190733c491403a309d', part: label, class: "form-label", htmlFor: this.name }, this.label), h("input", { key: '1e1f9d45d9528e12ae2d79933fc2c44e2f739139', id: this.name, name: this.name, onFocus: () => this.isFocused = true, onBlur: () => {
+        return (h(Host, { key: '7698cc4f02f193d42d793082401a0356ea9510ee' }, h("div", { key: '04a7ad2b7487a520b04c84cd8bf002de3e30cf38', class: 'form-group d-flex flex-column' }, h("label", { key: '25029094eb26e9d7d01071d005a254ee0d935301', part: label, class: "form-label", htmlFor: this.name }, this.label), h("input", { key: '1283bf554572cec3d8b3a1d6281783dbd8f5601d', 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: '4e57da3b445639563cd60d8481522fdd3450f9b7', helpText: this.helpText, name: this.name }), h(FormControlErrorText, { key: 'd038896853b604804af4c3f88a33f57c4d4a445f', 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: '5c1be4c979c99fd2988b5631ef7eb3f18e5c1243', helpText: this.helpText, name: this.name }), h(FormControlErrorText, { key: 'b55c5ab0d9aa5c7899fad1b001a3b228a844dbc0', 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,21 +26,21 @@ export class RadioInput {
         return inputRadio;
     }
     render() {
-        return (h(Host, { key: '4cc66381051471ec207680e04daa50697296ff86', class: 'form-group d-flex flex-column' }, h("div", { key: '6f4aef601b75e7bc4b1530f3deb3d5c34daada1b', class: "form-check" }, h("input", { key: '11db889bf99cc8a7dd0e5f7a92834b4db63eb34a', 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: '20cb045393b05cd8b30d655b4d199a0476314007', class: "form-check-label", htmlFor: `${this.name}-${this.value}`, part: label }, this.label)), h("form-control-help-text", { key: '31664ad4a401ebf5184fff7cd40a78326672ba2b', helpText: this.helpText, name: this.name }), h("form-control-error-text", { key: '7d28efa52994e3fb112d58a571f9b043972bb065', 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: '16afff88a986b1e1b5596aeb3c780c11632ead9e' }, h("div", { key: '6a025a451737f626e6597e667a8825e815250f89', class: "form-group d-flex flex-column" }, h("div", { key: 'e6582c06498576f23b55dfc454e2c8f73e736e4a', class: "d-flex align-items-start gap-2" }, h("label", { key: '6d8c53a2404c66d04e217faf397db3e7e7f95f70', part: label, class: "form-label", htmlFor: this.name }, this.label), h("form-control-tooltip", { key: '80f38de1fafd576e340603147917194a0ca88def', helpText: this.helpText })), h("select", { key: 'a747f1946d552aa2bef3141b3ec05119a2fa0f15', ref: el => (this.selectElement = el), id: this.name, name: this.name, onFocus: () => this.isFocused = true, onBlur: () => {
+        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: () => {
                 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: 'f2a725b0cac08bb1ad33d8af4e8a0efb64fe9d45', 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: 'f5df46552aa8124b344260bca05bd02c695d0fe6', errorText: this.errorText, name: this.name }))));
     }
     static get is() { return "form-control-select"; }
     static get properties() {

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

@@ -36,10 +36,10 @@ export class TextInput {
         return input;
     }
     render() {
-        return (h(Host, { key: '54560107b58c2a11f306b499dc926be155b22b51' }, h("div", { key: 'a62dab043fa298ae060c7e910b1748af607b8bd5', class: "form-group d-flex flex-column" }, h("div", { key: 'ad624f874d571ee713c8f36cf24faab4d3bcf27d', class: "d-flex align-items-start gap-2" }, h("label", { key: '6c0b79ef74a686975c2d2071d80f877fae7428c1', part: label, class: "form-label", htmlFor: this.name }, this.label), h("form-control-tooltip", { key: '0eb37ab82f5eb69cc28db76249fcf45633b8bba5', helpText: this.helpText })), h("input", { key: 'd23affba3abef502dadf503ef59d140d20fccb89', id: this.name, name: this.name, onFocus: () => this.isFocused = true, onBlur: () => {
+        return (h(Host, { key: 'cd84a88604a278f60d81b3069449c1a4d5477d19' }, h("div", { key: 'e1ac6fc0c40c1a7142ed873654c44edf476101a5', class: "form-group d-flex flex-column" }, h("div", { key: '4bdefa049238c098e0a9fd036707e2e29089610b', class: "d-flex align-items-start gap-2" }, h("label", { key: '749b24acf4ea40e4dcf5c87ef0c5e833696469ae', part: label, class: "form-label", htmlFor: this.name }, this.label), h("form-control-tooltip", { key: 'a054ccd7be60d88ef69f88a55514f54fffd8abb3', helpText: this.helpText })), h("input", { key: '7444a06fd70bb71d8f481697c90a0f94154314f0', 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: '58224f241eab27ca2e46883acce95f88a2a8eebf', 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: '093124125e3aae9c156993718fb602f74b9446dd', 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: '28fbf164d56ff9d9daeec56db1132a1342070ab8' }, h("div", { key: 'c88783d5fd02f8d9b507449b72fb5350c0adfde2', class: "form-group d-flex flex-column" }, h("label", { key: 'dcccf11884c7c91c2bc8eb01439ce2cdd558da9e', part: label, class: "form-label", htmlFor: this.name }, this.label), h("textarea", { key: '9e51c0c08739aaefc37a95f8651373c96b7ff38d', id: this.name, name: this.name, onFocus: () => this.isFocused = true, onBlur: () => {
+        return (h(Host, { key: '441f155ccc2b2d47ca059f378a2ce4654dee9226' }, h("div", { key: '8b40b7a1d71264f34ff42f50c28f8a2848f8b7e5', class: "form-group d-flex flex-column" }, h("label", { key: '15b349f7c0409bc5b2687d6c2b981d364c89d535', part: label, class: "form-label", htmlFor: this.name }, this.label), h("textarea", { key: '9f48b1b48aba962d4c331141d9c37fd76f5533f7', 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: 'df079e1b6f6dd0208779398975e52ceade80f6ae', helpText: this.helpText, name: this.name }), h("form-control-error-text", { key: 'fa25b7836d84edb480af7e4a82319192a73fd7bc', 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: 'a83d38aa90284c9744bed539cb491b9af5615b1c', helpText: this.helpText, name: this.name }), h("form-control-error-text", { key: '3ea714634686f0e48bc2e325f38af249614bbcea', 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: '61f65f5960ecc45fe7e321299bdd367fde6f3f57' }, h("input", { key: 'ae2126e3efa70fe09a1211e0335667f324471649', 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: 'eb0135c733e6a4273855b6c74efab83e51d3788d' }, h("input", { key: '48577dd678d44b2382bbeadcaa2efc14484f8638', 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: 'c7e816ffb97c88217b50e8e8ecc5c0fe210bcdbe', class: "form-group d-flex flex-column" }, h("div", { key: '2e38b8e3ddeaba93556c52f20ff67b8324255bda', style: {
+        return (h(Host, { key: '07a697a99ef1b601c3f95d176c0eb28a695afff5', class: "form-group d-flex flex-column" }, h("div", { key: 'f9a1cf30b2020ae9de993dc363b07cd1e897c82d', style: {
                 visibility: this.iframeLoaded ? 'visible' : 'hidden',
                 height: this.iframeLoaded ? 'auto' : '0',
-            } }, h("label", { key: '75c8d278c641316e797c4cd79905ff554920a4fc', class: "form-label", htmlFor: "", part: label }, this.label || ''), h("div", { key: 'e06f9f5f09fb0b3679df6195c1557698790a6331', 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: 'c5f7a5c687855d59057dfa52c8f4b5c157c24107', id: this.inputId, name: this.inputId, src: `${this.iframeOrigin}?${this.urlParams}`, ref: el => {
+            } }, h("label", { key: '09c186cb27e0fc75352c8028f1ff4e92866f3984', class: "form-label", htmlFor: "", part: label }, this.label || ''), h("div", { key: '758ea464591a51ddc183256ebcd66238602bc4cc', 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: 'c2956bb89e30fe2ba1a9111fe71681883470879b', 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: '116d0495276351a49014fe565977a244596284ee', errorText: this.errorText, name: this.inputId }))));
+            } })), h(FormControlErrorText, { key: '0ab5542c8c8a8242aefee11cc4c1b0815f27f0aa', errorText: this.errorText, name: this.inputId }))));
     }
     static get is() { return "iframe-input"; }
     static get properties() {
@@ -200,14 +200,14 @@ export class IframeInput {
             },
             "tokenize": {
                 "complexType": {
-                    "signature": "(clientId: string, paymentMethodMetadata: any, account?: string) => Promise<any>",
+                    "signature": "(clientId: string, paymentMethodMetadata: IPaymentMethodMetadata, account?: string) => Promise<any>",
                     "parameters": [{
                             "name": "clientId",
                             "type": "string",
                             "docs": ""
                         }, {
                             "name": "paymentMethodMetadata",
-                            "type": "any",
+                            "type": "ISavedPaymentMethod & ISubmitCheckoutArgs",
                             "docs": ""
                         }, {
                             "name": "account",
@@ -218,6 +218,11 @@ export class IframeInput {
                         "Promise": {
                             "location": "global",
                             "id": "global::Promise"
+                        },
+                        "IPaymentMethodMetadata": {
+                            "location": "import",
+                            "path": "../../api/PaymentMethod",
+                            "id": "src/api/PaymentMethod.ts::IPaymentMethodMetadata"
                         }
                     },
                     "return": "Promise<any>"

package/dist/collection/ui-components/index.js

@@ -9,3 +9,4 @@ export * from './form/form-helpers/form-control-help-text';
 export * from './form/form-helpers/form-control-error-text';
 export * from './details/details';
 export * from './table';
+export * from './shadow-dom-components/justifi-radio-list-item';