@adaptabletools/adaptable 23.0.0-canary.5 → 23.0.0-canary.7

package/src/View/StatusBar/StatusBarPopup.js

@@ -8,6 +8,7 @@ import { getStatusPanelsSelector } from '../../Redux/ActionsReducers/StatusBarRe
 import { useAdaptable } from '../AdaptableContext';
 import { PopupPanel } from '../Components/Popups/AdaptablePopup/PopupPanel';
 import { ACCESS_LEVEL_READ_ONLY } from '../../Utilities/Constants/GeneralConstants';
+import { isRichStatusBarPanel } from './statusBarPanelHelpers';
 export const StatusBarPopup = (props) => {
     const statusPanels = useSelector(getStatusPanelsSelector);
     const adaptable = useAdaptable();
@@ -26,19 +27,46 @@ export const StatusBarPopup = (props) => {
             };
         });
         adaptable.api.statusBarApi.setStatusBarPanels(newStatusPanels);
-    }, [statusPanels]);
-    const availableItems = ALL_STATUS_SUB_PANELS.filter((panel) => {
+    }, [statusPanels, adaptable.api.statusBarApi]);
+    const availableItems = React.useMemo(() => ALL_STATUS_SUB_PANELS.filter((panel) => {
         const module = adaptable.ModuleService.getModuleById(panel);
         return module?.isModuleVisible();
     }).map((panel) => {
         const module = adaptable.ModuleService.getModuleById(panel);
         return { Id: panel, Title: module.moduleInfo.FriendlyName };
-    });
+    }), [adaptable]);
+    const unusedItemGroups = React.useMemo(() => {
+        const statusPanelIds = [];
+        const moduleShortcutIds = [];
+        availableItems.forEach((item) => {
+            const module = adaptable.ModuleService.getModuleById(item.Id);
+            if (isRichStatusBarPanel(module)) {
+                statusPanelIds.push(item.Id);
+            }
+            else {
+                moduleShortcutIds.push(item.Id);
+            }
+        });
+        return [
+            {
+                listId: 'UNUSED-PANELS',
+                title: 'Status Panels',
+                help: 'Fully featured actionable controls',
+                items: statusPanelIds,
+            },
+            {
+                listId: 'UNUSED-SHORTCUTS',
+                title: 'Module Shortcuts',
+                help: 'Buttons to open Module Status Panel',
+                items: moduleShortcutIds,
+            },
+        ];
+    }, [availableItems, adaptable]);
     const disabled = props.accessLevel === ACCESS_LEVEL_READ_ONLY;
-    return (_jsx(PopupPanel, { headerText: props.moduleInfo.FriendlyName, glyphicon: props.moduleInfo.Glyph, infoLink: props.moduleInfo.HelpPage, infoLinkDisabled: !props.api.internalApi.isDocumentationLinksDisplayed(), children: statusPanels.length ? (_jsx(ModuleManager, { permittedActions: {
+    return (_jsx(PopupPanel, { headerText: props.moduleInfo.FriendlyName, glyphicon: props.moduleInfo.Glyph, infoLink: props.moduleInfo.HelpPage, infoLinkDisabled: !props.api.internalApi.isDocumentationLinksDisplayed(), children: statusPanels.length ? (_jsx(ModuleManager, { dragScope: "status-bar", layout: "rows", permittedActions: {
                 createTab: false,
                 dragAndDropTab: false,
                 deleteTab: false,
                 editTabName: false,
-            }, onTabsChange: handleTabChange, disabled: disabled, tabs: tabs, availableItems: availableItems, tabsTitle: 'AdapTable Status Bar Panels', unusedPanelTitle: "Available Status Bar Components", dragItemText: "Drag into a Status Bar Panel below" })) : (_jsx(EmptyContent, { children: "To enable this feature add to Grid Options statusPanels the Adaptable Status Panel." })) }));
+            }, onTabsChange: handleTabChange, disabled: disabled, tabs: tabs, availableItems: availableItems, unusedItemGroups: unusedItemGroups, dragItemText: "Drag items from either panel above into a Status Bar Panel below", tabsTitle: "AdapTable Status Bar Panels" })) : (_jsx(EmptyContent, { children: "To enable this feature add to Grid Options statusPanels the Adaptable Status Panel." })) }));
 };

package/src/View/StatusBar/statusBarPanelHelpers.d.ts

@@ -0,0 +1,2 @@
+import { IModule } from '../../Strategy/Interface/IModule';
+export declare const isRichStatusBarPanel: (module: IModule | undefined) => boolean;

package/src/View/StatusBar/statusBarPanelHelpers.js

@@ -0,0 +1,7 @@
+export const isRichStatusBarPanel = (module) => {
+    if (!module) {
+        return false;
+    }
+    const statusBarPanelProps = module.getViewProperties?.()?.getStatusBarPanelProps?.() ?? {};
+    return Boolean(statusBarPanelProps.view || statusBarPanelProps.content || statusBarPanelProps.popover);
+};

package/src/View/StyledColumn/Wizard/BadgePillStyleEditor.d.ts

@@ -11,6 +11,8 @@ export interface BadgePillStyleEditorProps {
      */
     onChange: (next: BadgePillStyle | undefined) => void;
     disabled?: boolean;
+    /** When true, omit outer border — for use inside a wizard Card body. */
+    embedded?: boolean;
 }
 /**
  * Compact editor for the cut-down {@link BadgePillStyle}.

package/src/View/StyledColumn/Wizard/BadgePillStyleEditor.js

@@ -1,10 +1,9 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { CheckBox } from '../../../components/CheckBox';
-import { ColorPicker } from '../../../components/ColorPicker';
+import { OptionalColorPicker } from '../../../components/ColorPicker';
 import FormLayout, { FormRow } from '../../../components/FormLayout';
 import { Box, Flex } from '../../../components/Flex';
 import { Toggle, ToggleGroup } from '../../../components/Toggle';
-import { Tag } from '../../../components/Tag';
+import { renderSummaryLabelValueTags } from '../../Wizard/SummaryColorTag';
 const LABEL_COLUMN = { name: 'label', style: { textAlign: 'start' } };
 const CHILD_COLUMN = { name: 'children' };
 /**
@@ -35,7 +34,11 @@ export const BadgePillStyleEditor = (props) => {
         }
     };
     const disabledClass = disabled ? 'twa:opacity-50 twa:pointer-events-none' : '';
-    return (_jsx(Box, { className: "twa:mt-2 twa:rounded-standard twa:border twa:border-border twa:overflow-hidden twa:shadow-sm", children: _jsx(Box, { className: "twa:p-3", children: _jsxs(FormLayout, { columns: [LABEL_COLUMN, CHILD_COLUMN], sizes: ['7.5rem', '1fr'], gridColumnGap: "0.75rem", children: [_jsx(FormRow, { label: "Background", children: _jsxs(Flex, { alignItems: "center", className: "twa:gap-2", children: [_jsx(CheckBox, { disabled: disabled, checked: !!pill.BackColor, onChange: (checked) => update({ BackColor: checked ? pill.BackColor ?? '#cccccc' : undefined }), children: "Set" }), _jsx(ColorPicker, { disabled: disabled || !pill.BackColor, api: props.api, value: pill.BackColor || '#cccccc', onChange: (c) => update({ BackColor: c }) })] }) }), _jsx(FormRow, { label: "Text", children: _jsxs(Flex, { alignItems: "center", className: "twa:gap-2", children: [_jsx(CheckBox, { disabled: disabled, checked: !!pill.ForeColor, onChange: (checked) => update({ ForeColor: checked ? pill.ForeColor ?? '#000000' : undefined }), children: "Set" }), _jsx(ColorPicker, { disabled: disabled || !pill.ForeColor, api: props.api, value: pill.ForeColor || '#000000', onChange: (c) => update({ ForeColor: c }) })] }) }), _jsx(FormRow, { label: "Border", children: _jsxs(Flex, { alignItems: "center", className: "twa:gap-2", children: [_jsx(CheckBox, { disabled: disabled, checked: !!pill.BorderColor, onChange: (checked) => update({ BorderColor: checked ? pill.BorderColor ?? '#000000' : undefined }), children: "Set" }), _jsx(ColorPicker, { disabled: disabled || !pill.BorderColor, api: props.api, value: pill.BorderColor || '#000000', onChange: (c) => update({ BorderColor: c }) })] }) }), _jsx(FormRow, { label: "Font", children: _jsx(Box, { className: disabledClass, children: _jsxs(Flex, { alignItems: "center", className: "twa:gap-2 twa:flex-wrap", children: [_jsxs(ToggleGroup, { children: [_jsx(Toggle, { pressed: pill.FontStyle === 'Italic', onPressedChange: (pressed) => update({ FontStyle: pressed ? 'Italic' : undefined }), icon: "italic" }), _jsx(Toggle, { pressed: pill.FontWeight === 'Bold', onPressedChange: (pressed) => update({ FontWeight: pressed ? 'Bold' : undefined }), icon: "bold" })] }), _jsxs(ToggleGroup, { children: [_jsx(Toggle, { pressed: pill.TextDecoration === 'Underline', onPressedChange: (pressed) => update({ TextDecoration: pressed ? 'Underline' : undefined }), icon: "underline" }), _jsx(Toggle, { pressed: pill.TextDecoration === 'LineThrough', onPressedChange: (pressed) => update({ TextDecoration: pressed ? 'LineThrough' : undefined }), icon: "strikethrough" }), _jsx(Toggle, { pressed: pill.TextDecoration === 'Overline', onPressedChange: (pressed) => update({ TextDecoration: pressed ? 'Overline' : undefined }), icon: "overline" })] })] }) }) })] }) }) }));
+    const form = (_jsxs(FormLayout, { columns: [LABEL_COLUMN, CHILD_COLUMN], sizes: ['7.5rem', '1fr'], gridColumnGap: "0.75rem", children: [_jsx(FormRow, { label: "Background", children: _jsx(OptionalColorPicker, { disabled: disabled, api: props.api, value: pill.BackColor, defaultColor: "#cccccc", onChange: (c) => update({ BackColor: c }) }) }), _jsx(FormRow, { label: "Text", children: _jsx(OptionalColorPicker, { disabled: disabled, api: props.api, value: pill.ForeColor, defaultColor: "#000000", onChange: (c) => update({ ForeColor: c }) }) }), _jsx(FormRow, { label: "Border", children: _jsx(OptionalColorPicker, { disabled: disabled, api: props.api, value: pill.BorderColor, defaultColor: "#000000", onChange: (c) => update({ BorderColor: c }) }) }), _jsx(FormRow, { label: "Font", children: _jsx(Box, { className: disabledClass, children: _jsxs(Flex, { alignItems: "center", className: "twa:gap-2 twa:flex-wrap", children: [_jsxs(Flex, { alignItems: "center", className: "twa:gap-2", children: [_jsx(Toggle, { standalone: true, pressed: pill.FontStyle === 'Italic', onPressedChange: (pressed) => update({ FontStyle: pressed ? 'Italic' : undefined }), icon: "italic" }), _jsx(Toggle, { standalone: true, pressed: pill.FontWeight === 'Bold', onPressedChange: (pressed) => update({ FontWeight: pressed ? 'Bold' : undefined }), icon: "bold" })] }), _jsxs(ToggleGroup, { children: [_jsx(Toggle, { pressed: pill.TextDecoration === 'Underline', onPressedChange: (pressed) => update({ TextDecoration: pressed ? 'Underline' : undefined }), icon: "underline" }), _jsx(Toggle, { pressed: pill.TextDecoration === 'LineThrough', onPressedChange: (pressed) => update({ TextDecoration: pressed ? 'LineThrough' : undefined }), icon: "strikethrough" }), _jsx(Toggle, { pressed: pill.TextDecoration === 'Overline', onPressedChange: (pressed) => update({ TextDecoration: pressed ? 'Overline' : undefined }), icon: "overline" })] })] }) }) })] }));
+    if (props.embedded) {
+        return form;
+    }
+    return (_jsx(Box, { className: "twa:mt-2 twa:rounded-standard twa:border twa:border-border twa:overflow-hidden twa:shadow-sm", children: _jsx(Box, { className: "twa:p-3", children: form }) }));
 };
 /** Descriptive pill properties for summary panels (`Label: value` strings). */
 export const getBadgePillStyleSummaryItems = (pill) => {
@@ -44,22 +47,22 @@ export const getBadgePillStyleSummaryItems = (pill) => {
     }
     const items = [];
     if (pill.BackColor) {
-        items.push({ label: 'Pill Back Colour', value: pill.BackColor });
+        items.push({ label: 'Back Colour', value: pill.BackColor });
     }
     if (pill.ForeColor) {
-        items.push({ label: 'Pill Fore Colour', value: pill.ForeColor });
+        items.push({ label: 'Fore Colour', value: pill.ForeColor });
     }
     if (pill.BorderColor) {
-        items.push({ label: 'Pill Border Colour', value: pill.BorderColor });
+        items.push({ label: 'Border Colour', value: pill.BorderColor });
     }
     if (pill.FontWeight === 'Bold') {
-        items.push({ label: 'Pill Font Weight', value: 'Bold' });
+        items.push({ label: 'Font Weight', value: 'Bold' });
     }
     if (pill.FontStyle === 'Italic') {
-        items.push({ label: 'Pill Font Style', value: 'Italic' });
+        items.push({ label: 'Font Style', value: 'Italic' });
     }
     if (pill.TextDecoration && pill.TextDecoration !== 'None') {
-        items.push({ label: 'Pill Text Decoration', value: pill.TextDecoration });
+        items.push({ label: 'Text Decoration', value: pill.TextDecoration });
     }
     return items;
 };
@@ -69,5 +72,5 @@ export const renderBadgePillStyleSummaryTags = (pill) => {
     if (!items.length) {
         return null;
     }
-    return (_jsx(Flex, { alignItems: "center", className: "twa:gap-1 twa:flex-wrap", children: items.map(({ label, value }) => (_jsx(Tag, { children: `${label}: ${value}` }, label))) }));
+    return renderSummaryLabelValueTags(items);
 };

package/src/View/StyledColumn/Wizard/StyledColumnBadgeSection.d.ts

@@ -8,7 +8,7 @@ export declare const renderBadgeDefinitionSummaryTags: (styledColumn: StyledColu
 export declare const StyledColumnBadgeDefinitionsView: React.FunctionComponent<React.PropsWithChildren<{
     data: StyledColumn;
 }>>;
-export declare const renderBadgeSummary: (styledColumn: StyledColumn, api?: AdaptableApi) => React.JSX.Element;
+export declare const renderBadgeSummary: (styledColumn: StyledColumn, api: AdaptableApi) => React.JSX.Element;
 export interface StyledColumnBadgeSectionProps {
     onChange: (data: StyledColumn) => void;
 }
@@ -17,4 +17,4 @@ export interface StyledColumnBadgeStyleSectionProps {
     onChange: (data: StyledColumn) => void;
 }
 export declare const StyledColumnBadgeStyleSection: React.FunctionComponent<StyledColumnBadgeStyleSectionProps>;
-export declare const renderBadgeStyleSummary: (styledColumn: StyledColumn, api?: AdaptableApi) => React.JSX.Element;
+export declare const renderBadgeStyleSummary: (styledColumn: StyledColumn, api: AdaptableApi) => React.JSX.Element;

package/src/View/StyledColumn/Wizard/StyledColumnBadgeSection.js

@@ -1,10 +1,10 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import DropdownButton from '../../../components/DropdownButton';
 import ErrorBox from '../../../components/ErrorBox';
 import FormLayout, { FormRow } from '../../../components/FormLayout';
-import HelpBlock from '../../../components/HelpBlock';
 import SimpleButton from '../../../components/SimpleButton';
+import { ButtonNew } from '../../Components/Buttons/ButtonNew';
 import { Tag } from '../../../components/Tag';
+import { renderSummaryLabelValueTags, renderSummaryStringTags, } from '../../Wizard/SummaryColorTag';
 import ObjectFactory from '../../../Utilities/ObjectFactory';
 import { AdaptableIconSelector } from '../../Components/AdaptableIconSelector';
 import { PredicateEditor } from '../../Components/PredicateEditor/PredicateEditor';
@@ -22,6 +22,9 @@ import { getCellBoxStyleSummaryItems, getCellFontStyleSummaryItems, StyledColumn
 import { Card } from '../../../components/Card';
 import { useAdaptable } from '../../AdaptableContext';
 import { StyledColumnBadgePreviewCard } from './StyledColumnWizardStyleSection/Components/StyledColumnBadgePreview';
+import { CollapsibleWizardCard, CollapsibleWizardValueSummary, getWizardAccordionSectionClassName, useWizardCardAccordion, } from '../../Wizard/CollapsibleWizardCard';
+import { SingleSelect } from '../../../components/NewSelect';
+import { cn } from '../../../lib/utils';
 const BADGE_STYLE_FORM_SIZES = ['200px', '1fr'];
 const SHAPE_CHOICES = [
     { value: 'Pill', label: 'Pill' },
@@ -38,97 +41,99 @@ const OVERFLOW_CHOICES = [
     { value: 'Wrap', label: 'Wrap', hint: 'Wrap onto subsequent lines' },
     { value: 'Scroll', label: 'Scroll', hint: 'Single line; cell scrolls horizontally' },
 ];
-const BadgeEditor = (props) => {
+const badgeCardId = (index) => `badge-${index}`;
+const getBadgePreviewValue = (dataType) => dataType === 'number' || dataType === 'numberArray'
+    ? `${DEFAULT_INTEGER_DISPLAY_VALUE}`
+    : DEFAULT_STRING_DISPLAY_VALUE;
+const getBadgeDefinitionSummaryItems = (badge, api) => {
+    const items = [];
+    let rule = 'Always';
+    if (badge.Predicate) {
+        rule = api.predicateApi.predicateToString(badge.Predicate);
+    }
+    else if (badge.Expression) {
+        rule = badge.Expression.BooleanExpression;
+    }
+    items.push({ label: 'Rule', value: rule });
+    items.push({ label: 'Shape', value: badge.Shape ?? 'Rounded' });
+    items.push(...getBadgePillStyleSummaryItems(badge.PillStyle));
+    if (badge.Icon) {
+        items.push({
+            label: 'Icon',
+            value: 'name' in badge.Icon ? badge.Icon.name : 'Custom',
+            icon: badge.Icon,
+        });
+    }
+    if (badge.IconOnly) {
+        items.push({ label: 'Icon Only', value: 'Yes' });
+    }
+    if (badge.Icon && badge.IconPosition) {
+        items.push({ label: 'Icon Position', value: badge.IconPosition });
+    }
+    if (typeof badge.IconGap === 'number') {
+        items.push({ label: 'Icon Gap', value: `${badge.IconGap}px` });
+    }
+    return items;
+};
+const BadgePreview = ({ badge, density, previewValue }) => (_jsx(Badge, { pillStyle: badge.PillStyle, icon: badge.Icon, iconPosition: badge.IconPosition, shape: badge.Shape, density: density, iconGap: badge.IconGap, children: badge.IconOnly ? '' : previewValue }));
+const BadgeCardSummary = ({ badge, api }) => (_jsx(CollapsibleWizardValueSummary, { value: renderSummaryLabelValueTags(getBadgeDefinitionSummaryItems(badge, api)) }));
+const BadgeEditorForm = (props) => {
     const { api } = useOnePageAdaptableWizardContext();
-    const { badge, columnId, onChange, density, index } = props;
+    const { badge, columnId, onChange } = props;
     const predicateDefs = api.styledColumnApi.internalApi.getBadgePredicateDefsForColumn(columnId);
-    const dataType = api.columnApi.getColumnDataTypeForColumnId(columnId);
-    const previewValue = dataType === 'number' || dataType == 'numberArray'
-        ? DEFAULT_INTEGER_DISPLAY_VALUE
-        : DEFAULT_STRING_DISPLAY_VALUE;
     const currentShape = badge.Shape ?? 'Rounded';
-    return (_jsxs(Box, { className: "ab-Badge-Definition-Editor twa:mb-3 twa:rounded-standard twa:border twa:border-border twa:overflow-hidden twa:shadow-sm", children: [_jsxs(Flex, { alignItems: "center", className: "ab-Badge-Definition-Editor__header twa:px-3 twa:py-2 twa:border-b twa:border-border twa:gap-2", children: [_jsx(Box, { className: "twa:flex-1 twa:font-medium twa:text-3", children: `Badge ${index + 1}` }), _jsx(SimpleButton, { icon: "delete", variant: "text", tooltip: "Delete badge", onClick: props.onDelete })] }), _jsx(Box, { className: "twa:p-3", children: _jsxs(FormLayout, { children: [_jsx(FormRow, { label: "Preview", children: _jsx(Badge, { pillStyle: badge.PillStyle, icon: badge.Icon, iconPosition: badge.IconPosition, shape: badge.Shape, density: density, iconGap: badge.IconGap, children: badge.IconOnly ? '' : previewValue }) }), _jsx(FormRow, { label: "Shape", children: _jsx(Box, { className: "twa:ml-2", children: _jsx(RadioGroup, { orientation: "horizontal", name: `ab-badge-shape-${columnId}`, value: currentShape, onRadioChange: (value) => onChange({ ...badge, Shape: value }), className: "twa:gap-3", children: SHAPE_CHOICES.map((choice) => (_jsx(Radio, { value: choice.value, children: choice.label }, choice.value))) }) }) }), _jsx(FormRow, { label: "Style", children: _jsx(BadgePillStyleEditor, { api: api, value: badge.PillStyle, onChange: (next) => {
-                                    if (next) {
-                                        onChange({ ...badge, PillStyle: next });
-                                    }
-                                    else {
-                                        const cleaned = { ...badge };
-                                        delete cleaned.PillStyle;
-                                        onChange(cleaned);
-                                    }
-                                } }) }), _jsx(FormRow, { label: 'Rule', children: columnId ? (_jsxs(_Fragment, { children: [_jsx(HelpBlock, { className: "twa:text-2 twa:mb-1 twa:mt-2", children: "Create (optional) Rule for when the Badge is displayed; if no Rule provided Badge will always display (unless overriden by another Rule)" }), _jsx(PredicateEditor, { columnId: columnId, predicate: badge.Predicate, predicateDefs: predicateDefs, placeholder: "No Predicate Selected", onChange: (predicate) => {
-                                            onChange({
-                                                ...badge,
-                                                Predicate: predicate,
-                                            });
-                                        }, onClear: () => onChange({
-                                            ...badge,
-                                            Predicate: undefined,
-                                        }) })] })) : (_jsx(ErrorBox, { children: "Select a column first" })) }), _jsxs(FormRow, { label: "Icon", children: [_jsx(HelpBlock, { className: "twa:text-2 twa:mb-1 twa:mt-2", children: "Select (optional) Icon (and Icon position) to display in the Badge" }), ' ', !badge.Icon || 'name' in badge.Icon ? (_jsx(AdaptableIconSelector, { value: badge?.Icon && 'name' in badge?.Icon ? badge.Icon.name : undefined, onChange: (iconName) => {
-                                        if (iconName) {
-                                            onChange({
-                                                ...badge,
-                                                Icon: {
-                                                    name: iconName,
-                                                },
-                                            });
-                                        }
-                                        else {
-                                            onChange({
-                                                ...badge,
-                                                Icon: undefined,
-                                            });
-                                        }
-                                    } })) : (_jsx(AdaptableIconComponent, { icon: badge.Icon }))] }), badge.Icon && (_jsx(FormRow, { label: "Icon Position", children: _jsx(DropdownButton, { columns: ['label'], items: [
-                                    {
-                                        label: 'Start',
-                                        onClick: () => onChange({ ...badge, IconPosition: 'Start' }),
-                                    },
-                                    {
-                                        label: 'End',
-                                        onClick: () => onChange({ ...badge, IconPosition: 'End' }),
-                                    },
-                                ], children: badge.IconPosition ?? 'Start' }) })), badge.Icon && (_jsx(FormRow, { label: "Show Icon Only", children: _jsx(CheckBox, { checked: badge.IconOnly, onClick: () => onChange({ ...badge, IconOnly: !badge.IconOnly }) }) })), badge.Icon && !badge.IconOnly && (_jsx(FormRow, { label: "Icon Gap", children: _jsxs(Flex, { alignItems: "center", className: "twa:ml-2 twa:gap-2", children: [_jsx(NumberInput, { value: badge.IconGap ?? '', placeholder: "auto", step: 1, min: 0, style: { width: 70 }, onChange: (value) => {
-                                            onChange({
-                                                ...badge,
-                                                IconGap: typeof value === 'number' && value >= 0 ? value : undefined,
-                                            });
-                                        } }), _jsx(Box, { className: "twa:text-xs twa:opacity-70", children: "px between icon and text \u2014 leave blank to follow Density" })] }) }))] }) })] }));
+    const hasIcon = Boolean(badge.Icon);
+    return (_jsxs(Flex, { flexDirection: "column", className: "twa:gap-3 twa:p-2", children: [_jsxs(Card, { shadow: false, children: [_jsxs(Card.Title, { children: [_jsx(Box, { className: "twa:font-medium", children: "Shape" }), _jsx(Box, { className: "twa:text-xs twa:opacity-70 twa:font-normal twa:max-w-[520px]", children: "Define shape of the corners for this badge" })] }), _jsx(Card.Body, { className: "twa:p-1", children: _jsx(RadioGroup, { orientation: "horizontal", name: `ab-badge-shape-${columnId}`, value: currentShape, onRadioChange: (value) => onChange({ ...badge, Shape: value }), className: "twa:gap-3", children: SHAPE_CHOICES.map((choice) => (_jsx(Radio, { value: choice.value, children: choice.label }, choice.value))) }) })] }), _jsxs(Card, { shadow: false, children: [_jsxs(Card.Title, { children: [_jsx(Box, { className: "twa:font-medium", children: "Style" }), _jsx(Box, { className: "twa:text-xs twa:opacity-70 twa:font-normal twa:max-w-[520px]", children: "Colours and font styling for the badge pill" })] }), _jsx(Card.Body, { className: "twa:p-1", children: _jsx(BadgePillStyleEditor, { embedded: true, api: api, value: badge.PillStyle, onChange: (next) => {
+                                if (next) {
+                                    onChange({ ...badge, PillStyle: next });
+                                }
+                                else {
+                                    const cleaned = { ...badge };
+                                    delete cleaned.PillStyle;
+                                    onChange(cleaned);
+                                }
+                            } }) })] }), _jsxs(Card, { shadow: false, children: [_jsxs(Card.Title, { children: [_jsx(Box, { className: "twa:font-medium", children: "Rule" }), _jsx(Box, { className: "twa:text-xs twa:opacity-70 twa:font-normal twa:max-w-[520px]", children: "Optional rule for when this badge is displayed \u2014 leave empty for Badge to always show" })] }), _jsx(Card.Body, { className: "twa:p-1", children: columnId ? (_jsx(PredicateEditor, { columnId: columnId, predicate: badge.Predicate, predicateDefs: predicateDefs, placeholder: "No Predicate Selected", onChange: (predicate) => {
+                                onChange({
+                                    ...badge,
+                                    Predicate: predicate,
+                                });
+                            }, onClear: () => onChange({
+                                ...badge,
+                                Predicate: undefined,
+                            }) })) : (_jsx(ErrorBox, { children: "Select a column first" })) })] }), _jsxs(Card, { shadow: false, children: [_jsxs(Card.Title, { children: [_jsx(Box, { className: "twa:font-medium", children: "Icon" }), _jsx(Box, { className: "twa:text-xs twa:opacity-70 twa:font-normal twa:max-w-[520px]", children: "Optional icon inside the badge \u2014 position and spacing apply once an icon is selected" })] }), _jsx(Card.Body, { className: "twa:p-1", children: _jsxs(FormLayout, { children: [_jsx(FormRow, { label: "Icon", children: !badge.Icon || 'name' in badge.Icon ? (_jsx(AdaptableIconSelector, { value: badge?.Icon && 'name' in badge.Icon ? badge.Icon.name : undefined, onChange: (iconName) => {
+                                            if (iconName) {
+                                                onChange({
+                                                    ...badge,
+                                                    Icon: {
+                                                        name: iconName,
+                                                    },
+                                                });
+                                            }
+                                            else {
+                                                onChange({
+                                                    ...badge,
+                                                    Icon: undefined,
+                                                    IconOnly: undefined,
+                                                    IconPosition: undefined,
+                                                    IconGap: undefined,
+                                                });
+                                            }
+                                        } })) : (_jsx(AdaptableIconComponent, { icon: badge.Icon })) }), _jsx(FormRow, { label: "Icon Position", children: _jsx(Box, { className: "twa:max-w-[160px]", children: _jsx(SingleSelect, { disabled: !hasIcon, className: "twa:w-full", value: badge.IconPosition ?? 'Start', onValueChange: (v) => onChange({ ...badge, IconPosition: v }), items: [
+                                                { value: 'Start', label: 'Start' },
+                                                { value: 'End', label: 'End' },
+                                            ] }) }) }), _jsx(FormRow, { label: "Show Icon Only", children: _jsx(CheckBox, { disabled: !hasIcon, checked: badge.IconOnly, onClick: () => onChange({ ...badge, IconOnly: !badge.IconOnly }) }) }), _jsx(FormRow, { label: "Icon Gap", children: _jsxs(Flex, { alignItems: "center", className: "twa:gap-2", children: [_jsx(NumberInput, { disabled: !hasIcon || badge.IconOnly, value: badge.IconGap ?? '', placeholder: "auto", step: 1, min: 0, style: { width: 70 }, onChange: (value) => {
+                                                    onChange({
+                                                        ...badge,
+                                                        IconGap: typeof value === 'number' && value >= 0 ? value : undefined,
+                                                    });
+                                                } }), _jsx(Box, { className: "twa:text-xs twa:opacity-70", children: "px between icon and text \u2014 leave blank to follow Density" })] }) })] }) })] })] }));
 };
 export const getStyledColumnBadgeDefinitionViewValueGroups = (styledColumn, api) => {
     const badgeStyle = styledColumn.BadgeStyle;
     if (!badgeStyle?.Badges?.length) {
         return [];
     }
-    return badgeStyle.Badges.map((badge, index) => {
-        const items = [];
-        let rule = 'Always';
-        if (badge.Predicate) {
-            rule = api.predicateApi.predicateToString(badge.Predicate);
-        }
-        else if (badge.Expression) {
-            rule = badge.Expression.BooleanExpression;
-        }
-        items.push(`Badge ${index + 1}: ${rule}`);
-        items.push(`Shape: ${badge.Shape ?? 'Rounded'}`);
-        getBadgePillStyleSummaryItems(badge.PillStyle).forEach(({ label, value }) => {
-            items.push(`${label}: ${value}`);
-        });
-        if (badge.Icon) {
-            const iconName = 'name' in badge.Icon ? badge.Icon.name : 'Custom';
-            items.push(`Icon: ${iconName}`);
-        }
-        if (badge.IconOnly) {
-            items.push('Icon Only: Yes');
-        }
-        if (badge.Icon && badge.IconPosition) {
-            items.push(`Icon Position: ${badge.IconPosition}`);
-        }
-        if (typeof badge.IconGap === 'number') {
-            items.push(`Icon Gap: ${badge.IconGap}px`);
-        }
-        return items;
-    });
+    return badgeStyle.Badges.map((badge) => getBadgeDefinitionSummaryItems(badge, api).map(({ label, value }) => `${label}: ${value}`));
 };
 export const getStyledColumnBadgeDefinitionViewValues = (styledColumn, api) => {
     return getStyledColumnBadgeDefinitionViewValueGroups(styledColumn, api).flat();
@@ -161,40 +166,67 @@ export const getStyledColumnBadgeStyleViewValues = (styledColumn, api) => {
     return items;
 };
 export const renderBadgeDefinitionSummaryTags = (styledColumn, api) => {
-    const groups = getStyledColumnBadgeDefinitionViewValueGroups(styledColumn, api);
-    if (!groups.length) {
+    const badges = styledColumn.BadgeStyle?.Badges;
+    if (!badges?.length) {
         return _jsx(Tag, { children: "No Badges Defined" });
     }
-    return (_jsx(Flex, { flexDirection: "column", className: "twa:gap-2", children: groups.map((items, index) => (_jsx(Flex, { alignItems: "center", className: "twa:flex-wrap twa:gap-2", children: items.map((item, itemIndex) => (_jsx(Tag, { children: item }, `${index}-${itemIndex}`))) }, index))) }));
+    return (_jsx(Flex, { flexDirection: "column", className: "twa:gap-2", children: badges.map((badge, index) => (_jsxs(Flex, { alignItems: "center", className: "twa:flex-wrap twa:gap-2", children: [_jsxs(Tag, { className: "twa:shrink-0", children: ["Badge ", index + 1] }), renderSummaryLabelValueTags(getBadgeDefinitionSummaryItems(badge, api))] }, index))) }));
 };
 export const StyledColumnBadgeDefinitionsView = ({ data }) => {
     const { api } = useAdaptable();
     return renderBadgeDefinitionSummaryTags(data, api);
 };
 export const renderBadgeSummary = (styledColumn, api) => {
-    if (!api) {
-        const { api: adaptableApi } = useOnePageAdaptableWizardContext();
-        api = adaptableApi;
-    }
     return renderBadgeDefinitionSummaryTags(styledColumn, api);
 };
 export const StyledColumnBadgeSection = (props) => {
-    const { data } = useOnePageAdaptableWizardContext();
+    const { data, api } = useOnePageAdaptableWizardContext();
     const badgeStyle = data?.BadgeStyle ?? {};
     const badges = badgeStyle.Badges ?? [];
     const currentDensity = badgeStyle.Density ?? 'Normal';
-    return (_jsxs(Box, { children: [_jsx(Flex, { className: "twa:justify-end", children: _jsx(SimpleButton, { icon: "plus", onClick: () => {
-                        props.onChange({
-                            ...data,
-                            BadgeStyle: {
-                                ...badgeStyle,
-                                Badges: [...badges, ObjectFactory.CreateDefaultStyledColumnBadge()],
-                            },
-                        });
-                    }, children: "Add Badge" }) }), _jsx(Flex, { flexDirection: "column", className: "twa:p-2", children: badges.map((badge, index) => {
-                    const handleEditBadge = (badge) => {
+    const dataType = data.ColumnId
+        ? api.columnApi.getColumnDataTypeForColumnId(data.ColumnId)
+        : 'text';
+    const previewValue = getBadgePreviewValue(dataType);
+    const initialExpandedCardId = badges.length === 1 ? badgeCardId(0) : null;
+    const { bindCard, hasExpandedCard, expandedFillsSpace, expandedId, setExpandedId } = useWizardCardAccordion(initialExpandedCardId);
+    const handleAddBadge = () => {
+        const newIndex = badges.length;
+        props.onChange({
+            ...data,
+            BadgeStyle: {
+                ...badgeStyle,
+                Badges: [...badges, ObjectFactory.CreateDefaultStyledColumnBadge()],
+            },
+        });
+        setExpandedId(badgeCardId(newIndex));
+    };
+    const handleDeleteBadge = (index) => {
+        const cardId = badgeCardId(index);
+        const newBadges = [...badges];
+        newBadges.splice(index, 1);
+        props.onChange({
+            ...data,
+            BadgeStyle: {
+                ...badgeStyle,
+                Badges: newBadges,
+            },
+        });
+        if (expandedId === cardId) {
+            setExpandedId(null);
+            return;
+        }
+        if (expandedId?.startsWith('badge-')) {
+            const expandedIndex = Number(expandedId.replace('badge-', ''));
+            if (!Number.isNaN(expandedIndex) && expandedIndex > index) {
+                setExpandedId(badgeCardId(expandedIndex - 1));
+            }
+        }
+    };
+    return (_jsxs(Box, { className: cn(getWizardAccordionSectionClassName(hasExpandedCard, expandedFillsSpace), 'twa:p-2'), children: [_jsx(Flex, { className: "twa:justify-end twa:mb-2 twa:shrink-0", children: _jsx(ButtonNew, { onClick: handleAddBadge, children: "Add Badge" }) }), _jsx(Flex, { flexDirection: "column", className: "twa:gap-3 twa:min-h-0", children: badges.map((badge, index) => {
+                    const handleEditBadge = (nextBadge) => {
                         const newBadges = [...badges];
-                        newBadges[index] = badge;
+                        newBadges[index] = nextBadge;
                         props.onChange({
                             ...data,
                             BadgeStyle: {
@@ -203,17 +235,7 @@ export const StyledColumnBadgeSection = (props) => {
                             },
                         });
                     };
-                    return (_jsx(BadgeEditor, { index: index, badge: badge, density: currentDensity, columnId: data.ColumnId, onChange: handleEditBadge, onDelete: () => {
-                            const newBadges = [...badges];
-                            newBadges.splice(index, 1);
-                            props.onChange({
-                                ...data,
-                                BadgeStyle: {
-                                    ...badgeStyle,
-                                    Badges: newBadges,
-                                },
-                            });
-                        } }, index));
+                    return (_jsx(CollapsibleWizardCard, { ...bindCard(badgeCardId(index)), surface: "panel", "data-name": `styled-column-badge-${index}`, title: `Badge ${index + 1}`, collapsedHelp: false, headerVisual: _jsx(BadgePreview, { badge: badge, density: currentDensity, previewValue: previewValue }), headerActions: _jsx(SimpleButton, { icon: "delete", variant: "text", tooltip: "Delete badge", onClick: () => handleDeleteBadge(index) }), summary: _jsx(BadgeCardSummary, { badge: badge, api: api }), bodyClassName: "twa:!pt-0 twa:overflow-y-auto", children: _jsx(BadgeEditorForm, { badge: badge, columnId: data.ColumnId, onChange: handleEditBadge }) }, badgeCardId(index)));
                 }) })] }));
 };
 export const StyledColumnBadgeStyleSection = (props) => {
@@ -260,13 +282,9 @@ export const StyledColumnBadgeStyleSection = (props) => {
                                     } }) })] })] }), _jsx(StyledColumnBadgePreviewCard, { data: data })] }));
 };
 export const renderBadgeStyleSummary = (styledColumn, api) => {
-    if (!api) {
-        const { api: adaptableApi } = useOnePageAdaptableWizardContext();
-        api = adaptableApi;
-    }
     const items = getStyledColumnBadgeStyleViewValues(styledColumn, api);
     if (!items.length) {
         return _jsx(Tag, { children: "No Style Defined" });
     }
-    return (_jsx(Flex, { alignItems: "center", className: "twa:flex-wrap twa:gap-2", children: items.map((item) => (_jsx(Tag, { children: item }, item))) }));
+    return renderSummaryStringTags(items);
 };

package/src/View/StyledColumn/Wizard/StyledColumnSliceStyleEditors.js

@@ -1,12 +1,11 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import * as React from 'react';
-import { CheckBox } from '../../../components/CheckBox';
-import { ColorPicker } from '../../../components/ColorPicker';
+import { OptionalColorPicker } from '../../../components/ColorPicker';
 import FormLayout, { FormRow } from '../../../components/FormLayout';
 import { Box, Flex } from '../../../components/Flex';
 import { NumberInput } from '../../../components/Input/NumberInput';
 import { SingleSelect } from '../../../components/NewSelect';
-import { Tag } from '../../../components/Tag';
+import { renderSummaryLabelValueTags } from '../../Wizard/SummaryColorTag';
 import { Toggle, ToggleGroup } from '../../../components/Toggle';
 const FORM_SIZES = ['200px', '1fr'];
 const FONT_SIZE_ITEMS = [
@@ -46,18 +45,13 @@ export const StyledColumnFontStyleEditor = (props) => {
             props.onChange(next);
         }
     };
-    const onForeColorChecked = (checked) => {
-        if (checked) {
-            update({ ForeColor: font.ForeColor ?? '#000000' });
-        }
-        else {
-            update({ ForeColor: undefined });
-        }
+    const onForeColorChange = (color) => {
+        update({ ForeColor: color });
     };
     const onAlignmentChange = (alignment) => {
         update({ Alignment: alignment });
     };
-    return (_jsx(Box, { children: _jsxs(FormLayout, { className: "twa:ml-2", sizes: [...FORM_SIZES], children: [_jsx(FormRow, { label: "Text Colour:", children: _jsxs(Flex, { alignItems: "center", className: "twa:ml-2 twa:gap-2", children: [_jsx(CheckBox, { disabled: disabled, checked: !!font.ForeColor, onChange: (checked) => onForeColorChecked(checked), children: "Set" }), _jsx(ColorPicker, { disabled: disabled || !font.ForeColor, api: props.api, value: font.ForeColor || '#000000', onChange: (c) => update({ ForeColor: c }) })] }) }), _jsx(FormRow, { label: "Font:", children: _jsx(Box, { className: disabledClass, children: _jsxs(Flex, { alignItems: "center", className: "twa:ml-2 twa:gap-2 twa:flex-wrap", children: [_jsxs(ToggleGroup, { children: [_jsx(Toggle, { pressed: font.FontStyle === 'Italic', onPressedChange: (pressed) => update({ FontStyle: pressed ? 'Italic' : undefined }), icon: "italic" }), _jsx(Toggle, { pressed: font.FontWeight === 'Bold', onPressedChange: (pressed) => update({ FontWeight: pressed ? 'Bold' : undefined }), icon: "bold" })] }), _jsxs(ToggleGroup, { children: [_jsx(Toggle, { pressed: font.TextDecoration === 'Underline', onPressedChange: (pressed) => update({ TextDecoration: pressed ? 'Underline' : undefined }), icon: "underline" }), _jsx(Toggle, { pressed: font.TextDecoration === 'LineThrough', onPressedChange: (pressed) => update({ TextDecoration: pressed ? 'LineThrough' : undefined }), icon: "strikethrough" }), _jsx(Toggle, { pressed: font.TextDecoration === 'Overline', onPressedChange: (pressed) => update({ TextDecoration: pressed ? 'Overline' : undefined }), icon: "overline" })] }), _jsx(Box, { className: "twa:w-32", children: _jsx(SingleSelect, { placeholder: "Default size", items: FONT_SIZE_ITEMS, value: font.FontSize ?? '', onValueChange: (value) => update({
+    return (_jsx(Box, { children: _jsxs(FormLayout, { className: "twa:ml-2", sizes: [...FORM_SIZES], children: [_jsx(FormRow, { label: "Text Colour:", children: _jsx(OptionalColorPicker, { className: "twa:ml-2", disabled: disabled, api: props.api, value: font.ForeColor, defaultColor: "#000000", onChange: onForeColorChange }) }), _jsx(FormRow, { label: "Font:", children: _jsx(Box, { className: disabledClass, children: _jsxs(Flex, { alignItems: "center", className: "twa:ml-2 twa:gap-2 twa:flex-wrap", children: [_jsxs(Flex, { alignItems: "center", className: "twa:gap-2", children: [_jsx(Toggle, { standalone: true, pressed: font.FontStyle === 'Italic', onPressedChange: (pressed) => update({ FontStyle: pressed ? 'Italic' : undefined }), icon: "italic" }), _jsx(Toggle, { standalone: true, pressed: font.FontWeight === 'Bold', onPressedChange: (pressed) => update({ FontWeight: pressed ? 'Bold' : undefined }), icon: "bold" })] }), _jsxs(ToggleGroup, { children: [_jsx(Toggle, { pressed: font.TextDecoration === 'Underline', onPressedChange: (pressed) => update({ TextDecoration: pressed ? 'Underline' : undefined }), icon: "underline" }), _jsx(Toggle, { pressed: font.TextDecoration === 'LineThrough', onPressedChange: (pressed) => update({ TextDecoration: pressed ? 'LineThrough' : undefined }), icon: "strikethrough" }), _jsx(Toggle, { pressed: font.TextDecoration === 'Overline', onPressedChange: (pressed) => update({ TextDecoration: pressed ? 'Overline' : undefined }), icon: "overline" })] }), _jsx(Box, { className: "twa:w-32", children: _jsx(SingleSelect, { placeholder: "Default size", items: FONT_SIZE_ITEMS, value: font.FontSize ?? '', onValueChange: (value) => update({
                                             FontSize: (value || undefined),
                                         }) }) })] }) }) }), !hideAlignment && (_jsx(FormRow, { label: "Alignment:", children: _jsx(Box, { className: disabledClass, children: _jsx(Flex, { alignItems: "center", className: "twa:ml-2 twa:gap-2", children: _jsxs(ToggleGroup, { children: [_jsx(Toggle, { icon: "align-left", pressed: font.Alignment === 'Left', onPressedChange: (pressed) => onAlignmentChange(pressed ? 'Left' : undefined) }), _jsx(Toggle, { icon: "align-center", pressed: font.Alignment === 'Center', onPressedChange: (pressed) => onAlignmentChange(pressed ? 'Center' : undefined) }), _jsx(Toggle, { icon: "align-right", pressed: font.Alignment === 'Right', onPressedChange: (pressed) => onAlignmentChange(pressed ? 'Right' : undefined) })] }) }) }) }))] }) }));
 };
@@ -88,7 +82,7 @@ export const StyledColumnCellStyleEditor = (props) => {
             props.onChange(next);
         }
     };
-    return (_jsx(Box, { children: _jsxs(FormLayout, { className: "twa:ml-2", sizes: [...FORM_SIZES], children: [_jsx(FormRow, { label: "Background:", children: _jsxs(Flex, { alignItems: "center", className: "twa:ml-2 twa:gap-2", children: [_jsx(CheckBox, { disabled: disabled, checked: !!cell.BackColor, onChange: (checked) => update({ BackColor: checked ? cell.BackColor ?? '#ffffff' : undefined }), children: "Set" }), _jsx(ColorPicker, { disabled: disabled || !cell.BackColor, api: props.api, value: cell.BackColor || '#ffffff', onChange: (c) => update({ BackColor: c }) })] }) }), _jsx(FormRow, { label: "Border colour:", children: _jsxs(Flex, { alignItems: "center", className: "twa:ml-2 twa:gap-2", children: [_jsx(CheckBox, { disabled: disabled, checked: !!cell.BorderColor, onChange: (checked) => update({ BorderColor: checked ? cell.BorderColor ?? '#000000' : undefined }), children: "Set" }), _jsx(ColorPicker, { disabled: disabled || !cell.BorderColor, api: props.api, value: cell.BorderColor || '#000000', onChange: (c) => update({ BorderColor: c }) })] }) }), _jsx(FormRow, { label: "Border radius:", children: _jsxs(Flex, { alignItems: "center", className: "twa:ml-2 twa:gap-2", children: [_jsx(NumberInput, { disabled: disabled, className: "twa:w-20", value: cell.BorderRadius, min: 0, max: 64, step: 1, onChange: (v) => update({ BorderRadius: v === undefined || isNaN(Number(v)) ? undefined : v }) }), _jsx(Box, { className: "twa:text-xs twa:opacity-70", children: "px" })] }) })] }) }));
+    return (_jsx(Box, { children: _jsxs(FormLayout, { className: "twa:ml-2", sizes: [...FORM_SIZES], children: [_jsx(FormRow, { label: "Background:", children: _jsx(OptionalColorPicker, { className: "twa:ml-2", disabled: disabled, api: props.api, value: cell.BackColor, defaultColor: "#ffffff", onChange: (c) => update({ BackColor: c }) }) }), _jsx(FormRow, { label: "Border colour:", children: _jsx(OptionalColorPicker, { className: "twa:ml-2", disabled: disabled, api: props.api, value: cell.BorderColor, defaultColor: "#000000", onChange: (c) => update({ BorderColor: c }) }) }), _jsx(FormRow, { label: "Border radius:", children: _jsxs(Flex, { alignItems: "center", className: "twa:ml-2 twa:gap-2", children: [_jsx(NumberInput, { disabled: disabled, className: "twa:w-20", value: cell.BorderRadius, min: 0, max: 64, step: 1, onChange: (v) => update({ BorderRadius: v === undefined || isNaN(Number(v)) ? undefined : v }) }), _jsx(Box, { className: "twa:text-xs twa:opacity-70", children: "px" })] }) })] }) }));
 };
 /**
  * Descriptive font properties for summary panels (`Label: value` strings).
@@ -126,7 +120,7 @@ export const renderFontStyleSummaryTags = (font) => {
     if (!items.length) {
         return null;
     }
-    return (_jsx(Flex, { alignItems: "center", className: "twa:gap-1 twa:flex-wrap", children: items.map(({ label, value }) => (_jsx(Tag, { children: `${label}: ${value}` }, label))) }));
+    return renderSummaryLabelValueTags(items);
 };
 /**
  * Descriptive cell box properties for summary panels (`Label: value` strings).
@@ -155,5 +149,5 @@ export const renderCellStyleSummaryTags = (cell) => {
     if (!items.length) {
         return null;
     }
-    return (_jsx(Flex, { alignItems: "center", className: "twa:gap-1 twa:flex-wrap", children: items.map(({ label, value }) => (_jsx(Tag, { children: `${label}: ${value}` }, label))) }));
+    return renderSummaryLabelValueTags(items);
 };

package/src/View/StyledColumn/Wizard/StyledColumnSparklineSettingsSection.js

@@ -4,6 +4,7 @@ import { SingleSelect } from '../../../components/NewSelect';
 import { useOnePageAdaptableWizardContext } from '../../Wizard/OnePageAdaptableWizard';
 import FormLayout, { FormRow } from '../../../components/FormLayout';
 import { Tag } from '../../../components/Tag';
+import { renderSummaryStringTags } from '../../Wizard/SummaryColorTag';
 import AdaptableInput from '../../Components/AdaptableInput';
 import { ColorPicker } from '../../../components/ColorPicker';
 import { CheckBox } from '../../../components/CheckBox';
@@ -95,7 +96,7 @@ export const renderSparklineSummary = (data) => {
     const items = buildStyledColumnSparklineStyleSummaryStrings(sparkline, {
         includeEmptyFeatures: true,
     });
-    return (_jsx(Flex, { alignItems: "center", className: "twa:flex-wrap twa:gap-2", children: items.map((item) => (_jsx(Tag, { children: item }, item))) }));
+    return renderSummaryStringTags(items);
 };
 /**
  * Validation for the Sparkline Settings wizard step.

package/src/View/StyledColumn/Wizard/StyledColumnTypeThumbnail.d.ts

@@ -0,0 +1,5 @@
+import * as React from 'react';
+export type StyledColumnTypeThumbnailKey = 'gradient' | 'percent' | 'sparkline' | 'badge' | 'bullet' | 'rating' | 'rangeBar' | 'icon';
+export declare const StyledColumnTypeThumbnail: React.FunctionComponent<{
+    type: StyledColumnTypeThumbnailKey;
+}>;