@justifi/webcomponents 6.1.0-rc.2 → 6.1.0

package/dist/collection/components/modular-checkout/sub-components/bank-account.js

@@ -40,10 +40,10 @@ export class BankAccountForm {
         return this.accountNumberIframeElement.tokenize(clientId, paymentMethodMetadata, account);
     }
     render() {
-        return (h(StyledHost, { key: '99ccb5aa2afbf79e5bf40d59ca15eb217180349a' }, h(BankAccountFormSkeleton, { key: 'a26a6f4391a5e5b7923f36b05bdfe57491b31d8a', isReady: this.isReady }), h("hidden-input", { key: '7555fe1bbf38a1525e7c11fe7182e264752435c9' }), h("div", { key: 'd1d7141ee75a644d4ae67d23b353dc6293306371', class: "container-fluid p-0", style: {
+        return (h(StyledHost, { key: 'a2fd28c8b8202e0d702d02761cbcf3f568298265' }, h(BankAccountFormSkeleton, { key: '6777d110d3ccf3a688a763687c7087a3520643ac', isReady: this.isReady }), h("hidden-input", { key: '513e1cdaaf464a741d4312a6d359c4af665e0ade' }), h("div", { key: '2b4e473c7bb062a78148537d2cad02caf503330d', class: "container-fluid p-0", style: {
                 opacity: this.isReady ? '1' : '0',
                 height: this.isReady ? 'auto' : '0',
-            } }, h("div", { key: 'db0d578ccb3647e049b5ef958bef0273a8945448', class: "row mb-3" }, h("iframe-input", { key: '58311d94a8f5f023f05de260afbaf6bc707a0d57', inputId: "accountNumber", ref: (el) => (this.accountNumberIframeElement = el), label: "Account Number", iframeOrigin: `${this.iframeOrigin}/v2/accountNumber` })), h("div", { key: '92e4b77f012a414ac88b8faf721b5a10f2c5a3a4', class: "row" }, h("iframe-input", { key: '5163f7e8cff8fb82bb009f615ef7ab2e231deb52', inputId: "routingNumber", ref: (el) => (this.routingNumberIframeElement = el), label: "Routing Number", iframeOrigin: `${this.iframeOrigin}/v2/routingNumber` })))));
+            } }, h("div", { key: 'e706151f3e04835efab49fc0fb7a48f4657ab2c4', class: "row mb-3" }, h("iframe-input", { key: 'a70e0deac68d04f9ffa37790c33d801cfce8dc46', inputId: "accountNumber", ref: (el) => (this.accountNumberIframeElement = el), label: "Account Number", iframeOrigin: `${this.iframeOrigin}/v2/accountNumber` })), h("div", { key: '3f488f86388b2fc797c49ddc81c7de3a815ca74f', class: "row" }, h("iframe-input", { key: 'a09d3cec373c5bab5b38ebc090724178e65d2de2', inputId: "routingNumber", ref: (el) => (this.routingNumberIframeElement = el), label: "Routing Number", iframeOrigin: `${this.iframeOrigin}/v2/routingNumber` })))));
     }
     static get is() { return "justifi-bank-account-form"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/modular-checkout/sub-components/billing-form-full.js

@@ -45,7 +45,6 @@ export class BillingFormFull {
         return {
             "legend": {
                 "type": "string",
-                "attribute": "legend",
                 "mutable": true,
                 "complexType": {
                     "original": "string",
@@ -60,7 +59,8 @@ export class BillingFormFull {
                 },
                 "getter": false,
                 "setter": false,
-                "reflect": false
+                "reflect": false,
+                "attribute": "legend"
             }
         };
     }

package/dist/collection/components/modular-checkout/sub-components/card-billing-form-simple.js

@@ -33,7 +33,7 @@ export class CardBillingFormSimple {
     }
     render() {
         const billingFormDefaultValue = this.formController.getInitialValues();
-        return (h(StyledHost, { key: '648204826c1e3979b8556ce9049f5e025a52b282' }, h("div", { key: 'dba0067b4662662653e424ff2c81c6edc831ed46', part: billingForm }, h("form", { key: '651812a32f1ee195f89238d1125573b6f9a62fa7' }, h("fieldset", { key: '15e9d4713fba88bb6de715c48b41b1c3ebfab9df' }, this.legend && (h("legend", { key: '783b34c1a9c2f4d407587b1a356ccf1e0e119993' }, this.legend)), h("div", { key: 'f322d2a29f50bff82167e9c5633a9f1d8b3f3cef', class: "row gy-3" }, h("div", { key: 'a02f6b275a02b32c37fd8c15921a582fa6a235a7', class: "col-12" }, h("form-control-text", { key: '3efd6677727b377bbf4432dc13c34500930ec801', name: 'address_postal_code', label: "ZIP", defaultValue: billingFormDefaultValue.address_postal_code, errorText: this.errors.address_postal_code, inputHandler: this.inputHandler, maxLength: 5, keyDownHandler: numberOnlyHandler }))))))));
+        return (h(StyledHost, { key: '26fd30b96e63f0adac380f70fae5cb4b80d9b36f' }, h("div", { key: '79558919d544889647d034bdc415f9b404d4a058', part: billingForm }, h("form", { key: '21b722098010050f4a22b1e3cc995090c50a9f74' }, h("fieldset", { key: 'f371a839f16363d8242a38469c78eba1759e46a7' }, this.legend && (h("legend", { key: '45b9d4d5b0dd502f5ebca9c357cdf6b75a16f9e1' }, this.legend)), h("div", { key: 'ae1c10a2bae0061dd2aa0645e7d1f8c8ed899444', class: "row gy-3" }, h("div", { key: 'cd99d74f2803336bd0b25c7a962ef95fa66079ba', class: "col-12" }, h("form-control-text", { key: '6ac34b703ae83a9e6c4c86b3c239795c5a7d0d57', name: 'address_postal_code', label: "ZIP", defaultValue: billingFormDefaultValue.address_postal_code, errorText: this.errors.address_postal_code, inputHandler: this.inputHandler, maxLength: 5, keyDownHandler: numberOnlyHandler }))))))));
     }
     static get is() { return "justifi-card-billing-form-simple"; }
     static get encapsulation() { return "shadow"; }
@@ -41,7 +41,6 @@ export class CardBillingFormSimple {
         return {
             "legend": {
                 "type": "string",
-                "attribute": "legend",
                 "mutable": true,
                 "complexType": {
                     "original": "string",
@@ -56,7 +55,8 @@ export class CardBillingFormSimple {
                 },
                 "getter": false,
                 "setter": false,
-                "reflect": false
+                "reflect": false,
+                "attribute": "legend"
             }
         };
     }

package/dist/collection/components/modular-checkout/sub-components/card-form.js

@@ -44,10 +44,10 @@ export class JustifiCardForm {
         return this.cardNumberIframeElement.tokenize(clientId, paymentMethodMetadata, account);
     }
     render() {
-        return (h(StyledHost, { key: '46991f66161e4118fdf135bf18eb757435e26457' }, h(CardFormSkeleton, { key: 'aacb7f467a10debc809997a67172fe4f23a2ca76', isReady: this.isReady }), h("hidden-input", { key: '3e9bd9b7ff0aba356d9f8fd07428cbaedcb223b1' }), h("div", { key: '8fcf6d92703491fe6a0be076a5965c09c800f262', class: "container-fluid p-0", style: {
+        return (h(StyledHost, { key: '64d9bda2ce54aa06788509ae294bcb1eefdb173a' }, h(CardFormSkeleton, { key: 'a1f233464393512652fc37a31b769bb9f48f3797', isReady: this.isReady }), h("hidden-input", { key: '4405ec6e9a510f670a137d33c83a5ad38a19a0aa' }), h("div", { key: 'e704d33d8b3cbcd55798afb537b2b16d37d0077d', class: "container-fluid p-0", style: {
                 opacity: this.isReady ? '1' : '0',
                 height: this.isReady ? 'auto' : '0',
-            } }, h("div", { key: '8dea63dc69d7c7cfbcded0a07bfbcf9c7d7a41fa', class: "mb-3" }, h("iframe-input", { key: 'ffd4de932414b206ea5936c21349c522b762f8a4', inputId: "cardNumber", ref: (el) => (this.cardNumberIframeElement = el), label: "Card Number", iframeOrigin: `${this.iframeOrigin}/v2/cardNumber` })), h("div", { key: '3e56350822761119dbb7ff49e3cc56bec7f361ca', class: "row" }, h("div", { key: 'ab13b6b20573fbec961164a415ccaf21b663eb4b', class: "col-4 align-content-end" }, h("iframe-input", { key: 'e12d56f2c1dd12ae5eff7619204d9f746e1b6a43', inputId: "expirationMonth", ref: (el) => (this.expirationMonthIframeElement = el), label: "Expiration", iframeOrigin: `${this.iframeOrigin}/v2/expirationMonth` })), h("div", { key: '62e4808ee208aec7cf3e1d7a99fd65f3d9a5e615', class: "col-4 align-content-end" }, h("iframe-input", { key: 'c8e3945b466e61e8b21fbb13f71c0631740ca1a3', inputId: "expirationYear", ref: (el) => (this.expirationYearIframeElement = el), label: "", iframeOrigin: `${this.iframeOrigin}/v2/expirationYear` })), h("div", { key: '979929e29abb54f8837f71b1cdb7261df97a58df', class: "col-4 align-content-end" }, h("iframe-input", { key: '2c25868c5fd7e6c2d34722b39f22c2062248cdf6', inputId: "CVV", ref: (el) => (this.cvvIframeElement = el), label: "CVV", iframeOrigin: `${this.iframeOrigin}/v2/CVV` }))))));
+            } }, h("div", { key: 'c519dafa0657af1372836a2a30301849f2e422b3', class: "mb-3" }, h("iframe-input", { key: '6c6a0154ed62e0e684784ff0f327e3bc282da10c', inputId: "cardNumber", ref: (el) => (this.cardNumberIframeElement = el), label: "Card Number", iframeOrigin: `${this.iframeOrigin}/v2/cardNumber` })), h("div", { key: '7efcb6e9fed504ea8f0470f55b8c48b7d82b537b', class: "row" }, h("div", { key: 'e216e57f82d04325cedeca9f3945285ab8675c7d', class: "col-4 align-content-end" }, h("iframe-input", { key: 'c3ffef01705152180c66adaf482e67a1d2f114e9', inputId: "expirationMonth", ref: (el) => (this.expirationMonthIframeElement = el), label: "Expiration", iframeOrigin: `${this.iframeOrigin}/v2/expirationMonth` })), h("div", { key: '97666cb9d9e4b272c033913527c4b6a60b6067c5', class: "col-4 align-content-end" }, h("iframe-input", { key: '4d2f7f56f2a0d5717776c6ef164eef5f7dbc4d8d', inputId: "expirationYear", ref: (el) => (this.expirationYearIframeElement = el), label: "", iframeOrigin: `${this.iframeOrigin}/v2/expirationYear` })), h("div", { key: 'ecc6fff75106b265a7cb00febef40a7b14651a0a', class: "col-4 align-content-end" }, h("iframe-input", { key: '9a756344f1d47f69c0702b57d15d66a658b57e3d', inputId: "CVV", ref: (el) => (this.cvvIframeElement = el), label: "CVV", iframeOrigin: `${this.iframeOrigin}/v2/CVV` }))))));
     }
     static get is() { return "justifi-card-form"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/modular-checkout/sub-components/payment-method-option.js

@@ -3,7 +3,7 @@ import { radioListItem } from "../../../styles/parts";
 import { StyledHost } from "../../../ui-components";
 export class PaymentMethodOption {
     render() {
-        return (h(StyledHost, { key: '276e7685b6f5b7430fdac887fa5f270245011f6d', class: "payment-method" }, h("div", { key: '032431a1a0e3e97077c84f02288e3e0d1334e230', class: "radio-list-item p-3", part: radioListItem, onClick: this.clickHandler, hidden: this.radioButtonHidden }, h("form-control-radio", { key: '33a53344736a2a5d8546cbec24cc6c4aaebf7629', name: "paymentMethodType", value: this.paymentMethodOptionId, checked: this.isSelected, label: this.label }))));
+        return (h(StyledHost, { key: '1b2afde467e7df3ac661951843ad81fd93878585', class: "payment-method" }, h("div", { key: '1671afdd9d7ceb16836af9453a001ecaa2b6bab4', class: "radio-list-item p-3", part: radioListItem, onClick: this.clickHandler, hidden: this.radioButtonHidden }, h("form-control-radio", { key: '3d1a48f478c9504b63c81ff2665ebff2fb19c862', name: "paymentMethodType", value: this.paymentMethodOptionId, checked: this.isSelected, label: this.label }))));
     }
     static get is() { return "payment-method-option"; }
     static get encapsulation() { return "shadow"; }
@@ -11,7 +11,6 @@ export class PaymentMethodOption {
         return {
             "paymentMethodOptionId": {
                 "type": "string",
-                "attribute": "payment-method-option-id",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -26,11 +25,11 @@ export class PaymentMethodOption {
                 },
                 "getter": false,
                 "setter": false,
-                "reflect": false
+                "reflect": false,
+                "attribute": "payment-method-option-id"
             },
             "isSelected": {
                 "type": "boolean",
-                "attribute": "is-selected",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -45,11 +44,11 @@ export class PaymentMethodOption {
                 },
                 "getter": false,
                 "setter": false,
-                "reflect": false
+                "reflect": false,
+                "attribute": "is-selected"
             },
             "clickHandler": {
                 "type": "unknown",
-                "attribute": "click-handler",
                 "mutable": false,
                 "complexType": {
                     "original": "(event: MouseEvent) => void",
@@ -72,7 +71,6 @@ export class PaymentMethodOption {
             },
             "radioButtonHidden": {
                 "type": "boolean",
-                "attribute": "radio-button-hidden",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -87,11 +85,11 @@ export class PaymentMethodOption {
                 },
                 "getter": false,
                 "setter": false,
-                "reflect": false
+                "reflect": false,
+                "attribute": "radio-button-hidden"
             },
             "label": {
                 "type": "string",
-                "attribute": "label",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -106,7 +104,8 @@ export class PaymentMethodOption {
                 },
                 "getter": false,
                 "setter": false,
-                "reflect": false
+                "reflect": false,
+                "attribute": "label"
             }
         };
     }

package/dist/collection/components/modular-checkout/sub-components/sezzle-payment-method.js

@@ -60,7 +60,7 @@ export class SezzlePaymentMethod {
     }
     render() {
         var _a, _b;
-        if (!checkoutStore.bnplEnabled || checkoutStore.disableBnpl) {
+        if (!checkoutStore.bnplEnabled) {
             console.warn('justifi-sezzle-payment-method: BNPL is not enabled for this account.');
             return null;
         }

package/dist/collection/components/modular-checkout/sub-components/summary.js

@@ -5,7 +5,7 @@ import { checkoutStore } from "../../../store/checkout.store";
 import { StyledHost } from "../../../ui-components";
 export class Summary {
     render() {
-        return (h(StyledHost, { key: '3161e6f6a196c79d684574cafbc90bcf741b2150' }, h("section", { key: '594b4485ed4fd9d7c1ee7f4556f071139f92ef0c' }, h("div", { key: '5c2d14677dda6fc7ddcb074d4887b839385dca3a' }, h("div", { key: 'fb850cd7e9c11741349710696dd4e6241c98e805', part: text }, checkoutStore === null || checkoutStore === void 0 ? void 0 : checkoutStore.paymentDescription), h("div", { key: '959014d7fa2a9c97bae0c986313a604930c1e0f3' }, h("span", { key: '14ab0932a083568419b1c36c95f9072c73962b11', part: text }, "Total"), "\u00A0", h("span", { key: '08a9e00332253070ae984b77eb2a9bab88eb3472', part: text }, formatCurrency(+(checkoutStore === null || checkoutStore === void 0 ? void 0 : checkoutStore.totalAmount))))))));
+        return (h(StyledHost, { key: 'abd92b499208321582b08a490c78c9167be2ebd4' }, h("section", { key: '38e15cef5a19a43249d7ecf3d4eb4ea8e032f248' }, h("div", { key: '747f811012ed9707265369e59dbde8cd7ad3bca6' }, h("div", { key: '8575f50759664d5c64d235025699c81f055267ca', part: text }, checkoutStore === null || checkoutStore === void 0 ? void 0 : checkoutStore.paymentDescription), h("div", { key: 'af77776bbe21bce77586447bbf445e4c5d8c1165' }, h("span", { key: '5cdaaec454118197b3e37a942d83907e72444342', part: text }, "Total"), "\u00A0", h("span", { key: 'ccc35217ac9740d5a00b7abbcec4133848afcc28', part: text }, formatCurrency(+(checkoutStore === null || checkoutStore === void 0 ? void 0 : checkoutStore.totalAmount))))))));
     }
     static get is() { return "justifi-checkout-summary"; }
     static get encapsulation() { return "shadow"; }

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

@@ -126,7 +126,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...' : this.submitButtonText))));
     }
     render() {
-        return (h(StyledHost, { key: '3ea6cebd4ab6bc47090056581482dab8502175c1' }, h("div", { key: '383dc710920b5119841d5cf6f1b596ebc349fd5a', part: text }, this.renderLoading(), this.renderBusinessDetails(), this.renderTerminals(), this.renderOrderSection())));
+        return (h(StyledHost, { key: '5e7da5050d127f6470bc12f9cf547fe421ce1897' }, h("div", { key: '6a1f46676ef1f31f6cfeb642001a0dd3f8a60072', part: text }, this.renderLoading(), this.renderBusinessDetails(), this.renderTerminals(), this.renderOrderSection())));
     }
     static get is() { return "justifi-order-terminals"; }
     static get encapsulation() { return "shadow"; }
@@ -134,7 +134,6 @@ export class OrderTerminals {
         return {
             "businessId": {
                 "type": "string",
-                "attribute": "business-id",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -149,11 +148,11 @@ export class OrderTerminals {
                 },
                 "getter": false,
                 "setter": false,
-                "reflect": false
+                "reflect": false,
+                "attribute": "business-id"
             },
             "authToken": {
                 "type": "string",
-                "attribute": "auth-token",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -168,11 +167,11 @@ export class OrderTerminals {
                 },
                 "getter": false,
                 "setter": false,
-                "reflect": false
+                "reflect": false,
+                "attribute": "auth-token"
             },
             "accountId": {
                 "type": "string",
-                "attribute": "account-id",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -187,11 +186,11 @@ export class OrderTerminals {
                 },
                 "getter": false,
                 "setter": false,
-                "reflect": false
+                "reflect": false,
+                "attribute": "account-id"
             },
             "shipping": {
                 "type": "boolean",
-                "attribute": "shipping",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -207,11 +206,11 @@ export class OrderTerminals {
                 "getter": false,
                 "setter": false,
                 "reflect": false,
+                "attribute": "shipping",
                 "defaultValue": "false"
             },
             "submitButtonText": {
                 "type": "string",
-                "attribute": "submit-button-text",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -227,6 +226,7 @@ export class OrderTerminals {
                 "getter": false,
                 "setter": false,
                 "reflect": false,
+                "attribute": "submit-button-text",
                 "defaultValue": "'Submit Order'"
             }
         };

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

@@ -18,14 +18,13 @@ export class TerminalQuantitySelector {
         };
     }
     render() {
-        return (h("div", { key: '852621f3c36375e9c300201e4405c95501488c6d', class: "rounded shadow-sm card p-2", part: card }, h("div", { key: '1695cd25eaf56619ef4cc39d81c11ca9b6a5cd45', class: "d-flex gap-3" }, h("div", { key: '9930b0bd8881bc70bc5bdb2b31428980ec83a49b', class: "d-flex align-items-center" }, h("img", { key: 'ac71b5e64fd9081e8dc9c962cac1e747f2234fc4', src: this.imageUrl, alt: this.modelName, height: 75, width: 75, part: image })), h("div", { key: '0d575087df793cdeaf7bc04744d60647ea7d563f', class: "d-flex flex-column flex-grow-1 gap-3 p-4 justify-content-center" }, h("div", { key: '35f18a705ee606a825c8ad7a6ebe449e6941e4e5', class: "row" }, h("div", { key: 'bf4f916904479fc7abf3167cacd9a655709a5048', class: "col-6 d-flex gap-2" }, this.modelName, h("form-control-tooltip", { key: '1a96f19f6f9732c5f8d9dbb2405de2d3f24b142d', helpText: this.description })), h("div", { key: 'af1ca75c5134c832d8f64b63833b7494c8c11ca5', class: "col-6 d-flex justify-content-end align-items-center" }, h("button", { key: '0d400a00a808c508ba870dc8e37d597581dd86ae', class: "p-0 minus btn", onClick: this.removeUnit, part: buttonLink }, "-"), h("div", { key: '4348aef4cf19c02c574242f82061087e74e82617', class: "w-25 text-center" }, this.selectedQuantity), h("button", { key: '75791dfdb7861bb7c1e4a2dc5376bceb12a19009', class: "p-0 plus btn", onClick: this.addUnit, part: buttonLink }, "+")))))));
+        return (h("div", { key: '5a0ac226861b9349ad26e184d9295052ca987ba5', class: "rounded shadow-sm card p-2", part: card }, h("div", { key: '89d2c494975c1a2d2c71d9047c44119a48c5ba11', class: "d-flex gap-3" }, h("div", { key: 'ca30020f4b3469df0a59f5ca5fa8b81a039f9d5f', class: "d-flex align-items-center" }, h("img", { key: '291fc116fff8b4d33ba3fc1bfb2ec3bd59bef007', src: this.imageUrl, alt: this.modelName, height: 75, width: 75, part: image })), h("div", { key: '56466b3e7a47f7156b40bc0e60d8158d63f5700a', class: "d-flex flex-column flex-grow-1 gap-3 p-4 justify-content-center" }, h("div", { key: '871c7d5d2575a6a26ee11d817b1cce5ce42cbffb', class: "row" }, h("div", { key: '12e3e653243d07dc4a712f9127927924e13c411a', class: "col-6 d-flex gap-2" }, this.modelName, h("form-control-tooltip", { key: 'a69d9738422defbb50ec1abb951b049e53fb5f8c', helpText: this.description })), h("div", { key: '84bc103439e64acc04b20afd0295a792c78595c5', class: "col-6 d-flex justify-content-end align-items-center" }, h("button", { key: 'e245dfcc301ef1efe2aed937af3d21eecff1004e', class: "p-0 minus btn", onClick: this.removeUnit, part: buttonLink }, "-"), h("div", { key: '30827d9946f4d82b57ee3967ab2cfe475e9ab65c', class: "w-25 text-center" }, this.selectedQuantity), h("button", { key: '758b3a72d98a540b8b92dc8b86c8abdd7d19d2a9', class: "p-0 plus btn", onClick: this.addUnit, part: buttonLink }, "+")))))));
     }
     static get is() { return "terminal-quantity-selector"; }
     static get properties() {
         return {
             "modelName": {
                 "type": "string",
-                "attribute": "model-name",
                 "mutable": false,
                 "complexType": {
                     "original": "TerminalModelName",
@@ -46,11 +45,11 @@ export class TerminalQuantitySelector {
                 },
                 "getter": false,
                 "setter": false,
-                "reflect": false
+                "reflect": false,
+                "attribute": "model-name"
             },
             "imageUrl": {
                 "type": "string",
-                "attribute": "image-url",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -65,11 +64,11 @@ export class TerminalQuantitySelector {
                 },
                 "getter": false,
                 "setter": false,
-                "reflect": false
+                "reflect": false,
+                "attribute": "image-url"
             },
             "description": {
                 "type": "string",
-                "attribute": "description",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -84,11 +83,11 @@ export class TerminalQuantitySelector {
                 },
                 "getter": false,
                 "setter": false,
-                "reflect": false
+                "reflect": false,
+                "attribute": "description"
             },
             "helpUrl": {
                 "type": "string",
-                "attribute": "help-url",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -103,11 +102,11 @@ export class TerminalQuantitySelector {
                 },
                 "getter": false,
                 "setter": false,
-                "reflect": false
+                "reflect": false,
+                "attribute": "help-url"
             },
             "limit": {
                 "type": "number",
-                "attribute": "limit",
                 "mutable": false,
                 "complexType": {
                     "original": "number",
@@ -123,6 +122,7 @@ export class TerminalQuantitySelector {
                 "getter": false,
                 "setter": false,
                 "reflect": false,
+                "attribute": "limit",
                 "defaultValue": "Infinity"
             }
         };

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

@@ -1,6 +1,7 @@
 import { h } from "@stencil/core";
+import { DisputeStatus, PaymentStatuses } from "../../api";
 import { formatDate, formatTime, snakeCaseToHumanReadable } from "../../utils/utils";
-import { MapPaymentStatusToBadge } from "../payments-list/payments-status";
+import { MapPaymentStatusToBadge, PaymentStatusBadge } from "../payments-list/payments-status";
 import { CodeBlock, DetailItem, DetailSectionTitle, EntityHeadInfo, EntityHeadInfoItem, ErrorState } from "../../ui-components/details/utils";
 import { StyledHost } from "../../ui-components";
 import PaymentDetailsLoading from "./payment-details-loading";
@@ -37,17 +38,26 @@ export class PaymentDetailsCore {
             },
         });
     }
+    get PaymentStatus() {
+        if (this.payment.status === PaymentStatuses.disputed) {
+            const disputeWasLost = this.payment.disputes.some((dispute) => dispute.status === DisputeStatus.lost);
+            if (disputeWasLost) {
+                return PaymentStatusBadge.DISPUTE_LOST;
+            }
+        }
+        return this.payment.status;
+    }
     render() {
-        return (h(StyledHost, { key: 'a94fc292445a0d8d3d77b0702fe5f19efc432634' }, this.loading && h(PaymentDetailsLoading, { key: 'd07e44b295fd5ce424a0a67d21e3c4ceec4634f4' }), !this.loading && this.errorMessage && ErrorState(this.errorMessage), !this.loading && !this.errorMessage &&
-            this.payment && (h("justifi-details", { key: 'c6cd0c034c948b4b96415b5bde6a3808dc1686e2', "error-message": this.errorMessage }, h(EntityHeadInfo, { key: 'cff0b6a11617d68a42f20d6e3631097bafc34971', slot: "head-info", badge: (h("div", { class: "d-flex gap-1" }, MapPaymentStatusToBadge(this.payment.status), this.payment.expedited ? (h(Badge, { variant: BadgeVariant.WARNING, title: "Expedited", text: "Expedited" })) : null)), title: this.payment.formattedPaymentAmount(this.payment.amount) }, h(EntityHeadInfoItem, { key: 'a143d34fd230aa855286b1252b8e032f94fbd9a9', classes: "border-1 border-end", title: "Updated At", value: `${formatDate(this.payment.updated_at)} ${formatTime(this.payment.updated_at)}` }), h(EntityHeadInfoItem, { key: '96e5af4a6c37667a4be5bf27cdfec6a5ea3978fd', classes: "border-1 border-end", title: "Created At", value: `${formatDate(this.payment.created_at)} ${formatTime(this.payment.created_at)}` }), h(EntityHeadInfoItem, { key: '76f2fd4b5569ad4f6463fb36984e3d4309235473', title: "ID", value: this.payment.id })), h("div", { key: '9d5b04c789c248b358ffecfebac6b62a1d8f0a27', slot: 'detail-sections' }, h(DetailSectionTitle, { key: '78f20430c4935b222c954fdc6eba89e715f668fc', sectionTitle: "Details" }), h("div", { key: '77d314983116b6dd2fc9989c1987d2371b5902b7', class: "d-table gap-2 w-100" }, h(DetailItem, { key: '41c4eb6797577967d4ee6bc6a546faf62bca48c6', title: "Amount", value: this.payment.formattedPaymentAmount(this.payment.amount) }), h(DetailItem, { key: '51308e304e515290f1d4e96fda9ed0b7c9523055', title: "Fees", value: this.payment.formattedPaymentAmount(this.payment.fee_amount) }), h(DetailItem, { key: 'e6d24cb563963c8a540969437dd70674f04c02fc', title: "Refunded", value: this.payment.formattedPaymentAmount(this.payment.amount_refunded) }), h(DetailItem, { key: '1640fe0c210efb6193cc791624fd274299516f4e', title: "Net", value: this.payment.formattedPaymentAmount(this.payment.balance) }), h(DetailItem, { key: '9f2f34ef1aa4e2ec522ceda4bcdf398ede745c65', title: "Status", value: MapPaymentStatusToBadge(this.payment.status) }), h(DetailItem, { key: '9f1cf33ce4a80dc55efc2d88882e9f52933e4aaa', title: "Payment ID", value: this.payment.id }), h(DetailItem, { key: '2ec3eca801e5187912dc8107644270da03679a79', title: "Processing Fees", value: this.payment.formattedPaymentAmount(this.payment.fee_amount) }), h(DetailItem, { key: '14065f819a71be0bee5a7980f66d88852a96a152', title: "Statement Descriptor", value: this.payment.statement_descriptor }), h(DetailItem, { key: '7c5f72aaf86eaf7ef035cd359822988573a42862', title: "Description", value: this.payment.description }), h(DetailItem, { key: 'b1081bad614684d8205ca3377e16bd2377d6da88', title: "Expedited", value: this.payment.expedited ? 'Yes' : 'No' })), this.payment.payment_method.card && [
-            h(DetailSectionTitle, { key: 'a3e655f58e6482800dc53e55c5dd17d9e41ad08d', sectionTitle: "Payment Method" }),
-            h("div", { key: '225667fced83ad89e25cfc19c950b870a2558308', class: "d-table gap-2 w-100" }, h(DetailItem, { key: '58c44b427b356a3576584c6a59301efcab0ed67f', title: "ID", value: this.payment.payment_method.card.id }), h(DetailItem, { key: 'a2b60b522a6fbed58ad06f0df88e551070faf752', title: "Payment Type", value: "Card" }), h(DetailItem, { key: '6e094728a62fcdd01d0fdadab0bce26894dcd4b6', title: "Last 4 Numbers", value: this.payment.payment_method.lastFourDigits }), h(DetailItem, { key: '3d703d83c3c7a115c6e64227a417997b63cf8748', title: "Brand", value: snakeCaseToHumanReadable(this.payment.payment_method.card.brand) }), h(DetailItem, { key: 'cf5dd3615ce5770f071aad7f1144862f00af760d', title: "Cardholder", value: this.payment.payment_method.payersName }))
+        return (h(StyledHost, { key: 'c21bde055f6cb0d1e799150a6aeec78b5448b203' }, this.loading && h(PaymentDetailsLoading, { key: '8b53bcbfff07473d7b12c3fb4b203c941d8a3136' }), !this.loading && this.errorMessage && ErrorState(this.errorMessage), !this.loading && !this.errorMessage &&
+            this.payment && (h("justifi-details", { key: 'c669a7e7e44cf5db639b8177e2d0df0c34f26222', "error-message": this.errorMessage }, h(EntityHeadInfo, { key: 'aae0305936b35e19c39af04d42bbb5cd7f350d7d', slot: "head-info", badge: (h("div", { class: "d-flex gap-1" }, MapPaymentStatusToBadge(this.PaymentStatus), this.payment.expedited ? (h(Badge, { variant: BadgeVariant.WARNING, title: "Expedited", text: "Expedited" })) : null)), title: this.payment.formattedPaymentAmount(this.payment.amount) }, h(EntityHeadInfoItem, { key: '4074322623130af0a21f407a43f5752e6f0b8101', classes: "border-1 border-end", title: "Updated At", value: `${formatDate(this.payment.updated_at)} ${formatTime(this.payment.updated_at)}` }), h(EntityHeadInfoItem, { key: 'c787517c0f383a06b2cc1b3824c61e756c885fb1', classes: "border-1 border-end", title: "Created At", value: `${formatDate(this.payment.created_at)} ${formatTime(this.payment.created_at)}` }), h(EntityHeadInfoItem, { key: '82752b93e9d2540c2afa444b7bd9c76f225c3997', title: "ID", value: this.payment.id })), h("div", { key: '334cd65d0f811491aa947da7462d021beb534b56', slot: 'detail-sections' }, h(DetailSectionTitle, { key: '7ee3ab127b13c4d862308501f3acc2891a23a88f', sectionTitle: "Details" }), h("div", { key: '238557ff12daf46bb9c99cc134d8e5e8f67c24ed', class: "d-flex flex-column gap-2 w-100" }, h(DetailItem, { key: '819e68fe8d51e59c0ce120225091799d1b1d9d53', title: "Amount", value: this.payment.formattedPaymentAmount(this.payment.amount) }), h(DetailItem, { key: 'd63890fffdbc61e83366a7692fd00aebfe61ffd5', title: "Fees", value: this.payment.formattedPaymentAmount(this.payment.fee_amount) }), h(DetailItem, { key: 'c0f584a18c91c5b0b841847f226952eef89690ca', title: "Refunded", value: this.payment.formattedPaymentAmount(this.payment.amount_refunded) }), h(DetailItem, { key: '7f20a671d48f48f78fd6fcec95152d274bdb0a3e', title: "Net", value: this.payment.formattedPaymentAmount(this.payment.balance) }), h(DetailItem, { key: '981e31e166e7780df1dbbdacf1c3ce61a761d7b3', title: "Status", value: MapPaymentStatusToBadge(this.PaymentStatus) }), h(DetailItem, { key: 'e7fdc5fccdb259fb8dc0fb224b9384fe3a172b5a', title: "Payment ID", value: this.payment.id }), h(DetailItem, { key: '112221995807f5e5468807e0a4e9395146ec771d', title: "Processing Fees", value: this.payment.formattedPaymentAmount(this.payment.fee_amount) }), h(DetailItem, { key: 'fa330af63e96fe2888c783332908c43e7f66a29f', title: "Statement Descriptor", value: this.payment.statement_descriptor }), h(DetailItem, { key: 'd154d77d74c5b56e8139a28a9220cc60799000d9', title: "Description", value: this.payment.description }), h(DetailItem, { key: '68788fd77e8805d2d58e3cf1aaff3776795a7431', title: "Expedited", value: this.payment.expedited ? 'Yes' : 'No' })), this.payment.payment_method.card && [
+            h(DetailSectionTitle, { key: '28ccc458f7ec0c60c3d750e3d8db3317f130e1c6', sectionTitle: "Payment Method" }),
+            h("div", { key: 'd163947b967270345b7be3dd8815d8a40bc18c22', class: "d-flex flex-column gap-2 w-100" }, h(DetailItem, { key: '7fdeabbc64c747218da6cab078995866bebc67fb', title: "ID", value: this.payment.payment_method.card.id }), h(DetailItem, { key: 'ec2ed7eb523de4c0f64d877bb48f6e02bb2a0e14', title: "Payment Type", value: "Card" }), h(DetailItem, { key: '3c7e7903935e04d8368716887c90a19bb4c3612a', title: "Last 4 Numbers", value: this.payment.payment_method.lastFourDigits }), h(DetailItem, { key: '77042c02c0ed83d6dc443a8995a1a22c97663c83', title: "Brand", value: snakeCaseToHumanReadable(this.payment.payment_method.card.brand) }), h(DetailItem, { key: '689a092cfeea4642b9ccaf9846a1ba4ce1de38ca', title: "Cardholder", value: this.payment.payment_method.payersName }))
         ], this.payment.payment_method.bank_account && [
-            h(DetailSectionTitle, { key: '8b167fe0967859af1555245634e4f6cdaae77ccf', sectionTitle: "Payment Method" }),
-            h("div", { key: '3b84740a7e8f792b4f3987a88bff3e85003ea549', class: "d-table gap-2 w-100" }, h(DetailItem, { key: '1ef1e3781ea046145c58c721f1abfb2183e81db1', title: "ID", value: this.payment.payment_method.bank_account.id }), h(DetailItem, { key: '383f4756aac8901eef21786d9c9c6ff5ce097d7d', title: "Last 4 Numbers", value: this.payment.last_four_digits }), h(DetailItem, { key: '3cbb0f11eaf47b3b3923d3371f33df95ca022bd8', title: "Bank Name", value: this.payment.payment_method.bank_account.brand }), h(DetailItem, { key: 'b122e28ddb446b03b0a70b6cf3ac23fe84fd945d', title: "Account Owner", value: this.payment.payment_method.payersName }))
+            h(DetailSectionTitle, { key: 'd6369d2d90896916dbffb50f0ebd52014340b8de', sectionTitle: "Payment Method" }),
+            h("div", { key: 'dc7a48fbca9ad84b70aaee854d161a0c9f2751f1', class: "d-flex flex-column gap-2 w-100" }, h(DetailItem, { key: '2b3786ff126a4a53a2ccc9669890ad1df71f111f', title: "ID", value: this.payment.payment_method.bank_account.id }), h(DetailItem, { key: '0114e2d9b6311c8786a8710358d1e6d15785f7f2', title: "Last 4 Numbers", value: this.payment.last_four_digits }), h(DetailItem, { key: '5926ccc059ce8351c3342b129c42c51ae761ef68', title: "Bank Name", value: this.payment.payment_method.bank_account.brand }), h(DetailItem, { key: 'cf9c5fe4c93e50bd4bceb7d972d9a0b80a976baa', title: "Account Owner", value: this.payment.payment_method.payersName }))
         ], this.payment.metadata && [
-            h(DetailSectionTitle, { key: '5b6d6c2ade6badd80f8b6c4a4c6427710ba9ac66', sectionTitle: 'Metadata' }),
-            h("div", { key: 'a3d59ae07f2601b0895624c0a640693ef076b71e', class: "d-table gap-2 w-100" }, h(CodeBlock, { key: 'b61349ed2f6536b2131b05ed0e8e337733309117', metadata: this.payment.metadata }))
+            h(DetailSectionTitle, { key: '55a4e72b93c9b8bd780026649e69f8f8813012f3', sectionTitle: 'Metadata' }),
+            h("div", { key: 'a555d84696123a99f484b27c185f8affe0de34ae', class: "d-table gap-2 w-100" }, h(CodeBlock, { key: 'f15b235765c9728a048118195465c2f8dc1760f8', metadata: this.payment.metadata }))
         ])))));
     }
     static get is() { return "payment-details-core"; }
@@ -55,7 +65,6 @@ export class PaymentDetailsCore {
         return {
             "getPaymentDetails": {
                 "type": "unknown",
-                "attribute": "get-payment-details",
                 "mutable": false,
                 "complexType": {
                     "original": "Function",

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

@@ -13,6 +13,12 @@ export class PaymentDetails {
             this.errorMessage = event.detail.message;
             this.errorEvent.emit(event.detail);
         };
+        this.handleRecordClickEvent = (event) => {
+            this.recordClickEvent.emit({
+                id: event.detail.id,
+                type: event.detail.type,
+            });
+        };
     }
     componentWillLoad() {
         checkPkgVersion();
@@ -48,7 +54,7 @@ export class PaymentDetails {
         if (this.errorMessage) {
             return ErrorState(this.errorMessage);
         }
-        return (h("payment-details-core", { getPaymentDetails: this.getPaymentDetails, "onError-event": this.handleErrorEvent }));
+        return (h("payment-details-core", { getPaymentDetails: this.getPaymentDetails, "onError-event": this.handleErrorEvent, "onRecord-click-event": this.handleRecordClickEvent, "enable-record-click": "true" }));
     }
     static get is() { return "justifi-payment-details"; }
     static get encapsulation() { return "shadow"; }
@@ -56,7 +62,6 @@ export class PaymentDetails {
         return {
             "paymentId": {
                 "type": "string",
-                "attribute": "payment-id",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -71,11 +76,11 @@ export class PaymentDetails {
                 },
                 "getter": false,
                 "setter": false,
-                "reflect": false
+                "reflect": false,
+                "attribute": "payment-id"
             },
             "authToken": {
                 "type": "string",
-                "attribute": "auth-token",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -90,7 +95,8 @@ export class PaymentDetails {
                 },
                 "getter": false,
                 "setter": false,
-                "reflect": false
+                "reflect": false,
+                "attribute": "auth-token"
             }
         };
     }
@@ -122,6 +128,27 @@ export class PaymentDetails {
                         }
                     }
                 }
+            }, {
+                "method": "recordClickEvent",
+                "name": "record-click-event",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "RecordClickEvent",
+                    "resolved": "RecordClickEvent",
+                    "references": {
+                        "RecordClickEvent": {
+                            "location": "import",
+                            "path": "../../api/ComponentEvents",
+                            "id": "src/api/ComponentEvents.ts::RecordClickEvent"
+                        }
+                    }
+                }
             }];
     }
     static get watchers() {

package/dist/collection/components/payment-transactions-list/payment-transactions-list.js

@@ -91,7 +91,7 @@ export class PaymentTransactionsList {
         return !this.showEmptyState && !this.showErrorState && !this.isLoading;
     }
     render() {
-        return (h(StyledHost, { key: 'c73dfcd1d3038dbca6800b9bd0f4e6c5fba2b8bf' }, h(TableWrapper, { key: '66d8f92a96f2ace82c05d10a9f538d6ad22b588f' }, h(TableComponent, { key: 'cff0e6344efd035f264326ecc79615bddfe8d0ac' }, h(TableHead, { key: '702e53ae1d59ab674425f4753c1cf0b6415feacd' }, h(TableHeadRow, { key: '7773de2d113af30b3a0d64405dce5d5e09a0bb8c' }, this.transactionsTable.columnData.map((column) => column))), h(TableBody, { key: '7b86d982f52037349b5cc2f7ec5fa800e38ed519' }, h(TableLoadingState, { key: '040c3dfb101c1ea127cfcf982e4415ae94661b2a', columnSpan: this.transactionsTable.columnKeys.length, isLoading: this.isLoading }), h(TableEmptyState, { key: '6d25f8a886cf9b15ea9c17c44dfe0bce6125c557', isEmpty: this.showEmptyState, columnSpan: this.transactionsTable.columnKeys.length }), h(TableErrorState, { key: '60bb435ecf7a595cdb028df4cd95c1361ce06c8d', columnSpan: this.transactionsTable.columnKeys.length, errorMessage: this.errorMessage }), this.showRowData && this.transactionsTable.rowData.map((data, index) => (h(TableRow, { "data-test-id": "table-row", "data-row-entity-id": this.entityId[index], onClick: this.rowClickHandler }, data)))), this.paging && (h(TableFoot, { key: 'accb2e3cb9dc8521c50db6a8ed306f91e5aa44c7' }, h(TableFootRow, { key: 'a4408276ce552fe4c43c60f79e7a2a3602566b2c' }, h(TableFootCell, { key: '20b13cc71f8b62166e8b6e9fce5dea2d1b4c5ac0', colSpan: this.transactionsTable.columnData.length }, h("pagination-menu", { key: '90657ed6a805af46446bc8fb316a52252a9a2bf4', paging: Object.assign(Object.assign({}, this.paging), { handleClickPrevious: this.handleClickPrevious, handleClickNext: this.handleClickNext }) })))))))));
+        return (h(StyledHost, { key: 'a00f8b0ba0e96bba423c6933fc9eebd19f5f61cd' }, h(TableWrapper, { key: 'b1ad1863482835106c6ec1b5fe7c3f9bb294a316' }, h(TableComponent, { key: 'f20d05de3f0a4d60734bfb366ebaf11a5b9fa4d0' }, h(TableHead, { key: 'd4aa85002f25923d79670687d80090422e4f09a3' }, h(TableHeadRow, { key: '99dba50d00c0ab2ba4f140424ff534936fd15c9e' }, this.transactionsTable.columnData.map((column) => column))), h(TableBody, { key: '5526e3cffc2d43f6f6cbd755afbcffd3d036ebe9' }, h(TableLoadingState, { key: 'a5cf0dcf867feba1a1a8c4419e5f6c868510eb82', columnSpan: this.transactionsTable.columnKeys.length, isLoading: this.isLoading }), h(TableEmptyState, { key: '62f38aa3ea3758f6a113b2370c17670fa38fd322', isEmpty: this.showEmptyState, columnSpan: this.transactionsTable.columnKeys.length }), h(TableErrorState, { key: 'a86ba5ae455119f12fa01a56c6826cc3a08d7c3b', columnSpan: this.transactionsTable.columnKeys.length, errorMessage: this.errorMessage }), this.showRowData && this.transactionsTable.rowData.map((data, index) => (h(TableRow, { "data-test-id": "table-row", "data-row-entity-id": this.entityId[index], onClick: this.rowClickHandler }, data)))), this.paging && (h(TableFoot, { key: '302041a89f00caa4e440bad8bd5148f9b51b405e' }, h(TableFootRow, { key: 'c1071b23b4dc07c94674d0addabc8cdc7bc7ca3c' }, h(TableFootCell, { key: '2144fdc702e20c8c839b5d8c231bf1d3b16df234', colSpan: this.transactionsTable.columnData.length }, h("pagination-menu", { key: '71589bd15b0af2d1eb6bad533e294e480ba36ca3', paging: Object.assign(Object.assign({}, this.paging), { handleClickPrevious: this.handleClickPrevious, handleClickNext: this.handleClickNext }) })))))))));
     }
     static get is() { return "justifi-payment-transactions-list"; }
     static get encapsulation() { return "shadow"; }
@@ -99,7 +99,6 @@ export class PaymentTransactionsList {
         return {
             "paymentId": {
                 "type": "string",
-                "attribute": "payment-id",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -114,11 +113,11 @@ export class PaymentTransactionsList {
                 },
                 "getter": false,
                 "setter": false,
-                "reflect": false
+                "reflect": false,
+                "attribute": "payment-id"
             },
             "authToken": {
                 "type": "string",
-                "attribute": "auth-token",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -133,11 +132,11 @@ export class PaymentTransactionsList {
                 },
                 "getter": false,
                 "setter": false,
-                "reflect": false
+                "reflect": false,
+                "attribute": "auth-token"
             },
             "columns": {
                 "type": "string",
-                "attribute": "columns",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -153,6 +152,7 @@ export class PaymentTransactionsList {
                 "getter": false,
                 "setter": false,
                 "reflect": false,
+                "attribute": "columns",
                 "defaultValue": "defaultColumnsKeys"
             }
         };

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

@@ -83,14 +83,13 @@ export class PaymentsListCore {
         return !this.showEmptyState && !this.showErrorState && !this.loading;
     }
     render() {
-        return (h(TableWrapper, { key: '0f667b8996650351ee636d548437217696ba8845' }, h(TableComponent, { key: 'ea49b5f4a53b03525a960954df711f39ee1ec41d' }, h(TableHead, { key: '7e06f612e6aa80267abba505c5b44506a907ae1a' }, h(TableHeadRow, { key: '561827555ab274f70fe4e2e08442689b82f8b2c9' }, this.paymentsTable.columnData.map((column) => column))), h(TableBody, { key: 'a1f724d553ca43fbe20aeeb1bcbedf87e7d5b917' }, h(TableLoadingState, { key: '27c9f9e459857cf208f9bcb1a5a81f02fcac0850', columnSpan: this.paymentsTable.columnData.length, isLoading: this.loading }), h(TableEmptyState, { key: '546e87c7198e6b7efaf1dde4dba0e2bc9dd9e4a7', isEmpty: this.showEmptyState, columnSpan: this.paymentsTable.columnData.length }), h(TableErrorState, { key: 'cbb35d379ac52943549b58128af24f682b53254f', columnSpan: this.paymentsTable.columnData.length, errorMessage: this.errorMessage }), this.showRowData && this.paymentsTable.rowData.map((data, index) => (h(TableRow, { "data-test-id": "table-row", "data-row-entity-id": this.entityId[index], onClick: this.rowClickHandler }, data)))), this.paging && (h(TableFoot, { key: '4b8de6a6841bd6f087f8819febd3136742e535eb' }, h(TableFootRow, { key: 'cb2f446cd73c72e551378d73d5fb7089bcf9b8a0' }, h(TableFootCell, { key: '01098f6891794529ddfc1d7b1303706313694316', colSpan: this.paymentsTable.columnData.length }, h("pagination-menu", { key: 'a907422b1d6246570d14862478154465c4ad59c9', paging: Object.assign(Object.assign({}, this.paging), { handleClickPrevious: this.handleClickPrevious, handleClickNext: this.handleClickNext }) }))))))));
+        return (h(TableWrapper, { key: '2cceca3ea193752152afb7514513422ad40165a8' }, h(TableComponent, { key: '61f651673b6cfa85380ca2806907facada8152e9' }, h(TableHead, { key: '5d65f625ba51588d5c1d288d31d2f52680645f2c' }, h(TableHeadRow, { key: '0a2c0158996f39964ae0f050632e47c40e7d10f5' }, this.paymentsTable.columnData.map((column) => column))), h(TableBody, { key: '4c5e3252951cad51e705a6fb377a6d4b8f28869e' }, h(TableLoadingState, { key: '9159d22917307f9886d57c488218be65782dbeb2', columnSpan: this.paymentsTable.columnData.length, isLoading: this.loading }), h(TableEmptyState, { key: 'dcb34a17de509c1856ff3507f7e10863b3b5fe09', isEmpty: this.showEmptyState, columnSpan: this.paymentsTable.columnData.length }), h(TableErrorState, { key: '5a4d81745f6764ed8860c1be74895c6f7cc7e7aa', columnSpan: this.paymentsTable.columnData.length, errorMessage: this.errorMessage }), this.showRowData && this.paymentsTable.rowData.map((data, index) => (h(TableRow, { "data-test-id": "table-row", "data-row-entity-id": this.entityId[index], onClick: this.rowClickHandler }, data)))), this.paging && (h(TableFoot, { key: '095986da34b545b85c62c881c06e215410d26793' }, h(TableFootRow, { key: '5d592db903775c67b6f587477a0fa3713a7abd88' }, h(TableFootCell, { key: 'c23d9b7111b6f3dde3101f5fd49b297630948de5', colSpan: this.paymentsTable.columnData.length }, h("pagination-menu", { key: '37deefd8ffd902f9bd458b4fa0fe5c4ef4bdb87e', paging: Object.assign(Object.assign({}, this.paging), { handleClickPrevious: this.handleClickPrevious, handleClickNext: this.handleClickNext }) }))))))));
     }
     static get is() { return "payments-list-core"; }
     static get properties() {
         return {
             "getPayments": {
                 "type": "unknown",
-                "attribute": "get-payments",
                 "mutable": false,
                 "complexType": {
                     "original": "Function",
@@ -113,7 +112,6 @@ export class PaymentsListCore {
             },
             "columns": {
                 "type": "string",
-                "attribute": "columns",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -128,7 +126,8 @@ export class PaymentsListCore {
                 },
                 "getter": false,
                 "setter": false,
-                "reflect": false
+                "reflect": false,
+                "attribute": "columns"
             }
         };
     }