@justifi/webcomponents 6.11.0 → 6.12.1-rc.1

package/dist/module/bank-account-billing-form-simple.js

@@ -1,88 +1,6 @@
-import { proxyCustomElement, HTMLElement, h } from '@stencil/core/internal/client';
-import { n as nameOnlySchema } from './billing-form-schema.js';
-import { W as billingForm } from './parts.js';
-import { F as FormController } from './form.js';
-import { S as StyledHost } from './styled-host.js';
-import './details.js';
-import './event-types.js';
-import './justifi-radio-list-item2.js';
-import { d as defineCustomElement$3 } from './custom-popper2.js';
-import { d as defineCustomElement$2 } from './form-control-text2.js';
-import { d as defineCustomElement$1 } from './form-control-tooltip2.js';
+import { B as BankAccountBillingFormSimple$1, d as defineCustomElement$1 } from './bank-account-billing-form-simple2.js';
 
-const BankAccountBillingFormSimple = /*@__PURE__*/ proxyCustomElement(class BankAccountBillingFormSimple extends HTMLElement {
-    constructor(registerHost) {
-        super();
-        if (registerHost !== false) {
-            this.__registerHost();
-        }
-        this.__attachShadow();
-        this.errors = {};
-        this.inputHandler = (name, value) => {
-            this.formController.setValues(Object.assign(Object.assign({}, this.formController.values.getValue()), { [name]: value }));
-        };
-    }
-    componentWillLoad() {
-        this.formController = new FormController(nameOnlySchema());
-    }
-    componentDidLoad() {
-        this.formController.values.subscribe(values => this.billingInfo = Object.assign({}, values));
-        this.formController.errors.subscribe(errors => {
-            this.errors = Object.assign({}, errors);
-        });
-    }
-    async getValues() {
-        return this.formController.values.getValue();
-    }
-    async fill(fields) {
-        this.formController.setInitialValues(fields);
-    }
-    async validate() {
-        const isValid = await this.formController.validate();
-        const errors = this.formController.errors.getValue();
-        return { isValid, errors };
-    }
-    render() {
-        const billingFormDefaultValue = this.formController.getInitialValues();
-        return (h(StyledHost, { key: '1ad536d9f27bdb1cb3da9721c486cd4f1006ecb1' }, h("div", { key: 'b1589bbc4bba3703c54e6a5651aaad5499c218f4', part: billingForm, class: "mt-4" }, h("form", { key: 'd60bc906ec293d45c1887c0864ff4c1f28845461' }, h("fieldset", { key: '166465d844cbfb0d55dae03d88b52ad202d1616c' }, this.legend && (h("legend", { key: '509d5e560791fb6f96a5e755931fd7a363b21e06' }, this.legend)), h("div", { key: '979e4bae922ff88aae107d921136215474a847ea', class: "row gy-3" }, h("div", { key: '4014b6c65739d39077d69f0e649eec0fadab0c87', class: "col-12" }, h("form-control-text", { key: '2e9e1dbb43ffdd9848415ceefc8df75ec60a35e0', name: 'name', label: 'Full Name', defaultValue: billingFormDefaultValue.name, errorText: this.errors.name, inputHandler: this.inputHandler }))))))));
-    }
-}, [257, "justifi-bank-account-billing-form-simple", {
-        "legend": [1025],
-        "formController": [32],
-        "billingInfo": [32],
-        "errors": [32],
-        "getValues": [64],
-        "fill": [64],
-        "validate": [64]
-    }]);
-function defineCustomElement() {
-    if (typeof customElements === "undefined") {
-        return;
-    }
-    const components = ["justifi-bank-account-billing-form-simple", "custom-popper", "form-control-text", "form-control-tooltip"];
-    components.forEach(tagName => { switch (tagName) {
-        case "justifi-bank-account-billing-form-simple":
-            if (!customElements.get(tagName)) {
-                customElements.define(tagName, BankAccountBillingFormSimple);
-            }
-            break;
-        case "custom-popper":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$3();
-            }
-            break;
-        case "form-control-text":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$2();
-            }
-            break;
-        case "form-control-tooltip":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$1();
-            }
-            break;
-    } });
-}
-defineCustomElement();
+const BankAccountBillingFormSimple = BankAccountBillingFormSimple$1;
+const defineCustomElement = defineCustomElement$1;
 
-export { BankAccountBillingFormSimple as B, defineCustomElement as d };
+export { BankAccountBillingFormSimple, defineCustomElement };

package/dist/module/bank-account-billing-form-simple2.js

@@ -0,0 +1,91 @@
+import { proxyCustomElement, HTMLElement, h } from '@stencil/core/internal/client';
+import { n as nameOnlySchema } from './billing-form-schema.js';
+import { w as billingForm } from './parts.js';
+import { F as FormController } from './form.js';
+import { c as checkoutStore, o as onChange } from './checkout.store.js';
+import { d as defineCustomElement$3 } from './custom-popper2.js';
+import { d as defineCustomElement$2 } from './form-control-text2.js';
+import { d as defineCustomElement$1 } from './form-control-tooltip2.js';
+
+const BankAccountBillingFormSimple = /*@__PURE__*/ proxyCustomElement(class BankAccountBillingFormSimple extends HTMLElement {
+    constructor(registerHost) {
+        super();
+        if (registerHost !== false) {
+            this.__registerHost();
+        }
+        this.errors = {};
+        this.inputHandler = (name, value) => {
+            this.formController.setValues(Object.assign(Object.assign({}, this.formController.values.getValue()), { [name]: value }));
+        };
+    }
+    componentWillLoad() {
+        this.formController = new FormController(nameOnlySchema());
+        const fields = checkoutStore.billingFormFields;
+        if (fields && Object.keys(fields).some((k) => fields[k])) {
+            this.formController.setInitialValues(fields);
+        }
+    }
+    componentDidLoad() {
+        this.formController.values.subscribe(values => this.billingInfo = Object.assign({}, values));
+        this.formController.errors.subscribe(errors => {
+            this.errors = Object.assign({}, errors);
+        });
+        this.unsubscribeFromStore = onChange('billingFormFields', (newValue) => {
+            this.formController.setInitialValues(newValue);
+        });
+    }
+    disconnectedCallback() {
+        var _a;
+        (_a = this.unsubscribeFromStore) === null || _a === void 0 ? void 0 : _a.call(this);
+    }
+    async getValues() {
+        return this.formController.values.getValue();
+    }
+    async validate() {
+        const isValid = await this.formController.validate();
+        const errors = this.formController.errors.getValue();
+        return { isValid, errors };
+    }
+    render() {
+        const billingFormDefaultValue = this.formController.getInitialValues();
+        return (h("div", { key: '34e77db7e212eab37000212b208a6dc1afaa8054', part: billingForm, class: "mt-4" }, h("form", { key: '289b661851fc6d68a5d6dd376a6e31b691e25aea' }, h("fieldset", { key: '84efe1610a1bbc8b12a95711814280a4949e850c' }, this.legend && (h("legend", { key: '7076fc6b9ef264ac72d36833c7b760b5999e030e' }, this.legend)), h("div", { key: '66d78f8c243230d790d854ba16292f3d84ef5ca9', class: "row gy-3" }, h("div", { key: 'e58dfaa9b758dcfbe434a3d51ab6e51b54cc83c1', class: "col-12" }, h("form-control-text", { key: 'b872c9f5e3726312171bb16a95e3709bcd12f40a', name: 'name', label: 'Full Name', defaultValue: billingFormDefaultValue.name, errorText: this.errors.name, inputHandler: this.inputHandler })))))));
+    }
+}, [256, "bank-account-billing-form-simple", {
+        "legend": [1025],
+        "formController": [32],
+        "billingInfo": [32],
+        "errors": [32],
+        "getValues": [64],
+        "validate": [64]
+    }]);
+function defineCustomElement() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["bank-account-billing-form-simple", "custom-popper", "form-control-text", "form-control-tooltip"];
+    components.forEach(tagName => { switch (tagName) {
+        case "bank-account-billing-form-simple":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, BankAccountBillingFormSimple);
+            }
+            break;
+        case "custom-popper":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$3();
+            }
+            break;
+        case "form-control-text":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$2();
+            }
+            break;
+        case "form-control-tooltip":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$1();
+            }
+            break;
+    } });
+}
+defineCustomElement();
+
+export { BankAccountBillingFormSimple as B, defineCustomElement as d };

package/dist/module/bank-account-document-form-inputs.js

@@ -1,4 +1,4 @@
-import { B as BankAccountDocumentFormInputs$1, d as defineCustomElement$1 } from './bank-account-document-inputs.js';
+import { B as BankAccountDocumentFormInputs$1, d as defineCustomElement$1 } from './bank-account-document-form-inputs2.js';
 
 const BankAccountDocumentFormInputs = BankAccountDocumentFormInputs$1;
 const defineCustomElement = defineCustomElement$1;

package/dist/module/{bank-account-document-inputs.js → bank-account-document-form-inputs2.js}

@@ -17,7 +17,7 @@ const BankAccountDocumentFormInputs = /*@__PURE__*/ proxyCustomElement(class Ban
         }
     }
     render() {
-        return (h("div", { key: '7f9ea576aad16f3c2ea45c987a38878ea65f2df2', class: "row gy-3" }, h("div", { key: '316fe3f20df7c7dce2b8903e6073e0fe7920e5e8', class: "col-12" }, h("form-control-file", { key: '320d6b7f3de2cfeeb30eb1e08ca4122123854ffd', name: "voided_check", label: "Voided Check", documentType: EntityDocumentType.voidedCheck, inputHandler: this.inputHandler, onFileSelected: this.storeFiles, errorText: this.errors["voided_check"], multiple: true })), h("div", { key: 'f33a936c61c14c701e40d375e4dfc4c554b8293c', class: "col-12" }, h("form-control-file", { key: '1e160d8211a71175d6a45b10590fb2c8774f61e1', name: "bank_statement", label: "Bank Statement", documentType: EntityDocumentType.bankStatement, inputHandler: this.inputHandler, onFileSelected: this.storeFiles, errorText: this.errors["bank_statement"], multiple: true }))));
+        return (h("div", { key: 'e578f34f963b144c3121b1c1b3822d70b960aa79', class: "row gy-3" }, h("div", { key: 'cfb038a81afcd9f8c35e3145ddb77d5edf4e6c83', class: "col-12" }, h("form-control-file", { key: '23ff12d7fe707a5761e13ee71dd801c563cfdd54', name: "voided_check", label: "Voided Check", documentType: EntityDocumentType.voidedCheck, inputHandler: this.inputHandler, onFileSelected: this.storeFiles, errorText: this.errors["voided_check"], multiple: true })), h("div", { key: '107353c687412a90890901f9a37743fa222bdba5', class: "col-12" }, h("form-control-file", { key: '99223848b8937bb332b47f12245a9ef9467c8f93', name: "bank_statement", label: "Bank Statement", documentType: EntityDocumentType.bankStatement, inputHandler: this.inputHandler, onFileSelected: this.storeFiles, errorText: this.errors["bank_statement"], multiple: true }))));
     }
 }, [256, "bank-account-document-form-inputs", {
         "inputHandler": [16],

package/dist/module/bank-account-form-inputs-canada2.js

@@ -1,7 +1,7 @@
 import { proxyCustomElement, HTMLElement, h } from '@stencil/core/internal/client';
-import { b as bankAccountTypeOptions } from './business-form-options.js';
+import { a as bankAccountTypeOptions } from './business-form-options.js';
 import './event-types2.js';
-import { n as numberOnlyHandler } from './utils3.js';
+import { n as numberOnlyHandler } from './utils4.js';
 import { d as defineCustomElement$5 } from './bank-account-read-only-value2.js';
 import { d as defineCustomElement$4 } from './custom-popper2.js';
 import { d as defineCustomElement$3 } from './form-control-select2.js';
@@ -17,7 +17,7 @@ const BankAccountFormInputsCanada = /*@__PURE__*/ proxyCustomElement(class BankA
     }
     render() {
         var _a, _b, _c, _d, _e, _f, _g;
-        return (h("div", { key: '34cbf10449df73748095fd7122d0ae1355a83e13', class: "row gy-3" }, h("div", { key: '607cc5cbc70fdd2d5a325bef7002a44740394282', class: "col-12" }, this.formDisabled ? (h("bank-account-read-only-value", { label: "Bank Name", value: (_a = this.defaultValue) === null || _a === void 0 ? void 0 : _a.bank_name })) : (h("form-control-text", { name: "bank_name", label: "Bank Name", defaultValue: this.defaultValue.bank_name, errorText: this.errors.bank_name, inputHandler: this.inputHandler }))), h("div", { key: 'f57f4cd733f2dd439d6d83f32078371618f5fa06', class: "col-12" }, this.formDisabled ? (h("bank-account-read-only-value", { label: "Nickname", value: (_b = this.defaultValue) === null || _b === void 0 ? void 0 : _b.nickname })) : (h("form-control-text", { name: "nickname", label: "Nickname", defaultValue: this.defaultValue.nickname, errorText: this.errors.nickname, inputHandler: this.inputHandler }))), h("div", { key: 'b92dface0116321ea990bfcaf1b036b5629385db', class: "col-12" }, this.formDisabled ? (h("bank-account-read-only-value", { label: "Account Owner Name", value: (_c = this.defaultValue) === null || _c === void 0 ? void 0 : _c.account_owner_name })) : (h("form-control-text", { name: "account_owner_name", label: "Account Owner Name", defaultValue: this.defaultValue.account_owner_name, errorText: this.errors.account_owner_name, inputHandler: this.inputHandler }))), h("div", { key: '45d68efa47de76ee420cedfb97e82f498a2de97b', class: "col-12" }, this.formDisabled ? (h("bank-account-read-only-value", { label: "Account Type", value: (_d = this.defaultValue) === null || _d === void 0 ? void 0 : _d.account_type })) : (h("form-control-select", { name: "account_type", label: "Account Type", options: bankAccountTypeOptions, defaultValue: this.defaultValue.account_type, errorText: this.errors.account_type, inputHandler: this.inputHandler }))), h("div", { key: '8419925e8470d63d506e1f7e82ccdf1a1132ecc0', class: "col-3" }, this.formDisabled ? (h("bank-account-read-only-value", { label: "Transit Number", value: ((_e = this.defaultValue) === null || _e === void 0 ? void 0 : _e.transit_number) || '' })) : (h("form-control-text", { name: "transit_number", label: "Transit Number", defaultValue: this.defaultValue.transit_number, maxLength: 5, errorText: this.errors.transit_number, inputHandler: this.inputHandler, keyDownHandler: numberOnlyHandler, helpText: "5 digits" }))), h("div", { key: 'aa6e83c409e0cf93f1903394f63c0b719ec8808e', class: "col-3" }, this.formDisabled ? (h("bank-account-read-only-value", { label: "Institution Number", value: ((_f = this.defaultValue) === null || _f === void 0 ? void 0 : _f.institution_number) || '' })) : (h("form-control-text", { name: "institution_number", label: "Institution Number", defaultValue: this.defaultValue.institution_number, maxLength: 3, errorText: this.errors.institution_number, inputHandler: this.inputHandler, keyDownHandler: numberOnlyHandler, helpText: "3 digits" }))), h("div", { key: '029058c023daca9d0488f45478af6edafe359df7', class: "col-6" }, this.formDisabled ? (h("bank-account-read-only-value", { label: "Account Number", value: ((_g = this.defaultValue) === null || _g === void 0 ? void 0 : _g.account_number_last4) ? `**** ${this.defaultValue.account_number_last4}` : '' })) : (h("form-control-text", { name: "account_number", label: "Account Number", defaultValue: this.defaultValue.account_number, maxLength: 17, errorText: this.errors.account_number, inputHandler: this.inputHandler, keyDownHandler: numberOnlyHandler, helpText: "Please copy the account number as shown on your statement. Do not include spaces or dashes." })))));
+        return (h("div", { key: 'aea608cdca19fc3adac323404606aa7c56a18572', class: "row gy-3" }, h("div", { key: 'ef177cde388fb2c353a7e99088f59fa7add65a95', class: "col-12" }, this.formDisabled ? (h("bank-account-read-only-value", { label: "Bank Name", value: (_a = this.defaultValue) === null || _a === void 0 ? void 0 : _a.bank_name })) : (h("form-control-text", { name: "bank_name", label: "Bank Name", defaultValue: this.defaultValue.bank_name, errorText: this.errors.bank_name, inputHandler: this.inputHandler }))), h("div", { key: '28371c86ce49071b8ba0326468124b5de5709548', class: "col-12" }, this.formDisabled ? (h("bank-account-read-only-value", { label: "Nickname", value: (_b = this.defaultValue) === null || _b === void 0 ? void 0 : _b.nickname })) : (h("form-control-text", { name: "nickname", label: "Nickname", defaultValue: this.defaultValue.nickname, errorText: this.errors.nickname, inputHandler: this.inputHandler }))), h("div", { key: 'd6d822d223d29f266ceed47ced4b8938f39b9655', class: "col-12" }, this.formDisabled ? (h("bank-account-read-only-value", { label: "Account Owner Name", value: (_c = this.defaultValue) === null || _c === void 0 ? void 0 : _c.account_owner_name })) : (h("form-control-text", { name: "account_owner_name", label: "Account Owner Name", defaultValue: this.defaultValue.account_owner_name, errorText: this.errors.account_owner_name, inputHandler: this.inputHandler }))), h("div", { key: '4c895bf0d84692d64fb79a597216913cd16e9fa9', class: "col-12" }, this.formDisabled ? (h("bank-account-read-only-value", { label: "Account Type", value: (_d = this.defaultValue) === null || _d === void 0 ? void 0 : _d.account_type })) : (h("form-control-select", { name: "account_type", label: "Account Type", options: bankAccountTypeOptions, defaultValue: this.defaultValue.account_type, errorText: this.errors.account_type, inputHandler: this.inputHandler }))), h("div", { key: '4b37594d23e84228d347e1ee2747aa4712f4258c', class: "col-3" }, this.formDisabled ? (h("bank-account-read-only-value", { label: "Transit Number", value: ((_e = this.defaultValue) === null || _e === void 0 ? void 0 : _e.transit_number) || '' })) : (h("form-control-text", { name: "transit_number", label: "Transit Number", defaultValue: this.defaultValue.transit_number, maxLength: 5, errorText: this.errors.transit_number, inputHandler: this.inputHandler, keyDownHandler: numberOnlyHandler, helpText: "5 digits" }))), h("div", { key: '7a1f042244ba0f3f20ad20c5b95771128c03174c', class: "col-3" }, this.formDisabled ? (h("bank-account-read-only-value", { label: "Institution Number", value: ((_f = this.defaultValue) === null || _f === void 0 ? void 0 : _f.institution_number) || '' })) : (h("form-control-text", { name: "institution_number", label: "Institution Number", defaultValue: this.defaultValue.institution_number, maxLength: 3, errorText: this.errors.institution_number, inputHandler: this.inputHandler, keyDownHandler: numberOnlyHandler, helpText: "3 digits" }))), h("div", { key: '9af8cc4227238851ca63b75fb00210ce19210b48', class: "col-6" }, this.formDisabled ? (h("bank-account-read-only-value", { label: "Account Number", value: ((_g = this.defaultValue) === null || _g === void 0 ? void 0 : _g.account_number_last4) ? `**** ${this.defaultValue.account_number_last4}` : '' })) : (h("form-control-text", { name: "account_number", label: "Account Number", defaultValue: this.defaultValue.account_number, maxLength: 17, errorText: this.errors.account_number, inputHandler: this.inputHandler, keyDownHandler: numberOnlyHandler, helpText: "Please copy the account number as shown on your statement. Do not include spaces or dashes." })))));
     }
 }, [256, "bank-account-form-inputs-canada", {
         "defaultValue": [8, "default-value"],

package/dist/module/bank-account-form-inputs2.js

@@ -1,7 +1,7 @@
 import { proxyCustomElement, HTMLElement, h } from '@stencil/core/internal/client';
-import { b as bankAccountTypeOptions } from './business-form-options.js';
+import { a as bankAccountTypeOptions } from './business-form-options.js';
 import './event-types2.js';
-import { n as numberOnlyHandler } from './utils3.js';
+import { n as numberOnlyHandler } from './utils4.js';
 import { d as defineCustomElement$5 } from './bank-account-read-only-value2.js';
 import { d as defineCustomElement$4 } from './custom-popper2.js';
 import { d as defineCustomElement$3 } from './form-control-select2.js';
@@ -17,7 +17,7 @@ const BankAccountFormInputs = /*@__PURE__*/ proxyCustomElement(class BankAccount
     }
     render() {
         var _a, _b, _c, _d, _e, _f;
-        return (h("div", { key: '5dc7139f54d11979410d0d67ca29e65b02f30200', class: "row gy-3" }, h("div", { key: '118f15bf02855b24baec5ce2a2c3cf5b241b3da4', class: "col-12" }, this.formDisabled ? (h("bank-account-read-only-value", { label: "Bank Name", value: (_a = this.defaultValue) === null || _a === void 0 ? void 0 : _a.bank_name })) : (h("form-control-text", { name: "bank_name", label: "Bank Name", defaultValue: this.defaultValue.bank_name, errorText: this.errors.bank_name, inputHandler: this.inputHandler }))), h("div", { key: 'db03eccee03ec4b7d0de637306315982a2cd770d', class: "col-12" }, this.formDisabled ? (h("bank-account-read-only-value", { label: "Nickname", value: (_b = this.defaultValue) === null || _b === void 0 ? void 0 : _b.nickname })) : (h("form-control-text", { name: "nickname", label: "Nickname", defaultValue: this.defaultValue.nickname, errorText: this.errors.nickname, inputHandler: this.inputHandler }))), h("div", { key: '217120e0052b8ee41cac8f901ac4d9742b0c6ea9', class: "col-12" }, this.formDisabled ? (h("bank-account-read-only-value", { label: "Account Owner Name", value: (_c = this.defaultValue) === null || _c === void 0 ? void 0 : _c.account_owner_name })) : (h("form-control-text", { name: "account_owner_name", label: "Account Owner Name", defaultValue: this.defaultValue.account_owner_name, errorText: this.errors.account_owner_name, inputHandler: this.inputHandler }))), h("div", { key: 'f589511545d6262966a6fa2888cb78babacfb770', class: "col-12" }, this.formDisabled ? (h("bank-account-read-only-value", { label: "Account Type", value: (_d = this.defaultValue) === null || _d === void 0 ? void 0 : _d.account_type })) : (h("form-control-select", { name: "account_type", label: "Account Type", options: bankAccountTypeOptions, defaultValue: this.defaultValue.account_type, errorText: this.errors.account_type, inputHandler: this.inputHandler }))), h("div", { key: '24df83bb2666cee381c266608c43f3fd729db4cf', class: "col-6" }, this.formDisabled ? (h("bank-account-read-only-value", { label: "Account Number", value: ((_e = this.defaultValue) === null || _e === void 0 ? void 0 : _e.account_number_last4) ? `**** ${this.defaultValue.account_number_last4}` : '' })) : (h("form-control-text", { name: "account_number", label: "Account Number", defaultValue: this.defaultValue.account_number, maxLength: 17, errorText: this.errors.account_number, inputHandler: this.inputHandler, keyDownHandler: numberOnlyHandler, helpText: "Please copy the account number as shown on your statement/check. Do not include spaces or dashes." }))), h("div", { key: '75fe11d71e57707d088f8a90a250621fce82647f', class: "col-6" }, this.formDisabled ? (h("bank-account-read-only-value", { label: "Routing Number", value: ((_f = this.defaultValue) === null || _f === void 0 ? void 0 : _f.routing_number) || '' })) : (h("form-control-text", { name: "routing_number", label: "Routing Number", defaultValue: this.defaultValue.routing_number, maxLength: 9, errorText: this.errors.routing_number, inputHandler: this.inputHandler, keyDownHandler: numberOnlyHandler, helpText: "A valid routing number is nine digits. Please include any leading or trailing zeroes." })))));
+        return (h("div", { key: '735c8fd61c0dbf8f9ff51d284af45170b5660224', class: "row gy-3" }, h("div", { key: '894209630dd0abb597a6c67a56f8100e4d746d49', class: "col-12" }, this.formDisabled ? (h("bank-account-read-only-value", { label: "Bank Name", value: (_a = this.defaultValue) === null || _a === void 0 ? void 0 : _a.bank_name })) : (h("form-control-text", { name: "bank_name", label: "Bank Name", defaultValue: this.defaultValue.bank_name, errorText: this.errors.bank_name, inputHandler: this.inputHandler }))), h("div", { key: '35c0f042f315c6ab4b0f8fdcac0e41cc765c17d6', class: "col-12" }, this.formDisabled ? (h("bank-account-read-only-value", { label: "Nickname", value: (_b = this.defaultValue) === null || _b === void 0 ? void 0 : _b.nickname })) : (h("form-control-text", { name: "nickname", label: "Nickname", defaultValue: this.defaultValue.nickname, errorText: this.errors.nickname, inputHandler: this.inputHandler }))), h("div", { key: '0633bcb39aacf43b924af203f8e359f984eb0714', class: "col-12" }, this.formDisabled ? (h("bank-account-read-only-value", { label: "Account Owner Name", value: (_c = this.defaultValue) === null || _c === void 0 ? void 0 : _c.account_owner_name })) : (h("form-control-text", { name: "account_owner_name", label: "Account Owner Name", defaultValue: this.defaultValue.account_owner_name, errorText: this.errors.account_owner_name, inputHandler: this.inputHandler }))), h("div", { key: 'aa31611fbc5abf27411f9057826c7371bc5775d3', class: "col-12" }, this.formDisabled ? (h("bank-account-read-only-value", { label: "Account Type", value: (_d = this.defaultValue) === null || _d === void 0 ? void 0 : _d.account_type })) : (h("form-control-select", { name: "account_type", label: "Account Type", options: bankAccountTypeOptions, defaultValue: this.defaultValue.account_type, errorText: this.errors.account_type, inputHandler: this.inputHandler }))), h("div", { key: '1c05be48c83e85a16991875c367f9d853c8ec6e7', class: "col-6" }, this.formDisabled ? (h("bank-account-read-only-value", { label: "Account Number", value: ((_e = this.defaultValue) === null || _e === void 0 ? void 0 : _e.account_number_last4) ? `**** ${this.defaultValue.account_number_last4}` : '' })) : (h("form-control-text", { name: "account_number", label: "Account Number", defaultValue: this.defaultValue.account_number, maxLength: 17, errorText: this.errors.account_number, inputHandler: this.inputHandler, keyDownHandler: numberOnlyHandler, helpText: "Please copy the account number as shown on your statement/check. Do not include spaces or dashes." }))), h("div", { key: 'da84ea19a3eea3b40b3d32d0135e1fda9163427e', class: "col-6" }, this.formDisabled ? (h("bank-account-read-only-value", { label: "Routing Number", value: ((_f = this.defaultValue) === null || _f === void 0 ? void 0 : _f.routing_number) || '' })) : (h("form-control-text", { name: "routing_number", label: "Routing Number", defaultValue: this.defaultValue.routing_number, maxLength: 9, errorText: this.errors.routing_number, inputHandler: this.inputHandler, keyDownHandler: numberOnlyHandler, helpText: "A valid routing number is nine digits. Please include any leading or trailing zeroes." })))));
     }
 }, [256, "bank-account-form-inputs", {
         "defaultValue": [8, "default-value"],

package/dist/module/bank-account-form.js

@@ -1,83 +1,4 @@
-import { h, proxyCustomElement, HTMLElement, Host } from '@stencil/core/internal/client';
-import { S as Skeleton } from './skeleton.js';
-import { w as waitForConfig, c as configState } from './config-state.js';
-import { d as generateTabId } from './utils2.js';
-import { d as defineCustomElement$2 } from './iframe-input2.js';
-
-const BankAccountFormSkeleton = (props) => {
-    const { isReady } = props;
-    if (isReady) {
-        return null;
-    }
-    return (h("div", { class: "container-fluid p-0" }, h("div", { class: "row mb-3" }, h("div", { class: "col-12 align-content-end" }, h(Skeleton, { height: "18px", width: "120px" }), h(Skeleton, { height: "36px" }))), h("div", { class: "row" }, h("div", { class: "col-12 align-content-end" }, h(Skeleton, { height: "18px", width: "110px" }), h(Skeleton, { height: "36px" })))));
-};
-
-const BankAccountForm$1 = /*@__PURE__*/ proxyCustomElement(class BankAccountForm extends HTMLElement {
-    constructor(registerHost) {
-        super();
-        if (registerHost !== false) {
-            this.__registerHost();
-        }
-        this.isReady = false;
-    }
-    async componentWillLoad() {
-        await waitForConfig();
-        this.iframeOrigin = configState.iframeOrigin;
-        this.tabId = generateTabId();
-    }
-    componentDidRender() {
-        const elements = [
-            this.accountNumberIframeElement,
-            this.routingNumberIframeElement,
-        ];
-        Promise.all(elements.map((element) => {
-            return new Promise((resolve) => {
-                element.addEventListener('iframeLoaded', () => { resolve(); });
-            });
-        })).then(() => {
-            this.isReady = true;
-        });
-    }
-    async validate() {
-        const accountNumberIsValid = await this.accountNumberIframeElement.validate();
-        const routingNumberIsValid = await this.routingNumberIframeElement.validate();
-        return accountNumberIsValid && routingNumberIsValid;
-    }
-    async tokenize(clientId, paymentMethodMetadata, account) {
-        return this.accountNumberIframeElement.tokenize(clientId, paymentMethodMetadata, account);
-    }
-    render() {
-        return (h(Host, { key: 'a104b2e88e818472d0158990ccf2cac6d7315616' }, h(BankAccountFormSkeleton, { key: '1ed1ac87a66aedf6a7528247e0ff3a803c74e4c3', isReady: this.isReady }), h("div", { key: 'a96c05c60c51f97c8abb7dc6a8cfebc940ea1513', class: "container-fluid p-0", style: {
-                opacity: this.isReady ? '1' : '0',
-                height: this.isReady ? 'auto' : '0',
-            } }, h("div", { key: '3d168fd241702b30f0c8727d3c0aae65c20b69aa', class: "row mb-3" }, h("iframe-input", { key: 'dc1da989b1577ed62b3eeafd33128aca38e4610d', inputId: "accountNumber", ref: (el) => (this.accountNumberIframeElement = el), label: "Account Number", iframeOrigin: `${this.iframeOrigin}/v2/accountNumber?tabId=${this.tabId}` })), h("div", { key: '1179ae9d6b9f476bb01a1ee4f4edd7da6f22f635', class: "row" }, h("iframe-input", { key: '7e79b383876be1711a2e21ab7462f86281ebf28c', inputId: "routingNumber", ref: (el) => (this.routingNumberIframeElement = el), label: "Routing Number", iframeOrigin: `${this.iframeOrigin}/v2/routingNumber?tabId=${this.tabId}` })))));
-    }
-}, [256, "bank-account-form", {
-        "isReady": [32],
-        "iframeOrigin": [32],
-        "tabId": [32],
-        "validate": [64],
-        "tokenize": [64]
-    }]);
-function defineCustomElement$1() {
-    if (typeof customElements === "undefined") {
-        return;
-    }
-    const components = ["bank-account-form", "iframe-input"];
-    components.forEach(tagName => { switch (tagName) {
-        case "bank-account-form":
-            if (!customElements.get(tagName)) {
-                customElements.define(tagName, BankAccountForm$1);
-            }
-            break;
-        case "iframe-input":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$2();
-            }
-            break;
-    } });
-}
-defineCustomElement$1();
+import { B as BankAccountForm$1, d as defineCustomElement$1 } from './bank-account-form2.js';
 
 const BankAccountForm = BankAccountForm$1;
 const defineCustomElement = defineCustomElement$1;

package/dist/module/{bank-account.js → bank-account-form2.js}

@@ -1,12 +1,8 @@
 import { h, proxyCustomElement, HTMLElement } from '@stencil/core/internal/client';
-import { S as StyledHost } from './styled-host.js';
-import './details.js';
-import './event-types.js';
-import './justifi-radio-list-item2.js';
 import { S as Skeleton } from './skeleton.js';
-import { c as checkPkgVersion, J as JustifiAnalytics } from './Analytics.js';
-import { d as generateTabId } from './utils2.js';
 import { w as waitForConfig, c as configState } from './config-state.js';
+import { d as generateTabId } from './utils2.js';
+import { c as checkPkgVersion } from './check-pkg-version.js';
 import { d as defineCustomElement$2 } from './hidden-input2.js';
 import { d as defineCustomElement$1 } from './iframe-input2.js';
 
@@ -24,7 +20,6 @@ const BankAccountForm = /*@__PURE__*/ proxyCustomElement(class BankAccountForm e
         if (registerHost !== false) {
             this.__registerHost();
         }
-        this.__attachShadow();
         this.isReady = false;
     }
     async componentWillLoad() {
@@ -32,7 +27,6 @@ const BankAccountForm = /*@__PURE__*/ proxyCustomElement(class BankAccountForm e
         this.iframeOrigin = configState.iframeOrigin;
         this.tabId = generateTabId();
         checkPkgVersion();
-        this.analytics = new JustifiAnalytics(this);
     }
     componentDidRender() {
         const elements = [
@@ -47,27 +41,24 @@ const BankAccountForm = /*@__PURE__*/ proxyCustomElement(class BankAccountForm e
             this.isReady = true;
         });
     }
-    disconnectedCallback() {
-        var _a;
-        (_a = this.analytics) === null || _a === void 0 ? void 0 : _a.cleanup();
-    }
     async validate() {
         const accountNumberIsValid = await this.accountNumberIframeElement.validate();
         const routingNumberIsValid = await this.routingNumberIframeElement.validate();
         return accountNumberIsValid && routingNumberIsValid;
     }
     async tokenize({ clientId, paymentMethodMetadata, account }) {
-        return this.accountNumberIframeElement.tokenize(clientId, paymentMethodMetadata, account);
+        const result = await this.accountNumberIframeElement.tokenize(clientId, paymentMethodMetadata, account);
+        return result;
     }
     render() {
-        return (h(StyledHost, { key: 'b9674b4e8cfd28e440f28c3e08772bc879f0d1b6' }, h(BankAccountFormSkeleton, { key: '87adb553cd4fefac370379bbfcc373fbd8935f60', isReady: this.isReady }), h("hidden-input", { key: '1395bba6465865528e94e945ca614107027e86c4' }), h("div", { key: '7ce58ad6226ac6cb3c4ec45895a5e3a94885d3a9', class: "container-fluid p-0", style: {
+        return (h("div", { key: 'b19157c62bd6511b9f61ca8f94b7294b370bc8b9' }, h(BankAccountFormSkeleton, { key: '72ad4b72fbf0763a55be74045102b74fa4208e32', isReady: this.isReady }), h("hidden-input", { key: '73f5599e3cfd6c5cf85ef306711436c3749e0a9b' }), h("div", { key: '75c0c1496b02665348cc2b3ec1847772f4039dcd', class: "container-fluid p-0", style: {
                 opacity: this.isReady ? '1' : '0',
                 height: this.isReady ? 'auto' : '0',
-            } }, h("div", { key: '85a4a2955404571823404bd9aa46c0744b5f1469', class: "row mb-3" }, h("iframe-input", { key: 'af85c82af0770b89bbba09347b5f3bf65d581e5a', inputId: "accountNumber", ref: (el) => (this.accountNumberIframeElement = el), label: "Account Number", iframeOrigin: `${this.iframeOrigin}/v2/accountNumber?tabId=${this.tabId}` })), h("div", { key: '201171891252c6384e47657b007e7e0381d12cfa', class: "row" }, h("iframe-input", { key: '1f2b63b6cb11c0dd906727aaba3127e68ecb540c', inputId: "routingNumber", ref: (el) => (this.routingNumberIframeElement = el), label: "Routing Number", iframeOrigin: `${this.iframeOrigin}/v2/routingNumber?tabId=${this.tabId}` })))));
+            } }, h("div", { key: 'eac4d39be4f282f510a486ec86522a21501b978f', class: "row mb-3" }, h("iframe-input", { key: '76a5fa31aa254a910af3349875c9112e1f0bde46', inputId: "accountNumber", ref: (el) => (this.accountNumberIframeElement = el), label: "Account Number", iframeOrigin: `${this.iframeOrigin}/v2/accountNumber?tabId=${this.tabId}` })), h("div", { key: 'bd636c2c0fd993594b9f6b8ef275b9951100e822', class: "row" }, h("iframe-input", { key: '796289f5ece7fc117fd3779f9086b927ccb9e6d2', inputId: "routingNumber", ref: (el) => (this.routingNumberIframeElement = el), label: "Routing Number", iframeOrigin: `${this.iframeOrigin}/v2/routingNumber?tabId=${this.tabId}` })))));
     }
-}, [257, "justifi-bank-account-form", {
-        "iframeOrigin": [32],
+}, [256, "bank-account-form", {
         "isReady": [32],
+        "iframeOrigin": [32],
         "tabId": [32],
         "validate": [64],
         "tokenize": [64]
@@ -76,9 +67,9 @@ function defineCustomElement() {
     if (typeof customElements === "undefined") {
         return;
     }
-    const components = ["justifi-bank-account-form", "hidden-input", "iframe-input"];
+    const components = ["bank-account-form", "hidden-input", "iframe-input"];
     components.forEach(tagName => { switch (tagName) {
-        case "justifi-bank-account-form":
+        case "bank-account-form":
             if (!customElements.get(tagName)) {
                 customElements.define(tagName, BankAccountForm);
             }

package/dist/module/bank-account-read-only-value2.js

@@ -1,5 +1,5 @@
 import { proxyCustomElement, HTMLElement, h } from '@stencil/core/internal/client';
-import { t as text } from './parts.js';
+import { j as text } from './parts.js';
 
 const BankAccountReadOnlyValue = /*@__PURE__*/ proxyCustomElement(class BankAccountReadOnlyValue extends HTMLElement {
     constructor(registerHost) {
@@ -9,7 +9,7 @@ const BankAccountReadOnlyValue = /*@__PURE__*/ proxyCustomElement(class BankAcco
         }
     }
     render() {
-        return (h("div", { key: 'ad9eadcf49dbc67e51cd814d3ded334a587cc17c' }, h("label", { key: 'b8ba3d8b7ef9fc33e0e0870f71b7df5dbfae4759', class: "form-label", part: text }, this.label), h("div", { key: '1839bdadb96b3c814c73991530497f9a7be6a10d', part: text }, this.value || '')));
+        return (h("div", { key: '00324bedfc493145fa318532ce8efac12fad1823' }, h("label", { key: '0585ba26a000e3e761d7f7f212349392b692720b', class: "form-label", part: text }, this.label), h("div", { key: '448c97ef256388d8541a7b96d34d972ce41b824a', part: text }, this.value || '')));
     }
 }, [256, "bank-account-read-only-value", {
         "label": [1],

package/dist/module/billing-form-full.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../types/components";
+
+interface BillingFormFull extends Components.BillingFormFull, HTMLElement {}
+export const BillingFormFull: {
+    prototype: BillingFormFull;
+    new (): BillingFormFull;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

package/dist/module/billing-form-full.js

@@ -1,99 +1,6 @@
-import { proxyCustomElement, HTMLElement, h } from '@stencil/core/internal/client';
-import { f as fullBillingSchema } from './billing-form-schema.js';
-import { W as billingForm } from './parts.js';
-import { S as StyledHost } from './styled-host.js';
-import { H as Header3 } from './header-3.js';
-import './details.js';
-import './event-types.js';
-import './justifi-radio-list-item2.js';
-import { S as StateOptions } from './Business.js';
-import { F as FormController } from './form.js';
-import { d as defineCustomElement$4 } from './custom-popper2.js';
-import { d as defineCustomElement$3 } from './form-control-select2.js';
-import { d as defineCustomElement$2 } from './form-control-text2.js';
-import { d as defineCustomElement$1 } from './form-control-tooltip2.js';
+import { B as BillingFormFull$1, d as defineCustomElement$1 } from './billing-form-full2.js';
 
-const BillingFormFull = /*@__PURE__*/ proxyCustomElement(class BillingFormFull extends HTMLElement {
-    constructor(registerHost) {
-        super();
-        if (registerHost !== false) {
-            this.__registerHost();
-        }
-        this.__attachShadow();
-        this.errors = {};
-        this.inputHandler = (name, value) => {
-            this.formController.setValues(Object.assign(Object.assign({}, this.formController.values.getValue()), { [name]: value }));
-        };
-    }
-    componentWillLoad() {
-        this.formController = new FormController(fullBillingSchema());
-        // Set up subscriptions here to avoid warnings about setting state during componentDidLoad
-        this.formController.values.subscribe(values => this.billingInfo = Object.assign({}, values));
-        this.formController.errors.subscribe(errors => {
-            this.errors = Object.assign({}, errors);
-        });
-    }
-    async getValues() {
-        return this.formController.values.getValue();
-    }
-    async fill(fields) {
-        this.formController.setInitialValues(fields);
-    }
-    async validate() {
-        const isValid = await this.formController.validate();
-        const errors = this.formController.errors.getValue();
-        return { isValid, errors };
-    }
-    render() {
-        // Guard clause to ensure formController is initialized before rendering
-        if (!this.formController) {
-            return null;
-        }
-        const billingFormDefaultValue = this.formController.getInitialValues();
-        return (h(StyledHost, null, h("div", { part: billingForm, class: "mt-4" }, h(Header3, { text: "Billing address", class: "fs-6 fw-bold lh-lg mb-4" }), h("form", null, h("fieldset", null, this.legend && (h("legend", null, this.legend)), h("div", { class: "row gy-3" }, h("div", { class: "col-12" }, h("form-control-text", { name: 'name', label: 'Full Name', defaultValue: billingFormDefaultValue.name, errorText: this.errors.name, inputHandler: this.inputHandler })), h("div", { class: "col-12" }, h("form-control-text", { name: 'address_line1', label: 'Street Address', defaultValue: billingFormDefaultValue.address_line1, errorText: this.errors.address_line1, inputHandler: this.inputHandler })), h("div", { class: "col-12" }, h("form-control-text", { name: 'address_line2', label: "Apartment, Suite, etc. (optional)", defaultValue: billingFormDefaultValue.address_line2, errorText: this.errors.address_line2, inputHandler: this.inputHandler })), h("div", { class: "col-12" }, h("form-control-text", { name: 'address_city', label: "City", defaultValue: billingFormDefaultValue.address_city, errorText: this.errors.address_city, inputHandler: this.inputHandler })), h("div", { class: "col-12" }, h("form-control-select", { name: 'address_state', label: 'State', options: StateOptions, defaultValue: billingFormDefaultValue.address_state, errorText: this.errors.address_state, inputHandler: this.inputHandler })), h("div", { class: "col-12" }, h("form-control-text", { name: 'address_postal_code', label: "Postal Code", defaultValue: billingFormDefaultValue.address_postal_code, errorText: this.errors.address_postal_code, inputHandler: this.inputHandler, maxLength: 7 }))))))));
-    }
-}, [257, "justifi-billing-form-full", {
-        "legend": [1025],
-        "formController": [32],
-        "billingInfo": [32],
-        "errors": [32],
-        "getValues": [64],
-        "fill": [64],
-        "validate": [64]
-    }]);
-function defineCustomElement() {
-    if (typeof customElements === "undefined") {
-        return;
-    }
-    const components = ["justifi-billing-form-full", "custom-popper", "form-control-select", "form-control-text", "form-control-tooltip"];
-    components.forEach(tagName => { switch (tagName) {
-        case "justifi-billing-form-full":
-            if (!customElements.get(tagName)) {
-                customElements.define(tagName, BillingFormFull);
-            }
-            break;
-        case "custom-popper":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$4();
-            }
-            break;
-        case "form-control-select":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$3();
-            }
-            break;
-        case "form-control-text":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$2();
-            }
-            break;
-        case "form-control-tooltip":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$1();
-            }
-            break;
-    } });
-}
-defineCustomElement();
+const BillingFormFull = BillingFormFull$1;
+const defineCustomElement = defineCustomElement$1;
 
-export { BillingFormFull as B, defineCustomElement as d };
+export { BillingFormFull, defineCustomElement };