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

package/dist/cjs/nv-datagrid.cjs.entry.js

@@ -3318,6 +3318,7 @@ const NvDatagrid = class {
         index.registerInstance(this, hostRef);
         this.action = index.createEvent(this, "action", 7);
         this.selectedRows = index.createEvent(this, "selectedRows", 7);
+        this.stateChanged = index.createEvent(this, "stateChanged", 7);
         this.templateCache = new Map();
         this.headerTemplateCache = new Map();
         this.minPageIndex = 1;
@@ -3329,7 +3330,7 @@ const NvDatagrid = class {
         this.globalFilterSearchTerm = '';
         this.columnData = [];
         this.paginationState = null;
-        this.sorting = [];
+        this.sortingState = [];
         this.rowSelectionState = {};
         //#endregion STATES
         /****************************************************************************/
@@ -3409,6 +3410,10 @@ const NvDatagrid = class {
          * 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);
@@ -3686,10 +3691,10 @@ const NvDatagrid = class {
         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) {
@@ -4227,7 +4232,7 @@ const NvDatagrid = class {
             this.table.options.state.pagination = newValue;
         }
     }
-    handleSorting(newValue) {
+    handleSortingState(newValue) {
         if (!this.table) {
             console.warn('Table is not initialized yet.');
             return;
@@ -4260,6 +4265,33 @@ const NvDatagrid = class {
             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
@@ -4290,7 +4322,7 @@ const NvDatagrid = class {
         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 (index.h(index.Host, { key: '90be657fa9c7f8755391f8d91418399de742ae1f' }, index.h("div", { key: 'f28596438b7c9c22b34789236c5faa644938d1dc', class: "hidden" }, index.h("slot", { key: 'fdc1670cc6bafb5f1efa8c63d41acbfd15659de6' })), index.h("slot", { key: '65afa2282af4842bcb23f8baa592545fe3b74fa3', name: "before" }), this.enableGlobalFilter && this.table && (index.h("div", { key: '8628a23712471690b6a6239a289dd8263aed423c', class: `search-container justify-${this.globalFilterPosition}` }, index.h("nv-fieldtext", { key: '42c56dd6ba426e2045c02b3754fae3562632c49f', value: this.globalFilterSearchTerm, onInput: this.handleGlobalFilteringOnInput, placeholder: "Search all columns..." }))), this.parsedColumns.length === 0 && this.parsedData.length === 0 ? (index.h("div", { class: "no-data" }, this.noColumnsNoDataMessage)) : (index.h("div", null, index.h("table", null, this.parsedColumns.length > 0 && headerGroups.length > 0 && (index.h("thead", null, this.parsedColumns.length > 0 && headerGroups
+        return (index.h(index.Host, { key: '95d3cea67d17f1aab33e7bc054161760e6d6df54' }, index.h("div", { key: 'b6cbdf841ab4ba64d2ccbf49fc6caf9ef082c7ee', class: "hidden" }, index.h("slot", { key: '18dde7efeec5c1bc38a044a683910db41f70e22d' })), index.h("slot", { key: 'd3ffb496e938ee3c91c5a7422357cbee90100d84', name: "before" }), this.enableGlobalFilter && this.table && (index.h("div", { key: '0ab19e6c1c585d4e77004ec9238dba3baff83614', class: `search-container justify-${this.globalFilterPosition}` }, index.h("nv-fieldtext", { key: '76722d31da818102347278c7b62a93deaa9c29a1', value: this.globalFilterSearchTerm, onInput: this.handleGlobalFilteringOnInput, placeholder: "Search all columns..." }))), this.parsedColumns.length === 0 && this.parsedData.length === 0 ? (index.h("div", { class: "no-data" }, this.noColumnsNoDataMessage)) : (index.h("div", null, index.h("table", null, this.parsedColumns.length > 0 && headerGroups.length > 0 && (index.h("thead", null, this.parsedColumns.length > 0 && headerGroups
             ? headerGroups === null || headerGroups === void 0 ? void 0 : headerGroups.map(headerGroup => (index.h("tr", { key: headerGroup.id }, headerGroup.headers.map(header => {
                 return this.getHeaderCell(header);
             }))))
@@ -4301,7 +4333,7 @@ const NvDatagrid = class {
                 return (index.h("td", { key: cell.id, "data-row-id": rowId }, this.flexRender(cell.column.columnDef.cell, cell.getContext())));
             })));
         }))), this.table && this.enableRowSelection ? (index.h("tfoot", null, index.h("tr", null, index.h("td", { colSpan: 20 }, this.enableRowSelection && this.table ? (index.h("div", null, this.rowSelectionState &&
-            Object.keys(this.rowSelectionState).length > 0 ? (index.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")) : (index.h("span", null, "No rows selected")))) : null)))) : null), this.getPagination())), index.h("slot", { key: 'e1641d8fd103b0802e1df4f0848f0de921260065', name: "after" })));
+            Object.keys(this.rowSelectionState).length > 0 ? (index.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")) : (index.h("span", null, "No rows selected")))) : null)))) : null), this.getPagination())), index.h("slot", { key: 'ee4cdbb4683a3da20154fd60580d694d8f78feb8', name: "after" })));
     }
     get el() { return index.getElement(this); }
     static get watchers() { return {
@@ -4309,11 +4341,12 @@ const NvDatagrid = class {
         "data": ["parseData"],
         "parsedColumns": ["handleParsedChange"],
         "parsedData": ["handleParsedChange"],
-        "globalFilterSearchTerm": ["handleGlobalFilterSearchTerm"],
-        "paginationState": ["handlePaginationState"],
-        "sorting": ["handleSorting"],
+        "globalFilterSearchTerm": ["handleGlobalFilterSearchTerm", "handleInternalStateChange"],
+        "paginationState": ["handlePaginationState", "handleInternalStateChange"],
+        "sortingState": ["handleSortingState", "handleInternalStateChange"],
         "pageSize": ["handlePageSize"],
-        "rowSelectionState": ["handleRowSelectionState"]
+        "rowSelectionState": ["handleRowSelectionState"],
+        "state": ["handleStateChange"]
     }; }
 };
 NvDatagrid.style = NvDatagridStyle0;