@justifi/webcomponents 4.17.0 → 4.19.0

package/dist/esm/payouts-list-core.entry.js

@@ -1,18 +1,48 @@
-import { r as registerInstance, c as createEvent, h, H as Host } from './index-4bd1eae9.js';
+import { h, r as registerInstance, c as createEvent } from './index-57431c24.js';
 import { p as pagingDefaults } from './Pagination-afc8f96d.js';
-import './Payment-3e94da9c.js';
+import './Payment-6bf26fe2.js';
 import { a as PayoutStatuses, b as PayoutStatusesSafeNames } from './Payout-dfe15b00.js';
-import { f as formatDate, a as formatTime, b as formatCurrency } from './utils-5f4c4faa.js';
+import { b as formatDate, c as formatTime, f as formatCurrency } from './utils-3c1dd2fa.js';
+import { a as ComponentErrorCodes, C as ComponentErrorSeverity } from './ComponentError-3ce7f437.js';
 import { t as tableExportedParts } from './exported-parts-abd4c027.js';
+import { S as StyledHost } from './styled-host-ab9da520.js';
+import { T as TableLoadingState, a as TableEmptyState, b as TableErrorState } from './table-loading-state-356c7215.js';
 
-const payoutsListCss = ":root,[data-bs-theme=light]{--bs-blue:#0d6efd;--bs-indigo:#6610f2;--bs-purple:#6f42c1;--bs-pink:#d63384;--bs-red:#dc3545;--bs-orange:#fd7e14;--bs-yellow:#ffc107;--bs-green:#198754;--bs-teal:#20c997;--bs-cyan:#0dcaf0;--bs-black:#000;--bs-white:#fff;--bs-gray:#6c757d;--bs-gray-dark:#343a40;--bs-gray-100:#f8f9fa;--bs-gray-200:#e9ecef;--bs-gray-300:#dee2e6;--bs-gray-400:#ced4da;--bs-gray-500:#adb5bd;--bs-gray-600:#6c757d;--bs-gray-700:#495057;--bs-gray-800:#343a40;--bs-gray-900:#212529;--bs-primary:#0d6efd;--bs-secondary:#6c757d;--bs-success:#198754;--bs-info:#0dcaf0;--bs-warning:#ffc107;--bs-danger:#dc3545;--bs-light:#f8f9fa;--bs-dark:#212529;--bs-primary-rgb:13, 110, 253;--bs-secondary-rgb:108, 117, 125;--bs-success-rgb:25, 135, 84;--bs-info-rgb:13, 202, 240;--bs-warning-rgb:255, 193, 7;--bs-danger-rgb:220, 53, 69;--bs-light-rgb:248, 249, 250;--bs-dark-rgb:33, 37, 41;--bs-primary-text-emphasis:#052c65;--bs-secondary-text-emphasis:#2b2f32;--bs-success-text-emphasis:#0a3622;--bs-info-text-emphasis:#055160;--bs-warning-text-emphasis:#664d03;--bs-danger-text-emphasis:#58151c;--bs-light-text-emphasis:#495057;--bs-dark-text-emphasis:#495057;--bs-primary-bg-subtle:#cfe2ff;--bs-secondary-bg-subtle:#e2e3e5;--bs-success-bg-subtle:#d1e7dd;--bs-info-bg-subtle:#cff4fc;--bs-warning-bg-subtle:#fff3cd;--bs-danger-bg-subtle:#f8d7da;--bs-light-bg-subtle:#fcfcfd;--bs-dark-bg-subtle:#ced4da;--bs-primary-border-subtle:#9ec5fe;--bs-secondary-border-subtle:#c4c8cb;--bs-success-border-subtle:#a3cfbb;--bs-info-border-subtle:#9eeaf9;--bs-warning-border-subtle:#ffe69c;--bs-danger-border-subtle:#f1aeb5;--bs-light-border-subtle:#e9ecef;--bs-dark-border-subtle:#adb5bd;--bs-white-rgb:255, 255, 255;--bs-black-rgb:0, 0, 0;--bs-font-sans-serif:system-ui, -apple-system, \"Segoe UI\", Roboto, \"Helvetica Neue\", \"Noto Sans\", \"Liberation Sans\", Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\", \"Noto Color Emoji\";--bs-font-monospace:SFMono-Regular, Menlo, Monaco, Consolas, \"Liberation Mono\", \"Courier New\", monospace;--bs-gradient:linear-gradient(180deg, rgba(255, 255, 255, 0.15), rgba(255, 255, 255, 0));--bs-body-font-family:var(--bs-font-sans-serif);--bs-body-font-size:1rem;--bs-body-font-weight:400;--bs-body-line-height:1.5;--bs-body-color:#212529;--bs-body-color-rgb:33, 37, 41;--bs-body-bg:#fff;--bs-body-bg-rgb:255, 255, 255;--bs-emphasis-color:#000;--bs-emphasis-color-rgb:0, 0, 0;--bs-secondary-color:rgba(33, 37, 41, 0.75);--bs-secondary-color-rgb:33, 37, 41;--bs-secondary-bg:#e9ecef;--bs-secondary-bg-rgb:233, 236, 239;--bs-tertiary-color:rgba(33, 37, 41, 0.5);--bs-tertiary-color-rgb:33, 37, 41;--bs-tertiary-bg:#f8f9fa;--bs-tertiary-bg-rgb:248, 249, 250;--bs-heading-color:inherit;--bs-link-color:#0d6efd;--bs-link-color-rgb:13, 110, 253;--bs-link-decoration:underline;--bs-link-hover-color:#0a58ca;--bs-link-hover-color-rgb:10, 88, 202;--bs-code-color:#d63384;--bs-highlight-color:#212529;--bs-highlight-bg:#fff3cd;--bs-border-width:1px;--bs-border-style:solid;--bs-border-color:#dee2e6;--bs-border-color-translucent:rgba(0, 0, 0, 0.175);--bs-border-radius:0.375rem;--bs-border-radius-sm:0.25rem;--bs-border-radius-lg:0.5rem;--bs-border-radius-xl:1rem;--bs-border-radius-xxl:2rem;--bs-border-radius-2xl:var(--bs-border-radius-xxl);--bs-border-radius-pill:50rem;--bs-box-shadow:0 0.5rem 1rem rgba(0, 0, 0, 0.15);--bs-box-shadow-sm:0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);--bs-box-shadow-lg:0 1rem 3rem rgba(0, 0, 0, 0.175);--bs-box-shadow-inset:inset 0 1px 2px rgba(0, 0, 0, 0.075);--bs-focus-ring-width:0.25rem;--bs-focus-ring-opacity:0.25;--bs-focus-ring-color:rgba(13, 110, 253, 0.25);--bs-form-valid-color:#198754;--bs-form-valid-border-color:#198754;--bs-form-invalid-color:#dc3545;--bs-form-invalid-border-color:#dc3545}[data-bs-theme=dark]{color-scheme:dark;--bs-body-color:#dee2e6;--bs-body-color-rgb:222, 226, 230;--bs-body-bg:#212529;--bs-body-bg-rgb:33, 37, 41;--bs-emphasis-color:#fff;--bs-emphasis-color-rgb:255, 255, 255;--bs-secondary-color:rgba(222, 226, 230, 0.75);--bs-secondary-color-rgb:222, 226, 230;--bs-secondary-bg:#343a40;--bs-secondary-bg-rgb:52, 58, 64;--bs-tertiary-color:rgba(222, 226, 230, 0.5);--bs-tertiary-color-rgb:222, 226, 230;--bs-tertiary-bg:#2b3035;--bs-tertiary-bg-rgb:43, 48, 53;--bs-primary-text-emphasis:#6ea8fe;--bs-secondary-text-emphasis:#a7acb1;--bs-success-text-emphasis:#75b798;--bs-info-text-emphasis:#6edff6;--bs-warning-text-emphasis:#ffda6a;--bs-danger-text-emphasis:#ea868f;--bs-light-text-emphasis:#f8f9fa;--bs-dark-text-emphasis:#dee2e6;--bs-primary-bg-subtle:#031633;--bs-secondary-bg-subtle:#161719;--bs-success-bg-subtle:#051b11;--bs-info-bg-subtle:#032830;--bs-warning-bg-subtle:#332701;--bs-danger-bg-subtle:#2c0b0e;--bs-light-bg-subtle:#343a40;--bs-dark-bg-subtle:#1a1d20;--bs-primary-border-subtle:#084298;--bs-secondary-border-subtle:#41464b;--bs-success-border-subtle:#0f5132;--bs-info-border-subtle:#087990;--bs-warning-border-subtle:#997404;--bs-danger-border-subtle:#842029;--bs-light-border-subtle:#495057;--bs-dark-border-subtle:#343a40;--bs-heading-color:inherit;--bs-link-color:#6ea8fe;--bs-link-hover-color:#8bb9fe;--bs-link-color-rgb:110, 168, 254;--bs-link-hover-color-rgb:139, 185, 254;--bs-code-color:#e685b5;--bs-highlight-color:#dee2e6;--bs-highlight-bg:#664d03;--bs-border-color:#495057;--bs-border-color-translucent:rgba(255, 255, 255, 0.15);--bs-form-valid-color:#75b798;--bs-form-valid-border-color:#75b798;--bs-form-invalid-color:#ea868f;--bs-form-invalid-border-color:#ea868f}.spinner-grow,.spinner-border{display:inline-block;width:var(--bs-spinner-width);height:var(--bs-spinner-height);vertical-align:var(--bs-spinner-vertical-align);border-radius:50%;animation:var(--bs-spinner-animation-speed) linear infinite var(--bs-spinner-animation-name)}@keyframes spinner-border{to{transform:rotate(360deg) }}.spinner-border{--bs-spinner-width:2rem;--bs-spinner-height:2rem;--bs-spinner-vertical-align:-0.125em;--bs-spinner-border-width:0.25em;--bs-spinner-animation-speed:0.75s;--bs-spinner-animation-name:spinner-border;border:var(--bs-spinner-border-width) solid currentcolor;border-right-color:transparent}.spinner-border-sm{--bs-spinner-width:1rem;--bs-spinner-height:1rem;--bs-spinner-border-width:0.2em}@keyframes spinner-grow{0%{transform:scale(0)}50%{opacity:1;transform:none}}.spinner-grow{--bs-spinner-width:2rem;--bs-spinner-height:2rem;--bs-spinner-vertical-align:-0.125em;--bs-spinner-animation-speed:0.75s;--bs-spinner-animation-name:spinner-grow;background-color:currentcolor;opacity:0}.spinner-grow-sm{--bs-spinner-width:1rem;--bs-spinner-height:1rem}@media (prefers-reduced-motion: reduce){.spinner-border,.spinner-grow{--bs-spinner-animation-speed:1.5s}}.clearfix::after{display:block;clear:both;content:\"\"}.text-bg-primary{color:#fff !important;background-color:RGBA(var(--bs-primary-rgb), var(--bs-bg-opacity, 1)) !important}.text-bg-secondary{color:#fff !important;background-color:RGBA(var(--bs-secondary-rgb), var(--bs-bg-opacity, 1)) !important}.text-bg-success{color:#fff !important;background-color:RGBA(var(--bs-success-rgb), var(--bs-bg-opacity, 1)) !important}.text-bg-info{color:#000 !important;background-color:RGBA(var(--bs-info-rgb), var(--bs-bg-opacity, 1)) !important}.text-bg-warning{color:#000 !important;background-color:RGBA(var(--bs-warning-rgb), var(--bs-bg-opacity, 1)) !important}.text-bg-danger{color:#fff !important;background-color:RGBA(var(--bs-danger-rgb), var(--bs-bg-opacity, 1)) !important}.text-bg-light{color:#000 !important;background-color:RGBA(var(--bs-light-rgb), var(--bs-bg-opacity, 1)) !important}.text-bg-dark{color:#fff !important;background-color:RGBA(var(--bs-dark-rgb), var(--bs-bg-opacity, 1)) !important}.link-primary{color:RGBA(var(--bs-primary-rgb), var(--bs-link-opacity, 1)) !important;text-decoration-color:RGBA(var(--bs-primary-rgb), var(--bs-link-underline-opacity, 1)) !important}.link-primary:hover,.link-primary:focus{color:RGBA(10, 88, 202, var(--bs-link-opacity, 1)) !important;text-decoration-color:RGBA(10, 88, 202, var(--bs-link-underline-opacity, 1)) !important}.link-secondary{color:RGBA(var(--bs-secondary-rgb), var(--bs-link-opacity, 1)) !important;text-decoration-color:RGBA(var(--bs-secondary-rgb), var(--bs-link-underline-opacity, 1)) !important}.link-secondary:hover,.link-secondary:focus{color:RGBA(86, 94, 100, var(--bs-link-opacity, 1)) !important;text-decoration-color:RGBA(86, 94, 100, var(--bs-link-underline-opacity, 1)) !important}.link-success{color:RGBA(var(--bs-success-rgb), var(--bs-link-opacity, 1)) !important;text-decoration-color:RGBA(var(--bs-success-rgb), var(--bs-link-underline-opacity, 1)) !important}.link-success:hover,.link-success:focus{color:RGBA(20, 108, 67, var(--bs-link-opacity, 1)) !important;text-decoration-color:RGBA(20, 108, 67, var(--bs-link-underline-opacity, 1)) !important}.link-info{color:RGBA(var(--bs-info-rgb), var(--bs-link-opacity, 1)) !important;text-decoration-color:RGBA(var(--bs-info-rgb), var(--bs-link-underline-opacity, 1)) !important}.link-info:hover,.link-info:focus{color:RGBA(61, 213, 243, var(--bs-link-opacity, 1)) !important;text-decoration-color:RGBA(61, 213, 243, var(--bs-link-underline-opacity, 1)) !important}.link-warning{color:RGBA(var(--bs-warning-rgb), var(--bs-link-opacity, 1)) !important;text-decoration-color:RGBA(var(--bs-warning-rgb), var(--bs-link-underline-opacity, 1)) !important}.link-warning:hover,.link-warning:focus{color:RGBA(255, 205, 57, var(--bs-link-opacity, 1)) !important;text-decoration-color:RGBA(255, 205, 57, var(--bs-link-underline-opacity, 1)) !important}.link-danger{color:RGBA(var(--bs-danger-rgb), var(--bs-link-opacity, 1)) !important;text-decoration-color:RGBA(var(--bs-danger-rgb), var(--bs-link-underline-opacity, 1)) !important}.link-danger:hover,.link-danger:focus{color:RGBA(176, 42, 55, var(--bs-link-opacity, 1)) !important;text-decoration-color:RGBA(176, 42, 55, var(--bs-link-underline-opacity, 1)) !important}.link-light{color:RGBA(var(--bs-light-rgb), var(--bs-link-opacity, 1)) !important;text-decoration-color:RGBA(var(--bs-light-rgb), var(--bs-link-underline-opacity, 1)) !important}.link-light:hover,.link-light:focus{color:RGBA(249, 250, 251, var(--bs-link-opacity, 1)) !important;text-decoration-color:RGBA(249, 250, 251, var(--bs-link-underline-opacity, 1)) !important}.link-dark{color:RGBA(var(--bs-dark-rgb), var(--bs-link-opacity, 1)) !important;text-decoration-color:RGBA(var(--bs-dark-rgb), var(--bs-link-underline-opacity, 1)) !important}.link-dark:hover,.link-dark:focus{color:RGBA(26, 30, 33, var(--bs-link-opacity, 1)) !important;text-decoration-color:RGBA(26, 30, 33, var(--bs-link-underline-opacity, 1)) !important}.link-body-emphasis{color:RGBA(var(--bs-emphasis-color-rgb), var(--bs-link-opacity, 1)) !important;text-decoration-color:RGBA(var(--bs-emphasis-color-rgb), var(--bs-link-underline-opacity, 1)) !important}.link-body-emphasis:hover,.link-body-emphasis:focus{color:RGBA(var(--bs-emphasis-color-rgb), var(--bs-link-opacity, 0.75)) !important;text-decoration-color:RGBA(var(--bs-emphasis-color-rgb), var(--bs-link-underline-opacity, 0.75)) !important}.focus-ring:focus{outline:0;box-shadow:var(--bs-focus-ring-x, 0) var(--bs-focus-ring-y, 0) var(--bs-focus-ring-blur, 0) var(--bs-focus-ring-width) var(--bs-focus-ring-color)}.icon-link{display:inline-flex;gap:0.375rem;align-items:center;text-decoration-color:rgba(var(--bs-link-color-rgb), var(--bs-link-opacity, 0.5));text-underline-offset:0.25em;backface-visibility:hidden}.icon-link>.bi{flex-shrink:0;width:1em;height:1em;fill:currentcolor;transition:0.2s ease-in-out transform}@media (prefers-reduced-motion: reduce){.icon-link>.bi{transition:none}}.icon-link-hover:hover>.bi,.icon-link-hover:focus-visible>.bi{transform:var(--bs-icon-link-transform, translate3d(0.25em, 0, 0))}.ratio{position:relative;width:100%}.ratio::before{display:block;padding-top:var(--bs-aspect-ratio);content:\"\"}.ratio>*{position:absolute;top:0;left:0;width:100%;height:100%}.ratio-1x1{--bs-aspect-ratio:100%}.ratio-4x3{--bs-aspect-ratio:75%}.ratio-16x9{--bs-aspect-ratio:56.25%}.ratio-21x9{--bs-aspect-ratio:42.8571428571%}.fixed-top{position:fixed;top:0;right:0;left:0;z-index:1030}.fixed-bottom{position:fixed;right:0;bottom:0;left:0;z-index:1030}.sticky-top{position:sticky;top:0;z-index:1020}.sticky-bottom{position:sticky;bottom:0;z-index:1020}@media (min-width: 576px){.sticky-sm-top{position:sticky;top:0;z-index:1020}.sticky-sm-bottom{position:sticky;bottom:0;z-index:1020}}@media (min-width: 768px){.sticky-md-top{position:sticky;top:0;z-index:1020}.sticky-md-bottom{position:sticky;bottom:0;z-index:1020}}@media (min-width: 992px){.sticky-lg-top{position:sticky;top:0;z-index:1020}.sticky-lg-bottom{position:sticky;bottom:0;z-index:1020}}@media (min-width: 1200px){.sticky-xl-top{position:sticky;top:0;z-index:1020}.sticky-xl-bottom{position:sticky;bottom:0;z-index:1020}}@media (min-width: 1400px){.sticky-xxl-top{position:sticky;top:0;z-index:1020}.sticky-xxl-bottom{position:sticky;bottom:0;z-index:1020}}.hstack{display:flex;flex-direction:row;align-items:center;align-self:stretch}.vstack{display:flex;flex:1 1 auto;flex-direction:column;align-self:stretch}.visually-hidden,.visually-hidden-focusable:not(:focus):not(:focus-within){width:1px !important;height:1px !important;padding:0 !important;margin:-1px !important;overflow:hidden !important;clip:rect(0, 0, 0, 0) !important;white-space:nowrap !important;border:0 !important}.visually-hidden:not(caption),.visually-hidden-focusable:not(:focus):not(:focus-within):not(caption){position:absolute !important}.stretched-link::after{position:absolute;top:0;right:0;bottom:0;left:0;z-index:1;content:\"\"}.text-truncate{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.vr{display:inline-block;align-self:stretch;width:var(--bs-border-width);min-height:1em;background-color:currentcolor;opacity:0.25}:host{font-family:system-ui, -apple-system, \"Segoe UI\", Roboto, \"Helvetica Neue\", \"Noto Sans\", \"Liberation Sans\", Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\", \"Noto Color Emoji\";font-size:1rem;font-weight:400;line-height:1.5;color:#212529}";
-const PayoutsListCoreStyle0 = payoutsListCss;
+const DownloadIcon = (props) => (h("svg", Object.assign({ xmlns: 'http://www.w3.org/2000/svg', viewBox: '0 0 24 24' }, props),
+    h("path", { d: 'M12 15.5l-5-5 1.41-1.41L12 12.67l3.59-3.58L17 10.5l-5 5z' }),
+    h("path", { d: 'M11 4h2v9h-2z' }),
+    h("path", { d: 'M5 18h14v2H5z' })));
 
 const PayoutsListCore = class {
     constructor(hostRef) {
         registerInstance(this, hostRef);
         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:
@@ -24,36 +54,33 @@ const PayoutsListCore = class {
                 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.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;
         this.payouts = [];
         this.loading = true;
         this.errorMessage = undefined;
         this.paging = pagingDefaults;
         this.params = undefined;
     }
+    updateOnPropChange() {
+        this.fetchData();
+    }
     componentWillLoad() {
         if (this.getPayouts) {
             this.fetchData();
         }
     }
-    updateOnPropChange() {
-        this.fetchData();
-    }
     fetchData() {
         this.loading = true;
         this.getPayouts({
@@ -68,58 +95,68 @@ const PayoutsListCore = class {
                 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(Host, { key: 'dcbc7c461ec76c6a7b94328a4691f12fa4982c18', exportedparts: tableExportedParts }, h("justifi-table", { key: '7a90e1951f33b03fadb4cb9ac75f6932566042b1', 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']
-            ], 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)
-                }
-            ])), 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"],
         "getPayouts": ["updateOnPropChange"]
     }; }
 };
-PayoutsListCore.style = PayoutsListCoreStyle0;
 
 export { PayoutsListCore as payouts_list_core };

package/dist/esm/skeleton-145a80d4.js

@@ -0,0 +1,41 @@
+import { h } from './index-57431c24.js';
+
+// 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,
+                height: 'auto',
+                transformOrigin: '0 55%',
+                transform: 'scale(1, 0.60)',
+                borderRadius: '4px/6.67px',
+                '::before': {
+                    content: '"\\00a0"',
+                },
+            };
+        }
+        else if (variant === 'circular') {
+            return {
+                borderRadius: '50%',
+            };
+        }
+        else if (variant === 'rounded') {
+            return {
+                borderRadius: '4px',
+            };
+        }
+        return {};
+    };
+    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 };