@genesislcap/grid-pro 14.275.3 → 14.276.0

package/dist/esm/grid-pro-genesis-datasource/grid-pro-genesis-datasource.js

@@ -7,6 +7,7 @@ import { BehaviorSubject, EMPTY } from 'rxjs';
 import { catchError, debounceTime, skip, tap } from 'rxjs/operators';
 import { criteriaDelimiter, GridProBaseDatasource } from '../datasource/base.datasource';
 import { getClientSideFilterParamsByFieldType } from '../datasource/client-side.grid-definitions';
+import { GridProStatusBarTypes } from '../grid-pro.types';
 import { logger } from '../utils/logger';
 import { gridProGenesisDatasourceEventNames } from './grid-pro-genesis-datasource.config';
 const withoutFullInit = null;
@@ -21,10 +22,13 @@ let GridProGenesisDatasource = class GridProGenesisDatasource extends LifecycleM
         super(...arguments);
         this.applyFuncName = 'applyTransaction';
         this.applyAsyncFuncName = 'applyTransactionAsync';
+        // Cache for rowData array to avoid repeated Array.from() calls
+        this.cachedRowArray = [];
         this.restartOnReconnection = true;
         this.keepColDefsOnClearRowData = false;
         this.requiresFullRowDataAndColDefs = true;
         this._lastMoreRows = false;
+        this._isMoreRowsResult = false;
     }
     // DatasourceOptions
     criteriaChanged(oldCriteria, newCriteria) {
@@ -146,24 +150,8 @@ let GridProGenesisDatasource = class GridProGenesisDatasource extends LifecycleM
      * @public
      */
     destroy() {
-        this.reset();
-    }
-    /**
-     * Deinitialises the datasource, resetting it to its initial state.
-     * @deprecated Use `destroy` instead
-     * @public
-     */
-    deinit() {
-        this.reset();
-    }
-    /**
-     * Resets the datasource to its initial state.
-     * @public
-     * @deprecated Use `destroy` instead
-     */
-    reset() {
         var _a;
-        logger.debug('GridProGenesisDatasource.reset()', this.resourceName);
+        logger.debug('GridProGenesisDatasource.destroy()', this.resourceName);
         if (this.dataSub) {
             this.dataSub.unsubscribe();
             this.dataSub = undefined;
@@ -177,6 +165,9 @@ let GridProGenesisDatasource = class GridProGenesisDatasource extends LifecycleM
             this.connectionSub = undefined;
         }
         this.clearRowData();
+        this._lastMoreRows = false;
+        this._isMoreRowsResult = false;
+        this.agGrid.clearLocalGridOptions();
         this.requiresFullRowDataAndColDefs = true;
         this.dataSubWasLoggedOff = false;
         this.criteriaFromFilters = new Map();
@@ -187,24 +178,45 @@ let GridProGenesisDatasource = class GridProGenesisDatasource extends LifecycleM
         this.datasource.destroy();
     }
     /**
-     * Restarts the datasource, uses `deinit` and `init` in sequence.
+     * Deinitialises the datasource, resetting it to its initial state.
+     * @deprecated Use `destroy` instead
      * @public
      */
-    restart() {
-        let columnDefinitions;
-        let columnStates;
-        if (this.keepColDefsOnClearRowData) {
-            columnDefinitions = this.agGrid.gridApi.getColumnDefs();
-            columnStates = this.agGrid.columnApi.getColumnState();
-        }
+    deinit() {
+        logger.debug('GridProGenesisDatasource.deinit()', this.resourceName);
+        this.destroy();
+    }
+    /**
+     * Resets the datasource to its initial state.
+     * @public
+     * @deprecated Use `destroy` instead
+     */
+    reset() {
+        logger.debug('GridProGenesisDatasource.reset()', this.resourceName);
         this.destroy();
-        this.init(columnDefinitions, columnStates);
+    }
+    /**
+     * Restarts the datasource, uses `destroy` and `init` in sequence.
+     * @public
+     */
+    restart() {
+        return __awaiter(this, void 0, void 0, function* () {
+            let columnDefinitions;
+            let columnStates;
+            if (this.keepColDefsOnClearRowData) {
+                columnDefinitions = this.agGrid.gridApi.getColumnDefs();
+                columnStates = this.agGrid.columnApi.getColumnState();
+            }
+            this.destroy();
+            yield this.init(columnDefinitions, columnStates);
+        });
     }
     /**
      * Force the grid to redispatch the current rows
      */
     refreshRows() {
-        this.setRowData(Array.from(this.rowData.values()));
+        this.updateCachedRowArray(); // Ensure the cache is up-to-date
+        this.setRowData(this.cachedRowArray);
     }
     /**
      * Clears the rowData and columnDefs for the grid.
@@ -218,6 +230,7 @@ let GridProGenesisDatasource = class GridProGenesisDatasource extends LifecycleM
             (_b = (_a = this.agGrid) === null || _a === void 0 ? void 0 : _a.gridApi) === null || _b === void 0 ? void 0 : _b.flushAsyncTransactions();
         }
         this.rowData = new Map();
+        this.cachedRowArray = []; // Clear the cached array
         this.agTransaction = undefined;
         if (withColumnDefs && !this.keepColDefsOnClearRowData) {
             (_d = (_c = this.agGrid) === null || _c === void 0 ? void 0 : _c.gridApi) === null || _d === void 0 ? void 0 : _d.setColumnDefs([]);
@@ -253,16 +266,27 @@ let GridProGenesisDatasource = class GridProGenesisDatasource extends LifecycleM
             }
             const data = this.rowDataMapper ? this.rowDataMapper(rowData) : rowData;
             this.agGrid.restoreCachedFilterConfig();
+            // Use transactions for adding data
             this.agTransaction = { add: data ? [...data] : [], remove: [], update: [], addIndex: 0 };
             this.applyAllAgTransactions();
+            // Update the cached row array
+            this.updateCachedRowArray();
             this.requiresFullRowDataAndColDefs = false;
         });
     }
+    /**
+     * Updates the cached row array from the rowData Map
+     * @internal
+     */
+    updateCachedRowArray() {
+        this.cachedRowArray = Array.from(this.rowData.values());
+    }
     /**
      * Resets the grid data while keeping columnDefs and sends a DATA_LOGOFF message if it's a stream.
-     * Proxies to {@link @genesislcap/grid-pro#GridProGenesisDatasource.loadResourceData} but without the full init (no metadata fetch).
+     * Loads resource data without full initialization (no metadata fetch).
      * @remarks This is used when the grid is already initialized and we want to reload the data due to a criteria/filter change.
-     * @internal
+     * @see loadResourceData
+     * @public
      */
     reloadResourceData() {
         var _a, _b;
@@ -284,6 +308,7 @@ let GridProGenesisDatasource = class GridProGenesisDatasource extends LifecycleM
      * Handles both snapshot and stream data (for both REQUEST_SERVER and DATASERVER resource types).
      *
      * @param withFullInit - if true, will call datasource.init() with requiresMetadataFetch = true, fetching fresh metadata
+     * @see reloadResourceData
      * @internal
      */
     loadResourceData(withFullInit = true) {
@@ -314,6 +339,10 @@ let GridProGenesisDatasource = class GridProGenesisDatasource extends LifecycleM
                     return EMPTY;
                 }))
                     .subscribe((result) => {
+                    this._sourceRef = result.SOURCE_REF;
+                    const hasMoreRowsInResult = 'MORE_ROWS' in result;
+                    const hasRowsCountInResult = 'ROWS_COUNT' in result;
+                    this._isMoreRowsResult = hasMoreRowsInResult && !hasRowsCountInResult;
                     if (result === null || result === void 0 ? void 0 : result.ERROR) {
                         this.handleErrors(result.ERROR);
                     }
@@ -324,10 +353,13 @@ let GridProGenesisDatasource = class GridProGenesisDatasource extends LifecycleM
                         return;
                     }
                     this.dataSubWasLoggedOff = false;
+                    if (hasMoreRowsInResult) {
+                        this.updateLoadMoreStatus(result.MORE_ROWS, result.SOURCE_REF);
+                    }
                     if (result.ROW) {
                         const nextMessage = dataServerResultFilter(result);
                         this.handleStreamResult(nextMessage);
-                        if (result.MORE_ROWS !== this._lastMoreRows) {
+                        if (hasMoreRowsInResult && result.MORE_ROWS !== this._lastMoreRows) {
                             const moreRowsDetail = {
                                 moreRows: result.MORE_ROWS,
                                 sourceRef: result.SOURCE_REF,
@@ -396,6 +428,27 @@ let GridProGenesisDatasource = class GridProGenesisDatasource extends LifecycleM
             this.applyDataserverData(result);
         }
     }
+    /**
+     * Updates the status bar based on more rows status
+     * @param moreRows - Whether more rows are available
+     * @param sourceRef - The source reference
+     * @param rowsCount - The total number of rows
+     * @remarks
+     * This method requires AG Grid Enterprise module to work properly.
+     * It will silently fail if the Enterprise module is not available.
+     */
+    updateLoadMoreStatus(moreRows, sourceRef) {
+        var _a, _b, _c;
+        if (!((_a = this.agGrid) === null || _a === void 0 ? void 0 : _a.gridApi))
+            return;
+        const statusBar = this.agGrid.gridApi.getStatusPanel(GridProStatusBarTypes.loadMore);
+        if (statusBar) {
+            (_c = (_b = statusBar).updateParams) === null || _c === void 0 ? void 0 : _c.call(_b, {
+                moreRows,
+                sourceRef,
+            });
+        }
+    }
     applyRequestServerData(requestServerResult) {
         var _a;
         const previousSize = this.rowData.size;
@@ -423,13 +476,17 @@ let GridProGenesisDatasource = class GridProGenesisDatasource extends LifecycleM
                 this.destroy();
                 return;
             }
-            const rowData = this.rowData.size > 0 ? Array.from(this.rowData.values()) : requestServerData;
+            // Update cache and use it if available
+            this.updateCachedRowArray();
+            const rowData = this.rowData.size > 0 ? this.cachedRowArray : requestServerData;
             this.handleSizeChanged(previousSize, this.rowData.size);
             this.setRowData(rowData);
             return;
         }
         const rowsToUpdate = [];
-        const rowsToDelete = Array.from(this.rowData.values()).filter((row) => {
+        // Update cache before using it
+        this.updateCachedRowArray();
+        const rowsToDelete = this.cachedRowArray.filter((row) => {
             const match = requestServerData.find((data) => data[this.rowId] === row[this.rowId]);
             if (match) {
                 rowsToUpdate.push(match);
@@ -452,8 +509,9 @@ let GridProGenesisDatasource = class GridProGenesisDatasource extends LifecycleM
             (_a = dataServerResult.inserts) === null || _a === void 0 ? void 0 : _a.forEach((insertData) => {
                 this.rowData.set(insertData[this.rowId], insertData);
             });
-            const rowData = Array.from(this.rowData.values());
-            this.setRowData(rowData);
+            // Update and use the cached array
+            this.updateCachedRowArray();
+            this.setRowData(this.cachedRowArray);
             this.handleSizeChanged(previousSize, this.rowData.size);
             return;
         }
@@ -494,6 +552,25 @@ let GridProGenesisDatasource = class GridProGenesisDatasource extends LifecycleM
             oldValue: oldSize,
         });
     }
+    handleStreamInserts(inserts = []) {
+        super.handleStreamInserts(inserts, this._isMoreRowsResult ? this.cachedRowArray.length : 0);
+        this.updateCachedRowArray();
+    }
+    handleStreamUpdates(updates = []) {
+        super.handleStreamUpdates(updates);
+        this.updateCachedRowArray();
+    }
+    /**
+     * Handles stream deletes by removing records from the grid.
+     * @param deletes - List of records to remove from the grid stream
+     */
+    handleStreamDeletes(deletes = []) {
+        super.handleStreamDeletes(deletes);
+        this.updateCachedRowArray();
+    }
+    loadMore() {
+        this.connect.getMoreRows(this._sourceRef);
+    }
 };
 __decorate([
     attr({ mode: 'boolean', attribute: 'restart-on-reconnection' })

package/dist/esm/grid-pro.js

@@ -2,6 +2,7 @@ import { __awaiter, __decorate, __rest } from "tslib";
 import { ClientSideRowModelModule } from '@ag-grid-community/client-side-row-model';
 import { ComponentUtil, Events, Grid, ModuleRegistry } from '@ag-grid-community/core';
 import { CsvExportModule } from '@ag-grid-community/csv-export';
+import { DatasourceDefaults } from '@genesislcap/foundation-comms';
 import { insertDocumentCSSRule, LifecycleMixin, respondToVisibility, } from '@genesislcap/foundation-utils';
 import { attr, DOM, observable } from '@microsoft/fast-element';
 import { FoundationElement } from '@microsoft/fast-foundation';
@@ -18,8 +19,9 @@ import { GridProGenesisDatasource, gridProGenesisDatasourceEventNames, } from '.
 import { DEBOUNCED_RESIZE_TIME, gridProEventNames, gridProErrorNames, } from './grid-pro.definitions';
 import { foundationGridProStyles as styles } from './grid-pro.styles';
 import { gridProTemplate as template } from './grid-pro.template';
-import { AgGridTheme, agThemeFontsId, agThemeTokenMapClassname, ERROR_COLUMN_FIELD, EDITED_COLUMN_FIELD, GridOptionsConfig, GridProRendererTypes, GRID_READY_EVENT, } from './grid-pro.types';
+import { AgGridTheme, agThemeFontsId, agThemeTokenMapClassname, ERROR_COLUMN_FIELD, EDITED_COLUMN_FIELD, GridOptionsConfig, GridProRendererTypes, GRID_READY_EVENT, GridProStatusBarTypes, DEFAULT_STATUS_BAR_CONFIG, } from './grid-pro.types';
 import { StatePersistence } from './state-persistence';
+import { LabelValueStatusBarComponent, LoadMoreStatusBarComponent, PaginationStatusBarComponent, ReloadStatusBarComponent, } from './status-bar-components';
 import { ErrorTooltip } from './tooltips';
 import { convertToKebabCase, logger, mergeAndDedupColDefWithColumnState } from './utils';
 GridProGenesisDatasource;
@@ -122,6 +124,41 @@ export class GridPro extends LifecycleMixin(FoundationElement) {
         this.gridFontFace = defaultAgGridFontFace;
         this.columnComponentName = 'grid-pro-column';
         this.theme = AgGridTheme.alpine;
+        /**
+         * Enable pagination for the grid.
+         * @remarks
+         * When enabled, the grid will automatically configure pagination settings.
+         * Note that AG Grid's full pagination functionality requires the Enterprise module.
+         * While basic pagination will work in Community edition, advanced features like
+         * custom pagination components require Enterprise.
+         * @see https://www.ag-grid.com/javascript-data-grid/row-pagination/
+         * @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
+         * This requires AG Grid Enterprise module to be enabled.
+         * The status bar will only be displayed if the Enterprise module is available.
+         * @see https://www.ag-grid.com/javascript-data-grid/component-status-bar/
+         */
+        this.statusBarConfig = DEFAULT_STATUS_BAR_CONFIG;
+        /**
+         * Enables or disables the grid status bar.
+         * @remarks
+         * Default is false.
+         * When disabled, no status bar will be displayed regardless of statusBarConfig.
+         * This requires AG Grid Enterprise module to be available for the status bar to be displayed when enabled.
+         */
+        this.withStatusBar = false;
         this.rehydrationAttempted = false;
         this.rootEventsListeners = [];
         this.gridEventsQueue = [];
@@ -220,6 +257,10 @@ export class GridPro extends LifecycleMixin(FoundationElement) {
             [GridProRendererTypes.multiselectEditor]: MultiselectEditor,
             [GridProRendererTypes.dateEditor]: DateEditor,
             [GridProRendererTypes.stringEditor]: StringEditor,
+            [GridProStatusBarTypes.labelValue]: LabelValueStatusBarComponent,
+            [GridProStatusBarTypes.loadMore]: LoadMoreStatusBarComponent,
+            [GridProStatusBarTypes.pagination]: PaginationStatusBarComponent,
+            [GridProStatusBarTypes.reload]: ReloadStatusBarComponent,
         };
         return Object.assign(Object.assign(Object.assign({}, defaultFoundationAgComponents), gridOptionsComponents), this.gridComponents);
     }
@@ -332,7 +373,7 @@ export class GridPro extends LifecycleMixin(FoundationElement) {
     }
     /**
      * Get the datasource element.
-     * @remarks This will return the first datasource element found in the light DOM. Can be either `grid-pro-genesis-datasource`, `grid-pro-client-side-datasource`, or `grid-pro-server-side-datasource`.
+     * @remarks This will return the first datasource element found in the light DOM, wrapping all concrete datasource implementations.
      * @public
      */
     get gridProDatasource() {
@@ -388,12 +429,14 @@ export class GridPro extends LifecycleMixin(FoundationElement) {
         if (this.gridProDatasource) {
             derivedOptions.columnDefs = columnDefs;
             derivedOptions.getRowId = getRowId;
+            this.setupPaginationAndStatusBar(derivedOptions);
             this.setLocalGridOptions(derivedOptions);
         }
         else {
             this.mergeAllColumnDefsAndStates(columnDefs).then((value) => {
                 derivedOptions.columnDefs = value;
                 derivedOptions.getRowId = getRowId;
+                this.setupPaginationAndStatusBar(derivedOptions);
                 this.setLocalGridOptions(derivedOptions);
                 this.initGrid();
             });
@@ -402,6 +445,13 @@ export class GridPro extends LifecycleMixin(FoundationElement) {
     setLocalGridOptions(derivedOptions) {
         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;
+    }
     initGrid() {
         DOM.queueUpdate(() => {
             if (this.initialised) {
@@ -504,6 +554,58 @@ export class GridPro extends LifecycleMixin(FoundationElement) {
             return colDefsToReturn;
         });
     }
+    setupPaginationAndStatusBar(gridOptions) {
+        // 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;
+        }
+        // Set default status bar with components based on configuration
+        if (!gridOptions.statusBar && 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: gridOptions.rowModelType === 'serverSide'
+                        ? 'agTotalRowCountComponent'
+                        : 'agTotalAndFilteredRowCountComponent',
+                    align: 'left',
+                });
+            }
+            // Add max rows component if explicitly enabled
+            if (this.statusBarConfig && this.statusBarConfig.maxRows === true) {
+                statusPanels.push({
+                    statusPanel: GridProStatusBarTypes.labelValue,
+                    statusPanelParams: {
+                        label: 'Max Rows',
+                        value: this.gridProDatasource.maxRows || DatasourceDefaults.MAX_ROWS_250,
+                        hide: false,
+                    },
+                    align: 'left',
+                });
+            }
+            // 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',
+                });
+            }
+            gridOptions.statusBar = {
+                statusPanels,
+            };
+        }
+    }
     get observedAttributes() {
         // allow properties to be supplied either lowercased or kebab-cased
         // this allows the user to either supply (for example) enableSorting or enabled-sorting
@@ -641,6 +743,18 @@ __decorate([
 __decorate([
     observable
 ], GridPro.prototype, "gridComponents", void 0);
+__decorate([
+    attr({ mode: 'boolean' })
+], GridPro.prototype, "pagination", void 0);
+__decorate([
+    attr({ attribute: 'pagination-page-size' })
+], GridPro.prototype, "paginationPageSize", void 0);
+__decorate([
+    observable
+], GridPro.prototype, "statusBarConfig", void 0);
+__decorate([
+    attr({ mode: 'boolean', attribute: 'with-status-bar' })
+], GridPro.prototype, "withStatusBar", void 0);
 __decorate([
     GridOptionsConfig
 ], GridPro.prototype, "gridOptionsConfig", void 0);

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

@@ -12,6 +12,7 @@ export const foundationGridProStyles = css `
     --datasource-error-background-opacity: 0.5;
     --datasource-error-dialog-max-width: 50%;
     --datasource-error-dialog-min-width: auto;
+    --ag-status-bar-height: 32.5px;
 
     position: relative;
     width: 100%;
@@ -67,4 +68,13 @@ export const foundationGridProStyles = css `
   .error {
     border-color: var(--error-color) !important;
   }
+
+  .ag-status-bar {
+    height: var(--ag-status-bar-height);
+  }
+
+  .ag-status-name-value {
+    padding-top: var(--ag-grid-size);
+    padding-bottom: var(--ag-grid-size);
+  }
 `;

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

@@ -135,6 +135,21 @@ export var GridProRendererTypes;
     GridProRendererTypes["stringEditor"] = "stringEditor";
     GridProRendererTypes["multiselectEditor"] = "multiselectEditor";
 })(GridProRendererTypes || (GridProRendererTypes = {}));
+/**
+ * The available Grid Pro Status Bar Types
+ * @public
+ * @remarks
+ * These status bar components require AG Grid Enterprise module to be enabled.
+ * Status bar components will only be displayed if the Enterprise module is available.
+ * @see https://www.ag-grid.com/javascript-data-grid/component-status-bar/
+ */
+export var GridProStatusBarTypes;
+(function (GridProStatusBarTypes) {
+    GridProStatusBarTypes["labelValue"] = "labelValue";
+    GridProStatusBarTypes["pagination"] = "pagination";
+    GridProStatusBarTypes["loadMore"] = "loadMore";
+    GridProStatusBarTypes["reload"] = "reload";
+})(GridProStatusBarTypes || (GridProStatusBarTypes = {}));
 /**
  * Event fired when grid is ready
  * @public
@@ -180,3 +195,16 @@ export var GridProCaseType;
     GridProCaseType["sentenceCase"] = "sentenceCase";
     GridProCaseType["snakeCase"] = "snakeCase";
 })(GridProCaseType || (GridProCaseType = {}));
+/**
+ * Default status bar configuration
+ * @public
+ */
+export const DEFAULT_STATUS_BAR_CONFIG = {
+    rows: true,
+    loadMore: {
+        tooltip: 'Load more rows from server',
+    },
+    reload: {
+        tooltip: 'Reload the datasource.',
+    },
+};

package/dist/esm/index.js

@@ -12,6 +12,7 @@ export * from './grid-pro.types';
 export * from './grid-pro';
 export * from './grid-pro-genesis-datasource';
 export * from './state-persistence';
+export * from './status-bar-components';
 export * from './style';
 export * from './tooltips';
 export * from './utils';

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

@@ -0,0 +1,4 @@
+export * from './load-more.status-bar';
+export * from './pagination.status-bar';
+export * from './label-value.status-bar';
+export * from './reload.status-bar';

package/dist/esm/status-bar-components/label-value.status-bar.js

@@ -0,0 +1,33 @@
+/**
+ * Label Value Status Bar Component
+ * @public
+ */
+export class LabelValueStatusBarComponent {
+    init(params) {
+        this.element = document.createElement('div');
+        this.element.classList.add('ag-status-name-value', 'ag-status-panel');
+        this.element.setAttribute('data-test-id', 'grid-label-value-panel');
+        this.element.setAttribute('role', 'status');
+        const statusBarParams = params;
+        if (statusBarParams.hide) {
+            this.element.style.display = 'none';
+        }
+        // Set accessible label for the entire component
+        this.element.setAttribute('aria-label', `${statusBarParams.label}: ${statusBarParams.value}`);
+        const label = document.createElement('span');
+        label.setAttribute('data-test-id', 'grid-label-value-label');
+        label.setAttribute('aria-hidden', 'true'); // Hide from screen readers since parent has full aria-label
+        label.innerHTML = `${statusBarParams.label}:  `;
+        const value = document.createElement('span');
+        value.classList.add('ag-status-name-value-value');
+        value.setAttribute('data-test-id', 'grid-label-value-value');
+        value.setAttribute('aria-hidden', 'true'); // Hide from screen readers since parent has full aria-label
+        value.innerHTML = statusBarParams.value;
+        this.element.appendChild(label);
+        this.element.appendChild(value);
+    }
+    getGui() {
+        return this.element;
+    }
+    destroy() { }
+}