@justifi/webcomponents 6.1.1 → 6.2.0-rc.2

package/dist/collection/components/business-forms/business-form/business-representative/business-representative.js

@@ -1,11 +1,13 @@
 import { Host, h } from "@stencil/core";
-import { PHONE_MASKS, SSN_MASK } from "../../../../utils/form-input-masks";
+import { PHONE_MASKS, IDENTITY_MASKS } from "../../../../utils/form-input-masks";
 import { deconstructDate } from "../../utils/helpers";
-import { heading2 } from "../../../../styles/parts";
+import { heading2, label, inputDisabled, buttonSecondary } from "../../../../styles/parts";
+import { countryLabels } from "../../utils/country-config";
 export class BusinessRepresentative {
     constructor() {
         this.errors = {};
         this.representative = {};
+        this.isEditingIdentification = false;
         this.inputHandler = (name, value) => {
             this.formController.setValues(Object.assign(Object.assign({}, this.formController.values.getValue()), { representative: Object.assign(Object.assign({}, this.formController.values.getValue().representative), { [name]: value }) }));
         };
@@ -18,30 +20,62 @@ export class BusinessRepresentative {
         };
     }
     get identificationNumberLabel() {
-        return this.representative.ssn_last4 ? 'Update SSN (optional)' : 'SSN';
+        var _a;
+        const label = countryLabels[this.country].idNumberLabel;
+        const labelOptional = countryLabels[this.country].idNumberLabelOptional;
+        return ((_a = this.representative) === null || _a === void 0 ? void 0 : _a.ssn_last4) ? labelOptional : label;
     }
     componentDidLoad() {
         this.formController.errors.subscribe(errors => (this.errors = Object.assign({}, errors.representative)));
         this.formController.values.subscribe(values => (this.representative = Object.assign({}, values.representative)));
     }
     render() {
+        var _a, _b;
         const representativeDefaultValue = this.formController.getInitialValues().representative;
-        return (h(Host, { key: '88bd35928331776d5cbb7d085fd55a76fde1a084' }, h("fieldset", { key: '202c40f332352c2f4d3c8a136888c39c67379e5f' }, h("legend", { key: 'a0b5043b348b1d8632a6bf0fe2d4309a8132d1f7', part: heading2 }, "Representative"), h("div", { key: 'ba50c004e2b37f384dd8af63b1e0e397abadb9de', class: "row gy-3" }, h("div", { key: 'b85bf5fb0da9e8feae19dbebb0a911362e914601', class: "col-12 col-md-8" }, h("form-control-text", { key: '95f849c7c0ba0c67bdc0a55727e00755e03897ef', name: "name", label: "Full Name", defaultValue: representativeDefaultValue === null || representativeDefaultValue === void 0 ? void 0 : representativeDefaultValue.name, errorText: this.errors.name, inputHandler: this.inputHandler })), h("div", { key: '074067a3ce960b678ea38d53b84adda24e60754c', class: "col-12 col-md-4" }, h("form-control-text", { key: '7ef397af32b7c0f79eeae1499bf3d3d147961c96', name: "title", label: "Title", defaultValue: representativeDefaultValue === null || representativeDefaultValue === void 0 ? void 0 : representativeDefaultValue.title, errorText: this.errors.title, inputHandler: this.inputHandler })), h("div", { key: 'a26bfd8a0824aaa12c6ffa48ac58c2bccc7236ef', class: "col-12 col-md-6" }, h("form-control-text", { key: '39174c4b812462d1aa28824bca550e3f6e1d98b4', name: "email", label: "Email Address", defaultValue: representativeDefaultValue === null || representativeDefaultValue === void 0 ? void 0 : representativeDefaultValue.email, errorText: this.errors.email, inputHandler: this.inputHandler })), h("div", { key: 'ed0a2c52e4df0c43b2536dfd1ff3692a4e5716d9', class: "col-12 col-md-6" }, h("form-control-number-masked", { key: '07bdcc1dd2e1473b64218eb28c8cdcf1cdce2a91', name: "phone", label: "Phone Number", defaultValue: representativeDefaultValue === null || representativeDefaultValue === void 0 ? void 0 : representativeDefaultValue.phone, errorText: this.errors.phone, inputHandler: this.inputHandler, mask: PHONE_MASKS.US })), h("div", { key: '96092fd371ec82a8f8ebbf8bc4e3064768d4ad97', class: "col-12 col-md-4" }, h("form-control-date", { key: 'c24980f126c056aff139e897fdef9795905ea89b', name: "dob_full", label: "Birth Date", defaultValue: representativeDefaultValue === null || representativeDefaultValue === void 0 ? void 0 : representativeDefaultValue.dob_full, errorText: this.errors.dob_full, inputHandler: this.inputHandler, onFormControlInput: this.onDateOfBirthUpdate })), h("div", { key: '9d1695fa6e68bb4ae9a8184dcb5e15d588474ab8', class: "col-12 col-md-8" }, h("form-control-number-masked", { key: '8d8a56c08fb06f1a54baf3ee3d6e31a684205290', name: "identification_number", label: this.identificationNumberLabel, defaultValue: representativeDefaultValue === null || representativeDefaultValue === void 0 ? void 0 : representativeDefaultValue.identification_number, errorText: this.errors.identification_number, inputHandler: this.inputHandler, mask: SSN_MASK })), h("div", { key: '22fa5e16517e14ab031aa5e7e95ea77bd7b28986', class: "col-12" }, h("justifi-identity-address-form", { key: '4a990de739a0ae6fbf1f6a621ff7c0078517e970', errors: this.errors.address, defaultValues: representativeDefaultValue === null || representativeDefaultValue === void 0 ? void 0 : representativeDefaultValue.address, handleFormUpdate: this.onAddressFormUpdate }))))));
+        return (h(Host, { key: '1ce133c6cf1804607b661953bb9d952e6dfdede7' }, h("fieldset", { key: '759e0e7adc03c8814e09effd245e7c25f9fcf536' }, h("legend", { key: '625eb15226d9318075c57c7e13d6b8a04686f00f', part: heading2 }, "Representative"), h("div", { key: '8b11c10cd073c3ffcb7c52f97c463b91a5609afa', class: "row gy-3" }, h("div", { key: '35b0b9a741ee46dfc049ea5914dfa672e4bd64f3', class: "col-12 col-md-8" }, h("form-control-text", { key: '577cb8c5911c5a8364de282ca04e75b045d6de36', name: "name", label: "Full Name", defaultValue: representativeDefaultValue === null || representativeDefaultValue === void 0 ? void 0 : representativeDefaultValue.name, errorText: this.errors.name, inputHandler: this.inputHandler })), h("div", { key: '3ebaa46f7045f1db417285fe3ef9c19310dbe0c6', class: "col-12 col-md-4" }, h("form-control-text", { key: '69eb59adf3da1d3d48b1d395badd4c76ac0d8383', name: "title", label: "Title", defaultValue: representativeDefaultValue === null || representativeDefaultValue === void 0 ? void 0 : representativeDefaultValue.title, errorText: this.errors.title, inputHandler: this.inputHandler })), h("div", { key: 'd9ee1e3a4919e5d714f34ff1417677a48101166f', class: "col-12 col-md-6" }, h("form-control-text", { key: 'cc6c0e28dc815985be5309de33957fcd37f53b29', name: "email", label: "Email Address", defaultValue: representativeDefaultValue === null || representativeDefaultValue === void 0 ? void 0 : representativeDefaultValue.email, errorText: this.errors.email, inputHandler: this.inputHandler })), h("div", { key: 'd40a0a637c921ca6e8fa4aa347369c029c4569cb', class: "col-12 col-md-6" }, h("form-control-number-masked", { key: 'ce15cd57570e34d14bc596c1b5f7e49d3f33ea36', name: "phone", label: "Phone Number", defaultValue: representativeDefaultValue === null || representativeDefaultValue === void 0 ? void 0 : representativeDefaultValue.phone, errorText: this.errors.phone, inputHandler: this.inputHandler, mask: PHONE_MASKS.US })), h("div", { key: '1504ac209231141b564412af3719b2ab6d84e553', class: "col-12 col-md-4" }, h("form-control-date", { key: '8fe92ed396ab947f439a04e2b67787725b393dcb', name: "dob_full", label: "Birth Date", defaultValue: representativeDefaultValue === null || representativeDefaultValue === void 0 ? void 0 : representativeDefaultValue.dob_full, errorText: this.errors.dob_full, inputHandler: this.inputHandler, onFormControlInput: this.onDateOfBirthUpdate })), h("div", { key: 'd8ee89f3f4124ebb222d99a9337db4be7ab7df61', class: "col-12 col-md-8" }, (!((_a = this.representative) === null || _a === void 0 ? void 0 : _a.ssn_last4) || this.isEditingIdentification) ? (h("form-control-number-masked", { name: "identification_number", label: this.identificationNumberLabel, defaultValue: this.isEditingIdentification ? '' : representativeDefaultValue === null || representativeDefaultValue === void 0 ? void 0 : representativeDefaultValue.identification_number, errorText: this.errors.identification_number, inputHandler: this.inputHandler, mask: IDENTITY_MASKS[this.country], helpText: countryLabels[this.country].identityHelpText })) : (h("div", null, h("label", { class: "form-label", part: label }, this.identificationNumberLabel), h("div", { class: "input-group mb-3" }, h("input", { type: "text", class: "form-control", part: inputDisabled, value: `****${(_b = this.representative) === null || _b === void 0 ? void 0 : _b.ssn_last4}`, disabled: true }), h("button", { class: "btn btn-secondary", type: "button", part: buttonSecondary, onClick: () => {
+                this.isEditingIdentification = true;
+                // Clear last4 and current value to force validation
+                this.formController.setValues(Object.assign(Object.assign({}, this.formController.values.getValue()), { representative: Object.assign(Object.assign({}, this.formController.values.getValue().representative), { ssn_last4: null, identification_number: '' }) }));
+            } }, "Change"))))), h("div", { key: '54548bf9622fcc949ebd91db29cc8b877dd7652d', class: "col-12" }, h("justifi-identity-address-form", { key: '9925b7d70bceb8e3d1dafc9313673a5c8a0810a0', errors: this.errors.address, defaultValues: representativeDefaultValue === null || representativeDefaultValue === void 0 ? void 0 : representativeDefaultValue.address, handleFormUpdate: this.onAddressFormUpdate, country: this.country }))))));
     }
     static get is() { return "justifi-business-representative"; }
     static get properties() {
         return {
             "formController": {
-                "type": "unknown",
+                "type": "any",
                 "mutable": false,
                 "complexType": {
                     "original": "FormController",
                     "resolved": "FormController",
                     "references": {
                         "FormController": {
+                            "location": "global",
+                            "id": "global::FormController"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "form-controller"
+            },
+            "country": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "CountryCode",
+                    "resolved": "CountryCode.CAN | CountryCode.USA",
+                    "references": {
+                        "CountryCode": {
                             "location": "import",
-                            "path": "../../../../components",
-                            "id": "src/components.d.ts::FormController"
+                            "path": "../../../../utils/country-codes",
+                            "id": "src/utils/country-codes.ts::CountryCode"
                         }
                     }
                 },
@@ -52,14 +86,17 @@ export class BusinessRepresentative {
                     "text": ""
                 },
                 "getter": false,
-                "setter": false
+                "setter": false,
+                "reflect": false,
+                "attribute": "country"
             }
         };
     }
     static get states() {
         return {
             "errors": {},
-            "representative": {}
+            "representative": {},
+            "isEditingIdentification": {}
         };
     }
 }

package/dist/collection/components/business-forms/business-form/legal-address-form/legal-address-form.js

@@ -1,6 +1,4 @@
 import { Host, h } from "@stencil/core";
-import StateOptions from "../../../../utils/state-options";
-import { numberOnlyHandler } from "../../../../ui-components/form/utils";
 import { heading2 } from "../../../../styles/parts";
 export class LegalAddressForm {
     constructor() {
@@ -15,26 +13,48 @@ export class LegalAddressForm {
         this.formController.setValues(Object.assign(Object.assign({}, this.formController.values.getValue()), { legal_address: Object.assign(Object.assign({}, this.formController.values.getValue().legal_address), { [name]: value }) }));
     }
     render() {
-        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m;
+        var _a;
         const legalAddressDefaultValue = this.formController.getInitialValues().legal_address;
-        return (h(Host, { key: '5b21d99717f9b24c0551c7a96acf68e53e7787bf' }, h("fieldset", { key: 'd63cbd20b2648405c50a819724e0f8cf556f7d26' }, h("legend", { key: 'c0acd14073f13f914015f40d39bf22fb58792434', part: heading2 }, "Business Legal Address"), h("div", { key: 'ee4cee6bd662816f822ee209aeda5e9664f6a64d', class: "row gy-3" }, h("div", { key: '86b258fd09e73cbd2475330419274732231f3871', class: "col-12" }, h("form-control-text", { key: '8d898a9ae448f07932afe2d8cfc2314b92d9c597', name: "line1", label: "Legal Address", inputHandler: this.inputHandler, defaultValue: legalAddressDefaultValue === null || legalAddressDefaultValue === void 0 ? void 0 : legalAddressDefaultValue.line1, errorText: (_b = (_a = this.errors) === null || _a === void 0 ? void 0 : _a.legal_address) === null || _b === void 0 ? void 0 : _b.line1 })), h("div", { key: '1a50c4b86a754035f71efacd39721219fcd54d60', class: "col-12" }, h("form-control-text", { key: '507b1451685e359a900f0bc7010ff39e3631daf2', name: "line2", label: "Address Line 2", inputHandler: this.inputHandler, defaultValue: legalAddressDefaultValue === null || legalAddressDefaultValue === void 0 ? void 0 : legalAddressDefaultValue.line2, errorText: (_d = (_c = this.errors) === null || _c === void 0 ? void 0 : _c.legal_address) === null || _d === void 0 ? void 0 : _d.line2 })), h("div", { key: '1446b4db5f86a3b18e3aceb78274ffe458dbd3db', class: "col-12" }, h("form-control-text", { key: 'e17e4bd95ad4290d18edde79cf05a6b3a105166c', name: "city", label: "City", inputHandler: this.inputHandler, defaultValue: legalAddressDefaultValue === null || legalAddressDefaultValue === void 0 ? void 0 : legalAddressDefaultValue.city, errorText: (_f = (_e = this.errors) === null || _e === void 0 ? void 0 : _e.legal_address) === null || _f === void 0 ? void 0 : _f.city })), h("div", { key: '9b880203bad9e104e6d1299ff73c83cba46ab563', class: "col-12" }, h("form-control-select", { key: '24e4df10f688c9a1b5f2af5217f03919bf7abec7', name: "state", label: "State", options: StateOptions, inputHandler: this.inputHandler, defaultValue: legalAddressDefaultValue === null || legalAddressDefaultValue === void 0 ? void 0 : legalAddressDefaultValue.state, errorText: (_h = (_g = this.errors) === null || _g === void 0 ? void 0 : _g.legal_address) === null || _h === void 0 ? void 0 : _h.state })), h("div", { key: '71f21b19602c268e3b6a839ce41ff9d4f8ffb8c4', class: "col-12" }, h("form-control-text", { key: 'ca71d3e21c5a0aea5367fa28ec1a2422ba9b1cf3', name: "postal_code", label: "Postal Code", inputHandler: this.inputHandler, defaultValue: legalAddressDefaultValue === null || legalAddressDefaultValue === void 0 ? void 0 : legalAddressDefaultValue.postal_code, errorText: (_k = (_j = this.errors) === null || _j === void 0 ? void 0 : _j.legal_address) === null || _k === void 0 ? void 0 : _k.postal_code, maxLength: 5, keyDownHandler: numberOnlyHandler })), h("div", { key: 'aaee0bf6a24ba182e002c1ffb49736fb622cde1f', class: "col-12" }, h("form-control-select", { key: '2b6486771818e584dcc195c304e5a6e16850b4a9', name: "country", label: "Country", options: [{ label: 'United States', value: 'USA' }], inputHandler: this.inputHandler, defaultValue: legalAddressDefaultValue === null || legalAddressDefaultValue === void 0 ? void 0 : legalAddressDefaultValue.country, errorText: (_m = (_l = this.errors) === null || _l === void 0 ? void 0 : _l.legal_address) === null || _m === void 0 ? void 0 : _m.country,
-            // just for now so we skip handling country specificities
-            disabled: true }))))));
+        return (h(Host, { key: '0e6136a175ee0bb8708d1848ad850bd973f60c4b' }, h("fieldset", { key: '2fcfb7b8cc1bf70157dbfaba7bb5df9ddd82454b' }, h("legend", { key: 'ce30f5e679113cceda046f142e01548a1db573a0', part: heading2 }, "Business Legal Address"), h("justifi-form-address-fields", { key: 'a091d88fb62401c814458d696866de64a26a6bff', country: this.country, errors: (_a = this.errors) === null || _a === void 0 ? void 0 : _a.legal_address, defaultValues: legalAddressDefaultValue, inputHandler: this.inputHandler }))));
     }
     static get is() { return "justifi-legal-address-form"; }
     static get properties() {
         return {
             "formController": {
-                "type": "unknown",
+                "type": "any",
                 "mutable": false,
                 "complexType": {
                     "original": "FormController",
                     "resolved": "FormController",
                     "references": {
                         "FormController": {
+                            "location": "global",
+                            "id": "global::FormController"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "form-controller"
+            },
+            "country": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "CountryCode",
+                    "resolved": "CountryCode.CAN | CountryCode.USA",
+                    "references": {
+                        "CountryCode": {
                             "location": "import",
-                            "path": "../../../../components",
-                            "id": "src/components.d.ts::FormController"
+                            "path": "../../../../utils/country-codes",
+                            "id": "src/utils/country-codes.ts::CountryCode"
                         }
                     }
                 },
@@ -45,7 +65,9 @@ export class LegalAddressForm {
                     "text": ""
                 },
                 "getter": false,
-                "setter": false
+                "setter": false,
+                "reflect": false,
+                "attribute": "country"
             }
         };
     }

package/dist/collection/components/business-forms/owner-form/identity-address/identity-address-form.js

@@ -1,6 +1,4 @@
 import { Host, h } from "@stencil/core";
-import StateOptions from "../../../../utils/state-options";
-import { numberOnlyHandler } from "../../../../ui-components/form/utils";
 export class IdentityAddressForm {
     constructor() {
         this.address = {};
@@ -13,10 +11,7 @@ export class IdentityAddressForm {
         this.handleFormUpdate(newValues);
     }
     render() {
-        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m;
-        return (h(Host, { key: '136f90a2d2e8634c003a5f47af20d422b7cc59be' }, h("div", { key: 'e7441c2a0410381be43f8d0735fdf4e390f664f2', class: "row gy-3" }, h("div", { key: '93f23a3ba51716a88bf90628f395dbb3bc456cdc', class: "col-12 col-md-8" }, h("form-control-text", { key: 'f4801f6eb05d3a169142daa6b0d123ef84864de8', name: "line1", label: "Street Address", defaultValue: (_a = this.defaultValues) === null || _a === void 0 ? void 0 : _a.line1, errorText: (_b = this.errors) === null || _b === void 0 ? void 0 : _b.line1, inputHandler: this.inputHandler, helpText: "\u200B\u200BEnter your address exactly as stated on your driver's license. No PO Boxes." })), h("div", { key: 'e8ce49dcd4d3c6df3327d2c011ec1c0a080fb4f2', class: "col-12 col-md-4" }, h("form-control-text", { key: '8cbe92c156c4d410b712b2fc95c7bfe55be4e337', name: "line2", label: "Apartment, Suite, etc. (optional)", defaultValue: (_c = this.defaultValues) === null || _c === void 0 ? void 0 : _c.line2, errorText: (_d = this.errors) === null || _d === void 0 ? void 0 : _d.line2, inputHandler: this.inputHandler })), h("div", { key: '4cfcfc24268fd92ccaac110a8293e95bc9998af8', class: "col-12" }, h("form-control-text", { key: 'b2739b7fd7838ee73c9127fd8e9b0dd6dcd12210', name: "city", label: "City", defaultValue: (_e = this.defaultValues) === null || _e === void 0 ? void 0 : _e.city, errorText: (_f = this.errors) === null || _f === void 0 ? void 0 : _f.city, inputHandler: this.inputHandler })), h("div", { key: 'ce9e4974dcdab596dfcefef362d045ee2fea3648', class: "col-12 col-md-6" }, h("form-control-select", { key: 'c001d0a3d3b402768ec428c0e5760cf0e88c318d', name: "state", label: "State", defaultValue: (_g = this.defaultValues) === null || _g === void 0 ? void 0 : _g.state, options: StateOptions, errorText: (_h = this.errors) === null || _h === void 0 ? void 0 : _h.state, inputHandler: this.inputHandler })), h("div", { key: '7b73598a2b207db9ec2480ed37d163aa45128e6d', class: "col-12 col-md-6" }, h("form-control-text", { key: 'a070edca32110dc4ec238c486ae96852733ae924', name: "postal_code", label: "Postal Code", defaultValue: (_j = this.defaultValues) === null || _j === void 0 ? void 0 : _j.postal_code, errorText: (_k = this.errors) === null || _k === void 0 ? void 0 : _k.postal_code, maxLength: 5, keyDownHandler: numberOnlyHandler, inputHandler: this.inputHandler })), h("div", { key: '57b01955142ed533a65058b63cfd20598e8387c2', class: "col-12" }, h("form-control-select", { key: '8f07809025c039b4c39a452ddf2948f973a82d9a', name: "country", label: "Country", options: [{ label: 'United States', value: 'USA' }], inputHandler: this.inputHandler, defaultValue: (_l = this.defaultValues) === null || _l === void 0 ? void 0 : _l.country, errorText: (_m = this.errors) === null || _m === void 0 ? void 0 : _m.country,
-            // just for now so we skip handling country specificities
-            disabled: true })))));
+        return (h(Host, { key: 'c9b75fa8c884fb755cd26be4433022f278794e4e' }, h("justifi-form-address-fields", { key: '2f9cfa3fc695de214d9203c680e6cb115d714b82', country: this.country, errors: this.errors, defaultValues: this.defaultValues, inputHandler: this.inputHandler })));
     }
     static get is() { return "justifi-identity-address-form"; }
     static get properties() {
@@ -75,6 +70,31 @@ export class IdentityAddressForm {
                 "setter": false,
                 "reflect": false,
                 "attribute": "default-values"
+            },
+            "country": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "CountryCode",
+                    "resolved": "CountryCode.CAN | CountryCode.USA",
+                    "references": {
+                        "CountryCode": {
+                            "location": "import",
+                            "path": "../../../../utils/country-codes",
+                            "id": "src/utils/country-codes.ts::CountryCode"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "country"
             }
         };
     }

package/dist/collection/components/business-forms/owner-form/owner-form-core.js

@@ -1,7 +1,7 @@
 import { h } from "@stencil/core";
 import { FormController } from "../../../ui-components/form/form";
 import { Owner } from "../../../api/Identity";
-import { identitySchema } from "../schemas/business-identity-schema";
+import { identitySchemaByCountry } from "../schemas/business-identity-schema";
 import { Button } from "../../../ui-components";
 import { heading3 } from "../../../styles/parts";
 import { BusinessFormClickActions } from "../utils/event-types";
@@ -137,14 +137,15 @@ export class BusinessOwnerFormCore {
         }
     }
     componentWillLoad() {
-        this.formController = new FormController(identitySchema('owner', this.allowOptionalFields));
+        const schemaFactory = identitySchemaByCountry[this.country];
+        this.formController = new FormController(schemaFactory('owner', this.allowOptionalFields));
         this.ownerId ? this.getData() : this.instantiateOwner({});
     }
     componentDidLoad() {
         this.formController.errors.subscribe(errors => (this.errors = Object.assign({}, errors)));
     }
     render() {
-        return (h("form", { key: '570c20c1fdf79268e6c8193a393515c8602a3a44', onSubmit: this.validateAndSubmit }, h("fieldset", { key: 'f4f75a735438baef254d4578b779ca16e5080a41' }, h("legend", { key: 'dc0c83a7ada9f908afec56d7560f7d9d116baa40', class: "fw-semibold fs-5", part: heading3 }, this.formTitle), h("br", { key: '5d97c0b38073618aef80ff9576cd57ab0e70d44e' }), h("div", { key: 'b15a207a4c4afc1249ce3b8a381e7b57ceb32e7a', class: "row gy-3" }, h("owner-form-inputs", { key: '21bd3e9b00580e7293338ad746c189d19ac3d98e', ownerDefaultValue: this.formController.getInitialValues(), errors: this.errors, formController: this.formController }), h("div", { key: 'b4653d9b78094b15bfba61e3a18ea3703dc53162', class: "d-flex gap-2 justify-content-start" }, h(Button, { key: '0328aa7af6e3c2f7ed8aa16724dedcb576bb9870', variant: "secondary", type: "button", onClick: this.handleRemoveOwner, hidden: !this.showRemoveButton }, "Remove"), h(Button, { key: 'e42671667156149d5424243eef1d6675a3bd6506', variant: "primary", type: "submit", onClick: this.handleAddOwner, disabled: this.isLoading }, this.submitButtonText))), h("hr", { key: 'ee7bf4cdb63cdc31df8b307ffb1772e5c0f0348c' }))));
+        return (h("form", { key: '8374d88e5a1d99f58ac2c93680fb000410a67ec8', onSubmit: this.validateAndSubmit }, h("fieldset", { key: '82d2f80aaff654362852e4e8c5c9775d82a5080c' }, h("legend", { key: 'd74d4c8bdfc91086b14e41b27934dddf14695e49', class: "fw-semibold fs-5", part: heading3 }, this.formTitle), h("br", { key: '8f6fe8d7d6b66ca2b0fd8e4b0797ee681c11f7eb' }), h("div", { key: 'ef546418d4192bc1d1fef02faf47f965127f45ef', class: "row gy-3" }, h("owner-form-inputs", { key: '2f961ee901838a5dd82b20484fe149b393c7c609', ownerDefaultValue: this.formController.getInitialValues(), errors: this.errors, formController: this.formController, country: this.country }), h("div", { key: '8ed50b5de9839353b25d54d7b51546c1d2afaeb5', class: "d-flex gap-2 justify-content-start" }, h(Button, { key: 'a9c94571902b2a6fc68459662ee7be35874ebb66', variant: "secondary", type: "button", onClick: this.handleRemoveOwner, hidden: !this.showRemoveButton }, "Remove"), h(Button, { key: 'dc6072e019ebedc91d99917023b561f7048e7a08', variant: "primary", type: "submit", onClick: this.handleAddOwner, disabled: this.isLoading }, this.submitButtonText))), h("hr", { key: 'd46ee611300752429d1c9b50dfce99e8b6fc10fa' }))));
     }
     static get is() { return "owner-form-core"; }
     static get properties() {
@@ -326,6 +327,31 @@ export class BusinessOwnerFormCore {
                 "setter": false,
                 "reflect": false,
                 "attribute": "owners-length"
+            },
+            "country": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "CountryCode",
+                    "resolved": "CountryCode.CAN | CountryCode.USA",
+                    "references": {
+                        "CountryCode": {
+                            "location": "import",
+                            "path": "../../../utils/country-codes",
+                            "id": "src/utils/country-codes.ts::CountryCode"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "country"
             }
         };
     }

package/dist/collection/components/business-forms/owner-form/owner-form-inputs.js

@@ -1,8 +1,11 @@
 import { h } from "@stencil/core";
-import { PHONE_MASKS, SSN_MASK } from "../../../utils/form-input-masks";
+import { IDENTITY_MASKS, PHONE_MASKS } from "../../../utils/form-input-masks";
 import { updateAddressFormValues, updateDateOfBirthFormValues, updateFormValues } from "../utils/input-handlers";
+import { countryLabels } from "../utils/country-config";
+import { label, inputDisabled, buttonSecondary } from "../../../styles/parts";
 export class BusinessOwnerFormInputs {
     constructor() {
+        this.isEditingIdentification = false;
         this.inputHandler = (name, value) => {
             updateFormValues(this.formController, { [name]: value });
         };
@@ -11,7 +14,15 @@ export class BusinessOwnerFormInputs {
         };
     }
     render() {
-        return (h("div", { key: '86abe1713fdfd297e88c1fc1734fadb2c9eab966', class: "row gy-3" }, h("div", { key: '63a03271f2a777d4cede3b0790e11c7f4108797f', class: "col-12 col-md-8" }, h("form-control-text", { key: 'b86dd9184dbf50e00e047a733ff708526e32d6dc', name: "name", label: "Full Name", defaultValue: this.ownerDefaultValue.name, errorText: this.errors.name, inputHandler: this.inputHandler })), h("div", { key: 'c3850b7425ca0d8a118a6b78933f3a2fbe343124', class: "col-12 col-md-4" }, h("form-control-text", { key: 'f1f6e801eb36bcae5f2e51f8cd4ea9b7ed6a34a8', name: "title", label: "Title", defaultValue: this.ownerDefaultValue.title, errorText: this.errors.title, inputHandler: this.inputHandler, helpText: "Role at your business, e.g. President, CEO, Treasurer." })), h("div", { key: 'b07a8a86dbdef296c9438953ef311ccae3aed23c', class: "col-12 col-md-6" }, h("form-control-text", { key: '714ca04b0bf0e5ed1b116b8f4963ba12f7fd6b77', name: "email", label: "Email Address", defaultValue: this.ownerDefaultValue.email, errorText: this.errors.email, inputHandler: this.inputHandler })), h("div", { key: '46c11c80bb58d0190ff05f1e87ba962443b07c59', class: "col-12 col-md-6" }, h("form-control-number-masked", { key: '6da40db9fb8b3e4f3a744cd0426f4e6436350594', name: "phone", label: "Phone Number", defaultValue: this.ownerDefaultValue.phone, errorText: this.errors.phone, inputHandler: this.inputHandler, mask: PHONE_MASKS.US })), h("div", { key: '0960ea2fb399d0098caeabf45347a89c74066f57', class: "col-12 col-md-4" }, h("form-control-date", { key: 'fe0891a3f42c093d70db1dd1d1a7e121ba3091c1', name: "dob_full", label: "Birth Date", defaultValue: this.ownerDefaultValue.dob_full, errorText: this.errors.dob_full, inputHandler: this.inputHandler, onFormControlInput: (e) => updateDateOfBirthFormValues(e, this.formController), helpText: "Must be 18 or older." })), h("div", { key: 'e7cbc519fa6f4fa5b03a0d0b69c7d7f1c42185ff', class: "col-12 col-md-8" }, h("form-control-number-masked", { key: 'cf2b280c1560bd1a9f80cf81c1543d41bd807233', name: "identification_number", label: "SSN", defaultValue: this.ownerDefaultValue.identification_number, errorText: this.errors.identification_number, inputHandler: this.inputHandler, mask: SSN_MASK, helpText: "Enter your full Social Security Number. It is required for Federal OFAC check." })), h("div", { key: '1755c849992bfd9f459b65b4cf7e967039fdbe27', class: "col-12" }, h("justifi-identity-address-form", { key: 'ac5372d4a9fad8ee3cfe2af20c11868e8753cc35', errors: this.errors.address, defaultValues: this.ownerDefaultValue.address, handleFormUpdate: this.onAddressFormUpdate }))));
+        var _a, _b;
+        return (h("div", { key: '81c659f924f51a559e3e958b5d608f7c68022093', class: "row gy-3" }, h("div", { key: '9c89bc8e39cb584bf81852784a335599308681ff', class: "col-12 col-md-8" }, h("form-control-text", { key: 'a02d86ccbbcda1219a2e4e2885d0ffb54bcc3942', name: "name", label: "Full Name", defaultValue: this.ownerDefaultValue.name, errorText: this.errors.name, inputHandler: this.inputHandler })), h("div", { key: '7281855c61b30b689809aa9fd3d4fce3927fcb8f', class: "col-12 col-md-4" }, h("form-control-text", { key: 'c91163386bd23653e3eaca4cf66c9690c28ed6f7', name: "title", label: "Title", defaultValue: this.ownerDefaultValue.title, errorText: this.errors.title, inputHandler: this.inputHandler, helpText: "Role at your business, e.g. President, CEO, Treasurer." })), h("div", { key: 'c998576d6f8442f255685a31a4bb0463175163f5', class: "col-12 col-md-6" }, h("form-control-text", { key: '345003706db0198c9de5e4234f3fe3efbacc51c7', name: "email", label: "Email Address", defaultValue: this.ownerDefaultValue.email, errorText: this.errors.email, inputHandler: this.inputHandler })), h("div", { key: '8bccc4ebd45c92924e921f7fffa7f5214406c9e2', class: "col-12 col-md-6" }, h("form-control-number-masked", { key: 'adaf6251217a5396c36ee7e9c0963cf2c948d9cd', name: "phone", label: "Phone Number", defaultValue: this.ownerDefaultValue.phone, errorText: this.errors.phone, inputHandler: this.inputHandler, mask: PHONE_MASKS.US })), h("div", { key: 'd87f294ba9bf27df562f3e9b0ea4e286c1c6a725', class: "col-12 col-md-4" }, h("form-control-date", { key: '0681a51f830eb1b358c525deb46baa06f7bc9977', name: "dob_full", label: "Birth Date", defaultValue: this.ownerDefaultValue.dob_full, errorText: this.errors.dob_full, inputHandler: this.inputHandler, onFormControlInput: (e) => updateDateOfBirthFormValues(e, this.formController), helpText: "Must be 18 or older." })), h("div", { key: '090785d6d86ec3122c3884ec8ba46df43f71d08e', class: "col-12 col-md-8" }, (!((_a = this.ownerDefaultValue) === null || _a === void 0 ? void 0 : _a.ssn_last4) || this.isEditingIdentification) ? (h("form-control-number-masked", { name: "identification_number", label: countryLabels[this.country].idNumberLabel, defaultValue: this.isEditingIdentification ? '' : this.ownerDefaultValue.identification_number, errorText: this.errors.identification_number, inputHandler: this.inputHandler, mask: IDENTITY_MASKS[this.country], helpText: countryLabels[this.country].identityHelpText })) : (h("div", null, h("label", { class: "form-label", part: label }, countryLabels[this.country].idNumberLabel), h("div", { class: "input-group mb-3" }, h("input", { type: "text", class: "form-control", part: inputDisabled, value: `****${(_b = this.ownerDefaultValue) === null || _b === void 0 ? void 0 : _b.ssn_last4}`, disabled: true }), h("button", { class: "btn btn-secondary", type: "button", part: buttonSecondary, onClick: () => {
+                this.isEditingIdentification = true;
+                // Clear last4 and current value to force validation
+                updateFormValues(this.formController, {
+                    ssn_last4: null,
+                    identification_number: ''
+                });
+            } }, "Change"))))), h("div", { key: '3d5eabefcd198d1a27bfe158c92e3c18a0a14e69', class: "col-12" }, h("justifi-identity-address-form", { key: '10158bd6a40fa0ca00d7e9feb04d7c22e51d5829', errors: this.errors.address, defaultValues: this.ownerDefaultValue.address, handleFormUpdate: this.onAddressFormUpdate, country: this.country }))));
     }
     ;
     static get is() { return "owner-form-inputs"; }
@@ -56,16 +67,40 @@ export class BusinessOwnerFormInputs {
                 "attribute": "errors"
             },
             "formController": {
-                "type": "unknown",
+                "type": "any",
                 "mutable": false,
                 "complexType": {
                     "original": "FormController",
                     "resolved": "FormController",
                     "references": {
                         "FormController": {
+                            "location": "global",
+                            "id": "global::FormController"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "form-controller"
+            },
+            "country": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "CountryCode",
+                    "resolved": "CountryCode.CAN | CountryCode.USA",
+                    "references": {
+                        "CountryCode": {
                             "location": "import",
-                            "path": "../../../components",
-                            "id": "src/components.d.ts::FormController"
+                            "path": "../../../utils/country-codes",
+                            "id": "src/utils/country-codes.ts::CountryCode"
                         }
                     }
                 },
@@ -76,8 +111,15 @@ export class BusinessOwnerFormInputs {
                     "text": ""
                 },
                 "getter": false,
-                "setter": false
+                "setter": false,
+                "reflect": false,
+                "attribute": "country"
             }
         };
     }
+    static get states() {
+        return {
+            "isEditingIdentification": {}
+        };
+    }
 }

package/dist/collection/components/business-forms/owner-form/owner-form.js

@@ -34,7 +34,7 @@ export class BusinessOwnerForm {
         });
     }
     render() {
-        return (h("owner-form-core", { key: '07ad7cd2bb38442dc591c9e3421223294690ee8c', ownerId: this.ownerId, businessId: this.businessId, getOwner: this.getOwner, patchOwner: this.patchOwner, postOwner: this.postOwner, allowOptionalFields: this.allowOptionalFields, removeOwner: this.removeOwner, newFormOpen: this.newFormOpen, ownersLength: this.ownersLength, ref: ref => this.coreComponent = ref }));
+        return (h("owner-form-core", { key: '84af0e74910def3f34aa4a6ce9d1f501faf6f5c5', ownerId: this.ownerId, businessId: this.businessId, getOwner: this.getOwner, patchOwner: this.patchOwner, postOwner: this.postOwner, allowOptionalFields: this.allowOptionalFields, removeOwner: this.removeOwner, newFormOpen: this.newFormOpen, ownersLength: this.ownersLength, country: this.country, ref: ref => this.coreComponent = ref }));
     }
     static get is() { return "justifi-owner-form"; }
     static get properties() {
@@ -169,6 +169,31 @@ export class BusinessOwnerForm {
                 "setter": false,
                 "reflect": false,
                 "attribute": "owners-length"
+            },
+            "country": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "CountryCode",
+                    "resolved": "CountryCode.CAN | CountryCode.USA",
+                    "references": {
+                        "CountryCode": {
+                            "location": "import",
+                            "path": "../../../utils/country-codes",
+                            "id": "src/utils/country-codes.ts::CountryCode"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "country"
             }
         };
     }

package/dist/collection/components/business-forms/payment-provisioning/additional-questions/business-additional-questions-form-step.js

@@ -34,7 +34,7 @@ export class AdditionalQuestionsFormStep {
         }
     }
     render() {
-        return (h("justifi-additional-questions-form-step-core", { key: 'b494a48aa19f63e30007663276876540c5149879', getBusiness: this.getBusiness, patchBusiness: this.patchBusiness, allowOptionalFields: this.allowOptionalFields, ref: el => this.coreComponent = el }));
+        return (h("justifi-additional-questions-form-step-core", { key: 'a2e24c04b312a226b607147bcf68d6ea50a2be05', getBusiness: this.getBusiness, patchBusiness: this.patchBusiness, allowOptionalFields: this.allowOptionalFields, ref: el => this.coreComponent = el }));
     }
     static get is() { return "justifi-additional-questions-form-step"; }
     static get properties() {

package/dist/collection/components/business-forms/payment-provisioning/bank-account/bank-account-document-inputs.js

@@ -2,7 +2,7 @@ import { h } from "@stencil/core";
 import { EntityDocumentType } from "../../../../api";
 export class BankAccountDocumentFormInputs {
     render() {
-        return (h("div", { key: '23f5fa6b191b3feea7677a85a421002642a86f50', class: "row gy-3" }, h("div", { key: 'da9d9698f15aeb4bb05baef8fb63c630fcff8a82', class: "col-12" }, h("form-control-file", { key: 'b84a8ec1753210f74989c04b5520f0e94c5a083d', 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: '06d442df900406f122970bde6b2b293f2c9080ee', class: "col-12" }, h("form-control-file", { key: 'b3dc1d48900c5932c4d59f8b31a323193f0e86b4', 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: '4daf6eadf7e1213c3534bd845c917af0b1ec1fec', class: "row gy-3" }, h("div", { key: '9d7235d40a0884960948eaac7dc990e947bf5165', class: "col-12" }, h("form-control-file", { key: 'e0e3704079e20c86dacec668d27ca23ef981aa2f', 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: '5c4c20191c6c54170896a9c0f893a7fe06ff6a70', class: "col-12" }, h("form-control-file", { key: '6d4ac9d3a47952644bab5afe4b23332a56c04035', name: "bank_statement", label: "Bank Statement", documentType: EntityDocumentType.bankStatement, inputHandler: this.inputHandler, onFileSelected: this.storeFiles, errorText: this.errors["bank_statement"], multiple: true }))));
     }
     static get is() { return "bank-account-document-form-inputs"; }
     static get properties() {

package/dist/collection/components/business-forms/payment-provisioning/bank-account/bank-account-form-inputs-canada.js

@@ -0,0 +1,88 @@
+import { h } from "@stencil/core";
+import { bankAccountTypeOptions } from "../../utils";
+import { numberOnlyHandler } from "../../../../ui-components/form/utils";
+export class BankAccountFormInputsCanada {
+    render() {
+        var _a, _b, _c, _d, _e, _f, _g;
+        return (h("div", { key: '80b2030f1c1840df293a5ec600fe16836b502647', class: "row gy-3" }, h("div", { key: '5a28a5b515856da7808fc49cf0f775f8c4c71daa', 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: '62761912ccf0ee5ba1e5c13cbb08cde9687d05bd', 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: '04472a07096890a51d2e2db463f7040a389fd4e1', 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: 'c2caa8ddb2b1038efb49e3361eab760108a34308', 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: '2446720991bd2512f6bb8a779e47e526100dacb3', 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: '98cda3809e604cc3e863f2d01698e217694b2550', 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: 'de285afb20fe922e3a8dd66727222e2f49567aae', 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." })))));
+    }
+    static get is() { return "bank-account-form-inputs-canada"; }
+    static get properties() {
+        return {
+            "defaultValue": {
+                "type": "any",
+                "mutable": false,
+                "complexType": {
+                    "original": "any",
+                    "resolved": "any",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "default-value"
+            },
+            "errors": {
+                "type": "any",
+                "mutable": false,
+                "complexType": {
+                    "original": "any",
+                    "resolved": "any",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "errors"
+            },
+            "inputHandler": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "(name: string, value: string) => void",
+                    "resolved": "(name: string, value: string) => void",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false
+            },
+            "formDisabled": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "form-disabled"
+            }
+        };
+    }
+}

package/dist/collection/components/business-forms/payment-provisioning/bank-account/bank-account-form-inputs.js

@@ -3,7 +3,8 @@ import { bankAccountTypeOptions } from "../../utils";
 import { numberOnlyHandler } from "../../../../ui-components/form/utils";
 export class BankAccountFormInputs {
     render() {
-        return (h("div", { key: 'da4dc9523bca84cdd02f7e5d47e513c426ed90fd', class: "row gy-3" }, h("div", { key: 'b625a293dec704cbbb132469fdbc8c5d99a660e1', class: "col-12" }, h("form-control-text", { key: 'b41460ddc605f73faf71233ccbbef7e34e690e5a', name: "bank_name", label: "Bank Name", defaultValue: this.defaultValue.bank_name, errorText: this.errors.bank_name, inputHandler: this.inputHandler, disabled: this.formDisabled })), h("div", { key: 'e5560bcdba399baa2e54441436ef5c67936e9fef', class: "col-12" }, h("form-control-text", { key: '18cd16931899f724fd92cb89f1b8d4cd41c5354c', name: "nickname", label: "Nickname", defaultValue: this.defaultValue.nickname, errorText: this.errors.nickname, inputHandler: this.inputHandler, disabled: this.formDisabled })), h("div", { key: '3bb589db98e5d65022576b602bda41f36e3a90d5', class: "col-12" }, h("form-control-text", { key: 'c870513b8895add114d5ec588561fa6f33a63514', name: "account_owner_name", label: "Account Owner Name", defaultValue: this.defaultValue.account_owner_name, errorText: this.errors.account_owner_name, inputHandler: this.inputHandler, disabled: this.formDisabled })), h("div", { key: '1783e7b4af2b012338fe2e1b4f1faa9b5e086bcd', class: "col-12" }, h("form-control-select", { key: '6a9af0f6edeae133dce04b7f829abb802db4ac83', name: "account_type", label: "Account Type", options: bankAccountTypeOptions, defaultValue: this.defaultValue.account_type, errorText: this.errors.account_type, inputHandler: this.inputHandler, disabled: this.formDisabled })), h("div", { key: '3c3ffced96f67320b4c580be6f28dd8ef5d2c109', class: "col-12" }, h("form-control-text", { key: 'e85df115a9de08ad9abb3237f7bf6c6d23c84150', name: "account_number", label: "Account Number", defaultValue: this.defaultValue.account_number, maxLength: 17, errorText: this.errors.account_number, inputHandler: this.inputHandler, keyDownHandler: numberOnlyHandler, disabled: this.formDisabled, helpText: "Please copy the account number as shown on your statement/check. Do not include spaces or dashes." })), h("div", { key: '5a25cb25160aff24d1f62df2115dbd248709141e', class: "col-12" }, h("form-control-text", { key: 'dfdf7dce470efb8eea65aa6daf562d190963bace', name: "routing_number", label: "Routing Number", defaultValue: this.defaultValue.routing_number, maxLength: 9, errorText: this.errors.routing_number, inputHandler: this.inputHandler, keyDownHandler: numberOnlyHandler, disabled: this.formDisabled, helpText: "A valid routing number is nine digits. Please include any leading or trailing zeroes." }))));
+        var _a, _b, _c, _d, _e, _f;
+        return (h("div", { key: '951373cbaf604ec2f34364fd93ac9ccf666a4e58', class: "row gy-3" }, h("div", { key: 'a2fbc555aeb3b9bed12f032385ea9889482e6caf', 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: 'c05c9e185293799ee94cbd8bec3976d115469b00', 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: 'b3cc026a1c2079ddcd744d7557742ac98073f03c', 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: 'f3649a91a8af13374eb55f06ecc81e6e06bd4b01', 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: '34eb7df603e1d7d9bb616c51057dd5da9a2e3e3f', 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: '64897a96be65ddd311267e5ea1571993ab61787d', 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." })))));
     }
     static get is() { return "bank-account-form-inputs"; }
     static get properties() {