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

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,9 @@ 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 { DEFAULT_RATING_GAP, DEFAULT_RATING_ICON, DEFAULT_RATING_MAX, DEFAULT_RATING_SIZE, StyledColumnRatingPreviewCard, } from './StyledColumnWizardStyleSection/Components/StyledColumnRatingPreview';
 const STYLE_FORM_SIZES = ['200px', '1fr'];
 const ICON_CHOICES = [
     { value: 'Star', label: 'Star' },
@@ -19,13 +18,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 +83,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 +105,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 (_jsx(Flex, { alignItems: "center", className: "twa:flex-wrap twa:gap-2", children: items.map((item) => (_jsx(Tag, { children: item }, item))) }));
 };
-// ---------------------------------------------------------------------------
-// Wizard validation
-// ---------------------------------------------------------------------------
 export const isValidRatingStyle = (data) => {
     const rating = data.RatingStyle;
     if (!rating) {
@@ -167,8 +148,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 +158,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 +168,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 +178,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 });
                                 }
@@ -207,5 +187,5 @@ export const StyledColumnWizardRatingSection = (props) => {
                                     delete cleaned.Cell;
                                     props.onChange({ ...data, RatingStyle: cleaned });
                                 }
-                            } }) })] })] }));
+                            } }) })] }), _jsx(StyledColumnRatingPreviewCard, { data: data })] }));
 };

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

@@ -0,0 +1,5 @@
+import * as React from 'react';
+import { BulletChartStyle } from '../../../../../AdaptableState/StyledColumnState';
+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.js

@@ -1,8 +1,9 @@
 import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
 import tinycolor from 'tinycolor2';
 import { Box, Flex } from '../../../../../components/Flex';
+import { Tag } from '../../../../../components/Tag';
 import { getVariableColor } from '../../../../../Utilities/Helpers/StyleHelper';
-import { DEFAULT_GRADIENT_MAX_ALPHA, DEFAULT_GRADIENT_MIN_ALPHA, } from '../../../../../Utilities/Helpers/StyledColumnGradientHelper';
+import { DEFAULT_GRADIENT_MAX_ALPHA, DEFAULT_GRADIENT_MIN_ALPHA, isDivergingZeroCellRanges, } from '../../../../../Utilities/Helpers/StyledColumnGradientHelper';
 function clamp01(n) {
     if (Number.isNaN(n)) {
         return 0;
@@ -19,16 +20,9 @@ export function gradientRangeStripCss(color, reverseGradient, minAlpha, maxAlpha
     const c2 = tinycolor(prepared).setAlpha(rightA).toRgbString();
     return `linear-gradient(to right, ${c1}, ${c2})`;
 }
-function isDivergingZeroPair(ranges) {
-    if (!ranges || ranges.length !== 2) {
-        return false;
-    }
-    const [a, b] = ranges;
-    return a.Max === 0 && b.Min === 0;
-}
 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)]';
 function zeroCentredSplitPreview(negativeColor, positiveColor, postfix, minA, maxA) {
-    return (_jsxs(Flex, { flexDirection: "column", className: "twa:gap-2", children: [_jsxs(Flex, { alignItems: "center", className: "twa:flex-wrap twa:gap-2", children: [_jsxs(Box, { className: "twa:text-sm", children: ["Col-Min", postfix, " \u2192 0", postfix] }), _jsx(Box, { className: "twa:text-xs twa:opacity-50", children: "|" }), _jsxs(Box, { className: "twa:text-sm", children: ["0", postfix, " \u2192 Col-Max", postfix] })] }), _jsxs(Flex, { className: `${stripClassName} twa:w-[200px]`, children: [_jsx(Box, { className: "twa:flex-1", style: {
+    return (_jsxs(Flex, { flexDirection: "column", className: "twa:gap-2", children: [_jsxs(Flex, { alignItems: "center", className: "twa:flex-wrap twa:gap-2", children: [_jsxs(Tag, { children: ["Col-Min", postfix, " \u2192 0", postfix] }), _jsxs(Tag, { children: ["0", postfix, " \u2192 Col-Max", postfix] })] }), _jsxs(Flex, { className: `${stripClassName} twa:w-[200px]`, children: [_jsx(Box, { className: "twa:flex-1", style: {
                             background: gradientRangeStripCss(negativeColor, true, minA, maxA),
                         } }), _jsx(Box, { className: "twa:flex-1", style: {
                             background: gradientRangeStripCss(positiveColor, false, minA, maxA),
@@ -47,15 +41,15 @@ export const GradientRangesSummaryPreview = (props) => {
         return zeroCentredSplitPreview(props.zeroCentred.NegativeColor, props.zeroCentred.PositiveColor, postfix, minA, maxA);
     }
     const ranges = props.ranges ?? [];
-    if (isDivergingZeroPair(ranges)) {
+    if (isDivergingZeroCellRanges(ranges)) {
         const [r0, r1] = ranges;
-        return (_jsxs(Flex, { flexDirection: "column", className: "twa:gap-2", children: [_jsxs(Flex, { alignItems: "center", className: "twa:flex-wrap twa:gap-2", children: [_jsxs(Box, { className: "twa:text-sm", children: [r0.Min, postfix, " \u2192 ", r0.Max, postfix] }), _jsx(Box, { className: "twa:text-xs twa:opacity-50", children: "|" }), _jsxs(Box, { className: "twa:text-sm", children: [r1.Min, postfix, " \u2192 ", r1.Max, postfix] })] }), _jsxs(Flex, { className: `${stripClassName} twa:w-[200px]`, children: [_jsx(Box, { className: "twa:flex-1", style: {
+        return (_jsxs(Flex, { flexDirection: "column", className: "twa:gap-2", children: [_jsxs(Flex, { alignItems: "center", className: "twa:flex-wrap twa:gap-2", children: [_jsxs(Tag, { children: [r0.Min, postfix, " \u2192 ", r0.Max, postfix] }), _jsxs(Tag, { children: [r1.Min, postfix, " \u2192 ", r1.Max, postfix] })] }), _jsxs(Flex, { className: `${stripClassName} twa:w-[200px]`, children: [_jsx(Box, { className: "twa:flex-1", style: {
                                 background: gradientRangeStripCss(r0.Color, !!r0.ReverseGradient, minA, maxA),
                             } }), _jsx(Box, { className: "twa:flex-1", style: {
                                 background: gradientRangeStripCss(r1.Color, !!r1.ReverseGradient, minA, maxA),
                             } })] })] }));
     }
-    return (_jsx(Flex, { flexDirection: "column", className: "twa:gap-2", children: ranges.map((r, i) => (_jsxs(Flex, { alignItems: "center", className: "twa:flex-wrap twa:gap-2", children: [_jsxs(Box, { className: "twa:text-sm twa:min-w-[120px]", children: [r.Min, postfix, " to ", r.Max, postfix] }), _jsx(Box, { className: stripClassName, style: {
+    return (_jsx(Flex, { flexDirection: "column", className: "twa:gap-2", children: ranges.map((r, i) => (_jsxs(Flex, { alignItems: "center", className: "twa:flex-wrap twa:gap-2", children: [_jsxs(Tag, { children: [r.Min, postfix, " \u2192 ", r.Max, postfix] }), _jsx(Box, { className: stripClassName, style: {
                         background: gradientRangeStripCss(r.Color, !!r.ReverseGradient, minA, maxA),
                     } })] }, i))) }));
 };
@@ -65,7 +59,7 @@ export const GradientColumnComparisonSummaryPreview = (props) => {
     const fmt = (v) => isNaN(Number(v))
         ? `[${props.api.columnApi.getFriendlyNameForColumnId(String(v))}]`
         : v;
-    return (_jsxs(Flex, { flexDirection: "column", className: "twa:gap-2", children: [_jsxs(Box, { className: "twa:text-sm", children: ["Min: ", fmt(props.columnComparison.MinValue), " \u2014 Max:", ' ', fmt(props.columnComparison.MaxValue)] }), _jsx(Box, { className: `${stripClassName} twa:w-[200px]`, style: {
+    return (_jsxs(Flex, { flexDirection: "column", className: "twa:gap-2", children: [_jsxs(Tag, { children: ["Min: ", fmt(props.columnComparison.MinValue), " \u2014 Max: ", fmt(props.columnComparison.MaxValue)] }), _jsx(Box, { className: `${stripClassName} twa:w-[200px]`, style: {
                     background: gradientRangeStripCss(props.columnComparison.Color, false, minA, maxA),
                 } })] }));
 };

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

@@ -2,12 +2,12 @@ import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
 import { useAdaptable } from '../../../../AdaptableContext';
 import { PercentBarStylePreview } from './PercentBarStylePreview';
 import { Box, Flex } from '../../../../../components/Flex';
+import { Tag } from '../../../../../components/Tag';
 export const PercentBarColumnComparisonPreview = (props) => {
     const { api } = useAdaptable();
     const columnComparison = props.percentBarStyle.ColumnComparison;
-    return (_jsxs(Flex, { alignItems: "center", className: "twa:mr-3", children: [_jsxs(Box, { className: "twa:basis-[120px] twa:mr-3", children: [isNaN(Number(columnComparison.MinValue))
-                        ? '[' + api.columnApi.getFriendlyNameForColumnId(String(columnComparison.MinValue)) + ']'
-                        : columnComparison.MinValue, ' ', "to", ' ', isNaN(Number(columnComparison.MaxValue))
-                        ? '[' + api.columnApi.getFriendlyNameForColumnId(String(columnComparison.MaxValue)) + ']'
-                        : columnComparison.MaxValue, ' '] }), _jsx(PercentBarStylePreview, { backgroundColor: columnComparison.Color, barBackgroundColor: props.percentBarStyle.BackColor, cellText: props.percentBarStyle.CellText, toolTipText: props.percentBarStyle.ToolTipText })] }));
+    const fmt = (v) => isNaN(Number(v))
+        ? `[${api.columnApi.getFriendlyNameForColumnId(String(v))}]`
+        : v;
+    return (_jsxs(Flex, { flexDirection: "column", className: "twa:gap-2", children: [_jsxs(Tag, { children: ["Min: ", fmt(columnComparison.MinValue), " \u2014 Max: ", fmt(columnComparison.MaxValue)] }), _jsx(Box, { className: "twa:max-w-[200px]", children: _jsx(PercentBarStylePreview, { backgroundColor: props.percentBarStyle.BackColor, barBackgroundColor: columnComparison.Color }) })] }));
 };

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

@@ -1,10 +1,11 @@
-import { jsxs as _jsxs, jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
+import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
 import { PercentBarStylePreview } from './PercentBarStylePreview';
-import { Flex } from '../../../../../components/Flex';
+import { Box, Flex } from '../../../../../components/Flex';
+import { Tag } from '../../../../../components/Tag';
 export const PercentBarPreview = (props) => {
     let postfix = '';
     if (props.percentBarStyle.RangeValueType === 'Percentage') {
         postfix = '%';
     }
-    return (_jsx(_Fragment, { children: props.percentBarStyle.CellRanges.map((range, i) => (_jsxs(Flex, { alignItems: "stretch", className: "twa:mr-3 twa:mb-2", children: [_jsxs(Flex, { className: "twa:basis-[120px] twa:mr-3", alignItems: "center", children: [range.Min, postfix, " to ", range.Max, postfix] }), _jsx(PercentBarStylePreview, { backgroundColor: props.percentBarStyle.BackColor, barBackgroundColor: range.Color, cellText: props.percentBarStyle.CellText, toolTipText: props.percentBarStyle.ToolTipText })] }, i))) }));
+    return (_jsx(Flex, { flexDirection: "column", className: "twa:gap-2", children: props.percentBarStyle.CellRanges.map((range, i) => (_jsxs(Flex, { alignItems: "stretch", className: "twa:flex-wrap twa:gap-2", children: [_jsxs(Tag, { children: [range.Min, postfix, " \u2192 ", range.Max, postfix] }), _jsx(Box, { className: "twa:flex-1 twa:min-w-[120px]", children: _jsx(PercentBarStylePreview, { backgroundColor: props.percentBarStyle.BackColor, barBackgroundColor: range.Color }) })] }, i))) }));
 };

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

@@ -1,8 +1,9 @@
 import * as React from 'react';
-import { CellTextOptions } from '../../../../../types';
+/**
+ * Compact range-colour strip for Percent Bar range summaries.
+ * Cell text / origin / font are shown in `StyledColumnPercentBarPreview`.
+ */
 export declare const PercentBarStylePreview: React.FunctionComponent<{
-    backgroundColor: string;
+    backgroundColor?: string | null;
     barBackgroundColor?: string;
-    cellText?: CellTextOptions;
-    toolTipText?: CellTextOptions;
 }>;

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

@@ -1,17 +1,15 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx } from "react/jsx-runtime";
 import { Box, Flex } from '../../../../../components/Flex';
-const getText = (options) => {
-    let text = '';
-    if (options && options.includes('CellValue')) {
-        text += '20';
-    }
-    if (options && options.includes('PercentageValue')) {
-        text += ' (50%)';
-    }
-    return text.trim();
-};
+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)]';
+/**
+ * Compact range-colour strip for Percent Bar range summaries.
+ * Cell text / origin / font are shown in `StyledColumnPercentBarPreview`.
+ */
 export const PercentBarStylePreview = (props) => {
-    const cellText = getText(props.cellText);
-    const tooltip = getText(props.toolTipText);
-    return (_jsxs(Box, { title: tooltip, className: "twa:flex-1", children: [_jsx(Flex, { style: { backgroundColor: props.backgroundColor }, className: `twa:flex-1 ${cellText ? 'twa:h-[8px]' : 'twa:h-[18px]'}`, children: _jsx(Box, { className: "twa:basis-[50%]", style: { background: props.barBackgroundColor } }) }), cellText && _jsx(Box, { className: "twa:text-3", children: cellText })] }));
+    const trackColor = props.backgroundColor ? getVariableColor(props.backgroundColor) : undefined;
+    const barColor = props.barBackgroundColor
+        ? getVariableColor(props.barBackgroundColor)
+        : undefined;
+    return (_jsx(Box, { className: stripClassName, children: _jsx(Flex, { className: "twa:h-full twa:relative", style: trackColor ? { backgroundColor: trackColor } : undefined, children: barColor && (_jsx(Box, { className: "twa:absolute twa:top-0 twa:left-0 twa:h-full twa:w-1/2", style: { background: barColor } })) }) }));
 };

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

@@ -0,0 +1,5 @@
+import * as React from 'react';
+import { RangeBarStyle } from '../../../../../AdaptableState/StyledColumnState';
+export declare const RangeBarRangesSummaryPreview: React.FunctionComponent<{
+    rangeStyle: RangeBarStyle;
+}>;

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

@@ -0,0 +1,16 @@
+import { jsxs as _jsxs, jsx as _jsx } 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 RangeBarRangesSummaryPreview = ({ rangeStyle }) => {
+    const ranges = rangeStyle.CellRanges ?? [];
+    if (!ranges.length) {
+        return null;
+    }
+    let postfix = '';
+    if (rangeStyle.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/StyledColumnBadgePreview.d.ts

@@ -8,3 +8,6 @@ import { StyledColumn } from '../../../../../types';
 export declare const StyledColumnBadgePreview: React.FunctionComponent<React.PropsWithChildren<{
     data: StyledColumn;
 }>>;
+export declare const StyledColumnBadgePreviewCard: React.FunctionComponent<React.PropsWithChildren<{
+    data: StyledColumn;
+}>>;

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

@@ -1,13 +1,29 @@
-import { jsx as _jsx } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { DEFAULT_INTEGER_DISPLAY_VALUE, DEFAULT_STRING_DISPLAY_VALUE, } from '../../../../../Utilities/Constants/GeneralConstants';
+import { convertAdaptableStyleToCSS } from '../../../../../Utilities/Helpers/StyleHelper';
 import { useAdaptable } from '../../../../AdaptableContext';
 import { Badge } from '../../../../Components/Badge';
 import { Box } from '../../../../../components/Flex';
+import { Card } from '../../../../../components/Card';
+import { Tag } from '../../../../../components/Tag';
 const OVERFLOW_CLASS = {
     Truncate: 'ab-Badge__wrapper--truncate',
     Wrap: 'ab-Badge__wrapper--wrap',
     Scroll: 'ab-Badge__wrapper--scroll',
 };
+const PREVIEW_CELL_CLASS = 'ab-BadgePreviewCell twa:min-w-[140px] twa:min-h-[32px] twa:px-2 twa:py-1 twa:rounded-standard twa:border twa:border-[color-mix(in_srgb,var(--ab-color-foreground)_15%,transparent)]';
+const resolveBadgeRowJustify = (alignment) => {
+    switch (alignment) {
+        case 'Center':
+            return 'center';
+        case 'Right':
+            return 'flex-end';
+        case 'Left':
+            return 'flex-start';
+        default:
+            return null;
+    }
+};
 /**
  * Pixel-parity preview of the badges as they would render in the cell.
  * Uses the same wrapper/badge classes (and the same `Badge` component) as
@@ -17,13 +33,24 @@ export const StyledColumnBadgePreview = ({ data }) => {
     const adaptable = useAdaptable();
     const badgeStyle = data.BadgeStyle;
     if (!badgeStyle || !badgeStyle.Badges || badgeStyle.Badges.length === 0) {
-        return _jsx("div", { children: "No Badges Defined" });
+        return _jsx(Tag, { children: "No Badges Defined" });
     }
     const overflow = badgeStyle.OverflowMode ?? 'Truncate';
     const wrapperClassName = `ab-Badge__wrapper ${OVERFLOW_CLASS[overflow]}`;
     const spacing = typeof badgeStyle.Spacing === 'number' ? badgeStyle.Spacing : null;
+    const rowJustify = resolveBadgeRowJustify(badgeStyle.Font?.Alignment);
+    const cellStyle = badgeStyle.Cell ? convertAdaptableStyleToCSS(badgeStyle.Cell) : undefined;
     const dataType = adaptable.api.columnApi.getColumnDataTypeForColumnId(data.ColumnId);
-    return (_jsx(Box, { children: _jsx("div", { className: wrapperClassName, style: spacing != null ? { ['--ab-cmp-badge__spacing']: `${spacing}px` } : undefined, children: badgeStyle.Badges.map((badge, index) => {
+    const wrapperStyle = {
+        ...(spacing != null ? { ['--ab-cmp-badge__spacing']: `${spacing}px` } : {}),
+        ...(rowJustify
+            ? {
+                justifyContent: rowJustify,
+                width: '100%',
+            }
+            : {}),
+    };
+    return (_jsx(Box, { className: PREVIEW_CELL_CLASS, style: cellStyle, children: _jsx("div", { className: wrapperClassName, style: wrapperStyle, children: badgeStyle.Badges.map((badge, index) => {
                 const badgeValue = badge.IconOnly
                     ? ''
                     : dataType === 'number'
@@ -32,3 +59,4 @@ export const StyledColumnBadgePreview = ({ data }) => {
                 return (_jsx(Badge, { icon: badge.Icon, pillStyle: badge.PillStyle, iconPosition: badge.IconPosition, shape: badge.Shape, density: badgeStyle.Density ?? 'Normal', iconGap: badge.IconGap, children: badgeValue }, index));
             }) }) }));
 };
+export const StyledColumnBadgePreviewCard = ({ data }) => (_jsxs(Card, { shadow: false, children: [_jsx(Card.Title, { children: _jsx(Box, { className: "twa:font-medium", children: "Preview" }) }), _jsx(Card.Body, { className: "twa:p-1", children: _jsx(StyledColumnBadgePreview, { data: data }) })] }));

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

@@ -0,0 +1,9 @@
+import * as React from 'react';
+import { BulletChartStyle, StyledColumn } from '../../../../../AdaptableState/StyledColumnState';
+export declare const StyledColumnBulletPreview: React.FunctionComponent<React.PropsWithChildren<{
+    data: StyledColumn;
+}>>;
+export declare const StyledColumnBulletPreviewCard: React.FunctionComponent<React.PropsWithChildren<{
+    data: StyledColumn;
+}>>;
+export declare const hasBulletChartRangesConfigured: (bullet: BulletChartStyle | undefined) => boolean;

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

@@ -0,0 +1,58 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { convertAdaptableStyleToCSS } from '../../../../../Utilities/Helpers/StyleHelper';
+import { Box, Flex } from '../../../../../components/Flex';
+import { Card } from '../../../../../components/Card';
+import { Tag } from '../../../../../components/Tag';
+import { StyledColumnBulletChartListPreview } from './StyledColumnChartListPreviews';
+const PREVIEW_CELL_CLASS = 'ab-BulletPreviewCell twa:inline-flex twa:items-center twa:min-w-[180px] twa:min-h-[36px] twa:px-2 twa:py-1 twa:rounded-standard twa:border twa:border-[color-mix(in_srgb,var(--ab-color-foreground)_15%,transparent)]';
+const getBulletPreviewSample = (bullet) => {
+    const ranges = bullet.CellRanges ?? [];
+    const numeric = ranges.filter((range) => typeof range.Min === 'number' && typeof range.Max === 'number');
+    let min = 0;
+    let max = 100;
+    if (numeric.length) {
+        min = Math.min(...numeric.map((range) => range.Min));
+        max = Math.max(...numeric.map((range) => range.Max));
+    }
+    const span = max - min || 1;
+    // Matches the schematic bar width (~58%) in `StyledColumnBulletChartListPreview`.
+    const sampleValue = min + span * 0.58;
+    const valueFraction = (sampleValue - min) / span;
+    return {
+        sampleValue,
+        valueFraction: Math.max(0, Math.min(1, valueFraction)),
+    };
+};
+const formatBulletPreviewCellText = (sampleValue, valueFraction, bullet) => {
+    const parts = [];
+    if (bullet.CellText?.includes('CellValue')) {
+        parts.push(Number.isInteger(sampleValue) ? String(sampleValue) : sampleValue.toFixed(1));
+    }
+    if (bullet.CellText?.includes('PercentageValue')) {
+        parts.push(`${(valueFraction * 100).toFixed(0)}%`);
+    }
+    return parts.join(' ');
+};
+const BulletChartPreviewContent = ({ bullet, }) => {
+    const { sampleValue, valueFraction } = getBulletPreviewSample(bullet);
+    const cellText = formatBulletPreviewCellText(sampleValue, valueFraction, bullet);
+    const hasCellText = Boolean(bullet.CellText?.length && cellText);
+    const textPosition = bullet.CellTextPosition ?? 'Below';
+    const fontStyle = bullet.Font ? convertAdaptableStyleToCSS(bullet.Font) : undefined;
+    const isVertical = bullet.Orientation === 'Vertical';
+    const chartEl = _jsx(StyledColumnBulletChartListPreview, { bullet: bullet });
+    const textEl = hasCellText ? (_jsx(Box, { className: "ab-BulletChart__text twa:text-2 twa:leading-tight twa:truncate twa:max-w-full", style: fontStyle, children: cellText })) : null;
+    if (hasCellText && textPosition === 'Merged') {
+        return (_jsxs(Box, { className: "ab-BulletChart__wrapper twa:relative twa:inline-flex", children: [chartEl, _jsx(Box, { className: "ab-BulletChart__text twa:absolute twa:inset-x-0 twa:top-1/2 twa:-translate-y-1/2 twa:px-1 twa:text-2 twa:truncate twa:pointer-events-none", style: fontStyle, children: cellText })] }));
+    }
+    return (_jsxs(Flex, { className: "ab-BulletChart__wrapper", flexDirection: "column", alignItems: isVertical ? 'center' : 'stretch', style: { justifyContent: 'center', gap: hasCellText ? 2 : 0 }, children: [hasCellText && textPosition === 'Above' && textEl, chartEl, hasCellText && textPosition === 'Below' && textEl] }));
+};
+export const StyledColumnBulletPreview = ({ data }) => {
+    const bullet = data.BulletChartStyle;
+    if (!bullet) {
+        return _jsx(Tag, { children: "No Bullet Chart Style" });
+    }
+    return (_jsx(Box, { className: PREVIEW_CELL_CLASS, children: _jsx(BulletChartPreviewContent, { bullet: bullet }) }));
+};
+export const StyledColumnBulletPreviewCard = ({ data }) => (_jsxs(Card, { shadow: false, children: [_jsx(Card.Title, { children: _jsx(Box, { className: "twa:font-medium", children: "Preview" }) }), _jsx(Card.Body, { className: "twa:p-1", children: _jsx(StyledColumnBulletPreview, { data: data }) })] }));
+export const hasBulletChartRangesConfigured = (bullet) => Boolean(bullet?.CellRanges?.length);

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

@@ -0,0 +1,10 @@
+import * as React from 'react';
+import { StyledColumn } from '../../../../../AdaptableState/StyledColumnState';
+import { AdaptableApi } from '../../../../../Api/AdaptableApi';
+export declare const StyledColumnGradientPreview: React.FunctionComponent<React.PropsWithChildren<{
+    data: StyledColumn;
+    api?: AdaptableApi;
+}>>;
+export declare const StyledColumnGradientPreviewCard: React.FunctionComponent<React.PropsWithChildren<{
+    data: StyledColumn;
+}>>;

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

@@ -0,0 +1,30 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Box, Flex } from '../../../../../components/Flex';
+import { Card } from '../../../../../components/Card';
+import { Tag } from '../../../../../components/Tag';
+import { useAdaptable } from '../../../../AdaptableContext';
+import { getGradientPreviewCellStyle, getGradientPreviewSampleValues, hasGradientRangesConfigured, } from '../../../../../Utilities/Helpers/StyledColumnGradientHelper';
+const formatPreviewValue = (value) => {
+    if (Number.isInteger(value)) {
+        return value.toLocaleString();
+    }
+    return value.toLocaleString(undefined, { maximumFractionDigits: 2 });
+};
+export const StyledColumnGradientPreview = ({ data, api: apiProp }) => {
+    const adaptable = useAdaptable();
+    const api = apiProp ?? adaptable.api;
+    const gs = data.GradientStyle;
+    if (!gs) {
+        return _jsx(Tag, { children: "No Gradient Style" });
+    }
+    if (!hasGradientRangesConfigured(gs)) {
+        return _jsx(Tag, { children: "Define ranges before previewing" });
+    }
+    const sampleValues = getGradientPreviewSampleValues(data, api);
+    if (!sampleValues.length) {
+        return _jsx(Tag, { children: "No preview available" });
+    }
+    const rowNode = api.gridApi?.getRowNodeForIndex(0) ?? null;
+    return (_jsx(Flex, { alignItems: "stretch", className: "twa:flex-wrap twa:gap-2", children: sampleValues.map((value) => (_jsx(Box, { className: "ab-GradientPreviewCell twa:px-2 twa:py-1 twa:min-w-[56px] twa:text-2 twa:text-center twa:rounded-standard twa:border twa:border-[color-mix(in_srgb,var(--ab-color-foreground)_15%,transparent)]", style: getGradientPreviewCellStyle(value, data, api, rowNode), children: formatPreviewValue(value) }, value))) }));
+};
+export const StyledColumnGradientPreviewCard = ({ data }) => (_jsxs(Card, { shadow: false, children: [_jsx(Card.Title, { children: _jsx(Box, { className: "twa:font-medium", children: "Preview" }) }), _jsx(Card.Body, { className: "twa:p-1", children: _jsx(StyledColumnGradientPreview, { data: data }) })] }));

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

@@ -0,0 +1,10 @@
+import * as React from 'react';
+import { StyledColumn } from '../../../../../AdaptableState/StyledColumnState';
+export declare const DEFAULT_ICON_STYLE_SIZE = 18;
+export declare const DEFAULT_ICON_STYLE_GAP = 4;
+export declare const StyledColumnIconPreview: React.FunctionComponent<React.PropsWithChildren<{
+    data: StyledColumn;
+}>>;
+export declare const StyledColumnIconPreviewCard: React.FunctionComponent<React.PropsWithChildren<{
+    data: StyledColumn;
+}>>;