@adaptabletools/adaptable 13.0.0-canary.9 → 13.0.0

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();
@@ -892,13 +918,12 @@ class Adaptable {
         this.gridOptions.api.setColumnDefs(colDefs);
         this.updateColumnsIntoStore(); // todo remove this from here!!!
     }
-    getFormatColumnSpecialColumnStyle(formatColumn, abColumn, params) {
-        const columnStyle = formatColumn.ColumnStyle;
+    getStyledColumnStyle(styledColumn, abColumn, params) {
         let style = {};
-        const gradientStyle = columnStyle === null || columnStyle === void 0 ? void 0 : columnStyle.GradientStyle;
+        const gradientStyle = styledColumn === null || styledColumn === void 0 ? void 0 : styledColumn.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 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;
@@ -922,72 +947,49 @@ class Adaptable {
             const preparedColor = (0, StyleHelper_1.getVariableColor)(cellBackColor);
             style.backgroundColor = tinycolor(preparedColor).setAlpha(alpha).toRgbString();
         }
-        if (columnStyle.PercentBarStyle && columnStyle.PercentBarStyle.CellText) {
+        if (styledColumn.PercentBarStyle && styledColumn.PercentBarStyle.CellText) {
             style.paddingTop = 0;
             style.paddingBottom = 0;
         }
         return style;
     }
-    getFormatColumnColumnStyle(formatColumns) {
+    getFormatColumnAdaptableStyle(formatColumns) {
         // first has more precedence, then they need to be applied in reverse order
         return formatColumns.reduceRight((style, formatColumn) => {
-            const formatColumnStyle = this.convertAdaptableStyleToCSS(formatColumn.Style);
+            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, formatColumn, formatColumnsWithStyle, params) {
-        let style = {};
-        // percent bar && do we show text
-        const columnStyle = formatColumn.ColumnStyle;
-        if (columnStyle) {
-            if (columnStyle &&
-                !this.api.formatColumnApi.isFormatColumnActiveForColumn(formatColumn, abColumn, params)) {
-                return style;
-            }
-            style = Object.assign(Object.assign({}, style), this.getFormatColumnSpecialColumnStyle(formatColumn, abColumn, params));
-        }
-        else if (formatColumn.Style) {
-            const activeFormatColumnsWithStyle = formatColumnsWithStyle.filter((formatColumn) => {
-                return this.api.formatColumnApi.isFormatColumnActiveForColumn(formatColumn, abColumn, params);
-            });
-            if (!activeFormatColumnsWithStyle.length) {
-                return style;
-            }
-            style = Object.assign(Object.assign({}, style), this.getFormatColumnColumnStyle(activeFormatColumnsWithStyle));
-        }
-        if (formatColumn.CellAlignment) {
-            switch (formatColumn.CellAlignment) {
-                case 'Left':
-                    style.textAlign = 'left';
-                    break;
-                case 'Right':
-                    style.textAlign = 'right';
-                    break;
-                case 'Center':
-                    style.textAlign = 'center';
-                    break;
-            }
+    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.isFormatColumnActiveForColumn(formatColumn, abColumn, params)) {
-                return (_b = formatColumn.Style) === null || _b === void 0 ? void 0 : _b.ClassName;
-            }
-        })
-            .filter((x) => !!x);
-        return classNames;
-    }
-    getFormatColumnRowClass(formatColumns, params) {
-        const classNames = formatColumns
-            .map((formatColumn) => {
-            var _a, _b;
-            if (((_a = formatColumn.Style) === null || _a === void 0 ? void 0 : _a.ClassName) &&
-                this.api.formatColumnApi.isFormatColumnActiveForRow(formatColumn, params)) {
+                this.api.formatColumnApi.isFormatColumnRelevantForColumn(formatColumn, abColumn, params)) {
                 return (_b = formatColumn.Style) === null || _b === void 0 ? void 0 : _b.ClassName;
             }
         })
@@ -1142,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)) {
@@ -1309,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;
                 }
             }
@@ -1577,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;
@@ -1886,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)) {
@@ -1941,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') {
@@ -2344,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,
                 },
@@ -2373,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);
@@ -3184,18 +3164,18 @@ class Adaptable {
                 fontSize: null,
                 borderColor: null,
             };
-            const formatColumn = this.api.formatColumnApi.getActiveFormatColumnForColumn(abColumn);
-            const formatColumnsWithStyle = this.api.formatColumnApi.getColumnFormatColumnsWithStyle(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, formatColumnsWithStyle, params)
-                    : undefined;
                 const isQuickSearchActive = hasQuickSearchStyle && this.isQuickSearchActive(abColumn, params);
-                const conditionalStyleObj = this.getConditionalStyleCellStyle(conditionalStyles, 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), conditionalStyleObj), (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;
@@ -3204,10 +3184,6 @@ class Adaptable {
     setupColumnCellClass({ col, colId, abColumn }) {
         this.setColDefProperty(col, 'cellClass', (userCellClass) => {
             const formatColumns = this.api.formatColumnApi.getFormatColumnWithStyleClassNameForColumn(abColumn);
-            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) => {
@@ -3217,25 +3193,26 @@ 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,
-                    formatColumns.length
+                    !hasStyledColumn && formatColumns.length
                         ? this.getFormatColumnCellClass(formatColumns, abColumn, params)
                         : null,
-                    hasConditionalStylesWithClassNames
-                        ? this.getConditionalStyleCellClass(conditionalStyles, abColumn, params)
-                        : null,
                     isQuickSearchActive ? quickSearchStyleClassName : null,
                     editableClassName,
                     readonlyClassName,
                     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;
         });
@@ -3252,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) {
@@ -3281,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);
                 }
             }
@@ -3294,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);
@@ -3438,47 +3403,39 @@ class Adaptable {
     }
     setupColumnValueFormatter({ col, abColumn }) {
         this.setColDefProperty(col, 'valueFormatter', (params) => {
-            const formatColumn = this.api.formatColumnApi.getFormatColumnWithDisplayFormatForColumn(abColumn);
-            if (!formatColumn) {
+            const activeFormatColumnsWithDisplayFormat = this.api.formatColumnApi.getFormatColumnsWithDisplayFormatForColumn(abColumn);
+            if (!activeFormatColumnsWithDisplayFormat.length) {
                 return;
             }
-            if (formatColumn === null || formatColumn === void 0 ? void 0 : formatColumn.IsSuspended) {
-                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);
                     }
                 }
-                if (valueFormatter) {
-                    return (params) => {
-                        const rulePasses = this.api.formatColumnApi.isFormatColumnActiveForColumn(formatColumn, abColumn, params);
-                        return rulePasses ? valueFormatter(params) : params.value;
-                    };
-                }
-            }
+                // should NEVER arrive at this line, but just to be sure
+                return value;
+            };
         });
     }
     setupColumnEditable({ col }) {
@@ -3697,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)
@@ -3711,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);
                 }
@@ -3720,15 +3678,14 @@ class Adaptable {
         firstInfo.trigger == 'tick' ? this.filterOnTickingDataChange() : this.filterOnEditDataChange();
     }
     getExpressionStylesChanges(dataChangedScope, cellDataChangedInfos) {
-        const stylesWithExpression = [];
-        stylesWithExpression.push(...this.api.conditionalStyleApi.getConditionalStylesWithExpression());
-        stylesWithExpression.push(...this.api.formatColumnApi.getFormatColumnsWithExpression());
-        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((styleModule) => {
+                formatColumnsWithExpression.forEach((styleModule) => {
                     if (!dataChangedScope.wholeRow) {
                         const columnIds = this.api.queryLanguageApi.getColumnsFromExpression(styleModule.Rule.BooleanExpression);
                         if (columnIds.includes(cellDataChangedInfo.column.columnId)) {
@@ -3750,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);
                         }
                     });
                 }
@@ -4362,13 +4314,10 @@ import "@adaptabletools/adaptable/themes/${themeName}.css"`);
         }
     }
     setupRowStyling() {
-        // first get the conditional style state
-        const conditionalStyles = this.api.conditionalStyleApi.getRowConditionalStyles();
-        const formatColumnsStyles = this.api.formatColumnApi.getRowFormatColumnsWithStyle();
         // 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(Object.assign({}, userGetRowStyle === null || userGetRowStyle === void 0 ? void 0 : userGetRowStyle(params)), this.getRowHighlightStyle(params)), this.getAlertRowStyle(params)), this.getConditionalStyleRowStyle(conditionalStyles, params)), this.getFormatColumnRowStyle(formatColumnsStyles, 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;
             };
         });
@@ -4381,8 +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),
-                    this.getFormatColumnRowClass(formatColumnsStyles, params),
                 ]
                     // we flatten it because 'userGetRowClass' might return a string[]
                     .flat()
@@ -4401,38 +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);
-            }
-        }
-    }
-    getFormatColumnRowStyle(formatColumns, params) {
-        if (ArrayExtensions_1.ArrayExtensions.IsNotNullOrEmpty(formatColumns)) {
-            const formatColumnWithRowStyle = formatColumns.find((formatColumn) => this.api.formatColumnApi.isFormatColumnActiveForRow(formatColumn, params));
-            if (formatColumnWithRowStyle) {
-                return this.convertAdaptableStyleToCSS(formatColumnWithRowStyle.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.');
@@ -4759,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) {
@@ -4773,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 {