@justifi/webcomponents 6.1.0-rc.2 → 6.1.0-rc.3

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,21 +137,21 @@ 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: '08673bb0eb61a77b3ed37702606808f28caf507b', onSubmit: this.validateAndSubmit }, h("fieldset", { key: '73e9707a99d56c7eca7737fc02b77a9d69931ef6' }, h("legend", { key: '3d85ec901c9051e30472623c740194e48cc60790', class: "fw-semibold fs-5", part: heading3 }, this.formTitle), h("br", { key: 'a7256d1bfa79edd90c70eab491d533d2bcd07a94' }), h("div", { key: 'b74744930ecd1ac1ef08d8e356d5eeb7f5417c39', class: "row gy-3" }, h("owner-form-inputs", { key: 'a9fdfe906615eb494f74001396b41a433fb5366b', ownerDefaultValue: this.formController.getInitialValues(), errors: this.errors, formController: this.formController }), h("div", { key: '32fe5564d5feb8056f2401a6dd219dae0d0d10b0', class: "d-flex gap-2 justify-content-start" }, h(Button, { key: '9e2c1d664b382260fb82c735454dbbf478e99fdd', variant: "secondary", type: "button", onClick: this.handleRemoveOwner, hidden: !this.showRemoveButton }, "Remove"), h(Button, { key: 'db94849f699044848b46e87b285bd0ee30d66b92', variant: "primary", type: "submit", onClick: this.handleAddOwner, disabled: this.isLoading }, this.submitButtonText))), h("hr", { key: '9e62fbf6cb1b1d5fa8fc4b676a72cf4350058937' }))));
+        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() {
         return {
             "ownerId": {
                 "type": "string",
-                "attribute": "owner-id",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -166,11 +166,11 @@ export class BusinessOwnerFormCore {
                 },
                 "getter": false,
                 "setter": false,
-                "reflect": false
+                "reflect": false,
+                "attribute": "owner-id"
             },
             "businessId": {
                 "type": "string",
-                "attribute": "business-id",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -185,11 +185,11 @@ export class BusinessOwnerFormCore {
                 },
                 "getter": false,
                 "setter": false,
-                "reflect": false
+                "reflect": false,
+                "attribute": "business-id"
             },
             "getOwner": {
                 "type": "unknown",
-                "attribute": "get-owner",
                 "mutable": false,
                 "complexType": {
                     "original": "Function",
@@ -212,7 +212,6 @@ export class BusinessOwnerFormCore {
             },
             "patchOwner": {
                 "type": "unknown",
-                "attribute": "patch-owner",
                 "mutable": false,
                 "complexType": {
                     "original": "Function",
@@ -235,7 +234,6 @@ export class BusinessOwnerFormCore {
             },
             "postOwner": {
                 "type": "unknown",
-                "attribute": "post-owner",
                 "mutable": false,
                 "complexType": {
                     "original": "Function",
@@ -258,7 +256,6 @@ export class BusinessOwnerFormCore {
             },
             "allowOptionalFields": {
                 "type": "boolean",
-                "attribute": "allow-optional-fields",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -273,11 +270,11 @@ export class BusinessOwnerFormCore {
                 },
                 "getter": false,
                 "setter": false,
-                "reflect": false
+                "reflect": false,
+                "attribute": "allow-optional-fields"
             },
             "removeOwner": {
                 "type": "unknown",
-                "attribute": "remove-owner",
                 "mutable": false,
                 "complexType": {
                     "original": "(id: string) => void",
@@ -295,7 +292,6 @@ export class BusinessOwnerFormCore {
             },
             "newFormOpen": {
                 "type": "boolean",
-                "attribute": "new-form-open",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -310,11 +306,11 @@ export class BusinessOwnerFormCore {
                 },
                 "getter": false,
                 "setter": false,
-                "reflect": false
+                "reflect": false,
+                "attribute": "new-form-open"
             },
             "ownersLength": {
                 "type": "number",
-                "attribute": "owners-length",
                 "mutable": false,
                 "complexType": {
                     "original": "number",
@@ -329,7 +325,33 @@ export class BusinessOwnerFormCore {
                 },
                 "getter": false,
                 "setter": false,
-                "reflect": 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: '2f3679b3d4fb45dd55ada0d3752017c9ba94be9e', class: "row gy-3" }, h("div", { key: '4ae3a6fbad22e94321940a46ea79bcc82049ba40', class: "col-12 col-md-8" }, h("form-control-text", { key: 'bad30c901a7341aabe09a20b9b075212092ed475', name: "name", label: "Full Name", defaultValue: this.ownerDefaultValue.name, errorText: this.errors.name, inputHandler: this.inputHandler })), h("div", { key: '025366d57d5ceb0932b105410f8948cc092d84f3', class: "col-12 col-md-4" }, h("form-control-text", { key: '7c746f5b8fe06c71e800123b46ea40e701c675ef', 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: '97808fe13be4a772d820f92003320e1b2d6dff5c', class: "col-12 col-md-6" }, h("form-control-text", { key: '264e975df8cd9ca53cb05b60824055028839d3ca', name: "email", label: "Email Address", defaultValue: this.ownerDefaultValue.email, errorText: this.errors.email, inputHandler: this.inputHandler })), h("div", { key: '3a045af74578f3bec4c66848cec5460a1588800d', class: "col-12 col-md-6" }, h("form-control-number-masked", { key: '17627d6bfc876106ec40e63dcb6a3fb1b7b7f009', name: "phone", label: "Phone Number", defaultValue: this.ownerDefaultValue.phone, errorText: this.errors.phone, inputHandler: this.inputHandler, mask: PHONE_MASKS.US })), h("div", { key: '394b0454272509ff5d99cd63e2f3d1f2f1d0dff1', class: "col-12 col-md-4" }, h("form-control-date", { key: 'b079e3422551e8be640d34461adbbbeb86f659b4', 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: 'fdaf32d03ac0d562ecc6c14f552a891f7ab0e31f', class: "col-12 col-md-8" }, h("form-control-number-masked", { key: '18c3a9019fb9d0abc8654d59b504bfba27ca9661', 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: '5f5f2815471a5b4a7b18db1aba58597e429b425b', class: "col-12" }, h("justifi-identity-address-form", { key: '663d4185f2a96a260b118e0e4a9437dbff3d1906', 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"; }
@@ -19,7 +30,6 @@ export class BusinessOwnerFormInputs {
         return {
             "ownerDefaultValue": {
                 "type": "any",
-                "attribute": "owner-default-value",
                 "mutable": false,
                 "complexType": {
                     "original": "any",
@@ -34,11 +44,11 @@ export class BusinessOwnerFormInputs {
                 },
                 "getter": false,
                 "setter": false,
-                "reflect": false
+                "reflect": false,
+                "attribute": "owner-default-value"
             },
             "errors": {
                 "type": "any",
-                "attribute": "errors",
                 "mutable": false,
                 "complexType": {
                     "original": "any",
@@ -53,11 +63,11 @@ export class BusinessOwnerFormInputs {
                 },
                 "getter": false,
                 "setter": false,
-                "reflect": false
+                "reflect": false,
+                "attribute": "errors"
             },
             "formController": {
                 "type": "any",
-                "attribute": "form-controller",
                 "mutable": false,
                 "complexType": {
                     "original": "FormController",
@@ -77,8 +87,39 @@ export class BusinessOwnerFormInputs {
                 },
                 "getter": false,
                 "setter": false,
-                "reflect": false
+                "reflect": false,
+                "attribute": "form-controller"
+            },
+            "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"
             }
         };
     }
+    static get states() {
+        return {
+            "isEditingIdentification": {}
+        };
+    }
 }

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

@@ -34,14 +34,13 @@ export class BusinessOwnerForm {
         });
     }
     render() {
-        return (h("owner-form-core", { key: 'a918d86ea220a66e69950919593791f3fec0f283', 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() {
         return {
             "authToken": {
                 "type": "string",
-                "attribute": "auth-token",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -56,11 +55,11 @@ export class BusinessOwnerForm {
                 },
                 "getter": false,
                 "setter": false,
-                "reflect": false
+                "reflect": false,
+                "attribute": "auth-token"
             },
             "ownerId": {
                 "type": "string",
-                "attribute": "owner-id",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -75,11 +74,11 @@ export class BusinessOwnerForm {
                 },
                 "getter": false,
                 "setter": false,
-                "reflect": false
+                "reflect": false,
+                "attribute": "owner-id"
             },
             "businessId": {
                 "type": "string",
-                "attribute": "business-id",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -94,11 +93,11 @@ export class BusinessOwnerForm {
                 },
                 "getter": false,
                 "setter": false,
-                "reflect": false
+                "reflect": false,
+                "attribute": "business-id"
             },
             "allowOptionalFields": {
                 "type": "boolean",
-                "attribute": "allow-optional-fields",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -113,11 +112,11 @@ export class BusinessOwnerForm {
                 },
                 "getter": false,
                 "setter": false,
-                "reflect": false
+                "reflect": false,
+                "attribute": "allow-optional-fields"
             },
             "removeOwner": {
                 "type": "unknown",
-                "attribute": "remove-owner",
                 "mutable": false,
                 "complexType": {
                     "original": "(id: string) => void",
@@ -135,7 +134,6 @@ export class BusinessOwnerForm {
             },
             "newFormOpen": {
                 "type": "boolean",
-                "attribute": "new-form-open",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -150,11 +148,11 @@ export class BusinessOwnerForm {
                 },
                 "getter": false,
                 "setter": false,
-                "reflect": false
+                "reflect": false,
+                "attribute": "new-form-open"
             },
             "ownersLength": {
                 "type": "number",
-                "attribute": "owners-length",
                 "mutable": false,
                 "complexType": {
                     "original": "number",
@@ -169,7 +167,33 @@ export class BusinessOwnerForm {
                 },
                 "getter": false,
                 "setter": false,
-                "reflect": 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-core.js

@@ -99,7 +99,6 @@ export class AdditionalQuestionsFormStepCore {
         return {
             "getBusiness": {
                 "type": "unknown",
-                "attribute": "get-business",
                 "mutable": false,
                 "complexType": {
                     "original": "Function",
@@ -122,7 +121,6 @@ export class AdditionalQuestionsFormStepCore {
             },
             "patchBusiness": {
                 "type": "unknown",
-                "attribute": "patch-business",
                 "mutable": false,
                 "complexType": {
                     "original": "Function",
@@ -145,7 +143,6 @@ export class AdditionalQuestionsFormStepCore {
             },
             "allowOptionalFields": {
                 "type": "boolean",
-                "attribute": "allow-optional-fields",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -160,7 +157,8 @@ export class AdditionalQuestionsFormStepCore {
                 },
                 "getter": false,
                 "setter": false,
-                "reflect": false
+                "reflect": false,
+                "attribute": "allow-optional-fields"
             }
         };
     }

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

@@ -34,14 +34,13 @@ export class AdditionalQuestionsFormStep {
         }
     }
     render() {
-        return (h("justifi-additional-questions-form-step-core", { key: '9692b11a4a655aade004e62c4b4c1fa61904ec11', 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() {
         return {
             "authToken": {
                 "type": "string",
-                "attribute": "auth-token",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -56,11 +55,11 @@ export class AdditionalQuestionsFormStep {
                 },
                 "getter": false,
                 "setter": false,
-                "reflect": false
+                "reflect": false,
+                "attribute": "auth-token"
             },
             "businessId": {
                 "type": "string",
-                "attribute": "business-id",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -75,11 +74,11 @@ export class AdditionalQuestionsFormStep {
                 },
                 "getter": false,
                 "setter": false,
-                "reflect": false
+                "reflect": false,
+                "attribute": "business-id"
             },
             "allowOptionalFields": {
                 "type": "boolean",
-                "attribute": "allow-optional-fields",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -94,7 +93,8 @@ export class AdditionalQuestionsFormStep {
                 },
                 "getter": false,
                 "setter": false,
-                "reflect": false
+                "reflect": false,
+                "attribute": "allow-optional-fields"
             }
         };
     }

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

@@ -2,14 +2,13 @@ import { h } from "@stencil/core";
 import { EntityDocumentType } from "../../../../api";
 export class BankAccountDocumentFormInputs {
     render() {
-        return (h("div", { key: 'c62d858a070a4611bead814bacd350e7faa4b400', class: "row gy-3" }, h("div", { key: '0044e508f449953f9da16907d1a141a0b4b42f1f', class: "col-12" }, h("form-control-file", { key: 'add74fc5424ffdb64dbae5b2e0dddde39544e5e3', 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: '0d69209999cb8ded788a12ac3bd46360a73b1443', class: "col-12" }, h("form-control-file", { key: '73cf74f2a2cd19db35ac9e5191cb59a99098806b', 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() {
         return {
             "inputHandler": {
                 "type": "unknown",
-                "attribute": "input-handler",
                 "mutable": false,
                 "complexType": {
                     "original": "(name: string, value: string) => void",
@@ -27,7 +26,6 @@ export class BankAccountDocumentFormInputs {
             },
             "errors": {
                 "type": "any",
-                "attribute": "errors",
                 "mutable": false,
                 "complexType": {
                     "original": "any",
@@ -42,11 +40,11 @@ export class BankAccountDocumentFormInputs {
                 },
                 "getter": false,
                 "setter": false,
-                "reflect": false
+                "reflect": false,
+                "attribute": "errors"
             },
             "storeFiles": {
                 "type": "unknown",
-                "attribute": "store-files",
                 "mutable": false,
                 "complexType": {
                     "original": "(e: CustomEvent<FileSelectEvent>) => void",

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"
+            }
+        };
+    }
+}