@justifi/webcomponents 4.23.1 → 5.0.0-rc-1

package/dist/module/payment-provisioning-core.js

@@ -1,14 +1,15 @@
 import { proxyCustomElement, HTMLElement, createEvent, h } from '@stencil/core/internal/client';
-import { c as BusinessFormClickActions } from './business-form-types.js';
 import { C as ComponentErrorCodes, a as ComponentErrorSeverity } from './ComponentError.js';
 import { a as checkProvisioningStatus } from './helpers.js';
+import { t as text } from './parts.js';
 import { S as StyledHost } from './styled-host.js';
-import { d as defineCustomElement$y } from './custom-popper2.js';
-import { d as defineCustomElement$x } from './form-control-checkbox2.js';
-import { d as defineCustomElement$w } from './form-control-date2.js';
-import { d as defineCustomElement$v } from './form-control-error-text2.js';
-import { d as defineCustomElement$u } from './form-control-file2.js';
-import { d as defineCustomElement$t } 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$w } from './custom-popper2.js';
+import { d as defineCustomElement$v } from './form-control-checkbox2.js';
+import { d as defineCustomElement$u } from './form-control-date2.js';
+import { d as defineCustomElement$t } from './form-control-file2.js';
 import { d as defineCustomElement$s } from './form-control-monetary2.js';
 import { d as defineCustomElement$r } from './form-control-number-masked2.js';
 import { d as defineCustomElement$q } from './form-control-select2.js';
@@ -42,10 +43,9 @@ const PaymentProvisioningCore = /*@__PURE__*/ proxyCustomElement(class PaymentPr
     constructor() {
         super();
         this.__registerHost();
-        this.__attachShadow();
         this.clickEvent = createEvent(this, "click-event", 7);
         this.errorEvent = createEvent(this, "error-event", 7);
-        this.submitted = createEvent(this, "submitted", 7);
+        this.submitEvent = createEvent(this, "submit-event", 7);
         this.setBusinessProvisioned = () => {
             this.getBusiness({
                 onSuccess: (response) => {
@@ -70,10 +70,10 @@ const PaymentProvisioningCore = /*@__PURE__*/ proxyCustomElement(class PaymentPr
         this.postProvisioningData = () => {
             this.postProvisioning({
                 onSuccess: (response) => {
-                    this.submitted.emit({ data: { response } });
+                    this.submitEvent.emit({ response: response });
                 },
                 onError: ({ error, code, severity }) => {
-                    this.submitted.emit({ data: { error } });
+                    this.submitEvent.emit({ response: { error } });
                     this.errorEvent.emit({
                         message: error,
                         errorCode: code,
@@ -110,6 +110,9 @@ const PaymentProvisioningCore = /*@__PURE__*/ proxyCustomElement(class PaymentPr
         this.getBusiness = undefined;
         this.postProvisioning = undefined;
     }
+    handleFormCompleted() {
+        this.postProvisioningData();
+    }
     componentWillLoad() {
         this.getBusiness && this.setBusinessProvisioned();
         this.refs = [this.coreInfoRef, this.legalAddressRef, this.additionalQuestionsRef, this.representativeRef, this.ownersRef, this.bankAccountRef, this.documentUploadRef, this.termsRef];
@@ -130,9 +133,9 @@ const PaymentProvisioningCore = /*@__PURE__*/ proxyCustomElement(class PaymentPr
         this.loading = event.detail;
     }
     render() {
-        return (h(StyledHost, { key: '80f2730a6a4e273391888b086c3633a3dec012b8', exportparts: 'label,input,input-invalid' }, h("div", { key: 'b4e7be2fed14b404ee7bcbe42c3c1c54bb78fdb6', class: 'row gap-3' }, h("h1", { key: 'f477beb7934a94a74dfc6b8a9c18cc54a720f70e' }, this.formTitle), h("justifi-payment-provisioning-form-steps", { key: 'e74aa3a01cfe7550f4917d28ccda1aca211d9394', businessId: this.businessId, authToken: this.authToken, refs: this.refs, currentStep: this.currentStep, allowOptionalFields: this.allowOptionalFields, handleFormLoading: this.handleFormLoading, onFormCompleted: () => this.postProvisioningData() }), h("div", { key: '26a585ec4b6b677cb01ac17696269168887f4c76', class: 'd-flex justify-content-between align-items-center' }, h("div", { key: 'ca5ddc176f8c2eb3315620076b401e47f45039bd', class: 'd-flex align-items-center' }, this.stepCounter), h("justifi-payment-provisioning-form-buttons", { key: '8299387bf859b33c829d29d66947c3c053ffa53c', currentStep: this.currentStep, totalSteps: this.totalSteps, formLoading: this.loading, formDisabled: this.formDisabled, previousStepButtonOnClick: this.previousStepButtonOnClick, nextStepButtonOnClick: this.nextStepButtonOnClick })))));
+        return (h(StyledHost, { key: 'df7f6b5366335e0bd1082bb865c8a460a0b62704' }, h("div", { key: '694f4b13ef333959c6efa573d78f415379fbe4fd', class: 'row gap-3' }, h(Header1, { key: 'd69dafa307c75ed3583551d86f87b3ec29404218', text: this.formTitle }), h("justifi-payment-provisioning-form-steps", { key: 'd33e37ce3f2fdce1eb462d096be9baede1ccee9b', businessId: this.businessId, authToken: this.authToken, refs: this.refs, currentStep: this.currentStep, allowOptionalFields: this.allowOptionalFields, handleFormLoading: this.handleFormLoading }), h("div", { key: '8541f7a1c6a69820b73c976894109b5962f26067', class: 'd-flex justify-content-between align-items-center' }, h("div", { key: '1a8a0e9af596aa1d7eced5309e1fa2e399f33705', class: 'd-flex align-items-center', part: text }, this.stepCounter), h("justifi-payment-provisioning-form-buttons", { key: 'dd29d8b8d4da81f79c2375a5db99dfe796183d09', currentStep: this.currentStep, totalSteps: this.totalSteps, formLoading: this.loading, formDisabled: this.formDisabled, previousStepButtonOnClick: this.previousStepButtonOnClick, nextStepButtonOnClick: this.nextStepButtonOnClick })))));
     }
-}, [1, "justifi-payment-provisioning-core", {
+}, [0, "justifi-payment-provisioning-core", {
         "businessId": [1, "business-id"],
         "authToken": [1, "auth-token"],
         "allowOptionalFields": [4, "allow-optional-fields"],
@@ -143,12 +146,12 @@ const PaymentProvisioningCore = /*@__PURE__*/ proxyCustomElement(class PaymentPr
         "businessProvisioned": [32],
         "currentStep": [32],
         "errorMessage": [32]
-    }, [[0, "formLoading", "handleFormLoading"]]]);
+    }, [[0, "formCompleted", "handleFormCompleted"], [0, "formLoading", "handleFormLoading"]]]);
 function defineCustomElement() {
     if (typeof customElements === "undefined") {
         return;
     }
-    const components = ["justifi-payment-provisioning-core", "custom-popper", "form-control-checkbox", "form-control-date", "form-control-error-text", "form-control-file", "form-control-help-text", "form-control-monetary", "form-control-number-masked", "form-control-select", "form-control-text", "form-control-tooltip", "justifi-additional-questions-form-step", "justifi-additional-questions-form-step-core", "justifi-business-bank-account-form-step", "justifi-business-core-info-form-step", "justifi-business-core-info-form-step-core", "justifi-business-document-upload-form-step", "justifi-business-document-upload-input-group", "justifi-business-documents-on-file", "justifi-business-owners-form-step", "justifi-business-owners-form-step-core", "justifi-business-representative-form-inputs", "justifi-business-representative-form-step", "justifi-business-representative-form-step-core", "justifi-business-terms-conditions-form-step", "justifi-business-terms-conditions-text", "justifi-identity-address-form", "justifi-legal-address-form-step", "justifi-legal-address-form-step-core", "justifi-owner-form", "justifi-payment-provisioning-form-buttons", "justifi-payment-provisioning-form-steps", "owner-form-core", "owner-form-inputs"];
+    const components = ["justifi-payment-provisioning-core", "custom-popper", "form-control-checkbox", "form-control-date", "form-control-file", "form-control-monetary", "form-control-number-masked", "form-control-select", "form-control-text", "form-control-tooltip", "justifi-additional-questions-form-step", "justifi-additional-questions-form-step-core", "justifi-business-bank-account-form-step", "justifi-business-core-info-form-step", "justifi-business-core-info-form-step-core", "justifi-business-document-upload-form-step", "justifi-business-document-upload-input-group", "justifi-business-documents-on-file", "justifi-business-owners-form-step", "justifi-business-owners-form-step-core", "justifi-business-representative-form-inputs", "justifi-business-representative-form-step", "justifi-business-representative-form-step-core", "justifi-business-terms-conditions-form-step", "justifi-business-terms-conditions-text", "justifi-identity-address-form", "justifi-legal-address-form-step", "justifi-legal-address-form-step-core", "justifi-owner-form", "justifi-payment-provisioning-form-buttons", "justifi-payment-provisioning-form-steps", "owner-form-core", "owner-form-inputs"];
     components.forEach(tagName => { switch (tagName) {
         case "justifi-payment-provisioning-core":
             if (!customElements.get(tagName)) {
@@ -156,31 +159,21 @@ function defineCustomElement() {
             }
             break;
         case "custom-popper":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$y();
-            }
-            break;
-        case "form-control-checkbox":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$x();
-            }
-            break;
-        case "form-control-date":
             if (!customElements.get(tagName)) {
                 defineCustomElement$w();
             }
             break;
-        case "form-control-error-text":
+        case "form-control-checkbox":
             if (!customElements.get(tagName)) {
                 defineCustomElement$v();
             }
             break;
-        case "form-control-file":
+        case "form-control-date":
             if (!customElements.get(tagName)) {
                 defineCustomElement$u();
             }
             break;
-        case "form-control-help-text":
+        case "form-control-file":
             if (!customElements.get(tagName)) {
                 defineCustomElement$t();
             }

package/dist/module/payment-provisioning-form-buttons.js

@@ -1,6 +1,8 @@
 import { proxyCustomElement, HTMLElement, h } from '@stencil/core/internal/client';
-import { c as BusinessFormClickActions } from './business-form-types.js';
+import './Business.js';
+import { a as BusinessFormClickActions } from './event-types2.js';
 import { B as Button } from './button.js';
+import './details.js';
 
 const PaymentProvisioningFormButtons = /*@__PURE__*/ proxyCustomElement(class PaymentProvisioningFormButtons extends HTMLElement {
     constructor() {
@@ -23,7 +25,7 @@ const PaymentProvisioningFormButtons = /*@__PURE__*/ proxyCustomElement(class Pa
         return this.currentStep === this.totalSteps;
     }
     render() {
-        return (h("div", { key: '3df3796f2bb35819373564c0002e35d14c85e360', class: 'd-flex gap-2' }, h(Button, { key: '3f8fd4e288b2eed6776c77b44dda816e8a0580cd', variant: "secondary", type: "button", onClick: () => this.previousStepButtonOnClick(), disabled: this.formDisabled, hidden: !this.showPreviousStepButton }, "Previous"), h(Button, { key: '83c7d2405d6e4f88f721a95250aa847a6999a211', variant: "primary", type: "button", onClick: (e) => this.nextStepButtonOnClick(e, BusinessFormClickActions.nextStep), disabled: this.formDisabled, isLoading: this.formLoading, hidden: !this.showNextStepButton }, "Next"), h(Button, { key: 'd87bcdc9bea52b11307e31bd1d99636be05d7156', variant: "primary", type: "submit", onClick: (e) => this.nextStepButtonOnClick(e, BusinessFormClickActions.submit), disabled: this.formDisabled, isLoading: this.formLoading, hidden: !this.showSubmitButton }, "Submit")));
+        return (h("div", { key: 'e1ab54d1e838fcf447bc27cb7a24360c683d6ad8', class: 'd-flex gap-2' }, h(Button, { key: '203ce170dcd2c39edbd238cdacbd5a778d6e3a39', variant: "secondary", type: "button", onClick: () => this.previousStepButtonOnClick(), disabled: this.formDisabled, hidden: !this.showPreviousStepButton }, "Previous"), h(Button, { key: '820000f2ffc9a3d037b12ca11b724169de0747b8', variant: "primary", type: "button", onClick: (e) => this.nextStepButtonOnClick(e, BusinessFormClickActions.nextStep), disabled: this.formDisabled, isLoading: this.formLoading, hidden: !this.showNextStepButton }, "Next"), h(Button, { key: '5da1da1e44963c1138b4ecf9619b43f7ff0caa06', variant: "primary", type: "submit", onClick: (e) => this.nextStepButtonOnClick(e, BusinessFormClickActions.submit), disabled: this.formDisabled, isLoading: this.formLoading, hidden: !this.showSubmitButton }, "Submit")));
     }
 }, [0, "justifi-payment-provisioning-form-buttons", {
         "currentStep": [2, "current-step"],

package/dist/module/payment-provisioning-form-steps.js

@@ -1,10 +1,8 @@
-import { proxyCustomElement, HTMLElement, createEvent, h } from '@stencil/core/internal/client';
-import { d as defineCustomElement$w } from './custom-popper2.js';
-import { d as defineCustomElement$v } from './form-control-checkbox2.js';
-import { d as defineCustomElement$u } from './form-control-date2.js';
-import { d as defineCustomElement$t } from './form-control-error-text2.js';
-import { d as defineCustomElement$s } from './form-control-file2.js';
-import { d as defineCustomElement$r } from './form-control-help-text2.js';
+import { proxyCustomElement, HTMLElement, h } from '@stencil/core/internal/client';
+import { d as defineCustomElement$u } from './custom-popper2.js';
+import { d as defineCustomElement$t } from './form-control-checkbox2.js';
+import { d as defineCustomElement$s } from './form-control-date2.js';
+import { d as defineCustomElement$r } from './form-control-file2.js';
 import { d as defineCustomElement$q } from './form-control-monetary2.js';
 import { d as defineCustomElement$p } from './form-control-number-masked2.js';
 import { d as defineCustomElement$o } from './form-control-select2.js';
@@ -36,7 +34,6 @@ const PaymentProvisioningFormSteps = /*@__PURE__*/ proxyCustomElement(class Paym
     constructor() {
         super();
         this.__registerHost();
-        this.formCompleted = createEvent(this, "formCompleted", 7);
         this.componentStepMapping = {
             0: () => h("justifi-business-core-info-form-step", { businessId: this.businessId, authToken: this.authToken, ref: (el) => this.refs[0] = el, allowOptionalFields: this.allowOptionalFields }),
             1: () => h("justifi-legal-address-form-step", { businessId: this.businessId, authToken: this.authToken, ref: (el) => this.refs[1] = el, allowOptionalFields: this.allowOptionalFields }),
@@ -45,7 +42,7 @@ const PaymentProvisioningFormSteps = /*@__PURE__*/ proxyCustomElement(class Paym
             4: () => h("justifi-business-owners-form-step", { businessId: this.businessId, authToken: this.authToken, ref: (el) => this.refs[4] = el, allowOptionalFields: this.allowOptionalFields }),
             5: () => h("justifi-business-bank-account-form-step", { businessId: this.businessId, authToken: this.authToken, ref: (el) => this.refs[5] = el, onFormLoading: this.handleFormLoading, allowOptionalFields: this.allowOptionalFields }),
             6: () => h("justifi-business-document-upload-form-step", { businessId: this.businessId, authToken: this.authToken, ref: (el) => this.refs[6] = el, onFormLoading: this.handleFormLoading, allowOptionalFields: this.allowOptionalFields }),
-            7: () => h("justifi-business-terms-conditions-form-step", { businessId: this.businessId, authToken: this.authToken, ref: (el) => this.refs[7] = el, onFormLoading: this.handleFormLoading, allowOptionalFields: this.allowOptionalFields, onSubmitted: () => this.formCompleted.emit() }),
+            7: () => h("justifi-business-terms-conditions-form-step", { businessId: this.businessId, authToken: this.authToken, ref: (el) => this.refs[7] = el, onFormLoading: this.handleFormLoading, allowOptionalFields: this.allowOptionalFields }),
         };
         this.businessId = undefined;
         this.authToken = undefined;
@@ -58,7 +55,7 @@ const PaymentProvisioningFormSteps = /*@__PURE__*/ proxyCustomElement(class Paym
         return this.componentStepMapping[this.currentStep]();
     }
     render() {
-        return (h("div", { key: '8f02aa3223e38cda70319c127f60e5d2f3c5abe5', class: 'col-12 mb-4' }, this.currentStepComponent));
+        return (h("div", { key: '95db2f73894dc4adff2c17298f5f0791c8db463b', class: 'col-12 mb-4' }, this.currentStepComponent));
     }
 }, [0, "justifi-payment-provisioning-form-steps", {
         "businessId": [1, "business-id"],
@@ -72,7 +69,7 @@ function defineCustomElement() {
     if (typeof customElements === "undefined") {
         return;
     }
-    const components = ["justifi-payment-provisioning-form-steps", "custom-popper", "form-control-checkbox", "form-control-date", "form-control-error-text", "form-control-file", "form-control-help-text", "form-control-monetary", "form-control-number-masked", "form-control-select", "form-control-text", "form-control-tooltip", "justifi-additional-questions-form-step", "justifi-additional-questions-form-step-core", "justifi-business-bank-account-form-step", "justifi-business-core-info-form-step", "justifi-business-core-info-form-step-core", "justifi-business-document-upload-form-step", "justifi-business-document-upload-input-group", "justifi-business-documents-on-file", "justifi-business-owners-form-step", "justifi-business-owners-form-step-core", "justifi-business-representative-form-inputs", "justifi-business-representative-form-step", "justifi-business-representative-form-step-core", "justifi-business-terms-conditions-form-step", "justifi-business-terms-conditions-text", "justifi-identity-address-form", "justifi-legal-address-form-step", "justifi-legal-address-form-step-core", "justifi-owner-form", "owner-form-core", "owner-form-inputs"];
+    const components = ["justifi-payment-provisioning-form-steps", "custom-popper", "form-control-checkbox", "form-control-date", "form-control-file", "form-control-monetary", "form-control-number-masked", "form-control-select", "form-control-text", "form-control-tooltip", "justifi-additional-questions-form-step", "justifi-additional-questions-form-step-core", "justifi-business-bank-account-form-step", "justifi-business-core-info-form-step", "justifi-business-core-info-form-step-core", "justifi-business-document-upload-form-step", "justifi-business-document-upload-input-group", "justifi-business-documents-on-file", "justifi-business-owners-form-step", "justifi-business-owners-form-step-core", "justifi-business-representative-form-inputs", "justifi-business-representative-form-step", "justifi-business-representative-form-step-core", "justifi-business-terms-conditions-form-step", "justifi-business-terms-conditions-text", "justifi-identity-address-form", "justifi-legal-address-form-step", "justifi-legal-address-form-step-core", "justifi-owner-form", "owner-form-core", "owner-form-inputs"];
     components.forEach(tagName => { switch (tagName) {
         case "justifi-payment-provisioning-form-steps":
             if (!customElements.get(tagName)) {
@@ -80,31 +77,21 @@ function defineCustomElement() {
             }
             break;
         case "custom-popper":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$w();
-            }
-            break;
-        case "form-control-checkbox":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$v();
-            }
-            break;
-        case "form-control-date":
             if (!customElements.get(tagName)) {
                 defineCustomElement$u();
             }
             break;
-        case "form-control-error-text":
+        case "form-control-checkbox":
             if (!customElements.get(tagName)) {
                 defineCustomElement$t();
             }
             break;
-        case "form-control-file":
+        case "form-control-date":
             if (!customElements.get(tagName)) {
                 defineCustomElement$s();
             }
             break;
-        case "form-control-help-text":
+        case "form-control-file":
             if (!customElements.get(tagName)) {
                 defineCustomElement$r();
             }

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

@@ -3,71 +3,56 @@ import './Checkout.js';
 import { p as pagingDefaults } from './Pagination.js';
 import './Payment.js';
 import './SubAccount.js';
-import { T as Table, a as TableLoadingState, b as TableEmptyState, c as TableErrorState } from './table.js';
-import { o as onFilterChange } from './utils3.js';
+import { f as tableHeadCell, g as getAlternateTableCellPart, j as table, k as tableCell } from './parts.js';
+import { T as TableClickActions, a as Table, b as TableLoadingState, c as TableEmptyState, d as TableErrorState } from './event-types.js';
+import './details.js';
 import { M as MapPaymentStatusToBadge } from './payments-status.js';
 import { j as convertToLocal, c as formatCurrency } from './utils2.js';
-import { d as defineCustomElement$9 } from './custom-popper2.js';
-import { d as defineCustomElement$8 } from './form-control-date2.js';
-import { d as defineCustomElement$7 } from './form-control-error-text2.js';
-import { d as defineCustomElement$6 } from './form-control-select2.js';
-import { d as defineCustomElement$5 } from './form-control-text2.js';
-import { d as defineCustomElement$4 } from './form-control-tooltip2.js';
-import { d as defineCustomElement$3 } from './pagination-menu2.js';
-import { d as defineCustomElement$2 } from './payments-list-filters2.js';
-import { d as defineCustomElement$1 } from './table-filters-menu2.js';
+import { o as onQueryParamsChange, q as queryParams } from './payments-list-params-state.js';
+import { d as defineCustomElement$1 } from './pagination-menu2.js';
 
 const defaultColumnsKeys = 'created_at,amount,status,payment_type,description,payers_name,last_four_digits';
 const paymentTableColumns = {
-    created_at: () => (h("th", { part: "table-head-cell", scope: "col", title: "The date and time each payment was made" }, "Date")),
-    amount: () => (h("th", { part: "table-head-cell", scope: "col", title: "The dollar amount of each payment" }, "Amount")),
-    status: () => (h("th", { part: "table-head-cell", scope: "col", title: "The current status of each payment" }, "Status")),
-    payment_type: () => (h("th", { part: "table-head-cell", scope: "col", title: "The type of each payment" }, "Type")),
-    description: () => (h("th", { part: "table-head-cell", scope: "col", title: "The payment description, if you provided one" }, "Description")),
-    payers_name: () => (h("th", { part: "table-head-cell", scope: "col", title: "The name associated with the payment method" }, "Account Holder")),
-    last_four_digits: () => (h("th", { part: "table-head-cell", scope: "col", title: "The brand and last 4 digits of the payment method" }, "Payment Method")),
+    created_at: () => (h("th", { part: tableHeadCell, scope: "col", title: "The date and time each payment was made" }, "Date")),
+    amount: () => (h("th", { part: tableHeadCell, scope: "col", title: "The dollar amount of each payment" }, "Amount")),
+    status: () => (h("th", { part: tableHeadCell, scope: "col", title: "The current status of each payment" }, "Status")),
+    payment_type: () => (h("th", { part: tableHeadCell, scope: "col", title: "The type of each payment" }, "Type")),
+    description: () => (h("th", { part: tableHeadCell, scope: "col", title: "The payment description, if you provided one" }, "Description")),
+    payers_name: () => (h("th", { part: tableHeadCell, scope: "col", title: "The name associated with the payment method" }, "Account Holder")),
+    last_four_digits: () => (h("th", { part: tableHeadCell, scope: "col", title: "The brand and last 4 digits of the payment method" }, "Payment Method")),
 };
 const paymentTableCells = {
-    created_at: (value) => (h("td", { part: "table-cell" },
+    created_at: (value, index) => (h("td", { part: getAlternateTableCellPart(index) },
         h("div", { class: "fw-bold" }, convertToLocal(value, { showDisplayDate: true })),
         h("div", { class: "fw-bold" }, convertToLocal(value, { showTime: true })))),
-    amount: (value) => (h("td", { part: "table-cell" }, formatCurrency(value, true, true))),
-    status: (value) => (h("td", { part: "table-cell", innerHTML: MapPaymentStatusToBadge(value) })),
-    payment_type: (value) => (h("td", { part: "table-cell" }, value)),
-    description: (value) => (h("td", { part: "table-cell" }, value)),
-    payers_name: (value) => (h("td", { part: "table-cell" }, value)),
-    last_four_digits: (value) => (h("td", { part: "table-cell" }, value))
+    amount: (value, index) => (h("td", { part: getAlternateTableCellPart(index) }, formatCurrency(value, true, true))),
+    status: (value, index) => (h("td", { part: getAlternateTableCellPart(index), innerHTML: MapPaymentStatusToBadge(value) })),
+    payment_type: (value, index) => (h("td", { part: getAlternateTableCellPart(index) }, value)),
+    description: (value, index) => (h("td", { part: getAlternateTableCellPart(index) }, value)),
+    payers_name: (value, index) => (h("td", { part: getAlternateTableCellPart(index) }, value)),
+    last_four_digits: (value, index) => (h("td", { part: getAlternateTableCellPart(index) }, value))
 };
 
 const PaymentsListCore = /*@__PURE__*/ proxyCustomElement(class PaymentsListCore extends HTMLElement {
     constructor() {
         super();
         this.__registerHost();
-        this.rowClicked = createEvent(this, "payment-row-clicked", 7);
+        this.clickEvent = createEvent(this, "click-event", 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.pagingParams = { before_cursor: beforeCursor };
+            this.clickEvent.emit({ name: TableClickActions.previous });
         };
         this.handleClickNext = (afterCursor) => {
-            const newParams = Object.assign({}, this.params);
-            delete newParams.before_cursor;
-            this.params = Object.assign(Object.assign({}, newParams), { after_cursor: afterCursor });
+            this.pagingParams = { after_cursor: afterCursor };
+            this.clickEvent.emit({ name: TableClickActions.next });
         };
         this.rowClickHandler = (e) => {
             const clickedPaymentID = e.target.closest('tr').dataset.rowEntityId;
             if (!clickedPaymentID)
                 return;
-            this.rowClicked.emit(this.payments.find((payment) => payment.id === clickedPaymentID));
-        };
-        this.setParamsOnChange = (name, value) => {
-            let newParams = { [name]: value };
-            this.params = onFilterChange(newParams, this.params);
-        };
-        this.clearParams = () => {
-            this.errorMessage = '';
-            this.params = {};
+            const paymentData = this.payments.find((payment) => payment.id === clickedPaymentID);
+            this.clickEvent.emit({ name: TableClickActions.row, data: paymentData });
         };
         this.getPayments = undefined;
         this.columns = undefined;
@@ -76,7 +61,7 @@ const PaymentsListCore = /*@__PURE__*/ proxyCustomElement(class PaymentsListCore
         this.loading = true;
         this.errorMessage = undefined;
         this.paging = pagingDefaults;
-        this.params = {};
+        this.pagingParams = {};
     }
     updateOnPropChange() {
         this.fetchData();
@@ -86,11 +71,18 @@ const PaymentsListCore = /*@__PURE__*/ proxyCustomElement(class PaymentsListCore
         if (this.getPayments) {
             this.fetchData();
         }
+        onQueryParamsChange('set', () => {
+            this.pagingParams = {};
+        });
+        onQueryParamsChange('reset', () => {
+            this.pagingParams = {};
+            this.errorMessage = '';
+        });
     }
     fetchData() {
         this.loading = true;
         this.getPayments({
-            params: this.params,
+            params: this.requestParams,
             onSuccess: ({ payments, pagingInfo }) => {
                 this.payments = payments;
                 this.paging = pagingInfo;
@@ -120,11 +112,16 @@ const PaymentsListCore = /*@__PURE__*/ proxyCustomElement(class PaymentsListCore
     get showRowData() {
         return !this.showEmptyState && !this.showErrorState && !this.loading;
     }
+    get requestParams() {
+        const combinedParams = Object.assign(Object.assign({}, queryParams), this.pagingParams);
+        return combinedParams;
+    }
     render() {
-        return (h("div", { key: 'f9ad62dd7a3b3112af2b9d9ca3165a68730ad838' }, h("payments-list-filters", { key: '25453b8b93c43d6f9629688771bba820306cef5c', params: this.params, setParamsOnChange: this.setParamsOnChange, clearParams: this.clearParams }), h("div", { key: 'ec2b2799972ae5baeaed5c8f9547f1445295965b', class: "table-wrapper" }, h("table", { key: '323a3de363600940aecd8234b9d4e801bd0f0b70', class: "table table-hover" }, h("thead", { key: '9505ebb231fdb87c6be5a1e4313d8fee2afb1a0b', class: "table-head sticky-top", part: "table-head" }, h("tr", { key: '995bd6b6f7ab40891cf4a9aa63cfb9adc92d596e', class: "table-light text-nowrap", part: "table-head-row" }, this.paymentsTable.columnData.map((column) => column))), h("tbody", { key: 'e85cd3ca47511afb2afdaf4cca9547b62d9ecb9e', class: "table-body", part: "table-body" }, h(TableLoadingState, { key: 'a1f20762b14b9cf0f03f0b36ce6cdae8bdb8f3c9', columnSpan: this.paymentsTable.columnData.length, isLoading: this.loading }), h(TableEmptyState, { key: '1e1e89ec8a2cbf6abe7d2183f5e1499374a9f33f', isEmpty: this.showEmptyState, columnSpan: this.paymentsTable.columnData.length }), h(TableErrorState, { key: 'bfdd4bf25ab283f015cecf72603ea1d7f8921ee3', columnSpan: this.paymentsTable.columnData.length, errorMessage: this.errorMessage }), this.showRowData && this.paymentsTable.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: '0832e67b126a1cd7d8d936df635dc87023a683b0', class: "sticky-bottom" }, h("tr", { key: '2536f710f027d8fb0865c88b86a30111f012977e', class: "table-light align-middle" }, h("td", { key: '5f0c707ed1d855db83531297af9ace5d1212d35d', part: "pagination-bar", colSpan: this.paymentsTable.columnData.length }, h("pagination-menu", { key: '01f751294ff54854be1434e15369153a5527414a', paging: Object.assign(Object.assign({}, this.paging), { handleClickPrevious: this.handleClickPrevious, handleClickNext: this.handleClickNext }), params: this.params })))))))));
+        return (h("div", { key: '6d3aeab1a53d5a9f73ed770de5d936e290189a9e' }, h("div", { key: 'f9750011da7c0bf0e4bc5eb91fc5c54489798890', class: "table-wrapper" }, h("table", { key: '7361cc478802a1de5513bf92ea9ec7f105168d55', class: "table table-hover", part: table }, h("thead", { key: '239402e85ae6537f4fc605b06f9f747233aef37a', class: "table-head sticky-top" }, h("tr", { key: 'f3330dae27878b313848a057d1094e094bdd66f4', class: "table-light text-nowrap" }, this.paymentsTable.columnData.map((column) => column))), h("tbody", { key: '1441e8920b68c7cf759188694b1cbc65a2c37795', class: "table-body" }, h(TableLoadingState, { key: '55bf8e8b8c6c859ce363ce30fb6db75f328ebca1', columnSpan: this.paymentsTable.columnData.length, isLoading: this.loading }), h(TableEmptyState, { key: '20d7f82636bc4b1a54a56ca89f2444261e26c0d6', isEmpty: this.showEmptyState, columnSpan: this.paymentsTable.columnData.length }), h(TableErrorState, { key: '10c160fafc746dece6e3837aa43021e48d7f49b9', columnSpan: this.paymentsTable.columnData.length, errorMessage: this.errorMessage }), this.showRowData && this.paymentsTable.rowData.map((data, index) => (h("tr", { "data-test-id": "table-row", "data-row-entity-id": this.entityId[index], onClick: this.rowClickHandler }, data)))), this.paging && (h("tfoot", { key: '058476cc6c3369cf4700203c28f3d2c9c002656b', class: "sticky-bottom" }, h("tr", { key: '87c051940f9e49e64d661d12f5387ef5263091b4', class: "table-light align-middle" }, h("td", { key: '06fe26d1f9d57c6598fe71ebb9b48780a35fba5a', part: tableCell, colSpan: this.paymentsTable.columnData.length }, h("pagination-menu", { key: 'd23dedce32252f08d0a24eb4a474e9ee62ebd0e1', paging: Object.assign(Object.assign({}, this.paging), { handleClickPrevious: this.handleClickPrevious, handleClickNext: this.handleClickNext }) })))))))));
     }
     static get watchers() { return {
-        "params": ["updateOnPropChange"],
+        "queryParams": ["updateOnPropChange"],
+        "pagingParams": ["updateOnPropChange"],
         "getPayments": ["updateOnPropChange"],
         "columns": ["updateOnPropChange"]
     }; }
@@ -136,9 +133,10 @@ const PaymentsListCore = /*@__PURE__*/ proxyCustomElement(class PaymentsListCore
         "loading": [32],
         "errorMessage": [32],
         "paging": [32],
-        "params": [32]
+        "pagingParams": [32]
     }, undefined, {
-        "params": ["updateOnPropChange"],
+        "queryParams": ["updateOnPropChange"],
+        "pagingParams": ["updateOnPropChange"],
         "getPayments": ["updateOnPropChange"],
         "columns": ["updateOnPropChange"]
     }]);
@@ -146,54 +144,14 @@ function defineCustomElement() {
     if (typeof customElements === "undefined") {
         return;
     }
-    const components = ["payments-list-core", "custom-popper", "form-control-date", "form-control-error-text", "form-control-select", "form-control-text", "form-control-tooltip", "pagination-menu", "payments-list-filters", "table-filters-menu"];
+    const components = ["payments-list-core", "pagination-menu"];
     components.forEach(tagName => { switch (tagName) {
         case "payments-list-core":
             if (!customElements.get(tagName)) {
                 customElements.define(tagName, PaymentsListCore);
             }
             break;
-        case "custom-popper":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$9();
-            }
-            break;
-        case "form-control-date":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$8();
-            }
-            break;
-        case "form-control-error-text":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$7();
-            }
-            break;
-        case "form-control-select":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$6();
-            }
-            break;
-        case "form-control-text":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$5();
-            }
-            break;
-        case "form-control-tooltip":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$4();
-            }
-            break;
         case "pagination-menu":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$3();
-            }
-            break;
-        case "payments-list-filters":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$2();
-            }
-            break;
-        case "table-filters-menu":
             if (!customElements.get(tagName)) {
                 defineCustomElement$1();
             }

package/dist/module/payments-list-params-state.js

@@ -0,0 +1,10 @@
+import { c as createStore } from './index2.js';
+
+const initialState = {};
+const paymentsListQueryParams = createStore(() => initialState);
+const { state: queryParams, on: onQueryParamsChange } = paymentsListQueryParams;
+const clearParams = () => {
+    paymentsListQueryParams.reset();
+};
+
+export { clearParams as c, onQueryParamsChange as o, queryParams as q };

package/dist/module/payout-details-core2.js

@@ -1,9 +1,12 @@
 import { proxyCustomElement, HTMLElement, createEvent, h } from '@stencil/core/internal/client';
 import { c as formatCurrency, a as formatDate, b as formatTime } from './utils2.js';
-import { L as LoadingState, E as ErrorState, b as EntityHeadInfo, c as EntityHeadInfoItem, D as DetailSectionTitle, a as DetailItem, C as CodeBlock } from './utils.js';
+import { E as ErrorState, b as EntityHeadInfo, c as EntityHeadInfoItem, D as DetailSectionTitle, a as DetailItem, C as CodeBlock } from './utils.js';
+import { B as Button } from './button.js';
 import { S as StyledHost } from './styled-host.js';
-import { M as MapPayoutStatusToBadge } from './payouts-status.js';
+import { T as badge } from './parts.js';
+import { S as Spinner } from './spinner.js';
 import { d as defineCustomElement$1 } from './details.js';
+import { M as MapPayoutStatusToBadge } from './payouts-status.js';
 
 const PayoutDetailsCore = /*@__PURE__*/ proxyCustomElement(class PayoutDetailsCore extends HTMLElement {
     constructor() {
@@ -58,7 +61,7 @@ const PayoutDetailsCore = /*@__PURE__*/ proxyCustomElement(class PayoutDetailsCo
     }
     render() {
         var _a;
-        return (h(StyledHost, { key: '5bbb9c0cacc3bf2efe7a1e935e586944578f735f' }, this.loading && LoadingState(), !this.loading && this.errorMessage && ErrorState(this.errorMessage), !this.loading && this.payout && (h("justifi-details", { key: '93b7b7abde3b10e4e4d79526b02b8db0713c8fc6', "error-message": this.errorMessage }, h(EntityHeadInfo, { key: 'ac86860de5b1861971b0a9b7e3b9c5d6240ccc2a', slot: "head-info", badge: h("span", { slot: 'badge', innerHTML: MapPayoutStatusToBadge((_a = this.payout) === null || _a === void 0 ? void 0 : _a.status) }), title: `${formatCurrency(this.payout.amount)} ${this.payout.currency.toUpperCase()}` }, h(EntityHeadInfoItem, { key: '537d48671755958de63c4c5c9e8b9272bc507e6b', classes: "border-1 border-end", title: "Updated At", value: `${formatDate(this.payout.updated_at)} ${formatTime(this.payout.updated_at)}` }), h(EntityHeadInfoItem, { key: 'cdac6a8d733ad1bd45b923f10350601b72b22e8f', classes: "border-1 border-end", title: "Created At", value: `${formatDate(this.payout.created_at)} ${formatTime(this.payout.created_at)}` }), h(EntityHeadInfoItem, { key: 'a11a7d54baefaadd46be03d983f78754a3b4e7a2', title: "ID", value: this.payout.id }), h("div", { key: '71f41756d098d1863344f298549d32a3c0235e2c', class: "m-4" }, h("button", { key: '0bc57fc73b3e64da59e357d8882df4d9e1806af1', class: "btn btn-outline-secondary d-flex align-items-center", onClick: this.downloadCSV }, "Export CSV"))), h("div", { key: 'f1be7616f853affa6a32c1ce598c46efb34497cc', slot: 'detail-sections' }, h(DetailSectionTitle, { key: 'b483ced9513bb46fe249ab50192663de025fa3f7', sectionTitle: "Details" }), h("div", { key: '510a10f8730d3b0afd2422d349f5ac656d1059e1', class: "d-table gap-2 w-100" }, h(DetailItem, { key: '0564098e173c62fa3b73bcb112b3b1e516bcb094', title: "Date paid", value: formatDate(this.payout.deposits_at) }), h(DetailItem, { key: '91900371ae342a2ff8c79952786e5f0a999113da', title: "Statement Description", value: this.payout.description }), h(DetailItem, { key: 'c0a216b12b91c56d2b3c2c7b678c2bd893fefe02', title: "Payout Method", value: this.payout.delivery_method }), h(DetailItem, { key: 'afaafd44d645f458cd4299f9c8f504388ff1df53', title: "Amount", value: formatCurrency(this.payout.amount) }), h(DetailItem, { key: 'dbe4a06db4e8736c520db79cc45a37637ed02962', title: "Fee", value: formatCurrency(this.payout.fees_total) })), h(DetailSectionTitle, { key: '605964367e17fdbbd72763c818ba4dd42043f96f', sectionTitle: "Account" }), h("div", { key: '662a14b06e2fca1c305b9c8cbc3e724589117602', class: "d-table gap-2 w-100" }, h(DetailItem, { key: '6b195d37ffb700b8ce2c7a095d196af52d92eb00', title: "ID", value: this.payout.account_id }), h(DetailItem, { key: '011fb64b10627221ef1495da127f929bc63dbab6', title: "Account Type", value: this.payout.bank_account.account_type }), h(DetailItem, { key: '4130703cb2a6b567392819f997dd574a9e087df4', title: "Institution", value: this.payout.bank_account.account_type }), h(DetailItem, { key: '541d23f1645541e461280a0ddd449530df79aa76', title: "Routing Number", value: this.payout.bank_account.routing_number }), h(DetailItem, { key: 'b544a37bae800ce24bbf11cc9654ab6b4aabc0da', title: "Account Number", value: this.payout.bank_account.account_number_last4 })), h(DetailSectionTitle, { key: '40d9206806dfba438fbf700b7767a03c449ee1a9', sectionTitle: 'Metadata' }), h("div", { key: '435aff888f41675e1a2bf8729fc1c859cafaa20b', class: "d-table gap-2 w-100" }, h(CodeBlock, { key: '1c9f32bf899914aa052375e4be2e8f92134da196', metadata: this.payout.metadata })))))));
+        return (h(StyledHost, { key: '00dce2f3bddb29647880b82a2055580346b7ff38' }, this.loading && h(Spinner, { key: 'de524e2f77fb4dd20f4fcb7dff41f256f3ee74b5' }), !this.loading && this.errorMessage && ErrorState(this.errorMessage), !this.loading && this.payout && (h("justifi-details", { key: 'c0b7449ff0e5773be97fb27485638acdce79b50a', "error-message": this.errorMessage }, h(EntityHeadInfo, { key: '1aa8719fb989c9993ac30803440d16ce3590038e', slot: "head-info", badge: h("span", { slot: 'badge', part: badge, innerHTML: MapPayoutStatusToBadge((_a = this.payout) === null || _a === void 0 ? void 0 : _a.status) }), title: `${formatCurrency(this.payout.amount)} ${this.payout.currency.toUpperCase()}` }, h(EntityHeadInfoItem, { key: '30c9240747e66e38056cd870e5703b4d027b3ea2', classes: "border-1 border-end", title: "Updated At", value: `${formatDate(this.payout.updated_at)} ${formatTime(this.payout.updated_at)}` }), h(EntityHeadInfoItem, { key: '2d93c5594c1451a3d566afe0431da34994ccc94a', classes: "border-1 border-end", title: "Created At", value: `${formatDate(this.payout.created_at)} ${formatTime(this.payout.created_at)}` }), h(EntityHeadInfoItem, { key: 'd9116166e2c7f95e8a7e110146f492bf0329e01e', title: "ID", value: this.payout.id }), h("div", { key: '9b3c12058b396637632c3d46a24ed426a1bd518c', class: "m-4" }, h(Button, { key: 'eaf5339cb60b3ae759b0ca94ffb07f20f044feec', variant: "secondary", class: "btn btn-outline-secondary d-flex align-items-center", onClick: this.downloadCSV }, "Export CSV"))), h("div", { key: '61372b0167f0a07231fd1cf69d61f156e42c3a0a', slot: 'detail-sections' }, h(DetailSectionTitle, { key: '6113095a35b746b7b03e15af9e195fe7247148c0', sectionTitle: "Details" }), h("div", { key: 'dcdc2cf2c73516e603492aae6f81a12a2dd10d1f', class: "d-table gap-2 w-100" }, h(DetailItem, { key: '797cf1e1b4a0521ff01a8c985c260b998ad3d3e9', title: "Date paid", value: formatDate(this.payout.deposits_at) }), h(DetailItem, { key: 'bd3162d95fa4a98e2db4e42a9de39c91ca209b45', title: "Statement Description", value: this.payout.description }), h(DetailItem, { key: 'adef2b9dcbad873f570530761cf887c9a4efa052', title: "Payout Method", value: this.payout.delivery_method }), h(DetailItem, { key: '8c6ca766f17f9dd140fa0778fecd648a72244b92', title: "Amount", value: formatCurrency(this.payout.amount) }), h(DetailItem, { key: '4c4448677902c19011cf36b0d71d85eb54083bbf', title: "Fee", value: formatCurrency(this.payout.fees_total) })), h(DetailSectionTitle, { key: '7f4a0ed8518b957cbfcfb15e5ea62963e5ba5013', sectionTitle: "Account" }), h("div", { key: '3d878a54ddffb40e55610224fc97f182f4255e51', class: "d-table gap-2 w-100" }, h(DetailItem, { key: 'd9eb8870ca1b4bf0c04bcb2f3b4362ebf9712a88', title: "ID", value: this.payout.account_id }), h(DetailItem, { key: 'f320a0fb646a5352173341083f384bd6d7a30a61', title: "Account Type", value: this.payout.bank_account.account_type }), h(DetailItem, { key: '35cc07ec9ee8e3155606851eeb9864d9f6df6e05', title: "Institution", value: this.payout.bank_account.account_type }), h(DetailItem, { key: 'ac0962b80347b619e4cc534781df397d9bc510e2', title: "Routing Number", value: this.payout.bank_account.routing_number }), h(DetailItem, { key: '65db983d9504b912f12cefc7eea7a5bc8e9f3d73', title: "Account Number", value: this.payout.bank_account.account_number_last4 })), h(DetailSectionTitle, { key: 'bc94a109cf5e2c4dcd32972387a4b167b85d8ccc', sectionTitle: 'Metadata' }), h("div", { key: '1918677f3559ff779b3f1613ee9b2367110f4648', class: "d-table gap-2 w-100" }, h(CodeBlock, { key: '2b5dd103cebe0960bdcc6a68f7389780e9d1029b', metadata: this.payout.metadata })))))));
     }
     static get watchers() { return {
         "getPayout": ["getPayoutWatcher"]