@justifi/webcomponents 4.23.1 → 5.0.0-rc-2

package/dist/collection/components/business-forms/payment-provisioning/business-representative/business-representative-form-step-core.js

@@ -1,8 +1,8 @@
 import { h } from "@stencil/core";
 import { Representative } from "../../../../api/Identity";
 import { FormController } from "../../../../ui-components/form/form";
-import { BusinessFormStepV2 } from "../../utils/business-form-types";
 import { identitySchema } from "../../schemas/business-identity-schema";
+import { BusinessFormStep } from "../../utils";
 export class BusinessRepresentativeFormStepCore {
     constructor() {
         this.getData = () => {
@@ -40,8 +40,7 @@ export class BusinessRepresentativeFormStepCore {
                     });
                 },
                 final: () => {
-                    this.submitted.emit({ data: { submittedData } });
-                    this.stepCompleted.emit({ data: submittedData, formStep: BusinessFormStepV2.representative });
+                    this.stepCompleteEvent.emit({ response: submittedData, formStep: BusinessFormStep.representative });
                     this.formLoading.emit(false);
                 }
             });
@@ -70,7 +69,7 @@ export class BusinessRepresentativeFormStepCore {
         });
     }
     render() {
-        return (h("justifi-business-representative-form-inputs", { key: 'b139e0b7a998011fd6b2a6d21b5a0b33369125fe', representativeDefaultValue: this.formController.getInitialValues(), errors: this.errors, formController: this.formController }));
+        return (h("justifi-business-representative-form-inputs", { key: 'bc90362d5ed774196cea5d259211d8099f918522', representativeDefaultValue: this.formController.getInitialValues(), errors: this.errors, formController: this.formController }));
     }
     static get is() { return "justifi-business-representative-form-step-core"; }
     static get properties() {
@@ -143,8 +142,8 @@ export class BusinessRepresentativeFormStepCore {
     }
     static get events() {
         return [{
-                "method": "submitted",
-                "name": "submitted",
+                "method": "stepCompleteEvent",
+                "name": "complete-form-step-event",
                 "bubbles": true,
                 "cancelable": true,
                 "composed": true,
@@ -153,19 +152,19 @@ export class BusinessRepresentativeFormStepCore {
                     "text": ""
                 },
                 "complexType": {
-                    "original": "BusinessFormSubmitEvent",
-                    "resolved": "BusinessFormSubmitEvent",
+                    "original": "ComponentFormStepCompleteEvent",
+                    "resolved": "ComponentFormStepCompleteEvent",
                     "references": {
-                        "BusinessFormSubmitEvent": {
+                        "ComponentFormStepCompleteEvent": {
                             "location": "import",
-                            "path": "../../utils/business-form-types",
-                            "id": "src/components/business-forms/utils/business-form-types.ts::BusinessFormSubmitEvent"
+                            "path": "../../../../api/ComponentEvents",
+                            "id": "src/api/ComponentEvents.ts::ComponentFormStepCompleteEvent"
                         }
                     }
                 }
             }, {
-                "method": "stepCompleted",
-                "name": "form-step-completed",
+                "method": "errorEvent",
+                "name": "error-event",
                 "bubbles": true,
                 "cancelable": true,
                 "composed": true,
@@ -174,13 +173,13 @@ export class BusinessRepresentativeFormStepCore {
                     "text": ""
                 },
                 "complexType": {
-                    "original": "BusinessFormStepCompletedEvent",
-                    "resolved": "BusinessFormStepCompletedEvent",
+                    "original": "ComponentErrorEvent",
+                    "resolved": "ComponentErrorEvent",
                     "references": {
-                        "BusinessFormStepCompletedEvent": {
+                        "ComponentErrorEvent": {
                             "location": "import",
-                            "path": "../../utils/business-form-types",
-                            "id": "src/components/business-forms/utils/business-form-types.ts::BusinessFormStepCompletedEvent"
+                            "path": "../../../../api/ComponentEvents",
+                            "id": "src/api/ComponentEvents.ts::ComponentErrorEvent"
                         }
                     }
                 }
@@ -199,27 +198,6 @@ export class BusinessRepresentativeFormStepCore {
                     "resolved": "boolean",
                     "references": {}
                 }
-            }, {
-                "method": "errorEvent",
-                "name": "error-event",
-                "bubbles": true,
-                "cancelable": true,
-                "composed": true,
-                "docs": {
-                    "tags": [],
-                    "text": ""
-                },
-                "complexType": {
-                    "original": "ComponentError",
-                    "resolved": "ComponentError",
-                    "references": {
-                        "ComponentError": {
-                            "location": "import",
-                            "path": "../../../../api/ComponentError",
-                            "id": "src/api/ComponentError.ts::ComponentError"
-                        }
-                    }
-                }
             }];
     }
     static get methods() {

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

@@ -41,7 +41,7 @@ export class BusinessRepresentativeFormStep {
         }
     }
     render() {
-        return (h("justifi-business-representative-form-step-core", { key: '934b6204cfe78ffe17b3f975de3eedb64398168d', getBusiness: this.getBusiness, patchBusiness: this.patchBusiness, allowOptionalFields: this.allowOptionalFields, ref: el => this.coreComponent = el }));
+        return (h("justifi-business-representative-form-step-core", { key: '24461e0acb80a0161fb796c3ee35f511601f707e', getBusiness: this.getBusiness, patchBusiness: this.patchBusiness, allowOptionalFields: this.allowOptionalFields, ref: el => this.coreComponent = el }));
     }
     static get is() { return "justifi-business-representative-form-step"; }
     static get properties() {
@@ -117,13 +117,13 @@ export class BusinessRepresentativeFormStep {
                     "text": ""
                 },
                 "complexType": {
-                    "original": "ComponentError",
-                    "resolved": "ComponentError",
+                    "original": "ComponentErrorEvent",
+                    "resolved": "ComponentErrorEvent",
                     "references": {
-                        "ComponentError": {
+                        "ComponentErrorEvent": {
                             "location": "import",
-                            "path": "../../../../api/ComponentError",
-                            "id": "src/api/ComponentError.ts::ComponentError"
+                            "path": "../../../../api/ComponentEvents",
+                            "id": "src/api/ComponentEvents.ts::ComponentErrorEvent"
                         }
                     }
                 }

package/dist/collection/components/business-forms/payment-provisioning/document-uploads/business-document-upload-form-step.js

@@ -1,6 +1,5 @@
 import { h } from "@stencil/core";
 import { FormController } from "../../../../ui-components/form/form";
-import { BusinessFormStep, BusinessFormStepV2 } from "../../utils/business-form-types";
 import { Business } from "../../../../api/Business";
 import Api from "../../../../api/Api";
 import { config } from "../../../../../config";
@@ -8,6 +7,8 @@ import { businessDocumentSchema } from "../../schemas/business-document-upload-s
 import { EntityDocument, EntityDocumentStorage } from "../../../../api/Document";
 import { ComponentErrorCodes, ComponentErrorSeverity } from "../../../../api/ComponentError";
 import { Skeleton } from "../../../../ui-components";
+import { heading2 } from "../../../../styles/parts";
+import { BusinessFormStep } from "../../utils";
 export class BusinessDocumentFormStep {
     constructor() {
         this.inputHandler = (name, value) => {
@@ -96,8 +97,7 @@ export class BusinessDocumentFormStep {
                 return false;
             }
             else {
-                this.submitted.emit({ data: response, metadata: { completedStep: BusinessFormStep.documentUpload } });
-                this.stepCompleted.emit({ data: response, formStep: BusinessFormStepV2.documentUpload });
+                this.stepCompleteEvent.emit({ response: response, formStep: BusinessFormStep.documentUpload });
                 return true;
             }
         };
@@ -111,7 +111,7 @@ export class BusinessDocumentFormStep {
             try {
                 const docArray = Object.values(this.documentData).flat();
                 if (!docArray.length) {
-                    this.stepCompleted.emit({ data: null, formStep: BusinessFormStepV2.documentUpload, metadata: 'no data submitted' });
+                    this.stepCompleteEvent.emit({ response: null, formStep: BusinessFormStep.documentUpload, metadata: 'no data submitted' });
                     return onSuccess();
                 }
                 const documentRecords = docArray.map(docData => this.createDocumentRecord(docData));
@@ -167,7 +167,7 @@ export class BusinessDocumentFormStep {
             return null;
         }
         if (this.isLoading) {
-            return h(Skeleton, { variant: 'rounded', height: '50px' });
+            return h(Skeleton, { height: '50px' });
         }
         return h("justifi-business-documents-on-file", { documents: this.existingDocuments });
     }
@@ -176,12 +176,12 @@ export class BusinessDocumentFormStep {
             return null;
         }
         if (this.isLoading) {
-            return h(Skeleton, { variant: 'rounded', height: '350px' });
+            return h(Skeleton, { height: '350px' });
         }
         return (h("justifi-business-document-upload-input-group", { paymentVolume: this.paymentVolume, inputHandler: this.inputHandler, storeFiles: this.storeFiles, errors: this.errors }));
     }
     render() {
-        return (h("form", { key: '5e0722b4d5ea462cf5ba6ed2de9d3a73b8bf910a' }, h("fieldset", { key: '09f3589465a6ad53080743018a57b959bef68309' }, h("div", { key: 'b6c1aa4cf4754126b11902a8b35c19e3044ba4ed', class: "d-flex align-items-center gap-2" }, h("legend", { key: '77b5d6847054afbfe6cc7e9e00762c226a582447', class: "mb-0" }, "Document Uploads"), h("form-control-tooltip", { key: '9fb518fbad5039c77436377e26e420dc01a84ca2', helpText: "Various file formats such as PDF, DOC, DOCX, JPEG, and others are accepted. Multiple files can be uploaded for each document category." })), h("hr", { key: 'e95938b42ad6d52d612bb654e39af7ee3442b454', class: "mt-2" }), this.documentsOnFile, h("div", { key: '8ee1cda96d28486faa2371bb1b82c57a57220071', class: "d-flex flex-column" }, this.formInputs))));
+        return (h("form", { key: '0d59a81a25ce1b983e1cc1e076072fc60f277829' }, h("fieldset", { key: '806183bf7a2b7bd49f11be8f8e66685360b392d8' }, h("div", { key: '22e1914c580e90acbf0cc295ed878c2f4d3cb12f', class: "d-flex align-items-center gap-2" }, h("legend", { key: '88369a06ab43a76c477a6af93672364fd101a7d2', class: "mb-0", part: heading2 }, "Document Uploads"), h("form-control-tooltip", { key: 'ccbff3cea2f17156a358a82de3e5e8afa87e2ab5', helpText: "Various file formats such as PDF, DOC, DOCX, JPEG, and others are accepted. Multiple files can be uploaded for each document category." })), h("hr", { key: 'e99c7eba9c7605244bee06ae4c0fa4954cafb99a', class: "mt-2" }), this.documentsOnFile, h("div", { key: 'ddbeda2a9740d2a20becde70f5f8113e4a327dc7', class: "d-flex flex-column" }, this.formInputs))));
     }
     static get is() { return "justifi-business-document-upload-form-step"; }
     static get properties() {
@@ -252,8 +252,8 @@ export class BusinessDocumentFormStep {
     }
     static get events() {
         return [{
-                "method": "submitted",
-                "name": "submitted",
+                "method": "stepCompleteEvent",
+                "name": "complete-form-step-event",
                 "bubbles": true,
                 "cancelable": true,
                 "composed": true,
@@ -262,19 +262,19 @@ export class BusinessDocumentFormStep {
                     "text": ""
                 },
                 "complexType": {
-                    "original": "BusinessFormSubmitEvent",
-                    "resolved": "BusinessFormSubmitEvent",
+                    "original": "ComponentFormStepCompleteEvent",
+                    "resolved": "ComponentFormStepCompleteEvent",
                     "references": {
-                        "BusinessFormSubmitEvent": {
+                        "ComponentFormStepCompleteEvent": {
                             "location": "import",
-                            "path": "../../utils/business-form-types",
-                            "id": "src/components/business-forms/utils/business-form-types.ts::BusinessFormSubmitEvent"
+                            "path": "../../../../api/ComponentEvents",
+                            "id": "src/api/ComponentEvents.ts::ComponentFormStepCompleteEvent"
                         }
                     }
                 }
             }, {
-                "method": "stepCompleted",
-                "name": "form-step-completed",
+                "method": "errorEvent",
+                "name": "error-event",
                 "bubbles": true,
                 "cancelable": true,
                 "composed": true,
@@ -283,13 +283,13 @@ export class BusinessDocumentFormStep {
                     "text": ""
                 },
                 "complexType": {
-                    "original": "BusinessFormStepCompletedEvent",
-                    "resolved": "BusinessFormStepCompletedEvent",
+                    "original": "ComponentErrorEvent",
+                    "resolved": "ComponentErrorEvent",
                     "references": {
-                        "BusinessFormStepCompletedEvent": {
+                        "ComponentErrorEvent": {
                             "location": "import",
-                            "path": "../../utils/business-form-types",
-                            "id": "src/components/business-forms/utils/business-form-types.ts::BusinessFormStepCompletedEvent"
+                            "path": "../../../../api/ComponentEvents",
+                            "id": "src/api/ComponentEvents.ts::ComponentErrorEvent"
                         }
                     }
                 }
@@ -308,27 +308,6 @@ export class BusinessDocumentFormStep {
                     "resolved": "boolean",
                     "references": {}
                 }
-            }, {
-                "method": "errorEvent",
-                "name": "error-event",
-                "bubbles": true,
-                "cancelable": true,
-                "composed": true,
-                "docs": {
-                    "tags": [],
-                    "text": ""
-                },
-                "complexType": {
-                    "original": "ComponentError",
-                    "resolved": "ComponentError",
-                    "references": {
-                        "ComponentError": {
-                            "location": "import",
-                            "path": "../../../../api/ComponentError",
-                            "id": "src/api/ComponentError.ts::ComponentError"
-                        }
-                    }
-                }
             }];
     }
     static get methods() {

package/dist/collection/components/business-forms/payment-provisioning/document-uploads/business-document-upload-input-group.js

@@ -29,7 +29,7 @@ export class BusinessDocumentUploadInputGroup {
     }
     render() {
         const inputsConfig = this.inputConfigs;
-        return (h("div", { key: 'e43e94c773b524f5725c75af53db4ceadc0ba172', class: "row gy-3" }, inputsConfig.map(config => (h("div", { class: "col-12 col-md-6" }, h("form-control-file", { name: config.name, label: config.label, helpText: config.helpText, documentType: config.documentType, inputHandler: this.inputHandler, onFileSelected: this.storeFiles, errorText: this.errors[config.name], multiple: true }))))));
+        return (h("div", { key: '875e19e33818ff3582a274b75c78301fa799a81b', class: "row gy-3" }, inputsConfig.map(config => (h("div", { class: "col-12 col-md-6" }, h("form-control-file", { name: config.name, label: config.label, helpText: config.helpText, documentType: config.documentType, inputHandler: this.inputHandler, onFileSelected: this.storeFiles, errorText: this.errors[config.name], multiple: true }))))));
     }
     static get is() { return "justifi-business-document-upload-input-group"; }
     static get properties() {

package/dist/collection/components/business-forms/payment-provisioning/document-uploads/business-documents-on-file.js

@@ -1,5 +1,6 @@
-import { h } from "@stencil/core";
+import { h, Host } from "@stencil/core";
 import { formatDate, formatTimeSeconds, snakeCaseToHumanReadable } from "../../../../utils/utils";
+import { card, heading2, table, tableCell, tableHeadCell } from "../../../../styles/parts";
 export class BusinessDocumentsOnFile {
     constructor() {
         this.documents = [];
@@ -8,9 +9,9 @@ export class BusinessDocumentsOnFile {
         if (!this.documents.length) {
             return null;
         }
-        return (h("div", null, h("div", { class: 'card' }, h("div", { class: 'card-body' }, h("h5", { class: 'card-title' }, "Documents Already on File"), h("div", { class: 'table-responsive' }, h("table", { class: 'table table-sm table-borderless' }, h("thead", { part: "table-head" }, h("tr", { part: 'table-head-row' }, h("th", { style: { width: '25%' }, part: "table-head-cell", scope: 'col' }, "File Name"), h("th", { style: { width: '25%' }, part: "table-head-cell", scope: 'col' }, "File Type"), h("th", { style: { width: '25%' }, part: "table-head-cell", scope: 'col' }, "Document Type"), h("th", { style: { width: '25%' }, part: "table-head-cell", scope: 'col' }, "Date Uploaded"))), h("tbody", { part: 'table-body' }, this.documents.sort((a, b) => a.document_type.localeCompare(b.document_type))
+        return (h(Host, null, h("div", { class: 'card', part: card }, h("div", { class: 'card-body' }, h("h5", { class: 'card-title', part: heading2 }, "Documents Already on File"), h("div", { class: 'table-responsive' }, h("table", { class: 'table table-sm table-borderless', part: table }, h("thead", null, h("tr", null, h("th", { style: { width: '25%' }, part: tableHeadCell, scope: 'col' }, "File Name"), h("th", { style: { width: '25%' }, part: tableHeadCell, scope: 'col' }, "File Type"), h("th", { style: { width: '25%' }, part: tableHeadCell, scope: 'col' }, "Document Type"), h("th", { style: { width: '25%' }, part: tableHeadCell, scope: 'col' }, "Date Uploaded"))), h("tbody", null, this.documents.sort((a, b) => a.document_type.localeCompare(b.document_type))
             .map((document, index) => {
-            return (h("tr", { class: index === 0 ? 'border-bottom border-top' : 'border-bottom' }, h("td", { part: "table-cell" }, document.file_name), h("td", { part: "table-cell" }, document.file_type), h("td", { part: "table-cell" }, snakeCaseToHumanReadable(document.document_type)), h("td", { part: "table-cell" }, `${formatDate(document.created_at)} - ${formatTimeSeconds(document.created_at)}`)));
+            return (h("tr", { class: index === 0 ? 'border-bottom border-top' : 'border-bottom' }, h("td", { part: tableCell }, document.file_name), h("td", { part: tableCell }, document.file_type), h("td", { part: tableCell }, snakeCaseToHumanReadable(document.document_type)), h("td", { part: tableCell }, `${formatDate(document.created_at)} - ${formatTimeSeconds(document.created_at)}`)));
         })))))), h("hr", null)));
     }
     static get is() { return "justifi-business-documents-on-file"; }

package/dist/collection/components/business-forms/payment-provisioning/legal-address-form/legal-address-form-step-core.js

@@ -2,9 +2,10 @@ import { h } from "@stencil/core";
 import { addressSchema } from "../../schemas/business-address-schema";
 import { FormController } from "../../../../ui-components/form/form";
 import { Address } from "../../../../api/Business";
-import { BusinessFormStepV2 } from "../../utils/business-form-types";
 import StateOptions from "../../../../utils/state-options";
 import { numberOnlyHandler } from "../../../../ui-components/form/utils";
+import { heading2 } from "../../../../styles/parts";
+import { BusinessFormStep } from "../../utils";
 export class LegalAddressFormStepCore {
     constructor() {
         this.getData = () => {
@@ -42,8 +43,7 @@ export class LegalAddressFormStepCore {
                     });
                 },
                 final: () => {
-                    this.submitted.emit({ data: { submittedData } });
-                    this.stepCompleted.emit({ data: submittedData, formStep: BusinessFormStepV2.legalAddress });
+                    this.stepCompleteEvent.emit({ response: submittedData, formStep: BusinessFormStep.legalAddress });
                     this.formLoading.emit(false);
                 }
             });
@@ -78,7 +78,7 @@ export class LegalAddressFormStepCore {
     render() {
         var _a, _b, _c, _d, _e, _f;
         const legalAddressDefaultValue = this.formController.getInitialValues();
-        return (h("form", { key: 'cc749f565087adf5a0806a179ebc4682783763bd' }, h("fieldset", { key: '98fecaf00779da20c4f023dd4081be6f616e59ae' }, h("div", { key: '854d921b4b140738cb2cf2f48b51a207eb58c329', class: "d-flex align-items-center gap-2" }, h("legend", { key: 'ae741c143648c14145eac2066fa40799726682e5', class: "mb-0" }, "Legal Address of your Business"), h("form-control-tooltip", { key: 'd30c4a70183f7afc9a809d399b775c5610ef952c', helpText: "No PO Boxes." })), h("hr", { key: '78f7c51df66d265ff1a9f62b38aedfba014ed7cb', class: "mt-2" }), h("div", { key: 'b32031b925e908dc4a9459f0e082312f72fc64f9', class: "row gy-3" }, h("div", { key: '1564426893f46dc7ace7192ce264a10d879bc5c2', class: "col-12" }, h("form-control-text", { key: '9c70add04a610ce6280f7047ad56d260bb0adcf1', name: "line1", label: "Legal Address", inputHandler: this.inputHandler, defaultValue: legalAddressDefaultValue === null || legalAddressDefaultValue === void 0 ? void 0 : legalAddressDefaultValue.line1, errorText: (_a = this.errors) === null || _a === void 0 ? void 0 : _a.line1 })), h("div", { key: 'bba886684830ab3dd7f3470e13bcf8ce970f357f', class: "col-12" }, h("form-control-text", { key: '43c507918eb72b586c43b4839c40499196c41625', name: "line2", label: "Address Line 2 (optional)", inputHandler: this.inputHandler, defaultValue: legalAddressDefaultValue === null || legalAddressDefaultValue === void 0 ? void 0 : legalAddressDefaultValue.line2, errorText: (_b = this.errors) === null || _b === void 0 ? void 0 : _b.line2 })), h("div", { key: 'e9ff6df356c8c4f1ddef5318936d39c4b92a58e9', class: "col-12" }, h("form-control-text", { key: 'ff17e63977ba52fea319f1dfb2936b0836fa1f5f', name: "city", label: "City", inputHandler: this.inputHandler, defaultValue: legalAddressDefaultValue === null || legalAddressDefaultValue === void 0 ? void 0 : legalAddressDefaultValue.city, errorText: (_c = this.errors) === null || _c === void 0 ? void 0 : _c.city })), h("div", { key: 'd0da7fbd59236105cb1f7725eb4fddc0fe0e028b', class: "col-12" }, h("form-control-select", { key: '666abe057f3a06705b42e8bfb3aae4e15b50f8dc', name: "state", label: "State", options: StateOptions, inputHandler: this.inputHandler, defaultValue: legalAddressDefaultValue === null || legalAddressDefaultValue === void 0 ? void 0 : legalAddressDefaultValue.state, errorText: (_d = this.errors) === null || _d === void 0 ? void 0 : _d.state })), h("div", { key: 'c9c2ea66adc0e15f07a9070ca46f685042b41042', class: "col-12" }, h("form-control-text", { key: '614c03164e755b945610b91f8ec7757980956261', name: "postal_code", label: "Postal Code", inputHandler: this.inputHandler, defaultValue: legalAddressDefaultValue === null || legalAddressDefaultValue === void 0 ? void 0 : legalAddressDefaultValue.postal_code, errorText: (_e = this.errors) === null || _e === void 0 ? void 0 : _e.postal_code, maxLength: 5, keyDownHandler: numberOnlyHandler })), h("div", { key: 'cfab73c10bf56bf001a246f0ad8c56fd8c36fbeb', class: "col-12" }, h("form-control-select", { key: 'd42b86c2d2de13504f2934fa63a3e83f998134ac', name: "country", label: "Country", options: [{ label: "United States", value: "USA" }], inputHandler: this.inputHandler, defaultValue: legalAddressDefaultValue === null || legalAddressDefaultValue === void 0 ? void 0 : legalAddressDefaultValue.country, errorText: (_f = this.errors) === null || _f === void 0 ? void 0 : _f.country,
+        return (h("form", { key: '1e6065ae448a770d278a526cb76756f7f0bd7567' }, h("fieldset", { key: '2af32416088e57165f79690869085156f8d9c7b0' }, h("div", { key: '3c76e75ffb68a3a3df3dfeaa6d99f116308e0030', class: "d-flex align-items-center gap-2" }, h("legend", { key: '6c6ef9016703a2e2e331f8aced8af8ed0888862b', class: "mb-0", part: heading2 }, "Legal Address of your Business"), h("form-control-tooltip", { key: '474cac4455beeaf1ad6d5c1b74e5bb7bb7e35e0b', helpText: "No PO Boxes." })), h("hr", { key: 'aff498cf796610a39c4c1767117b4602f06e2e85', class: "mt-2" }), h("div", { key: 'af60b65ff725643c758db069a56b50f642f216d7', class: "row gy-3" }, h("div", { key: '870fe8afade8361858130788744d3334a22fd5c5', class: "col-12" }, h("form-control-text", { key: '85ad65ac883ed7fc46e8bb85fae296148d7ea4b6', name: "line1", label: "Legal Address", inputHandler: this.inputHandler, defaultValue: legalAddressDefaultValue === null || legalAddressDefaultValue === void 0 ? void 0 : legalAddressDefaultValue.line1, errorText: (_a = this.errors) === null || _a === void 0 ? void 0 : _a.line1 })), h("div", { key: '12d661b8f7a2664616a606f2d0f4ef00e26be8cc', class: "col-12" }, h("form-control-text", { key: '3f09668d35495618b8e52fe624ab711c9710ebb9', name: "line2", label: "Address Line 2 (optional)", inputHandler: this.inputHandler, defaultValue: legalAddressDefaultValue === null || legalAddressDefaultValue === void 0 ? void 0 : legalAddressDefaultValue.line2, errorText: (_b = this.errors) === null || _b === void 0 ? void 0 : _b.line2 })), h("div", { key: '380c8ab7fc2ac404a6a78b5055a984fc44009d4d', class: "col-12" }, h("form-control-text", { key: '0a9341c12c4b6f0a6950a64453918643338bfbe2', name: "city", label: "City", inputHandler: this.inputHandler, defaultValue: legalAddressDefaultValue === null || legalAddressDefaultValue === void 0 ? void 0 : legalAddressDefaultValue.city, errorText: (_c = this.errors) === null || _c === void 0 ? void 0 : _c.city })), h("div", { key: '03c7206900569a51b5abc6d4358e8fe25131aab4', class: "col-12" }, h("form-control-select", { key: 'f32410394f052a7392e250e26abf26b6ed653980', name: "state", label: "State", options: StateOptions, inputHandler: this.inputHandler, defaultValue: legalAddressDefaultValue === null || legalAddressDefaultValue === void 0 ? void 0 : legalAddressDefaultValue.state, errorText: (_d = this.errors) === null || _d === void 0 ? void 0 : _d.state })), h("div", { key: '0c5833503a32b99fa460ecd4987ecfcbd7927405', class: "col-12" }, h("form-control-text", { key: 'fbbf5fb1b5bed5102e3730e8061c0d84474c44cc', name: "postal_code", label: "Postal Code", inputHandler: this.inputHandler, defaultValue: legalAddressDefaultValue === null || legalAddressDefaultValue === void 0 ? void 0 : legalAddressDefaultValue.postal_code, errorText: (_e = this.errors) === null || _e === void 0 ? void 0 : _e.postal_code, maxLength: 5, keyDownHandler: numberOnlyHandler })), h("div", { key: '64251fecb733ded3ae50c5e83ce384b027488654', class: "col-12" }, h("form-control-select", { key: 'a2dc29311bd2d7bc7dcb546f8b4f386ded5e8c14', name: "country", label: "Country", options: [{ label: "United States", value: "USA" }], inputHandler: this.inputHandler, defaultValue: legalAddressDefaultValue === null || legalAddressDefaultValue === void 0 ? void 0 : legalAddressDefaultValue.country, errorText: (_f = this.errors) === null || _f === void 0 ? void 0 : _f.country,
             // just for now so we skip handling country specificities
             disabled: true }))))));
     }
@@ -153,8 +153,8 @@ export class LegalAddressFormStepCore {
     }
     static get events() {
         return [{
-                "method": "submitted",
-                "name": "submitted",
+                "method": "stepCompleteEvent",
+                "name": "complete-form-step-event",
                 "bubbles": true,
                 "cancelable": true,
                 "composed": true,
@@ -163,19 +163,19 @@ export class LegalAddressFormStepCore {
                     "text": ""
                 },
                 "complexType": {
-                    "original": "BusinessFormSubmitEvent",
-                    "resolved": "BusinessFormSubmitEvent",
+                    "original": "ComponentFormStepCompleteEvent",
+                    "resolved": "ComponentFormStepCompleteEvent",
                     "references": {
-                        "BusinessFormSubmitEvent": {
+                        "ComponentFormStepCompleteEvent": {
                             "location": "import",
-                            "path": "../../utils/business-form-types",
-                            "id": "src/components/business-forms/utils/business-form-types.ts::BusinessFormSubmitEvent"
+                            "path": "../../../../api/ComponentEvents",
+                            "id": "src/api/ComponentEvents.ts::ComponentFormStepCompleteEvent"
                         }
                     }
                 }
             }, {
-                "method": "stepCompleted",
-                "name": "form-step-completed",
+                "method": "errorEvent",
+                "name": "error-event",
                 "bubbles": true,
                 "cancelable": true,
                 "composed": true,
@@ -184,13 +184,13 @@ export class LegalAddressFormStepCore {
                     "text": ""
                 },
                 "complexType": {
-                    "original": "BusinessFormStepCompletedEvent",
-                    "resolved": "BusinessFormStepCompletedEvent",
+                    "original": "ComponentErrorEvent",
+                    "resolved": "ComponentErrorEvent",
                     "references": {
-                        "BusinessFormStepCompletedEvent": {
+                        "ComponentErrorEvent": {
                             "location": "import",
-                            "path": "../../utils/business-form-types",
-                            "id": "src/components/business-forms/utils/business-form-types.ts::BusinessFormStepCompletedEvent"
+                            "path": "../../../../api/ComponentEvents",
+                            "id": "src/api/ComponentEvents.ts::ComponentErrorEvent"
                         }
                     }
                 }
@@ -209,27 +209,6 @@ export class LegalAddressFormStepCore {
                     "resolved": "boolean",
                     "references": {}
                 }
-            }, {
-                "method": "errorEvent",
-                "name": "error-event",
-                "bubbles": true,
-                "cancelable": true,
-                "composed": true,
-                "docs": {
-                    "tags": [],
-                    "text": ""
-                },
-                "complexType": {
-                    "original": "ComponentError",
-                    "resolved": "ComponentError",
-                    "references": {
-                        "ComponentError": {
-                            "location": "import",
-                            "path": "../../../../api/ComponentError",
-                            "id": "src/api/ComponentError.ts::ComponentError"
-                        }
-                    }
-                }
             }];
     }
     static get methods() {

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

@@ -2,11 +2,6 @@ import { h } from "@stencil/core";
 import { ComponentErrorCodes, ComponentErrorSeverity } from "../../../../api/ComponentError";
 import { makeGetBusiness, makePatchBusiness } from "../payment-provisioning-actions";
 import { BusinessService } from "../../../../api/services/business.service";
-/**
- * @exportedPart label: Label for inputs
- * @exportedPart input: The input fields
- * @exportedPart input-invalid: Invalid state for inputfs
- */
 export class LegalAddressFormStep {
     constructor() {
         this.getBusiness = undefined;
@@ -46,7 +41,7 @@ export class LegalAddressFormStep {
         }
     }
     render() {
-        return (h("justifi-legal-address-form-step-core", { key: '06ac5acac2cc9c167a86448b0e12d885d21361fb', getBusiness: this.getBusiness, patchBusiness: this.patchBusiness, allowOptionalFields: this.allowOptionalFields, ref: el => this.coreComponent = el }));
+        return (h("justifi-legal-address-form-step-core", { key: '66973db19fe252e82b8e44f875aef6e6de4f519d', getBusiness: this.getBusiness, patchBusiness: this.patchBusiness, allowOptionalFields: this.allowOptionalFields, ref: el => this.coreComponent = el }));
     }
     static get is() { return "justifi-legal-address-form-step"; }
     static get properties() {
@@ -122,13 +117,13 @@ export class LegalAddressFormStep {
                     "text": ""
                 },
                 "complexType": {
-                    "original": "ComponentError",
-                    "resolved": "ComponentError",
+                    "original": "ComponentErrorEvent",
+                    "resolved": "ComponentErrorEvent",
                     "references": {
-                        "ComponentError": {
+                        "ComponentErrorEvent": {
                             "location": "import",
-                            "path": "../../../../api/ComponentError",
-                            "id": "src/api/ComponentError.ts::ComponentError"
+                            "path": "../../../../api/ComponentEvents",
+                            "id": "src/api/ComponentEvents.ts::ComponentErrorEvent"
                         }
                     }
                 }

package/dist/collection/components/business-forms/payment-provisioning/payment-provisioning-core.js

@@ -1,8 +1,9 @@
 import { h } from "@stencil/core";
-import { BusinessFormClickActions } from "../utils/business-form-types";
 import { ComponentErrorCodes, ComponentErrorSeverity } from "../../../api/ComponentError";
 import { checkProvisioningStatus } from "../utils/helpers";
-import { StyledHost } from "../../../ui-components";
+import { Header1, StyledHost } from "../../../ui-components";
+import { text } from "../../../styles/parts";
+import { BusinessFormClickActions } from "../utils/event-types";
 export class PaymentProvisioningCore {
     constructor() {
         this.setBusinessProvisioned = () => {
@@ -29,10 +30,10 @@ export class PaymentProvisioningCore {
         this.postProvisioningData = () => {
             this.postProvisioning({
                 onSuccess: (response) => {
-                    this.submitted.emit({ data: { response } });
+                    this.submitEvent.emit({ response: response });
                 },
                 onError: ({ error, code, severity }) => {
-                    this.submitted.emit({ data: { error } });
+                    this.submitEvent.emit({ response: { error } });
                     this.errorEvent.emit({
                         message: error,
                         errorCode: code,
@@ -69,6 +70,9 @@ export class PaymentProvisioningCore {
         this.getBusiness = undefined;
         this.postProvisioning = undefined;
     }
+    handleFormCompleted() {
+        this.postProvisioningData();
+    }
     componentWillLoad() {
         this.getBusiness && this.setBusinessProvisioned();
         this.refs = [this.coreInfoRef, this.legalAddressRef, this.additionalQuestionsRef, this.representativeRef, this.ownersRef, this.bankAccountRef, this.documentUploadRef, this.termsRef];
@@ -89,10 +93,9 @@ export class PaymentProvisioningCore {
         this.loading = event.detail;
     }
     render() {
-        return (h(StyledHost, { key: '80f2730a6a4e273391888b086c3633a3dec012b8', exportparts: 'label,input,input-invalid' }, h("div", { key: 'b4e7be2fed14b404ee7bcbe42c3c1c54bb78fdb6', class: 'row gap-3' }, h("h1", { key: 'f477beb7934a94a74dfc6b8a9c18cc54a720f70e' }, this.formTitle), h("justifi-payment-provisioning-form-steps", { key: 'e74aa3a01cfe7550f4917d28ccda1aca211d9394', businessId: this.businessId, authToken: this.authToken, refs: this.refs, currentStep: this.currentStep, allowOptionalFields: this.allowOptionalFields, handleFormLoading: this.handleFormLoading, onFormCompleted: () => this.postProvisioningData() }), h("div", { key: '26a585ec4b6b677cb01ac17696269168887f4c76', class: 'd-flex justify-content-between align-items-center' }, h("div", { key: 'ca5ddc176f8c2eb3315620076b401e47f45039bd', class: 'd-flex align-items-center' }, this.stepCounter), h("justifi-payment-provisioning-form-buttons", { key: '8299387bf859b33c829d29d66947c3c053ffa53c', currentStep: this.currentStep, totalSteps: this.totalSteps, formLoading: this.loading, formDisabled: this.formDisabled, previousStepButtonOnClick: this.previousStepButtonOnClick, nextStepButtonOnClick: this.nextStepButtonOnClick })))));
+        return (h(StyledHost, { key: 'df7f6b5366335e0bd1082bb865c8a460a0b62704' }, h("div", { key: '694f4b13ef333959c6efa573d78f415379fbe4fd', class: 'row gap-3' }, h(Header1, { key: 'd69dafa307c75ed3583551d86f87b3ec29404218', text: this.formTitle }), h("justifi-payment-provisioning-form-steps", { key: 'd33e37ce3f2fdce1eb462d096be9baede1ccee9b', businessId: this.businessId, authToken: this.authToken, refs: this.refs, currentStep: this.currentStep, allowOptionalFields: this.allowOptionalFields, handleFormLoading: this.handleFormLoading }), h("div", { key: '8541f7a1c6a69820b73c976894109b5962f26067', class: 'd-flex justify-content-between align-items-center' }, h("div", { key: '1a8a0e9af596aa1d7eced5309e1fa2e399f33705', class: 'd-flex align-items-center', part: text }, this.stepCounter), h("justifi-payment-provisioning-form-buttons", { key: 'dd29d8b8d4da81f79c2375a5db99dfe796183d09', currentStep: this.currentStep, totalSteps: this.totalSteps, formLoading: this.loading, formDisabled: this.formDisabled, previousStepButtonOnClick: this.previousStepButtonOnClick, nextStepButtonOnClick: this.nextStepButtonOnClick })))));
     }
     static get is() { return "justifi-payment-provisioning-core"; }
-    static get encapsulation() { return "shadow"; }
     static get properties() {
         return {
             "businessId": {
@@ -226,13 +229,13 @@ export class PaymentProvisioningCore {
                     "text": ""
                 },
                 "complexType": {
-                    "original": "BusinessFormClickEvent",
-                    "resolved": "BusinessFormClickEvent",
+                    "original": "ComponentClickEvent",
+                    "resolved": "ComponentClickEvent",
                     "references": {
-                        "BusinessFormClickEvent": {
+                        "ComponentClickEvent": {
                             "location": "import",
-                            "path": "../utils/business-form-types",
-                            "id": "src/components/business-forms/utils/business-form-types.ts::BusinessFormClickEvent"
+                            "path": "../../../api/ComponentEvents",
+                            "id": "src/api/ComponentEvents.ts::ComponentClickEvent"
                         }
                     }
                 }
@@ -247,19 +250,19 @@ export class PaymentProvisioningCore {
                     "text": ""
                 },
                 "complexType": {
-                    "original": "ComponentError",
-                    "resolved": "ComponentError",
+                    "original": "ComponentErrorEvent",
+                    "resolved": "ComponentErrorEvent",
                     "references": {
-                        "ComponentError": {
+                        "ComponentErrorEvent": {
                             "location": "import",
-                            "path": "../../../api/ComponentError",
-                            "id": "src/api/ComponentError.ts::ComponentError"
+                            "path": "../../../api/ComponentEvents",
+                            "id": "src/api/ComponentEvents.ts::ComponentErrorEvent"
                         }
                     }
                 }
             }, {
-                "method": "submitted",
-                "name": "submitted",
+                "method": "submitEvent",
+                "name": "submit-event",
                 "bubbles": true,
                 "cancelable": true,
                 "composed": true,
@@ -268,13 +271,13 @@ export class PaymentProvisioningCore {
                     "text": ""
                 },
                 "complexType": {
-                    "original": "BusinessFormSubmitEvent",
-                    "resolved": "BusinessFormSubmitEvent",
+                    "original": "ComponentSubmitEvent",
+                    "resolved": "ComponentSubmitEvent",
                     "references": {
-                        "BusinessFormSubmitEvent": {
+                        "ComponentSubmitEvent": {
                             "location": "import",
-                            "path": "../utils/business-form-types",
-                            "id": "src/components/business-forms/utils/business-form-types.ts::BusinessFormSubmitEvent"
+                            "path": "../../../api/ComponentEvents",
+                            "id": "src/api/ComponentEvents.ts::ComponentSubmitEvent"
                         }
                     }
                 }
@@ -282,6 +285,12 @@ export class PaymentProvisioningCore {
     }
     static get listeners() {
         return [{
+                "name": "formCompleted",
+                "method": "handleFormCompleted",
+                "target": undefined,
+                "capture": false,
+                "passive": false
+            }, {
                 "name": "formLoading",
                 "method": "handleFormLoading",
                 "target": undefined,