@justifi/webcomponents 5.7.6-rc-02 → 5.7.6-rc-04

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

@@ -1,73 +1,252 @@
 import { h } from "@stencil/core";
-import { Button, StyledHost } from "../../ui-components";
+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";
+// 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.submitButtonText = 'Submit';
         this.isLoading = false;
+        this.computedHideSubmitButton = false;
+        this.submitButtonText = 'Submit';
     }
     componentWillLoad() {
         checkPkgVersion();
         this.analytics = new JustifiAnalytics(this);
-        if (!this.authToken) {
-            this.authToken = checkoutStore.authToken;
-        }
-        if (!this.accountId) {
-            this.accountId = checkoutStore.accountId;
-        }
+        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 && event.preventDefault();
+        event === null || event === void 0 ? void 0 : event.preventDefault();
         this.isLoading = true;
-        let tokenizeResponse;
         try {
-            tokenizeResponse = await this.paymentMethodOptionsRef.resolvePaymentMethod({ isValid: true });
-            if (tokenizeResponse.error) {
+            const validation = await this.validate();
+            if (!validation.isValid) {
                 this.errorEvent.emit({
+                    errorCode: ComponentErrorCodes.TOKENIZE_ERROR,
+                    message: ERROR_MESSAGES.VALIDATION_ERROR,
+                });
+                this.isLoading = false;
+                return;
+            }
+            const tokenizeResponse = await this.resolvePaymentMethod({ isValid: true });
+            if (tokenizeResponse.error) {
+                this.emitError({
                     errorCode: tokenizeResponse.error.code,
                     message: tokenizeResponse.error.message,
-                    severity: ComponentErrorSeverity.ERROR,
                 });
             }
+            this.submitEvent.emit({ response: tokenizeResponse });
+            return tokenizeResponse;
         }
         catch (error) {
-            const errorData = {
+            const errorResponse = this.createErrorResponse(ComponentErrorCodes.TOKENIZE_ERROR, error.message);
+            this.emitError({
                 errorCode: ComponentErrorCodes.TOKENIZE_ERROR,
                 message: error.message,
-                severity: ComponentErrorSeverity.ERROR,
-            };
-            this.errorEvent.emit(errorData);
+            });
+            this.submitEvent.emit({ response: errorResponse });
+            return errorResponse;
         }
         finally {
-            this.submitEvent.emit({ response: tokenizeResponse });
             this.isLoading = false;
-            return tokenizeResponse;
         }
     }
-    async fillBillingForm(fields) {
-        this.paymentMethodOptionsRef.fillBillingForm(fields);
-    }
     async validate() {
-        return this.paymentMethodOptionsRef.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) {
+            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() {
+        const showCard = !this.disableCreditCard;
+        const showAch = !this.disableBankAccount;
+        return !showAch || !showCard;
+    }
+    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("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 })));
+    }
+    renderPaymentMethodForm(paymentMethodId) {
+        return paymentMethodId === PaymentMethodTypes.card ? (h("justifi-card-form", { ref: (el) => (this.paymentMethodFormRef = el) })) : (h("justifi-bank-account-form", { ref: (el) => (this.paymentMethodFormRef = el) }));
     }
     render() {
-        return (h(StyledHost, { key: '0eea98bc9927bbd48841728ece5dd19bd23aa2dc' }, h("form", { key: '696040e74f6fe5b776edf8017d400165752e9715' }, h("fieldset", { key: 'af96f0fc95db821ce53c28496aef352416ff8a0e' }, h("div", { key: '68af7be6aac098150edce72a7372ed526e94a212', class: "row gy-3" }, h("div", { key: 'a9f477f7e85dd33c113ab95efd8d03aa7ce84049', class: "col-12" }, h("justifi-payment-method-options", { key: '2ec00aa262d3bceee0768a0a0c6eff499e0295c4', 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: 'cd878391ee2af083a685daf2322cddc859398a3c', class: "col-12" }, h(Button, { key: '29bf32b687e73c00c1e6519d99b9dcd75dc968e4', variant: "primary", type: "submit", onClick: event => this.tokenizePaymentMethod(event), isLoading: this.isLoading, "data-testid": "submit-button", hidden: this.hideSubmitButton }, this.submitButtonText)))))));
+        return (h(StyledHost, { key: 'b8cf3e66f93bf1b1dd2c3116781ddf0168cbd4e7' }, h("form", { key: '70ad04762a32e930b6b96c2d8609577cd5d1e8d6' }, h("fieldset", { key: 'f7a7d53512b3d034999b18b666381c2df04f082b' }, h("div", { key: '6e5be958e583399ac733aefe4ddf935f5aec98df', class: "row gy-3" }, h("div", { key: '2d81034d2d95532a18bef58cdd1635b1d3b1d735', class: "col-12" }, this.availablePaymentMethods.map((method) => this.renderPaymentMethodOption(method))), h("div", { key: 'a791aac6520c187fd336012d97c976ece891edeb', class: "col-12" }, h("justifi-button", { key: '9ff1733b1811fea31b1e4dc41694db4eb40be14c', 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 encapsulation() { return "shadow"; }
     static get properties() {
         return {
-            "authToken": {
+            "accountId": {
                 "type": "string",
-                "attribute": "auth-token",
+                "attribute": "account-id",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -84,9 +263,9 @@ export class TokenizePaymentMethod {
                 "setter": false,
                 "reflect": false
             },
-            "accountId": {
+            "authToken": {
                 "type": "string",
-                "attribute": "account-id",
+                "attribute": "auth-token",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -103,17 +282,17 @@ export class TokenizePaymentMethod {
                 "setter": false,
                 "reflect": false
             },
-            "paymentMethodGroupId": {
-                "type": "string",
-                "attribute": "payment-method-group-id",
+            "disableBankAccount": {
+                "type": "boolean",
+                "attribute": "disable-bank-account",
                 "mutable": false,
                 "complexType": {
-                    "original": "string",
-                    "resolved": "string",
+                    "original": "boolean",
+                    "resolved": "boolean",
                     "references": {}
                 },
                 "required": false,
-                "optional": false,
+                "optional": true,
                 "docs": {
                     "tags": [],
                     "text": ""
@@ -122,29 +301,28 @@ export class TokenizePaymentMethod {
                 "setter": false,
                 "reflect": false
             },
-            "submitButtonText": {
-                "type": "string",
-                "attribute": "submit-button-text",
+            "disableCreditCard": {
+                "type": "boolean",
+                "attribute": "disable-credit-card",
                 "mutable": false,
                 "complexType": {
-                    "original": "string",
-                    "resolved": "string",
+                    "original": "boolean",
+                    "resolved": "boolean",
                     "references": {}
                 },
                 "required": false,
-                "optional": false,
+                "optional": true,
                 "docs": {
                     "tags": [],
                     "text": ""
                 },
                 "getter": false,
                 "setter": false,
-                "reflect": false,
-                "defaultValue": "'Submit'"
+                "reflect": false
             },
-            "disableCreditCard": {
+            "hideBankAccountBillingForm": {
                 "type": "boolean",
-                "attribute": "disable-credit-card",
+                "attribute": "hide-bank-account-billing-form",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -161,9 +339,9 @@ export class TokenizePaymentMethod {
                 "setter": false,
                 "reflect": false
             },
-            "disableBankAccount": {
+            "hideCardBillingForm": {
                 "type": "boolean",
-                "attribute": "disable-bank-account",
+                "attribute": "hide-card-billing-form",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -199,13 +377,13 @@ export class TokenizePaymentMethod {
                 "setter": false,
                 "reflect": false
             },
-            "hideCardBillingForm": {
-                "type": "boolean",
-                "attribute": "hide-card-billing-form",
+            "paymentMethodGroupId": {
+                "type": "string",
+                "attribute": "payment-method-group-id",
                 "mutable": false,
                 "complexType": {
-                    "original": "boolean",
-                    "resolved": "boolean",
+                    "original": "string",
+                    "resolved": "string",
                     "references": {}
                 },
                 "required": false,
@@ -218,13 +396,13 @@ export class TokenizePaymentMethod {
                 "setter": false,
                 "reflect": false
             },
-            "hideBankAccountBillingForm": {
-                "type": "boolean",
-                "attribute": "hide-bank-account-billing-form",
+            "submitButtonText": {
+                "type": "string",
+                "attribute": "submit-button-text",
                 "mutable": false,
                 "complexType": {
-                    "original": "boolean",
-                    "resolved": "boolean",
+                    "original": "string",
+                    "resolved": "string",
                     "references": {}
                 },
                 "required": false,
@@ -235,13 +413,16 @@ export class TokenizePaymentMethod {
                 },
                 "getter": false,
                 "setter": false,
-                "reflect": false
+                "reflect": false,
+                "defaultValue": "'Submit'"
             }
         };
     }
     static get states() {
         return {
-            "isLoading": {}
+            "isLoading": {},
+            "selectedPaymentMethodId": {},
+            "computedHideSubmitButton": {}
         };
     }
     static get events() {
@@ -291,12 +472,12 @@ export class TokenizePaymentMethod {
     }
     static get methods() {
         return {
-            "tokenizePaymentMethod": {
+            "fillBillingForm": {
                 "complexType": {
-                    "signature": "(event?: CustomEvent) => Promise<PaymentMethodPayload>",
+                    "signature": "(fields: BillingFormFields) => Promise<void>",
                     "parameters": [{
-                            "name": "event",
-                            "type": "CustomEvent<any>",
+                            "name": "fields",
+                            "type": "BillingFormFields",
                             "docs": ""
                         }],
                     "references": {
@@ -304,34 +485,25 @@ 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"
-                        },
-                        "CustomEvent": {
-                            "location": "global",
-                            "id": "global::CustomEvent"
-                        },
-                        "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": "",
                     "tags": []
                 }
             },
-            "fillBillingForm": {
+            "tokenizePaymentMethod": {
                 "complexType": {
-                    "signature": "(fields: BillingFormFields) => Promise<void>",
+                    "signature": "(event?: MouseEvent) => Promise<PaymentMethodPayload>",
                     "parameters": [{
-                            "name": "fields",
-                            "type": "BillingFormFields",
+                            "name": "event",
+                            "type": "MouseEvent",
                             "docs": ""
                         }],
                     "references": {
@@ -339,13 +511,22 @@ 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"
+                        },
+                        "MouseEvent": {
+                            "location": "global",
+                            "id": "global::MouseEvent"
+                        },
+                        "ComponentErrorCodes": {
+                            "location": "import",
+                            "path": "../../api",
+                            "id": "src/api/index.ts::ComponentErrorCodes"
                         }
                     },
-                    "return": "Promise<void>"
+                    "return": "Promise<PaymentMethodPayload>"
                 },
                 "docs": {
                     "text": "",
@@ -354,15 +535,19 @@ export class TokenizePaymentMethod {
             },
             "validate": {
                 "complexType": {
-                    "signature": "() => Promise<{ isValid: boolean; errors?: any; }>",
+                    "signature": "() => Promise<ValidationResult>",
                     "parameters": [],
                     "references": {
                         "Promise": {
                             "location": "global",
                             "id": "global::Promise"
+                        },
+                        "ValidationResult": {
+                            "location": "global",
+                            "id": "global::ValidationResult"
                         }
                     },
-                    "return": "Promise<{ isValid: boolean; errors?: any; }>"
+                    "return": "Promise<ValidationResult>"
                 },
                 "docs": {
                     "text": "",
@@ -371,4 +556,23 @@ 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/store/checkout.store.js

@@ -17,8 +17,9 @@ const initialState = {
     disablePaymentMethodGroup: false,
     paymentAmount: 0,
     paymentDescription: '',
-    paymentMethodGroupId: '',
+    paymentMethodGroupId: undefined,
     paymentMethods: [],
+    savePaymentMethod: false,
     selectedPaymentMethod: '',
     totalAmount: 0,
 };

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: 'ef187a8100be9de010408f04e4f2f65fcfdee096' }, h("style", { key: 'c3e6cd76e7db2703a3b6053a9448290d27f47513' }, `
+        return (h("div", { key: '609efa147a53d357ac11d1d97a2277a518c6ba53' }, h("style", { key: 'ae6f607f454e1038518bd6438b50704fbb5096ce' }, `
           .popper-content {
             display: none;
           }
@@ -88,7 +88,7 @@ export class CustomPopper {
             display: block;
             z-index: 1030;
           }
-          `), h("div", { key: 'c580384fa4e1bedd9c365c2f29b57bd2639e3aaa', class: "popper-content", ref: (el) => this.popperContentRef = el }, h("slot", { key: 'e60f03801976ec3379e4d6e3118a92c18b5c0549' }))));
+          `), h("div", { key: '4d6fc7f6990bd1f271402146c38d0dd175fad94b', class: "popper-content", ref: (el) => this.popperContentRef = el }, h("slot", { key: '509c63e0288098dca22d2d4830ce790271cde6eb' }))));
     }
     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: 'cb878f1f74f6b677e33e07b61eb39f1b16c567c1' }, h("div", { key: '167df136f1b44f0bf858d2ed4c8cddf67afe05fa', class: 'form-group d-flex flex-column' }, h("div", { key: '74e3a823e0c6c6a64de50ebb68be2241fb6dd8ba', class: "form-check" }, h("input", { key: '65c82ac502370c5b55800c2190fef383368639cf', ref: el => (this.checkboxElement = el), type: "checkbox", id: this.name, name: this.name, onFocus: () => this.isFocused = true, onBlur: () => {
+        return (h(Host, { key: '54f78efeb7d16825cfc08e98dcd37bad7b61f81b' }, h("div", { key: '83fef493e58c3a063cbbfe09700ba786b6242c4f', class: 'form-group d-flex flex-column' }, h("div", { key: '3c0ce3b7eb238a2ed5311f284b7f7422117e77bb', class: "form-check" }, h("input", { key: 'e071a738ff24cfec86f8f8c33c3cbae7261015ac', 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: '69a428f166d8a46f483c72c954ed6e2b17b81584', class: "form-check-label", htmlFor: this.name, part: label }, this.label)), h(FormControlHelpText, { key: 'a9baa778379ae26189b96983ee9a3279020b2d94', helpText: this.helpText, name: this.name }), h(FormControlErrorText, { key: 'e1d9e8d4996777ec30978ece5b03892044e1a95e', 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: 'e73b59126ddfd1b4f7c510b6d18e48c66aa9417d', class: "form-check-label", htmlFor: this.name, part: label }, this.label)), h(FormControlHelpText, { key: 'c69896d9f44b0d9bb12bad10f22f3da5c5a6de52', helpText: this.helpText, name: this.name }), h(FormControlErrorText, { key: '5a8e732e9cb5999ab72769f00f00a4a19def3471', 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: 'aba03d207c431a08d380ac058af828c295b594f7' }, h("div", { key: 'c1a64293005369e2e31fb5ed0e190c5de03d0ea8', class: "form-group d-flex flex-column" }, h("div", { key: '59688afd0b5e558e185e5e0db079b37a20fd86bb', class: "d-flex gap-2" }, h("label", { key: '1523b0e40973eae06b1667ab903f7fa1f4cfcb11', part: label, class: "form-label", htmlFor: this.name }, this.label), h("form-control-tooltip", { key: 'ed2a4f5c67e59b9d3161d83c3d128e04b404f6ff', helpText: this.helpText })), h("input", { key: '747544d1efcd84f71ba2cb918919381f3e93a102', 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: '08bce3cf3be399f5cbc2b83885b42cbc38edb118' }, h("div", { key: '9d7537d093c98aad6ace2bf2e1dff221a94342ae', class: "form-group d-flex flex-column" }, h("div", { key: '4bb572f4060339595df10dd2b33799b926b6efd1', class: "d-flex gap-2" }, h("label", { key: '7ff86ee061e99220d836786304835edb087a513e', part: label, class: "form-label", htmlFor: this.name }, this.label), h("form-control-tooltip", { key: '22506780fb5306be2eea2c8b0982668a57b8ac64', helpText: this.helpText })), h("input", { key: 'a15de1023d46a919caf8f2d4b4bd2fd187c44bc7', 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: '5e8ae080996677daf725a6ec33078a2f57a93866', 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: '05011a1473a87a9a167a757d1f9387a3da3b9ebe', 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: 'f8c95c4ffb51065ab139413a562a2a9a228860ed', exportparts: "label,input,input-invalid" }, h("div", { key: 'dab3e9b8f432ab84d32c479dc5a7c3aff292d4d1', class: "form-group d-flex flex-column" }, h("div", { key: '48af26bf174f393270da0170470e5ad14c401181', class: "d-flex align-items-start gap-2" }, h("label", { key: '6d6c5c6660f6851322a54af80a220c4c37eaa16a', part: "label", class: "form-label", htmlFor: this.name }, this.label), h("form-control-tooltip", { key: '3222a9ba3a6b4ffdeede44ccf1dac6fc7a974c1d', helpText: this.helpText })), h("input", { key: '3954f9ca95278ac082ebc5c213fd337eaf65192e', 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: '1a391573e3dbe383a4108c32f2f2f4cb0dbbd1c7', errorText: this.errorText, name: this.name }))));
+        return (h(Host, { key: '326085a82e5ba4a9dfd92d821bbc61ae1226abca', exportparts: "label,input,input-invalid" }, h("div", { key: 'eb08a1c5c9eba7c1589a4088c822d6c877d2ac8f', class: "form-group d-flex flex-column" }, h("div", { key: '214803f34627450d640573a746fff3d10aeb83c8', class: "d-flex align-items-start gap-2" }, h("label", { key: '4c352fd5c0388437bbda2d02b0d5fb7b93b031f4', part: "label", class: "form-label", htmlFor: this.name }, this.label), h("form-control-tooltip", { key: '5653524953f91a5de2f10aa1d60014fe47b1e9b9', helpText: this.helpText })), h("input", { key: 'a247246694d393078ff8e3fb391b6232c3ee66c5', 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: 'e3b485d2b5968444f4f0af9c1e4b922f0da58283', 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: '2f33f18c45bf27b27e3a3a633ba21ba90eee5ceb' }, h("div", { key: 'c749589536322fcc31a2ce7ccf1614c57881da36', class: "form-group d-flex flex-column" }, h("div", { key: 'c30a7d7ab3ade7898d74d0b0c638b7f76b05ad73', class: "d-flex align-items-start gap-2" }, h("label", { key: '62a9d698290f4d02ec06f3c26327f7abfc6bf8dc', part: label, class: "form-label", htmlFor: this.name }, this.label), h("form-control-tooltip", { key: '93636c12615e31be1091dce3a77e29c5b78620af', helpText: this.helpText })), h("input", { key: '0e6430bbf633b6228f09013f6ce60e0810759666', 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: '8521437d1faf90d5f3b73f821485560d0ca517a2' }, h("div", { key: 'd803250512feba82aea03c8a8946b024aec2eeae', class: "form-group d-flex flex-column" }, h("div", { key: '8377b86ca9c4b1974a55380d7cc325d6b5149913', class: "d-flex align-items-start gap-2" }, h("label", { key: 'ae69567c041aed85bdde3ea16f829aec96e4b25c', part: label, class: "form-label", htmlFor: this.name }, this.label), h("form-control-tooltip", { key: '78c0ab7de411ca18dcfade80f1bac72b4741fdf9', helpText: this.helpText })), h("input", { key: 'ed1d7c11db1478e0edb90be9d918e119feb478ba', 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: '90d3406a0417e6073815a2f6e370c14ec614bf6a', errorText: this.errorText, name: this.name }))));
+            } }), h(FormControlErrorText, { key: 'b31b790d9c3fc013df2d504be03fb75987779148', errorText: this.errorText, name: this.name }))));
     }
     static get is() { return "form-control-file"; }
     static get properties() {