@adaptabletools/adaptable 13.0.0-canary.12 → 13.0.0-canary.14

package/src/Strategy/StyledColumnModule.js

@@ -0,0 +1,165 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.StyledColumnModule = void 0;
+const tslib_1 = require("tslib");
+const AdaptableModuleBase_1 = require("./AdaptableModuleBase");
+const ModuleConstants = tslib_1.__importStar(require("../Utilities/Constants/ModuleConstants"));
+const StyledColumnRedux = tslib_1.__importStar(require("../Redux/ActionsReducers/StyledColumnRedux"));
+const StyledColumnWizard_1 = require("../View/StyledColumn/Wizard/StyledColumnWizard");
+const StyledColumnWizardStyleSection_1 = require("../View/StyledColumn/Wizard/StyledColumnWizardStyleSection");
+const ObjectFactory_1 = tslib_1.__importDefault(require("../Utilities/ObjectFactory"));
+const LoggingHelper_1 = require("../Utilities/Helpers/LoggingHelper");
+class StyledColumnModule extends AdaptableModuleBase_1.AdaptableModuleBase {
+    constructor(api) {
+        super(ModuleConstants.StyledColumnModuleId, ModuleConstants.StyledColumnFriendlyName, 'brush', 'StyledColumnPopup', // to change
+        'Create a Special Column Style e.g Gradient or Percent Bar', api);
+        /**
+         * Use Case: Data (cell/row) has changed
+         * Action: Any CheckboxColumns need to be updated, as their disabled state may have changed
+         */
+        this.api.internalApi
+            .getDataService()
+            .on('CellDataChanged', (cellDataChangedInfo) => {
+            const activeCheckboxColumnIds = this.api.columnApi
+                .getColumns()
+                .filter((aColumn) => {
+                const checkboxColumn = this.api.formatColumnApi.getCheckBoxStyleFormatColumn(aColumn);
+                return checkboxColumn && !checkboxColumn.IsSuspended;
+            })
+                .map((aColumn) => aColumn.columnId);
+            // no need to refresh the CheckboxColumns if the change was triggered by one of them
+            if (!activeCheckboxColumnIds.includes(cellDataChangedInfo.column.columnId)) {
+                this.api.internalApi
+                    .getAdaptableInstance()
+                    .refreshCells(null, activeCheckboxColumnIds, true, true);
+            }
+        });
+    }
+    updateOldConfig() {
+        const formatColumnsWithColumnStyles = this.api.formatColumnApi
+            .getAllFormatColumn()
+            .filter((formatColumn) => formatColumn.ColumnStyle);
+        if (!formatColumnsWithColumnStyles.length) {
+            return;
+        }
+        (0, LoggingHelper_1.ConsoleLogInfo)(`Converting ${formatColumnsWithColumnStyles.length} FormatColumns Styles to Styled Columns`, formatColumnsWithColumnStyles);
+        formatColumnsWithColumnStyles.forEach((formatColumn) => {
+            this.api.formatColumnApi.deleteFormatColumn(formatColumn);
+        });
+        const styledColumns = formatColumnsWithColumnStyles
+            .map((formatColumn) => {
+            if (!('ColumnIds' in formatColumn.Scope)) {
+                return null;
+            }
+            return Object.assign(Object.assign(Object.assign({}, ObjectFactory_1.default.CreateEmptyStyledColumn()), { ColumnId: formatColumn.Scope.ColumnIds[0] }), formatColumn.ColumnStyle);
+        })
+            .filter(Boolean);
+        styledColumns.forEach((styledColumn) => this.api.styledColumnApi.addStyledColumn(styledColumn));
+    }
+    getModuleAdaptableObjects(config) {
+        return this.api.styledColumnApi.getAllStyledColumn(config);
+    }
+    getExplicitlyReferencedColumnIds(formatColumn) {
+        if (this.api.scopeApi.scopeHasColumns(formatColumn.Scope)) {
+            return this.api.scopeApi
+                .getColumnsForScope(formatColumn.Scope)
+                .map((adaptableColumn) => adaptableColumn.columnId);
+        }
+        return [];
+    }
+    hasNamedQueryReferences() {
+        return false;
+    }
+    addColumnMenuItems(column) {
+        let returnColumnMenuItems = [];
+        if (column && this.isModuleEditable() && !column.isSparkline) {
+            if (column.dataType === 'Number') {
+                let styledColumn = this.api.styledColumnApi.getStyledColumnByColumnId(column.columnId);
+                let styledColumnExists = Boolean(styledColumn);
+                if (styledColumn && styledColumn.IsReadOnly && styledColumn.IsReadOnly == true) {
+                    styledColumnExists = false;
+                }
+                let label = styledColumnExists ? 'Edit ' : 'Create ';
+                let popupParam = {
+                    action: styledColumnExists ? 'Edit' : 'New',
+                    source: 'ColumnMenu',
+                    value: styledColumn,
+                };
+                returnColumnMenuItems.push(this.createColumnMenuItemShowPopup(label + 'Styled Column', this.moduleInfo.Popup, this.moduleInfo.Glyph, popupParam));
+            }
+            if (column.dataType == 'Boolean' && !this.api.columnApi.isFreeTextColumn(column.columnId)) {
+                const styledColumn = this.api.styledColumnApi.getStyledColumnByColumnId(column.columnId);
+                const hasCheckBox = styledColumn && (styledColumn === null || styledColumn === void 0 ? void 0 : styledColumn.CheckBoxStyle);
+                if (hasCheckBox) {
+                    returnColumnMenuItems.push(this.createColumnMenuItemClickFunction('Remove Checkbox', 'unchecked', () => {
+                        this.api.styledColumnApi.deleteStyledColumn(styledColumn);
+                    }));
+                }
+                else {
+                    returnColumnMenuItems.push(this.createColumnMenuItemClickFunction('Show as Checkbox', 'checked', () => {
+                        const styledColumn = ObjectFactory_1.default.CreateEmptyStyledColumn();
+                        this.api.styledColumnApi.addStyledColumn(Object.assign(Object.assign({}, styledColumn), { ColumnId: column.columnId, CheckBoxStyle: true }));
+                    }));
+                }
+            }
+        }
+        return returnColumnMenuItems;
+    }
+    getTeamSharingAction() {
+        return {
+            ModuleEntities: this.api.styledColumnApi.getAllStyledColumn(),
+            AddAction: StyledColumnRedux.StyledColumnAdd,
+            EditAction: StyledColumnRedux.StyledColumnEdit,
+        };
+    }
+    toView(styledColumn) {
+        let type = null;
+        if (styledColumn.GradientStyle) {
+            type = 'Gradient';
+        }
+        else if (styledColumn.PercentBarStyle) {
+            type = 'Percent Bar';
+        }
+        else {
+            type = 'Check Box';
+        }
+        return {
+            abObject: styledColumn,
+            items: [
+                {
+                    name: 'Type',
+                    values: [type],
+                },
+                {
+                    name: 'Column',
+                    values: [this.api.columnApi.getFriendlyNameFromColumnId(styledColumn.ColumnId)],
+                },
+                {
+                    name: 'Style',
+                    view: () => {
+                        return (0, StyledColumnWizardStyleSection_1.renderStyledColumnStyleSummary)(styledColumn, this.api);
+                    },
+                },
+            ].filter(Boolean),
+        };
+    }
+    toViewAll() {
+        return this.getModuleAdaptableObjects({
+            includeLayoutNotAssociatedObjects: this.showLayoutNotAssociatedObjects(),
+        }).map((styledColumn) => this.toView(styledColumn));
+    }
+    getViewProperties() {
+        return {
+            getDeleteAction: StyledColumnRedux.StyledColumnDelete,
+            getSuspendAction: StyledColumnRedux.StyledColumnSuspend,
+            getUnSuspendAction: StyledColumnRedux.StyledColumnUnSuspend,
+            getEditWizard() {
+                return StyledColumnWizard_1.StyledColumnWizard;
+            },
+        };
+    }
+    canBeAssociatedWithLayouts() {
+        return true;
+    }
+}
+exports.StyledColumnModule = StyledColumnModule;

package/src/Strategy/Utilities/getScopeViewItems.js

@@ -11,7 +11,7 @@ const getScopeViewItems = (scope, api) => {
         values = scope.DataTypes;
     }
     if ('All' in scope) {
-        values = ['All'];
+        values = ['All Columns'];
     }
     return {
         label: 'Target',

package/src/Utilities/Constants/ModuleConstants.d.ts

@@ -51,6 +51,8 @@ export declare const ShortcutModuleId: ModuleConstants;
 export declare const ShortcutFriendlyName = "Shortcut";
 export declare const SmartEditModuleId: ModuleConstants;
 export declare const SmartEditFriendlyName = "Smart Edit";
+export declare const StyledColumnModuleId: ModuleConstants;
+export declare const StyledColumnFriendlyName = "Styled Column";
 export declare const StateManagementModuleId: ModuleConstants;
 export declare const StateManagementFriendlyName = "Manage State";
 export declare const SystemStatusModuleId: ModuleConstants;
@@ -92,6 +94,7 @@ export declare const ADAPTABLE_MODULE_MAP: {
     Schedule: string;
     Shortcut: string;
     SmartEdit: string;
+    StyledColumn: string;
     StateManagement: string;
     SystemStatus: string;
     TeamSharing: string;

package/src/Utilities/Constants/ModuleConstants.js

@@ -1,7 +1,7 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.ShortcutFriendlyName = exports.ShortcutModuleId = exports.ScheduleFriendlyName = exports.ScheduleModuleId = exports.QuickSearchFriendlyName = exports.QuickSearchModuleId = exports.QueryFriendlyName = exports.QueryModuleId = exports.PlusMinusFriendlyName = exports.PlusMinusModuleId = exports.OpenFinFriendlyName = exports.OpenFinModuleId = exports.LayoutFriendlyName = exports.LayoutModuleId = exports.IPushPullFriendlyName = exports.IPushPullModuleId = exports.GridInfoFriendlyName = exports.GridInfoModuleId = exports.Glue42FriendlyName = exports.Glue42ModuleId = exports.FreeTextColumnFriendlyName = exports.FreeTextColumnModuleId = exports.FormatColumnFriendlyName = exports.FormatColumnModuleId = exports.FilterFriendlyName = exports.FilterModuleId = exports.ExportFriendlyName = exports.ExportModuleId = exports.DataSetFriendlyName = exports.DataSetModuleId = exports.DataChangeHistoryFriendlyName = exports.DataChangeHistoryModuleId = exports.DashboardFriendlyName = exports.DashboardModuleId = exports.CustomSortFriendlyName = exports.CustomSortModuleId = exports.ConditionalStyleFriendlyName = exports.ConditionalStyleModuleId = exports.ChartingFriendlyName = exports.ChartingModuleId = exports.CellSummaryFriendlyName = exports.CellSummaryModuleId = exports.CalculatedColumnFriendlyName = exports.CalculatedColumnModuleId = exports.BulkUpdateFriendlyName = exports.BulkUpdateModuleId = exports.FlashingCellFriendlyName = exports.FlashingCellModuleId = exports.AlertModuleFriendlyName = exports.AlertModuleId = void 0;
-exports.ADAPTABLE_MODULE_MAP = exports.StatusBarFriendlyName = exports.StatusBarModuleId = exports.SettingsPanelFriendlyName = exports.SettingsPanelModuleId = exports.ToolPanelFriendlyName = exports.ToolPanelModuleId = exports.ThemeFriendlyName = exports.ThemeModuleId = exports.TeamSharingFriendlyName = exports.TeamSharingModuleId = exports.SystemStatusFriendlyName = exports.SystemStatusModuleId = exports.StateManagementFriendlyName = exports.StateManagementModuleId = exports.SmartEditFriendlyName = exports.SmartEditModuleId = void 0;
+exports.ADAPTABLE_MODULE_MAP = exports.StatusBarFriendlyName = exports.StatusBarModuleId = exports.SettingsPanelFriendlyName = exports.SettingsPanelModuleId = exports.ToolPanelFriendlyName = exports.ToolPanelModuleId = exports.ThemeFriendlyName = exports.ThemeModuleId = exports.TeamSharingFriendlyName = exports.TeamSharingModuleId = exports.SystemStatusFriendlyName = exports.SystemStatusModuleId = exports.StateManagementFriendlyName = exports.StateManagementModuleId = exports.StyledColumnFriendlyName = exports.StyledColumnModuleId = exports.SmartEditFriendlyName = exports.SmartEditModuleId = void 0;
 exports.AlertModuleId = 'Alert';
 exports.AlertModuleFriendlyName = 'Alert';
 exports.FlashingCellModuleId = 'FlashingCell';
@@ -54,6 +54,8 @@ exports.ShortcutModuleId = 'Shortcut';
 exports.ShortcutFriendlyName = 'Shortcut';
 exports.SmartEditModuleId = 'SmartEdit';
 exports.SmartEditFriendlyName = 'Smart Edit';
+exports.StyledColumnModuleId = 'StyledColumn';
+exports.StyledColumnFriendlyName = 'Styled Column';
 exports.StateManagementModuleId = 'StateManagement';
 exports.StateManagementFriendlyName = 'Manage State';
 exports.SystemStatusModuleId = 'SystemStatus';
@@ -95,6 +97,7 @@ exports.ADAPTABLE_MODULE_MAP = {
     [exports.ScheduleModuleId]: exports.ScheduleFriendlyName,
     [exports.ShortcutModuleId]: exports.ShortcutFriendlyName,
     [exports.SmartEditModuleId]: exports.SmartEditFriendlyName,
+    [exports.StyledColumnModuleId]: exports.StyledColumnFriendlyName,
     [exports.StateManagementModuleId]: exports.StateManagementFriendlyName,
     [exports.SystemStatusModuleId]: exports.SystemStatusFriendlyName,
     [exports.TeamSharingModuleId]: exports.TeamSharingFriendlyName,

package/src/Utilities/Defaults/DefaultSettingsPanel.js

@@ -32,6 +32,7 @@ exports.DEFAULT_NAVIGATION_ITEMS = [
     'QuickSearch',
     'Schedule',
     'Shortcut',
+    'StyledColumn',
     '-',
     'SystemStatus',
     'DataChangeHistory',

package/src/Utilities/ExpressionFunctions/observableExpressionFunctions.d.ts

@@ -2,9 +2,6 @@ import { ExpressionFunction } from '../../parser/src/types';
 /**
  * List of all the Observable Functions available in AdaptableQL
  */
-export declare type ObservableFunctionName = 'WHERE' | 'COL' | 'TIMEFRAME' | ObservableFunction | ChangeFunction;
-declare type ObservableFunction = 'ROW_CHANGE' | 'GRID_CHANGE';
-declare type ChangeFunction = 'MAX' | 'MIN' | 'NONE' | 'COUNT';
+export declare type ObservableFunctionName = 'WHERE' | 'COL' | 'TIMEFRAME' | 'ROW_CHANGE' | 'GRID_CHANGE' | 'MAX' | 'MIN' | 'NONE' | 'COUNT';
 export declare const observableExpressionFunctions: Record<ObservableFunctionName, ExpressionFunction>;
 export declare const observableExpressionFunctionNames: ObservableFunctionName[];
-export {};

package/src/Utilities/ObjectFactory.d.ts

@@ -28,6 +28,7 @@ import { ColumnFilter, CustomDisplayFormatterContext, FlashingCellDefinition, Gr
 import { RowNode } from '@ag-grid-community/core';
 import { AdaptableApi } from '../../types';
 import { ToastOptions } from '../components/Toastify';
+import { StyledColumn } from '../PredefinedConfig/StyledColumnState';
 export declare function CreateEmptyCustomSort(): CustomSort;
 export declare function CreateEmptyCalculatedColumn(): CalculatedColumn;
 export declare function CreateEmptyNamedQuery(expression?: string): NamedQuery;
@@ -64,6 +65,7 @@ export declare function CreateEmptyStyle(): AdaptableStyle;
 export declare function CreateSystemStatusMessageInfo(message: string, type: AdaptableMessageType, furtherInfo?: string): SystemStatusMessageInfo;
 export declare function CreateEmptyCellSummmary(): CellSummmary;
 export declare function CreateColumnFilter(ColumnId: string, PredicateId: SystemFilterPredicateId, Inputs: any[]): ColumnFilter;
+export declare function CreateEmptyStyledColumn(): StyledColumn;
 export declare function CreateCustomDisplayFormatterContext(value: any, node: RowNode, abColumn: AdaptableColumn, api: AdaptableApi): CustomDisplayFormatterContext;
 export declare function CreateToastOptions(notificationsOptions: NotificationsOptions, { onClose, containerId }: {
     onClose?: VoidFunction;
@@ -106,5 +108,6 @@ export declare const ObjectFactory: {
     CreateSystemStatusMessageInfo: typeof CreateSystemStatusMessageInfo;
     CreateToastOptions: typeof CreateToastOptions;
     CreateCustomDisplayFormatterContext: typeof CreateCustomDisplayFormatterContext;
+    CreateEmptyStyledColumn: typeof CreateEmptyStyledColumn;
 };
 export default ObjectFactory;

package/src/Utilities/ObjectFactory.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.ObjectFactory = exports.CreateToastOptions = exports.CreateCustomDisplayFormatterContext = exports.CreateColumnFilter = exports.CreateEmptyCellSummmary = exports.CreateSystemStatusMessageInfo = exports.CreateEmptyStyle = exports.CreateEmptyLayout = exports.CreateEmptyFreeTextColumn = exports.CreateEmptyFormatColumn = exports.CreateEmptyConditionalStyle = exports.CreateEmptyShortcut = exports.CreateEmptySchedule = exports.CreateReportSchedule = exports.CreateGlue42Schedule = exports.CreateIPushPullSchedule = exports.CreateEmptyOpenFinSchedule = exports.CreateEmptyGlue42Schedule = exports.CreateEmptyIPushPullSchedule = exports.CreateEmptyOpenFinReport = exports.CreateEmptyGlue42Report = exports.CreateEmptyIPushPullReport = exports.CreateEmptyReportSchedule = exports.CreateEmptyReminderSchedule = exports.CreateEmptyBaseSchedule = exports.CreateCustomReport = exports.CreateEmptyReport = exports.CreateInternalAlertDefinitionForMessages = exports.CreateEmptyFlashingCellDefinition = exports.CreateEmptyAlertDefinition = exports.CreateRowChangedAlert = exports.CreateCellChangedAlert = exports.CreateGenericAlert = exports.CreateEmptyPlusMinusNudge = exports.CreateEmptyNamedQuery = exports.CreateEmptyCalculatedColumn = exports.CreateEmptyCustomSort = void 0;
+exports.ObjectFactory = exports.CreateToastOptions = exports.CreateCustomDisplayFormatterContext = exports.CreateEmptyStyledColumn = exports.CreateColumnFilter = exports.CreateEmptyCellSummmary = exports.CreateSystemStatusMessageInfo = exports.CreateEmptyStyle = exports.CreateEmptyLayout = exports.CreateEmptyFreeTextColumn = exports.CreateEmptyFormatColumn = exports.CreateEmptyConditionalStyle = exports.CreateEmptyShortcut = exports.CreateEmptySchedule = exports.CreateReportSchedule = exports.CreateGlue42Schedule = exports.CreateIPushPullSchedule = exports.CreateEmptyOpenFinSchedule = exports.CreateEmptyGlue42Schedule = exports.CreateEmptyIPushPullSchedule = exports.CreateEmptyOpenFinReport = exports.CreateEmptyGlue42Report = exports.CreateEmptyIPushPullReport = exports.CreateEmptyReportSchedule = exports.CreateEmptyReminderSchedule = exports.CreateEmptyBaseSchedule = exports.CreateCustomReport = exports.CreateEmptyReport = exports.CreateInternalAlertDefinitionForMessages = exports.CreateEmptyFlashingCellDefinition = exports.CreateEmptyAlertDefinition = exports.CreateRowChangedAlert = exports.CreateCellChangedAlert = exports.CreateGenericAlert = exports.CreateEmptyPlusMinusNudge = exports.CreateEmptyNamedQuery = exports.CreateEmptyCalculatedColumn = exports.CreateEmptyCustomSort = void 0;
 const Enums_1 = require("../PredefinedConfig/Common/Enums");
 const GeneralConstants_1 = require("./Constants/GeneralConstants");
 const Uuid_1 = require("../PredefinedConfig/Uuid");
@@ -327,8 +327,8 @@ function CreateEmptyStyle() {
         BackColor: undefined,
         ForeColor: undefined,
         BorderColor: undefined,
-        FontWeight: Enums_1.FontWeight.Normal,
-        FontStyle: Enums_1.FontStyle.Normal,
+        FontWeight: undefined,
+        FontStyle: undefined,
         FontSize: undefined,
         ClassName: GeneralConstants_1.EMPTY_STRING,
     };
@@ -367,6 +367,13 @@ function CreateColumnFilter(ColumnId, PredicateId, Inputs) {
     };
 }
 exports.CreateColumnFilter = CreateColumnFilter;
+function CreateEmptyStyledColumn() {
+    return {
+        Uuid: (0, Uuid_1.createUuid)(),
+        ColumnId: GeneralConstants_1.EMPTY_STRING,
+    };
+}
+exports.CreateEmptyStyledColumn = CreateEmptyStyledColumn;
 function CreateCustomDisplayFormatterContext(value, node, abColumn, api) {
     return {
         adaptableColumn: abColumn,
@@ -466,5 +473,6 @@ exports.ObjectFactory = {
     CreateSystemStatusMessageInfo,
     CreateToastOptions,
     CreateCustomDisplayFormatterContext,
+    CreateEmptyStyledColumn,
 };
 exports.default = exports.ObjectFactory;

package/src/Utilities/Services/ModuleService.js

@@ -104,7 +104,7 @@ class ModuleService {
             case 'FlashingCell':
                 return learnUrl + 'handbook-cell-flashing';
             case 'FormatColumn':
-                return learnUrl + 'handbook-column-formatting';
+                return learnUrl + 'handbook-column-formatting-overview';
             case 'FreeTextColumn':
                 return learnUrl + 'handbook-freetext-column';
             case 'GridInfo':
@@ -141,6 +141,8 @@ class ModuleService {
                 return learnUrl + 'integrations-ipushpull';
             case 'OpenFin':
                 return learnUrl + 'integrations-openfin';
+            case 'StyledColumn':
+                return learnUrl + 'handbook-styled-column-overview';
             default:
                 return 'good';
         }

package/src/View/CalculatedColumn/CalculatedColumnSummary.d.ts

@@ -15,4 +15,4 @@ export declare class CalculatedColumnSummaryComponent extends React.Component<Ca
     onCloseWizard(): void;
     onFinishWizard: (calculatedColumn: CalculatedColumn) => void;
 }
-export declare let CalculatedColumnSummary: import("react-redux").ConnectedComponent<typeof CalculatedColumnSummaryComponent, import("react-redux").Omit<React.ClassAttributes<CalculatedColumnSummaryComponent> & CalculatedColumnSummaryProps, "key" | "ref" | "onSuspend" | "api" | "CalculatedColumns" | "modalContainer" | "moduleInfo" | "accessLevel" | "popupParams" | "onClearPopupParams" | "teamSharingActivated" | "onClosePopup" | "onUnSuspend" | "onShare" | "onEdit" | "summarisedColumn" | "onDeleteConfirm">>;
+export declare let CalculatedColumnSummary: import("react-redux").ConnectedComponent<typeof CalculatedColumnSummaryComponent, import("react-redux").Omit<React.ClassAttributes<CalculatedColumnSummaryComponent> & CalculatedColumnSummaryProps, "key" | "ref" | "onSuspend" | "api" | "accessLevel" | "modalContainer" | "CalculatedColumns" | "moduleInfo" | "onShare" | "onUnSuspend" | "teamSharingActivated" | "popupParams" | "onClearPopupParams" | "onClosePopup" | "onEdit" | "summarisedColumn" | "onDeleteConfirm">>;

package/src/View/Components/RangesComponent.d.ts

@@ -14,6 +14,7 @@ export interface RangesComponentProps extends React.ClassAttributes<RangesCompon
         min: number;
         max: number;
     };
+    disabled?: boolean;
 }
 export interface RangesComponentState {
     ranges: CellColorRange[];

package/src/View/Components/RangesComponent.js

@@ -56,14 +56,14 @@ class RangesComponent extends React.Component {
                 React.createElement(Tabs_1.Tabs.Content, null, (_a = this.state.ranges) === null || _a === void 0 ? void 0 :
                     _a.map((range, index, list) => (React.createElement(rebass_1.Flex, { key: index, alignItems: "end", mb: 2, "data-name": "percent-bar-range" },
                         React.createElement(rebass_1.Flex, { flexDirection: "column" },
-                            index === 0 && (React.createElement(CheckBox_1.CheckBox, { onClick: () => this.setRangeColMin(range), checked: range.Min === 'Col-Min', mt: 0, mb: 1, fontSize: 3 }, "Col Min")),
-                            React.createElement(Input_1.default, { type: typeof range.Min == 'number' ? 'number' : 'text', disabled: range.Min === 'Col-Min', value: range.Min, onChange: (event) => {
+                            index === 0 && (React.createElement(CheckBox_1.CheckBox, { onClick: () => this.setRangeColMin(range), checked: range.Min === 'Col-Min', mt: 0, mb: 1, fontSize: 3, disabled: this.props.disabled }, "Col Min")),
+                            React.createElement(Input_1.default, { type: typeof range.Min == 'number' ? 'number' : 'text', disabled: this.props.disabled || range.Min === 'Col-Min', value: range.Min, onChange: (event) => {
                                     const { value } = event.target;
                                     this.changeRangeMin(index, value);
                                 }, mr: 2 })),
                         React.createElement(rebass_1.Flex, { flexDirection: "column" },
-                            index === list.length - 1 && (React.createElement(CheckBox_1.CheckBox, { mt: 0, mb: 1, onClick: () => this.setRangeColMax(range), checked: range.Max === 'Col-Max', fontSize: 3 }, "Col Max")),
-                            React.createElement(Input_1.default, { value: range.Max, type: typeof range.Max == 'number' ? 'number' : 'text', disabled: range.Max === 'Col-Max', onChange: (event) => {
+                            index === list.length - 1 && (React.createElement(CheckBox_1.CheckBox, { mt: 0, mb: 1, onClick: () => this.setRangeColMax(range), checked: range.Max === 'Col-Max', fontSize: 3, disabled: this.props.disabled }, "Col Max")),
+                            React.createElement(Input_1.default, { value: range.Max, type: typeof range.Max == 'number' ? 'number' : 'text', disabled: this.props.disabled || range.Max === 'Col-Max', onChange: (event) => {
                                     const { value } = event.target;
                                     this.changeRangeMax(index, value);
                                 }, mr: 2 })),
@@ -71,10 +71,10 @@ class RangesComponent extends React.Component {
                             React.createElement(ColorPicker_1.ColorPicker, { api: this.props.api, value: range.Color, onChange: (color) => {
                                     this.changeRangeColor(index, color);
                                 }, mr: 2, height: 33 })),
-                        this.props.showRangeDirection && (React.createElement(CheckBox_1.CheckBox, { checked: range.ReverseGradient && range.ReverseGradient == true, onChange: (checked) => this.changeRangeDirectionUp(index, checked) }, "Reverse Gradient")),
-                        React.createElement(SimpleButton_1.default, { ml: 2, mb: 1, icon: "delete", disabled: this.state.ranges && this.state.ranges.length == 1, onClick: () => this.removeRange(index) })))),
+                        this.props.showRangeDirection && (React.createElement(CheckBox_1.CheckBox, { disabled: this.props.disabled, checked: range.ReverseGradient && range.ReverseGradient == true, onChange: (checked) => this.changeRangeDirectionUp(index, checked) }, "Reverse Gradient")),
+                        React.createElement(SimpleButton_1.default, { ml: 2, mb: 1, icon: "delete", disabled: this.props.disabled || (this.state.ranges && this.state.ranges.length == 1), onClick: () => this.removeRange(index) })))),
                     React.createElement("div", null,
-                        React.createElement(SimpleButton_1.default, { variant: "raised", "data-name": "add", onClick: () => this.addRange() }, "Add New Range"))))),
+                        React.createElement(SimpleButton_1.default, { disabled: this.props.disabled, variant: "raised", "data-name": "add", onClick: () => this.addRange() }, "Add New Range"))))),
             this.state.rangesType == 'ColumnComparison' && (React.createElement(Tabs_1.Tabs, { autoFocus: false, marginTop: 2 },
                 React.createElement(Tabs_1.Tabs.Tab, null, "Column Comparison"),
                 React.createElement(Tabs_1.Tabs.Content, null,
@@ -85,14 +85,14 @@ class RangesComponent extends React.Component {
                             this.props.api.internalApi.getCorrectEnglishVariant('Colour'),
                             " for the Bar."),
                         React.createElement(FormLayout_1.default, { columns: ['label', 'first', 'or', 'second'], sizes: ['auto', 'auto', 'auto', '1fr'] },
-                            React.createElement(FormLayout_1.FormRow, { label: "Min Value:", first: React.createElement(Input_1.default, { type: "number", value: comparisonMinValueNumber, onChange: (e) => {
+                            React.createElement(FormLayout_1.FormRow, { label: "Min Value:", first: React.createElement(Input_1.default, { disabled: this.props.disabled, type: "number", value: comparisonMinValueNumber, onChange: (e) => {
                                         this.changeColumnComparisonMinValue(e);
-                                    } }), or: "OR", second: React.createElement(ColumnSelector_1.ColumnSelector, { style: { maxWidth: '15rem' }, SelectedColumnIds: [comparisonMinValueColumnId], ColumnList: this.props.api.columnApi.getNumericColumns(), onColumnChange: (columns) => this.onMinColumnSelectedChanged(columns), SelectionMode: Enums_1.SelectionMode.Single }) }),
+                                    } }), or: "OR", second: React.createElement(ColumnSelector_1.ColumnSelector, { disabled: this.props.disabled, style: { maxWidth: '15rem' }, SelectedColumnIds: [comparisonMinValueColumnId], ColumnList: this.props.api.columnApi.getNumericColumns(), onColumnChange: (columns) => this.onMinColumnSelectedChanged(columns), SelectionMode: Enums_1.SelectionMode.Single }) }),
                             ' ',
-                            React.createElement(FormLayout_1.FormRow, { label: "Max Value:", first: React.createElement(Input_1.default, { type: "number", value: comparisonMaxValueNumber, onChange: (e) => {
+                            React.createElement(FormLayout_1.FormRow, { label: "Max Value:", first: React.createElement(Input_1.default, { disabled: this.props.disabled, type: "number", value: comparisonMaxValueNumber, onChange: (e) => {
                                         this.changeColumnComparisonMaxValue(e);
-                                    } }), or: "OR", second: React.createElement(ColumnSelector_1.ColumnSelector, { style: { maxWidth: '15rem' }, SelectedColumnIds: [comparisonMaxValueColumnId], ColumnList: this.props.api.columnApi.getNumericColumns(), onColumnChange: (columns) => this.onMaxColumnSelectedChanged(columns), SelectionMode: Enums_1.SelectionMode.Single }) }),
-                            React.createElement(FormLayout_1.FormRow, { label: `Bar ${this.props.api.internalApi.getCorrectEnglishVariant('Colour')}`, first: React.createElement(ColorPicker_1.ColorPicker, { api: this.props.api, value: comparisonColor, onChange: (color) => {
+                                    } }), or: "OR", second: React.createElement(ColumnSelector_1.ColumnSelector, { disabled: this.props.disabled, style: { maxWidth: '15rem' }, SelectedColumnIds: [comparisonMaxValueColumnId], ColumnList: this.props.api.columnApi.getNumericColumns(), onColumnChange: (columns) => this.onMaxColumnSelectedChanged(columns), SelectionMode: Enums_1.SelectionMode.Single }) }),
+                            React.createElement(FormLayout_1.FormRow, { label: `Bar ${this.props.api.internalApi.getCorrectEnglishVariant('Colour')}`, first: React.createElement(ColorPicker_1.ColorPicker, { disabled: this.props.disabled, api: this.props.api, value: comparisonColor, onChange: (color) => {
                                         this.changeColumnComparisonColor(color);
                                     } }) }))))))));
     }

package/src/View/Components/Selectors/ColumnSelector.d.ts

@@ -9,6 +9,7 @@ export interface ColumnSelectorProps extends React.HTMLProps<ColumnSelector> {
     className?: string;
     placeHolder?: string;
     showClearButton?: boolean;
+    disabled?: boolean;
 }
 export declare class ColumnSelector extends React.Component<ColumnSelectorProps, {}> {
     render(): JSX.Element;

package/src/View/Components/Selectors/ColumnSelector.js

@@ -23,6 +23,7 @@ class ColumnSelector extends React.Component {
             return {
                 label: column.friendlyName,
                 value: column.columnId,
+                disabled: this.props.disabled,
                 onClick: () => {
                     const selected = sortedColumns.filter((c) => c.columnId === column.columnId);
                     if (!selected.length) {
@@ -40,7 +41,7 @@ class ColumnSelector extends React.Component {
         return (React.createElement("div", { "data-name": 'column-selector' },
             React.createElement(FormLayout_1.default, { columns: [{ name: 'columnSelector', style: { display: 'flex' } }], style: this.props.style },
                 React.createElement(FormLayout_1.FormRow, null,
-                    React.createElement(DropdownButton_1.default, { marginRight: 2, columns: ['label'], showClearButton: currentColumnName != 'Select a column', onClear: () => this.onClearButton(), style: { width: '100%', fontSize: 'small' }, className: "ab-DashboardToolbar__Layout__select", items: sortedColumnOptions, disabled: sortedColumnOptions.length == 0 }, currentColumnName)))));
+                    React.createElement(DropdownButton_1.default, { marginRight: 2, columns: ['label'], showClearButton: currentColumnName != 'Select a column', onClear: () => this.onClearButton(), style: { width: '100%', fontSize: 'small' }, className: "ab-DashboardToolbar__Layout__select", items: sortedColumnOptions, disabled: this.props.disabled || sortedColumnOptions.length == 0 }, currentColumnName)))));
     }
     onClearButton() {
         this.props.onColumnChange([]);

package/src/View/Components/StyleComponent.js

@@ -145,12 +145,12 @@ class StyleComponent extends React.Component {
         this.props.UpdateStyle(this.state.componentStyle);
     }
     onFontWeightChange(checked) {
-        let fontWeight = checked ? Enums_1.FontWeight.Bold : Enums_1.FontWeight.Normal;
+        let fontWeight = checked ? Enums_1.FontWeight.Bold : undefined;
         this.state.componentStyle.FontWeight = fontWeight;
         this.props.UpdateStyle(this.state.componentStyle);
     }
     onFontStyleChange(checked) {
-        let fontStyle = checked ? Enums_1.FontStyle.Italic : Enums_1.FontStyle.Normal;
+        let fontStyle = checked ? Enums_1.FontStyle.Italic : undefined;
         this.state.componentStyle.FontStyle = fontStyle;
         this.props.UpdateStyle(this.state.componentStyle);
     }

package/src/View/Components/ToolPanel/AdaptableToolPanel.d.ts

@@ -24,17 +24,7 @@ interface AdaptableToolPanelProps {
     onCollapseToolPanel: (toolPanel: AdaptableToolPanel | string) => ToolPanelRedux.ToolPanelCollapseToolPanelAction;
 }
 export declare const ConnectedAdaptableToolPanel: import("react-redux").ConnectedComponent<(props: AdaptableToolPanelProps) => JSX.Element, import("react-redux").Omit<AdaptableToolPanelProps, "onClick" | "Columns" | "ModuleButtons" | "ToolPanels" | "MainMenuItems" | "onNewColumnListOrder" | "onShowToolPanel" | "onHideToolPanel" | "onExpandToolPanel" | "onCollapseToolPanel">>;
-export declare const getAdaptableToolPanelAgGridComponent: (adaptable?: IAdaptable) => {
-    new (): {
-        gui: HTMLElement;
-        unmountReactRoot?: VoidFunction;
-        init(params?: IToolPanelParams): void;
-        getGui(): HTMLElement;
-        refresh(): void;
-        destroy(): void;
-    };
-};
-export declare const AdaptableToolPanelAgGridComponent: {
+export declare const getAdaptableToolPanelAgGridComponent: (adaptable: IAdaptable) => (() => JSX.Element) | {
     new (): {
         gui: HTMLElement;
         unmountReactRoot?: VoidFunction;

package/src/View/Components/ToolPanel/AdaptableToolPanel.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.AdaptableToolPanelAgGridComponent = exports.getAdaptableToolPanelAgGridComponent = exports.ConnectedAdaptableToolPanel = void 0;
+exports.getAdaptableToolPanelAgGridComponent = exports.ConnectedAdaptableToolPanel = void 0;
 const tslib_1 = require("tslib");
 const React = tslib_1.__importStar(require("react"));
 const kebabCase_1 = tslib_1.__importDefault(require("lodash/kebabCase"));
@@ -225,19 +225,32 @@ function mapDispatchToProps(dispatch) {
     };
 }
 exports.ConnectedAdaptableToolPanel = (0, react_redux_1.connect)(mapStateToProps, mapDispatchToProps)(AdaptableToolPanelComponent);
+const toolPanelContainerStyle = {
+    width: '100%',
+    overflow: 'auto',
+};
 const getAdaptableToolPanelAgGridComponent = (adaptable) => {
+    function getContainerId() {
+        return 'adaptable-tool-panel_' + adaptable.adaptableOptions.adaptableId;
+    }
+    if (adaptable.variant === 'react') {
+        return () => {
+            const content = (0, renderWithAdaptableContext_1.renderWithAdaptableContext)(React.createElement(exports.ConnectedAdaptableToolPanel, { api: adaptable.api, teamSharingActivated: false }), adaptable);
+            return (React.createElement("div", { id: getContainerId(), className: 'ag-adaptable-panel', style: toolPanelContainerStyle }, content));
+        };
+    }
     return class AdaptableToolPanelAgGridComponent {
         init(params) {
-            const agGridApi = params.api;
-            const Adaptable = agGridApi.__adaptable || adaptable;
-            const api = Adaptable.api;
+            const api = adaptable.api;
             this.gui = document.createElement('div');
-            this.gui.id = 'adaptable-tool-panel_' + Adaptable.adaptableOptions.adaptableId;
+            this.gui.id = getContainerId();
             // preserve ag-grid naming convention
             this.gui.className = 'ag-adaptable-panel';
-            this.gui.style.width = '100%';
-            this.gui.style.overflow = 'auto';
-            this.unmountReactRoot = Adaptable.renderReactRoot((0, renderWithAdaptableContext_1.renderWithAdaptableContext)(React.createElement(exports.ConnectedAdaptableToolPanel, { api: api, teamSharingActivated: false }), Adaptable), this.gui);
+            Object.keys(toolPanelContainerStyle).forEach((key) => {
+                //@ts-ignore
+                this.gui.style[key] = toolPanelContainerStyle[key];
+            });
+            this.unmountReactRoot = adaptable.renderReactRoot((0, renderWithAdaptableContext_1.renderWithAdaptableContext)(React.createElement(exports.ConnectedAdaptableToolPanel, { api: api, teamSharingActivated: false }), adaptable), this.gui);
         }
         getGui() {
             if (!this.gui) {
@@ -255,4 +268,3 @@ const getAdaptableToolPanelAgGridComponent = (adaptable) => {
     };
 };
 exports.getAdaptableToolPanelAgGridComponent = getAdaptableToolPanelAgGridComponent;
-exports.AdaptableToolPanelAgGridComponent = (0, exports.getAdaptableToolPanelAgGridComponent)();

package/src/View/Components/ToolPanel/CustomToolPanelContent.js

@@ -34,7 +34,7 @@ const CustomToolPanelContent = (props) => {
             if (hasCustomRenderFn(customToolPanel)) {
                 customToolPanel.render({ visible: false, element, adaptableApi: api });
             }
-            else if (hasCustomFrameworkComponent(customToolPanel)) {
+            else if (hasCustomFrameworkComponent(customToolPanel) && !api.isDestroyed()) {
                 api.internalApi.destroyFrameworkComponent(element, customToolPanel.frameworkComponent, 'toolPanel');
             }
         };

package/src/View/Components/ToolPanel/ToolPanelPopup.d.ts

@@ -23,5 +23,5 @@ declare class ToolPanelPopupComponent extends React.Component<ToolPanelPopupComp
     onShowGridPropertiesChanged(event: React.FormEvent<any>): void;
     onToolPanelToolPanelsChanged(selectedValues: AdaptableToolPanels): void;
 }
-export declare let ToolPanelPopup: import("react-redux").ConnectedComponent<typeof ToolPanelPopupComponent, import("react-redux").Omit<React.ClassAttributes<ToolPanelPopupComponent> & ToolPanelPopupComponentProps, "key" | "ref" | "onSuspend" | "api" | "modalContainer" | "moduleInfo" | "accessLevel" | "popupParams" | "onClearPopupParams" | "teamSharingActivated" | "onClosePopup" | "onUnSuspend" | "ToolPanelState" | "GridState" | "onToolPanelSetModuleButtons" | "onToolPanelSetToolPanels">>;
+export declare let ToolPanelPopup: import("react-redux").ConnectedComponent<typeof ToolPanelPopupComponent, import("react-redux").Omit<React.ClassAttributes<ToolPanelPopupComponent> & ToolPanelPopupComponentProps, "key" | "ref" | "onSuspend" | "api" | "accessLevel" | "modalContainer" | "moduleInfo" | "onUnSuspend" | "teamSharingActivated" | "ToolPanelState" | "popupParams" | "onClearPopupParams" | "onClosePopup" | "GridState" | "onToolPanelSetModuleButtons" | "onToolPanelSetToolPanels">>;
 export {};

package/src/View/DataSet/DataSetViewPanel.d.ts

@@ -15,5 +15,5 @@ declare class DataSetViewPanelComponent extends React.Component<DataSetViewPanel
     render(): JSX.Element;
     onSelectedDataSetChanged(dataSetName: string): void;
 }
-export declare let DataSetViewPanelControl: import("react-redux").ConnectedComponent<typeof DataSetViewPanelComponent, import("react-redux").Omit<React.ClassAttributes<DataSetViewPanelComponent> & DataSetViewPanelComponentProps, "api" | "moduleInfo" | "accessLevel" | "viewType" | "CurrentDataSetName" | "onSelectDataSet">>;
+export declare let DataSetViewPanelControl: import("react-redux").ConnectedComponent<typeof DataSetViewPanelComponent, import("react-redux").Omit<React.ClassAttributes<DataSetViewPanelComponent> & DataSetViewPanelComponentProps, "api" | "accessLevel" | "moduleInfo" | "viewType" | "CurrentDataSetName" | "onSelectDataSet">>;
 export {};

package/src/View/Export/ExportViewPanel.d.ts

@@ -25,5 +25,5 @@ declare class ExportViewPanelComponent extends React.Component<ExportViewPanelCo
     private isCustomDestination;
     private onNewReportSchedule;
 }
-export declare let ExportViewPanelControl: import("react-redux").ConnectedComponent<typeof ExportViewPanelComponent, import("react-redux").Omit<React.ClassAttributes<ExportViewPanelComponent> & ExportViewPanelComponentProps, "api" | "Columns" | "CurrentReport" | "CurrentDestination" | "moduleInfo" | "accessLevel" | "viewType" | "onApplyExport" | "onSelectReport" | "onSelectDestination" | "onNewReport" | "onEditReport" | "onNewReportSchedule" | "UserReports">>;
+export declare let ExportViewPanelControl: import("react-redux").ConnectedComponent<typeof ExportViewPanelComponent, import("react-redux").Omit<React.ClassAttributes<ExportViewPanelComponent> & ExportViewPanelComponentProps, "api" | "accessLevel" | "moduleInfo" | "CurrentReport" | "CurrentDestination" | "Columns" | "viewType" | "onApplyExport" | "onSelectReport" | "onSelectDestination" | "onNewReport" | "onEditReport" | "onNewReportSchedule" | "UserReports">>;
 export {};

package/src/View/Filter/FilterSummary.d.ts

@@ -12,4 +12,4 @@ export declare class FilterSummaryComponent extends React.Component<FilterSummar
     render(): any;
     getDescription(columnFilter: ColumnFilter): string;
 }
-export declare let FilterSummary: import("react-redux").ConnectedComponent<typeof FilterSummaryComponent, import("react-redux").Omit<React.ClassAttributes<FilterSummaryComponent> & FilterSummaryProps, "ColumnFilters" | "onClearPopupParams" | "onShare" | "onClearFilter">>;
+export declare let FilterSummary: import("react-redux").ConnectedComponent<typeof FilterSummaryComponent, import("react-redux").Omit<React.ClassAttributes<FilterSummaryComponent> & FilterSummaryProps, "ColumnFilters" | "onShare" | "onClearPopupParams" | "onClearFilter">>;

package/src/View/Filter/FilterViewPanel.d.ts

@@ -18,5 +18,5 @@ declare class FilterViewPanelComponent extends React.Component<FilterViewPanelCo
     private onClearFilters;
     private onClearColumnFilter;
 }
-export declare const FilterViewPanelControl: import("react-redux").ConnectedComponent<typeof FilterViewPanelComponent, import("react-redux").Omit<React.ClassAttributes<FilterViewPanelComponent> & FilterViewPanelComponentProps, "api" | "Columns" | "ColumnFilters" | "moduleInfo" | "accessLevel" | "IsQuickFilterVisible" | "viewType" | "onHideQuickFilterBar" | "onShowQuickFilterBar" | "Entitlements">>;
+export declare const FilterViewPanelControl: import("react-redux").ConnectedComponent<typeof FilterViewPanelComponent, import("react-redux").Omit<React.ClassAttributes<FilterViewPanelComponent> & FilterViewPanelComponentProps, "api" | "accessLevel" | "moduleInfo" | "Columns" | "ColumnFilters" | "IsQuickFilterVisible" | "viewType" | "onHideQuickFilterBar" | "onShowQuickFilterBar" | "Entitlements">>;
 export {};

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

@@ -1,11 +1,11 @@
 /// <reference types="react" />
 import { FormatColumn } from '../../../PredefinedConfig/FormatColumnState';
 import { AdaptableApi } from '../../../Api/AdaptableApi';
-export declare const isFormatColumnStyleValid: (data: FormatColumn, api: AdaptableApi) => true | "No format applied" | "Invalid Cell Range" | "Invalid Column Comparison Range";
+export declare const isFormatColumnStyleValid: (data: FormatColumn, api: AdaptableApi) => true | "No format applied";
 declare type FormatColumnStyleWizardSectionProps = {
     onChange: (data: FormatColumn) => void;
 };
-export declare const renderFormatColumnStyleWizardSummary: (data: FormatColumn) => any;
-export declare const renderFormatColumnStyleSummary: (data: FormatColumn, api: AdaptableApi) => any;
+export declare const renderFormatColumnStyleWizardSummary: (data: FormatColumn) => JSX.Element;
+export declare const renderFormatColumnStyleSummary: (data: FormatColumn, api: AdaptableApi) => JSX.Element;
 export declare function FormatColumnStyleWizardSection(props: FormatColumnStyleWizardSectionProps): JSX.Element;
 export {};