@adaptabletools/adaptable-cjs 23.0.0-canary.8 → 23.0.0

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

@@ -16,13 +16,12 @@ const OnePageAdaptableWizard_1 = require("../../Wizard/OnePageAdaptableWizard");
 const AdaptableInput_1 = tslib_1.__importDefault(require("../../Components/AdaptableInput"));
 const Flex_1 = require("../../../components/Flex");
 const BulletRangesSummaryPreview_1 = require("./StyledColumnWizardStyleSection/Components/BulletRangesSummaryPreview");
-const StyledColumnBulletPreview_1 = require("./StyledColumnWizardStyleSection/Components/StyledColumnBulletPreview");
 const NewSelect_1 = require("../../../components/NewSelect");
 const StyledColumnSliceStyleEditors_1 = require("./StyledColumnSliceStyleEditors");
 const Card_1 = require("../../../components/Card");
 const SummaryColorTag_1 = require("../../Wizard/SummaryColorTag");
-const barChartCellText_1 = require("../../../Utilities/Helpers/barChartCellText");
-const BarChartCellTextLayoutEditor_1 = require("./StyledColumnWizardStyleSection/Components/BarChartCellTextLayoutEditor");
+const BarStylesHelper_1 = require("../../../Utilities/Helpers/StyledColumns/BarStylesHelper");
+const BarStyleCellTextLayoutEditor_1 = require("./StyledColumnWizardStyleSection/Components/BarStyleCellTextLayoutEditor");
 const BULLET_STYLE_FORM_SIZES = ['200px', '1fr'];
 const getTargetSummary = (target) => {
     if (target == undefined) {
@@ -55,12 +54,8 @@ const formatBulletOriginLabel = (origin) => {
     }
     return origin;
 };
-const formatBulletCellTextSummary = (cellText) => cellText
-    ?.map((t) => (t === 'CellValue' ? 'Cell Value' : 'Percent Value'))
-    .join(' + ') ?? '';
-const formatBulletToolTipSummary = (toolTipText) => toolTipText
-    ?.map((t) => (t === 'CellValue' ? 'Cell Value' : 'Percent Value'))
-    .join(' + ') ?? '';
+const formatBulletCellTextSummary = (cellText) => cellText?.map((t) => (t === 'CellValue' ? 'Cell Value' : 'Percent Value')).join(' + ') ?? '';
+const formatBulletToolTipSummary = (toolTipText) => toolTipText?.map((t) => (t === 'CellValue' ? 'Cell Value' : 'Percent Value')).join(' + ') ?? '';
 const getStyledColumnBulletRangesViewValues = (data) => {
     const bullet = data.BulletChartStyle;
     if (!bullet) {
@@ -105,10 +100,10 @@ const buildStyledColumnBulletStyleSummaryStrings = (bullet, options) => {
     if (bullet.BackColor) {
         items.push(`Back Colour: ${bullet.BackColor}`);
     }
-    if ((0, barChartCellText_1.hasBarChartCellTextConfigured)(bullet.CellTextProperties)) {
-        const tokens = (0, barChartCellText_1.getActiveBarChartCellTextTokens)(bullet.CellTextProperties);
+    if ((0, BarStylesHelper_1.hasBarStyleCellTextConfigured)(bullet.CellTextProperties)) {
+        const tokens = (0, BarStylesHelper_1.getActiveBarStyleCellTextTokens)(bullet.CellTextProperties);
         items.push(`Cell Text: ${formatBulletCellTextSummary(tokens)}`);
-        const layoutSummary = (0, barChartCellText_1.formatBarChartCellTextLayoutSummary)((0, barChartCellText_1.resolveBarChartCellTextLayout)(bullet.CellTextProperties));
+        const layoutSummary = (0, BarStylesHelper_1.formatBarStyleCellTextLayoutSummary)((0, BarStylesHelper_1.resolveBarStyleCellTextLayout)(bullet.CellTextProperties));
         if (layoutSummary) {
             items.push(`Placement: ${layoutSummary}`);
         }
@@ -300,9 +295,7 @@ const StyledColumnWizardBulletSection = (props) => {
         }
         if (mode === 'Column') {
             // Use the first available numeric column (excluding the styled column itself)
-            const candidate = api.columnApi
-                .getNumericColumns()
-                .find((c) => c.columnId !== data.ColumnId);
+            const candidate = api.columnApi.getNumericColumns().find((c) => c.columnId !== data.ColumnId);
             setTarget(candidate?.columnId ?? '');
             return;
         }
@@ -334,11 +327,11 @@ const StyledColumnWizardBulletSection = (props) => {
     };
     // -- Cell text -------------------------------------------------------------
     const toggleCellText = (token, show) => {
-        update((0, barChartCellText_1.toggleBarChartCellTextToken)(bullet.CellTextProperties, token, show));
+        update((0, BarStylesHelper_1.toggleBarStyleCellTextToken)(bullet.CellTextProperties, token, show));
     };
     const onCellTextPlacementChange = (token, patch) => {
         update({
-            CellTextProperties: (0, barChartCellText_1.patchBarChartCellTextPlacement)(bullet.CellTextProperties, token, patch),
+            CellTextProperties: (0, BarStylesHelper_1.patchBarStyleCellTextPlacement)(bullet.CellTextProperties, token, patch),
         });
     };
     const toggleToolTipText = (token, checked) => {
@@ -368,7 +361,9 @@ const StyledColumnWizardBulletSection = (props) => {
         : typeof primaryTarget?.Value === 'number'
             ? primaryTarget.Value
             : undefined;
-    const columnTargetValue = typeof primaryTarget === 'string' && primaryTarget !== 'Col-Avg' && primaryTarget !== 'Col-Median'
+    const columnTargetValue = typeof primaryTarget === 'string' &&
+        primaryTarget !== 'Col-Avg' &&
+        primaryTarget !== 'Col-Median'
         ? primaryTarget
         : typeof primaryTarget?.Value === 'string'
             ? primaryTarget.Value
@@ -380,7 +375,7 @@ const StyledColumnWizardBulletSection = (props) => {
         Size: markerCfg?.Size ?? (markerCfg?.Shape === 'Line' ? 2 : 8),
     };
     const cellTextProperties = bullet.CellTextProperties;
-    const cellTextDisabled = !(0, barChartCellText_1.hasBarChartCellTextConfigured)(cellTextProperties) || disabled;
+    const cellTextDisabled = !(0, BarStylesHelper_1.hasBarStyleCellTextConfigured)(cellTextProperties) || disabled;
     return ((0, jsx_runtime_1.jsxs)(Flex_1.Box, { children: [(0, jsx_runtime_1.jsxs)(Card_1.Card, { shadow: false, className: "twa:mb-3", children: [(0, jsx_runtime_1.jsxs)(Card_1.Card.Title, { children: [(0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:font-medium", children: "Target" }), (0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:text-xs twa:opacity-70 twa:font-normal twa:max-w-[520px]", children: "Select a target value for the bullet scale" })] }), (0, jsx_runtime_1.jsx)(Card_1.Card.Body, { children: (0, jsx_runtime_1.jsxs)(FormLayout_1.default, { sizes: [...BULLET_STYLE_FORM_SIZES], children: [(0, jsx_runtime_1.jsx)(FormLayout_1.FormRow, { label: "Target:", children: (0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:max-w-[180px]", children: (0, jsx_runtime_1.jsx)(NewSelect_1.SingleSelect, { className: "twa:w-full", value: currentMode, onValueChange: (v) => handleTargetModeChange(v), items: [
                                                 { value: 'None', label: 'None' },
                                                 { value: 'Number', label: 'Fixed Number' },
@@ -392,7 +387,7 @@ const StyledColumnWizardBulletSection = (props) => {
                                                 { value: 'Vertical', label: 'Vertical' },
                                             ] }) }) }), bullet.Orientation === 'Vertical' && ((0, jsx_runtime_1.jsx)(FormLayout_1.FormRow, { label: "", children: (0, jsx_runtime_1.jsxs)(Flex_1.Box, { className: "twa:text-xs twa:text-neutral-500", children: ["Tip: vertical bullet charts need a tall row height to be readable (we recommend at least 60px). Set ", (0, jsx_runtime_1.jsx)("code", { children: "rowHeight" }), " on ", (0, jsx_runtime_1.jsx)("code", { children: " gridOptions " }), " or use", ' ', (0, jsx_runtime_1.jsx)("code", { children: "getRowHeight" }), "."] }) })), (0, jsx_runtime_1.jsx)(FormLayout_1.FormRow, { label: "Bar Colour:", children: (0, jsx_runtime_1.jsx)(ColorPicker_1.ColorPicker, { disabled: disabled, api: api, value: bullet.Bar?.Color, onChange: (c) => updateBar({ Color: c }) }) }), (0, jsx_runtime_1.jsx)(FormLayout_1.FormRow, { label: bullet.Orientation === 'Vertical' ? 'Bar Width (px):' : 'Bar Height (px):', children: (0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:max-w-[100px]", children: (0, jsx_runtime_1.jsx)(AdaptableInput_1.default, { type: "number", min: 1, value: bullet.Bar?.Height ?? '', onChange: (e) => updateBar({
                                                 Height: e.target.value === '' ? undefined : Number(e.target.value),
-                                            }), placeholder: "8" }) }) }), (0, jsx_runtime_1.jsx)(FormLayout_1.FormRow, { label: "Origin:", children: (0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:max-w-[160px]", children: (0, jsx_runtime_1.jsx)(NewSelect_1.SingleSelect, { className: "twa:w-full", value: typeof bullet.Origin === 'number' ? 'Number' : (bullet.Origin ?? 'Auto'), onValueChange: (v) => {
+                                            }), placeholder: "8" }) }) }), (0, jsx_runtime_1.jsx)(FormLayout_1.FormRow, { label: "Origin:", children: (0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:max-w-[160px]", children: (0, jsx_runtime_1.jsx)(NewSelect_1.SingleSelect, { className: "twa:w-full", value: typeof bullet.Origin === 'number' ? 'Number' : bullet.Origin ?? 'Auto', onValueChange: (v) => {
                                                 if (v === 'Auto' || v === 'Zero') {
                                                     update({ Origin: v });
                                                 }
@@ -402,7 +397,7 @@ const StyledColumnWizardBulletSection = (props) => {
                                             }, items: [
                                                 { value: 'Auto', label: 'Auto' },
                                                 { value: 'Zero', label: 'Zero' },
-                                            ] }) }) })] }) })] }), (0, jsx_runtime_1.jsxs)(Card_1.Card, { shadow: false, className: "twa:mb-3", children: [(0, jsx_runtime_1.jsxs)(Card_1.Card.Title, { children: [(0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:font-medium", children: "Cell Text" }), (0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:text-xs twa:opacity-70 twa:font-normal twa:max-w-[520px]", children: "Pick which values to display and where each one sits around the bar" })] }), (0, jsx_runtime_1.jsxs)(Card_1.Card.Body, { children: [(0, jsx_runtime_1.jsx)(FormLayout_1.default, { sizes: [...BULLET_STYLE_FORM_SIZES], children: (0, jsx_runtime_1.jsx)(FormLayout_1.FormRow, { label: "Cell Text Layout:", children: (0, jsx_runtime_1.jsx)(BarChartCellTextLayoutEditor_1.BarChartCellTextLayoutEditor, { disabled: disabled, cellTextProperties: cellTextProperties, onToggle: toggleCellText, onPlacementChange: onCellTextPlacementChange }) }) }), (0, jsx_runtime_1.jsx)(Flex_1.Box, { className: `twa:mt-3 twa:pt-3 twa:border-t twa:border-foreground/15 ${cellTextDisabled ? 'twa:opacity-50' : ''}`, children: (0, jsx_runtime_1.jsx)(StyledColumnSliceStyleEditors_1.StyledColumnFontStyleEditor, { api: api, disabled: cellTextDisabled, value: bullet.Font, onChange: (next) => {
+                                            ] }) }) })] }) })] }), (0, jsx_runtime_1.jsxs)(Card_1.Card, { shadow: false, className: "twa:mb-3", children: [(0, jsx_runtime_1.jsxs)(Card_1.Card.Title, { children: [(0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:font-medium", children: "Cell Text" }), (0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:text-xs twa:opacity-70 twa:font-normal twa:max-w-[520px]", children: "Pick which values to display and where each one sits around the bar" })] }), (0, jsx_runtime_1.jsxs)(Card_1.Card.Body, { children: [(0, jsx_runtime_1.jsx)(FormLayout_1.default, { sizes: [...BULLET_STYLE_FORM_SIZES], children: (0, jsx_runtime_1.jsx)(BarStyleCellTextLayoutEditor_1.BarStyleCellTextLayoutEditor, { disabled: disabled, cellTextProperties: cellTextProperties, onToggle: toggleCellText, onPlacementChange: onCellTextPlacementChange }) }), (0, jsx_runtime_1.jsx)(Flex_1.Box, { className: `twa:mt-3 twa:pt-3 twa:border-t twa:border-foreground/15 ${cellTextDisabled ? 'twa:opacity-50' : ''}`, children: (0, jsx_runtime_1.jsx)(StyledColumnSliceStyleEditors_1.StyledColumnFontStyleEditor, { api: api, disabled: cellTextDisabled, value: bullet.Font, onChange: (next) => {
                                         if (next) {
                                             update({ Font: next });
                                         }
@@ -411,6 +406,6 @@ const StyledColumnWizardBulletSection = (props) => {
                                             delete cleaned.Font;
                                             props.onChange({ ...data, BulletChartStyle: cleaned });
                                         }
-                                    } }) })] })] }), (0, jsx_runtime_1.jsxs)(Card_1.Card, { shadow: false, className: "twa:mb-3", children: [(0, jsx_runtime_1.jsxs)(Card_1.Card.Title, { children: [(0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:font-medium", children: "Tooltip" }), (0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:text-xs twa:opacity-70 twa:font-normal twa:max-w-[520px]", children: "Choose whether to display a tooltip" })] }), (0, jsx_runtime_1.jsx)(Card_1.Card.Body, { children: (0, jsx_runtime_1.jsx)(FormLayout_1.default, { sizes: [...BULLET_STYLE_FORM_SIZES], children: (0, jsx_runtime_1.jsxs)(FormLayout_1.FormRow, { label: "Tooltip Display:", children: [(0, jsx_runtime_1.jsx)(CheckBox_1.CheckBox, { disabled: disabled, checked: bullet.ToolTipText?.includes('CellValue'), onChange: (checked) => toggleToolTipText('CellValue', checked), children: "Cell Value" }), ' ', (0, jsx_runtime_1.jsx)(CheckBox_1.CheckBox, { disabled: disabled, className: "twa:ml-3", checked: bullet.ToolTipText?.includes('PercentageValue'), onChange: (checked) => toggleToolTipText('PercentageValue', checked), children: "Percent Value" })] }) }) })] }), (0, jsx_runtime_1.jsx)(StyledColumnBulletPreview_1.StyledColumnBulletPreviewCard, { data: data })] }));
+                                    } }) })] })] }), (0, jsx_runtime_1.jsxs)(Card_1.Card, { shadow: false, className: "twa:mb-3", children: [(0, jsx_runtime_1.jsxs)(Card_1.Card.Title, { children: [(0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:font-medium", children: "Tooltip" }), (0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:text-xs twa:opacity-70 twa:font-normal twa:max-w-[520px]", children: "Choose whether to display a tooltip" })] }), (0, jsx_runtime_1.jsx)(Card_1.Card.Body, { children: (0, jsx_runtime_1.jsx)(FormLayout_1.default, { sizes: [...BULLET_STYLE_FORM_SIZES], children: (0, jsx_runtime_1.jsxs)(FormLayout_1.FormRow, { label: "Tooltip Display:", children: [(0, jsx_runtime_1.jsx)(CheckBox_1.CheckBox, { disabled: disabled, checked: bullet.ToolTipText?.includes('CellValue'), onChange: (checked) => toggleToolTipText('CellValue', checked), children: "Cell Value" }), ' ', (0, jsx_runtime_1.jsx)(CheckBox_1.CheckBox, { disabled: disabled, className: "twa:ml-3", checked: bullet.ToolTipText?.includes('PercentageValue'), onChange: (checked) => toggleToolTipText('PercentageValue', checked), children: "Percent Value" })] }) }) })] })] }));
 };
 exports.StyledColumnWizardBulletSection = StyledColumnWizardBulletSection;

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

@@ -11,11 +11,10 @@ const Tag_1 = require("../../../components/Tag");
 const OnePageAdaptableWizard_1 = require("../../Wizard/OnePageAdaptableWizard");
 const Flex_1 = require("../../../components/Flex");
 const NumberInput_1 = require("../../../components/Input/NumberInput");
-const StyledColumnGradientHelper_1 = require("../../../Utilities/Helpers/StyledColumnGradientHelper");
+const GradientStyleHelper_1 = require("../../../Utilities/Helpers/StyledColumns/GradientStyleHelper");
 const StyledColumnSliceStyleEditors_1 = require("./StyledColumnSliceStyleEditors");
 const Card_1 = require("../../../components/Card");
 const SummaryColorTag_1 = require("../../Wizard/SummaryColorTag");
-const StyledColumnGradientPreview_1 = require("./StyledColumnWizardStyleSection/Components/StyledColumnGradientPreview");
 const STYLE_FORM_SIZES = ['200px', '1fr'];
 function formatGradientToolTipSummary(opts) {
     return opts
@@ -23,8 +22,8 @@ function formatGradientToolTipSummary(opts) {
         .join(' + ');
 }
 const buildStyledColumnGradientStyleSummaryStrings = (gs, options) => {
-    const minA = gs.MinAlpha ?? StyledColumnGradientHelper_1.DEFAULT_GRADIENT_MIN_ALPHA;
-    const maxA = gs.MaxAlpha ?? StyledColumnGradientHelper_1.DEFAULT_GRADIENT_MAX_ALPHA;
+    const minA = gs.MinAlpha ?? GradientStyleHelper_1.DEFAULT_GRADIENT_MIN_ALPHA;
+    const maxA = gs.MaxAlpha ?? GradientStyleHelper_1.DEFAULT_GRADIENT_MAX_ALPHA;
     const items = [`Alpha: ${minA} → ${maxA}`];
     if (gs.AutoContrastText) {
         items.push('Auto Contrast: On');
@@ -90,10 +89,10 @@ const StyledColumnWizardGradientSection = (props) => {
             patchGradient({ ToolTipText: next });
         }
     };
-    const minAlphaDisplay = gs.MinAlpha ?? StyledColumnGradientHelper_1.DEFAULT_GRADIENT_MIN_ALPHA;
-    const maxAlphaDisplay = gs.MaxAlpha ?? StyledColumnGradientHelper_1.DEFAULT_GRADIENT_MAX_ALPHA;
-    return ((0, jsx_runtime_1.jsxs)(Flex_1.Box, { children: [(0, jsx_runtime_1.jsxs)(Card_1.Card, { shadow: false, className: "twa:mb-3", children: [(0, jsx_runtime_1.jsxs)(Card_1.Card.Title, { children: [(0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:font-medium", children: "Transparency" }), (0, jsx_runtime_1.jsxs)(Flex_1.Box, { className: "twa:text-xs twa:opacity-70 twa:font-normal twa:max-w-[480px]", children: ["Used at low and high ends of range; defaults are ", StyledColumnGradientHelper_1.DEFAULT_GRADIENT_MIN_ALPHA, " &", ' ', StyledColumnGradientHelper_1.DEFAULT_GRADIENT_MAX_ALPHA, " (Min 0 fades out lowest values)"] })] }), (0, jsx_runtime_1.jsx)(Card_1.Card.Body, { children: (0, jsx_runtime_1.jsx)(FormLayout_1.default, { sizes: [...STYLE_FORM_SIZES], children: (0, jsx_runtime_1.jsx)(FormLayout_1.FormRow, { label: "Alpha range:", children: (0, jsx_runtime_1.jsxs)(Flex_1.Flex, { alignItems: "center", className: "twa:ml-2 twa:flex-wrap twa:gap-3", children: [(0, jsx_runtime_1.jsxs)(Flex_1.Flex, { alignItems: "center", className: "twa:gap-1", children: [(0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:text-sm", children: "Min" }), (0, jsx_runtime_1.jsx)(NumberInput_1.NumberInput, { disabled: disabled, className: "twa:w-20", value: minAlphaDisplay, min: 0, max: 1, step: 0.05, onChange: (v) => {
-                                                        if (v === StyledColumnGradientHelper_1.DEFAULT_GRADIENT_MIN_ALPHA) {
+    const minAlphaDisplay = gs.MinAlpha ?? GradientStyleHelper_1.DEFAULT_GRADIENT_MIN_ALPHA;
+    const maxAlphaDisplay = gs.MaxAlpha ?? GradientStyleHelper_1.DEFAULT_GRADIENT_MAX_ALPHA;
+    return ((0, jsx_runtime_1.jsxs)(Flex_1.Box, { children: [(0, jsx_runtime_1.jsxs)(Card_1.Card, { shadow: false, className: "twa:mb-3", children: [(0, jsx_runtime_1.jsxs)(Card_1.Card.Title, { children: [(0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:font-medium", children: "Transparency" }), (0, jsx_runtime_1.jsxs)(Flex_1.Box, { className: "twa:text-xs twa:opacity-70 twa:font-normal twa:max-w-[480px]", children: ["Used at low and high ends of range; defaults are ", GradientStyleHelper_1.DEFAULT_GRADIENT_MIN_ALPHA, " &", ' ', GradientStyleHelper_1.DEFAULT_GRADIENT_MAX_ALPHA, " (Min 0 fades out lowest values)"] })] }), (0, jsx_runtime_1.jsx)(Card_1.Card.Body, { children: (0, jsx_runtime_1.jsx)(FormLayout_1.default, { sizes: [...STYLE_FORM_SIZES], children: (0, jsx_runtime_1.jsx)(FormLayout_1.FormRow, { label: "Alpha range:", children: (0, jsx_runtime_1.jsxs)(Flex_1.Flex, { alignItems: "center", className: "twa:ml-2 twa:flex-wrap twa:gap-3", children: [(0, jsx_runtime_1.jsxs)(Flex_1.Flex, { alignItems: "center", className: "twa:gap-1", children: [(0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:text-sm", children: "Min" }), (0, jsx_runtime_1.jsx)(NumberInput_1.NumberInput, { disabled: disabled, className: "twa:w-20", value: minAlphaDisplay, min: 0, max: 1, step: 0.05, onChange: (v) => {
+                                                        if (v === GradientStyleHelper_1.DEFAULT_GRADIENT_MIN_ALPHA) {
                                                             const { MinAlpha: _m, ...rest } = gs;
                                                             props.onChange({ ...data, GradientStyle: rest });
                                                         }
@@ -101,7 +100,7 @@ const StyledColumnWizardGradientSection = (props) => {
                                                             patchGradient({ MinAlpha: v });
                                                         }
                                                     } })] }), (0, jsx_runtime_1.jsxs)(Flex_1.Flex, { alignItems: "center", className: "twa:gap-1", children: [(0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:text-sm", children: "Max" }), (0, jsx_runtime_1.jsx)(NumberInput_1.NumberInput, { disabled: disabled, className: "twa:w-20", value: maxAlphaDisplay, min: 0, max: 1, step: 0.05, onChange: (v) => {
-                                                        if (v === StyledColumnGradientHelper_1.DEFAULT_GRADIENT_MAX_ALPHA) {
+                                                        if (v === GradientStyleHelper_1.DEFAULT_GRADIENT_MAX_ALPHA) {
                                                             const { MaxAlpha: _m, ...rest } = gs;
                                                             props.onChange({ ...data, GradientStyle: rest });
                                                         }
@@ -116,6 +115,6 @@ const StyledColumnWizardGradientSection = (props) => {
                                 else {
                                     patchGradient({ AutoContrastText: true });
                                 }
-                            }, children: "Make text readable on tinted backgrounds" }) })] }), (0, jsx_runtime_1.jsxs)(Card_1.Card, { shadow: false, className: "twa:mb-3", children: [(0, jsx_runtime_1.jsxs)(Card_1.Card.Title, { children: [(0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:font-medium", children: "Tooltip" }), (0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:text-xs twa:opacity-70 twa:font-normal twa:max-w-[600px]", children: "Set Tooltip properties" })] }), (0, jsx_runtime_1.jsx)(Card_1.Card.Body, { children: (0, jsx_runtime_1.jsx)(FormLayout_1.default, { sizes: [...STYLE_FORM_SIZES], children: (0, jsx_runtime_1.jsx)(FormLayout_1.FormRow, { label: "Tooltip:", children: (0, jsx_runtime_1.jsxs)(Flex_1.Box, { className: "twa:ml-2", children: [(0, jsx_runtime_1.jsx)(CheckBox_1.CheckBox, { disabled: disabled, checked: gs.ToolTipText?.includes('CellValue'), onChange: (checked) => onToolTipTextChanged('CellValue', checked), children: "Cell Value" }), ' ', (0, jsx_runtime_1.jsx)(CheckBox_1.CheckBox, { disabled: disabled, className: "twa:ml-3", checked: gs.ToolTipText?.includes('PercentageValue'), onChange: (checked) => onToolTipTextChanged('PercentageValue', checked), children: "Percent along scale" })] }) }) }) })] }), (0, jsx_runtime_1.jsxs)(Card_1.Card, { shadow: false, children: [(0, jsx_runtime_1.jsxs)(Card_1.Card.Title, { children: [(0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:font-medium", children: "Font" }), (0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:text-xs twa:opacity-70 twa:font-normal twa:max-w-[480px]", children: "Optional font properties (takes precedence over Format Column)" })] }), (0, jsx_runtime_1.jsx)(Card_1.Card.Body, { children: (0, jsx_runtime_1.jsx)(StyledColumnSliceStyleEditors_1.StyledColumnFontStyleEditor, { api: api, disabled: disabled, value: gs.Font, onChange: onFontChange }) })] }), (0, jsx_runtime_1.jsx)(StyledColumnGradientPreview_1.StyledColumnGradientPreviewCard, { data: data }), !data.ColumnId && ((0, jsx_runtime_1.jsx)(ErrorBox_1.default, { className: "twa:mt-2", children: "Select a column before changing Gradient style." }))] }));
+                            }, children: "Make text readable on tinted backgrounds" }) })] }), (0, jsx_runtime_1.jsxs)(Card_1.Card, { shadow: false, className: "twa:mb-3", children: [(0, jsx_runtime_1.jsxs)(Card_1.Card.Title, { children: [(0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:font-medium", children: "Tooltip" }), (0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:text-xs twa:opacity-70 twa:font-normal twa:max-w-[600px]", children: "Set Tooltip properties" })] }), (0, jsx_runtime_1.jsx)(Card_1.Card.Body, { children: (0, jsx_runtime_1.jsx)(FormLayout_1.default, { sizes: [...STYLE_FORM_SIZES], children: (0, jsx_runtime_1.jsx)(FormLayout_1.FormRow, { label: "Tooltip:", children: (0, jsx_runtime_1.jsxs)(Flex_1.Box, { className: "twa:ml-2", children: [(0, jsx_runtime_1.jsx)(CheckBox_1.CheckBox, { disabled: disabled, checked: gs.ToolTipText?.includes('CellValue'), onChange: (checked) => onToolTipTextChanged('CellValue', checked), children: "Cell Value" }), ' ', (0, jsx_runtime_1.jsx)(CheckBox_1.CheckBox, { disabled: disabled, className: "twa:ml-3", checked: gs.ToolTipText?.includes('PercentageValue'), onChange: (checked) => onToolTipTextChanged('PercentageValue', checked), children: "Percent along scale" })] }) }) }) })] }), (0, jsx_runtime_1.jsxs)(Card_1.Card, { shadow: false, children: [(0, jsx_runtime_1.jsxs)(Card_1.Card.Title, { children: [(0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:font-medium", children: "Font" }), (0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:text-xs twa:opacity-70 twa:font-normal twa:max-w-[480px]", children: "Optional font properties (takes precedence over Format Column)" })] }), (0, jsx_runtime_1.jsx)(Card_1.Card.Body, { children: (0, jsx_runtime_1.jsx)(StyledColumnSliceStyleEditors_1.StyledColumnFontStyleEditor, { api: api, disabled: disabled, value: gs.Font, onChange: onFontChange }) })] }), !data.ColumnId && ((0, jsx_runtime_1.jsx)(ErrorBox_1.default, { className: "twa:mt-2", children: "Select a column before changing Gradient style." }))] }));
 };
 exports.StyledColumnWizardGradientSection = StyledColumnWizardGradientSection;

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

@@ -18,12 +18,11 @@ const IconSelector_1 = require("../../../components/IconSelector");
 const OnePageAdaptableWizard_1 = require("../../Wizard/OnePageAdaptableWizard");
 const AdaptableContext_1 = require("../../AdaptableContext");
 const AdaptableIconComponent_1 = require("../../Components/AdaptableIconComponent");
-const IconStylePresets_1 = require("../../../Utilities/Helpers/IconStylePresets");
+const IconStyleHelper_1 = require("../../../Utilities/Helpers/StyledColumns/IconStyleHelper");
 const IconRenderer_1 = require("../../../agGrid/cellRenderers/IconRenderer");
 const Card_1 = require("../../../components/Card");
 const SummaryColorTag_1 = require("../../Wizard/SummaryColorTag");
 const StyledColumnSliceStyleEditors_1 = require("./StyledColumnSliceStyleEditors");
-const StyledColumnIconPreview_1 = require("./StyledColumnWizardStyleSection/Components/StyledColumnIconPreview");
 const wizardSelection_1 = require("../../../Utilities/wizardSelection");
 const STYLE_FORM_SIZES = ['200px', '1fr'];
 const detectIconKind = (spec) => {
@@ -73,7 +72,7 @@ const getStyledColumnIconMappingsViewValues = (data) => {
     const effectiveMappings = (0, IconRenderer_1.resolveEffectiveIconStyleMappings)(ic);
     const items = [`Mappings: ${effectiveMappings.length}`];
     if (ic.Preset) {
-        items.push(`Preset: ${IconStylePresets_1.ICON_STYLE_PRESET_LABELS[ic.Preset]}`);
+        items.push(`Preset: ${IconStyleHelper_1.ICON_STYLE_PRESET_LABELS[ic.Preset]}`);
     }
     const customCount = ic.Mappings?.length ?? 0;
     if (customCount > 0) {
@@ -308,9 +307,9 @@ const StyledColumnWizardIconSection = (props) => {
     // -----------------------------------------------------------------------
     if (props.variant === 'mappings') {
         const presetMappingsPreview = iconStyle.Preset
-            ? (0, IconStylePresets_1.getIconStylePresetMappings)(iconStyle.Preset)
+            ? (0, IconStyleHelper_1.getIconStylePresetMappings)(iconStyle.Preset)
             : [];
-        return ((0, jsx_runtime_1.jsxs)(Flex_1.Box, { children: [(0, jsx_runtime_1.jsxs)(Card_1.Card, { shadow: false, className: "twa:mb-3", children: [(0, jsx_runtime_1.jsxs)(Card_1.Card.Title, { children: [(0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:font-medium", children: "Presets" }), (0, jsx_runtime_1.jsxs)(Flex_1.Box, { className: "twa:text-xs twa:opacity-70 twa:font-normal twa:max-w-[520px]", children: ["Contains most commonly used values; add anything missing in", ' ', (0, jsx_runtime_1.jsx)("strong", { children: "Custom mappings" }), " below"] })] }), (0, jsx_runtime_1.jsx)(Card_1.Card.Body, { children: (0, jsx_runtime_1.jsxs)(FormLayout_1.default, { children: [(0, jsx_runtime_1.jsx)(FormLayout_1.FormRow, { label: "Select Preset:", children: (0, jsx_runtime_1.jsxs)(Flex_1.Flex, { alignItems: "center", className: "twa:gap-2 twa:flex-wrap", children: [['Flags', 'Currencies', 'Trend', 'Status'].map((p) => ((0, jsx_runtime_1.jsx)(SimpleButton_1.default, { ...(0, wizardSelection_1.wizardSelectionSimpleButtonProps)(iconStyle.Preset === p), onClick: () => applyPreset(p), children: IconStylePresets_1.ICON_STYLE_PRESET_LABELS[p] }, p))), iconStyle.Preset && ((0, jsx_runtime_1.jsx)(SimpleButton_1.default, { variant: "text", icon: "undo", tooltip: "Stop using this preset (custom mappings are kept)", onClick: clearPreset, children: "Clear preset" }))] }) }), iconStyle.Preset && ((0, jsx_runtime_1.jsx)(FormLayout_1.FormRow, { label: "Active:", children: (0, jsx_runtime_1.jsxs)(Flex_1.Flex, { flexDirection: "column", className: "twa:gap-1 twa:max-w-[640px]", children: [(0, jsx_runtime_1.jsxs)(Flex_1.Box, { className: "twa:text-xs twa:opacity-70", children: [IconStylePresets_1.ICON_STYLE_PRESET_DESCRIPTIONS[iconStyle.Preset], " \u2014", ' ', presetMappingsPreview.length, " mappings shipped with the preset."] }), renderMappingsPreview(presetMappingsPreview)] }) }))] }) })] }), (0, jsx_runtime_1.jsxs)(Card_1.Card, { shadow: false, className: "twa:mb-3", children: [(0, jsx_runtime_1.jsxs)(Card_1.Card.Title, { children: [(0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:font-medium", children: "Custom Mappings" }), (0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:text-xs twa:opacity-70 twa:font-normal twa:max-w-[520px]", children: iconStyle.Preset
+        return ((0, jsx_runtime_1.jsxs)(Flex_1.Box, { children: [(0, jsx_runtime_1.jsxs)(Card_1.Card, { shadow: false, className: "twa:mb-3", children: [(0, jsx_runtime_1.jsxs)(Card_1.Card.Title, { children: [(0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:font-medium", children: "Presets" }), (0, jsx_runtime_1.jsxs)(Flex_1.Box, { className: "twa:text-xs twa:opacity-70 twa:font-normal twa:max-w-[520px]", children: ["Contains most commonly used values; add anything missing in", ' ', (0, jsx_runtime_1.jsx)("strong", { children: "Custom mappings" }), " below"] })] }), (0, jsx_runtime_1.jsx)(Card_1.Card.Body, { children: (0, jsx_runtime_1.jsxs)(FormLayout_1.default, { children: [(0, jsx_runtime_1.jsx)(FormLayout_1.FormRow, { label: "Select Preset:", children: (0, jsx_runtime_1.jsxs)(Flex_1.Flex, { alignItems: "center", className: "twa:gap-2 twa:flex-wrap", children: [['Flags', 'Currencies', 'Trend', 'Status'].map((p) => ((0, jsx_runtime_1.jsx)(SimpleButton_1.default, { ...(0, wizardSelection_1.wizardSelectionSimpleButtonProps)(iconStyle.Preset === p), onClick: () => applyPreset(p), children: IconStyleHelper_1.ICON_STYLE_PRESET_LABELS[p] }, p))), iconStyle.Preset && ((0, jsx_runtime_1.jsx)(SimpleButton_1.default, { variant: "text", icon: "undo", tooltip: "Stop using this preset (custom mappings are kept)", onClick: clearPreset, children: "Clear preset" }))] }) }), iconStyle.Preset && ((0, jsx_runtime_1.jsx)(FormLayout_1.FormRow, { label: "Active:", children: (0, jsx_runtime_1.jsxs)(Flex_1.Flex, { flexDirection: "column", className: "twa:gap-1 twa:max-w-[640px]", children: [(0, jsx_runtime_1.jsxs)(Flex_1.Box, { className: "twa:text-xs twa:opacity-70", children: [IconStyleHelper_1.ICON_STYLE_PRESET_DESCRIPTIONS[iconStyle.Preset], " \u2014", ' ', presetMappingsPreview.length, " mappings shipped with the preset."] }), renderMappingsPreview(presetMappingsPreview)] }) }))] }) })] }), (0, jsx_runtime_1.jsxs)(Card_1.Card, { shadow: false, className: "twa:mb-3", children: [(0, jsx_runtime_1.jsxs)(Card_1.Card.Title, { children: [(0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:font-medium", children: "Custom Mappings" }), (0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:text-xs twa:opacity-70 twa:font-normal twa:max-w-[520px]", children: iconStyle.Preset
                                         ? 'Add any mappings that are not present in the selected preset'
                                         : 'Add custom mappings entries (icon, key and description)' })] }), (0, jsx_runtime_1.jsxs)(Card_1.Card.Body, { children: [mappings.length === 0 ? ((0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:text-xs twa:opacity-60 twa:max-w-[520px] twa:mb-2", children: iconStyle.Preset
                                         ? 'No custom mappings — the preset above is being used as-is'
@@ -350,7 +349,7 @@ const StyledColumnWizardIconSection = (props) => {
                                                     { value: 'After', label: 'After' },
                                                     { value: 'Above', label: 'Above' },
                                                     { value: 'Below', label: 'Below' },
-                                                ] }) }) })] }), (0, jsx_runtime_1.jsx)(Flex_1.Box, { className: `twa:mt-3 twa:pt-3 twa:border-t twa:border-foreground/15 ${cellTextDisabled ? 'twa:opacity-50' : ''}`, children: (0, jsx_runtime_1.jsx)(StyledColumnSliceStyleEditors_1.StyledColumnFontStyleEditor, { api: api, disabled: disabled || cellTextDisabled, value: iconStyle.Font, onChange: onFontChange }) })] })] }), (0, jsx_runtime_1.jsxs)(Card_1.Card, { shadow: false, className: "twa:mb-3", children: [(0, jsx_runtime_1.jsxs)(Card_1.Card.Title, { children: [(0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:font-medium", children: "Tooltip" }), (0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:text-xs twa:opacity-70 twa:font-normal twa:max-w-[520px]", children: "Choose whether and how to display a tooltip" })] }), (0, jsx_runtime_1.jsx)(Card_1.Card.Body, { children: (0, jsx_runtime_1.jsx)(FormLayout_1.default, { sizes: [...STYLE_FORM_SIZES], children: (0, jsx_runtime_1.jsxs)(FormLayout_1.FormRow, { label: "Tooltip Display:", children: [(0, jsx_runtime_1.jsx)(CheckBox_1.CheckBox, { checked: toolTipText.includes('CellValue'), onChange: (checked) => toggleToolTipText('CellValue', checked), children: "Cell Value" }), ' ', (0, jsx_runtime_1.jsx)(CheckBox_1.CheckBox, { className: "twa:ml-3", checked: toolTipText.includes('IconDescription'), onChange: (checked) => toggleToolTipText('IconDescription', checked), children: "Description" })] }) }) })] }), (0, jsx_runtime_1.jsxs)(Card_1.Card, { shadow: false, children: [(0, jsx_runtime_1.jsxs)(Card_1.Card.Title, { children: [(0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:font-medium", children: "Cell" }), (0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:text-xs twa:opacity-70 twa:font-normal twa:max-w-[520px]", children: "Optional cell box styling (overrides Format Column properties)" })] }), (0, jsx_runtime_1.jsx)(Card_1.Card.Body, { children: (0, jsx_runtime_1.jsx)(StyledColumnSliceStyleEditors_1.StyledColumnCellStyleEditor, { api: api, disabled: disabled, value: iconStyle.Cell, onChange: onCellChange }) })] }), (0, jsx_runtime_1.jsx)(StyledColumnIconPreview_1.StyledColumnIconPreviewCard, { data: data })] }));
+                                                ] }) }) })] }), (0, jsx_runtime_1.jsx)(Flex_1.Box, { className: `twa:mt-3 twa:pt-3 twa:border-t twa:border-foreground/15 ${cellTextDisabled ? 'twa:opacity-50' : ''}`, children: (0, jsx_runtime_1.jsx)(StyledColumnSliceStyleEditors_1.StyledColumnFontStyleEditor, { api: api, disabled: disabled || cellTextDisabled, value: iconStyle.Font, onChange: onFontChange }) })] })] }), (0, jsx_runtime_1.jsxs)(Card_1.Card, { shadow: false, className: "twa:mb-3", children: [(0, jsx_runtime_1.jsxs)(Card_1.Card.Title, { children: [(0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:font-medium", children: "Tooltip" }), (0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:text-xs twa:opacity-70 twa:font-normal twa:max-w-[520px]", children: "Choose whether and how to display a tooltip" })] }), (0, jsx_runtime_1.jsx)(Card_1.Card.Body, { children: (0, jsx_runtime_1.jsx)(FormLayout_1.default, { sizes: [...STYLE_FORM_SIZES], children: (0, jsx_runtime_1.jsxs)(FormLayout_1.FormRow, { label: "Tooltip Display:", children: [(0, jsx_runtime_1.jsx)(CheckBox_1.CheckBox, { checked: toolTipText.includes('CellValue'), onChange: (checked) => toggleToolTipText('CellValue', checked), children: "Cell Value" }), ' ', (0, jsx_runtime_1.jsx)(CheckBox_1.CheckBox, { className: "twa:ml-3", checked: toolTipText.includes('IconDescription'), onChange: (checked) => toggleToolTipText('IconDescription', checked), children: "Description" })] }) }) })] }), (0, jsx_runtime_1.jsxs)(Card_1.Card, { shadow: false, children: [(0, jsx_runtime_1.jsxs)(Card_1.Card.Title, { children: [(0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:font-medium", children: "Cell" }), (0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:text-xs twa:opacity-70 twa:font-normal twa:max-w-[520px]", children: "Optional cell box styling (overrides Format Column properties)" })] }), (0, jsx_runtime_1.jsx)(Card_1.Card.Body, { children: (0, jsx_runtime_1.jsx)(StyledColumnSliceStyleEditors_1.StyledColumnCellStyleEditor, { api: api, disabled: disabled, value: iconStyle.Cell, onChange: onCellChange }) })] })] }));
 };
 exports.StyledColumnWizardIconSection = StyledColumnWizardIconSection;
 // ---------------------------------------------------------------------------

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

@@ -18,11 +18,10 @@ const AdaptableInput_1 = tslib_1.__importDefault(require("../../Components/Adapt
 const Flex_1 = require("../../../components/Flex");
 const NewSelect_1 = require("../../../components/NewSelect");
 const RangeBarRangesSummaryPreview_1 = require("./StyledColumnWizardStyleSection/Components/RangeBarRangesSummaryPreview");
-const StyledColumnRangeBarPreview_1 = require("./StyledColumnWizardStyleSection/Components/StyledColumnRangeBarPreview");
 const Card_1 = require("../../../components/Card");
 const SummaryColorTag_1 = require("../../Wizard/SummaryColorTag");
-const barChartCellText_1 = require("../../../Utilities/Helpers/barChartCellText");
-const BarChartCellTextLayoutEditor_1 = require("./StyledColumnWizardStyleSection/Components/BarChartCellTextLayoutEditor");
+const BarStylesHelper_1 = require("../../../Utilities/Helpers/StyledColumns/BarStylesHelper");
+const BarStyleCellTextLayoutEditor_1 = require("./StyledColumnWizardStyleSection/Components/BarStyleCellTextLayoutEditor");
 const RANGE_STYLE_FORM_SIZES = ['200px', '1fr'];
 const BOUND_MODE_LABELS = {
     Number: 'Fixed Number',
@@ -110,14 +109,10 @@ const RangeBarBoundInput = ({ api, value, optional, fallbackNumber, excludeColum
         'twa:[&_.ab-Input]:w-full twa:[&_.ab-Input]:rounded-l-none!',
         'twa:[&_[data-slot=input-group]]:w-full! twa:[&_[data-slot=input-group]]:rounded-l-none!',
     ].join(' ');
-    return ((0, jsx_runtime_1.jsxs)(InputGroup_1.InputGroup, { Component: Flex_1.Flex, className: "twa:items-stretch twa:max-w-[22rem]", children: [(0, jsx_runtime_1.jsx)(NewSelect_1.SingleSelect, { className: `twa:w-[150px] twa:max-w-none twa:shrink-0 twa:box-border${hasEditor ? ' twa:rounded-r-none!' : ''}`, disabled: disabled, value: mode, items: items, onValueChange: (v) => handleModeChange(v) }), hasEditor && (0, jsx_runtime_1.jsx)(Flex_1.Box, { className: editorWrapperClassName, children: editor })] }));
+    return ((0, jsx_runtime_1.jsxs)(InputGroup_1.InputGroup, { Component: Flex_1.Flex, className: "twa:items-stretch twa:max-w-[22rem]", children: [(0, jsx_runtime_1.jsx)(NewSelect_1.SingleSelect, { className: `twa:w-[150px] twa:max-w-none twa:shrink-0 twa:box-border${hasEditor ? 'twa:rounded-r-none!' : ''}`, disabled: disabled, value: mode, items: items, onValueChange: (v) => handleModeChange(v) }), hasEditor && (0, jsx_runtime_1.jsx)(Flex_1.Box, { className: editorWrapperClassName, children: editor })] }));
 };
-const formatRangeBarCellTextSummary = (cellText) => cellText
-    ?.map((t) => (t === 'CellValue' ? 'Cell Value' : 'Percent Value'))
-    .join(' + ') ?? '';
-const formatRangeBarToolTipSummary = (toolTipText) => toolTipText
-    ?.map((t) => (t === 'CellValue' ? 'Cell Value' : 'Percent Value'))
-    .join(' + ') ?? '';
+const formatRangeBarCellTextSummary = (cellText) => cellText?.map((t) => (t === 'CellValue' ? 'Cell Value' : 'Percent Value')).join(' + ') ?? '';
+const formatRangeBarToolTipSummary = (toolTipText) => toolTipText?.map((t) => (t === 'CellValue' ? 'Cell Value' : 'Percent Value')).join(' + ') ?? '';
 const getStyledColumnRangeBarRangeViewValues = (data) => {
     const range = data.RangeBarStyle;
     if (!range) {
@@ -182,10 +177,10 @@ const buildStyledColumnRangeBarDisplaySummaryStrings = (range, options) => {
     if (range.BackColor) {
         items.push(`Back Colour: ${range.BackColor}`);
     }
-    if ((0, barChartCellText_1.hasBarChartCellTextConfigured)(range.CellTextProperties)) {
-        const tokens = (0, barChartCellText_1.getActiveBarChartCellTextTokens)(range.CellTextProperties);
+    if ((0, BarStylesHelper_1.hasBarStyleCellTextConfigured)(range.CellTextProperties)) {
+        const tokens = (0, BarStylesHelper_1.getActiveBarStyleCellTextTokens)(range.CellTextProperties);
         items.push(`Cell Text: ${formatRangeBarCellTextSummary(tokens)}`);
-        const layoutSummary = (0, barChartCellText_1.formatBarChartCellTextLayoutSummary)((0, barChartCellText_1.resolveBarChartCellTextLayout)(range.CellTextProperties));
+        const layoutSummary = (0, BarStylesHelper_1.formatBarStyleCellTextLayoutSummary)((0, BarStylesHelper_1.resolveBarStyleCellTextLayout)(range.CellTextProperties));
         if (layoutSummary) {
             items.push(`Placement: ${layoutSummary}`);
         }
@@ -381,7 +376,9 @@ const StyledColumnWizardRangeBarSection = (props) => {
     const resolvedBoundValues = {
         'Col-Min': minMaxRangeValues?.min,
         'Col-Max': minMaxRangeValues?.max,
-        'Col-Avg': column ? api.styledColumnApi.internalApi.getAvgValueForNumericColumn(column) : undefined,
+        'Col-Avg': column
+            ? api.styledColumnApi.internalApi.getAvgValueForNumericColumn(column)
+            : undefined,
         'Col-Median': column
             ? api.styledColumnApi.internalApi.getMedianValueForNumericColumn(column)
             : undefined,
@@ -448,11 +445,11 @@ const StyledColumnWizardRangeBarSection = (props) => {
     };
     // -- Cell text -------------------------------------------------------------
     const toggleCellText = (token, show) => {
-        update((0, barChartCellText_1.toggleBarChartCellTextToken)(range.CellTextProperties, token, show));
+        update((0, BarStylesHelper_1.toggleBarStyleCellTextToken)(range.CellTextProperties, token, show));
     };
     const onCellTextPlacementChange = (token, patch) => {
         update({
-            CellTextProperties: (0, barChartCellText_1.patchBarChartCellTextPlacement)(range.CellTextProperties, token, patch),
+            CellTextProperties: (0, BarStylesHelper_1.patchBarStyleCellTextPlacement)(range.CellTextProperties, token, patch),
         });
     };
     const toggleToolTipText = (token, checked) => {
@@ -501,6 +498,6 @@ const StyledColumnWizardRangeBarSection = (props) => {
                                                         { value: 'Clamp', label: 'Clamp to edge' },
                                                         { value: 'Overflow', label: 'Show outside' },
                                                         { value: 'Hide', label: 'Hide marker' },
-                                                    ] }) }) }), outOfRangeMode === 'Clamp' && ((0, jsx_runtime_1.jsx)(FormLayout_1.FormRow, { label: `Out-of-range ${api.internalApi.getCorrectEnglishVariant('Colour')}:`, children: (0, jsx_runtime_1.jsx)(ColorPicker_1.OptionalColorPicker, { disabled: disabled, api: api, value: range.OutOfRange?.Color, defaultColor: "crimson", onChange: (c) => updateOutOfRangeProperties({ Color: c }) }) }))] }) })] }), (0, jsx_runtime_1.jsxs)(Card_1.Card, { shadow: false, children: [(0, jsx_runtime_1.jsxs)(Card_1.Card.Title, { children: [(0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:font-medium", children: "Text & Tooltip" }), (0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:text-xs twa:opacity-70 twa:font-normal twa:max-w-[520px]", children: "Optional cell-text overlay and AG Grid tooltip content." })] }), (0, jsx_runtime_1.jsx)(Card_1.Card.Body, { children: (0, jsx_runtime_1.jsxs)(FormLayout_1.default, { sizes: [...RANGE_STYLE_FORM_SIZES], children: [(0, jsx_runtime_1.jsx)(FormLayout_1.FormRow, { label: "Cell Text Layout:", children: (0, jsx_runtime_1.jsx)(BarChartCellTextLayoutEditor_1.BarChartCellTextLayoutEditor, { disabled: disabled, cellTextProperties: range.CellTextProperties, onToggle: toggleCellText, onPlacementChange: onCellTextPlacementChange }) }), (0, jsx_runtime_1.jsxs)(FormLayout_1.FormRow, { label: "Tooltip Display:", children: [(0, jsx_runtime_1.jsx)(CheckBox_1.CheckBox, { disabled: disabled, checked: range.ToolTipText?.includes('CellValue'), onChange: (checked) => toggleToolTipText('CellValue', checked), children: "Cell Value" }), ' ', (0, jsx_runtime_1.jsx)(CheckBox_1.CheckBox, { disabled: disabled, className: "twa:ml-3", checked: range.ToolTipText?.includes('PercentageValue'), onChange: (checked) => toggleToolTipText('PercentageValue', checked), children: "Percent Value" })] })] }) })] }), (0, jsx_runtime_1.jsx)(StyledColumnRangeBarPreview_1.StyledColumnRangeBarPreviewCard, { data: data })] }))] }));
+                                                    ] }) }) }), outOfRangeMode === 'Clamp' && ((0, jsx_runtime_1.jsx)(FormLayout_1.FormRow, { label: `Out-of-range ${api.internalApi.getCorrectEnglishVariant('Colour')}:`, children: (0, jsx_runtime_1.jsx)(ColorPicker_1.OptionalColorPicker, { disabled: disabled, api: api, value: range.OutOfRange?.Color, defaultColor: "crimson", onChange: (c) => updateOutOfRangeProperties({ Color: c }) }) }))] }) })] }), (0, jsx_runtime_1.jsxs)(Card_1.Card, { shadow: false, children: [(0, jsx_runtime_1.jsxs)(Card_1.Card.Title, { children: [(0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:font-medium", children: "Text & Tooltip" }), (0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:text-xs twa:opacity-70 twa:font-normal twa:max-w-[520px]", children: "Optional cell-text overlay and AG Grid tooltip content." })] }), (0, jsx_runtime_1.jsx)(Card_1.Card.Body, { children: (0, jsx_runtime_1.jsxs)(FormLayout_1.default, { sizes: [...RANGE_STYLE_FORM_SIZES], children: [(0, jsx_runtime_1.jsx)(BarStyleCellTextLayoutEditor_1.BarStyleCellTextLayoutEditor, { disabled: disabled, cellTextProperties: range.CellTextProperties, onToggle: toggleCellText, onPlacementChange: onCellTextPlacementChange }), (0, jsx_runtime_1.jsxs)(FormLayout_1.FormRow, { label: "Tooltip Display:", children: [(0, jsx_runtime_1.jsx)(CheckBox_1.CheckBox, { disabled: disabled, checked: range.ToolTipText?.includes('CellValue'), onChange: (checked) => toggleToolTipText('CellValue', checked), children: "Cell Value" }), ' ', (0, jsx_runtime_1.jsx)(CheckBox_1.CheckBox, { disabled: disabled, className: "twa:ml-3", checked: range.ToolTipText?.includes('PercentageValue'), onChange: (checked) => toggleToolTipText('PercentageValue', checked), children: "Percent Value" })] })] }) })] })] }))] }));
 };
 exports.StyledColumnWizardRangeBarSection = StyledColumnWizardRangeBarSection;

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

@@ -195,6 +195,6 @@ const StyledColumnWizardRatingSection = (props) => {
                                     delete cleaned.Cell;
                                     props.onChange({ ...data, RatingStyle: cleaned });
                                 }
-                            } }) })] }), (0, jsx_runtime_1.jsx)(StyledColumnRatingPreview_1.StyledColumnRatingPreviewCard, { data: data })] }));
+                            } }) })] })] }));
 };
 exports.StyledColumnWizardRatingSection = StyledColumnWizardRatingSection;

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

@@ -10,8 +10,8 @@ const OnePageAdaptableWizard_1 = require("../../Wizard/OnePageAdaptableWizard");
 const Flex_1 = require("../../../components/Flex");
 const CheckBox_1 = require("../../../components/CheckBox");
 const utils_1 = require("../../../lib/utils");
-const styledColumnRowKindSupport_1 = require("../../../Utilities/Helpers/styledColumnRowKindSupport");
-const iconStyledColumnColumnSupport_1 = require("../../../Utilities/Helpers/iconStyledColumnColumnSupport");
+const StyledColumnHelper_1 = require("../../../Utilities/Helpers/StyledColumns/StyledColumnHelper");
+const IconStyleHelper_1 = require("../../../Utilities/Helpers/StyledColumns/IconStyleHelper");
 const CollapsibleWizardCard_1 = require("../../Wizard/CollapsibleWizardCard");
 // ---------------------------------------------------------------------------
 // Row-kind helpers
@@ -37,23 +37,23 @@ const defaultRowKindIncluded = (styledColumn, kind) => {
     if (styledColumn.BadgeStyle) {
         return true;
     }
-    if (!(0, styledColumnRowKindSupport_1.isStyledColumnRowKindSupported)(styledColumn, kind)) {
+    if (!(0, StyledColumnHelper_1.isStyledColumnRowKindSupported)(styledColumn, kind)) {
         return false;
     }
     return kind !== 'Group';
 };
 const isRowKindIncluded = (styledColumn, kind) => {
-    if (!(0, styledColumnRowKindSupport_1.isStyledColumnRowKindSupported)(styledColumn, kind)) {
+    if (!(0, StyledColumnHelper_1.isStyledColumnRowKindSupported)(styledColumn, kind)) {
         return false;
     }
     const scope = styledColumn.RowScope;
     if (scope) {
-        return !scope[styledColumnRowKindSupport_1.STYLED_COLUMN_ROW_KIND_EXCLUDE_KEY[kind]];
+        return !scope[StyledColumnHelper_1.STYLED_COLUMN_ROW_KIND_EXCLUDE_KEY[kind]];
     }
     return defaultRowKindIncluded(styledColumn, kind);
 };
 const collectIncludedRowKinds = (styledColumn) => {
-    return styledColumnRowKindSupport_1.STYLED_COLUMN_ROW_KINDS.filter((k) => isRowKindIncluded(styledColumn, k));
+    return StyledColumnHelper_1.STYLED_COLUMN_ROW_KINDS.filter((k) => isRowKindIncluded(styledColumn, k));
 };
 // ---------------------------------------------------------------------------
 // Summary
@@ -86,7 +86,7 @@ const isValidStyledColumnScope = (data, api) => {
         return 'Please select a column for the Styled Column.';
     }
     if (data.IconStyle &&
-        (0, iconStyledColumnColumnSupport_1.isUnsupportedColumnDataTypeForIconStyle)(api.columnApi.getColumnDataTypeForColumnId(data.ColumnId))) {
+        (0, IconStyleHelper_1.isUnsupportedColumnDataTypeForIconStyle)(api.columnApi.getColumnDataTypeForColumnId(data.ColumnId))) {
         return 'Icon Style applies to scalar cell values only. Choose a numeric or plain text column, or use Badge Style for array columns.';
     }
     if (collectIncludedRowKinds(data).length === 0) {
@@ -95,15 +95,15 @@ const isValidStyledColumnScope = (data, api) => {
     return true;
 };
 exports.isValidStyledColumnScope = isValidStyledColumnScope;
-const StyledColumnRowScopePanel = ({ data, onRowKindChange, }) => ((0, jsx_runtime_1.jsx)(Flex_1.Flex, { flexDirection: "column", className: "twa:items-start twa:px-1 twa:py-1", style: { rowGap: 'calc(var(--ab-base-space) * 2)' }, children: styledColumnRowKindSupport_1.STYLED_COLUMN_ROW_KINDS.map((kind) => {
-        const supported = (0, styledColumnRowKindSupport_1.isStyledColumnRowKindSupported)(data, kind);
-        const disabledReason = (0, styledColumnRowKindSupport_1.getStyledColumnRowKindDisabledReason)(data, kind);
+const StyledColumnRowScopePanel = ({ data, onRowKindChange, }) => ((0, jsx_runtime_1.jsx)(Flex_1.Flex, { flexDirection: "column", className: "twa:items-start twa:px-1 twa:py-1", style: { rowGap: 'calc(var(--ab-base-space) * 2)' }, children: StyledColumnHelper_1.STYLED_COLUMN_ROW_KINDS.map((kind) => {
+        const supported = (0, StyledColumnHelper_1.isStyledColumnRowKindSupported)(data, kind);
+        const disabledReason = (0, StyledColumnHelper_1.getStyledColumnRowKindDisabledReason)(data, kind);
         return ((0, jsx_runtime_1.jsx)(CheckBox_1.CheckBox, { "data-name": `include-${kind.toLowerCase()}-rows-checkbox`, disabled: !supported, title: disabledReason, checked: isRowKindIncluded(data, kind), onChange: (checked) => onRowKindChange(kind, checked), children: ROW_KIND_LABELS[kind] }, kind));
     }) }));
 const StyledColumnWizardScopeSection = (props) => {
     const { data, api } = (0, OnePageAdaptableWizard_1.useOnePageAdaptableWizardContext)();
     React.useEffect(() => {
-        const next = (0, styledColumnRowKindSupport_1.sanitizeStyledColumnRowScope)(data);
+        const next = (0, StyledColumnHelper_1.sanitizeStyledColumnRowScope)(data);
         if (!next) {
             return;
         }
@@ -131,7 +131,7 @@ const StyledColumnWizardScopeSection = (props) => {
             return;
         }
         const dt = api.columnApi.getColumnDataTypeForColumnId(data.ColumnId);
-        if ((0, iconStyledColumnColumnSupport_1.isUnsupportedColumnDataTypeForIconStyle)(dt)) {
+        if ((0, IconStyleHelper_1.isUnsupportedColumnDataTypeForIconStyle)(dt)) {
             props.onChange({
                 ...data,
                 ColumnId: undefined,
@@ -201,7 +201,7 @@ const StyledColumnWizardScopeSection = (props) => {
         props.onChange(newStyledColumn);
     };
     const handleRowKindChange = (kind, include) => {
-        if (!(0, styledColumnRowKindSupport_1.isStyledColumnRowKindSupported)(data, kind)) {
+        if (!(0, StyledColumnHelper_1.isStyledColumnRowKindSupported)(data, kind)) {
             return;
         }
         const baseScope = data.RowScope ?? {
@@ -212,7 +212,7 @@ const StyledColumnWizardScopeSection = (props) => {
         };
         const nextScope = {
             ...baseScope,
-            [styledColumnRowKindSupport_1.STYLED_COLUMN_ROW_KIND_EXCLUDE_KEY[kind]]: !include,
+            [StyledColumnHelper_1.STYLED_COLUMN_ROW_KIND_EXCLUDE_KEY[kind]]: !include,
         };
         props.onChange({
             ...data,

package/src/View/StyledColumn/Wizard/StyledColumnWizardStyleSection/Components/{BarChartCellTextLayoutEditor.d.ts → BarStyleCellTextLayoutEditor.d.ts}

@@ -1,9 +1,9 @@
 import * as React from 'react';
-import { BarChartCellTextPlacement, BarChartCellTextProperties } from '../../../../../AdaptableState/StyledColumns/Common/BarChartCellText';
+import { BarStyleCellTextPlacement, BarStyleCellTextProperties } from '../../../../../AdaptableState/StyledColumns/Common/BarStyleProperties';
 import { CellTextOption } from '../../../../../AdaptableState/StyledColumns/Common/CellTextOptions';
-export declare const BarChartCellTextLayoutEditor: React.FunctionComponent<{
+export declare const BarStyleCellTextLayoutEditor: React.FunctionComponent<{
     disabled?: boolean;
-    cellTextProperties?: BarChartCellTextProperties;
+    cellTextProperties?: BarStyleCellTextProperties;
     onToggle: (token: CellTextOption, show: boolean) => void;
-    onPlacementChange: (token: CellTextOption, patch: Partial<BarChartCellTextPlacement>) => void;
+    onPlacementChange: (token: CellTextOption, patch: Partial<BarStyleCellTextPlacement>) => void;
 }>;

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

@@ -0,0 +1,37 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.BarStyleCellTextLayoutEditor = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const BarStylesHelper_1 = require("../../../../../Utilities/Helpers/StyledColumns/BarStylesHelper");
+const CheckBox_1 = require("../../../../../components/CheckBox");
+const Flex_1 = require("../../../../../components/Flex");
+const FormLayout_1 = require("../../../../../components/FormLayout");
+const NewSelect_1 = require("../../../../../components/NewSelect");
+const HORIZONTAL_CHOICES = [
+    { value: 'Left', label: 'Left' },
+    { value: 'Center', label: 'Center' },
+    { value: 'Right', label: 'Right' },
+];
+const VERTICAL_CHOICES = [
+    { value: 'Above', label: 'Above Bar' },
+    { value: 'Below', label: 'Below Bar' },
+    { value: 'Merged', label: 'Merged' },
+];
+const ROWS = [
+    { token: 'CellValue', label: 'Cell Value:', key: 'CellValue' },
+    { token: 'PercentageValue', label: 'Percent Value:', key: 'PercentValue' },
+];
+const BarStyleCellTextLayoutEditor = ({ disabled, cellTextProperties, onToggle, onPlacementChange }) => {
+    const layout = (0, BarStylesHelper_1.resolveBarStyleCellTextLayout)(cellTextProperties);
+    return ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: ROWS.map(({ token, label, key }) => {
+            const placement = layout[key];
+            const isShown = Boolean(placement);
+            const rowDisabled = disabled || !isShown;
+            return ((0, jsx_runtime_1.jsx)(FormLayout_1.FormRow, { label: label, children: (0, jsx_runtime_1.jsxs)(Flex_1.Flex, { alignItems: "center", className: "twa:gap-3", children: [(0, jsx_runtime_1.jsx)(CheckBox_1.CheckBox, { disabled: disabled, checked: isShown, onChange: (checked) => onToggle(token, checked) }), (0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:w-[140px]", children: (0, jsx_runtime_1.jsx)(NewSelect_1.SingleSelect, { className: "twa:w-full", disabled: rowDisabled, value: placement?.Horizontal ?? 'Left', onValueChange: (v) => onPlacementChange(token, {
+                                    Horizontal: v,
+                                }), items: HORIZONTAL_CHOICES }) }), (0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:w-[140px]", children: (0, jsx_runtime_1.jsx)(NewSelect_1.SingleSelect, { className: "twa:w-full", disabled: rowDisabled, value: placement?.Vertical ?? 'Below', onValueChange: (v) => onPlacementChange(token, {
+                                    Vertical: v,
+                                }), items: VERTICAL_CHOICES }) })] }) }, token));
+        }) }));
+};
+exports.BarStyleCellTextLayoutEditor = BarStyleCellTextLayoutEditor;

package/src/View/StyledColumn/Wizard/StyledColumnWizardStyleSection/Components/{BarChartCellTextPreview.d.ts → BarStyleCellTextPreview.d.ts}

@@ -1,6 +1,6 @@
 import * as React from 'react';
-import { BarChartCellTextProperties } from '../../../../../AdaptableState/StyledColumns/Common/BarChartCellText';
-import { BarChartCellTextLabels } from '../../../../../Utilities/Helpers/barChartCellText';
+import { BarStyleCellTextProperties } from '../../../../../AdaptableState/StyledColumns/Common/BarStyleProperties';
+import { BarStyleCellTextLabels } from '../../../../../Utilities/Helpers/StyledColumns/BarStylesHelper';
 /**
  * Preview of the per-value cell-text layout. Renders three potential bands:
  * - `Above` slots (above the bar)
@@ -11,13 +11,13 @@ import { BarChartCellTextLabels } from '../../../../../Utilities/Helpers/barChar
  * stable. When `vertical` is provided, only the band matching that value is
  * rendered (used by the preview cards to position bands around the bar).
  */
-export declare const BarChartCellTextPreview: React.FunctionComponent<{
+export declare const BarStyleCellTextPreview: React.FunctionComponent<{
     className?: string;
     style?: React.CSSProperties;
-    cellTextProperties?: BarChartCellTextProperties;
-    labels: BarChartCellTextLabels;
+    cellTextProperties?: BarStyleCellTextProperties;
+    labels: BarStyleCellTextLabels;
     mergedOverlayClassName?: string;
     /** Render only the band matching this vertical position. */
     vertical?: 'Above' | 'Below' | 'Merged';
 }>;
-export declare const shouldShowBarChartCellTextOutsideBar: (cellTextProperties: BarChartCellTextProperties | undefined, hasCellText: boolean) => boolean;
+export declare const shouldShowBarStyleCellTextOutsideBar: (cellTextProperties: BarStyleCellTextProperties | undefined, hasCellText: boolean) => boolean;

package/src/View/StyledColumn/Wizard/StyledColumnWizardStyleSection/Components/{BarChartCellTextPreview.js → BarStyleCellTextPreview.js}

@@ -1,8 +1,8 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.shouldShowBarChartCellTextOutsideBar = exports.BarChartCellTextPreview = void 0;
+exports.shouldShowBarStyleCellTextOutsideBar = exports.BarStyleCellTextPreview = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
-const barChartCellText_1 = require("../../../../../Utilities/Helpers/barChartCellText");
+const BarStylesHelper_1 = require("../../../../../Utilities/Helpers/StyledColumns/BarStylesHelper");
 const Flex_1 = require("../../../../../components/Flex");
 const HORIZONTAL_ORDER = ['Left', 'Center', 'Right'];
 const HORIZONTAL_JUSTIFY = {
@@ -36,11 +36,11 @@ const CellTextRow = ({ className, style, slots }) => ((0, jsx_runtime_1.jsx)(Fle
  * stable. When `vertical` is provided, only the band matching that value is
  * rendered (used by the preview cards to position bands around the bar).
  */
-const BarChartCellTextPreview = ({ className, style, cellTextProperties, labels, mergedOverlayClassName, vertical }) => {
+const BarStyleCellTextPreview = ({ className, style, cellTextProperties, labels, mergedOverlayClassName, vertical }) => {
     if (!labels.cellValue && !labels.percentage) {
         return null;
     }
-    const slots = (0, barChartCellText_1.resolveBarChartCellTextSlots)(cellTextProperties, labels);
+    const slots = (0, BarStylesHelper_1.resolveBarStyleCellTextSlots)(cellTextProperties, labels);
     if (!slots.length) {
         return null;
     }
@@ -51,12 +51,12 @@ const BarChartCellTextPreview = ({ className, style, cellTextProperties, labels,
     const usedClassName = vertical === 'Merged' ? mergedOverlayClassName ?? className : className;
     return ((0, jsx_runtime_1.jsx)(CellTextRow, { className: usedClassName, style: style, slots: bandSlots.map((s) => ({ horizontal: s.horizontal, text: s.text })) }));
 };
-exports.BarChartCellTextPreview = BarChartCellTextPreview;
-const shouldShowBarChartCellTextOutsideBar = (cellTextProperties, hasCellText) => {
-    if (!hasCellText || !(0, barChartCellText_1.hasBarChartCellTextConfigured)(cellTextProperties)) {
+exports.BarStyleCellTextPreview = BarStyleCellTextPreview;
+const shouldShowBarStyleCellTextOutsideBar = (cellTextProperties, hasCellText) => {
+    if (!hasCellText || !(0, BarStylesHelper_1.hasBarStyleCellTextConfigured)(cellTextProperties)) {
         return false;
     }
-    const { hasAbove, hasBelow } = (0, barChartCellText_1.getBarChartCellTextSlotPresence)(cellTextProperties);
+    const { hasAbove, hasBelow } = (0, BarStylesHelper_1.getBarStyleCellTextSlotPresence)(cellTextProperties);
     return hasAbove || hasBelow;
 };
-exports.shouldShowBarChartCellTextOutsideBar = shouldShowBarChartCellTextOutsideBar;
+exports.shouldShowBarStyleCellTextOutsideBar = shouldShowBarStyleCellTextOutsideBar;

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

@@ -1,11 +1,11 @@
 import * as React from 'react';
 import { CellColorRange, ColumnComparison, NumericStyledColumn } from '../../../../../AdaptableState/StyledColumns/Common/NumericStyledColumn';
-import { GradientStyle, GradientZeroCentredColors } from '../../../../../AdaptableState/StyledColumns/GradientStyle';
+import { GradientStyle, ZeroCentredColors } from '../../../../../AdaptableState/StyledColumns/GradientStyle';
 import { AdaptableApi } from '../../../../../types';
 export declare function gradientRangeStripCss(color: string, reverseGradient: boolean, minAlpha: number, maxAlpha: number): string;
 export interface GradientRangesSummaryPreviewProps {
     ranges?: CellColorRange[];
-    zeroCentred?: GradientZeroCentredColors;
+    zeroCentred?: ZeroCentredColors;
     rangeValueType: NumericStyledColumn['RangeValueType'];
     gradientStyle?: Pick<GradientStyle, 'MinAlpha' | 'MaxAlpha'>;
 }