@adaptabletools/adaptable-cjs 23.0.0-canary.9 → 23.0.1

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-cjs",
-  "version": "23.0.0-canary.9",
+  "version": "23.0.1",
   "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

@@ -15,10 +15,9 @@ const ButtonEdit_1 = require("../Buttons/ButtonEdit");
 const ButtonShare_1 = require("../Buttons/ButtonShare");
 const SuspendToggleButton_1 = require("../Buttons/SuspendToggleButton/SuspendToggleButton");
 const Flex_1 = require("../../../components/Flex");
-const twMerge_1 = require("../../../twMerge");
 const Tag_1 = require("../../../components/Tag/Tag");
 const objectListActionButtonStyles_1 = require("./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`;
 const AdaptableObjectListItemView = (props) => {
@@ -28,8 +27,7 @@ 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,
@@ -40,8 +38,8 @@ const AdaptableObjectListItemView = (props) => {
             dispatch(props.deleteAction);
         };
     }
-    const deleteActionButton = ((0, jsx_runtime_1.jsx)(ButtonDelete_1.ButtonDelete, { ...deleteActionProps, className: (0, twMerge_1.twMerge)((0, objectListActionButtonStyles_1.objectListActionButtonClassName)('delete'), deleteActionProps.className) }));
-    return ((0, jsx_runtime_1.jsxs)(Flex_1.Flex, { "data-name": "adaptable-object-list-item", "data-value": props.abObject.Uuid, as: "li", className: (0, twMerge_1.twMerge)(baseClassName, 'twa:rounded-standard', props.className), style: props.style, children: [(0, jsx_runtime_1.jsx)(Flex_1.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 = ((0, jsx_runtime_1.jsx)(ButtonDelete_1.ButtonDelete, { ...deleteActionProps, className: (0, utils_1.cn)((0, objectListActionButtonStyles_1.objectListActionButtonClassName)('delete'), deleteActionProps.className) }));
+    return ((0, jsx_runtime_1.jsxs)(Flex_1.Flex, { "data-name": "adaptable-object-list-item", "data-value": props.abObject.Uuid, as: "li", className: (0, utils_1.cn)(baseClassName, 'twa:rounded-standard', props.className), style: props.style, children: [(0, jsx_runtime_1.jsx)(Flex_1.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

@@ -2,5 +2,5 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.objectListActionButtonClassName = void 0;
 const utils_1 = require("../../../lib/utils");
-const objectListActionButtonClassName = (kind, className) => (0, utils_1.cn)('ab-ObjectListActionButton', `ab-ObjectListActionButton--${kind}`, className);
+const objectListActionButtonClassName = (kind, className) => (0, utils_1.cn)('ab-ObjectListActionButton', `ab-ObjectListActionButton--${kind}`, 'twa:shadow-sm', className);
 exports.objectListActionButtonClassName = objectListActionButtonClassName;

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

@@ -7,7 +7,7 @@ const React = tslib_1.__importStar(require("react"));
 const SimpleButton_1 = tslib_1.__importDefault(require("../../../../components/SimpleButton"));
 const GeneralConstants_1 = require("../../../../Utilities/Constants/GeneralConstants");
 const utils_1 = require("../../../../lib/utils");
-exports.SuspendToggleButton = React.memo(({ suspendableObject, onUnSuspend, onSuspend, style, disabled, accessLevel, className, iconSize = 26, }) => {
+exports.SuspendToggleButton = React.memo(({ suspendableObject, onUnSuspend, onSuspend, style, disabled, accessLevel, className, iconSize = 24, }) => {
     const preparedDisabled = (accessLevel && accessLevel === GeneralConstants_1.ACCESS_LEVEL_READ_ONLY) || disabled;
     const isSuspended = suspendableObject.IsSuspended;
     const handleClick = React.useCallback(() => {
@@ -18,5 +18,5 @@ exports.SuspendToggleButton = React.memo(({ suspendableObject, onUnSuspend, onSu
             onSuspend(suspendableObject);
         }
     }, [isSuspended, onSuspend, onUnSuspend, suspendableObject]);
-    return ((0, jsx_runtime_1.jsx)(SimpleButton_1.default, { className: (0, utils_1.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 ((0, jsx_runtime_1.jsx)(SimpleButton_1.default, { className: (0, utils_1.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

@@ -18,8 +18,11 @@ var ToolPanelConfigView;
 })(ToolPanelConfigView || (exports.ToolPanelConfigView = ToolPanelConfigView = {}));
 const ToolPanelPopupSections = (props) => {
     const { api } = (0, AdaptableContext_1.useAdaptable)();
-    const initialExpandedId = props.initialTab === ToolPanelConfigView.Buttons ? 'module-buttons' : 'tool-panels';
-    const { bindCard, hasExpandedCard, expandedFillsSpace } = (0, CollapsibleWizardCard_1.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 } = (0, CollapsibleWizardCard_1.useWizardCardAccordion)(null);
     const selectedModuleButtons = [];
     if (ArrayExtensions_1.default.IsNotNullOrEmpty(props.ToolPanelState.ModuleButtons)) {
         props.ToolPanelState.ModuleButtons.forEach((module) => {

package/src/View/Layout/LayoutCloneButton.js

@@ -8,12 +8,13 @@ const SimpleButton_1 = tslib_1.__importDefault(require("../../components/SimpleB
 const AdaptableContext_1 = require("../AdaptableContext");
 const isPivotLayout_1 = require("../../Utilities/isPivotLayout");
 const GeneralConstants_1 = require("../../Utilities/Constants/GeneralConstants");
+const objectListActionButtonStyles_1 = require("../Components/AdaptableObjectList/objectListActionButtonStyles");
 const LayoutCloneButton = ({ data, accessLevel }) => {
     const adaptable = (0, AdaptableContext_1.useAdaptable)();
     const isDisabled = accessLevel === GeneralConstants_1.ACCESS_LEVEL_READ_ONLY;
     const handleClick = React.useCallback(() => {
         adaptable.api.layoutApi.showLayoutEditor(data.Name, (0, isPivotLayout_1.isPivotLayout)(data) ? 'pivot' : 'table', 'Clone');
     }, []);
-    return ((0, jsx_runtime_1.jsx)(SimpleButton_1.default, { onClick: handleClick, disabled: isDisabled, variant: "text", icon: "clone", tooltip: "Clone" }));
+    return ((0, jsx_runtime_1.jsx)(SimpleButton_1.default, { onClick: handleClick, disabled: isDisabled, variant: "text", iconSize: 24, icon: "clone", tooltip: "Clone", className: (0, objectListActionButtonStyles_1.objectListActionButtonClassName)('clone') }));
 };
 exports.LayoutCloneButton = LayoutCloneButton;

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

@@ -144,7 +144,7 @@ const RowSummaryEditorForm = React.memo(({ rowSummary, onChange, availableScalar
             sortUnorderedItems: false,
         }).map((colId) => adaptable.api.columnApi.getColumnWithColumnId(colId));
     }, [rowSummary.ColumnsMap]);
-    return ((0, jsx_runtime_1.jsxs)(Flex_1.Box, { className: "twa:flex twa:flex-col twa:gap-3 twa:h-full twa:min-h-0 twa:overflow-hidden", children: [(0, jsx_runtime_1.jsxs)(FormLayout_1.default, { children: [(0, jsx_runtime_1.jsx)(FormLayout_1.FormRow, { label: "Position", children: (0, jsx_runtime_1.jsx)(NewSelect_1.SingleSelect, { items: [
+    return ((0, jsx_runtime_1.jsxs)(Flex_1.Box, { className: "twa:flex twa:flex-col twa:gap-3 twa:h-full twa:overflow-hidden", children: [(0, jsx_runtime_1.jsxs)(FormLayout_1.default, { children: [(0, jsx_runtime_1.jsx)(FormLayout_1.FormRow, { label: "Position", children: (0, jsx_runtime_1.jsx)(NewSelect_1.SingleSelect, { items: [
                                 {
                                     label: 'Top',
                                     value: 'Top',
@@ -163,7 +163,7 @@ const RowSummaryEditorForm = React.memo(({ rowSummary, onChange, availableScalar
                                     ...rowSummary,
                                     IncludeOnlyFilteredRows,
                                 });
-                            }, children: "Include Only Filtered Rows" }) })] }), (0, jsx_runtime_1.jsxs)(Card_1.Card, { shadow: false, className: "twa:flex-1 twa:min-h-0 twa:overflow-hidden twa:flex twa:flex-col", children: [(0, jsx_runtime_1.jsxs)(Card_1.Card.Title, { children: [(0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:font-medium", children: "Column Aggregations" }), (0, jsx_runtime_1.jsx)(Flex_1.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" })] }), (0, jsx_runtime_1.jsx)(Card_1.Card.Body, { className: "twa:flex-1 twa:min-h-0 twa:overflow-hidden twa:p-1", children: (0, jsx_runtime_1.jsx)(ValueSelector_1.ValueSelector, { style: { minHeight: 0, maxHeight: '100%' }, showFilterInput: true, toggleSelectionOnRowClick: false, filter: Utilities_1.columnFilter, toIdentifier: (column) => column.columnId, toLabel: (option) => option.friendlyName ?? option.columnId, options: columns, optionLayout: "label-beside-checkbox", toListLabel: (column) => {
+                            }, children: "Include Only Filtered Rows" }) })] }), (0, jsx_runtime_1.jsxs)(Card_1.Card, { shadow: false, className: "twa:flex-1 twa:min-h-0 twa:overflow-hidden twa:flex twa:flex-col", children: [(0, jsx_runtime_1.jsxs)(Card_1.Card.Title, { children: [(0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:font-medium", children: "Column Aggregations" }), (0, jsx_runtime_1.jsx)(Flex_1.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" })] }), (0, jsx_runtime_1.jsx)(Card_1.Card.Body, { className: "twa:flex-1 twa:min-h-0 twa:overflow-hidden twa:p-1", children: (0, jsx_runtime_1.jsx)(ValueSelector_1.ValueSelector, { showFilterInput: true, className: "twa:max-h-full twa:min-h-0", toggleSelectionOnRowClick: false, filter: Utilities_1.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) {
@@ -244,9 +244,9 @@ const RowSummarySection = (props) => {
             }
         }
     };
-    return ((0, jsx_runtime_1.jsxs)(Flex_1.Box, { className: (0, utils_1.cn)((0, CollapsibleWizardCard_1.getWizardAccordionSectionClassName)(hasExpandedCard, expandedFillsSpace), 'twa:p-3'), children: [(0, jsx_runtime_1.jsx)(Flex_1.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" }), (0, jsx_runtime_1.jsx)(Flex_1.Flex, { className: "twa:justify-end twa:mb-2 twa:shrink-0", children: (0, jsx_runtime_1.jsx)(ButtonNew_1.ButtonNew, { onClick: handleAddRowSummary, children: "Add Row Summary" }) }), (0, jsx_runtime_1.jsx)(Flex_1.Flex, { flexDirection: "column", className: "twa:gap-3 twa:min-h-0", children: rowSummaries.map((rowSummary, index) => {
+    return ((0, jsx_runtime_1.jsxs)(Flex_1.Box, { className: (0, utils_1.cn)((0, CollapsibleWizardCard_1.getWizardAccordionSectionClassName)(hasExpandedCard, expandedFillsSpace), 'twa:p-3'), children: [(0, jsx_runtime_1.jsx)(Flex_1.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" }), (0, jsx_runtime_1.jsx)(Flex_1.Flex, { className: "twa:justify-end twa:mb-2 twa:shrink-0", children: (0, jsx_runtime_1.jsx)(ButtonNew_1.ButtonNew, { onClick: handleAddRowSummary, children: "Add Row Summary" }) }), (0, jsx_runtime_1.jsx)(Flex_1.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 ((0, jsx_runtime_1.jsx)(CollapsibleWizardCard_1.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: (0, jsx_runtime_1.jsx)(RowSummaryPositionTag, { position: rowSummary.Position }), headerVisual: !cardBinding.expanded ? ((0, jsx_runtime_1.jsx)(RowSummaryPositionTag, { position: rowSummary.Position })) : undefined, headerActions: (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [cardBinding.expanded ? ((0, jsx_runtime_1.jsx)(SuspendToggleButton_1.SuspendToggleButton, { iconSize: 26, className: (0, objectListActionButtonStyles_1.objectListActionButtonClassName)('suspend'), onSuspend: () => {
+                    return ((0, jsx_runtime_1.jsx)(CollapsibleWizardCard_1.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: (0, jsx_runtime_1.jsx)(RowSummaryPositionTag, { position: rowSummary.Position }), headerVisual: !cardBinding.expanded ? ((0, jsx_runtime_1.jsx)(RowSummaryPositionTag, { position: rowSummary.Position })) : undefined, headerActions: (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [cardBinding.expanded ? ((0, jsx_runtime_1.jsx)(SuspendToggleButton_1.SuspendToggleButton, { className: (0, objectListActionButtonStyles_1.objectListActionButtonClassName)('suspend'), onSuspend: () => {
                                         const newSummaries = [...rowSummaries];
                                         newSummaries[index] = { ...rowSummary, IsSuspended: true };
                                         props.onChange({ ...layout, RowSummaries: newSummaries });
@@ -254,7 +254,7 @@ const RowSummarySection = (props) => {
                                         const newSummaries = [...rowSummaries];
                                         newSummaries[index] = { ...rowSummary, IsSuspended: false };
                                         props.onChange({ ...layout, RowSummaries: newSummaries });
-                                    }, suspendableObject: rowSummary })) : null, (0, jsx_runtime_1.jsx)(SimpleButton_1.default, { icon: "delete", variant: "text", tooltip: "Delete row summary", className: (0, objectListActionButtonStyles_1.objectListActionButtonClassName)('delete'), onClick: () => handleDeleteRowSummary(index) })] }), summary: (0, jsx_runtime_1.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: (0, jsx_runtime_1.jsx)(RowSummaryEditorForm, { rowSummary: rowSummary, availableScalarExpressions: availableScalarExpressions, onChange: (nextRowSummary) => {
+                                    }, suspendableObject: rowSummary })) : null, (0, jsx_runtime_1.jsx)(SimpleButton_1.default, { icon: "delete", variant: "text", tooltip: "Delete row summary", className: (0, objectListActionButtonStyles_1.objectListActionButtonClassName)('delete'), onClick: () => handleDeleteRowSummary(index) })] }), summary: (0, jsx_runtime_1.jsx)(RowSummaryCardSummary, { rowSummary: rowSummary }), className: (0, utils_1.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: (0, jsx_runtime_1.jsx)(RowSummaryEditorForm, { rowSummary: rowSummary, availableScalarExpressions: availableScalarExpressions, onChange: (nextRowSummary) => {
                                 const newSummaries = [...rowSummaries];
                                 newSummaries[index] = nextRowSummary;
                                 props.onChange({

package/src/View/StatusBar/StatusBarPopup.js

@@ -51,18 +51,22 @@ 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

@@ -25,7 +25,6 @@ const BadgePillStyleEditor_1 = require("./BadgePillStyleEditor");
 const StyledColumnSliceStyleEditors_1 = require("./StyledColumnSliceStyleEditors");
 const Card_1 = require("../../../components/Card");
 const AdaptableContext_1 = require("../../AdaptableContext");
-const StyledColumnBadgePreview_1 = require("./StyledColumnWizardStyleSection/Components/StyledColumnBadgePreview");
 const CollapsibleWizardCard_1 = require("../../Wizard/CollapsibleWizardCard");
 const NewSelect_1 = require("../../../components/NewSelect");
 const utils_1 = require("../../../lib/utils");
@@ -239,7 +238,7 @@ const StyledColumnBadgeSection = (props) => {
             }
         }
     };
-    return ((0, jsx_runtime_1.jsxs)(Flex_1.Box, { className: (0, utils_1.cn)((0, CollapsibleWizardCard_1.getWizardAccordionSectionClassName)(hasExpandedCard, expandedFillsSpace), 'twa:p-2'), children: [(0, jsx_runtime_1.jsx)(Flex_1.Flex, { className: "twa:justify-end twa:mb-2 twa:shrink-0", children: (0, jsx_runtime_1.jsx)(ButtonNew_1.ButtonNew, { onClick: handleAddBadge, children: "Add Badge" }) }), (0, jsx_runtime_1.jsx)(Flex_1.Flex, { flexDirection: "column", className: "twa:gap-3 twa:min-h-0", children: badges.map((badge, index) => {
+    return ((0, jsx_runtime_1.jsxs)(Flex_1.Box, { className: (0, utils_1.cn)((0, CollapsibleWizardCard_1.getWizardAccordionSectionClassName)(hasExpandedCard, expandedFillsSpace), 'twa:p-2'), children: [(0, jsx_runtime_1.jsx)(Flex_1.Flex, { className: "twa:justify-end twa:mb-2 twa:shrink-0", children: (0, jsx_runtime_1.jsx)(ButtonNew_1.ButtonNew, { onClick: handleAddBadge, children: "Add Badge" }) }), (0, jsx_runtime_1.jsx)(Flex_1.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;
@@ -296,7 +295,7 @@ const StyledColumnBadgeStyleSection = (props) => {
                                             delete cleaned.Cell;
                                             props.onChange({ ...data, BadgeStyle: cleaned });
                                         }
-                                    } }) })] })] }), (0, jsx_runtime_1.jsx)(StyledColumnBadgePreview_1.StyledColumnBadgePreviewCard, { data: data })] }));
+                                    } }) })] })] })] }));
 };
 exports.StyledColumnBadgeStyleSection = StyledColumnBadgeStyleSection;
 const renderBadgeStyleSummary = (styledColumn, api) => {

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

@@ -16,7 +16,6 @@ const Flex_1 = require("../../../components/Flex");
 const StyledColumnSliceStyleEditors_1 = require("./StyledColumnSliceStyleEditors");
 const Card_1 = require("../../../components/Card");
 const ErrorBox_1 = tslib_1.__importDefault(require("../../../components/ErrorBox"));
-const StyledColumnSparklinePreview_1 = require("./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__';
@@ -174,7 +173,7 @@ const StyledColumnSparklineSettingsSection = ({ onChange }) => {
                                     delete sparkStyle.Cell;
                                 }
                                 onChange({ ...data, SparklineStyle: sparkStyle });
-                            } }) })] }), (0, jsx_runtime_1.jsx)(StyledColumnSparklinePreview_1.StyledColumnSparklinePreviewCard, { data: data })] }));
+                            } }) })] })] }));
 };
 exports.StyledColumnSparklineSettingsSection = StyledColumnSparklineSettingsSection;
 const SparklineObjectArrayProperties = ({ options, onChange, }) => {

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

@@ -270,12 +270,41 @@ const StyledColumnWizard = (props) => {
             render: () => ((0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:p-2", children: (0, jsx_runtime_1.jsx)(StyledColumnBadgeSection_1.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 = (0, jsx_runtime_1.jsx)(StyledColumnGradientPreview_1.StyledColumnGradientPreview, { data: styledColumn });
+    }
+    else if (styledColumn.PercentBarStyle) {
+        headerPreview = (0, jsx_runtime_1.jsx)(StyledColumnPercentBarPreview_1.StyledColumnPercentBarPreview, { data: styledColumn });
+    }
+    else if (styledColumn.BadgeStyle) {
+        headerPreview = (0, jsx_runtime_1.jsx)(StyledColumnBadgePreview_1.StyledColumnBadgePreview, { data: styledColumn });
+    }
+    else if (styledColumn.RatingStyle) {
+        headerPreview = (0, jsx_runtime_1.jsx)(StyledColumnRatingPreview_1.StyledColumnRatingPreview, { data: styledColumn });
+    }
+    else if (styledColumn.IconStyle) {
+        headerPreview = (0, jsx_runtime_1.jsx)(StyledColumnIconPreview_1.StyledColumnIconPreview, { data: styledColumn });
+    }
+    else if (styledColumn.BulletChartStyle) {
+        headerPreview = (0, jsx_runtime_1.jsx)(StyledColumnBulletPreview_1.StyledColumnBulletPreview, { data: styledColumn });
+    }
+    else if (styledColumn.RangeBarStyle) {
+        headerPreview = (0, jsx_runtime_1.jsx)(StyledColumnRangeBarPreview_1.StyledColumnRangeBarPreview, { data: styledColumn });
+    }
+    else if (styledColumn.SparklineStyle) {
+        headerPreview = (0, jsx_runtime_1.jsx)(StyledColumnSparklinePreview_1.StyledColumnSparklinePreview, { data: styledColumn });
+    }
     return ((0, jsx_runtime_1.jsx)(OnePageAdaptableWizard_1.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: (0, StyledColumnWizardTypeSection_1.getStyledColumnWizardTitle)(styledColumn), data: styledColumn, onFinish: handleFinish, onHide: props.onCloseWizard, sections: [
+        moduleName: (0, StyledColumnWizardTypeSection_1.getStyledColumnWizardTitle)(styledColumn), data: styledColumn, headerPreview: headerPreview, onFinish: handleFinish, onHide: props.onCloseWizard, sections: [
             {
                 details: 'Enter a Name and select a Styled Column Type',
                 isValid: (data) => {
@@ -313,7 +342,7 @@ const StyledColumnWizard = (props) => {
                 title: 'Summary',
                 details: 'Review your Styled Column',
                 render: () => {
-                    return ((0, jsx_runtime_1.jsxs)(Flex_1.Box, { className: "twa:p-2 twa:flex twa:flex-col twa:gap-3", children: [(0, jsx_runtime_1.jsx)(OnePageAdaptableWizard_1.OnePageWizardSummary, {}), styledColumn.GradientStyle && ((0, jsx_runtime_1.jsx)(StyledColumnGradientPreview_1.StyledColumnGradientPreviewCard, { data: styledColumn })), styledColumn.PercentBarStyle && ((0, jsx_runtime_1.jsx)(StyledColumnPercentBarPreview_1.StyledColumnPercentBarPreviewCard, { data: styledColumn })), styledColumn.BadgeStyle && ((0, jsx_runtime_1.jsx)(StyledColumnBadgePreview_1.StyledColumnBadgePreviewCard, { data: styledColumn })), styledColumn.RatingStyle && ((0, jsx_runtime_1.jsx)(StyledColumnRatingPreview_1.StyledColumnRatingPreviewCard, { data: styledColumn })), styledColumn.IconStyle && ((0, jsx_runtime_1.jsx)(StyledColumnIconPreview_1.StyledColumnIconPreviewCard, { data: styledColumn })), styledColumn.BulletChartStyle && ((0, jsx_runtime_1.jsx)(StyledColumnBulletPreview_1.StyledColumnBulletPreviewCard, { data: styledColumn })), styledColumn.RangeBarStyle && ((0, jsx_runtime_1.jsx)(StyledColumnRangeBarPreview_1.StyledColumnRangeBarPreviewCard, { data: styledColumn })), styledColumn.SparklineStyle && ((0, jsx_runtime_1.jsx)(StyledColumnSparklinePreview_1.StyledColumnSparklinePreviewCard, { data: styledColumn }))] }));
+                    return ((0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:p-2 twa:flex twa:flex-col twa:gap-3", children: (0, jsx_runtime_1.jsx)(OnePageAdaptableWizard_1.OnePageWizardSummary, {}) }));
                 },
             },
         ] }));

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

@@ -16,7 +16,6 @@ const OnePageAdaptableWizard_1 = require("../../Wizard/OnePageAdaptableWizard");
 const AdaptableInput_1 = tslib_1.__importDefault(require("../../Components/AdaptableInput"));
 const Flex_1 = require("../../../components/Flex");
 const BulletRangesSummaryPreview_1 = require("./StyledColumnWizardStyleSection/Components/BulletRangesSummaryPreview");
-const StyledColumnBulletPreview_1 = require("./StyledColumnWizardStyleSection/Components/StyledColumnBulletPreview");
 const NewSelect_1 = require("../../../components/NewSelect");
 const StyledColumnSliceStyleEditors_1 = require("./StyledColumnSliceStyleEditors");
 const Card_1 = require("../../../components/Card");
@@ -407,6 +406,6 @@ const StyledColumnWizardBulletSection = (props) => {
                                             delete cleaned.Font;
                                             props.onChange({ ...data, BulletChartStyle: cleaned });
                                         }
-                                    } }) })] })] }), (0, jsx_runtime_1.jsxs)(Card_1.Card, { shadow: false, className: "twa:mb-3", children: [(0, jsx_runtime_1.jsxs)(Card_1.Card.Title, { children: [(0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:font-medium", children: "Tooltip" }), (0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:text-xs twa:opacity-70 twa:font-normal twa:max-w-[520px]", children: "Choose whether to display a tooltip" })] }), (0, jsx_runtime_1.jsx)(Card_1.Card.Body, { children: (0, jsx_runtime_1.jsx)(FormLayout_1.default, { sizes: [...BULLET_STYLE_FORM_SIZES], children: (0, jsx_runtime_1.jsxs)(FormLayout_1.FormRow, { label: "Tooltip Display:", children: [(0, jsx_runtime_1.jsx)(CheckBox_1.CheckBox, { disabled: disabled, checked: bullet.ToolTipText?.includes('CellValue'), onChange: (checked) => toggleToolTipText('CellValue', checked), children: "Cell Value" }), ' ', (0, jsx_runtime_1.jsx)(CheckBox_1.CheckBox, { disabled: disabled, className: "twa:ml-3", checked: bullet.ToolTipText?.includes('PercentageValue'), onChange: (checked) => toggleToolTipText('PercentageValue', checked), children: "Percent Value" })] }) }) })] }), (0, jsx_runtime_1.jsx)(StyledColumnBulletPreview_1.StyledColumnBulletPreviewCard, { data: data })] }));
+                                    } }) })] })] }), (0, jsx_runtime_1.jsxs)(Card_1.Card, { shadow: false, className: "twa:mb-3", children: [(0, jsx_runtime_1.jsxs)(Card_1.Card.Title, { children: [(0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:font-medium", children: "Tooltip" }), (0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:text-xs twa:opacity-70 twa:font-normal twa:max-w-[520px]", children: "Choose whether to display a tooltip" })] }), (0, jsx_runtime_1.jsx)(Card_1.Card.Body, { children: (0, jsx_runtime_1.jsx)(FormLayout_1.default, { sizes: [...BULLET_STYLE_FORM_SIZES], children: (0, jsx_runtime_1.jsxs)(FormLayout_1.FormRow, { label: "Tooltip Display:", children: [(0, jsx_runtime_1.jsx)(CheckBox_1.CheckBox, { disabled: disabled, checked: bullet.ToolTipText?.includes('CellValue'), onChange: (checked) => toggleToolTipText('CellValue', checked), children: "Cell Value" }), ' ', (0, jsx_runtime_1.jsx)(CheckBox_1.CheckBox, { disabled: disabled, className: "twa:ml-3", checked: bullet.ToolTipText?.includes('PercentageValue'), onChange: (checked) => toggleToolTipText('PercentageValue', checked), children: "Percent Value" })] }) }) })] })] }));
 };
 exports.StyledColumnWizardBulletSection = StyledColumnWizardBulletSection;

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

@@ -15,7 +15,6 @@ const GradientStyleHelper_1 = require("../../../Utilities/Helpers/StyledColumns/
 const StyledColumnSliceStyleEditors_1 = require("./StyledColumnSliceStyleEditors");
 const Card_1 = require("../../../components/Card");
 const SummaryColorTag_1 = require("../../Wizard/SummaryColorTag");
-const StyledColumnGradientPreview_1 = require("./StyledColumnWizardStyleSection/Components/StyledColumnGradientPreview");
 const STYLE_FORM_SIZES = ['200px', '1fr'];
 function formatGradientToolTipSummary(opts) {
     return opts
@@ -116,6 +115,6 @@ const StyledColumnWizardGradientSection = (props) => {
                                 else {
                                     patchGradient({ AutoContrastText: true });
                                 }
-                            }, children: "Make text readable on tinted backgrounds" }) })] }), (0, jsx_runtime_1.jsxs)(Card_1.Card, { shadow: false, className: "twa:mb-3", children: [(0, jsx_runtime_1.jsxs)(Card_1.Card.Title, { children: [(0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:font-medium", children: "Tooltip" }), (0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:text-xs twa:opacity-70 twa:font-normal twa:max-w-[600px]", children: "Set Tooltip properties" })] }), (0, jsx_runtime_1.jsx)(Card_1.Card.Body, { children: (0, jsx_runtime_1.jsx)(FormLayout_1.default, { sizes: [...STYLE_FORM_SIZES], children: (0, jsx_runtime_1.jsx)(FormLayout_1.FormRow, { label: "Tooltip:", children: (0, jsx_runtime_1.jsxs)(Flex_1.Box, { className: "twa:ml-2", children: [(0, jsx_runtime_1.jsx)(CheckBox_1.CheckBox, { disabled: disabled, checked: gs.ToolTipText?.includes('CellValue'), onChange: (checked) => onToolTipTextChanged('CellValue', checked), children: "Cell Value" }), ' ', (0, jsx_runtime_1.jsx)(CheckBox_1.CheckBox, { disabled: disabled, className: "twa:ml-3", checked: gs.ToolTipText?.includes('PercentageValue'), onChange: (checked) => onToolTipTextChanged('PercentageValue', checked), children: "Percent along scale" })] }) }) }) })] }), (0, jsx_runtime_1.jsxs)(Card_1.Card, { shadow: false, children: [(0, jsx_runtime_1.jsxs)(Card_1.Card.Title, { children: [(0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:font-medium", children: "Font" }), (0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:text-xs twa:opacity-70 twa:font-normal twa:max-w-[480px]", children: "Optional font properties (takes precedence over Format Column)" })] }), (0, jsx_runtime_1.jsx)(Card_1.Card.Body, { children: (0, jsx_runtime_1.jsx)(StyledColumnSliceStyleEditors_1.StyledColumnFontStyleEditor, { api: api, disabled: disabled, value: gs.Font, onChange: onFontChange }) })] }), (0, jsx_runtime_1.jsx)(StyledColumnGradientPreview_1.StyledColumnGradientPreviewCard, { data: data }), !data.ColumnId && ((0, jsx_runtime_1.jsx)(ErrorBox_1.default, { className: "twa:mt-2", children: "Select a column before changing Gradient style." }))] }));
+                            }, children: "Make text readable on tinted backgrounds" }) })] }), (0, jsx_runtime_1.jsxs)(Card_1.Card, { shadow: false, className: "twa:mb-3", children: [(0, jsx_runtime_1.jsxs)(Card_1.Card.Title, { children: [(0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:font-medium", children: "Tooltip" }), (0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:text-xs twa:opacity-70 twa:font-normal twa:max-w-[600px]", children: "Set Tooltip properties" })] }), (0, jsx_runtime_1.jsx)(Card_1.Card.Body, { children: (0, jsx_runtime_1.jsx)(FormLayout_1.default, { sizes: [...STYLE_FORM_SIZES], children: (0, jsx_runtime_1.jsx)(FormLayout_1.FormRow, { label: "Tooltip:", children: (0, jsx_runtime_1.jsxs)(Flex_1.Box, { className: "twa:ml-2", children: [(0, jsx_runtime_1.jsx)(CheckBox_1.CheckBox, { disabled: disabled, checked: gs.ToolTipText?.includes('CellValue'), onChange: (checked) => onToolTipTextChanged('CellValue', checked), children: "Cell Value" }), ' ', (0, jsx_runtime_1.jsx)(CheckBox_1.CheckBox, { disabled: disabled, className: "twa:ml-3", checked: gs.ToolTipText?.includes('PercentageValue'), onChange: (checked) => onToolTipTextChanged('PercentageValue', checked), children: "Percent along scale" })] }) }) }) })] }), (0, jsx_runtime_1.jsxs)(Card_1.Card, { shadow: false, children: [(0, jsx_runtime_1.jsxs)(Card_1.Card.Title, { children: [(0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:font-medium", children: "Font" }), (0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:text-xs twa:opacity-70 twa:font-normal twa:max-w-[480px]", children: "Optional font properties (takes precedence over Format Column)" })] }), (0, jsx_runtime_1.jsx)(Card_1.Card.Body, { children: (0, jsx_runtime_1.jsx)(StyledColumnSliceStyleEditors_1.StyledColumnFontStyleEditor, { api: api, disabled: disabled, value: gs.Font, onChange: onFontChange }) })] }), !data.ColumnId && ((0, jsx_runtime_1.jsx)(ErrorBox_1.default, { className: "twa:mt-2", children: "Select a column before changing Gradient style." }))] }));
 };
 exports.StyledColumnWizardGradientSection = StyledColumnWizardGradientSection;

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

@@ -23,7 +23,6 @@ const IconRenderer_1 = require("../../../agGrid/cellRenderers/IconRenderer");
 const Card_1 = require("../../../components/Card");
 const SummaryColorTag_1 = require("../../Wizard/SummaryColorTag");
 const StyledColumnSliceStyleEditors_1 = require("./StyledColumnSliceStyleEditors");
-const StyledColumnIconPreview_1 = require("./StyledColumnWizardStyleSection/Components/StyledColumnIconPreview");
 const wizardSelection_1 = require("../../../Utilities/wizardSelection");
 const STYLE_FORM_SIZES = ['200px', '1fr'];
 const detectIconKind = (spec) => {
@@ -350,7 +349,7 @@ const StyledColumnWizardIconSection = (props) => {
                                                     { value: 'After', label: 'After' },
                                                     { value: 'Above', label: 'Above' },
                                                     { value: 'Below', label: 'Below' },
-                                                ] }) }) })] }), (0, jsx_runtime_1.jsx)(Flex_1.Box, { className: `twa:mt-3 twa:pt-3 twa:border-t twa:border-foreground/15 ${cellTextDisabled ? 'twa:opacity-50' : ''}`, children: (0, jsx_runtime_1.jsx)(StyledColumnSliceStyleEditors_1.StyledColumnFontStyleEditor, { api: api, disabled: disabled || cellTextDisabled, value: iconStyle.Font, onChange: onFontChange }) })] })] }), (0, jsx_runtime_1.jsxs)(Card_1.Card, { shadow: false, className: "twa:mb-3", children: [(0, jsx_runtime_1.jsxs)(Card_1.Card.Title, { children: [(0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:font-medium", children: "Tooltip" }), (0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:text-xs twa:opacity-70 twa:font-normal twa:max-w-[520px]", children: "Choose whether and how to display a tooltip" })] }), (0, jsx_runtime_1.jsx)(Card_1.Card.Body, { children: (0, jsx_runtime_1.jsx)(FormLayout_1.default, { sizes: [...STYLE_FORM_SIZES], children: (0, jsx_runtime_1.jsxs)(FormLayout_1.FormRow, { label: "Tooltip Display:", children: [(0, jsx_runtime_1.jsx)(CheckBox_1.CheckBox, { checked: toolTipText.includes('CellValue'), onChange: (checked) => toggleToolTipText('CellValue', checked), children: "Cell Value" }), ' ', (0, jsx_runtime_1.jsx)(CheckBox_1.CheckBox, { className: "twa:ml-3", checked: toolTipText.includes('IconDescription'), onChange: (checked) => toggleToolTipText('IconDescription', checked), children: "Description" })] }) }) })] }), (0, jsx_runtime_1.jsxs)(Card_1.Card, { shadow: false, children: [(0, jsx_runtime_1.jsxs)(Card_1.Card.Title, { children: [(0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:font-medium", children: "Cell" }), (0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:text-xs twa:opacity-70 twa:font-normal twa:max-w-[520px]", children: "Optional cell box styling (overrides Format Column properties)" })] }), (0, jsx_runtime_1.jsx)(Card_1.Card.Body, { children: (0, jsx_runtime_1.jsx)(StyledColumnSliceStyleEditors_1.StyledColumnCellStyleEditor, { api: api, disabled: disabled, value: iconStyle.Cell, onChange: onCellChange }) })] }), (0, jsx_runtime_1.jsx)(StyledColumnIconPreview_1.StyledColumnIconPreviewCard, { data: data })] }));
+                                                ] }) }) })] }), (0, jsx_runtime_1.jsx)(Flex_1.Box, { className: `twa:mt-3 twa:pt-3 twa:border-t twa:border-foreground/15 ${cellTextDisabled ? 'twa:opacity-50' : ''}`, children: (0, jsx_runtime_1.jsx)(StyledColumnSliceStyleEditors_1.StyledColumnFontStyleEditor, { api: api, disabled: disabled || cellTextDisabled, value: iconStyle.Font, onChange: onFontChange }) })] })] }), (0, jsx_runtime_1.jsxs)(Card_1.Card, { shadow: false, className: "twa:mb-3", children: [(0, jsx_runtime_1.jsxs)(Card_1.Card.Title, { children: [(0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:font-medium", children: "Tooltip" }), (0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:text-xs twa:opacity-70 twa:font-normal twa:max-w-[520px]", children: "Choose whether and how to display a tooltip" })] }), (0, jsx_runtime_1.jsx)(Card_1.Card.Body, { children: (0, jsx_runtime_1.jsx)(FormLayout_1.default, { sizes: [...STYLE_FORM_SIZES], children: (0, jsx_runtime_1.jsxs)(FormLayout_1.FormRow, { label: "Tooltip Display:", children: [(0, jsx_runtime_1.jsx)(CheckBox_1.CheckBox, { checked: toolTipText.includes('CellValue'), onChange: (checked) => toggleToolTipText('CellValue', checked), children: "Cell Value" }), ' ', (0, jsx_runtime_1.jsx)(CheckBox_1.CheckBox, { className: "twa:ml-3", checked: toolTipText.includes('IconDescription'), onChange: (checked) => toggleToolTipText('IconDescription', checked), children: "Description" })] }) }) })] }), (0, jsx_runtime_1.jsxs)(Card_1.Card, { shadow: false, children: [(0, jsx_runtime_1.jsxs)(Card_1.Card.Title, { children: [(0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:font-medium", children: "Cell" }), (0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:text-xs twa:opacity-70 twa:font-normal twa:max-w-[520px]", children: "Optional cell box styling (overrides Format Column properties)" })] }), (0, jsx_runtime_1.jsx)(Card_1.Card.Body, { children: (0, jsx_runtime_1.jsx)(StyledColumnSliceStyleEditors_1.StyledColumnCellStyleEditor, { api: api, disabled: disabled, value: iconStyle.Cell, onChange: onCellChange }) })] })] }));
 };
 exports.StyledColumnWizardIconSection = StyledColumnWizardIconSection;
 // ---------------------------------------------------------------------------

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

@@ -18,7 +18,6 @@ const AdaptableInput_1 = tslib_1.__importDefault(require("../../Components/Adapt
 const Flex_1 = require("../../../components/Flex");
 const NewSelect_1 = require("../../../components/NewSelect");
 const RangeBarRangesSummaryPreview_1 = require("./StyledColumnWizardStyleSection/Components/RangeBarRangesSummaryPreview");
-const StyledColumnRangeBarPreview_1 = require("./StyledColumnWizardStyleSection/Components/StyledColumnRangeBarPreview");
 const Card_1 = require("../../../components/Card");
 const SummaryColorTag_1 = require("../../Wizard/SummaryColorTag");
 const BarStylesHelper_1 = require("../../../Utilities/Helpers/StyledColumns/BarStylesHelper");
@@ -499,6 +498,6 @@ const StyledColumnWizardRangeBarSection = (props) => {
                                                         { value: 'Clamp', label: 'Clamp to edge' },
                                                         { value: 'Overflow', label: 'Show outside' },
                                                         { value: 'Hide', label: 'Hide marker' },
-                                                    ] }) }) }), outOfRangeMode === 'Clamp' && ((0, jsx_runtime_1.jsx)(FormLayout_1.FormRow, { label: `Out-of-range ${api.internalApi.getCorrectEnglishVariant('Colour')}:`, children: (0, jsx_runtime_1.jsx)(ColorPicker_1.OptionalColorPicker, { disabled: disabled, api: api, value: range.OutOfRange?.Color, defaultColor: "crimson", onChange: (c) => updateOutOfRangeProperties({ Color: c }) }) }))] }) })] }), (0, jsx_runtime_1.jsxs)(Card_1.Card, { shadow: false, children: [(0, jsx_runtime_1.jsxs)(Card_1.Card.Title, { children: [(0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:font-medium", children: "Text & Tooltip" }), (0, jsx_runtime_1.jsx)(Flex_1.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." })] }), (0, jsx_runtime_1.jsx)(Card_1.Card.Body, { children: (0, jsx_runtime_1.jsxs)(FormLayout_1.default, { sizes: [...RANGE_STYLE_FORM_SIZES], children: [(0, jsx_runtime_1.jsx)(BarStyleCellTextLayoutEditor_1.BarStyleCellTextLayoutEditor, { disabled: disabled, cellTextProperties: range.CellTextProperties, onToggle: toggleCellText, onPlacementChange: onCellTextPlacementChange }), (0, jsx_runtime_1.jsxs)(FormLayout_1.FormRow, { label: "Tooltip Display:", children: [(0, jsx_runtime_1.jsx)(CheckBox_1.CheckBox, { disabled: disabled, checked: range.ToolTipText?.includes('CellValue'), onChange: (checked) => toggleToolTipText('CellValue', checked), children: "Cell Value" }), ' ', (0, jsx_runtime_1.jsx)(CheckBox_1.CheckBox, { disabled: disabled, className: "twa:ml-3", checked: range.ToolTipText?.includes('PercentageValue'), onChange: (checked) => toggleToolTipText('PercentageValue', checked), children: "Percent Value" })] })] }) })] }), (0, jsx_runtime_1.jsx)(StyledColumnRangeBarPreview_1.StyledColumnRangeBarPreviewCard, { data: data })] }))] }));
+                                                    ] }) }) }), outOfRangeMode === 'Clamp' && ((0, jsx_runtime_1.jsx)(FormLayout_1.FormRow, { label: `Out-of-range ${api.internalApi.getCorrectEnglishVariant('Colour')}:`, children: (0, jsx_runtime_1.jsx)(ColorPicker_1.OptionalColorPicker, { disabled: disabled, api: api, value: range.OutOfRange?.Color, defaultColor: "crimson", onChange: (c) => updateOutOfRangeProperties({ Color: c }) }) }))] }) })] }), (0, jsx_runtime_1.jsxs)(Card_1.Card, { shadow: false, children: [(0, jsx_runtime_1.jsxs)(Card_1.Card.Title, { children: [(0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:font-medium", children: "Text & Tooltip" }), (0, jsx_runtime_1.jsx)(Flex_1.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." })] }), (0, jsx_runtime_1.jsx)(Card_1.Card.Body, { children: (0, jsx_runtime_1.jsxs)(FormLayout_1.default, { sizes: [...RANGE_STYLE_FORM_SIZES], children: [(0, jsx_runtime_1.jsx)(BarStyleCellTextLayoutEditor_1.BarStyleCellTextLayoutEditor, { disabled: disabled, cellTextProperties: range.CellTextProperties, onToggle: toggleCellText, onPlacementChange: onCellTextPlacementChange }), (0, jsx_runtime_1.jsxs)(FormLayout_1.FormRow, { label: "Tooltip Display:", children: [(0, jsx_runtime_1.jsx)(CheckBox_1.CheckBox, { disabled: disabled, checked: range.ToolTipText?.includes('CellValue'), onChange: (checked) => toggleToolTipText('CellValue', checked), children: "Cell Value" }), ' ', (0, jsx_runtime_1.jsx)(CheckBox_1.CheckBox, { disabled: disabled, className: "twa:ml-3", checked: range.ToolTipText?.includes('PercentageValue'), onChange: (checked) => toggleToolTipText('PercentageValue', checked), children: "Percent Value" })] })] }) })] })] }))] }));
 };
 exports.StyledColumnWizardRangeBarSection = StyledColumnWizardRangeBarSection;

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

@@ -195,6 +195,6 @@ const StyledColumnWizardRatingSection = (props) => {
                                     delete cleaned.Cell;
                                     props.onChange({ ...data, RatingStyle: cleaned });
                                 }
-                            } }) })] }), (0, jsx_runtime_1.jsx)(StyledColumnRatingPreview_1.StyledColumnRatingPreviewCard, { data: data })] }));
+                            } }) })] })] }));
 };
 exports.StyledColumnWizardRatingSection = StyledColumnWizardRatingSection;

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,20 +1,19 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.StyledColumnBadgePreviewCard = exports.StyledColumnBadgePreview = void 0;
+exports.StyledColumnBadgePreview = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const GeneralConstants_1 = require("../../../../../Utilities/Constants/GeneralConstants");
 const StyleHelper_1 = require("../../../../../Utilities/Helpers/StyleHelper");
 const AdaptableContext_1 = require("../../../../AdaptableContext");
 const Badge_1 = require("../../../../Components/Badge");
 const Flex_1 = require("../../../../../components/Flex");
-const Card_1 = require("../../../../../components/Card");
 const Tag_1 = require("../../../../../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':
@@ -45,7 +44,9 @@ const StyledColumnBadgePreview = ({ data }) => {
     const cellStyle = badgeStyle.Cell ? (0, StyleHelper_1.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,
@@ -64,5 +65,3 @@ const StyledColumnBadgePreview = ({ data }) => {
             }) }) }));
 };
 exports.StyledColumnBadgePreview = StyledColumnBadgePreview;
-const StyledColumnBadgePreviewCard = ({ data }) => ((0, jsx_runtime_1.jsxs)(Card_1.Card, { shadow: false, children: [(0, jsx_runtime_1.jsx)(Card_1.Card.Title, { children: (0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:font-medium", children: "Preview" }) }), (0, jsx_runtime_1.jsx)(Card_1.Card.Body, { className: "twa:p-1", children: (0, jsx_runtime_1.jsx)(exports.StyledColumnBadgePreview, { data: data }) })] }));
-exports.StyledColumnBadgePreviewCard = StyledColumnBadgePreviewCard;

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

@@ -1,11 +1,10 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.hasBulletChartRangesConfigured = exports.StyledColumnBulletPreviewCard = exports.StyledColumnBulletPreview = void 0;
+exports.hasBulletChartRangesConfigured = exports.StyledColumnBulletPreview = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const StyleHelper_1 = require("../../../../../Utilities/Helpers/StyleHelper");
 const BarStylesHelper_1 = require("../../../../../Utilities/Helpers/StyledColumns/BarStylesHelper");
 const Flex_1 = require("../../../../../components/Flex");
-const Card_1 = require("../../../../../components/Card");
 const Tag_1 = require("../../../../../components/Tag");
 const StyledColumnChartListPreviews_1 = require("./StyledColumnChartListPreviews");
 const BarStyleCellTextPreview_1 = require("./BarStyleCellTextPreview");
@@ -54,7 +53,5 @@ const StyledColumnBulletPreview = ({ data }) => {
     return ((0, jsx_runtime_1.jsx)(Flex_1.Box, { className: PREVIEW_CELL_CLASS, children: (0, jsx_runtime_1.jsx)(BulletChartPreviewContent, { bullet: bullet }) }));
 };
 exports.StyledColumnBulletPreview = StyledColumnBulletPreview;
-const StyledColumnBulletPreviewCard = ({ data }) => ((0, jsx_runtime_1.jsxs)(Card_1.Card, { shadow: false, children: [(0, jsx_runtime_1.jsx)(Card_1.Card.Title, { children: (0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:font-medium", children: "Preview" }) }), (0, jsx_runtime_1.jsx)(Card_1.Card.Body, { className: "twa:p-1", children: (0, jsx_runtime_1.jsx)(exports.StyledColumnBulletPreview, { data: data }) })] }));
-exports.StyledColumnBulletPreviewCard = StyledColumnBulletPreviewCard;
 const hasBulletChartRangesConfigured = (bullet) => Boolean(bullet?.CellRanges?.length);
 exports.hasBulletChartRangesConfigured = hasBulletChartRangesConfigured;

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,9 +1,8 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.StyledColumnGradientPreviewCard = exports.StyledColumnGradientPreview = void 0;
+exports.StyledColumnGradientPreview = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const Flex_1 = require("../../../../../components/Flex");
-const Card_1 = require("../../../../../components/Card");
 const Tag_1 = require("../../../../../components/Tag");
 const AdaptableContext_1 = require("../../../../AdaptableContext");
 const GradientStyleHelper_1 = require("../../../../../Utilities/Helpers/StyledColumns/GradientStyleHelper");
@@ -31,5 +30,3 @@ const StyledColumnGradientPreview = ({ data, api: apiProp }) => {
     return ((0, jsx_runtime_1.jsx)(Flex_1.Flex, { alignItems: "stretch", className: "twa:flex-wrap twa:gap-2", children: sampleValues.map((value) => ((0, jsx_runtime_1.jsx)(Flex_1.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: (0, GradientStyleHelper_1.getGradientPreviewCellStyle)(value, data, api, rowNode), children: formatPreviewValue(value) }, value))) }));
 };
 exports.StyledColumnGradientPreview = StyledColumnGradientPreview;
-const StyledColumnGradientPreviewCard = ({ data }) => ((0, jsx_runtime_1.jsxs)(Card_1.Card, { shadow: false, children: [(0, jsx_runtime_1.jsx)(Card_1.Card.Title, { children: (0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:font-medium", children: "Preview" }) }), (0, jsx_runtime_1.jsx)(Card_1.Card.Body, { className: "twa:p-1", children: (0, jsx_runtime_1.jsx)(exports.StyledColumnGradientPreview, { data: data }) })] }));
-exports.StyledColumnGradientPreviewCard = StyledColumnGradientPreviewCard;

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;
-}>>;