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

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

@@ -0,0 +1,9 @@
+import * as React from 'react';
+import { BarChartCellTextPlacement, BarChartCellTextProperties } from '../../../../../AdaptableState/StyledColumns/Common/BarChartCellText';
+import { CellTextOption } from '../../../../../AdaptableState/StyledColumns/Common/CellTextOptions';
+export declare const BarChartCellTextLayoutEditor: React.FunctionComponent<{
+    disabled?: boolean;
+    cellTextProperties?: BarChartCellTextProperties;
+    onToggle: (token: CellTextOption, show: boolean) => void;
+    onPlacementChange: (token: CellTextOption, patch: Partial<BarChartCellTextPlacement>) => void;
+}>;

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

@@ -0,0 +1,40 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.BarChartCellTextLayoutEditor = void 0;
+const tslib_1 = require("tslib");
+const jsx_runtime_1 = require("react/jsx-runtime");
+const React = tslib_1.__importStar(require("react"));
+const barChartCellText_1 = require("../../../../../Utilities/Helpers/barChartCellText");
+const CheckBox_1 = require("../../../../../components/CheckBox");
+const Flex_1 = require("../../../../../components/Flex");
+const NewSelect_1 = require("../../../../../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';
+const BarChartCellTextLayoutEditor = ({ disabled, cellTextProperties, onToggle, onPlacementChange }) => {
+    const layout = (0, barChartCellText_1.resolveBarChartCellTextLayout)(cellTextProperties);
+    return ((0, jsx_runtime_1.jsxs)(Flex_1.Box, { className: "twa:inline-grid twa:grid-cols-[160px_140px_140px] twa:gap-x-4 twa:gap-y-2 twa:items-center", children: [(0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:text-xs twa:font-medium twa:opacity-80", children: "Value" }), (0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:text-xs twa:font-medium twa:opacity-80", children: "Horizontal" }), (0, jsx_runtime_1.jsx)(Flex_1.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 ((0, jsx_runtime_1.jsxs)(React.Fragment, { children: [(0, jsx_runtime_1.jsx)(Flex_1.Flex, { alignItems: "center", children: (0, jsx_runtime_1.jsx)(CheckBox_1.CheckBox, { disabled: disabled, checked: isShown, onChange: (checked) => onToggle(token, checked), children: TOKEN_LABELS[token] }) }), (0, jsx_runtime_1.jsx)(Flex_1.Box, { children: (0, jsx_runtime_1.jsx)(NewSelect_1.SingleSelect, { className: "twa:w-full", disabled: rowDisabled, value: placement?.Horizontal ?? 'Left', onValueChange: (v) => onPlacementChange(token, {
+                                    Horizontal: v,
+                                }), items: HORIZONTAL_CHOICES }) }), (0, jsx_runtime_1.jsx)(Flex_1.Box, { children: (0, jsx_runtime_1.jsx)(NewSelect_1.SingleSelect, { className: "twa:w-full", disabled: rowDisabled, value: placement?.Vertical ?? 'Below', onValueChange: (v) => onPlacementChange(token, {
+                                    Vertical: v,
+                                }), items: VERTICAL_CHOICES }) })] }, token));
+            })] }));
+};
+exports.BarChartCellTextLayoutEditor = BarChartCellTextLayoutEditor;

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

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

@@ -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 barChartCellText_1 = require("../../../../../Utilities/Helpers/barChartCellText");
 const Flex_1 = require("../../../../../components/Flex");
 const Card_1 = require("../../../../../components/Card");
 const Tag_1 = require("../../../../../components/Tag");
 const StyledColumnChartListPreviews_1 = require("./StyledColumnChartListPreviews");
+const BarChartCellTextPreview_1 = require("./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 ?? [];
@@ -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, barChartCellText_1.buildBarChartCellTextLabels)(cellTextProperties, Number.isInteger(sampleValue) ? String(sampleValue) : sampleValue.toFixed(1), `${(valueFraction * 100).toFixed(0)}%`);
+    const hasCellText = (0, barChartCellText_1.hasBarChartCellTextConfigured)(cellTextProperties) &&
+        Boolean(labels.cellValue || labels.percentage);
+    const presence = (0, barChartCellText_1.getBarChartCellTextSlotPresence)(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)(BarChartCellTextPreview_1.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 ((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)(BarChartCellTextPreview_1.BarChartCellTextPreview, { 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)(BarChartCellTextPreview_1.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 && ((0, jsx_runtime_1.jsx)(BarChartCellTextPreview_1.BarChartCellTextPreview, { 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/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

@@ -4,26 +4,33 @@ exports.StyledColumnPercentBarPreviewCard = exports.StyledColumnPercentBarPrevie
 const jsx_runtime_1 = require("react/jsx-runtime");
 const StyleHelper_1 = require("../../../../../Utilities/Helpers/StyleHelper");
 const percentBarPreviewHelper_1 = require("../../../../../Utilities/Helpers/percentBarPreviewHelper");
+const barChartCellText_1 = require("../../../../../Utilities/Helpers/barChartCellText");
 const Flex_1 = require("../../../../../components/Flex");
 const Card_1 = require("../../../../../components/Card");
 const Tag_1 = require("../../../../../components/Tag");
+const BarChartCellTextPreview_1 = require("./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 } = (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 cellTextProperties = pb.CellTextProperties;
+    const labels = (0, barChartCellText_1.buildBarChartCellTextLabels)(cellTextProperties, Number.isInteger(value) ? String(value) : value.toFixed(1), `${percentageValue.toFixed(0)}%`);
+    const hasCellText = (0, barChartCellText_1.hasBarChartCellTextConfigured)(cellTextProperties) &&
+        Boolean(labels.cellValue || labels.percentage);
+    const presence = (0, barChartCellText_1.getBarChartCellTextSlotPresence)(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 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, 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: {
                     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)(BarChartCellTextPreview_1.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 ((0, jsx_runtime_1.jsxs)(Flex_1.Flex, { className: `ab-PercentBar__wrapper ${PREVIEW_CELL_CLASS}`, flexDirection: "column", style: {
+            justifyContent: 'center',
+            height: (0, BarChartCellTextPreview_1.shouldShowBarChartCellTextOutsideBar)(cellTextProperties, hasCellText) ? '100%' : undefined,
+        }, children: [hasCellText && presence.hasAbove && ((0, jsx_runtime_1.jsx)(BarChartCellTextPreview_1.BarChartCellTextPreview, { className: cellTextClassName, style: fontStyle, cellTextProperties: cellTextProperties, labels: labels, vertical: "Above" })), barEl, hasCellText && presence.hasBelow && ((0, jsx_runtime_1.jsx)(BarChartCellTextPreview_1.BarChartCellTextPreview, { className: cellTextClassName, style: fontStyle, cellTextProperties: cellTextProperties, labels: labels, vertical: "Below" }))] }));
 };
 const StyledColumnPercentBarPreview = ({ data }) => {
     const pb = data.PercentBarStyle;

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 barChartCellText_1 = require("../../../../../Utilities/Helpers/barChartCellText");
 const Flex_1 = require("../../../../../components/Flex");
 const Card_1 = require("../../../../../components/Card");
 const Tag_1 = require("../../../../../components/Tag");
 const StyledColumnChartListPreviews_1 = require("./StyledColumnChartListPreviews");
+const BarChartCellTextPreview_1 = require("./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;
@@ -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, barChartCellText_1.buildBarChartCellTextLabels)(cellTextProperties, Number.isInteger(sampleValue) ? String(sampleValue) : sampleValue.toFixed(1), `${(valueFraction * 100).toFixed(0)}%`);
+    const hasCellText = (0, barChartCellText_1.hasBarChartCellTextConfigured)(cellTextProperties) &&
+        Boolean(labels.cellValue || labels.percentage);
+    const presence = (0, barChartCellText_1.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 = (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)(BarChartCellTextPreview_1.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 ((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)(BarChartCellTextPreview_1.BarChartCellTextPreview, { 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)(BarChartCellTextPreview_1.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 && ((0, jsx_runtime_1.jsx)(BarChartCellTextPreview_1.BarChartCellTextPreview, { 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/StyledColumnWizardStyleSection.js

@@ -7,15 +7,16 @@ const CheckBox_1 = require("../../../../components/CheckBox");
 const ErrorBox_1 = tslib_1.__importDefault(require("../../../../components/ErrorBox"));
 const FormLayout_1 = tslib_1.__importStar(require("../../../../components/FormLayout"));
 const Tag_1 = require("../../../../components/Tag");
+const barChartCellText_1 = require("../../../../Utilities/Helpers/barChartCellText");
+const BarChartCellTextLayoutEditor_1 = require("./Components/BarChartCellTextLayoutEditor");
 const ColorPicker_1 = require("../../../../components/ColorPicker");
 const UIHelper_1 = require("../../../UIHelper");
 const OnePageAdaptableWizard_1 = require("../../../Wizard/OnePageAdaptableWizard");
-const ArrayExtensions_1 = tslib_1.__importDefault(require("../../../../Utilities/Extensions/ArrayExtensions"));
 const Flex_1 = require("../../../../components/Flex");
 const Radio_1 = tslib_1.__importStar(require("../../../../components/Radio"));
-const Toggle_1 = require("../../../../components/Toggle");
 const StyledColumnSliceStyleEditors_1 = require("../StyledColumnSliceStyleEditors");
 const Card_1 = require("../../../../components/Card");
+const SummaryColorTag_1 = require("../../../Wizard/SummaryColorTag");
 const StyledColumnPercentBarPreview_1 = require("./Components/StyledColumnPercentBarPreview");
 // Re-export the Ranges section + summary for legacy import paths.
 var StyledColumnWizardRangesSection_1 = require("./StyledColumnWizardRangesSection");
@@ -41,11 +42,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 ((0, barChartCellText_1.hasBarChartCellTextConfigured)(pb.CellTextProperties)) {
+        const tokens = (0, barChartCellText_1.getActiveBarChartCellTextTokens)(pb.CellTextProperties);
+        items.push(`Cell Text: ${formatPercentBarCellTextSummary(tokens)}`);
+        const layoutSummary = (0, barChartCellText_1.formatBarChartCellTextLayoutSummary)((0, barChartCellText_1.resolveBarChartCellTextLayout)(pb.CellTextProperties));
+        if (layoutSummary) {
+            items.push(`Placement: ${layoutSummary}`);
         }
     }
     else if (options.includeEmptyCellText) {
@@ -88,7 +90,7 @@ const renderStyledColumnStyleSummary = (data, _api) => {
         includeEmptyCellText: true,
         includeEmptyTooltip: true,
     });
-    return ((0, jsx_runtime_1.jsx)(Flex_1.Flex, { alignItems: "center", className: "twa:flex-wrap twa:gap-2", children: items.map((item) => ((0, jsx_runtime_1.jsx)(Tag_1.Tag, { children: item }, item))) }));
+    return (0, SummaryColorTag_1.renderSummaryStringTags)(items);
 };
 exports.renderStyledColumnStyleSummary = renderStyledColumnStyleSummary;
 // Legacy wrapper kept for any external consumers; safe no-op here.
@@ -100,11 +102,6 @@ exports.renderFormatColumnStyleWizardSummary = renderFormatColumnStyleWizardSumm
 // 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',
@@ -129,6 +126,7 @@ const StyledColumnWizardStyleSection = (props) => {
         return ((0, jsx_runtime_1.jsx)(Flex_1.Box, { children: !data.ColumnId && ((0, jsx_runtime_1.jsx)(ErrorBox_1.default, { 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({
@@ -136,12 +134,13 @@ 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((0, barChartCellText_1.toggleBarChartCellTextToken)(cellTextProperties, token, show));
+    };
+    const onCellTextPlacementChange = (token, patch) => {
+        update({
+            CellTextProperties: (0, barChartCellText_1.patchBarChartCellTextPlacement)(cellTextProperties, token, patch),
+        });
     };
     const onToolTipTextChanged = (token, checked) => {
         const current = pb.ToolTipText ?? [];
@@ -150,50 +149,20 @@ 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 ? (0, UIHelper_1.getGraySwatchColor)() : null });
+        const { BackColor: _removed, ...rest } = pb;
+        props.onChange({ ...data, PercentBarStyle: rest });
     };
-    const onBackColorChange = (color) => update({ BackColor: color });
-    const cellTextDisabled = ArrayExtensions_1.default.IsNullOrEmpty(pb.CellText) || disabled;
-    const currentAlignment = pb.CellTextAlignment ?? 'Inherit';
+    const cellTextDisabled = !(0, barChartCellText_1.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 ((0, jsx_runtime_1.jsxs)(Flex_1.Box, { children: [(0, jsx_runtime_1.jsxs)(Card_1.Card, { shadow: false, className: "twa:mb-3", children: [(0, jsx_runtime_1.jsxs)(Card_1.Card.Title, { children: [(0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:font-medium", children: "Bar Position" }), (0, jsx_runtime_1.jsx)(Flex_1.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" })] }), (0, jsx_runtime_1.jsx)(Card_1.Card.Body, { children: (0, jsx_runtime_1.jsx)(Radio_1.RadioGroup, { orientation: "vertical", name: "ab-percentbar-origin", value: currentOrigin, onRadioChange: handleOriginChange, children: ORIGIN_CHOICES.map((choice) => ((0, jsx_runtime_1.jsx)(Radio_1.default, { value: choice.value, disabled: disabled, children: (0, jsx_runtime_1.jsxs)(Flex_1.Flex, { alignItems: "center", children: [(0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:min-w-[60px]", children: choice.label }), (0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:text-xs twa:opacity-70", children: choice.hint })] }) }, choice.value))) }) })] }), (0, jsx_runtime_1.jsxs)(Card_1.Card, { shadow: false, className: "twa:mb-3", children: [(0, jsx_runtime_1.jsxs)(Card_1.Card.Title, { children: [(0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:font-medium", children: "Cell Text" }), (0, jsx_runtime_1.jsx)(Flex_1.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)" })] }), (0, jsx_runtime_1.jsxs)(Card_1.Card.Body, { children: [(0, jsx_runtime_1.jsxs)(FormLayout_1.default, { sizes: [...STYLE_FORM_SIZES], children: [(0, jsx_runtime_1.jsxs)(FormLayout_1.FormRow, { label: "Cell Display:", children: [(0, jsx_runtime_1.jsx)(CheckBox_1.CheckBox, { disabled: disabled, checked: pb.CellText?.includes('CellValue'), onChange: (checked) => onCellTextChanged('CellValue', checked), children: "Cell Value" }), ' ', (0, jsx_runtime_1.jsx)(CheckBox_1.CheckBox, { disabled: disabled, className: "twa:ml-3", checked: pb.CellText?.includes('PercentageValue'), onChange: (checked) => onCellTextChanged('PercentageValue', checked), children: "Percent Value" })] }), (0, jsx_runtime_1.jsx)(FormLayout_1.FormRow, { label: "Cell Display Position:", children: (0, jsx_runtime_1.jsx)(Radio_1.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) => ((0, jsx_runtime_1.jsx)(Radio_1.default, { value: choice.value, disabled: cellTextDisabled, children: choice.label }, choice.value))) }) }), (0, jsx_runtime_1.jsx)(FormLayout_1.FormRow, { label: "Auto Text Alignment:", children: (0, jsx_runtime_1.jsxs)(Flex_1.Flex, { alignItems: "center", className: "twa:gap-2", children: [(0, jsx_runtime_1.jsx)(CheckBox_1.CheckBox, { disabled: cellTextDisabled, checked: pb.CellTextAlignment === 'Auto', onChange: onAutoCellTextAlignmentChecked }), (0, jsx_runtime_1.jsx)(Flex_1.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" })] }) }), (0, jsx_runtime_1.jsx)(FormLayout_1.FormRow, { label: "Cell Text Alignment:", children: (0, jsx_runtime_1.jsx)(Flex_1.Flex, { alignItems: "center", className: "twa:gap-2", children: (0, jsx_runtime_1.jsx)(Flex_1.Box, { className: cellTextDisabled || pb.CellTextAlignment === 'Auto'
-                                                    ? 'twa:opacity-50 twa:pointer-events-none'
-                                                    : '', children: (0, jsx_runtime_1.jsx)(Flex_1.Flex, { alignItems: "center", className: "twa:gap-2", children: (0, jsx_runtime_1.jsxs)(Toggle_1.ToggleGroup, { children: [(0, jsx_runtime_1.jsx)(Toggle_1.Toggle, { icon: "align-left", pressed: currentAlignment === 'Left', onPressedChange: (pressed) => handleCellTextAlignmentChange(pressed ? 'Left' : 'Inherit') }), (0, jsx_runtime_1.jsx)(Toggle_1.Toggle, { icon: "align-center", pressed: currentAlignment === 'Center', onPressedChange: (pressed) => handleCellTextAlignmentChange(pressed ? 'Center' : 'Inherit') }), (0, jsx_runtime_1.jsx)(Toggle_1.Toggle, { icon: "align-right", pressed: currentAlignment === 'Right', onPressedChange: (pressed) => handleCellTextAlignmentChange(pressed ? 'Right' : 'Inherit') })] }) }) }) }) })] }), (0, jsx_runtime_1.jsx)(Flex_1.Box, { className: `twa:mt-3 twa:pt-3 twa:border-t twa:border-foreground/15 ${cellTextDisabled ? 'twa:opacity-50' : ''}`, children: (0, jsx_runtime_1.jsx)(StyledColumnSliceStyleEditors_1.StyledColumnFontStyleEditor, { api: api, disabled: cellTextDisabled, hideAlignment: true, value: pb.Font, onChange: (next) => {
+    return ((0, jsx_runtime_1.jsxs)(Flex_1.Box, { children: [(0, jsx_runtime_1.jsxs)(Card_1.Card, { shadow: false, className: "twa:mb-3", children: [(0, jsx_runtime_1.jsxs)(Card_1.Card.Title, { children: [(0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:font-medium", children: "Bar Position" }), (0, jsx_runtime_1.jsx)(Flex_1.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" })] }), (0, jsx_runtime_1.jsx)(Card_1.Card.Body, { children: (0, jsx_runtime_1.jsx)(Radio_1.RadioGroup, { orientation: "vertical", name: "ab-percentbar-origin", value: currentOrigin, onRadioChange: handleOriginChange, children: ORIGIN_CHOICES.map((choice) => ((0, jsx_runtime_1.jsx)(Radio_1.default, { value: choice.value, disabled: disabled, children: (0, jsx_runtime_1.jsxs)(Flex_1.Flex, { alignItems: "center", children: [(0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:min-w-[60px]", children: choice.label }), (0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:text-xs twa:opacity-70", children: choice.hint })] }) }, choice.value))) }) })] }), (0, jsx_runtime_1.jsxs)(Card_1.Card, { shadow: false, className: "twa:mb-3", children: [(0, jsx_runtime_1.jsxs)(Card_1.Card.Title, { children: [(0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:font-medium", children: "Cell Text" }), (0, jsx_runtime_1.jsx)(Flex_1.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)" })] }), (0, jsx_runtime_1.jsxs)(Card_1.Card.Body, { children: [(0, jsx_runtime_1.jsx)(FormLayout_1.default, { sizes: [...STYLE_FORM_SIZES], children: (0, jsx_runtime_1.jsx)(FormLayout_1.FormRow, { label: "Cell Text Layout:", children: (0, jsx_runtime_1.jsx)(BarChartCellTextLayoutEditor_1.BarChartCellTextLayoutEditor, { disabled: disabled, cellTextProperties: cellTextProperties, onToggle: onCellTextLayoutToggle, onPlacementChange: onCellTextPlacementChange }) }) }), (0, jsx_runtime_1.jsx)(Flex_1.Box, { className: `twa:mt-3 twa:pt-3 twa:border-t twa:border-foreground/15 ${cellTextDisabled ? 'twa:opacity-50' : ''}`, children: (0, jsx_runtime_1.jsx)(StyledColumnSliceStyleEditors_1.StyledColumnFontStyleEditor, { api: api, disabled: cellTextDisabled, value: pb.Font, onChange: (next) => {
                                         if (next) {
                                             update({ Font: next });
                                         }
@@ -202,6 +171,6 @@ const StyledColumnWizardStyleSection = (props) => {
                                             delete cleaned.Font;
                                             props.onChange({ ...data, PercentBarStyle: cleaned });
                                         }
-                                    } }) })] })] }), (0, jsx_runtime_1.jsxs)(Card_1.Card, { shadow: false, className: "twa:mb-3", children: [(0, jsx_runtime_1.jsxs)(Card_1.Card.Title, { children: [(0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:font-medium", children: "Cell Style" }), (0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:text-xs twa:opacity-70 twa:font-normal twa:max-w-[520px]", children: "Configure Tooltip and Background Colour" })] }), (0, jsx_runtime_1.jsx)(Card_1.Card.Body, { children: (0, jsx_runtime_1.jsxs)(FormLayout_1.default, { sizes: [...STYLE_FORM_SIZES], children: [(0, jsx_runtime_1.jsxs)(FormLayout_1.FormRow, { label: "Tooltip Display:", children: [(0, jsx_runtime_1.jsx)(CheckBox_1.CheckBox, { disabled: disabled, checked: pb.ToolTipText?.includes('CellValue'), onChange: (checked) => onToolTipTextChanged('CellValue', checked), children: "Cell Value" }), ' ', (0, jsx_runtime_1.jsx)(CheckBox_1.CheckBox, { disabled: disabled, className: "twa:ml-3", checked: pb.ToolTipText?.includes('PercentageValue'), onChange: (checked) => onToolTipTextChanged('PercentageValue', checked), children: "Percent Value" })] }), (0, jsx_runtime_1.jsx)(FormLayout_1.FormRow, { label: `Back ${api.internalApi.getCorrectEnglishVariant('Colour')}:`, children: (0, jsx_runtime_1.jsxs)(Flex_1.Flex, { alignItems: "center", children: [(0, jsx_runtime_1.jsx)(CheckBox_1.CheckBox, { disabled: disabled, checked: !!pb.BackColor, onChange: onUseBackColorChanged, className: "twa:mr-2" }), pb.BackColor != undefined && ((0, jsx_runtime_1.jsx)(ColorPicker_1.ColorPicker, { disabled: disabled, api: api, value: pb.BackColor, onChange: onBackColorChange }))] }) })] }) })] }), (0, jsx_runtime_1.jsx)(StyledColumnPercentBarPreview_1.StyledColumnPercentBarPreviewCard, { data: data })] }));
+                                    } }) })] })] }), (0, jsx_runtime_1.jsxs)(Card_1.Card, { shadow: false, className: "twa:mb-3", children: [(0, jsx_runtime_1.jsxs)(Card_1.Card.Title, { children: [(0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:font-medium", children: "Cell Style" }), (0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:text-xs twa:opacity-70 twa:font-normal twa:max-w-[520px]", children: "Configure Tooltip and Background Colour" })] }), (0, jsx_runtime_1.jsx)(Card_1.Card.Body, { children: (0, jsx_runtime_1.jsxs)(FormLayout_1.default, { sizes: [...STYLE_FORM_SIZES], children: [(0, jsx_runtime_1.jsxs)(FormLayout_1.FormRow, { label: "Tooltip Display:", children: [(0, jsx_runtime_1.jsx)(CheckBox_1.CheckBox, { disabled: disabled, checked: pb.ToolTipText?.includes('CellValue'), onChange: (checked) => onToolTipTextChanged('CellValue', checked), children: "Cell Value" }), ' ', (0, jsx_runtime_1.jsx)(CheckBox_1.CheckBox, { disabled: disabled, className: "twa:ml-3", checked: pb.ToolTipText?.includes('PercentageValue'), onChange: (checked) => onToolTipTextChanged('PercentageValue', checked), children: "Percent Value" })] }), (0, jsx_runtime_1.jsx)(FormLayout_1.FormRow, { label: `Back ${api.internalApi.getCorrectEnglishVariant('Colour')}:`, children: (0, jsx_runtime_1.jsx)(ColorPicker_1.OptionalColorPicker, { disabled: disabled, api: api, value: pb.BackColor ?? undefined, defaultColor: (0, UIHelper_1.getGraySwatchColor)(), onChange: onBackColorChange }) })] }) })] }), (0, jsx_runtime_1.jsx)(StyledColumnPercentBarPreview_1.StyledColumnPercentBarPreviewCard, { data: data })] }));
 };
 exports.StyledColumnWizardStyleSection = StyledColumnWizardStyleSection;