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

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

@@ -4,12 +4,12 @@ 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 { InputGroup } from '../../../components/InputGroup';
+import { ColorPicker, OptionalColorPicker } from '../../../components/ColorPicker';
 import { RangesComponent } from '../../Components/RangesComponent';
 import { ColumnSelector } from '../../Components/Selectors/ColumnSelector';
 import { getGraySwatchColor } from '../../UIHelper';
 import { useOnePageAdaptableWizardContext } from '../../Wizard/OnePageAdaptableWizard';
-import DropdownButton from '../../../components/DropdownButton';
 import ArrayExtensions from '../../../Utilities/Extensions/ArrayExtensions';
 import AdaptableInput from '../../Components/AdaptableInput';
 import { Box, Flex } from '../../../components/Flex';
@@ -17,6 +17,7 @@ import { SingleSelect } from '../../../components/NewSelect';
 import { RangeBarRangesSummaryPreview } from './StyledColumnWizardStyleSection/Components/RangeBarRangesSummaryPreview';
 import { StyledColumnRangeBarPreviewCard } from './StyledColumnWizardStyleSection/Components/StyledColumnRangeBarPreview';
 import { Card } from '../../../components/Card';
+import { renderSummaryStringTags } from '../../Wizard/SummaryColorTag';
 const RANGE_STYLE_FORM_SIZES = ['200px', '1fr'];
 const BOUND_MODE_LABELS = {
     Number: 'Fixed Number',
@@ -46,6 +47,66 @@ const summarizeBound = (bound) => {
     }
     return bound;
 };
+/**
+ * A single joined bound control: a type selector (Fixed Number / Column /
+ * Column Min / Max / Average / Median, plus `None` for the optional Reference)
+ * joined inline with a contextual editor. Mirrors the Column Comparison bound
+ * input so the two read as one block: the select hard-codes `rounded-input`, so
+ * the touching corners are flattened directly (important, to beat it) and the
+ * shared border overlapped via `-ml-px`.
+ *
+ *  - Fixed Number  → editable number input
+ *  - Column        → numeric column selector (excluding the styled column)
+ *  - Col-* (aggregate) → disabled input showing the resolved value (when a
+ *    column is in scope), so the user sees the underlying number
+ *  - None          → no editor (selector only)
+ */
+const RangeBarBoundInput = ({ api, value, optional, fallbackNumber, excludeColumnId, resolved, disabled, onChange }) => {
+    const mode = getBoundMode(value);
+    const handleModeChange = (next) => {
+        if (next === mode)
+            return;
+        if (next === 'None')
+            return onChange(undefined);
+        if (next === 'Number')
+            return onChange(fallbackNumber);
+        if (next === 'Column') {
+            const candidate = api.columnApi
+                .getNumericColumns()
+                .find((c) => c.columnId !== excludeColumnId);
+            return onChange(candidate?.columnId ?? '');
+        }
+        // Col-Min / Col-Max / Col-Avg / Col-Median
+        return onChange(next);
+    };
+    const items = [
+        ...(optional ? [{ value: 'None', label: 'None' }] : []),
+        { value: 'Number', label: BOUND_MODE_LABELS.Number },
+        { value: 'Column', label: BOUND_MODE_LABELS.Column },
+        { value: 'Col-Min', label: BOUND_MODE_LABELS['Col-Min'] },
+        { value: 'Col-Max', label: BOUND_MODE_LABELS['Col-Max'] },
+        { value: 'Col-Avg', label: BOUND_MODE_LABELS['Col-Avg'] },
+        { value: 'Col-Median', label: BOUND_MODE_LABELS['Col-Median'] },
+    ];
+    const hasEditor = mode !== 'None';
+    let editor = null;
+    if (mode === 'Number') {
+        editor = (_jsx(AdaptableInput, { className: "twa:w-full", type: "number", disabled: disabled, value: typeof value === 'number' ? value : '', onChange: (e) => onChange(e.target.value === '' ? 0 : Number(e.target.value)) }));
+    }
+    else if (mode === 'Column') {
+        editor = (_jsx(ColumnSelector, { type: "number", disabled: disabled, value: typeof value === 'string' ? value : '', onChange: (columnId) => onChange(columnId), filterColumn: (c) => c.columnId !== excludeColumnId, placeholder: "Select column" }));
+    }
+    else if (hasEditor) {
+        const resolvedValue = resolved[mode];
+        editor = (_jsx(AdaptableInput, { className: "twa:w-full", type: "number", disabled: true, readOnly: true, value: resolvedValue ?? '', title: "Computed across the column's visible rows" }));
+    }
+    const editorWrapperClassName = [
+        'twa:flex-1 twa:basis-0 twa:min-w-0 twa:-ml-px',
+        'twa:[&_.ab-Input]:w-full twa:[&_.ab-Input]:rounded-l-none!',
+        'twa:[&_[data-slot=input-group]]:w-full! twa:[&_[data-slot=input-group]]:rounded-l-none!',
+    ].join(' ');
+    return (_jsxs(InputGroup, { Component: Flex, className: "twa:items-stretch twa:max-w-[22rem]", children: [_jsx(SingleSelect, { className: `twa:w-[150px] twa:max-w-none twa:shrink-0 twa:box-border${hasEditor ? ' twa:rounded-r-none!' : ''}`, disabled: disabled, value: mode, items: items, onValueChange: (v) => handleModeChange(v) }), hasEditor && _jsx(Box, { className: editorWrapperClassName, children: editor })] }));
+};
 const formatRangeBarCellTextSummary = (cellText) => cellText
     ?.map((t) => (t === 'CellValue' ? 'Cell Value' : 'Percent Value'))
     .join(' + ') ?? '';
@@ -144,7 +205,7 @@ export const renderStyledColumnRangeBarRangeStepSummary = (data) => {
         return _jsx(Tag, { children: "No Styling Defined" });
     }
     const tagItems = getStyledColumnRangeBarRangeViewValues(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(RangeBarRangesSummaryPreview, { rangeStyle: range })] }));
+    return (_jsxs(Flex, { flexDirection: "column", className: "twa:gap-2 twa:items-start", children: [renderSummaryStringTags(tagItems), _jsx(RangeBarRangesSummaryPreview, { rangeStyle: range })] }));
 };
 export const StyledColumnRangeBarRangeView = ({ data }) => renderStyledColumnRangeBarRangeStepSummary(data);
 /** Summary for the Display wizard step (markers, track, text). */
@@ -160,7 +221,7 @@ export const renderStyledColumnRangeBarDisplayStepSummary = (data) => {
     if (!items.length) {
         return _jsx(Tag, { children: "No Display Defined" });
     }
-    return (_jsx(Flex, { alignItems: "center", className: "twa:flex-wrap twa:gap-2", children: items.map((item) => (_jsx(Tag, { children: item }, item))) }));
+    return renderSummaryStringTags(items);
 };
 /**
  * Combined summary for the Styled Columns list row (preview + key facts).
@@ -260,48 +321,42 @@ export const StyledColumnWizardRangeBarSection = (props) => {
             },
         });
     }, [data, range]);
+    const updateOptionalColor = (key, color) => {
+        if (color) {
+            update({ [key]: color });
+            return;
+        }
+        const next = { ...range };
+        delete next[key];
+        props.onChange({ ...data, RangeBarStyle: next });
+    };
     // -- Bound editors ---------------------------------------------------------
+    // Resolved values for the column-wide aggregate bound modes, shown read-only
+    // in the bound editor so the user sees the underlying number.
+    const resolvedBoundValues = {
+        'Col-Min': minMaxRangeValues?.min,
+        'Col-Max': minMaxRangeValues?.max,
+        'Col-Avg': column ? api.styledColumnApi.internalApi.getAvgValueForNumericColumn(column) : undefined,
+        'Col-Median': column
+            ? api.styledColumnApi.internalApi.getMedianValueForNumericColumn(column)
+            : undefined,
+    };
     /**
-     * Renders the mode + value pair for one of `Min` / `Max` / `Reference`.
-     * Centralised so the three controls stay visually and behaviourally
-     * identical (only the field name differs).
+     * Renders one of `Min` / `Max` / `Reference` as a single joined row (type
+     * selector + contextual editor). Centralised so the three controls stay
+     * visually and behaviourally identical (only the field name differs).
      */
     const renderBoundEditor = (opts) => {
-        const value = range[opts.field];
-        const mode = getBoundMode(value);
-        const handleModeChange = (next) => {
-            if (next === 'None') {
+        const setBound = (next) => {
+            if (next === undefined) {
                 const cleaned = { ...range };
                 delete cleaned[opts.field];
                 props.onChange({ ...data, RangeBarStyle: cleaned });
                 return;
             }
-            if (next === 'Number') {
-                update({ [opts.field]: opts.fallbackNumber });
-                return;
-            }
-            if (next === 'Column') {
-                const candidate = api.columnApi
-                    .getNumericColumns()
-                    .find((c) => c.columnId !== data.ColumnId);
-                update({ [opts.field]: candidate?.columnId ?? '' });
-                return;
-            }
-            // Col-Min / Col-Max / Col-Avg / Col-Median
             update({ [opts.field]: next });
         };
-        const items = [
-            ...(opts.optional ? [{ value: 'None', label: 'None' }] : []),
-            { value: 'Number', label: BOUND_MODE_LABELS.Number },
-            { value: 'Column', label: BOUND_MODE_LABELS.Column },
-            { value: 'Col-Min', label: BOUND_MODE_LABELS['Col-Min'] },
-            { value: 'Col-Max', label: BOUND_MODE_LABELS['Col-Max'] },
-            { value: 'Col-Avg', label: BOUND_MODE_LABELS['Col-Avg'] },
-            { value: 'Col-Median', label: BOUND_MODE_LABELS['Col-Median'] },
-        ];
-        return (_jsxs(_Fragment, { children: [_jsx(FormRow, { label: `${opts.label}:`, children: _jsx(Box, { className: "twa:max-w-[180px]", children: _jsx(SingleSelect, { className: "twa:w-full", value: mode, onValueChange: (v) => handleModeChange(v), items: items }) }) }), mode === 'Number' && (_jsx(FormRow, { label: `${opts.label} Value:`, children: _jsx(Box, { className: "twa:max-w-[160px]", children: _jsx(AdaptableInput, { type: "number", value: typeof value === 'number' ? value : '', onChange: (e) => update({
-                                [opts.field]: e.target.value === '' ? 0 : Number(e.target.value),
-                            }) }) }) })), mode === 'Column' && (_jsx(FormRow, { label: `${opts.label} Column:`, children: _jsx(Box, { className: "twa:max-w-[220px]", children: _jsx(ColumnSelector, { type: "number", value: typeof value === 'string' ? value : '', onChange: (columnId) => update({ [opts.field]: columnId }), filterColumn: (c) => c.columnId !== data.ColumnId, placeholder: "Select numeric column" }) }) }))] }));
+        return (_jsx(FormRow, { label: `${opts.label}:`, children: _jsx(RangeBarBoundInput, { api: api, value: range[opts.field], optional: opts.optional, fallbackNumber: opts.fallbackNumber, excludeColumnId: data.ColumnId, resolved: resolvedBoundValues, disabled: disabled, onChange: setBound }) }));
     };
     // -- Marker editors --------------------------------------------------------
     const updateValueMarker = (patch) => {
@@ -363,7 +418,7 @@ export const StyledColumnWizardRangeBarSection = (props) => {
     const hasReference = range.Reference != undefined;
     const outOfRangeMode = range.OutOfRangeMode ?? 'Clamp';
     const isRangeVariant = props.variant === 'range';
-    return (_jsxs(Box, { children: [isRangeVariant && (_jsxs(_Fragment, { children: [_jsxs(Card, { shadow: false, className: "twa:mb-3", children: [_jsxs(Card.Title, { children: [_jsx(Box, { className: "twa:font-medium", children: "Bounds" }), _jsx(Box, { className: "twa:text-xs twa:opacity-70 twa:font-normal twa:max-w-[520px]", children: "Set the Min, Max and Reference values for the range bar" })] }), _jsx(Card.Body, { children: _jsxs(FormLayout, { sizes: [...RANGE_STYLE_FORM_SIZES], children: [renderBoundEditor({
+    return (_jsxs(Box, { children: [isRangeVariant && (_jsxs(_Fragment, { children: [_jsxs(Card, { shadow: false, className: "twa:mb-3", children: [_jsxs(Card.Title, { children: [_jsx(Box, { className: "twa:font-medium", children: "Bounds" }), _jsx(Box, { className: "twa:text-xs twa:opacity-70 twa:font-normal twa:max-w-[520px]", children: "Set each row's track scale. A bound can be a fixed number, another column's value (read per row), or a column-wide aggregate (min, max, average, median). Reference is an optional second marker." })] }), _jsx(Card.Body, { children: _jsxs(FormLayout, { sizes: [...RANGE_STYLE_FORM_SIZES], children: [renderBoundEditor({
                                             label: 'Min',
                                             field: 'Min',
                                             optional: false,
@@ -383,15 +438,15 @@ export const StyledColumnWizardRangeBarSection = (props) => {
                                             : 'Optional second marker when a Reference bound is set on the Style step.' })] }), _jsx(Card.Body, { children: hasReference ? (_jsxs(FormLayout, { sizes: [...RANGE_STYLE_FORM_SIZES], children: [_jsx(FormRow, { label: "Shape:", children: _jsx(Box, { className: "twa:max-w-[160px]", children: _jsx(SingleSelect, { className: "twa:w-full", value: referenceMarker.Shape, onValueChange: (s) => updateReferenceMarker({ Shape: s }), items: MARKER_SHAPES.map((s) => ({ value: s.value, label: s.label })) }) }) }), _jsx(FormRow, { label: `${api.internalApi.getCorrectEnglishVariant('Colour')}:`, children: _jsx(ColorPicker, { disabled: disabled, api: api, value: referenceMarker.Color || undefined, onChange: (c) => updateReferenceMarker({ Color: c }) }) }), _jsx(FormRow, { label: "Size:", children: _jsx(Box, { className: "twa:max-w-[100px]", children: _jsx(AdaptableInput, { type: "number", min: 1, value: referenceMarker.Size, onChange: (e) => updateReferenceMarker({ Size: Number(e.target.value) }) }) }) })] })) : (_jsx(Box, { className: "twa:text-xs twa:opacity-60 twa:max-w-[520px]", children: "Add a Reference value on the Style step (Bounds section) to enable this marker (e.g. previous close, target, midpoint)." })) })] }), _jsxs(Card, { shadow: false, className: "twa:mb-3", children: [_jsxs(Card.Title, { children: [_jsx(Box, { className: "twa:font-medium", children: "Track" }), _jsx(Box, { className: "twa:text-xs twa:opacity-70 twa:font-normal twa:max-w-[520px]", children: "The line representing the [Min, Max] interval, plus optional cell background." })] }), _jsx(Card.Body, { children: _jsxs(FormLayout, { sizes: [...RANGE_STYLE_FORM_SIZES], children: [_jsx(FormRow, { label: "Orientation:", children: _jsx(Box, { className: "twa:max-w-[160px]", children: _jsx(SingleSelect, { className: "twa:w-full", value: range.Orientation ?? 'Horizontal', onValueChange: (v) => update({ Orientation: v }), items: [
                                                         { value: 'Horizontal', label: 'Horizontal' },
                                                         { value: 'Vertical', label: 'Vertical' },
-                                                    ] }) }) }), range.Orientation === 'Vertical' && (_jsx(FormRow, { label: "", children: _jsxs(Box, { className: "twa:text-xs twa:text-neutral-500 twa:max-w-[520px]", children: ["Tip: vertical Range Bars need a tall row height to be readable (we recommend at least 60px). Set ", _jsx("code", { children: "rowHeight" }), " on ", _jsx("code", { children: " gridOptions " }), " or use ", _jsx("code", { children: "getRowHeight" }), "."] }) })), _jsx(FormRow, { label: `Track ${api.internalApi.getCorrectEnglishVariant('Colour')}:`, children: _jsxs(Flex, { alignItems: "center", children: [_jsx(CheckBox, { disabled: disabled, checked: !!range.TrackColor, onChange: (checked) => update({ TrackColor: checked ? getGraySwatchColor() : undefined }), className: "twa:mr-2" }), range.TrackColor != undefined && (_jsx(ColorPicker, { disabled: disabled, api: api, value: range.TrackColor, onChange: (c) => update({ TrackColor: c }) }))] }) }), _jsx(FormRow, { label: range.Orientation === 'Vertical' ? 'Track Width (px):' : 'Track Height (px):', children: _jsx(Box, { className: "twa:max-w-[100px]", children: _jsx(AdaptableInput, { type: "number", min: 1, value: range.TrackHeight ?? '', onChange: (e) => update({
+                                                    ] }) }) }), range.Orientation === 'Vertical' && (_jsx(FormRow, { label: "", children: _jsxs(Box, { className: "twa:text-xs twa:text-neutral-500 twa:max-w-[520px]", children: ["Tip: vertical Range Bars need a tall row height to be readable (we recommend at least 60px). Set ", _jsx("code", { children: "rowHeight" }), " on ", _jsx("code", { children: " gridOptions " }), " or use ", _jsx("code", { children: "getRowHeight" }), "."] }) })), _jsx(FormRow, { label: `Track ${api.internalApi.getCorrectEnglishVariant('Colour')}:`, children: _jsx(OptionalColorPicker, { disabled: disabled, api: api, value: range.TrackColor, defaultColor: getGraySwatchColor(), onChange: (c) => updateOptionalColor('TrackColor', c) }) }), _jsx(FormRow, { label: range.Orientation === 'Vertical' ? 'Track Width (px):' : 'Track Height (px):', children: _jsx(Box, { className: "twa:max-w-[100px]", children: _jsx(AdaptableInput, { type: "number", min: 1, value: range.TrackHeight ?? '', onChange: (e) => update({
                                                         TrackHeight: e.target.value === '' ? undefined : Number(e.target.value),
-                                                    }), placeholder: "4" }) }) }), _jsx(FormRow, { label: `Back ${api.internalApi.getCorrectEnglishVariant('Colour')}:`, children: _jsxs(Flex, { alignItems: "center", children: [_jsx(CheckBox, { disabled: disabled, checked: !!range.BackColor, onChange: (checked) => update({ BackColor: checked ? getGraySwatchColor() : null }), className: "twa:mr-2" }), range.BackColor != undefined && (_jsx(ColorPicker, { disabled: disabled, api: api, value: range.BackColor, onChange: (c) => update({ BackColor: c }) }))] }) })] }) })] }), _jsxs(Card, { shadow: false, className: "twa:mb-3", children: [_jsxs(Card.Title, { children: [_jsx(Box, { className: "twa:font-medium", children: "Out of Range" }), _jsx(Box, { className: "twa:text-xs twa:opacity-70 twa:font-normal twa:max-w-[520px]", children: "How to draw the value marker when the cell value falls outside [Min, Max]." })] }), _jsx(Card.Body, { children: _jsxs(FormLayout, { sizes: [...RANGE_STYLE_FORM_SIZES], children: [_jsx(FormRow, { label: "Behaviour:", children: _jsx(Box, { className: "twa:max-w-[160px]", children: _jsx(SingleSelect, { className: "twa:w-full", value: outOfRangeMode, onValueChange: (v) => update({ OutOfRangeMode: v }), items: [
+                                                    }), placeholder: "4" }) }) }), _jsx(FormRow, { label: `Back ${api.internalApi.getCorrectEnglishVariant('Colour')}:`, children: _jsx(OptionalColorPicker, { disabled: disabled, api: api, value: range.BackColor ?? undefined, defaultColor: getGraySwatchColor(), onChange: (c) => updateOptionalColor('BackColor', c) }) })] }) })] }), _jsxs(Card, { shadow: false, className: "twa:mb-3", children: [_jsxs(Card.Title, { children: [_jsx(Box, { className: "twa:font-medium", children: "Out of Range" }), _jsx(Box, { className: "twa:text-xs twa:opacity-70 twa:font-normal twa:max-w-[520px]", children: "How to draw the value marker when the cell value falls outside [Min, Max]." })] }), _jsx(Card.Body, { children: _jsxs(FormLayout, { sizes: [...RANGE_STYLE_FORM_SIZES], children: [_jsx(FormRow, { label: "Behaviour:", children: _jsx(Box, { className: "twa:max-w-[160px]", children: _jsx(SingleSelect, { className: "twa:w-full", value: outOfRangeMode, onValueChange: (v) => update({ OutOfRangeMode: v }), items: [
                                                         { value: 'Clamp', label: 'Clamp to edge' },
                                                         { value: 'Overflow', label: 'Show outside' },
                                                         { value: 'Hide', label: 'Hide marker' },
-                                                    ] }) }) }), outOfRangeMode === 'Clamp' && (_jsx(FormRow, { label: `Out-of-range ${api.internalApi.getCorrectEnglishVariant('Colour')}:`, children: _jsxs(Flex, { alignItems: "center", children: [_jsx(CheckBox, { disabled: disabled, checked: !!range.OutOfRangeColor, onChange: (checked) => update({ OutOfRangeColor: checked ? 'crimson' : undefined }), className: "twa:mr-2" }), range.OutOfRangeColor != undefined && (_jsx(ColorPicker, { disabled: disabled, api: api, value: range.OutOfRangeColor, onChange: (c) => update({ OutOfRangeColor: c }) }))] }) }))] }) })] }), _jsxs(Card, { shadow: false, children: [_jsxs(Card.Title, { children: [_jsx(Box, { className: "twa:font-medium", children: "Text & Tooltip" }), _jsx(Box, { className: "twa:text-xs twa:opacity-70 twa:font-normal twa:max-w-[520px]", children: "Optional cell-text overlay and AG Grid tooltip content." })] }), _jsx(Card.Body, { children: _jsxs(FormLayout, { sizes: [...RANGE_STYLE_FORM_SIZES], children: [_jsxs(FormRow, { label: "Cell Display:", children: [_jsx(CheckBox, { disabled: disabled, checked: range.CellText?.includes('CellValue'), onChange: (checked) => toggleCellText('CellValue', checked), children: "Cell Value" }), ' ', _jsx(CheckBox, { disabled: disabled, className: "twa:ml-3", checked: range.CellText?.includes('PercentageValue'), onChange: (checked) => toggleCellText('PercentageValue', checked), children: "Percent Value" })] }), _jsx(FormRow, { label: "Cell Display Position:", children: _jsx(DropdownButton, { disabled: ArrayExtensions.IsNullOrEmpty(range.CellText) || disabled, columns: ['label'], items: [
-                                                    { label: 'Above Bar', onClick: () => handleCellTextPositionChange('Above') },
-                                                    { label: 'Below Bar', onClick: () => handleCellTextPositionChange('Below') },
-                                                    { label: 'Merged', onClick: () => handleCellTextPositionChange('Merged') },
-                                                ], children: range.CellTextPosition ?? 'Below' }) }), _jsxs(FormRow, { label: "Tooltip Display:", children: [_jsx(CheckBox, { disabled: disabled, checked: range.ToolTipText?.includes('CellValue'), onChange: (checked) => toggleToolTipText('CellValue', checked), children: "Cell Value" }), ' ', _jsx(CheckBox, { disabled: disabled, className: "twa:ml-3", checked: range.ToolTipText?.includes('PercentageValue'), onChange: (checked) => toggleToolTipText('PercentageValue', checked), children: "Percent Value" })] })] }) })] }), _jsx(StyledColumnRangeBarPreviewCard, { data: data })] }))] }));
+                                                    ] }) }) }), outOfRangeMode === 'Clamp' && (_jsx(FormRow, { label: `Out-of-range ${api.internalApi.getCorrectEnglishVariant('Colour')}:`, children: _jsx(OptionalColorPicker, { disabled: disabled, api: api, value: range.OutOfRangeColor, defaultColor: "crimson", onChange: (c) => updateOptionalColor('OutOfRangeColor', c) }) }))] }) })] }), _jsxs(Card, { shadow: false, children: [_jsxs(Card.Title, { children: [_jsx(Box, { className: "twa:font-medium", children: "Text & Tooltip" }), _jsx(Box, { className: "twa:text-xs twa:opacity-70 twa:font-normal twa:max-w-[520px]", children: "Optional cell-text overlay and AG Grid tooltip content." })] }), _jsx(Card.Body, { children: _jsxs(FormLayout, { sizes: [...RANGE_STYLE_FORM_SIZES], children: [_jsxs(FormRow, { label: "Cell Display:", children: [_jsx(CheckBox, { disabled: disabled, checked: range.CellText?.includes('CellValue'), onChange: (checked) => toggleCellText('CellValue', checked), children: "Cell Value" }), ' ', _jsx(CheckBox, { disabled: disabled, className: "twa:ml-3", checked: range.CellText?.includes('PercentageValue'), onChange: (checked) => toggleCellText('PercentageValue', checked), children: "Percent Value" })] }), _jsx(FormRow, { label: "Cell Display Position:", children: _jsx(Box, { className: "twa:max-w-[160px]", children: _jsx(SingleSelect, { className: "twa:w-full", disabled: ArrayExtensions.IsNullOrEmpty(range.CellText) || disabled, value: range.CellTextPosition ?? 'Below', onValueChange: (v) => handleCellTextPositionChange(v), items: [
+                                                        { value: 'Above', label: 'Above Bar' },
+                                                        { value: 'Below', label: 'Below Bar' },
+                                                        { value: 'Merged', label: 'Merged' },
+                                                    ] }) }) }), _jsxs(FormRow, { label: "Tooltip Display:", children: [_jsx(CheckBox, { disabled: disabled, checked: range.ToolTipText?.includes('CellValue'), onChange: (checked) => toggleToolTipText('CellValue', checked), children: "Cell Value" }), ' ', _jsx(CheckBox, { disabled: disabled, className: "twa:ml-3", checked: range.ToolTipText?.includes('PercentageValue'), onChange: (checked) => toggleToolTipText('PercentageValue', checked), children: "Percent Value" })] })] }) })] }), _jsx(StyledColumnRangeBarPreviewCard, { data: data })] }))] }));
 };

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

@@ -10,6 +10,7 @@ import { SingleSelect } from '../../../components/NewSelect';
 import Input from '../../../components/Input';
 import { getCellBoxStyleSummaryItems, StyledColumnCellStyleEditor, } from './StyledColumnSliceStyleEditors';
 import { Card } from '../../../components/Card';
+import { renderSummaryStringTags } from '../../Wizard/SummaryColorTag';
 import { DEFAULT_RATING_GAP, DEFAULT_RATING_ICON, DEFAULT_RATING_MAX, DEFAULT_RATING_SIZE, StyledColumnRatingPreviewCard, } from './StyledColumnWizardStyleSection/Components/StyledColumnRatingPreview';
 const STYLE_FORM_SIZES = ['200px', '1fr'];
 const ICON_CHOICES = [
@@ -113,7 +114,7 @@ export const renderStyledColumnRatingSummary = (data) => {
     const items = buildStyledColumnRatingStyleSummaryStrings(rating, {
         includeEmptyTooltip: true,
     });
-    return (_jsx(Flex, { alignItems: "center", className: "twa:flex-wrap twa:gap-2", children: items.map((item) => (_jsx(Tag, { children: item }, item))) }));
+    return renderSummaryStringTags(items);
 };
 export const isValidRatingStyle = (data) => {
     const rating = data.RatingStyle;

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

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { StyledColumn } from '../../../AdaptableState/StyledColumnState';
 import type { AdaptableApi } from '../../../types';
-export declare const renderStyledColumnScopeSummary: (data: StyledColumn) => React.JSX.Element;
+export declare const renderStyledColumnScopeSummary: (data: StyledColumn, api: AdaptableApi) => React.JSX.Element;
 /** Used by the styled column list view (one-line "Rows: Data, Group, …"). */
 export declare const collectIncludedRowKindLabels: (styledColumn: StyledColumn) => string[];
 export declare const isValidStyledColumnScope: (data: StyledColumn, api: AdaptableApi) => true | string;

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

@@ -1,14 +1,14 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import * as React from 'react';
-import { Tag } from '../../../components/Tag';
+import { ColumnTag, 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 { cn } from '../../../lib/utils';
 import { getStyledColumnRowKindDisabledReason, isStyledColumnRowKindSupported, sanitizeStyledColumnRowScope, STYLED_COLUMN_ROW_KIND_EXCLUDE_KEY, STYLED_COLUMN_ROW_KINDS, } from '../../../Utilities/Helpers/styledColumnRowKindSupport';
 import { isUnsupportedColumnDataTypeForIconStyle } from '../../../Utilities/Helpers/iconStyledColumnColumnSupport';
+import { CollapsibleWizardCard, CollapsibleWizardValueSummary, getWizardAccordionSectionClassName, renderCompactColumnTags, useWizardCardAccordion, } from '../../Wizard/CollapsibleWizardCard';
 // ---------------------------------------------------------------------------
 // Row-kind helpers
 // ---------------------------------------------------------------------------
@@ -24,10 +24,10 @@ import { isUnsupportedColumnDataTypeForIconStyle } from '../../../Utilities/Help
  *    (e.g. Sparkline → data rows only).
  */
 const ROW_KIND_LABELS = {
-    Data: 'Data (leaf) rows',
-    Group: 'Group rows',
-    Summary: 'Summary rows',
-    Total: 'Total rows',
+    Data: 'Data (leaf) Rows',
+    Group: 'Group Rows',
+    Summary: 'Summary Rows',
+    Total: 'Total Rows',
 };
 const defaultRowKindIncluded = (styledColumn, kind) => {
     if (styledColumn.BadgeStyle) {
@@ -36,22 +36,14 @@ const defaultRowKindIncluded = (styledColumn, kind) => {
     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);
@@ -62,8 +54,7 @@ const collectIncludedRowKinds = (styledColumn) => {
 // ---------------------------------------------------------------------------
 // Summary
 // ---------------------------------------------------------------------------
-export const renderStyledColumnScopeSummary = (data) => {
-    const { api } = useOnePageAdaptableWizardContext();
+export const renderStyledColumnScopeSummary = (data, api) => {
     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
@@ -72,6 +63,15 @@ export const renderStyledColumnScopeSummary = (data) => {
 };
 /** Used by the styled column list view (one-line "Rows: Data, Group, …"). */
 export const collectIncludedRowKindLabels = (styledColumn) => collectIncludedRowKinds(styledColumn);
+const StyledColumnColumnScopeSummary = ({ data, }) => {
+    const { api } = useOnePageAdaptableWizardContext();
+    return (_jsx(CollapsibleWizardValueSummary, { value: data.ColumnId ? (_jsx(ColumnTag, { children: api.columnApi.getFriendlyNameForColumnId(data.ColumnId) })) : (_jsx(Tag, { children: "No column selected" })) }));
+};
+const StyledColumnRowsScopeSummary = ({ data, }) => {
+    const includedKinds = collectIncludedRowKinds(data);
+    const allKinds = includedKinds.length === 4;
+    return (_jsx(CollapsibleWizardValueSummary, { value: allKinds ? (_jsx(Tag, { children: "All" })) : includedKinds.length === 0 ? (_jsx(Tag, { children: "None" })) : (_jsx(Flex, { flexWrap: "wrap", className: "twa:gap-1", children: includedKinds.map((kind) => (_jsx(Tag, { children: ROW_KIND_LABELS[kind] }, kind))) })) }));
+};
 // ---------------------------------------------------------------------------
 // Validity
 // ---------------------------------------------------------------------------
@@ -88,10 +88,13 @@ export const isValidStyledColumnScope = (data, api) => {
     }
     return true;
 };
+const StyledColumnRowScopePanel = ({ data, onRowKindChange, }) => (_jsx(Flex, { flexDirection: "column", className: "twa:items-start twa:px-1 twa:py-1", style: { rowGap: 'calc(var(--ab-base-space) * 2)' }, children: STYLED_COLUMN_ROW_KINDS.map((kind) => {
+        const supported = isStyledColumnRowKindSupported(data, kind);
+        const disabledReason = getStyledColumnRowKindDisabledReason(data, kind);
+        return (_jsx(CheckBox, { "data-name": `include-${kind.toLowerCase()}-rows-checkbox`, disabled: !supported, title: disabledReason, checked: isRowKindIncluded(data, kind), onChange: (checked) => onRowKindChange(kind, checked), children: ROW_KIND_LABELS[kind] }, kind));
+    }) }));
 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) {
@@ -116,8 +119,6 @@ export const StyledColumnWizardScopeSection = (props) => {
         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;
@@ -130,9 +131,6 @@ export const StyledColumnWizardScopeSection = (props) => {
             });
         }
     }, [data.Uuid, data.IconStyle, data.ColumnId]);
-    // -------------------------------------------------------------------------
-    // Column picker
-    // -------------------------------------------------------------------------
     const sortableCols = React.useMemo(() => {
         let sortableColumns = [];
         if (data.SparklineStyle) {
@@ -153,7 +151,6 @@ export const StyledColumnWizardScopeSection = (props) => {
             ];
         }
         else {
-            // Gradient / PercentBar / BulletChart / Rating / RangeBar - numeric only.
             sortableColumns = api.columnApi.getNumericColumns();
         }
         const styledColumns = api.styledColumnApi.getStyledColumns();
@@ -166,7 +163,7 @@ export const StyledColumnWizardScopeSection = (props) => {
         })
             .filter(Boolean);
         return sortableColumns.filter((column) => usedColumnIds.every((usedColumnId) => column.columnId !== usedColumnId));
-    }, [data]);
+    }, [data, api]);
     const handleColumnsChange = (columnIds) => {
         const columnId = columnIds[0];
         const emptyRanges = api.columnScopeApi.createCellColorRangesForScope({
@@ -196,19 +193,10 @@ export const StyledColumnWizardScopeSection = (props) => {
         }
         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'),
@@ -224,15 +212,13 @@ export const StyledColumnWizardScopeSection = (props) => {
             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-foreground/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-foreground/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))) })] })] }));
+    const includedRowKinds = collectIncludedRowKinds(data);
+    const allRowKindsIncluded = includedRowKinds.length === 4;
+    const initialExpandedCardId = data.ColumnId ? null : 'column';
+    const { bindCard, hasExpandedCard, expandedFillsSpace } = useWizardCardAccordion(initialExpandedCardId, { fillExpandedCard: true });
+    const columnCompactSummary = data.ColumnId
+        ? renderCompactColumnTags([data.ColumnId], (columnId) => api.columnApi.getFriendlyNameForColumnId(columnId), { emptyLabel: 'No column' })
+        : _jsx(Tag, { children: "No column" });
+    const rowsCompactSummary = allRowKindsIncluded ? (_jsx(Tag, { children: "All" })) : includedRowKinds.length === 0 ? (_jsx(Tag, { children: "None" })) : (_jsx(Flex, { alignItems: "center", className: "twa:gap-1 twa:min-w-0 twa:overflow-hidden", children: includedRowKinds.map((kind) => (_jsx(Tag, { className: "twa:shrink-0", children: kind }, kind))) }));
+    return (_jsxs(Box, { className: cn(getWizardAccordionSectionClassName(hasExpandedCard, expandedFillsSpace), 'twa:p-2'), children: [_jsx(CollapsibleWizardCard, { ...bindCard('column', { fillAvailable: true }), surface: "panel", "data-name": "styled-column-scope-column", title: "Column", help: "Select Column the Style is applied to", collapsedHelp: "Column the Style is applied to", compactSummary: columnCompactSummary, summary: _jsx(StyledColumnColumnScopeSummary, { data: data }), className: "twa:overflow-hidden twa:flex twa:flex-col", bodyClassName: "twa:min-h-[200px] twa:max-h-[420px] twa:overflow-hidden twa:flex twa:flex-col twa:!pt-0 twa:!pb-0 twa:px-1", children: _jsx(Box, { className: "twa:flex-1 twa:min-h-0 twa:overflow-hidden twa:h-full twa:px-1 twa:pb-1 twa:flex twa:flex-col", children: _jsx(NewColumnSelector, { compactColumnList: true, availableColumns: sortableCols, selected: data.ColumnId ? [data.ColumnId] : [], singleSelect: true, onChange: handleColumnsChange, allowReorder: false }) }) }), _jsx(CollapsibleWizardCard, { ...bindCard('rows'), surface: "panel", "data-name": "styled-column-scope-rows", title: "Rows", help: "Select which kinds of Rows the Styled Column will render on", collapsedHelp: "Row kinds the Styled Column renders on", compactSummary: rowsCompactSummary, summary: _jsx(StyledColumnRowsScopeSummary, { data: data }), children: _jsx(StyledColumnRowScopePanel, { data: data, onRowKindChange: handleRowKindChange }) })] }));
 };

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

@@ -3,7 +3,7 @@ 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 { OptionalColorPicker } from '../../../../components/ColorPicker';
 import { getGraySwatchColor } from '../../../UIHelper';
 import { useOnePageAdaptableWizardContext } from '../../../Wizard/OnePageAdaptableWizard';
 import ArrayExtensions from '../../../../Utilities/Extensions/ArrayExtensions';
@@ -12,6 +12,7 @@ import Radio, { RadioGroup } from '../../../../components/Radio';
 import { Toggle, ToggleGroup } from '../../../../components/Toggle';
 import { getCellFontStyleSummaryItems, StyledColumnFontStyleEditor, } from '../StyledColumnSliceStyleEditors';
 import { Card } from '../../../../components/Card';
+import { renderSummaryStringTags } from '../../../Wizard/SummaryColorTag';
 import { StyledColumnPercentBarPreviewCard } from './Components/StyledColumnPercentBarPreview';
 // Re-export the Ranges section + summary for legacy import paths.
 export { renderStyledColumnRangesSummary, StyledColumnWizardRangesSection, } from './StyledColumnWizardRangesSection';
@@ -81,7 +82,7 @@ export const renderStyledColumnStyleSummary = (data, _api) => {
         includeEmptyCellText: true,
         includeEmptyTooltip: true,
     });
-    return (_jsx(Flex, { alignItems: "center", className: "twa:flex-wrap twa:gap-2", children: items.map((item) => (_jsx(Tag, { children: item }, item))) }));
+    return renderSummaryStringTags(items);
 };
 // Legacy wrapper kept for any external consumers; safe no-op here.
 export const renderFormatColumnStyleWizardSummary = (data) => {
@@ -173,10 +174,14 @@ export const StyledColumnWizardStyleSection = (props) => {
             },
         });
     };
-    const onUseBackColorChanged = (checked) => {
-        update({ BackColor: checked ? getGraySwatchColor() : null });
+    const onBackColorChange = (color) => {
+        if (color) {
+            update({ BackColor: color });
+            return;
+        }
+        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 currentOrigin = typeof pb.Origin === 'number'
@@ -193,5 +198,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 }))] }) })] }) })] }), _jsx(StyledColumnPercentBarPreviewCard, { data: data })] }));
+                                    } }) })] })] }), _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 }) })] }) })] }), _jsx(StyledColumnPercentBarPreviewCard, { data: data })] }));
 };