@adaptabletools/adaptable 13.0.0-canary.15 → 13.0.0-canary.17

package/src/agGrid/ActionColumnRenderer.js

@@ -1,76 +1,108 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.ActionColumnRenderer = void 0;
+exports.ActionColumnRenderer = exports.ReactActionColumnRenderer = void 0;
 const tslib_1 = require("tslib");
 const SimpleButton_1 = tslib_1.__importDefault(require("../components/SimpleButton"));
 const React = tslib_1.__importStar(require("react"));
 const uuid_1 = require("../components/utils/uuid");
+const useRerender_1 = require("../components/utils/useRerender");
+function getActionButtonsAndActionColumn(adaptable, actionColumn, colId) {
+    var _a;
+    const actionCol = actionColumn
+        ? actionColumn
+        : (_a = adaptable.api.actionApi.getAllActionColumn()) === null || _a === void 0 ? void 0 : _a.find((ac) => ac.columnId == colId);
+    if (actionCol && actionCol.actionColumnButton) {
+        let actionButtons = Array.isArray(actionCol.actionColumnButton)
+            ? actionCol.actionColumnButton
+            : [actionCol.actionColumnButton];
+        if (!actionButtons.length) {
+            return;
+        }
+        // actionButtons don't have IDs, so we need to generate them to be used later as a react component key
+        actionButtons = actionButtons.map((actionButton) => (Object.assign(Object.assign({}, actionButton), { Uuid: (0, uuid_1.createUuid)() })));
+        return { actionButtons, actionColumn: actionCol };
+    }
+    return {
+        actionButtons: [],
+        actionColumn: actionCol,
+    };
+}
+const renderActionButtons = (buttons, adaptableApi, context, rerender) => {
+    return (React.createElement(React.Fragment, null, buttons.map((button, index) => {
+        var _a, _b;
+        if (button.hidden && button.hidden(button, context)) {
+            return;
+        }
+        const buttonIcon = adaptableApi.internalApi.getIconForButton(button, context, {
+            height: 15,
+            width: 15,
+        });
+        const buttonStyle = adaptableApi.internalApi.getStyleForButton(button, context);
+        const buttonLabel = adaptableApi.internalApi.getLabelForButton(button, context);
+        const buttonTooltip = adaptableApi.internalApi.getTooltipForButton(button, context);
+        const handleClick = () => {
+            var _a;
+            (_a = button.onClick) === null || _a === void 0 ? void 0 : _a.call(button, button, context);
+            // Timeout to let any updates to be done before re-rendering the component
+            setTimeout(() => {
+                // when called again it triggers a re-render
+                // https:reactjs.org/docs/react-dom.html#render
+                rerender();
+            }, 16);
+        };
+        const disabled = button.disabled && button.disabled(button, context);
+        return (React.createElement(SimpleButton_1.default, { key: button.Uuid, "data-name": `action-button-${index + 1}`, variant: (_a = buttonStyle === null || buttonStyle === void 0 ? void 0 : buttonStyle.variant) !== null && _a !== void 0 ? _a : 'text', disabled: disabled, tooltip: buttonTooltip, icon: buttonIcon, tone: (_b = buttonStyle === null || buttonStyle === void 0 ? void 0 : buttonStyle.tone) !== null && _b !== void 0 ? _b : 'none', onClick: handleClick, className: buttonStyle === null || buttonStyle === void 0 ? void 0 : buttonStyle.className, accessLevel: 'Full' }, buttonLabel));
+    })));
+};
+const ReactActionColumnRenderer = (props) => {
+    const rerender = (0, useRerender_1.useRerender)();
+    const adaptable = props.api.__adaptable;
+    const { actionButtons, actionColumn } = getActionButtonsAndActionColumn(adaptable, props.actionColumn, props.colDef.colId);
+    if (!actionColumn || !actionButtons.length) {
+        return null;
+    }
+    if (adaptable.api.gridApi.isGroupRowNode(props.node) && !actionColumn.includeGroupedRows) {
+        return null;
+    }
+    const pkValue = adaptable.getPrimaryKeyValueFromRowNode(props.node);
+    const buttonContext = {
+        actionColumn,
+        primaryKeyValue: pkValue,
+        rowNode: props.node,
+        adaptableApi: adaptable.api,
+    };
+    return (React.createElement("div", { className: "ab-ActionColumn" }, renderActionButtons(actionButtons, adaptable.api, buttonContext, rerender)));
+};
+exports.ReactActionColumnRenderer = ReactActionColumnRenderer;
 class ActionColumnRenderer {
     // gets called once before the renderer is used
     init(params) {
-        var _a;
         const adaptable = params.api.__adaptable;
-        const actionCol = params.actionColumn
-            ? params.actionColumn
-            : (_a = adaptable.api.actionApi
-                .getAllActionColumn()) === null || _a === void 0 ? void 0 : _a.find((ac) => ac.columnId == params.colDef.colId);
-        if (actionCol && actionCol.actionColumnButton) {
-            let actionButtons = Array.isArray(actionCol.actionColumnButton)
-                ? actionCol.actionColumnButton
-                : [actionCol.actionColumnButton];
-            if (!actionButtons.length) {
-                return;
-            }
-            // actionButtons don't have IDs, so we need to generate them to be used later as a react component key
-            actionButtons = actionButtons.map((actionButton) => (Object.assign(Object.assign({}, actionButton), { Uuid: (0, uuid_1.createUuid)() })));
-            // create the cell
-            this.eGui = document.createElement('div');
-            this.eGui.className = 'ab-ActionColumn';
-            // if its a group node then only show if set to do so
-            if (adaptable.api.gridApi.isGroupRowNode(params.node) && !actionCol.includeGroupedRows) {
-                this.eGui.innerHTML = '';
-                return;
-            }
-            const pkValue = adaptable.getPrimaryKeyValueFromRowNode(params.node);
-            const buttonContext = {
-                actionColumn: actionCol,
-                primaryKeyValue: pkValue,
-                rowNode: params.node,
-                adaptableApi: adaptable.api,
-            };
-            const renderActionButtons = (buttons, adaptableApi, context) => {
-                return (React.createElement(React.Fragment, null, buttons.map((button, index) => {
-                    var _a, _b;
-                    if (button.hidden && button.hidden(button, context)) {
-                        return;
-                    }
-                    const buttonIcon = adaptableApi.internalApi.getIconForButton(button, context, {
-                        height: 15,
-                        width: 15,
-                    });
-                    const buttonStyle = adaptableApi.internalApi.getStyleForButton(button, context);
-                    const buttonLabel = adaptableApi.internalApi.getLabelForButton(button, context);
-                    const buttonTooltip = adaptableApi.internalApi.getTooltipForButton(button, context);
-                    const handleClick = () => {
-                        button.onClick(button, context);
-                        // Timeout to let any updates to be done before re-rendering the component
-                        setTimeout(() => {
-                            // when called again it triggers a re-render
-                            // https:reactjs.org/docs/react-dom.html#render
-                            doRender();
-                        }, 16);
-                    };
-                    const disabled = button.disabled && button.disabled(button, context);
-                    return (React.createElement(SimpleButton_1.default, { key: button.Uuid, "data-name": `action-button-${index + 1}`, variant: (_a = buttonStyle === null || buttonStyle === void 0 ? void 0 : buttonStyle.variant) !== null && _a !== void 0 ? _a : 'text', disabled: disabled, tooltip: buttonTooltip, icon: buttonIcon, tone: (_b = buttonStyle === null || buttonStyle === void 0 ? void 0 : buttonStyle.tone) !== null && _b !== void 0 ? _b : 'none', onClick: handleClick, className: buttonStyle === null || buttonStyle === void 0 ? void 0 : buttonStyle.className, accessLevel: 'Full' }, buttonLabel));
-                })));
-            };
-            const eGui = this.eGui;
-            const doRender = () => {
-                this.unmountReactRoot = adaptable.renderReactRoot(renderActionButtons(actionButtons, adaptable.api, buttonContext), eGui);
-            };
-            this.render = doRender;
-            doRender();
+        const { actionButtons, actionColumn } = getActionButtonsAndActionColumn(adaptable, params.actionColumn, params.colDef.colId);
+        if (!actionColumn || !actionButtons.length) {
+            return;
+        }
+        // create the cell
+        this.eGui = document.createElement('div');
+        this.eGui.className = 'ab-ActionColumn';
+        // if its a group node then only show if set to do so
+        if (adaptable.api.gridApi.isGroupRowNode(params.node) && !actionColumn.includeGroupedRows) {
+            this.eGui.innerHTML = '';
+            return;
         }
+        const pkValue = adaptable.getPrimaryKeyValueFromRowNode(params.node);
+        const buttonContext = {
+            actionColumn,
+            primaryKeyValue: pkValue,
+            rowNode: params.node,
+            adaptableApi: adaptable.api,
+        };
+        const eGui = this.eGui;
+        const doRender = () => {
+            this.unmountReactRoot = adaptable.renderReactRoot(renderActionButtons(actionButtons, adaptable.api, buttonContext, doRender), eGui);
+        };
+        this.render = doRender;
+        doRender();
     }
     // defined on init
     // used to re-render in refresh

package/src/agGrid/Adaptable.d.ts

@@ -158,9 +158,7 @@ export declare class Adaptable implements IAdaptable {
     private createAdaptableColumn;
     private safeSetColDefs;
     private getStyledColumnStyle;
-    private getSpecialColumnStyle;
-    private getFormatColumnSpecialColumnStyle;
-    private getFormatColumnColumnStyle;
+    private getFormatColumnAdaptableStyle;
     private getFormatColumnCellStyle;
     private getFormatColumnCellClass;
     private getFormatColumnRowClass;
@@ -178,8 +176,6 @@ export declare class Adaptable implements IAdaptable {
     private getQuickSearchCellStyle;
     private getEditableCellStyle;
     private getReadOnlyCellStyle;
-    private getConditionalStyleCellStyle;
-    private getConditionalStyleCellClass;
     private getEditableCellClass;
     private getReadonlyCellClass;
     private isQuickSearchActive;
@@ -308,7 +304,7 @@ export declare class Adaptable implements IAdaptable {
      */
     private performPostEditChecks;
     private getExpressionStylesChanges;
-    private getFormatColumnComparisonChanges;
+    private getStyledColumnComparisonChanges;
     private checkChangedCellCurrentlySelected;
     private getColumnSorts;
     private onSortChanged;
@@ -365,8 +361,6 @@ export declare class Adaptable implements IAdaptable {
     applyAdaptableTheme(theme: AdaptableTheme | string): void;
     private setupRowStyling;
     private setupColumnHeaderAggregations;
-    private getConditionalStyleRowClass;
-    private getConditionalStyleRowStyle;
     private getGridOptionsApi;
     canGenerateCharts(): boolean;
     canHaveSparklines(): boolean;

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");
@@ -920,14 +919,11 @@ class Adaptable {
         this.updateColumnsIntoStore(); // todo remove this from here!!!
     }
     getStyledColumnStyle(styledColumn, abColumn, params) {
-        return this.getSpecialColumnStyle(styledColumn, abColumn, params);
-    }
-    getSpecialColumnStyle(columnStyle, 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.styledColumnApi.getNumericStyleMinValue(columnStyle, abColumn, params.node, params.value);
-            const max = this.api.styledColumnApi.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;
@@ -951,16 +947,13 @@ 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;
     }
-    getFormatColumnSpecialColumnStyle(formatColumn, abColumn, params) {
-        return this.getSpecialColumnStyle(formatColumn.ColumnStyle, abColumn, params);
-    }
-    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);
@@ -982,23 +975,14 @@ class Adaptable {
     }
     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) {
+        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));
+            style = Object.assign(Object.assign({}, style), this.getFormatColumnAdaptableStyle(activeFormatColumnsWithStyle));
         }
         return style;
     }
@@ -1174,31 +1158,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)) {
@@ -1918,7 +1877,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)) {
@@ -1973,7 +1932,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') {
@@ -2376,7 +2335,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,
                 },
@@ -2405,7 +2364,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);
@@ -3222,7 +3181,6 @@ class Adaptable {
             if (styledColumn === null || styledColumn === void 0 ? void 0 : styledColumn.IsSuspended) {
                 styledColumn = null;
             }
-            const conditionalStyles = this.api.conditionalStyleApi.getConditionalStylesForColumn(abColumn);
             const quickSearchStyle = this.getQuickSearchCellStyle();
             const hasQuickSearchStyle = quickSearchStyle != undefined;
             const cellStyle = (params) => {
@@ -3230,8 +3188,7 @@ class Adaptable {
                     ? 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(Object.assign({}, defaultCellStyle), this.getReadOnlyCellStyle(abColumn, params)), this.getEditableCellStyle(abColumn, params)), (typeof userCellStyle === 'function' ? userCellStyle(params) : userCellStyle)), formatColumnCellStyle), (styledColumn ? this.getStyledColumnStyle(styledColumn, abColumn, params) : {})), 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)), formatColumnCellStyle), (styledColumn ? this.getStyledColumnStyle(styledColumn, abColumn, params) : {})), (isQuickSearchActive ? quickSearchStyle : undefined)), this.getAlertCellStyle(abColumn, params)), this.getFlashingCellStyle(abColumn, params)), this.getCellHighlightStyle(abColumn, params));
                 return result;
             };
             return cellStyle;
@@ -3240,10 +3197,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) => {
@@ -3261,16 +3214,13 @@ class Adaptable {
                     !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);
                 const result = returnValue.length ? returnValue : undefined;
@@ -3292,9 +3242,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) {
@@ -3330,43 +3279,23 @@ class Adaptable {
                     return this.agGridHelper.createCheckboxRendererComp(abColumn.columnId, abColumn.readOnly);
                 }
             }
-            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.ColumnStyle, abColumn);
-                }
-                if (formatColumn.ColumnStyle.CheckBoxStyle) {
-                    return this.agGridHelper.createCheckboxRendererComp(abColumn.columnId, abColumn.readOnly);
-                }
-            }
         });
     }
     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.styledColumnApi.getNumericStyleMinValue(formatColumn === null || formatColumn === void 0 ? void 0 : formatColumn.ColumnStyle, abColumn, params.node, params.value);
-                        const max = this.api.styledColumnApi.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);
@@ -3761,7 +3690,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);
                 }
@@ -3771,7 +3700,6 @@ class Adaptable {
     }
     getExpressionStylesChanges(dataChangedScope, cellDataChangedInfos) {
         const stylesWithExpression = [];
-        stylesWithExpression.push(...this.api.conditionalStyleApi.getConditionalStylesWithExpression());
         stylesWithExpression.push(...this.api.formatColumnApi.getFormatColumnsWithExpression());
         if (ArrayExtensions_1.ArrayExtensions.IsNullOrEmpty(stylesWithExpression)) {
             return;
@@ -3800,20 +3728,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);
                         }
                     });
                 }
@@ -4412,12 +4335,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;
             };
         });
@@ -4430,7 +4351,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()
@@ -4449,30 +4369,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.');

package/src/agGrid/CheckboxRenderer.js

@@ -30,7 +30,7 @@ const getCheckboxRendererForColumn = (columnId, isColumnReadOnly, api) => {
     CheckboxRenderer.prototype.checkedHandler = function (e) {
         let checked = e.target.checked;
         this.params.node.setDataValue(columnId, checked);
-        api.formatColumnApi.fireCheckboxColumnClickedEvent(columnId, this.params.node.data, api.gridApi.getPrimaryKeyValueForRowNode(this.params.node), checked);
+        api.styledColumnApi.fireCheckboxColumnClickedEvent(columnId, this.params.node.data, api.gridApi.getPrimaryKeyValueForRowNode(this.params.node), checked);
     };
     CheckboxRenderer.prototype.suppressEditEvent = function (event) {
         if (event.target === this.eGui) {

package/src/agGrid/PercentBarRenderer.d.ts

@@ -1,4 +1,4 @@
-import { GradientStyle, PercentBarStyle } from '../PredefinedConfig/FormatColumnState';
+import { GradientStyle, PercentBarStyle } from '../PredefinedConfig/StyledColumnState';
 import { AdaptableApi } from '../Api/AdaptableApi';
 import { AdaptableColumn } from '../PredefinedConfig/Common/AdaptableColumn';
 export declare const getPercentBarRendererForColumn: (columnStyle: {

package/src/agGrid/PercentBarRenderer.js

@@ -4,6 +4,7 @@ exports.getPercentBarRendererForColumn = void 0;
 const tslib_1 = require("tslib");
 const Helper_1 = tslib_1.__importDefault(require("../Utilities/Helpers/Helper"));
 const clamp_1 = tslib_1.__importDefault(require("lodash/clamp"));
+const FormatHelper_1 = require("../Utilities/Helpers/FormatHelper");
 const getPercentBarRendererForColumn = (columnStyle, abColumn, api) => {
     if (!columnStyle.PercentBarStyle) {
         return;
@@ -56,6 +57,18 @@ const getPercentBarRendererForColumn = (columnStyle, abColumn, api) => {
                     textEl.className = 'ab-PercentBar__text';
                     textEl.style.lineHeight = '1.2';
                     if (percentBarStyle.CellText.includes('CellValue')) {
+                        let preparedValue = value;
+                        const formatColumn = api.formatColumnApi.getFormatColumnWithDisplayFormatForColumn(abColumn);
+                        if (formatColumn &&
+                            !formatColumn.IsSuspended &&
+                            formatColumn.DisplayFormat &&
+                            api.scopeApi.isColumnInNumericScope(abColumn, formatColumn.Scope)) {
+                            const options = formatColumn.DisplayFormat.Options;
+                            value = api.formatColumnApi.getNumberFormattedValue(params.value, params.node, abColumn, options);
+                        }
+                        else {
+                            value = (0, FormatHelper_1.NumberFormatter)(value, { FractionDigits: 2 });
+                        }
                         textEl.innerText = value;
                     }
                     if (percentBarStyle.CellText.includes('PercentageValue')) {

package/src/agGrid/agGridHelper.d.ts

@@ -5,7 +5,7 @@ import { AdaptableNodeComparerFunction } from '../PredefinedConfig/Common/Adapta
 import { AdaptableColumnType, AdaptableModule } from '../PredefinedConfig/Common/Types';
 import { IModule } from '../Strategy/Interface/IModule';
 import { IPPStyle } from '../Utilities/Interface/IPPStyle';
-import { GradientStyle, PercentBarStyle } from '../PredefinedConfig/FormatColumnState';
+import { GradientStyle, PercentBarStyle } from '../PredefinedConfig/StyledColumnState';
 /**
  * Adaptable AG Grid implementation is getting really big and unwieldy
  * So lets put some of the more obvious 'Helper' functions here

package/src/metamodel/adaptable.metamodel.d.ts

@@ -4728,6 +4728,13 @@ export declare const ADAPTABLE_METAMODEL: {
             uiLabel: string;
             isOptional: boolean;
             reference?: undefined;
+        } | {
+            name: string;
+            kind: string;
+            description: string;
+            uiLabel: string;
+            isOptional?: undefined;
+            reference?: undefined;
         } | {
             name: string;
             kind: string;