@genesislcap/grid-pro 14.285.1 → 14.286.0

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 } from '@genesislcap/foundation-utils';
+import { LifecycleMixin, insertDocumentCSSRule } 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,10 +12,59 @@ 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.
- * @alpha
+ *
+ * **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.
+ *
+ * @beta
  */
 let GridProServerSideDatasource = class GridProServerSideDatasource extends LifecycleMixin(GridProBaseDatasource) {
     constructor() {
@@ -33,6 +82,7 @@ let GridProServerSideDatasource = class GridProServerSideDatasource extends Life
          */
         this.liveUpdates = false;
         this.request = {};
+        this.sortIndicatorCSSDestroy = null;
     }
     resourceNameChanged(oldValue, newValue) {
         if (!oldValue || oldValue === newValue)
@@ -45,7 +95,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.reloadResourceData();
+                yield this.restart();
             }));
         }
     }
@@ -76,7 +126,7 @@ let GridProServerSideDatasource = class GridProServerSideDatasource extends Life
     /**
      * Resets the grid data while keeping columnDefs and reloads data.
      * @remarks This is used when the grid is already initialized and we want to reload the data due to a criteria/filter change.
-     * @public
+     * @beta
      */
     reloadResourceData(params) {
         var _a, _b, _c, _d, _e, _f, _g;
@@ -87,13 +137,12 @@ 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) {
-                    (_c = this.agGrid.gridApi) === null || _c === void 0 ? void 0 : _c.setServerSideDatasource(null);
+                    (_d = this.agGrid.gridApi) === null || _d === void 0 ? void 0 : _d.setServerSideDatasource(null);
                     logger.error('Genesis Datasource re-init failed on filtering/sorting.');
                 }
             }
@@ -102,13 +151,48 @@ let GridProServerSideDatasource = class GridProServerSideDatasource extends Life
                     yield this.ssrmDatasource.destroy();
                     this.ssrmDatasource = undefined;
                 }
-                (_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 });
+                (_e = this.agGrid.gridApi) === null || _e === void 0 ? void 0 : _e.setServerSideDatasource(null);
                 (_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) {
@@ -126,7 +210,8 @@ let GridProServerSideDatasource = class GridProServerSideDatasource extends Life
                         filter: true,
                         resizable: true,
                         sortable: false,
-                    }, 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);
+                        unSortIcon: true,
+                    }, 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;
                 this.agGrid['initGrid']();
                 this.agGrid.addEventListener(Events.EVENT_GRID_READY, () => __awaiter(this, void 0, void 0, function* () {
@@ -174,6 +259,8 @@ let GridProServerSideDatasource = class GridProServerSideDatasource extends Life
                     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 });
                 return;
             }
@@ -197,6 +284,8 @@ let GridProServerSideDatasource = class GridProServerSideDatasource extends Life
                 yield this.ssrmDatasource.destroy();
                 this.ssrmDatasource = undefined;
             }
+            // Remove custom sort indicator styling
+            this.removeServerSideSortIndicatorStyling();
             (_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 });
         });
@@ -246,7 +335,6 @@ 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() {
@@ -280,7 +368,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.agGrid.pagination) {
+                        if (this.pagination) {
                             this.applyAllAgTransactions();
                         }
                         else {
@@ -318,10 +406,8 @@ let GridProServerSideDatasource = class GridProServerSideDatasource extends Life
     getAgColumnDefs(fieldsMetadata) {
         return __awaiter(this, void 0, void 0, function* () {
             const colDefsFromGenesisData = this.generateColumnDefsFromMetadata(fieldsMetadata, getServerSideFilterParamsByFieldType);
-            colDefsFromGenesisData.map((colDef) => {
-                return {
-                    sortable: [].concat(...this.indexes.values()).includes(colDef.field),
-                };
+            colDefsFromGenesisData.forEach((colDef) => {
+                colDef.sortable = [].concat(...this.indexes.values()).includes(colDef.field);
             });
             const colDefsMergedWithTemplateDefs = yield this.agGrid.mergeAllColumnDefsAndStates(colDefsFromGenesisData, true);
             return colDefsMergedWithTemplateDefs;

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

@@ -4,7 +4,7 @@ import { FieldTypeEnum } from '@genesislcap/foundation-comms';
  * @param type - The type of the field/column
  * @returns the filter params for the specified field type
  * @remarks Currently only returns a default filter params object, for all field types
- * @alpha
+ * @beta
  */
 export function getServerSideFilterParamsByFieldType(type) {
     switch (type) {

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

@@ -2,6 +2,12 @@ import { __awaiter, __decorate } from "tslib";
 import { Auth, Connect, logger, } from '@genesislcap/foundation-comms';
 import { UUID } from '@genesislcap/foundation-utils';
 import { getAvailableIndexes, getAvailableIndexFields } from '../utils';
+/**
+ * Base class for server-side resource datasources used in Grid Pro SSRM implementations.
+ * Provides common logic for filtering, sorting, and pagination.
+ *
+ * @beta
+ */
 export class BaseServerSideDatasource {
     constructor(options) {
         this.rowData = new Map();
@@ -66,7 +72,6 @@ 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);
@@ -81,6 +86,7 @@ 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

@@ -4,7 +4,7 @@ import { DOM } from '@microsoft/fast-element';
 import { BaseServerSideDatasource } from './server-side.resource-base';
 /**
  * The DATASERVER IServerSideDatasource implementation, used for SSRM (Server-Side Row Model) in the grid.
- * @alpha
+ * @beta
  */
 export class DataserverServerSideDatasource extends BaseServerSideDatasource {
     constructor(options) {
@@ -49,7 +49,8 @@ export class DataserverServerSideDatasource extends BaseServerSideDatasource {
             this.dataserverStreamSubscription = this.dataserverStream.subscribe((dataserverResult) => {
                 if (applyResult) {
                     DOM.queueUpdate(() => __awaiter(this, void 0, void 0, function* () {
-                        if (this.resourceParams.CRITERIA_MATCH) {
+                        // 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) {
                             const updatedInfo = yield this.connect.snapshot(this.resourceName, {
                                 MAX_ROWS: this.maxView,
                                 MAX_VIEW: this.maxView,

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

@@ -4,7 +4,7 @@ import { logger } from '../utils';
 import { BaseServerSideDatasource } from './server-side.resource-base';
 /**
  * The REQUEST_SERVER IServerSideDatasource implementation, used for SSRM (Server-Side Row Model) in the grid.
- * @alpha
+ * @beta
  */
 export class ReqRepServerSideDatasource extends BaseServerSideDatasource {
     constructor(options) {

package/dist/esm/grid-pro.js

@@ -135,14 +135,6 @@ 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
@@ -229,6 +221,9 @@ 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();
@@ -364,6 +359,12 @@ export class GridPro extends LifecycleMixin(FoundationElement) {
     get gridOptions() {
         return this.agGridOptions;
     }
+    /**
+     * @public
+     */
+    get isServerSide() {
+        return this.gridProDatasource instanceof GridProServerSideDatasource;
+    }
     /**
      * @public
      */
@@ -555,30 +556,29 @@ export class GridPro extends LifecycleMixin(FoundationElement) {
             return colDefsToReturn;
         });
     }
-    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;
+    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;
         }
-        // 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) {
+        if (this.statusBarConfig && this.statusBarConfig.rows === true) {
+            const rowCountStatusPanel = 'agTotalAndFilteredRowCountComponent';
+            if (!this.panelExists(rowCountStatusPanel, statusPanels)) {
                 statusPanels.push({
-                    statusPanel: gridOptions.rowModelType === 'serverSide'
-                        ? 'agTotalRowCountComponent'
-                        : 'agTotalAndFilteredRowCountComponent',
+                    statusPanel: rowCountStatusPanel,
                     align: 'left',
                 });
             }
-            // Add max rows component if explicitly enabled
-            if (this.statusBarConfig && this.statusBarConfig.maxRows === true) {
+        }
+    }
+    addMaxRowsPanel(statusPanels) {
+        if (this.statusBarConfig && this.statusBarConfig.maxRows === true) {
+            if (!this.panelExists(GridProStatusBarTypes.labelValue, statusPanels)) {
                 statusPanels.push({
                     statusPanel: GridProStatusBarTypes.labelValue,
                     statusPanelParams: {
@@ -589,31 +589,64 @@ export class GridPro extends LifecycleMixin(FoundationElement) {
                     align: 'left',
                 });
             }
-            // Add aggregation component if explicitly enabled
-            if (this.statusBarConfig && this.statusBarConfig.aggregation === true) {
+        }
+    }
+    addAggregationPanel(statusPanels) {
+        if (this.statusBarConfig && this.statusBarConfig.aggregation === true) {
+            if (!this.panelExists('agAggregationComponent', statusPanels)) {
                 statusPanels.push({
                     statusPanel: 'agAggregationComponent',
                     align: 'right',
                 });
             }
-            // 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;
+        }
+    }
+    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)) {
                 statusPanels.push({
                     statusPanel: GridProStatusBarTypes.pagination,
                     align: 'right',
                 });
             }
-            // Store user-defined status panels for later
-            const userDefinedStatusPanels = ((_a = gridOptions.statusBar) === null || _a === void 0 ? void 0 : _a.statusPanels) || [];
+        }
+    }
+    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);
             gridOptions.statusBar = {
-                statusPanels: [...statusPanels, ...userDefinedStatusPanels],
+                statusPanels: statusPanels,
             };
         }
     }

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

@@ -77,4 +77,19 @@ 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,24 +6,26 @@
 export class PaginationStatusBarComponent {
     init(params) {
         this.api = params.api;
-        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.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.createPaginationPanel();
         // Initial update
         this.updateDisplay();
         // Listen to pagination changes
-        this.paginationChangedHandler = this.updateDisplay.bind(this);
+        this.paginationChangedHandler = () => {
+            this.updateDisplay();
+        };
         this.api.addEventListener('paginationChanged', this.paginationChangedHandler);
     }
     getGui() {
-        return this.eGui;
+        return this.element;
     }
     createPaginationPanel() {
         // Create the main pagination panel
@@ -96,7 +98,7 @@ export class PaginationStatusBarComponent {
         this.paginationPanel.appendChild(this.nextPageButton);
         this.paginationPanel.appendChild(this.lastPageButton);
         // Add to main container
-        this.eGui.appendChild(this.paginationPanel);
+        this.element.appendChild(this.paginationPanel);
         // Add event listeners with keyboard support
         this.addPaginationEventListeners();
     }
@@ -202,5 +204,7 @@ export class PaginationStatusBarComponent {
         if (this.api && this.paginationChangedHandler) {
             this.api.removeEventListener('paginationChanged', this.paginationChangedHandler);
         }
+        this.api = null;
+        this.paginationChangedHandler = null;
     }
 }