@adaptabletools/adaptable 23.0.0-canary.9 → 23.0.0

package/index.css

@@ -798,15 +798,15 @@
   .twa\:min-h-\[300px\] {
     min-height: 300px;
   }
+  .twa\:min-h-\[500px\] {
+    min-height: 500px;
+  }
   .twa\:min-h-auto {
     min-height: auto;
   }
   .twa\:min-h-auto\! {
     min-height: auto !important;
   }
-  .twa\:min-h-full {
-    min-height: 100%;
-  }
   .twa\:min-h-input {
     min-height: var(--ab-input-height);
   }
@@ -1909,6 +1909,9 @@
   .twa\:pt-0 {
     padding-top: 0;
   }
+  .twa\:pt-0\! {
+    padding-top: 0 !important;
+  }
   .twa\:pt-0\.5 {
     padding-top: calc(var(--ab-base-space) * 0.5);
   }
@@ -8014,50 +8017,17 @@
       box-shadow: inset 0 0 0 1px color-mix(in srgb, currentColor 24%, transparent);
     }
   }
-  .ab-SimpleButton.ab-ObjectListActionButton--edit {
-    background-color: var(--ab-color-action-edit) !important;
-  }
-  @supports (color: color-mix(in lab, red, red)) {
-    .ab-SimpleButton.ab-ObjectListActionButton--edit {
-      background-color: color-mix(in srgb, var(--ab-color-action-edit) 14%, var(--ab-color-muted)) !important;
-    }
-  }
-  .ab-SimpleButton.ab-ObjectListActionButton--edit {
-    color: var(--ab-color-action-edit);
-  }
-  .ab-SimpleButton.ab-ObjectListActionButton--suspend {
+  .ab-SimpleButton.ab-ObjectListActionButton--edit, .ab-SimpleButton.ab-ObjectListActionButton--suspend, .ab-SimpleButton.ab-ObjectListActionButton--delete, .ab-SimpleButton.ab-ObjectListActionButton--share, .ab-SimpleButton.ab-ObjectListActionButton--clone {
     background-color: var(--ab-color-primary-foreground) !important;
   }
   @supports (color: color-mix(in lab, red, red)) {
-    .ab-SimpleButton.ab-ObjectListActionButton--suspend {
+    .ab-SimpleButton.ab-ObjectListActionButton--edit, .ab-SimpleButton.ab-ObjectListActionButton--suspend, .ab-SimpleButton.ab-ObjectListActionButton--delete, .ab-SimpleButton.ab-ObjectListActionButton--share, .ab-SimpleButton.ab-ObjectListActionButton--clone {
       background-color: color-mix( in srgb, var(--ab-color-primary-foreground) 10%, var(--ab-color-muted) ) !important;
     }
   }
-  .ab-SimpleButton.ab-ObjectListActionButton--suspend {
+  .ab-SimpleButton.ab-ObjectListActionButton--edit, .ab-SimpleButton.ab-ObjectListActionButton--suspend, .ab-SimpleButton.ab-ObjectListActionButton--delete, .ab-SimpleButton.ab-ObjectListActionButton--share, .ab-SimpleButton.ab-ObjectListActionButton--clone {
     color: var(--ab-color-primary-foreground);
   }
-  .ab-SimpleButton.ab-ObjectListActionButton--delete {
-    background-color: var(--ab-color-action-delete) !important;
-  }
-  @supports (color: color-mix(in lab, red, red)) {
-    .ab-SimpleButton.ab-ObjectListActionButton--delete {
-      background-color: color-mix(in srgb, var(--ab-color-action-delete) 14%, var(--ab-color-muted)) !important;
-    }
-  }
-  .ab-SimpleButton.ab-ObjectListActionButton--delete {
-    color: var(--ab-color-action-delete);
-  }
-  .ab-SimpleButton.ab-ObjectListActionButton--share {
-    background-color: var(--ab-color-action-share) !important;
-  }
-  @supports (color: color-mix(in lab, red, red)) {
-    .ab-SimpleButton.ab-ObjectListActionButton--share {
-      background-color: color-mix(in srgb, var(--ab-color-action-share) 14%, var(--ab-color-muted)) !important;
-    }
-  }
-  .ab-SimpleButton.ab-ObjectListActionButton--share {
-    color: var(--ab-color-action-share);
-  }
   .ab-SimpleButton.ab-ObjectListActionButton:hover:not(:disabled) {
     box-shadow: inset 0 0 0 1px currentColor;
   }
@@ -9067,6 +9037,10 @@
   .ab--theme-dark input.ab-Input[type='number']::-webkit-outer-spin-button,.ab--theme-dark input.ab-Input[type='number']::-webkit-inner-spin-button {
     background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="18" height="20" viewBox="4 0 18 18" version="1.1"><path fill="%23f7f7f7" d="M7 10l5 5 5-5z" transform="translate(0, 2)"/><path fill="%23f7f7f7" d="M7 14l5-5 5 5z" transform="translate(0, -6)"/></svg>') no-repeat center center;
   }
+  .ab--theme-dark input.ab-Input[type='time']::-webkit-calendar-picker-indicator,.ab--theme-dark input.ab-Input[type='date']::-webkit-calendar-picker-indicator,.ab--theme-dark input.ab-Input[type='datetime-local']::-webkit-calendar-picker-indicator,.ab--theme-dark input.ab-Input[type='month']::-webkit-calendar-picker-indicator,.ab--theme-dark input.ab-Input[type='week']::-webkit-calendar-picker-indicator {
+    filter: invert(1);
+    opacity: 0.85;
+  }
 }
 @property --tw-translate-x {
   syntax: "*";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@adaptabletools/adaptable",
-  "version": "23.0.0-canary.9",
+  "version": "23.0.0",
   "description": "Powerful AG Grid extension which provides advanced, cutting-edge functionality to meet all DataGrid requirements",
   "keywords": [
     "web-components",

package/src/View/Components/AdaptableObjectList/AdaptableObjectList.js

@@ -11,10 +11,9 @@ import { ButtonEdit } from '../Buttons/ButtonEdit';
 import { ButtonShare } from '../Buttons/ButtonShare';
 import { SuspendToggleButton } from '../Buttons/SuspendToggleButton/SuspendToggleButton';
 import { Box, Flex } from '../../../components/Flex';
-import { twMerge } from '../../../twMerge';
 import { TagList } from '../../../components/Tag/Tag';
 import { objectListActionButtonClassName } from './objectListActionButtonStyles';
-const ICON_SIZE = 26;
+const ICON_SIZE = 24;
 const LIST_BASE_CLASS_NAME = 'ab-Adaptable-Object-List';
 const ITEM_BASE_CLASS_NAME = `${LIST_BASE_CLASS_NAME}__Item`;
 export const AdaptableObjectListItemView = (props) => {
@@ -24,8 +23,7 @@ export const AdaptableObjectListItemView = (props) => {
         disabled: props.deleteDisabled,
         tooltip: props.deleteTooltip ?? 'Delete',
         iconSize: ICON_SIZE,
-        ConfirmationMsg: props.deleteConfirmationMsg ??
-            `Are you sure you want to delete this ${props.entityType}?`,
+        ConfirmationMsg: props.deleteConfirmationMsg ?? `Are you sure you want to delete this ${props.entityType}?`,
         ConfirmationTitle: `Delete ${props.entityType}`,
         ConfirmAction: props.deleteAction,
         accessLevel: props.accessLevel,
@@ -36,8 +34,8 @@ export const AdaptableObjectListItemView = (props) => {
             dispatch(props.deleteAction);
         };
     }
-    const deleteActionButton = (_jsx(ButtonDelete, { ...deleteActionProps, className: twMerge(objectListActionButtonClassName('delete'), deleteActionProps.className) }));
-    return (_jsxs(Flex, { "data-name": "adaptable-object-list-item", "data-value": props.abObject.Uuid, as: "li", className: twMerge(baseClassName, 'twa:rounded-standard', props.className), style: props.style, children: [_jsx(Box, { className: `twa:flex-1 ${baseClassName}__rows twa:gap-2 twa:flex twa:flex-col`, children: props.items.filter?.(Boolean)?.map((tag, index) => {
+    const deleteActionButton = (_jsx(ButtonDelete, { ...deleteActionProps, className: cn(objectListActionButtonClassName('delete'), deleteActionProps.className) }));
+    return (_jsxs(Flex, { "data-name": "adaptable-object-list-item", "data-value": props.abObject.Uuid, as: "li", className: cn(baseClassName, 'twa:rounded-standard', props.className), style: props.style, children: [_jsx(Box, { className: `twa:flex-1 ${baseClassName}__rows twa:gap-2 twa:flex twa:flex-col`, children: props.items.filter?.(Boolean)?.map((tag, index) => {
                     const labelElement = typeof tag.label === 'function'
                         ? React.createElement(tag.label, { key: index, data: props.abObject })
                         : tag.label ?? tag.name;

package/src/View/Components/AdaptableObjectList/objectListActionButtonStyles.d.ts

@@ -1,2 +1,2 @@
-export type ObjectListActionKind = 'edit' | 'suspend' | 'delete' | 'share';
+export type ObjectListActionKind = 'edit' | 'suspend' | 'delete' | 'share' | 'clone';
 export declare const objectListActionButtonClassName: (kind: ObjectListActionKind, className?: string) => string;

package/src/View/Components/AdaptableObjectList/objectListActionButtonStyles.js

@@ -1,2 +1,2 @@
 import { cn } from '../../../lib/utils';
-export const objectListActionButtonClassName = (kind, className) => cn('ab-ObjectListActionButton', `ab-ObjectListActionButton--${kind}`, className);
+export const objectListActionButtonClassName = (kind, className) => cn('ab-ObjectListActionButton', `ab-ObjectListActionButton--${kind}`, 'twa:shadow-sm', className);

package/src/View/Components/Buttons/SuspendToggleButton/SuspendToggleButton.js

@@ -3,7 +3,7 @@ import * as React from 'react';
 import SimpleButton from '../../../../components/SimpleButton';
 import { ACCESS_LEVEL_READ_ONLY } from '../../../../Utilities/Constants/GeneralConstants';
 import { cn } from '../../../../lib/utils';
-export const SuspendToggleButton = React.memo(({ suspendableObject, onUnSuspend, onSuspend, style, disabled, accessLevel, className, iconSize = 26, }) => {
+export const SuspendToggleButton = React.memo(({ suspendableObject, onUnSuspend, onSuspend, style, disabled, accessLevel, className, iconSize = 24, }) => {
     const preparedDisabled = (accessLevel && accessLevel === ACCESS_LEVEL_READ_ONLY) || disabled;
     const isSuspended = suspendableObject.IsSuspended;
     const handleClick = React.useCallback(() => {
@@ -14,5 +14,5 @@ export const SuspendToggleButton = React.memo(({ suspendableObject, onUnSuspend,
             onSuspend(suspendableObject);
         }
     }, [isSuspended, onSuspend, onUnSuspend, suspendableObject]);
-    return (_jsx(SimpleButton, { className: cn('ab-SuspendButton', isSuspended && 'twa:opacity-60', className), "data-name": isSuspended ? 'resume' : 'suspend', disabled: preparedDisabled, style: style, variant: "text", tone: "neutral", iconSize: iconSize, icon: isSuspended ? 'resume' : 'pause', tooltip: isSuspended ? 'Resume' : 'Suspend', accessLevel: accessLevel, onClick: handleClick }));
+    return (_jsx(SimpleButton, { className: cn('ab-SuspendButton', className), "data-name": isSuspended ? 'resume' : 'suspend', disabled: preparedDisabled, style: style, variant: "text", tone: "neutral", iconSize: iconSize, icon: isSuspended ? 'resume' : 'pause', tooltip: isSuspended ? 'Resume' : 'Suspend', accessLevel: accessLevel, onClick: handleClick }));
 });

package/src/View/Components/ToolPanel/ToolPanelPopupSections.js

@@ -14,8 +14,11 @@ export var ToolPanelConfigView;
 })(ToolPanelConfigView || (ToolPanelConfigView = {}));
 export const ToolPanelPopupSections = (props) => {
     const { api } = useAdaptable();
-    const initialExpandedId = props.initialTab === ToolPanelConfigView.Buttons ? 'module-buttons' : 'tool-panels';
-    const { bindCard, hasExpandedCard, expandedFillsSpace } = useWizardCardAccordion(initialExpandedId);
+    // Start with both cards collapsed so the user sees the popup's full
+    // summary at a glance and explicitly chooses which to edit. `initialTab`
+    // is still accepted on the props for backwards compatibility but no
+    // longer pre-expands a card.
+    const { bindCard, hasExpandedCard, expandedFillsSpace } = useWizardCardAccordion(null);
     const selectedModuleButtons = [];
     if (ArrayExtensions.IsNotNullOrEmpty(props.ToolPanelState.ModuleButtons)) {
         props.ToolPanelState.ModuleButtons.forEach((module) => {

package/src/View/Layout/LayoutCloneButton.js

@@ -4,11 +4,12 @@ import SimpleButton from '../../components/SimpleButton';
 import { useAdaptable } from '../AdaptableContext';
 import { isPivotLayout } from '../../Utilities/isPivotLayout';
 import { ACCESS_LEVEL_READ_ONLY } from '../../Utilities/Constants/GeneralConstants';
+import { objectListActionButtonClassName } from '../Components/AdaptableObjectList/objectListActionButtonStyles';
 export const LayoutCloneButton = ({ data, accessLevel }) => {
     const adaptable = useAdaptable();
     const isDisabled = accessLevel === ACCESS_LEVEL_READ_ONLY;
     const handleClick = React.useCallback(() => {
         adaptable.api.layoutApi.showLayoutEditor(data.Name, isPivotLayout(data) ? 'pivot' : 'table', 'Clone');
     }, []);
-    return (_jsx(SimpleButton, { onClick: handleClick, disabled: isDisabled, variant: "text", icon: "clone", tooltip: "Clone" }));
+    return (_jsx(SimpleButton, { onClick: handleClick, disabled: isDisabled, variant: "text", iconSize: 24, icon: "clone", tooltip: "Clone", className: objectListActionButtonClassName('clone') }));
 };

package/src/View/Layout/Wizard/sections/RowSummarySection.js

@@ -138,7 +138,7 @@ const RowSummaryEditorForm = React.memo(({ rowSummary, onChange, availableScalar
             sortUnorderedItems: false,
         }).map((colId) => adaptable.api.columnApi.getColumnWithColumnId(colId));
     }, [rowSummary.ColumnsMap]);
-    return (_jsxs(Box, { className: "twa:flex twa:flex-col twa:gap-3 twa:h-full twa:min-h-0 twa:overflow-hidden", children: [_jsxs(FormLayout, { children: [_jsx(FormRow, { label: "Position", children: _jsx(SingleSelect, { items: [
+    return (_jsxs(Box, { className: "twa:flex twa:flex-col twa:gap-3 twa:h-full twa:overflow-hidden", children: [_jsxs(FormLayout, { children: [_jsx(FormRow, { label: "Position", children: _jsx(SingleSelect, { items: [
                                 {
                                     label: 'Top',
                                     value: 'Top',
@@ -157,7 +157,7 @@ const RowSummaryEditorForm = React.memo(({ rowSummary, onChange, availableScalar
                                     ...rowSummary,
                                     IncludeOnlyFilteredRows,
                                 });
-                            }, children: "Include Only Filtered Rows" }) })] }), _jsxs(Card, { shadow: false, className: "twa:flex-1 twa:min-h-0 twa:overflow-hidden twa:flex twa:flex-col", children: [_jsxs(Card.Title, { children: [_jsx(Box, { className: "twa:font-medium", children: "Column Aggregations" }), _jsx(Box, { className: "twa:text-xs twa:opacity-70 twa:font-normal twa:max-w-[520px]", children: "Select columns and choose an aggregation function for each" })] }), _jsx(Card.Body, { className: "twa:flex-1 twa:min-h-0 twa:overflow-hidden twa:p-1", children: _jsx(ValueSelector, { style: { minHeight: 0, maxHeight: '100%' }, showFilterInput: true, toggleSelectionOnRowClick: false, filter: columnFilter, toIdentifier: (column) => column.columnId, toLabel: (option) => option.friendlyName ?? option.columnId, options: columns, optionLayout: "label-beside-checkbox", toListLabel: (column) => {
+                            }, children: "Include Only Filtered Rows" }) })] }), _jsxs(Card, { shadow: false, className: "twa:flex-1 twa:min-h-0 twa:overflow-hidden twa:flex twa:flex-col", children: [_jsxs(Card.Title, { children: [_jsx(Box, { className: "twa:font-medium", children: "Column Aggregations" }), _jsx(Box, { className: "twa:text-xs twa:opacity-70 twa:font-normal twa:max-w-[520px]", children: "Select columns and choose an aggregation function for each" })] }), _jsx(Card.Body, { className: "twa:flex-1 twa:min-h-0 twa:overflow-hidden twa:p-1", children: _jsx(ValueSelector, { showFilterInput: true, className: "twa:max-h-full twa:min-h-0", toggleSelectionOnRowClick: false, filter: columnFilter, toIdentifier: (column) => column.columnId, toLabel: (option) => option.friendlyName ?? option.columnId, options: columns, optionLayout: "label-beside-checkbox", toListLabel: (column) => {
                                 const label = column.friendlyName ?? column.columnId;
                                 const disabled = !(column.columnId in (rowSummary.ColumnsMap ?? {}));
                                 if (disabled) {
@@ -238,9 +238,9 @@ export const RowSummarySection = (props) => {
             }
         }
     };
-    return (_jsxs(Box, { className: cn(getWizardAccordionSectionClassName(hasExpandedCard, expandedFillsSpace), 'twa:p-3'), children: [_jsx(Box, { className: "twa:text-xs twa:opacity-70 twa:mb-2 twa:max-w-[520px] twa:shrink-0", children: "Add summary rows at the top or bottom of the grid with aggregated column values" }), _jsx(Flex, { className: "twa:justify-end twa:mb-2 twa:shrink-0", children: _jsx(ButtonNew, { onClick: handleAddRowSummary, children: "Add Row Summary" }) }), _jsx(Flex, { flexDirection: "column", className: "twa:gap-3 twa:min-h-0", children: rowSummaries.map((rowSummary, index) => {
+    return (_jsxs(Box, { className: cn(getWizardAccordionSectionClassName(hasExpandedCard, expandedFillsSpace), 'twa:p-3'), children: [_jsx(Box, { className: "twa:text-xs twa:opacity-70 twa:mb-2 twa:max-w-[520px] twa:shrink-0", children: "Add summary rows at the top or bottom of the grid with aggregated column values" }), _jsx(Flex, { className: "twa:justify-end twa:mb-2 twa:shrink-0", children: _jsx(ButtonNew, { onClick: handleAddRowSummary, children: "Add Row Summary" }) }), _jsx(Flex, { flexDirection: "column", className: "twa:gap-3 twa:min-h-0 twa:flex-1 twa:overflow-y-auto", children: rowSummaries.map((rowSummary, index) => {
                     const cardBinding = bindCard(rowSummaryCardId(index), { fillAvailable: true });
-                    return (_jsx(CollapsibleWizardCard, { ...cardBinding, surface: "panel", "data-name": `row-summary-${index}`, title: `Row Summary ${index + 1}`, help: "Configure position, filters, and column aggregations for this summary row", collapsedHelp: false, compactSummary: _jsx(RowSummaryPositionTag, { position: rowSummary.Position }), headerVisual: !cardBinding.expanded ? (_jsx(RowSummaryPositionTag, { position: rowSummary.Position })) : undefined, headerActions: _jsxs(_Fragment, { children: [cardBinding.expanded ? (_jsx(SuspendToggleButton, { iconSize: 26, className: objectListActionButtonClassName('suspend'), onSuspend: () => {
+                    return (_jsx(CollapsibleWizardCard, { ...cardBinding, surface: "panel", "data-name": `row-summary-${index}`, title: `Row Summary ${index + 1}`, help: "Configure position, filters, and column aggregations for this summary row", collapsedHelp: false, compactSummary: _jsx(RowSummaryPositionTag, { position: rowSummary.Position }), headerVisual: !cardBinding.expanded ? (_jsx(RowSummaryPositionTag, { position: rowSummary.Position })) : undefined, headerActions: _jsxs(_Fragment, { children: [cardBinding.expanded ? (_jsx(SuspendToggleButton, { className: objectListActionButtonClassName('suspend'), onSuspend: () => {
                                         const newSummaries = [...rowSummaries];
                                         newSummaries[index] = { ...rowSummary, IsSuspended: true };
                                         props.onChange({ ...layout, RowSummaries: newSummaries });
@@ -248,7 +248,7 @@ export const RowSummarySection = (props) => {
                                         const newSummaries = [...rowSummaries];
                                         newSummaries[index] = { ...rowSummary, IsSuspended: false };
                                         props.onChange({ ...layout, RowSummaries: newSummaries });
-                                    }, suspendableObject: rowSummary })) : null, _jsx(SimpleButton, { icon: "delete", variant: "text", tooltip: "Delete row summary", className: objectListActionButtonClassName('delete'), onClick: () => handleDeleteRowSummary(index) })] }), summary: _jsx(RowSummaryCardSummary, { rowSummary: rowSummary }), className: "twa:overflow-hidden twa:flex twa:flex-col", bodyClassName: "twa:min-h-[200px] twa:max-h-[420px] twa:overflow-hidden twa:flex twa:flex-col twa:!pt-0", children: _jsx(RowSummaryEditorForm, { rowSummary: rowSummary, availableScalarExpressions: availableScalarExpressions, onChange: (nextRowSummary) => {
+                                    }, suspendableObject: rowSummary })) : null, _jsx(SimpleButton, { icon: "delete", variant: "text", tooltip: "Delete row summary", className: objectListActionButtonClassName('delete'), onClick: () => handleDeleteRowSummary(index) })] }), summary: _jsx(RowSummaryCardSummary, { rowSummary: rowSummary }), className: cn('twa:overflow-hidden twa:flex twa:flex-col', cardBinding.expanded && 'twa:min-h-[500px]'), bodyClassName: " twa:overflow-hidden twa:flex twa:flex-col twa:pt-0!", children: _jsx(RowSummaryEditorForm, { rowSummary: rowSummary, availableScalarExpressions: availableScalarExpressions, onChange: (nextRowSummary) => {
                                 const newSummaries = [...rowSummaries];
                                 newSummaries[index] = nextRowSummary;
                                 props.onChange({

package/src/View/StatusBar/StatusBarPopup.js

@@ -47,18 +47,22 @@ export const StatusBarPopup = (props) => {
                 moduleShortcutIds.push(item.Id);
             }
         });
+        // Roughly balance the two boxes by item count (~10 panels vs ~17 shortcuts)
+        // so the wider list gets the extra room and they feel more even.
         return [
             {
                 listId: 'UNUSED-PANELS',
                 title: 'Status Panels',
                 help: 'Fully featured actionable controls',
                 items: statusPanelIds,
+                flex: 40,
             },
             {
                 listId: 'UNUSED-SHORTCUTS',
                 title: 'Module Shortcuts',
                 help: 'Buttons to open Module Status Panel',
                 items: moduleShortcutIds,
+                flex: 60,
             },
         ];
     }, [availableItems, adaptable]);

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

@@ -21,7 +21,6 @@ import { BadgePillStyleEditor, getBadgePillStyleSummaryItems } from './BadgePill
 import { getCellBoxStyleSummaryItems, getCellFontStyleSummaryItems, StyledColumnCellStyleEditor, } from './StyledColumnSliceStyleEditors';
 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';
@@ -229,7 +228,7 @@ export const StyledColumnBadgeSection = (props) => {
             }
         }
     };
-    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) => {
+    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 twa:overflow-y-auto", children: badges.map((badge, index) => {
                     const handleEditBadge = (nextBadge) => {
                         const newBadges = [...badges];
                         newBadges[index] = nextBadge;
@@ -285,7 +284,7 @@ export const StyledColumnBadgeStyleSection = (props) => {
                                             delete cleaned.Cell;
                                             props.onChange({ ...data, BadgeStyle: cleaned });
                                         }
-                                    } }) })] })] }), _jsx(StyledColumnBadgePreviewCard, { data: data })] }));
+                                    } }) })] })] })] }));
 };
 export const renderBadgeStyleSummary = (styledColumn, api) => {
     const items = getStyledColumnBadgeStyleViewValues(styledColumn, api);

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

@@ -12,7 +12,6 @@ import { Box, Flex } from '../../../components/Flex';
 import { getCellBoxStyleSummaryItems, StyledColumnCellStyleEditor, } from './StyledColumnSliceStyleEditors';
 import { Card } from '../../../components/Card';
 import ErrorBox from '../../../components/ErrorBox';
-import { StyledColumnSparklinePreviewCard } from './StyledColumnWizardStyleSection/Components/StyledColumnSparklinePreview';
 const STYLE_FORM_SIZES = ['200px', '1fr'];
 /** Sentinel for the theme dropdown — persisted options omit `theme` when this is chosen. */
 const SPARKLINE_CUSTOM_COLOURS_THEME = '__custom__';
@@ -167,7 +166,7 @@ export const StyledColumnSparklineSettingsSection = ({ onChange }) => {
                                     delete sparkStyle.Cell;
                                 }
                                 onChange({ ...data, SparklineStyle: sparkStyle });
-                            } }) })] }), _jsx(StyledColumnSparklinePreviewCard, { data: data })] }));
+                            } }) })] })] }));
 };
 const SparklineObjectArrayProperties = ({ options, onChange, }) => {
     const { data, api } = useOnePageAdaptableWizardContext();

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

@@ -1,4 +1,4 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx } from "react/jsx-runtime";
 import { useState } from 'react';
 import { useDispatch, useSelector } from 'react-redux';
 import { OnePageAdaptableWizard, OnePageWizardSummary, } from '../../Wizard/OnePageAdaptableWizard';
@@ -17,14 +17,14 @@ import { isValidIconStyleMappings, renderStyledColumnIconStyleSummary, renderSty
 import { ObjectTagsWizardSection, renderObjectTagsSummary, } from '../../Wizard/ObjectTagsWizardSection';
 import { renderBadgeStyleSummary, renderBadgeSummary, StyledColumnBadgeStyleSection, StyledColumnBadgeSection, } from './StyledColumnBadgeSection';
 import { Box } from '../../../components/Flex';
-import { StyledColumnGradientPreviewCard } from './StyledColumnWizardStyleSection/Components/StyledColumnGradientPreview';
-import { StyledColumnPercentBarPreviewCard } from './StyledColumnWizardStyleSection/Components/StyledColumnPercentBarPreview';
-import { StyledColumnBadgePreviewCard } from './StyledColumnWizardStyleSection/Components/StyledColumnBadgePreview';
-import { StyledColumnRatingPreviewCard } from './StyledColumnWizardStyleSection/Components/StyledColumnRatingPreview';
-import { StyledColumnIconPreviewCard } from './StyledColumnWizardStyleSection/Components/StyledColumnIconPreview';
-import { StyledColumnBulletPreviewCard } from './StyledColumnWizardStyleSection/Components/StyledColumnBulletPreview';
-import { StyledColumnRangeBarPreviewCard } from './StyledColumnWizardStyleSection/Components/StyledColumnRangeBarPreview';
-import { StyledColumnSparklinePreviewCard } from './StyledColumnWizardStyleSection/Components/StyledColumnSparklinePreview';
+import { StyledColumnGradientPreview } from './StyledColumnWizardStyleSection/Components/StyledColumnGradientPreview';
+import { StyledColumnPercentBarPreview } from './StyledColumnWizardStyleSection/Components/StyledColumnPercentBarPreview';
+import { StyledColumnBadgePreview } from './StyledColumnWizardStyleSection/Components/StyledColumnBadgePreview';
+import { StyledColumnRatingPreview } from './StyledColumnWizardStyleSection/Components/StyledColumnRatingPreview';
+import { StyledColumnIconPreview } from './StyledColumnWizardStyleSection/Components/StyledColumnIconPreview';
+import { StyledColumnBulletPreview } from './StyledColumnWizardStyleSection/Components/StyledColumnBulletPreview';
+import { StyledColumnRangeBarPreview } from './StyledColumnWizardStyleSection/Components/StyledColumnRangeBarPreview';
+import { StyledColumnSparklinePreview } from './StyledColumnWizardStyleSection/Components/StyledColumnSparklinePreview';
 /**
  * Mirrors the migration default in `VersionUpgrade23.patchStyledColumnName` and
  * the auto-fill logic in `StyledColumnWizardTypeSection` so users opening the
@@ -265,12 +265,41 @@ export const StyledColumnWizard = (props) => {
             render: () => (_jsx(Box, { className: "twa:p-2", children: _jsx(StyledColumnBadgeStyleSection, { onChange: setStyledColumn }) })),
         });
     }
+    // Persistent live preview shown at the top of the section content on
+    // every step. We render the bare preview (no Card chrome) so it sits
+    // flush above the form. Only one of these can apply at a time — the
+    // styled column owns exactly one of these style buckets.
+    let headerPreview = null;
+    if (styledColumn.GradientStyle) {
+        headerPreview = _jsx(StyledColumnGradientPreview, { data: styledColumn });
+    }
+    else if (styledColumn.PercentBarStyle) {
+        headerPreview = _jsx(StyledColumnPercentBarPreview, { data: styledColumn });
+    }
+    else if (styledColumn.BadgeStyle) {
+        headerPreview = _jsx(StyledColumnBadgePreview, { data: styledColumn });
+    }
+    else if (styledColumn.RatingStyle) {
+        headerPreview = _jsx(StyledColumnRatingPreview, { data: styledColumn });
+    }
+    else if (styledColumn.IconStyle) {
+        headerPreview = _jsx(StyledColumnIconPreview, { data: styledColumn });
+    }
+    else if (styledColumn.BulletChartStyle) {
+        headerPreview = _jsx(StyledColumnBulletPreview, { data: styledColumn });
+    }
+    else if (styledColumn.RangeBarStyle) {
+        headerPreview = _jsx(StyledColumnRangeBarPreview, { data: styledColumn });
+    }
+    else if (styledColumn.SparklineStyle) {
+        headerPreview = _jsx(StyledColumnSparklinePreview, { data: styledColumn });
+    }
     return (_jsx(OnePageAdaptableWizard, { defaultCurrentSectionName: defaultCurrentSectionName, moduleInfo: props.moduleInfo, 
         // Display the picked type in the header (e.g. "Gradient Column",
         // "Percent Bar Column") so the user always knows which kind of
         // column they're configuring. Falls back to "Styled Column"
         // before a type has been selected.
-        moduleName: getStyledColumnWizardTitle(styledColumn), data: styledColumn, onFinish: handleFinish, onHide: props.onCloseWizard, sections: [
+        moduleName: getStyledColumnWizardTitle(styledColumn), data: styledColumn, headerPreview: headerPreview, onFinish: handleFinish, onHide: props.onCloseWizard, sections: [
             {
                 details: 'Enter a Name and select a Styled Column Type',
                 isValid: (data) => {
@@ -308,7 +337,7 @@ export const StyledColumnWizard = (props) => {
                 title: 'Summary',
                 details: 'Review your Styled Column',
                 render: () => {
-                    return (_jsxs(Box, { className: "twa:p-2 twa:flex twa:flex-col twa:gap-3", children: [_jsx(OnePageWizardSummary, {}), styledColumn.GradientStyle && (_jsx(StyledColumnGradientPreviewCard, { data: styledColumn })), styledColumn.PercentBarStyle && (_jsx(StyledColumnPercentBarPreviewCard, { data: styledColumn })), styledColumn.BadgeStyle && (_jsx(StyledColumnBadgePreviewCard, { data: styledColumn })), styledColumn.RatingStyle && (_jsx(StyledColumnRatingPreviewCard, { data: styledColumn })), styledColumn.IconStyle && (_jsx(StyledColumnIconPreviewCard, { data: styledColumn })), styledColumn.BulletChartStyle && (_jsx(StyledColumnBulletPreviewCard, { data: styledColumn })), styledColumn.RangeBarStyle && (_jsx(StyledColumnRangeBarPreviewCard, { data: styledColumn })), styledColumn.SparklineStyle && (_jsx(StyledColumnSparklinePreviewCard, { data: styledColumn }))] }));
+                    return (_jsx(Box, { className: "twa:p-2 twa:flex twa:flex-col twa:gap-3", children: _jsx(OnePageWizardSummary, {}) }));
                 },
             },
         ] }));

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

@@ -12,7 +12,6 @@ import { useOnePageAdaptableWizardContext } from '../../Wizard/OnePageAdaptableW
 import AdaptableInput from '../../Components/AdaptableInput';
 import { Box, Flex } from '../../../components/Flex';
 import { BulletRangesSummaryPreview } from './StyledColumnWizardStyleSection/Components/BulletRangesSummaryPreview';
-import { StyledColumnBulletPreviewCard } from './StyledColumnWizardStyleSection/Components/StyledColumnBulletPreview';
 import { SingleSelect } from '../../../components/NewSelect';
 import { getCellFontStyleSummaryItems, StyledColumnFontStyleEditor, } from './StyledColumnSliceStyleEditors';
 import { Card } from '../../../components/Card';
@@ -397,5 +396,5 @@ export const StyledColumnWizardBulletSection = (props) => {
                                             delete cleaned.Font;
                                             props.onChange({ ...data, BulletChartStyle: cleaned });
                                         }
-                                    } }) })] })] }), _jsxs(Card, { shadow: false, className: "twa:mb-3", children: [_jsxs(Card.Title, { children: [_jsx(Box, { className: "twa:font-medium", children: "Tooltip" }), _jsx(Box, { className: "twa:text-xs twa:opacity-70 twa:font-normal twa:max-w-[520px]", children: "Choose whether to display a tooltip" })] }), _jsx(Card.Body, { children: _jsx(FormLayout, { sizes: [...BULLET_STYLE_FORM_SIZES], children: _jsxs(FormRow, { label: "Tooltip Display:", children: [_jsx(CheckBox, { disabled: disabled, checked: bullet.ToolTipText?.includes('CellValue'), onChange: (checked) => toggleToolTipText('CellValue', checked), children: "Cell Value" }), ' ', _jsx(CheckBox, { disabled: disabled, className: "twa:ml-3", checked: bullet.ToolTipText?.includes('PercentageValue'), onChange: (checked) => toggleToolTipText('PercentageValue', checked), children: "Percent Value" })] }) }) })] }), _jsx(StyledColumnBulletPreviewCard, { data: data })] }));
+                                    } }) })] })] }), _jsxs(Card, { shadow: false, className: "twa:mb-3", children: [_jsxs(Card.Title, { children: [_jsx(Box, { className: "twa:font-medium", children: "Tooltip" }), _jsx(Box, { className: "twa:text-xs twa:opacity-70 twa:font-normal twa:max-w-[520px]", children: "Choose whether to display a tooltip" })] }), _jsx(Card.Body, { children: _jsx(FormLayout, { sizes: [...BULLET_STYLE_FORM_SIZES], children: _jsxs(FormRow, { label: "Tooltip Display:", children: [_jsx(CheckBox, { disabled: disabled, checked: bullet.ToolTipText?.includes('CellValue'), onChange: (checked) => toggleToolTipText('CellValue', checked), children: "Cell Value" }), ' ', _jsx(CheckBox, { disabled: disabled, className: "twa:ml-3", checked: bullet.ToolTipText?.includes('PercentageValue'), onChange: (checked) => toggleToolTipText('PercentageValue', checked), children: "Percent Value" })] }) }) })] })] }));
 };

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

@@ -11,7 +11,6 @@ import { DEFAULT_GRADIENT_MAX_ALPHA, DEFAULT_GRADIENT_MIN_ALPHA, } from '../../.
 import { getCellFontStyleSummaryItems, StyledColumnFontStyleEditor, } from './StyledColumnSliceStyleEditors';
 import { Card } from '../../../components/Card';
 import { renderSummaryStringTags } from '../../Wizard/SummaryColorTag';
-import { StyledColumnGradientPreviewCard } from './StyledColumnWizardStyleSection/Components/StyledColumnGradientPreview';
 const STYLE_FORM_SIZES = ['200px', '1fr'];
 function formatGradientToolTipSummary(opts) {
     return opts
@@ -110,5 +109,5 @@ export const StyledColumnWizardGradientSection = (props) => {
                                 else {
                                     patchGradient({ AutoContrastText: true });
                                 }
-                            }, children: "Make text readable on tinted backgrounds" }) })] }), _jsxs(Card, { shadow: false, className: "twa:mb-3", children: [_jsxs(Card.Title, { children: [_jsx(Box, { className: "twa:font-medium", children: "Tooltip" }), _jsx(Box, { className: "twa:text-xs twa:opacity-70 twa:font-normal twa:max-w-[600px]", children: "Set Tooltip properties" })] }), _jsx(Card.Body, { children: _jsx(FormLayout, { sizes: [...STYLE_FORM_SIZES], children: _jsx(FormRow, { label: "Tooltip:", children: _jsxs(Box, { className: "twa:ml-2", children: [_jsx(CheckBox, { disabled: disabled, checked: gs.ToolTipText?.includes('CellValue'), onChange: (checked) => onToolTipTextChanged('CellValue', checked), children: "Cell Value" }), ' ', _jsx(CheckBox, { disabled: disabled, className: "twa:ml-3", checked: gs.ToolTipText?.includes('PercentageValue'), onChange: (checked) => onToolTipTextChanged('PercentageValue', checked), children: "Percent along scale" })] }) }) }) })] }), _jsxs(Card, { shadow: false, children: [_jsxs(Card.Title, { children: [_jsx(Box, { className: "twa:font-medium", children: "Font" }), _jsx(Box, { className: "twa:text-xs twa:opacity-70 twa:font-normal twa:max-w-[480px]", children: "Optional font properties (takes precedence over Format Column)" })] }), _jsx(Card.Body, { children: _jsx(StyledColumnFontStyleEditor, { api: api, disabled: disabled, value: gs.Font, onChange: onFontChange }) })] }), _jsx(StyledColumnGradientPreviewCard, { data: data }), !data.ColumnId && (_jsx(ErrorBox, { className: "twa:mt-2", children: "Select a column before changing Gradient style." }))] }));
+                            }, children: "Make text readable on tinted backgrounds" }) })] }), _jsxs(Card, { shadow: false, className: "twa:mb-3", children: [_jsxs(Card.Title, { children: [_jsx(Box, { className: "twa:font-medium", children: "Tooltip" }), _jsx(Box, { className: "twa:text-xs twa:opacity-70 twa:font-normal twa:max-w-[600px]", children: "Set Tooltip properties" })] }), _jsx(Card.Body, { children: _jsx(FormLayout, { sizes: [...STYLE_FORM_SIZES], children: _jsx(FormRow, { label: "Tooltip:", children: _jsxs(Box, { className: "twa:ml-2", children: [_jsx(CheckBox, { disabled: disabled, checked: gs.ToolTipText?.includes('CellValue'), onChange: (checked) => onToolTipTextChanged('CellValue', checked), children: "Cell Value" }), ' ', _jsx(CheckBox, { disabled: disabled, className: "twa:ml-3", checked: gs.ToolTipText?.includes('PercentageValue'), onChange: (checked) => onToolTipTextChanged('PercentageValue', checked), children: "Percent along scale" })] }) }) }) })] }), _jsxs(Card, { shadow: false, children: [_jsxs(Card.Title, { children: [_jsx(Box, { className: "twa:font-medium", children: "Font" }), _jsx(Box, { className: "twa:text-xs twa:opacity-70 twa:font-normal twa:max-w-[480px]", children: "Optional font properties (takes precedence over Format Column)" })] }), _jsx(Card.Body, { children: _jsx(StyledColumnFontStyleEditor, { api: api, disabled: disabled, value: gs.Font, onChange: onFontChange }) })] }), !data.ColumnId && (_jsx(ErrorBox, { className: "twa:mt-2", children: "Select a column before changing Gradient style." }))] }));
 };

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

@@ -19,7 +19,6 @@ import { resolveEffectiveIconStyleMappings, resolveIconStyleMappingsForSummaryPr
 import { Card } from '../../../components/Card';
 import { renderSummaryStringTags } from '../../Wizard/SummaryColorTag';
 import { getCellBoxStyleSummaryItems, getCellFontStyleSummaryItems, StyledColumnCellStyleEditor, StyledColumnFontStyleEditor, } from './StyledColumnSliceStyleEditors';
-import { StyledColumnIconPreviewCard } from './StyledColumnWizardStyleSection/Components/StyledColumnIconPreview';
 import { wizardSelectionSimpleButtonProps } from '../../../Utilities/wizardSelection';
 const STYLE_FORM_SIZES = ['200px', '1fr'];
 const detectIconKind = (spec) => {
@@ -339,7 +338,7 @@ export const StyledColumnWizardIconSection = (props) => {
                                                     { value: 'After', label: 'After' },
                                                     { value: 'Above', label: 'Above' },
                                                     { value: 'Below', label: 'Below' },
-                                                ] }) }) })] }), _jsx(Box, { className: `twa:mt-3 twa:pt-3 twa:border-t twa:border-foreground/15 ${cellTextDisabled ? 'twa:opacity-50' : ''}`, children: _jsx(StyledColumnFontStyleEditor, { api: api, disabled: disabled || cellTextDisabled, value: iconStyle.Font, onChange: onFontChange }) })] })] }), _jsxs(Card, { shadow: false, className: "twa:mb-3", children: [_jsxs(Card.Title, { children: [_jsx(Box, { className: "twa:font-medium", children: "Tooltip" }), _jsx(Box, { className: "twa:text-xs twa:opacity-70 twa:font-normal twa:max-w-[520px]", children: "Choose whether and how to display a tooltip" })] }), _jsx(Card.Body, { children: _jsx(FormLayout, { sizes: [...STYLE_FORM_SIZES], children: _jsxs(FormRow, { label: "Tooltip Display:", children: [_jsx(CheckBox, { checked: toolTipText.includes('CellValue'), onChange: (checked) => toggleToolTipText('CellValue', checked), children: "Cell Value" }), ' ', _jsx(CheckBox, { className: "twa:ml-3", checked: toolTipText.includes('IconDescription'), onChange: (checked) => toggleToolTipText('IconDescription', checked), children: "Description" })] }) }) })] }), _jsxs(Card, { shadow: false, children: [_jsxs(Card.Title, { children: [_jsx(Box, { className: "twa:font-medium", children: "Cell" }), _jsx(Box, { className: "twa:text-xs twa:opacity-70 twa:font-normal twa:max-w-[520px]", children: "Optional cell box styling (overrides Format Column properties)" })] }), _jsx(Card.Body, { children: _jsx(StyledColumnCellStyleEditor, { api: api, disabled: disabled, value: iconStyle.Cell, onChange: onCellChange }) })] }), _jsx(StyledColumnIconPreviewCard, { data: data })] }));
+                                                ] }) }) })] }), _jsx(Box, { className: `twa:mt-3 twa:pt-3 twa:border-t twa:border-foreground/15 ${cellTextDisabled ? 'twa:opacity-50' : ''}`, children: _jsx(StyledColumnFontStyleEditor, { api: api, disabled: disabled || cellTextDisabled, value: iconStyle.Font, onChange: onFontChange }) })] })] }), _jsxs(Card, { shadow: false, className: "twa:mb-3", children: [_jsxs(Card.Title, { children: [_jsx(Box, { className: "twa:font-medium", children: "Tooltip" }), _jsx(Box, { className: "twa:text-xs twa:opacity-70 twa:font-normal twa:max-w-[520px]", children: "Choose whether and how to display a tooltip" })] }), _jsx(Card.Body, { children: _jsx(FormLayout, { sizes: [...STYLE_FORM_SIZES], children: _jsxs(FormRow, { label: "Tooltip Display:", children: [_jsx(CheckBox, { checked: toolTipText.includes('CellValue'), onChange: (checked) => toggleToolTipText('CellValue', checked), children: "Cell Value" }), ' ', _jsx(CheckBox, { className: "twa:ml-3", checked: toolTipText.includes('IconDescription'), onChange: (checked) => toggleToolTipText('IconDescription', checked), children: "Description" })] }) }) })] }), _jsxs(Card, { shadow: false, children: [_jsxs(Card.Title, { children: [_jsx(Box, { className: "twa:font-medium", children: "Cell" }), _jsx(Box, { className: "twa:text-xs twa:opacity-70 twa:font-normal twa:max-w-[520px]", children: "Optional cell box styling (overrides Format Column properties)" })] }), _jsx(Card.Body, { children: _jsx(StyledColumnCellStyleEditor, { api: api, disabled: disabled, value: iconStyle.Cell, onChange: onCellChange }) })] })] }));
 };
 // ---------------------------------------------------------------------------
 // Icon picker — click-to-open popover (closes on outside click or system pick)

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

@@ -14,7 +14,6 @@ import AdaptableInput from '../../Components/AdaptableInput';
 import { Box, Flex } from '../../../components/Flex';
 import { SingleSelect } from '../../../components/NewSelect';
 import { RangeBarRangesSummaryPreview } from './StyledColumnWizardStyleSection/Components/RangeBarRangesSummaryPreview';
-import { StyledColumnRangeBarPreviewCard } from './StyledColumnWizardStyleSection/Components/StyledColumnRangeBarPreview';
 import { Card } from '../../../components/Card';
 import { renderSummaryStringTags } from '../../Wizard/SummaryColorTag';
 import { formatBarStyleCellTextLayoutSummary, getActiveBarStyleCellTextTokens, hasBarStyleCellTextConfigured, patchBarStyleCellTextPlacement, resolveBarStyleCellTextLayout, toggleBarStyleCellTextToken, } from '../../../Utilities/Helpers/StyledColumns/BarStylesHelper';
@@ -488,5 +487,5 @@ export const StyledColumnWizardRangeBarSection = (props) => {
                                                         { value: 'Clamp', label: 'Clamp to edge' },
                                                         { value: 'Overflow', label: 'Show outside' },
                                                         { value: 'Hide', label: 'Hide marker' },
-                                                    ] }) }) }), outOfRangeMode === 'Clamp' && (_jsx(FormRow, { label: `Out-of-range ${api.internalApi.getCorrectEnglishVariant('Colour')}:`, children: _jsx(OptionalColorPicker, { disabled: disabled, api: api, value: range.OutOfRange?.Color, defaultColor: "crimson", onChange: (c) => updateOutOfRangeProperties({ Color: c }) }) }))] }) })] }), _jsxs(Card, { shadow: false, children: [_jsxs(Card.Title, { children: [_jsx(Box, { className: "twa:font-medium", children: "Text & Tooltip" }), _jsx(Box, { className: "twa:text-xs twa:opacity-70 twa:font-normal twa:max-w-[520px]", children: "Optional cell-text overlay and AG Grid tooltip content." })] }), _jsx(Card.Body, { children: _jsxs(FormLayout, { sizes: [...RANGE_STYLE_FORM_SIZES], children: [_jsx(BarStyleCellTextLayoutEditor, { disabled: disabled, cellTextProperties: range.CellTextProperties, onToggle: toggleCellText, onPlacementChange: onCellTextPlacementChange }), _jsxs(FormRow, { label: "Tooltip Display:", children: [_jsx(CheckBox, { disabled: disabled, checked: range.ToolTipText?.includes('CellValue'), onChange: (checked) => toggleToolTipText('CellValue', checked), children: "Cell Value" }), ' ', _jsx(CheckBox, { disabled: disabled, className: "twa:ml-3", checked: range.ToolTipText?.includes('PercentageValue'), onChange: (checked) => toggleToolTipText('PercentageValue', checked), children: "Percent Value" })] })] }) })] }), _jsx(StyledColumnRangeBarPreviewCard, { data: data })] }))] }));
+                                                    ] }) }) }), outOfRangeMode === 'Clamp' && (_jsx(FormRow, { label: `Out-of-range ${api.internalApi.getCorrectEnglishVariant('Colour')}:`, children: _jsx(OptionalColorPicker, { disabled: disabled, api: api, value: range.OutOfRange?.Color, defaultColor: "crimson", onChange: (c) => updateOutOfRangeProperties({ Color: c }) }) }))] }) })] }), _jsxs(Card, { shadow: false, children: [_jsxs(Card.Title, { children: [_jsx(Box, { className: "twa:font-medium", children: "Text & Tooltip" }), _jsx(Box, { className: "twa:text-xs twa:opacity-70 twa:font-normal twa:max-w-[520px]", children: "Optional cell-text overlay and AG Grid tooltip content." })] }), _jsx(Card.Body, { children: _jsxs(FormLayout, { sizes: [...RANGE_STYLE_FORM_SIZES], children: [_jsx(BarStyleCellTextLayoutEditor, { disabled: disabled, cellTextProperties: range.CellTextProperties, onToggle: toggleCellText, onPlacementChange: onCellTextPlacementChange }), _jsxs(FormRow, { label: "Tooltip Display:", children: [_jsx(CheckBox, { disabled: disabled, checked: range.ToolTipText?.includes('CellValue'), onChange: (checked) => toggleToolTipText('CellValue', checked), children: "Cell Value" }), ' ', _jsx(CheckBox, { disabled: disabled, className: "twa:ml-3", checked: range.ToolTipText?.includes('PercentageValue'), onChange: (checked) => toggleToolTipText('PercentageValue', checked), children: "Percent Value" })] })] }) })] })] }))] }));
 };

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

@@ -11,7 +11,7 @@ import Input from '../../../components/Input';
 import { getCellBoxStyleSummaryItems, StyledColumnCellStyleEditor, } from './StyledColumnSliceStyleEditors';
 import { Card } from '../../../components/Card';
 import { renderSummaryStringTags } from '../../Wizard/SummaryColorTag';
-import { DEFAULT_RATING_GAP, DEFAULT_RATING_ICON, DEFAULT_RATING_MAX, DEFAULT_RATING_SIZE, StyledColumnRatingPreviewCard, } from './StyledColumnWizardStyleSection/Components/StyledColumnRatingPreview';
+import { DEFAULT_RATING_GAP, DEFAULT_RATING_ICON, DEFAULT_RATING_MAX, DEFAULT_RATING_SIZE, } from './StyledColumnWizardStyleSection/Components/StyledColumnRatingPreview';
 const STYLE_FORM_SIZES = ['200px', '1fr'];
 const ICON_CHOICES = [
     { value: 'Star', label: 'Star' },
@@ -188,5 +188,5 @@ export const StyledColumnWizardRatingSection = (props) => {
                                     delete cleaned.Cell;
                                     props.onChange({ ...data, RatingStyle: cleaned });
                                 }
-                            } }) })] }), _jsx(StyledColumnRatingPreviewCard, { data: data })] }));
+                            } }) })] })] }));
 };

package/src/View/StyledColumn/Wizard/StyledColumnWizardStyleSection/Components/StyledColumnBadgePreview.d.ts

@@ -8,6 +8,3 @@ import { StyledColumn } from '../../../../../types';
 export declare const StyledColumnBadgePreview: React.FunctionComponent<React.PropsWithChildren<{
     data: StyledColumn;
 }>>;
-export declare const StyledColumnBadgePreviewCard: React.FunctionComponent<React.PropsWithChildren<{
-    data: StyledColumn;
-}>>;

package/src/View/StyledColumn/Wizard/StyledColumnWizardStyleSection/Components/StyledColumnBadgePreview.js

@@ -1,17 +1,16 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx } from "react/jsx-runtime";
 import { DEFAULT_INTEGER_DISPLAY_VALUE, DEFAULT_STRING_DISPLAY_VALUE, } from '../../../../../Utilities/Constants/GeneralConstants';
 import { convertAdaptableStyleToCSS } from '../../../../../Utilities/Helpers/StyleHelper';
 import { useAdaptable } from '../../../../AdaptableContext';
 import { Badge } from '../../../../Components/Badge';
 import { Box } from '../../../../../components/Flex';
-import { Card } from '../../../../../components/Card';
 import { Tag } from '../../../../../components/Tag';
 const OVERFLOW_CLASS = {
     Truncate: 'ab-Badge__wrapper--truncate',
     Wrap: 'ab-Badge__wrapper--wrap',
     Scroll: 'ab-Badge__wrapper--scroll',
 };
-const PREVIEW_CELL_CLASS = 'ab-BadgePreviewCell twa:min-w-[140px] twa:min-h-[32px] twa:px-2 twa:py-1 twa:rounded-standard twa:border twa:border-[color-mix(in_srgb,var(--ab-color-foreground)_15%,transparent)]';
+const PREVIEW_CELL_CLASS = 'ab-BadgePreviewCell twa:bg-background twa:text-foreground twa:min-w-[140px] twa:min-h-[32px] twa:px-2 twa:py-1 twa:rounded-standard twa:border twa:border-[color-mix(in_srgb,var(--ab-color-foreground)_15%,transparent)]';
 const resolveBadgeRowJustify = (alignment) => {
     switch (alignment) {
         case 'Center':
@@ -42,7 +41,9 @@ export const StyledColumnBadgePreview = ({ data }) => {
     const cellStyle = badgeStyle.Cell ? convertAdaptableStyleToCSS(badgeStyle.Cell) : undefined;
     const dataType = adaptable.api.columnApi.getColumnDataTypeForColumnId(data.ColumnId);
     const wrapperStyle = {
-        ...(spacing != null ? { ['--ab-cmp-badge__spacing']: `${spacing}px` } : {}),
+        ...(spacing != null
+            ? { ['--ab-cmp-badge__spacing']: `${spacing}px` }
+            : {}),
         ...(rowJustify
             ? {
                 justifyContent: rowJustify,
@@ -60,4 +61,3 @@ export const StyledColumnBadgePreview = ({ data }) => {
                 return (_jsx(Badge, { icon: iconProps?.Icon, pillStyle: badge.PillStyle, iconPosition: iconProps?.Position, shape: badge.Shape, density: badgeStyle.Density ?? 'Normal', iconGap: iconProps?.Gap, children: badgeValue }, index));
             }) }) }));
 };
-export const StyledColumnBadgePreviewCard = ({ data }) => (_jsxs(Card, { shadow: false, children: [_jsx(Card.Title, { children: _jsx(Box, { className: "twa:font-medium", children: "Preview" }) }), _jsx(Card.Body, { className: "twa:p-1", children: _jsx(StyledColumnBadgePreview, { data: data }) })] }));

package/src/View/StyledColumn/Wizard/StyledColumnWizardStyleSection/Components/StyledColumnBulletPreview.d.ts

@@ -4,7 +4,4 @@ import { BulletChartStyle } from '../../../../../AdaptableState/StyledColumns/Bu
 export declare const StyledColumnBulletPreview: React.FunctionComponent<React.PropsWithChildren<{
     data: StyledColumn;
 }>>;
-export declare const StyledColumnBulletPreviewCard: React.FunctionComponent<React.PropsWithChildren<{
-    data: StyledColumn;
-}>>;
 export declare const hasBulletChartRangesConfigured: (bullet: BulletChartStyle | undefined) => boolean;

package/src/View/StyledColumn/Wizard/StyledColumnWizardStyleSection/Components/StyledColumnBulletPreview.js

@@ -2,7 +2,6 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { convertAdaptableStyleToCSS } from '../../../../../Utilities/Helpers/StyleHelper';
 import { buildBarStyleCellTextLabels, getBarStyleCellTextSlotPresence, hasBarStyleCellTextConfigured, } from '../../../../../Utilities/Helpers/StyledColumns/BarStylesHelper';
 import { Box, Flex } from '../../../../../components/Flex';
-import { Card } from '../../../../../components/Card';
 import { Tag } from '../../../../../components/Tag';
 import { StyledColumnBulletChartListPreview } from './StyledColumnChartListPreviews';
 import { BarStyleCellTextPreview } from './BarStyleCellTextPreview';
@@ -50,5 +49,4 @@ export const StyledColumnBulletPreview = ({ data }) => {
     }
     return (_jsx(Box, { className: PREVIEW_CELL_CLASS, children: _jsx(BulletChartPreviewContent, { bullet: bullet }) }));
 };
-export const StyledColumnBulletPreviewCard = ({ data }) => (_jsxs(Card, { shadow: false, children: [_jsx(Card.Title, { children: _jsx(Box, { className: "twa:font-medium", children: "Preview" }) }), _jsx(Card.Body, { className: "twa:p-1", children: _jsx(StyledColumnBulletPreview, { data: data }) })] }));
 export const hasBulletChartRangesConfigured = (bullet) => Boolean(bullet?.CellRanges?.length);

package/src/View/StyledColumn/Wizard/StyledColumnWizardStyleSection/Components/StyledColumnGradientPreview.d.ts

@@ -5,6 +5,3 @@ export declare const StyledColumnGradientPreview: React.FunctionComponent<React.
     data: StyledColumn;
     api?: AdaptableApi;
 }>>;
-export declare const StyledColumnGradientPreviewCard: React.FunctionComponent<React.PropsWithChildren<{
-    data: StyledColumn;
-}>>;

package/src/View/StyledColumn/Wizard/StyledColumnWizardStyleSection/Components/StyledColumnGradientPreview.js

@@ -1,6 +1,5 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx } from "react/jsx-runtime";
 import { Box, Flex } from '../../../../../components/Flex';
-import { Card } from '../../../../../components/Card';
 import { Tag } from '../../../../../components/Tag';
 import { useAdaptable } from '../../../../AdaptableContext';
 import { getGradientPreviewCellStyle, getGradientPreviewSampleValues, hasGradientRangesConfigured, } from '../../../../../Utilities/Helpers/StyledColumns/GradientStyleHelper';
@@ -27,4 +26,3 @@ export const StyledColumnGradientPreview = ({ data, api: apiProp }) => {
     const rowNode = api.gridApi?.getRowNodeForIndex(0) ?? null;
     return (_jsx(Flex, { alignItems: "stretch", className: "twa:flex-wrap twa:gap-2", children: sampleValues.map((value) => (_jsx(Box, { className: "ab-GradientPreviewCell twa:px-2 twa:py-1 twa:min-w-[56px] twa:text-2 twa:text-center twa:rounded-standard twa:border twa:border-[color-mix(in_srgb,var(--ab-color-foreground)_15%,transparent)]", style: getGradientPreviewCellStyle(value, data, api, rowNode), children: formatPreviewValue(value) }, value))) }));
 };
-export const StyledColumnGradientPreviewCard = ({ data }) => (_jsxs(Card, { shadow: false, children: [_jsx(Card.Title, { children: _jsx(Box, { className: "twa:font-medium", children: "Preview" }) }), _jsx(Card.Body, { className: "twa:p-1", children: _jsx(StyledColumnGradientPreview, { data: data }) })] }));

package/src/View/StyledColumn/Wizard/StyledColumnWizardStyleSection/Components/StyledColumnIconPreview.d.ts

@@ -5,6 +5,3 @@ export declare const DEFAULT_ICON_STYLE_GAP = 4;
 export declare const StyledColumnIconPreview: React.FunctionComponent<React.PropsWithChildren<{
     data: StyledColumn;
 }>>;
-export declare const StyledColumnIconPreviewCard: React.FunctionComponent<React.PropsWithChildren<{
-    data: StyledColumn;
-}>>;