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

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

@@ -14,7 +14,6 @@ const RangesComponent_1 = require("../../Components/RangesComponent");
 const ColumnSelector_1 = require("../../Components/Selectors/ColumnSelector");
 const UIHelper_1 = require("../../UIHelper");
 const OnePageAdaptableWizard_1 = require("../../Wizard/OnePageAdaptableWizard");
-const ArrayExtensions_1 = tslib_1.__importDefault(require("../../../Utilities/Extensions/ArrayExtensions"));
 const AdaptableInput_1 = tslib_1.__importDefault(require("../../Components/AdaptableInput"));
 const Flex_1 = require("../../../components/Flex");
 const NewSelect_1 = require("../../../components/NewSelect");
@@ -22,6 +21,8 @@ const RangeBarRangesSummaryPreview_1 = require("./StyledColumnWizardStyleSection
 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 RANGE_STYLE_FORM_SIZES = ['200px', '1fr'];
 const BOUND_MODE_LABELS = {
     Number: 'Fixed Number',
@@ -126,8 +127,8 @@ const getStyledColumnRangeBarRangeViewValues = (data) => {
         `Min: ${summarizeBound(range.Min)}`,
         `Max: ${summarizeBound(range.Max)}`,
     ];
-    if (range.Reference != undefined) {
-        items.push(`Reference: ${summarizeBound(range.Reference)}`);
+    if (range.Reference?.Value != undefined) {
+        items.push(`Reference: ${summarizeBound(range.Reference.Value)}`);
     }
     const bandCount = range.CellRanges?.length ?? 0;
     if (bandCount > 0) {
@@ -142,7 +143,8 @@ exports.getStyledColumnRangeBarRangeViewValues = getStyledColumnRangeBarRangeVie
 const buildStyledColumnRangeBarDisplaySummaryStrings = (range, options) => {
     const items = [];
     const valueMarker = range.Marker;
-    const referenceMarker = range.ReferenceMarker;
+    const referenceProperties = range.Reference;
+    const referenceMarker = referenceProperties?.Marker;
     items.push(`Value Marker Shape: ${valueMarker?.Shape ?? 'Diamond'}`);
     if (valueMarker?.Color) {
         items.push(`Value Marker Colour: ${valueMarker.Color}`);
@@ -150,7 +152,7 @@ const buildStyledColumnRangeBarDisplaySummaryStrings = (range, options) => {
     if (valueMarker?.Size != null) {
         items.push(`Value Marker Size: ${valueMarker.Size}px`);
     }
-    if (range.Reference != undefined) {
+    if (referenceProperties?.Value != undefined) {
         items.push(`Reference Marker Shape: ${referenceMarker?.Shape ?? 'Line'}`);
         if (referenceMarker?.Color) {
             items.push(`Reference Marker Colour: ${referenceMarker.Color}`);
@@ -162,25 +164,31 @@ const buildStyledColumnRangeBarDisplaySummaryStrings = (range, options) => {
     if (range.Orientation === 'Vertical') {
         items.push('Orientation: Vertical');
     }
-    const outOfRangeMode = range.OutOfRangeMode ?? 'Clamp';
+    const outOfRangeProperties = range.OutOfRange;
+    const outOfRangeMode = outOfRangeProperties?.Mode ?? 'Clamp';
     if (outOfRangeMode !== 'Clamp') {
         items.push(`Out of Range: ${outOfRangeMode}`);
     }
-    if (range.OutOfRangeColor) {
-        items.push(`Out of Range Colour: ${range.OutOfRangeColor}`);
+    if (outOfRangeProperties?.Color) {
+        items.push(`Out of Range Colour: ${outOfRangeProperties.Color}`);
     }
-    if (range.TrackColor) {
-        items.push(`Track Colour: ${range.TrackColor}`);
+    const trackProperties = range.Track;
+    if (trackProperties?.Color) {
+        items.push(`Track Colour: ${trackProperties.Color}`);
     }
-    if (range.TrackHeight != null) {
-        items.push(`Track Height: ${range.TrackHeight}px`);
+    if (trackProperties?.Height != null) {
+        items.push(`Track Height: ${trackProperties.Height}px`);
     }
     if (range.BackColor) {
         items.push(`Back Colour: ${range.BackColor}`);
     }
-    if (range.CellText?.length) {
-        items.push(`Cell Text: ${formatRangeBarCellTextSummary(range.CellText)}`);
-        items.push(`Cell Text Position: ${range.CellTextPosition ?? 'Below'}`);
+    if ((0, barChartCellText_1.hasBarChartCellTextConfigured)(range.CellTextProperties)) {
+        const tokens = (0, barChartCellText_1.getActiveBarChartCellTextTokens)(range.CellTextProperties);
+        items.push(`Cell Text: ${formatRangeBarCellTextSummary(tokens)}`);
+        const layoutSummary = (0, barChartCellText_1.formatBarChartCellTextLayoutSummary)((0, barChartCellText_1.resolveBarChartCellTextLayout)(range.CellTextProperties));
+        if (layoutSummary) {
+            items.push(`Placement: ${layoutSummary}`);
+        }
     }
     else if (options.includeEmptyCellText) {
         items.push('Cell Text: None');
@@ -332,15 +340,41 @@ const StyledColumnWizardRangeBarSection = (props) => {
             },
         });
     }, [data, range]);
-    const updateOptionalColor = (key, color) => {
+    const updateBackColor = (color) => {
         if (color) {
-            update({ [key]: color });
+            update({ BackColor: color });
             return;
         }
         const next = { ...range };
-        delete next[key];
+        delete next.BackColor;
         props.onChange({ ...data, RangeBarStyle: next });
     };
+    const updateTrackProperties = (patch) => {
+        const merged = {
+            ...range.Track,
+            ...patch,
+        };
+        const isEmpty = merged.Color == undefined && merged.Height == undefined;
+        update({ Track: isEmpty ? undefined : merged });
+    };
+    const updateOutOfRangeProperties = (patch) => {
+        const merged = {
+            ...range.OutOfRange,
+            ...patch,
+        };
+        // Default mode is `Clamp` with no override colour; drop the wrapper in
+        // that case so empty state serialises cleanly.
+        const isEmpty = (merged.Mode == undefined || merged.Mode === 'Clamp') && merged.Color == undefined;
+        update({ OutOfRange: isEmpty ? undefined : merged });
+    };
+    const updateReferenceProperties = (patch) => {
+        const merged = {
+            Value: range.Reference?.Value,
+            ...range.Reference,
+            ...patch,
+        };
+        update({ Reference: merged });
+    };
     // -- Bound editors ---------------------------------------------------------
     // Resolved values for the column-wide aggregate bound modes, shown read-only
     // in the bound editor so the user sees the underlying number.
@@ -359,6 +393,16 @@ const StyledColumnWizardRangeBarSection = (props) => {
      */
     const renderBoundEditor = (opts) => {
         const setBound = (next) => {
+            if (opts.field === 'Reference') {
+                if (next === undefined) {
+                    const cleaned = { ...range };
+                    delete cleaned.Reference;
+                    props.onChange({ ...data, RangeBarStyle: cleaned });
+                    return;
+                }
+                updateReferenceProperties({ Value: next });
+                return;
+            }
             if (next === undefined) {
                 const cleaned = { ...range };
                 delete cleaned[opts.field];
@@ -367,7 +411,8 @@ const StyledColumnWizardRangeBarSection = (props) => {
             }
             update({ [opts.field]: next });
         };
-        return ((0, jsx_runtime_1.jsx)(FormLayout_1.FormRow, { label: `${opts.label}:`, children: (0, jsx_runtime_1.jsx)(RangeBarBoundInput, { api: api, value: range[opts.field], optional: opts.optional, fallbackNumber: opts.fallbackNumber, excludeColumnId: data.ColumnId, resolved: resolvedBoundValues, disabled: disabled, onChange: setBound }) }));
+        const value = opts.field === 'Reference' ? range.Reference?.Value : range[opts.field];
+        return ((0, jsx_runtime_1.jsx)(FormLayout_1.FormRow, { label: `${opts.label}:`, children: (0, jsx_runtime_1.jsx)(RangeBarBoundInput, { api: api, value: value, optional: opts.optional, fallbackNumber: opts.fallbackNumber, excludeColumnId: data.ColumnId, resolved: resolvedBoundValues, disabled: disabled, onChange: setBound }) }));
     };
     // -- Marker editors --------------------------------------------------------
     const updateValueMarker = (patch) => {
@@ -380,10 +425,10 @@ const StyledColumnWizardRangeBarSection = (props) => {
         });
     };
     const updateReferenceMarker = (patch) => {
-        update({
-            ReferenceMarker: {
+        updateReferenceProperties({
+            Marker: {
                 Shape: 'Line',
-                ...range.ReferenceMarker,
+                ...range.Reference?.Marker,
                 ...patch,
             },
         });
@@ -395,18 +440,20 @@ const StyledColumnWizardRangeBarSection = (props) => {
         Color: range.Marker?.Color ?? '',
         Size: range.Marker?.Size ?? (range.Marker?.Shape === 'Line' ? 2 : 10),
     };
+    const referenceMarkerCfg = range.Reference?.Marker;
     const referenceMarker = {
-        Shape: range.ReferenceMarker?.Shape ?? 'Line',
-        Color: range.ReferenceMarker?.Color ?? '',
-        Size: range.ReferenceMarker?.Size ?? (range.ReferenceMarker?.Shape === 'Line' ? 2 : 8),
+        Shape: referenceMarkerCfg?.Shape ?? 'Line',
+        Color: referenceMarkerCfg?.Color ?? '',
+        Size: referenceMarkerCfg?.Size ?? (referenceMarkerCfg?.Shape === 'Line' ? 2 : 8),
     };
     // -- Cell text -------------------------------------------------------------
-    const toggleCellText = (token, checked) => {
-        const current = range.CellText ?? [];
-        const next = checked
-            ? Array.from(new Set([...current, token]))
-            : current.filter((t) => t !== token);
-        update({ CellText: next });
+    const toggleCellText = (token, show) => {
+        update((0, barChartCellText_1.toggleBarChartCellTextToken)(range.CellTextProperties, token, show));
+    };
+    const onCellTextPlacementChange = (token, patch) => {
+        update({
+            CellTextProperties: (0, barChartCellText_1.patchBarChartCellTextPlacement)(range.CellTextProperties, token, patch),
+        });
     };
     const toggleToolTipText = (token, checked) => {
         const current = range.ToolTipText ?? [];
@@ -415,9 +462,6 @@ const StyledColumnWizardRangeBarSection = (props) => {
             : current.filter((t) => t !== token);
         update({ ToolTipText: next });
     };
-    const handleCellTextPositionChange = (pos) => {
-        update({ CellTextPosition: pos });
-    };
     // -------------------------------------------------------------------------
     // Render
     // -------------------------------------------------------------------------
@@ -426,8 +470,8 @@ const StyledColumnWizardRangeBarSection = (props) => {
                     ? 'You need to select a column before styling.'
                     : `Column "${data.ColumnId}" was not found in the grid.` }) }));
     }
-    const hasReference = range.Reference != undefined;
-    const outOfRangeMode = range.OutOfRangeMode ?? 'Clamp';
+    const hasReference = range.Reference?.Value != undefined;
+    const outOfRangeMode = range.OutOfRange?.Mode ?? 'Clamp';
     const isRangeVariant = props.variant === 'range';
     return ((0, jsx_runtime_1.jsxs)(Flex_1.Box, { children: [isRangeVariant && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { 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: "Bounds" }), (0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:text-xs twa:opacity-70 twa:font-normal twa:max-w-[520px]", children: "Set each row's track scale. A bound can be a fixed number, another column's value (read per row), or a column-wide aggregate (min, max, average, median). Reference is an optional second marker." })] }), (0, jsx_runtime_1.jsx)(Card_1.Card.Body, { children: (0, jsx_runtime_1.jsxs)(FormLayout_1.default, { sizes: [...RANGE_STYLE_FORM_SIZES], children: [renderBoundEditor({
                                             label: 'Min',
@@ -449,16 +493,14 @@ const StyledColumnWizardRangeBarSection = (props) => {
                                             : 'Optional second marker when a Reference bound is set on the Style step.' })] }), (0, jsx_runtime_1.jsx)(Card_1.Card.Body, { children: hasReference ? ((0, jsx_runtime_1.jsxs)(FormLayout_1.default, { sizes: [...RANGE_STYLE_FORM_SIZES], children: [(0, jsx_runtime_1.jsx)(FormLayout_1.FormRow, { label: "Shape:", 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: referenceMarker.Shape, onValueChange: (s) => updateReferenceMarker({ Shape: s }), items: MARKER_SHAPES.map((s) => ({ value: s.value, label: s.label })) }) }) }), (0, jsx_runtime_1.jsx)(FormLayout_1.FormRow, { label: `${api.internalApi.getCorrectEnglishVariant('Colour')}:`, children: (0, jsx_runtime_1.jsx)(ColorPicker_1.ColorPicker, { disabled: disabled, api: api, value: referenceMarker.Color || undefined, onChange: (c) => updateReferenceMarker({ Color: c }) }) }), (0, jsx_runtime_1.jsx)(FormLayout_1.FormRow, { label: "Size:", 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: referenceMarker.Size, onChange: (e) => updateReferenceMarker({ Size: Number(e.target.value) }) }) }) })] })) : ((0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:text-xs twa:opacity-60 twa:max-w-[520px]", children: "Add a Reference value on the Style step (Bounds section) to enable this marker (e.g. previous close, target, midpoint)." })) })] }), (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: "Track" }), (0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:text-xs twa:opacity-70 twa:font-normal twa:max-w-[520px]", children: "The line representing the [Min, Max] interval, plus optional cell background." })] }), (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: "Orientation:", 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: range.Orientation ?? 'Horizontal', onValueChange: (v) => update({ Orientation: v }), items: [
                                                         { value: 'Horizontal', label: 'Horizontal' },
                                                         { value: 'Vertical', label: 'Vertical' },
-                                                    ] }) }) }), range.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 twa:max-w-[520px]", children: ["Tip: vertical Range Bars 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: `Track ${api.internalApi.getCorrectEnglishVariant('Colour')}:`, children: (0, jsx_runtime_1.jsx)(ColorPicker_1.OptionalColorPicker, { disabled: disabled, api: api, value: range.TrackColor, defaultColor: (0, UIHelper_1.getGraySwatchColor)(), onChange: (c) => updateOptionalColor('TrackColor', c) }) }), (0, jsx_runtime_1.jsx)(FormLayout_1.FormRow, { label: range.Orientation === 'Vertical' ? 'Track Width (px):' : 'Track 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: range.TrackHeight ?? '', onChange: (e) => update({
-                                                        TrackHeight: e.target.value === '' ? undefined : Number(e.target.value),
-                                                    }), placeholder: "4" }) }) }), (0, jsx_runtime_1.jsx)(FormLayout_1.FormRow, { label: `Back ${api.internalApi.getCorrectEnglishVariant('Colour')}:`, children: (0, jsx_runtime_1.jsx)(ColorPicker_1.OptionalColorPicker, { disabled: disabled, api: api, value: range.BackColor ?? undefined, defaultColor: (0, UIHelper_1.getGraySwatchColor)(), onChange: (c) => updateOptionalColor('BackColor', c) }) })] }) })] }), (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: "Out of Range" }), (0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:text-xs twa:opacity-70 twa:font-normal twa:max-w-[520px]", children: "How to draw the value marker when the cell value falls outside [Min, Max]." })] }), (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: "Behaviour:", 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: outOfRangeMode, onValueChange: (v) => update({ OutOfRangeMode: v }), items: [
+                                                    ] }) }) }), range.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 twa:max-w-[520px]", children: ["Tip: vertical Range Bars 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: `Track ${api.internalApi.getCorrectEnglishVariant('Colour')}:`, children: (0, jsx_runtime_1.jsx)(ColorPicker_1.OptionalColorPicker, { disabled: disabled, api: api, value: range.Track?.Color, defaultColor: (0, UIHelper_1.getGraySwatchColor)(), onChange: (c) => updateTrackProperties({ Color: c }) }) }), (0, jsx_runtime_1.jsx)(FormLayout_1.FormRow, { label: range.Orientation === 'Vertical' ? 'Track Width (px):' : 'Track 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: range.Track?.Height ?? '', onChange: (e) => updateTrackProperties({
+                                                        Height: e.target.value === '' ? undefined : Number(e.target.value),
+                                                    }), placeholder: "4" }) }) }), (0, jsx_runtime_1.jsx)(FormLayout_1.FormRow, { label: `Back ${api.internalApi.getCorrectEnglishVariant('Colour')}:`, children: (0, jsx_runtime_1.jsx)(ColorPicker_1.OptionalColorPicker, { disabled: disabled, api: api, value: range.BackColor ?? undefined, defaultColor: (0, UIHelper_1.getGraySwatchColor)(), onChange: (c) => updateBackColor(c) }) })] }) })] }), (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: "Out of Range" }), (0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:text-xs twa:opacity-70 twa:font-normal twa:max-w-[520px]", children: "How to draw the value marker when the cell value falls outside [Min, Max]." })] }), (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: "Behaviour:", 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: outOfRangeMode, onValueChange: (v) => updateOutOfRangeProperties({
+                                                        Mode: v,
+                                                    }), items: [
                                                         { 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.OutOfRangeColor, defaultColor: "crimson", onChange: (c) => updateOptionalColor('OutOfRangeColor', 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.jsxs)(FormLayout_1.FormRow, { label: "Cell Display:", children: [(0, jsx_runtime_1.jsx)(CheckBox_1.CheckBox, { disabled: disabled, checked: range.CellText?.includes('CellValue'), onChange: (checked) => toggleCellText('CellValue', checked), children: "Cell Value" }), ' ', (0, jsx_runtime_1.jsx)(CheckBox_1.CheckBox, { disabled: disabled, className: "twa:ml-3", checked: range.CellText?.includes('PercentageValue'), onChange: (checked) => toggleCellText('PercentageValue', checked), children: "Percent Value" })] }), (0, jsx_runtime_1.jsx)(FormLayout_1.FormRow, { label: "Cell Display Position:", 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", disabled: ArrayExtensions_1.default.IsNullOrEmpty(range.CellText) || disabled, value: range.CellTextPosition ?? 'Below', onValueChange: (v) => handleCellTextPositionChange(v), items: [
-                                                        { value: 'Above', label: 'Above Bar' },
-                                                        { value: 'Below', label: 'Below Bar' },
-                                                        { value: 'Merged', label: 'Merged' },
-                                                    ] }) }) }), (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)(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 })] }))] }));
 };
 exports.StyledColumnWizardRangeBarSection = StyledColumnWizardRangeBarSection;

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

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

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

@@ -0,0 +1,40 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.BarChartCellTextLayoutEditor = void 0;
+const tslib_1 = require("tslib");
+const jsx_runtime_1 = require("react/jsx-runtime");
+const React = tslib_1.__importStar(require("react"));
+const barChartCellText_1 = require("../../../../../Utilities/Helpers/barChartCellText");
+const CheckBox_1 = require("../../../../../components/CheckBox");
+const Flex_1 = require("../../../../../components/Flex");
+const NewSelect_1 = require("../../../../../components/NewSelect");
+const TOKEN_LABELS = {
+    CellValue: 'Cell Value',
+    PercentageValue: 'Percent Value',
+};
+const TOKENS = ['CellValue', 'PercentageValue'];
+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 tokenKey = (token) => token === 'CellValue' ? 'CellValue' : 'PercentValue';
+const BarChartCellTextLayoutEditor = ({ disabled, cellTextProperties, onToggle, onPlacementChange }) => {
+    const layout = (0, barChartCellText_1.resolveBarChartCellTextLayout)(cellTextProperties);
+    return ((0, jsx_runtime_1.jsxs)(Flex_1.Box, { className: "twa:inline-grid twa:grid-cols-[160px_140px_140px] twa:gap-x-4 twa:gap-y-2 twa:items-center", children: [(0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:text-xs twa:font-medium twa:opacity-80", children: "Value" }), (0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:text-xs twa:font-medium twa:opacity-80", children: "Horizontal" }), (0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:text-xs twa:font-medium twa:opacity-80", children: "Vertical" }), TOKENS.map((token) => {
+                const placement = layout[tokenKey(token)];
+                const isShown = Boolean(placement);
+                const rowDisabled = disabled || !isShown;
+                return ((0, jsx_runtime_1.jsxs)(React.Fragment, { children: [(0, jsx_runtime_1.jsx)(Flex_1.Flex, { alignItems: "center", children: (0, jsx_runtime_1.jsx)(CheckBox_1.CheckBox, { disabled: disabled, checked: isShown, onChange: (checked) => onToggle(token, checked), children: TOKEN_LABELS[token] }) }), (0, jsx_runtime_1.jsx)(Flex_1.Box, { 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, { 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.BarChartCellTextLayoutEditor = BarChartCellTextLayoutEditor;

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

@@ -0,0 +1,23 @@
+import * as React from 'react';
+import { BarChartCellTextProperties } from '../../../../../AdaptableState/StyledColumns/Common/BarChartCellText';
+import { BarChartCellTextLabels } from '../../../../../Utilities/Helpers/barChartCellText';
+/**
+ * Preview of the per-value cell-text layout. Renders three potential bands:
+ * - `Above` slots (above the bar)
+ * - `Merged` slots (overlay on top of the bar — uses `mergedOverlayClassName`)
+ * - `Below` slots (below the bar)
+ *
+ * Each band has three horizontal slots (Left/Center/Right) so the spacing is
+ * 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<{
+    className?: string;
+    style?: React.CSSProperties;
+    cellTextProperties?: BarChartCellTextProperties;
+    labels: BarChartCellTextLabels;
+    mergedOverlayClassName?: string;
+    /** Render only the band matching this vertical position. */
+    vertical?: 'Above' | 'Below' | 'Merged';
+}>;
+export declare const shouldShowBarChartCellTextOutsideBar: (cellTextProperties: BarChartCellTextProperties | undefined, hasCellText: boolean) => boolean;

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

@@ -0,0 +1,62 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.shouldShowBarChartCellTextOutsideBar = exports.BarChartCellTextPreview = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const barChartCellText_1 = require("../../../../../Utilities/Helpers/barChartCellText");
+const Flex_1 = require("../../../../../components/Flex");
+const HORIZONTAL_ORDER = ['Left', 'Center', 'Right'];
+const HORIZONTAL_JUSTIFY = {
+    Left: 'flex-start',
+    Center: 'center',
+    Right: 'flex-end',
+};
+const HORIZONTAL_TEXT_ALIGN = {
+    Left: 'left',
+    Center: 'center',
+    Right: 'right',
+};
+const CellTextRow = ({ className, style, slots }) => ((0, jsx_runtime_1.jsx)(Flex_1.Flex, { className: className, alignItems: "center", style: { ...style, width: '100%', gap: 4 }, children: HORIZONTAL_ORDER.map((horizontal) => {
+        const slot = slots.find((s) => s.horizontal === horizontal);
+        return ((0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:truncate", style: {
+                flex: 1,
+                minWidth: 0,
+                display: 'flex',
+                justifyContent: HORIZONTAL_JUSTIFY[horizontal],
+                alignItems: 'center',
+                textAlign: HORIZONTAL_TEXT_ALIGN[horizontal],
+            }, children: slot?.text ?? '' }, horizontal));
+    }) }));
+/**
+ * Preview of the per-value cell-text layout. Renders three potential bands:
+ * - `Above` slots (above the bar)
+ * - `Merged` slots (overlay on top of the bar — uses `mergedOverlayClassName`)
+ * - `Below` slots (below the bar)
+ *
+ * Each band has three horizontal slots (Left/Center/Right) so the spacing is
+ * 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 }) => {
+    if (!labels.cellValue && !labels.percentage) {
+        return null;
+    }
+    const slots = (0, barChartCellText_1.resolveBarChartCellTextSlots)(cellTextProperties, labels);
+    if (!slots.length) {
+        return null;
+    }
+    const bandSlots = vertical ? slots.filter((s) => s.vertical === vertical) : slots;
+    if (!bandSlots.length) {
+        return null;
+    }
+    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)) {
+        return false;
+    }
+    const { hasAbove, hasBelow } = (0, barChartCellText_1.getBarChartCellTextSlotPresence)(cellTextProperties);
+    return hasAbove || hasBelow;
+};
+exports.shouldShowBarChartCellTextOutsideBar = shouldShowBarChartCellTextOutsideBar;

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

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { BulletChartStyle } from '../../../../../AdaptableState/StyledColumnState';
+import { BulletChartStyle } from '../../../../../AdaptableState/StyledColumns/BulletChartStyle';
 export declare const BulletRangesSummaryPreview: React.FunctionComponent<{
     bulletStyle: BulletChartStyle;
 }>;

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

@@ -1,5 +1,6 @@
 import * as React from 'react';
-import { CellColorRange, ColumnComparison, GradientStyle, GradientZeroCentredColors, NumericStyledColumn } from '../../../../../AdaptableState/StyledColumnState';
+import { CellColorRange, ColumnComparison, NumericStyledColumn } from '../../../../../AdaptableState/StyledColumns/Common/NumericStyledColumn';
+import { GradientStyle, GradientZeroCentredColors } from '../../../../../AdaptableState/StyledColumns/GradientStyle';
 import { AdaptableApi } from '../../../../../types';
 export declare function gradientRangeStripCss(color: string, reverseGradient: boolean, minAlpha: number, maxAlpha: number): string;
 export interface GradientRangesSummaryPreviewProps {

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

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { RangeBarStyle } from '../../../../../AdaptableState/StyledColumnState';
+import { RangeBarStyle } from '../../../../../AdaptableState/StyledColumns/RangeBarStyle';
 export declare const RangeBarRangesSummaryPreview: React.FunctionComponent<{
     rangeStyle: RangeBarStyle;
 }>;

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

@@ -54,12 +54,13 @@ const StyledColumnBadgePreview = ({ data }) => {
             : {}),
     };
     return ((0, jsx_runtime_1.jsx)(Flex_1.Box, { className: PREVIEW_CELL_CLASS, style: cellStyle, children: (0, jsx_runtime_1.jsx)("div", { className: wrapperClassName, style: wrapperStyle, children: badgeStyle.Badges.map((badge, index) => {
-                const badgeValue = badge.IconOnly
+                const iconProps = badge.IconProperties;
+                const badgeValue = iconProps?.IconOnly
                     ? ''
                     : dataType === 'number'
                         ? GeneralConstants_1.DEFAULT_INTEGER_DISPLAY_VALUE
                         : GeneralConstants_1.DEFAULT_STRING_DISPLAY_VALUE;
-                return ((0, jsx_runtime_1.jsx)(Badge_1.Badge, { icon: badge.Icon, pillStyle: badge.PillStyle, iconPosition: badge.IconPosition, shape: badge.Shape, density: badgeStyle.Density ?? 'Normal', iconGap: badge.IconGap, children: badgeValue }, index));
+                return ((0, jsx_runtime_1.jsx)(Badge_1.Badge, { icon: iconProps?.Icon, pillStyle: badge.PillStyle, iconPosition: iconProps?.Position, shape: badge.Shape, density: badgeStyle.Density ?? 'Normal', iconGap: iconProps?.Gap, children: badgeValue }, index));
             }) }) }));
 };
 exports.StyledColumnBadgePreview = StyledColumnBadgePreview;

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

@@ -1,5 +1,6 @@
 import * as React from 'react';
-import { BulletChartStyle, StyledColumn } from '../../../../../AdaptableState/StyledColumnState';
+import { StyledColumn } from '../../../../../AdaptableState/StyledColumnState';
+import { BulletChartStyle } from '../../../../../AdaptableState/StyledColumns/BulletChartStyle';
 export declare const StyledColumnBulletPreview: React.FunctionComponent<React.PropsWithChildren<{
     data: StyledColumn;
 }>>;

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

@@ -3,10 +3,12 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.hasBulletChartRangesConfigured = exports.StyledColumnBulletPreviewCard = exports.StyledColumnBulletPreview = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const StyleHelper_1 = require("../../../../../Utilities/Helpers/StyleHelper");
+const barChartCellText_1 = require("../../../../../Utilities/Helpers/barChartCellText");
 const Flex_1 = require("../../../../../components/Flex");
 const Card_1 = require("../../../../../components/Card");
 const Tag_1 = require("../../../../../components/Tag");
 const StyledColumnChartListPreviews_1 = require("./StyledColumnChartListPreviews");
+const BarChartCellTextPreview_1 = require("./BarChartCellTextPreview");
 const PREVIEW_CELL_CLASS = 'ab-BulletPreviewCell twa:inline-flex twa:items-center twa:min-w-[180px] twa:min-h-[36px] twa:px-2 twa:py-1 twa:rounded-standard twa:border twa:border-[color-mix(in_srgb,var(--ab-color-foreground)_15%,transparent)]';
 const getBulletPreviewSample = (bullet) => {
     const ranges = bullet.CellRanges ?? [];
@@ -26,29 +28,23 @@ const getBulletPreviewSample = (bullet) => {
         valueFraction: Math.max(0, Math.min(1, valueFraction)),
     };
 };
-const formatBulletPreviewCellText = (sampleValue, valueFraction, bullet) => {
-    const parts = [];
-    if (bullet.CellText?.includes('CellValue')) {
-        parts.push(Number.isInteger(sampleValue) ? String(sampleValue) : sampleValue.toFixed(1));
-    }
-    if (bullet.CellText?.includes('PercentageValue')) {
-        parts.push(`${(valueFraction * 100).toFixed(0)}%`);
-    }
-    return parts.join(' ');
-};
 const BulletChartPreviewContent = ({ bullet, }) => {
     const { sampleValue, valueFraction } = getBulletPreviewSample(bullet);
-    const cellText = formatBulletPreviewCellText(sampleValue, valueFraction, bullet);
-    const hasCellText = Boolean(bullet.CellText?.length && cellText);
-    const textPosition = bullet.CellTextPosition ?? 'Below';
+    const cellTextProperties = bullet.CellTextProperties;
+    const labels = (0, barChartCellText_1.buildBarChartCellTextLabels)(cellTextProperties, Number.isInteger(sampleValue) ? String(sampleValue) : sampleValue.toFixed(1), `${(valueFraction * 100).toFixed(0)}%`);
+    const hasCellText = (0, barChartCellText_1.hasBarChartCellTextConfigured)(cellTextProperties) &&
+        Boolean(labels.cellValue || labels.percentage);
+    const presence = (0, barChartCellText_1.getBarChartCellTextSlotPresence)(cellTextProperties);
     const fontStyle = bullet.Font ? (0, StyleHelper_1.convertAdaptableStyleToCSS)(bullet.Font) : undefined;
     const isVertical = bullet.Orientation === 'Vertical';
+    const cellTextClassName = 'ab-BulletChart__text twa:text-2 twa:leading-tight twa:truncate twa:max-w-full';
     const chartEl = (0, jsx_runtime_1.jsx)(StyledColumnChartListPreviews_1.StyledColumnBulletChartListPreview, { bullet: bullet });
-    const textEl = hasCellText ? ((0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "ab-BulletChart__text twa:text-2 twa:leading-tight twa:truncate twa:max-w-full", style: fontStyle, children: cellText })) : null;
-    if (hasCellText && textPosition === 'Merged') {
-        return ((0, jsx_runtime_1.jsxs)(Flex_1.Box, { className: "ab-BulletChart__wrapper twa:relative twa:inline-flex", children: [chartEl, (0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "ab-BulletChart__text twa:absolute twa:inset-x-0 twa:top-1/2 twa:-translate-y-1/2 twa:px-1 twa:text-2 twa:truncate twa:pointer-events-none", style: fontStyle, children: cellText })] }));
+    // Merged-only with no outside bands → relative container so the overlay sits
+    // on top of the chart, matching the runtime renderer's behaviour.
+    if (hasCellText && presence.hasMerged && !presence.hasAbove && !presence.hasBelow) {
+        return ((0, jsx_runtime_1.jsxs)(Flex_1.Box, { className: "ab-BulletChart__wrapper twa:relative twa:inline-flex", children: [chartEl, (0, jsx_runtime_1.jsx)(BarChartCellTextPreview_1.BarChartCellTextPreview, { mergedOverlayClassName: "ab-BulletChart__text twa:absolute twa:inset-x-0 twa:top-1/2 twa:-translate-y-1/2 twa:px-1 twa:text-2 twa:truncate twa:pointer-events-none", style: fontStyle, cellTextProperties: cellTextProperties, labels: labels, vertical: "Merged" })] }));
     }
-    return ((0, jsx_runtime_1.jsxs)(Flex_1.Flex, { className: "ab-BulletChart__wrapper", flexDirection: "column", alignItems: isVertical ? 'center' : 'stretch', style: { justifyContent: 'center', gap: hasCellText ? 2 : 0 }, children: [hasCellText && textPosition === 'Above' && textEl, chartEl, hasCellText && textPosition === 'Below' && textEl] }));
+    return ((0, jsx_runtime_1.jsxs)(Flex_1.Flex, { className: "ab-BulletChart__wrapper twa:relative", flexDirection: "column", alignItems: isVertical ? 'center' : 'stretch', style: { justifyContent: 'center', gap: hasCellText ? 2 : 0 }, children: [hasCellText && presence.hasAbove && ((0, jsx_runtime_1.jsx)(BarChartCellTextPreview_1.BarChartCellTextPreview, { className: cellTextClassName, style: fontStyle, cellTextProperties: cellTextProperties, labels: labels, vertical: "Above" })), (0, jsx_runtime_1.jsxs)(Flex_1.Box, { className: "twa:relative twa:w-full", style: { display: 'inline-flex' }, children: [chartEl, hasCellText && presence.hasMerged && ((0, jsx_runtime_1.jsx)(BarChartCellTextPreview_1.BarChartCellTextPreview, { mergedOverlayClassName: "ab-BulletChart__text twa:absolute twa:inset-x-0 twa:top-1/2 twa:-translate-y-1/2 twa:px-1 twa:text-2 twa:truncate twa:pointer-events-none", style: fontStyle, cellTextProperties: cellTextProperties, labels: labels, vertical: "Merged" }))] }), hasCellText && presence.hasBelow && ((0, jsx_runtime_1.jsx)(BarChartCellTextPreview_1.BarChartCellTextPreview, { className: cellTextClassName, style: fontStyle, cellTextProperties: cellTextProperties, labels: labels, vertical: "Below" }))] }));
 };
 const StyledColumnBulletPreview = ({ data }) => {
     const bullet = data.BulletChartStyle;

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

@@ -1,5 +1,6 @@
 import * as React from 'react';
-import { BulletChartStyle, RangeBarStyle } from '../../../../../AdaptableState/StyledColumnState';
+import { BulletChartStyle } from '../../../../../AdaptableState/StyledColumns/BulletChartStyle';
+import { RangeBarStyle } from '../../../../../AdaptableState/StyledColumns/RangeBarStyle';
 /**
  * Compact schematic of a Range Bar (bands + track + value / reference markers)
  * for the Styled Columns object list and wizard step summaries.

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

@@ -44,10 +44,10 @@ const DEFAULT_MARKER = 'var(--ab-color-foreground, #333)';
 const StyledColumnRangeBarListPreview = (props) => {
     const { range } = props;
     const segments = bandSegmentsForPreview(range.CellRanges);
-    const trackFill = range.TrackColor ?? DEFAULT_TRACK;
+    const trackFill = range.Track?.Color ?? DEFAULT_TRACK;
     const valueColor = range.Marker?.Color || DEFAULT_BAR;
-    const refColor = range.ReferenceMarker?.Color || DEFAULT_MARKER;
-    const hasRef = range.Reference != undefined;
+    const refColor = range.Reference?.Marker?.Color || DEFAULT_MARKER;
+    const hasRef = range.Reference?.Value != undefined;
     const isVertical = range.Orientation === 'Vertical';
     return ((0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:rounded twa:border twa:border-[color-mix(in_srgb,var(--ab-color-foreground)_12%,transparent)] twa:bg-[color-mix(in_srgb,var(--ab-color-primary)_40%,transparent)] twa:px-1 twa:py-0.5", style: { width: PREVIEW_WIDTH, height: PREVIEW_HEIGHT }, children: (0, jsx_runtime_1.jsxs)("svg", { width: "100%", height: "100%", viewBox: `0 0 ${VB_W} ${VB_H}`, preserveAspectRatio: "none", "aria-hidden": true, children: [segments.length === 0 ? ((0, jsx_runtime_1.jsx)("rect", { x: "0", y: "0", width: VB_W, height: VB_H, fill: range.BackColor ?? 'transparent' })) : (segments.map((s, i) => ((0, jsx_runtime_1.jsx)("rect", { x: s.x0 * VB_W, y: "0", width: (s.x1 - s.x0) * VB_W, height: VB_H, fill: s.color, opacity: 0.55 }, i)))), isVertical ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("rect", { x: VB_W * 0.42, y: "2", width: "5", height: VB_H - 4, rx: "1", fill: trackFill }), hasRef && ((0, jsx_runtime_1.jsx)("line", { x1: VB_W * 0.46, y1: "3", x2: VB_W * 0.46, y2: VB_H - 3, stroke: refColor, strokeWidth: "2", vectorEffect: "non-scaling-stroke" })), (0, jsx_runtime_1.jsx)("polygon", { points: `${VB_W * 0.52},${VB_H * 0.35} ${VB_W * 0.62},${VB_H * 0.5} ${VB_W * 0.52},${VB_H * 0.65}`, fill: valueColor })] })) : ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("rect", { x: "2", y: VB_H * 0.38, width: VB_W - 4, height: "5", rx: "1", fill: trackFill }), hasRef && ((0, jsx_runtime_1.jsx)("line", { x1: VB_W * 0.38, y1: VB_H * 0.2, x2: VB_W * 0.38, y2: VB_H * 0.8, stroke: refColor, strokeWidth: "2", vectorEffect: "non-scaling-stroke" })), (0, jsx_runtime_1.jsx)("polygon", { points: `${VB_W * 0.72},${VB_H * 0.2} ${VB_W * 0.82},${VB_H * 0.5} ${VB_W * 0.72},${VB_H * 0.8}`, fill: valueColor })] }))] }) }));
 };
@@ -59,8 +59,8 @@ exports.StyledColumnRangeBarListPreview = StyledColumnRangeBarListPreview;
 const StyledColumnBulletChartListPreview = (props) => {
     const { bullet } = props;
     const segments = bandSegmentsForPreview(bullet.CellRanges);
-    const barColor = bullet.BarColor ?? DEFAULT_BAR;
-    const markerColor = bullet.TargetMarker?.Color || DEFAULT_MARKER;
+    const barColor = bullet.Bar?.Color ?? DEFAULT_BAR;
+    const markerColor = bullet.TargetProperties?.Marker?.Color || DEFAULT_MARKER;
     return ((0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:rounded twa:border twa:border-[color-mix(in_srgb,var(--ab-color-foreground)_12%,transparent)] twa:bg-[color-mix(in_srgb,var(--ab-color-primary)_40%,transparent)] twa:px-1 twa:py-0.5", style: { width: PREVIEW_WIDTH, height: PREVIEW_HEIGHT }, children: (0, jsx_runtime_1.jsxs)("svg", { width: "100%", height: "100%", viewBox: `0 0 ${VB_W} ${VB_H}`, preserveAspectRatio: "none", "aria-hidden": true, children: [segments.length === 0 ? ((0, jsx_runtime_1.jsx)("rect", { x: "0", y: "0", width: VB_W, height: VB_H, fill: bullet.BackColor ?? 'transparent' })) : (segments.map((s, i) => ((0, jsx_runtime_1.jsx)("rect", { x: s.x0 * VB_W, y: "2", width: (s.x1 - s.x0) * VB_W, height: VB_H - 4, fill: s.color, opacity: 0.5 }, i)))), (0, jsx_runtime_1.jsx)("rect", { x: VB_W * 0.04, y: VB_H * 0.35, width: VB_W * 0.58, height: VB_H * 0.3, rx: "1", fill: barColor }), (0, jsx_runtime_1.jsx)("line", { x1: VB_W * 0.78, y1: VB_H * 0.12, x2: VB_W * 0.78, y2: VB_H * 0.88, stroke: markerColor, strokeWidth: "2.5", vectorEffect: "non-scaling-stroke" })] }) }));
 };
 exports.StyledColumnBulletChartListPreview = StyledColumnBulletChartListPreview;

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

@@ -39,7 +39,7 @@ const renderIconSpecForPreview = (spec, size) => {
     return null;
 };
 const buildPreviewText = (mapping, iconStyle) => {
-    const cellTextTokens = iconStyle.CellText ?? [];
+    const cellTextTokens = iconStyle.CellTextProperties?.CellText ?? [];
     const formatted = String(mapping.Key);
     const textParts = [];
     if (cellTextTokens.includes('CellValue') && formatted) {
@@ -53,7 +53,7 @@ const buildPreviewText = (mapping, iconStyle) => {
 const IconCellPreviewTree = ({ iconStyle, mapping }) => {
     const size = iconStyle.Size ?? exports.DEFAULT_ICON_STYLE_SIZE;
     const gap = iconStyle.Gap ?? exports.DEFAULT_ICON_STYLE_GAP;
-    const textPosition = iconStyle.CellTextPosition ?? 'After';
+    const textPosition = iconStyle.CellTextProperties?.CellTextPosition ?? 'After';
     const text = buildPreviewText(mapping, iconStyle);
     const fontStyle = iconStyle.Font ? (0, StyleHelper_1.convertAdaptableStyleToCSS)(iconStyle.Font) : undefined;
     const iconNode = renderIconSpecForPreview(mapping.Icon, size);