@adaptabletools/adaptable 23.0.0-canary.3 → 23.0.0-canary.5

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

@@ -1,7 +1,12 @@
 import * as React from 'react';
 import { StyledColumn } from '../../../AdaptableState/StyledColumnState';
+export declare const getStyledColumnBulletRangesViewValues: (data: StyledColumn) => string[];
+export declare const getStyledColumnBulletStyleViewValues: (data: StyledColumn) => string[];
 /** Wizard / list-view summary for the Ranges step (qualitative bands). */
 export declare const renderStyledColumnBulletRangesSummary: (data: StyledColumn) => React.JSX.Element;
+export declare const StyledColumnBulletRangesView: React.FunctionComponent<React.PropsWithChildren<{
+    data: StyledColumn;
+}>>;
 /** Wizard / list-view summary for the Style step (target, bar, text, font). */
 export declare const renderStyledColumnBulletStyleSummary: (data: StyledColumn) => React.JSX.Element;
 /** Full combined summary (ranges + style); kept for callers that expect one block. */

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

@@ -13,9 +13,10 @@ import DropdownButton from '../../../components/DropdownButton';
 import ArrayExtensions from '../../../Utilities/Extensions/ArrayExtensions';
 import AdaptableInput from '../../Components/AdaptableInput';
 import { Box, Flex } from '../../../components/Flex';
-import { StyledColumnBulletChartListPreview } from './StyledColumnWizardStyleSection/Components/StyledColumnChartListPreviews';
+import { BulletRangesSummaryPreview } from './StyledColumnWizardStyleSection/Components/BulletRangesSummaryPreview';
+import { StyledColumnBulletPreviewCard } from './StyledColumnWizardStyleSection/Components/StyledColumnBulletPreview';
 import { SingleSelect } from '../../../components/NewSelect';
-import { renderFontStyleSummaryTags, StyledColumnFontStyleEditor, } from './StyledColumnSliceStyleEditors';
+import { getCellFontStyleSummaryItems, StyledColumnFontStyleEditor, } from './StyledColumnSliceStyleEditors';
 import { Card } from '../../../components/Card';
 const BULLET_STYLE_FORM_SIZES = ['200px', '1fr'];
 // ---------------------------------------------------------------------------
@@ -26,37 +27,131 @@ const getTargetSummary = (target) => {
         return null;
     }
     if (Array.isArray(target)) {
-        return `${target.length} target${target.length === 1 ? '' : 's'}`;
+        return target
+            .map((entry) => formatSingleBulletTargetSummary(entry))
+            .filter(Boolean)
+            .join(', ');
     }
+    return formatSingleBulletTargetSummary(target);
+};
+const formatSingleBulletTargetSummary = (target) => {
     if (typeof target === 'number') {
         return String(target);
     }
     if (typeof target === 'string') {
         return target;
     }
-    // object form
     const t = target;
     return t.Label ?? String(t.Value);
 };
+const formatBulletOriginLabel = (origin) => {
+    if (origin == undefined) {
+        return 'Auto';
+    }
+    if (typeof origin === 'number') {
+        return `Custom (${origin})`;
+    }
+    return origin;
+};
+const formatBulletCellTextSummary = (cellText) => cellText
+    ?.map((t) => (t === 'CellValue' ? 'Cell Value' : 'Percent Value'))
+    .join(' + ') ?? '';
+const formatBulletToolTipSummary = (toolTipText) => toolTipText
+    ?.map((t) => (t === 'CellValue' ? 'Cell Value' : 'Percent Value'))
+    .join(' + ') ?? '';
+export const getStyledColumnBulletRangesViewValues = (data) => {
+    const bullet = data.BulletChartStyle;
+    if (!bullet) {
+        return [];
+    }
+    const bandCount = bullet.CellRanges?.length ?? 0;
+    const items = [`Bands: ${bandCount}`];
+    if (bullet.RangeValueType != null) {
+        items.push(`Range Value Type: ${bullet.RangeValueType}`);
+    }
+    return items;
+};
+const buildStyledColumnBulletStyleSummaryStrings = (bullet, options) => {
+    const items = [];
+    const targetSummary = getTargetSummary(bullet.Target);
+    if (targetSummary) {
+        items.push(`Target: ${targetSummary}`);
+    }
+    const marker = bullet.TargetMarker;
+    if (marker?.Shape && marker.Shape !== 'Line') {
+        items.push(`Target Marker Shape: ${marker.Shape}`);
+    }
+    if (marker?.Color) {
+        items.push(`Target Marker Colour: ${marker.Color}`);
+    }
+    if (marker?.Size != null) {
+        items.push(`Target Marker Size: ${marker.Size}px`);
+    }
+    if (bullet.Orientation === 'Vertical') {
+        items.push('Orientation: Vertical');
+    }
+    if (bullet.BarColor) {
+        items.push(`Bar Colour: ${bullet.BarColor}`);
+    }
+    if (bullet.BarHeight != null) {
+        items.push(`${bullet.Orientation === 'Vertical' ? 'Bar Width' : 'Bar Height'}: ${bullet.BarHeight}px`);
+    }
+    items.push(`Origin: ${formatBulletOriginLabel(bullet.Origin)}`);
+    if (bullet.BackColor) {
+        items.push(`Back Colour: ${bullet.BackColor}`);
+    }
+    if (bullet.CellText?.length) {
+        items.push(`Cell Text: ${formatBulletCellTextSummary(bullet.CellText)}`);
+        items.push(`Cell Text Position: ${bullet.CellTextPosition ?? 'Below'}`);
+    }
+    else if (options.includeEmptyCellText) {
+        items.push('Cell Text: None');
+    }
+    getCellFontStyleSummaryItems(bullet.Font).forEach(({ label, value }) => {
+        items.push(`${label}: ${value}`);
+    });
+    if (bullet.ToolTipText?.length) {
+        items.push(`Tooltip: ${formatBulletToolTipSummary(bullet.ToolTipText)}`);
+    }
+    else if (options.includeEmptyTooltip) {
+        items.push('Tooltip: No Tooltip');
+    }
+    return items;
+};
+export const getStyledColumnBulletStyleViewValues = (data) => {
+    const bullet = data.BulletChartStyle;
+    if (!bullet) {
+        return [];
+    }
+    return buildStyledColumnBulletStyleSummaryStrings(bullet, {
+        includeEmptyCellText: false,
+        includeEmptyTooltip: false,
+    });
+};
 /** Wizard / list-view summary for the Ranges step (qualitative bands). */
 export const renderStyledColumnBulletRangesSummary = (data) => {
     const bullet = data.BulletChartStyle;
     if (!bullet) {
-        return _jsx(Tag, { children: "\u2014" });
+        return _jsx(Tag, { children: "No bands defined" });
     }
-    const bandCount = bullet.CellRanges?.length ?? 0;
-    return (_jsxs(Flex, { flexDirection: "column", className: "twa:gap-2 twa:items-start", children: [_jsx(StyledColumnBulletChartListPreview, { bullet: bullet }), _jsxs(Flex, { alignItems: "center", className: "twa:flex-wrap", children: [_jsxs(Box, { className: "twa:mr-1", children: [bandCount, " ", bandCount === 1 ? 'band' : 'bands'] }), bullet.RangeValueType != null && (_jsxs(Box, { className: "twa:mr-1", children: ["\u00B7 ", _jsx(Tag, { children: bullet.RangeValueType })] }))] })] }));
+    const tagItems = getStyledColumnBulletRangesViewValues(data);
+    return (_jsxs(Flex, { flexDirection: "column", className: "twa:gap-2 twa:items-start", children: [_jsx(Flex, { alignItems: "center", className: "twa:flex-wrap twa:gap-2", children: tagItems.map((item) => (_jsx(Tag, { children: item }, item))) }), _jsx(BulletRangesSummaryPreview, { bulletStyle: bullet })] }));
 };
+export const StyledColumnBulletRangesView = ({ data }) => renderStyledColumnBulletRangesSummary(data);
 /** Wizard / list-view summary for the Style step (target, bar, text, font). */
 export const renderStyledColumnBulletStyleSummary = (data) => {
     const bullet = data.BulletChartStyle;
     if (!bullet) {
         return _jsx(Tag, { children: "No Styling Defined" });
     }
-    const targetSummary = getTargetSummary(bullet.Target);
-    const isVertical = bullet.Orientation === 'Vertical';
-    const fontTags = renderFontStyleSummaryTags(bullet.Font);
-    return (_jsxs(Flex, { flexDirection: "column", className: "twa:gap-2 twa:items-start", children: [_jsx(StyledColumnBulletChartListPreview, { bullet: bullet }), _jsxs(Flex, { alignItems: "center", className: "twa:flex-wrap", children: [targetSummary && (_jsxs(Box, { className: "twa:mr-1", children: ["target: ", _jsx(Tag, { children: targetSummary })] })), isVertical && (_jsx(Box, { className: "twa:mr-1", children: _jsx(Tag, { children: "vertical" }) })), fontTags && (_jsxs(Box, { className: "twa:mr-1", children: ["Font: ", fontTags] }))] })] }));
+    const items = buildStyledColumnBulletStyleSummaryStrings(bullet, {
+        includeEmptyCellText: true,
+        includeEmptyTooltip: true,
+    });
+    if (!items.length) {
+        return _jsx(Tag, { children: "No Style Defined" });
+    }
+    return (_jsx(Flex, { alignItems: "center", className: "twa:flex-wrap twa:gap-2", children: items.map((item) => (_jsx(Tag, { children: item }, item))) }));
 };
 /** Full combined summary (ranges + style); kept for callers that expect one block. */
 export const renderStyledColumnBulletSummary = (data) => {
@@ -64,11 +159,7 @@ export const renderStyledColumnBulletSummary = (data) => {
     if (!bullet) {
         return _jsx(Tag, { children: "No Styling Defined" });
     }
-    const bandCount = bullet.CellRanges?.length ?? 0;
-    const targetSummary = getTargetSummary(bullet.Target);
-    const isVertical = bullet.Orientation === 'Vertical';
-    const fontTags = renderFontStyleSummaryTags(bullet.Font);
-    return (_jsxs(Flex, { flexDirection: "column", className: "twa:gap-2 twa:items-start", children: [_jsx(StyledColumnBulletChartListPreview, { bullet: bullet }), _jsxs(Flex, { alignItems: "center", className: "twa:flex-wrap", children: [_jsxs(Box, { className: "twa:mr-1", children: [bandCount, " ", bandCount === 1 ? 'band' : 'bands'] }), targetSummary && (_jsxs(Box, { className: "twa:mr-1", children: ["\u00B7 target: ", _jsx(Tag, { children: targetSummary })] })), isVertical && (_jsxs(Box, { className: "twa:mr-1", children: ["\u00B7 ", _jsx(Tag, { children: "vertical" })] })), fontTags && (_jsxs(Box, { className: "twa:mr-1", children: ["\u00B7 Font: ", fontTags] }))] })] }));
+    return (_jsxs(Flex, { flexDirection: "column", className: "twa:gap-3 twa:items-start", children: [renderStyledColumnBulletRangesSummary(data), renderStyledColumnBulletStyleSummary(data)] }));
 };
 /**
  * Maps the structured `BulletChartStyle.Target` field to one of the simple
@@ -108,20 +199,25 @@ const MARKER_SHAPES = [
 export const StyledColumnWizardBulletSection = (props) => {
     const variant = props.variant ?? 'style';
     const { data, api } = useOnePageAdaptableWizardContext();
-    const minMaxRangeValues = React.useMemo(() => {
+    const column = React.useMemo(() => {
         const columnId = data.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 bullet = data.BulletChartStyle ?? {};
-    const disabled = !data.ColumnId;
+    const disabled = !data.ColumnId || !column;
     // -------------------------------------------------------------------------
     // Updaters
     // -------------------------------------------------------------------------
@@ -231,8 +327,10 @@ export const StyledColumnWizardBulletSection = (props) => {
     // -------------------------------------------------------------------------
     // Render
     // -------------------------------------------------------------------------
-    if (!data.ColumnId) {
-        return (_jsx(Box, { children: _jsx(ErrorBox, { className: "twa:mt-2", children: "You need to select a column before styling." }) }));
+    if (!data.ColumnId || !column) {
+        return (_jsx(Box, { children: _jsx(ErrorBox, { className: "twa:mt-2", children: !data.ColumnId
+                    ? 'You need to select a column before styling.'
+                    : `Column "${data.ColumnId}" was not found in the grid.` }) }));
     }
     // ----- Ranges-only variant (wizard step before Style) ---------------------
     if (variant === 'ranges') {
@@ -297,5 +395,5 @@ export const StyledColumnWizardBulletSection = (props) => {
                                             delete cleaned.Font;
                                             props.onChange({ ...data, BulletChartStyle: cleaned });
                                         }
-                                    } }) })] })] }), _jsxs(Card, { shadow: false, className: "twa:mb-3", children: [_jsxs(Card.Title, { children: [_jsx(Box, { className: "twa:font-medium", children: "Tooltip" }), _jsx(Box, { className: "twa:text-xs twa:opacity-70 twa:font-normal twa:max-w-[520px]", children: "Choose whether to display a tooltip" })] }), _jsx(Card.Body, { children: _jsx(FormLayout, { sizes: [...BULLET_STYLE_FORM_SIZES], children: _jsxs(FormRow, { label: "Tooltip Display:", children: [_jsx(CheckBox, { disabled: disabled, checked: bullet.ToolTipText?.includes('CellValue'), onChange: (checked) => toggleToolTipText('CellValue', checked), children: "Cell Value" }), ' ', _jsx(CheckBox, { disabled: disabled, className: "twa:ml-3", checked: bullet.ToolTipText?.includes('PercentageValue'), onChange: (checked) => toggleToolTipText('PercentageValue', checked), children: "Percent Value" })] }) }) })] })] }));
+                                    } }) })] })] }), _jsxs(Card, { shadow: false, className: "twa:mb-3", children: [_jsxs(Card.Title, { children: [_jsx(Box, { className: "twa:font-medium", children: "Tooltip" }), _jsx(Box, { className: "twa:text-xs twa:opacity-70 twa:font-normal twa:max-w-[520px]", children: "Choose whether to display a tooltip" })] }), _jsx(Card.Body, { children: _jsx(FormLayout, { sizes: [...BULLET_STYLE_FORM_SIZES], children: _jsxs(FormRow, { label: "Tooltip Display:", children: [_jsx(CheckBox, { disabled: disabled, checked: bullet.ToolTipText?.includes('CellValue'), onChange: (checked) => toggleToolTipText('CellValue', checked), children: "Cell Value" }), ' ', _jsx(CheckBox, { disabled: disabled, className: "twa:ml-3", checked: bullet.ToolTipText?.includes('PercentageValue'), onChange: (checked) => toggleToolTipText('PercentageValue', checked), children: "Percent Value" })] }) }) })] }), _jsx(StyledColumnBulletPreviewCard, { data: data })] }));
 };

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

@@ -3,6 +3,7 @@ import { StyledColumn } from '../../../AdaptableState/StyledColumnState';
 export interface StyledColumnWizardGradientSectionProps {
     onChange: (styledColumn: StyledColumn) => void;
 }
+export declare const getStyledColumnGradientStyleViewValues: (data: StyledColumn) => string[];
 /**
  * Summary of Gradient-only style options (alpha bounds, auto-contrast, tooltip).
  */

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

@@ -8,15 +8,40 @@ import { useOnePageAdaptableWizardContext } from '../../Wizard/OnePageAdaptableW
 import { Box, Flex } from '../../../components/Flex';
 import { NumberInput } from '../../../components/Input/NumberInput';
 import { DEFAULT_GRADIENT_MAX_ALPHA, DEFAULT_GRADIENT_MIN_ALPHA, } from '../../../Utilities/Helpers/StyledColumnGradientHelper';
-import { renderFontStyleSummaryTags, StyledColumnFontStyleEditor, } from './StyledColumnSliceStyleEditors';
+import { getCellFontStyleSummaryItems, StyledColumnFontStyleEditor, } from './StyledColumnSliceStyleEditors';
 import { Card } from '../../../components/Card';
+import { StyledColumnGradientPreviewCard } from './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 ?? DEFAULT_GRADIENT_MIN_ALPHA;
+    const maxA = gs.MaxAlpha ?? 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');
+    }
+    getCellFontStyleSummaryItems(gs.Font).forEach(({ label, value }) => {
+        items.push(`${label}: ${value}`);
+    });
+    return items;
+};
+export const getStyledColumnGradientStyleViewValues = (data) => {
+    const gs = data.GradientStyle;
+    if (!gs) {
+        return [];
+    }
+    return buildStyledColumnGradientStyleSummaryStrings(gs, { includeEmptyTooltip: false });
+};
 /**
  * Summary of Gradient-only style options (alpha bounds, auto-contrast, tooltip).
  */
@@ -25,10 +50,8 @@ export const renderStyledColumnGradientStyleSummary = (data) => {
     if (!gs) {
         return _jsx(Tag, { children: "No Styling Defined" });
     }
-    const minA = gs.MinAlpha ?? DEFAULT_GRADIENT_MIN_ALPHA;
-    const maxA = gs.MaxAlpha ?? DEFAULT_GRADIENT_MAX_ALPHA;
-    const fontTags = renderFontStyleSummaryTags(gs.Font);
-    return (_jsxs(Flex, { alignItems: "center", className: "twa:flex-wrap twa:gap-2", children: [_jsxs(Box, { children: ["Alpha: ", _jsx(Tag, { children: minA }), " \u2192 ", _jsx(Tag, { children: maxA })] }), gs.AutoContrastText && (_jsxs(Box, { children: ["Text: ", _jsx(Tag, { children: "Auto contrast" })] })), _jsxs(Box, { children: ["Tooltip: ", _jsx(Tag, { children: formatToolTipText(gs.ToolTipText) })] }), fontTags && _jsxs(Box, { children: ["Font: ", fontTags] })] }));
+    const items = buildStyledColumnGradientStyleSummaryStrings(gs, { includeEmptyTooltip: true });
+    return (_jsx(Flex, { alignItems: "center", className: "twa:flex-wrap twa:gap-2", children: items.map((item) => (_jsx(Tag, { children: item }, item))) }));
 };
 export const StyledColumnWizardGradientSection = (props) => {
     const { data, api } = useOnePageAdaptableWizardContext();
@@ -86,5 +109,5 @@ export const StyledColumnWizardGradientSection = (props) => {
                                 else {
                                     patchGradient({ AutoContrastText: true });
                                 }
-                            }, children: "Make text readable on tinted backgrounds" }) })] }), _jsxs(Card, { shadow: false, className: "twa:mb-3", children: [_jsxs(Card.Title, { children: [_jsx(Box, { className: "twa:font-medium", children: "Tooltip" }), _jsx(Box, { className: "twa:text-xs twa:opacity-70 twa:font-normal twa:max-w-[600px]", children: "Set Tooltip properties" })] }), _jsx(Card.Body, { children: _jsx(FormLayout, { sizes: [...STYLE_FORM_SIZES], children: _jsx(FormRow, { label: "Tooltip:", children: _jsxs(Box, { className: "twa:ml-2", children: [_jsx(CheckBox, { disabled: disabled, checked: gs.ToolTipText?.includes('CellValue'), onChange: (checked) => onToolTipTextChanged('CellValue', checked), children: "Cell Value" }), ' ', _jsx(CheckBox, { disabled: disabled, className: "twa:ml-3", checked: gs.ToolTipText?.includes('PercentageValue'), onChange: (checked) => onToolTipTextChanged('PercentageValue', checked), children: "Percent along scale" })] }) }) }) })] }), _jsxs(Card, { shadow: false, children: [_jsxs(Card.Title, { children: [_jsx(Box, { className: "twa:font-medium", children: "Font" }), _jsx(Box, { className: "twa:text-xs twa:opacity-70 twa:font-normal twa:max-w-[480px]", children: "Optional font properties (takes precedence over Format Column)" })] }), _jsx(Card.Body, { children: _jsx(StyledColumnFontStyleEditor, { api: api, disabled: disabled, value: gs.Font, onChange: onFontChange }) })] }), !data.ColumnId && (_jsx(ErrorBox, { className: "twa:mt-2", children: "Select a column before changing Gradient style." }))] }));
+                            }, children: "Make text readable on tinted backgrounds" }) })] }), _jsxs(Card, { shadow: false, className: "twa:mb-3", children: [_jsxs(Card.Title, { children: [_jsx(Box, { className: "twa:font-medium", children: "Tooltip" }), _jsx(Box, { className: "twa:text-xs twa:opacity-70 twa:font-normal twa:max-w-[600px]", children: "Set Tooltip properties" })] }), _jsx(Card.Body, { children: _jsx(FormLayout, { sizes: [...STYLE_FORM_SIZES], children: _jsx(FormRow, { label: "Tooltip:", children: _jsxs(Box, { className: "twa:ml-2", children: [_jsx(CheckBox, { disabled: disabled, checked: gs.ToolTipText?.includes('CellValue'), onChange: (checked) => onToolTipTextChanged('CellValue', checked), children: "Cell Value" }), ' ', _jsx(CheckBox, { disabled: disabled, className: "twa:ml-3", checked: gs.ToolTipText?.includes('PercentageValue'), onChange: (checked) => onToolTipTextChanged('PercentageValue', checked), children: "Percent along scale" })] }) }) }) })] }), _jsxs(Card, { shadow: false, children: [_jsxs(Card.Title, { children: [_jsx(Box, { className: "twa:font-medium", children: "Font" }), _jsx(Box, { className: "twa:text-xs twa:opacity-70 twa:font-normal twa:max-w-[480px]", children: "Optional font properties (takes precedence over Format Column)" })] }), _jsx(Card.Body, { children: _jsx(StyledColumnFontStyleEditor, { api: api, disabled: disabled, value: gs.Font, onChange: onFontChange }) })] }), _jsx(StyledColumnGradientPreviewCard, { data: data }), !data.ColumnId && (_jsx(ErrorBox, { className: "twa:mt-2", children: "Select a column before changing Gradient style." }))] }));
 };

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

@@ -12,9 +12,10 @@ import { useOnePageAdaptableWizardContext } from '../../Wizard/OnePageAdaptableW
 import { AdaptableIconSelector } from '../../Components/AdaptableIconSelector';
 import { AdaptableIconComponent } from '../../Components/AdaptableIconComponent';
 import { ICON_STYLE_PRESET_DESCRIPTIONS, ICON_STYLE_PRESET_LABELS, getIconStylePresetMappings, } from '../../../Utilities/Helpers/IconStylePresets';
-import { resolveEffectiveIconStyleMappings } from '../../../agGrid/cellRenderers/IconRenderer';
+import { resolveEffectiveIconStyleMappings, resolveIconStyleMappingsForSummaryPreview } from '../../../agGrid/cellRenderers/IconRenderer';
 import { Card } from '../../../components/Card';
-import { StyledColumnCellStyleEditor, StyledColumnFontStyleEditor, } from './StyledColumnSliceStyleEditors';
+import { getCellBoxStyleSummaryItems, getCellFontStyleSummaryItems, StyledColumnCellStyleEditor, StyledColumnFontStyleEditor, } from './StyledColumnSliceStyleEditors';
+import { StyledColumnIconPreviewCard } from './StyledColumnWizardStyleSection/Components/StyledColumnIconPreview';
 const STYLE_FORM_SIZES = ['200px', '1fr'];
 const detectIconKind = (spec) => {
     if (typeof spec === 'string')
@@ -37,37 +38,110 @@ 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 (_jsxs(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: [_jsx(Box, { children: previewIcon(mapping.Icon) }), _jsx(Box, { className: "twa:text-xs twa:opacity-90", children: String(mapping.Key) })] }, index));
+    return (_jsxs(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: [_jsx(Box, { children: previewIcon(mapping.Icon) }), _jsx(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 _jsx(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 (_jsxs(Flex, { alignItems: "center", className: "twa:gap-1 twa:flex-wrap", children: [previewItems, remaining > 0 && _jsxs(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(' + ') ?? '';
+export const getStyledColumnIconMappingsViewValues = (data) => {
+    const ic = data.IconStyle;
+    if (!ic) {
+        return [];
+    }
+    const effectiveMappings = resolveEffectiveIconStyleMappings(ic);
+    const items = [`Mappings: ${effectiveMappings.length}`];
+    if (ic.Preset) {
+        items.push(`Preset: ${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;
+};
+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');
+    }
+    getCellFontStyleSummaryItems(ic.Font).forEach(({ label, value }) => {
+        items.push(`${label}: ${value}`);
+    });
+    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;
+};
+export const getStyledColumnIconStyleViewValues = (data) => {
+    const ic = data.IconStyle;
+    if (!ic) {
+        return [];
+    }
+    return buildStyledColumnIconStyleSummaryStrings(ic, {
+        includeEmptyCellText: false,
+        includeEmptyTooltip: false,
+    });
+};
 /** Mappings step summary. */
 export const renderStyledColumnIconMappingsSummary = (data) => {
     const ic = data.IconStyle;
     if (!ic) {
         return _jsx(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 = resolveEffectiveIconStyleMappings(ic);
-    const customCount = ic.Mappings?.length ?? 0;
-    return (_jsxs(Flex, { flexDirection: "column", className: "twa:gap-2 twa:items-start", children: [_jsxs(Flex, { alignItems: "center", className: "twa:flex-wrap", children: [_jsxs(Box, { className: "twa:mr-1", children: [effectiveMappings.length, " ", effectiveMappings.length === 1 ? 'mapping' : 'mappings'] }), ic.Preset && (_jsxs(Box, { className: "twa:mr-1", children: ["\u00B7 Preset: ", _jsx(Tag, { children: ICON_STYLE_PRESET_LABELS[ic.Preset] })] })), customCount > 0 && (_jsxs(Box, { className: "twa:mr-1", children: ["\u00B7 Custom: ", _jsx(Tag, { children: customCount })] })), ic.MatchMode && ic.MatchMode !== 'Exact' && (_jsxs(Box, { className: "twa:mr-1", children: ["\u00B7 Match: ", _jsx(Tag, { children: ic.MatchMode })] })), ic.Fallback && ic.Fallback !== 'Hide' && (_jsxs(Box, { className: "twa:mr-1", children: ["\u00B7 Fallback: ", _jsx(Tag, { children: ic.Fallback })] }))] }), renderMappingsPreview(effectiveMappings)] }));
+    const tagItems = getStyledColumnIconMappingsViewValues(data);
+    const previewMappings = resolveIconStyleMappingsForSummaryPreview(ic);
+    return (_jsxs(Flex, { flexDirection: "column", className: "twa:gap-2 twa:items-start", children: [_jsx(Flex, { alignItems: "center", className: "twa:flex-wrap twa:gap-2", children: tagItems.map((item) => (_jsx(Tag, { children: item }, item))) }), renderMappingsPreview(previewMappings)] }));
 };
+export const StyledColumnIconMappingsView = ({ data }) => renderStyledColumnIconMappingsSummary(data);
 /** Style step summary (size, text, tooltip, font / cell). */
 export const renderStyledColumnIconStyleSummary = (data) => {
     const ic = data.IconStyle;
     if (!ic) {
         return _jsx(Tag, { children: "No Icon Style defined" });
     }
-    const cellText = ic.CellText ?? [];
-    return (_jsxs(Flex, { alignItems: "center", className: "twa:flex-wrap", children: [_jsxs(Box, { className: "twa:mr-1", children: ["Size: ", _jsxs(Tag, { children: [ic.Size ?? 18, "px"] })] }), cellText.length > 0 && (_jsxs(Box, { className: "twa:mr-1", children: ["\u00B7 Text: ", _jsx(Tag, { children: cellText.join(', ') })] })), cellText.length > 0 && (_jsxs(Box, { className: "twa:mr-1", children: ["\u00B7 Position: ", _jsx(Tag, { children: ic.CellTextPosition ?? 'After' })] })), ic.ToolTipText?.length > 0 && (_jsxs(Box, { className: "twa:mr-1", children: ["\u00B7 Tooltip: ", _jsx(Tag, { children: ic.ToolTipText.join(', ') })] }))] }));
+    const items = buildStyledColumnIconStyleSummaryStrings(ic, {
+        includeEmptyCellText: true,
+        includeEmptyTooltip: true,
+    });
+    if (!items.length) {
+        return _jsx(Tag, { children: "No Style Defined" });
+    }
+    return (_jsx(Flex, { alignItems: "center", className: "twa:flex-wrap twa:gap-2", children: items.map((item) => (_jsx(Tag, { children: item }, item))) }));
 };
 /**
  * Combined summary for the Styled Columns list row (preview + key facts).
@@ -240,7 +314,7 @@ export const StyledColumnWizardIconSection = (props) => {
                                                     { value: 'After', label: 'After' },
                                                     { value: 'Above', label: 'Above' },
                                                     { value: 'Below', label: 'Below' },
-                                                ] }) }) })] }), _jsx(Box, { className: `twa:mt-3 twa:pt-3 twa:border-t twa:border-foreground/15 ${cellTextDisabled ? 'twa:opacity-50' : ''}`, children: _jsx(StyledColumnFontStyleEditor, { api: api, disabled: disabled || cellTextDisabled, value: iconStyle.Font, onChange: onFontChange }) })] })] }), _jsxs(Card, { shadow: false, className: "twa:mb-3", children: [_jsxs(Card.Title, { children: [_jsx(Box, { className: "twa:font-medium", children: "Tooltip" }), _jsx(Box, { className: "twa:text-xs twa:opacity-70 twa:font-normal twa:max-w-[520px]", children: "Choose whether and how to display a tooltip" })] }), _jsx(Card.Body, { children: _jsx(FormLayout, { sizes: [...STYLE_FORM_SIZES], children: _jsxs(FormRow, { label: "Tooltip Display:", children: [_jsx(CheckBox, { checked: toolTipText.includes('CellValue'), onChange: (checked) => toggleToolTipText('CellValue', checked), children: "Cell Value" }), ' ', _jsx(CheckBox, { className: "twa:ml-3", checked: toolTipText.includes('IconDescription'), onChange: (checked) => toggleToolTipText('IconDescription', checked), children: "Description" })] }) }) })] }), _jsxs(Card, { shadow: false, children: [_jsxs(Card.Title, { children: [_jsx(Box, { className: "twa:font-medium", children: "Cell" }), _jsx(Box, { className: "twa:text-xs twa:opacity-70 twa:font-normal twa:max-w-[520px]", children: "Optional cell box styling (overrides Format Column properties)" })] }), _jsx(Card.Body, { children: _jsx(StyledColumnCellStyleEditor, { api: api, disabled: disabled, value: iconStyle.Cell, onChange: onCellChange }) })] })] }));
+                                                ] }) }) })] }), _jsx(Box, { className: `twa:mt-3 twa:pt-3 twa:border-t twa:border-foreground/15 ${cellTextDisabled ? 'twa:opacity-50' : ''}`, children: _jsx(StyledColumnFontStyleEditor, { api: api, disabled: disabled || cellTextDisabled, value: iconStyle.Font, onChange: onFontChange }) })] })] }), _jsxs(Card, { shadow: false, className: "twa:mb-3", children: [_jsxs(Card.Title, { children: [_jsx(Box, { className: "twa:font-medium", children: "Tooltip" }), _jsx(Box, { className: "twa:text-xs twa:opacity-70 twa:font-normal twa:max-w-[520px]", children: "Choose whether and how to display a tooltip" })] }), _jsx(Card.Body, { children: _jsx(FormLayout, { sizes: [...STYLE_FORM_SIZES], children: _jsxs(FormRow, { label: "Tooltip Display:", children: [_jsx(CheckBox, { checked: toolTipText.includes('CellValue'), onChange: (checked) => toggleToolTipText('CellValue', checked), children: "Cell Value" }), ' ', _jsx(CheckBox, { className: "twa:ml-3", checked: toolTipText.includes('IconDescription'), onChange: (checked) => toggleToolTipText('IconDescription', checked), children: "Description" })] }) }) })] }), _jsxs(Card, { shadow: false, children: [_jsxs(Card.Title, { children: [_jsx(Box, { className: "twa:font-medium", children: "Cell" }), _jsx(Box, { className: "twa:text-xs twa:opacity-70 twa:font-normal twa:max-w-[520px]", children: "Optional cell box styling (overrides Format Column properties)" })] }), _jsx(Card.Body, { children: _jsx(StyledColumnCellStyleEditor, { api: api, disabled: disabled, value: iconStyle.Cell, onChange: onCellChange }) })] }), _jsx(StyledColumnIconPreviewCard, { data: data })] }));
 };
 const IconSpecEditorFields = (props) => {
     const kind = detectIconKind(props.value);

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;
 /**