@justifi/webcomponents 4.19.3 → 4.20.0

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

@@ -5,10 +5,15 @@ import './Payout.js';
 import { e as formatDate, j as formatTime, a as formatCurrency, M as MapPaymentStatusToBadge } from './utils2.js';
 import { t as tableExportedParts, T as TableLoadingState, a as TableEmptyState, b as TableErrorState } from './exported-parts.js';
 import { S as StyledHost } from './styled-host.js';
-import { d as defineCustomElement$4 } from './form-control-date2.js';
-import { d as defineCustomElement$3 } from './form-control-error-text2.js';
-import { d as defineCustomElement$2 } from './form-control-help-text2.js';
-import { d as defineCustomElement$1 } from './pagination-menu2.js';
+import { d as defineCustomElement$1, o as onFilterChange } from './table-filters-menu2.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-help-text2.js';
+import { d as defineCustomElement$5 } from './form-control-select2.js';
+import { d as defineCustomElement$4 } from './form-control-text2.js';
+import { d as defineCustomElement$3 } from './pagination-menu2.js';
+import { d as defineCustomElement$2 } from './payments-list-filters2.js';
 
 const PaymentsListCore = /*@__PURE__*/ proxyCustomElement(class PaymentsListCore extends HTMLElement {
     constructor() {
@@ -32,15 +37,19 @@ const PaymentsListCore = /*@__PURE__*/ proxyCustomElement(class PaymentsListCore
                 return;
             this.rowClicked.emit(this.payments.find((payment) => payment.id === clickedPaymentID));
         };
-        this.handleDateChange = (name, value) => {
-            this.params = Object.assign(Object.assign({}, this.params), { [name]: value });
+        this.setParamsOnChange = (name, value) => {
+            let newParams = { [name]: value };
+            this.params = onFilterChange(newParams, this.params);
+        };
+        this.clearParams = () => {
+            this.params = {};
         };
-        this.getPayments = undefined;
         this.payments = [];
         this.loading = true;
         this.errorMessage = undefined;
         this.paging = pagingDefaults;
-        this.params = undefined;
+        this.params = {};
+        this.getPayments = undefined;
     }
     updateOnPropChange() {
         this.fetchData();
@@ -89,8 +98,8 @@ const PaymentsListCore = /*@__PURE__*/ proxyCustomElement(class PaymentsListCore
             {
                 type: 'head',
                 value: `
-          <div class='fw-bold'>${formatDate(payment.created_at)}</div>
-          <div class='fw-bold'>${formatTime(payment.created_at)}</div>
+          <div class="fw-bold">${formatDate(payment.created_at)}</div>
+          <div class="fw-bold">${formatTime(payment.created_at)}</div>
         `,
             },
             formatCurrency(payment.amount),
@@ -115,8 +124,8 @@ const PaymentsListCore = /*@__PURE__*/ proxyCustomElement(class PaymentsListCore
     }
     render() {
         var _a, _b;
-        return (h(StyledHost, { key: 'e4a4b64b2927a009f7ad4e9e2ebb4c020401423c', exportparts: tableExportedParts }, h("div", { key: '6ac1c84338b84972ca9b001ecd2b90134c99de6b', class: "row gy-3 mb-4" }, h("div", { key: '1d279ec66bc0755b876e29f06ac24d51baa77caa', class: "col-2" }, h("form-control-date", { key: '65b29c031021f3f782c9a4597167dc5e3a44e7da', name: "created_after", label: "Start Date", inputHandler: this.handleDateChange })), h("div", { key: 'a032497a94cc8108fda6efbb741069407e1a5afe', class: "col-2" }, h("form-control-date", { key: '5dd62ebdbf3836567a9ccb03dec850ebe675cb79', name: "created_before", label: "End Date", inputHandler: this.handleDateChange }))), h("div", { key: 'be4094afd3aec1d742d9d3245c2f6fc50cb95fa0', class: "table-wrapper" }, h("table", { key: 'ed493e35f2bddd59d1034dffe2bcd8b54a6390d6', class: "table table-hover" }, h("thead", { key: 'fae77bda1ffc35ac5414743ab51c2fe1dfbbc29e', class: "table-head sticky-top", part: "table-head" }, h("tr", { key: '5be3b1e9883d337046c386046565fb6ac3366324', class: "table-light text-nowrap", part: "table-head-row" }, (_a = this.columnData) === null || _a === void 0 ? void 0 : _a.map((column) => (h("th", { part: "table-head-cell", scope: "col", title: Array.isArray(column) ? column[1] : '' }, !Array.isArray(column) ? column : column[0]))))), h("tbody", { key: 'ba950a1da1ec0dffd7bc8457cdb3ce65d0f8b69b', class: "table-body", part: "table-body" }, h(TableLoadingState, { key: '8d13d8f6b64377f560d06410c09d24293708b6a8', columnSpan: this.columnData.length, isLoading: this.loading }), h(TableEmptyState, { key: 'c75d61977b26ca5d4aa3711bae1ce6e571b3e3b2', isEmpty: this.showEmptyState, columnSpan: this.columnData.length }), h(TableErrorState, { key: '08e3f88116de5783f018a0c06d21d0d9cc4f5feb', columnSpan: this.columnData.length, errorMessage: this.errorMessage }), this.showRowData &&
-            this.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.map((dataEntry) => {
+        return (h(StyledHost, { key: 'aa139e92669ea06532373a64f08a9926f9ddb4d0', exportparts: tableExportedParts }, h("payments-list-filters", { key: 'd5338eb8899dc99a9633cd892400fc4749edb4b6', params: this.params, setParamsOnChange: this.setParamsOnChange, clearParams: this.clearParams }), h("div", { key: 'dd452f6a2920ef50fb24324efdf65407f7d964f7', class: "table-wrapper" }, h("table", { key: '64d2d4304549595b80a45ee5684f7ac3cd296245', class: "table table-hover" }, h("thead", { key: '256145c2eea8ac35f1c83663cba68d85287f33fc', class: "table-head sticky-top", part: "table-head" }, h("tr", { key: '43a9d75516e80bb5cd04f2575370c863f6413528', class: "table-light text-nowrap", part: "table-head-row" }, (_a = this.columnData) === null || _a === void 0 ? void 0 : _a.map((column) => (h("th", { part: "table-head-cell", scope: "col", title: Array.isArray(column) ? column[1] : "" }, !Array.isArray(column) ? column : column[0]))))), h("tbody", { key: 'f95b3b11a9fe046a14a78aaa9f08a5522bead677', class: "table-body", part: "table-body" }, h(TableLoadingState, { key: 'f92ed5822f5f3946463b89ed746ab641cbf3b2b3', columnSpan: this.columnData.length, isLoading: this.loading }), h(TableEmptyState, { key: 'ddd2a229c0bb493480504ddcd855d2957b5acedd', isEmpty: this.showEmptyState, columnSpan: this.columnData.length }), h(TableErrorState, { key: '0a42c24d04d0cb23804e4a55d185cb9da4b205ab', columnSpan: this.columnData.length, errorMessage: this.errorMessage }), this.showRowData &&
+            this.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.map((dataEntry) => {
                 let nestedHtml = dataEntry === null || dataEntry === void 0 ? void 0 : dataEntry.type;
                 if (nestedHtml) {
                     return h("td", { part: "table-cell", innerHTML: dataEntry.value });
@@ -124,7 +133,7 @@ const PaymentsListCore = /*@__PURE__*/ proxyCustomElement(class PaymentsListCore
                 else {
                     return h("td", { part: "table-cell" }, dataEntry);
                 }
-            }))))), this.paging && (h("tfoot", { key: '728f671ab03923c90e11901a0d3aac4bc30e72a7', class: "sticky-bottom" }, h("tr", { key: 'd0df9b7c857287eec9568157ecf8f547a01f2fc5', class: "table-light align-middle" }, h("td", { key: 'e0de54912240b3e812f37ea675b2eef50d9545c4', part: "pagination-bar", colSpan: (_b = this.columnData) === null || _b === void 0 ? void 0 : _b.length }, h("pagination-menu", { key: 'f2d7846030a5aaa0c2311cad61f4d5865440a904', paging: Object.assign(Object.assign({}, this.paging), { handleClickPrevious: this.handleClickPrevious, handleClickNext: this.handleClickNext }), params: this.params })))))))));
+            }))))), this.paging && (h("tfoot", { key: '20f135407c3d167359b1e2dd1f12b751b31ac80e', class: "sticky-bottom" }, h("tr", { key: 'dae4f695a77846739f2cc80f1e210f0d24d4671e', class: "table-light align-middle" }, h("td", { key: '6f2ed8b9b062a008f521aad3fe7f2ac923316955', part: "pagination-bar", colSpan: (_b = this.columnData) === null || _b === void 0 ? void 0 : _b.length }, h("pagination-menu", { key: '18c83657e78378ce8b59d6216479047f7728691f', paging: Object.assign(Object.assign({}, this.paging), { handleClickPrevious: this.handleClickPrevious, handleClickNext: this.handleClickNext }), params: this.params })))))))));
     }
     static get watchers() { return {
         "params": ["updateOnPropChange"],
@@ -145,29 +154,54 @@ function defineCustomElement() {
     if (typeof customElements === "undefined") {
         return;
     }
-    const components = ["payments-list-core", "form-control-date", "form-control-error-text", "form-control-help-text", "pagination-menu"];
+    const components = ["payments-list-core", "custom-popper", "form-control-date", "form-control-error-text", "form-control-help-text", "form-control-select", "form-control-text", "pagination-menu", "payments-list-filters", "table-filters-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$4();
+                defineCustomElement$8();
             }
             break;
         case "form-control-error-text":
             if (!customElements.get(tagName)) {
-                defineCustomElement$3();
+                defineCustomElement$7();
             }
             break;
         case "form-control-help-text":
             if (!customElements.get(tagName)) {
-                defineCustomElement$2();
+                defineCustomElement$6();
+            }
+            break;
+        case "form-control-select":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$5();
+            }
+            break;
+        case "form-control-text":
+            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-filters.d.ts

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

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

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