@adaptabletools/adaptable 23.0.0-canary.6 → 23.0.0-canary.8

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

@@ -0,0 +1,35 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as React from 'react';
+import { resolveBarChartCellTextLayout } from '../../../../../Utilities/Helpers/barChartCellText';
+import { CheckBox } from '../../../../../components/CheckBox';
+import { Box, Flex } from '../../../../../components/Flex';
+import { SingleSelect } from '../../../../../components/NewSelect';
+const TOKEN_LABELS = {
+    CellValue: 'Cell Value',
+    PercentageValue: 'Percent Value',
+};
+const TOKENS = ['CellValue', 'PercentageValue'];
+const HORIZONTAL_CHOICES = [
+    { value: 'Left', label: 'Left' },
+    { value: 'Center', label: 'Center' },
+    { value: 'Right', label: 'Right' },
+];
+const VERTICAL_CHOICES = [
+    { value: 'Above', label: 'Above Bar' },
+    { value: 'Below', label: 'Below Bar' },
+    { value: 'Merged', label: 'Merged' },
+];
+const tokenKey = (token) => token === 'CellValue' ? 'CellValue' : 'PercentValue';
+export const BarChartCellTextLayoutEditor = ({ disabled, cellTextProperties, onToggle, onPlacementChange }) => {
+    const layout = resolveBarChartCellTextLayout(cellTextProperties);
+    return (_jsxs(Box, { className: "twa:inline-grid twa:grid-cols-[160px_140px_140px] twa:gap-x-4 twa:gap-y-2 twa:items-center", children: [_jsx(Box, { className: "twa:text-xs twa:font-medium twa:opacity-80", children: "Value" }), _jsx(Box, { className: "twa:text-xs twa:font-medium twa:opacity-80", children: "Horizontal" }), _jsx(Box, { className: "twa:text-xs twa:font-medium twa:opacity-80", children: "Vertical" }), TOKENS.map((token) => {
+                const placement = layout[tokenKey(token)];
+                const isShown = Boolean(placement);
+                const rowDisabled = disabled || !isShown;
+                return (_jsxs(React.Fragment, { children: [_jsx(Flex, { alignItems: "center", children: _jsx(CheckBox, { disabled: disabled, checked: isShown, onChange: (checked) => onToggle(token, checked), children: TOKEN_LABELS[token] }) }), _jsx(Box, { children: _jsx(SingleSelect, { className: "twa:w-full", disabled: rowDisabled, value: placement?.Horizontal ?? 'Left', onValueChange: (v) => onPlacementChange(token, {
+                                    Horizontal: v,
+                                }), items: HORIZONTAL_CHOICES }) }), _jsx(Box, { children: _jsx(SingleSelect, { className: "twa:w-full", disabled: rowDisabled, value: placement?.Vertical ?? 'Below', onValueChange: (v) => onPlacementChange(token, {
+                                    Vertical: v,
+                                }), items: VERTICAL_CHOICES }) })] }, token));
+            })] }));
+};

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

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

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

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

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,5 +1,6 @@
 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, GradientZeroCentredColors } from '../../../../../AdaptableState/StyledColumns/GradientStyle';
 import { AdaptableApi } from '../../../../../types';
 export declare function gradientRangeStripCss(color: string, reverseGradient: boolean, minAlpha: number, maxAlpha: number): string;
 export interface GradientRangesSummaryPreviewProps {

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

@@ -51,12 +51,13 @@ export const StyledColumnBadgePreview = ({ data }) => {
             : {}),
     };
     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
+                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));
             }) }) }));
 };
 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

@@ -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

@@ -1,9 +1,11 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { convertAdaptableStyleToCSS } from '../../../../../Utilities/Helpers/StyleHelper';
+import { buildBarChartCellTextLabels, getBarChartCellTextSlotPresence, hasBarChartCellTextConfigured, } from '../../../../../Utilities/Helpers/barChartCellText';
 import { Box, Flex } from '../../../../../components/Flex';
 import { Card } from '../../../../../components/Card';
 import { Tag } from '../../../../../components/Tag';
 import { StyledColumnBulletChartListPreview } from './StyledColumnChartListPreviews';
+import { BarChartCellTextPreview } from './BarChartCellTextPreview';
 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 ?? [];
@@ -23,29 +25,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 = buildBarChartCellTextLabels(cellTextProperties, Number.isInteger(sampleValue) ? String(sampleValue) : sampleValue.toFixed(1), `${(valueFraction * 100).toFixed(0)}%`);
+    const hasCellText = hasBarChartCellTextConfigured(cellTextProperties) &&
+        Boolean(labels.cellValue || labels.percentage);
+    const presence = getBarChartCellTextSlotPresence(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 });
-    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 })] }));
+    // 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(BarChartCellTextPreview, { 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", flexDirection: "column", alignItems: isVertical ? 'center' : 'stretch', style: { justifyContent: 'center', gap: hasCellText ? 2 : 0 }, children: [hasCellText && textPosition === 'Above' && textEl, chartEl, hasCellText && textPosition === 'Below' && textEl] }));
+    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(BarChartCellTextPreview, { 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(BarChartCellTextPreview, { 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(BarChartCellTextPreview, { className: cellTextClassName, style: fontStyle, cellTextProperties: cellTextProperties, labels: labels, vertical: "Below" }))] }));
 };
 export 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

@@ -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/StyledColumnIconPreview.js

@@ -36,7 +36,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) {
@@ -50,7 +50,7 @@ const buildPreviewText = (mapping, iconStyle) => {
 const IconCellPreviewTree = ({ iconStyle, mapping }) => {
     const size = iconStyle.Size ?? DEFAULT_ICON_STYLE_SIZE;
     const gap = iconStyle.Gap ?? DEFAULT_ICON_STYLE_GAP;
-    const textPosition = iconStyle.CellTextPosition ?? 'After';
+    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);

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

@@ -1,26 +1,33 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { convertAdaptableStyleToCSS } from '../../../../../Utilities/Helpers/StyleHelper';
-import { formatPercentBarPreviewCellText, getPercentBarPreviewGeometry, getPercentBarPreviewResolvedBarColor, getPercentBarPreviewSampleValues, getPercentBarPreviewScale, getPercentBarPreviewTrackColor, hasPercentBarRangesConfigured, } from '../../../../../Utilities/Helpers/percentBarPreviewHelper';
+import { getPercentBarPreviewGeometry, getPercentBarPreviewResolvedBarColor, getPercentBarPreviewSampleValues, getPercentBarPreviewScale, getPercentBarPreviewTrackColor, hasPercentBarRangesConfigured, } from '../../../../../Utilities/Helpers/percentBarPreviewHelper';
+import { buildBarChartCellTextLabels, getBarChartCellTextSlotPresence, hasBarChartCellTextConfigured, } from '../../../../../Utilities/Helpers/barChartCellText';
 import { Box, Flex } from '../../../../../components/Flex';
 import { Card } from '../../../../../components/Card';
 import { Tag } from '../../../../../components/Tag';
+import { BarChartCellTextPreview, shouldShowBarChartCellTextOutsideBar, } from './BarChartCellTextPreview';
 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 cellText = formatPercentBarPreviewCellText(value, percentageValue, pb);
-    const hasCellText = Boolean(pb.CellText?.length && cellText);
-    const textPosition = pb.CellTextPosition ?? 'Below';
+    const cellTextProperties = pb.CellTextProperties;
+    const labels = buildBarChartCellTextLabels(cellTextProperties, Number.isInteger(value) ? String(value) : value.toFixed(1), `${percentageValue.toFixed(0)}%`);
+    const hasCellText = hasBarChartCellTextConfigured(cellTextProperties) &&
+        Boolean(labels.cellValue || labels.percentage);
+    const presence = getBarChartCellTextSlotPresence(cellTextProperties);
     const fontStyle = pb.Font ? convertAdaptableStyleToCSS(pb.Font) : undefined;
-    const textEl = hasCellText ? (_jsx(Box, { className: "ab-PercentBar__text twa:text-2 twa:leading-tight twa:truncate", style: fontStyle, children: cellText })) : null;
+    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 && textPosition === 'Merged' && (_jsx(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 (_jsxs(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 && (_jsx(BarChartCellTextPreview, { 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: shouldShowBarChartCellTextOutsideBar(cellTextProperties, hasCellText) ? '100%' : undefined,
+        }, children: [hasCellText && presence.hasAbove && (_jsx(BarChartCellTextPreview, { className: cellTextClassName, style: fontStyle, cellTextProperties: cellTextProperties, labels: labels, vertical: "Above" })), barEl, hasCellText && presence.hasBelow && (_jsx(BarChartCellTextPreview, { className: cellTextClassName, style: fontStyle, cellTextProperties: cellTextProperties, labels: labels, vertical: "Below" }))] }));
 };
 export const StyledColumnPercentBarPreview = ({ data }) => {
     const pb = data.PercentBarStyle;

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

@@ -1,8 +1,10 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { buildBarChartCellTextLabels, getBarChartCellTextSlotPresence, hasBarChartCellTextConfigured, } from '../../../../../Utilities/Helpers/barChartCellText';
 import { Box, Flex } from '../../../../../components/Flex';
 import { Card } from '../../../../../components/Card';
 import { Tag } from '../../../../../components/Tag';
 import { StyledColumnRangeBarListPreview } from './StyledColumnChartListPreviews';
+import { BarChartCellTextPreview } from './BarChartCellTextPreview';
 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;
@@ -20,28 +22,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 = buildBarChartCellTextLabels(cellTextProperties, Number.isInteger(sampleValue) ? String(sampleValue) : sampleValue.toFixed(1), `${(valueFraction * 100).toFixed(0)}%`);
+    const hasCellText = hasBarChartCellTextConfigured(cellTextProperties) &&
+        Boolean(labels.cellValue || labels.percentage);
+    const presence = getBarChartCellTextSlotPresence(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 });
-    const textEl = hasCellText ? (_jsx(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 (_jsxs(Box, { className: "ab-RangeBar__wrapper twa:relative twa:inline-flex", children: [chartEl, _jsx(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 (_jsxs(Box, { className: "ab-RangeBar__wrapper twa:relative twa:inline-flex", children: [chartEl, _jsx(BarChartCellTextPreview, { 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", flexDirection: "column", alignItems: isVertical ? 'center' : 'stretch', style: { justifyContent: 'center', gap: hasCellText ? 2 : 0 }, children: [hasCellText && textPosition === 'Above' && textEl, chartEl, hasCellText && textPosition === 'Below' && textEl] }));
+    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(BarChartCellTextPreview, { 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(BarChartCellTextPreview, { 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(BarChartCellTextPreview, { className: cellTextClassName, cellTextProperties: cellTextProperties, labels: labels, vertical: "Below" }))] }));
 };
 export 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/StyledColumnWizardStyleSection.js

@@ -3,15 +3,16 @@ import { CheckBox } from '../../../../components/CheckBox';
 import ErrorBox from '../../../../components/ErrorBox';
 import FormLayout, { FormRow } from '../../../../components/FormLayout';
 import { Tag } from '../../../../components/Tag';
-import { ColorPicker } from '../../../../components/ColorPicker';
+import { formatBarChartCellTextLayoutSummary, getActiveBarChartCellTextTokens, hasBarChartCellTextConfigured, patchBarChartCellTextPlacement, resolveBarChartCellTextLayout, toggleBarChartCellTextToken, } from '../../../../Utilities/Helpers/barChartCellText';
+import { BarChartCellTextLayoutEditor } from './Components/BarChartCellTextLayoutEditor';
+import { OptionalColorPicker } from '../../../../components/ColorPicker';
 import { getGraySwatchColor } from '../../../UIHelper';
 import { useOnePageAdaptableWizardContext } from '../../../Wizard/OnePageAdaptableWizard';
-import ArrayExtensions from '../../../../Utilities/Extensions/ArrayExtensions';
 import { Box, Flex } from '../../../../components/Flex';
 import Radio, { RadioGroup } from '../../../../components/Radio';
-import { Toggle, ToggleGroup } from '../../../../components/Toggle';
 import { getCellFontStyleSummaryItems, StyledColumnFontStyleEditor, } from '../StyledColumnSliceStyleEditors';
 import { Card } from '../../../../components/Card';
+import { renderSummaryStringTags } from '../../../Wizard/SummaryColorTag';
 import { StyledColumnPercentBarPreviewCard } from './Components/StyledColumnPercentBarPreview';
 // Re-export the Ranges section + summary for legacy import paths.
 export { renderStyledColumnRangesSummary, StyledColumnWizardRangesSection, } from './StyledColumnWizardRangesSection';
@@ -35,11 +36,12 @@ const formatPercentBarToolTipSummary = (toolTipText) => toolTipText
     .join(' + ') ?? '';
 const buildStyledColumnPercentBarStyleSummaryStrings = (pb, options) => {
     const items = [`Origin: ${formatOriginLabel(pb.Origin)}`];
-    if (pb.CellText?.length) {
-        items.push(`Cell Text: ${formatPercentBarCellTextSummary(pb.CellText)}`);
-        items.push(`Cell Text Position: ${pb.CellTextPosition ?? 'Below'}`);
-        if (pb.CellTextAlignment != null) {
-            items.push(`Cell Text Alignment: ${pb.CellTextAlignment}`);
+    if (hasBarChartCellTextConfigured(pb.CellTextProperties)) {
+        const tokens = getActiveBarChartCellTextTokens(pb.CellTextProperties);
+        items.push(`Cell Text: ${formatPercentBarCellTextSummary(tokens)}`);
+        const layoutSummary = formatBarChartCellTextLayoutSummary(resolveBarChartCellTextLayout(pb.CellTextProperties));
+        if (layoutSummary) {
+            items.push(`Placement: ${layoutSummary}`);
         }
     }
     else if (options.includeEmptyCellText) {
@@ -81,7 +83,7 @@ export const renderStyledColumnStyleSummary = (data, _api) => {
         includeEmptyCellText: true,
         includeEmptyTooltip: true,
     });
-    return (_jsx(Flex, { alignItems: "center", className: "twa:flex-wrap twa:gap-2", children: items.map((item) => (_jsx(Tag, { children: item }, item))) }));
+    return renderSummaryStringTags(items);
 };
 // Legacy wrapper kept for any external consumers; safe no-op here.
 export const renderFormatColumnStyleWizardSummary = (data) => {
@@ -91,11 +93,6 @@ export const renderFormatColumnStyleWizardSummary = (data) => {
 // Pinning the width forces colons to line up vertically across cards rather than
 // each FormLayout sizing its label column independently from its own longest label.
 const STYLE_FORM_SIZES = ['200px', '1fr'];
-const CELL_TEXT_POSITION_CHOICES = [
-    { value: 'Above', label: 'Above Bar' },
-    { value: 'Below', label: 'Below Bar' },
-    { value: 'Merged', label: 'Merged' },
-];
 const ORIGIN_CHOICES = [
     {
         value: 'Auto',
@@ -120,6 +117,7 @@ export const StyledColumnWizardStyleSection = (props) => {
         return (_jsx(Box, { children: !data.ColumnId && (_jsx(ErrorBox, { className: "twa:mt-2", children: "You need to select a column before styling." })) }));
     }
     const pb = data.PercentBarStyle;
+    const cellTextProperties = pb.CellTextProperties;
     // ---- updaters -----------------------------------------------------------
     const update = (patch) => {
         props.onChange({
@@ -127,12 +125,13 @@ export const StyledColumnWizardStyleSection = (props) => {
             PercentBarStyle: { ...pb, ...patch },
         });
     };
-    const onCellTextChanged = (token, checked) => {
-        const current = pb.CellText ?? [];
-        const next = checked
-            ? Array.from(new Set([...current, token]))
-            : current.filter((t) => t !== token);
-        update({ CellText: next });
+    const onCellTextLayoutToggle = (token, show) => {
+        update(toggleBarChartCellTextToken(cellTextProperties, token, show));
+    };
+    const onCellTextPlacementChange = (token, patch) => {
+        update({
+            CellTextProperties: patchBarChartCellTextPlacement(cellTextProperties, token, patch),
+        });
     };
     const onToolTipTextChanged = (token, checked) => {
         const current = pb.ToolTipText ?? [];
@@ -141,50 +140,20 @@ export const StyledColumnWizardStyleSection = (props) => {
             : current.filter((t) => t !== token);
         update({ ToolTipText: next });
     };
-    const handleCellTextPositionChange = (pos) => update({ CellTextPosition: pos });
     const handleOriginChange = (origin) => update({ Origin: origin });
-    const handleCellTextAlignmentChange = (choice) => {
-        if (choice === 'Inherit') {
-            const next = { ...pb };
-            delete next.CellTextAlignment;
-            props.onChange({ ...data, PercentBarStyle: next });
-            return;
-        }
-        update({ CellTextAlignment: choice });
-    };
-    const onAutoCellTextAlignmentChecked = (checked) => {
-        if (!checked) {
-            handleCellTextAlignmentChange('Inherit');
+    const onBackColorChange = (color) => {
+        if (color) {
+            update({ BackColor: color });
             return;
         }
-        let nextFont = pb.Font ? { ...pb.Font } : undefined;
-        if (nextFont) {
-            delete nextFont.Alignment;
-            if (Object.keys(nextFont).length === 0) {
-                nextFont = undefined;
-            }
-        }
-        props.onChange({
-            ...data,
-            PercentBarStyle: {
-                ...pb,
-                CellTextAlignment: 'Auto',
-                Font: nextFont,
-            },
-        });
-    };
-    const onUseBackColorChanged = (checked) => {
-        update({ BackColor: checked ? getGraySwatchColor() : null });
+        const { BackColor: _removed, ...rest } = pb;
+        props.onChange({ ...data, PercentBarStyle: rest });
     };
-    const onBackColorChange = (color) => update({ BackColor: color });
-    const cellTextDisabled = ArrayExtensions.IsNullOrEmpty(pb.CellText) || disabled;
-    const currentAlignment = pb.CellTextAlignment ?? 'Inherit';
+    const cellTextDisabled = !hasBarChartCellTextConfigured(cellTextProperties) || disabled;
     const currentOrigin = typeof pb.Origin === 'number'
         ? 'Min' // numeric origin doesn't fit the radio set; treat as Min for selection state
         : pb.Origin ?? 'Auto';
-    return (_jsxs(Box, { children: [_jsxs(Card, { shadow: false, className: "twa:mb-3", children: [_jsxs(Card.Title, { children: [_jsx(Box, { className: "twa:font-medium", children: "Bar Position" }), _jsx(Box, { className: "twa:text-xs twa:opacity-70 twa:font-normal twa:max-w-[520px]", children: "Set the position of the cell text relative to the bar" })] }), _jsx(Card.Body, { children: _jsx(RadioGroup, { orientation: "vertical", name: "ab-percentbar-origin", value: currentOrigin, onRadioChange: handleOriginChange, children: ORIGIN_CHOICES.map((choice) => (_jsx(Radio, { value: choice.value, disabled: disabled, children: _jsxs(Flex, { alignItems: "center", children: [_jsx(Box, { className: "twa:min-w-[60px]", children: choice.label }), _jsx(Box, { className: "twa:text-xs twa:opacity-70", children: choice.hint })] }) }, choice.value))) }) })] }), _jsxs(Card, { shadow: false, className: "twa:mb-3", children: [_jsxs(Card.Title, { children: [_jsx(Box, { className: "twa:font-medium", children: "Cell Text" }), _jsx(Box, { className: "twa:text-xs twa:opacity-70 twa:font-normal twa:max-w-[540px]", children: "Choose whether and how to display cell text (font properties take precedence over Format Column)" })] }), _jsxs(Card.Body, { children: [_jsxs(FormLayout, { sizes: [...STYLE_FORM_SIZES], children: [_jsxs(FormRow, { label: "Cell Display:", children: [_jsx(CheckBox, { disabled: disabled, checked: pb.CellText?.includes('CellValue'), onChange: (checked) => onCellTextChanged('CellValue', checked), children: "Cell Value" }), ' ', _jsx(CheckBox, { disabled: disabled, className: "twa:ml-3", checked: pb.CellText?.includes('PercentageValue'), onChange: (checked) => onCellTextChanged('PercentageValue', checked), children: "Percent Value" })] }), _jsx(FormRow, { label: "Cell Display Position:", children: _jsx(RadioGroup, { orientation: "horizontal", name: "ab-percentbar-cell-text-position", value: pb.CellTextPosition ?? 'Below', onRadioChange: handleCellTextPositionChange, className: "twa:gap-4", children: CELL_TEXT_POSITION_CHOICES.map((choice) => (_jsx(Radio, { value: choice.value, disabled: cellTextDisabled, children: choice.label }, choice.value))) }) }), _jsx(FormRow, { label: "Auto Text Alignment:", children: _jsxs(Flex, { alignItems: "center", className: "twa:gap-2", children: [_jsx(CheckBox, { disabled: cellTextDisabled, checked: pb.CellTextAlignment === 'Auto', onChange: onAutoCellTextAlignmentChecked }), _jsx(Box, { className: "twa:text-xs twa:opacity-70 twa:max-w-[420px]", children: "Follows bar (if Position is Auto or Zero); overrides fixed alignment below" })] }) }), _jsx(FormRow, { label: "Cell Text Alignment:", children: _jsx(Flex, { alignItems: "center", className: "twa:gap-2", children: _jsx(Box, { className: cellTextDisabled || pb.CellTextAlignment === 'Auto'
-                                                    ? 'twa:opacity-50 twa:pointer-events-none'
-                                                    : '', children: _jsx(Flex, { alignItems: "center", className: "twa:gap-2", children: _jsxs(ToggleGroup, { children: [_jsx(Toggle, { icon: "align-left", pressed: currentAlignment === 'Left', onPressedChange: (pressed) => handleCellTextAlignmentChange(pressed ? 'Left' : 'Inherit') }), _jsx(Toggle, { icon: "align-center", pressed: currentAlignment === 'Center', onPressedChange: (pressed) => handleCellTextAlignmentChange(pressed ? 'Center' : 'Inherit') }), _jsx(Toggle, { icon: "align-right", pressed: currentAlignment === 'Right', onPressedChange: (pressed) => handleCellTextAlignmentChange(pressed ? 'Right' : 'Inherit') })] }) }) }) }) })] }), _jsx(Box, { className: `twa:mt-3 twa:pt-3 twa:border-t twa:border-foreground/15 ${cellTextDisabled ? 'twa:opacity-50' : ''}`, children: _jsx(StyledColumnFontStyleEditor, { api: api, disabled: cellTextDisabled, hideAlignment: true, value: pb.Font, onChange: (next) => {
+    return (_jsxs(Box, { children: [_jsxs(Card, { shadow: false, className: "twa:mb-3", children: [_jsxs(Card.Title, { children: [_jsx(Box, { className: "twa:font-medium", children: "Bar Position" }), _jsx(Box, { className: "twa:text-xs twa:opacity-70 twa:font-normal twa:max-w-[520px]", children: "Set the position of the cell text relative to the bar" })] }), _jsx(Card.Body, { children: _jsx(RadioGroup, { orientation: "vertical", name: "ab-percentbar-origin", value: currentOrigin, onRadioChange: handleOriginChange, children: ORIGIN_CHOICES.map((choice) => (_jsx(Radio, { value: choice.value, disabled: disabled, children: _jsxs(Flex, { alignItems: "center", children: [_jsx(Box, { className: "twa:min-w-[60px]", children: choice.label }), _jsx(Box, { className: "twa:text-xs twa:opacity-70", children: choice.hint })] }) }, choice.value))) }) })] }), _jsxs(Card, { shadow: false, className: "twa:mb-3", children: [_jsxs(Card.Title, { children: [_jsx(Box, { className: "twa:font-medium", children: "Cell Text" }), _jsx(Box, { className: "twa:text-xs twa:opacity-70 twa:font-normal twa:max-w-[540px]", children: "Pick which values to display and where each one sits around the bar (font properties take precedence over Format Column)" })] }), _jsxs(Card.Body, { children: [_jsx(FormLayout, { sizes: [...STYLE_FORM_SIZES], children: _jsx(FormRow, { label: "Cell Text Layout:", children: _jsx(BarChartCellTextLayoutEditor, { disabled: disabled, cellTextProperties: cellTextProperties, onToggle: onCellTextLayoutToggle, onPlacementChange: onCellTextPlacementChange }) }) }), _jsx(Box, { className: `twa:mt-3 twa:pt-3 twa:border-t twa:border-foreground/15 ${cellTextDisabled ? 'twa:opacity-50' : ''}`, children: _jsx(StyledColumnFontStyleEditor, { api: api, disabled: cellTextDisabled, value: pb.Font, onChange: (next) => {
                                         if (next) {
                                             update({ Font: next });
                                         }
@@ -193,5 +162,5 @@ export const StyledColumnWizardStyleSection = (props) => {
                                             delete cleaned.Font;
                                             props.onChange({ ...data, PercentBarStyle: cleaned });
                                         }
-                                    } }) })] })] }), _jsxs(Card, { shadow: false, className: "twa:mb-3", children: [_jsxs(Card.Title, { children: [_jsx(Box, { className: "twa:font-medium", children: "Cell Style" }), _jsx(Box, { className: "twa:text-xs twa:opacity-70 twa:font-normal twa:max-w-[520px]", children: "Configure Tooltip and Background Colour" })] }), _jsx(Card.Body, { children: _jsxs(FormLayout, { sizes: [...STYLE_FORM_SIZES], children: [_jsxs(FormRow, { label: "Tooltip Display:", children: [_jsx(CheckBox, { disabled: disabled, checked: pb.ToolTipText?.includes('CellValue'), onChange: (checked) => onToolTipTextChanged('CellValue', checked), children: "Cell Value" }), ' ', _jsx(CheckBox, { disabled: disabled, className: "twa:ml-3", checked: pb.ToolTipText?.includes('PercentageValue'), onChange: (checked) => onToolTipTextChanged('PercentageValue', checked), children: "Percent Value" })] }), _jsx(FormRow, { label: `Back ${api.internalApi.getCorrectEnglishVariant('Colour')}:`, children: _jsxs(Flex, { alignItems: "center", children: [_jsx(CheckBox, { disabled: disabled, checked: !!pb.BackColor, onChange: onUseBackColorChanged, className: "twa:mr-2" }), pb.BackColor != undefined && (_jsx(ColorPicker, { disabled: disabled, api: api, value: pb.BackColor, onChange: onBackColorChange }))] }) })] }) })] }), _jsx(StyledColumnPercentBarPreviewCard, { data: data })] }));
+                                    } }) })] })] }), _jsxs(Card, { shadow: false, className: "twa:mb-3", children: [_jsxs(Card.Title, { children: [_jsx(Box, { className: "twa:font-medium", children: "Cell Style" }), _jsx(Box, { className: "twa:text-xs twa:opacity-70 twa:font-normal twa:max-w-[520px]", children: "Configure Tooltip and Background Colour" })] }), _jsx(Card.Body, { children: _jsxs(FormLayout, { sizes: [...STYLE_FORM_SIZES], children: [_jsxs(FormRow, { label: "Tooltip Display:", children: [_jsx(CheckBox, { disabled: disabled, checked: pb.ToolTipText?.includes('CellValue'), onChange: (checked) => onToolTipTextChanged('CellValue', checked), children: "Cell Value" }), ' ', _jsx(CheckBox, { disabled: disabled, className: "twa:ml-3", checked: pb.ToolTipText?.includes('PercentageValue'), onChange: (checked) => onToolTipTextChanged('PercentageValue', checked), children: "Percent Value" })] }), _jsx(FormRow, { label: `Back ${api.internalApi.getCorrectEnglishVariant('Colour')}:`, children: _jsx(OptionalColorPicker, { disabled: disabled, api: api, value: pb.BackColor ?? undefined, defaultColor: getGraySwatchColor(), onChange: onBackColorChange }) })] }) })] }), _jsx(StyledColumnPercentBarPreviewCard, { data: data })] }));
 };