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

package/src/Api/Implementation/StyledColumnApiImpl.js

@@ -0,0 +1,134 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.StyledColumnApiImpl = void 0;
+const tslib_1 = require("tslib");
+const ApiBase_1 = require("./ApiBase");
+const StyledColumnRedux = tslib_1.__importStar(require("../../Redux/ActionsReducers/StyledColumnRedux"));
+class StyledColumnApiImpl extends ApiBase_1.ApiBase {
+    getStyledColumnState() {
+        return this.getAdaptableState().StyledColumn;
+    }
+    getAllStyledColumn(config) {
+        var _a;
+        return ((_a = this.handleLayoutAssociatedObjects(this.getStyledColumnState().StyledColumns, 'StyledColumn', config)) !== null && _a !== void 0 ? _a : []);
+    }
+    getStyledColumnById(id) {
+        return this.getAllStyledColumn().find((styledcolumn) => styledcolumn.Uuid === id);
+    }
+    getStyledColumnByColumnId(id) {
+        return this.getAllStyledColumn().find((styledcolumn) => styledcolumn.ColumnId === id);
+    }
+    getAllActiveStyledColumn() {
+        return this.getAllStyledColumn().filter((styledcolumn) => !styledcolumn.IsSuspended);
+    }
+    getAllSuspendedStyledColumn() {
+        return this.getAllStyledColumn().filter((styledcolumn) => styledcolumn.IsSuspended);
+    }
+    deleteStyledColumn(styledColumn) {
+        this.dispatchAction(StyledColumnRedux.StyledColumnDelete(styledColumn));
+    }
+    addStyledColumn(styledColumn) {
+        this.dispatchAction(StyledColumnRedux.StyledColumnAdd(styledColumn));
+    }
+    getNumericStyleMinValue(numericStyle, column, rowNode, cellValue) {
+        var _a, _b;
+        const columnComparison = numericStyle.GradientStyle
+            ? numericStyle.GradientStyle.ColumnComparison
+            : (_a = numericStyle.PercentBarStyle) === null || _a === void 0 ? void 0 : _a.ColumnComparison;
+        if (columnComparison) {
+            if (!isNaN(Number(columnComparison.MinValue))) {
+                return Number(columnComparison.MinValue);
+            }
+            else {
+                let columnId = columnComparison.MinValue;
+                if (!this.adaptable.api.columnApi.doesColumnExist(columnId)) {
+                    return 0;
+                }
+                else {
+                    return this.adaptable.api.gridApi.getRawValueFromRowNode(rowNode, columnId);
+                }
+            }
+        }
+        // for Gradient Column we want just the range that contains cell value
+        if (numericStyle.GradientStyle) {
+            let range;
+            numericStyle.GradientStyle.CellRanges.forEach((cellRange) => {
+                if (!range) {
+                    if ((cellRange.Min == 'Col-Min' || cellValue >= cellRange.Min) &&
+                        (cellRange.Max == 'Col-Max' || cellValue <= cellRange.Max)) {
+                        range = cellRange;
+                    }
+                }
+            });
+            return this.getCellColorRangeMinValue(range, column);
+        }
+        // for percentbar we want to get the whole Ranges
+        if (numericStyle.PercentBarStyle) {
+            const ranges = (_b = numericStyle.PercentBarStyle) === null || _b === void 0 ? void 0 : _b.CellRanges;
+            if (ranges) {
+                return this.getCellColorRangeMinValue(ranges[0], column);
+            }
+        }
+    }
+    getNumericStyleMaxValue(numericStyle, column, rowNode, cellValue) {
+        var _a, _b;
+        const columnComparison = numericStyle.GradientStyle
+            ? numericStyle.GradientStyle.ColumnComparison
+            : (_a = numericStyle.PercentBarStyle) === null || _a === void 0 ? void 0 : _a.ColumnComparison;
+        if (columnComparison) {
+            if (!isNaN(Number(columnComparison.MaxValue))) {
+                return Number(columnComparison.MaxValue);
+            }
+            else {
+                let columnId = columnComparison.MaxValue;
+                if (!this.adaptable.api.columnApi.doesColumnExist(columnId)) {
+                    return 0;
+                }
+                else {
+                    return this.adaptable.api.gridApi.getRawValueFromRowNode(rowNode, columnId);
+                }
+            }
+        }
+        if (numericStyle.GradientStyle) {
+            let range;
+            numericStyle.GradientStyle.CellRanges.forEach((cellRange) => {
+                if (!range) {
+                    if ((cellRange.Min == 'Col-Min' || cellValue >= cellRange.Min) &&
+                        (cellRange.Max == 'Col-Max' || cellValue <= cellRange.Max)) {
+                        range = cellRange;
+                    }
+                }
+            });
+            return this.getCellColorRangeMaxValue(range, column);
+        }
+        if (numericStyle.PercentBarStyle) {
+            const ranges = (_b = numericStyle.PercentBarStyle) === null || _b === void 0 ? void 0 : _b.CellRanges;
+            if (ranges) {
+                return this.getCellColorRangeMaxValue(ranges[ranges.length - 1], column);
+            }
+        }
+    }
+    getCellColorRangeMinValue(range, column) {
+        if (!range) {
+            return undefined;
+        }
+        if (range.Min == undefined) {
+            return undefined;
+        }
+        return range.Min == 'Col-Min'
+            ? this.getAdaptableApi().columnApi.getMinValueForNumericColumn(column)
+            : range.Min;
+    }
+    getCellColorRangeMaxValue(range, column) {
+        if (!range) {
+            return undefined;
+        }
+        if (range.Max == undefined) {
+            return undefined;
+        }
+        return range.Max == 'Col-Max'
+            ? this.getAdaptableApi().columnApi.getMaxValueForNumericColumn(column)
+            : range.Max;
+    }
+}
+exports.StyledColumnApiImpl = StyledColumnApiImpl;

package/src/Api/StyledColumnApi.d.ts

@@ -0,0 +1,68 @@
+import { RowNode } from '@ag-grid-community/core/dist/cjs/es5/entities/rowNode';
+import { AdaptableColumn } from '../PredefinedConfig/Common/AdaptableColumn';
+import { CellColorRange } from '../PredefinedConfig/FormatColumnState';
+import { StyledColumnState, StyledColumn } from '../PredefinedConfig/StyledColumnState';
+/**
+ * Provides run-time access to the Format Column Module and associated state
+ */
+export interface StyledColumnApi {
+    /**
+     * Delete styled column
+     * @param styledColumn
+     */
+    deleteStyledColumn(styledColumn: StyledColumn): void;
+    /**
+     * Create a styled column
+     * @param styledColumn
+     */
+    addStyledColumn(styledColumn: StyledColumn): void;
+    /**
+     * Retrieves Format Column section from Adaptable State
+     */
+    getStyledColumnState(): StyledColumnState;
+    /**
+     * Retrieves all Format Columns in Adaptable State
+     * @returns format columns
+     */
+    getAllStyledColumn(config?: {
+        includeLayoutNotAssociatedObjects?: boolean;
+    }): StyledColumn[];
+    /**
+     * Retrieves Format Column by Id
+     * @param id Format Column id
+     * @returns format column
+     */
+    getStyledColumnById(id: StyledColumn['Uuid']): StyledColumn;
+    /**
+     * Retrieves Format Column by Column Id
+     * @param columnId Format Column id
+     * @returns format column
+     */
+    getStyledColumnByColumnId(columnId: StyledColumn['ColumnId']): StyledColumn;
+    /**
+     * Retrieves all active (not-suspended) Format Columns in Adaptable State
+     * @returns format columns
+     */
+    getAllActiveStyledColumn(): StyledColumn[];
+    /**
+     * Retrieves all suspended Format Columns in Adaptable State
+     * @returns format columns
+     */
+    getAllSuspendedStyledColumn(): StyledColumn[];
+    /**
+     * Gets the Minimum Value to display for a Numeric Style
+     * @param numericStyle Numeric Style to check
+     * @param rowNode current Row Node
+     * @param cellValue current Cell Value
+     */
+    getNumericStyleMinValue(numericStyle: Omit<StyledColumn, 'ColumnId'>, column: AdaptableColumn, rowNode: RowNode, cellValue: any): number;
+    /**
+     * Gets the Maximum Value to display for a Numeric Style
+     * @param numericStyle Numeric Style to check
+     * @param rowNode current Row Node
+     * @param cellValue current Cell Value
+     */
+    getNumericStyleMaxValue(numericStyle: Omit<StyledColumn, 'ColumnId'>, column: AdaptableColumn, rowNode: RowNode, cellValue: any): number;
+    getCellColorRangeMinValue(range: CellColorRange, column: AdaptableColumn): number | undefined;
+    getCellColorRangeMaxValue(range: CellColorRange, column: AdaptableColumn): number | undefined;
+}

package/src/Api/StyledColumnApi.js

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

package/src/PredefinedConfig/AdaptableState.d.ts

@@ -23,6 +23,7 @@ import { QueryState } from './QueryState';
 import { FlashingCellState } from './FlashingCellState';
 import { StatusBarState } from './StatusBarState';
 import { ChartingState } from './ChartingState';
+import { StyledColumnState } from './StyledColumnState';
 /**
  * The main state object of Adaptable
  */
@@ -48,6 +49,7 @@ export interface AdaptablePersistentState {
     Query: QueryState;
     QuickSearch: QuickSearchState;
     Schedule: ScheduleState;
+    StyledColumn: StyledColumnState;
     Shortcut: ShortcutState;
     StatusBar: StatusBarState;
     TeamSharing: TeamSharingState;

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

@@ -51,4 +51,4 @@ export interface AdaptableBaseIcon {
 /**
  * All AdapTable internal icon names
  */
-export declare type AdaptableInternalIconName = 'add' | 'add-row' | 'alert' | 'align-justify' | 'analysis' | 'application' | 'arrow-down' | 'arrow-left' | 'arrow-right' | 'arrow-up' | 'arrow-up-long' | 'arrow-down-long' | 'arrowexpand' | 'attach-file' | 'blanks' | 'boolean-list' | 'broadcast' | 'build' | 'bulk-update' | 'calculated-column' | 'calendar' | 'call' | 'campaign' | 'cell-summary' | 'cell-validation' | 'chart' | 'chat' | 'check' | 'check-circle' | 'checked' | 'clear' | 'clone' | 'close' | 'cloud-upload' | 'collapse' | 'column-add' | 'column-chooser' | 'column-filter' | 'comment' | 'conditional-style' | 'contains' | 'custom-sort' | 'dashboard' | 'data-set' | 'date-range' | 'delete' | 'division' | 'dock' | 'drag' | 'edit' | 'ends-with' | 'equal' | 'equation' | 'error' | 'expand' | 'exponent' | 'export' | 'export-data' | 'fast-backward' | 'fast-forward' | 'filter' | 'flashing-cell' | 'folder' | 'folder-open' | 'folder-shared' | 'format-column' | 'freetext-column' | 'function' | 'gradient-column' | 'greater-than' | 'greater-than-or-equal' | 'hide-column' | 'history' | 'home' | 'import-export' | 'info' | 'instrument' | 'invalid' | 'ipushpull' | 'justify' | 'layout' | 'less-than' | 'less-than-or-equal' | 'list' | 'login' | 'logout' | 'menu' | 'minus' | 'multiplication' | 'newpage' | 'news' | 'non-blanks' | 'not-contains' | 'not-equal' | 'ok' | 'pause' | 'percent' | 'percent-bar' | 'person' | 'pie-chart' | 'play' | 'plus' | 'plus-minus' | 'query' | 'quick-search' | 'quote' | 'refresh' | 'regex' | 'reminder' | 'save' | 'schedule' | 'settings' | 'shortcut' | 'show-column' | 'smart-edit' | 'sort-asc' | 'sort-desc' | 'spark-line' | 'starts-with' | 'state-management' | 'statusbar' | 'stop' | 'system-status' | 'tab-unselected' | 'team-share' | 'theme' | 'tool-panel' | 'track-changes' | 'trash' | 'triangle-down' | 'triangle-up' | 'unchecked' | 'undo' | 'updated-row' | 'upload' | 'warning';
+export declare type AdaptableInternalIconName = 'add' | 'add-row' | 'alert' | 'align-justify' | 'analysis' | 'application' | 'arrow-down' | 'arrow-left' | 'arrow-right' | 'arrow-up' | 'arrow-up-long' | 'arrow-down-long' | 'arrowexpand' | 'attach-file' | 'blanks' | 'boolean-list' | 'broadcast' | 'brush' | 'build' | 'bulk-update' | 'calculated-column' | 'calendar' | 'call' | 'campaign' | 'cell-summary' | 'cell-validation' | 'chart' | 'chat' | 'check' | 'check-circle' | 'checked' | 'clear' | 'clone' | 'close' | 'cloud-upload' | 'collapse' | 'column-add' | 'column-chooser' | 'column-filter' | 'comment' | 'conditional-style' | 'contains' | 'custom-sort' | 'dashboard' | 'data-set' | 'date-range' | 'delete' | 'division' | 'dock' | 'drag' | 'edit' | 'ends-with' | 'equal' | 'equation' | 'error' | 'expand' | 'exponent' | 'export' | 'export-data' | 'fast-backward' | 'fast-forward' | 'filter' | 'flashing-cell' | 'folder' | 'folder-open' | 'folder-shared' | 'format-column' | 'freetext-column' | 'function' | 'gradient-column' | 'greater-than' | 'greater-than-or-equal' | 'hide-column' | 'history' | 'home' | 'import-export' | 'info' | 'instrument' | 'invalid' | 'ipushpull' | 'justify' | 'layout' | 'less-than' | 'less-than-or-equal' | 'list' | 'login' | 'logout' | 'menu' | 'minus' | 'multiplication' | 'newpage' | 'news' | 'non-blanks' | 'not-contains' | 'not-equal' | 'ok' | 'pause' | 'percent' | 'percent-bar' | 'person' | 'pie-chart' | 'play' | 'plus' | 'plus-minus' | 'query' | 'quick-search' | 'quote' | 'refresh' | 'regex' | 'reminder' | 'save' | 'schedule' | 'settings' | 'shortcut' | 'show-column' | 'smart-edit' | 'sort-asc' | 'sort-desc' | 'spark-line' | 'starts-with' | 'state-management' | 'statusbar' | 'stop' | 'system-status' | 'tab-unselected' | 'team-share' | 'theme' | 'tool-panel' | 'track-changes' | 'trash' | 'triangle-down' | 'triangle-up' | 'unchecked' | 'undo' | 'updated-row' | 'upload' | 'warning';

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;
+}