@adaptabletools/adaptable 23.0.0-canary.0 → 23.0.0-canary.10

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

@@ -1,6 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import uniq from '../../../Utilities/utils/uniq';
-import clamp from '../../../Utilities/utils/clamp';
+import * as React from 'react';
+import { uniq } from '../../../Utilities/Extensions/ArrayExtensions';
+import { clamp } from '../../../Utilities/Extensions/NumberExtensions';
 import HelpBlock from '../../../components/HelpBlock';
 import Input from '../../../components/Input';
 import SimpleButton from '../../../components/SimpleButton';
@@ -13,7 +14,7 @@ import { useOnePageAdaptableWizardContext } from '../../Wizard/OnePageAdaptableW
 import StringExtensions from '../../../Utilities/Extensions/StringExtensions';
 import { Tag } from '../../../components/Tag';
 import { useAdaptable } from '../../AdaptableContext';
-import FormatHelper from '../../../Utilities/Helpers/FormatHelper';
+import FormatHelper from '../../../Utilities/Helpers/DisplayFormatHelper';
 import { Toggle, ToggleGroup } from '../../../components/Toggle';
 import { DEFAULT_DOUBLE_DISPLAY_VALUE, DEFAULT_STRING_DISPLAY_VALUE, } from '../../../Utilities/Constants/GeneralConstants';
 import Textarea from '../../../components/Textarea';
@@ -22,6 +23,8 @@ import { FormatColumnPlaceholderDocsLink } from '../../../Utilities/Constants/Do
 import { PIVOT_AGGREGATION_TOTAL_COLUMN_TYPE, PIVOT_ANY_TOTAL_COLUMN_TYPE, PIVOT_COLUMN_TOTAL_COLUMN_TYPE, PIVOT_GRAND_TOTAL_COLUMN_TYPE, } from '../../../AdaptableState/Common/AdaptableColumn';
 import { Box, Flex } from '../../../components/Flex';
 import { Card } from '../../../components/Card';
+import { isObjectEmpty } from '../../../Utilities/Extensions/ObjectExtensions';
+import { DataSource, InfiniteTableGrid, } from '../../../components/InfiniteTable';
 const DateFormatPresets = [
     'MM/dd/yyyy',
     'dd-MM-yyyy',
@@ -31,24 +34,124 @@ const DateFormatPresets = [
     'yyyyMMdd',
     'HH:mm:ss',
 ];
-export 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);
+    if (options.ZeroDisplay !== undefined && options.ZeroDisplay !== '0') {
+        items.push({
+            label: 'Zero Display',
+            value: options.ZeroDisplay === '' ? 'Blank' : options.ZeroDisplay,
+        });
+    }
+    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(', '),
+        });
+    }
+};
+export const getFormatColumnDisplayFormatSummaryItems = (data) => {
+    if (data.DisplayFormat == null) {
+        return [];
+    }
+    if (isAdaptableNumericFormatPreset(data.DisplayFormat)) {
+        return [{ label: 'Preset', value: NUMERIC_PRESET_LABELS[data.DisplayFormat] }];
+    }
+    // Wizard materialises an empty { Formatter, Options: {} } shell while editing;
+    // treat it as unset (same as handleFinish in FormatColumnWizard).
+    if (data.DisplayFormat &&
+        typeof data.DisplayFormat === 'object' &&
+        isObjectEmpty(data.DisplayFormat.Options)) {
+        return [];
+    }
     const resolved = resolveDisplayFormat(data.DisplayFormat);
     if (!resolved) {
-        content = 'N/A';
+        return [];
     }
-    else {
-        if (resolved.Formatter === 'NumberFormatter') {
-            content = FormatHelper.NumberFormatter(DEFAULT_DOUBLE_DISPLAY_VALUE, resolved.Options);
-        }
-        if (resolved.Formatter === 'DateFormatter') {
-            content = FormatHelper.DateFormatter(new Date(), resolved.Options);
-        }
-        if (resolved.Formatter === 'StringFormatter') {
-            content = FormatHelper.StringFormatter(DEFAULT_STRING_DISPLAY_VALUE, resolved.Options);
+    const items = [];
+    if (resolved.Formatter === 'NumberFormatter') {
+        appendNumberFormatOptions(items, 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(', '),
+            });
         }
+        return items;
     }
-    return content;
+    if (resolved.Formatter === 'StringFormatter') {
+        appendStringFormatOptions(items, resolved.Options);
+        return items;
+    }
+    return items;
+};
+export const hasFormatColumnDisplayFormat = (data) => getFormatColumnDisplayFormatSummaryItems(data).length > 0;
+export const getFormatColumnFormatSummaryTagValues = (data) => {
+    const items = getFormatColumnDisplayFormatSummaryItems(data);
+    if (!items.length) {
+        return [];
+    }
+    return items.map(({ label, value }) => (label ? `${label}: ${value}` : value));
 };
 const renderCustomFormatter = (data, customFormatter, setFormatOption) => {
     const resolved = resolveDisplayFormat(data.DisplayFormat);
@@ -64,7 +167,11 @@ const renderCustomFormatter = (data, customFormatter, setFormatOption) => {
             } }) }, customFormatter.id));
 };
 export const renderFormatColumnFormatSummary = (data) => {
-    return _jsx(Tag, { children: getFormatColumnFormatSummaryValue(data) });
+    const tagValues = getFormatColumnFormatSummaryTagValues(data);
+    if (!tagValues.length) {
+        return _jsx(Tag, { children: "No Display Format" });
+    }
+    return (_jsx(Flex, { alignItems: "center", className: "twa:flex-wrap twa:gap-2", children: tagValues.map((tag) => (_jsx(Tag, { children: tag }, tag))) }));
 };
 export const getFormatDisplayTypeForScope = (scope, api) => {
     if (scope == undefined) {
@@ -161,27 +268,61 @@ export const getFormatDisplayTypeForScope = (scope, api) => {
     }
     return undefined;
 };
+const NUMBER_FORMAT_INPUT_CLASS = 'twa:w-[72px] twa:min-w-[72px] twa:max-w-[72px]';
+const NUMBER_FORMAT_LABEL_COLUMN = {
+    name: 'label',
+    className: 'ab-FormLayout_column--label twa:whitespace-nowrap',
+};
+const NUMBER_FORMAT_CHECKBOX_CHILDREN_COLUMN = {
+    name: 'children',
+    className: 'twa:pl-2',
+};
+const NUMBER_FORMAT_VALUE_CHILDREN_COLUMN = {
+    name: 'children',
+    className: 'twa:pl-2',
+};
+const NUMBER_FORMAT_DIGIT_FORM_SIZES = ['148px', '72px'];
+const NUMBER_FORMAT_VALUE_FORM_SIZES = ['92px', '72px'];
+const NUMBER_FORMAT_CHECKBOX_FORM_SIZES = ['72px', 'auto'];
+const DATE_FORMAT_PRESET_ROW_HEIGHT = 32;
+const DATE_FORMAT_PRESET_HEADER_HEIGHT = 40;
+const DateFormatPresetsTable = ({ onApplyPattern }) => {
+    const rows = React.useMemo(() => DateFormatPresets.map((pattern) => ({
+        pattern,
+        formattedDate: FormatHelper.DateFormatter(new Date(), { Pattern: pattern }) ?? '',
+    })), []);
+    const columns = React.useMemo(() => ({
+        pattern: {
+            field: 'pattern',
+            header: 'Pattern',
+            defaultFlex: 1,
+            renderMenuIcon: false,
+        },
+        formattedDate: {
+            field: 'formattedDate',
+            header: 'Formatted Date',
+            defaultFlex: 1,
+            renderMenuIcon: false,
+        },
+        apply: {
+            field: 'pattern',
+            header: '',
+            defaultWidth: 80,
+            align: 'center',
+            renderMenuIcon: false,
+            render: ({ data }) => (_jsx(SimpleButton, { "data-name": "apply-format-pattern", "data-value": data.pattern, onClick: () => onApplyPattern(data.pattern), children: "Apply" })),
+        },
+    }), [onApplyPattern]);
+    const tableHeight = DATE_FORMAT_PRESET_HEADER_HEIGHT + rows.length * DATE_FORMAT_PRESET_ROW_HEIGHT;
+    return (_jsx(DataSource, { data: rows, primaryKey: "pattern", children: _jsx(InfiniteTableGrid, { sortable: false, domProps: { style: { height: tableHeight, width: '100%' } }, columns: columns }) }));
+};
 const renderDateFormat = (data, _onChange, setFormatOption, scopedCustomFormatters) => {
     const resolved = resolveDisplayFormat(data.DisplayFormat);
     if (resolved?.Formatter !== 'DateFormatter') {
         return null;
     }
-    return (_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: "Format" }), _jsxs(Box, { className: "twa:text-xs twa:opacity-70 twa:font-normal twa:max-w-[520px]", children: ["Either create your own date pattern, or pick one of the presets below \u2014 see the", ' ', _jsx("a", { href: "https://www.unicode.org/reports/tr35/tr35-dates.html#Date_Field_Symbol_Table", target: "_blank", children: "available symbols" }), "."] })] }), _jsx(Card.Body, { children: _jsx(FormLayout, { children: _jsxs(FormRow, { label: "Pattern", children: [_jsx(Input, { "data-name": "pattern", value: resolved.Options.Pattern ?? '', onChange: (e) => setFormatOption('Pattern', e.currentTarget.value), className: "twa:mr-2" }), _jsx("span", { children: resolved.Options.Pattern &&
-                                            FormatHelper.DateFormatter(new Date(), resolved.Options, true) })] }) }) })] }), scopedCustomFormatters.length > 0 && (_jsxs(Card, { shadow: false, children: [_jsxs(Card.Title, { children: [_jsx(Box, { className: "twa:font-medium", children: "Custom Formats" }), _jsx(Box, { className: "twa:text-xs twa:opacity-70 twa:font-normal twa:max-w-[520px]", children: "Apply a developer-defined formatter to this Column" })] }), _jsx(Card.Body, { children: _jsx(FormLayout, { children: scopedCustomFormatters.map((formatter) => renderCustomFormatter(data, formatter, setFormatOption)) }) })] })), _jsxs(Card, { shadow: false, children: [_jsxs(Card.Title, { children: [_jsx(Box, { className: "twa:font-medium", children: "Presets" }), _jsx(Box, { className: "twa:text-xs twa:opacity-70 twa:font-normal twa:max-w-[520px]", children: "Apply a common date pattern as a starting point" })] }), _jsxs(Card.Body, { children: [_jsx(AdaptableObjectRow, { style: { fontWeight: 'bold' }, colItems: [
-                                    { Content: 'Pattern', Size: 1 },
-                                    { Content: 'Formatted Date', Size: 1 },
-                                    { Content: '', Size: 1 },
-                                ] }), DateFormatPresets.map((Pattern, index) => (_jsx(AdaptableObjectRow, { colItems: [
-                                    { Content: Pattern, Size: 1 },
-                                    {
-                                        Content: FormatHelper.DateFormatter(new Date(), { Pattern }),
-                                        Size: 1,
-                                    },
-                                    {
-                                        Content: (_jsx(SimpleButton, { "data-name": "apply-format-pattern", "data-value": Pattern, onClick: () => setFormatOption('Pattern', Pattern), children: "Apply" })),
-                                        Size: 1,
-                                    },
-                                ] }, index)))] })] })] }));
+    return (_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: "Format" }), _jsx(Box, { className: "twa:text-xs twa:opacity-70 twa:font-normal twa:max-w-[520px]", children: "Enter a Unicode date pattern (e.g. dd/MM/yyyy), or pick a preset below" })] }), _jsx(Card.Body, { children: _jsx(FormLayout, { children: _jsxs(FormRow, { label: "Pattern", children: [_jsx(Input, { "data-name": "pattern", value: resolved.Options.Pattern ?? '', onChange: (e) => setFormatOption('Pattern', e.currentTarget.value), className: "twa:mr-2" }), _jsx("span", { children: resolved.Options.Pattern &&
+                                            FormatHelper.DateFormatter(new Date(), resolved.Options, true) })] }) }) })] }), scopedCustomFormatters.length > 0 && (_jsxs(Card, { shadow: false, children: [_jsxs(Card.Title, { children: [_jsx(Box, { className: "twa:font-medium", children: "Custom Formats" }), _jsx(Box, { className: "twa:text-xs twa:opacity-70 twa:font-normal twa:max-w-[520px]", children: "Apply a developer-defined formatter to this Column" })] }), _jsx(Card.Body, { children: _jsx(FormLayout, { children: scopedCustomFormatters.map((formatter) => renderCustomFormatter(data, formatter, setFormatOption)) }) })] })), _jsxs(Card, { shadow: false, children: [_jsxs(Card.Title, { children: [_jsx(Box, { className: "twa:font-medium", children: "Presets" }), _jsx(Box, { className: "twa:text-xs twa:opacity-70 twa:font-normal twa:max-w-[520px]", children: "Apply a common date pattern as a starting point" })] }), _jsx(Card.Body, { className: "twa:px-0 twa:pt-0 twa:pb-1", children: _jsx(DateFormatPresetsTable, { onApplyPattern: (pattern) => setFormatOption('Pattern', pattern) }) })] })] }));
 };
 const renderNumberFormat = (data, onChange, setFormatOption, scopedCustomFormatters, api) => {
     const resolved = resolveDisplayFormat(data.DisplayFormat);
@@ -195,7 +336,9 @@ const renderNumberFormat = (data, onChange, setFormatOption, scopedCustomFormatt
     const setPreset = (preset) => {
         onChange({ DisplayFormat: preset });
     };
-    const activePreset = isAdaptableNumericFormatPreset(data.DisplayFormat) ? data.DisplayFormat : undefined;
+    const activePreset = isAdaptableNumericFormatPreset(data.DisplayFormat)
+        ? data.DisplayFormat
+        : undefined;
     const IS_PERCENT = activePreset === 'Percentage';
     const IS_THOUSAND = activePreset === 'Thousand';
     const IS_MILLION = activePreset === 'Million';
@@ -212,13 +355,27 @@ const renderNumberFormat = (data, onChange, setFormatOption, scopedCustomFormatt
     const IS_FX_RATE = activePreset === 'FXRate';
     const IS_SCIENTIFIC = activePreset === 'Scientific';
     const showDocumentationLinks = api.internalApi.isDocumentationLinksDisplayed();
-    return (_jsxs(Flex, { flexDirection: "column", "data-name": 'format-column-display-format', className: "twa:gap-3 twa:p-3", children: [_jsxs(Card, { shadow: false, children: [_jsxs(Card.Title, { children: [_jsx(Box, { className: "twa:font-medium", children: "Presets" }), _jsx(Box, { className: "twa:text-xs twa:opacity-70 twa:font-normal twa:max-w-[520px]", children: "Pick a common numeric preset as a starting point" })] }), _jsx(Card.Body, { children: _jsxs(Flex, { flexDirection: "row", className: "twa:m-2", children: [_jsxs(Flex, { flexDirection: "column", className: "twa:mr-6", children: [_jsx(Radio, { "data-name": "preset-dollar", className: "twa:my-1", checked: IS_DOLLAR, onChange: () => setPreset('Dollar'), children: "Dollar" }), _jsx(Radio, { "data-name": "preset-sterling", className: "twa:my-1", checked: IS_STERLING, onChange: () => setPreset('Sterling'), children: "Sterling" }), _jsx(Radio, { "data-name": "preset-euro", className: "twa:my-1", checked: IS_EURO, onChange: () => setPreset('Euro'), children: "Euro" }), _jsx(Radio, { "data-name": "preset-yen", className: "twa:my-1", checked: IS_YEN, onChange: () => setPreset('Yen'), children: "Yen" })] }), _jsxs(Flex, { flexDirection: "column", className: "twa:mr-6", children: [_jsx(Radio, { "data-name": "preset-thousand", className: "twa:my-1", checked: IS_THOUSAND, onChange: () => setPreset('Thousand'), children: "K (Thousand)" }), _jsx(Radio, { "data-name": "preset-million", className: "twa:my-1", checked: IS_MILLION, onChange: () => setPreset('Million'), children: "M (Million)" }), _jsx(Radio, { "data-name": "preset-billion", className: "twa:my-1", checked: IS_BILLION, onChange: () => setPreset('Billion'), children: "B (Billion)" }), _jsx(Radio, { "data-name": "preset-basis-points", className: "twa:my-1", checked: IS_BASIS_POINTS, onChange: () => setPreset('BasisPoints'), children: "bps (Basis Pts)" })] }), _jsxs(Flex, { flexDirection: "column", className: "twa:mr-6", children: [_jsx(Radio, { "data-name": "preset-integer", className: "twa:my-1", checked: IS_INTEGER, onChange: () => setPreset('Integer'), children: "Integer" }), _jsx(Radio, { "data-name": "preset-decimal", className: "twa:my-1", checked: IS_DECIMAL, onChange: () => setPreset('Decimal'), children: "Decimal" }), _jsx(Radio, { "data-name": "preset-percentage", className: "twa:my-1", checked: IS_PERCENT, onChange: () => setPreset('Percentage'), children: "Percentage" }), _jsx(Radio, { "data-name": "preset-scientific", className: "twa:my-1", checked: IS_SCIENTIFIC, onChange: () => setPreset('Scientific'), children: "Scientific" })] }), _jsxs(Flex, { flexDirection: "column", children: [_jsx(Radio, { "data-name": "preset-accounting", className: "twa:my-1", checked: IS_ACCOUNTING, onChange: () => setPreset('Accounting'), children: "Accounting" }), _jsx(Radio, { "data-name": "preset-fx-rate", className: "twa:my-1", checked: IS_FX_RATE, onChange: () => setPreset('FXRate'), children: "FX Rate" }), _jsx(Radio, { "data-name": "preset-bitcoin", className: "twa:my-1", checked: IS_BITCOIN, onChange: () => setPreset('Bitcoin'), children: "Bitcoin" })] })] }) })] }), _jsxs(Card, { shadow: false, children: [_jsxs(Card.Title, { children: [_jsx(Box, { className: "twa:font-medium", children: "Format" }), _jsx(Box, { className: "twa:text-xs twa:opacity-70 twa:font-normal twa:max-w-[520px]", children: "Fine-tune digits, separators, prefix / suffix and rounding behaviour" })] }), _jsx(Card.Body, { children: _jsxs(Flex, { flexDirection: "row", children: [_jsxs(FormLayout, { className: "twa:mr-3", children: [_jsx(FormRow, { label: "Fraction Digits", children: _jsx(Input, { "data-name": "fraction-digits", type: "number", min: "0", value: typeof resolved.Options.FractionDigits === 'number'
+    return (_jsxs(Flex, { flexDirection: "column", "data-name": 'format-column-display-format', className: "twa:gap-3 twa:p-3", children: [_jsxs(Card, { shadow: false, children: [_jsxs(Card.Title, { children: [_jsx(Box, { className: "twa:font-medium", children: "Presets" }), _jsx(Box, { className: "twa:text-xs twa:opacity-70 twa:font-normal twa:max-w-[520px]", children: "Pick a common numeric preset as a starting point" })] }), _jsx(Card.Body, { children: _jsxs(Flex, { flexDirection: "row", className: "twa:m-2", children: [_jsxs(Flex, { flexDirection: "column", className: "twa:mr-6", children: [_jsx(Radio, { "data-name": "preset-dollar", className: "twa:my-1", checked: IS_DOLLAR, onChange: () => setPreset('Dollar'), children: "Dollar" }), _jsx(Radio, { "data-name": "preset-sterling", className: "twa:my-1", checked: IS_STERLING, onChange: () => setPreset('Sterling'), children: "Sterling" }), _jsx(Radio, { "data-name": "preset-euro", className: "twa:my-1", checked: IS_EURO, onChange: () => setPreset('Euro'), children: "Euro" }), _jsx(Radio, { "data-name": "preset-yen", className: "twa:my-1", checked: IS_YEN, onChange: () => setPreset('Yen'), children: "Yen" })] }), _jsxs(Flex, { flexDirection: "column", className: "twa:mr-6", children: [_jsx(Radio, { "data-name": "preset-thousand", className: "twa:my-1", checked: IS_THOUSAND, onChange: () => setPreset('Thousand'), children: "K (Thousand)" }), _jsx(Radio, { "data-name": "preset-million", className: "twa:my-1", checked: IS_MILLION, onChange: () => setPreset('Million'), children: "M (Million)" }), _jsx(Radio, { "data-name": "preset-billion", className: "twa:my-1", checked: IS_BILLION, onChange: () => setPreset('Billion'), children: "B (Billion)" }), _jsx(Radio, { "data-name": "preset-basis-points", className: "twa:my-1", checked: IS_BASIS_POINTS, onChange: () => setPreset('BasisPoints'), children: "bps (Basis Pts)" })] }), _jsxs(Flex, { flexDirection: "column", className: "twa:mr-6", children: [_jsx(Radio, { "data-name": "preset-integer", className: "twa:my-1", checked: IS_INTEGER, onChange: () => setPreset('Integer'), children: "Integer" }), _jsx(Radio, { "data-name": "preset-decimal", className: "twa:my-1", checked: IS_DECIMAL, onChange: () => setPreset('Decimal'), children: "Decimal" }), _jsx(Radio, { "data-name": "preset-percentage", className: "twa:my-1", checked: IS_PERCENT, onChange: () => setPreset('Percentage'), children: "Percentage" }), _jsx(Radio, { "data-name": "preset-scientific", className: "twa:my-1", checked: IS_SCIENTIFIC, onChange: () => setPreset('Scientific'), children: "Scientific" })] }), _jsxs(Flex, { flexDirection: "column", children: [_jsx(Radio, { "data-name": "preset-accounting", className: "twa:my-1", checked: IS_ACCOUNTING, onChange: () => setPreset('Accounting'), children: "Accounting" }), _jsx(Radio, { "data-name": "preset-fx-rate", className: "twa:my-1", checked: IS_FX_RATE, onChange: () => setPreset('FXRate'), children: "FX Rate" }), _jsx(Radio, { "data-name": "preset-bitcoin", className: "twa:my-1", checked: IS_BITCOIN, onChange: () => setPreset('Bitcoin'), children: "Bitcoin" })] })] }) })] }), _jsxs(Card, { shadow: false, className: "twa:pl-0", children: [_jsxs(Card.Title, { children: [_jsx(Box, { className: "twa:font-medium", children: "Format" }), _jsx(Box, { className: "twa:text-xs twa:opacity-70 twa:font-normal twa:max-w-[520px]", children: "Fine-tune digits, separators, prefix / suffix and rounding behaviour" })] }), _jsx(Card.Body, { className: "twa:px-0 twa:pt-0 twa:pb-1", children: _jsxs(Box, { className: "twa:flex twa:flex-row twa:items-start twa:-ml-0.5", children: [_jsxs(FormLayout, { sizes: NUMBER_FORMAT_DIGIT_FORM_SIZES, columns: [NUMBER_FORMAT_LABEL_COLUMN, { name: 'children' }], className: "twa:mr-6 twa:shrink-0", children: [_jsx(FormRow, { label: "Fraction Digits", children: _jsx(Input, { className: NUMBER_FORMAT_INPUT_CLASS, "data-name": "fraction-digits", type: "number", min: "0", value: typeof resolved.Options.FractionDigits === 'number'
                                                     ? resolved.Options.FractionDigits
                                                     : '', onChange: (e) => setFormatOption('FractionDigits', StringExtensions.IsNumeric(e.currentTarget.value)
                                                     ? clamp(Number(e.currentTarget.value), 0, 20)
-                                                    : undefined) }) }), _jsx(FormRow, { label: "Integer Digits", children: _jsx(Input, { "data-name": "integer-digits", type: "number", min: "0", value: resolved.Options.IntegerDigits, onChange: (e) => setFormatOption('IntegerDigits', StringExtensions.IsNumeric(e.currentTarget.value)
+                                                    : undefined) }) }), _jsx(FormRow, { label: "Integer Digits", children: _jsx(Input, { className: NUMBER_FORMAT_INPUT_CLASS, "data-name": "integer-digits", type: "number", min: "0", value: resolved.Options.IntegerDigits, onChange: (e) => setFormatOption('IntegerDigits', StringExtensions.IsNumeric(e.currentTarget.value)
                                                     ? clamp(Number(e.currentTarget.value), 0, 20)
-                                                    : undefined) }) }), _jsx(FormRow, { label: "Fraction Separator", children: _jsx(Input, { "data-name": "fraction-separator", value: resolved.Options.FractionSeparator ?? '', onChange: (e) => setFormatOption('FractionSeparator', e.currentTarget.value) }) }), _jsx(FormRow, { label: "Integer Separator", children: _jsx(Input, { "data-name": "integer-separator", value: resolved.Options.IntegerSeparator ?? '', onChange: (e) => setFormatOption('IntegerSeparator', e.currentTarget.value) }) }), _jsx(FormRow, { label: "Multiplier", children: _jsx(Input, { "data-name": "multiplier", type: "number", value: resolved.Options.Multiplier, onChange: (e) => setFormatOption('Multiplier', Number(e.currentTarget.value)) }) })] }), _jsxs(FormLayout, { className: "twa:mr-3", children: [_jsx(FormRow, { label: "Prefix", children: _jsx(Input, { "data-name": "prefix", value: resolved.Options.Prefix ?? '', onChange: (e) => setFormatOption('Prefix', e.currentTarget.value) }) }), _jsx(FormRow, { label: "Suffix", children: _jsx(Input, { "data-name": "suffix", value: resolved.Options.Suffix ?? '', onChange: (e) => setFormatOption('Suffix', e.currentTarget.value) }) }), _jsx(FormRow, { label: "Parentheses", children: _jsx(CheckBox, { "data-name": "parentheses-checkbox", checked: resolved.Options.Parentheses, onChange: (checked) => setFormatOption('Parentheses', checked) }) }), _jsx(FormRow, { label: "Empty", children: _jsx(CheckBox, { "data-name": "empty-checkbox", checked: resolved.Options.Empty, onChange: (checked) => setFormatOption('Empty', checked) }) })] }), _jsxs(FormLayout, { children: [_jsx(FormRow, { label: "Truncate", children: _jsx(CheckBox, { "data-name": "truncate-checkbox", checked: resolved.Options.Truncate, onChange: (checked) => setFormatOption('Truncate', checked) }) }), _jsx(FormRow, { label: "Round", children: _jsx(CheckBox, { "data-name": "round-checkbox", checked: resolved.Options.Round, onChange: (checked) => setFormatOption('Round', checked) }) }), _jsx(FormRow, { label: "Ceiling", children: _jsx(CheckBox, { "data-name": "ceiling-checkbox", checked: resolved.Options.Ceiling, onChange: (checked) => setFormatOption('Ceiling', checked) }) }), _jsx(FormRow, { label: "Floor", children: _jsx(CheckBox, { "data-name": "floor-checkbox", checked: resolved.Options.Floor, onChange: (checked) => setFormatOption('Floor', checked) }) }), _jsx(FormRow, { label: "Absolute", children: _jsx(CheckBox, { "data-name": "abs-checkbox", checked: resolved.Options.Abs, onChange: (checked) => setFormatOption('Abs', checked) }) }), _jsx(FormRow, { label: "Scientific", children: _jsx(CheckBox, { "data-name": "scientific-checkbox", checked: resolved.Options.Notation === 'scientific', onChange: (checked) => setFormatOption('Notation', checked ? 'scientific' : undefined) }) })] })] }) })] }), scopedCustomFormatters.length > 0 && (_jsxs(Card, { shadow: false, children: [_jsxs(Card.Title, { children: [_jsx(Box, { className: "twa:font-medium", children: "Custom Formats" }), _jsx(Box, { className: "twa:text-xs twa:opacity-70 twa:font-normal twa:max-w-[520px]", children: "Apply a developer-defined formatter to this Column" })] }), _jsx(Card.Body, { children: _jsx(Flex, { flexDirection: "row", children: _jsx(FormLayout, { children: scopedCustomFormatters.map((formatter) => renderCustomFormatter(data, formatter, setFormatOption)) }) }) })] })), _jsxs(Card, { shadow: false, children: [_jsxs(Card.Title, { children: [_jsx(Box, { className: "twa:font-medium", children: "Dynamic Content" }), _jsx(Box, { className: "twa:text-xs twa:opacity-70 twa:font-normal twa:max-w-[520px]", children: "Provide dynamic content through the use of Placeholders" })] }), _jsx(Card.Body, { children: _jsxs(FormLayout, { className: "twa:m-2", children: [_jsxs(FormRow, { label: "", children: [_jsx(Textarea, { className: "twa:min-w-[300px] twa:mt-2", rows: 3, placeholder: "", type: 'text', autoFocus: false, value: resolved.Options.Content?.toString() ?? '', onChange: (e) => setFormatOption('Content', e.currentTarget.value) }), showDocumentationLinks && (_jsxs(HelpBlock, { "data-name": "query-documentation", className: "twa:mt-3 twa:mb-2 twa:p-0 twa:text-3", children: [_jsx(ButtonInfo, { className: "twa:mr-2", onClick: () => window.open(FormatColumnPlaceholderDocsLink, '_blank') }), "Learn more about using placeholders"] }))] }), ' '] }) })] }), _jsxs(Card, { shadow: false, children: [_jsxs(Card.Title, { children: [_jsx(Box, { className: "twa:font-medium", children: "Examples" }), _jsx(Box, { className: "twa:text-xs twa:opacity-70 twa:font-normal twa:max-w-[520px]", children: "Preview the formatter against sample values" })] }), _jsxs(Card.Body, { children: [_jsx(AdaptableObjectRow, { className: "twa:font-bold", colItems: [
+                                                    : undefined) }) }), _jsx(FormRow, { label: "Fraction Separator", children: _jsx(Input, { className: NUMBER_FORMAT_INPUT_CLASS, "data-name": "fraction-separator", value: resolved.Options.FractionSeparator ?? '', onChange: (e) => setFormatOption('FractionSeparator', e.currentTarget.value) }) }), _jsx(FormRow, { label: "Integer Separator", children: _jsx(Input, { className: NUMBER_FORMAT_INPUT_CLASS, "data-name": "integer-separator", value: resolved.Options.IntegerSeparator ?? '', onChange: (e) => setFormatOption('IntegerSeparator', e.currentTarget.value) }) })] }), _jsxs(FormLayout, { sizes: NUMBER_FORMAT_VALUE_FORM_SIZES, columns: [NUMBER_FORMAT_LABEL_COLUMN, NUMBER_FORMAT_VALUE_CHILDREN_COLUMN], className: "twa:mr-5 twa:shrink-0", children: [_jsx(FormRow, { label: "Multiplier", children: _jsx(Input, { className: NUMBER_FORMAT_INPUT_CLASS, "data-name": "multiplier", type: "number", value: resolved.Options.Multiplier, onChange: (e) => setFormatOption('Multiplier', Number(e.currentTarget.value)) }) }), _jsx(FormRow, { label: "Prefix", children: _jsx(Input, { className: NUMBER_FORMAT_INPUT_CLASS, "data-name": "prefix", value: resolved.Options.Prefix ?? '', onChange: (e) => setFormatOption('Prefix', e.currentTarget.value) }) }), _jsx(FormRow, { label: "Suffix", children: _jsx(Input, { className: NUMBER_FORMAT_INPUT_CLASS, "data-name": "suffix", value: resolved.Options.Suffix ?? '', onChange: (e) => setFormatOption('Suffix', e.currentTarget.value) }) }), _jsx(FormRow, { label: "Zero Display", children: _jsx(Input, { className: NUMBER_FORMAT_INPUT_CLASS, "data-name": "zero-display", value: resolved.Options.ZeroDisplay === undefined ||
+                                                    resolved.Options.ZeroDisplay === '0'
+                                                    ? '0'
+                                                    : resolved.Options.ZeroDisplay, onChange: (e) => {
+                                                    const value = e.currentTarget.value;
+                                                    if (value === '') {
+                                                        setFormatOption('ZeroDisplay', '');
+                                                    }
+                                                    else if (value === '0') {
+                                                        setFormatOption('ZeroDisplay', undefined);
+                                                    }
+                                                    else {
+                                                        setFormatOption('ZeroDisplay', value);
+                                                    }
+                                                } }) })] }), _jsxs(Flex, { className: "twa:gap-2 twa:shrink-0", children: [_jsxs(FormLayout, { sizes: NUMBER_FORMAT_CHECKBOX_FORM_SIZES, columns: [NUMBER_FORMAT_LABEL_COLUMN, NUMBER_FORMAT_CHECKBOX_CHILDREN_COLUMN], children: [_jsx(FormRow, { label: "Parentheses", children: _jsx(CheckBox, { "data-name": "parentheses-checkbox", checked: resolved.Options.Parentheses, onChange: (checked) => setFormatOption('Parentheses', checked) }) }), _jsx(FormRow, { label: "Empty", children: _jsx(CheckBox, { "data-name": "empty-checkbox", checked: resolved.Options.Empty, onChange: (checked) => setFormatOption('Empty', checked) }) }), _jsx(FormRow, { label: "Truncate", children: _jsx(CheckBox, { "data-name": "truncate-checkbox", checked: resolved.Options.Truncate, onChange: (checked) => setFormatOption('Truncate', checked) }) }), _jsx(FormRow, { label: "Round", children: _jsx(CheckBox, { "data-name": "round-checkbox", checked: resolved.Options.Round, onChange: (checked) => setFormatOption('Round', checked) }) })] }), _jsxs(FormLayout, { sizes: NUMBER_FORMAT_CHECKBOX_FORM_SIZES, columns: [NUMBER_FORMAT_LABEL_COLUMN, { name: 'children' }], children: [_jsx(FormRow, { label: "Ceiling", children: _jsx(CheckBox, { "data-name": "ceiling-checkbox", checked: resolved.Options.Ceiling, onChange: (checked) => setFormatOption('Ceiling', checked) }) }), _jsx(FormRow, { label: "Floor", children: _jsx(CheckBox, { "data-name": "floor-checkbox", checked: resolved.Options.Floor, onChange: (checked) => setFormatOption('Floor', checked) }) }), _jsx(FormRow, { label: "Absolute", children: _jsx(CheckBox, { "data-name": "abs-checkbox", checked: resolved.Options.Abs, onChange: (checked) => setFormatOption('Abs', checked) }) }), _jsx(FormRow, { label: "Scientific", children: _jsx(CheckBox, { "data-name": "scientific-checkbox", checked: resolved.Options.Notation === 'scientific', onChange: (checked) => setFormatOption('Notation', checked ? 'scientific' : undefined) }) })] })] })] }) })] }), scopedCustomFormatters.length > 0 && (_jsxs(Card, { shadow: false, children: [_jsxs(Card.Title, { children: [_jsx(Box, { className: "twa:font-medium", children: "Custom Formats" }), _jsx(Box, { className: "twa:text-xs twa:opacity-70 twa:font-normal twa:max-w-[520px]", children: "Apply a developer-defined formatter to this Column" })] }), _jsx(Card.Body, { children: _jsx(Flex, { flexDirection: "row", children: _jsx(FormLayout, { children: scopedCustomFormatters.map((formatter) => renderCustomFormatter(data, formatter, setFormatOption)) }) }) })] })), _jsxs(Card, { shadow: false, children: [_jsxs(Card.Title, { children: [_jsx(Box, { className: "twa:font-medium", children: "Dynamic Content" }), _jsxs(Flex, { alignItems: "center", className: "twa:gap-1 twa:text-xs twa:opacity-70 twa:font-normal twa:max-w-[520px]", children: [_jsx(Box, { children: "Provide dynamic content through the use of Placeholders" }), showDocumentationLinks && (_jsx(ButtonInfo, { variant: "text", tone: "accent", tooltip: "Learn more about using placeholders", onClick: () => window.open(FormatColumnPlaceholderDocsLink, '_blank') }))] })] }), _jsx(Card.Body, { children: _jsxs(FormLayout, { className: "twa:m-2", children: [_jsx(FormRow, { label: "", children: _jsx(Textarea, { className: "twa:min-w-[300px] twa:mt-2", rows: 3, placeholder: "", type: 'text', autoFocus: false, value: resolved.Options.Content?.toString() ?? '', onChange: (e) => setFormatOption('Content', e.currentTarget.value) }) }), ' '] }) })] }), _jsxs(Card, { shadow: false, children: [_jsxs(Card.Title, { children: [_jsx(Box, { className: "twa:font-medium", children: "Examples" }), _jsx(Box, { className: "twa:text-xs twa:opacity-70 twa:font-normal twa:max-w-[520px]", children: "Preview the formatter against sample values" })] }), _jsxs(Card.Body, { children: [_jsx(AdaptableObjectRow, { className: "twa:font-bold", colItems: [
                                     { Content: 'Raw Number', Size: 1 },
                                     { Content: 'Formatted Number', Size: 1 },
                                 ] }), _jsx(AdaptableObjectRow, { colItems: [
@@ -239,6 +396,12 @@ const renderNumberFormat = (data, onChange, setFormatOption, scopedCustomFormatt
                                         Content: FormatHelper.NumberFormatter(0.123, resolved.Options),
                                         Size: 1,
                                     },
+                                ] }), _jsx(AdaptableObjectRow, { colItems: [
+                                    { Content: '0', Size: 1 },
+                                    {
+                                        Content: FormatHelper.NumberFormatter(0, resolved.Options),
+                                        Size: 1,
+                                    },
                                 ] })] })] })] }));
 };
 const renderStringFormat = (data, _onChange, setFormatOption, scopedCustomFormatters, api) => {
@@ -263,7 +426,6 @@ const renderStringFormat = (data, _onChange, setFormatOption, scopedCustomFormat
 export const FormatColumnFormatWizardSection = (props) => {
     const { data } = useOnePageAdaptableWizardContext();
     const adaptable = useAdaptable();
-    const formatColumnApi = adaptable.api.formatColumnApi;
     const customDisplayFormatters = adaptable.api.optionsApi.getFormatColumnOptions().customDisplayFormatters ?? [];
     const update = (updated) => {
         props.onChange({ ...data, ...updated });

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,66 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { resolveDisplayFormat } from '../../../AdaptableState/Common/AdaptableFormatPresets';
+import { DEFAULT_DOUBLE_DISPLAY_VALUE, DEFAULT_STRING_DISPLAY_VALUE, } from '../../../Utilities/Constants/GeneralConstants';
+import FormatHelper from '../../../Utilities/Helpers/DisplayFormatHelper';
+import { convertAdaptableStyleToCSS } from '../../../Utilities/Helpers/StyleHelper';
+import { Card } from '../../../components/Card';
+import { Box } from '../../../components/Flex';
+import { useOnePageAdaptableWizardContext } from '../../Wizard/OnePageAdaptableWizard';
+import { getFormatDisplayTypeForScope } from './FormatColumnFormatWizardSection';
+const toFormatColumnPreviewStyle = (formatColumn) => {
+    const style = formatColumn.Style ?? {};
+    return {
+        ...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. */
+export const getFormatColumnPreviewDateSampleText = () => new Date().toLocaleDateString();
+export const getFormatColumnStylePreviewText = (formatColumn, api) => {
+    const formatType = getFormatDisplayTypeForScope(formatColumn.Scope, api);
+    if (formatType === 'number') {
+        return String(DEFAULT_DOUBLE_DISPLAY_VALUE);
+    }
+    if (formatType === 'date') {
+        return getFormatColumnPreviewDateSampleText();
+    }
+    return DEFAULT_STRING_DISPLAY_VALUE;
+};
+export const getFormatColumnPreviewSampleValue = (formatColumn, api) => {
+    const formatType = getFormatDisplayTypeForScope(formatColumn.Scope, api);
+    if (formatType === 'number') {
+        return DEFAULT_DOUBLE_DISPLAY_VALUE;
+    }
+    if (formatType === 'date') {
+        return getFormatColumnPreviewDateSampleText();
+    }
+    return DEFAULT_STRING_DISPLAY_VALUE;
+};
+export const getFormatColumnPreviewText = (formatColumn, api) => {
+    const sample = getFormatColumnPreviewSampleValue(formatColumn, api);
+    const resolved = resolveDisplayFormat(formatColumn.DisplayFormat);
+    if (!resolved) {
+        return String(sample);
+    }
+    if (resolved.Formatter === 'NumberFormatter' && typeof sample === 'number') {
+        return FormatHelper.NumberFormatter(sample, resolved.Options) ?? String(sample);
+    }
+    if (resolved.Formatter === 'DateFormatter') {
+        return FormatHelper.DateFormatter(new Date(), resolved.Options) ?? String(sample);
+    }
+    if (resolved.Formatter === 'StringFormatter' && typeof sample === 'string') {
+        return FormatHelper.StringFormatter(sample, resolved.Options) ?? sample;
+    }
+    return String(sample);
+};
+export const FormatColumnPreviewContent = ({ formatColumn, api }) => (_jsx(Box, { className: "ab-FormatPreview twa:p-2 twa:inline-block", style: toFormatColumnPreviewStyle(formatColumn), children: getFormatColumnPreviewText(formatColumn, api) }));
+export const renderFormatColumnPreviewSummary = (formatColumn, api) => _jsx(FormatColumnPreviewContent, { formatColumn: formatColumn, api: api });
+export const FormatColumnPreview = () => {
+    const { data, api } = useOnePageAdaptableWizardContext();
+    return _jsx(FormatColumnPreviewContent, { formatColumn: data, api: api });
+};
+export const FormatColumnPreviewSummaryCard = () => {
+    return (_jsxs(Card, { shadow: false, children: [_jsx(Card.Title, { children: _jsx(Box, { className: "twa:font-medium", children: "Preview" }) }), _jsx(Card.Body, { className: "twa:p-1", children: _jsx(FormatColumnPreview, {}) })] }));
+};

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

@@ -1,8 +1,11 @@
 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 function FormatColumnRuleWizardSection(props: FormatColumnRuleWizardSectionProps): React.JSX.Element;
 export {};

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

@@ -2,6 +2,32 @@ import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-run
 import { useOnePageAdaptableWizardContext } from '../../Wizard/OnePageAdaptableWizard';
 import { EntityRulesEditor } from '../../Components/EntityRulesEditor';
 import HelpBlock from '../../../components/HelpBlock';
+import { Box } from '../../../components/Flex';
+import { Tag } from '../../../components/Tag';
+export 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));
+};
+export const renderFormatColumnConditionSummary = (formatColumn, api) => {
+    if (formatColumn.Target === 'columnHeader') {
+        return _jsx(Tag, { children: "No Condition" });
+    }
+    if (!hasFormatColumnCondition(formatColumn)) {
+        return _jsx(Tag, { children: "No Condition" });
+    }
+    const rule = formatColumn.Rule;
+    if (rule?.Predicates?.length) {
+        return (_jsx(Box, { className: "twa:flex twa:flex-col twa:gap-2", children: rule.Predicates.map((predicate, index) => (_jsx(Tag, { children: api.predicateApi.predicateToString(predicate) }, index))) }));
+    }
+    const expressionText = api.internalApi.getAdaptableQueryExpressionText(rule);
+    return _jsx(Tag, { children: expressionText || 'No Condition' });
+};
 export function FormatColumnRuleWizardSection(props) {
     const { data, api, moduleInfo } = useOnePageAdaptableWizardContext();
     if (data.Target && data.Target === 'columnHeader') {