@adaptabletools/adaptable-cjs 23.0.0-canary.3 → 23.0.0-canary.5

package/src/View/FlashingCell/Wizard/FlashingCellSettingsWizardSection.js

@@ -7,14 +7,14 @@ const React = tslib_1.__importStar(require("react"));
 const react_1 = require("react");
 const Input_1 = tslib_1.__importDefault(require("../../../components/Input"));
 const usePrevious_1 = tslib_1.__importDefault(require("../../../components/utils/usePrevious"));
-const Tabs_1 = require("../../../components/Tabs");
 const OnePageAdaptableWizard_1 = require("../../Wizard/OnePageAdaptableWizard");
 const CodeBlock_1 = require("../../../components/CodeBlock");
-const FormLayout_1 = tslib_1.__importStar(require("../../../components/FormLayout"));
 const CheckBox_1 = require("../../../components/CheckBox");
 const Flex_1 = require("../../../components/Flex");
 const Tag_1 = require("../../../components/Tag");
 const OnePageAdaptableWizard_2 = require("../../Wizard/OnePageAdaptableWizard");
+const Card_1 = require("../../../components/Card");
+const TypeRadio_1 = require("../../Wizard/TypeRadio");
 const isSettingsValid = (data, api) => {
     if (!data.Name?.trim()) {
         return 'Name is required';
@@ -27,8 +27,17 @@ const isSettingsValid = (data, api) => {
     return true;
 };
 exports.isSettingsValid = isSettingsValid;
+const formatFlashTarget = (flashTarget) => {
+    if (!flashTarget) {
+        return 'Not specified';
+    }
+    if (typeof flashTarget === 'string') {
+        return flashTarget;
+    }
+    return flashTarget.join(', ');
+};
 const renderFlashingAlertSettingsSummary = (flashingAlert) => {
-    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)(OnePageAdaptableWizard_2.SummaryText, { children: ["Name ", (0, jsx_runtime_1.jsx)(Tag_1.Tag, { children: flashingAlert.Name || 'Not specified' })] }), (0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:text-2", children: flashingAlert.FlashDuration === 'always' ? ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: "Flashing is never removed" })) : ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: ["Flashing is removed after ", (0, jsx_runtime_1.jsx)(CodeBlock_1.CodeBlock, { children: flashingAlert.FlashDuration }), ' ', "milliseconds"] })) })] }));
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)(OnePageAdaptableWizard_2.SummaryText, { children: ["Name ", (0, jsx_runtime_1.jsx)(Tag_1.Tag, { children: flashingAlert.Name || 'Not specified' })] }), (0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:text-2", children: flashingAlert.FlashDuration === 'always' ? ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: "Flashing is never removed" })) : ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: ["Flashing is removed after ", (0, jsx_runtime_1.jsx)(CodeBlock_1.CodeBlock, { children: flashingAlert.FlashDuration }), ' ', "milliseconds"] })) }), (0, jsx_runtime_1.jsxs)(OnePageAdaptableWizard_2.SummaryText, { children: ["Flash Target ", (0, jsx_runtime_1.jsx)(Tag_1.Tag, { children: formatFlashTarget(flashingAlert.FlashTarget) })] })] }));
 };
 exports.renderFlashingAlertSettingsSummary = renderFlashingAlertSettingsSummary;
 const FlashingAlertSettingsWizardSection = (props) => {
@@ -52,7 +61,7 @@ const FlashingAlertSettingsWizardSection = (props) => {
             inputRef.current?.focus();
         }
     }, [duration, oldDuration]);
-    const handleTypeChange = (type) => {
+    const handleDurationTypeChange = (type) => {
         setDuration(type === 'number' ? numberDuration.current : 'always');
     };
     const handleTargetChange = (type, checked) => {
@@ -73,12 +82,12 @@ const FlashingAlertSettingsWizardSection = (props) => {
             FlashTarget,
         });
     };
-    return ((0, jsx_runtime_1.jsxs)(Flex_1.Flex, { flexDirection: "column", "data-name": "plus-minus-column-settings", className: "twa:h-full", children: [(0, jsx_runtime_1.jsxs)(Tabs_1.Tabs, { autoFocus: false, className: "twa:p-2", children: [(0, jsx_runtime_1.jsx)(Tabs_1.Tabs.Tab, { children: "Flashing Cell Settings" }), (0, jsx_runtime_1.jsx)(Tabs_1.Tabs.Content, { children: (0, jsx_runtime_1.jsx)(FormLayout_1.default, { children: (0, jsx_runtime_1.jsx)(FormLayout_1.FormRow, { label: "Name", children: (0, jsx_runtime_1.jsx)(Input_1.default, { "data-name": "flashing-cell-name", className: "twa:flex-1 twa:mr-3", onChange: handleNameChange, placeholder: "Enter Name", value: flashingCell.Name ?? '' }) }) }) })] }), (0, jsx_runtime_1.jsxs)(Tabs_1.Tabs, { autoFocus: false, className: "twa:p-2", children: [(0, jsx_runtime_1.jsx)(Tabs_1.Tabs.Tab, { children: "Flash Duration" }), (0, jsx_runtime_1.jsx)(Tabs_1.Tabs.Content, { children: (0, jsx_runtime_1.jsx)(FormLayout_1.default, { children: (0, jsx_runtime_1.jsx)(FormLayout_1.FormRow, { label: "", children: (0, jsx_runtime_1.jsxs)(Flex_1.Flex, { alignItems: "center", children: [(0, jsx_runtime_1.jsx)(CheckBox_1.CheckBox, { "data-name": "duration-always", checked: duration === 'always', onChange: (checked) => handleTypeChange(checked ? 'always' : 'number'), className: "twa:mr-4", tabIndex: -1, children: "Always" }), duration !== 'always' && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(Input_1.default, { "data-name": "duration-input", readOnly: props.readOnly, type: "number", name: "value", ref: inputRef, className: "twa:w-20 twa:mr-2", value: duration, onChange: (event) => {
-                                                        const value = event.target.value;
-                                                        setDuration(isNaN(Number(value)) ? 500 : Number(value));
-                                                    } }), (0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:text-2", children: "ms" })] }))] }) }) }) })] }), ' ', (0, jsx_runtime_1.jsxs)(Tabs_1.Tabs, { autoFocus: false, className: "twa:p-2", children: [(0, jsx_runtime_1.jsx)(Tabs_1.Tabs.Tab, { children: "Flash Target" }), (0, jsx_runtime_1.jsx)(Tabs_1.Tabs.Content, { children: (0, jsx_runtime_1.jsx)(FormLayout_1.default, { children: (0, jsx_runtime_1.jsxs)(FormLayout_1.FormRow, { label: "", children: [(0, jsx_runtime_1.jsx)(CheckBox_1.CheckBox, { "data-name": "flashing-target", onChange: (checked) => handleTargetChange('cell', checked), className: "twa:mr-3", checked: flashingCell?.FlashTarget === 'cell' ||
-                                            flashingCell?.FlashTarget?.includes?.('cell'), tabIndex: -1, children: "Cell" }), (0, jsx_runtime_1.jsx)(CheckBox_1.CheckBox, { "data-name": "flashing-target-row", className: "twa:mr-3", onChange: (checked) => handleTargetChange('row', checked), checked: flashingCell?.FlashTarget === 'row' ||
-                                            flashingCell?.FlashTarget?.includes?.('row'), tabIndex: -1, children: "Row" }), (0, jsx_runtime_1.jsx)(CheckBox_1.CheckBox, { "data-name": "flashing-target-aggFuncCell", onChange: (checked) => handleTargetChange('aggFuncCell', checked), checked: flashingCell?.FlashTarget === 'aggFuncCell' ||
-                                            flashingCell?.FlashTarget?.includes?.('aggFuncCell'), tabIndex: -1, children: "Aggregated Function Cell" })] }) }) })] })] }));
+    const isTargetChecked = (type) => flashingCell?.FlashTarget === type || flashingCell?.FlashTarget?.includes?.(type);
+    return ((0, jsx_runtime_1.jsx)(Flex_1.Box, { "data-name": "flashing-cell-settings", children: (0, jsx_runtime_1.jsxs)(Flex_1.Flex, { flexDirection: "column", className: "twa:gap-3 twa:p-3", children: [(0, jsx_runtime_1.jsxs)(Card_1.Card, { shadow: false, children: [(0, jsx_runtime_1.jsxs)(Card_1.Card.Title, { children: [(0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:font-medium", children: "Name" }), (0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:text-xs twa:opacity-70 twa:font-normal twa:max-w-[520px]", children: "Provide a unique name for the Flashing Cell rule" })] }), (0, jsx_runtime_1.jsx)(Card_1.Card.Body, { className: "twa:p-1", children: (0, jsx_runtime_1.jsx)(Input_1.default, { "data-name": "flashing-cell-name", className: "twa:max-w-[300px] twa:w-full", onChange: handleNameChange, placeholder: "Enter Name", value: flashingCell.Name ?? '' }) })] }), (0, jsx_runtime_1.jsxs)(Card_1.Card, { shadow: false, children: [(0, jsx_runtime_1.jsxs)(Card_1.Card.Title, { children: [(0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:font-medium", children: "Flash Duration" }), (0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:text-xs twa:opacity-70 twa:font-normal twa:max-w-[520px]", children: "Choose how long the flash style remains visible after a change" })] }), (0, jsx_runtime_1.jsx)(Card_1.Card.Body, { children: (0, jsx_runtime_1.jsxs)(Flex_1.Flex, { flexDirection: "column", className: "twa:gap-3", children: [(0, jsx_runtime_1.jsx)(TypeRadio_1.TypeRadio, { "data-name": "duration-always", text: "Always", description: "The flash style is never removed automatically", checked: duration === 'always', onClick: () => handleDurationTypeChange('always') }), (0, jsx_runtime_1.jsx)(TypeRadio_1.TypeRadio, { "data-name": "duration-timed", text: "Timed", description: "The flash style is removed after a set number of milliseconds", checked: duration !== 'always', onClick: () => handleDurationTypeChange('number') }), duration !== 'always' ? ((0, jsx_runtime_1.jsxs)(Flex_1.Flex, { alignItems: "center", className: "twa:ml-6", children: [(0, jsx_runtime_1.jsx)(Input_1.default, { "data-name": "duration-input", readOnly: props.readOnly, type: "number", name: "value", ref: inputRef, className: "twa:w-24 twa:mr-2", value: duration, onChange: (event) => {
+                                                    const value = event.target.value;
+                                                    const parsed = Number(value);
+                                                    numberDuration.current = isNaN(parsed) ? 500 : parsed;
+                                                    setDuration(numberDuration.current);
+                                                } }), (0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:text-2", children: "ms" })] })) : null] }) })] }), (0, jsx_runtime_1.jsxs)(Card_1.Card, { shadow: false, children: [(0, jsx_runtime_1.jsxs)(Card_1.Card.Title, { children: [(0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:font-medium", children: "Flash Target" }), (0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:text-xs twa:opacity-70 twa:font-normal twa:max-w-[520px]", children: "Choose which parts of the grid flash when a change occurs" })] }), (0, jsx_runtime_1.jsx)(Card_1.Card.Body, { children: (0, jsx_runtime_1.jsxs)(Flex_1.Flex, { flexDirection: "column", children: [(0, jsx_runtime_1.jsx)(CheckBox_1.CheckBox, { "data-name": "flashing-target", onChange: (checked) => handleTargetChange('cell', checked), checked: isTargetChecked('cell'), children: "Cell" }), (0, jsx_runtime_1.jsx)(CheckBox_1.CheckBox, { "data-name": "flashing-target-row", onChange: (checked) => handleTargetChange('row', checked), checked: isTargetChecked('row'), children: "Row" }), (0, jsx_runtime_1.jsx)(CheckBox_1.CheckBox, { "data-name": "flashing-target-aggFuncCell", onChange: (checked) => handleTargetChange('aggFuncCell', checked), checked: isTargetChecked('aggFuncCell'), children: "Aggregated Function Cell" })] }) })] })] }) }));
 };
 exports.FlashingAlertSettingsWizardSection = FlashingAlertSettingsWizardSection;

package/src/View/FlashingCell/Wizard/FlashingCellStyleWizardSection.js

@@ -3,15 +3,31 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.renderFlashingAlertStyleSummary = exports.FlashingCellStyle = exports.FlashingAlertStyleWizardSection = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const OnePageAdaptableWizard_1 = require("../../Wizard/OnePageAdaptableWizard");
-const Tabs_1 = require("../../../components/Tabs");
 const StyleComponent_1 = require("../../Components/StyleComponent");
 const StylePreview_1 = require("../../../components/StylePreview");
 const Flex_1 = require("../../../components/Flex");
-const changeStyle = (0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:text-2 twa:inline-block", children: "Change style" });
+const Card_1 = require("../../../components/Card");
+const FLASH_STYLE_CARDS = [
+    {
+        key: 'UpChangeStyle',
+        title: 'Up Change Style',
+        description: 'Style applied when a cell value increases',
+    },
+    {
+        key: 'DownChangeStyle',
+        title: 'Down Change Style',
+        description: 'Style applied when a cell value decreases',
+    },
+    {
+        key: 'NeutralChangeStyle',
+        title: 'Neutral Change Style',
+        description: 'Style applied when a cell value changes but not up or down (e.g. text edits)',
+    },
+];
 const FlashingAlertStyleWizardSection = (props) => {
     let { data: flashingAlert, api } = (0, OnePageAdaptableWizard_1.useOnePageAdaptableWizardContext)();
     flashingAlert = flashingAlert ?? props.flashingAlert;
-    return ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: (0, jsx_runtime_1.jsxs)(Tabs_1.Tabs, { defaultValue: "up", children: [(0, jsx_runtime_1.jsxs)(Tabs_1.Tabs.Tab, { value: "up", children: ["Up ", changeStyle] }), (0, jsx_runtime_1.jsx)(Tabs_1.Tabs.Content, { value: "up", children: (0, jsx_runtime_1.jsx)(StyleComponent_1.StyleComponent, { headless: true, api: api, Style: flashingAlert.UpChangeStyle ?? {}, UpdateStyle: (style) => props.onStyleChange('UpChangeStyle', style) }) }), (0, jsx_runtime_1.jsxs)(Tabs_1.Tabs.Tab, { value: "down", children: ["Down ", changeStyle] }), (0, jsx_runtime_1.jsx)(Tabs_1.Tabs.Content, { value: "down", children: (0, jsx_runtime_1.jsx)(StyleComponent_1.StyleComponent, { headless: true, api: api, Style: flashingAlert.DownChangeStyle ?? {}, UpdateStyle: (style) => props.onStyleChange('DownChangeStyle', style) }) }), (0, jsx_runtime_1.jsxs)(Tabs_1.Tabs.Tab, { value: "neutral", children: ["Neutral ", changeStyle] }), (0, jsx_runtime_1.jsx)(Tabs_1.Tabs.Content, { value: "neutral", children: (0, jsx_runtime_1.jsx)(StyleComponent_1.StyleComponent, { headless: true, api: api, Style: flashingAlert.NeutralChangeStyle ?? {}, UpdateStyle: (style) => props.onStyleChange('NeutralChangeStyle', style) }) })] }) }));
+    return ((0, jsx_runtime_1.jsx)(Flex_1.Flex, { flexDirection: "column", className: "twa:gap-3 twa:p-3", children: FLASH_STYLE_CARDS.map(({ key, title, description }) => ((0, jsx_runtime_1.jsxs)(Card_1.Card, { shadow: false, children: [(0, jsx_runtime_1.jsxs)(Card_1.Card.Title, { children: [(0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:font-medium", children: title }), (0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:text-xs twa:opacity-70 twa:font-normal twa:max-w-[520px]", children: description })] }), (0, jsx_runtime_1.jsx)(Card_1.Card.Body, { children: (0, jsx_runtime_1.jsx)(StyleComponent_1.StyleComponent, { headless: true, api: api, Style: flashingAlert[key] ?? {}, UpdateStyle: (style) => props.onStyleChange(key, style) }) })] }, key))) }));
 };
 exports.FlashingAlertStyleWizardSection = FlashingAlertStyleWizardSection;
 const FlashingCellStyle = (props) => {

package/src/View/FlashingCell/Wizard/FlashingCellWizard.js

@@ -67,7 +67,7 @@ const FlashingCellWizard = (props) => {
             {
                 details: 'Set Name, Duration and Target Properties',
                 isValid: FlashingCellSettingsWizardSection_1.isSettingsValid,
-                render: () => ((0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:p-2", children: (0, jsx_runtime_1.jsx)(FlashingCellSettingsWizardSection_1.FlashingAlertSettingsWizardSection, { onChange: setFlashingCell }) })),
+                render: () => (0, jsx_runtime_1.jsx)(FlashingCellSettingsWizardSection_1.FlashingAlertSettingsWizardSection, { onChange: setFlashingCell }),
                 renderSummary: FlashingCellSettingsWizardSection_1.renderFlashingAlertSettingsSummary,
                 title: 'Settings',
             },
@@ -87,9 +87,9 @@ const FlashingCellWizard = (props) => {
             },
             {
                 details: 'Choose Flash Styles for Up, Down and Neutral Changes',
-                render: () => ((0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:p-2", children: (0, jsx_runtime_1.jsx)(FlashingCellStyleWizardSection_1.FlashingAlertStyleWizardSection, { onStyleChange: (styleName, style) => {
-                            updateStyles[styleName](style);
-                        } }) })),
+                render: () => ((0, jsx_runtime_1.jsx)(FlashingCellStyleWizardSection_1.FlashingAlertStyleWizardSection, { onStyleChange: (styleName, style) => {
+                        updateStyles[styleName](style);
+                    } })),
                 renderSummary: FlashingCellStyleWizardSection_1.renderFlashingAlertStyleSummary,
                 title: 'Flash Styles',
             },

package/src/View/FormatColumn/Wizard/FormatColumnFormatWizardSection.d.ts

@@ -10,7 +10,14 @@ export interface FormatColumnFormatWizardState {
     DisplayFormat: AdaptableFormat;
     NumericFormat?: 'Percent' | 'Thousand' | 'Million' | 'Dollar' | 'Sterling' | undefined;
 }
+type DisplayFormatSummaryItem = {
+    label: string;
+    value: string;
+};
+export declare const getFormatColumnDisplayFormatSummaryItems: (data: FormatColumn) => DisplayFormatSummaryItem[];
+export declare const hasFormatColumnDisplayFormat: (data: FormatColumn) => boolean;
 export declare const getFormatColumnFormatSummaryValue: (data: FormatColumn) => string;
 export declare const renderFormatColumnFormatSummary: (data: FormatColumn) => React.JSX.Element;
 export declare const getFormatDisplayTypeForScope: (scope: ColumnScope, api: AdaptableApi) => "number" | "date" | "text" | undefined;
 export declare const FormatColumnFormatWizardSection: (props: FormatColumnFormatWizardSectionProps) => React.JSX.Element;
+export {};

package/src/View/FormatColumn/Wizard/FormatColumnFormatWizardSection.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.FormatColumnFormatWizardSection = exports.getFormatDisplayTypeForScope = exports.renderFormatColumnFormatSummary = exports.getFormatColumnFormatSummaryValue = void 0;
+exports.FormatColumnFormatWizardSection = exports.getFormatDisplayTypeForScope = exports.renderFormatColumnFormatSummary = exports.getFormatColumnFormatSummaryValue = exports.hasFormatColumnDisplayFormat = exports.getFormatColumnDisplayFormatSummaryItems = void 0;
 const tslib_1 = require("tslib");
 const jsx_runtime_1 = require("react/jsx-runtime");
 const uniq_1 = tslib_1.__importDefault(require("../../../Utilities/utils/uniq"));
@@ -35,24 +35,124 @@ const DateFormatPresets = [
     'yyyyMMdd',
     'HH:mm:ss',
 ];
-const getFormatColumnFormatSummaryValue = (data) => {
-    let content = 'N/A';
+const NUMERIC_PRESET_LABELS = {
+    Percentage: 'Percentage',
+    Thousand: 'K (Thousand)',
+    Million: 'M (Million)',
+    Billion: 'B (Billion)',
+    BasisPoints: 'bps (Basis Pts)',
+    Dollar: 'Dollar',
+    Sterling: 'Sterling',
+    Euro: 'Euro',
+    Yen: 'Yen',
+    Bitcoin: 'Bitcoin',
+    Integer: 'Integer',
+    Decimal: 'Decimal',
+    Accounting: 'Accounting',
+    FXRate: 'FX Rate',
+    Scientific: 'Scientific',
+};
+const appendDisplayFormatItem = (items, label, value) => {
+    if (value == null || value === '' || value === false) {
+        return;
+    }
+    items.push({ label, value: String(value) });
+};
+const appendNumberFormatOptions = (items, options) => {
+    appendDisplayFormatItem(items, 'Fraction Digits', options.FractionDigits);
+    appendDisplayFormatItem(items, 'Fraction Separator', options.FractionSeparator);
+    appendDisplayFormatItem(items, 'Integer Digits', options.IntegerDigits);
+    appendDisplayFormatItem(items, 'Integer Separator', options.IntegerSeparator);
+    appendDisplayFormatItem(items, 'Prefix', options.Prefix);
+    appendDisplayFormatItem(items, 'Suffix', options.Suffix);
+    appendDisplayFormatItem(items, 'Content', options.Content);
+    if (options.Multiplier != null && options.Multiplier !== 1) {
+        items.push({ label: 'Multiplier', value: String(options.Multiplier) });
+    }
+    appendDisplayFormatItem(items, 'Parentheses', options.Parentheses);
+    appendDisplayFormatItem(items, 'Truncate', options.Truncate);
+    appendDisplayFormatItem(items, 'Absolute Value', options.Abs);
+    appendDisplayFormatItem(items, 'Ceiling', options.Ceiling);
+    appendDisplayFormatItem(items, 'Floor', options.Floor);
+    appendDisplayFormatItem(items, 'Round', options.Round);
+    appendDisplayFormatItem(items, 'Empty', options.Empty);
+    if (options.Notation === 'scientific') {
+        items.push({ label: 'Notation', value: 'Scientific' });
+    }
+    if (options.CustomDisplayFormats?.length) {
+        items.push({
+            label: 'Custom Formats',
+            value: options.CustomDisplayFormats.join(', '),
+        });
+    }
+};
+const appendStringFormatOptions = (items, options) => {
+    appendDisplayFormatItem(items, 'Case', options.Case);
+    appendDisplayFormatItem(items, 'Trim', options.Trim);
+    appendDisplayFormatItem(items, 'Prefix', options.Prefix);
+    appendDisplayFormatItem(items, 'Suffix', options.Suffix);
+    appendDisplayFormatItem(items, 'Content', options.Content);
+    appendDisplayFormatItem(items, 'Empty', options.Empty);
+    if (options.CustomDisplayFormats?.length) {
+        items.push({
+            label: 'Custom Formats',
+            value: options.CustomDisplayFormats.join(', '),
+        });
+    }
+};
+const getFormatColumnDisplayFormatSummaryItems = (data) => {
+    if (data.DisplayFormat == null) {
+        return [];
+    }
+    if ((0, AdaptableFormatPresets_1.isAdaptableNumericFormatPreset)(data.DisplayFormat)) {
+        return [{ label: '', value: `${NUMERIC_PRESET_LABELS[data.DisplayFormat]} Preset` }];
+    }
     const resolved = (0, AdaptableFormatPresets_1.resolveDisplayFormat)(data.DisplayFormat);
     if (!resolved) {
-        content = 'N/A';
+        return [];
     }
-    else {
-        if (resolved.Formatter === 'NumberFormatter') {
-            content = FormatHelper_1.default.NumberFormatter(GeneralConstants_1.DEFAULT_DOUBLE_DISPLAY_VALUE, resolved.Options);
+    const items = [];
+    if (resolved.Formatter === 'NumberFormatter') {
+        appendNumberFormatOptions(items, resolved.Options);
+        if (!items.length) {
+            items.push({ label: '', value: 'Number Format' });
         }
-        if (resolved.Formatter === 'DateFormatter') {
-            content = FormatHelper_1.default.DateFormatter(new Date(), resolved.Options);
+        return items;
+    }
+    if (resolved.Formatter === 'DateFormatter') {
+        const options = resolved.Options;
+        appendDisplayFormatItem(items, 'Pattern', options.Pattern);
+        if (options.CustomDisplayFormats?.length) {
+            items.push({
+                label: 'Custom Formats',
+                value: options.CustomDisplayFormats.join(', '),
+            });
+        }
+        if (!items.length) {
+            items.push({ label: '', value: 'Date Format' });
         }
-        if (resolved.Formatter === 'StringFormatter') {
-            content = FormatHelper_1.default.StringFormatter(GeneralConstants_1.DEFAULT_STRING_DISPLAY_VALUE, resolved.Options);
+        return items;
+    }
+    if (resolved.Formatter === 'StringFormatter') {
+        appendStringFormatOptions(items, resolved.Options);
+        if (!items.length) {
+            items.push({ label: '', value: 'String Format' });
         }
+        return items;
     }
-    return content;
+    return items;
+};
+exports.getFormatColumnDisplayFormatSummaryItems = getFormatColumnDisplayFormatSummaryItems;
+const hasFormatColumnDisplayFormat = (data) => (0, exports.getFormatColumnDisplayFormatSummaryItems)(data).length > 0;
+exports.hasFormatColumnDisplayFormat = hasFormatColumnDisplayFormat;
+const getFormatColumnFormatSummaryValue = (data) => {
+    const items = (0, exports.getFormatColumnDisplayFormatSummaryItems)(data);
+    if (!items.length) {
+        return 'No Display Format';
+    }
+    return items
+        .map(({ label, value }) => (label ? `${label}: ${value}` : value))
+        .join(', ');
 };
 exports.getFormatColumnFormatSummaryValue = getFormatColumnFormatSummaryValue;
 const renderCustomFormatter = (data, customFormatter, setFormatOption) => {
@@ -69,7 +169,14 @@ const renderCustomFormatter = (data, customFormatter, setFormatOption) => {
             } }) }, customFormatter.id));
 };
 const renderFormatColumnFormatSummary = (data) => {
-    return (0, jsx_runtime_1.jsx)(Tag_1.Tag, { children: (0, exports.getFormatColumnFormatSummaryValue)(data) });
+    const items = (0, exports.getFormatColumnDisplayFormatSummaryItems)(data);
+    if (!items.length) {
+        return (0, jsx_runtime_1.jsx)(Tag_1.Tag, { children: "No Display Format" });
+    }
+    if (items.length === 1 && !items[0].label) {
+        return (0, jsx_runtime_1.jsx)(Tag_1.Tag, { children: items[0].value });
+    }
+    return ((0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:flex twa:flex-col twa:gap-2", children: items.map(({ label, value }) => ((0, jsx_runtime_1.jsxs)(Flex_1.Box, { children: [label, " ", (0, jsx_runtime_1.jsx)(Tag_1.Tag, { children: value })] }, label))) }));
 };
 exports.renderFormatColumnFormatSummary = renderFormatColumnFormatSummary;
 const getFormatDisplayTypeForScope = (scope, api) => {

package/src/View/FormatColumn/Wizard/FormatColumnPreview.d.ts

@@ -0,0 +1,15 @@
+import * as React from 'react';
+import { FormatColumn } from '../../../AdaptableState/FormatColumnState';
+import { AdaptableApi } from '../../../Api/AdaptableApi';
+/** Today's date as sample text — no Display Format options applied. */
+export declare const getFormatColumnPreviewDateSampleText: () => string;
+export declare const getFormatColumnStylePreviewText: (formatColumn: FormatColumn, api: AdaptableApi) => string;
+export declare const getFormatColumnPreviewSampleValue: (formatColumn: FormatColumn, api: AdaptableApi) => string | number;
+export declare const getFormatColumnPreviewText: (formatColumn: FormatColumn, api: AdaptableApi) => string;
+export declare const FormatColumnPreviewContent: React.FunctionComponent<{
+    formatColumn: FormatColumn;
+    api: AdaptableApi;
+}>;
+export declare const renderFormatColumnPreviewSummary: (formatColumn: FormatColumn, api: AdaptableApi) => React.JSX.Element;
+export declare const FormatColumnPreview: React.FunctionComponent;
+export declare const FormatColumnPreviewSummaryCard: React.FunctionComponent;

package/src/View/FormatColumn/Wizard/FormatColumnPreview.js

@@ -0,0 +1,78 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.FormatColumnPreviewSummaryCard = exports.FormatColumnPreview = exports.renderFormatColumnPreviewSummary = exports.FormatColumnPreviewContent = exports.getFormatColumnPreviewText = exports.getFormatColumnPreviewSampleValue = exports.getFormatColumnStylePreviewText = exports.getFormatColumnPreviewDateSampleText = void 0;
+const tslib_1 = require("tslib");
+const jsx_runtime_1 = require("react/jsx-runtime");
+const AdaptableFormatPresets_1 = require("../../../AdaptableState/Common/AdaptableFormatPresets");
+const GeneralConstants_1 = require("../../../Utilities/Constants/GeneralConstants");
+const FormatHelper_1 = tslib_1.__importDefault(require("../../../Utilities/Helpers/FormatHelper"));
+const StyleHelper_1 = require("../../../Utilities/Helpers/StyleHelper");
+const Card_1 = require("../../../components/Card");
+const Flex_1 = require("../../../components/Flex");
+const OnePageAdaptableWizard_1 = require("../../Wizard/OnePageAdaptableWizard");
+const FormatColumnFormatWizardSection_1 = require("./FormatColumnFormatWizardSection");
+const toFormatColumnPreviewStyle = (formatColumn) => {
+    const style = formatColumn.Style ?? {};
+    return {
+        ...(0, StyleHelper_1.convertAdaptableStyleToCSS)(style),
+        borderWidth: style.BorderColor ? 2 : 0,
+        borderStyle: 'solid',
+        textAlign: style.Alignment ? style.Alignment.toLowerCase() : undefined,
+    };
+};
+/** Today's date as sample text — no Display Format options applied. */
+const getFormatColumnPreviewDateSampleText = () => new Date().toLocaleDateString();
+exports.getFormatColumnPreviewDateSampleText = getFormatColumnPreviewDateSampleText;
+const getFormatColumnStylePreviewText = (formatColumn, api) => {
+    const formatType = (0, FormatColumnFormatWizardSection_1.getFormatDisplayTypeForScope)(formatColumn.Scope, api);
+    if (formatType === 'number') {
+        return String(GeneralConstants_1.DEFAULT_DOUBLE_DISPLAY_VALUE);
+    }
+    if (formatType === 'date') {
+        return (0, exports.getFormatColumnPreviewDateSampleText)();
+    }
+    return GeneralConstants_1.DEFAULT_STRING_DISPLAY_VALUE;
+};
+exports.getFormatColumnStylePreviewText = getFormatColumnStylePreviewText;
+const getFormatColumnPreviewSampleValue = (formatColumn, api) => {
+    const formatType = (0, FormatColumnFormatWizardSection_1.getFormatDisplayTypeForScope)(formatColumn.Scope, api);
+    if (formatType === 'number') {
+        return GeneralConstants_1.DEFAULT_DOUBLE_DISPLAY_VALUE;
+    }
+    if (formatType === 'date') {
+        return (0, exports.getFormatColumnPreviewDateSampleText)();
+    }
+    return GeneralConstants_1.DEFAULT_STRING_DISPLAY_VALUE;
+};
+exports.getFormatColumnPreviewSampleValue = getFormatColumnPreviewSampleValue;
+const getFormatColumnPreviewText = (formatColumn, api) => {
+    const sample = (0, exports.getFormatColumnPreviewSampleValue)(formatColumn, api);
+    const resolved = (0, AdaptableFormatPresets_1.resolveDisplayFormat)(formatColumn.DisplayFormat);
+    if (!resolved) {
+        return String(sample);
+    }
+    if (resolved.Formatter === 'NumberFormatter' && typeof sample === 'number') {
+        return FormatHelper_1.default.NumberFormatter(sample, resolved.Options) ?? String(sample);
+    }
+    if (resolved.Formatter === 'DateFormatter') {
+        return FormatHelper_1.default.DateFormatter(new Date(), resolved.Options) ?? String(sample);
+    }
+    if (resolved.Formatter === 'StringFormatter' && typeof sample === 'string') {
+        return FormatHelper_1.default.StringFormatter(sample, resolved.Options) ?? sample;
+    }
+    return String(sample);
+};
+exports.getFormatColumnPreviewText = getFormatColumnPreviewText;
+const FormatColumnPreviewContent = ({ formatColumn, api }) => ((0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "ab-FormatPreview twa:p-2 twa:inline-block", style: toFormatColumnPreviewStyle(formatColumn), children: (0, exports.getFormatColumnPreviewText)(formatColumn, api) }));
+exports.FormatColumnPreviewContent = FormatColumnPreviewContent;
+const renderFormatColumnPreviewSummary = (formatColumn, api) => (0, jsx_runtime_1.jsx)(exports.FormatColumnPreviewContent, { formatColumn: formatColumn, api: api });
+exports.renderFormatColumnPreviewSummary = renderFormatColumnPreviewSummary;
+const FormatColumnPreview = () => {
+    const { data, api } = (0, OnePageAdaptableWizard_1.useOnePageAdaptableWizardContext)();
+    return (0, jsx_runtime_1.jsx)(exports.FormatColumnPreviewContent, { formatColumn: data, api: api });
+};
+exports.FormatColumnPreview = FormatColumnPreview;
+const FormatColumnPreviewSummaryCard = () => {
+    return ((0, jsx_runtime_1.jsxs)(Card_1.Card, { shadow: false, children: [(0, jsx_runtime_1.jsx)(Card_1.Card.Title, { children: (0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:font-medium", children: "Preview" }) }), (0, jsx_runtime_1.jsx)(Card_1.Card.Body, { className: "twa:p-1", children: (0, jsx_runtime_1.jsx)(exports.FormatColumnPreview, {}) })] }));
+};
+exports.FormatColumnPreviewSummaryCard = FormatColumnPreviewSummaryCard;

package/src/View/FormatColumn/Wizard/FormatColumnRuleWizardSection.d.ts

@@ -1,8 +1,12 @@
 import * as React from 'react';
 import { FormatColumn } from '../../../../types';
+import { AdaptableApi } from '../../../Api/AdaptableApi';
 type FormatColumnRuleWizardSectionProps = {
     onChange: (data: FormatColumn) => void;
     defaultPredicateId: string;
 };
+export declare const hasFormatColumnCondition: (formatColumn: FormatColumn) => boolean;
+export declare const renderFormatColumnConditionSummary: (formatColumn: FormatColumn, api: AdaptableApi) => React.JSX.Element;
+export declare const renderFormatColumnConditionWizardSummary: (formatColumn: FormatColumn) => React.JSX.Element;
 export declare function FormatColumnRuleWizardSection(props: FormatColumnRuleWizardSectionProps): React.JSX.Element;
 export {};

package/src/View/FormatColumn/Wizard/FormatColumnRuleWizardSection.js

@@ -1,11 +1,45 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
+exports.renderFormatColumnConditionWizardSummary = exports.renderFormatColumnConditionSummary = exports.hasFormatColumnCondition = void 0;
 exports.FormatColumnRuleWizardSection = FormatColumnRuleWizardSection;
 const tslib_1 = require("tslib");
 const jsx_runtime_1 = require("react/jsx-runtime");
 const OnePageAdaptableWizard_1 = require("../../Wizard/OnePageAdaptableWizard");
 const EntityRulesEditor_1 = require("../../Components/EntityRulesEditor");
 const HelpBlock_1 = tslib_1.__importDefault(require("../../../components/HelpBlock"));
+const Flex_1 = require("../../../components/Flex");
+const Tag_1 = require("../../../components/Tag");
+const hasFormatColumnCondition = (formatColumn) => {
+    const rule = formatColumn.Rule;
+    if (!rule) {
+        return false;
+    }
+    return Boolean(rule.Predicates?.length ||
+        rule.BooleanExpression ||
+        ('ObservableExpression' in rule && rule.ObservableExpression) ||
+        ('AggregatedBooleanExpression' in rule && rule.AggregatedBooleanExpression));
+};
+exports.hasFormatColumnCondition = hasFormatColumnCondition;
+const renderFormatColumnConditionSummary = (formatColumn, api) => {
+    if (formatColumn.Target === 'columnHeader') {
+        return (0, jsx_runtime_1.jsx)(Tag_1.Tag, { children: "No Condition" });
+    }
+    if (!(0, exports.hasFormatColumnCondition)(formatColumn)) {
+        return (0, jsx_runtime_1.jsx)(Tag_1.Tag, { children: "No Condition" });
+    }
+    const rule = formatColumn.Rule;
+    if (rule?.Predicates?.length) {
+        return ((0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:flex twa:flex-col twa:gap-2", children: rule.Predicates.map((predicate, index) => ((0, jsx_runtime_1.jsx)(Tag_1.Tag, { children: api.predicateApi.predicateToString(predicate) }, index))) }));
+    }
+    const expressionText = api.internalApi.getAdaptableQueryExpressionText(rule);
+    return (0, jsx_runtime_1.jsx)(Tag_1.Tag, { children: expressionText || 'No Condition' });
+};
+exports.renderFormatColumnConditionSummary = renderFormatColumnConditionSummary;
+const renderFormatColumnConditionWizardSummary = (formatColumn) => {
+    const { api } = (0, OnePageAdaptableWizard_1.useOnePageAdaptableWizardContext)();
+    return (0, exports.renderFormatColumnConditionSummary)(formatColumn, api);
+};
+exports.renderFormatColumnConditionWizardSummary = renderFormatColumnConditionWizardSummary;
 function FormatColumnRuleWizardSection(props) {
     const { data, api, moduleInfo } = (0, OnePageAdaptableWizard_1.useOnePageAdaptableWizardContext)();
     if (data.Target && data.Target === 'columnHeader') {

package/src/View/FormatColumn/Wizard/FormatColumnScopeWizardSection.js

@@ -5,6 +5,8 @@ const tslib_1 = require("tslib");
 const jsx_runtime_1 = require("react/jsx-runtime");
 const NewScopeComponent_1 = require("../../Components/NewScopeComponent");
 const OnePageAdaptableWizard_1 = require("../../Wizard/OnePageAdaptableWizard");
+const AdaptableContext_1 = require("../../AdaptableContext");
+const AdaptableColumn_1 = require("../../../AdaptableState/Common/AdaptableColumn");
 const ColumnScope_1 = require("../../../AdaptableState/Common/ColumnScope");
 const Flex_1 = require("../../../components/Flex");
 const FormLayout_1 = tslib_1.__importStar(require("../../../components/FormLayout"));
@@ -33,15 +35,18 @@ const isRowKindIncluded = (data, kind) => {
 const collectIncludedRowKinds = (data) => {
     return FORMAT_COLUMN_ROW_KINDS.filter((k) => isRowKindIncluded(data, k));
 };
-const renderFormatColumnScopeSummary = (data) => {
+const FormatColumnScopeSummaryContent = ({ data, }) => {
+    const adaptable = (0, AdaptableContext_1.useAdaptable)();
+    const scopeApi = adaptable.api.columnScopeApi;
+    const scope = data.Scope;
+    const columnsInScope = scopeApi.getColumnsInScope(scope);
     const showRows = data.Target === 'cell';
     const includedKinds = collectIncludedRowKinds(data);
     const allKinds = includedKinds.length === 4;
-    return ((0, jsx_runtime_1.jsxs)(Flex_1.Box, { className: "twa:pr-2 twa:py-2", children: [(0, jsx_runtime_1.jsx)(Flex_1.Box, { children: (0, NewScopeComponent_1.renderScopeSummary)(data.Scope, {
-                    scopeWholeRow: 'Matching rows will be formatted',
-                    scopeColumns: 'Cells in selected columns will be formatted',
-                    scopeDataTypes: 'Cells in columns with these Data Types will be formatted',
-                }) }), showRows && ((0, jsx_runtime_1.jsxs)(Flex_1.Box, { className: "twa:mt-3", children: ["Rows:", ' ', allKinds ? ((0, jsx_runtime_1.jsx)(Tag_1.Tag, { children: "All" })) : includedKinds.length === 0 ? ((0, jsx_runtime_1.jsx)(Tag_1.Tag, { children: "None" })) : (includedKinds.map((k) => ((0, jsx_runtime_1.jsx)(Tag_1.Tag, { className: "twa:mr-1", children: k }, k))))] }))] }));
+    return ((0, jsx_runtime_1.jsxs)(Flex_1.Box, { className: "twa:flex twa:flex-col twa:gap-3", children: [(0, jsx_runtime_1.jsx)(Flex_1.Box, { children: scopeApi.scopeIsAll(scope) ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: ["Columns ", (0, jsx_runtime_1.jsx)(Tag_1.Tag, { children: "All" })] })) : 'ColumnIds' in scope ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: ["Columns", ' ', columnsInScope.length ? (columnsInScope.map((column) => ((0, jsx_runtime_1.jsx)(Tag_1.Tag, { className: "twa:mr-1", children: column.friendlyName }, column.columnId)))) : ((0, jsx_runtime_1.jsx)(Tag_1.Tag, { children: "None" }))] })) : 'DataTypes' in scope ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: ["Data Types", ' ', scope.DataTypes.length ? (scope.DataTypes.map((dataType) => ((0, jsx_runtime_1.jsx)(Tag_1.Tag, { className: "twa:mr-1", children: (0, AdaptableColumn_1.getColumnTypeFriendlyName)(dataType) }, dataType)))) : ((0, jsx_runtime_1.jsx)(Tag_1.Tag, { children: "None" }))] })) : null }), showRows && ((0, jsx_runtime_1.jsxs)(Flex_1.Box, { children: ["Rows", ' ', allKinds ? ((0, jsx_runtime_1.jsx)(Tag_1.Tag, { children: "All" })) : includedKinds.length === 0 ? ((0, jsx_runtime_1.jsx)(Tag_1.Tag, { children: "None" })) : (includedKinds.map((k) => ((0, jsx_runtime_1.jsx)(Tag_1.Tag, { className: "twa:mr-1", children: k }, k))))] }))] }));
+};
+const renderFormatColumnScopeSummary = (data) => {
+    return (0, jsx_runtime_1.jsx)(FormatColumnScopeSummaryContent, { data: data });
 };
 exports.renderFormatColumnScopeSummary = renderFormatColumnScopeSummary;
 // ---------------------------------------------------------------------------

package/src/View/FormatColumn/Wizard/FormatColumnSettingsWizardSection.js

@@ -12,7 +12,7 @@ const Card_1 = require("../../../components/Card");
 const Input_1 = tslib_1.__importDefault(require("../../../components/Input"));
 const TypeRadio_1 = require("../../Wizard/TypeRadio");
 const renderFormatColumnSettingsSummary = (data) => {
-    return ((0, jsx_runtime_1.jsxs)(Flex_1.Box, { className: "twa:p-2", children: [(0, jsx_runtime_1.jsxs)(Flex_1.Box, { className: "twa:mt-3", children: ["Name ", (0, jsx_runtime_1.jsx)(Tag_1.Tag, { children: data.Name })] }), (0, jsx_runtime_1.jsxs)(Flex_1.Box, { className: "twa:mt-3", children: ["Target", ' ', (0, jsx_runtime_1.jsx)(Tag_1.Tag, { children: !data.Target || data.Target === 'cell' ? 'Column Cells' : 'Column Header' })] }), ' ', (0, jsx_runtime_1.jsxs)(Flex_1.Box, { className: "twa:mt-3", children: ["Apply on Column Groups:", ' ', (0, jsx_runtime_1.jsx)(Tag_1.Tag, { children: !data.ColumnGroupScope || data.ColumnGroupScope === 'Both'
+    return ((0, jsx_runtime_1.jsxs)(Flex_1.Flex, { flexWrap: "wrap", alignItems: "center", className: "twa:gap-x-4 twa:gap-y-2", children: [(0, jsx_runtime_1.jsxs)(Flex_1.Box, { children: ["Name ", (0, jsx_runtime_1.jsx)(Tag_1.Tag, { children: data.Name })] }), (0, jsx_runtime_1.jsxs)(Flex_1.Box, { children: ["Target", ' ', (0, jsx_runtime_1.jsx)(Tag_1.Tag, { children: !data.Target || data.Target === 'cell' ? 'Column Cells' : 'Column Header' })] }), (0, jsx_runtime_1.jsxs)(Flex_1.Box, { children: ["Column Groups", ' ', (0, jsx_runtime_1.jsx)(Tag_1.Tag, { children: !data.ColumnGroupScope || data.ColumnGroupScope === 'Both'
                             ? 'Always'
                             : data.ColumnGroupScope })] })] }));
 };

package/src/View/FormatColumn/Wizard/FormatColumnStyleWizardSection.d.ts

@@ -5,7 +5,9 @@ export declare const isFormatColumnStyleValid: (data: FormatColumn, api: Adaptab
 type FormatColumnStyleWizardSectionProps = {
     onChange: (data: FormatColumn) => void;
 };
+export declare const hasFormatColumnStyle: (formatColumn: FormatColumn) => boolean;
+export declare const getFormatColumnStyleViewValues: (formatColumn: FormatColumn) => string[];
 export declare const renderFormatColumnStyleWizardSummary: (data: FormatColumn) => React.JSX.Element;
-export declare const renderFormatColumnStyleSummary: (data: FormatColumn, api: AdaptableApi) => React.JSX.Element;
+export declare const renderFormatColumnStyleSummary: (data: FormatColumn, _api: AdaptableApi) => React.JSX.Element;
 export declare function FormatColumnStyleWizardSection(props: FormatColumnStyleWizardSectionProps): React.JSX.Element;
 export {};