@genesislcap/grid-pro 14.284.3-alpha-fa8a336.0 → 14.284.3

package/dist/esm/datasource/server-side.datasource.js

@@ -1,7 +1,7 @@
 import { __awaiter, __decorate } from "tslib";
 import { Events, } from '@ag-grid-community/core';
 import { dataServerResultFilter, MessageType, normaliseCriteria, toFieldMetadata, } from '@genesislcap/foundation-comms';
-import { LifecycleMixin, insertDocumentCSSRule } from '@genesislcap/foundation-utils';
+import { LifecycleMixin } from '@genesislcap/foundation-utils';
 import { attr, customElement, DOM, observable } from '@microsoft/fast-element';
 import { gridProGenesisDatasourceEventNames } from '../grid-pro-genesis-datasource';
 import { logger } from '../utils';
@@ -12,58 +12,9 @@ import { ReqRepServerSideDatasource } from './server-side.resource-reqrep';
 const criteriaDelimiter = ';';
 const withoutColumnDefs = null;
 const timeoutInMs = 500;
-/**
- * Custom CSS for server-side datasource sort indicators
- * Makes sort indicators always visible with custom styling
- */
-const serverSideSortIndicatorCSS = `
-  .grid-pro-server-side .ag-header-cell-sortable .ag-sort-indicator-container {
-    opacity: 1 !important;
-    visibility: visible !important;
-  }
-  
-  .grid-pro-server-side .ag-header-cell-sortable:not(.ag-header-cell-sorted) .ag-sort-indicator-container {
-    opacity: 0.4 !important;
-  }
-  
-  .grid-pro-server-side .ag-header-cell-sorted .ag-sort-indicator-container {
-    opacity: 1 !important;
-  }
-  
-  .grid-pro-server-side .ag-sort-ascending-icon::before,
-  .grid-pro-server-side .ag-sort-descending-icon::before,
-  .grid-pro-server-side .ag-header-cell-sortable:not(.ag-header-cell-sorted) .ag-sort-indicator-icon::before {
-    font-family: var(--ag-icon-font-family, agGridAlpine) !important;
-    font-size: var(--ag-icon-size, 16px) !important;
-    color: var(--ag-header-foreground-color, var(--ag-foreground-color)) !important;
-  }
-  
-  .grid-pro-server-side .ag-sort-ascending-icon::before {
-    content: "\\e90d" !important; /* AG Grid sort up icon */
-  }
-  
-  .grid-pro-server-side .ag-sort-descending-icon::before {
-    content: "\\e90c" !important; /* AG Grid sort down icon */
-  }
-  
-  .grid-pro-server-side .ag-header-cell-sortable:not(.ag-header-cell-sorted) .ag-sort-indicator-icon::before {
-    content: "\\e90b" !important; /* AG Grid sort icon */
-    opacity: 0.6 !important;
-  }
-  
-  /* Ensure the sort indicator is always visible for sortable columns in server-side mode */
-  .grid-pro-server-side .ag-header-cell-sortable .ag-sort-indicator-icon {
-    display: inline-block !important;
-  }
-`;
 /**
  * A Genesis Datasource element, for server-side | SSRM-compatible data fetching and used exclusively by the GridPro element.
  * @remarks Only supports Server-Side Row Model. Requires `@ag-grid-enterprise/server-side-row-model` setup and valid AG Grid Enterprise license.
- *
- * **Custom Sort Indicators**: This datasource automatically applies custom sort indicators that are always visible (instead of only on hover).
- * Sortable columns will show a subtle sort icon even when not sorted, and active sort indicators will be more prominent.
- * The custom styling uses AG Grid's native icon font for consistency with the grid theme.
- *
  * @alpha
  */
 let GridProServerSideDatasource = class GridProServerSideDatasource extends LifecycleMixin(GridProBaseDatasource) {
@@ -82,7 +33,6 @@ let GridProServerSideDatasource = class GridProServerSideDatasource extends Life
          */
         this.liveUpdates = false;
         this.request = {};
-        this.sortIndicatorCSSDestroy = null;
     }
     resourceNameChanged(oldValue, newValue) {
         if (!oldValue || oldValue === newValue)
@@ -95,7 +45,7 @@ let GridProServerSideDatasource = class GridProServerSideDatasource extends Life
         const criteriaIsNotDuplicate = oldCriteria !== normaliseCriteria(newCriteria, criteriaDelimiter);
         if (this.ssrmDatasource && criteriaIsNotDuplicate) {
             DOM.queueUpdate(() => __awaiter(this, void 0, void 0, function* () {
-                yield this.restart();
+                yield this.reloadResourceData();
             }));
         }
     }
@@ -137,12 +87,13 @@ let GridProServerSideDatasource = class GridProServerSideDatasource extends Life
             // Cache the current filter model before clearing data to preserve column filters
             yield ((_b = this.agGrid) === null || _b === void 0 ? void 0 : _b.cacheFilterConfig());
             this.clearRowData(withoutColumnDefs);
-            (_c = this.agGrid.gridApi) === null || _c === void 0 ? void 0 : _c.refreshServerSide({ purge: true });
             if (params) {
+                // this.datasource.stream = undefined;
                 const options = Object.assign(Object.assign({}, this.datasourceOptions()), params);
                 const initOK = yield this.datasource.init(options, true, false);
+                // this.$emit(gridProGenesisDatasourceEventNames.dataInit);
                 if (!initOK) {
-                    (_d = this.agGrid.gridApi) === null || _d === void 0 ? void 0 : _d.setServerSideDatasource(null);
+                    (_c = this.agGrid.gridApi) === null || _c === void 0 ? void 0 : _c.setServerSideDatasource(null);
                     logger.error('Genesis Datasource re-init failed on filtering/sorting.');
                 }
             }
@@ -151,48 +102,13 @@ let GridProServerSideDatasource = class GridProServerSideDatasource extends Life
                     yield this.ssrmDatasource.destroy();
                     this.ssrmDatasource = undefined;
                 }
-                (_e = this.agGrid.gridApi) === null || _e === void 0 ? void 0 : _e.setServerSideDatasource(null);
+                (_d = this.agGrid.gridApi) === null || _d === void 0 ? void 0 : _d.setServerSideDatasource(null);
+                (_e = this.agGrid.gridApi) === null || _e === void 0 ? void 0 : _e.refreshServerSide({ purge: true });
                 (_g = (_f = this.agGrid) === null || _f === void 0 ? void 0 : _f.gridApi) === null || _g === void 0 ? void 0 : _g.showLoadingOverlay();
                 yield this.init();
             }
         });
     }
-    /**
-     * Applies custom sort indicator styling for server-side datasource
-     * @internal
-     */
-    applyServerSideSortIndicatorStyling() {
-        var _a, _b;
-        // Remove existing styling if present
-        this.removeServerSideSortIndicatorStyling();
-        // Add custom CSS class to the grid container
-        if ((_a = this.agGrid) === null || _a === void 0 ? void 0 : _a.gridApi) {
-            // Add CSS class to grid element
-            const gridElement = ((_b = this.agGrid.gridSlot) === null || _b === void 0 ? void 0 : _b.parentElement) || this.agGrid;
-            if (gridElement) {
-                gridElement.classList.add('grid-pro-server-side');
-            }
-        }
-        // Insert custom CSS rules
-        this.sortIndicatorCSSDestroy = insertDocumentCSSRule(serverSideSortIndicatorCSS, 'grid-pro-server-side-sort');
-    }
-    /**
-     * Removes custom sort indicator styling
-     * @internal
-     */
-    removeServerSideSortIndicatorStyling() {
-        var _a, _b;
-        // Remove CSS class from grid element
-        const gridElement = ((_b = (_a = this.agGrid) === null || _a === void 0 ? void 0 : _a.gridSlot) === null || _b === void 0 ? void 0 : _b.parentElement) || this.agGrid;
-        if (gridElement) {
-            gridElement.classList.remove('grid-pro-server-side');
-        }
-        // Remove custom CSS rules
-        if (this.sortIndicatorCSSDestroy) {
-            this.sortIndicatorCSSDestroy();
-            this.sortIndicatorCSSDestroy = null;
-        }
-    }
     init() {
         return __awaiter(this, void 0, void 0, function* () {
             if (this.agGrid) {
@@ -210,71 +126,55 @@ let GridProServerSideDatasource = class GridProServerSideDatasource extends Life
                         filter: true,
                         resizable: true,
                         sortable: false,
-                        unSortIcon: true,
-                    }, rowBuffer: 0, rowModelType: 'serverSide', suppressServerSideInfiniteScroll: false, suppressMultiSort: true, onFilterChanged: (params) => { }, onSortChanged: (params) => { }, onPaginationChanged: (event) => this.onPaginationChanged(event) }, this.agGrid['agGridOptions']), this.deferredGridOptions);
+                    }, pagination: this.pagination, paginationPageSize: this.maxRows, rowBuffer: 0, rowModelType: 'serverSide', suppressServerSideInfiniteScroll: false, suppressMultiSort: true, onFilterChanged: (params) => { }, onSortChanged: (params) => { }, onPaginationChanged: (event) => this.onPaginationChanged(event) }, this.agGrid['agGridOptions']), this.deferredGridOptions);
                 this.agGrid.gridOptions = gridOptions;
-                // Guard against test environment where initGrid might not exist
-                if (typeof this.agGrid['initGrid'] === 'function') {
-                    this.agGrid['initGrid']();
-                }
-                // Guard against test environment where addEventListener might not exist
-                if (typeof this.agGrid.addEventListener === 'function') {
-                    this.agGrid.addEventListener(Events.EVENT_GRID_READY, () => __awaiter(this, void 0, void 0, function* () {
-                        var _a, _b;
-                        const initOK = yield this.datasource.init(this.datasourceOptions(), true, false);
-                        if (!initOK) {
-                            logger.debug(`Genesis Datasource init failed for ${this.resourceName}`);
-                            this.clearRowData();
-                            return;
-                        }
-                        this.$emit(gridProGenesisDatasourceEventNames.dataInit);
-                        this.indexes = this.getResourceIndexes(this.datasource.availableIndexes);
-                        const fieldMetadata = toFieldMetadata(this.datasource.originalFieldDef);
-                        const agColumnDefs = yield this.getAgColumnDefs(fieldMetadata);
-                        // Guard against test environment where setColumnDefs might not exist
-                        if (typeof ((_a = this.agGrid.gridApi) === null || _a === void 0 ? void 0 : _a.setColumnDefs) === 'function') {
-                            this.agGrid.gridApi.setColumnDefs(agColumnDefs);
-                        }
-                        if (this.isRequestServer) {
-                            this.ssrmDatasource = new ReqRepServerSideDatasource({
-                                createReqRepRequestFunc: this.createReqRepRequest.bind(this),
-                                reloadResourceDataFunc: this.reloadResourceData.bind(this),
-                                resourceName: this.resourceName,
-                                resourceParams: this.params,
-                                resourceIndexes: this.indexes,
-                                resourceColDefs: this.datasource.originalFieldDef,
-                                maxRows: +this.maxRows,
-                                maxView: +this.maxView,
-                                rowId: this.rowId,
-                                pagination: this.pagination,
-                                zeroBasedViewNumber: this.zeroBasedViewNumber,
-                            });
-                        }
-                        else {
-                            this.ssrmDatasource = new DataserverServerSideDatasource({
-                                createDataserverStreamFunc: this.createDataserverStream.bind(this),
-                                reloadResourceDataFunc: this.reloadResourceData.bind(this),
-                                resourceName: this.resourceName,
-                                resourceParams: this.params,
-                                resourceIndexes: this.indexes,
-                                resourceColDefs: this.datasource.originalFieldDef,
-                                maxRows: +this.maxRows,
-                                maxView: +this.maxView,
-                                rowId: this.rowId,
-                                pagination: this.pagination,
-                                zeroBasedViewNumber: this.zeroBasedViewNumber,
-                            });
-                        }
-                        // Guard against test environment where setServerSideDatasource might not exist
-                        if (typeof ((_b = this.agGrid.gridApi) === null || _b === void 0 ? void 0 : _b.setServerSideDatasource) === 'function') {
-                            this.agGrid.gridApi.setServerSideDatasource(this.ssrmDatasource);
-                        }
-                        // Restore cached filter config after setting the server-side datasource
-                        this.agGrid.restoreCachedFilterConfig();
-                        // Apply custom sort indicator styling for server-side datasource
-                        this.applyServerSideSortIndicatorStyling();
-                    }), { once: true });
-                }
+                this.agGrid['initGrid']();
+                this.agGrid.addEventListener(Events.EVENT_GRID_READY, () => __awaiter(this, void 0, void 0, function* () {
+                    const initOK = yield this.datasource.init(this.datasourceOptions(), true, false);
+                    if (!initOK) {
+                        logger.debug(`Genesis Datasource init failed for ${this.resourceName}`);
+                        this.clearRowData();
+                        return;
+                    }
+                    this.$emit(gridProGenesisDatasourceEventNames.dataInit);
+                    this.indexes = this.getResourceIndexes(this.datasource.availableIndexes);
+                    const fieldMetadata = toFieldMetadata(this.datasource.originalFieldDef);
+                    const agColumnDefs = yield this.getAgColumnDefs(fieldMetadata);
+                    this.agGrid.gridApi.setColumnDefs(agColumnDefs);
+                    if (this.isRequestServer) {
+                        this.ssrmDatasource = new ReqRepServerSideDatasource({
+                            createReqRepRequestFunc: this.createReqRepRequest.bind(this),
+                            reloadResourceDataFunc: this.reloadResourceData.bind(this),
+                            resourceName: this.resourceName,
+                            resourceParams: this.params,
+                            resourceIndexes: this.indexes,
+                            resourceColDefs: this.datasource.originalFieldDef,
+                            maxRows: +this.maxRows,
+                            maxView: +this.maxView,
+                            rowId: this.rowId,
+                            pagination: this.pagination,
+                            zeroBasedViewNumber: this.zeroBasedViewNumber,
+                        });
+                    }
+                    else {
+                        this.ssrmDatasource = new DataserverServerSideDatasource({
+                            createDataserverStreamFunc: this.createDataserverStream.bind(this),
+                            reloadResourceDataFunc: this.reloadResourceData.bind(this),
+                            resourceName: this.resourceName,
+                            resourceParams: this.params,
+                            resourceIndexes: this.indexes,
+                            resourceColDefs: this.datasource.originalFieldDef,
+                            maxRows: +this.maxRows,
+                            maxView: +this.maxView,
+                            rowId: this.rowId,
+                            pagination: this.pagination,
+                            zeroBasedViewNumber: this.zeroBasedViewNumber,
+                        });
+                    }
+                    this.agGrid.gridApi.setServerSideDatasource(this.ssrmDatasource);
+                    // Restore cached filter config after setting the server-side datasource
+                    this.agGrid.restoreCachedFilterConfig();
+                }), { once: true });
                 return;
             }
             logger.warn(`Application not connected, falling back to local columnDefs/rowData`);
@@ -283,9 +183,6 @@ let GridProServerSideDatasource = class GridProServerSideDatasource extends Life
     onPaginationChanged(event) {
         var _a;
         if (this.agGrid.gridApi && this.ssrmDatasource) {
-            // event.newPage = true means "navigated to a new page" (NOT a page size change)
-            // event.newPage = false means pagination changed for other reasons (like page size change)
-            // this.ssrmDatasource.isNewPageSize = !event.newPage;
             this.ssrmDatasource.isNewPageSize = (_a = event.newPage) !== null && _a !== void 0 ? _a : false;
         }
     }
@@ -300,15 +197,8 @@ let GridProServerSideDatasource = class GridProServerSideDatasource extends Life
                 yield this.ssrmDatasource.destroy();
                 this.ssrmDatasource = undefined;
             }
-            // Remove custom sort indicator styling
-            this.removeServerSideSortIndicatorStyling();
-            // Guard against test environment where gridApi methods might not exist
-            if (typeof ((_b = this.agGrid.gridApi) === null || _b === void 0 ? void 0 : _b.setServerSideDatasource) === 'function') {
-                this.agGrid.gridApi.setServerSideDatasource(null);
-            }
-            if (typeof ((_c = this.agGrid.gridApi) === null || _c === void 0 ? void 0 : _c.refreshServerSide) === 'function') {
-                this.agGrid.gridApi.refreshServerSide({ purge: true });
-            }
+            (_b = this.agGrid.gridApi) === null || _b === void 0 ? void 0 : _b.setServerSideDatasource(null);
+            (_c = this.agGrid.gridApi) === null || _c === void 0 ? void 0 : _c.refreshServerSide({ purge: true });
         });
     }
     restart() {
@@ -321,21 +211,13 @@ let GridProServerSideDatasource = class GridProServerSideDatasource extends Life
         var _a, _b, _c, _d;
         this.rowData = new Map();
         if (withColumnDefs) {
-            // Guard against test environment where setColumnDefs might not exist
-            if (typeof ((_b = (_a = this.agGrid) === null || _a === void 0 ? void 0 : _a.gridApi) === null || _b === void 0 ? void 0 : _b.setColumnDefs) === 'function') {
-                this.agGrid.gridApi.setColumnDefs([]);
-            }
+            (_b = (_a = this.agGrid) === null || _a === void 0 ? void 0 : _a.gridApi) === null || _b === void 0 ? void 0 : _b.setColumnDefs([]);
         }
         this.agTransaction = { remove: [] };
-        // Guard against test environment where gridApi methods might not exist
-        if (typeof ((_c = this.agGrid.gridApi) === null || _c === void 0 ? void 0 : _c.forEachNode) === 'function') {
-            this.agGrid.gridApi.forEachNode((node) => {
-                this.agTransaction.remove.push(node.data);
-            });
-        }
-        if (typeof ((_d = this.agGrid.gridApi) === null || _d === void 0 ? void 0 : _d.applyServerSideTransaction) === 'function') {
-            this.agGrid.gridApi.applyServerSideTransaction(this.agTransaction);
-        }
+        (_c = this.agGrid.gridApi) === null || _c === void 0 ? void 0 : _c.forEachNode((node) => {
+            this.agTransaction.remove.push(node.data);
+        });
+        (_d = this.agGrid.gridApi) === null || _d === void 0 ? void 0 : _d.applyServerSideTransaction(this.agTransaction);
         this.agTransaction = undefined;
     }
     getResourceIndexes(avaialbleIndexes) {
@@ -364,6 +246,7 @@ let GridProServerSideDatasource = class GridProServerSideDatasource extends Life
                 logger.warn('Specified [orderBy] index is not valid and will not be used. See https://learn.genesis.global/docs/database/data-types/index-entities/ - Available indexes:', validIndexes);
             }
         }
+        logger.debug('Getting configured params:', params);
         return params;
     }
     get rowModel() {
@@ -397,7 +280,7 @@ let GridProServerSideDatasource = class GridProServerSideDatasource extends Life
                         // this.handleStreamDeletes(nextMessage.deletes);
                         // this.ssrmDatasource.client_ROWS_COUNT -= nextMessage.deletes.length ?? 0;
                         // this.ssrmDatasource.server_ROWS_COUNT -= nextMessage.deletes.length ?? 0;
-                        if (this.pagination) {
+                        if (this.agGrid.pagination) {
                             this.applyAllAgTransactions();
                         }
                         else {
@@ -435,8 +318,10 @@ let GridProServerSideDatasource = class GridProServerSideDatasource extends Life
     getAgColumnDefs(fieldsMetadata) {
         return __awaiter(this, void 0, void 0, function* () {
             const colDefsFromGenesisData = this.generateColumnDefsFromMetadata(fieldsMetadata, getServerSideFilterParamsByFieldType);
-            colDefsFromGenesisData.forEach((colDef) => {
-                colDef.sortable = [].concat(...this.indexes.values()).includes(colDef.field);
+            colDefsFromGenesisData.map((colDef) => {
+                return {
+                    sortable: [].concat(...this.indexes.values()).includes(colDef.field),
+                };
             });
             const colDefsMergedWithTemplateDefs = yield this.agGrid.mergeAllColumnDefsAndStates(colDefsFromGenesisData, true);
             return colDefsMergedWithTemplateDefs;

package/dist/esm/datasource/server-side.resource-base.js

@@ -66,6 +66,7 @@ export class BaseServerSideDatasource {
                     return;
                 }
                 else if (toBeAppliedSortModel.length > 0) {
+                    this.currentSortModel = toBeAppliedSortModel;
                     const coldIdBeingSorted = toBeAppliedSortModel[0].colId; // Not allowing multiple sorts by user
                     const sortTypeBeingApplied = toBeAppliedSortModel[0].sort;
                     const orderByAndToBeSortedColIds = this.getOrderByAndToBeSortedColIds(this.resourceIndexes, coldIdBeingSorted);
@@ -80,7 +81,6 @@ export class BaseServerSideDatasource {
                         return;
                     }
                     else if (JSON.stringify(toBeAppliedSortModel) !== JSON.stringify(this.currentSortModel)) {
-                        this.currentSortModel = toBeAppliedSortModel;
                         this.resourceParams.ORDER_BY = orderByAndToBeSortedColIds.orderBy;
                         this.resourceParams.REVERSE = sortTypeBeingApplied === 'desc' ? true : false;
                         yield this.refreshDatasource(params);

package/dist/esm/datasource/server-side.resource-dataserver.js

@@ -49,8 +49,7 @@ export class DataserverServerSideDatasource extends BaseServerSideDatasource {
             this.dataserverStreamSubscription = this.dataserverStream.subscribe((dataserverResult) => {
                 if (applyResult) {
                     DOM.queueUpdate(() => __awaiter(this, void 0, void 0, function* () {
-                        // TODO: this is a bit of hack, due GSF not returning a different ROWS_COUNT when there is a CRITERIA_MATCH
-                        if (this.resourceParams.CRITERIA_MATCH && this.pagination) {
+                        if (this.resourceParams.CRITERIA_MATCH) {
                             const updatedInfo = yield this.connect.snapshot(this.resourceName, {
                                 MAX_ROWS: this.maxView,
                                 MAX_VIEW: this.maxView,

package/dist/esm/grid-pro.js

@@ -135,6 +135,14 @@ export class GridPro extends LifecycleMixin(FoundationElement) {
          * @see https://www.ag-grid.com/javascript-data-grid/server-side-model-pagination/
          */
         this.pagination = false;
+        /**
+         * Number of rows per page when pagination is enabled.
+         * @remarks
+         * **Default Value:** `DatasourceDefaults.DEFAULT_PAGINATION_PAGE_SIZE (25)` (default MAX_ROWS divided by 10)
+         * Only used when pagination is enabled.
+         * Note that AG Grid's full pagination functionality requires the Enterprise module.
+         */
+        this.paginationPageSize = DatasourceDefaults.DEFAULT_PAGINATION_PAGE_SIZE;
         /**
          * Configuration for the grid status bar components.
          * @remarks
@@ -221,9 +229,6 @@ export class GridPro extends LifecycleMixin(FoundationElement) {
         this.rootEventsListeners.forEach(({ key, action }) => {
             this.addEventListener(key, action);
         });
-        this.paginationPageSize = this.isServerSide
-            ? this.gridProDatasource.maxRows
-            : DatasourceDefaults.DEFAULT_PAGINATION_PAGE_SIZE;
     }
     disconnectedCallback() {
         super.disconnectedCallback();
@@ -359,12 +364,6 @@ export class GridPro extends LifecycleMixin(FoundationElement) {
     get gridOptions() {
         return this.agGridOptions;
     }
-    /**
-     * @public
-     */
-    get isServerSide() {
-        return this.gridProDatasource instanceof GridProServerSideDatasource;
-    }
     /**
      * @public
      */
@@ -556,29 +555,30 @@ export class GridPro extends LifecycleMixin(FoundationElement) {
             return colDefsToReturn;
         });
     }
-    panelExists(statusPanelType, panels) {
-        return panels.some((panel) => panel.statusPanel === statusPanelType);
-    }
-    addRowCountPanel(statusPanels) {
-        // 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) {
-            return;
+    setupPaginationAndStatusBar(gridOptions) {
+        var _a;
+        // TODO: when this happens "pagination" is undefined, (due init cycles, DS being child of grid) so we need to use this['_pagination'] for now
+        const pagination = this['_pagination'];
+        if (pagination && gridOptions.rowModelType) {
+            gridOptions.pagination = true;
+            gridOptions.paginationPageSize = this.paginationPageSize;
+            gridOptions.suppressScrollOnNewData = true;
         }
-        if (this.statusBarConfig && this.statusBarConfig.rows === true) {
-            const rowCountStatusPanel = 'agTotalAndFilteredRowCountComponent';
-            if (!this.panelExists(rowCountStatusPanel, statusPanels)) {
+        // Set default status bar with components based on configuration
+        if (this.withStatusBar && this.statusBarConfig) {
+            // Create status panels based on config
+            const statusPanels = [];
+            // Always add row count component
+            if (this.statusBarConfig && this.statusBarConfig.rows === true) {
                 statusPanels.push({
-                    statusPanel: rowCountStatusPanel,
+                    statusPanel: gridOptions.rowModelType === 'serverSide'
+                        ? 'agTotalRowCountComponent'
+                        : 'agTotalAndFilteredRowCountComponent',
                     align: 'left',
                 });
             }
-        }
-    }
-    addMaxRowsPanel(statusPanels) {
-        if (this.statusBarConfig && this.statusBarConfig.maxRows === true) {
-            if (!this.panelExists(GridProStatusBarTypes.labelValue, statusPanels)) {
+            // Add max rows component if explicitly enabled
+            if (this.statusBarConfig && this.statusBarConfig.maxRows === true) {
                 statusPanels.push({
                     statusPanel: GridProStatusBarTypes.labelValue,
                     statusPanelParams: {
@@ -589,64 +589,31 @@ export class GridPro extends LifecycleMixin(FoundationElement) {
                     align: 'left',
                 });
             }
-        }
-    }
-    addAggregationPanel(statusPanels) {
-        if (this.statusBarConfig && this.statusBarConfig.aggregation === true) {
-            if (!this.panelExists('agAggregationComponent', statusPanels)) {
+            // Add aggregation component if explicitly enabled
+            if (this.statusBarConfig && this.statusBarConfig.aggregation === true) {
                 statusPanels.push({
                     statusPanel: 'agAggregationComponent',
                     align: 'right',
                 });
             }
-        }
-    }
-    addDatasourcePanels(statusPanels) {
-        if (this.gridProDatasource) {
-            const datasourceStatusPanels = this.gridProDatasource.getDatasourceStatusBarPanels(this.isServerSide);
-            // Filter out duplicate datasource panels
-            const newDatasourcePanels = datasourceStatusPanels.filter((panel) => !this.panelExists(panel.statusPanel, statusPanels));
-            statusPanels.push(...newDatasourcePanels);
-        }
-    }
-    addPaginationPanel(statusPanels) {
-        if (this['_pagination']) {
-            if (!this.panelExists(GridProStatusBarTypes.pagination, statusPanels)) {
+            // Add datasource-specific status bar components
+            if (this.gridProDatasource) {
+                const isServerSide = gridOptions.rowModelType === 'serverSide';
+                const datasourceStatusPanels = this.gridProDatasource.getDatasourceStatusBarPanels(isServerSide);
+                statusPanels.push(...datasourceStatusPanels);
+            }
+            // Add pagination status if pagination is enabled
+            if (pagination) {
+                gridOptions.suppressPaginationPanel = true;
                 statusPanels.push({
                     statusPanel: GridProStatusBarTypes.pagination,
                     align: 'right',
                 });
             }
-        }
-    }
-    setupPaginationAndStatusBar(gridOptions) {
-        // Keep the guard for production code, but allow override for testing
-        // if (this.initialised && !allowDuplicateCheck) return;
-        var _a, _b;
-        if (this['_pagination']) {
-            gridOptions.pagination = true;
-            gridOptions.suppressScrollOnNewData = true;
-            gridOptions.paginationPageSize = this.paginationPageSize;
-        }
-        // Set default status bar with components based on configuration
-        if (this.withStatusBar && this.statusBarConfig) {
-            // For duplicate checking (testing scenario), clear existing status panels to prevent duplicates
-            // 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.addMaxRowsPanel(statusPanels);
-            this.addAggregationPanel(statusPanels);
-            this.addDatasourcePanels(statusPanels);
-            if (this['_pagination']) {
-                gridOptions.suppressPaginationPanel = true;
-                this.addPaginationPanel(statusPanels);
-            }
-            const userDefinedStatusPanels = ((_b = gridOptions.statusBar) === null || _b === void 0 ? void 0 : _b.statusPanels) || [];
-            const newUserDefinedPanels = userDefinedStatusPanels.filter((panel) => !this.panelExists(panel.statusPanel, statusPanels));
-            statusPanels.push(...newUserDefinedPanels);
+            // Store user-defined status panels for later
+            const userDefinedStatusPanels = ((_a = gridOptions.statusBar) === null || _a === void 0 ? void 0 : _a.statusPanels) || [];
             gridOptions.statusBar = {
-                statusPanels: statusPanels,
+                statusPanels: [...statusPanels, ...userDefinedStatusPanels],
             };
         }
     }

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

@@ -77,19 +77,4 @@ export const foundationGridProStyles = css `
     padding-top: var(--ag-grid-size);
     padding-bottom: var(--ag-grid-size);
   }
-
-  /* Custom styling for the unsort icon (sortNone) - only for sortable columns */
-  .ag-header-cell.ag-header-cell-sortable .ag-icon-none {
-    opacity: 100%;
-    color: var(--rapid-ag-header-foreground-color, var(--ag-foreground-color, #fff));
-    font-size: calc(var(--ag-icon-size, 12px) * 1.2);
-    font-weight: bold;
-  }
-
-  .ag-header-cell.ag-header-cell-sortable:hover .ag-icon-none {
-    opacity: 100%;
-    color: var(--rapid-ag-header-foreground-color, var(--ag-foreground-color, #fff));
-    transform: scale(1.1);
-    transition: transform 0.2s ease;
-  }
 `;

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

@@ -6,26 +6,24 @@
 export class PaginationStatusBarComponent {
     init(params) {
         this.api = params.api;
-        this.element = document.createElement('div');
-        this.element.className = 'ag-status-panel';
-        this.element.setAttribute('data-test-id', 'grid-pagination-panel');
-        this.element.setAttribute('role', 'navigation');
-        this.element.setAttribute('aria-label', 'Pagination controls');
-        this.element.style.display = 'flex';
-        this.element.style.alignItems = 'center';
-        this.element.style.justifyContent = 'flex-end';
-        this.element.style.height = 'var(--ag-status-bar-height)';
+        this.eGui = document.createElement('div');
+        this.eGui.className = 'ag-status-panel';
+        this.eGui.setAttribute('data-test-id', 'grid-pagination-panel');
+        this.eGui.setAttribute('role', 'navigation');
+        this.eGui.setAttribute('aria-label', 'Pagination controls');
+        this.eGui.style.display = 'flex';
+        this.eGui.style.alignItems = 'center';
+        this.eGui.style.justifyContent = 'flex-end';
+        this.eGui.style.height = 'var(--ag-status-bar-height)';
         this.createPaginationPanel();
         // Initial update
         this.updateDisplay();
         // Listen to pagination changes
-        this.paginationChangedHandler = () => {
-            this.updateDisplay();
-        };
+        this.paginationChangedHandler = this.updateDisplay.bind(this);
         this.api.addEventListener('paginationChanged', this.paginationChangedHandler);
     }
     getGui() {
-        return this.element;
+        return this.eGui;
     }
     createPaginationPanel() {
         // Create the main pagination panel
@@ -98,7 +96,7 @@ export class PaginationStatusBarComponent {
         this.paginationPanel.appendChild(this.nextPageButton);
         this.paginationPanel.appendChild(this.lastPageButton);
         // Add to main container
-        this.element.appendChild(this.paginationPanel);
+        this.eGui.appendChild(this.paginationPanel);
         // Add event listeners with keyboard support
         this.addPaginationEventListeners();
     }
@@ -204,7 +202,5 @@ export class PaginationStatusBarComponent {
         if (this.api && this.paginationChangedHandler) {
             this.api.removeEventListener('paginationChanged', this.paginationChangedHandler);
         }
-        this.api = null;
-        this.paginationChangedHandler = null;
     }
 }