@adaptabletools/adaptable 23.0.0-canary.4 → 23.0.0-canary.6

package/src/View/Schedule/Wizard/ScheduleScheduleWizard.js

@@ -3,10 +3,10 @@ import * as React from 'react';
 import { CheckBox } from '../../../components/CheckBox';
 import FormLayout, { FormRow } from '../../../components/FormLayout';
 import Radio from '../../../components/Radio';
-import { Tabs } from '../../../components/Tabs';
 import AdaptableInput from '../../Components/AdaptableInput';
 import { useOnePageAdaptableWizardContext } from '../../Wizard/OnePageAdaptableWizard';
 import { Box } from '../../../components/Flex';
+import { Card } from '../../../components/Card';
 import { SingleSelect } from '../../../components/NewSelect';
 import ObjectFactory from '../../../Utilities/ObjectFactory';
 import { buildCronExpression, buildRunAtIso, inferPresetFromCron, isScheduleValid as validateSchedule, parseOneOffDateFromRunAt, parseTimeFromSchedule, } from '../../../Utilities/Helpers/ScheduleHelper';
@@ -155,5 +155,5 @@ export const ScheduleBuilderWizard = (props) => {
         commit({ customCron: value, preset: 'custom' });
     };
     const timeValue = `${`${hour}`.padStart(2, '0')}:${`${minute}`.padStart(2, '0')}`;
-    return (_jsx(Box, { "data-name": "schedule-setup", children: _jsxs(Tabs, { autoFocus: false, children: [_jsx(Tabs.Tab, { children: "Schedule" }), _jsx(Tabs.Content, { children: _jsxs(FormLayout, { children: [_jsxs(FormRow, { label: "Frequency", children: [_jsx(Radio, { "data-name": "frequency-recurring", className: "twa:mr-2", value: "recurring", checked: !isOneOff, onChange: (checked) => checked && handleFrequencyChange(false), children: "Recurring" }), _jsx(Radio, { "data-name": "frequency-one-off", checked: isOneOff, value: "oneoff", onChange: (checked) => checked && handleFrequencyChange(true), children: "One-off" })] }), isOneOff ? (_jsx(FormRow, { label: "Date", children: _jsx(AdaptableInput, { "data-name": "one-off-date", className: "twa:w-[300px]", type: "date", placeholder: "Date", onChange: handleOneOffDateChange, value: oneOffDate }) })) : (_jsxs(_Fragment, { children: [_jsx(FormRow, { label: "Pattern", children: _jsx(Box, { className: "twa:max-w-[300px]", children: _jsx(SingleSelect, { className: "twa:w-full", "data-name": "recurrence-preset", items: PRESET_OPTIONS, value: preset, placeholder: "Select pattern", onValueChange: handlePresetChange }) }) }), preset === 'selectedDays' && (_jsx(FormRow, { label: "Days", children: daysMap.map((day) => (_jsx(CheckBox, { "data-name": `day-${day.value}`, className: "twa:ml-2 twa:w-1/3", value: day.value, checked: selectedDays.includes(day.value), onChange: (checked) => handleDayChange(checked, day.value), children: day.label }, day.value))) })), preset === 'monthly' && (_jsx(FormRow, { label: "Day of month", children: _jsx(AdaptableInput, { "data-name": "day-of-month", className: "twa:w-[120px]", type: "number", min: 1, max: 31, value: dayOfMonth, onChange: handleDayOfMonthChange }) })), preset === 'custom' && (_jsx(FormRow, { label: "Cron expression", children: _jsx(AdaptableInput, { "data-name": "custom-cron", className: "twa:w-[300px]", placeholder: "minute hour day month weekday", value: customCron, onChange: handleCustomCronChange }) }))] })), _jsx(FormRow, { label: "Time", children: _jsx(AdaptableInput, { "data-name": "time", className: "twa:w-[300px]", value: timeValue, type: "time", onChange: handleTimeChange }) })] }) })] }) }));
+    return (_jsx(Box, { "data-name": "schedule-setup", children: _jsxs(Card, { shadow: false, children: [_jsxs(Card.Title, { children: [_jsx(Box, { className: "twa:font-medium", children: "Schedule" }), _jsx(Box, { className: "twa:text-xs twa:opacity-70 twa:font-normal twa:max-w-[520px]", children: "Configure when this should run" })] }), _jsx(Card.Body, { children: _jsxs(FormLayout, { children: [_jsxs(FormRow, { label: "Frequency", children: [_jsx(Radio, { "data-name": "frequency-recurring", className: "twa:mr-2", value: "recurring", checked: !isOneOff, onChange: (checked) => checked && handleFrequencyChange(false), children: "Recurring" }), _jsx(Radio, { "data-name": "frequency-one-off", checked: isOneOff, value: "oneoff", onChange: (checked) => checked && handleFrequencyChange(true), children: "One-off" })] }), isOneOff ? (_jsx(FormRow, { label: "Date", children: _jsx(AdaptableInput, { "data-name": "one-off-date", className: "twa:w-[300px]", type: "date", placeholder: "Date", onChange: handleOneOffDateChange, value: oneOffDate }) })) : (_jsxs(_Fragment, { children: [_jsx(FormRow, { label: "Pattern", children: _jsx(Box, { className: "twa:max-w-[300px]", children: _jsx(SingleSelect, { className: "twa:w-full", "data-name": "recurrence-preset", items: PRESET_OPTIONS, value: preset, placeholder: "Select pattern", onValueChange: handlePresetChange }) }) }), preset === 'selectedDays' && (_jsx(FormRow, { label: "Days", children: daysMap.map((day) => (_jsx(CheckBox, { "data-name": `day-${day.value}`, className: "twa:ml-2 twa:w-1/3", value: day.value, checked: selectedDays.includes(day.value), onChange: (checked) => handleDayChange(checked, day.value), children: day.label }, day.value))) })), preset === 'monthly' && (_jsx(FormRow, { label: "Day of month", children: _jsx(AdaptableInput, { "data-name": "day-of-month", className: "twa:w-[120px]", type: "number", min: 1, max: 31, value: dayOfMonth, onChange: handleDayOfMonthChange }) })), preset === 'custom' && (_jsx(FormRow, { label: "Cron expression", children: _jsx(AdaptableInput, { "data-name": "custom-cron", className: "twa:w-[300px]", placeholder: "minute hour day month weekday", value: customCron, onChange: handleCustomCronChange }) }))] })), _jsx(FormRow, { label: "Time", children: _jsx(AdaptableInput, { "data-name": "time", className: "twa:w-[300px]", value: timeValue, type: "time", onChange: handleTimeChange }) })] }) })] }) }));
 };

package/src/View/Shortcut/Wizard/ShortcutScopeWizardSection.js

@@ -1,25 +1,18 @@
-import { jsx as _jsx } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import * as React from 'react';
 import { useOnePageAdaptableWizardContext } from '../../Wizard/OnePageAdaptableWizard';
 import { NewScopeComponent } from '../../Components/NewScopeComponent';
+import { Box, Flex } from '../../../components/Flex';
 export const ShortcutScopeWizardSection = (props) => {
     const { data, api } = useOnePageAdaptableWizardContext();
     const availableColumns = React.useMemo(() => api.columnApi.getNumericColumns(), []);
-    return (_jsx(NewScopeComponent, { availableDataTypes: ['number'], scopeColumns: availableColumns, scope: data.Scope, descriptions: {
-            rowScope: 'All Numeric Columns will have the Shortcut applied',
-            columnScope: 'Selected Columns will have the Shortcut applied',
-        }, updateScope: (Scope) => {
-            let preparedScope = Scope;
-            if (Scope && 'DataTypes' in Scope && Scope.DataTypes.length === 0) {
-                // default to checked
-                preparedScope = {
-                    ...Scope,
-                    DataTypes: ['number'],
-                };
-            }
-            props.onChange({
-                ...data,
-                Scope: preparedScope,
-            });
-        } }));
+    return (_jsxs(Flex, { flexDirection: "column", className: "twa:h-full", children: [_jsxs(Flex, { flexDirection: "row", alignItems: "center", className: "twa:p-2 twa:gap-3 twa:border-b twa:mb-2 twa:border-b-foreground/20", children: [_jsx(Box, { className: "twa:text-5 twa:font-medium", children: "Target" }), _jsx(Box, { className: "twa:text-xs twa:opacity-70 twa:max-w-[520px]", children: "Specify where the Shortcut should be applied (numeric columns only)" })] }), _jsx(Box, { className: "twa:flex-1 twa:min-h-0 twa:overflow-auto twa:p-2", children: _jsx(NewScopeComponent, { disableDataTypes: true, scopeColumns: availableColumns, scope: data.Scope, descriptions: {
+                        rowScope: 'All Numeric Columns will have the Shortcut applied',
+                        columnScope: 'Selected Columns will have the Shortcut applied',
+                    }, updateScope: (Scope) => {
+                        props.onChange({
+                            ...data,
+                            Scope: Scope,
+                        });
+                    } }) })] }));
 };

package/src/View/Shortcut/Wizard/ShortcutSettingsWizard.js

@@ -1,15 +1,13 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import * as React from 'react';
 import Input from '../../../components/Input';
-import { shortcutOperationList } from '../shortcutOperations';
-import FormLayout, { FormRow } from '../../../components/FormLayout';
+import { calculateShortcutResult, getShortcutOperationSymbol, shortcutOperationList, SHORTCUT_PREVIEW_EXAMPLE_VALUE, } from '../shortcutOperations';
 import { useOnePageAdaptableWizardContext } from '../../Wizard/OnePageAdaptableWizard';
-import { Tabs } from '../../../components/Tabs';
 import { SummaryText } from '../../../View/Wizard/OnePageAdaptableWizard';
 import { Tag } from '../../../components/Tag';
-import HelpBlock from '../../../components/HelpBlock';
 import { Box, Flex } from '../../../components/Flex';
 import { SingleSelect } from '../../../components/NewSelect';
+import { Card } from '../../../components/Card';
 export const isSettingsValid = (data, api) => {
     if (!data.Name?.trim()) {
         return 'Name is required';
@@ -58,11 +56,24 @@ export const ShortcutSettingsWizard = (props) => {
     const optionActions = shortcutOperationList.map((operation) => ({
         value: operation,
         label: operation,
-        // onClick: () => handleOperationChange(operation),
     }));
     const optionKeys = props.availableKeys.map((key) => ({
         value: key,
         label: key,
     }));
-    return (_jsx(Box, { "data-name": "shortcut-column-settings", children: _jsxs(Tabs, { autoFocus: false, children: [_jsx(Tabs.Tab, { children: "Shortcut Settings" }), _jsx(Tabs.Content, { children: _jsxs(FormLayout, { children: [_jsx(FormRow, { label: "Name", children: _jsx(Input, { "data-name": "shortcut-name", className: "twa:flex-1 twa:w-60 twa:mr-3", onChange: handleNameChange, placeholder: "Enter Name", value: shortcut.Name ?? '' }) }), _jsx(FormRow, { label: "", children: _jsx(Box, { className: "twa:h-2" }) }), _jsx(FormRow, { label: "", children: _jsx(HelpBlock, { className: "twa:text-2 twa:mb-0", children: "Keyboard key that, when pressed, triggers the Shortcut" }) }), _jsx(FormRow, { label: "Key", children: _jsx(Flex, { flexDirection: "row", children: _jsx(SingleSelect, { "data-name": "shortcut-key", ariaLabel: "Select Key", placeholder: "Select Key", items: optionKeys, className: "twa:w-30", onValueChange: (key) => handleKeyChange(key), value: shortcut.ShortcutKey || 'Select Key' }) }) }), _jsx(FormRow, { label: "", children: _jsx(HelpBlock, { className: "twa:text-2 twa:mb-0", children: "Mathematical operation performed on Cell's current value (using the Shortcut's 'value') - used to calculate the Cell's new total" }) }), _jsx(FormRow, { label: "Operation", children: _jsx(Flex, { flexDirection: "row", children: _jsx(SingleSelect, { "data-name": "shortcut-operation", placeholder: "Select Operation", ariaLabel: "Select Operation", className: "twa:w-30", items: optionActions, onValueChange: (operation) => handleOperationChange(operation), value: shortcut.ShortcutOperation }) }) }), _jsx(FormRow, { label: "", children: _jsx(HelpBlock, { className: "twa:text-2 twa:mb-0", children: "Number that is used - together with the 'Operation' and the current cell value - to calculate the new total for the cell" }) }), _jsx(FormRow, { label: "Value", children: _jsx(Flex, { flexDirection: "row", children: _jsx(Input, { "data-name": "shortcut-value", className: "twa:flex-1 twa:w-30 twa:max-w-30 twa:mr-3", onChange: handleOperationValueChange, placeholder: "Enter Number", type: "number", value: shortcut.ShortcutValue ?? '' }) }) })] }) })] }) }));
+    const preview = React.useMemo(() => {
+        const { ShortcutOperation, ShortcutValue } = shortcut;
+        if (!ShortcutOperation || typeof ShortcutValue !== 'number') {
+            return null;
+        }
+        const result = calculateShortcutResult(SHORTCUT_PREVIEW_EXAMPLE_VALUE, ShortcutValue, ShortcutOperation);
+        if (result === null) {
+            return { error: 'Cannot divide by zero' };
+        }
+        return {
+            expression: `${SHORTCUT_PREVIEW_EXAMPLE_VALUE} ${getShortcutOperationSymbol(ShortcutOperation)} ${ShortcutValue}`,
+            result,
+        };
+    }, [shortcut.ShortcutOperation, shortcut.ShortcutValue]);
+    return (_jsx(Box, { "data-name": "shortcut-column-settings", children: _jsxs(Flex, { flexDirection: "column", className: "twa:gap-3 twa:p-3", children: [_jsxs(Card, { shadow: false, children: [_jsxs(Card.Title, { children: [_jsx(Box, { className: "twa:font-medium", children: "Name" }), _jsx(Box, { className: "twa:text-xs twa:opacity-70 twa:font-normal twa:max-w-[520px]", children: "Provide a unique name for the Shortcut" })] }), _jsx(Card.Body, { className: "twa:p-1", children: _jsx(Input, { "data-name": "shortcut-name", className: "twa:max-w-[300px] twa:w-full", onChange: handleNameChange, placeholder: "Enter Name", value: shortcut.Name ?? '' }) })] }), _jsxs(Card, { shadow: false, children: [_jsxs(Card.Title, { children: [_jsx(Box, { className: "twa:font-medium", children: "Key" }), _jsx(Box, { className: "twa:text-xs twa:opacity-70 twa:font-normal twa:max-w-[520px]", children: "Keyboard key that, when pressed, triggers the Shortcut" })] }), _jsx(Card.Body, { className: "twa:p-1", children: _jsx(SingleSelect, { "data-name": "shortcut-key", ariaLabel: "Select Key", placeholder: "Select Key", items: optionKeys, className: "twa:max-w-[300px]", onValueChange: (key) => handleKeyChange(key), value: shortcut.ShortcutKey || undefined }) })] }), _jsxs(Card, { shadow: false, children: [_jsxs(Card.Title, { children: [_jsx(Box, { className: "twa:font-medium", children: "Operation" }), _jsx(Box, { className: "twa:text-xs twa:opacity-70 twa:font-normal twa:max-w-[520px]", children: "Mathematical operation performed on the cell's current value" })] }), _jsx(Card.Body, { className: "twa:p-1", children: _jsx(SingleSelect, { "data-name": "shortcut-operation", placeholder: "Select Operation", ariaLabel: "Select Operation", className: "twa:max-w-[300px]", items: optionActions, onValueChange: (operation) => handleOperationChange(operation), value: shortcut.ShortcutOperation }) })] }), _jsxs(Card, { shadow: false, children: [_jsxs(Card.Title, { children: [_jsx(Box, { className: "twa:font-medium", children: "Value" }), _jsx(Box, { className: "twa:text-xs twa:opacity-70 twa:font-normal twa:max-w-[520px]", children: "Number used with the operation and current cell value to calculate the new total" })] }), _jsx(Card.Body, { className: "twa:p-1", children: _jsx(Input, { "data-name": "shortcut-value", className: "twa:max-w-[300px] twa:w-full", onChange: handleOperationValueChange, placeholder: "Enter Number", type: "number", value: shortcut.ShortcutValue ?? '' }) })] }), preview ? (_jsxs(Card, { shadow: false, children: [_jsxs(Card.Title, { children: [_jsx(Box, { className: "twa:font-medium", children: "Example" }), _jsxs(Box, { className: "twa:text-xs twa:opacity-70 twa:font-normal twa:max-w-[520px]", children: ["If a cell contains ", SHORTCUT_PREVIEW_EXAMPLE_VALUE, ", pressing this Shortcut would change it to:"] })] }), _jsx(Card.Body, { children: 'error' in preview ? (_jsx(Box, { className: "twa:text-2 twa:text-error", children: preview.error })) : (_jsxs(Box, { className: "twa:text-3 twa:font-medium", children: [preview.expression, " \u2192 ", preview.result] })) })] })) : null] }) }));
 };

package/src/View/Shortcut/Wizard/ShortcutWizard.js

@@ -1,4 +1,4 @@
-import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { Fragment as _Fragment, jsx as _jsx } from "react/jsx-runtime";
 import * as React from 'react';
 import { OnePageAdaptableWizard, OnePageWizardSummary, } from '../../../View/Wizard/OnePageAdaptableWizard';
 import { cloneObject } from '../../../Utilities/Helpers/Helper';
@@ -50,7 +50,7 @@ export const ShortcutWizard = (props) => {
             {
                 title: 'Settings',
                 isValid: isSettingsValid,
-                details: (_jsxs(_Fragment, { children: ["A Shortcut is a mathematical calculation (", _jsx("b", { children: "Operation" }), ") which is applied with the defined operand ", _jsx("b", { children: "Value" }), " on the edited cell content when the corresponding Shortcut ", _jsx("b", { children: "Key" }), " is pressed."] })),
+                details: (_jsx(_Fragment, { children: "Provide details of the Shortcut" })),
                 renderSummary: () => _jsx(ShortcutSettingsSummary, {}),
                 render: () => (_jsx(Box, { className: "twa:p-2", children: _jsx(ShortcutSettingsWizard, { availableKeys: props.availableKeys ?? availableKeys, onChange: setShortcut }) })),
             },
@@ -61,7 +61,7 @@ export const ShortcutWizard = (props) => {
                 renderSummary: () => renderScopeSummary(shortcut.Scope, {
                     scopeWholeRow: 'Shortcut is triggered for all numeric cells',
                     scopeColumns: 'Shortcut is triggered for cells in selected columns',
-                    scopeDataTypes: 'Shortcut is triggered for all numeric cells',
+                    scopeDataTypes: '',
                 }),
                 render: () => (_jsx(Box, { className: "twa:p-2", children: _jsx(ShortcutScopeWizardSection, { onChange: setShortcut }) })),
             },

package/src/View/Shortcut/shortcutOperations.d.ts

@@ -1,2 +1,5 @@
 import { MathOperation } from '../../AdaptableState/Common/Enums';
 export declare const shortcutOperationList: Array<MathOperation>;
+export declare const SHORTCUT_PREVIEW_EXAMPLE_VALUE = 100;
+export declare function getShortcutOperationSymbol(operation: MathOperation): string;
+export declare function calculateShortcutResult(cellValue: number, shortcutValue: number, operation: MathOperation): number | null;

package/src/View/Shortcut/shortcutOperations.js

@@ -1,7 +1,35 @@
 import { MathOperation } from '../../AdaptableState/Common/Enums';
+import NumberExtensions from '../../Utilities/Extensions/NumberExtensions';
 export const shortcutOperationList = [
     MathOperation.Add,
     MathOperation.Subtract,
     MathOperation.Multiply,
     MathOperation.Divide,
 ];
+export const SHORTCUT_PREVIEW_EXAMPLE_VALUE = 100;
+const shortcutOperationSymbols = {
+    [MathOperation.Add]: '+',
+    [MathOperation.Subtract]: '−',
+    [MathOperation.Multiply]: '×',
+    [MathOperation.Divide]: '÷',
+};
+export function getShortcutOperationSymbol(operation) {
+    return shortcutOperationSymbols[operation];
+}
+export function calculateShortcutResult(cellValue, shortcutValue, operation) {
+    if (operation === MathOperation.Divide && shortcutValue === 0) {
+        return null;
+    }
+    switch (operation) {
+        case MathOperation.Add:
+            return NumberExtensions.avoidJavascriptPrecisionIssues(cellValue + shortcutValue);
+        case MathOperation.Subtract:
+            return NumberExtensions.avoidJavascriptPrecisionIssues(cellValue - shortcutValue);
+        case MathOperation.Multiply:
+            return NumberExtensions.avoidJavascriptPrecisionIssues(cellValue * shortcutValue);
+        case MathOperation.Divide:
+            return NumberExtensions.avoidJavascriptPrecisionIssues(cellValue / shortcutValue);
+        default:
+            return null;
+    }
+}

package/src/View/SpecialColumnSettingsWizardStep.js

@@ -1,12 +1,13 @@
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import chunk from '../Utilities/utils/chunk';
 import { CheckBox } from '../components/CheckBox';
 import FormLayout, { FormRow } from '../components/FormLayout';
-import { Tabs } from '../components/Tabs';
 import { useAdaptable } from './AdaptableContext';
-import { Flex } from '../components/Flex';
+import { Box, Flex } from '../components/Flex';
+import { Card } from '../components/Card';
 export const SpecialColumnSettingsWizardStep = (props) => {
     const adaptable = useAdaptable();
+    const behaviourSpellingVariant = adaptable.api.internalApi.getCorrectEnglishVariant('behaviours');
     const possibleColumnTypes = adaptable.api.columnApi.getColumnTypes() ?? [];
     const { Filterable, Resizable, Groupable, Sortable, Pivotable, Aggregatable, SuppressMenu, SuppressMovable, } = props.settings ?? {};
     const handleColumnTypeChange = (columnType, checked) => {
@@ -30,9 +31,9 @@ export const SpecialColumnSettingsWizardStep = (props) => {
             ...values,
         });
     };
-    return (_jsxs(_Fragment, { children: [_jsxs(Tabs, { className: "twa:mt-2", autoFocus: false, children: [_jsx(Tabs.Tab, { children: "Column Properties" }), _jsx(Tabs.Content, { children: _jsx(Flex, { flexDirection: "column", children: _jsxs(FormLayout, { className: "twa:w-full", columns: [
-                                    { name: 'first', size: '30%' },
-                                    { size: '30%', name: 'second' },
-                                    { size: '30%', name: 'third' },
-                                ], children: [_jsxs(FormRow, { children: [_jsx(CheckBox, { "data-name": "filterable", checked: Filterable, onChange: (Filterable) => onSettingsChange({ Filterable }), disabled: !adaptable.api.optionsApi.getFilterOptions().enableFilterOnSpecialColumns, children: "Filterable" }), _jsx(CheckBox, { "data-name": "resizable", checked: Resizable, onChange: (Resizable) => onSettingsChange({ Resizable }), children: "Resizable" }), _jsx(CheckBox, { "data-name": "groupable", checked: Groupable, onChange: (Groupable) => onSettingsChange({ Groupable }), children: "Groupable" })] }), _jsxs(FormRow, { children: [_jsx(CheckBox, { "data-name": "sortable", checked: Sortable, onChange: (Sortable) => onSettingsChange({ Sortable }), children: "Sortable" }), _jsx(CheckBox, { "data-name": "pivotable", checked: Pivotable, onChange: (Pivotable) => onSettingsChange({ Pivotable }), children: "Pivotable" }), _jsx(CheckBox, { "data-name": "aggregatable", checked: Aggregatable, onChange: (Aggregatable) => onSettingsChange({ Aggregatable }), children: "Aggregatable" })] }), _jsxs(FormRow, { children: [_jsx(CheckBox, { "data-name": "suppres-smenu", checked: SuppressMenu, onChange: (SuppressMenu) => onSettingsChange({ SuppressMenu }), children: "Suppress Menu" }), _jsx(CheckBox, { "data-name": "suppres-movable", checked: SuppressMovable, onChange: (SuppressMovable) => onSettingsChange({ SuppressMovable }), children: "Suppress Movable" }), _jsx(CheckBox, { disabled: true, checked: props.isEditable, children: "Editable" })] })] }) }) })] }), Boolean(possibleColumnTypes?.length) && (_jsxs(Tabs, { className: "twa:mt-2", autoFocus: false, children: [_jsx(Tabs.Tab, { children: "Column Types" }), _jsx(Tabs.Content, { children: _jsx(FormLayout, { columns: [{ name: 'first', size: '30%' }, { name: 'second' }], children: chunk(possibleColumnTypes ?? [], 2)?.map(([first, second]) => (_jsxs(FormRow, { children: [first && (_jsx(CheckBox, { "data-name": first, onChange: (checked) => handleColumnTypeChange(first, checked), checked: props.settings?.ColumnTypes?.includes?.(first), children: first })), second && (_jsx(CheckBox, { "data-name": second, onChange: (checked) => handleColumnTypeChange(second, checked), checked: props.settings?.ColumnTypes?.includes?.(second), children: second }))] }, first))) }) })] }))] }));
+    return (_jsxs(Flex, { flexDirection: "column", className: "twa:gap-3", children: [_jsxs(Card, { shadow: false, children: [_jsxs(Card.Title, { children: [_jsx(Box, { className: "twa:font-medium", children: "Column Properties" }), _jsxs(Box, { className: "twa:text-xs twa:opacity-70 twa:font-normal twa:max-w-[520px]", children: ["Choose which grid ", behaviourSpellingVariant, " apply to this Column"] })] }), _jsx(Card.Body, { children: _jsxs(FormLayout, { className: "twa:w-full", columns: [
+                                { name: 'first', size: '30%' },
+                                { size: '30%', name: 'second' },
+                                { size: '30%', name: 'third' },
+                            ], children: [_jsxs(FormRow, { children: [_jsx(CheckBox, { "data-name": "filterable", checked: Filterable, onChange: (Filterable) => onSettingsChange({ Filterable }), disabled: !adaptable.api.optionsApi.getFilterOptions().enableFilterOnSpecialColumns, children: "Filterable" }), _jsx(CheckBox, { "data-name": "resizable", checked: Resizable, onChange: (Resizable) => onSettingsChange({ Resizable }), children: "Resizable" }), _jsx(CheckBox, { "data-name": "groupable", checked: Groupable, onChange: (Groupable) => onSettingsChange({ Groupable }), children: "Groupable" })] }), _jsxs(FormRow, { children: [_jsx(CheckBox, { "data-name": "sortable", checked: Sortable, onChange: (Sortable) => onSettingsChange({ Sortable }), children: "Sortable" }), _jsx(CheckBox, { "data-name": "pivotable", checked: Pivotable, onChange: (Pivotable) => onSettingsChange({ Pivotable }), children: "Pivotable" }), _jsx(CheckBox, { "data-name": "aggregatable", checked: Aggregatable, onChange: (Aggregatable) => onSettingsChange({ Aggregatable }), children: "Aggregatable" })] }), _jsxs(FormRow, { children: [_jsx(CheckBox, { "data-name": "suppres-smenu", checked: SuppressMenu, onChange: (SuppressMenu) => onSettingsChange({ SuppressMenu }), children: "Suppress Menu" }), _jsx(CheckBox, { "data-name": "suppres-movable", checked: SuppressMovable, onChange: (SuppressMovable) => onSettingsChange({ SuppressMovable }), children: "Suppress Movable" }), _jsx(CheckBox, { disabled: true, checked: props.isEditable, children: "Editable" })] })] }) })] }), Boolean(possibleColumnTypes?.length) && (_jsxs(Card, { shadow: false, children: [_jsxs(Card.Title, { children: [_jsx(Box, { className: "twa:font-medium", children: "Column Types" }), _jsx(Box, { className: "twa:text-xs twa:opacity-70 twa:font-normal twa:max-w-[520px]", children: "Assign custom column types to this column" })] }), _jsx(Card.Body, { children: _jsx(FormLayout, { columns: [{ name: 'first', size: '30%' }, { name: 'second' }], children: chunk(possibleColumnTypes ?? [], 2)?.map(([first, second]) => (_jsxs(FormRow, { children: [first && (_jsx(CheckBox, { "data-name": first, onChange: (checked) => handleColumnTypeChange(first, checked), checked: props.settings?.ColumnTypes?.includes?.(first), children: first })), second && (_jsx(CheckBox, { "data-name": second, onChange: (checked) => handleColumnTypeChange(second, checked), checked: props.settings?.ColumnTypes?.includes?.(second), children: second }))] }, first))) }) })] }))] }));
 };

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

@@ -22,5 +22,10 @@ export interface BadgePillStyleEditorProps {
  * - **No** `FontSize` — pills inherit cell font sizing.
  */
 export declare const BadgePillStyleEditor: React.FunctionComponent<BadgePillStyleEditorProps>;
+/** Descriptive pill properties for summary panels (`Label: value` strings). */
+export declare const getBadgePillStyleSummaryItems: (pill: BadgePillStyle | undefined) => {
+    label: string;
+    value: string;
+}[];
 /** Compact summary tags for a {@link BadgePillStyle}; used by wizard summaries. */
 export declare const renderBadgePillStyleSummaryTags: (pill: BadgePillStyle | undefined) => React.JSX.Element | null;

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

@@ -37,28 +37,37 @@ export const BadgePillStyleEditor = (props) => {
     const disabledClass = disabled ? 'twa:opacity-50 twa:pointer-events-none' : '';
     return (_jsx(Box, { className: "twa:mt-2 twa:rounded-standard twa:border twa:border-border twa:overflow-hidden twa:shadow-sm", children: _jsx(Box, { className: "twa:p-3", children: _jsxs(FormLayout, { columns: [LABEL_COLUMN, CHILD_COLUMN], sizes: ['7.5rem', '1fr'], gridColumnGap: "0.75rem", children: [_jsx(FormRow, { label: "Background", children: _jsxs(Flex, { alignItems: "center", className: "twa:gap-2", children: [_jsx(CheckBox, { disabled: disabled, checked: !!pill.BackColor, onChange: (checked) => update({ BackColor: checked ? pill.BackColor ?? '#cccccc' : undefined }), children: "Set" }), _jsx(ColorPicker, { disabled: disabled || !pill.BackColor, api: props.api, value: pill.BackColor || '#cccccc', onChange: (c) => update({ BackColor: c }) })] }) }), _jsx(FormRow, { label: "Text", children: _jsxs(Flex, { alignItems: "center", className: "twa:gap-2", children: [_jsx(CheckBox, { disabled: disabled, checked: !!pill.ForeColor, onChange: (checked) => update({ ForeColor: checked ? pill.ForeColor ?? '#000000' : undefined }), children: "Set" }), _jsx(ColorPicker, { disabled: disabled || !pill.ForeColor, api: props.api, value: pill.ForeColor || '#000000', onChange: (c) => update({ ForeColor: c }) })] }) }), _jsx(FormRow, { label: "Border", children: _jsxs(Flex, { alignItems: "center", className: "twa:gap-2", children: [_jsx(CheckBox, { disabled: disabled, checked: !!pill.BorderColor, onChange: (checked) => update({ BorderColor: checked ? pill.BorderColor ?? '#000000' : undefined }), children: "Set" }), _jsx(ColorPicker, { disabled: disabled || !pill.BorderColor, api: props.api, value: pill.BorderColor || '#000000', onChange: (c) => update({ BorderColor: c }) })] }) }), _jsx(FormRow, { label: "Font", children: _jsx(Box, { className: disabledClass, children: _jsxs(Flex, { alignItems: "center", className: "twa:gap-2 twa:flex-wrap", children: [_jsxs(ToggleGroup, { children: [_jsx(Toggle, { pressed: pill.FontStyle === 'Italic', onPressedChange: (pressed) => update({ FontStyle: pressed ? 'Italic' : undefined }), icon: "italic" }), _jsx(Toggle, { pressed: pill.FontWeight === 'Bold', onPressedChange: (pressed) => update({ FontWeight: pressed ? 'Bold' : undefined }), icon: "bold" })] }), _jsxs(ToggleGroup, { children: [_jsx(Toggle, { pressed: pill.TextDecoration === 'Underline', onPressedChange: (pressed) => update({ TextDecoration: pressed ? 'Underline' : undefined }), icon: "underline" }), _jsx(Toggle, { pressed: pill.TextDecoration === 'LineThrough', onPressedChange: (pressed) => update({ TextDecoration: pressed ? 'LineThrough' : undefined }), icon: "strikethrough" }), _jsx(Toggle, { pressed: pill.TextDecoration === 'Overline', onPressedChange: (pressed) => update({ TextDecoration: pressed ? 'Overline' : undefined }), icon: "overline" })] })] }) }) })] }) }) }));
 };
-/** Compact summary tags for a {@link BadgePillStyle}; used by wizard summaries. */
-export const renderBadgePillStyleSummaryTags = (pill) => {
-    if (!pill)
-        return null;
-    const tags = [];
+/** Descriptive pill properties for summary panels (`Label: value` strings). */
+export const getBadgePillStyleSummaryItems = (pill) => {
+    if (!pill) {
+        return [];
+    }
+    const items = [];
     if (pill.BackColor) {
-        tags.push(_jsxs(Tag, { children: ["Bg ", pill.BackColor] }, "bg"));
+        items.push({ label: 'Pill Back Colour', value: pill.BackColor });
     }
     if (pill.ForeColor) {
-        tags.push(_jsxs(Tag, { children: ["Text ", pill.ForeColor] }, "fg"));
+        items.push({ label: 'Pill Fore Colour', value: pill.ForeColor });
     }
     if (pill.BorderColor) {
-        tags.push(_jsxs(Tag, { children: ["Border ", pill.BorderColor] }, "bc"));
+        items.push({ label: 'Pill Border Colour', value: pill.BorderColor });
+    }
+    if (pill.FontWeight === 'Bold') {
+        items.push({ label: 'Pill Font Weight', value: 'Bold' });
+    }
+    if (pill.FontStyle === 'Italic') {
+        items.push({ label: 'Pill Font Style', value: 'Italic' });
     }
-    if (pill.FontWeight === 'Bold')
-        tags.push(_jsx(Tag, { children: "Bold" }, "b"));
-    if (pill.FontStyle === 'Italic')
-        tags.push(_jsx(Tag, { children: "Italic" }, "i"));
     if (pill.TextDecoration && pill.TextDecoration !== 'None') {
-        tags.push(_jsx(Tag, { children: pill.TextDecoration }, "td"));
+        items.push({ label: 'Pill Text Decoration', value: pill.TextDecoration });
     }
-    if (tags.length === 0)
+    return items;
+};
+/** Compact summary tags for a {@link BadgePillStyle}; used by wizard summaries. */
+export const renderBadgePillStyleSummaryTags = (pill) => {
+    const items = getBadgePillStyleSummaryItems(pill);
+    if (!items.length) {
         return null;
-    return (_jsx(Flex, { alignItems: "center", className: "twa:gap-1 twa:flex-wrap", children: tags }));
+    }
+    return (_jsx(Flex, { alignItems: "center", className: "twa:gap-1 twa:flex-wrap", children: items.map(({ label, value }) => (_jsx(Tag, { children: `${label}: ${value}` }, label))) }));
 };

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

@@ -1,6 +1,14 @@
 import * as React from 'react';
 import { StyledColumn } from '../../../types';
-export declare const renderBadgeSummary: (styledColumn: StyledColumn) => React.JSX.Element;
+import { AdaptableApi } from '../../../Api/AdaptableApi';
+export declare const getStyledColumnBadgeDefinitionViewValueGroups: (styledColumn: StyledColumn, api: AdaptableApi) => string[][];
+export declare const getStyledColumnBadgeDefinitionViewValues: (styledColumn: StyledColumn, api: AdaptableApi) => string[];
+export declare const getStyledColumnBadgeStyleViewValues: (styledColumn: StyledColumn, api?: AdaptableApi) => string[];
+export declare const renderBadgeDefinitionSummaryTags: (styledColumn: StyledColumn, api: AdaptableApi) => React.JSX.Element;
+export declare const StyledColumnBadgeDefinitionsView: React.FunctionComponent<React.PropsWithChildren<{
+    data: StyledColumn;
+}>>;
+export declare const renderBadgeSummary: (styledColumn: StyledColumn, api?: AdaptableApi) => React.JSX.Element;
 export interface StyledColumnBadgeSectionProps {
     onChange: (data: StyledColumn) => void;
 }
@@ -9,4 +17,4 @@ export interface StyledColumnBadgeStyleSectionProps {
     onChange: (data: StyledColumn) => void;
 }
 export declare const StyledColumnBadgeStyleSection: React.FunctionComponent<StyledColumnBadgeStyleSectionProps>;
-export declare const renderBadgeStyleSummary: (styledColumn: StyledColumn) => React.JSX.Element;
+export declare const renderBadgeStyleSummary: (styledColumn: StyledColumn, api?: AdaptableApi) => React.JSX.Element;

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

@@ -9,7 +9,6 @@ import ObjectFactory from '../../../Utilities/ObjectFactory';
 import { AdaptableIconSelector } from '../../Components/AdaptableIconSelector';
 import { PredicateEditor } from '../../Components/PredicateEditor/PredicateEditor';
 import { useOnePageAdaptableWizardContext } from '../../Wizard/OnePageAdaptableWizard';
-import { StyledColumnBadgePreview } from './StyledColumnWizardStyleSection/Components/StyledColumnBadgePreview';
 import { Badge } from '../../Components/Badge';
 import { AdaptableIconComponent } from '../../Components/AdaptableIconComponent';
 import { DEFAULT_INTEGER_DISPLAY_VALUE, DEFAULT_STRING_DISPLAY_VALUE, } from '../../../Utilities/Constants/GeneralConstants';
@@ -18,9 +17,11 @@ import { Flex, Box } from '../../../components/Flex';
 import Radio, { RadioGroup } from '../../../components/Radio';
 import { NumberInput } from '../../../components/Input/NumberInput';
 import { Toggle, ToggleGroup } from '../../../components/Toggle';
-import { BadgePillStyleEditor } from './BadgePillStyleEditor';
-import { renderCellStyleSummaryTags, StyledColumnCellStyleEditor, } from './StyledColumnSliceStyleEditors';
+import { BadgePillStyleEditor, getBadgePillStyleSummaryItems } from './BadgePillStyleEditor';
+import { getCellBoxStyleSummaryItems, getCellFontStyleSummaryItems, StyledColumnCellStyleEditor, } from './StyledColumnSliceStyleEditors';
 import { Card } from '../../../components/Card';
+import { useAdaptable } from '../../AdaptableContext';
+import { StyledColumnBadgePreviewCard } from './StyledColumnWizardStyleSection/Components/StyledColumnBadgePreview';
 const BADGE_STYLE_FORM_SIZES = ['200px', '1fr'];
 const SHAPE_CHOICES = [
     { value: 'Pill', label: 'Pill' },
@@ -94,8 +95,88 @@ const BadgeEditor = (props) => {
                                             });
                                         } }), _jsx(Box, { className: "twa:text-xs twa:opacity-70", children: "px between icon and text \u2014 leave blank to follow Density" })] }) }))] }) })] }));
 };
-export const renderBadgeSummary = (styledColumn) => {
-    return _jsx(StyledColumnBadgePreview, { data: styledColumn });
+export const getStyledColumnBadgeDefinitionViewValueGroups = (styledColumn, api) => {
+    const badgeStyle = styledColumn.BadgeStyle;
+    if (!badgeStyle?.Badges?.length) {
+        return [];
+    }
+    return badgeStyle.Badges.map((badge, index) => {
+        const items = [];
+        let rule = 'Always';
+        if (badge.Predicate) {
+            rule = api.predicateApi.predicateToString(badge.Predicate);
+        }
+        else if (badge.Expression) {
+            rule = badge.Expression.BooleanExpression;
+        }
+        items.push(`Badge ${index + 1}: ${rule}`);
+        items.push(`Shape: ${badge.Shape ?? 'Rounded'}`);
+        getBadgePillStyleSummaryItems(badge.PillStyle).forEach(({ label, value }) => {
+            items.push(`${label}: ${value}`);
+        });
+        if (badge.Icon) {
+            const iconName = 'name' in badge.Icon ? badge.Icon.name : 'Custom';
+            items.push(`Icon: ${iconName}`);
+        }
+        if (badge.IconOnly) {
+            items.push('Icon Only: Yes');
+        }
+        if (badge.Icon && badge.IconPosition) {
+            items.push(`Icon Position: ${badge.IconPosition}`);
+        }
+        if (typeof badge.IconGap === 'number') {
+            items.push(`Icon Gap: ${badge.IconGap}px`);
+        }
+        return items;
+    });
+};
+export const getStyledColumnBadgeDefinitionViewValues = (styledColumn, api) => {
+    return getStyledColumnBadgeDefinitionViewValueGroups(styledColumn, api).flat();
+};
+const isBadgeArrayColumn = (styledColumn, api) => {
+    if (!api || !styledColumn.ColumnId) {
+        return false;
+    }
+    const dataType = api.columnApi.getColumnDataTypeForColumnId(styledColumn.ColumnId);
+    return dataType === 'numberArray' || dataType === 'textArray';
+};
+export const getStyledColumnBadgeStyleViewValues = (styledColumn, api) => {
+    const badgeStyle = styledColumn.BadgeStyle;
+    if (!badgeStyle) {
+        return [];
+    }
+    const items = [`Density: ${badgeStyle.Density ?? 'Normal'}`];
+    if (isBadgeArrayColumn(styledColumn, api)) {
+        if (typeof badgeStyle.Spacing === 'number') {
+            items.push(`Spacing: ${badgeStyle.Spacing}px`);
+        }
+        items.push(`Overflow: ${badgeStyle.OverflowMode ?? 'Truncate'}`);
+    }
+    getCellFontStyleSummaryItems(badgeStyle.Font).forEach(({ label, value }) => {
+        items.push(`${label}: ${value}`);
+    });
+    getCellBoxStyleSummaryItems(badgeStyle.Cell).forEach(({ label, value }) => {
+        items.push(`${label}: ${value}`);
+    });
+    return items;
+};
+export const renderBadgeDefinitionSummaryTags = (styledColumn, api) => {
+    const groups = getStyledColumnBadgeDefinitionViewValueGroups(styledColumn, api);
+    if (!groups.length) {
+        return _jsx(Tag, { children: "No Badges Defined" });
+    }
+    return (_jsx(Flex, { flexDirection: "column", className: "twa:gap-2", children: groups.map((items, index) => (_jsx(Flex, { alignItems: "center", className: "twa:flex-wrap twa:gap-2", children: items.map((item, itemIndex) => (_jsx(Tag, { children: item }, `${index}-${itemIndex}`))) }, index))) }));
+};
+export const StyledColumnBadgeDefinitionsView = ({ data }) => {
+    const { api } = useAdaptable();
+    return renderBadgeDefinitionSummaryTags(data, api);
+};
+export const renderBadgeSummary = (styledColumn, api) => {
+    if (!api) {
+        const { api: adaptableApi } = useOnePageAdaptableWizardContext();
+        api = adaptableApi;
+    }
+    return renderBadgeDefinitionSummaryTags(styledColumn, api);
 };
 export const StyledColumnBadgeSection = (props) => {
     const { data } = useOnePageAdaptableWizardContext();
@@ -176,17 +257,16 @@ export const StyledColumnBadgeStyleSection = (props) => {
                                             delete cleaned.Cell;
                                             props.onChange({ ...data, BadgeStyle: cleaned });
                                         }
-                                    } }) })] })] })] }));
+                                    } }) })] })] }), _jsx(StyledColumnBadgePreviewCard, { data: data })] }));
 };
-export const renderBadgeStyleSummary = (styledColumn) => {
-    const badgeStyle = styledColumn?.BadgeStyle;
-    if (!badgeStyle) {
-        return _jsx(Tag, { children: "\u2014" });
+export const renderBadgeStyleSummary = (styledColumn, api) => {
+    if (!api) {
+        const { api: adaptableApi } = useOnePageAdaptableWizardContext();
+        api = adaptableApi;
+    }
+    const items = getStyledColumnBadgeStyleViewValues(styledColumn, api);
+    if (!items.length) {
+        return _jsx(Tag, { children: "No Style Defined" });
     }
-    const density = badgeStyle.Density ?? 'Normal';
-    const spacing = typeof badgeStyle.Spacing === 'number' ? badgeStyle.Spacing : null;
-    const overflow = badgeStyle.OverflowMode ?? 'Truncate';
-    const alignment = badgeStyle.Font?.Alignment;
-    const cellTags = renderCellStyleSummaryTags(badgeStyle.Cell);
-    return (_jsxs(Flex, { alignItems: "center", className: "twa:flex-wrap twa:gap-2", children: [_jsxs(Box, { children: ["Density: ", _jsx(Tag, { children: density })] }), spacing != null && (_jsxs(Box, { children: ["Spacing: ", _jsxs(Tag, { children: [spacing, "px"] })] })), _jsxs(Box, { children: ["Overflow: ", _jsx(Tag, { children: overflow })] }), alignment && (_jsxs(Box, { children: ["Align: ", _jsx(Tag, { children: alignment })] })), cellTags && _jsxs(Box, { children: ["Cell: ", cellTags] })] }));
+    return (_jsx(Flex, { alignItems: "center", className: "twa:flex-wrap twa:gap-2", children: items.map((item) => (_jsx(Tag, { children: item }, item))) }));
 };

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

@@ -39,10 +39,24 @@ export interface StyledColumnCellStyleEditorProps {
  * key is unset) which the host wizard merges back into its `*Style` patch.
  */
 export declare const StyledColumnCellStyleEditor: React.FunctionComponent<StyledColumnCellStyleEditorProps>;
+/**
+ * Descriptive font properties for summary panels (`Label: value` strings).
+ */
+export declare const getCellFontStyleSummaryItems: (font: CellFontStyle | undefined) => {
+    label: string;
+    value: string;
+}[];
 /**
  * Compact summary tags for the Font slice; used by wizard summary panels.
  */
 export declare const renderFontStyleSummaryTags: (font: CellFontStyle | undefined) => React.JSX.Element | null;
+/**
+ * Descriptive cell box properties for summary panels (`Label: value` strings).
+ */
+export declare const getCellBoxStyleSummaryItems: (cell: CellBoxStyle | undefined) => {
+    label: string;
+    value: string;
+}[];
 /**
  * Compact summary tags for the Cell slice; used by wizard summary panels.
  */

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

@@ -1,4 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as React from 'react';
 import { CheckBox } from '../../../components/CheckBox';
 import { ColorPicker } from '../../../components/ColorPicker';
 import FormLayout, { FormRow } from '../../../components/FormLayout';
@@ -69,9 +70,11 @@ export const StyledColumnFontStyleEditor = (props) => {
  */
 export const StyledColumnCellStyleEditor = (props) => {
     const cell = props.value ?? {};
+    const cellRef = React.useRef(cell);
+    cellRef.current = cell;
     const { disabled } = props;
     const update = (patch) => {
-        const next = { ...cell, ...patch };
+        const next = { ...cellRef.current, ...patch };
         Object.keys(next).forEach((k) => {
             const v = next[k];
             if (v === undefined || v === null || v === '') {
@@ -88,51 +91,69 @@ export const StyledColumnCellStyleEditor = (props) => {
     return (_jsx(Box, { children: _jsxs(FormLayout, { className: "twa:ml-2", sizes: [...FORM_SIZES], children: [_jsx(FormRow, { label: "Background:", children: _jsxs(Flex, { alignItems: "center", className: "twa:ml-2 twa:gap-2", children: [_jsx(CheckBox, { disabled: disabled, checked: !!cell.BackColor, onChange: (checked) => update({ BackColor: checked ? cell.BackColor ?? '#ffffff' : undefined }), children: "Set" }), _jsx(ColorPicker, { disabled: disabled || !cell.BackColor, api: props.api, value: cell.BackColor || '#ffffff', onChange: (c) => update({ BackColor: c }) })] }) }), _jsx(FormRow, { label: "Border colour:", children: _jsxs(Flex, { alignItems: "center", className: "twa:ml-2 twa:gap-2", children: [_jsx(CheckBox, { disabled: disabled, checked: !!cell.BorderColor, onChange: (checked) => update({ BorderColor: checked ? cell.BorderColor ?? '#000000' : undefined }), children: "Set" }), _jsx(ColorPicker, { disabled: disabled || !cell.BorderColor, api: props.api, value: cell.BorderColor || '#000000', onChange: (c) => update({ BorderColor: c }) })] }) }), _jsx(FormRow, { label: "Border radius:", children: _jsxs(Flex, { alignItems: "center", className: "twa:ml-2 twa:gap-2", children: [_jsx(NumberInput, { disabled: disabled, className: "twa:w-20", value: cell.BorderRadius, min: 0, max: 64, step: 1, onChange: (v) => update({ BorderRadius: v === undefined || isNaN(Number(v)) ? undefined : v }) }), _jsx(Box, { className: "twa:text-xs twa:opacity-70", children: "px" })] }) })] }) }));
 };
 /**
- * Compact summary tags for the Font slice; used by wizard summary panels.
+ * Descriptive font properties for summary panels (`Label: value` strings).
  */
-export const renderFontStyleSummaryTags = (font) => {
-    if (!font)
-        return null;
-    const tags = [];
+export const getCellFontStyleSummaryItems = (font) => {
+    if (!font) {
+        return [];
+    }
+    const items = [];
     if (font.ForeColor) {
-        tags.push(_jsxs(Tag, { children: ["Text ", font.ForeColor] }, "fg"));
+        items.push({ label: 'Fore Colour', value: font.ForeColor });
     }
     if (font.FontWeight === 'Bold') {
-        tags.push(_jsx(Tag, { children: "Bold" }, "b"));
+        items.push({ label: 'Font Weight', value: 'Bold' });
     }
     if (font.FontStyle === 'Italic') {
-        tags.push(_jsx(Tag, { children: "Italic" }, "i"));
+        items.push({ label: 'Font Style', value: 'Italic' });
     }
     if (font.TextDecoration && font.TextDecoration !== 'None') {
-        tags.push(_jsx(Tag, { children: font.TextDecoration }, "td"));
+        items.push({ label: 'Text Decoration', value: font.TextDecoration });
     }
     if (font.FontSize) {
-        tags.push(_jsx(Tag, { children: font.FontSize }, "fs"));
+        items.push({ label: 'Font Size', value: font.FontSize });
     }
     if (font.Alignment && font.Alignment !== 'Default') {
-        tags.push(_jsxs(Tag, { children: ["Align ", font.Alignment] }, "al"));
+        items.push({ label: 'Alignment', value: font.Alignment });
     }
-    if (tags.length === 0)
-        return null;
-    return (_jsx(Flex, { alignItems: "center", className: "twa:gap-1 twa:flex-wrap", children: tags }));
+    return items;
 };
 /**
- * Compact summary tags for the Cell slice; used by wizard summary panels.
+ * Compact summary tags for the Font slice; used by wizard summary panels.
  */
-export const renderCellStyleSummaryTags = (cell) => {
-    if (!cell)
+export const renderFontStyleSummaryTags = (font) => {
+    const items = getCellFontStyleSummaryItems(font);
+    if (!items.length) {
         return null;
-    const tags = [];
+    }
+    return (_jsx(Flex, { alignItems: "center", className: "twa:gap-1 twa:flex-wrap", children: items.map(({ label, value }) => (_jsx(Tag, { children: `${label}: ${value}` }, label))) }));
+};
+/**
+ * Descriptive cell box properties for summary panels (`Label: value` strings).
+ */
+export const getCellBoxStyleSummaryItems = (cell) => {
+    if (!cell) {
+        return [];
+    }
+    const items = [];
     if (cell.BackColor) {
-        tags.push(_jsxs(Tag, { children: ["Bg ", cell.BackColor] }, "bg"));
+        items.push({ label: 'Back Colour', value: cell.BackColor });
     }
     if (cell.BorderColor) {
-        tags.push(_jsxs(Tag, { children: ["Border ", cell.BorderColor] }, "bc"));
+        items.push({ label: 'Border Colour', value: cell.BorderColor });
     }
     if (cell.BorderRadius != null) {
-        tags.push(_jsxs(Tag, { children: ["Radius ", cell.BorderRadius, "px"] }, "br"));
+        items.push({ label: 'Border Radius', value: `${cell.BorderRadius}px` });
     }
-    if (tags.length === 0)
+    return items;
+};
+/**
+ * Compact summary tags for the Cell slice; used by wizard summary panels.
+ */
+export const renderCellStyleSummaryTags = (cell) => {
+    const items = getCellBoxStyleSummaryItems(cell);
+    if (!items.length) {
         return null;
-    return (_jsx(Flex, { alignItems: "center", className: "twa:gap-1 twa:flex-wrap", children: tags }));
+    }
+    return (_jsx(Flex, { alignItems: "center", className: "twa:gap-1 twa:flex-wrap", children: items.map(({ label, value }) => (_jsx(Tag, { children: `${label}: ${value}` }, label))) }));
 };