@adaptabletools/adaptable 15.3.2 → 15.3.3-canary.1

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

@@ -4,7 +4,6 @@ exports.ShortcutSettingsWizard = exports.ShortcutSettingsSummary = exports.isSet
 const tslib_1 = require("tslib");
 const React = tslib_1.__importStar(require("react"));
 const rebass_1 = require("rebass");
-const AdaptablePopover_1 = require("../../AdaptablePopover");
 const Input_1 = tslib_1.__importDefault(require("../../../components/Input"));
 const shortcutOperations_1 = require("../shortcutOperations");
 const FormLayout_1 = tslib_1.__importStar(require("../../../components/FormLayout"));
@@ -13,6 +12,7 @@ const Tabs_1 = require("../../../components/Tabs");
 const DropdownButton_1 = tslib_1.__importDefault(require("../../../components/DropdownButton"));
 const OnePageAdaptableWizard_2 = require("../../../View/Wizard/OnePageAdaptableWizard");
 const Tag_1 = require("../../../components/Tag");
+const HelpBlock_1 = tslib_1.__importDefault(require("../../../components/HelpBlock"));
 const isSettingsValid = (data) => {
     const shortcutKey = data.ShortcutKey && typeof data.ShortcutKey === 'string' ? '' : 'Shortcut key is not selected';
     const shortcutValue = typeof data.ShortcutValue === 'number' ? '' : 'Shortcut value is not specified';
@@ -62,22 +62,24 @@ const ShortcutSettingsWizard = (props) => {
         React.createElement(Tabs_1.Tabs, { autoFocus: false },
             React.createElement(Tabs_1.Tabs.Tab, null, "Shortcut Settings"),
             React.createElement(Tabs_1.Tabs.Content, null,
-                React.createElement(FormLayout_1.default, { width: 400 },
+                React.createElement(FormLayout_1.default, { width: 800 },
+                    React.createElement(FormLayout_1.FormRow, null,
+                        ' ',
+                        React.createElement(HelpBlock_1.default, { fontSize: 2, mb: 0 }, "Keyboard key that, when pressed, triggers the shortcut")),
                     React.createElement(FormLayout_1.FormRow, { label: "Key" },
                         React.createElement(rebass_1.Flex, { flexDirection: "row" },
-                            React.createElement(DropdownButton_1.default, { "data-name": "shortcut-key", style: { flex: 1 }, marginRight: 3, items: optionKeys, columns: ['label'] }, shortcut.ShortcutKey || 'Select Key'),
-                            React.createElement(AdaptablePopover_1.AdaptablePopover, { headerText: "Shortcut: Key", bodyText: ['The keyboard key that, when pressed, triggers the shortcut.'] }))),
+                            React.createElement(DropdownButton_1.default, { "data-name": "shortcut-key", style: { flex: 1 }, marginRight: 3, items: optionKeys, columns: ['label'] }, shortcut.ShortcutKey || 'Select Key'))),
+                    React.createElement(FormLayout_1.FormRow, null,
+                        ' ',
+                        React.createElement(HelpBlock_1.default, { fontSize: 2, mb: 0 }, "Mathematical operation performed on Cell's current value (using the Shortcut's 'value') - used to calculate the Cell's new total")),
                     React.createElement(FormLayout_1.FormRow, { label: "Operation" },
                         React.createElement(rebass_1.Flex, { flexDirection: "row" },
-                            React.createElement(DropdownButton_1.default, { "data-name": "shortcut-operation", style: { flex: 1 }, marginRight: 3, items: optionActions, columns: ['label'] }, shortcut.ShortcutOperation || 'Select Operation'),
-                            React.createElement(AdaptablePopover_1.AdaptablePopover, { headerText: 'Shortcut: Operation', bodyText: [
-                                    "The mathematical operation that is performed on the cell's current value - using the shortcut's 'value' - in order to calculate the new total for the cell.",
-                                ] }))),
+                            React.createElement(DropdownButton_1.default, { "data-name": "shortcut-operation", style: { flex: 1 }, marginRight: 3, items: optionActions, columns: ['label'] }, shortcut.ShortcutOperation || 'Select Operation'))),
+                    React.createElement(FormLayout_1.FormRow, null,
+                        ' ',
+                        React.createElement(HelpBlock_1.default, { fontSize: 2, mb: 0 }, "Number that is used - together with the 'Operation' and the current cell value - to calculate the new total for the cell")),
                     React.createElement(FormLayout_1.FormRow, { label: "Value" },
                         React.createElement(rebass_1.Flex, { flexDirection: "row" },
-                            React.createElement(Input_1.default, { "data-name": "shortcut-value", flex: 1, marginRight: 3, onChange: handleOperationValueChange, placeholder: "Enter Number", type: "number", value: (_a = shortcut.ShortcutValue) !== null && _a !== void 0 ? _a : '' }),
-                            React.createElement(AdaptablePopover_1.AdaptablePopover, { headerText: 'Shortcut: Value', bodyText: [
-                                    "The number that is used - together with the shortcut's mathematical 'operation' and the current cell value - in order to calculate the new total for the cell.",
-                                ] }))))))));
+                            React.createElement(Input_1.default, { "data-name": "shortcut-value", flex: 1, marginRight: 3, onChange: handleOperationValueChange, placeholder: "Enter Number", type: "number", value: (_a = shortcut.ShortcutValue) !== null && _a !== void 0 ? _a : '' }))))))));
 };
 exports.ShortcutSettingsWizard = ShortcutSettingsWizard;

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;

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

@@ -14,6 +14,7 @@ const Tag_1 = require("../../../components/Tag");
 const ObjectExtensions_1 = require("../../../Utilities/Extensions/ObjectExtensions");
 const StringExtensions_1 = require("../../../Utilities/Extensions/StringExtensions");
 const AdaptableInput_1 = tslib_1.__importDefault(require("../../Components/AdaptableInput"));
+const UIHelper_1 = require("../../UIHelper");
 const OnePageAdaptableWizard_1 = require("../../Wizard/OnePageAdaptableWizard");
 const CommonProperties = (props) => {
     var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z, _0, _1, _2, _3, _4, _5, _6, _7;
@@ -54,7 +55,7 @@ const CommonProperties = (props) => {
         React.createElement(Tabs_1.Tabs.Content, null,
             React.createElement(FormLayout_1.default, null,
                 React.createElement(FormLayout_1.FormRow, { label: "Axis Type" },
-                    React.createElement(DropdownButton_1.default, { columns: ['label'], items: axisTypeOptions }, (_k = (_j = axisTypeOptions.find((option) => { var _a, _b, _c; return option.value === ((_c = (_b = (_a = data === null || data === void 0 ? void 0 : data.SparkLineStyle) === null || _a === void 0 ? void 0 : _a.options) === null || _b === void 0 ? void 0 : _b.axis) === null || _c === void 0 ? void 0 : _c.type); })) === null || _j === void 0 ? void 0 : _j.label) !== null && _k !== void 0 ? _k : 'Select Type')),
+                    React.createElement(DropdownButton_1.default, { columns: ['label'], items: axisTypeOptions }, (_k = (_j = axisTypeOptions.find((option) => { var _a, _b, _c; return option.value === ((_c = (_b = (_a = data === null || data === void 0 ? void 0 : data.SparkLineStyle) === null || _a === void 0 ? void 0 : _a.options) === null || _b === void 0 ? void 0 : _b.axis) === null || _c === void 0 ? void 0 : _c.type); })) === null || _j === void 0 ? void 0 : _j.label) !== null && _k !== void 0 ? _k : 'Select Axis Type')),
                 React.createElement(FormLayout_1.FormRow, { label: "Stroke Color" },
                     React.createElement(ColorPicker_1.ColorPicker, { api: api, value: (_p = (_o = (_m = (_l = data.SparkLineStyle) === null || _l === void 0 ? void 0 : _l.options) === null || _m === void 0 ? void 0 : _m.axis) === null || _o === void 0 ? void 0 : _o.stroke) !== null && _p !== void 0 ? _p : '#fff', onChange: (color) => props.onOptionChange(['axis', 'stroke'], color) })),
                 React.createElement(FormLayout_1.FormRow, { label: "Stroke Width" },
@@ -64,9 +65,9 @@ const CommonProperties = (props) => {
                 React.createElement(FormLayout_1.FormRow, { label: "Size" },
                     React.createElement(AdaptableInput_1.default, { type: "number", value: (_w = (_v = (_u = data.SparkLineStyle) === null || _u === void 0 ? void 0 : _u.options) === null || _v === void 0 ? void 0 : _v.highlightStyle) === null || _w === void 0 ? void 0 : _w.size, onChange: (event) => props.onOptionChange(['highlightStyle', 'size'], parseFloat(event.target.value)) })),
                 React.createElement(FormLayout_1.FormRow, { label: "Fill" },
-                    React.createElement(ColorPicker_1.ColorPicker, { api: api, value: (_0 = (_z = (_y = (_x = data.SparkLineStyle) === null || _x === void 0 ? void 0 : _x.options) === null || _y === void 0 ? void 0 : _y.highlightStyle) === null || _z === void 0 ? void 0 : _z.fill) !== null && _0 !== void 0 ? _0 : 'yellow', onChange: (color) => props.onOptionChange(['highlightStyle', 'fill'], color) })),
+                    React.createElement(ColorPicker_1.ColorPicker, { api: api, value: (_0 = (_z = (_y = (_x = data.SparkLineStyle) === null || _x === void 0 ? void 0 : _x.options) === null || _y === void 0 ? void 0 : _y.highlightStyle) === null || _z === void 0 ? void 0 : _z.fill) !== null && _0 !== void 0 ? _0 : UIHelper_1.YELLOW, onChange: (color) => props.onOptionChange(['highlightStyle', 'fill'], color) })),
                 React.createElement(FormLayout_1.FormRow, { label: "Stroke" },
-                    React.createElement(ColorPicker_1.ColorPicker, { api: api, value: (_4 = (_3 = (_2 = (_1 = data.SparkLineStyle) === null || _1 === void 0 ? void 0 : _1.options) === null || _2 === void 0 ? void 0 : _2.highlightStyle) === null || _3 === void 0 ? void 0 : _3.stroke) !== null && _4 !== void 0 ? _4 : 'silver', onChange: (color) => props.onOptionChange(['highlightStyle', 'stroke'], color) })),
+                    React.createElement(ColorPicker_1.ColorPicker, { api: api, value: (_4 = (_3 = (_2 = (_1 = data.SparkLineStyle) === null || _1 === void 0 ? void 0 : _1.options) === null || _2 === void 0 ? void 0 : _2.highlightStyle) === null || _3 === void 0 ? void 0 : _3.stroke) !== null && _4 !== void 0 ? _4 : UIHelper_1.LIGHT_GRAY, onChange: (color) => props.onOptionChange(['highlightStyle', 'stroke'], color) })),
                 React.createElement(FormLayout_1.FormRow, { label: "Stroke Width" },
                     React.createElement(AdaptableInput_1.default, { type: "number", value: (_7 = (_6 = (_5 = data.SparkLineStyle) === null || _5 === void 0 ? void 0 : _5.options) === null || _6 === void 0 ? void 0 : _6.highlightStyle) === null || _7 === void 0 ? void 0 : _7.strokeWidth, onChange: (event) => props.onOptionChange(['highlightStyle', 'strokeWidth'], parseFloat(event.target.value)) }))))));
 };
@@ -80,9 +81,9 @@ const SparklineMarkerProperties = (props) => {
         React.createElement(FormLayout_1.FormRow, { label: "Size" },
             React.createElement(AdaptableInput_1.default, { type: "number", value: (_d = (_c = sparklineOptions === null || sparklineOptions === void 0 ? void 0 : sparklineOptions.marker) === null || _c === void 0 ? void 0 : _c.size) !== null && _d !== void 0 ? _d : 0, onChange: (event) => props.onOptionChange(['marker', 'size'], parseFloat(event.target.value)) })),
         React.createElement(FormLayout_1.FormRow, { label: "Fill" },
-            React.createElement(ColorPicker_1.ColorPicker, { api: api, value: (_f = (_e = sparklineOptions === null || sparklineOptions === void 0 ? void 0 : sparklineOptions.marker) === null || _e === void 0 ? void 0 : _e.fill) !== null && _f !== void 0 ? _f : 'rgb(124, 181, 236)', onChange: (color) => props.onOptionChange(['marker', 'fill'], color) })),
+            React.createElement(ColorPicker_1.ColorPicker, { api: api, value: (_f = (_e = sparklineOptions === null || sparklineOptions === void 0 ? void 0 : sparklineOptions.marker) === null || _e === void 0 ? void 0 : _e.fill) !== null && _f !== void 0 ? _f : UIHelper_1.LIGHT_BLUE, onChange: (color) => props.onOptionChange(['marker', 'fill'], color) })),
         React.createElement(FormLayout_1.FormRow, { label: "Stroke" },
-            React.createElement(ColorPicker_1.ColorPicker, { api: api, value: (_h = (_g = sparklineOptions === null || sparklineOptions === void 0 ? void 0 : sparklineOptions.marker) === null || _g === void 0 ? void 0 : _g.stroke) !== null && _h !== void 0 ? _h : 'rgb(124, 181, 236)', onChange: (color) => props.onOptionChange(['marker', 'stroke'], color) })),
+            React.createElement(ColorPicker_1.ColorPicker, { api: api, value: (_h = (_g = sparklineOptions === null || sparklineOptions === void 0 ? void 0 : sparklineOptions.marker) === null || _g === void 0 ? void 0 : _g.stroke) !== null && _h !== void 0 ? _h : UIHelper_1.LIGHT_BLUE, onChange: (color) => props.onOptionChange(['marker', 'stroke'], color) })),
         React.createElement(FormLayout_1.FormRow, { label: "Stroke Width" },
             React.createElement(AdaptableInput_1.default, { type: "number", value: (_k = (_j = sparklineOptions === null || sparklineOptions === void 0 ? void 0 : sparklineOptions.marker) === null || _j === void 0 ? void 0 : _j.strokeWidth) !== null && _k !== void 0 ? _k : 1, onChange: (event) => props.onOptionChange(['marker', 'strokeWidth'], parseFloat(event.target.value)) }))));
 };
@@ -92,7 +93,7 @@ const SparklineLineProperties = (props) => {
     const sparklineOptions = data.SparkLineStyle.options;
     return (React.createElement(FormLayout_1.default, null,
         React.createElement(FormLayout_1.FormRow, { label: "Stroke" },
-            React.createElement(ColorPicker_1.ColorPicker, { api: api, value: (_b = (_a = sparklineOptions === null || sparklineOptions === void 0 ? void 0 : sparklineOptions.line) === null || _a === void 0 ? void 0 : _a.stroke) !== null && _b !== void 0 ? _b : 'rgb(124, 181, 236)', onChange: (color) => props.onOptionChange(['line', 'stroke'], color) })),
+            React.createElement(ColorPicker_1.ColorPicker, { api: api, value: (_b = (_a = sparklineOptions === null || sparklineOptions === void 0 ? void 0 : sparklineOptions.line) === null || _a === void 0 ? void 0 : _a.stroke) !== null && _b !== void 0 ? _b : UIHelper_1.LIGHT_BLUE, onChange: (color) => props.onOptionChange(['line', 'stroke'], color) })),
         React.createElement(FormLayout_1.FormRow, { label: "Stroke Width" },
             React.createElement(AdaptableInput_1.default, { type: "number", value: (_c = sparklineOptions === null || sparklineOptions === void 0 ? void 0 : sparklineOptions.line) === null || _c === void 0 ? void 0 : _c.strokeWidth, onChange: (event) => props.onOptionChange(['line', 'strokeWidth'], parseFloat(event.target.value)) }))));
 };
@@ -134,7 +135,7 @@ const CrossHairsProperties = (props) => {
             React.createElement(FormLayout_1.FormRow, { label: "Show" },
                 React.createElement(CheckBox_1.CheckBox, { checked: (_c = (_b = (_a = sparklineOptions === null || sparklineOptions === void 0 ? void 0 : sparklineOptions.crosshairs) === null || _a === void 0 ? void 0 : _a[key]) === null || _b === void 0 ? void 0 : _b.enabled) !== null && _c !== void 0 ? _c : true, onChange: (checked) => props.onOptionChange(['crosshairs', key, 'enabled'], checked) })),
             React.createElement(FormLayout_1.FormRow, { label: "Stroke" },
-                React.createElement(ColorPicker_1.ColorPicker, { api: api, value: (_f = (_e = (_d = sparklineOptions === null || sparklineOptions === void 0 ? void 0 : sparklineOptions.crosshairs) === null || _d === void 0 ? void 0 : _d[key]) === null || _e === void 0 ? void 0 : _e.stroke) !== null && _f !== void 0 ? _f : 'rgba(0,0,0, 0.54)', onChange: (color) => props.onOptionChange(['crosshairs', key, 'stroke'], color) })),
+                React.createElement(ColorPicker_1.ColorPicker, { api: api, value: (_f = (_e = (_d = sparklineOptions === null || sparklineOptions === void 0 ? void 0 : sparklineOptions.crosshairs) === null || _d === void 0 ? void 0 : _d[key]) === null || _e === void 0 ? void 0 : _e.stroke) !== null && _f !== void 0 ? _f : UIHelper_1.BLACK, onChange: (color) => props.onOptionChange(['crosshairs', key, 'stroke'], color) })),
             React.createElement(FormLayout_1.FormRow, { label: "Stroke Width" },
                 React.createElement(AdaptableInput_1.default, { type: "number", value: (_j = (_h = (_g = sparklineOptions === null || sparklineOptions === void 0 ? void 0 : sparklineOptions.crosshairs) === null || _g === void 0 ? void 0 : _g[key]) === null || _h === void 0 ? void 0 : _h.strokeWidth) !== null && _j !== void 0 ? _j : 1, onChange: (event) => props.onOptionChange(['crosshairs', key, 'strokeWidth'], event.target.value) })),
             React.createElement(FormLayout_1.FormRow, { label: "Line Dash" },
@@ -162,7 +163,7 @@ const TypeAreaProperties = (props) => {
         React.createElement(Tabs_1.Tabs.Content, null,
             React.createElement(FormLayout_1.default, null,
                 React.createElement(FormLayout_1.FormRow, { label: "Stroke" },
-                    React.createElement(ColorPicker_1.ColorPicker, { api: api, value: (_a = sparklineOptions === null || sparklineOptions === void 0 ? void 0 : sparklineOptions.fill) !== null && _a !== void 0 ? _a : 'rgba(124, 181, 236, 0.25)', onChange: (color) => props.onOptionChange(['fill'], color) })))),
+                    React.createElement(ColorPicker_1.ColorPicker, { api: api, value: (_a = sparklineOptions === null || sparklineOptions === void 0 ? void 0 : sparklineOptions.fill) !== null && _a !== void 0 ? _a : UIHelper_1.LIGHT_BLUE, onChange: (color) => props.onOptionChange(['fill'], color) })))),
         React.createElement(Tabs_1.Tabs.Content, null,
             React.createElement(SparklineLineProperties, { onOptionChange: props.onOptionChange })),
         React.createElement(Tabs_1.Tabs.Content, null,
@@ -191,9 +192,9 @@ const TypeColumnBarProperties = (props) => {
         React.createElement(Tabs_1.Tabs.Content, null,
             React.createElement(FormLayout_1.default, null,
                 React.createElement(FormLayout_1.FormRow, { label: "Fill" },
-                    React.createElement(ColorPicker_1.ColorPicker, { api: api, value: (_a = sparklineOptions === null || sparklineOptions === void 0 ? void 0 : sparklineOptions.fill) !== null && _a !== void 0 ? _a : 'rgb(124, 181, 236)', onChange: (color) => props.onOptionChange(['fill'], color) })),
+                    React.createElement(ColorPicker_1.ColorPicker, { api: api, value: (_a = sparklineOptions === null || sparklineOptions === void 0 ? void 0 : sparklineOptions.fill) !== null && _a !== void 0 ? _a : UIHelper_1.LIGHT_BLUE, onChange: (color) => props.onOptionChange(['fill'], color) })),
                 React.createElement(FormLayout_1.FormRow, { label: "Stroke" },
-                    React.createElement(ColorPicker_1.ColorPicker, { api: api, value: (_b = sparklineOptions === null || sparklineOptions === void 0 ? void 0 : sparklineOptions.stroke) !== null && _b !== void 0 ? _b : 'silver', onChange: (color) => props.onOptionChange(['stroke'], color) })),
+                    React.createElement(ColorPicker_1.ColorPicker, { api: api, value: (_b = sparklineOptions === null || sparklineOptions === void 0 ? void 0 : sparklineOptions.stroke) !== null && _b !== void 0 ? _b : UIHelper_1.LIGHT_GRAY, onChange: (color) => props.onOptionChange(['stroke'], color) })),
                 React.createElement(FormLayout_1.FormRow, { label: "Stroke Width" },
                     React.createElement(AdaptableInput_1.default, { type: "number", value: (_c = sparklineOptions === null || sparklineOptions === void 0 ? void 0 : sparklineOptions.strokeWidth) !== null && _c !== void 0 ? _c : 1, onChange: (event) => props.onOptionChange(['strokeWidth'], event.target.value) })),
                 React.createElement(FormLayout_1.FormRow, { label: "Padding Inner" },
@@ -232,9 +233,9 @@ const SparklineObjectNumberArrayProperties = (props) => {
     }, [data]);
     return (React.createElement(React.Fragment, null,
         React.createElement(FormLayout_1.FormRow, { label: "X Key" },
-            React.createElement(Input_1.default, { onChange: (event) => props.onOptionChange(['xKey'], event.target.value), value: (_a = sparkLineOptions.xKey) !== null && _a !== void 0 ? _a : 'x' })),
+            React.createElement(Input_1.default, { onChange: (event) => props.onOptionChange(['xKey'], event.target.value), value: (_a = sparkLineOptions === null || sparkLineOptions === void 0 ? void 0 : sparkLineOptions.xKey) !== null && _a !== void 0 ? _a : 'x' })),
         React.createElement(FormLayout_1.FormRow, { label: "Y Key" },
-            React.createElement(Input_1.default, { onChange: (event) => props.onOptionChange(['yKey'], event.target.value), value: (_b = sparkLineOptions.yKey) !== null && _b !== void 0 ? _b : 'y' })),
+            React.createElement(Input_1.default, { onChange: (event) => props.onOptionChange(['yKey'], event.target.value), value: (_b = sparkLineOptions === null || sparkLineOptions === void 0 ? void 0 : sparkLineOptions.yKey) !== null && _b !== void 0 ? _b : 'y' })),
         sparklineDataItem && (React.createElement(FormLayout_1.FormRow, { label: "Preview" },
             React.createElement(Tag_1.Tag, null, sparklineDataItem)))));
 };
@@ -262,8 +263,8 @@ const StyledColumnSparklineSettingsSection = (props) => {
             React.createElement(Tabs_1.Tabs.Tab, null, "Settings"),
             React.createElement(Tabs_1.Tabs.Content, null,
                 React.createElement(FormLayout_1.default, null,
-                    React.createElement(FormLayout_1.FormRow, { label: "Type" },
-                        React.createElement(DropdownButton_1.default, { columns: ['label'], items: sparklineTypeOptions }, (_c = (_b = sparklineTypeOptions.find((option) => { var _a; return option.value === ((_a = data.SparkLineStyle.options) === null || _a === void 0 ? void 0 : _a.type); })) === null || _b === void 0 ? void 0 : _b.label) !== null && _c !== void 0 ? _c : 'Select Type')),
+                    React.createElement(FormLayout_1.FormRow, { label: "Sparkline Type" },
+                        React.createElement(DropdownButton_1.default, { columns: ['label'], items: sparklineTypeOptions }, (_c = (_b = sparklineTypeOptions.find((option) => { var _a; return option.value === ((_a = data.SparkLineStyle.options) === null || _a === void 0 ? void 0 : _a.type); })) === null || _b === void 0 ? void 0 : _b.label) !== null && _c !== void 0 ? _c : 'Select Sparkline Type')),
                     isObjectNumberArray && (React.createElement(SparklineObjectNumberArrayProperties, { onOptionChange: handleOptionChange }))))),
         React.createElement(CommonProperties, { onOptionChange: handleOptionChange }),
         (() => {

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

@@ -16,6 +16,7 @@ const Helper_1 = require("../../../Utilities/Helpers/Helper");
 const StyledColumnWizardSettingsSection_1 = require("./StyledColumnWizardSettingsSection");
 const StyledColumnSparklineSettingsSection_1 = require("./StyledColumnSparklineSettingsSection");
 const ObjectTagsWizardSection_1 = require("../../Wizard/ObjectTagsWizardSection");
+const StyledColumnBadgeSection_1 = require("./StyledColumnBadgeSection");
 const StyledColumnWizard = (props) => {
     var _a, _b, _c, _d, _e, _f;
     const data = (_a = props.data) !== null && _a !== void 0 ? _a : (_b = props.popupParams) === null || _b === void 0 ? void 0 : _b.value;
@@ -40,8 +41,27 @@ const StyledColumnWizard = (props) => {
         }
         props.onFinishWizard(styledColumn);
     };
-    const checkboxGrandientPercentSteps = [
-        {
+    const AdditionalSettingSection = {
+        details: 'Apply Additional Settings',
+        renderSummary: StyledColumnWizardSettingsSection_1.renderStyledColumnWizardSettingsSummary,
+        render: () => {
+            return (React.createElement(rebass_1.Box, { padding: 2 },
+                React.createElement(StyledColumnWizardSettingsSection_1.StyledColumnWizardSettingsSection, { onChange: setStyledColumn })));
+        },
+        title: 'Settings',
+    };
+    const specificSteps = [];
+    if (styledColumn.SparkLineStyle) {
+        specificSteps.push({
+            title: 'Settings',
+            render: () => (React.createElement(rebass_1.Box, { p: 2 },
+                React.createElement(StyledColumnSparklineSettingsSection_1.StyledColumnSparklineSettingsSection, { onChange: setStyledColumn }))),
+        });
+    }
+    else if (styledColumn.CheckBoxStyle ||
+        styledColumn.GradientStyle ||
+        styledColumn.PercentBarStyle) {
+        specificSteps.push({
             details: 'Create the Style to apply',
             renderSummary: StyledColumnWizardStyleSection_1.renderStyledColumnStyleSummary,
             render: () => {
@@ -49,31 +69,34 @@ const StyledColumnWizard = (props) => {
                     React.createElement(StyledColumnWizardStyleSection_1.StyledColumnWizardStyleSection, { onChange: setStyledColumn })));
             },
             title: 'Style',
-        },
-        {
-            details: 'Apply additional Settings',
-            renderSummary: StyledColumnWizardSettingsSection_1.renderStyledColumnWizardSettingsSummary,
-            render: () => {
-                return (React.createElement(rebass_1.Box, { padding: 2 },
-                    React.createElement(StyledColumnWizardSettingsSection_1.StyledColumnWizardSettingsSection, { onChange: setStyledColumn })));
+        }, AdditionalSettingSection);
+    }
+    else if (styledColumn.BadgeStyle) {
+        specificSteps.push({
+            title: 'Badges',
+            details: 'Create Badge Styles',
+            isValid: () => {
+                var _a;
+                if (((_a = styledColumn.BadgeStyle.Badges) === null || _a === void 0 ? void 0 : _a.length) === 0) {
+                    return 'Define at least one Badge';
+                }
+                if (styledColumn.BadgeStyle.Badges.filter((badge) => !badge.Predicate).length > 1) {
+                    return 'Only one Badge can have no Predicate';
+                }
+                return true;
             },
-            title: 'Settings',
-        },
-    ];
-    const sparklineSteps = [
-        {
-            title: 'Settings',
+            renderSummary: () => (0, StyledColumnBadgeSection_1.renderBadgeSummary)(styledColumn),
             render: () => (React.createElement(rebass_1.Box, { p: 2 },
-                React.createElement(StyledColumnSparklineSettingsSection_1.StyledColumnSparklineSettingsSection, { onChange: setStyledColumn }))),
-        },
-    ];
+                React.createElement(StyledColumnBadgeSection_1.StyledColumnBadgeSection, { onChange: setStyledColumn }))),
+        });
+        specificSteps.push(AdditionalSettingSection);
+    }
     return (React.createElement(OnePageAdaptableWizard_1.OnePageAdaptableWizard, { defaultCurrentSectionName: defaultCurrentSectionName, moduleInfo: props.moduleInfo, data: styledColumn, onFinish: handleFinish, onHide: props.onCloseWizard, sections: [
             {
                 details: 'Select a Styled Column type',
                 renderSummary: StyledColumnWizardTypeSection_1.renderStyledColumnTypeSummary,
                 render: () => {
-                    return (React.createElement(rebass_1.Box, { padding: 2 },
-                        React.createElement(StyledColumnWizardTypeSection_1.StyledColumnWizardTypeSection, { onChange: setStyledColumn })));
+                    return React.createElement(StyledColumnWizardTypeSection_1.StyledColumnWizardTypeSection, { onChange: setStyledColumn });
                 },
                 title: 'Type',
             },
@@ -87,7 +110,7 @@ const StyledColumnWizard = (props) => {
                 },
                 title: 'Column',
             },
-            ...(styledColumn.SparkLineStyle ? sparklineSteps : checkboxGrandientPercentSteps),
+            ...specificSteps,
             {
                 details: 'Select Format Column Tags',
                 title: 'Tags',

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

@@ -28,15 +28,23 @@ exports.isValidStyledColumnColumn = isValidStyledColumnColumn;
 const StyledColumnWizardColumnSection = (props) => {
     const { data, api } = (0, OnePageAdaptableWizard_1.useOnePageAdaptableWizardContext)();
     const sortableCols = React.useMemo(() => {
-        const sortableColumns = data.CheckBoxStyle
-            ? api.columnApi.getBooleanColumns()
-            : data.SparkLineStyle
-                ? [
-                    ...api.columnApi.getNumberArrayColumns(),
-                    ...api.columnApi.getTupleNumberArrayColumns(),
-                    ...api.columnApi.getObjectNumberArrayColumns(),
-                ]
-                : api.columnApi.getNumericColumns();
+        let sortableColumns = [];
+        if (data.CheckBoxStyle) {
+            sortableColumns = api.columnApi.getBooleanColumns();
+        }
+        else if (data.SparkLineStyle) {
+            sortableColumns = [
+                ...api.columnApi.getNumberArrayColumns(),
+                ...api.columnApi.getTupleNumberArrayColumns(),
+                ...api.columnApi.getObjectNumberArrayColumns(),
+            ];
+        }
+        else if (data.BadgeStyle) {
+            sortableColumns = [...api.columnApi.getNumericColumns(), ...api.columnApi.getStringColumns()];
+        }
+        else {
+            sortableColumns = api.columnApi.getNumericColumns();
+        }
         const styledColumns = api.styledColumnApi.getStyledColumns();
         const usedColumnIds = styledColumns
             .map((styledColumn) => {

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

@@ -27,7 +27,7 @@ const StyledColumnWizardSettingsSection = (props) => {
         props.onChange(Object.assign(Object.assign({}, data), { IncludeGroupedRows }));
     };
     return (React.createElement(Tabs_1.Tabs, null,
-        React.createElement(Tabs_1.Tabs.Tab, null, "Format"),
+        React.createElement(Tabs_1.Tabs.Tab, null, "Settings"),
         React.createElement(Tabs_1.Tabs.Content, null,
             React.createElement(rebass_1.Flex, { flexDirection: "row" },
                 React.createElement(FormLayout_1.default, null,

package/src/View/StyledColumn/Wizard/StyledColumnWizardStyleSection/Components/StyledColumnBadgePreview.d.ts

@@ -0,0 +1,5 @@
+import * as React from 'react';
+import { StyledColumn } from '../../../../../types';
+export declare const StyledColumnBadgePreview: React.FunctionComponent<React.PropsWithChildren<{
+    data: StyledColumn;
+}>>;

package/src/View/StyledColumn/Wizard/StyledColumnWizardStyleSection/Components/StyledColumnBadgePreview.js

@@ -0,0 +1,29 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.StyledColumnBadgePreview = void 0;
+const tslib_1 = require("tslib");
+const React = tslib_1.__importStar(require("react"));
+const rebass_1 = require("rebass");
+const Badge_1 = require("../../../../../components/Badge");
+const Tag_1 = require("../../../../../components/Tag");
+const AdaptableContext_1 = require("../../../../AdaptableContext");
+const StyledColumnBadgePreview = ({ data }) => {
+    const adaptable = (0, AdaptableContext_1.useAdaptable)();
+    const badgeStyle = data.BadgeStyle;
+    if (!badgeStyle || badgeStyle.Badges.length === 0) {
+        return React.createElement("div", null, "No Badges Defined");
+    }
+    let value = 'Hello world';
+    if (adaptable.api.columnApi.getColumnDataTypeForColumnId(data.ColumnId) === 'Number') {
+        value = '12345';
+    }
+    return (React.createElement(rebass_1.Flex, { flexDirection: "column" }, badgeStyle.Badges.map((badge, index) => {
+        const predicateStr = badge.Predicate
+            ? adaptable.api.predicateApi.predicateToString(badge.Predicate)
+            : 'No Predicate';
+        return (React.createElement(rebass_1.Box, { mb: 1, key: index },
+            React.createElement(Badge_1.Badge, { icon: badge.Icon, adaptableStyle: badge.Style, iconPosition: badge.IconPosition }, value),
+            React.createElement(Tag_1.Tag, { ml: 2 }, predicateStr)));
+    })));
+};
+exports.StyledColumnBadgePreview = StyledColumnBadgePreview;

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

@@ -16,6 +16,8 @@ const UIHelper_1 = require("../../../UIHelper");
 const OnePageAdaptableWizard_1 = require("../../../Wizard/OnePageAdaptableWizard");
 const PercentBarColumnComparisonPreview_1 = require("./Components/PercentBarColumnComparisonPreview");
 const PercentBarRangesPreview_1 = require("./Components/PercentBarRangesPreview");
+const DropdownButton_1 = tslib_1.__importDefault(require("../../../../components/DropdownButton"));
+const ArrayExtensions_1 = tslib_1.__importDefault(require("../../../../Utilities/Extensions/ArrayExtensions"));
 const renderFormatColumnStyleWizardSummary = (data) => {
     const { api } = (0, OnePageAdaptableWizard_1.useOnePageAdaptableWizardContext)();
     return (0, exports.renderStyledColumnStyleSummary)(data, api);
@@ -83,7 +85,7 @@ const renderStyledColumnStyleSummary = (data, api) => {
 };
 exports.renderStyledColumnStyleSummary = renderStyledColumnStyleSummary;
 const StyledColumnWizardStyleSection = (props) => {
-    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s;
+    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u;
     const { data, api } = (0, OnePageAdaptableWizard_1.useOnePageAdaptableWizardContext)();
     const minMaxRangeValues = React.useMemo(() => {
         const columnId = data.ColumnId;
@@ -157,6 +159,9 @@ const StyledColumnWizardStyleSection = (props) => {
         }
         props.onChange(Object.assign(Object.assign({}, data), { PercentBarStyle: percentBarStyle }));
     };
+    const handlePercentBarCellTextPositionChange = (percentBarPosition) => {
+        props.onChange(Object.assign(Object.assign({}, data), { PercentBarStyle: Object.assign(Object.assign({}, data.PercentBarStyle), { CellTextPosition: percentBarPosition }) }));
+    };
     const onPercentBarToolTipTextCellValueChanged = (checked) => {
         let percentBarStyle = data === null || data === void 0 ? void 0 : data.PercentBarStyle;
         if (checked) {
@@ -247,17 +252,32 @@ const StyledColumnWizardStyleSection = (props) => {
                         "Percent Value",
                         ' '),
                     ' '),
+                React.createElement(FormLayout_1.FormRow, { label: "Cell Display Position:" },
+                    React.createElement(DropdownButton_1.default, { disabled: ArrayExtensions_1.default.IsNullOrEmpty(data.PercentBarStyle.CellText) || disabled, columns: ['label'], items: [
+                            {
+                                label: 'Above Bar',
+                                onClick: () => handlePercentBarCellTextPositionChange('Above'),
+                            },
+                            {
+                                label: 'Below Bar',
+                                onClick: () => handlePercentBarCellTextPositionChange('Below'),
+                            },
+                            {
+                                label: 'Merged',
+                                onClick: () => handlePercentBarCellTextPositionChange('Merged'),
+                            },
+                        ] }, (_m = (_l = data.PercentBarStyle) === null || _l === void 0 ? void 0 : _l.CellTextPosition) !== null && _m !== void 0 ? _m : 'Below')),
                 React.createElement(FormLayout_1.FormRow, { label: "ToolTip Display:" },
-                    React.createElement(CheckBox_1.CheckBox, { disabled: disabled, marginLeft: 2, checked: (_m = (_l = data === null || data === void 0 ? void 0 : data.PercentBarStyle) === null || _l === void 0 ? void 0 : _l.ToolTipText) === null || _m === void 0 ? void 0 : _m.includes('CellValue'), onChange: (checked) => onPercentBarToolTipTextCellValueChanged(checked) }, "Cell Value"),
+                    React.createElement(CheckBox_1.CheckBox, { disabled: disabled, marginLeft: 2, checked: (_p = (_o = data === null || data === void 0 ? void 0 : data.PercentBarStyle) === null || _o === void 0 ? void 0 : _o.ToolTipText) === null || _p === void 0 ? void 0 : _p.includes('CellValue'), onChange: (checked) => onPercentBarToolTipTextCellValueChanged(checked) }, "Cell Value"),
                     ' ',
-                    React.createElement(CheckBox_1.CheckBox, { disabled: disabled, marginLeft: 3, checked: (_p = (_o = data === null || data === void 0 ? void 0 : data.PercentBarStyle) === null || _o === void 0 ? void 0 : _o.ToolTipText) === null || _p === void 0 ? void 0 : _p.includes('PercentageValue'), onChange: (checked) => onPercentBarToolTipTextPercentValueChanged(checked) },
+                    React.createElement(CheckBox_1.CheckBox, { disabled: disabled, marginLeft: 3, checked: (_r = (_q = data === null || data === void 0 ? void 0 : data.PercentBarStyle) === null || _q === void 0 ? void 0 : _q.ToolTipText) === null || _r === void 0 ? void 0 : _r.includes('PercentageValue'), onChange: (checked) => onPercentBarToolTipTextPercentValueChanged(checked) },
                         "Percent Value",
                         ' '),
                     ' '),
                 React.createElement(FormLayout_1.FormRow, { label: `Back ${api.internalApi.getCorrectEnglishVariant('Colour')}` },
                     React.createElement(rebass_1.Flex, { alignItems: "center", marginLeft: 2 },
-                        React.createElement(CheckBox_1.CheckBox, { disabled: disabled, checked: !!((_q = data.PercentBarStyle) === null || _q === void 0 ? void 0 : _q.BackColor), onChange: (checked) => onUsePercentStyleColorCheckChanged(checked), mr: 2 }),
-                        ((_r = data.PercentBarStyle) === null || _r === void 0 ? void 0 : _r.BackColor) !== undefined && (React.createElement(ColorPicker_1.ColorPicker, { disabled: disabled, api: api, value: (_s = data.PercentBarStyle) === null || _s === void 0 ? void 0 : _s.BackColor, onChange: (x) => onForeColorSelectChange(x) }))))))),
+                        React.createElement(CheckBox_1.CheckBox, { disabled: disabled, checked: !!((_s = data.PercentBarStyle) === null || _s === void 0 ? void 0 : _s.BackColor), onChange: (checked) => onUsePercentStyleColorCheckChanged(checked), mr: 2 }),
+                        ((_t = data.PercentBarStyle) === null || _t === void 0 ? void 0 : _t.BackColor) !== undefined && (React.createElement(ColorPicker_1.ColorPicker, { disabled: disabled, api: api, value: (_u = data.PercentBarStyle) === null || _u === void 0 ? void 0 : _u.BackColor, onChange: (x) => onForeColorSelectChange(x) }))))))),
         !data.ColumnId && React.createElement(ErrorBox_1.default, { mt: 2 }, "You need to select a column before styling.")));
 };
 exports.StyledColumnWizardStyleSection = StyledColumnWizardStyleSection;

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

@@ -6,6 +6,7 @@ const React = tslib_1.__importStar(require("react"));
 const rebass_1 = require("rebass");
 const Tabs_1 = require("../../../components/Tabs");
 const Tag_1 = require("../../../components/Tag");
+const ObjectFactory_1 = tslib_1.__importDefault(require("../../../Utilities/ObjectFactory"));
 const AdaptableContext_1 = require("../../AdaptableContext");
 const OnePageAdaptableWizard_1 = require("../../Wizard/OnePageAdaptableWizard");
 const TypeRadio_1 = require("../../Wizard/TypeRadio");
@@ -23,6 +24,9 @@ const renderStyledColumnTypeSummary = (data) => {
     else if (data.SparkLineStyle) {
         type = 'Spark Line';
     }
+    else if (data.BadgeStyle) {
+        type = 'Badge';
+    }
     return (React.createElement(rebass_1.Text, { pr: 2, py: 2 },
         "Type ",
         React.createElement(Tag_1.Tag, null, type)));
@@ -37,6 +41,7 @@ const StyledColumnWizardTypeSection = (props) => {
         delete newStyledColumn.PercentBarStyle;
         delete newStyledColumn.CheckBoxStyle;
         delete newStyledColumn.SparkLineStyle;
+        delete newStyledColumn.BadgeStyle;
         switch (type) {
             case 'gradient':
                 newStyledColumn.GradientStyle = {};
@@ -54,6 +59,11 @@ const StyledColumnWizardTypeSection = (props) => {
                     },
                 };
                 break;
+            case 'badge':
+                newStyledColumn.BadgeStyle = {
+                    Badges: [ObjectFactory_1.default.CreateDefaultStyledColumnBadge()],
+                };
+                break;
         }
         newStyledColumn.ColumnId = null;
         props.onChange(newStyledColumn);
@@ -62,9 +72,10 @@ const StyledColumnWizardTypeSection = (props) => {
         React.createElement(Tabs_1.Tabs, { autoFocus: false, padding: 2 },
             React.createElement(Tabs_1.Tabs.Tab, null, "Type"),
             React.createElement(Tabs_1.Tabs.Content, null,
-                React.createElement(TypeRadio_1.TypeRadio, { text: "Gradient Column", description: "Colour each cell in a numeric column using a gradient value", checked: Boolean(data.GradientStyle), onClick: () => handleTypeChange('gradient') }),
-                React.createElement(TypeRadio_1.TypeRadio, { text: "Percent Bar", description: "Display a coloured bar where the width is based on the cell", checked: Boolean(data.PercentBarStyle), onClick: () => handleTypeChange('percent') }),
-                React.createElement(TypeRadio_1.TypeRadio, { text: "Check Box", description: "Display a checkbox (in a Boolean column)", checked: Boolean(data.CheckBoxStyle), onClick: () => handleTypeChange('checkbox') }),
-                adaptable.api.styledColumnApi.canDisplaySparklines() && (React.createElement(TypeRadio_1.TypeRadio, { text: "Sparkline", description: "Render the column as a Sparkline", checked: Boolean(data.SparkLineStyle), onClick: () => handleTypeChange('sparkline') }))))));
+                React.createElement(TypeRadio_1.TypeRadio, { text: "Gradient", description: "Colour each cell in the column using a gradient value (Numeric Columns)", checked: Boolean(data.GradientStyle), onClick: () => handleTypeChange('gradient') }),
+                React.createElement(TypeRadio_1.TypeRadio, { text: "Percent Bar", description: "Display a coloured bar where the width is based on the cell (Numeric Columns)", checked: Boolean(data.PercentBarStyle), onClick: () => handleTypeChange('percent') }),
+                React.createElement(TypeRadio_1.TypeRadio, { text: "Check Box", description: "Display a checkbox (Boolean Columns)", checked: Boolean(data.CheckBoxStyle), onClick: () => handleTypeChange('checkbox') }),
+                adaptable.api.styledColumnApi.canDisplaySparklines() && (React.createElement(TypeRadio_1.TypeRadio, { text: "Sparkline", description: "Render the column as a Sparkline (Numeric Array Columns)", checked: Boolean(data.SparkLineStyle), onClick: () => handleTypeChange('sparkline') })),
+                React.createElement(TypeRadio_1.TypeRadio, { text: "Badge", description: "Display the column's values as Badges (All Columns)", checked: Boolean(data.BadgeStyle), onClick: () => handleTypeChange('badge') })))));
 };
 exports.StyledColumnWizardTypeSection = StyledColumnWizardTypeSection;