@adaptabletools/adaptable 15.3.2 → 15.3.3-canary.1

package/src/View/Components/Buttons/ButtonClose.js

@@ -6,7 +6,7 @@ const React = tslib_1.__importStar(require("react"));
 const SimpleButton_1 = tslib_1.__importDefault(require("../../../components/SimpleButton"));
 class ButtonClose extends React.Component {
     render() {
-        return (React.createElement(SimpleButton_1.default, Object.assign({ "data-name": "close", tooltip: "Close", iconSize: 20, icon: "clear" }, this.props, { variant: "text" })));
+        return (React.createElement(SimpleButton_1.default, Object.assign({ "data-name": "close", tooltip: "Close", iconSize: 20, icon: "close" }, this.props, { variant: "text" })));
     }
 }
 exports.ButtonClose = ButtonClose;

package/src/View/Components/Buttons/ButtonConfigure.js

@@ -6,7 +6,7 @@ const React = tslib_1.__importStar(require("react"));
 const SimpleButton_1 = tslib_1.__importDefault(require("../../../components/SimpleButton"));
 class ButtonConfigure extends React.Component {
     render() {
-        return (React.createElement(SimpleButton_1.default, Object.assign({ "data-name": "configure", tooltip: "Configure", iconSize: 18, icon: "build" }, this.props, { variant: "text" })));
+        return (React.createElement(SimpleButton_1.default, Object.assign({ "data-name": "configure", tooltip: "Configure", iconSize: 18, icon: "spanner" }, this.props, { variant: "text" })));
     }
 }
 exports.ButtonConfigure = ButtonConfigure;

package/src/View/Components/Buttons/ButtonDelete.js

@@ -10,7 +10,7 @@ class ButtonDeleteComponent extends React.Component {
     render() {
         var _a, _b;
         const _c = this.props, { onConfirmWarning, ConfirmAction, ConfirmationMsg, ConfirmationTitle, onClickAction } = _c, props = tslib_1.__rest(_c, ["onConfirmWarning", "ConfirmAction", "ConfirmationMsg", "ConfirmationTitle", "onClickAction"]);
-        return (React.createElement(SimpleButton_1.default, Object.assign({ "data-name": "delete", tooltip: (_a = props.tooltip) !== null && _a !== void 0 ? _a : 'Delete', variant: "text", icon: "trash", iconSize: (_b = props.iconSize) !== null && _b !== void 0 ? _b : 24 }, props, { onClick: () => this.onClick() })));
+        return (React.createElement(SimpleButton_1.default, Object.assign({ "data-name": "delete", tooltip: (_a = props.tooltip) !== null && _a !== void 0 ? _a : 'Delete', variant: "text", icon: "delete", iconSize: (_b = props.iconSize) !== null && _b !== void 0 ? _b : 24 }, props, { onClick: () => this.onClick() })));
     }
     onClick() {
         if (this.props.ConfirmAction) {

package/src/View/Components/Buttons/ButtonExpand.js

@@ -6,7 +6,7 @@ const React = tslib_1.__importStar(require("react"));
 const SimpleButton_1 = tslib_1.__importDefault(require("../../../components/SimpleButton"));
 class ButtonExpand extends React.Component {
     render() {
-        return (React.createElement(SimpleButton_1.default, Object.assign({ "data-name": "expand", tooltip: "Expand", iconSize: 20, icon: "arrowexpand", variant: "text" }, this.props)));
+        return (React.createElement(SimpleButton_1.default, Object.assign({ "data-name": "expand", tooltip: "Expand", iconSize: 20, icon: "arrow-expand", variant: "text" }, this.props)));
     }
 }
 exports.ButtonExpand = ButtonExpand;

package/src/View/Components/Buttons/ButtonInvalid.js

@@ -6,7 +6,7 @@ const React = tslib_1.__importStar(require("react"));
 const SimpleButton_1 = tslib_1.__importDefault(require("../../../components/SimpleButton"));
 class ButtonInvalid extends React.Component {
     render() {
-        return (React.createElement(SimpleButton_1.default, Object.assign({ "data-name": "invalid", tooltip: "Invalid", iconSize: 20, icon: "invalid" }, this.props)));
+        return (React.createElement(SimpleButton_1.default, Object.assign({ "data-name": "invalid", tooltip: "Invalid", iconSize: 20, icon: "warning" }, this.props)));
     }
 }
 exports.ButtonInvalid = ButtonInvalid;

package/src/View/Components/Buttons/ButtonLogin.js

@@ -6,7 +6,7 @@ const React = tslib_1.__importStar(require("react"));
 const SimpleButton_1 = tslib_1.__importDefault(require("../../../components/SimpleButton"));
 class ButtonLogin extends React.Component {
     render() {
-        return (React.createElement(SimpleButton_1.default, Object.assign({ "data-name": "login", tooltip: "Login", iconSize: 20, icon: "login", variant: "text" }, this.props)));
+        return (React.createElement(SimpleButton_1.default, Object.assign({ "data-name": "login", tooltip: "Login", iconSize: 20, icon: "person", variant: "text" }, this.props)));
     }
 }
 exports.ButtonLogin = ButtonLogin;

package/src/View/Components/Buttons/ButtonPreviewDelete.js

@@ -4,5 +4,5 @@ const tslib_1 = require("tslib");
 const React = tslib_1.__importStar(require("react"));
 const SimpleButton_1 = tslib_1.__importDefault(require("../../../components/SimpleButton"));
 exports.default = (props) => {
-    return React.createElement(SimpleButton_1.default, Object.assign({}, props, { icon: 'trash', variant: "text", "data-name": "preview-delete" }));
+    return React.createElement(SimpleButton_1.default, Object.assign({}, props, { icon: 'delete', variant: "text", "data-name": "preview-delete" }));
 };

package/src/View/Components/Buttons/ButtonShare.js

@@ -14,7 +14,7 @@ class ButtonShare extends React.Component {
         var _a;
         const _b = this.props, { onShare, Header } = _b, buttonProps = tslib_1.__rest(_b, ["onShare", "Header"]);
         return (React.createElement(React.Fragment, null,
-            React.createElement(SimpleButton_1.default, Object.assign({ "data-name": "share", tooltip: "Share", variant: "text", icon: "team-share", iconSize: (_a = buttonProps.iconSize) !== null && _a !== void 0 ? _a : 24, onClick: () => this.setState({ open: true }) }, buttonProps)),
+            React.createElement(SimpleButton_1.default, Object.assign({ "data-name": "share", tooltip: "Share", variant: "text", icon: "folder-shared", iconSize: (_a = buttonProps.iconSize) !== null && _a !== void 0 ? _a : 24, onClick: () => this.setState({ open: true }) }, buttonProps)),
             this.state.open && (React.createElement(AdaptablePopupTeamSharing_1.AdaptablePopupTeamSharing, { header: Header, showPopup: true, onClose: () => this.setState({ open: false }), onConfirm: (config) => {
                     this.setState({ open: false });
                     onShare(config);

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

@@ -58,12 +58,20 @@ class QuickFilterFormComponent extends React.Component {
         let showQuickFilterDropdown = true;
         let hideQuickFilterDropdownFunction = this.props.api.optionsApi.getFilterOptions().hideQuickFilterDropdown;
         if (hideQuickFilterDropdownFunction) {
-            showQuickFilterDropdown = !hideQuickFilterDropdownFunction(this.props.currentColumn);
+            const filterContext = {
+                column: this.props.currentColumn,
+                adaptableApi: this.props.api,
+            };
+            showQuickFilterDropdown = !hideQuickFilterDropdownFunction(filterContext);
         }
         let showQuickFilterInput = true;
         let hideQuickFilterInputFunction = this.props.api.optionsApi.getFilterOptions().hideQuickFilterInput;
         if (hideQuickFilterInputFunction) {
-            showQuickFilterInput = !hideQuickFilterInputFunction(this.props.currentColumn);
+            const filterContext = {
+                column: this.props.currentColumn,
+                adaptableApi: this.props.api,
+            };
+            showQuickFilterInput = !hideQuickFilterInputFunction(filterContext);
         }
         return (React.createElement(React.Fragment, null,
             showQuickFilterDropdown && (React.createElement(OverlayTrigger_1.default, { className: "ab-QuickFilter", showEvent: showEvent, hideEvent: hideEvent, preventPortalEventPropagation: showEvent === 'click', targetOffset: 10, hideDelay: 300, "data-name": "quick-filter-overlay", render: () => (React.createElement(rebass_1.Flex, { className: "ab-QuickFilter__dropdown", flexDirection: "column", "data-name": "quick-filter", fontSize: 2 },

package/src/View/Components/Forms/AdaptableFormControlTextClear.js

@@ -24,7 +24,7 @@ exports.AdaptableFormControlTextClear = React.forwardRef((props, ref) => {
                     ref.current = r;
                 }
             }, type: "text", placeholder: props.placeholder, value: props.value, onChange: (x) => props.OnTextChange(x.target.value) }),
-        React.createElement(SimpleButton_1.default, { variant: "text", icon: "clear", tooltip: closeButtonTooltip, px: 0, py: 0, marginRight: 1, onClick: () => {
+        React.createElement(SimpleButton_1.default, { variant: "text", icon: "close", tooltip: closeButtonTooltip, px: 0, py: 0, marginRight: 1, onClick: () => {
                 props.OnTextChange('');
                 const input = inputRef.current;
                 if (!focusOnClear) {

package/src/View/Components/ListBox/ListBoxFilterSortComponent.js

@@ -17,7 +17,7 @@ class ListBoxFilterSortComponent extends React.Component {
                 padding: 2 /* here just for the focus box-shadow to be visible*/,
             } },
             React.createElement(Input_1.default, { value: this.props.FilterValue, placeholder: "Search", onChange: (e) => this.handleChangeFilterValue(e), style: { width: 0 } }),
-            React.createElement(SimpleButton_1.default, { disabled: !this.props.FilterValue, onClick: () => this.clearFilter(), icon: "clear", variant: "text" }),
+            React.createElement(SimpleButton_1.default, { disabled: !this.props.FilterValue, onClick: () => this.clearFilter(), icon: "close", variant: "text" }),
             this.props.SortOrder == Enums_1.SortOrder.Asc ? (React.createElement(SimpleButton_1.default, { onClick: () => this.props.sortColumnValues(), icon: "sort-asc", variant: "text" })) : (React.createElement(SimpleButton_1.default, { onClick: () => this.props.sortColumnValues(), icon: "sort-desc", variant: "text" }))));
     }
     handleChangeFilterValue(x) {

package/src/View/Components/NewScopeComponent.js

@@ -19,10 +19,10 @@ const isScopeValid = ({ Scope }) => {
         return 'No scope specified or scope is empty';
     }
     if (Scope && 'ColumnIds' in Scope && Scope.ColumnIds.length === 0) {
-        result.push('No columns selected for scope');
+        result.push('No Columns selected in Scope');
     }
     if (Scope && 'DataTypes' in Scope && Scope.DataTypes.length === 0) {
-        result.push('No data types selected for scope');
+        result.push('No Data Types selected in Scope');
     }
     return result.length ? result.join(', ') : true;
 };

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

@@ -12,7 +12,7 @@ class ToolPanelSettingsPanel extends React.Component {
     render() {
         let header = (React.createElement("span", { style: { verticalAlign: 'middle' } },
             ' ',
-            React.createElement(icons_1.Icon, { name: 'build' }),
+            React.createElement(icons_1.Icon, { name: 'spanner' }),
             " ",
             React.createElement("span", null, "Settings"),
             this.props.button &&

package/src/View/Components/PredicateEditor/PredicateEditor.d.ts

@@ -6,5 +6,6 @@ export interface PredicateEditorProps {
     predicate?: AdaptablePredicate;
     onChange: (predicate: AdaptablePredicate) => void;
     onClear?: () => void;
+    placeholder?: string;
 }
 export declare const PredicateEditor: React.FunctionComponent<PredicateEditorProps>;

package/src/View/Components/PredicateEditor/PredicateEditor.js

@@ -13,26 +13,31 @@ const AdaptableInput_1 = tslib_1.__importDefault(require("../AdaptableInput"));
 const PermittedValuesSelector_1 = require("../PermittedValuesSelector");
 const isValuesPredicateDef = (colDef) => colDef && ['Values', 'ExcludeValues'].includes(colDef.id);
 const PredicateEditor = (props) => {
-    var _a;
+    var _a, _b, _c;
     const baseClassName = 'ab-PredicateEditor';
-    const predicateDefsOptions = React.useMemo(() => props.predicateDefs.map((item) => ({
-        value: item.id,
-        label: item.label,
-        onClick: () => {
-            var _a;
-            props.onChange(Object.assign(Object.assign({}, props.predicate), { PredicateId: item.id, Inputs: ((_a = item === null || item === void 0 ? void 0 : item.inputs) !== null && _a !== void 0 ? _a : []).map((input) => { var _a; return (_a = input.defaultValue) !== null && _a !== void 0 ? _a : ''; }) }));
-        },
-    })), [props.predicateDefs, props.onChange]);
+    const placeholder = (_a = props.placeholder) !== null && _a !== void 0 ? _a : 'Select Rule';
+    const predicateDefsOptions = React.useMemo(() => {
+        var _a;
+        return (_a = props === null || props === void 0 ? void 0 : props.predicateDefs) === null || _a === void 0 ? void 0 : _a.map((item) => ({
+            value: item.id,
+            label: item.label,
+            onClick: () => {
+                var _a;
+                props.onChange(Object.assign(Object.assign({}, props.predicate), { PredicateId: item.id, Inputs: ((_a = item === null || item === void 0 ? void 0 : item.inputs) !== null && _a !== void 0 ? _a : []).map((input) => { var _a; return (_a = input.defaultValue) !== null && _a !== void 0 ? _a : ''; }) }));
+            },
+        }));
+    }, [props.predicateDefs, props.onChange]);
     const handlePredicateInputChange = (e, index) => {
+        var _a;
         const { value } = e.target;
-        const newInputs = [...props.predicate.Inputs];
+        const newInputs = [...((_a = props.predicate.Inputs) !== null && _a !== void 0 ? _a : [])];
         newInputs[index] = value;
         props.onChange(Object.assign(Object.assign({}, props.predicate), { Inputs: newInputs }));
     };
     const handlePredicateValuesChange = (inputs) => {
         props.onChange(Object.assign(Object.assign({}, props.predicate), { Inputs: inputs }));
     };
-    const currentPredicateDef = props.predicateDefs.find((item) => { var _a; return item.id === ((_a = props.predicate) === null || _a === void 0 ? void 0 : _a.PredicateId); });
+    const currentPredicateDef = (_b = props === null || props === void 0 ? void 0 : props.predicateDefs) === null || _b === void 0 ? void 0 : _b.find((item) => { var _a; return item.id === ((_a = props.predicate) === null || _a === void 0 ? void 0 : _a.PredicateId); });
     let icon = null;
     if (currentPredicateDef) {
         if ((0, AdaptableIconComponent_1.isAdaptableInternalIcon)(currentPredicateDef === null || currentPredicateDef === void 0 ? void 0 : currentPredicateDef.icon)) {
@@ -45,11 +50,14 @@ const PredicateEditor = (props) => {
     return (React.createElement(rebass_1.Box, { className: baseClassName },
         React.createElement(rebass_1.Flex, { justifyContent: "stretch", alignItems: "center" },
             icon && React.createElement(Tag_1.Tag, { mr: 2 }, icon),
-            React.createElement(DropdownButton_1.default, { mb: 0, style: { flex: 1 }, listStyle: { minWidth: 150 }, "data-name": "select-predicate", className: `${baseClassName}__predicate-dropdown`, placeholder: "Select Rule", showClearButton: !!props.predicate, onClear: props.onClear, items: predicateDefsOptions, columns: ['label'] }, currentPredicateDef ? currentPredicateDef.label : 'Select Rule')),
-        React.createElement(rebass_1.Flex, null, (_a = currentPredicateDef === null || currentPredicateDef === void 0 ? void 0 : currentPredicateDef.inputs) === null || _a === void 0 ? void 0 : _a.map((predicateDefInput, index) => (React.createElement(React.Fragment, null,
-            index > 0 && React.createElement(HelpBlock_1.default, { margin: 2 }, "AND"),
-            React.createElement(rebass_1.Flex, { key: index, flex: 1, flexDirection: "column" },
-                React.createElement(AdaptableInput_1.default, { "data-name": `predicate-input-${index}`, marginTop: 2, type: predicateDefInput.type, autoFocus: index === 0, value: props.predicate.Inputs[index], onChange: (e) => handlePredicateInputChange(e, index) })))))),
+            React.createElement(DropdownButton_1.default, { mb: 0, style: { flex: 1 }, listStyle: { minWidth: 150 }, "data-name": "select-predicate", className: `${baseClassName}__predicate-dropdown`, placeholder: placeholder, showClearButton: !!props.predicate, onClear: props.onClear, items: predicateDefsOptions, columns: ['label'] }, currentPredicateDef ? currentPredicateDef.label : placeholder)),
+        React.createElement(rebass_1.Flex, null, (_c = currentPredicateDef === null || currentPredicateDef === void 0 ? void 0 : currentPredicateDef.inputs) === null || _c === void 0 ? void 0 : _c.map((predicateDefInput, index) => {
+            var _a, _b;
+            return (React.createElement(React.Fragment, null,
+                index > 0 && React.createElement(HelpBlock_1.default, { margin: 2 }, "AND"),
+                React.createElement(rebass_1.Flex, { key: index, flex: 1, flexDirection: "column" },
+                    React.createElement(AdaptableInput_1.default, { "data-name": `predicate-input-${index}`, marginTop: 2, type: predicateDefInput.type, autoFocus: index === 0, value: (_b = (_a = props.predicate.Inputs) === null || _a === void 0 ? void 0 : _a[index]) !== null && _b !== void 0 ? _b : '', onChange: (e) => handlePredicateInputChange(e, index) }))));
+        })),
         isValuesPredicateDef(currentPredicateDef) && (React.createElement(PermittedValuesSelector_1.PermitedValuesSelector, { onPredicateValuesChange: handlePredicateValuesChange, predicate: props.predicate, columnId: props.columnId }))));
 };
 exports.PredicateEditor = PredicateEditor;

package/src/View/Components/StyleComponent.d.ts

@@ -9,6 +9,7 @@ export interface StyleComponentProps extends React.ClassAttributes<StyleComponen
     headless?: boolean;
     hidePreview?: boolean;
     Style: AdaptableStyle;
+    showFontSizeAs?: 'radio' | 'dropdown';
     UpdateStyle: (style: AdaptableStyle) => void;
 }
 export interface StyleComponentState {
@@ -17,6 +18,10 @@ export interface StyleComponentState {
 }
 export declare class StyleComponent extends React.Component<StyleComponentProps, StyleComponentState> {
     constructor(props: StyleComponentProps);
+    static getDerivedStateFromProps(nextProps: StyleComponentProps, prevState: StyleComponentState): {
+        componentStyle: AdaptableStyle;
+        ShowClassName: boolean;
+    };
     render(): JSX.Element;
     private onShowClassNameChanged;
     private onStyleClassNameChanged;
@@ -29,5 +34,7 @@ export declare class StyleComponent extends React.Component<StyleComponentProps,
     private onBorderColorSelectChange;
     private onFontWeightChange;
     private onFontStyleChange;
+    private onTextDecorationChange;
+    private onBorderRadiusChange;
     private onFontSizeChange;
 }

package/src/View/Components/StyleComponent.js

@@ -16,6 +16,9 @@ const DropdownButton_1 = tslib_1.__importDefault(require("../../components/Dropd
 const ArrayExtensions_1 = tslib_1.__importDefault(require("../../Utilities/Extensions/ArrayExtensions"));
 const Radio_1 = tslib_1.__importDefault(require("../../components/Radio"));
 const StylePreview_1 = require("../../components/StylePreview");
+const ToggleGroup_1 = require("../../components/Toggle/ToggleGroup");
+const Toggle_1 = require("../../components/Toggle/Toggle");
+const AdaptableInput_1 = tslib_1.__importDefault(require("./AdaptableInput"));
 class StyleComponent extends React.Component {
     constructor(props) {
         super(props);
@@ -24,7 +27,14 @@ class StyleComponent extends React.Component {
             ShowClassName: StringExtensions_1.StringExtensions.IsNotNullOrEmpty(this.props.Style.ClassName),
         };
     }
+    static getDerivedStateFromProps(nextProps, prevState) {
+        return {
+            componentStyle: nextProps.Style,
+            ShowClassName: StringExtensions_1.StringExtensions.IsNotNullOrEmpty(nextProps.Style.ClassName),
+        };
+    }
     render() {
+        var _a, _b;
         const Cmp = this.props.headless ? rebass_1.Box : Panel_1.default;
         const cmpProps = this.props.headless
             ? {}
@@ -36,6 +46,8 @@ class StyleComponent extends React.Component {
         const styleClassNames = this.props.api.userInterfaceApi.getStyleClassNames();
         const colourSpellingVariant = this.props.api.internalApi.getCorrectEnglishVariant('Colour');
         const coloursSpellingVariant = this.props.api.internalApi.getCorrectEnglishVariant('colours');
+        let fontSizes = ['Default'];
+        fontSizes.push(...EnumExtensions_1.EnumExtensions.getNames(Enums_1.FontSize));
         return (React.createElement(Cmp, Object.assign({}, cmpProps, { className: "ab-StyleComponent" }),
             ArrayExtensions_1.default.IsNotNullOrEmpty(styleClassNames) && (React.createElement(rebass_1.Flex, { flexDirection: "row", padding: 2 },
                 React.createElement(Radio_1.default, { "data-name": "show-class-name", value: "Predicate", checked: this.state.ShowClassName, onChange: (checked) => this.onShowClassNameChanged(checked) }, "Use Style Class Name"),
@@ -65,33 +77,56 @@ class StyleComponent extends React.Component {
                         React.createElement(FormLayout_1.default, { columns: [1, 2] },
                             React.createElement(FormLayout_1.FormRow, null,
                                 React.createElement(CheckBox_1.CheckBox, { "data-name": "set-background-color", value: "existing", margin: 1, checked: !!this.state.componentStyle.BackColor, onChange: (checked) => this.onUseBackColorCheckChange(checked) },
-                                    "Set Back ",
+                                    "Back ",
                                     colourSpellingVariant),
                                 this.state.componentStyle.BackColor != null ? (React.createElement(ColorPicker_1.ColorPicker, { api: this.props.api, value: this.state.componentStyle.BackColor, onChange: (x) => this.onBackColorSelectChange(x) })) : (React.createElement("span", null))),
                             React.createElement(FormLayout_1.FormRow, null,
                                 React.createElement(CheckBox_1.CheckBox, { "data-name": "set-foreground-color", margin: 1, value: "existing", checked: this.state.componentStyle.ForeColor ? true : false, onChange: (checked) => this.onUseForeColorCheckChange(checked) },
-                                    "Set Fore ",
+                                    "Fore ",
                                     colourSpellingVariant),
                                 this.state.componentStyle.ForeColor != null ? (React.createElement(ColorPicker_1.ColorPicker, { api: this.props.api, value: this.state.componentStyle.ForeColor, onChange: (x) => this.onForeColorSelectChange(x) })) : (React.createElement("span", null))),
                             React.createElement(FormLayout_1.FormRow, null,
                                 React.createElement(CheckBox_1.CheckBox, { "data-name": "set-border-color", margin: 1, value: "existing", checked: this.state.componentStyle.BorderColor ? true : false, onChange: (checked) => this.onUseBorderColorCheckChange(checked) },
-                                    "Set Border ",
+                                    "Border ",
                                     colourSpellingVariant),
                                 this.state.componentStyle.BorderColor != null ? (React.createElement(ColorPicker_1.ColorPicker, { api: this.props.api, value: this.state.componentStyle.BorderColor, onChange: (x) => this.onBorderColorSelectChange(x) })) : (React.createElement("span", null)))),
                         React.createElement(HelpBlock_1.default, { fontSize: 2, marginTop: 2, marginBottom: 2 }, "Set the font properties of the Style"),
-                        React.createElement(FormLayout_1.default, { columns: [1] },
-                            React.createElement(FormLayout_1.FormRow, null,
-                                React.createElement(CheckBox_1.CheckBox, { "data-name": "set-font-weight-bold", margin: 1, value: Enums_1.FontWeight.Normal.toString(), checked: this.state.componentStyle.FontWeight == Enums_1.FontWeight.Bold, onChange: (checked) => this.onFontWeightChange(checked) }, "Bold")),
-                            React.createElement(FormLayout_1.FormRow, null,
-                                React.createElement(CheckBox_1.CheckBox, { "data-name": "set-font-style-italic", margin: 1, value: Enums_1.FontStyle.Normal.toString(), checked: this.state.componentStyle.FontStyle == Enums_1.FontStyle.Italic, onChange: (checked) => this.onFontStyleChange(checked) }, "Italic")),
-                            React.createElement(FormLayout_1.FormRow, null,
-                                React.createElement(CheckBox_1.CheckBox, { "data-name": "set-font-size", margin: 1, checked: this.state.componentStyle.FontSize ? true : false, onChange: (checked) => this.onUseFontSizeCheckChange(checked) }, "Set Font Size")),
-                            React.createElement(FormLayout_1.FormRow, null, this.state.componentStyle.FontSize != null && (React.createElement(rebass_1.Flex, { flexDirection: "row", alignItems: "center" },
-                                React.createElement(DropdownButton_1.default, { mr: 1, items: EnumExtensions_1.EnumExtensions.getNames(Enums_1.FontSize).map((enumName) => ({
-                                        value: enumName,
-                                        label: enumName,
-                                        onClick: () => this.onFontSizeChange(enumName),
-                                    })), columns: ['label'] }, this.state.componentStyle.FontSize.toString()))))))))),
+                        React.createElement(FormLayout_1.default, null,
+                            React.createElement(FormLayout_1.FormRow, { label: "Font Style" },
+                                React.createElement(ToggleGroup_1.ToggleGroup, null,
+                                    React.createElement(Toggle_1.Toggle, { pressed: this.state.componentStyle.FontStyle == Enums_1.FontStyle.Italic, onPressedChange: (checked) => this.onFontStyleChange(checked), icon: "italic" }),
+                                    React.createElement(Toggle_1.Toggle, { pressed: this.state.componentStyle.FontWeight == Enums_1.FontWeight.Bold, onPressedChange: (checked) => this.onFontWeightChange(checked), icon: "bold" }))),
+                            React.createElement(FormLayout_1.FormRow, { label: "Text Decoration" },
+                                React.createElement(ToggleGroup_1.ToggleGroup, null,
+                                    React.createElement(Toggle_1.Toggle, { icon: "underline", pressed: this.state.componentStyle.TextDecoration === 'Underline', onPressedChange: (checked) => this.onTextDecorationChange(checked ? 'Underline' : 'None') }),
+                                    React.createElement(Toggle_1.Toggle, { icon: "strikethrough", pressed: this.state.componentStyle.TextDecoration === 'LineThrough', onPressedChange: (checked) => this.onTextDecorationChange(checked ? 'LineThrough' : 'None') }),
+                                    React.createElement(Toggle_1.Toggle, { icon: "overline", pressed: this.state.componentStyle.TextDecoration === 'Overline', onPressedChange: (checked) => this.onTextDecorationChange(checked ? 'Overline' : 'None') }))),
+                            React.createElement(FormLayout_1.FormRow, { label: "Font Size" }, !this.props.showFontSizeAs || this.props.showFontSizeAs === 'dropdown' ? (React.createElement(rebass_1.Flex, { flexDirection: "row", alignItems: "center" },
+                                React.createElement(DropdownButton_1.default, { width: "100px", mr: 1, items: [
+                                        {
+                                            value: '',
+                                            label: 'Default',
+                                            onClick: () => this.onFontSizeChange(''),
+                                        },
+                                        ...EnumExtensions_1.EnumExtensions.getNames(Enums_1.FontSize).map((enumName) => ({
+                                            value: enumName,
+                                            label: enumName,
+                                            onClick: () => this.onFontSizeChange(enumName),
+                                        })),
+                                    ], columns: ['label'] }, (_b = (_a = this.state.componentStyle.FontSize) === null || _a === void 0 ? void 0 : _a.toString()) !== null && _b !== void 0 ? _b : 'Default'))) : (React.createElement(rebass_1.Box, null, fontSizes.map((enumName) => {
+                                return (React.createElement(Radio_1.default, { onClick: () => this.onFontSizeChange(enumName), checked: (enumName == 'Default' && !this.state.componentStyle.FontSize) ||
+                                        this.state.componentStyle.FontSize === enumName, mr: 3, key: enumName }, enumName));
+                            })))),
+                            React.createElement(FormLayout_1.FormRow, { label: "Border Radius" },
+                                React.createElement(AdaptableInput_1.default, { width: "100px", type: "number", min: "0", value: this.state.componentStyle.BorderRadius, onChange: (event) => {
+                                        const number = Number(event.target.value);
+                                        if (isNaN(number)) {
+                                            this.onBorderRadiusChange(0);
+                                        }
+                                        else {
+                                            this.onBorderRadiusChange(number);
+                                        }
+                                    } }))))))),
             !this.props.hidePreview && (React.createElement(rebass_1.Box, null,
                 React.createElement(HelpBlock_1.default, { fontSize: 2, marginTop: 2, marginBottom: 2 }, "Preview"),
                 React.createElement(StylePreview_1.StylePreview, { styleObject: this.state.componentStyle })))));
@@ -177,8 +212,25 @@ class StyleComponent extends React.Component {
         }
         this.props.UpdateStyle(this.state.componentStyle);
     }
+    onTextDecorationChange(textDecoration) {
+        this.state.componentStyle.TextDecoration = textDecoration;
+        if (textDecoration === 'None' || !textDecoration) {
+            delete this.state.componentStyle.TextDecoration;
+        }
+        this.props.UpdateStyle(this.state.componentStyle);
+    }
+    onBorderRadiusChange(value) {
+        this.state.componentStyle.BorderRadius = value;
+        if (value === 0) {
+            delete this.state.componentStyle.BorderRadius;
+        }
+        this.props.UpdateStyle(this.state.componentStyle);
+    }
     onFontSizeChange(value) {
         this.state.componentStyle.FontSize = value;
+        if (value === '' || value == 'Default') {
+            delete this.state.componentStyle.FontSize;
+        }
         this.props.UpdateStyle(this.state.componentStyle);
     }
 }

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

@@ -186,7 +186,7 @@ function ValueOptionsTags(props) {
                 (_c = (_b = (_a = e.target) === null || _a === void 0 ? void 0 : _a.lastChild) === null || _b === void 0 ? void 0 : _b.focus) === null || _c === void 0 ? void 0 : _c.call(_b);
             }, style: { flex: 'none' } },
             renderLabel ? renderLabel(label) : label,
-            readOnly ? null : (React.createElement(SimpleButton_1.default, { icon: "clear", ml: 2, iconSize: 14, variant: "text", style: { border: 'none' }, onClick: clear }))));
+            readOnly ? null : (React.createElement(SimpleButton_1.default, { icon: "close", ml: 2, iconSize: 14, variant: "text", style: { border: 'none' }, onClick: clear }))));
     };
     const renderEllipsis = (0, react_1.useCallback)(({ remaining }) => {
         return (React.createElement(rebass_1.Text, { fontSize: 2, style: { whiteSpace: 'nowrap' } },

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

@@ -19,6 +19,7 @@ const StringExtensions_1 = tslib_1.__importDefault(require("../../../Utilities/E
 const Tag_1 = require("../../../components/Tag");
 const AdaptableContext_1 = require("../../AdaptableContext");
 const FormatHelper_1 = tslib_1.__importDefault(require("../../../Utilities/Helpers/FormatHelper"));
+const Toggle_1 = require("../../../components/Toggle");
 const DOLLAR_OPTIONS = {
     FractionDigits: 2,
     FractionSeparator: '.',
@@ -347,12 +348,13 @@ const renderStringFormat = (data, _onChange, setFormatOption, scopedCustomFormat
             React.createElement(Tabs_1.Tabs.Content, null,
                 React.createElement(rebass_1.Flex, { flexDirection: "column" },
                     React.createElement(FormLayout_1.default, { mr: 3 },
-                        React.createElement(FormLayout_1.FormRow, { label: "Case: " },
-                            React.createElement(Radio_1.default, { "data-name": "case-lower", checked: data.DisplayFormat.Options.Case == 'Lower', onChange: (checked) => setFormatOption('Case', 'Lower') }, "Lower"),
-                            React.createElement(Radio_1.default, { "data-name": "case-upper", marginLeft: 2, checked: data.DisplayFormat.Options.Case == 'Upper', onChange: (checked) => setFormatOption('Case', 'Upper') }, "Upper"),
-                            React.createElement(Radio_1.default, { "data-name": "case-sentence", marginLeft: 2, checked: data.DisplayFormat.Options.Case == 'Sentence', onChange: (checked) => setFormatOption('Case', 'Sentence') }, "Sentence"),
-                            React.createElement(Radio_1.default, { "data-name": "case-none", marginLeft: 2, checked: data.DisplayFormat.Options.Case == undefined, onChange: (checked) => setFormatOption('Case', undefined) }, "None"),
-                            React.createElement(CheckBox_1.CheckBox, { "data-name": "trim-checkbox", marginLeft: 5, checked: data.DisplayFormat.Options.Trim, onChange: (checked) => setFormatOption('Trim', checked) }, "Trim")),
+                        React.createElement(FormLayout_1.FormRow, { label: "Case:" },
+                            React.createElement(rebass_1.Flex, null,
+                                React.createElement(Toggle_1.ToggleGroup, null,
+                                    React.createElement(Toggle_1.Toggle, { pressed: data.DisplayFormat.Options.Case === 'Upper', onPressedChange: (pressed) => setFormatOption('Case', pressed ? 'Upper' : undefined), icon: "case-upper" }),
+                                    React.createElement(Toggle_1.Toggle, { pressed: data.DisplayFormat.Options.Case === 'Lower', onPressedChange: (pressed) => setFormatOption('Case', pressed ? 'Lower' : undefined), icon: "case-lower" }),
+                                    React.createElement(Toggle_1.Toggle, { pressed: data.DisplayFormat.Options.Case === 'Sentence', onPressedChange: (pressed) => setFormatOption('Case', pressed ? 'Sentence' : undefined), icon: "case-sentence" })),
+                                React.createElement(CheckBox_1.CheckBox, { "data-name": "trim-checkbox", marginLeft: 5, checked: data.DisplayFormat.Options.Trim, onChange: (checked) => setFormatOption('Trim', checked) }, "Trim"))),
                         React.createElement(FormLayout_1.FormRow, { label: "Prefix" },
                             React.createElement(Input_1.default, { "data-name": "prefix", value: (_a = data.DisplayFormat.Options.Prefix) !== null && _a !== void 0 ? _a : '', onChange: (e) => setFormatOption('Prefix', e.currentTarget.value) })),
                         React.createElement(FormLayout_1.FormRow, { label: "Suffix" },

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

@@ -4,12 +4,13 @@ exports.FormatColumnSettingsWizardSection = exports.renderFormatColumnSettingsSu
 const tslib_1 = require("tslib");
 const React = tslib_1.__importStar(require("react"));
 const rebass_1 = require("rebass");
-const DropdownButton_1 = tslib_1.__importDefault(require("../../../components/DropdownButton"));
 const FormLayout_1 = tslib_1.__importStar(require("../../../components/FormLayout"));
 const CheckBox_1 = require("../../../components/CheckBox");
 const Tabs_1 = require("../../../components/Tabs");
 const OnePageAdaptableWizard_1 = require("../../Wizard/OnePageAdaptableWizard");
 const Tag_1 = require("../../../components/Tag");
+const ToggleGroup_1 = require("../../../components/Toggle/ToggleGroup");
+const Toggle_1 = require("../../../components/Toggle/Toggle");
 let alignmentOptions = [
     { value: 'Left', label: 'Left' },
     { value: 'Right', label: 'Right' },
@@ -27,9 +28,13 @@ const renderFormatColumnSettingsSummary = (data) => {
 };
 exports.renderFormatColumnSettingsSummary = renderFormatColumnSettingsSummary;
 const FormatColumnSettingsWizardSection = (props) => {
-    const { data, api } = (0, OnePageAdaptableWizard_1.useOnePageAdaptableWizardContext)();
+    const { data } = (0, OnePageAdaptableWizard_1.useOnePageAdaptableWizardContext)();
     const onCellAlignmentSelectChanged = (CellAlignment) => {
-        props.onChange(Object.assign(Object.assign({}, data), { CellAlignment }));
+        const newData = Object.assign(Object.assign({}, data), { CellAlignment });
+        if (CellAlignment === null) {
+            delete newData.CellAlignment;
+        }
+        props.onChange(newData);
     };
     const onIncludeGroupedRowsChanged = (IncludeGroupedRows) => {
         props.onChange(Object.assign(Object.assign({}, data), { IncludeGroupedRows }));
@@ -40,13 +45,16 @@ const FormatColumnSettingsWizardSection = (props) => {
             React.createElement(rebass_1.Flex, { flexDirection: "row" },
                 React.createElement(FormLayout_1.default, null,
                     React.createElement(FormLayout_1.FormRow, { label: "Cell Alignment" },
-                        React.createElement(DropdownButton_1.default, { "data-name": "cell-alignment-dropdown", style: {
-                                minWidth: '15rem',
-                            }, placeholder: "Select Option", showClearButton: !!data.CellAlignment, onClear: () => onCellAlignmentSelectChanged(null), items: alignmentOptions.map((item) => ({
-                                value: item.value,
-                                label: item.label,
-                                onClick: () => onCellAlignmentSelectChanged(item.value),
-                            })), columns: ['label'] }, data.CellAlignment ? data.CellAlignment : 'Select Option')),
+                        React.createElement(ToggleGroup_1.ToggleGroup, null,
+                            React.createElement(Toggle_1.Toggle, { icon: "align-left", pressed: data.CellAlignment === 'Left', onPressedChange: (pressed) => pressed
+                                    ? onCellAlignmentSelectChanged('Left')
+                                    : onCellAlignmentSelectChanged(null) }),
+                            React.createElement(Toggle_1.Toggle, { icon: "align-center", pressed: data.CellAlignment === 'Center', onPressedChange: (pressed) => pressed
+                                    ? onCellAlignmentSelectChanged('Center')
+                                    : onCellAlignmentSelectChanged(null) }),
+                            React.createElement(Toggle_1.Toggle, { icon: "align-right", pressed: data.CellAlignment === 'Right', onPressedChange: (pressed) => pressed
+                                    ? onCellAlignmentSelectChanged('Right')
+                                    : onCellAlignmentSelectChanged(null) }))),
                     React.createElement(FormLayout_1.FormRow, { label: "Include Grouped Rows:" },
                         React.createElement(rebass_1.Flex, { alignItems: "center", marginLeft: 2 },
                             React.createElement(CheckBox_1.CheckBox, { "data-name": "include-grouped-rows-checkbox", checked: data.IncludeGroupedRows, onChange: onIncludeGroupedRowsChanged, mr: 2 }))))))));

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

@@ -19,8 +19,9 @@ const isFormatColumnStyleValid = (data, api) => {
     return true;
 };
 exports.isFormatColumnStyleValid = isFormatColumnStyleValid;
-const toStyle = (style) => {
-    return Object.assign(Object.assign({}, (0, StyleHelper_1.convertAdaptableStyleToCSS)(style !== null && style !== void 0 ? style : {})), { borderWidth: (style === null || style === void 0 ? void 0 : style.BorderColor) ? 2 : 0, borderStyle: 'solid' });
+const toStyle = (data) => {
+    var _a, _b;
+    return Object.assign(Object.assign({}, (0, StyleHelper_1.convertAdaptableStyleToCSS)((_a = data.Style) !== null && _a !== void 0 ? _a : {})), { borderWidth: ((_b = data.Style) === null || _b === void 0 ? void 0 : _b.BorderColor) ? 2 : 0, borderStyle: 'solid', textAlign: data.CellAlignment ? data.CellAlignment.toLowerCase() : undefined });
 };
 const renderFormatColumnStyleWizardSummary = (data) => {
     const { api } = (0, OnePageAdaptableWizard_1.useOnePageAdaptableWizardContext)();
@@ -28,7 +29,7 @@ const renderFormatColumnStyleWizardSummary = (data) => {
 };
 exports.renderFormatColumnStyleWizardSummary = renderFormatColumnStyleWizardSummary;
 const renderFormatColumnStyleSummary = (data, api) => {
-    return (React.createElement(rebass_1.Text, { className: "ab-FormatPreview", padding: 2, style: toStyle(data.Style) }, "Preview result"));
+    return (React.createElement(rebass_1.Text, { className: "ab-FormatPreview", padding: 2, style: toStyle(data) }, "Preview result"));
 };
 exports.renderFormatColumnStyleSummary = renderFormatColumnStyleSummary;
 function FormatColumnStyleWizardSection(props) {

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

@@ -139,7 +139,7 @@ const ColumnRow = (props) => {
     const adaptable = (0, AdaptableContext_1.useAdaptable)();
     // headers
     const initialHeader = adaptable.api.columnApi.getFriendlyNameForColumnId(props.column.columnId);
-    const customHeader = (_b = (_a = props.layout.ColumnHeadersMap) === null || _a === void 0 ? void 0 : _a[props.column.columnId]) !== null && _b !== void 0 ? _b : '';
+    const customHeader = (_b = (_a = props.layout.ColumnHeadersMap) === null || _a === void 0 ? void 0 : _a[props.column.columnId]) !== null && _b !== void 0 ? _b : initialHeader;
     // column pinning
     const columnPinning = ((_c = props.layout.PinnedColumnsMap) === null || _c === void 0 ? void 0 : _c[props.column.columnId]) || 'None';
     const pinningOptions = [
@@ -172,8 +172,8 @@ const ColumnRow = (props) => {
         isExpanded && (React.createElement(rebass_1.Box, { className: "ab-Layout-Wizard__ColumnRow__Expanded-Container", mb: 2, padding: 2, mt: 2 },
             React.createElement(rebass_1.Flex, { mb: 2 },
                 React.createElement(FormLayout_1.default, { width: "100%", mr: 3 },
-                    React.createElement(FormLayout_1.FormRow, { label: "Column ID" },
-                        React.createElement(Tag_1.Tag, null, props.column.friendlyName)),
+                    React.createElement(FormLayout_1.FormRow, { label: "ColumnId" },
+                        React.createElement(Tag_1.Tag, null, props.column.columnId)),
                     React.createElement(FormLayout_1.FormRow, { label: "Header" },
                         React.createElement(Input_1.default, { "data-name": "column-header", className: "ab-Layout-Wizard__ColumnRow__Input", placehoder: "Custom name (optional)", onChange: () => {
                                 props.onColumnNameChange(props.column.columnId, event.target.value);

package/src/View/Shortcut/Wizard/ShortcutScopeWizardSection.js

@@ -9,8 +9,8 @@ const ShortcutScopeWizardSection = (props) => {
     const { data, api } = (0, OnePageAdaptableWizard_1.useOnePageAdaptableWizardContext)();
     const availableColumns = React.useMemo(() => api.columnApi.getNumericColumns(), []);
     return (React.createElement(NewScopeComponent_1.NewScopeComponent, { availableDataTypes: ['Number'], scopeColumns: availableColumns, scope: data.Scope, descriptions: {
-            rowScope: 'Matching rows will have the shortcut applied',
-            columnScope: 'Matching Columns will have the Shortcut applied',
+            rowScope: 'All Numeric Columns will have the Shortcut applied',
+            columnScope: 'Selected Columns will have the Shortcut applied',
         }, updateScope: (Scope) => {
             let preparedScope = Scope;
             if (Scope && 'DataTypes' in Scope && Scope.DataTypes.length === 0) {