@adaptabletools/adaptable 23.0.0-canary.1 → 23.0.0-canary.10

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

@@ -0,0 +1,16 @@
+import * as React from 'react';
+import type { CellBoxStyle } from '../../../../../AdaptableState/Common/AdaptableStyle';
+import { StyledColumn } from '../../../../../AdaptableState/StyledColumnState';
+import { RatingIconShape, RatingStyle } from '../../../../../AdaptableState/StyledColumns/RatingStyle';
+export declare const DEFAULT_RATING_MAX = 5;
+export declare const DEFAULT_RATING_SIZE = 14;
+export declare const DEFAULT_RATING_GAP = 2;
+export declare const DEFAULT_RATING_ICON: RatingIconShape;
+export declare function getRatingCellChromeCss(cell: CellBoxStyle | undefined): React.CSSProperties;
+export declare const RatingPreview: React.FC<{
+    rating: RatingStyle;
+    value?: number;
+}>;
+export declare const StyledColumnRatingPreview: React.FunctionComponent<React.PropsWithChildren<{
+    data: StyledColumn;
+}>>;

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

@@ -0,0 +1,58 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import * as React from 'react';
+import { Box } from '../../../../../components/Flex';
+import { Tag } from '../../../../../components/Tag';
+import { convertAdaptableStyleToCSS, hasCellBoxStyle, } from '../../../../../Utilities/Helpers/StyleHelper';
+export const DEFAULT_RATING_MAX = 5;
+export const DEFAULT_RATING_SIZE = 14;
+export const DEFAULT_RATING_GAP = 2;
+export const DEFAULT_RATING_ICON = 'Star';
+const DEFAULT_FILLED_COLOR = 'var(--ab-color-warn, #f5a623)';
+const DEFAULT_EMPTY_COLOR = 'color-mix(in srgb, currentColor 22%, transparent)';
+const PREVIEW_CELL_CLASS = 'ab-RatingPreviewCell twa:inline-flex twa:items-center twa:min-w-[140px] twa:min-h-[32px] twa:px-2 twa:py-1 twa:rounded-standard twa:border twa:border-[color-mix(in_srgb,var(--ab-color-foreground)_15%,transparent)]';
+const ICON_PATHS = {
+    Star: 'M12 2 L14.9 8.6 L22 9.3 L16.7 14.1 L18.2 21 L12 17.4 L5.8 21 L7.3 14.1 L2 9.3 L9.1 8.6 Z',
+    Heart: 'M12 21 C 12 21 3 14.5 3 8.5 C 3 5.5 5.5 3 8.5 3 C 10.3 3 11.7 4 12 5.2 C 12.3 4 13.7 3 15.5 3 C 18.5 3 21 5.5 21 8.5 C 21 14.5 12 21 12 21 Z',
+    Circle: 'M12 4 a8 8 0 1 0 0.0001 0 Z',
+    Thumb: 'M2 11 h4 v10 h-4 z M7 11 l4 -8 c.5 -1 2 -1 2 0 l-1 5 h6 c1 0 2 1 1.7 2 l-2 8 c-.3 1 -1 1.6 -2 1.6 H7 z',
+};
+const clamp = (n, lo, hi) => Math.max(lo, Math.min(hi, n));
+export function getRatingCellChromeCss(cell) {
+    if (!cell || !hasCellBoxStyle(cell)) {
+        return {};
+    }
+    return convertAdaptableStyleToCSS(cell);
+}
+export const RatingPreview = ({ rating, value, }) => {
+    const instanceId = React.useId();
+    const max = rating.Max ?? DEFAULT_RATING_MAX;
+    const size = rating.Size ?? DEFAULT_RATING_SIZE;
+    const gap = rating.Gap ?? DEFAULT_RATING_GAP;
+    const icon = rating.Icon ?? DEFAULT_RATING_ICON;
+    const filledColor = rating.FilledColor ?? DEFAULT_FILLED_COLOR;
+    const emptyColor = rating.EmptyColor ?? DEFAULT_EMPTY_COLOR;
+    const allowHalf = rating.AllowHalf ?? true;
+    const previewValue = value ?? Math.max(1, Math.min(max, max * 0.7));
+    const effective = allowHalf ? previewValue : Math.round(previewValue);
+    // Display rounded to 1 dp so e.g. 3 * 0.7 doesn't surface as 2.0999999999999996.
+    const displayValue = Math.round(previewValue * 10) / 10;
+    const d = ICON_PATHS[icon];
+    return (_jsxs("span", { style: {
+            display: 'inline-flex',
+            alignItems: 'center',
+            gap: `${gap}px`,
+            lineHeight: 1,
+        }, "aria-hidden": "true", children: [Array.from({ length: max }).map((_, i) => {
+                const fill = clamp(effective - i, 0, 1);
+                const clipId = `ab-rating-preview-clip-${instanceId}-${i}`;
+                return (_jsxs("svg", { width: size, height: size, viewBox: "0 0 24 24", children: [_jsx("path", { d: d, fill: emptyColor }), fill > 0 && (_jsxs(_Fragment, { children: [_jsx("defs", { children: _jsx("clipPath", { id: clipId, children: _jsx("rect", { x: 0, y: 0, width: 24 * fill, height: 24 }) }) }), _jsx("path", { d: d, fill: filledColor, clipPath: `url(#${clipId})` })] }))] }, i));
+            }), rating.ShowValue && (_jsx("span", { style: { marginLeft: 6, fontVariantNumeric: 'tabular-nums' }, children: displayValue }))] }));
+};
+export const StyledColumnRatingPreview = ({ data }) => {
+    const rating = data.RatingStyle;
+    if (!rating) {
+        return _jsx(Tag, { children: "No Rating Style" });
+    }
+    const previewCellChrome = getRatingCellChromeCss(rating.Cell);
+    return (_jsx(Box, { className: PREVIEW_CELL_CLASS, style: previewCellChrome, children: _jsx(RatingPreview, { rating: rating }) }));
+};

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

@@ -0,0 +1,7 @@
+import * as React from 'react';
+import type { CellBoxStyle } from '../../../../../AdaptableState/Common/AdaptableStyle';
+import { StyledColumn } from '../../../../../AdaptableState/StyledColumnState';
+export declare function getSparklineCellChromeCss(cell: CellBoxStyle | undefined): React.CSSProperties;
+export declare const StyledColumnSparklinePreview: React.FunctionComponent<React.PropsWithChildren<{
+    data: StyledColumn;
+}>>;

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

@@ -0,0 +1,124 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import * as React from 'react';
+import { AgChartsEnterpriseModule } from 'ag-charts-enterprise';
+import { AdaptableHelper } from '../../../../../Utilities/Helpers/AdaptableHelper';
+import { resolveSparklineOptionsForRender } from '../../../../../Utilities/Helpers/StyledColumns/SparklineStyleHelper';
+import { convertAdaptableStyleToCSS, hasCellBoxStyle, } from '../../../../../Utilities/Helpers/StyleHelper';
+import { Box } from '../../../../../components/Flex';
+import { Tag } from '../../../../../components/Tag';
+import { useAdaptable } from '../../../../AdaptableContext';
+const FALLBACK_NUMBER_ARRAY = [12, 18, 9, 22, 15, 28, 19, 24, 17, 21];
+const PREVIEW_HEIGHT = 36;
+const PREVIEW_CELL_CLASS = 'ab-SparklinePreviewCell twa:block twa:min-w-[200px] twa:min-h-[36px] twa:px-2 twa:py-1 twa:rounded-standard twa:border twa:border-[color-mix(in_srgb,var(--ab-color-foreground)_15%,transparent)]';
+export function getSparklineCellChromeCss(cell) {
+    if (!cell || !hasCellBoxStyle(cell)) {
+        return {};
+    }
+    return convertAdaptableStyleToCSS(cell);
+}
+const resolveSparklinePreviewData = (columnId, getColumnWithColumnId, getRowNodeForIndex) => {
+    if (!columnId) {
+        return FALLBACK_NUMBER_ARRAY;
+    }
+    const column = getColumnWithColumnId(columnId);
+    if (!column) {
+        return FALLBACK_NUMBER_ARRAY;
+    }
+    for (let row = 0; row < 20; row++) {
+        const rowNode = getRowNodeForIndex(row);
+        const cellData = rowNode?.data?.[column.field];
+        if (Array.isArray(cellData) && cellData.length > 0) {
+            return cellData;
+        }
+    }
+    return FALLBACK_NUMBER_ARRAY;
+};
+const buildSparklinePreviewOptions = (sparklineStyle, container, data, width, height) => {
+    const persisted = sparklineStyle.options ?? { type: 'line' };
+    const sanitized = AdaptableHelper.removeAdaptableObjectPrimitives({
+        ...persisted,
+    });
+    const options = resolveSparklineOptionsForRender({
+        ...sanitized,
+        type: sanitized.type ?? 'line',
+        container,
+        width,
+        height,
+        data: data,
+    });
+    // Custom tooltip renderers expect AG Grid row context — use the default tooltip in preview.
+    if (options.tooltip?.renderer) {
+        const { renderer: _renderer, ...tooltipRest } = options.tooltip;
+        options.tooltip = tooltipRest;
+    }
+    return options;
+};
+/**
+ * AG Grid registers chart modules via `AgChartsEnterpriseModule.setup()` when
+ * sparklines are enabled. Standalone `AgCharts.createSparkline` needs the same
+ * setup — otherwise the settings-panel preview throws "No modules registered".
+ */
+let agChartsPreviewModulesReady = false;
+const ensureAgChartsEnterpriseModules = () => {
+    if (agChartsPreviewModulesReady) {
+        return;
+    }
+    AgChartsEnterpriseModule.setup();
+    agChartsPreviewModulesReady = true;
+};
+const createSparkline = (options) => {
+    ensureAgChartsEnterpriseModules();
+    return AgChartsEnterpriseModule.createSparkline(options);
+};
+const SparklinePreviewCanvas = ({ sparklineStyle, columnId }) => {
+    const adaptable = useAdaptable();
+    const containerRef = React.useRef(null);
+    const instanceRef = React.useRef(null);
+    const [previewError, setPreviewError] = React.useState(null);
+    const canDisplay = adaptable.api.styledColumnApi.canDisplaySparklines();
+    const optionsKey = JSON.stringify(sparklineStyle.options ?? {});
+    React.useEffect(() => {
+        return () => {
+            instanceRef.current?.destroy();
+            instanceRef.current = null;
+        };
+    }, []);
+    React.useEffect(() => {
+        const container = containerRef.current;
+        if (!container || !canDisplay) {
+            return;
+        }
+        const data = resolveSparklinePreviewData(columnId, (id) => adaptable.api.columnApi.getColumnWithColumnId(id), (index) => adaptable.api.gridApi.getRowNodeForIndex(index));
+        const width = Math.max(container.clientWidth, 200);
+        const options = buildSparklinePreviewOptions(sparklineStyle, container, data, width, PREVIEW_HEIGHT);
+        try {
+            if (!instanceRef.current) {
+                instanceRef.current = createSparkline(options);
+            }
+            else {
+                instanceRef.current.update(options);
+            }
+            setPreviewError(null);
+        }
+        catch (error) {
+            instanceRef.current?.destroy();
+            instanceRef.current = null;
+            setPreviewError(error instanceof Error ? error.message : 'Unable to render sparkline preview');
+        }
+    }, [sparklineStyle, columnId, canDisplay, adaptable.api, optionsKey]);
+    if (!canDisplay) {
+        return _jsx(Tag, { children: "Sparklines module not registered" });
+    }
+    if (previewError) {
+        return _jsx(Tag, { children: previewError });
+    }
+    return (_jsx("div", { ref: containerRef, className: "ab-SparklinePreviewCanvas", style: { width: '100%', height: PREVIEW_HEIGHT } }));
+};
+export const StyledColumnSparklinePreview = ({ data }) => {
+    const sparklineStyle = data.SparklineStyle;
+    if (!sparklineStyle) {
+        return _jsx(Tag, { children: "No Sparkline Style" });
+    }
+    const previewCellChrome = getSparklineCellChromeCss(sparklineStyle.Cell);
+    return (_jsx(Box, { className: PREVIEW_CELL_CLASS, style: previewCellChrome, children: _jsx(SparklinePreviewCanvas, { sparklineStyle: sparklineStyle, columnId: data.ColumnId }) }));
+};

package/src/View/StyledColumn/Wizard/StyledColumnWizardStyleSection/StyledColumnWizardRangesSection.js

@@ -44,19 +44,24 @@ export const renderStyledColumnRangesSummary = (data, api) => {
 };
 export const StyledColumnWizardRangesSection = (props) => {
     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 disabled = !data.ColumnId;
+    const disabled = !data.ColumnId || !column;
     // Gradient updates
     const onUpdateGradientStyleRanges = (ranges) => {
         const gradientStyle = {
@@ -149,5 +154,7 @@ export const StyledColumnWizardRangesSection = (props) => {
         }
         props.onChange(newStyledColumn);
     }, [data]);
-    return (_jsxs(Box, { children: [data?.GradientStyle && (_jsx(RangesComponent, { disabled: disabled, minMaxRangeValues: minMaxRangeValues, api: api, scope: scope, showZeroCentredTab: true, showRangeDirection: true, zeroCentred: data.GradientStyle.ZeroCentred, onApplyZeroCentred: onApplyGradientZeroCentred, ranges: data.GradientStyle.CellRanges ?? [], rangeValueType: data.GradientStyle?.RangeValueType, onRangeValueTypeChange: handleRangeValueTypeChange, columnComparison: data?.GradientStyle?.ColumnComparison, updateRanges: onUpdateGradientStyleRanges, updateColumnComparison: onUpdateGradientStyleColumnComparison })), data?.PercentBarStyle && (_jsx(RangesComponent, { disabled: disabled, minMaxRangeValues: minMaxRangeValues, api: api, scope: scope, ranges: data.PercentBarStyle?.CellRanges, rangeValueType: data.PercentBarStyle?.RangeValueType, onRangeValueTypeChange: handleRangeValueTypeChange, columnComparison: data?.PercentBarStyle?.ColumnComparison, updateRanges: onUpdatePercentBarStyleRanges, updateColumnComparison: onUpdatePercentBarStyleColumnComparison })), !data.ColumnId && (_jsx(ErrorBox, { className: "twa:mt-2", children: "You need to select a column before defining Ranges." }))] }));
+    return (_jsxs(Box, { children: [data?.GradientStyle && (_jsx(RangesComponent, { disabled: disabled, minMaxRangeValues: minMaxRangeValues, api: api, scope: scope, showZeroCentredTab: true, showRangeDirection: true, zeroCentred: data.GradientStyle.ZeroCentred, onApplyZeroCentred: onApplyGradientZeroCentred, ranges: data.GradientStyle.CellRanges ?? [], rangeValueType: data.GradientStyle?.RangeValueType, onRangeValueTypeChange: handleRangeValueTypeChange, columnComparison: data?.GradientStyle?.ColumnComparison, updateRanges: onUpdateGradientStyleRanges, updateColumnComparison: onUpdateGradientStyleColumnComparison })), data?.PercentBarStyle && (_jsx(RangesComponent, { disabled: disabled, minMaxRangeValues: minMaxRangeValues, api: api, scope: scope, ranges: data.PercentBarStyle?.CellRanges, rangeValueType: data.PercentBarStyle?.RangeValueType, onRangeValueTypeChange: handleRangeValueTypeChange, columnComparison: data?.PercentBarStyle?.ColumnComparison, updateRanges: onUpdatePercentBarStyleRanges, updateColumnComparison: onUpdatePercentBarStyleColumnComparison })), (!data.ColumnId || !column) && (_jsx(ErrorBox, { className: "twa:mt-2", children: !data.ColumnId
+                    ? 'You need to select a column before defining Ranges.'
+                    : `Column "${data.ColumnId}" was not found in the grid.` }))] }));
 };

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

@@ -2,13 +2,9 @@ import * as React from 'react';
 import { StyledColumn } from '../../../../AdaptableState/StyledColumnState';
 import { AdaptableApi } from '../../../../types';
 export { renderStyledColumnRangesSummary, StyledColumnWizardRangesSection, } from './StyledColumnWizardRangesSection';
+export declare const getStyledColumnPercentBarStyleViewValues: (data: StyledColumn) => string[];
 /**
  * Compact summary of the *non-range* style properties of a Percent Bar.
- * (Gradient uses `renderStyledColumnGradientStyleSummary`.)
- *
- * Used by:
- *   - the wizard's "Style" step `renderSummary`
- *   - the Styled Column module's `toView` (read-only summary popup)
  */
 export declare const renderStyledColumnStyleSummary: (data: StyledColumn, _api?: AdaptableApi) => React.JSX.Element;
 export declare const renderFormatColumnStyleWizardSummary: (data: StyledColumn) => React.JSX.Element;

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

@@ -3,62 +3,82 @@ import { CheckBox } from '../../../../components/CheckBox';
 import ErrorBox from '../../../../components/ErrorBox';
 import FormLayout, { FormRow } from '../../../../components/FormLayout';
 import { Tag } from '../../../../components/Tag';
-import { ColorPicker } from '../../../../components/ColorPicker';
+import { formatBarStyleCellTextLayoutSummary, getActiveBarStyleCellTextTokens, hasBarStyleCellTextConfigured, patchBarStyleCellTextPlacement, resolveBarStyleCellTextLayout, toggleBarStyleCellTextToken, } from '../../../../Utilities/Helpers/StyledColumns/BarStylesHelper';
+import { BarStyleCellTextLayoutEditor } from './Components/BarStyleCellTextLayoutEditor';
+import { OptionalColorPicker } from '../../../../components/ColorPicker';
 import { getGraySwatchColor } from '../../../UIHelper';
 import { useOnePageAdaptableWizardContext } from '../../../Wizard/OnePageAdaptableWizard';
-import ArrayExtensions from '../../../../Utilities/Extensions/ArrayExtensions';
 import { Box, Flex } from '../../../../components/Flex';
 import Radio, { RadioGroup } from '../../../../components/Radio';
-import { Toggle, ToggleGroup } from '../../../../components/Toggle';
-import { renderFontStyleSummaryTags, StyledColumnFontStyleEditor, } from '../StyledColumnSliceStyleEditors';
+import { getCellFontStyleSummaryItems, StyledColumnFontStyleEditor, } from '../StyledColumnSliceStyleEditors';
 import { Card } from '../../../../components/Card';
+import { renderSummaryStringTags } from '../../../Wizard/SummaryColorTag';
 // Re-export the Ranges section + summary for legacy import paths.
 export { renderStyledColumnRangesSummary, StyledColumnWizardRangesSection, } from './StyledColumnWizardRangesSection';
 // ---------------------------------------------------------------------------
 // Summary helpers
 // ---------------------------------------------------------------------------
 const formatOriginLabel = (origin) => {
-    if (origin == undefined)
+    if (origin == undefined) {
         return 'Auto';
-    if (typeof origin === 'number')
+    }
+    if (typeof origin === 'number') {
         return `Custom (${origin})`;
+    }
     return origin;
 };
-const formatAlignmentLabel = (alignment) => {
-    if (alignment == undefined)
-        return 'Inherit';
-    return alignment;
+const formatPercentBarCellTextSummary = (cellText) => cellText?.map((t) => (t === 'CellValue' ? 'Cell Value' : 'Percent Value')).join(' + ') ?? '';
+const formatPercentBarToolTipSummary = (toolTipText) => toolTipText?.map((t) => (t === 'CellValue' ? 'Cell Value' : 'Percent Value')).join(' + ') ?? '';
+const buildStyledColumnPercentBarStyleSummaryStrings = (pb, options) => {
+    const items = [`Origin: ${formatOriginLabel(pb.Origin)}`];
+    if (hasBarStyleCellTextConfigured(pb.CellTextProperties)) {
+        const tokens = getActiveBarStyleCellTextTokens(pb.CellTextProperties);
+        items.push(`Cell Text: ${formatPercentBarCellTextSummary(tokens)}`);
+        const layoutSummary = formatBarStyleCellTextLayoutSummary(resolveBarStyleCellTextLayout(pb.CellTextProperties));
+        if (layoutSummary) {
+            items.push(`Placement: ${layoutSummary}`);
+        }
+    }
+    else if (options.includeEmptyCellText) {
+        items.push('Cell Text: None');
+    }
+    if (pb.ToolTipText?.length) {
+        items.push(`Tooltip: ${formatPercentBarToolTipSummary(pb.ToolTipText)}`);
+    }
+    else if (options.includeEmptyTooltip) {
+        items.push('Tooltip: No Tooltip');
+    }
+    if (pb.BackColor) {
+        items.push(`Back Colour: ${pb.BackColor}`);
+    }
+    getCellFontStyleSummaryItems(pb.Font).forEach(({ label, value }) => {
+        items.push(`${label}: ${value}`);
+    });
+    return items;
 };
-const formatCellText = (cellText) => {
-    if (!cellText || cellText.length === 0)
-        return '—';
-    return cellText.map((t) => (t === 'CellValue' ? 'Cell Value' : 'Percent Value')).join(' + ');
+export const getStyledColumnPercentBarStyleViewValues = (data) => {
+    const pb = data.PercentBarStyle;
+    if (!pb) {
+        return [];
+    }
+    return buildStyledColumnPercentBarStyleSummaryStrings(pb, {
+        includeEmptyCellText: false,
+        includeEmptyTooltip: false,
+    });
 };
 /**
  * Compact summary of the *non-range* style properties of a Percent Bar.
- * (Gradient uses `renderStyledColumnGradientStyleSummary`.)
- *
- * Used by:
- *   - the wizard's "Style" step `renderSummary`
- *   - the Styled Column module's `toView` (read-only summary popup)
  */
 export const renderStyledColumnStyleSummary = (data, _api) => {
     const pb = data.PercentBarStyle;
     if (!pb) {
         return _jsx(Tag, { children: "No Styling Defined" });
     }
-    const parts = [
-        _jsxs(Box, { className: "twa:mr-2", children: ["Origin: ", _jsx(Tag, { children: formatOriginLabel(pb.Origin) })] }, "origin"),
-    ];
-    if (pb.CellText && pb.CellText.length > 0) {
-        parts.push(_jsxs(Box, { className: "twa:mr-2", children: ["Text: ", _jsx(Tag, { children: formatCellText(pb.CellText) }), " (", pb.CellTextPosition ?? 'Below', ")"] }, "text"));
-        parts.push(_jsxs(Box, { className: "twa:mr-2", children: ["Align: ", _jsx(Tag, { children: formatAlignmentLabel(pb.CellTextAlignment) })] }, "align"));
-    }
-    const fontTags = renderFontStyleSummaryTags(pb.Font);
-    if (fontTags) {
-        parts.push(_jsxs(Box, { className: "twa:mr-2", children: ["Font: ", fontTags] }, "font"));
-    }
-    return (_jsx(Flex, { alignItems: "center", className: "twa:flex-wrap", children: parts }));
+    const items = buildStyledColumnPercentBarStyleSummaryStrings(pb, {
+        includeEmptyCellText: true,
+        includeEmptyTooltip: true,
+    });
+    return renderSummaryStringTags(items);
 };
 // Legacy wrapper kept for any external consumers; safe no-op here.
 export const renderFormatColumnStyleWizardSummary = (data) => {
@@ -68,11 +88,6 @@ export const renderFormatColumnStyleWizardSummary = (data) => {
 // Pinning the width forces colons to line up vertically across cards rather than
 // each FormLayout sizing its label column independently from its own longest label.
 const STYLE_FORM_SIZES = ['200px', '1fr'];
-const CELL_TEXT_POSITION_CHOICES = [
-    { value: 'Above', label: 'Above Bar' },
-    { value: 'Below', label: 'Below Bar' },
-    { value: 'Merged', label: 'Merged' },
-];
 const ORIGIN_CHOICES = [
     {
         value: 'Auto',
@@ -97,6 +112,7 @@ export const StyledColumnWizardStyleSection = (props) => {
         return (_jsx(Box, { children: !data.ColumnId && (_jsx(ErrorBox, { className: "twa:mt-2", children: "You need to select a column before styling." })) }));
     }
     const pb = data.PercentBarStyle;
+    const cellTextProperties = pb.CellTextProperties;
     // ---- updaters -----------------------------------------------------------
     const update = (patch) => {
         props.onChange({
@@ -104,12 +120,13 @@ export const StyledColumnWizardStyleSection = (props) => {
             PercentBarStyle: { ...pb, ...patch },
         });
     };
-    const onCellTextChanged = (token, checked) => {
-        const current = pb.CellText ?? [];
-        const next = checked
-            ? Array.from(new Set([...current, token]))
-            : current.filter((t) => t !== token);
-        update({ CellText: next });
+    const onCellTextLayoutToggle = (token, show) => {
+        update(toggleBarStyleCellTextToken(cellTextProperties, token, show));
+    };
+    const onCellTextPlacementChange = (token, patch) => {
+        update({
+            CellTextProperties: patchBarStyleCellTextPlacement(cellTextProperties, token, patch),
+        });
     };
     const onToolTipTextChanged = (token, checked) => {
         const current = pb.ToolTipText ?? [];
@@ -118,50 +135,20 @@ export const StyledColumnWizardStyleSection = (props) => {
             : current.filter((t) => t !== token);
         update({ ToolTipText: next });
     };
-    const handleCellTextPositionChange = (pos) => update({ CellTextPosition: pos });
     const handleOriginChange = (origin) => update({ Origin: origin });
-    const handleCellTextAlignmentChange = (choice) => {
-        if (choice === 'Inherit') {
-            const next = { ...pb };
-            delete next.CellTextAlignment;
-            props.onChange({ ...data, PercentBarStyle: next });
+    const onBackColorChange = (color) => {
+        if (color) {
+            update({ BackColor: color });
             return;
         }
-        update({ CellTextAlignment: choice });
-    };
-    const onAutoCellTextAlignmentChecked = (checked) => {
-        if (!checked) {
-            handleCellTextAlignmentChange('Inherit');
-            return;
-        }
-        let nextFont = pb.Font ? { ...pb.Font } : undefined;
-        if (nextFont) {
-            delete nextFont.Alignment;
-            if (Object.keys(nextFont).length === 0) {
-                nextFont = undefined;
-            }
-        }
-        props.onChange({
-            ...data,
-            PercentBarStyle: {
-                ...pb,
-                CellTextAlignment: 'Auto',
-                Font: nextFont,
-            },
-        });
-    };
-    const onUseBackColorChanged = (checked) => {
-        update({ BackColor: checked ? getGraySwatchColor() : null });
+        const { BackColor: _removed, ...rest } = pb;
+        props.onChange({ ...data, PercentBarStyle: rest });
     };
-    const onBackColorChange = (color) => update({ BackColor: color });
-    const cellTextDisabled = ArrayExtensions.IsNullOrEmpty(pb.CellText) || disabled;
-    const currentAlignment = pb.CellTextAlignment ?? 'Inherit';
+    const cellTextDisabled = !hasBarStyleCellTextConfigured(cellTextProperties) || disabled;
     const currentOrigin = typeof pb.Origin === 'number'
         ? 'Min' // numeric origin doesn't fit the radio set; treat as Min for selection state
         : pb.Origin ?? 'Auto';
-    return (_jsxs(Box, { children: [_jsxs(Card, { shadow: false, className: "twa:mb-3", children: [_jsxs(Card.Title, { children: [_jsx(Box, { className: "twa:font-medium", children: "Bar Position" }), _jsx(Box, { className: "twa:text-xs twa:opacity-70 twa:font-normal twa:max-w-[520px]", children: "Set the position of the cell text relative to the bar" })] }), _jsx(Card.Body, { children: _jsx(RadioGroup, { orientation: "vertical", name: "ab-percentbar-origin", value: currentOrigin, onRadioChange: handleOriginChange, children: ORIGIN_CHOICES.map((choice) => (_jsx(Radio, { value: choice.value, disabled: disabled, children: _jsxs(Flex, { alignItems: "center", children: [_jsx(Box, { className: "twa:min-w-[60px]", children: choice.label }), _jsx(Box, { className: "twa:text-xs twa:opacity-70", children: choice.hint })] }) }, choice.value))) }) })] }), _jsxs(Card, { shadow: false, className: "twa:mb-3", children: [_jsxs(Card.Title, { children: [_jsx(Box, { className: "twa:font-medium", children: "Cell Text" }), _jsx(Box, { className: "twa:text-xs twa:opacity-70 twa:font-normal twa:max-w-[540px]", children: "Choose whether and how to display cell text (font properties take precedence over Format Column)" })] }), _jsxs(Card.Body, { children: [_jsxs(FormLayout, { sizes: [...STYLE_FORM_SIZES], children: [_jsxs(FormRow, { label: "Cell Display:", children: [_jsx(CheckBox, { disabled: disabled, checked: pb.CellText?.includes('CellValue'), onChange: (checked) => onCellTextChanged('CellValue', checked), children: "Cell Value" }), ' ', _jsx(CheckBox, { disabled: disabled, className: "twa:ml-3", checked: pb.CellText?.includes('PercentageValue'), onChange: (checked) => onCellTextChanged('PercentageValue', checked), children: "Percent Value" })] }), _jsx(FormRow, { label: "Cell Display Position:", children: _jsx(RadioGroup, { orientation: "horizontal", name: "ab-percentbar-cell-text-position", value: pb.CellTextPosition ?? 'Below', onRadioChange: handleCellTextPositionChange, className: "twa:gap-4", children: CELL_TEXT_POSITION_CHOICES.map((choice) => (_jsx(Radio, { value: choice.value, disabled: cellTextDisabled, children: choice.label }, choice.value))) }) }), _jsx(FormRow, { label: "Auto Text Alignment:", children: _jsxs(Flex, { alignItems: "center", className: "twa:gap-2", children: [_jsx(CheckBox, { disabled: cellTextDisabled, checked: pb.CellTextAlignment === 'Auto', onChange: onAutoCellTextAlignmentChecked }), _jsx(Box, { className: "twa:text-xs twa:opacity-70 twa:max-w-[420px]", children: "Follows bar (if Position is Auto or Zero); overrides fixed alignment below" })] }) }), _jsx(FormRow, { label: "Cell Text Alignment:", children: _jsx(Flex, { alignItems: "center", className: "twa:gap-2", children: _jsx(Box, { className: cellTextDisabled || pb.CellTextAlignment === 'Auto'
-                                                    ? 'twa:opacity-50 twa:pointer-events-none'
-                                                    : '', children: _jsx(Flex, { alignItems: "center", className: "twa:gap-2", children: _jsxs(ToggleGroup, { children: [_jsx(Toggle, { icon: "align-left", pressed: currentAlignment === 'Left', onPressedChange: (pressed) => handleCellTextAlignmentChange(pressed ? 'Left' : 'Inherit') }), _jsx(Toggle, { icon: "align-center", pressed: currentAlignment === 'Center', onPressedChange: (pressed) => handleCellTextAlignmentChange(pressed ? 'Center' : 'Inherit') }), _jsx(Toggle, { icon: "align-right", pressed: currentAlignment === 'Right', onPressedChange: (pressed) => handleCellTextAlignmentChange(pressed ? 'Right' : 'Inherit') })] }) }) }) }) })] }), _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: cellTextDisabled, hideAlignment: true, value: pb.Font, onChange: (next) => {
+    return (_jsxs(Box, { children: [_jsxs(Card, { shadow: false, className: "twa:mb-3", children: [_jsxs(Card.Title, { children: [_jsx(Box, { className: "twa:font-medium", children: "Bar Position" }), _jsx(Box, { className: "twa:text-xs twa:opacity-70 twa:font-normal twa:max-w-[520px]", children: "Set the position of the cell text relative to the bar" })] }), _jsx(Card.Body, { children: _jsx(RadioGroup, { orientation: "vertical", name: "ab-percentbar-origin", value: currentOrigin, onRadioChange: handleOriginChange, children: ORIGIN_CHOICES.map((choice) => (_jsx(Radio, { value: choice.value, disabled: disabled, children: _jsxs(Flex, { alignItems: "center", children: [_jsx(Box, { className: "twa:min-w-[60px]", children: choice.label }), _jsx(Box, { className: "twa:text-xs twa:opacity-70", children: choice.hint })] }) }, choice.value))) }) })] }), _jsxs(Card, { shadow: false, className: "twa:mb-3", children: [_jsxs(Card.Title, { children: [_jsx(Box, { className: "twa:font-medium", children: "Cell Text" }), _jsx(Box, { className: "twa:text-xs twa:opacity-70 twa:font-normal twa:max-w-[540px]", children: "Pick which values to display and where each one sits around the bar (font properties take precedence over Format Column)" })] }), _jsxs(Card.Body, { children: [_jsx(FormLayout, { sizes: [...STYLE_FORM_SIZES], children: _jsx(BarStyleCellTextLayoutEditor, { disabled: disabled, cellTextProperties: cellTextProperties, onToggle: onCellTextLayoutToggle, onPlacementChange: onCellTextPlacementChange }) }), _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: cellTextDisabled, value: pb.Font, onChange: (next) => {
                                         if (next) {
                                             update({ Font: next });
                                         }
@@ -170,5 +157,5 @@ export const StyledColumnWizardStyleSection = (props) => {
                                             delete cleaned.Font;
                                             props.onChange({ ...data, PercentBarStyle: cleaned });
                                         }
-                                    } }) })] })] }), _jsxs(Card, { shadow: false, className: "twa:mb-3", children: [_jsxs(Card.Title, { children: [_jsx(Box, { className: "twa:font-medium", children: "Cell Style" }), _jsx(Box, { className: "twa:text-xs twa:opacity-70 twa:font-normal twa:max-w-[520px]", children: "Configure Tooltip and Background Colour" })] }), _jsx(Card.Body, { children: _jsxs(FormLayout, { sizes: [...STYLE_FORM_SIZES], children: [_jsxs(FormRow, { label: "Tooltip Display:", children: [_jsx(CheckBox, { disabled: disabled, checked: pb.ToolTipText?.includes('CellValue'), onChange: (checked) => onToolTipTextChanged('CellValue', checked), children: "Cell Value" }), ' ', _jsx(CheckBox, { disabled: disabled, className: "twa:ml-3", checked: pb.ToolTipText?.includes('PercentageValue'), onChange: (checked) => onToolTipTextChanged('PercentageValue', checked), children: "Percent Value" })] }), _jsx(FormRow, { label: `Back ${api.internalApi.getCorrectEnglishVariant('Colour')}:`, children: _jsxs(Flex, { alignItems: "center", children: [_jsx(CheckBox, { disabled: disabled, checked: !!pb.BackColor, onChange: onUseBackColorChanged, className: "twa:mr-2" }), pb.BackColor != undefined && (_jsx(ColorPicker, { disabled: disabled, api: api, value: pb.BackColor, onChange: onBackColorChange }))] }) })] }) })] })] }));
+                                    } }) })] })] }), _jsxs(Card, { shadow: false, className: "twa:mb-3", children: [_jsxs(Card.Title, { children: [_jsx(Box, { className: "twa:font-medium", children: "Cell Style" }), _jsx(Box, { className: "twa:text-xs twa:opacity-70 twa:font-normal twa:max-w-[520px]", children: "Configure Tooltip and Background Colour" })] }), _jsx(Card.Body, { children: _jsxs(FormLayout, { sizes: [...STYLE_FORM_SIZES], children: [_jsxs(FormRow, { label: "Tooltip Display:", children: [_jsx(CheckBox, { disabled: disabled, checked: pb.ToolTipText?.includes('CellValue'), onChange: (checked) => onToolTipTextChanged('CellValue', checked), children: "Cell Value" }), ' ', _jsx(CheckBox, { disabled: disabled, className: "twa:ml-3", checked: pb.ToolTipText?.includes('PercentageValue'), onChange: (checked) => onToolTipTextChanged('PercentageValue', checked), children: "Percent Value" })] }), _jsx(FormRow, { label: `Back ${api.internalApi.getCorrectEnglishVariant('Colour')}:`, children: _jsx(OptionalColorPicker, { disabled: disabled, api: api, value: pb.BackColor ?? undefined, defaultColor: getGraySwatchColor(), onChange: onBackColorChange }) })] }) })] })] }));
 };

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

@@ -1,12 +1,11 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import FormLayout, { FormRow } from '../../../components/FormLayout';
-import Input from '../../../components/Input';
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { Tag } from '../../../components/Tag';
 import ObjectFactory from '../../../Utilities/ObjectFactory';
 import { useAdaptable } from '../../AdaptableContext';
 import { useOnePageAdaptableWizardContext } from '../../Wizard/OnePageAdaptableWizard';
-import { TypeRadio } from '../../Wizard/TypeRadio';
 import { Flex, Box } from '../../../components/Flex';
+import { StyledColumnTypeThumbnail } from './StyledColumnTypeThumbnail';
+import { getWizardTypeSelectionGridColumns, WizardNameFieldSection, WizardTypeSelectionCard, WizardTypeSelectionSection, } from '../../Wizard/WizardTypeSelection';
 const TYPE_LABELS = {
     Gradient: 'Gradient Column',
     PercentBar: 'Percent Bar',
@@ -17,6 +16,88 @@ const TYPE_LABELS = {
     RangeBar: 'Range Bar',
     Icon: 'Icon',
 };
+const STYLED_COLUMN_TYPE_GROUPS = [
+    {
+        title: 'Labels & icons',
+        types: ['badge', 'icon', 'rating'],
+    },
+    {
+        title: 'Bars & ranges',
+        types: ['percent', 'bullet', 'rangeBar'],
+    },
+    {
+        title: 'Colour',
+        types: ['gradient'],
+    },
+    {
+        title: 'Charts',
+        types: ['sparkline'],
+    },
+];
+const STYLED_COLUMN_TYPE_OPTIONS = [
+    {
+        type: 'badge',
+        label: 'Badge',
+        columnTypes: ['Any Column'],
+        description: 'Render cell values as badges',
+        isSelected: (data) => Boolean(data.BadgeStyle),
+    },
+    {
+        type: 'icon',
+        label: 'Icon',
+        columnTypes: ['Any Column'],
+        description: 'Map values to icons',
+        isSelected: (data) => Boolean(data.IconStyle),
+    },
+    {
+        type: 'rating',
+        label: 'Rating',
+        columnTypes: ['Numeric Column'],
+        description: 'Provide visual rating indicators',
+        isSelected: (data) => Boolean(data.RatingStyle),
+    },
+    {
+        type: 'gradient',
+        label: 'Gradient',
+        columnTypes: ['Numeric Column'],
+        description: 'Colour cells by value ranges',
+        isSelected: (data) => Boolean(data.GradientStyle),
+    },
+    {
+        type: 'percent',
+        label: 'Percent Bar',
+        columnTypes: ['Numeric Column'],
+        description: 'Draw a bar sized to the value',
+        isSelected: (data) => Boolean(data.PercentBarStyle),
+    },
+    {
+        type: 'bullet',
+        label: 'Bullet Chart',
+        columnTypes: ['Numeric Column'],
+        description: 'Bar with target and bands',
+        isSelected: (data) => Boolean(data.BulletChartStyle),
+    },
+    {
+        type: 'rangeBar',
+        label: 'Range Bar',
+        columnTypes: ['Numeric Column'],
+        description: 'Show value on a min–max track',
+        isSelected: (data) => Boolean(data.RangeBarStyle),
+    },
+    {
+        type: 'sparkline',
+        label: 'Sparkline',
+        columnTypes: ['Numeric Array Column'],
+        description: 'Display a mini chart in the cell',
+        isSelected: (data) => Boolean(data.SparklineStyle),
+    },
+];
+const STYLED_COLUMN_TYPE_COUNT = STYLED_COLUMN_TYPE_OPTIONS.length;
+const STYLED_COLUMN_TYPE_OPTION_BY_KEY = STYLED_COLUMN_TYPE_OPTIONS.reduce((map, option) => {
+    map.set(option.type, option);
+    return map;
+}, new Map());
+const STYLED_COLUMN_TYPE_KEYS = STYLED_COLUMN_TYPE_GROUPS.flatMap((group) => group.types);
 /**
  * Wizard-header title for each Styled Column type. Reads as a complete
  * subject so it works as a top-level title in the wizard frame
@@ -79,6 +160,7 @@ export const renderStyledColumnTypeSummary = renderStyledColumnSettingsSummary;
 export const StyledColumnWizardTypeSection = (props) => {
     const { data } = useOnePageAdaptableWizardContext();
     const adaptable = useAdaptable();
+    const sparklinesAvailable = adaptable.api.styledColumnApi.canDisplaySparklines();
     const onNameChange = (event) => {
         props.onChange({
             ...data,
@@ -123,8 +205,6 @@ export const StyledColumnWizardTypeSection = (props) => {
                 newStyledColumn.RatingStyle = {};
                 break;
             case 'rangeBar':
-                // Range Bar requires Min and Max — seed sensible defaults so the
-                // wizard's Style step opens with a valid configuration.
                 newStyledColumn.RangeBarStyle = {
                     Min: 'Col-Min',
                     Max: 'Col-Max',
@@ -139,5 +219,12 @@ export const StyledColumnWizardTypeSection = (props) => {
         newStyledColumn.ColumnId = null;
         props.onChange(newStyledColumn);
     };
-    return (_jsxs(Flex, { flexDirection: "column", "data-name": "styled-column-type", className: "twa:h-full twa:p-2", children: [_jsx(Box, { className: "twa:text-5 twa:font-medium twa:mb-3", children: "Settings" }), _jsx(Flex, { flexDirection: "row", className: "twa:mb-4", children: _jsx(FormLayout, { className: "twa:max-w-[420px] twa:w-full", children: _jsx(FormRow, { label: "Name", children: _jsx(Input, { className: "twa:w-full", "data-name": "styled-column-name", onChange: onNameChange, value: data?.Name ?? '' }) }) }) }), _jsx(Box, { className: "twa:text-5 twa:font-medium twa:mb-2", children: "Type" }), _jsxs(Flex, { flexDirection: "column", children: [_jsx(TypeRadio, { text: "Badge", description: "Display the column's values as Badges (All Columns)", checked: Boolean(data.BadgeStyle), onClick: () => handleTypeChange('badge') }), _jsx(TypeRadio, { text: "Rating", description: "Render values as row of icons (or stars, hearts etc.) (Numeric Columns)", checked: Boolean(data.RatingStyle), onClick: () => handleTypeChange('rating') }), _jsx(TypeRadio, { text: "Gradient", description: "Colour each cell in the column using a Gradient value (Numeric Columns)", checked: Boolean(data.GradientStyle), onClick: () => handleTypeChange('gradient') }), _jsx(TypeRadio, { text: "Percent Bar", description: "Display a coloured Bar where the width is based on the cell (Numeric Columns)", checked: Boolean(data.PercentBarStyle), onClick: () => handleTypeChange('percent') }), _jsx(TypeRadio, { text: "Bullet Chart", description: "Show a bar with target marker and qualitative bands per cell (Numeric Columns)", checked: Boolean(data.BulletChartStyle), onClick: () => handleTypeChange('bullet') }), _jsx(TypeRadio, { text: "Range Bar", description: "Show where values sit between Min & Max (per-row or column) (Numeric Columns)", checked: Boolean(data.RangeBarStyle), onClick: () => handleTypeChange('rangeBar') }), _jsx(TypeRadio, { text: "Icon", description: "Map cell values to icons (e.g. flag for country) (All Columns)", checked: Boolean(data.IconStyle), onClick: () => handleTypeChange('icon') }), _jsx(TypeRadio, { text: "Sparkline", description: "Render Column as a Sparkline (Numeric Array Columns)", checked: Boolean(data.SparklineStyle), disabled: !adaptable.api.styledColumnApi.canDisplaySparklines(), disabledTooltip: "Requires the AG Grid Sparklines module to be registered.", onClick: () => handleTypeChange('sparkline') })] })] }));
+    return (_jsxs(Flex, { flexDirection: "column", "data-name": "styled-column-type", className: "twa:h-full twa:min-h-0 twa:p-2 twa:gap-2", children: [_jsx(WizardNameFieldSection, { value: data?.Name ?? '', onChange: onNameChange, inputDataName: "styled-column-name" }), _jsx(WizardTypeSelectionSection, { headingId: "styled-column-type-heading", title: "Style Type", dataName: "styled-column-type-grid", columns: getWizardTypeSelectionGridColumns(STYLED_COLUMN_TYPE_COUNT), intro: _jsxs(_Fragment, { children: ["Click a card to choose one of ", STYLED_COLUMN_TYPE_COUNT, " style types for how values in the Column should be rendered"] }), children: STYLED_COLUMN_TYPE_KEYS.map((typeKey) => {
+                    const option = STYLED_COLUMN_TYPE_OPTION_BY_KEY.get(typeKey);
+                    const isSparkline = typeKey === 'sparkline';
+                    const disabled = isSparkline && !sparklinesAvailable;
+                    return (_jsx(WizardTypeSelectionCard, { label: option.label, description: option.description, selected: option.isSelected(data), disabled: disabled, disabledTooltip: disabled
+                            ? 'Requires the AG Grid Sparklines module to be registered.'
+                            : undefined, dataName: `styled-column-type-${option.type}`, minHeightClassName: "twa:min-h-[168px]", onSelect: () => handleTypeChange(option.type), footer: _jsx(StyledColumnTypeThumbnail, { type: option.type }), children: _jsx(Flex, { flexDirection: "row", className: "twa:flex-wrap twa:gap-1", children: option.columnTypes.map((columnType) => (_jsx(Tag, { children: columnType }, columnType))) }) }, option.type));
+                }) })] }));
 };