@adaptabletools/adaptable 12.0.0 → 12.0.1-canary.0

package/src/View/Components/Panels/PanelWithImage.d.ts

@@ -1,9 +1,10 @@
 import * as React from 'react';
 import { PanelProps } from '../../../components/Panel';
 import { BoxProps } from 'rebass';
+import { AdaptableInternalIconName } from '../../../PredefinedConfig/Common/AdaptableIcon';
 export interface PanelWithImageProps extends PanelProps {
-    glyphicon?: string;
-    icon?: string;
+    glyphicon?: AdaptableInternalIconName;
+    icon?: AdaptableInternalIconName;
     infoLink?: string;
     infoLinkDisabled?: boolean;
     borderRadius?: string;

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

@@ -148,19 +148,11 @@ const AdaptableToolPanelComponent = (props) => {
         return props.api.toolPanelApi.getCustomToolPanelButtons().map((button) => {
             // TODO: variants of this mapping are present in several places (just search for api.internalApi.getStyleForButton() usages)
             // with the next opportunity we should abstract it
-            // the default size of AdapTable SVG ModuleButtons
-            const defaultIconProps = {
-                style: {
-                    height: 'var(--ab-cmp-simple-button__height)',
-                    width: 'var(--ab-cmp-simple-button__width)',
-                },
-            };
             const toolPanelContext = {
                 adaptableApi: props.api,
                 toolPanelState: props.api.toolPanelApi.getToolPanelState(),
             };
             const buttonIcon = props.api.internalApi.getIconForButton(button, toolPanelContext);
-            const iconProps = buttonIcon && Object.assign({}, defaultIconProps, buttonIcon);
             let buttonStyle = props.api.internalApi.getStyleForButton(button, toolPanelContext);
             let buttonLabel = props.api.internalApi.getLabelForButton(button, toolPanelContext);
             let buttonTooltip = props.api.internalApi.getTooltipForButton(button, toolPanelContext);
@@ -171,9 +163,7 @@ const AdaptableToolPanelComponent = (props) => {
             const buttonVariant = buttonStyle && buttonStyle.variant ? buttonStyle.variant : 'text';
             const buttonTone = buttonStyle && buttonStyle.tone ? buttonStyle.tone : 'none';
             const uniqueKey = buttonLabel !== null && buttonLabel !== void 0 ? buttonLabel : uuid_1.createUuid();
-            return (React.createElement(SimpleButton_1.default, { key: uniqueKey, variant: buttonVariant, tone: buttonTone, className: `ab-ToolPanel__Home__${kebabCase_1.default(buttonLabel)} ${(buttonStyle === null || buttonStyle === void 0 ? void 0 : buttonStyle.className) || ''}`, tooltip: buttonTooltip, disabled: disabled, onClick: () => button.onClick(button, toolPanelContext), accessLevel: 'Full' },
-                buttonIcon ? React.createElement("img", Object.assign({}, iconProps)) : null,
-                buttonLabel));
+            return (React.createElement(SimpleButton_1.default, { key: uniqueKey, variant: buttonVariant, tone: buttonTone, className: `ab-ToolPanel__Home__${kebabCase_1.default(buttonLabel)} ${(buttonStyle === null || buttonStyle === void 0 ? void 0 : buttonStyle.className) || ''}`, tooltip: buttonTooltip, icon: buttonIcon, disabled: disabled, onClick: () => button.onClick(button, toolPanelContext), accessLevel: 'Full' }, buttonLabel));
         });
     };
     const onSetColumnVisibility = (name) => {

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

@@ -44,20 +44,12 @@ const CustomToolPanelContent = (props) => {
         ((_a = customToolPanel.buttons) === null || _a === void 0 ? void 0 : _a.length) && (React.createElement("div", { id: buttonsDivId, className: `ab-ToolPanel__custom-content__buttons ${buttonsDivId}` }, customToolPanel.buttons.map((button) => {
             // TODO: variants of this mapping are present in several places (just search for api.internalApi.getStyleForButton() usages)
             // with the next opportunity we should abstract it
-            // the default size of AdapTable SVG ModuleButtons
-            const defaultIconProps = {
-                style: {
-                    height: 'var(--ab-cmp-simple-button__height)',
-                    width: 'var(--ab-cmp-simple-button__width)',
-                },
-            };
             const toolPanelContext = {
                 adaptableApi: api,
                 toolPanelState: api.toolPanelApi.getToolPanelState(),
                 customToolPanel: customToolPanel,
             };
             const buttonIcon = api.internalApi.getIconForButton(button, toolPanelContext);
-            const iconProps = buttonIcon && Object.assign({}, defaultIconProps, buttonIcon);
             let buttonStyle = api.internalApi.getStyleForButton(button, toolPanelContext);
             let buttonLabel = api.internalApi.getLabelForButton(button, toolPanelContext);
             let buttonTooltip = api.internalApi.getTooltipForButton(button, toolPanelContext);
@@ -68,9 +60,7 @@ const CustomToolPanelContent = (props) => {
             const buttonVariant = buttonStyle && buttonStyle.variant ? buttonStyle.variant : 'text';
             const buttonTone = buttonStyle && buttonStyle.tone ? buttonStyle.tone : 'none';
             const uniqueKey = buttonLabel !== null && buttonLabel !== void 0 ? buttonLabel : uuid_1.createUuid();
-            return (React.createElement(SimpleButton_1.default, { key: uniqueKey, variant: buttonVariant, tone: buttonTone, className: `ab-ToolPanel__Home__${kebabCase_1.default(buttonLabel)} ${(buttonStyle === null || buttonStyle === void 0 ? void 0 : buttonStyle.className) || ''}`, tooltip: buttonTooltip, disabled: disabled, onClick: () => button.onClick(button, toolPanelContext), accessLevel: 'Full' },
-                buttonIcon ? React.createElement("img", Object.assign({}, iconProps)) : null,
-                buttonLabel));
+            return (React.createElement(SimpleButton_1.default, { key: uniqueKey, variant: buttonVariant, tone: buttonTone, className: `ab-ToolPanel__Home__${kebabCase_1.default(buttonLabel)} ${(buttonStyle === null || buttonStyle === void 0 ? void 0 : buttonStyle.className) || ''}`, tooltip: buttonTooltip, icon: buttonIcon, disabled: disabled, onClick: () => button.onClick(button, toolPanelContext), accessLevel: 'Full' }, buttonLabel));
         })))));
 };
 exports.CustomToolPanelContent = CustomToolPanelContent;

package/src/View/Dashboard/CustomDashboardButton.js

@@ -15,18 +15,7 @@ const CustomDashboardButton = (props) => {
         adaptableApi: props.api,
         dashboardState: props.api.dashboardApi.getDashboardState(),
     };
-    const defaultIconProps = {
-        style: {
-            height: 'var(--ab-cmp-simple-button__height)',
-            width: 'var(--ab-cmp-simple-button__width)',
-        },
-    };
     const buttonIcon = props.api.internalApi.getIconForButton(button, dashboardContext);
-    const iconProps = buttonIcon && Object.assign({}, defaultIconProps, buttonIcon);
-    //    const iconProps: any = button.icon ? { ...button.icon } : null;
-    //    if (iconProps) {
-    //      delete iconProps.Uuid;
-    //    }
     let buttonStyle = props.api.internalApi.getStyleForButton(button, dashboardContext);
     let buttonLabel = props.api.internalApi.getLabelForButton(button, dashboardContext);
     let buttonTooltip = props.api.internalApi.getTooltipForButton(button, dashboardContext);
@@ -34,15 +23,13 @@ const CustomDashboardButton = (props) => {
         return null;
     }
     const disabled = button.disabled && button.disabled(button, dashboardContext);
-    return (React.createElement(SimpleButton_1.default, { key: buttonLabel, variant: buttonStyle && buttonStyle.variant ? buttonStyle.variant : 'text', tone: buttonStyle && buttonStyle.tone ? buttonStyle.tone : 'none', className: `ab-DashboardToolbar__Home__${kebabCase_1.default(buttonLabel)} ${(buttonStyle === null || buttonStyle === void 0 ? void 0 : buttonStyle.className) || ''}`, tooltip: buttonTooltip, disabled: disabled || props.accessLevel == 'ReadOnly', onClick: () => {
+    return (React.createElement(SimpleButton_1.default, { key: buttonLabel, variant: buttonStyle && buttonStyle.variant ? buttonStyle.variant : 'text', tone: buttonStyle && buttonStyle.tone ? buttonStyle.tone : 'none', className: `ab-DashboardToolbar__Home__${kebabCase_1.default(buttonLabel)} ${(buttonStyle === null || buttonStyle === void 0 ? void 0 : buttonStyle.className) || ''}`, tooltip: buttonTooltip, icon: buttonIcon, disabled: disabled || props.accessLevel == 'ReadOnly', onClick: () => {
             var _a;
             (_a = button.onClick) === null || _a === void 0 ? void 0 : _a.call(button, button, dashboardContext);
             setTimeout(() => {
                 // mutate state to force a re-rendering
                 setComponentRevision(componentRevision + 1);
             }, 16);
-        }, accessLevel: 'Full' },
-        buttonIcon ? React.createElement("img", Object.assign({}, iconProps)) : null,
-        buttonLabel));
+        }, accessLevel: 'Full' }, buttonLabel));
 };
 exports.CustomDashboardButton = CustomDashboardButton;

package/src/View/Dashboard/CustomToolbarWrapper.js

@@ -69,14 +69,7 @@ const CustomToolbarWrapper = (props) => {
                     adaptableApi: api,
                     dashboardState: api.dashboardApi.getDashboardState(),
                 };
-                const defaultIconProps = {
-                    style: {
-                        height: 'var(--ab-cmp-simple-button__height)',
-                        width: 'var(--ab-cmp-simple-button__width)',
-                    },
-                };
                 const buttonIcon = api.internalApi.getIconForButton(button, dashboardContext);
-                const iconProps = buttonIcon && Object.assign({}, defaultIconProps, buttonIcon);
                 let buttonStyle = api.internalApi.getStyleForButton(button, dashboardContext);
                 let buttonLabel = api.internalApi.getLabelForButton(button, dashboardContext);
                 let buttonTooltip = api.internalApi.getTooltipForButton(button, dashboardContext);
@@ -86,15 +79,13 @@ const CustomToolbarWrapper = (props) => {
                 const disabled = button.disabled && button.disabled(button, dashboardContext);
                 let buttonVariant = buttonStyle && buttonStyle.variant ? buttonStyle.variant : 'outlined';
                 let buttonTone = buttonStyle && buttonStyle.tone ? buttonStyle.tone : 'neutral';
-                return (React.createElement(SimpleButton_1.default, { style: { marginLeft: index ? 'var(--ab-space-1)' : 0 }, key: index, disabled: disabled, tooltip: buttonTooltip, variant: buttonVariant, tone: buttonTone, onClick: () => {
+                return (React.createElement(SimpleButton_1.default, { style: { marginLeft: index ? 'var(--ab-space-1)' : 0 }, key: index, disabled: disabled, tooltip: buttonTooltip, icon: buttonIcon, variant: buttonVariant, tone: buttonTone, onClick: () => {
                         button.onClick ? button.onClick(button, dashboardContext) : null;
                         setTimeout(() => {
                             // mutate state to force a re-rendering
                             setComponentRevision(componentRevision + 1);
                         }, 16);
-                    } },
-                    buttonIcon ? React.createElement("img", Object.assign({}, iconProps)) : null,
-                    buttonLabel));
+                    } }, buttonLabel));
             }))));
 };
 exports.CustomToolbarWrapper = CustomToolbarWrapper;

package/src/View/FreeTextColumn/Wizard/FreeTextColumnSettingsWizardSection.js

@@ -60,6 +60,7 @@ const isValidFreeTextColumn = (data, api) => {
 };
 exports.isValidFreeTextColumn = isValidFreeTextColumn;
 const FreeTextColumnSettingsWizardSection = (props) => {
+    var _a;
     const { data, api } = OnePageAdaptableWizard_1.useOnePageAdaptableWizardContext();
     const Pattern = api.internalApi.getAdaptableOptions().userInterfaceOptions.dateInputOptions.dateFormat;
     const [ColumnNameFocused, setColumnNameFocused] = react_1.useState(false);
@@ -128,6 +129,11 @@ const FreeTextColumnSettingsWizardSection = (props) => {
                 } })) : (React.createElement(AdaptableInput_1.default, { value: data.DataType === 'Date' && data.DefaultValue
                     ? DateHelper_1.parseToISO(data.DefaultValue, Pattern) || ''
                     : data.DefaultValue || '', style: { width: '100%', maxWidth: 500 }, type: data.DataType === 'Number' ? 'number' : data.DataType === 'Date' ? 'date' : 'text', placeholder: "Default Column Value (not required)", onChange: (e) => handleDefaultValueChange(e) }))),
+            React.createElement(FormLayout_1.FormRow, { label: "Header Tooltip" },
+                React.createElement(Input_1.default, { "data-name": "header-tooltip", type: "text", style: { width: '100%', maxWidth: 500 }, value: ((_a = data.FreeTextColumnSettings) === null || _a === void 0 ? void 0 : _a.HeaderToolTip) || '', onChange: (e) => handleSpecialColumnSettingsChange({
+                        HeaderToolTip: e.target.value,
+                    }) })),
+            ' ',
             data.DataType == 'String' && (React.createElement(FormLayout_1.FormRow, { label: "Editor Type" },
                 React.createElement(Radio_1.default, { value: "Inline", checked: data.TextEditor == 'Inline', onChange: (_, e) => onDynamicSelectChanged(e), marginRight: 2 }, "Inline Editor"),
                 React.createElement(Radio_1.default, { value: "Large", checked: data.TextEditor == 'Large', onChange: (_, e) => onDynamicSelectChanged(e) }, "Large Editor")))),

package/src/View/GridInfo/GridInfoPopup.js

@@ -102,7 +102,7 @@ const GridInfoPopup = (props) => {
         return React.createElement(AdaptableObjectRow_1.AdaptableObjectRow, { key: index, colItems: x });
     });
     const showRadioButtons = [showGridSummary, showAdaptableOptions, showColumnInfo, showAdaptableObjects].filter((item) => item).length > 1;
-    return (React.createElement(PopupPanel_1.PopupPanel, { headerText: 'Grid Info', glyphicon: 'info-sign' },
+    return (React.createElement(PopupPanel_1.PopupPanel, { headerText: 'Grid Info', glyphicon: 'info' },
         React.createElement(rebass_1.Flex, { marginBottom: 2, padding: 3 }, showRadioButtons && (React.createElement(React.Fragment, null,
             showGridSummary && (React.createElement(Radio_1.default, { "data-name": "radioButton-GridSummary", marginRight: 3, value: "GridSummary", checked: state.ActiveTab == 'GridSummary', onChange: (_, e) => onShowGridSummaryChanged('GridSummary') }, "Summary")),
             showAdaptableOptions && (React.createElement(Radio_1.default, { "data-name": "radioButton-AdaptableOptions", marginRight: 3, value: "AdaptableOptions", checked: state.ActiveTab == 'AdaptableOptions', onChange: (_, e) => onShowGridSummaryChanged('AdaptableOptions') }, "Options")),

package/src/View/UIHelper.d.ts

@@ -3,7 +3,7 @@ import { EditableConfigEntityState } from './Components/SharedProps/EditableConf
 import { StatusColour } from '../PredefinedConfig/Common/Enums';
 import { AdaptableStyle } from '../PredefinedConfig/Common/AdaptableStyle';
 import { Schedule, Weekday } from '../PredefinedConfig/Common/Schedule';
-import { AdaptableColumnDataType, AdaptableOptions } from '../types';
+import { AdaptableColumnDataType, AdaptableInternalIconName, AdaptableOptions } from '../types';
 import { AdaptableAlert } from '../PredefinedConfig/Common/AdaptableAlert';
 import { AdaptableMessageType } from '../PredefinedConfig/Common/AdaptableMessageType';
 export declare const BLACK: string;
@@ -36,7 +36,7 @@ export declare function IsEmptyStyle(style: AdaptableStyle): boolean;
 export declare function IsNotEmptyStyle(style: AdaptableStyle): boolean;
 export declare function getMessageTypeByStatusColour(statusColour: StatusColour): AdaptableMessageType;
 export declare function getButtonToneByMessageType(messageType: AdaptableMessageType): 'success' | 'error' | 'neutral' | 'none' | 'warning' | 'info' | 'accent';
-export declare function getGlyphByMessageType(messageType: AdaptableMessageType): string;
+export declare function getGlyphByMessageType(messageType: AdaptableMessageType): AdaptableInternalIconName;
 export declare function getColorByMessageType(messageType: AdaptableMessageType): string;
 export declare function getStyleForStatusColour(statusColour: StatusColour): CSSProperties;
 export declare function getStyleForMessageType(messageType: AdaptableMessageType): CSSProperties;

package/src/agGrid/ActionColumnRenderer.js

@@ -45,14 +45,10 @@ class ActionColumnRenderer {
                     if (button.hidden && button.hidden(button, context)) {
                         return;
                     }
-                    const defaultIconProps = {
-                        style: {
-                            height: 15,
-                            width: 15,
-                        },
-                    };
-                    const buttonIcon = adaptableApi.internalApi.getIconForButton(button, context);
-                    const iconProps = buttonIcon && Object.assign({}, defaultIconProps, buttonIcon);
+                    const buttonIcon = adaptableApi.internalApi.getIconForButton(button, context, {
+                        height: 15,
+                        width: 15,
+                    });
                     const buttonStyle = adaptableApi.internalApi.getStyleForButton(button, context);
                     const buttonLabel = adaptableApi.internalApi.getLabelForButton(button, context);
                     const buttonTooltip = adaptableApi.internalApi.getTooltipForButton(button, context);
@@ -66,9 +62,7 @@ class ActionColumnRenderer {
                         }, 16);
                     };
                     const disabled = button.disabled && button.disabled(button, context);
-                    return (React.createElement(SimpleButton_1.default, { key: button.Uuid, "data-name": `action-button-${index + 1}`, variant: (_a = buttonStyle === null || buttonStyle === void 0 ? void 0 : buttonStyle.variant) !== null && _a !== void 0 ? _a : 'text', disabled: disabled, tooltip: buttonTooltip, tone: (_b = buttonStyle === null || buttonStyle === void 0 ? void 0 : buttonStyle.tone) !== null && _b !== void 0 ? _b : 'none', onClick: handleClick, className: buttonStyle === null || buttonStyle === void 0 ? void 0 : buttonStyle.className, accessLevel: 'Full' },
-                        buttonIcon ? React.createElement("img", Object.assign({}, iconProps)) : null,
-                        buttonLabel));
+                    return (React.createElement(SimpleButton_1.default, { key: button.Uuid, "data-name": `action-button-${index + 1}`, variant: (_a = buttonStyle === null || buttonStyle === void 0 ? void 0 : buttonStyle.variant) !== null && _a !== void 0 ? _a : 'text', disabled: disabled, tooltip: buttonTooltip, icon: buttonIcon, tone: (_b = buttonStyle === null || buttonStyle === void 0 ? void 0 : buttonStyle.tone) !== null && _b !== void 0 ? _b : 'none', onClick: handleClick, className: buttonStyle === null || buttonStyle === void 0 ? void 0 : buttonStyle.className, accessLevel: 'Full' }, buttonLabel));
                 })));
             };
             const eGui = this.eGui;

package/src/agGrid/Adaptable.d.ts

@@ -1,4 +1,4 @@
-import { ColDef, ColGroupDef, Column, ExcelStyle, GridOptions, Module, RowNode, ValueGetterParams, ValueSetterParams } from '@ag-grid-community/all-modules';
+import { ColDef, ColGroupDef, Column, ExcelStyle, GridOptions, Module, RowNode } from '@ag-grid-community/all-modules';
 import { AdaptableNoCodeWizardOptions, IAdaptableNoCodeWizard } from '../AdaptableInterfaces/AdaptableNoCodeWizard';
 import { IAdaptable } from '../AdaptableInterfaces/IAdaptable';
 import { AdaptableOptions } from '../AdaptableOptions/AdaptableOptions';
@@ -18,7 +18,6 @@ import { SelectedRowInfo } from '../PredefinedConfig/Selection/SelectedRowInfo';
 import { AdaptableTheme } from '../PredefinedConfig/ThemeState';
 import { IAdaptableStore } from '../Redux/Store/Interface/IAdaptableStore';
 import { IModuleCollection } from '../Strategy/Interface/IModule';
-import { AdaptableColumnType } from '../types';
 import { EmitterCallback } from '../Utilities/Emitter';
 import { IPPStyle } from '../Utilities/Interface/IPPStyle';
 import { LicenseService } from '../Utilities/Services/LicenseService';
@@ -31,8 +30,6 @@ import { IModuleService } from '../Utilities/Services/Interface/IModuleService';
 import { IEntitlementService } from '../Utilities/Services/Interface/IEntitlementService';
 import { IQueryLanguageService } from '../Utilities/Services/Interface/IQueryLanguageService';
 import { IAlertService } from '../Utilities/Services/Interface/IAlertService';
-import { AdaptableNumberEditor } from './editors/AdaptableNumberEditor';
-import { AdaptableDateEditor } from './editors/AdaptableDateEditor';
 import { ColumnSetupInfo } from './ColumnSetupInfo';
 import { CustomSort } from '../PredefinedConfig/CustomSortState';
 import { ColumnValuesComparer } from '../AdaptableOptions/GeneralOptions';
@@ -224,28 +221,7 @@ export declare class Adaptable implements IAdaptable {
      */
     private mapColumnDefs;
     private getColDefsForSpecialColumns;
-    getColDefsForFreeTextColumns(): {
-        headerName: string;
-        colId: string;
-        editable: boolean;
-        hide: boolean;
-        width: number;
-        enableValue: boolean;
-        filter: boolean;
-        floatingFilter: boolean;
-        resizable: boolean;
-        enableRowGroup: boolean;
-        sortable: boolean;
-        enablePivot: boolean;
-        suppressMenu: boolean;
-        suppressMovable: boolean;
-        headerTooltip: string;
-        cellEditor: string | typeof AdaptableNumberEditor | typeof AdaptableDateEditor;
-        type: AdaptableColumnType[];
-        valueSetter: (params: ValueSetterParams) => any;
-        cellRenderer: import("@ag-grid-community/all-modules").ICellRendererFunc;
-        valueGetter: (params: ValueGetterParams) => any;
-    }[];
+    getColDefsForFreeTextColumns(): ColDef[];
     setupColumnValueGetter({ col }: ColumnSetupInfo): void;
     setupColumnAggFunc({ col }: ColumnSetupInfo): void;
     private getColDefsForRowEditColumns;

package/src/agGrid/Adaptable.js

@@ -62,7 +62,6 @@ const StatusBarState_1 = require("../PredefinedConfig/StatusBarState");
 const createAgStatusPanelComponent_1 = require("./createAgStatusPanelComponent");
 const AdaptableStatusBar_1 = require("../View/StatusBar/AdaptableStatusBar");
 const RowEditService_1 = require("../Utilities/Services/RowEditService");
-const rowEditIcons_1 = require("./rowEditIcons");
 const tinycolor = require('tinycolor2');
 all_modules_1.ModuleRegistry.registerModules(all_modules_1.AllCommunityModules);
 const GROUP_PATH_SEPARATOR = '/';
@@ -2132,7 +2131,6 @@ class Adaptable {
                 : freeTextColumn.DataType === 'Date'
                     ? AdaptableDateEditor_1.AdaptableDateEditor
                     : null;
-            LoggingHelper_1.LogAdaptableInfo('Setting up FreeText Column: ' + freeTextColumn.ColumnId);
             const columnTypes = [
                 GeneralConstants_1.AB_SPECIAL_COLUMN,
                 this.agGridHelper.getAgGridDataType(freeTextColumn.DataType),
@@ -2140,7 +2138,7 @@ class Adaptable {
             if (ArrayExtensions_1.ArrayExtensions.IsNotNullOrEmpty((_a = freeTextColumn === null || freeTextColumn === void 0 ? void 0 : freeTextColumn.FreeTextColumnSettings) === null || _a === void 0 ? void 0 : _a.ColumnTypes)) {
                 columnTypes.push(...freeTextColumn.FreeTextColumnSettings.ColumnTypes);
             }
-            return {
+            const newColDef = {
                 headerName: freeTextColumn.FriendlyName || freeTextColumn.ColumnId,
                 colId: freeTextColumn.ColumnId,
                 editable: true,
@@ -2155,7 +2153,6 @@ class Adaptable {
                 enablePivot: freeTextColumnSettings.Pivotable,
                 suppressMenu: freeTextColumnSettings.SuppressMenu,
                 suppressMovable: freeTextColumnSettings.SuppressMovable,
-                headerTooltip: freeTextColumnSettings.HeaderToolTip,
                 cellEditor: dataTypeEditor !== null && dataTypeEditor !== void 0 ? dataTypeEditor : (freeTextColumn.TextEditor && freeTextColumn.TextEditor == 'Large'
                     ? 'agLargeTextCellEditor'
                     : 'agTextCellEditor'),
@@ -2168,6 +2165,11 @@ class Adaptable {
                     : undefined,
                 valueGetter: (params) => this.api.freeTextColumnApi.getFreeTextColumnValueFromRowNode(freeTextColumn, params.node),
             };
+            if (freeTextColumnSettings.HeaderToolTip) {
+                newColDef.headerTooltip = freeTextColumnSettings.HeaderToolTip;
+            }
+            LoggingHelper_1.LogAdaptableInfo('Setting up FreeText Column: ' + freeTextColumn.ColumnId);
+            return newColDef;
         });
     }
     setupColumnValueGetter({ col }) {
@@ -2193,57 +2195,55 @@ class Adaptable {
         }
         const editButtons = actionRowButtons
             .map((buttonName) => {
-            if (buttonName === 'create') {
-                // we need this dirty hack until ActionColumn support for custom icons is improved
-                const label = rowEditIcons_1.rowAddIcon;
-                return {
-                    label,
+            const button = buttonName === 'create'
+                ? {
+                    icon: {
+                        name: 'add-row',
+                    },
                     tooltip: 'Create',
                     onClick: () => {
                         this.api.actionApi.displayCreateActionRow();
                     },
-                };
-            }
-            if (buttonName === 'edit') {
-                // we need this dirty hack until ActionColumn support for custom icons is improved
-                const label = rowEditIcons_1.rowEditIcon;
-                return {
-                    label,
-                    tooltip: 'Edit',
-                    onClick: (button, context) => {
-                        this.api.actionApi.displayEditActionRow(context.primaryKeyValue);
-                    },
-                };
-            }
-            if (buttonName === 'clone') {
-                // we need this dirty hack until ActionColumn support for custom icons is improved
-                const label = rowEditIcons_1.rowCloneIcon;
-                return {
-                    label,
-                    tooltip: 'Clone',
-                    onClick: (button, context) => {
-                        this.api.actionApi.displayCloneActionRow(context.primaryKeyValue);
-                    },
-                };
-            }
-            if (buttonName === 'delete') {
-                // we need this dirty hack until ActionColumn support for custom icons is improved
-                const label = rowEditIcons_1.rowDeleteIcon;
-                return {
-                    label,
-                    tooltip: 'Delete',
-                    onClick: (button, context) => {
-                        var _a, _b;
-                        const eventInfo = {
-                            type: 'rowDeleted',
-                            rowNode: context.rowNode,
-                            adaptableApi: context.adaptableApi,
-                        };
-                        this.api.eventApi.emit('ActionRowSubmitted', eventInfo);
-                        (_b = (_a = this.adaptableOptions.actionOptions.actionRowFormOptions).onFormSubmit) === null || _b === void 0 ? void 0 : _b.call(_a, eventInfo);
-                    },
-                };
-            }
+                }
+                : buttonName === 'edit'
+                    ? {
+                        icon: {
+                            name: 'edit',
+                        },
+                        tooltip: 'Edit',
+                        onClick: (button, context) => {
+                            this.api.actionApi.displayEditActionRow(context.primaryKeyValue);
+                        },
+                    }
+                    : buttonName === 'clone'
+                        ? {
+                            icon: {
+                                name: 'clone',
+                            },
+                            tooltip: 'Clone',
+                            onClick: (button, context) => {
+                                this.api.actionApi.displayCloneActionRow(context.primaryKeyValue);
+                            },
+                        }
+                        : buttonName === 'delete'
+                            ? {
+                                icon: {
+                                    name: 'delete',
+                                },
+                                tooltip: 'Delete',
+                                onClick: (button, context) => {
+                                    var _a, _b;
+                                    const eventInfo = {
+                                        type: 'rowDeleted',
+                                        rowNode: context.rowNode,
+                                        adaptableApi: context.adaptableApi,
+                                    };
+                                    this.api.eventApi.emit('ActionRowSubmitted', eventInfo);
+                                    (_b = (_a = this.adaptableOptions.actionOptions.actionRowFormOptions).onFormSubmit) === null || _b === void 0 ? void 0 : _b.call(_a, eventInfo);
+                                },
+                            }
+                            : undefined;
+            return button;
         })
             .filter(Boolean);
         if (!editButtons.length) {

package/src/agGrid/agGridMenuHelper.d.ts

@@ -12,6 +12,7 @@ export declare class agGridMenuHelper {
     createAgGridMenuDefFromAdaptableMenu(adaptableMenuItem: AdaptableMenuItem): MenuItemDef;
     createAgGridColumnMenuDefFromUserMenu(menuItem: UserMenuItem<ColumnMenuContext>, menuContext: ColumnMenuContext): MenuItemDef;
     createAgGridContextMenuDefFromUserMenu(menuItem: UserMenuItem<ContextMenuContext>, menuContext: ContextMenuContext): MenuItemDef;
+    private mapAdaptableIconToAgGridIcon;
     createAdaptableColumnMenuItemFromUserMenu(menuItem: UserMenuItem<ColumnMenuContext>, menuContext: ColumnMenuContext): AdaptableMenuItem;
     createAgGridColumnMenuItems(originalgetMainMenuItems: GetMainMenuItems, params: GetMainMenuItemsParams): (string | MenuItemDef)[] | undefined;
     createGroupedColumnMenuItem(): MenuItemDef | undefined;

package/src/agGrid/agGridMenuHelper.js

@@ -5,6 +5,7 @@ const tslib_1 = require("tslib");
 const ArrayExtensions_1 = require("../Utilities/Extensions/ArrayExtensions");
 const icons_1 = require("../components/icons");
 const flatten_1 = tslib_1.__importDefault(require("lodash/flatten"));
+const AdaptableIconComponent_1 = require("../components/AdaptableIconComponent");
 // tslint:disable-next-line: class-name
 class agGridMenuHelper {
     constructor(adaptable, gridOptions) {
@@ -106,7 +107,7 @@ class agGridMenuHelper {
             action: x.onClick
                 ? x.onClick
                 : () => this.adaptable.api.internalApi.dispatchReduxAction(x.reduxAction),
-            icon: icons_1.iconToString(x.icon, {
+            icon: this.mapAdaptableIconToAgGridIcon(x.icon, {
                 fill: 'var(--ab-color-text-on-primary)',
             }),
         };
@@ -124,7 +125,7 @@ class agGridMenuHelper {
                 : adaptableMenuItem.reduxAction
                     ? () => this.adaptable.api.internalApi.dispatchReduxAction(adaptableMenuItem.reduxAction)
                     : undefined,
-            icon: icons_1.iconToString(adaptableMenuItem.icon, {
+            icon: this.mapAdaptableIconToAgGridIcon(adaptableMenuItem.icon, {
                 fill: 'var(--ab-color-text-on-primary)',
             }),
             subMenu: subMenuItems,
@@ -136,7 +137,7 @@ class agGridMenuHelper {
         return {
             name: this.getLabelFromUserColumnMenuItem(menuItem, menuContext),
             action: () => (fn ? fn(menuContext) : null),
-            icon: icons_1.iconToString(menuItem.icon, {
+            icon: this.mapAdaptableIconToAgGridIcon(menuItem.icon, {
                 fill: 'var(--ab-color-text-on-primary)',
             }),
             disabled: disabled,
@@ -153,7 +154,7 @@ class agGridMenuHelper {
         return {
             name: this.getLabelFromUserContextMenuItem(menuItem, menuContext),
             action: () => (fn ? fn(menuContext) : null),
-            icon: icons_1.iconToString(menuItem.icon, {
+            icon: this.mapAdaptableIconToAgGridIcon(menuItem.icon, {
                 fill: 'var(--ab-color-text-on-primary)',
             }),
             disabled: disabled,
@@ -164,6 +165,16 @@ class agGridMenuHelper {
                 }),
         };
     }
+    mapAdaptableIconToAgGridIcon(adaptableIcon, style) {
+        if (AdaptableIconComponent_1.isAdaptableElementIcon(adaptableIcon)) {
+            return adaptableIcon.element;
+        }
+        else {
+            return icons_1.iconToString(adaptableIcon, {
+                fill: 'var(--ab-color-text-on-primary)',
+            });
+        }
+    }
     createAdaptableColumnMenuItemFromUserMenu(menuItem, menuContext) {
         const fn = menuItem.onClick;
         let adaptableMenuItem = {

package/src/components/AdaptableFormComponent/AdaptableFormComponent.js

@@ -13,22 +13,16 @@ const react_1 = require("react");
 function AdaptableFormComponentButtons({ formDef, onClick, defaultTone, disabledButtons, api, context, focusFirstButton = true, }) {
     return (React.createElement(React.Fragment, null, formDef.buttons.map((button, index) => {
         var _a;
-        const defaultIconProps = {
-            style: {
-                height: 15,
-                width: 15,
-            },
-        };
-        const buttonIcon = api.internalApi.getIconForButton(button, context);
-        const iconProps = buttonIcon && Object.assign({}, defaultIconProps, buttonIcon);
+        const buttonIcon = api.internalApi.getIconForButton(button, context, {
+            height: 15,
+            width: 15,
+        });
         let buttonStyle = api.internalApi.getStyleForButton(button, context ? context : { adaptableApi: api });
         let buttonLabel = api.internalApi.getLabelForButton(button, context ? context : { adaptableApi: api });
         let buttonTooltip = api.internalApi.getTooltipForButton(button, context ? context : { adaptableApi: api });
-        return (React.createElement(SimpleButton_1.default, { autoFocus: focusFirstButton && index === 0, disabled: disabledButtons[index], key: index, tooltip: buttonTooltip, tone: (_a = buttonStyle === null || buttonStyle === void 0 ? void 0 : buttonStyle.tone) !== null && _a !== void 0 ? _a : defaultTone, variant: buttonStyle === null || buttonStyle === void 0 ? void 0 : buttonStyle.variant, "data-text": buttonLabel, className: buttonStyle === null || buttonStyle === void 0 ? void 0 : buttonStyle.className, marginLeft: index ? 2 : 0, onClick: () => {
+        return (React.createElement(SimpleButton_1.default, { autoFocus: focusFirstButton && index === 0, disabled: disabledButtons[index], key: index, tooltip: buttonTooltip, icon: buttonIcon, tone: (_a = buttonStyle === null || buttonStyle === void 0 ? void 0 : buttonStyle.tone) !== null && _a !== void 0 ? _a : defaultTone, variant: buttonStyle === null || buttonStyle === void 0 ? void 0 : buttonStyle.variant, "data-text": buttonLabel, className: buttonStyle === null || buttonStyle === void 0 ? void 0 : buttonStyle.className, marginLeft: index ? 2 : 0, onClick: () => {
                 onClick(button);
-            } },
-            buttonIcon ? React.createElement("img", Object.assign({}, iconProps)) : null,
-            buttonLabel));
+            } }, buttonLabel));
     })));
 }
 exports.AdaptableFormComponentButtons = AdaptableFormComponentButtons;

package/src/components/AdaptableIconComponent/index.d.ts

@@ -1,5 +1,5 @@
 /// <reference types="react" />
-import { AdaptableExternalIcon, AdaptableIcon, AdaptableInternalIcon } from '../../PredefinedConfig/Common/AdaptableIcon';
+import { AdaptableElementIcon, AdaptableExternalIcon, AdaptableIcon, AdaptableInternalIcon } from '../../PredefinedConfig/Common/AdaptableIcon';
 export interface AdaptableIconComponentProps {
     icon: AdaptableIcon;
     iconClassName?: string;
@@ -7,4 +7,5 @@ export interface AdaptableIconComponentProps {
 export declare const AdaptableIconComponent: (props: AdaptableIconComponentProps) => JSX.Element;
 export declare const isAdaptableInternalIcon: (icon: unknown) => icon is AdaptableInternalIcon;
 export declare const isAdaptableExternalIcon: (icon: unknown) => icon is AdaptableExternalIcon;
+export declare const isAdaptableElementIcon: (icon: unknown) => icon is AdaptableElementIcon;
 export declare const isAdaptableIcon: (icon: unknown) => icon is AdaptableIcon;

package/src/components/AdaptableIconComponent/index.js

@@ -1,17 +1,40 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.isAdaptableIcon = exports.isAdaptableExternalIcon = exports.isAdaptableInternalIcon = exports.AdaptableIconComponent = void 0;
+exports.isAdaptableIcon = exports.isAdaptableElementIcon = exports.isAdaptableExternalIcon = exports.isAdaptableInternalIcon = exports.AdaptableIconComponent = void 0;
 const tslib_1 = require("tslib");
 const React = tslib_1.__importStar(require("react"));
 const icons_1 = require("../icons");
 const join_1 = tslib_1.__importDefault(require("../utils/join"));
+const react_1 = require("react");
 const AdaptableIconComponent = (props) => {
     var _a, _b, _c, _d, _e;
     const { icon, iconClassName } = props;
     if (!icon) {
         return null;
     }
-    const className = join_1.default(icon.className, iconClassName);
+    const className = !exports.isAdaptableElementIcon(icon)
+        ? join_1.default(icon.className, iconClassName)
+        : iconClassName;
+    const divRef = react_1.useRef(null);
+    react_1.useEffect(() => {
+        let htmlElement;
+        if (exports.isAdaptableElementIcon(icon)) {
+            if (typeof icon.element === 'string') {
+                const domParser = new DOMParser();
+                htmlElement = domParser.parseFromString(icon.element, 'text/html').body
+                    .firstChild;
+            }
+            else {
+                htmlElement = icon.element;
+            }
+            divRef.current.insertAdjacentElement('afterend', htmlElement);
+        }
+        return () => {
+            if (exports.isAdaptableElementIcon(icon)) {
+                htmlElement === null || htmlElement === void 0 ? void 0 : htmlElement.remove();
+            }
+        };
+    }, [icon]);
     if (exports.isAdaptableInternalIcon(icon)) {
         return React.createElement(icons_1.Icon, { name: icon.name, size: icon.size, style: icon.style, className: className });
     }
@@ -21,6 +44,9 @@ const AdaptableIconComponent = (props) => {
         const iconStyle = (_e = icon.style) !== null && _e !== void 0 ? _e : {};
         return React.createElement("img", { src: icon.src, className: className, style: Object.assign({ height, width }, iconStyle) });
     }
+    if (exports.isAdaptableElementIcon(icon)) {
+        return (React.createElement("span", { ref: divRef, style: { display: 'none' }, "data-name": "adaptable-icon-placeholder" }));
+    }
     return null;
 };
 exports.AdaptableIconComponent = AdaptableIconComponent;
@@ -34,7 +60,14 @@ const isAdaptableExternalIcon = (icon) => {
     return typeof ((_a = icon) === null || _a === void 0 ? void 0 : _a.src) === 'string';
 };
 exports.isAdaptableExternalIcon = isAdaptableExternalIcon;
+const isAdaptableElementIcon = (icon) => {
+    var _a, _b;
+    return ((typeof HTMLElement === 'function' &&
+        ((_a = icon) === null || _a === void 0 ? void 0 : _a.element) instanceof HTMLElement) ||
+        typeof ((_b = icon) === null || _b === void 0 ? void 0 : _b.element) === 'string');
+};
+exports.isAdaptableElementIcon = isAdaptableElementIcon;
 const isAdaptableIcon = (icon) => {
-    return exports.isAdaptableInternalIcon(icon) || exports.isAdaptableExternalIcon(icon);
+    return (exports.isAdaptableInternalIcon(icon) || exports.isAdaptableExternalIcon(icon) || exports.isAdaptableElementIcon(icon));
 };
 exports.isAdaptableIcon = isAdaptableIcon;