@adaptabletools/adaptable 23.0.0-canary.1 → 23.0.0-canary.10

package/src/agGrid/AgGridExportAdapter.js

@@ -5,7 +5,7 @@ import { createUuid } from '../AdaptableState/Uuid';
 import { AG_GRID_GROUPED_COLUMN, AG_GRID_SELECTION_COLUMN, } from '../Utilities/Constants/GeneralConstants';
 import { ExportModuleId } from '../Utilities/Constants/ModuleConstants';
 import StringExtensions from '../Utilities/Extensions/StringExtensions';
-import FormatHelper, { DateFormatter } from '../Utilities/Helpers/FormatHelper';
+import FormatHelper, { DateFormatter } from '../Utilities/Helpers/DisplayFormatHelper';
 import { convertCSSAbsoluteFontSizeToPt, getVariableColor, sanitizeStyle, } from '../Utilities/Helpers/StyleHelper';
 import { waitForTimeout } from '../Utilities/waitForTimeout';
 export class AgGridExportAdapter {

package/src/agGrid/AgGridMenuAdapter.d.ts

@@ -9,7 +9,6 @@ export declare class AgGridMenuAdapter {
     private get adaptableApi();
     destroy(): void;
     buildColumnMenu(params: GetMainMenuItemsParams, originalGetMainMenuItems: GetMainMenuItems): (DefaultMenuItem | MenuItemDef)[];
-    private injectParameterizedAggregationColumnMenuItems;
     buildContextMenu(params: GetContextMenuItemsParams, originalGetContextMenuItems: GetContextMenuItems): (DefaultMenuItem | MenuItemDef)[];
     private mapAgGridItemTypeToAgGridMenuItem;
     private removeConsecutiveSeparators;

package/src/agGrid/AgGridMenuAdapter.js

@@ -2,8 +2,133 @@ import { isAdaptableElementIcon } from '../components/Icon';
 import { iconToString } from '../components/icons';
 import ArrayExtensions from '../Utilities/Extensions/ArrayExtensions';
 import { MENU_SEPARATOR } from '../Utilities/Constants/GeneralConstants';
-import { buildConsolidatedAggregationColumnMenuItem, findParameterizedAggMenuInsertIndex, isValueAggregationMenuItem, } from '../Aggregation/parameterizedAggregationColumnMenu';
-import { removeColumnAggregationFromLayout, upsertColumnAggregationInLayout, } from '../Aggregation/parameterizedAggregationHelpers';
+import { getAggFuncName, getDisplayAggFuncNames, isWeightedAverageAggregation, WEIGHTED_AVERAGE_AGG_FN_NAME, } from '../AdaptableState/Common/AggregationColumns';
+/**
+ * Creates an AG Grid icon element for the given icon name.
+ *
+ * Mimics AG Grid's internal icon creation, producing a
+ * `<span class="ag-icon ag-icon-{name}" role="presentation" unselectable="on">`
+ * so the icon picks up AG Grid's own icon font/theme styling.
+ *
+ * @see https://github.com/ag-grid/ag-grid/blob/5ca14e73188f6f52fd7d545d595c067bf1b72168/packages/ag-grid-community/src/utils/icon.ts#L139
+ */
+function createAgGridIcon(name) {
+    const element = document.createElement('span');
+    element.className = `ag-icon ag-icon-${name}`;
+    element.setAttribute('role', 'presentation');
+    element.setAttribute('unselectable', 'on');
+    return element;
+}
+const toFuncLabel = (funcName) => {
+    if (funcName === 'avg') {
+        return 'Average';
+    }
+    if (funcName === 'weightedAvg') {
+        return 'Weighted Average';
+    }
+    return funcName ? funcName.charAt(0).toUpperCase() + funcName.slice(1) : funcName;
+};
+/**
+ * Builds the replacement for AG Grid's built-in `valueAggSubMenu` column menu item.
+ *
+ * AG Grid does not allow customizing the built-in submenu, so we rebuild an
+ * equivalent one: the column's existing aggregation functions plus a
+ * `Weighted Average` item whose submenu lists the numeric columns that can be
+ * used as the weight parameter.
+ *
+ * Both standard and weighted selections persist through the current Layout
+ * (`updateCurrentLayout`), so the existing `weightedAvg` aggFunc can read the
+ * chosen `weightedColumnId` back from the Layout.
+ *
+ * Weighted Average is never used in Pivot Layouts, so this only deals with the
+ * Table Layout aggregations and the caller skips it entirely in Pivot mode.
+ */
+function buildValueAggregationMenuItem(adaptableApi, menuContext) {
+    const column = menuContext.adaptableColumn;
+    const columnId = column.columnId;
+    const currentLayout = adaptableApi.layoutApi.getCurrentLayout();
+    const aggregationColumns = currentLayout.TableAggregationColumns || [];
+    const currentAggFunc = aggregationColumns.find((agg) => agg.ColumnId === columnId)?.AggFunc;
+    let activeAggFuncName;
+    if (currentAggFunc != null) {
+        const aggFuncName = getAggFuncName(currentAggFunc);
+        activeAggFuncName = aggFuncName === true ? column.aggregationFunction : aggFuncName;
+    }
+    const activeWeightColumnId = isWeightedAverageAggregation(currentAggFunc)
+        ? currentAggFunc.weightedColumnId
+        : undefined;
+    const applyAggregation = (aggFuncValue) => {
+        const upsert = (cols) => {
+            const list = cols ? [...cols] : [];
+            const index = list.findIndex((col) => col.ColumnId === columnId);
+            if (index >= 0) {
+                list[index] = { ...list[index], AggFunc: aggFuncValue };
+            }
+            else {
+                list.push({ ColumnId: columnId, AggFunc: aggFuncValue });
+            }
+            return list;
+        };
+        adaptableApi.layoutApi.updateCurrentLayout((layout) => {
+            const tableLayout = layout;
+            return {
+                ...tableLayout,
+                TableAggregationColumns: upsert(tableLayout.TableAggregationColumns),
+            };
+        });
+    };
+    const removeAggregation = () => {
+        adaptableApi.layoutApi.updateCurrentLayout((layout) => {
+            const tableLayout = layout;
+            return {
+                ...tableLayout,
+                TableAggregationColumns: (tableLayout.TableAggregationColumns || []).filter((col) => col.ColumnId !== columnId),
+            };
+        });
+    };
+    // 'None' clears any aggregation for the column and is checked when none is set
+    const subMenu = [
+        {
+            name: 'None',
+            checked: activeAggFuncName == null,
+            action: () => removeAggregation(),
+        },
+    ];
+    // getDisplayAggFuncNames already positions weightedAvg right after 'avg'
+    // (and only includes it when the column is eligible)
+    const aggFuncItems = getDisplayAggFuncNames(column).map((funcName) => {
+        // Weighted Average needs a weight column parameter, so instead of a plain
+        // action it gets a submenu listing the numeric columns usable as the weight.
+        if (funcName === WEIGHTED_AVERAGE_AGG_FN_NAME) {
+            const weightColumnItems = adaptableApi.columnApi
+                .getNumericColumns()
+                .filter((numericColumn) => numericColumn.columnId !== columnId)
+                .map((numericColumn) => ({
+                name: numericColumn.friendlyName ?? numericColumn.columnId,
+                checked: activeWeightColumnId === numericColumn.columnId,
+                action: () => applyAggregation({
+                    type: 'weightedAverage',
+                    weightedColumnId: numericColumn.columnId,
+                }),
+            }));
+            return {
+                name: 'Weighted Average',
+                checked: activeAggFuncName === WEIGHTED_AVERAGE_AGG_FN_NAME,
+                subMenu: weightColumnItems,
+            };
+        }
+        return {
+            name: toFuncLabel(funcName),
+            checked: activeAggFuncName === funcName,
+            action: () => applyAggregation(funcName),
+        };
+    });
+    subMenu.push(...aggFuncItems);
+    return {
+        name: 'Value Aggregation',
+        subMenu,
+    };
+}
 export class AgGridMenuAdapter {
     _adaptableInstance;
     constructor(_adaptableInstance) {
@@ -55,42 +180,25 @@ export class AgGridMenuAdapter {
                 .filter(Boolean);
         }
         // 2. if not, return the default context menu
-        let defaultContextMenu = [
-            ...agGridMenuItems,
+        // AG Grid does not allow customizing the built-in `valueAggSubMenu`, so we
+        // replace it with an Adaptable-built equivalent that also offers a Weighted
+        // Average aggregation (with a submenu to pick the weight column).
+        // Weighted Average is never used in Pivot Layouts, so we leave the AG Grid
+        // default item untouched there.
+        const isPivotLayout = this.adaptableApi.layoutApi.isCurrentLayoutPivot();
+        const mappedAgGridMenuItems = agGridMenuItems.map((itemName) => itemName === 'valueAggSubMenu' && !isPivotLayout
+            ? {
+                ...buildValueAggregationMenuItem(this.adaptableApi, menuContext),
+                icon: createAgGridIcon('aggregation'),
+            }
+            : itemName);
+        const defaultContextMenu = [
+            ...mappedAgGridMenuItems,
             'separator',
             ...defaultColumnMenuStructure.map((adaptableItem) => this.mapAdaptableMenuItemToAgGridMenuDefinition(adaptableItem)),
         ];
-        defaultContextMenu = this.injectParameterizedAggregationColumnMenuItems(defaultContextMenu, adaptableColumn);
         return this.removeConsecutiveSeparators(defaultContextMenu);
     }
-    injectParameterizedAggregationColumnMenuItems(menuItems, column) {
-        const consolidatedAggregationMenuItem = buildConsolidatedAggregationColumnMenuItem(this.adaptableApi, column, (columnId, parameterizedAgg) => {
-            this.adaptableApi.layoutApi.setColumnParameterizedAggregation(columnId, parameterizedAgg);
-        }, (columnId, aggFunc) => {
-            this.adaptableApi.layoutApi.updateCurrentLayout((layout) => {
-                if (aggFunc == null) {
-                    removeColumnAggregationFromLayout(layout, columnId);
-                }
-                else {
-                    upsertColumnAggregationInLayout(layout, columnId, aggFunc);
-                }
-                return layout;
-            });
-            this.adaptableApi.agGridApi.setColumnAggFunc(columnId, aggFunc);
-        });
-        if (!consolidatedAggregationMenuItem) {
-            return menuItems;
-        }
-        consolidatedAggregationMenuItem.icon = this.mapAdaptableIconToAgGridIcon({ name: 'equation' });
-        const originalValueAggMenuIndex = menuItems.findIndex((item) => isValueAggregationMenuItem(item));
-        const menuItemsWithoutValueAgg = menuItems.filter((item) => !isValueAggregationMenuItem(item));
-        const result = [...menuItemsWithoutValueAgg];
-        const insertIndex = originalValueAggMenuIndex !== -1
-            ? Math.min(originalValueAggMenuIndex, result.length)
-            : findParameterizedAggMenuInsertIndex(menuItemsWithoutValueAgg);
-        result.splice(insertIndex, 0, consolidatedAggregationMenuItem);
-        return result;
-    }
     buildContextMenu(params, originalGetContextMenuItems) {
         if (!params.column) {
             return [];
@@ -269,7 +377,7 @@ export class AgGridMenuAdapter {
                     ? () => this.adaptableApi.internalApi.dispatchReduxAction(fullMenuItem.reduxAction)
                     : undefined,
             icon: this.mapAdaptableIconToAgGridIcon(fullMenuItem.icon, {
-                fill: 'var(--ab-color-text-on-primary)',
+                fill: 'var(--ab-color-primary-foreground)',
             }),
             subMenu: fullMenuItem.subItems?.map((subMenuItem) => this.mapAdaptableMenuItemToAgGridMenuDefinition(subMenuItem)),
         };
@@ -282,7 +390,7 @@ export class AgGridMenuAdapter {
             return {
                 name: customMenuItem.label,
                 icon: this.mapAdaptableIconToAgGridIcon(customMenuItem.icon, {
-                    fill: 'var(--ab-color-text-on-primary)',
+                    fill: 'var(--ab-color-primary-foreground)',
                 }),
                 disabled: customMenuItem.disabled,
                 subMenu: !customMenuItem.disabled
@@ -310,7 +418,7 @@ export class AgGridMenuAdapter {
             name: userMenuItem.label,
             action: () => (userMenuItem.onClick ? userMenuItem.onClick(menuContext) : null),
             icon: this.mapAdaptableIconToAgGridIcon(userMenuItem.icon, {
-                fill: 'var(--ab-color-text-on-primary)',
+                fill: 'var(--ab-color-primary-foreground)',
             }),
             disabled: userMenuItem.disabled,
             subMenu: userMenuItem.subMenuItems
@@ -735,7 +843,7 @@ export class AgGridMenuAdapter {
         }
         else {
             return iconToString(icon, {
-                fill: 'var(--ab-color-text-on-primary)',
+                fill: 'var(--ab-color-primary-foreground)',
             });
         }
     }

package/src/agGrid/cellRenderers/ActionColumnRenderer.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
-import DropdownButton from '../../components/DropdownButton';
+import { NewDropdownButton } from '../../components/DropdownButton';
 import * as React from 'react';
 import { IconComponent } from '../../components/Icon';
 import { ADAPTABLE_BUTTON_SURFACE_DEFAULTS, AdaptableButtonView, } from '../../View/Components/AdaptableButton';
@@ -13,10 +13,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,
@@ -52,7 +49,7 @@ const ActionColumnDropdown = (props) => {
         });
         return {
             label: buttonLabel || buttonTooltip,
-            icon: menuIcon ? (_jsx(IconComponent, { icon: menuIcon })) : undefined,
+            icon: menuIcon ? _jsx(IconComponent, { icon: menuIcon }) : undefined,
             disabled,
             onClick: () => {
                 actionButton.onClick?.(actionButton, context);
@@ -64,7 +61,7 @@ const ActionColumnDropdown = (props) => {
     if (!items.length) {
         return null;
     }
-    return (_jsx(DropdownButton, { "data-name": "action-column-dropdown", variant: "outlined", tone: "neutral", items: items, collapseOnItemClick: true, listMinWidth: 140, showToggleIcon: true, accessLevel: ACCESS_LEVEL_FULL, children: dropdownLabel }));
+    return (_jsx(NewDropdownButton, { "data-name": "action-column-dropdown", variant: "outlined", tone: "neutral", items: items, accessLevel: ACCESS_LEVEL_FULL, children: dropdownLabel }));
 };
 const ActionColumnCellContent = (props) => {
     const { buttons, actionColumn, adaptableApi, context, rerender } = props;

package/src/agGrid/cellRenderers/BadgeRenderer.js

@@ -1,7 +1,7 @@
 import { Badge } from '../../View/Components/Badge';
 import { renderWithAdaptableContext } from '../../View/renderWithAdaptableContext';
 import * as React from 'react';
-import { shouldRenderStyledColumnOnRow } from './shouldRenderStyledColumnOnRow';
+import { shouldRenderStyledColumnOnRow } from '../../Utilities/Helpers/StyledColumns/StyledColumnHelper';
 const OVERFLOW_CLASS = {
     Truncate: 'ab-Badge__wrapper--truncate',
     Wrap: 'ab-Badge__wrapper--wrap',
@@ -83,7 +83,9 @@ export 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 };
@@ -113,7 +115,7 @@ export const getBadgeRendererForColumn = (styledColumn, abColumn, api) => {
                 this.eGui.innerHTML = formattedValue;
                 return;
             }
-            if (badge.IconOnly) {
+            if (badge.IconProperties?.IconOnly) {
                 formattedValue = '';
             }
             this.renderBadges([
@@ -137,11 +139,11 @@ export 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

@@ -1,6 +1,7 @@
 import Helper from '../../Utilities/Helpers/Helper';
-import clamp from '../../Utilities/utils/clamp';
-import { shouldRenderStyledColumnOnRow } from './shouldRenderStyledColumnOnRow';
+import { clamp } from '../../Utilities/Extensions/NumberExtensions';
+import { buildBarStyleCellTextLabels, hasBarStyleCellTextConfigured, mountBarStyleCellText, } from '../../Utilities/Helpers/StyledColumns/BarStylesHelper';
+import { shouldRenderStyledColumnOnRow } from '../../Utilities/Helpers/StyledColumns/StyledColumnHelper';
 const SVG_NS = 'http://www.w3.org/2000/svg';
 const DEFAULT_BAR_HEIGHT = 8;
 const DEFAULT_BAND_HEIGHT = 14;
@@ -52,19 +53,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,
@@ -152,10 +152,10 @@ export 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 = hasBarStyleCellTextConfigured(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
@@ -172,7 +172,7 @@ export 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.
@@ -243,7 +243,7 @@ export 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
@@ -255,39 +255,40 @@ export 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 = buildBarStyleCellTextLabels(cellTextProperties, formattedCellValue, `${(valueFraction * 100).toFixed(0)}%`);
+                mountBarStyleCellText({
+                    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';
 /**
@@ -18,6 +19,12 @@ import { AdaptableColumn } from '../../AdaptableState/Common/AdaptableColumn';
  * is configured for case-insensitive matching.
  */
 export declare const resolveEffectiveIconStyleMappings: (iconStyle: IconStyle | undefined) => IconStyleMapping[];
+/**
+ * Mapping list for wizard / settings summaries: custom mappings first so
+ * user-authored entries are always visible, then any remaining preset
+ * entries (after override filtering).
+ */
+export declare const resolveIconStyleMappingsForSummaryPreview: (iconStyle: IconStyle | undefined) => IconStyleMapping[];
 export declare const getIconRendererForColumn: (styledColumn: StyledColumn, abColumn: AdaptableColumn, api: AdaptableApi) => any;
 /** Helper exposed for the tooltip getter in `AgGridColumnAdapter`. */
 export declare const findIconStyleMappingForValue: (iconStyle: IconStyle | undefined, cellValue: any) => IconStyleMapping | undefined;

package/src/agGrid/cellRenderers/IconRenderer.js

@@ -2,12 +2,30 @@ import * as React from 'react';
 import { IconComponent, isAdaptableSystemIcon, isAdaptableCustomIcon, isAdaptableElementIcon, } from '../../components/Icon';
 import { renderWithAdaptableContext } from '../../View/renderWithAdaptableContext';
 import Helper from '../../Utilities/Helpers/Helper';
-import { getIconStylePresetMappings } from '../../Utilities/Helpers/IconStylePresets';
-import { shouldRenderStyledColumnOnRow } from './shouldRenderStyledColumnOnRow';
-import { isUnsupportedColumnDataTypeForIconStyle } from '../../Utilities/Helpers/iconStyledColumnColumnSupport';
+import { getIconStylePresetMappings, isUnsupportedColumnDataTypeForIconStyle, } from '../../Utilities/Helpers/StyledColumns/IconStyleHelper';
+import { shouldRenderStyledColumnOnRow } from '../../Utilities/Helpers/StyledColumns/StyledColumnHelper';
 import { errorOnce } from '../AdaptableLogger';
 const DEFAULT_SIZE = 18;
 const DEFAULT_GAP = 4;
+const normaliseIconMappingKey = (key, matchMode) => {
+    if (typeof key === 'string' && matchMode === 'CaseInsensitive') {
+        return key.toLowerCase();
+    }
+    return key;
+};
+const resolveIconStyleMappingParts = (iconStyle) => {
+    const presetMappings = iconStyle.Preset
+        ? getIconStylePresetMappings(iconStyle.Preset)
+        : [];
+    const userMappings = iconStyle.Mappings ?? [];
+    if (presetMappings.length === 0 || userMappings.length === 0) {
+        return { presetMappings, userMappings };
+    }
+    const matchMode = iconStyle.MatchMode ?? 'Exact';
+    const overrideKeys = new Set(userMappings.map((m) => normaliseIconMappingKey(m.Key, matchMode)));
+    const filteredPreset = presetMappings.filter((p) => !overrideKeys.has(normaliseIconMappingKey(p.Key, matchMode)));
+    return { presetMappings: filteredPreset, userMappings };
+};
 /**
  * Resolve the **effective** mapping list for an `IconStyle`:
  *
@@ -27,24 +45,33 @@ const DEFAULT_GAP = 4;
 export const resolveEffectiveIconStyleMappings = (iconStyle) => {
     if (!iconStyle)
         return [];
-    const presetMappings = iconStyle.Preset
-        ? getIconStylePresetMappings(iconStyle.Preset)
-        : [];
-    const userMappings = iconStyle.Mappings ?? [];
+    const { presetMappings, userMappings } = resolveIconStyleMappingParts(iconStyle);
     if (presetMappings.length === 0)
         return userMappings;
-    if (userMappings.length === 0)
-        return presetMappings;
-    const matchMode = iconStyle.MatchMode ?? 'Exact';
-    const normaliseKey = (k) => {
-        if (typeof k === 'string' && matchMode === 'CaseInsensitive') {
-            return k.toLowerCase();
+    if (userMappings.length === 0) {
+        return iconStyle.Preset ? getIconStylePresetMappings(iconStyle.Preset) : [];
+    }
+    return [...presetMappings, ...userMappings];
+};
+/**
+ * Mapping list for wizard / settings summaries: custom mappings first so
+ * user-authored entries are always visible, then any remaining preset
+ * entries (after override filtering).
+ */
+export const resolveIconStyleMappingsForSummaryPreview = (iconStyle) => {
+    if (!iconStyle)
+        return [];
+    const { presetMappings, userMappings } = resolveIconStyleMappingParts(iconStyle);
+    if (userMappings.length === 0) {
+        if (presetMappings.length > 0) {
+            return presetMappings;
         }
-        return k;
-    };
-    const overrideKeys = new Set(userMappings.map((m) => normaliseKey(m.Key)));
-    const filteredPreset = presetMappings.filter((p) => !overrideKeys.has(normaliseKey(p.Key)));
-    return [...filteredPreset, ...userMappings];
+        return iconStyle.Preset ? getIconStylePresetMappings(iconStyle.Preset) : [];
+    }
+    if (presetMappings.length === 0) {
+        return userMappings;
+    }
+    return [...userMappings, ...presetMappings];
 };
 /**
  * Look up `cellValue` in the mapping list using the configured match mode.
@@ -165,7 +192,9 @@ export 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).
@@ -202,16 +231,15 @@ export 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);
@@ -222,17 +250,18 @@ export 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) {