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

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

@@ -8,12 +8,12 @@ const CheckBox_1 = require("../../../components/CheckBox");
 const ErrorBox_1 = tslib_1.__importDefault(require("../../../components/ErrorBox"));
 const FormLayout_1 = tslib_1.__importStar(require("../../../components/FormLayout"));
 const Tag_1 = require("../../../components/Tag");
+const InputGroup_1 = require("../../../components/InputGroup");
 const ColorPicker_1 = require("../../../components/ColorPicker");
 const RangesComponent_1 = require("../../Components/RangesComponent");
 const ColumnSelector_1 = require("../../Components/Selectors/ColumnSelector");
 const UIHelper_1 = require("../../UIHelper");
 const OnePageAdaptableWizard_1 = require("../../Wizard/OnePageAdaptableWizard");
-const DropdownButton_1 = tslib_1.__importDefault(require("../../../components/DropdownButton"));
 const ArrayExtensions_1 = tslib_1.__importDefault(require("../../../Utilities/Extensions/ArrayExtensions"));
 const AdaptableInput_1 = tslib_1.__importDefault(require("../../Components/AdaptableInput"));
 const Flex_1 = require("../../../components/Flex");
@@ -21,6 +21,7 @@ const NewSelect_1 = require("../../../components/NewSelect");
 const RangeBarRangesSummaryPreview_1 = require("./StyledColumnWizardStyleSection/Components/RangeBarRangesSummaryPreview");
 const StyledColumnRangeBarPreview_1 = require("./StyledColumnWizardStyleSection/Components/StyledColumnRangeBarPreview");
 const Card_1 = require("../../../components/Card");
+const SummaryColorTag_1 = require("../../Wizard/SummaryColorTag");
 const RANGE_STYLE_FORM_SIZES = ['200px', '1fr'];
 const BOUND_MODE_LABELS = {
     Number: 'Fixed Number',
@@ -50,6 +51,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 = ((0, jsx_runtime_1.jsx)(AdaptableInput_1.default, { 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 = ((0, jsx_runtime_1.jsx)(ColumnSelector_1.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 = ((0, jsx_runtime_1.jsx)(AdaptableInput_1.default, { 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 ((0, jsx_runtime_1.jsxs)(InputGroup_1.InputGroup, { Component: Flex_1.Flex, className: "twa:items-stretch twa:max-w-[22rem]", children: [(0, jsx_runtime_1.jsx)(NewSelect_1.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 && (0, jsx_runtime_1.jsx)(Flex_1.Box, { className: editorWrapperClassName, children: editor })] }));
+};
 const formatRangeBarCellTextSummary = (cellText) => cellText
     ?.map((t) => (t === 'CellValue' ? 'Cell Value' : 'Percent Value'))
     .join(' + ') ?? '';
@@ -150,7 +211,7 @@ const renderStyledColumnRangeBarRangeStepSummary = (data) => {
         return (0, jsx_runtime_1.jsx)(Tag_1.Tag, { children: "No Styling Defined" });
     }
     const tagItems = (0, exports.getStyledColumnRangeBarRangeViewValues)(data);
-    return ((0, jsx_runtime_1.jsxs)(Flex_1.Flex, { flexDirection: "column", className: "twa:gap-2 twa:items-start", children: [(0, jsx_runtime_1.jsx)(Flex_1.Flex, { alignItems: "center", className: "twa:flex-wrap twa:gap-2", children: tagItems.map((item) => ((0, jsx_runtime_1.jsx)(Tag_1.Tag, { children: item }, item))) }), (0, jsx_runtime_1.jsx)(RangeBarRangesSummaryPreview_1.RangeBarRangesSummaryPreview, { rangeStyle: range })] }));
+    return ((0, jsx_runtime_1.jsxs)(Flex_1.Flex, { flexDirection: "column", className: "twa:gap-2 twa:items-start", children: [(0, SummaryColorTag_1.renderSummaryStringTags)(tagItems), (0, jsx_runtime_1.jsx)(RangeBarRangesSummaryPreview_1.RangeBarRangesSummaryPreview, { rangeStyle: range })] }));
 };
 exports.renderStyledColumnRangeBarRangeStepSummary = renderStyledColumnRangeBarRangeStepSummary;
 const StyledColumnRangeBarRangeView = ({ data }) => (0, exports.renderStyledColumnRangeBarRangeStepSummary)(data);
@@ -168,7 +229,7 @@ const renderStyledColumnRangeBarDisplayStepSummary = (data) => {
     if (!items.length) {
         return (0, jsx_runtime_1.jsx)(Tag_1.Tag, { children: "No Display Defined" });
     }
-    return ((0, jsx_runtime_1.jsx)(Flex_1.Flex, { alignItems: "center", className: "twa:flex-wrap twa:gap-2", children: items.map((item) => ((0, jsx_runtime_1.jsx)(Tag_1.Tag, { children: item }, item))) }));
+    return (0, SummaryColorTag_1.renderSummaryStringTags)(items);
 };
 exports.renderStyledColumnRangeBarDisplayStepSummary = renderStyledColumnRangeBarDisplayStepSummary;
 /**
@@ -271,48 +332,42 @@ 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 ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(FormLayout_1.FormRow, { label: `${opts.label}:`, children: (0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:max-w-[180px]", children: (0, jsx_runtime_1.jsx)(NewSelect_1.SingleSelect, { className: "twa:w-full", value: mode, onValueChange: (v) => handleModeChange(v), items: items }) }) }), mode === 'Number' && ((0, jsx_runtime_1.jsx)(FormLayout_1.FormRow, { label: `${opts.label} Value:`, children: (0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:max-w-[160px]", children: (0, jsx_runtime_1.jsx)(AdaptableInput_1.default, { type: "number", value: typeof value === 'number' ? value : '', onChange: (e) => update({
-                                [opts.field]: e.target.value === '' ? 0 : Number(e.target.value),
-                            }) }) }) })), mode === 'Column' && ((0, jsx_runtime_1.jsx)(FormLayout_1.FormRow, { label: `${opts.label} Column:`, children: (0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:max-w-[220px]", children: (0, jsx_runtime_1.jsx)(ColumnSelector_1.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 ((0, jsx_runtime_1.jsx)(FormLayout_1.FormRow, { label: `${opts.label}:`, children: (0, jsx_runtime_1.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) => {
@@ -374,7 +429,7 @@ const StyledColumnWizardRangeBarSection = (props) => {
     const hasReference = range.Reference != undefined;
     const outOfRangeMode = range.OutOfRangeMode ?? 'Clamp';
     const isRangeVariant = props.variant === 'range';
-    return ((0, jsx_runtime_1.jsxs)(Flex_1.Box, { children: [isRangeVariant && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)(Card_1.Card, { shadow: false, className: "twa:mb-3", children: [(0, jsx_runtime_1.jsxs)(Card_1.Card.Title, { children: [(0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:font-medium", children: "Bounds" }), (0, jsx_runtime_1.jsx)(Flex_1.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" })] }), (0, jsx_runtime_1.jsx)(Card_1.Card.Body, { children: (0, jsx_runtime_1.jsxs)(FormLayout_1.default, { sizes: [...RANGE_STYLE_FORM_SIZES], children: [renderBoundEditor({
+    return ((0, jsx_runtime_1.jsxs)(Flex_1.Box, { children: [isRangeVariant && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)(Card_1.Card, { shadow: false, className: "twa:mb-3", children: [(0, jsx_runtime_1.jsxs)(Card_1.Card.Title, { children: [(0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:font-medium", children: "Bounds" }), (0, jsx_runtime_1.jsx)(Flex_1.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." })] }), (0, jsx_runtime_1.jsx)(Card_1.Card.Body, { children: (0, jsx_runtime_1.jsxs)(FormLayout_1.default, { sizes: [...RANGE_STYLE_FORM_SIZES], children: [renderBoundEditor({
                                             label: 'Min',
                                             field: 'Min',
                                             optional: false,
@@ -394,16 +449,16 @@ const StyledColumnWizardRangeBarSection = (props) => {
                                             : 'Optional second marker when a Reference bound is set on the Style step.' })] }), (0, jsx_runtime_1.jsx)(Card_1.Card.Body, { children: hasReference ? ((0, jsx_runtime_1.jsxs)(FormLayout_1.default, { sizes: [...RANGE_STYLE_FORM_SIZES], children: [(0, jsx_runtime_1.jsx)(FormLayout_1.FormRow, { label: "Shape:", children: (0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:max-w-[160px]", children: (0, jsx_runtime_1.jsx)(NewSelect_1.SingleSelect, { className: "twa:w-full", value: referenceMarker.Shape, onValueChange: (s) => updateReferenceMarker({ Shape: s }), items: MARKER_SHAPES.map((s) => ({ value: s.value, label: s.label })) }) }) }), (0, jsx_runtime_1.jsx)(FormLayout_1.FormRow, { label: `${api.internalApi.getCorrectEnglishVariant('Colour')}:`, children: (0, jsx_runtime_1.jsx)(ColorPicker_1.ColorPicker, { disabled: disabled, api: api, value: referenceMarker.Color || undefined, onChange: (c) => updateReferenceMarker({ Color: c }) }) }), (0, jsx_runtime_1.jsx)(FormLayout_1.FormRow, { label: "Size:", children: (0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:max-w-[100px]", children: (0, jsx_runtime_1.jsx)(AdaptableInput_1.default, { type: "number", min: 1, value: referenceMarker.Size, onChange: (e) => updateReferenceMarker({ Size: Number(e.target.value) }) }) }) })] })) : ((0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:text-xs twa:opacity-60 twa:max-w-[520px]", children: "Add a Reference value on the Style step (Bounds section) to enable this marker (e.g. previous close, target, midpoint)." })) })] }), (0, jsx_runtime_1.jsxs)(Card_1.Card, { shadow: false, className: "twa:mb-3", children: [(0, jsx_runtime_1.jsxs)(Card_1.Card.Title, { children: [(0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:font-medium", children: "Track" }), (0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:text-xs twa:opacity-70 twa:font-normal twa:max-w-[520px]", children: "The line representing the [Min, Max] interval, plus optional cell background." })] }), (0, jsx_runtime_1.jsx)(Card_1.Card.Body, { children: (0, jsx_runtime_1.jsxs)(FormLayout_1.default, { sizes: [...RANGE_STYLE_FORM_SIZES], children: [(0, jsx_runtime_1.jsx)(FormLayout_1.FormRow, { label: "Orientation:", children: (0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:max-w-[160px]", children: (0, jsx_runtime_1.jsx)(NewSelect_1.SingleSelect, { className: "twa:w-full", value: range.Orientation ?? 'Horizontal', onValueChange: (v) => update({ Orientation: v }), items: [
                                                         { value: 'Horizontal', label: 'Horizontal' },
                                                         { value: 'Vertical', label: 'Vertical' },
-                                                    ] }) }) }), range.Orientation === 'Vertical' && ((0, jsx_runtime_1.jsx)(FormLayout_1.FormRow, { label: "", children: (0, jsx_runtime_1.jsxs)(Flex_1.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 ", (0, jsx_runtime_1.jsx)("code", { children: "rowHeight" }), " on ", (0, jsx_runtime_1.jsx)("code", { children: " gridOptions " }), " or use ", (0, jsx_runtime_1.jsx)("code", { children: "getRowHeight" }), "."] }) })), (0, jsx_runtime_1.jsx)(FormLayout_1.FormRow, { label: `Track ${api.internalApi.getCorrectEnglishVariant('Colour')}:`, children: (0, jsx_runtime_1.jsxs)(Flex_1.Flex, { alignItems: "center", children: [(0, jsx_runtime_1.jsx)(CheckBox_1.CheckBox, { disabled: disabled, checked: !!range.TrackColor, onChange: (checked) => update({ TrackColor: checked ? (0, UIHelper_1.getGraySwatchColor)() : undefined }), className: "twa:mr-2" }), range.TrackColor != undefined && ((0, jsx_runtime_1.jsx)(ColorPicker_1.ColorPicker, { disabled: disabled, api: api, value: range.TrackColor, onChange: (c) => update({ TrackColor: c }) }))] }) }), (0, jsx_runtime_1.jsx)(FormLayout_1.FormRow, { label: range.Orientation === 'Vertical' ? 'Track Width (px):' : 'Track Height (px):', children: (0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:max-w-[100px]", children: (0, jsx_runtime_1.jsx)(AdaptableInput_1.default, { type: "number", min: 1, value: range.TrackHeight ?? '', onChange: (e) => update({
+                                                    ] }) }) }), range.Orientation === 'Vertical' && ((0, jsx_runtime_1.jsx)(FormLayout_1.FormRow, { label: "", children: (0, jsx_runtime_1.jsxs)(Flex_1.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 ", (0, jsx_runtime_1.jsx)("code", { children: "rowHeight" }), " on ", (0, jsx_runtime_1.jsx)("code", { children: " gridOptions " }), " or use ", (0, jsx_runtime_1.jsx)("code", { children: "getRowHeight" }), "."] }) })), (0, jsx_runtime_1.jsx)(FormLayout_1.FormRow, { label: `Track ${api.internalApi.getCorrectEnglishVariant('Colour')}:`, children: (0, jsx_runtime_1.jsx)(ColorPicker_1.OptionalColorPicker, { disabled: disabled, api: api, value: range.TrackColor, defaultColor: (0, UIHelper_1.getGraySwatchColor)(), onChange: (c) => updateOptionalColor('TrackColor', c) }) }), (0, jsx_runtime_1.jsx)(FormLayout_1.FormRow, { label: range.Orientation === 'Vertical' ? 'Track Width (px):' : 'Track Height (px):', children: (0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:max-w-[100px]", children: (0, jsx_runtime_1.jsx)(AdaptableInput_1.default, { type: "number", min: 1, value: range.TrackHeight ?? '', onChange: (e) => update({
                                                         TrackHeight: e.target.value === '' ? undefined : Number(e.target.value),
-                                                    }), placeholder: "4" }) }) }), (0, jsx_runtime_1.jsx)(FormLayout_1.FormRow, { label: `Back ${api.internalApi.getCorrectEnglishVariant('Colour')}:`, children: (0, jsx_runtime_1.jsxs)(Flex_1.Flex, { alignItems: "center", children: [(0, jsx_runtime_1.jsx)(CheckBox_1.CheckBox, { disabled: disabled, checked: !!range.BackColor, onChange: (checked) => update({ BackColor: checked ? (0, UIHelper_1.getGraySwatchColor)() : null }), className: "twa:mr-2" }), range.BackColor != undefined && ((0, jsx_runtime_1.jsx)(ColorPicker_1.ColorPicker, { disabled: disabled, api: api, value: range.BackColor, onChange: (c) => update({ BackColor: c }) }))] }) })] }) })] }), (0, jsx_runtime_1.jsxs)(Card_1.Card, { shadow: false, className: "twa:mb-3", children: [(0, jsx_runtime_1.jsxs)(Card_1.Card.Title, { children: [(0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:font-medium", children: "Out of Range" }), (0, jsx_runtime_1.jsx)(Flex_1.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]." })] }), (0, jsx_runtime_1.jsx)(Card_1.Card.Body, { children: (0, jsx_runtime_1.jsxs)(FormLayout_1.default, { sizes: [...RANGE_STYLE_FORM_SIZES], children: [(0, jsx_runtime_1.jsx)(FormLayout_1.FormRow, { label: "Behaviour:", children: (0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:max-w-[160px]", children: (0, jsx_runtime_1.jsx)(NewSelect_1.SingleSelect, { className: "twa:w-full", value: outOfRangeMode, onValueChange: (v) => update({ OutOfRangeMode: v }), items: [
+                                                    }), placeholder: "4" }) }) }), (0, jsx_runtime_1.jsx)(FormLayout_1.FormRow, { label: `Back ${api.internalApi.getCorrectEnglishVariant('Colour')}:`, children: (0, jsx_runtime_1.jsx)(ColorPicker_1.OptionalColorPicker, { disabled: disabled, api: api, value: range.BackColor ?? undefined, defaultColor: (0, UIHelper_1.getGraySwatchColor)(), onChange: (c) => updateOptionalColor('BackColor', c) }) })] }) })] }), (0, jsx_runtime_1.jsxs)(Card_1.Card, { shadow: false, className: "twa:mb-3", children: [(0, jsx_runtime_1.jsxs)(Card_1.Card.Title, { children: [(0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:font-medium", children: "Out of Range" }), (0, jsx_runtime_1.jsx)(Flex_1.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]." })] }), (0, jsx_runtime_1.jsx)(Card_1.Card.Body, { children: (0, jsx_runtime_1.jsxs)(FormLayout_1.default, { sizes: [...RANGE_STYLE_FORM_SIZES], children: [(0, jsx_runtime_1.jsx)(FormLayout_1.FormRow, { label: "Behaviour:", children: (0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:max-w-[160px]", children: (0, jsx_runtime_1.jsx)(NewSelect_1.SingleSelect, { className: "twa:w-full", value: 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' && ((0, jsx_runtime_1.jsx)(FormLayout_1.FormRow, { label: `Out-of-range ${api.internalApi.getCorrectEnglishVariant('Colour')}:`, children: (0, jsx_runtime_1.jsxs)(Flex_1.Flex, { alignItems: "center", children: [(0, jsx_runtime_1.jsx)(CheckBox_1.CheckBox, { disabled: disabled, checked: !!range.OutOfRangeColor, onChange: (checked) => update({ OutOfRangeColor: checked ? 'crimson' : undefined }), className: "twa:mr-2" }), range.OutOfRangeColor != undefined && ((0, jsx_runtime_1.jsx)(ColorPicker_1.ColorPicker, { disabled: disabled, api: api, value: range.OutOfRangeColor, onChange: (c) => update({ OutOfRangeColor: c }) }))] }) }))] }) })] }), (0, jsx_runtime_1.jsxs)(Card_1.Card, { shadow: false, children: [(0, jsx_runtime_1.jsxs)(Card_1.Card.Title, { children: [(0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:font-medium", children: "Text & Tooltip" }), (0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:text-xs twa:opacity-70 twa:font-normal twa:max-w-[520px]", children: "Optional cell-text overlay and AG Grid tooltip content." })] }), (0, jsx_runtime_1.jsx)(Card_1.Card.Body, { children: (0, jsx_runtime_1.jsxs)(FormLayout_1.default, { sizes: [...RANGE_STYLE_FORM_SIZES], children: [(0, jsx_runtime_1.jsxs)(FormLayout_1.FormRow, { label: "Cell Display:", children: [(0, jsx_runtime_1.jsx)(CheckBox_1.CheckBox, { disabled: disabled, checked: range.CellText?.includes('CellValue'), onChange: (checked) => toggleCellText('CellValue', checked), children: "Cell Value" }), ' ', (0, jsx_runtime_1.jsx)(CheckBox_1.CheckBox, { disabled: disabled, className: "twa:ml-3", checked: range.CellText?.includes('PercentageValue'), onChange: (checked) => toggleCellText('PercentageValue', checked), children: "Percent Value" })] }), (0, jsx_runtime_1.jsx)(FormLayout_1.FormRow, { label: "Cell Display Position:", children: (0, jsx_runtime_1.jsx)(DropdownButton_1.default, { disabled: ArrayExtensions_1.default.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' }) }), (0, jsx_runtime_1.jsxs)(FormLayout_1.FormRow, { label: "Tooltip Display:", children: [(0, jsx_runtime_1.jsx)(CheckBox_1.CheckBox, { disabled: disabled, checked: range.ToolTipText?.includes('CellValue'), onChange: (checked) => toggleToolTipText('CellValue', checked), children: "Cell Value" }), ' ', (0, jsx_runtime_1.jsx)(CheckBox_1.CheckBox, { disabled: disabled, className: "twa:ml-3", checked: range.ToolTipText?.includes('PercentageValue'), onChange: (checked) => toggleToolTipText('PercentageValue', checked), children: "Percent Value" })] })] }) })] }), (0, jsx_runtime_1.jsx)(StyledColumnRangeBarPreview_1.StyledColumnRangeBarPreviewCard, { data: data })] }))] }));
+                                                    ] }) }) }), outOfRangeMode === 'Clamp' && ((0, jsx_runtime_1.jsx)(FormLayout_1.FormRow, { label: `Out-of-range ${api.internalApi.getCorrectEnglishVariant('Colour')}:`, children: (0, jsx_runtime_1.jsx)(ColorPicker_1.OptionalColorPicker, { disabled: disabled, api: api, value: range.OutOfRangeColor, defaultColor: "crimson", onChange: (c) => updateOptionalColor('OutOfRangeColor', c) }) }))] }) })] }), (0, jsx_runtime_1.jsxs)(Card_1.Card, { shadow: false, children: [(0, jsx_runtime_1.jsxs)(Card_1.Card.Title, { children: [(0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:font-medium", children: "Text & Tooltip" }), (0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:text-xs twa:opacity-70 twa:font-normal twa:max-w-[520px]", children: "Optional cell-text overlay and AG Grid tooltip content." })] }), (0, jsx_runtime_1.jsx)(Card_1.Card.Body, { children: (0, jsx_runtime_1.jsxs)(FormLayout_1.default, { sizes: [...RANGE_STYLE_FORM_SIZES], children: [(0, jsx_runtime_1.jsxs)(FormLayout_1.FormRow, { label: "Cell Display:", children: [(0, jsx_runtime_1.jsx)(CheckBox_1.CheckBox, { disabled: disabled, checked: range.CellText?.includes('CellValue'), onChange: (checked) => toggleCellText('CellValue', checked), children: "Cell Value" }), ' ', (0, jsx_runtime_1.jsx)(CheckBox_1.CheckBox, { disabled: disabled, className: "twa:ml-3", checked: range.CellText?.includes('PercentageValue'), onChange: (checked) => toggleCellText('PercentageValue', checked), children: "Percent Value" })] }), (0, jsx_runtime_1.jsx)(FormLayout_1.FormRow, { label: "Cell Display Position:", children: (0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:max-w-[160px]", children: (0, jsx_runtime_1.jsx)(NewSelect_1.SingleSelect, { className: "twa:w-full", disabled: ArrayExtensions_1.default.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' },
+                                                    ] }) }) }), (0, jsx_runtime_1.jsxs)(FormLayout_1.FormRow, { label: "Tooltip Display:", children: [(0, jsx_runtime_1.jsx)(CheckBox_1.CheckBox, { disabled: disabled, checked: range.ToolTipText?.includes('CellValue'), onChange: (checked) => toggleToolTipText('CellValue', checked), children: "Cell Value" }), ' ', (0, jsx_runtime_1.jsx)(CheckBox_1.CheckBox, { disabled: disabled, className: "twa:ml-3", checked: range.ToolTipText?.includes('PercentageValue'), onChange: (checked) => toggleToolTipText('PercentageValue', checked), children: "Percent Value" })] })] }) })] }), (0, jsx_runtime_1.jsx)(StyledColumnRangeBarPreview_1.StyledColumnRangeBarPreviewCard, { data: data })] }))] }));
 };
 exports.StyledColumnWizardRangeBarSection = StyledColumnWizardRangeBarSection;

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

@@ -14,6 +14,7 @@ const NewSelect_1 = require("../../../components/NewSelect");
 const Input_1 = tslib_1.__importDefault(require("../../../components/Input"));
 const StyledColumnSliceStyleEditors_1 = require("./StyledColumnSliceStyleEditors");
 const Card_1 = require("../../../components/Card");
+const SummaryColorTag_1 = require("../../Wizard/SummaryColorTag");
 const StyledColumnRatingPreview_1 = require("./StyledColumnWizardStyleSection/Components/StyledColumnRatingPreview");
 const STYLE_FORM_SIZES = ['200px', '1fr'];
 const ICON_CHOICES = [
@@ -118,7 +119,7 @@ const renderStyledColumnRatingSummary = (data) => {
     const items = buildStyledColumnRatingStyleSummaryStrings(rating, {
         includeEmptyTooltip: true,
     });
-    return ((0, jsx_runtime_1.jsx)(Flex_1.Flex, { alignItems: "center", className: "twa:flex-wrap twa:gap-2", children: items.map((item) => ((0, jsx_runtime_1.jsx)(Tag_1.Tag, { children: item }, item))) }));
+    return (0, SummaryColorTag_1.renderSummaryStringTags)(items);
 };
 exports.renderStyledColumnRatingSummary = renderStyledColumnRatingSummary;
 const isValidRatingStyle = (data) => {

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

@@ -8,11 +8,11 @@ const Tag_1 = require("../../../components/Tag");
 const ColumnSelector_1 = require("../../Components/ColumnSelector");
 const OnePageAdaptableWizard_1 = require("../../Wizard/OnePageAdaptableWizard");
 const Flex_1 = require("../../../components/Flex");
-const AdaptableFormControlTextClear_1 = require("../../Components/Forms/AdaptableFormControlTextClear");
-const FormLayout_1 = tslib_1.__importStar(require("../../../components/FormLayout"));
 const CheckBox_1 = require("../../../components/CheckBox");
+const utils_1 = require("../../../lib/utils");
 const styledColumnRowKindSupport_1 = require("../../../Utilities/Helpers/styledColumnRowKindSupport");
 const iconStyledColumnColumnSupport_1 = require("../../../Utilities/Helpers/iconStyledColumnColumnSupport");
+const CollapsibleWizardCard_1 = require("../../Wizard/CollapsibleWizardCard");
 // ---------------------------------------------------------------------------
 // Row-kind helpers
 // ---------------------------------------------------------------------------
@@ -28,10 +28,10 @@ const iconStyledColumnColumnSupport_1 = require("../../../Utilities/Helpers/icon
  *    (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) {
@@ -40,22 +40,14 @@ const defaultRowKindIncluded = (styledColumn, kind) => {
     if (!(0, styledColumnRowKindSupport_1.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 (!(0, styledColumnRowKindSupport_1.isStyledColumnRowKindSupported)(styledColumn, kind)) {
         return false;
     }
     const scope = styledColumn.RowScope;
     if (scope) {
-        // Missing flags default to "include" — same semantics as FormatColumn.
         return !scope[styledColumnRowKindSupport_1.STYLED_COLUMN_ROW_KIND_EXCLUDE_KEY[kind]];
     }
     return defaultRowKindIncluded(styledColumn, kind);
@@ -66,8 +58,7 @@ const collectIncludedRowKinds = (styledColumn) => {
 // ---------------------------------------------------------------------------
 // Summary
 // ---------------------------------------------------------------------------
-const renderStyledColumnScopeSummary = (data) => {
-    const { api } = (0, OnePageAdaptableWizard_1.useOnePageAdaptableWizardContext)();
+const renderStyledColumnScopeSummary = (data, api) => {
     const includedKinds = collectIncludedRowKinds(data);
     const allKinds = includedKinds.length === 4;
     return ((0, jsx_runtime_1.jsxs)(Flex_1.Box, { className: "twa:pr-2 twa:py-2", children: [(0, jsx_runtime_1.jsxs)(Flex_1.Box, { className: "twa:mt-1", children: ["Column:", ' ', (0, jsx_runtime_1.jsx)(Tag_1.Tag, { children: data.ColumnId
@@ -78,6 +69,15 @@ exports.renderStyledColumnScopeSummary = renderStyledColumnScopeSummary;
 /** Used by the styled column list view (one-line "Rows: Data, Group, …"). */
 const collectIncludedRowKindLabels = (styledColumn) => collectIncludedRowKinds(styledColumn);
 exports.collectIncludedRowKindLabels = collectIncludedRowKindLabels;
+const StyledColumnColumnScopeSummary = ({ data, }) => {
+    const { api } = (0, OnePageAdaptableWizard_1.useOnePageAdaptableWizardContext)();
+    return ((0, jsx_runtime_1.jsx)(CollapsibleWizardCard_1.CollapsibleWizardValueSummary, { value: data.ColumnId ? ((0, jsx_runtime_1.jsx)(Tag_1.ColumnTag, { children: api.columnApi.getFriendlyNameForColumnId(data.ColumnId) })) : ((0, jsx_runtime_1.jsx)(Tag_1.Tag, { children: "No column selected" })) }));
+};
+const StyledColumnRowsScopeSummary = ({ data, }) => {
+    const includedKinds = collectIncludedRowKinds(data);
+    const allKinds = includedKinds.length === 4;
+    return ((0, jsx_runtime_1.jsx)(CollapsibleWizardCard_1.CollapsibleWizardValueSummary, { value: allKinds ? ((0, jsx_runtime_1.jsx)(Tag_1.Tag, { children: "All" })) : includedKinds.length === 0 ? ((0, jsx_runtime_1.jsx)(Tag_1.Tag, { children: "None" })) : ((0, jsx_runtime_1.jsx)(Flex_1.Flex, { flexWrap: "wrap", className: "twa:gap-1", children: includedKinds.map((kind) => ((0, jsx_runtime_1.jsx)(Tag_1.Tag, { children: ROW_KIND_LABELS[kind] }, kind))) })) }));
+};
 // ---------------------------------------------------------------------------
 // Validity
 // ---------------------------------------------------------------------------
@@ -95,10 +95,13 @@ const isValidStyledColumnScope = (data, api) => {
     return true;
 };
 exports.isValidStyledColumnScope = isValidStyledColumnScope;
+const StyledColumnRowScopePanel = ({ data, onRowKindChange, }) => ((0, jsx_runtime_1.jsx)(Flex_1.Flex, { flexDirection: "column", className: "twa:items-start twa:px-1 twa:py-1", style: { rowGap: 'calc(var(--ab-base-space) * 2)' }, children: styledColumnRowKindSupport_1.STYLED_COLUMN_ROW_KINDS.map((kind) => {
+        const supported = (0, styledColumnRowKindSupport_1.isStyledColumnRowKindSupported)(data, kind);
+        const disabledReason = (0, styledColumnRowKindSupport_1.getStyledColumnRowKindDisabledReason)(data, kind);
+        return ((0, jsx_runtime_1.jsx)(CheckBox_1.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));
+    }) }));
 const StyledColumnWizardScopeSection = (props) => {
     const { data, api } = (0, OnePageAdaptableWizard_1.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 = (0, styledColumnRowKindSupport_1.sanitizeStyledColumnRowScope)(data);
         if (!next) {
@@ -123,8 +126,6 @@ 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;
@@ -137,9 +138,6 @@ const StyledColumnWizardScopeSection = (props) => {
             });
         }
     }, [data.Uuid, data.IconStyle, data.ColumnId]);
-    // -------------------------------------------------------------------------
-    // Column picker
-    // -------------------------------------------------------------------------
     const sortableCols = React.useMemo(() => {
         let sortableColumns = [];
         if (data.SparklineStyle) {
@@ -160,7 +158,6 @@ const StyledColumnWizardScopeSection = (props) => {
             ];
         }
         else {
-            // Gradient / PercentBar / BulletChart / Rating / RangeBar - numeric only.
             sortableColumns = api.columnApi.getNumericColumns();
         }
         const styledColumns = api.styledColumnApi.getStyledColumns();
@@ -173,7 +170,7 @@ 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({
@@ -203,19 +200,10 @@ const StyledColumnWizardScopeSection = (props) => {
         }
         props.onChange(newStyledColumn);
     };
-    const [columnsSearchText, setColumnsSearchText] = React.useState('');
-    // -------------------------------------------------------------------------
-    // Row-kind toggles
-    // -------------------------------------------------------------------------
     const handleRowKindChange = (kind, include) => {
         if (!(0, styledColumnRowKindSupport_1.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'),
@@ -231,16 +219,14 @@ const StyledColumnWizardScopeSection = (props) => {
             RowScope: nextScope,
         });
     };
-    // -------------------------------------------------------------------------
-    // Render
-    // -------------------------------------------------------------------------
-    return ((0, jsx_runtime_1.jsxs)(Flex_1.Flex, { flexDirection: "column", style: { height: '100%' }, children: [(0, jsx_runtime_1.jsxs)(Flex_1.Flex, { flexDirection: "column", className: "twa:flex-1 twa:min-h-0", children: [(0, jsx_runtime_1.jsxs)(Flex_1.Flex, { flexDirection: "row", alignItems: "center", className: "twa:p-2 twa:gap-3 twa:border-b twa:border-b-foreground/20", children: [(0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:text-5 twa:font-medium", children: "Column" }), (0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:text-xs twa:opacity-70", children: "The Column the Style is applied to" }), (0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:flex-1" }), (0, jsx_runtime_1.jsx)(AdaptableFormControlTextClear_1.AdaptableFormControlTextClear, { value: columnsSearchText, OnTextChange: setColumnsSearchText, placeholder: "Type to search columns", style: { flex: 1, maxWidth: 320 } })] }), (0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:flex-1 twa:min-h-0 twa:overflow-auto", children: (0, jsx_runtime_1.jsx)(ColumnSelector_1.NewColumnSelector, { columnFilterText: columnsSearchText, availableColumns: sortableCols, selected: data.ColumnId ? [data.ColumnId] : [], singleSelect: true, onChange: handleColumnsChange, allowReorder: false }) })] }), (0, jsx_runtime_1.jsxs)(Flex_1.Box, { className: "twa:border-t twa:border-border twa:px-2 twa:py-3 twa:shrink-0", children: [(0, jsx_runtime_1.jsxs)(Flex_1.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: [(0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:text-5 twa:font-medium", children: "Rows" }), (0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:text-xs twa:opacity-70 twa:max-w-[520px]", children: "Which kinds of Rows should the Styled Column render on" })] }), (0, jsx_runtime_1.jsx)(Flex_1.Flex, { flexDirection: "row", className: "twa:gap-6 twa:flex-wrap", children: [
-                            styledColumnRowKindSupport_1.STYLED_COLUMN_ROW_KINDS.slice(0, 2),
-                            styledColumnRowKindSupport_1.STYLED_COLUMN_ROW_KINDS.slice(2),
-                        ].map((rowKindGroup, groupIndex) => ((0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:flex-1 twa:min-w-[220px]", children: (0, jsx_runtime_1.jsx)(FormLayout_1.default, { sizes: ['180px', '1fr'], children: rowKindGroup.map((kind) => {
-                                    const supported = (0, styledColumnRowKindSupport_1.isStyledColumnRowKindSupported)(data, kind);
-                                    const disabledReason = (0, styledColumnRowKindSupport_1.getStyledColumnRowKindDisabledReason)(data, kind);
-                                    return ((0, jsx_runtime_1.jsx)(FormLayout_1.FormRow, { label: `${ROW_KIND_LABELS[kind]}:`, children: (0, jsx_runtime_1.jsx)(Flex_1.Flex, { alignItems: "center", className: "twa:ml-2", children: (0, jsx_runtime_1.jsx)(CheckBox_1.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 } = (0, CollapsibleWizardCard_1.useWizardCardAccordion)(initialExpandedCardId, { fillExpandedCard: true });
+    const columnCompactSummary = data.ColumnId
+        ? (0, CollapsibleWizardCard_1.renderCompactColumnTags)([data.ColumnId], (columnId) => api.columnApi.getFriendlyNameForColumnId(columnId), { emptyLabel: 'No column' })
+        : (0, jsx_runtime_1.jsx)(Tag_1.Tag, { children: "No column" });
+    const rowsCompactSummary = allRowKindsIncluded ? ((0, jsx_runtime_1.jsx)(Tag_1.Tag, { children: "All" })) : includedRowKinds.length === 0 ? ((0, jsx_runtime_1.jsx)(Tag_1.Tag, { children: "None" })) : ((0, jsx_runtime_1.jsx)(Flex_1.Flex, { alignItems: "center", className: "twa:gap-1 twa:min-w-0 twa:overflow-hidden", children: includedRowKinds.map((kind) => ((0, jsx_runtime_1.jsx)(Tag_1.Tag, { className: "twa:shrink-0", children: kind }, kind))) }));
+    return ((0, jsx_runtime_1.jsxs)(Flex_1.Box, { className: (0, utils_1.cn)((0, CollapsibleWizardCard_1.getWizardAccordionSectionClassName)(hasExpandedCard, expandedFillsSpace), 'twa:p-2'), children: [(0, jsx_runtime_1.jsx)(CollapsibleWizardCard_1.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: (0, jsx_runtime_1.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: (0, jsx_runtime_1.jsx)(Flex_1.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: (0, jsx_runtime_1.jsx)(ColumnSelector_1.NewColumnSelector, { compactColumnList: true, availableColumns: sortableCols, selected: data.ColumnId ? [data.ColumnId] : [], singleSelect: true, onChange: handleColumnsChange, allowReorder: false }) }) }), (0, jsx_runtime_1.jsx)(CollapsibleWizardCard_1.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: (0, jsx_runtime_1.jsx)(StyledColumnRowsScopeSummary, { data: data }), children: (0, jsx_runtime_1.jsx)(StyledColumnRowScopePanel, { data: data, onRowKindChange: handleRowKindChange }) })] }));
 };
 exports.StyledColumnWizardScopeSection = StyledColumnWizardScopeSection;

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

@@ -16,6 +16,7 @@ const Radio_1 = tslib_1.__importStar(require("../../../../components/Radio"));
 const Toggle_1 = require("../../../../components/Toggle");
 const StyledColumnSliceStyleEditors_1 = require("../StyledColumnSliceStyleEditors");
 const Card_1 = require("../../../../components/Card");
+const SummaryColorTag_1 = require("../../../Wizard/SummaryColorTag");
 const StyledColumnPercentBarPreview_1 = require("./Components/StyledColumnPercentBarPreview");
 // Re-export the Ranges section + summary for legacy import paths.
 var StyledColumnWizardRangesSection_1 = require("./StyledColumnWizardRangesSection");
@@ -88,7 +89,7 @@ const renderStyledColumnStyleSummary = (data, _api) => {
         includeEmptyCellText: true,
         includeEmptyTooltip: true,
     });
-    return ((0, jsx_runtime_1.jsx)(Flex_1.Flex, { alignItems: "center", className: "twa:flex-wrap twa:gap-2", children: items.map((item) => ((0, jsx_runtime_1.jsx)(Tag_1.Tag, { children: item }, item))) }));
+    return (0, SummaryColorTag_1.renderSummaryStringTags)(items);
 };
 exports.renderStyledColumnStyleSummary = renderStyledColumnStyleSummary;
 // Legacy wrapper kept for any external consumers; safe no-op here.
@@ -182,10 +183,14 @@ const StyledColumnWizardStyleSection = (props) => {
             },
         });
     };
-    const onUseBackColorChanged = (checked) => {
-        update({ BackColor: checked ? (0, UIHelper_1.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_1.default.IsNullOrEmpty(pb.CellText) || disabled;
     const currentAlignment = pb.CellTextAlignment ?? 'Inherit';
     const currentOrigin = typeof pb.Origin === 'number'
@@ -202,6 +207,6 @@ const StyledColumnWizardStyleSection = (props) => {
                                             delete cleaned.Font;
                                             props.onChange({ ...data, PercentBarStyle: cleaned });
                                         }
-                                    } }) })] })] }), (0, jsx_runtime_1.jsxs)(Card_1.Card, { shadow: false, className: "twa:mb-3", children: [(0, jsx_runtime_1.jsxs)(Card_1.Card.Title, { children: [(0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:font-medium", children: "Cell Style" }), (0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:text-xs twa:opacity-70 twa:font-normal twa:max-w-[520px]", children: "Configure Tooltip and Background Colour" })] }), (0, jsx_runtime_1.jsx)(Card_1.Card.Body, { children: (0, jsx_runtime_1.jsxs)(FormLayout_1.default, { sizes: [...STYLE_FORM_SIZES], children: [(0, jsx_runtime_1.jsxs)(FormLayout_1.FormRow, { label: "Tooltip Display:", children: [(0, jsx_runtime_1.jsx)(CheckBox_1.CheckBox, { disabled: disabled, checked: pb.ToolTipText?.includes('CellValue'), onChange: (checked) => onToolTipTextChanged('CellValue', checked), children: "Cell Value" }), ' ', (0, jsx_runtime_1.jsx)(CheckBox_1.CheckBox, { disabled: disabled, className: "twa:ml-3", checked: pb.ToolTipText?.includes('PercentageValue'), onChange: (checked) => onToolTipTextChanged('PercentageValue', checked), children: "Percent Value" })] }), (0, jsx_runtime_1.jsx)(FormLayout_1.FormRow, { label: `Back ${api.internalApi.getCorrectEnglishVariant('Colour')}:`, children: (0, jsx_runtime_1.jsxs)(Flex_1.Flex, { alignItems: "center", children: [(0, jsx_runtime_1.jsx)(CheckBox_1.CheckBox, { disabled: disabled, checked: !!pb.BackColor, onChange: onUseBackColorChanged, className: "twa:mr-2" }), pb.BackColor != undefined && ((0, jsx_runtime_1.jsx)(ColorPicker_1.ColorPicker, { disabled: disabled, api: api, value: pb.BackColor, onChange: onBackColorChange }))] }) })] }) })] }), (0, jsx_runtime_1.jsx)(StyledColumnPercentBarPreview_1.StyledColumnPercentBarPreviewCard, { data: data })] }));
+                                    } }) })] })] }), (0, jsx_runtime_1.jsxs)(Card_1.Card, { shadow: false, className: "twa:mb-3", children: [(0, jsx_runtime_1.jsxs)(Card_1.Card.Title, { children: [(0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:font-medium", children: "Cell Style" }), (0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:text-xs twa:opacity-70 twa:font-normal twa:max-w-[520px]", children: "Configure Tooltip and Background Colour" })] }), (0, jsx_runtime_1.jsx)(Card_1.Card.Body, { children: (0, jsx_runtime_1.jsxs)(FormLayout_1.default, { sizes: [...STYLE_FORM_SIZES], children: [(0, jsx_runtime_1.jsxs)(FormLayout_1.FormRow, { label: "Tooltip Display:", children: [(0, jsx_runtime_1.jsx)(CheckBox_1.CheckBox, { disabled: disabled, checked: pb.ToolTipText?.includes('CellValue'), onChange: (checked) => onToolTipTextChanged('CellValue', checked), children: "Cell Value" }), ' ', (0, jsx_runtime_1.jsx)(CheckBox_1.CheckBox, { disabled: disabled, className: "twa:ml-3", checked: pb.ToolTipText?.includes('PercentageValue'), onChange: (checked) => onToolTipTextChanged('PercentageValue', checked), children: "Percent Value" })] }), (0, jsx_runtime_1.jsx)(FormLayout_1.FormRow, { label: `Back ${api.internalApi.getCorrectEnglishVariant('Colour')}:`, children: (0, jsx_runtime_1.jsx)(ColorPicker_1.OptionalColorPicker, { disabled: disabled, api: api, value: pb.BackColor ?? undefined, defaultColor: (0, UIHelper_1.getGraySwatchColor)(), onChange: onBackColorChange }) })] }) })] }), (0, jsx_runtime_1.jsx)(StyledColumnPercentBarPreview_1.StyledColumnPercentBarPreviewCard, { data: data })] }));
 };
 exports.StyledColumnWizardStyleSection = StyledColumnWizardStyleSection;