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

package/src/PredefinedConfig/Common/Types.d.ts

@@ -22,15 +22,15 @@ export declare type AdaptableModuleButtons = AdaptableModuleButton[];
 /**
  * List of all the Module buttons Adaptable provides - each Module has a popup for which this is a shortcut button
  */
-export declare type AdaptableModuleButton = 'Alert' | 'BulkUpdate' | 'CalculatedColumn' | 'CellSummary' | 'ConditionalStyle' | 'CustomSort' | 'Dashboard' | 'DataChangeHistory' | 'DataSet' | 'Export' | 'Filter' | 'FlashingCell' | 'FormatColumn' | 'FreeTextColumn' | 'Glue42' | 'GridInfo' | 'Layout' | 'OpenFin' | 'PlusMinus' | 'Query' | 'QuickSearch' | 'Schedule' | 'SettingsPanel' | 'Shortcut' | 'SmartEdit' | 'StateManagement' | 'StatusBar' | 'SystemStatus' | 'TeamSharing' | 'Theme';
+export declare type AdaptableModuleButton = 'Alert' | 'BulkUpdate' | 'CalculatedColumn' | 'CellSummary' | 'ConditionalStyle' | 'CustomSort' | 'Dashboard' | 'DataChangeHistory' | 'DataSet' | 'Export' | 'Filter' | 'FlashingCell' | 'FormatColumn' | 'FreeTextColumn' | 'Glue42' | 'GridInfo' | 'Layout' | 'OpenFin' | 'PlusMinus' | 'Query' | 'QuickSearch' | 'Schedule' | 'SettingsPanel' | 'Shortcut' | 'SmartEdit' | 'StyledColumn' | 'StateManagement' | 'StatusBar' | 'SystemStatus' | 'TeamSharing' | 'Theme';
 export declare type AdaptableStateKeys = AdaptableStateKey[];
 export declare type AdaptableStateKey = keyof AdaptablePersistentState | 'OpenFin' | 'Glue42' | 'IPushPull';
 /**
  * Modules provided by AdapTable, subject to Entitlements and usually have Predefined Config
  */
-export declare type AdaptableModule = 'Alert' | 'BulkUpdate' | 'CalculatedColumn' | 'CellSummary' | 'Charting' | 'ConditionalStyle' | 'CustomSort' | 'Dashboard' | 'DataChangeHistory' | 'DataSet' | 'Export' | 'Filter' | 'FlashingCell' | 'FormatColumn' | 'FreeTextColumn' | 'Glue42' | 'GridInfo' | 'IPushPull' | 'Layout' | 'OpenFin' | 'PlusMinus' | 'Query' | 'QuickSearch' | 'Schedule' | 'SettingsPanel' | 'Shortcut' | 'SmartEdit' | 'StateManagement' | 'StatusBar' | 'SystemStatus' | 'TeamSharing' | 'Theme' | 'ToolPanel';
+export declare type AdaptableModule = 'Alert' | 'BulkUpdate' | 'CalculatedColumn' | 'CellSummary' | 'Charting' | 'ConditionalStyle' | 'CustomSort' | 'Dashboard' | 'DataChangeHistory' | 'DataSet' | 'Export' | 'Filter' | 'FlashingCell' | 'FormatColumn' | 'FreeTextColumn' | 'Glue42' | 'GridInfo' | 'IPushPull' | 'Layout' | 'OpenFin' | 'PlusMinus' | 'Query' | 'QuickSearch' | 'Schedule' | 'SettingsPanel' | 'Shortcut' | 'SmartEdit' | 'StyledColumn' | 'StateManagement' | 'StatusBar' | 'SystemStatus' | 'TeamSharing' | 'Theme' | 'ToolPanel';
 export declare const ALL_MODULES: AdaptableModule[];
-export declare type AdaptableSettingsPanel = 'Alert' | 'CalculatedColumn' | 'ConditionalStyle' | 'CustomSort' | 'Dashboard' | 'DataChangeHistory' | 'DataSet' | 'Export' | 'Filter' | 'FlashingCell' | 'FormatColumn' | 'FreeTextColumn' | 'GridInfo' | 'Layout' | 'PlusMinus' | 'Query' | 'QuickSearch' | 'Schedule' | 'Shortcut' | 'StateManagement' | 'StatusBar' | 'SystemStatus' | 'TeamSharing' | 'Theme' | 'ToolPanel';
+export declare type AdaptableSettingsPanel = 'Alert' | 'CalculatedColumn' | 'ConditionalStyle' | 'CustomSort' | 'Dashboard' | 'DataChangeHistory' | 'DataSet' | 'Export' | 'Filter' | 'FlashingCell' | 'FormatColumn' | 'FreeTextColumn' | 'GridInfo' | 'Layout' | 'PlusMinus' | 'Query' | 'QuickSearch' | 'Schedule' | 'Shortcut' | 'StyledColumn' | 'StateManagement' | 'StatusBar' | 'SystemStatus' | 'TeamSharing' | 'Theme' | 'ToolPanel';
 export declare type TypeHint<Base, Literals> = (Base & {
     __subType?: true;
 }) | Literals;

package/src/PredefinedConfig/Common/Types.js

@@ -102,6 +102,7 @@ exports.ALL_MODULES = [
     ModuleConstants.SettingsPanelModuleId,
     ModuleConstants.ShortcutModuleId,
     ModuleConstants.SmartEditModuleId,
+    ModuleConstants.StyledColumnModuleId,
     ModuleConstants.StateManagementModuleId,
     ModuleConstants.StatusBarModuleId,
     ModuleConstants.SystemStatusModuleId,

package/src/PredefinedConfig/PredefinedConfig.d.ts

@@ -18,6 +18,7 @@ import { ToolPanelState } from './ToolPanelState';
 import { QueryState } from './QueryState';
 import { StatusBarState } from './StatusBarState';
 import { ChartingState } from './ChartingState';
+import { StyledColumnState } from './StyledColumnState';
 /**
  * This is the main Predefined Config interface which developers will populate at design-time
  */
@@ -87,6 +88,10 @@ export interface PredefinedConfig {
      * Supplies a collection of *Shortcut* objects to aid data entry and prevent 'fat finger' issues
      */
     Shortcut?: ShortcutState;
+    /**
+     * Supplies a collection of Special Column Styles
+     */
+    StyledColumn?: StyledColumnState;
     /**
      * Configures the Adaptable Status Bar
      */

package/src/PredefinedConfig/StyledColumnState.d.ts

@@ -0,0 +1,113 @@
+import { ConfigState } from './ConfigState';
+import { SuspendableObject } from './Common/SuspendableObject';
+/**
+ * Predefined Configuration for Special Column Style Module
+ */
+export interface StyledColumnState extends ConfigState {
+    /**
+     * Collection of Special Column Styles
+     */
+    StyledColumns?: StyledColumn[];
+}
+/**
+ * Object used in Special Column Style function
+ */
+export interface StyledColumn extends SuspendableObject {
+    ColumnId: string;
+    GradientStyle?: GradientStyle;
+    /**
+     * Style a numeric column so each cell displays a 'bar'
+     */
+    PercentBarStyle?: PercentBarStyle;
+    /**
+     * Style a boolean column so each cell displays a checkbox
+     */
+    CheckBoxStyle?: boolean;
+}
+/**
+ * Style used to display Percent Bars in Special Column Style
+ */
+export interface PercentBarStyle extends NumericStyledColumn {
+    /**
+     * Ranges (e.g. to allow a traffic light effect)
+     */
+    CellRanges?: CellColorRange[];
+    /**
+     * Compares cell values to another Column
+     */
+    ColumnComparison?: ColumnComparison;
+    /**
+     * Whether Cell shows Cell Value, Percent Value, both or none
+     */
+    CellText?: CellTextOptions;
+    /**
+     * Whether Tooltip shows Cell Value, Percent Value, both or none
+     */
+    ToolTipText?: CellTextOptions;
+    /**
+     * Back colour - only used for 'Percent Bar' Numeric style; leave unset if none required
+     * @defaultValue Gray
+     */
+    BackColor?: string;
+}
+export interface NumericStyledColumn {
+}
+/**
+ * Used to display Gradient Styles in Special Column Style
+ */
+export interface GradientStyle extends NumericStyledColumn {
+    /**
+     * Ranges (e.g. to allow a traffic light effect)
+     */
+    CellRanges?: CellColorRange[];
+    /**
+     * Compares cell values to another Column
+     */
+    ColumnComparison?: ColumnComparison;
+}
+/**
+ * Defines which Colours to show in Gradient and Percent Bar Styles
+ */
+export interface CellColorRange {
+    /**
+     * Start number of Range
+     */
+    Min: number | 'Col-Min';
+    /**
+     * End number of Range
+     */
+    Max: number | 'Col-Max';
+    /**
+     * Cell colour to use for values that fall inside Range
+     */
+    Color: string;
+    /**
+     * Reverses the Gradient so the lower the cell value the darker the colour
+     */
+    ReverseGradient?: boolean;
+}
+/**
+ * Enables a Percent Bar or Gradient Style to use another column in its calculations
+ */
+export interface ColumnComparison {
+    /**
+     * Start value - either numeric or Column name
+     */
+    MinValue: number | string;
+    /**
+     * End value - either numeric or Column name
+     */
+    MaxValue: number | string;
+    /**
+     * Colour to use for the Comparison
+     */
+    Color: string;
+}
+/**
+ * Array of CellTextOption available in Special Column Styles
+ */
+export declare type CellTextOptions = CellTextOption[];
+/**
+ * Text optionally to show in a Special Column Style special style: 'CellValue' or 'PercentageValue'
+ */
+export declare type CellTextOption = 'CellValue' | 'PercentageValue';

package/src/PredefinedConfig/StyledColumnState.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/src/Redux/ActionsReducers/StyledColumnRedux.d.ts

@@ -0,0 +1,49 @@
+import { StyledColumnState, StyledColumn } from '../../PredefinedConfig/StyledColumnState';
+import * as Redux from 'redux';
+/**
+ * @ReduxAction A Special Column Style has been added
+ */
+export declare const STYLED_COLUMN_ADD = "STYLED_COLUMN_ADD";
+/**
+ * @ReduxAction A Special Column Style has been edited
+ */
+export declare const STYLED_COLUMN_EDIT = "STYLED_COLUMN_EDIT";
+/**
+ * @ReduxAction A Special Column Style has been deleted
+ */
+export declare const STYLED_COLUMN_DELETE = "STYLED_COLUMN_DELETE";
+/**
+ * @ReduxAction StyledColumn Module is ready
+ */
+export declare const STYLED_COLUMN_READY = "STYLED_COLUMN_READY";
+/**
+ * @ReduxAction StyledColumn Module is suspended
+ */
+export declare const STYLED_COLUMN_SUSPEND = "STYLED_COLUMN_SUSPEND";
+/**
+ * @ReduxAction StyledColumn Module is unsuspended, or activated
+ */
+export declare const STYLED_COLUMN_UNSUSPEND = "STYLED_COLUMN_UNSUSPEND";
+export interface StyledColumnAction extends Redux.Action {
+    StyledColumn: StyledColumn;
+}
+export interface StyledColumnAddAction extends StyledColumnAction {
+}
+export interface StyledColumnEditAction extends StyledColumnAction {
+}
+export interface StyledColumnDeleteAction extends StyledColumnAction {
+}
+export interface StyledColumnSuspendAction extends StyledColumnAction {
+}
+export interface StyledColumnUnSuspendAction extends StyledColumnAction {
+}
+export interface StyledColumnReadyAction extends Redux.Action {
+    StyledColumnState: StyledColumnState;
+}
+export declare const StyledColumnAdd: (formatColumn: StyledColumn) => StyledColumnAddAction;
+export declare const StyledColumnEdit: (formatColumn: StyledColumn) => StyledColumnEditAction;
+export declare const StyledColumnDelete: (formatColumn: StyledColumn) => StyledColumnDeleteAction;
+export declare const StyledColumnSuspend: (formatColumn: StyledColumn) => StyledColumnSuspendAction;
+export declare const StyledColumnUnSuspend: (formatColumn: StyledColumn) => StyledColumnSuspendAction;
+export declare const StyledColumnReady: (formatColumnState: StyledColumnState) => StyledColumnReadyAction;
+export declare const StyledColumnReducer: Redux.Reducer<StyledColumnState>;

package/src/Redux/ActionsReducers/StyledColumnRedux.js

@@ -0,0 +1,92 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.StyledColumnReducer = exports.StyledColumnReady = exports.StyledColumnUnSuspend = exports.StyledColumnSuspend = exports.StyledColumnDelete = exports.StyledColumnEdit = exports.StyledColumnAdd = exports.STYLED_COLUMN_UNSUSPEND = exports.STYLED_COLUMN_SUSPEND = exports.STYLED_COLUMN_READY = exports.STYLED_COLUMN_DELETE = exports.STYLED_COLUMN_EDIT = exports.STYLED_COLUMN_ADD = void 0;
+const tslib_1 = require("tslib");
+const GeneralConstants_1 = require("../../Utilities/Constants/GeneralConstants");
+const AdaptableHelper_1 = tslib_1.__importDefault(require("../../Utilities/Helpers/AdaptableHelper"));
+const utils_1 = require("./utils");
+/**
+ * @ReduxAction A Special Column Style has been added
+ */
+exports.STYLED_COLUMN_ADD = 'STYLED_COLUMN_ADD';
+/**
+ * @ReduxAction A Special Column Style has been edited
+ */
+exports.STYLED_COLUMN_EDIT = 'STYLED_COLUMN_EDIT';
+/**
+ * @ReduxAction A Special Column Style has been deleted
+ */
+exports.STYLED_COLUMN_DELETE = 'STYLED_COLUMN_DELETE';
+/**
+ * @ReduxAction StyledColumn Module is ready
+ */
+exports.STYLED_COLUMN_READY = 'STYLED_COLUMN_READY';
+/**
+ * @ReduxAction StyledColumn Module is suspended
+ */
+exports.STYLED_COLUMN_SUSPEND = 'STYLED_COLUMN_SUSPEND';
+/**
+ * @ReduxAction StyledColumn Module is unsuspended, or activated
+ */
+exports.STYLED_COLUMN_UNSUSPEND = 'STYLED_COLUMN_UNSUSPEND';
+const StyledColumnAdd = (formatColumn) => ({
+    type: exports.STYLED_COLUMN_ADD,
+    StyledColumn: formatColumn,
+});
+exports.StyledColumnAdd = StyledColumnAdd;
+const StyledColumnEdit = (formatColumn) => ({
+    type: exports.STYLED_COLUMN_EDIT,
+    StyledColumn: formatColumn,
+});
+exports.StyledColumnEdit = StyledColumnEdit;
+const StyledColumnDelete = (formatColumn) => ({
+    type: exports.STYLED_COLUMN_DELETE,
+    StyledColumn: formatColumn,
+});
+exports.StyledColumnDelete = StyledColumnDelete;
+const StyledColumnSuspend = (formatColumn) => ({
+    type: exports.STYLED_COLUMN_SUSPEND,
+    StyledColumn: formatColumn,
+});
+exports.StyledColumnSuspend = StyledColumnSuspend;
+const StyledColumnUnSuspend = (formatColumn) => ({
+    type: exports.STYLED_COLUMN_UNSUSPEND,
+    StyledColumn: formatColumn,
+});
+exports.StyledColumnUnSuspend = StyledColumnUnSuspend;
+const StyledColumnReady = (formatColumnState) => ({
+    type: exports.STYLED_COLUMN_READY,
+    StyledColumnState: formatColumnState,
+});
+exports.StyledColumnReady = StyledColumnReady;
+const initialState = {
+    StyledColumns: GeneralConstants_1.EMPTY_ARRAY,
+};
+const StyledColumnReducer = (state = initialState, action) => {
+    let formatColumns;
+    switch (action.type) {
+        case exports.STYLED_COLUMN_ADD: {
+            const actionStyledColumn = action.StyledColumn;
+            AdaptableHelper_1.default.addUuidAndSource(actionStyledColumn);
+            formatColumns = [].concat(state.StyledColumns);
+            formatColumns.push(actionStyledColumn);
+            return Object.assign(Object.assign({}, state), { StyledColumns: formatColumns });
+        }
+        case exports.STYLED_COLUMN_EDIT:
+            const actionStyledColumn = action.StyledColumn;
+            return Object.assign(Object.assign({}, state), { StyledColumns: state.StyledColumns.map((abObject) => abObject.Uuid === actionStyledColumn.Uuid ? actionStyledColumn : abObject) });
+        case exports.STYLED_COLUMN_DELETE: {
+            const actionStyledColumn = action.StyledColumn;
+            return Object.assign(Object.assign({}, state), { StyledColumns: state.StyledColumns.filter((abObject) => abObject.Uuid !== actionStyledColumn.Uuid) });
+        }
+        case exports.STYLED_COLUMN_SUSPEND: {
+            return Object.assign(Object.assign({}, state), { StyledColumns: (0, utils_1.changeIsSuspendInList)(action.StyledColumn, state.StyledColumns, true) });
+        }
+        case exports.STYLED_COLUMN_UNSUSPEND: {
+            return Object.assign(Object.assign({}, state), { StyledColumns: (0, utils_1.changeIsSuspendInList)(action.StyledColumn, state.StyledColumns, false) });
+        }
+        default:
+            return state;
+    }
+};
+exports.StyledColumnReducer = StyledColumnReducer;

package/src/Redux/Store/AdaptableStore.js

@@ -24,6 +24,7 @@ const ConditionalStyleRedux = tslib_1.__importStar(require("../ActionsReducers/C
 const QuickSearchRedux = tslib_1.__importStar(require("../ActionsReducers/QuickSearchRedux"));
 const ThemeRedux = tslib_1.__importStar(require("../ActionsReducers/ThemeRedux"));
 const FormatColumnRedux = tslib_1.__importStar(require("../ActionsReducers/FormatColumnRedux"));
+const StyledColumnRedux = tslib_1.__importStar(require("../ActionsReducers/StyledColumnRedux"));
 const ApplicationRedux = tslib_1.__importStar(require("../ActionsReducers/ApplicationRedux"));
 const FreeTextColumnRedux = tslib_1.__importStar(require("../ActionsReducers/FreeTextColumnRedux"));
 const LayoutRedux = tslib_1.__importStar(require("../ActionsReducers/LayoutRedux"));
@@ -148,6 +149,7 @@ class AdaptableStore {
             ToolPanel: ToolPanelRedux.ToolPanelReducer,
             Query: QueryRedux.QueryReducer,
             Charting: ChartingRedux.ChartingReducer,
+            StyledColumn: StyledColumnRedux.StyledColumnReducer,
             // dead reducers
             PercentBar: DeadRedux.PercentBarReducer,
             UpdatedRow: DeadRedux.UpdatedRowReducer,
@@ -661,6 +663,11 @@ const adaptableMiddleware = (adaptable) => function (middlewareAPI) {
                 case FormatColumnRedux.FORMAT_COLUMN_MOVE_UP:
                 case FormatColumnRedux.FORMAT_COLUMN_SUSPEND:
                 case FormatColumnRedux.FORMAT_COLUMN_UNSUSPEND:
+                case StyledColumnRedux.STYLED_COLUMN_ADD:
+                case StyledColumnRedux.STYLED_COLUMN_EDIT:
+                case StyledColumnRedux.STYLED_COLUMN_DELETE:
+                case StyledColumnRedux.STYLED_COLUMN_SUSPEND:
+                case StyledColumnRedux.STYLED_COLUMN_UNSUSPEND:
                 case CustomSortRedux.CUSTOM_SORT_ADD:
                 case CustomSortRedux.CUSTOM_SORT_EDIT:
                 case CustomSortRedux.CUSTOM_SORT_DELETE:

package/src/Strategy/StyledColumnModule.d.ts

@@ -0,0 +1,24 @@
+import { AdaptableModuleBase } from './AdaptableModuleBase';
+import { AdaptableColumn } from '../PredefinedConfig/Common/AdaptableColumn';
+import { AdaptableMenuItem } from '../PredefinedConfig/Common/Menu';
+import { TeamSharingImportInfo } from '../PredefinedConfig/TeamSharingState';
+import { FormatColumn } from '../PredefinedConfig/FormatColumnState';
+import { AdaptableModuleView, AdaptableObjectView, IModule } from './Interface/IModule';
+import { AdaptableApi } from '../Api/AdaptableApi';
+import { AdaptableObject } from '../PredefinedConfig/Common/AdaptableObject';
+import { StyledColumn } from '../PredefinedConfig/StyledColumnState';
+export declare class StyledColumnModule extends AdaptableModuleBase implements IModule {
+    constructor(api: AdaptableApi);
+    updateOldConfig(): void;
+    getModuleAdaptableObjects(config?: {
+        includeLayoutNotAssociatedObjects?: boolean;
+    }): AdaptableObject[];
+    getExplicitlyReferencedColumnIds(formatColumn: FormatColumn): string[];
+    hasNamedQueryReferences(): boolean;
+    addColumnMenuItems(column: AdaptableColumn): AdaptableMenuItem[] | undefined;
+    getTeamSharingAction(): TeamSharingImportInfo<StyledColumn>;
+    toView(styledColumn: StyledColumn): AdaptableObjectView;
+    toViewAll(): AdaptableObjectView[];
+    getViewProperties(): AdaptableModuleView;
+    canBeAssociatedWithLayouts(): boolean;
+}

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;