@justifi/webcomponents 5.7.6 → 6.0.0-rc.1

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

@@ -1,8 +1,9 @@
-import { h, Host } from "@stencil/core";
-import { postalOnlySchema } from "./billing-form-schema";
+import { h } from "@stencil/core";
+import { postalOnlySchema } from "../../checkout/billing-form/billing-form-schema";
 import { billingForm } from "../../../styles/parts";
 import { numberOnlyHandler } from "../../../ui-components/form/utils";
 import { FormController } from "../../../ui-components/form/form";
+import { StyledHost } from "../../../ui-components";
 export class CardBillingFormSimple {
     constructor() {
         this.errors = {};
@@ -32,9 +33,10 @@ export class CardBillingFormSimple {
     }
     render() {
         const billingFormDefaultValue = this.formController.getInitialValues();
-        return (h(Host, { key: '579768ec89e37b775a2406ba687a9a18e1c1fb44' }, h("div", { key: '5a98c4adf327f5e09421fbbd78c9f13f031579c6', part: billingForm, class: "mt-4" }, h("form", { key: '4e2b9e9b3ae5d15f6705e418edb2307ec28e19f2' }, h("fieldset", { key: 'baa9735b69a185a229a6db3fa9ddc3adb02a8748' }, this.legend && (h("legend", { key: '65320d5245a39d67aa9389e54ef02fa87bea9bb8' }, this.legend)), h("div", { key: '1e8b4f9de1d6b0f24bb6ef3c8b282f34bf16c04c', class: "row gy-3" }, h("div", { key: '75fb250b91a586982c9a80fc544c2685cfb2f0e1', class: "col-12" }, h("form-control-text", { key: 'db2be476b7f49596faf8a93f40501d89aae3d84f', name: 'address_postal_code', label: "ZIP", defaultValue: billingFormDefaultValue.address_postal_code, errorText: this.errors.address_postal_code, inputHandler: this.inputHandler, maxLength: 5, keyDownHandler: numberOnlyHandler }))))))));
+        return (h(StyledHost, { key: 'a88ea2aa0b1cc2fccda7c169aad9c061e106ecfe' }, h("div", { key: '414df056d92819bf646886ca8e15f2ed10e6ab18', part: billingForm }, h("form", { key: 'c11f6eb5c7c5c1ecbeb8cc8f644a3b3ba72254c7' }, h("fieldset", { key: 'dd69c65ff7f36da3954c01ca2401e8ede6799f14' }, this.legend && (h("legend", { key: '25a86a61452b84237cc58c047916de22c35b764d' }, this.legend)), h("div", { key: '2fa8445fcf4ac0500f357d92480f18ccac655689', class: "row gy-3" }, h("div", { key: 'b7ac75fcab43435a03ad919757541f74661ce5b4', class: "col-12" }, h("form-control-text", { key: 'fd9e84c9605edf1a987c7243409eb0182f79a803', name: 'address_postal_code', label: "ZIP", defaultValue: billingFormDefaultValue.address_postal_code, errorText: this.errors.address_postal_code, inputHandler: this.inputHandler, maxLength: 5, keyDownHandler: numberOnlyHandler }))))))));
     }
     static get is() { return "justifi-card-billing-form-simple"; }
+    static get encapsulation() { return "shadow"; }
     static get properties() {
         return {
             "legend": {
@@ -78,7 +80,7 @@ export class CardBillingFormSimple {
                         },
                         "BillingFormFields": {
                             "location": "import",
-                            "path": "./billing-form-schema",
+                            "path": "../../checkout/billing-form/billing-form-schema",
                             "id": "src/components/checkout/billing-form/billing-form-schema.ts::BillingFormFields"
                         }
                     },
@@ -104,7 +106,7 @@ export class CardBillingFormSimple {
                         },
                         "BillingFormFields": {
                             "location": "import",
-                            "path": "./billing-form-schema",
+                            "path": "../../checkout/billing-form/billing-form-schema",
                             "id": "src/components/checkout/billing-form/billing-form-schema.ts::BillingFormFields"
                         }
                     },

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

@@ -0,0 +1,10 @@
+import { h } from "@stencil/core";
+import { Skeleton } from "../../../ui-components";
+const CardFormSkeleton = (props) => {
+    const { isReady } = props;
+    if (isReady) {
+        return null;
+    }
+    return (h("div", { class: "container-fluid p-0" }, h("div", { class: "mb-3" }, h(Skeleton, { height: "18px", width: "100px" }), h(Skeleton, { height: "36px" })), h("div", { class: "row" }, h("div", { class: "col-4 align-content-end" }, h(Skeleton, { height: "18px", width: "80px" }), h(Skeleton, { height: "36px" })), h("div", { class: "col-4 align-content-end" }, h(Skeleton, { height: "36px" })), h("div", { class: "col-4 align-content-end" }, h(Skeleton, { height: "18px", width: "30px" }), h(Skeleton, { height: "36px" })))));
+};
+export default CardFormSkeleton;

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

@@ -0,0 +1,102 @@
+import { h } from "@stencil/core";
+import CardFormSkeleton from "./card-form-skeleton";
+import { StyledHost } from "../../../ui-components";
+import JustifiAnalytics from "../../../api/Analytics";
+import { checkPkgVersion } from "../../../utils/check-pkg-version";
+import { configState, waitForConfig } from "../../config-provider/config-state";
+export class JustifiCardForm {
+    constructor() {
+        this.isReady = false;
+    }
+    async componentWillLoad() {
+        await waitForConfig();
+        this.iframeOrigin = configState.iframeOrigin;
+        checkPkgVersion();
+        this.analytics = new JustifiAnalytics(this);
+    }
+    componentDidRender() {
+        const elements = [
+            this.cardNumberIframeElement,
+            this.expirationMonthIframeElement,
+            this.expirationYearIframeElement,
+            this.cvvIframeElement,
+        ];
+        Promise.all(elements.map((element) => {
+            return new Promise((resolve) => {
+                element.addEventListener('iframeLoaded', () => { resolve(); });
+            });
+        })).then(() => {
+            this.isReady = true;
+        });
+    }
+    disconnectedCallback() {
+        var _a;
+        (_a = this.analytics) === null || _a === void 0 ? void 0 : _a.cleanup();
+    }
+    async validate() {
+        const cardNumberIsValid = await this.cardNumberIframeElement.validate();
+        const expirationMonthIsValid = await this.expirationMonthIframeElement.validate();
+        const expirationYearIsValid = await this.expirationYearIframeElement.validate();
+        const cvvIsValid = await this.cvvIframeElement.validate();
+        return cardNumberIsValid && expirationMonthIsValid && expirationYearIsValid && cvvIsValid;
+    }
+    async tokenize({ clientId, paymentMethodMetadata, account, }) {
+        return this.cardNumberIframeElement.tokenize(clientId, paymentMethodMetadata, account);
+    }
+    render() {
+        return (h(StyledHost, { key: 'a53db7e555c2a1df6679bf9ddeada18d9e750a3d' }, h(CardFormSkeleton, { key: '70eda1f05670b09bdb6a5f9f506f5828fec0cd71', isReady: this.isReady }), h("hidden-input", { key: '648480344a5a79e79d8396cdcc402f63f40b2b18' }), h("div", { key: 'd7bcf16f905367429ddf4be468d12f603135affa', class: "container-fluid p-0", style: {
+                opacity: this.isReady ? '1' : '0',
+                height: this.isReady ? 'auto' : '0',
+            } }, h("div", { key: '9860508b6a16ae4a37d96c3d259237ccd17b28f1', class: "mb-3" }, h("iframe-input", { key: 'c37ec02e0b2f8465c4118892f0b51faaf9a57cdf', inputId: "cardNumber", ref: (el) => (this.cardNumberIframeElement = el), label: "Card Number", iframeOrigin: `${this.iframeOrigin}/v2/cardNumber` })), h("div", { key: '097258a271969ef38a1d32a5aa0b20c5443de991', class: "row" }, h("div", { key: 'ad2b656c503abd6aca2eea0842a70358097c452e', class: "col-4 align-content-end" }, h("iframe-input", { key: '3e3fda000e1ea41e44a337a1efd886ce7d9503f7', inputId: "expirationMonth", ref: (el) => (this.expirationMonthIframeElement = el), label: "Expiration", iframeOrigin: `${this.iframeOrigin}/v2/expirationMonth` })), h("div", { key: '13f33bd008ad4c6407336775d35b752c0e6eb8e5', class: "col-4 align-content-end" }, h("iframe-input", { key: '3dcf445381f39544a1421569151c76c47e790456', inputId: "expirationYear", ref: (el) => (this.expirationYearIframeElement = el), label: "", iframeOrigin: `${this.iframeOrigin}/v2/expirationYear` })), h("div", { key: 'fbc26d74b4e18b7a77639d8b53720ca4e7bdd201', class: "col-4 align-content-end" }, h("iframe-input", { key: '400c65fa8efb358396e561b3ba2a5ac13c3bcbbe', inputId: "CVV", ref: (el) => (this.cvvIframeElement = el), label: "CVV", iframeOrigin: `${this.iframeOrigin}/v2/CVV` }))))));
+    }
+    static get is() { return "justifi-card-form"; }
+    static get encapsulation() { return "shadow"; }
+    static get states() {
+        return {
+            "isReady": {},
+            "iframeOrigin": {}
+        };
+    }
+    static get methods() {
+        return {
+            "validate": {
+                "complexType": {
+                    "signature": "() => Promise<any>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<any>"
+                },
+                "docs": {
+                    "text": "",
+                    "tags": []
+                }
+            },
+            "tokenize": {
+                "complexType": {
+                    "signature": "({ clientId, paymentMethodMetadata, account, }: { clientId: string; paymentMethodMetadata: any; account?: string; }) => Promise<any>",
+                    "parameters": [{
+                            "name": "__0",
+                            "type": "{ clientId: string; paymentMethodMetadata: any; account?: string; }",
+                            "docs": ""
+                        }],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<any>"
+                },
+                "docs": {
+                    "text": "",
+                    "tags": []
+                }
+            }
+        };
+    }
+}

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

@@ -0,0 +1,113 @@
+import { h } from "@stencil/core";
+import { radioListItem } from "../../../styles/parts";
+import { StyledHost } from "../../../ui-components";
+export class PaymentMethodOption {
+    render() {
+        return (h(StyledHost, { key: '8055addaf7563d5deb7d9b31794bf36e1d273a0d', class: "payment-method" }, h("div", { key: '5fb85a3e5c94eff4e397ba5b23d3fb7a34e4c312', class: "radio-list-item p-3", part: radioListItem, onClick: this.clickHandler, hidden: this.radioButtonHidden }, h("form-control-radio", { key: 'b36c23bb6eeee3fc7325ea6d9b46aed4fc43c21c', name: "paymentMethodType", value: this.paymentMethodOptionId, checked: this.isSelected, label: this.label }))));
+    }
+    static get is() { return "payment-method-option"; }
+    static get encapsulation() { return "shadow"; }
+    static get properties() {
+        return {
+            "paymentMethodOptionId": {
+                "type": "string",
+                "attribute": "payment-method-option-id",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false
+            },
+            "isSelected": {
+                "type": "boolean",
+                "attribute": "is-selected",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false
+            },
+            "clickHandler": {
+                "type": "unknown",
+                "attribute": "click-handler",
+                "mutable": false,
+                "complexType": {
+                    "original": "(event: MouseEvent) => void",
+                    "resolved": "(event: MouseEvent) => void",
+                    "references": {
+                        "MouseEvent": {
+                            "location": "global",
+                            "id": "global::MouseEvent"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false
+            },
+            "radioButtonHidden": {
+                "type": "boolean",
+                "attribute": "radio-button-hidden",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false
+            },
+            "label": {
+                "type": "string",
+                "attribute": "label",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false
+            }
+        };
+    }
+}

package/dist/collection/components/modular-checkout/sub-components/saved-payment-methods.js

@@ -0,0 +1,40 @@
+import { h } from "@stencil/core";
+import { StyledHost } from "../../../ui-components";
+import { checkoutStore } from "../../../store/checkout.store";
+import { radioListItem } from "../../../styles/parts";
+import { CardBrandLabels } from "../../checkout/payment-method-option-utils";
+export class SavedPaymentMethods {
+    constructor() {
+        this.onPaymentMethodOptionClick = (paymentMethodId) => (e) => {
+            e.preventDefault();
+            checkoutStore.selectedPaymentMethod = paymentMethodId;
+        };
+        this.isAllowedPaymentMethod = (paymentMethod) => {
+            if (paymentMethod.type === 'card' && checkoutStore.disableCreditCard) {
+                return false;
+            }
+            if (paymentMethod.type === 'bank_account' && checkoutStore.disableBankAccount) {
+                return false;
+            }
+            return true;
+        };
+    }
+    componentWillLoad() {
+        if (!checkoutStore.paymentMethods.length) {
+            console.warn('No saved payment methods available.');
+        }
+        if (checkoutStore.disablePaymentMethodGroup) {
+            console.warn('Payment method group is disabled.');
+        }
+    }
+    render() {
+        if (checkoutStore.disablePaymentMethodGroup) {
+            return null;
+        }
+        return (h(StyledHost, null, h("div", { class: "saved-payment-methods" }, checkoutStore.paymentMethods.length ? checkoutStore.paymentMethods
+            .filter(this.isAllowedPaymentMethod)
+            .map((paymentMethod) => (h("div", { class: "radio-list-item p-3", part: radioListItem, onClick: this.onPaymentMethodOptionClick(paymentMethod === null || paymentMethod === void 0 ? void 0 : paymentMethod.id) }, h("form-control-radio", { name: "paymentMethodType", value: paymentMethod === null || paymentMethod === void 0 ? void 0 : paymentMethod.id, checked: checkoutStore.selectedPaymentMethod === (paymentMethod === null || paymentMethod === void 0 ? void 0 : paymentMethod.id), label: `${CardBrandLabels[paymentMethod === null || paymentMethod === void 0 ? void 0 : paymentMethod.brand] || ''} *${paymentMethod === null || paymentMethod === void 0 ? void 0 : paymentMethod.acct_last_four}` })))) : null)));
+    }
+    static get is() { return "justifi-saved-payment-methods"; }
+    static get encapsulation() { return "shadow"; }
+}

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

@@ -0,0 +1,127 @@
+import { h } from "@stencil/core";
+import { formatCurrency } from "../../../utils/utils";
+import { radioListItem } from "../../../styles/parts";
+import { checkoutStore } from "../../../store/checkout.store";
+import { StyledHost } from "../../../ui-components";
+const sezzleLogo = (h("img", { class: "sezzle-smart-button-logo-img", src: "https://media.sezzle.com/branding/2.0/Sezzle_Logo_FullColor.svg", alt: "Sezzle", style: {
+        display: 'inline',
+        width: '80px',
+        marginLeft: '5px',
+        marginTop: '-5px',
+    } }));
+export class SezzlePaymentMethod {
+    constructor() {
+        this.paymentMethodOptionId = 'sezzle';
+        this.onPaymentMethodOptionClick = (e) => {
+            e.preventDefault();
+            checkoutStore.selectedPaymentMethod = this.paymentMethodOptionId;
+            this.paymentMethodOptionSelected.emit(this.paymentMethodOptionId);
+        };
+        this.initializeSezzleCheckout = () => {
+            let resolveSezzlePromise;
+            this.sezzlePromise = new Promise((resolve) => { resolveSezzlePromise = resolve; });
+            const amount = Number(checkoutStore.paymentAmount);
+            const Checkout = window.Checkout;
+            const checkout = new Checkout({
+                mode: 'popup',
+                publicKey: checkoutStore.bnplProviderClientId,
+                apiMode: checkoutStore.bnplProviderMode,
+                apiVersion: checkoutStore.bnplProviderApiVersion,
+            });
+            checkout.sezzleButtonElement = this.sezzleButtonRef;
+            checkout.init({
+                onClick: function (event) {
+                    event.preventDefault();
+                    checkout.startCheckout({
+                        checkout_url: checkoutStore.bnplProviderCheckoutUrl,
+                    });
+                },
+                onComplete: (event) => resolveSezzlePromise({ bnpl: event.data }),
+                onCancel: (event) => resolveSezzlePromise({ bnpl: event.data }),
+                onFailure: (event) => resolveSezzlePromise({ bnpl: event.data }),
+            });
+            this.sezzleCheckout = checkout;
+            this.installmentPlan = this.sezzleCheckout.getInstallmentPlan(amount);
+        };
+    }
+    componentDidRender() {
+        if (!this.scriptRef)
+            return;
+        this.scriptRef.onload = () => {
+            this.sezzleButtonRef = document.createElement('button');
+            this.initializeSezzleCheckout();
+        };
+    }
+    async resolvePaymentMethod(insuranceValidation) {
+        if (!insuranceValidation.isValid) {
+            return { validationError: true };
+        }
+        this.sezzleButtonRef.click();
+        return this.sezzlePromise;
+    }
+    render() {
+        var _a, _b;
+        if (!checkoutStore.bnplEnabled || checkoutStore.disableBnpl) {
+            console.warn('justifi-sezzle-payment-method: BNPL is not enabled for this account.');
+            return null;
+        }
+        return (h(StyledHost, { class: "payment-method" }, h("script", { src: "https://checkout-sdk.sezzle.com/checkout.min.js", async: true, ref: (el) => (this.scriptRef = el) }), h("div", { class: "radio-list-item p-3", part: radioListItem, onClick: this.onPaymentMethodOptionClick }, h("form-control-radio", { name: "paymentMethodType", value: this.paymentMethodOptionId, checked: checkoutStore.selectedPaymentMethod === this.paymentMethodOptionId, label: h("div", null, h("div", null, "Buy now, pay later with ", sezzleLogo), this.installmentPlan && (h("small", null, h("span", null, (_a = this.installmentPlan) === null || _a === void 0 ? void 0 : _a.installments.length), "\u00A0", h("span", null, this.installmentPlan.schedule, " payments of"), "\u00A0", h("span", { class: "fw-bold" }, formatCurrency((_b = this.installmentPlan) === null || _b === void 0 ? void 0 : _b.installments[0].amountInCents))))) }))));
+    }
+    static get is() { return "justifi-sezzle-payment-method"; }
+    static get encapsulation() { return "shadow"; }
+    static get states() {
+        return {
+            "installmentPlan": {},
+            "sezzleCheckout": {},
+            "sezzlePromise": {}
+        };
+    }
+    static get events() {
+        return [{
+                "method": "paymentMethodOptionSelected",
+                "name": "paymentMethodOptionSelected",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "any",
+                    "resolved": "any",
+                    "references": {}
+                }
+            }];
+    }
+    static get methods() {
+        return {
+            "resolvePaymentMethod": {
+                "complexType": {
+                    "signature": "(insuranceValidation: any) => Promise<PaymentMethodPayload>",
+                    "parameters": [{
+                            "name": "insuranceValidation",
+                            "type": "any",
+                            "docs": ""
+                        }],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        },
+                        "PaymentMethodPayload": {
+                            "location": "import",
+                            "path": "../../checkout/payment-method-payload",
+                            "id": "src/components/checkout/payment-method-payload.ts::PaymentMethodPayload"
+                        }
+                    },
+                    "return": "Promise<PaymentMethodPayload>"
+                },
+                "docs": {
+                    "text": "",
+                    "tags": []
+                }
+            }
+        };
+    }
+}

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

@@ -0,0 +1,12 @@
+import { h } from "@stencil/core";
+import { text } from "../../../styles/parts";
+import { formatCurrency } from "../../../utils/utils";
+import { checkoutStore } from "../../../store/checkout.store";
+import { StyledHost } from "../../../ui-components";
+export class Summary {
+    render() {
+        return (h(StyledHost, { key: 'fccb819d66329424af42e9c53effec29a6c9784d' }, h("section", { key: '0ee7a4e0579f7f222a9db82e6b4db6bb92542d9e' }, h("div", { key: 'bdf74b2bc5db35b96ca75d50783b790bb482a76e' }, h("div", { key: '851b481bd6beb1fcaadc106d27d131f8b07d1c9a', part: text }, checkoutStore === null || checkoutStore === void 0 ? void 0 : checkoutStore.paymentDescription), h("div", { key: '0b261bc0e2d65cf989778e02df51b3265816f7aa' }, h("span", { key: '0eee0017ddf25ae45d6b5c828071098f45e6e19d', part: text }, "Total"), "\u00A0", h("span", { key: 'd21576f14c3437f70a4b85b9dfc01107392d663a', part: text }, formatCurrency(+(checkoutStore === null || checkoutStore === void 0 ? void 0 : checkoutStore.totalAmount))))))));
+    }
+    static get is() { return "justifi-checkout-summary"; }
+    static get encapsulation() { return "shadow"; }
+}

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

@@ -126,7 +126,7 @@ export class OrderTerminals {
         return (h("div", { class: "mt-3" }, h("div", { class: "text-end" }, "Order limit: ", this.orderLimit), h("div", { class: "d-flex justify-content-end mt-3" }, h("button", { class: "btn btn-primary submit-btn", onClick: this.submitOrder.bind(this), disabled: this.order.totalQuantity === 0 || this.submitting, part: buttonPrimary }, this.submitting ? 'Submitting...' : this.submitButtonText))));
     }
     render() {
-        return (h(StyledHost, { key: '80b0b2a922c06952333adf7c8190b0c2b59f6fd4' }, h("div", { key: '43b5b4d155e53e55b71483d31203dc6dacec1ae4', part: text }, this.renderLoading(), this.renderBusinessDetails(), this.renderTerminals(), this.renderOrderSection())));
+        return (h(StyledHost, { key: '5171ddb7b807bf4084f0f831002803a4ece698f3' }, h("div", { key: '529adf4549be8b2723fca357be3f541403dfc8a3', part: text }, this.renderLoading(), this.renderBusinessDetails(), this.renderTerminals(), this.renderOrderSection())));
     }
     static get is() { return "justifi-order-terminals"; }
     static get encapsulation() { return "shadow"; }

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

@@ -18,7 +18,7 @@ export class TerminalQuantitySelector {
         };
     }
     render() {
-        return (h("div", { key: '347cc119dae6013a0110551d37349839d5a8c60f', class: "rounded shadow-sm card p-2", part: card }, h("div", { key: '965e0282bfe78cabec08d6af980489c07d1c1087', class: "d-flex gap-3" }, h("div", { key: '868d31537eac74b7f5201739cf7527bc2e4c7130', class: "d-flex align-items-center" }, h("img", { key: 'f3c9ca6d9cc12e42f9ed1f469fde8ec507d03fff', src: this.imageUrl, alt: this.modelName, height: 75, width: 75, part: image })), h("div", { key: '474461af6bbb24f5d0433698b8761e2bfa76d0f3', class: "d-flex flex-column flex-grow-1 gap-3 p-4 justify-content-center" }, h("div", { key: '157c8422a4087b274bb8b3c0861ea3daa7d8d700', class: "row" }, h("div", { key: 'cfda71e7a75b716bfaa635dd0218c163f1b2aa22', class: "col-6 d-flex gap-2" }, this.modelName, h("form-control-tooltip", { key: '5e8193abfa9bbd3f27ad396871faa64700413bb5', helpText: this.description })), h("div", { key: '47a47124bf3ce63264efdc96d74dcd7849a32c96', class: "col-6 d-flex justify-content-end align-items-center" }, h("button", { key: '252798ab53ef9b68184be2d95c6b12d7e8b5e976', class: "p-0 minus btn", onClick: this.removeUnit, part: buttonLink }, "-"), h("div", { key: '0ec025653e8d4fad3cc435af716af0771fb2f8ca', class: "w-25 text-center" }, this.selectedQuantity), h("button", { key: '01f895f944b4caf85e46d90756b54fc162f0f1b0', class: "p-0 plus btn", onClick: this.addUnit, part: buttonLink }, "+")))))));
+        return (h("div", { key: 'de2e01cebd222ad371a15df4aade26d3e118ddee', class: "rounded shadow-sm card p-2", part: card }, h("div", { key: '8e69419c2b7cd0917dd27d42edef08e2d06d79fb', class: "d-flex gap-3" }, h("div", { key: 'c9f83f6f3857e3ec38134194e8ce9d5e9c614992', class: "d-flex align-items-center" }, h("img", { key: '576be452c664824354355b8ed02777dd63d2cddb', src: this.imageUrl, alt: this.modelName, height: 75, width: 75, part: image })), h("div", { key: '0c978b052b05d5b6384a0a13411b339c0522dfd3', class: "d-flex flex-column flex-grow-1 gap-3 p-4 justify-content-center" }, h("div", { key: '40c72c35a8a8418c4d873dbbd6f4ca089142bc14', class: "row" }, h("div", { key: '5fd4f0be8b88e49ad6f332b39d8bf5061ed7ebc3', class: "col-6 d-flex gap-2" }, this.modelName, h("form-control-tooltip", { key: '5d30721f60481bb7994578aefbe2b58055134044', helpText: this.description })), h("div", { key: 'e78454dc8e9fc81f65d01bafc4877d254db08508', class: "col-6 d-flex justify-content-end align-items-center" }, h("button", { key: 'e2f601209f58ce5b87aa546888da3077e1dc3aed', class: "p-0 minus btn", onClick: this.removeUnit, part: buttonLink }, "-"), h("div", { key: '32f9805571ec676ebfcf664029579d50e5e500ca', class: "w-25 text-center" }, this.selectedQuantity), h("button", { key: 'c7ac123ecc6fcaa06a0beaa5f36ed842beba928c', class: "p-0 plus btn", onClick: this.addUnit, part: buttonLink }, "+")))))));
     }
     static get is() { return "terminal-quantity-selector"; }
     static get properties() {

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

@@ -38,16 +38,16 @@ export class PaymentDetailsCore {
         });
     }
     render() {
-        return (h(StyledHost, { key: '4e0bd8666aa03921069eb6c82eb8069fe8c21f51' }, this.loading && h(PaymentDetailsLoading, { key: 'ad7d47582f43d9fdfa6272511944530777e4794e' }), !this.loading && this.errorMessage && ErrorState(this.errorMessage), !this.loading && !this.errorMessage &&
-            this.payment && (h("justifi-details", { key: '363a7c423260d77582ffe67e9e836b4fba7d1325', "error-message": this.errorMessage }, h(EntityHeadInfo, { key: '012f96e5ac8fc7b57f586a8a20b314c242bc7c8c', slot: "head-info", badge: (h("div", { class: "d-flex gap-1" }, MapPaymentStatusToBadge(this.payment.status), this.payment.expedited ? (h(Badge, { variant: BadgeVariant.WARNING, title: "Expedited", text: "Expedited" })) : null)), title: this.payment.formattedPaymentAmount(this.payment.amount) }, h(EntityHeadInfoItem, { key: '387bec0f40de5666fe6bbfd8909a7c37f6d06e00', classes: "border-1 border-end", title: "Updated At", value: `${formatDate(this.payment.updated_at)} ${formatTime(this.payment.updated_at)}` }), h(EntityHeadInfoItem, { key: 'b7e6bb8fd4acebc4941cc1753c098f4bc3b1c908', classes: "border-1 border-end", title: "Created At", value: `${formatDate(this.payment.created_at)} ${formatTime(this.payment.created_at)}` }), h(EntityHeadInfoItem, { key: '8ac5184e319c2d296fa03d8583e26d3b3f20273a', title: "ID", value: this.payment.id })), h("div", { key: '289866bdb0215833f12be258f19b4ea81236c520', slot: 'detail-sections' }, h(DetailSectionTitle, { key: 'b8d1d3894499a690c56af9013a6c2f9c0651e9a6', sectionTitle: "Details" }), h("div", { key: '4274b4f8d2afcacdb3623a11d897df857c453dbd', class: "d-table gap-2 w-100" }, h(DetailItem, { key: 'cf64c392bf18c6dfadd1bd5903e1bfe6601f6095', title: "Amount", value: this.payment.formattedPaymentAmount(this.payment.amount) }), h(DetailItem, { key: '341434de58c655969f12ab98d590fb02ed0eb454', title: "Fees", value: this.payment.formattedPaymentAmount(this.payment.fee_amount) }), h(DetailItem, { key: 'b4765daa1a5df34e55979210274a2ca774ba7f05', title: "Refunded", value: this.payment.formattedPaymentAmount(this.payment.amount_refunded) }), h(DetailItem, { key: '2da9a3cb1becc7bdc7aa82d657417b851889a421', title: "Net", value: this.payment.formattedPaymentAmount(this.payment.balance) }), h(DetailItem, { key: '58bd799d807ba52a61ac83e920ea69cbd32e50e8', title: "Status", value: MapPaymentStatusToBadge(this.payment.status) }), h(DetailItem, { key: '8d0f45bfda5a6418ca21b53ca3464da2a4dc10c1', title: "Payment ID", value: this.payment.id }), h(DetailItem, { key: '71b7b86e1b139fbe4b0eddb78f5d6f9387477662', title: "Processing Fees", value: this.payment.formattedPaymentAmount(this.payment.fee_amount) }), h(DetailItem, { key: 'ffdc21c7f9ef377ea21a4e125b682cf9129dc5bd', title: "Statement Descriptor", value: this.payment.statement_descriptor }), h(DetailItem, { key: 'c4e27c647b554422fc889403fd7ea828c551b8ef', title: "Description", value: this.payment.description }), h(DetailItem, { key: '71abb4f1ce31606e05553756580c35df61dcf492', title: "Expedited", value: this.payment.expedited ? 'Yes' : 'No' })), this.payment.payment_method.card && [
-            h(DetailSectionTitle, { key: 'be2a94838c39b18da716fc91f358da86bda29604', sectionTitle: "Payment Method" }),
-            h("div", { key: 'c9443ce3a3c325f66f6041bdba7cf9e412e41dc8', class: "d-table gap-2 w-100" }, h(DetailItem, { key: '16bf43b76bfbdf4ad533cf05fd117a006cab4498', title: "ID", value: this.payment.payment_method.card.id }), h(DetailItem, { key: 'a982ae928052ffe02cd7715c8179153d61624353', title: "Payment Type", value: "Card" }), h(DetailItem, { key: '9022cceaa84798db5733e994336982e90a086b1f', title: "Last 4 Numbers", value: this.payment.payment_method.lastFourDigits }), h(DetailItem, { key: '490790143c6bdf9bc16ded5b491fe7a20580306e', title: "Brand", value: snakeCaseToHumanReadable(this.payment.payment_method.card.brand) }), h(DetailItem, { key: '5d6c4c1c4165984b800f94a3431e9f8d85b6e128', title: "Cardholder", value: this.payment.payment_method.payersName }))
+        return (h(StyledHost, { key: '5bb9e4baea06de90dba2e9469f14c52b68e65249' }, this.loading && h(PaymentDetailsLoading, { key: '5cbc91375b6d80958e66fad56e1e6d7ab2e15b76' }), !this.loading && this.errorMessage && ErrorState(this.errorMessage), !this.loading && !this.errorMessage &&
+            this.payment && (h("justifi-details", { key: '7eedb26bfa0fb1cf1656c8bbade79c8cdbdf9764', "error-message": this.errorMessage }, h(EntityHeadInfo, { key: 'e7912d448ac140a8164ad7c285ab95ed779d61e4', slot: "head-info", badge: (h("div", { class: "d-flex gap-1" }, MapPaymentStatusToBadge(this.payment.status), this.payment.expedited ? (h(Badge, { variant: BadgeVariant.WARNING, title: "Expedited", text: "Expedited" })) : null)), title: this.payment.formattedPaymentAmount(this.payment.amount) }, h(EntityHeadInfoItem, { key: '1cd9d26abe03b8994c84b6b1d9c06fc75c4705e8', classes: "border-1 border-end", title: "Updated At", value: `${formatDate(this.payment.updated_at)} ${formatTime(this.payment.updated_at)}` }), h(EntityHeadInfoItem, { key: '4330bf0ddd130a2103ae00abb4ac787a2968e1b1', classes: "border-1 border-end", title: "Created At", value: `${formatDate(this.payment.created_at)} ${formatTime(this.payment.created_at)}` }), h(EntityHeadInfoItem, { key: 'e5336b00ebc442a3d52e74e4f1f75442c06edcf9', title: "ID", value: this.payment.id })), h("div", { key: '0e07bc37f9fbb547c479167ee9e5991a59aeb54f', slot: 'detail-sections' }, h(DetailSectionTitle, { key: '6d30461904ce2576bf3af983a6aa856c2b4fb52d', sectionTitle: "Details" }), h("div", { key: '6a1d68cfa2c03dc496768f7d29867c77aff39856', class: "d-table gap-2 w-100" }, h(DetailItem, { key: '2669711d00298e9a84582149f423bcbeabb60de2', title: "Amount", value: this.payment.formattedPaymentAmount(this.payment.amount) }), h(DetailItem, { key: '3a93e845f845d0fd17409e3e44c096f3bb7563dc', title: "Fees", value: this.payment.formattedPaymentAmount(this.payment.fee_amount) }), h(DetailItem, { key: '4be864f58f7ab22e0e5079dc924d8bd02f3b7dd8', title: "Refunded", value: this.payment.formattedPaymentAmount(this.payment.amount_refunded) }), h(DetailItem, { key: '14956ec82cf01fdec85e76170aeade66273d6a1d', title: "Net", value: this.payment.formattedPaymentAmount(this.payment.balance) }), h(DetailItem, { key: '06cd1d7930f6c428be0c736e918147c7aa94cd80', title: "Status", value: MapPaymentStatusToBadge(this.payment.status) }), h(DetailItem, { key: '98e27c002566c3e9a093ab743951bf56501fd2a2', title: "Payment ID", value: this.payment.id }), h(DetailItem, { key: '54ab8e011a08814fe3d970f0ab7a93d558b68e22', title: "Processing Fees", value: this.payment.formattedPaymentAmount(this.payment.fee_amount) }), h(DetailItem, { key: 'f9875ea8913f6d46adac4175de6dfc284cedba4f', title: "Statement Descriptor", value: this.payment.statement_descriptor }), h(DetailItem, { key: 'ccd5a4a44663cf14b76141e91c69d799055f83e2', title: "Description", value: this.payment.description }), h(DetailItem, { key: '4136e5f730f569bcb63e87cea1022d996596f2a0', title: "Expedited", value: this.payment.expedited ? 'Yes' : 'No' })), this.payment.payment_method.card && [
+            h(DetailSectionTitle, { key: '3a7ef3be13a9a8d8573eb5766d8d4b120baca19d', sectionTitle: "Payment Method" }),
+            h("div", { key: '695558eded8ee2cff291bed4a13d02482b619565', class: "d-table gap-2 w-100" }, h(DetailItem, { key: '1c678964543ced0c4f1a5835fea8234322f732ae', title: "ID", value: this.payment.payment_method.card.id }), h(DetailItem, { key: '5b1c9dfda2f8b499e6d0c9fae288e58a771d63d7', title: "Payment Type", value: "Card" }), h(DetailItem, { key: '0aecf598551b5685a36dafb8cf54802cd3914482', title: "Last 4 Numbers", value: this.payment.payment_method.lastFourDigits }), h(DetailItem, { key: 'd59d46bef4cecf2a1dcb73c9af696e6aabf5776b', title: "Brand", value: snakeCaseToHumanReadable(this.payment.payment_method.card.brand) }), h(DetailItem, { key: '56588cdf9c1535cf8aa22dd56a94608805f241aa', title: "Cardholder", value: this.payment.payment_method.payersName }))
         ], this.payment.payment_method.bank_account && [
-            h(DetailSectionTitle, { key: '6ad6ad0353e5ee5e5893eb28734d258b82608b0c', sectionTitle: "Payment Method" }),
-            h("div", { key: '69ac129f5aad812074e70b9651af0b846ca08b95', class: "d-table gap-2 w-100" }, h(DetailItem, { key: '0e1a6085819ce42a8e13ac95afbd669a3a9b63cc', title: "ID", value: this.payment.payment_method.bank_account.id }), h(DetailItem, { key: 'e1d6385250a3e0b3584ee93844bfa3e97e1a6e65', title: "Last 4 Numbers", value: this.payment.last_four_digits }), h(DetailItem, { key: '97cefdd55796f3a5cb31f7292fa5d44eff142f07', title: "Bank Name", value: this.payment.payment_method.bank_account.brand }), h(DetailItem, { key: 'fd7253838cd0f61ae9a8562111a8da52e35290ba', title: "Account Owner", value: this.payment.payment_method.payersName }))
+            h(DetailSectionTitle, { key: '84f146ebe0e237768df2fd8e16c2295bdb86a49a', sectionTitle: "Payment Method" }),
+            h("div", { key: '440b505ff883eadf73ecd3ca542d0feeadb8e8a8', class: "d-table gap-2 w-100" }, h(DetailItem, { key: '2f57116a3c0a9522a18866d88e18d5856fa53b2a', title: "ID", value: this.payment.payment_method.bank_account.id }), h(DetailItem, { key: 'c0a7c01e8c4eeece3771d29938268fd324e647c6', title: "Last 4 Numbers", value: this.payment.last_four_digits }), h(DetailItem, { key: '2968ea77dbc987591dd2418d544c4f21027694d6', title: "Bank Name", value: this.payment.payment_method.bank_account.brand }), h(DetailItem, { key: '38f7129625d8d6a16818dc07343eda9ba31dd19c', title: "Account Owner", value: this.payment.payment_method.payersName }))
         ], this.payment.metadata && [
-            h(DetailSectionTitle, { key: 'bde0366b8a25f6d363ef7c882515e0a57d60f177', sectionTitle: 'Metadata' }),
-            h("div", { key: '07817e5314253562b33610974e696158c630d384', class: "d-table gap-2 w-100" }, h(CodeBlock, { key: 'f2005b17c699a4dab43e4a5e33472bb6e32fb50e', metadata: this.payment.metadata }))
+            h(DetailSectionTitle, { key: 'bf0d94665bae468091534cc74219ee786b8b87f6', sectionTitle: 'Metadata' }),
+            h("div", { key: 'f92f3a4f1f2c6fa6ae6cbc32c0868f22d68b9326', class: "d-table gap-2 w-100" }, h(CodeBlock, { key: '21937177748b5322178ae75db147cc3185db78ca', metadata: this.payment.metadata }))
         ])))));
     }
     static get is() { return "payment-details-core"; }

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

@@ -91,7 +91,7 @@ export class PaymentTransactionsList {
         return !this.showEmptyState && !this.showErrorState && !this.isLoading;
     }
     render() {
-        return (h(StyledHost, { key: '716f4c8f7d7a4e02a0bc11c4c19304b9fa2376ea' }, h(TableWrapper, { key: '85c0fb74e5208ceb8d4cd7d040f7de200b1fc211' }, h(TableComponent, { key: '64015db69c878d6339103743a636b7b058e0d897' }, h(TableHead, { key: '48624b5cd232afdf4e5386e9c01c13e48e3645f0' }, h(TableHeadRow, { key: 'fb67abf53476706c2c1851ffdb9ff54faced0431' }, this.transactionsTable.columnData.map((column) => column))), h(TableBody, { key: '85db5c723d781673ddd700980ac680743ea9eaac' }, h(TableLoadingState, { key: '72c5641bd1ff45d71996cee0789942d18e1531ef', columnSpan: this.transactionsTable.columnKeys.length, isLoading: this.isLoading }), h(TableEmptyState, { key: 'a81cc544f50dfec1a8444d39f28ae0bf66d41e08', isEmpty: this.showEmptyState, columnSpan: this.transactionsTable.columnKeys.length }), h(TableErrorState, { key: 'cfdc9817cbb5c399257b4bff9bb4620345766c9a', columnSpan: this.transactionsTable.columnKeys.length, errorMessage: this.errorMessage }), this.showRowData && this.transactionsTable.rowData.map((data, index) => (h(TableRow, { "data-test-id": "table-row", "data-row-entity-id": this.entityId[index], onClick: this.rowClickHandler }, data)))), this.paging && (h(TableFoot, { key: '4f15aed8b10892db8e336f792bdf3279b7290f7f' }, h(TableFootRow, { key: '678a200a17d03130e09ff7b2b1eac850aa89e507' }, h(TableFootCell, { key: 'ca242b95a513d56ebedddbdde7b38a56f309a830', colSpan: this.transactionsTable.columnData.length }, h("pagination-menu", { key: 'abca6ea0f991d6ff480d287c29d9feb069da243f', paging: Object.assign(Object.assign({}, this.paging), { handleClickPrevious: this.handleClickPrevious, handleClickNext: this.handleClickNext }) })))))))));
+        return (h(StyledHost, { key: '0ea0cd7e150028fa7dd07bc8d3a9900ba2de5728' }, h(TableWrapper, { key: 'cf8085e6989e1fb05c2b606a6d56c4af5ba33d33' }, h(TableComponent, { key: '2aeae7b80720b715e33b4decc824b08c95642951' }, h(TableHead, { key: '463a4486652002ec647d90d23eeba7251eccda98' }, h(TableHeadRow, { key: '8c2906ce4c1f53d196ac6134ad363332c4e831fb' }, this.transactionsTable.columnData.map((column) => column))), h(TableBody, { key: 'bf1a2336f715ef317ee41f7b1de44b4256ac5f48' }, h(TableLoadingState, { key: '7bf57b2056d7e8a912d1e173d01b6007cc648441', columnSpan: this.transactionsTable.columnKeys.length, isLoading: this.isLoading }), h(TableEmptyState, { key: '3a578832c5c3c05fbcebad508e3922c180ee33cf', isEmpty: this.showEmptyState, columnSpan: this.transactionsTable.columnKeys.length }), h(TableErrorState, { key: '9cdff1699621d8e02d90ca7544a3e95340c6598e', columnSpan: this.transactionsTable.columnKeys.length, errorMessage: this.errorMessage }), this.showRowData && this.transactionsTable.rowData.map((data, index) => (h(TableRow, { "data-test-id": "table-row", "data-row-entity-id": this.entityId[index], onClick: this.rowClickHandler }, data)))), this.paging && (h(TableFoot, { key: '9c5baf6c5bbba0c19f287fd2eddd7b06490f51df' }, h(TableFootRow, { key: '95460f894d3f6a9d20422aef2c9172cdc230e079' }, h(TableFootCell, { key: '33fa015f7a7a968c6697302616359991f5ae16cf', colSpan: this.transactionsTable.columnData.length }, h("pagination-menu", { key: 'e1821a1b7658b503e11ff799413fa5ea368a7ae7', paging: Object.assign(Object.assign({}, this.paging), { handleClickPrevious: this.handleClickPrevious, handleClickNext: this.handleClickNext }) })))))))));
     }
     static get is() { return "justifi-payment-transactions-list"; }
     static get encapsulation() { return "shadow"; }

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

@@ -83,7 +83,7 @@ export class PaymentsListCore {
         return !this.showEmptyState && !this.showErrorState && !this.loading;
     }
     render() {
-        return (h(TableWrapper, { key: 'c281d15df6992c3e36501217c7b2fa86e12c4bee' }, h(TableComponent, { key: '40662062c7d4bccbf66e38d5e3200d55431dadf7' }, h(TableHead, { key: '9cfd5968a9ccdba77602cc7f73b8448feec7b45a' }, h(TableHeadRow, { key: 'b36f938d1de1946e19f2f8390d4f4c26f280544c' }, this.paymentsTable.columnData.map((column) => column))), h(TableBody, { key: 'dad78f82e065f33481d5b28126953650f5cd8bf6' }, h(TableLoadingState, { key: '5a40ca1841e214914ba71d1e1ef1275ed46f39ab', columnSpan: this.paymentsTable.columnData.length, isLoading: this.loading }), h(TableEmptyState, { key: '6af3bc5d123604b70d20c01edaab74f1e26ab907', isEmpty: this.showEmptyState, columnSpan: this.paymentsTable.columnData.length }), h(TableErrorState, { key: '804f60d541d5943b8be9c9f0cc1313fffb709b69', columnSpan: this.paymentsTable.columnData.length, errorMessage: this.errorMessage }), this.showRowData && this.paymentsTable.rowData.map((data, index) => (h(TableRow, { "data-test-id": "table-row", "data-row-entity-id": this.entityId[index], onClick: this.rowClickHandler }, data)))), this.paging && (h(TableFoot, { key: 'a49708342b18f4e97c2001f27ae07c9914bf31d9' }, h(TableFootRow, { key: 'dbbedc3645cdb3f864076d56f4b979c8443540bd' }, h(TableFootCell, { key: '913b6fe962d07c870b6b262e5fb44e092b24ee62', colSpan: this.paymentsTable.columnData.length }, h("pagination-menu", { key: 'a5e49ce92278aee49517120b791910def91a1871', paging: Object.assign(Object.assign({}, this.paging), { handleClickPrevious: this.handleClickPrevious, handleClickNext: this.handleClickNext }) }))))))));
+        return (h(TableWrapper, { key: 'f9fe216ea30123f3a7613b74371492fdefc1f4bc' }, h(TableComponent, { key: 'b081beffb783c9e351092947864649518fbe2dfc' }, h(TableHead, { key: 'e2e47a2122561e93163bf4d3794fe6b139a30ee9' }, h(TableHeadRow, { key: '0bb6d21213e5ab335c14057e69ecca70b0381578' }, this.paymentsTable.columnData.map((column) => column))), h(TableBody, { key: '9e411aaa4fb387fe4ee3d129f05e23438313ab65' }, h(TableLoadingState, { key: '42659fe4d9f41bff6165fc5016d6dc441e3d294a', columnSpan: this.paymentsTable.columnData.length, isLoading: this.loading }), h(TableEmptyState, { key: 'b5fb94bf87bae350b48fc6969acb3477eeeb2b1d', isEmpty: this.showEmptyState, columnSpan: this.paymentsTable.columnData.length }), h(TableErrorState, { key: '220b648eabf17bfd7006b23399fc38f17e5b6952', columnSpan: this.paymentsTable.columnData.length, errorMessage: this.errorMessage }), this.showRowData && this.paymentsTable.rowData.map((data, index) => (h(TableRow, { "data-test-id": "table-row", "data-row-entity-id": this.entityId[index], onClick: this.rowClickHandler }, data)))), this.paging && (h(TableFoot, { key: '1b77f14df195e1867f6ba037757350cc7b4fab96' }, h(TableFootRow, { key: '9baa94de37beec7a33fff9c9bbb83bdf2ad8fc16' }, h(TableFootCell, { key: '08a3c1d8ba7017f6bc6c60b4b33c319f59654731', colSpan: this.paymentsTable.columnData.length }, h("pagination-menu", { key: 'a3518ce532a7539c092dda6cae4bc318147d92ed', paging: Object.assign(Object.assign({}, this.paging), { handleClickPrevious: this.handleClickPrevious, handleClickNext: this.handleClickNext }) }))))))));
     }
     static get is() { return "payments-list-core"; }
     static get properties() {

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

@@ -43,8 +43,8 @@ export class PaymentsListFilters {
     }
     render() {
         const filterMenuParams = Object.assign({}, filterParams);
-        return (h(StyledHost, { key: '67b518cd0ccc4f12dac720857806ee8186ab2c25' }, h("table-filters-menu", { key: '970d600366a4bbd2ce7ee27f1b3da99a0b278e8c', params: filterMenuParams, clearParams: clearParams, part: paymentsListFilterMenu }, h("div", { key: '5aba7fd5b51d355c26865059dc43f6dc3f154092', class: "grid-cols-2 gap-3 p-1" }, h("div", { key: '11d3e50db04050dc2890fdd12dffc084fff4c1a0', class: "p-2" }, h("form-control-text", { key: 'a4c280684abe4f0e239bf368b1cacf8b67cc2f64', name: "payment_id", label: "Payment ID", inputHandler: this.debouncedSetParamsOnChange, defaultValue: this.paymentId || filterParams.payment_id, disabled: !!this.paymentId, part: paymentIdPaymentsListFilterParam })), h("div", { key: '9e791d3b4c0ce2674d3a530b246ee05e95c68382', class: "p-2" }, h("form-control-text", { key: '6ac6f5148f63d5a9b49e1a25cf33aaac2a450a70', name: "terminal_id", label: "Terminal ID", inputHandler: this.debouncedSetParamsOnChange, defaultValue: this.terminalId || filterParams.terminal_id, disabled: !!this.terminalId, part: terminalIdPaymentsListFilterParam })), h("div", { key: '206371f04024bb84a80027f86d845f50589f3d79', class: "p-2" }, h("form-control-select", { key: '5a814b76afb391df8e6bfdf38aaea04061fc2bf6', name: "payment_status", label: "Status", options: this.paymentStatusOptions, inputHandler: this.setParamsOnChange, defaultValue: this.paymentStatus || filterParams.payment_status, disabled: !!this.paymentStatus, part: paymentStatusPaymentsListFilterParam })), h("div", { key: 'e0d28004a2c0e303ac1f92019b8915104b71c513', class: "p-2" }, h("form-control-date", { key: '714bbe92c53f497fd0b289d1801b9a0272b5bf02', name: "created_after", label: "Created After", inputHandler: this.handleDateInput, defaultValue: convertToLocal(this.createdAfter, { showInputDateTime: true }) ||
-                convertToLocal(filterParams.created_after, { showInputDateTime: true }), showTime: true, disabled: !!this.createdAfter, part: createdAfterPaymentsListFilterParam })), h("div", { key: 'e414039de52738dbd52a30378daf3902f035fc57', class: "p-2" }, h("form-control-date", { key: 'f7fabb7771afc1e6de6d24d3eecb55d34f481ea0', name: "created_before", label: "Created Before", inputHandler: this.handleDateInput, defaultValue: convertToLocal(this.createdBefore, { showInputDateTime: true }) ||
+        return (h(StyledHost, { key: 'cc126b534ca4b07c39837310f08a7dbbf12d793c' }, h("table-filters-menu", { key: '5417f231746c0dace09e623629c0b40b0e680714', params: filterMenuParams, clearParams: clearParams, part: paymentsListFilterMenu }, h("div", { key: '50cd8592d22b12788c31dfc744a39fcec7a32a0f', class: "grid-cols-2 gap-3 p-1" }, h("div", { key: 'dd64e601b8881bb940dabfd05a5b6fa5fabc75fd', class: "p-2" }, h("form-control-text", { key: '172c56e0eb8c4d13ff30ff1f2266a30ab8d59e25', name: "payment_id", label: "Payment ID", inputHandler: this.debouncedSetParamsOnChange, defaultValue: this.paymentId || filterParams.payment_id, disabled: !!this.paymentId, part: paymentIdPaymentsListFilterParam })), h("div", { key: '70db55cf54206ab03112ff88757248deb3507084', class: "p-2" }, h("form-control-text", { key: 'c7e94136b6285d8d22f2170d26c166227451e914', name: "terminal_id", label: "Terminal ID", inputHandler: this.debouncedSetParamsOnChange, defaultValue: this.terminalId || filterParams.terminal_id, disabled: !!this.terminalId, part: terminalIdPaymentsListFilterParam })), h("div", { key: 'f282e92c253370922ec06ae0ed9ef55d5515f55c', class: "p-2" }, h("form-control-select", { key: '7c35feaac9958fb44586e757ef708d2230c6a31c', name: "payment_status", label: "Status", options: this.paymentStatusOptions, inputHandler: this.setParamsOnChange, defaultValue: this.paymentStatus || filterParams.payment_status, disabled: !!this.paymentStatus, part: paymentStatusPaymentsListFilterParam })), h("div", { key: 'e74d305502ed5676d7ba6c332011f3aac2c757f4', class: "p-2" }, h("form-control-date", { key: '96a88abb0be10f2bd5c8c96beefbbd143a9c8a61', name: "created_after", label: "Created After", inputHandler: this.handleDateInput, defaultValue: convertToLocal(this.createdAfter, { showInputDateTime: true }) ||
+                convertToLocal(filterParams.created_after, { showInputDateTime: true }), showTime: true, disabled: !!this.createdAfter, part: createdAfterPaymentsListFilterParam })), h("div", { key: '4c3e79b77675ba2cf7d5bc7746193ceabdc88aee', class: "p-2" }, h("form-control-date", { key: '275a24fbd7a806786182dda5d8f0eed1ad85528e', name: "created_before", label: "Created Before", inputHandler: this.handleDateInput, defaultValue: convertToLocal(this.createdBefore, { showInputDateTime: true }) ||
                 convertToLocal(filterParams.created_before, { showInputDateTime: true }), showTime: true, disabled: !!this.createdBefore, part: createdBeforePaymentsListFilterParam }))))));
     }
     static get is() { return "justifi-payments-list-filters"; }

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

@@ -46,7 +46,7 @@ export class PaymentsList {
         }
     }
     render() {
-        return (h(StyledHost, { key: '60f3068b1b6dd23163f4fc373359a0e722ab9b3c' }, h("payments-list-core", { key: '0ab858c2d4aac570935e7d9fedff2596209d2701', getPayments: this.getPayments, "onError-event": this.handleErrorEvent, columns: this.columns })));
+        return (h(StyledHost, { key: 'bd9d7950a22c554394e46bf09f48ced038fd5c44' }, h("payments-list-core", { key: '52a88a0a20484d863ac1a61ede8f657c35454f91', getPayments: this.getPayments, "onError-event": this.handleErrorEvent, columns: this.columns })));
     }
     static get is() { return "justifi-payments-list"; }
     static get encapsulation() { return "shadow"; }