@justifi/webcomponents 4.18.0 → 4.19.0

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

@@ -3,11 +3,11 @@ import { p as pagingDefaults } from './Pagination.js';
 import './Payment.js';
 import './Payout.js';
 import { g as formatDate, k as formatTime, a as formatCurrency, M as MapPaymentStatusToBadge } from './utils2.js';
+import { t as tableExportedParts, T as TableLoadingState, a as TableEmptyState, b as TableErrorState } from './exported-parts.js';
 import { S as StyledHost } from './styled-host.js';
-import { d as defineCustomElement$5 } from './form-control-date2.js';
-import { d as defineCustomElement$4 } from './form-control-error-text2.js';
-import { d as defineCustomElement$3 } from './form-control-help-text2.js';
-import { d as defineCustomElement$2 } from './table.js';
+import { d as defineCustomElement$4 } from './form-control-date2.js';
+import { d as defineCustomElement$3 } from './form-control-error-text2.js';
+import { d as defineCustomElement$2 } from './form-control-help-text2.js';
 import { d as defineCustomElement$1 } from './pagination-menu2.js';
 
 const PaymentsListCore = /*@__PURE__*/ proxyCustomElement(class PaymentsListCore extends HTMLElement {
@@ -19,12 +19,18 @@ const PaymentsListCore = /*@__PURE__*/ proxyCustomElement(class PaymentsListCore
         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 });
@@ -36,14 +42,14 @@ const PaymentsListCore = /*@__PURE__*/ proxyCustomElement(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({
@@ -64,40 +70,61 @@ const PaymentsListCore = /*@__PURE__*/ proxyCustomElement(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 watchers() { return {
         "params": ["updateOnPropChange"],
@@ -118,7 +145,7 @@ function defineCustomElement() {
     if (typeof customElements === "undefined") {
         return;
     }
-    const components = ["payments-list-core", "form-control-date", "form-control-error-text", "form-control-help-text", "justifi-table", "pagination-menu"];
+    const components = ["payments-list-core", "form-control-date", "form-control-error-text", "form-control-help-text", "pagination-menu"];
     components.forEach(tagName => { switch (tagName) {
         case "payments-list-core":
             if (!customElements.get(tagName)) {
@@ -126,21 +153,16 @@ function defineCustomElement() {
             }
             break;
         case "form-control-date":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$5();
-            }
-            break;
-        case "form-control-error-text":
             if (!customElements.get(tagName)) {
                 defineCustomElement$4();
             }
             break;
-        case "form-control-help-text":
+        case "form-control-error-text":
             if (!customElements.get(tagName)) {
                 defineCustomElement$3();
             }
             break;
-        case "justifi-table":
+        case "form-control-help-text":
             if (!customElements.get(tagName)) {
                 defineCustomElement$2();
             }

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

@@ -57,7 +57,7 @@ const PayoutDetailsCore = /*@__PURE__*/ proxyCustomElement(class PayoutDetailsCo
     }
     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 watchers() { return {
         "getPayout": ["getPayoutWatcher"]

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

@@ -3,12 +3,12 @@ import { p as pagingDefaults } from './Pagination.js';
 import './Payment.js';
 import { a as PayoutStatuses, b as PayoutStatusesSafeNames } from './Payout.js';
 import { g as formatDate, k as formatTime, a as formatCurrency } from './utils2.js';
-import { d as defineCustomElement$2, t as tableExportedParts } from './table.js';
 import { C as ComponentErrorCodes, a as ComponentErrorSeverity } from './ComponentError.js';
+import { t as tableExportedParts, T as TableLoadingState, a as TableEmptyState, b as TableErrorState } from './exported-parts.js';
 import { S as StyledHost } from './styled-host.js';
-import { d as defineCustomElement$5 } from './form-control-date2.js';
-import { d as defineCustomElement$4 } from './form-control-error-text2.js';
-import { d as defineCustomElement$3 } from './form-control-help-text2.js';
+import { d as defineCustomElement$4 } from './form-control-date2.js';
+import { d as defineCustomElement$3 } from './form-control-error-text2.js';
+import { d as defineCustomElement$2 } from './form-control-help-text2.js';
 import { d as defineCustomElement$1 } from './pagination-menu2.js';
 
 const DownloadIcon = (props) => (h("svg", Object.assign({ xmlns: 'http://www.w3.org/2000/svg', viewBox: '0 0 24 24' }, props),
@@ -22,6 +22,31 @@ const PayoutsListCore = /*@__PURE__*/ proxyCustomElement(class PayoutsListCore e
         this.__registerHost();
         this.rowClicked = createEvent(this, "payout-row-clicked", 7);
         this.errorEvent = createEvent(this, "error-event", 7);
+        this.downloadCSV = (payoutId) => {
+            this.getPayoutCSV({
+                payoutId,
+                onError: () => {
+                    this.errorEvent.emit({
+                        errorCode: ComponentErrorCodes.FETCH_ERROR,
+                        message: 'Failed to download CSV',
+                        severity: ComponentErrorSeverity.ERROR,
+                    });
+                },
+            });
+        };
+        this.handleDateChange = (name, value) => {
+            this.params = Object.assign(Object.assign({}, this.params), { [name]: value });
+        };
+        this.handleClickPrevious = (beforeCursor) => {
+            const newParams = Object.assign({}, this.params);
+            delete newParams.after_cursor;
+            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.mapStatusToBadge = (status) => {
             switch (status) {
                 case PayoutStatuses.scheduled:
@@ -33,35 +58,16 @@ const PayoutsListCore = /*@__PURE__*/ proxyCustomElement(class PayoutsListCore e
                 case PayoutStatuses.canceled:
                     return `<span class="badge bg-danger" title='Transfer to your bank account failed'>${PayoutStatusesSafeNames[status]}</span>`;
                 case PayoutStatuses.forwarded:
-                    return `<span class="badge bg-secondary" title='This payout initially failed; the funds have been forwarded to your next successful payout'>${PayoutStatusesSafeNames[status]}</span>`;
+                    return `<span class="badge bg-secondary" title='The funds have been forwarded to your next successful payout'>${PayoutStatusesSafeNames[status]}</span>`;
                 case PayoutStatuses.paid:
                     return `<span class="badge bg-success" title='Successfully deposited into your bank account'>${PayoutStatusesSafeNames[status]}</span>`;
             }
         };
-        this.handleClickPrevious = (beforeCursor) => {
-            const newParams = Object.assign({}, this.params);
-            delete newParams.after_cursor;
-            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.downloadCSV = (payoutId) => {
-            this.getPayoutCSV({
-                payoutId,
-                onError: () => {
-                    this.errorEvent.emit({
-                        errorCode: ComponentErrorCodes.FETCH_ERROR,
-                        message: 'Failed to download CSV',
-                        severity: ComponentErrorSeverity.ERROR
-                    });
-                }
-            });
-        };
-        this.handleDateChange = (name, value) => {
-            this.params = Object.assign(Object.assign({}, this.params), { [name]: value });
+        this.rowClickHandler = (e) => {
+            const clickedPayoutID = e.target.closest('tr').dataset.rowEntityId;
+            if (!clickedPayoutID)
+                return;
+            this.rowClicked.emit(this.payouts.find((payout) => payout.id === clickedPayoutID));
         };
         this.getPayouts = undefined;
         this.getPayoutCSV = undefined;
@@ -71,14 +77,14 @@ const PayoutsListCore = /*@__PURE__*/ proxyCustomElement(class PayoutsListCore e
         this.paging = pagingDefaults;
         this.params = undefined;
     }
+    updateOnPropChange() {
+        this.fetchData();
+    }
     componentWillLoad() {
         if (this.getPayouts) {
             this.fetchData();
         }
     }
-    updateOnPropChange() {
-        this.fetchData();
-    }
     fetchData() {
         this.loading = true;
         this.getPayouts({
@@ -93,54 +99,63 @@ const PayoutsListCore = /*@__PURE__*/ proxyCustomElement(class PayoutsListCore e
                 this.errorEvent.emit({
                     errorCode: code,
                     message: error,
-                    severity
+                    severity,
                 });
                 this.loading = false;
             },
         });
     }
-    ;
+    get entityId() {
+        return this.payouts.map((payout) => payout.id);
+    }
+    get columnData() {
+        return [
+            ['Paid Out On', 'The date each transaction occurred'],
+            ['Type', 'The type of each transaction'],
+            ['Account', 'The ID of the account associated with each payout'],
+            ['Paid Out To', 'The bank account to which each payout was transferred'],
+            ['Payments', 'Sum of payments in each payout'],
+            ['Refunds', 'Sum of refunds in each payout'],
+            ['Fees', 'Sum of fees in each payout'],
+            ['Other', 'Sum of less common transactions in each payout'],
+            ['Payout Amount', 'The net sum of all transactions in each payout'],
+            ['Status', 'The real-time status of each payout'],
+            ['Actions', ''],
+        ];
+    }
+    get rowData() {
+        return this.payouts.map((payout) => [
+            {
+                type: 'head',
+                value: `
+          <div class='fw-bold'>${formatDate(payout.created_at)}</div>
+          <div class='fw-bold'>${formatTime(payout.created_at)}</div>
+        `,
+            },
+            payout.payout_type,
+            payout.account_id,
+            `${payout.bank_account.full_name} ${payout.bank_account.account_number_last4}`,
+            formatCurrency(payout.payments_total),
+            formatCurrency(payout.refunds_total),
+            formatCurrency(payout.fees_total),
+            formatCurrency(payout.other_total),
+            formatCurrency(payout.amount),
+            { type: 'inner', value: this.mapStatusToBadge(payout.status) },
+            (h(DownloadIcon, { title: "Export CSV", onClick: () => this.downloadCSV(payout.id), style: { height: '24px', width: '24px', cursor: 'pointer' } })),
+        ]);
+    }
+    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: '469e4d0a5fcb7370d0d076e9f27cf5102235324e', exportedparts: tableExportedParts }, h("div", { key: '883f193b2da3cdd3da3f31422def69d206ead983', class: "row gy-3 mb-4" }, h("div", { key: '585684441aeded4619f9a0f03151b5e8dd2219d8', class: "col-2" }, h("form-control-date", { key: 'bc69d932f1d32074b3f0fdd2c9dba6f9601db891', name: "created_after", label: "Date from:", inputHandler: this.handleDateChange })), h("div", { key: 'd026150a6a09ad49f549ea2b5174a1ed311987dc', class: "col-2" }, h("form-control-date", { key: '2621b14359b8159270d67e53f9ad2f6464cbb467', name: "created_before", label: "Date to:", inputHandler: this.handleDateChange }))), h("justifi-table", { key: '757c9bbee39356ee23819f0e7e4d3b096bdf38f6', rowClickHandler: (e) => {
-                const clickedPayoutID = e.target.closest('tr').dataset.rowEntityId;
-                if (!clickedPayoutID) {
-                    return;
-                }
-                this.rowClicked.emit(this.payouts.find((payout) => payout.id === clickedPayoutID));
-            }, columnData: [
-                ['Paid Out On', 'The date each transaction occurred'],
-                ['Type', 'The type of each transaction'],
-                ['Account', 'The ID of the account associated with each payout'],
-                ['Paid Out To', 'The bank account to which each payout was transferred'],
-                ['Payments', 'Sum of payments in each payout'],
-                ['Refunds', 'Sum of refunds in each payout'],
-                ['Fees', 'Sum of fees in each payout'],
-                ['Other', 'Sum of less common transactions in each payout (disputes, ACH returns, fee refunds, and forwarded balances due to failed payouts)'],
-                ['Payout Amount', 'The net sum of all transactions in each payout. This is the amount you\'ll see reflected on your bank statement'],
-                ['Status', 'The real-time status of each payout'],
-                ['Actions', '']
-            ], entityId: this.payouts.map((payout) => payout.id), rowData: this.payouts.map((payout) => ([
-                {
-                    type: 'head',
-                    value: `
-                    <div class='fw-bold'>${formatDate(payout.created_at)}</div>
-                    <div class='fw-bold'>${formatTime(payout.created_at)}</div>
-                  `,
-                },
-                payout.payout_type,
-                payout.account_id,
-                `${payout.bank_account.full_name} ${payout.bank_account.account_number_last4}`,
-                formatCurrency(payout.payments_total),
-                formatCurrency(payout.refunds_total),
-                formatCurrency(payout.fees_total),
-                formatCurrency(payout.other_total),
-                formatCurrency(payout.amount),
-                {
-                    type: 'inner',
-                    value: this.mapStatusToBadge(payout.status)
-                },
-                (h(DownloadIcon, { title: "Export CSV", onClick: () => this.downloadCSV(payout.id), style: { height: '24px', width: '24px', cursor: 'pointer' } }))
-            ])), loading: this.loading, "error-message": this.errorMessage, params: this.params, paging: Object.assign(Object.assign({}, this.paging), { handleClickNext: this.handleClickNext, handleClickPrevious: this.handleClickPrevious }) })));
+        return (h(StyledHost, { key: '594c52003f897f4c50f79935e42a7042fb5ec168', exportedparts: tableExportedParts }, h("div", { key: 'f2b1d971e1e7bc5596459c071c3aa931ba4cb4b9', class: "row gy-3 mb-4" }, h("div", { key: 'd98e3ed56421493a60bd0a285079aa99ae705506', class: "col-2" }, h("form-control-date", { key: 'c9c899884bcc6fa6d306b95473ef0a7354e57bd5', name: "created_after", label: "Date from:", inputHandler: this.handleDateChange })), h("div", { key: '0059a75bf2f478b107d59bd9d7cc29de10dffe57', class: "col-2" }, h("form-control-date", { key: 'ef9a31ac8a8e7336386664b70289ee34677152a4', name: "created_before", label: "Date to:", inputHandler: this.handleDateChange }))), h("div", { key: '65da1114a66ac4cdf8d6ec012a42b2f760af5c76', class: "table-wrapper" }, h("table", { key: 'd68d8f61835cc4dc5dc988ff61843e6254494ace', class: "table table-hover" }, h("thead", { key: 'aa691db8fbfbcdad59acbdc1ef38497b552928ab', class: "table-head sticky-top", part: "table-head" }, h("tr", { key: 'aa9f61cbf05b9420026861cb14e6a30a6c9e347e', class: "table-light text-nowrap", part: "table-head-row" }, this.columnData.map((column) => (h("th", { part: "table-head-cell", scope: "col", title: Array.isArray(column) ? column[1] : '' }, Array.isArray(column) ? column[0] : column))))), h("tbody", { key: 'cf0127f26e8bc5b7afbbfc4a36fab4de948d1727', class: "table-body", part: "table-body" }, h(TableLoadingState, { key: 'd6b832786c4959176974c7a343442c8d1c50b5c2', columnSpan: this.columnData.length, isLoading: this.loading }), h(TableEmptyState, { key: '398a20957f76ba14e1b0677fbd6fbfbacce61fbb', isEmpty: this.showEmptyState, columnSpan: this.columnData.length }), h(TableErrorState, { key: 'd9f755a07a6f8cd4967eac60beff92f36322dcdd', 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) => ((dataEntry === null || dataEntry === void 0 ? void 0 : dataEntry.type) ? (h("td", { part: "table-cell", innerHTML: dataEntry.value })) : (h("td", { part: "table-cell" }, dataEntry)))))))), this.paging && (h("tfoot", { key: '503fa3a3a7ffe5d52b614153b286dd0326c02091', class: "sticky-bottom" }, h("tr", { key: 'e3af74b96bfc1f5ac1f0f0655eaed096102d0e89', class: "table-light align-middle" }, h("td", { key: 'a53f9d37181ea29a9fcb6ab46b2daf7cc66509be', part: "pagination-bar", colSpan: this.columnData.length }, h("pagination-menu", { key: 'b0779289444747e0b18bb63e6a17cdc89bd390ca', paging: Object.assign(Object.assign({}, this.paging), { handleClickPrevious: this.handleClickPrevious, handleClickNext: this.handleClickNext }), params: this.params })))))))));
     }
     static get watchers() { return {
         "params": ["updateOnPropChange"],
@@ -162,7 +177,7 @@ function defineCustomElement() {
     if (typeof customElements === "undefined") {
         return;
     }
-    const components = ["payouts-list-core", "form-control-date", "form-control-error-text", "form-control-help-text", "justifi-table", "pagination-menu"];
+    const components = ["payouts-list-core", "form-control-date", "form-control-error-text", "form-control-help-text", "pagination-menu"];
     components.forEach(tagName => { switch (tagName) {
         case "payouts-list-core":
             if (!customElements.get(tagName)) {
@@ -170,21 +185,16 @@ function defineCustomElement() {
             }
             break;
         case "form-control-date":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$5();
-            }
-            break;
-        case "form-control-error-text":
             if (!customElements.get(tagName)) {
                 defineCustomElement$4();
             }
             break;
-        case "form-control-help-text":
+        case "form-control-error-text":
             if (!customElements.get(tagName)) {
                 defineCustomElement$3();
             }
             break;
-        case "justifi-table":
+        case "form-control-help-text":
             if (!customElements.get(tagName)) {
                 defineCustomElement$2();
             }

package/dist/module/save-new-payment-method.js

@@ -13,7 +13,7 @@ const SaveNewPaymentMethod = /*@__PURE__*/ proxyCustomElement(class SaveNewPayme
         this.checkboxChanged.emit(this.isChecked);
     }
     render() {
-        return (h("div", { key: '9492361a8c6d1b0cc29638811ddf41fb2e0e4a8c', class: "mt-4 form-check" }, h("input", { key: 'ef0b68d5daf26ec3c273839d79a66c03a6ae2af7', type: "checkbox", checked: this.isChecked, onChange: (event) => this.handleCheckboxChange(event), class: "form-check-input" }), h("label", { key: '4dbd3b1501c8de8feedf738d73eb6e3e7fa2ad3a', class: "form-check-label" }, "Save new payment method")));
+        return (h("div", { key: 'f22a132a518a98786c8486e08c9a65050f3c5ea0', class: "mt-4 form-check" }, h("input", { key: '6f1392f9dd29a9761f5942b0a40e05a899858ada', type: "checkbox", checked: this.isChecked, onChange: (event) => this.handleCheckboxChange(event), class: "form-check-input" }), h("label", { key: 'e6e5908ba70ece8ea19370a04104d88d17237fc7', class: "form-check-label" }, "Save new payment method")));
     }
 }, [0, "justifi-save-new-payment-method", {
         "isChecked": [32]

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

@@ -44,7 +44,7 @@ const SavedPaymentMethod = /*@__PURE__*/ proxyCustomElement(class SavedPaymentMe
     ;
     render() {
         var _a, _b, _c, _d, _e;
-        return (h(Fragment, { key: '534f00b35ee4eda915babee7a12e4e08467f85e0' }, h("div", { key: 'a4a584ec84fc8d227c40f7a783e502f1d71eb94a', class: "payment-method" }, h("div", { key: '2df6119670eb7f9499a68b243af86d26e11e4f90', class: "payment-method-header p-3", onClick: () => this.onPaymentMethodOptionClick() }, h("input", { key: 'd25e191a695d04657a84a364cd60544f593f470d', type: "radio", name: "paymentMethodType", id: (_a = this.paymentMethodOption) === null || _a === void 0 ? void 0 : _a.id, value: (_b = this.paymentMethodOption) === null || _b === void 0 ? void 0 : _b.id, onClick: (event) => event.preventDefault(), checked: this.isSelected, class: "form-check-input me-2" }), h("label", { key: '80f658216d46b048f5cb857b96a7c5a8f86c4e85', htmlFor: (_c = this.paymentMethodOption) === null || _c === void 0 ? void 0 : _c.id, class: "form-check-label" }, CardBrandLabels[(_d = this.paymentMethodOption) === null || _d === void 0 ? void 0 : _d.brand], " *", (_e = this.paymentMethodOption) === null || _e === void 0 ? void 0 :
+        return (h(Fragment, { key: '9c2174123f1675d60bc48d8109821c0bc2ad7682' }, h("div", { key: '07bffce2603110d44f38ffb2f57a60f07faddb3b', class: "payment-method" }, h("div", { key: 'f489d3a05db45c2b2581bc8f0fc093afed453d91', class: "payment-method-header p-3", onClick: () => this.onPaymentMethodOptionClick() }, h("input", { key: '70681612520aa621c39a017b72b25a7dd3211282', type: "radio", name: "paymentMethodType", id: (_a = this.paymentMethodOption) === null || _a === void 0 ? void 0 : _a.id, value: (_b = this.paymentMethodOption) === null || _b === void 0 ? void 0 : _b.id, onClick: (event) => event.preventDefault(), checked: this.isSelected, class: "form-check-input me-2" }), h("label", { key: 'a58e14ae9d199b0e0eb01b4c0a4a8bd9c8fec41d', htmlFor: (_c = this.paymentMethodOption) === null || _c === void 0 ? void 0 : _c.id, class: "form-check-label" }, CardBrandLabels[(_d = this.paymentMethodOption) === null || _d === void 0 ? void 0 : _d.brand], " *", (_e = this.paymentMethodOption) === null || _e === void 0 ? void 0 :
             _e.acct_last_four)))));
     }
 }, [0, "justifi-saved-payment-method", {

package/dist/module/schema-validations.js

@@ -1,4 +1,4 @@
-import { a as create$6, b as create$8 } from './index.esm.js';
+import { a as create$6, b as create$8 } from './form.js';
 import { S as StateOptions } from './state-options.js';
 import { a as businessClassificationOptions, b as businessServiceReceivedOptions, r as recurringPaymentsOptions, s as seasonalBusinessOptions, c as bankAccountTypeOptions } from './business-form-options.js';
 import { E as EntityDocumentType } from './Document.js';

package/dist/module/season-interruption-insurance-core.js

@@ -111,8 +111,8 @@ const SeasonInterruptionInsuranceCore = /*@__PURE__*/ proxyCustomElement(class S
     }
     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 style() { return JustifiSeasonInterruptionInsuranceCoreStyle0 + (JustifiSeasonInterruptionInsuranceCoreStyle1 + JustifiSeasonInterruptionInsuranceCoreStyle2); }
 }, [1, "justifi-season-interruption-insurance-core", {

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

@@ -69,7 +69,7 @@ const SezzlePaymentMethod = /*@__PURE__*/ proxyCustomElement(class SezzlePayment
     }
     render() {
         var _a, _b, _c, _d, _e;
-        return (h("div", { key: 'ca426a40641b5f7d8bf325e31d4dbcab982359aa', class: "payment-method" }, h("script", { key: '2e1d43d57f815b5e451f625907b5490a825ad0df', src: "https://checkout-sdk.sezzle.com/checkout.min.js", async: true, ref: (el) => (this.scriptRef = el) }), h("div", { key: '122decb5b21d0480b5528bc425a50465a4667f18', class: `payment-method-header p-3`, onClick: () => this.onPaymentMethodOptionClick() }, h("input", { key: 'f3546c71f0d845d2d341617255b6f3180f7c3faf', type: "radio", name: "paymentMethodType", id: (_a = this.paymentMethodOption) === null || _a === void 0 ? void 0 : _a.id, value: (_b = this.paymentMethodOption) === null || _b === void 0 ? void 0 : _b.id, onClick: (event) => event.preventDefault(), checked: this.isSelected, class: "form-check-input me-2" }), h("label", { key: 'f9f5683a8f2c9a662ae07264e8458e2d74b2057b', htmlFor: (_c = this.paymentMethodOption) === null || _c === void 0 ? void 0 : _c.id, class: "form-check-label" }, h("div", { key: '0367a351c9c5045a7a7264b0053e735816ab2b9c' }, "Buy now, pay later with ", sezzleLogo), this.installmentPlan && (h("small", { key: '5ca343cd874dc339ee9e6e23a0dcea9aa2e69ff4' }, h("span", { key: '780a3d63a7c32b791d3e1c6d1bcc8ebb33dcedc3' }, (_d = this.installmentPlan) === null || _d === void 0 ? void 0 : _d.installments.length), "\u00A0", h("span", { key: '85b902b4dfead7f935b571201605d51120303038' }, this.installmentPlan.schedule, " payments of"), "\u00A0", h("span", { key: 'ead969304aa372477953a9f1159893c43ded914f', class: "fw-bold" }, formatCurrency((_e = this.installmentPlan) === null || _e === void 0 ? void 0 : _e.installments[0].amountInCents))))))));
+        return (h("div", { key: '4deca512311cd98d358c7099141b15538857a4e5', class: "payment-method" }, h("script", { key: '94b232291153bba85efebb101e7e6e816857da96', src: "https://checkout-sdk.sezzle.com/checkout.min.js", async: true, ref: (el) => (this.scriptRef = el) }), h("div", { key: '7cd9052ae6613fe7f187f3a51b7d6ac7087fdeb1', class: `payment-method-header p-3`, onClick: () => this.onPaymentMethodOptionClick() }, h("input", { key: '1e15e6c2ddced23b049e2559da27532f9be94fb5', type: "radio", name: "paymentMethodType", id: (_a = this.paymentMethodOption) === null || _a === void 0 ? void 0 : _a.id, value: (_b = this.paymentMethodOption) === null || _b === void 0 ? void 0 : _b.id, onClick: (event) => event.preventDefault(), checked: this.isSelected, class: "form-check-input me-2" }), h("label", { key: '0a3637002ef373c05424d6769b070d9db0e66ce8', htmlFor: (_c = this.paymentMethodOption) === null || _c === void 0 ? void 0 : _c.id, class: "form-check-label" }, h("div", { key: '6398e2f00088edf8a1a3699e149760744dda4cb1' }, "Buy now, pay later with ", sezzleLogo), this.installmentPlan && (h("small", { key: 'bfd33da875aa5e9f5b649ac8fc7aa5758393b6e8' }, h("span", { key: 'c07fd5d32fe897a45a67140e2cb81b1f4d537c4a' }, (_d = this.installmentPlan) === null || _d === void 0 ? void 0 : _d.installments.length), "\u00A0", h("span", { key: '2b11e4aa6389a4b98cd003c031aed8f01ec8a4df' }, this.installmentPlan.schedule, " payments of"), "\u00A0", h("span", { key: '90cf3bfa1f0d36c8d4719f164d436407d7fc692b', class: "fw-bold" }, formatCurrency((_e = this.installmentPlan) === null || _e === void 0 ? void 0 : _e.installments[0].amountInCents))))))));
     }
 }, [0, "justifi-sezzle-payment-method", {
         "iframeOrigin": [1025, "iframe-origin"],

package/dist/module/skeleton.js

@@ -1,22 +1,13 @@
-import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
+import { h } from '@stencil/core/internal/client';
 
-const skeletonCss = "@keyframes pulseAnimation{0%{opacity:0.6}50%{opacity:0.4}100%{opacity:0.6}}";
-const JustifiSkeletonStyle0 = skeletonCss;
-
-const Skeleton = /*@__PURE__*/ proxyCustomElement(class Skeleton extends HTMLElement {
-    constructor() {
-        super();
-        this.__registerHost();
-        this.__attachShadow();
-        this.component = 'div';
-        this.height = undefined;
-        this.width = undefined;
-        this.variant = 'text';
-        this.componentClassName = undefined;
-        this.styles = undefined;
-    }
-    getVariantStyle() {
-        if (this.variant === 'text') {
+// This component relies on "src/styles/animations.css" 
+// where it is defined the pulsation animation.
+// Because of shadow-dom, it's not possible to add it to the root.css.
+// Don't forget to include this file in the `styleUrls` 
+// property of the web component that will render the Skeleton
+const Skeleton = ({ component = 'div', height, width, variant = 'text', componentClassName, styles = {}, }) => {
+    const getVariantStyle = () => {
+        if (variant === 'text') {
             return {
                 marginTop: 0,
                 marginBottom: 0,
@@ -29,45 +20,22 @@ const Skeleton = /*@__PURE__*/ proxyCustomElement(class Skeleton extends HTMLEle
                 },
             };
         }
-        else if (this.variant === 'circular') {
+        else if (variant === 'circular') {
             return {
                 borderRadius: '50%',
             };
         }
-        else if (this.variant === 'rounded') {
+        else if (variant === 'rounded') {
             return {
                 borderRadius: '4px',
             };
         }
         return {};
-    }
-    render() {
-        const TagType = this.component;
-        const combinedStyle = Object.assign(Object.assign(Object.assign({}, this.styles), this.getVariantStyle()), { animation: `pulseAnimation 2s ease-in-out 0.5s infinite`, width: this.width, height: this.height, backgroundColor: 'var(--jfi-skeleton-waveAnimation-bg, #f5f5f5)' });
-        return (h(Host, { key: '26efc1854b82225ebde973c9753c856b5021730c' }, h(TagType, { key: '81a6b8097f3b712eadc111a8d402632d058efe69', class: this.componentClassName, style: combinedStyle })));
-    }
-    static get style() { return JustifiSkeletonStyle0; }
-}, [1, "justifi-skeleton", {
-        "component": [1],
-        "height": [8],
-        "width": [8],
-        "variant": [1],
-        "componentClassName": [1, "component-class-name"],
-        "styles": [16]
-    }]);
-function defineCustomElement() {
-    if (typeof customElements === "undefined") {
-        return;
-    }
-    const components = ["justifi-skeleton"];
-    components.forEach(tagName => { switch (tagName) {
-        case "justifi-skeleton":
-            if (!customElements.get(tagName)) {
-                customElements.define(tagName, Skeleton);
-            }
-            break;
-    } });
-}
-defineCustomElement();
+    };
+    const combinedStyle = Object.assign(Object.assign(Object.assign({}, styles), getVariantStyle()), { width,
+        height });
+    const TagType = component;
+    return (h(TagType, { class: componentClassName, style: combinedStyle, part: "skeleton" }));
+};
 
-export { Skeleton as S, defineCustomElement as d };
+export { Skeleton as S };