@nova-design-system/nova-webcomponents 3.3.0 → 3.4.0

package/dist/collection/components/nv-datagrid/nv-datagrid.js

@@ -23,7 +23,7 @@ export class NvDatagrid {
         this.globalFilterSearchTerm = '';
         this.columnData = [];
         this.paginationState = null;
-        this.sorting = [];
+        this.sortingState = [];
         this.rowSelectionState = {};
         //#endregion STATES
         /****************************************************************************/
@@ -103,6 +103,10 @@ export class NvDatagrid {
          * Whether to enable row selection for the data grid.
          */
         this.enableRowSelection = false;
+        /**
+         * The overall state
+         */
+        this.state = null;
         this.debouncedFilter = debounce((value) => {
             var _a;
             (_a = this.table) === null || _a === void 0 ? void 0 : _a.setGlobalFilter(value);
@@ -382,10 +386,10 @@ export class NvDatagrid {
         if (this.enableSorting) {
             tableOptions.getSortedRowModel = getSortedRowModel();
             tableOptions.enableSorting = this.enableSorting;
-            tableOptions.state.sorting = this.sorting;
+            tableOptions.state.sorting = this.sortingState;
             tableOptions.onSortingChange = updater => {
-                const newSorting = typeof updater === 'function' ? updater(this.sorting) : updater;
-                this.sorting = newSorting; // Will automatically trigger the searchTerm watcher and update the table
+                const newSorting = typeof updater === 'function' ? updater(this.sortingState) : updater;
+                this.sortingState = newSorting; // Will automatically trigger the searchTerm watcher and update the table
             };
         }
         if (this.enableRowSelection) {
@@ -923,7 +927,7 @@ export class NvDatagrid {
             this.table.options.state.pagination = newValue;
         }
     }
-    handleSorting(newValue) {
+    handleSortingState(newValue) {
         if (!this.table) {
             console.warn('Table is not initialized yet.');
             return;
@@ -956,6 +960,33 @@ export class NvDatagrid {
             this.table.options.state.rowSelection = newValue;
         }
     }
+    handleStateChange(newValue) {
+        if (newValue) {
+            // Only update internal state if values are different to avoid loops
+            if (this.globalFilterSearchTerm !== newValue.globalFilterSearchTerm) {
+                this.globalFilterSearchTerm = newValue.globalFilterSearchTerm;
+            }
+            if (JSON.stringify(this.paginationState) !==
+                JSON.stringify(newValue.paginationState)) {
+                this.paginationState = newValue.paginationState;
+            }
+            if (JSON.stringify(this.sortingState) !==
+                JSON.stringify(newValue.sortingState)) {
+                this.sortingState = newValue.sortingState;
+            }
+        }
+    }
+    // Add watchers for internal state to emit changes
+    handleInternalStateChange() {
+        // Only emit if the state has actually changed
+        const newState = {
+            globalFilterSearchTerm: this.globalFilterSearchTerm,
+            paginationState: this.paginationState,
+            sortingState: this.sortingState,
+        };
+        // Emit the new state and let the parent component update the prop
+        this.stateChanged.emit(newState);
+    }
     //#endregion WATCHERS
     /****************************************************************************/
     //#region LIFECYCLE
@@ -986,7 +1017,7 @@ export class NvDatagrid {
         const rows = !this.table || this.table === undefined || this.parsedData.length === 0
             ? []
             : (_c = (_b = this.table) === null || _b === void 0 ? void 0 : _b.getRowModel()) === null || _c === void 0 ? void 0 : _c.rows;
-        return (h(Host, { key: '90be657fa9c7f8755391f8d91418399de742ae1f' }, h("div", { key: 'f28596438b7c9c22b34789236c5faa644938d1dc', class: "hidden" }, h("slot", { key: 'fdc1670cc6bafb5f1efa8c63d41acbfd15659de6' })), h("slot", { key: '65afa2282af4842bcb23f8baa592545fe3b74fa3', name: "before" }), this.enableGlobalFilter && this.table && (h("div", { key: '8628a23712471690b6a6239a289dd8263aed423c', class: `search-container justify-${this.globalFilterPosition}` }, h("nv-fieldtext", { key: '42c56dd6ba426e2045c02b3754fae3562632c49f', value: this.globalFilterSearchTerm, onInput: this.handleGlobalFilteringOnInput, placeholder: "Search all columns..." }))), this.parsedColumns.length === 0 && this.parsedData.length === 0 ? (h("div", { class: "no-data" }, this.noColumnsNoDataMessage)) : (h("div", null, h("table", null, this.parsedColumns.length > 0 && headerGroups.length > 0 && (h("thead", null, this.parsedColumns.length > 0 && headerGroups
+        return (h(Host, { key: '95d3cea67d17f1aab33e7bc054161760e6d6df54' }, h("div", { key: 'b6cbdf841ab4ba64d2ccbf49fc6caf9ef082c7ee', class: "hidden" }, h("slot", { key: '18dde7efeec5c1bc38a044a683910db41f70e22d' })), h("slot", { key: 'd3ffb496e938ee3c91c5a7422357cbee90100d84', name: "before" }), this.enableGlobalFilter && this.table && (h("div", { key: '0ab19e6c1c585d4e77004ec9238dba3baff83614', class: `search-container justify-${this.globalFilterPosition}` }, h("nv-fieldtext", { key: '76722d31da818102347278c7b62a93deaa9c29a1', value: this.globalFilterSearchTerm, onInput: this.handleGlobalFilteringOnInput, placeholder: "Search all columns..." }))), this.parsedColumns.length === 0 && this.parsedData.length === 0 ? (h("div", { class: "no-data" }, this.noColumnsNoDataMessage)) : (h("div", null, h("table", null, this.parsedColumns.length > 0 && headerGroups.length > 0 && (h("thead", null, this.parsedColumns.length > 0 && headerGroups
             ? headerGroups === null || headerGroups === void 0 ? void 0 : headerGroups.map(headerGroup => (h("tr", { key: headerGroup.id }, headerGroup.headers.map(header => {
                 return this.getHeaderCell(header);
             }))))
@@ -997,7 +1028,7 @@ export class NvDatagrid {
                 return (h("td", { key: cell.id, "data-row-id": rowId }, this.flexRender(cell.column.columnDef.cell, cell.getContext())));
             })));
         }))), this.table && this.enableRowSelection ? (h("tfoot", null, h("tr", null, h("td", { colSpan: 20 }, this.enableRowSelection && this.table ? (h("div", null, this.rowSelectionState &&
-            Object.keys(this.rowSelectionState).length > 0 ? (h("span", null, Object.keys(this.rowSelectionState).length, " of", ' ', ((_e = (_d = this.table.getPreFilteredRowModel()) === null || _d === void 0 ? void 0 : _d.rows) === null || _e === void 0 ? void 0 : _e.length) || 0, ' ', "Total Rows Selected")) : (h("span", null, "No rows selected")))) : null)))) : null), this.getPagination())), h("slot", { key: 'e1641d8fd103b0802e1df4f0848f0de921260065', name: "after" })));
+            Object.keys(this.rowSelectionState).length > 0 ? (h("span", null, Object.keys(this.rowSelectionState).length, " of", ' ', ((_e = (_d = this.table.getPreFilteredRowModel()) === null || _d === void 0 ? void 0 : _d.rows) === null || _e === void 0 ? void 0 : _e.length) || 0, ' ', "Total Rows Selected")) : (h("span", null, "No rows selected")))) : null)))) : null), this.getPagination())), h("slot", { key: 'ee4cdbb4683a3da20154fd60580d694d8f78feb8', name: "after" })));
     }
     static get is() { return "nv-datagrid"; }
     static get originalStyleUrls() {
@@ -1316,6 +1347,24 @@ export class NvDatagrid {
                 "attribute": "enable-row-selection",
                 "reflect": true,
                 "defaultValue": "false"
+            },
+            "state": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "{\n    /**\n     * Global filter search term\n     */\n    globalFilterSearchTerm: string;\n    /**\n     * Pagination State\n     */\n    paginationState: {\n      /**\n       * Page Index\n       */\n      pageIndex: number;\n      /**\n       * Page Size\n       */\n      pageSize: number;\n    };\n    /**\n     * Sorting the columns\n     */\n    sortingState: {\n      /**\n       * Descending\n       */\n      desc: boolean;\n      /**\n       * Column Id\n       */\n      id: string;\n    }[];\n  }",
+                    "resolved": "{ globalFilterSearchTerm: string; paginationState: { pageIndex: number; pageSize: number; }; sortingState: { desc: boolean; id: string; }[]; }",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The overall state"
+                },
+                "getter": false,
+                "setter": false,
+                "defaultValue": "null"
             }
         };
     }
@@ -1327,7 +1376,7 @@ export class NvDatagrid {
             "globalFilterSearchTerm": {},
             "columnData": {},
             "paginationState": {},
-            "sorting": {},
+            "sortingState": {},
             "rowSelectionState": {}
         };
     }
@@ -1362,6 +1411,24 @@ export class NvDatagrid {
                     "resolved": "any[]",
                     "references": {}
                 }
+            }, {
+                "method": "stateChanged",
+                "name": "stateChanged",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [{
+                            "name": "bind",
+                            "text": "state"
+                        }],
+                    "text": "Emitted when the state is changed"
+                },
+                "complexType": {
+                    "original": "{\n    /**\n     * Global filter search term\n     */\n    globalFilterSearchTerm: string;\n    /**\n     * Pagination State\n     */\n    paginationState: {\n      /**\n       * Page Index\n       */\n      pageIndex: number;\n      /**\n       * Page Size\n       */\n      pageSize: number;\n    };\n    /**\n     * Sorting the columns\n     */\n    sortingState: {\n      /**\n       * Descending\n       */\n      desc: boolean;\n      /**\n       * Column Id\n       */\n      id: string;\n    }[];\n  }",
+                    "resolved": "{ globalFilterSearchTerm: string; paginationState: { pageIndex: number; pageSize: number; }; sortingState: { desc: boolean; id: string; }[]; }",
+                    "references": {}
+                }
             }];
     }
     static get elementRef() { return "el"; }
@@ -1385,14 +1452,26 @@ export class NvDatagrid {
                 "propName": "paginationState",
                 "methodName": "handlePaginationState"
             }, {
-                "propName": "sorting",
-                "methodName": "handleSorting"
+                "propName": "sortingState",
+                "methodName": "handleSortingState"
             }, {
                 "propName": "pageSize",
                 "methodName": "handlePageSize"
             }, {
                 "propName": "rowSelectionState",
                 "methodName": "handleRowSelectionState"
+            }, {
+                "propName": "state",
+                "methodName": "handleStateChange"
+            }, {
+                "propName": "globalFilterSearchTerm",
+                "methodName": "handleInternalStateChange"
+            }, {
+                "propName": "paginationState",
+                "methodName": "handleInternalStateChange"
+            }, {
+                "propName": "sortingState",
+                "methodName": "handleInternalStateChange"
             }];
     }
 }