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

package/src/View/Wizard/WizardTypeSelection.js

@@ -0,0 +1,40 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.WizardTypeSelectionPreviewFrame = exports.WizardNameFieldSection = exports.WizardTypeSelectionSection = exports.WizardTypeSelectionCard = exports.getWizardTypeSelectionGridColumns = exports.WIZARD_TYPE_SELECTION_PREVIEW_FRAME_CLASS = void 0;
+const tslib_1 = require("tslib");
+const jsx_runtime_1 = require("react/jsx-runtime");
+const Input_1 = tslib_1.__importDefault(require("../../components/Input"));
+const Flex_1 = require("../../components/Flex");
+const Card_1 = require("../../components/Card");
+const utils_1 = require("../../lib/utils");
+exports.WIZARD_TYPE_SELECTION_PREVIEW_FRAME_CLASS = 'twa:flex twa:w-full twa:min-h-[32px] twa:items-center twa:justify-center twa:overflow-hidden twa:rounded-standard twa:border twa:border-[color-mix(in_srgb,var(--ab-color-foreground)_15%,transparent)] twa:bg-[color-mix(in_srgb,var(--ab-color-primary)_35%,transparent)] twa:px-2 twa:py-1';
+const getWizardTypeSelectionGridColumns = (choiceCount) => choiceCount === 4 ? 2 : 3;
+exports.getWizardTypeSelectionGridColumns = getWizardTypeSelectionGridColumns;
+const WizardTypeSelectionCard = ({ label, description, selected, disabled, disabledTooltip, dataName, minHeightClassName = 'twa:min-h-[108px]', onSelect, children, footer, }) => {
+    const handleActivate = () => {
+        if (!disabled) {
+            onSelect();
+        }
+    };
+    return ((0, jsx_runtime_1.jsxs)(Flex_1.Box, { role: "radio", tabIndex: disabled ? -1 : 0, "aria-checked": selected, "aria-disabled": disabled, "data-name": dataName, className: (0, utils_1.cn)('ab-WizardTypeSelectionCard group twa:relative twa:h-full twa:rounded-standard twa:border twa:border-primarydark/32 twa:bg-card twa:text-card-foreground twa:outline-none twa:transition-colors twa:focus-visible:ring-2 twa:focus-visible:ring-accent', minHeightClassName, disabled
+            ? 'twa:cursor-not-allowed twa:opacity-60'
+            : 'twa:cursor-pointer hover:twa:border-accent/55 hover:twa:bg-accent/5', selected &&
+            'twa:after:pointer-events-none twa:after:absolute twa:after:inset-0 twa:after:rounded-standard twa:after:border-2 twa:after:border-[var(--ab-cmp-wizard-type-selection-card__selected-border)] twa:after:bg-[var(--ab-cmp-wizard-type-selection-card__selected-overlay)]'), onClick: handleActivate, onKeyDown: (event) => {
+            if (disabled) {
+                return;
+            }
+            if (event.key === 'Enter' || event.key === ' ') {
+                event.preventDefault();
+                onSelect();
+            }
+        }, children: [(0, jsx_runtime_1.jsx)(Flex_1.Box, { "aria-hidden": true, className: (0, utils_1.cn)('twa:pointer-events-none twa:absolute twa:top-2.5 twa:right-2.5 twa:z-10 twa:size-4 twa:rounded-full twa:border-2 twa:transition-colors', selected
+                    ? 'twa:border-[var(--ab-cmp-wizard-type-selection-card__selected-border)] twa:bg-[var(--ab-cmp-wizard-type-selection-card__selected-border)]'
+                    : 'twa:border-primarydark/35 twa:bg-base group-hover:twa:border-accent/55'), children: selected ? ((0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:absolute twa:inset-0 twa:m-auto twa:size-1.5 twa:rounded-full twa:bg-[var(--ab-cmp-wizard-type-selection-card__selected-indicator-inner)]" })) : null }), (0, jsx_runtime_1.jsxs)(Card_1.Card, { shadow: false, style: { backgroundColor: 'transparent' }, className: "twa:flex twa:h-full twa:flex-col twa:justify-between twa:p-3 twa:pr-7", gap: 0, children: [(0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:font-medium", children: label }), children, description || disabledTooltip ? ((0, jsx_runtime_1.jsxs)(Flex_1.Box, { children: [description ? ((0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:text-xs twa:leading-snug twa:opacity-70", children: description })) : null, disabled && disabledTooltip ? ((0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:mt-1 twa:text-1 twa:leading-snug twa:italic twa:opacity-80", children: disabledTooltip })) : null] })) : null, footer] })] }));
+};
+exports.WizardTypeSelectionCard = WizardTypeSelectionCard;
+const WizardTypeSelectionSection = ({ headingId, title, intro, columns, dataName, className, children }) => ((0, jsx_runtime_1.jsxs)(Card_1.Card, { shadow: false, gap: 1, className: (0, utils_1.cn)('twa:flex-1 twa:min-h-0', className), children: [(0, jsx_runtime_1.jsxs)(Card_1.Card.Title, { gap: 1, border: false, className: "twa:flex-col twa:items-start twa:px-1 twa:pb-1", children: [(0, jsx_runtime_1.jsx)(Flex_1.Box, { id: headingId, className: "twa:font-medium", children: title }), (0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:mt-1.5 twa:text-xs twa:font-normal twa:opacity-70", children: intro })] }), (0, jsx_runtime_1.jsx)(Card_1.Card.Body, { className: "twa:min-h-0 twa:overflow-y-auto twa:p-1 twa:pt-0", children: (0, jsx_runtime_1.jsx)(Flex_1.Box, { "data-name": dataName, className: (0, utils_1.cn)('twa:grid twa:gap-2', columns === 2 ? 'twa:grid-cols-2' : 'twa:grid-cols-3'), role: "radiogroup", "aria-labelledby": headingId, children: children }) })] }));
+exports.WizardTypeSelectionSection = WizardTypeSelectionSection;
+const WizardNameFieldSection = ({ value, onChange, inputDataName = 'wizard-name', placeholder = 'Enter Name', }) => ((0, jsx_runtime_1.jsxs)(Card_1.Card, { shadow: false, gap: 1, className: "twa:bg-card twa:text-card-foreground", children: [(0, jsx_runtime_1.jsx)(Card_1.Card.Title, { gap: 1, border: false, className: "twa:px-1 twa:pb-1", children: (0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:font-medium", children: "Name" }) }), (0, jsx_runtime_1.jsx)(Card_1.Card.Body, { className: "twa:p-1", children: (0, jsx_runtime_1.jsx)(Input_1.default, { className: "twa:w-full twa:max-w-[420px]", "data-name": inputDataName, onChange: onChange, placeholder: placeholder, value: value }) })] }));
+exports.WizardNameFieldSection = WizardNameFieldSection;
+const WizardTypeSelectionPreviewFrame = ({ children, }) => ((0, jsx_runtime_1.jsx)(Flex_1.Box, { "aria-hidden": true, className: exports.WIZARD_TYPE_SELECTION_PREVIEW_FRAME_CLASS, children: children }));
+exports.WizardTypeSelectionPreviewFrame = WizardTypeSelectionPreviewFrame;

package/src/View/Wizard/rowGroupSummaryTags.d.ts

@@ -0,0 +1,18 @@
+import * as React from 'react';
+import { AdaptableApi, Layout } from '../../types';
+export declare const TableRowGroupSummaryTags: React.FC<{
+    layout: Layout;
+    api: AdaptableApi;
+}>;
+export declare const PivotRowGroupSummaryTags: React.FC<{
+    layout: Layout;
+    api: AdaptableApi;
+}>;
+export declare const TableRowGroupSummaryView: React.FC<{
+    layout: Layout;
+    api: AdaptableApi;
+}>;
+export declare const PivotRowGroupSummaryView: React.FC<{
+    layout: Layout;
+    api: AdaptableApi;
+}>;

package/src/View/Wizard/rowGroupSummaryTags.js

@@ -0,0 +1,21 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.PivotRowGroupSummaryView = exports.TableRowGroupSummaryView = exports.PivotRowGroupSummaryTags = exports.TableRowGroupSummaryTags = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const Tag_1 = require("../../components/Tag");
+const Flex_1 = require("../../components/Flex");
+const rowGroupSummaryHelpers_1 = require("../../Strategy/Utilities/Layout/rowGroupSummaryHelpers");
+const TableRowGroupSummaryTags = ({ layout, api, }) => {
+    const columnIds = layout.RowGroupedColumns ?? [];
+    return ((0, jsx_runtime_1.jsxs)(Flex_1.Flex, { flexWrap: "wrap", alignItems: "center", className: "twa:gap-1", children: [!columnIds.length ? ((0, jsx_runtime_1.jsx)(Tag_1.Tag, { children: "No Row Grouped Columns" })) : (columnIds.map((columnId) => ((0, jsx_runtime_1.jsx)(Tag_1.ColumnTag, { children: api.columnApi.getFriendlyNameForColumnId(columnId) }, columnId)))), (0, jsx_runtime_1.jsxs)(Tag_1.Tag, { children: ["Display Type: ", (0, rowGroupSummaryHelpers_1.getRowGroupDisplayTypeLabel)(layout)] }), (0, jsx_runtime_1.jsxs)(Tag_1.Tag, { children: ["Behaviour: ", (0, rowGroupSummaryHelpers_1.getRowGroupBehaviorLabel)(layout)] })] }));
+};
+exports.TableRowGroupSummaryTags = TableRowGroupSummaryTags;
+const PivotRowGroupSummaryTags = ({ layout, api, }) => {
+    const columnIds = layout.PivotGroupedColumns ?? [];
+    return ((0, jsx_runtime_1.jsxs)(Flex_1.Flex, { flexWrap: "wrap", alignItems: "center", className: "twa:gap-1", children: [!columnIds.length ? ((0, jsx_runtime_1.jsx)(Tag_1.Tag, { children: "No Row Grouped Columns" })) : (columnIds.map((columnId) => ((0, jsx_runtime_1.jsx)(Tag_1.ColumnTag, { children: api.columnApi.getFriendlyNameForColumnId(columnId) }, columnId)))), (0, jsx_runtime_1.jsxs)(Tag_1.Tag, { children: ["Behaviour: ", (0, rowGroupSummaryHelpers_1.getRowGroupBehaviorLabel)(layout)] })] }));
+};
+exports.PivotRowGroupSummaryTags = PivotRowGroupSummaryTags;
+const TableRowGroupSummaryView = (props) => (0, jsx_runtime_1.jsx)(exports.TableRowGroupSummaryTags, { ...props });
+exports.TableRowGroupSummaryView = TableRowGroupSummaryView;
+const PivotRowGroupSummaryView = (props) => (0, jsx_runtime_1.jsx)(exports.PivotRowGroupSummaryTags, { ...props });
+exports.PivotRowGroupSummaryView = PivotRowGroupSummaryView;

package/src/View/Wizard/scopeSummaryTags.d.ts

@@ -0,0 +1,6 @@
+import * as React from 'react';
+import { ColumnScope } from '../../AdaptableState/Common/ColumnScope';
+export { getScopeViewItemsTagVariant as getScopeSummaryTagVariant } from '../../components/Tag/columnScopeTagHelpers';
+export declare const ScopeSummaryTags: React.FC<{
+    scope: ColumnScope;
+}>;

package/src/View/Wizard/scopeSummaryTags.js

@@ -0,0 +1,38 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ScopeSummaryTags = exports.getScopeSummaryTagVariant = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const AdaptableColumn_1 = require("../../AdaptableState/Common/AdaptableColumn");
+const Tag_1 = require("../../components/Tag");
+const Flex_1 = require("../../components/Flex");
+const AdaptableContext_1 = require("../AdaptableContext");
+var columnScopeTagHelpers_1 = require("../../components/Tag/columnScopeTagHelpers");
+Object.defineProperty(exports, "getScopeSummaryTagVariant", { enumerable: true, get: function () { return columnScopeTagHelpers_1.getScopeViewItemsTagVariant; } });
+const ScopeSummaryTags = ({ scope }) => {
+    const { api } = (0, AdaptableContext_1.useAdaptable)();
+    const scopeApi = api.columnScopeApi;
+    const columnsInScope = scopeApi.getColumnsInScope(scope);
+    if (scopeApi.scopeIsAll(scope)) {
+        return (0, jsx_runtime_1.jsx)(Tag_1.Tag, { children: "All Columns" });
+    }
+    if ('ColumnIds' in scope) {
+        if (!columnsInScope.length) {
+            return (0, jsx_runtime_1.jsx)(Tag_1.Tag, { children: "None" });
+        }
+        return ((0, jsx_runtime_1.jsx)(Tag_1.TagList, { tags: columnsInScope.map((c) => c.friendlyName), variant: "column" }));
+    }
+    if ('DataTypes' in scope) {
+        if (!scope.DataTypes.length) {
+            return (0, jsx_runtime_1.jsx)(Tag_1.Tag, { children: "None" });
+        }
+        return ((0, jsx_runtime_1.jsx)(Flex_1.Flex, { flexWrap: "wrap", className: "twa:gap-1", children: scope.DataTypes.map((dataType) => ((0, jsx_runtime_1.jsx)(Tag_1.Tag, { children: (0, AdaptableColumn_1.getColumnTypeFriendlyName)(dataType) }, dataType))) }));
+    }
+    if ('ColumnTypes' in scope) {
+        if (!scope.ColumnTypes.length) {
+            return (0, jsx_runtime_1.jsx)(Tag_1.Tag, { children: "None" });
+        }
+        return ((0, jsx_runtime_1.jsx)(Flex_1.Flex, { flexWrap: "wrap", className: "twa:gap-1", children: scope.ColumnTypes.map((columnType) => ((0, jsx_runtime_1.jsx)(Tag_1.Tag, { children: columnType }, columnType))) }));
+    }
+    return (0, jsx_runtime_1.jsx)(Tag_1.Tag, { children: "None" });
+};
+exports.ScopeSummaryTags = ScopeSummaryTags;

package/src/agGrid/AgGridAdapter.js

@@ -590,11 +590,6 @@ class AgGridAdapter {
             return 'unknown';
         }
         let dataType = 'unknown';
-        // get the column type if already in store (and not unknown)
-        const existingColumn = this.adaptableApi.columnApi.getColumnWithColumnId(agColumn.getId(), logWarning);
-        if (existingColumn && existingColumn.dataType !== 'unknown') {
-            return existingColumn.dataType;
-        }
         // check for colDef dataType
         const colDefDataType = agColumn.getColDef().cellDataType;
         if (typeof colDefDataType === 'string' && agGridDataTypeDefinitions_1.ALL_ADAPTABLE_DATA_TYPES.includes(colDefDataType)) {

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");
@@ -1446,11 +1447,11 @@ class AgGridColumnAdapter {
                 const bg = (0, tinycolor2_1.default)(preparedColor).setAlpha(alpha);
                 style.backgroundColor = bg.toRgbString();
                 if (gradientStyle.AutoContrastText) {
-                    style.color = bg.getLuminance() > 0.45 ? '#111111' : '#ffffff';
+                    style.color = (0, StyleHelper_1.getAutoContrastTextColor)(preparedColor, alpha);
                 }
             }
         }
-        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/ActionColumnRenderer.js

@@ -3,7 +3,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.ActionColumnRenderer = exports.ReactActionColumnRenderer = void 0;
 const tslib_1 = require("tslib");
 const jsx_runtime_1 = require("react/jsx-runtime");
-const DropdownButton_1 = tslib_1.__importDefault(require("../../components/DropdownButton"));
+const DropdownButton_1 = require("../../components/DropdownButton");
 const React = tslib_1.__importStar(require("react"));
 const Icon_1 = require("../../components/Icon");
 const AdaptableButton_1 = require("../../View/Components/AdaptableButton");
@@ -17,10 +17,7 @@ function getActionColumnButtonProps(button, index, adaptableApi, context, rerend
     }
     const buttonLabel = adaptableApi.internalApi.getLabelForButton(button, context);
     const buttonTooltip = adaptableApi.internalApi.getTooltipForButton(button, context);
-    const identifier = button.label ??
-        button.icon?.name ??
-        button.tooltip ??
-        `${index + 1}`;
+    const identifier = button.label ?? button.icon?.name ?? button.tooltip ?? `${index + 1}`;
     return {
         button,
         buttonLabel,
@@ -56,7 +53,7 @@ const ActionColumnDropdown = (props) => {
         });
         return {
             label: buttonLabel || buttonTooltip,
-            icon: menuIcon ? ((0, jsx_runtime_1.jsx)(Icon_1.IconComponent, { icon: menuIcon })) : undefined,
+            icon: menuIcon ? (0, jsx_runtime_1.jsx)(Icon_1.IconComponent, { icon: menuIcon }) : undefined,
             disabled,
             onClick: () => {
                 actionButton.onClick?.(actionButton, context);
@@ -68,7 +65,7 @@ const ActionColumnDropdown = (props) => {
     if (!items.length) {
         return null;
     }
-    return ((0, jsx_runtime_1.jsx)(DropdownButton_1.default, { "data-name": "action-column-dropdown", variant: "outlined", tone: "neutral", items: items, collapseOnItemClick: true, listMinWidth: 140, showToggleIcon: true, accessLevel: GeneralConstants_1.ACCESS_LEVEL_FULL, children: dropdownLabel }));
+    return ((0, jsx_runtime_1.jsx)(DropdownButton_1.NewDropdownButton, { "data-name": "action-column-dropdown", variant: "outlined", tone: "neutral", items: items, accessLevel: GeneralConstants_1.ACCESS_LEVEL_FULL, children: dropdownLabel }));
 };
 const ActionColumnCellContent = (props) => {
     const { buttons, actionColumn, adaptableApi, context, rerender } = props;

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) {

package/src/agGrid/cellRenderers/PercentBarRenderer.js

@@ -5,6 +5,7 @@ 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 shouldRenderStyledColumnOnRow_1 = require("./shouldRenderStyledColumnOnRow");
+const barChartCellText_1 = require("../../Utilities/Helpers/barChartCellText");
 /**
  * Resolve the origin value (in the same numeric space as `min`/`max`) the bar
  * should grow from.
@@ -45,58 +46,6 @@ const columnComparisonUsesCentredAxis = (origin) => {
     }
     return o === 'Zero' || o === 'Auto';
 };
-/**
- * Linear (non-comparison) mode: bar grows from an interior point of the scale
- * (so positives / negatives can diverge left and right).
- */
-const linearScaleUsesCentredAxis = (percentBarStyle, cellValue, min, max) => {
-    const origin = percentBarStyle.Origin ?? 'Auto';
-    if (origin === 'Zero') {
-        return true;
-    }
-    if (origin === 'Min') {
-        return false;
-    }
-    if (typeof origin === 'number') {
-        if (max === min) {
-            return false;
-        }
-        const f = toFraction(origin, min, max);
-        return f > 0 && f < 1;
-    }
-    // Auto — same condition as resolveOrigin using 0 as the pivot.
-    return min < 0 || max < 0 || cellValue < 0;
-};
-const resolveCellTextAlignCss = (percentBarStyle, args) => {
-    const mode = percentBarStyle.CellTextAlignment;
-    if (mode == undefined) {
-        return undefined;
-    }
-    if (mode === 'Left') {
-        return 'left';
-    }
-    if (mode === 'Right') {
-        return 'right';
-    }
-    if (mode === 'Center') {
-        return 'center';
-    }
-    // Auto
-    const centred = args.hasColumnComparison
-        ? columnComparisonUsesCentredAxis(percentBarStyle.Origin)
-        : linearScaleUsesCentredAxis(percentBarStyle, args.numericValue, args.min, args.max);
-    if (!centred) {
-        return undefined;
-    }
-    const v = args.hasColumnComparison ? args.percentageValue : args.numericValue;
-    if (v > 0) {
-        return 'right';
-    }
-    if (v < 0) {
-        return 'left';
-    }
-    return 'center';
-};
 const getPercentBarRendererForColumn = (styledColumn, abColumn, api) => {
     if (!styledColumn.PercentBarStyle) {
         return;
@@ -195,11 +144,14 @@ const getPercentBarRendererForColumn = (styledColumn, abColumn, api) => {
                 }
             }
             // ----- Build the DOM -------------------------------------------------
-            const hasCellText = percentBarStyle.CellText && percentBarStyle.CellText.length > 0;
-            const isTextPositionMerged = percentBarStyle.CellTextPosition === 'Merged';
+            const cellTextProperties = percentBarStyle.CellTextProperties;
+            const hasCellText = (0, barChartCellText_1.hasBarChartCellTextConfigured)(cellTextProperties);
+            // Wrapper always fills the cell. The bar is the flex-grow child so it
+            // claims whatever space the (compact) text rows leave, with a small
+            // floor to stay visible even on short rows.
             this.eGui = document.createElement('div');
             this.eGui.className = 'ab-PercentBar__wrapper';
-            this.eGui.style.height = hasCellText && !isTextPositionMerged ? '80%' : '100%';
+            this.eGui.style.height = '100%';
             this.eGui.style.display = 'flex';
             this.eGui.style.flexDirection = 'column';
             this.eGui.style.justifyContent = 'center';
@@ -212,7 +164,10 @@ const getPercentBarRendererForColumn = (styledColumn, abColumn, api) => {
             if (percentBarStyle.BackColor) {
                 barEl.style.background = percentBarStyle.BackColor;
             }
-            barEl.style.flex = '1';
+            barEl.style.flex = '1 1 0';
+            // Floor so the bar can't be squeezed out of existence when both
+            // `Above` and `Below` bands are populated on a short row.
+            barEl.style.minHeight = '6px';
             // Render the inside bar whenever a colour has been resolved, even at
             // 0% width. A zero-width div is visually identical to skipping the
             // element but keeps the DOM consistent so tests / tooling can still
@@ -233,47 +188,20 @@ const getPercentBarRendererForColumn = (styledColumn, abColumn, api) => {
             }
             this.eGui.append(barEl);
             if (hasCellText) {
-                const textEl = document.createElement('div');
-                textEl.className = 'ab-PercentBar__text';
-                textEl.style.lineHeight = '1.2';
-                const parts = [];
-                if (percentBarStyle.CellText.includes('CellValue')) {
-                    parts.push(params.formatValue?.(rawCellValue) ?? String(rawCellValue));
-                }
-                if (percentBarStyle.CellText.includes('PercentageValue')) {
-                    parts.push(`${percentageValue.toFixed(0)}%`);
-                }
-                textEl.innerText = parts.join(' ');
-                const textAlignCss = resolveCellTextAlignCss(percentBarStyle, {
-                    numericValue,
-                    percentageValue,
-                    min,
-                    max,
-                    hasColumnComparison: !!percentBarStyle.ColumnComparison,
+                // Coerce to string: when no `valueFormatter` is set on the column,
+                // `params.formatValue` returns the raw value (a number for numeric
+                // columns), which then propagates through the helpers as a non-string
+                // and breaks string-only operations (e.g. `.length` checks).
+                const formattedCellValue = String(params.formatValue?.(rawCellValue) ?? rawCellValue);
+                const labels = (0, barChartCellText_1.buildBarChartCellTextLabels)(cellTextProperties, formattedCellValue, `${percentageValue.toFixed(0)}%`);
+                (0, barChartCellText_1.mountBarChartCellText)({
+                    wrapperEl: this.eGui,
+                    mergedOverlayEl: barEl,
+                    textClassName: 'ab-PercentBar__text',
+                    cellTextProperties,
+                    labels,
+                    mergedPointerEventsNone: false,
                 });
-                if (textAlignCss) {
-                    textEl.style.textAlign = textAlignCss;
-                }
-                switch (percentBarStyle.CellTextPosition) {
-                    case 'Above':
-                        this.eGui.prepend(textEl);
-                        break;
-                    case 'Merged':
-                        textEl.style.position = 'absolute';
-                        // Centre vertically without knowing the row height
-                        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';
-                        barEl.append(textEl);
-                        break;
-                    case 'Below':
-                    default:
-                        this.eGui.append(textEl);
-                        break;
-                }
             }
         }
         getGui() {