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

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/StyledColumns/GradientStyleHelper';
 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,25 +41,23 @@ 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))) }));
 };
 export const GradientColumnComparisonSummaryPreview = (props) => {
     const minA = props.gradientStyle?.MinAlpha ?? DEFAULT_GRADIENT_MIN_ALPHA;
     const maxA = props.gradientStyle?.MaxAlpha ?? DEFAULT_GRADIENT_MAX_ALPHA;
-    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: {
+    const fmt = (v) => isNaN(Number(v)) ? `[${props.api.columnApi.getFriendlyNameForColumnId(String(v))}]` : v;
+    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/StyledColumns/RangeBarStyle';
+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.js

@@ -1,13 +1,28 @@
 import { jsx as _jsx } 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 { 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,18 +32,30 @@ 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 badgeValue = badge.IconOnly
+    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 iconProps = badge.IconProperties;
+                const badgeValue = iconProps?.IconOnly
                     ? ''
                     : dataType === 'number'
                         ? DEFAULT_INTEGER_DISPLAY_VALUE
                         : DEFAULT_STRING_DISPLAY_VALUE;
-                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));
+                return (_jsx(Badge, { icon: iconProps?.Icon, pillStyle: badge.PillStyle, iconPosition: iconProps?.Position, shape: badge.Shape, density: badgeStyle.Density ?? 'Normal', iconGap: iconProps?.Gap, children: badgeValue }, index));
             }) }) }));
 };

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

@@ -0,0 +1,7 @@
+import * as React from 'react';
+import { StyledColumn } from '../../../../../AdaptableState/StyledColumnState';
+import { BulletChartStyle } from '../../../../../AdaptableState/StyledColumns/BulletChartStyle';
+export declare const StyledColumnBulletPreview: 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,52 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { convertAdaptableStyleToCSS } from '../../../../../Utilities/Helpers/StyleHelper';
+import { buildBarStyleCellTextLabels, getBarStyleCellTextSlotPresence, hasBarStyleCellTextConfigured, } from '../../../../../Utilities/Helpers/StyledColumns/BarStylesHelper';
+import { Box, Flex } from '../../../../../components/Flex';
+import { Tag } from '../../../../../components/Tag';
+import { StyledColumnBulletChartListPreview } from './StyledColumnChartListPreviews';
+import { BarStyleCellTextPreview } from './BarStyleCellTextPreview';
+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 BulletChartPreviewContent = ({ bullet, }) => {
+    const { sampleValue, valueFraction } = getBulletPreviewSample(bullet);
+    const cellTextProperties = bullet.CellTextProperties;
+    const labels = buildBarStyleCellTextLabels(cellTextProperties, Number.isInteger(sampleValue) ? String(sampleValue) : sampleValue.toFixed(1), `${(valueFraction * 100).toFixed(0)}%`);
+    const hasCellText = hasBarStyleCellTextConfigured(cellTextProperties) &&
+        Boolean(labels.cellValue || labels.percentage);
+    const presence = getBarStyleCellTextSlotPresence(cellTextProperties);
+    const fontStyle = bullet.Font ? convertAdaptableStyleToCSS(bullet.Font) : undefined;
+    const isVertical = bullet.Orientation === 'Vertical';
+    const cellTextClassName = 'ab-BulletChart__text twa:text-2 twa:leading-tight twa:truncate twa:max-w-full';
+    const chartEl = _jsx(StyledColumnBulletChartListPreview, { bullet: bullet });
+    // Merged-only with no outside bands → relative container so the overlay sits
+    // on top of the chart, matching the runtime renderer's behaviour.
+    if (hasCellText && presence.hasMerged && !presence.hasAbove && !presence.hasBelow) {
+        return (_jsxs(Box, { className: "ab-BulletChart__wrapper twa:relative twa:inline-flex", children: [chartEl, _jsx(BarStyleCellTextPreview, { mergedOverlayClassName: "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, cellTextProperties: cellTextProperties, labels: labels, vertical: "Merged" })] }));
+    }
+    return (_jsxs(Flex, { className: "ab-BulletChart__wrapper twa:relative", flexDirection: "column", alignItems: isVertical ? 'center' : 'stretch', style: { justifyContent: 'center', gap: hasCellText ? 2 : 0 }, children: [hasCellText && presence.hasAbove && (_jsx(BarStyleCellTextPreview, { className: cellTextClassName, style: fontStyle, cellTextProperties: cellTextProperties, labels: labels, vertical: "Above" })), _jsxs(Box, { className: "twa:relative twa:w-full", style: { display: 'inline-flex' }, children: [chartEl, hasCellText && presence.hasMerged && (_jsx(BarStyleCellTextPreview, { mergedOverlayClassName: "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, cellTextProperties: cellTextProperties, labels: labels, vertical: "Merged" }))] }), hasCellText && presence.hasBelow && (_jsx(BarStyleCellTextPreview, { className: cellTextClassName, style: fontStyle, cellTextProperties: cellTextProperties, labels: labels, vertical: "Below" }))] }));
+};
+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 hasBulletChartRangesConfigured = (bullet) => Boolean(bullet?.CellRanges?.length);

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

@@ -1,5 +1,6 @@
 import * as React from 'react';
-import { BulletChartStyle, RangeBarStyle } from '../../../../../AdaptableState/StyledColumnState';
+import { BulletChartStyle } from '../../../../../AdaptableState/StyledColumns/BulletChartStyle';
+import { RangeBarStyle } from '../../../../../AdaptableState/StyledColumns/RangeBarStyle';
 /**
  * Compact schematic of a Range Bar (bands + track + value / reference markers)
  * for the Styled Columns object list and wizard step summaries.

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

@@ -41,10 +41,10 @@ const DEFAULT_MARKER = 'var(--ab-color-foreground, #333)';
 export const StyledColumnRangeBarListPreview = (props) => {
     const { range } = props;
     const segments = bandSegmentsForPreview(range.CellRanges);
-    const trackFill = range.TrackColor ?? DEFAULT_TRACK;
+    const trackFill = range.Track?.Color ?? DEFAULT_TRACK;
     const valueColor = range.Marker?.Color || DEFAULT_BAR;
-    const refColor = range.ReferenceMarker?.Color || DEFAULT_MARKER;
-    const hasRef = range.Reference != undefined;
+    const refColor = range.Reference?.Marker?.Color || DEFAULT_MARKER;
+    const hasRef = range.Reference?.Value != undefined;
     const isVertical = range.Orientation === 'Vertical';
     return (_jsx(Box, { className: "twa:rounded twa:border twa:border-[color-mix(in_srgb,var(--ab-color-foreground)_12%,transparent)] twa:bg-[color-mix(in_srgb,var(--ab-color-primary)_40%,transparent)] twa:px-1 twa:py-0.5", style: { width: PREVIEW_WIDTH, height: PREVIEW_HEIGHT }, children: _jsxs("svg", { width: "100%", height: "100%", viewBox: `0 0 ${VB_W} ${VB_H}`, preserveAspectRatio: "none", "aria-hidden": true, children: [segments.length === 0 ? (_jsx("rect", { x: "0", y: "0", width: VB_W, height: VB_H, fill: range.BackColor ?? 'transparent' })) : (segments.map((s, i) => (_jsx("rect", { x: s.x0 * VB_W, y: "0", width: (s.x1 - s.x0) * VB_W, height: VB_H, fill: s.color, opacity: 0.55 }, i)))), isVertical ? (_jsxs(_Fragment, { children: [_jsx("rect", { x: VB_W * 0.42, y: "2", width: "5", height: VB_H - 4, rx: "1", fill: trackFill }), hasRef && (_jsx("line", { x1: VB_W * 0.46, y1: "3", x2: VB_W * 0.46, y2: VB_H - 3, stroke: refColor, strokeWidth: "2", vectorEffect: "non-scaling-stroke" })), _jsx("polygon", { points: `${VB_W * 0.52},${VB_H * 0.35} ${VB_W * 0.62},${VB_H * 0.5} ${VB_W * 0.52},${VB_H * 0.65}`, fill: valueColor })] })) : (_jsxs(_Fragment, { children: [_jsx("rect", { x: "2", y: VB_H * 0.38, width: VB_W - 4, height: "5", rx: "1", fill: trackFill }), hasRef && (_jsx("line", { x1: VB_W * 0.38, y1: VB_H * 0.2, x2: VB_W * 0.38, y2: VB_H * 0.8, stroke: refColor, strokeWidth: "2", vectorEffect: "non-scaling-stroke" })), _jsx("polygon", { points: `${VB_W * 0.72},${VB_H * 0.2} ${VB_W * 0.82},${VB_H * 0.5} ${VB_W * 0.72},${VB_H * 0.8}`, fill: valueColor })] }))] }) }));
 };
@@ -55,7 +55,7 @@ export const StyledColumnRangeBarListPreview = (props) => {
 export const StyledColumnBulletChartListPreview = (props) => {
     const { bullet } = props;
     const segments = bandSegmentsForPreview(bullet.CellRanges);
-    const barColor = bullet.BarColor ?? DEFAULT_BAR;
-    const markerColor = bullet.TargetMarker?.Color || DEFAULT_MARKER;
+    const barColor = bullet.Bar?.Color ?? DEFAULT_BAR;
+    const markerColor = bullet.TargetProperties?.Marker?.Color || DEFAULT_MARKER;
     return (_jsx(Box, { className: "twa:rounded twa:border twa:border-[color-mix(in_srgb,var(--ab-color-foreground)_12%,transparent)] twa:bg-[color-mix(in_srgb,var(--ab-color-primary)_40%,transparent)] twa:px-1 twa:py-0.5", style: { width: PREVIEW_WIDTH, height: PREVIEW_HEIGHT }, children: _jsxs("svg", { width: "100%", height: "100%", viewBox: `0 0 ${VB_W} ${VB_H}`, preserveAspectRatio: "none", "aria-hidden": true, children: [segments.length === 0 ? (_jsx("rect", { x: "0", y: "0", width: VB_W, height: VB_H, fill: bullet.BackColor ?? 'transparent' })) : (segments.map((s, i) => (_jsx("rect", { x: s.x0 * VB_W, y: "2", width: (s.x1 - s.x0) * VB_W, height: VB_H - 4, fill: s.color, opacity: 0.5 }, i)))), _jsx("rect", { x: VB_W * 0.04, y: VB_H * 0.35, width: VB_W * 0.58, height: VB_H * 0.3, rx: "1", fill: barColor }), _jsx("line", { x1: VB_W * 0.78, y1: VB_H * 0.12, x2: VB_W * 0.78, y2: VB_H * 0.88, stroke: markerColor, strokeWidth: "2.5", vectorEffect: "non-scaling-stroke" })] }) }));
 };

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

@@ -0,0 +1,7 @@
+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;
+}>>;

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

@@ -0,0 +1,28 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Box, Flex } from '../../../../../components/Flex';
+import { Tag } from '../../../../../components/Tag';
+import { useAdaptable } from '../../../../AdaptableContext';
+import { getGradientPreviewCellStyle, getGradientPreviewSampleValues, hasGradientRangesConfigured, } from '../../../../../Utilities/Helpers/StyledColumns/GradientStyleHelper';
+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))) }));
+};

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

@@ -0,0 +1,7 @@
+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;
+}>>;

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

@@ -0,0 +1,89 @@
+import { jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
+import { isAdaptableCustomIcon, isAdaptableElementIcon, isAdaptableSystemIcon, } from '../../../../../components/Icon';
+import { resolveEffectiveIconStyleMappings } from '../../../../../agGrid/cellRenderers/IconRenderer';
+import { AdaptableIconComponent } from '../../../../Components/AdaptableIconComponent';
+import { Box } from '../../../../../components/Flex';
+import { Tag } from '../../../../../components/Tag';
+import { convertAdaptableStyleToCSS, hasCellBoxStyle, } from '../../../../../Utilities/Helpers/StyleHelper';
+export const DEFAULT_ICON_STYLE_SIZE = 18;
+export const DEFAULT_ICON_STYLE_GAP = 4;
+const PREVIEW_CELL_CLASS = 'ab-IconPreviewCell twa:inline-flex twa:items-center 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 isInlineGlyph = (spec) => typeof spec === 'string';
+const isAdaptableIconSpec = (spec) => !!spec &&
+    (isAdaptableSystemIcon(spec) ||
+        isAdaptableCustomIcon(spec) ||
+        isAdaptableElementIcon(spec));
+function getIconCellChromeCss(cell) {
+    if (!cell || !hasCellBoxStyle(cell)) {
+        return {};
+    }
+    return convertAdaptableStyleToCSS(cell);
+}
+const renderIconSpecForPreview = (spec, size) => {
+    if (isInlineGlyph(spec)) {
+        return (_jsx("span", { className: "ab-IconStyle__glyph", style: {
+                fontSize: size,
+                lineHeight: 1,
+                display: 'inline-flex',
+                alignItems: 'center',
+                justifyContent: 'center',
+            }, children: spec }));
+    }
+    if (isAdaptableIconSpec(spec)) {
+        return _jsx(AdaptableIconComponent, { icon: spec });
+    }
+    return null;
+};
+const buildPreviewText = (mapping, iconStyle) => {
+    const cellTextTokens = iconStyle.CellTextProperties?.CellText ?? [];
+    const formatted = String(mapping.Key);
+    const textParts = [];
+    if (cellTextTokens.includes('CellValue') && formatted) {
+        textParts.push(formatted);
+    }
+    if (cellTextTokens.includes('IconDescription') && mapping.Description) {
+        textParts.push(mapping.Description);
+    }
+    return textParts.length > 0 ? textParts.join(' · ') : undefined;
+};
+const IconCellPreviewTree = ({ iconStyle, mapping }) => {
+    const size = iconStyle.Size ?? DEFAULT_ICON_STYLE_SIZE;
+    const gap = iconStyle.Gap ?? DEFAULT_ICON_STYLE_GAP;
+    const textPosition = iconStyle.CellTextProperties?.CellTextPosition ?? 'After';
+    const text = buildPreviewText(mapping, iconStyle);
+    const fontStyle = iconStyle.Font ? convertAdaptableStyleToCSS(iconStyle.Font) : undefined;
+    const iconNode = renderIconSpecForPreview(mapping.Icon, size);
+    const textNode = text ? (_jsx("span", { className: "ab-IconStyle__text", style: { lineHeight: 1.2, ...fontStyle }, children: text })) : null;
+    if (!iconNode && !textNode) {
+        return null;
+    }
+    if (!textNode) {
+        return _jsx(_Fragment, { children: iconNode });
+    }
+    if (!iconNode) {
+        return _jsx(_Fragment, { children: textNode });
+    }
+    const isStacked = textPosition === 'Above' || textPosition === 'Below';
+    const children = textPosition === 'Before' || textPosition === 'Above'
+        ? [textNode, iconNode]
+        : [iconNode, textNode];
+    return (_jsx("span", { className: "ab-IconStyle__wrapper", style: {
+            display: 'inline-flex',
+            flexDirection: isStacked ? 'column' : 'row',
+            alignItems: 'center',
+            gap,
+            lineHeight: 1,
+        }, children: children }));
+};
+export const StyledColumnIconPreview = ({ data }) => {
+    const iconStyle = data.IconStyle;
+    if (!iconStyle) {
+        return _jsx(Tag, { children: "No Icon Style" });
+    }
+    const effectiveMappings = resolveEffectiveIconStyleMappings(iconStyle);
+    if (effectiveMappings.length === 0) {
+        return _jsx(Tag, { children: "Define mappings to preview" });
+    }
+    const previewCellChrome = getIconCellChromeCss(iconStyle.Cell);
+    return (_jsx(Box, { className: PREVIEW_CELL_CLASS, style: previewCellChrome, children: _jsx(IconCellPreviewTree, { iconStyle: iconStyle, mapping: effectiveMappings[0] }) }));
+};

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

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

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

@@ -0,0 +1,59 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { convertAdaptableStyleToCSS } from '../../../../../Utilities/Helpers/StyleHelper';
+import { getPercentBarPreviewGeometry, getPercentBarPreviewResolvedBarColor, getPercentBarPreviewSampleValues, getPercentBarPreviewScale, getPercentBarPreviewTrackColor, hasPercentBarRangesConfigured, } from '../../../../../Utilities/Helpers/StyledColumns/PercentBarStyleHelper';
+import { buildBarStyleCellTextLabels, getBarStyleCellTextSlotPresence, hasBarStyleCellTextConfigured, } from '../../../../../Utilities/Helpers/StyledColumns/BarStylesHelper';
+import { Box, Flex } from '../../../../../components/Flex';
+import { Tag } from '../../../../../components/Tag';
+import { BarStyleCellTextPreview, shouldShowBarStyleCellTextOutsideBar, } from './BarStyleCellTextPreview';
+const PREVIEW_CELL_CLASS = 'ab-PercentBarPreviewCell twa:w-[72px] twa:min-h-[32px] twa:px-1 twa:py-1 twa:rounded-standard twa:border twa:border-[color-mix(in_srgb,var(--ab-color-foreground)_15%,transparent)]';
+const PercentBarPreviewCell = ({ styledColumn, value, min, max }) => {
+    const pb = styledColumn.PercentBarStyle;
+    const { barLeftPercent, barWidthPercent, percentageValue, barColor } = getPercentBarPreviewGeometry(value, pb, min, max);
+    const trackColor = getPercentBarPreviewTrackColor(pb);
+    const fillColor = getPercentBarPreviewResolvedBarColor(barColor);
+    const cellTextProperties = pb.CellTextProperties;
+    const labels = buildBarStyleCellTextLabels(cellTextProperties, Number.isInteger(value) ? String(value) : value.toFixed(1), `${percentageValue.toFixed(0)}%`);
+    const hasCellText = hasBarStyleCellTextConfigured(cellTextProperties) &&
+        Boolean(labels.cellValue || labels.percentage);
+    const presence = getBarStyleCellTextSlotPresence(cellTextProperties);
+    const fontStyle = pb.Font ? convertAdaptableStyleToCSS(pb.Font) : undefined;
+    const cellTextClassName = 'ab-PercentBar__text twa:text-2 twa:leading-tight twa:truncate';
+    const barEl = (_jsxs(Box, { className: "ab-PercentBar__bar twa:relative twa:flex-1 twa:min-h-[6px]", style: trackColor ? { background: getPercentBarPreviewResolvedBarColor(trackColor) } : undefined, children: [fillColor && (_jsx(Box, { className: "ab-PercentBar__barInside twa:absolute twa:top-0 twa:h-full", style: {
+                    background: fillColor,
+                    left: `${barLeftPercent.toFixed(2)}%`,
+                    width: `${barWidthPercent.toFixed(2)}%`,
+                } })), hasCellText && presence.hasMerged && (_jsx(BarStyleCellTextPreview, { mergedOverlayClassName: "ab-PercentBar__text twa:absolute twa:inset-x-0 twa:top-1/2 twa:-translate-y-1/2 twa:px-1 twa:text-2 twa:truncate", style: fontStyle, cellTextProperties: cellTextProperties, labels: labels, vertical: "Merged" }))] }));
+    return (_jsxs(Flex, { className: `ab-PercentBar__wrapper ${PREVIEW_CELL_CLASS}`, flexDirection: "column", style: {
+            justifyContent: 'center',
+            height: shouldShowBarStyleCellTextOutsideBar(cellTextProperties, hasCellText)
+                ? '100%'
+                : undefined,
+        }, children: [hasCellText && presence.hasAbove && (_jsx(BarStyleCellTextPreview, { className: cellTextClassName, style: fontStyle, cellTextProperties: cellTextProperties, labels: labels, vertical: "Above" })), barEl, hasCellText && presence.hasBelow && (_jsx(BarStyleCellTextPreview, { className: cellTextClassName, style: fontStyle, cellTextProperties: cellTextProperties, labels: labels, vertical: "Below" }))] }));
+};
+export const StyledColumnPercentBarPreview = ({ data }) => {
+    const pb = data.PercentBarStyle;
+    if (!pb) {
+        return _jsx(Tag, { children: "No Percent Bar Style" });
+    }
+    if (!hasPercentBarRangesConfigured(pb)) {
+        return _jsx(Tag, { children: "Define ranges before previewing" });
+    }
+    let min;
+    let max;
+    if (pb.ColumnComparison) {
+        const cmpMin = Number(pb.ColumnComparison.MinValue);
+        const cmpMax = Number(pb.ColumnComparison.MaxValue);
+        if (!Number.isNaN(cmpMin) && !Number.isNaN(cmpMax)) {
+            min = cmpMin;
+            max = cmpMax;
+        }
+        else {
+            ({ min, max } = getPercentBarPreviewScale(pb));
+        }
+    }
+    else {
+        ({ min, max } = getPercentBarPreviewScale(pb));
+    }
+    const sampleValues = getPercentBarPreviewSampleValues(pb);
+    return (_jsx(Flex, { alignItems: "stretch", className: "twa:flex-wrap twa:gap-2", children: sampleValues.map((value) => (_jsx(PercentBarPreviewCell, { styledColumn: data, value: value, min: min, max: max }, value))) }));
+};

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

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

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

@@ -0,0 +1,45 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { buildBarStyleCellTextLabels, getBarStyleCellTextSlotPresence, hasBarStyleCellTextConfigured, } from '../../../../../Utilities/Helpers/StyledColumns/BarStylesHelper';
+import { Box, Flex } from '../../../../../components/Flex';
+import { Tag } from '../../../../../components/Tag';
+import { StyledColumnRangeBarListPreview } from './StyledColumnChartListPreviews';
+import { BarStyleCellTextPreview } from './BarStyleCellTextPreview';
+const PREVIEW_CELL_CLASS = 'ab-RangeBarPreviewCell 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 getRangeBarPreviewSample = (range) => {
+    let min = 0;
+    let max = 100;
+    if (typeof range.Min === 'number' && typeof range.Max === 'number') {
+        min = range.Min;
+        max = range.Max;
+    }
+    const span = max - min || 1;
+    // Matches the value-marker position (~72%) in `StyledColumnRangeBarListPreview`.
+    const sampleValue = min + span * 0.72;
+    const valueFraction = (sampleValue - min) / span;
+    return {
+        sampleValue,
+        valueFraction: Math.max(0, Math.min(1, valueFraction)),
+    };
+};
+const RangeBarPreviewContent = ({ range }) => {
+    const { sampleValue, valueFraction } = getRangeBarPreviewSample(range);
+    const cellTextProperties = range.CellTextProperties;
+    const labels = buildBarStyleCellTextLabels(cellTextProperties, Number.isInteger(sampleValue) ? String(sampleValue) : sampleValue.toFixed(1), `${(valueFraction * 100).toFixed(0)}%`);
+    const hasCellText = hasBarStyleCellTextConfigured(cellTextProperties) &&
+        Boolean(labels.cellValue || labels.percentage);
+    const presence = getBarStyleCellTextSlotPresence(cellTextProperties);
+    const isVertical = range.Orientation === 'Vertical';
+    const cellTextClassName = 'ab-RangeBar__text twa:text-2 twa:leading-tight twa:truncate twa:max-w-full';
+    const chartEl = _jsx(StyledColumnRangeBarListPreview, { range: range });
+    if (hasCellText && presence.hasMerged && !presence.hasAbove && !presence.hasBelow) {
+        return (_jsxs(Box, { className: "ab-RangeBar__wrapper twa:relative twa:inline-flex", children: [chartEl, _jsx(BarStyleCellTextPreview, { mergedOverlayClassName: "ab-RangeBar__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", cellTextProperties: cellTextProperties, labels: labels, vertical: "Merged" })] }));
+    }
+    return (_jsxs(Flex, { className: "ab-RangeBar__wrapper twa:relative", flexDirection: "column", alignItems: isVertical ? 'center' : 'stretch', style: { justifyContent: 'center', gap: hasCellText ? 2 : 0 }, children: [hasCellText && presence.hasAbove && (_jsx(BarStyleCellTextPreview, { className: cellTextClassName, cellTextProperties: cellTextProperties, labels: labels, vertical: "Above" })), _jsxs(Box, { className: "twa:relative twa:w-full", style: { display: 'inline-flex' }, children: [chartEl, hasCellText && presence.hasMerged && (_jsx(BarStyleCellTextPreview, { mergedOverlayClassName: "ab-RangeBar__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", cellTextProperties: cellTextProperties, labels: labels, vertical: "Merged" }))] }), hasCellText && presence.hasBelow && (_jsx(BarStyleCellTextPreview, { className: cellTextClassName, cellTextProperties: cellTextProperties, labels: labels, vertical: "Below" }))] }));
+};
+export const StyledColumnRangeBarPreview = ({ data }) => {
+    const range = data.RangeBarStyle;
+    if (!range) {
+        return _jsx(Tag, { children: "No Range Bar Style" });
+    }
+    return (_jsx(Box, { className: PREVIEW_CELL_CLASS, children: _jsx(RangeBarPreviewContent, { range: range }) }));
+};