@adaptabletools/adaptable 12.0.0-canary.7 → 12.0.1-canary.0

package/index.css

@@ -2649,7 +2649,7 @@ template {
   --ab-cmp-adaptable-object-compact-list__header__padding: var(--ab-space-2);
   --ab-cmp-adaptable-object-compact-list__header__margin-bottom: var(--ab-space-1);
   --ab-cmp-adaptable-object-compact-list__header__font-size: var(--ab-font-size-4);
-  --ab-cmp-adaptable-object-compact-list-item-name__width: 80px;
+  --ab-cmp-adaptable-object-compact-list-item-name__width: 95px;
   --ab-cmp-adaptable-object-compact-list-item-name__padding: var(--ab-space-1);
   --ab-cmp-adaptable-object-compact-list-item-name__margin-right: var(--ab-space-1);
   --ab-cmp-adaptable-object-compact-list-item-name__font-size: var(--ab-font-size-4); }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@adaptabletools/adaptable",
-  "version": "12.0.0-canary.7",
+  "version": "12.0.1-canary.0",
   "description": "Powerful data-agnostic HTML5 datagrid add-on that sits on top of an underlying grid component and provides all the rich functionality that advanced users expect from their DataGrids and Data Tables",
   "keywords": [
     "web-components",
@@ -56,6 +56,6 @@
     "uuid": "^3.3.2"
   },
   "peerDependencies": {
-    "@ag-grid-community/all-modules": ">=27.2.0"
+    "@ag-grid-community/all-modules": ">=27.3.0"
   }
 }

package/publishTimestamp.d.ts

@@ -1,2 +1,2 @@
-declare const _default: 1655632388110;
+declare const _default: 1656107619570;
 export default _default;

package/publishTimestamp.js

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

package/src/AdaptableOptions/ActionOptions.d.ts

@@ -131,7 +131,7 @@ export interface ActionRowFormOptions {
     /**
      * Custom form buttons provider. If provided, the custom implementation is responsible for firing the 'ActionRowSubmitted' and/or invoking the 'onFormSubmit' callback (if necessary).
      */
-    formButtons?: AdaptableButton<FormContext>[];
+    formButtons?: AdaptableButton<ActionRowContext>[];
     /**
      * Function which is invoked when the form in an Action Row is submitted via a standard button (provided by AdapTable). This is not invoked when custom form buttons are provided!
      *

package/src/Api/DataSetApi.d.ts

@@ -33,8 +33,8 @@ export interface DataSetApi {
      */
     showDataSetPopup(): void;
     /**
-     * Fire the DataSet Changed Event
-     * @param dataSet Data Set which has changed
+     * Fires the DataSet Selected Event
+     * @param dataSet Data Set which has been selected
      */
-    fireDataSetChangeEvent(dataSet: DataSet): void;
+    fireDataSetSelectedEvent(dataSet: DataSet): void;
 }

package/src/Api/EventApi.d.ts

@@ -15,7 +15,7 @@ import { FlashingCellDisplayedInfo } from './Events/FlashingCellDisplayed';
 import { GridDataChangedInfo } from './Events/GridDataChanged';
 import { TeamSharingEntityChangedInfo } from './Events/TeamSharingEntityChanged';
 import { ActionRowSubmittedInfo } from './Events/ActionRowSubmitted';
-import { DataSetChangedInfo } from './Events/DataSetChanged';
+import { DataSetSelectedInfo } from './Events/DataSetSelected';
 /**
  * Responsible for publishing the many Events that AdapTable fires
  */
@@ -209,18 +209,18 @@ export interface EventApi {
      */
     off(eventName: 'ActionRowSubmitted', callback: (actionRowSubmittedInfo: ActionRowSubmittedInfo) => void): void;
     /**
-     * Event fired when a DataSet is changed
+     * Event fired when a DataSet is Selected
      *
-     * @param eventName DataSetChanged
-     * @param callback DataSetChangedInfo
+     * @param eventName DataSetSelected
+     * @param callback DataSetSelectedInfo
      */
-    on(eventName: 'DataSetChanged', callback: (dataSetChangedInfo: DataSetChangedInfo) => void): () => void;
+    on(eventName: 'DataSetSelected', callback: (dataSetSelectedInfo: DataSetSelectedInfo) => void): () => void;
     /**
-     * Unsubscribe from DataSetChanged
-     * @param eventName DataSetChanged
+     * Unsubscribe from DataSetSelected
+     * @param eventName DataSetSelected
      * @param callback
      */
-    off(eventName: 'DataSetChanged', callback: (dataSetChangedInfo: DataSetChangedInfo) => void): void;
+    off(eventName: 'DataSetSelected', callback: (dataSetSelectedInfo: DataSetSelectedInfo) => void): void;
     /**
      * Fired when Adaptable is up and running - has no arguments.
      * @param eventName - AdaptableReady
@@ -252,6 +252,6 @@ export interface EventApi {
     emitSync(eventName: 'DashboardChanged', data?: any): any[];
     emitSync(eventName: 'FlashingCellDisplayed', data?: any): any[];
     emitSync(eventName: 'AdaptableDestroy'): any[];
-    emit(eventName: 'AdaptableReady' | 'AlertFired' | 'CheckboxColumnClicked' | 'CustomToolbarConfigured' | 'AdaptableStateChanged' | 'DashboardChanged' | 'CellChanged' | 'GridDataChanged' | 'LayoutChanged' | 'LiveDataChanged' | 'SearchChanged' | 'SelectionChanged' | 'SystemStatusMessageDisplayed' | 'TeamSharingEntityChanged' | 'ThemeChanged' | 'FDC3MessageSent' | 'ActionRowSubmitted' | 'DataSetChanged', data?: any): Promise<any>;
+    emit(eventName: 'AdaptableReady' | 'AlertFired' | 'CheckboxColumnClicked' | 'CustomToolbarConfigured' | 'AdaptableStateChanged' | 'DashboardChanged' | 'CellChanged' | 'GridDataChanged' | 'LayoutChanged' | 'LiveDataChanged' | 'SearchChanged' | 'SelectionChanged' | 'SystemStatusMessageDisplayed' | 'TeamSharingEntityChanged' | 'ThemeChanged' | 'FDC3MessageSent' | 'ActionRowSubmitted' | 'DataSetSelected', data?: any): Promise<any>;
     destroy(): void;
 }

package/src/Api/Events/DataSetSelected.d.ts

@@ -0,0 +1,11 @@
+import { DataSet } from '../../types';
+import { BaseEventInfo } from './BaseEventInfo';
+/**
+ * Object returned by the `DataSetSelected` event
+ */
+export interface DataSetSelectedInfo extends BaseEventInfo {
+    /**
+     * The DataSet that has been selected
+     */
+    dataSet: DataSet;
+}

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

@@ -8,5 +8,5 @@ export declare class DataSetApiImpl extends ApiBase implements DataSetApi {
     setDataSet(dataSetName: string): void;
     clearCurrentDataSet(): void;
     showDataSetPopup(): void;
-    fireDataSetChangeEvent(dataSet: DataSet): void;
+    fireDataSetSelectedEvent(dataSet: DataSet): void;
 }

package/src/Api/Implementation/DataSetApiImpl.js

@@ -29,13 +29,13 @@ class DataSetApiImpl extends ApiBase_1.ApiBase {
     showDataSetPopup() {
         this.showModulePopup(ModuleConstants.DataSetModuleId);
     }
-    fireDataSetChangeEvent(dataSet) {
+    fireDataSetSelectedEvent(dataSet) {
         if (this.adaptable.isInitialised) {
-            const dataSetChangedInfo = {
+            const dataSetSelectedInfo = {
                 adaptableApi: this.adaptable.api,
                 dataSet,
             };
-            this.adaptable.api.eventApi.emit('DataSetChanged', dataSetChangedInfo);
+            this.adaptable.api.eventApi.emit('DataSetSelected', dataSetSelectedInfo);
         }
     }
 }

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

@@ -114,7 +114,10 @@ export declare class InternalApiImpl extends ApiBase implements InternalApi {
     getLabelForButton(button: AdaptableButton<BaseContext>, context: BaseContext): string | undefined;
     getTooltipForButton(button: AdaptableButton<BaseContext>, context: BaseContext): string | undefined;
     getStyleForButton(button: AdaptableButton<BaseContext>, context: BaseContext): ButtonStyle | undefined;
-    getIconForButton(button: AdaptableButton<BaseContext>, context: BaseContext): AdaptableIcon | undefined;
+    getIconForButton(button: AdaptableButton<BaseContext>, context: BaseContext, defaultWidthHeight?: {
+        height: number | string;
+        width: number | string;
+    }): AdaptableIcon | undefined;
     isDocumentationLinksDisplayed(): boolean;
     getQueryPreviewData(): any;
     getLocalTeamSharingEntities(): SharedEntity[];

package/src/Api/Implementation/InternalApiImpl.js

@@ -16,6 +16,7 @@ const LoggingHelper_1 = require("../../Utilities/Helpers/LoggingHelper");
 const ArrayExtensions_1 = tslib_1.__importDefault(require("../../Utilities/Extensions/ArrayExtensions"));
 const AdaptableAlert_1 = require("../../PredefinedConfig/Common/AdaptableAlert");
 const waitForCondition_1 = require("../../Utilities/waitForCondition");
+const AdaptableIconComponent_1 = require("../../components/AdaptableIconComponent");
 class InternalApiImpl extends ApiBase_1.ApiBase {
     getSystemState() {
         return this.getAdaptableState().System;
@@ -360,16 +361,28 @@ class InternalApiImpl extends ApiBase_1.ApiBase {
             return button.buttonStyle;
         }
     }
-    getIconForButton(button, context) {
+    getIconForButton(button, context, defaultWidthHeight) {
+        var _a, _b;
         if (!button.icon) {
             return;
         }
+        let buttonIcon;
         if (button.icon != null && typeof button.icon === 'function') {
-            return button.icon(button, context);
+            buttonIcon = button.icon(button, context);
         }
         else {
-            return button.icon;
+            buttonIcon = button.icon;
+        }
+        if (!buttonIcon) {
+            return;
+        }
+        if (AdaptableIconComponent_1.isAdaptableInternalIcon(buttonIcon) || AdaptableIconComponent_1.isAdaptableExternalIcon(buttonIcon)) {
+            const defaultIconWidth = (_a = defaultWidthHeight === null || defaultWidthHeight === void 0 ? void 0 : defaultWidthHeight.width) !== null && _a !== void 0 ? _a : 'var(--ab-cmp-simple-button__width)';
+            const defaultIconHeight = (_b = defaultWidthHeight === null || defaultWidthHeight === void 0 ? void 0 : defaultWidthHeight.height) !== null && _b !== void 0 ? _b : 'var(--ab-cmp-simple-button__height)';
+            const buttonIconStyle = Object.assign({}, { width: defaultIconWidth, height: defaultIconHeight }, buttonIcon.style);
+            buttonIcon.style = buttonIconStyle;
         }
+        return buttonIcon;
     }
     isDocumentationLinksDisplayed() {
         return this.adaptable.adaptableOptions.userInterfaceOptions.showDocumentationLinks;

package/src/Api/InternalApi.d.ts

@@ -117,7 +117,10 @@ export interface InternalApi {
     getLabelForButton(button: AdaptableButton<BaseContext>, context: BaseContext): string | undefined;
     getTooltipForButton(button: AdaptableButton<BaseContext>, context: BaseContext): string | undefined;
     getStyleForButton(button: AdaptableButton<BaseContext>, context: BaseContext): ButtonStyle | undefined;
-    getIconForButton(button: AdaptableButton<BaseContext>, context: BaseContext): AdaptableIcon | undefined;
+    getIconForButton(button: AdaptableButton<BaseContext>, context: BaseContext, defaultWidthHeight?: {
+        height: number | string;
+        width: number | string;
+    }): AdaptableIcon | undefined;
     dispatchReduxAction(action: Action): void;
     waitForTeamSharingImportEnd(): Promise<boolean>;
     getLocalTeamSharingEntities(): SharedEntity[];

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

@@ -1,25 +1,44 @@
-import { CSSProperties } from 'react';
+import * as React from 'react';
 /**
  * Defines an icon to be used in AdapTable (e.g. in Dashboard Header, Buttons, Menu, etc.)
  */
-export declare type AdaptableIcon = AdaptableInternalIcon | AdaptableExternalIcon;
+export declare type AdaptableIcon = AdaptableInternalIcon | AdaptableExternalIcon | AdaptableElementIcon;
 /**
  * Defines an icon from the internal AdapTable icon set
  */
 export interface AdaptableInternalIcon extends AdaptableBaseIcon {
+    /**
+     * The name of the icon to use (referencing the AdapTable Icon Library)
+     */
     name: AdaptableInternalIconName;
+    /**
+     * The size (in pixels) of the SVG icon (defaults to `17px`)
+     *
+     */
     size?: number;
 }
 /**
  * Defines an icon from an external source
  */
 export interface AdaptableExternalIcon extends AdaptableBaseIcon {
+    /**
+     * The URL of the icon to use
+     */
     src: string;
 }
+/**
+ * Defines an icon as a provided DOM element or HTML string
+ */
+export interface AdaptableElementIcon {
+    /**
+     * The icon to display, either a DOM element or HTML string
+     */
+    element: HTMLElement | string;
+}
 /**
  * Base interface for AdaptableIcon
  */
-interface AdaptableBaseIcon {
+export interface AdaptableBaseIcon {
     /**
      * The class name of the icon
      */
@@ -27,7 +46,6 @@ interface AdaptableBaseIcon {
     /**
      * CSS Properties
      */
-    style?: CSSProperties;
+    style?: React.CSSProperties;
 }
-export declare type AdaptableInternalIconName = string;
-export {};
+export declare type AdaptableInternalIconName = 'add' | 'add-row' | 'alert' | 'align-justify' | 'analysis' | 'application' | 'arrow-down' | 'arrow-left' | 'arrow-right' | 'arrow-up' | 'arrowexpand' | 'attach-file' | 'blanks' | 'boolean-list' | 'broadcast' | 'build' | 'bulk-update' | 'calculated-column' | 'calendar' | 'call' | 'campaign' | 'cell-summary' | 'cell-validation' | 'chart' | 'chat' | 'check' | 'check-box' | 'check-box-outline' | 'check-circle' | 'checked' | 'clear' | 'clone' | 'close' | 'cloud-upload' | 'collapse' | 'column-add' | 'column-chooser' | 'column-filter' | 'column-info' | '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/AdaptablePredicate.js

@@ -266,7 +266,7 @@ exports.SystemPredicateDefs = [
     {
         id: 'StartsWith',
         label: 'Starts With',
-        icon: { name: 'format-letter-starts-with' },
+        icon: { name: 'starts-with' },
         columnScope: { DataTypes: ['String'] },
         moduleScope: ['filter', 'alert', 'flashingcell', 'conditionalstyle'],
         inputs: [{ type: 'text' }],
@@ -284,7 +284,7 @@ exports.SystemPredicateDefs = [
     {
         id: 'EndsWith',
         label: 'Ends With',
-        icon: { name: 'format-letter-ends-with' },
+        icon: { name: 'ends-with' },
         columnScope: { DataTypes: ['String'] },
         moduleScope: ['filter', 'alert', 'flashingcell', 'conditionalstyle'],
         inputs: [{ type: 'text' }],

package/src/PredefinedConfig/Selection/GridCellRange.d.ts

@@ -1,7 +1,26 @@
+/**
+ * Defines a range of Cell - used in Grid Api Selection methods
+ * Typically use either PrimaryKey Values or Row Indexes
+ */
 export interface GridCellRange {
+    /**
+     * Columns to select
+     */
     columnIds: string[];
+    /**
+     * Primary Key value of row at start of range
+     */
     primaryKeyValueStart?: any;
+    /**
+     * Primary Key value of row at end of range
+     */
     primaryKeyValueEnd?: any;
+    /**
+     * Index of row at start of range
+     */
     rowIndexStart?: any;
+    /**
+     * Index of row at end of range
+     */
     rowIndexEnd?: any;
 }

package/src/PredefinedConfig/StatusBarState.d.ts

@@ -5,7 +5,7 @@ import { AdaptableStatusBarPanel } from './Common/Types';
  */
 export interface StatusBarState extends ConfigState {
     /**
-     * Adaptable Status Bars to display - up to 3 can be shown
+     * Adaptable Status Bars to display - can be unlimited and displayed in 3 locations
      * @defaultValue null
      */
     StatusBars?: AdaptableStatusBar[];

package/src/Redux/Store/AdaptableStore.js

@@ -729,7 +729,7 @@ const adaptableMiddleware = (adaptable) => function (middlewareAPI) {
                 case SystemRedux.SYSTEM_DATA_SET_SELECT: {
                     let returnAction = next(action);
                     const dataSet = adaptable.api.dataSetApi.getCurrentDataSet();
-                    adaptable.api.dataSetApi.fireDataSetChangeEvent(dataSet);
+                    adaptable.api.dataSetApi.fireDataSetSelectedEvent(dataSet);
                     requestAnimationFrame(() => {
                         if (dataSet.form) {
                             middlewareAPI.dispatch(PopupRedux_1.PopupShowForm({

package/src/Strategy/AdaptableModuleBase.d.ts

@@ -11,6 +11,7 @@ import { AdaptableApi } from '../Api/AdaptableApi';
 import { AccessLevel } from '../PredefinedConfig/Common/Entitlement';
 import { CalculatedColumn } from '../PredefinedConfig/CalculatedColumnState';
 import { FreeTextColumn } from '../PredefinedConfig/FreeTextColumnState';
+import { AdaptableInternalIconName } from '../PredefinedConfig/Common/AdaptableIcon';
 /**
  * Base class for all strategies and does most of the work of creating menus
  */
@@ -18,7 +19,7 @@ export declare abstract class AdaptableModuleBase implements IModule {
     protected api: AdaptableApi;
     moduleInfo: ModuleInfo;
     AccessLevel: AccessLevel;
-    constructor(module: AdaptableModule, friendlyName: string, glyph: string, popup: string, description: string, api: AdaptableApi);
+    constructor(module: AdaptableModule, friendlyName: string, glyph: AdaptableInternalIconName, popup: string, description: string, api: AdaptableApi);
     protected getViewAccessLevel(): AccessLevel;
     protected getEditAccessLevel(): AccessLevel;
     isModuleAvailable(): boolean;
@@ -37,12 +38,12 @@ export declare abstract class AdaptableModuleBase implements IModule {
     createMainMenuItemShowPopup({ Label, ComponentName, Icon, PopupParams, }: {
         Label: string;
         ComponentName: string;
-        Icon: string;
+        Icon: AdaptableInternalIconName;
         PopupParams?: ModuleParams;
     }): MenuItemShowPopup;
-    createColumnMenuItemClickFunction(Label: string, Icon: string, ClickFunction: () => void): MenuItemDoClickFunction;
-    createColumnMenuItemReduxAction(Label: string, Icon: string, Action: Action): MenuItemDoReduxAction;
-    createColumnMenuItemShowPopup(Label: string, ComponentName: string, Icon: string, PopupParams?: ModuleParams): MenuItemShowPopup;
+    createColumnMenuItemClickFunction(Label: string, Icon: AdaptableInternalIconName, ClickFunction: () => void): MenuItemDoClickFunction;
+    createColumnMenuItemReduxAction(Label: string, Icon: AdaptableInternalIconName, Action: Action): MenuItemDoReduxAction;
+    createColumnMenuItemShowPopup(Label: string, ComponentName: string, Icon: AdaptableInternalIconName, PopupParams?: ModuleParams): MenuItemShowPopup;
     canCreateColumnMenuItem(column: AdaptableColumn, minimumAccessLevel: AccessLevel, functionType?: 'sort' | 'editable' | 'style' | 'filter' | 'quickfilter' | 'numeric'): boolean;
     getTeamSharingAction(): TeamSharingImportInfo<AdaptableObject> | undefined;
     getModuleNamedQueryReferences(): string[];

package/src/Strategy/AlertModule.d.ts

@@ -4,7 +4,7 @@ import { AdaptableAlert } from '../PredefinedConfig/Common/AdaptableAlert';
 import { AdaptableMenuItem, ContextMenuContext } from '../PredefinedConfig/Common/Menu';
 import { TeamSharingImportInfo } from '../PredefinedConfig/TeamSharingState';
 import { AdaptableModuleBase } from './AdaptableModuleBase';
-import { AdaptableModuleView, AdaptableObjectView, IModule } from './Interface/IModule';
+import { AdaptableModuleView, AdaptableObjectCompactView, AdaptableObjectView, IModule } from './Interface/IModule';
 import { AdaptableObject } from '../PredefinedConfig/Common/AdaptableObject';
 export declare class AlertModule extends AdaptableModuleBase implements IModule {
     constructor(api: AdaptableApi);
@@ -25,13 +25,7 @@ export declare class AlertModule extends AdaptableModuleBase implements IModule
     private isAlertPredicateTriggered;
     private isAlertDefinitionForRowChangeEvent;
     getTeamSharingAction(): TeamSharingImportInfo<AlertDefinition>;
-    toViewCompact(alert: AdaptableAlert): {
-        item: {
-            name: string;
-            values: string[];
-        };
-        abObject: AdaptableAlert;
-    };
+    toViewCompact(alert: AdaptableAlert): AdaptableObjectCompactView;
     toView(alert: AlertDefinition): AdaptableObjectView;
     toViewAll(): AdaptableObjectView[];
     getViewProperties(): AdaptableModuleView;

package/src/Strategy/AlertModule.js

@@ -17,6 +17,7 @@ const getAlertBehaviourViewItems_1 = require("./Utilities/getAlertBehaviourViewI
 const AlertEmptyView_1 = require("../View/Alert/AlertEmptyView");
 const AlertStatusSubPanel_1 = require("../View/Alert/AlertStatusSubPanel");
 const getObjectTagsViewItems_1 = require("./Utilities/getObjectTagsViewItems");
+const ActiveAlertsPanelItemLabel_1 = require("../View/Alert/ActiveAlertsPanelItemLabel");
 class AlertModule extends AdaptableModuleBase_1.AdaptableModuleBase {
     constructor(api) {
         super(ModuleConstants.AlertModuleId, 'Alert', 'alert', 'AlertPopup', 'Get notified when things happen in Adaptable that you need to know about', api);
@@ -249,6 +250,7 @@ class AlertModule extends AdaptableModuleBase_1.AdaptableModuleBase {
         return {
             item: {
                 name: alert.header,
+                label: ActiveAlertsPanelItemLabel_1.ActiveAlertsPanelItemLabel,
                 values: [alert.message],
             },
             abObject: alert,
@@ -285,6 +287,7 @@ class AlertModule extends AdaptableModuleBase_1.AdaptableModuleBase {
             getEditWizard: () => AlertWizard_1.AlertWizard,
             getStatusBarPanelProps: () => {
                 return {
+                    popoverMinWidth: 360,
                     view: AlertStatusSubPanel_1.AlertStatusPanel,
                 };
             },

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

@@ -9,13 +9,13 @@ import { CalculatedColumn } from '../../PredefinedConfig/CalculatedColumnState';
 import { FreeTextColumn } from '../../PredefinedConfig/FreeTextColumnState';
 import { AdaptableOnePageWizardProps } from '../../View/Wizard/Interface/IAdaptableWizard';
 import * as Redux from 'redux';
-import { SuspendableObject } from '../../../types';
+import { AdaptableInternalIconName, SuspendableObject } from '../../../types';
 import { StatusBarPanelProps } from '../../View/StatusBar/StatusBarPanel';
 import { StrictExtract } from '../../Utilities/Extensions/TypeExtensions';
 export interface ModuleInfo {
     ModuleName: AdaptableModule;
     FriendlyName: string;
-    Glyph: string;
+    Glyph: AdaptableInternalIconName;
     Popup: string;
     Description: string;
     HelpPage: string;
@@ -34,7 +34,9 @@ export interface AdaptableObjectItemView {
     /**
      * Custom name for the property name
      */
-    label?: string;
+    label?: string | React.FunctionComponent<{
+        data: AdaptableObject | SuspendableObject;
+    }>;
     /**
      * How the item is rendered.
      * Defaults to tags.

package/src/Utilities/MenuItem.d.ts

@@ -2,9 +2,9 @@ import * as Redux from 'redux';
 import { ModuleParams } from '../View/Components/SharedProps/ModuleViewPopupProps';
 import { AdaptableMenuItem } from '../PredefinedConfig/Common/Menu';
 import { AdaptableModule } from '../PredefinedConfig/Common/Types';
-import { AdaptableIcon } from '../PredefinedConfig/Common/AdaptableIcon';
+import { AdaptableIcon, AdaptableInternalIconName } from '../PredefinedConfig/Common/AdaptableIcon';
 export declare class MenuItemDoReduxAction implements AdaptableMenuItem {
-    constructor(label: string, module: AdaptableModule, reduxAction: Redux.Action, icon: string, isVisible: boolean);
+    constructor(label: string, module: AdaptableModule, reduxAction: Redux.Action, icon: AdaptableInternalIconName, isVisible: boolean);
     reduxAction: Redux.Action;
     label: string;
     module: AdaptableModule;
@@ -12,7 +12,7 @@ export declare class MenuItemDoReduxAction implements AdaptableMenuItem {
     icon: AdaptableIcon;
 }
 export declare class MenuItemDoClickFunction implements AdaptableMenuItem {
-    constructor(label: string, module: AdaptableModule, clickFunction: () => void, icon: string, isVisible: boolean);
+    constructor(label: string, module: AdaptableModule, clickFunction: () => void, icon: AdaptableInternalIconName, isVisible: boolean);
     onClick: () => void;
     label: string;
     module: AdaptableModule;
@@ -20,7 +20,7 @@ export declare class MenuItemDoClickFunction implements AdaptableMenuItem {
     icon: AdaptableIcon;
 }
 export declare class MenuItemShowPopup implements AdaptableMenuItem {
-    constructor(label: string, module: AdaptableModule, componentName: string, icon: string, isVisible: boolean, popupParams?: ModuleParams);
+    constructor(label: string, module: AdaptableModule, componentName: string, icon: AdaptableInternalIconName, isVisible: boolean, popupParams?: ModuleParams);
     reduxAction: Redux.Action;
     label: string;
     module: AdaptableModule;

package/src/View/Alert/ActiveAlertsPanelItemLabel.d.ts

@@ -0,0 +1,5 @@
+import * as React from 'react';
+import { AdaptableAlert } from '../../../types';
+export declare const ActiveAlertsPanelItemLabel: React.FunctionComponent<{
+    data: AdaptableAlert;
+}>;

package/src/View/Alert/ActiveAlertsPanelItemLabel.js

@@ -0,0 +1,22 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ActiveAlertsPanelItemLabel = void 0;
+const tslib_1 = require("tslib");
+const React = tslib_1.__importStar(require("react"));
+const rebass_1 = require("rebass");
+const icons_1 = tslib_1.__importDefault(require("../../components/icons"));
+const UIHelper_1 = tslib_1.__importDefault(require("../UIHelper"));
+const ActiveAlertsPanelItemLabel = (props) => {
+    const iconColor = UIHelper_1.default.getColorByMessageType(props.data.alertDefinition.MessageType);
+    const iconStyle = {
+        color: iconColor,
+        fill: iconColor,
+    };
+    const iconName = UIHelper_1.default.getGlyphByMessageType(props.data.alertDefinition.MessageType);
+    const IconCmp = icons_1.default[iconName];
+    const icon = IconCmp ? React.createElement(IconCmp, null) : null;
+    return (React.createElement(rebass_1.Box, null,
+        React.createElement(rebass_1.Text, { style: Object.assign({ float: 'left' }, iconStyle) }, icon),
+        props.data.header));
+};
+exports.ActiveAlertsPanelItemLabel = ActiveAlertsPanelItemLabel;

package/src/View/CalculatedColumn/Wizard/CalculatedColumnSettingsWizardSection.js

@@ -113,8 +113,8 @@ const CalculatedColumnSettingsWizardSection = (props) => {
                             React.createElement(Input_1.default, { "data-name": "column-width", type: "number", width: 300, value: Width || '', onChange: (e) => handleSpecialColumnSettingsChange({
                                     Width: Number(e.target.value),
                                 }) })),
-                        React.createElement(FormLayout_1.FormRow, { label: "Header ToolTip" },
-                            React.createElement(Input_1.default, { "data-name": "column-width", type: "text", width: 300, value: HeaderToolTip, onChange: (e) => handleSpecialColumnSettingsChange({
+                        React.createElement(FormLayout_1.FormRow, { label: "Header Tooltip" },
+                            React.createElement(Input_1.default, { "data-name": "header-tooltip", type: "text", width: 300, value: HeaderToolTip, onChange: (e) => handleSpecialColumnSettingsChange({
                                     HeaderToolTip: e.target.value,
                                 }) })),
                         ' ',

package/src/View/ColorPicker.d.ts

@@ -11,4 +11,4 @@ export declare const ColorPicker: React.ForwardRefExoticComponent<Pick<Omit<Reac
     api: AdaptableApi;
     onChange: (color: string) => void;
     value: string;
-} & Omit<BoxProps, "onChange">, "max" | "required" | "default" | "high" | "low" | "start" | "open" | "media" | "hidden" | "cite" | "data" | "dir" | "form" | "label" | "p" | "slot" | "span" | "style" | "summary" | "title" | "pattern" | "async" | "defer" | "manifest" | "disabled" | "m" | "color" | "content" | "size" | "flex" | "wrap" | "padding" | "multiple" | "alignSelf" | "backgroundColor" | "fontSize" | "height" | "marginBottom" | "marginLeft" | "marginRight" | "marginTop" | "opacity" | "order" | "paddingBottom" | "paddingLeft" | "paddingRight" | "paddingTop" | "translate" | "width" | "margin" | "children" | "key" | "list" | "step" | "type" | "min" | "contextMenu" | "api" | "value" | "onKeyDown" | "rows" | "name" | "className" | "id" | "lang" | "method" | "target" | "role" | "tabIndex" | "crossOrigin" | "href" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "classID" | "useMap" | "wmode" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "contentEditable" | "draggable" | "placeholder" | "spellCheck" | "radioGroup" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "as" | "hrefLang" | "integrity" | "rel" | "sizes" | "charSet" | "kind" | "src" | "srcLang" | "download" | "alt" | "coords" | "shape" | "autoPlay" | "controls" | "loop" | "mediaGroup" | "muted" | "playsInline" | "preload" | "autoFocus" | "formAction" | "formEncType" | "formMethod" | "formNoValidate" | "formTarget" | "dateTime" | "acceptCharset" | "action" | "autoComplete" | "encType" | "noValidate" | "allowFullScreen" | "allowTransparency" | "frameBorder" | "marginHeight" | "marginWidth" | "sandbox" | "scrolling" | "seamless" | "srcDoc" | "srcSet" | "accept" | "capture" | "checked" | "maxLength" | "minLength" | "readOnly" | "htmlFor" | "httpEquiv" | "optimum" | "reversed" | "selected" | "nonce" | "scoped" | "cellPadding" | "cellSpacing" | "colSpan" | "headers" | "rowSpan" | "scope" | "cols" | "poster" | "challenge" | "keyType" | "keyParams" | "mt" | "mb" | "ml" | "mr" | "my" | "marginY" | "mx" | "marginX" | "pt" | "pr" | "pb" | "pl" | "px" | "paddingX" | "py" | "paddingY" | "css" | "bg"> & React.RefAttributes<unknown>>;
+} & Omit<BoxProps, "onChange">, "max" | "required" | "default" | "high" | "low" | "start" | "open" | "media" | "hidden" | "cite" | "data" | "dir" | "form" | "label" | "p" | "slot" | "span" | "style" | "summary" | "title" | "pattern" | "async" | "defer" | "manifest" | "disabled" | "m" | "color" | "content" | "size" | "flex" | "wrap" | "padding" | "multiple" | "alignSelf" | "backgroundColor" | "fontSize" | "height" | "marginBottom" | "marginLeft" | "marginRight" | "marginTop" | "opacity" | "order" | "paddingBottom" | "paddingLeft" | "paddingRight" | "paddingTop" | "translate" | "width" | "margin" | "children" | "key" | "list" | "step" | "type" | "min" | "contextMenu" | "api" | "value" | "onKeyDown" | "rows" | "name" | "checked" | "className" | "id" | "lang" | "method" | "target" | "role" | "tabIndex" | "crossOrigin" | "href" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "classID" | "useMap" | "wmode" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "contentEditable" | "draggable" | "placeholder" | "spellCheck" | "radioGroup" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "as" | "hrefLang" | "integrity" | "rel" | "sizes" | "charSet" | "kind" | "src" | "srcLang" | "download" | "alt" | "coords" | "shape" | "autoPlay" | "controls" | "loop" | "mediaGroup" | "muted" | "playsInline" | "preload" | "autoFocus" | "formAction" | "formEncType" | "formMethod" | "formNoValidate" | "formTarget" | "dateTime" | "acceptCharset" | "action" | "autoComplete" | "encType" | "noValidate" | "allowFullScreen" | "allowTransparency" | "frameBorder" | "marginHeight" | "marginWidth" | "sandbox" | "scrolling" | "seamless" | "srcDoc" | "srcSet" | "accept" | "capture" | "maxLength" | "minLength" | "readOnly" | "htmlFor" | "httpEquiv" | "optimum" | "reversed" | "selected" | "nonce" | "scoped" | "cellPadding" | "cellSpacing" | "colSpan" | "headers" | "rowSpan" | "scope" | "cols" | "poster" | "challenge" | "keyType" | "keyParams" | "mt" | "mb" | "ml" | "mr" | "my" | "marginY" | "mx" | "marginX" | "pt" | "pr" | "pb" | "pl" | "px" | "paddingX" | "py" | "paddingY" | "css" | "bg"> & React.RefAttributes<unknown>>;