@justifi/webcomponents 6.7.2 → 6.7.3

package/dist/cjs/{input-handlers-D6QMwPTB.js → input-handlers-DaRKFvGI.js}

@@ -1,6 +1,6 @@
 'use strict';
 
-var Business = require('./Business-DWHy_-z9.js');
+var Business = require('./Business-uoeKyW_a.js');
 
 const updateFormValues = (formController, newValues) => {
     formController.setValues(Object.assign(Object.assign({}, formController.values.getValue()), newValues));

package/dist/cjs/{insurance-state-DsGnIHMM.js → insurance-state-CiVJ5e26.js}

@@ -1,8 +1,8 @@
 'use strict';
 
-var index = require('./index-BhI7cJcE.js');
-var parts = require('./parts-BVbaniVM.js');
-var index$1 = require('./index-mmd0OhmD.js');
+var index = require('./index-p7cvUYAE.js');
+var parts = require('./parts-BsBVknuf.js');
+var index$1 = require('./index-W-zoNiyM.js');
 
 const Header2 = (props) => {
     return index.h("h2", { class: `header-2 ${props === null || props === void 0 ? void 0 : props.class}`, part: parts.heading2 }, props.text);

package/dist/cjs/internal-tokenize-payment-method_7.cjs.entry.js

@@ -1,29 +1,29 @@
 'use strict';
 
-var index = require('./index-BhI7cJcE.js');
-var styledHost = require('./styled-host-D5g7INLE.js');
+var index = require('./index-p7cvUYAE.js');
+var styledHost = require('./styled-host-DAi5SuFa.js');
 require('./event-types-YOY5TKUN.js');
-var checkPkgVersion = require('./check-pkg-version-BG-Rfkh5.js');
-var configState = require('./config-state-CYoBVAca.js');
+var checkPkgVersion = require('./check-pkg-version-Bs_9oZb4.js');
+var configState = require('./config-state-BIgGhhe9.js');
 require('./dinero-BwNN_k7x.js');
 var ComponentError = require('./ComponentError-D4OLnOkg.js');
-var GooglePay = require('./GooglePay-BwiJ_80p.js');
+var GooglePay = require('./GooglePay-CbKCUEfb.js');
 require('./Pagination-Dediz133.js');
-require('./Business-DWHy_-z9.js');
+require('./Business-uoeKyW_a.js');
 require('./Dispute-CruQTF6_.js');
 var index$1 = require('./index-CajjbB9t.js');
-var skeleton = require('./skeleton-B8dzxFFr.js');
+var skeleton = require('./skeleton-BGGMhPJj.js');
 var utils = require('./utils-D4WPxuzW.js');
-var button = require('./button-fUPGXjU_.js');
-var parts = require('./parts-BVbaniVM.js');
-require('./package-Df5lTFe6.js');
-require('./Api-QUTWjGTy.js');
-require('./index-mmd0OhmD.js');
+var button = require('./button-C2p1BMP-.js');
+var parts = require('./parts-BsBVknuf.js');
+require('./package-DcGEg97O.js');
+require('./Api-CVbEWBG6.js');
+require('./index-W-zoNiyM.js');
 
 const JustifiRadioListItem = class {
     constructor(hostRef) {
         index.registerInstance(this, hostRef);
-        this.radioClick = index.createEvent(this, "radio-click");
+        this.radioClick = index.createEvent(this, "radio-click", 7);
         this.checked = false;
         this.hidden = false;
         this.handleClick = () => {
@@ -49,8 +49,8 @@ const ERROR_MESSAGES = {
 const InternalTokenizePaymentMethod = class {
     constructor(hostRef) {
         index.registerInstance(this, hostRef);
-        this.errorEvent = index.createEvent(this, "error-event");
-        this.submitEvent = index.createEvent(this, "submit-event");
+        this.errorEvent = index.createEvent(this, "error-event", 7);
+        this.submitEvent = index.createEvent(this, "submit-event", 7);
         this.computedHideSubmitButton = false;
         this.isLoading = false;
         this.submitButtonText = 'Submit';
@@ -280,7 +280,7 @@ const InternalTokenizePaymentMethod = class {
         return paymentMethodType === index$1.PAYMENT_METHODS.NEW_CARD ? (index.h("justifi-card-form", { ref: (el) => (this.paymentMethodFormRef = el) })) : (index.h("justifi-bank-account-form", { ref: (el) => (this.paymentMethodFormRef = el) }));
     }
     render() {
-        return (index.h(styledHost.StyledHost, { key: '8017b0fe2b0e3045a097e30aadf6a54ed2c32e62' }, index.h("form", { key: 'c7b0ac690a66cfb693d28e7d0eabc93817de4659' }, index.h("fieldset", { key: 'fb29e26a4100985595c420024d2a5ff48c79043b' }, index.h("div", { key: '589f51297059afda2e385281dcfeafd67fbd2268', class: "row gy-3" }, index.h("div", { key: 'bf067015fb3ff24e08501899e370f92dda774c2e', class: "col-12" }, this.availablePaymentMethods.map((method) => this.renderPaymentMethodOption(method))), index.h("div", { key: '28872ca9239e2f85cb83ad8e6f27dc10f84da151', class: "col-12" }, index.h("justifi-button", { key: '1be3f46e34b42e69d065384dd195d7fdc09a0560', text: this.submitButtonText, variant: "primary", type: "submit", clickHandler: (e) => this.tokenizePaymentMethod(e), isLoading: this.isLoading, "data-testid": "submit-button", hidden: this.computedHideSubmitButton })))))));
+        return (index.h(styledHost.StyledHost, { key: 'ffe62ce1bf31ab84080d3a4c158db3b537aea2fb' }, index.h("form", { key: '26d7942c4d88a758e03627a6042892a4dcb0a306' }, index.h("fieldset", { key: 'b789b31bad42d4c6912103abe653205165e44e8d' }, index.h("div", { key: '2e0fe382eb8a0018692ca9da2c911229ed981f0d', class: "row gy-3" }, index.h("div", { key: '3120e6ddd56b184f2530a1e8c1bb28f2c0f70579', class: "col-12" }, this.availablePaymentMethods.map((method) => this.renderPaymentMethodOption(method))), index.h("div", { key: '9de5bfc72cce2818aba19408ee835d0762d1e777', class: "col-12" }, index.h("justifi-button", { key: '5bd8cfb66fd34cc6773342175ae22771a095fcab', text: this.submitButtonText, variant: "primary", type: "submit", clickHandler: (e) => this.tokenizePaymentMethod(e), isLoading: this.isLoading, "data-testid": "submit-button", hidden: this.computedHideSubmitButton })))))));
     }
     get host() { return index.getElement(this); }
     static get watchers() { return {
@@ -335,10 +335,10 @@ const BankAccountForm = class {
         return this.accountNumberIframeElement.tokenize(clientId, paymentMethodMetadata, account);
     }
     render() {
-        return (index.h(styledHost.StyledHost, { key: '1513483acd2de524f8634feb14f366a269601e06' }, index.h(BankAccountFormSkeleton, { key: '8b14e99af751f3dbf6e0a3d2d187b44e0934456d', isReady: this.isReady }), index.h("hidden-input", { key: 'edfc3e1b190f28eee4a3769ff33fb7b8220f73d3' }), index.h("div", { key: '9371fe5f4e189c882d16bec25068efcc6d56aff9', class: "container-fluid p-0", style: {
+        return (index.h(styledHost.StyledHost, { key: '6c1e183b7ba2c70b41e22386d74a9cf7430aa8d5' }, index.h(BankAccountFormSkeleton, { key: '2755f4d21f8d62919ef56909f2dc6b9211bf550d', isReady: this.isReady }), index.h("hidden-input", { key: 'c35448285cd2b53973caa4a56c28a135e1ed7d74' }), index.h("div", { key: '9fae602596267bafc39b9e3e9946a289b38393b6', class: "container-fluid p-0", style: {
                 opacity: this.isReady ? '1' : '0',
                 height: this.isReady ? 'auto' : '0',
-            } }, index.h("div", { key: '5cecb5ecc5a3cfdb1ff0fe659aa9e22c0c1c8a11', class: "row mb-3" }, index.h("iframe-input", { key: 'b970e3a6e563cf1a5cff651c219a954d32b1fec3', inputId: "accountNumber", ref: (el) => (this.accountNumberIframeElement = el), label: "Account Number", iframeOrigin: `${this.iframeOrigin}/v2/accountNumber?tabId=${this.tabId}` })), index.h("div", { key: 'eaf6b26dc3638f548fd7e5b45363319db3bdf5f2', class: "row" }, index.h("iframe-input", { key: 'c90064cec52a9100522f0ea62593b8e439ea7a9e', inputId: "routingNumber", ref: (el) => (this.routingNumberIframeElement = el), label: "Routing Number", iframeOrigin: `${this.iframeOrigin}/v2/routingNumber?tabId=${this.tabId}` })))));
+            } }, index.h("div", { key: 'bfaee6ed0eaa2a68175f18146d56195cc1a23e91', class: "row mb-3" }, index.h("iframe-input", { key: '7385c2582ad5b397eb2afcb9c87b789d4918542c', inputId: "accountNumber", ref: (el) => (this.accountNumberIframeElement = el), label: "Account Number", iframeOrigin: `${this.iframeOrigin}/v2/accountNumber?tabId=${this.tabId}` })), index.h("div", { key: 'effe6b1f18d5fa531f4537accfe8279b81bc7b49', class: "row" }, index.h("iframe-input", { key: '19cc7e46d8f7cb79c70ba21f2e9c15c7665eca47', inputId: "routingNumber", ref: (el) => (this.routingNumberIframeElement = el), label: "Routing Number", iframeOrigin: `${this.iframeOrigin}/v2/routingNumber?tabId=${this.tabId}` })))));
     }
 };
 
@@ -382,7 +382,7 @@ const JustifiButton = class {
         this.type = 'button';
     }
     render() {
-        return (index.h(styledHost.StyledHost, { key: '7c8b76c4eaa412f2dc2ba59fd56cb7c28f46656c' }, index.h(button.Button, { key: '9440f90ebb380703b35b6c5d811e5d0780e80fd2', variant: this.variant, isLoading: this.isLoading, clickHandler: this.clickHandler, class: this.class, type: this.type, disabled: this.disabled, style: this.customStyle }, this.text)));
+        return (index.h(styledHost.StyledHost, { key: '2ef29be35c350bbd0530dbad83f65cd4ad4dbe27' }, index.h(button.Button, { key: '526763deaf2d228f0142d8efcb805557b8fe6ed9', variant: this.variant, isLoading: this.isLoading, clickHandler: this.clickHandler, class: this.class, type: this.type, disabled: this.disabled, style: this.customStyle }, this.text)));
     }
 };
 
@@ -436,17 +436,17 @@ const JustifiCardForm = class {
         return this.cardNumberIframeElement.tokenize(clientId, paymentMethodMetadata, account);
     }
     render() {
-        return (index.h(styledHost.StyledHost, { key: '83bf3ea8d44fd14cf98725b1e800e2481222423b' }, index.h(CardFormSkeleton, { key: 'e23ef5cf5d8b756dcdfda6341a240d86e400a10e', isReady: this.isReady }), index.h("hidden-input", { key: 'eddc0b1549ee00084df8bfbbd22658bc48cdf493' }), index.h("div", { key: '753a4c38f8624a9d528c582fd5e26929977e88c5', class: "container-fluid p-0", style: {
+        return (index.h(styledHost.StyledHost, { key: 'e204cee1fc875392b8056baf58b7234a739fffce' }, index.h(CardFormSkeleton, { key: '3accfb88d66661ceaef39f765bb3fddfd0f98393', isReady: this.isReady }), index.h("hidden-input", { key: '0416ddca8b444cf8702f3fff52065bf647bd4b61' }), index.h("div", { key: '37c1d5014e5a6658bfd28e08e361ffaa6488f6d7', class: "container-fluid p-0", style: {
                 opacity: this.isReady ? '1' : '0',
                 height: this.isReady ? 'auto' : '0',
-            } }, index.h("div", { key: 'db1c408da9865db12899f2e86d46a3181f592333', class: "mb-3" }, index.h("iframe-input", { key: 'b31b33f68f34fbde9abdab13cc4b0b09e2122bad', inputId: "cardNumber", ref: (el) => (this.cardNumberIframeElement = el), label: "Card Number", iframeOrigin: `${this.iframeOrigin}/v2/cardNumber?tabId=${this.tabId}` })), index.h("div", { key: '4e8e14e60bb566032530fd72e7f787226e0e7940', class: "row" }, index.h("div", { key: 'cb1c06bd2c2e04cffdc2a6572505a6dcf26e9b48', class: "col-4 align-content-end" }, index.h("iframe-input", { key: '915ff44d990585262a2e60d83ac569cd56e90762', inputId: "expirationMonth", ref: (el) => (this.expirationMonthIframeElement = el), label: "Expiration", iframeOrigin: `${this.iframeOrigin}/v2/expirationMonth?tabId=${this.tabId}` })), index.h("div", { key: 'ceca19853d0e78828c5a89a5e1f99acce6d05345', class: "col-4 align-content-end" }, index.h("iframe-input", { key: 'f0089860aab12b7bcfe31ac9fe6ed303182ff9fa', inputId: "expirationYear", ref: (el) => (this.expirationYearIframeElement = el), label: "", iframeOrigin: `${this.iframeOrigin}/v2/expirationYear?tabId=${this.tabId}` })), index.h("div", { key: 'e1bdd33a875bdf82068aceeea68f27c48414ed65', class: "col-4 align-content-end" }, index.h("iframe-input", { key: '7c483f78294418b7cee76e0c272ad375496bbc7d', inputId: "CVV", ref: (el) => (this.cvvIframeElement = el), label: "CVV", iframeOrigin: `${this.iframeOrigin}/v2/CVV?tabId=${this.tabId}` }))))));
+            } }, index.h("div", { key: 'e2956855dfbcab38a782c22e93bd49252196baa8', class: "mb-3" }, index.h("iframe-input", { key: '55105f1eebab4b846e1b5c55448259368a412349', inputId: "cardNumber", ref: (el) => (this.cardNumberIframeElement = el), label: "Card Number", iframeOrigin: `${this.iframeOrigin}/v2/cardNumber?tabId=${this.tabId}` })), index.h("div", { key: '9464b1a500a84dcaa438a9ebdad756637d14cb24', class: "row" }, index.h("div", { key: 'adc51687629fb00d26c6627e95c0228f5a4dfd11', class: "col-4 align-content-end" }, index.h("iframe-input", { key: '52a0e5e198b6bfac00515ec220370e289674b613', inputId: "expirationMonth", ref: (el) => (this.expirationMonthIframeElement = el), label: "Expiration", iframeOrigin: `${this.iframeOrigin}/v2/expirationMonth?tabId=${this.tabId}` })), index.h("div", { key: '1b09582711d838643db265b003ed18b18042713e', class: "col-4 align-content-end" }, index.h("iframe-input", { key: 'a1731a8dc02723398e1aae58b3812fccf62e6157', inputId: "expirationYear", ref: (el) => (this.expirationYearIframeElement = el), label: "", iframeOrigin: `${this.iframeOrigin}/v2/expirationYear?tabId=${this.tabId}` })), index.h("div", { key: '1e2c3205f2e0b28d036480d2c61934da5e7da620', class: "col-4 align-content-end" }, index.h("iframe-input", { key: 'b7b87360068434122f9b5a8935468240684b7a1d', inputId: "CVV", ref: (el) => (this.cvvIframeElement = el), label: "CVV", iframeOrigin: `${this.iframeOrigin}/v2/CVV?tabId=${this.tabId}` }))))));
     }
 };
 
 const SaveNewPaymentMethod = class {
     constructor(hostRef) {
         index.registerInstance(this, hostRef);
-        this.checkboxChanged = index.createEvent(this, "checkboxChanged");
+        this.checkboxChanged = index.createEvent(this, "checkboxChanged", 7);
         this.label = 'Save New Payment Method';
         this.isChecked = false;
         this.handleCheckboxChange = (_name, value) => {
@@ -456,7 +456,7 @@ const SaveNewPaymentMethod = class {
         };
     }
     render() {
-        return (index.h(styledHost.StyledHost, { key: '7cc086e518b2defcea924398cd5957b44a893d94' }, index.h("form-control-checkbox", { key: '523dd82fe06f0c0a6d259a84f320c0a335261232', label: this.label || 'Save New Payment Method', name: "saveNewPaymentMethod", checked: this.isChecked, inputHandler: this.handleCheckboxChange })));
+        return (index.h(styledHost.StyledHost, { key: '981f6a84fc14a7b687e1b6567b30fb9f861b0aa2' }, index.h("form-control-checkbox", { key: '566f6261d19f96b87b9382b26a86b71461a29d08', label: this.label || 'Save New Payment Method', name: "saveNewPaymentMethod", checked: this.isChecked, inputHandler: this.handleCheckboxChange })));
     }
 };
 

package/dist/cjs/justifi-additional-questions-form-step_9.cjs.entry.js

@@ -1,31 +1,32 @@
 'use strict';
 
-var index = require('./index-BhI7cJcE.js');
+var index = require('./index-p7cvUYAE.js');
 var ComponentError = require('./ComponentError-D4OLnOkg.js');
 var paymentProvisioningActions = require('./payment-provisioning-actions-CZVlnRA0.js');
-var business_service = require('./business.service-q93NsTG_.js');
-var businessAdditionalQuestionsSchema = require('./business-additional-questions-schema-Y1mXnwUT.js');
+var business_service = require('./business.service-DR4Ce5XV.js');
+var businessAdditionalQuestionsSchema = require('./business-additional-questions-schema-BtOuMq_U.js');
 var index_esm = require('./index.esm-ByC0D4sJ.js');
-var Business = require('./Business-DWHy_-z9.js');
+var Business = require('./Business-uoeKyW_a.js');
 var formInputMasks = require('./form-input-masks-BnNFJ3IJ.js');
-var parts = require('./parts-BVbaniVM.js');
-var skeleton = require('./skeleton-B8dzxFFr.js');
-require('./event-types-YOY5TKUN.js');
-var businessFormOptions = require('./business-form-options-e9UFw4P-.js');
+var parts = require('./parts-BsBVknuf.js');
+var paymentProvisioningLoading = require('./payment-provisioning-loading-B3hvtd9o.js');
+var businessFormOptions = require('./business-form-options-D1r-wJpo.js');
 var eventTypes = require('./event-types-DNOUef41.js');
-require('./config-state-CYoBVAca.js');
+require('./config-state-BIgGhhe9.js');
 require('./dinero-BwNN_k7x.js');
-var GooglePay = require('./GooglePay-BwiJ_80p.js');
+var GooglePay = require('./GooglePay-CbKCUEfb.js');
 require('./Pagination-Dediz133.js');
 require('./Dispute-CruQTF6_.js');
-var schemaValidations = require('./schema-validations-Bf2mk2xU.js');
-var button = require('./button-fUPGXjU_.js');
-var countryConfig = require('./country-config-MCOhn8o3.js');
-var businessIdentitySchema = require('./business-identity-schema-D_OO0Suf.js');
-var Api = require('./Api-QUTWjGTy.js');
+var schemaValidations = require('./schema-validations-DYYDrVol.js');
+var button = require('./button-C2p1BMP-.js');
+require('./event-types-YOY5TKUN.js');
+var countryConfig = require('./country-config-DGi9t3Ma.js');
+var businessIdentitySchema = require('./business-identity-schema-CMvq6f8m.js');
+var Api = require('./Api-CVbEWBG6.js');
 require('./utils-DvUQQLmR.js');
 require('./_commonjsHelpers-BJu3ubxk.js');
-require('./index-mmd0OhmD.js');
+require('./skeleton-BGGMhPJj.js');
+require('./index-W-zoNiyM.js');
 require('./utils-D4WPxuzW.js');
 require('./index-CajjbB9t.js');
 
@@ -66,17 +67,12 @@ class BankAccount {
     }
 }
 
-const FormBlock = () => (index.h("div", { class: "row gap-3" }, index.h("div", { class: "col-12" }, index.h(skeleton.Skeleton, { width: "25%" })), index.h("div", { class: "col-12" }, index.h(skeleton.Skeleton, { width: "100%" })), index.h("div", { class: "col-12 d-flex gap-3" }, index.h(skeleton.Skeleton, { width: "50%" }), index.h(skeleton.Skeleton, { width: "50%" })), index.h("div", { class: "col-12 d-flex gap-3" }, index.h(skeleton.Skeleton, { width: "65%" }), index.h(skeleton.Skeleton, { width: "35%" }))));
-const PaymentProvisioningLoading = () => {
-    return (index.h("div", { class: "row gap-5" }, index.h("div", { class: "col-12" }, index.h(skeleton.Skeleton, { width: "40%", height: "40px" })), index.h(FormBlock, null), index.h(FormBlock, null), index.h(FormBlock, null)));
-};
-
 const AdditionalQuestionsFormStep = class {
     constructor(hostRef) {
         index.registerInstance(this, hostRef);
-        this.errorEvent = index.createEvent(this, "error-event");
-        this.stepCompleteEvent = index.createEvent(this, "complete-form-step-event");
-        this.formLoading = index.createEvent(this, "formLoading");
+        this.errorEvent = index.createEvent(this, "error-event", 7);
+        this.stepCompleteEvent = index.createEvent(this, "complete-form-step-event", 7);
+        this.formLoading = index.createEvent(this, "formLoading", 7);
         this.errors = {};
         this.additional_questions = {};
         this.recurringPayments = false;
@@ -180,12 +176,12 @@ const AdditionalQuestionsFormStep = class {
         }
     }
     render() {
-        var _a, _b, _c, _d;
+        var _a, _b, _c, _d, _e;
         const additionalQuestionsDefaultValue = this.formController.getInitialValues();
         if (this.isLoading) {
-            return index.h(PaymentProvisioningLoading, null);
+            return index.h(paymentProvisioningLoading.PaymentProvisioningLoading, null);
         }
-        return (index.h("form", null, index.h("fieldset", null, index.h("div", { class: "d-flex align-items-center gap-2" }, index.h("legend", { class: "mb-0", part: parts.heading2 }, "Additional Questions"), index.h("form-control-tooltip", { helpText: "This information helps us understand the business and identify and monitor trends to safeguard you and your customers." })), index.h("hr", { class: "mt-2" }), index.h("div", { class: "row gy-3" }, index.h("div", { class: "col-12 col-md-6" }, index.h("form-control-monetary-provisioning", { name: "business_revenue", label: "What is your business' estimated annual revenue from its primary business activities?", inputHandler: this.inputHandler, errorText: (_a = this.errors) === null || _a === void 0 ? void 0 : _a.business_revenue, defaultValue: additionalQuestionsDefaultValue === null || additionalQuestionsDefaultValue === void 0 ? void 0 : additionalQuestionsDefaultValue.business_revenue, maskOptions: formInputMasks.CURRENCY_MASK.WHOLE })), index.h("div", { class: "col-12 col-md-6" }, index.h("form-control-text", { name: "business_payment_volume", label: "What is your business' annual credit card & ACH volume anticipated to process?", inputHandler: this.inputHandler, errorText: (_b = this.errors) === null || _b === void 0 ? void 0 : _b.business_payment_volume, defaultValue: additionalQuestionsDefaultValue === null || additionalQuestionsDefaultValue === void 0 ? void 0 : additionalQuestionsDefaultValue.business_payment_volume })), index.h("div", { class: "col-12" }, index.h("form-control-select", { name: "business_when_service_received", label: "On average, how long after paying will your customers typically receive their goods or services?", inputHandler: this.inputHandler, errorText: (_c = this.errors) === null || _c === void 0 ? void 0 : _c.business_when_service_received, options: businessFormOptions.businessServiceReceivedOptions, defaultValue: additionalQuestionsDefaultValue === null || additionalQuestionsDefaultValue === void 0 ? void 0 : additionalQuestionsDefaultValue.business_when_service_received })), index.h("div", { class: "col-12" }, index.h("form-control-text", { name: "business_other_payment_details", label: "Is there anything else you would like us to know about how your customers pay the business? (optional)", inputHandler: this.inputHandler, errorText: (_d = this.errors) === null || _d === void 0 ? void 0 : _d.business_other_payment_details, defaultValue: additionalQuestionsDefaultValue === null || additionalQuestionsDefaultValue === void 0 ? void 0 : additionalQuestionsDefaultValue.business_other_payment_details }))))));
+        return (index.h("form", null, index.h("fieldset", null, index.h("div", { class: "d-flex align-items-center gap-2" }, index.h("legend", { class: "mb-0", part: parts.heading2 }, "Additional Questions"), index.h("form-control-tooltip", { helpText: "This information helps us understand the business and identify and monitor trends to safeguard you and your customers." })), index.h("hr", { class: "mt-2" }), index.h("div", { class: "row gy-3" }, index.h("div", { class: "col-12 col-md-6" }, index.h("form-control-monetary-provisioning", { name: "business_revenue", label: "What is your business' estimated annual revenue from its primary business activities?", inputHandler: this.inputHandler, errorText: (_a = this.errors) === null || _a === void 0 ? void 0 : _a.business_revenue, defaultValue: additionalQuestionsDefaultValue === null || additionalQuestionsDefaultValue === void 0 ? void 0 : additionalQuestionsDefaultValue.business_revenue, maskOptions: formInputMasks.CURRENCY_MASK.WHOLE })), index.h("div", { class: "col-12 col-md-6" }, index.h("form-control-monetary-provisioning", { name: "business_payment_volume", label: "What is your business' annual credit card & ACH volume anticipated to process?", inputHandler: this.inputHandler, errorText: (_b = this.errors) === null || _b === void 0 ? void 0 : _b.business_payment_volume, defaultValue: additionalQuestionsDefaultValue === null || additionalQuestionsDefaultValue === void 0 ? void 0 : additionalQuestionsDefaultValue.business_payment_volume, maskOptions: formInputMasks.CURRENCY_MASK.WHOLE })), index.h("div", { class: "col-12" }, index.h("form-control-text", { name: "business_average_transaction_amount", label: "What is your average transaction size?", inputHandler: this.inputHandler, errorText: (_c = this.errors) === null || _c === void 0 ? void 0 : _c.business_average_transaction_amount, defaultValue: additionalQuestionsDefaultValue === null || additionalQuestionsDefaultValue === void 0 ? void 0 : additionalQuestionsDefaultValue.business_average_transaction_amount })), index.h("div", { class: "col-12" }, index.h("form-control-select", { name: "business_when_service_received", label: "On average, how long after paying will your customers typically receive their goods or services?", inputHandler: this.inputHandler, errorText: (_d = this.errors) === null || _d === void 0 ? void 0 : _d.business_when_service_received, options: businessFormOptions.businessServiceReceivedOptions, defaultValue: additionalQuestionsDefaultValue === null || additionalQuestionsDefaultValue === void 0 ? void 0 : additionalQuestionsDefaultValue.business_when_service_received })), index.h("div", { class: "col-12" }, index.h("form-control-text", { name: "business_other_payment_details", label: "Is there anything else you would like us to know about how your customers pay the business? (optional)", inputHandler: this.inputHandler, errorText: (_e = this.errors) === null || _e === void 0 ? void 0 : _e.business_other_payment_details, defaultValue: additionalQuestionsDefaultValue === null || additionalQuestionsDefaultValue === void 0 ? void 0 : additionalQuestionsDefaultValue.business_other_payment_details }))))));
     }
     static get watchers() { return {
         "authToken": ["propChanged"],
@@ -279,9 +275,9 @@ const bankAccountSchemaByCountry = {
 const BusinessBankAccountFormStep = class {
     constructor(hostRef) {
         index.registerInstance(this, hostRef);
-        this.errorEvent = index.createEvent(this, "error-event");
-        this.stepCompleteEvent = index.createEvent(this, "complete-form-step-event");
-        this.formLoading = index.createEvent(this, "formLoading");
+        this.errorEvent = index.createEvent(this, "error-event", 7);
+        this.stepCompleteEvent = index.createEvent(this, "complete-form-step-event", 7);
+        this.formLoading = index.createEvent(this, "formLoading", 7);
         this.errors = {};
         this.bankAccount = {};
         this.existingDocuments = [];
@@ -592,7 +588,7 @@ const BusinessBankAccountFormStep = class {
     render() {
         const bankAccountDefaultValue = this.formController.getInitialValues();
         if (this.isLoading) {
-            return index.h(PaymentProvisioningLoading, null);
+            return index.h(paymentProvisioningLoading.PaymentProvisioningLoading, null);
         }
         return (index.h("form", null, index.h("fieldset", { class: "mb-4" }, index.h("div", { class: "d-flex align-items-center gap-2" }, index.h("legend", { class: "mb-0", part: parts.heading2 }, "Bank Account Info"), index.h("form-control-tooltip", { helpText: "This direct deposit account is the designated bank account where incoming funds will be deposited. The name of this account must match the registered business name exactly. We are not able to accept personal accounts unless your business is a registered sole proprietorship." })), index.h("hr", { class: "mt-2" }), this.country === Business.CountryCode.CAN ? (index.h("bank-account-form-inputs-canada", { defaultValue: bankAccountDefaultValue, errors: this.errors, inputHandler: this.inputHandler, formDisabled: this.showReadOnlyView })) : (index.h("bank-account-form-inputs", { defaultValue: bankAccountDefaultValue, errors: this.errors, inputHandler: this.inputHandler, formDisabled: this.showReadOnlyView })), this.showReadOnlyView && (index.h("div", { class: "mt-3" }, index.h(button.Button, { variant: "secondary", type: "button", onClick: this.handleChangeBankAccount, disabled: this.isLoading, part: parts.buttonSecondary }, "Change Bank Account"))), (!this.existingBankAccount || this.isAddingNewBankAccount) && (index.h("div", { class: "mt-3 d-flex gap-2" }, this.isAddingNewBankAccount && (index.h(button.Button, { variant: "secondary", type: "button", onClick: this.handleCancel, disabled: this.isLoading, part: parts.buttonSecondary }, "Cancel")), index.h(button.Button, { variant: "primary", type: "button", onClick: this.handleSaveBankAccount, disabled: this.isLoading, isLoading: this.isLoading }, "Save Bank Account")))), index.h("fieldset", { class: "mt-4" }, index.h("div", { class: "d-flex align-items-center gap-2" }, index.h("legend", { class: "mb-0", part: parts.heading2 }, "Document Uploads"), index.h("form-control-tooltip", { helpText: "One document (voided check or bank statement) is required for underwriting purposes. It needs to visibly show the name tied to the account and the account number. Various file formats such as PDF, DOC, DOCX, JPEG are accepted. Multiple files can be uploaded for each document category." })), index.h("hr", { class: "mt-2" }), index.h("business-documents-on-file", { documents: this.existingDocuments, isLoading: this.isLoading }), index.h("bank-account-document-form-inputs", { inputHandler: this.inputHandler, errors: this.errors, storeFiles: this.storeFiles }))));
     }
@@ -606,9 +602,9 @@ const BusinessBankAccountFormStep = class {
 const BusinessCoreInfoFormStep = class {
     constructor(hostRef) {
         index.registerInstance(this, hostRef);
-        this.errorEvent = index.createEvent(this, "error-event");
-        this.stepCompleteEvent = index.createEvent(this, "complete-form-step-event");
-        this.formLoading = index.createEvent(this, "formLoading");
+        this.errorEvent = index.createEvent(this, "error-event", 7);
+        this.stepCompleteEvent = index.createEvent(this, "complete-form-step-event", 7);
+        this.formLoading = index.createEvent(this, "formLoading", 7);
         this.errors = {};
         this.coreInfo = {};
         this.isLoading = false;
@@ -713,7 +709,7 @@ const BusinessCoreInfoFormStep = class {
         var _a, _b;
         const coreInfoDefaultValue = this.formController.getInitialValues();
         if (this.isLoading) {
-            return index.h(PaymentProvisioningLoading, null);
+            return index.h(paymentProvisioningLoading.PaymentProvisioningLoading, null);
         }
         return (index.h("form", null, index.h("fieldset", null, index.h("div", { class: "d-flex align-items-center gap-2" }, index.h("legend", { class: "mb-0", part: parts.heading2 }, "Business Information")), index.h("hr", { class: "mt-2" }), index.h("div", { class: "row gy-3" }, index.h("div", { class: "col-12" }, index.h("form-control-text", { name: "legal_name", label: "Business Name", defaultValue: coreInfoDefaultValue.legal_name, errorText: this.errors.legal_name, inputHandler: this.inputHandler, helpText: "Enter this exactly as it appears on your tax records (don't use acronyms or abbreviations unless you registered that way)." })), index.h("div", { class: "col-12" }, index.h("form-control-text", { name: "doing_business_as", label: "Doing Business As (DBA)", defaultValue: coreInfoDefaultValue.doing_business_as, errorText: this.errors.doing_business_as, inputHandler: this.inputHandler, helpText: "Enter this exactly as it appears on your tax records (leave blank if you don't have a registered DBA/trade name)" })), index.h("div", { class: "col-12 col-md-8" }, index.h("form-control-select", { name: "classification", label: "Business Classification", options: businessFormOptions.businessClassificationOptions, defaultValue: coreInfoDefaultValue.classification, errorText: this.errors.classification, inputHandler: this.inputHandler })), index.h("div", { class: "col-12 col-md-4" }, index.h("form-control-date", { name: "date_of_incorporation", label: "Date of Registration", defaultValue: coreInfoDefaultValue.date_of_incorporation, errorText: this.errors.date_of_incorporation, inputHandler: this.inputHandler })), index.h("div", { class: "col-12 col-md-6" }, index.h("form-control-text", { name: "industry", label: "Industry", defaultValue: coreInfoDefaultValue.industry, errorText: this.errors.industry, inputHandler: this.inputHandler, helpText: "Describe what you sell" })), index.h("div", { class: "col-12 col-md-6" }, (!((_a = this.coreInfo) === null || _a === void 0 ? void 0 : _a.tax_id_last4) || this.isEditingTaxId) ? (index.h("form-control-number-masked", { name: "tax_id", label: countryConfig.countryLabels[this.country].taxIdLabel, defaultValue: this.isEditingTaxId ? '' : coreInfoDefaultValue.tax_id, errorText: this.errors.tax_id, inputHandler: this.inputHandler, mask: '000000000', helpText: countryConfig.countryLabels[this.country].taxIdHelpText })) : (index.h("div", null, index.h("label", { class: "form-label", part: parts.label }, countryConfig.countryLabels[this.country].taxIdLabel), index.h("div", { class: "input-group mb-3" }, index.h("input", { type: "text", class: "form-control", part: parts.inputDisabled, value: `****${(_b = this.coreInfo) === null || _b === void 0 ? void 0 : _b.tax_id_last4}`, disabled: true }), index.h("button", { class: "btn btn-secondary", type: "button", part: parts.buttonSecondary, onClick: () => {
                 this.isEditingTaxId = true;
@@ -730,16 +726,23 @@ const BusinessCoreInfoFormStep = class {
 const BusinessOwnersFormStep = class {
     constructor(hostRef) {
         index.registerInstance(this, hostRef);
-        this.clickEvent = index.createEvent(this, "click-event");
-        this.stepCompleteEvent = index.createEvent(this, "complete-form-step-event");
-        this.errorEvent = index.createEvent(this, "error-event");
-        this.formLoading = index.createEvent(this, "formLoading");
+        this.clickEvent = index.createEvent(this, "click-event", 7);
+        this.stepCompleteEvent = index.createEvent(this, "complete-form-step-event", 7);
+        this.errorEvent = index.createEvent(this, "error-event", 7);
+        this.formLoading = index.createEvent(this, "formLoading", 7);
         this.ownersPayload = [];
         this.refs = [];
         this.isLoading = false;
+        this.representativeIsOwner = null;
         this.matchRef = (ref, ownerId) => {
-            const ownerIndex = this.refs.findIndex(ref => ref === ownerId);
+            if (ref === null)
+                return;
+            const ownerIndex = this.ownersPayload.findIndex(owner => owner.id === ownerId);
             if (ownerIndex !== -1) {
+                // Ensure refs array is properly sized before setting ref
+                if (this.refs.length !== this.ownersPayload.length) {
+                    this.manageRefs();
+                }
                 this.refs[ownerIndex] = ref;
             }
         };
@@ -748,6 +751,7 @@ const BusinessOwnersFormStep = class {
             this.isLoading = true;
             this.getBusiness({
                 onSuccess: (response) => {
+                    this.representative = new Business.Representative(response.data.representative || {});
                     if (response.data.owners.length) {
                         this.ownersPayload = response.data.owners.map(owner => ({ id: owner.id }));
                     }
@@ -801,6 +805,21 @@ const BusinessOwnersFormStep = class {
             this.ownersPayload = this.ownersPayload.filter(owner => owner.id !== id);
             this.newFormOpen && (this.newFormOpen = false);
         };
+        this.handleRepresentativeIsOwnerChange = (value) => {
+            this.representativeIsOwner = value;
+            if (this.representativeIsOwner) {
+                this.ownersPayload = this.ownersPayload.filter(owner => owner.id !== '');
+                this.patchBusiness({
+                    payload: {
+                        owners: [{ id: this.representative.id }, ...this.ownersPayload],
+                    },
+                    onSuccess: () => {
+                        this.getData();
+                        this.newFormOpen = false;
+                    },
+                });
+            }
+        };
     }
     propChanged() {
         this.initializeApi();
@@ -866,9 +885,11 @@ const BusinessOwnersFormStep = class {
     }
     render() {
         if (this.isLoading) {
-            return (index.h(index.Host, null, index.h(PaymentProvisioningLoading, null)));
+            return (index.h(index.Host, null, index.h(paymentProvisioningLoading.PaymentProvisioningLoading, null)));
         }
-        return (index.h(index.Host, null, index.h("div", null, index.h("div", { class: "d-flex align-items-center gap-2" }, index.h("legend", { class: "mb-0", part: parts.heading2 }, "Owners"), index.h("form-control-tooltip", { helpText: "For partnerships, LLCs or privately held corporations, the business is required to apply with all individuals with 25% or more ownership to the application. For charities and registered non-profits, the business is required to apply with 1 individual with substantial control over the entity, such as a board member or director." })), index.h("hr", { class: "mt-2" }), index.h("div", { class: 'row gy-3' }, this.ownersPayload.map((owner) => {
+        const isRepresentativeOwner = this.ownersPayload.some(owner => owner.id === this.representative.id);
+        const shouldShowRepresentativeIsOwner = this.representativeIsOwner === null && !isRepresentativeOwner;
+        return (index.h(index.Host, null, index.h("div", null, index.h("div", { class: "d-flex align-items-center gap-2" }, index.h("legend", { class: "mb-0", part: parts.heading2 }, "Owners"), index.h("form-control-tooltip", { helpText: "For partnerships, LLCs or privately held corporations, the business is required to apply with all individuals with 25% or more ownership to the application. For charities and registered non-profits, the business is required to apply with 1 individual with substantial control over the entity, such as a board member or director." })), index.h("hr", { class: "mt-2" }), shouldShowRepresentativeIsOwner && (index.h("div", { class: `alert alert-warning mb-3`, part: parts.alert }, index.h("div", { class: "card-body" }, index.h("div", { class: "d-flex align-items-center mb-3" }, index.h("strong", null, "Is the representative of this business also an owner?")), index.h("div", { class: "d-flex gap-2" }, index.h(button.Button, { variant: 'primary', onClick: () => this.handleRepresentativeIsOwnerChange(true) }, "Yes"), index.h(button.Button, { variant: 'secondary', onClick: () => this.handleRepresentativeIsOwnerChange(false) }, "No"))))), index.h("div", { class: 'row gy-3' }, this.ownersPayload.map((owner) => {
             return (index.h("justifi-owner-form", { key: owner.id, authToken: this.authToken, businessId: this.businessId, ownerId: owner.id, removeOwner: this.removeOwnerForm, newFormOpen: this.newFormOpen, ownersLength: this.ownersPayload.length, country: this.country, allowOptionalFields: this.allowOptionalFields, ref: (ref) => this.matchRef(ref, owner.id) }));
         })), index.h("div", { class: 'd-flex justify-content-start' }, index.h("div", { class: 'gap-2' }, index.h(button.Button, { variant: 'primary', onClick: () => this.addOwnerForm(true), hidden: !this.showAddOwnerButton }, "Add Owner"))))));
     }
@@ -882,9 +903,9 @@ const BusinessOwnersFormStep = class {
 const BusinessRepresentativeFormStep = class {
     constructor(hostRef) {
         index.registerInstance(this, hostRef);
-        this.errorEvent = index.createEvent(this, "error-event");
-        this.stepCompleteEvent = index.createEvent(this, "complete-form-step-event");
-        this.formLoading = index.createEvent(this, "formLoading");
+        this.errorEvent = index.createEvent(this, "error-event", 7);
+        this.stepCompleteEvent = index.createEvent(this, "complete-form-step-event", 7);
+        this.formLoading = index.createEvent(this, "formLoading", 7);
         this.errors = {};
         this.representative = {};
         this.isLoading = false;
@@ -994,7 +1015,7 @@ const BusinessRepresentativeFormStep = class {
     }
     render() {
         if (!this.formController || this.isLoading) {
-            return (index.h(PaymentProvisioningLoading, null));
+            return (index.h(paymentProvisioningLoading.PaymentProvisioningLoading, null));
         }
         return (index.h("justifi-business-representative-form-inputs", { representativeDefaultValue: this.formController.getInitialValues(), errors: this.errors, formController: this.formController, country: this.country }));
     }
@@ -1019,10 +1040,10 @@ const businessTermsConditionsSchema = (allowOptionalFields) => {
 const BusinessTermsConditionsFormStep = class {
     constructor(hostRef) {
         index.registerInstance(this, hostRef);
-        this.stepCompleteEvent = index.createEvent(this, "complete-form-step-event");
-        this.errorEvent = index.createEvent(this, "error-event");
-        this.formLoading = index.createEvent(this, "formLoading");
-        this.formCompleted = index.createEvent(this, "formCompleted");
+        this.stepCompleteEvent = index.createEvent(this, "complete-form-step-event", 7);
+        this.errorEvent = index.createEvent(this, "error-event", 7);
+        this.formLoading = index.createEvent(this, "formLoading", 7);
+        this.formCompleted = index.createEvent(this, "formCompleted", 7);
         this.errors = {};
         this.fetchData = async () => {
             this.formLoading.emit(true);
@@ -1124,16 +1145,16 @@ const BusinessTermsConditionsFormStep = class {
         return (index.h("a", { href: "https://justifi.tech/merchant-agreement/", target: "_blank", rel: "noopener noreferrer" }, "merchant agreement"));
     }
     render() {
-        return (index.h("form", { key: '721f3c171358f9450a8b460dafac3c9f7f27727b' }, index.h("fieldset", { key: 'e151086c528d5e359e4ecd2c33feb01c5571a6ca' }, index.h("legend", { key: 'ff4ba3bead3ec50cf9736d6a864740e542f42b2d', part: parts.heading2 }, "Terms and Conditions"), index.h("hr", { key: 'c076bfe230bafbe8db7280f5f708de893c970bf2' }), index.h("div", { key: 'd2a1e0f4e15077d07fe7de2cb847252990b44bde' }, index.h("p", { key: '559c4c6d6e27b5fb800984e87097fe080482462d' }, "Please read and accept the ", this.merchantAgreementLink, " to submit your provisioning request.")), index.h("br", { key: '014b3a7be231c81bd23c35ab212d7ac4e4c1d107' }), index.h("div", { key: '3ef38ecffd678c36c564836434f0a0da341116af', class: "row-gy-3" }, index.h("div", { key: 'e715723e19a212628d29fec46ca494b7080dac66', class: "col-12" }, index.h("form-control-checkbox", { key: '6054f012fa3abacf6b9f6ffe7d7e88444d8a1066', name: "accepted", label: "I agree to the terms and conditions", inputHandler: this.inputHandler, errorText: this.errors.accepted, disabled: this.acceptedTermsBefore, helpText: this.formHelperText, checked: this.acceptedTerms }))))));
+        return (index.h("form", { key: '33336d0a66d63ce39951822fd570a9a0689e714d' }, index.h("fieldset", { key: 'fcfdb59eef671cb408ed99e2dad20d6be706688a' }, index.h("legend", { key: 'f0cf7f0ac15c90cf36ee25d4bf986c0e781a2e92', part: parts.heading2 }, "Terms and Conditions"), index.h("hr", { key: 'd5c820e7d6523f931040a994bd103d69fd644c45' }), index.h("div", { key: '681b584de14afe121f5dc69ee0bad1cab51ba0d1' }, index.h("p", { key: '7c597bf891a108d303739126b806ded5220f56ab' }, "Please read and accept the ", this.merchantAgreementLink, " to submit your provisioning request.")), index.h("br", { key: '52854c5a07611180be40df21a5f60d7d9d4c4cb7' }), index.h("div", { key: '7448b3f6138b996edac137b961367725e3b40556', class: "row-gy-3" }, index.h("div", { key: 'c732deb4e1e3a2d04dd4e09914543a7f594af108', class: "col-12" }, index.h("form-control-checkbox", { key: 'fca18e4843aef20d13790029b114b2ecaeb6ffa2', name: "accepted", label: "I agree to the terms and conditions", inputHandler: this.inputHandler, errorText: this.errors.accepted, disabled: this.acceptedTermsBefore, helpText: this.formHelperText, checked: this.acceptedTerms }))))));
     }
 };
 
 const LegalAddressFormStep = class {
     constructor(hostRef) {
         index.registerInstance(this, hostRef);
-        this.errorEvent = index.createEvent(this, "error-event");
-        this.stepCompleteEvent = index.createEvent(this, "complete-form-step-event");
-        this.formLoading = index.createEvent(this, "formLoading");
+        this.errorEvent = index.createEvent(this, "error-event", 7);
+        this.stepCompleteEvent = index.createEvent(this, "complete-form-step-event", 7);
+        this.formLoading = index.createEvent(this, "formLoading", 7);
         this.errors = {};
         this.legal_address = {};
         this.isLoading = false;
@@ -1235,7 +1256,7 @@ const LegalAddressFormStep = class {
         var _a;
         const legalAddressDefaultValue = (_a = this.formController) === null || _a === void 0 ? void 0 : _a.getInitialValues();
         if (this.isLoading) {
-            return index.h(PaymentProvisioningLoading, null);
+            return index.h(paymentProvisioningLoading.PaymentProvisioningLoading, null);
         }
         return (index.h("form", null, index.h("fieldset", null, index.h("div", { class: "d-flex align-items-center gap-2" }, index.h("legend", { class: "mb-0", part: parts.heading2 }, "Legal Address of your Business"), index.h("form-control-tooltip", { helpText: "No PO Boxes." })), index.h("hr", { class: "mt-2" }), index.h("justifi-form-address-fields", { country: this.country, errors: this.errors, defaultValues: legalAddressDefaultValue, inputHandler: this.inputHandler }))));
     }
@@ -1259,7 +1280,7 @@ const PaymentProvisioningFormButtons = class {
         return this.currentStep === this.totalSteps;
     }
     render() {
-        return (index.h("div", { key: 'e13d3613af061d0067d1dbd84b6c3aebfc782aad', class: 'd-flex gap-2' }, index.h(button.Button, { key: '7b422ce77e13872f3dbd622574bce0e3e6e9c2ed', variant: "secondary", type: "button", onClick: () => this.previousStepButtonOnClick(), disabled: this.formDisabled, hidden: !this.showPreviousStepButton }, "Previous"), index.h(button.Button, { key: 'ea1242fdccb0b0af2438f4aaab91e3e17a607ef7', variant: "primary", type: "button", onClick: (e) => this.nextStepButtonOnClick(e, eventTypes.BusinessFormClickActions.nextStep), disabled: this.formDisabled, isLoading: this.formLoading, hidden: !this.showNextStepButton }, "Next"), index.h(button.Button, { key: '0c323f533ea84608dcdabb885f69d71a81ec684b', variant: "primary", type: "submit", onClick: (e) => this.nextStepButtonOnClick(e, eventTypes.BusinessFormClickActions.submit), disabled: this.formDisabled, isLoading: this.formLoading, hidden: !this.showSubmitButton }, "Submit")));
+        return (index.h("div", { key: '53ba6c809e1968712b333f4bcf2798dbca186ddb', class: 'd-flex gap-2' }, index.h(button.Button, { key: 'b45c60083ccf6589cae0c63ce6b66c18da340dc7', variant: "secondary", type: "button", onClick: () => this.previousStepButtonOnClick(), disabled: this.formDisabled, hidden: !this.showPreviousStepButton }, "Previous"), index.h(button.Button, { key: '27372798da0276de44d1563a4688486e7cc91d64', variant: "primary", type: "button", onClick: (e) => this.nextStepButtonOnClick(e, eventTypes.BusinessFormClickActions.nextStep), disabled: this.formDisabled, isLoading: this.formLoading, hidden: !this.showNextStepButton }, "Next"), index.h(button.Button, { key: '8bc14ca8fe951caf276f8ed03e502486e11acbe2', variant: "primary", type: "submit", onClick: (e) => this.nextStepButtonOnClick(e, eventTypes.BusinessFormClickActions.submit), disabled: this.formDisabled, isLoading: this.formLoading, hidden: !this.showSubmitButton }, "Submit")));
     }
 };
 
@@ -1282,7 +1303,7 @@ const PaymentProvisioningFormSteps = class {
         return this.componentStepMapping[this.currentStep]();
     }
     render() {
-        return (index.h("div", { key: 'dcf3f283bae7de00311f35e41b8d803196f50d49', class: 'col-12 mb-4' }, this.currentStepComponent));
+        return (index.h("div", { key: 'ff7c9e688009383fdbe18c9824fa578d2338900c', class: 'col-12 mb-4' }, this.currentStepComponent));
     }
 };