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

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

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

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

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

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

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

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

@@ -8,7 +8,7 @@ const tinycolor2_1 = tslib_1.__importDefault(require("tinycolor2"));
 const Flex_1 = require("../../../../../components/Flex");
 const Tag_1 = require("../../../../../components/Tag");
 const StyleHelper_1 = require("../../../../../Utilities/Helpers/StyleHelper");
-const StyledColumnGradientHelper_1 = require("../../../../../Utilities/Helpers/StyledColumnGradientHelper");
+const GradientStyleHelper_1 = require("../../../../../Utilities/Helpers/StyledColumns/GradientStyleHelper");
 function clamp01(n) {
     if (Number.isNaN(n)) {
         return 0;
@@ -39,14 +39,14 @@ function zeroCentredSplitPreview(negativeColor, positiveColor, postfix, minA, ma
  * `Col-Min..0` + `0..Col-Max` pairs render as a single split strip.
  */
 const GradientRangesSummaryPreview = (props) => {
-    const minA = props.gradientStyle?.MinAlpha ?? StyledColumnGradientHelper_1.DEFAULT_GRADIENT_MIN_ALPHA;
-    const maxA = props.gradientStyle?.MaxAlpha ?? StyledColumnGradientHelper_1.DEFAULT_GRADIENT_MAX_ALPHA;
+    const minA = props.gradientStyle?.MinAlpha ?? GradientStyleHelper_1.DEFAULT_GRADIENT_MIN_ALPHA;
+    const maxA = props.gradientStyle?.MaxAlpha ?? GradientStyleHelper_1.DEFAULT_GRADIENT_MAX_ALPHA;
     const postfix = (props.rangeValueType ?? 'Number') === 'Percentage' ? '%' : '';
     if (props.zeroCentred) {
         return zeroCentredSplitPreview(props.zeroCentred.NegativeColor, props.zeroCentred.PositiveColor, postfix, minA, maxA);
     }
     const ranges = props.ranges ?? [];
-    if ((0, StyledColumnGradientHelper_1.isDivergingZeroCellRanges)(ranges)) {
+    if ((0, GradientStyleHelper_1.isDivergingZeroCellRanges)(ranges)) {
         const [r0, r1] = ranges;
         return ((0, jsx_runtime_1.jsxs)(Flex_1.Flex, { flexDirection: "column", className: "twa:gap-2", children: [(0, jsx_runtime_1.jsxs)(Flex_1.Flex, { alignItems: "center", className: "twa:flex-wrap twa:gap-2", children: [(0, jsx_runtime_1.jsxs)(Tag_1.Tag, { children: [r0.Min, postfix, " \u2192 ", r0.Max, postfix] }), (0, jsx_runtime_1.jsxs)(Tag_1.Tag, { children: [r1.Min, postfix, " \u2192 ", r1.Max, postfix] })] }), (0, jsx_runtime_1.jsxs)(Flex_1.Flex, { className: `${stripClassName} twa:w-[200px]`, children: [(0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:flex-1", style: {
                                 background: gradientRangeStripCss(r0.Color, !!r0.ReverseGradient, minA, maxA),
@@ -60,11 +60,9 @@ const GradientRangesSummaryPreview = (props) => {
 };
 exports.GradientRangesSummaryPreview = GradientRangesSummaryPreview;
 const GradientColumnComparisonSummaryPreview = (props) => {
-    const minA = props.gradientStyle?.MinAlpha ?? StyledColumnGradientHelper_1.DEFAULT_GRADIENT_MIN_ALPHA;
-    const maxA = props.gradientStyle?.MaxAlpha ?? StyledColumnGradientHelper_1.DEFAULT_GRADIENT_MAX_ALPHA;
-    const fmt = (v) => isNaN(Number(v))
-        ? `[${props.api.columnApi.getFriendlyNameForColumnId(String(v))}]`
-        : v;
+    const minA = props.gradientStyle?.MinAlpha ?? GradientStyleHelper_1.DEFAULT_GRADIENT_MIN_ALPHA;
+    const maxA = props.gradientStyle?.MaxAlpha ?? GradientStyleHelper_1.DEFAULT_GRADIENT_MAX_ALPHA;
+    const fmt = (v) => isNaN(Number(v)) ? `[${props.api.columnApi.getFriendlyNameForColumnId(String(v))}]` : v;
     return ((0, jsx_runtime_1.jsxs)(Flex_1.Flex, { flexDirection: "column", className: "twa:gap-2", children: [(0, jsx_runtime_1.jsxs)(Tag_1.Tag, { children: ["Min: ", fmt(props.columnComparison.MinValue), " \u2014 Max: ", fmt(props.columnComparison.MaxValue)] }), (0, jsx_runtime_1.jsx)(Flex_1.Box, { className: `${stripClassName} twa:w-[200px]`, style: {
                     background: gradientRangeStripCss(props.columnComparison.Color, false, minA, maxA),
                 } })] }));

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

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

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

@@ -54,12 +54,13 @@ const StyledColumnBadgePreview = ({ data }) => {
             : {}),
     };
     return ((0, jsx_runtime_1.jsx)(Flex_1.Box, { className: PREVIEW_CELL_CLASS, style: cellStyle, children: (0, jsx_runtime_1.jsx)("div", { className: wrapperClassName, style: wrapperStyle, children: badgeStyle.Badges.map((badge, index) => {
-                const badgeValue = badge.IconOnly
+                const iconProps = badge.IconProperties;
+                const badgeValue = iconProps?.IconOnly
                     ? ''
                     : dataType === 'number'
                         ? GeneralConstants_1.DEFAULT_INTEGER_DISPLAY_VALUE
                         : GeneralConstants_1.DEFAULT_STRING_DISPLAY_VALUE;
-                return ((0, jsx_runtime_1.jsx)(Badge_1.Badge, { icon: badge.Icon, pillStyle: badge.PillStyle, iconPosition: badge.IconPosition, shape: badge.Shape, density: badgeStyle.Density ?? 'Normal', iconGap: badge.IconGap, children: badgeValue }, index));
+                return ((0, jsx_runtime_1.jsx)(Badge_1.Badge, { icon: iconProps?.Icon, pillStyle: badge.PillStyle, iconPosition: iconProps?.Position, shape: badge.Shape, density: badgeStyle.Density ?? 'Normal', iconGap: iconProps?.Gap, children: badgeValue }, index));
             }) }) }));
 };
 exports.StyledColumnBadgePreview = StyledColumnBadgePreview;

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

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

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

@@ -3,10 +3,12 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.hasBulletChartRangesConfigured = exports.StyledColumnBulletPreviewCard = exports.StyledColumnBulletPreview = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const StyleHelper_1 = require("../../../../../Utilities/Helpers/StyleHelper");
+const BarStylesHelper_1 = require("../../../../../Utilities/Helpers/StyledColumns/BarStylesHelper");
 const Flex_1 = require("../../../../../components/Flex");
 const Card_1 = require("../../../../../components/Card");
 const Tag_1 = require("../../../../../components/Tag");
 const StyledColumnChartListPreviews_1 = require("./StyledColumnChartListPreviews");
+const BarStyleCellTextPreview_1 = require("./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 ?? [];
@@ -26,29 +28,23 @@ const getBulletPreviewSample = (bullet) => {
         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 cellTextProperties = bullet.CellTextProperties;
+    const labels = (0, BarStylesHelper_1.buildBarStyleCellTextLabels)(cellTextProperties, Number.isInteger(sampleValue) ? String(sampleValue) : sampleValue.toFixed(1), `${(valueFraction * 100).toFixed(0)}%`);
+    const hasCellText = (0, BarStylesHelper_1.hasBarStyleCellTextConfigured)(cellTextProperties) &&
+        Boolean(labels.cellValue || labels.percentage);
+    const presence = (0, BarStylesHelper_1.getBarStyleCellTextSlotPresence)(cellTextProperties);
     const fontStyle = bullet.Font ? (0, StyleHelper_1.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 = (0, jsx_runtime_1.jsx)(StyledColumnChartListPreviews_1.StyledColumnBulletChartListPreview, { bullet: bullet });
-    const textEl = hasCellText ? ((0, jsx_runtime_1.jsx)(Flex_1.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 ((0, jsx_runtime_1.jsxs)(Flex_1.Box, { className: "ab-BulletChart__wrapper twa:relative twa:inline-flex", children: [chartEl, (0, jsx_runtime_1.jsx)(Flex_1.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 })] }));
+    // 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 ((0, jsx_runtime_1.jsxs)(Flex_1.Box, { className: "ab-BulletChart__wrapper twa:relative twa:inline-flex", children: [chartEl, (0, jsx_runtime_1.jsx)(BarStyleCellTextPreview_1.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 ((0, jsx_runtime_1.jsxs)(Flex_1.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] }));
+    return ((0, jsx_runtime_1.jsxs)(Flex_1.Flex, { className: "ab-BulletChart__wrapper twa:relative", flexDirection: "column", alignItems: isVertical ? 'center' : 'stretch', style: { justifyContent: 'center', gap: hasCellText ? 2 : 0 }, children: [hasCellText && presence.hasAbove && ((0, jsx_runtime_1.jsx)(BarStyleCellTextPreview_1.BarStyleCellTextPreview, { className: cellTextClassName, style: fontStyle, cellTextProperties: cellTextProperties, labels: labels, vertical: "Above" })), (0, jsx_runtime_1.jsxs)(Flex_1.Box, { className: "twa:relative twa:w-full", style: { display: 'inline-flex' }, children: [chartEl, hasCellText && presence.hasMerged && ((0, jsx_runtime_1.jsx)(BarStyleCellTextPreview_1.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 && ((0, jsx_runtime_1.jsx)(BarStyleCellTextPreview_1.BarStyleCellTextPreview, { className: cellTextClassName, style: fontStyle, cellTextProperties: cellTextProperties, labels: labels, vertical: "Below" }))] }));
 };
 const StyledColumnBulletPreview = ({ data }) => {
     const bullet = data.BulletChartStyle;

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

@@ -44,10 +44,10 @@ const DEFAULT_MARKER = 'var(--ab-color-foreground, #333)';
 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 ((0, jsx_runtime_1.jsx)(Flex_1.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: (0, jsx_runtime_1.jsxs)("svg", { width: "100%", height: "100%", viewBox: `0 0 ${VB_W} ${VB_H}`, preserveAspectRatio: "none", "aria-hidden": true, children: [segments.length === 0 ? ((0, jsx_runtime_1.jsx)("rect", { x: "0", y: "0", width: VB_W, height: VB_H, fill: range.BackColor ?? 'transparent' })) : (segments.map((s, i) => ((0, jsx_runtime_1.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 ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("rect", { x: VB_W * 0.42, y: "2", width: "5", height: VB_H - 4, rx: "1", fill: trackFill }), hasRef && ((0, jsx_runtime_1.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" })), (0, jsx_runtime_1.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 })] })) : ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("rect", { x: "2", y: VB_H * 0.38, width: VB_W - 4, height: "5", rx: "1", fill: trackFill }), hasRef && ((0, jsx_runtime_1.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" })), (0, jsx_runtime_1.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 })] }))] }) }));
 };
@@ -59,8 +59,8 @@ exports.StyledColumnRangeBarListPreview = StyledColumnRangeBarListPreview;
 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 ((0, jsx_runtime_1.jsx)(Flex_1.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: (0, jsx_runtime_1.jsxs)("svg", { width: "100%", height: "100%", viewBox: `0 0 ${VB_W} ${VB_H}`, preserveAspectRatio: "none", "aria-hidden": true, children: [segments.length === 0 ? ((0, jsx_runtime_1.jsx)("rect", { x: "0", y: "0", width: VB_W, height: VB_H, fill: bullet.BackColor ?? 'transparent' })) : (segments.map((s, i) => ((0, jsx_runtime_1.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)))), (0, jsx_runtime_1.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 }), (0, jsx_runtime_1.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" })] }) }));
 };
 exports.StyledColumnBulletChartListPreview = StyledColumnBulletChartListPreview;

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

@@ -6,7 +6,7 @@ const Flex_1 = require("../../../../../components/Flex");
 const Card_1 = require("../../../../../components/Card");
 const Tag_1 = require("../../../../../components/Tag");
 const AdaptableContext_1 = require("../../../../AdaptableContext");
-const StyledColumnGradientHelper_1 = require("../../../../../Utilities/Helpers/StyledColumnGradientHelper");
+const GradientStyleHelper_1 = require("../../../../../Utilities/Helpers/StyledColumns/GradientStyleHelper");
 const formatPreviewValue = (value) => {
     if (Number.isInteger(value)) {
         return value.toLocaleString();
@@ -20,15 +20,15 @@ const StyledColumnGradientPreview = ({ data, api: apiProp }) => {
     if (!gs) {
         return (0, jsx_runtime_1.jsx)(Tag_1.Tag, { children: "No Gradient Style" });
     }
-    if (!(0, StyledColumnGradientHelper_1.hasGradientRangesConfigured)(gs)) {
+    if (!(0, GradientStyleHelper_1.hasGradientRangesConfigured)(gs)) {
         return (0, jsx_runtime_1.jsx)(Tag_1.Tag, { children: "Define ranges before previewing" });
     }
-    const sampleValues = (0, StyledColumnGradientHelper_1.getGradientPreviewSampleValues)(data, api);
+    const sampleValues = (0, GradientStyleHelper_1.getGradientPreviewSampleValues)(data, api);
     if (!sampleValues.length) {
         return (0, jsx_runtime_1.jsx)(Tag_1.Tag, { children: "No preview available" });
     }
     const rowNode = api.gridApi?.getRowNodeForIndex(0) ?? null;
-    return ((0, jsx_runtime_1.jsx)(Flex_1.Flex, { alignItems: "stretch", className: "twa:flex-wrap twa:gap-2", children: sampleValues.map((value) => ((0, jsx_runtime_1.jsx)(Flex_1.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: (0, StyledColumnGradientHelper_1.getGradientPreviewCellStyle)(value, data, api, rowNode), children: formatPreviewValue(value) }, value))) }));
+    return ((0, jsx_runtime_1.jsx)(Flex_1.Flex, { alignItems: "stretch", className: "twa:flex-wrap twa:gap-2", children: sampleValues.map((value) => ((0, jsx_runtime_1.jsx)(Flex_1.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: (0, GradientStyleHelper_1.getGradientPreviewCellStyle)(value, data, api, rowNode), children: formatPreviewValue(value) }, value))) }));
 };
 exports.StyledColumnGradientPreview = StyledColumnGradientPreview;
 const StyledColumnGradientPreviewCard = ({ data }) => ((0, jsx_runtime_1.jsxs)(Card_1.Card, { shadow: false, children: [(0, jsx_runtime_1.jsx)(Card_1.Card.Title, { children: (0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:font-medium", children: "Preview" }) }), (0, jsx_runtime_1.jsx)(Card_1.Card.Body, { className: "twa:p-1", children: (0, jsx_runtime_1.jsx)(exports.StyledColumnGradientPreview, { data: data }) })] }));

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

@@ -39,7 +39,7 @@ const renderIconSpecForPreview = (spec, size) => {
     return null;
 };
 const buildPreviewText = (mapping, iconStyle) => {
-    const cellTextTokens = iconStyle.CellText ?? [];
+    const cellTextTokens = iconStyle.CellTextProperties?.CellText ?? [];
     const formatted = String(mapping.Key);
     const textParts = [];
     if (cellTextTokens.includes('CellValue') && formatted) {
@@ -53,7 +53,7 @@ const buildPreviewText = (mapping, iconStyle) => {
 const IconCellPreviewTree = ({ iconStyle, mapping }) => {
     const size = iconStyle.Size ?? exports.DEFAULT_ICON_STYLE_SIZE;
     const gap = iconStyle.Gap ?? exports.DEFAULT_ICON_STYLE_GAP;
-    const textPosition = iconStyle.CellTextPosition ?? 'After';
+    const textPosition = iconStyle.CellTextProperties?.CellTextPosition ?? 'After';
     const text = buildPreviewText(mapping, iconStyle);
     const fontStyle = iconStyle.Font ? (0, StyleHelper_1.convertAdaptableStyleToCSS)(iconStyle.Font) : undefined;
     const iconNode = renderIconSpecForPreview(mapping.Icon, size);

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

@@ -3,34 +3,43 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.StyledColumnPercentBarPreviewCard = exports.StyledColumnPercentBarPreview = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const StyleHelper_1 = require("../../../../../Utilities/Helpers/StyleHelper");
-const percentBarPreviewHelper_1 = require("../../../../../Utilities/Helpers/percentBarPreviewHelper");
+const PercentBarStyleHelper_1 = require("../../../../../Utilities/Helpers/StyledColumns/PercentBarStyleHelper");
+const BarStylesHelper_1 = require("../../../../../Utilities/Helpers/StyledColumns/BarStylesHelper");
 const Flex_1 = require("../../../../../components/Flex");
 const Card_1 = require("../../../../../components/Card");
 const Tag_1 = require("../../../../../components/Tag");
+const BarStyleCellTextPreview_1 = require("./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 } = (0, percentBarPreviewHelper_1.getPercentBarPreviewGeometry)(value, pb, min, max);
-    const trackColor = (0, percentBarPreviewHelper_1.getPercentBarPreviewTrackColor)(pb);
-    const fillColor = (0, percentBarPreviewHelper_1.getPercentBarPreviewResolvedBarColor)(barColor);
-    const cellText = (0, percentBarPreviewHelper_1.formatPercentBarPreviewCellText)(value, percentageValue, pb);
-    const hasCellText = Boolean(pb.CellText?.length && cellText);
-    const textPosition = pb.CellTextPosition ?? 'Below';
+    const { barLeftPercent, barWidthPercent, percentageValue, barColor } = (0, PercentBarStyleHelper_1.getPercentBarPreviewGeometry)(value, pb, min, max);
+    const trackColor = (0, PercentBarStyleHelper_1.getPercentBarPreviewTrackColor)(pb);
+    const fillColor = (0, PercentBarStyleHelper_1.getPercentBarPreviewResolvedBarColor)(barColor);
+    const cellTextProperties = pb.CellTextProperties;
+    const labels = (0, BarStylesHelper_1.buildBarStyleCellTextLabels)(cellTextProperties, Number.isInteger(value) ? String(value) : value.toFixed(1), `${percentageValue.toFixed(0)}%`);
+    const hasCellText = (0, BarStylesHelper_1.hasBarStyleCellTextConfigured)(cellTextProperties) &&
+        Boolean(labels.cellValue || labels.percentage);
+    const presence = (0, BarStylesHelper_1.getBarStyleCellTextSlotPresence)(cellTextProperties);
     const fontStyle = pb.Font ? (0, StyleHelper_1.convertAdaptableStyleToCSS)(pb.Font) : undefined;
-    const textEl = hasCellText ? ((0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "ab-PercentBar__text twa:text-2 twa:leading-tight twa:truncate", style: fontStyle, children: cellText })) : null;
-    const barEl = ((0, jsx_runtime_1.jsxs)(Flex_1.Box, { className: "ab-PercentBar__bar twa:relative twa:flex-1 twa:min-h-[6px]", style: trackColor ? { background: (0, percentBarPreviewHelper_1.getPercentBarPreviewResolvedBarColor)(trackColor) } : undefined, children: [fillColor && ((0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "ab-PercentBar__barInside twa:absolute twa:top-0 twa:h-full", style: {
+    const cellTextClassName = 'ab-PercentBar__text twa:text-2 twa:leading-tight twa:truncate';
+    const barEl = ((0, jsx_runtime_1.jsxs)(Flex_1.Box, { className: "ab-PercentBar__bar twa:relative twa:flex-1 twa:min-h-[6px]", style: trackColor ? { background: (0, PercentBarStyleHelper_1.getPercentBarPreviewResolvedBarColor)(trackColor) } : undefined, children: [fillColor && ((0, jsx_runtime_1.jsx)(Flex_1.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 && textPosition === 'Merged' && ((0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "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, children: cellText }))] }));
-    return ((0, jsx_runtime_1.jsxs)(Flex_1.Flex, { className: `ab-PercentBar__wrapper ${PREVIEW_CELL_CLASS}`, flexDirection: "column", style: { justifyContent: 'center', height: hasCellText && textPosition !== 'Merged' ? '100%' : undefined }, children: [hasCellText && textPosition === 'Above' && textEl, barEl, hasCellText && textPosition === 'Below' && textEl] }));
+                } })), hasCellText && presence.hasMerged && ((0, jsx_runtime_1.jsx)(BarStyleCellTextPreview_1.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 ((0, jsx_runtime_1.jsxs)(Flex_1.Flex, { className: `ab-PercentBar__wrapper ${PREVIEW_CELL_CLASS}`, flexDirection: "column", style: {
+            justifyContent: 'center',
+            height: (0, BarStyleCellTextPreview_1.shouldShowBarStyleCellTextOutsideBar)(cellTextProperties, hasCellText)
+                ? '100%'
+                : undefined,
+        }, children: [hasCellText && presence.hasAbove && ((0, jsx_runtime_1.jsx)(BarStyleCellTextPreview_1.BarStyleCellTextPreview, { className: cellTextClassName, style: fontStyle, cellTextProperties: cellTextProperties, labels: labels, vertical: "Above" })), barEl, hasCellText && presence.hasBelow && ((0, jsx_runtime_1.jsx)(BarStyleCellTextPreview_1.BarStyleCellTextPreview, { className: cellTextClassName, style: fontStyle, cellTextProperties: cellTextProperties, labels: labels, vertical: "Below" }))] }));
 };
 const StyledColumnPercentBarPreview = ({ data }) => {
     const pb = data.PercentBarStyle;
     if (!pb) {
         return (0, jsx_runtime_1.jsx)(Tag_1.Tag, { children: "No Percent Bar Style" });
     }
-    if (!(0, percentBarPreviewHelper_1.hasPercentBarRangesConfigured)(pb)) {
+    if (!(0, PercentBarStyleHelper_1.hasPercentBarRangesConfigured)(pb)) {
         return (0, jsx_runtime_1.jsx)(Tag_1.Tag, { children: "Define ranges before previewing" });
     }
     let min;
@@ -43,13 +52,13 @@ const StyledColumnPercentBarPreview = ({ data }) => {
             max = cmpMax;
         }
         else {
-            ({ min, max } = (0, percentBarPreviewHelper_1.getPercentBarPreviewScale)(pb));
+            ({ min, max } = (0, PercentBarStyleHelper_1.getPercentBarPreviewScale)(pb));
         }
     }
     else {
-        ({ min, max } = (0, percentBarPreviewHelper_1.getPercentBarPreviewScale)(pb));
+        ({ min, max } = (0, PercentBarStyleHelper_1.getPercentBarPreviewScale)(pb));
     }
-    const sampleValues = (0, percentBarPreviewHelper_1.getPercentBarPreviewSampleValues)(pb);
+    const sampleValues = (0, PercentBarStyleHelper_1.getPercentBarPreviewSampleValues)(pb);
     return ((0, jsx_runtime_1.jsx)(Flex_1.Flex, { alignItems: "stretch", className: "twa:flex-wrap twa:gap-2", children: sampleValues.map((value) => ((0, jsx_runtime_1.jsx)(PercentBarPreviewCell, { styledColumn: data, value: value, min: min, max: max }, value))) }));
 };
 exports.StyledColumnPercentBarPreview = StyledColumnPercentBarPreview;

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

@@ -2,10 +2,12 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.StyledColumnRangeBarPreviewCard = exports.StyledColumnRangeBarPreview = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
+const BarStylesHelper_1 = require("../../../../../Utilities/Helpers/StyledColumns/BarStylesHelper");
 const Flex_1 = require("../../../../../components/Flex");
 const Card_1 = require("../../../../../components/Card");
 const Tag_1 = require("../../../../../components/Tag");
 const StyledColumnChartListPreviews_1 = require("./StyledColumnChartListPreviews");
+const BarStyleCellTextPreview_1 = require("./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;
@@ -23,28 +25,20 @@ const getRangeBarPreviewSample = (range) => {
         valueFraction: Math.max(0, Math.min(1, valueFraction)),
     };
 };
-const formatRangeBarPreviewCellText = (sampleValue, valueFraction, range) => {
-    const parts = [];
-    if (range.CellText?.includes('CellValue')) {
-        parts.push(Number.isInteger(sampleValue) ? String(sampleValue) : sampleValue.toFixed(1));
-    }
-    if (range.CellText?.includes('PercentageValue')) {
-        parts.push(`${(valueFraction * 100).toFixed(0)}%`);
-    }
-    return parts.join(' ');
-};
 const RangeBarPreviewContent = ({ range }) => {
     const { sampleValue, valueFraction } = getRangeBarPreviewSample(range);
-    const cellText = formatRangeBarPreviewCellText(sampleValue, valueFraction, range);
-    const hasCellText = Boolean(range.CellText?.length && cellText);
-    const textPosition = range.CellTextPosition ?? 'Below';
+    const cellTextProperties = range.CellTextProperties;
+    const labels = (0, BarStylesHelper_1.buildBarStyleCellTextLabels)(cellTextProperties, Number.isInteger(sampleValue) ? String(sampleValue) : sampleValue.toFixed(1), `${(valueFraction * 100).toFixed(0)}%`);
+    const hasCellText = (0, BarStylesHelper_1.hasBarStyleCellTextConfigured)(cellTextProperties) &&
+        Boolean(labels.cellValue || labels.percentage);
+    const presence = (0, BarStylesHelper_1.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 = (0, jsx_runtime_1.jsx)(StyledColumnChartListPreviews_1.StyledColumnRangeBarListPreview, { range: range });
-    const textEl = hasCellText ? ((0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "ab-RangeBar__text twa:text-2 twa:leading-tight twa:truncate twa:max-w-full", children: cellText })) : null;
-    if (hasCellText && textPosition === 'Merged') {
-        return ((0, jsx_runtime_1.jsxs)(Flex_1.Box, { className: "ab-RangeBar__wrapper twa:relative twa:inline-flex", children: [chartEl, (0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "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", children: cellText })] }));
+    if (hasCellText && presence.hasMerged && !presence.hasAbove && !presence.hasBelow) {
+        return ((0, jsx_runtime_1.jsxs)(Flex_1.Box, { className: "ab-RangeBar__wrapper twa:relative twa:inline-flex", children: [chartEl, (0, jsx_runtime_1.jsx)(BarStyleCellTextPreview_1.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 ((0, jsx_runtime_1.jsxs)(Flex_1.Flex, { className: "ab-RangeBar__wrapper", flexDirection: "column", alignItems: isVertical ? 'center' : 'stretch', style: { justifyContent: 'center', gap: hasCellText ? 2 : 0 }, children: [hasCellText && textPosition === 'Above' && textEl, chartEl, hasCellText && textPosition === 'Below' && textEl] }));
+    return ((0, jsx_runtime_1.jsxs)(Flex_1.Flex, { className: "ab-RangeBar__wrapper twa:relative", flexDirection: "column", alignItems: isVertical ? 'center' : 'stretch', style: { justifyContent: 'center', gap: hasCellText ? 2 : 0 }, children: [hasCellText && presence.hasAbove && ((0, jsx_runtime_1.jsx)(BarStyleCellTextPreview_1.BarStyleCellTextPreview, { className: cellTextClassName, cellTextProperties: cellTextProperties, labels: labels, vertical: "Above" })), (0, jsx_runtime_1.jsxs)(Flex_1.Box, { className: "twa:relative twa:w-full", style: { display: 'inline-flex' }, children: [chartEl, hasCellText && presence.hasMerged && ((0, jsx_runtime_1.jsx)(BarStyleCellTextPreview_1.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 && ((0, jsx_runtime_1.jsx)(BarStyleCellTextPreview_1.BarStyleCellTextPreview, { className: cellTextClassName, cellTextProperties: cellTextProperties, labels: labels, vertical: "Below" }))] }));
 };
 const StyledColumnRangeBarPreview = ({ data }) => {
     const range = data.RangeBarStyle;

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

@@ -1,6 +1,7 @@
 import * as React from 'react';
 import type { CellBoxStyle } from '../../../../../AdaptableState/Common/AdaptableStyle';
-import { RatingIconShape, RatingStyle, StyledColumn } from '../../../../../AdaptableState/StyledColumnState';
+import { StyledColumn } from '../../../../../AdaptableState/StyledColumnState';
+import { RatingIconShape, RatingStyle } from '../../../../../AdaptableState/StyledColumns/RatingStyle';
 export declare const DEFAULT_RATING_MAX = 5;
 export declare const DEFAULT_RATING_SIZE = 14;
 export declare const DEFAULT_RATING_GAP = 2;

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

@@ -7,7 +7,7 @@ const jsx_runtime_1 = require("react/jsx-runtime");
 const React = tslib_1.__importStar(require("react"));
 const ag_charts_enterprise_1 = require("ag-charts-enterprise");
 const AdaptableHelper_1 = require("../../../../../Utilities/Helpers/AdaptableHelper");
-const SparklineOptionsHelper_1 = require("../../../../../Utilities/Helpers/SparklineOptionsHelper");
+const SparklineStyleHelper_1 = require("../../../../../Utilities/Helpers/StyledColumns/SparklineStyleHelper");
 const StyleHelper_1 = require("../../../../../Utilities/Helpers/StyleHelper");
 const Flex_1 = require("../../../../../components/Flex");
 const Card_1 = require("../../../../../components/Card");
@@ -44,7 +44,7 @@ const buildSparklinePreviewOptions = (sparklineStyle, container, data, width, he
     const sanitized = AdaptableHelper_1.AdaptableHelper.removeAdaptableObjectPrimitives({
         ...persisted,
     });
-    const options = (0, SparklineOptionsHelper_1.resolveSparklineOptionsForRender)({
+    const options = (0, SparklineStyleHelper_1.resolveSparklineOptionsForRender)({
         ...sanitized,
         type: sanitized.type ?? 'line',
         container,