@adaptabletools/adaptable 10.0.0-canary.0

package/src/agGrid/Adaptable.js

@@ -0,0 +1,3894 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.bindAdaptableAgGrid = exports.AdaptableNoCodeWizard = exports.Adaptable = void 0;
+const tslib_1 = require("tslib");
+const all_modules_1 = require("@ag-grid-community/all-modules");
+const debounce_1 = tslib_1.__importDefault(require("lodash-es/debounce"));
+const isEqual_1 = tslib_1.__importDefault(require("lodash-es/isEqual"));
+const throttle_1 = tslib_1.__importDefault(require("lodash-es/throttle"));
+const uniqBy_1 = tslib_1.__importDefault(require("lodash-es/uniqBy"));
+const React = tslib_1.__importStar(require("react"));
+const ReactDOM = tslib_1.__importStar(require("react-dom"));
+const clamp_1 = tslib_1.__importDefault(require("lodash-es/clamp"));
+const AdaptableApiImpl_1 = require("../Api/Implementation/AdaptableApiImpl");
+const Enums_1 = require("../PredefinedConfig/Common/Enums");
+const Uuid_1 = require("../PredefinedConfig/Uuid");
+const AdaptableStore_1 = require("../Redux/Store/AdaptableStore");
+const GeneralConstants = tslib_1.__importStar(require("../Utilities/Constants/GeneralConstants"));
+const GeneralConstants_1 = require("../Utilities/Constants/GeneralConstants");
+const ModuleConstants = tslib_1.__importStar(require("../Utilities/Constants/ModuleConstants"));
+const DefaultAdaptableOptions_1 = require("../Utilities/Defaults/DefaultAdaptableOptions");
+const Emitter_1 = tslib_1.__importDefault(require("../Utilities/Emitter"));
+const ArrayExtensions_1 = require("../Utilities/Extensions/ArrayExtensions");
+const StringExtensions_1 = require("../Utilities/Extensions/StringExtensions");
+const getScrollbarSize_1 = tslib_1.__importDefault(require("../Utilities/getScrollbarSize"));
+const AdaptableHelper_1 = tslib_1.__importDefault(require("../Utilities/Helpers/AdaptableHelper"));
+const FormatHelper_1 = tslib_1.__importDefault(require("../Utilities/Helpers/FormatHelper"));
+const Helper_1 = require("../Utilities/Helpers/Helper");
+const LoggingHelper_1 = require("../Utilities/Helpers/LoggingHelper");
+const ObjectFactory_1 = tslib_1.__importStar(require("../Utilities/ObjectFactory"));
+// services
+const CalculatedColumnExpressionService_1 = require("../Utilities/Services/CalculatedColumnExpressionService");
+const DataService_1 = require("../Utilities/Services/DataService");
+const LicenseService_1 = require("../Utilities/Services/LicenseService");
+const TeamSharingService_1 = require("../Utilities/Services/TeamSharingService");
+const ReportService_1 = require("../Utilities/Services/ReportService");
+const ModuleService_1 = require("../Utilities/Services/ModuleService");
+const ValidationService_1 = require("../Utilities/Services/ValidationService");
+const EntitlementService_1 = require("../Utilities/Services/EntitlementService");
+const ExpressionService_1 = require("../Utilities/Services/ExpressionService");
+const AlertService_1 = require("../Utilities/Services/AlertService");
+const AdaptableView_1 = require("../View/AdaptableView");
+const AdaptableWizardView_1 = tslib_1.__importDefault(require("../View/AdaptableWizardView"));
+const AdaptableToolPanel_1 = require("../View/Components/ToolPanel/AdaptableToolPanel");
+const UIHelper_1 = tslib_1.__importDefault(require("../View/UIHelper"));
+const ActionColumnRenderer_1 = require("./ActionColumnRenderer");
+const agGridHelper_1 = require("./agGridHelper");
+const agGridMenuHelper_1 = require("./agGridMenuHelper");
+// components
+const FilterWrapper_1 = require("./FilterWrapper");
+const FloatingFilterWrapper_1 = require("./FloatingFilterWrapper");
+const StyleHelper_1 = require("../Utilities/Helpers/StyleHelper");
+const AdaptableNumberEditor_1 = require("./editors/AdaptableNumberEditor");
+const AdaptableDateEditor_1 = require("./editors/AdaptableDateEditor");
+const core_1 = require("@grid-utils/core");
+const waitForCondition_1 = require("../Utilities/waitForCondition");
+const publishTimestamp_1 = tslib_1.__importDefault(require("../../publishTimestamp"));
+const MetamodelService_1 = require("../Utilities/Services/MetamodelService");
+const DocumentationLinkConstants_1 = require("../Utilities/Constants/DocumentationLinkConstants");
+const isAlive = new core_1.CoreUtils().isAlive();
+const tinycolor = require('tinycolor2');
+all_modules_1.ModuleRegistry.registerModules(all_modules_1.AllCommunityModules);
+const GROUP_PATH_SEPARATOR = '/';
+// IMPORTANT - we need colId to be set in order for safeSetColDefs to work correctly
+const assignColId = (colDef) => {
+    if (!colDef) {
+        return;
+    }
+    if (colDef.field && !colDef.colId) {
+        colDef.colId = colDef.field;
+    }
+    if (colDef.children) {
+        colDef.children.forEach(assignColId);
+    }
+    else {
+        if (!colDef.colId) {
+            LoggingHelper_1.LogAdaptableWarning('A column is missing the colId - please check ', colDef, 'Either pass a "field" property or a "colId" property.');
+        }
+    }
+};
+const RowNodeProto = all_modules_1.RowNode.prototype;
+const RowNode_dispatchLocalEvent = RowNodeProto.dispatchLocalEvent;
+const GridApi_setColumnDefs = all_modules_1.GridApi.prototype.setColumnDefs;
+/**
+ * Since column definitions can be nested and have groups
+ * we use this forEachColumn function to call the passed-in `fn`
+ * which will be called with just ColDef (not ColGroupDef), so just column definitions, not group definitions
+ */
+const forEachColumn = (cols, fn, parentColGroup) => {
+    cols.forEach((col, i, arr) => {
+        if (col.children) {
+            forEachColumn(col.children, fn, col);
+        }
+        else {
+            fn(col, i, arr, parentColGroup);
+        }
+    });
+};
+const adaptableInstances = {};
+class Adaptable {
+    constructor() {
+        this.colDefPropertyCache = new Map();
+        this.gridOptionsPropertyCache = new Map();
+        // only for our private / internal events used within Adaptable
+        // public events are emitted through the EventApi
+        this._on = (eventName, callback) => {
+            if (!this.emitter) {
+                return () => { };
+            }
+            return this.emitter.on(eventName, callback);
+        };
+        this._onIncludeFired = (eventName, callback) => {
+            if (!this.emitter) {
+                return () => { };
+            }
+            return this.emitter.onIncludeFired(eventName, callback);
+        };
+        this._emit = (eventName, data) => {
+            if (this.emitter) {
+                return this.emitter.emit(eventName, data);
+            }
+        };
+        this._emitSync = (eventName, data) => {
+            if (this.emitter) {
+                return this.emitter.emitSync(eventName, data);
+            }
+        };
+        this._adaptableReady = false;
+        this.agGridModules = [];
+        this.isPluginLoaded = (pluginId) => {
+            const plugins = this.adaptableOptions.plugins || [];
+            for (let i = 0, len = plugins.length; i < len; i++) {
+                const plugin = plugins[i];
+                if (plugin.pluginId === pluginId) {
+                    return true;
+                }
+            }
+            return false;
+        };
+        this.isAgGridReady = () => {
+            var _a, _b;
+            const waitTimeout = (_b = (_a = this.adaptableOptions.containerOptions) === null || _a === void 0 ? void 0 : _a.vendorContainerWaitTimeout) !== null && _b !== void 0 ? _b : 60000;
+            return waitForCondition_1.waitForCondition(() => !!this.gridOptions.api, waitTimeout);
+        };
+        // debounced methods
+        this.debouncedSetColumnIntoStore = debounce_1.default(() => {
+            if (!this.gridOptions.api) {
+                return;
+            }
+            this.updateColumnsIntoStore();
+        }, GeneralConstants_1.HALF_SECOND);
+        this.debouncedSaveGridLayout = debounce_1.default(() => {
+            if (!this.gridOptions.api) {
+                return;
+            }
+            this.updateLayoutFromGrid();
+        }, GeneralConstants_1.HALF_SECOND);
+        this.debouncedSetSelectedCells = debounce_1.default(() => {
+            if (!this.gridOptions.api) {
+                return;
+            }
+            this.setSelectedCells();
+        }, 250);
+        this.debouncedSetSelectedRows = debounce_1.default(() => {
+            if (!this.gridOptions.api) {
+                return;
+            }
+            this.setSelectedRows();
+        }, GeneralConstants_1.HALF_SECOND);
+        this.debouncedFilterGrid = debounce_1.default((callback = () => { }) => {
+            if (!this.gridOptions.api) {
+                return;
+            }
+            this.applyGridFiltering();
+            if (callback) {
+                callback();
+            }
+        }, GeneralConstants_1.HALF_SECOND);
+        /**
+         * This creates a clone of the current column definitions. If config.removeEmpty is true, will also remove empty column groups
+         *
+         */
+        this.mapColumnDefs = (colDefs, fn, config) => {
+            config = config || { removeEmpty: false };
+            colDefs = colDefs || this.getGroupAndColumnDefs();
+            forEachColumn(colDefs, (columnDef, i, colDefs, parentColGroup) => {
+                const result = fn(columnDef, i, colDefs);
+                const parentArray = parentColGroup ? parentColGroup.children : colDefs;
+                parentArray[i] = result;
+                if (i === colDefs.length - 1 && config.removeEmpty) {
+                    if (parentColGroup) {
+                        parentColGroup.children = parentArray.filter((x) => !!x);
+                    }
+                }
+            });
+            if (config.removeEmpty) {
+                colDefs = colDefs.filter((x) => !!x);
+            }
+            return colDefs;
+        };
+        this.getGroupAndColumnDefs = () => {
+            const colDefs = [].concat(this.currentColumnDefs || this.gridOptions.columnDefs);
+            return colDefs;
+            // return this.gridOptions.columnApi.getAllColumns().map((c) => c.getColDef());
+        };
+        this.getColumnDefsWithCorrectVisibility = () => {
+            const visibleColIds = this.api.layoutApi.getCurrentVisibleColumnIdsMap();
+            return this.gridOptions.columnApi.getAllColumns().map((c) => {
+                const colDef = c.getColDef();
+                const colId = c.getColId();
+                colDef.colId = colId;
+                colDef.hide = !visibleColIds[colId];
+                return colDef;
+            });
+        };
+        // TODO continue here
+        // - group case branches in adaptablestore
+        // - safeSetColDefs
+        // - test custom sort in row groups !!!
+        // - test edit lookup columns
+        //TODO use the list above to return a better typed object
+        this.getPreviousColDefInfo = (colDef) => {
+            const def = colDef;
+            return def.__ab || {};
+        };
+        // (global as any).adaptable = this;
+    }
+    static init(adaptableOptions) {
+        return Adaptable.initInternal(adaptableOptions);
+    }
+    /**
+     * Lazy static constructor for Adaptable
+     * Receives an AdaptableOptions object
+     * Returns a Promise containing the api object in order to enable run-time access to AdapTable's properties and functions
+     * @param adaptableOptions an instance of AdaptableOptions
+     */
+    static async initInternal(adaptableOptions, runtimeConfig) {
+        const extraOptions = {
+            renderGrid: undefined,
+            runtimeConfig: null,
+        };
+        let promise = null;
+        if (Array.isArray(adaptableOptions.plugins)) {
+            // do this
+            for (let plugin of adaptableOptions.plugins) {
+                promise =
+                    promise && promise.then
+                        ? promise.then(() => {
+                            return plugin.beforeInit(adaptableOptions);
+                        })
+                        : plugin.beforeInit(adaptableOptions);
+            }
+            // instead of
+            // if (Array.isArray(adaptableOptions.plugins)) {
+            //   for await (let plugin of adaptableOptions.plugins) {
+            //     await plugin.beforeInit(adaptableOptions);
+            //   }
+            // }
+            // because this await for of introduces too much delay
+        }
+        const doInit = (ab) => ab.init(adaptableOptions, runtimeConfig, true).then((api) => {
+            if (Array.isArray(adaptableOptions.plugins)) {
+                adaptableOptions.plugins.forEach((plugin) => {
+                    plugin.afterInit(ab);
+                });
+            }
+            return api;
+        });
+        if (promise && promise.then) {
+            return promise.then(() => {
+                const ab = new Adaptable();
+                return doInit(ab);
+            });
+        }
+        else {
+            const ab = new Adaptable();
+            return doInit(ab);
+        }
+    }
+    static collectInstance(adaptable) {
+        adaptable._id = adaptable.adaptableOptions.adaptableId || Uuid_1.createUuid();
+        adaptableInstances[adaptable._id] = adaptable;
+    }
+    static forEachAdaptable(fn) {
+        Object.keys(adaptableInstances).forEach((key) => {
+            fn(adaptableInstances[key]);
+        });
+    }
+    static dismissInstance(adaptable) {
+        delete adaptableInstances[adaptable._id];
+    }
+    // the 'old' constructor which takes an Adaptable adaptable object
+    // this is still used internally but should not be used externally as a preference
+    async init(adaptableOptions, runtimeConfig, _staticInit) {
+        var _a, _b, _c, _d, _e, _f, _g;
+        if (!_staticInit) {
+            LoggingHelper_1.ConsoleLogWarning(`
+!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
+!!!!!!! You should not use the "Adaptable" constructor directly, as it was deprecated in v6 and removed in v7!
+!!!!!!!
+!!!!!!! Use const api = await Adaptable.init(adaptableOptions) instead.
+!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!`);
+        }
+        this.emitter = new Emitter_1.default();
+        // we create AdaptableOptions by merging the values provided by the user with the defaults (where no value has been set)
+        this.adaptableOptions = AdaptableHelper_1.default.assignadaptableOptions(adaptableOptions);
+        if (this.hasAutogeneratedPrimaryKey()) {
+            LoggingHelper_1.LogAdaptableWarning(`Autogenerated primary key (adaptableOptions.autogeneratedPrimaryKey = TRUE) should be used only as a last resort,
+      when no unique column is available, as it limits some Adaptable functionalities!
+
+      For more details see: ${DocumentationLinkConstants_1.PrimaryKeyDocsLink}`);
+            this.adaptableOptions.primaryKey = GeneralConstants_1.AUTOGENERATED_PK_COLUMN;
+        }
+        Adaptable.collectInstance(this);
+        AdaptableHelper_1.default.checkAdaptableOptions(this.adaptableOptions);
+        this.runtimeConfig = runtimeConfig || {};
+        this.agGridModules = this.runtimeConfig.modules || [];
+        this.gridOptions = this.adaptableOptions.vendorGrid;
+        if (this.hasAutogeneratedPrimaryKey() && !this.gridOptions.getRowNodeId) {
+            this.gridOptions.getRowNodeId = (rowData) => {
+                var _a;
+                rowData[GeneralConstants_1.AUTOGENERATED_PK_COLUMN] = (_a = rowData[GeneralConstants_1.AUTOGENERATED_PK_COLUMN]) !== null && _a !== void 0 ? _a : Uuid_1.createUuid();
+                return rowData[GeneralConstants_1.AUTOGENERATED_PK_COLUMN];
+            };
+        }
+        if (this.gridOptions.allowContextMenuWithControlKey === undefined) {
+            this.gridOptions.allowContextMenuWithControlKey = true;
+        }
+        this.isInitialised = false;
+        this.useRowNodeLookUp = false; // we will set later in instantiate if possible to be true
+        this.forPlugins((plugin) => plugin.afterInitOptions(this, this.adaptableOptions));
+        // get the api ready
+        this.api = new AdaptableApiImpl_1.AdaptableApiImpl(this);
+        this.forPlugins((plugin) => plugin.afterInitApi(this, this.api));
+        // data source needs to be created early
+        this.DataService = new DataService_1.DataService(this);
+        // set up the ag Grid helper and menu helper
+        this.agGridHelper = new agGridHelper_1.agGridHelper(this, this.gridOptions);
+        this.agGridMenuHelper = new agGridMenuHelper_1.agGridMenuHelper(this, this.gridOptions);
+        // Build the default group sort comparator - will get custom sort values (but not functions) in real time
+        // TODO: if  a custom 'aggFunc' property is defined (see setupColumnAggFunc()), it won't be evaluated
+        if (!this.getDefaultGroupOrderComparator(this.gridOptions) &&
+            this.adaptableOptions.generalOptions.autoOrderGroupedColumns) {
+            this.gridOptions.defaultGroupOrderComparator = this.agGridHelper.runAdaptableGroupComparerFunction();
+        }
+        // we prefer the grid to be NOT instantiated so that we can do it
+        // perhaps in future we will force instantiation only?
+        // create the store
+        this.initStore();
+        // create the services
+        this.LicenseService = this.initLicenseService();
+        this.ValidationService = new ValidationService_1.ValidationService(this);
+        this.ReportService = new ReportService_1.ReportService(this);
+        this.ModuleService = new ModuleService_1.ModuleService(this);
+        this.CalculatedColumnExpressionService = new CalculatedColumnExpressionService_1.CalculatedColumnExpressionService(this);
+        this.EntitlementService = new EntitlementService_1.EntitlementService(this);
+        this.ExpressionService = new ExpressionService_1.ExpressionService(this);
+        this.AlertService = new AlertService_1.AlertService(this);
+        this.TeamSharingService = new TeamSharingService_1.TeamSharingService(this);
+        this.MetamodelService = new MetamodelService_1.MetamodelService(this);
+        this.forPlugins((plugin) => plugin.afterInitServices(this));
+        // Set up Modules - we set up all the Modules suitable for the vendor grid
+        // But users can make some hidden or readonly in their entitlements
+        this.modules = this.agGridHelper.setUpModules();
+        this.forPlugins((plugin) => plugin.afterInitModules(this, this.modules));
+        // also try to set it early, here, if the grid is initialized - needed for AdapTable tool panel
+        if (this.gridOptions.api) {
+            this.gridOptions.api.__adaptable = this;
+        }
+        this.gridOptions.columnTypes = this.gridOptions.columnTypes || {};
+        Object.assign(this.gridOptions.columnTypes, {
+            [GeneralConstants_1.AB_SPECIAL_COLUMN]: {},
+            abColDefNumber: (_a = this.gridOptions.columnTypes.abColDefNumber) !== null && _a !== void 0 ? _a : {},
+            abColDefString: (_b = this.gridOptions.columnTypes.abColDefString) !== null && _b !== void 0 ? _b : {},
+            abColDefBoolean: (_c = this.gridOptions.columnTypes.abColDefBoolean) !== null && _c !== void 0 ? _c : {},
+            abColDefDate: (_d = this.gridOptions.columnTypes.abColDefDate) !== null && _d !== void 0 ? _d : {},
+            abColDefObject: (_e = this.gridOptions.columnTypes.abColDefObject) !== null && _e !== void 0 ? _e : {},
+            abColDefCustom: (_f = this.gridOptions.columnTypes.abColDefCustom) !== null && _f !== void 0 ? _f : {},
+            abColDefNumberArray: (_g = this.gridOptions.columnTypes.abColDefNumberArray) !== null && _g !== void 0 ? _g : {},
+        });
+        if (this.gridOptions.columnTypes.abColDefNumber.cellEditor === undefined) {
+            this.gridOptions.columnTypes.abColDefNumber.cellEditor = AdaptableNumberEditor_1.AdaptableNumberEditor;
+        }
+        if (this.gridOptions.columnTypes.abColDefDate.cellEditor === undefined) {
+            this.gridOptions.columnTypes.abColDefDate.cellEditor = AdaptableDateEditor_1.AdaptableDateEditor;
+        }
+        return this.initializeAgGrid().then((initialized) => {
+            if (!initialized) {
+                // we have no grid, we can't do anything
+                LoggingHelper_1.ConsoleLogError('Unable to set up AG Grid');
+                return this.api;
+            }
+            let self = this;
+            // add our adaptable object to the grid options api object
+            // this is VERY useful for when we need to access Adaptable inside of agGrid only functions
+            if (this.gridOptions.api) {
+                this.gridOptions.api.__adaptable = this;
+                // we need to monkey patch the grid api
+                // we only do this for this instance, not on the prototype
+                this.gridOptions.api.setColumnDefs = function (columnDefs) {
+                    self.currentColumnDefs = [].concat(columnDefs);
+                    const result = GridApi_setColumnDefs.apply(this, arguments);
+                    self.setupColumns();
+                    return result;
+                };
+            }
+            // Load the store
+            this.adaptableStore.Load.then(() => {
+                this.initInternalGridLogic();
+                AdaptableHelper_1.default.checkValidPrimaryKey(this);
+            }, (e) => {
+                LoggingHelper_1.ConsoleLogError('Failed to Init Modules : ', e);
+                // for now we initiliaze the grid even if initialising Modules has failed (perhaps revisit this?)
+                this.initInternalGridLogic();
+                this.api.internalApi.hideLoadingScreen(); // doesnt really help but at least clears the screen
+            }).then(async () => {
+                this.api.internalApi.hideLoadingScreen();
+                this.isInitialised = true;
+            });
+            if (this.abContainerElement == null) {
+                this.abContainerElement = this.getadaptableContainerElement();
+            }
+            if (this.abContainerElement != null) {
+                this.abContainerElement.innerHTML = '';
+                ReactDOM.render(AdaptableView_1.AdaptableApp({ Adaptable: this }), this.abContainerElement);
+            }
+            // create debounce methods that take a time based on user settings
+            this.throttleFilterOnEditDataChange = throttle_1.default(this.gridOptions.api.onFilterChanged, this.adaptableOptions.searchOptions.filterActionOnUserDataChange.throttleDelay);
+            this.throttleFilterOnTickingDataChange = throttle_1.default(this.gridOptions.api.onFilterChanged, this.adaptableOptions.searchOptions.filterActionOnExternalDataChange.throttleDelay);
+            return this.api;
+        });
+    }
+    forPlugins(callback) {
+        if (Array.isArray(this.adaptableOptions.plugins)) {
+            this.adaptableOptions.plugins.forEach((plugin) => {
+                callback(plugin);
+            });
+        }
+    }
+    getPlugin(pluginId) {
+        const plugins = this.adaptableOptions.plugins || [];
+        const thePlugin = plugins.filter((p) => p.pluginId === pluginId)[0];
+        if (!thePlugin) {
+            throw `Cannot find plugin "${pluginId}". Make sure you spelled it right!`;
+        }
+        return thePlugin;
+    }
+    getPluginProperty(pluginId, propertyName, ...args) {
+        const plugins = this.adaptableOptions.plugins || [];
+        const thePlugin = plugins.filter((p) => p.pluginId === pluginId)[0];
+        if (!thePlugin) {
+            throw `Cannot find plugin "${pluginId}". Make sure you spelled it right!`;
+        }
+        if (thePlugin && thePlugin.hasProperty(propertyName)) {
+            return thePlugin.getProperty(propertyName)(...args);
+        }
+    }
+    lookupPlugins(propertyName, ...args) {
+        const plugins = this.adaptableOptions.plugins || [];
+        for (let i = 0, len = plugins.length; i < len; i++) {
+            const plugin = plugins[i];
+            if (plugin.hasProperty(propertyName)) {
+                return plugin.getProperty(propertyName)(...args);
+            }
+        }
+        return undefined;
+    }
+    initStore() {
+        LoggingHelper_1.LogAdaptableInfo(`Initialising AdaptableStore`);
+        this.adaptableStore = new AdaptableStore_1.AdaptableStore(this, this.isAgGridReady());
+        this.adaptableStore.onAny((eventName, data) => {
+            this.performAudit(data.action, data.state, data.newState);
+            this.forPlugins((plugin) => plugin.onStoreEvent(eventName, data, this.adaptableStore));
+            if (eventName == AdaptableStore_1.INIT_STATE) {
+                this._adaptableReady = true;
+                LoggingHelper_1.LogAdaptableInfo(`Updating obsolete configuration/state`);
+                this.modules.forEach((m) => m.updateOldConfig());
+                // call stuff here
+                // and reset state also?
+                this.forPlugins((plugin) => plugin.onAdaptableReady(this, this.adaptableOptions));
+                this.api.eventApi.emit('AdaptableReady', {
+                    adaptableApi: this.api,
+                    vendorGrid: this.adaptableOptions.vendorGrid,
+                });
+            }
+        });
+    }
+    performAudit(action, oldState, newState) {
+        const adaptableStateChangedInfo = {
+            actionName: action.type,
+            clientTimestamp: new Date(),
+            userName: this.adaptableOptions.userName,
+            adaptableId: this.adaptableOptions.adaptableId,
+            adaptableStateKey: this.adaptableOptions.adaptableStateKey,
+            action: action,
+            oldState: oldState,
+            newState: newState,
+        };
+        this.api.eventApi.emit('AdaptableStateChanged', adaptableStateChangedInfo);
+    }
+    initializeAgGrid() {
+        var _a;
+        LoggingHelper_1.LogAdaptableInfo(`Initializing AgGrid...`);
+        // set up whether we use the getRowNode method or loop when finding a rowNode (former is preferable)
+        // can only do that here as the gridOptions not yet set up
+        this.useRowNodeLookUp = this.agGridHelper.TrySetUpNodeIds();
+        if (Array.isArray(this.gridOptions.columnDefs)) {
+            this.gridOptions.columnDefs.forEach(assignColId);
+        }
+        if ((_a = this.adaptableOptions.generalOptions) === null || _a === void 0 ? void 0 : _a.hideEmptyGroupRows) {
+            LoggingHelper_1.LogAdaptableWarning(`DEPRECATED: 'GeneralOptions.hideEmptyGroupRows' is deprecated and will no longer be evaluated!`);
+            // disabled due to showstopper starting with AG Grid v26
+            // the internal implementation of AG Grids GroupCellRenderer has changed A LOT!
+            // this.gridOptions.components = this.gridOptions.components || {};
+            //
+            // this.gridOptions.autoGroupColumnDef = this.gridOptions.autoGroupColumnDef || {};
+            // if (!this.gridOptions.autoGroupColumnDef.cellRenderer) {
+            //   this.gridOptions.autoGroupColumnDef.cellRenderer = '__adaptableGroupCellRenderer';
+            //   this.gridOptions.components.__adaptableGroupCellRenderer = AdaptableGroupCellRenderer;
+            // }
+        }
+        // Create Adaptable adaptable Tool Panel
+        if (this.adaptableOptions.toolPanelOptions.showAdaptableToolPanel) {
+            if (this.gridOptions.sideBar) {
+                this.gridOptions.sideBar = this.gridOptions.sideBar || {};
+                this.gridOptions.components = this.gridOptions.components || {};
+                // https://www.ag-grid.com/javascript-grid/side-bar/
+                const sidebar = this.gridOptions.sideBar;
+                if (sidebar === true) {
+                    // Possibility 1: Sidebar is true - meaning that they want the default filter and columns, so create both:
+                    this.gridOptions.sideBar = this.agGridHelper.createAdaptableSideBarDefs(true, true);
+                }
+                else if (sidebar === 'columns') {
+                    // Possibility 2: Sidebar is 'columns' (string) - meaning column only so create just that
+                    this.gridOptions.sideBar = this.agGridHelper.createAdaptableSideBarDefs(false, true);
+                }
+                else if (sidebar === 'filters') {
+                    // Possibility 3: Sidebar is 'filters' (string) - meaning filters only so create just that
+                    this.gridOptions.sideBar = this.agGridHelper.createAdaptableSideBarDefs(true, false);
+                }
+                else {
+                    // Possibilty 4: either no sidebar or they created their own; in either case, should add adaptable Tool panel
+                    const sidebarDef = this.gridOptions.sideBar;
+                    if (sidebarDef) {
+                        sidebarDef.toolPanels = sidebarDef.toolPanels || [];
+                        sidebarDef.toolPanels.push(this.agGridHelper.createAdaptableToolPanel());
+                        this.agGridHelper.orderToolPanels(sidebarDef.toolPanels);
+                    }
+                }
+                this.gridOptions.components.AdaptableToolPanel = AdaptableToolPanel_1.getAdaptableToolPanelAgGridComponent(this);
+                if (this.gridOptions.api) {
+                    this.gridOptions.api.setSideBar(this.gridOptions.sideBar);
+                }
+            }
+        }
+        const checkVendorContainer = () => {
+            let vendorContainer = this.getGridContainerElement();
+            if (!vendorContainer) {
+                vendorContainer = this.initVendorContainerFromInitializedAgGrid();
+                if (!vendorContainer) {
+                    LoggingHelper_1.ConsoleLogError('You must provide an element id in `containerOptions.vendorContainer`');
+                    return false;
+                }
+            }
+            return true;
+        };
+        const isGridInstantiated = this.gridOptions.api && typeof this.gridOptions.api.getValue === 'function';
+        if (isGridInstantiated) {
+            if (!checkVendorContainer()) {
+                return Promise.resolve(false);
+            }
+            return Promise.resolve(true);
+        }
+        if (this.runtimeConfig.waitForAgGrid) {
+            return this.isAgGridReady().then(() => {
+                this.initVendorContainerFromInitializedAgGrid();
+                return Promise.resolve(true);
+            }, () => {
+                LoggingHelper_1.ConsoleLogError(`Could not find any agGrid instance rendered. Could not find reference to ag-grid api. Make sure you pass the same  gridOptions object reference both to Adaptable and AgGrid`);
+                return Promise.reject(false);
+            });
+        }
+        else {
+            if (!checkVendorContainer()) {
+                return Promise.resolve(false);
+            }
+        }
+        // now create the grid itself - it is done this way as previously when we instantiated the Grid 'properly' it got created as J.Grid
+        let grid;
+        const modules = (this.adaptableOptions.vendorGrid || {}).modules || [];
+        this.agGridModules = [...this.agGridModules, ...modules];
+        const vendorContainer = this.getGridContainerElement();
+        if (this.gridOptions.modules) {
+            delete this.gridOptions.modules;
+        }
+        grid = new all_modules_1.Grid(vendorContainer, this.gridOptions, { modules });
+        // add our adaptable object to the grid options api object
+        // this is VERY useful for when we need to access Adaptable inside of agGrid only functions
+        if (this.gridOptions.api) {
+            this.gridOptions.api.__adaptable = this;
+        }
+        return Promise.resolve(grid != null);
+    }
+    initVendorContainerFromInitializedAgGrid() {
+        if (this.getGridContainerElement()) {
+            return;
+        }
+        const layoutElements = this.gridOptions.api
+            ? this.gridOptions.api.gridOptionsWrapper
+                ? this.gridOptions.api.gridOptionsWrapper.layoutElements || []
+                : []
+            : [];
+        if (!layoutElements.length) {
+            // aggrid 25.3.0 doesn't have layoutElements anymore, so we try to retrieve this element
+            layoutElements.push(this.gridOptions.api.gridBodyCon.eGridBody);
+        }
+        let vendorContainer;
+        for (let i = 0, len = layoutElements.length; i < len; i++) {
+            const element = layoutElements[i];
+            if (element && element.matches('.ag-root-wrapper, .ag-root')) {
+                const gridContainer = element.closest('[class*="ag-theme"]');
+                if (gridContainer) {
+                    vendorContainer = gridContainer;
+                    break;
+                }
+            }
+        }
+        if (!vendorContainer) {
+            LoggingHelper_1.ConsoleLogError(`Could not find the agGrid vendor container. This will probably break some AdapTable functionality.`);
+        }
+        return (this.adaptableOptions.containerOptions.vendorContainer = vendorContainer);
+    }
+    filterOnEditDataChange() {
+        if (this.adaptableOptions.searchOptions.filterActionOnUserDataChange.applyFilter ==
+            Enums_1.FilterOnDataChangeOptions.Always) {
+            this.gridOptions.api.onFilterChanged();
+        }
+        else if (this.adaptableOptions.searchOptions.filterActionOnUserDataChange.applyFilter ==
+            Enums_1.FilterOnDataChangeOptions.Throttle) {
+            this.throttleFilterOnEditDataChange();
+        }
+    }
+    filterOnTickingDataChange() {
+        if (this.adaptableOptions.searchOptions.filterActionOnExternalDataChange.applyFilter ==
+            Enums_1.FilterOnDataChangeOptions.Always) {
+            this.gridOptions.api.onFilterChanged();
+        }
+        else if (this.adaptableOptions.searchOptions.filterActionOnExternalDataChange.applyFilter ==
+            Enums_1.FilterOnDataChangeOptions.Throttle) {
+            this.throttleFilterOnTickingDataChange();
+        }
+    }
+    applyGridFiltering() {
+        if (this.api.filterApi.isQuickFilterAvailable()) {
+            if (this.api.filterApi.isQuickFilterVisible()) {
+                this.showQuickFilter();
+            }
+            else {
+                this.hideQuickFilter();
+            }
+        }
+        this.gridOptions.api.onFilterChanged();
+        this._emit('GridFiltered');
+        this.setSelectedCells();
+        this.setSelectedRows();
+    }
+    isGroupRowNode(rowNode) {
+        if (!rowNode) {
+            return false;
+        }
+        if (rowNode.isEmptyRowGroupNode()) {
+            return true;
+        }
+        if (rowNode.group && rowNode.group === true) {
+            return true;
+        }
+        if (rowNode.leafGroup && rowNode.leafGroup === true) {
+            return true;
+        }
+        return false;
+    }
+    isVisibleNode(rowNode) {
+        const foundNode = this.gridOptions.api
+            .getRenderedNodes()
+            .find((n) => n.id == rowNode.id);
+        return foundNode != null;
+    }
+    isPinnedRowNode(rowNode) {
+        if (!rowNode) {
+            return false;
+        }
+        if (rowNode.isRowPinned()) {
+            return true;
+        }
+        return false;
+    }
+    clearGridFiltering() {
+        this.gridOptions.columnApi.getAllColumns().forEach((c) => {
+            this.gridOptions.api.destroyFilter(c);
+        });
+    }
+    clearColumnFiltering(columnIds) {
+        columnIds.forEach((c) => {
+            const column = this.gridOptions.columnApi
+                .getAllColumns()
+                .find((col) => col.getColId() == c);
+            if (column) {
+                this.gridOptions.api.destroyFilter(column);
+            }
+        });
+    }
+    hideFilterForm() {
+        if (this.hideFilterFormPopup) {
+            this.hideFilterFormPopup();
+        }
+    }
+    updateColumnsIntoStore() {
+        // if pivoting and we have 'special' columns as a result then do nothing ...
+        // if (this.gridOptions.columnApi!.isPivotMode()) {
+        //   if (ArrayExtensions.IsNotNullOrEmpty(this.gridOptions.columnApi!.getPivotColumns())) {
+        //     return;
+        //   }
+        // }
+        const allColumns = [];
+        const vendorCols = this.gridOptions.columnApi.getAllColumns();
+        const columnGroupChildren = this.gridOptions.columnApi.getAllDisplayedColumnGroups();
+        const groupsCount = {};
+        const colsToGroups = columnGroupChildren.reduce((acc, columnGroup) => {
+            var _a, _b, _c;
+            if (!((_b = (_a = columnGroup.getOriginalColumnGroup) === null || _a === void 0 ? void 0 : _a.call(columnGroup)) === null || _b === void 0 ? void 0 : _b.getColGroupDef())) {
+                return acc;
+            }
+            const ColumnGroupId = columnGroup.getGroupId();
+            const AllowGroupSplit = !columnGroup.getOriginalColumnGroup().getColGroupDef().marryChildren;
+            const FriendlyName = (_c = columnGroup.getOriginalColumnGroup().getColGroupDef().headerName) !== null && _c !== void 0 ? _c : ColumnGroupId;
+            const columnsInGroup = columnGroup.getLeafColumns();
+            columnsInGroup.forEach((col) => {
+                const group = {
+                    ColumnGroupId: ColumnGroupId,
+                    FriendlyName,
+                    AllowGroupSplit: AllowGroupSplit,
+                    GroupCount: 0,
+                };
+                groupsCount[group.ColumnGroupId] = groupsCount[group.ColumnGroupId] || 0;
+                groupsCount[group.ColumnGroupId] += columnsInGroup.length;
+                acc[col.getColId()] = group;
+            });
+            return acc;
+        }, {});
+        Object.keys(colsToGroups).forEach((colId) => {
+            colsToGroups[colId].GroupCount = groupsCount[colsToGroups[colId].ColumnGroupId];
+        });
+        // TODO sort the visible columns by layout order
+        vendorCols.forEach((vendorColumn) => {
+            const colId = vendorColumn.getColId();
+            if (!this.api.columnApi.isRowGroupColumn(colId)) {
+                allColumns.push(this.createAdaptableColumn(vendorColumn, colsToGroups));
+            }
+        });
+        this.api.internalApi.setColumns(allColumns);
+    }
+    createAdaptableColumn(vendorColumn, colsToGroups) {
+        const abColumn = this.agGridHelper.createAdaptableColumnFromVendorColumn(vendorColumn, colsToGroups);
+        return abColumn;
+    }
+    safeSetColDefs(colDefs) {
+        // we need to do this because when doing gridOptions.api.setColumnDefs
+        // internally aggrid checks for column equality, and uses colId for that
+        // and since part of the column we set are basically the same old columns
+        // those that dont have a colId are detected as new columns, but since the old colIds/field
+        // are already in an aggrid cache, new ones with _1 are used, so basically all columns
+        // end up as new columns - really weird
+        colDefs = this.mapColumnDefs(colDefs, (colDef) => {
+            if (colDef.field && colDef.colId == null) {
+                colDef.colId = colDef.field;
+            }
+            return colDef;
+        });
+        this.gridOptions.api.setColumnDefs(colDefs);
+        this.updateColumnsIntoStore(); // todo remove this from here!!!
+    }
+    getFormatColumnCellStyle(formatColumn, params) {
+        if (!formatColumn.IncludeGroupedRows && this.isGroupRowNode(params.node)) {
+            return;
+        }
+        if (formatColumn === null || formatColumn === void 0 ? void 0 : formatColumn.IsSuspended) {
+            return;
+        }
+        let style = {};
+        const columnStyle = formatColumn.ColumnStyle;
+        if (columnStyle) {
+            const gradientStyle = columnStyle === null || columnStyle === void 0 ? void 0 : columnStyle.GradientStyle;
+            if (gradientStyle) {
+                const min = this.api.formatColumnApi.getNumericStyleMinValue(columnStyle, params.node, params.value);
+                const max = this.api.formatColumnApi.getNumericStyleMaxValue(columnStyle, params.node, params.value);
+                const clampedValue = clamp_1.default(params.value, min, max);
+                let cellBackColor;
+                let reverseGradient = false;
+                if (gradientStyle.ColumnComparison) {
+                    cellBackColor = gradientStyle.ColumnComparison.Color;
+                }
+                else {
+                    const matchingRange = gradientStyle.CellRanges.find((r) => r.Min <= clampedValue && r.Max >= clampedValue);
+                    if (matchingRange) {
+                        cellBackColor = matchingRange.Color;
+                        reverseGradient = matchingRange.ReverseGradient;
+                    }
+                }
+                const increase = Math.abs(max - min);
+                const percentage = ((params.value - min) / increase) * 100;
+                let alpha = Number((percentage / 100).toPrecision(2));
+                if (reverseGradient) {
+                    alpha = 1 - alpha;
+                }
+                style.backgroundColor = tinycolor(cellBackColor).setAlpha(alpha).toRgbString();
+            }
+        }
+        else if (formatColumn.Style) {
+            style = this.convertAdaptableStyleToCSS(formatColumn.Style);
+        }
+        if (formatColumn.CellAlignment) {
+            switch (formatColumn.CellAlignment) {
+                case 'Left':
+                    style.textAlign = 'left';
+                    break;
+                case 'Right':
+                    style.textAlign = 'right';
+                    break;
+                case 'Center':
+                    style.textAlign = 'center';
+                    break;
+            }
+        }
+        return style;
+    }
+    getAlertCellStyle(col, params) {
+        const activeAlerts = this.api.internalApi
+            .getAdaptableAlerts()
+            .filter((aa) => {
+            var _a;
+            return ((_a = aa.alertDefinition.AlertProperties) === null || _a === void 0 ? void 0 : _a.HighlightCell) &&
+                aa.dataChangedInfo &&
+                aa.dataChangedInfo.columnId === col.ColumnId &&
+                aa.dataChangedInfo.rowNode === params.node;
+        });
+        const alert = activeAlerts[0];
+        if (alert) {
+            return {
+                backgroundColor: UIHelper_1.default.getColorByMessageType(alert.alertDefinition.MessageType),
+            };
+        }
+    }
+    getFlashingAlertRowStyle(params) {
+        const primaryKeyValue = this.getPrimaryKeyValueFromRowNode(params.node);
+        return this.getFlashingAlertStyleFor(primaryKeyValue);
+    }
+    getFlashingAlertStyleFor(primaryKey, colId) {
+        var _a;
+        const flashingAlert = this.api.internalApi.getAdaptableFlashingAlertFor(primaryKey, colId);
+        if (!flashingAlert) {
+            return {};
+        }
+        return this.convertAdaptableStyleToCSS((_a = (flashingAlert.direction === 'up'
+            ? flashingAlert.flashingAlertDefinition.UpChangeStyle
+            : flashingAlert.direction === 'down'
+                ? flashingAlert.flashingAlertDefinition.DownChangeStyle
+                : flashingAlert.flashingAlertDefinition.NeutralChangeStyle)) !== null && _a !== void 0 ? _a : {});
+    }
+    getFlashingAlertCellStyle(col, params) {
+        const primaryKeyValue = this.getPrimaryKeyValueFromRowNode(params.node);
+        return this.getFlashingAlertStyleFor(primaryKeyValue, col.ColumnId);
+    }
+    getCellHighlightStyle(col, params) {
+        var _a;
+        const primaryKeyValue = this.getPrimaryKeyValueFromRowNode(params.node);
+        const cellHightlight = this.api.internalApi
+            .getSystemState()
+            .HighlightedCells.find((cellHighlightInfo) => {
+            return (col.ColumnId === cellHighlightInfo.columnId &&
+                cellHighlightInfo.primaryKeyValue === primaryKeyValue);
+        });
+        if (cellHightlight) {
+            const highhlightType = (_a = cellHightlight.highlightType) !== null && _a !== void 0 ? _a : 'Info';
+            switch (highhlightType) {
+                case 'Error':
+                    return { backgroundColor: 'var(--ab-color-error)' };
+                case 'Info':
+                    return { backgroundColor: 'var(--ab-color-info)' };
+                case 'Success':
+                    return { backgroundColor: 'var(--ab-color-success)' };
+                case 'Warning':
+                    return { backgroundColor: 'var(--ab-color-warn)' };
+            }
+        }
+    }
+    getQuickSearchCellStyle() {
+        const quickSearchStyle = this.api.quickSearchApi.getQuickSearchStyle();
+        if (!quickSearchStyle || StringExtensions_1.StringExtensions.IsNotNullOrEmpty(quickSearchStyle.ClassName)) {
+            return undefined;
+        }
+        return this.convertAdaptableStyleToCSS(quickSearchStyle);
+    }
+    getEditableCellStyle(abColumn, params) {
+        const editableCellStyle = this.api.userInterfaceApi.getEditableCellStyle();
+        if (!editableCellStyle) {
+            return undefined;
+        }
+        const gridCell = this.getGridCellFromRowNode(params.node, abColumn.ColumnId);
+        if (gridCell) {
+            if (this.api.gridApi.areCellsEditable([gridCell])) {
+                return this.convertAdaptableStyleToCSS(editableCellStyle);
+            }
+        }
+        return undefined;
+    }
+    getReadOnlyCellStyle(abColumn, params) {
+        const editableCellStyle = this.api.userInterfaceApi.getReadOnlyCellStyle();
+        if (!editableCellStyle) {
+            return undefined;
+        }
+        const gridCell = this.getGridCellFromRowNode(params.node, abColumn.ColumnId);
+        if (gridCell) {
+            if (!this.api.gridApi.areCellsEditable([gridCell])) {
+                return this.convertAdaptableStyleToCSS(editableCellStyle);
+            }
+        }
+        return undefined;
+    }
+    getConditionalStyleCellStyle(conditionalStyles = [], abColumn, params) {
+        const module = this.ModuleService.getModuleById(ModuleConstants.ConditionalStyleModuleId);
+        const result = conditionalStyles.reduce((result, conditionalStyle) => {
+            if (module.isConditionalStyleActiveForColumn(conditionalStyle, abColumn, params)) {
+                return Object.assign(Object.assign({}, result), conditionalStyle.Style);
+            }
+            else {
+                return result;
+            }
+        }, {});
+        return this.convertAdaptableStyleToCSS(result);
+    }
+    getConditionalStyleCellClass(conditionalStyles = [], abColumn, params) {
+        const module = this.ModuleService.getModuleById(ModuleConstants.ConditionalStyleModuleId);
+        let classNames = conditionalStyles
+            .map((conditionalStyle) => {
+            var _a, _b;
+            if (((_a = conditionalStyle.Style) === null || _a === void 0 ? void 0 : _a.ClassName) &&
+                module.isConditionalStyleActiveForColumn(conditionalStyle, abColumn, params)) {
+                return (_b = conditionalStyle.Style) === null || _b === void 0 ? void 0 : _b.ClassName;
+            }
+        })
+            .filter((x) => !!x)
+            .join(' ');
+        return classNames;
+    }
+    isQuickSearchActive(abColumn, params) {
+        if (abColumn.IsExcludedFromQuickSearch) {
+            return false;
+        }
+        if (!params.node || params.node.group) {
+            return false;
+        }
+        let quickSearchValue = this.api.quickSearchApi.getQuickSearchValue();
+        if (StringExtensions_1.StringExtensions.IsNullOrEmpty(quickSearchValue)) {
+            return false;
+        }
+        const columnFilter = ObjectFactory_1.default.CreateColumnFilter(abColumn.ColumnId, 'Contains', [quickSearchValue]);
+        return this.api.filterApi.evaluateColumnFilter(columnFilter, params.node);
+    }
+    getPrimaryKeyValueFromRowNode(rowNode) {
+        var _a;
+        let gridApi = this.getGridOptionsApi();
+        let result;
+        if (gridApi && !this.hasAutogeneratedPrimaryKey()) {
+            result = gridApi.getValue(this.adaptableOptions.primaryKey, rowNode);
+        }
+        if ((result === null || result == undefined) && rowNode && rowNode.data) {
+            result = (_a = rowNode.data[this.adaptableOptions.primaryKey]) !== null && _a !== void 0 ? _a : null;
+        }
+        return result;
+    }
+    getSortedColumnStateForVisibleColumns(visibleColumnList, columnState) {
+        columnState = columnState || this.gridOptions.columnApi.getColumnState();
+        const NewVisibleColumnIdsMap = visibleColumnList.reduce((acc, colId, index) => {
+            acc[colId] = index;
+            return acc;
+        }, {});
+        const columnsStateIndexes = columnState.reduce((acc, colState, index) => {
+            acc[colState.colId] = index;
+            return acc;
+        }, {});
+        const newVisibleColumnsMap = visibleColumnList.reduce((acc, colId, index) => {
+            acc[colId] = index;
+            return acc;
+        }, {});
+        const result = [...columnState]
+            .sort((colState1, colState2) => {
+            const colId1 = colState1.colId;
+            const colId2 = colState2.colId;
+            const originalIndex1 = columnsStateIndexes[colId1];
+            const originalIndex2 = columnsStateIndexes[colId2];
+            const isRowGroup1 = this.api.columnApi.isRowGroupColumn(colId1);
+            const isRowGroup2 = this.api.columnApi.isRowGroupColumn(colId2);
+            if (isRowGroup1 && isRowGroup2) {
+                return 1;
+            }
+            if (isRowGroup1) {
+                return -1;
+            }
+            if (isRowGroup2) {
+                return 1;
+            }
+            if (newVisibleColumnsMap[colId1] != null && newVisibleColumnsMap[colId2] == null) {
+                return -1;
+            }
+            if (newVisibleColumnsMap[colId1] == null && newVisibleColumnsMap[colId2] != null) {
+                return 1;
+            }
+            if (newVisibleColumnsMap[colId1] == null && newVisibleColumnsMap[colId2] == null) {
+                return originalIndex1 - originalIndex2;
+            }
+            return newVisibleColumnsMap[colState1.colId] - newVisibleColumnsMap[colState2.colId];
+        })
+            .map((colState) => (Object.assign(Object.assign({}, colState), { hide: NewVisibleColumnIdsMap[colState.colId] == null })));
+        return result;
+    }
+    setColumnOrder(VisibleColumnList) {
+        const newColumnState = this.getSortedColumnStateForVisibleColumns(VisibleColumnList);
+        this.gridOptions.columnApi.setColumnState(newColumnState);
+        this.updateColumnsIntoStore();
+    }
+    persistLayout(layout) {
+        if (this.api.layoutApi.shouldAutoSaveLayout(layout)) {
+            this.api.layoutApi.saveLayout(layout);
+        }
+        else {
+            this.api.internalApi.updateCurrentDraftLayout(layout);
+        }
+    }
+    setLayout(layout) {
+        var _a, _b, _c, _d, _e, _f;
+        if (!layout) {
+            layout = this.api.layoutApi.getCurrentLayout();
+        }
+        layout.Columns = layout.Columns || [];
+        const layoutColumnsMap = layout.Columns.reduce((acc, colId) => {
+            acc[colId] = true;
+            return acc;
+        }, {});
+        const columnsState = this.gridOptions.columnApi.getColumnState();
+        const columnsStateIndexes = {};
+        const columnsStateMap = columnsState.reduce((acc, colState, index) => {
+            columnsStateIndexes[colState.colId] = index;
+            acc[colState.colId] = colState;
+            return acc;
+        }, {});
+        let sortIndex = 0;
+        const sortModelMap = ((_a = layout.ColumnSorts) !== null && _a !== void 0 ? _a : []).reduce((acc, customSort) => {
+            const colId = customSort.ColumnId;
+            if (!layoutColumnsMap[colId]) {
+                return acc;
+            }
+            acc[colId] = {
+                colId,
+                sort: customSort.SortOrder === 'Asc' ? 'asc' : 'desc',
+                sortIndex,
+            };
+            sortIndex++;
+            return acc;
+        }, {});
+        const groupedColumnsIndexesMap = (layout.RowGroupedColumns || []).reduce((acc, colId, index) => {
+            acc[colId] = index;
+            return acc;
+        }, {});
+        let pivotedColumnsIndexesMap = {};
+        const aggregationFunctionsColumnsMap = layout.AggregationColumns || {};
+        const columnsInPivot = [
+            ...(layout.PivotColumns || []),
+            ...Object.keys(layout.AggregationColumns || {}),
+        ];
+        const columnsToShow = !layout.EnablePivot ? layout.Columns : columnsInPivot || [];
+        if (columnsInPivot.length && layout.RowGroupedColumns) {
+            columnsInPivot.push(...layout.RowGroupedColumns);
+        }
+        let isChanged = false;
+        const colsToAutoSize = {};
+        let newColState = this.getSortedColumnStateForVisibleColumns(columnsToShow, columnsState);
+        newColState = newColState
+            .map((colState) => {
+            var _a, _b, _c, _d;
+            const { colId } = colState;
+            const oldColState = columnsStateMap[colId];
+            const hide = !layoutColumnsMap[colId];
+            const newColState = Object.assign(Object.assign({}, oldColState), { hide });
+            if (layout.ColumnWidthMap && layout.ColumnWidthMap[colId] != null) {
+                newColState.width = layout.ColumnWidthMap[colId];
+            }
+            else {
+                colsToAutoSize[colId] = true;
+            }
+            newColState.rowGroupIndex =
+                groupedColumnsIndexesMap[colId] != null ? groupedColumnsIndexesMap[colId] : null;
+            // if (newColState.rowGroupIndex == null) {
+            newColState.rowGroup = newColState.rowGroupIndex != null;
+            // }
+            const normalizePinned = (pinnedValue) => {
+                if (typeof pinnedValue === 'string') {
+                    return pinnedValue;
+                }
+                return pinnedValue == true ? 'left' : !!pinnedValue;
+            };
+            const newValuePinned = normalizePinned(layout.PinnedColumnsMap ? layout.PinnedColumnsMap[colId] : false);
+            const stateValuePinned = normalizePinned(newColState.pinned);
+            if (newValuePinned !== stateValuePinned) {
+                newColState.pinned = newValuePinned;
+            }
+            newColState.pivotIndex = null;
+            if (pivotedColumnsIndexesMap[colId] != null) {
+                newColState.pivotIndex = pivotedColumnsIndexesMap[colId];
+            }
+            newColState.aggFunc = null;
+            if (aggregationFunctionsColumnsMap[colId] != null) {
+                const colDef = (_b = (_a = this.gridOptions) === null || _a === void 0 ? void 0 : _a.api) === null || _b === void 0 ? void 0 : _b.getColumnDef(colId);
+                newColState.aggFunc =
+                    aggregationFunctionsColumnsMap[colId] === true
+                        ? // if we have true, it means - take the default aggFunc from colDef
+                         (_d = (_c = 
+                        // NOTE: colState gives us the current aggFunc, which can be null,
+                        // while the colDef gives us the initially configured aggFunc for that column
+                        colState.aggFunc) !== null && _c !== void 0 ? _c : colDef === null || colDef === void 0 ? void 0 : colDef.aggFunc) !== null && _d !== void 0 ? _d : 'sum' : aggregationFunctionsColumnsMap[colId];
+            }
+            if (sortModelMap[colId]) {
+                newColState.sort = sortModelMap[colId].sort;
+                newColState.sortIndex = sortModelMap[colId].sortIndex;
+            }
+            else {
+                newColState.sort = null;
+                newColState.sortIndex = null;
+            }
+            isChanged = isChanged || !isEqual_1.default(newColState, oldColState);
+            return newColState;
+        })
+            .filter((x) => !!x);
+        if (!isChanged) {
+            // order changed
+            const toString = (c) => `${c.colId}-${c.rowGroupIndex}-${c.pivotIndex}-${c.aggFunc}-${c.pinned}-${c.width}-${c.hide}`;
+            const oldColStateString = columnsState.map(toString).join(',');
+            const newColStateString = newColState.map(toString).join(',');
+            isChanged = newColStateString != oldColStateString;
+        }
+        const pivoted = !!layout.EnablePivot;
+        const shouldUpdatePivoted = this.gridOptions.columnApi.isPivotMode() !== pivoted;
+        isChanged = isChanged || shouldUpdatePivoted;
+        let shouldUpdateHeaders = false;
+        shouldUpdateHeaders = this.setupColumnHeaderAggregations(layout);
+        // update the header name for all columns
+        // there should be a simpler solution for this, once the Layout Management is refactored
+        this.gridOptions.columnApi.getAllColumns().forEach((col) => {
+            const colDef = col.getColDef();
+            const colId = col.getColId();
+            const abColumn = this.api.columnApi.getColumnFromId(colId);
+            const colSetupInfo = {
+                col,
+                colDef,
+                colId,
+                abColumn,
+            };
+            shouldUpdateHeaders = this.setupColumnHeader(colSetupInfo) || shouldUpdateHeaders;
+        });
+        isChanged = isChanged || shouldUpdateHeaders;
+        if (ArrayExtensions_1.ArrayExtensions.IsNotNullOrEmpty(layout.ExpandedRowGroupValues) &&
+            this.adaptableOptions.layoutOptions.includeExpandedRowGroups) {
+            this.expandRowGroupsForValues(layout.ExpandedRowGroupValues);
+        }
+        if (isChanged) {
+            // it's important we set pivot mode
+            // before we set column state
+            // as otherwise column order is not preserved properly when
+            // going from pivoted to unpivoted layout
+            if (shouldUpdatePivoted) {
+                this.gridOptions.columnApi.setPivotMode(pivoted);
+            }
+            this.gridOptions.columnApi.setColumnState(newColState);
+            this.api.gridApi.setColumnSorts(layout.ColumnSorts);
+            this.gridOptions.columnApi.setPivotColumns(layout.PivotColumns || []);
+            // aggrid 25.1.0 introduced a bug such that a layout that has a grouped column, if the column has enableRowGroup: true but not rowGroup: true
+            // the group column is not possitioned correctly at the start of the layout
+            // see the test in layout/layout-switch/"should be able to switch from grouped to non-grouped and back"
+            // so we figured out the following line fixes the issue
+            // this.gridOptions.api.setColumnDefs(this.gridOptions.api.getColumnDefs()); //TODO find a solution for weighted averages - column floating filters are not showing
+            GridApi_setColumnDefs.call(this.gridOptions.api, this.gridOptions.api.getColumnDefs());
+            // this.updateColumnsIntoStore();// no longer needed
+        }
+        const colsToAutoSizeArray = Object.keys(colsToAutoSize);
+        if (pivoted && ((_c = (_b = this.adaptableOptions) === null || _b === void 0 ? void 0 : _b.layoutOptions) === null || _c === void 0 ? void 0 : _c.autoSizeColumnsInPivotLayout)) {
+            // when a pivoted layout loads, autosize all cols
+            requestAnimationFrame(() => {
+                this.gridOptions.columnApi.autoSizeAllColumns();
+            });
+            //but if it's also the first time the grid is loading
+            //it's not timely enough the above call, so we keep trying... I know it's ugly, we need to find a better way
+            setTimeout(() => {
+                var _a;
+                (_a = this.gridOptions.columnApi) === null || _a === void 0 ? void 0 : _a.autoSizeAllColumns();
+                setTimeout(() => {
+                    var _a;
+                    (_a = this.gridOptions.columnApi) === null || _a === void 0 ? void 0 : _a.autoSizeAllColumns();
+                }, 200);
+            }, 100);
+            return;
+        }
+        if (((_e = (_d = this.adaptableOptions) === null || _d === void 0 ? void 0 : _d.layoutOptions) === null || _e === void 0 ? void 0 : _e.autoSizeColumnsInLayout) &&
+            colsToAutoSizeArray.length) {
+            (_f = this.gridOptions.columnApi) === null || _f === void 0 ? void 0 : _f.autoSizeColumns(colsToAutoSizeArray);
+        }
+        this.forPlugins((plugin) => {
+            if (plugin.afterSetLayout) {
+                plugin.afterSetLayout(this, layout);
+            }
+        });
+        // this.api.layoutApi.fireLayoutUpdatedEvent(layout, 'UpdatedLayout');
+    }
+    /*
+     * This is the opposite of setLayout
+     */
+    updateLayoutFromGrid() {
+        const currentLayout = this.api.layoutApi.getCurrentLayout();
+        const layout = Object.assign({}, currentLayout);
+        const columnOrder = [];
+        const columnFlexes = {};
+        const pinnedColumns = {};
+        const columnSorts = [];
+        const columnState = this.gridOptions.columnApi.getColumnState();
+        let groupedColumns = [...new Array(columnState.length)];
+        let pivotedColumns = [...new Array(columnState.length)];
+        const pivotColumns = [];
+        const aggregatedColumns = {};
+        const columnWidths = columnState.reduce((acc, colState) => {
+            const { colId } = colState;
+            if (colState.sort && colState.sortIndex != null) {
+                columnSorts.push({
+                    ColumnId: colId,
+                    SortOrder: colState.sort === 'asc' ? 'Asc' : 'Desc',
+                    SortIndex: colState.sortIndex,
+                });
+            }
+            if (colState.width != null) {
+                acc[colId] = colState.width;
+            }
+            if (colState.flex != null) {
+                columnFlexes[colId] = colState.flex;
+            }
+            if (colState.pinned === 'left') {
+                pinnedColumns[colId] = 'left';
+            }
+            if (colState.pinned === 'right') {
+                pinnedColumns[colId] = 'right';
+            }
+            if (!colState.hide) {
+                columnOrder.push(colId);
+            }
+            if (colState.rowGroupIndex != null) {
+                groupedColumns[colState.rowGroupIndex] = colId;
+            }
+            if (colState.pivotIndex != null) {
+                pivotedColumns[colState.pivotIndex] = colId;
+            }
+            if (colState.aggFunc && typeof colState.aggFunc === 'string') {
+                aggregatedColumns[colId] = colState.aggFunc;
+            }
+            return acc;
+        }, {});
+        columnSorts.sort((a, b) => a.SortIndex - b.SortIndex);
+        this.gridOptions.columnApi.getPivotColumns().forEach((col) => {
+            pivotColumns.push(col.getColId());
+        });
+        groupedColumns = groupedColumns.filter((x) => !!x);
+        pivotedColumns = pivotedColumns.filter((x) => !!x);
+        layout.ColumnWidthMap = columnWidths;
+        //  layout.ColumnFlexMap = columnFlexes;
+        layout.PinnedColumnsMap = pinnedColumns;
+        layout.Columns = columnOrder;
+        layout.ColumnSorts = columnSorts;
+        layout.RowGroupedColumns = groupedColumns;
+        if (Object.keys(aggregatedColumns).length) {
+            layout.AggregationColumns = aggregatedColumns;
+        }
+        layout.EnablePivot = this.gridOptions.columnApi.isPivotMode();
+        layout.PivotColumns = pivotColumns;
+        if (this.adaptableOptions.layoutOptions.includeExpandedRowGroups) {
+            layout.ExpandedRowGroupValues = this.getExpandRowGroupsKeys();
+        }
+        //  this.api.layoutApi.fireLayoutUpdatedEvent(layout, 'UpdatedLayout');
+        this.persistLayout(layout);
+    }
+    // This method returns selected cells ONLY (if selection mode is cells or multiple cells).
+    // If the selection mode is row it will returns nothing - use the setSelectedRows() method
+    setSelectedCells() {
+        if (!this.isGridSelectable()) {
+            return undefined;
+        }
+        const selected = this.gridOptions.api.getCellRanges();
+        const columns = [];
+        const selectedCells = [];
+        if (this.api.internalApi.isGridInPivotMode()) {
+            return undefined;
+        }
+        if (selected) {
+            // we iterate for each ranges
+            selected.forEach((rangeSelection) => {
+                let shouldIncludeRange = true;
+                if (rangeSelection.startRow && rangeSelection.endRow) {
+                    let isStartRowPin = rangeSelection.startRow.rowPinned != null;
+                    let isEndRowPin = rangeSelection.endRow.rowPinned != null;
+                    // Warn user if trying to select pinned rows
+                    // If only selecting pinned rows then stop
+                    if (isStartRowPin) {
+                        if (isEndRowPin) {
+                            shouldIncludeRange = false;
+                        }
+                        LoggingHelper_1.ConsoleLogWarning('Cannot select pinned rows in AG Grid.');
+                    }
+                    if (shouldIncludeRange) {
+                        const y1 = Math.min(rangeSelection.startRow.rowIndex, rangeSelection.endRow.rowIndex);
+                        const y2 = Math.max(rangeSelection.startRow.rowIndex, rangeSelection.endRow.rowIndex);
+                        for (const column of rangeSelection.columns) {
+                            if (column != null) {
+                                const colId = column.getColId();
+                                const selectedColumn = this.api.columnApi.getColumnFromId(colId);
+                                if (selectedColumn &&
+                                    columns.find((c) => c.ColumnId == selectedColumn.ColumnId) == null) {
+                                    columns.push(selectedColumn);
+                                }
+                                for (let rowIndex = y1; rowIndex <= y2; rowIndex++) {
+                                    const rowNode = this.gridOptions.api.getModel().getRow(rowIndex);
+                                    // we used NOT to return grouped rows but I think that was wrong - if someone wants to return them then that is up to them...
+                                    // we definitely dont return pinned rows as they cannot be selected
+                                    if (rowNode && !this.isPinnedRowNode(rowNode)) {
+                                        const selectedCell = this.getGridCellFromRowNode(rowNode, colId);
+                                        selectedCells.push(selectedCell);
+                                    }
+                                }
+                            }
+                        }
+                    }
+                }
+            });
+        }
+        const selectedCellInfo = { columns: columns, gridCells: selectedCells };
+        this.api.internalApi.setSelectedCells(selectedCellInfo);
+        this._emit('CellsSelected');
+        this.agGridHelper.fireSelectionChangedEvent();
+        return selectedCellInfo;
+    }
+    setSelectedRows() {
+        if (!this.isGridSelectable()) {
+            return undefined;
+        }
+        const nodes = this.gridOptions.api.getSelectedNodes();
+        const selectedRows = [];
+        if (this.gridOptions.columnApi.isPivotMode()) {
+            //  dont perform row selection in pivot mode
+            return undefined;
+        }
+        if (ArrayExtensions_1.ArrayExtensions.IsNotNullOrEmpty(nodes)) {
+            nodes.forEach((node) => {
+                const rowInfo = {
+                    isMaster: !!(node.master != null && node.master == true),
+                    isExpanded: !!(node.expanded != null && node.expanded == true),
+                    isGroup: !!(node.group != null && node.group == true),
+                    level: node.level,
+                };
+                const gridRow = {
+                    primaryKeyValue: this.getPrimaryKeyValueFromRowNode(node),
+                    rowData: node.data,
+                    rowNode: node,
+                    rowInfo,
+                };
+                selectedRows.push(gridRow);
+            });
+        }
+        const selectedRowInfo = { gridRows: selectedRows };
+        this.api.internalApi.setSelectedRows(selectedRowInfo);
+        this.agGridHelper.fireSelectionChangedEvent();
+        return selectedRowInfo;
+    }
+    setValue(dataChangedInfo) {
+        // note: because we use rownode set data value this will cause Validation to fire
+        let newValue;
+        let dataType = this.api.columnApi.getColumnDataTypeFromColumnId(dataChangedInfo.columnId);
+        newValue =
+            dataType == Enums_1.DataType.Number ? Number(dataChangedInfo.newValue) : dataChangedInfo.newValue;
+        if (dataType == undefined) {
+            return; // no point continuing as probably a wrong  column
+        }
+        if (dataChangedInfo.rowNode) {
+            dataChangedInfo.rowNode.setDataValue(dataChangedInfo.columnId, newValue);
+        }
+        else {
+            if (this.useRowNodeLookUp) {
+                const rowNode = this.gridOptions.api.getRowNode(dataChangedInfo.primaryKeyValue);
+                if (rowNode != null) {
+                    rowNode.setDataValue(dataChangedInfo.columnId, newValue);
+                    dataChangedInfo.rowNode = rowNode;
+                }
+            }
+            else {
+                let isUpdated = false;
+                // prefer not to use this method but if we do then at least we can prevent further lookups once we find
+                this.gridOptions.api.getModel().forEachNode((rowNode) => {
+                    if (!isUpdated) {
+                        if (dataChangedInfo.primaryKeyValue == this.getPrimaryKeyValueFromRowNode(rowNode)) {
+                            rowNode.setDataValue(dataChangedInfo.columnId, newValue);
+                            dataChangedInfo.rowNode = rowNode;
+                            isUpdated = true;
+                        }
+                    }
+                });
+            }
+        }
+    }
+    cancelEdit() {
+        this.gridOptions.api.stopEditing(true);
+    }
+    getDistinctValuesForColumn(column, visibleRowsOnly, skipRowNode) {
+        let returnValues = [];
+        // this function does NOT look up for server values but actually it should...
+        // that is currently commented out in the column api function (previously in filter form)
+        const permittedValues = this.api.userInterfaceApi.getPermittedValuesForColumn(column);
+        if (ArrayExtensions_1.ArrayExtensions.IsNotNull(permittedValues)) {
+            returnValues = permittedValues.map((pv) => {
+                return {
+                    rawValue: pv,
+                    displayValue: pv,
+                    normalisedValue: pv,
+                    columnId: column.ColumnId,
+                    rowNode: undefined,
+                };
+            });
+        }
+        else {
+            if (visibleRowsOnly) {
+                this.gridOptions.api.forEachNodeAfterFilter((rowNode) => {
+                    const gridCell = this.addDistinctColumnValue(rowNode, column.ColumnId);
+                    if (gridCell && gridCell.rawValue != undefined && gridCell.rowNode !== skipRowNode) {
+                        returnValues.push(gridCell);
+                    }
+                });
+            }
+            else {
+                this.gridOptions.api.forEachNode((rowNode) => {
+                    const gridCell = this.addDistinctColumnValue(rowNode, column.ColumnId);
+                    if (gridCell && gridCell.rawValue != undefined && gridCell.rowNode !== skipRowNode) {
+                        returnValues.push(gridCell);
+                    }
+                });
+            }
+        }
+        const uniqueVals = uniqBy_1.default(returnValues, 'displayValue');
+        return uniqueVals.slice(0, this.adaptableOptions.searchOptions.maxColumnValueItemsDisplayed);
+    }
+    getColumnValueDisplayValuePairList(columnId, visibleRowsOnly, onlyIncludeIds) {
+        const returnArray = [];
+        let permittedMap = new Map();
+        // check if there are permitted column values for that column
+        // NB.  this currently contains a small bug as we dont check for visibility so if using permitted values then ALL are returned :(
+        const abColumn = this.api.columnApi.getColumnFromId(columnId);
+        const permittedValuesForColumn = this.api.userInterfaceApi.getPermittedValuesForColumn(abColumn);
+        if (ArrayExtensions_1.ArrayExtensions.IsNotNullOrEmpty(permittedValuesForColumn)) {
+            permittedValuesForColumn.forEach((pv) => {
+                permittedMap.set(pv, {
+                    rawValue: pv,
+                    displayValue: pv,
+                    normalisedValue: pv,
+                    columnId: columnId,
+                    rowNode: undefined,
+                });
+            });
+        }
+        else {
+            permittedMap = null;
+        }
+        const useRawValue = this.shouldUseRawValueForColumn(abColumn);
+        const eachFn = (rowNode, columnId, useRawValue) => {
+            if (rowNode && !this.isGroupRowNode(rowNode)) {
+                const gridCell = this.getGridCellFromRowNode(rowNode, columnId);
+                let allowed = !permittedMap || permittedMap.has(gridCell.displayValue);
+                if (allowed && onlyIncludeIds) {
+                    let id = this.getPrimaryKeyValueFromRowNode(rowNode);
+                    allowed = !!onlyIncludeIds[id];
+                }
+                if (allowed) {
+                    returnArray.push(gridCell);
+                }
+            }
+        };
+        if (visibleRowsOnly) {
+            this.gridOptions.api.forEachNodeAfterFilter((rowNode) => {
+                eachFn(rowNode, columnId, useRawValue);
+            });
+        }
+        else {
+            this.gridOptions.api.forEachNode((rowNode) => {
+                eachFn(rowNode, columnId, useRawValue);
+            });
+        }
+        return returnArray.slice(0, this.adaptableOptions.searchOptions.maxColumnValueItemsDisplayed);
+    }
+    addDistinctColumnValue(rowNode, columnId) {
+        // we do not return the values of the aggregates when in grouping mode
+        // otherwise they would appear in the filter dropdown etc....
+        if (rowNode && !this.isGroupRowNode(rowNode)) {
+            const returnValue = this.getGridCellFromRowNode(rowNode, columnId);
+            if (Helper_1.Helper.objectExists(returnValue)) {
+                return returnValue;
+            }
+        }
+        else {
+            return undefined;
+        }
+    }
+    shouldUseRawValueForColumn(column) {
+        // we need to return false if the column has a cell rendeerer i think...
+        const colDef = this.gridOptions.api.getColumnDef(column.ColumnId);
+        if (colDef && colDef.cellRenderer != null) {
+            return true;
+        }
+        if (this.api.columnApi.isFormatNumericStyleColumn(column)) {
+            return true;
+        }
+        return false;
+    }
+    getDisplayValue(id, columnId) {
+        let returnValue;
+        if (this.useRowNodeLookUp) {
+            const rowNode = this.gridOptions.api.getRowNode(id);
+            const gridCell = this.getGridCellFromRowNode(rowNode, columnId);
+            if (gridCell) {
+                returnValue = gridCell.displayValue;
+            }
+        }
+        else {
+            let foundRow = false;
+            this.gridOptions.api.getModel().forEachNode((rowNode) => {
+                if (!foundRow) {
+                    const gridCell = this.getGridCellFromRowNode(rowNode, columnId);
+                    if (gridCell && id == gridCell.primaryKeyValue) {
+                        returnValue = gridCell.displayValue;
+                    }
+                    foundRow = true;
+                }
+            });
+        }
+        return returnValue;
+    }
+    getGridCellFromRowNode(rowNode, columnId) {
+        if (rowNode == null) {
+            return undefined;
+        }
+        const pkValue = this.getPrimaryKeyValueFromRowNode(rowNode);
+        const rawValue = this.getRawValueFromRowNode(rowNode, columnId);
+        const displayValue = this.getDisplayValueFromRawValue(columnId, rawValue);
+        const normalisedvalue = this.getNormalisedValueFromRowValue(rawValue, columnId);
+        const abColumn = this.api.columnApi.getColumnFromId(columnId);
+        return {
+            rawValue: rawValue,
+            displayValue: displayValue,
+            normalisedValue: normalisedvalue,
+            columnId: columnId,
+            primaryKeyValue: pkValue,
+            rowNode: rowNode,
+        };
+    }
+    getDisplayValueFromRowNode(row, columnId) {
+        const gridCell = this.getGridCellFromRowNode(row, columnId);
+        return gridCell ? gridCell.displayValue : undefined;
+    }
+    // same as getDisplayValueFromRawValue(), but without evaluating cell renderers (only valueGetters & valueFormatters)
+    getFormattedValueFromRawValue(rawValue, columnId) {
+        return this.getDisplayValueFromRawValue(columnId, rawValue, true);
+    }
+    getDisplayValueFromRawValue(columnId, rawValue, skipCellRenderers = false) {
+        const abColumn = this.api.columnApi.getColumnFromId(columnId);
+        const isRenderedColumn = this.api.columnApi.isFormatNumericStyleColumn(abColumn);
+        if (isRenderedColumn) {
+            const colDef = this.gridOptions.api.getColumnDef(columnId);
+            if (typeof colDef.valueFormatter == 'function') {
+                return this.getFormattedValue(rawValue, columnId, colDef, colDef.valueFormatter);
+            }
+            return this.agGridHelper.getCleanValue(rawValue);
+        }
+        const isActionColumn = this.api.columnApi.isActionColumn(columnId);
+        if (isActionColumn) {
+            return this.agGridHelper.getCleanValue(rawValue);
+        }
+        const colDef = this.gridOptions.api.getColumnDef(columnId);
+        if (colDef) {
+            if (typeof colDef.valueFormatter == 'function') {
+                const formattedValue = this.getFormattedValue(rawValue, columnId, colDef, colDef.valueFormatter);
+                if (colDef.cellRenderer && !skipCellRenderers) {
+                    return this.agGridHelper.getRenderedValue(colDef, formattedValue);
+                }
+                return formattedValue || '';
+            }
+            if (colDef.cellRenderer && !skipCellRenderers) {
+                return this.agGridHelper.getRenderedValue(colDef, rawValue);
+            }
+        }
+        return this.agGridHelper.getCleanValue(rawValue);
+    }
+    getFormattedValue(rawValue, columnId, colDef, formatterFn) {
+        const column = this.gridOptions.columnApi
+            .getAllColumns()
+            .find((c) => c.getColId() == columnId);
+        const params = {
+            value: rawValue,
+            node: null,
+            data: null,
+            colDef,
+            column,
+            api: this.gridOptions.api,
+            columnApi: this.gridOptions.columnApi,
+            context: this.gridOptions.context,
+        };
+        return formatterFn(params);
+    }
+    getNormalisedValueFromRowValue(rawValue, columnId) {
+        if (rawValue === undefined || rawValue === null) {
+            return rawValue;
+        }
+        const dataType = this.api.columnApi.getColumnDataTypeFromColumnId(columnId);
+        if (dataType === 'String') {
+            return typeof rawValue !== 'string' ? String(rawValue) : rawValue;
+        }
+        if (dataType === 'Number') {
+            return typeof rawValue !== 'number' ? Number(rawValue) : rawValue;
+        }
+        if (dataType === 'Boolean') {
+            return typeof rawValue !== 'boolean' ? Boolean(rawValue) : rawValue;
+        }
+        if (dataType === 'Date') {
+            return rawValue instanceof Date ? rawValue : new Date(rawValue);
+        }
+        return rawValue;
+    }
+    getRawValueFromRowNode(rowNode, columnId) {
+        return this.gridOptions.api.getValue(columnId, rowNode);
+    }
+    getDataRowFromRowNode(rowNode) {
+        return rowNode != null && rowNode != undefined ? rowNode.data : undefined;
+    }
+    getRowNodeForPrimaryKey(primaryKeyValue) {
+        if (this.useRowNodeLookUp) {
+            return this.gridOptions.api.getRowNode(primaryKeyValue);
+        }
+        else {
+            this.gridOptions.api.getModel().forEachNode((rowNode) => {
+                if (primaryKeyValue == this.getPrimaryKeyValueFromRowNode(rowNode)) {
+                    return rowNode;
+                }
+            });
+        }
+    }
+    getRowNodesForPrimaryKeys(primaryKeyValues) {
+        let rowNodes = [];
+        if (this.useRowNodeLookUp) {
+            primaryKeyValues.forEach((pkValue) => {
+                const rowNode = this.gridOptions.api.getRowNode(pkValue);
+                if (rowNode) {
+                    rowNodes.push(rowNode);
+                }
+            });
+        }
+        else {
+            primaryKeyValues.forEach((pkValue) => {
+                let foundRow = false;
+                this.gridOptions.api.getModel().forEachNode((rowNode) => {
+                    if (!foundRow && pkValue == this.getPrimaryKeyValueFromRowNode(rowNode)) {
+                        rowNodes.push(rowNode);
+                        foundRow = true;
+                    }
+                });
+            });
+        }
+        return rowNodes;
+    }
+    forAllRowNodesDo(func) {
+        this.gridOptions.api.getModel().forEachNode((rowNode) => {
+            func(rowNode);
+        });
+    }
+    forAllVisibleRowNodesDo(func) {
+        this.gridOptions.api.forEachNodeAfterFilterAndSort((rowNode, rowIndex) => {
+            func(rowNode, rowIndex);
+        });
+    }
+    getVisibleRowNodes() {
+        let rowNodes = [];
+        this.gridOptions.api.forEachNodeAfterFilterAndSort((rowNode, rowIndex) => {
+            rowNodes.push(rowNode);
+        });
+        return rowNodes;
+    }
+    selectNodes(rowNodes, clearSelection) {
+        if (ArrayExtensions_1.ArrayExtensions.IsNotNullOrEmpty(rowNodes)) {
+            rowNodes.forEach((node) => this.selectNode(node, clearSelection));
+        }
+    }
+    deSelectNodes(rowNodes, clearSelection) {
+        if (ArrayExtensions_1.ArrayExtensions.IsNotNullOrEmpty(rowNodes)) {
+            rowNodes.forEach((node) => this.deSelectNode(node, clearSelection));
+        }
+    }
+    selectNode(rowNode, clearSelection) {
+        if (!rowNode) {
+            LoggingHelper_1.LogAdaptableError('No node to select');
+            return;
+        }
+        rowNode.setSelected(true, clearSelection);
+    }
+    deSelectNode(rowNode, clearSelection) {
+        if (!rowNode) {
+            LoggingHelper_1.LogAdaptableError('No node to deselect');
+            return;
+        }
+        rowNode.setSelected(false, clearSelection);
+    }
+    selectCells(columnIds, startNode, endNode) {
+        const cellRangeParams = {
+            rowStartIndex: startNode.rowIndex,
+            rowEndIndex: endNode.rowIndex,
+            columns: columnIds,
+        };
+        this.gridOptions.api.addCellRange(cellRangeParams);
+    }
+    isRowNodeVisible(rowNode) {
+        // sure this can be done better!
+        let isVisible = false;
+        this.gridOptions.api.forEachNodeAfterFilter((rd) => {
+            if (rd == rowNode) {
+                isVisible = true;
+            }
+        });
+        return isVisible;
+    }
+    redrawBody() {
+        this.gridOptions.api.redrawRows();
+        this._emit('GridRefreshed');
+    }
+    redrawHeader() {
+        this.gridOptions.api.refreshHeader();
+    }
+    redrawRow(rowNode) {
+        // in order to get a fresh reference to rowNode
+        // rowNode = this.getRowNodeForPrimaryKey(this.getPrimaryKeyValueFromRowNode(rowNode));
+        // if (!rowNode) {
+        //   return;
+        // }
+        const redrawRowsParams = {
+            rowNodes: [rowNode],
+        };
+        try {
+            this.gridOptions.api.redrawRows(redrawRowsParams);
+        }
+        catch (ex) {
+            LoggingHelper_1.ConsoleLogError('ag-grid redrawRows was unable to find some row nodes. Tried to redraw row node: ', rowNode, ex);
+        }
+    }
+    refreshCells(rowNodes, columns, forceUpdate) {
+        const api = this.gridOptions.api;
+        // in order to get a fresh reference to rowNodes
+        // rowNodes = this.getRowNodesForPrimaryKeys(
+        //   rowNodes.map((rowNode) => this.getPrimaryKeyValueFromRowNode(rowNode))
+        // );
+        const refreshCellParams = {
+            rowNodes,
+            columns: columns,
+            force: forceUpdate,
+        };
+        api.refreshCells(refreshCellParams);
+    }
+    jumpToRow(rowNode) {
+        this.gridOptions.api.ensureNodeVisible(rowNode, 'middle');
+    }
+    jumpToColumn(columnId) {
+        this.gridOptions.api.ensureColumnVisible(columnId);
+    }
+    jumpToCell(columnId, rowNode) {
+        this.jumpToRow(rowNode);
+        this.jumpToColumn(columnId);
+    }
+    getColDefsForSpecialColumns() {
+        return [
+            ...this.getColDefsForCalculatedColumns(),
+            ...this.getColDefsForActionColumns(),
+            ...this.getColDefsForFreeTextColumns(),
+        ];
+    }
+    getColDefsForFreeTextColumns() {
+        let filterable = this.api.internalApi.getAdaptableOptions().searchOptions
+            .enableFilterOnSpecialColumns;
+        return this.api.freeTextColumnApi.getAllFreeTextColumn().map((freeTextColumn) => {
+            const dataTypeEditor = freeTextColumn.DataType === 'Number'
+                ? AdaptableNumberEditor_1.AdaptableNumberEditor
+                : freeTextColumn.DataType === 'Date'
+                    ? AdaptableDateEditor_1.AdaptableDateEditor
+                    : null;
+            LoggingHelper_1.LogAdaptableInfo('Setting up FreeText Column: ' + freeTextColumn.ColumnId);
+            return {
+                headerName: freeTextColumn.FriendlyName || freeTextColumn.ColumnId,
+                colId: freeTextColumn.ColumnId,
+                editable: true,
+                hide: true,
+                filter: filterable,
+                sortable: true,
+                resizable: true,
+                enableRowGroup: true,
+                cellEditor: dataTypeEditor !== null && dataTypeEditor !== void 0 ? dataTypeEditor : (freeTextColumn.TextEditor && freeTextColumn.TextEditor == 'Large'
+                    ? 'agLargeTextCellEditor'
+                    : 'agTextCellEditor'),
+                type: [
+                    GeneralConstants_1.AB_SPECIAL_COLUMN,
+                    this.agGridHelper.getAgGridDataType(freeTextColumn.DataType),
+                ],
+                valueSetter: (params) => {
+                    return (params.data[freeTextColumn.ColumnId] = params.newValue);
+                },
+                cellRenderer: freeTextColumn.DataType && freeTextColumn.DataType == 'Boolean'
+                    ? this.agGridHelper.createCheckboxRendererComp(freeTextColumn.ColumnId, false)
+                    : undefined,
+                valueGetter: (params) => this.api.freeTextColumnApi.getFreeTextColumnValueFromRowNode(freeTextColumn, params.node),
+            };
+        });
+    }
+    setupColumnValueGetter({ col }) {
+        // need this here if we want plugins to intercept
+        this.setColDefProperty(col, 'valueGetter', (userValue) => {
+            return userValue;
+        });
+    }
+    setupColumnAggFunc({ col }) {
+        // need this here if we want plugins to intercept
+        const financeApi = this.api.pluginsApi.getFinancePluginApi();
+        // the 'aggFunc' slows significantly the init process, so we evaluate it only if it is really necessary: iff we have a weighted average defined
+        if (financeApi && !!financeApi.getPluginOptions().weightedAverageColumns) {
+            this.setColDefProperty(col, 'aggFunc', (userValue) => {
+                return userValue;
+            });
+        }
+    }
+    getColDefsForActionColumns() {
+        return this.api.userInterfaceApi.getAllActionColumn().map((actionColumn) => {
+            const newColDef = {
+                headerName: actionColumn.friendlyName ? actionColumn.friendlyName : actionColumn.columnId,
+                colId: actionColumn.columnId,
+                editable: false,
+                hide: false,
+                filter: false,
+                sortable: false,
+                resizable: true,
+                enableRowGroup: false,
+                cellRenderer: ActionColumnRenderer_1.ActionColumnRenderer,
+                type: [GeneralConstants_1.AB_SPECIAL_COLUMN, 'abColDefObject'],
+            };
+            LoggingHelper_1.LogAdaptableInfo('Setting up Action Column: ' + actionColumn.columnId);
+            return newColDef;
+        });
+    }
+    updateColDefsForSpecialColumns() {
+        const specialColDefs = this.getColDefsForSpecialColumns();
+        const isUserColDef = (colDef) => {
+            const { type } = colDef;
+            if (type === GeneralConstants_1.AB_SPECIAL_COLUMN || (Array.isArray(type) && type.includes(GeneralConstants_1.AB_SPECIAL_COLUMN))) {
+                return false;
+            }
+            return true;
+        };
+        // const userColDefs = this.gridOptions.columnApi
+        //   .getAllColumns()
+        // .map((col) => col.getColDef())
+        const userColDefs = this.getGroupAndColumnDefs().filter(isUserColDef);
+        const allDefs = [...userColDefs, ...specialColDefs];
+        this.safeSetColDefs(allDefs);
+        this.setLayout();
+    }
+    getColDefsForCalculatedColumns() {
+        return this.api.calculatedColumnApi.getAllCalculatedColumn().map((calculatedColumn) => {
+            var _a;
+            if (!calculatedColumn.CalculatedColumnSettings) {
+                let filterable = this.adaptableOptions.searchOptions.enableFilterOnSpecialColumns
+                    ? this.adaptableOptions.searchOptions.enableFilterOnSpecialColumns
+                    : true;
+                calculatedColumn.CalculatedColumnSettings = ObjectFactory_1.CreateEmptyCalculatedColumn(filterable).CalculatedColumnSettings;
+            }
+            if (!calculatedColumn.CalculatedColumnSettings.DataType) {
+                calculatedColumn.CalculatedColumnSettings.DataType = this.CalculatedColumnExpressionService.GetCalculatedColumnDataType((_a = calculatedColumn.Query) === null || _a === void 0 ? void 0 : _a.ScalarExpression);
+            }
+            const newColDef = {
+                headerName: calculatedColumn.FriendlyName
+                    ? calculatedColumn.FriendlyName
+                    : calculatedColumn.ColumnId,
+                colId: calculatedColumn.ColumnId,
+                hide: true,
+                editable: false,
+                width: calculatedColumn.CalculatedColumnSettings.Width,
+                enableValue: calculatedColumn.CalculatedColumnSettings.Aggregatable,
+                filter: calculatedColumn.CalculatedColumnSettings.Filterable,
+                floatingFilter: calculatedColumn.CalculatedColumnSettings.Filterable,
+                resizable: calculatedColumn.CalculatedColumnSettings.Resizable,
+                enableRowGroup: calculatedColumn.CalculatedColumnSettings.Groupable,
+                sortable: calculatedColumn.CalculatedColumnSettings.Sortable,
+                enablePivot: calculatedColumn.CalculatedColumnSettings.Pivotable,
+                type: [
+                    GeneralConstants_1.AB_SPECIAL_COLUMN,
+                    this.agGridHelper.getAgGridDataType(calculatedColumn.CalculatedColumnSettings.DataType),
+                ],
+                valueGetter: (params) => {
+                    var _a;
+                    return this.CalculatedColumnExpressionService.ComputeExpressionValue((_a = calculatedColumn.Query) === null || _a === void 0 ? void 0 : _a.ScalarExpression, params.node);
+                },
+            };
+            if (calculatedColumn.CalculatedColumnSettings.ShowToolTip != null &&
+                calculatedColumn.CalculatedColumnSettings.ShowToolTip == true) {
+                newColDef.tooltipValueGetter = () => {
+                    var _a;
+                    return (_a = calculatedColumn.Query) === null || _a === void 0 ? void 0 : _a.ScalarExpression;
+                };
+            }
+            LoggingHelper_1.LogAdaptableInfo('Setting up Calculated Column: ' + calculatedColumn.ColumnId);
+            return newColDef;
+        });
+    }
+    isRegularColDef(colDef) {
+        return colDef.children === undefined;
+    }
+    isGroupColDef(colDef) {
+        return colDef.children !== undefined;
+    }
+    getColDefs() {
+        let allColDefs = this.getGroupAndColumnDefs();
+        let justColDefs = [];
+        allColDefs.forEach((cd) => {
+            if (this.isRegularColDef(cd)) {
+                justColDefs.push(cd);
+            }
+        });
+        return justColDefs;
+    }
+    getGroupedColDefs() {
+        let allColDefs = this.getGroupAndColumnDefs();
+        let justGroupColDefs = [];
+        allColDefs.forEach((cd) => {
+            if (this.isGroupColDef(cd)) {
+                justGroupColDefs.push(cd);
+            }
+        });
+        return justGroupColDefs;
+    }
+    getFirstRowNode() {
+        // Probably a better way but its only used by Calccolumn on creation so not urgent
+        let rowNode;
+        let foundNode = false;
+        this.gridOptions.api.forEachNode((node) => {
+            if (!foundNode) {
+                if (!node.group) {
+                    rowNode = node;
+                }
+            }
+        });
+        return rowNode;
+    }
+    destroy(config) {
+        var _a, _b, _c, _d, _e, _f;
+        if (this.gridOptions && this.gridOptions.api) {
+            this.gridOptions.api.__adaptable = null;
+            this.gridOptions.api.setColumnDefs = GridApi_setColumnDefs;
+            this.gridOptions.getRowStyle = null;
+            if (config && config.destroyApi === false) {
+            }
+            else {
+                this.gridOptions.api.destroy();
+            }
+        }
+        this.colDefPropertyCache = null;
+        this.gridOptionsPropertyCache = null;
+        this.currentColumnDefs = null;
+        this.rowListeners = null;
+        this.emitter.clearListeners();
+        this.emitter = null;
+        this._adaptableReady = false;
+        Adaptable.dismissInstance(this);
+        const abContainerElement = this.getadaptableContainerElement();
+        if (config && !config.unmount) {
+            return;
+        }
+        if (abContainerElement != null) {
+            ReactDOM.unmountComponentAtNode(abContainerElement);
+        }
+        (_a = this.CalculatedColumnExpressionService) === null || _a === void 0 ? void 0 : _a.destroy();
+        (_b = this.DataService) === null || _b === void 0 ? void 0 : _b.destroy();
+        (_c = this.EntitlementService) === null || _c === void 0 ? void 0 : _c.destroy();
+        (_d = this.ReportService) === null || _d === void 0 ? void 0 : _d.destroy();
+        (_e = this.ModuleService) === null || _e === void 0 ? void 0 : _e.destroy();
+        (_f = this.ValidationService) === null || _f === void 0 ? void 0 : _f.destroy();
+    }
+    // really really need to do this properly but as a temp fix lets create a default style for when no data
+    getDefaultIPPStyle() {
+        return {
+            Header: {
+                headerColor: '#000000',
+                headerBackColor: '#f5f7f7',
+                headerFontFamily: 'sans-serif',
+                headerFontSize: '12px',
+                headerFontStyle: 'normal',
+                headerFontWeight: '400',
+                height: 65,
+                Columns: this.api.columnApi.getColumns().map((col) => {
+                    return {
+                        columnFriendlyName: col.FriendlyName,
+                        width: 200,
+                        textAlign: 'start',
+                    };
+                }),
+            },
+            Row: {
+                color: '#000000',
+                backColor: '#ffffff',
+                altBackColor: '#fcfdfe',
+                fontFamily: 'sans-serif',
+                fontSize: '12px',
+                fontStyle: 'normal',
+                fontWeight: '400',
+                height: 30,
+                Columns: this.api.columnApi.getColumns().map((col) => {
+                    return {
+                        columnFriendlyName: col.FriendlyName,
+                        width: 200,
+                        textAlign: 'start',
+                    };
+                }),
+            },
+        };
+    }
+    // This horrible method is used to get the grid style for when we export to ipushpull
+    // We need to find a better implementation
+    getCurrentIPPStyle() {
+        return this.agGridHelper.getCurrentIPPStyle();
+    }
+    getadaptableContainerElement() {
+        if (!this.abContainerElement) {
+            let containerOptionsContainer = this.adaptableOptions.containerOptions.adaptableContainer;
+            this.abContainerElement =
+                typeof containerOptionsContainer === 'string'
+                    ? document.getElementById(containerOptionsContainer)
+                    : containerOptionsContainer;
+            if (!this.abContainerElement) {
+                let oldContainer = document.getElementById('adaptableBlotter');
+                if (oldContainer) {
+                    LoggingHelper_1.LogAdaptableWarning(`
+!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
+!!!!! The old default container element for Adaptable was "#adaptableBlotter", configured via 'containerOptions.adaptableContainer="adaptableBlotter"'.
+!!!!! Seems like you haven't updated your html container selector, so we're falling back to using that one.
+!!!!!
+!!!!! To make this warning go away, update your html structure and make sure you have an element with id="adaptable" in your app!
+!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
+`);
+                    this.abContainerElement = oldContainer;
+                }
+            }
+        }
+        return this.abContainerElement;
+    }
+    getGridContainerElement() {
+        if (!this.gridContainerElement) {
+            this.gridContainerElement =
+                typeof this.adaptableOptions.containerOptions.vendorContainer === 'string'
+                    ? document.getElementById(this.adaptableOptions.containerOptions.vendorContainer)
+                    : this.adaptableOptions.containerOptions.vendorContainer;
+        }
+        return this.gridContainerElement;
+    }
+    initInternalGridLogic() {
+        LoggingHelper_1.LogAdaptableInfo(`Initializing InternalGridLogic...`);
+        if (this.abContainerElement == null) {
+            this.abContainerElement = this.getadaptableContainerElement();
+        }
+        if (this.abContainerElement == null) {
+            if (typeof this.adaptableOptions.containerOptions.adaptableContainer === 'string') {
+                LoggingHelper_1.ConsoleLogError(`There is no DIV with id="${this.adaptableOptions.containerOptions.adaptableContainer}" so cannot render Adaptable`);
+            }
+            else {
+                LoggingHelper_1.ConsoleLogError(`No valid adaptableContainer found to render Adaptable`, this.adaptableOptions.containerOptions.adaptableContainer);
+            }
+            return;
+        }
+        const gridContainerElement = this.getGridContainerElement();
+        if (gridContainerElement) {
+            gridContainerElement.addEventListener('keydown', (event) => this._emit('KeyDown', event));
+        }
+        /*********************
+         * AG Grid EVENTS
+         * AG Grid provide a numer of events - we listen to many of them and react accordingly
+         * We often group many of these events together where we wish the grid to behave identically for all changes
+         * for each set - please provide a reason and use case
+         **********************/
+        /**
+         * Use Case: AG Grid columns have changed
+         * Action: Set Columns in store and filter grid
+         */
+        const columnEventsThatTriggersStateChange = [
+            all_modules_1.Events.EVENT_COLUMN_MOVED,
+            all_modules_1.Events.EVENT_GRID_COLUMNS_CHANGED,
+            all_modules_1.Events.EVENT_COLUMN_EVERYTHING_CHANGED,
+            all_modules_1.Events.EVENT_DISPLAYED_COLUMNS_CHANGED,
+            all_modules_1.Events.EVENT_COLUMN_VISIBLE,
+            all_modules_1.Events.EVENT_NEW_COLUMNS_LOADED,
+        ];
+        this.gridOptions.api.addGlobalListener((type) => {
+            if (columnEventsThatTriggersStateChange.indexOf(type) > -1) {
+                this.debouncedSetColumnIntoStore();
+                this.debouncedFilterGrid();
+            }
+        });
+        /**
+         * Use Case: initial data has been displayed in grid
+         * Action1: Set the Layout
+         * Action2: Ensure that we have set column data types
+         * Note: Deals with scenario where the data is provided to AdapTable after grid has been setup
+         */
+        this.gridOptions.api.addEventListener(all_modules_1.Events.EVENT_FIRST_DATA_RENDERED, () => {
+            this.checkColumnsDataTypeSet();
+            this.setLayout();
+        });
+        /**
+         * Use Case: User has started to edit a readonly cell
+         * Action1: Stop editing immediately
+         * Note: Deals only with user edits and not ticking data (not a problem)
+         */
+        this.gridOptions.api.addEventListener(all_modules_1.Events.EVENT_CELL_EDITING_STARTED, (params) => {
+            if (this.gridOptions.columnApi.isPivotMode()) {
+                return;
+            }
+            const cellEditableFn = this.adaptableOptions.editOptions.isCellEditable;
+            if (cellEditableFn) {
+                let gridCell = this.getGridCellFromRowNode(params.node, params.column.getColId());
+                let isEditable = cellEditableFn(gridCell, params.node);
+                if (!isEditable) {
+                    this.gridOptions.api.stopEditing();
+                }
+            }
+        });
+        /**
+         * Use Case: Entered or Left Pivot Mode
+         * Action 1: Autosize pivot columns when entering pivot mode (if autosize pivot in Layout is true)
+         * Action 2: Set pivot mode on / off in api as necessary
+         */
+        this.gridOptions.api.addEventListener(all_modules_1.Events.EVENT_COLUMN_PIVOT_MODE_CHANGED, (params) => {
+            if (params.type == 'columnPivotModeChanged' &&
+                params.columnApi != null &&
+                params.columnApi.columnController != null &&
+                params.columnApi.columnController.pivotMode == true) {
+                if (this.adaptableOptions.layoutOptions.autoSizeColumnsInPivotLayout == true) {
+                    this.gridOptions.columnApi.autoSizeAllColumns();
+                }
+                this.api.internalApi.setPivotModeOn();
+            }
+            else {
+                this.api.internalApi.setPivotModeOff();
+            }
+        });
+        /**
+         * Use Case: A pivot column has changed
+         * Action: Autosize pivot columns (if autosize pivot in Layout is true)
+         */
+        this.gridOptions.api.addEventListener(all_modules_1.Events.EVENT_COLUMN_PIVOT_CHANGED, (params) => {
+            if (params.type == 'columnPivotChanged' &&
+                params.columnApi != null &&
+                params.columnApi.columnController != null &&
+                params.columnApi.columnController.pivotMode == true) {
+                if (this.adaptableOptions.layoutOptions.autoSizeColumnsInPivotLayout == true) {
+                    this.gridOptions.columnApi.autoSizeAllColumns();
+                }
+            }
+        });
+        /**
+         * Use Case: Things have changed in the grid that require the Layout to be saved
+         * Action: Save the Layout (on a debounce)
+         */
+        const columnEventsThatTriggersAutoLayoutSave = [
+            all_modules_1.Events.EVENT_COLUMN_PINNED,
+            all_modules_1.Events.EVENT_COLUMN_PIVOT_CHANGED,
+            all_modules_1.Events.EVENT_COLUMN_PIVOT_MODE_CHANGED,
+            all_modules_1.Events.EVENT_DISPLAYED_COLUMNS_CHANGED,
+            all_modules_1.Events.EVENT_SORT_CHANGED,
+            all_modules_1.Events.EVENT_COLUMN_ROW_GROUP_CHANGED,
+            all_modules_1.Events.EVENT_ROW_GROUP_OPENED,
+            all_modules_1.Events.EVENT_COLUMN_VALUE_CHANGED,
+        ];
+        this.gridOptions.api.addGlobalListener((type) => {
+            if (columnEventsThatTriggersAutoLayoutSave.indexOf(type) > -1) {
+                this.debouncedSaveGridLayout();
+            }
+        });
+        /**
+         * Use Case: A visible Column has become row grouped and 'hideColumnWhenGrouped' is true
+         * Action: Make the column invisible
+         */
+        this.gridOptions.api.addEventListener(all_modules_1.Events.EVENT_COLUMN_ROW_GROUP_CHANGED, (params) => {
+            if (this.api.internalApi.isGridInPivotMode()) {
+                return;
+            }
+            if (this.adaptableOptions.generalOptions.hideColumnWhenGrouped === true &&
+                params.source !== 'api') {
+                params.columns.forEach((col) => {
+                    if (col.isVisible()) {
+                        this.api.columnApi.hideColumn(col.getColId());
+                    }
+                });
+            }
+        });
+        /**
+         * Use Case: A Column has finished being resized
+         * Action 1: Save the Layout (on a debounce)
+         * Action 2: Emit the internal ColumnResized event - used by Sparkline Column (in Charts)
+         */
+        this.gridOptions.api.addEventListener(all_modules_1.Events.EVENT_COLUMN_RESIZED, (params) => {
+            if (params.finished == true && params.type == 'columnResized' && params.column) {
+                this._emit('ColumnResized', params.column.getColId());
+                this.debouncedSaveGridLayout();
+            }
+        });
+        /**
+         * Use Case: Row Selection has changed
+         * Action: Set Selected Rows (on a debeounce)
+         */
+        const columnEventsThatTriggerSetRowSelection = [
+            all_modules_1.Events.EVENT_ROW_GROUP_OPENED,
+            all_modules_1.Events.EVENT_SELECTION_CHANGED,
+            all_modules_1.Events.EVENT_ROW_SELECTED,
+        ];
+        this.gridOptions.api.addGlobalListener((type) => {
+            if (ArrayExtensions_1.ArrayExtensions.ContainsItem(columnEventsThatTriggerSetRowSelection, type)) {
+                this.debouncedSetSelectedRows();
+            }
+        });
+        /**
+         * Use Case: User has selected a range of cells
+         * Action: Set Selected Cells (on a debounce)
+         */
+        this.gridOptions.api.addEventListener(all_modules_1.Events.EVENT_RANGE_SELECTION_CHANGED, (params) => {
+            if (params.finished == true) {
+                this.debouncedSetSelectedCells();
+            }
+        });
+        /**
+         * Use Case: Sort has changed in the Grid
+         * Action1: Update AdapTable Sort Info
+         * Action2: Set Selected Cells (on a debounce)
+         */
+        this.gridOptions.api.addEventListener(all_modules_1.Events.EVENT_SORT_CHANGED, (params) => {
+            this.onSortChanged();
+            this.debouncedSetSelectedCells();
+        });
+        const showGroupingTotalsAsHeader = this.adaptableOptions.generalOptions
+            .showGroupingTotalsAsHeader;
+        /**
+         * Use Case: Model has updated
+         * Action: If user has set to see grouping totals as header create a pinned row (bit of a hack)
+         */
+        this.gridOptions.api.addEventListener(all_modules_1.Events.EVENT_MODEL_UPDATED, (params) => {
+            if (showGroupingTotalsAsHeader) {
+                if (params && params.api) {
+                    const pinnedData = params.api.getPinnedTopRow(0);
+                    const model = params.api.getModel();
+                    const rootNode = model.getRootNode();
+                    if (!pinnedData) {
+                        params.api.setPinnedTopRowData([rootNode.aggData]);
+                    }
+                    else {
+                        pinnedData.updateData(rootNode.aggData);
+                    }
+                }
+            }
+        });
+        /**
+         * Row and Cell listeners created in 2020
+         * These have supplanted many of the events we previously had and simplified things
+         */
+        this.rowListeners = {
+            dataChanged: (event) => {
+                this.onRowDataChanged({
+                    rowNode: event.node,
+                    oldData: event.oldData,
+                    newData: event.newData,
+                });
+            },
+            cellChanged: (event) => {
+                if (event.column) {
+                    this.onCellDataChanged({
+                        rowNode: event.node,
+                        oldValue: event.oldValue,
+                        newValue: event.newValue,
+                        colId: event.column.colId,
+                    });
+                }
+            },
+        };
+        /**
+         * AgGrid does not expose Events.EVENT_ROW_DATA_CHANGED
+         * so we have to override `dispatchLocalEvent`
+         * and hook our own functionality into it
+         */
+        RowNodeProto.dispatchLocalEvent = function (event) {
+            const node = event.node;
+            const result = RowNode_dispatchLocalEvent.apply(this, arguments);
+            // we don't know from which instance of aggrid this is coming,
+            // as this fn is shared by all instances
+            if (node) {
+                Adaptable.forEachAdaptable((adaptable) => {
+                    if (node.gridApi !== adaptable.gridOptions.api) {
+                        // the event is coming from another aggrid instance
+                        // so IGNORE IT
+                        return;
+                    }
+                    // we're on the correct instance, so do this
+                    const fn = adaptable.rowListeners ? adaptable.rowListeners[event.type] : null;
+                    if (fn) {
+                        fn(event);
+                    }
+                });
+            }
+            return result;
+        };
+        // We plug our filter mechanism and if there is already something like external widgets... we save ref to the function
+        const originalisExternalFilterPresent = this.gridOptions.isExternalFilterPresent;
+        this.gridOptions.isExternalFilterPresent = () => {
+            const columnFilters = this.api.filterApi.getAllColumnFilter();
+            const isFilterActive = ArrayExtensions_1.ArrayExtensions.IsNotNullOrEmpty(columnFilters);
+            if (isFilterActive) {
+                // used in particular at init time to show the filter icon correctly
+                for (const colFilter of columnFilters) {
+                    const agGridCol = this.gridOptions.columnApi.getColumn(colFilter.ColumnId);
+                    if (agGridCol && !agGridCol.isFilterActive()) {
+                        agGridCol.setFilterActive(true);
+                    }
+                }
+            }
+            else {
+                (this.gridOptions.columnApi.getAllColumns() || []).forEach((col) => {
+                    if (col.isFilterActive()) {
+                        col.setFilterActive(false);
+                    }
+                });
+            }
+            const isQueryActive = StringExtensions_1.StringExtensions.IsNotNullOrEmpty(this.api.queryApi.getCurrentQuery());
+            // it means that originaldoesExternalFilterPass will be called so we reinit that collection
+            return (isFilterActive ||
+                isQueryActive ||
+                (originalisExternalFilterPresent ? originalisExternalFilterPresent() : false));
+        };
+        const originaldoesExternalFilterPass = this.gridOptions.doesExternalFilterPass;
+        const evaluateQueryOnClient = !this.api.internalApi.isServerSearchOptionSet('Query');
+        const evaluateFilterOnClient = !this.api.internalApi.isServerSearchOptionSet('Filter');
+        this.gridOptions.doesExternalFilterPass = (node) => {
+            // first we assess Query (if its running locally)
+            if (evaluateQueryOnClient && !this.isGroupRowNode(node)) {
+                const currentQuery = this.api.queryApi.getCurrentQuery();
+                if (currentQuery) {
+                    const isCurrentQueryValid = this.api.queryApi.isValidBooleanQuery(currentQuery, `Invalid CurrentQuery '${currentQuery}'`);
+                    if (!isCurrentQueryValid ||
+                        !this.api.internalApi
+                            .getExpressionService()
+                            .evaluateBooleanExpression(currentQuery, node)) {
+                        return false;
+                    }
+                }
+            }
+            try {
+                // we then assess filters (if running locally)
+                if (evaluateFilterOnClient) {
+                    const columnFilters = this.api.filterApi.getAllColumnFilter();
+                    if (columnFilters.length > 0) {
+                        for (const columnFilter of columnFilters) {
+                            if (!this.api.filterApi.evaluateColumnFilter(columnFilter, node)) {
+                                return false;
+                            }
+                        }
+                    }
+                }
+            }
+            catch (ex) {
+                LoggingHelper_1.LogAdaptableError(ex);
+                return false;
+            }
+            return originaldoesExternalFilterPass ? originaldoesExternalFilterPass(node) : true;
+        };
+        // Build the COLUMN HEADER MENU.  Note that we do this EACH time the menu is opened (as items can change)
+        const originalgetMainMenuItems = this.gridOptions.getMainMenuItems;
+        this.gridOptions.getMainMenuItems = (params) => {
+            // couldnt find a way to listen for menu close. There is a Menu Item Select, but you can also close menu from filter and clicking outside menu....
+            return this.agGridMenuHelper.buildColumnMenu(params, originalgetMainMenuItems);
+        };
+        // Build the CONTEXT MENU.  Again we do this each time a cell is right clicked as its context-sensitive
+        const originalgetContextMenuItems = this.gridOptions.getContextMenuItems;
+        this.gridOptions.getContextMenuItems = (params) => {
+            return this.agGridMenuHelper.buildContextMenu(params, originalgetContextMenuItems);
+        };
+        this.prepareGrid();
+    }
+    buildStandaloneColumnHeader(adaptableColumn) {
+        return this.agGridMenuHelper.buildStandaloneColumnHeader(adaptableColumn);
+    }
+    prepareGrid() {
+        LoggingHelper_1.LogAdaptableInfo('Preparing grid...');
+        // add any special renderers, display formats, custom sorts and apply the theme
+        // then do any final rendering required, filter the grid and - to be on the safe set - redraw
+        try {
+            this.updateColDefsForSpecialColumns();
+            this.applyCurrentTheme();
+            this.applyFinalRendering();
+            this.applyGridFiltering();
+        }
+        catch (ex) {
+            LoggingHelper_1.ConsoleLogError('AgGrid setup failed');
+            LoggingHelper_1.ConsoleLogError(ex);
+        }
+    }
+    setupColumns() {
+        const cols = this.gridOptions.columnApi.getAllColumns();
+        cols.map((c) => c.getColDef()).forEach(assignColId);
+        // this needs to be here, before the other setup below
+        // so the setup methods below reference the correct columns in adaptable store
+        this.updateColumnsIntoStore();
+        cols.forEach((col) => {
+            const colDef = col.getColDef();
+            const colId = col.getColId();
+            const abColumn = this.api.columnApi.getColumnFromId(colId);
+            const colSetupInfo = {
+                col,
+                colDef,
+                colId,
+                abColumn,
+            };
+            this.setupColumnCellRenderer(colSetupInfo);
+            this.setupColumnCellStyle(colSetupInfo);
+            this.setupColumnCellClass(colSetupInfo);
+            this.setupColumnTooltipValueGetter(colSetupInfo);
+            this.setupColumnTooltipField(colSetupInfo);
+            this.setupColumnValueGetter(colSetupInfo);
+            this.setupColumnAggFunc(colSetupInfo);
+            this.setupColumnFilter(colSetupInfo);
+            this.setupColumnFloatingFilter(colSetupInfo);
+            this.setupColumnValueFormatter(colSetupInfo);
+            this.setupColumnValueSetter(colSetupInfo);
+            this.setupColumnComparator(colSetupInfo);
+            this.setupColumnCellEditor(colSetupInfo);
+            this.setupColumnHeader(colSetupInfo);
+        });
+        this.setupRowStyling();
+        // setupAggregationColumnHeaders() is executed on every setLayout()
+        // this is safe because setLayout() is guaranteed to run at startup
+        // this is required because every setLayout() may override the property
+        //this.setupAggregationColumnHeaders();
+        this.redrawBody();
+        this.redrawHeader();
+    }
+    setGridOptionsProperty(propertyName, propertyGetter) {
+        const userKey = `user.${propertyName}`;
+        const adaptableKey = `adaptable.${propertyName}`;
+        const value = this.gridOptions[propertyName];
+        const isUserDefined = value !== this.gridOptionsPropertyCache.get(adaptableKey);
+        if (isUserDefined) {
+            this.gridOptionsPropertyCache.set(userKey, value);
+        }
+        const userValue = this.gridOptionsPropertyCache.get(userKey);
+        const adaptableValue = propertyGetter(userValue);
+        if (adaptableValue != null) {
+            this.gridOptionsPropertyCache.set(adaptableKey, adaptableValue);
+        }
+        this.gridOptions[propertyName] = adaptableValue !== null && adaptableValue !== void 0 ? adaptableValue : userValue;
+    }
+    setColDefProperty(col, propertyName, propertyGetter) {
+        const colId = col.getColId();
+        const colDef = col.getColDef();
+        const colSetupInfo = {
+            col,
+            colDef,
+            colId,
+        };
+        const userKey = `user.${colId}.${propertyName}`;
+        const adaptableKey = `adaptable.${colId}.${propertyName}`;
+        const value = colDef[propertyName];
+        const isUserDefined = value !== this.colDefPropertyCache.get(adaptableKey);
+        if (isUserDefined) {
+            this.colDefPropertyCache.set(userKey, value);
+        }
+        const userValue = this.colDefPropertyCache.get(userKey);
+        const adaptableValue = propertyGetter(userValue);
+        if (adaptableValue != null) {
+            this.colDefPropertyCache.set(adaptableKey, adaptableValue);
+        }
+        let theValue = adaptableValue !== null && adaptableValue !== void 0 ? adaptableValue : userValue;
+        this.forPlugins((plugin) => {
+            if (plugin.interceptSetupColumnProperty) {
+                theValue = plugin.interceptSetupColumnProperty(colSetupInfo, propertyName, theValue, this.api);
+            }
+        });
+        if (propertyName === 'aggFunc') {
+            if (colDef[propertyName] !== (theValue !== null && theValue !== void 0 ? theValue : null)) {
+                this.gridOptions.columnApi.setColumnAggFunc(colId, theValue !== null && theValue !== void 0 ? theValue : null);
+            }
+        }
+        if (theValue === undefined && colDef[propertyName] === undefined) {
+            // already undefined, so don't set an own property to the same undefined value
+            return;
+        }
+        colDef[propertyName] = theValue;
+    }
+    getUserColDefProperty(columnId, propertyName) {
+        const userKey = `user.${columnId}.${propertyName}`;
+        return this.colDefPropertyCache.get(userKey);
+    }
+    setupColumnCellStyle({ col, colId, abColumn }) {
+        this.setColDefProperty(col, 'cellStyle', (userCellStyle) => {
+            const defaultCellStyle = {
+                backgroundColor: null,
+                color: null,
+                fontWeight: null,
+                fontStyle: null,
+                fontSize: null,
+                borderColor: null,
+            };
+            const formatColumn = this.api.formatColumnApi.getFormatColumnForColumn(abColumn);
+            const conditionalStyles = this.api.conditionalStyleApi.getConditionalStylesForColumn(abColumn);
+            const quickSearchStyle = this.getQuickSearchCellStyle();
+            const hasQuickSearchStyle = quickSearchStyle != undefined;
+            const cellStyle = (params) => {
+                const formatColumnCellStyle = formatColumn
+                    ? this.getFormatColumnCellStyle(formatColumn, params)
+                    : undefined;
+                const isQuickSearchActive = hasQuickSearchStyle && this.isQuickSearchActive(abColumn, params);
+                const result = Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, defaultCellStyle), this.getReadOnlyCellStyle(abColumn, params)), this.getEditableCellStyle(abColumn, params)), (typeof userCellStyle === 'function' ? userCellStyle(params) : userCellStyle)), formatColumnCellStyle), this.getConditionalStyleCellStyle(conditionalStyles, abColumn, params)), (isQuickSearchActive ? quickSearchStyle : undefined)), this.getAlertCellStyle(abColumn, params)), this.getFlashingAlertCellStyle(abColumn, params)), this.getCellHighlightStyle(abColumn, params));
+                return result;
+            };
+            return cellStyle;
+        });
+    }
+    setupColumnCellClass({ col, colId, abColumn }) {
+        this.setColDefProperty(col, 'cellClass', (userCellClass) => {
+            var _a;
+            const formatColumn = this.api.formatColumnApi.getFormatColumnWithStyleClassNameForColumn(abColumn);
+            const formatColumnStyleClassName = formatColumn && !formatColumn.IsSuspended ? (_a = formatColumn.Style) === null || _a === void 0 ? void 0 : _a.ClassName : null;
+            const conditionalStyles = this.api.conditionalStyleApi
+                .getConditionalStylesForColumn(abColumn)
+                .filter((cs) => StringExtensions_1.StringExtensions.IsNotNullOrEmpty(cs.Style.ClassName));
+            const hasConditionalStylesWithClassNames = ArrayExtensions_1.ArrayExtensions.IsNotNullOrEmpty(conditionalStyles);
+            const quickSearchStyleClassName = this.api.quickSearchApi.getQuickSearchStyle().ClassName;
+            const hasQuickSearchStyleClassName = StringExtensions_1.StringExtensions.IsNotNullOrEmpty(quickSearchStyleClassName);
+            const cellClass = (params) => {
+                const isQuickSearchActive = hasQuickSearchStyleClassName && this.isQuickSearchActive(abColumn, params);
+                const primaryKeyValue = this.getPrimaryKeyValueFromRowNode(params.node);
+                let returnValue = [
+                    this.getExcelClassNameForCell(colId, primaryKeyValue),
+                    typeof userCellClass === 'function' ? userCellClass(params) : userCellClass,
+                    formatColumnStyleClassName,
+                    hasConditionalStylesWithClassNames
+                        ? this.getConditionalStyleCellClass(conditionalStyles, abColumn, params)
+                        : null,
+                    isQuickSearchActive ? quickSearchStyleClassName : null,
+                ]
+                    .filter((x) => !!x)
+                    .join(' ');
+                return StringExtensions_1.StringExtensions.IsNotNullOrEmpty(returnValue) ? returnValue : undefined;
+            };
+            return cellClass;
+        });
+    }
+    getExcelClassNameForCell(colId, primaryKeyValue) {
+        return `--excel-cell-${colId}-${primaryKeyValue}`;
+    }
+    setupColumnCellEditor({ colId, col }) {
+        const editLookUpItem = this.api.userInterfaceApi.getEditLookUpItemForColumn(colId);
+        this.setColDefProperty(col, 'cellEditor', () => {
+            if (editLookUpItem) {
+                return this.isModulePresent('rich-select')
+                    ? 'agRichSelectCellEditor'
+                    : 'agSelectCellEditor';
+            }
+        });
+        this.setColDefProperty(col, 'cellEditorParams', () => {
+            if (editLookUpItem) {
+                return {
+                    values: this.api.userInterfaceApi.getEditLookUpValuesForEditLookUpItem(editLookUpItem, colId),
+                };
+            }
+        });
+    }
+    setupColumnCellRenderer({ col, colId, abColumn }) {
+        this.setColDefProperty(col, 'cellRenderer', () => {
+            const formatColumn = this.api.formatColumnApi.getFormatColumnForColumn(abColumn);
+            if (!(formatColumn === null || formatColumn === void 0 ? void 0 : formatColumn.IsSuspended) && formatColumn && formatColumn.ColumnStyle) {
+                if (formatColumn.ColumnStyle.PercentBarStyle) {
+                    return this.agGridHelper.createNumericStyleRendererFunc(formatColumn);
+                }
+                if (formatColumn.ColumnStyle.CheckBoxStyle) {
+                    return this.agGridHelper.createCheckboxRendererComp(abColumn.ColumnId, abColumn.ReadOnly);
+                }
+            }
+            const sparkline = this.api.sparklineColumnApi.getSparklineByColumn(colId);
+            if (sparkline) {
+                return this.agGridHelper.createSparklineCellRendererComp(sparkline);
+            }
+        });
+    }
+    setupColumnTooltipValueGetter({ col, colId }) {
+        this.setColDefProperty(col, 'tooltipValueGetter', () => {
+            var _a;
+            const formatColumn = this.api.formatColumnApi.getFormatColumnForColumnId(colId);
+            if (formatColumn &&
+                !formatColumn.IsSuspended &&
+                formatColumn.ColumnStyle &&
+                formatColumn.ColumnStyle.PercentBarStyle &&
+                formatColumn.ColumnStyle.PercentBarStyle.ToolTipText) {
+                if ((_a = formatColumn === null || formatColumn === void 0 ? void 0 : formatColumn.ColumnStyle) === null || _a === void 0 ? void 0 : _a.PercentBarStyle) {
+                    return (params) => {
+                        const min = this.api.formatColumnApi.getNumericStyleMinValue(formatColumn === null || formatColumn === void 0 ? void 0 : formatColumn.ColumnStyle, params.node, params.value);
+                        const max = this.api.formatColumnApi.getNumericStyleMaxValue(formatColumn === null || formatColumn === void 0 ? void 0 : formatColumn.ColumnStyle, params.node, params.value);
+                        const textOptions = formatColumn.ColumnStyle.PercentBarStyle.ToolTipText;
+                        let returnValue = '';
+                        if (textOptions.includes('CellValue')) {
+                            if (formatColumn.DisplayFormat) {
+                                const options = formatColumn.DisplayFormat
+                                    .Options;
+                                returnValue = options
+                                    ? FormatHelper_1.default.NumberFormatter(params.value, options)
+                                    : params.value;
+                            }
+                            else {
+                                returnValue = params.value;
+                            }
+                        }
+                        if (textOptions.includes('PercentageValue')) {
+                            const clampedValue = Helper_1.Helper.clamp(params.value, min, max);
+                            const percentageValue = ((clampedValue - min) / (max - min)) * 100;
+                            returnValue += ' ' + `(${percentageValue.toFixed(0)}%)`;
+                        }
+                        return returnValue ? returnValue : params.value;
+                    };
+                }
+            }
+        });
+    }
+    setupColumnTooltipField({ col, colId, colDef }) {
+        this.setColDefProperty(col, 'tooltipField', () => {
+            const sparkline = this.api.sparklineColumnApi.getSparklineByColumn(colId);
+            if (sparkline) {
+                return sparkline.ShowToolTip ? colDef.field : '';
+            }
+        });
+    }
+    setupColumnHeader({ col, abColumn }) {
+        var _a, _b;
+        const previousColumnHeader = (_a = col === null || col === void 0 ? void 0 : col.getColDef()) === null || _a === void 0 ? void 0 : _a.headerName;
+        this.setColDefProperty(col, 'headerName', (userHeaderName) => {
+            var _a;
+            // set the default to the AG Grid provided values
+            // from https://github.com/ag-grid/ag-grid/blob/v26.1.0/community-modules/core/src/ts/columns/columnModel.ts#L2515
+            let resultHeaderName = userHeaderName !== null && userHeaderName !== void 0 ? userHeaderName : StringExtensions_1.StringExtensions.CamelCaseToHumanText(col.getColDef().field);
+            const layoutCustomHeader = (_a = this.api.layoutApi.getCurrentLayout()
+                .ColumnHeadersMap) === null || _a === void 0 ? void 0 : _a[col.getColId()];
+            if (layoutCustomHeader) {
+                resultHeaderName = layoutCustomHeader;
+            }
+            // check if the deprecated formatColumn header is used
+            const formatColumn = this.api.formatColumnApi.getFormatColumnForColumnId(abColumn.ColumnId);
+            if (!layoutCustomHeader && (formatColumn === null || formatColumn === void 0 ? void 0 : formatColumn.HeaderName) && !formatColumn.IsSuspended) {
+                // fallback to the formatColumn property if no Layout custom header is provided
+                resultHeaderName = formatColumn.HeaderName;
+            }
+            // required here for the initial layout rendering
+            abColumn.FriendlyName = resultHeaderName;
+            return resultHeaderName;
+        });
+        const newColumnHeader = (_b = col === null || col === void 0 ? void 0 : col.getColDef()) === null || _b === void 0 ? void 0 : _b.headerName;
+        return previousColumnHeader !== newColumnHeader;
+    }
+    getUserDefinedHeaderName(columnId) {
+        const column = this.gridOptions.columnApi.getColumn(columnId);
+        if (!column) {
+            return columnId;
+        }
+        const userHeaderName = this.getUserColDefProperty(column.getColId(), 'headerName');
+        return userHeaderName !== null && userHeaderName !== void 0 ? userHeaderName : StringExtensions_1.StringExtensions.CamelCaseToHumanText(column.getColDef().field);
+    }
+    setupColumnFilter({ col, colDef }) {
+        this.setColDefProperty(col, 'filter', () => {
+            if (!colDef.filter) {
+                return;
+            }
+            if (!this.api.columnApi.usesAdaptableFilterForm(col.getColId())) {
+                return;
+            }
+            this.gridOptions.api.destroyFilter(col);
+            return FilterWrapper_1.FilterWrapperFactory(this);
+        });
+    }
+    setupColumnFloatingFilter({ col, colDef }) {
+        const isFloatingFilterDisabled = !colDef.floatingFilter || !this.api.columnApi.usesAdaptableQuickFilter(col.getColId());
+        this.setColDefProperty(col, 'floatingFilterComponent', () => {
+            if (isFloatingFilterDisabled) {
+                return;
+            }
+            return FloatingFilterWrapper_1.FloatingFilterWrapperFactory(this);
+        });
+        this.setColDefProperty(col, 'floatingFilterComponentParams', () => {
+            if (isFloatingFilterDisabled) {
+                return;
+            }
+            return {
+                suppressFilterButton: true,
+            };
+        });
+    }
+    setupColumnValueFormatter({ col, abColumn }) {
+        this.setColDefProperty(col, 'valueFormatter', () => {
+            const formatColumn = this.api.formatColumnApi.getFormatColumnWithDisplayFormatForColumn(abColumn);
+            if (!formatColumn) {
+                return;
+            }
+            if (formatColumn === null || formatColumn === void 0 ? void 0 : formatColumn.IsSuspended) {
+                return;
+            }
+            if (formatColumn.DisplayFormat) {
+                let valueFormatter;
+                if (formatColumn.DisplayFormat.Formatter === 'NumberFormatter') {
+                    // change the Number format - if the scope allows it
+                    if (this.api.scopeApi.isColumnInNumericScope(abColumn, formatColumn.Scope)) {
+                        const options = formatColumn.DisplayFormat.Options;
+                        valueFormatter = (params) => FormatHelper_1.default.NumberFormatter(params.value, options);
+                    }
+                }
+                if (formatColumn.DisplayFormat.Formatter === 'DateFormatter') {
+                    // change the Date format - if the scope allows it
+                    if (this.api.scopeApi.isColumnInDateScope(abColumn, formatColumn.Scope)) {
+                        const options = formatColumn.DisplayFormat.Options;
+                        valueFormatter = (params) => FormatHelper_1.default.DateFormatter(params.value, options);
+                    }
+                }
+                if (formatColumn.DisplayFormat.Formatter === 'StringFormatter') {
+                    // change the Date format - if the scope allows it
+                    if (this.api.scopeApi.isColumnInStringsScope(abColumn, formatColumn.Scope)) {
+                        const options = formatColumn.DisplayFormat.Options;
+                        valueFormatter = (params) => FormatHelper_1.default.StringFormatter(params.value, options);
+                    }
+                }
+                return valueFormatter;
+            }
+        });
+    }
+    setupColumnValueSetter({ col, colId, abColumn }) {
+        this.setColDefProperty(col, 'valueSetter', (userValueSetter) => {
+            var _a;
+            const preventEditAlertsForColumn = this.api.alertApi
+                .getAlertDefinitionsWithPreventEdit()
+                .filter((alertDefinition) => {
+                return this.api.scopeApi.isColumnInScope(abColumn, alertDefinition.Scope);
+            });
+            const cellEditableFn = this.adaptableOptions.editOptions.isCellEditable;
+            const noValidations = !preventEditAlertsForColumn.length && !((_a = this.adaptableOptions.editOptions) === null || _a === void 0 ? void 0 : _a.validateOnServer);
+            if (noValidations && !cellEditableFn) {
+                return;
+            }
+            const valueSetter = (params) => {
+                var _a;
+                if (cellEditableFn) {
+                    let gridCell = this.getGridCellFromRowNode(params.node, params.column.getColId());
+                    let isEditable = cellEditableFn(gridCell, params.node);
+                    if (!isEditable) {
+                        return false;
+                    }
+                }
+                const field = params.column.getColDef().field;
+                if (noValidations) {
+                    //TODO also consider the case when userValueSetter is a string
+                    if (typeof userValueSetter === 'function') {
+                        return userValueSetter(params);
+                    }
+                    // we allowed it go reach this point
+                    // just to run isCellEditable
+                    // and since this has already run and we have no other valitaions
+                    // just assign the new value and exit
+                    if (field) {
+                        params.data[field] = params.newValue;
+                    }
+                    return true;
+                }
+                const dataChangedInfo = this.api.internalApi.buildDataChangedInfo({
+                    oldValue: params.oldValue,
+                    newValue: params.newValue,
+                    columnId: params.column.getColId(),
+                    primaryKeyValue: this.getPrimaryKeyValueFromRowNode(params.node),
+                    rowNode: params.node,
+                    trigger: 'edit',
+                });
+                // just Prevent Edit Alerts below
+                if (!preventEditAlertsForColumn.length) {
+                    return true;
+                }
+                if (dataChangedInfo.oldValue === dataChangedInfo.newValue) {
+                    return true;
+                }
+                if (!this.ValidationService.performValidation(dataChangedInfo)) {
+                    return false;
+                }
+                const onServerValidationCompleted = () => { };
+                if ((_a = this.adaptableOptions.editOptions) === null || _a === void 0 ? void 0 : _a.validateOnServer) {
+                    this.ValidationService.performServerValidation(dataChangedInfo, {
+                        onServerValidationCompleted,
+                    })();
+                }
+                //TODO also consider the case when userValueSetter is a string
+                if (typeof userValueSetter === 'function') {
+                    return userValueSetter(params);
+                }
+                if (field) {
+                    params.data[field] = params.newValue;
+                }
+                else {
+                    throw `Cannot edit a column without a field - column id was ${colId}`;
+                }
+                return true;
+            };
+            return valueSetter;
+        });
+    }
+    setupColumnComparator({ col, colId, abColumn }) {
+        const customSort = this.api.customSortApi.getCustomSortByColumn(colId);
+        const columnSortComparer = this.api.internalApi.getCustomSortComparer(abColumn);
+        const comparatorGetter = (propName) => {
+            return () => {
+                return this.getActiveColumnComparator(colId, customSort, columnSortComparer);
+            };
+        };
+        this.setColDefProperty(col, 'comparator', comparatorGetter('comparator'));
+        this.setColDefProperty(col, 'pivotComparator', comparatorGetter('pivotComparator'));
+    }
+    applyCurrentTheme() {
+        this.api.themeApi.applyCurrentTheme();
+    }
+    getDefaultGroupOrderComparator(gridOptions) {
+        var _a;
+        // fallback to deprecated form (since AG-Grid v26.0.0)
+        return (_a = gridOptions.defaultGroupOrderComparator) !== null && _a !== void 0 ? _a : gridOptions.defaultGroupSortComparator;
+    }
+    applyFinalRendering() {
+        this.embedColumnMenu = this.isModulePresent('menu');
+        if (this.gridOptions.treeData && this.gridOptions.treeData == true) {
+            this.api.internalApi.setTreeModeOn();
+        }
+        else {
+            this.api.internalApi.setTreeModeOff();
+        }
+        this.agGridHelper.checkShouldClearExistingFiltersOrSearches();
+    }
+    isModulePresent(moduleName) {
+        const registeredModules = all_modules_1.ModuleRegistry.getRegisteredModules();
+        let modules = registeredModules.concat(this.agGridModules);
+        let moduleNames = modules.map((m) => m.moduleName);
+        return ArrayExtensions_1.ArrayExtensions.ContainsAnyItem(moduleNames, [
+            `@ag-grid-enterprise/${moduleName}`,
+            '@ag-grid-enterprise/all-modules',
+        ]);
+    }
+    onRowDataChanged({ rowNode, oldData, newData, }) {
+        if (oldData == null || oldData == undefined) {
+            return;
+        }
+        if (oldData == newData) {
+            return;
+        }
+        const primaryKeyValue = this.getPrimaryKeyValueFromRowNode(rowNode);
+        if (!primaryKeyValue) {
+            return;
+        }
+        // rowNode = this.getRowNodeForPrimaryKey(primaryKeyValue);
+        let dataChangedInfos = [];
+        Object.keys(oldData).forEach((key) => {
+            if (this.api.columnApi.doesColumnExist(key)) {
+                const oldValue = oldData[key];
+                const newValue = newData[key];
+                if (oldValue != newValue) {
+                    const dataChangedInfo = this.api.internalApi.buildDataChangedInfo({
+                        oldValue: oldValue,
+                        newValue: newValue,
+                        columnId: key,
+                        primaryKeyValue: primaryKeyValue,
+                        rowNode: rowNode,
+                        trigger: 'tick',
+                    });
+                    if (this.isUndoChange(dataChangedInfo)) {
+                        dataChangedInfo.trigger = 'undo';
+                    }
+                    dataChangedInfos.push(dataChangedInfo);
+                }
+            }
+        });
+        this.performPostEditChecks(dataChangedInfos);
+    }
+    onCellDataChanged({ rowNode, oldValue, newValue, colId, }) {
+        if (oldValue == newValue) {
+            return;
+        }
+        const primaryKeyValue = this.getPrimaryKeyValueFromRowNode(rowNode);
+        if (!primaryKeyValue) {
+            return;
+        }
+        if (!this.api.columnApi.doesColumnExist(colId)) {
+            return;
+        }
+        const dataChangedInfo = this.api.internalApi.buildDataChangedInfo({
+            oldValue: oldValue,
+            newValue: newValue,
+            columnId: colId,
+            primaryKeyValue: primaryKeyValue,
+            rowNode: rowNode,
+            trigger: 'edit',
+        });
+        if (this.isUndoChange(dataChangedInfo)) {
+            dataChangedInfo.trigger = 'undo';
+        }
+        this.performPostEditChecks([dataChangedInfo]);
+    }
+    isUndoChange(dataChange) {
+        // check if this is not a reverted change
+        const undoChange = this.api.internalApi.getDataService().extractUndoChange(dataChange);
+        return !!undoChange;
+    }
+    /**
+     * There are a few things that we need to do AFTER we edit a cell and it makes sense to put them in one place
+     */
+    performPostEditChecks(dataChangedInfos) {
+        const firstInfo = dataChangedInfos[0];
+        if (!firstInfo || !firstInfo.rowNode) {
+            return;
+        }
+        dataChangedInfos.forEach((dataChangedInfo) => {
+            if (dataChangedInfo.trigger === 'undo') {
+                LoggingHelper_1.LogAdaptableInfo(`Undo data change: PK(${dataChangedInfo.primaryKeyValue}) Col(${dataChangedInfo.columnId}) RevertedValue(${dataChangedInfo.oldValue}) OriginalValue(${dataChangedInfo.newValue})`);
+            }
+            if (dataChangedInfo.trigger === 'edit' || dataChangedInfo.trigger === 'undo') {
+                this.checkChangedCellCurrentlySelected(dataChangedInfo);
+                this.api.freeTextColumnApi.checkFreeTextColumnForDataChange(dataChangedInfo);
+            }
+            this.DataService.CreateDataChangedEvent(dataChangedInfo);
+        });
+        // if node is visible then check if need to refresh other columns / whole row if the updating column is:
+        // 1. referenced in Conditional Styles that have Expressions (refreshing whole row if Scope is All)
+        // 2. referenced in Format Column styles that use Column Comparisons (which might also be calculated columns)
+        if (this.isVisibleNode(firstInfo.rowNode)) {
+            let dataChangedScope = {
+                wholeRow: false,
+                columnIds: new Set(),
+            };
+            this.getExpressionStylesChanges(dataChangedScope, dataChangedInfos);
+            if (dataChangedScope.wholeRow) {
+                this.redrawRow(firstInfo.rowNode);
+            }
+            else {
+                this.getFormatColumnComparisonChanges(dataChangedScope, dataChangedInfos);
+                if (dataChangedScope.columnIds.size > 0) {
+                    this.refreshCells([firstInfo.rowNode], Array.from(dataChangedScope.columnIds.values()), true);
+                }
+            }
+        }
+        firstInfo.trigger == 'tick' ? this.filterOnTickingDataChange() : this.filterOnEditDataChange();
+    }
+    getExpressionStylesChanges(dataChangedScope, dataChangedInfos) {
+        const stylesWithExpression = this.api.conditionalStyleApi.getConditionalStylesWithExpression();
+        if (ArrayExtensions_1.ArrayExtensions.IsNullOrEmpty(stylesWithExpression)) {
+            return;
+        }
+        dataChangedInfos.forEach((dataChangedInfo) => {
+            if (!dataChangedScope.wholeRow) {
+                stylesWithExpression.forEach((conditionalStyle) => {
+                    if (!dataChangedScope.wholeRow) {
+                        const columnIds = this.api.queryApi.getColumnsFromExpression(conditionalStyle.Rule.BooleanExpression);
+                        if (columnIds.includes(dataChangedInfo.columnId)) {
+                            if (this.api.scopeApi.scopeIsAll(conditionalStyle.Scope)) {
+                                dataChangedScope.wholeRow = true;
+                                return;
+                            }
+                            else {
+                                this.api.scopeApi
+                                    .getColumnsForScope(conditionalStyle.Scope)
+                                    .map((c) => c.ColumnId)
+                                    .forEach((colId) => {
+                                    dataChangedScope.columnIds.add(colId);
+                                });
+                            }
+                        }
+                    }
+                });
+            }
+        });
+    }
+    getFormatColumnComparisonChanges(dataChangedScope, dataChangedInfos) {
+        this.api.formatColumnApi.getAllFormatColumn().forEach((fc) => {
+            let columnComparision = this.api.formatColumnApi.getColumnComparisonForFormatColumn(fc);
+            if (columnComparision) {
+                let affectedColumnIds = this.api.formatColumnApi.getColumnIdsFromColumnComparison(columnComparision);
+                if (ArrayExtensions_1.ArrayExtensions.IsNotNullOrEmpty(affectedColumnIds)) {
+                    dataChangedInfos.forEach((dataChangedInfo) => {
+                        if (affectedColumnIds.includes(dataChangedInfo.columnId)) {
+                            this.api.scopeApi
+                                .getColumnsForScope(fc.Scope)
+                                .map((c) => c.ColumnId)
+                                .forEach((colId) => {
+                                dataChangedScope.columnIds.add(colId);
+                            });
+                        }
+                    });
+                }
+            }
+        });
+    }
+    checkChangedCellCurrentlySelected(dataChangedInfo) {
+        let selectedCellInfo = this.api.gridApi.getSelectedCellInfo();
+        if (selectedCellInfo && ArrayExtensions_1.ArrayExtensions.IsNotNullOrEmpty(selectedCellInfo.gridCells)) {
+            let matchingCell = selectedCellInfo.gridCells.find((gc) => gc.primaryKeyValue == dataChangedInfo.primaryKeyValue &&
+                gc.columnId == dataChangedInfo.columnId);
+            if (matchingCell) {
+                this.setSelectedCells();
+            }
+        }
+        let selectedRowInfo = this.api.gridApi.getSelectedRowInfo();
+        if (selectedRowInfo && ArrayExtensions_1.ArrayExtensions.IsNotNullOrEmpty(selectedRowInfo.gridRows)) {
+            let matchingRow = selectedRowInfo.gridRows.find((gr) => gr.primaryKeyValue == dataChangedInfo.primaryKeyValue);
+            if (matchingRow) {
+                this.setSelectedRows();
+            }
+        }
+    }
+    getColumnSorts() {
+        const columnSorts = [];
+        const columnState = this.gridOptions.columnApi.getColumnState();
+        columnState.forEach((colState) => {
+            const { colId } = colState;
+            if (colState.sort && colState.sortIndex != null) {
+                columnSorts.push({
+                    ColumnId: colId,
+                    SortOrder: colState.sort === 'asc' ? 'Asc' : 'Desc',
+                    SortIndex: colState.sortIndex,
+                });
+            }
+        });
+        columnSorts.sort((a, b) => a.SortIndex - b.SortIndex);
+        return columnSorts.map((c) => {
+            return {
+                ColumnId: c.ColumnId,
+                SortOrder: c.SortOrder,
+            };
+        });
+    }
+    onSortChanged() {
+        const columnSorts = this.getColumnSorts();
+        this.api.gridApi.setColumnSorts(columnSorts);
+        this._emit('SortChanged', columnSorts);
+    }
+    expandAllRowGroups() {
+        this.gridOptions.api.forEachNode((node) => {
+            if (node.group) {
+                node.expanded = true;
+            }
+        });
+        this.gridOptions.api.onGroupExpandedOrCollapsed();
+    }
+    closeAllRowGroups() {
+        this.gridOptions.api.forEachNode((node) => {
+            if (node.group) {
+                node.expanded = false;
+            }
+        });
+        this.gridOptions.api.onGroupExpandedOrCollapsed();
+    }
+    expandRowGroupsForValues(columnValues) {
+        if (ArrayExtensions_1.ArrayExtensions.IsNotNullOrEmpty(columnValues)) {
+            const expandedKeys = columnValues.reduce((acc, key) => {
+                acc[key] = true;
+                return acc;
+            }, {});
+            this.gridOptions.api.forEachNode((node) => {
+                if (node.group && !node.expanded) {
+                    const nodePath = [];
+                    let current = node;
+                    while (current) {
+                        nodePath.push(current.key);
+                        current = current.parent;
+                    }
+                    const nodeKey = nodePath
+                        .filter((x) => !!x)
+                        .reverse()
+                        .join(GROUP_PATH_SEPARATOR);
+                    if (expandedKeys[nodeKey]) {
+                        node.setExpanded(true);
+                    }
+                }
+            });
+            this.gridOptions.api.onGroupExpandedOrCollapsed();
+        }
+    }
+    getVendorGridColumnFieldForColumn(abColumn) {
+        const agGridColumn = this.gridOptions.columnApi
+            .getAllColumns()
+            .find((c) => c.getColId() === abColumn.ColumnId);
+        return agGridColumn.getColDef().field || '';
+    }
+    setRowGroupColumns(columnIds) {
+        this.gridOptions.columnApi.setRowGroupColumns(columnIds);
+    }
+    clearRowGroupColumns() {
+        this.gridOptions.columnApi.removeRowGroupColumns(this.gridOptions.columnApi.getRowGroupColumns());
+    }
+    getExpandRowGroupsKeys() {
+        let returnValues = [];
+        if (this.adaptableOptions.layoutOptions.includeExpandedRowGroups) {
+            this.gridOptions.api.forEachNode((node) => {
+                if (node.group && node.expanded) {
+                    let current = node;
+                    const path = [];
+                    while (current) {
+                        path.push(current.key);
+                        current = current.parent;
+                    }
+                    returnValues.push(path
+                        .filter((x) => !!x)
+                        .reverse()
+                        .join(GROUP_PATH_SEPARATOR));
+                }
+            });
+        }
+        return returnValues;
+    }
+    getRowCount() {
+        return this.gridOptions.rowData
+            ? this.gridOptions.rowData.length
+            : this.gridOptions.api.getDisplayedRowCount();
+    }
+    getColumnCount() {
+        return this.gridOptions.columnApi.getAllColumns().length;
+    }
+    getVisibleRowCount() {
+        return this.gridOptions.api.getDisplayedRowCount();
+    }
+    getVisibleColumnCount() {
+        return this.gridOptions.columnApi.getAllColumns().filter((c) => c.isVisible()).length;
+    }
+    selectColumns(columnIds) {
+        columnIds.forEach((colId) => this.selectColumn(colId));
+    }
+    selectColumn(columnId) {
+        this.gridOptions.api.clearRangeSelection();
+        const cellRangeParams = {
+            rowStartIndex: 0,
+            rowEndIndex: this.gridOptions.api.getDisplayedRowCount(),
+            columnStart: columnId,
+            columnEnd: columnId,
+        };
+        this.gridOptions.api.addCellRange(cellRangeParams);
+    }
+    selectAll() {
+        this.gridOptions.api.selectAll();
+    }
+    deselectAll() {
+        // need to do both as first just clears selected rows and second clears ranges
+        this.gridOptions.api.deselectAll();
+        this.gridOptions.api.clearRangeSelection();
+    }
+    hideColumn(columnId) {
+        let vendorCol = this.gridOptions.columnApi.getColumn(columnId);
+        if (vendorCol) {
+            this.gridOptions.columnApi.setColumnVisible(columnId, false);
+            this.updateColumnsIntoStore();
+        }
+    }
+    showColumn(columnId) {
+        let vendorCol = this.gridOptions.columnApi.getColumn(columnId);
+        if (vendorCol) {
+            this.gridOptions.columnApi.setColumnVisible(columnId, true);
+            this.updateColumnsIntoStore();
+        }
+    }
+    autoSizeColumn(columnId) {
+        var _a;
+        (_a = this.gridOptions.columnApi) === null || _a === void 0 ? void 0 : _a.autoSizeColumn(columnId);
+    }
+    autoSizeColumns(columnIds) {
+        var _a;
+        (_a = this.gridOptions.columnApi) === null || _a === void 0 ? void 0 : _a.autoSizeColumns(columnIds);
+    }
+    autoSizeAllColumns() {
+        var _a;
+        (_a = this.gridOptions.columnApi) === null || _a === void 0 ? void 0 : _a.autoSizeAllColumns();
+    }
+    setColumnSort(columnSorts) {
+        const columnSortsMap = columnSorts === null || columnSorts === void 0 ? void 0 : columnSorts.reduce((acc, columnSort, index) => {
+            acc[columnSort.ColumnId] = Object.assign(Object.assign({}, columnSort), { SortIndex: index });
+            return acc;
+        }, {});
+        if (!this.gridOptions.api) {
+            return;
+        }
+        const newColumnState = this.gridOptions.columnApi.getColumnState().map((colState) => {
+            const { colId } = colState;
+            const state = Object.assign({}, colState);
+            const colSort = columnSortsMap ? columnSortsMap[colId] : undefined;
+            if (colSort) {
+                state.sort = colSort.SortOrder === 'Asc' ? 'asc' : 'desc';
+                state.sortIndex = colSort.SortIndex;
+            }
+            else {
+                state.sort = null;
+                state.sortIndex = null;
+            }
+            return state;
+        });
+        this.gridOptions.columnApi.setColumnState(newColumnState);
+        this.gridOptions.api.onSortChanged();
+    }
+    clearColumnSort() {
+        this.setColumnSort(null);
+    }
+    setDataSource(dataSource) {
+        if (!this.gridOptions.api) {
+            return;
+        }
+        if (this.hasAutogeneratedPrimaryKey()) {
+            this.addSyntheticPrimaryKey(dataSource);
+        }
+        this.gridOptions.api.setRowData(dataSource);
+    }
+    loadDataSource(dataSource) {
+        if (this.hasAutogeneratedPrimaryKey()) {
+            this.addSyntheticPrimaryKey(dataSource);
+        }
+        this.setDataSource(dataSource);
+    }
+    updateRows(dataRows, dataUpdateConfig) {
+        if (this.hasAutogeneratedPrimaryKey()) {
+            this.addSyntheticPrimaryKeyIfMissing(dataRows);
+        }
+        dataUpdateConfig = dataUpdateConfig || {};
+        if (dataUpdateConfig.runAsync) {
+            this.gridOptions.api.applyTransactionAsync({ update: dataRows }, dataUpdateConfig.callback);
+        }
+        else {
+            this.gridOptions.api.applyTransaction({ update: dataRows });
+        }
+    }
+    addRows(dataRows, dataUpdateConfig) {
+        if (this.hasAutogeneratedPrimaryKey()) {
+            this.addSyntheticPrimaryKey(dataRows);
+        }
+        dataUpdateConfig = dataUpdateConfig || {};
+        if (dataUpdateConfig.runAsync) {
+            this.gridOptions.api.applyTransactionAsync({ add: dataRows }, dataUpdateConfig.callback);
+        }
+        else {
+            this.gridOptions.api.applyTransaction({ add: dataRows });
+        }
+    }
+    deleteRows(dataRows, dataUpdateConfig) {
+        dataUpdateConfig = dataUpdateConfig || {};
+        if (dataUpdateConfig.runAsync) {
+            this.gridOptions.api.applyTransactionAsync({ remove: dataRows }, dataUpdateConfig.callback);
+        }
+        else {
+            this.gridOptions.api.applyTransaction({ remove: dataRows });
+        }
+    }
+    getFirstGroupedColumn() {
+        let groupedColumns = this.gridOptions.columnApi.getRowGroupColumns();
+        if (ArrayExtensions_1.ArrayExtensions.IsNotNullOrEmpty(groupedColumns)) {
+            let groupedColumn = groupedColumns[0];
+            return this.api.columnApi.getColumnFromId(groupedColumn.getColId());
+        }
+    }
+    checkColumnsDataTypeSet() {
+        // check that we have no unknown columns - if we do then ok
+        const firstCol = this.api.columnApi.getColumns()[0];
+        if (firstCol && firstCol.DataType == Enums_1.DataType.Unknown) {
+            this.updateColumnsIntoStore();
+        }
+    }
+    runAdaptableComparerFunction(columnId, columnValues) {
+        let adaptable = this;
+        return function compareItemsOfCustomSort(valueA, valueB, nodeA, nodeB) {
+            var _a, _b;
+            let firstElementValueString = (_a = (nodeA && adaptable.getDisplayValueFromRowNode(nodeA, columnId))) !== null && _a !== void 0 ? _a : valueA;
+            let secondElementValueString = (_b = (nodeB && adaptable.getDisplayValueFromRowNode(nodeB, columnId))) !== null && _b !== void 0 ? _b : valueB;
+            let indexFirstElement = columnValues.indexOf(firstElementValueString);
+            let containsFirstElement = indexFirstElement >= 0;
+            let indexSecondElement = columnValues.indexOf(secondElementValueString);
+            let containsSecondElement = indexSecondElement >= 0;
+            //if none of the element are in the list we jsut return normal compare
+            if (!containsFirstElement && !containsSecondElement) {
+                if (valueA == valueB) {
+                    return 0;
+                }
+                return valueA < valueB ? -1 : 1;
+            }
+            //if first item not in the list make sure we put it after the second item
+            if (!containsFirstElement) {
+                return 1;
+            }
+            //if second item not in the list make sure we put it after the first item
+            if (!containsSecondElement) {
+                return -1;
+            }
+            //return the comparison from the list if the two items are in the list
+            return indexFirstElement - indexSecondElement;
+        };
+    }
+    // do we want to do this each time or check once at startup and then set a flag?
+    isGridSelectable() {
+        let isRangeSelectionModuleRegistered = this.isModulePresent('range-selection');
+        if (isRangeSelectionModuleRegistered &&
+            this.gridOptions.enableRangeSelection != null &&
+            this.gridOptions.enableRangeSelection) {
+            return true;
+        }
+        return false;
+    }
+    isGridGroupable() {
+        const isTreeLayout = this.api.internalApi.isGridInTreeMode();
+        return !isTreeLayout;
+    }
+    isGridGroupingActive() {
+        let isGroupedActive = false;
+        this.gridOptions.api.forEachNode((node) => {
+            if (!isGroupedActive) {
+                if (node.group) {
+                    isGroupedActive = true;
+                }
+            }
+        });
+        return isGroupedActive;
+    }
+    isGridPivotable() {
+        const isTreeLayout = this.api.internalApi.isGridInTreeMode();
+        return !isTreeLayout;
+    }
+    isQuickFilterAvailable() {
+        return this.hasFloatingFilterOnAtLeastOneColumn() === true;
+    }
+    hasFloatingFilterOnAtLeastOneColumn(defs = this.gridOptions.columnDefs) {
+        if (this.gridOptions.defaultColDef && this.gridOptions.defaultColDef.floatingFilter) {
+            return true;
+        }
+        let col;
+        for (col of defs) {
+            if (col.floatingFilter) {
+                return true;
+            }
+            if (col.children) {
+                if (this.hasFloatingFilterOnAtLeastOneColumn(col.children)) {
+                    return true;
+                }
+            }
+        }
+        return false;
+    }
+    showQuickFilter() {
+        this.gridOptions.api.setFloatingFiltersHeight(null);
+    }
+    hideQuickFilter() {
+        this.gridOptions.api.setFloatingFiltersHeight(0);
+    }
+    getVendorColumnType(columnId) {
+        var _a;
+        const { type } = (_a = this.gridOptions.api.getColumnDef(columnId)) !== null && _a !== void 0 ? _a : {};
+        return type || '';
+    }
+    getActiveColumnComparator(columnId, customSort, customSortComparer) {
+        if ((!customSort || (customSort === null || customSort === void 0 ? void 0 : customSort.IsSuspended)) && !customSortComparer) {
+            // defaults to AG-Grid column definition comparator if no CustomSort is defined&active
+            const colDefComparator = this.getUserColDefProperty(columnId, 'comparator');
+            return colDefComparator;
+        }
+        // CustomSort Comparer function takes precedence over CustomSort SortedValues
+        const comparerFunction = customSortComparer
+            ? customSortComparer.comparer
+            : this.runAdaptableComparerFunction(customSort.ColumnId, customSort.SortedValues);
+        return comparerFunction;
+    }
+    getVendorGridLightThemeName() {
+        const container = this.getGridContainerElement();
+        if (container && container.classList) {
+            // we detect the ag theme class
+            const classList = container.classList;
+            for (let i = 0, len = classList.length; i < len; i++) {
+                const cls = classList[i];
+                if (cls.indexOf('ag-theme-') === 0) {
+                    // even if dark theme is included, we compute the light theme name out of it
+                    return cls.replace('-dark', '');
+                }
+            }
+        }
+        return this.agGridHelper.getVendorLightThemeName();
+    }
+    getVendorGridCurrentThemeName() {
+        const container = this.getGridContainerElement();
+        if (container && container.classList) {
+            // we detect the ag theme class
+            const classList = container.classList;
+            for (let i = 0, len = classList.length; i < len; i++) {
+                const cls = classList[i];
+                if (cls.indexOf('ag-theme-') === 0) {
+                    return cls;
+                }
+            }
+        }
+        return this.getVendorGridLightThemeName();
+    }
+    applyAdaptableTheme(theme) {
+        const themeName = typeof theme === 'string' ? theme : theme.Name;
+        const themeClassNamesToRemove = [];
+        const themesToRemove = [];
+        const allThemes = this.api.themeApi.getAllTheme().map((t) => {
+            // we mutate the theme later,
+            // and since we don't want the mutation to end up in state
+            // we better clone it here
+            return Object.assign({}, t);
+        });
+        const allThemesMap = allThemes.reduce((acc, theme) => {
+            acc[theme.Name] = theme;
+            return acc;
+        }, {});
+        // const themePrefix = 'ab--theme-'
+        const el = document.documentElement;
+        el.classList.forEach((cssClassName) => {
+            const index = cssClassName.indexOf(GeneralConstants.THEME_STYLE);
+            if (index === 0) {
+                themeClassNamesToRemove.push(cssClassName);
+                const themeName = cssClassName.substring(GeneralConstants.THEME_STYLE.length);
+                if (allThemesMap[themeName]) {
+                    themesToRemove.push(allThemesMap[themeName]);
+                }
+            }
+        });
+        themeClassNamesToRemove.forEach((cssClassName) => el.classList.remove(cssClassName));
+        // remove infinite table classnames
+        themesToRemove.forEach((theme) => {
+            el.classList.remove(`it--theme-${theme.Name}`);
+        });
+        if (this.adaptableOptions.userInterfaceOptions &&
+            this.adaptableOptions.userInterfaceOptions.useCustomMacLikeScrollbars &&
+            getScrollbarSize_1.default() > 0) {
+            el.classList.add('ab--custom-mac-like-scrollbars');
+        }
+        else {
+            el.classList.remove('ab--custom-mac-like-scrollbars');
+        }
+        const newTheme = allThemesMap[themeName];
+        const newThemeClassName = GeneralConstants.THEME_STYLE + themeName;
+        el.classList.add(newThemeClassName);
+        // add infinite table classname for theme
+        el.classList.add(`it--theme-${themeName}`);
+        const computedDocumentStyle = getComputedStyle(el);
+        const [abLoaded, abThemeLoaded] = ['--ab-loaded', '--ab-theme-loaded'].map((variable) => {
+            let val = computedDocumentStyle.getPropertyValue(variable);
+            if (typeof val === 'string' && val.trim) {
+                val = val.trim();
+            }
+            return val;
+        });
+        const systemThemes = this.api.themeApi.getAllSystemTheme();
+        const isSystemTheme = !!systemThemes.filter((t) => t.Name === themeName)[0];
+        const container = this.getGridContainerElement();
+        const getVendorLightThemeName = () => this.getVendorGridLightThemeName();
+        const getVendorDarkThemeName = () => getVendorLightThemeName() + '-dark';
+        if (newTheme && isSystemTheme) {
+            if (themeName === GeneralConstants_1.LIGHT_THEME) {
+                newTheme.VendorGridClassName = newTheme.VendorGridClassName || getVendorLightThemeName();
+            }
+            if (themeName === GeneralConstants_1.DARK_THEME) {
+                newTheme.VendorGridClassName = newTheme.VendorGridClassName || getVendorDarkThemeName();
+            }
+        }
+        if (!newTheme.VendorGridClassName) {
+            // default the vendor grid to the light theme
+            newTheme.VendorGridClassName = getVendorLightThemeName();
+        }
+        if (container != null) {
+            if (themesToRemove.length) {
+                themesToRemove.forEach((theme) => {
+                    if (theme.VendorGridClassName) {
+                        container.classList.remove(theme.VendorGridClassName);
+                    }
+                });
+            }
+            // also remove all vendor theme class names
+            const vendorClassNamesToRemove = [];
+            container.classList.forEach((x) => {
+                if (x && x.indexOf('ag-theme-') === 0) {
+                    vendorClassNamesToRemove.push(x);
+                }
+            });
+            vendorClassNamesToRemove.forEach((x) => container.classList.remove(x));
+            if (newTheme && newTheme.VendorGridClassName) {
+                container.classList.add(newTheme.VendorGridClassName);
+            }
+            container.classList.add('ab-Grid');
+            if (this.adaptableOptions.searchOptions.indicateFilteredColumns) {
+                container.classList.add('ab-Grid--indicate-filtered-columns');
+            }
+        }
+        if (abLoaded !== '777') {
+            LoggingHelper_1.ConsoleLogError('Please import Adaptable styles from "@adaptabletools/adaptable/index.css"');
+        }
+        // every theme should define a custom css variable: --ab-theme-loaded: <themeName> defined on the document element.
+        if (abThemeLoaded !== themeName) {
+            LoggingHelper_1.ConsoleLogWarning(`Theme "${themeName}" doesn't seem to be loaded! Make sure you import the css file for the "${themeName}" theme!
+
+If it's a default theme, try
+
+import "@adaptabletools/adaptable/themes/${themeName}.css"`);
+        }
+    }
+    setupRowStyling() {
+        // first get the conditional style state
+        const conditionalStyles = this.api.conditionalStyleApi.getRowConditionalStyles();
+        // Set any Row Styles (i.e. items without a classname)
+        this.setGridOptionsProperty('getRowStyle', (userGetRowStyle) => {
+            return (params) => {
+                const result = Object.assign(Object.assign({}, userGetRowStyle === null || userGetRowStyle === void 0 ? void 0 : userGetRowStyle(params)), this.getConditionalStyleRowStyle(conditionalStyles, params));
+                return result;
+            };
+        });
+        // Now set up Row Classes
+        this.setGridOptionsProperty('getRowClass', (userGetRowClass) => {
+            return (params) => {
+                let returnValue = [
+                    typeof userGetRowClass === 'function' ? userGetRowClass(params) : userGetRowClass,
+                    this.getConditionalStyleRowClass(conditionalStyles.filter((cs) => StringExtensions_1.StringExtensions.IsNotNullOrEmpty(cs.Style.ClassName)), params),
+                ]
+                    .filter((x) => !!x)
+                    .join(' ');
+                return StringExtensions_1.StringExtensions.IsNotNullOrEmpty(returnValue) ? returnValue : undefined;
+            };
+        });
+    }
+    setupColumnHeaderAggregations(currentLayout) {
+        const previousValue = this.gridOptions.suppressAggFuncInHeader;
+        this.setGridOptionsProperty('suppressAggFuncInHeader', (userSuppressAggFuncInHeader) => {
+            if (currentLayout.SuppressAggFuncInHeader !== userSuppressAggFuncInHeader) {
+                return currentLayout.SuppressAggFuncInHeader;
+            }
+        });
+        const newValue = this.gridOptions.suppressAggFuncInHeader;
+        return previousValue !== newValue;
+    }
+    getConditionalStyleRowClass(conditionalStyles, params) {
+        if (ArrayExtensions_1.ArrayExtensions.IsNotNullOrEmpty(conditionalStyles)) {
+            const module = this.ModuleService.getModuleById(ModuleConstants.ConditionalStyleModuleId);
+            let classNames = conditionalStyles
+                .map((conditionalStyle) => {
+                var _a;
+                if (module.isConditionalStyleActiveForRow(conditionalStyle, params)) {
+                    return (_a = conditionalStyle.Style) === null || _a === void 0 ? void 0 : _a.ClassName;
+                }
+            })
+                .filter((x) => !!x)
+                .join(' ');
+            return classNames;
+        }
+    }
+    getConditionalStyleRowStyle(conditionalStyles, params) {
+        if (ArrayExtensions_1.ArrayExtensions.IsNotNullOrEmpty(conditionalStyles)) {
+            const module = this.ModuleService.getModuleById(ModuleConstants.ConditionalStyleModuleId);
+            const cs = conditionalStyles.find((cs) => module.isConditionalStyleActiveForRow(cs, params));
+            if (cs) {
+                return this.convertAdaptableStyleToCSS(cs.Style);
+            }
+        }
+    }
+    getGridOptionsApi() {
+        if (!this.gridOptions.api) {
+            LoggingHelper_1.ConsoleLogError('There is a problem with your instance of AG Grid - it has no gridApi object.  Please contact Support.');
+            return;
+        }
+        return this.gridOptions.api;
+    }
+    canExportToExcel() {
+        return this.isModulePresent('excel-export');
+    }
+    exportToExcel(reportData, fileName) {
+        const columnDefs = reportData.columns.map((column) => ({
+            field: column.ColumnId,
+            headerName: column.FriendlyName,
+        }));
+        const NESTED_COL_SEPARATOR = '.';
+        const nestedColumns = reportData.columns.filter((column) => column.ColumnId.includes(NESTED_COL_SEPARATOR));
+        if (nestedColumns.length) {
+            // the rowData of nested fields (containing dots) was flattened during the report data extraction and we need to un-flatten it back
+            // ex.
+            // current state: { field: 'outerKey.innerKey', value: 2}
+            // original (desired) state: { field: 'outerKey.innerKey', value: {outerKey: {innerKey: 2}}}
+            reportData.rows.forEach((rowDataEntry) => nestedColumns.forEach((nestedColumn) => {
+                const cellExportValue = rowDataEntry[nestedColumn.ColumnId];
+                let intermediaryValue = rowDataEntry;
+                // augment the rowDataEntry with the new object
+                nestedColumn.ColumnId.split(NESTED_COL_SEPARATOR).forEach((nestedKey, index, nestedCols) => {
+                    // we reached the leaf node, so we set the cell value and break
+                    if (index === nestedCols.length - 1) {
+                        intermediaryValue[nestedKey] = cellExportValue;
+                        return;
+                    }
+                    if (intermediaryValue[nestedKey] == undefined) {
+                        intermediaryValue[nestedKey] = {};
+                    } // else means that the object already has a property with this key
+                    intermediaryValue = intermediaryValue[nestedKey];
+                });
+                // delete the obsolete flattened property
+                delete rowDataEntry[nestedColumn.ColumnId];
+            }));
+        }
+        const gridOptions = {
+            columnDefs,
+            rowData: reportData.rows,
+        };
+        const grid = new all_modules_1.Grid(document.createElement('div'), gridOptions);
+        gridOptions.api.exportDataAsExcel({
+            sheetName: 'Sheet 1',
+            fileName: fileName,
+        });
+        grid.destroy();
+    }
+    setExcelStylesForExport() {
+        this.setGridOptionsProperty('excelStyles', (userExcelStyles = []) => {
+            const adaptableExcelStyles = [];
+            const displayedColumns = this.gridOptions.columnApi.getAllDisplayedColumns();
+            const colDefs = displayedColumns.map((column) => {
+                return column.getColDef();
+            });
+            this.forAllVisibleRowNodesDo((node, rowIndex) => {
+                const rowParams = {
+                    node,
+                    data: node.data,
+                    rowIndex,
+                    $scope: {},
+                    api: this.gridOptions.api,
+                    columnApi: this.gridOptions.columnApi,
+                    context: {},
+                };
+                const rowStyle = this.gridOptions.getRowStyle(rowParams);
+                displayedColumns.forEach((column, columnIndex) => {
+                    const colDef = colDefs[columnIndex];
+                    const cellParams = {
+                        colDef,
+                        node,
+                        data: node.data,
+                        value: this.getRawValueFromRowNode(node, column.getId()),
+                        rowIndex,
+                        $scope: {},
+                        api: this.gridOptions.api,
+                        columnApi: this.gridOptions.columnApi,
+                        context: {},
+                    };
+                    const cellStyle = typeof colDef.cellStyle === 'function' ? colDef.cellStyle(cellParams) : {};
+                    const excelStyles = [];
+                    // add user defined excel styles
+                    const userDefinedCellClass = this.getUserColDefProperty(column.getColId(), 'cellClass');
+                    const userDefinedExcelStyle = userDefinedCellClass &&
+                        userExcelStyles.find((excelStyle) => excelStyle.id === userDefinedCellClass);
+                    if (userDefinedExcelStyle) {
+                        excelStyles.push(userDefinedExcelStyle);
+                    }
+                    // add adaptable derived styles (format column, conditional style etc.)
+                    const adaptableStyle = Object.assign(Object.assign({}, rowStyle), Object.keys(cellStyle).reduce((result, key) => {
+                        if (cellStyle[key] !== null) {
+                            result[key] = cellStyle[key];
+                        }
+                        return result;
+                    }, {}));
+                    if (Object.values(adaptableStyle).some((style) => style != null)) {
+                        excelStyles.push(this.convertCSSToExcelStyle(adaptableStyle));
+                    }
+                    // don't add the cell style if it has no adaptable custom styles or user defined styles
+                    if (!excelStyles.length) {
+                        return;
+                    }
+                    const cellClassId = typeof colDef.cellClass === 'function'
+                        ? colDef.cellClass(cellParams)
+                        : this.getExcelClassNameForCell(column.getId(), this.getPrimaryKeyValueFromRowNode(node));
+                    const finalCellExcelStyle = Object.assign({}, ...excelStyles, {
+                        id: cellClassId,
+                    });
+                    adaptableExcelStyles.push(finalCellExcelStyle);
+                });
+            });
+            return adaptableExcelStyles;
+        });
+    }
+    exportVisualDataToExcel() {
+        // add adaptable style props to user defined props
+        this.setExcelStylesForExport();
+        this.gridOptions.api.exportDataAsExcel({
+            sheetName: 'Sheet 1',
+            fileName: this.ReportService.getReportFileName(this.adaptableOptions.adaptableId),
+            // delegate the cell value processing to Adaptable
+            processCellCallback: (params) => {
+                var _a;
+                if ((_a = params.node) === null || _a === void 0 ? void 0 : _a.group) {
+                    // skip processing of row groups, this was already handled in processRowGroupCallback()
+                    return params.value;
+                }
+                return this.processCellForExcelExport(params.node, params.column.getColId());
+            },
+            processRowGroupCallback: (params) => {
+                var _a;
+                // recreating the standard AG Grid styling for row groups: 'Parent -> Child'
+                // additionally the values are formatted
+                let rowGroupNode = params.node;
+                const rowGroupSummary = [(_a = this.processRowGroupForExcelExport(rowGroupNode)) !== null && _a !== void 0 ? _a : ''];
+                while (rowGroupNode.parent) {
+                    rowGroupNode = rowGroupNode.parent;
+                    const formattedParentNode = this.processRowGroupForExcelExport(rowGroupNode);
+                    if (formattedParentNode) {
+                        rowGroupSummary.push(formattedParentNode);
+                    }
+                }
+                return rowGroupSummary.reverse().join(' -> ');
+            },
+        });
+        // keep only the user defined props
+        this.setGridOptionsProperty('excelStyles', (userExcelStyles) => {
+            return userExcelStyles;
+        });
+    }
+    convertAdaptableStyleToCSS(style) {
+        return StyleHelper_1.convertAdaptableStyleToCSS(style);
+    }
+    convertCSSToExcelStyle(style) {
+        const getHexColor = (color) => {
+            const t = tinycolor(color);
+            const a = t.getAlpha();
+            return tinycolor.mix(tinycolor('white'), t, a * 100).toHexString();
+        };
+        let result = {};
+        if (style.backgroundColor != null) {
+            result.interior = {
+                color: getHexColor(style.backgroundColor),
+                pattern: 'Solid',
+            };
+        }
+        if (style.borderColor != null) {
+            const excelBorder = {
+                color: style.borderColor,
+                lineStyle: 'Continuous',
+                weight: 1,
+            };
+            result.borders = {
+                borderBottom: excelBorder,
+                borderLeft: excelBorder,
+                borderRight: excelBorder,
+                borderTop: excelBorder,
+            };
+        }
+        if (style.textAlign) {
+            result.alignment = {
+                horizontal: StringExtensions_1.StringExtensions.CapitaliseFirstLetter(style.textAlign),
+            };
+        }
+        if (style.color != null) {
+            if (!result.font) {
+                result.font = {};
+            }
+            result.font = {
+                color: getHexColor(style.color),
+            };
+        }
+        if (style.fontStyle === 'italic') {
+            if (!result.font) {
+                result.font = {};
+            }
+            result.font.italic = true;
+        }
+        if (style.fontWeight != null &&
+            (style.fontWeight === 'bold' || Number(style.fontWeight) >= 600)) {
+            if (!result.font) {
+                result.font = {};
+            }
+            result.font.bold = true;
+        }
+        if (style.fontSize != null) {
+            if (!result.font) {
+                result.font = {};
+            }
+            result.font.size = StyleHelper_1.convertCSSAbsoluteFontSizeToPt(style.fontSize);
+        }
+        return result;
+    }
+    processCellForExcelExport(rowNode, columnId) {
+        return this.ReportService.getCellExportValueFromRowNode(rowNode, columnId);
+    }
+    processRowGroupForExcelExport(rowNode) {
+        if (!rowNode.field || !rowNode.key) {
+            return;
+        }
+        const columnId = rowNode.field;
+        let rawValue = rowNode.key;
+        if (this.api.columnApi.getColumnDataTypeFromColumnId(columnId) === 'Date' &&
+            typeof rawValue === 'string') {
+            // AG-Grid converts the value to string, we have to reconvert it back
+            const numericRawValue = parseInt(rawValue);
+            if (!isNaN(numericRawValue)) {
+                rawValue = numericRawValue;
+            }
+        }
+        return this.ReportService.getCellExportValueFromRawValue(rawValue, columnId);
+    }
+    hasAutogeneratedPrimaryKey() {
+        return this.adaptableOptions.autogeneratePrimaryKey;
+    }
+    addSyntheticPrimaryKey(rowData = []) {
+        for (let i = 0; i < rowData.length; i++) {
+            rowData[i][GeneralConstants_1.AUTOGENERATED_PK_COLUMN] = Uuid_1.createUuid();
+        }
+    }
+    // add a synthetic PK only if missing (useful in case of updating row data)
+    addSyntheticPrimaryKeyIfMissing(rowData = []) {
+        this.adaptableOptions.primaryKey = GeneralConstants_1.AUTOGENERATED_PK_COLUMN;
+        for (let i = 0; i < rowData.length; i++) {
+            if (!rowData[i][GeneralConstants_1.AUTOGENERATED_PK_COLUMN]) {
+                rowData[i][GeneralConstants_1.AUTOGENERATED_PK_COLUMN] = Uuid_1.createUuid();
+            }
+        }
+    }
+    initLicenseService() {
+        const globalObject = typeof globalThis !== 'undefined' ? globalThis : window;
+        const licenseKey = globalObject.ADAPTABLE_LICENSE_KEY ||
+            this.api.internalApi.getAdaptableOptions().licenseKey;
+        return new LicenseService_1.LicenseService(this, licenseKey, { publishedAt: publishTimestamp_1.default });
+    }
+}
+exports.Adaptable = Adaptable;
+class AdaptableNoCodeWizard {
+    /**
+     * @param adaptableOptions
+     */
+    constructor(adaptableOptions, extraOptions = {}) {
+        const defaultInit = async ({ gridOptions, adaptableOptions }) => {
+            adaptableOptions.vendorGrid = gridOptions;
+            return await Adaptable.init(adaptableOptions);
+        };
+        this.adaptableOptions = adaptableOptions;
+        this.init = extraOptions.onInit || defaultInit;
+        this.extraOptions = extraOptions;
+        this.render();
+    }
+    render(container) {
+        var _a;
+        let id = DefaultAdaptableOptions_1.DefaultAdaptableOptions.containerOptions.adaptableContainer || 'adaptable';
+        if (!container) {
+            let containerOptionsContainer = (_a = this.adaptableOptions.containerOptions) === null || _a === void 0 ? void 0 : _a.adaptableContainer;
+            if (containerOptionsContainer) {
+                if (typeof containerOptionsContainer === 'string') {
+                    id = containerOptionsContainer !== null && containerOptionsContainer !== void 0 ? containerOptionsContainer : id;
+                }
+                else {
+                    container = containerOptionsContainer;
+                }
+            }
+        }
+        container = container || document.getElementById(id);
+        if (!container) {
+            throw new Error('Cannot find container in which to render Adaptable No Code Wizard');
+        }
+        // this allows people to customize the wizard dimensions & styling
+        // when it's visible
+        container.classList.add('adaptable--in-wizard');
+        ReactDOM.render(React.createElement(AdaptableWizardView_1.default, Object.assign(Object.assign({ adaptableOptions: this.adaptableOptions }, this.extraOptions), { onInit: (adaptableOptions) => {
+                container.classList.remove('adaptable--in-wizard');
+                ReactDOM.unmountComponentAtNode(container);
+                this.init({
+                    adaptableOptions,
+                    gridOptions: adaptableOptions.vendorGrid,
+                });
+            } })), container);
+    }
+}
+exports.AdaptableNoCodeWizard = AdaptableNoCodeWizard;
+exports.bindAdaptableAgGrid = (gridReadyEvent, gridOptions) => {
+    gridOptions.api = gridReadyEvent.api;
+    gridOptions.columnApi = gridReadyEvent.columnApi;
+};