@justifi/webcomponents 6.0.0-rc.4 → 6.0.0-rc.6

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

@@ -2,13 +2,13 @@ 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 { checkoutStore } from "../../store/checkout.store";
+import { PAYMENT_METHODS } from "../modular-checkout/ModularCheckout";
 // Constants
 const PAYMENT_METHOD_TYPE_LABELS = {
-    [PaymentMethodTypes.bankAccount]: 'New bank account',
-    [PaymentMethodTypes.card]: 'New credit or debit card',
+    [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',
@@ -18,14 +18,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 +32,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 = event.detail;
     }
     async fillBillingForm(fields) {
         var _a;
@@ -47,6 +50,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 +93,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 +129,14 @@ export class TokenizePaymentMethod {
         }
     }
     setDefaultSelectedPaymentMethod() {
-        if (this.selectedPaymentMethodId) {
+        if (this.selectedPaymentMethod) {
             return;
         }
         if (!this.disableCreditCard) {
-            this.selectedPaymentMethodId = PaymentMethodTypes.card;
+            this.selectedPaymentMethod = PAYMENT_METHODS.NEW_CARD;
         }
         else if (!this.disableBankAccount) {
-            this.selectedPaymentMethodId = PaymentMethodTypes.bankAccount;
+            this.selectedPaymentMethod = PAYMENT_METHODS.NEW_BANK_ACCOUNT;
         }
     }
     setComputedHideSubmitButton() {
@@ -143,10 +163,10 @@ export class TokenizePaymentMethod {
     get availablePaymentMethods() {
         const methods = [];
         if (!this.disableCreditCard) {
-            methods.push(PaymentMethodTypes.card);
+            methods.push(PAYMENT_METHODS.NEW_CARD);
         }
         if (!this.disableBankAccount) {
-            methods.push(PaymentMethodTypes.bankAccount);
+            methods.push(PAYMENT_METHODS.NEW_BANK_ACCOUNT);
         }
         return methods;
     }
@@ -182,7 +202,8 @@ export class TokenizePaymentMethod {
                     },
                 };
             }
-            return await this.performTokenization();
+            const result = await this.performTokenization();
+            return result;
         }
         catch (error) {
             return { error };
@@ -200,20 +221,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 +235,17 @@ export class TokenizePaymentMethod {
         return this.disableCreditCard || this.disableBankAccount;
     }
     renderPaymentMethodOption(paymentMethodType) {
-        const isSelected = this.selectedPaymentMethodId === paymentMethodType;
+        const isSelected = this.selectedPaymentMethod === paymentMethodType;
         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("div", { class: "mt-4" }, h("justifi-save-new-payment-method", { hidden: !this.paymentMethodGroupID }))));
     }
     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) }));
+        return paymentMethodId === 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: 'ebe1d84471e0c6a32ee69d457f63755801d68577' }, h("form", { key: '7cf3aa01ead5602aaa31a4400d6bd9e1f782c65d' }, h("fieldset", { key: 'e8b430c8defd6103f53cb0a534466093983cd409' }, h("div", { key: '40d2206b6c43d3f3f05ad95b7731e3ecbe3eba83', class: "row gy-3" }, h("div", { key: 'e548fea0d586e8b0a3c0232e05bf7bb11bd2fbfc', class: "col-12" }, this.availablePaymentMethods.map((method) => this.renderPaymentMethodOption(method))), h("div", { key: 'f903481cbc309fa89d8cb0c124d2cdbf41f034fd', class: "col-12" }, h("justifi-button", { key: 'e76830507419530b3b1da8f2eee8e5ff323fdf59', 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: 'a11012d80460057b0dc16dc6a470ad57bad12ca2' }, h("form", { key: '76c8f50a5394f80b171295337a4382a4713d5ec1' }, h("fieldset", { key: '955f99016cb495628afe016037a154fcc39f5ac3' }, h("div", { key: 'a80324943093aa2df3804f5358fb904b5540d92c', class: "row gy-3" }, h("div", { key: 'b5fc2d063e2a859f52c4914ea669b35134d7d256', class: "col-12" }, this.availablePaymentMethods.map((method) => this.renderPaymentMethodOption(method))), h("div", { key: 'f2a759d16742c346bd7833c72916b2a058a1be34', class: "col-12" }, h("justifi-button", { key: 'ab6238aa25cc9dae2851b4156b7c2ac88802b4fd', 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() {
@@ -419,9 +426,9 @@ export class TokenizePaymentMethod {
     }
     static get states() {
         return {
+            "computedHideSubmitButton": {},
             "isLoading": {},
-            "selectedPaymentMethodId": {},
-            "computedHideSubmitButton": {}
+            "selectedPaymentMethod": {}
         };
     }
     static get events() {
@@ -552,6 +559,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/store/checkout.store.js

@@ -6,22 +6,25 @@ 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: undefined,
     totalAmount: 0,
 };
 const { state: checkoutStore, onChange } = createStore(initialState);

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: 'fa3e4321b61261759f0e180e61bdae9fc5f73944' }, h("style", { key: '1b543c604267f05bd47d7f2a1997e03051f4ab7c' }, `
+        return (h("div", { key: '8bfc9503d439750dac5b1d7bf57b52a679342203' }, h("style", { key: 'c9b621af52af23eca1b31d212d212e9e1851efb4' }, `
           .popper-content {
             display: none;
           }
@@ -88,7 +88,7 @@ export class CustomPopper {
             display: block;
             z-index: 1030;
           }
-          `), h("div", { key: '06ef5a6d7f4f9583c683647641eecfda0bf41626', class: "popper-content", ref: (el) => this.popperContentRef = el }, h("slot", { key: '1d3edcdab5f2cbeeb77b6166521c6f54543ebf7c' }))));
+          `), h("div", { key: '278b302602f6694c3d8897a11caffe8053396e14', class: "popper-content", ref: (el) => this.popperContentRef = el }, h("slot", { key: '512ccb791eaddb6d215f15257c4b09e0aad009c8' }))));
     }
     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: '4fb0d856e58021192e396f7dae287b99c77bd791' }, h("div", { key: '5007f605183d706f3376a39a7b7ec7d525d6b39e', class: 'form-group d-flex flex-column' }, h("div", { key: '86fc70ca655ce4f3dd606ae1ce6f68e6d38aad87', class: "form-check" }, h("input", { key: 'fd60081db4f79fcd83beb98eebcf03d941895546', ref: el => (this.checkboxElement = el), type: "checkbox", id: this.name, name: this.name, onFocus: () => this.isFocused = true, onBlur: () => {
+        return (h(Host, { key: '128a949dbbbf194f13552ec2b6d9cc47e643459a' }, h("div", { key: '24fdfab17ddc656c7ed4ce4a26298bb3312b84b5', class: 'form-group d-flex flex-column' }, h("div", { key: 'd66bc9dd8ec3018e934d4279cfc78073e1529ddb', class: "form-check" }, h("input", { key: '754d00dbfa79b34ba919d12ecaf6f69114c92a37', 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: '8af1e51c951aff7765a2f4b01d7a3870b5c83869', class: "form-check-label", htmlFor: this.name, part: label }, this.label)), h(FormControlHelpText, { key: 'a197c2558d6745bc91b4cdee752b11c4f750f024', helpText: this.helpText, name: this.name }), h(FormControlErrorText, { key: 'c12c67f283dfffb42c7a3a947e3dfc7ac40b13ec', 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: '07928f06ba16f3871948610d8c043de985cb9810', class: "form-check-label", htmlFor: this.name, part: label }, this.label)), h(FormControlHelpText, { key: '83976d5d65b37aa34e41879f0db3347a8902b7d7', helpText: this.helpText, name: this.name }), h(FormControlErrorText, { key: '3a4e23a3e9f174d51683518608e2568e0edc72e2', 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: 'fec9b5747b18a685be748d7d54297b6e9e169289' }, h("div", { key: '78cfd327c0efef8e5a5efdd21f54bac56fc88251', class: "form-group d-flex flex-column" }, h("div", { key: 'bfbb716509fef6189d8c48147a794ca5934807bb', class: "d-flex gap-2" }, h("label", { key: '655c4c941dcffff5692c1c2391a17fc8db4de2c4', part: label, class: "form-label", htmlFor: this.name }, this.label), h("form-control-tooltip", { key: 'a738c14fc219bd450920a493e7ecdac8e2e42c22', helpText: this.helpText })), h("input", { key: '4c0a532ac2da38dfc038691c90ac0fc937e14c49', 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: 'a309446013bd49b83f2cd63ddde74595b4ad94b5' }, h("div", { key: 'f29f5561099a85767d3a95411d9234e45ce2abf6', class: "form-group d-flex flex-column" }, h("div", { key: 'd0406aa96a962e26053e9495c5be6bef8ce10a49', class: "d-flex gap-2" }, h("label", { key: '72c5d168b03c79083a93481417b5361d4b4acec4', part: label, class: "form-label", htmlFor: this.name }, this.label), h("form-control-tooltip", { key: '2954e61b39260bf40d2190ed0d6d0c0a4d2fbec1', helpText: this.helpText })), h("input", { key: 'bf82716d44ce3a96cf70c8be2b349d598839e39d', 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: '88fde8e90d540a3bf769fc1b1f400b6a31ac3e8b', 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: '1c6036c4ea8ebd3303af2400eb0c0884329a7b33', 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: 'fdfbffe4afa13884ed2dfcad7ac7aae2cc5d1466', exportparts: "label,input,input-invalid" }, h("div", { key: 'a40217b361515dc473840238f6de75becd846add', class: "form-group d-flex flex-column" }, h("div", { key: '148ff9bca27e1b1f3ef905c81ff31af5de3feb08', class: "d-flex align-items-start gap-2" }, h("label", { key: 'bbe1b2af670827ebd3ea2ca7c6b1ae616d2c0aa4', part: "label", class: "form-label", htmlFor: this.name }, this.label), h("form-control-tooltip", { key: 'c6092aa758205b4c9f3c389980183f28d56f86ef', helpText: this.helpText })), h("input", { key: '18d3595c9eb579c84d6373237fcea037d095d4c5', 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: 'bc48d8fd8c489507303b66745161963d31ddb84d', errorText: this.errorText, name: this.name }))));
+        return (h(Host, { key: 'e4b695469afbe84e1fc03b9f8dab55cc86dee32a', exportparts: "label,input,input-invalid" }, h("div", { key: '7f8ed80d7c8ffb10955c3aa0298011936ee662cb', class: "form-group d-flex flex-column" }, h("div", { key: '517ee3552d3ba2c9096961fa152580ad2768cf9f', class: "d-flex align-items-start gap-2" }, h("label", { key: '204bea2b6abdde9110e7fc2de5488b9647e83a98', part: "label", class: "form-label", htmlFor: this.name }, this.label), h("form-control-tooltip", { key: 'f6c23190a77e997af1433f211a2bf45892a4072e', helpText: this.helpText })), h("input", { key: '666d761e0a0bb7bedef337b9f07641cb4d6dd566', 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: 'a09cb5b92539c22a53f469fd99a40d85680135ba', 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: 'e157eea9bc728b97b8f61cc4da004756e663bc32' }, h("div", { key: '046f70cf63cd6724b4d42c13a7366a443f33c384', class: "form-group d-flex flex-column" }, h("div", { key: 'a121a7eb6229c423cfd4949b8f4af6b6140316c4', class: "d-flex align-items-start gap-2" }, h("label", { key: 'a885e1e8d0b0f71299c88446bfc29a546016e543', part: label, class: "form-label", htmlFor: this.name }, this.label), h("form-control-tooltip", { key: '039c26c916c18969c17cdb4f3950c679811b5880', helpText: this.helpText })), h("input", { key: 'b3a20a82acd6fcbc3f61b8a72865b53e5c05b70b', 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: '028fa0490ce436410bf0aea234e92c171bf93b25' }, h("div", { key: '22d1cf8dd7d5731c8bb4469ecb788afef0a8ec6a', class: "form-group d-flex flex-column" }, h("div", { key: '9fe0d7827e5f18b8bec4894aa29f7a9e08e2e139', class: "d-flex align-items-start gap-2" }, h("label", { key: 'ddc0da46940544d5bcf12304f89f6bebc800e457', part: label, class: "form-label", htmlFor: this.name }, this.label), h("form-control-tooltip", { key: '63cdd224e5075ee49a8795dd0d658c3b218db767', helpText: this.helpText })), h("input", { key: '3cb815fa320b991f7089452bd94e910c3ce910ea', 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: '8a1b494b2fae5e8f3c3732773c1e64f28a9c4040', errorText: this.errorText, name: this.name }))));
+            } }), h(FormControlErrorText, { key: '03f60fc9c2d42f987b951947f5b189eff623641b', 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: '0e31cb58a7b3560cea88bc515b55e787d6be0a71' }, h("div", { key: 'd0ad28b761a1fb95b5e446684eb77d25202908fd', class: "form-group d-flex flex-column" }, h("label", { key: 'f075865f14b8697838454c3da270e974e19b0bb4', part: label, class: "form-label", htmlFor: this.name }, this.label), h(FormControlHelpText, { key: '4835ba829efc4d65ec93f8c406c56635f3fb55e9', name: this.name, helpText: this.helpText }), h("div", { key: '88394d95831cf79a9f6d68ed824e2f0f28e5c4b3', class: "input-group" }, h("span", { key: 'c0f56328b5330230114cbc6dbec2ff5ab50fa6fa', class: "input-group-text", part: inputAdornment }, "$"), h("input", { key: '615dee630e13fc603bcf0020588ea89a8006fe97', ref: el => this.formControl = el, id: this.name, name: this.name, onFocus: () => this.isFocused = true, onBlur: () => {
+        return (h(Host, { key: '522db34cb5be7d1200ab8ce3864c846d91f278dc' }, h("div", { key: 'b2d5b5515eb51843042f511c1ce64a00222aa24c', class: "form-group d-flex flex-column" }, h("label", { key: 'ebba4dc6aa72cbda1656b7c0b846b776555748d4', part: label, class: "form-label", htmlFor: this.name }, this.label), h(FormControlHelpText, { key: 'ed37818c0151b760e29e4d21b5344f71b67c516a', name: this.name, helpText: this.helpText }), h("div", { key: 'c1273d4fd5f52e0c6d32a61b600a99d6820b8c84', class: "input-group" }, h("span", { key: 'fa8e479fc0af0ae94e45d881907ebbc4eefead70', class: "input-group-text", part: inputAdornment }, "$"), h("input", { key: '2347defbce5f2787bb39002096ea67543aa0c474', 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: 'cb2c4f53cc3bdc3b83302b30cb6087cac33e7a95', 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: '067197d8c0167d36f6dc3f5ef73d58d2dd7a5fda', 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: '7e2cbd8676a4513170e1c920fafffeae4cc042f2' }, h("div", { key: 'bde27be5dfe86c5c820f46263ec73f014f8a628a', class: "form-group d-flex flex-column" }, h("div", { key: 'bee2a81a0b23aafbb522debac5697dbc4eaaf7bc', class: "d-flex align-items-start gap-2" }, h("label", { key: '1d43eb5e7167cba5ef63439e6807deef35f7c2ea', part: label, class: "form-label", htmlFor: this.name }, this.label), h("form-control-tooltip", { key: 'aadef33688848d580ec6b369528165480c61bc49', helpText: this.helpText })), h("input", { key: 'a57624c146db1bf54ce73853f6c0514042335502', ref: el => (this.textInput = el), id: this.name, name: this.name, onFocus: () => (this.isFocused = true), onBlur: () => {
+        return (h(Host, { key: '7390ff05013c1007f32c9860259288a02ff1c52e' }, h("div", { key: 'c082f20b7fd2adbf45f317ab213b93ebc788e5e4', class: "form-group d-flex flex-column" }, h("div", { key: '8fe10be0c3c9ee6331d29342468a725d3b2767e0', class: "d-flex align-items-start gap-2" }, h("label", { key: 'de1e1a2c32de0153cdb803eb4d653c0934aeb19c', part: label, class: "form-label", htmlFor: this.name }, this.label), h("form-control-tooltip", { key: '3421ae7e1b2b78cbcfc79281bf971c12b2eba0c7', helpText: this.helpText })), h("input", { key: 'f8e8be44c384dd6f3affdbbf948837ec77ec6ba4', 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: '56be93f77b87e7a4ced570d8d12c94f3864083a5', 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: 'e44994a8c4409e4580216b1dbb0c448e1f0679d6', 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: '1d13bdff56070e4d188779f07081dcf2a4031f02' }, h("div", { key: 'e1324de4cd2b183e3674eb5b182a7d51d8a6e571', class: 'form-group d-flex flex-column' }, h("label", { key: 'fea8787bc32e452c1ba339fee15be3cebd274d97', part: label, class: "form-label", htmlFor: this.name }, this.label), h("input", { key: 'adc992f81d060ae9317995fbf728cf0d188fd747', id: this.name, name: this.name, onFocus: () => this.isFocused = true, onBlur: () => {
+        return (h(Host, { key: '9ba1b402f0d760fcf5f1a258db29559127d8eb39' }, h("div", { key: '994f5896a8791dea3fe4ebbbe98778edd9406c92', class: 'form-group d-flex flex-column' }, h("label", { key: '1b9a7b572e01fb4c5ee8bc037e2877a3782f8021', part: label, class: "form-label", htmlFor: this.name }, this.label), h("input", { key: '990735a9b1f835c4110d283bfaed4e6bf080a866', 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: '50db62ad988d180660df8b4cf8aad2a97ad341ba', helpText: this.helpText, name: this.name }), h(FormControlErrorText, { key: '41a8e98a776d0e265d5b7febce941e741eaa1a6c', 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: '2f99538e9541d9d3fb43fa171af23edad97667de', helpText: this.helpText, name: this.name }), h(FormControlErrorText, { key: '6756fb24fbb631bf925b470f555365e33f15c4a7', 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: 'a22020f52ab144e24df5d8b66e1e4a2e96a46118', class: 'form-group d-flex flex-column' }, h("div", { key: '92e094809b59818298423b9e239cab73757c4361', class: "form-check" }, h("input", { key: 'f86decea91a82284fdda6916c342e8921df9dbc7', ref: el => (this.radioElement = el), type: "radio", id: `${this.name}-${this.value}`, name: this.name, onFocus: () => this.isFocused = true, onBlur: () => {
+        return (h(Host, { key: 'c22f0df594e14c5095be415fe80df4ecae7aa6b4', class: 'form-group d-flex flex-column' }, h("div", { key: 'dc2f63fa23042176825ab3b0617419f3445da972', class: "form-check" }, h("input", { key: '48fe6f95a43e90393bace948455ab87f83a5bb51', 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: 'd7abd665cf385ab45f154c2607ad8732f5d778f2', class: "form-check-label", htmlFor: `${this.name}-${this.value}`, part: label }, this.label)), h("form-control-help-text", { key: '2c495cb8c25c1984addbcdcb8899823aa2db64a5', helpText: this.helpText, name: this.name }), h("form-control-error-text", { key: '136d3defc1f11627d0eeb4d202f4938b5e0cbde3', 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: '501ca93d655605a6b2f16d2598a6e601315de97f', class: "form-check-label", htmlFor: `${this.name}-${this.value}`, part: label }, this.label)), h("form-control-help-text", { key: '711f8f1eec58731d7925ef8fe0912dcd37542bbe', helpText: this.helpText, name: this.name }), h("form-control-error-text", { key: 'a62e4bbcf9c5faae63f17c49f5fc2c431395cbe9', errorText: this.errorText, name: this.name })));
     }
     static get is() { return "form-control-radio"; }
     static get properties() {

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

@@ -35,10 +35,10 @@ export class SelectInput {
     }
     render() {
         var _a;
-        return (h(Host, { key: '605b6cb9bfa7bac528ee0af9c4deb5e7b1356b93' }, h("div", { key: 'f8b42609971ff02c4bc147a113bb4a025d32bcd8', class: "form-group d-flex flex-column" }, h("div", { key: '26c87da7b92edbb7fd41825a4e64b642778d0808', class: "d-flex align-items-start gap-2" }, h("label", { key: '43ad562c323b586bf7ab0260258d8678ef3194aa', part: label, class: "form-label", htmlFor: this.name }, this.label), h("form-control-tooltip", { key: '1e4b1fa0e9bae57b6e783fb873de38c49ae7a8a4', helpText: this.helpText })), h("select", { key: 'bef2df140499a642ea9bf5bd3f6d7b558042e733', 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: '99abaaa766c1270cf1cfd926320d343393b13d1d', 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: '51f427955047c079bcd4277ce54f27168d6c3e14' }, h("div", { key: '3724cd9797feb1b383e031a3509dfc365a4d1dc0', class: "form-group d-flex flex-column" }, h("div", { key: '883b87e2e1ddf1eb3956fd232ab7c7239a9ee08f', class: "d-flex align-items-start gap-2" }, h("label", { key: '7d8acb9db3c54034fff1d310555ed15d039c8ab4', part: label, class: "form-label", htmlFor: this.name }, this.label), h("form-control-tooltip", { key: '70c94e2dea56b70ae3e6e6fae86127ee366fa1a2', helpText: this.helpText })), h("input", { key: 'af0adb1ba6ac16dcd8c39a45c8c44f6bd41c9ab9', id: this.name, name: this.name, onFocus: () => this.isFocused = true, onBlur: () => {
+        return (h(Host, { key: 'a8372f03c84409f2cd36b67d11aa3f1c6ade5230' }, h("div", { key: '6e00089d666df5be04bdcfbef7f163c4ae6b567a', class: "form-group d-flex flex-column" }, h("div", { key: '2d243bb04b2276757b44903719991aabefa13254', class: "d-flex align-items-start gap-2" }, h("label", { key: '98ba977b38ef706a7fd9089db13879c24d5e1480', part: label, class: "form-label", htmlFor: this.name }, this.label), h("form-control-tooltip", { key: '500d46e1bdc581989fc1c3c0a79b67b3458ce980', helpText: this.helpText })), h("input", { key: 'c3efaf9b7b2fd6a42fcb76756775a1c58e2c61df', 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: 'd393476376fa8f749b4e54a35da2586a878da4bd', 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: '2aff3e8ef0fbfd37e2add41f9aad3891d62bd9bc', 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: 'e88e4c0a4206046607c1e4c30777017881a8dd80' }, h("div", { key: 'eb712fe05c4e6a51a68d57b9d11742bf23dc5b5d', class: "form-group d-flex flex-column" }, h("label", { key: '6a4c5c62c94fe0d3695af529660c4a0d0287cc8f', part: label, class: "form-label", htmlFor: this.name }, this.label), h("textarea", { key: '76e0681514be96eb581074d8382b7577b62ada5f', id: this.name, name: this.name, onFocus: () => this.isFocused = true, onBlur: () => {
+        return (h(Host, { key: '24c71b939da77ef7235f9c6d76dafa3646f03185' }, h("div", { key: '2c377064ecedf1de8761cadf857d855ea81f98e1', class: "form-group d-flex flex-column" }, h("label", { key: '57626622619247902a6a80dfb8aa9a26d4958b0f', part: label, class: "form-label", htmlFor: this.name }, this.label), h("textarea", { key: '4f1e9a912e6b0a250c785a74982f322b83990c6d', 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: '81cb12aa1552e90df24e073a9a2cc5ac669ed89a', helpText: this.helpText, name: this.name }), h("form-control-error-text", { key: '1f7999d157fff74502fe16379d55733106bdc4f7', 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: 'a2adeb24bd1576fe48651193e44965f39b8958ae', helpText: this.helpText, name: this.name }), h("form-control-error-text", { key: '76867a846f4b3e38ea768fbfd185ee9ce28bb4eb', 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: '4d650e7de7ed14c4483608412b6e2012b16de0d1' }, h("input", { key: 'bddc32a79593dc42a1edda6f982562b2399319e0', 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: '371bbf07abe040e607c3f2a548204193702b868c' }, h("input", { key: '05ab53862e84dd10ec59b7b77df8480b4e16a41f', 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: 'ecbbcb6efd1855e0f89c66b8878f93a1f98a103d', class: "form-group d-flex flex-column" }, h("div", { key: '9e57bb4eacca52cc7a77fcb044d3ef7036acaca2', style: {
+        return (h(Host, { key: 'd77a2d0b61928a0194ee7662fd6a16d47666c304', class: "form-group d-flex flex-column" }, h("div", { key: 'a34d32b6497924fadef2dba7beec4e99233645ed', style: {
                 visibility: this.iframeLoaded ? 'visible' : 'hidden',
                 height: this.iframeLoaded ? 'auto' : '0',
-            } }, h("label", { key: '91c717d727068698244692d607e1959116d6a72d', class: "form-label", htmlFor: "", part: label }, this.label || ''), h("div", { key: '1b655b4939a6c74088dbc6d58346d91aa4c0b1f1', 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: 'f46944026ae45f6ff71638adb52dc2ca716adb28', id: this.inputId, name: this.inputId, src: `${this.iframeOrigin}?${this.urlParams}`, ref: el => {
+            } }, h("label", { key: 'fe606e175435571ba5a5617abe36468e4627dcc0', class: "form-label", htmlFor: "", part: label }, this.label || ''), h("div", { key: 'e3355a4ad2960fc6b3fc9ad46092e570ed7b4397', 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: '83d0ab3c20019a33dc7d72b0378ccf95eb77e95f', 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: 'cbcdd23b9de6a26a3d183af48a45caacc674a3c7', errorText: this.errorText, name: this.inputId }))));
+            } })), h(FormControlErrorText, { key: 'e8bf25dfe4ad6296e3a64132559c7ccce632b12a', errorText: this.errorText, name: this.inputId }))));
     }
     static get is() { return "iframe-input"; }
     static get properties() {