@justifi/webcomponents 4.23.1 → 5.0.0-rc-2

package/dist/module/insurance-state.js

@@ -1,194 +1,9 @@
-import { getRenderingRef, forceUpdate } from '@stencil/core/internal/client';
+import { h } from '@stencil/core/internal/client';
+import { h as heading2 } from './parts.js';
+import { c as createStore } from './index2.js';
 
-const appendToMap = (map, propName, value) => {
-    const items = map.get(propName);
-    if (!items) {
-        map.set(propName, [value]);
-    }
-    else if (!items.includes(value)) {
-        items.push(value);
-    }
-};
-const debounce = (fn, ms) => {
-    let timeoutId;
-    return (...args) => {
-        if (timeoutId) {
-            clearTimeout(timeoutId);
-        }
-        timeoutId = setTimeout(() => {
-            timeoutId = 0;
-            fn(...args);
-        }, ms);
-    };
-};
-
-/**
- * Check if a possible element isConnected.
- * The property might not be there, so we check for it.
- *
- * We want it to return true if isConnected is not a property,
- * otherwise we would remove these elements and would not update.
- *
- * Better leak in Edge than to be useless.
- */
-const isConnected = (maybeElement) => !('isConnected' in maybeElement) || maybeElement.isConnected;
-const cleanupElements = debounce((map) => {
-    for (let key of map.keys()) {
-        map.set(key, map.get(key).filter(isConnected));
-    }
-}, 2000);
-const stencilSubscription = () => {
-    if (typeof getRenderingRef !== 'function') {
-        // If we are not in a stencil project, we do nothing.
-        // This function is not really exported by @stencil/core.
-        return {};
-    }
-    const elmsToUpdate = new Map();
-    return {
-        dispose: () => elmsToUpdate.clear(),
-        get: (propName) => {
-            const elm = getRenderingRef();
-            if (elm) {
-                appendToMap(elmsToUpdate, propName, elm);
-            }
-        },
-        set: (propName) => {
-            const elements = elmsToUpdate.get(propName);
-            if (elements) {
-                elmsToUpdate.set(propName, elements.filter(forceUpdate));
-            }
-            cleanupElements(elmsToUpdate);
-        },
-        reset: () => {
-            elmsToUpdate.forEach((elms) => elms.forEach(forceUpdate));
-            cleanupElements(elmsToUpdate);
-        },
-    };
-};
-
-const unwrap = (val) => (typeof val === 'function' ? val() : val);
-const createObservableMap = (defaultState, shouldUpdate = (a, b) => a !== b) => {
-    const unwrappedState = unwrap(defaultState);
-    let states = new Map(Object.entries(unwrappedState !== null && unwrappedState !== void 0 ? unwrappedState : {}));
-    const handlers = {
-        dispose: [],
-        get: [],
-        set: [],
-        reset: [],
-    };
-    const reset = () => {
-        var _a;
-        // When resetting the state, the default state may be a function - unwrap it to invoke it.
-        // otherwise, the state won't be properly reset
-        states = new Map(Object.entries((_a = unwrap(defaultState)) !== null && _a !== void 0 ? _a : {}));
-        handlers.reset.forEach((cb) => cb());
-    };
-    const dispose = () => {
-        // Call first dispose as resetting the state would
-        // cause less updates ;)
-        handlers.dispose.forEach((cb) => cb());
-        reset();
-    };
-    const get = (propName) => {
-        handlers.get.forEach((cb) => cb(propName));
-        return states.get(propName);
-    };
-    const set = (propName, value) => {
-        const oldValue = states.get(propName);
-        if (shouldUpdate(value, oldValue, propName)) {
-            states.set(propName, value);
-            handlers.set.forEach((cb) => cb(propName, value, oldValue));
-        }
-    };
-    const state = (typeof Proxy === 'undefined'
-        ? {}
-        : new Proxy(unwrappedState, {
-            get(_, propName) {
-                return get(propName);
-            },
-            ownKeys(_) {
-                return Array.from(states.keys());
-            },
-            getOwnPropertyDescriptor() {
-                return {
-                    enumerable: true,
-                    configurable: true,
-                };
-            },
-            has(_, propName) {
-                return states.has(propName);
-            },
-            set(_, propName, value) {
-                set(propName, value);
-                return true;
-            },
-        }));
-    const on = (eventName, callback) => {
-        handlers[eventName].push(callback);
-        return () => {
-            removeFromArray(handlers[eventName], callback);
-        };
-    };
-    const onChange = (propName, cb) => {
-        const unSet = on('set', (key, newValue) => {
-            if (key === propName) {
-                cb(newValue);
-            }
-        });
-        // We need to unwrap the defaultState because it might be a function.
-        // Otherwise we might not be sending the right reset value.
-        const unReset = on('reset', () => cb(unwrap(defaultState)[propName]));
-        return () => {
-            unSet();
-            unReset();
-        };
-    };
-    const use = (...subscriptions) => {
-        const unsubs = subscriptions.reduce((unsubs, subscription) => {
-            if (subscription.set) {
-                unsubs.push(on('set', subscription.set));
-            }
-            if (subscription.get) {
-                unsubs.push(on('get', subscription.get));
-            }
-            if (subscription.reset) {
-                unsubs.push(on('reset', subscription.reset));
-            }
-            if (subscription.dispose) {
-                unsubs.push(on('dispose', subscription.dispose));
-            }
-            return unsubs;
-        }, []);
-        return () => unsubs.forEach((unsub) => unsub());
-    };
-    const forceUpdate = (key) => {
-        const oldValue = states.get(key);
-        handlers.set.forEach((cb) => cb(key, oldValue, oldValue));
-    };
-    return {
-        state,
-        get,
-        set,
-        on,
-        onChange,
-        use,
-        dispose,
-        reset,
-        forceUpdate,
-    };
-};
-const removeFromArray = (array, item) => {
-    const index = array.indexOf(item);
-    if (index >= 0) {
-        array[index] = array[array.length - 1];
-        array.length--;
-    }
-};
-
-const createStore = (defaultState, shouldUpdate) => {
-    const map = createObservableMap(defaultState, shouldUpdate);
-    map.use(stencilSubscription());
-    return map;
+const Header2 = (props) => {
+    return h("h2", { class: `header-2 ${props === null || props === void 0 ? void 0 : props.class}`, part: heading2 }, props.text);
 };
 
 const insuranceValuesStore = createStore({});
@@ -210,4 +25,4 @@ const validateInsuranceValues = () => {
     return { isValid: valid };
 };
 
-export { insuranceValues as a, insuranceErrors as b, insuranceValuesOn as i, validateInsuranceValues as v };
+export { Header2 as H, insuranceValues as a, insuranceErrors as b, insuranceValuesOn as i, validateInsuranceValues as v };

package/dist/module/justifi-business-details.js

@@ -3,9 +3,8 @@ import { E as ErrorState } from './utils.js';
 import { B as BusinessService } from './business.service.js';
 import { a as Business } from './Business.js';
 import { a as ComponentErrorSeverity, C as ComponentErrorCodes } from './ComponentError.js';
-import { g as getErrorMessage, a as getErrorCode } from './utils4.js';
-import { J as JustifiAnalytics } from './Analytics.js';
-import { c as checkPkgVersion } from './check-pkg-version.js';
+import { g as getErrorMessage, a as getErrorCode } from './utils3.js';
+import { c as checkPkgVersion, J as JustifiAnalytics } from './check-pkg-version.js';
 import { d as defineCustomElement$7 } from './additional-questions-details2.js';
 import { d as defineCustomElement$6 } from './business-details-core2.js';
 import { d as defineCustomElement$5 } from './generic-info-details2.js';

package/dist/module/justifi-business-form.js

@@ -10,16 +10,16 @@ import './Pagination.js';
 import './Payment.js';
 import './SubAccount.js';
 import { c as config } from './config.js';
-import { b as BusinessFormServerErrors, c as BusinessFormClickActions } from './business-form-types.js';
-import { a as Business } from './Business.js';
-import { J as JustifiAnalytics } from './Analytics.js';
+import { a as Business, b as BusinessFormServerErrors } from './Business.js';
+import { c as checkPkgVersion, J as JustifiAnalytics } from './check-pkg-version.js';
+import { B as Button } from './button.js';
 import { S as StyledHost } from './styled-host.js';
-import { c as checkPkgVersion } from './check-pkg-version.js';
-import { d as defineCustomElement$g } from './custom-popper2.js';
-import { d as defineCustomElement$f } from './form-alert2.js';
-import { d as defineCustomElement$e } from './form-control-date2.js';
-import { d as defineCustomElement$d } from './form-control-error-text2.js';
-import { d as defineCustomElement$c } from './form-control-help-text2.js';
+import { H as Header1 } from './header-1.js';
+import './details.js';
+import { a as BusinessFormClickActions } from './event-types2.js';
+import { d as defineCustomElement$e } from './custom-popper2.js';
+import { d as defineCustomElement$d } from './form-alert2.js';
+import { d as defineCustomElement$c } from './form-control-date2.js';
 import { d as defineCustomElement$b } from './form-control-monetary2.js';
 import { d as defineCustomElement$a } from './form-control-number-masked2.js';
 import { d as defineCustomElement$9 } from './form-control-select2.js';
@@ -33,17 +33,13 @@ import { d as defineCustomElement$2 } from './legal-address-form.js';
 
 const businessFormSchema = create$3(Object.assign(Object.assign({}, businessCoreInfoSchema().fields), { legal_address: addressSchema(), additional_questions: additionalQuestionsSchema(), representative: identitySchema('representative') }));
 
-const businessFormCss = ":host{display:block}*::part(label){color:var(--jfi-form-label-color);font-family:var(--jfi-form-label-font-family);font-weight:var(--jfi-form-label-font-weight);font-size:var(--jfi-form-label-font-size);margin:var(--jfi-form-label-margin)}*::part(input){font-family:var(--jfi-layout-font-family);background-color:var(--jfi-form-control-background-color);border-color:var(--jfi-form-control-border-color);border-width:var(--jfi-form-control-border-width);border-bottom-width:var(--jfi-form-control-border-bottom-width);border-left-width:var(--jfi-form-control-border-left-width);border-right-width:var(--jfi-form-control-border-right-width);border-top-width:var(--jfi-form-control-border-top-width);border-radius:var(--jfi-form-control-border-radius);border-style:var(--jfi-form-control-border-style);box-shadow:var(--jfi-form-control-box-shadow);color:var(--jfi-form-control-color);font-size:var(--jfi-form-control-font-size);font-weight:var(--jfi-form-control-font-weight);line-height:var(--jfi-form-control-line-height);margin:var(--jfi-form-control-margin);padding:var(--jfi-form-control-padding)}*::part(input):focus{color:var(--jfi-form-control-color-focus);border-color:var(--jfi-form-control-border-color-focus);box-shadow:var(--jfi-form-control-box-shadow-focus)}*::part(input-checkbox){font-family:var(--jfi-layout-font-family);border-color:var(--jfi-form-control-border-color);border-width:var(--jfi-form-control-border-width);border-bottom-width:var(--jfi-form-control-border-bottom-width);border-left-width:var(--jfi-form-control-border-left-width);border-right-width:var(--jfi-form-control-border-right-width);border-top-width:var(--jfi-form-control-border-top-width);border-style:var(--jfi-form-control-border-style);box-shadow:var(--jfi-form-control-box-shadow);color:var(--jfi-form-control-color);line-height:var(--jfi-form-control-line-height)}*::part(input-checkbox):focus{color:var(--jfi-form-control-color-focus);border-color:var(--jfi-form-control-border-color-focus);box-shadow:var(--jfi-form-control-box-shadow-focus)}*::part(input-checkbox-invalid){border-color:var(--jfi-form-control-border-color-error);box-shadow:var(--jfi-form-control-box-shadow-error)}*::part(input-checkbox-invalid):focus{border-color:var(--jfi-form-control-border-color-error);box-shadow:var(--jfi-form-control-box-shadow-error-focus)}*::part(input-invalid){border-color:var(--jfi-form-control-border-color-error);box-shadow:var(--jfi-form-control-box-shadow-error)}*::part(input-invalid):focus{border-color:var(--jfi-form-control-border-color-error);box-shadow:var(--jfi-form-control-box-shadow-error-focus)}.jfi-submit-button{font-family:var(--jfi-layout-font-family);color:var(--jfi-submit-button-color);background-color:var(--jfi-submit-button-background-color);border-color:var(--jfi-submit-button-border-color);padding:var(--jfi-submit-button-padding);font-size:var(--jfi-submit-button-font-size);border-radius:var(--jfi-submit-button-border-radius);width:var(--jfi-submit-button-width);box-shadow:var(--jfi-submit-button-box-shadow)}.jfi-submit-button:hover{color:var(--jfi-submit-button-color-hover);background-color:var(--jfi-submit-button-background-color-hover);border-color:var(--jfi-submit-button-border-color-hover)}.jfi-submit-button:focus{color:var(--jfi-submit-button-color-focus);background-color:var(--jfi-submit-button-background-color-focus);border-color:var(--jfi-submit-button-border-color-focus)}.btn.jfi-submit-button:active{color:var(--jfi-submit-button-color-active);background-color:var(--jfi-submit-button-background-color-active);border-color:var(--jfi-submit-button-border-color-active)}.btn.jfi-submit-button-loading{min-width:75px;color:var(--jfi-submit-button-color-loading);background-color:var(--jfi-submit-button-background-color-loading);border-color:var(--jfi-submit-button-border-color-loading)}.btn.jfi-submit-button-loading .spinner-border{border-top-color:var(--jfi-submit-button-color-loading);border-bottom-color:var(--jfi-submit-button-color-loading);border-left-color:var(--jfi-submit-button-color-loading)}";
-const JustifiBusinessFormStyle0 = businessFormCss;
-
 const BusinessForm = /*@__PURE__*/ proxyCustomElement(class BusinessForm extends HTMLElement {
     constructor() {
         super();
         this.__registerHost();
         this.__attachShadow();
-        this.submitted = createEvent(this, "submitted", 7);
-        this.clickEventNew = createEvent(this, "click-event", 7);
-        this.clickEventOld = createEvent(this, "clickEvent", 7);
+        this.submitEvent = createEvent(this, "submit-event", 7);
+        this.clickEvent = createEvent(this, "click-event", 7);
         this.instantiateBusiness = (data) => {
             const business = new Business(data);
             this.formController.setInitialValues(Object.assign({}, business));
@@ -105,11 +101,6 @@ const BusinessForm = /*@__PURE__*/ proxyCustomElement(class BusinessForm extends
     disconnectedCallback() {
         this.analytics.cleanup();
     }
-    fireClickEvents(event) {
-        console.warn('`clickEvent` is deprecated and will be removed in the next major release. Please use `click-event` instead.');
-        this.clickEventNew.emit(event);
-        this.clickEventOld.emit(event);
-    }
     get title() {
         return this.removeTitle ? '' : this.formTitle;
     }
@@ -123,13 +114,12 @@ const BusinessForm = /*@__PURE__*/ proxyCustomElement(class BusinessForm extends
         if (response.error) {
             this.errorMessage = BusinessFormServerErrors.patchData;
         }
-        this.submitted.emit({ data: response });
+        this.submitEvent.emit({ response: response });
         this.instantiateBusiness(response.data);
     }
     render() {
-        return (h(StyledHost, { key: 'f04193b776865a18072bd3f1773f37a41d9439a4', exportparts: "label,input,input-invalid" }, h("form", { key: '7acb5fe47087e2ec1c3ea1b825e34b96ca6881fd', onSubmit: this.validateAndSubmit }, h("div", { key: 'd7548b77f1c7d8bb937a4c98420cfec097d73b42', class: "row gap-3" }, h("h1", { key: 'f7e74ba9d0b75f5da52a691ec16ba8068a23bbaa' }, this.title), h("form-alert", { key: 'cb83cf84afb00a4e315eee940d2f67817ba6302d', text: this.errorMessage, hideAlert: this.hideErrors }), h("div", { key: '7c6ab18da58b0ecca644d3f4644e78cfe945b8eb', class: "col-12 mb-4" }, h("justifi-business-core-info", { key: 'f5d7304ca3dd69dd1fc65954b57e4e77e24e36c9', formController: this.formController })), h("div", { key: 'c6e870483b690dac1c8bf3400e7dfb47e46db014', class: "col-12 mb-4" }, h("justifi-legal-address-form", { key: 'd04d51527b8c5a6594d5aef592a90b9db2900ee7', formController: this.formController })), h("div", { key: '669b426f578ad83d18b81a46c8e73d60ff68db5e', class: "col-12 mb-4" }, h("justifi-additional-questions", { key: '5eece0ad9248e76b5b57fd99b07c8e0c77120765', formController: this.formController })), h("div", { key: '61a4f31878ec2c4ee69985d4246016e951f8e05b', class: "col-12 mb-4" }, h("justifi-business-representative", { key: '5252a87a8f362be267232bab93565d14c2a1dd41', formController: this.formController })), h("div", { key: 'cf380d4345d5c0e25702d727e36940a9b6e4ee73', class: "col-12 d-flex flex-row-reverse" }, h("button", { key: '75b0dd58c32db365f581c2f1b8519fe90ec2ae51', type: "submit", class: "btn btn-primary jfi-submit-button", disabled: this.disabledState, onClick: () => this.fireClickEvents({ name: BusinessFormClickActions.submit }) }, this.isLoading ? 'Loading...' : 'Submit'))))));
+        return (h(StyledHost, { key: '583d9fda192de2a23255af3a66749bec30e82668' }, h("form", { key: '6de44b1f63b18b7e47c377665878435134155d2a', onSubmit: this.validateAndSubmit }, h("div", { key: 'e83cf5471df4628461978deba6a6269f5a91dc58', class: "row gap-3" }, h(Header1, { key: '228f8d97e1574c714de73884dd564aac2f58bc3c', text: this.title }), h("form-alert", { key: 'e3fe0d57a7ee44f44273481c41b3699e1ccf05d1', text: this.errorMessage, hideAlert: this.hideErrors }), h("div", { key: 'af3fc2e821a601d5046f230735ba52359f3f3710', class: "col-12 mb-4" }, h("justifi-business-core-info", { key: 'e27933c4dd6bfc3746d5071d7cdaec05c1795ec2', formController: this.formController })), h("div", { key: '4c11232954cfb171c0c249465637a3050645f36f', class: "col-12 mb-4" }, h("justifi-legal-address-form", { key: '3d9f7b042822f4b898862a0c89c00fa281daff66', formController: this.formController })), h("div", { key: 'f3b0209fc3cb1b0cd65692f0505ddfcc80a99d0a', class: "col-12 mb-4" }, h("justifi-additional-questions", { key: 'a9c0f77135d8ff2f2c2f2ffba6d288f1f1b60f61', formController: this.formController })), h("div", { key: '085df35d64de470c9f0198d52b698945759afe27', class: "col-12 mb-4" }, h("justifi-business-representative", { key: 'fdb24f037b26f9063d0d1f073d7effb6e3789f7f', formController: this.formController })), h("div", { key: '2b0617d9cd67d296de734c8becbea183555317e4', class: "col-12 d-flex flex-row-reverse" }, h(Button, { key: '7452cb606515807d9d2089330cf5861cd2dcdc1e', type: "submit", disabled: this.disabledState, variant: 'primary', onClick: () => this.clickEvent.emit({ name: BusinessFormClickActions.submit }), isLoading: this.isLoading }, "Submit"))))));
     }
-    static get style() { return JustifiBusinessFormStyle0; }
 }, [1, "justifi-business-form", {
         "authToken": [1, "auth-token"],
         "businessId": [1, "business-id"],
@@ -143,7 +133,7 @@ function defineCustomElement$1() {
     if (typeof customElements === "undefined") {
         return;
     }
-    const components = ["justifi-business-form", "custom-popper", "form-alert", "form-control-date", "form-control-error-text", "form-control-help-text", "form-control-monetary", "form-control-number-masked", "form-control-select", "form-control-text", "form-control-tooltip", "justifi-additional-questions", "justifi-business-core-info", "justifi-business-representative", "justifi-identity-address-form", "justifi-legal-address-form"];
+    const components = ["justifi-business-form", "custom-popper", "form-alert", "form-control-date", "form-control-monetary", "form-control-number-masked", "form-control-select", "form-control-text", "form-control-tooltip", "justifi-additional-questions", "justifi-business-core-info", "justifi-business-representative", "justifi-identity-address-form", "justifi-legal-address-form"];
     components.forEach(tagName => { switch (tagName) {
         case "justifi-business-form":
             if (!customElements.get(tagName)) {
@@ -151,26 +141,16 @@ function defineCustomElement$1() {
             }
             break;
         case "custom-popper":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$g();
-            }
-            break;
-        case "form-alert":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$f();
-            }
-            break;
-        case "form-control-date":
             if (!customElements.get(tagName)) {
                 defineCustomElement$e();
             }
             break;
-        case "form-control-error-text":
+        case "form-alert":
             if (!customElements.get(tagName)) {
                 defineCustomElement$d();
             }
             break;
-        case "form-control-help-text":
+        case "form-control-date":
             if (!customElements.get(tagName)) {
                 defineCustomElement$c();
             }

package/dist/module/justifi-checkout.js

@@ -1,18 +1,22 @@
 import { proxyCustomElement, HTMLElement, createEvent, h } from '@stencil/core/internal/client';
 import { a as ComponentErrorSeverity, C as ComponentErrorCodes } from './ComponentError.js';
-import { g as getErrorMessage, a as getErrorCode } from './utils4.js';
+import { g as getErrorMessage, a as getErrorCode } from './utils3.js';
 import { C as CheckoutService } from './checkout.service.js';
-import { J as JustifiAnalytics } from './Analytics.js';
-import { c as checkPkgVersion } from './check-pkg-version.js';
-import { d as defineCustomElement$e } from './custom-popper2.js';
-import { d as defineCustomElement$d } from './form-control-error-text2.js';
-import { d as defineCustomElement$c } from './form-control-select2.js';
-import { d as defineCustomElement$b } from './form-control-text2.js';
-import { d as defineCustomElement$a } from './form-control-tooltip2.js';
-import { d as defineCustomElement$9 } from './billing-form.js';
-import { d as defineCustomElement$8 } from './checkout-core.js';
-import { d as defineCustomElement$7 } from './new-payment-method.js';
-import { d as defineCustomElement$6 } from './payment-method-form.js';
+import { c as checkPkgVersion, J as JustifiAnalytics } from './check-pkg-version.js';
+import { d as defineCustomElement$j } from './bank-account-form2.js';
+import { d as defineCustomElement$i } from './card-form2.js';
+import { d as defineCustomElement$h } from './custom-popper2.js';
+import { d as defineCustomElement$g } from './form-control-checkbox2.js';
+import { d as defineCustomElement$f } from './form-control-help-text3.js';
+import { d as defineCustomElement$e } from './form-control-radio2.js';
+import { d as defineCustomElement$d } from './form-control-select2.js';
+import { d as defineCustomElement$c } from './form-control-text2.js';
+import { d as defineCustomElement$b } from './form-control-tooltip2.js';
+import { d as defineCustomElement$a } from './hidden-input2.js';
+import { d as defineCustomElement$9 } from './iframe-input2.js';
+import { d as defineCustomElement$8 } from './billing-form.js';
+import { d as defineCustomElement$7 } from './checkout-core.js';
+import { d as defineCustomElement$6 } from './new-payment-method.js';
 import { d as defineCustomElement$5 } from './payment-method-options.js';
 import { d as defineCustomElement$4 } from './save-new-payment-method.js';
 import { d as defineCustomElement$3 } from './saved-payment-method.js';
@@ -125,11 +129,11 @@ const Checkout = /*@__PURE__*/ proxyCustomElement(class Checkout extends HTMLEle
         this.checkoutCoreRef.fillBillingForm(fields);
     }
     render() {
-        return (h("justifi-checkout-core", { key: '24400b7f50a91d2c24e372a030fde6b0a1af9e66', getCheckout: this.getCheckout, authToken: this.authToken, complete: this.complete, disableCreditCard: this.disableCreditCard, disableBankAccount: this.disableBankAccount, disableBnpl: this.disableBnpl, disablePaymentMethodGroup: this.disablePaymentMethodGroup, ref: el => {
+        return (h("justifi-checkout-core", { key: '1a31304be74cae8c70683b9a26319d59f1462362', getCheckout: this.getCheckout, authToken: this.authToken, complete: this.complete, disableCreditCard: this.disableCreditCard, disableBankAccount: this.disableBankAccount, disableBnpl: this.disableBnpl, disablePaymentMethodGroup: this.disablePaymentMethodGroup, ref: el => {
                 if (el) {
                     this.checkoutCoreRef = el;
                 }
-            } }, h("div", { key: '0f530bd18cab94b2ab3707b22908198878d34a4a', slot: "insurance" }, h("slot", { key: '94d10781b8df51ab34df5e414e304537682d8c2c', name: "insurance" }))));
+            } }, h("div", { key: 'ad9e6466d374849862f48c25c61a2a511b8465af', slot: "insurance" }, h("slot", { key: 'eb94e33e0ab10320aede52292f732de5d92e3341', name: "insurance" }))));
     }
     static get watchers() { return {
         "authToken": ["propChanged"],
@@ -155,54 +159,79 @@ function defineCustomElement$1() {
     if (typeof customElements === "undefined") {
         return;
     }
-    const components = ["justifi-checkout", "custom-popper", "form-control-error-text", "form-control-select", "form-control-text", "form-control-tooltip", "justifi-billing-form", "justifi-checkout-core", "justifi-new-payment-method", "justifi-payment-method-form", "justifi-payment-method-options", "justifi-save-new-payment-method", "justifi-saved-payment-method", "justifi-sezzle-payment-method"];
+    const components = ["justifi-checkout", "bank-account-form", "card-form", "custom-popper", "form-control-checkbox", "form-control-help-text", "form-control-radio", "form-control-select", "form-control-text", "form-control-tooltip", "hidden-input", "iframe-input", "justifi-billing-form", "justifi-checkout-core", "justifi-new-payment-method", "justifi-payment-method-options", "justifi-save-new-payment-method", "justifi-saved-payment-method", "justifi-sezzle-payment-method"];
     components.forEach(tagName => { switch (tagName) {
         case "justifi-checkout":
             if (!customElements.get(tagName)) {
                 customElements.define(tagName, Checkout);
             }
             break;
+        case "bank-account-form":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$j();
+            }
+            break;
+        case "card-form":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$i();
+            }
+            break;
         case "custom-popper":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$h();
+            }
+            break;
+        case "form-control-checkbox":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$g();
+            }
+            break;
+        case "form-control-help-text":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$f();
+            }
+            break;
+        case "form-control-radio":
             if (!customElements.get(tagName)) {
                 defineCustomElement$e();
             }
             break;
-        case "form-control-error-text":
+        case "form-control-select":
             if (!customElements.get(tagName)) {
                 defineCustomElement$d();
             }
             break;
-        case "form-control-select":
+        case "form-control-text":
             if (!customElements.get(tagName)) {
                 defineCustomElement$c();
             }
             break;
-        case "form-control-text":
+        case "form-control-tooltip":
             if (!customElements.get(tagName)) {
                 defineCustomElement$b();
             }
             break;
-        case "form-control-tooltip":
+        case "hidden-input":
             if (!customElements.get(tagName)) {
                 defineCustomElement$a();
             }
             break;
-        case "justifi-billing-form":
+        case "iframe-input":
             if (!customElements.get(tagName)) {
                 defineCustomElement$9();
             }
             break;
-        case "justifi-checkout-core":
+        case "justifi-billing-form":
             if (!customElements.get(tagName)) {
                 defineCustomElement$8();
             }
             break;
-        case "justifi-new-payment-method":
+        case "justifi-checkout-core":
             if (!customElements.get(tagName)) {
                 defineCustomElement$7();
             }
             break;
-        case "justifi-payment-method-form":
+        case "justifi-new-payment-method":
             if (!customElements.get(tagName)) {
                 defineCustomElement$6();
             }

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

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

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

@@ -0,0 +1,77 @@
+import { proxyCustomElement, HTMLElement, h } from '@stencil/core/internal/client';
+import { q as queryParams, c as clearParams } from './checkouts-list-params-state.js';
+import { S as StyledHost } from './styled-host.js';
+import './details.js';
+import { d as defineCustomElement$5 } from './custom-popper2.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 './table-filters-menu2.js';
+
+const CheckoutsListFilters = /*@__PURE__*/ proxyCustomElement(class CheckoutsListFilters extends HTMLElement {
+    constructor() {
+        super();
+        this.__registerHost();
+        this.__attachShadow();
+        this.setParamsOnChange = (name, value) => {
+            queryParams[name] = value;
+        };
+    }
+    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(StyledHost, { key: '7eedab4f46529871c876c5b36c3dfdc4a76442bc' }, h("table-filters-menu", { key: '645593908d9b2b258a520d6fd469f668a34d5980', params: Object.assign({}, queryParams), clearParams: clearParams }, h("div", { key: 'dd06db2469e9666efd44f0625bd41a69dd45fb1a', class: "grid-cols-2 gap-3 p-1" }, h("div", { key: 'dba0a96a17a1c255236e0733fe5394638f1abc1f', class: "p-2" }, h("form-control-select", { key: 'a833d0ece1a88f04f9a68a27098c035b71bc2d86', name: "status", label: "Status", options: this.checkoutStatusOptions, inputHandler: this.setParamsOnChange, defaultValue: queryParams.status || '' })), h("div", { key: 'bb90e2e96b0542e8fb00a2ccd7cbb43f4dc8b6a8', class: "p-2" }, h("form-control-select", { key: 'c214d31111ad970f9f40c0b6b948302e4702d2ba', name: "payment_mode", label: "Payment Mode", options: this.checkoutPaymentModeOptions, inputHandler: this.setParamsOnChange, defaultValue: queryParams.payment_mode || '' }))))));
+    }
+}, [1, "justifi-checkouts-list-filters"]);
+function defineCustomElement$1() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["justifi-checkouts-list-filters", "custom-popper", "form-control-select", "form-control-tooltip", "table-filters-menu"];
+    components.forEach(tagName => { switch (tagName) {
+        case "justifi-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-select":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$4();
+            }
+            break;
+        case "form-control-tooltip":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$3();
+            }
+            break;
+        case "table-filters-menu":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$2();
+            }
+            break;
+    } });
+}
+defineCustomElement$1();
+
+const JustifiCheckoutsListFilters = CheckoutsListFilters;
+const defineCustomElement = defineCustomElement$1;
+
+export { JustifiCheckoutsListFilters, defineCustomElement };