@justifi/webcomponents 4.16.0 → 4.18.0

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

@@ -1,6 +1,7 @@
-import { h, Host } from "@stencil/core";
+import { h } from "@stencil/core";
 import { formatCurrency } from "../../../utils/utils";
 import { insuranceValues, insuranceErrors, validateInsuranceValues } from "../insurance-state";
+import StyledHost from "../../../utils/styled-host/styled-host";
 export class SeasonInterruptionInsuranceCore {
     constructor() {
         this.checkoutId = undefined;
@@ -25,9 +26,7 @@ export class SeasonInterruptionInsuranceCore {
         return validateInsuranceValues();
     }
     componentWillLoad() {
-        console.log('### componentWillLoad');
         if (this.getQuote) {
-            console.log('### fetching data');
             this.fetchData();
         }
     }
@@ -97,19 +96,19 @@ export class SeasonInterruptionInsuranceCore {
     }
     render() {
         var _a, _b, _c, _d;
-        return (h(Host, { key: 'b057aee4c4719be8dd961b98d789b7be2f323763' }, !this.isLoading &&
-            h("div", { key: '088c4989823f952436544217b99f9e697d7a0f4a' }, h("h2", { key: '565ea0e4aa45e53a8350c646b2ab75df3de8f986', class: "fs-5 fw-bold pb-3 jfi-header" }, (_a = this.quote) === null || _a === void 0 ? void 0 : _a.product.title), h("small", { key: '760454415e09434f7f34ea1f1d87bed96d2edb7d', innerHTML: (_b = this.quote) === null || _b === void 0 ? void 0 : _b.product.description }), h("div", { key: 'da8ff965474b62fe272e665a862329bd10b5ffe7' }, h("input", { key: '2d1aaf9d4c1765b37a4b2eaf25770cbba7064421', id: "accept", type: "radio", name: "opt-in", value: "true", onChange: (event) => this.onChangeHandler(event), class: this.error ? 'form-check-input me-2 is-invalid' : 'form-check-input me-2' }), h("label", { key: '72d9dd136a4e6f97314e56cd3b50bb873da943a4', htmlFor: "accept", class: "btn btn-outline-primary jfi-btn-radio-label" }, "Accept coverage for ", formatCurrency((_c = this.quote) === null || _c === void 0 ? void 0 : _c.total_cents))), h("div", { key: '9e7654bec086ff339b87d960381e56ab6b566a05' }, h("input", { key: 'f715815492bdf768b053e4192b55f677c3483a1e', id: "decline", type: "radio", name: "opt-in", value: "false", onChange: (event) => this.onChangeHandler(event), class: this.error ? 'form-check-input me-2 is-invalid' : 'form-check-input me-2' }), h("label", { key: '88b60c2154b0926916492b6a91a081297c91f264', htmlFor: "decline", class: "btn btn-outline-primary jfi-btn-radio-label" }, "Decline coverage")), h("div", { key: '7d88ed8a60f32600a8dec08461b6f52a1c73f587', class: "invalid-feedback", style: { display: this.error ? 'block' : 'none' } }, "Please select an option"), h("small", { key: '749a0f33ef02097b523209f54f35c8f6bfdaa6c8', innerHTML: (_d = this.quote) === null || _d === void 0 ? void 0 : _d.product.legal_disclaimer }))));
+        return (h(StyledHost, { key: '0be38bd7c1f08be48d5347a3a0362ea3871d41bc' }, !this.isLoading &&
+            h("div", { key: '277a315ceba771959b1133b7cfc734e1d000325a' }, h("h2", { key: '34e5984345ec9300ca13327340b474f596c8b378', class: "fs-5 fw-bold pb-3 jfi-header" }, (_a = this.quote) === null || _a === void 0 ? void 0 : _a.product.title), h("small", { key: 'c428d4a485e449d1b7dc0eb7fe586d3927d4ea3f', innerHTML: (_b = this.quote) === null || _b === void 0 ? void 0 : _b.product.description }), h("div", { key: '8c55f87d401c2f438de4725cf6023ebd6d2e0276' }, h("input", { key: '6c0a57e4de37607948de68d41afbe24639ca59dd', id: "accept", type: "radio", name: "opt-in", value: "true", onChange: (event) => this.onChangeHandler(event), class: this.error ? 'form-check-input me-2 is-invalid' : 'form-check-input me-2' }), h("label", { key: 'aaede6dee33658ba36a14b2bcaf2c6a2320e4c2f', htmlFor: "accept" }, "Accept coverage for ", formatCurrency((_c = this.quote) === null || _c === void 0 ? void 0 : _c.total_cents))), h("div", { key: '839e12e3f207b0ce32788f5da81b097ae80d55bf', class: "mb-2" }, h("input", { key: '15bafd8a8ad1601d2c69eed86ff6a2256fb79959', id: "decline", type: "radio", name: "opt-in", value: "false", onChange: (event) => this.onChangeHandler(event), class: this.error ? 'form-check-input me-2 is-invalid' : 'form-check-input me-2' }), h("label", { key: '00b328473f2a44bed3e22f7746dc83596e449008', htmlFor: "decline" }, "Decline coverage")), h("div", { key: '48e00af5825cd476329b591a906afa818bedc6d4', class: "invalid-feedback", style: { display: this.error ? 'block' : 'none' } }, "Please select an option"), h("small", { key: '4196d6073a8d0e96ed3de4bcb8a77acd4241a5ab', innerHTML: (_d = this.quote) === null || _d === void 0 ? void 0 : _d.product.legal_disclaimer }))));
     }
     static get is() { return "justifi-season-interruption-insurance-core"; }
     static get encapsulation() { return "shadow"; }
     static get originalStyleUrls() {
         return {
-            "$": ["season-interruption-insurance-core.scss"]
+            "$": ["season-interruption-insurance-core.css", "../../checkout/form-check-input.css", "../../checkout/header.css"]
         };
     }
     static get styleUrls() {
         return {
-            "$": ["season-interruption-insurance-core.css"]
+            "$": ["season-interruption-insurance-core.css", "../../checkout/form-check-input.css", "../../checkout/header.css"]
         };
     }
     static get properties() {

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

@@ -25,7 +25,6 @@ export class SeasonInterruptionInsurance {
         return this.seasonInterruptionCoreRef.validate();
     }
     componentWillLoad() {
-        console.log('### componentWillLoad ins season interruption');
         this.initializeServiceMethods();
     }
     initializeServiceMethods() {
@@ -47,7 +46,7 @@ export class SeasonInterruptionInsurance {
         });
     }
     render() {
-        return (h("justifi-season-interruption-insurance-core", { key: '0eb05bed71db4d90870063a4bfbdadd980fd2905', ref: (el) => (this.seasonInterruptionCoreRef = el), "checkout-id": this.checkoutId, getQuote: this.getQuote, toggleCoverage: this.toggleCoverage, "primary-identity-first-name": this.primaryIdentityFirstName, "primary-identity-last-name": this.primaryIdentityLastName, "primary-identity-state": this.primaryIdentityState, "primary-identity-postal-code": this.primaryIdentityPostalCode, "primary-identity-country": this.primaryIdentityCountry, "primary-identity-email-address": this.primaryIdentityEmailAddress, "policy-attributes-insurable-amount": this.policyAttributesInsurableAmount, "policy-attributes-start-date": this.policyAttributesStartDate, "policy-attributes-end-date": this.policyAttributesEndDate, "covered-identity-first-name": this.coveredIdentityFirstName, "covered-identity-last-name": this.coveredIdentityLastName }));
+        return (h("justifi-season-interruption-insurance-core", { key: '8401ef19ea5bf566b9ef3f678382271173332421', ref: (el) => (this.seasonInterruptionCoreRef = el), "checkout-id": this.checkoutId, getQuote: this.getQuote, toggleCoverage: this.toggleCoverage, "primary-identity-first-name": this.primaryIdentityFirstName, "primary-identity-last-name": this.primaryIdentityLastName, "primary-identity-state": this.primaryIdentityState, "primary-identity-postal-code": this.primaryIdentityPostalCode, "primary-identity-country": this.primaryIdentityCountry, "primary-identity-email-address": this.primaryIdentityEmailAddress, "policy-attributes-insurable-amount": this.policyAttributesInsurableAmount, "policy-attributes-start-date": this.policyAttributesStartDate, "policy-attributes-end-date": this.policyAttributesEndDate, "covered-identity-first-name": this.coveredIdentityFirstName, "covered-identity-last-name": this.coveredIdentityLastName }));
     }
     static get is() { return "justifi-season-interruption-insurance"; }
     static get encapsulation() { return "shadow"; }

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

@@ -6,26 +6,15 @@ export class PaginationMenu {
         this.params = {};
     }
     render() {
-        return (h(Host, { key: '62a40b19e7bbff01d8fea8ae5fbe5f1012738bd8', exportparts: `page-arrow,page-button,page-button-disabled,page-button-text` }, h("nav", { key: 'c438f649a6653cc2828b1e537ef30b29e16282e2', "aria-label": "Table pagination", class: "d-flex justify-content-end gap-3" }, h("ul", { key: '66861f47d96322616cc62ae928779e4330406218', class: "pagination m-0" }, h("li", { key: '78806f5a6e3413a22d47689fa80a02bf35f48d15', class: `page-item ${this.paging.has_previous ? '' : ' disabled'}` }, h("a", { key: '1474a484905df0849aed63c4e83945901fe4d962', href: "#", class: "page-link", onClick: (e) => {
+        return (h(Host, { key: 'e0211a01fc44ec29eec8085f31055c060f77f56f', exportparts: `page-arrow,page-button,page-button-disabled,page-button-text` }, h("nav", { key: '191b1603b6cc559d3ef0cf45a37074e41513ea5a', "aria-label": "Table pagination", class: "d-flex justify-content-end gap-3" }, h("ul", { key: '775613b2ce03a1bc6a8abf5c918d099e13ac06d2', class: "pagination m-0" }, h("li", { key: 'cf7fef25e80e446688f31f13236c3e71a1378aef', class: `page-item ${this.paging.has_previous ? '' : ' disabled'}` }, h("a", { key: 'bb671bda6ab5f6921d34c7fdf5b33a62bc076154', href: "#", class: "page-link", onClick: (e) => {
                 e.preventDefault();
                 this.paging.handleClickPrevious(this.paging.start_cursor);
-            }, part: `page-button${this.paging.has_previous ? '' : ' page-button-disabled'}` }, h("span", { key: 'c5dad043936ad6815bcfc1d7855a5edbcc1a9753', class: "me-1", part: "page-arrow" }, "\u00AB"), h("span", { key: '1cb11a6470b14f355e45b115f72be1bec8ba9f5e', part: "page-button-text" }, "Previous"))), h("li", { key: 'b44e95865be4005de0a84f4685bba5da4be5e071', class: `page-item ${this.paging.has_next ? '' : ' disabled'}` }, h("a", { key: '9e3757a4fb8b282bbf1167e28d4a5940a60feeb7', href: "#", class: "page-link", onClick: (e) => {
+            }, part: `page-button${this.paging.has_previous ? '' : ' page-button-disabled'}` }, h("span", { key: 'da88de236d134f950a48d9a1d2ebf70742e80788', class: "me-1", part: "page-arrow" }, "\u00AB"), h("span", { key: '9ae148f746d5d04fcaf4981b0f1aa3d7fc1b509d', part: "page-button-text" }, "Previous"))), h("li", { key: '7340b9d89574c9c95b15fd50f3444aacdbb4c496', class: `page-item ${this.paging.has_next ? '' : ' disabled'}` }, h("a", { key: '827e68669eeb7b83a28185312108adde796a331e', href: "#", class: "page-link", onClick: (e) => {
                 e.preventDefault();
                 this.paging.handleClickNext(this.paging.end_cursor);
-            }, part: `page-button${this.paging.has_next ? '' : ' page-button-disabled'}` }, h("span", { key: '448bd361bb8af168152fa59e7cb633b8ffa25087', part: "page-button-text" }, "Next"), h("span", { key: '2aa556fac6d716c40abf0a049d752e7bccafbf58', class: "ms-1", part: "page-arrow" }, "\u00BB")))))));
+            }, part: `page-button${this.paging.has_next ? '' : ' page-button-disabled'}` }, h("span", { key: '29ce5f0e9ae4b19d3116ac6bd883c52168c5fbb8', part: "page-button-text" }, "Next"), h("span", { key: '2d58cffc46031c9db1ad7c4b061730bc083dded8', class: "ms-1", part: "page-arrow" }, "\u00BB")))))));
     }
     static get is() { return "pagination-menu"; }
-    static get encapsulation() { return "shadow"; }
-    static get originalStyleUrls() {
-        return {
-            "$": ["../table/table.scss"]
-        };
-    }
-    static get styleUrls() {
-        return {
-            "$": ["../table/table.css"]
-        };
-    }
     static get properties() {
         return {
             "paging": {

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

@@ -1,7 +1,8 @@
-import { Host, h } from "@stencil/core";
+import { h } from "@stencil/core";
 import { Api, PaymentBalanceTransaction, pagingDefaults, } from "../../api";
 import { formatCurrency, formatDate, formatTime, snakeCaseToHumanReadable, } from "../../utils/utils";
 import { config } from "../../../config";
+import StyledHost from "../../utils/styled-host/styled-host";
 export class PaymentBalanceTransactions {
     constructor() {
         this.handleClickPrevious = (beforeCursor) => {
@@ -51,7 +52,7 @@ export class PaymentBalanceTransactions {
         this.loading = false;
     }
     render() {
-        return (h(Host, { key: '6366d27ac3f4477ce6621de2139dba859fa02c0d' }, h("justifi-table", { key: '58c0c030b08bdbd71780927ba0d660cb145f44e0', columnData: [
+        return (h(StyledHost, { key: 'ec76a5bb9d5222491facd9bea6bf5f3c404bb5c4' }, h("justifi-table", { key: 'bfecb9c52a10750e01b2cc82dd5d558cf4e83081', columnData: [
                 ['Processed On', 'The date each transaction occurred'],
                 ['Type', 'The type of each transaction'],
                 ['ID', 'The unique identifier of each transaction'],
@@ -69,17 +70,6 @@ export class PaymentBalanceTransactions {
             ]), loading: this.loading, "error-message": this.errorMessage, params: this.params, paging: Object.assign(Object.assign({}, this.paging), { handleClickNext: this.handleClickNext, handleClickPrevious: this.handleClickPrevious }) })));
     }
     static get is() { return "justifi-payment-balance-transactions"; }
-    static get encapsulation() { return "shadow"; }
-    static get originalStyleUrls() {
-        return {
-            "$": ["payment-balance-transactions.scss"]
-        };
-    }
-    static get styleUrls() {
-        return {
-            "$": ["payment-balance-transactions.css"]
-        };
-    }
     static get properties() {
         return {
             "accountId": {

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

@@ -1,6 +1,7 @@
-import { Host, h } from "@stencil/core";
+import { h } from "@stencil/core";
 import { MapPaymentStatusToBadge, formatCurrency, formatDate, formatTime, snakeCaseToHumanReadable } from "../../utils/utils";
 import { CodeBlock, DetailItem, DetailSectionTitle, EntityHeadInfo, EntityHeadInfoItem, ErrorState, LoadingState } from "../details/utils";
+import StyledHost from "../../utils/styled-host/styled-host";
 export class PaymentDetailsCore {
     constructor() {
         this.getPaymentDetails = undefined;
@@ -37,26 +38,16 @@ export class PaymentDetailsCore {
     }
     render() {
         var _a;
-        return (h(Host, { key: 'ec842a977f2a555593343525b8cdd3500d0f148e' }, this.loading && LoadingState(), !this.loading && this.errorMessage && ErrorState(this.errorMessage), !this.loading && !this.errorMessage &&
-            this.payment && (h("justifi-details", { key: '3912cae9ac811efdcaa7b7f59ec692c5842beb2f', "error-message": this.errorMessage }, h(EntityHeadInfo, { key: '174e871b7707a3104f9c17cfa3bab3059ae47cb7', slot: "head-info", badge: h("span", { slot: 'badge', innerHTML: MapPaymentStatusToBadge(this.payment.status) }), title: `${formatCurrency(this.payment.amount)} ${(_a = this.payment) === null || _a === void 0 ? void 0 : _a.currency.toUpperCase()}` }, h(EntityHeadInfoItem, { key: '229e7bf9c63d927127a45e74d73fb3827ab0cf96', classes: "border-1 border-end", title: "Updated At", value: `${formatDate(this.payment.updated_at)} ${formatTime(this.payment.updated_at)}` }), h(EntityHeadInfoItem, { key: 'c00c1f43c07b23aca4750de8b7de1ff2c48b0d1b', classes: "border-1 border-end", title: "Created At", value: `${formatDate(this.payment.created_at)} ${formatTime(this.payment.created_at)}` }), h(EntityHeadInfoItem, { key: '020d54a6f00e32b873c50e9abc917392e5059db9', title: "ID", value: this.payment.id })), h("div", { key: '33b06853774b9f7cb6b65a6ea1290f857b0841ba', slot: 'detail-sections' }, h(DetailSectionTitle, { key: 'b7ea9ffe4b40d324c9bf61abeff2d2d3ba297a93', sectionTitle: "Details" }), h("div", { key: '42dc078ab22e604727da23acc52823196e6a8f1e', class: "d-table gap-2 w-100" }, h(DetailItem, { key: '07a8db366a138b85c05070deff2acb20ec01c22d', title: "Amount", value: formatCurrency(this.payment.amount) }), h(DetailItem, { key: '6b7a4d3f037730ec4125f22801bea7d5ff44c749', title: "Fees", value: formatCurrency(this.payment.fee_amount) }), h(DetailItem, { key: '3ba08759253568578b25a5e19b4e4a3d79b6249f', title: "Refunded", value: formatCurrency(this.payment.amount_refunded) }), h(DetailItem, { key: '9f932a91efb8edf352c96fa5aaa3707faedba147', title: "Net", value: formatCurrency(this.payment.balance) }), h(DetailItem, { key: '484789625ec3ed8844bf84679bc9946e909aea63', title: "Status", value: MapPaymentStatusToBadge(this.payment.status) }), h(DetailItem, { key: 'a7197b9e3fd37eb3e31159f00367fd24e6f686e9', title: "Payment ID", value: this.payment.id }), h(DetailItem, { key: 'b4a8f8dc1a02576bd81b578c70899f9e831f9b9e', title: "Processing Fees", value: formatCurrency(this.payment.fee_amount) }), h(DetailItem, { key: 'ab67436984fd0c63d197d6dba32fe68811f1d5ed', title: "Statement Descriptor", value: this.payment.statement_descriptor }), h(DetailItem, { key: 'eb98a0f0c7b9829f4bac79e8405a764a50b3045b', title: "Description", value: this.payment.description })), this.payment.payment_method.card && [
-            h(DetailSectionTitle, { key: '2a9f8477253316d439b1f008d7a0e44057483b84', sectionTitle: "Payment Method" }),
-            h("div", { key: '4d36fda4d79e57834da25d0d14ac40b1524c7528', class: "d-table gap-2 w-100" }, h(DetailItem, { key: 'a6c4903a325084e757e5d3a0b7d28f1367d06b2e', title: "ID", value: this.payment.payment_method.card.id }), h(DetailItem, { key: 'afa4ad9827a3106eda5c3c0d699a0f44a357f1c2', title: "Payment Type", value: "Card" }), h(DetailItem, { key: '89e9b2d4050009e8110ca2607a8faa4077b65928', title: "Last 4 Numbers", value: this.payment.payment_method.lastFourDigits }), h(DetailItem, { key: 'c3fa744314ee8c7ed4f337158b9172fa41f40067', title: "Brand", value: snakeCaseToHumanReadable(this.payment.payment_method.card.brand) }), h(DetailItem, { key: '8927a9c1102d754966d267e59e8f77fcbffc9ebe', title: "Cardholder", value: this.payment.payment_method.payersName }))
+        return (h(StyledHost, { key: 'b0a4e021ebaf00cf1750c7d40510aa9754bc622b' }, this.loading && LoadingState(), !this.loading && this.errorMessage && ErrorState(this.errorMessage), !this.loading && !this.errorMessage &&
+            this.payment && (h("justifi-details", { key: '5b7858536120f8a1d3016f1f110f51e6b8605f3e', "error-message": this.errorMessage }, h(EntityHeadInfo, { key: '93db7fd2d30fb1ef0099e58fd6d90e703f921c44', slot: "head-info", badge: h("span", { slot: 'badge', innerHTML: MapPaymentStatusToBadge(this.payment.status) }), title: `${formatCurrency(this.payment.amount)} ${(_a = this.payment) === null || _a === void 0 ? void 0 : _a.currency.toUpperCase()}` }, h(EntityHeadInfoItem, { key: '6c1b97d494b92618092710986ff6cbfb4c183cad', classes: "border-1 border-end", title: "Updated At", value: `${formatDate(this.payment.updated_at)} ${formatTime(this.payment.updated_at)}` }), h(EntityHeadInfoItem, { key: '1ef1fe7899d47959bb3ce8dbe511222cc69185ef', classes: "border-1 border-end", title: "Created At", value: `${formatDate(this.payment.created_at)} ${formatTime(this.payment.created_at)}` }), h(EntityHeadInfoItem, { key: 'd0a12d9abfc6d4c71249af65cef35902554cc3a7', title: "ID", value: this.payment.id })), h("div", { key: 'b12d205fb50d310525045261967a383e93458cb3', slot: 'detail-sections' }, h(DetailSectionTitle, { key: 'cdcae0f279389849946017963762c9a1294204ee', sectionTitle: "Details" }), h("div", { key: '91693665801878a7b87729412a10469dac21130d', class: "d-table gap-2 w-100" }, h(DetailItem, { key: 'c58427d3a5543caa9f83fe62dca71612c92a200e', title: "Amount", value: formatCurrency(this.payment.amount) }), h(DetailItem, { key: 'd6a0b3df90839ad1fdd34058f3582482a9eb1b20', title: "Fees", value: formatCurrency(this.payment.fee_amount) }), h(DetailItem, { key: '6c08a4a3bcc7d6bf726959b451e3231598d7e920', title: "Refunded", value: formatCurrency(this.payment.amount_refunded) }), h(DetailItem, { key: '4d2d8d897cd0d5a4be06b44741cf85366eebe9af', title: "Net", value: formatCurrency(this.payment.balance) }), h(DetailItem, { key: 'b3df303d6c12b1327b3f20245c3c50657eb422f8', title: "Status", value: MapPaymentStatusToBadge(this.payment.status) }), h(DetailItem, { key: '6a535b4f0c91fb37077e09912e4fa3c1d333db48', title: "Payment ID", value: this.payment.id }), h(DetailItem, { key: '982514de79780e97b0aa3f120d7fcc11b51301ac', title: "Processing Fees", value: formatCurrency(this.payment.fee_amount) }), h(DetailItem, { key: '967e82d6fe2bcf55110e6881811d38af9ea63c17', title: "Statement Descriptor", value: this.payment.statement_descriptor }), h(DetailItem, { key: 'bee37b7e5b7c22f0ec596104097c1408284c5ac1', title: "Description", value: this.payment.description })), this.payment.payment_method.card && [
+            h(DetailSectionTitle, { key: 'da950a7706cf51aa72eeff3faedfb00fa824075f', sectionTitle: "Payment Method" }),
+            h("div", { key: 'c8ab64e8f0021fcfe4ce5e7a9bac9d867e3aa650', class: "d-table gap-2 w-100" }, h(DetailItem, { key: '70ebccad09e67f53b13673d1f2d19c6438053ac5', title: "ID", value: this.payment.payment_method.card.id }), h(DetailItem, { key: '1cbdb8b281b70a600568d7b82499084695c6a48a', title: "Payment Type", value: "Card" }), h(DetailItem, { key: 'd9696130b92a28560d2a437996d53d3ba6df39ec', title: "Last 4 Numbers", value: this.payment.payment_method.lastFourDigits }), h(DetailItem, { key: 'e93b235819d5b6386ea6f6283f21da7442fd4661', title: "Brand", value: snakeCaseToHumanReadable(this.payment.payment_method.card.brand) }), h(DetailItem, { key: '9ba28b4b099b775cc4f77cff13c74295b12fdfd4', title: "Cardholder", value: this.payment.payment_method.payersName }))
         ], this.payment.payment_method.bank_account && [
-            h(DetailSectionTitle, { key: 'cb93b009acbbb0ffcf7ca2bb62d1bb994402a94d', sectionTitle: "Payment Method" }),
-            h("div", { key: 'c415068d776d72ae855e44a2b4af34e5c03a9c98', class: "d-table gap-2 w-100" }, h(DetailItem, { key: 'bb29fbc25854f3e0441cc68c97f200aa47c5f124', title: "ID", value: this.payment.payment_method.bank_account.id }), h(DetailItem, { key: '83686af8f7a1cf2c4658eb3e8703352e05cb35aa', title: "Last 4 Numbers", value: this.payment.payment_method.lastFourDigits }), h(DetailItem, { key: '9097af01a1bef3a91232fa7aec363bf1028efc12', title: "Bank Name", value: this.payment.payment_method.bank_account.brand }), h(DetailItem, { key: '6f3202a94628356b05147aebd7f15614f7728ef8', title: "Account Owner", value: this.payment.payment_method.payersName }))
-        ], h(DetailSectionTitle, { key: 'cc497bb5a2e2a4c3a69cc5807aaf3c493a55eb1c', sectionTitle: 'Metadata' }), h("div", { key: '46611a1528b5edc4a3a22448f5990a44531d3f7b', class: "d-table gap-2 w-100" }, h(CodeBlock, { key: '33b3103dfb4236119c187862a1856fd15111049d', metadata: this.payment.metadata })))))));
+            h(DetailSectionTitle, { key: '4f046825e2eeef87ddb614b6eca623fca187b0d3', sectionTitle: "Payment Method" }),
+            h("div", { key: 'b8a01fdd5596adafa252b4fd67df2e30c2e34990', class: "d-table gap-2 w-100" }, h(DetailItem, { key: 'dcd3c8418ebd465812c1dd1fb9b5559ce79e2855', title: "ID", value: this.payment.payment_method.bank_account.id }), h(DetailItem, { key: '86246e11c8c494beb3f2571650f8d78e33b8dbae', title: "Last 4 Numbers", value: this.payment.payment_method.lastFourDigits }), h(DetailItem, { key: 'd3cd7eec7d55ae90d0fd4bc55fad73add0d6d88c', title: "Bank Name", value: this.payment.payment_method.bank_account.brand }), h(DetailItem, { key: '43d7a0b7e37172da32aff94fe01877a32491fba8', title: "Account Owner", value: this.payment.payment_method.payersName }))
+        ], h(DetailSectionTitle, { key: 'd59695a94c44c10615020313be585c0e69374e1c', sectionTitle: 'Metadata' }), h("div", { key: '984dd0d2d0bd5c816dd7098b4e8eebf19e2ebf70', class: "d-table gap-2 w-100" }, h(CodeBlock, { key: 'b2d8cf824ae9aba9d714e688fddbf14a8fdd92d6', metadata: this.payment.metadata })))))));
     }
     static get is() { return "payment-details-core"; }
-    static get originalStyleUrls() {
-        return {
-            "$": ["payment-details.scss"]
-        };
-    }
-    static get styleUrls() {
-        return {
-            "$": ["payment-details.css"]
-        };
-    }
     static get properties() {
         return {
             "getPaymentDetails": {