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

package/dist/components/nv-datagrid.js

@@ -1,8 +1,8 @@
 import { p as proxyCustomElement, H, c as createEvent, h, d as Host } from './p-aff3ed68.js';
 import { d as deepCopyElement, e as excludedProps } from './p-cb34aa4f.js';
 import { d as SortingPossibility } from './p-1f505531.js';
-import { d as defineCustomElement$3 } from './p-7935c1cb.js';
-import { d as defineCustomElement$2 } from './p-9fa0de38.js';
+import { d as defineCustomElement$3 } from './p-919b5237.js';
+import { d as defineCustomElement$2 } from './p-e072f051.js';
 
 /**
    * table-core
@@ -3317,6 +3317,7 @@ const NvDatagrid$1 = /*@__PURE__*/ proxyCustomElement(class NvDatagrid extends H
         this.__registerHost();
         this.action = createEvent(this, "action", 7);
         this.selectedRows = createEvent(this, "selectedRows", 7);
+        this.stateChanged = createEvent(this, "stateChanged", 7);
         this.templateCache = new Map();
         this.headerTemplateCache = new Map();
         this.minPageIndex = 1;
@@ -3328,7 +3329,7 @@ const NvDatagrid$1 = /*@__PURE__*/ proxyCustomElement(class NvDatagrid extends H
         this.globalFilterSearchTerm = '';
         this.columnData = [];
         this.paginationState = null;
-        this.sorting = [];
+        this.sortingState = [];
         this.rowSelectionState = {};
         //#endregion STATES
         /****************************************************************************/
@@ -3408,6 +3409,10 @@ const NvDatagrid$1 = /*@__PURE__*/ proxyCustomElement(class NvDatagrid extends H
          * 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);
@@ -3685,10 +3690,10 @@ const NvDatagrid$1 = /*@__PURE__*/ proxyCustomElement(class NvDatagrid extends H
         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) {
@@ -4226,7 +4231,7 @@ const NvDatagrid$1 = /*@__PURE__*/ proxyCustomElement(class NvDatagrid extends H
             this.table.options.state.pagination = newValue;
         }
     }
-    handleSorting(newValue) {
+    handleSortingState(newValue) {
         if (!this.table) {
             console.warn('Table is not initialized yet.');
             return;
@@ -4259,6 +4264,33 @@ const NvDatagrid$1 = /*@__PURE__*/ proxyCustomElement(class NvDatagrid extends H
             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
@@ -4289,7 +4321,7 @@ const NvDatagrid$1 = /*@__PURE__*/ proxyCustomElement(class NvDatagrid extends H
         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);
             }))))
@@ -4300,7 +4332,7 @@ const NvDatagrid$1 = /*@__PURE__*/ proxyCustomElement(class NvDatagrid extends H
                 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" })));
     }
     get el() { return this; }
     static get watchers() { return {
@@ -4308,11 +4340,12 @@ const NvDatagrid$1 = /*@__PURE__*/ proxyCustomElement(class NvDatagrid extends H
         "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"]
     }; }
     static get style() { return NvDatagridStyle0; }
 }, [4, "nv-datagrid", {
@@ -4329,24 +4362,26 @@ const NvDatagrid$1 = /*@__PURE__*/ proxyCustomElement(class NvDatagrid extends H
         "pageSizes": [16],
         "enableSorting": [516, "enable-sorting"],
         "enableRowSelection": [516, "enable-row-selection"],
+        "state": [16],
         "table": [32],
         "parsedColumns": [32],
         "parsedData": [32],
         "globalFilterSearchTerm": [32],
         "columnData": [32],
         "paginationState": [32],
-        "sorting": [32],
+        "sortingState": [32],
         "rowSelectionState": [32]
     }, undefined, {
         "columns": ["parseColumns"],
         "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"]
     }]);
 function defineCustomElement$1() {
     if (typeof customElements === "undefined") {