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

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

@@ -18,7 +18,7 @@ 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");
@@ -73,7 +73,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) {
@@ -82,8 +82,9 @@ const getStyledColumnIconMappingsViewValues = (data) => {
     if (ic.MatchMode && ic.MatchMode !== 'Exact') {
         items.push(`Match Mode: ${ic.MatchMode}`);
     }
-    if (ic.Fallback && ic.Fallback !== 'Hide') {
-        items.push(`Fallback: ${ic.Fallback}`);
+    const fallbackMode = ic.FallbackProperties?.Mode;
+    if (fallbackMode && fallbackMode !== 'Hide') {
+        items.push(`Fallback: ${fallbackMode}`);
     }
     return items;
 };
@@ -96,9 +97,10 @@ const buildStyledColumnIconStyleSummaryStrings = (ic, options) => {
     if (ic.Gap != null) {
         items.push(`Gap: ${ic.Gap}px`);
     }
-    if (ic.CellText?.length) {
-        items.push(`Cell Text: ${formatIconCellTextSummary(ic.CellText)}`);
-        items.push(`Cell Text Position: ${ic.CellTextPosition ?? 'After'}`);
+    const ctp = ic.CellTextProperties;
+    if (ctp?.CellText?.length) {
+        items.push(`Cell Text: ${formatIconCellTextSummary(ctp.CellText)}`);
+        items.push(`Cell Text Position: ${ctp.CellTextPosition ?? 'After'}`);
     }
     else if (options.includeEmptyCellText) {
         items.push('Cell Text: None');
@@ -264,12 +266,35 @@ const StyledColumnWizardIconSection = (props) => {
     // -----------------------------------------------------------------------
     // CellText helpers
     // -----------------------------------------------------------------------
+    const updateCellTextProperties = (patch) => {
+        const merged = {
+            ...iconStyle.CellTextProperties,
+            ...patch,
+        };
+        // Strip the wrapper when both inner properties are unset, so empty state
+        // serialises cleanly.
+        const isEmpty = !merged.CellText?.length && merged.CellTextPosition == undefined;
+        update({ CellTextProperties: isEmpty ? undefined : merged });
+    };
     const toggleCellText = (token, checked) => {
-        const current = iconStyle.CellText ?? [];
+        const current = iconStyle.CellTextProperties?.CellText ?? [];
         const next = checked
             ? Array.from(new Set([...current, token]))
             : current.filter((t) => t !== token);
-        update({ CellText: next });
+        updateCellTextProperties({ CellText: next });
+    };
+    // -----------------------------------------------------------------------
+    // Fallback helpers
+    // -----------------------------------------------------------------------
+    const updateFallbackProperties = (patch) => {
+        const merged = {
+            ...iconStyle.FallbackProperties,
+            ...patch,
+        };
+        // Strip the wrapper when there's nothing to remember; the renderer
+        // already defaults to `Mode: 'Hide'` when `FallbackProperties` is unset.
+        const isEmpty = (merged.Mode == undefined || merged.Mode === 'Hide') && merged.Icon == undefined;
+        update({ FallbackProperties: isEmpty ? undefined : merged });
     };
     const toggleToolTipText = (token, checked) => {
         const current = iconStyle.ToolTipText ?? [];
@@ -283,9 +308,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'
@@ -298,14 +323,14 @@ const StyledColumnWizardIconSection = (props) => {
                                                         }), placeholder: "Tooltip label (optional)" }) }), (0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:w-8 twa:shrink-0 twa:flex twa:justify-center", children: (0, jsx_runtime_1.jsx)(SimpleButton_1.default, { icon: "delete", variant: "text", tooltip: "Remove mapping", onClick: () => removeMapping(i) }) })] }, i)))] })), (0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:mt-2", children: (0, jsx_runtime_1.jsx)(ButtonNew_1.ButtonNew, { onClick: addMapping, children: "Add Mapping" }) })] })] }), (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: "Matching" }), (0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:text-xs twa:opacity-70 twa:font-normal twa:max-w-[520px]", children: "How keys are compared to cell values, and what to render when no mapping matches" })] }), (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: "Match Mode:", children: (0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:max-w-[200px]", children: (0, jsx_runtime_1.jsx)(NewSelect_1.SingleSelect, { className: "twa:w-full", value: iconStyle.MatchMode ?? 'Exact', onValueChange: (v) => update({ MatchMode: v }), items: [
                                                     { value: 'Exact', label: 'Exact Match Required' },
                                                     { value: 'CaseInsensitive', label: 'Case-insensitive (strings)' },
-                                                ] }) }) }), (0, jsx_runtime_1.jsx)(FormLayout_1.FormRow, { label: "Fallback:", children: (0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:max-w-[200px]", children: (0, jsx_runtime_1.jsx)(NewSelect_1.SingleSelect, { className: "twa:w-full", value: iconStyle.Fallback ?? 'Hide', onValueChange: (v) => update({ Fallback: v }), items: [
+                                                ] }) }) }), (0, jsx_runtime_1.jsx)(FormLayout_1.FormRow, { label: "Fallback:", children: (0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:max-w-[200px]", children: (0, jsx_runtime_1.jsx)(NewSelect_1.SingleSelect, { className: "twa:w-full", value: iconStyle.FallbackProperties?.Mode ?? 'Hide', onValueChange: (v) => updateFallbackProperties({ Mode: v }), items: [
                                                     { value: 'Hide', label: 'Show No Value' },
                                                     { value: 'ShowText', label: 'Show Raw Value' },
                                                     { value: 'Icon', label: 'Show Fallback Icon' },
-                                                ] }) }) }), iconStyle.Fallback === 'Icon' && ((0, jsx_runtime_1.jsx)(FormLayout_1.FormRow, { label: "Fallback Icon:", children: (0, jsx_runtime_1.jsx)(IconPickerButton, { value: iconStyle.FallbackIcon, onChange: (next) => update({ FallbackIcon: next }) }) }))] }) })] })] }));
+                                                ] }) }) }), iconStyle.FallbackProperties?.Mode === 'Icon' && ((0, jsx_runtime_1.jsx)(FormLayout_1.FormRow, { label: "Fallback Icon:", children: (0, jsx_runtime_1.jsx)(IconPickerButton, { value: iconStyle.FallbackProperties?.Icon, onChange: (next) => updateFallbackProperties({ Icon: next }) }) }))] }) })] })] }));
     }
     // ----- Style variant (wizard step title: "Style") ------------------------
-    const cellText = iconStyle.CellText ?? [];
+    const cellText = iconStyle.CellTextProperties?.CellText ?? [];
     const toolTipText = iconStyle.ToolTipText ?? [];
     const cellTextDisabled = cellText.length === 0;
     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.jsx)(Card_1.Card.Title, { children: "Sizing" }), (0, jsx_runtime_1.jsx)(Card_1.Card.Body, { children: (0, jsx_runtime_1.jsxs)(FormLayout_1.default, { sizes: [...STYLE_FORM_SIZES], children: [(0, jsx_runtime_1.jsx)(FormLayout_1.FormRow, { label: "Icon Size (px):", children: (0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:max-w-[100px]", children: (0, jsx_runtime_1.jsx)(Input_1.default, { type: "number", min: 8, step: 1, value: iconStyle.Size ?? '', placeholder: "18", className: "twa:w-full", onChange: (event) => {
@@ -318,7 +343,9 @@ const StyledColumnWizardIconSection = (props) => {
                                                 update({
                                                     Size: Number.isFinite(parsed) && parsed >= 8 ? parsed : undefined,
                                                 });
-                                            } }) }) }), (0, jsx_runtime_1.jsx)(FormLayout_1.FormRow, { label: "Gap (px):", children: (0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:max-w-[100px]", children: (0, jsx_runtime_1.jsx)(NumberInput_1.NumberInput, { value: iconStyle.Gap ?? '', placeholder: "4", min: 0, step: 1, onChange: (value) => update({ Gap: typeof value === 'number' ? value : undefined }) }) }) })] }) })] }), (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: "Optionally show the raw value or the matched description alongside the icon (e.g. flag plus label)." })] }), (0, jsx_runtime_1.jsxs)(Card_1.Card.Body, { children: [(0, jsx_runtime_1.jsxs)(FormLayout_1.default, { sizes: [...STYLE_FORM_SIZES], children: [(0, jsx_runtime_1.jsxs)(FormLayout_1.FormRow, { label: "Cell Display:", children: [(0, jsx_runtime_1.jsx)(CheckBox_1.CheckBox, { checked: cellText.includes('CellValue'), onChange: (checked) => toggleCellText('CellValue', checked), children: "Cell Value" }), ' ', (0, jsx_runtime_1.jsx)(CheckBox_1.CheckBox, { className: "twa:ml-3", checked: cellText.includes('IconDescription'), onChange: (checked) => toggleCellText('IconDescription', checked), children: "Description" })] }), (0, jsx_runtime_1.jsx)(FormLayout_1.FormRow, { label: "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", value: iconStyle.CellTextPosition ?? 'After', onValueChange: (v) => update({ CellTextPosition: v }), items: [
+                                            } }) }) }), (0, jsx_runtime_1.jsx)(FormLayout_1.FormRow, { label: "Gap (px):", children: (0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:max-w-[100px]", children: (0, jsx_runtime_1.jsx)(NumberInput_1.NumberInput, { value: iconStyle.Gap ?? '', placeholder: "4", min: 0, step: 1, onChange: (value) => update({ Gap: typeof value === 'number' ? value : undefined }) }) }) })] }) })] }), (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: "Optionally show the raw value or the matched description alongside the icon (e.g. flag plus label)." })] }), (0, jsx_runtime_1.jsxs)(Card_1.Card.Body, { children: [(0, jsx_runtime_1.jsxs)(FormLayout_1.default, { sizes: [...STYLE_FORM_SIZES], children: [(0, jsx_runtime_1.jsxs)(FormLayout_1.FormRow, { label: "Cell Display:", children: [(0, jsx_runtime_1.jsx)(CheckBox_1.CheckBox, { checked: cellText.includes('CellValue'), onChange: (checked) => toggleCellText('CellValue', checked), children: "Cell Value" }), ' ', (0, jsx_runtime_1.jsx)(CheckBox_1.CheckBox, { className: "twa:ml-3", checked: cellText.includes('IconDescription'), onChange: (checked) => toggleCellText('IconDescription', checked), children: "Description" })] }), (0, jsx_runtime_1.jsx)(FormLayout_1.FormRow, { label: "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", value: iconStyle.CellTextProperties?.CellTextPosition ?? 'After', onValueChange: (v) => updateCellTextProperties({
+                                                    CellTextPosition: v,
+                                                }), items: [
                                                     { value: 'Before', label: 'Before' },
                                                     { value: 'After', label: 'After' },
                                                     { value: 'Above', label: 'Above' },

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 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',
@@ -109,14 +110,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) {
@@ -126,8 +123,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 +139,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 +148,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 +160,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, BarStylesHelper_1.hasBarStyleCellTextConfigured)(range.CellTextProperties)) {
+        const tokens = (0, BarStylesHelper_1.getActiveBarStyleCellTextTokens)(range.CellTextProperties);
+        items.push(`Cell Text: ${formatRangeBarCellTextSummary(tokens)}`);
+        const layoutSummary = (0, BarStylesHelper_1.formatBarStyleCellTextLayoutSummary)((0, BarStylesHelper_1.resolveBarStyleCellTextLayout)(range.CellTextProperties));
+        if (layoutSummary) {
+            items.push(`Placement: ${layoutSummary}`);
+        }
     }
     else if (options.includeEmptyCellText) {
         items.push('Cell Text: None');
@@ -332,22 +336,50 @@ 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.
     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,
@@ -359,6 +391,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 +409,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 +423,10 @@ const StyledColumnWizardRangeBarSection = (props) => {
         });
     };
     const updateReferenceMarker = (patch) => {
-        update({
-            ReferenceMarker: {
+        updateReferenceProperties({
+            Marker: {
                 Shape: 'Line',
-                ...range.ReferenceMarker,
+                ...range.Reference?.Marker,
                 ...patch,
             },
         });
@@ -395,18 +438,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, BarStylesHelper_1.toggleBarStyleCellTextToken)(range.CellTextProperties, token, show));
+    };
+    const onCellTextPlacementChange = (token, patch) => {
+        update({
+            CellTextProperties: (0, BarStylesHelper_1.patchBarStyleCellTextPlacement)(range.CellTextProperties, token, patch),
+        });
     };
     const toggleToolTipText = (token, checked) => {
         const current = range.ToolTipText ?? [];
@@ -415,9 +460,6 @@ const StyledColumnWizardRangeBarSection = (props) => {
             : current.filter((t) => t !== token);
         update({ ToolTipText: next });
     };
-    const handleCellTextPositionChange = (pos) => {
-        update({ CellTextPosition: pos });
-    };
     // -------------------------------------------------------------------------
     // Render
     // -------------------------------------------------------------------------
@@ -426,8 +468,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 +491,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)(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" })] })] }) })] }), (0, jsx_runtime_1.jsx)(StyledColumnRangeBarPreview_1.StyledColumnRangeBarPreviewCard, { data: data })] }))] }));
 };
 exports.StyledColumnWizardRangeBarSection = StyledColumnWizardRangeBarSection;

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/BarStyleCellTextLayoutEditor.d.ts

@@ -0,0 +1,9 @@
+import * as React from 'react';
+import { BarStyleCellTextPlacement, BarStyleCellTextProperties } from '../../../../../AdaptableState/StyledColumns/Common/BarStyleProperties';
+import { CellTextOption } from '../../../../../AdaptableState/StyledColumns/Common/CellTextOptions';
+export declare const BarStyleCellTextLayoutEditor: React.FunctionComponent<{
+    disabled?: boolean;
+    cellTextProperties?: BarStyleCellTextProperties;
+    onToggle: (token: CellTextOption, show: boolean) => 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/BarStyleCellTextPreview.d.ts

@@ -0,0 +1,23 @@
+import * as React from 'react';
+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)
+ * - `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 BarStyleCellTextPreview: React.FunctionComponent<{
+    className?: string;
+    style?: React.CSSProperties;
+    cellTextProperties?: BarStyleCellTextProperties;
+    labels: BarStyleCellTextLabels;
+    mergedOverlayClassName?: string;
+    /** Render only the band matching this vertical position. */
+    vertical?: 'Above' | 'Below' | 'Merged';
+}>;
+export declare const shouldShowBarStyleCellTextOutsideBar: (cellTextProperties: BarStyleCellTextProperties | undefined, hasCellText: boolean) => boolean;