@genesislcap/grid-pro 14.348.0 → 14.350.0

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

@@ -0,0 +1,1034 @@
+import { __awaiter, __decorate, __rest } from "tslib";
+import { DatasourceDefaults } from '@genesislcap/foundation-comms';
+import { LifecycleMixin, respondToVisibility } from '@genesislcap/foundation-utils';
+import { baseLayerLuminance, StandardLuminance } from '@microsoft/fast-components';
+import { attr, DOM, observable } from '@microsoft/fast-element';
+import { FoundationElement } from '@microsoft/fast-foundation';
+import { ModuleRegistry, createGrid, CsvExportModule, ClientSideRowModelModule, ClientSideRowModelApiModule, EventApiModule, TextFilterModule, CellStyleModule, ColumnApiModule, DateFilterModule, HighlightChangesModule, NumberFilterModule, PaginationModule, RowStyleModule, RowApiModule, TooltipModule, ColumnAutoSizeModule, RenderApiModule, } from 'ag-grid-community';
+import * as changeCase from 'change-case';
+import debounce from 'lodash.debounce';
+import { GridProCell } from './cell';
+import { DateEditor, MultiselectEditor, NumberEditor, SelectEditor, StringEditor, } from './cell-editors';
+import { ActionRenderer, ActionsMenuRenderer, BooleanRenderer, EditableRenderer, StatusPillRenderer, SelectRenderer, } from './cell-renderers';
+import { GridProColumn } from './column';
+import { GridProClientSideDatasource, GridProServerSideDatasource } from './datasource';
+import { baseDatasourceEventNames } from './datasource/base.types';
+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 { DEFAULT_STATUS_BAR_CONFIG, EDITED_COLUMN_FIELD, ERROR_COLUMN_FIELD, GRID_READY_EVENT, GridOptionsConfig, GridProRendererTypes, GridProStatusBarTypes, } from './grid-pro.types';
+import { StatePersistence } from './state-persistence';
+import { LabelValueStatusBarComponent, LoadMoreStatusBarComponent, PaginationStatusBarComponent, ReloadStatusBarComponent, } from './status-bar-components';
+import { ErrorTooltip } from './tooltips';
+import { logger, mergeAndDedupColDefWithColumnState } from './utils';
+GridProGenesisDatasource;
+GridProClientSideDatasource;
+GridProServerSideDatasource;
+GridProCell;
+GridProColumn;
+ModuleRegistry.registerModules([
+    CsvExportModule,
+    ClientSideRowModelModule,
+    PaginationModule,
+    RowStyleModule,
+    ClientSideRowModelApiModule,
+    EventApiModule,
+    TextFilterModule,
+    HighlightChangesModule,
+    ColumnApiModule,
+    NumberFilterModule,
+    CellStyleModule,
+    DateFilterModule,
+    RowApiModule,
+    TooltipModule,
+    ColumnAutoSizeModule,
+    RenderApiModule,
+    // ValidationModule,
+]);
+const DEBOUNCE_TIME = 400;
+// Events constants for v34 compatibility
+const Events = {
+    EVENT_GRID_READY: 'gridReady',
+};
+/**
+ * The Grid Pro element (AG Grid v34 compatible).
+ * @remarks Grid Pro is a Web Component wrapper around the AG Grid Community library.
+ * @beta
+ * @tagname %%prefix%%-grid-pro
+ */
+export class GridProV34 extends LifecycleMixin(FoundationElement) {
+    rowDataChanged(_, rowData) {
+        if (this.initialised) {
+            this.gridApi.setGridOption('rowData', rowData);
+        }
+    }
+    getfilterModel() {
+        return __awaiter(this, void 0, void 0, function* () {
+            if (!this.persistFilterModelKey) {
+                return this._filterConfig;
+            }
+            const filterModel = yield this.statePersistence.getFilterModel(this.persistFilterModelKey);
+            return filterModel;
+        });
+    }
+    setFilterModel(value) {
+        return __awaiter(this, void 0, void 0, function* () {
+            if (!this.persistFilterModelKey) {
+                this._filterConfig = value;
+                return;
+            }
+            yield this.statePersistence.saveFilterModel(this.persistFilterModelKey, value);
+        });
+    }
+    constructor() {
+        super();
+        this.gridErrorItems = [];
+        // Genesis-specific attrs
+        this.autoCellRendererByType = false;
+        this.onlyTemplateColDefs = false;
+        /**
+         * Boolean attribute to control whether the grid autosizes the columns upon interaction.
+         * This will disable the column widths from being manually set, and doesn't save the widths
+         * in local storage if you are using `persist-column-state-key`.
+         */
+        this.gridAutosizingEnabled = false;
+        /**
+         * If false, will disable cell flashing for all cells by default, unless otherwise defined in custom colDef
+         * @remarks Defaults to true
+         */
+        this.enableCellFlashing = false;
+        /**
+         * If true, will enable row flashing for all rows for `add` async transactions
+         */
+        this.enableRowFlashing = false;
+        this.columnComponentName = 'grid-pro-column';
+        this.themeMode = 'dark';
+        /**
+         * 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;
+        /**
+         * 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 = [];
+        this.registeredGridEvents = new Set();
+        this._filterConfig = undefined;
+        const hideDataSourceError = this.hideDatasourceError.bind(this);
+        this.rootEventsListeners.push({ key: gridProGenesisDatasourceEventNames.dataInit, action: hideDataSourceError }, { key: gridProEventNames.datasourceErrorClose, action: hideDataSourceError }, 
+        // Base datasource error handling for resource validation and initialization errors
+        {
+            key: baseDatasourceEventNames.error,
+            action: this.handleBaseDatasourceError.bind(this),
+        }, {
+            key: baseDatasourceEventNames.connected,
+            action: hideDataSourceError,
+        });
+    }
+    /**
+     * Adds an event listener to the grid element.
+     * @param eventType - The event type to listen for. Recommened to use the `Events` from AG Grid.
+     * @param listener - The event listener to call when the event is fired.
+     * @param options - An options object that specifies characteristics about the event listener.
+     * @privateRemarks
+     * This will change once we do the AG Upgrade and `eventType` will be correctly typed.
+     */
+    addEventListener(eventType, listener, options) {
+        super.addEventListener(eventType, listener, options);
+        if (this.gridApi) {
+            this.addGridEventListener(eventType);
+        }
+        else {
+            if (!this.gridEventsQueue.includes(eventType)) {
+                this.gridEventsQueue.push(eventType);
+            }
+        }
+    }
+    addGridEventListener(eventType) {
+        if (this.registeredGridEvents.has(eventType)) {
+            return;
+        }
+        this.registeredGridEvents.add(eventType);
+        this.gridApi.addEventListener(eventType, (e) => {
+            this.$emit(eventType, e);
+        });
+    }
+    handleError(type, event) {
+        this.gridErrorItems = [...this.gridErrorItems, { detail: event.detail, type }];
+    }
+    handleBaseDatasourceError(event) {
+        // Map base datasource errors to grid-pro error format
+        const gridProError = {
+            detail: { message: event.detail.message },
+            type: gridProErrorNames.datasource,
+        };
+        this.gridErrorItems = [
+            ...this.gridErrorItems,
+            { detail: gridProError.detail, type: gridProError.type },
+        ];
+    }
+    hideDatasourceError() {
+        this.gridErrorItems = this.gridErrorItems.filter((item) => item.type !== gridProErrorNames.datasource);
+        this.removeAttribute('ds-disconnected');
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        baseLayerLuminance.subscribe({
+            handleChange: (record) => {
+                const luminance = baseLayerLuminance.getValueFor(record.target);
+                this.themeMode = luminance === StandardLuminance.DarkMode ? 'dark' : 'light';
+            },
+        }, this.provider);
+        if (this.gridAutosizingEnabled) {
+            respondToVisibility(this, (gridVisible) => {
+                if (gridVisible) {
+                    this.debouncedColumnAutosize.bind(this)();
+                }
+            });
+        }
+        this.rehydrationAttempted = false;
+        if (!this.shouldRunConnect)
+            return;
+        this.rootEventsListeners.forEach(({ key, action }) => {
+            this.addEventListener(key, action);
+        });
+        // Add datasource event listeners
+        this.toggleDatasourceEventListeners(true);
+        this.paginationPageSize = this.isServerSide
+            ? this.gridProDatasource.maxRows
+            : DatasourceDefaults.DEFAULT_PAGINATION_PAGE_SIZE;
+    }
+    disconnectedCallback() {
+        super.disconnectedCallback();
+        this.rehydrationAttempted = false;
+        const shouldRunDisconnect = this.shouldRunDisconnect;
+        this.rootEventsListeners.forEach(({ key, action }) => {
+            this.removeEventListener(key, action);
+        });
+        // Remove datasource event listeners
+        this.toggleDatasourceEventListeners(false);
+        DOM.queueUpdate(() => {
+            var _a;
+            if (!shouldRunDisconnect)
+                return;
+            this.initialised = false;
+            (_a = this.gridApi) === null || _a === void 0 ? void 0 : _a.destroy();
+            // Clear registered events when grid is destroyed
+            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;
+        if (keepColDefsOnClearRowData) {
+            this.columnState = this.gridApi.getColumnState();
+        }
+        // Set the grid options and initialize the grid
+        this.gridOptions = Object.assign(Object.assign(Object.assign({}, this.agGridOptions), options), (keepColDefsOnClearRowData ? { columnDefs: this.gridApi.getColumnDefs() } : {}));
+        this.initGrid();
+    }
+    /**
+     * Handles data loading from datasource
+     * @internal
+     */
+    handleDataLoaded(event) {
+        const { data } = event.detail;
+        if (this.gridApi) {
+            this.gridApi.setGridOption('rowData', data);
+        }
+    }
+    /**
+     * Handles data changes from datasource
+     * @internal
+     */
+    handleDataChanged(event) {
+        const { changes } = event.detail;
+        if (!this.gridApi)
+            return;
+        const result = this.gridApi.applyTransaction(changes);
+        this.flashAddedCells(result === null || result === void 0 ? void 0 : result.add);
+    }
+    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.setGridOption('columnDefs', mergedColumnDefs);
+            }
+        });
+    }
+    /**
+     * Handles data clearing from datasource
+     * @internal
+     */
+    handleDataCleared(event) {
+        const { includeSchema } = event.detail;
+        if (!this.gridApi)
+            return;
+        if (includeSchema) {
+            this.gridApi.setGridOption('columnDefs', []);
+        }
+        this.gridApi.setGridOption('rowData', []);
+        this.gridApi.refreshCells({ force: true });
+    }
+    /**
+     * Handles loading started from datasource
+     * @internal
+     */
+    handleLoadingStarted() {
+        if (this.gridApi) {
+            this.gridApi.setGridOption('loading', true);
+        }
+    }
+    /**
+     * 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.setGridOption('loading', false);
+            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() {
+        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.setGridOption('serverSideDatasource', 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;
+        const result = this.gridApi.applyServerSideTransaction(transaction);
+    }
+    combineAllGridComponents(gridOptionsComponents) {
+        const defaultFoundationAgComponents = {
+            [GridProRendererTypes.action]: ActionRenderer,
+            [GridProRendererTypes.actionsMenu]: ActionsMenuRenderer,
+            [GridProRendererTypes.boolean]: BooleanRenderer,
+            [GridProRendererTypes.editable]: EditableRenderer,
+            [GridProRendererTypes.statusPill]: StatusPillRenderer,
+            [GridProRendererTypes.select]: SelectRenderer,
+            [GridProRendererTypes.selectEditor]: SelectEditor,
+            [GridProRendererTypes.numberEditor]: NumberEditor,
+            [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);
+    }
+    statePersistanceEnabled() {
+        if (!this.persistColumnStateKey || this.persistColumnStateKey.length === 0) {
+            return false;
+        }
+        return true;
+    }
+    /**
+     * Gets the currently selected rows from the grid
+     * @public
+     * @returns Array of selected row data
+     */
+    getSelectedRows() {
+        var _a, _b, _c, _d;
+        try {
+            if (!this.initialised || !this.gridApi) {
+                return [];
+            }
+            const rowSelectionMode = (_a = this.gridOptions) === null || _a === void 0 ? void 0 : _a.rowSelection;
+            // If row selection is enabled (single or multiple), use row selection only
+            if (rowSelectionMode === 'single' || rowSelectionMode === 'multiple') {
+                if (this.gridApi.getSelectedRows && this.gridApi.getSelectedRows().length > 0) {
+                    return this.gridApi.getSelectedRows();
+                }
+                return [];
+            }
+            // If row selection is disabled (undefined/none), use cell range selection
+            if (((_b = this.gridApi) === null || _b === void 0 ? void 0 : _b.getCellRanges) && this.gridApi.getCellRanges().length > 0) {
+                return this.getCellRangeRowData();
+            }
+            // Fallback: if no cell ranges but range selection is disabled,
+            // check for focused cell (single cell selection)
+            if (!((_c = this.gridOptions) === null || _c === void 0 ? void 0 : _c.enableRangeSelection)) {
+                const focusedCell = (_d = this.gridApi) === null || _d === void 0 ? void 0 : _d.getFocusedCell();
+                if (focusedCell) {
+                    const rowNode = this.gridApi.getDisplayedRowAtIndex(focusedCell.rowIndex);
+                    if (rowNode === null || rowNode === void 0 ? void 0 : rowNode.data) {
+                        return [rowNode.data];
+                    }
+                }
+            }
+            return [];
+        }
+        catch (error) {
+            logger.error('Grid Pro: Error getting selected rows:', error);
+            return [];
+        }
+    }
+    /**
+     * Gets the row data from selected cell ranges
+     * @internal
+     * @returns Array containing the row data from selected cell ranges, or empty array if none
+     */
+    getCellRangeRowData() {
+        var _a;
+        if (!((_a = this.gridApi) === null || _a === void 0 ? void 0 : _a.getCellRanges)) {
+            return [];
+        }
+        const cellRanges = this.gridApi.getCellRanges();
+        if (cellRanges.length === 0) {
+            return [];
+        }
+        const rowData = [];
+        // Collect unique row data from all selected cell ranges
+        cellRanges.forEach((range) => {
+            const startIndex = range.startRow.rowIndex;
+            const endIndex = range.endRow.rowIndex;
+            // Iterate over indices directly for better performance
+            for (let rowIndex = startIndex; rowIndex <= endIndex; rowIndex += 1) {
+                const rowNode = this.gridApi.getDisplayedRowAtIndex(rowIndex);
+                if ((rowNode === null || rowNode === void 0 ? void 0 : rowNode.data) && !rowData.some((existing) => existing === rowNode.data)) {
+                    rowData.push(rowNode.data);
+                }
+            }
+        });
+        return rowData;
+    }
+    /**
+     * Checks if any rows are currently selected
+     * @public
+     * @returns True if rows are selected, false otherwise
+     */
+    hasSelectedRows() {
+        const selectedRows = this.getSelectedRows();
+        return selectedRows.length > 0;
+    }
+    /**
+     * Because we try and resize the grid to fit using callbacks on events, this will cause
+     * a stack overflow of calls to resize, so we need to debounce it.
+     * @internal
+     */
+    debouncedColumnAutosize() {
+        if (!this.gridAutosizingEnabled)
+            return;
+        if (this.debounced) {
+            clearTimeout(this.debounced);
+            this.debounced = null;
+        }
+        this.debounced = setTimeout(() => {
+            var _a;
+            (_a = this.gridApi) === null || _a === void 0 ? void 0 : _a.sizeColumnsToFit();
+        }, DEBOUNCED_RESIZE_TIME);
+    }
+    /**
+     * If {@link @genesislcap/grid-pro#GridPro.gridAutosizingEnabled} is true, will remove the widths from the column states.
+     * @internal
+     */
+    removeConfigWidthsToAutosize(colState) {
+        return colState.map((col) => (Object.assign(Object.assign({}, col), { width: null })));
+    }
+    saveColumnState() {
+        return __awaiter(this, void 0, void 0, function* () {
+            if (this.rehydrationAttempted && this.statePersistanceEnabled()) {
+                let colState = this.gridApi.getColumnState();
+                colState = this.gridAutosizingEnabled
+                    ? this.removeConfigWidthsToAutosize(colState)
+                    : colState;
+                const allHeadersHidden = colState.filter((c) => {
+                    if (c.hide)
+                        return false;
+                    const col = this.gridApi.getColumn(c.colId);
+                    return Boolean(col.getColDef().headerName);
+                }).length === 0;
+                if (colState.length === 0 ||
+                    JSON.stringify(colState) === JSON.stringify(this.columnState) ||
+                    allHeadersHidden)
+                    return;
+                yield this.statePersistence.saveColumnState(this.persistColumnStateKey, colState);
+                this.columnState = colState;
+            }
+        });
+    }
+    /**
+     * Gets the saved grid ColumnState[] from storage
+     * @remarks This is used to restore the grid state when the grid is rehydrated
+     * @privateRemarks Not using `columnApi.get|setColumnState()` for these flows as it doesn't work setting new columnDefs vs different ordering.
+     * @public
+     */
+    getSavedColumnState() {
+        return __awaiter(this, void 0, void 0, function* () {
+            this.columnState = [];
+            if (this.statePersistanceEnabled()) {
+                this.columnState = (yield this.statePersistence.getColumnState(this.persistColumnStateKey));
+            }
+            return this.columnState;
+        });
+    }
+    restoreColumnState() {
+        return __awaiter(this, void 0, void 0, function* () {
+            var _a;
+            this.rehydrationAttempted = true;
+            const colState = yield this.getSavedColumnState();
+            if (colState && colState.length > 0) {
+                (_a = this.gridApi) === null || _a === void 0 ? void 0 : _a.applyColumnState({
+                    state: colState,
+                    applyOrder: true,
+                });
+            }
+        });
+    }
+    cacheFilterConfig() {
+        var _a;
+        this.setFilterModel(((_a = this.gridApi) === null || _a === void 0 ? void 0 : _a.getFilterModel()) || undefined);
+    }
+    restoreCachedFilterConfig() {
+        return __awaiter(this, void 0, void 0, function* () {
+            var _a, _b;
+            const filterModel = yield this.getfilterModel();
+            if (typeof filterModel !== 'undefined') {
+                (_a = this.gridApi) === null || _a === void 0 ? void 0 : _a.setFilterModel(filterModel);
+                (_b = this.gridApi) === null || _b === void 0 ? void 0 : _b.onFilterChanged();
+            }
+        });
+    }
+    /**
+     * @public
+     */
+    get gridOptions() {
+        return this.agGridOptions;
+    }
+    /**
+     * @public
+     */
+    get isServerSide() {
+        return this.gridProDatasource instanceof GridProServerSideDatasource;
+    }
+    /**
+     * @public
+     */
+    get gridParams() {
+        return {
+            globalListener: this.globalEventListener.bind(this),
+        };
+    }
+    /**
+     * Get the datasource element.
+     * @remarks This will return the first datasource element found in the light DOM, wrapping all concrete datasource implementations.
+     * @public
+     */
+    get gridProDatasource() {
+        return (this.querySelector('grid-pro-genesis-datasource') ||
+            this.querySelector('grid-pro-client-side-datasource') ||
+            this.querySelector('grid-pro-server-side-datasource'));
+    }
+    set gridOptions(options) {
+        const debounceSaveColumnState = debounce(this.saveColumnState.bind(this), DEBOUNCE_TIME);
+        const debouceSaveFiltermodel = debounce(this.cacheFilterConfig.bind(this), DEBOUNCE_TIME);
+        const gridOnChangeCallback = () => {
+            debounceSaveColumnState();
+            this.debouncedColumnAutosize.bind(this)();
+        };
+        const { columnDefs, components, defaultColDef, getRowId, onGridReady, onFilterChanged } = options, rest = __rest(options, ["columnDefs", "components", "defaultColDef", "getRowId", "onGridReady", "onFilterChanged"]);
+        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), headerHeight: this.headerHeight, rowHeight: this.rowHeight, animateRows: false, suppressDragLeaveHidesColumns: true }), this.eventsAndCallbacks), { onGridReady: (event) => {
+                var _a, _b, _c;
+                this.gridApi = event.api;
+                if (this.gridEventsQueue.length) {
+                    this.gridEventsQueue.forEach((type) => {
+                        this.addGridEventListener(type);
+                    });
+                }
+                if (this.rowData) {
+                    this.gridApi.setGridOption('rowData', this.rowData);
+                }
+                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.gridApi.applyColumnState({
+                        state: this.columnState,
+                        applyOrder: true,
+                    });
+                }
+                this.$emit(Events.EVENT_GRID_READY, {
+                    event,
+                    gridId: this.id,
+                });
+                // TODO: Remove this event when we do the AG Upgrade
+                this.$emit(GRID_READY_EVENT, {
+                    event,
+                    gridId: this.id,
+                });
+                // 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)();
+            }, onColumnPinned: gridOnChangeCallback, onColumnResized: gridOnChangeCallback, onColumnMoved: gridOnChangeCallback, onDisplayedColumnsChanged: gridOnChangeCallback, onFilterChanged: (filterChangedEvent) => {
+                debouceSaveFiltermodel();
+                if (onFilterChanged) {
+                    onFilterChanged(filterChangedEvent);
+                }
+            }, onGridSizeChanged: gridOnChangeCallback, onSortChanged: gridOnChangeCallback }), rest);
+        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();
+            });
+        }
+    }
+    setLocalGridOptions(derivedOptions) {
+        // Simplified approach for v34 - directly merge options
+        this.agGridOptions = Object.assign(Object.assign({}, this.agGridOptions), derivedOptions);
+    }
+    /**
+     * 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) {
+                // Needed due gridSlot children cleanup
+                if (this.gridSlot.firstChild) {
+                    // prevent re-instantiating the grid using the same slot content
+                    this.gridSlot.removeChild(this.gridSlot.firstChild);
+                }
+            }
+            this.agGrid = createGrid(this.gridSlot, this.agGridOptions, this.gridParams);
+            this.initialised = true;
+        });
+    }
+    /**
+     * Will merge templated column definitions with `columnDefs` plus localStorage's column state or `deferredColumnStates`.
+     * @public
+     * @remarks This will favor the column state from the browser's local storage over the `deferredColumnStates` property on the `grid-pro-genesis-datasource` element.
+     * @param columnDefs - The column definitions to apply to the grid.
+     * @param deferredColumnDefsOrState - If true, will merge the column definitions with the saved column state or the `deferredColumnStates` property
+     * on the `grid-pro-genesis-datasource` element. Defaults to false but `grid-pro-genesis-datasource` will set this to true.
+     * @returns The merged column definitions.
+     */
+    mergeAllColumnDefsAndStates(columnDefs_1) {
+        return __awaiter(this, arguments, void 0, function* (columnDefs, deferredColumnDefsOrState = false) {
+            var _a;
+            const columnDefinitionsFromMetadata = columnDefs || [];
+            columnDefinitionsFromMetadata.forEach((colDefFromMetadata) => {
+                if (this.headerCaseType && colDefFromMetadata.field && !colDefFromMetadata.headerName) {
+                    const changeCaseByType = changeCase[this.headerCaseType];
+                    if (changeCaseByType) {
+                        colDefFromMetadata.headerName = changeCaseByType(colDefFromMetadata.field);
+                    }
+                    else {
+                        logger.warn(`Invalid header-case-type attribute value: ${this.headerCaseType}. Please use one of the following: camelCase, capitalCase, dotCase, headerCase, noCase, paramCase, pascalCase, pathCase, sentenceCase, snakeCase.`);
+                    }
+                }
+            });
+            const templateColumnDefs = Array.from(this.querySelectorAll(this.columnComponentName))
+                .map((templateColumn) => templateColumn.definition)
+                .map((columnDef) => {
+                // enable cell flashing for each column if unspecified on column level but enabled on grid level
+                if (this.enableCellFlashing && columnDef.enableCellChangeFlash === undefined) {
+                    columnDef.enableCellChangeFlash = true;
+                }
+                if (columnDef.editable) {
+                    if (!columnDef.cellRenderer && !columnDef.cellRendererSelector) {
+                        columnDef.cellRendererSelector = (params) => {
+                            if (params.data[EDITED_COLUMN_FIELD] === columnDef.field) {
+                                return {
+                                    component: GridProRendererTypes.editable,
+                                };
+                            }
+                        };
+                    }
+                    if (!columnDef.tooltipComponent && !columnDef.tooltipValueGetter) {
+                        columnDef.tooltipComponent = ErrorTooltip;
+                        columnDef.tooltipValueGetter = (params) => {
+                            const error = params.data[ERROR_COLUMN_FIELD];
+                            if (error && error.column === columnDef.field) {
+                                return error.message;
+                            }
+                        };
+                    }
+                    if (!columnDef.cellClassRules) {
+                        columnDef.cellClassRules = {
+                            error: (params) => { var _a; return ((_a = params.data[ERROR_COLUMN_FIELD]) === null || _a === void 0 ? void 0 : _a.column) === params.colDef.field; },
+                        };
+                    }
+                }
+                const metadataColumnDef = columnDefinitionsFromMetadata.find((colDef) => columnDef.field === colDef.field);
+                return Object.assign(Object.assign({}, metadataColumnDef), columnDef);
+            });
+            const templateColumnKeys = templateColumnDefs.map((x) => x.field);
+            const colDefsToReturn = [
+                ...templateColumnDefs,
+                ...(this.onlyTemplateColDefs
+                    ? []
+                    : columnDefinitionsFromMetadata.filter((g) => !templateColumnKeys.includes(g.field))),
+            ];
+            if (this.gridProDatasource && deferredColumnDefsOrState) {
+                const savedColumnState = yield this.getSavedColumnState();
+                if ((savedColumnState === null || savedColumnState === void 0 ? void 0 : savedColumnState.length) > 0) {
+                    return mergeAndDedupColDefWithColumnState(colDefsToReturn, savedColumnState);
+                }
+                else if (((_a = this.gridProDatasource.deferredColumnStates) === null || _a === void 0 ? void 0 : _a.length) > 0) {
+                    return mergeAndDedupColDefWithColumnState(colDefsToReturn, this.gridProDatasource.deferredColumnStates);
+                }
+            }
+            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;
+        }
+        if (this.statusBarConfig && this.statusBarConfig.rows === true) {
+            const rowCountStatusPanel = 'agTotalAndFilteredRowCountComponent';
+            if (!this.panelExists(rowCountStatusPanel, statusPanels)) {
+                statusPanels.push({
+                    statusPanel: rowCountStatusPanel,
+                    align: 'left',
+                });
+            }
+        }
+    }
+    addMaxRowsPanel(statusPanels) {
+        if (this.statusBarConfig && this.statusBarConfig.maxRows === true) {
+            if (!this.panelExists(GridProStatusBarTypes.labelValue, statusPanels)) {
+                statusPanels.push({
+                    statusPanel: GridProStatusBarTypes.labelValue,
+                    statusPanelParams: {
+                        label: 'Max Rows',
+                        value: this.gridProDatasource.maxRows || DatasourceDefaults.MAX_ROWS_250,
+                        hide: false,
+                    },
+                    align: 'left',
+                });
+            }
+        }
+    }
+    addAggregationPanel(statusPanels) {
+        if (this.statusBarConfig && this.statusBarConfig.aggregation === true) {
+            if (!this.panelExists('agAggregationComponent', statusPanels)) {
+                statusPanels.push({
+                    statusPanel: 'agAggregationComponent',
+                    align: 'right',
+                });
+            }
+        }
+    }
+    addDatasourcePanels(statusPanels) {
+        if (this.gridProDatasource) {
+            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);
+        }
+    }
+    addPaginationPanel(statusPanels) {
+        if (this['_pagination']) {
+            if (!this.panelExists(GridProStatusBarTypes.pagination, statusPanels)) {
+                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);
+            gridOptions.statusBar = {
+                statusPanels: statusPanels,
+            };
+        }
+    }
+    globalEventListener(eventType, event) {
+        const eventLowerCase = eventType.toLowerCase();
+        const browserEvent = new Event(eventLowerCase);
+        const browserEventNoType = browserEvent;
+        browserEventNoType.agGridDetails = event;
+        // for when defining events via myGrid.addEventListener('columnresized', function (event) {...
+        this.dispatchEvent(browserEvent);
+        // for when defining events via myGrid.oncolumnresized = function (event) {....
+        const callbackMethod = 'on' + eventLowerCase;
+        if (typeof this[callbackMethod] === 'function') {
+            this[callbackMethod](browserEvent);
+        }
+    }
+}
+__decorate([
+    observable
+], GridProV34.prototype, "gridApi", void 0);
+__decorate([
+    observable
+], GridProV34.prototype, "gridErrorItems", void 0);
+__decorate([
+    StatePersistence
+], GridProV34.prototype, "statePersistence", void 0);
+__decorate([
+    attr({ attribute: 'auto-cell-renderer-by-type', mode: 'boolean' })
+], GridProV34.prototype, "autoCellRendererByType", void 0);
+__decorate([
+    attr({ attribute: 'only-template-col-defs', mode: 'boolean' })
+], GridProV34.prototype, "onlyTemplateColDefs", void 0);
+__decorate([
+    attr({ mode: 'boolean', attribute: 'grid-autosizing' })
+], GridProV34.prototype, "gridAutosizingEnabled", void 0);
+__decorate([
+    attr({ mode: 'boolean', attribute: 'enable-cell-flashing' })
+], GridProV34.prototype, "enableCellFlashing", void 0);
+__decorate([
+    attr({ mode: 'boolean', attribute: 'enable-row-flashing' })
+], GridProV34.prototype, "enableRowFlashing", void 0);
+__decorate([
+    attr({ attribute: 'persist-column-state-key' })
+], GridProV34.prototype, "persistColumnStateKey", void 0);
+__decorate([
+    attr({ attribute: 'persist-filter-model-key' })
+], GridProV34.prototype, "persistFilterModelKey", void 0);
+__decorate([
+    attr({ attribute: 'header-case-type' })
+], GridProV34.prototype, "headerCaseType", void 0);
+__decorate([
+    observable
+], GridProV34.prototype, "rowData", void 0);
+__decorate([
+    attr
+], GridProV34.prototype, "columnComponentName", void 0);
+__decorate([
+    observable
+], GridProV34.prototype, "eventsAndCallbacks", void 0);
+__decorate([
+    attr
+], GridProV34.prototype, "headerHeight", void 0);
+__decorate([
+    attr
+], GridProV34.prototype, "rowHeight", void 0);
+__decorate([
+    observable
+], GridProV34.prototype, "classNames", void 0);
+__decorate([
+    observable
+], GridProV34.prototype, "agGrid", void 0);
+__decorate([
+    observable
+], GridProV34.prototype, "gridSlot", void 0);
+__decorate([
+    observable
+], GridProV34.prototype, "themeMode", void 0);
+__decorate([
+    observable
+], GridProV34.prototype, "gridComponents", void 0);
+__decorate([
+    attr({ mode: 'boolean' })
+], GridProV34.prototype, "pagination", void 0);
+__decorate([
+    attr({ attribute: 'pagination-page-size' })
+], GridProV34.prototype, "paginationPageSize", void 0);
+__decorate([
+    observable
+], GridProV34.prototype, "statusBarConfig", void 0);
+__decorate([
+    attr({ mode: 'boolean', attribute: 'with-status-bar' })
+], GridProV34.prototype, "withStatusBar", void 0);
+__decorate([
+    observable
+], GridProV34.prototype, "customErrorHandlerTemplate", void 0);
+__decorate([
+    GridOptionsConfig
+], GridProV34.prototype, "gridOptionsConfig", void 0);
+__decorate([
+    observable
+], GridProV34.prototype, "provider", void 0);