@justifi/webcomponents 4.16.0 → 4.18.0

package/dist/collection/components/checkout/payment-method-options.js

@@ -1,4 +1,4 @@
-import { h } from "@stencil/core";
+import { h, Host } from "@stencil/core";
 import { config } from "../../../config";
 import { PaymentMethodTypes } from "../../api/Payment";
 import { PaymentMethodOption } from "./payment-method-option-utils";
@@ -8,8 +8,10 @@ export class PaymentMethodOptions {
         this.showAch = undefined;
         this.showBnpl = undefined;
         this.showSavedPaymentMethods = undefined;
+        this.paymentMethodGroupId = undefined;
         this.bnpl = undefined;
-        this.clientId = undefined;
+        this.insuranceToggled = undefined;
+        this.authToken = undefined;
         this.accountId = undefined;
         this.iframeOrigin = config.iframeOrigin;
         this.savedPaymentMethods = [];
@@ -17,39 +19,53 @@ export class PaymentMethodOptions {
         this.selectedPaymentMethodId = undefined;
         this.paymentMethodOptions = [];
     }
+    async fillBillingForm(fields) {
+        const newPaymentMethodElement = this.selectedPaymentMethodOptionRef;
+        if (newPaymentMethodElement.fillBillingForm) {
+            newPaymentMethodElement.fillBillingForm(fields);
+        }
+    }
     connectedCallback() {
         this.paymentMethodsChanged();
-        this.selectedPaymentMethodId = this.paymentMethodOptions[0].id;
     }
     paymentMethodsChanged() {
-        var _a;
-        this.paymentMethodOptions = this.savedPaymentMethods.map((paymentMethod) => new PaymentMethodOption(paymentMethod));
+        var _a, _b;
+        this.paymentMethodOptions = this.savedPaymentMethods
+            .map((paymentMethod) => new PaymentMethodOption(paymentMethod))
+            .filter((paymentMethod) => {
+            // Don't saved card or bank account if they are disabled
+            return ((this.showCard || paymentMethod.type !== PaymentMethodTypes.card) &&
+                (this.showAch || paymentMethod.type !== PaymentMethodTypes.bankAccount));
+        });
+        if (this.showBnpl && ((_a = this.bnpl) === null || _a === void 0 ? void 0 : _a.provider) === 'sezzle' && !this.insuranceToggled) {
+            this.paymentMethodOptions.push(new PaymentMethodOption({ id: PaymentMethodTypes.sezzle }));
+        }
         if (this.showCard) {
             this.paymentMethodOptions.push(new PaymentMethodOption({ id: PaymentMethodTypes.card }));
         }
         if (this.showAch) {
             this.paymentMethodOptions.push(new PaymentMethodOption({ id: PaymentMethodTypes.bankAccount }));
         }
-        if (this.showBnpl && ((_a = this.bnpl) === null || _a === void 0 ? void 0 : _a.provider) === 'sezzle') {
-            this.paymentMethodOptions.push(new PaymentMethodOption({ id: PaymentMethodTypes.sezzle }));
+        if (!this.selectedPaymentMethodId) {
+            this.selectedPaymentMethodId = (_b = this.paymentMethodOptions[0]) === null || _b === void 0 ? void 0 : _b.id;
         }
     }
     paymentMethodOptionSelected(event) {
         this.selectedPaymentMethodId = event.detail.id;
     }
-    async resolvePaymentMethod() {
+    async resolvePaymentMethod(insuranceValidation) {
         var _a;
-        return await ((_a = this.selectedPaymentMethodOptionRef) === null || _a === void 0 ? void 0 : _a.resolvePaymentMethod());
+        return await ((_a = this.selectedPaymentMethodOptionRef) === null || _a === void 0 ? void 0 : _a.resolvePaymentMethod(insuranceValidation));
     }
     render() {
         var _a;
-        return (h("div", { key: 'e6ebe2b92d49fc499c721ff962703d683223e861' }, (_a = this.paymentMethodOptions) === null || _a === void 0 ? void 0 : _a.map((paymentMethodOption) => {
+        return (h(Host, { key: 'b432005ef4b36d46f54ed57f22f070d7cbfffe11' }, (_a = this.paymentMethodOptions) === null || _a === void 0 ? void 0 : _a.map((paymentMethodOption) => {
             const newCard = paymentMethodOption.id === PaymentMethodTypes.card;
             const newBankAccount = paymentMethodOption.id === PaymentMethodTypes.bankAccount;
             const isSelected = this.selectedPaymentMethodId === paymentMethodOption.id;
             const sezzle = paymentMethodOption.id === PaymentMethodTypes.sezzle;
             if (newCard || newBankAccount) {
-                return (h("justifi-new-payment-method", { paymentMethodOption: paymentMethodOption, "client-id": this.clientId, "account-id": this.accountId, "is-selected": isSelected, ref: (el) => {
+                return (h("justifi-new-payment-method", { paymentMethodOption: paymentMethodOption, authToken: this.authToken, "account-id": this.accountId, "is-selected": isSelected, paymentMethodGroupId: this.paymentMethodGroupId, ref: (el) => {
                         if (isSelected) {
                             this.selectedPaymentMethodOptionRef = el;
                         }
@@ -74,12 +90,12 @@ export class PaymentMethodOptions {
     static get is() { return "justifi-payment-method-options"; }
     static get originalStyleUrls() {
         return {
-            "$": ["payment-method-options.scss"]
+            "$": ["payment-method-options.css", "form-check-input.css"]
         };
     }
     static get styleUrls() {
         return {
-            "$": ["payment-method-options.css"]
+            "$": ["payment-method-options.css", "form-check-input.css"]
         };
     }
     static get properties() {
@@ -152,6 +168,23 @@ export class PaymentMethodOptions {
                 "attribute": "show-saved-payment-methods",
                 "reflect": false
             },
+            "paymentMethodGroupId": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "payment-method-group-id",
+                "reflect": false
+            },
             "bnpl": {
                 "type": "unknown",
                 "mutable": false,
@@ -173,7 +206,24 @@ export class PaymentMethodOptions {
                     "text": ""
                 }
             },
-            "clientId": {
+            "insuranceToggled": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "insurance-toggled",
+                "reflect": false
+            },
+            "authToken": {
                 "type": "string",
                 "mutable": false,
                 "complexType": {
@@ -187,7 +237,7 @@ export class PaymentMethodOptions {
                     "tags": [],
                     "text": ""
                 },
-                "attribute": "client-id",
+                "attribute": "auth-token",
                 "reflect": false
             },
             "accountId": {
@@ -286,10 +336,44 @@ export class PaymentMethodOptions {
     }
     static get methods() {
         return {
+            "fillBillingForm": {
+                "complexType": {
+                    "signature": "(fields: BillingFormFields) => Promise<void>",
+                    "parameters": [{
+                            "name": "fields",
+                            "type": "BillingFormFields",
+                            "docs": ""
+                        }],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        },
+                        "BillingFormFields": {
+                            "location": "import",
+                            "path": "../billing-form/billing-form-schema",
+                            "id": "src/components/billing-form/billing-form-schema.ts::BillingFormFields"
+                        },
+                        "HTMLJustifiNewPaymentMethodElement": {
+                            "location": "global",
+                            "id": "global::HTMLJustifiNewPaymentMethodElement"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "",
+                    "tags": []
+                }
+            },
             "resolvePaymentMethod": {
                 "complexType": {
-                    "signature": "() => Promise<PaymentMethodPayload>",
-                    "parameters": [],
+                    "signature": "(insuranceValidation: any) => Promise<PaymentMethodPayload>",
+                    "parameters": [{
+                            "name": "insuranceValidation",
+                            "type": "any",
+                            "docs": ""
+                        }],
                     "references": {
                         "Promise": {
                             "location": "global",

package/dist/collection/components/checkout/save-new-payment-method.js

@@ -0,0 +1,38 @@
+import { h } from "@stencil/core";
+export class SaveNewPaymentMethod {
+    constructor() {
+        this.isChecked = false;
+    }
+    handleCheckboxChange(event) {
+        const target = event.target;
+        this.isChecked = target.checked;
+        this.checkboxChanged.emit(this.isChecked);
+    }
+    render() {
+        return (h("div", { key: '9492361a8c6d1b0cc29638811ddf41fb2e0e4a8c', class: "mt-4 form-check" }, h("input", { key: 'ef0b68d5daf26ec3c273839d79a66c03a6ae2af7', type: "checkbox", checked: this.isChecked, onChange: (event) => this.handleCheckboxChange(event), class: "form-check-input" }), h("label", { key: '4dbd3b1501c8de8feedf738d73eb6e3e7fa2ad3a', class: "form-check-label" }, "Save new payment method")));
+    }
+    static get is() { return "justifi-save-new-payment-method"; }
+    static get states() {
+        return {
+            "isChecked": {}
+        };
+    }
+    static get events() {
+        return [{
+                "method": "checkboxChanged",
+                "name": "checkboxChanged",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                }
+            }];
+    }
+}

package/dist/collection/components/checkout/saved-payment-method.js

@@ -10,14 +10,17 @@ export class SavedPaymentMethod {
         this.paymentMethodOption = undefined;
         this.isSelected = undefined;
     }
-    async resolvePaymentMethod() {
+    async resolvePaymentMethod(insuranceValidation) {
         var _a;
+        if (!insuranceValidation.isValid) {
+            return { validationError: true };
+        }
         return { token: (_a = this.paymentMethodOption) === null || _a === void 0 ? void 0 : _a.id };
     }
     ;
     render() {
         var _a, _b, _c, _d, _e;
-        return (h(Fragment, { key: '3d033fe5bcebdad9c005be57767ef71eb8999f96' }, h("div", { key: 'a9c9521588557f2bb255afc24d442d65ee1599da', class: "payment-method" }, h("div", { key: '4bc8613cc4f55bd72c0e45807e5237d5e7a7ed6c', class: "payment-method-header p-3", onClick: () => this.onPaymentMethodOptionClick() }, h("input", { key: '0bec3fe0f62108322ee3ac2f6dde1e6a8521db39', type: "radio", name: "paymentMethodType", id: (_a = this.paymentMethodOption) === null || _a === void 0 ? void 0 : _a.id, value: (_b = this.paymentMethodOption) === null || _b === void 0 ? void 0 : _b.id, onClick: (event) => event.preventDefault(), checked: this.isSelected, class: "form-check-input me-2" }), h("label", { key: '1dfe0f4a548eb0ac7ba8294c0eb12a9e7b8b2d7b', htmlFor: (_c = this.paymentMethodOption) === null || _c === void 0 ? void 0 : _c.id, class: "form-check-label" }, CardBrandLabels[(_d = this.paymentMethodOption) === null || _d === void 0 ? void 0 : _d.brand], " *", (_e = this.paymentMethodOption) === null || _e === void 0 ? void 0 :
+        return (h(Fragment, { key: '534f00b35ee4eda915babee7a12e4e08467f85e0' }, h("div", { key: 'a4a584ec84fc8d227c40f7a783e502f1d71eb94a', class: "payment-method" }, h("div", { key: '2df6119670eb7f9499a68b243af86d26e11e4f90', class: "payment-method-header p-3", onClick: () => this.onPaymentMethodOptionClick() }, h("input", { key: 'd25e191a695d04657a84a364cd60544f593f470d', type: "radio", name: "paymentMethodType", id: (_a = this.paymentMethodOption) === null || _a === void 0 ? void 0 : _a.id, value: (_b = this.paymentMethodOption) === null || _b === void 0 ? void 0 : _b.id, onClick: (event) => event.preventDefault(), checked: this.isSelected, class: "form-check-input me-2" }), h("label", { key: '80f658216d46b048f5cb857b96a7c5a8f86c4e85', htmlFor: (_c = this.paymentMethodOption) === null || _c === void 0 ? void 0 : _c.id, class: "form-check-label" }, CardBrandLabels[(_d = this.paymentMethodOption) === null || _d === void 0 ? void 0 : _d.brand], " *", (_e = this.paymentMethodOption) === null || _e === void 0 ? void 0 :
             _e.acct_last_four)))));
     }
     static get is() { return "justifi-saved-payment-method"; }
@@ -51,7 +54,7 @@ export class SavedPaymentMethod {
                         "PaymentMethodOption": {
                             "location": "import",
                             "path": "./payment-method-option-utils",
-                            "id": "src/components/checkout/payment-method-option-utils.tsx::PaymentMethodOption"
+                            "id": "src/components/checkout/payment-method-option-utils.ts::PaymentMethodOption"
                         }
                     }
                 },
@@ -103,8 +106,12 @@ export class SavedPaymentMethod {
         return {
             "resolvePaymentMethod": {
                 "complexType": {
-                    "signature": "() => Promise<PaymentMethodPayload>",
-                    "parameters": [],
+                    "signature": "(insuranceValidation: any) => Promise<PaymentMethodPayload>",
+                    "parameters": [{
+                            "name": "insuranceValidation",
+                            "type": "any",
+                            "docs": ""
+                        }],
                     "references": {
                         "Promise": {
                             "location": "global",

package/dist/collection/components/checkout/sezzle-payment-method.js

@@ -56,13 +56,16 @@ export class SezzlePaymentMethod {
             this.initializeSezzleCheckout();
         };
     }
-    async resolvePaymentMethod() {
+    async resolvePaymentMethod(insuranceValidation) {
+        if (!insuranceValidation.isValid) {
+            return { validationError: true };
+        }
         this.sezzleButtonRef.click();
         return this.sezzlePromise;
     }
     render() {
         var _a, _b, _c, _d, _e;
-        return (h("div", { key: '5ac20dee2234992494bd7afefa302a9fb4cf3e31', class: "payment-method" }, h("script", { key: 'b8e765f8f7b776284c40625cce49bca6533b2847', src: "https://checkout-sdk.sezzle.com/checkout.min.js", async: true, ref: (el) => (this.scriptRef = el) }), h("div", { key: 'cbe9e196cd37880e64690df9fdcbcbc0d776373f', class: `payment-method-header p-3`, onClick: () => this.onPaymentMethodOptionClick() }, h("input", { key: '3bb4069d587a3f27ea42ecb7017ad252366d1263', type: "radio", name: "paymentMethodType", id: (_a = this.paymentMethodOption) === null || _a === void 0 ? void 0 : _a.id, value: (_b = this.paymentMethodOption) === null || _b === void 0 ? void 0 : _b.id, onClick: (event) => event.preventDefault(), checked: this.isSelected, class: "form-check-input me-2" }), h("label", { key: '934ed99768f68b49c7c0e611f999622d14ffa8af', htmlFor: (_c = this.paymentMethodOption) === null || _c === void 0 ? void 0 : _c.id, class: "form-check-label" }, h("div", { key: 'a82e493c824b32629de24e0972be645c2c8bfa1e' }, "Buy now, pay later with ", sezzleLogo), this.installmentPlan && (h("small", { key: '10e6292b1a1d3cf2195d5fcb310c394b741dad85' }, h("span", { key: 'fa46a2b4167294b30f238d4f10b3230090b0051f' }, (_d = this.installmentPlan) === null || _d === void 0 ? void 0 : _d.installments.length), "\u00A0", h("span", { key: 'e4a33e4b27f7ffb592167dac890471c9bb7b3d47' }, this.installmentPlan.schedule, " payments of"), "\u00A0", h("span", { key: '8779d14429c70f6a69b1ece9157b69125f058e0f', class: "fw-bold" }, formatCurrency((_e = this.installmentPlan) === null || _e === void 0 ? void 0 : _e.installments[0].amountInCents))))))));
+        return (h("div", { key: 'ca426a40641b5f7d8bf325e31d4dbcab982359aa', class: "payment-method" }, h("script", { key: '2e1d43d57f815b5e451f625907b5490a825ad0df', src: "https://checkout-sdk.sezzle.com/checkout.min.js", async: true, ref: (el) => (this.scriptRef = el) }), h("div", { key: '122decb5b21d0480b5528bc425a50465a4667f18', class: `payment-method-header p-3`, onClick: () => this.onPaymentMethodOptionClick() }, h("input", { key: 'f3546c71f0d845d2d341617255b6f3180f7c3faf', type: "radio", name: "paymentMethodType", id: (_a = this.paymentMethodOption) === null || _a === void 0 ? void 0 : _a.id, value: (_b = this.paymentMethodOption) === null || _b === void 0 ? void 0 : _b.id, onClick: (event) => event.preventDefault(), checked: this.isSelected, class: "form-check-input me-2" }), h("label", { key: 'f9f5683a8f2c9a662ae07264e8458e2d74b2057b', htmlFor: (_c = this.paymentMethodOption) === null || _c === void 0 ? void 0 : _c.id, class: "form-check-label" }, h("div", { key: '0367a351c9c5045a7a7264b0053e735816ab2b9c' }, "Buy now, pay later with ", sezzleLogo), this.installmentPlan && (h("small", { key: '5ca343cd874dc339ee9e6e23a0dcea9aa2e69ff4' }, h("span", { key: '780a3d63a7c32b791d3e1c6d1bcc8ebb33dcedc3' }, (_d = this.installmentPlan) === null || _d === void 0 ? void 0 : _d.installments.length), "\u00A0", h("span", { key: '85b902b4dfead7f935b571201605d51120303038' }, this.installmentPlan.schedule, " payments of"), "\u00A0", h("span", { key: 'ead969304aa372477953a9f1159893c43ded914f', class: "fw-bold" }, formatCurrency((_e = this.installmentPlan) === null || _e === void 0 ? void 0 : _e.installments[0].amountInCents))))))));
     }
     static get is() { return "justifi-sezzle-payment-method"; }
     static get properties() {
@@ -146,7 +149,7 @@ export class SezzlePaymentMethod {
                         "PaymentMethodOption": {
                             "location": "import",
                             "path": "./payment-method-option-utils",
-                            "id": "src/components/checkout/payment-method-option-utils.tsx::PaymentMethodOption"
+                            "id": "src/components/checkout/payment-method-option-utils.ts::PaymentMethodOption"
                         }
                     }
                 },
@@ -222,8 +225,12 @@ export class SezzlePaymentMethod {
         return {
             "resolvePaymentMethod": {
                 "complexType": {
-                    "signature": "() => Promise<PaymentMethodPayload>",
-                    "parameters": [],
+                    "signature": "(insuranceValidation: any) => Promise<PaymentMethodPayload>",
+                    "parameters": [{
+                            "name": "insuranceValidation",
+                            "type": "any",
+                            "docs": ""
+                        }],
                     "references": {
                         "Promise": {
                             "location": "global",

package/dist/collection/components/details/details.js

@@ -1,27 +1,18 @@
-import { Host, h } from "@stencil/core";
+import { h } from "@stencil/core";
 import { ErrorState } from "./utils";
+import StyledHost from "../../utils/styled-host/styled-host";
 export class Details {
     constructor() {
         this.errorMessage = undefined;
     }
     render() {
-        return (h(Host, { key: '7de6a80e49e823bd246ef9c754ba7e99d0e7f94a', exportParts: 'detail-empty-state, detail-metadata-title, detail-metadata, detail-section, detail-section-title, \n        detail-section-item-title, detail-section-item-data, detail-head, detail-title, detail-head-info' }, this.errorMessage ?
+        return (h(StyledHost, { key: '636b56646441cc0588b3eb1ae44a371a36274d5c', exportParts: 'detail-empty-state, detail-metadata-title, detail-metadata, detail-section, detail-section-title, \n        detail-section-item-title, detail-section-item-data, detail-head, detail-title, detail-head-info' }, this.errorMessage ?
             ErrorState(this.errorMessage)
             :
                 h("main", { class: "p-2" }, h("slot", { name: "head-info" }), h("slot", { name: 'detail-sections' }))));
     }
     static get is() { return "justifi-details"; }
     static get encapsulation() { return "shadow"; }
-    static get originalStyleUrls() {
-        return {
-            "$": ["./details.scss"]
-        };
-    }
-    static get styleUrls() {
-        return {
-            "$": ["details.css"]
-        };
-    }
     static get properties() {
         return {
             "errorMessage": {

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

@@ -25,7 +25,7 @@ export class CheckboxInput {
         this.updateInput(this.defaultValue);
     }
     render() {
-        return (h(Host, { key: 'cf6e75e0e7be22fe6dbe348ca4a66fffaed8e693', exportparts: "label,input,input-invalid" }, h("div", { key: 'af13d56462f74bbcf823c436aecf18cd4d99292d', class: 'form-group d-flex flex-column' }, h("div", { key: '827f584a99f62966418ef36410dc4245ffabcf74', class: "form-check" }, h("input", { key: '3ca7bd3bc3766b8262e3aa683952948da11c3315', ref: el => (this.checkboxElement = el), type: "checkbox", id: this.name, name: this.name, onBlur: this.formControlBlur.emit, onInput: this.handleFormControlInput, part: `input-checkbox ${this.errorText ? 'input-checkbox-invalid' : ''}`, class: this.errorText ? 'form-check-input is-invalid' : 'form-check-input', disabled: this.disabled }), h("label", { key: '47eeb84848b70e844c814b8015c80aac9e31a066', class: "form-check-label", htmlFor: this.name }, this.label)), h("form-control-help-text", { key: '705db385d0ba5063d2f65ada4b18cb3899e6b301', helpText: this.helpText, name: this.name }), h("form-control-error-text", { key: 'c41da4cfa199c35fe5cdd7acc66261707b135a72', errorText: this.errorText, name: this.name }))));
+        return (h(Host, { key: '727dd3a3e8024aae9540885f677f2aebca05f4f0', exportparts: "label,input,input-invalid" }, h("div", { key: '8d523339b9f03b078333d4380d03db9d1005bb5d', class: 'form-group d-flex flex-column' }, h("div", { key: 'e1b85ac05cf6a578d7f78a017d2ae85da9fd0b14', class: "form-check" }, h("input", { key: 'd5c111ba29f7035a6213555f7d876ae042badd2f', ref: el => (this.checkboxElement = el), type: "checkbox", id: this.name, name: this.name, onBlur: this.formControlBlur.emit, onInput: this.handleFormControlInput, part: `input-checkbox ${this.errorText ? 'input-checkbox-invalid' : ''}`, class: this.errorText ? 'form-check-input is-invalid' : 'form-check-input', disabled: this.disabled }), h("label", { key: '604dc0bba4a0fe0a7171cfed95649a5600d3890f', class: "form-check-label", htmlFor: this.name }, this.label)), h("form-control-help-text", { key: '2779d04d33657d493b17864fa96b8b5c6ab5c4da', helpText: this.helpText, name: this.name }), h("form-control-error-text", { key: '27b6ba8589b8fb9adbfb1792efd36bd4af4338d2', errorText: this.errorText, name: this.name }))));
     }
     static get is() { return "form-control-checkbox"; }
     static get properties() {

package/dist/collection/components/form/form-control-date.js

@@ -25,7 +25,7 @@ export class DateInput {
         this.dateInput.value = value;
     }
     render() {
-        return (h(Host, { key: 'b18e4069bb0cd511968ca94ebcf5140fc9383003', exportparts: "label,input,input-invalid" }, h("label", { key: '37ea611664ace8b990e7324a4c935a829b88dbb4', part: "label", class: "form-label", htmlFor: this.name }, this.label), h("input", { key: 'b8dd7851352542bea8b990309c7d21e303e6f4d4', type: "date", ref: el => (this.dateInput = el), id: this.name, name: this.name, onBlur: this.formControlBlur.emit, onInput: this.handleFormControlInput, part: `input ${this.errorText && 'input-invalid'}`, class: this.errorText ? 'form-control is-invalid' : 'form-control', disabled: this.disabled }), h("form-control-help-text", { key: '9e5ee014804c49fc4826a05e1a826728fbe1305e', helpText: this.helpText, name: this.name }), h("form-control-error-text", { key: '2da21abb7f684c0f4a449775bdb37ddfda6d3837', errorText: this.errorText, name: this.name })));
+        return (h(Host, { key: '477163306527f6b607c43e63ec4a38aaac5a4780', exportparts: "label,input,input-invalid" }, h("label", { key: '3174cbb24f2bd74e59e28dc6a31e224a0e2ab47d', part: "label", class: "form-label", htmlFor: this.name }, this.label), h("input", { key: 'de908daeee9db445c1369b75c536bcf33cb9f4e9', type: "date", ref: el => (this.dateInput = el), id: this.name, name: this.name, onBlur: this.formControlBlur.emit, onInput: this.handleFormControlInput, part: `input ${this.errorText && 'input-invalid'}`, class: this.errorText ? 'form-control is-invalid' : 'form-control', disabled: this.disabled }), h("form-control-help-text", { key: 'ea51242481f4a9894d55871d23aeaf4013112e24', helpText: this.helpText, name: this.name }), h("form-control-error-text", { key: '2db99a325bd6d691c0fdcbf3965535266329506f', errorText: this.errorText, name: this.name })));
     }
     static get is() { return "form-control-date"; }
     static get properties() {

package/dist/collection/components/form/form-control-file.js

@@ -31,7 +31,7 @@ export class FileInput {
         this.fileInput = this.el.querySelector('input');
     }
     render() {
-        return (h(Host, { key: '251933346ee879057b88613bc546461d94db2fc5', exportparts: "label,input,input-invalid" }, h("div", { key: '18e1655e8d66826597211fa75f2342d403957387', class: "form-group d-flex flex-column" }, h("label", { key: 'a125ef003eaf3e309a5f8fc571b1865ebd5ab9e5', part: "label", class: "form-label", htmlFor: this.name }, this.label), h("input", { key: 'c912e0bedff94de4092069f9b07a052ea26a7f7e', ref: (el) => this.fileInput = el, 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, onChange: this.changeHandler, onInput: this.handleFormControlInput, onBlur: () => this.formControlBlur.emit() }), h("form-control-help-text", { key: '17d54a1ee673d5605431812b8c4ae8b74fbcdc2f', helpText: this.helpText, name: this.name }), h("form-control-error-text", { key: '054e01d82c2da5e616072af552dadd9fe7dda16d', errorText: this.errorText, name: this.name }))));
+        return (h(Host, { key: '2219dfef80cb3ef71148fbc4d2d29df6583d6779', exportparts: "label,input,input-invalid" }, h("div", { key: '18d059b17b226815a97cf1be429857bd93e43115', class: "form-group d-flex flex-column" }, h("label", { key: '91adf40d0dd7559888b7c37eeee40f363628bada', part: "label", class: "form-label", htmlFor: this.name }, this.label), h("input", { key: '6aa37be009cce396e2f1268429c94b812d48167e', ref: (el) => this.fileInput = el, 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, onChange: this.changeHandler, onInput: this.handleFormControlInput, onBlur: () => this.formControlBlur.emit() }), h("form-control-help-text", { key: 'd4241aceb5a40b2dfedebc9658b128231d43fcc0', helpText: this.helpText, name: this.name }), h("form-control-error-text", { key: 'af7dd8c90ea83f2f99f24100e97c9147f787aadf', errorText: this.errorText, name: this.name }))));
     }
     static get is() { return "form-control-file"; }
     static get properties() {

package/dist/collection/components/form/form-control-monetary.js

@@ -47,7 +47,7 @@ export class MonetaryInput {
         (_a = this.imask) === null || _a === void 0 ? void 0 : _a.destroy();
     }
     render() {
-        return (h(Host, { key: '7c2f90ba75ccb2d2d2f3046dc523485e80725df7', exportparts: "label,input,input-invalid" }, h("div", { key: '27cbc179fdfa7bc7b7728cff2cc2ae56574a5ea6', class: "form-group d-flex flex-column" }, h("label", { key: '44cc56701e834cae92d6b9d8ec1ebeac8b43e93a', part: "label", class: "form-label", htmlFor: this.name }, this.label), h("div", { key: '84ec2977eef85b87cc8df2392438427ea4e3c954', class: "input-group" }, h("span", { key: '07c5f50cb93111723ba5b642da54401341e458ff', class: "input-group-text" }, "$"), h("input", { key: '6154ded5d1f401fed15c39a7073bc00c6da40254', ref: el => (this.textInput = el), id: this.name, name: this.name, onBlur: this.formControlBlur.emit, onInput: this.handleFormControlInput, part: `input ${this.errorText && 'input-invalid'}`, class: this.errorText ? 'form-control monetary is-invalid' : 'form-control monetary', type: "text", disabled: this.disabled })), h("form-control-help-text", { key: 'b41d7f42ea7bce82305eff00079bf4572d4f0123', helpText: this.helpText, name: this.name }), h("form-control-error-text", { key: 'ef75f2686527b50d99e14c1a38eb4ebe9ced892f', errorText: this.errorText, name: this.name }))));
+        return (h(Host, { key: 'f2aacad037f8f87113058e9f2e30eb87206bfbe3', exportparts: "label,input,input-group-input,input-group-text,input-invalid" }, h("div", { key: '3bc32c7abb0f277bf3b49ca9f67c1207ffcc7d9a', class: "form-group d-flex flex-column" }, h("label", { key: 'ccfb24981f1423c376d9146bf48f53f8ecb3a964', part: "label", class: "form-label", htmlFor: this.name }, this.label), h("div", { key: 'acb22641d9c7b7aea3ba9d04527958a08cc5138f', class: "input-group" }, h("span", { key: 'fc2b1f6ad3332b464fa55c5a72fca2b4d6652d6c', class: "input-group-text", part: "input-group-text" }, "$"), h("input", { key: '39aee063f8a381251ee424a9e1488341e3dbbab5', ref: el => (this.textInput = el), id: this.name, name: this.name, onBlur: this.formControlBlur.emit, onInput: this.handleFormControlInput, part: `input input-group-input ${this.errorText && 'input-invalid'}`, class: this.errorText ? 'form-control monetary is-invalid' : 'form-control monetary', type: "text", disabled: this.disabled })), h("form-control-help-text", { key: 'f9e05bb145ee2e33b92132ba3564c56412ea705e', helpText: this.helpText, name: this.name }), h("form-control-error-text", { key: 'e92a7992598bd13c61d9f8cbce17fce999b9924d', errorText: this.errorText, name: this.name }))));
     }
     static get is() { return "form-control-monetary"; }
     static get properties() {

package/dist/collection/components/form/form-control-number-masked.js

@@ -46,7 +46,7 @@ export class NumberInputMasked {
         this.updateInput(this.defaultValue);
     }
     render() {
-        return (h(Host, { key: '22b8d67ad6900e9d9698d809dea5eac57081eb16', exportparts: "label,input,input-invalid" }, h("div", { key: '4f349ce234590b0034b566aa1136963583f32449', class: "form-group d-flex flex-column" }, h("label", { key: '4b3164b84b76db133dee732d0d795a7e7d3d1cc3', part: "label", class: "form-label", htmlFor: this.name }, this.label), h("input", { key: 'dc8eabab70aa5bf7d94e3324b0bb9328e9f697c7', ref: el => (this.textInput = el), id: this.name, name: this.name, onBlur: this.formControlBlur.emit, onInput: this.handleFormControlInput, part: `input ${this.errorText && 'input-invalid'}`, class: this.errorText ? 'form-control is-invalid' : 'form-control', type: "text", disabled: this.disabled }), h("form-control-help-text", { key: '1b2b703749239d7e8c5d2f3fb0882e6dc0d42dec', helpText: this.helpText, name: this.name }), h("form-control-error-text", { key: '0eb91b01921b18d8c5c7ec7e4a48cc7c276f4121', errorText: this.errorText, name: this.name }))));
+        return (h(Host, { key: '781c4f77fe5b5b4f39c2d44868814ada72ce67c9', exportparts: "label,input,input-invalid" }, h("div", { key: '9c3ed0d13b883e3d2dc302225f25a00414088ef6', class: "form-group d-flex flex-column" }, h("label", { key: '0782f2936175944dd54e5497e54d2389c35c94bc', part: "label", class: "form-label", htmlFor: this.name }, this.label), h("input", { key: '8feee613f2f83e8cb0ac34a4939fd65b5c14729a', ref: el => (this.textInput = el), id: this.name, name: this.name, onBlur: this.formControlBlur.emit, onInput: this.handleFormControlInput, part: `input ${this.errorText && 'input-invalid'}`, class: this.errorText ? 'form-control is-invalid' : 'form-control', type: "text", disabled: this.disabled }), h("form-control-help-text", { key: 'dbdf33259fd04b1488b299216eb550960068c553', helpText: this.helpText, name: this.name }), h("form-control-error-text", { key: '8a148bb9a29f322fb21acbfd8597a1e89433056a', errorText: this.errorText, name: this.name }))));
     }
     static get is() { return "form-control-number-masked"; }
     static get properties() {

package/dist/collection/components/form/form-control-number.js

@@ -28,7 +28,7 @@ export class NumberInput {
         this.updateInput(this.defaultValue);
     }
     render() {
-        return (h(Host, { key: '1177f5d53183054f4cb9081c266f5fdf49f661a8', exportparts: 'label,input,input-invalid' }, h("div", { key: 'ede817d9f4913ed25b1eaef495b1d1213981fe78', class: 'form-group d-flex flex-column' }, h("label", { key: 'b647006b59502f104ede1578123145b07d54c00c', part: "label", class: "form-label", htmlFor: this.name }, this.label), h("input", { key: 'ef6c87b156468f8fdbcd83536a28d2ae04a687b4', id: this.name, name: this.name, onBlur: this.formControlBlur.emit, onInput: this.handleFormControlInput, part: `input ${this.errorText && 'input-invalid'}`, class: this.errorText ? 'form-control is-invalid' : 'form-control', type: "number", disabled: this.disabled }), h("form-control-help-text", { key: 'fb8e31c1bf6e68596bfb62a118f14c8da9b48f52', helpText: this.helpText, name: this.name }), h("form-control-error-text", { key: 'c09d028d7874b527025aa4d39705e92b056168de', errorText: this.errorText, name: this.name }))));
+        return (h(Host, { key: 'da1318fae566f16be182c710840df84a60ccf707', exportparts: 'label,input,input-invalid' }, h("div", { key: 'de12c73d81be1a797c7efd482adef5e648d2947b', class: 'form-group d-flex flex-column' }, h("label", { key: '95113ea706e25074512e948ae041ac121af6c181', part: "label", class: "form-label", htmlFor: this.name }, this.label), h("input", { key: '03d3cf05f76c6dd4ec2b00d486f31045dd36dc12', id: this.name, name: this.name, onBlur: this.formControlBlur.emit, onInput: this.handleFormControlInput, part: `input ${this.errorText && 'input-invalid'}`, class: this.errorText ? 'form-control is-invalid' : 'form-control', type: "number", disabled: this.disabled }), h("form-control-help-text", { key: 'ac4d21a4d723c80bff561364858f2dfba3c704b6', helpText: this.helpText, name: this.name }), h("form-control-error-text", { key: '7f474f8d69bf555a2e6c517772e79d35a7bd32b2', errorText: this.errorText, name: this.name }))));
     }
     static get is() { return "form-control-number"; }
     static get properties() {

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

@@ -27,7 +27,7 @@ export class SelectInput {
     }
     render() {
         var _a;
-        return (h(Host, { key: '7cef63bec4f4890fbf6884e33f415c61971eb57f', exportparts: "label,input,input-invalid" }, h("div", { key: '70b2a95ed9f3e2d1c9a22cf53450f14196debdab', class: "form-group d-flex flex-column" }, h("label", { key: 'fdd940d9d01a57de70cfa232b7dc46eec544d64e', part: "label", class: "form-label", htmlFor: this.name }, this.label), h("select", { key: 'd563d4d67d482feea513d1fb1cdffad619c62836', ref: el => (this.selectElement = el), id: this.name, name: this.name, onBlur: this.formControlBlur.emit, onInput: this.handleFormControlInput, part: `input ${this.errorText ? 'input-invalid' : ''}`, 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("form-control-help-text", { key: 'e84cd27942594d5a68c0bfac9a2a8e9d054326aa', helpText: this.helpText, name: this.name }), h("form-control-error-text", { key: '78be0b113d4409c64f9ba576bb0944e980730ca3', errorText: this.errorText, name: this.name }))));
+        return (h(Host, { key: 'abc80a7f20c59c99a3468f199142bc01ba7883cb', exportparts: "label,input,input-invalid" }, h("div", { key: 'd34ec19e40c33bd16b1e03e2bfac07dd6dd1a3a8', class: "form-group d-flex flex-column" }, h("label", { key: '43adfb46f3bf2e72e50d2bab17b909fec8693c2a', part: "label", class: "form-label", htmlFor: this.name }, this.label), h("select", { key: 'eacb07490715f8041cfa6cd4fab91959d5b6bfae', ref: el => (this.selectElement = el), id: this.name, name: this.name, onBlur: this.formControlBlur.emit, onInput: this.handleFormControlInput, part: `input ${this.errorText ? 'input-invalid' : ''}`, 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("form-control-help-text", { key: '5ec5ba6ca4e0503ffdbddb95e70444bbf8b169b7', helpText: this.helpText, name: this.name }), h("form-control-error-text", { key: 'bd90d61ca9aa0c52d351e336febc9f3d2e501355', errorText: this.errorText, name: this.name }))));
     }
     static get is() { return "form-control-select"; }
     static get properties() {

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

@@ -30,7 +30,7 @@ export class TextInput {
         this.updateInput(this.defaultValue);
     }
     render() {
-        return (h(Host, { key: '9bd39dfa599b334b4e0016e70ffe8cd72329474e', exportparts: "label,input,input-invalid" }, h("div", { key: 'a9b36d639a80a655ff123584e95666cd28683300', class: "form-group d-flex flex-column" }, h("label", { key: '1a81c3cd62b526ea614ea8de604434f7d96f5041', part: "label", class: "form-label", htmlFor: this.name }, this.label), h("input", { key: 'cb4392faa480cf95ffb9c813495935c659a2de3f', id: this.name, name: this.name, onBlur: this.formControlBlur.emit, onInput: this.handleFormControlInput, onKeyDown: (event) => this.keyDownHandler && this.keyDownHandler(event), maxLength: this.maxLength, part: `input ${this.errorText ? 'input-invalid ' : ''}${this.disabled ? ' input-disabled' : ''}`, class: this.errorText ? 'form-control is-invalid' : 'form-control', type: "text", disabled: this.disabled }), h("form-control-help-text", { key: '33562375f0688b968a615f55d971a5f6a0aed2cc', helpText: this.helpText, name: this.name }), h("form-control-error-text", { key: '7b8db42dc54dfbed07de2a377a08b7a390b5ba9a', errorText: this.errorText, name: this.name }))));
+        return (h(Host, { key: '7b3c980cbad27b29bc87dd4eaa8a23398c8b244c', exportparts: "label,input,input-invalid" }, h("div", { key: 'fa49688c206721f177d2c57b42103ffcd139dde7', class: "form-group d-flex flex-column" }, h("label", { key: '596b8cae71f32769d82fa5e77df11daa172fcce9', part: "label", class: "form-label", htmlFor: this.name }, this.label), h("input", { key: '44ec6ef8e306c5d25190dec87926ba382665f2ca', id: this.name, name: this.name, onBlur: this.formControlBlur.emit, onInput: this.handleFormControlInput, onKeyDown: this.keyDownHandler, onPaste: this.keyDownHandler, maxLength: this.maxLength, part: `input ${this.errorText ? 'input-invalid ' : ''}${this.disabled ? ' input-disabled' : ''}`, class: this.errorText ? 'form-control is-invalid' : 'form-control', type: "text", disabled: this.disabled }), h("form-control-help-text", { key: '888e0abf5f3687266784eda12428cb219321f964', helpText: this.helpText, name: this.name }), h("form-control-error-text", { key: '902a8e06659e63cb35002b5eef8b3f987df8fb44', errorText: this.errorText, name: this.name }))));
     }
     static get is() { return "form-control-text"; }
     static get properties() {

package/dist/collection/components/form/utils.js

@@ -1,18 +1,27 @@
 import { h } from "@stencil/core";
 export const LoadingSpinner = () => (h("div", { class: "spinner-border spinner-border-sm", role: "status" }, h("span", { class: "visually-hidden" }, "Loading...")));
 export const numberOnlyHandler = (e) => {
+    var _a;
     const specialKeys = ['Backspace', 'Tab', 'Enter', 'ArrowUp', 'ArrowDown', 'ArrowLeft', 'ArrowRight', 'Delete'];
     // Check if the key is a special key
-    if (specialKeys.includes(e.key)) {
+    if (e instanceof KeyboardEvent && specialKeys.includes(e.key)) {
         return;
     }
     // Allow Ctrl+V / Command+V for pasting
-    const isPaste = (e.ctrlKey || e.metaKey) && e.key.toLowerCase() === 'v';
+    const isPaste = e instanceof KeyboardEvent && (e.ctrlKey || e.metaKey) && e.key.toLowerCase() === 'v';
     if (isPaste) {
         return;
     }
+    // Handle paste event
+    if (e instanceof ClipboardEvent) {
+        const clipboardData = (_a = e.clipboardData) === null || _a === void 0 ? void 0 : _a.getData('text');
+        if (clipboardData && !/^\d+$/.test(clipboardData)) {
+            e.preventDefault();
+        }
+        return;
+    }
     // Prevent default action if the key is not a digit
-    if (!/^\d$/.test(e.key)) {
+    if (e instanceof KeyboardEvent && !/^\d$/.test(e.key)) {
         e.preventDefault();
     }
 };

package/dist/collection/components/gross-payment-chart/gross-payment-chart-core.js

@@ -68,12 +68,12 @@ export class GrossPaymentChartCore {
         }
     }
     render() {
-        return (h(Host, { key: '46d684da4581001eb7ee5296bf177e21b1a2f24e' }, this.loading && LoadingState(), !this.errorMessage ? h("canvas", { id: "chart", ref: (elem) => this.chartRef = elem }) : ErrorState(this.errorMessage)));
+        return (h(Host, { key: 'c84e3a681d35e62474e6b34b2a54edcae47370d2' }, this.loading && LoadingState(), !this.errorMessage ? h("canvas", { id: "chart", ref: (elem) => this.chartRef = elem }) : ErrorState(this.errorMessage)));
     }
     static get is() { return "gross-payment-chart-core"; }
     static get originalStyleUrls() {
         return {
-            "$": ["gross-payment-chart.scss"]
+            "$": ["gross-payment-chart.css"]
         };
     }
     static get styleUrls() {