@adaptabletools/adaptable 16.2.4 → 17.0.0-canary.1

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

@@ -1,104 +1,98 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.StyledColumnSparklineSettingsSection = void 0;
-const tslib_1 = require("tslib");
-const React = tslib_1.__importStar(require("react"));
-const rebass_1 = require("rebass");
-const CheckBox_1 = require("../../../components/CheckBox");
-const ColorPicker_1 = require("../../../components/ColorPicker");
-const DropdownButton_1 = tslib_1.__importDefault(require("../../../components/DropdownButton"));
-const FormLayout_1 = tslib_1.__importStar(require("../../../components/FormLayout"));
-const Input_1 = tslib_1.__importDefault(require("../../../components/Input"));
-const Tabs_1 = require("../../../components/Tabs");
-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");
+import * as React from 'react';
+import { Box, Flex } from 'rebass';
+import { CheckBox } from '../../../components/CheckBox';
+import { ColorPicker } from '../../../components/ColorPicker';
+import FormLayout, { FormRow } from '../../../components/FormLayout';
+import Input from '../../../components/Input';
+import { Select } from '../../../components/Select';
+import { Tabs } from '../../../components/Tabs';
+import { Tag } from '../../../components/Tag';
+import { setInPath } from '../../../Utilities/Extensions/ObjectExtensions';
+import { Humanize } from '../../../Utilities/Extensions/StringExtensions';
+import AdaptableInput from '../../Components/AdaptableInput';
+import { BLACK, LIGHT_BLUE, LIGHT_GRAY, YELLOW } from '../../UIHelper';
+import { useOnePageAdaptableWizardContext } from '../../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;
-    const { data, api } = (0, OnePageAdaptableWizard_1.useOnePageAdaptableWizardContext)();
+    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, _8;
+    const { data, api } = useOnePageAdaptableWizardContext();
     const axisTypeOptions = React.useMemo(() => {
         return [
             {
                 label: 'Number',
                 value: 'number',
-                onClick: () => props.onOptionChange(['axis', 'type'], 'number'),
             },
             {
                 label: 'Category',
                 value: 'category',
-                onClick: () => props.onOptionChange(['axis', 'type'], 'category'),
             },
             {
                 label: 'Time',
                 value: 'time',
-                onClick: () => props.onOptionChange(['axis', 'type'], 'time'),
             },
         ];
     }, [data]);
-    return (React.createElement(Tabs_1.Tabs, { mb: 2 },
-        React.createElement(Tabs_1.Tabs.Tab, null, "Padding"),
-        React.createElement(Tabs_1.Tabs.Tab, null, "Axis"),
-        React.createElement(Tabs_1.Tabs.Tab, null, "Highlight Style"),
-        React.createElement(Tabs_1.Tabs.Content, null,
-            React.createElement(FormLayout_1.default, null,
-                React.createElement(FormLayout_1.FormRow, { label: "Top" },
-                    React.createElement(Input_1.default, { onChange: (event) => { var _a; return props.onOptionChange(['padding', 'top'], (_a = event.target.value) !== null && _a !== void 0 ? _a : 0); }, type: "number", value: (_b = (_a = data.SparkLineStyle.options) === null || _a === void 0 ? void 0 : _a.padding) === null || _b === void 0 ? void 0 : _b.top })),
-                React.createElement(FormLayout_1.FormRow, { label: "Bottom" },
-                    React.createElement(Input_1.default, { onChange: (event) => { var _a; return props.onOptionChange(['padding', 'bottom'], (_a = event.target.value) !== null && _a !== void 0 ? _a : 0); }, type: "number", value: (_d = (_c = data.SparkLineStyle.options) === null || _c === void 0 ? void 0 : _c.padding) === null || _d === void 0 ? void 0 : _d.bottom })),
-                React.createElement(FormLayout_1.FormRow, { label: "Left" },
-                    React.createElement(Input_1.default, { onChange: (event) => { var _a; return props.onOptionChange(['padding', 'left'], (_a = event.target.value) !== null && _a !== void 0 ? _a : 0); }, type: "number", value: (_f = (_e = data.SparkLineStyle.options) === null || _e === void 0 ? void 0 : _e.padding) === null || _f === void 0 ? void 0 : _f.left })),
-                React.createElement(FormLayout_1.FormRow, { label: "Right" },
-                    React.createElement(Input_1.default, { onChange: (event) => { var _a; return props.onOptionChange(['padding', 'right'], (_a = event.target.value) !== null && _a !== void 0 ? _a : 0); }, type: "number", value: (_h = (_g = data.SparkLineStyle.options) === null || _g === void 0 ? void 0 : _g.padding) === null || _h === void 0 ? void 0 : _h.right })))),
-        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 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" },
-                    React.createElement(AdaptableInput_1.default, { type: "number", value: (_t = (_s = (_r = (_q = data.SparkLineStyle) === null || _q === void 0 ? void 0 : _q.options) === null || _r === void 0 ? void 0 : _r.axis) === null || _s === void 0 ? void 0 : _s.strokeWidth) !== null && _t !== void 0 ? _t : 0, onChange: (event) => props.onOptionChange(['axis', 'strokeWidth'], parseFloat(event.target.value)) })))),
-        React.createElement(Tabs_1.Tabs.Content, null,
-            React.createElement(FormLayout_1.default, null,
-                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 : 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 : 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)) }))))));
+    return (React.createElement(Tabs, { mb: 2 },
+        React.createElement(Tabs.Tab, null, "Padding"),
+        React.createElement(Tabs.Tab, null, "Axis"),
+        React.createElement(Tabs.Tab, null, "Highlight Style"),
+        React.createElement(Tabs.Content, null,
+            React.createElement(FormLayout, null,
+                React.createElement(FormRow, { label: "Top" },
+                    React.createElement(Input, { onChange: (event) => { var _a; return props.onOptionChange(['padding', 'top'], (_a = event.target.value) !== null && _a !== void 0 ? _a : 0); }, type: "number", value: (_b = (_a = data.SparkLineStyle.options) === null || _a === void 0 ? void 0 : _a.padding) === null || _b === void 0 ? void 0 : _b.top })),
+                React.createElement(FormRow, { label: "Bottom" },
+                    React.createElement(Input, { onChange: (event) => { var _a; return props.onOptionChange(['padding', 'bottom'], (_a = event.target.value) !== null && _a !== void 0 ? _a : 0); }, type: "number", value: (_d = (_c = data.SparkLineStyle.options) === null || _c === void 0 ? void 0 : _c.padding) === null || _d === void 0 ? void 0 : _d.bottom })),
+                React.createElement(FormRow, { label: "Left" },
+                    React.createElement(Input, { onChange: (event) => { var _a; return props.onOptionChange(['padding', 'left'], (_a = event.target.value) !== null && _a !== void 0 ? _a : 0); }, type: "number", value: (_f = (_e = data.SparkLineStyle.options) === null || _e === void 0 ? void 0 : _e.padding) === null || _f === void 0 ? void 0 : _f.left })),
+                React.createElement(FormRow, { label: "Right" },
+                    React.createElement(Input, { onChange: (event) => { var _a; return props.onOptionChange(['padding', 'right'], (_a = event.target.value) !== null && _a !== void 0 ? _a : 0); }, type: "number", value: (_h = (_g = data.SparkLineStyle.options) === null || _g === void 0 ? void 0 : _g.padding) === null || _h === void 0 ? void 0 : _h.right })))),
+        React.createElement(Tabs.Content, null,
+            React.createElement(FormLayout, null,
+                React.createElement(FormRow, { label: "Axis Type" },
+                    React.createElement(Box, { maxWidth: 180 },
+                        React.createElement(Select, { value: (_l = (_k = (_j = data === null || data === void 0 ? void 0 : data.SparkLineStyle) === null || _j === void 0 ? void 0 : _j.options) === null || _k === void 0 ? void 0 : _k.axis) === null || _l === void 0 ? void 0 : _l.type, options: axisTypeOptions, onChange: (value) => props.onOptionChange(['axis', 'type'], value), placeholder: "Select Axis Type" }))),
+                React.createElement(FormRow, { label: "Stroke Color" },
+                    React.createElement(ColorPicker, { api: api, value: (_q = (_p = (_o = (_m = data.SparkLineStyle) === null || _m === void 0 ? void 0 : _m.options) === null || _o === void 0 ? void 0 : _o.axis) === null || _p === void 0 ? void 0 : _p.stroke) !== null && _q !== void 0 ? _q : '#fff', onChange: (color) => props.onOptionChange(['axis', 'stroke'], color) })),
+                React.createElement(FormRow, { label: "Stroke Width" },
+                    React.createElement(AdaptableInput, { type: "number", value: (_u = (_t = (_s = (_r = data.SparkLineStyle) === null || _r === void 0 ? void 0 : _r.options) === null || _s === void 0 ? void 0 : _s.axis) === null || _t === void 0 ? void 0 : _t.strokeWidth) !== null && _u !== void 0 ? _u : 0, onChange: (event) => props.onOptionChange(['axis', 'strokeWidth'], parseFloat(event.target.value)) })))),
+        React.createElement(Tabs.Content, null,
+            React.createElement(FormLayout, null,
+                React.createElement(FormRow, { label: "Size" },
+                    React.createElement(AdaptableInput, { type: "number", value: (_x = (_w = (_v = data.SparkLineStyle) === null || _v === void 0 ? void 0 : _v.options) === null || _w === void 0 ? void 0 : _w.highlightStyle) === null || _x === void 0 ? void 0 : _x.size, onChange: (event) => props.onOptionChange(['highlightStyle', 'size'], parseFloat(event.target.value)) })),
+                React.createElement(FormRow, { label: "Fill" },
+                    React.createElement(ColorPicker, { api: api, value: (_1 = (_0 = (_z = (_y = data.SparkLineStyle) === null || _y === void 0 ? void 0 : _y.options) === null || _z === void 0 ? void 0 : _z.highlightStyle) === null || _0 === void 0 ? void 0 : _0.fill) !== null && _1 !== void 0 ? _1 : YELLOW, onChange: (color) => props.onOptionChange(['highlightStyle', 'fill'], color) })),
+                React.createElement(FormRow, { label: "Stroke" },
+                    React.createElement(ColorPicker, { api: api, value: (_5 = (_4 = (_3 = (_2 = data.SparkLineStyle) === null || _2 === void 0 ? void 0 : _2.options) === null || _3 === void 0 ? void 0 : _3.highlightStyle) === null || _4 === void 0 ? void 0 : _4.stroke) !== null && _5 !== void 0 ? _5 : LIGHT_GRAY, onChange: (color) => props.onOptionChange(['highlightStyle', 'stroke'], color) })),
+                React.createElement(FormRow, { label: "Stroke Width" },
+                    React.createElement(AdaptableInput, { type: "number", value: (_8 = (_7 = (_6 = data.SparkLineStyle) === null || _6 === void 0 ? void 0 : _6.options) === null || _7 === void 0 ? void 0 : _7.highlightStyle) === null || _8 === void 0 ? void 0 : _8.strokeWidth, onChange: (event) => props.onOptionChange(['highlightStyle', 'strokeWidth'], parseFloat(event.target.value)) }))))));
 };
 const SparklineMarkerProperties = (props) => {
     var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
-    const { data, api } = (0, OnePageAdaptableWizard_1.useOnePageAdaptableWizardContext)();
+    const { data, api } = useOnePageAdaptableWizardContext();
     const sparklineOptions = data.SparkLineStyle.options;
-    return (React.createElement(FormLayout_1.default, null,
-        React.createElement(FormLayout_1.FormRow, { label: "Enabled" },
-            React.createElement(CheckBox_1.CheckBox, { checked: (_b = (_a = sparklineOptions === null || sparklineOptions === void 0 ? void 0 : sparklineOptions.marker) === null || _a === void 0 ? void 0 : _a.enabled) !== null && _b !== void 0 ? _b : true, onChange: (checked) => props.onOptionChange(['marker', 'enabled'], checked) })),
-        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 : 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 : 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)) }))));
+    return (React.createElement(FormLayout, null,
+        React.createElement(FormRow, { label: "Enabled" },
+            React.createElement(CheckBox, { checked: (_b = (_a = sparklineOptions === null || sparklineOptions === void 0 ? void 0 : sparklineOptions.marker) === null || _a === void 0 ? void 0 : _a.enabled) !== null && _b !== void 0 ? _b : true, onChange: (checked) => props.onOptionChange(['marker', 'enabled'], checked) })),
+        React.createElement(FormRow, { label: "Size" },
+            React.createElement(AdaptableInput, { 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(FormRow, { label: "Fill" },
+            React.createElement(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 : LIGHT_BLUE, onChange: (color) => props.onOptionChange(['marker', 'fill'], color) })),
+        React.createElement(FormRow, { label: "Stroke" },
+            React.createElement(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 : LIGHT_BLUE, onChange: (color) => props.onOptionChange(['marker', 'stroke'], color) })),
+        React.createElement(FormRow, { label: "Stroke Width" },
+            React.createElement(AdaptableInput, { 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)) }))));
 };
 const SparklineLineProperties = (props) => {
     var _a, _b, _c;
-    const { data, api } = (0, OnePageAdaptableWizard_1.useOnePageAdaptableWizardContext)();
+    const { data, api } = useOnePageAdaptableWizardContext();
     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 : 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)) }))));
+    return (React.createElement(FormLayout, null,
+        React.createElement(FormRow, { label: "Stroke" },
+            React.createElement(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 : LIGHT_BLUE, onChange: (color) => props.onOptionChange(['line', 'stroke'], color) })),
+        React.createElement(FormRow, { label: "Stroke Width" },
+            React.createElement(AdaptableInput, { 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)) }))));
 };
 const CrossHairsProperties = (props) => {
-    const { data, api } = (0, OnePageAdaptableWizard_1.useOnePageAdaptableWizardContext)();
+    const { data, api } = useOnePageAdaptableWizardContext();
     const sparklineOptions = data.SparkLineStyle.options;
     const lineDashes = [
         'dash',
@@ -120,91 +114,89 @@ const CrossHairsProperties = (props) => {
         'square',
     ];
     const buildLineDashProperties = (key) => {
-        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o;
+        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q;
         const lineDashOptions = lineDashes.map((item) => ({
-            label: (0, StringExtensions_1.Humanize)(item),
+            label: Humanize(item),
             value: item,
-            onClick: () => props.onOptionChange(['crosshairs', key, 'lineDash'], item),
         }));
         const lineCapOptionsItems = lineCapOptions.map((item) => ({
-            label: (0, StringExtensions_1.Humanize)(item),
+            label: Humanize(item),
             value: item,
-            onClick: () => props.onOptionChange(['crosshairs', key, 'lineCap'], item),
         }));
-        return (React.createElement(FormLayout_1.default, null,
-            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 : 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" },
-                React.createElement(DropdownButton_1.default, { columns: ['label'], items: lineDashOptions }, (_l = (_k = lineDashOptions.find((option) => { var _a, _b; return option.value === ((_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.lineDash); })) === null || _k === void 0 ? void 0 : _k.label) !== null && _l !== void 0 ? _l : 'Solid')),
-            React.createElement(FormLayout_1.FormRow, { label: "Line Cap" },
-                React.createElement(DropdownButton_1.default, { columns: ['label'], items: lineCapOptionsItems }, (_o = (_m = lineCapOptionsItems.find((option) => { var _a, _b; return option.value === ((_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.lineCap); })) === null || _m === void 0 ? void 0 : _m.label) !== null && _o !== void 0 ? _o : 'Butt'))));
+        return (React.createElement(FormLayout, null,
+            React.createElement(FormRow, { label: "Show" },
+                React.createElement(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(FormRow, { label: "Stroke" },
+                React.createElement(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 : BLACK, onChange: (color) => props.onOptionChange(['crosshairs', key, 'stroke'], color) })),
+            React.createElement(FormRow, { label: "Stroke Width" },
+                React.createElement(AdaptableInput, { 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(FormRow, { label: "Line Dash" },
+                React.createElement(Select, { value: (_m = (_l = (_k = sparklineOptions === null || sparklineOptions === void 0 ? void 0 : sparklineOptions.crosshairs) === null || _k === void 0 ? void 0 : _k[key]) === null || _l === void 0 ? void 0 : _l.lineDash) !== null && _m !== void 0 ? _m : 'solid', onChange: (value) => props.onOptionChange(['crosshairs', key, 'lineDash'], value), options: lineDashOptions, placeholder: "Select Line Dash" })),
+            React.createElement(FormRow, { label: "Line Cap" },
+                React.createElement(Select, { value: (_q = (_p = (_o = sparklineOptions === null || sparklineOptions === void 0 ? void 0 : sparklineOptions.crosshairs) === null || _o === void 0 ? void 0 : _o[key]) === null || _p === void 0 ? void 0 : _p.lineCap) !== null && _q !== void 0 ? _q : 'butt', onChange: (value) => props.onOptionChange(['crosshairs', key, 'lineCap'], value), options: lineCapOptionsItems, placeholder: "Select Line Cap" }))));
     };
-    return (React.createElement(rebass_1.Flex, null,
-        React.createElement(rebass_1.Box, { mr: 3 },
-            React.createElement(rebass_1.Box, null, "X Line"),
+    return (React.createElement(Flex, null,
+        React.createElement(Box, { mr: 3 },
+            React.createElement(Box, null, "X Line"),
             buildLineDashProperties('xLine')),
-        React.createElement(rebass_1.Box, null,
-            React.createElement(rebass_1.Box, null, "Y Line"),
+        React.createElement(Box, null,
+            React.createElement(Box, null, "Y Line"),
             buildLineDashProperties('yLine'))));
 };
 const TypeAreaProperties = (props) => {
     var _a;
-    const { data, api } = (0, OnePageAdaptableWizard_1.useOnePageAdaptableWizardContext)();
+    const { data, api } = useOnePageAdaptableWizardContext();
     const sparklineOptions = data.SparkLineStyle.options;
-    return (React.createElement(Tabs_1.Tabs, { mb: 2 },
-        React.createElement(Tabs_1.Tabs.Tab, null, "Stroke"),
-        React.createElement(Tabs_1.Tabs.Tab, null, "Line"),
-        React.createElement(Tabs_1.Tabs.Tab, null, "Marker"),
-        React.createElement(Tabs_1.Tabs.Tab, null, "Cross Hairs"),
-        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 : UIHelper_1.LIGHT_BLUE, onChange: (color) => props.onOptionChange(['fill'], color) })))),
-        React.createElement(Tabs_1.Tabs.Content, null,
+    return (React.createElement(Tabs, { mb: 2 },
+        React.createElement(Tabs.Tab, null, "Stroke"),
+        React.createElement(Tabs.Tab, null, "Line"),
+        React.createElement(Tabs.Tab, null, "Marker"),
+        React.createElement(Tabs.Tab, null, "Cross Hairs"),
+        React.createElement(Tabs.Content, null,
+            React.createElement(FormLayout, null,
+                React.createElement(FormRow, { label: "Stroke" },
+                    React.createElement(ColorPicker, { api: api, value: (_a = sparklineOptions === null || sparklineOptions === void 0 ? void 0 : sparklineOptions.fill) !== null && _a !== void 0 ? _a : LIGHT_BLUE, onChange: (color) => props.onOptionChange(['fill'], color) })))),
+        React.createElement(Tabs.Content, null,
             React.createElement(SparklineLineProperties, { onOptionChange: props.onOptionChange })),
-        React.createElement(Tabs_1.Tabs.Content, null,
+        React.createElement(Tabs.Content, null,
             React.createElement(SparklineMarkerProperties, { onOptionChange: props.onOptionChange })),
-        React.createElement(Tabs_1.Tabs.Content, null,
+        React.createElement(Tabs.Content, null,
             React.createElement(CrossHairsProperties, { onOptionChange: props.onOptionChange }))));
 };
 const TypeLineProperties = (props) => {
-    return (React.createElement(Tabs_1.Tabs, { mb: 2 },
-        React.createElement(Tabs_1.Tabs.Tab, null, "Line"),
-        React.createElement(Tabs_1.Tabs.Tab, null, "Marker"),
-        React.createElement(Tabs_1.Tabs.Tab, null, "Cross Hairs"),
-        React.createElement(Tabs_1.Tabs.Content, null,
+    return (React.createElement(Tabs, { mb: 2 },
+        React.createElement(Tabs.Tab, null, "Line"),
+        React.createElement(Tabs.Tab, null, "Marker"),
+        React.createElement(Tabs.Tab, null, "Cross Hairs"),
+        React.createElement(Tabs.Content, null,
             React.createElement(SparklineLineProperties, { onOptionChange: props.onOptionChange })),
-        React.createElement(Tabs_1.Tabs.Content, null,
+        React.createElement(Tabs.Content, null,
             React.createElement(SparklineMarkerProperties, { onOptionChange: props.onOptionChange })),
-        React.createElement(Tabs_1.Tabs.Content, null,
+        React.createElement(Tabs.Content, null,
             React.createElement(CrossHairsProperties, { onOptionChange: props.onOptionChange }))));
 };
 const TypeColumnBarProperties = (props) => {
     var _a, _b, _c, _d, _e;
-    const { data, api } = (0, OnePageAdaptableWizard_1.useOnePageAdaptableWizardContext)();
+    const { data, api } = useOnePageAdaptableWizardContext();
     const sparklineOptions = data.SparkLineStyle.options;
-    return (React.createElement(Tabs_1.Tabs, { mb: 2 },
-        React.createElement(Tabs_1.Tabs.Tab, null, "General"),
-        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 : 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 : 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" },
-                    React.createElement(AdaptableInput_1.default, { type: "number", value: (_d = sparklineOptions === null || sparklineOptions === void 0 ? void 0 : sparklineOptions.paddingInner) !== null && _d !== void 0 ? _d : 0.1, onChange: (event) => props.onOptionChange(['paddingInner'], event.target.value) })),
-                React.createElement(FormLayout_1.FormRow, { label: "Padding Outer" },
-                    React.createElement(AdaptableInput_1.default, { type: "number", value: (_e = sparklineOptions === null || sparklineOptions === void 0 ? void 0 : sparklineOptions.paddingOuter) !== null && _e !== void 0 ? _e : 0.2, onChange: (event) => props.onOptionChange(['paddingOuter'], event.target.value) }))))));
+    return (React.createElement(Tabs, { mb: 2 },
+        React.createElement(Tabs.Tab, null, "General"),
+        React.createElement(Tabs.Content, null,
+            React.createElement(FormLayout, null,
+                React.createElement(FormRow, { label: "Fill" },
+                    React.createElement(ColorPicker, { api: api, value: (_a = sparklineOptions === null || sparklineOptions === void 0 ? void 0 : sparklineOptions.fill) !== null && _a !== void 0 ? _a : LIGHT_BLUE, onChange: (color) => props.onOptionChange(['fill'], color) })),
+                React.createElement(FormRow, { label: "Stroke" },
+                    React.createElement(ColorPicker, { api: api, value: (_b = sparklineOptions === null || sparklineOptions === void 0 ? void 0 : sparklineOptions.stroke) !== null && _b !== void 0 ? _b : LIGHT_GRAY, onChange: (color) => props.onOptionChange(['stroke'], color) })),
+                React.createElement(FormRow, { label: "Stroke Width" },
+                    React.createElement(AdaptableInput, { 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(FormRow, { label: "Padding Inner" },
+                    React.createElement(AdaptableInput, { type: "number", value: (_d = sparklineOptions === null || sparklineOptions === void 0 ? void 0 : sparklineOptions.paddingInner) !== null && _d !== void 0 ? _d : 0.1, onChange: (event) => props.onOptionChange(['paddingInner'], event.target.value) })),
+                React.createElement(FormRow, { label: "Padding Outer" },
+                    React.createElement(AdaptableInput, { type: "number", value: (_e = sparklineOptions === null || sparklineOptions === void 0 ? void 0 : sparklineOptions.paddingOuter) !== null && _e !== void 0 ? _e : 0.2, onChange: (event) => props.onOptionChange(['paddingOuter'], event.target.value) }))))));
 };
 const SparklineObjectNumberArrayProperties = (props) => {
     var _a, _b;
-    const { data, api } = (0, OnePageAdaptableWizard_1.useOnePageAdaptableWizardContext)();
+    const { data, api } = useOnePageAdaptableWizardContext();
     const sparkLineOptions = data.SparkLineStyle.options;
     const [sparklineDataItem, setSparklineDataItem] = React.useState('');
     React.useEffect(() => {
@@ -232,39 +224,40 @@ 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 === 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 === 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)))));
+        React.createElement(FormRow, { label: "X Key" },
+            React.createElement(Input, { 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(FormRow, { label: "Y Key" },
+            React.createElement(Input, { 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(FormRow, { label: "Preview" },
+            React.createElement(Tag, null, sparklineDataItem)))));
 };
-const StyledColumnSparklineSettingsSection = (props) => {
-    var _a, _b, _c;
-    const { data, api } = (0, OnePageAdaptableWizard_1.useOnePageAdaptableWizardContext)();
+export const StyledColumnSparklineSettingsSection = (props) => {
+    var _a, _b;
+    const { data, api } = useOnePageAdaptableWizardContext();
     const handleTypeChange = React.useCallback((type) => {
         const newStyledColumn = Object.assign(Object.assign({}, data), { SparkLineStyle: Object.assign(Object.assign({}, data.SparkLineStyle), { options: Object.assign(Object.assign({}, data.SparkLineStyle.options), { type }) }) });
         props.onChange(newStyledColumn);
     }, [data]);
     const sparklineTypeOptions = React.useMemo(() => [
-        { label: 'Line', value: 'line', onClick: () => handleTypeChange('line') },
-        { label: 'Area', value: 'area', onClick: () => handleTypeChange('area') },
-        { label: 'Column', value: 'column', onClick: () => handleTypeChange('column') },
-        { label: 'Bar', value: 'bar', onClick: () => handleTypeChange('bar') },
+        { label: 'Line', value: 'line' },
+        { label: 'Area', value: 'area' },
+        { label: 'Column', value: 'column' },
+        { label: 'Bar', value: 'bar' },
     ], [data]);
     const handleOptionChange = React.useCallback((path, value) => {
         var _a;
-        const newOptions = (0, ObjectExtensions_1.setInPath)((_a = data.SparkLineStyle.options) !== null && _a !== void 0 ? _a : {}, path, value);
+        const newOptions = setInPath((_a = data.SparkLineStyle.options) !== null && _a !== void 0 ? _a : {}, path, value);
         props.onChange(Object.assign(Object.assign({}, data), { SparkLineStyle: Object.assign(Object.assign({}, data.SparkLineStyle), { options: newOptions }) }));
     }, [data]);
     const isObjectNumberArray = ((_a = api.columnApi.getColumnWithColumnId(data.ColumnId)) === null || _a === void 0 ? void 0 : _a.dataType) === 'ObjectNumberArray';
     return (React.createElement(React.Fragment, null,
-        React.createElement(Tabs_1.Tabs, { mb: 2 },
-            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: "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')),
+        React.createElement(Tabs, { mb: 2 },
+            React.createElement(Tabs.Tab, null, "Settings"),
+            React.createElement(Tabs.Content, null,
+                React.createElement(FormLayout, null,
+                    React.createElement(FormRow, { label: "Sparkline Type" },
+                        React.createElement(Box, { maxWidth: 160 },
+                            React.createElement(Select, { options: sparklineTypeOptions, value: (_b = data.SparkLineStyle.options) === null || _b === void 0 ? void 0 : _b.type, onChange: (value) => handleOptionChange(['type'], value), placeholder: "Select Sparkline Type" }))),
                     isObjectNumberArray && (React.createElement(SparklineObjectNumberArrayProperties, { onOptionChange: handleOptionChange }))))),
         React.createElement(CommonProperties, { onOptionChange: handleOptionChange }),
         (() => {
@@ -282,4 +275,3 @@ const StyledColumnSparklineSettingsSection = (props) => {
             }
         })()));
 };
-exports.StyledColumnSparklineSettingsSection = StyledColumnSparklineSettingsSection;

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

@@ -1,39 +1,35 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.StyledColumnWizard = void 0;
-const tslib_1 = require("tslib");
-const React = tslib_1.__importStar(require("react"));
-const react_1 = require("react");
-const rebass_1 = require("rebass");
-const react_redux_1 = require("react-redux");
-const OnePageAdaptableWizard_1 = require("../../Wizard/OnePageAdaptableWizard");
-const ObjectFactory_1 = tslib_1.__importDefault(require("../../../Utilities/ObjectFactory"));
-const StyledColumnRedux = tslib_1.__importStar(require("../../../Redux/ActionsReducers/StyledColumnRedux"));
-const StyledColumnWizardTypeSection_1 = require("./StyledColumnWizardTypeSection");
-const StyledColumnWizardColumnSection_1 = require("./StyledColumnWizardColumnSection");
-const StyledColumnWizardStyleSection_1 = require("./StyledColumnWizardStyleSection");
-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) => {
+import * as React from 'react';
+import { useState } from 'react';
+import { Box } from 'rebass';
+import { useDispatch } from 'react-redux';
+import { OnePageAdaptableWizard, OnePageWizardSummary, } from '../../Wizard/OnePageAdaptableWizard';
+import ObjectFactory from '../../../Utilities/ObjectFactory';
+import * as StyledColumnRedux from '../../../Redux/ActionsReducers/StyledColumnRedux';
+import { renderStyledColumnTypeSummary, StyledColumnWizardTypeSection, } from './StyledColumnWizardTypeSection';
+import { isValidStyledColumnColumn, renderStyledColumnColumnSummary, StyledColumnWizardColumnSection, } from './StyledColumnWizardColumnSection';
+import { renderStyledColumnStyleSummary, StyledColumnWizardStyleSection, } from './StyledColumnWizardStyleSection';
+import { cloneObject } from '../../../Utilities/Helpers/Helper';
+import { renderStyledColumnWizardSettingsSummary, StyledColumnWizardSettingsSection, } from './StyledColumnWizardSettingsSection';
+import { StyledColumnSparklineSettingsSection } from './StyledColumnSparklineSettingsSection';
+import { ObjectTagsWizardSection, renderObjectTagsSummary, } from '../../Wizard/ObjectTagsWizardSection';
+import { renderBadgeSummary, StyledColumnBadgeSection } from './StyledColumnBadgeSection';
+export 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;
     const popupDefaultCurrentSectionName = (_e = (_d = (_c = props === null || props === void 0 ? void 0 : props.popupParams) === null || _c === void 0 ? void 0 : _c.config) === null || _d === void 0 ? void 0 : _d.defaultCurrentSectionName) !== null && _e !== void 0 ? _e : undefined;
     const defaultCurrentSectionName = (_f = props.defaultCurrentSectionName) !== null && _f !== void 0 ? _f : popupDefaultCurrentSectionName;
-    const [styledColumn, setStyledColumn] = (0, react_1.useState)(() => {
+    const [styledColumn, setStyledColumn] = useState(() => {
         var _a, _b;
         if (data) {
-            return (0, Helper_1.cloneObject)(data);
+            return cloneObject(data);
         }
-        const newData = ObjectFactory_1.default.CreateEmptyStyledColumn();
+        const newData = ObjectFactory.CreateEmptyStyledColumn();
         newData.GradientStyle = {};
         if (((_a = props.popupParams) === null || _a === void 0 ? void 0 : _a.column) && ((_b = props.popupParams) === null || _b === void 0 ? void 0 : _b.action) === 'New') {
             newData.ColumnId = props.popupParams.column.columnId;
             if (props.popupParams.column.dataType === 'String') {
                 newData.BadgeStyle = {
-                    Badges: [ObjectFactory_1.default.CreateDefaultStyledColumnBadge()],
+                    Badges: [ObjectFactory.CreateDefaultStyledColumnBadge()],
                 };
                 delete newData.GradientStyle;
             }
@@ -44,7 +40,7 @@ const StyledColumnWizard = (props) => {
         }
         return newData;
     });
-    const dispatch = (0, react_redux_1.useDispatch)();
+    const dispatch = useDispatch();
     const handleFinish = () => {
         var _a;
         if (((_a = props === null || props === void 0 ? void 0 : props.popupParams) === null || _a === void 0 ? void 0 : _a.action) === 'New' || !data) {
@@ -57,10 +53,10 @@ const StyledColumnWizard = (props) => {
     };
     const AdditionalSettingSection = {
         details: 'Apply Additional Settings',
-        renderSummary: StyledColumnWizardSettingsSection_1.renderStyledColumnWizardSettingsSummary,
+        renderSummary: renderStyledColumnWizardSettingsSummary,
         render: () => {
-            return (React.createElement(rebass_1.Box, { padding: 2 },
-                React.createElement(StyledColumnWizardSettingsSection_1.StyledColumnWizardSettingsSection, { onChange: setStyledColumn })));
+            return (React.createElement(Box, { padding: 2 },
+                React.createElement(StyledColumnWizardSettingsSection, { onChange: setStyledColumn })));
         },
         title: 'Settings',
     };
@@ -68,19 +64,18 @@ const StyledColumnWizard = (props) => {
     if (styledColumn.SparkLineStyle) {
         specificSteps.push({
             title: 'Settings',
-            render: () => (React.createElement(rebass_1.Box, { p: 2 },
-                React.createElement(StyledColumnSparklineSettingsSection_1.StyledColumnSparklineSettingsSection, { onChange: setStyledColumn }))),
+            render: () => (React.createElement(Box, { p: 2 },
+                React.createElement(StyledColumnSparklineSettingsSection, { onChange: setStyledColumn }))),
         });
     }
-    else if (styledColumn.CheckBoxStyle ||
-        styledColumn.GradientStyle ||
+    else if (styledColumn.GradientStyle ||
         styledColumn.PercentBarStyle) {
         specificSteps.push({
             details: 'Create the Style to apply',
-            renderSummary: StyledColumnWizardStyleSection_1.renderStyledColumnStyleSummary,
+            renderSummary: renderStyledColumnStyleSummary,
             render: () => {
-                return (React.createElement(rebass_1.Box, { padding: 2 },
-                    React.createElement(StyledColumnWizardStyleSection_1.StyledColumnWizardStyleSection, { onChange: setStyledColumn })));
+                return (React.createElement(Box, { padding: 2 },
+                    React.createElement(StyledColumnWizardStyleSection, { onChange: setStyledColumn })));
             },
             title: 'Style',
         }, AdditionalSettingSection);
@@ -99,28 +94,28 @@ const StyledColumnWizard = (props) => {
                 }
                 return true;
             },
-            renderSummary: () => (0, StyledColumnBadgeSection_1.renderBadgeSummary)(styledColumn),
-            render: () => (React.createElement(rebass_1.Box, { p: 2 },
-                React.createElement(StyledColumnBadgeSection_1.StyledColumnBadgeSection, { onChange: setStyledColumn }))),
+            renderSummary: () => renderBadgeSummary(styledColumn),
+            render: () => (React.createElement(Box, { p: 2 },
+                React.createElement(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: [
+    return (React.createElement(OnePageAdaptableWizard, { defaultCurrentSectionName: defaultCurrentSectionName, moduleInfo: props.moduleInfo, data: styledColumn, onFinish: handleFinish, onHide: props.onCloseWizard, sections: [
             {
                 details: 'Select a Styled Column type',
-                renderSummary: StyledColumnWizardTypeSection_1.renderStyledColumnTypeSummary,
+                renderSummary: renderStyledColumnTypeSummary,
                 render: () => {
-                    return React.createElement(StyledColumnWizardTypeSection_1.StyledColumnWizardTypeSection, { onChange: setStyledColumn });
+                    return React.createElement(StyledColumnWizardTypeSection, { onChange: setStyledColumn });
                 },
                 title: 'Type',
             },
             {
-                isValid: StyledColumnWizardColumnSection_1.isValidStyledColumnColumn,
-                renderSummary: StyledColumnWizardColumnSection_1.renderStyledColumnColumnSummary,
-                details: 'Select a Column where the Style will be applied',
+                isValid: isValidStyledColumnColumn,
+                renderSummary: renderStyledColumnColumnSummary,
+                details: 'Select the Column where the Style will be applied',
                 render: () => {
-                    return (React.createElement(rebass_1.Box, { padding: 2, style: { height: '100%' } },
-                        React.createElement(StyledColumnWizardColumnSection_1.StyledColumnWizardColumnSection, { isNew: props.isNew, onChange: setStyledColumn })));
+                    return (React.createElement(Box, { padding: 2, style: { height: '100%' } },
+                        React.createElement(StyledColumnWizardColumnSection, { isNew: props.isNew, onChange: setStyledColumn })));
                 },
                 title: 'Column',
             },
@@ -129,19 +124,18 @@ const StyledColumnWizard = (props) => {
                 details: 'Select Format Column Tags',
                 title: 'Tags',
                 isVisible: (_, api) => api.internalApi.shouldDisplayTagSections(),
-                render: () => (React.createElement(rebass_1.Box, { padding: 2 },
-                    React.createElement(ObjectTagsWizardSection_1.ObjectTagsWizardSection, { onChange: setStyledColumn }))),
-                renderSummary: ObjectTagsWizardSection_1.renderObjectTagsSummary,
+                render: () => (React.createElement(Box, { padding: 2 },
+                    React.createElement(ObjectTagsWizardSection, { onChange: setStyledColumn }))),
+                renderSummary: renderObjectTagsSummary,
             },
             '-',
             {
                 title: 'Summary',
                 details: 'Review your Styled Column',
                 render: () => {
-                    return (React.createElement(rebass_1.Box, { padding: 2 },
-                        React.createElement(OnePageAdaptableWizard_1.OnePageWizardSummary, null)));
+                    return (React.createElement(Box, { padding: 2 },
+                        React.createElement(OnePageWizardSummary, null)));
                 },
             },
         ] }));
 };
-exports.StyledColumnWizard = StyledColumnWizard;