@adaptabletools/adaptable 22.1.1 → 23.0.0-canary.0

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

@@ -0,0 +1,238 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as React from 'react';
+import { Tag } from '../../../components/Tag';
+import { NewColumnSelector } from '../../Components/ColumnSelector';
+import { useOnePageAdaptableWizardContext } from '../../Wizard/OnePageAdaptableWizard';
+import { Box, Flex } from '../../../components/Flex';
+import { AdaptableFormControlTextClear } from '../../Components/Forms/AdaptableFormControlTextClear';
+import FormLayout, { FormRow } from '../../../components/FormLayout';
+import { CheckBox } from '../../../components/CheckBox';
+import { getStyledColumnRowKindDisabledReason, isStyledColumnRowKindSupported, sanitizeStyledColumnRowScope, STYLED_COLUMN_ROW_KIND_EXCLUDE_KEY, STYLED_COLUMN_ROW_KINDS, } from '../../../Utilities/Helpers/styledColumnRowKindSupport';
+import { isUnsupportedColumnDataTypeForIconStyle } from '../../../Utilities/Helpers/iconStyledColumnColumnSupport';
+// ---------------------------------------------------------------------------
+// Row-kind helpers
+// ---------------------------------------------------------------------------
+/**
+ * Per-type *effective* default for "render on this row kind?" — used by
+ * the wizard checkboxes when `StyledColumn.RowScope` is unset, and by
+ * the styled column list / summary view.
+ *
+ * Keep this in lockstep with `shouldRenderStyledColumnOnRow`:
+ *  - Badge defaults to rendering everywhere (subject to type capabilities).
+ *  - Every other type defaults to leaf rows only (matching the long-
+ *    standing renderer behaviour), intersected with type capabilities
+ *    (e.g. Sparkline → data rows only).
+ */
+const ROW_KIND_LABELS = {
+    Data: 'Data (leaf) rows',
+    Group: 'Group rows',
+    Summary: 'Summary rows',
+    Total: 'Total rows',
+};
+const defaultRowKindIncluded = (styledColumn, kind) => {
+    if (styledColumn.BadgeStyle) {
+        return true;
+    }
+    if (!isStyledColumnRowKindSupported(styledColumn, kind)) {
+        return false;
+    }
+    // Non-Badge default: leaf rows only.
+    return kind !== 'Group';
+};
+/**
+ * Resolve "is this row kind included?" using:
+ *  - Type capabilities (unsupported kinds are never included).
+ *  - Explicit `RowScope[Exclude*]` flag when set.
+ *  - Per-type default otherwise.
+ */
+const isRowKindIncluded = (styledColumn, kind) => {
+    if (!isStyledColumnRowKindSupported(styledColumn, kind)) {
+        return false;
+    }
+    const scope = styledColumn.RowScope;
+    if (scope) {
+        // Missing flags default to "include" — same semantics as FormatColumn.
+        return !scope[STYLED_COLUMN_ROW_KIND_EXCLUDE_KEY[kind]];
+    }
+    return defaultRowKindIncluded(styledColumn, kind);
+};
+const collectIncludedRowKinds = (styledColumn) => {
+    return STYLED_COLUMN_ROW_KINDS.filter((k) => isRowKindIncluded(styledColumn, k));
+};
+// ---------------------------------------------------------------------------
+// Summary
+// ---------------------------------------------------------------------------
+export const renderStyledColumnScopeSummary = (data) => {
+    const { api } = useOnePageAdaptableWizardContext();
+    const includedKinds = collectIncludedRowKinds(data);
+    const allKinds = includedKinds.length === 4;
+    return (_jsxs(Box, { className: "twa:pr-2 twa:py-2", children: [_jsxs(Box, { className: "twa:mt-1", children: ["Column:", ' ', _jsx(Tag, { children: data.ColumnId
+                            ? api.columnApi.getFriendlyNameForColumnId(data.ColumnId)
+                            : 'No Column Selected' })] }), _jsxs(Box, { className: "twa:mt-2", children: ["Rows:", ' ', allKinds ? (_jsx(Tag, { children: "All" })) : includedKinds.length === 0 ? (_jsx(Tag, { children: "None" })) : (includedKinds.map((k) => (_jsx(Tag, { className: "twa:mr-1", children: k }, k))))] })] }));
+};
+/** Used by the styled column list view (one-line "Rows: Data, Group, …"). */
+export const collectIncludedRowKindLabels = (styledColumn) => collectIncludedRowKinds(styledColumn);
+// ---------------------------------------------------------------------------
+// Validity
+// ---------------------------------------------------------------------------
+export const isValidStyledColumnScope = (data, api) => {
+    if (!data.ColumnId) {
+        return 'Please select a column for the Styled Column.';
+    }
+    if (data.IconStyle &&
+        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) {
+        return 'Pick at least one row kind to render the style on.';
+    }
+    return true;
+};
+export const StyledColumnWizardScopeSection = (props) => {
+    const { data, api } = useOnePageAdaptableWizardContext();
+    // Strip impossible `RowScope` flags when the styled column type cannot
+    // ever target a row kind (e.g. Sparkline → data rows only).
+    React.useEffect(() => {
+        const next = sanitizeStyledColumnRowScope(data);
+        if (!next) {
+            return;
+        }
+        props.onChange({
+            ...data,
+            RowScope: next,
+        });
+    }, [
+        data.Uuid,
+        data.SparklineStyle,
+        data.GradientStyle,
+        data.PercentBarStyle,
+        data.BulletChartStyle,
+        data.RangeBarStyle,
+        data.RatingStyle,
+        data.BadgeStyle,
+        data.IconStyle,
+        data.RowScope?.ExcludeDataRows,
+        data.RowScope?.ExcludeGroupRows,
+        data.RowScope?.ExcludeSummaryRows,
+        data.RowScope?.ExcludeTotalRows,
+    ]);
+    // Icon Style must not retain an array-typed ColumnId when the user swaps
+    // type (or loads invalid state): clear so the picker and validation align.
+    React.useEffect(() => {
+        if (!data.IconStyle || !data.ColumnId) {
+            return;
+        }
+        const dt = api.columnApi.getColumnDataTypeForColumnId(data.ColumnId);
+        if (isUnsupportedColumnDataTypeForIconStyle(dt)) {
+            props.onChange({
+                ...data,
+                ColumnId: undefined,
+            });
+        }
+    }, [data.Uuid, data.IconStyle, data.ColumnId]);
+    // -------------------------------------------------------------------------
+    // Column picker
+    // -------------------------------------------------------------------------
+    const sortableCols = React.useMemo(() => {
+        let sortableColumns = [];
+        if (data.SparklineStyle) {
+            sortableColumns = api.columnApi.getNumericArrayColumns();
+        }
+        else if (data.IconStyle) {
+            sortableColumns = [
+                ...api.columnApi.getNumericColumns(),
+                ...api.columnApi.getTextColumns(),
+            ];
+        }
+        else if (data.BadgeStyle) {
+            sortableColumns = [
+                ...api.columnApi.getNumericColumns(),
+                ...api.columnApi.getTextColumns(),
+                ...api.columnApi.getTextArrayColumns(),
+                ...api.columnApi.getNumberArrayColumns(),
+            ];
+        }
+        else {
+            // Gradient / PercentBar / BulletChart / Rating / RangeBar - numeric only.
+            sortableColumns = api.columnApi.getNumericColumns();
+        }
+        const styledColumns = api.styledColumnApi.getStyledColumns();
+        const usedColumnIds = styledColumns
+            .map((styledColumn) => {
+            if (styledColumn.Uuid === data.Uuid) {
+                return null;
+            }
+            return styledColumn.ColumnId;
+        })
+            .filter(Boolean);
+        return sortableColumns.filter((column) => usedColumnIds.every((usedColumnId) => column.columnId !== usedColumnId));
+    }, [data]);
+    const handleColumnsChange = (columnIds) => {
+        const columnId = columnIds[0];
+        const emptyRanges = api.columnScopeApi.createCellColorRangesForScope({
+            ColumnIds: [columnId],
+        });
+        const newStyledColumn = {
+            ...data,
+            ColumnId: columnId,
+        };
+        if (newStyledColumn.PercentBarStyle) {
+            newStyledColumn.PercentBarStyle = {
+                ...newStyledColumn.PercentBarStyle,
+                CellRanges: emptyRanges,
+            };
+        }
+        if (newStyledColumn.GradientStyle) {
+            newStyledColumn.GradientStyle = {
+                ...newStyledColumn.GradientStyle,
+                CellRanges: emptyRanges,
+            };
+        }
+        if (newStyledColumn.BulletChartStyle) {
+            newStyledColumn.BulletChartStyle = {
+                ...newStyledColumn.BulletChartStyle,
+                CellRanges: emptyRanges,
+            };
+        }
+        props.onChange(newStyledColumn);
+    };
+    const [columnsSearchText, setColumnsSearchText] = React.useState('');
+    // -------------------------------------------------------------------------
+    // Row-kind toggles
+    // -------------------------------------------------------------------------
+    const handleRowKindChange = (kind, include) => {
+        if (!isStyledColumnRowKindSupported(data, kind)) {
+            return;
+        }
+        // Materialise an explicit RowScope as soon as the user touches a
+        // checkbox. We start from the per-type default so any kinds the user
+        // didn't touch carry over their historical value (e.g. group rows
+        // stay excluded for a Gradient column even after the user toggles
+        // summary rows).
+        const baseScope = data.RowScope ?? {
+            ExcludeDataRows: !defaultRowKindIncluded(data, 'Data'),
+            ExcludeGroupRows: !defaultRowKindIncluded(data, 'Group'),
+            ExcludeSummaryRows: !defaultRowKindIncluded(data, 'Summary'),
+            ExcludeTotalRows: !defaultRowKindIncluded(data, 'Total'),
+        };
+        const nextScope = {
+            ...baseScope,
+            [STYLED_COLUMN_ROW_KIND_EXCLUDE_KEY[kind]]: !include,
+        };
+        props.onChange({
+            ...data,
+            RowScope: nextScope,
+        });
+    };
+    // -------------------------------------------------------------------------
+    // Render
+    // -------------------------------------------------------------------------
+    return (_jsxs(Flex, { flexDirection: "column", style: { height: '100%' }, children: [_jsxs(Flex, { flexDirection: "column", className: "twa:flex-1 twa:min-h-0", children: [_jsxs(Flex, { flexDirection: "row", alignItems: "center", className: "twa:p-2 twa:gap-3 twa:border-b twa:border-b-text-on-defaultbackground/20", children: [_jsx(Box, { className: "twa:text-5 twa:font-medium", children: "Column" }), _jsx(Box, { className: "twa:text-xs twa:opacity-70", children: "The Column the Style is applied to" }), _jsx(Box, { className: "twa:flex-1" }), _jsx(AdaptableFormControlTextClear, { value: columnsSearchText, OnTextChange: setColumnsSearchText, placeholder: "Type to search columns", style: { flex: 1, maxWidth: 320 } })] }), _jsx(Box, { className: "twa:flex-1 twa:min-h-0 twa:overflow-auto", children: _jsx(NewColumnSelector, { columnFilterText: columnsSearchText, availableColumns: sortableCols, selected: data.ColumnId ? [data.ColumnId] : [], singleSelect: true, onChange: handleColumnsChange, allowReorder: false }) })] }), _jsxs(Box, { className: "twa:border-t twa:border-border twa:px-2 twa:py-3 twa:shrink-0", children: [_jsxs(Flex, { alignItems: "center", className: "twa:gap-3 twa:pb-2 twa:mb-3 twa:flex-wrap twa:border-b twa:border-b-text-on-defaultbackground/20", children: [_jsx(Box, { className: "twa:text-5 twa:font-medium", children: "Rows" }), _jsx(Box, { className: "twa:text-xs twa:opacity-70 twa:max-w-[520px]", children: "Which kinds of Rows should the Styled Column render on" })] }), _jsx(Flex, { flexDirection: "row", className: "twa:gap-6 twa:flex-wrap", children: [
+                            STYLED_COLUMN_ROW_KINDS.slice(0, 2),
+                            STYLED_COLUMN_ROW_KINDS.slice(2),
+                        ].map((rowKindGroup, groupIndex) => (_jsx(Box, { className: "twa:flex-1 twa:min-w-[220px]", children: _jsx(FormLayout, { sizes: ['180px', '1fr'], children: rowKindGroup.map((kind) => {
+                                    const supported = isStyledColumnRowKindSupported(data, kind);
+                                    const disabledReason = getStyledColumnRowKindDisabledReason(data, kind);
+                                    return (_jsx(FormRow, { label: `${ROW_KIND_LABELS[kind]}:`, children: _jsx(Flex, { alignItems: "center", className: "twa:ml-2", children: _jsx(CheckBox, { "data-name": `include-${kind.toLowerCase()}-rows-checkbox`, className: "twa:mr-2", disabled: !supported, title: disabledReason, checked: isRowKindIncluded(data, kind), onChange: (checked) => handleRowKindChange(kind, checked) }) }) }, kind));
+                                }) }) }, groupIndex))) })] })] }));
+};

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

@@ -0,0 +1,22 @@
+import * as React from 'react';
+import { CellColorRange, ColumnComparison, GradientStyle, GradientZeroCentredColors, NumericStyledColumn } from '../../../../../AdaptableState/StyledColumnState';
+import { AdaptableApi } from '../../../../../types';
+export declare function gradientRangeStripCss(color: string, reverseGradient: boolean, minAlpha: number, maxAlpha: number): string;
+export interface GradientRangesSummaryPreviewProps {
+    ranges?: CellColorRange[];
+    zeroCentred?: GradientZeroCentredColors;
+    rangeValueType: NumericStyledColumn['RangeValueType'];
+    gradientStyle?: Pick<GradientStyle, 'MinAlpha' | 'MaxAlpha'>;
+}
+/**
+ * Visual summary of Gradient cell ranges: shows an alpha ramp per range
+ * (instead of a flat colour swatch). Zero-centred and legacy diverging
+ * `Col-Min..0` + `0..Col-Max` pairs render as a single split strip.
+ */
+export declare const GradientRangesSummaryPreview: React.FC<GradientRangesSummaryPreviewProps>;
+export interface GradientColumnComparisonSummaryPreviewProps {
+    columnComparison: ColumnComparison;
+    gradientStyle?: Pick<GradientStyle, 'MinAlpha' | 'MaxAlpha'>;
+    api: AdaptableApi;
+}
+export declare const GradientColumnComparisonSummaryPreview: React.FC<GradientColumnComparisonSummaryPreviewProps>;

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

@@ -0,0 +1,71 @@
+import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
+import tinycolor from 'tinycolor2';
+import { Box, Flex } from '../../../../../components/Flex';
+import { getVariableColor } from '../../../../../Utilities/Helpers/StyleHelper';
+import { DEFAULT_GRADIENT_MAX_ALPHA, DEFAULT_GRADIENT_MIN_ALPHA, } from '../../../../../Utilities/Helpers/StyledColumnGradientHelper';
+function clamp01(n) {
+    if (Number.isNaN(n)) {
+        return 0;
+    }
+    return Math.min(1, Math.max(0, n));
+}
+export function gradientRangeStripCss(color, reverseGradient, minAlpha, maxAlpha) {
+    const prepared = getVariableColor(color);
+    const lo = Math.min(clamp01(minAlpha), clamp01(maxAlpha));
+    const hi = Math.max(clamp01(minAlpha), clamp01(maxAlpha));
+    const leftA = reverseGradient ? hi : lo;
+    const rightA = reverseGradient ? lo : hi;
+    const c1 = tinycolor(prepared).setAlpha(leftA).toRgbString();
+    const c2 = tinycolor(prepared).setAlpha(rightA).toRgbString();
+    return `linear-gradient(to right, ${c1}, ${c2})`;
+}
+function isDivergingZeroPair(ranges) {
+    if (!ranges || ranges.length !== 2) {
+        return false;
+    }
+    const [a, b] = ranges;
+    return a.Max === 0 && b.Min === 0;
+}
+const stripClassName = 'twa:h-6 twa:w-[128px] twa:rounded twa:overflow-hidden twa:border twa:border-[color-mix(in_srgb,var(--ab-color-foreground)_15%,transparent)]';
+function zeroCentredSplitPreview(negativeColor, positiveColor, postfix, minA, maxA) {
+    return (_jsxs(Flex, { flexDirection: "column", className: "twa:gap-2", children: [_jsxs(Flex, { alignItems: "center", className: "twa:flex-wrap twa:gap-2", children: [_jsxs(Box, { className: "twa:text-sm", children: ["Col-Min", postfix, " \u2192 0", postfix] }), _jsx(Box, { className: "twa:text-xs twa:opacity-50", children: "|" }), _jsxs(Box, { className: "twa:text-sm", children: ["0", postfix, " \u2192 Col-Max", postfix] })] }), _jsxs(Flex, { className: `${stripClassName} twa:w-[200px]`, children: [_jsx(Box, { className: "twa:flex-1", style: {
+                            background: gradientRangeStripCss(negativeColor, true, minA, maxA),
+                        } }), _jsx(Box, { className: "twa:flex-1", style: {
+                            background: gradientRangeStripCss(positiveColor, false, minA, maxA),
+                        } })] })] }));
+}
+/**
+ * Visual summary of Gradient cell ranges: shows an alpha ramp per range
+ * (instead of a flat colour swatch). Zero-centred and legacy diverging
+ * `Col-Min..0` + `0..Col-Max` pairs render as a single split strip.
+ */
+export const GradientRangesSummaryPreview = (props) => {
+    const minA = props.gradientStyle?.MinAlpha ?? DEFAULT_GRADIENT_MIN_ALPHA;
+    const maxA = props.gradientStyle?.MaxAlpha ?? DEFAULT_GRADIENT_MAX_ALPHA;
+    const postfix = (props.rangeValueType ?? 'Number') === 'Percentage' ? '%' : '';
+    if (props.zeroCentred) {
+        return zeroCentredSplitPreview(props.zeroCentred.NegativeColor, props.zeroCentred.PositiveColor, postfix, minA, maxA);
+    }
+    const ranges = props.ranges ?? [];
+    if (isDivergingZeroPair(ranges)) {
+        const [r0, r1] = ranges;
+        return (_jsxs(Flex, { flexDirection: "column", className: "twa:gap-2", children: [_jsxs(Flex, { alignItems: "center", className: "twa:flex-wrap twa:gap-2", children: [_jsxs(Box, { className: "twa:text-sm", children: [r0.Min, postfix, " \u2192 ", r0.Max, postfix] }), _jsx(Box, { className: "twa:text-xs twa:opacity-50", children: "|" }), _jsxs(Box, { className: "twa:text-sm", children: [r1.Min, postfix, " \u2192 ", r1.Max, postfix] })] }), _jsxs(Flex, { className: `${stripClassName} twa:w-[200px]`, children: [_jsx(Box, { className: "twa:flex-1", style: {
+                                background: gradientRangeStripCss(r0.Color, !!r0.ReverseGradient, minA, maxA),
+                            } }), _jsx(Box, { className: "twa:flex-1", style: {
+                                background: gradientRangeStripCss(r1.Color, !!r1.ReverseGradient, minA, maxA),
+                            } })] })] }));
+    }
+    return (_jsx(Flex, { flexDirection: "column", className: "twa:gap-2", children: ranges.map((r, i) => (_jsxs(Flex, { alignItems: "center", className: "twa:flex-wrap twa:gap-2", children: [_jsxs(Box, { className: "twa:text-sm twa:min-w-[120px]", children: [r.Min, postfix, " to ", r.Max, postfix] }), _jsx(Box, { className: stripClassName, style: {
+                        background: gradientRangeStripCss(r.Color, !!r.ReverseGradient, minA, maxA),
+                    } })] }, i))) }));
+};
+export const GradientColumnComparisonSummaryPreview = (props) => {
+    const minA = props.gradientStyle?.MinAlpha ?? DEFAULT_GRADIENT_MIN_ALPHA;
+    const maxA = props.gradientStyle?.MaxAlpha ?? DEFAULT_GRADIENT_MAX_ALPHA;
+    const fmt = (v) => isNaN(Number(v))
+        ? `[${props.api.columnApi.getFriendlyNameForColumnId(String(v))}]`
+        : v;
+    return (_jsxs(Flex, { flexDirection: "column", className: "twa:gap-2", children: [_jsxs(Box, { className: "twa:text-sm", children: ["Min: ", fmt(props.columnComparison.MinValue), " \u2014 Max:", ' ', fmt(props.columnComparison.MaxValue)] }), _jsx(Box, { className: `${stripClassName} twa:w-[200px]`, style: {
+                    background: gradientRangeStripCss(props.columnComparison.Color, false, minA, maxA),
+                } })] }));
+};

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

@@ -1,21 +1,13 @@
-import * as React from 'react';
+import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
 import { useAdaptable } from '../../../../AdaptableContext';
 import { PercentBarStylePreview } from './PercentBarStylePreview';
 import { Box, Flex } from '../../../../../components/Flex';
 export const PercentBarColumnComparisonPreview = (props) => {
     const { api } = useAdaptable();
     const columnComparison = props.percentBarStyle.ColumnComparison;
-    return (React.createElement(Flex, { alignItems: "center", className: "twa:mr-3" },
-        React.createElement(Box, { className: "twa:basis-[120px] twa:mr-3" },
-            isNaN(Number(columnComparison.MinValue))
-                ? '[' + api.columnApi.getFriendlyNameForColumnId(String(columnComparison.MinValue)) + ']'
-                : columnComparison.MinValue,
-            ' ',
-            "to",
-            ' ',
-            isNaN(Number(columnComparison.MaxValue))
-                ? '[' + api.columnApi.getFriendlyNameForColumnId(String(columnComparison.MaxValue)) + ']'
-                : columnComparison.MaxValue,
-            ' '),
-        React.createElement(PercentBarStylePreview, { backgroundColor: columnComparison.Color, barBackgroundColor: props.percentBarStyle.BackColor, cellText: props.percentBarStyle.CellText, toolTipText: props.percentBarStyle.ToolTipText })));
+    return (_jsxs(Flex, { alignItems: "center", className: "twa:mr-3", children: [_jsxs(Box, { className: "twa:basis-[120px] twa:mr-3", children: [isNaN(Number(columnComparison.MinValue))
+                        ? '[' + api.columnApi.getFriendlyNameForColumnId(String(columnComparison.MinValue)) + ']'
+                        : columnComparison.MinValue, ' ', "to", ' ', isNaN(Number(columnComparison.MaxValue))
+                        ? '[' + api.columnApi.getFriendlyNameForColumnId(String(columnComparison.MaxValue)) + ']'
+                        : columnComparison.MaxValue, ' '] }), _jsx(PercentBarStylePreview, { backgroundColor: columnComparison.Color, barBackgroundColor: props.percentBarStyle.BackColor, cellText: props.percentBarStyle.CellText, toolTipText: props.percentBarStyle.ToolTipText })] }));
 };

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

@@ -1,4 +1,4 @@
-import * as React from 'react';
+import { jsxs as _jsxs, jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
 import { PercentBarStylePreview } from './PercentBarStylePreview';
 import { Flex } from '../../../../../components/Flex';
 export const PercentBarPreview = (props) => {
@@ -6,12 +6,5 @@ export const PercentBarPreview = (props) => {
     if (props.percentBarStyle.RangeValueType === 'Percentage') {
         postfix = '%';
     }
-    return (React.createElement(React.Fragment, null, props.percentBarStyle.CellRanges.map((range, i) => (React.createElement(Flex, { key: i, alignItems: "stretch", className: "twa:mr-3 twa:mb-2" },
-        React.createElement(Flex, { className: "twa:basis-[120px] twa:mr-3", alignItems: "center" },
-            range.Min,
-            postfix,
-            " to ",
-            range.Max,
-            postfix),
-        React.createElement(PercentBarStylePreview, { backgroundColor: props.percentBarStyle.BackColor, barBackgroundColor: range.Color, cellText: props.percentBarStyle.CellText, toolTipText: props.percentBarStyle.ToolTipText }))))));
+    return (_jsx(_Fragment, { children: props.percentBarStyle.CellRanges.map((range, i) => (_jsxs(Flex, { alignItems: "stretch", className: "twa:mr-3 twa:mb-2", children: [_jsxs(Flex, { className: "twa:basis-[120px] twa:mr-3", alignItems: "center", children: [range.Min, postfix, " to ", range.Max, postfix] }), _jsx(PercentBarStylePreview, { backgroundColor: props.percentBarStyle.BackColor, barBackgroundColor: range.Color, cellText: props.percentBarStyle.CellText, toolTipText: props.percentBarStyle.ToolTipText })] }, i))) }));
 };

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

@@ -1,4 +1,4 @@
-import * as React from 'react';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Box, Flex } from '../../../../../components/Flex';
 const getText = (options) => {
     let text = '';
@@ -13,8 +13,5 @@ const getText = (options) => {
 export const PercentBarStylePreview = (props) => {
     const cellText = getText(props.cellText);
     const tooltip = getText(props.toolTipText);
-    return (React.createElement(Box, { title: tooltip, className: "twa:flex-1" },
-        React.createElement(Flex, { style: { backgroundColor: props.backgroundColor }, className: `twa:flex-1 ${cellText ? 'twa:h-[8px]' : 'twa:h-[18px]'}` },
-            React.createElement(Box, { className: "twa:basis-[50%]", style: { background: props.barBackgroundColor } })),
-        cellText && React.createElement(Box, { className: "twa:text-3" }, cellText)));
+    return (_jsxs(Box, { title: tooltip, className: "twa:flex-1", children: [_jsx(Flex, { style: { backgroundColor: props.backgroundColor }, className: `twa:flex-1 ${cellText ? 'twa:h-[8px]' : 'twa:h-[18px]'}`, children: _jsx(Box, { className: "twa:basis-[50%]", style: { background: props.barBackgroundColor } }) }), cellText && _jsx(Box, { className: "twa:text-3", children: cellText })] }));
 };

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

@@ -1,5 +1,10 @@
 import * as React from 'react';
 import { StyledColumn } from '../../../../../types';
+/**
+ * Pixel-parity preview of the badges as they would render in the cell.
+ * Uses the same wrapper/badge classes (and the same `Badge` component) as
+ * `BadgeRenderer` so the wizard summary matches the grid output exactly.
+ */
 export declare const StyledColumnBadgePreview: React.FunctionComponent<React.PropsWithChildren<{
     data: StyledColumn;
 }>>;

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

@@ -1,21 +1,34 @@
-import * as React from 'react';
+import { jsx as _jsx } from "react/jsx-runtime";
 import { DEFAULT_INTEGER_DISPLAY_VALUE, DEFAULT_STRING_DISPLAY_VALUE, } from '../../../../../Utilities/Constants/GeneralConstants';
 import { useAdaptable } from '../../../../AdaptableContext';
 import { Badge } from '../../../../Components/Badge';
-import { Flex, Box } from '../../../../../components/Flex';
+import { Box } from '../../../../../components/Flex';
+const OVERFLOW_CLASS = {
+    Truncate: 'ab-Badge__wrapper--truncate',
+    Wrap: 'ab-Badge__wrapper--wrap',
+    Scroll: 'ab-Badge__wrapper--scroll',
+};
+/**
+ * Pixel-parity preview of the badges as they would render in the cell.
+ * Uses the same wrapper/badge classes (and the same `Badge` component) as
+ * `BadgeRenderer` so the wizard summary matches the grid output exactly.
+ */
 export const StyledColumnBadgePreview = ({ data }) => {
     const adaptable = useAdaptable();
     const badgeStyle = data.BadgeStyle;
-    if (!badgeStyle || badgeStyle.Badges.length === 0) {
-        return React.createElement("div", null, "No Badges Defined");
+    if (!badgeStyle || !badgeStyle.Badges || badgeStyle.Badges.length === 0) {
+        return _jsx("div", { children: "No Badges Defined" });
     }
-    return (React.createElement(Flex, { flexDirection: "column" }, badgeStyle.Badges.map((badge, index) => {
-        const badgeValue = badge.IconOnly
-            ? ''
-            : adaptable.api.columnApi.getColumnDataTypeForColumnId(data.ColumnId) === 'number'
-                ? DEFAULT_INTEGER_DISPLAY_VALUE
-                : DEFAULT_STRING_DISPLAY_VALUE;
-        return (React.createElement(Box, { className: "twa:mb-1", key: index },
-            React.createElement(Badge, { icon: badge.Icon, adaptableStyle: badge.Style, iconPosition: badge.IconPosition }, badgeValue)));
-    })));
+    const overflow = badgeStyle.OverflowMode ?? 'Truncate';
+    const wrapperClassName = `ab-Badge__wrapper ${OVERFLOW_CLASS[overflow]}`;
+    const spacing = typeof badgeStyle.Spacing === 'number' ? badgeStyle.Spacing : null;
+    const dataType = adaptable.api.columnApi.getColumnDataTypeForColumnId(data.ColumnId);
+    return (_jsx(Box, { children: _jsx("div", { className: wrapperClassName, style: spacing != null ? { ['--ab-cmp-badge__spacing']: `${spacing}px` } : undefined, children: badgeStyle.Badges.map((badge, index) => {
+                const badgeValue = badge.IconOnly
+                    ? ''
+                    : dataType === 'number'
+                        ? DEFAULT_INTEGER_DISPLAY_VALUE
+                        : DEFAULT_STRING_DISPLAY_VALUE;
+                return (_jsx(Badge, { icon: badge.Icon, pillStyle: badge.PillStyle, iconPosition: badge.IconPosition, shape: badge.Shape, density: badgeStyle.Density ?? 'Normal', iconGap: badge.IconGap, children: badgeValue }, index));
+            }) }) }));
 };

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

@@ -1,27 +1,28 @@
-import * as React from 'react';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Tag } from '../../../../../components/Tag';
 import { useAdaptable } from '../../../../AdaptableContext';
 import { Box, Flex } from '../../../../../components/Flex';
 export const StyledColumnBadgeSettings = ({ data }) => {
     const adaptable = useAdaptable();
     const badgeStyle = data.BadgeStyle;
-    if (!badgeStyle || badgeStyle.Badges.length === 0) {
-        return React.createElement("div", null, "No Badges Defined");
+    if (!badgeStyle || !badgeStyle.Badges || badgeStyle.Badges.length === 0) {
+        return _jsx("div", { children: "No Badges Defined" });
     }
-    return (React.createElement(Flex, { flexDirection: "column" }, badgeStyle.Badges.map((badge, index) => {
-        let ruleString = 'No Rule';
-        if (badge.Predicate) {
-            ruleString = adaptable.api.predicateApi.predicateToString(badge.Predicate);
-        }
-        if (badge.Expression) {
-            ruleString = badge.Expression.BooleanExpression;
-        }
-        const iconOnly = badge.Icon && badge.IconOnly;
-        const hasIconPosition = badge.Icon && badge.IconPosition;
-        const iconPosition = hasIconPosition ? 'Icon Position: ' + badge.IconPosition : '';
-        return (React.createElement(Box, { className: "twa:my-2", key: index },
-            React.createElement(Tag, null, ruleString),
-            iconOnly && React.createElement(Tag, { className: "twa:ml-2" }, 'Icon Only'),
-            hasIconPosition && React.createElement(Tag, { className: "twa:ml-2" }, iconPosition)));
-    })));
+    const density = badgeStyle.Density ?? 'Normal';
+    const spacing = typeof badgeStyle.Spacing === 'number' ? badgeStyle.Spacing : null;
+    const overflowMode = badgeStyle.OverflowMode ?? 'Truncate';
+    return (_jsxs(Flex, { flexDirection: "column", children: [_jsxs(Flex, { className: "twa:my-1 twa:flex-wrap twa:gap-2", children: [_jsxs(Tag, { children: ["Density: ", density] }), spacing != null && _jsxs(Tag, { children: ["Spacing: ", spacing, "px"] }), _jsxs(Tag, { children: ["Overflow: ", overflowMode] })] }), badgeStyle.Badges.map((badge, index) => {
+                let ruleString = 'No Rule';
+                if (badge.Predicate) {
+                    ruleString = adaptable.api.predicateApi.predicateToString(badge.Predicate);
+                }
+                if (badge.Expression) {
+                    ruleString = badge.Expression.BooleanExpression;
+                }
+                const iconOnly = badge.Icon && badge.IconOnly;
+                const hasIconPosition = badge.Icon && badge.IconPosition;
+                const iconPosition = hasIconPosition ? 'Icon Position: ' + badge.IconPosition : '';
+                const shape = badge.Shape;
+                return (_jsxs(Box, { className: "twa:my-2", children: [_jsx(Tag, { children: ruleString }), shape && _jsx(Tag, { className: "twa:ml-2", children: `Shape: ${shape}` }), iconOnly && _jsx(Tag, { className: "twa:ml-2", children: 'Icon Only' }), hasIconPosition && _jsx(Tag, { className: "twa:ml-2", children: iconPosition }), typeof badge.IconGap === 'number' && (_jsx(Tag, { className: "twa:ml-2", children: `Icon Gap: ${badge.IconGap}px` }))] }, index));
+            })] }));
 };

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

@@ -0,0 +1,16 @@
+import * as React from 'react';
+import { BulletChartStyle, RangeBarStyle } from '../../../../../AdaptableState/StyledColumnState';
+/**
+ * Compact schematic of a Range Bar (bands + track + value / reference markers)
+ * for the Styled Columns object list and wizard step summaries.
+ */
+export declare const StyledColumnRangeBarListPreview: React.FC<{
+    range: RangeBarStyle;
+}>;
+/**
+ * Compact schematic of a Bullet Chart (qualitative bands + bar + target marker)
+ * for the Styled Columns object list.
+ */
+export declare const StyledColumnBulletChartListPreview: React.FC<{
+    bullet: BulletChartStyle;
+}>;

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

@@ -0,0 +1,61 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { Box } from '../../../../../components/Flex';
+const PREVIEW_WIDTH = 168;
+const PREVIEW_HEIGHT = 26;
+const VB_W = 100;
+const VB_H = 22;
+/**
+ * Maps each `CellColorRange` to a horizontal span in the schematic preview.
+ * When endpoints are not plain numbers (e.g. `Col-Min`), falls back to even
+ * slices so the strip still reads as a qualitative scale.
+ */
+const bandSegmentsForPreview = (ranges) => {
+    if (!ranges?.length) {
+        return [];
+    }
+    const numeric = ranges.filter((r) => typeof r.Min === 'number' && typeof r.Max === 'number');
+    if (numeric.length === ranges.length) {
+        const globalMin = Math.min(...numeric.map((r) => r.Min));
+        const globalMax = Math.max(...numeric.map((r) => r.Max));
+        const span = globalMax - globalMin || 1;
+        return numeric.map((r) => ({
+            x0: (r.Min - globalMin) / span,
+            x1: (r.Max - globalMin) / span,
+            color: r.Color,
+        }));
+    }
+    const slice = 1 / ranges.length;
+    return ranges.map((r, i) => ({
+        x0: i * slice,
+        x1: (i + 1) * slice,
+        color: r.Color,
+    }));
+};
+const DEFAULT_TRACK = 'color-mix(in srgb, var(--ab-color-foreground) 35%, transparent)';
+const DEFAULT_BAR = 'var(--ab-color-accent, #07c)';
+const DEFAULT_MARKER = 'var(--ab-color-foreground, #333)';
+/**
+ * Compact schematic of a Range Bar (bands + track + value / reference markers)
+ * for the Styled Columns object list and wizard step summaries.
+ */
+export const StyledColumnRangeBarListPreview = (props) => {
+    const { range } = props;
+    const segments = bandSegmentsForPreview(range.CellRanges);
+    const trackFill = range.TrackColor ?? DEFAULT_TRACK;
+    const valueColor = range.Marker?.Color || DEFAULT_BAR;
+    const refColor = range.ReferenceMarker?.Color || DEFAULT_MARKER;
+    const hasRef = range.Reference != undefined;
+    const isVertical = range.Orientation === 'Vertical';
+    return (_jsx(Box, { className: "twa:rounded twa:border twa:border-[color-mix(in_srgb,var(--ab-color-foreground)_12%,transparent)] twa:bg-[color-mix(in_srgb,var(--ab-color-primary)_40%,transparent)] twa:px-1 twa:py-0.5", style: { width: PREVIEW_WIDTH, height: PREVIEW_HEIGHT }, children: _jsxs("svg", { width: "100%", height: "100%", viewBox: `0 0 ${VB_W} ${VB_H}`, preserveAspectRatio: "none", "aria-hidden": true, children: [segments.length === 0 ? (_jsx("rect", { x: "0", y: "0", width: VB_W, height: VB_H, fill: range.BackColor ?? 'transparent' })) : (segments.map((s, i) => (_jsx("rect", { x: s.x0 * VB_W, y: "0", width: (s.x1 - s.x0) * VB_W, height: VB_H, fill: s.color, opacity: 0.55 }, i)))), isVertical ? (_jsxs(_Fragment, { children: [_jsx("rect", { x: VB_W * 0.42, y: "2", width: "5", height: VB_H - 4, rx: "1", fill: trackFill }), hasRef && (_jsx("line", { x1: VB_W * 0.46, y1: "3", x2: VB_W * 0.46, y2: VB_H - 3, stroke: refColor, strokeWidth: "2", vectorEffect: "non-scaling-stroke" })), _jsx("polygon", { points: `${VB_W * 0.52},${VB_H * 0.35} ${VB_W * 0.62},${VB_H * 0.5} ${VB_W * 0.52},${VB_H * 0.65}`, fill: valueColor })] })) : (_jsxs(_Fragment, { children: [_jsx("rect", { x: "2", y: VB_H * 0.38, width: VB_W - 4, height: "5", rx: "1", fill: trackFill }), hasRef && (_jsx("line", { x1: VB_W * 0.38, y1: VB_H * 0.2, x2: VB_W * 0.38, y2: VB_H * 0.8, stroke: refColor, strokeWidth: "2", vectorEffect: "non-scaling-stroke" })), _jsx("polygon", { points: `${VB_W * 0.72},${VB_H * 0.2} ${VB_W * 0.82},${VB_H * 0.5} ${VB_W * 0.72},${VB_H * 0.8}`, fill: valueColor })] }))] }) }));
+};
+/**
+ * Compact schematic of a Bullet Chart (qualitative bands + bar + target marker)
+ * for the Styled Columns object list.
+ */
+export const StyledColumnBulletChartListPreview = (props) => {
+    const { bullet } = props;
+    const segments = bandSegmentsForPreview(bullet.CellRanges);
+    const barColor = bullet.BarColor ?? DEFAULT_BAR;
+    const markerColor = bullet.TargetMarker?.Color || DEFAULT_MARKER;
+    return (_jsx(Box, { className: "twa:rounded twa:border twa:border-[color-mix(in_srgb,var(--ab-color-foreground)_12%,transparent)] twa:bg-[color-mix(in_srgb,var(--ab-color-primary)_40%,transparent)] twa:px-1 twa:py-0.5", style: { width: PREVIEW_WIDTH, height: PREVIEW_HEIGHT }, children: _jsxs("svg", { width: "100%", height: "100%", viewBox: `0 0 ${VB_W} ${VB_H}`, preserveAspectRatio: "none", "aria-hidden": true, children: [segments.length === 0 ? (_jsx("rect", { x: "0", y: "0", width: VB_W, height: VB_H, fill: bullet.BackColor ?? 'transparent' })) : (segments.map((s, i) => (_jsx("rect", { x: s.x0 * VB_W, y: "2", width: (s.x1 - s.x0) * VB_W, height: VB_H - 4, fill: s.color, opacity: 0.5 }, i)))), _jsx("rect", { x: VB_W * 0.04, y: VB_H * 0.35, width: VB_W * 0.58, height: VB_H * 0.3, rx: "1", fill: barColor }), _jsx("line", { x1: VB_W * 0.78, y1: VB_H * 0.12, x2: VB_W * 0.78, y2: VB_H * 0.88, stroke: markerColor, strokeWidth: "2.5", vectorEffect: "non-scaling-stroke" })] }) }));
+};

package/src/View/StyledColumn/Wizard/StyledColumnWizardStyleSection/StyledColumnWizardRangesSection.d.ts

@@ -0,0 +1,12 @@
+import * as React from 'react';
+import { StyledColumn } from '../../../../AdaptableState/StyledColumnState';
+import { AdaptableApi } from '../../../../types';
+/**
+ * Summary of the Ranges / Column Comparison configuration of a styled column.
+ * Works for both Gradient and Percent Bar.
+ */
+export declare const renderStyledColumnRangesSummary: (data: StyledColumn, api?: AdaptableApi) => React.JSX.Element | React.JSX.Element[];
+export interface StyledColumnWizardRangesSectionProps {
+    onChange: (styledColumn: StyledColumn) => void;
+}
+export declare const StyledColumnWizardRangesSection: React.FunctionComponent<StyledColumnWizardRangesSectionProps>;