@genesislcap/grid-pro 14.348.0 → 14.350.0

package/dist/esm/grid-pro.definitions.js

@@ -19,7 +19,7 @@ export function getFilterByFieldType(type) {
             return 'agDateColumnFilter';
         case 'string':
         case 'enum':
-            return 'agMultiColumnFilter';
+            return 'agTextColumnFilter'; // TODO: handle multi and set filter in criteriaFromFilters
         default:
             return 'agTextColumnFilter';
     }

package/dist/esm/grid-pro.js

@@ -17,6 +17,7 @@ import { GridProClientSideDatasource, GridProServerSideDatasource } from './data
 import { baseDatasourceEventNames } from './datasource/base.types';
 import { agThemeFontFaceMap, defaultAgGridFontFace } from './external';
 import { GridProGenesisDatasource, gridProGenesisDatasourceEventNames, } from './grid-pro-genesis-datasource';
+import { datasourceEventNames, } from './grid-pro-genesis-datasource/datasource-events.types';
 import { DEBOUNCED_RESIZE_TIME, gridProErrorNames, gridProEventNames, } from './grid-pro.definitions';
 import { foundationGridProStyles as styles } from './grid-pro.styles';
 import { gridProTemplate as template } from './grid-pro.template';
@@ -144,6 +145,7 @@ export class GridPro extends LifecycleMixin(FoundationElement) {
         this.gridFontFace = defaultAgGridFontFace;
         this.columnComponentName = 'grid-pro-column';
         this.theme = AgGridTheme.alpine;
+        this.themeMode = 'dark';
         /**
          * Enable pagination for the grid.
          * @remarks
@@ -239,6 +241,7 @@ export class GridPro extends LifecycleMixin(FoundationElement) {
     }
     hideDatasourceError() {
         this.gridErrorItems = this.gridErrorItems.filter((item) => item.type !== gridProErrorNames.datasource);
+        this.removeAttribute('ds-disconnected');
     }
     connectedCallback() {
         super.connectedCallback();
@@ -264,6 +267,7 @@ export class GridPro extends LifecycleMixin(FoundationElement) {
         this.rootEventsListeners.forEach(({ key, action }) => {
             this.addEventListener(key, action);
         });
+        this.toggleDatasourceEventListeners(true);
         this.paginationPageSize = this.isServerSide
             ? this.gridProDatasource.maxRows
             : DatasourceDefaults.DEFAULT_PAGINATION_PAGE_SIZE;
@@ -275,6 +279,7 @@ export class GridPro extends LifecycleMixin(FoundationElement) {
         this.rootEventsListeners.forEach(({ key, action }) => {
             this.removeEventListener(key, action);
         });
+        this.toggleDatasourceEventListeners(false);
         DOM.queueUpdate(() => {
             var _a;
             if (!shouldRunDisconnect)
@@ -286,6 +291,257 @@ export class GridPro extends LifecycleMixin(FoundationElement) {
             this.registeredGridEvents.clear();
         });
     }
+    /**
+     * Helper method to add or remove datasource event listeners
+     * @internal
+     */
+    toggleDatasourceEventListeners(add) {
+        const eventHandlers = [
+            [datasourceEventNames.initialize, this.handleInitialize],
+            [datasourceEventNames.dataLoaded, this.handleDataLoaded],
+            [datasourceEventNames.dataChanged, this.handleDataChanged],
+            [datasourceEventNames.schemaUpdated, this.handleSchemaUpdated],
+            [datasourceEventNames.dataCleared, this.handleDataCleared],
+            [datasourceEventNames.loadingStarted, this.handleLoadingStarted],
+            [datasourceEventNames.loadingFinished, this.handleLoadingFinished],
+            [datasourceEventNames.noDataAvailable, this.handleNoDataAvailable],
+            [datasourceEventNames.filtersRestored, this.handleFiltersRestored],
+            [datasourceEventNames.moreDataAvailable, this.handleMoreDataAvailable],
+            [datasourceEventNames.error, this.handleDatasourceError],
+            // Server-side specific events
+            [datasourceEventNames.cacheFilterConfig, this.cacheFilterConfig],
+            [datasourceEventNames.refreshServerSide, this.handleRefreshServerSide],
+            [datasourceEventNames.setServerSideDatasource, this.handleSetServerSideDatasource],
+            [datasourceEventNames.addGridCssClass, this.handleAddGridCssClass],
+            [datasourceEventNames.removeGridCssClass, this.handleRemoveGridCssClass],
+            [datasourceEventNames.applyServerSideTransaction, this.handleApplyServerSideTransaction],
+        ];
+        const method = add ? 'addEventListener' : 'removeEventListener';
+        eventHandlers.forEach(([eventName, handler]) => {
+            this[method](eventName, handler.bind(this));
+        });
+    }
+    /**
+     * Handles datasource initialization
+     * @internal
+     */
+    handleInitialize(event) {
+        const { options, keepColDefsOnClearRowData } = event.detail;
+        // Set the grid options and initialize the grid
+        this.gridOptions = Object.assign(Object.assign({}, this.agGridOptions), options);
+        if (keepColDefsOnClearRowData) {
+            this.columnState = this.columnApi.getColumnState();
+        }
+        this.initGrid();
+    }
+    /**
+     * Handles data loading from datasource
+     * @internal
+     */
+    handleDataLoaded(event) {
+        const { data } = event.detail;
+        if (this.gridApi) {
+            this.gridApi.setRowData(data);
+        }
+    }
+    /**
+     * Handles data changes from datasource
+     * @internal
+     */
+    handleDataChanged(event) {
+        var _a, _b, _c;
+        const { changes } = event.detail;
+        if (!this.gridApi)
+            return;
+        if (((_a = changes.add) === null || _a === void 0 ? void 0 : _a.length) > 0) {
+            if (this.asyncAdd) {
+                this.gridApi.applyTransactionAsync({ add: changes.add, addIndex: this.addIndex }, (result) => {
+                    this.flashAddedCells(result === null || result === void 0 ? void 0 : result.add);
+                });
+            }
+            else {
+                const result = this.gridApi.applyTransaction({ add: changes.add, addIndex: this.addIndex });
+                this.flashAddedCells(result === null || result === void 0 ? void 0 : result.add);
+            }
+        }
+        if (((_b = changes.update) === null || _b === void 0 ? void 0 : _b.length) > 0) {
+            if (this.asyncUpdate) {
+                this.gridApi.applyTransactionAsync({ update: changes.update });
+            }
+            else {
+                this.gridApi.applyTransaction({ update: changes.update });
+            }
+        }
+        if (((_c = changes.remove) === null || _c === void 0 ? void 0 : _c.length) > 0) {
+            if (this.asyncRemove) {
+                this.gridApi.applyTransactionAsync({ remove: changes.remove });
+            }
+            else {
+                this.gridApi.applyTransaction({ remove: changes.remove });
+            }
+        }
+    }
+    flashAddedCells(rowNodes) {
+        if (this.enableRowFlashing && (rowNodes === null || rowNodes === void 0 ? void 0 : rowNodes.length)) {
+            this.gridApi.flashCells({ rowNodes });
+        }
+    }
+    /**
+     * Handles schema updates from datasource
+     * @internal
+     */
+    handleSchemaUpdated(event) {
+        return __awaiter(this, void 0, void 0, function* () {
+            const { schema } = event.detail;
+            if (this.gridApi) {
+                // Merge with template definitions
+                const mergedColumnDefs = yield this.mergeAllColumnDefsAndStates(schema, true);
+                this.gridApi.setColumnDefs(mergedColumnDefs);
+            }
+        });
+    }
+    /**
+     * Handles data clearing from datasource
+     * @internal
+     */
+    handleDataCleared(event) {
+        var _a, _b;
+        const { includeSchema } = event.detail;
+        if (!this.gridApi)
+            return;
+        // Flush any pending async transactions
+        if (this.asyncAdd || this.asyncUpdate || this.asyncRemove) {
+            (_b = (_a = this.gridApi).flushAsyncTransactions) === null || _b === void 0 ? void 0 : _b.call(_a);
+        }
+        if (includeSchema) {
+            this.gridApi.setColumnDefs([]);
+        }
+        this.gridApi.setRowData([]);
+        this.gridApi.refreshCells({ force: true });
+    }
+    /**
+     * Handles loading started from datasource
+     * @internal
+     */
+    handleLoadingStarted() {
+        if (this.gridApi) {
+            this.gridApi.showLoadingOverlay();
+        }
+    }
+    /**
+     * Handles loading finished from datasource
+     * @internal
+     */
+    handleLoadingFinished() {
+        if (this.gridApi) {
+            this.gridApi.hideOverlay();
+        }
+    }
+    /**
+     * Handles no data available from datasource
+     * @internal
+     */
+    handleNoDataAvailable() {
+        if (this.gridApi) {
+            this.gridApi.showNoRowsOverlay();
+        }
+    }
+    /**
+     * Handles filter restoration from datasource
+     * @internal
+     */
+    handleFiltersRestored() {
+        this.restoreCachedFilterConfig();
+    }
+    /**
+     * Handles more data availability from datasource
+     * @internal
+     */
+    handleMoreDataAvailable(event) {
+        var _a, _b, _c, _d;
+        const { hasMoreData, sourceRef } = event.detail;
+        if (!this.gridApi)
+            return;
+        const statusBar = (_b = (_a = this.gridApi).getStatusPanel) === null || _b === void 0 ? void 0 : _b.call(_a, GridProStatusBarTypes.loadMore);
+        if (statusBar) {
+            (_d = (_c = statusBar).updateParams) === null || _d === void 0 ? void 0 : _d.call(_c, {
+                moreRows: hasMoreData,
+                sourceRef,
+            });
+        }
+    }
+    /**
+     * Handles datasource errors
+     * @internal
+     */
+    handleDatasourceError(event) {
+        // Set visual indicator on grid
+        this.setAttribute('ds-disconnected', 'ds-disconnected');
+    }
+    /**
+     * Handles refreshing server-side data
+     * @internal
+     */
+    handleRefreshServerSide(event) {
+        const { purge } = event.detail;
+        if (this.gridApi) {
+            this.gridApi.refreshServerSide({ purge });
+        }
+    }
+    /**
+     * Handles setting server-side datasource
+     * @internal
+     */
+    handleSetServerSideDatasource(event) {
+        const { datasource } = event.detail;
+        if (this.gridApi) {
+            this.gridApi.setServerSideDatasource(datasource);
+        }
+    }
+    /**
+     * Handles adding CSS class to grid element
+     * @internal
+     */
+    handleAddGridCssClass(event) {
+        var _a;
+        const { className } = event.detail;
+        // Add CSS class to grid element
+        const gridElement = ((_a = this.gridSlot) === null || _a === void 0 ? void 0 : _a.parentElement) || this;
+        if (gridElement) {
+            gridElement.classList.add(className);
+        }
+    }
+    /**
+     * Handles removing CSS class from grid element
+     * @internal
+     */
+    handleRemoveGridCssClass(event) {
+        var _a;
+        const { className } = event.detail;
+        // Remove CSS class from grid element
+        const gridElement = ((_a = this.gridSlot) === null || _a === void 0 ? void 0 : _a.parentElement) || this;
+        if (gridElement) {
+            gridElement.classList.remove(className);
+        }
+    }
+    /**
+     * Handles applying server-side transactions
+     * @internal
+     */
+    handleApplyServerSideTransaction(event) {
+        const { transaction, async, callback } = event.detail;
+        if (!this.gridApi)
+            return;
+        if (async) {
+            this.gridApi.applyServerSideTransactionAsync(transaction, callback);
+        }
+        else {
+            const result = this.gridApi.applyServerSideTransaction(transaction);
+            if (callback) {
+                callback(result);
+            }
+        }
+    }
     combineAllGridComponents(gridOptionsComponents) {
         const defaultFoundationAgComponents = {
             [GridProRendererTypes.action]: ActionRenderer,
@@ -554,6 +810,7 @@ export class GridPro extends LifecycleMixin(FoundationElement) {
         });
         const { columnDefs, components, defaultColDef, getRowId, onGridReady, onFilterChanged, onFirstDataRendered } = options, rest = __rest(options, ["columnDefs", "components", "defaultColDef", "getRowId", "onGridReady", "onFilterChanged", "onFirstDataRendered"]);
         const derivedOptions = Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, this.gridOptionsConfig), { defaultColDef: Object.assign({ enableCellChangeFlash: this.enableCellFlashing, filter: true, resizable: true, sortable: true }, defaultColDef), components: this.combineAllGridComponents(components), suppressDragLeaveHidesColumns: true }), this.eventsAndCallbacks), { onGridReady: (event) => {
+                var _a, _b, _c;
                 this.gridApi = event.api;
                 this.columnApi = event.columnApi;
                 if (this.gridEventsQueue.length) {
@@ -567,6 +824,12 @@ export class GridPro extends LifecycleMixin(FoundationElement) {
                 if (onGridReady) {
                     onGridReady(event);
                 }
+                if (((_a = this.gridProDatasource) === null || _a === void 0 ? void 0 : _a.keepColDefsOnClearRowData) && ((_b = this.columnState) === null || _b === void 0 ? void 0 : _b.length) > 0) {
+                    this.columnApi.applyColumnState({
+                        state: this.columnState,
+                        applyOrder: true,
+                    });
+                }
                 this.$emit(Events.EVENT_GRID_READY, {
                     event,
                     gridId: this.id,
@@ -576,6 +839,10 @@ export class GridPro extends LifecycleMixin(FoundationElement) {
                     event,
                     gridId: this.id,
                 });
+                // Emit datasource ready event, signals that the datasource is ready to be used
+                // TODO: prevent rendering datasource slot until grid is ready
+                // so there is no need for this even and handling it in datasources
+                (_c = this.gridProDatasource) === null || _c === void 0 ? void 0 : _c.$emit(datasourceEventNames.ready, { pagination: this.pagination });
                 this.restoreColumnState.bind(this)();
                 this.restoreCachedFilterConfig.bind(this)();
                 this.debouncedColumnAutosize.bind(this)();
@@ -592,16 +859,21 @@ export class GridPro extends LifecycleMixin(FoundationElement) {
                     onFilterChanged(filterChangedEvent);
                 }
             }, onGridSizeChanged: gridOnChangeCallback, onSortChanged: gridOnChangeCallback }), rest);
+        const hasGetRowId = 'getRowId' in (options !== null && options !== void 0 ? options : {});
         if (this.gridProDatasource) {
             derivedOptions.columnDefs = columnDefs;
-            derivedOptions.getRowId = getRowId;
+            if (hasGetRowId) {
+                derivedOptions.getRowId = getRowId;
+            }
             this.setupPaginationAndStatusBar(derivedOptions);
             this.setLocalGridOptions(derivedOptions);
         }
         else {
             this.mergeAllColumnDefsAndStates(columnDefs).then((value) => {
                 derivedOptions.columnDefs = value;
-                derivedOptions.getRowId = getRowId;
+                if (hasGetRowId) {
+                    derivedOptions.getRowId = getRowId;
+                }
                 this.setupPaginationAndStatusBar(derivedOptions);
                 this.setLocalGridOptions(derivedOptions);
                 this.initGrid();
@@ -609,14 +881,14 @@ export class GridPro extends LifecycleMixin(FoundationElement) {
         }
     }
     setLocalGridOptions(derivedOptions) {
-        this.agGridOptions = Object.assign(Object.assign({}, this.agGridOptions), ComponentUtil.copyAttributesToGridOptions(derivedOptions, this.agAttributes));
+        this.agGridOptions = Object.assign(Object.assign({}, (this.agGridOptions || {})), ComponentUtil.copyAttributesToGridOptions(derivedOptions, this.agAttributes));
     }
     /**
      * Clears the local grid options, this is used to clear the grid options when the grid is restarted.
      * @public
      */
     clearLocalGridOptions() {
-        this.agGridOptions = undefined;
+        this.agGridOptions = {};
     }
     initGrid() {
         DOM.queueUpdate(() => {
@@ -735,11 +1007,11 @@ export class GridPro extends LifecycleMixin(FoundationElement) {
     panelExists(statusPanelType, panels) {
         return panels.some((panel) => panel.statusPanel === statusPanelType);
     }
-    addRowCountPanel(statusPanels) {
+    addRowCountPanel(statusPanels, gridOptions) {
         // For server-side models, AG Grid's built-in row count components don't work properly
         // because they expect access to the complete dataset. Instead, rely on our custom
         // pagination component which properly handles server-side row counts.
-        if (this.isServerSide) {
+        if (this.isServerSide || (gridOptions === null || gridOptions === void 0 ? void 0 : gridOptions.rowModelType) === 'serverSide') {
             return;
         }
         if (this.statusBarConfig && this.statusBarConfig.rows === true) {
@@ -779,7 +1051,7 @@ export class GridPro extends LifecycleMixin(FoundationElement) {
     }
     addDatasourcePanels(statusPanels) {
         if (this.gridProDatasource) {
-            const datasourceStatusPanels = this.gridProDatasource.getDatasourceStatusBarPanels(this.isServerSide);
+            const datasourceStatusPanels = this.gridProDatasource.getDatasourceStatusBarPanels(this.isServerSide, this.statusBarConfig);
             // Filter out duplicate datasource panels
             const newDatasourcePanels = datasourceStatusPanels.filter((panel) => !this.panelExists(panel.statusPanel, statusPanels));
             statusPanels.push(...newDatasourcePanels);
@@ -810,7 +1082,7 @@ export class GridPro extends LifecycleMixin(FoundationElement) {
             // unless they are user-defined panels that we want to preserve
             const existingPanels = ((_a = gridOptions.statusBar) === null || _a === void 0 ? void 0 : _a.statusPanels) || [];
             const statusPanels = [...existingPanels];
-            this.addRowCountPanel(statusPanels);
+            this.addRowCountPanel(statusPanels, gridOptions);
             this.addMaxRowsPanel(statusPanels);
             this.addAggregationPanel(statusPanels);
             this.addDatasourcePanels(statusPanels);
@@ -1057,6 +1329,9 @@ __decorate([
 __decorate([
     observable
 ], GridPro.prototype, "gridSlot", void 0);
+__decorate([
+    observable
+], GridPro.prototype, "themeMode", void 0);
 __decorate([
     observable
 ], GridPro.prototype, "gridComponents", void 0);

package/dist/esm/grid-pro.template.js

@@ -8,7 +8,7 @@ import { getErrorHandlerDialogTemplate } from './datasource/error-handler.dialog
  */
 export const getGridProTemplate = (prefix = 'foundation') => html `
   <template>
-    <span part="grid" class="${(x) => x.classNames}">
+    <span part="grid" data-ag-theme-mode=${(x) => x.themeMode} class="${(x) => x.classNames}">
       <slot name="grid" ${ref('gridSlot')}></slot>
       <slot></slot>
     </span>

package/dist/esm/index.js

@@ -16,3 +16,4 @@ export * from './status-bar-components';
 export * from './style';
 export * from './tooltips';
 export * from './utils';
+export * from './grid-pro-v34';

package/dist/esm/status-bar-components/pagination.status-bar.js

@@ -152,31 +152,38 @@ export class PaginationStatusBarComponent {
         return button;
     }
     goToPage(page) {
+        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r;
         switch (page) {
             case 'first':
-                this.api.paginationGoToFirstPage();
+                ((_b = (_a = this.api).paginationGoToFirstPage) === null || _b === void 0 ? void 0 : _b.call(_a)) ||
+                    ((_d = (_c = this.api.paginationProxy) === null || _c === void 0 ? void 0 : _c.goToFirstPage) === null || _d === void 0 ? void 0 : _d.call(_c));
                 break;
             case 'previous':
-                this.api.paginationGoToPreviousPage();
+                ((_f = (_e = this.api).paginationGoToPreviousPage) === null || _f === void 0 ? void 0 : _f.call(_e)) ||
+                    ((_h = (_g = this.api.paginationProxy) === null || _g === void 0 ? void 0 : _g.goToPreviousPage) === null || _h === void 0 ? void 0 : _h.call(_g));
                 break;
             case 'next':
-                this.api.paginationGoToNextPage();
+                ((_k = (_j = this.api).paginationGoToNextPage) === null || _k === void 0 ? void 0 : _k.call(_j)) ||
+                    ((_m = (_l = this.api.paginationProxy) === null || _l === void 0 ? void 0 : _l.goToNextPage) === null || _m === void 0 ? void 0 : _m.call(_l));
                 break;
             case 'last':
-                this.api.paginationGoToLastPage();
+                ((_p = (_o = this.api).paginationGoToLastPage) === null || _p === void 0 ? void 0 : _p.call(_o)) ||
+                    ((_r = (_q = this.api.paginationProxy) === null || _q === void 0 ? void 0 : _q.goToLastPage) === null || _r === void 0 ? void 0 : _r.call(_q));
                 break;
         }
     }
     updateDisplay() {
-        var _a, _b, _c, _d;
-        const currentPage = this.api.paginationGetCurrentPage() + 1; // 1-based for display
-        const totalPages = this.api.paginationGetTotalPages() || 1;
-        const pageSize = this.api.paginationGetPageSize();
-        const rowCount = this.api.paginationGetRowCount();
+        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x;
+        // Use compatibility layer for v34 pagination API
+        const apiAny = this.api;
+        const currentPage = ((_e = (_b = (_a = apiAny.paginationGetCurrentPage) === null || _a === void 0 ? void 0 : _a.call(apiAny)) !== null && _b !== void 0 ? _b : (_d = (_c = apiAny.paginationProxy) === null || _c === void 0 ? void 0 : _c.getCurrentPage) === null || _d === void 0 ? void 0 : _d.call(_c)) !== null && _e !== void 0 ? _e : 0) + 1; // 1-based for display
+        const totalPages = (_k = (_g = (_f = apiAny.paginationGetTotalPages) === null || _f === void 0 ? void 0 : _f.call(apiAny)) !== null && _g !== void 0 ? _g : (_j = (_h = apiAny.paginationProxy) === null || _h === void 0 ? void 0 : _h.getTotalPages) === null || _j === void 0 ? void 0 : _j.call(_h)) !== null && _k !== void 0 ? _k : 1;
+        const pageSize = (_m = (_l = apiAny.paginationGetPageSize) === null || _l === void 0 ? void 0 : _l.call(apiAny)) !== null && _m !== void 0 ? _m : (_p = (_o = apiAny.paginationProxy) === null || _o === void 0 ? void 0 : _o.getPageSize) === null || _p === void 0 ? void 0 : _p.call(_o);
+        const rowCount = (_r = (_q = apiAny.paginationGetRowCount) === null || _q === void 0 ? void 0 : _q.call(apiAny)) !== null && _r !== void 0 ? _r : (_t = (_s = apiAny.paginationProxy) === null || _s === void 0 ? void 0 : _s.getMasterRowCount) === null || _t === void 0 ? void 0 : _t.call(_s);
         // Check if we're in server-side mode and if the total count is uncertain
         // Add null checks for test environment compatibility
-        const isServerSide = ((_d = (_c = (_b = (_a = this.api).getModel) === null || _b === void 0 ? void 0 : _b.call(_a)) === null || _c === void 0 ? void 0 : _c.getType) === null || _d === void 0 ? void 0 : _d.call(_c)) === 'serverSide';
-        const hasUncertainTotal = isServerSide && this.api.paginationIsLastPageFound && !this.api.paginationIsLastPageFound();
+        const isServerSide = ((_x = (_w = (_v = (_u = this.api).getModel) === null || _v === void 0 ? void 0 : _v.call(_u)) === null || _w === void 0 ? void 0 : _w.getType) === null || _x === void 0 ? void 0 : _x.call(_w)) === 'serverSide';
+        const hasUncertainTotal = isServerSide && apiAny.paginationIsLastPageFound && !apiAny.paginationIsLastPageFound();
         // Update the page numbers
         this.pageNumberDisplay.textContent = currentPage.toString();
         this.pageNumberTotalDisplay.textContent = hasUncertainTotal ? 'more' : totalPages.toString();