@adaptabletools/adaptable-cjs 23.0.0-canary.4 → 23.0.0-canary.6

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

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.StyledColumnWizardGradientSection = exports.renderStyledColumnGradientStyleSummary = void 0;
+exports.StyledColumnWizardGradientSection = exports.renderStyledColumnGradientStyleSummary = exports.getStyledColumnGradientStyleViewValues = void 0;
 const tslib_1 = require("tslib");
 const jsx_runtime_1 = require("react/jsx-runtime");
 const React = tslib_1.__importStar(require("react"));
@@ -14,13 +14,39 @@ const NumberInput_1 = require("../../../components/Input/NumberInput");
 const StyledColumnGradientHelper_1 = require("../../../Utilities/Helpers/StyledColumnGradientHelper");
 const StyledColumnSliceStyleEditors_1 = require("./StyledColumnSliceStyleEditors");
 const Card_1 = require("../../../components/Card");
+const StyledColumnGradientPreview_1 = require("./StyledColumnWizardStyleSection/Components/StyledColumnGradientPreview");
 const STYLE_FORM_SIZES = ['200px', '1fr'];
-function formatToolTipText(opts) {
-    if (!opts || opts.length === 0) {
-        return '—';
-    }
-    return opts.map((t) => (t === 'CellValue' ? 'Cell Value' : 'Percent Value')).join(' + ');
+function formatGradientToolTipSummary(opts) {
+    return opts
+        .map((t) => (t === 'CellValue' ? 'Cell Value' : 'Percent Value'))
+        .join(' + ');
 }
+const buildStyledColumnGradientStyleSummaryStrings = (gs, options) => {
+    const minA = gs.MinAlpha ?? StyledColumnGradientHelper_1.DEFAULT_GRADIENT_MIN_ALPHA;
+    const maxA = gs.MaxAlpha ?? StyledColumnGradientHelper_1.DEFAULT_GRADIENT_MAX_ALPHA;
+    const items = [`Alpha: ${minA} → ${maxA}`];
+    if (gs.AutoContrastText) {
+        items.push('Auto Contrast: On');
+    }
+    if (gs.ToolTipText?.length) {
+        items.push(`Tooltip: ${formatGradientToolTipSummary(gs.ToolTipText)}`);
+    }
+    else if (options.includeEmptyTooltip) {
+        items.push('Tooltip: No Tooltip');
+    }
+    (0, StyledColumnSliceStyleEditors_1.getCellFontStyleSummaryItems)(gs.Font).forEach(({ label, value }) => {
+        items.push(`${label}: ${value}`);
+    });
+    return items;
+};
+const getStyledColumnGradientStyleViewValues = (data) => {
+    const gs = data.GradientStyle;
+    if (!gs) {
+        return [];
+    }
+    return buildStyledColumnGradientStyleSummaryStrings(gs, { includeEmptyTooltip: false });
+};
+exports.getStyledColumnGradientStyleViewValues = getStyledColumnGradientStyleViewValues;
 /**
  * Summary of Gradient-only style options (alpha bounds, auto-contrast, tooltip).
  */
@@ -29,10 +55,8 @@ const renderStyledColumnGradientStyleSummary = (data) => {
     if (!gs) {
         return (0, jsx_runtime_1.jsx)(Tag_1.Tag, { children: "No Styling Defined" });
     }
-    const minA = gs.MinAlpha ?? StyledColumnGradientHelper_1.DEFAULT_GRADIENT_MIN_ALPHA;
-    const maxA = gs.MaxAlpha ?? StyledColumnGradientHelper_1.DEFAULT_GRADIENT_MAX_ALPHA;
-    const fontTags = (0, StyledColumnSliceStyleEditors_1.renderFontStyleSummaryTags)(gs.Font);
-    return ((0, jsx_runtime_1.jsxs)(Flex_1.Flex, { alignItems: "center", className: "twa:flex-wrap twa:gap-2", children: [(0, jsx_runtime_1.jsxs)(Flex_1.Box, { children: ["Alpha: ", (0, jsx_runtime_1.jsx)(Tag_1.Tag, { children: minA }), " \u2192 ", (0, jsx_runtime_1.jsx)(Tag_1.Tag, { children: maxA })] }), gs.AutoContrastText && ((0, jsx_runtime_1.jsxs)(Flex_1.Box, { children: ["Text: ", (0, jsx_runtime_1.jsx)(Tag_1.Tag, { children: "Auto contrast" })] })), (0, jsx_runtime_1.jsxs)(Flex_1.Box, { children: ["Tooltip: ", (0, jsx_runtime_1.jsx)(Tag_1.Tag, { children: formatToolTipText(gs.ToolTipText) })] }), fontTags && (0, jsx_runtime_1.jsxs)(Flex_1.Box, { children: ["Font: ", fontTags] })] }));
+    const items = buildStyledColumnGradientStyleSummaryStrings(gs, { includeEmptyTooltip: true });
+    return ((0, jsx_runtime_1.jsx)(Flex_1.Flex, { alignItems: "center", className: "twa:flex-wrap twa:gap-2", children: items.map((item) => ((0, jsx_runtime_1.jsx)(Tag_1.Tag, { children: item }, item))) }));
 };
 exports.renderStyledColumnGradientStyleSummary = renderStyledColumnGradientStyleSummary;
 const StyledColumnWizardGradientSection = (props) => {
@@ -91,6 +115,6 @@ const StyledColumnWizardGradientSection = (props) => {
                                 else {
                                     patchGradient({ AutoContrastText: true });
                                 }
-                            }, children: "Make text readable on tinted backgrounds" }) })] }), (0, jsx_runtime_1.jsxs)(Card_1.Card, { shadow: false, className: "twa:mb-3", children: [(0, jsx_runtime_1.jsxs)(Card_1.Card.Title, { children: [(0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:font-medium", children: "Tooltip" }), (0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:text-xs twa:opacity-70 twa:font-normal twa:max-w-[600px]", children: "Set Tooltip properties" })] }), (0, jsx_runtime_1.jsx)(Card_1.Card.Body, { children: (0, jsx_runtime_1.jsx)(FormLayout_1.default, { sizes: [...STYLE_FORM_SIZES], children: (0, jsx_runtime_1.jsx)(FormLayout_1.FormRow, { label: "Tooltip:", children: (0, jsx_runtime_1.jsxs)(Flex_1.Box, { className: "twa:ml-2", children: [(0, jsx_runtime_1.jsx)(CheckBox_1.CheckBox, { disabled: disabled, checked: gs.ToolTipText?.includes('CellValue'), onChange: (checked) => onToolTipTextChanged('CellValue', checked), children: "Cell Value" }), ' ', (0, jsx_runtime_1.jsx)(CheckBox_1.CheckBox, { disabled: disabled, className: "twa:ml-3", checked: gs.ToolTipText?.includes('PercentageValue'), onChange: (checked) => onToolTipTextChanged('PercentageValue', checked), children: "Percent along scale" })] }) }) }) })] }), (0, jsx_runtime_1.jsxs)(Card_1.Card, { shadow: false, children: [(0, jsx_runtime_1.jsxs)(Card_1.Card.Title, { children: [(0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:font-medium", children: "Font" }), (0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:text-xs twa:opacity-70 twa:font-normal twa:max-w-[480px]", children: "Optional font properties (takes precedence over Format Column)" })] }), (0, jsx_runtime_1.jsx)(Card_1.Card.Body, { children: (0, jsx_runtime_1.jsx)(StyledColumnSliceStyleEditors_1.StyledColumnFontStyleEditor, { api: api, disabled: disabled, value: gs.Font, onChange: onFontChange }) })] }), !data.ColumnId && ((0, jsx_runtime_1.jsx)(ErrorBox_1.default, { className: "twa:mt-2", children: "Select a column before changing Gradient style." }))] }));
+                            }, children: "Make text readable on tinted backgrounds" }) })] }), (0, jsx_runtime_1.jsxs)(Card_1.Card, { shadow: false, className: "twa:mb-3", children: [(0, jsx_runtime_1.jsxs)(Card_1.Card.Title, { children: [(0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:font-medium", children: "Tooltip" }), (0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:text-xs twa:opacity-70 twa:font-normal twa:max-w-[600px]", children: "Set Tooltip properties" })] }), (0, jsx_runtime_1.jsx)(Card_1.Card.Body, { children: (0, jsx_runtime_1.jsx)(FormLayout_1.default, { sizes: [...STYLE_FORM_SIZES], children: (0, jsx_runtime_1.jsx)(FormLayout_1.FormRow, { label: "Tooltip:", children: (0, jsx_runtime_1.jsxs)(Flex_1.Box, { className: "twa:ml-2", children: [(0, jsx_runtime_1.jsx)(CheckBox_1.CheckBox, { disabled: disabled, checked: gs.ToolTipText?.includes('CellValue'), onChange: (checked) => onToolTipTextChanged('CellValue', checked), children: "Cell Value" }), ' ', (0, jsx_runtime_1.jsx)(CheckBox_1.CheckBox, { disabled: disabled, className: "twa:ml-3", checked: gs.ToolTipText?.includes('PercentageValue'), onChange: (checked) => onToolTipTextChanged('PercentageValue', checked), children: "Percent along scale" })] }) }) }) })] }), (0, jsx_runtime_1.jsxs)(Card_1.Card, { shadow: false, children: [(0, jsx_runtime_1.jsxs)(Card_1.Card.Title, { children: [(0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:font-medium", children: "Font" }), (0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:text-xs twa:opacity-70 twa:font-normal twa:max-w-[480px]", children: "Optional font properties (takes precedence over Format Column)" })] }), (0, jsx_runtime_1.jsx)(Card_1.Card.Body, { children: (0, jsx_runtime_1.jsx)(StyledColumnSliceStyleEditors_1.StyledColumnFontStyleEditor, { api: api, disabled: disabled, value: gs.Font, onChange: onFontChange }) })] }), (0, jsx_runtime_1.jsx)(StyledColumnGradientPreview_1.StyledColumnGradientPreviewCard, { data: data }), !data.ColumnId && ((0, jsx_runtime_1.jsx)(ErrorBox_1.default, { className: "twa:mt-2", children: "Select a column before changing Gradient style." }))] }));
 };
 exports.StyledColumnWizardGradientSection = StyledColumnWizardGradientSection;

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

@@ -1,7 +1,12 @@
 import * as React from 'react';
 import { StyledColumn } from '../../../AdaptableState/StyledColumnState';
+export declare const getStyledColumnIconMappingsViewValues: (data: StyledColumn) => string[];
+export declare const getStyledColumnIconStyleViewValues: (data: StyledColumn) => string[];
 /** Mappings step summary. */
 export declare const renderStyledColumnIconMappingsSummary: (data: StyledColumn) => React.JSX.Element;
+export declare const StyledColumnIconMappingsView: React.FunctionComponent<React.PropsWithChildren<{
+    data: StyledColumn;
+}>>;
 /** Style step summary (size, text, tooltip, font / cell). */
 export declare const renderStyledColumnIconStyleSummary: (data: StyledColumn) => React.JSX.Element;
 /**

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

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.StyledColumnWizardIconSection = exports.isValidIconStyleMappings = exports.renderStyledColumnIconSummary = exports.renderStyledColumnIconStyleSummary = exports.renderStyledColumnIconMappingsSummary = void 0;
+exports.StyledColumnWizardIconSection = exports.isValidIconStyleMappings = exports.renderStyledColumnIconSummary = exports.renderStyledColumnIconStyleSummary = exports.StyledColumnIconMappingsView = exports.renderStyledColumnIconMappingsSummary = exports.getStyledColumnIconStyleViewValues = exports.getStyledColumnIconMappingsViewValues = void 0;
 const tslib_1 = require("tslib");
 const jsx_runtime_1 = require("react/jsx-runtime");
 const React = tslib_1.__importStar(require("react"));
@@ -19,6 +19,7 @@ const IconStylePresets_1 = require("../../../Utilities/Helpers/IconStylePresets"
 const IconRenderer_1 = require("../../../agGrid/cellRenderers/IconRenderer");
 const Card_1 = require("../../../components/Card");
 const StyledColumnSliceStyleEditors_1 = require("./StyledColumnSliceStyleEditors");
+const StyledColumnIconPreview_1 = require("./StyledColumnWizardStyleSection/Components/StyledColumnIconPreview");
 const STYLE_FORM_SIZES = ['200px', '1fr'];
 const detectIconKind = (spec) => {
     if (typeof spec === 'string')
@@ -41,38 +42,114 @@ const previewIcon = (spec) => {
 // ---------------------------------------------------------------------------
 // Summary helpers (used by the wizard step header + Styled Columns list)
 // ---------------------------------------------------------------------------
+const ICON_MAPPINGS_PREVIEW_CHIP_LIMIT = 6;
 const previewMapping = (mapping, index) => {
-    return ((0, jsx_runtime_1.jsxs)(Flex_1.Flex, { alignItems: "center", className: "twa:gap-1 twa:px-1.5 twa:py-0.5 twa:rounded twa:bg-[var(--ab-color-primary)] twa:text-[var(--ab-color-primarytext)]", children: [(0, jsx_runtime_1.jsx)(Flex_1.Box, { children: previewIcon(mapping.Icon) }), (0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:text-xs twa:opacity-90", children: String(mapping.Key) })] }, index));
+    return ((0, jsx_runtime_1.jsxs)(Flex_1.Flex, { alignItems: "center", className: "twa:gap-1 twa:px-1.5 twa:py-0.5 twa:rounded twa:bg-[var(--ab-color-primary)] twa:text-[var(--ab-color-primarytext)]", children: [(0, jsx_runtime_1.jsx)(Flex_1.Box, { children: previewIcon(mapping.Icon) }), (0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:text-xs twa:opacity-90", children: String(mapping.Key) })] }, `${String(mapping.Key)}-${index}`));
 };
 const renderMappingsPreview = (mappings) => {
     if (!mappings || mappings.length === 0) {
         return (0, jsx_runtime_1.jsx)(Tag_1.Tag, { children: "No mappings" });
     }
-    const previewItems = mappings.slice(0, 6).map((m, i) => previewMapping(m, i));
+    const previewItems = mappings.slice(0, ICON_MAPPINGS_PREVIEW_CHIP_LIMIT).map((m, i) => previewMapping(m, i));
     const remaining = mappings.length - previewItems.length;
     return ((0, jsx_runtime_1.jsxs)(Flex_1.Flex, { alignItems: "center", className: "twa:gap-1 twa:flex-wrap", children: [previewItems, remaining > 0 && (0, jsx_runtime_1.jsxs)(Flex_1.Box, { className: "twa:text-xs twa:opacity-60", children: ["+", remaining, " more"] })] }));
 };
+const formatIconCellTextSummary = (cellText) => cellText
+    ?.map((t) => (t === 'CellValue' ? 'Cell Value' : 'Description'))
+    .join(' + ') ?? '';
+const formatIconToolTipSummary = (toolTipText) => toolTipText
+    ?.map((t) => (t === 'CellValue' ? 'Cell Value' : 'Description'))
+    .join(' + ') ?? '';
+const getStyledColumnIconMappingsViewValues = (data) => {
+    const ic = data.IconStyle;
+    if (!ic) {
+        return [];
+    }
+    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]}`);
+    }
+    const customCount = ic.Mappings?.length ?? 0;
+    if (customCount > 0) {
+        items.push(`Custom Mappings: ${customCount}`);
+    }
+    if (ic.MatchMode && ic.MatchMode !== 'Exact') {
+        items.push(`Match Mode: ${ic.MatchMode}`);
+    }
+    if (ic.Fallback && ic.Fallback !== 'Hide') {
+        items.push(`Fallback: ${ic.Fallback}`);
+    }
+    return items;
+};
+exports.getStyledColumnIconMappingsViewValues = getStyledColumnIconMappingsViewValues;
+const buildStyledColumnIconStyleSummaryStrings = (ic, options) => {
+    const items = [];
+    if (ic.Size != null) {
+        items.push(`Icon Size: ${ic.Size}px`);
+    }
+    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'}`);
+    }
+    else if (options.includeEmptyCellText) {
+        items.push('Cell Text: None');
+    }
+    (0, StyledColumnSliceStyleEditors_1.getCellFontStyleSummaryItems)(ic.Font).forEach(({ label, value }) => {
+        items.push(`${label}: ${value}`);
+    });
+    (0, StyledColumnSliceStyleEditors_1.getCellBoxStyleSummaryItems)(ic.Cell).forEach(({ label, value }) => {
+        items.push(`${label}: ${value}`);
+    });
+    if (ic.ToolTipText?.length) {
+        items.push(`Tooltip: ${formatIconToolTipSummary(ic.ToolTipText)}`);
+    }
+    else if (options.includeEmptyTooltip) {
+        items.push('Tooltip: No Tooltip');
+    }
+    return items;
+};
+const getStyledColumnIconStyleViewValues = (data) => {
+    const ic = data.IconStyle;
+    if (!ic) {
+        return [];
+    }
+    return buildStyledColumnIconStyleSummaryStrings(ic, {
+        includeEmptyCellText: false,
+        includeEmptyTooltip: false,
+    });
+};
+exports.getStyledColumnIconStyleViewValues = getStyledColumnIconStyleViewValues;
 /** Mappings step summary. */
 const renderStyledColumnIconMappingsSummary = (data) => {
     const ic = data.IconStyle;
     if (!ic) {
         return (0, jsx_runtime_1.jsx)(Tag_1.Tag, { children: "No Icon Style defined" });
     }
-    // Show the *effective* mapping count (preset + user) so the summary
-    // matches what the renderer actually uses at runtime.
-    const effectiveMappings = (0, IconRenderer_1.resolveEffectiveIconStyleMappings)(ic);
-    const customCount = ic.Mappings?.length ?? 0;
-    return ((0, jsx_runtime_1.jsxs)(Flex_1.Flex, { flexDirection: "column", className: "twa:gap-2 twa:items-start", children: [(0, jsx_runtime_1.jsxs)(Flex_1.Flex, { alignItems: "center", className: "twa:flex-wrap", children: [(0, jsx_runtime_1.jsxs)(Flex_1.Box, { className: "twa:mr-1", children: [effectiveMappings.length, " ", effectiveMappings.length === 1 ? 'mapping' : 'mappings'] }), ic.Preset && ((0, jsx_runtime_1.jsxs)(Flex_1.Box, { className: "twa:mr-1", children: ["\u00B7 Preset: ", (0, jsx_runtime_1.jsx)(Tag_1.Tag, { children: IconStylePresets_1.ICON_STYLE_PRESET_LABELS[ic.Preset] })] })), customCount > 0 && ((0, jsx_runtime_1.jsxs)(Flex_1.Box, { className: "twa:mr-1", children: ["\u00B7 Custom: ", (0, jsx_runtime_1.jsx)(Tag_1.Tag, { children: customCount })] })), ic.MatchMode && ic.MatchMode !== 'Exact' && ((0, jsx_runtime_1.jsxs)(Flex_1.Box, { className: "twa:mr-1", children: ["\u00B7 Match: ", (0, jsx_runtime_1.jsx)(Tag_1.Tag, { children: ic.MatchMode })] })), ic.Fallback && ic.Fallback !== 'Hide' && ((0, jsx_runtime_1.jsxs)(Flex_1.Box, { className: "twa:mr-1", children: ["\u00B7 Fallback: ", (0, jsx_runtime_1.jsx)(Tag_1.Tag, { children: ic.Fallback })] }))] }), renderMappingsPreview(effectiveMappings)] }));
+    const tagItems = (0, exports.getStyledColumnIconMappingsViewValues)(data);
+    const previewMappings = (0, IconRenderer_1.resolveIconStyleMappingsForSummaryPreview)(ic);
+    return ((0, jsx_runtime_1.jsxs)(Flex_1.Flex, { flexDirection: "column", className: "twa:gap-2 twa:items-start", children: [(0, jsx_runtime_1.jsx)(Flex_1.Flex, { alignItems: "center", className: "twa:flex-wrap twa:gap-2", children: tagItems.map((item) => ((0, jsx_runtime_1.jsx)(Tag_1.Tag, { children: item }, item))) }), renderMappingsPreview(previewMappings)] }));
 };
 exports.renderStyledColumnIconMappingsSummary = renderStyledColumnIconMappingsSummary;
+const StyledColumnIconMappingsView = ({ data }) => (0, exports.renderStyledColumnIconMappingsSummary)(data);
+exports.StyledColumnIconMappingsView = StyledColumnIconMappingsView;
 /** Style step summary (size, text, tooltip, font / cell). */
 const renderStyledColumnIconStyleSummary = (data) => {
     const ic = data.IconStyle;
     if (!ic) {
         return (0, jsx_runtime_1.jsx)(Tag_1.Tag, { children: "No Icon Style defined" });
     }
-    const cellText = ic.CellText ?? [];
-    return ((0, jsx_runtime_1.jsxs)(Flex_1.Flex, { alignItems: "center", className: "twa:flex-wrap", children: [(0, jsx_runtime_1.jsxs)(Flex_1.Box, { className: "twa:mr-1", children: ["Size: ", (0, jsx_runtime_1.jsxs)(Tag_1.Tag, { children: [ic.Size ?? 18, "px"] })] }), cellText.length > 0 && ((0, jsx_runtime_1.jsxs)(Flex_1.Box, { className: "twa:mr-1", children: ["\u00B7 Text: ", (0, jsx_runtime_1.jsx)(Tag_1.Tag, { children: cellText.join(', ') })] })), cellText.length > 0 && ((0, jsx_runtime_1.jsxs)(Flex_1.Box, { className: "twa:mr-1", children: ["\u00B7 Position: ", (0, jsx_runtime_1.jsx)(Tag_1.Tag, { children: ic.CellTextPosition ?? 'After' })] })), ic.ToolTipText?.length > 0 && ((0, jsx_runtime_1.jsxs)(Flex_1.Box, { className: "twa:mr-1", children: ["\u00B7 Tooltip: ", (0, jsx_runtime_1.jsx)(Tag_1.Tag, { children: ic.ToolTipText.join(', ') })] }))] }));
+    const items = buildStyledColumnIconStyleSummaryStrings(ic, {
+        includeEmptyCellText: true,
+        includeEmptyTooltip: true,
+    });
+    if (!items.length) {
+        return (0, jsx_runtime_1.jsx)(Tag_1.Tag, { children: "No Style Defined" });
+    }
+    return ((0, jsx_runtime_1.jsx)(Flex_1.Flex, { alignItems: "center", className: "twa:flex-wrap twa:gap-2", children: items.map((item) => ((0, jsx_runtime_1.jsx)(Tag_1.Tag, { children: item }, item))) }));
 };
 exports.renderStyledColumnIconStyleSummary = renderStyledColumnIconStyleSummary;
 /**
@@ -248,7 +325,7 @@ const StyledColumnWizardIconSection = (props) => {
                                                     { value: 'After', label: 'After' },
                                                     { value: 'Above', label: 'Above' },
                                                     { value: 'Below', label: 'Below' },
-                                                ] }) }) })] }), (0, jsx_runtime_1.jsx)(Flex_1.Box, { className: `twa:mt-3 twa:pt-3 twa:border-t twa:border-foreground/15 ${cellTextDisabled ? 'twa:opacity-50' : ''}`, children: (0, jsx_runtime_1.jsx)(StyledColumnSliceStyleEditors_1.StyledColumnFontStyleEditor, { api: api, disabled: disabled || cellTextDisabled, value: iconStyle.Font, onChange: onFontChange }) })] })] }), (0, jsx_runtime_1.jsxs)(Card_1.Card, { shadow: false, className: "twa:mb-3", children: [(0, jsx_runtime_1.jsxs)(Card_1.Card.Title, { children: [(0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:font-medium", children: "Tooltip" }), (0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:text-xs twa:opacity-70 twa:font-normal twa:max-w-[520px]", children: "Choose whether and how to display a tooltip" })] }), (0, jsx_runtime_1.jsx)(Card_1.Card.Body, { children: (0, jsx_runtime_1.jsx)(FormLayout_1.default, { sizes: [...STYLE_FORM_SIZES], children: (0, jsx_runtime_1.jsxs)(FormLayout_1.FormRow, { label: "Tooltip Display:", children: [(0, jsx_runtime_1.jsx)(CheckBox_1.CheckBox, { checked: toolTipText.includes('CellValue'), onChange: (checked) => toggleToolTipText('CellValue', checked), children: "Cell Value" }), ' ', (0, jsx_runtime_1.jsx)(CheckBox_1.CheckBox, { className: "twa:ml-3", checked: toolTipText.includes('IconDescription'), onChange: (checked) => toggleToolTipText('IconDescription', checked), children: "Description" })] }) }) })] }), (0, jsx_runtime_1.jsxs)(Card_1.Card, { shadow: false, children: [(0, jsx_runtime_1.jsxs)(Card_1.Card.Title, { children: [(0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:font-medium", children: "Cell" }), (0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:text-xs twa:opacity-70 twa:font-normal twa:max-w-[520px]", children: "Optional cell box styling (overrides Format Column properties)" })] }), (0, jsx_runtime_1.jsx)(Card_1.Card.Body, { children: (0, jsx_runtime_1.jsx)(StyledColumnSliceStyleEditors_1.StyledColumnCellStyleEditor, { api: api, disabled: disabled, value: iconStyle.Cell, onChange: onCellChange }) })] })] }));
+                                                ] }) }) })] }), (0, jsx_runtime_1.jsx)(Flex_1.Box, { className: `twa:mt-3 twa:pt-3 twa:border-t twa:border-foreground/15 ${cellTextDisabled ? 'twa:opacity-50' : ''}`, children: (0, jsx_runtime_1.jsx)(StyledColumnSliceStyleEditors_1.StyledColumnFontStyleEditor, { api: api, disabled: disabled || cellTextDisabled, value: iconStyle.Font, onChange: onFontChange }) })] })] }), (0, jsx_runtime_1.jsxs)(Card_1.Card, { shadow: false, className: "twa:mb-3", children: [(0, jsx_runtime_1.jsxs)(Card_1.Card.Title, { children: [(0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:font-medium", children: "Tooltip" }), (0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:text-xs twa:opacity-70 twa:font-normal twa:max-w-[520px]", children: "Choose whether and how to display a tooltip" })] }), (0, jsx_runtime_1.jsx)(Card_1.Card.Body, { children: (0, jsx_runtime_1.jsx)(FormLayout_1.default, { sizes: [...STYLE_FORM_SIZES], children: (0, jsx_runtime_1.jsxs)(FormLayout_1.FormRow, { label: "Tooltip Display:", children: [(0, jsx_runtime_1.jsx)(CheckBox_1.CheckBox, { checked: toolTipText.includes('CellValue'), onChange: (checked) => toggleToolTipText('CellValue', checked), children: "Cell Value" }), ' ', (0, jsx_runtime_1.jsx)(CheckBox_1.CheckBox, { className: "twa:ml-3", checked: toolTipText.includes('IconDescription'), onChange: (checked) => toggleToolTipText('IconDescription', checked), children: "Description" })] }) }) })] }), (0, jsx_runtime_1.jsxs)(Card_1.Card, { shadow: false, children: [(0, jsx_runtime_1.jsxs)(Card_1.Card.Title, { children: [(0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:font-medium", children: "Cell" }), (0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:text-xs twa:opacity-70 twa:font-normal twa:max-w-[520px]", children: "Optional cell box styling (overrides Format Column properties)" })] }), (0, jsx_runtime_1.jsx)(Card_1.Card.Body, { children: (0, jsx_runtime_1.jsx)(StyledColumnSliceStyleEditors_1.StyledColumnCellStyleEditor, { api: api, disabled: disabled, value: iconStyle.Cell, onChange: onCellChange }) })] }), (0, jsx_runtime_1.jsx)(StyledColumnIconPreview_1.StyledColumnIconPreviewCard, { data: data })] }));
 };
 exports.StyledColumnWizardIconSection = StyledColumnWizardIconSection;
 const IconSpecEditorFields = (props) => {

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

@@ -1,7 +1,12 @@
 import * as React from 'react';
 import { StyledColumn } from '../../../AdaptableState/StyledColumnState';
+export declare const getStyledColumnRangeBarRangeViewValues: (data: StyledColumn) => string[];
+export declare const getStyledColumnRangeBarDisplayViewValues: (data: StyledColumn) => string[];
 /** Summary line for the Range wizard step (bounds + bands only). */
 export declare const renderStyledColumnRangeBarRangeStepSummary: (data: StyledColumn) => React.JSX.Element;
+export declare const StyledColumnRangeBarRangeView: React.FunctionComponent<React.PropsWithChildren<{
+    data: StyledColumn;
+}>>;
 /** Summary for the Display wizard step (markers, track, text). */
 export declare const renderStyledColumnRangeBarDisplayStepSummary: (data: StyledColumn) => React.JSX.Element;
 /**

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

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.StyledColumnWizardRangeBarSection = exports.isValidRangeBarBounds = exports.renderStyledColumnRangeBarSummary = exports.renderStyledColumnRangeBarDisplayStepSummary = exports.renderStyledColumnRangeBarRangeStepSummary = void 0;
+exports.StyledColumnWizardRangeBarSection = exports.isValidRangeBarBounds = exports.renderStyledColumnRangeBarSummary = exports.renderStyledColumnRangeBarDisplayStepSummary = exports.StyledColumnRangeBarRangeView = exports.renderStyledColumnRangeBarRangeStepSummary = exports.getStyledColumnRangeBarDisplayViewValues = exports.getStyledColumnRangeBarRangeViewValues = void 0;
 const tslib_1 = require("tslib");
 const jsx_runtime_1 = require("react/jsx-runtime");
 const React = tslib_1.__importStar(require("react"));
@@ -18,7 +18,8 @@ const ArrayExtensions_1 = tslib_1.__importDefault(require("../../../Utilities/Ex
 const AdaptableInput_1 = tslib_1.__importDefault(require("../../Components/AdaptableInput"));
 const Flex_1 = require("../../../components/Flex");
 const NewSelect_1 = require("../../../components/NewSelect");
-const StyledColumnChartListPreviews_1 = require("./StyledColumnWizardStyleSection/Components/StyledColumnChartListPreviews");
+const RangeBarRangesSummaryPreview_1 = require("./StyledColumnWizardStyleSection/Components/RangeBarRangesSummaryPreview");
+const StyledColumnRangeBarPreview_1 = require("./StyledColumnWizardStyleSection/Components/StyledColumnRangeBarPreview");
 const Card_1 = require("../../../components/Card");
 const RANGE_STYLE_FORM_SIZES = ['200px', '1fr'];
 const BOUND_MODE_LABELS = {
@@ -49,41 +50,125 @@ const summarizeBound = (bound) => {
     }
     return bound;
 };
-// ---------------------------------------------------------------------------
-// Summary helper (Wizard "Style" step header)
-// ---------------------------------------------------------------------------
+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) {
+        return [];
+    }
+    const items = [
+        `Min: ${summarizeBound(range.Min)}`,
+        `Max: ${summarizeBound(range.Max)}`,
+    ];
+    if (range.Reference != undefined) {
+        items.push(`Reference: ${summarizeBound(range.Reference)}`);
+    }
+    const bandCount = range.CellRanges?.length ?? 0;
+    if (bandCount > 0) {
+        items.push(`Bands: ${bandCount}`);
+    }
+    if (range.RangeValueType != null) {
+        items.push(`Range Value Type: ${range.RangeValueType}`);
+    }
+    return items;
+};
+exports.getStyledColumnRangeBarRangeViewValues = getStyledColumnRangeBarRangeViewValues;
+const buildStyledColumnRangeBarDisplaySummaryStrings = (range, options) => {
+    const items = [];
+    const valueMarker = range.Marker;
+    const referenceMarker = range.ReferenceMarker;
+    items.push(`Value Marker Shape: ${valueMarker?.Shape ?? 'Diamond'}`);
+    if (valueMarker?.Color) {
+        items.push(`Value Marker Colour: ${valueMarker.Color}`);
+    }
+    if (valueMarker?.Size != null) {
+        items.push(`Value Marker Size: ${valueMarker.Size}px`);
+    }
+    if (range.Reference != undefined) {
+        items.push(`Reference Marker Shape: ${referenceMarker?.Shape ?? 'Line'}`);
+        if (referenceMarker?.Color) {
+            items.push(`Reference Marker Colour: ${referenceMarker.Color}`);
+        }
+        if (referenceMarker?.Size != null) {
+            items.push(`Reference Marker Size: ${referenceMarker.Size}px`);
+        }
+    }
+    if (range.Orientation === 'Vertical') {
+        items.push('Orientation: Vertical');
+    }
+    const outOfRangeMode = range.OutOfRangeMode ?? 'Clamp';
+    if (outOfRangeMode !== 'Clamp') {
+        items.push(`Out of Range: ${outOfRangeMode}`);
+    }
+    if (range.OutOfRangeColor) {
+        items.push(`Out of Range Colour: ${range.OutOfRangeColor}`);
+    }
+    if (range.TrackColor) {
+        items.push(`Track Colour: ${range.TrackColor}`);
+    }
+    if (range.TrackHeight != null) {
+        items.push(`Track Height: ${range.TrackHeight}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'}`);
+    }
+    else if (options.includeEmptyCellText) {
+        items.push('Cell Text: None');
+    }
+    if (range.ToolTipText?.length) {
+        items.push(`Tooltip: ${formatRangeBarToolTipSummary(range.ToolTipText)}`);
+    }
+    else if (options.includeEmptyTooltip) {
+        items.push('Tooltip: No Tooltip');
+    }
+    return items;
+};
+const getStyledColumnRangeBarDisplayViewValues = (data) => {
+    const range = data.RangeBarStyle;
+    if (!range) {
+        return [];
+    }
+    return buildStyledColumnRangeBarDisplaySummaryStrings(range, {
+        includeEmptyCellText: false,
+        includeEmptyTooltip: false,
+    });
+};
+exports.getStyledColumnRangeBarDisplayViewValues = getStyledColumnRangeBarDisplayViewValues;
 /** Summary line for the Range wizard step (bounds + bands only). */
 const renderStyledColumnRangeBarRangeStepSummary = (data) => {
     const range = data.RangeBarStyle;
     if (!range) {
         return (0, jsx_runtime_1.jsx)(Tag_1.Tag, { children: "No Styling Defined" });
     }
-    const bandCount = range.CellRanges?.length ?? 0;
-    const hasReference = range.Reference != undefined;
-    return ((0, jsx_runtime_1.jsxs)(Flex_1.Flex, { flexDirection: "column", className: "twa:gap-2 twa:items-start", children: [(0, jsx_runtime_1.jsxs)(Flex_1.Flex, { alignItems: "center", className: "twa:flex-wrap", children: [(0, jsx_runtime_1.jsxs)(Flex_1.Box, { className: "twa:mr-1", children: ["Min: ", (0, jsx_runtime_1.jsx)(Tag_1.Tag, { children: summarizeBound(range.Min) })] }), (0, jsx_runtime_1.jsxs)(Flex_1.Box, { className: "twa:mr-1", children: ["\u00B7 Max: ", (0, jsx_runtime_1.jsx)(Tag_1.Tag, { children: summarizeBound(range.Max) })] }), hasReference && ((0, jsx_runtime_1.jsxs)(Flex_1.Box, { className: "twa:mr-1", children: ["\u00B7 Ref: ", (0, jsx_runtime_1.jsx)(Tag_1.Tag, { children: summarizeBound(range.Reference) })] })), bandCount > 0 && ((0, jsx_runtime_1.jsxs)(Flex_1.Box, { className: "twa:mr-1", children: ["\u00B7 ", bandCount, " ", bandCount === 1 ? 'band' : 'bands'] }))] }), (0, jsx_runtime_1.jsx)(StyledColumnChartListPreviews_1.StyledColumnRangeBarListPreview, { range: range })] }));
+    const tagItems = (0, exports.getStyledColumnRangeBarRangeViewValues)(data);
+    return ((0, jsx_runtime_1.jsxs)(Flex_1.Flex, { flexDirection: "column", className: "twa:gap-2 twa:items-start", children: [(0, jsx_runtime_1.jsx)(Flex_1.Flex, { alignItems: "center", className: "twa:flex-wrap twa:gap-2", children: tagItems.map((item) => ((0, jsx_runtime_1.jsx)(Tag_1.Tag, { children: item }, item))) }), (0, jsx_runtime_1.jsx)(RangeBarRangesSummaryPreview_1.RangeBarRangesSummaryPreview, { rangeStyle: range })] }));
 };
 exports.renderStyledColumnRangeBarRangeStepSummary = renderStyledColumnRangeBarRangeStepSummary;
+const StyledColumnRangeBarRangeView = ({ data }) => (0, exports.renderStyledColumnRangeBarRangeStepSummary)(data);
+exports.StyledColumnRangeBarRangeView = StyledColumnRangeBarRangeView;
 /** Summary for the Display wizard step (markers, track, text). */
 const renderStyledColumnRangeBarDisplayStepSummary = (data) => {
     const range = data.RangeBarStyle;
     if (!range) {
         return (0, jsx_runtime_1.jsx)(Tag_1.Tag, { children: "No Styling Defined" });
     }
-    const isVertical = range.Orientation === 'Vertical';
-    const mode = range.OutOfRangeMode ?? 'Clamp';
-    const parts = [];
-    parts.push((0, jsx_runtime_1.jsxs)(Flex_1.Box, { className: "twa:mr-1", children: ["Value marker: ", (0, jsx_runtime_1.jsx)(Tag_1.Tag, { children: range.Marker?.Shape ?? 'Diamond' })] }, "vm"));
-    if (range.Reference != undefined) {
-        parts.push((0, jsx_runtime_1.jsxs)(Flex_1.Box, { className: "twa:mr-1", children: ["\u00B7 Ref marker: ", (0, jsx_runtime_1.jsx)(Tag_1.Tag, { children: range.ReferenceMarker?.Shape ?? 'Line' })] }, "rm"));
-    }
-    if (isVertical) {
-        parts.push((0, jsx_runtime_1.jsxs)(Flex_1.Box, { className: "twa:mr-1", children: ["\u00B7 ", (0, jsx_runtime_1.jsx)(Tag_1.Tag, { children: "vertical" })] }, "v"));
+    const items = buildStyledColumnRangeBarDisplaySummaryStrings(range, {
+        includeEmptyCellText: true,
+        includeEmptyTooltip: true,
+    });
+    if (!items.length) {
+        return (0, jsx_runtime_1.jsx)(Tag_1.Tag, { children: "No Display Defined" });
     }
-    parts.push((0, jsx_runtime_1.jsxs)(Flex_1.Box, { className: "twa:mr-1", children: ["\u00B7 Out: ", (0, jsx_runtime_1.jsx)(Tag_1.Tag, { children: mode })] }, "orm"));
-    if (range.CellText?.length) {
-        parts.push((0, jsx_runtime_1.jsxs)(Flex_1.Box, { className: "twa:mr-1", children: ["\u00B7 Text: ", (0, jsx_runtime_1.jsx)(Tag_1.Tag, { children: range.CellText.join(', ') })] }, "ct"));
-    }
-    return ((0, jsx_runtime_1.jsxs)(Flex_1.Flex, { flexDirection: "column", className: "twa:gap-2 twa:items-start", children: [(0, jsx_runtime_1.jsx)(Flex_1.Flex, { alignItems: "center", className: "twa:flex-wrap", children: parts }), (0, jsx_runtime_1.jsx)(StyledColumnChartListPreviews_1.StyledColumnRangeBarListPreview, { range: range })] }));
+    return ((0, jsx_runtime_1.jsx)(Flex_1.Flex, { alignItems: "center", className: "twa:flex-wrap twa:gap-2", children: items.map((item) => ((0, jsx_runtime_1.jsx)(Tag_1.Tag, { children: item }, item))) }));
 };
 exports.renderStyledColumnRangeBarDisplayStepSummary = renderStyledColumnRangeBarDisplayStepSummary;
 /**
@@ -94,10 +179,7 @@ const renderStyledColumnRangeBarSummary = (data) => {
     if (!range) {
         return (0, jsx_runtime_1.jsx)(Tag_1.Tag, { children: "No Styling Defined" });
     }
-    const bandCount = range.CellRanges?.length ?? 0;
-    const isVertical = range.Orientation === 'Vertical';
-    const hasReference = range.Reference != undefined;
-    return ((0, jsx_runtime_1.jsxs)(Flex_1.Flex, { flexDirection: "column", className: "twa:gap-2 twa:items-start", children: [(0, jsx_runtime_1.jsx)(StyledColumnChartListPreviews_1.StyledColumnRangeBarListPreview, { range: range }), (0, jsx_runtime_1.jsxs)(Flex_1.Flex, { alignItems: "center", className: "twa:flex-wrap", children: [(0, jsx_runtime_1.jsxs)(Flex_1.Box, { className: "twa:mr-1", children: ["Min: ", (0, jsx_runtime_1.jsx)(Tag_1.Tag, { children: summarizeBound(range.Min) })] }), (0, jsx_runtime_1.jsxs)(Flex_1.Box, { className: "twa:mr-1", children: ["\u00B7 Max: ", (0, jsx_runtime_1.jsx)(Tag_1.Tag, { children: summarizeBound(range.Max) })] }), hasReference && ((0, jsx_runtime_1.jsxs)(Flex_1.Box, { className: "twa:mr-1", children: ["\u00B7 Ref: ", (0, jsx_runtime_1.jsx)(Tag_1.Tag, { children: summarizeBound(range.Reference) })] })), bandCount > 0 && ((0, jsx_runtime_1.jsxs)(Flex_1.Box, { className: "twa:mr-1", children: ["\u00B7 ", bandCount, " ", bandCount === 1 ? 'band' : 'bands'] })), isVertical && ((0, jsx_runtime_1.jsxs)(Flex_1.Box, { className: "twa:mr-1", children: ["\u00B7 ", (0, jsx_runtime_1.jsx)(Tag_1.Tag, { children: "vertical" })] }))] })] }));
+    return ((0, jsx_runtime_1.jsxs)(Flex_1.Flex, { flexDirection: "column", className: "twa:gap-3 twa:items-start", children: [(0, exports.renderStyledColumnRangeBarRangeStepSummary)(data), (0, exports.renderStyledColumnRangeBarDisplayStepSummary)(data)] }));
 };
 exports.renderStyledColumnRangeBarSummary = renderStyledColumnRangeBarSummary;
 // ---------------------------------------------------------------------------
@@ -136,19 +218,25 @@ const MARKER_SHAPES = [
 ];
 const StyledColumnWizardRangeBarSection = (props) => {
     const { data, api } = (0, OnePageAdaptableWizard_1.useOnePageAdaptableWizardContext)();
-    const minMaxRangeValues = React.useMemo(() => {
+    const column = React.useMemo(() => {
         const columnId = data.ColumnId;
-        if (!columnId)
+        if (!columnId) {
+            return undefined;
+        }
+        return api.columnApi.getColumnWithColumnId(columnId);
+    }, [data.ColumnId, api]);
+    const minMaxRangeValues = React.useMemo(() => {
+        if (!column) {
             return null;
-        const column = api.columnApi.getColumnWithColumnId(columnId);
+        }
         return {
             min: api.styledColumnApi.internalApi.getMinValueForNumericColumn(column),
             max: api.styledColumnApi.internalApi.getMaxValueForNumericColumn(column),
         };
-    }, [data]);
+    }, [column, api]);
     const scope = { ColumnIds: [data.ColumnId] };
     const range = data.RangeBarStyle ?? {};
-    const disabled = !data.ColumnId;
+    const disabled = !data.ColumnId || !column;
     // -------------------------------------------------------------------------
     // Updaters
     // -------------------------------------------------------------------------
@@ -278,8 +366,10 @@ const StyledColumnWizardRangeBarSection = (props) => {
     // -------------------------------------------------------------------------
     // Render
     // -------------------------------------------------------------------------
-    if (!data.ColumnId) {
-        return ((0, jsx_runtime_1.jsx)(Flex_1.Box, { children: (0, jsx_runtime_1.jsx)(ErrorBox_1.default, { className: "twa:mt-2", children: "You need to select a column before styling." }) }));
+    if (!data.ColumnId || !column) {
+        return ((0, jsx_runtime_1.jsx)(Flex_1.Box, { children: (0, jsx_runtime_1.jsx)(ErrorBox_1.default, { className: "twa:mt-2", children: !data.ColumnId
+                    ? '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';
@@ -299,7 +389,7 @@ const StyledColumnWizardRangeBarSection = (props) => {
                                             field: 'Reference',
                                             optional: true,
                                             fallbackNumber: minMaxRangeValues?.max ?? 0,
-                                        })] }) })] }), (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: "Ranges" }), (0, jsx_runtime_1.jsxs)(Flex_1.Box, { className: "twa:text-xs twa:opacity-70 twa:font-normal twa:max-w-700px]", children: ["Optional coloured segments drawn ", (0, jsx_runtime_1.jsx)("em", { children: "behind" }), " track to form qualitative scale;leave empty for a plain track"] })] }), (0, jsx_runtime_1.jsx)(Card_1.Card.Body, { children: (0, jsx_runtime_1.jsx)(RangesComponent_1.RangesComponent, { allowEmptyRanges: true, disabled: disabled, minMaxRangeValues: minMaxRangeValues, api: api, scope: scope, ranges: range.CellRanges, rangeValueType: range.RangeValueType, onRangeValueTypeChange: onRangeValueTypeChange, columnComparison: range.ColumnComparison, updateRanges: onUpdateRanges, updateColumnComparison: onUpdateColumnComparison, hideColumnComparison: true }) })] })] })), !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: "Value Marker" }), (0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:text-xs twa:opacity-70 twa:font-normal twa:max-w-[520px]", children: "Drawn at the cell value's position along the track." })] }), (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: "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: valueMarker.Shape, onValueChange: (s) => updateValueMarker({ 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: valueMarker.Color || undefined, onChange: (c) => updateValueMarker({ 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: valueMarker.Size, onChange: (e) => updateValueMarker({ Size: Number(e.target.value) }) }) }) })] }) })] }), (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: "Reference Marker" }), (0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:text-xs twa:opacity-70 twa:font-normal twa:max-w-[520px]", children: hasReference
+                                        })] }) })] }), (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: "Ranges" }), (0, jsx_runtime_1.jsxs)(Flex_1.Box, { className: "twa:text-xs twa:opacity-70 twa:font-normal twa:max-w-700px]", children: ["Optional coloured segments drawn ", (0, jsx_runtime_1.jsx)("em", { children: "behind" }), " track to form qualitative scale;leave empty for a plain track"] })] }), (0, jsx_runtime_1.jsx)(Card_1.Card.Body, { children: (0, jsx_runtime_1.jsx)(RangesComponent_1.RangesComponent, { allowEmptyRanges: true, disabled: disabled, minMaxRangeValues: minMaxRangeValues, api: api, scope: scope, ranges: range.CellRanges ?? [], rangeValueType: range.RangeValueType, onRangeValueTypeChange: onRangeValueTypeChange, columnComparison: range.ColumnComparison, updateRanges: onUpdateRanges, updateColumnComparison: onUpdateColumnComparison, hideColumnComparison: true }) })] })] })), !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: "Value Marker" }), (0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:text-xs twa:opacity-70 twa:font-normal twa:max-w-[520px]", children: "Drawn at the cell value's position along the track." })] }), (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: "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: valueMarker.Shape, onValueChange: (s) => updateValueMarker({ 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: valueMarker.Color || undefined, onChange: (c) => updateValueMarker({ 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: valueMarker.Size, onChange: (e) => updateValueMarker({ Size: Number(e.target.value) }) }) }) })] }) })] }), (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: "Reference Marker" }), (0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:text-xs twa:opacity-70 twa:font-normal twa:max-w-[520px]", children: hasReference
                                             ? 'Drawn at the Reference value (e.g. previous close, target, midpoint).'
                                             : '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' },
@@ -314,6 +404,6 @@ const StyledColumnWizardRangeBarSection = (props) => {
                                                     { label: 'Above Bar', onClick: () => handleCellTextPositionChange('Above') },
                                                     { label: 'Below Bar', onClick: () => handleCellTextPositionChange('Below') },
                                                     { label: 'Merged', onClick: () => handleCellTextPositionChange('Merged') },
-                                                ], children: range.CellTextPosition ?? 'Below' }) }), (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" })] })] }) })] })] }))] }));
+                                                ], children: range.CellTextPosition ?? 'Below' }) }), (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/StyledColumnWizardRatingSection.d.ts

@@ -1,5 +1,6 @@
 import * as React from 'react';
 import { StyledColumn } from '../../../AdaptableState/StyledColumnState';
+export declare const getStyledColumnRatingStyleViewValues: (data: StyledColumn) => string[];
 export declare const renderStyledColumnRatingSummary: (data: StyledColumn) => React.JSX.Element;
 export declare const isValidRatingStyle: (data: StyledColumn) => true | string;
 export interface StyledColumnWizardRatingSectionProps {