@justifi/webcomponents 5.4.0 → 5.4.2

package/dist/collection/components/order-terminals/order-terminals.js

@@ -4,7 +4,6 @@ import { checkPkgVersion } from "../../utils/check-pkg-version";
 import JustifiAnalytics from "../../api/Analytics";
 import { ComponentErrorCodes, ComponentErrorSeverity } from "../../api/ComponentError";
 import { BusinessService } from "../../api/services/business.service";
-import { ErrorState } from "../../ui-components/details/utils";
 import { Business } from "../../api/Business";
 import { makeGetBusiness } from "../../actions/business/get-business";
 import { OrderTerminalsLoading } from "./order-terminals-loading";
@@ -14,12 +13,14 @@ import { makeGetTerminalModels } from "../../actions/terminal/get-terminal-model
 import { TerminalService } from "../../api/services/terminal.service";
 import { TerminalOrder, TerminalOrderType } from "../../api/TerminalOrder";
 import { makeOrderTerminals } from "../../actions/terminal/order-terminals";
+import { formatPhoneNumber } from "../../utils/utils";
 export class OrderTerminals {
     constructor() {
         this.businessId = undefined;
         this.authToken = undefined;
         this.accountId = undefined;
         this.shipping = false;
+        this.apiOrigin = PROXY_API_ORIGIN;
         this.loading = {
             business: true,
             terminals: true,
@@ -59,6 +60,7 @@ export class OrderTerminals {
             id: this.businessId,
             authToken: this.authToken,
             service: new BusinessService(),
+            apiOrigin: this.apiOrigin,
         })({
             onSuccess: ({ business }) => {
                 this.business = new Business(business);
@@ -75,6 +77,7 @@ export class OrderTerminals {
             id: this.accountId,
             authToken: this.authToken,
             service: new TerminalService(),
+            apiOrigin: this.apiOrigin,
         })({
             onSuccess: ({ terminals, orderLimit }) => {
                 this.terminalModels = terminals;
@@ -91,6 +94,7 @@ export class OrderTerminals {
         const orderTerminals = makeOrderTerminals({
             authToken: this.authToken,
             service: new TerminalService(),
+            apiOrigin: this.apiOrigin,
         });
         this.submitting = true;
         orderTerminals({
@@ -112,15 +116,10 @@ export class OrderTerminals {
     renderLoading() {
         return (h("div", null, this.loading.business && h(OrderTerminalsLoading, null), this.loading.terminals && (h("div", { class: "mt-5" }, h(TerminalSelectorLoading, null), h(TerminalSelectorLoading, null), h(TerminalSelectorLoading, null)))));
     }
-    renderError() {
-        if (!this.loading.business && this.error) {
-            return ErrorState(this.error.message);
-        }
-    }
     renderBusinessDetails() {
         var _a, _b, _c, _d, _e, _f, _g, _h;
         if (!this.loading.business && this.business) {
-            return (h("div", { class: "gap-5 pt-5 mb-5" }, h("div", { class: "row" }, h("div", { class: "col-12" }, h("h2", { part: heading4 }, this.business.legal_name))), h("div", { class: "row" }, h("h5", { part: heading5 }, "Representative:"), h("div", null, h("div", null, (_b = (_a = this.business) === null || _a === void 0 ? void 0 : _a.representative) === null || _b === void 0 ? void 0 : _b.name), h("div", null, (_d = (_c = this.business) === null || _c === void 0 ? void 0 : _c.representative) === null || _d === void 0 ? void 0 : _d.title), h("div", null, (_f = (_e = this.business) === null || _e === void 0 ? void 0 : _e.representative) === null || _f === void 0 ? void 0 : _f.email), h("div", null, (_h = (_g = this.business) === null || _g === void 0 ? void 0 : _g.representative) === null || _h === void 0 ? void 0 : _h.phone)))));
+            return (h("div", { class: "d-flex flex-column gap-4 mb-5 pt-5" }, h("div", { class: "row" }, h("div", { class: "col-12" }, h("h2", { part: heading4 }, this.business.legal_name))), h("div", { class: "row" }, h("div", { class: "col-6" }, h("h5", { part: heading5 }, "Representative:"), h("div", null, h("div", null, (_b = (_a = this.business) === null || _a === void 0 ? void 0 : _a.representative) === null || _b === void 0 ? void 0 : _b.name), h("div", null, (_d = (_c = this.business) === null || _c === void 0 ? void 0 : _c.representative) === null || _d === void 0 ? void 0 : _d.title), h("div", null, (_f = (_e = this.business) === null || _e === void 0 ? void 0 : _e.representative) === null || _f === void 0 ? void 0 : _f.email), h("div", null, formatPhoneNumber((_h = (_g = this.business) === null || _g === void 0 ? void 0 : _g.representative) === null || _h === void 0 ? void 0 : _h.phone)))), this.shipping && (h("div", { class: "col-6" }, h("h5", { part: heading5 }, "Shipping Address:"), h("div", null, this.business.legal_address.line1, this.business.legal_address.line2 ? `, ${this.business.legal_address.line2}` : "", h("br", null), this.business.legal_address.city, ", ", this.business.legal_address.state, " ", this.business.legal_address.postal_code))))));
         }
     }
     renderTerminals() {
@@ -132,7 +131,7 @@ export class OrderTerminals {
         return (h("div", { class: "mt-3" }, h("div", { class: "text-end" }, "Order limit: ", this.orderLimit), h("div", { class: "d-flex justify-content-end mt-3" }, h("button", { class: "btn btn-primary submit-btn", onClick: this.submitOrder.bind(this), disabled: this.order.totalQuantity === 0 || this.submitting, part: buttonPrimary }, this.submitting ? 'Submitting...' : 'Submit Order'))));
     }
     render() {
-        return (h(StyledHost, { key: '42f9aec08c7bdb7ed3cfb6e206b032ceb8148827' }, h("div", { key: '54ebadbfc98a501e59880c5e7f96a288cb559a34', part: text }, this.renderLoading(), this.renderError(), this.renderBusinessDetails(), this.renderTerminals(), this.renderOrderSection())));
+        return (h(StyledHost, { key: 'ff0a0b45e2c76f106df29422c3ba3391de7fc267' }, h("div", { key: 'daad918582cad630ba6081288aafc6df9391236b', part: text }, this.renderLoading(), this.renderBusinessDetails(), this.renderTerminals(), this.renderOrderSection())));
     }
     static get is() { return "justifi-order-terminals"; }
     static get encapsulation() { return "shadow"; }
@@ -206,6 +205,24 @@ export class OrderTerminals {
                 "attribute": "shipping",
                 "reflect": false,
                 "defaultValue": "false"
+            },
+            "apiOrigin": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "api-origin",
+                "reflect": false,
+                "defaultValue": "PROXY_API_ORIGIN"
             }
         };
     }

package/dist/collection/components/order-terminals/terminal-quantity-selector/terminal-quantity-selector.js

@@ -22,7 +22,7 @@ export class TerminalQuantitySelector {
         this.selectedQuantity = 0;
     }
     render() {
-        return (h("div", { key: '5bbf669ab479523290b2d8a9f5b6ec2000ff0f96', class: "rounded shadow-sm card p-2", part: text }, h("div", { key: '47ead96654c97aeae6b24058a4f7759918d3d0ad', class: "d-flex gap-3" }, h("div", { key: '3763eda68e7849c87f0e67b905e09267c10481c8', class: "d-flex align-items-center" }, h("img", { key: 'ef0a61d5c1d27c600fd93813b594ec2ec2fadec3', src: this.imageUrl, alt: this.modelName, height: 75, width: 75, part: image })), h("div", { key: '5a632f69e2045fbfcd35932af3c5fd027dcca66f', class: "d-flex flex-column flex-grow-1 gap-3 p-4 justify-content-center" }, h("div", { key: 'be00d142f07945a15e882d2da4c505ffbf67fe88', class: "row" }, h("div", { key: '1c434628ae872d22efa7d2adb611b04868c85eb1', class: "col-6 d-flex gap-2" }, this.modelName, h("form-control-tooltip", { key: '21f571a1b0e5ba7d528727f6476e134b9657e124', helpText: this.description })), h("div", { key: 'f4077bfa6beb4f0070bdbf4bd28021f88bcaf5b1', class: "col-6 d-flex justify-content-end align-items-center" }, h("button", { key: '7dc6853fb7641b99a9a9ee82dcb3db8fce1d6c01', class: "p-0 minus btn", onClick: this.removeUnit, part: buttonLink }, "-"), h("div", { key: 'faab14e72773f12f69ea69e855bafb27ef3328b8', class: "w-25 text-center" }, this.selectedQuantity), h("button", { key: '390e6b4b049fa64e2b7354a3676621844291feb0', class: "p-0 plus btn", onClick: this.addUnit, part: buttonLink }, "+")))))));
+        return (h("div", { key: '2d549b468e071dfcf74977101abbc2d87849fceb', class: "rounded shadow-sm card p-2", part: text }, h("div", { key: 'f12c2934cb878a910bbed78c5a355e06470e0376', class: "d-flex gap-3" }, h("div", { key: 'ac4556722561202bdb4b5a6aa394ee5c022ed008', class: "d-flex align-items-center" }, h("img", { key: '95251b4754303b2d89693bfc77611aa78b602bc9', src: this.imageUrl, alt: this.modelName, height: 75, width: 75, part: image })), h("div", { key: '01c92c855b6f4f485981daeb38134214fdd1762d', class: "d-flex flex-column flex-grow-1 gap-3 p-4 justify-content-center" }, h("div", { key: '427ae984650fe56887f591203348d930a2cf0c49', class: "row" }, h("div", { key: '36749d30ecbc22bd0841fdd128ecec584b2104a5', class: "col-6 d-flex gap-2" }, this.modelName, h("form-control-tooltip", { key: 'd29543ccf91db6947a4fe38113f251be7bc76e39', helpText: this.description })), h("div", { key: '83452b8b227597a83adaad1a64753609cbe02484', class: "col-6 d-flex justify-content-end align-items-center" }, h("button", { key: '88e33206b8b2f29858263481c75fdbc13ee687d1', class: "p-0 minus btn", onClick: this.removeUnit, part: buttonLink }, "-"), h("div", { key: 'a5fb4209f79529560bb253aef077035fa532e1fc', class: "w-25 text-center" }, this.selectedQuantity), h("button", { key: 'a431b869cebc0a53514731ed69de88bdbb63b4c6', class: "p-0 plus btn", onClick: this.addUnit, part: buttonLink }, "+")))))));
     }
     static get is() { return "terminal-quantity-selector"; }
     static get properties() {

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

@@ -39,14 +39,14 @@ export class PaymentDetailsCore {
         });
     }
     render() {
-        return (h(StyledHost, { key: '00ba42c81617d9593246956e97b6b962817cc167' }, this.loading && h(PaymentDetailsLoading, { key: '1c0fee27dec985cad2cc7d41f61d137246ffcc3e' }), !this.loading && this.errorMessage && ErrorState(this.errorMessage), !this.loading && !this.errorMessage &&
-            this.payment && (h("justifi-details", { key: 'e264b42451a8966a4e6313486bc9d1ccaea0141b', "error-message": this.errorMessage }, h(EntityHeadInfo, { key: 'af96a0f502cce1be451160e8ac2f92074b0ee168', slot: "head-info", badge: MapPaymentStatusToBadge(this.payment.status), title: this.payment.formattedPaymentAmount(this.payment.amount) }, h(EntityHeadInfoItem, { key: '94f876bd62dd9ccaa6f63f25326390b03c9938d5', classes: "border-1 border-end", title: "Updated At", value: `${formatDate(this.payment.updated_at)} ${formatTime(this.payment.updated_at)}` }), h(EntityHeadInfoItem, { key: '96c629e2d1a99eca277ec7337cb3e00e88c1b31e', classes: "border-1 border-end", title: "Created At", value: `${formatDate(this.payment.created_at)} ${formatTime(this.payment.created_at)}` }), h(EntityHeadInfoItem, { key: '0d18abfae7e9fd0a692ac54640194033a5c36f41', title: "ID", value: this.payment.id })), h("div", { key: '7f9e14d7e0312ba1136cf5734754bf0af6c19774', slot: 'detail-sections' }, h(DetailSectionTitle, { key: 'a11b47796dada4f9678487edf19dcd7928b08e94', sectionTitle: "Details" }), h("div", { key: 'fa8a895e037adbbcf5856aae4f40306b789a90c8', class: "d-table gap-2 w-100" }, h(DetailItem, { key: '84a8fa2b0dc39aa331501e00a8eb9bf93e8bb8c2', title: "Amount", value: this.payment.formattedPaymentAmount(this.payment.amount) }), h(DetailItem, { key: '632fa4e703aabc7b606b939e95d1633a43fedfaa', title: "Fees", value: this.payment.formattedPaymentAmount(this.payment.fee_amount) }), h(DetailItem, { key: 'bc37a80a15fea95932d04676f2c5a8a57276958b', title: "Refunded", value: this.payment.formattedPaymentAmount(this.payment.amount_refunded) }), h(DetailItem, { key: '588a76203897cd31b9d0c1c8de1b7b9b0b107421', title: "Net", value: this.payment.formattedPaymentAmount(this.payment.balance) }), h(DetailItem, { key: 'c0fea24390417c591327c76568829cbf9f9147a9', title: "Status", value: MapPaymentStatusToBadge(this.payment.status) }), h(DetailItem, { key: 'e332a896b55bb58f3fd26ee892556acb08ced52d', title: "Payment ID", value: this.payment.id }), h(DetailItem, { key: '844fdb40ed55ca0e2f848e7325dcb64f134fa5d6', title: "Processing Fees", value: this.payment.formattedPaymentAmount(this.payment.fee_amount) }), h(DetailItem, { key: 'dce95b409eb465e8d6373ad80b7b14a0eecc5aca', title: "Statement Descriptor", value: this.payment.statement_descriptor }), h(DetailItem, { key: 'bed2051bd720b1a790ff59b50bee7f01e3fb222a', title: "Description", value: this.payment.description })), this.payment.payment_method.card && [
-            h(DetailSectionTitle, { key: '3283ea5236fab75a32fe569ad29d9b70c62b49a0', sectionTitle: "Payment Method" }),
-            h("div", { key: 'b9a0d9cfca791e3afb4a2e1e73b036319191d485', class: "d-table gap-2 w-100" }, h(DetailItem, { key: '15da44c97292af05a14b3f7840b07bdcf34ae953', title: "ID", value: this.payment.payment_method.card.id }), h(DetailItem, { key: 'd8a4a431c3e3ab0d14be8992521ee89b5e126a04', title: "Payment Type", value: "Card" }), h(DetailItem, { key: '1a8ed38a316ea943761d2dd7fda58490180ef3bc', title: "Last 4 Numbers", value: this.payment.payment_method.lastFourDigits }), h(DetailItem, { key: 'db695d1b89896a7a73c83fd8a7d5837ad1e69909', title: "Brand", value: snakeCaseToHumanReadable(this.payment.payment_method.card.brand) }), h(DetailItem, { key: 'd94879fb30ac0a05a16ce9ddb199fb5cb003a8c1', title: "Cardholder", value: this.payment.payment_method.payersName }))
+        return (h(StyledHost, { key: '0c171f991fc4dcf840fe076bc116424cc3a87065' }, this.loading && h(PaymentDetailsLoading, { key: 'a5de7e062c82839d908a47c631130a878a3f2d11' }), !this.loading && this.errorMessage && ErrorState(this.errorMessage), !this.loading && !this.errorMessage &&
+            this.payment && (h("justifi-details", { key: 'd215769880123434e0b6bcad24fc3cacc1a1c1c1', "error-message": this.errorMessage }, h(EntityHeadInfo, { key: '015128fa7779e3ffe2c8b533004e419451f688bd', slot: "head-info", badge: MapPaymentStatusToBadge(this.payment.status), title: this.payment.formattedPaymentAmount(this.payment.amount) }, h(EntityHeadInfoItem, { key: '2ba936ae059994f61b3a1ec9c7698e0ddda4f76f', classes: "border-1 border-end", title: "Updated At", value: `${formatDate(this.payment.updated_at)} ${formatTime(this.payment.updated_at)}` }), h(EntityHeadInfoItem, { key: '45adc7bad5275e26a4d3ad977fd26eb70992d60a', classes: "border-1 border-end", title: "Created At", value: `${formatDate(this.payment.created_at)} ${formatTime(this.payment.created_at)}` }), h(EntityHeadInfoItem, { key: '4ddb69de4cc522e38a0557b75260da508f8e7b53', title: "ID", value: this.payment.id })), h("div", { key: '47f2ce116914109f25c97419b2342f142e84870e', slot: 'detail-sections' }, h(DetailSectionTitle, { key: 'a0e3ddeca8335c441b19b21666eaa8a2cb876ab9', sectionTitle: "Details" }), h("div", { key: 'd284226522d77f14243fe1c01e4397a0e07acf79', class: "d-table gap-2 w-100" }, h(DetailItem, { key: '43eea18419c944fbef79c3e22261430299e3c88c', title: "Amount", value: this.payment.formattedPaymentAmount(this.payment.amount) }), h(DetailItem, { key: 'fd1defcd7f3b1fb45fb2c196acf334025f691a49', title: "Fees", value: this.payment.formattedPaymentAmount(this.payment.fee_amount) }), h(DetailItem, { key: '00b9c31a516c9efabf0e9146b7f85e948334cec6', title: "Refunded", value: this.payment.formattedPaymentAmount(this.payment.amount_refunded) }), h(DetailItem, { key: 'a3dbaadb65345af971ae2cbd7b9e2270c71ae5b0', title: "Net", value: this.payment.formattedPaymentAmount(this.payment.balance) }), h(DetailItem, { key: '93d874d02bed9ef2ff30be2f9da815c2364582ba', title: "Status", value: MapPaymentStatusToBadge(this.payment.status) }), h(DetailItem, { key: '51a2742e4895e74c07205253b96d28cd42ef9e93', title: "Payment ID", value: this.payment.id }), h(DetailItem, { key: '465262f8f448f1afd75b5e2f3f4f0d7d70aad7ca', title: "Processing Fees", value: this.payment.formattedPaymentAmount(this.payment.fee_amount) }), h(DetailItem, { key: '5b0db9a8f2d96741568e4622cc7495868491226b', title: "Statement Descriptor", value: this.payment.statement_descriptor }), h(DetailItem, { key: '0643523eefc49aa046cbfc5802cce2070a25e299', title: "Description", value: this.payment.description })), this.payment.payment_method.card && [
+            h(DetailSectionTitle, { key: 'c3d885b1be787a7800f1d36811647097264e7f26', sectionTitle: "Payment Method" }),
+            h("div", { key: 'da73b925ba2587e8dc1f860bd4d36dda55dd0d79', class: "d-table gap-2 w-100" }, h(DetailItem, { key: '80410dd5c2de2cdb1f8dfc30fb514df972e30721', title: "ID", value: this.payment.payment_method.card.id }), h(DetailItem, { key: '57d05211be0fbddae3e69637d7936576c3fb745f', title: "Payment Type", value: "Card" }), h(DetailItem, { key: '35cae308ec9a99e3202bafe287e9bd08c2e6632d', title: "Last 4 Numbers", value: this.payment.payment_method.lastFourDigits }), h(DetailItem, { key: '9e3c757e1429a600ecf345c0a6cc1b275058c50e', title: "Brand", value: snakeCaseToHumanReadable(this.payment.payment_method.card.brand) }), h(DetailItem, { key: '3027147373d335045b62ca1a0c94b408e00de733', title: "Cardholder", value: this.payment.payment_method.payersName }))
         ], this.payment.payment_method.bank_account && [
-            h(DetailSectionTitle, { key: '84dae904db3c22ff5ed03abaeb57d3b0736d1fbb', sectionTitle: "Payment Method" }),
-            h("div", { key: '400801019a53feec0478273866fffa5683b408aa', class: "d-table gap-2 w-100" }, h(DetailItem, { key: 'ca7bb52e4275659b18daacfa6367de2f32617e70', title: "ID", value: this.payment.payment_method.bank_account.id }), h(DetailItem, { key: '4885d2b5f05b6a713d61074271c7a95b23604dca', title: "Last 4 Numbers", value: this.payment.last_four_digits }), h(DetailItem, { key: '604ec4efe78a12a1c36d8416c9fdec70351a6dad', title: "Bank Name", value: this.payment.payment_method.bank_account.brand }), h(DetailItem, { key: '1ef77a81232e19d1063af9e863f5c9ada183715f', title: "Account Owner", value: this.payment.payment_method.payersName }))
-        ], h(DetailSectionTitle, { key: '1d0a45dd7b7f44b2bad75db9ddb7886b9fc36c9c', sectionTitle: 'Metadata' }), h("div", { key: '364dfb72b9585b672a510b11ecf794c8293ac88d', class: "d-table gap-2 w-100" }, h(CodeBlock, { key: '1b9254f2f5f81959ea4e190a3a84129d8c54eccd', metadata: this.payment.metadata })))))));
+            h(DetailSectionTitle, { key: '0506c560ebc7a95fea06a78a50b8589bf9efeca5', sectionTitle: "Payment Method" }),
+            h("div", { key: '57e5656f56aacd0a85fe800a16c6937fef0a6ac1', class: "d-table gap-2 w-100" }, h(DetailItem, { key: '0ec754633c7e3f676d87c74507f84736e745d119', title: "ID", value: this.payment.payment_method.bank_account.id }), h(DetailItem, { key: '4cd617f0ebb487021819cd44cc7bde54f9bbcf2f', title: "Last 4 Numbers", value: this.payment.last_four_digits }), h(DetailItem, { key: 'bb0bf949bfbd774fa1167ff14f824de494e8930c', title: "Bank Name", value: this.payment.payment_method.bank_account.brand }), h(DetailItem, { key: '807e0e394ea92e44dd549c96d44911f76e1cf4d8', title: "Account Owner", value: this.payment.payment_method.payersName }))
+        ], h(DetailSectionTitle, { key: '44ac1f6ffd7a0c1dc0785c2cd035c21c6c064bf8', sectionTitle: 'Metadata' }), h("div", { key: '3198fa94234aa237447862fd5b2e6f180d0b716a', class: "d-table gap-2 w-100" }, h(CodeBlock, { key: '68f75ac2b481f68de6999f2427cafb7debae55b7', metadata: this.payment.metadata })))))));
     }
     static get is() { return "payment-details-core"; }
     static get properties() {

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

@@ -88,7 +88,7 @@ export class PaymentsListCore {
         return !this.showEmptyState && !this.showErrorState && !this.loading;
     }
     render() {
-        return (h("div", { key: '91c30f03d9b807ff84224ae25a0bcc84b5c17d20' }, h("div", { key: '447c694f9dcfee6363bafd369f53152ef1797c60', class: "table-wrapper" }, h("table", { key: 'fe3a2911b4d7aa109319d6dabc77eb338b910df9', class: "table table-hover", part: table }, h("thead", { key: 'a3ec810da46e43f786def86991f74e1c0f3c269b', class: "table-head sticky-top" }, h("tr", { key: '94b80f23224624d2f4be81cffa5365d9a725bf33', class: "table-light text-nowrap" }, this.paymentsTable.columnData.map((column) => column))), h("tbody", { key: 'd2c24a19bebcd4872dc36c4f8c6a47678a912d6d', class: "table-body" }, h(TableLoadingState, { key: 'dfcc51f6307996ea5383c4da3ddde61c973d946b', columnSpan: this.paymentsTable.columnData.length, isLoading: this.loading }), h(TableEmptyState, { key: 'a81643fd528bff0ad8a57ea17aed718dbfcff6c5', isEmpty: this.showEmptyState, columnSpan: this.paymentsTable.columnData.length }), h(TableErrorState, { key: '3c50d2d7ee8bd5e8c03db7c1d01db8fbb6de4b9b', columnSpan: this.paymentsTable.columnData.length, errorMessage: this.errorMessage }), this.showRowData && this.paymentsTable.rowData.map((data, index) => (h("tr", { "data-test-id": "table-row", "data-row-entity-id": this.entityId[index], onClick: this.rowClickHandler }, data)))), this.paging && (h("tfoot", { key: '601bb3cd6f8b54fa262d572f715a6208df515f47', class: "sticky-bottom" }, h("tr", { key: '3fbcc03fc841c196cc52b2572387d243d74b2f44', class: "table-light align-middle" }, h("td", { key: 'a1d593b29235432bc668564d784b594dea8ae13c', part: tableCell, colSpan: this.paymentsTable.columnData.length }, h("pagination-menu", { key: '1a427ec2e181baad95ffd14a6c77485f86786f6d', paging: Object.assign(Object.assign({}, this.paging), { handleClickPrevious: this.handleClickPrevious, handleClickNext: this.handleClickNext }) })))))))));
+        return (h("div", { key: '7650bc8c64b4b727048b748bb899b534159c2ecd' }, h("div", { key: 'ebf919d213a280adea8852c33c53314db3d73279', class: "table-wrapper" }, h("table", { key: '618a5113b68901bef3df0aed342e8cc6e76f672d', class: "table table-hover", part: table }, h("thead", { key: '4978a6a0572f228ce0b67aed63c0123f3c13251a', class: "table-head sticky-top" }, h("tr", { key: '875633307c439d239ed9ff6c9eae5f414729b4fc', class: "table-light text-nowrap" }, this.paymentsTable.columnData.map((column) => column))), h("tbody", { key: '030a7ab7d92337fa4ee74d206e4a48c79f6eae4d', class: "table-body" }, h(TableLoadingState, { key: '6b3a71f087ac93c2b6487043d1624518b01d7370', columnSpan: this.paymentsTable.columnData.length, isLoading: this.loading }), h(TableEmptyState, { key: '51a90cd22acfdf55b0c351e6b7f2b1b7e1f156d0', isEmpty: this.showEmptyState, columnSpan: this.paymentsTable.columnData.length }), h(TableErrorState, { key: '47367183f197a6eafe761ac478a435bba5f9f6d6', columnSpan: this.paymentsTable.columnData.length, errorMessage: this.errorMessage }), this.showRowData && this.paymentsTable.rowData.map((data, index) => (h("tr", { "data-test-id": "table-row", "data-row-entity-id": this.entityId[index], onClick: this.rowClickHandler }, data)))), this.paging && (h("tfoot", { key: '2ca665dbc33b954145cedba2d75e98a3d45ff85f', class: "sticky-bottom" }, h("tr", { key: 'a7ecd6b390fdb960c589e2c463d354afe7b29100', class: "table-light align-middle" }, h("td", { key: '74f32baddb41ff3ca04b2199b1a5d75189fb406e', part: tableCell, colSpan: this.paymentsTable.columnData.length }, h("pagination-menu", { key: '123f359c4a1948ee0189e49b163520d5858936ec', paging: Object.assign(Object.assign({}, this.paging), { handleClickPrevious: this.handleClickPrevious, handleClickNext: this.handleClickNext }) })))))))));
     }
     static get is() { return "payments-list-core"; }
     static get properties() {

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

@@ -48,8 +48,8 @@ export class PaymentsListFilters {
     }
     render() {
         const filterMenuParams = Object.assign({}, filterParams);
-        return (h(StyledHost, { key: 'e86e4d5f0a36516103a04539fd9ba2d1b698a06c' }, h("table-filters-menu", { key: 'bf4986bea9280046e8c5719dfdba6390d0cc7419', params: filterMenuParams, clearParams: clearParams, part: paymentsListFilterMenu }, h("div", { key: 'c9e898c5e4944f97ba66a8b72d6f940fce47f3f3', class: "grid-cols-2 gap-3 p-1" }, h("div", { key: '02eb01fee1165a1cd7174aa066147812d7a9cb44', class: "p-2" }, h("form-control-text", { key: 'cbeeef72894b2016d101b933412b797827513dd2', name: "payment_id", label: "Payment ID", inputHandler: this.debouncedSetParamsOnChange, defaultValue: this.paymentId || filterParams.payment_id, disabled: !!this.paymentId, part: paymentIdPaymentsListFilterParam })), h("div", { key: '5daedbb20682ad6b295049a865c3377e2ef79d8a', class: "p-2" }, h("form-control-text", { key: '26cd105c075114cfd062fccde5500f2eeb55888b', name: "terminal_id", label: "Terminal ID", inputHandler: this.debouncedSetParamsOnChange, defaultValue: this.terminalId || filterParams.terminal_id, disabled: !!this.terminalId, part: terminalIdPaymentsListFilterParam })), h("div", { key: '92349a4ebb343af3a8d54601fea4c177c2ff14b2', class: "p-2" }, h("form-control-select", { key: '0e5f7cf57a22d3eeb6e4aebdbac2fe1bb13288eb', name: "payment_status", label: "Status", options: this.paymentStatusOptions, inputHandler: this.setParamsOnChange, defaultValue: this.paymentStatus || filterParams.payment_status, disabled: !!this.paymentStatus, part: paymentStatusPaymentsListFilterParam })), h("div", { key: '5d5cc079285045a858bfbcf9646a54b8f4c70b8b', class: "p-2" }, h("form-control-date", { key: 'b8fb06fa8506503bcf89c50523dd8e036852557c', name: "created_after", label: "Created After", inputHandler: this.handleDateInput, defaultValue: convertToLocal(this.createdAfter, { showInputDateTime: true }) ||
-                convertToLocal(filterParams.created_after, { showInputDateTime: true }), showTime: true, disabled: !!this.createdAfter, part: createdAfterPaymentsListFilterParam })), h("div", { key: '3d6a1de1b08e1a326e107e60c78580848ffdda19', class: "p-2" }, h("form-control-date", { key: '6f7bf72ac396429a3d8318ee17d5459147a4f60e', name: "created_before", label: "Created Before", inputHandler: this.handleDateInput, defaultValue: convertToLocal(this.createdBefore, { showInputDateTime: true }) ||
+        return (h(StyledHost, { key: 'c213f44219409851784f62f38932d6165e933e2a' }, h("table-filters-menu", { key: 'b0f67131ad7812cf51e475809c4e6b1d57577cf1', params: filterMenuParams, clearParams: clearParams, part: paymentsListFilterMenu }, h("div", { key: '8d259cfe28fdeb67096383c317392f99642b4266', class: "grid-cols-2 gap-3 p-1" }, h("div", { key: 'a593eae6541085b1d2ad46e8fac7a5e53c11c38e', class: "p-2" }, h("form-control-text", { key: 'a32b07e6635bbc31c2ca11e91cd3f95edf558cb1', name: "payment_id", label: "Payment ID", inputHandler: this.debouncedSetParamsOnChange, defaultValue: this.paymentId || filterParams.payment_id, disabled: !!this.paymentId, part: paymentIdPaymentsListFilterParam })), h("div", { key: '989e3f4d1f48549210e982e2c55329841bdd1926', class: "p-2" }, h("form-control-text", { key: 'a54152f1052642448ccd1e50561af65c32d976bf', name: "terminal_id", label: "Terminal ID", inputHandler: this.debouncedSetParamsOnChange, defaultValue: this.terminalId || filterParams.terminal_id, disabled: !!this.terminalId, part: terminalIdPaymentsListFilterParam })), h("div", { key: 'f5d484ca692420c508c8c33392a73ed84544ab97', class: "p-2" }, h("form-control-select", { key: '1f8d609f065cae6830b28ce268fb299eff9bf549', name: "payment_status", label: "Status", options: this.paymentStatusOptions, inputHandler: this.setParamsOnChange, defaultValue: this.paymentStatus || filterParams.payment_status, disabled: !!this.paymentStatus, part: paymentStatusPaymentsListFilterParam })), h("div", { key: '8db078f3a5272b61f3843119b4da4344df70e02d', class: "p-2" }, h("form-control-date", { key: '6e20e715d77f116f93484d417a0ac1c95d0e9a5e', name: "created_after", label: "Created After", inputHandler: this.handleDateInput, defaultValue: convertToLocal(this.createdAfter, { showInputDateTime: true }) ||
+                convertToLocal(filterParams.created_after, { showInputDateTime: true }), showTime: true, disabled: !!this.createdAfter, part: createdAfterPaymentsListFilterParam })), h("div", { key: '5a011a17767ad4cfd89a40b0f3d77ec92df433b3', class: "p-2" }, h("form-control-date", { key: '5064f46b779239aabc5d0fcb11479634e14e050d', name: "created_before", label: "Created Before", inputHandler: this.handleDateInput, defaultValue: convertToLocal(this.createdBefore, { showInputDateTime: true }) ||
                 convertToLocal(filterParams.created_before, { showInputDateTime: true }), showTime: true, disabled: !!this.createdBefore, part: createdBeforePaymentsListFilterParam }))))));
     }
     static get is() { return "justifi-payments-list-filters"; }

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

@@ -49,7 +49,7 @@ export class PaymentsList {
         }
     }
     render() {
-        return (h(StyledHost, { key: 'ade68405b7b039032dc8d4a271bdafd6b5b3dfe8' }, h("payments-list-core", { key: '30844738130c05a96bd93d670bad14d544368fb2', getPayments: this.getPayments, "onError-event": this.handleErrorEvent, columns: this.columns })));
+        return (h(StyledHost, { key: '6882456e9e7af8dd5e8023cf649d967551689c20' }, h("payments-list-core", { key: '7df305455ba20e2eede8c5146edb5db2e7c412c8', getPayments: this.getPayments, "onError-event": this.handleErrorEvent, columns: this.columns })));
     }
     static get is() { return "justifi-payments-list"; }
     static get encapsulation() { return "shadow"; }

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

@@ -54,7 +54,7 @@ export class PayoutDetailsCore {
     }
     render() {
         var _a;
-        return (h(StyledHost, { key: '6aab170bbe708372d913c14bcb58b3b0d60dafd8' }, this.loading && h(PayoutDetailsLoading, { key: '0aee9ad36b3c4e74b1cb3f8251d0488cede1355c' }), !this.loading && this.errorMessage && ErrorState(this.errorMessage), !this.loading && this.payout && (h("justifi-details", { key: 'c9ad74b0385260d4b1f2d2f7b3e66563b2d706a4', "error-message": this.errorMessage }, h(EntityHeadInfo, { key: '6b67e623a6cb67207007ba4319aa437996118dd9', slot: "head-info", badge: MapPayoutStatusToBadge((_a = this.payout) === null || _a === void 0 ? void 0 : _a.status), title: this.payout.formattedPaymentAmount(this.payout.amount) }, h(EntityHeadInfoItem, { key: 'ff1c335e90ad0403a607491e4ff0b0adac52f255', classes: "border-1 border-end", title: "Updated At", value: `${formatDate(this.payout.updated_at)} ${formatTime(this.payout.updated_at)}` }), h(EntityHeadInfoItem, { key: '0c2e9555136ce806bc744dd2a83c7a1e10fa7ea7', classes: "border-1 border-end", title: "Created At", value: `${formatDate(this.payout.created_at)} ${formatTime(this.payout.created_at)}` }), h(EntityHeadInfoItem, { key: '0c813d23ddbe26f29f1ad03dc43b9c5fbf2d6ab6', title: "ID", value: this.payout.id }), h("div", { key: '762b4fc60643def05b7f8e84ce170d6295654631', class: "m-4" }, h(Button, { key: 'c5f304fb7f54838da6785a0bf19c423a98bdbf34', variant: "secondary", class: "btn btn-outline-secondary d-flex align-items-center", onClick: this.downloadCSV }, "Export CSV"))), h("div", { key: 'b307f177086cd6b1eeb0f384cce772cd04ff33ad', slot: 'detail-sections' }, h(DetailSectionTitle, { key: 'bad67a9d2cde5bff23b5c959f9b7564fdc996300', sectionTitle: "Details" }), h("div", { key: '6986bef4813aadb505acaf5cdd07b853c271e442', class: "d-table gap-2 w-100" }, h(DetailItem, { key: 'dad10fde82b1009a9821f1e1cc2c2e65baa5f6b7', title: "Date paid", value: formatDate(this.payout.deposits_at) }), h(DetailItem, { key: 'bf21ac446b54bdfcec020d6086546a0b20f42d01', title: "Statement Description", value: this.payout.description }), h(DetailItem, { key: '30f7609216b42f3918929a6a02b30a6a23689921', title: "Payout Method", value: this.payout.delivery_method }), h(DetailItem, { key: 'e7d93fa8d865162098e105d4041c12af757db68b', title: "Amount", value: this.payout.formattedPaymentAmount(this.payout.amount) }), h(DetailItem, { key: '99b76f8abc8f0077df988cf38cfb74e77a7e881f', title: "Fee", value: this.payout.formattedPaymentAmount(this.payout.fees_total) })), h(DetailSectionTitle, { key: 'cfef47442eeb83514ca10fab25d12f1439414fc0', sectionTitle: "Account" }), h("div", { key: '901423f1ca47bf79ab6daa63368fea0032e46d58', class: "d-table gap-2 w-100" }, h(DetailItem, { key: 'f3e215b7aad43a3a3914b885189700e87758cca6', title: "ID", value: this.payout.account_id }), h(DetailItem, { key: '795054cd2f8bda2a735e9ac64652da92dac34f61', title: "Account Type", value: this.payout.bank_account.account_type }), h(DetailItem, { key: '9c190036635aed95d74bce36ec257ada41b57cba', title: "Institution", value: this.payout.bank_account.account_type }), h(DetailItem, { key: 'c1002cff85b80024804a858ef519feb4a86d46ff', title: "Routing Number", value: this.payout.bank_account.routing_number }), h(DetailItem, { key: '0183bef106233f302cd8762c7483482bea849ac2', title: "Account Number", value: this.payout.bank_account.account_number_last4 })), h(DetailSectionTitle, { key: 'e87d57050d5dee72a8dccfe2ca2deee385e6dc61', sectionTitle: 'Metadata' }), h("div", { key: '9aefd212e7aa680b34f5af6a373a47997238496e', class: "d-table gap-2 w-100" }, h(CodeBlock, { key: 'a9c9337a788cb2611787278768968e638a8c000d', metadata: this.payout.metadata })))))));
+        return (h(StyledHost, { key: '061c711344ca86e94a8fcc9d3d5f7de97e5c2179' }, this.loading && h(PayoutDetailsLoading, { key: '697e0405c5287731c6b5349f89919e6ca167a7b8' }), !this.loading && this.errorMessage && ErrorState(this.errorMessage), !this.loading && this.payout && (h("justifi-details", { key: 'baf48186beef6db33ca09cc62f48e1d6233cc087', "error-message": this.errorMessage }, h(EntityHeadInfo, { key: '2ad1ac98d7b7613c017ce94d5f970c599e385857', slot: "head-info", badge: MapPayoutStatusToBadge((_a = this.payout) === null || _a === void 0 ? void 0 : _a.status), title: this.payout.formattedPaymentAmount(this.payout.amount) }, h(EntityHeadInfoItem, { key: '356ae84a31ba8d28d4b00c5a019c9f6f169c16bb', classes: "border-1 border-end", title: "Updated At", value: `${formatDate(this.payout.updated_at)} ${formatTime(this.payout.updated_at)}` }), h(EntityHeadInfoItem, { key: '9bc19f40ab8c1c75acf8771d2e939c9b86c81352', classes: "border-1 border-end", title: "Created At", value: `${formatDate(this.payout.created_at)} ${formatTime(this.payout.created_at)}` }), h(EntityHeadInfoItem, { key: 'adda5e8e83511030ab0998b9093d3f73879b1b34', title: "ID", value: this.payout.id }), h("div", { key: 'a8e3eb9c2ac80d09078adb19107106d2952c4995', class: "m-4" }, h(Button, { key: '039196e6cb3d5600eb60343eb073739b262adb89', variant: "secondary", class: "btn btn-outline-secondary d-flex align-items-center", onClick: this.downloadCSV }, "Export CSV"))), h("div", { key: '7076fed938660f113e41d0f1cf29410df02bd9d5', slot: 'detail-sections' }, h(DetailSectionTitle, { key: 'bd3fbd6c010d62a3db20b05eb09b6e1144675978', sectionTitle: "Details" }), h("div", { key: '6f5faf48a2fa1a49265e8c7454889ad007efea77', class: "d-table gap-2 w-100" }, h(DetailItem, { key: '7f426b472de86bc4948bb4722f5f59190a8816fc', title: "Date paid", value: formatDate(this.payout.deposits_at) }), h(DetailItem, { key: '9c985e1faaac021bb49c15064edb7cdacb53b285', title: "Statement Description", value: this.payout.description }), h(DetailItem, { key: '819e4ce2b8a2aa34eee35994bd395cfbd358a08b', title: "Payout Method", value: this.payout.delivery_method }), h(DetailItem, { key: 'de6ef451dba0364a2d531b82ed5a8a3cfc865fce', title: "Amount", value: this.payout.formattedPaymentAmount(this.payout.amount) }), h(DetailItem, { key: 'ab3705265c4d05f3e157e5beb338239e99be687d', title: "Fee", value: this.payout.formattedPaymentAmount(this.payout.fees_total) })), h(DetailSectionTitle, { key: 'ceef5bbeeb73858eea8643a50107288e87280c15', sectionTitle: "Account" }), h("div", { key: '6652445ecf1819d85b8642af02ded44cde934979', class: "d-table gap-2 w-100" }, h(DetailItem, { key: '53b1e17717881ee14bbac8ff5941d8ee850675c2', title: "ID", value: this.payout.account_id }), h(DetailItem, { key: 'afc5c48aef9715ef55f1aaa207f0af427679f8a4', title: "Account Type", value: this.payout.bank_account.account_type }), h(DetailItem, { key: 'd78fe12043891c7a76b9c1d590cff1cfb45bf1f3', title: "Institution", value: this.payout.bank_account.account_type }), h(DetailItem, { key: '5c8d4c492a4f0ccb2d1b7c721be7426e6b46e143', title: "Routing Number", value: this.payout.bank_account.routing_number }), h(DetailItem, { key: '9ecc3872af10c9cfc380b1f4382a1ac980fff0fd', title: "Account Number", value: this.payout.bank_account.account_number_last4 })), h(DetailSectionTitle, { key: 'd38fdfd6754a68ff340a3e6456418c2ee0cd0672', sectionTitle: 'Metadata' }), h("div", { key: 'e45b2a4681556d276eaeed35e5c8a3b90e3235f0', class: "d-table gap-2 w-100" }, h(CodeBlock, { key: '1c2b19619b1997ee8f12116d1ffe822fd5ce09ce', metadata: this.payout.metadata })))))));
     }
     static get is() { return "payout-details-core"; }
     static get properties() {

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

@@ -142,7 +142,7 @@ export class PayoutsListCore {
         return !this.showEmptyState && !this.showErrorState && !this.loading;
     }
     render() {
-        return (h("div", { key: 'ed85d9ce4cc88007b8c623ba57cb8dfbd4de7874' }, h("div", { key: '5760742d19653abb6ce3e45f4f773cd1bd5e612f', class: "table-wrapper", part: "table-wrapper" }, h("table", { key: 'f09a0ea7fff83b23e8e82fda18c73b25e0a46b07', class: "table table-hover", part: table }, h("thead", { key: 'b056f2ef2b6a229cd436ed0e4789f9d19849e956', class: "table-head sticky-top", part: "table-head" }, h("tr", { key: '16e6651c934d1d4120ceaeb4732e807666f0404d', class: "table-light text-nowrap", part: "table-head-row" }, this.payoutsTable.columnData.map((column) => column))), h("tbody", { key: '4b552d171131958f696077a66c4256e45ccaf7b2', class: "table-body" }, h(TableLoadingState, { key: 'aded291b5961c14d828ecff475120e48d3913293', columnSpan: this.payoutsTable.columnKeys.length, isLoading: this.loading }), h(TableEmptyState, { key: 'a3044be9a44798a4f8800978fd0734de31de6809', isEmpty: this.showEmptyState, columnSpan: this.payoutsTable.columnKeys.length }), h(TableErrorState, { key: '98c909ea58a0dd7f0cbbd8ac9842380b91b92386', columnSpan: this.payoutsTable.columnKeys.length, errorMessage: this.errorMessage }), this.showRowData && this.payoutsTable.rowData.map((data, index) => (h("tr", { "data-test-id": "table-row", "data-row-entity-id": this.entityId[index], onClick: this.rowClickHandler }, data)))), this.paging && (h("tfoot", { key: '0c58d215c797798f87affb37d1f7622de3ca7407', class: "sticky-bottom" }, h("tr", { key: '9a3b39c8836bb817428bd307110fee62db8d7589', class: "table-light align-middle" }, h("td", { key: 'a3eef122632c9459d5fa31d4542b6b085645b738', part: tableCell, colSpan: this.payoutsTable.columnData.length }, h("pagination-menu", { key: '8d77a7e40f9e7c6770812ba8b45a6e0f5f57193e', paging: Object.assign(Object.assign({}, this.paging), { handleClickPrevious: this.handleClickPrevious, handleClickNext: this.handleClickNext }) })))))))));
+        return (h("div", { key: 'ff5859c3d61ab7b2d532541c383c2478b9efc391' }, h("div", { key: 'cb50816020bfd324fae4f5f0d1a151ab04600b64', class: "table-wrapper", part: "table-wrapper" }, h("table", { key: '69cf5b76a95dd9396b97c6dd54aab8c067522102', class: "table table-hover", part: table }, h("thead", { key: '086161ba08d930efaf431571fa7670ad74a1ec88', class: "table-head sticky-top", part: "table-head" }, h("tr", { key: '659d524600aec47afa5dc75cce808da945408536', class: "table-light text-nowrap", part: "table-head-row" }, this.payoutsTable.columnData.map((column) => column))), h("tbody", { key: 'bf665357df28983b110565b8556f1cf1a022f164', class: "table-body" }, h(TableLoadingState, { key: 'c789d5b153a377ca1d2e0244e4480fe118ffa2d2', columnSpan: this.payoutsTable.columnKeys.length, isLoading: this.loading }), h(TableEmptyState, { key: '80ab61d7e68e50ad88ad5a7f8e11464418006a59', isEmpty: this.showEmptyState, columnSpan: this.payoutsTable.columnKeys.length }), h(TableErrorState, { key: '195c41c6e0a91d09ca0440002e2883fe49626c07', columnSpan: this.payoutsTable.columnKeys.length, errorMessage: this.errorMessage }), this.showRowData && this.payoutsTable.rowData.map((data, index) => (h("tr", { "data-test-id": "table-row", "data-row-entity-id": this.entityId[index], onClick: this.rowClickHandler }, data)))), this.paging && (h("tfoot", { key: 'd9094830c7572cfbbfe0a17d55d9ad0daffd319f', class: "sticky-bottom" }, h("tr", { key: '658d6a380abc8085f5ec26b1423e0b9487b962d6', class: "table-light align-middle" }, h("td", { key: '962ddd1a6873a7206126e145d6772bacd4197cbf', part: tableCell, colSpan: this.payoutsTable.columnData.length }, h("pagination-menu", { key: '28c37545fe9fdce46302a9cc6d370d95e7d03d7b', paging: Object.assign(Object.assign({}, this.paging), { handleClickPrevious: this.handleClickPrevious, handleClickNext: this.handleClickNext }) })))))))));
     }
     static get is() { return "payouts-list-core"; }
     static get properties() {

package/dist/collection/components/payouts-list/payouts-list-filters.js

@@ -28,8 +28,8 @@ export class PayoutsListFilters {
     }
     render() {
         const filterMenuParams = Object.assign({}, filterParams);
-        return (h(StyledHost, { key: 'fca8f3d0daf92026b7d3cccdd096c8650eb31d28' }, h("table-filters-menu", { key: 'b166ff52682804bd241866ffbe53ada0cf6133e8', params: filterMenuParams, clearParams: clearParams, part: payoutsListFilterMenu }, h("div", { key: 'f72774348aac13463934af8c8bfb3aa9b29a3942', class: "grid-cols-2 gap-3 p-1" }, h("div", { key: '87ee14df90cd83394e573f1f4e75d315cd48b2d3', class: "p-2" }, h("form-control-date", { key: 'f14e2dd16a24d8f6ac41ed110bdf2e5f0e7b0389', name: "created_after", label: "Created After", inputHandler: this.handleDateInput, defaultValue: convertToLocal(this.createdAfter, { showInputDate: true }) ||
-                convertToLocal(filterParams.created_after, { showInputDate: true }), disabled: !!this.createdAfter, part: createdAfterPayoutsListFilterParam })), h("div", { key: 'fe9b41fcc98571f9f5f477a0006a2a00a5bdba1c', class: "p-2" }, h("form-control-date", { key: '9ab09d81f389f410ea7d1d533a0f25995d261aef', name: "created_before", label: "Created Before", inputHandler: this.handleDateInput, defaultValue: convertToLocal(this.createdBefore, { showInputDate: true }) ||
+        return (h(StyledHost, { key: '30857b318a635a1420f56799c572f39da85d6317' }, h("table-filters-menu", { key: 'c3b0bdc3d50d9cc3e2cef3adfbba7f0fe7539044', params: filterMenuParams, clearParams: clearParams, part: payoutsListFilterMenu }, h("div", { key: '9be791ebd77eb197e18e7663c30fa2a12c1e9a4f', class: "grid-cols-2 gap-3 p-1" }, h("div", { key: '3e172e7f255b4e78b48cb03d2b921b01fdefc4b0', class: "p-2" }, h("form-control-date", { key: '875f2202358370bec6df4b724dbc2db7070b1ff7', name: "created_after", label: "Created After", inputHandler: this.handleDateInput, defaultValue: convertToLocal(this.createdAfter, { showInputDate: true }) ||
+                convertToLocal(filterParams.created_after, { showInputDate: true }), disabled: !!this.createdAfter, part: createdAfterPayoutsListFilterParam })), h("div", { key: 'ce324f47aa1b38b6d24f200a7b468076c6998faf', class: "p-2" }, h("form-control-date", { key: '3d2543d40d2f3ac60c7f3f09d905c102425dffc6', name: "created_before", label: "Created Before", inputHandler: this.handleDateInput, defaultValue: convertToLocal(this.createdBefore, { showInputDate: true }) ||
                 convertToLocal(filterParams.created_before, { showInputDate: true }), disabled: !!this.createdBefore, part: createdBeforePayoutsListFilterParam }))))));
     }
     static get is() { return "justifi-payouts-list-filters"; }

package/dist/collection/components/payouts-list/payouts-list.js

@@ -70,7 +70,7 @@ export class PayoutsList {
         }
     }
     render() {
-        return (h(StyledHost, { key: '7456971cf903af6fd77385fd01dac69760b9df11', exportedparts: tableExportedParts }, h("payouts-list-core", { key: '6bf911cb5a793f49fb19903013c48e6df93f9866', getPayouts: this.getPayouts, getPayoutCSV: this.getPayoutCSV, getSubAccounts: this.getSubAccounts, "onError-event": this.handleOnError, columns: this.columns })));
+        return (h(StyledHost, { key: '434171dee57c7d639a894133b36f7dc727e28381', exportedparts: tableExportedParts }, h("payouts-list-core", { key: 'e4ed849e1c839dcdd3990a1b64d2bd132cda86f8', getPayouts: this.getPayouts, getPayoutCSV: this.getPayoutCSV, getSubAccounts: this.getSubAccounts, "onError-event": this.handleOnError, columns: this.columns })));
     }
     static get is() { return "justifi-payouts-list"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/refund-payment/refund-payment-schema.js

@@ -0,0 +1,16 @@
+import * as yup from "yup";
+import { formatCurrency } from "../../utils/utils";
+const RefundPaymentSchema = (maxRefundAmount) => {
+    const maxAmount = +maxRefundAmount;
+    return yup.object().shape({
+        amount: yup
+            .string()
+            .required('Amount is required')
+            .typeError('Amount must be a number')
+            .test('amount', `Refund amount cannot be more than ${formatCurrency(maxAmount)}`, function (value) {
+            return +value <= maxAmount;
+        })
+            .nullable(),
+    });
+};
+export default RefundPaymentSchema;

package/dist/collection/components/{refund-form/refund-form.js → refund-payment/refund-payment.js}

@@ -1,32 +1,31 @@
 import { h, } from "@stencil/core";
-import RefundFormSchema from "./refund-form-schema";
+import RefundPaymentSchema from "./refund-payment-schema";
 import { Api } from "../../api";
 import { FormController } from "../../ui-components/form/form";
-import { CURRENCY_MASK } from "../../utils/form-input-masks";
-import { StyledHost } from "../../ui-components";
-export class RefundForm {
+import { Header1, StyledHost } from "../../ui-components";
+import { formatCurrency } from "../../utils/utils";
+import refundReasonOptions from "./refund-reason-options";
+export class RefundPayment {
     constructor() {
         this.authToken = undefined;
         this.paymentId = undefined;
-        this.amount = 0;
-        this.submitButtonText = 'Submit';
+        this.paymentAmountRefundable = 0;
         this.withButton = undefined;
-        this.refundInfoText = undefined;
         this.errors = {};
+        this.values = {};
         this.isSubmitting = false;
     }
     componentWillLoad() {
-        this.formController = new FormController(RefundFormSchema);
-        this.formController.setInitialValues({
-            amount: this.amount,
-            message: '',
-        });
+        this.formController = new FormController(RefundPaymentSchema(this.paymentAmountRefundable.toString()));
         this.initializeApi();
     }
     componentDidLoad() {
         this.formController.errors.subscribe(errors => {
             this.errors = Object.assign({}, errors);
         });
+        this.formController.values.subscribe(values => {
+            this.values = Object.assign({}, values);
+        });
     }
     /**
      * Handles the form submission.
@@ -34,19 +33,16 @@ export class RefundForm {
      */
     async handleSubmit(event) {
         event.preventDefault();
-        this.formController.validateAndSubmit(this.submitRefund.bind(this), {
-            amount: this.amount,
-        });
+        this.formController.validateAndSubmit(this.submitRefund);
     }
     /**
      * Submits the refund request to the API.
      */
-    async submitRefund() {
+    async submitRefund(values) {
         this.isSubmitting = true;
-        const refundFields = this.formController.values.getValue();
         try {
-            await this.api.post(`payments/${this.paymentId}/refunds`, refundFields);
-            this.submitted.emit(refundFields);
+            const response = await this.api.post(`payments/${this.paymentId}/refunds`, values);
+            this.submitted.emit(response);
         }
         catch (error) {
             console.error('Error submitting refund:', error);
@@ -73,10 +69,9 @@ export class RefundForm {
         this.api = Api({ authToken: this.authToken, apiOrigin: PROXY_API_ORIGIN });
     }
     render() {
-        var _a;
-        return (h(StyledHost, { key: '7becd3fcc3a0beefef5efdb860616aa60f7e61ad' }, h("h1", { key: '7125ac0e8452db4013d9065054aca8d65ead0138' }, "Refund"), this.refundInfoText && (h("div", { key: 'b60dbcac95e75469bab9e575efe5eba40d629693', class: "d-flex align-items-center flex-row gap-4 border-top border-bottom my-4 p-3", role: "alert" }, h("img", { key: '231e5bcb4fdd82ea4e9bb0597bfe194759eb8e22', src: "/info-icon.svg", alt: "Information", height: "30", width: "30" }), h("p", { key: '21faa4040e99ee142e0f06246fc8317dcc5dfa28', class: "m-0", innerHTML: this.refundInfoText }))), h("form", { key: '4a8671c7f833279c14e29ae0f4054586fa7ecbba', onSubmit: e => this.handleSubmit(e), class: "d-grid gap-4" }, h("div", { key: 'd4296520cb377a6b61547615a2b95a3088ace83a', class: "form-group" }, h("form-control-monetary", { key: 'dbe00249e022722aea24f9967408625b7460f0f7', name: "amount", label: "Refund Amount", defaultValue: ((_a = this.amount) === null || _a === void 0 ? void 0 : _a.toString()) || '', maskOptions: CURRENCY_MASK.DECIMAL, inputHandler: (name, value) => this.handleInput(name, value), errorText: this.errors.amount })), h("div", { key: '765d36337fc31bd6ade5b9a94397b83e7f46e2a8', class: "form-group" }, h("form-control-text", { key: '3f3bc7e95568944d876fcf95e98ba9d871479096', name: "notes", label: "Additional Notes", inputHandler: (name, value) => this.handleInput(name, value), errorText: this.errors.notes })), this.withButton && (h("div", { key: '4576ce0e5d04f063fd53045845fa5a4cf5bc6383', class: "form-group d-flex flex-row-reverse" }, h("button", { key: '6165726b003006432d82ce5792a961ea2f42d654', type: "submit", disabled: !!this.isSubmitting, class: "btn btn-primary ml-auto" }, this.submitButtonText))))));
+        return (h(StyledHost, { key: 'f9aa3650a61fce55ce094e48cb23cc62caf4c434' }, h(Header1, { key: 'def40858b3cf9188362848703e6425cc1273b1ee', text: "Refund Payment", class: "fs-5 fw-bold pb-3" }), h("form", { key: '20fcdff2467713eb3502959d0186de900a400207', onSubmit: e => this.handleSubmit(e), class: "d-grid gap-4" }, h("div", { key: '5e838c432e5e0fafdfd153de327548a2d2d7f388', class: "form-group" }, h("form-control-monetary", { key: '151d529e7422073da4244f9bc81166f6a54ad9b0', name: "amount", label: "Refund Amount", inputHandler: (name, value) => this.handleInput(name, value), errorText: this.errors.amount, defaultValue: this.paymentAmountRefundable.toString() })), h("div", { key: '7d69e721b5f346d854f8b1914199c56fb062694d', class: "form-group" }, h("form-control-select", { key: '791d41bf86e856a7694afb0db20607ba792459b9', label: "Reason for refund (optional)", options: refundReasonOptions, name: "reason", defaultValue: '' })), h("div", { key: 'b8a67a5d091ad11a410d157cf6706023b3af139c', class: "form-group" }, h("form-control-textarea", { key: 'eee0ab29c728a64435c2836361eb2c2645fce1ea', name: "description", label: "Note (optional)", inputHandler: (name, value) => this.handleInput(name, value), errorText: this.errors.description, maxLength: 250 })), this.withButton && (h("div", { key: '3504774504825ffdace54ebf41f496aa58395648', class: "form-group d-flex flex-row-reverse" }, h("button", { key: '27179c019afbec3d136c959657e6e6cbec892a27', type: "submit", disabled: !!this.isSubmitting, class: "btn btn-primary ml-auto" }, `Refund ${formatCurrency(+this.values.amount)}`))))));
     }
-    static get is() { return "justifi-refund-form"; }
+    static get is() { return "justifi-refund-payment"; }
     static get encapsulation() { return "shadow"; }
     static get properties() {
         return {
@@ -114,7 +109,7 @@ export class RefundForm {
                 "attribute": "payment-id",
                 "reflect": false
             },
-            "amount": {
+            "paymentAmountRefundable": {
                 "type": "number",
                 "mutable": false,
                 "complexType": {
@@ -126,30 +121,12 @@ export class RefundForm {
                 "optional": true,
                 "docs": {
                     "tags": [],
-                    "text": "The amount of the payment to be refunded."
+                    "text": "The amount of the payment to be refunded. This should be equal to the Payment `amount_refundable` property."
                 },
-                "attribute": "amount",
+                "attribute": "payment-amount-refundable",
                 "reflect": false,
                 "defaultValue": "0"
             },
-            "submitButtonText": {
-                "type": "string",
-                "mutable": false,
-                "complexType": {
-                    "original": "string",
-                    "resolved": "string",
-                    "references": {}
-                },
-                "required": false,
-                "optional": true,
-                "docs": {
-                    "tags": [],
-                    "text": "Custom text for the submit button. Defaults to 'Submit'."
-                },
-                "attribute": "submit-button-text",
-                "reflect": false,
-                "defaultValue": "'Submit'"
-            },
             "withButton": {
                 "type": "boolean",
                 "mutable": false,
@@ -166,29 +143,13 @@ export class RefundForm {
                 },
                 "attribute": "with-button",
                 "reflect": false
-            },
-            "refundInfoText": {
-                "type": "string",
-                "mutable": false,
-                "complexType": {
-                    "original": "string",
-                    "resolved": "string",
-                    "references": {}
-                },
-                "required": false,
-                "optional": true,
-                "docs": {
-                    "tags": [],
-                    "text": "Optional information text displayed above the form."
-                },
-                "attribute": "refund-info-text",
-                "reflect": false
             }
         };
     }
     static get states() {
         return {
             "errors": {},
+            "values": {},
             "isSubmitting": {}
         };
     }
@@ -204,13 +165,13 @@ export class RefundForm {
                     "text": "Event emitted when the refund form is successfully submitted.\nThe submitted refund fields are passed as the event detail."
                 },
                 "complexType": {
-                    "original": "RefundFormFields",
-                    "resolved": "RefundFormFields",
+                    "original": "RefundPaymentFields",
+                    "resolved": "RefundPaymentFields",
                     "references": {
-                        "RefundFormFields": {
+                        "RefundPaymentFields": {
                             "location": "import",
-                            "path": "./refund-form-schema",
-                            "id": "src/components/refund-form/refund-form-schema.ts::RefundFormFields"
+                            "path": "./refund-payment-schema",
+                            "id": "src/components/refund-payment/refund-payment-schema.ts::RefundPaymentFields"
                         }
                     }
                 }

package/dist/collection/components/refund-payment/refund-reason-options.js

@@ -0,0 +1,19 @@
+const refundReasonOptions = [
+    {
+        label: 'Select a reason',
+        value: '',
+    },
+    {
+        label: 'Customer requested a refund',
+        value: 'customer_request',
+    },
+    {
+        label: 'Customer was double-charged',
+        value: 'duplicate',
+    },
+    {
+        label: 'Payment was reported as fraud',
+        value: 'fraudulent',
+    }
+];
+export default refundReasonOptions;

package/dist/collection/components/terminal-orders-list/terminal-orders-list-core.js

@@ -86,7 +86,7 @@ export class TerminalOrdersListCore {
         return !this.showEmptyState && !this.showErrorState && !this.loading;
     }
     render() {
-        return (h("div", { key: '07a7b40585feb4644ddcf1a8c202460c79c8b045' }, h("div", { key: 'e03fc01808d22ce86bfdfaa2086f8492f45ee64e', class: "table-wrapper" }, h("table", { key: '0c54da0a4526466e487ad5093cb6c426c4cfb81a', class: "table table-hover", part: table }, h("thead", { key: 'b4495bd1eb73750104667cb7b74061dca4bb6257', class: "table-head sticky-top" }, h("tr", { key: '8df705836f557da6c08b33094eecb0505f8d3ec8', class: "table-light text-nowrap" }, this.terminalOrdersTable.columnData.map((column) => column))), h("tbody", { key: '47b008d75931b177e1acd3bc073f6015dfb17498', class: "table-body" }, h(TableLoadingState, { key: '7f2e4e329ec342db4aac981e514e28245cdbc992', columnSpan: this.terminalOrdersTable.columnKeys.length, isLoading: this.loading }), h(TableEmptyState, { key: 'f4a17608ce889a890f5dd1bf689e6ae24ad28ca9', isEmpty: this.showEmptyState, columnSpan: this.terminalOrdersTable.columnKeys.length }), h(TableErrorState, { key: 'e57677d193f4eff27793d684607572631dc97d8a', columnSpan: this.terminalOrdersTable.columnKeys.length, errorMessage: this.errorMessage }), this.showRowData && this.terminalOrdersTable.rowData.map((data, index) => (h("tr", { "data-test-id": "table-row", "data-row-entity-id": this.entityId[index], onClick: this.rowClickHandler }, data)))), this.paging && (h("tfoot", { key: '7c427d0b2db99df57ebd097ef8671566f6239d50', class: "sticky-bottom" }, h("tr", { key: 'b5d8bf7d6d43119f8f31a2ea0e0966e8f0888889', class: "table-light align-middle" }, h("td", { key: 'f36bd4d815ca6be5c69a264c90b0ce6696bc6664', part: tableCell, colSpan: this.terminalOrdersTable.columnData.length }, h("pagination-menu", { key: '25f4964ec46220bbceac9f763e668f77bac79299', paging: Object.assign(Object.assign({}, this.paging), { handleClickPrevious: this.handleClickPrevious, handleClickNext: this.handleClickNext }) })))))))));
+        return (h("div", { key: '029644a4c7e2f8957ffafb9ff62390b6b6869fce' }, h("div", { key: 'c6d0ae6e68f45252bbc276da1ed853fc6b9b5338', class: "table-wrapper" }, h("table", { key: '1809d7ddfd9b9c6834498115ac43df8f7b4ea5d9', class: "table table-hover", part: table }, h("thead", { key: 'bcd8f0c82e5aa97ba1bd1207353bc09a4c21bd05', class: "table-head sticky-top" }, h("tr", { key: 'bfe9dc35dc30acf4f483c0359989db9ff82ceb7a', class: "table-light text-nowrap" }, this.terminalOrdersTable.columnData.map((column) => column))), h("tbody", { key: '5181c615bbc06bf347c9e567064fcbbf6b518d2d', class: "table-body" }, h(TableLoadingState, { key: 'a48ee705634008f203e01327ea6f9efdf980fdc5', columnSpan: this.terminalOrdersTable.columnKeys.length, isLoading: this.loading }), h(TableEmptyState, { key: 'ae1daed5464b7719e4f4e7c116a408b6b37cb997', isEmpty: this.showEmptyState, columnSpan: this.terminalOrdersTable.columnKeys.length }), h(TableErrorState, { key: '9496b60d37f5ad699083f3cd305e14550a4b6770', columnSpan: this.terminalOrdersTable.columnKeys.length, errorMessage: this.errorMessage }), this.showRowData && this.terminalOrdersTable.rowData.map((data, index) => (h("tr", { "data-test-id": "table-row", "data-row-entity-id": this.entityId[index], onClick: this.rowClickHandler }, data)))), this.paging && (h("tfoot", { key: '0ac98a7e41add32367010e0c09f99c4328f2d717', class: "sticky-bottom" }, h("tr", { key: 'a8fda69087663a8707ef16c2fa153d351426fe0c', class: "table-light align-middle" }, h("td", { key: 'f805502e404b69e86f3ec0963321bd9989c035b8', part: tableCell, colSpan: this.terminalOrdersTable.columnData.length }, h("pagination-menu", { key: '93848e212dce3b8e00b4e44e4907045c2ca5fd67', paging: Object.assign(Object.assign({}, this.paging), { handleClickPrevious: this.handleClickPrevious, handleClickNext: this.handleClickNext }) })))))))));
     }
     static get is() { return "terminal-orders-list-core"; }
     static get properties() {

package/dist/collection/components/terminal-orders-list/terminal-orders-list-filters.js

@@ -48,8 +48,8 @@ export class TerminalOrdersListFilters {
     }
     render() {
         const filterMenuParams = Object.assign({}, filterParams);
-        return (h(StyledHost, { key: '9f84e2a68bbf745714bd972e6f8510eb5c864248' }, h("table-filters-menu", { key: 'f78bfdd9940b62f74cc96969946df75274e8580c', params: filterMenuParams, clearParams: clearParams, part: terminalOrdersListFilterMenu }, h("div", { key: 'e16d37583700f39e1ab513fb362555677aa77bbf', class: "grid-cols-2 gap-3 p-1" }, h("div", { key: '81e9b0f98cec6fb803b17ce10a1a79d61f302988', class: "p-2" }, h("form-control-select", { key: 'c5749e4b06a3c4af835e03384434d0fed054c22b', name: "order_status", label: "Order Status", options: this.terminalOrderStatusOptions, inputHandler: this.setParamsOnChange, defaultValue: this.orderStatus || filterParams.order_status, disabled: !!this.orderStatus, part: orderStatusTerminalOrdersListFilterParam })), h("div", { key: 'e2367532d8147a1fc184eadce40f61894cd701cd', class: "p-2" }, h("form-control-select", { key: 'f8145506abf6879b4a21d9ae49d43061e5f6daef', name: "order_type", label: "Order Type", options: this.terminalOrderTypeOptions, inputHandler: this.setParamsOnChange, defaultValue: this.orderType || filterParams.order_type, disabled: !!this.orderType, part: orderTypeTerminalOrdersListFilterParam })), h("div", { key: '61b3da75c15121adc65c37443f0d251c2bf0af45', class: "p-2" }, h("form-control-date", { key: 'eb8afbbb5b2148fb12705fc0b577290b9f5ac881', name: "created_after", label: "Created After", inputHandler: this.handleDateInput, defaultValue: convertToLocal(this.createdAfter, { showInputDateTime: true }) ||
-                convertToLocal(filterParams.created_after, { showInputDateTime: true }), showTime: true, disabled: !!this.createdAfter, part: createdAfterTerminalOrdersListFilterParam })), h("div", { key: '968131100100709c91fdd1c6d2916910bb5d34b2', class: "p-2" }, h("form-control-date", { key: 'd1f34c4297a80dd7c9f3e301d798c99db82a7b80', name: "created_before", label: "Created Before", inputHandler: this.handleDateInput, defaultValue: convertToLocal(this.createdBefore, { showInputDateTime: true }) ||
+        return (h(StyledHost, { key: 'fa53c48c1a916781c8fffe7910f524ea334cdf27' }, h("table-filters-menu", { key: 'e8ba7a019f92234775acbaf2dafb817fb98f8d70', params: filterMenuParams, clearParams: clearParams, part: terminalOrdersListFilterMenu }, h("div", { key: '67e0b83350c37c7fa73f8e2808266fb8fda96838', class: "grid-cols-2 gap-3 p-1" }, h("div", { key: '08fd58b47b35fcb073b116c827ad2bb07c17f879', class: "p-2" }, h("form-control-select", { key: '1a6a468d37afb5a25d37e4f9e43d6bd23414c6a3', name: "order_status", label: "Order Status", options: this.terminalOrderStatusOptions, inputHandler: this.setParamsOnChange, defaultValue: this.orderStatus || filterParams.order_status, disabled: !!this.orderStatus, part: orderStatusTerminalOrdersListFilterParam })), h("div", { key: '92c8b10d0c48811a63d0ed796637dfadb85b00c4', class: "p-2" }, h("form-control-select", { key: 'f8d7e96f8c0a9215ebb5b7a1f581b4dc60e5ad10', name: "order_type", label: "Order Type", options: this.terminalOrderTypeOptions, inputHandler: this.setParamsOnChange, defaultValue: this.orderType || filterParams.order_type, disabled: !!this.orderType, part: orderTypeTerminalOrdersListFilterParam })), h("div", { key: '2d5b3262a022d3122d533ef7f7e886dec5c2b701', class: "p-2" }, h("form-control-date", { key: '4b1e799b9a99ce9046ea3a3e0b3249d566448ae6', name: "created_after", label: "Created After", inputHandler: this.handleDateInput, defaultValue: convertToLocal(this.createdAfter, { showInputDateTime: true }) ||
+                convertToLocal(filterParams.created_after, { showInputDateTime: true }), showTime: true, disabled: !!this.createdAfter, part: createdAfterTerminalOrdersListFilterParam })), h("div", { key: '93019260d2befe0ca3d99c17a769f2ebb1b6f07f', class: "p-2" }, h("form-control-date", { key: '3aba4879d8998c90a36f2fa5326c230792768403', name: "created_before", label: "Created Before", inputHandler: this.handleDateInput, defaultValue: convertToLocal(this.createdBefore, { showInputDateTime: true }) ||
                 convertToLocal(filterParams.created_before, { showInputDateTime: true }), showTime: true, disabled: !!this.createdBefore, part: createdBeforeTerminalOrdersListFilterParam }))))));
     }
     static get is() { return "justifi-terminal-orders-list-filters"; }

package/dist/collection/components/terminal-orders-list/terminal-orders-list.js

@@ -43,7 +43,7 @@ export class TerminalOrdersList {
         }
     }
     render() {
-        return (h(StyledHost, { key: '1975f9c01aa35624f1b7f0fc5b444a9b688fb01a' }, h("terminal-orders-list-core", { key: '5488661e4526af1e3db008e56baf5289c46737e6', getTerminalOrders: this.getTerminalOrders, "onError-event": this.handleErrorEvent, columns: this.columns })));
+        return (h(StyledHost, { key: 'beb7ebe2397c43c28b818133294b6c972d2834ac' }, h("terminal-orders-list-core", { key: '87db98176b2a462b9446170c348352958d4e3a05', getTerminalOrders: this.getTerminalOrders, "onError-event": this.handleErrorEvent, columns: this.columns })));
     }
     static get is() { return "justifi-terminal-orders-list"; }
     static get encapsulation() { return "shadow"; }

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

@@ -124,7 +124,7 @@ export class TerminalsListCore {
         return !this.showEmptyState && !this.showErrorState && !this.loading;
     }
     render() {
-        return (h("div", { key: 'b43bce610d87129e9f509a0b62e2c8ca25187c1b' }, h("div", { key: '8a29d235532fbea5e8de8196ba11776dbd697b7e', class: "table-wrapper" }, h("table", { key: 'f52c104f03c014510c8b796d6fdaaf56d0f17cc4', class: "table table-hover", part: table }, h("thead", { key: 'c3690cf84b2208e5bf91ce781876bc42a468f96c', class: "table-head sticky-top" }, h("tr", { key: '419b8dd4d311efe4435c4ca3a15f62985d4300f3', class: "table-light text-nowrap" }, this.terminalsTable.columnData.map((column) => column))), h("tbody", { key: '5c9ef7f9d6d53b2f63c907f35cd7e6afeb44481b', class: "table-body" }, h(TableLoadingState, { key: '6b24dda78bd4c17751e8956127ff9394c720edf5', columnSpan: this.terminalsTable.columnKeys.length, isLoading: this.loading }), h(TableEmptyState, { key: '76d3646c7ba043f091947d5fdd536d4ac7df6902', isEmpty: this.showEmptyState, columnSpan: this.terminalsTable.columnKeys.length }), h(TableErrorState, { key: '0b418d8ca3268176b47aee6b80712d75181c8d9c', columnSpan: this.terminalsTable.columnKeys.length, errorMessage: this.errorMessage }), this.showRowData && this.terminalsTable.rowData.map((data, index) => (h("tr", { "data-test-id": "table-row", "data-row-entity-id": this.entityId[index], onClick: this.rowClickHandler }, data)))), this.paging && (h("tfoot", { key: 'a46a3632e5610dd29f919d9c7b969cb1c07f67ac', class: "sticky-bottom" }, h("tr", { key: '7ef9b68abdae3cb542ecce0c261746413f1e6321', class: "table-light align-middle" }, h("td", { key: '72b477d84f6e58a5e457647e581de87ebc8f53c0', part: tableCell, colSpan: this.terminalsTable.columnData.length }, h("pagination-menu", { key: 'de9635642f0ea24da62b8dd2c50e05c4a2c87f37', paging: Object.assign(Object.assign({}, this.paging), { handleClickPrevious: this.handleClickPrevious, handleClickNext: this.handleClickNext }) })))))))));
+        return (h("div", { key: 'dab480902928e4dbcdbf0c8ada95fdc4d186f211' }, h("div", { key: '8fd8ce93ac16676d4ea9de2588467df5feb18e71', class: "table-wrapper" }, h("table", { key: '02a58d1f233bec3cd40877c4cfeba55b345876b7', class: "table table-hover", part: table }, h("thead", { key: '64d3d4cdb0c97a0628da1935386e9cb430a71ea7', class: "table-head sticky-top" }, h("tr", { key: 'a52c8d1a59adfa1d18dc8dfa3a70a6318f52f4c2', class: "table-light text-nowrap" }, this.terminalsTable.columnData.map((column) => column))), h("tbody", { key: '476983a5b8dcb65d62953de2a8a7a24c47cb83be', class: "table-body" }, h(TableLoadingState, { key: 'ecae363863cb7ab6b2d8226f8f39bc682333af29', columnSpan: this.terminalsTable.columnKeys.length, isLoading: this.loading }), h(TableEmptyState, { key: 'f8fb01d5048fc0143546344b65a9018aeab8b688', isEmpty: this.showEmptyState, columnSpan: this.terminalsTable.columnKeys.length }), h(TableErrorState, { key: 'cd40cb1696624e20b9cad238d43be902538ce4cd', columnSpan: this.terminalsTable.columnKeys.length, errorMessage: this.errorMessage }), this.showRowData && this.terminalsTable.rowData.map((data, index) => (h("tr", { "data-test-id": "table-row", "data-row-entity-id": this.entityId[index], onClick: this.rowClickHandler }, data)))), this.paging && (h("tfoot", { key: '29ebf6d4d3537f25545fa9e67416c52ee1223b12', class: "sticky-bottom" }, h("tr", { key: 'a732f3d809a4f97b926b0e978e32c919f36c13b1', class: "table-light align-middle" }, h("td", { key: '2e66c17f57a08d4e0f4da693caf0ea44f5ec7484', part: tableCell, colSpan: this.terminalsTable.columnData.length }, h("pagination-menu", { key: 'e3544088964b15242d710223a76208217bffab3f', paging: Object.assign(Object.assign({}, this.paging), { handleClickPrevious: this.handleClickPrevious, handleClickNext: this.handleClickNext }) })))))))));
     }
     static get is() { return "terminals-list-core"; }
     static get properties() {