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

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

@@ -1,9 +1,8 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.StyledColumnWizardRatingSection = exports.isValidRatingStyle = exports.renderStyledColumnRatingSummary = void 0;
+exports.StyledColumnWizardRatingSection = exports.isValidRatingStyle = exports.renderStyledColumnRatingSummary = exports.getStyledColumnRatingStyleViewValues = void 0;
 const tslib_1 = require("tslib");
 const jsx_runtime_1 = require("react/jsx-runtime");
-const React = tslib_1.__importStar(require("react"));
 const CheckBox_1 = require("../../../components/CheckBox");
 const ErrorBox_1 = tslib_1.__importDefault(require("../../../components/ErrorBox"));
 const FormLayout_1 = tslib_1.__importStar(require("../../../components/FormLayout"));
@@ -15,7 +14,8 @@ 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 StyleHelper_1 = require("../../../Utilities/Helpers/StyleHelper");
+const SummaryColorTag_1 = require("../../Wizard/SummaryColorTag");
+const StyledColumnRatingPreview_1 = require("./StyledColumnWizardStyleSection/Components/StyledColumnRatingPreview");
 const STYLE_FORM_SIZES = ['200px', '1fr'];
 const ICON_CHOICES = [
     { value: 'Star', label: 'Star' },
@@ -23,13 +23,49 @@ 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 ?? StyledColumnRatingPreview_1.DEFAULT_RATING_MAX}`,
+        `Icon: ${rating.Icon ?? StyledColumnRatingPreview_1.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');
+    }
+    (0, StyledColumnSliceStyleEditors_1.getCellBoxStyleSummaryItems)(rating.Cell).forEach(({ label, value }) => {
+        items.push(`${label}: ${value}`);
+    });
+    return items;
+};
+const getStyledColumnRatingStyleViewValues = (data) => {
+    const rating = data.RatingStyle;
+    if (!rating) {
+        return [];
+    }
+    return buildStyledColumnRatingStyleSummaryStrings(rating, {
+        includeEmptyTooltip: false,
+    });
+};
+exports.getStyledColumnRatingStyleViewValues = getStyledColumnRatingStyleViewValues;
 /**
  * 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
@@ -53,17 +89,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)
@@ -82,63 +111,17 @@ 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 || !(0, StyleHelper_1.hasCellBoxStyle)(cell)) {
-        return {};
-    }
-    return (0, StyleHelper_1.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 ((0, jsx_runtime_1.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 ((0, jsx_runtime_1.jsxs)("svg", { width: size, height: size, viewBox: "0 0 24 24", children: [(0, jsx_runtime_1.jsx)("path", { d: d, fill: emptyColor }), fill > 0 && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("defs", { children: (0, jsx_runtime_1.jsx)("clipPath", { id: clipId, children: (0, jsx_runtime_1.jsx)("rect", { x: 0, y: 0, width: 24 * fill, height: 24 }) }) }), (0, jsx_runtime_1.jsx)("path", { d: d, fill: filledColor, clipPath: `url(#${clipId})` })] }))] }, i));
-            }), rating.ShowValue && ((0, jsx_runtime_1.jsx)("span", { style: { marginLeft: 6, fontVariantNumeric: 'tabular-nums' }, children: previewValue }))] }));
-};
-// ---------------------------------------------------------------------------
-// Wizard summary
-// ---------------------------------------------------------------------------
 const renderStyledColumnRatingSummary = (data) => {
     const rating = data.RatingStyle;
     if (!rating) {
         return (0, jsx_runtime_1.jsx)(Tag_1.Tag, { children: "No Styling Defined" });
     }
-    const max = rating.Max ?? DEFAULT_MAX;
-    const icon = rating.Icon ?? DEFAULT_ICON;
-    const cellTags = (0, StyledColumnSliceStyleEditors_1.renderCellStyleSummaryTags)(rating.Cell);
-    const toolTipTokens = rating.ToolTipText ?? [];
-    return ((0, jsx_runtime_1.jsxs)(Flex_1.Flex, { alignItems: "center", className: "twa:gap-2 twa:flex-wrap", children: [(0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:inline-flex twa:items-center twa:gap-2 twa:box-border", style: getRatingCellChromeCss(rating.Cell), children: (0, jsx_runtime_1.jsx)(RatingPreview, { rating: rating }) }), (0, jsx_runtime_1.jsxs)(Flex_1.Box, { children: ["Out of ", (0, jsx_runtime_1.jsx)(Tag_1.Tag, { children: max })] }), (0, jsx_runtime_1.jsxs)(Flex_1.Box, { children: ["Icon: ", (0, jsx_runtime_1.jsx)(Tag_1.Tag, { children: icon })] }), toolTipTokens.length > 0 && ((0, jsx_runtime_1.jsxs)(Flex_1.Box, { children: ["Tooltip: ", (0, jsx_runtime_1.jsx)(Tag_1.Tag, { children: toolTipTokens.join(', ') })] })), cellTags && (0, jsx_runtime_1.jsxs)(Flex_1.Box, { children: ["Cell: ", cellTags] })] }));
+    const items = buildStyledColumnRatingStyleSummaryStrings(rating, {
+        includeEmptyTooltip: true,
+    });
+    return (0, SummaryColorTag_1.renderSummaryStringTags)(items);
 };
 exports.renderStyledColumnRatingSummary = renderStyledColumnRatingSummary;
-// ---------------------------------------------------------------------------
-// Wizard validation
-// ---------------------------------------------------------------------------
 const isValidRatingStyle = (data) => {
     const rating = data.RatingStyle;
     if (!rating) {
@@ -173,8 +156,7 @@ const StyledColumnWizardRatingSection = (props) => {
             : current.filter((t) => t !== token);
         update({ ToolTipText: next });
     };
-    const previewCellChrome = React.useMemo(() => getRatingCellChromeCss(rating.Cell), [rating.Cell]);
-    return ((0, jsx_runtime_1.jsxs)(Flex_1.Box, { children: [(0, jsx_runtime_1.jsxs)(Flex_1.Flex, { alignItems: "center", className: "twa:mb-3 twa:p-3 twa:rounded-standard twa:border twa:border-border twa:gap-3", children: [(0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:text-3 twa:font-medium", children: "Preview:" }), (0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:inline-flex twa:items-center twa:box-border", style: previewCellChrome, children: (0, jsx_runtime_1.jsx)(RatingPreview, { rating: rating }) }), (0, jsx_runtime_1.jsxs)(Flex_1.Box, { className: "twa:text-2 twa:opacity-70", children: ["(sample value ", (rating.Max ?? DEFAULT_MAX) * 0.7, ")"] })] }), (0, jsx_runtime_1.jsxs)(Card_1.Card, { shadow: false, className: "twa:mb-3", children: [(0, jsx_runtime_1.jsx)(Card_1.Card.Title, { children: "Icon" }), (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.jsx)(FormLayout_1.FormRow, { label: "Max:", children: (0, jsx_runtime_1.jsxs)(Flex_1.Flex, { alignItems: "center", className: "twa:gap-2", children: [(0, jsx_runtime_1.jsx)(Input_1.default, { type: "number", min: 1, step: 1, value: rating.Max ?? '', placeholder: String(DEFAULT_MAX), style: { width: 80 }, onChange: (event) => {
+    return ((0, jsx_runtime_1.jsxs)(Flex_1.Box, { children: [(0, jsx_runtime_1.jsxs)(Card_1.Card, { shadow: false, className: "twa:mb-3", children: [(0, jsx_runtime_1.jsx)(Card_1.Card.Title, { children: "Icon" }), (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.jsx)(FormLayout_1.FormRow, { label: "Max:", children: (0, jsx_runtime_1.jsxs)(Flex_1.Flex, { alignItems: "center", className: "twa:gap-2", children: [(0, jsx_runtime_1.jsx)(Input_1.default, { type: "number", min: 1, step: 1, value: rating.Max ?? '', placeholder: String(StyledColumnRatingPreview_1.DEFAULT_RATING_MAX), style: { width: 80 }, onChange: (event) => {
                                                     const raw = event.target.value;
                                                     if (raw === '' || raw == null) {
                                                         update({ Max: undefined });
@@ -184,7 +166,7 @@ const StyledColumnWizardRatingSection = (props) => {
                                                     update({
                                                         Max: Number.isFinite(parsed) && parsed >= 1 ? Math.floor(parsed) : undefined,
                                                     });
-                                                } }), (0, jsx_runtime_1.jsx)(Flex_1.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)" })] }) }), (0, jsx_runtime_1.jsx)(FormLayout_1.FormRow, { label: "Icon:", 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: rating.Icon ?? DEFAULT_ICON, onValueChange: (v) => update({ Icon: v }), items: ICON_CHOICES }) }) }), (0, jsx_runtime_1.jsx)(FormLayout_1.FormRow, { label: "Filled Colour:", children: (0, jsx_runtime_1.jsx)(ColorPicker_1.ColorPicker, { disabled: disabled, api: api, value: getDisplayedFilledColor(rating), onChange: (c) => update({ FilledColor: c }) }) }), (0, jsx_runtime_1.jsx)(FormLayout_1.FormRow, { label: "Empty Colour:", children: (0, jsx_runtime_1.jsx)(ColorPicker_1.ColorPicker, { disabled: disabled, api: api, value: getDisplayedEmptyColor(rating), onChange: (c) => update({ EmptyColor: c }) }) }), (0, jsx_runtime_1.jsx)(FormLayout_1.FormRow, { label: "Icon Size (px):", children: (0, jsx_runtime_1.jsxs)(Flex_1.Flex, { alignItems: "center", className: "twa:gap-2", children: [(0, jsx_runtime_1.jsx)(Input_1.default, { type: "number", min: 4, step: 1, value: rating.Size ?? '', placeholder: String(DEFAULT_SIZE), style: { width: 80 }, onChange: (event) => {
+                                                } }), (0, jsx_runtime_1.jsx)(Flex_1.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)" })] }) }), (0, jsx_runtime_1.jsx)(FormLayout_1.FormRow, { label: "Icon:", 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: rating.Icon ?? StyledColumnRatingPreview_1.DEFAULT_RATING_ICON, onValueChange: (v) => update({ Icon: v }), items: ICON_CHOICES }) }) }), (0, jsx_runtime_1.jsx)(FormLayout_1.FormRow, { label: "Filled Colour:", children: (0, jsx_runtime_1.jsx)(ColorPicker_1.ColorPicker, { disabled: disabled, api: api, value: getDisplayedFilledColor(rating), onChange: (c) => update({ FilledColor: c }) }) }), (0, jsx_runtime_1.jsx)(FormLayout_1.FormRow, { label: "Empty Colour:", children: (0, jsx_runtime_1.jsx)(ColorPicker_1.ColorPicker, { disabled: disabled, api: api, value: getDisplayedEmptyColor(rating), onChange: (c) => update({ EmptyColor: c }) }) }), (0, jsx_runtime_1.jsx)(FormLayout_1.FormRow, { label: "Icon Size (px):", children: (0, jsx_runtime_1.jsxs)(Flex_1.Flex, { alignItems: "center", className: "twa:gap-2", children: [(0, jsx_runtime_1.jsx)(Input_1.default, { type: "number", min: 4, step: 1, value: rating.Size ?? '', placeholder: String(StyledColumnRatingPreview_1.DEFAULT_RATING_SIZE), style: { width: 80 }, onChange: (event) => {
                                                     const raw = event.target.value;
                                                     if (raw === '' || raw == null) {
                                                         update({ Size: undefined });
@@ -194,7 +176,7 @@ const StyledColumnWizardRatingSection = (props) => {
                                                     update({
                                                         Size: Number.isFinite(parsed) && parsed >= 4 ? parsed : undefined,
                                                     });
-                                                } }), (0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:text-xs twa:opacity-70 twa:min-w-0 twa:shrink", children: "Square pixel size of each icon" })] }) }), (0, jsx_runtime_1.jsx)(FormLayout_1.FormRow, { label: "Icon Gap (px):", children: (0, jsx_runtime_1.jsxs)(Flex_1.Flex, { alignItems: "center", className: "twa:gap-2", children: [(0, jsx_runtime_1.jsx)(Input_1.default, { type: "number", min: 0, step: 1, value: rating.Gap ?? '', placeholder: String(DEFAULT_GAP), style: { width: 80 }, onChange: (event) => {
+                                                } }), (0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:text-xs twa:opacity-70 twa:min-w-0 twa:shrink", children: "Square pixel size of each icon" })] }) }), (0, jsx_runtime_1.jsx)(FormLayout_1.FormRow, { label: "Icon Gap (px):", children: (0, jsx_runtime_1.jsxs)(Flex_1.Flex, { alignItems: "center", className: "twa:gap-2", children: [(0, jsx_runtime_1.jsx)(Input_1.default, { type: "number", min: 0, step: 1, value: rating.Gap ?? '', placeholder: String(StyledColumnRatingPreview_1.DEFAULT_RATING_GAP), style: { width: 80 }, onChange: (event) => {
                                                     const raw = event.target.value;
                                                     if (raw === '' || raw == null) {
                                                         update({ Gap: undefined });
@@ -204,7 +186,7 @@ const StyledColumnWizardRatingSection = (props) => {
                                                     update({
                                                         Gap: Number.isFinite(parsed) && parsed >= 0 ? parsed : undefined,
                                                     });
-                                                } }), (0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:text-xs twa:opacity-70 twa:min-w-0 twa:shrink", children: "Pixel space between adjacent icons" })] }) }), (0, jsx_runtime_1.jsx)(FormLayout_1.FormRow, { label: "Allow Half Icons:", children: (0, jsx_runtime_1.jsx)(CheckBox_1.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)" }) })] }) })] }), (0, jsx_runtime_1.jsxs)(Card_1.Card, { shadow: false, className: "twa:mb-3", children: [(0, jsx_runtime_1.jsx)(Card_1.Card.Title, { children: "Text" }), (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.jsx)(FormLayout_1.FormRow, { label: "Show Value:", children: (0, jsx_runtime_1.jsx)(CheckBox_1.CheckBox, { disabled: disabled, className: "twa:ml-2", checked: rating.ShowValue ?? false, onChange: (checked) => update({ ShowValue: checked }), children: "Display the numeric value beside the icons" }) }), (0, jsx_runtime_1.jsx)(FormLayout_1.FormRow, { label: "Tooltip:", children: (0, jsx_runtime_1.jsxs)(Flex_1.Flex, { flexDirection: "column", className: "twa:gap-1 twa:ml-2", children: [(0, jsx_runtime_1.jsx)(CheckBox_1.CheckBox, { disabled: disabled, checked: rating.ToolTipText?.includes('CellValue') ?? false, onChange: (checked) => toggleToolTipText('CellValue', checked), children: "Cell Value" }), (0, jsx_runtime_1.jsx)(CheckBox_1.CheckBox, { disabled: disabled, checked: rating.ToolTipText?.includes('PercentageValue') ?? false, onChange: (checked) => toggleToolTipText('PercentageValue', checked), children: "Percentage Value (value \u00F7 Max)" })] }) })] }) })] }), (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: "Cell" }), (0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:text-xs twa:opacity-70 twa:font-normal twa:max-w-[500px]", children: "Optional Cell Style properties overrides Format Column properties)" })] }), (0, jsx_runtime_1.jsx)(Card_1.Card.Body, { children: (0, jsx_runtime_1.jsx)(StyledColumnSliceStyleEditors_1.StyledColumnCellStyleEditor, { api: api, disabled: disabled, value: rating.Cell, onChange: (next) => {
+                                                } }), (0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:text-xs twa:opacity-70 twa:min-w-0 twa:shrink", children: "Pixel space between adjacent icons" })] }) }), (0, jsx_runtime_1.jsx)(FormLayout_1.FormRow, { label: "Allow Half Icons:", children: (0, jsx_runtime_1.jsx)(CheckBox_1.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)" }) })] }) })] }), (0, jsx_runtime_1.jsxs)(Card_1.Card, { shadow: false, className: "twa:mb-3", children: [(0, jsx_runtime_1.jsx)(Card_1.Card.Title, { children: "Text" }), (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.jsx)(FormLayout_1.FormRow, { label: "Show Value:", children: (0, jsx_runtime_1.jsx)(CheckBox_1.CheckBox, { disabled: disabled, className: "twa:ml-2", checked: rating.ShowValue ?? false, onChange: (checked) => update({ ShowValue: checked }), children: "Display the numeric value beside the icons" }) }), (0, jsx_runtime_1.jsx)(FormLayout_1.FormRow, { label: "Tooltip:", children: (0, jsx_runtime_1.jsxs)(Flex_1.Flex, { flexDirection: "column", className: "twa:gap-1 twa:ml-2", children: [(0, jsx_runtime_1.jsx)(CheckBox_1.CheckBox, { disabled: disabled, checked: rating.ToolTipText?.includes('CellValue') ?? false, onChange: (checked) => toggleToolTipText('CellValue', checked), children: "Cell Value" }), (0, jsx_runtime_1.jsx)(CheckBox_1.CheckBox, { disabled: disabled, checked: rating.ToolTipText?.includes('PercentageValue') ?? false, onChange: (checked) => toggleToolTipText('PercentageValue', checked), children: "Percentage Value (value \u00F7 Max)" })] }) })] }) })] }), (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" }), (0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:text-xs twa:opacity-70 twa:font-normal twa:max-w-[500px]", children: "Optional Cell Style properties overrides Format Column properties)" })] }), (0, jsx_runtime_1.jsx)(Card_1.Card.Body, { children: (0, jsx_runtime_1.jsx)(StyledColumnSliceStyleEditors_1.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

@@ -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 styledColumnRowKindSupport_1 = require("../../../Utilities/Helpers/styledColumnRowKindSupport");
-const iconStyledColumnColumnSupport_1 = require("../../../Utilities/Helpers/iconStyledColumnColumnSupport");
+const utils_1 = require("../../../lib/utils");
+const StyledColumnHelper_1 = require("../../../Utilities/Helpers/StyledColumns/StyledColumnHelper");
+const IconStyleHelper_1 = require("../../../Utilities/Helpers/StyledColumns/IconStyleHelper");
+const CollapsibleWizardCard_1 = require("../../Wizard/CollapsibleWizardCard");
 // ---------------------------------------------------------------------------
 // Row-kind helpers
 // ---------------------------------------------------------------------------
@@ -28,46 +28,37 @@ 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) {
         return true;
     }
-    if (!(0, styledColumnRowKindSupport_1.isStyledColumnRowKindSupported)(styledColumn, kind)) {
+    if (!(0, StyledColumnHelper_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)) {
+    if (!(0, StyledColumnHelper_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 !scope[StyledColumnHelper_1.STYLED_COLUMN_ROW_KIND_EXCLUDE_KEY[kind]];
     }
     return defaultRowKindIncluded(styledColumn, kind);
 };
 const collectIncludedRowKinds = (styledColumn) => {
-    return styledColumnRowKindSupport_1.STYLED_COLUMN_ROW_KINDS.filter((k) => isRowKindIncluded(styledColumn, k));
+    return StyledColumnHelper_1.STYLED_COLUMN_ROW_KINDS.filter((k) => isRowKindIncluded(styledColumn, k));
 };
 // ---------------------------------------------------------------------------
 // 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
 // ---------------------------------------------------------------------------
@@ -86,7 +86,7 @@ const isValidStyledColumnScope = (data, api) => {
         return 'Please select a column for the Styled Column.';
     }
     if (data.IconStyle &&
-        (0, iconStyledColumnColumnSupport_1.isUnsupportedColumnDataTypeForIconStyle)(api.columnApi.getColumnDataTypeForColumnId(data.ColumnId))) {
+        (0, IconStyleHelper_1.isUnsupportedColumnDataTypeForIconStyle)(api.columnApi.getColumnDataTypeForColumnId(data.ColumnId))) {
         return 'Icon Style applies to scalar cell values only. Choose a numeric or plain text column, or use Badge Style for array columns.';
     }
     if (collectIncludedRowKinds(data).length === 0) {
@@ -95,12 +95,15 @@ 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: StyledColumnHelper_1.STYLED_COLUMN_ROW_KINDS.map((kind) => {
+        const supported = (0, StyledColumnHelper_1.isStyledColumnRowKindSupported)(data, kind);
+        const disabledReason = (0, StyledColumnHelper_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);
+        const next = (0, StyledColumnHelper_1.sanitizeStyledColumnRowScope)(data);
         if (!next) {
             return;
         }
@@ -123,23 +126,18 @@ 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;
         }
         const dt = api.columnApi.getColumnDataTypeForColumnId(data.ColumnId);
-        if ((0, iconStyledColumnColumnSupport_1.isUnsupportedColumnDataTypeForIconStyle)(dt)) {
+        if ((0, IconStyleHelper_1.isUnsupportedColumnDataTypeForIconStyle)(dt)) {
             props.onChange({
                 ...data,
                 ColumnId: undefined,
             });
         }
     }, [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)) {
+        if (!(0, StyledColumnHelper_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'),
@@ -224,23 +212,21 @@ const StyledColumnWizardScopeSection = (props) => {
         };
         const nextScope = {
             ...baseScope,
-            [styledColumnRowKindSupport_1.STYLED_COLUMN_ROW_KIND_EXCLUDE_KEY[kind]]: !include,
+            [StyledColumnHelper_1.STYLED_COLUMN_ROW_KIND_EXCLUDE_KEY[kind]]: !include,
         };
         props.onChange({
             ...data,
             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-text-on-defaultbackground/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-text-on-defaultbackground/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/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,37 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.BarStyleCellTextLayoutEditor = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const BarStylesHelper_1 = require("../../../../../Utilities/Helpers/StyledColumns/BarStylesHelper");
+const CheckBox_1 = require("../../../../../components/CheckBox");
+const Flex_1 = require("../../../../../components/Flex");
+const FormLayout_1 = require("../../../../../components/FormLayout");
+const NewSelect_1 = require("../../../../../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' },
+];
+const BarStyleCellTextLayoutEditor = ({ disabled, cellTextProperties, onToggle, onPlacementChange }) => {
+    const layout = (0, BarStylesHelper_1.resolveBarStyleCellTextLayout)(cellTextProperties);
+    return ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: ROWS.map(({ token, label, key }) => {
+            const placement = layout[key];
+            const isShown = Boolean(placement);
+            const rowDisabled = disabled || !isShown;
+            return ((0, jsx_runtime_1.jsx)(FormLayout_1.FormRow, { label: label, children: (0, jsx_runtime_1.jsxs)(Flex_1.Flex, { alignItems: "center", className: "twa:gap-3", children: [(0, jsx_runtime_1.jsx)(CheckBox_1.CheckBox, { disabled: disabled, checked: isShown, onChange: (checked) => onToggle(token, checked) }), (0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:w-[140px]", children: (0, jsx_runtime_1.jsx)(NewSelect_1.SingleSelect, { className: "twa:w-full", disabled: rowDisabled, value: placement?.Horizontal ?? 'Left', onValueChange: (v) => onPlacementChange(token, {
+                                    Horizontal: v,
+                                }), items: HORIZONTAL_CHOICES }) }), (0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:w-[140px]", children: (0, jsx_runtime_1.jsx)(NewSelect_1.SingleSelect, { className: "twa:w-full", disabled: rowDisabled, value: placement?.Vertical ?? 'Below', onValueChange: (v) => onPlacementChange(token, {
+                                    Vertical: v,
+                                }), items: VERTICAL_CHOICES }) })] }) }, token));
+        }) }));
+};
+exports.BarStyleCellTextLayoutEditor = BarStyleCellTextLayoutEditor;

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,62 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.shouldShowBarStyleCellTextOutsideBar = exports.BarStyleCellTextPreview = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const BarStylesHelper_1 = require("../../../../../Utilities/Helpers/StyledColumns/BarStylesHelper");
+const Flex_1 = require("../../../../../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 }) => ((0, jsx_runtime_1.jsx)(Flex_1.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 ((0, jsx_runtime_1.jsx)(Flex_1.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).
+ */
+const BarStyleCellTextPreview = ({ className, style, cellTextProperties, labels, mergedOverlayClassName, vertical }) => {
+    if (!labels.cellValue && !labels.percentage) {
+        return null;
+    }
+    const slots = (0, BarStylesHelper_1.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 ((0, jsx_runtime_1.jsx)(CellTextRow, { className: usedClassName, style: style, slots: bandSlots.map((s) => ({ horizontal: s.horizontal, text: s.text })) }));
+};
+exports.BarStyleCellTextPreview = BarStyleCellTextPreview;
+const shouldShowBarStyleCellTextOutsideBar = (cellTextProperties, hasCellText) => {
+    if (!hasCellText || !(0, BarStylesHelper_1.hasBarStyleCellTextConfigured)(cellTextProperties)) {
+        return false;
+    }
+    const { hasAbove, hasBelow } = (0, BarStylesHelper_1.getBarStyleCellTextSlotPresence)(cellTextProperties);
+    return hasAbove || hasBelow;
+};
+exports.shouldShowBarStyleCellTextOutsideBar = shouldShowBarStyleCellTextOutsideBar;

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,20 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.BulletRangesSummaryPreview = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const Flex_1 = require("../../../../../components/Flex");
+const Tag_1 = require("../../../../../components/Tag");
+const StyleHelper_1 = require("../../../../../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)]';
+const BulletRangesSummaryPreview = ({ bulletStyle }) => {
+    const ranges = bulletStyle.CellRanges ?? [];
+    if (!ranges.length) {
+        return (0, jsx_runtime_1.jsx)(Tag_1.Tag, { children: "No bands defined" });
+    }
+    let postfix = '';
+    if (bulletStyle.RangeValueType === 'Percentage') {
+        postfix = '%';
+    }
+    return ((0, jsx_runtime_1.jsx)(Flex_1.Flex, { flexDirection: "column", className: "twa:gap-2", children: ranges.map((range, i) => ((0, jsx_runtime_1.jsxs)(Flex_1.Flex, { alignItems: "center", className: "twa:flex-wrap twa:gap-2", children: [(0, jsx_runtime_1.jsxs)(Tag_1.Tag, { children: [range.Min, postfix, " \u2192 ", range.Max, postfix] }), (0, jsx_runtime_1.jsx)(Flex_1.Box, { className: stripClassName, style: { background: (0, StyleHelper_1.getVariableColor)(range.Color) } })] }, i))) }));
+};
+exports.BulletRangesSummaryPreview = BulletRangesSummaryPreview;