@justifi/webcomponents 5.7.6-rc-21 → 5.7.7

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

@@ -1,251 +1,66 @@
 import { h } from "@stencil/core";
-import { StyledHost } from "../../ui-components";
+import { Button, 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";
-// Constants
-const PAYMENT_METHOD_TYPE_LABELS = {
-    [PaymentMethodTypes.bankAccount]: 'New bank account',
-    [PaymentMethodTypes.card]: 'New credit or debit card',
-};
-const ERROR_MESSAGES = {
-    AUTH_TOKEN_REQUIRED: 'Auth token is required when using the tokenize-payment-method component not slotted in justifi-modular-checkout',
-    ACCOUNT_ID_REQUIRED: 'Account ID is required when using the tokenize-payment-method component not slotted in justifi-modular-checkout',
-    FORM_NOT_READY: 'Payment form not ready',
-    VALIDATION_ERROR: 'Validation error',
-};
 export class TokenizePaymentMethod {
     constructor() {
-        this.isLoading = false;
-        this.computedHideSubmitButton = false;
         this.submitButtonText = 'Submit';
+        this.isLoading = false;
     }
     componentWillLoad() {
         checkPkgVersion();
         this.analytics = new JustifiAnalytics(this);
-        this.validateRequiredProps();
-    }
-    connectedCallback() {
-        this.setDefaultSelectedPaymentMethod();
-        this.setComputedHideSubmitButton();
     }
     disconnectedCallback() {
         var _a;
         (_a = this.analytics) === null || _a === void 0 ? void 0 : _a.cleanup();
     }
-    paymentMethodsChanged() {
-        this.setDefaultSelectedPaymentMethod();
-    }
-    handleRadioClick(event) {
-        this.selectedPaymentMethodId = event.detail;
-    }
-    async fillBillingForm(fields) {
-        var _a;
-        (_a = this.billingFormRef) === null || _a === void 0 ? void 0 : _a.fill(fields);
-    }
+    ;
     async tokenizePaymentMethod(event) {
-        event === null || event === void 0 ? void 0 : event.preventDefault();
+        event && event.preventDefault();
         this.isLoading = true;
+        let tokenizeResponse;
         try {
-            const validation = await this.validate();
-            if (!validation.isValid) {
-                this.errorEvent.emit({
-                    errorCode: ComponentErrorCodes.TOKENIZE_ERROR,
-                    message: ERROR_MESSAGES.VALIDATION_ERROR,
-                });
-                this.isLoading = false;
-                return;
-            }
-            const tokenizeResponse = await this.resolvePaymentMethod({ isValid: true });
+            tokenizeResponse = await this.paymentMethodOptionsRef.resolvePaymentMethod({ isValid: true });
             if (tokenizeResponse.error) {
-                this.emitError({
+                this.errorEvent.emit({
                     errorCode: tokenizeResponse.error.code,
                     message: tokenizeResponse.error.message,
+                    severity: ComponentErrorSeverity.ERROR,
                 });
             }
-            this.submitEvent.emit({ response: tokenizeResponse });
-            return tokenizeResponse;
         }
         catch (error) {
-            const errorResponse = this.createErrorResponse(ComponentErrorCodes.TOKENIZE_ERROR, error.message);
-            this.emitError({
+            const errorData = {
                 errorCode: ComponentErrorCodes.TOKENIZE_ERROR,
                 message: error.message,
-            });
-            this.submitEvent.emit({ response: errorResponse });
-            return errorResponse;
+                severity: ComponentErrorSeverity.ERROR,
+            };
+            this.errorEvent.emit(errorData);
         }
         finally {
+            this.submitEvent.emit({ response: tokenizeResponse });
             this.isLoading = false;
+            return tokenizeResponse;
         }
     }
-    async validate() {
-        if (!this.areFormsReady()) {
-            return { isValid: false, errors: { general: ERROR_MESSAGES.FORM_NOT_READY } };
-        }
-        const [billingValidation, paymentMethodValidation] = await Promise.all([
-            this.billingFormRef.validate(),
-            this.paymentMethodFormRef.validate(),
-        ]);
-        return {
-            isValid: billingValidation.isValid && paymentMethodValidation.isValid,
-            errors: Object.assign(Object.assign({}, billingValidation.errors), paymentMethodValidation.errors),
-        };
-    }
-    validateRequiredProps() {
-        if (!this.authToken && !checkoutStore.authToken) {
-            this.emitError({
-                errorCode: ComponentErrorCodes.TOKENIZE_ERROR,
-                message: ERROR_MESSAGES.AUTH_TOKEN_REQUIRED,
-            });
-        }
-        if (!this.accountId && !checkoutStore.accountId) {
-            this.emitError({
-                errorCode: ComponentErrorCodes.TOKENIZE_ERROR,
-                message: ERROR_MESSAGES.ACCOUNT_ID_REQUIRED,
-            });
-        }
-    }
-    setDefaultSelectedPaymentMethod() {
-        if (this.selectedPaymentMethodId) {
-            return;
-        }
-        if (!this.disableCreditCard) {
-            this.selectedPaymentMethodId = PaymentMethodTypes.card;
-        }
-        else if (!this.disableBankAccount) {
-            this.selectedPaymentMethodId = PaymentMethodTypes.bankAccount;
-        }
-    }
-    setComputedHideSubmitButton() {
-        // If hideSubmitButton prop is explicitly set, use that value
-        if (this.hideSubmitButton !== undefined) {
-            this.computedHideSubmitButton = this.hideSubmitButton;
-            return;
-        }
-        // Otherwise, auto-detect if component is slotted within modular-checkout
-        const isWithinModularCheckout = this.isSlottedWithinModularCheckout();
-        this.computedHideSubmitButton = isWithinModularCheckout;
-    }
-    isSlottedWithinModularCheckout() {
-        var _a;
-        let parent = (_a = this.host) === null || _a === void 0 ? void 0 : _a.parentElement;
-        while (parent) {
-            if (parent.tagName === 'JUSTIFI-MODULAR-CHECKOUT') {
-                return true;
-            }
-            parent = parent.parentElement;
-        }
-        return false;
-    }
-    get availablePaymentMethods() {
-        const methods = [];
-        if (!this.disableCreditCard) {
-            methods.push(PaymentMethodTypes.card);
-        }
-        if (!this.disableBankAccount) {
-            methods.push(PaymentMethodTypes.bankAccount);
-        }
-        return methods;
-    }
-    areFormsReady() {
-        return !!(this.billingFormRef && this.paymentMethodFormRef);
-    }
-    emitError(errorData) {
-        this.errorEvent.emit(Object.assign(Object.assign({}, errorData), { severity: ComponentErrorSeverity.ERROR }));
-    }
-    createErrorResponse(code, message) {
-        return {
-            error: {
-                code: code,
-                message,
-                decline_code: undefined,
-            },
-        };
-    }
-    async resolvePaymentMethod(insuranceValidation) {
-        if (!this.areFormsReady()) {
-            return this.createErrorResponse('form_not_ready', ERROR_MESSAGES.FORM_NOT_READY);
-        }
-        try {
-            const validation = await this.validate();
-            if (!validation.isValid || !insuranceValidation.isValid) {
-                const errorMessage = Object.values(validation.errors)[0] || ERROR_MESSAGES.VALIDATION_ERROR;
-                return {
-                    validationError: true,
-                    error: {
-                        code: 'validation_error',
-                        message: String(errorMessage),
-                        decline_code: undefined,
-                    },
-                };
-            }
-            return await this.performTokenization();
-        }
-        catch (error) {
-            return { error };
-        }
-    }
-    async performTokenization() {
-        var _a, _b;
-        const tokenizeResponse = await this.tokenize();
-        if (tokenizeResponse.error) {
-            return { error: tokenizeResponse.error };
-        }
-        const tokenizeResponseData = tokenizeResponse.data;
-        return {
-            token: ((_a = tokenizeResponseData.card) === null || _a === void 0 ? void 0 : _a.token) || ((_b = tokenizeResponseData.bank_account) === null || _b === void 0 ? void 0 : _b.token),
-            data: tokenizeResponseData,
-        };
-    }
-    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);
-    }
-    get paymentMethodGroupID() {
-        return this.paymentMethodGroupId || checkoutStore.paymentMethodGroupId;
-    }
-    get shouldSavePaymentMethod() {
-        return !!(this.paymentMethodGroupId || checkoutStore.savePaymentMethod);
-    }
-    get shouldHideRadioInput() {
-        return this.disableCreditCard || this.disableBankAccount;
-    }
-    renderPaymentMethodOption(paymentMethodType) {
-        const isSelected = this.selectedPaymentMethodId === 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("justifi-save-new-payment-method", { hidden: !this.paymentMethodGroupID })));
+    async fillBillingForm(fields) {
+        this.paymentMethodOptionsRef.fillBillingForm(fields);
     }
-    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) }));
+    async validate() {
+        return this.paymentMethodOptionsRef.validate();
     }
     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: 'bde61e05e8148b4bb3c054d124070a160fd7ca13' }, h("form", { key: 'ea0dd3192fc924bbf22a80562030c6557e32d905' }, h("fieldset", { key: '8a96c0b8e5497d97f0e546558e0ad37a57a459cb' }, h("div", { key: '849547d7b1c810533af86104eb7ae42b569c9c97', class: "row gy-3" }, h("div", { key: 'afc1b73d0a027e2ea6e8cec831f43f53cd2b8666', class: "col-12" }, h("justifi-payment-method-options", { key: '8af2e6076d689ca358a9542cea10d314dee68444', ref: (el) => (this.paymentMethodOptionsRef = el), "show-card": !this.disableCreditCard, "show-ach": !this.disableBankAccount, "show-bnpl": false, paymentMethodGroupId: this.paymentMethodGroupId, "show-saved-payment-methods": false, hideCardBillingForm: this.hideCardBillingForm, hideBankAccountBillingForm: this.hideBankAccountBillingForm, authToken: this.authToken, "account-id": this.accountId })), h("div", { key: '62ac0ff4f7774adadfa8bbbdbc474ba3cd15c5f4', class: "col-12" }, h(Button, { key: 'c5212829153b3c217ce18aac4cbb3afa58f1e7b3', variant: "primary", type: "submit", onClick: event => this.tokenizePaymentMethod(event), isLoading: this.isLoading, "data-testid": "submit-button", hidden: this.hideSubmitButton }, this.submitButtonText)))))));
     }
     static get is() { return "justifi-tokenize-payment-method"; }
+    static get encapsulation() { return "shadow"; }
     static get properties() {
         return {
-            "accountId": {
+            "authToken": {
                 "type": "string",
-                "attribute": "account-id",
+                "attribute": "auth-token",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -253,7 +68,7 @@ export class TokenizePaymentMethod {
                     "references": {}
                 },
                 "required": false,
-                "optional": true,
+                "optional": false,
                 "docs": {
                     "tags": [],
                     "text": ""
@@ -262,9 +77,9 @@ export class TokenizePaymentMethod {
                 "setter": false,
                 "reflect": false
             },
-            "authToken": {
+            "accountId": {
                 "type": "string",
-                "attribute": "auth-token",
+                "attribute": "account-id",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -272,7 +87,7 @@ export class TokenizePaymentMethod {
                     "references": {}
                 },
                 "required": false,
-                "optional": true,
+                "optional": false,
                 "docs": {
                     "tags": [],
                     "text": ""
@@ -281,17 +96,17 @@ export class TokenizePaymentMethod {
                 "setter": false,
                 "reflect": false
             },
-            "disableBankAccount": {
-                "type": "boolean",
-                "attribute": "disable-bank-account",
+            "paymentMethodGroupId": {
+                "type": "string",
+                "attribute": "payment-method-group-id",
                 "mutable": false,
                 "complexType": {
-                    "original": "boolean",
-                    "resolved": "boolean",
+                    "original": "string",
+                    "resolved": "string",
                     "references": {}
                 },
                 "required": false,
-                "optional": true,
+                "optional": false,
                 "docs": {
                     "tags": [],
                     "text": ""
@@ -300,28 +115,29 @@ export class TokenizePaymentMethod {
                 "setter": false,
                 "reflect": false
             },
-            "disableCreditCard": {
-                "type": "boolean",
-                "attribute": "disable-credit-card",
+            "submitButtonText": {
+                "type": "string",
+                "attribute": "submit-button-text",
                 "mutable": false,
                 "complexType": {
-                    "original": "boolean",
-                    "resolved": "boolean",
+                    "original": "string",
+                    "resolved": "string",
                     "references": {}
                 },
                 "required": false,
-                "optional": true,
+                "optional": false,
                 "docs": {
                     "tags": [],
                     "text": ""
                 },
                 "getter": false,
                 "setter": false,
-                "reflect": false
+                "reflect": false,
+                "defaultValue": "'Submit'"
             },
-            "hideBankAccountBillingForm": {
+            "disableCreditCard": {
                 "type": "boolean",
-                "attribute": "hide-bank-account-billing-form",
+                "attribute": "disable-credit-card",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -338,9 +154,9 @@ export class TokenizePaymentMethod {
                 "setter": false,
                 "reflect": false
             },
-            "hideCardBillingForm": {
+            "disableBankAccount": {
                 "type": "boolean",
-                "attribute": "hide-card-billing-form",
+                "attribute": "disable-bank-account",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -376,13 +192,13 @@ export class TokenizePaymentMethod {
                 "setter": false,
                 "reflect": false
             },
-            "paymentMethodGroupId": {
-                "type": "string",
-                "attribute": "payment-method-group-id",
+            "hideCardBillingForm": {
+                "type": "boolean",
+                "attribute": "hide-card-billing-form",
                 "mutable": false,
                 "complexType": {
-                    "original": "string",
-                    "resolved": "string",
+                    "original": "boolean",
+                    "resolved": "boolean",
                     "references": {}
                 },
                 "required": false,
@@ -395,13 +211,13 @@ export class TokenizePaymentMethod {
                 "setter": false,
                 "reflect": false
             },
-            "submitButtonText": {
-                "type": "string",
-                "attribute": "submit-button-text",
+            "hideBankAccountBillingForm": {
+                "type": "boolean",
+                "attribute": "hide-bank-account-billing-form",
                 "mutable": false,
                 "complexType": {
-                    "original": "string",
-                    "resolved": "string",
+                    "original": "boolean",
+                    "resolved": "boolean",
                     "references": {}
                 },
                 "required": false,
@@ -412,16 +228,13 @@ export class TokenizePaymentMethod {
                 },
                 "getter": false,
                 "setter": false,
-                "reflect": false,
-                "defaultValue": "'Submit'"
+                "reflect": false
             }
         };
     }
     static get states() {
         return {
-            "isLoading": {},
-            "selectedPaymentMethodId": {},
-            "computedHideSubmitButton": {}
+            "isLoading": {}
         };
     }
     static get events() {
@@ -471,12 +284,12 @@ export class TokenizePaymentMethod {
     }
     static get methods() {
         return {
-            "fillBillingForm": {
+            "tokenizePaymentMethod": {
                 "complexType": {
-                    "signature": "(fields: BillingFormFields) => Promise<void>",
+                    "signature": "(event?: CustomEvent) => Promise<PaymentMethodPayload>",
                     "parameters": [{
-                            "name": "fields",
-                            "type": "BillingFormFields",
+                            "name": "event",
+                            "type": "CustomEvent<any>",
                             "docs": ""
                         }],
                     "references": {
@@ -484,25 +297,34 @@ export class TokenizePaymentMethod {
                             "location": "global",
                             "id": "global::Promise"
                         },
-                        "BillingFormFields": {
+                        "PaymentMethodPayload": {
                             "location": "import",
-                            "path": "../../components",
-                            "id": "src/components.d.ts::BillingFormFields"
+                            "path": "../checkout/payment-method-payload",
+                            "id": "src/components/checkout/payment-method-payload.ts::PaymentMethodPayload"
+                        },
+                        "CustomEvent": {
+                            "location": "global",
+                            "id": "global::CustomEvent"
+                        },
+                        "ComponentErrorCodes": {
+                            "location": "import",
+                            "path": "../../api",
+                            "id": "src/api/index.ts::ComponentErrorCodes"
                         }
                     },
-                    "return": "Promise<void>"
+                    "return": "Promise<PaymentMethodPayload>"
                 },
                 "docs": {
                     "text": "",
                     "tags": []
                 }
             },
-            "tokenizePaymentMethod": {
+            "fillBillingForm": {
                 "complexType": {
-                    "signature": "(event?: MouseEvent) => Promise<PaymentMethodPayload>",
+                    "signature": "(fields: BillingFormFields) => Promise<void>",
                     "parameters": [{
-                            "name": "event",
-                            "type": "MouseEvent",
+                            "name": "fields",
+                            "type": "BillingFormFields",
                             "docs": ""
                         }],
                     "references": {
@@ -510,22 +332,13 @@ export class TokenizePaymentMethod {
                             "location": "global",
                             "id": "global::Promise"
                         },
-                        "PaymentMethodPayload": {
-                            "location": "import",
-                            "path": "../checkout/payment-method-payload",
-                            "id": "src/components/checkout/payment-method-payload.ts::PaymentMethodPayload"
-                        },
-                        "MouseEvent": {
-                            "location": "global",
-                            "id": "global::MouseEvent"
-                        },
-                        "ComponentErrorCodes": {
+                        "BillingFormFields": {
                             "location": "import",
-                            "path": "../../api",
-                            "id": "src/api/index.ts::ComponentErrorCodes"
+                            "path": "../../components",
+                            "id": "src/components.d.ts::BillingFormFields"
                         }
                     },
-                    "return": "Promise<PaymentMethodPayload>"
+                    "return": "Promise<void>"
                 },
                 "docs": {
                     "text": "",
@@ -534,19 +347,15 @@ export class TokenizePaymentMethod {
             },
             "validate": {
                 "complexType": {
-                    "signature": "() => Promise<ValidationResult>",
+                    "signature": "() => Promise<{ isValid: boolean; errors?: any; }>",
                     "parameters": [],
                     "references": {
                         "Promise": {
                             "location": "global",
                             "id": "global::Promise"
-                        },
-                        "ValidationResult": {
-                            "location": "global",
-                            "id": "global::ValidationResult"
                         }
                     },
-                    "return": "Promise<ValidationResult>"
+                    "return": "Promise<{ isValid: boolean; errors?: any; }>"
                 },
                 "docs": {
                     "text": "",
@@ -555,23 +364,4 @@ export class TokenizePaymentMethod {
             }
         };
     }
-    static get elementRef() { return "host"; }
-    static get watchers() {
-        return [{
-                "propName": "disableCreditCard",
-                "methodName": "paymentMethodsChanged"
-            }, {
-                "propName": "disableBankAccount",
-                "methodName": "paymentMethodsChanged"
-            }];
-    }
-    static get listeners() {
-        return [{
-                "name": "radio-click",
-                "method": "handleRadioClick",
-                "target": undefined,
-                "capture": false,
-                "passive": false
-            }];
-    }
 }

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

@@ -80,7 +80,7 @@ export class CustomPopper {
         this.hideEvent.emit();
     }
     render() {
-        return (h("div", { key: '90bfd87560ce73c566c4cad1f1b3e4af97abd028' }, h("style", { key: '12f5050a144cabe57c13e8f1b9ffffdf6e0f848a' }, `
+        return (h("div", { key: 'fe9f155b8fc3d007a94654801edeacf2d52b9382' }, h("style", { key: '00f31be773f765a7857f0e07d8e1162b721bde11' }, `
           .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: '8a790cb7a27fe293308ab5845c8911e4857d92a4', class: "popper-content", ref: (el) => this.popperContentRef = el }, h("slot", { key: 'fc26f065c685d6787561157d1deac4f1f8757024' }))));
     }
     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: '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: () => {
                 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: '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 }))));
     }
     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: '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: () => {
                 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: '57fce536cd671823b56a78fddf9d9059082f1dde', 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: '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 }))));
+        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 }))));
     }
     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: '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: () => {
+        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: () => {
                 this.isFocused = false;
                 this.formControlBlur.emit();
-            } }), h(FormControlErrorText, { key: '6c4aa5ad35ae4590e4a80e95a582157418d3103f', errorText: this.errorText, name: this.name }))));
+            } }), h(FormControlErrorText, { key: 'de236bb9de009da258b2780c6097bf8f7101bd18', errorText: this.errorText, name: this.name }))));
     }
     static get is() { return "form-control-file"; }
     static get properties() {