@justifi/webcomponents 6.7.1 → 6.7.3

package/dist/module/owner-form-inputs2.js

@@ -3,8 +3,9 @@ import { P as PHONE_MASKS, I as IDENTITY_MASKS } from './form-input-masks.js';
 import { u as updateFormValues, a as updateAddressFormValues, b as updateDateOfBirthFormValues } from './input-handlers.js';
 import { c as countryLabels } from './country-config.js';
 import { b as label, d as inputDisabled, Y as buttonSecondary } from './parts.js';
-import { d as defineCustomElement$8 } from './custom-popper2.js';
-import { d as defineCustomElement$7 } from './form-control-date2.js';
+import { d as defineCustomElement$9 } from './custom-popper2.js';
+import { d as defineCustomElement$8 } from './form-control-date2.js';
+import { d as defineCustomElement$7 } from './form-control-number2.js';
 import { d as defineCustomElement$6 } from './form-control-number-masked2.js';
 import { d as defineCustomElement$5 } from './form-control-select2.js';
 import { d as defineCustomElement$4 } from './form-control-text2.js';
@@ -27,15 +28,15 @@ const BusinessOwnerFormInputs = /*@__PURE__*/ proxyCustomElement(class BusinessO
         };
     }
     render() {
-        var _a, _b;
-        return (h("div", { key: '2dea97a8711ac74a5973bab13ffa9d0cbe5cdac4', class: "row gy-3" }, h("div", { key: 'c666e5f65e175db737c2192e2e83f80eb0df3633', class: "col-12 col-md-8" }, h("form-control-text", { key: 'a598efd8f1e898335dae5527cb1b39fc348112e4', name: "name", label: "Full Name", defaultValue: this.ownerDefaultValue.name, errorText: this.errors.name, inputHandler: this.inputHandler })), h("div", { key: 'caadd033a1c510ce222b8b45408677dfd69463bf', class: "col-12 col-md-4" }, h("form-control-text", { key: '8b65c536b51f0d3ab50fef8a5a33b5031eb57af4', 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: 'b2011382dd1d5ebb060fb9c09a402aacdb3c1778', class: "col-12 col-md-6" }, h("form-control-text", { key: '3d540ddff95a999de1329bceaf9bc059d6128963', name: "email", label: "Email Address", defaultValue: this.ownerDefaultValue.email, errorText: this.errors.email, inputHandler: this.inputHandler })), h("div", { key: '0bcad2552b4adb76549649b249e33f329bfdf85b', class: "col-12 col-md-6" }, h("form-control-number-masked", { key: '8c26d1e8b350fce2c03836fdef244f4b28117d76', name: "phone", label: "Phone Number", defaultValue: this.ownerDefaultValue.phone, errorText: this.errors.phone, inputHandler: this.inputHandler, mask: PHONE_MASKS.US })), h("div", { key: 'c6fcb2e3972cc6b32c2ea1ef125ad49c4fe084b7', class: "col-12 col-md-4" }, h("form-control-date", { key: '549fb157eaa9a91f446522e48cb90b0b750c0a91', 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: '728304b41b7083df8cc8cec50f3d22681497b484', 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: () => {
+        var _a, _b, _c;
+        return (h("div", { key: 'f41ae773bd80ec556fe7e1614aa590af09e90a05', class: "row gy-3" }, h("div", { key: 'ceeeefb13ae8eda332287e18b20b8eb1706f21fd', class: "col-12 col-md-8" }, h("form-control-text", { key: '43dc7b751bd879f3e07572df0e02a46ad1e3a2f7', name: "name", label: "Full Name", defaultValue: this.ownerDefaultValue.name, errorText: this.errors.name, inputHandler: this.inputHandler })), h("div", { key: '648a5e78c5d98d69d5331cf70e322b69ad1d2533', class: "col-12 col-md-4" }, h("form-control-text", { key: '26ecf926fb49ab4caf192b6c7b9f3da8a13f13a1', 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: '056a8fa4b4e226efaa64f7eb05dea86ef2d941b2', class: "col-12 col-md-6" }, h("form-control-text", { key: 'ea2dfc1520ad5cf58a7c3a0df591f9b8ed354da5', name: "email", label: "Email Address", defaultValue: this.ownerDefaultValue.email, errorText: this.errors.email, inputHandler: this.inputHandler })), h("div", { key: 'afd1ec4c08af88870d5e732c5b2117c123b7f51e', class: "col-12 col-md-6" }, h("form-control-number-masked", { key: '97a51652ea2dfd3372ae9f3300c18da6e901ab88', name: "phone", label: "Phone Number", defaultValue: this.ownerDefaultValue.phone, errorText: this.errors.phone, inputHandler: this.inputHandler, mask: PHONE_MASKS.US })), h("div", { key: '3da7a2c8e404873a3092f2d563d687d142b32b10', class: "col-12 col-md-3" }, h("form-control-date", { key: '3d5bf80638e42d85b34e286e6ffcfee87a9bd047', 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: '91b4e9ad10a8b7a5527c6593309cf4c6967efdc8', class: "col-12 col-md-3" }, h("form-control-number", { key: '5b98ffbc9d24dbe13c0303ddbaa3c94c7a166f95', name: "ownership_percentage", label: "% of Ownership", defaultValue: (_a = this.ownerDefaultValue) === null || _a === void 0 ? void 0 : _a.ownership_percentage, errorText: this.errors.ownership_percentage, inputHandler: this.inputHandler })), h("div", { key: 'fdf8ebe63498e9be394e251f3b44d6ef93dce5b8', class: "col-12 col-md-6" }, (!((_b = this.ownerDefaultValue) === null || _b === void 0 ? void 0 : _b.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: `****${(_c = this.ownerDefaultValue) === null || _c === void 0 ? void 0 : _c.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: '9496ee53f65c46f66437817fd7ec80a48ce7d000', class: "col-12" }, h("justifi-identity-address-form", { key: '55463847557a8d8285a5be69ba0b5ab77f3749af', errors: this.errors.address, defaultValues: this.ownerDefaultValue.address, handleFormUpdate: this.onAddressFormUpdate, country: this.country }))));
+            } }, "Change"))))), h("div", { key: 'a6f1e2810777e1a7d01ce48ce45b88cec6937c3f', class: "col-12" }, h("justifi-identity-address-form", { key: '0e17fdedad9e82953681c254e5c30217bdf3b022', errors: this.errors.address, defaultValues: this.ownerDefaultValue.address, handleFormUpdate: this.onAddressFormUpdate, country: this.country }))));
     }
     ;
 }, [256, "owner-form-inputs", {
@@ -49,7 +50,7 @@ function defineCustomElement() {
     if (typeof customElements === "undefined") {
         return;
     }
-    const components = ["owner-form-inputs", "custom-popper", "form-control-date", "form-control-number-masked", "form-control-select", "form-control-text", "form-control-tooltip", "justifi-form-address-fields", "justifi-identity-address-form"];
+    const components = ["owner-form-inputs", "custom-popper", "form-control-date", "form-control-number", "form-control-number-masked", "form-control-select", "form-control-text", "form-control-tooltip", "justifi-form-address-fields", "justifi-identity-address-form"];
     components.forEach(tagName => { switch (tagName) {
         case "owner-form-inputs":
             if (!customElements.get(tagName)) {
@@ -58,10 +59,15 @@ function defineCustomElement() {
             break;
         case "custom-popper":
             if (!customElements.get(tagName)) {
-                defineCustomElement$8();
+                defineCustomElement$9();
             }
             break;
         case "form-control-date":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$8();
+            }
+            break;
+        case "form-control-number":
             if (!customElements.get(tagName)) {
                 defineCustomElement$7();
             }

package/dist/module/owner-form.js

@@ -1,8 +1,9 @@
 import { proxyCustomElement, HTMLElement, createEvent, h } from '@stencil/core/internal/client';
 import { b as makeGetIdentity, c as makePatchIdentity, d as makePostIdentity } from './payment-provisioning-actions.js';
 import { I as IdentityService } from './business.service.js';
-import { d as defineCustomElement$a } from './custom-popper2.js';
-import { d as defineCustomElement$9 } from './form-control-date2.js';
+import { d as defineCustomElement$b } from './custom-popper2.js';
+import { d as defineCustomElement$a } from './form-control-date2.js';
+import { d as defineCustomElement$9 } from './form-control-number2.js';
 import { d as defineCustomElement$8 } from './form-control-number-masked2.js';
 import { d as defineCustomElement$7 } from './form-control-select2.js';
 import { d as defineCustomElement$6 } from './form-control-text2.js';
@@ -52,7 +53,7 @@ const BusinessOwnerForm = /*@__PURE__*/ proxyCustomElement(class BusinessOwnerFo
         });
     }
     render() {
-        return (h("owner-form-core", { key: 'd3765b80461f8222189643b378ae5d63886163c3', 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 }));
+        return (h("owner-form-core", { key: '47c36dfc76ac8a108950e17770d1a0fb06fe4e42', 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 }));
     }
 }, [256, "justifi-owner-form", {
         "authToken": [1, "auth-token"],
@@ -74,7 +75,7 @@ function defineCustomElement() {
     if (typeof customElements === "undefined") {
         return;
     }
-    const components = ["justifi-owner-form", "custom-popper", "form-control-date", "form-control-number-masked", "form-control-select", "form-control-text", "form-control-tooltip", "justifi-form-address-fields", "justifi-identity-address-form", "owner-form-core", "owner-form-inputs"];
+    const components = ["justifi-owner-form", "custom-popper", "form-control-date", "form-control-number", "form-control-number-masked", "form-control-select", "form-control-text", "form-control-tooltip", "justifi-form-address-fields", "justifi-identity-address-form", "owner-form-core", "owner-form-inputs"];
     components.forEach(tagName => { switch (tagName) {
         case "justifi-owner-form":
             if (!customElements.get(tagName)) {
@@ -83,10 +84,15 @@ function defineCustomElement() {
             break;
         case "custom-popper":
             if (!customElements.get(tagName)) {
-                defineCustomElement$a();
+                defineCustomElement$b();
             }
             break;
         case "form-control-date":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$a();
+            }
+            break;
+        case "form-control-number":
             if (!customElements.get(tagName)) {
                 defineCustomElement$9();
             }

package/dist/module/package.js

@@ -1,5 +1,5 @@
 const name = "@justifi/webcomponents";
-const version = "6.7.1";
+const version = "6.7.3";
 var webcomponentsPackageJson = {
 	name: name,
 	version: version};

package/dist/module/parts.js

@@ -132,4 +132,4 @@ const orderTypeTerminalOrdersListFilterParam = `${terminalOrdersListFilterParam}
 const createdAfterTerminalOrdersListFilterParam = `${terminalOrdersListFilterParam} created-after-terminal-orders-list-filter-param`;
 const createdBeforeTerminalOrdersListFilterParam = `${terminalOrdersListFilterParam} created-before-terminal-orders-list-filter-param`;
 
-export { buttonLink as $, paginationButtonIconPrevious as A, paginationButtonText as B, paginationButtonIconNext as C, loadingSpinner as D, badgeDark as E, badgeLight as F, badgeInfo as G, badgeWarning as H, badgeDanger as I, badgeSuccess as J, badgeSecondary as K, badgePrimary as L, badge as M, alertDanger as N, inputCheckboxInvalid as O, inputCheckboxCheckedFocused as P, inputCheckboxFocused as Q, inputCheckboxChecked as R, inputCheckbox as S, inputAdornment as T, inputGroup as U, inputInvalidAndFocused as V, billingForm as W, heading3 as X, buttonSecondary as Y, heading4 as Z, image as _, heading1 as a, buttonPrimary as a0, buttonLoading as a1, heading5 as a2, checkoutSummary as a3, checkoutsListFilterMenu as a4, checkoutIdCheckoutsListFilterParam as a5, statusCheckoutsListFilterParam as a6, paymentModeCheckoutsListFilterParam as a7, createdAfterCheckoutsListFilterParam as a8, createdBeforeCheckoutsListFilterParam as a9, tableFootCell as aA, tableEmpty as aB, tableError as aC, dropdownMenuButton as aa, dropdownMenu as ab, getAlternateTableCellPart as ac, paymentsListFilterMenu as ad, paymentIdPaymentsListFilterParam as ae, terminalIdPaymentsListFilterParam as af, paymentStatusPaymentsListFilterParam as ag, createdAfterPaymentsListFilterParam as ah, createdBeforePaymentsListFilterParam as ai, payoutsListFilterMenu as aj, createdAfterPayoutsListFilterParam as ak, createdBeforePayoutsListFilterParam as al, terminalOrdersListFilterMenu as am, orderStatusTerminalOrdersListFilterParam as an, orderTypeTerminalOrdersListFilterParam as ao, createdAfterTerminalOrdersListFilterParam as ap, createdBeforeTerminalOrdersListFilterParam as aq, terminalsListFilterMenu as ar, terminalIdTerminalsListFilterParam as as, terminalOrderIdTerminalsListFilterParam as at, terminalStatusTerminalsListFilterParam as au, tableHead as av, tableHeadRow as aw, tableRow as ax, tableFoot as ay, tableFootRow as az, label as b, inputInvalid as c, inputDisabled as d, inputFocused as e, tooltipIcon as f, tooltip as g, heading2 as h, input as i, tooltipInner as j, textDanger as k, link as l, inputRadioInvalid as m, inputRadioCheckedFocused as n, inputRadioChecked as o, inputRadioFocused as p, inputRadio as q, radioListItem as r, skeleton as s, text as t, card as u, table as v, tableHeadCell as w, tableCell as x, paginationButton as y, paginationButtonDisabled as z };
+export { image as $, paginationButtonIconPrevious as A, paginationButtonText as B, paginationButtonIconNext as C, loadingSpinner as D, badgeDark as E, badgeLight as F, badgeInfo as G, badgeWarning as H, badgeDanger as I, badgeSuccess as J, badgeSecondary as K, badgePrimary as L, badge as M, alertDanger as N, inputCheckboxInvalid as O, inputCheckboxCheckedFocused as P, inputCheckboxFocused as Q, inputCheckboxChecked as R, inputCheckbox as S, inputAdornment as T, inputGroup as U, inputInvalidAndFocused as V, billingForm as W, heading3 as X, buttonSecondary as Y, alert as Z, heading4 as _, heading1 as a, buttonLink as a0, buttonPrimary as a1, buttonLoading as a2, heading5 as a3, checkoutSummary as a4, checkoutsListFilterMenu as a5, checkoutIdCheckoutsListFilterParam as a6, statusCheckoutsListFilterParam as a7, paymentModeCheckoutsListFilterParam as a8, createdAfterCheckoutsListFilterParam as a9, tableFootRow as aA, tableFootCell as aB, tableEmpty as aC, tableError as aD, createdBeforeCheckoutsListFilterParam as aa, dropdownMenuButton as ab, dropdownMenu as ac, getAlternateTableCellPart as ad, paymentsListFilterMenu as ae, paymentIdPaymentsListFilterParam as af, terminalIdPaymentsListFilterParam as ag, paymentStatusPaymentsListFilterParam as ah, createdAfterPaymentsListFilterParam as ai, createdBeforePaymentsListFilterParam as aj, payoutsListFilterMenu as ak, createdAfterPayoutsListFilterParam as al, createdBeforePayoutsListFilterParam as am, terminalOrdersListFilterMenu as an, orderStatusTerminalOrdersListFilterParam as ao, orderTypeTerminalOrdersListFilterParam as ap, createdAfterTerminalOrdersListFilterParam as aq, createdBeforeTerminalOrdersListFilterParam as ar, terminalsListFilterMenu as as, terminalIdTerminalsListFilterParam as at, terminalOrderIdTerminalsListFilterParam as au, terminalStatusTerminalsListFilterParam as av, tableHead as aw, tableHeadRow as ax, tableRow as ay, tableFoot as az, label as b, inputInvalid as c, inputDisabled as d, inputFocused as e, tooltipIcon as f, tooltip as g, heading2 as h, input as i, tooltipInner as j, textDanger as k, link as l, inputRadioInvalid as m, inputRadioCheckedFocused as n, inputRadioChecked as o, inputRadioFocused as p, inputRadio as q, radioListItem as r, skeleton as s, text as t, card as u, table as v, tableHeadCell as w, tableCell as x, paginationButton as y, paginationButtonDisabled as z };

package/dist/module/payment-details-core2.js

@@ -64,16 +64,16 @@ const PaymentDetailsCore = /*@__PURE__*/ proxyCustomElement(class PaymentDetails
         return this.payment.status;
     }
     render() {
-        return (h(StyledHost, { key: '897f110cc1e602d25eaed1e4c7ff633761e11f8a' }, this.loading && h(PaymentDetailsLoading, { key: '2390e14caa62f12f4adcfdb50589bf17d854f853' }), !this.loading && this.errorMessage && ErrorState(this.errorMessage), !this.loading && !this.errorMessage &&
-            this.payment && (h("justifi-details", { key: 'da4af7a21cc4920dc3b8d72166e0d9710a8e3d14', "error-message": this.errorMessage }, h(EntityHeadInfo, { key: '6b72f81416a4d1f4be88660d86d4f7cd178bf7c1', slot: "head-info", badge: (h("div", { class: "d-flex gap-1" }, MapPaymentStatusToBadge(this.PaymentStatus), this.payment.expedited ? (h(Badge, { variant: BadgeVariant.WARNING, title: "Expedited", text: "Expedited" })) : null)), title: this.payment.formattedPaymentAmount(this.payment.amount) }, h(EntityHeadInfoItem, { key: '8335dd749f3dc4224e605ad8f8de0efcb85ac6f1', classes: "border-1 border-end", title: "Updated At", value: `${formatDate(this.payment.updated_at)} ${formatTime(this.payment.updated_at)}` }), h(EntityHeadInfoItem, { key: '7826a2307a07a7c4618c5072de941c92be442919', classes: "border-1 border-end", title: "Created At", value: `${formatDate(this.payment.created_at)} ${formatTime(this.payment.created_at)}` }), h(EntityHeadInfoItem, { key: 'a9d7dc401d17f3e54c210dc43d575d7aa685cebb', title: "ID", value: this.payment.id })), h("div", { key: '6c8a9d26224eb8908d3f9f0d2481a9b0291ec0e8', slot: 'detail-sections' }, h(DetailSectionTitle, { key: '275233e1c562417f4c62f19d6e486870c75f509e', sectionTitle: "Details" }), h("div", { key: '8b64a27dcf138499d05f1120b52127d056adb3ef', class: "d-flex flex-column gap-2 w-100" }, h(DetailItem, { key: '53fd8b67735b9fd79b7e1d0c6889b49d05561d2c', title: "Amount", value: this.payment.formattedPaymentAmount(this.payment.amount) }), h(DetailItem, { key: 'f985817210327ddb08f6995a6bb74749c74ca412', title: "Fees", value: this.payment.formattedPaymentAmount(this.payment.fee_amount) }), h(DetailItem, { key: '035ebe3c300b343baf1a6e1358ff360eb5a7ebdc', title: "Refunded", value: this.payment.formattedPaymentAmount(this.payment.amount_refunded) }), h(DetailItem, { key: '5476a76cb3c7f0b4f06c3d0cbc6c2b31c2e6aa30', title: "Net", value: this.payment.formattedPaymentAmount(this.payment.balance) }), h(DetailItem, { key: '93ec44f691a0103760552105b14e63e65d876cc2', title: "Status", value: MapPaymentStatusToBadge(this.PaymentStatus) }), h(DetailItem, { key: 'd25eb1e7c904b4de2e713c7e5a9ac9dfc6932725', title: "Payment ID", value: this.payment.id }), h(DetailItem, { key: '0f79064481e04ee543895b8c5e34b010aa47cf10', title: "Processing Fees", value: this.payment.formattedPaymentAmount(this.payment.fee_amount) }), h(DetailItem, { key: 'bfab2390b0828d8186490b929c9208a2174b194e', title: "Statement Descriptor", value: this.payment.statement_descriptor }), h(DetailItem, { key: 'd0bb93f953fa340fbc8cae5a95c8869aa368740c', title: "Description", value: this.payment.description }), h(DetailItem, { key: 'b4e838f2ad05e26e38dfff7d4497a59a18f03515', title: "Expedited", value: this.payment.expedited ? 'Yes' : 'No' })), this.payment.payment_method.card && [
-            h(DetailSectionTitle, { key: '1aee93fd414a6b0710ee9123eaa2476e8d9c1b91', sectionTitle: "Payment Method" }),
-            h("div", { key: '4af47995db0b4dd4eacb33275304ada1d5f5a614', class: "d-flex flex-column gap-2 w-100" }, h(DetailItem, { key: '028460cb83da1828def26a84af5c03aafc69881b', title: "ID", value: this.payment.payment_method.card.id }), h(DetailItem, { key: '6c0108fdc8062a8c97ad4261fb5235d10a255ca1', title: "Payment Type", value: "Card" }), h(DetailItem, { key: '036bb0a94869285ce164c580cf6a51a74f6e6a98', title: "Last 4 Numbers", value: this.payment.payment_method.lastFourDigits }), h(DetailItem, { key: '354f34777d3e302aaa42843bd2a473490d54af81', title: "Brand", value: snakeCaseToHumanReadable(this.payment.payment_method.card.brand) }), h(DetailItem, { key: 'cb00b1f1197157cd887b32ba045f7c497a0d82f1', title: "Cardholder", value: this.payment.payment_method.payersName }))
+        return (h(StyledHost, { key: '01401ded429f9fe2c83941c717923953204218eb' }, this.loading && h(PaymentDetailsLoading, { key: '505543ed71128164ba7d5ac1ca562357951360e4' }), !this.loading && this.errorMessage && ErrorState(this.errorMessage), !this.loading && !this.errorMessage &&
+            this.payment && (h("justifi-details", { key: 'd62ed57c75d2f9d6b32a4d59b96b2b9e8e9939d7', errorMessage: this.errorMessage }, h(EntityHeadInfo, { key: 'ee1f43cb2b1192ae37d391018f7d804e6b0fa0d9', slot: "head-info", badge: (h("div", { class: "d-flex gap-1" }, MapPaymentStatusToBadge(this.PaymentStatus), this.payment.expedited ? (h(Badge, { variant: BadgeVariant.WARNING, title: "Expedited", text: "Expedited" })) : null)), title: this.payment.formattedPaymentAmount(this.payment.amount) }, h(EntityHeadInfoItem, { key: '260a255b690bd783e8fc68c82d90d7a4fb7963de', classes: "border-1 border-end", title: "Updated At", value: `${formatDate(this.payment.updated_at)} ${formatTime(this.payment.updated_at)}` }), h(EntityHeadInfoItem, { key: 'fd897be772f89d6844c47e14ab054527c09f3eab', classes: "border-1 border-end", title: "Created At", value: `${formatDate(this.payment.created_at)} ${formatTime(this.payment.created_at)}` }), h(EntityHeadInfoItem, { key: 'bf98891cc4e13c4e7fd29e01928d024af21d6053', title: "ID", value: this.payment.id })), h("div", { key: '3f06dd5c5b3b1d6f1dca539bfdb52a72c8df020c', slot: 'detail-sections' }, h(DetailSectionTitle, { key: '6164cefcc2fb61389082616fdc4fc7ec7b8d1f33', sectionTitle: "Details" }), h("div", { key: '4df8363d5c68b58fe54660aa7e6875f842a008be', class: "d-flex flex-column gap-2 w-100" }, h(DetailItem, { key: '6fe620cb5ae5d4632bf95c952df264e5699da010', title: "Amount", value: this.payment.formattedPaymentAmount(this.payment.amount) }), h(DetailItem, { key: 'f70f86511b49c5b08fb28f19cf03f89860dc9095', title: "Fees", value: this.payment.formattedPaymentAmount(this.payment.fee_amount) }), h(DetailItem, { key: 'a1bd126f314210ec7201cb19e962e4b7ee9c99e8', title: "Refunded", value: this.payment.formattedPaymentAmount(this.payment.amount_refunded) }), h(DetailItem, { key: '5e785a7a2a77c6b5d6e3a30eacd191ac0a815e65', title: "Net", value: this.payment.formattedPaymentAmount(this.payment.balance) }), h(DetailItem, { key: '924f83dd7a450d7417dfaa42ef885dc540745138', title: "Status", value: MapPaymentStatusToBadge(this.PaymentStatus) }), h(DetailItem, { key: '5a321c5f4b2920452414b97bc6c9a780a298716d', title: "Payment ID", value: this.payment.id }), h(DetailItem, { key: '24e473b3f2a33c82b8a4737f4ee7a55ba8d674d0', title: "Processing Fees", value: this.payment.formattedPaymentAmount(this.payment.fee_amount) }), h(DetailItem, { key: '3c4f1e7ff03b2faa771cd286f80347af9829329f', title: "Statement Descriptor", value: this.payment.statement_descriptor }), h(DetailItem, { key: '519b730d2f6d79c9de9bcff6958921dc9a0973d2', title: "Description", value: this.payment.description }), h(DetailItem, { key: 'a970221ae61ce83d25feb452911e037fa83f51e5', title: "Expedited", value: this.payment.expedited ? 'Yes' : 'No' })), this.payment.payment_method.card && [
+            h(DetailSectionTitle, { key: '35e8219f436e98343714559d86b2ac0757739c45', sectionTitle: "Payment Method" }),
+            h("div", { key: '1a65c7831e961a1acc877726eff7032fb0de221f', class: "d-flex flex-column gap-2 w-100" }, h(DetailItem, { key: '2bb98d67b276b12685a2ada8bcd2e4c62c06485f', title: "ID", value: this.payment.payment_method.card.id }), h(DetailItem, { key: '9285850e5c9d91eb6066c1774fdb6595c0c6e3a2', title: "Payment Type", value: "Card" }), h(DetailItem, { key: 'd1d05ea920ee28ab34f0e6ad390741becb842651', title: "Last 4 Numbers", value: this.payment.payment_method.lastFourDigits }), h(DetailItem, { key: 'de350bf4017d16a7bcead7a1c43413f6937a9645', title: "Brand", value: snakeCaseToHumanReadable(this.payment.payment_method.card.brand) }), h(DetailItem, { key: '838b7f324a7bd3efb30958bd375c4d1363940884', title: "Cardholder", value: this.payment.payment_method.payersName }))
         ], this.payment.payment_method.bank_account && [
-            h(DetailSectionTitle, { key: 'a3552321a808a9925de285734c3964971ebd1fd0', sectionTitle: "Payment Method" }),
-            h("div", { key: '2839e5f7d22262403897030396cc967e699c6004', class: "d-flex flex-column gap-2 w-100" }, h(DetailItem, { key: 'a553c56003fd661f070441e0c4cc54e66f755079', title: "ID", value: this.payment.payment_method.bank_account.id }), h(DetailItem, { key: 'e7ea5f7cac2c0af4c7007aa7e51fb39b8148799c', title: "Last 4 Numbers", value: this.payment.last_four_digits }), h(DetailItem, { key: 'c97b78da4ad5f1ff60febed316cf742d770dd5ca', title: "Bank Name", value: this.payment.payment_method.bank_account.brand }), h(DetailItem, { key: 'f6864e9c96af985f2f016c8e0e6da79ee8072f2c', title: "Account Owner", value: this.payment.payment_method.payersName }))
+            h(DetailSectionTitle, { key: '9dcefb65517a5f275ba332e7bde20ea8a4ab7408', sectionTitle: "Payment Method" }),
+            h("div", { key: 'd154969622428be395ab6d5f31e038e1ec1e7bb3', class: "d-flex flex-column gap-2 w-100" }, h(DetailItem, { key: '534962a6c8bef47c112c87876c34dd11c0cad077', title: "ID", value: this.payment.payment_method.bank_account.id }), h(DetailItem, { key: 'deb0fdcd23d235908c0094fdc0037d0ec768db7d', title: "Last 4 Numbers", value: this.payment.last_four_digits }), h(DetailItem, { key: '0638bbac31132f4085384d93eb4e43e6044f428c', title: "Bank Name", value: this.payment.payment_method.bank_account.brand }), h(DetailItem, { key: '8f9341da52d7e9a634431879475294d03d64eebb', title: "Account Owner", value: this.payment.payment_method.payersName }))
         ], this.payment.metadata && [
-            h(DetailSectionTitle, { key: 'f78d841cdcd9ab97b3de6a9d10777f93e0e44606', sectionTitle: 'Metadata' }),
-            h("div", { key: '32eb14cbb95287318d1024389c6bf59ceaa2733a', class: "d-table gap-2 w-100" }, h(CodeBlock, { key: '9acf835dba75070dac3cdfa4f19ea5f1d13e68a4', metadata: this.payment.metadata }))
+            h(DetailSectionTitle, { key: '9a0ae5dfd35fcda4678dffea0336ea913ea0d0e5', sectionTitle: 'Metadata' }),
+            h("div", { key: '116cc3ebbc429a92bd57bf44b1c1e34ddcaa40ba', class: "d-table gap-2 w-100" }, h(CodeBlock, { key: '8133cc8072884e20bece0d7ef3e06838e83924f9', metadata: this.payment.metadata }))
         ])))));
     }
     static get watchers() { return {

package/dist/module/payment-method-option.js

@@ -16,7 +16,7 @@ const PaymentMethodOption$1 = /*@__PURE__*/ proxyCustomElement(class PaymentMeth
         this.__attachShadow();
     }
     render() {
-        return (h(StyledHost, { key: 'def03655a2fec491cdcf915e86ce076fbce3fe2c', class: "payment-method" }, h("div", { key: '774b1eddeb552374158a085152d78f03345a56a0', class: "radio-list-item p-3", part: radioListItem, onClick: this.clickHandler, hidden: this.radioButtonHidden }, h("form-control-radio", { key: '24dbc2f35760401d64eeb252b178ede3fb0631fe', name: "paymentMethodType", value: this.paymentMethodOptionId, checked: this.isSelected, label: this.label }))));
+        return (h(StyledHost, { key: 'e105805d0ea42f17a24694a52595bd8114f214f4', class: "payment-method" }, h("div", { key: '2b61c553a8c11fb1db726ac049de39d53f84a51e', class: "radio-list-item p-3", part: radioListItem, onClick: this.clickHandler, hidden: this.radioButtonHidden }, h("form-control-radio", { key: 'e3987b51254c951759a5366b719ede186347d94f', name: "paymentMethodType", value: this.paymentMethodOptionId, checked: this.isSelected, label: this.label }))));
     }
 }, [257, "payment-method-option", {
         "paymentMethodOptionId": [1, "payment-method-option-id"],

package/dist/module/payment-provisioning-core.js

@@ -8,16 +8,18 @@ import './details.js';
 import './event-types.js';
 import './justifi-radio-list-item2.js';
 import { a as BusinessFormClickActions } from './event-types2.js';
-import { d as defineCustomElement$t } from './bank-account-document-inputs.js';
-import { d as defineCustomElement$s } from './bank-account-form-inputs2.js';
-import { d as defineCustomElement$r } from './bank-account-form-inputs-canada2.js';
-import { d as defineCustomElement$q } from './bank-account-read-only-value2.js';
-import { d as defineCustomElement$p } from './business-documents-on-file2.js';
-import { d as defineCustomElement$o } from './custom-popper2.js';
-import { d as defineCustomElement$n } from './form-control-checkbox2.js';
-import { d as defineCustomElement$m } from './form-control-date2.js';
-import { d as defineCustomElement$l } from './form-control-file2.js';
-import { d as defineCustomElement$k } from './form-control-monetary-provisioning2.js';
+import { P as PaymentProvisioningLoading } from './payment-provisioning-loading.js';
+import { d as defineCustomElement$u } from './bank-account-document-inputs.js';
+import { d as defineCustomElement$t } from './bank-account-form-inputs2.js';
+import { d as defineCustomElement$s } from './bank-account-form-inputs-canada2.js';
+import { d as defineCustomElement$r } from './bank-account-read-only-value2.js';
+import { d as defineCustomElement$q } from './business-documents-on-file2.js';
+import { d as defineCustomElement$p } from './custom-popper2.js';
+import { d as defineCustomElement$o } from './form-control-checkbox2.js';
+import { d as defineCustomElement$n } from './form-control-date2.js';
+import { d as defineCustomElement$m } from './form-control-file2.js';
+import { d as defineCustomElement$l } from './form-control-monetary-provisioning2.js';
+import { d as defineCustomElement$k } from './form-control-number2.js';
 import { d as defineCustomElement$j } from './form-control-number-masked2.js';
 import { d as defineCustomElement$i } from './form-control-select2.js';
 import { d as defineCustomElement$h } from './form-control-text2.js';
@@ -48,6 +50,7 @@ const PaymentProvisioningCore = /*@__PURE__*/ proxyCustomElement(class PaymentPr
         this.errorEvent = createEvent(this, "error-event", 7);
         this.submitEvent = createEvent(this, "submit-event", 7);
         this.loading = false;
+        this.businessLoading = true;
         this.businessProvisioned = false;
         this.currentStep = 0;
         this.country = CountryCode.USA;
@@ -66,6 +69,7 @@ const PaymentProvisioningCore = /*@__PURE__*/ proxyCustomElement(class PaymentPr
                                 severity: ComponentErrorSeverity.INFO,
                             });
                         }
+                        this.businessLoading = false;
                         resolve();
                     },
                     onError: ({ error, code, severity }) => {
@@ -74,6 +78,7 @@ const PaymentProvisioningCore = /*@__PURE__*/ proxyCustomElement(class PaymentPr
                             errorCode: code,
                             severity: severity
                         });
+                        this.businessLoading = false;
                         resolve();
                     }
                 });
@@ -116,8 +121,12 @@ const PaymentProvisioningCore = /*@__PURE__*/ proxyCustomElement(class PaymentPr
         this.postProvisioningData();
     }
     async componentWillLoad() {
-        if (this.getBusiness)
+        if (this.getBusiness) {
             await this.setBusinessProvisioned();
+        }
+        else {
+            this.businessLoading = false;
+        }
         this.refs = [
             this.coreInfoRef,
             this.legalAddressRef,
@@ -138,13 +147,16 @@ const PaymentProvisioningCore = /*@__PURE__*/ proxyCustomElement(class PaymentPr
         return this.refs.length - 1;
     }
     get stepCounter() {
-        return `${this.currentStep + 1} of ${this.totalSteps + 1}`;
+        return `Step ${this.currentStep + 1} of ${this.totalSteps + 1}`;
     }
     handleFormLoading(event) {
         this.loading = event.detail;
     }
     render() {
-        return (h(StyledHost, { key: '058aaacf6c0fe49ef24e50b575247efb470c4254' }, h("div", { key: 'd4d329af8f8e4ccd8e7ddb2d7050797fe9ec5824', class: 'row gap-3' }, h(Header1, { key: 'd2358393171311c9dd6b03ca3509e2775d784e4c', text: this.formTitle }), h("justifi-payment-provisioning-form-steps", { key: 'd7a8767e276c28c2ca0413ac0d1195cb98b9fe0b', businessId: this.businessId, authToken: this.authToken, refs: this.refs, currentStep: this.currentStep, allowOptionalFields: this.allowOptionalFields, country: this.country, handleFormLoading: this.handleFormLoading }), h("div", { key: '37dc95f2e8785c0e2ac969294b86318d81237b0b', class: 'd-flex justify-content-between align-items-center' }, h("div", { key: '54e6fe77e63faf3b2ae725c349748cf9c34322b0', class: 'd-flex align-items-center', part: text }, this.stepCounter), h("justifi-payment-provisioning-form-buttons", { key: 'aa3e1c621248f1daa48ae7e66dd76c03e0a9eb3c', currentStep: this.currentStep, totalSteps: this.totalSteps, formLoading: this.loading, formDisabled: this.formDisabled, previousStepButtonOnClick: this.previousStepButtonOnClick, nextStepButtonOnClick: this.nextStepButtonOnClick })))));
+        if (this.businessLoading) {
+            return (h(StyledHost, null, h(PaymentProvisioningLoading, null)));
+        }
+        return (h(StyledHost, null, h("div", { class: 'row gap-3' }, h(Header1, { text: this.formTitle }), h("justifi-payment-provisioning-form-steps", { businessId: this.businessId, authToken: this.authToken, refs: this.refs, currentStep: this.currentStep, allowOptionalFields: this.allowOptionalFields, country: this.country, handleFormLoading: this.handleFormLoading }), h("div", { class: 'd-flex justify-content-between align-items-center' }, h("div", { class: 'd-flex align-items-center', part: text }, this.stepCounter), h("justifi-payment-provisioning-form-buttons", { currentStep: this.currentStep, totalSteps: this.totalSteps, formLoading: this.loading, formDisabled: this.formDisabled, previousStepButtonOnClick: this.previousStepButtonOnClick, nextStepButtonOnClick: this.nextStepButtonOnClick })))));
     }
 }, [256, "justifi-payment-provisioning-core", {
         "businessId": [1, "business-id"],
@@ -154,6 +166,7 @@ const PaymentProvisioningCore = /*@__PURE__*/ proxyCustomElement(class PaymentPr
         "getBusiness": [16],
         "postProvisioning": [16],
         "loading": [32],
+        "businessLoading": [32],
         "businessProvisioned": [32],
         "currentStep": [32],
         "errorMessage": [32],
@@ -163,7 +176,7 @@ function defineCustomElement() {
     if (typeof customElements === "undefined") {
         return;
     }
-    const components = ["justifi-payment-provisioning-core", "bank-account-document-form-inputs", "bank-account-form-inputs", "bank-account-form-inputs-canada", "bank-account-read-only-value", "business-documents-on-file", "custom-popper", "form-control-checkbox", "form-control-date", "form-control-file", "form-control-monetary-provisioning", "form-control-number-masked", "form-control-select", "form-control-text", "form-control-tooltip", "justifi-additional-questions-form-step", "justifi-business-bank-account-form-step", "justifi-business-core-info-form-step", "justifi-business-owners-form-step", "justifi-business-representative-form-inputs", "justifi-business-representative-form-step", "justifi-business-terms-conditions-form-step", "justifi-form-address-fields", "justifi-identity-address-form", "justifi-legal-address-form-step", "justifi-owner-form", "justifi-payment-provisioning-form-buttons", "justifi-payment-provisioning-form-steps", "owner-form-core", "owner-form-inputs"];
+    const components = ["justifi-payment-provisioning-core", "bank-account-document-form-inputs", "bank-account-form-inputs", "bank-account-form-inputs-canada", "bank-account-read-only-value", "business-documents-on-file", "custom-popper", "form-control-checkbox", "form-control-date", "form-control-file", "form-control-monetary-provisioning", "form-control-number", "form-control-number-masked", "form-control-select", "form-control-text", "form-control-tooltip", "justifi-additional-questions-form-step", "justifi-business-bank-account-form-step", "justifi-business-core-info-form-step", "justifi-business-owners-form-step", "justifi-business-representative-form-inputs", "justifi-business-representative-form-step", "justifi-business-terms-conditions-form-step", "justifi-form-address-fields", "justifi-identity-address-form", "justifi-legal-address-form-step", "justifi-owner-form", "justifi-payment-provisioning-form-buttons", "justifi-payment-provisioning-form-steps", "owner-form-core", "owner-form-inputs"];
     components.forEach(tagName => { switch (tagName) {
         case "justifi-payment-provisioning-core":
             if (!customElements.get(tagName)) {
@@ -172,50 +185,55 @@ function defineCustomElement() {
             break;
         case "bank-account-document-form-inputs":
             if (!customElements.get(tagName)) {
-                defineCustomElement$t();
+                defineCustomElement$u();
             }
             break;
         case "bank-account-form-inputs":
             if (!customElements.get(tagName)) {
-                defineCustomElement$s();
+                defineCustomElement$t();
             }
             break;
         case "bank-account-form-inputs-canada":
             if (!customElements.get(tagName)) {
-                defineCustomElement$r();
+                defineCustomElement$s();
             }
             break;
         case "bank-account-read-only-value":
             if (!customElements.get(tagName)) {
-                defineCustomElement$q();
+                defineCustomElement$r();
             }
             break;
         case "business-documents-on-file":
             if (!customElements.get(tagName)) {
-                defineCustomElement$p();
+                defineCustomElement$q();
             }
             break;
         case "custom-popper":
             if (!customElements.get(tagName)) {
-                defineCustomElement$o();
+                defineCustomElement$p();
             }
             break;
         case "form-control-checkbox":
             if (!customElements.get(tagName)) {
-                defineCustomElement$n();
+                defineCustomElement$o();
             }
             break;
         case "form-control-date":
             if (!customElements.get(tagName)) {
-                defineCustomElement$m();
+                defineCustomElement$n();
             }
             break;
         case "form-control-file":
             if (!customElements.get(tagName)) {
-                defineCustomElement$l();
+                defineCustomElement$m();
             }
             break;
         case "form-control-monetary-provisioning":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$l();
+            }
+            break;
+        case "form-control-number":
             if (!customElements.get(tagName)) {
                 defineCustomElement$k();
             }

package/dist/module/payment-provisioning-form-buttons.js

@@ -23,7 +23,7 @@ const PaymentProvisioningFormButtons = /*@__PURE__*/ proxyCustomElement(class Pa
         return this.currentStep === this.totalSteps;
     }
     render() {
-        return (h("div", { key: 'e13d3613af061d0067d1dbd84b6c3aebfc782aad', class: 'd-flex gap-2' }, h(Button, { key: '7b422ce77e13872f3dbd622574bce0e3e6e9c2ed', variant: "secondary", type: "button", onClick: () => this.previousStepButtonOnClick(), disabled: this.formDisabled, hidden: !this.showPreviousStepButton }, "Previous"), h(Button, { key: 'ea1242fdccb0b0af2438f4aaab91e3e17a607ef7', variant: "primary", type: "button", onClick: (e) => this.nextStepButtonOnClick(e, BusinessFormClickActions.nextStep), disabled: this.formDisabled, isLoading: this.formLoading, hidden: !this.showNextStepButton }, "Next"), h(Button, { key: '0c323f533ea84608dcdabb885f69d71a81ec684b', variant: "primary", type: "submit", onClick: (e) => this.nextStepButtonOnClick(e, BusinessFormClickActions.submit), disabled: this.formDisabled, isLoading: this.formLoading, hidden: !this.showSubmitButton }, "Submit")));
+        return (h("div", { key: '53ba6c809e1968712b333f4bcf2798dbca186ddb', class: 'd-flex gap-2' }, h(Button, { key: 'b45c60083ccf6589cae0c63ce6b66c18da340dc7', variant: "secondary", type: "button", onClick: () => this.previousStepButtonOnClick(), disabled: this.formDisabled, hidden: !this.showPreviousStepButton }, "Previous"), h(Button, { key: '27372798da0276de44d1563a4688486e7cc91d64', variant: "primary", type: "button", onClick: (e) => this.nextStepButtonOnClick(e, BusinessFormClickActions.nextStep), disabled: this.formDisabled, isLoading: this.formLoading, hidden: !this.showNextStepButton }, "Next"), h(Button, { key: '8bc14ca8fe951caf276f8ed03e502486e11acbe2', variant: "primary", type: "submit", onClick: (e) => this.nextStepButtonOnClick(e, BusinessFormClickActions.submit), disabled: this.formDisabled, isLoading: this.formLoading, hidden: !this.showSubmitButton }, "Submit")));
     }
 }, [256, "justifi-payment-provisioning-form-buttons", {
         "currentStep": [2, "current-step"],

package/dist/module/payment-provisioning-form-steps.js

@@ -1,15 +1,16 @@
 import { proxyCustomElement, HTMLElement, h } from '@stencil/core/internal/client';
 import { a as CountryCode } from './Business.js';
-import { d as defineCustomElement$r } from './bank-account-document-inputs.js';
-import { d as defineCustomElement$q } from './bank-account-form-inputs2.js';
-import { d as defineCustomElement$p } from './bank-account-form-inputs-canada2.js';
-import { d as defineCustomElement$o } from './bank-account-read-only-value2.js';
-import { d as defineCustomElement$n } from './business-documents-on-file2.js';
-import { d as defineCustomElement$m } from './custom-popper2.js';
-import { d as defineCustomElement$l } from './form-control-checkbox2.js';
-import { d as defineCustomElement$k } from './form-control-date2.js';
-import { d as defineCustomElement$j } from './form-control-file2.js';
-import { d as defineCustomElement$i } from './form-control-monetary-provisioning2.js';
+import { d as defineCustomElement$s } from './bank-account-document-inputs.js';
+import { d as defineCustomElement$r } from './bank-account-form-inputs2.js';
+import { d as defineCustomElement$q } from './bank-account-form-inputs-canada2.js';
+import { d as defineCustomElement$p } from './bank-account-read-only-value2.js';
+import { d as defineCustomElement$o } from './business-documents-on-file2.js';
+import { d as defineCustomElement$n } from './custom-popper2.js';
+import { d as defineCustomElement$m } from './form-control-checkbox2.js';
+import { d as defineCustomElement$l } from './form-control-date2.js';
+import { d as defineCustomElement$k } from './form-control-file2.js';
+import { d as defineCustomElement$j } from './form-control-monetary-provisioning2.js';
+import { d as defineCustomElement$i } from './form-control-number2.js';
 import { d as defineCustomElement$h } from './form-control-number-masked2.js';
 import { d as defineCustomElement$g } from './form-control-select2.js';
 import { d as defineCustomElement$f } from './form-control-text2.js';
@@ -50,7 +51,7 @@ const PaymentProvisioningFormSteps = /*@__PURE__*/ proxyCustomElement(class Paym
         return this.componentStepMapping[this.currentStep]();
     }
     render() {
-        return (h("div", { key: 'dcf3f283bae7de00311f35e41b8d803196f50d49', class: 'col-12 mb-4' }, this.currentStepComponent));
+        return (h("div", { key: 'ff7c9e688009383fdbe18c9824fa578d2338900c', class: 'col-12 mb-4' }, this.currentStepComponent));
     }
 }, [256, "justifi-payment-provisioning-form-steps", {
         "businessId": [1, "business-id"],
@@ -65,7 +66,7 @@ function defineCustomElement() {
     if (typeof customElements === "undefined") {
         return;
     }
-    const components = ["justifi-payment-provisioning-form-steps", "bank-account-document-form-inputs", "bank-account-form-inputs", "bank-account-form-inputs-canada", "bank-account-read-only-value", "business-documents-on-file", "custom-popper", "form-control-checkbox", "form-control-date", "form-control-file", "form-control-monetary-provisioning", "form-control-number-masked", "form-control-select", "form-control-text", "form-control-tooltip", "justifi-additional-questions-form-step", "justifi-business-bank-account-form-step", "justifi-business-core-info-form-step", "justifi-business-owners-form-step", "justifi-business-representative-form-inputs", "justifi-business-representative-form-step", "justifi-business-terms-conditions-form-step", "justifi-form-address-fields", "justifi-identity-address-form", "justifi-legal-address-form-step", "justifi-owner-form", "owner-form-core", "owner-form-inputs"];
+    const components = ["justifi-payment-provisioning-form-steps", "bank-account-document-form-inputs", "bank-account-form-inputs", "bank-account-form-inputs-canada", "bank-account-read-only-value", "business-documents-on-file", "custom-popper", "form-control-checkbox", "form-control-date", "form-control-file", "form-control-monetary-provisioning", "form-control-number", "form-control-number-masked", "form-control-select", "form-control-text", "form-control-tooltip", "justifi-additional-questions-form-step", "justifi-business-bank-account-form-step", "justifi-business-core-info-form-step", "justifi-business-owners-form-step", "justifi-business-representative-form-inputs", "justifi-business-representative-form-step", "justifi-business-terms-conditions-form-step", "justifi-form-address-fields", "justifi-identity-address-form", "justifi-legal-address-form-step", "justifi-owner-form", "owner-form-core", "owner-form-inputs"];
     components.forEach(tagName => { switch (tagName) {
         case "justifi-payment-provisioning-form-steps":
             if (!customElements.get(tagName)) {
@@ -74,50 +75,55 @@ function defineCustomElement() {
             break;
         case "bank-account-document-form-inputs":
             if (!customElements.get(tagName)) {
-                defineCustomElement$r();
+                defineCustomElement$s();
             }
             break;
         case "bank-account-form-inputs":
             if (!customElements.get(tagName)) {
-                defineCustomElement$q();
+                defineCustomElement$r();
             }
             break;
         case "bank-account-form-inputs-canada":
             if (!customElements.get(tagName)) {
-                defineCustomElement$p();
+                defineCustomElement$q();
             }
             break;
         case "bank-account-read-only-value":
             if (!customElements.get(tagName)) {
-                defineCustomElement$o();
+                defineCustomElement$p();
             }
             break;
         case "business-documents-on-file":
             if (!customElements.get(tagName)) {
-                defineCustomElement$n();
+                defineCustomElement$o();
             }
             break;
         case "custom-popper":
             if (!customElements.get(tagName)) {
-                defineCustomElement$m();
+                defineCustomElement$n();
             }
             break;
         case "form-control-checkbox":
             if (!customElements.get(tagName)) {
-                defineCustomElement$l();
+                defineCustomElement$m();
             }
             break;
         case "form-control-date":
             if (!customElements.get(tagName)) {
-                defineCustomElement$k();
+                defineCustomElement$l();
             }
             break;
         case "form-control-file":
             if (!customElements.get(tagName)) {
-                defineCustomElement$j();
+                defineCustomElement$k();
             }
             break;
         case "form-control-monetary-provisioning":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$j();
+            }
+            break;
+        case "form-control-number":
             if (!customElements.get(tagName)) {
                 defineCustomElement$i();
             }

package/dist/module/payments-list-core2.js

@@ -11,8 +11,8 @@ import { T as Table, a as TableWrapper, b as TableComponent, c as TableHead, d a
 import { T as TableClickActions } from './event-types.js';
 import './justifi-radio-list-item2.js';
 import { M as MapPaymentStatusToBadge } from './payments-status.js';
-import { e as convertToLocal } from './utils2.js';
-import { w as tableHeadCell, ac as getAlternateTableCellPart } from './parts.js';
+import { h as convertToLocal } from './utils2.js';
+import { w as tableHeadCell, ad as getAlternateTableCellPart } from './parts.js';
 import { o as onQueryParamsChange, g as getRequestParams } from './payments-list-params-state.js';
 import { d as defineCustomElement$1 } from './pagination-menu2.js';
 
@@ -140,7 +140,7 @@ const PaymentsListCore = /*@__PURE__*/ proxyCustomElement(class PaymentsListCore
         return !this.showEmptyState && !this.showErrorState && !this.loading;
     }
     render() {
-        return (h(TableWrapper, { key: 'd1835e29713b4e898eb0360bfcbd66f0bea0adf2' }, h(TableComponent, { key: 'd017b046fba909fa4f75ef397864f88efcb53c44' }, h(TableHead, { key: 'ecb800c2cea73b3bebcc0f3d712c3fe2f2bc984b' }, h(TableHeadRow, { key: '1d1265e3fa2800020e5bad43e8f388d440d0edca' }, this.paymentsTable.columnData.map((column) => column))), h(TableBody, { key: 'cb1db03ab0d90119a50ce72c8b266cf8b842fd00' }, h(TableLoadingState, { key: 'd813568fc6c46f45cea6c569cb9718794f08363c', columnSpan: this.paymentsTable.columnData.length, isLoading: this.loading }), h(TableEmptyState, { key: '7098219b76eacd775fc9e6bd23405fe4474f1ee4', isEmpty: this.showEmptyState, columnSpan: this.paymentsTable.columnData.length }), h(TableErrorState, { key: '7e9eb58438419f3cb52830ddba399aaba228962e', columnSpan: this.paymentsTable.columnData.length, errorMessage: this.errorMessage }), this.showRowData && this.paymentsTable.rowData.map((data, index) => (h(TableRow, { "data-test-id": "table-row", "data-row-entity-id": this.entityId[index], onClick: this.rowClickHandler }, data)))), this.paging && (h(TableFoot, { key: '4c47f2929bd54d87fe9c9d85e25ac2ff73fb3312' }, h(TableFootRow, { key: '749e0e604319a50388ae2357fc9b9a6c55f958dd' }, h(TableFootCell, { key: '7d411e1f8b95d72cd30f8348c7a9bc831ba58540', colSpan: this.paymentsTable.columnData.length }, h("pagination-menu", { key: '66399288373d1539bd8f9e09bc02513b84d7ce82', paging: Object.assign(Object.assign({}, this.paging), { handleClickPrevious: this.handleClickPrevious, handleClickNext: this.handleClickNext }) }))))))));
+        return (h(TableWrapper, { key: 'eb58d94f9f02d02bf56853584b2b12aee0f0dca9' }, h(TableComponent, { key: '7e7c87dcf9e29d794c08e92651e1193fe3d7c43d' }, h(TableHead, { key: '72b94512ebd04d2e335ab367243ff6592498e8d4' }, h(TableHeadRow, { key: '6bdadafc7fd2c2a4923863e210200c7f420b1fca' }, this.paymentsTable.columnData.map((column) => column))), h(TableBody, { key: '1caebc2a526ba1ffd644ef96b405fb24e91d34e1' }, h(TableLoadingState, { key: '4044eeb77a3d4fff96581606e0ea8d2b1b13e361', columnSpan: this.paymentsTable.columnData.length, isLoading: this.loading }), h(TableEmptyState, { key: '32a36ee549168ca1e2004c6a99536e74be682b82', isEmpty: this.showEmptyState, columnSpan: this.paymentsTable.columnData.length }), h(TableErrorState, { key: 'e758a6866400f50a092750ee44a0f3119b3aeb1f', columnSpan: this.paymentsTable.columnData.length, errorMessage: this.errorMessage }), this.showRowData && this.paymentsTable.rowData.map((data, index) => (h(TableRow, { "data-test-id": "table-row", "data-row-entity-id": this.entityId[index], onClick: this.rowClickHandler }, data)))), this.paging && (h(TableFoot, { key: 'aa36701c1221977bc66e4f47d4bc2dce135bbd2c' }, h(TableFootRow, { key: '9ac2f55f7a6415a32def730f6208b1f9a6ff2356' }, h(TableFootCell, { key: '6abc831c8425a7f637cb3f6af9fccf0d83a61210', colSpan: this.paymentsTable.columnData.length }, h("pagination-menu", { key: '863948eab08693a881603199c7d964543b3bd455', paging: Object.assign(Object.assign({}, this.paging), { handleClickPrevious: this.handleClickPrevious, handleClickNext: this.handleClickNext }) }))))))));
     }
     static get watchers() { return {
         "pagingParams": ["updateOnPropChange"],

package/dist/module/payout-details-core2.js

@@ -1,5 +1,5 @@
 import { h, proxyCustomElement, HTMLElement, createEvent } from '@stencil/core/internal/client';
-import { h as capitalizeFirstLetter, a as formatDate, b as formatTime } from './utils2.js';
+import { j as capitalizeFirstLetter, a as formatDate, b as formatTime } from './utils2.js';
 import { E as ErrorState, b as EntityHeadInfo, c as EntityHeadInfoItem, D as DetailSectionTitle, a as DetailItem, C as CodeBlock } from './utils.js';
 import { B as Button } from './button.js';
 import { S as StyledHost } from './styled-host.js';
@@ -77,9 +77,9 @@ const PayoutDetailsCore = /*@__PURE__*/ proxyCustomElement(class PayoutDetailsCo
     }
     render() {
         var _a;
-        return (h(StyledHost, { key: 'bce8893748b454d55c8d2651f0decaf24f9d23f0' }, this.loading && h(PayoutDetailsLoading, { key: '6779860e9708f71da7466911a23e4b6bae082f33' }), !this.loading && this.errorMessage && ErrorState(this.errorMessage), !this.loading && this.payout && (h("justifi-details", { key: 'bc148d8ac046381a625f1ca46061f2d1038cd962', "error-message": this.errorMessage }, h(EntityHeadInfo, { key: '08a12c76478d3c877b27cbc778e8d8946bfd4f61', slot: "head-info", badge: (h("div", { class: "d-flex gap-1" }, MapPayoutStatusToBadge((_a = this.payout) === null || _a === void 0 ? void 0 : _a.status), this.payout.settlement_priority === 'expedited' ? (h(Badge, { variant: BadgeVariant.WARNING, title: "Expedited", text: "Expedited" })) : (h(Badge, { variant: BadgeVariant.SECONDARY, title: "Standard", text: "Standard" })))), title: this.payout.formattedPaymentAmount(this.payout.amount) }, h(EntityHeadInfoItem, { key: 'eed2fc60701ee7a63316fc107071ce1b0f8a7887', classes: "border-1 border-end", title: "Updated At", value: `${formatDate(this.payout.updated_at)} ${formatTime(this.payout.updated_at)}` }), h(EntityHeadInfoItem, { key: '47256f8c5220bd891e015b66deeeada1d8686896', classes: "border-1 border-end", title: "Created At", value: `${formatDate(this.payout.created_at)} ${formatTime(this.payout.created_at)}` }), h(EntityHeadInfoItem, { key: '55768b182ed868f01ecc13a17760ba3e50be406c', title: "ID", value: this.payout.id }), h("div", { key: '3a3eb255b1dc769c48123b0290d2e326beb05486', class: "m-4" }, h(Button, { key: 'ad8109745fb5266e908ce46b7997880679eef419', variant: "secondary", class: "btn btn-outline-secondary d-flex align-items-center", onClick: this.downloadCSV }, "Export CSV"))), h("div", { key: 'dd04956b57d3fc8f8a2ab04e3773cedbdc609e7e', slot: 'detail-sections' }, h(DetailSectionTitle, { key: 'ad19ec1078837f472f09adafc6de1bb285774a57', sectionTitle: "Details" }), h("div", { key: '2abbe66f3c1fb693d108e625b224d2abd2c79856', class: "d-flex flex-column gap-2 w-100" }, h(DetailItem, { key: 'bedfc199018c36d5f5e2bc397be7145486e88b06', title: "Date paid", value: formatDate(this.payout.deposits_at) }), h(DetailItem, { key: '0abebcb95d22281fd711e282e91e0a946a8aa9d9', title: "Statement Description", value: this.payout.description }), h(DetailItem, { key: 'a65008e3edc341a951e68335d6302258cb0423c0', title: "Payout Method", value: this.formatMethod(this.payout.delivery_method) }), h(DetailItem, { key: '62284db58bb08fa8ec78380d226c551c1c40aa5c', title: "Amount", value: this.payout.formattedPaymentAmount(this.payout.amount) }), h(DetailItem, { key: '657392699e94a0ca8a7f114c0b94bb7fe2a863fd', title: "Fee", value: this.payout.formattedPaymentAmount(this.payout.fees_total) })), h(DetailSectionTitle, { key: 'dd553173a96aa066585c42e274b5397ce32f12c8', sectionTitle: "Account" }), h("div", { key: 'a078180c0e26466aa95b7e627b3f0ae0157f88fd', class: "d-flex flex-column gap-2 w-100" }, h(DetailItem, { key: '8fc8379e47bea1c18e39ec526587eebc11a63233', title: "ID", value: this.payout.account_id, onClick: this.enableRecordClick ? () => this.handleRecordClick(this.payout.account_id) : undefined }), h(DetailItem, { key: '9caec1c44313a19192a025968ff2055e9871cd2c', title: "Account Type", value: this.payout.bank_account.account_type }), h(DetailItem, { key: 'f3e0eec504eff9831aea0258d136224c5331b77e', title: "Institution", value: this.payout.bank_account.account_type }), h(DetailItem, { key: 'd9f4e1cf8ceec76af0992e4774d098120af1ecd7', title: "Routing Number", value: this.payout.bank_account.routing_number }), h(DetailItem, { key: '5cab1bcc2be4c60412ef3f7263ac700a4b0a127b', title: "Account Number", value: `**** ${this.payout.bank_account.account_number_last4}` })), this.payout.metadata && [
-            h(DetailSectionTitle, { key: 'ad8a029e6f19bb586b6f124160bc565a07ef7515', sectionTitle: 'Metadata' }),
-            h("div", { key: '2ad3cb860977116929da7b475787c90e0202e7ad', class: "d-table gap-2 w-100" }, h(CodeBlock, { key: 'ceab82b2cab61a721af79a62b7e4fe0f6c2035e6', metadata: this.payout.metadata }))
+        return (h(StyledHost, { key: '7a7191c999fb793ad3afdd44710438f6c80ab48c' }, this.loading && h(PayoutDetailsLoading, { key: '4197820f0b0280a2018aaf686e4a5e12fa4ab81e' }), !this.loading && this.errorMessage && ErrorState(this.errorMessage), !this.loading && this.payout && (h("justifi-details", { key: '43386641b5113e274e2f9fd803711e0db58712bb', errorMessage: this.errorMessage }, h(EntityHeadInfo, { key: '5b2d5bf456105e4fe28d13caa31d44032ffd884c', slot: "head-info", badge: (h("div", { class: "d-flex gap-1" }, MapPayoutStatusToBadge((_a = this.payout) === null || _a === void 0 ? void 0 : _a.status), this.payout.settlement_priority === 'expedited' ? (h(Badge, { variant: BadgeVariant.WARNING, title: "Expedited", text: "Expedited" })) : (h(Badge, { variant: BadgeVariant.SECONDARY, title: "Standard", text: "Standard" })))), title: this.payout.formattedPaymentAmount(this.payout.amount) }, h(EntityHeadInfoItem, { key: 'd2603ef693702274d127b3dca97628581805fa1b', classes: "border-1 border-end", title: "Updated At", value: `${formatDate(this.payout.updated_at)} ${formatTime(this.payout.updated_at)}` }), h(EntityHeadInfoItem, { key: 'cee7afc04d1b2e8a618e659da5c021d1a6ad2fdd', classes: "border-1 border-end", title: "Created At", value: `${formatDate(this.payout.created_at)} ${formatTime(this.payout.created_at)}` }), h(EntityHeadInfoItem, { key: '65d1d3048b6e6e98e257cd4c3f459605ae4a5f68', title: "ID", value: this.payout.id }), h("div", { key: '90541e64b6c783152dd1588f541515e745e5af4e', class: "m-4" }, h(Button, { key: 'db9385003966ad389b5369114828c26a50a4b91c', variant: "secondary", class: "btn btn-outline-secondary d-flex align-items-center", onClick: this.downloadCSV }, "Export CSV"))), h("div", { key: '69dc3456c3899ec06011559bc94196f2e0eb57a8', slot: 'detail-sections' }, h(DetailSectionTitle, { key: '3f791e25a054482ae9185a1b1c82c842e863602b', sectionTitle: "Details" }), h("div", { key: '3f19d1040a6d19fdbacc506d1417d02bdb5a1620', class: "d-flex flex-column gap-2 w-100" }, h(DetailItem, { key: 'e31c16a5f89bea5df800b420cafcb243c851bbe2', title: "Date paid", value: formatDate(this.payout.deposits_at) }), h(DetailItem, { key: 'f49cc91db6d80d830e75cb71f103af7d979629de', title: "Statement Description", value: this.payout.description }), h(DetailItem, { key: '992df68f14fdeb4bc6944fb72d557fc8af6d6e6e', title: "Payout Method", value: this.formatMethod(this.payout.delivery_method) }), h(DetailItem, { key: '8c5a9fde79b9e7fd2956d4645affd43e9d895ad9', title: "Amount", value: this.payout.formattedPaymentAmount(this.payout.amount) }), h(DetailItem, { key: '97da8d2a9fb16ecd45afc3b4d576e5ae0fcc8413', title: "Fee", value: this.payout.formattedPaymentAmount(this.payout.fees_total) })), h(DetailSectionTitle, { key: '67f7192019b347c0aa8a74ff7ab748dbd5f3aec8', sectionTitle: "Account" }), h("div", { key: 'af8a5d77cca9e9e3c8ac75eb215a7fde9ea8a963', class: "d-flex flex-column gap-2 w-100" }, h(DetailItem, { key: '36c30de2523d36233bda5276683472d2729cd93c', title: "ID", value: this.payout.account_id, onClick: this.enableRecordClick ? () => this.handleRecordClick(this.payout.account_id) : undefined }), h(DetailItem, { key: '3004ac18c5946efcda4959d1e2ca396c102c95ba', title: "Account Type", value: this.payout.bank_account.account_type }), h(DetailItem, { key: '846ed7737a61eff783024906e91d004b32ac99b2', title: "Institution", value: this.payout.bank_account.account_type }), h(DetailItem, { key: '16e4c9b098db8c86e8612aba9d0316e691a187a1', title: "Routing Number", value: this.payout.bank_account.routing_number }), h(DetailItem, { key: '55164cdc8fc1ddbcbd10f706979e8b2e6e9bcbcf', title: "Account Number", value: `**** ${this.payout.bank_account.account_number_last4}` })), this.payout.metadata && [
+            h(DetailSectionTitle, { key: 'c38ba6b9b270d60bfc681f84a87bdcfffbde5b9c', sectionTitle: 'Metadata' }),
+            h("div", { key: '301869facf7d4596ed08d40906f0720123f42644', class: "d-table gap-2 w-100" }, h(CodeBlock, { key: 'e404d80ff5b40de0de2ca086b9e381b70d9f821b', metadata: this.payout.metadata }))
         ])))));
     }
     static get watchers() { return {

package/dist/module/payouts-list-core2.js

@@ -10,9 +10,9 @@ import './details.js';
 import { T as Table, a as TableWrapper, b as TableComponent, c as TableHead, d as TableHeadRow, e as TableBody, f as TableLoadingState, g as TableEmptyState, h as TableErrorState, i as TableRow, j as TableFoot, k as TableFootRow, l as TableFootCell } from './table.js';
 import { T as TableClickActions } from './event-types.js';
 import './justifi-radio-list-item2.js';
-import { e as convertToLocal } from './utils2.js';
+import { h as convertToLocal } from './utils2.js';
 import { M as MapPayoutStatusToBadge } from './payouts-status.js';
-import { w as tableHeadCell, ac as getAlternateTableCellPart } from './parts.js';
+import { w as tableHeadCell, ad as getAlternateTableCellPart } from './parts.js';
 import { o as onQueryParamsChange, g as getRequestParams } from './payouts-list-params-state.js';
 import { d as defineCustomElement$1 } from './pagination-menu2.js';
 
@@ -175,7 +175,7 @@ const PayoutsListCore = /*@__PURE__*/ proxyCustomElement(class PayoutsListCore e
         return !this.showEmptyState && !this.showErrorState && !this.loading;
     }
     render() {
-        return (h(TableWrapper, { key: '6a34e51911f4d507268a59e15a34f9c5d935989e' }, h(TableComponent, { key: '3936b7e479f3d7a2f8fadbc7db2a36124141044c' }, h(TableHead, { key: 'c537d591e4c03a7c5f5afa4bde930eb67093809e' }, h(TableHeadRow, { key: 'e3b2ea0a122d22893e657ebb13c198f6d1c7b47b' }, this.payoutsTable.columnData.map((column) => column))), h(TableBody, { key: '3491e95b3c95e010635949ba07c5602eb7ae7d6c' }, h(TableLoadingState, { key: '87bf5cfb79b9546f0b70c3f681671c8baccf1253', columnSpan: this.payoutsTable.columnKeys.length, isLoading: this.loading }), h(TableEmptyState, { key: '587ab70585ce504cb63d27652707fa1d28ec5ec1', isEmpty: this.showEmptyState, columnSpan: this.payoutsTable.columnKeys.length }), h(TableErrorState, { key: '26cb66316044265b486390ae1d05a253f90911e1', columnSpan: this.payoutsTable.columnKeys.length, errorMessage: this.errorMessage }), this.showRowData && this.payoutsTable.rowData.map((data, index) => (h(TableRow, { "data-test-id": "table-row", "data-row-entity-id": this.entityId[index], onClick: this.rowClickHandler }, data)))), this.paging && (h(TableFoot, { key: '5120d2473b31550907e1bdc0b4fff3084c8d3aed' }, h(TableFootRow, { key: '81a989720c8eb9439a959c7100956f33487cbeee' }, h(TableFootCell, { key: 'b3357b46b1f11e75b4c73c6de6d5c121b1c6710b', colSpan: this.payoutsTable.columnData.length }, h("pagination-menu", { key: '73d8bedbb95826a43746b9ab08322c28e40a7f5d', paging: Object.assign(Object.assign({}, this.paging), { handleClickPrevious: this.handleClickPrevious, handleClickNext: this.handleClickNext }) }))))))));
+        return (h(TableWrapper, { key: '106115f5b509ac388b3c9fcafd5e0134d24eabc1' }, h(TableComponent, { key: '4d193726de80df14bb301afd62bfac3d89f8f731' }, h(TableHead, { key: 'a4d8c4999914cd32ad0489da5bc1ff4df86d244f' }, h(TableHeadRow, { key: '4a04850c9c4cdd51e982fd42f1e52c8a7df73b3b' }, this.payoutsTable.columnData.map((column) => column))), h(TableBody, { key: 'f28c5a7025eb3b46d90533de90fd2bc1cfe579cc' }, h(TableLoadingState, { key: '35aa368d7767266d4e510dfb834c505702e3c2cc', columnSpan: this.payoutsTable.columnKeys.length, isLoading: this.loading }), h(TableEmptyState, { key: '291cf0d9ab6027f80399eb1ef7febe5dfdabb83a', isEmpty: this.showEmptyState, columnSpan: this.payoutsTable.columnKeys.length }), h(TableErrorState, { key: 'b474ebbd3e107ceb206071ab86bcb13abc0cc93b', columnSpan: this.payoutsTable.columnKeys.length, errorMessage: this.errorMessage }), this.showRowData && this.payoutsTable.rowData.map((data, index) => (h(TableRow, { "data-test-id": "table-row", "data-row-entity-id": this.entityId[index], onClick: this.rowClickHandler }, data)))), this.paging && (h(TableFoot, { key: '10c5bd014ea446529d6e0a0a4fd7b6afd755a7b6' }, h(TableFootRow, { key: '067c3b4eb307ce47f95435e7c1a3f8c767311be8' }, h(TableFootCell, { key: '1afeba1dabdb38698372ca4d1ec6e0b4acad5429', colSpan: this.payoutsTable.columnData.length }, h("pagination-menu", { key: 'fb8d3b9b964a702ea9fc6185bcf9c4f6916b497e', paging: Object.assign(Object.assign({}, this.paging), { handleClickPrevious: this.handleClickPrevious, handleClickNext: this.handleClickNext }) }))))))));
     }
     static get watchers() { return {
         "pagingParams": ["updateOnPropChange"],