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

package/src/View/ConditionalStyle/ConditionalStylePopupHeader.js

@@ -0,0 +1,18 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ConditionalStylePopupHeader = void 0;
+const tslib_1 = require("tslib");
+const React = tslib_1.__importStar(require("react"));
+const HelpBlock_1 = tslib_1.__importDefault(require("../../components/HelpBlock"));
+const SimpleButton_1 = tslib_1.__importDefault(require("../../components/SimpleButton"));
+const AdaptableContext_1 = require("../AdaptableContext");
+const ConditionalStylePopupHeader = () => {
+    const adaptable = (0, AdaptableContext_1.useAdaptable)();
+    return (React.createElement(HelpBlock_1.default, null,
+        "Conditional Styles are deprecated, use",
+        ' ',
+        React.createElement(SimpleButton_1.default, { onClick: () => adaptable.api.settingsPanelApi.showSettingsPanel('FormatColumn'), variant: "outlined" }, "Format Columns"),
+        ' ',
+        "instead."));
+};
+exports.ConditionalStylePopupHeader = ConditionalStylePopupHeader;

package/src/View/FormatColumn/MoveFormatColumn.d.ts

@@ -0,0 +1,7 @@
+import * as React from 'react';
+import { AccessLevel, FormatColumn } from '../../types';
+export declare const MoveFormatColumn: React.FunctionComponent<{
+    data: FormatColumn;
+    id?: string;
+    accessLevel: AccessLevel;
+}>;

package/src/View/FormatColumn/MoveFormatColumn.js

@@ -0,0 +1,27 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.MoveFormatColumn = void 0;
+const tslib_1 = require("tslib");
+const React = tslib_1.__importStar(require("react"));
+const SimpleButton_1 = tslib_1.__importDefault(require("../../components/SimpleButton"));
+const FormatColumnRedux = tslib_1.__importStar(require("../../Redux/ActionsReducers/FormatColumnRedux"));
+const react_redux_1 = require("react-redux");
+const AdaptableContext_1 = require("../AdaptableContext");
+const MoveFormatColumn = (props) => {
+    const dispatch = (0, react_redux_1.useDispatch)();
+    const adaptable = (0, AdaptableContext_1.useAdaptable)();
+    const formatColumn = adaptable.api.formatColumnApi.getAllFormatColumn();
+    const handleMoveUp = React.useCallback(() => {
+        dispatch(FormatColumnRedux.FormatColumnMoveUp(props.data));
+    }, []);
+    const handleMoveDown = React.useCallback(() => {
+        dispatch(FormatColumnRedux.FormatColumnMoveDown(props.data));
+    }, []);
+    if ((formatColumn === null || formatColumn === void 0 ? void 0 : formatColumn.length) <= 1) {
+        return React.createElement(React.Fragment, null);
+    }
+    return (React.createElement(React.Fragment, null,
+        React.createElement(SimpleButton_1.default, { "data-id": "move-up", title: "move up", onClick: handleMoveUp, variant: "text", icon: "arrow-up" }),
+        React.createElement(SimpleButton_1.default, { "data-name": "move-down", title: "move down", onClick: handleMoveDown, variant: "text", icon: "arrow-down" })));
+};
+exports.MoveFormatColumn = MoveFormatColumn;

package/src/View/FormatColumn/Wizard/FormatColumnFormatWizardSection.js

@@ -125,7 +125,7 @@ const getFormatDisplayTypeForScope = (scope, api) => {
     }
     // need to see if all columns are numeric or date
     if ('ColumnIds' in scope) {
-        const columns = scope.ColumnIds.map((c) => api.columnApi.getColumnFromId(c));
+        const columns = scope.ColumnIds.map((c) => api.columnApi.getColumnFromId(c)).filter(Boolean);
         const columnDataTypes = (0, uniq_1.default)(columns.map((c) => c.dataType));
         if (columnDataTypes.length == 1 && columnDataTypes[0] == 'Number') {
             return 'Number';

package/src/View/FormatColumn/Wizard/FormatColumnRuleWizardSection.d.ts

@@ -0,0 +1,9 @@
+/// <reference types="react" />
+import { FormatColumn } from '../../../../types';
+declare type FormatColumnRuleWizardSectionProps = {
+    onChange: (data: FormatColumn) => void;
+    defaultPredicateId: string;
+};
+export declare function renderFormatColumnRuleSummary(data: FormatColumn): JSX.Element;
+export declare function FormatColumnRuleWizardSection(props: FormatColumnRuleWizardSectionProps): JSX.Element;
+export {};

package/src/View/FormatColumn/Wizard/FormatColumnRuleWizardSection.js

@@ -0,0 +1,66 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.FormatColumnRuleWizardSection = exports.renderFormatColumnRuleSummary = void 0;
+const tslib_1 = require("tslib");
+const React = tslib_1.__importStar(require("react"));
+const rebass_1 = require("rebass");
+const OnePageAdaptableWizard_1 = require("../../Wizard/OnePageAdaptableWizard");
+const EntityRulesEditor_1 = require("../../Components/EntityRulesEditor");
+const CodeBlock_1 = require("../../../components/CodeBlock");
+const CheckBox_1 = require("../../../components/CheckBox");
+const constants_1 = require("./constants");
+function renderFormatColumnRuleSummary(data) {
+    return (React.createElement(EntityRulesEditor_1.EntityRulesSummary, { data: data, renderPredicate: (contents) => {
+            return (React.createElement(React.Fragment, null,
+                "Apply Format Column on ",
+                React.createElement(CodeBlock_1.CodeBlock, null, contents)));
+        }, renderQueryExpression: (contents) => {
+            return (React.createElement(React.Fragment, null,
+                "Apply Format Column when",
+                ' ',
+                React.createElement("b", null,
+                    React.createElement(CodeBlock_1.CodeBlock, null, contents))));
+        } }));
+}
+exports.renderFormatColumnRuleSummary = renderFormatColumnRuleSummary;
+function FormatColumnRuleWizardSection(props) {
+    const { data, api, moduleInfo } = (0, OnePageAdaptableWizard_1.useOnePageAdaptableWizardContext)();
+    const hasRule = Boolean(data.Rule);
+    const handleRuleToggle = React.useCallback(() => {
+        const newFormatColumn = Object.assign({}, data);
+        if (hasRule) {
+            delete newFormatColumn.Rule;
+        }
+        else {
+            newFormatColumn.Rule = {
+                Predicate: {
+                    PredicateId: constants_1.DEFAULT_PREDICATE_ID_FOR_FORMAT_COLUMN,
+                },
+            };
+        }
+        props.onChange(newFormatColumn);
+    }, [data.Rule]);
+    const hasIncompatibleStyle = Boolean(data.ColumnStyle);
+    return (React.createElement(rebass_1.Box, null,
+        React.createElement(rebass_1.Box, { p: 2, mb: 1 },
+            React.createElement(CheckBox_1.CheckBox, { disabled: hasIncompatibleStyle, checked: hasRule, onClick: handleRuleToggle }, "Enable Condition"),
+            hasIncompatibleStyle && (React.createElement(rebass_1.Text, { ml: 1 }, "Condition is only available for Standard Style."))),
+        hasRule && (React.createElement(EntityRulesEditor_1.EntityRulesEditor, { module: moduleInfo.ModuleName, defaultPredicateId: props.defaultPredicateId, 
+            // TODO see what is this
+            predicateDefs: api.formatColumnApi.getFormatColumnDefsForScope(data.Scope), showAggregation: false, showObservable: false, showPredicate: !api.scopeApi.scopeIsAll(data.Scope), data: data, onChange: (formatColumn) => props.onChange(formatColumn), descriptions: {
+                selectPredicate: 'Select a Format Column Rule - to be applied when data changes',
+                useBooleanQuery: (React.createElement(React.Fragment, null,
+                    "Use an BooleanQuery if ",
+                    React.createElement("i", null, "Scope"),
+                    " is 'Whole Row' - so any data change may be evaluated in a complex BooleanExpression")),
+                useObservableQuery: (React.createElement(React.Fragment, null,
+                    "Use an ObservableQuery if ",
+                    React.createElement("i", null, "Scope"),
+                    " is 'Whole Row' - so any data change may be evaluated in a complex ObservableExpression")),
+                useAggregationQuery: (React.createElement(React.Fragment, null,
+                    "Use an AggregatedBooleanQuery if ",
+                    React.createElement("i", null, "Scope"),
+                    " is 'Whole Row' - so any data change may be evaluated in a complex AggregatedBooleanExpression")),
+            } }))));
+}
+exports.FormatColumnRuleWizardSection = FormatColumnRuleWizardSection;

package/src/View/FormatColumn/Wizard/FormatColumnScopeWizardSection.js

@@ -5,6 +5,7 @@ const tslib_1 = require("tslib");
 const React = tslib_1.__importStar(require("react"));
 const NewScopeComponent_1 = require("../../Components/NewScopeComponent");
 const OnePageAdaptableWizard_1 = require("../../Wizard/OnePageAdaptableWizard");
+const constants_1 = require("./constants");
 const renderFormatColumnScopeSummary = (data) => {
     return (0, NewScopeComponent_1.renderScopeSummary)(data.Scope, {
         scopeWholeRow: 'Matching rows will be formatted',
@@ -14,12 +15,29 @@ const renderFormatColumnScopeSummary = (data) => {
 };
 exports.renderFormatColumnScopeSummary = renderFormatColumnScopeSummary;
 const FormatColumnScopeWizardSection = (props) => {
-    const { data } = (0, OnePageAdaptableWizard_1.useOnePageAdaptableWizardContext)();
+    const { data, api } = (0, OnePageAdaptableWizard_1.useOnePageAdaptableWizardContext)();
     return (React.createElement(NewScopeComponent_1.NewScopeComponent, { descriptions: {
             rowScope: 'Apply a style to an entire row',
             columnScope: 'Select columns to format',
         }, scope: data.Scope, updateScope: (Scope) => {
-            props.onChange(Object.assign(Object.assign({}, data), { Scope }));
+            var _a;
+            const newData = Object.assign(Object.assign({}, data), { Scope });
+            const wholeRow = api.scopeApi.scopeIsAll(Scope);
+            if ((_a = newData.Rule) === null || _a === void 0 ? void 0 : _a.Predicate) {
+                if (wholeRow) {
+                    // if scope is whole row, a predicate cannot be present, so we set the rule
+                    // to be a boolean expression
+                    delete newData.Rule.Predicate;
+                    newData.Rule.BooleanExpression = '';
+                }
+                else {
+                    // if scope is not whole row, if you have a predicate, reset it
+                    newData.Rule.Predicate = {
+                        PredicateId: constants_1.DEFAULT_PREDICATE_ID_FOR_FORMAT_COLUMN,
+                    };
+                }
+            }
+            props.onChange(newData);
         } }));
 };
 exports.FormatColumnScopeWizardSection = FormatColumnScopeWizardSection;

package/src/View/FormatColumn/Wizard/FormatColumnStyleWizardSection.js

@@ -278,6 +278,7 @@ function FormatColumnStyleWizardSection(props) {
             props.onChange(newData);
         }
     };
+    const onlyStandardStyleAvailable = Boolean(data.Rule);
     return (React.createElement(React.Fragment, null,
         onlyBooleanColumnsInScope && (React.createElement(Tabs_1.Tabs, null,
             React.createElement(Tabs_1.Tabs.Tab, null, "CheckBox Column"),
@@ -293,7 +294,7 @@ function FormatColumnStyleWizardSection(props) {
                         }
                         props.onChange(formatColumn);
                     } }, "Display Column As CheckBox")))),
-        singleNumericColumn ? (React.createElement(React.Fragment, null,
+        singleNumericColumn && !onlyStandardStyleAvailable ? (React.createElement(React.Fragment, null,
             React.createElement(Tabs_1.Tabs, null,
                 React.createElement(Tabs_1.Tabs.Tab, null, "Create a Format Column Style"),
                 React.createElement(Tabs_1.Tabs.Content, null,

package/src/View/FormatColumn/Wizard/FormatColumnWizard.js

@@ -17,6 +17,9 @@ const ObjectFactory_1 = tslib_1.__importDefault(require("../../../Utilities/Obje
 const react_redux_1 = require("react-redux");
 const FormatColumnRedux = tslib_1.__importStar(require("../../../Redux/ActionsReducers/FormatColumnRedux"));
 const ObjectTagsWizardSection_1 = require("../../Wizard/ObjectTagsWizardSection");
+const EntityRulesEditor_1 = require("../../Components/EntityRulesEditor");
+const FormatColumnRuleWizardSection_1 = require("./FormatColumnRuleWizardSection");
+const constants_1 = require("./constants");
 const adjustDisplayFormat = (formatColumn, api) => {
     formatColumn = Object.assign({}, formatColumn);
     const formatDataType = (0, FormatColumnFormatWizardSection_1.getFormatDisplayTypeForScope)(formatColumn.Scope, api);
@@ -113,6 +116,17 @@ function FormatColumnWizard(props) {
                         React.createElement(FormatColumnScopeWizardSection_1.FormatColumnScopeWizardSection, { onChange: setFormatColumn })));
                 },
             },
+            {
+                isValid: (abObject, api, context) => {
+                    return abObject.Rule ? (0, EntityRulesEditor_1.isRuleValid)(abObject, api, context) : true;
+                },
+                title: 'Condition',
+                details: 'Build the rules when Format column should be applied',
+                render: () => {
+                    return (React.createElement(rebass_1.Box, { p: 2 },
+                        React.createElement(FormatColumnRuleWizardSection_1.FormatColumnRuleWizardSection, { onChange: setFormatColumn, defaultPredicateId: constants_1.DEFAULT_PREDICATE_ID_FOR_FORMAT_COLUMN })));
+                },
+            },
             {
                 title: 'Style',
                 details: 'Format Column Style',

package/src/View/FormatColumn/Wizard/constants.d.ts

@@ -0,0 +1 @@
+export declare const DEFAULT_PREDICATE_ID_FOR_FORMAT_COLUMN = "NonBlanks";

package/src/View/FormatColumn/Wizard/constants.js

@@ -0,0 +1,4 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.DEFAULT_PREDICATE_ID_FOR_FORMAT_COLUMN = void 0;
+exports.DEFAULT_PREDICATE_ID_FOR_FORMAT_COLUMN = 'NonBlanks';

package/src/agGrid/Adaptable.d.ts

@@ -154,7 +154,11 @@ export declare class Adaptable implements IAdaptable {
     updateColumnsIntoStore(): void;
     private createAdaptableColumn;
     private safeSetColDefs;
+    private getFormatColumnSpecialColumnStyle;
+    private getFormatColumnColumnStyle;
     private getFormatColumnCellStyle;
+    private getFormatColumnCellClass;
+    private getFormatColumnRowClass;
     private getActiveAlertWithHighlightCell;
     private getActiveAlertWithHighlightRow;
     private getAlertCellStyle;
@@ -358,6 +362,7 @@ export declare class Adaptable implements IAdaptable {
     private setupColumnHeaderAggregations;
     private getConditionalStyleRowClass;
     private getConditionalStyleRowStyle;
+    private getFormatColumnRowStyle;
     private getGridOptionsApi;
     canGenerateCharts(): boolean;
     canHaveSparklines(): boolean;

package/src/agGrid/Adaptable.js

@@ -898,51 +898,68 @@ 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;
+    getFormatColumnSpecialColumnStyle(formatColumn, abColumn, params) {
+        const columnStyle = formatColumn.ColumnStyle;
+        let style = {};
+        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 preparedColor = (0, StyleHelper_1.getVariableColor)(cellBackColor);
+            style.backgroundColor = tinycolor(preparedColor).setAlpha(alpha).toRgbString();
         }
-        if (formatColumn === null || formatColumn === void 0 ? void 0 : formatColumn.IsSuspended) {
-            return;
+        if (columnStyle.PercentBarStyle && columnStyle.PercentBarStyle.CellText) {
+            style.paddingTop = 0;
+            style.paddingBottom = 0;
         }
+        return style;
+    }
+    getFormatColumnColumnStyle(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);
+            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) {
-            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 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;
+            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) {
-            style = this.convertAdaptableStyleToCSS(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) {
@@ -959,6 +976,30 @@ class Adaptable {
         }
         return style;
     }
+    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)) {
+                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);
     }
@@ -3150,15 +3191,17 @@ class Adaptable {
                 borderColor: null,
             };
             const formatColumn = this.api.formatColumnApi.getActiveFormatColumnForColumn(abColumn);
+            const formatColumnsWithStyle = this.api.formatColumnApi.getColumnFormatColumnsWithStyle(abColumn);
             const conditionalStyles = this.api.conditionalStyleApi.getConditionalStylesForColumn(abColumn);
             const quickSearchStyle = this.getQuickSearchCellStyle();
             const hasQuickSearchStyle = quickSearchStyle != undefined;
             const cellStyle = (params) => {
                 const formatColumnCellStyle = formatColumn
-                    ? this.getFormatColumnCellStyle(abColumn, formatColumn, params)
+                    ? this.getFormatColumnCellStyle(abColumn, formatColumn, formatColumnsWithStyle, 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 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));
                 return result;
             };
             return cellStyle;
@@ -3166,9 +3209,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 formatColumns = this.api.formatColumnApi.getFormatColumnWithStyleClassNameForColumn(abColumn);
             const conditionalStyles = this.api.conditionalStyleApi
                 .getConditionalStylesForColumn(abColumn)
                 .filter((cs) => StringExtensions_1.StringExtensions.IsNotNullOrEmpty(cs.Style.ClassName));
@@ -3185,7 +3226,9 @@ class Adaptable {
                 const returnValue = [
                     this.getExcelClassNameForCell(colId, primaryKeyValue),
                     typeof userCellClass === 'function' ? userCellClass(params) : userCellClass,
-                    formatColumnStyleClassName,
+                    formatColumns.length
+                        ? this.getFormatColumnCellClass(formatColumns, abColumn, params)
+                        : null,
                     hasConditionalStylesWithClassNames
                         ? this.getConditionalStyleCellClass(conditionalStyles, abColumn, params)
                         : null,
@@ -3407,7 +3450,7 @@ class Adaptable {
         });
     }
     setupColumnValueFormatter({ col, abColumn }) {
-        this.setColDefProperty(col, 'valueFormatter', () => {
+        this.setColDefProperty(col, 'valueFormatter', (params) => {
             const formatColumn = this.api.formatColumnApi.getFormatColumnWithDisplayFormatForColumn(abColumn);
             if (!formatColumn) {
                 return;
@@ -3442,7 +3485,12 @@ class Adaptable {
                         };
                     }
                 }
-                return valueFormatter;
+                if (valueFormatter) {
+                    return (params) => {
+                        const rulePasses = this.api.formatColumnApi.isFormatColumnActiveForColumn(formatColumn, abColumn, params);
+                        return rulePasses ? valueFormatter(params) : params.value;
+                    };
+                }
             }
         });
     }
@@ -4327,10 +4375,11 @@ 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({}, 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(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));
                 return result;
             };
         });
@@ -4344,6 +4393,7 @@ import "@adaptabletools/adaptable/themes/${themeName}.css"`);
                     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()
@@ -4386,6 +4436,14 @@ import "@adaptabletools/adaptable/themes/${themeName}.css"`);
             }
         }
     }
+    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.');

package/src/components/ExpressionEditor/BaseEditorInput.d.ts

@@ -7,7 +7,7 @@ interface BaseEditorInputProps {
     onChange: (value: string) => void;
     disabled?: boolean;
     onSelectedFunctionChange: (expressionFunction: ExpressionFunction | null) => void;
-    expressionFunctions: ExpressionFunctionMap;
+    expressionFunctions: ExpressionFunctionMap<string>;
     editorButtons: OperatorEditorButton[];
     testData: any;
     placeholder?: string;

package/src/components/ExpressionEditor/EditorInput.js

@@ -13,7 +13,7 @@ const editorButtonsCumulativeAggregatedScalar_1 = require("./editorButtonsCumula
 function EditorInput(props) {
     const moduleExpressionFunctions = props.api.internalApi
         .getQueryLanguageService()
-        .getModuleExpressionFunctions(props.module);
+        .getModuleExpressionFunctionsMap(props.module);
     const getFilteredAggregatedExpressionFunctions = (availableAggregatedExpressionFunctions, type) => {
         const sourceExpressionFunctions = type === 'aggregatedScalar'
             ? aggregatedScalarExpressionFunctions_1.aggregatedExpressionFunctions

package/src/components/ExpressionEditor/EditorInputWithWhereClause.js

@@ -15,7 +15,7 @@ const editorButtonsAggregatedBoolean_1 = require("./editorButtonsAggregatedBoole
 function EditorInputWithWhereClause(props) {
     const moduleExpressionFunctions = props.api.internalApi
         .getQueryLanguageService()
-        .getModuleExpressionFunctions(props.module);
+        .getModuleExpressionFunctionsMap(props.module);
     const reactiveExpressionFns = props.type === 'observable'
         ? moduleExpressionFunctions.observableFunctions
         : moduleExpressionFunctions.aggregatedBooleanFunctions;