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

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

@@ -1,5 +1,4 @@
-import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
-import * as React from 'react';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { CheckBox } from '../../../components/CheckBox';
 import ErrorBox from '../../../components/ErrorBox';
 import FormLayout, { FormRow } from '../../../components/FormLayout';
@@ -9,9 +8,10 @@ import { useOnePageAdaptableWizardContext } from '../../Wizard/OnePageAdaptableW
 import { Box, Flex } from '../../../components/Flex';
 import { SingleSelect } from '../../../components/NewSelect';
 import Input from '../../../components/Input';
-import { renderCellStyleSummaryTags, StyledColumnCellStyleEditor, } from './StyledColumnSliceStyleEditors';
+import { getCellBoxStyleSummaryItems, StyledColumnCellStyleEditor, } from './StyledColumnSliceStyleEditors';
 import { Card } from '../../../components/Card';
-import { convertAdaptableStyleToCSS, hasCellBoxStyle, } from '../../../Utilities/Helpers/StyleHelper';
+import { renderSummaryStringTags } from '../../Wizard/SummaryColorTag';
+import { DEFAULT_RATING_GAP, DEFAULT_RATING_ICON, DEFAULT_RATING_MAX, DEFAULT_RATING_SIZE, } from './StyledColumnWizardStyleSection/Components/StyledColumnRatingPreview';
 const STYLE_FORM_SIZES = ['200px', '1fr'];
 const ICON_CHOICES = [
     { value: 'Star', label: 'Star' },
@@ -19,13 +19,48 @@ const ICON_CHOICES = [
     { value: 'Circle', label: 'Circle' },
     { value: 'Thumb', label: 'Thumb' },
 ];
-// Mirrors the renderer defaults so the wizard preview/summary stay in sync.
-const DEFAULT_MAX = 5;
-const DEFAULT_SIZE = 14;
-const DEFAULT_GAP = 2;
-const DEFAULT_ICON = 'Star';
-const DEFAULT_FILLED_COLOR = 'var(--ab-color-warn, #f5a623)';
-const DEFAULT_EMPTY_COLOR = 'color-mix(in srgb, currentColor 22%, transparent)';
+const formatRatingToolTipSummary = (toolTipText) => toolTipText
+    ?.map((t) => (t === 'CellValue' ? 'Cell Value' : 'Percentage Value'))
+    .join(' + ') ?? '';
+const buildStyledColumnRatingStyleSummaryStrings = (rating, options) => {
+    const items = [
+        `Max: ${rating.Max ?? DEFAULT_RATING_MAX}`,
+        `Icon: ${rating.Icon ?? DEFAULT_RATING_ICON}`,
+    ];
+    if (rating.FilledColor) {
+        items.push(`Filled Colour: ${rating.FilledColor}`);
+    }
+    if (rating.EmptyColor) {
+        items.push(`Empty Colour: ${rating.EmptyColor}`);
+    }
+    if (rating.Size != null) {
+        items.push(`Icon Size: ${rating.Size}px`);
+    }
+    if (rating.Gap != null) {
+        items.push(`Icon Gap: ${rating.Gap}px`);
+    }
+    items.push(`Allow Half: ${(rating.AllowHalf ?? true) ? 'Yes' : 'No'}`);
+    items.push(`Show Value: ${rating.ShowValue ? 'Yes' : 'No'}`);
+    if (rating.ToolTipText?.length) {
+        items.push(`Tooltip: ${formatRatingToolTipSummary(rating.ToolTipText)}`);
+    }
+    else if (options.includeEmptyTooltip) {
+        items.push('Tooltip: No Tooltip');
+    }
+    getCellBoxStyleSummaryItems(rating.Cell).forEach(({ label, value }) => {
+        items.push(`${label}: ${value}`);
+    });
+    return items;
+};
+export const getStyledColumnRatingStyleViewValues = (data) => {
+    const rating = data.RatingStyle;
+    if (!rating) {
+        return [];
+    }
+    return buildStyledColumnRatingStyleSummaryStrings(rating, {
+        includeEmptyTooltip: false,
+    });
+};
 /**
  * Resolve a CSS custom property (e.g. `--ab-color-warn`) to its computed
  * value at runtime. Returns the fallback hex on SSR or when the variable
@@ -49,17 +84,10 @@ const resolveCssVar = (varName, fallbackHex) => {
  * the user hasn't chosen one. The renderer uses `var(--ab-color-warn,
  * #f5a623)`, but `ColorPicker` can't parse a `var(...)` with a fallback,
  * so we resolve the variable manually and pass a concrete hex.
- *
- * State remains untouched - the picker only writes to state when the user
- * actively picks a colour, so we never accidentally bake the resolved
- * theme value into the saved styled column.
  */
 const getDisplayedFilledColor = (rating) => rating.FilledColor || resolveCssVar('--ab-color-warn', '#f5a623');
 /**
- * Best-effort preview colour for the wizard's `Empty Colour` picker. The
- * renderer's actual default is `color-mix(in srgb, currentColor 22%,
- * transparent)`, which the picker can't parse either; we approximate it
- * by reading the document foreground colour and setting alpha to 0.22.
+ * Best-effort preview colour for the wizard's `Empty Colour` picker.
  */
 const getDisplayedEmptyColor = (rating) => {
     if (rating.EmptyColor)
@@ -78,62 +106,16 @@ const getDisplayedEmptyColor = (rating) => {
     }
     return 'rgba(127, 127, 127, 0.22)';
 };
-// ---------------------------------------------------------------------------
-// Inline preview (also reused by the wizard summary so the user sees a
-// pixel-accurate idea of the resulting cell at all times).
-// ---------------------------------------------------------------------------
-const ICON_PATHS = {
-    Star: 'M12 2 L14.9 8.6 L22 9.3 L16.7 14.1 L18.2 21 L12 17.4 L5.8 21 L7.3 14.1 L2 9.3 L9.1 8.6 Z',
-    Heart: 'M12 21 C 12 21 3 14.5 3 8.5 C 3 5.5 5.5 3 8.5 3 C 10.3 3 11.7 4 12 5.2 C 12.3 4 13.7 3 15.5 3 C 18.5 3 21 5.5 21 8.5 C 21 14.5 12 21 12 21 Z',
-    Circle: 'M12 4 a8 8 0 1 0 0.0001 0 Z',
-    Thumb: 'M2 11 h4 v10 h-4 z M7 11 l4 -8 c.5 -1 2 -1 2 0 l-1 5 h6 c1 0 2 1 1.7 2 l-2 8 c-.3 1 -1 1.6 -2 1.6 H7 z',
-};
-const clamp = (n, lo, hi) => Math.max(lo, Math.min(hi, n));
-function getRatingCellChromeCss(cell) {
-    if (!cell || !hasCellBoxStyle(cell)) {
-        return {};
-    }
-    return convertAdaptableStyleToCSS(cell);
-}
-const RatingPreview = ({ rating, value, }) => {
-    const max = rating.Max ?? DEFAULT_MAX;
-    const size = rating.Size ?? DEFAULT_SIZE;
-    const gap = rating.Gap ?? DEFAULT_GAP;
-    const icon = rating.Icon ?? DEFAULT_ICON;
-    const filledColor = rating.FilledColor ?? DEFAULT_FILLED_COLOR;
-    const emptyColor = rating.EmptyColor ?? DEFAULT_EMPTY_COLOR;
-    const allowHalf = rating.AllowHalf ?? true;
-    const previewValue = value ?? Math.max(1, Math.min(max, max * 0.7));
-    const effective = allowHalf ? previewValue : Math.round(previewValue);
-    const d = ICON_PATHS[icon];
-    return (_jsxs("span", { style: {
-            display: 'inline-flex',
-            alignItems: 'center',
-            gap: `${gap}px`,
-            lineHeight: 1,
-        }, "aria-hidden": "true", children: [Array.from({ length: max }).map((_, i) => {
-                const fill = clamp(effective - i, 0, 1);
-                const clipId = `ab-rating-preview-clip-${i}-${icon}-${size}`;
-                return (_jsxs("svg", { width: size, height: size, viewBox: "0 0 24 24", children: [_jsx("path", { d: d, fill: emptyColor }), fill > 0 && (_jsxs(_Fragment, { children: [_jsx("defs", { children: _jsx("clipPath", { id: clipId, children: _jsx("rect", { x: 0, y: 0, width: 24 * fill, height: 24 }) }) }), _jsx("path", { d: d, fill: filledColor, clipPath: `url(#${clipId})` })] }))] }, i));
-            }), rating.ShowValue && (_jsx("span", { style: { marginLeft: 6, fontVariantNumeric: 'tabular-nums' }, children: previewValue }))] }));
-};
-// ---------------------------------------------------------------------------
-// Wizard summary
-// ---------------------------------------------------------------------------
 export const renderStyledColumnRatingSummary = (data) => {
     const rating = data.RatingStyle;
     if (!rating) {
         return _jsx(Tag, { children: "No Styling Defined" });
     }
-    const max = rating.Max ?? DEFAULT_MAX;
-    const icon = rating.Icon ?? DEFAULT_ICON;
-    const cellTags = renderCellStyleSummaryTags(rating.Cell);
-    const toolTipTokens = rating.ToolTipText ?? [];
-    return (_jsxs(Flex, { alignItems: "center", className: "twa:gap-2 twa:flex-wrap", children: [_jsx(Box, { className: "twa:inline-flex twa:items-center twa:gap-2 twa:box-border", style: getRatingCellChromeCss(rating.Cell), children: _jsx(RatingPreview, { rating: rating }) }), _jsxs(Box, { children: ["Out of ", _jsx(Tag, { children: max })] }), _jsxs(Box, { children: ["Icon: ", _jsx(Tag, { children: icon })] }), toolTipTokens.length > 0 && (_jsxs(Box, { children: ["Tooltip: ", _jsx(Tag, { children: toolTipTokens.join(', ') })] })), cellTags && _jsxs(Box, { children: ["Cell: ", cellTags] })] }));
+    const items = buildStyledColumnRatingStyleSummaryStrings(rating, {
+        includeEmptyTooltip: true,
+    });
+    return renderSummaryStringTags(items);
 };
-// ---------------------------------------------------------------------------
-// Wizard validation
-// ---------------------------------------------------------------------------
 export const isValidRatingStyle = (data) => {
     const rating = data.RatingStyle;
     if (!rating) {
@@ -167,8 +149,7 @@ export const StyledColumnWizardRatingSection = (props) => {
             : current.filter((t) => t !== token);
         update({ ToolTipText: next });
     };
-    const previewCellChrome = React.useMemo(() => getRatingCellChromeCss(rating.Cell), [rating.Cell]);
-    return (_jsxs(Box, { children: [_jsxs(Flex, { alignItems: "center", className: "twa:mb-3 twa:p-3 twa:rounded-standard twa:border twa:border-border twa:gap-3", children: [_jsx(Box, { className: "twa:text-3 twa:font-medium", children: "Preview:" }), _jsx(Box, { className: "twa:inline-flex twa:items-center twa:box-border", style: previewCellChrome, children: _jsx(RatingPreview, { rating: rating }) }), _jsxs(Box, { className: "twa:text-2 twa:opacity-70", children: ["(sample value ", (rating.Max ?? DEFAULT_MAX) * 0.7, ")"] })] }), _jsxs(Card, { shadow: false, className: "twa:mb-3", children: [_jsx(Card.Title, { children: "Icon" }), _jsx(Card.Body, { children: _jsxs(FormLayout, { sizes: [...STYLE_FORM_SIZES], children: [_jsx(FormRow, { label: "Max:", children: _jsxs(Flex, { alignItems: "center", className: "twa:gap-2", children: [_jsx(Input, { type: "number", min: 1, step: 1, value: rating.Max ?? '', placeholder: String(DEFAULT_MAX), style: { width: 80 }, onChange: (event) => {
+    return (_jsxs(Box, { children: [_jsxs(Card, { shadow: false, className: "twa:mb-3", children: [_jsx(Card.Title, { children: "Icon" }), _jsx(Card.Body, { children: _jsxs(FormLayout, { sizes: [...STYLE_FORM_SIZES], children: [_jsx(FormRow, { label: "Max:", children: _jsxs(Flex, { alignItems: "center", className: "twa:gap-2", children: [_jsx(Input, { type: "number", min: 1, step: 1, value: rating.Max ?? '', placeholder: String(DEFAULT_RATING_MAX), style: { width: 80 }, onChange: (event) => {
                                                     const raw = event.target.value;
                                                     if (raw === '' || raw == null) {
                                                         update({ Max: undefined });
@@ -178,7 +159,7 @@ export const StyledColumnWizardRatingSection = (props) => {
                                                     update({
                                                         Max: Number.isFinite(parsed) && parsed >= 1 ? Math.floor(parsed) : undefined,
                                                     });
-                                                } }), _jsx(Box, { className: "twa:text-xs twa:opacity-70 twa:min-w-0 twa:shrink", children: "Icon count and rating cap (no auto scaling is applied)" })] }) }), _jsx(FormRow, { label: "Icon:", children: _jsx(Box, { className: "twa:max-w-[160px]", children: _jsx(SingleSelect, { className: "twa:w-full", value: rating.Icon ?? DEFAULT_ICON, onValueChange: (v) => update({ Icon: v }), items: ICON_CHOICES }) }) }), _jsx(FormRow, { label: "Filled Colour:", children: _jsx(ColorPicker, { disabled: disabled, api: api, value: getDisplayedFilledColor(rating), onChange: (c) => update({ FilledColor: c }) }) }), _jsx(FormRow, { label: "Empty Colour:", children: _jsx(ColorPicker, { disabled: disabled, api: api, value: getDisplayedEmptyColor(rating), onChange: (c) => update({ EmptyColor: c }) }) }), _jsx(FormRow, { label: "Icon Size (px):", children: _jsxs(Flex, { alignItems: "center", className: "twa:gap-2", children: [_jsx(Input, { type: "number", min: 4, step: 1, value: rating.Size ?? '', placeholder: String(DEFAULT_SIZE), style: { width: 80 }, onChange: (event) => {
+                                                } }), _jsx(Box, { className: "twa:text-xs twa:opacity-70 twa:min-w-0 twa:shrink", children: "Icon count and rating cap (no auto scaling is applied)" })] }) }), _jsx(FormRow, { label: "Icon:", children: _jsx(Box, { className: "twa:max-w-[160px]", children: _jsx(SingleSelect, { className: "twa:w-full", value: rating.Icon ?? DEFAULT_RATING_ICON, onValueChange: (v) => update({ Icon: v }), items: ICON_CHOICES }) }) }), _jsx(FormRow, { label: "Filled Colour:", children: _jsx(ColorPicker, { disabled: disabled, api: api, value: getDisplayedFilledColor(rating), onChange: (c) => update({ FilledColor: c }) }) }), _jsx(FormRow, { label: "Empty Colour:", children: _jsx(ColorPicker, { disabled: disabled, api: api, value: getDisplayedEmptyColor(rating), onChange: (c) => update({ EmptyColor: c }) }) }), _jsx(FormRow, { label: "Icon Size (px):", children: _jsxs(Flex, { alignItems: "center", className: "twa:gap-2", children: [_jsx(Input, { type: "number", min: 4, step: 1, value: rating.Size ?? '', placeholder: String(DEFAULT_RATING_SIZE), style: { width: 80 }, onChange: (event) => {
                                                     const raw = event.target.value;
                                                     if (raw === '' || raw == null) {
                                                         update({ Size: undefined });
@@ -188,7 +169,7 @@ export const StyledColumnWizardRatingSection = (props) => {
                                                     update({
                                                         Size: Number.isFinite(parsed) && parsed >= 4 ? parsed : undefined,
                                                     });
-                                                } }), _jsx(Box, { className: "twa:text-xs twa:opacity-70 twa:min-w-0 twa:shrink", children: "Square pixel size of each icon" })] }) }), _jsx(FormRow, { label: "Icon Gap (px):", children: _jsxs(Flex, { alignItems: "center", className: "twa:gap-2", children: [_jsx(Input, { type: "number", min: 0, step: 1, value: rating.Gap ?? '', placeholder: String(DEFAULT_GAP), style: { width: 80 }, onChange: (event) => {
+                                                } }), _jsx(Box, { className: "twa:text-xs twa:opacity-70 twa:min-w-0 twa:shrink", children: "Square pixel size of each icon" })] }) }), _jsx(FormRow, { label: "Icon Gap (px):", children: _jsxs(Flex, { alignItems: "center", className: "twa:gap-2", children: [_jsx(Input, { type: "number", min: 0, step: 1, value: rating.Gap ?? '', placeholder: String(DEFAULT_RATING_GAP), style: { width: 80 }, onChange: (event) => {
                                                     const raw = event.target.value;
                                                     if (raw === '' || raw == null) {
                                                         update({ Gap: undefined });
@@ -198,7 +179,7 @@ export const StyledColumnWizardRatingSection = (props) => {
                                                     update({
                                                         Gap: Number.isFinite(parsed) && parsed >= 0 ? parsed : undefined,
                                                     });
-                                                } }), _jsx(Box, { className: "twa:text-xs twa:opacity-70 twa:min-w-0 twa:shrink", children: "Pixel space between adjacent icons" })] }) }), _jsx(FormRow, { label: "Allow Half Icons:", children: _jsx(CheckBox, { disabled: disabled, className: "twa:ml-2", checked: rating.AllowHalf ?? true, onChange: (checked) => update({ AllowHalf: checked }), children: "Render fractional values as a partial icon (e.g. 3.5 \u2192 \u2605\u2605\u2605\u00BD\u2606)" }) })] }) })] }), _jsxs(Card, { shadow: false, className: "twa:mb-3", children: [_jsx(Card.Title, { children: "Text" }), _jsx(Card.Body, { children: _jsxs(FormLayout, { sizes: [...STYLE_FORM_SIZES], children: [_jsx(FormRow, { label: "Show Value:", children: _jsx(CheckBox, { disabled: disabled, className: "twa:ml-2", checked: rating.ShowValue ?? false, onChange: (checked) => update({ ShowValue: checked }), children: "Display the numeric value beside the icons" }) }), _jsx(FormRow, { label: "Tooltip:", children: _jsxs(Flex, { flexDirection: "column", className: "twa:gap-1 twa:ml-2", children: [_jsx(CheckBox, { disabled: disabled, checked: rating.ToolTipText?.includes('CellValue') ?? false, onChange: (checked) => toggleToolTipText('CellValue', checked), children: "Cell Value" }), _jsx(CheckBox, { disabled: disabled, checked: rating.ToolTipText?.includes('PercentageValue') ?? false, onChange: (checked) => toggleToolTipText('PercentageValue', checked), children: "Percentage Value (value \u00F7 Max)" })] }) })] }) })] }), _jsxs(Card, { shadow: false, children: [_jsxs(Card.Title, { children: [_jsx(Box, { className: "twa:font-medium", children: "Cell" }), _jsx(Box, { className: "twa:text-xs twa:opacity-70 twa:font-normal twa:max-w-[500px]", children: "Optional Cell Style properties overrides Format Column properties)" })] }), _jsx(Card.Body, { children: _jsx(StyledColumnCellStyleEditor, { api: api, disabled: disabled, value: rating.Cell, onChange: (next) => {
+                                                } }), _jsx(Box, { className: "twa:text-xs twa:opacity-70 twa:min-w-0 twa:shrink", children: "Pixel space between adjacent icons" })] }) }), _jsx(FormRow, { label: "Allow Half Icons:", children: _jsx(CheckBox, { disabled: disabled, className: "twa:ml-2", checked: rating.AllowHalf ?? true, onChange: (checked) => update({ AllowHalf: checked }), children: "Render fractional values as a partial icon (e.g. 3.5 \u2192 \u2605\u2605\u2605\u00BD\u2606)" }) })] }) })] }), _jsxs(Card, { shadow: false, className: "twa:mb-3", children: [_jsx(Card.Title, { children: "Text" }), _jsx(Card.Body, { children: _jsxs(FormLayout, { sizes: [...STYLE_FORM_SIZES], children: [_jsx(FormRow, { label: "Show Value:", children: _jsx(CheckBox, { disabled: disabled, className: "twa:ml-2", checked: rating.ShowValue ?? false, onChange: (checked) => update({ ShowValue: checked }), children: "Display the numeric value beside the icons" }) }), _jsx(FormRow, { label: "Tooltip:", children: _jsxs(Flex, { flexDirection: "column", className: "twa:gap-1 twa:ml-2", children: [_jsx(CheckBox, { disabled: disabled, checked: rating.ToolTipText?.includes('CellValue') ?? false, onChange: (checked) => toggleToolTipText('CellValue', checked), children: "Cell Value" }), _jsx(CheckBox, { disabled: disabled, checked: rating.ToolTipText?.includes('PercentageValue') ?? false, onChange: (checked) => toggleToolTipText('PercentageValue', checked), children: "Percentage Value (value \u00F7 Max)" })] }) })] }) })] }), _jsxs(Card, { shadow: false, className: "twa:mb-3", children: [_jsxs(Card.Title, { children: [_jsx(Box, { className: "twa:font-medium", children: "Cell" }), _jsx(Box, { className: "twa:text-xs twa:opacity-70 twa:font-normal twa:max-w-[500px]", children: "Optional Cell Style properties overrides Format Column properties)" })] }), _jsx(Card.Body, { children: _jsx(StyledColumnCellStyleEditor, { api: api, disabled: disabled, value: rating.Cell, onChange: (next) => {
                                 if (next) {
                                     update({ Cell: next });
                                 }

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 { getStyledColumnRowKindDisabledReason, isStyledColumnRowKindSupported, sanitizeStyledColumnRowScope, STYLED_COLUMN_ROW_KIND_EXCLUDE_KEY, STYLED_COLUMN_ROW_KINDS, } from '../../../Utilities/Helpers/styledColumnRowKindSupport';
-import { isUnsupportedColumnDataTypeForIconStyle } from '../../../Utilities/Helpers/iconStyledColumnColumnSupport';
+import { cn } from '../../../lib/utils';
+import { getStyledColumnRowKindDisabledReason, isStyledColumnRowKindSupported, sanitizeStyledColumnRowScope, STYLED_COLUMN_ROW_KIND_EXCLUDE_KEY, STYLED_COLUMN_ROW_KINDS, } from '../../../Utilities/Helpers/StyledColumns/StyledColumnHelper';
+import { isUnsupportedColumnDataTypeForIconStyle } from '../../../Utilities/Helpers/StyledColumns/IconStyleHelper';
+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-text-on-defaultbackground/20", children: [_jsx(Box, { className: "twa:text-5 twa:font-medium", children: "Column" }), _jsx(Box, { className: "twa:text-xs twa:opacity-70", children: "The Column the Style is applied to" }), _jsx(Box, { className: "twa:flex-1" }), _jsx(AdaptableFormControlTextClear, { value: columnsSearchText, OnTextChange: setColumnsSearchText, placeholder: "Type to search columns", style: { flex: 1, maxWidth: 320 } })] }), _jsx(Box, { className: "twa:flex-1 twa:min-h-0 twa:overflow-auto", children: _jsx(NewColumnSelector, { columnFilterText: columnsSearchText, availableColumns: sortableCols, selected: data.ColumnId ? [data.ColumnId] : [], singleSelect: true, onChange: handleColumnsChange, allowReorder: false }) })] }), _jsxs(Box, { className: "twa:border-t twa:border-border twa:px-2 twa:py-3 twa:shrink-0", children: [_jsxs(Flex, { alignItems: "center", className: "twa:gap-3 twa:pb-2 twa:mb-3 twa:flex-wrap twa:border-b twa:border-b-text-on-defaultbackground/20", children: [_jsx(Box, { className: "twa:text-5 twa:font-medium", children: "Rows" }), _jsx(Box, { className: "twa:text-xs twa:opacity-70 twa:max-w-[520px]", children: "Which kinds of Rows should the Styled Column render on" })] }), _jsx(Flex, { flexDirection: "row", className: "twa:gap-6 twa:flex-wrap", children: [
-                            STYLED_COLUMN_ROW_KINDS.slice(0, 2),
-                            STYLED_COLUMN_ROW_KINDS.slice(2),
-                        ].map((rowKindGroup, groupIndex) => (_jsx(Box, { className: "twa:flex-1 twa:min-w-[220px]", children: _jsx(FormLayout, { sizes: ['180px', '1fr'], children: rowKindGroup.map((kind) => {
-                                    const supported = isStyledColumnRowKindSupported(data, kind);
-                                    const disabledReason = getStyledColumnRowKindDisabledReason(data, kind);
-                                    return (_jsx(FormRow, { label: `${ROW_KIND_LABELS[kind]}:`, children: _jsx(Flex, { alignItems: "center", className: "twa:ml-2", children: _jsx(CheckBox, { "data-name": `include-${kind.toLowerCase()}-rows-checkbox`, className: "twa:mr-2", disabled: !supported, title: disabledReason, checked: isRowKindIncluded(data, kind), onChange: (checked) => handleRowKindChange(kind, checked) }) }) }, kind));
-                                }) }) }, groupIndex))) })] })] }));
+    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/Components/BarStyleCellTextLayoutEditor.d.ts

@@ -0,0 +1,9 @@
+import * as React from 'react';
+import { BarStyleCellTextPlacement, BarStyleCellTextProperties } from '../../../../../AdaptableState/StyledColumns/Common/BarStyleProperties';
+import { CellTextOption } from '../../../../../AdaptableState/StyledColumns/Common/CellTextOptions';
+export declare const BarStyleCellTextLayoutEditor: React.FunctionComponent<{
+    disabled?: boolean;
+    cellTextProperties?: BarStyleCellTextProperties;
+    onToggle: (token: CellTextOption, show: boolean) => void;
+    onPlacementChange: (token: CellTextOption, patch: Partial<BarStyleCellTextPlacement>) => void;
+}>;

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

@@ -0,0 +1,33 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { resolveBarStyleCellTextLayout } from '../../../../../Utilities/Helpers/StyledColumns/BarStylesHelper';
+import { CheckBox } from '../../../../../components/CheckBox';
+import { Box, Flex } from '../../../../../components/Flex';
+import { FormRow } from '../../../../../components/FormLayout';
+import { SingleSelect } from '../../../../../components/NewSelect';
+const HORIZONTAL_CHOICES = [
+    { value: 'Left', label: 'Left' },
+    { value: 'Center', label: 'Center' },
+    { value: 'Right', label: 'Right' },
+];
+const VERTICAL_CHOICES = [
+    { value: 'Above', label: 'Above Bar' },
+    { value: 'Below', label: 'Below Bar' },
+    { value: 'Merged', label: 'Merged' },
+];
+const ROWS = [
+    { token: 'CellValue', label: 'Cell Value:', key: 'CellValue' },
+    { token: 'PercentageValue', label: 'Percent Value:', key: 'PercentValue' },
+];
+export const BarStyleCellTextLayoutEditor = ({ disabled, cellTextProperties, onToggle, onPlacementChange }) => {
+    const layout = resolveBarStyleCellTextLayout(cellTextProperties);
+    return (_jsx(_Fragment, { children: ROWS.map(({ token, label, key }) => {
+            const placement = layout[key];
+            const isShown = Boolean(placement);
+            const rowDisabled = disabled || !isShown;
+            return (_jsx(FormRow, { label: label, children: _jsxs(Flex, { alignItems: "center", className: "twa:gap-3", children: [_jsx(CheckBox, { disabled: disabled, checked: isShown, onChange: (checked) => onToggle(token, checked) }), _jsx(Box, { className: "twa:w-[140px]", children: _jsx(SingleSelect, { className: "twa:w-full", disabled: rowDisabled, value: placement?.Horizontal ?? 'Left', onValueChange: (v) => onPlacementChange(token, {
+                                    Horizontal: v,
+                                }), items: HORIZONTAL_CHOICES }) }), _jsx(Box, { className: "twa:w-[140px]", children: _jsx(SingleSelect, { className: "twa:w-full", disabled: rowDisabled, value: placement?.Vertical ?? 'Below', onValueChange: (v) => onPlacementChange(token, {
+                                    Vertical: v,
+                                }), items: VERTICAL_CHOICES }) })] }) }, token));
+        }) }));
+};

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

@@ -0,0 +1,23 @@
+import * as React from 'react';
+import { BarStyleCellTextProperties } from '../../../../../AdaptableState/StyledColumns/Common/BarStyleProperties';
+import { BarStyleCellTextLabels } from '../../../../../Utilities/Helpers/StyledColumns/BarStylesHelper';
+/**
+ * Preview of the per-value cell-text layout. Renders three potential bands:
+ * - `Above` slots (above the bar)
+ * - `Merged` slots (overlay on top of the bar — uses `mergedOverlayClassName`)
+ * - `Below` slots (below the bar)
+ *
+ * Each band has three horizontal slots (Left/Center/Right) so the spacing is
+ * stable. When `vertical` is provided, only the band matching that value is
+ * rendered (used by the preview cards to position bands around the bar).
+ */
+export declare const BarStyleCellTextPreview: React.FunctionComponent<{
+    className?: string;
+    style?: React.CSSProperties;
+    cellTextProperties?: BarStyleCellTextProperties;
+    labels: BarStyleCellTextLabels;
+    mergedOverlayClassName?: string;
+    /** Render only the band matching this vertical position. */
+    vertical?: 'Above' | 'Below' | 'Merged';
+}>;
+export declare const shouldShowBarStyleCellTextOutsideBar: (cellTextProperties: BarStyleCellTextProperties | undefined, hasCellText: boolean) => boolean;

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

@@ -0,0 +1,57 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { getBarStyleCellTextSlotPresence, hasBarStyleCellTextConfigured, resolveBarStyleCellTextSlots, } from '../../../../../Utilities/Helpers/StyledColumns/BarStylesHelper';
+import { Box, Flex } from '../../../../../components/Flex';
+const HORIZONTAL_ORDER = ['Left', 'Center', 'Right'];
+const HORIZONTAL_JUSTIFY = {
+    Left: 'flex-start',
+    Center: 'center',
+    Right: 'flex-end',
+};
+const HORIZONTAL_TEXT_ALIGN = {
+    Left: 'left',
+    Center: 'center',
+    Right: 'right',
+};
+const CellTextRow = ({ className, style, slots }) => (_jsx(Flex, { className: className, alignItems: "center", style: { ...style, width: '100%', gap: 4 }, children: HORIZONTAL_ORDER.map((horizontal) => {
+        const slot = slots.find((s) => s.horizontal === horizontal);
+        return (_jsx(Box, { className: "twa:truncate", style: {
+                flex: 1,
+                minWidth: 0,
+                display: 'flex',
+                justifyContent: HORIZONTAL_JUSTIFY[horizontal],
+                alignItems: 'center',
+                textAlign: HORIZONTAL_TEXT_ALIGN[horizontal],
+            }, children: slot?.text ?? '' }, horizontal));
+    }) }));
+/**
+ * Preview of the per-value cell-text layout. Renders three potential bands:
+ * - `Above` slots (above the bar)
+ * - `Merged` slots (overlay on top of the bar — uses `mergedOverlayClassName`)
+ * - `Below` slots (below the bar)
+ *
+ * Each band has three horizontal slots (Left/Center/Right) so the spacing is
+ * stable. When `vertical` is provided, only the band matching that value is
+ * rendered (used by the preview cards to position bands around the bar).
+ */
+export const BarStyleCellTextPreview = ({ className, style, cellTextProperties, labels, mergedOverlayClassName, vertical }) => {
+    if (!labels.cellValue && !labels.percentage) {
+        return null;
+    }
+    const slots = resolveBarStyleCellTextSlots(cellTextProperties, labels);
+    if (!slots.length) {
+        return null;
+    }
+    const bandSlots = vertical ? slots.filter((s) => s.vertical === vertical) : slots;
+    if (!bandSlots.length) {
+        return null;
+    }
+    const usedClassName = vertical === 'Merged' ? mergedOverlayClassName ?? className : className;
+    return (_jsx(CellTextRow, { className: usedClassName, style: style, slots: bandSlots.map((s) => ({ horizontal: s.horizontal, text: s.text })) }));
+};
+export const shouldShowBarStyleCellTextOutsideBar = (cellTextProperties, hasCellText) => {
+    if (!hasCellText || !hasBarStyleCellTextConfigured(cellTextProperties)) {
+        return false;
+    }
+    const { hasAbove, hasBelow } = getBarStyleCellTextSlotPresence(cellTextProperties);
+    return hasAbove || hasBelow;
+};

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

@@ -0,0 +1,5 @@
+import * as React from 'react';
+import { BulletChartStyle } from '../../../../../AdaptableState/StyledColumns/BulletChartStyle';
+export declare const BulletRangesSummaryPreview: React.FunctionComponent<{
+    bulletStyle: BulletChartStyle;
+}>;

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

@@ -0,0 +1,16 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Box, Flex } from '../../../../../components/Flex';
+import { Tag } from '../../../../../components/Tag';
+import { getVariableColor } from '../../../../../Utilities/Helpers/StyleHelper';
+const stripClassName = 'twa:h-6 twa:w-[128px] twa:rounded twa:overflow-hidden twa:border twa:border-[color-mix(in_srgb,var(--ab-color-foreground)_15%,transparent)]';
+export const BulletRangesSummaryPreview = ({ bulletStyle }) => {
+    const ranges = bulletStyle.CellRanges ?? [];
+    if (!ranges.length) {
+        return _jsx(Tag, { children: "No bands defined" });
+    }
+    let postfix = '';
+    if (bulletStyle.RangeValueType === 'Percentage') {
+        postfix = '%';
+    }
+    return (_jsx(Flex, { flexDirection: "column", className: "twa:gap-2", children: ranges.map((range, i) => (_jsxs(Flex, { alignItems: "center", className: "twa:flex-wrap twa:gap-2", children: [_jsxs(Tag, { children: [range.Min, postfix, " \u2192 ", range.Max, postfix] }), _jsx(Box, { className: stripClassName, style: { background: getVariableColor(range.Color) } })] }, i))) }));
+};

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

@@ -1,10 +1,11 @@
 import * as React from 'react';
-import { CellColorRange, ColumnComparison, GradientStyle, GradientZeroCentredColors, NumericStyledColumn } from '../../../../../AdaptableState/StyledColumnState';
+import { CellColorRange, ColumnComparison, NumericStyledColumn } from '../../../../../AdaptableState/StyledColumns/Common/NumericStyledColumn';
+import { GradientStyle, ZeroCentredColors } from '../../../../../AdaptableState/StyledColumns/GradientStyle';
 import { AdaptableApi } from '../../../../../types';
 export declare function gradientRangeStripCss(color: string, reverseGradient: boolean, minAlpha: number, maxAlpha: number): string;
 export interface GradientRangesSummaryPreviewProps {
     ranges?: CellColorRange[];
-    zeroCentred?: GradientZeroCentredColors;
+    zeroCentred?: ZeroCentredColors;
     rangeValueType: NumericStyledColumn['RangeValueType'];
     gradientStyle?: Pick<GradientStyle, 'MinAlpha' | 'MaxAlpha'>;
 }