@adaptabletools/adaptable 13.0.0-canary.3 → 13.0.0-canary.5

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@adaptabletools/adaptable",
-  "version": "13.0.0-canary.3",
+  "version": "13.0.0-canary.5",
   "description": "Powerful data-agnostic HTML5 datagrid add-on that sits on top of an underlying grid component and provides all the rich functionality that advanced users expect from their DataGrids and Data Tables",
   "keywords": [
     "web-components",

package/publishTimestamp.d.ts

@@ -1,2 +1,2 @@
-declare const _default: 1663245222592;
+declare const _default: 1663264208160;
 export default _default;

package/publishTimestamp.js

@@ -1,3 +1,3 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.default = 1663245222592;
+exports.default = 1663264208160;

package/src/AdaptableOptions/GeneralOptions.d.ts

@@ -65,6 +65,12 @@ export interface GeneralOptions {
      * Value to use for 'Unbalanced Groups' (string columns)
      */
     unbalancedGroupsKey?: string | ((context: UnbalancedGroupsKeyContext) => string);
+    /**
+     * Starting with v13, ConditionalStyle module is deprecated, and it's functionality is merged into the FormatColumn module. By default, all existing conditional styles are migrated to format columns. By setting this property to TRUE, the conditional styles are not migrated.
+     *
+     * @defaultValue false
+     */
+    keepDeprecatedConditionalStyles?: boolean;
 }
 /**
  * Comparer object for Column Values - used for custom sorting

package/src/Api/FormatColumnApi.d.ts

@@ -245,4 +245,9 @@ export interface FormatColumnApi {
         node: RowNode;
         value: any;
     }): boolean;
+    /**
+     * Retrieves all Format Columns which have an Expression
+     * @returns Format Columns with Expression
+     */
+    getFormatColumnsWithExpression(): FormatColumn[] | undefined;
 }

package/src/Api/Implementation/ColumnApiImpl.js

@@ -89,13 +89,13 @@ class ColumnApiImpl extends ApiBase_1.ApiBase {
         return false;
     }
     isNumericColumn(column) {
-        return column.dataType == 'Number';
+        return (column === null || column === void 0 ? void 0 : column.dataType) == 'Number';
     }
     isBooleanColumn(column) {
-        return column.dataType == 'Boolean';
+        return (column === null || column === void 0 ? void 0 : column.dataType) == 'Boolean';
     }
     isDateColumn(column) {
-        return column.dataType == 'Date';
+        return (column === null || column === void 0 ? void 0 : column.dataType) == 'Date';
     }
     getColumnDataTypeFromColumnId(columnId) {
         const column = this.getColumnFromId(columnId); // this.getColumns().find(c => c.ColumnId == columnId);

package/src/Api/Implementation/FormatColumnApiImpl.d.ts

@@ -67,4 +67,5 @@ export declare class FormatColumnApiImpl extends ApiBase implements FormatColumn
     private evaluatePredicate;
     private shouldRunStyle;
     private evaluateExpression;
+    getFormatColumnsWithExpression(): FormatColumn[] | undefined;
 }

package/src/Api/Implementation/FormatColumnApiImpl.js

@@ -435,5 +435,8 @@ class FormatColumnApiImpl extends ApiBase_1.ApiBase {
                 .getQueryLanguageService()
                 .evaluateBooleanExpression(formatColumn.Rule.BooleanExpression, ModuleConstants.FormatColumnModuleId, node));
     }
+    getFormatColumnsWithExpression() {
+        return this.getAllFormatColumn().filter((fc) => { var _a; return !!((_a = fc.Rule) === null || _a === void 0 ? void 0 : _a.BooleanExpression); });
+    }
 }
 exports.FormatColumnApiImpl = FormatColumnApiImpl;

package/src/Api/Implementation/InternalApiImpl.d.ts

@@ -142,4 +142,5 @@ export declare class InternalApiImpl extends ApiBase implements InternalApi {
     getValueForTag(adaptableObjectTag: AdaptableObjectTag): string | number;
     getEditLookUpValuesForColumn(editLookUpItem: EditLookUpPermittedValues, column: AdaptableColumn, gridCell?: GridCell): any[] | undefined;
     getAdaptableQueryExpressionText(query: Partial<AdaptableQuery>): string;
+    shouldKeepDeprecatedConditionalStyles(): boolean;
 }

package/src/Api/Implementation/InternalApiImpl.js

@@ -650,5 +650,9 @@ class InternalApiImpl extends ApiBase_1.ApiBase {
             ? this.adaptable.api.queryLanguageApi.getAdaptableQueryExpressionWithColumnFriendlyNames(query)
             : this.adaptable.api.queryLanguageApi.getAdaptableQueryExpression(query);
     }
+    shouldKeepDeprecatedConditionalStyles() {
+        var _a, _b;
+        return (_b = (_a = this.getOptions()) === null || _a === void 0 ? void 0 : _a.generalOptions) === null || _b === void 0 ? void 0 : _b.keepDeprecatedConditionalStyles;
+    }
 }
 exports.InternalApiImpl = InternalApiImpl;

package/src/Api/Implementation/ToolPanelApiImpl.d.ts

@@ -3,7 +3,7 @@ import { ToolPanelApi } from '../ToolPanelApi';
 import { ToolPanelState, ToolPanelVisibilityMode } from '../../PredefinedConfig/ToolPanelState';
 import { CustomToolPanel, ToolPanelButtonContext } from '../../AdaptableOptions/ToolPanelOptions';
 import { AdaptableButton } from '../../PredefinedConfig/Common/AdaptableButton';
-import { AdaptableToolPanel } from '../../PredefinedConfig/Common/Types';
+import { AdaptableModuleButtons, AdaptableToolPanel } from '../../PredefinedConfig/Common/Types';
 export declare class ToolPanelApiImpl extends ApiBase implements ToolPanelApi {
     getToolPanelState(): ToolPanelState;
     showToolPanelPopup(): void;
@@ -14,6 +14,8 @@ export declare class ToolPanelApiImpl extends ApiBase implements ToolPanelApi {
     getCustomToolPanelByName(name: string): CustomToolPanel | undefined;
     setAdaptableToolPanelVisibilityMode(adaptableToolPanel: AdaptableToolPanel, visibilityMode: ToolPanelVisibilityMode): void;
     setCustomToolPanelVisibilityMode(customToolPanelName: string, visibilityMode: ToolPanelVisibilityMode): void;
+    setModuleButtons(moduleButtons: AdaptableModuleButtons): void;
+    getModuleButtons(): AdaptableModuleButtons;
     private setExpandedToolPanelVisibility;
     private setCollapsedToolPanelVisibility;
 }

package/src/Api/Implementation/ToolPanelApiImpl.js

@@ -5,6 +5,7 @@ const tslib_1 = require("tslib");
 const ApiBase_1 = require("./ApiBase");
 const ModuleConstants = tslib_1.__importStar(require("../../Utilities/Constants/ModuleConstants"));
 const ToolPanelRedux = tslib_1.__importStar(require("../../Redux/ActionsReducers/ToolPanelRedux"));
+const ToolPanelRedux_1 = require("../../Redux/ActionsReducers/ToolPanelRedux");
 class ToolPanelApiImpl extends ApiBase_1.ApiBase {
     getToolPanelState() {
         return this.getAdaptableState().ToolPanel;
@@ -51,6 +52,13 @@ class ToolPanelApiImpl extends ApiBase_1.ApiBase {
             this.setCollapsedToolPanelVisibility(customToolPanelName);
         }
     }
+    setModuleButtons(moduleButtons) {
+        this.dispatchAction((0, ToolPanelRedux_1.ToolPanelSetModuleButtons)(moduleButtons));
+    }
+    getModuleButtons() {
+        var _a, _b;
+        return (_b = (_a = this.getToolPanelState()) === null || _a === void 0 ? void 0 : _a.ModuleButtons) !== null && _b !== void 0 ? _b : [];
+    }
     setExpandedToolPanelVisibility(toolPanelName) {
         this.dispatchAction(ToolPanelRedux.ToolPanelExpandToolPanel(toolPanelName));
     }

package/src/Api/InternalApi.d.ts

@@ -144,4 +144,5 @@ export interface InternalApi {
     getValueForTag(adaptableObjectTag: AdaptableObjectTag): string | number;
     getEditLookUpValuesForColumn(editLookUpItem: EditLookUpPermittedValues, column: AdaptableColumn, gridCell?: GridCell): any[] | undefined;
     getAdaptableQueryExpressionText(query: Partial<AdaptableQuery>): string;
+    shouldKeepDeprecatedConditionalStyles(): boolean;
 }

package/src/Api/ToolPanelApi.d.ts

@@ -1,7 +1,7 @@
 import { ToolPanelState, ToolPanelVisibilityMode } from '../PredefinedConfig/ToolPanelState';
 import { CustomToolPanel, ToolPanelButtonContext } from '../AdaptableOptions/ToolPanelOptions';
 import { AdaptableButton } from '../PredefinedConfig/Common/AdaptableButton';
-import { AdaptableToolPanel } from '../PredefinedConfig/Common/Types';
+import { AdaptableModuleButtons, AdaptableToolPanel } from '../PredefinedConfig/Common/Types';
 /**
  * Functions for managing the AdapTable ToolPanel Component (at side of grid)
  */
@@ -47,4 +47,13 @@ export interface ToolPanelApi {
      * @param visibilityMode
      */
     setCustomToolPanelVisibilityMode(customToolPanelName: string, visibilityMode: ToolPanelVisibilityMode): void;
+    /**
+     * Sets the Module buttons in the Adaptable ToolPanel
+     * @param moduleButtons the module buttons
+     */
+    setModuleButtons(moduleButtons: AdaptableModuleButtons): void;
+    /**
+     * Sets the Module buttons from the Adaptable ToolPanel
+     */
+    getModuleButtons(): AdaptableModuleButtons;
 }

package/src/Strategy/ConditionalStyleModule.d.ts

@@ -7,8 +7,10 @@ import { AdaptableModuleBase } from './AdaptableModuleBase';
 import { IConditionalStyleModule } from './Interface/IConditionalStyleModule';
 import { AdaptableObject } from '../PredefinedConfig/Common/AdaptableObject';
 import { AdaptableModuleView, AdaptableObjectView } from './Interface/IModule';
+import { AccessLevel } from '../types';
 export declare class ConditionalStyleModule extends AdaptableModuleBase implements IConditionalStyleModule {
     constructor(api: AdaptableApi);
+    getViewAccessLevel(): AccessLevel;
     getModuleAdaptableObjects(config?: {
         includeLayoutNotAssociatedObjects?: boolean;
     }): AdaptableObject[];

package/src/Strategy/ConditionalStyleModule.js

@@ -13,10 +13,15 @@ const ConditionalStyleWizard_1 = require("../View/ConditionalStyle/Wizard/Condit
 const getRuleViewItems_1 = require("./Utilities/getRuleViewItems");
 const getStyleViewItems_1 = require("./Utilities/getStyleViewItems");
 const getObjectTagsViewItems_1 = require("./Utilities/getObjectTagsViewItems");
+const ConditionalStylePopupHeader_1 = require("../View/ConditionalStyle/ConditionalStylePopupHeader");
 class ConditionalStyleModule extends AdaptableModuleBase_1.AdaptableModuleBase {
     constructor(api) {
         super(ModuleConstants.ConditionalStyleModuleId, ModuleConstants.ConditionalStyleFriendlyName, 'conditional-style', 'ConditionalStylePopup', 'Style columns and rows dynamically based on rules and cell values', api);
     }
+    getViewAccessLevel() {
+        const keepDeprecatedConditionalStyles = this.api.internalApi.shouldKeepDeprecatedConditionalStyles();
+        return keepDeprecatedConditionalStyles ? super.getViewAccessLevel() : 'Hidden';
+    }
     getModuleAdaptableObjects(config) {
         return this.api.conditionalStyleApi.getAllConditionalStyle(config);
     }
@@ -209,6 +214,7 @@ class ConditionalStyleModule extends AdaptableModuleBase_1.AdaptableModuleBase {
     }
     getViewProperties() {
         return {
+            HeaderComponent: ConditionalStylePopupHeader_1.ConditionalStylePopupHeader,
             getDeleteAction: (conditionalStyle) => ConditionalStyleRedux.ConditionalStyleDelete(conditionalStyle),
             getSuspendAction: (conditionalStyle) => ConditionalStyleRedux.ConditionalStyleSuspend(conditionalStyle),
             getUnSuspendAction: (conditionalStyle) => ConditionalStyleRedux.ConditionalStyleUnSuspend(conditionalStyle),

package/src/Strategy/FormatColumnModule.d.ts

@@ -14,6 +14,8 @@ export declare class FormatColumnModule extends AdaptableModuleBase implements I
     getExplicitlyReferencedColumnIds(formatColumn: FormatColumn): string[];
     hasNamedQueryReferences(): boolean;
     updateOldConfig(): void;
+    private updateConditionalStylesColumnsOldConfig;
+    private updateGradientColumnsOldConfig;
     private getExistingFormatColumn;
     addColumnMenuItems(column: AdaptableColumn): AdaptableMenuItem[] | undefined;
     getTeamSharingAction(): TeamSharingImportInfo<FormatColumn>;

package/src/Strategy/FormatColumnModule.js

@@ -62,6 +62,52 @@ class FormatColumnModule extends AdaptableModuleBase_1.AdaptableModuleBase {
             .FormatColumn) === null || _a === void 0 ? void 0 : _a.FormatColumns) === null || _b === void 0 ? void 0 : _b.some((formatColumn) => !!formatColumn.HeaderName)) {
             (0, LoggingHelper_1.ConsoleLogWarning)(`DEPRECATED: The 'FormatColumn.HeaderName' property is deprecated; use a Layout custom Column Header instead!`);
         }
+        this.updateGradientColumnsOldConfig();
+        const keepDeprecatedConditionalStyles = this.api.internalApi.shouldKeepDeprecatedConditionalStyles();
+        if (!keepDeprecatedConditionalStyles) {
+            this.updateConditionalStylesColumnsOldConfig();
+            // update ConditionalStyle StatusBarPanel
+            const oldStatusBars = this.api.internalApi.getState().StatusBar.StatusBars;
+            let replaceConditionalStyleStatusBar = false;
+            const newStatusBars = oldStatusBars.map((statusBar) => (Object.assign(Object.assign({}, statusBar), { StatusBarPanels: [
+                    ...new Set(statusBar.StatusBarPanels.map((statusBarPanel) => {
+                        if (statusBarPanel === 'ConditionalStyle') {
+                            replaceConditionalStyleStatusBar = true;
+                            return 'FormatColumn';
+                        }
+                        return statusBarPanel;
+                    })),
+                ] })));
+            if (replaceConditionalStyleStatusBar) {
+                this.api.statusBarApi.setStatusBarPanels(newStatusBars);
+            }
+            // update ConditionalStyle dashboard buttons
+            const dashboardModuleButtons = this.api.internalApi.getState().Dashboard.ModuleButtons;
+            if (dashboardModuleButtons.includes('ConditionalStyle')) {
+                dashboardModuleButtons[dashboardModuleButtons.indexOf('ConditionalStyle')] = 'FormatColumn';
+                this.api.dashboardApi.setModuleButtons([...new Set(dashboardModuleButtons)]);
+            }
+            // update ConditionalStyle toolPanel buttons
+            const toolPanelModuleButtons = this.api.internalApi.getState().ToolPanel.ModuleButtons;
+            if (toolPanelModuleButtons.includes('ConditionalStyle')) {
+                toolPanelModuleButtons[toolPanelModuleButtons.indexOf('ConditionalStyle')] = 'FormatColumn';
+                this.api.toolPanelApi.setModuleButtons([...new Set(dashboardModuleButtons)]);
+            }
+        }
+    }
+    updateConditionalStylesColumnsOldConfig() {
+        var _a;
+        const oldConditionalStyles = (_a = this.api.internalApi.getState().ConditionalStyle) === null || _a === void 0 ? void 0 : _a.ConditionalStyles;
+        if (!(oldConditionalStyles === null || oldConditionalStyles === void 0 ? void 0 : oldConditionalStyles.length)) {
+            return;
+        }
+        (0, LoggingHelper_1.ConsoleLogWarning)(`DEPRECATED: The 'ConditionalStyle.ConditionalStyles' property is deprecated; use 'FormatColumn' instead!`);
+        // remove conditional styles
+        this.api.conditionalStyleApi.deleteConditionalStyles(oldConditionalStyles);
+        // add as format column
+        this.api.formatColumnApi.addFormatColumns(oldConditionalStyles);
+    }
+    updateGradientColumnsOldConfig() {
         let newFormatColumns = [];
         let existingFormatColumns = [];
         // 1. Convert Gradient Columns to Format Columns

package/src/Strategy/Interface/IModule.d.ts

@@ -88,6 +88,7 @@ export interface AdaptableModuleView {
      */
     actions?: AdaptableModuleViewAction[];
     onMount?: () => void;
+    HeaderComponent?: React.FunctionComponent;
     onOpenEditPopup?: (abObject?: AdaptableObject) => void;
     getDeleteAction?: (abObject: AdaptableObject) => Redux.Action;
     getCompactDeleteAction?: (abObject: AdaptableObject) => Redux.Action;

package/src/Utilities/Defaults/DefaultAdaptableOptions.js

@@ -152,6 +152,7 @@ exports.DefaultAdaptableOptions = {
         customSortComparers: undefined,
         englishVariant: 'GB',
         unbalancedGroupsKey: undefined,
+        keepDeprecatedConditionalStyles: false,
     },
     layoutOptions: {
         includeExpandedRowGroups: false,

package/src/View/Components/EntityRulesEditor/index.d.ts

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { FlexProps } from 'rebass';
-import type { AdaptablePredicate, AdaptablePredicateDef, AdaptableScope, AdaptableApi, AdaptableModule } from '../../../types';
+import type { AdaptableApi, AdaptableModule, AdaptablePredicate, AdaptablePredicateDef, AdaptableScope } from '../../../types';
 import type { XOR } from '../../../Utilities/Extensions/TypeExtensions';
 import { AdaptableQuery } from '../../../PredefinedConfig/Common/AdaptableQuery';
 import { OnePageAdaptableWizardContextType } from '../../Wizard/OnePageAdaptableWizard';
@@ -13,6 +13,7 @@ export declare const isRuleValid: (abObject: {
 declare type EntityRulesEditorProps<T> = {
     data: T;
     module: AdaptableModule;
+    showNoRule?: boolean;
     showPredicate?: boolean;
     showObservable?: boolean;
     showAggregation?: boolean;

package/src/View/Components/EntityRulesEditor/index.js

@@ -3,6 +3,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.EntityRulesEditor = exports.EntityRulesSummary = exports.isRuleValid = void 0;
 const tslib_1 = require("tslib");
 const React = tslib_1.__importStar(require("react"));
+const react_1 = require("react");
 const rebass_1 = require("rebass");
 const Tabs_1 = require("../../../components/Tabs");
 const Radio_1 = tslib_1.__importDefault(require("../../../components/Radio"));
@@ -13,7 +14,6 @@ const AdaptableInput_1 = tslib_1.__importDefault(require("../AdaptableInput"));
 const AdaptableContext_1 = require("../../AdaptableContext");
 const ButtonInfo_1 = require("../Buttons/ButtonInfo");
 const DocumentationLinkConstants_1 = require("../../../Utilities/Constants/DocumentationLinkConstants");
-const react_1 = require("react");
 const PermittedValuesSelector_1 = require("../PermittedValuesSelector");
 const isRuleValid = (abObject, api, context) => {
     var _a, _b, _c, _d, _e, _f;
@@ -52,20 +52,26 @@ const EntityRulesSummary = (props) => {
 };
 exports.EntityRulesSummary = EntityRulesSummary;
 const EntityRulesEditor = (props) => {
-    var _a, _b;
-    const { data, children, descriptions, predicateDefs, showPredicate = true, showObservable = true, showBoolean = true, showAggregation = true, flexProps, module, } = props;
+    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
+    const { data, children, descriptions, predicateDefs, showNoRule = false, showPredicate = true, showObservable = true, showBoolean = true, showAggregation = true, flexProps, module, } = props;
     const { api } = (0, AdaptableContext_1.useAdaptable)();
-    const type = data.Rule.BooleanExpression != undefined
-        ? 'BooleanExpression'
-        : data.Rule.ObservableExpression != undefined && showObservable
-            ? 'ObservableExpression'
-            : data.Rule.AggregatedBooleanExpression != undefined && showAggregation
-                ? 'AggregatedBooleanExpression'
-                : 'Predicate';
+    const type = data.Rule == undefined
+        ? 'NoRule'
+        : data.Rule.BooleanExpression != undefined
+            ? 'BooleanExpression'
+            : data.Rule.ObservableExpression != undefined && showObservable
+                ? 'ObservableExpression'
+                : data.Rule.AggregatedBooleanExpression != undefined && showAggregation
+                    ? 'AggregatedBooleanExpression'
+                    : 'Predicate';
     const [selectedTab, setSelectedTab] = React.useState(type);
     const setType = (type) => {
         setSelectedTab(type);
-        if (type === 'BooleanExpression' && showBoolean) {
+        if (type === 'NoRule' && showNoRule) {
+            delete data.Rule;
+            props.onChange(Object.assign({}, data));
+        }
+        else if (type === 'BooleanExpression' && showBoolean) {
             props.onChange(Object.assign(Object.assign({}, data), { Rule: {
                     BooleanExpression: '',
                 } }));
@@ -88,8 +94,8 @@ const EntityRulesEditor = (props) => {
                 } }));
         }
     };
-    const predicateId = data.Rule.Predicate != undefined ? data.Rule.Predicate.PredicateId : undefined;
-    const predicateInputs = predicateId ? (_a = data.Rule.Predicate.Inputs) !== null && _a !== void 0 ? _a : [] : [];
+    const predicateId = ((_a = data.Rule) === null || _a === void 0 ? void 0 : _a.Predicate) != undefined ? (_b = data.Rule) === null || _b === void 0 ? void 0 : _b.Predicate.PredicateId : undefined;
+    const predicateInputs = predicateId ? (_d = (_c = data.Rule) === null || _c === void 0 ? void 0 : _c.Predicate.Inputs) !== null && _d !== void 0 ? _d : [] : [];
     const currentPredicateDef = api.predicateApi.getPredicateDefById(predicateId);
     const isValuesPredicateDef = (colDef) => colDef && ['Values', 'ExcludeValues'].includes(colDef.id);
     const predicateDefsOptions = predicateDefs
@@ -158,6 +164,10 @@ const EntityRulesEditor = (props) => {
     return (React.createElement(rebass_1.Flex, Object.assign({ flexDirection: "column", padding: 2, pt: 0, pl: 0 }, flexProps, { style: Object.assign({ height: '100%' }, flexProps === null || flexProps === void 0 ? void 0 : flexProps.style) }),
         children,
         React.createElement(Tabs_1.Tabs, { onValueChange: setType, value: selectedTab, pt: 2, pl: 2, style: { flex: 1, overflow: 'auto' } },
+            showNoRule ? (React.createElement(Tabs_1.Tabs.Tab, { value: 'NoRule', style: { flex: 1 } },
+                React.createElement(Radio_1.default, { tabIndex: -1, margin: 0, checked: type === 'NoRule' }, "No Condition"))) : null,
+            showNoRule ? (React.createElement(Tabs_1.Tabs.Content, { value: 'NoRule' },
+                React.createElement(rebass_1.Text, { fontSize: 2, mb: 2 }, 'Format Column is always applied'))) : null,
             showPredicate ? (React.createElement(Tabs_1.Tabs.Tab, { value: 'Predicate', style: { flex: 1 } },
                 React.createElement(Radio_1.default, { tabIndex: -1, margin: 0, checked: type === 'Predicate' }, "Predicate"))) : null,
             showPredicate ? (React.createElement(Tabs_1.Tabs.Content, { value: "Predicate" },
@@ -168,13 +178,13 @@ const EntityRulesEditor = (props) => {
                         overflow: 'hidden',
                         textOverflow: 'ellipsis',
                         maxWidth: 'inherit',
-                    }, placeholder: "Select Rule", showClearButton: !!data.Rule.Predicate, onClear: clearPredicate, items: predicateDefsOptions, columns: ['label'] }, currentPredicateDef ? currentPredicateDef.label : 'Select Rule'), (_b = currentPredicateDef === null || currentPredicateDef === void 0 ? void 0 : currentPredicateDef.inputs) === null || _b === void 0 ? void 0 :
-                _b.map((predicateDefInput, index) => (React.createElement(rebass_1.Flex, { key: predicateId + index, flexDirection: "column" },
+                    }, placeholder: "Select Rule", showClearButton: !!((_e = data.Rule) === null || _e === void 0 ? void 0 : _e.Predicate), onClear: clearPredicate, items: predicateDefsOptions, columns: ['label'] }, currentPredicateDef ? currentPredicateDef.label : 'Select Rule'), (_f = currentPredicateDef === null || currentPredicateDef === void 0 ? void 0 : currentPredicateDef.inputs) === null || _f === void 0 ? void 0 :
+                _f.map((predicateDefInput, index) => (React.createElement(rebass_1.Flex, { key: predicateId + index, flexDirection: "column" },
                     index > 0 && React.createElement(HelpBlock_1.default, { marginTop: 2 }, "AND"),
                     React.createElement(AdaptableInput_1.default, { marginTop: 2, type: predicateDefInput.type, autoFocus: index === 0, value: predicateInputs[index], onChange: (e) => onPredicateInputChange(e, index) })))),
                 isValuesPredicateDef(currentPredicateDef) &&
                     'ColumnIds' in data.Scope &&
-                    data.Scope.ColumnIds.length === 1 && (React.createElement(PermittedValuesSelector_1.PermitedValuesSelector, { onPredicateValuesChange: onPredicateValuesChange, predicate: data.Rule.Predicate, scope: data.Scope })),
+                    data.Scope.ColumnIds.length === 1 && (React.createElement(PermittedValuesSelector_1.PermitedValuesSelector, { onPredicateValuesChange: onPredicateValuesChange, predicate: (_g = data.Rule) === null || _g === void 0 ? void 0 : _g.Predicate, scope: data.Scope })),
                 showDocumentationLinks && (React.createElement(HelpBlock_1.default, { "data-name": "query-documentation", mt: 3, mb: 2, style: {
                         fontSize: 'var(--ab-font-size-3)',
                         padding: 0,
@@ -187,12 +197,12 @@ const EntityRulesEditor = (props) => {
                     "See Predicate documentation for more details and examples")))) : null,
             showBoolean ? React.createElement(QueryTab, { value: "BooleanExpression", type: type, label: "Boolean" }) : null,
             showBoolean ? (React.createElement(Tabs_1.Tabs.Content, { value: 'BooleanExpression', paddingLeft: 0 },
-                React.createElement(ExpressionEditor_1.ExpressionEditor, { type: 'boolean', module: module, value: data.Rule.BooleanExpression, onChange: setBooleanExpression, initialData: initialData, columns: api.columnApi.getQueryableColumns(), namedQueries: api.queryApi.getAllNamedQuery(), api: api }))) : null,
+                React.createElement(ExpressionEditor_1.ExpressionEditor, { type: 'boolean', module: module, value: (_h = data.Rule) === null || _h === void 0 ? void 0 : _h.BooleanExpression, onChange: setBooleanExpression, initialData: initialData, columns: api.columnApi.getQueryableColumns(), namedQueries: api.queryApi.getAllNamedQuery(), api: api }))) : null,
             showObservable ? (React.createElement(QueryTab, { value: "ObservableExpression", type: type, label: "Observable" })) : null,
             showObservable ? (React.createElement(Tabs_1.Tabs.Content, { value: 'ObservableExpression', paddingLeft: 0 },
-                React.createElement(ExpressionEditor_1.ExpressionEditor, { type: 'observable', module: module, value: data.Rule.ObservableExpression, onChange: setReactiveExpression, initialData: initialData, columns: api.columnApi.getQueryableColumns(), namedQueries: api.queryApi.getAllNamedQuery(), api: api }))) : null,
+                React.createElement(ExpressionEditor_1.ExpressionEditor, { type: 'observable', module: module, value: (_j = data.Rule) === null || _j === void 0 ? void 0 : _j.ObservableExpression, onChange: setReactiveExpression, initialData: initialData, columns: api.columnApi.getQueryableColumns(), namedQueries: api.queryApi.getAllNamedQuery(), api: api }))) : null,
             showAggregation ? (React.createElement(QueryTab, { value: "AggregatedBooleanExpression", type: type, label: "Aggregated Boolean" })) : null,
             showAggregation ? (React.createElement(Tabs_1.Tabs.Content, { value: 'AggregatedBooleanExpression', paddingLeft: 0 },
-                React.createElement(ExpressionEditor_1.ExpressionEditor, { type: 'aggregatedBoolean', module: module, value: data.Rule.AggregatedBooleanExpression, onChange: setAggregationExpression, initialData: initialData, columns: api.columnApi.getQueryableColumns(), namedQueries: api.queryApi.getAllNamedQuery(), api: api }))) : null)));
+                React.createElement(ExpressionEditor_1.ExpressionEditor, { type: 'aggregatedBoolean', module: module, value: (_k = data.Rule) === null || _k === void 0 ? void 0 : _k.AggregatedBooleanExpression, onChange: setAggregationExpression, initialData: initialData, columns: api.columnApi.getQueryableColumns(), namedQueries: api.queryApi.getAllNamedQuery(), api: api }))) : null)));
 };
 exports.EntityRulesEditor = EntityRulesEditor;

package/src/View/Components/Popups/AdaptablePopup/AdaptablePopupModuleView.js

@@ -111,6 +111,7 @@ const AdaptablePopupModuleView = (props) => {
                 "s not available in current Layout")));
     };
     return (React.createElement(PopupPanel_1.PopupPanel, { glyphicon: moduleInfo.Glyph, infoLink: moduleInfo.HelpPage, headerText: moduleInfo.FriendlyName, button: newButton, infoLinkDisabled: !props.api.internalApi.isDocumentationLinksDisplayed() },
+        moduleViewProperties.HeaderComponent && React.createElement(moduleViewProperties.HeaderComponent, null),
         toggleButtonShowLayoutAssociatedObjects(),
         (items === null || items === void 0 ? void 0 : items.length) ? (React.createElement(AdaptableObjectList_1.AdaptableObjectList, { module: props.module, items: items })) : (React.createElement(EmptyContent_1.default, null, emptyContent !== null && emptyContent !== void 0 ? emptyContent : `Click 'New' to create a new ${moduleInfo.FriendlyName}`)),
         isWizardOpen && EditWizard && (React.createElement(EditWizard, { abObjectType: abObjectType, moduleInfo: moduleInfo, data: null, popupParams: props.popupParams, configEntities: null, onCloseWizard: handleWizardClose, onFinishWizard: handleWizardClose }))));

package/src/View/ConditionalStyle/ConditionalStylePopupHeader.d.ts

@@ -0,0 +1,2 @@
+import * as React from 'react';
+export declare const ConditionalStylePopupHeader: React.FunctionComponent;

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/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

@@ -4,6 +4,5 @@ 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

@@ -1,66 +1,29 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.FormatColumnRuleWizardSection = exports.renderFormatColumnRuleSummary = void 0;
+exports.FormatColumnRuleWizardSection = 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")),
-            } }))));
+    return (React.createElement(EntityRulesEditor_1.EntityRulesEditor, { module: moduleInfo.ModuleName, defaultPredicateId: props.defaultPredicateId, 
+        // TODO see what is this
+        predicateDefs: api.formatColumnApi.getFormatColumnDefsForScope(data.Scope), showNoRule: true, showBoolean: !hasIncompatibleStyle, showAggregation: false, showObservable: false, showPredicate: !hasIncompatibleStyle && !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/FormatColumnWizard.js

@@ -123,8 +123,7 @@ function FormatColumnWizard(props) {
                 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 })));
+                    return (React.createElement(FormatColumnRuleWizardSection_1.FormatColumnRuleWizardSection, { onChange: setFormatColumn, defaultPredicateId: constants_1.DEFAULT_PREDICATE_ID_FOR_FORMAT_COLUMN }));
                 },
             },
             {

package/src/agGrid/Adaptable.js

@@ -3733,23 +3733,25 @@ class Adaptable {
         firstInfo.trigger == 'tick' ? this.filterOnTickingDataChange() : this.filterOnEditDataChange();
     }
     getExpressionStylesChanges(dataChangedScope, cellDataChangedInfos) {
-        const stylesWithExpression = this.api.conditionalStyleApi.getConditionalStylesWithExpression();
+        const stylesWithExpression = [];
+        stylesWithExpression.push(...this.api.conditionalStyleApi.getConditionalStylesWithExpression());
+        stylesWithExpression.push(...this.api.formatColumnApi.getFormatColumnsWithExpression());
         if (ArrayExtensions_1.ArrayExtensions.IsNullOrEmpty(stylesWithExpression)) {
             return;
         }
         cellDataChangedInfos.forEach((cellDataChangedInfo) => {
             if (!dataChangedScope.wholeRow) {
-                stylesWithExpression.forEach((conditionalStyle) => {
+                stylesWithExpression.forEach((styleModule) => {
                     if (!dataChangedScope.wholeRow) {
-                        const columnIds = this.api.queryLanguageApi.getColumnsFromExpression(conditionalStyle.Rule.BooleanExpression);
+                        const columnIds = this.api.queryLanguageApi.getColumnsFromExpression(styleModule.Rule.BooleanExpression);
                         if (columnIds.includes(cellDataChangedInfo.column.columnId)) {
-                            if (this.api.scopeApi.scopeIsAll(conditionalStyle.Scope)) {
+                            if (this.api.scopeApi.scopeIsAll(styleModule.Scope)) {
                                 dataChangedScope.wholeRow = true;
                                 return;
                             }
                             else {
                                 this.api.scopeApi
-                                    .getColumnsForScope(conditionalStyle.Scope)
+                                    .getColumnsForScope(styleModule.Scope)
                                     .map((c) => c.columnId)
                                     .forEach((colId) => {
                                     dataChangedScope.columnIds.add(colId);