@adaptabletools/adaptable-cjs 22.1.1 → 23.0.0-canary.0

package/src/agGrid/AgGridMenuAdapter.js

@@ -6,6 +6,8 @@ const Icon_1 = require("../components/Icon");
 const icons_1 = require("../components/icons");
 const ArrayExtensions_1 = tslib_1.__importDefault(require("../Utilities/Extensions/ArrayExtensions"));
 const GeneralConstants_1 = require("../Utilities/Constants/GeneralConstants");
+const parameterizedAggregationColumnMenu_1 = require("../Aggregation/parameterizedAggregationColumnMenu");
+const parameterizedAggregationHelpers_1 = require("../Aggregation/parameterizedAggregationHelpers");
 class AgGridMenuAdapter {
     _adaptableInstance;
     constructor(_adaptableInstance) {
@@ -57,13 +59,42 @@ class AgGridMenuAdapter {
                 .filter(Boolean);
         }
         // 2. if not, return the default context menu
-        const defaultContextMenu = [
+        let defaultContextMenu = [
             ...agGridMenuItems,
             'separator',
             ...defaultColumnMenuStructure.map((adaptableItem) => this.mapAdaptableMenuItemToAgGridMenuDefinition(adaptableItem)),
         ];
+        defaultContextMenu = this.injectParameterizedAggregationColumnMenuItems(defaultContextMenu, adaptableColumn);
         return this.removeConsecutiveSeparators(defaultContextMenu);
     }
+    injectParameterizedAggregationColumnMenuItems(menuItems, column) {
+        const consolidatedAggregationMenuItem = (0, parameterizedAggregationColumnMenu_1.buildConsolidatedAggregationColumnMenuItem)(this.adaptableApi, column, (columnId, parameterizedAgg) => {
+            this.adaptableApi.layoutApi.setColumnParameterizedAggregation(columnId, parameterizedAgg);
+        }, (columnId, aggFunc) => {
+            this.adaptableApi.layoutApi.updateCurrentLayout((layout) => {
+                if (aggFunc == null) {
+                    (0, parameterizedAggregationHelpers_1.removeColumnAggregationFromLayout)(layout, columnId);
+                }
+                else {
+                    (0, parameterizedAggregationHelpers_1.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) => (0, parameterizedAggregationColumnMenu_1.isValueAggregationMenuItem)(item));
+        const menuItemsWithoutValueAgg = menuItems.filter((item) => !(0, parameterizedAggregationColumnMenu_1.isValueAggregationMenuItem)(item));
+        const result = [...menuItemsWithoutValueAgg];
+        const insertIndex = originalValueAggMenuIndex !== -1
+            ? Math.min(originalValueAggMenuIndex, result.length)
+            : (0, parameterizedAggregationColumnMenu_1.findParameterizedAggMenuInsertIndex)(menuItemsWithoutValueAgg);
+        result.splice(insertIndex, 0, consolidatedAggregationMenuItem);
+        return result;
+    }
     buildContextMenu(params, originalGetContextMenuItems) {
         if (!params.column) {
             return [];
@@ -279,7 +310,7 @@ class AgGridMenuAdapter {
         if (userMenuItem.hidden) {
             return;
         }
-        return {
+        const menuItemDef = {
             name: userMenuItem.label,
             action: () => (userMenuItem.onClick ? userMenuItem.onClick(menuContext) : null),
             icon: this.mapAdaptableIconToAgGridIcon(userMenuItem.icon, {
@@ -292,6 +323,52 @@ class AgGridMenuAdapter {
             })
                 .filter(Boolean),
         };
+        // If a framework component is supplied, attach it so AG Grid renders the
+        // menu row content via its own framework adapter. React, Vue and Angular
+        // variants are supported; for other variants we silently fall back to
+        // the default name/icon/action rendering.
+        if (userMenuItem.frameworkComponent) {
+            const variant = this.adaptableApi.gridApi.getVariant();
+            let menuItemComponent;
+            if (variant === 'react') {
+                // React function components are passed through as-is; AG Grid's
+                // React adapter will instantiate them with `CustomMenuItemProps`.
+                menuItemComponent = userMenuItem.frameworkComponent;
+            }
+            else if (variant === 'vue') {
+                // Vue framework components are factories of shape
+                // `({ adaptableApi }) => Component`; invoke once to obtain the
+                // component options object that AG Grid Vue's adapter expects.
+                try {
+                    menuItemComponent = userMenuItem.frameworkComponent({
+                        adaptableApi: this.adaptableApi,
+                    });
+                }
+                catch (err) {
+                    this._adaptableInstance.logger.consoleWarn(`Could not resolve Vue framework component for menu item "${userMenuItem.label}"`, err);
+                    menuItemComponent = undefined;
+                }
+            }
+            else if (variant === 'angular') {
+                // Angular framework components have shape `{ type: ComponentClass }`;
+                // hand the class to AG Grid Angular which uses its own
+                // `viewContainerRef.createComponent` to instantiate it. The optional
+                // `onSetup` field is intentionally NOT honoured here because AG Grid
+                // owns the lifecycle - menu-item Angular components should consume
+                // `menuItemParams` (or AG Grid's `agInit`) to receive `adaptableApi`.
+                const angularComponent = userMenuItem.frameworkComponent;
+                menuItemComponent = angularComponent.type;
+            }
+            if (menuItemComponent) {
+                menuItemDef.menuItem = menuItemComponent;
+                menuItemDef.menuItemParams = {
+                    adaptableApi: this.adaptableApi,
+                    menuContext,
+                    ...(userMenuItem.menuItemParams ?? {}),
+                };
+            }
+        }
+        return menuItemDef;
     }
     buildContextMenuDefaultStructure(availableMenuItems, menuContext) {
         // Alert
@@ -303,7 +380,7 @@ class AgGridMenuAdapter {
         // CellSummary
         const cellSummaryMenuItems = this.getModuleSpecificStructure('CellSummary', availableMenuItems);
         // ColumnFilter
-        const columnFilterMenuItems = this.getModuleSpecificStructure('ColumnFilter', availableMenuItems);
+        const columnFilterMenuItems = this.getModuleSpecificStructure('ColumnFilter', availableMenuItems, 'column-filter-group');
         // ColumnInfo
         const columnInfoMenuItems = this.getModuleSpecificStructure('ColumnInfo', availableMenuItems);
         // Comment
@@ -313,7 +390,7 @@ class AgGridMenuAdapter {
         // DataImport
         const dataImportMenuItems = this.getModuleSpecificStructure('DataImport', availableMenuItems);
         // Export
-        const exportMenuItems = this.getModuleSpecificStructure('Export', availableMenuItems);
+        const exportMenuItems = this.getModuleSpecificStructure('Export', availableMenuItems, 'export-group');
         // FDC3
         const fdc3MenuItems = this.getModuleSpecificStructure('Fdc3', availableMenuItems);
         // FlashingCell
@@ -461,6 +538,7 @@ class AgGridMenuAdapter {
         const gridInfoMenuItems = this.getModuleSpecificStructure('GridInfo', availableMenuItems);
         // Layout
         const [gridSelectItems, columnSelectItems, columnActionGroup, otherLayoutItems] = this.getLayoutColumnMenuStructure(availableMenuItems);
+        const selectionMenuItems = this.buildSelectColumnMenuGroup(gridSelectItems, columnSelectItems);
         // PlusMinus
         const plusMinusMenuItems = this.getModuleSpecificStructure('PlusMinus', availableMenuItems);
         // SettingsPanel
@@ -483,7 +561,7 @@ class AgGridMenuAdapter {
             subItems: [
                 ...otherLayoutItems,
                 ...filterVisibilityItems,
-                ...gridSelectItems,
+                ...selectionMenuItems,
                 ...cellSummaryMenuItems,
                 ...chartMenuItems,
                 ...dataImportMenuItems,
@@ -518,7 +596,6 @@ class AgGridMenuAdapter {
                 ...freeTextColumnMenuItems,
                 ...customSortMenuItems,
                 ...plusMinusMenuItems,
-                ...columnSelectItems,
                 ...columnInfoMenuItems,
             ],
         };
@@ -580,6 +657,43 @@ class AgGridMenuAdapter {
             item.name !== 'layout-grid-select');
         return [gridSelectItems, columnSelectItems, columnActionGroup, otherLayoutItems];
     }
+    buildSelectColumnMenuGroup(gridSelectItems, columnSelectItems) {
+        const childGroups = [];
+        if (gridSelectItems.length) {
+            const gridGroup = {
+                name: 'select-grid-group',
+                label: 'Grid',
+                category: 'Group',
+                isVisible: true,
+                subItems: gridSelectItems,
+            };
+            childGroups.push(...this.normalizeMenuGroup(gridGroup));
+        }
+        if (columnSelectItems.length) {
+            const columnGroup = {
+                name: 'select-column-group',
+                label: 'Column',
+                category: 'Group',
+                isVisible: true,
+                subItems: columnSelectItems,
+            };
+            childGroups.push(...this.normalizeMenuGroup(columnGroup));
+        }
+        if (!childGroups.length) {
+            return [];
+        }
+        const selectGroup = {
+            name: 'select-group',
+            label: 'Select',
+            category: 'Group',
+            isVisible: true,
+            icon: {
+                name: 'select-all',
+            },
+            subItems: childGroups,
+        };
+        return this.normalizeMenuGroup(selectGroup);
+    }
     getStyledColumnColumnMenuStructure(menuItems) {
         const styledColumnMenuItems = menuItems.filter((menuItem) => menuItem.category === 'StyledColumn');
         return styledColumnMenuItems;

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

@@ -9,6 +9,7 @@ export declare class ActionColumnRenderer implements ICellRendererComp {
     private unmountReactRoot?;
     private layoutSwitchUnsubscribe?;
     private actionButtons;
+    private actionColumn;
     init(params: ActionColumnCellRendererParams): void;
     render(): void;
     getGui(): HTMLElement;

package/src/agGrid/cellRenderers/ActionColumnRenderer.js

@@ -2,42 +2,97 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.ActionColumnRenderer = exports.ReactActionColumnRenderer = void 0;
 const tslib_1 = require("tslib");
-const SimpleButton_1 = tslib_1.__importDefault(require("../../components/SimpleButton"));
+const jsx_runtime_1 = require("react/jsx-runtime");
+const DropdownButton_1 = tslib_1.__importDefault(require("../../components/DropdownButton"));
 const React = tslib_1.__importStar(require("react"));
+const Icon_1 = require("../../components/Icon");
+const AdaptableButton_1 = require("../../View/Components/AdaptableButton");
 const useRerender_1 = require("../../components/utils/useRerender");
 const renderWithAdaptableContext_1 = require("../../View/renderWithAdaptableContext");
 const LayoutRedux_1 = require("../../Redux/ActionsReducers/LayoutRedux");
 const GeneralConstants_1 = require("../../Utilities/Constants/GeneralConstants");
+function getActionColumnButtonProps(button, index, adaptableApi, context, rerender) {
+    if (button.hidden?.(button, context)) {
+        return null;
+    }
+    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}`;
+    return {
+        button,
+        buttonLabel,
+        buttonTooltip,
+        identifier,
+    };
+}
 const ActionButtons = (props) => {
     const { buttons, adaptableApi, context, rerender } = props;
-    return (React.createElement(React.Fragment, null, buttons.map((button, index) => {
-        if (button.hidden && button.hidden(button, context)) {
-            return;
+    return ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: buttons.map((button, index) => {
+            const buttonProps = getActionColumnButtonProps(button, index, adaptableApi, context, rerender);
+            if (!buttonProps) {
+                return null;
+            }
+            const { button: actionButton, identifier } = buttonProps;
+            return ((0, jsx_runtime_1.jsx)(AdaptableButton_1.AdaptableButtonView, { button: actionButton, context: context, api: adaptableApi, defaults: AdaptableButton_1.ADAPTABLE_BUTTON_SURFACE_DEFAULTS.actionColumn, iconSize: { height: 15, width: 15 }, "data-name": `action-button-${identifier}`, className: adaptableApi.internalApi.getStyleForButton(actionButton, context)?.className, onAfterClick: rerender }, actionButton.Uuid));
+        }) }));
+};
+const ActionColumnDropdown = (props) => {
+    const { buttons, adaptableApi, context, settings, rerender } = props;
+    const dropdownLabel = settings.dropdownLabel ?? 'Actions';
+    const items = buttons
+        .map((button, index) => {
+        const buttonProps = getActionColumnButtonProps(button, index, adaptableApi, context, rerender);
+        if (!buttonProps) {
+            return null;
         }
-        const buttonIcon = adaptableApi.internalApi.getIconForButton(button, context, {
+        const { button: actionButton, buttonLabel, buttonTooltip } = buttonProps;
+        const disabled = Boolean(actionButton.disabled?.(actionButton, context));
+        const menuIcon = adaptableApi.internalApi.getIconForButton(actionButton, context, {
             height: 15,
             width: 15,
         });
-        const buttonStyle = adaptableApi.internalApi.getStyleForButton(button, context);
-        const buttonLabel = adaptableApi.internalApi.getLabelForButton(button, context);
-        const buttonTooltip = adaptableApi.internalApi.getTooltipForButton(button, context);
-        const handleClick = () => {
-            button.onClick?.(button, context);
-            // Timeout to let any updates to be done before re-rendering the component
-            setTimeout(() => {
-                // when called again it triggers a re-render
-                // https:reactjs.org/docs/react-dom.html#render
-                rerender();
-            }, 16);
+        return {
+            label: buttonLabel || buttonTooltip,
+            icon: menuIcon ? ((0, jsx_runtime_1.jsx)(Icon_1.IconComponent, { icon: menuIcon })) : undefined,
+            disabled,
+            onClick: () => {
+                actionButton.onClick?.(actionButton, context);
+                setTimeout(() => rerender(), 16);
+            },
         };
-        const disabled = button.disabled && button.disabled(button, context);
-        const identifier = button.label ??
-            button.icon?.name ??
-            button.tooltip ??
-            `${index + 1}`;
-        return (React.createElement(SimpleButton_1.default, { key: button.Uuid, "data-name": `action-button-${identifier}`, variant: buttonStyle?.variant ?? 'text', disabled: disabled, tooltip: buttonTooltip, icon: buttonIcon, tone: buttonStyle?.tone ?? 'none', onClick: handleClick, className: buttonStyle?.className, accessLevel: GeneralConstants_1.ACCESS_LEVEL_FULL }, buttonLabel));
-    })));
+    })
+        .filter((item) => item != null);
+    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 }));
 };
+const ActionColumnCellContent = (props) => {
+    const { buttons, actionColumn, adaptableApi, context, rerender } = props;
+    const settings = actionColumn.actionColumnSettings ?? {};
+    if (settings.displayMode === 'dropdown') {
+        return ((0, jsx_runtime_1.jsx)(ActionColumnDropdown, { buttons: buttons, adaptableApi: adaptableApi, context: context, settings: settings, rerender: rerender }));
+    }
+    return ((0, jsx_runtime_1.jsx)(ActionButtons, { buttons: buttons, adaptableApi: adaptableApi, context: context, rerender: rerender }));
+};
+function shouldRenderActionColumnForRow(actionColumn, adaptableApi, node) {
+    const isGroupedRow = adaptableApi.gridApi.isGroupRowNode(node);
+    const isSummaryRow = adaptableApi.gridApi.isSummaryNode(node);
+    const isGrandTotalRowNode = adaptableApi.gridApi.isGrandTotalRowNode(node);
+    if (isGrandTotalRowNode) {
+        return !actionColumn.rowScope?.ExcludeTotalRows;
+    }
+    if (isGroupedRow) {
+        return !actionColumn.rowScope?.ExcludeGroupRows;
+    }
+    if (isSummaryRow) {
+        return !actionColumn.rowScope?.ExcludeSummaryRows;
+    }
+    return !actionColumn.rowScope?.ExcludeDataRows;
+}
 const ReactActionColumnRenderer = (props) => {
     const rerender = (0, useRerender_1.useRerender)();
     const adaptable = props.context.__adaptable;
@@ -49,34 +104,9 @@ const ReactActionColumnRenderer = (props) => {
     if (!actionColumn || !actionButtons.length) {
         return null;
     }
-    const isGroupedRow = adaptable.api.gridApi.isGroupRowNode(props.node);
-    const isSummaryRow = adaptable.api.gridApi.isSummaryNode(props.node);
-    const isGrandTotalRowNode = adaptable.api.gridApi.isGrandTotalRowNode(props.node);
-    let shouldRender = true;
-    if (isGrandTotalRowNode) {
-        if (actionColumn.rowScope?.ExcludeTotalRows) {
-            shouldRender = false;
-        }
-    }
-    else if (isGroupedRow) {
-        if (actionColumn.rowScope?.ExcludeGroupRows) {
-            shouldRender = false;
-        }
-    }
-    else if (isSummaryRow) {
-        if (actionColumn.rowScope?.ExcludeSummaryRows) {
-            shouldRender = false;
-        }
-    }
-    else {
-        if (actionColumn.rowScope?.ExcludeDataRows) {
-            shouldRender = false;
-        }
-    }
-    if (!shouldRender) {
+    if (!shouldRenderActionColumnForRow(actionColumn, adaptable.api, props.node)) {
         return null;
     }
-    // subscribe to the LayoutChange event and rerender on change
     const unsubscribe = adaptable.api.eventApi.on('AdaptableStateChanged', (eventInfo) => {
         if (eventInfo.actionName === LayoutRedux_1.LAYOUT_SELECT) {
             if (eventInfo.oldState.Layout.CurrentLayout !== eventInfo.newState.Layout.CurrentLayout) {
@@ -84,7 +114,6 @@ const ReactActionColumnRenderer = (props) => {
             }
         }
     });
-    // unsubscribe on unmount
     React.useEffect(() => {
         return () => {
             unsubscribe();
@@ -98,8 +127,7 @@ const ReactActionColumnRenderer = (props) => {
         ...adaptable.api.internalApi.buildBaseContext(),
         data: props.data,
     };
-    return (React.createElement("div", { className: "ab-ActionColumn" },
-        React.createElement(ActionButtons, { buttons: actionButtons, adaptableApi: adaptable.api, context: buttonContext, rerender: rerender })));
+    return ((0, jsx_runtime_1.jsx)("div", { className: "ab-ActionColumn", children: (0, jsx_runtime_1.jsx)(ActionColumnCellContent, { buttons: actionButtons, actionColumn: actionColumn, adaptableApi: adaptable.api, context: buttonContext, rerender: rerender }) }));
 };
 exports.ReactActionColumnRenderer = ReactActionColumnRenderer;
 class ActionColumnRenderer {
@@ -108,7 +136,7 @@ class ActionColumnRenderer {
     unmountReactRoot;
     layoutSwitchUnsubscribe;
     actionButtons;
-    // gets called once before the renderer is used
+    actionColumn;
     init(params) {
         const adaptable = params.context.__adaptable;
         if (!adaptable) {
@@ -120,34 +148,10 @@ class ActionColumnRenderer {
             return;
         }
         this.actionButtons = actionButtons;
-        // create the cell
+        this.actionColumn = actionColumn;
         this.eGui = document.createElement('div');
         this.eGui.className = 'ab-ActionColumn';
-        const isGroupedRow = adaptable.api.gridApi.isGroupRowNode(params.node);
-        const isSummaryRow = adaptable.api.gridApi.isSummaryNode(params.node);
-        const isGrandTotalRowNode = adaptable.api.gridApi.isGrandTotalRowNode(params.node);
-        let shouldRender = true;
-        if (isGrandTotalRowNode) {
-            if (actionColumn.rowScope?.ExcludeTotalRows) {
-                shouldRender = false;
-            }
-        }
-        else if (isGroupedRow) {
-            if (actionColumn.rowScope?.ExcludeGroupRows) {
-                shouldRender = false;
-            }
-        }
-        else if (isSummaryRow) {
-            if (actionColumn.rowScope?.ExcludeSummaryRows) {
-                shouldRender = false;
-            }
-        }
-        else {
-            if (actionColumn.rowScope?.ExcludeDataRows) {
-                shouldRender = false;
-            }
-        }
-        if (!shouldRender) {
+        if (!shouldRenderActionColumnForRow(actionColumn, adaptable.api, params.node)) {
             this.eGui.innerHTML = '';
             return;
         }
@@ -161,8 +165,9 @@ class ActionColumnRenderer {
         };
         const eGui = this.eGui;
         const doRender = () => {
-            this.unmountReactRoot = adaptable.renderReactRoot((0, renderWithAdaptableContext_1.renderWithAdaptableContext)(ActionButtons({
+            this.unmountReactRoot = adaptable.renderReactRoot((0, renderWithAdaptableContext_1.renderWithAdaptableContext)(ActionColumnCellContent({
                 buttons: this.actionButtons,
+                actionColumn: this.actionColumn,
                 context: buttonContext,
                 rerender: doRender,
                 adaptableApi: adaptable.api,
@@ -172,32 +177,26 @@ class ActionColumnRenderer {
         this.layoutSwitchUnsubscribe = adaptable.api.eventApi.on('AdaptableStateChanged', (eventInfo) => {
             if (eventInfo.actionName === LayoutRedux_1.LAYOUT_SELECT) {
                 if (eventInfo.oldState.Layout.CurrentLayout !== eventInfo.newState.Layout.CurrentLayout) {
-                    const { actionButtons: freshActionButtons } = adaptable.api.actionColumnApi.internalApi.getActionColumnsAndButtons(params.colDef);
+                    const { actionButtons: freshActionButtons, actionColumn: freshActionColumn } = adaptable.api.actionColumnApi.internalApi.getActionColumnsAndButtons(params.colDef);
                     this.actionButtons = freshActionButtons;
+                    this.actionColumn = freshActionColumn;
                     doRender();
                 }
             }
         });
         doRender();
     }
-    // defined on init
-    // used to re-render in refresh
     render() { }
-    // gets called once when grid ready to insert the element
     getGui() {
         return this.eGui;
     }
-    // gets called whenever the user gets the cell to refresh
     refresh(params) {
-        // return true to tell the grid we refreshed successfully
         this.render();
         return true;
     }
-    // gets called when the cell is removed from the grid
     destroy() {
         this.layoutSwitchUnsubscribe?.();
         this.unmountReactRoot?.();
-        // do cleanup, remove event listener from button
         if (this.eGui) {
             this.eGui.removeEventListener('click', this.eventListener);
         }

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

@@ -1,4 +1,4 @@
-import { BadgeStyle } from '../../AdaptableState/StyledColumnState';
+import { StyledColumn } from '../../AdaptableState/StyledColumnState';
 import { AdaptableApi } from '../../Api/AdaptableApi';
 import { AdaptableColumn } from '../../AdaptableState/Common/AdaptableColumn';
-export declare const getBadgeRendererForColumn: (badgeStyle: BadgeStyle, abColumn: AdaptableColumn, api: AdaptableApi) => any;
+export declare const getBadgeRendererForColumn: (styledColumn: StyledColumn, abColumn: AdaptableColumn, api: AdaptableApi) => any;

package/src/agGrid/cellRenderers/BadgeRenderer.js

@@ -5,7 +5,35 @@ const tslib_1 = require("tslib");
 const Badge_1 = require("../../View/Components/Badge");
 const renderWithAdaptableContext_1 = require("../../View/renderWithAdaptableContext");
 const React = tslib_1.__importStar(require("react"));
-const getBadgeRendererForColumn = (badgeStyle, abColumn, api) => {
+const shouldRenderStyledColumnOnRow_1 = require("./shouldRenderStyledColumnOnRow");
+const OVERFLOW_CLASS = {
+    Truncate: 'ab-Badge__wrapper--truncate',
+    Wrap: 'ab-Badge__wrapper--wrap',
+    Scroll: 'ab-Badge__wrapper--scroll',
+};
+/**
+ * Maps a column-level `BadgeStyle.Font.Alignment` to the flex
+ * `justify-content` value for the badge row. Returns `null` to mean
+ * "leave the wrapper alone" so the default flex layout applies.
+ */
+const resolveBadgeRowJustify = (alignment) => {
+    switch (alignment) {
+        case 'Center':
+            return 'center';
+        case 'Right':
+            return 'flex-end';
+        case 'Left':
+            return 'flex-start';
+        default:
+            return null;
+    }
+};
+const getBadgeRendererForColumn = (styledColumn, abColumn, api) => {
+    const badgeStyle = styledColumn.BadgeStyle;
+    const overflowMode = badgeStyle.OverflowMode ?? 'Truncate';
+    const wrapperClassName = `ab-Badge__wrapper ${OVERFLOW_CLASS[overflowMode]}`;
+    const spacing = typeof badgeStyle.Spacing === 'number' ? badgeStyle.Spacing : null;
+    const rowJustify = resolveBadgeRowJustify(badgeStyle.Font?.Alignment);
     return class BadgetRenderer {
         eGui;
         unmountReactRoot;
@@ -17,32 +45,18 @@ const getBadgeRendererForColumn = (badgeStyle, abColumn, api) => {
             const adaptable = this.getAdaptableInstance(params);
             const adaptableApi = adaptable.api;
             this.eGui = document.createElement('div');
-            this.eGui.className = 'ab-Badge__wrapper';
-            const isGroupedRow = params.node.group;
-            const isSummaryRow = adaptableApi.gridApi.isSummaryNode(params.node);
-            const isGrandTotalRowNode = adaptableApi.gridApi.isGrandTotalRowNode(params.node);
-            let shouldRender = true;
-            if (isGrandTotalRowNode) {
-                if (badgeStyle.RowScope?.ExcludeTotalRows) {
-                    shouldRender = false;
-                }
-            }
-            else if (isGroupedRow) {
-                if (badgeStyle.RowScope?.ExcludeGroupRows) {
-                    shouldRender = false;
-                }
+            this.eGui.className = wrapperClassName;
+            if (spacing != null) {
+                // Set the inter-badge gap directly so it doesn't depend on theme CSS.
+                this.eGui.style.setProperty('--ab-cmp-badge__spacing', `${spacing}px`);
             }
-            else if (isSummaryRow) {
-                if (badgeStyle.RowScope?.ExcludeSummaryRows) {
-                    shouldRender = false;
-                }
-            }
-            else {
-                if (badgeStyle.RowScope?.ExcludeDataRows) {
-                    shouldRender = false;
-                }
+            if (rowJustify) {
+                // Position the badge row within the cell. `width: 100%` is needed so
+                // `justify-content` has room to act on an `inline-flex` container.
+                this.eGui.style.setProperty('justify-content', rowJustify);
+                this.eGui.style.setProperty('width', '100%');
             }
-            if (!shouldRender) {
+            if (!(0, shouldRenderStyledColumnOnRow_1.shouldRenderStyledColumnOnRow)(styledColumn, params.node, adaptableApi)) {
                 const formattedValue = params.formatValue?.(params.value) ?? params.value ?? '';
                 this.eGui.innerHTML = formattedValue;
                 return;
@@ -119,17 +133,19 @@ const getBadgeRendererForColumn = (badgeStyle, abColumn, api) => {
                 if (!badge) {
                     return React.createElement('span', {
                         key: index,
-                        className: 'ab-Badge ab-Badge__unstyled',
+                        className: 'ab-Badge ab-Badge--normal ab-Badge__unstyled',
                         children: value,
                     });
                 }
                 return React.createElement(Badge_1.Badge, {
                     key: index,
-                    adaptableStyle: badge.Style,
+                    pillStyle: badge.PillStyle,
                     children: value,
                     icon: badge.Icon,
                     iconPosition: badge.IconPosition ?? 'start',
-                    gap: 5,
+                    shape: badge.Shape,
+                    density: badgeStyle.Density ?? 'Normal',
+                    iconGap: badge.IconGap,
                 });
             });
             this.unmountReactRoot = api.internalApi

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

@@ -0,0 +1,4 @@
+import { StyledColumn } from '../../AdaptableState/StyledColumnState';
+import { AdaptableApi } from '../../Api/AdaptableApi';
+import { AdaptableColumn } from '../../AdaptableState/Common/AdaptableColumn';
+export declare const getBulletChartRendererForColumn: (styledColumn: StyledColumn, abColumn: AdaptableColumn, api: AdaptableApi) => any;