@justifi/webcomponents 4.18.0 → 4.19.0

package/dist/collection/components/form/form-control-select.js

@@ -27,7 +27,7 @@ export class SelectInput {
     }
     render() {
         var _a;
-        return (h(Host, { key: 'abc80a7f20c59c99a3468f199142bc01ba7883cb', exportparts: "label,input,input-invalid" }, h("div", { key: 'd34ec19e40c33bd16b1e03e2bfac07dd6dd1a3a8', class: "form-group d-flex flex-column" }, h("label", { key: '43adfb46f3bf2e72e50d2bab17b909fec8693c2a', part: "label", class: "form-label", htmlFor: this.name }, this.label), h("select", { key: 'eacb07490715f8041cfa6cd4fab91959d5b6bfae', ref: el => (this.selectElement = el), id: this.name, name: this.name, onBlur: this.formControlBlur.emit, onInput: this.handleFormControlInput, part: `input ${this.errorText ? 'input-invalid' : ''}`, class: this.errorText ? 'form-select is-invalid' : 'form-select', disabled: this.disabled }, (_a = this.options) === null || _a === void 0 ? void 0 : _a.map(option => (h("option", { value: option.value }, option.label)))), h("form-control-help-text", { key: '5ec5ba6ca4e0503ffdbddb95e70444bbf8b169b7', helpText: this.helpText, name: this.name }), h("form-control-error-text", { key: 'bd90d61ca9aa0c52d351e336febc9f3d2e501355', errorText: this.errorText, name: this.name }))));
+        return (h(Host, { key: '99449e3724103b12af7f2a4573831961074a484a', exportparts: "label,input,input-invalid" }, h("div", { key: 'd73e89d43da9968b687afece24794d9472fec6b5', class: "form-group d-flex flex-column" }, h("label", { key: '6964c55858fc3cf96a137e1061c7f66831105348', part: "label", class: "form-label", htmlFor: this.name }, this.label), h("select", { key: '5b1a09a607ad9638915f5e70f2164f6010020438', ref: el => (this.selectElement = el), id: this.name, name: this.name, onBlur: this.formControlBlur.emit, onInput: this.handleFormControlInput, part: `input ${this.errorText ? 'input-invalid' : ''}`, class: this.errorText ? 'form-select is-invalid' : 'form-select', disabled: this.disabled }, (_a = this.options) === null || _a === void 0 ? void 0 : _a.map(option => (h("option", { value: option.value }, option.label)))), h("form-control-help-text", { key: '62d862921d463c98e56888293c878624f7311548', helpText: this.helpText, name: this.name }), h("form-control-error-text", { key: '0b1c4d4752965fb058208c72c7f1c3872d1e0561', errorText: this.errorText, name: this.name }))));
     }
     static get is() { return "form-control-select"; }
     static get properties() {

package/dist/collection/components/form/form-control-text.js

@@ -30,7 +30,7 @@ export class TextInput {
         this.updateInput(this.defaultValue);
     }
     render() {
-        return (h(Host, { key: '7b3c980cbad27b29bc87dd4eaa8a23398c8b244c', exportparts: "label,input,input-invalid" }, h("div", { key: 'fa49688c206721f177d2c57b42103ffcd139dde7', class: "form-group d-flex flex-column" }, h("label", { key: '596b8cae71f32769d82fa5e77df11daa172fcce9', part: "label", class: "form-label", htmlFor: this.name }, this.label), h("input", { key: '44ec6ef8e306c5d25190dec87926ba382665f2ca', id: this.name, name: this.name, onBlur: this.formControlBlur.emit, onInput: this.handleFormControlInput, onKeyDown: this.keyDownHandler, onPaste: this.keyDownHandler, maxLength: this.maxLength, part: `input ${this.errorText ? 'input-invalid ' : ''}${this.disabled ? ' input-disabled' : ''}`, class: this.errorText ? 'form-control is-invalid' : 'form-control', type: "text", disabled: this.disabled }), h("form-control-help-text", { key: '888e0abf5f3687266784eda12428cb219321f964', helpText: this.helpText, name: this.name }), h("form-control-error-text", { key: '902a8e06659e63cb35002b5eef8b3f987df8fb44', errorText: this.errorText, name: this.name }))));
+        return (h(Host, { key: '1194532f81831734543bad80860da14f8a5ad856', exportparts: "label,input,input-invalid" }, h("div", { key: '296538cf90b62f8041e21620aa06b4074f68b71a', class: "form-group d-flex flex-column" }, h("label", { key: '7c009ce96124e58f9657dba2565ef298225f10f7', part: "label", class: "form-label", htmlFor: this.name }, this.label), h("input", { key: '4b33cb700aecf4d0a359366ba2e0d248c602d904', id: this.name, name: this.name, onBlur: this.formControlBlur.emit, onInput: this.handleFormControlInput, onKeyDown: this.keyDownHandler, onPaste: this.keyDownHandler, maxLength: this.maxLength, part: `input ${this.errorText ? 'input-invalid ' : ''}${this.disabled ? ' input-disabled' : ''}`, class: this.errorText ? 'form-control is-invalid' : 'form-control', type: "text", disabled: this.disabled }), h("form-control-help-text", { key: '7a279d72bb262fcb044b5b0cc31703878ce9f444', helpText: this.helpText, name: this.name }), h("form-control-error-text", { key: '00bea288a99f626806697a98b6dca3f3298dc0b3', errorText: this.errorText, name: this.name }))));
     }
     static get is() { return "form-control-text"; }
     static get properties() {

package/dist/collection/components/form/utils.js

@@ -1,5 +1,3 @@
-import { h } from "@stencil/core";
-export const LoadingSpinner = () => (h("div", { class: "spinner-border spinner-border-sm", role: "status" }, h("span", { class: "visually-hidden" }, "Loading...")));
 export const numberOnlyHandler = (e) => {
     var _a;
     const specialKeys = ['Backspace', 'Tab', 'Enter', 'ArrowUp', 'ArrowDown', 'ArrowLeft', 'ArrowRight', 'Delete'];

package/dist/collection/components/gross-payment-chart/gross-payment-chart-core.js

@@ -68,7 +68,7 @@ export class GrossPaymentChartCore {
         }
     }
     render() {
-        return (h(Host, { key: 'c84e3a681d35e62474e6b34b2a54edcae47370d2' }, this.loading && LoadingState(), !this.errorMessage ? h("canvas", { id: "chart", ref: (elem) => this.chartRef = elem }) : ErrorState(this.errorMessage)));
+        return (h(Host, { key: '463d7e132e647e1da6dc5ad5ea54abf95a60e715' }, this.loading && LoadingState(), !this.errorMessage ? h("canvas", { id: "chart", ref: (elem) => this.chartRef = elem }) : ErrorState(this.errorMessage)));
     }
     static get is() { return "gross-payment-chart-core"; }
     static get originalStyleUrls() {

package/dist/collection/components/insurance/season-interruption/season-interruption-insurance-core.js

@@ -1,7 +1,7 @@
 import { h } from "@stencil/core";
 import { formatCurrency } from "../../../utils/utils";
 import { insuranceValues, insuranceErrors, validateInsuranceValues } from "../insurance-state";
-import StyledHost from "../../../utils/styled-host/styled-host";
+import { StyledHost } from "../../../ui-components";
 export class SeasonInterruptionInsuranceCore {
     constructor() {
         this.checkoutId = undefined;
@@ -96,8 +96,8 @@ export class SeasonInterruptionInsuranceCore {
     }
     render() {
         var _a, _b, _c, _d;
-        return (h(StyledHost, { key: '0be38bd7c1f08be48d5347a3a0362ea3871d41bc' }, !this.isLoading &&
-            h("div", { key: '277a315ceba771959b1133b7cfc734e1d000325a' }, h("h2", { key: '34e5984345ec9300ca13327340b474f596c8b378', class: "fs-5 fw-bold pb-3 jfi-header" }, (_a = this.quote) === null || _a === void 0 ? void 0 : _a.product.title), h("small", { key: 'c428d4a485e449d1b7dc0eb7fe586d3927d4ea3f', innerHTML: (_b = this.quote) === null || _b === void 0 ? void 0 : _b.product.description }), h("div", { key: '8c55f87d401c2f438de4725cf6023ebd6d2e0276' }, h("input", { key: '6c0a57e4de37607948de68d41afbe24639ca59dd', id: "accept", type: "radio", name: "opt-in", value: "true", onChange: (event) => this.onChangeHandler(event), class: this.error ? 'form-check-input me-2 is-invalid' : 'form-check-input me-2' }), h("label", { key: 'aaede6dee33658ba36a14b2bcaf2c6a2320e4c2f', htmlFor: "accept" }, "Accept coverage for ", formatCurrency((_c = this.quote) === null || _c === void 0 ? void 0 : _c.total_cents))), h("div", { key: '839e12e3f207b0ce32788f5da81b097ae80d55bf', class: "mb-2" }, h("input", { key: '15bafd8a8ad1601d2c69eed86ff6a2256fb79959', id: "decline", type: "radio", name: "opt-in", value: "false", onChange: (event) => this.onChangeHandler(event), class: this.error ? 'form-check-input me-2 is-invalid' : 'form-check-input me-2' }), h("label", { key: '00b328473f2a44bed3e22f7746dc83596e449008', htmlFor: "decline" }, "Decline coverage")), h("div", { key: '48e00af5825cd476329b591a906afa818bedc6d4', class: "invalid-feedback", style: { display: this.error ? 'block' : 'none' } }, "Please select an option"), h("small", { key: '4196d6073a8d0e96ed3de4bcb8a77acd4241a5ab', innerHTML: (_d = this.quote) === null || _d === void 0 ? void 0 : _d.product.legal_disclaimer }))));
+        return (h(StyledHost, { key: '7b1384ddbc83b5f92d3a2c4f8e544c8bd06fa716' }, !this.isLoading &&
+            h("div", { key: 'd94a61158ceb79c30d81ee5186195d3454c01323' }, h("h2", { key: '05d5b1499cf7de28823ec98ebd2c220eca7471f1', class: "fs-5 fw-bold pb-3 jfi-header" }, (_a = this.quote) === null || _a === void 0 ? void 0 : _a.product.title), h("small", { key: 'fa26cf97a06a9910d7f4cb04d149bbcd9f30d103', innerHTML: (_b = this.quote) === null || _b === void 0 ? void 0 : _b.product.description }), h("div", { key: '287de8ed4ca603b3162b4158d18d7e8a53e3b453' }, h("input", { key: '59adbc8ac892e572bc1aa68f3c626beab76af282', id: "accept", type: "radio", name: "opt-in", value: "true", onChange: (event) => this.onChangeHandler(event), class: this.error ? 'form-check-input me-2 is-invalid' : 'form-check-input me-2' }), h("label", { key: '469ac2622be0c76564de8102a499d3d3790380b2', htmlFor: "accept" }, "Accept coverage for ", formatCurrency((_c = this.quote) === null || _c === void 0 ? void 0 : _c.total_cents))), h("div", { key: '7a8827c4261d5978ecca31fc42397f233b3e37fc', class: "mb-2" }, h("input", { key: 'e25994c491ca5d74d20ec5f5787ff88ee9575ca0', id: "decline", type: "radio", name: "opt-in", value: "false", onChange: (event) => this.onChangeHandler(event), class: this.error ? 'form-check-input me-2 is-invalid' : 'form-check-input me-2' }), h("label", { key: '0a5f13213a19e13258c72ccbbe7a2e148daf1750', htmlFor: "decline" }, "Decline coverage")), h("div", { key: '33a190aa52dfefd6accf77a9e00598563a8f5e6c', class: "invalid-feedback", style: { display: this.error ? 'block' : 'none' } }, "Please select an option"), h("small", { key: 'f10e4ebd9a896fc792bb3d18d6014100013cb0b7', innerHTML: (_d = this.quote) === null || _d === void 0 ? void 0 : _d.product.legal_disclaimer }))));
     }
     static get is() { return "justifi-season-interruption-insurance-core"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/insurance/season-interruption/season-interruption-insurance.js

@@ -2,6 +2,7 @@ import { h } from "@stencil/core";
 import { InsuranceService } from "../../../api/services/insurance.service";
 import { makeGetQuote, makeToggleCoverage } from "../insurance-actions";
 import { ComponentErrorCodes, ComponentErrorSeverity } from "../../../api/ComponentError";
+import JustifiAnalytics from "../../../api/Analytics";
 export class SeasonInterruptionInsurance {
     constructor() {
         this.authToken = undefined;
@@ -25,8 +26,12 @@ export class SeasonInterruptionInsurance {
         return this.seasonInterruptionCoreRef.validate();
     }
     componentWillLoad() {
+        this.analytics = new JustifiAnalytics(this);
         this.initializeServiceMethods();
     }
+    disconnectedCallback() {
+        this.analytics.cleanup();
+    }
     initializeServiceMethods() {
         if (!this.authToken) {
             this.errorEvent.emit({
@@ -46,7 +51,7 @@ export class SeasonInterruptionInsurance {
         });
     }
     render() {
-        return (h("justifi-season-interruption-insurance-core", { key: '8401ef19ea5bf566b9ef3f678382271173332421', ref: (el) => (this.seasonInterruptionCoreRef = el), "checkout-id": this.checkoutId, getQuote: this.getQuote, toggleCoverage: this.toggleCoverage, "primary-identity-first-name": this.primaryIdentityFirstName, "primary-identity-last-name": this.primaryIdentityLastName, "primary-identity-state": this.primaryIdentityState, "primary-identity-postal-code": this.primaryIdentityPostalCode, "primary-identity-country": this.primaryIdentityCountry, "primary-identity-email-address": this.primaryIdentityEmailAddress, "policy-attributes-insurable-amount": this.policyAttributesInsurableAmount, "policy-attributes-start-date": this.policyAttributesStartDate, "policy-attributes-end-date": this.policyAttributesEndDate, "covered-identity-first-name": this.coveredIdentityFirstName, "covered-identity-last-name": this.coveredIdentityLastName }));
+        return (h("justifi-season-interruption-insurance-core", { key: '256d45d39c5d297abb7f955229b0e0e9fbc9504a', ref: (el) => (this.seasonInterruptionCoreRef = el), "checkout-id": this.checkoutId, getQuote: this.getQuote, toggleCoverage: this.toggleCoverage, "primary-identity-first-name": this.primaryIdentityFirstName, "primary-identity-last-name": this.primaryIdentityLastName, "primary-identity-state": this.primaryIdentityState, "primary-identity-postal-code": this.primaryIdentityPostalCode, "primary-identity-country": this.primaryIdentityCountry, "primary-identity-email-address": this.primaryIdentityEmailAddress, "policy-attributes-insurable-amount": this.policyAttributesInsurableAmount, "policy-attributes-start-date": this.policyAttributesStartDate, "policy-attributes-end-date": this.policyAttributesEndDate, "covered-identity-first-name": this.coveredIdentityFirstName, "covered-identity-last-name": this.coveredIdentityLastName }));
     }
     static get is() { return "justifi-season-interruption-insurance"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/pagination-menu/pagination-menu.js

@@ -6,13 +6,13 @@ export class PaginationMenu {
         this.params = {};
     }
     render() {
-        return (h(Host, { key: 'e0211a01fc44ec29eec8085f31055c060f77f56f', exportparts: `page-arrow,page-button,page-button-disabled,page-button-text` }, h("nav", { key: '191b1603b6cc559d3ef0cf45a37074e41513ea5a', "aria-label": "Table pagination", class: "d-flex justify-content-end gap-3" }, h("ul", { key: '775613b2ce03a1bc6a8abf5c918d099e13ac06d2', class: "pagination m-0" }, h("li", { key: 'cf7fef25e80e446688f31f13236c3e71a1378aef', class: `page-item ${this.paging.has_previous ? '' : ' disabled'}` }, h("a", { key: 'bb671bda6ab5f6921d34c7fdf5b33a62bc076154', href: "#", class: "page-link", onClick: (e) => {
+        return (h(Host, { key: '645df5028861aa714a814f908ccace8dcd0986f8', exportparts: `page-arrow,page-button,page-button-disabled,page-button-text` }, h("nav", { key: '6cb86ce01c625db9c31204f63258570f8a5d0a0f', "aria-label": "Table pagination", class: "d-flex justify-content-end gap-3" }, h("ul", { key: '7ffb5771a1c51553d64735721b937e53c699949d', class: "pagination m-0" }, h("li", { key: 'b439c2f7fe81ccdfa29670a6fc04715681ed5ab3', class: `page-item ${this.paging.has_previous ? '' : ' disabled'}` }, h("a", { key: 'dc59152e834a3076f09304f6fcd0195058ebefec', href: "#", class: "page-link", onClick: (e) => {
                 e.preventDefault();
                 this.paging.handleClickPrevious(this.paging.start_cursor);
-            }, part: `page-button${this.paging.has_previous ? '' : ' page-button-disabled'}` }, h("span", { key: 'da88de236d134f950a48d9a1d2ebf70742e80788', class: "me-1", part: "page-arrow" }, "\u00AB"), h("span", { key: '9ae148f746d5d04fcaf4981b0f1aa3d7fc1b509d', part: "page-button-text" }, "Previous"))), h("li", { key: '7340b9d89574c9c95b15fd50f3444aacdbb4c496', class: `page-item ${this.paging.has_next ? '' : ' disabled'}` }, h("a", { key: '827e68669eeb7b83a28185312108adde796a331e', href: "#", class: "page-link", onClick: (e) => {
+            }, part: `page-button${this.paging.has_previous ? '' : ' page-button-disabled'}` }, h("span", { key: 'fc640fb9ae2ca672bfed89d23c5641cb346c673d', class: "me-1", part: "page-arrow" }, "\u00AB"), h("span", { key: 'fb6fcd31ebd4d194b37f53a071537133b8c4d369', part: "page-button-text" }, "Previous"))), h("li", { key: 'b10e12ec7bc4a89cd897e868ec7b303c62599cd3', class: `page-item ${this.paging.has_next ? '' : ' disabled'}` }, h("a", { key: '51f91eb7cfef91dcbcfd9f11522213308bf717b5', href: "#", class: "page-link", onClick: (e) => {
                 e.preventDefault();
                 this.paging.handleClickNext(this.paging.end_cursor);
-            }, part: `page-button${this.paging.has_next ? '' : ' page-button-disabled'}` }, h("span", { key: '29ce5f0e9ae4b19d3116ac6bd883c52168c5fbb8', part: "page-button-text" }, "Next"), h("span", { key: '2d58cffc46031c9db1ad7c4b061730bc083dded8', class: "ms-1", part: "page-arrow" }, "\u00BB")))))));
+            }, part: `page-button${this.paging.has_next ? '' : ' page-button-disabled'}` }, h("span", { key: 'd89f50a44dead676d19b8862a92ba636947fe6b1', part: "page-button-text" }, "Next"), h("span", { key: 'f5dd2ddddef86931d935df56101f1fed8118e4f6', class: "ms-1", part: "page-arrow" }, "\u00BB")))))));
     }
     static get is() { return "pagination-menu"; }
     static get properties() {

package/dist/collection/components/payment-details/payment-details-core.js

@@ -1,7 +1,7 @@
 import { h } from "@stencil/core";
 import { MapPaymentStatusToBadge, formatCurrency, formatDate, formatTime, snakeCaseToHumanReadable } from "../../utils/utils";
 import { CodeBlock, DetailItem, DetailSectionTitle, EntityHeadInfo, EntityHeadInfoItem, ErrorState, LoadingState } from "../details/utils";
-import StyledHost from "../../utils/styled-host/styled-host";
+import { StyledHost } from "../../ui-components";
 export class PaymentDetailsCore {
     constructor() {
         this.getPaymentDetails = undefined;
@@ -38,14 +38,14 @@ export class PaymentDetailsCore {
     }
     render() {
         var _a;
-        return (h(StyledHost, { key: 'b0a4e021ebaf00cf1750c7d40510aa9754bc622b' }, this.loading && LoadingState(), !this.loading && this.errorMessage && ErrorState(this.errorMessage), !this.loading && !this.errorMessage &&
-            this.payment && (h("justifi-details", { key: '5b7858536120f8a1d3016f1f110f51e6b8605f3e', "error-message": this.errorMessage }, h(EntityHeadInfo, { key: '93db7fd2d30fb1ef0099e58fd6d90e703f921c44', slot: "head-info", badge: h("span", { slot: 'badge', innerHTML: MapPaymentStatusToBadge(this.payment.status) }), title: `${formatCurrency(this.payment.amount)} ${(_a = this.payment) === null || _a === void 0 ? void 0 : _a.currency.toUpperCase()}` }, h(EntityHeadInfoItem, { key: '6c1b97d494b92618092710986ff6cbfb4c183cad', classes: "border-1 border-end", title: "Updated At", value: `${formatDate(this.payment.updated_at)} ${formatTime(this.payment.updated_at)}` }), h(EntityHeadInfoItem, { key: '1ef1fe7899d47959bb3ce8dbe511222cc69185ef', classes: "border-1 border-end", title: "Created At", value: `${formatDate(this.payment.created_at)} ${formatTime(this.payment.created_at)}` }), h(EntityHeadInfoItem, { key: 'd0a12d9abfc6d4c71249af65cef35902554cc3a7', title: "ID", value: this.payment.id })), h("div", { key: 'b12d205fb50d310525045261967a383e93458cb3', slot: 'detail-sections' }, h(DetailSectionTitle, { key: 'cdcae0f279389849946017963762c9a1294204ee', sectionTitle: "Details" }), h("div", { key: '91693665801878a7b87729412a10469dac21130d', class: "d-table gap-2 w-100" }, h(DetailItem, { key: 'c58427d3a5543caa9f83fe62dca71612c92a200e', title: "Amount", value: formatCurrency(this.payment.amount) }), h(DetailItem, { key: 'd6a0b3df90839ad1fdd34058f3582482a9eb1b20', title: "Fees", value: formatCurrency(this.payment.fee_amount) }), h(DetailItem, { key: '6c08a4a3bcc7d6bf726959b451e3231598d7e920', title: "Refunded", value: formatCurrency(this.payment.amount_refunded) }), h(DetailItem, { key: '4d2d8d897cd0d5a4be06b44741cf85366eebe9af', title: "Net", value: formatCurrency(this.payment.balance) }), h(DetailItem, { key: 'b3df303d6c12b1327b3f20245c3c50657eb422f8', title: "Status", value: MapPaymentStatusToBadge(this.payment.status) }), h(DetailItem, { key: '6a535b4f0c91fb37077e09912e4fa3c1d333db48', title: "Payment ID", value: this.payment.id }), h(DetailItem, { key: '982514de79780e97b0aa3f120d7fcc11b51301ac', title: "Processing Fees", value: formatCurrency(this.payment.fee_amount) }), h(DetailItem, { key: '967e82d6fe2bcf55110e6881811d38af9ea63c17', title: "Statement Descriptor", value: this.payment.statement_descriptor }), h(DetailItem, { key: 'bee37b7e5b7c22f0ec596104097c1408284c5ac1', title: "Description", value: this.payment.description })), this.payment.payment_method.card && [
-            h(DetailSectionTitle, { key: 'da950a7706cf51aa72eeff3faedfb00fa824075f', sectionTitle: "Payment Method" }),
-            h("div", { key: 'c8ab64e8f0021fcfe4ce5e7a9bac9d867e3aa650', class: "d-table gap-2 w-100" }, h(DetailItem, { key: '70ebccad09e67f53b13673d1f2d19c6438053ac5', title: "ID", value: this.payment.payment_method.card.id }), h(DetailItem, { key: '1cbdb8b281b70a600568d7b82499084695c6a48a', title: "Payment Type", value: "Card" }), h(DetailItem, { key: 'd9696130b92a28560d2a437996d53d3ba6df39ec', title: "Last 4 Numbers", value: this.payment.payment_method.lastFourDigits }), h(DetailItem, { key: 'e93b235819d5b6386ea6f6283f21da7442fd4661', title: "Brand", value: snakeCaseToHumanReadable(this.payment.payment_method.card.brand) }), h(DetailItem, { key: '9ba28b4b099b775cc4f77cff13c74295b12fdfd4', title: "Cardholder", value: this.payment.payment_method.payersName }))
+        return (h(StyledHost, { key: 'aaaea4076938af5a74197256dba1093265f0e2d6' }, this.loading && LoadingState(), !this.loading && this.errorMessage && ErrorState(this.errorMessage), !this.loading && !this.errorMessage &&
+            this.payment && (h("justifi-details", { key: '12f06fa05915380403e244cbed053d0c04bfa1d4', "error-message": this.errorMessage }, h(EntityHeadInfo, { key: '4d496def6abfc728e6f184fb0729ac648fb2deaf', slot: "head-info", badge: h("span", { slot: 'badge', innerHTML: MapPaymentStatusToBadge(this.payment.status) }), title: `${formatCurrency(this.payment.amount)} ${(_a = this.payment) === null || _a === void 0 ? void 0 : _a.currency.toUpperCase()}` }, h(EntityHeadInfoItem, { key: '78dcff13206646d594bdc80f6297d45dc9932694', classes: "border-1 border-end", title: "Updated At", value: `${formatDate(this.payment.updated_at)} ${formatTime(this.payment.updated_at)}` }), h(EntityHeadInfoItem, { key: 'dfa0de667ebd28efd217b6bdf548b9b1b728b57e', classes: "border-1 border-end", title: "Created At", value: `${formatDate(this.payment.created_at)} ${formatTime(this.payment.created_at)}` }), h(EntityHeadInfoItem, { key: 'b449b180034f28504007a9c2fb0598607dc00efb', title: "ID", value: this.payment.id })), h("div", { key: '62af84e244e38b24b32f791d13f1b21b49942597', slot: 'detail-sections' }, h(DetailSectionTitle, { key: '0ddb0366b4ab737c7b08a37764b8ce2f7ec4a1e9', sectionTitle: "Details" }), h("div", { key: 'cb699194db16cb8608834779f560e882f6f9da7c', class: "d-table gap-2 w-100" }, h(DetailItem, { key: '3b6eb4a8b782668951bba90be3b5d522f3f7c69b', title: "Amount", value: formatCurrency(this.payment.amount) }), h(DetailItem, { key: '7a59ab0b12a263c38c40a98acbff6492d370b28b', title: "Fees", value: formatCurrency(this.payment.fee_amount) }), h(DetailItem, { key: 'a9eaa5d1959425205c144dc2aa7c7fad77014290', title: "Refunded", value: formatCurrency(this.payment.amount_refunded) }), h(DetailItem, { key: 'd70c3a4bf48c9c69625d5f27f1095f9b0744a71e', title: "Net", value: formatCurrency(this.payment.balance) }), h(DetailItem, { key: '28f526b1adcd475c2ae88a8bf09ae4aea7935df6', title: "Status", value: MapPaymentStatusToBadge(this.payment.status) }), h(DetailItem, { key: '700f51d787f20f575e3e11aa72a8da29a9587c2a', title: "Payment ID", value: this.payment.id }), h(DetailItem, { key: 'ea72ecc9c2f5055d4b0f6b37cd16cb318f9a797c', title: "Processing Fees", value: formatCurrency(this.payment.fee_amount) }), h(DetailItem, { key: '9d66af2c0c0baef4e8b7b021daf0b4d6adb267d2', title: "Statement Descriptor", value: this.payment.statement_descriptor }), h(DetailItem, { key: '3f21501c1e08feeee1e7427a42faf1c5d1d9c84d', title: "Description", value: this.payment.description })), this.payment.payment_method.card && [
+            h(DetailSectionTitle, { key: 'b7767b93e090c0195aca6c99b66b48d61b6134b3', sectionTitle: "Payment Method" }),
+            h("div", { key: 'a363c7a7e69932a8ffeddb5e0d53f7df13119a9a', class: "d-table gap-2 w-100" }, h(DetailItem, { key: 'fb0e1f64fcec23e513590b3048593565685d8400', title: "ID", value: this.payment.payment_method.card.id }), h(DetailItem, { key: 'bc181b1b94039e1aad341a8e563ba923976c806b', title: "Payment Type", value: "Card" }), h(DetailItem, { key: '88b21dd2368b88232cd0f464c381d4423fe3c774', title: "Last 4 Numbers", value: this.payment.payment_method.lastFourDigits }), h(DetailItem, { key: '040fd71315ead633f9c89e9a9dad906889759d77', title: "Brand", value: snakeCaseToHumanReadable(this.payment.payment_method.card.brand) }), h(DetailItem, { key: '35ebc74de2c5c8fafd95fc5b15ff4f2ca85220cc', title: "Cardholder", value: this.payment.payment_method.payersName }))
         ], this.payment.payment_method.bank_account && [
-            h(DetailSectionTitle, { key: '4f046825e2eeef87ddb614b6eca623fca187b0d3', sectionTitle: "Payment Method" }),
-            h("div", { key: 'b8a01fdd5596adafa252b4fd67df2e30c2e34990', class: "d-table gap-2 w-100" }, h(DetailItem, { key: 'dcd3c8418ebd465812c1dd1fb9b5559ce79e2855', title: "ID", value: this.payment.payment_method.bank_account.id }), h(DetailItem, { key: '86246e11c8c494beb3f2571650f8d78e33b8dbae', title: "Last 4 Numbers", value: this.payment.payment_method.lastFourDigits }), h(DetailItem, { key: 'd3cd7eec7d55ae90d0fd4bc55fad73add0d6d88c', title: "Bank Name", value: this.payment.payment_method.bank_account.brand }), h(DetailItem, { key: '43d7a0b7e37172da32aff94fe01877a32491fba8', title: "Account Owner", value: this.payment.payment_method.payersName }))
-        ], h(DetailSectionTitle, { key: 'd59695a94c44c10615020313be585c0e69374e1c', sectionTitle: 'Metadata' }), h("div", { key: '984dd0d2d0bd5c816dd7098b4e8eebf19e2ebf70', class: "d-table gap-2 w-100" }, h(CodeBlock, { key: 'b2d8cf824ae9aba9d714e688fddbf14a8fdd92d6', metadata: this.payment.metadata })))))));
+            h(DetailSectionTitle, { key: 'f10eef0b4e4067fb78dbff16719a6f266f4e6bab', sectionTitle: "Payment Method" }),
+            h("div", { key: '6c1ef713b5dcabba5b516f3cbbd088d098873303', class: "d-table gap-2 w-100" }, h(DetailItem, { key: '8880fd0fb2b16ee6f177aba15d6f4485c95af252', title: "ID", value: this.payment.payment_method.bank_account.id }), h(DetailItem, { key: 'baa70304d2972f69ce8a5d077a076b16f986745b', title: "Last 4 Numbers", value: this.payment.payment_method.lastFourDigits }), h(DetailItem, { key: 'dcb63b9258bea698bf2d165c611dfa05cb320f30', title: "Bank Name", value: this.payment.payment_method.bank_account.brand }), h(DetailItem, { key: '806696c15aa5ef242c230d9c9aea642ddfdfd93d', title: "Account Owner", value: this.payment.payment_method.payersName }))
+        ], h(DetailSectionTitle, { key: '83289d8f2cf57a624678260555f00af4ea96a566', sectionTitle: 'Metadata' }), h("div", { key: '02e248b962e0c06f4d83bae75a5759b234fea36b', class: "d-table gap-2 w-100" }, h(CodeBlock, { key: '5d81879c7815102219ed010dab9f573ad6b7985d', metadata: this.payment.metadata })))))));
     }
     static get is() { return "payment-details-core"; }
     static get properties() {

package/dist/collection/components/payment-form/payment-form.js

@@ -5,7 +5,7 @@ import { config } from "../../../config";
 import { ComponentErrorCodes, ComponentErrorSeverity } from "../../api/ComponentError";
 import { getErrorMessage } from "../../api/services/utils";
 import JustifiAnalytics from "../../api/Analytics";
-import StyledHost from "../../utils/styled-host/styled-host";
+import { Button, StyledHost } from "../../ui-components";
 export class PaymentForm {
     constructor() {
         this.bankAccount = undefined;
@@ -106,17 +106,15 @@ export class PaymentForm {
         }
     }
     render() {
-        return (h(StyledHost, { key: '3aa9fa4d429ca4b614d51b87b51b1ab868d051e2' }, h("form", { key: '53a0ad2a960971fafb618d5be58af120336b36b9', class: "row gy-3" }, this.showPaymentMethodTypeSelector() && (h("div", { key: 'b322cbe24fcbd81008ccf3a6e587786c0b7febd6', class: "col-12" }, h("justifi-payment-method-selector", { key: '8e77f5e040a73096765c30f1f259f87630ec80a8', selectedPaymentMethodType: this.getSelectedPaymentMethodType(), onPaymentMethodSelected: event => this.paymentMethodSelectedHandler(event) }))), h("div", { key: '415f380e141eea4486fd47b4b2cbfcc7716ecacc', class: "col-12" }, h("justifi-payment-method-form", { key: 'cd4da9f66a030ab344be989a511e23462e3da887', "payment-method-form-type": this.getSelectedPaymentMethodType(), iframeOrigin: config.iframeOrigin, ref: el => {
+        return (h(StyledHost, { key: '38bd6cca38d9068fa9277a8568a98f261a4cc616' }, h("form", { key: 'fec19f5e2f11934e6783124c4c437a2d3947f596', class: "row gy-3" }, this.showPaymentMethodTypeSelector() && (h("div", { key: '18001f78e03336d01de8473a57e3e228e9fce201', class: "col-12" }, h("justifi-payment-method-selector", { key: '260ac1ade3ccfe6baf518eb856bdf4d380025620', selectedPaymentMethodType: this.getSelectedPaymentMethodType(), onPaymentMethodSelected: event => this.paymentMethodSelectedHandler(event) }))), h("div", { key: 'f6ade2336314e05f2bdce75df8577939efe33e3b', class: "col-12" }, h("justifi-payment-method-form", { key: 'ad8e5b121b8425175f7ac7f38ab24dfba1801a28', "payment-method-form-type": this.getSelectedPaymentMethodType(), iframeOrigin: config.iframeOrigin, ref: el => {
                 if (el) {
                     this.paymentMethodFormRef = el;
                 }
-            } })), h("div", { key: '31eefc5775131f658987578da2d5b300292f67b5', class: "col-12" }, h("justifi-billing-form", { key: '11b9bdaa9c1fb26804fcdacfd3706b200ae49486', legend: "Billing Info", ref: el => {
+            } })), h("div", { key: '29f15f1cece3e07a569e514d08bf9996405699c6', class: "col-12" }, h("justifi-billing-form", { key: '9928924cc29bfa5c5e46ada294cb26da0c1d222b', legend: "Billing Info", ref: el => {
                 if (el) {
                     this.billingFormRef = el;
                 }
-            } })), h("slot", { key: '13fe093886828469c941d21c20c931c5cc2cae3d', name: 'insurance' }), h("div", { key: 'a77d44c79333303e59f3efb5c82db9e8830bfcdb', class: "col-12" }, h("button", { key: '50edd44047c81109f075e9ae760e58878b422fbc', "data-testid": "submit-button", type: "submit", onClick: event => this.submit(event), disabled: !this.submitButtonEnabled || this.isLoading, class: `btn btn-primary jfi-submit-button${this.isLoading ? ' jfi-submit-button-loading' : ''}` }, this.isLoading ?
-            h("div", { class: "spinner-border spinner-border-sm", role: "status" }, h("span", { class: "visually-hidden" }, "Loading...")) :
-            this.submitButtonText || 'Submit')))));
+            } })), h("slot", { key: 'c36583ab34bc105b506df27aec02898455855cec', name: 'insurance' }), h("div", { key: 'cc38292ae8a59bc6f4624a8535e8b7c93e6f3a35', class: "col-12" }, h(Button, { key: 'e5fe0f50ee2322ab2a199a6229015c9daa198cc0', variant: "primary", type: "submit", onClick: event => this.submit(event), disabled: !this.submitButtonEnabled || this.isLoading, isLoading: this.isLoading, "data-testid": "submit-button", style: { width: '100%' } }, this.submitButtonText || 'Submit')))));
     }
     static get is() { return "justifi-payment-form"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/payment-form/payment-method-selector.js

@@ -13,7 +13,7 @@ export class PaymentMethodSelector {
         this.paymentMethodSelected.emit(event.target.value);
     }
     render() {
-        return (h("div", { key: '1076a0e9d658245823ace79acde858bdaec85e65', class: "btn-group jfi-btn-radio-group", role: "group", "aria-label": "Radio toggle group for payment method" }, this.paymentMethodTypes.map((paymentMethodType) => (h(Fragment, null, h("input", { id: paymentMethodType, type: "radio", name: "paymentMethodType", value: paymentMethodType, onChange: (event) => this.onChangeHandler(event), checked: this.selectedPaymentMethodType === paymentMethodType, class: "btn-check jfi-btn-radio" }), h("label", { htmlFor: paymentMethodType, class: "btn btn-outline-primary jfi-btn-radio-label" }, PaymentMethodLabels[paymentMethodType]))))));
+        return (h("div", { key: 'a0cd592094f7f69955469de84addde1d4bc5af4d', class: "btn-group jfi-btn-radio-group", role: "group", "aria-label": "Radio toggle group for payment method" }, this.paymentMethodTypes.map((paymentMethodType) => (h(Fragment, null, h("input", { id: paymentMethodType, type: "radio", name: "paymentMethodType", value: paymentMethodType, onChange: (event) => this.onChangeHandler(event), checked: this.selectedPaymentMethodType === paymentMethodType, class: "btn-check jfi-btn-radio" }), h("label", { htmlFor: paymentMethodType, class: "btn btn-outline-primary jfi-btn-radio-label" }, PaymentMethodLabels[paymentMethodType]))))));
     }
     static get is() { return "justifi-payment-method-selector"; }
     static get originalStyleUrls() {

package/dist/collection/components/payment-method-form/payment-method-form.js

@@ -13,6 +13,7 @@ export class PaymentMethodForm {
             const eventTypeMessage = MessageEventType[this.paymentMethodFormType];
             if (eventType === eventTypeMessage.ready) {
                 this.paymentMethodFormReady.emit(data);
+                this.sendStyleOverrides();
             }
             else if (eventType === eventTypeMessage.tokenize) {
                 this.paymentMethodFormTokenized.emit(data);
@@ -70,14 +71,13 @@ export class PaymentMethodForm {
         (_a = this.frameService) === null || _a === void 0 ? void 0 : _a.addMessageListener(this.dispatchMessageEvent);
     }
     render() {
-        return (h(Host, { key: '91a69ce3f918c98248d6bb5df6dc5ec0dffe3c26' }, h("iframe", { key: '99c06be5a78a3849e687f7f95f8fe3382cc2c4cd', id: `justifi-payment-method-form-${this.paymentMethodFormType}`, src: this.getIframeSrc(), ref: el => {
+        return (h(Host, { key: '10987c92745fbff8bb85367db69b76e2bc786c88' }, h("iframe", { key: '0622dd0201a04a3c918fd3d175d2a29f24609759', id: `justifi-payment-method-form-${this.paymentMethodFormType}`, src: this.getIframeSrc(), ref: el => {
                 this.iframeElement = el;
                 this.initializeFrameCommunicationService();
             }, onLoad: () => {
                 iFrameResize({
                     scrollbars: false,
                 }, this.iframeElement);
-                this.sendStyleOverrides();
             } })));
     }
     static get is() { return "justifi-payment-method-form"; }

package/dist/collection/components/payments-list/payments-list-core.js

@@ -1,18 +1,25 @@
 import { h } from "@stencil/core";
 import { pagingDefaults } from "../../api";
 import { MapPaymentStatusToBadge, formatCurrency, formatDate, formatTime } from "../../utils/utils";
-import StyledHost from "../../utils/styled-host/styled-host";
+import { tableExportedParts } from "../table/exported-parts";
+import { StyledHost, TableEmptyState, TableErrorState, TableLoadingState } from "../../ui-components";
 export class PaymentsListCore {
     constructor() {
         this.handleClickPrevious = (beforeCursor) => {
             const newParams = Object.assign({}, this.params);
             delete newParams.after_cursor;
-            this.params = (Object.assign(Object.assign({}, newParams), { before_cursor: beforeCursor }));
+            this.params = Object.assign(Object.assign({}, newParams), { before_cursor: beforeCursor });
         };
         this.handleClickNext = (afterCursor) => {
             const newParams = Object.assign({}, this.params);
             delete newParams.before_cursor;
-            this.params = (Object.assign(Object.assign({}, newParams), { after_cursor: afterCursor }));
+            this.params = Object.assign(Object.assign({}, newParams), { after_cursor: afterCursor });
+        };
+        this.rowClickHandler = (e) => {
+            const clickedPaymentID = e.target.closest('tr').dataset.rowEntityId;
+            if (!clickedPaymentID)
+                return;
+            this.rowClicked.emit(this.payments.find((payment) => payment.id === clickedPaymentID));
         };
         this.handleDateChange = (name, value) => {
             this.params = Object.assign(Object.assign({}, this.params), { [name]: value });
@@ -24,14 +31,14 @@ export class PaymentsListCore {
         this.paging = pagingDefaults;
         this.params = undefined;
     }
+    updateOnPropChange() {
+        this.fetchData();
+    }
     componentWillLoad() {
         if (this.getPayments) {
             this.fetchData();
         }
     }
-    updateOnPropChange() {
-        this.fetchData();
-    }
     fetchData() {
         this.loading = true;
         this.getPayments({
@@ -52,40 +59,61 @@ export class PaymentsListCore {
             },
         });
     }
-    ;
+    get entityId() {
+        return this.payments.map((payment) => payment.id);
+    }
+    get columnData() {
+        return [
+            ['Made On', 'The date and time each payment was made'],
+            ['Amount', 'The dollar amount of each payment'],
+            ['Description', 'The payment description, if you provided one'],
+            ['Cardholder', 'The name associated with the payment method'],
+            ['Payment Method', 'The brand and last 4 digits of the payment method'],
+            ['Status', 'The current status of each payment'],
+            ['Payment ID', 'The unique identifier of each payment'],
+        ];
+    }
+    get rowData() {
+        return this.payments.map((payment) => [
+            {
+                type: 'head',
+                value: `
+          <div class='fw-bold'>${formatDate(payment.created_at)}</div>
+          <div class='fw-bold'>${formatTime(payment.created_at)}</div>
+        `,
+            },
+            formatCurrency(payment.amount),
+            payment.description,
+            payment.payment_method.payersName,
+            payment.payment_method.lastFourDigits,
+            {
+                type: 'inner',
+                value: MapPaymentStatusToBadge(payment.status),
+            },
+            payment.id,
+        ]);
+    }
+    get showEmptyState() {
+        return !this.loading && !this.errorMessage && this.rowData.length < 1;
+    }
+    get showErrorState() {
+        return !this.loading && !!this.errorMessage;
+    }
+    get showRowData() {
+        return !this.showEmptyState && !this.showErrorState;
+    }
     render() {
-        return (h(StyledHost, { key: '84fde18eaf36e21f2b9107bc0527d3ca48d0bf49' }, h("div", { key: '57a7084b5b9fa143209131534119407ed22a6df9', class: "row gy-3 mb-4" }, h("div", { key: 'af0f206b7b2d330614e3c70dc32425a66637b47e', class: "col-2" }, h("form-control-date", { key: '277748b548069199308c2263dffb57bf5327cc1f', name: "created_after", label: "Start Date", inputHandler: this.handleDateChange })), h("div", { key: '8ec2b609f01fe8ab57572cfcefc2842e191579bc', class: "col-2" }, h("form-control-date", { key: 'b646dab8c653b31b2810083335f3e581e86e0344', name: "created_before", label: "End Date", inputHandler: this.handleDateChange }))), h("justifi-table", { key: '1f79a0d94391cdf9a86af65aeeccd9bf7d832af3', rowClickHandler: e => {
-                const clickedPaymentID = e.target.closest('tr').dataset.rowEntityId;
-                if (!clickedPaymentID) {
-                    return;
+        var _a, _b;
+        return (h(StyledHost, { key: 'e4a4b64b2927a009f7ad4e9e2ebb4c020401423c', exportparts: tableExportedParts }, h("div", { key: '6ac1c84338b84972ca9b001ecd2b90134c99de6b', class: "row gy-3 mb-4" }, h("div", { key: '1d279ec66bc0755b876e29f06ac24d51baa77caa', class: "col-2" }, h("form-control-date", { key: '65b29c031021f3f782c9a4597167dc5e3a44e7da', name: "created_after", label: "Start Date", inputHandler: this.handleDateChange })), h("div", { key: 'a032497a94cc8108fda6efbb741069407e1a5afe', class: "col-2" }, h("form-control-date", { key: '5dd62ebdbf3836567a9ccb03dec850ebe675cb79', name: "created_before", label: "End Date", inputHandler: this.handleDateChange }))), h("div", { key: 'be4094afd3aec1d742d9d3245c2f6fc50cb95fa0', class: "table-wrapper" }, h("table", { key: 'ed493e35f2bddd59d1034dffe2bcd8b54a6390d6', class: "table table-hover" }, h("thead", { key: 'fae77bda1ffc35ac5414743ab51c2fe1dfbbc29e', class: "table-head sticky-top", part: "table-head" }, h("tr", { key: '5be3b1e9883d337046c386046565fb6ac3366324', class: "table-light text-nowrap", part: "table-head-row" }, (_a = this.columnData) === null || _a === void 0 ? void 0 : _a.map((column) => (h("th", { part: "table-head-cell", scope: "col", title: Array.isArray(column) ? column[1] : '' }, !Array.isArray(column) ? column : column[0]))))), h("tbody", { key: 'ba950a1da1ec0dffd7bc8457cdb3ce65d0f8b69b', class: "table-body", part: "table-body" }, h(TableLoadingState, { key: '8d13d8f6b64377f560d06410c09d24293708b6a8', columnSpan: this.columnData.length, isLoading: this.loading }), h(TableEmptyState, { key: 'c75d61977b26ca5d4aa3711bae1ce6e571b3e3b2', isEmpty: this.showEmptyState, columnSpan: this.columnData.length }), h(TableErrorState, { key: '08e3f88116de5783f018a0c06d21d0d9cc4f5feb', columnSpan: this.columnData.length, errorMessage: this.errorMessage }), this.showRowData &&
+            this.rowData.map((data, index) => (h("tr", { "data-test-id": "table-row", "data-row-entity-id": this.entityId[index], onClick: this.rowClickHandler, part: `table-row ${index % 2 ? 'table-row-even' : 'table-row-odd'}` }, data.map((dataEntry) => {
+                let nestedHtml = dataEntry === null || dataEntry === void 0 ? void 0 : dataEntry.type;
+                if (nestedHtml) {
+                    return h("td", { part: "table-cell", innerHTML: dataEntry.value });
                 }
-                this.rowClicked.emit(this.payments.find((payment) => payment.id === clickedPaymentID));
-            }, entityId: this.payments.map((payment) => payment.id), columnData: [
-                ['Made On', 'The date and time each payment was made'],
-                ['Amount', 'The dollar amount of each payment'],
-                ['Description', 'The payment description, if you provided one'],
-                ['Cardholder', 'The name associated with the payment method'],
-                ['Payment Method', 'The brand and last 4 digits of the payment method'],
-                ['Status', 'The current status of each payment'],
-                ['Payment ID', 'The unique identifier of each payment']
-            ], rowData: this.payments.map((payment) => ([
-                {
-                    type: 'head',
-                    value: `
-                    <div class='fw-bold'>${formatDate(payment.created_at)}</div>
-                    <div class='fw-bold'>${formatTime(payment.created_at)}</div>
-                  `,
-                },
-                formatCurrency(payment.amount),
-                payment.description,
-                payment.payment_method.payersName,
-                payment.payment_method.lastFourDigits,
-                {
-                    type: 'inner',
-                    value: MapPaymentStatusToBadge(payment.status)
-                },
-                payment.id
-            ])), loading: this.loading, "error-message": this.errorMessage, params: this.params, paging: Object.assign(Object.assign({}, this.paging), { handleClickNext: this.handleClickNext, handleClickPrevious: this.handleClickPrevious }) })));
+                else {
+                    return h("td", { part: "table-cell" }, dataEntry);
+                }
+            }))))), this.paging && (h("tfoot", { key: '728f671ab03923c90e11901a0d3aac4bc30e72a7', class: "sticky-bottom" }, h("tr", { key: 'd0df9b7c857287eec9568157ecf8f547a01f2fc5', class: "table-light align-middle" }, h("td", { key: 'e0de54912240b3e812f37ea675b2eef50d9545c4', part: "pagination-bar", colSpan: (_b = this.columnData) === null || _b === void 0 ? void 0 : _b.length }, h("pagination-menu", { key: 'f2d7846030a5aaa0c2311cad61f4d5865440a904', paging: Object.assign(Object.assign({}, this.paging), { handleClickPrevious: this.handleClickPrevious, handleClickNext: this.handleClickNext }), params: this.params })))))))));
     }
     static get is() { return "payments-list-core"; }
     static get properties() {

package/dist/collection/components/payout-details/payout-details-core.js

@@ -1,7 +1,7 @@
 import { h } from "@stencil/core";
 import { MapPayoutStatusToBadge, formatCurrency, formatDate, formatTime } from "../../utils/utils";
 import { CodeBlock, DetailItem, DetailSectionTitle, EntityHeadInfo, EntityHeadInfoItem, ErrorState, LoadingState } from "../details/utils";
-import StyledHost from "../../utils/styled-host/styled-host";
+import { StyledHost } from "../../ui-components";
 export class PayoutDetailsCore {
     constructor() {
         this.downloadCSV = () => {
@@ -52,7 +52,7 @@ export class PayoutDetailsCore {
     }
     render() {
         var _a;
-        return (h(StyledHost, { key: 'da7690d5e4b21e8cb32651080ef2c8df29440c1b' }, this.loading && LoadingState(), !this.loading && this.errorMessage && ErrorState(this.errorMessage), !this.loading && this.payout && (h("justifi-details", { key: '4d9a7636e345bc5dd88b910add3a340e22589c52', "error-message": this.errorMessage }, h(EntityHeadInfo, { key: '91d6eb90ec40052d858f4736a9c60d9c9a96d40d', slot: "head-info", badge: h("span", { slot: 'badge', innerHTML: MapPayoutStatusToBadge((_a = this.payout) === null || _a === void 0 ? void 0 : _a.status) }), title: `${formatCurrency(this.payout.amount)} ${this.payout.currency.toUpperCase()}` }, h(EntityHeadInfoItem, { key: 'be9f9b43c294b76326f1ce63af79217b8abf5b0d', classes: "border-1 border-end", title: "Updated At", value: `${formatDate(this.payout.updated_at)} ${formatTime(this.payout.updated_at)}` }), h(EntityHeadInfoItem, { key: '2c8fb8d4a4b8f1517028acc410bdb4adbafe67a4', classes: "border-1 border-end", title: "Created At", value: `${formatDate(this.payout.created_at)} ${formatTime(this.payout.created_at)}` }), h(EntityHeadInfoItem, { key: '4ca663f7bbfa9bdf8fa01fe0b40fc5f6dc65dfbb', title: "ID", value: this.payout.id }), h("div", { key: '44b484491b5ec470270b469de15076d6d55e61d0', class: "m-4" }, h("button", { key: 'ca8b6cb61b56caebbec1eeb01e6de638865219bd', class: "btn btn-outline-secondary d-flex align-items-center", onClick: this.downloadCSV }, "Export CSV"))), h("div", { key: '2f959d7c549dc1f8e4df2e8d12ab9988255aba03', slot: 'detail-sections' }, h(DetailSectionTitle, { key: '741717a3e056163ee88452998f2d6e5b7dc0ccc1', sectionTitle: "Details" }), h("div", { key: 'd456b3a372525a0eff6c724e507ff325951fa430', class: "d-table gap-2 w-100" }, h(DetailItem, { key: 'a27cf5fbc2851f74bb4813d0bd49718dfe2f7d8d', title: "Date paid", value: formatDate(this.payout.deposits_at) }), h(DetailItem, { key: '90f49509ff399a9c164a7aeaf7307077b59e8559', title: "Statement Description", value: this.payout.description }), h(DetailItem, { key: '52ef8b50065db1a111b003e9ceadfa1cc4076b74', title: "Payout Method", value: this.payout.delivery_method }), h(DetailItem, { key: 'ee73a34d15af0cc677fc6d903706df3f10249bdf', title: "Amount", value: formatCurrency(this.payout.amount) }), h(DetailItem, { key: '229827b98fd76bd1dec1beeac0d99517d09dc677', title: "Fee", value: formatCurrency(this.payout.fees_total) })), h(DetailSectionTitle, { key: '1f4bb886e4a07b5054107aa00c2b98644e87859b', sectionTitle: "Account" }), h("div", { key: '78181a7ae216bf3b0013eee0494b4b149a2ec9c3', class: "d-table gap-2 w-100" }, h(DetailItem, { key: '273cabd55194c104d1d421db53030601f5efa83c', title: "ID", value: this.payout.account_id }), h(DetailItem, { key: '1751e4b9d5453bc41fd3b29cf7e5d3955e375bb7', title: "Account Type", value: this.payout.bank_account.account_type }), h(DetailItem, { key: '1d5489f81d96025bdf7d7391623ddcc1ff3a7978', title: "Institution", value: this.payout.bank_account.account_type }), h(DetailItem, { key: 'f17d8096799b7eeba7c550ad828f2ffa97b65f56', title: "Routing Number", value: this.payout.bank_account.routing_number }), h(DetailItem, { key: 'cf3c83de7f119738940951a9481253ed855c768e', title: "Account Number", value: this.payout.bank_account.account_number_last4 })), h(DetailSectionTitle, { key: '458186b5bd7fb0aa954c283dee08e5090b164b27', sectionTitle: 'Metadata' }), h("div", { key: '90866a28028af6c7e46ab89c221016cd698299f2', class: "d-table gap-2 w-100" }, h(CodeBlock, { key: 'ed25523342b6a751e48d2d7c11cef7e541b6ed3b', metadata: this.payout.metadata })))))));
+        return (h(StyledHost, { key: 'fdf7905cdc7696414b765d61d0f78c7193cbbc76' }, this.loading && LoadingState(), !this.loading && this.errorMessage && ErrorState(this.errorMessage), !this.loading && this.payout && (h("justifi-details", { key: 'f79827c287d68484a87232ae956a1c15e3d7044d', "error-message": this.errorMessage }, h(EntityHeadInfo, { key: 'dfa9c228f2cd1b0b2d14dc6ce44478ee8fc35d00', slot: "head-info", badge: h("span", { slot: 'badge', innerHTML: MapPayoutStatusToBadge((_a = this.payout) === null || _a === void 0 ? void 0 : _a.status) }), title: `${formatCurrency(this.payout.amount)} ${this.payout.currency.toUpperCase()}` }, h(EntityHeadInfoItem, { key: '6b5907e3f7753d4e2f6ba59bfe509d97e2a4c1c0', classes: "border-1 border-end", title: "Updated At", value: `${formatDate(this.payout.updated_at)} ${formatTime(this.payout.updated_at)}` }), h(EntityHeadInfoItem, { key: '63b7497217a00268190eaea1475639fc5e0b43ca', classes: "border-1 border-end", title: "Created At", value: `${formatDate(this.payout.created_at)} ${formatTime(this.payout.created_at)}` }), h(EntityHeadInfoItem, { key: 'e26e56abbac3e12584c187f6f1b560b0f4b33a6f', title: "ID", value: this.payout.id }), h("div", { key: 'e84dd653fb1adc566b0afbfdfc87cce40ed47280', class: "m-4" }, h("button", { key: 'fac0022786dc03349a65dc54729dc2f508c9441f', class: "btn btn-outline-secondary d-flex align-items-center", onClick: this.downloadCSV }, "Export CSV"))), h("div", { key: '9cf642b803c59146895b762eaff40f5026c9f94b', slot: 'detail-sections' }, h(DetailSectionTitle, { key: '90ed8aafabf9eebb47da15c6c8b8d1f527d23557', sectionTitle: "Details" }), h("div", { key: '592b8489fa30441bbf11a52d3daf6a2debcc121f', class: "d-table gap-2 w-100" }, h(DetailItem, { key: '0885f3ece509936d1e1bad64d4a998fbc487ee3a', title: "Date paid", value: formatDate(this.payout.deposits_at) }), h(DetailItem, { key: 'b8a7da2bfeada94c8c7c080b516c1bc7fc26f414', title: "Statement Description", value: this.payout.description }), h(DetailItem, { key: 'd8928341e89161d4bafc2940f1aa738b345779dd', title: "Payout Method", value: this.payout.delivery_method }), h(DetailItem, { key: '570bd2a2d44f094870e61debca61c2b5aa772679', title: "Amount", value: formatCurrency(this.payout.amount) }), h(DetailItem, { key: '2882865db185d1668103d819e62cf61edc711697', title: "Fee", value: formatCurrency(this.payout.fees_total) })), h(DetailSectionTitle, { key: 'f9735ff73c650ad318d771df5c22c7d8834a09f6', sectionTitle: "Account" }), h("div", { key: 'd7d53fd77e704035a19dc15bc04ee06dfaa0c51a', class: "d-table gap-2 w-100" }, h(DetailItem, { key: '486ae1c4ae990928bf24cc687cb4456bbc6e18ea', title: "ID", value: this.payout.account_id }), h(DetailItem, { key: '528d7d6a299aa1019125f34fc903ea622d09de53', title: "Account Type", value: this.payout.bank_account.account_type }), h(DetailItem, { key: 'eafb132e84de81d41bd154aec55974d8496995dd', title: "Institution", value: this.payout.bank_account.account_type }), h(DetailItem, { key: '7f565f8dfacab4cf8edc7025d839dff1d8de2719', title: "Routing Number", value: this.payout.bank_account.routing_number }), h(DetailItem, { key: '61338f5ed539d70b4caa08ffa200d8e47f52ebde', title: "Account Number", value: this.payout.bank_account.account_number_last4 })), h(DetailSectionTitle, { key: 'cea128826f004ece9e6c29c97c07e98a3d45706c', sectionTitle: 'Metadata' }), h("div", { key: 'bf884c3dafa50cd1b8e0d98711f0fe5fc9d60391', class: "d-table gap-2 w-100" }, h(CodeBlock, { key: '2d92e2f8d6f032cbaff741da43ca97424b8decaf', metadata: this.payout.metadata })))))));
     }
     static get is() { return "payout-details-core"; }
     static get properties() {