@justifi/webcomponents 4.20.1 → 4.22.0

package/dist/module/checkouts-list-core2.js

@@ -0,0 +1,249 @@
+import { h, proxyCustomElement, HTMLElement, createEvent } from '@stencil/core/internal/client';
+import './Checkout.js';
+import { p as pagingDefaults } from './Pagination.js';
+import './Payment.js';
+import './SubAccount.js';
+import { d as defineCustomElement$1, o as onFilterChange } from './table-filters-menu2.js';
+import { T as TableLoadingState, a as TableEmptyState, b as TableErrorState } from './table-loading-state.js';
+import { a as formatDate, b as formatTime, c as formatCurrency } from './utils2.js';
+import { T as Table } from './table.js';
+import { d as defineCustomElement$7 } from './checkouts-list-filters2.js';
+import { d as defineCustomElement$6 } from './custom-popper2.js';
+import { d as defineCustomElement$5 } from './form-control-error-text2.js';
+import { d as defineCustomElement$4 } from './form-control-select2.js';
+import { d as defineCustomElement$3 } from './form-control-tooltip2.js';
+import { d as defineCustomElement$2 } from './pagination-menu2.js';
+
+const MapCheckoutStatusToBadge = (status) => {
+    switch (status) {
+        case 'created':
+            return "<span class='badge bg-primary' title='The checkout has been created'>Created</span>";
+        case 'completed':
+            return "<span class='badge bg-success' title='The checkout has been completed'>Completed</span>";
+        case 'attempted':
+            return "<span class='badge bg-secondary' title='The checkout has been attempted'>Attempted</span>";
+        case 'expired':
+            return "<span class='badge bg-danger' title='The checkout has expired'>Expired</span>";
+    }
+};
+
+const defaultColumnsKeys = 'created_at,payment_amount,payment_description,payment_mode,status';
+const checkoutTableColumns = {
+    created_at: () => (h("th", { part: "table-head-cell", scope: "col", title: "The date each checkout occurred" }, "Processed On")),
+    payment_amount: () => (h("th", { part: "table-head-cell", scope: "col", title: "The dollar amount of each checkout" }, "Payment Amount")),
+    payment_description: () => (h("th", { part: "table-head-cell", scope: "col", title: "The description of each checkout" }, "Payment Description")),
+    sub_account_name: () => (h("th", { part: "table-head-cell", scope: "col", title: "The sub account associated with the checkout" }, "Sub Account")),
+    payment_mode: () => (h("th", { part: "table-head-cell", scope: "col", title: "The payment mode of each checkout" }, "Payment Mode")),
+    status: () => (h("th", { part: "table-head-cell", scope: "col", title: "The current status of each checkout" }, "Status")),
+};
+const checkoutTableCells = {
+    created_at: (value) => (h("th", null,
+        h("div", { class: "fw-bold" },
+            formatDate(value),
+            " "),
+        h("div", { class: "fw-bold" },
+            formatTime(value),
+            " "))),
+    payment_amount: (value) => (h("td", null,
+        formatCurrency(value, true, true),
+        " ")),
+    payment_description: (value) => (h("td", null, value)),
+    sub_account_name: (value) => (h("td", null, value)),
+    payment_mode: (value) => (h("td", null, value)),
+    status: (value) => (h("td", { innerHTML: MapCheckoutStatusToBadge(value) })),
+};
+
+const CheckoutsListCore = /*@__PURE__*/ proxyCustomElement(class CheckoutsListCore extends HTMLElement {
+    constructor() {
+        super();
+        this.__registerHost();
+        this.rowClicked = createEvent(this, "checkout-row-clicked", 7);
+        this.errorEvent = createEvent(this, "error-event", 7);
+        this.handleClickPrevious = (beforeCursor) => {
+            const newParams = Object.assign({}, this.params);
+            delete newParams.after_cursor;
+            this.params = Object.assign(Object.assign({}, newParams), { before_cursor: beforeCursor });
+        };
+        this.handleClickNext = (afterCursor) => {
+            const newParams = Object.assign({}, this.params);
+            delete newParams.before_cursor;
+            this.params = Object.assign(Object.assign({}, newParams), { after_cursor: afterCursor });
+        };
+        this.rowClickHandler = (e) => {
+            const clickedCheckoutID = e.target.closest('tr').dataset.rowEntityId;
+            if (!clickedCheckoutID)
+                return;
+            this.rowClicked.emit(this.checkouts.find((checkout) => checkout.id === clickedCheckoutID));
+        };
+        this.setParamsOnChange = (name, value) => {
+            let newParams = { [name]: value };
+            this.params = onFilterChange(newParams, this.params);
+        };
+        this.clearParams = () => {
+            this.errorMessage = '';
+            this.params = {};
+        };
+        this.getCheckouts = undefined;
+        this.getSubAccounts = undefined;
+        this.columns = defaultColumnsKeys;
+        this.checkouts = [];
+        this.checkoutsTable = new Table([], this.columns, checkoutTableColumns, checkoutTableCells);
+        this.subAccounts = [];
+        this.loading = true;
+        this.errorMessage = undefined;
+        this.paging = pagingDefaults;
+        this.params = {};
+    }
+    updateOnPropChange() {
+        this.fetchCheckouts();
+    }
+    componentWillLoad() {
+        if (this.getCheckouts && this.getSubAccounts) {
+            this.fetchCheckouts();
+        }
+    }
+    fetchCheckouts() {
+        this.loading = true;
+        this.getCheckouts({
+            params: this.params,
+            onSuccess: async ({ checkouts, pagingInfo }) => {
+                this.checkouts = checkouts;
+                this.paging = pagingInfo;
+                this.checkoutsTable = new Table(this.checkouts, this.columns, checkoutTableColumns, checkoutTableCells);
+                const shouldFetchSubAccounts = this.checkoutsTable.columnKeys.includes('sub_account_name');
+                if (shouldFetchSubAccounts) {
+                    await this.fetchSubAccounts();
+                }
+                else {
+                    this.loading = false;
+                }
+            },
+            onError: ({ error, code, severity }) => {
+                this.errorMessage = error;
+                this.errorEvent.emit({
+                    errorCode: code,
+                    message: error,
+                    severity,
+                });
+                this.loading = false;
+            },
+        });
+    }
+    async fetchSubAccounts() {
+        this.getSubAccounts({
+            params: this.subAccountParams,
+            onSuccess: ({ subAccounts }) => {
+                this.subAccounts = subAccounts;
+                this.checkouts = this.checkouts.map((checkout) => {
+                    var _a;
+                    checkout.sub_account_name = (_a = this.subAccounts.find((subAccount) => subAccount.id === checkout.account_id)) === null || _a === void 0 ? void 0 : _a.name;
+                    return checkout;
+                });
+                this.loading = false;
+            },
+            onError: ({ error, code, severity }) => {
+                this.errorMessage = error;
+                this.errorEvent.emit({
+                    errorCode: code,
+                    message: error,
+                    severity,
+                });
+                this.loading = false;
+            },
+        });
+    }
+    get subAccountParams() {
+        let accountIdNumbers = this.checkouts.map((checkout) => checkout.account_id);
+        let uniqueAccountIds = [...new Set(accountIdNumbers)];
+        let accountIdString = uniqueAccountIds.join(',');
+        return { sub_account_id: accountIdString };
+    }
+    get entityId() {
+        return this.checkouts.map((checkout) => checkout.id);
+    }
+    get showEmptyState() {
+        return !this.loading && !this.errorMessage && this.checkoutsTable.rowData.length < 1;
+    }
+    get showErrorState() {
+        return !this.loading && !!this.errorMessage;
+    }
+    get showRowData() {
+        return !this.showEmptyState && !this.showErrorState && !this.loading;
+    }
+    render() {
+        return (h("div", { key: '2734f704620a60a5bedc46e3e41ab758af3fcb33' }, h("checkouts-list-filters", { key: '88ec654a9e15b976c47baee51ebed8c4bd8f11d7', params: this.params, setParamsOnChange: this.setParamsOnChange, clearParams: this.clearParams }), h("div", { key: '929ce2e4dbee2b6aad94705b90b33527ef88f324', class: "table-wrapper" }, h("table", { key: '734d75f3f6d0189ce21560a89e9bc28628188798', class: "table table-hover" }, h("thead", { key: '6b1bba45aaa29b741cf3422902bf1d63cb89fe9a', class: "table-head sticky-top", part: "table-head" }, h("tr", { key: '54f3e19d0d8b1414e9c0df4a6b9cd59516eb0e2e', class: "table-light text-nowrap", part: "table-head-row" }, this.checkoutsTable.columnData.map((column) => column))), h("tbody", { key: '7454d36c6595e8341c0405833a919c56cd09fa3d', class: "table-body", part: "table-body" }, h(TableLoadingState, { key: 'b6fc81a9293727005f0a13afbf518e57efeb8469', columnSpan: this.checkoutsTable.columnKeys.length, isLoading: this.loading }), h(TableEmptyState, { key: 'ce449e05b1c0643f8a2157f44f2f2af16ee08f8c', isEmpty: this.showEmptyState, columnSpan: this.checkoutsTable.columnKeys.length }), h(TableErrorState, { key: '89d0b6d1c4eb966fe0195cfe6e854a7cca10c7ed', columnSpan: this.checkoutsTable.columnKeys.length, errorMessage: this.errorMessage }), this.showRowData && this.checkoutsTable.rowData.map((data, index) => (h("tr", { "data-test-id": "table-row", "data-row-entity-id": this.entityId[index], onClick: this.rowClickHandler, part: `table-row ${index % 2 ? "table-row-even" : "table-row-odd"}` }, data)))), this.paging && (h("tfoot", { key: 'ac6bb6d3cf02abc3f386a7d6bf92927f4a0ad244', class: "sticky-bottom" }, h("tr", { key: '352544ebda3e9a899fcb640b350fd60c55b97d17', class: "table-light align-middle" }, h("td", { key: '2dfc279e5e94bb1c0ea75670eb6584ff39a98f4a', part: "pagination-bar", colSpan: this.checkoutsTable.columnData.length }, h("pagination-menu", { key: 'a8ba0fd21c0dd9be75662b62db78980a74d5fbc6', paging: Object.assign(Object.assign({}, this.paging), { handleClickPrevious: this.handleClickPrevious, handleClickNext: this.handleClickNext }), params: this.params })))))))));
+    }
+    static get watchers() { return {
+        "params": ["updateOnPropChange"],
+        "getCheckouts": ["updateOnPropChange"],
+        "getSubAccounts": ["updateOnPropChange"],
+        "columns": ["updateOnPropChange"]
+    }; }
+}, [0, "checkouts-list-core", {
+        "getCheckouts": [16],
+        "getSubAccounts": [16],
+        "columns": [1],
+        "checkouts": [32],
+        "checkoutsTable": [32],
+        "subAccounts": [32],
+        "loading": [32],
+        "errorMessage": [32],
+        "paging": [32],
+        "params": [32]
+    }, undefined, {
+        "params": ["updateOnPropChange"],
+        "getCheckouts": ["updateOnPropChange"],
+        "getSubAccounts": ["updateOnPropChange"],
+        "columns": ["updateOnPropChange"]
+    }]);
+function defineCustomElement() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["checkouts-list-core", "checkouts-list-filters", "custom-popper", "form-control-error-text", "form-control-select", "form-control-tooltip", "pagination-menu", "table-filters-menu"];
+    components.forEach(tagName => { switch (tagName) {
+        case "checkouts-list-core":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, CheckoutsListCore);
+            }
+            break;
+        case "checkouts-list-filters":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$7();
+            }
+            break;
+        case "custom-popper":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$6();
+            }
+            break;
+        case "form-control-error-text":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$5();
+            }
+            break;
+        case "form-control-select":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$4();
+            }
+            break;
+        case "form-control-tooltip":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$3();
+            }
+            break;
+        case "pagination-menu":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$2();
+            }
+            break;
+        case "table-filters-menu":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$1();
+            }
+            break;
+    } });
+}
+defineCustomElement();
+
+export { CheckoutsListCore as C, defineCustomElement as d };

package/dist/module/checkouts-list-filters.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../types/components";
+
+interface CheckoutsListFilters extends Components.CheckoutsListFilters, HTMLElement {}
+export const CheckoutsListFilters: {
+    prototype: CheckoutsListFilters;
+    new (): CheckoutsListFilters;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

package/dist/module/checkouts-list-filters.js

@@ -0,0 +1,6 @@
+import { C as CheckoutsListFilters$1, d as defineCustomElement$1 } from './checkouts-list-filters2.js';
+
+const CheckoutsListFilters = CheckoutsListFilters$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { CheckoutsListFilters, defineCustomElement };

package/dist/module/checkouts-list-filters2.js

@@ -0,0 +1,80 @@
+import { proxyCustomElement, HTMLElement, h } from '@stencil/core/internal/client';
+import { d as defineCustomElement$5 } from './custom-popper2.js';
+import { d as defineCustomElement$4 } from './form-control-error-text2.js';
+import { d as defineCustomElement$3 } from './form-control-select2.js';
+import { d as defineCustomElement$2 } from './form-control-tooltip2.js';
+import { d as defineCustomElement$1 } from './table-filters-menu2.js';
+
+const CheckoutsListFilters = /*@__PURE__*/ proxyCustomElement(class CheckoutsListFilters extends HTMLElement {
+    constructor() {
+        super();
+        this.__registerHost();
+        this.params = {};
+        this.setParamsOnChange = undefined;
+        this.clearParams = undefined;
+    }
+    get checkoutStatusOptions() {
+        return [
+            { label: 'All', value: '' },
+            { label: 'Created', value: 'created' },
+            { label: 'Completed', value: 'completed' },
+            { label: 'Attempted', value: 'attempted' },
+            { label: 'Expired', value: 'expired' },
+        ];
+    }
+    get checkoutPaymentModeOptions() {
+        return [
+            { label: 'All', value: '' },
+            { label: 'E-commerce', value: 'ecom' },
+            { label: 'BNPL', value: 'bnpl' },
+        ];
+    }
+    render() {
+        return (h("table-filters-menu", { key: '9bbefced0a75175612e10d18a2399c2fba54a541', params: this.params, clearParams: this.clearParams }, h("div", { key: 'c9788ad56827b8a3d4452da28678d56b0b7db11c', class: "grid-cols-2 gap-3 p-1" }, h("div", { key: '4f4eefcdecb67f6fa58f7daa5044bae0e0df5f6c', class: "p-2" }, h("form-control-select", { key: 'cb3d3801b90102e330a96a0454074b5374f15326', name: "status", label: "Status", options: this.checkoutStatusOptions, inputHandler: this.setParamsOnChange, defaultValue: this.params.status || '' })), h("div", { key: 'b43631eb9021c8d496551d359440696686a3a50b', class: "p-2" }, h("form-control-select", { key: '7f2a33df18fb3d48dba2ad726a96d9107cca2bf3', name: "payment_mode", label: "Payment Mode", options: this.checkoutPaymentModeOptions, inputHandler: this.setParamsOnChange, defaultValue: this.params.payment_mode || '' })))));
+    }
+}, [0, "checkouts-list-filters", {
+        "params": [16],
+        "setParamsOnChange": [16],
+        "clearParams": [16]
+    }]);
+function defineCustomElement() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["checkouts-list-filters", "custom-popper", "form-control-error-text", "form-control-select", "form-control-tooltip", "table-filters-menu"];
+    components.forEach(tagName => { switch (tagName) {
+        case "checkouts-list-filters":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, CheckoutsListFilters);
+            }
+            break;
+        case "custom-popper":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$5();
+            }
+            break;
+        case "form-control-error-text":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$4();
+            }
+            break;
+        case "form-control-select":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$3();
+            }
+            break;
+        case "form-control-tooltip":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$2();
+            }
+            break;
+        case "table-filters-menu":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$1();
+            }
+            break;
+    } });
+}
+defineCustomElement();
+
+export { CheckoutsListFilters as C, defineCustomElement as d };

package/dist/module/counter-dispute.js

@@ -0,0 +1,189 @@
+import { proxyCustomElement, HTMLElement, createEvent, h } from '@stencil/core/internal/client';
+import { d as defineCustomElement$i } from './custom-popper2.js';
+import { d as defineCustomElement$h } from './form-control-date2.js';
+import { d as defineCustomElement$g } from './form-control-error-text2.js';
+import { d as defineCustomElement$f } from './form-control-file2.js';
+import { d as defineCustomElement$e } from './form-control-help-text2.js';
+import { d as defineCustomElement$d } from './form-control-radio2.js';
+import { d as defineCustomElement$c } from './form-control-text2.js';
+import { d as defineCustomElement$b } from './form-control-textarea2.js';
+import { d as defineCustomElement$a } from './form-control-tooltip2.js';
+import { d as defineCustomElement$9 } from './additional-statement.js';
+import { d as defineCustomElement$8 } from './cancellation-policy.js';
+import { d as defineCustomElement$7 } from './customer-details.js';
+import { d as defineCustomElement$6 } from './dispute-reason.js';
+import { d as defineCustomElement$5 } from './duplicate-charge.js';
+import { d as defineCustomElement$4 } from './electronic-evidence.js';
+import { d as defineCustomElement$3 } from './product-or-service.js';
+import { d as defineCustomElement$2 } from './refund-policy.js';
+import { d as defineCustomElement$1 } from './shipping-details.js';
+
+var DisputeManagementClickEvents;
+(function (DisputeManagementClickEvents) {
+    DisputeManagementClickEvents["nextStep"] = "nextStep";
+    DisputeManagementClickEvents["previousStep"] = "previousStep";
+    DisputeManagementClickEvents["cancelDispute"] = "cancelDispute";
+    DisputeManagementClickEvents["counterDispute"] = "counterDispute";
+    DisputeManagementClickEvents["submit"] = "submit";
+})(DisputeManagementClickEvents || (DisputeManagementClickEvents = {}));
+
+const CounterDispute = /*@__PURE__*/ proxyCustomElement(class CounterDispute extends HTMLElement {
+    constructor() {
+        super();
+        this.__registerHost();
+        this.submit = createEvent(this, "submit", 7);
+        this.clickEvent = createEvent(this, "clickEvent", 7);
+        this.componentStepMapping = [
+            () => h("justifi-dispute-reason", { ref: (el) => this.refs['disputeReason'] = el }),
+            () => h("justifi-product-or-service", { ref: (el) => this.refs['productOrService'] = el }),
+            () => h("justifi-customer-details", { ref: (el) => this.refs['customerDetails'] = el }),
+            () => h("justifi-cancellation-policy", { ref: (el) => this.refs['cancellationPolicy'] = el }),
+            () => h("justifi-refund-policy", { ref: (el) => this.refs['refundPolicy'] = el }),
+            () => h("justifi-duplicate-charge", { ref: (el) => this.refs['duplicateCharge'] = el }),
+            () => h("justifi-electronic-evidence", { ref: (el) => this.refs['electronicEvidence'] = el }),
+            () => h("justifi-shipping-details", { ref: (el) => this.refs['shippingDetails'] = el }),
+            () => h("justifi-additional-statement", { ref: (el) => this.refs['additionalStatement'] = el }),
+        ];
+        this.currentStep = 0;
+        this.refs = [];
+    }
+    get currentStepComponent() {
+        return this.componentStepMapping[this.currentStep]();
+    }
+    get isLastStep() {
+        return this.currentStep === this.componentStepMapping.length - 1;
+    }
+    get isFirstStep() {
+        return this.currentStep === 0;
+    }
+    onNext() {
+        if (this.isLastStep) {
+            this.submit.emit();
+        }
+        else {
+            this.currentStep++;
+            this.clickEvent.emit({ name: DisputeManagementClickEvents.nextStep });
+        }
+    }
+    onBack() {
+        if (this.isFirstStep) {
+            this.clickEvent.emit({ name: DisputeManagementClickEvents.cancelDispute });
+        }
+        else {
+            this.currentStep--;
+            this.clickEvent.emit({ name: DisputeManagementClickEvents.previousStep });
+        }
+    }
+    render() {
+        return (h("div", { key: 'cd8ced72339631d8f2f9439ee26f1187b7b8ab21', class: "row gy-3" }, h("div", { key: '6ae94b1ce9d12b12044c4baa3c3eb9966b4b176e', class: "col-12" }, h("h1", { key: '6893f2dacb6e8932e67d67095076cd2d1bc12b38', class: "h4" }, "Counter dispute")), h("div", { key: '6d34423a06c634824a8b2f2ad5538e4c0b6fbf5c', class: "col-12" }, this.currentStepComponent), h("div", { key: 'fdfc725f0dacae3abb56dfe7300399f57300ffd5', class: "col-12" }, h("div", { key: 'b590b19dda4fbe8d8245dedbb66c421866b2b8f3', class: "d-flex gap-2 mt-4 justify-content-end" }, h("button", { key: '4d91e8db6f5c2ef26ac938c57f7dca33cf9a33ee', class: "btn btn-secondary", onClick: () => this.onBack() }, this.isFirstStep ? 'Cancel' : 'Back'), h("button", { key: 'f56fa57dd1aef4bd5b537d9e67c3aaaa784ccba2', class: "btn btn-primary", onClick: () => this.onNext() }, this.isLastStep ? 'Submit Counter Dispute' : 'Next')))));
+    }
+}, [0, "justifi-counter-dispute", {
+        "currentStep": [32],
+        "refs": [32]
+    }]);
+function defineCustomElement() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["justifi-counter-dispute", "custom-popper", "form-control-date", "form-control-error-text", "form-control-file", "form-control-help-text", "form-control-radio", "form-control-text", "form-control-textarea", "form-control-tooltip", "justifi-additional-statement", "justifi-cancellation-policy", "justifi-customer-details", "justifi-dispute-reason", "justifi-duplicate-charge", "justifi-electronic-evidence", "justifi-product-or-service", "justifi-refund-policy", "justifi-shipping-details"];
+    components.forEach(tagName => { switch (tagName) {
+        case "justifi-counter-dispute":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, CounterDispute);
+            }
+            break;
+        case "custom-popper":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$i();
+            }
+            break;
+        case "form-control-date":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$h();
+            }
+            break;
+        case "form-control-error-text":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$g();
+            }
+            break;
+        case "form-control-file":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$f();
+            }
+            break;
+        case "form-control-help-text":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$e();
+            }
+            break;
+        case "form-control-radio":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$d();
+            }
+            break;
+        case "form-control-text":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$c();
+            }
+            break;
+        case "form-control-textarea":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$b();
+            }
+            break;
+        case "form-control-tooltip":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$a();
+            }
+            break;
+        case "justifi-additional-statement":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$9();
+            }
+            break;
+        case "justifi-cancellation-policy":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$8();
+            }
+            break;
+        case "justifi-customer-details":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$7();
+            }
+            break;
+        case "justifi-dispute-reason":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$6();
+            }
+            break;
+        case "justifi-duplicate-charge":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$5();
+            }
+            break;
+        case "justifi-electronic-evidence":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$4();
+            }
+            break;
+        case "justifi-product-or-service":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$3();
+            }
+            break;
+        case "justifi-refund-policy":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$2();
+            }
+            break;
+        case "justifi-shipping-details":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$1();
+            }
+            break;
+    } });
+}
+defineCustomElement();
+
+export { CounterDispute as C, DisputeManagementClickEvents as D, defineCustomElement as d };

package/dist/module/custom-popper2.js

@@ -1876,7 +1876,7 @@ const CustomPopper = /*@__PURE__*/ proxyCustomElement(class CustomPopper extends
         this.hideEvent.emit();
     }
     render() {
-        return (h("div", { key: 'ff19898ad40884372621978edd5a44aa4b0a3b53' }, h("style", { key: '9d1c65abf4971046c219312792d9836656dda63a' }, `
+        return (h("div", { key: '8a37af79ca05c760a65fde19686d0c2e796fbb0b' }, h("style", { key: '9a92807c0d688d1ddc86f05bcc39e34f1da2a939' }, `
           .popper-content {
             display: none;
           }
@@ -1884,7 +1884,7 @@ const CustomPopper = /*@__PURE__*/ proxyCustomElement(class CustomPopper extends
             display: block;
             z-index: 1030;
           }
-          `), h("div", { key: '50d1dabe33b1b0a3d9c82e8fb68e2aef1e81e549', class: "popper-content", ref: (el) => this.popperContentRef = el }, h("slot", { key: '1d1eae013b2e61dd8285c014f388d2c2d68406c5' }))));
+          `), h("div", { key: 'fc9582fdc9d0b2e0ad115daad752796cd2bc4067', class: "popper-content", ref: (el) => this.popperContentRef = el }, h("slot", { key: '79ecc806af9caa4450969cd4b84868b59aa3f55b' }))));
     }
 }, [4, "custom-popper", {
         "placement": [1],

package/dist/module/customer-details.js

@@ -0,0 +1,69 @@
+import { proxyCustomElement, HTMLElement, h } from '@stencil/core/internal/client';
+import { d as defineCustomElement$7 } from './custom-popper2.js';
+import { d as defineCustomElement$6 } from './form-control-error-text2.js';
+import { d as defineCustomElement$5 } from './form-control-file2.js';
+import { d as defineCustomElement$4 } from './form-control-help-text2.js';
+import { d as defineCustomElement$3 } from './form-control-text2.js';
+import { d as defineCustomElement$2 } from './form-control-textarea2.js';
+import { d as defineCustomElement$1 } from './form-control-tooltip2.js';
+
+const CustomerDetails = /*@__PURE__*/ proxyCustomElement(class CustomerDetails extends HTMLElement {
+    constructor() {
+        super();
+        this.__registerHost();
+    }
+    render() {
+        return (h("div", { key: '4511521cc0b5d152847fe47515a932bc25632b69' }, h("div", { key: 'ccc20447c74727d926159c4bbd78d7aa81f406fb', class: "row gy-3" }, h("div", { key: '09d693c977d9f55978df56fd94f37e65fcf42548', class: "col-12" }, h("h2", { key: 'ef47704c5d35b7b18e49603e050a1128728219b4', class: "h5" }, "Customer Details")), h("div", { key: '0f6ee829c192d15b22208d207ab34d7c433b1c8d', class: "col-12" }, h("form-control-text", { key: '8f64ca680c0dcd4b41d93523a62e0b3bbf1daf3e', label: "Full Name", name: "customer_name" })), h("div", { key: '8789d52f77c2cb673260fa12382c31725e2a7ffa', class: "col-12" }, h("form-control-text", { key: 'af48dedd7c9ce318a7d1009c1227cceda2d799b0', label: "Email", name: "customer_email_address" })), h("div", { key: '17fdeea69f9eab82e55d63cd55af079532696d57', class: "col-12" }, h("form-control-textarea", { key: '05d930b272e0162100412bc81a05df8cd2817e21', label: "Billing Address", name: "customer_billing_address" })), h("div", { key: 'abd6e1f661bfb2b5ac54460d97283b7a1092ac79', class: "col-12" }, h("form-control-file", { key: '4ee87cf74482c31a297bcd108ddd0ad69f3d7366', label: "Customer Signature", name: "customer_signature" })), h("div", { key: 'f33ec1c7c4791828d456e27ee1dcbc665220821d', class: "col-12" }, h("form-control-file", { key: 'c2bb6a3c58eb20652566d9cb1c524b4390bbab33', label: "Customer Communication", name: "customer_communication" })))));
+    }
+}, [0, "justifi-customer-details"]);
+function defineCustomElement() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["justifi-customer-details", "custom-popper", "form-control-error-text", "form-control-file", "form-control-help-text", "form-control-text", "form-control-textarea", "form-control-tooltip"];
+    components.forEach(tagName => { switch (tagName) {
+        case "justifi-customer-details":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, CustomerDetails);
+            }
+            break;
+        case "custom-popper":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$7();
+            }
+            break;
+        case "form-control-error-text":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$6();
+            }
+            break;
+        case "form-control-file":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$5();
+            }
+            break;
+        case "form-control-help-text":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$4();
+            }
+            break;
+        case "form-control-text":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$3();
+            }
+            break;
+        case "form-control-textarea":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$2();
+            }
+            break;
+        case "form-control-tooltip":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$1();
+            }
+            break;
+    } });
+}
+defineCustomElement();
+
+export { CustomerDetails as C, defineCustomElement as d };

package/dist/module/details.js

@@ -10,7 +10,7 @@ const Details = /*@__PURE__*/ proxyCustomElement(class Details extends HTMLEleme
         this.errorMessage = undefined;
     }
     render() {
-        return (h(StyledHost, { key: '00b10fc4e459688ae06147ef1535f03609ec35e4', exportParts: 'detail-empty-state, detail-metadata-title, detail-metadata, detail-section, detail-section-title, \n        detail-section-item-title, detail-section-item-data, detail-head, detail-title, detail-head-info' }, this.errorMessage ?
+        return (h(StyledHost, { key: 'c7c725936e4987ca76781b7edc73f1b67e00f21a', exportParts: 'detail-empty-state, detail-metadata-title, detail-metadata, detail-section, detail-section-title, \n        detail-section-item-title, detail-section-item-data, detail-head, detail-title, detail-head-info' }, this.errorMessage ?
             ErrorState(this.errorMessage)
             :
                 h("main", { class: "p-2" }, h("slot", { name: "head-info" }), h("slot", { name: 'detail-sections' }))));