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

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,13 +7,13 @@ 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");
@@ -42,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) {
@@ -101,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',
@@ -130,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({
@@ -137,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 ?? [];
@@ -151,38 +149,7 @@ 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');
-            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 onBackColorChange = (color) => {
         if (color) {
             update({ BackColor: color });
@@ -191,14 +158,11 @@ const StyledColumnWizardStyleSection = (props) => {
         const { BackColor: _removed, ...rest } = pb;
         props.onChange({ ...data, PercentBarStyle: rest });
     };
-    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 });
                                         }

package/src/agGrid/AgGridColumnAdapter.js

@@ -7,6 +7,7 @@ const kebabCase_1 = tslib_1.__importDefault(require("../Utilities/utils/kebabCas
 const AdaptableFormatPresets_1 = require("../AdaptableState/Common/AdaptableFormatPresets");
 const merge_1 = tslib_1.__importDefault(require("../Utilities/utils/merge"));
 const SparklineOptionsHelper_1 = require("../Utilities/Helpers/SparklineOptionsHelper");
+const barChartCellText_1 = require("../Utilities/Helpers/barChartCellText");
 const StyleHelper_1 = require("../Utilities/Helpers/StyleHelper");
 const StringExtensions_1 = tslib_1.__importDefault(require("../Utilities/Extensions/StringExtensions"));
 const AdaptableColumn_1 = require("../AdaptableState/Common/AdaptableColumn");
@@ -1450,7 +1451,7 @@ class AgGridColumnAdapter {
                 }
             }
         }
-        if (styledColumn.PercentBarStyle && styledColumn.PercentBarStyle.CellText) {
+        if (styledColumn.PercentBarStyle && (0, barChartCellText_1.hasBarChartCellTextConfigured)(styledColumn.PercentBarStyle.CellTextProperties)) {
             style.paddingTop = 0;
             style.paddingBottom = 0;
         }

package/src/agGrid/cellRenderers/BadgeRenderer.js

@@ -87,7 +87,9 @@ const getBadgeRendererForColumn = (styledColumn, abColumn, api) => {
                     ...adaptableApi.internalApi.buildBaseContext(),
                 };
                 const badge = api.styledColumnApi.internalApi.getApplicableBadge(badgeStyle, predicateDefHandlerContext);
-                const formattedValue = badge?.IconOnly ? '' : params.formatValue?.(value) ?? value ?? '';
+                const formattedValue = badge?.IconProperties?.IconOnly
+                    ? ''
+                    : params.formatValue?.(value) ?? value ?? '';
                 const isNullValue = formattedValue === '' || formattedValue === null || formattedValue === undefined;
                 if (!isNullValue) {
                     const config = { value: formattedValue };
@@ -117,7 +119,7 @@ const getBadgeRendererForColumn = (styledColumn, abColumn, api) => {
                 this.eGui.innerHTML = formattedValue;
                 return;
             }
-            if (badge.IconOnly) {
+            if (badge.IconProperties?.IconOnly) {
                 formattedValue = '';
             }
             this.renderBadges([
@@ -141,11 +143,11 @@ const getBadgeRendererForColumn = (styledColumn, abColumn, api) => {
                     key: index,
                     pillStyle: badge.PillStyle,
                     children: value,
-                    icon: badge.Icon,
-                    iconPosition: badge.IconPosition ?? 'start',
+                    icon: badge.IconProperties?.Icon,
+                    iconPosition: badge.IconProperties?.Position ?? 'start',
                     shape: badge.Shape,
                     density: badgeStyle.Density ?? 'Normal',
-                    iconGap: badge.IconGap,
+                    iconGap: badge.IconProperties?.Gap,
                 });
             });
             this.unmountReactRoot = api.internalApi

package/src/agGrid/cellRenderers/BulletChartRenderer.js

@@ -4,6 +4,7 @@ exports.getBulletChartRendererForColumn = void 0;
 const tslib_1 = require("tslib");
 const Helper_1 = tslib_1.__importDefault(require("../../Utilities/Helpers/Helper"));
 const clamp_1 = tslib_1.__importDefault(require("../../Utilities/utils/clamp"));
+const barChartCellText_1 = require("../../Utilities/Helpers/barChartCellText");
 const shouldRenderStyledColumnOnRow_1 = require("./shouldRenderStyledColumnOnRow");
 const SVG_NS = 'http://www.w3.org/2000/svg';
 const DEFAULT_BAR_HEIGHT = 8;
@@ -56,19 +57,18 @@ const normaliseMarker = (override, base) => {
     };
 };
 const resolveTargets = (bulletStyle, styledColumn, abColumn, rowNode, api) => {
-    if (bulletStyle.Target == undefined) {
+    const targetSpec = bulletStyle.TargetProperties?.Target;
+    if (targetSpec == undefined) {
         return [];
     }
-    const targets = Array.isArray(bulletStyle.Target)
-        ? bulletStyle.Target
-        : [bulletStyle.Target];
+    const targets = Array.isArray(targetSpec) ? targetSpec : [targetSpec];
     const resolved = [];
     for (const target of targets) {
         const value = resolveTargetValue(target, styledColumn, abColumn, rowNode, api);
         if (value == undefined || isNaN(value)) {
             continue;
         }
-        const marker = normaliseMarker(isTargetDefinition(target) ? target.Marker : undefined, bulletStyle.TargetMarker);
+        const marker = normaliseMarker(isTargetDefinition(target) ? target.Marker : undefined, bulletStyle.TargetProperties?.Marker);
         resolved.push({
             value,
             marker,
@@ -156,10 +156,10 @@ const getBulletChartRendererForColumn = (styledColumn, abColumn, api) => {
             // `BarThickness` is the bar's *short* axis (height in horizontal,
             // width in vertical). `BandThickness` is the matching short-axis
             // size of the surrounding bands.
-            const barThickness = bulletStyle.BarHeight ?? DEFAULT_BAR_HEIGHT;
+            const barThickness = bulletStyle.Bar?.Height ?? DEFAULT_BAR_HEIGHT;
             const bandThickness = Math.max(barThickness + 6, DEFAULT_BAND_HEIGHT);
-            const hasCellText = bulletStyle.CellText && bulletStyle.CellText.length > 0;
-            const isTextMerged = bulletStyle.CellTextPosition === 'Merged';
+            const cellTextProperties = bulletStyle.CellTextProperties;
+            const hasCellText = (0, barChartCellText_1.hasBarChartCellTextConfigured)(cellTextProperties);
             // Map a 0..1 value fraction onto the long-axis viewBox (0..100).
             // In horizontal: 0 -> left, 1 -> right.
             // In vertical:   0 -> bottom, 1 -> top (SVG y origin is at the top so
@@ -176,7 +176,7 @@ const getBulletChartRendererForColumn = (styledColumn, abColumn, api) => {
             this.eGui.style.alignItems = isVertical ? 'center' : 'stretch';
             this.eGui.style.justifyContent = 'center';
             this.eGui.style.position = 'relative';
-            this.eGui.style.height = hasCellText && !isTextMerged ? '80%' : '100%';
+            this.eGui.style.height = '100%';
             // SVG chart - we let `preserveAspectRatio="none"` stretch the long axis
             // (viewBox 0..100) to fill the cell while the short axis stays fixed
             // in pixels.
@@ -247,7 +247,7 @@ const getBulletChartRendererForColumn = (styledColumn, abColumn, api) => {
             const barCrossOffset = (bandThickness - barThickness) / 2;
             const bar = document.createElementNS(SVG_NS, 'rect');
             setRectAxes(bar, Math.min(valueCoord, originCoord), Math.abs(valueCoord - originCoord), barCrossOffset, barThickness);
-            bar.setAttribute('fill', bulletStyle.BarColor ?? DEFAULT_BAR_COLOR);
+            bar.setAttribute('fill', bulletStyle.Bar?.Color ?? DEFAULT_BAR_COLOR);
             bar.setAttribute('class', 'ab-BulletChart__bar');
             svg.appendChild(bar);
             // Target markers
@@ -259,39 +259,40 @@ const getBulletChartRendererForColumn = (styledColumn, abColumn, api) => {
                     svg.appendChild(marker);
                 }
             }
-            this.eGui.appendChild(svg);
+            // Wrap the SVG in a positioned container so a `Merged` text row can
+            // be absolute-positioned to the centre of the *bar* (matching Percent
+            // Bar's behaviour) instead of falling through to the wrapper centre,
+            // which would otherwise overlap an `Above` / `Below` band.
+            const svgContainer = document.createElement('div');
+            svgContainer.style.position = 'relative';
+            svgContainer.style.display = 'flex';
+            svgContainer.style.alignItems = 'center';
+            svgContainer.style.justifyContent = 'center';
+            // Horizontal: take the SVG's natural (bandThickness) height.
+            // Vertical: stretch to fill the wrapper so the SVG's `height: 100%`
+            // resolves against a real size.
+            if (isVertical) {
+                svgContainer.style.flex = '1 1 auto';
+                svgContainer.style.minHeight = '0';
+            }
+            else {
+                svgContainer.style.flex = '0 0 auto';
+            }
+            svgContainer.appendChild(svg);
+            this.eGui.appendChild(svgContainer);
             if (hasCellText) {
-                const textEl = document.createElement('div');
-                textEl.className = 'ab-BulletChart__text';
-                textEl.style.lineHeight = '1.2';
-                const parts = [];
-                if (bulletStyle.CellText.includes('CellValue')) {
-                    parts.push(params.formatValue?.(cellValue) ?? String(cellValue));
-                }
-                if (bulletStyle.CellText.includes('PercentageValue')) {
-                    parts.push(`${(valueFraction * 100).toFixed(0)}%`);
-                }
-                textEl.innerText = parts.join(' ');
-                switch (bulletStyle.CellTextPosition) {
-                    case 'Above':
-                        this.eGui.prepend(textEl);
-                        break;
-                    case 'Merged':
-                        textEl.style.position = 'absolute';
-                        textEl.style.top = '50%';
-                        textEl.style.transform = 'translateY(-50%)';
-                        textEl.style.left = '0';
-                        textEl.style.right = '0';
-                        textEl.style.paddingLeft = '5px';
-                        textEl.style.paddingRight = '5px';
-                        textEl.style.pointerEvents = 'none';
-                        this.eGui.appendChild(textEl);
-                        break;
-                    case 'Below':
-                    default:
-                        this.eGui.appendChild(textEl);
-                        break;
-                }
+                // See PercentBarRenderer: `params.formatValue` on a column without a
+                // `valueFormatter` returns the raw value (a number here), so coerce
+                // to string before it flows into the helpers.
+                const formattedCellValue = String(params.formatValue?.(cellValue) ?? cellValue);
+                const labels = (0, barChartCellText_1.buildBarChartCellTextLabels)(cellTextProperties, formattedCellValue, `${(valueFraction * 100).toFixed(0)}%`);
+                (0, barChartCellText_1.mountBarChartCellText)({
+                    wrapperEl: this.eGui,
+                    mergedOverlayEl: svgContainer,
+                    textClassName: 'ab-BulletChart__text',
+                    cellTextProperties,
+                    labels,
+                });
             }
         }
         getGui() {

package/src/agGrid/cellRenderers/IconRenderer.d.ts

@@ -1,4 +1,5 @@
-import { IconStyle, IconStyleMapping, StyledColumn } from '../../AdaptableState/StyledColumnState';
+import { StyledColumn } from '../../AdaptableState/StyledColumnState';
+import { IconStyle, IconStyleMapping } from '../../AdaptableState/StyledColumns/IconStyle';
 import { AdaptableApi } from '../../Api/AdaptableApi';
 import { AdaptableColumn } from '../../AdaptableState/Common/AdaptableColumn';
 /**

package/src/agGrid/cellRenderers/IconRenderer.js

@@ -199,7 +199,9 @@ const getIconRendererForColumn = (styledColumn, abColumn, api) => {
     const iconStyle = styledColumn.IconStyle;
     const size = iconStyle.Size ?? DEFAULT_SIZE;
     const gap = iconStyle.Gap ?? DEFAULT_GAP;
-    const textPosition = iconStyle.CellTextPosition ?? 'After';
+    const cellTextProperties = iconStyle.CellTextProperties;
+    const textPosition = cellTextProperties?.CellTextPosition ?? 'After';
+    const cellTextTokens = cellTextProperties?.CellText ?? [];
     const matchMode = iconStyle.MatchMode ?? 'Exact';
     // Resolve once at column-setup time. Cheap; recomputed when the column
     // is reconfigured (which is when this factory is re-invoked anyway).
@@ -236,16 +238,15 @@ const getIconRendererForColumn = (styledColumn, abColumn, api) => {
             const formatted = params.formatValue?.(cellValue) ??
                 (cellValue != undefined ? String(cellValue) : '');
             // `CellText` describes the *companion text alongside a matched icon*.
-            // `Fallback` describes *what to do when no mapping matches*. They are
-            // independent: when there is no match, `Fallback` decides on its own
-            // — `CellText` does not get to override `Fallback: 'Hide'`.
+            // `FallbackProperties.Mode` describes *what to do when no mapping matches*.
+            // They are independent: when there is no match, the fallback decides
+            // on its own — `CellText` does not get to override `Mode: 'Hide'`.
             let iconSpec;
             let text;
             let descriptionForTooltip;
             if (matched) {
                 iconSpec = matched.Icon;
                 descriptionForTooltip = matched.Description;
-                const cellTextTokens = iconStyle.CellText ?? [];
                 const textParts = [];
                 if (cellTextTokens.includes('CellValue') && formatted) {
                     textParts.push(formatted);
@@ -256,17 +257,18 @@ const getIconRendererForColumn = (styledColumn, abColumn, api) => {
                 text = textParts.length > 0 ? textParts.join(' · ') : undefined;
             }
             else if (!cellValueIsEmpty) {
-                // Unmatched, non-empty cell: defer entirely to `Fallback`.
-                const fallback = iconStyle.Fallback ?? 'Hide';
-                if (fallback === 'ShowText') {
+                // Unmatched, non-empty cell: defer entirely to the fallback config.
+                const fallbackMode = iconStyle.FallbackProperties?.Mode ?? 'Hide';
+                const fallbackIcon = iconStyle.FallbackProperties?.Icon;
+                if (fallbackMode === 'ShowText') {
                     text = formatted || undefined;
                 }
-                else if (fallback === 'Icon' && iconStyle.FallbackIcon) {
-                    iconSpec = iconStyle.FallbackIcon;
+                else if (fallbackMode === 'Icon' && fallbackIcon) {
+                    iconSpec = fallbackIcon;
                 }
                 // 'Hide' (and the unsupported permutations) render nothing.
             }
-            // else: empty cell → render nothing, regardless of `Fallback`.
+            // else: empty cell → render nothing, regardless of fallback config.
             // If we have nothing to draw, leave the cell empty (and skip mounting
             // a React root for this row).
             if (!iconSpec && !text) {