@adaptabletools/adaptable 16.0.0-canary.2 → 16.0.0-canary.4

package/src/agGrid/ActionColumnRenderer.js

@@ -6,9 +6,11 @@ const SimpleButton_1 = tslib_1.__importDefault(require("../components/SimpleButt
 const React = tslib_1.__importStar(require("react"));
 const uuid_1 = require("../components/utils/uuid");
 const useRerender_1 = require("../components/utils/useRerender");
+const GeneralConstants_1 = require("../Utilities/Constants/GeneralConstants");
+const renderWithAdaptableContext_1 = require("../View/renderWithAdaptableContext");
 function getActionButtonsAndActionColumn(adaptable, actionColumn, colId) {
     var _a;
-    const actionCol = actionColumn
+    const actionCol = colId == GeneralConstants_1.ADAPTABLE_ROW_ACTION_BUTTONS
         ? actionColumn
         : (_a = adaptable.api.actionColumnApi.getActionColumns()) === null || _a === void 0 ? void 0 : _a.find((ac) => ac.columnId == colId);
     if (actionCol && actionCol.actionColumnButton) {
@@ -27,7 +29,8 @@ function getActionButtonsAndActionColumn(adaptable, actionColumn, colId) {
         actionColumn: actionCol,
     };
 }
-const renderActionButtons = (buttons, adaptableApi, context, rerender) => {
+const ActionButtons = (props) => {
+    const { buttons, adaptableApi, context, rerender } = props;
     return (React.createElement(React.Fragment, null, buttons.map((button, index) => {
         var _a, _b;
         if (button.hidden && button.hidden(button, context)) {
@@ -57,7 +60,10 @@ const renderActionButtons = (buttons, adaptableApi, context, rerender) => {
 const ReactActionColumnRenderer = (props) => {
     const rerender = (0, useRerender_1.useRerender)();
     const adaptable = props.api.__adaptable;
-    const { actionButtons, actionColumn } = getActionButtonsAndActionColumn(adaptable, props.actionColumn, props.colDef.colId);
+    const { actionButtons, actionColumn } = getActionButtonsAndActionColumn(adaptable, {
+        columnId: GeneralConstants_1.ADAPTABLE_ROW_ACTION_BUTTONS,
+        actionColumnButton: adaptable.getActionRowButtonDefs(),
+    }, props.colDef.colId);
     if (!actionColumn || !actionButtons.length) {
         return null;
     }
@@ -75,14 +81,18 @@ const ReactActionColumnRenderer = (props) => {
         adaptableId: adaptable.adaptableOptions.adaptableId,
         data: props.data,
     };
-    return (React.createElement("div", { className: "ab-ActionColumn" }, renderActionButtons(actionButtons, adaptable.api, buttonContext, rerender)));
+    return (React.createElement("div", { className: "ab-ActionColumn" },
+        React.createElement(ActionButtons, { buttons: actionButtons, adaptableApi: adaptable.api, context: buttonContext, rerender: rerender })));
 };
 exports.ReactActionColumnRenderer = ReactActionColumnRenderer;
 class ActionColumnRenderer {
     // gets called once before the renderer is used
     init(params) {
         const adaptable = params.api.__adaptable;
-        const { actionButtons, actionColumn } = getActionButtonsAndActionColumn(adaptable, params.actionColumn, params.colDef.colId);
+        const { actionButtons, actionColumn } = getActionButtonsAndActionColumn(adaptable, {
+            columnId: GeneralConstants_1.ADAPTABLE_ROW_ACTION_BUTTONS,
+            actionColumnButton: adaptable.getActionRowButtonDefs(),
+        }, params.colDef.colId);
         if (!actionColumn || !actionButtons.length) {
             return;
         }
@@ -106,7 +116,12 @@ class ActionColumnRenderer {
         };
         const eGui = this.eGui;
         const doRender = () => {
-            this.unmountReactRoot = adaptable.renderReactRoot(renderActionButtons(actionButtons, adaptable.api, buttonContext, doRender), eGui);
+            this.unmountReactRoot = adaptable.renderReactRoot((0, renderWithAdaptableContext_1.renderWithAdaptableContext)(ActionButtons({
+                buttons: actionButtons,
+                context: buttonContext,
+                rerender: doRender,
+                adaptableApi: adaptable.api,
+            }), adaptable), eGui);
         };
         this.render = doRender;
         doRender();

package/src/agGrid/Adaptable.d.ts

@@ -18,7 +18,7 @@ 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 { ChartDefinition } from '../types';
+import { ActionColumnContext, AdaptableButton, ChartDefinition } from '../types';
 import { EmitterCallback } from '../Utilities/Emitter';
 import { IPPStyle } from '../Utilities/Interface/IPPStyle';
 import { LicenseService } from '../Utilities/Services/LicenseService';
@@ -38,6 +38,7 @@ import { IMetamodelService } from '../Utilities/Services/Interface/IMetamodelSer
 import { IRowEditService } from '../Utilities/Services/Interface/IRowEditService';
 import { RenderReactRootFn } from '../renderReactRoot';
 import { AdaptableLogger } from './AdaptableLogger';
+import { Fdc3Service } from '../Utilities/Services/Fdc3Service';
 declare type RuntimeConfig = {
     gridOptions: GridOptions;
     waitForAgGrid?: boolean;
@@ -63,6 +64,7 @@ export declare class Adaptable implements IAdaptable {
     TeamSharingService: ITeamSharingService;
     MetamodelService: IMetamodelService;
     RowEditService: IRowEditService;
+    Fdc3Service: Fdc3Service;
     private LicenseService;
     private ChartingService;
     private ThemeService;
@@ -277,7 +279,8 @@ export declare class Adaptable implements IAdaptable {
     private getColDefsForSpecialColumns;
     getColDefsForFreeTextColumns(): ColDef<any, any>[];
     setupColumnValueGetter({ col }: ColumnSetupInfo): void;
-    private getColDefsForRowEditColumns;
+    getActionRowButtonDefs(): AdaptableButton<ActionColumnContext<any>>[];
+    private getColDefsForActionRowColumns;
     getColDefsForActionColumns(): ColDef<any, any>[];
     updateColDefsForSpecialColumns(): void;
     private getColDefsForCalculatedColumns;
@@ -327,6 +330,7 @@ export declare class Adaptable implements IAdaptable {
     private applyCurrentTheme;
     private applyFinalRendering;
     isAgGridModulePresent(moduleName: ModuleNames): boolean;
+    private getAllAgGridRegisteredModules;
     getAgGridRegisteredModules(): Module[];
     private getAgGridRegisteredModuleNames;
     private onRowDataChanged;
@@ -416,6 +420,7 @@ export declare class Adaptable implements IAdaptable {
     initLicenseService(): LicenseService;
     showCharts(chartsDefinitions: ChartDefinition[], chartContainer?: HTMLElement): ChartRef[];
     showChart(chartDefinition: ChartDefinition, container?: HTMLElement): ChartRef;
+    updateChart(chart: ChartDefinition): void;
     getChartRef(chartId: string): ChartRef;
     getChartModels(): import("@ag-grid-community/core").ChartModel[];
     getRowModelType(): import("@ag-grid-community/core").RowModelType;

package/src/agGrid/Adaptable.js

@@ -68,6 +68,7 @@ const ThemeService_1 = require("../Utilities/Services/ThemeService");
 const AdaptableLogger_1 = require("./AdaptableLogger");
 const attachAddaptableColumnTypes_1 = require("./attachAddaptableColumnTypes");
 const FormatHelper_1 = require("../Utilities/Helpers/FormatHelper");
+const Fdc3Service_1 = require("../Utilities/Services/Fdc3Service");
 const tinycolor = require('tinycolor2');
 const GROUP_PATH_SEPARATOR = '/';
 // IMPORTANT - we need colId to be set in order for safeSetColDefs to work correctly
@@ -417,7 +418,7 @@ class Adaptable {
         this.agGridMenuHelper = new agGridMenuHelper_1.agGridMenuHelper(this, this.gridOptions);
         // Build the default group sort comparator - will get custom sort values (but not functions) in real time
         // TODO: if  a custom 'aggFunc' property is defined (see setupColumnAggFunc()), it won't be evaluated
-        if (this.adaptableOptions.columnOptions.autoOrderGroupedColumns) {
+        if (this.adaptableOptions.groupingOptions.autoOrderGroupedColumns) {
             this.setGridOptionsProperty('initialGroupOrderComparator', (userPropertyValue) => {
                 if (userPropertyValue) {
                     return userPropertyValue;
@@ -441,6 +442,7 @@ class Adaptable {
         this.QueryLanguageService = new QueryLanguageService_1.QueryLanguageService(this.api);
         this.AlertService = new AlertService_1.AlertService(this.api);
         this.TeamSharingService = new TeamSharingService_1.TeamSharingService(this.api);
+        this.Fdc3Service = new Fdc3Service_1.Fdc3Service(this.api);
         // @ts-ignore
         this.RowEditService = new RowEditService_1.RowEditService(this.api);
         this.MetamodelService = new MetamodelService_1.MetamodelService(() => this.api.optionsApi.getAdaptableOptions());
@@ -1256,7 +1258,8 @@ class Adaptable {
         if (!params.node) {
             return false;
         }
-        if (!this.api.optionsApi.getQuickSearchOptions().runQuickSearchOnRowGroups && params.node.group) {
+        if (!this.api.optionsApi.getQuickSearchOptions().runQuickSearchOnRowGroups &&
+            params.node.group) {
             return false;
         }
         let quickSearchValue = this.api.quickSearchApi.getQuickSearchValue();
@@ -1352,11 +1355,11 @@ class Adaptable {
         }
         const perfSetLayout = this.logger.beginPerf(`setLayout(${layout.Name})`);
         layout.Columns = layout.Columns || [];
-        const rowEditActionColumn = this.getColDefsForRowEditColumns()[0];
-        if (rowEditActionColumn) {
-            layout.Columns.push(rowEditActionColumn.colId);
+        const actionRowColumn = this.getColDefsForActionRowColumns()[0];
+        if (actionRowColumn) {
+            layout.Columns.push(actionRowColumn.colId);
             layout.PinnedColumnsMap = layout.PinnedColumnsMap || {};
-            layout.PinnedColumnsMap[rowEditActionColumn.colId] = rowEditActionColumn.pinned;
+            layout.PinnedColumnsMap[actionRowColumn.colId] = actionRowColumn.pinned;
         }
         const layoutColumnsMap = layout.Columns.reduce((acc, colId) => {
             acc[colId] = true;
@@ -1409,6 +1412,9 @@ class Adaptable {
                 // autosize only the columns which are part of the selected layout
                 colsToAutoSize[colId] = true;
             }
+            if (actionRowColumn && actionRowColumn.colId === colId) {
+                newColState.width = actionRowColumn.width;
+            }
             newColState.rowGroupIndex =
                 groupedColumnsIndexesMap[colId] != null ? groupedColumnsIndexesMap[colId] : null;
             const previousRowGroup = newColState.rowGroup;
@@ -1700,7 +1706,10 @@ class Adaptable {
         }
         layout.EnablePivot = this.gridOptions.columnApi.isPivotMode();
         layout.PivotColumns = pivotColumns;
-        if (this.api.layoutApi.internalApi.areExpandedRowGroupsSavedInLayouts()) {
+        if (
+        // check first row node for presence of data without iterating over whole grid
+        this.api.layoutApi.internalApi.areExpandedRowGroupsSavedInLayouts() &&
+            this.api.gridApi.getFirstRowNode()) {
             layout.ExpandedRowGroupValues = this.getExpandRowGroupsKeys();
         }
         this.persistLayout(layout);
@@ -1887,13 +1896,16 @@ class Adaptable {
                 });
             }
         }
-        const uniqueVals = (0, uniqBy_1.default)(returnValues, (dataItem) => {
+        let uniqueVals = (0, uniqBy_1.default)(returnValues, (dataItem) => {
             const value = dataItem.rawValue;
             if (value instanceof Date) {
                 return value.toISOString();
             }
             return value;
         });
+        if (column.dataType == 'String' && this.api.internalApi.isTextComparisonCaseSensitive()) {
+            uniqueVals = (0, uniqBy_1.default)(uniqueVals, (d) => d.displayValue.toLowerCase());
+        }
         return uniqueVals.slice(0, this.adaptableOptions.filterOptions.maxFilterValuesToDisplay);
     }
     async getDistinctFilterValuesForColumn(column, visibleRowsOnly, filter, skipRowNode) {
@@ -2326,7 +2338,7 @@ class Adaptable {
             ...this.getColDefsForCalculatedColumns(),
             ...this.getColDefsForActionColumns(),
             ...this.getColDefsForFreeTextColumns(),
-            ...this.getColDefsForRowEditColumns(),
+            ...this.getColDefsForActionRowColumns(),
         ];
     }
     getColDefsForFreeTextColumns() {
@@ -2386,12 +2398,12 @@ class Adaptable {
             return userValue;
         });
     }
-    getColDefsForRowEditColumns() {
+    getActionRowButtonDefs() {
         const actionRowButtons = this.api.actionRowApi.getActionRowButtons();
         if (!(actionRowButtons === null || actionRowButtons === void 0 ? void 0 : actionRowButtons.length)) {
             return [];
         }
-        const defaultEditButtonConfiguration = {
+        const defaultActionRowButtonConfiguration = {
             create: {
                 icon: {
                     name: 'add',
@@ -2438,10 +2450,10 @@ class Adaptable {
                 },
             },
         };
-        const editButtons = actionRowButtons
+        const actionButtons = actionRowButtons
             .map((actionRowButtonType) => {
             var _a, _b;
-            const defaultButtonConfig = defaultEditButtonConfiguration[actionRowButtonType];
+            const defaultButtonConfig = defaultActionRowButtonConfiguration[actionRowButtonType];
             if (!defaultButtonConfig) {
                 // should NOT happen unless the user sent some invalid button type in the predefined config
                 return;
@@ -2458,12 +2470,20 @@ class Adaptable {
             return Object.assign(Object.assign({}, defaultButtonConfig), customButtonConfig);
         })
             .filter(Boolean);
-        if (!editButtons.length) {
+        return actionButtons;
+    }
+    getColDefsForActionRowColumns() {
+        const actionRowButtons = this.api.actionRowApi.getActionRowButtons();
+        if (!(actionRowButtons === null || actionRowButtons === void 0 ? void 0 : actionRowButtons.length)) {
+            return [];
+        }
+        const actionButtons = this.getActionRowButtonDefs();
+        if (!actionButtons.length) {
             return [];
         }
-        const rowEditActionColumn = {
+        const actionRowColumn = {
             columnId: GeneralConstants_1.ADAPTABLE_ROW_ACTION_BUTTONS,
-            actionColumnButton: editButtons,
+            actionColumnButton: actionButtons,
         };
         return [
             {
@@ -2472,7 +2492,7 @@ class Adaptable {
                 hide: false,
                 editable: false,
                 // 15px is the icon width + left&right padding + left&right border
-                width: editButtons.length * (UIHelper_1.default.getSimpleButtonPaddingWidth() * 2 + 15) + 2,
+                width: actionButtons.length * (UIHelper_1.default.getSimpleButtonPaddingWidth() * 2 + 15) + 2,
                 resizable: false,
                 lockVisible: true,
                 suppressColumnsToolPanel: true,
@@ -2486,9 +2506,6 @@ class Adaptable {
                     ? 'right'
                     : 'left',
                 cellRenderer: this.variant === 'react' ? ActionColumnRenderer_1.ReactActionColumnRenderer : ActionColumnRenderer_1.ActionColumnRenderer,
-                cellRendererParams: {
-                    actionColumn: rowEditActionColumn,
-                },
                 cellClass: GeneralConstants_1.ADAPTABLE_ROW_ACTION_BUTTONS,
                 type: [GeneralConstants_1.AB_SPECIAL_COLUMN, 'abColDefObject'],
             },
@@ -2672,7 +2689,7 @@ class Adaptable {
         return this.gridOptions.api.getDisplayedRowAtIndex(firstDisplayedRowIndex);
     }
     destroy(config) {
-        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z, _0, _1;
+        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z, _0, _1, _2, _3;
         if (this.gridOptions && this.gridOptions.api) {
             this.gridOptions.api.removeEventListener(core_1.Events.EVENT_FIRST_DATA_RENDERED, this.listenerFirstDataRendered);
             this.gridOptions.api.removeEventListener(core_1.Events.EVENT_COLUMN_PIVOT_MODE_CHANGED, this.listenerPivotModeChanged);
@@ -2762,23 +2779,25 @@ class Adaptable {
         this.DataService = null;
         (_h = (_g = this.EntitlementService) === null || _g === void 0 ? void 0 : _g.destroy) === null || _h === void 0 ? void 0 : _h.call(_g);
         this.EntitlementService = null;
-        (_k = (_j = this.ReportService) === null || _j === void 0 ? void 0 : _j.destroy) === null || _k === void 0 ? void 0 : _k.call(_j);
+        (_k = (_j = this.Fdc3Service) === null || _j === void 0 ? void 0 : _j.destroy) === null || _k === void 0 ? void 0 : _k.call(_j);
+        this.Fdc3Service = null;
+        (_m = (_l = this.ReportService) === null || _l === void 0 ? void 0 : _l.destroy) === null || _m === void 0 ? void 0 : _m.call(_l);
         this.ReportService = null;
-        (_m = (_l = this.ModuleService) === null || _l === void 0 ? void 0 : _l.destroy) === null || _m === void 0 ? void 0 : _m.call(_l);
+        (_p = (_o = this.ModuleService) === null || _o === void 0 ? void 0 : _o.destroy) === null || _p === void 0 ? void 0 : _p.call(_o);
         this.ModuleService = null;
-        (_p = (_o = this.ValidationService) === null || _o === void 0 ? void 0 : _o.destroy) === null || _p === void 0 ? void 0 : _p.call(_o);
+        (_r = (_q = this.ValidationService) === null || _q === void 0 ? void 0 : _q.destroy) === null || _r === void 0 ? void 0 : _r.call(_q);
         this.ValidationService = null;
-        (_r = (_q = this.QueryLanguageService) === null || _q === void 0 ? void 0 : _q.destroy) === null || _r === void 0 ? void 0 : _r.call(_q);
+        (_t = (_s = this.QueryLanguageService) === null || _s === void 0 ? void 0 : _s.destroy) === null || _t === void 0 ? void 0 : _t.call(_s);
         this.QueryLanguageService = null;
-        (_t = (_s = this.AlertService) === null || _s === void 0 ? void 0 : _s.destroy) === null || _t === void 0 ? void 0 : _t.call(_s);
+        (_v = (_u = this.AlertService) === null || _u === void 0 ? void 0 : _u.destroy) === null || _v === void 0 ? void 0 : _v.call(_u);
         this.AlertService = null;
-        (_v = (_u = this.TeamSharingService) === null || _u === void 0 ? void 0 : _u.destroy) === null || _v === void 0 ? void 0 : _v.call(_u);
+        (_x = (_w = this.TeamSharingService) === null || _w === void 0 ? void 0 : _w.destroy) === null || _x === void 0 ? void 0 : _x.call(_w);
         this.TeamSharingService = null;
-        (_x = (_w = this.RowEditService) === null || _w === void 0 ? void 0 : _w.destroy) === null || _x === void 0 ? void 0 : _x.call(_w);
+        (_z = (_y = this.RowEditService) === null || _y === void 0 ? void 0 : _y.destroy) === null || _z === void 0 ? void 0 : _z.call(_y);
         this.RowEditService = null;
-        (_z = (_y = this.MetamodelService) === null || _y === void 0 ? void 0 : _y.destroy) === null || _z === void 0 ? void 0 : _z.call(_y);
+        (_1 = (_0 = this.MetamodelService) === null || _0 === void 0 ? void 0 : _0.destroy) === null || _1 === void 0 ? void 0 : _1.call(_0);
         this.MetamodelService = null;
-        (_1 = (_0 = this.LicenseService) === null || _0 === void 0 ? void 0 : _0.destroy) === null || _1 === void 0 ? void 0 : _1.call(_0);
+        (_3 = (_2 = this.LicenseService) === null || _2 === void 0 ? void 0 : _2.destroy) === null || _3 === void 0 ? void 0 : _3.call(_2);
         this.LicenseService = null;
         this.isDestroyed = true;
     }
@@ -2873,7 +2892,10 @@ class Adaptable {
         }
         const gridContainerElement = this.getAgGridContainerElement();
         if (gridContainerElement) {
-            gridContainerElement.addEventListener('keydown', (this.listenerKeydown = (event) => this._emit('KeyDown', event)));
+            gridContainerElement.addEventListener('keydown', (this.listenerKeydown = (event) => this._emit('KeyDown', event)), 
+            // This is needed to be able to prevent the editor to be opened
+            // in bubling phase the opening is not prevented with ag-grid v30
+            true);
         }
         /*********************
          * AG Grid EVENTS
@@ -3769,22 +3791,28 @@ class Adaptable {
         if (standardAgGridRegistrationCheck) {
             return true;
         }
+        const allAgGridRegisteredModules = this.getAllAgGridRegisteredModules();
+        return !!allAgGridRegisteredModules[moduleName];
+    }
+    getAllAgGridRegisteredModules() {
         // as of AG Grid 30.0.3 the ModuleRegistry gets an dynamic grid ID for the framework versions
         // because of that we have to check ALL grid IDs to see if the module is registered
         // TODO AFL: we should recheck this later, it seems AG Grid is already refactoring this faulty registration process
         // @ts-ignore
         const gridModulesMap = core_1.ModuleRegistry.gridModulesMap;
-        let allGridModulesMap = {};
+        let allModulesMap = {};
         Object.keys(gridModulesMap).forEach((gridId) => {
-            allGridModulesMap = Object.assign(Object.assign({}, allGridModulesMap), gridModulesMap[gridId]);
+            allModulesMap = Object.assign(Object.assign({}, allModulesMap), gridModulesMap[gridId]);
         });
-        return !!allGridModulesMap[moduleName];
+        return allModulesMap;
     }
     getAgGridRegisteredModules() {
-        return core_1.ModuleRegistry.__getRegisteredModules(this.gridOptions.gridId);
+        // see comment from getAllAgGridRegisteredModules()
+        // return ModuleRegistry.__getRegisteredModules(this.gridOptions.gridId);
+        return Object.values(this.getAllAgGridRegisteredModules());
     }
     getAgGridRegisteredModuleNames() {
-        return core_1.ModuleRegistry.__getRegisteredModules(this.gridOptions.gridId).map((module) => module.moduleName);
+        return this.getAgGridRegisteredModules().map((module) => module.moduleName);
     }
     onRowDataChanged({ rowNode, oldData, newData, }) {
         if (oldData == null || oldData == undefined) {
@@ -4617,6 +4645,7 @@ class Adaptable {
         return this.isAgGridModulePresent(core_1.ModuleNames.ExcelExportModule);
     }
     exportToExcel(reportData, fileName) {
+        var _a;
         const columnDefs = reportData.columns.map((column) => ({
             field: column.columnId,
             headerName: column.friendlyName,
@@ -4653,7 +4682,11 @@ class Adaptable {
             columnDefs,
             rowData: reportData.rows,
         };
-        const grid = new core_1.Grid(document.createElement('div'), gridOptions);
+        let gridParams;
+        if ((_a = this.runtimeConfig.agGridModules) === null || _a === void 0 ? void 0 : _a.length) {
+            gridParams = { modules: this.runtimeConfig.agGridModules };
+        }
+        const grid = new core_1.Grid(document.createElement('div'), gridOptions, gridParams);
         gridOptions.api.exportDataAsExcel({
             sheetName: 'Sheet 1',
             fileName: fileName,
@@ -4983,6 +5016,18 @@ class Adaptable {
         this.api.chartingApi.editChartDefinition(Object.assign(Object.assign({}, chartDefinition), { Model: chartModel }));
         return chartRef;
     }
+    updateChart(chart) {
+        const upgradableProperties = {
+            // Only Range charts are supported to be created at run time
+            // the other two are pivot & cross-filter
+            type: 'rangeChartUpdate',
+            chartId: chart.Model.chartId,
+            unlinkChart: Boolean(chart.Model.unlinkChart),
+            suppressChartRanges: Boolean(chart.Model.suppressChartRanges),
+            aggFunc: chart.Model.aggFunc,
+        };
+        this.gridOptions.api.updateChart(upgradableProperties);
+    }
     getChartRef(chartId) {
         return this.gridOptions.api.getChartRef(chartId);
     }

package/src/agGrid/BadgeRenderer.js

@@ -1,24 +1,35 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.getBadgeRendererForColumn = void 0;
-const Badge_1 = require("../components/Badge");
+const Badge_1 = require("../View/Components/Badge");
+const renderWithAdaptableContext_1 = require("../View/renderWithAdaptableContext");
 const getBadgeRendererForColumn = (styledColumn, abColumn, api) => {
     if (!styledColumn.BadgeStyle) {
         return;
     }
     return class BadgetRenderer {
+        getAdaptableInstance(params) {
+            const adaptable = params.api.__adaptable;
+            return adaptable;
+        }
         init(params) {
-            var _a, _b, _c, _d, _e, _f;
+            var _a, _b, _c, _d;
+            const adaptable = this.getAdaptableInstance(params);
+            const adapatableApi = adaptable.api;
             this.eGui = document.createElement('div');
             this.eGui.className = 'ab-Badge__wrapper';
             const formattedValue = (_c = (_b = (_a = params.formatValue) === null || _a === void 0 ? void 0 : _a.call(params, params.value)) !== null && _b !== void 0 ? _b : params.value) !== null && _c !== void 0 ? _c : '';
-            const badge = api.styledColumnApi.internalApi.getApplicableBadge(styledColumn, {
+            const predicateDefHandlerContext = {
                 value: params.value,
                 oldValue: null,
                 displayValue: params.formatValue,
                 node: params.node,
                 column: abColumn,
-            });
+                adaptableApi: adapatableApi,
+                userName: adapatableApi.optionsApi.getUserName(),
+                adaptableId: adapatableApi.optionsApi.getAdaptableId(),
+            };
+            const badge = api.styledColumnApi.internalApi.getApplicableBadge(styledColumn, predicateDefHandlerContext);
             const isGrouped = params.node.group;
             const includeGrouped = Boolean(styledColumn.IncludeGroupedRows);
             const isNullValue = formattedValue === '' || formattedValue === null || formattedValue === undefined;
@@ -32,24 +43,12 @@ const getBadgeRendererForColumn = (styledColumn, abColumn, api) => {
                 this.eGui.innerHTML = formattedValue;
                 return;
             }
-            let icon = badge.Icon;
-            if (icon && 'name' in icon && icon.size === undefined) {
-                icon.size = 14;
-            }
-            const userInterfaceOptions = (_d = api.optionsApi.getAdaptableOptions()) === null || _d === void 0 ? void 0 : _d.userInterfaceOptions;
-            const customDefinedIcons = (_e = userInterfaceOptions.customIcons) !== null && _e !== void 0 ? _e : [];
-            let customIcon = badge.Icon && 'name' in badge.Icon
-                ? api.userInterfaceApi.getCustomIconDefinition(badge.Icon.name)
-                : null;
-            if (customIcon) {
-                icon = customIcon;
-            }
-            this.unmountReactRoot = api.internalApi.getAdaptableInstance().renderReactRoot((0, Badge_1.Badge)({
+            this.unmountReactRoot = api.internalApi.getAdaptableInstance().renderReactRoot((0, renderWithAdaptableContext_1.renderWithAdaptableContext)((0, Badge_1.Badge)({
                 adaptableStyle: badge.Style,
                 children: formattedValue,
-                icon,
-                iconPosition: (_f = badge.IconPosition) !== null && _f !== void 0 ? _f : 'start',
-            }), this.eGui);
+                icon: badge.Icon,
+                iconPosition: (_d = badge.IconPosition) !== null && _d !== void 0 ? _d : 'start',
+            }), adaptable), this.eGui);
         }
         getGui() {
             return this.eGui;

package/src/agGrid/CheckboxRenderer.js

@@ -30,7 +30,7 @@ const getCheckboxRendererForColumn = (columnId, isColumnReadOnly, api) => {
     CheckboxRenderer.prototype.checkedHandler = function (e) {
         let checked = e.target.checked;
         this.params.node.setDataValue(columnId, checked);
-        api.styledColumnApi.fireCheckboxColumnClickedEvent(columnId, this.params.node.data, api.gridApi.getPrimaryKeyValueForRowNode(this.params.node), checked);
+        api.styledColumnApi.internalApi.fireCheckboxColumnClickedEvent(columnId, this.params.node.data, api.gridApi.getPrimaryKeyValueForRowNode(this.params.node), checked);
     };
     CheckboxRenderer.prototype.suppressEditEvent = function (event) {
         if (event.target === this.eGui) {

package/src/agGrid/agGridHelper.js

@@ -43,6 +43,7 @@ const GeneralConstants = tslib_1.__importStar(require("../Utilities/Constants/Ge
 const GeneralConstants_1 = require("../Utilities/Constants/GeneralConstants");
 const UIHelper_1 = tslib_1.__importDefault(require("../View/UIHelper"));
 const StyledColumnModule_1 = require("../Strategy/StyledColumnModule");
+const Fdc3Module_1 = require("../Strategy/Fdc3Module");
 const tinycolor = require('tinycolor2');
 /**
  * Adaptable AG Grid implementation is getting really big and unwieldy
@@ -104,6 +105,7 @@ class agGridHelper {
         modules.set(ModuleConstants.StatusBarModuleId, new StatusBarModule_1.StatusBarModule(api));
         modules.set(ModuleConstants.ChartingModuleId, new ChartingModule_1.ChartingModule(api));
         modules.set(ModuleConstants.StyledColumnModuleId, new StyledColumnModule_1.StyledColumnModule(api));
+        modules.set(ModuleConstants.Fdc3ModuleId, new Fdc3Module_1.Fdc3Module(api));
         return modules;
     }
     TrySetUpNodeIds(hasAutogeneratedPrimaryKey) {
@@ -494,6 +496,8 @@ class agGridHelper {
                     return 'Date';
                 case 'abColDefObject':
                     return 'Object';
+                case 'abColDefStringArray':
+                    return 'StringArray';
                 case 'abColDefNumberArray':
                     return 'NumberArray';
                 case 'abColDefTupleNumberArray':

package/src/agGrid/agGridMenuHelper.js

@@ -5,7 +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");
+const Icon_1 = require("../components/Icon");
 // tslint:disable-next-line: class-name
 class agGridMenuHelper {
     constructor(adaptable, gridOptions) {
@@ -168,11 +168,18 @@ class agGridMenuHelper {
         };
     }
     mapAdaptableIconToAgGridIcon(adaptableIcon, style) {
-        if ((0, AdaptableIconComponent_1.isAdaptableElementIcon)(adaptableIcon)) {
-            return adaptableIcon.element;
+        const icon = this.adaptable.api.userInterfaceApi.internalApi.prepareAdaptableIconDef(adaptableIcon);
+        if ((0, Icon_1.isAdaptableElementIcon)(icon)) {
+            let element = icon.element;
+            if (typeof element === 'string') {
+                return element;
+            }
+            // THe element neets to be cloned.
+            // when it is used in more than one plce the element is removed from the DOM
+            return element.cloneNode(true);
         }
         else {
-            return (0, icons_1.iconToString)(adaptableIcon, {
+            return (0, icons_1.iconToString)(icon, {
                 fill: 'var(--ab-color-text-on-primary)',
             });
         }

package/src/agGrid/attachAddaptableColumnTypes.d.ts

@@ -9,6 +9,7 @@ export declare const attachColumnTypes: (gridOptions: GridOptions) => {
     abColDefDate: import("@ag-grid-community/core").ColDef<any, any>;
     abColDefObject: import("@ag-grid-community/core").ColDef<any, any>;
     abColDefCustom: import("@ag-grid-community/core").ColDef<any, any>;
+    abColDefStringArray: import("@ag-grid-community/core").ColDef<any, any>;
     abColDefNumberArray: import("@ag-grid-community/core").ColDef<any, any>;
     abColDefTupleNumberArray: import("@ag-grid-community/core").ColDef<any, any>;
     abColDefObjectNumberArray: import("@ag-grid-community/core").ColDef<any, any>;

package/src/agGrid/attachAddaptableColumnTypes.js

@@ -3,7 +3,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.attachColumnTypes = void 0;
 const GeneralConstants_1 = require("../Utilities/Constants/GeneralConstants");
 const attachColumnTypes = (gridOptions) => {
-    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
+    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l;
     gridOptions.columnTypes = (_a = gridOptions.columnTypes) !== null && _a !== void 0 ? _a : {};
     return Object.assign(gridOptions.columnTypes, {
         [GeneralConstants_1.AB_SPECIAL_COLUMN]: {},
@@ -13,9 +13,10 @@ const attachColumnTypes = (gridOptions) => {
         abColDefDate: (_e = gridOptions.columnTypes.abColDefDate) !== null && _e !== void 0 ? _e : {},
         abColDefObject: (_f = gridOptions.columnTypes.abColDefObject) !== null && _f !== void 0 ? _f : {},
         abColDefCustom: (_g = gridOptions.columnTypes.abColDefCustom) !== null && _g !== void 0 ? _g : {},
-        abColDefNumberArray: (_h = gridOptions.columnTypes.abColDefNumberArray) !== null && _h !== void 0 ? _h : {},
-        abColDefTupleNumberArray: (_j = gridOptions.columnTypes.abColDefTupleNumberArray) !== null && _j !== void 0 ? _j : {},
-        abColDefObjectNumberArray: (_k = gridOptions.columnTypes.abColDefObjectNumberArray) !== null && _k !== void 0 ? _k : {},
+        abColDefStringArray: (_h = gridOptions.columnTypes.abColDefStringArray) !== null && _h !== void 0 ? _h : {},
+        abColDefNumberArray: (_j = gridOptions.columnTypes.abColDefNumberArray) !== null && _j !== void 0 ? _j : {},
+        abColDefTupleNumberArray: (_k = gridOptions.columnTypes.abColDefTupleNumberArray) !== null && _k !== void 0 ? _k : {},
+        abColDefObjectNumberArray: (_l = gridOptions.columnTypes.abColDefObjectNumberArray) !== null && _l !== void 0 ? _l : {},
     });
 };
 exports.attachColumnTypes = attachColumnTypes;

package/src/agGrid/editors/AdaptableNumberEditor/index.js

@@ -20,7 +20,7 @@ function getStartValue(params) {
         return '';
     }
     if (params.eventKey && isValidChar(params.eventKey)) {
-        return params.eventKey;
+        return Number(params.eventKey);
     }
     return params.value;
 }

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

@@ -0,0 +1,6 @@
+import * as React from 'react';
+export interface DrawerProps {
+    open: boolean;
+    onOpenChange?: (open: boolean) => void;
+}
+export declare const Drawer: React.FunctionComponent<React.PropsWithChildren<DrawerProps>>;