@adaptabletools/adaptable 16.0.6 → 16.0.8-canary.0

package/src/Utilities/Helpers/Helper.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.Helper = exports.clamp = exports.modeNumberArray = exports.medianNumberArray = exports.meanNumberArray = exports.sumNumberArray = exports.RoundNumberTo4dp = exports.RoundNumber = exports.IsInputNotNullOrEmpty = exports.IsInputNullOrEmpty = exports.ReturnItemCount = exports.copyToClipboard = exports.createDownloadedFile = exports.convertArrayToCsv = exports.arrayToKeyMap = exports.cloneObject = exports.getStringRepresentionFromKey = exports.objectNotExists = exports.objectExists = void 0;
+exports.Helper = exports.clamp = exports.modeNumberArray = exports.medianNumberArray = exports.meanNumberArray = exports.standardDeviationNumberArray = exports.sumNumberArray = exports.roundNumberTo4dp = exports.roundNumber = exports.isInputNotNullOrEmpty = exports.isInputNullOrEmpty = exports.returnItemCount = exports.copyToClipboard = exports.createDownloadedFile = exports.convertArrayToCsv = exports.arrayToKeyMap = exports.cloneObject = exports.getStringRepresentionFromKey = exports.objectNotExists = exports.objectExists = void 0;
 const StringExtensions_1 = require("../Extensions/StringExtensions");
 const AdaptableLogger_1 = require("../../agGrid/AdaptableLogger");
 function objectExists(item) {
@@ -114,14 +114,14 @@ function copyToClipboard(text) {
     AdaptableLogger_1.AdaptableLogger.consoleWarnBase('Copy not available on this computer.');
 }
 exports.copyToClipboard = copyToClipboard;
-function ReturnItemCount(items, itemName) {
+function returnItemCount(items, itemName) {
     if (items.length == 0) {
         return `No ${itemName}s`;
     }
     return items.length == 1 ? `1 ${itemName}` : `${items.length} ${itemName}s`;
 }
-exports.ReturnItemCount = ReturnItemCount;
-function IsInputNullOrEmpty(itemToCheck) {
+exports.returnItemCount = returnItemCount;
+function isInputNullOrEmpty(itemToCheck) {
     if (itemToCheck == 'Invalid Date ') {
         return true;
     }
@@ -136,12 +136,12 @@ function IsInputNullOrEmpty(itemToCheck) {
     }
     return itemToCheck == null;
 }
-exports.IsInputNullOrEmpty = IsInputNullOrEmpty;
-function IsInputNotNullOrEmpty(itemToCheck) {
-    return !IsInputNullOrEmpty(itemToCheck);
+exports.isInputNullOrEmpty = isInputNullOrEmpty;
+function isInputNotNullOrEmpty(itemToCheck) {
+    return !isInputNullOrEmpty(itemToCheck);
 }
-exports.IsInputNotNullOrEmpty = IsInputNotNullOrEmpty;
-function RoundNumber(numberToRound, decimalPlaces) {
+exports.isInputNotNullOrEmpty = isInputNotNullOrEmpty;
+function roundNumber(numberToRound, decimalPlaces) {
     switch (decimalPlaces) {
         case 1:
             return Math.round(numberToRound * 10) / 10;
@@ -157,23 +157,32 @@ function RoundNumber(numberToRound, decimalPlaces) {
             return Math.round(numberToRound * 1000000) / 1000000;
     }
 }
-exports.RoundNumber = RoundNumber;
-function RoundNumberTo4dp(numberToRound) {
-    return RoundNumber(numberToRound, 4);
+exports.roundNumber = roundNumber;
+function roundNumberTo4dp(numberToRound) {
+    return roundNumber(numberToRound, 4);
 }
-exports.RoundNumberTo4dp = RoundNumberTo4dp;
+exports.roundNumberTo4dp = roundNumberTo4dp;
 function sumNumberArray(numericValues) {
-    if (numericValues.length) {
-        let sum = numericValues.reduce(function (a, b) {
+    return numericValues.length
+        ? numericValues.reduce(function (a, b) {
             return a + b;
-        });
-        return sum;
+        })
+        : 0;
+}
+exports.sumNumberArray = sumNumberArray;
+function standardDeviationNumberArray(numericValues) {
+    if (numericValues.length) {
+        const count = numericValues.length;
+        const mean = sumNumberArray(numericValues) / count;
+        return Math.sqrt(sumNumberArray(numericValues.map((val) => {
+            return Math.pow(val - mean, 2);
+        })) / count);
     }
     else {
         return 0;
     }
 }
-exports.sumNumberArray = sumNumberArray;
+exports.standardDeviationNumberArray = standardDeviationNumberArray;
 function meanNumberArray(numericValues) {
     // dividing by 0 will return Infinity
     // arr must contain at least 1 element to use reduce
@@ -245,11 +254,12 @@ exports.Helper = {
     convertArrayToCsv,
     createDownloadedFile,
     copyToClipboard,
-    ReturnItemCount,
-    IsInputNullOrEmpty,
-    IsInputNotNullOrEmpty,
-    RoundNumber,
-    RoundNumberTo4dp,
+    returnItemCount,
+    isInputNullOrEmpty,
+    isInputNotNullOrEmpty,
+    roundNumber,
+    roundNumberTo4dp,
+    standardDeviationNumberArray,
     sumNumberArray,
     meanNumberArray,
     medianNumberArray,

package/src/Utilities/ObjectFactory.js

@@ -347,6 +347,7 @@ function CreateEmptyCellSummmary() {
         Max: undefined,
         Min: undefined,
         Count: undefined,
+        Std_Deviation: undefined,
         Only: undefined
     };
 }

package/src/View/AdaptableView.js

@@ -27,7 +27,7 @@ class AdaptableView extends React.Component {
             React.createElement(CommentPopup_1.CommentPopup, null),
             React.createElement(FloatingQuickSearch_1.QuickSearchDrawer, null),
             this.props.AdaptableApi.internalApi.getModuleService().isModuleAvailable('Dashboard') && (React.createElement(Dashboard_1.Dashboard, { api: this.props.AdaptableApi })),
-            React.createElement(AdaptableLoadingScreen_1.AdaptableLoadingScreen, { onClose: this.props.onCloseLoadingPopup, showLoadingScreen: this.props.PopupState.LoadingPopup.ShowLoadingPopup }),
+            this.props.AdaptableApi.optionsApi.getUserInterfaceOptions().showLoadingScreen && (React.createElement(AdaptableLoadingScreen_1.AdaptableLoadingScreen, { onClose: this.props.onCloseLoadingPopup, showLoadingScreen: this.props.PopupState.LoadingPopup.ShowLoadingPopup })),
             this.props.PopupState.PromptPopup.ShowPromptPopup && (React.createElement(AdaptablePopupPrompt_1.AdaptablePopupPrompt, { message: this.props.PopupState.PromptPopup.Message, header: this.props.PopupState.PromptPopup.Header, onClose: this.props.onClosePromptPopup, onConfirm: this.props.onConfirmPromptPopup, onConfirmActionCreator: this.props.PopupState.PromptPopup.ConfirmActionCreator, defaultValue: this.props.PopupState.PromptPopup.DefaultValue })),
             Boolean(this.props.PopupState.ConfirmationPopup.ShowConfirmationPopup) && (React.createElement(AdaptablePopupConfirmation_1.AdaptablePopupConfirmation, { header: this.props.PopupState.ConfirmationPopup.Header, messsage: this.props.PopupState.ConfirmationPopup.Msg, showPopup: this.props.PopupState.ConfirmationPopup.ShowConfirmationPopup, cancelButtonText: this.props.PopupState.ConfirmationPopup.CancelButtonText, confirmButtonText: this.props.PopupState.ConfirmationPopup.ConfirmButtonText, onCancel: this.props.onCancelConfirmationPopup, onConfirm: this.props.onConfirmConfirmationPopup, showInputBox: this.props.PopupState.ConfirmationPopup.ShowInputBox, messageType: this.props.PopupState.ConfirmationPopup.MessageType, api: this.props.AdaptableApi })),
             Boolean(this.props.PopupState.ScreenPopup.ShowScreenPopup) && (React.createElement(AdaptablePopup_1.AdaptablePopup, { componentName: this.props.PopupState.ScreenPopup.ComponentName, componentModule: this.props.PopupState.ScreenPopup.ComponentModule, onHide: this.props.onCloseScreenPopup, api: this.props.AdaptableApi, onClearParams: () => this.props.onClearPopupParams(), moduleParams: this.props.PopupState.ScreenPopup.Params, moduleProps: this.props.PopupState.ScreenPopup.PopupProps })),

package/src/View/Alert/ActiveAlertsPanelItemLabel.js

@@ -4,7 +4,7 @@ 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 icons_1 = require("../../components/icons");
 const UIHelper_1 = tslib_1.__importDefault(require("../UIHelper"));
 const ActiveAlertsPanelItemLabel = (props) => {
     const iconColor = UIHelper_1.default.getColorByMessageType(props.data.alertDefinition.MessageType);
@@ -13,7 +13,7 @@ const ActiveAlertsPanelItemLabel = (props) => {
         fill: iconColor,
     };
     const iconName = UIHelper_1.default.getGlyphByMessageType(props.data.alertDefinition.MessageType);
-    const IconCmp = icons_1.default[iconName];
+    const IconCmp = icons_1.allIcons[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),

package/src/View/Alert/AlertsPanel.js

@@ -8,7 +8,7 @@ const ButtonPreviewDelete_1 = tslib_1.__importDefault(require("../Components/But
 const PanelWithButton_1 = require("../Components/Panels/PanelWithButton");
 const StringExtensions_1 = require("../../Utilities/Extensions/StringExtensions");
 const rebass_1 = require("rebass");
-const icons_1 = tslib_1.__importDefault(require("../../components/icons"));
+const icons_1 = require("../../components/icons");
 const ListGroupItem_1 = tslib_1.__importDefault(require("../../components/List/ListGroupItem"));
 const ListGroup_1 = tslib_1.__importDefault(require("../../components/List/ListGroup"));
 const SimpleButton_1 = tslib_1.__importDefault(require("../../components/SimpleButton"));
@@ -26,7 +26,7 @@ class AlertsPanel extends React.Component {
                 fill: textColor,
             };
             const iconName = UIHelper_1.UIHelper.getGlyphByMessageType(alert.alertDefinition.MessageType);
-            const IconCmp = icons_1.default[iconName];
+            const IconCmp = icons_1.allIcons[iconName];
             const icon = IconCmp ? React.createElement(IconCmp, null) : null;
             let alertText = (React.createElement("div", { key: alert.Uuid, style: { maxWidth: '600px', width: '100%' } },
                 React.createElement(rebass_1.Flex, { alignItems: "center", width: "100%" },

package/src/View/Components/Badge/index.d.ts

@@ -4,5 +4,6 @@ export interface BadgeProps {
     adaptableStyle: AdaptableStyle;
     icon?: AdaptableIcon;
     iconPosition?: 'start' | 'end' | 'Start' | 'End';
+    gap?: number;
 }
 export declare const Badge: React.FunctionComponent<React.PropsWithChildren<BadgeProps>>;

package/src/View/Components/Badge/index.js

@@ -10,7 +10,7 @@ const Badge = (props) => {
     const preparedBadgePosition = iconPosition.toLowerCase();
     const icon = iconProps && React.createElement(AdaptableIconComponent_1.AdaptableIconComponent, { icon: iconProps });
     const style = (0, StyleHelper_1.toStyle)(props.adaptableStyle);
-    return (React.createElement("div", { className: "ab-Badge", style: style },
+    return (React.createElement("div", { className: "ab-Badge", style: Object.assign(Object.assign({}, style), { marginRight: props.gap }) },
         preparedBadgePosition === 'start' && icon,
         props.children,
         preparedBadgePosition === 'end' && icon));

package/src/View/Components/Panels/PanelWithButton.js

@@ -6,7 +6,7 @@ const React = tslib_1.__importStar(require("react"));
 const SimpleButton_1 = tslib_1.__importDefault(require("../../../components/SimpleButton"));
 const Panel_1 = tslib_1.__importDefault(require("../../../components/Panel"));
 const rebass_1 = require("rebass");
-const icons_1 = tslib_1.__importDefault(require("../../../components/icons"));
+const icons_1 = require("../../../components/icons");
 const ButtonInfo_1 = require("../Buttons/ButtonInfo");
 //We cannot destructure this.props using the react way in typescript which is a real pain as you
 //need to transfer props individually as a consequence
@@ -14,7 +14,7 @@ const ButtonInfo_1 = require("../Buttons/ButtonInfo");
 class PanelWithButton extends React.Component {
     render() {
         let { buttonContent } = this.props;
-        const IconCmp = icons_1.default[this.props.glyphicon];
+        const IconCmp = icons_1.allIcons[this.props.glyphicon];
         let header = (React.createElement(rebass_1.Flex, { alignItems: "center", width: "100%" },
             React.createElement(rebass_1.Flex, { alignItems: "center" },
                 this.props.glyphicon != null && (IconCmp ? React.createElement(IconCmp, null) : null),

package/src/View/Components/Panels/PanelWithImage.js

@@ -6,14 +6,14 @@ const React = tslib_1.__importStar(require("react"));
 const styled_components_1 = require("styled-components");
 const Panel_1 = tslib_1.__importDefault(require("../../../components/Panel"));
 const rebass_1 = require("rebass");
-const icons_1 = tslib_1.__importDefault(require("../../../components/icons"));
+const icons_1 = require("../../../components/icons");
 const ButtonInfo_1 = require("../Buttons/ButtonInfo");
 //We cannot destructure this.props using the react way in typescript which is a real pain as you
 //need to transfer props individually as a consequence
 //let { buttonContent, ...other } = this.props
 class PanelWithImageCmp extends React.Component {
     render() {
-        const IconCmp = icons_1.default[(this.props.icon || this.props.glyphicon)];
+        const IconCmp = icons_1.allIcons[(this.props.icon || this.props.glyphicon)];
         const headerStyle = {};
         if (this.props.headerColor) {
             headerStyle.color = this.props.headerColor;

package/src/View/DataChangeHistory/DataChangeHistoryGrid.js

@@ -107,7 +107,6 @@ const buildAdaptableOptions = (mainAdaptableInstance, gridOptions, adaptableCont
         };
     }
     const options = {
-        _gridOptions: gridOptions,
         primaryKey: 'primaryKey',
         licenseKey: mainAdaptableOptions.licenseKey,
         userName: `${mainAdaptableOptions.userName}`,

package/src/View/PlusMinus/PlusMinusSummary.js

@@ -23,7 +23,7 @@ class PlusMinusSummaryComponent extends React.Component {
     render() {
         let moduleSummaries = [];
         // title row
-        let titleRow = (React.createElement(ModuleHeader_1.ModuleHeader, { key: this.props.moduleInfo.FriendlyName, moduleInfo: this.props.moduleInfo, moduleSummary: Helper_1.Helper.ReturnItemCount(this.props.PlusMinusNudges.filter((item) => this.props.api.scopeApi.isColumnInScopeColumns(this.props.summarisedColumn, item.Scope)), this.props.moduleInfo.FriendlyName), onNew: () => this.onNew(), newButtonTooltip: 'Plus / Minus Rule', accessLevel: this.props.accessLevel }));
+        let titleRow = (React.createElement(ModuleHeader_1.ModuleHeader, { key: this.props.moduleInfo.FriendlyName, moduleInfo: this.props.moduleInfo, moduleSummary: Helper_1.Helper.returnItemCount(this.props.PlusMinusNudges.filter((item) => this.props.api.scopeApi.isColumnInScopeColumns(this.props.summarisedColumn, item.Scope)), this.props.moduleInfo.FriendlyName), onNew: () => this.onNew(), newButtonTooltip: 'Plus / Minus Rule', accessLevel: this.props.accessLevel }));
         moduleSummaries.push(titleRow);
         // existing items
         this.props.PlusMinusNudges.map((item, index) => {

package/src/View/StyledColumn/Wizard/StyledColumnBadgeSection.js

@@ -23,11 +23,10 @@ const BadgeEditor = (props) => {
     var _a, _b;
     const { api } = (0, OnePageAdaptableWizard_1.useOnePageAdaptableWizardContext)();
     const { badge, columnId, onChange } = props;
+    // badges evaluate predicate per value
     const predicateDefs = api.styledColumnApi.internalApi.getBadgePredicateDefsForColumn(columnId);
-    let previewValue = 'Hello world';
-    if (api.columnApi.getColumnDataTypeForColumnId(columnId) === 'Number') {
-        previewValue = '12345';
-    }
+    const dataType = api.columnApi.getColumnDataTypeForColumnId(columnId);
+    const previewValue = dataType === 'Number' || dataType == 'NumberArray' ? '12345' : 'Hello world';
     return (React.createElement(rebass_1.Flex, { className: "ab-Badge-Definition-Editor", mb: 15, p: 3 },
         React.createElement(rebass_1.Box, { flex: 1 },
             React.createElement(FormLayout_1.default, null,
@@ -42,11 +41,12 @@ const BadgeEditor = (props) => {
                                 } }),
                         ] },
                         React.createElement(SimpleButton_1.default, { variant: "raised" }, "Edit Badge Style"))),
+                !api.columnApi.hasArrayDataType(columnId) && ( // dont show predicates for arrays
                 React.createElement(FormLayout_1.FormRow, { label: 'Predicate' }, columnId ? (React.createElement(React.Fragment, null,
                     React.createElement(HelpBlock_1.default, { fontSize: 2, mb: 1, mt: 2 }, "Create (optional) Rule for when the Badge is displayed; if no Rule provided Badge will always display (unless overriden by another Rule)"),
                     React.createElement(PredicateEditor_1.PredicateEditor, { columnId: columnId, predicate: badge.Predicate, predicateDefs: predicateDefs, placeholder: "No Predicate Selected", onChange: (predicate) => {
                             onChange(Object.assign(Object.assign({}, badge), { Predicate: predicate }));
-                        }, onClear: () => onChange(Object.assign(Object.assign({}, badge), { Predicate: undefined })) }))) : (React.createElement(ErrorBox_1.default, null, "Select a column first"))),
+                        }, onClear: () => onChange(Object.assign(Object.assign({}, badge), { Predicate: undefined })) }))) : (React.createElement(ErrorBox_1.default, null, "Select a column first")))),
                 React.createElement(FormLayout_1.FormRow, { label: "Icon" },
                     React.createElement(HelpBlock_1.default, { fontSize: 2, mb: 1, mt: 2 }, "Select (optional) Icon (and Icon position) to display in the Badge"),
                     ' ',

package/src/View/StyledColumn/Wizard/StyledColumnWizardColumnSection.js

@@ -36,7 +36,7 @@ const StyledColumnWizardColumnSection = (props) => {
             sortableColumns = api.columnApi.getNumericArrayColumns();
         }
         else if (data.BadgeStyle) {
-            sortableColumns = [...api.columnApi.getNumericColumns(), ...api.columnApi.getStringColumns()];
+            sortableColumns = [...api.columnApi.getNumericColumns(), ...api.columnApi.getStringColumns(), ...api.columnApi.getStringArrayColumns(), ...api.columnApi.getNumberArrayColumns()];
         }
         else {
             sortableColumns = api.columnApi.getNumericColumns();

package/src/agGrid/Adaptable.d.ts

@@ -453,7 +453,7 @@ export declare class AdaptableNoCodeWizard implements IAdaptableNoCodeWizard {
     /**
      * @param adaptableOptions
      */
-    constructor(adaptableOptions: AdaptableOptions, extraOptions?: AdaptableNoCodeWizardOptions);
+    constructor(adaptableOptions: AdaptableOptions, extraOptions?: AdaptableNoCodeWizardOptions, agGridOptons?: AgGridConfig);
     render(container?: HTMLElement | null): void;
 }
 export {};

package/src/agGrid/Adaptable.js

@@ -299,14 +299,23 @@ class Adaptable {
     static async initInternal(adaptableOptions, runtimeConfig) {
         let promise = null;
         if (Array.isArray(adaptableOptions.plugins)) {
+            const agGridOptions = {
+                gridOptions: runtimeConfig.gridOptions,
+                modules: runtimeConfig.modules,
+            };
             // do this
             for (let plugin of adaptableOptions.plugins) {
                 promise =
                     promise && promise.then
                         ? promise.then(() => {
-                            return plugin.beforeInit(adaptableOptions, runtimeConfig.gridOptions);
+                            return plugin.beforeInit(adaptableOptions, agGridOptions);
                         })
-                        : plugin.beforeInit(adaptableOptions, runtimeConfig.gridOptions);
+                        : plugin.beforeInit(adaptableOptions, agGridOptions);
+            }
+            // if gridOptions changed, we need to update the runtimeConfig
+            if (agGridOptions.gridOptions !== runtimeConfig.gridOptions) {
+                // This allows plugins to modify
+                runtimeConfig.gridOptions = agGridOptions.gridOptions;
             }
             // instead of
             // if (Array.isArray(adaptableOptions.plugins)) {
@@ -317,11 +326,6 @@ class Adaptable {
             // because this await for of introduces too much delay
         }
         const doInit = (ab) => {
-            // required for NoCode
-            // it should go away with https://github.com/AdaptableTools/adaptable/issues/2278
-            if (adaptableOptions._gridOptions) {
-                runtimeConfig.gridOptions = adaptableOptions._gridOptions;
-            }
             return ab.init(adaptableOptions, runtimeConfig, true).then((api) => {
                 if (Array.isArray(adaptableOptions.plugins)) {
                     adaptableOptions.plugins.forEach((plugin) => {
@@ -394,7 +398,6 @@ class Adaptable {
         this.gridOptions = this.runtimeConfig.gridOptions;
         // we create AdaptableOptions by merging the values provided by the user with the defaults (where no value has been set)
         this.adaptableOptions = AdaptableHelper_1.default.assignAdaptableOptions(adaptableOptions);
-        this.adaptableOptions._gridOptions = this.gridOptions;
         if (this.hasAutogeneratedPrimaryKey()) {
             this.logger
                 .warn(`Autogenerated primary key (adaptableOptions.autogeneratedPrimaryKey = TRUE) should be used only as a last resort,
@@ -5221,15 +5224,14 @@ class AdaptableNoCodeWizard {
     /**
      * @param adaptableOptions
      */
-    constructor(adaptableOptions, extraOptions = {}) {
-        var _a;
+    constructor(adaptableOptions, extraOptions = {}, agGridOptons) {
         const defaultInit = async ({ gridOptions, adaptableOptions, agGridModules, }) => {
             return await Adaptable.init(adaptableOptions, { gridOptions, modules: agGridModules });
         };
         this.adaptableOptions = adaptableOptions;
         this.init = extraOptions.onInit || defaultInit;
         this.extraOptions = extraOptions;
-        this.agGridModules = core_1.ModuleRegistry.__getRegisteredModules((_a = this.adaptableOptions._gridOptions) === null || _a === void 0 ? void 0 : _a.gridId);
+        this.agGridModules = core_1.ModuleRegistry.__getRegisteredModules(agGridOptons === null || agGridOptons === void 0 ? void 0 : agGridOptons.gridOptions.gridId);
         this.render();
     }
     render(container) {
@@ -5256,7 +5258,6 @@ class AdaptableNoCodeWizard {
         const unmount = (0, renderReactRoot_1.renderReactRoot)(React.createElement(AdaptableWizardView_1.default, Object.assign(Object.assign({ adaptableOptions: this.adaptableOptions }, this.extraOptions), { onInit: (adaptableOptions, gridOptions) => {
                 container.classList.remove('adaptable--in-wizard');
                 unmount();
-                adaptableOptions._gridOptions = gridOptions;
                 this.init({
                     adaptableOptions,
                     gridOptions: gridOptions,

package/src/agGrid/BadgeRenderer.js

@@ -1,8 +1,10 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.getBadgeRendererForColumn = void 0;
+const tslib_1 = require("tslib");
 const Badge_1 = require("../View/Components/Badge");
 const renderWithAdaptableContext_1 = require("../View/renderWithAdaptableContext");
+const React = tslib_1.__importStar(require("react"));
 const getBadgeRendererForColumn = (styledColumn, abColumn, api) => {
     if (!styledColumn.BadgeStyle) {
         return;
@@ -13,11 +15,58 @@ const getBadgeRendererForColumn = (styledColumn, abColumn, api) => {
             return adaptable;
         }
         init(params) {
-            var _a, _b, _c, _d;
+            var _a, _b, _c;
             const adaptable = this.getAdaptableInstance(params);
             const adapatableApi = adaptable.api;
             this.eGui = document.createElement('div');
             this.eGui.className = 'ab-Badge__wrapper';
+            const includeGrouped = Boolean(styledColumn.IncludeGroupedRows);
+            const isGrouped = params.node.group;
+            if ((includeGrouped === false && isGrouped)) {
+                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 : '';
+                this.eGui.innerHTML = formattedValue;
+                return;
+            }
+            if (['NumberArray', 'StringArray'].includes(abColumn.dataType)) {
+                this.renderArrayValues(params, adapatableApi);
+            }
+            else {
+                this.renderSingularValues(params, adapatableApi);
+            }
+        }
+        renderArrayValues(params, adapatableApi) {
+            var _a, _b, _c, _d, _e, _f;
+            let badgesConfig = [];
+            if (!Array.isArray(params.value) || params.value.length === 0) {
+                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 : '';
+                this.eGui.innerHTML = formattedValue;
+                return;
+            }
+            for (const value of params.value) {
+                const formattedValue = (_f = (_e = (_d = params.formatValue) === null || _d === void 0 ? void 0 : _d.call(params, value)) !== null && _e !== void 0 ? _e : value) !== null && _f !== void 0 ? _f : '';
+                const predicateDefHandlerContext = {
+                    value: 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 isNullValue = formattedValue === '' || formattedValue === null || formattedValue === undefined;
+                if (!isNullValue && badge) {
+                    badgesConfig.push({
+                        badge: Object.assign({}, badge),
+                        value: formattedValue,
+                    });
+                }
+            }
+            this.renderBadges(badgesConfig, api, params);
+        }
+        renderSingularValues(params, adapatableApi) {
+            var _a, _b, _c;
             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 predicateDefHandlerContext = {
                 value: params.value,
@@ -30,25 +79,34 @@ const getBadgeRendererForColumn = (styledColumn, abColumn, api) => {
                 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;
             if (
-            // grouped but do not incluide
-            (includeGrouped === false && isGrouped) ||
-                // empty values
-                isNullValue ||
+            // empty values
+            isNullValue ||
                 // no badge
                 !badge) {
                 this.eGui.innerHTML = formattedValue;
                 return;
             }
-            this.unmountReactRoot = api.internalApi.getAdaptableInstance().renderReactRoot((0, renderWithAdaptableContext_1.renderWithAdaptableContext)((0, Badge_1.Badge)({
-                adaptableStyle: badge.Style,
-                children: formattedValue,
-                icon: badge.Icon,
-                iconPosition: (_d = badge.IconPosition) !== null && _d !== void 0 ? _d : 'start',
-            }), adaptable), this.eGui);
+            this.renderBadges([{
+                    badge,
+                    value: formattedValue,
+                }], api, params);
+        }
+        renderBadges(config, api, params) {
+            const adaptable = this.getAdaptableInstance(params);
+            const badges = config.map(({ badge, value }, index) => {
+                var _a;
+                return React.createElement(Badge_1.Badge, {
+                    key: index,
+                    adaptableStyle: badge.Style,
+                    children: value,
+                    icon: badge.Icon,
+                    iconPosition: (_a = badge.IconPosition) !== null && _a !== void 0 ? _a : 'start',
+                    gap: 5
+                });
+            });
+            this.unmountReactRoot = api.internalApi.getAdaptableInstance().renderReactRoot((0, renderWithAdaptableContext_1.renderWithAdaptableContext)(React.createElement(React.Fragment, { children: badges }), adaptable), this.eGui);
         }
         getGui() {
             return this.eGui;

package/src/components/Icon/index.js

@@ -3,7 +3,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.isAdaptableIcon = exports.isAdaptableElementIcon = exports.isAdaptableCustomIcon = exports.isAdaptableSystemIcon = exports.IconComponent = void 0;
 const tslib_1 = require("tslib");
 const React = tslib_1.__importStar(require("react"));
-const icons_1 = tslib_1.__importStar(require("../icons"));
+const icons_1 = require("../icons");
 const join_1 = tslib_1.__importDefault(require("../utils/join"));
 const react_1 = require("react");
 const IconComponent = (props) => {
@@ -38,7 +38,7 @@ const IconComponent = (props) => {
             }
         };
     }, [icon]);
-    if ((0, exports.isAdaptableSystemIcon)(icon) && icon.name in icons_1.default) {
+    if ((0, exports.isAdaptableSystemIcon)(icon) && icon.name in icons_1.allIcons) {
         return (React.createElement(icons_1.Icon, { name: icon.name, size: icon.size, style: icon.style, className: className }));
     }
     if ((0, exports.isAdaptableCustomIcon)(icon)) {
@@ -68,6 +68,6 @@ const isAdaptableElementIcon = (icon) => {
 };
 exports.isAdaptableElementIcon = isAdaptableElementIcon;
 const isAdaptableIcon = (icon) => {
-    return ((0, exports.isAdaptableSystemIcon)(icon) || (0, exports.isAdaptableCustomIcon)(icon) || (0, exports.isAdaptableElementIcon)(icon));
+    return (0, exports.isAdaptableSystemIcon)(icon) || (0, exports.isAdaptableCustomIcon)(icon) || (0, exports.isAdaptableElementIcon)(icon);
 };
 exports.isAdaptableIcon = isAdaptableIcon;

package/src/components/IconSelector/IconSelector.js

@@ -6,7 +6,7 @@ const react_1 = tslib_1.__importDefault(require("react"));
 const rebass_1 = require("rebass");
 const AdaptableInput_1 = tslib_1.__importDefault(require("../../View/Components/AdaptableInput"));
 const Icon_1 = require("../Icon");
-const icons_1 = tslib_1.__importStar(require("../icons"));
+const icons_1 = require("../icons");
 const OverlayTrigger_1 = tslib_1.__importDefault(require("../OverlayTrigger"));
 const SimpleButton_1 = tslib_1.__importDefault(require("../SimpleButton"));
 const IconButton = (props) => {
@@ -15,12 +15,12 @@ const IconButton = (props) => {
 const IconSelector = (props) => {
     var _a, _b, _c;
     const [query, setQuery] = react_1.default.useState('');
-    const allIcons = Object.keys(icons_1.default);
+    const allIconsNames = Object.keys(icons_1.allIcons);
     const filteredIcons = query
-        ? allIcons.filter((iconName) => {
+        ? allIconsNames.filter((iconName) => {
             return iconName.toLowerCase().includes(query.toLowerCase());
         })
-        : allIcons;
+        : allIconsNames;
     const iconsElements = filteredIcons.map((iconName) => {
         return (react_1.default.createElement(rebass_1.Flex, { key: iconName },
             react_1.default.createElement(IconButton, { onClick: () => props.onChange(iconName), active: iconName === props.value, icon: iconName })));
@@ -38,7 +38,7 @@ const IconSelector = (props) => {
             " ",
             customIconsElements)));
     let value = 'No Icon Selected';
-    if (props.value in icons_1.default) {
+    if (props.value in icons_1.allIcons) {
         value = (react_1.default.createElement(icons_1.Icon, { style: { display: 'inline-block' }, name: props.value }));
     }
     else {

package/src/components/SimpleButton/index.js

@@ -5,7 +5,7 @@ const tslib_1 = require("tslib");
 const React = tslib_1.__importStar(require("react"));
 const rebass_1 = require("rebass");
 const join_1 = tslib_1.__importDefault(require("../utils/join"));
-const icons_1 = tslib_1.__importDefault(require("../icons"));
+const icons_1 = require("../icons");
 const Tooltip_1 = tslib_1.__importDefault(require("../Tooltip"));
 const theme_1 = tslib_1.__importDefault(require("../../theme"));
 const Icon_1 = require("../Icon");
@@ -17,7 +17,7 @@ const SimpleButton = React.forwardRef((props, theRef) => {
     if ((0, Icon_1.isAdaptableSystemIcon)(icon)) {
         adaptableSystemIcon = icon;
     }
-    if (typeof icon === 'string' && icons_1.default[icon]) {
+    if (typeof icon === 'string' && icons_1.allIcons[icon]) {
         adaptableSystemIcon = { name: icon };
     }
     if (adaptableSystemIcon) {

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

@@ -2,7 +2,7 @@ import * as React from 'react';
 import { CSSProperties } from 'react';
 import { IconProps } from './DefaultIcon';
 import { AdaptableCustomIcon, AdaptableSystemIcon, AdaptableSystemIconName } from '../../PredefinedConfig/Common/AdaptableIcon';
-declare const allIcons: Record<AdaptableSystemIconName, React.FunctionComponent<IconProps>>;
+export declare const allIcons: Record<AdaptableSystemIconName, React.FunctionComponent<IconProps>>;
 export declare const Icon: ({ name, style, className, tabIndex, ...props }: {
     style?: React.CSSProperties;
     name: AdaptableSystemIconName;
@@ -12,4 +12,3 @@ export declare const Icon: ({ name, style, className, tabIndex, ...props }: {
     props?: React.SVGProps<SVGElement>;
 }) => JSX.Element;
 export declare const iconToString: (icon: AdaptableSystemIcon | AdaptableCustomIcon, style?: CSSProperties) => string;
-export default allIcons;

package/src/components/icons/index.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.iconToString = exports.Icon = void 0;
+exports.iconToString = exports.Icon = exports.allIcons = void 0;
 const tslib_1 = require("tslib");
 const React = tslib_1.__importStar(require("react"));
 const ReactDOMServer = tslib_1.__importStar(require("react-dom/server"));
@@ -155,7 +155,7 @@ const order_1 = tslib_1.__importDefault(require("./order"));
 const contact_1 = tslib_1.__importDefault(require("./contact"));
 const Icon_1 = require("../Icon");
 const AdaptableLogger_1 = require("../../agGrid/AdaptableLogger");
-const allIcons = {
+exports.allIcons = {
     search: query_1.default,
     grid: layout_1.default,
     cells: cell_summary_1.default,
@@ -307,13 +307,13 @@ const allIcons = {
     order: order_1.default,
     contact: contact_1.default,
 };
-Object.keys(allIcons).forEach((name) => {
-    const ReactCmp = allIcons[name];
-    allIcons[name] = (props) => React.createElement(ReactCmp, Object.assign({}, props, { name: name }));
+Object.keys(exports.allIcons).forEach((name) => {
+    const ReactCmp = exports.allIcons[name];
+    exports.allIcons[name] = (props) => React.createElement(ReactCmp, Object.assign({}, props, { name: name }));
 });
 const Icon = (_a) => {
     var { name, style, className, tabIndex } = _a, props = tslib_1.__rest(_a, ["name", "style", "className", "tabIndex"]);
-    const IconCmp = (allIcons[name] || null);
+    const IconCmp = (exports.allIcons[name] || null);
     if (!IconCmp) {
         AdaptableLogger_1.AdaptableLogger.consoleWarnBase('NO icon found for ' + name);
         return React.createElement("svg", { height: "17", width: "17" });
@@ -328,4 +328,3 @@ const iconToString = (icon, style) => {
     return ReactDOMServer.renderToString(React.createElement(Icon_1.IconComponent, { icon: Object.assign(Object.assign({}, icon), { style: Object.assign(Object.assign({}, icon.style), style) }) }));
 };
 exports.iconToString = iconToString;
-exports.default = allIcons;