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

package/src/Utilities/Helpers/percentBarPreviewHelper.d.ts

@@ -0,0 +1,19 @@
+import { PercentBarStyle, StyledColumn } from '../../AdaptableState/StyledColumnState';
+export declare const hasPercentBarRangesConfigured: (pb: PercentBarStyle | undefined) => boolean;
+/** Illustrative scale for preview — shows negatives when origin is Auto or Zero. */
+export declare const getPercentBarPreviewScale: (pb: PercentBarStyle) => {
+    min: number;
+    max: number;
+};
+export declare const getPercentBarPreviewSampleValues: (pb: PercentBarStyle) => number[];
+export type PercentBarPreviewGeometry = {
+    barLeftPercent: number;
+    barWidthPercent: number;
+    percentageValue: number;
+    barColor?: string;
+};
+export declare const getPercentBarPreviewGeometry: (numericValue: number, pb: PercentBarStyle, min: number, max: number) => PercentBarPreviewGeometry;
+export declare const formatPercentBarPreviewCellText: (numericValue: number, percentageValue: number, pb: PercentBarStyle) => string;
+export declare const getPercentBarPreviewTrackColor: (pb: PercentBarStyle) => string | undefined;
+export declare const getPercentBarPreviewResolvedBarColor: (color: string | undefined) => string | undefined;
+export declare const hasPercentBarStylePreview: (styledColumn: StyledColumn) => boolean;

package/src/Utilities/Helpers/percentBarPreviewHelper.js

@@ -0,0 +1,143 @@
+import { getVariableColor } from './StyleHelper';
+import clamp from '../utils/clamp';
+import { STYLED_COLUMN_PREVIEW_SAMPLE_COUNT, ZERO_CENTRED_PREVIEW_SCALE_MAX, ZERO_CENTRED_PREVIEW_SCALE_MIN, } from './StyledColumnGradientHelper';
+const evenlySpacedValues = (min, max, count) => {
+    if (count <= 1) {
+        return [min];
+    }
+    const step = (max - min) / (count - 1);
+    return Array.from({ length: count }, (_, i) => min + step * i);
+};
+const toFraction = (value, min, max) => {
+    if (max === min) {
+        return 0;
+    }
+    return clamp((value - min) / (max - min), 0, 1);
+};
+const resolveOrigin = (percentBarStyle, cellValue, min, max) => {
+    const origin = percentBarStyle.Origin ?? 'Auto';
+    if (typeof origin === 'number') {
+        return origin;
+    }
+    if (origin === 'Zero') {
+        return 0;
+    }
+    if (origin === 'Min') {
+        return min;
+    }
+    if (min < 0 || max < 0 || cellValue < 0) {
+        return 0;
+    }
+    return min;
+};
+const columnComparisonUsesCentredAxis = (origin) => {
+    const o = origin ?? 'Auto';
+    if (typeof o === 'number') {
+        return false;
+    }
+    return o === 'Zero' || o === 'Auto';
+};
+const resolveRangeEndpoint = (endpoint, scaleMin, scaleMax) => {
+    if (endpoint === 'Col-Min') {
+        return scaleMin;
+    }
+    if (endpoint === 'Col-Max') {
+        return scaleMax;
+    }
+    if (typeof endpoint === 'number') {
+        return endpoint;
+    }
+    return scaleMin;
+};
+const getPreviewBarColor = (value, pb, scaleMin, scaleMax) => {
+    if (pb.ColumnComparison) {
+        return pb.ColumnComparison.Color;
+    }
+    for (const range of pb.CellRanges ?? []) {
+        const rMin = resolveRangeEndpoint(range.Min, scaleMin, scaleMax);
+        const rMax = resolveRangeEndpoint(range.Max, scaleMin, scaleMax);
+        if (value >= Math.min(rMin, rMax) && value <= Math.max(rMin, rMax)) {
+            return range.Color;
+        }
+    }
+    return pb.CellRanges?.[0]?.Color;
+};
+export const hasPercentBarRangesConfigured = (pb) => !!(pb?.CellRanges?.length || pb?.ColumnComparison);
+/** Illustrative scale for preview — shows negatives when origin is Auto or Zero. */
+export const getPercentBarPreviewScale = (pb) => {
+    const origin = pb.Origin ?? 'Auto';
+    if (origin === 'Zero' || origin === 'Auto') {
+        return { min: ZERO_CENTRED_PREVIEW_SCALE_MIN, max: ZERO_CENTRED_PREVIEW_SCALE_MAX };
+    }
+    return { min: 0, max: 100 };
+};
+export const getPercentBarPreviewSampleValues = (pb) => {
+    const { min, max } = getPercentBarPreviewScale(pb);
+    return evenlySpacedValues(min, max, STYLED_COLUMN_PREVIEW_SAMPLE_COUNT);
+};
+export const getPercentBarPreviewGeometry = (numericValue, pb, min, max) => {
+    let percentageValue = 0;
+    let barLeftPercent = 0;
+    let barWidthPercent = 0;
+    if (pb.ColumnComparison) {
+        const absMax = Math.abs(max);
+        percentageValue = absMax === 0 ? 0 : (numericValue / absMax) * 100;
+        const magnitude = Math.min(100, Math.abs(percentageValue));
+        const origin = pb.Origin ?? 'Auto';
+        const isCentred = columnComparisonUsesCentredAxis(origin);
+        if (isCentred) {
+            const halfWidth = magnitude / 2;
+            if (percentageValue >= 0) {
+                barLeftPercent = 50;
+                barWidthPercent = halfWidth;
+            }
+            else {
+                barLeftPercent = 50 - halfWidth;
+                barWidthPercent = halfWidth;
+            }
+        }
+        else {
+            barLeftPercent = 0;
+            barWidthPercent = magnitude;
+        }
+    }
+    else if (max === min) {
+        percentageValue = 0;
+        barLeftPercent = 0;
+        barWidthPercent = 0;
+    }
+    else {
+        percentageValue = ((clamp(numericValue, min, max) - min) / (max - min)) * 100;
+        const origin = resolveOrigin(pb, numericValue, min, max);
+        const valueFrac = toFraction(numericValue, min, max);
+        const originFrac = toFraction(origin, min, max);
+        const start = Math.min(valueFrac, originFrac);
+        const end = Math.max(valueFrac, originFrac);
+        barLeftPercent = start * 100;
+        barWidthPercent = (end - start) * 100;
+    }
+    return {
+        barLeftPercent,
+        barWidthPercent,
+        percentageValue,
+        barColor: getPreviewBarColor(numericValue, pb, min, max),
+    };
+};
+export const formatPercentBarPreviewCellText = (numericValue, percentageValue, pb) => {
+    const parts = [];
+    if (pb.CellText?.includes('CellValue')) {
+        parts.push(Number.isInteger(numericValue) ? String(numericValue) : numericValue.toFixed(1));
+    }
+    if (pb.CellText?.includes('PercentageValue')) {
+        parts.push(`${percentageValue.toFixed(0)}%`);
+    }
+    return parts.join(' ');
+};
+export const getPercentBarPreviewTrackColor = (pb) => {
+    if (pb.ColumnComparison) {
+        return pb.BackColor ?? undefined;
+    }
+    return pb.BackColor ?? undefined;
+};
+export const getPercentBarPreviewResolvedBarColor = (color) => color ? getVariableColor(color) : undefined;
+export const hasPercentBarStylePreview = (styledColumn) => hasPercentBarRangesConfigured(styledColumn.PercentBarStyle);

package/src/Utilities/ObjectFactory.d.ts

@@ -16,7 +16,7 @@ import { PlusMinusNudge } from '../AdaptableState/PlusMinusState';
 import { Shortcut } from '../AdaptableState/ShortcutState';
 import { NotificationsOptions } from '../AdaptableOptions/NotificationsOptions';
 import { CellSummmaryInfo } from '../AdaptableState/Common/CellSummary';
-import { AdaptableTheme, ChartDefinition, ColumnFilter, CommentThread, CustomDisplayFormatterContext, FlashingCellDefinition, RowDataChangedInfo, SpecialColumnSettings, SystemFilterPredicateId } from '../types';
+import { ChartDefinition, ColumnFilter, CommentThread, CustomDisplayFormatterContext, FlashingCellDefinition, RowDataChangedInfo, SpecialColumnSettings, SystemFilterPredicateId } from '../types';
 import { IRowNode } from 'ag-grid-enterprise';
 import { AdaptableApi, AdaptableComment, BadgeStyleDefinition, CellAddress, NamedQuery, PivotLayout, TableLayout } from '../../types';
 import { ToastOptions } from '../components/Toastify';
@@ -54,7 +54,6 @@ export declare function CreateEmptyStyledColumn(): StyledColumn;
 export declare function CreateDefaultStyledColumnBadge(): BadgeStyleDefinition;
 export declare function CreateEmptyChartDefinition(chartDefinition?: ChartDefinition): ChartDefinition;
 export declare function CreateCustomDisplayFormatterContext(value: any, node: IRowNode, abColumn: AdaptableColumn, api: AdaptableApi): CustomDisplayFormatterContext;
-export declare function CreateEmptyTheme(name?: string): AdaptableTheme;
 export declare function CreateEmptyCommentThread(cellAddress: CellAddress): CommentThread;
 export declare function CreateToastOptions(notificationsOptions: NotificationsOptions, { onClose, containerId }: {
     onClose?: VoidFunction;
@@ -91,7 +90,6 @@ export declare const ObjectFactory: {
     CreateEmptyStyledColumn: typeof CreateEmptyStyledColumn;
     CreateDefaultStyledColumnBadge: typeof CreateDefaultStyledColumnBadge;
     CreateEmptyChartDefinition: typeof CreateEmptyChartDefinition;
-    CreateEmptyTheme: typeof CreateEmptyTheme;
     CreateEmptyCommentThread: typeof CreateEmptyCommentThread;
     CreateAdaptableComment: typeof CreateAdaptableComment;
     CreateDefaultSchedule: typeof CreateDefaultSchedule;

package/src/Utilities/ObjectFactory.js

@@ -288,13 +288,6 @@ export function CreateCustomDisplayFormatterContext(value, node, abColumn, api)
         ...api.internalApi.buildBaseContext(),
     };
 }
-export function CreateEmptyTheme(name) {
-    return {
-        Uuid: createUuid(),
-        Name: name || 'Custom Theme',
-        Description: name || 'Custom Theme',
-    };
-}
 export function CreateEmptyCommentThread(cellAddress) {
     return {
         ...cellAddress,
@@ -389,7 +382,6 @@ export const ObjectFactory = {
     CreateEmptyStyledColumn,
     CreateDefaultStyledColumnBadge,
     CreateEmptyChartDefinition,
-    CreateEmptyTheme,
     CreateEmptyCommentThread,
     CreateAdaptableComment,
     CreateDefaultSchedule,

package/src/Utilities/Services/ThemeService.js

@@ -20,7 +20,7 @@ export class ThemeService {
         document.adoptedStyleSheets = [...document.adoptedStyleSheets].filter((sheet) => sheet !== this.styleSheetObject);
     }
     subscribe() {
-        const themeChangedUnsubscribe = this.api.eventApi.on('ThemeChanged', this.onThemeChanged);
+        const themeChangedUnsubscribe = this.api.eventApi.on('ThemeSelected', this.onThemeChanged);
         const prefferedColorSchemeUnsubscribe = this.attachPrefferedColorSchemeListener();
         this.unsubscribe = () => {
             themeChangedUnsubscribe();

package/src/View/Alert/Wizard/AlertBehaviourWizardSection.js

@@ -1,6 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { isRuleBasedAlertDefinition } from '../../../Utilities/Helpers/ScheduledAlertHelper';
-import { Tabs } from '../../../components/Tabs';
 import { useOnePageAdaptableWizardContext } from '../../Wizard/OnePageAdaptableWizard';
 import { CheckBox } from '../../../components/CheckBox';
 import { CodeBlock } from '../../../components/CodeBlock';
@@ -13,6 +12,7 @@ import { AlertType } from '../Utilities/getAlertType';
 import { Box, Flex } from '../../../components/Flex';
 import { Tag, TagBox } from '../../../components/Tag/Tag';
 import { SingleSelect } from '../../../components/NewSelect';
+import { Card } from '../../../components/Card';
 const HighlightStyle = (props) => {
     const adaptable = useAdaptable();
     const options = [
@@ -84,6 +84,7 @@ export const renderAlertBehaviourSummary = (alert, api, allowWrap = false) => {
 };
 export const AlertBehaviourWizardSection = (props) => {
     const { data, api } = useOnePageAdaptableWizardContext();
+    const behaviourSpellingVariant = api.internalApi.getCorrectEnglishVariant('Behaviour');
     const presentationProperties = data.AlertProperties ?? {};
     const ruleProperties = isRuleBasedAlertDefinition(data)
         ? (data.AlertProperties ?? {})
@@ -107,19 +108,19 @@ export const AlertBehaviourWizardSection = (props) => {
             },
         });
     };
-    return (_jsxs(Tabs, { children: [_jsx(Tabs.Tab, { children: api.internalApi.getCorrectEnglishVariant('Behaviour') }), _jsxs(Tabs.Content, { className: "twa:flex twa:flex-col twa:gap-1", children: [hasPreventCellEdit && (_jsxs(CheckBox, { "data-name": "prevent-cell-edit", style: { alignItems: 'flex-start' }, checked: ruleProperties.PreventEdit, disabled: true, children: ["Prevent Cell Edit", _jsx(Box, { className: "twa:text-2 twa:mt-1", children: "(automatically undo data change which triggered Alert)" })] })), hasHighlightCell && (_jsx(HighlightStyle, { dataName: "highlight-cell", highlight: ruleProperties.HighlightCell, label: "Highlight Cell", onChange: (HighlightCell) => {
-                            onChange({ HighlightCell });
-                        } })), hasHighlightRow && (_jsx(HighlightStyle, { dataName: "highlight-row", highlight: ruleProperties.HighlightRow, label: "Highlight Row", onChange: (HighlightRow) => {
-                            onChange({ HighlightRow });
-                        } })), hasJumpToCell && (_jsx(CheckBox, { "data-name": "jump-to-cell", checked: ruleProperties.JumpToCell, onChange: (JumpToCell) => {
-                            onChange({ JumpToCell });
-                        }, children: "Jump To Cell" })), hasJumpToRow && (_jsx(CheckBox, { "data-name": "jump-to-row", checked: ruleProperties.JumpToRow, onChange: (JumpToRow) => {
-                            onChange({ JumpToRow });
-                        }, children: "Jump To Row" })), showInSeparateDiv && (_jsxs(CheckBox, { "data-name": "show-in-div", checked: presentationProperties.ShowInDiv, onChange: (ShowInDiv) => {
-                            onChange({ ShowInDiv });
-                        }, children: ["Show in separate ", _jsx(CodeBlock, { children: `<div />` }), " element"] })), logToConsole && (_jsx(CheckBox, { "data-name": "log-to-console", checked: presentationProperties.LogToConsole, onChange: (LogToConsole) => {
-                            onChange({ LogToConsole });
-                        }, children: "Log To Console" })), showSystemStatusMessage && (_jsx(CheckBox, { "data-name": "system-status-message", checked: presentationProperties.DisplaySystemStatusMessage, onChange: (DisplaySystemStatusMessage) => {
-                            onChange({ DisplaySystemStatusMessage });
-                        }, children: "Show as System Status Message" }))] })] }));
+    return (_jsx(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: behaviourSpellingVariant }), _jsxs(Box, { className: "twa:text-xs twa:opacity-70 twa:font-normal twa:max-w-[520px]", children: ["Configure ", behaviourSpellingVariant.toLowerCase(), "s for the Alert when it fires"] })] }), _jsxs(Card.Body, { className: "twa:gap-1", children: [hasPreventCellEdit && (_jsxs(CheckBox, { "data-name": "prevent-cell-edit", style: { alignItems: 'flex-start' }, checked: ruleProperties.PreventEdit, disabled: true, children: ["Prevent Cell Edit", _jsx(Box, { className: "twa:text-2 twa:mt-1", children: "(automatically undo data change which triggered Alert)" })] })), hasHighlightCell && (_jsx(HighlightStyle, { dataName: "highlight-cell", highlight: ruleProperties.HighlightCell, label: "Highlight Cell", onChange: (HighlightCell) => {
+                                onChange({ HighlightCell });
+                            } })), hasHighlightRow && (_jsx(HighlightStyle, { dataName: "highlight-row", highlight: ruleProperties.HighlightRow, label: "Highlight Row", onChange: (HighlightRow) => {
+                                onChange({ HighlightRow });
+                            } })), hasJumpToCell && (_jsx(CheckBox, { "data-name": "jump-to-cell", checked: ruleProperties.JumpToCell, onChange: (JumpToCell) => {
+                                onChange({ JumpToCell });
+                            }, children: "Jump To Cell" })), hasJumpToRow && (_jsx(CheckBox, { "data-name": "jump-to-row", checked: ruleProperties.JumpToRow, onChange: (JumpToRow) => {
+                                onChange({ JumpToRow });
+                            }, children: "Jump To Row" })), showInSeparateDiv && (_jsxs(CheckBox, { "data-name": "show-in-div", checked: presentationProperties.ShowInDiv, onChange: (ShowInDiv) => {
+                                onChange({ ShowInDiv });
+                            }, children: ["Show in separate ", _jsx(CodeBlock, { children: `<div />` }), " element"] })), logToConsole && (_jsx(CheckBox, { "data-name": "log-to-console", checked: presentationProperties.LogToConsole, onChange: (LogToConsole) => {
+                                onChange({ LogToConsole });
+                            }, children: "Log To Console" })), showSystemStatusMessage && (_jsx(CheckBox, { "data-name": "system-status-message", checked: presentationProperties.DisplaySystemStatusMessage, onChange: (DisplaySystemStatusMessage) => {
+                                onChange({ DisplaySystemStatusMessage });
+                            }, children: "Show as System Status Message" }))] })] }) }));
 };

package/src/View/Alert/Wizard/AlertButtonsEditor.js

@@ -1,4 +1,4 @@
-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 SimpleButton from '../../../components/SimpleButton';
 import Input from '../../../components/Input';
 import FormLayout, { FormRow } from '../../../components/FormLayout';
@@ -9,6 +9,7 @@ import { AdaptableIconSelector } from '../../Components/AdaptableIconSelector';
 import { Box, Flex } from '../../../components/Flex';
 import sentenceCase from '../../../Utilities/utils/sentenceCase';
 import { SingleSelect } from '../../../components/NewSelect';
+import { Card } from '../../../components/Card';
 const TONE_OPTIONS = [
     {
         label: 'Tone: Use Alert Tone',
@@ -21,6 +22,14 @@ const TONE_OPTIONS = [
         };
     }),
 ];
+const AlertButtonPreview = ({ button, messageType }) => {
+    const buttonStyle = button.ButtonStyle ?? {};
+    const variant = (buttonStyle.variant ?? 'raised');
+    const tone = (buttonStyle.tone ??
+        messageType.toLowerCase());
+    const icon = button.icon && 'name' in button.icon && button.icon.name ? button.icon : undefined;
+    return (_jsx(SimpleButton, { variant: variant, tone: tone, icon: icon, className: "twa:cursor-default twa:pointer-events-none", tabIndex: -1, children: button.Label || 'Untitled' }));
+};
 function renderTone(option) {
     return (_jsxs(Flex, { flexDirection: "row", alignItems: "center", children: [_jsx(SimpleButton, { className: "twa:mr-2 twa:w-[10px] twa:h-[10px] twa:line-height-0 twa:rounded-[100%] twa:bg-current", tone: option.value, variant: "text" }), option.label] }));
 }
@@ -30,6 +39,7 @@ export const AlertButtonsEditor = (props) => {
         props.onChange(newButtons);
     };
     const alertDefinition = adaptableAlert.alertDefinition;
+    const messageType = alertDefinition?.MessageType ?? 'Info';
     // const rowAddedAlert =
     //  api.alertApi.internalApi.isAlertDefinitionForAddedRowChangeEvent(alertDefinition);
     const isRowRemovedAlert = api.alertApi.internalApi.isAlertDefinitionForRemovedRowChangeEvent(alertDefinition);
@@ -71,7 +81,7 @@ export const AlertButtonsEditor = (props) => {
             buttonCommands.push(ch.name);
         });
     }
-    return (_jsxs(_Fragment, { children: [_jsxs(Flex, { flexDirection: "row", alignItems: "center", justifyContent: "space-between", children: [_jsx(Box, { className: "twa:text-2 twa:mt-3 twa:mb-2", children: "Add Buttons to the Alert Notification, and set Actions to perform when the Button is clicked" }), _jsx(SimpleButton, { icon: "plus", onClick: () => {
+    return (_jsxs(Box, { className: "twa:mt-3", children: [_jsxs(Flex, { flexDirection: "row", alignItems: "center", justifyContent: "space-between", className: "twa:mb-3", children: [_jsx(Box, { className: "twa:text-2 twa:max-w-[520px]", children: "Add buttons to the notification and set actions to perform when clicked" }), _jsx(SimpleButton, { icon: "plus", onClick: () => {
                             onChange([
                                 ...(AlertButtons || []),
                                 {
@@ -81,109 +91,110 @@ export const AlertButtonsEditor = (props) => {
                                     },
                                 },
                             ]);
-                        }, children: "Add" })] }), AlertButtons.map((button, index) => {
-                let buttonStyle = button.ButtonStyle;
-                let buttonLabel = button.Label;
-                let btnCommands = [];
-                if (button.Command && typeof button.Command === 'string') {
-                    btnCommands = [button.Command];
-                }
-                else if (button.Command && Array.isArray(button.Command)) {
-                    btnCommands = button.Command;
-                }
-                // filter out the adaptable standard commands
-                const btnUserFunctions = btnCommands.filter((command) => !buttonCommands.includes(command));
-                const setVariant = (variant) => {
-                    onChange(AlertButtons.map((btn, i) => {
-                        if (i === index) {
-                            const buttonStyle = { ...btn.ButtonStyle };
-                            buttonStyle.variant = variant;
-                            return {
-                                ...btn,
-                                ButtonStyle: buttonStyle,
-                            };
-                        }
-                        return btn;
-                    }));
-                };
-                const setTone = (tone) => {
-                    onChange(AlertButtons.map((btn, i) => {
-                        if (i === index) {
-                            const buttonStyle = { ...btn.ButtonStyle };
-                            if (tone == null) {
-                                delete buttonStyle.tone;
+                        }, children: "Add" })] }), _jsx(Flex, { flexDirection: "column", className: "twa:gap-3", children: AlertButtons.map((button, index) => {
+                    let buttonStyle = button.ButtonStyle;
+                    let buttonLabel = button.Label;
+                    let btnCommands = [];
+                    if (button.Command && typeof button.Command === 'string') {
+                        btnCommands = [button.Command];
+                    }
+                    else if (button.Command && Array.isArray(button.Command)) {
+                        btnCommands = button.Command;
+                    }
+                    // filter out the adaptable standard commands
+                    const btnUserFunctions = btnCommands.filter((command) => !buttonCommands.includes(command));
+                    const setVariant = (variant) => {
+                        onChange(AlertButtons.map((btn, i) => {
+                            if (i === index) {
+                                const buttonStyle = { ...btn.ButtonStyle };
+                                buttonStyle.variant = variant;
+                                return {
+                                    ...btn,
+                                    ButtonStyle: buttonStyle,
+                                };
                             }
-                            else {
-                                buttonStyle.tone = tone;
+                            return btn;
+                        }));
+                    };
+                    const setTone = (tone) => {
+                        onChange(AlertButtons.map((btn, i) => {
+                            if (i === index) {
+                                const buttonStyle = { ...btn.ButtonStyle };
+                                if (tone == null) {
+                                    delete buttonStyle.tone;
+                                }
+                                else {
+                                    buttonStyle.tone = tone;
+                                }
+                                return {
+                                    ...btn,
+                                    ButtonStyle: buttonStyle,
+                                };
                             }
-                            return {
-                                ...btn,
-                                ButtonStyle: buttonStyle,
-                            };
+                            return btn;
+                        }));
+                    };
+                    const handleCommandChange = (checked, commandName) => {
+                        let commands = btnCommands;
+                        if (!checked) {
+                            // remove current Command
+                            commands = commands.filter((a) => a !== commandName);
                         }
-                        return btn;
-                    }));
-                };
-                const handleCommandChange = (checked, commandName) => {
-                    let commands = btnCommands;
-                    if (!checked) {
-                        // remove current Command
-                        commands = commands.filter((a) => a !== commandName);
-                    }
-                    else {
-                        commands = [...commands, commandName];
-                    }
-                    onChange(AlertButtons.map((btn, i) => {
-                        if (i === index) {
-                            return {
-                                ...btn,
-                                Command: commands.length ? commands : undefined,
-                            };
+                        else {
+                            commands = [...commands, commandName];
                         }
-                        return btn;
-                    }));
-                };
-                let iconSelector = null;
-                if (!button.icon || (button.icon && 'name' in button.icon)) {
-                    iconSelector = (_jsx(AdaptableIconSelector, { value: button.icon && 'name' in button.icon ? button?.icon?.name : '', onChange: (iconName) => {
-                            onChange(AlertButtons.map((btn) => {
-                                if (btn === button) {
-                                    return {
-                                        ...btn,
-                                        icon: {
-                                            name: iconName,
-                                        },
-                                    };
-                                }
-                                return btn;
-                            }));
-                        } }));
-                }
-                return (_jsx(Box, { className: `twa:ml-3 ${index ? 'twa:border-t twa:border-dashed twa:border-input-border' : ''}`, children: _jsxs(FormLayout, { className: "twa:mb-2 twa:pt-2", children: [_jsx(FormRow, { label: _jsx(Box, { className: "twa:text-2 twa:whitespace-nowrap", children: "Button Text" }), children: _jsxs(Flex, { flexDirection: "row", children: [_jsx(Input, { value: buttonLabel, className: "twa:mr-2 twa:w-[80px]", onChange: (e) => {
-                                                onChange(AlertButtons.map((btn, i) => {
-                                                    if (i === index) {
-                                                        return { ...btn, Label: e.target.value };
-                                                    }
-                                                    return btn;
-                                                }));
-                                            } }), _jsx(SingleSelect, { items: ['text', 'outlined', 'raised'].map((variant) => {
-                                                return {
-                                                    label: StringExtensions.CapitaliseFirstLetter(variant),
-                                                    value: variant,
-                                                };
-                                            }), renderValue: (option) => `Variant: ${option.label}`, value: buttonStyle?.variant, onValueChange: (value) => {
-                                                setVariant(value);
-                                            } }), _jsx(SingleSelect, { className: "twa:ml-2", items: TONE_OPTIONS, onValueChange: (value) => {
-                                                if (value === 'text') {
-                                                    setTone(null);
-                                                    return;
-                                                }
-                                                setTone(value);
-                                            }, value: buttonStyle?.tone ?? 'text' }), _jsx(SimpleButton, { icon: "close", tone: "error", disabled: AlertButtons.length <= 1, className: "twa:ml-1", variant: "text", tooltip: AlertButtons.length <= 1 ? 'Cannot remove last button' : 'Remove button', onClick: () => {
-                                                onChange(AlertButtons.filter((btn) => btn !== button));
-                                            } })] }) }), _jsxs(FormRow, { label: _jsx(Box, { className: "twa:text-2", children: "Actions" }), children: [buttonCommands.map((commandName) => {
-                                        return (_jsx(CheckBox, { className: "twa:mr-3", onChange: (checked) => handleCommandChange(checked, commandName), checked: button.Command === commandName ||
-                                                (Array.isArray(button.Command) && button.Command.includes(commandName)), children: _jsx(Box, { className: "twa:text-2", children: sentenceCase(commandName) }) }, commandName));
-                                    }), btnUserFunctions.length ? (_jsx(CheckBox, { checked: true, disabled: true, children: _jsxs(Box, { className: "twa:text-2", children: ["User function", btnUserFunctions.length > 1 ? 's' : '', ":", ' ', btnUserFunctions.join(', ')] }) })) : null] }), iconSelector && (_jsx(FormRow, { label: _jsx(Box, { className: "twa:text-2", children: "Icon" }), children: _jsx(Box, { children: iconSelector }) }))] }) }, index));
-            })] }));
+                        onChange(AlertButtons.map((btn, i) => {
+                            if (i === index) {
+                                return {
+                                    ...btn,
+                                    Command: commands.length ? commands : undefined,
+                                };
+                            }
+                            return btn;
+                        }));
+                    };
+                    let iconSelector = null;
+                    if (!button.icon || (button.icon && 'name' in button.icon)) {
+                        iconSelector = (_jsx(AdaptableIconSelector, { value: button.icon && 'name' in button.icon ? button?.icon?.name : '', onChange: (iconName) => {
+                                onChange(AlertButtons.map((btn) => {
+                                    if (btn === button) {
+                                        return {
+                                            ...btn,
+                                            icon: {
+                                                name: iconName,
+                                            },
+                                        };
+                                    }
+                                    return btn;
+                                }));
+                            } }));
+                    }
+                    return (_jsxs(Card, { shadow: false, children: [_jsxs(Card.Title, { className: "twa:justify-between twa:gap-3", children: [_jsxs(Box, { className: "twa:font-medium twa:shrink-0", children: ["Button ", index + 1] }), _jsx(Flex, { justifyContent: "center", className: "twa:flex-1 twa:min-w-0", children: _jsx(AlertButtonPreview, { button: button, messageType: messageType }) }), _jsx(SimpleButton, { icon: "close", tone: "error", disabled: AlertButtons.length <= 1, variant: "text", tooltip: AlertButtons.length <= 1 ? 'Cannot remove last button' : 'Remove button', onClick: () => {
+                                            onChange(AlertButtons.filter((btn) => btn !== button));
+                                        } })] }), _jsx(Card.Body, { children: _jsxs(FormLayout, { children: [_jsx(FormRow, { label: _jsx(Box, { className: "twa:text-2", children: "Button Text" }), children: _jsx(Input, { value: buttonLabel, className: "twa:max-w-[200px]", onChange: (e) => {
+                                                    onChange(AlertButtons.map((btn, i) => {
+                                                        if (i === index) {
+                                                            return { ...btn, Label: e.target.value };
+                                                        }
+                                                        return btn;
+                                                    }));
+                                                } }) }), _jsx(FormRow, { label: _jsx(Box, { className: "twa:text-2", children: "Style" }), children: _jsxs(Flex, { flexDirection: "row", className: "twa:gap-2 twa:flex-wrap", children: [_jsx(SingleSelect, { items: ['text', 'outlined', 'raised'].map((variant) => {
+                                                            return {
+                                                                label: StringExtensions.CapitaliseFirstLetter(variant),
+                                                                value: variant,
+                                                            };
+                                                        }), renderValue: (option) => `Variant: ${option.label}`, value: buttonStyle?.variant, onValueChange: (value) => {
+                                                            setVariant(value);
+                                                        } }), _jsx(SingleSelect, { items: TONE_OPTIONS, onValueChange: (value) => {
+                                                            if (value === 'text') {
+                                                                setTone(null);
+                                                                return;
+                                                            }
+                                                            setTone(value);
+                                                        }, value: buttonStyle?.tone ?? 'text' })] }) }), _jsx(FormRow, { label: _jsx(Box, { className: "twa:text-2", children: "Actions" }), children: _jsxs(Flex, { flexDirection: "row", className: "twa:gap-3 twa:flex-wrap", children: [buttonCommands.map((commandName) => {
+                                                        return (_jsx(CheckBox, { onChange: (checked) => handleCommandChange(checked, commandName), checked: button.Command === commandName ||
+                                                                (Array.isArray(button.Command) &&
+                                                                    button.Command.includes(commandName)), children: _jsx(Box, { className: "twa:text-2", children: sentenceCase(commandName) }) }, commandName));
+                                                    }), btnUserFunctions.length ? (_jsx(CheckBox, { checked: true, disabled: true, children: _jsxs(Box, { className: "twa:text-2", children: ["User function", btnUserFunctions.length > 1 ? 's' : '', ":", ' ', btnUserFunctions.join(', ')] }) })) : null] }) }), iconSelector && (_jsx(FormRow, { label: _jsx(Box, { className: "twa:text-2", children: "Icon" }), children: _jsx(Box, { children: iconSelector }) }))] }) })] }, index));
+                }) })] }));
 };

package/src/View/Alert/Wizard/AlertMessageWizardSection.js

@@ -1,19 +1,18 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { Tabs } from '../../../components/Tabs';
 import Radio, { RadioGroup } from '../../../components/Radio';
 import { SummaryText, useOnePageAdaptableWizardContext } from '../../Wizard/OnePageAdaptableWizard';
 import { Tag } from '../../../components/Tag';
-import FormLayout, { FormRow } from '../../../components/FormLayout';
 import { AlertType } from '../Utilities/getAlertType';
 import { ButtonInfo } from '../../Components/Buttons/ButtonInfo';
 import { AlertMessageDocsLink } from '../../../Utilities/Constants/DocumentationLinkConstants';
 import Textarea from '../../../components/Textarea';
 import HelpBlock from '../../../components/HelpBlock';
-import { Box } from '../../../components/Flex';
+import { Box, Flex } from '../../../components/Flex';
+import { Card } from '../../../components/Card';
 export const renderAlertMessageSummary = (alertType) => {
     const { data } = useOnePageAdaptableWizardContext();
     if (alertType === AlertType.Scheduled) {
-        return (_jsxs(_Fragment, { children: [_jsxs(SummaryText, { children: ["Message Type: ", _jsx(Tag, { children: data.MessageType })] }), _jsxs(SummaryText, { children: ["Header: ", _jsx(Tag, { children: data.MessageHeader || 'Not specified' })] }), _jsxs(SummaryText, { children: ["Message: ", _jsx(Tag, { children: data.MessageText || 'Not specified' })] })] }));
+        return (_jsxs(_Fragment, { children: [_jsxs(SummaryText, { children: ["Message Type: ", _jsx(Tag, { children: data.MessageType })] }), _jsxs(SummaryText, { children: ["Header: ", _jsx(Tag, { children: data.MessageHeader || 'Not specified' })] }), _jsxs(SummaryText, { children: ["Body: ", _jsx(Tag, { children: data.MessageText || 'Not specified' })] })] }));
     }
     return (_jsxs(SummaryText, { children: ["Message Type: ", _jsx(Tag, { children: data.MessageType })] }));
 };
@@ -40,14 +39,14 @@ export const AlertMessageWizardSection = (props) => {
             MessageHeader: value,
         });
     };
-    return (_jsxs(_Fragment, { children: [_jsxs(Tabs, { "data-name": "message-type", children: [_jsx(Tabs.Tab, { children: "Message Type" }), _jsx(Tabs.Content, { children: _jsxs(RadioGroup, { value: messageType, name: "messageType", orientation: "horizontal", onRadioChange: (MessageType) => {
-                                props.onChange({
-                                    ...data,
-                                    MessageType,
-                                });
-                            }, children: [_jsx(Radio, { className: "twa:ml-1", value: "Info", children: "Info" }), _jsx(Radio, { className: "twa:ml-4", value: "Success", children: "Success" }), _jsx(Radio, { className: "twa:ml-4", value: "Warning", children: "Warning" }), _jsx(Radio, { className: "twa:ml-4", value: "Error", children: "Error" })] }) })] }), _jsxs(Tabs, { "data-name": "message-text", className: "twa:mt-2 twa:mb-3", autoFocus: false, children: [_jsx(Tabs.Tab, { children: "Message Text" }), _jsxs(Tabs.Content, { children: [_jsx(Box, { className: "twa:text-2 twa:mt-3 twa:mb-2", children: isScheduled
-                                    ? 'Enter the header and message shown when this scheduled alert fires.'
-                                    : 'Text to display as the Alert Message (leave blank to show automated Message based on Alert Type)' }), _jsxs(FormLayout, { children: [_jsx(FormRow, { label: "Header", children: _jsx(Textarea, { className: "twa:min-w-[300px] twa:mt-2", rows: 3, placeholder: isScheduled ? 'Enter header (required)' : '(Use Default Header Message)', type: 'text', autoFocus: false, value: messageHeader, 
-                                            // placeholder="defaults to column name"
-                                            onChange: (e) => onMessageHeaderChange(e) }) }), _jsx(FormRow, { label: "Message", children: _jsx(Textarea, { className: "twa:min-w-[300px] twa:mt-2", rows: 3, type: 'text', autoFocus: false, placeholder: isScheduled ? 'Enter message (required)' : undefined, value: messageText, onChange: (e) => onMessageTextChange(e) }) })] }), showDocumentationLinks && !isScheduled && (_jsxs(HelpBlock, { "data-name": "alert-message-documentation", className: "twa:mt-3 twa:mb-2 twa:p-0 twa:text-3", children: [_jsx(ButtonInfo, { className: "twa:mr-2", onClick: () => window.open(AlertMessageDocsLink, '_blank') }), "See how to create dynamic Alert Messages using placeholders"] }))] })] })] }));
+    return (_jsxs(Flex, { flexDirection: "column", className: "twa:gap-3 twa:p-3", children: [_jsx(Box, { "data-name": "message-type", children: _jsxs(Card, { shadow: false, children: [_jsxs(Card.Title, { children: [_jsx(Box, { className: "twa:font-medium", children: "Message Type" }), _jsx(Box, { className: "twa:text-xs twa:opacity-70 twa:font-normal twa:max-w-[520px]", children: "Choose how the Alert message is styled" })] }), _jsx(Card.Body, { children: _jsxs(RadioGroup, { value: messageType, name: "messageType", orientation: "horizontal", onRadioChange: (MessageType) => {
+                                    props.onChange({
+                                        ...data,
+                                        MessageType,
+                                    });
+                                }, children: [_jsx(Radio, { className: "twa:ml-1", value: "Info", children: "Info" }), _jsx(Radio, { className: "twa:ml-4", value: "Success", children: "Success" }), _jsx(Radio, { className: "twa:ml-4", value: "Warning", children: "Warning" }), _jsx(Radio, { className: "twa:ml-4", value: "Error", children: "Error" })] }) })] }) }), _jsx(Box, { "data-name": "message-header", children: _jsxs(Card, { shadow: false, children: [_jsxs(Card.Title, { children: [_jsx(Box, { className: "twa:font-medium", children: "Header" }), _jsx(Box, { className: "twa:text-xs twa:opacity-70 twa:font-normal twa:max-w-[520px]", children: isScheduled
+                                        ? 'Enter the header shown when this scheduled alert fires'
+                                        : 'Optional header text (leave blank to use the default)' })] }), _jsx(Card.Body, { className: "twa:p-1", children: _jsx(Textarea, { className: "twa:min-w-[300px] twa:w-full twa:max-w-[500px]", rows: 3, placeholder: isScheduled ? 'Enter header (required)' : '(Use Default Header Message)', type: 'text', autoFocus: false, value: messageHeader, onChange: (e) => onMessageHeaderChange(e) }) })] }) }), _jsx(Box, { "data-name": "message-body", children: _jsxs(Card, { shadow: false, children: [_jsxs(Card.Title, { children: [_jsx(Box, { className: "twa:font-medium", children: "Body" }), _jsx(Box, { className: "twa:text-xs twa:opacity-70 twa:font-normal twa:max-w-[520px]", children: isScheduled
+                                        ? 'Enter the message body shown when this scheduled alert fires'
+                                        : 'Alert message body (leave blank to show automated message based on Alert Type)' })] }), _jsxs(Card.Body, { className: "twa:p-1", children: [_jsx(Textarea, { className: "twa:min-w-[300px] twa:w-full twa:max-w-[500px]", rows: 3, type: 'text', autoFocus: false, placeholder: isScheduled ? 'Enter message (required)' : undefined, value: messageText, onChange: (e) => onMessageTextChange(e) }), showDocumentationLinks && !isScheduled && (_jsxs(HelpBlock, { "data-name": "alert-message-documentation", className: "twa:mt-3 twa:p-0 twa:text-3", children: [_jsx(ButtonInfo, { className: "twa:mr-2", onClick: () => window.open(AlertMessageDocsLink, '_blank') }), "See how to create dynamic Alert Messages using placeholders"] }))] })] }) })] }));
 };