@adaptabletools/adaptable 15.3.1 → 15.3.3-canary.0

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/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/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/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/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/StateManagement/StateManagementViewPanel.js

@@ -15,7 +15,7 @@ const StateManagementViewPanel = (props) => {
     return (React.createElement(rebass_1.Flex, { flexDirection: isToolbar ? 'row' : 'column', className: (0, join_1.default)(props.accessLevel == 'ReadOnly' ? GeneralConstants.READ_ONLY_STYLE : '', `ab-${elementType}__StateManagement__wrap`) },
         React.createElement(rebass_1.Flex, { flexDirection: "row" },
             React.createElement(LoadButton_1.LoadButton, { tooltip: "Load Predefined Config", variant: "text", icon: "upload", onLoad: (json) => props.api.configApi.reloadPredefinedConfig(json), accessLevel: props.accessLevel }, !isToolbar && 'Load'),
-            React.createElement(ClearButton_1.ClearButton, { icon: "trash", tooltip: "Clear User State", variant: "text", onClick: () => props.api.configApi.reloadPredefinedConfig(), accessLevel: props.accessLevel }, !isToolbar && 'Clear')),
+            React.createElement(ClearButton_1.ClearButton, { icon: "delete", tooltip: "Clear User State", variant: "text", onClick: () => props.api.configApi.reloadPredefinedConfig(), accessLevel: props.accessLevel }, !isToolbar && 'Clear')),
         React.createElement(ExportDropdown_1.ExportDropdown, { api: props.api, type: "adaptableState" }, "All State"),
         React.createElement(ExportDropdown_1.ExportDropdown, { api: props.api, type: "predefinedConfig" }, "Predefined Config")));
 };

package/src/View/StyledColumn/Wizard/StyledColumnBadgeSection.d.ts

@@ -0,0 +1,7 @@
+import * as React from 'react';
+import { StyledColumn } from '../../../types';
+export declare const renderBadgeSummary: (styledColumn: StyledColumn) => JSX.Element;
+export interface StyledColumnBadgeSectionProps {
+    onChange: (data: StyledColumn) => void;
+}
+export declare const StyledColumnBadgeSection: React.FunctionComponent<StyledColumnBadgeSectionProps>;

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

@@ -0,0 +1,108 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.StyledColumnBadgeSection = exports.renderBadgeSummary = void 0;
+const tslib_1 = require("tslib");
+const React = tslib_1.__importStar(require("react"));
+const rebass_1 = require("rebass");
+const AdaptableIconComponent_1 = require("../../../components/AdaptableIconComponent");
+const Badge_1 = require("../../../components/Badge");
+const DropdownButton_1 = tslib_1.__importDefault(require("../../../components/DropdownButton"));
+const ErrorBox_1 = tslib_1.__importDefault(require("../../../components/ErrorBox"));
+const FormLayout_1 = tslib_1.__importStar(require("../../../components/FormLayout"));
+const HelpBlock_1 = tslib_1.__importDefault(require("../../../components/HelpBlock"));
+const IconSelector_1 = require("../../../components/IconSelector");
+const SimpleButton_1 = tslib_1.__importDefault(require("../../../components/SimpleButton"));
+const Tabs_1 = require("../../../components/Tabs");
+const ObjectFactory_1 = tslib_1.__importDefault(require("../../../Utilities/ObjectFactory"));
+const AdaptablePopover_1 = require("../../AdaptablePopover");
+const PredicateEditor_1 = require("../../Components/PredicateEditor/PredicateEditor");
+const StyleComponent_1 = require("../../Components/StyleComponent");
+const OnePageAdaptableWizard_1 = require("../../Wizard/OnePageAdaptableWizard");
+const StyledColumnBadgePreview_1 = require("./StyledColumnWizardStyleSection/Components/StyledColumnBadgePreview");
+const BadgeEditor = (props) => {
+    var _a, _b;
+    const { api } = (0, OnePageAdaptableWizard_1.useOnePageAdaptableWizardContext)();
+    const { badge, columnId, onChange } = props;
+    const predicateDefs = api.styledColumnApi.getBadgePredicateDefsForColumn(columnId);
+    let previewValue = 'Hello world';
+    if (api.columnApi.getColumnDataTypeForColumnId(columnId) === 'Number') {
+        previewValue = '12345';
+    }
+    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,
+                React.createElement(FormLayout_1.FormRow, { label: "Preview" },
+                    React.createElement(Badge_1.Badge, { adaptableStyle: badge.Style, icon: badge.Icon, iconPosition: badge.IconPosition }, previewValue)),
+                React.createElement(FormLayout_1.FormRow, { label: "Style" },
+                    React.createElement(HelpBlock_1.default, { fontSize: 2, mb: 1, mt: 2 }, "Select the Style for the Badge"),
+                    ' ',
+                    React.createElement(AdaptablePopover_1.AdaptablePopover, { showEvent: "mouseenter", hideEvent: "mouseleave", showIcon: false, useButton: false, popoverMaxWidth: 700, bodyText: [
+                            React.createElement(StyleComponent_1.StyleComponent, { showFontSizeAs: "radio", headless: true, hidePreview: true, api: api, Style: (_a = badge.Style) !== null && _a !== void 0 ? _a : {}, UpdateStyle: (Style) => {
+                                    onChange(Object.assign(Object.assign({}, badge), { Style }));
+                                } }),
+                        ] },
+                        React.createElement(SimpleButton_1.default, { variant: "raised" }, "Edit Badge Style"))),
+                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"))),
+                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"),
+                    ' ',
+                    // for now, only show for system icons the
+                    !badge.Icon || 'name' in badge.Icon ? (React.createElement(IconSelector_1.IconSelector, { value: (badge === null || badge === void 0 ? void 0 : badge.Icon) && 'name' in (badge === null || badge === void 0 ? void 0 : badge.Icon) ? badge.Icon.name : undefined, onChange: (iconName) => {
+                            if (iconName) {
+                                onChange(Object.assign(Object.assign({}, badge), { Icon: {
+                                        name: iconName,
+                                    } }));
+                            }
+                            else {
+                                onChange(Object.assign(Object.assign({}, badge), { Icon: undefined }));
+                            }
+                        } })) : (React.createElement(AdaptableIconComponent_1.AdaptableIconComponent, { icon: badge.Icon }))),
+                badge.Icon && (React.createElement(FormLayout_1.FormRow, { label: "Icon Position" },
+                    React.createElement(DropdownButton_1.default, { columns: ['label'], items: [
+                            {
+                                label: 'Start',
+                                onClick: () => onChange(Object.assign(Object.assign({}, badge), { IconPosition: 'Start' })),
+                            },
+                            {
+                                label: 'End',
+                                onClick: () => onChange(Object.assign(Object.assign({}, badge), { IconPosition: 'End' })),
+                            },
+                        ] }, (_b = badge.IconPosition) !== null && _b !== void 0 ? _b : 'Start'))))),
+        React.createElement(rebass_1.Box, { justifyContent: "end" },
+            React.createElement(SimpleButton_1.default, { icon: "delete", onClick: props.onDelete }))));
+};
+const renderBadgeSummary = (styledColumn) => {
+    return React.createElement(StyledColumnBadgePreview_1.StyledColumnBadgePreview, { data: styledColumn });
+};
+exports.renderBadgeSummary = renderBadgeSummary;
+const StyledColumnBadgeSection = (props) => {
+    var _a, _b;
+    const { data } = (0, OnePageAdaptableWizard_1.useOnePageAdaptableWizardContext)();
+    const badges = (_b = (_a = data === null || data === void 0 ? void 0 : data.BadgeStyle) === null || _a === void 0 ? void 0 : _a.Badges) !== null && _b !== void 0 ? _b : [];
+    return (React.createElement(Tabs_1.Tabs, { style: { height: '100%' } },
+        React.createElement(Tabs_1.Tabs.Tab, null, "Badges"),
+        React.createElement(Tabs_1.Tabs.Content, null,
+            React.createElement(rebass_1.Flex, { justifyContent: "end" },
+                React.createElement(SimpleButton_1.default, { icon: "plus", onClick: () => {
+                        props.onChange(Object.assign(Object.assign({}, data), { BadgeStyle: {
+                                Badges: [...badges, ObjectFactory_1.default.CreateDefaultStyledColumnBadge()],
+                            } }));
+                    } }, "Add Badge")),
+            React.createElement(rebass_1.Flex, { flexDirection: "column", p: 2 }, badges.map((badge, index) => {
+                const handleEditBadge = (badge) => {
+                    const newBadges = [...badges];
+                    newBadges[index] = badge;
+                    props.onChange(Object.assign(Object.assign({}, data), { BadgeStyle: Object.assign(Object.assign({}, data.BadgeStyle), { Badges: newBadges }) }));
+                };
+                return (React.createElement(BadgeEditor, { key: index, badge: badge, columnId: data.ColumnId, onChange: handleEditBadge, onDelete: () => {
+                        const newBadges = [...badges];
+                        newBadges.splice(index, 1);
+                        props.onChange(Object.assign(Object.assign({}, data), { BadgeStyle: Object.assign(Object.assign({}, data.BadgeStyle), { Badges: newBadges }) }));
+                    } }));
+            })))));
+};
+exports.StyledColumnBadgeSection = StyledColumnBadgeSection;