@justifi/webcomponents 4.23.1 → 5.0.0-rc-2

package/dist/collection/components/dispute-management/dispute-response/schemas/product-or-service-schema.js

@@ -0,0 +1,6 @@
+import { object, string } from "yup";
+const ProductOrServiceSchema = object({
+    product_description: string().nullable(),
+    service_date: string().nullable(),
+});
+export default ProductOrServiceSchema;

package/dist/collection/components/dispute-management/dispute-response/schemas/refund-policy-schema.js

@@ -0,0 +1,6 @@
+import { object, string } from "yup";
+const RefundPolicySchema = object({
+    refund_policy_disclosure: string().nullable(),
+    refund_refusal_explanation: string().nullable(),
+});
+export default RefundPolicySchema;

package/dist/collection/components/dispute-management/dispute-response/schemas/shipping-details-schema.js

@@ -0,0 +1,8 @@
+import { object, string } from "yup";
+const ShippingDetailsSchema = object({
+    shipping_carrier: string().nullable(),
+    shipping_tracking_number: string().nullable(),
+    shipping_date: string().nullable(),
+    shipping_address: string().nullable(),
+});
+export default ShippingDetailsSchema;

package/dist/collection/components/dispute-management/dispute-response/shipping-details.js

@@ -0,0 +1,106 @@
+import { h } from "@stencil/core";
+import { FormController } from "../../../ui-components/form/form";
+import ShippingDetailsSchema from "./schemas/shipping-details-schema";
+import { DisputeEvidenceDocument } from "../../../api/DisputeEvidenceDocument";
+import { DisputeResponseFormStep } from "./dispute-response-form-types";
+import { heading5 } from "../../../styles/parts";
+export class ShippingDetails {
+    constructor() {
+        this.inputHandler = (name, value) => {
+            this.form.setValues(Object.assign(Object.assign({}, this.form.values.getValue()), { [name]: value }));
+        };
+        this.handleFileSelection = (e) => {
+            const target = e.target;
+            const name = target.name;
+            const files = target.files;
+            for (const file of files) {
+                this.documentList.push(new DisputeEvidenceDocument(file, name));
+            }
+        };
+        this.disputeResponse = undefined;
+        this.form = undefined;
+        this.errors = {};
+        this.documentList = [];
+    }
+    async validateAndSubmit(onSuccess) {
+        this.form.validateAndSubmit((formData) => onSuccess(formData, this.documentList, DisputeResponseFormStep.shippingDetails));
+    }
+    ;
+    componentWillLoad() {
+        this.form = new FormController(ShippingDetailsSchema);
+    }
+    componentDidLoad() {
+        this.form.errors.subscribe(errors => {
+            this.errors = Object.assign({}, errors);
+        });
+    }
+    render() {
+        var _a, _b, _c, _d;
+        return (h("div", { key: 'b2d81ec85e534890a691547a2ec8d28dcc61e784' }, h("div", { key: '3b49e0e3647e66196f586c2e58699e878658c9f3', class: "row gy-3" }, h("div", { key: 'ba6f52f0c2a44c7a39641cb9cb51bf799892a78f', class: "col-12" }, h("h2", { key: '70a108aa928d392d47bf72a32c3a2c71538fc068', class: "h5", part: heading5 }, "Shipping Details")), h("div", { key: 'f5e1b4c54c4d59b7b558fe817d23e5cbc71acec1', class: "col-12" }, h("form-control-text", { key: '32da6155a22359d291506e7d864b0b09fda34f99', label: "Shipping Carrier Name", name: "shipping_carrier", defaultValue: (_a = this.disputeResponse) === null || _a === void 0 ? void 0 : _a.shipping_carrier, inputHandler: this.inputHandler, errorText: this.errors.shipping_carrier })), h("div", { key: '55a1082190a09f2723ffbcb6075c18a094ddf5e5', class: "col-12" }, h("form-control-text", { key: '63e0883c7a8f9e01396b7c395eeac7d8612d8dcf', label: "Tracking Number", name: "shipping_tracking_number", defaultValue: (_b = this.disputeResponse) === null || _b === void 0 ? void 0 : _b.shipping_tracking_number, inputHandler: this.inputHandler, errorText: this.errors.shipping_tracking_number })), h("div", { key: '0d2f87a06e90191c274d96aed25dbc106ea3c347', class: "col-12" }, h("form-control-date", { key: '33e5da0712b67146147eea9a2de66f0b05d64a69', label: "Date Shipped", name: "shipping_date", defaultValue: (_c = this.disputeResponse) === null || _c === void 0 ? void 0 : _c.shipping_date, inputHandler: this.inputHandler, errorText: this.errors.shipping_date })), h("div", { key: '9aff91d4c4055cfe55a35fc28cf07167b4767992', class: "col-12" }, h("form-control-textarea", { key: '840beacaf520e1155cc2acc21d7e2eeaba2dacca', label: "Shipping Address", name: "shipping_address", defaultValue: (_d = this.disputeResponse) === null || _d === void 0 ? void 0 : _d.shipping_address, inputHandler: this.inputHandler, errorText: this.errors.shipping_address })), h("div", { key: '244eb1c41ee0a26c3ba8b7754404b9c736f0e1a2', class: "col-12" }, h("form-control-file-v2", { key: 'e09e9d04a0a5bb26232271fa29dbc5fcf1549dec', label: "Shipping Documentation", name: "shipping_documentation", onChange: this.handleFileSelection })))));
+    }
+    static get is() { return "justifi-shipping-details"; }
+    static get properties() {
+        return {
+            "disputeResponse": {
+                "type": "any",
+                "mutable": false,
+                "complexType": {
+                    "original": "any",
+                    "resolved": "any",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "dispute-response",
+                "reflect": false
+            }
+        };
+    }
+    static get states() {
+        return {
+            "form": {},
+            "errors": {},
+            "documentList": {}
+        };
+    }
+    static get methods() {
+        return {
+            "validateAndSubmit": {
+                "complexType": {
+                    "signature": "(onSuccess: (formData: any, documentList: DisputeEvidenceDocument[], formStep: DisputeResponseFormStep) => void) => Promise<void>",
+                    "parameters": [{
+                            "name": "onSuccess",
+                            "type": "(formData: any, documentList: DisputeEvidenceDocument[], formStep: DisputeResponseFormStep) => void",
+                            "docs": ""
+                        }],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        },
+                        "DisputeEvidenceDocument": {
+                            "location": "import",
+                            "path": "../../../api/DisputeEvidenceDocument",
+                            "id": "src/api/DisputeEvidenceDocument.ts::DisputeEvidenceDocument"
+                        },
+                        "DisputeResponseFormStep": {
+                            "location": "import",
+                            "path": "./dispute-response-form-types",
+                            "id": "src/components/dispute-management/dispute-response/dispute-response-form-types.ts::DisputeResponseFormStep"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "",
+                    "tags": []
+                }
+            }
+        };
+    }
+}
+;

package/dist/collection/components/dispute-management/event-types.js

@@ -0,0 +1,20 @@
+export var DisputeManagementClickActions;
+(function (DisputeManagementClickActions) {
+    DisputeManagementClickActions["nextStep"] = "nextStep";
+    DisputeManagementClickActions["previousStep"] = "previousStep";
+    DisputeManagementClickActions["cancelDispute"] = "cancelDispute";
+    DisputeManagementClickActions["respondToDispute"] = "respondToDispute";
+    DisputeManagementClickActions["submit"] = "submit";
+})(DisputeManagementClickActions || (DisputeManagementClickActions = {}));
+export var DisputeResponseFormStep;
+(function (DisputeResponseFormStep) {
+    DisputeResponseFormStep["disputeReason"] = "dispute_reason";
+    DisputeResponseFormStep["productOrService"] = "product_or_service";
+    DisputeResponseFormStep["customerDetails"] = "customer_details";
+    DisputeResponseFormStep["cancellationPolicy"] = "cancellation_policy";
+    DisputeResponseFormStep["refundPolicy"] = "refund_policy";
+    DisputeResponseFormStep["duplicateCharge"] = "duplicate_charge";
+    DisputeResponseFormStep["electronicEvidence"] = "electronic_evidence";
+    DisputeResponseFormStep["shippingDetails"] = "shipping_details";
+    DisputeResponseFormStep["additionalStatement"] = "additional_statement";
+})(DisputeResponseFormStep || (DisputeResponseFormStep = {}));

package/dist/collection/components/gross-payment-chart/gross-payment-chart-core.js

@@ -1,7 +1,8 @@
 import { Host, h } from "@stencil/core";
 import { Chart, BarController, Colors, BarElement, CategoryScale, LinearScale, Legend, Tooltip, Title } from "chart.js";
 import { generateChartOptions } from "./chart-utils";
-import { ErrorState, LoadingState } from "../../ui-components/details/utils";
+import { ErrorState } from "../../ui-components/details/utils";
+import Spinner from "../../ui-components/spinner";
 Chart.register(Colors, BarController, BarElement, CategoryScale, LinearScale, Legend, Tooltip, Title);
 export class GrossPaymentChartCore {
     constructor() {
@@ -68,19 +69,9 @@ export class GrossPaymentChartCore {
         }
     }
     render() {
-        return (h(Host, { key: '80dfc1ae805ac7e1d34222037de6f492feabf619' }, this.loading && LoadingState(), !this.errorMessage ? h("canvas", { id: "chart", ref: (elem) => this.chartRef = elem }) : ErrorState(this.errorMessage)));
+        return (h(Host, { key: 'ac73fa9c5543c6c9b7170ccc99d1a48b2e1d28b5' }, this.loading && h(Spinner, { key: 'eb847368027fef8f004c913d0a09cf692f493ce3' }), !this.errorMessage ? h("canvas", { id: "chart", ref: (elem) => this.chartRef = elem }) : ErrorState(this.errorMessage)));
     }
     static get is() { return "gross-payment-chart-core"; }
-    static get originalStyleUrls() {
-        return {
-            "$": ["gross-payment-chart.css"]
-        };
-    }
-    static get styleUrls() {
-        return {
-            "$": ["gross-payment-chart.css"]
-        };
-    }
     static get properties() {
         return {
             "getGrossPayment": {
@@ -124,13 +115,13 @@ export class GrossPaymentChartCore {
                     "text": ""
                 },
                 "complexType": {
-                    "original": "ComponentError",
-                    "resolved": "ComponentError",
+                    "original": "ComponentErrorEvent",
+                    "resolved": "ComponentErrorEvent",
                     "references": {
-                        "ComponentError": {
+                        "ComponentErrorEvent": {
                             "location": "import",
-                            "path": "../../api/ComponentError",
-                            "id": "src/api/ComponentError.ts::ComponentError"
+                            "path": "../../api/ComponentEvents",
+                            "id": "src/api/ComponentEvents.ts::ComponentErrorEvent"
                         }
                     }
                 }

package/dist/collection/components/gross-payment-chart/gross-payment-chart.js

@@ -108,13 +108,13 @@ export class GrossPaymentChart {
                     "text": ""
                 },
                 "complexType": {
-                    "original": "ComponentError",
-                    "resolved": "ComponentError",
+                    "original": "ComponentErrorEvent",
+                    "resolved": "ComponentErrorEvent",
                     "references": {
-                        "ComponentError": {
+                        "ComponentErrorEvent": {
                             "location": "import",
-                            "path": "../../api/ComponentError",
-                            "id": "src/api/ComponentError.ts::ComponentError"
+                            "path": "../../api/ComponentEvents",
+                            "id": "src/api/ComponentEvents.ts::ComponentErrorEvent"
                         }
                     }
                 }

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

@@ -1,7 +1,8 @@
 import { h } from "@stencil/core";
-import { formatCurrency } from "../../../utils/utils";
+import { addAttribute, formatCurrency, processHTML, removeAttribute } from "../../../utils/utils";
 import { insuranceValues, insuranceErrors, validateInsuranceValues } from "../insurance-state";
-import { StyledHost } from "../../../ui-components";
+import { StyledHost, Header2 } from "../../../ui-components";
+import { text, textDanger } from "../../../styles/parts";
 export class SeasonInterruptionInsuranceCore {
     constructor() {
         this.checkoutId = undefined;
@@ -57,6 +58,14 @@ export class SeasonInterruptionInsuranceCore {
             },
             onSuccess: ({ quote }) => {
                 this.quote = quote;
+                this.quote.product.description = processHTML(this.quote.product.description, [
+                    (html) => removeAttribute(html, 'style'),
+                    (html) => addAttribute(html, 'a', 'part', text)
+                ]);
+                this.quote.product.legal_disclaimer = processHTML(this.quote.product.legal_disclaimer, [
+                    (html) => removeAttribute(html, 'style'),
+                    (html) => addAttribute(html, 'a', 'part', text)
+                ]);
                 insuranceValues[quote.policy_type] = quote.accepted;
                 this.isLoading = false;
             },
@@ -71,8 +80,8 @@ export class SeasonInterruptionInsuranceCore {
         });
     }
     ;
-    onChangeHandler(event) {
-        this.accepted = event.target.value;
+    onChangeHandler(_name, value) {
+        this.accepted = value;
         insuranceErrors[this.quote.policy_type] = false;
         this.toggleCoverage({
             quoteId: this.quote.id,
@@ -96,21 +105,9 @@ export class SeasonInterruptionInsuranceCore {
     }
     render() {
         var _a, _b, _c, _d;
-        return (h(StyledHost, { key: 'ca90d98930a8edff34e6690caa04421a70fa9238' }, !this.isLoading &&
-            h("div", { key: 'ff7e145e0fe3e4cc1b1b476369dec63228aeafbf' }, h("h2", { key: '206a364e3efdeafc1c17c6d25ec5de1b8ce21c29', class: "fs-5 fw-bold pb-3 jfi-header" }, (_a = this.quote) === null || _a === void 0 ? void 0 : _a.product.title), h("small", { key: '0f3ef80b76e2d50b793175dfd9de9910329254ea', innerHTML: (_b = this.quote) === null || _b === void 0 ? void 0 : _b.product.description }), h("div", { key: '5fa4ea480c0ebc1870f222a4f58529676451e9d4' }, h("input", { key: '40f5f25d82c9a5ecea558ea0f6763d619f82727e', 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: 'c7e2cd5fa6052765e2155cbc24f6fd9d6b8da723', htmlFor: "accept" }, "Accept coverage for ", formatCurrency((_c = this.quote) === null || _c === void 0 ? void 0 : _c.total_cents))), h("div", { key: '47d716b0cb114e3c0a62776491153ca2ce389ce7', class: "mb-2" }, h("input", { key: 'dd442bb652f98a75d184e99d78d79292189ef867', 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: 'e5b7a36f006ed6a78eb762c1bea131800ab45ae4', htmlFor: "decline" }, "Decline coverage")), h("div", { key: 'dddae2c74c62641ccd2ba7352190d6e4731ef19b', class: "invalid-feedback", style: { display: this.error ? 'block' : 'none' } }, "Please select an option"), h("small", { key: '67684b8a101061c54b0629ae35000032232e6847', innerHTML: (_d = this.quote) === null || _d === void 0 ? void 0 : _d.product.legal_disclaimer }))));
+        return (h(StyledHost, { key: 'e665e8866cf53e7b22ff4e05c25b1059bc9e025a' }, !this.isLoading && (h("div", { key: '15e2fdb114dc837d95daeb696ec5d5769c8c80bc' }, h(Header2, { key: '19095737990f12bde58fc7bd6e63ded25f62a8e2', text: (_a = this.quote) === null || _a === void 0 ? void 0 : _a.product.title, class: "fs-5 fw-bold pb-3" }), h("small", { key: 'a036659ef5b7a11a16dda7cc7558cd9940d53540', innerHTML: (_b = this.quote) === null || _b === void 0 ? void 0 : _b.product.description, part: text }), h("form-control-radio", { key: '49b102250e07f11f91f07dfc3fba74bff4f5fd34', label: `Accept coverage for ${formatCurrency((_c = this.quote) === null || _c === void 0 ? void 0 : _c.total_cents)}`, name: "opt-in", value: 'true', checked: this.accepted === 'true', inputHandler: this.onChangeHandler.bind(this) }), h("form-control-radio", { key: 'e784cf4340d9034e81a12454aed5a0d4afe9aea8', label: "Decline coverage", name: "opt-in", value: 'false', checked: this.accepted === 'false', inputHandler: this.onChangeHandler.bind(this) }), h("div", { key: '649ddbafdc560bde98470a2d868a9410a57eaba4', class: "invalid-feedback", style: { display: this.error ? 'block' : 'none' }, part: textDanger }, "Please select an option"), h("small", { key: '3d3651631da43d2c0f473b793cb5f6f663b7b819', innerHTML: (_d = this.quote) === null || _d === void 0 ? void 0 : _d.product.legal_disclaimer, part: text })))));
     }
     static get is() { return "justifi-season-interruption-insurance-core"; }
-    static get encapsulation() { return "shadow"; }
-    static get originalStyleUrls() {
-        return {
-            "$": ["season-interruption-insurance-core.css", "../../checkout/form-check-input.css", "../../checkout/header.css"]
-        };
-    }
-    static get styleUrls() {
-        return {
-            "$": ["season-interruption-insurance-core.css", "../../checkout/form-check-input.css", "../../checkout/header.css"]
-        };
-    }
     static get properties() {
         return {
             "checkoutId": {
@@ -393,13 +390,13 @@ export class SeasonInterruptionInsuranceCore {
                     "text": ""
                 },
                 "complexType": {
-                    "original": "ComponentError",
-                    "resolved": "ComponentError",
+                    "original": "ComponentErrorEvent",
+                    "resolved": "ComponentErrorEvent",
                     "references": {
-                        "ComponentError": {
+                        "ComponentErrorEvent": {
                             "location": "import",
-                            "path": "../../../api/ComponentError",
-                            "id": "src/api/ComponentError.ts::ComponentError"
+                            "path": "../../../api/ComponentEvents",
+                            "id": "src/api/ComponentEvents.ts::ComponentErrorEvent"
                         }
                     }
                 }

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

@@ -53,7 +53,7 @@ export class SeasonInterruptionInsurance {
         });
     }
     render() {
-        return (h("justifi-season-interruption-insurance-core", { key: '205515d248ac43b9de8e7c8f9fec41b93f6e1237', 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: '4a0e93d18f16971cee44cdc9d0b312ded7728274', 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"; }
@@ -301,13 +301,13 @@ export class SeasonInterruptionInsurance {
                     "text": ""
                 },
                 "complexType": {
-                    "original": "ComponentError",
-                    "resolved": "ComponentError",
+                    "original": "ComponentErrorEvent",
+                    "resolved": "ComponentErrorEvent",
                     "references": {
-                        "ComponentError": {
+                        "ComponentErrorEvent": {
                             "location": "import",
-                            "path": "../../../api/ComponentError",
-                            "id": "src/api/ComponentError.ts::ComponentError"
+                            "path": "../../../api/ComponentEvents",
+                            "id": "src/api/ComponentEvents.ts::ComponentErrorEvent"
                         }
                     }
                 }

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

@@ -1,18 +1,19 @@
-import { Host, h } from "@stencil/core";
+import { h, Host } from "@stencil/core";
 import { ExtendedPagingDefaults } from "../../api/Pagination";
+import { buttonDisabled, buttonLink, } from "../../styles/parts";
 export class PaginationMenu {
     constructor() {
         this.paging = ExtendedPagingDefaults;
         this.params = {};
     }
     render() {
-        return (h(Host, { key: '645df5028861aa714a814f908ccace8dcd0986f8', exportparts: `page-arrow,page-button,page-button-disabled,page-button-text` }, h("nav", { key: '6cb86ce01c625db9c31204f63258570f8a5d0a0f', "aria-label": "Table pagination", class: "d-flex justify-content-end gap-3" }, h("ul", { key: '7ffb5771a1c51553d64735721b937e53c699949d', class: "pagination m-0" }, h("li", { key: 'b439c2f7fe81ccdfa29670a6fc04715681ed5ab3', class: `page-item ${this.paging.has_previous ? '' : ' disabled'}` }, h("a", { key: 'dc59152e834a3076f09304f6fcd0195058ebefec', href: "#", class: "page-link", onClick: (e) => {
+        return (h(Host, { key: '7a4cfcfa7d9329e8d4026cd6bdc15c3251f004d6' }, h("nav", { key: '203b5ffeb3f4a167aa9448ac6075fd7a1ac15ef7', "aria-label": "Table pagination", class: "d-flex justify-content-end gap-3" }, h("ul", { key: 'e302f939560131ade67b0f9d4135fa04ff485d09', class: "pagination m-0" }, h("li", { key: 'b3e2ba7b66e5de597a3233ee036d4d1ef2930689', class: `page-item ${this.paging.has_previous ? '' : ' disabled'}` }, h("a", { key: '1f358b34fbaa7f140c1ee15ef6ee8d6f9b87407f', 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: 'fc640fb9ae2ca672bfed89d23c5641cb346c673d', class: "me-1", part: "page-arrow" }, "\u00AB"), h("span", { key: 'fb6fcd31ebd4d194b37f53a071537133b8c4d369', part: "page-button-text" }, "Previous"))), h("li", { key: 'b10e12ec7bc4a89cd897e868ec7b303c62599cd3', class: `page-item ${this.paging.has_next ? '' : ' disabled'}` }, h("a", { key: '51f91eb7cfef91dcbcfd9f11522213308bf717b5', href: "#", class: "page-link", onClick: (e) => {
+            }, part: this.paging.has_previous ? buttonLink : buttonDisabled }, h("span", { key: 'daffe0c0ffb7265cd769bbf27fef42c37e86300d', class: "me-1" }, "\u00AB"), h("span", { key: '2c42b74352aa7a79ac6bc231cdd828b7a62f5083' }, "Previous"))), h("li", { key: '2707ab481b124351479dbc5e4b270a60f8e0cb9e', class: `page-item ${this.paging.has_next ? '' : ' disabled'}` }, h("a", { key: 'f97ea7a812ba9b0066cd5e75ab45bff152708b63', 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: 'd89f50a44dead676d19b8862a92ba636947fe6b1', part: "page-button-text" }, "Next"), h("span", { key: 'f5dd2ddddef86931d935df56101f1fed8118e4f6', class: "ms-1", part: "page-arrow" }, "\u00BB")))))));
+            }, part: this.paging.has_next ? buttonLink : buttonDisabled }, h("span", { key: 'a850314028161b5a04618ffc5515603ea7203a0a' }, "Next"), h("span", { key: '643097228302500411ca0c4a932d8067074a15d2', class: "ms-1" }, "\u00BB")))))));
     }
     static get is() { return "pagination-menu"; }
     static get properties() {

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

@@ -1,8 +1,10 @@
 import { h } from "@stencil/core";
 import { formatCurrency, formatDate, formatTime, snakeCaseToHumanReadable } from "../../utils/utils";
-import { CodeBlock, DetailItem, DetailSectionTitle, EntityHeadInfo, EntityHeadInfoItem, ErrorState, LoadingState } from "../../ui-components/details/utils";
+import { CodeBlock, DetailItem, DetailSectionTitle, EntityHeadInfo, EntityHeadInfoItem, ErrorState } from "../../ui-components/details/utils";
 import { StyledHost } from "../../ui-components";
 import { MapPaymentStatusToBadge } from "../payments-list/payments-status";
+import Spinner from "../../ui-components/spinner";
+import { badge } from "../../styles/parts";
 export class PaymentDetailsCore {
     constructor() {
         this.getPaymentDetails = undefined;
@@ -39,14 +41,14 @@ export class PaymentDetailsCore {
     }
     render() {
         var _a;
-        return (h(StyledHost, { key: '85c684ff2f417380042e5245e3e6546874a75e72' }, this.loading && LoadingState(), !this.loading && this.errorMessage && ErrorState(this.errorMessage), !this.loading && !this.errorMessage &&
-            this.payment && (h("justifi-details", { key: 'a1afa8ca107867f4d48a6069d8df08942e7cb4b2', "error-message": this.errorMessage }, h(EntityHeadInfo, { key: 'c7e93e52c041808c816768cfd56c2e035410bea3', 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: '2dba396e28b3daa61b722ffe32d98c3065ed2e18', classes: "border-1 border-end", title: "Updated At", value: `${formatDate(this.payment.updated_at)} ${formatTime(this.payment.updated_at)}` }), h(EntityHeadInfoItem, { key: '9c0417863d9b0ba186c7547d41b02372c9ab3d54', classes: "border-1 border-end", title: "Created At", value: `${formatDate(this.payment.created_at)} ${formatTime(this.payment.created_at)}` }), h(EntityHeadInfoItem, { key: '7a7e31453894d70671b0f001b30aa74c72380308', title: "ID", value: this.payment.id })), h("div", { key: 'd6b72faca6ce471ce914ff5184e6cc2419a2ef84', slot: 'detail-sections' }, h(DetailSectionTitle, { key: 'c794e7f7a4ac3fc3442fea20ba6aaf00ca1b52fd', sectionTitle: "Details" }), h("div", { key: '5f34cd707d0f7ca2ed3c0dbd2abc2fc1c5f9ee4c', class: "d-table gap-2 w-100" }, h(DetailItem, { key: 'f64631d74fb728487477e61d99f93b72ccf03b45', title: "Amount", value: formatCurrency(this.payment.amount) }), h(DetailItem, { key: '7e751f1c2e62ea45fbdb910b4bfb10f2c30e923a', title: "Fees", value: formatCurrency(this.payment.fee_amount) }), h(DetailItem, { key: '1a536d5e027c98aeabd44cbb83f8f38322c37a95', title: "Refunded", value: formatCurrency(this.payment.amount_refunded) }), h(DetailItem, { key: 'a1739f90e3d8cc1724b556168c86e392d1ef84fa', title: "Net", value: formatCurrency(this.payment.balance) }), h(DetailItem, { key: '0a1f7b910421fe8568c5bbb6a70732f392486370', title: "Status", value: MapPaymentStatusToBadge(this.payment.status) }), h(DetailItem, { key: '6c45ac2b6e0e84fbdd9e9f6fa26764a351c2495f', title: "Payment ID", value: this.payment.id }), h(DetailItem, { key: '6571a1faf8daf4079187ccf37603cdec6e7f7602', title: "Processing Fees", value: formatCurrency(this.payment.fee_amount) }), h(DetailItem, { key: '1b343529481cf7143855513e44428cf3188b8326', title: "Statement Descriptor", value: this.payment.statement_descriptor }), h(DetailItem, { key: 'd0ff8578503733c6b580131aed9d3f284e7ab3e8', title: "Description", value: this.payment.description })), this.payment.payment_method.card && [
-            h(DetailSectionTitle, { key: 'c0ec143f86d9c817380efa58cea2a48476df77d8', sectionTitle: "Payment Method" }),
-            h("div", { key: '278b6ef36cf15e9037b4ec94846fc8215b766f61', class: "d-table gap-2 w-100" }, h(DetailItem, { key: 'dcbf3d1747b9e84cb10430ee595806381cac21bd', title: "ID", value: this.payment.payment_method.card.id }), h(DetailItem, { key: '0c4f1701aa28272e93d2f13251da5261f90e83cc', title: "Payment Type", value: "Card" }), h(DetailItem, { key: 'f8f90a838143fde661a612c5d880ffc98eb468a2', title: "Last 4 Numbers", value: this.payment.payment_method.lastFourDigits }), h(DetailItem, { key: '37a455f5451973c3388dd8cf0841320564f9f034', title: "Brand", value: snakeCaseToHumanReadable(this.payment.payment_method.card.brand) }), h(DetailItem, { key: '156c2b789d28d1ae7b5e4c912c99f29681a2f7ef', title: "Cardholder", value: this.payment.payment_method.payersName }))
+        return (h(StyledHost, { key: '7550877e5bc7bf30d0964d496b07c39f57ea23c7' }, this.loading && h(Spinner, { key: '320d191ef2cbd736158382f693bd4e1b2676a850' }), !this.loading && this.errorMessage && ErrorState(this.errorMessage), !this.loading && !this.errorMessage &&
+            this.payment && (h("justifi-details", { key: 'cc147622d2821fb3070d3acb17dabbe0d6acb44e', "error-message": this.errorMessage }, h(EntityHeadInfo, { key: '102fbe95740cfcbeed7d79c500841e4e69644c1b', slot: "head-info", badge: h("span", { slot: 'badge', part: 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: '1f6b55ebbc0abb37ced9cda26b193a779f7ba4a9', classes: "border-1 border-end", title: "Updated At", value: `${formatDate(this.payment.updated_at)} ${formatTime(this.payment.updated_at)}` }), h(EntityHeadInfoItem, { key: 'cb64b263862128ef00b4923cdfd986ee63d40670', classes: "border-1 border-end", title: "Created At", value: `${formatDate(this.payment.created_at)} ${formatTime(this.payment.created_at)}` }), h(EntityHeadInfoItem, { key: '4a245ba3ad052ef015d7c5c2abb8d05051e0784a', title: "ID", value: this.payment.id })), h("div", { key: '9721335ed8558618cae9685f83c68e2eff8dfb8b', slot: 'detail-sections' }, h(DetailSectionTitle, { key: '8c460e5675898d68ceb335a56da05b459b81b112', sectionTitle: "Details" }), h("div", { key: '1094ca8b231926460913bbabd9c9816e04d5bb1f', class: "d-table gap-2 w-100" }, h(DetailItem, { key: 'e9640bbcf361dbeead436eea32a69fa962e34663', title: "Amount", value: formatCurrency(this.payment.amount) }), h(DetailItem, { key: 'ffa1411af9d4d78dbeaedcf7c12ce7d7c1e6eb53', title: "Fees", value: formatCurrency(this.payment.fee_amount) }), h(DetailItem, { key: 'c5843ff4773b7a2be2afdd659226dd46096f585d', title: "Refunded", value: formatCurrency(this.payment.amount_refunded) }), h(DetailItem, { key: '8ec788ae9ed769f6af4f32882d72d10877d1de30', title: "Net", value: formatCurrency(this.payment.balance) }), h(DetailItem, { key: 'ddd659af132d2628b8187d81ea72fc604e7ea7a8', title: "Status", value: MapPaymentStatusToBadge(this.payment.status) }), h(DetailItem, { key: '15cb99e66dfc876d65aa8d446564f873aef1ef8a', title: "Payment ID", value: this.payment.id }), h(DetailItem, { key: '499a906f13648cd49a3bf92ccadcc01f0fb430f6', title: "Processing Fees", value: formatCurrency(this.payment.fee_amount) }), h(DetailItem, { key: '75ab13ff4c06f0f58dec6c0fcaad692d6d03b68b', title: "Statement Descriptor", value: this.payment.statement_descriptor }), h(DetailItem, { key: 'aeb538897b387e4811d35dde9fb19a5813c1c049', title: "Description", value: this.payment.description })), this.payment.payment_method.card && [
+            h(DetailSectionTitle, { key: '4c8aa277b28bb1ffaf5fbada3a35f284ee2fabb2', sectionTitle: "Payment Method" }),
+            h("div", { key: 'ce52033a650a4f5db13e5c3cdf97191bcb3539b1', class: "d-table gap-2 w-100" }, h(DetailItem, { key: '168e45e35fc2e11adbf6881b17ebfd36d0a54a71', title: "ID", value: this.payment.payment_method.card.id }), h(DetailItem, { key: '38af59143d2961cdc29b03e46af06b720dad3c8e', title: "Payment Type", value: "Card" }), h(DetailItem, { key: '07518b2789187d2ae0b3f5edc6510a4b44798154', title: "Last 4 Numbers", value: this.payment.payment_method.lastFourDigits }), h(DetailItem, { key: '724207946a3e0b1b1cfe00bf0e77bfcd2f8c5982', title: "Brand", value: snakeCaseToHumanReadable(this.payment.payment_method.card.brand) }), h(DetailItem, { key: '34deb890ddf58566794fcb451d4d422d31f3f8b7', title: "Cardholder", value: this.payment.payment_method.payersName }))
         ], this.payment.payment_method.bank_account && [
-            h(DetailSectionTitle, { key: '4f5e2cc8141a336e4e9181cee653fda1bf38ecf7', sectionTitle: "Payment Method" }),
-            h("div", { key: '402ae401e93231e6369f9bb76ac48805d7d28f09', class: "d-table gap-2 w-100" }, h(DetailItem, { key: 'ef33c8d86b6ae69ae94cce998ef9d120b20e66d1', title: "ID", value: this.payment.payment_method.bank_account.id }), h(DetailItem, { key: 'db745f865358ab8f8537cc491d6d7ce021e7db29', title: "Last 4 Numbers", value: this.payment.payment_method.lastFourDigits }), h(DetailItem, { key: '9a15f1c0990145a0ebbbf4ebab04c7b8be3f447b', title: "Bank Name", value: this.payment.payment_method.bank_account.brand }), h(DetailItem, { key: 'dad1476170af5c5cb51a7fbd9329bbe969c51e3e', title: "Account Owner", value: this.payment.payment_method.payersName }))
-        ], h(DetailSectionTitle, { key: 'fbfc61ca6adb02cca215e1dda51eca1de03023ea', sectionTitle: 'Metadata' }), h("div", { key: '7018390fa3a2304a936999a0c7ceb04d3bd7fed5', class: "d-table gap-2 w-100" }, h(CodeBlock, { key: '4ec963eedfb62ab1d038d3f50b4c7199e4954623', metadata: this.payment.metadata })))))));
+            h(DetailSectionTitle, { key: 'fbc24139e24a3d72624db86e30d0ce7b602cafe1', sectionTitle: "Payment Method" }),
+            h("div", { key: 'cba8888ffd57b95d82ab307f5de83c61f16a75b8', class: "d-table gap-2 w-100" }, h(DetailItem, { key: '5d7bbf52c0b06be00bdca98df4926dfa5c7ee25f', title: "ID", value: this.payment.payment_method.bank_account.id }), h(DetailItem, { key: '19f2450384c28970a69a13aa623a0360c7818f46', title: "Last 4 Numbers", value: this.payment.payment_method.lastFourDigits }), h(DetailItem, { key: 'c81914830e67c477c2407112e74afaa127c406c2', title: "Bank Name", value: this.payment.payment_method.bank_account.brand }), h(DetailItem, { key: '5c8581983f368d84d6d9044d49ea2cab923b6615', title: "Account Owner", value: this.payment.payment_method.payersName }))
+        ], h(DetailSectionTitle, { key: 'c8ed7c6c2480365d7fec6c388103aeb1c3622c44', sectionTitle: 'Metadata' }), h("div", { key: 'cca65ed21900b912ea4a22b2e852d0c46946efd1', class: "d-table gap-2 w-100" }, h(CodeBlock, { key: 'c96c267005a5ee26064d7cd6c03768f83442dfc6', metadata: this.payment.metadata })))))));
     }
     static get is() { return "payment-details-core"; }
     static get properties() {
@@ -92,13 +94,13 @@ export class PaymentDetailsCore {
                     "text": ""
                 },
                 "complexType": {
-                    "original": "ComponentError",
-                    "resolved": "ComponentError",
+                    "original": "ComponentErrorEvent",
+                    "resolved": "ComponentErrorEvent",
                     "references": {
-                        "ComponentError": {
+                        "ComponentErrorEvent": {
                             "location": "import",
-                            "path": "../../api/ComponentError",
-                            "id": "src/api/ComponentError.ts::ComponentError"
+                            "path": "../../api/ComponentEvents",
+                            "id": "src/api/ComponentEvents.ts::ComponentErrorEvent"
                         }
                     }
                 }

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

@@ -5,29 +5,6 @@ import { ErrorState } from "../../ui-components/details/utils";
 import { ComponentErrorCodes, ComponentErrorSeverity } from "../../api/ComponentError";
 import JustifiAnalytics from "../../api/Analytics";
 import { checkPkgVersion } from "../../utils/check-pkg-version";
-/**
-  * @exportedPart detail-loading-spinner
-  * @exportedPart detail-loading-state
-  * @exportedPart detail-empty-state
-  * @exportedPart detail-head
-  * @exportedPart detail-title
-  * @exportedPart detail-method
-  * @exportedPart detail-info
-  * @exportedPart detail-info-item
-  * @exportedPart detail-info-item-title
-  * @exportedPart detail-info-item-data
-  * @exportedPart detail-metadata
-  * @exportedPart detail-metadata-title
-  * @exportedPart detail-method-title
-  * @exportedPart detail-method-data
-  * @exportedPart detail-section-title
-  * @exportedPart detail-section-item-title
-  * @exportedPart detail-section-item-data
-  * @exportedPart detail-head-info
-  * @exportedPart detail-head-info-item
-  * @exportedPart detail-head-info-item-title
-  * @exportedPart detail-head-info-item-data
-*/
 export class PaymentDetails {
     constructor() {
         this.paymentService = new PaymentService();
@@ -133,13 +110,13 @@ export class PaymentDetails {
                     "text": ""
                 },
                 "complexType": {
-                    "original": "ComponentError",
-                    "resolved": "ComponentError",
+                    "original": "ComponentErrorEvent",
+                    "resolved": "ComponentErrorEvent",
                     "references": {
-                        "ComponentError": {
+                        "ComponentErrorEvent": {
                             "location": "import",
-                            "path": "../../api/ComponentError",
-                            "id": "src/api/ComponentError.ts::ComponentError"
+                            "path": "../../api/ComponentEvents",
+                            "id": "src/api/ComponentEvents.ts::ComponentErrorEvent"
                         }
                     }
                 }