@adaptabletools/adaptable 16.2.4 → 17.0.0-canary.1

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

@@ -2,7 +2,7 @@
 import { StyledColumn } from '../../../PredefinedConfig/StyledColumnState';
 export declare const renderStyledColumnColumnSummary: (data: StyledColumn) => JSX.Element;
 export declare const isValidStyledColumnColumn: (data: StyledColumn) => true | string;
-export declare type StyledColumnWizardColumnSectionProps = {
+export type StyledColumnWizardColumnSectionProps = {
     onChange: (data: StyledColumn) => void;
     isNew: boolean;
 };

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

@@ -1,42 +1,38 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.StyledColumnWizardColumnSection = exports.isValidStyledColumnColumn = exports.renderStyledColumnColumnSummary = void 0;
-const tslib_1 = require("tslib");
-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 ColumnSelector_1 = require("../../Components/ColumnSelector");
-const OnePageAdaptableWizard_1 = require("../../Wizard/OnePageAdaptableWizard");
-const renderStyledColumnColumnSummary = (data) => {
-    const { api } = (0, OnePageAdaptableWizard_1.useOnePageAdaptableWizardContext)();
-    return (React.createElement(rebass_1.Text, { pr: 2, py: 2 },
+import * as React from 'react';
+import { Text } from 'rebass';
+import { Tabs } from '../../../components/Tabs';
+import { Tag } from '../../../components/Tag';
+import { NewColumnSelector } from '../../Components/ColumnSelector';
+import { useOnePageAdaptableWizardContext } from '../../Wizard/OnePageAdaptableWizard';
+export const renderStyledColumnColumnSummary = (data) => {
+    const { api } = useOnePageAdaptableWizardContext();
+    return (React.createElement(Text, { pr: 2, py: 2 },
         "Styled Column column:",
         ' ',
-        React.createElement(Tag_1.Tag, null, data.ColumnId
+        React.createElement(Tag, null, data.ColumnId
             ? api.columnApi.getFriendlyNameForColumnId(data.ColumnId)
             : 'No Column Selected')));
 };
-exports.renderStyledColumnColumnSummary = renderStyledColumnColumnSummary;
-const isValidStyledColumnColumn = (data) => {
+export const isValidStyledColumnColumn = (data) => {
     if (!data.ColumnId) {
         return 'You have to select a Column for Styled Column';
     }
     return true;
 };
-exports.isValidStyledColumnColumn = isValidStyledColumnColumn;
-const StyledColumnWizardColumnSection = (props) => {
-    const { data, api } = (0, OnePageAdaptableWizard_1.useOnePageAdaptableWizardContext)();
+export const StyledColumnWizardColumnSection = (props) => {
+    const { data, api } = useOnePageAdaptableWizardContext();
     const sortableCols = React.useMemo(() => {
         let sortableColumns = [];
-        if (data.CheckBoxStyle) {
-            sortableColumns = api.columnApi.getBooleanColumns();
-        }
-        else if (data.SparkLineStyle) {
+        if (data.SparkLineStyle) {
             sortableColumns = api.columnApi.getNumericArrayColumns();
         }
         else if (data.BadgeStyle) {
-            sortableColumns = [...api.columnApi.getNumericColumns(), ...api.columnApi.getStringColumns(), ...api.columnApi.getStringArrayColumns(), ...api.columnApi.getNumberArrayColumns()];
+            sortableColumns = [
+                ...api.columnApi.getNumericColumns(),
+                ...api.columnApi.getStringColumns(),
+                ...api.columnApi.getStringArrayColumns(),
+                ...api.columnApi.getNumberArrayColumns(),
+            ];
         }
         else {
             sortableColumns = api.columnApi.getNumericColumns();
@@ -71,9 +67,8 @@ const StyledColumnWizardColumnSection = (props) => {
         }
         props.onChange(newStyledColumn);
     };
-    return (React.createElement(Tabs_1.Tabs, { style: { height: '100%' } },
-        React.createElement(Tabs_1.Tabs.Tab, null, "Column"),
-        React.createElement(Tabs_1.Tabs.Content, null,
-            React.createElement(ColumnSelector_1.NewColumnSelector, { availableColumns: sortableCols, selected: data.ColumnId ? [data.ColumnId] : [], singleSelect: true, onChange: handleColumnsChange, allowReorder: false }))));
+    return (React.createElement(Tabs, { style: { height: '100%' } },
+        React.createElement(Tabs.Tab, null, "Column"),
+        React.createElement(Tabs.Content, null,
+            React.createElement(NewColumnSelector, { availableColumns: sortableCols, selected: data.ColumnId ? [data.ColumnId] : [], singleSelect: true, onChange: handleColumnsChange, allowReorder: false }))));
 };
-exports.StyledColumnWizardColumnSection = StyledColumnWizardColumnSection;

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

@@ -1,6 +1,6 @@
 /// <reference types="react" />
 import { StyledColumn } from '../../../types';
-declare type StyledColumnWizardSettingsSectionSectionProps = {
+type StyledColumnWizardSettingsSectionSectionProps = {
     onChange: (data: StyledColumn) => void;
 };
 export declare const renderStyledColumnWizardSettingsSummary: (data: StyledColumn) => JSX.Element;

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

@@ -1,38 +1,32 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.StyledColumnWizardSettingsSection = exports.renderStyledColumnWizardSettingsSummary = void 0;
-const tslib_1 = require("tslib");
-const React = tslib_1.__importStar(require("react"));
-const rebass_1 = require("rebass");
-const FormLayout_1 = tslib_1.__importStar(require("../../../components/FormLayout"));
-const CheckBox_1 = require("../../../components/CheckBox");
-const Tabs_1 = require("../../../components/Tabs");
-const OnePageAdaptableWizard_1 = require("../../Wizard/OnePageAdaptableWizard");
-const Tag_1 = require("../../../components/Tag");
+import * as React from 'react';
+import { Box, Flex, Text } from 'rebass';
+import FormLayout, { FormRow } from '../../../components/FormLayout';
+import { CheckBox } from '../../../components/CheckBox';
+import { Tabs } from '../../../components/Tabs';
+import { useOnePageAdaptableWizardContext } from '../../Wizard/OnePageAdaptableWizard';
+import { Tag } from '../../../components/Tag';
 let alignmentOptions = [
     { value: 'Left', label: 'Left' },
     { value: 'Right', label: 'Right' },
     { value: 'Center', label: 'Center' },
 ];
-const renderStyledColumnWizardSettingsSummary = (data) => {
-    return (React.createElement(rebass_1.Box, { padding: 2 },
-        React.createElement(rebass_1.Text, { mt: 3 },
+export const renderStyledColumnWizardSettingsSummary = (data) => {
+    return (React.createElement(Box, { padding: 2 },
+        React.createElement(Text, { mt: 3 },
             "Include grouped rows ",
-            React.createElement(Tag_1.Tag, null, data.IncludeGroupedRows ? 'yes' : 'no'))));
+            React.createElement(Tag, null, data.IncludeGroupedRows ? 'yes' : 'no'))));
 };
-exports.renderStyledColumnWizardSettingsSummary = renderStyledColumnWizardSettingsSummary;
-const StyledColumnWizardSettingsSection = (props) => {
-    const { data, api } = (0, OnePageAdaptableWizard_1.useOnePageAdaptableWizardContext)();
+export const StyledColumnWizardSettingsSection = (props) => {
+    const { data, api } = useOnePageAdaptableWizardContext();
     const onIncludeGroupedRowsChanged = (IncludeGroupedRows) => {
         props.onChange(Object.assign(Object.assign({}, data), { IncludeGroupedRows }));
     };
-    return (React.createElement(Tabs_1.Tabs, null,
-        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,
-                    React.createElement(FormLayout_1.FormRow, { label: "Include Grouped Rows:" },
-                        React.createElement(rebass_1.Flex, { alignItems: "center", marginLeft: 2 },
-                            React.createElement(CheckBox_1.CheckBox, { "data-name": "include-grouped-rows-checkbox", checked: data.IncludeGroupedRows, onChange: onIncludeGroupedRowsChanged, mr: 2 }))))))));
+    return (React.createElement(Tabs, null,
+        React.createElement(Tabs.Tab, null, "Settings"),
+        React.createElement(Tabs.Content, null,
+            React.createElement(Flex, { flexDirection: "row" },
+                React.createElement(FormLayout, null,
+                    React.createElement(FormRow, { label: "Include Grouped Rows:" },
+                        React.createElement(Flex, { alignItems: "center", marginLeft: 2 },
+                            React.createElement(CheckBox, { "data-name": "include-grouped-rows-checkbox", checked: data.IncludeGroupedRows, onChange: onIncludeGroupedRowsChanged, mr: 2 }))))))));
 };
-exports.StyledColumnWizardSettingsSection = StyledColumnWizardSettingsSection;

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

@@ -1,16 +1,12 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.PercentBarColumnComparisonPreview = void 0;
-const tslib_1 = require("tslib");
-const React = tslib_1.__importStar(require("react"));
-const rebass_1 = require("rebass");
-const AdaptableContext_1 = require("../../../../AdaptableContext");
-const PercentBarStylePreview_1 = require("./PercentBarStylePreview");
-const PercentBarColumnComparisonPreview = (props) => {
-    const { api } = (0, AdaptableContext_1.useAdaptable)();
+import * as React from 'react';
+import { Box, Flex } from 'rebass';
+import { useAdaptable } from '../../../../AdaptableContext';
+import { PercentBarStylePreview } from './PercentBarStylePreview';
+export const PercentBarColumnComparisonPreview = (props) => {
+    const { api } = useAdaptable();
     const columnComparison = props.percentBarStyle.ColumnComparison;
-    return (React.createElement(rebass_1.Flex, { alignItems: "center", mr: 3 },
-        React.createElement(rebass_1.Box, { flexBasis: 120, mr: 3 },
+    return (React.createElement(Flex, { alignItems: "center", mr: 3 },
+        React.createElement(Box, { flexBasis: 120, mr: 3 },
             isNaN(Number(columnComparison.MinValue))
                 ? '[' + api.columnApi.getFriendlyNameForColumnId(String(columnComparison.MinValue)) + ']'
                 : columnComparison.MinValue,
@@ -21,6 +17,5 @@ const PercentBarColumnComparisonPreview = (props) => {
                 ? '[' + api.columnApi.getFriendlyNameForColumnId(String(columnComparison.MaxValue)) + ']'
                 : columnComparison.MaxValue,
             ' '),
-        React.createElement(PercentBarStylePreview_1.PercentBarStylePreview, { backgroundColor: columnComparison.Color, barBackgroundColor: props.percentBarStyle.BackColor, cellText: props.percentBarStyle.CellText, toolTipText: props.percentBarStyle.ToolTipText })));
+        React.createElement(PercentBarStylePreview, { backgroundColor: columnComparison.Color, barBackgroundColor: props.percentBarStyle.BackColor, cellText: props.percentBarStyle.CellText, toolTipText: props.percentBarStyle.ToolTipText })));
 };
-exports.PercentBarColumnComparisonPreview = PercentBarColumnComparisonPreview;

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

@@ -1,23 +1,18 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.PercentBarPreview = void 0;
-const tslib_1 = require("tslib");
-const React = tslib_1.__importStar(require("react"));
-const rebass_1 = require("rebass");
-const PercentBarStylePreview_1 = require("./PercentBarStylePreview");
-const PercentBarPreview = (props) => {
+import * as React from 'react';
+import { Flex } from 'rebass';
+import { PercentBarStylePreview } from './PercentBarStylePreview';
+export const PercentBarPreview = (props) => {
     let postfix = '';
     if (props.percentBarStyle.RangeValueType === 'Percentage') {
         postfix = '%';
     }
-    return (React.createElement(React.Fragment, null, props.percentBarStyle.CellRanges.map((range, i) => (React.createElement(rebass_1.Flex, { key: i, alignItems: "stretch", mr: 3, mb: 2 },
-        React.createElement(rebass_1.Flex, { flexBasis: 120, alignItems: "center", mr: 3 },
+    return (React.createElement(React.Fragment, null, props.percentBarStyle.CellRanges.map((range, i) => (React.createElement(Flex, { key: i, alignItems: "stretch", mr: 3, mb: 2 },
+        React.createElement(Flex, { flexBasis: 120, alignItems: "center", mr: 3 },
             range.Min,
             postfix,
             " to ",
             range.Max,
             postfix,
             ' '),
-        React.createElement(PercentBarStylePreview_1.PercentBarStylePreview, { backgroundColor: props.percentBarStyle.BackColor, barBackgroundColor: range.Color, cellText: props.percentBarStyle.CellText, toolTipText: props.percentBarStyle.ToolTipText }))))));
+        React.createElement(PercentBarStylePreview, { backgroundColor: props.percentBarStyle.BackColor, barBackgroundColor: range.Color, cellText: props.percentBarStyle.CellText, toolTipText: props.percentBarStyle.ToolTipText }))))));
 };
-exports.PercentBarPreview = PercentBarPreview;

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

@@ -1,9 +1,5 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.PercentBarStylePreview = void 0;
-const tslib_1 = require("tslib");
-const React = tslib_1.__importStar(require("react"));
-const rebass_1 = require("rebass");
+import * as React from 'react';
+import { Box, Flex } from 'rebass';
 const getText = (options) => {
     let text = '';
     if (options && options.includes('CellValue')) {
@@ -14,12 +10,11 @@ const getText = (options) => {
     }
     return text.trim();
 };
-const PercentBarStylePreview = (props) => {
+export const PercentBarStylePreview = (props) => {
     const cellText = getText(props.cellText);
     const tooltip = getText(props.toolTipText);
-    return (React.createElement(rebass_1.Box, { title: tooltip, flex: 1 },
-        React.createElement(rebass_1.Flex, { height: cellText ? 8 : 18, backgroundColor: props.backgroundColor, flex: 1 },
-            React.createElement(rebass_1.Box, { flexBasis: "50%", style: { background: props.barBackgroundColor } })),
-        cellText && React.createElement(rebass_1.Box, { fontSize: 3 }, cellText)));
+    return (React.createElement(Box, { title: tooltip, flex: 1 },
+        React.createElement(Flex, { height: cellText ? 8 : 18, backgroundColor: props.backgroundColor, flex: 1 },
+            React.createElement(Box, { flexBasis: "50%", style: { background: props.barBackgroundColor } })),
+        cellText && React.createElement(Box, { fontSize: 3 }, cellText)));
 };
-exports.PercentBarStylePreview = PercentBarStylePreview;

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

@@ -1,29 +1,24 @@
-"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 Tag_1 = require("../../../../../components/Tag");
-const AdaptableContext_1 = require("../../../../AdaptableContext");
-const Badge_1 = require("../../../../Components/Badge");
-const StyledColumnBadgePreview = ({ data }) => {
-    const adaptable = (0, AdaptableContext_1.useAdaptable)();
+import * as React from 'react';
+import { Box, Flex } from 'rebass';
+import { Tag } from '../../../../../components/Tag';
+import { DEFAULT_INTEGER_DISPLAY_VALUE, DEFAULT_STRING_DISPLAY_VALUE, } from '../../../../../Utilities/Constants/GeneralConstants';
+import { useAdaptable } from '../../../../AdaptableContext';
+import { Badge } from '../../../../Components/Badge';
+export const StyledColumnBadgePreview = ({ data }) => {
+    const adaptable = 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 value = adaptable.api.columnApi.getColumnDataTypeForColumnId(data.ColumnId) === 'Number'
+        ? DEFAULT_INTEGER_DISPLAY_VALUE
+        : DEFAULT_STRING_DISPLAY_VALUE;
+    return (React.createElement(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)));
+        return (React.createElement(Box, { mb: 1, key: index },
+            React.createElement(Badge, { icon: badge.Icon, adaptableStyle: badge.Style, iconPosition: badge.IconPosition }, value),
+            React.createElement(Tag, { ml: 2 }, predicateStr)));
     })));
 };
-exports.StyledColumnBadgePreview = StyledColumnBadgePreview;

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

@@ -1,49 +1,43 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.StyledColumnWizardStyleSection = exports.renderStyledColumnStyleSummary = exports.renderFormatColumnStyleWizardSummary = 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 ErrorBox_1 = tslib_1.__importDefault(require("../../../../components/ErrorBox"));
-const FormLayout_1 = tslib_1.__importStar(require("../../../../components/FormLayout"));
-const Tabs_1 = require("../../../../components/Tabs");
-const Tag_1 = require("../../../../components/Tag");
-const ColorPicker_1 = require("../../../../components/ColorPicker");
-const RangesComponent_1 = require("../../../Components/RangesComponent");
-const StyleVisualItem_1 = require("../../../Components/StyleVisualItem");
-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);
+import * as React from 'react';
+import { Box, Flex } from 'rebass';
+import { CheckBox } from '../../../../components/CheckBox';
+import ErrorBox from '../../../../components/ErrorBox';
+import FormLayout, { FormRow } from '../../../../components/FormLayout';
+import { Tag } from '../../../../components/Tag';
+import { ColorPicker } from '../../../../components/ColorPicker';
+import { RangesComponent } from '../../../Components/RangesComponent';
+import { StyleVisualItem } from '../../../Components/StyleVisualItem';
+import { getHexForName, GRAY } from '../../../UIHelper';
+import { useOnePageAdaptableWizardContext } from '../../../Wizard/OnePageAdaptableWizard';
+import { PercentBarColumnComparisonPreview } from './Components/PercentBarColumnComparisonPreview';
+import { PercentBarPreview } from './Components/PercentBarRangesPreview';
+import DropdownButton from '../../../../components/DropdownButton';
+import ArrayExtensions from '../../../../Utilities/Extensions/ArrayExtensions';
+export const renderFormatColumnStyleWizardSummary = (data) => {
+    const { api } = useOnePageAdaptableWizardContext();
+    return renderStyledColumnStyleSummary(data, api);
 };
-exports.renderFormatColumnStyleWizardSummary = renderFormatColumnStyleWizardSummary;
 const getRanges = (ranges, rangeValueType) => {
     let postfix = '';
     if (rangeValueType === 'Percentage') {
         postfix = '%';
     }
-    return ranges.map((r, i) => (React.createElement(rebass_1.Flex, { key: i, alignItems: "center", mr: 3 },
-        React.createElement(rebass_1.Box, { mr: 1 },
+    return ranges.map((r, i) => (React.createElement(Flex, { key: i, alignItems: "center", mr: 3 },
+        React.createElement(Box, { mr: 1 },
             r.Min,
             postfix,
             " to ",
             r.Max,
             postfix,
             ' '),
-        React.createElement(StyleVisualItem_1.StyleVisualItem, { Style: {
+        React.createElement(StyleVisualItem, { Style: {
                 BackColor: r.Color,
                 ForeColor: r.Color,
             } }))));
 };
 const getColumnComparison = (columnComparison, api) => {
-    return (React.createElement(rebass_1.Flex, { key: 'cc', alignItems: "center", mr: 3 },
-        React.createElement(rebass_1.Box, { mr: 1 },
+    return (React.createElement(Flex, { key: 'cc', alignItems: "center", mr: 3 },
+        React.createElement(Box, { mr: 1 },
             "Min Value:",
             ' ',
             isNaN(Number(columnComparison.MinValue))
@@ -56,15 +50,12 @@ const getColumnComparison = (columnComparison, api) => {
                 ? '[' + api.columnApi.getFriendlyNameForColumnId(String(columnComparison.MaxValue)) + ']'
                 : columnComparison.MaxValue,
             ' '),
-        React.createElement(StyleVisualItem_1.StyleVisualItem, { Style: {
+        React.createElement(StyleVisualItem, { Style: {
                 BackColor: columnComparison.Color,
                 ForeColor: columnComparison.Color,
             } })));
 };
-const renderStyledColumnStyleSummary = (data, api) => {
-    if (data.CheckBoxStyle) {
-        return React.createElement(Tag_1.Tag, null, "Checkbox Style");
-    }
+export const renderStyledColumnStyleSummary = (data, api) => {
     if (data.GradientStyle) {
         if (data.GradientStyle.CellRanges) {
             return getRanges(data.GradientStyle.CellRanges, data.GradientStyle.RangeValueType);
@@ -75,18 +66,17 @@ const renderStyledColumnStyleSummary = (data, api) => {
     }
     if (data.PercentBarStyle) {
         if (data.PercentBarStyle.ColumnComparison) {
-            return React.createElement(PercentBarColumnComparisonPreview_1.PercentBarColumnComparisonPreview, { percentBarStyle: data.PercentBarStyle });
+            return React.createElement(PercentBarColumnComparisonPreview, { percentBarStyle: data.PercentBarStyle });
         }
         if (data.PercentBarStyle.CellRanges) {
-            return React.createElement(PercentBarRangesPreview_1.PercentBarPreview, { percentBarStyle: data.PercentBarStyle });
+            return React.createElement(PercentBarPreview, { percentBarStyle: data.PercentBarStyle });
         }
     }
-    return React.createElement(Tag_1.Tag, null, "No Styling Defined");
+    return React.createElement(Tag, null, "No Styling Defined");
 };
-exports.renderStyledColumnStyleSummary = renderStyledColumnStyleSummary;
-const StyledColumnWizardStyleSection = (props) => {
+export const StyledColumnWizardStyleSection = (props) => {
     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 { data, api } = useOnePageAdaptableWizardContext();
     const minMaxRangeValues = React.useMemo(() => {
         const columnId = data.ColumnId;
         if (!columnId) {
@@ -204,7 +194,7 @@ const StyledColumnWizardStyleSection = (props) => {
     };
     const onUsePercentStyleColorCheckChanged = (checked) => {
         let percentBarStyle = data === null || data === void 0 ? void 0 : data.PercentBarStyle;
-        percentBarStyle.BackColor = checked ? (0, UIHelper_1.getHexForName)(UIHelper_1.GRAY) : null;
+        percentBarStyle.BackColor = checked ? getHexForName(GRAY) : null;
         props.onChange(Object.assign(Object.assign({}, data), { PercentBarStyle: percentBarStyle }));
     };
     const onForeColorSelectChange = (color) => {
@@ -219,7 +209,7 @@ const StyledColumnWizardStyleSection = (props) => {
                 {
                     Min: 0,
                     Max: 100,
-                    Color: (0, UIHelper_1.getHexForName)(UIHelper_1.GRAY),
+                    Color: getHexForName(GRAY),
                 },
             ];
         let newStyledColumn = data;
@@ -236,24 +226,20 @@ const StyledColumnWizardStyleSection = (props) => {
         props.onChange(newStyledColumn);
     }, [data]);
     const disabled = !data.ColumnId;
-    return (React.createElement(rebass_1.Box, null,
-        data.CheckBoxStyle && (React.createElement(Tabs_1.Tabs, null,
-            React.createElement(Tabs_1.Tabs.Tab, null, "Check Box Column"),
-            React.createElement(Tabs_1.Tabs.Content, null,
-                React.createElement(CheckBox_1.CheckBox, { marginLeft: 2, readOnly: true, checked: true }, "Display Column As CheckBox")))),
-        (data === null || data === void 0 ? void 0 : data.GradientStyle) && (React.createElement(RangesComponent_1.RangesComponent, { disabled: !data.ColumnId, minMaxRangeValues: minMaxRangeValues, api: api, scope: scope, showRangeDirection: true, ranges: (_a = data.GradientStyle) === null || _a === void 0 ? void 0 : _a.CellRanges, rangeValueType: (_b = data.GradientStyle) === null || _b === void 0 ? void 0 : _b.RangeValueType, onRangeValueTypeChange: handleRangeValueTypeChange, columnComparison: (_c = data === null || data === void 0 ? void 0 : data.GradientStyle) === null || _c === void 0 ? void 0 : _c.ColumnComparison, updateRanges: (ranges) => onUpdateGradientStyleRanges(ranges), updateColumnComparison: (columnComparison) => onUpdateGradientStyleColumnComparison(columnComparison) })),
+    return (React.createElement(Box, null,
+        (data === null || data === void 0 ? void 0 : data.GradientStyle) && (React.createElement(RangesComponent, { disabled: !data.ColumnId, minMaxRangeValues: minMaxRangeValues, api: api, scope: scope, showRangeDirection: true, ranges: (_a = data.GradientStyle) === null || _a === void 0 ? void 0 : _a.CellRanges, rangeValueType: (_b = data.GradientStyle) === null || _b === void 0 ? void 0 : _b.RangeValueType, onRangeValueTypeChange: handleRangeValueTypeChange, columnComparison: (_c = data === null || data === void 0 ? void 0 : data.GradientStyle) === null || _c === void 0 ? void 0 : _c.ColumnComparison, updateRanges: (ranges) => onUpdateGradientStyleRanges(ranges), updateColumnComparison: (columnComparison) => onUpdateGradientStyleColumnComparison(columnComparison) })),
         data.PercentBarStyle && (React.createElement(React.Fragment, null,
-            React.createElement(RangesComponent_1.RangesComponent, { disabled: disabled, minMaxRangeValues: minMaxRangeValues, api: api, scope: scope, showRangeDirection: false, ranges: (_d = data.PercentBarStyle) === null || _d === void 0 ? void 0 : _d.CellRanges, rangeValueType: (_e = data.PercentBarStyle) === null || _e === void 0 ? void 0 : _e.RangeValueType, onRangeValueTypeChange: handleRangeValueTypeChange, columnComparison: (_f = data === null || data === void 0 ? void 0 : data.PercentBarStyle) === null || _f === void 0 ? void 0 : _f.ColumnComparison, updateRanges: (ranges) => onUpdatePercentBarStyleRanges(ranges), updateColumnComparison: (columnComparison) => onUpdatePercentBarStyleColumnComparison(columnComparison) }),
-            React.createElement(FormLayout_1.default, { marginLeft: 2, marginTop: 2 },
-                React.createElement(FormLayout_1.FormRow, { label: "Cell Display:" },
-                    React.createElement(CheckBox_1.CheckBox, { disabled: disabled, marginLeft: 2, checked: (_h = (_g = data.PercentBarStyle) === null || _g === void 0 ? void 0 : _g.CellText) === null || _h === void 0 ? void 0 : _h.includes('CellValue'), onChange: (checked) => onPercentBarCellTextCellValueChanged(checked) }, "Cell Value"),
+            React.createElement(RangesComponent, { disabled: disabled, minMaxRangeValues: minMaxRangeValues, api: api, scope: scope, showRangeDirection: false, ranges: (_d = data.PercentBarStyle) === null || _d === void 0 ? void 0 : _d.CellRanges, rangeValueType: (_e = data.PercentBarStyle) === null || _e === void 0 ? void 0 : _e.RangeValueType, onRangeValueTypeChange: handleRangeValueTypeChange, columnComparison: (_f = data === null || data === void 0 ? void 0 : data.PercentBarStyle) === null || _f === void 0 ? void 0 : _f.ColumnComparison, updateRanges: (ranges) => onUpdatePercentBarStyleRanges(ranges), updateColumnComparison: (columnComparison) => onUpdatePercentBarStyleColumnComparison(columnComparison) }),
+            React.createElement(FormLayout, { marginLeft: 2, marginTop: 2 },
+                React.createElement(FormRow, { label: "Cell Display:" },
+                    React.createElement(CheckBox, { disabled: disabled, marginLeft: 2, checked: (_h = (_g = data.PercentBarStyle) === null || _g === void 0 ? void 0 : _g.CellText) === null || _h === void 0 ? void 0 : _h.includes('CellValue'), onChange: (checked) => onPercentBarCellTextCellValueChanged(checked) }, "Cell Value"),
                     ' ',
-                    React.createElement(CheckBox_1.CheckBox, { disabled: disabled, marginLeft: 3, checked: (_k = (_j = data === null || data === void 0 ? void 0 : data.PercentBarStyle) === null || _j === void 0 ? void 0 : _j.CellText) === null || _k === void 0 ? void 0 : _k.includes('PercentageValue'), onChange: (checked) => onPercentBarCellTextPercentValueChanged(checked) },
+                    React.createElement(CheckBox, { disabled: disabled, marginLeft: 3, checked: (_k = (_j = data === null || data === void 0 ? void 0 : data.PercentBarStyle) === null || _j === void 0 ? void 0 : _j.CellText) === null || _k === void 0 ? void 0 : _k.includes('PercentageValue'), onChange: (checked) => onPercentBarCellTextPercentValueChanged(checked) },
                         "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: [
+                React.createElement(FormRow, { label: "Cell Display Position:" },
+                    React.createElement(DropdownButton, { disabled: ArrayExtensions.IsNullOrEmpty(data.PercentBarStyle.CellText) || disabled, columns: ['label'], items: [
                             {
                                 label: 'Above Bar',
                                 onClick: () => handlePercentBarCellTextPositionChange('Above'),
@@ -267,17 +253,16 @@ const StyledColumnWizardStyleSection = (props) => {
                                 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: (_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(FormRow, { label: "ToolTip Display:" },
+                    React.createElement(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: (_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) },
+                    React.createElement(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: !!((_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.")));
+                React.createElement(FormRow, { label: `Back ${api.internalApi.getCorrectEnglishVariant('Colour')}` },
+                    React.createElement(Flex, { alignItems: "center", marginLeft: 2 },
+                        React.createElement(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, { 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, { mt: 2 }, "You need to select a column before styling.")));
 };
-exports.StyledColumnWizardStyleSection = StyledColumnWizardStyleSection;

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

@@ -1,4 +1 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-const tslib_1 = require("tslib");
-tslib_1.__exportStar(require("./StyledColumnWizardStyleSection"), exports);
+export * from './StyledColumnWizardStyleSection';