@adaptabletools/adaptable 12.1.2 → 12.1.5

package/src/View/AdaptableWizardView/AdaptableConfigurationDialog/GridOptionsForm.js

@@ -13,13 +13,6 @@ const GridOptionsForm = (props) => {
     return (React.createElement(React.Fragment, null,
         React.createElement(HelpBlock_1.default, null, "Grid Options"),
         React.createElement(FormLayout_1.default, { margin: 2, columns: [{ name: 'children' }, { name: 'label', style: { textAlign: 'start' } }] },
-            React.createElement(FormLayout_1.FormRow, { label: "Show ToolPanel" },
-                React.createElement(CheckBox_1.CheckBox, { checked: gridOptions.sideBar == true, onChange: (addSideBar) => {
-                        abOptions = Object.assign({}, abOptions);
-                        abOptions.gridOptions = Object.assign({}, abOptions.gridOptions);
-                        abOptions.gridOptions.sideBar = addSideBar;
-                        props.onChangeadaptableOptions(abOptions);
-                    } })),
             React.createElement(FormLayout_1.FormRow, { label: "Enable Range Selection" },
                 React.createElement(CheckBox_1.CheckBox, { checked: gridOptions.enableRangeSelection, onChange: (enableRangeSelection) => {
                         abOptions = Object.assign({}, abOptions);

package/src/View/AdaptableWizardView/AdaptableConfigurationDialog/UIOptions/UIOptionsActionColumnsForm.d.ts

@@ -0,0 +1,6 @@
+import * as React from 'react';
+import { AdaptableOptions } from '../../../../types';
+export declare const UIOptionsActionColumnsForm: React.FunctionComponent<{
+    abOptions: AdaptableOptions;
+    onChange: (abOptions: AdaptableOptions) => void;
+}>;

package/src/View/AdaptableWizardView/AdaptableConfigurationDialog/UIOptions/UIOptionsActionColumnsForm.js

@@ -0,0 +1,33 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.UIOptionsActionColumnsForm = void 0;
+const tslib_1 = require("tslib");
+const React = tslib_1.__importStar(require("react"));
+const rebass_1 = require("rebass");
+const CheckBox_1 = require("../../../../components/CheckBox");
+const HelpBlock_1 = tslib_1.__importDefault(require("../../../../components/HelpBlock"));
+const UIOptionsActionColumnsForm = (props) => {
+    var _a, _b, _c;
+    const options = [
+        { value: 'clone', label: 'Clone' },
+        { value: 'create', label: 'Create' },
+        { value: 'edit', label: 'Edit' },
+        { value: 'delete', label: 'Delete' },
+    ];
+    const actionRowButtons = (_c = (_b = (_a = props.abOptions) === null || _a === void 0 ? void 0 : _a.actionOptions) === null || _b === void 0 ? void 0 : _b.actionRowButtons) !== null && _c !== void 0 ? _c : [];
+    const handleCheckChange = (type, checked) => {
+        var _a;
+        let newActionRowButtons = actionRowButtons;
+        if (checked) {
+            newActionRowButtons = [...newActionRowButtons, type];
+        }
+        else {
+            newActionRowButtons = newActionRowButtons.filter((item) => item !== type);
+        }
+        props.onChange(Object.assign(Object.assign({}, props.abOptions), { actionOptions: Object.assign(Object.assign({}, (_a = props.abOptions) === null || _a === void 0 ? void 0 : _a.actionOptions), { actionRowButtons: newActionRowButtons }) }));
+    };
+    return (React.createElement(rebass_1.Box, null,
+        React.createElement(HelpBlock_1.default, null, "Row Action Buttons"),
+        React.createElement(rebass_1.Flex, { width: "100%", m: 2 }, options.map((option) => (React.createElement(CheckBox_1.CheckBox, { mr: 3, key: option.value, checked: actionRowButtons.some((buttonName) => buttonName === option.value), onChange: (check) => handleCheckChange(option.value, check) }, option.label))))));
+};
+exports.UIOptionsActionColumnsForm = UIOptionsActionColumnsForm;

package/src/View/AdaptableWizardView/AdaptableConfigurationDialog/UIOptions/UIOptionsSidebarForm.d.ts

@@ -0,0 +1,6 @@
+import * as React from 'react';
+import { AdaptableOptions } from '../../../../../types';
+export declare const UIOptionsSidebarForm: React.FunctionComponent<{
+    abOptions: AdaptableOptions;
+    onChange: (abOptions: AdaptableOptions) => void;
+}>;

package/src/View/AdaptableWizardView/AdaptableConfigurationDialog/UIOptions/UIOptionsSidebarForm.js

@@ -0,0 +1,82 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.UIOptionsSidebarForm = void 0;
+const tslib_1 = require("tslib");
+const React = tslib_1.__importStar(require("react"));
+const rebass_1 = require("rebass");
+const CheckBox_1 = require("../../../../components/CheckBox");
+const DropdownButton_1 = tslib_1.__importDefault(require("../../../../components/DropdownButton"));
+const FormLayout_1 = tslib_1.__importStar(require("../../../../components/FormLayout"));
+const HelpBlock_1 = tslib_1.__importDefault(require("../../../../components/HelpBlock"));
+const StringExtensions_1 = tslib_1.__importDefault(require("../../../../Utilities/Extensions/StringExtensions"));
+const ALL_SIDEBAR_OPTIONS = ['columns', 'filters', 'adaptable'];
+const prepareSidebarDef = (sideBar) => {
+    sideBar = sideBar;
+    if (typeof sideBar === 'boolean') {
+        sideBar = {
+            toolPanels: ALL_SIDEBAR_OPTIONS,
+        };
+    }
+    if (typeof sideBar === 'string') {
+        sideBar = {
+            toolPanels: [sideBar],
+        };
+    }
+    if (Array.isArray(sideBar)) {
+        sideBar = {
+            toolPanels: sideBar,
+        };
+    }
+    return sideBar !== null && sideBar !== void 0 ? sideBar : { toolPanels: [] };
+};
+const isSidebarChecked = (sideBar, panelName) => {
+    var _a;
+    return ((_a = sideBar === null || sideBar === void 0 ? void 0 : sideBar.toolPanels) !== null && _a !== void 0 ? _a : []).some((panel) => {
+        const panelId = typeof panel === 'string' ? panel : panel.id;
+        return panelId === panelName;
+    });
+};
+const UIOptionsSidebarForm = (props) => {
+    var _a;
+    const { abOptions, onChange } = props;
+    const { gridOptions } = props.abOptions;
+    const sideBar = prepareSidebarDef(gridOptions.sideBar);
+    const renderSidebarCheckbox = (sidebarName) => {
+        return (React.createElement(CheckBox_1.CheckBox, { mr: 3, key: sidebarName, checked: isSidebarChecked(sideBar, sidebarName), onChange: (check) => handleToolpanelsChange(sidebarName, check) }, StringExtensions_1.default.Humanize(sidebarName)));
+    };
+    const handleToolpanelsChange = (panelName, check) => {
+        var _a, _b;
+        let newPanels = (_a = sideBar === null || sideBar === void 0 ? void 0 : sideBar.toolPanels) !== null && _a !== void 0 ? _a : [];
+        if (check) {
+            newPanels = [...newPanels, panelName];
+        }
+        else {
+            newPanels = newPanels.filter((panel) => {
+                const panelId = typeof panel === 'string' ? panel : panel.id;
+                return panelId !== panelName;
+            });
+        }
+        let hiddenByDefault = (_b = sideBar.hiddenByDefault) !== null && _b !== void 0 ? _b : false;
+        if (newPanels.length === 0) {
+            hiddenByDefault = true;
+        }
+        const newAbOptions = Object.assign(Object.assign({}, abOptions), { gridOptions: Object.assign(Object.assign({}, abOptions.gridOptions), { sideBar: Object.assign(Object.assign({}, sideBar), { toolPanels: newPanels, hiddenByDefault }) }) });
+        props.onChange(newAbOptions);
+    };
+    let sidebarPosition = (_a = sideBar === null || sideBar === void 0 ? void 0 : sideBar.position) !== null && _a !== void 0 ? _a : 'right';
+    const handleSidebarPositionChange = (position) => {
+        const newAbOptions = Object.assign(Object.assign({}, abOptions), { gridOptions: Object.assign(Object.assign({}, abOptions.gridOptions), { sideBar: Object.assign(Object.assign({}, sideBar), { position }) }) });
+        props.onChange(newAbOptions);
+    };
+    return (React.createElement(rebass_1.Box, null,
+        React.createElement(HelpBlock_1.default, null, "Tool Panels"),
+        React.createElement(rebass_1.Box, { m: 2 },
+            React.createElement(rebass_1.Flex, { mb: 2 }, ALL_SIDEBAR_OPTIONS.map(renderSidebarCheckbox)),
+            React.createElement(FormLayout_1.default, { columns: [{ name: 'label' }, { name: 'children' }] },
+                React.createElement(FormLayout_1.FormRow, { label: "Position" },
+                    React.createElement(DropdownButton_1.default, { columns: ['label'], items: [
+                            { label: 'Left', onClick: () => handleSidebarPositionChange('left') },
+                            { label: 'Right', onClick: () => handleSidebarPositionChange('right') },
+                        ] }, sidebarPosition === 'left' ? 'Left' : 'Right'))))));
+};
+exports.UIOptionsSidebarForm = UIOptionsSidebarForm;

package/src/View/AdaptableWizardView/AdaptableConfigurationDialog/UIOptions/UIOptionsStatusbarForm.d.ts

@@ -0,0 +1,6 @@
+import * as React from 'react';
+import { AdaptableOptions } from '../../../../types';
+export declare const UIOptionsStatusbarForm: React.FunctionComponent<{
+    abOptions: AdaptableOptions;
+    onChange: (abOptions: AdaptableOptions) => void;
+}>;

package/src/View/AdaptableWizardView/AdaptableConfigurationDialog/UIOptions/UIOptionsStatusbarForm.js

@@ -0,0 +1,109 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.UIOptionsStatusbarForm = void 0;
+const tslib_1 = require("tslib");
+const React = tslib_1.__importStar(require("react"));
+const rebass_1 = require("rebass");
+const ModuleManager_1 = require("../../../../components/DragAndDropContext/ModuleManager");
+const HelpBlock_1 = tslib_1.__importDefault(require("../../../../components/HelpBlock"));
+const FormLayout_1 = tslib_1.__importStar(require("../../../../components/FormLayout"));
+const Input_1 = tslib_1.__importDefault(require("../../../../components/Input"));
+const SimpleButton_1 = tslib_1.__importDefault(require("../../../../components/SimpleButton"));
+const DropdownButton_1 = tslib_1.__importDefault(require("../../../../components/DropdownButton"));
+const UIOptionsStatusbarForm = (props) => {
+    var _a, _b, _c, _d;
+    const allPanels = (_c = (_b = (_a = props.abOptions.gridOptions) === null || _a === void 0 ? void 0 : _a.statusBar) === null || _b === void 0 ? void 0 : _b.statusPanels) !== null && _c !== void 0 ? _c : [];
+    const panelIdtoPanel = (panelsIds, align) => panelsIds.map((panelId) => {
+        const previousItem = allPanels.find((panel) => panel.key === panelId || panel.statusPanel === panelId);
+        if (previousItem) {
+            return Object.assign(Object.assign({}, previousItem), { align });
+        }
+        else {
+            const newPanel = {
+                statusPanel: panelId,
+                align,
+            };
+            return newPanel;
+        }
+    });
+    const leftPanels = allPanels.filter((panel) => !(panel === null || panel === void 0 ? void 0 : panel.align) || panel.align === 'left');
+    const centerPanels = allPanels.filter((panel) => panel.align === 'center');
+    const rightPanels = allPanels.filter((panel) => panel.align === 'right');
+    const handleTabChange = (tabs) => {
+        const leftPanels = panelIdtoPanel(tabs[0].Items, 'left');
+        const centerPanels = panelIdtoPanel(tabs[1].Items, 'center');
+        const rightPanels = panelIdtoPanel(tabs[2].Items, 'right');
+        const newStatusbarPanels = [...leftPanels, ...centerPanels, ...rightPanels];
+        props.onChange(Object.assign(Object.assign({}, props.abOptions), { gridOptions: Object.assign(Object.assign({}, props.abOptions.gridOptions), { statusBar: Object.assign(Object.assign({}, props.abOptions.gridOptions.statusBar), { statusPanels: newStatusbarPanels }) }) }));
+    };
+    const disabled = false;
+    const panelToTabItemId = (panel) => { var _a; return (_a = panel.key) !== null && _a !== void 0 ? _a : panel.statusPanel; };
+    const tabs = [
+        {
+            Name: 'Left',
+            Items: leftPanels.map(panelToTabItemId),
+        },
+        {
+            Name: 'Center',
+            Items: centerPanels.map(panelToTabItemId),
+        },
+        {
+            Name: 'Right',
+            Items: rightPanels.map(panelToTabItemId),
+        },
+    ];
+    const allOptions = [
+        { Id: 'agTotalRowCountComponent', Title: 'Row Count' },
+        { Id: 'agTotalAndFilteredRowCountComponent', Title: 'Totals and Filtered Row Count' },
+        { Id: 'agFilteredRowCountComponent', Title: 'Filtered Row Count' },
+        { Id: 'agSelectedRowCountComponent', Title: 'Selected Row Count' },
+        { Id: 'agAggregationComponent', Title: 'Aggregation' },
+    ];
+    const availableItems = allOptions;
+    const [adaptablePanelTitle, setAdaptablePanelTitle] = React.useState('');
+    const [adaptablePanelAlign, setAdaptablePanelAlign] = React.useState('left');
+    const isAdaptablePanelTitleAvailable = !allPanels.some((panel) => panel.key === adaptablePanelTitle);
+    const alignOptions = [
+        { onClick: () => setAdaptablePanelAlign('left'), value: 'left', label: 'Left' },
+        { onClick: () => setAdaptablePanelAlign('center'), value: 'center', label: 'Center' },
+        { onClick: () => setAdaptablePanelAlign('right'), value: 'right', label: 'Right' },
+    ];
+    const handleNewAdaptablePanel = () => {
+        const newAdaptablePanel = {
+            statusPanel: 'AdaptableStatusPanel',
+            align: adaptablePanelAlign,
+            key: adaptablePanelTitle,
+        };
+        const newStatusbarPanels = [...allPanels, newAdaptablePanel];
+        setAdaptablePanelTitle('');
+        setAdaptablePanelAlign('left');
+        props.onChange(Object.assign(Object.assign({}, props.abOptions), { gridOptions: Object.assign(Object.assign({}, props.abOptions.gridOptions), { statusBar: Object.assign(Object.assign({}, props.abOptions.gridOptions.statusBar), { statusPanels: newStatusbarPanels }) }) }));
+    };
+    return (React.createElement(rebass_1.Box, null,
+        React.createElement(HelpBlock_1.default, null, "Status Bar"),
+        React.createElement(rebass_1.Box, { p: 2 },
+            React.createElement(rebass_1.Box, { style: {
+                    border: '1px solid var(--ab-color-primarydark)',
+                    borderRadius: 'var(--ab__border-radius)',
+                    marginBottom: 'var(--ab-space-2)',
+                    paddingBottom: 'var(--ab-space-1)',
+                    backgroundColor: 'var(--ab-color-defaultbackground)',
+                    padding: 'var(--ab-space-2)',
+                } },
+                React.createElement(rebass_1.Box, { as: "b" }, "Create Adaptable Statusbar Panel"),
+                React.createElement(FormLayout_1.default, { mt: 2 },
+                    React.createElement(FormLayout_1.FormRow, { label: "Panel Name" },
+                        React.createElement(Input_1.default, { value: adaptablePanelTitle, placehoder: 'Adaptable Panel Name', onChange: (event) => setAdaptablePanelTitle(event.target.value) })),
+                    React.createElement(FormLayout_1.FormRow, { label: "Align" },
+                        React.createElement(DropdownButton_1.default, { columns: ['label'], items: alignOptions }, (_d = alignOptions.find((option) => option.value === adaptablePanelAlign)) === null || _d === void 0 ? void 0 : _d.label)),
+                    React.createElement(FormLayout_1.FormRow, { label: "" },
+                        React.createElement(SimpleButton_1.default, { disabled: !isAdaptablePanelTitleAvailable, onClick: handleNewAdaptablePanel, icon: "plus", variant: "raised" }, "Add"),
+                        !isAdaptablePanelTitleAvailable && (React.createElement(rebass_1.Box, { mt: 2, color: "var(--ab-color-error)" }, "Adaptable panel name must be unique."))))),
+            React.createElement(ModuleManager_1.ModuleManager, { permittedActions: {
+                    createTab: false,
+                    dragAndDropTab: false,
+                    deleteTab: false,
+                    editTabName: false,
+                }, onTabsChange: handleTabChange, disabled: disabled, tabs: tabs, availableItems: availableItems, tabsTitle: 'Status Bar Panels', unusedPanelTitle: "Ag Grid Status Bar Panels", dragItemText: "Drag into a Status Bar Panel below" }))));
+};
+exports.UIOptionsStatusbarForm = UIOptionsStatusbarForm;

package/src/View/AdaptableWizardView/AdaptableConfigurationDialog/UIOptions/UiOptionsForm.d.ts

@@ -0,0 +1,8 @@
+import * as React from 'react';
+import { AdaptableOptions } from '../../../../types';
+interface UIElementsOptionsProps {
+    adaptableOptions: AdaptableOptions;
+    onChangeadaptableOptions: (adaptableOptions: AdaptableOptions) => void;
+}
+export declare const UIElementsForm: React.FunctionComponent<UIElementsOptionsProps>;
+export {};

package/src/View/AdaptableWizardView/AdaptableConfigurationDialog/UIOptions/UiOptionsForm.js

@@ -0,0 +1,16 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.UIElementsForm = void 0;
+const tslib_1 = require("tslib");
+const React = tslib_1.__importStar(require("react"));
+const UIOptionsActionColumnsForm_1 = require("./UIOptionsActionColumnsForm");
+const UIOptionsSidebarForm_1 = require("./UIOptionsSidebarForm");
+const UIOptionsStatusbarForm_1 = require("./UIOptionsStatusbarForm");
+const UIElementsForm = (props) => {
+    let abOptions = props.adaptableOptions;
+    return (React.createElement(React.Fragment, null,
+        React.createElement(UIOptionsActionColumnsForm_1.UIOptionsActionColumnsForm, { abOptions: abOptions, onChange: props.onChangeadaptableOptions }),
+        React.createElement(UIOptionsSidebarForm_1.UIOptionsSidebarForm, { abOptions: abOptions, onChange: props.onChangeadaptableOptions }),
+        React.createElement(UIOptionsStatusbarForm_1.UIOptionsStatusbarForm, { abOptions: abOptions, onChange: props.onChangeadaptableOptions })));
+};
+exports.UIElementsForm = UIElementsForm;

package/src/View/AdaptableWizardView/Wizard.js

@@ -41,6 +41,7 @@ const Wizard = (props) => {
     const [droppableKey, setDroppableKey] = react_1.useState(Date.now());
     const [isDataLoading, setIsDataLoading] = react_1.useState(false);
     const handleDataSource = (array, file) => {
+        var _a;
         const dataSourceInfo = (props.prepareData || helper_1.prepareDataSource)(array, file);
         try {
             Utils_1.validDataSource(dataSourceInfo);
@@ -51,7 +52,7 @@ const Wizard = (props) => {
                 payload: `Invalid adaptable configuration - ${err}`,
             });
         }
-        const gridOptions = helper_1.prepareGridOptions(dataSourceInfo);
+        const gridOptions = helper_1.prepareGridOptions(dataSourceInfo, (_a = props.adaptableOptions) === null || _a === void 0 ? void 0 : _a.gridOptions);
         const adaptableOptions = Object.assign({}, props.adaptableOptions);
         adaptableOptions.adaptableId = adaptableOptions.adaptableId || (file ? file.name : '');
         adaptableOptions.gridOptions = gridOptions;

package/src/View/AdaptableWizardView/helper.d.ts

@@ -16,4 +16,4 @@ export interface WizardDataSourceInfo {
  */
 export declare const prepareDataSource: (json: any, _file?: File) => WizardDataSourceInfo;
 export declare const getColTypeFromValue: (value: any) => string;
-export declare const prepareGridOptions: (dataSourceInfo: WizardDataSourceInfo) => GridOptions;
+export declare const prepareGridOptions: (dataSourceInfo: WizardDataSourceInfo, defaultGridOptions: Partial<GridOptions>) => GridOptions;

package/src/View/AdaptableWizardView/helper.js

@@ -65,7 +65,7 @@ const getColTypeFromValue = (value) => {
     return columnType;
 };
 exports.getColTypeFromValue = getColTypeFromValue;
-const prepareGridOptions = (dataSourceInfo) => {
+const prepareGridOptions = (dataSourceInfo, defaultGridOptions) => {
     const firstItem = dataSourceInfo.data[0];
     const columnDefs = dataSourceInfo.columns.map((columnName) => {
         const firstItemValue = firstItem[columnName];
@@ -81,16 +81,9 @@ const prepareGridOptions = (dataSourceInfo) => {
             editable: true,
         };
     });
-    const gridOptions = {
-        defaultColDef: {
+    const gridOptions = Object.assign(Object.assign({}, defaultGridOptions), { defaultColDef: {
             floatingFilter: true,
-        },
-        rowData: dataSourceInfo.data,
-        columnDefs,
-        enableRangeSelection: true,
-        rowSelection: 'multiple',
-        rowHeight: 30,
-    };
+        }, rowData: dataSourceInfo.data, columnDefs, enableRangeSelection: true, rowSelection: 'multiple', rowHeight: 30 });
     return gridOptions;
 };
 exports.prepareGridOptions = prepareGridOptions;

package/src/View/Alert/Wizard/AlertBehaviourWizardSection.d.ts

@@ -4,6 +4,7 @@ import { AdaptableApi } from '../../../types';
 declare type AlertBehaviourWizardSectionProps = {
     onChange: (data: AlertDefinition) => void;
 };
+export declare const renderAlertBehaviourWizardSummary: (alertDefinition: AlertDefinition) => JSX.Element;
 export declare const renderAlertBehaviourSummary: (alert: AlertDefinition, api: AdaptableApi, allowWrap?: boolean) => JSX.Element;
 export declare const AlertBehaviourWizardSection: (props: AlertBehaviourWizardSectionProps) => JSX.Element;
 export {};

package/src/View/Alert/Wizard/AlertBehaviourWizardSection.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.AlertBehaviourWizardSection = exports.renderAlertBehaviourSummary = void 0;
+exports.AlertBehaviourWizardSection = exports.renderAlertBehaviourSummary = exports.renderAlertBehaviourWizardSummary = void 0;
 const tslib_1 = require("tslib");
 const React = tslib_1.__importStar(require("react"));
 const Tabs_1 = require("../../../components/Tabs");
@@ -47,7 +47,11 @@ const HighlightStyle = (props) => {
                         props.onChange(style);
                     } }))))));
 };
-// both used in wizard and list view
+const renderAlertBehaviourWizardSummary = (alertDefinition) => {
+    const { api } = OnePageAdaptableWizard_1.useOnePageAdaptableWizardContext();
+    return exports.renderAlertBehaviourSummary(alertDefinition, api);
+};
+exports.renderAlertBehaviourWizardSummary = renderAlertBehaviourWizardSummary;
 const renderAlertBehaviourSummary = (alert, api, allowWrap = false) => {
     const { AlertProperties = {} } = alert;
     const values = [

package/src/View/Alert/Wizard/AlertWizard.js

@@ -158,7 +158,7 @@ const AlertWizard = (props) => {
                 title: behaviourSpelling,
                 render: () => (React.createElement(rebass_1.Box, { padding: 2 },
                     React.createElement(AlertBehaviourWizardSection_1.AlertBehaviourWizardSection, { onChange: setAlertDefinition }))),
-                renderSummary: AlertBehaviourWizardSection_1.renderAlertBehaviourSummary,
+                renderSummary: AlertBehaviourWizardSection_1.renderAlertBehaviourWizardSummary,
             },
             {
                 details: 'Select Alert tags',

package/src/View/Components/FilterForm/FilterForm.js

@@ -210,7 +210,8 @@ class FilterFormComponent extends React.Component {
         if (editedColumnFilter.Predicate === undefined ||
             (editedColumnFilter.Predicate.PredicateId === 'Values' &&
                 editedColumnFilter.Predicate.Inputs.length === 0)) {
-            this.props.onClearColumnFilter(editedColumnFilter);
+            this.props.api.filterApi.clearColumnFilterByColumn(editedColumnFilter.ColumnId);
+            this.onCloseForm();
         }
         else {
             if (this.props.api.internalApi.getAdaptableOptions().filterOptions.autoApplyFilter) {

package/src/View/Components/RangesComponent.js

@@ -147,7 +147,7 @@ class RangesComponent extends React.Component {
     addRange() {
         const lastRange = this.state.ranges[this.state.ranges.length - 1];
         this.state.ranges.push({
-            Min: lastRange.Max,
+            Min: lastRange.Max == 'Col-Max' ? 0 : lastRange.Max,
             Max: lastRange.Max,
             Color: UIHelper_1.getHexForName(UIHelper_1.GRAY),
         }),

package/src/View/FormatColumn/Wizard/FormatColumnFormatWizardSection.d.ts

@@ -10,7 +10,7 @@ export interface FormatColumnFormatWizardState {
     DisplayFormat: AdaptableFormat;
     NumericFormat?: 'Percent' | 'Thousand' | 'Million' | 'Dollar' | 'Sterling' | undefined;
 }
-export declare const getFormatColumnFormatSummaryValue: (data: FormatColumn, api: AdaptableApi) => string;
-export declare const renderFormatColumnFormatSummary: (data: FormatColumn, api: AdaptableApi) => JSX.Element;
+export declare const getFormatColumnFormatSummaryValue: (data: FormatColumn) => string;
+export declare const renderFormatColumnFormatSummary: (data: FormatColumn) => JSX.Element;
 export declare const getFormatDisplayTypeForScope: (scope: AdaptableScope, api: AdaptableApi) => 'Number' | 'Date' | 'String' | undefined;
 export declare const FormatColumnFormatWizardSection: (props: FormatColumnFormatWizardSectionProps) => JSX.Element;

package/src/View/FormatColumn/Wizard/FormatColumnFormatWizardSection.js

@@ -78,7 +78,7 @@ const DateFormatPresets = [
     'yyyyMMdd',
     'HH:mm:ss',
 ];
-const getFormatColumnFormatSummaryValue = (data, api) => {
+const getFormatColumnFormatSummaryValue = (data) => {
     let content = 'N/A';
     if (!data.DisplayFormat) {
         content = 'N/A';
@@ -112,8 +112,8 @@ const renderCustomFormatter = (data, customFormatter, setFormatOption) => {
                 setFormatOption('CustomDisplayFormats', newCustomFormats);
             } })));
 };
-const renderFormatColumnFormatSummary = (data, api) => {
-    return React.createElement(Tag_1.Tag, null, exports.getFormatColumnFormatSummaryValue(data, api));
+const renderFormatColumnFormatSummary = (data) => {
+    return React.createElement(Tag_1.Tag, null, exports.getFormatColumnFormatSummaryValue(data));
 };
 exports.renderFormatColumnFormatSummary = renderFormatColumnFormatSummary;
 const getFormatDisplayTypeForScope = (scope, api) => {

package/src/View/FormatColumn/Wizard/FormatColumnStyleWizardSection.d.ts

@@ -5,6 +5,7 @@ export declare const isFormatColumnStyleValid: (data: FormatColumn, api: Adaptab
 declare type FormatColumnStyleWizardSectionProps = {
     onChange: (data: FormatColumn) => void;
 };
+export declare const renderFormatColumnStyleWizardSummary: (data: FormatColumn) => any;
 export declare const renderFormatColumnStyleSummary: (data: FormatColumn, api: AdaptableApi) => any;
 export declare function FormatColumnStyleWizardSection(props: FormatColumnStyleWizardSectionProps): JSX.Element;
 export {};

package/src/View/FormatColumn/Wizard/FormatColumnStyleWizardSection.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.FormatColumnStyleWizardSection = exports.renderFormatColumnStyleSummary = exports.isFormatColumnStyleValid = void 0;
+exports.FormatColumnStyleWizardSection = exports.renderFormatColumnStyleSummary = exports.renderFormatColumnStyleWizardSummary = exports.isFormatColumnStyleValid = void 0;
 const tslib_1 = require("tslib");
 const React = tslib_1.__importStar(require("react"));
 const rebass_1 = require("rebass");
@@ -76,6 +76,11 @@ const getColumnComparison = (columnComparison, api) => {
                 ForeColor: columnComparison.Color,
             } })));
 };
+const renderFormatColumnStyleWizardSummary = (data) => {
+    const { api } = OnePageAdaptableWizard_1.useOnePageAdaptableWizardContext();
+    return exports.renderFormatColumnStyleSummary(data, api);
+};
+exports.renderFormatColumnStyleWizardSummary = renderFormatColumnStyleWizardSummary;
 const renderFormatColumnStyleSummary = (data, api) => {
     if (data.ColumnStyle) {
         if (data.ColumnStyle.CheckBoxStyle) {

package/src/View/FormatColumn/Wizard/FormatColumnWizard.js

@@ -117,7 +117,7 @@ function FormatColumnWizard(props) {
                 title: 'Style',
                 details: 'Format Column Style',
                 isValid: FormatColumnStyleWizardSection_1.isFormatColumnStyleValid,
-                renderSummary: FormatColumnStyleWizardSection_1.renderFormatColumnStyleSummary,
+                renderSummary: FormatColumnStyleWizardSection_1.renderFormatColumnStyleWizardSummary,
                 render: () => {
                     return (React.createElement(rebass_1.Box, { padding: 2 },
                         React.createElement(FormatColumnStyleWizardSection_1.FormatColumnStyleWizardSection, { onChange: setFormatColumn })));
@@ -125,7 +125,7 @@ function FormatColumnWizard(props) {
             },
             {
                 title: 'Display Format',
-                renderSummary: (data) => FormatColumnFormatWizardSection_1.renderFormatColumnFormatSummary(data, api),
+                renderSummary: (data) => FormatColumnFormatWizardSection_1.renderFormatColumnFormatSummary(data),
                 render: () => {
                     return React.createElement(FormatColumnFormatWizardSection_1.FormatColumnFormatWizardSection, { onChange: setFormatColumn });
                 },

package/src/View/Layout/Wizard/LayoutWizard.js

@@ -26,14 +26,21 @@ const LayoutWizard = (props) => {
     const initialLayout = (_a = props.data) !== null && _a !== void 0 ? _a : (_b = props.popupParams) === null || _b === void 0 ? void 0 : _b.value;
     const [layout, setLayout] = react_1.useState(() => {
         var _a;
+        let preparedLayout = null;
         if (initialLayout) {
-            const preparedLayout = Helper_1.cloneObject(initialLayout);
+            preparedLayout = Helper_1.cloneObject(initialLayout);
             if (((_a = props === null || props === void 0 ? void 0 : props.popupParams) === null || _a === void 0 ? void 0 : _a.action) === 'Clone') {
                 preparedLayout.Name = '';
             }
-            return preparedLayout;
         }
-        return ObjectFactory_1.default.CreateEmptyLayout({ Name: '' });
+        else {
+            preparedLayout = ObjectFactory_1.default.CreateEmptyLayout({ Name: '' });
+        }
+        if (preparedLayout.SuppressAggFuncInHeader === undefined) {
+            preparedLayout.SuppressAggFuncInHeader =
+                !!adaptable.api.internalApi.getAgGridInstance().suppressAggFuncInHeader;
+        }
+        return preparedLayout;
     });
     const handleFinish = () => {
         var _a;
@@ -117,7 +124,7 @@ const LayoutWizard = (props) => {
             },
             {
                 title: 'Filters',
-                details: 'Column Filters',
+                details: 'View Column Filters',
                 renderSummary: () => React.createElement(FilterSection_1.FilterSectionSummary, null),
                 render: () => (React.createElement(rebass_1.Box, { p: 2, style: { height: '100%' } },
                     React.createElement(FilterSection_1.FilterSection, { onChange: (newLayout) => setLayout(newLayout) }))),

package/src/View/Layout/Wizard/sections/AggregationsSection.js

@@ -58,7 +58,7 @@ const AggregationsSection = (props) => {
     const allColumns = adaptable.api.columnApi.getColumns();
     const sortedAggregableColumns = React.useMemo(() => {
         var _a, _b;
-        return sortWithOrder_1.sortWithOrderArray(allAggregableColumns.map((col) => col.columnId), (_b = Object.keys((_a = layout.AggregationColumns) !== null && _a !== void 0 ? _a : {})) !== null && _b !== void 0 ? _b : [], { sortUnorderedItems: true }).map((colId) => adaptable.api.columnApi.getColumnFromId(colId));
+        return sortWithOrder_1.sortWithOrderArray(allAggregableColumns.map((col) => col.columnId), (_b = Object.keys((_a = layout.AggregationColumns) !== null && _a !== void 0 ? _a : {})) !== null && _b !== void 0 ? _b : [], { sortUnorderedItems: false }).map((colId) => adaptable.api.columnApi.getColumnFromId(colId));
     }, [layout, allAggregableColumns]);
     const handleColumnsSelectionChange = React.useCallback((columnIds) => {
         props.onChange(Object.assign(Object.assign({}, layout), { AggregationColumns: columnIds.reduce((acc, colId) => {

package/src/View/Layout/Wizard/sections/ColumnsSection.js

@@ -18,19 +18,23 @@ const ValueSelector_1 = require("../../../Components/ValueSelector");
 const OnePageAdaptableWizard_1 = require("../../../Wizard/OnePageAdaptableWizard");
 const ColumnLabels_1 = require("../LayoutEditor/ColumnLabels");
 const Utilities_1 = require("./Utilities");
-const lodash_1 = require("lodash");
 const icons_1 = require("../../../../components/icons");
 const CheckBox_1 = require("../../../../components/CheckBox");
+const Helper_1 = require("../../../../Utilities/Helpers/Helper");
 const PropertyOrderText = (props) => (React.createElement(rebass_1.Text, { fontWeight: 600, fontSize: 2 }, props.children));
 const ColumnsSectionSummary = () => {
     const adaptable = AdaptableContext_1.useAdaptable();
     const { data: layout } = OnePageAdaptableWizard_1.useOnePageAdaptableWizardContext();
     const rowHeight = 40;
     const headerHeight = 40;
-    const tableHeight = headerHeight + lodash_1.clamp(rowHeight * layout.Columns.length, 100, 360);
+    const tableHeight = headerHeight + Helper_1.clamp(rowHeight * layout.Columns.length, 100, 360);
     const data = React.useMemo(() => {
         return layout.Columns.map((columnId) => {
             var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l;
+            if (adaptable.api.columnApi.isAutoPivotColumn(columnId) ||
+                adaptable.api.columnApi.isAutoRowGroupColumn(columnId)) {
+                return null;
+            }
             const friendlyName = adaptable.api.columnApi.getFriendlyNameFromColumnId(columnId);
             const header = (_b = (_a = layout.ColumnHeadersMap) === null || _a === void 0 ? void 0 : _a[columnId]) !== null && _b !== void 0 ? _b : '';
             const columnWidth = (_c = layout.ColumnWidthMap) === null || _c === void 0 ? void 0 : _c[columnId];
@@ -57,7 +61,7 @@ const ColumnsSectionSummary = () => {
                 grouping,
                 filter,
             };
-        });
+        }).filter(Boolean);
     }, [layout]);
     const columns = React.useMemo(() => {
         return {
@@ -187,7 +191,7 @@ const ColumnsSection = (props) => {
     const { data: layout } = OnePageAdaptableWizard_1.useOnePageAdaptableWizardContext();
     const allColumns = adaptable.api.columnApi.getColumns();
     const sortedColumns = React.useMemo(() => {
-        return sortWithOrder_1.sortWithOrderArray(allColumns.map((col) => col.columnId), layout.Columns, { sortUnorderedItems: true }).map((colId) => adaptable.api.columnApi.getColumnFromId(colId));
+        return sortWithOrder_1.sortWithOrderArray(allColumns.map((col) => col.columnId), layout.Columns, { sortUnorderedItems: false }).map((colId) => adaptable.api.columnApi.getColumnFromId(colId));
     }, [layout, allColumns]);
     const handlePinChange = (columnId, pinning) => {
         props.onChange(Object.assign(Object.assign({}, layout), { PinnedColumnsMap: Object.assign(Object.assign({}, layout.PinnedColumnsMap), { [columnId]: pinning }) }));

package/src/View/Layout/Wizard/sections/PivotColumnsSection.js

@@ -12,9 +12,10 @@ const ValueSelector_1 = require("../../../Components/ValueSelector");
 const OnePageAdaptableWizard_1 = require("../../../Wizard/OnePageAdaptableWizard");
 const Utilities_1 = require("./Utilities");
 const PivotColumnsSectionSummary = () => {
+    var _a;
     const adaptable = AdaptableContext_1.useAdaptable();
     const { data: layout } = OnePageAdaptableWizard_1.useOnePageAdaptableWizardContext();
-    return (React.createElement(rebass_1.Box, { p: 2, style: { borderRadius: 'var(--ab__border-radius)' }, backgroundColor: "var(--ab-color-defaultbackground)" }, layout.PivotColumns.length ? (layout.PivotColumns.map((columnId) => (React.createElement(Tag_1.Tag, { mr: 1, key: columnId }, adaptable.api.columnApi.getFriendlyNameFromColumnId(columnId))))) : (React.createElement(Tag_1.Tag, null, "No Column Pivoting"))));
+    return (React.createElement(rebass_1.Box, { p: 2, style: { borderRadius: 'var(--ab__border-radius)' }, backgroundColor: "var(--ab-color-defaultbackground)" }, ((_a = layout.PivotColumns) === null || _a === void 0 ? void 0 : _a.length) ? (layout.PivotColumns.map((columnId) => (React.createElement(Tag_1.Tag, { mr: 1, key: columnId }, adaptable.api.columnApi.getFriendlyNameFromColumnId(columnId))))) : (React.createElement(Tag_1.Tag, null, "No Column Pivoting"))));
 };
 exports.PivotColumnsSectionSummary = PivotColumnsSectionSummary;
 const PivotColumnsSection = (props) => {
@@ -24,7 +25,7 @@ const PivotColumnsSection = (props) => {
     const allPivotColumns = adaptable.api.columnApi.getPivotableColumns();
     const sortedPivotColumns = React.useMemo(() => {
         var _a;
-        return sortWithOrder_1.sortWithOrderArray(allPivotColumns.map((col) => col.columnId), (_a = layout.PivotColumns) !== null && _a !== void 0 ? _a : [], { sortUnorderedItems: true }).map((colId) => adaptable.api.columnApi.getColumnFromId(colId));
+        return sortWithOrder_1.sortWithOrderArray(allPivotColumns.map((col) => col.columnId), (_a = layout.PivotColumns) !== null && _a !== void 0 ? _a : [], { sortUnorderedItems: false }).map((colId) => adaptable.api.columnApi.getColumnFromId(colId));
     }, [layout, allPivotColumns]);
     const handleColumnsChange = (columnIds) => {
         props.onChange(Object.assign(Object.assign({}, layout), { PivotColumns: columnIds }));

package/src/View/Layout/Wizard/sections/RowGroupingSection.js

@@ -26,7 +26,7 @@ const RowGroupingSection = (props) => {
     const allGroupableColumns = adaptable.api.columnApi.getGroupableColumns();
     const sortedGroupableColumns = React.useMemo(() => {
         var _a;
-        return sortWithOrder_1.sortWithOrderArray(allGroupableColumns.map((col) => col.columnId), (_a = layout.RowGroupedColumns) !== null && _a !== void 0 ? _a : [], { sortUnorderedItems: true }).map((colId) => adaptable.api.columnApi.getColumnFromId(colId));
+        return sortWithOrder_1.sortWithOrderArray(allGroupableColumns.map((col) => col.columnId), (_a = layout.RowGroupedColumns) !== null && _a !== void 0 ? _a : [], { sortUnorderedItems: false }).map((colId) => adaptable.api.columnApi.getColumnFromId(colId));
     }, [layout, allGroupableColumns]);
     const handleColumnsChange = (columnIds) => {
         props.onChange(Object.assign(Object.assign({}, layout), { RowGroupedColumns: columnIds }));

package/src/View/Layout/Wizard/sections/SettingsSection.js

@@ -17,8 +17,8 @@ const SettingsSectionSummary = () => {
             "Layout Name: ",
             layout.Name),
         React.createElement(Tag_1.Tag, { mr: 2 },
-            "Pivot Layout: ",
-            layout.EnablePivot ? 'Yes' : 'No'),
+            "Layout Grid Type: ",
+            layout.EnablePivot ? 'Pivot' : 'Table'),
         React.createElement(Tag_1.Tag, { mr: 2 },
             "Suppress Aggregation Function in Header: ",
             layout.SuppressAggFuncInHeader ? 'Yes' : 'No')));