@adaptabletools/adaptable 13.0.0-canary.2 → 13.0.0-canary.21

package/src/agGrid/Adaptable.js

@@ -23,7 +23,6 @@ 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 = require("../Utilities/ObjectFactory");
@@ -86,6 +85,14 @@ const assignColId = (colDef) => {
 const RowNodeProto = core_1.RowNode.prototype;
 const RowNode_dispatchLocalEvent = RowNodeProto.dispatchLocalEvent;
 const GridApi_setColumnDefs = core_1.GridApi.prototype.setColumnDefs;
+['addCssClass', 'removeCssClass', 'containsCssClass', 'addOrRemoveCssClass'].forEach((methodName) => {
+    // @ts-ignore
+    const CssClassManager_originalMethod = core_1.CssClassManager.prototype[methodName];
+    // @ts-ignore
+    core_1.CssClassManager.prototype[methodName] = function () {
+        return this.getGui() ? CssClassManager_originalMethod.apply(this, arguments) : undefined;
+    };
+});
 /**
  * AgGrid does not expose Events.EVENT_ROW_DATA_CHANGED
  * so we have to override `dispatchLocalEvent`
@@ -140,8 +147,10 @@ const forEachColumn = (cols, fn, parentColGroup) => {
 const adaptableInstances = {};
 class Adaptable {
     constructor() {
+        this.variant = 'vanilla';
         this.colDefPropertyCache = new Map();
         this.gridOptionsPropertyCache = new Map();
+        this.columnMinMaxValuesCache = {};
         this.isCheckedColumnDataType = false;
         // only for our private / internal events used within Adaptable
         // public events are emitted through the EventApi
@@ -344,7 +353,22 @@ class Adaptable {
         if (runtimeConfig) {
             this.supressReact18RenderWarning = !!runtimeConfig.supressReact18RenderWarning;
             if (runtimeConfig.renderReactRoot) {
-                this.renderReactRoot = runtimeConfig.renderReactRoot;
+                this.renderReactRoot = (el, container) => {
+                    const unmount = runtimeConfig.renderReactRoot(el, container);
+                    return () => {
+                        // we used to capture here because of FloatingFilters/Filters - see FloatingFilterWrapper and FilterWrapper
+                        // as we didn't have a native React implementation for our React wrapper
+                        // but we might need to do this again in the future for some other components that are not native React
+                        // captureReactWarnings();
+                        if (typeof unmount === 'function') {
+                            unmount();
+                        }
+                        // releaseReactWarnings();
+                    };
+                };
+            }
+            if (runtimeConfig.variant) {
+                this.variant = runtimeConfig.variant;
             }
         }
         if (!_staticInit) {
@@ -429,10 +453,12 @@ class Adaptable {
             abColDefCustom: (_f = this.gridOptions.columnTypes.abColDefCustom) !== null && _f !== void 0 ? _f : {},
         });
         if (this.gridOptions.columnTypes.abColDefNumber.cellEditor === undefined) {
-            this.gridOptions.columnTypes.abColDefNumber.cellEditor = AdaptableNumberEditor_1.AdaptableNumberEditor;
+            this.gridOptions.columnTypes.abColDefNumber.cellEditor =
+                this.variant === 'react' ? AdaptableNumberEditor_1.ReactAdaptableNumberEditor : AdaptableNumberEditor_1.AdaptableNumberEditor;
         }
         if (this.gridOptions.columnTypes.abColDefDate.cellEditor === undefined) {
-            this.gridOptions.columnTypes.abColDefDate.cellEditor = AdaptableDateEditor_1.AdaptableDateEditor;
+            this.gridOptions.columnTypes.abColDefDate.cellEditor =
+                this.variant === 'react' ? AdaptableDateEditor_1.ReactAdaptableDateEditor : AdaptableDateEditor_1.AdaptableDateEditor;
         }
         // validate the provided AdaptableOptions
         this.MetamodelService.validateAdaptableOptionsValues();
@@ -466,19 +492,13 @@ class Adaptable {
                 AdaptableHelper_1.default.checkValidPrimaryKey(this);
             }, (e) => {
                 (0, LoggingHelper_1.ConsoleLogError)('Failed to Init Modules : ', e);
-                // for now we initiliaze the grid even if initialising Modules has failed (perhaps revisit this?)
+                // for now we initialize 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;
                 this._adaptableReady = true;
-                // setTimeout(() => {
-                // this.api.eventApi.emit('AdaptableReady', {
-                //   adaptableApi: this.api,
-                //   gridOptions: this.adaptableOptions.gridOptions,
-                // });
-                // }, 0);
             });
             if (this.abContainerElement == null) {
                 this.abContainerElement = this.getAdaptableContainerElement();
@@ -898,66 +918,83 @@ class Adaptable {
         this.gridOptions.api.setColumnDefs(colDefs);
         this.updateColumnsIntoStore(); // todo remove this from here!!!
     }
-    getFormatColumnCellStyle(abColumn, formatColumn, params) {
-        if (!formatColumn.IncludeGroupedRows && this.isGroupRowNode(params.node)) {
-            return;
-        }
-        if (formatColumn === null || formatColumn === void 0 ? void 0 : formatColumn.IsSuspended) {
-            return;
-        }
+    getStyledColumnStyle(styledColumn, abColumn, params) {
         let style = {};
-        // percent bar && do we show text
-        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, abColumn, params.node, params.value);
-                const max = this.api.formatColumnApi.getNumericStyleMaxValue(columnStyle, abColumn, params.node, params.value);
-                const clampedValue = (0, 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 == 'Col-Min' || r.Min <= clampedValue) &&
-                        (r.Max == 'Col-Max' || 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;
+        const gradientStyle = styledColumn === null || styledColumn === void 0 ? void 0 : styledColumn.GradientStyle;
+        if (gradientStyle) {
+            const min = this.api.styledColumnApi.getNumericStyleMinValue(styledColumn, abColumn, params.node, params.value);
+            const max = this.api.styledColumnApi.getNumericStyleMaxValue(styledColumn, abColumn, params.node, params.value);
+            const clampedValue = (0, 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 == 'Col-Min' || r.Min <= clampedValue) &&
+                    (r.Max == 'Col-Max' || r.Max >= clampedValue));
+                if (matchingRange) {
+                    cellBackColor = matchingRange.Color;
+                    reverseGradient = matchingRange.ReverseGradient;
                 }
-                const preparedColor = (0, StyleHelper_1.getVariableColor)(cellBackColor);
-                style.backgroundColor = tinycolor(preparedColor).setAlpha(alpha).toRgbString();
             }
-            if (columnStyle.PercentBarStyle && columnStyle.PercentBarStyle.CellText) {
-                style.paddingTop = 0;
-                style.paddingBottom = 0;
+            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;
             }
+            const preparedColor = (0, StyleHelper_1.getVariableColor)(cellBackColor);
+            style.backgroundColor = tinycolor(preparedColor).setAlpha(alpha).toRgbString();
         }
-        else if (formatColumn.Style) {
-            style = this.convertAdaptableStyleToCSS(formatColumn.Style);
+        if (styledColumn.PercentBarStyle && styledColumn.PercentBarStyle.CellText) {
+            style.paddingTop = 0;
+            style.paddingBottom = 0;
         }
-        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;
+    }
+    getFormatColumnAdaptableStyle(formatColumns) {
+        // first has more precedence, then they need to be applied in reverse order
+        return formatColumns.reduceRight((style, formatColumn) => {
+            const formatColumnStyle = formatColumn.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 Object.assign(Object.assign({}, style), formatColumnStyle);
+        }, {});
+    }
+    getFormatColumnCellStyle(abColumn, activeFormatColumnsWithStyle, params) {
+        if (!activeFormatColumnsWithStyle.length) {
+            return {};
         }
-        return style;
+        const relevantFormatColumnsWithStyle = activeFormatColumnsWithStyle.filter((formatColumn) => {
+            return this.api.formatColumnApi.isFormatColumnRelevantForColumn(formatColumn, abColumn, params);
+        });
+        return this.getFormatColumnAdaptableStyle(relevantFormatColumnsWithStyle);
+    }
+    getFormatColumnCellClass(formatColumns, abColumn, params) {
+        const classNames = formatColumns
+            .map((formatColumn) => {
+            var _a, _b;
+            if (((_a = formatColumn.Style) === null || _a === void 0 ? void 0 : _a.ClassName) &&
+                this.api.formatColumnApi.isFormatColumnRelevantForColumn(formatColumn, abColumn, params)) {
+                return (_b = formatColumn.Style) === null || _b === void 0 ? void 0 : _b.ClassName;
+            }
+        })
+            .filter((x) => !!x);
+        return classNames;
     }
     getActiveAlertWithHighlightCell(col, params) {
         return this.api.internalApi.getAdaptableAlertWithHighlightCell(col.columnId, params.node);
@@ -1107,31 +1144,6 @@ class Adaptable {
         }
         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);
-        return classNames;
-    }
     getEditableCellClass(abColumn, params) {
         const editableCellStyle = this.api.userInterfaceApi.getEditableCellStyle();
         if (!(editableCellStyle === null || editableCellStyle === void 0 ? void 0 : editableCellStyle.ClassName)) {
@@ -1274,7 +1286,7 @@ class Adaptable {
             const colId = customSort.ColumnId;
             if (!layoutColumnsMap[colId]) {
                 // pivot layouts may have no pivot columns, only aggregation columns
-                if (layout.AggregationColumns[colId] == undefined) {
+                if (!layout.AggregationColumns || layout.AggregationColumns[colId] == undefined) {
                     return acc;
                 }
             }
@@ -1542,7 +1554,10 @@ class Adaptable {
         layout.RowGroupedColumns = groupedColumns;
         if (Object.keys(aggregatedColumns).length) {
             // ag-grid aggregations are not 1-1 with adaptable column-aggregations
-            layout.AggregationColumns = this.handleUpdateWeightedAvgFromGrid(aggregatedColumns);
+            layout.AggregationColumns = this.mapAggregationColumnsFromGrid(aggregatedColumns, currentLayout);
+        }
+        else {
+            layout.AggregationColumns = {};
         }
         layout.EnablePivot = this.gridOptions.columnApi.isPivotMode();
         layout.PivotColumns = pivotColumns;
@@ -1851,7 +1866,7 @@ class Adaptable {
         if (colDef && colDef.cellRenderer != null) {
             return true;
         }
-        if (this.api.columnApi.isFormatNumericStyleColumn(column)) {
+        if (this.api.columnApi.isStyledNumericColumn(column)) {
             return true;
         }
         if (this.api.columnApi.isBooleanColumn(column)) {
@@ -1906,7 +1921,7 @@ class Adaptable {
     }
     getDisplayValueFromRawValue(rowNode, columnId, rawValue) {
         const abColumn = this.api.columnApi.getColumnFromId(columnId);
-        const isRenderedColumn = this.api.columnApi.isFormatNumericStyleColumn(abColumn);
+        const isRenderedColumn = this.api.columnApi.isStyledNumericColumn(abColumn);
         if (isRenderedColumn) {
             const colDef = this.gridOptions.api.getColumnDef(columnId);
             if (typeof colDef.valueFormatter == 'function') {
@@ -2309,7 +2324,7 @@ class Adaptable {
                 pinned: this.adaptableOptions.actionOptions.actionRowButtonsPosition === 'pinnedRight'
                     ? 'right'
                     : 'left',
-                cellRenderer: ActionColumnRenderer_1.ActionColumnRenderer,
+                cellRenderer: this.variant === 'react' ? ActionColumnRenderer_1.ReactActionColumnRenderer : ActionColumnRenderer_1.ActionColumnRenderer,
                 cellRendererParams: {
                     actionColumn: rowEditActionColumn,
                 },
@@ -2338,7 +2353,7 @@ class Adaptable {
                 filter: false,
                 sortable: false,
                 enableRowGroup: false,
-                cellRenderer: ActionColumnRenderer_1.ActionColumnRenderer,
+                cellRenderer: this.variant === 'react' ? ActionColumnRenderer_1.ReactActionColumnRenderer : ActionColumnRenderer_1.ActionColumnRenderer,
                 type: [GeneralConstants_1.AB_SPECIAL_COLUMN, 'abColDefObject'],
             };
             (0, LoggingHelper_1.LogAdaptableInfo)('Setting up Action Column: ' + actionColumn.columnId);
@@ -3149,16 +3164,18 @@ class Adaptable {
                 fontSize: null,
                 borderColor: null,
             };
-            const formatColumn = this.api.formatColumnApi.getActiveFormatColumnForColumn(abColumn);
-            const conditionalStyles = this.api.conditionalStyleApi.getConditionalStylesForColumn(abColumn);
+            const activeFormatColumnsWithStyle = this.api.formatColumnApi.getFormatColumnsWithStyleForColumn(abColumn);
+            let styledColumn = this.api.styledColumnApi.getStyledColumnByColumnId(colId);
+            if (styledColumn === null || styledColumn === void 0 ? void 0 : styledColumn.IsSuspended) {
+                styledColumn = null;
+            }
             const quickSearchStyle = this.getQuickSearchCellStyle();
             const hasQuickSearchStyle = quickSearchStyle != undefined;
             const cellStyle = (params) => {
-                const formatColumnCellStyle = formatColumn
-                    ? this.getFormatColumnCellStyle(abColumn, 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.getFlashingCellStyle(abColumn, params)), this.getCellHighlightStyle(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)), (!styledColumn
+                    ? this.getFormatColumnCellStyle(abColumn, activeFormatColumnsWithStyle, params)
+                    : {})), (styledColumn ? this.getStyledColumnStyle(styledColumn, abColumn, params) : {})), (isQuickSearchActive ? quickSearchStyle : {})), this.getAlertCellStyle(abColumn, params)), this.getFlashingCellStyle(abColumn, params)), this.getCellHighlightStyle(abColumn, params));
                 return result;
             };
             return cellStyle;
@@ -3166,13 +3183,7 @@ class Adaptable {
     }
     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 formatColumns = this.api.formatColumnApi.getFormatColumnWithStyleClassNameForColumn(abColumn);
             const quickSearchStyleClassName = this.api.quickSearchApi.getQuickSearchStyle().ClassName;
             const hasQuickSearchStyleClassName = StringExtensions_1.StringExtensions.IsNotNullOrEmpty(quickSearchStyleClassName);
             const cellClass = (params) => {
@@ -3182,12 +3193,13 @@ class Adaptable {
                 const readonlyClassName = this.getReadonlyCellClass(abColumn, params);
                 const highlightAlertClassName = this.getAlertCellClass(abColumn, params);
                 const flashingClassName = this.getFlashingCellClass(abColumn, params);
+                const styledColumn = this.api.styledColumnApi.getStyledColumnByColumnId(colId);
+                const hasStyledColumn = !!styledColumn && !styledColumn.IsSuspended;
                 const returnValue = [
                     this.getExcelClassNameForCell(colId, primaryKeyValue),
                     typeof userCellClass === 'function' ? userCellClass(params) : userCellClass,
-                    formatColumnStyleClassName,
-                    hasConditionalStylesWithClassNames
-                        ? this.getConditionalStyleCellClass(conditionalStyles, abColumn, params)
+                    !hasStyledColumn && formatColumns.length
+                        ? this.getFormatColumnCellClass(formatColumns, abColumn, params)
                         : null,
                     isQuickSearchActive ? quickSearchStyleClassName : null,
                     editableClassName,
@@ -3195,10 +3207,12 @@ class Adaptable {
                     highlightAlertClassName,
                     flashingClassName,
                 ]
-                    // we flatten the array because some rules ('userCellClass',conditionalStyles etc)  might return a string[]
+                    // we flatten the array because some rules ('userCellClass' etc)  might return a string[]
                     .flat()
                     .filter((x) => !!x);
-                return returnValue.length ? returnValue : undefined;
+                const result = returnValue.length ? returnValue : undefined;
+                // console.log(result);
+                return result;
             };
             return cellClass;
         });
@@ -3215,9 +3229,8 @@ class Adaptable {
         const editLookUpItem = this.api.userInterfaceApi.getEditLookUpItemForColumn(adaptableColumn);
         const hasRichSelectCellEditor = this.isAgGridModulePresent(core_1.ModuleNames.RichSelectModule);
         this.setColDefProperty(col, 'cellEditor', () => {
-            var _a;
-            const formatColumn = this.api.formatColumnApi.getActiveFormatColumnForColumn(adaptableColumn);
-            if (formatColumn && !(formatColumn === null || formatColumn === void 0 ? void 0 : formatColumn.IsSuspended) && ((_a = formatColumn.ColumnStyle) === null || _a === void 0 ? void 0 : _a.CheckBoxStyle)) {
+            const styledColumn = this.api.styledColumnApi.getActiveStyledColumnForColumn(adaptableColumn);
+            if (styledColumn && !(styledColumn === null || styledColumn === void 0 ? void 0 : styledColumn.IsSuspended) && styledColumn.CheckBoxStyle) {
                 return CheckboxRenderer_1.CheckboxEditor;
             }
             if (editLookUpItem) {
@@ -3244,12 +3257,12 @@ class Adaptable {
     }
     setupColumnCellRenderer({ col, colId, abColumn }) {
         this.setColDefProperty(col, 'cellRenderer', () => {
-            const formatColumn = this.api.formatColumnApi.getActiveFormatColumnForColumn(abColumn);
-            if (formatColumn && !(formatColumn === null || formatColumn === void 0 ? void 0 : formatColumn.IsSuspended) && formatColumn.ColumnStyle) {
-                if (formatColumn.ColumnStyle.PercentBarStyle) {
-                    return this.agGridHelper.createPercentBarRendererComp(formatColumn, abColumn);
+            const styledColumn = this.api.styledColumnApi.getStyledColumnByColumnId(abColumn.columnId);
+            if (styledColumn && !styledColumn.IsSuspended) {
+                if (styledColumn.PercentBarStyle) {
+                    return this.agGridHelper.createPercentBarRendererComp(styledColumn, abColumn);
                 }
-                if (formatColumn.ColumnStyle.CheckBoxStyle) {
+                if (styledColumn.CheckBoxStyle) {
                     return this.agGridHelper.createCheckboxRendererComp(abColumn.columnId, abColumn.readOnly);
                 }
             }
@@ -3257,30 +3270,19 @@ class Adaptable {
     }
     setupColumnTooltipValueGetter({ col, colId, abColumn }) {
         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) {
+            const styledColumn = this.api.styledColumnApi.getStyledColumnByColumnId(colId);
+            if (styledColumn &&
+                !styledColumn.IsSuspended &&
+                styledColumn.PercentBarStyle &&
+                styledColumn.PercentBarStyle.ToolTipText) {
+                if (styledColumn === null || styledColumn === void 0 ? void 0 : styledColumn.PercentBarStyle) {
                     return (params) => {
-                        const min = this.api.formatColumnApi.getNumericStyleMinValue(formatColumn === null || formatColumn === void 0 ? void 0 : formatColumn.ColumnStyle, abColumn, params.node, params.value);
-                        const max = this.api.formatColumnApi.getNumericStyleMaxValue(formatColumn === null || formatColumn === void 0 ? void 0 : formatColumn.ColumnStyle, abColumn, params.node, params.value);
-                        const textOptions = formatColumn.ColumnStyle.PercentBarStyle.ToolTipText;
+                        const min = this.api.styledColumnApi.getNumericStyleMinValue(styledColumn, abColumn, params.node, params.value);
+                        const max = this.api.styledColumnApi.getNumericStyleMaxValue(styledColumn, abColumn, params.node, params.value);
+                        const textOptions = styledColumn.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;
-                            }
+                            returnValue = params.value;
                         }
                         if (textOptions.includes('PercentageValue')) {
                             const clampedValue = Helper_1.Helper.clamp(params.value, min, max);
@@ -3363,13 +3365,6 @@ class Adaptable {
             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;
-                (0, LoggingHelper_1.ConsoleLogWarning)(`DEPRECATED: 'FormatColumn.HeaderName' is deprecated: use 'Layout.ColumnHeadersMap' instead`);
-            }
             // required here for the initial layout rendering
             abColumn.friendlyName = resultHeaderName;
             return resultHeaderName;
@@ -3407,43 +3402,40 @@ class Adaptable {
         });
     }
     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) {
+        this.setColDefProperty(col, 'valueFormatter', (params) => {
+            const activeFormatColumnsWithDisplayFormat = this.api.formatColumnApi.getFormatColumnsWithDisplayFormatForColumn(abColumn);
+            if (!activeFormatColumnsWithDisplayFormat.length) {
                 return;
             }
-            if (formatColumn.DisplayFormat) {
-                let valueFormatter;
-                const options = formatColumn.DisplayFormat.Options;
-                if (formatColumn.DisplayFormat.Formatter === 'NumberFormatter') {
+            return (params) => {
+                const { node, value } = params;
+                const [mostRelevantFormatColumn] = this.api.formatColumnApi.getFormatColumnsRelevantForColumn(activeFormatColumnsWithDisplayFormat, abColumn, { node, value });
+                if (!mostRelevantFormatColumn) {
+                    // ALL FormatColumns are conditional and NONE of them are relevant for this row
+                    return value;
+                }
+                const options = mostRelevantFormatColumn.DisplayFormat.Options;
+                if (mostRelevantFormatColumn.DisplayFormat.Formatter === 'NumberFormatter') {
                     // change the Number format - if the scope allows it
-                    if (this.api.scopeApi.isColumnInNumericScope(abColumn, formatColumn.Scope)) {
-                        valueFormatter = (params) => {
-                            return this.api.formatColumnApi.getNumberFormattedValue(params.value, params.node, abColumn, options);
-                        };
+                    if (this.api.scopeApi.isColumnInNumericScope(abColumn, mostRelevantFormatColumn.Scope)) {
+                        return this.api.formatColumnApi.getNumberFormattedValue(params.value, params.node, abColumn, options);
                     }
                 }
-                if (formatColumn.DisplayFormat.Formatter === 'DateFormatter') {
+                if (mostRelevantFormatColumn.DisplayFormat.Formatter === 'DateFormatter') {
                     // change the Date format - if the scope allows it
-                    if (this.api.scopeApi.isColumnInDateScope(abColumn, formatColumn.Scope)) {
-                        valueFormatter = (params) => {
-                            return this.api.formatColumnApi.getDateFormattedValue(params.value, params.node, abColumn, options);
-                        };
+                    if (this.api.scopeApi.isColumnInDateScope(abColumn, mostRelevantFormatColumn.Scope)) {
+                        return this.api.formatColumnApi.getDateFormattedValue(params.value, params.node, abColumn, options);
                     }
                 }
-                if (formatColumn.DisplayFormat.Formatter === 'StringFormatter') {
+                if (mostRelevantFormatColumn.DisplayFormat.Formatter === 'StringFormatter') {
                     // change the String format - if the scope allows it
-                    if (this.api.scopeApi.isColumnInStringsScope(abColumn, formatColumn.Scope)) {
-                        valueFormatter = (params) => {
-                            return this.api.formatColumnApi.getStringFormattedValue(params.value, params.node, abColumn, options);
-                        };
+                    if (this.api.scopeApi.isColumnInStringsScope(abColumn, mostRelevantFormatColumn.Scope)) {
+                        return this.api.formatColumnApi.getStringFormattedValue(params.value, params.node, abColumn, options);
                     }
                 }
-                return valueFormatter;
-            }
+                // should NEVER arrive at this line, but just to be sure
+                return value;
+            };
         });
     }
     setupColumnEditable({ col }) {
@@ -3662,6 +3654,7 @@ class Adaptable {
                 this.api.freeTextColumnApi.checkFreeTextColumnForDataChange(cellDataChangedInfo);
             }
             this.DataService.CreateDataChangedEvent(cellDataChangedInfo);
+            this.resetMinMaxCachedValueForColumn(cellDataChangedInfo.column);
         });
         // 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)
@@ -3676,7 +3669,7 @@ class Adaptable {
                 this.redrawRow(firstInfo.rowNode);
             }
             else {
-                this.getFormatColumnComparisonChanges(dataChangedScope, cellDataChangedInfos);
+                this.getStyledColumnComparisonChanges(dataChangedScope, cellDataChangedInfos);
                 if (dataChangedScope.columnIds.size > 0) {
                     this.refreshCells([firstInfo.rowNode], Array.from(dataChangedScope.columnIds.values()), true);
                 }
@@ -3685,23 +3678,24 @@ class Adaptable {
         firstInfo.trigger == 'tick' ? this.filterOnTickingDataChange() : this.filterOnEditDataChange();
     }
     getExpressionStylesChanges(dataChangedScope, cellDataChangedInfos) {
-        const stylesWithExpression = this.api.conditionalStyleApi.getConditionalStylesWithExpression();
-        if (ArrayExtensions_1.ArrayExtensions.IsNullOrEmpty(stylesWithExpression)) {
+        const formatColumnsWithExpression = [];
+        formatColumnsWithExpression.push(...this.api.formatColumnApi.getFormatColumnsWithExpression());
+        if (ArrayExtensions_1.ArrayExtensions.IsNullOrEmpty(formatColumnsWithExpression)) {
             return;
         }
         cellDataChangedInfos.forEach((cellDataChangedInfo) => {
             if (!dataChangedScope.wholeRow) {
-                stylesWithExpression.forEach((conditionalStyle) => {
+                formatColumnsWithExpression.forEach((styleModule) => {
                     if (!dataChangedScope.wholeRow) {
-                        const columnIds = this.api.queryLanguageApi.getColumnsFromExpression(conditionalStyle.Rule.BooleanExpression);
+                        const columnIds = this.api.queryLanguageApi.getColumnsFromExpression(styleModule.Rule.BooleanExpression);
                         if (columnIds.includes(cellDataChangedInfo.column.columnId)) {
-                            if (this.api.scopeApi.scopeIsAll(conditionalStyle.Scope)) {
+                            if (this.api.scopeApi.scopeIsAll(styleModule.Scope)) {
                                 dataChangedScope.wholeRow = true;
                                 return;
                             }
                             else {
                                 this.api.scopeApi
-                                    .getColumnsForScope(conditionalStyle.Scope)
+                                    .getColumnsForScope(styleModule.Scope)
                                     .map((c) => c.columnId)
                                     .forEach((colId) => {
                                     dataChangedScope.columnIds.add(colId);
@@ -3713,20 +3707,15 @@ class Adaptable {
             }
         });
     }
-    getFormatColumnComparisonChanges(dataChangedScope, cellDataChangedInfos) {
-        this.api.formatColumnApi.getAllFormatColumn().forEach((fc) => {
-            let columnComparison = this.api.formatColumnApi.getColumnComparisonForFormatColumn(fc);
+    getStyledColumnComparisonChanges(dataChangedScope, cellDataChangedInfos) {
+        this.api.styledColumnApi.getAllStyledColumn().forEach((sc) => {
+            let columnComparison = this.api.styledColumnApi.getColumnComparisonForStyledColumn(sc);
             if (columnComparison) {
-                let affectedColumnIds = this.api.formatColumnApi.getColumnIdsFromColumnComparison(columnComparison);
+                let affectedColumnIds = this.api.styledColumnApi.getColumnIdsFromColumnComparison(columnComparison);
                 if (ArrayExtensions_1.ArrayExtensions.IsNotNullOrEmpty(affectedColumnIds)) {
                     cellDataChangedInfos.forEach((cellDataChangedInfo) => {
                         if (affectedColumnIds.includes(cellDataChangedInfo.column.columnId)) {
-                            this.api.scopeApi
-                                .getColumnsForScope(fc.Scope)
-                                .map((c) => c.columnId)
-                                .forEach((colId) => {
-                                dataChangedScope.columnIds.add(colId);
-                            });
+                            dataChangedScope.columnIds.add(sc.ColumnId);
                         }
                     });
                 }
@@ -4325,12 +4314,10 @@ 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(Object.assign(Object.assign({}, userGetRowStyle === null || userGetRowStyle === void 0 ? void 0 : userGetRowStyle(params)), this.getRowHighlightStyle(params)), this.getAlertRowStyle(params)), this.getConditionalStyleRowStyle(conditionalStyles, params));
+                const result = Object.assign(Object.assign(Object.assign({}, userGetRowStyle === null || userGetRowStyle === void 0 ? void 0 : userGetRowStyle(params)), this.getRowHighlightStyle(params)), this.getAlertRowStyle(params));
                 return result;
             };
         });
@@ -4343,7 +4330,6 @@ import "@adaptabletools/adaptable/themes/${themeName}.css"`);
                     typeof userGetRowClass === 'function' ? userGetRowClass(params) : userGetRowClass,
                     highlightClassName,
                     alertHighlightClassName,
-                    this.getConditionalStyleRowClass(conditionalStyles.filter((cs) => StringExtensions_1.StringExtensions.IsNotNullOrEmpty(cs.Style.ClassName)), params),
                 ]
                     // we flatten it because 'userGetRowClass' might return a string[]
                     .flat()
@@ -4362,30 +4348,6 @@ import "@adaptabletools/adaptable/themes/${themeName}.css"`);
         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) {
             (0, LoggingHelper_1.ConsoleLogError)('There is a problem with your instance of AG Grid - it has no gridApi object.  Please contact Support.');
@@ -4712,8 +4674,7 @@ import "@adaptabletools/adaptable/themes/${themeName}.css"`);
     /**
      * When reading the state from the grid, we have to make sure 'avg' is not overriden with the 'avg' string.
      */
-    handleUpdateWeightedAvgFromGrid(aggFuncFromGrid) {
-        const currentLayout = this.api.layoutApi.getCurrentLayout();
+    mapAggregationColumnsFromGrid(aggFuncFromGrid, currentLayout) {
         return Object.entries(aggFuncFromGrid).reduce((acc, [colId, agg]) => {
             const adaptableAggFunc = this.getActiveAdaptableAggFuncForCol(colId);
             if ((adaptableAggFunc === null || adaptableAggFunc === void 0 ? void 0 : adaptableAggFunc.type) === 'weightedAverage' && agg === AggregationColumns_1.WEIGHTED_AVERAGE_AGG_FN_NAME) {
@@ -4726,6 +4687,31 @@ import "@adaptabletools/adaptable/themes/${themeName}.css"`);
             return acc;
         }, {});
     }
+    resetMinMaxCachedValueForColumn(column) {
+        if (!column) {
+            this.columnMinMaxValuesCache[column.columnId] = {};
+        }
+        if (this.columnMinMaxValuesCache[column.columnId]) {
+            this.columnMinMaxValuesCache[column.columnId] = undefined;
+        }
+    }
+    getMinMaxCachedValueForColumn(column, minMax) {
+        var _a;
+        const { columnId, dataType } = column;
+        if (dataType !== 'Number') {
+            return undefined;
+        }
+        let value = (_a = this.columnMinMaxValuesCache[columnId]) === null || _a === void 0 ? void 0 : _a[minMax];
+        if (value !== undefined) {
+            return value;
+        }
+        const distinctRawValues = this.api.columnApi
+            .getUnsortedDistinctRawValuesForColumn(columnId)
+            .map((item) => item.rawValue);
+        value = minMax === 'min' ? Math.min(...distinctRawValues) : Math.max(...distinctRawValues);
+        this.columnMinMaxValuesCache[columnId] = Object.assign(Object.assign({}, this.columnMinMaxValuesCache[columnId]), { [minMax]: value });
+        return value;
+    }
 }
 exports.Adaptable = Adaptable;
 class AdaptableNoCodeWizard {