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

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

@@ -1,14 +1,30 @@
-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 { useOnePageAdaptableWizardContext } from '../../Wizard/OnePageAdaptableWizard';
-import { Tabs } from '../../../components/Tabs';
 import { StyleComponent } from '../../Components/StyleComponent';
 import { StylePreview } from '../../../components/StylePreview';
-import { Box } from '../../../components/Flex';
-const changeStyle = _jsx(Box, { className: "twa:text-2 twa:inline-block", children: "Change style" });
+import { Box, Flex } from '../../../components/Flex';
+import { Card } from '../../../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)',
+    },
+];
 export const FlashingAlertStyleWizardSection = (props) => {
     let { data: flashingAlert, api } = useOnePageAdaptableWizardContext();
     flashingAlert = flashingAlert ?? props.flashingAlert;
-    return (_jsx(_Fragment, { children: _jsxs(Tabs, { defaultValue: "up", children: [_jsxs(Tabs.Tab, { value: "up", children: ["Up ", changeStyle] }), _jsx(Tabs.Content, { value: "up", children: _jsx(StyleComponent, { headless: true, api: api, Style: flashingAlert.UpChangeStyle ?? {}, UpdateStyle: (style) => props.onStyleChange('UpChangeStyle', style) }) }), _jsxs(Tabs.Tab, { value: "down", children: ["Down ", changeStyle] }), _jsx(Tabs.Content, { value: "down", children: _jsx(StyleComponent, { headless: true, api: api, Style: flashingAlert.DownChangeStyle ?? {}, UpdateStyle: (style) => props.onStyleChange('DownChangeStyle', style) }) }), _jsxs(Tabs.Tab, { value: "neutral", children: ["Neutral ", changeStyle] }), _jsx(Tabs.Content, { value: "neutral", children: _jsx(StyleComponent, { headless: true, api: api, Style: flashingAlert.NeutralChangeStyle ?? {}, UpdateStyle: (style) => props.onStyleChange('NeutralChangeStyle', style) }) })] }) }));
+    return (_jsx(Flex, { flexDirection: "column", className: "twa:gap-3 twa:p-3", children: FLASH_STYLE_CARDS.map(({ key, title, description }) => (_jsxs(Card, { shadow: false, children: [_jsxs(Card.Title, { children: [_jsx(Box, { className: "twa:font-medium", children: title }), _jsx(Box, { className: "twa:text-xs twa:opacity-70 twa:font-normal twa:max-w-[520px]", children: description })] }), _jsx(Card.Body, { children: _jsx(StyleComponent, { headless: true, api: api, Style: flashingAlert[key] ?? {}, UpdateStyle: (style) => props.onStyleChange(key, style) }) })] }, key))) }));
 };
 export const FlashingCellStyle = (props) => {
     const { data, ...boxProps } = props;

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

@@ -63,7 +63,7 @@ export const FlashingCellWizard = (props) => {
             {
                 details: 'Set Name, Duration and Target Properties',
                 isValid: isSettingsValid,
-                render: () => (_jsx(Box, { className: "twa:p-2", children: _jsx(FlashingAlertSettingsWizardSection, { onChange: setFlashingCell }) })),
+                render: () => _jsx(FlashingAlertSettingsWizardSection, { onChange: setFlashingCell }),
                 renderSummary: renderFlashingAlertSettingsSummary,
                 title: 'Settings',
             },
@@ -83,9 +83,9 @@ export const FlashingCellWizard = (props) => {
             },
             {
                 details: 'Choose Flash Styles for Up, Down and Neutral Changes',
-                render: () => (_jsx(Box, { className: "twa:p-2", children: _jsx(FlashingAlertStyleWizardSection, { onStyleChange: (styleName, style) => {
-                            updateStyles[styleName](style);
-                        } }) })),
+                render: () => (_jsx(FlashingAlertStyleWizardSection, { onStyleChange: (styleName, style) => {
+                        updateStyles[styleName](style);
+                    } })),
                 renderSummary: 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

@@ -31,24 +31,122 @@ 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);
+    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: '', value: `${NUMERIC_PRESET_LABELS[data.DisplayFormat]} Preset` }];
+    }
     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);
+    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.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.StringFormatter(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;
+};
+export const hasFormatColumnDisplayFormat = (data) => getFormatColumnDisplayFormatSummaryItems(data).length > 0;
+export const getFormatColumnFormatSummaryValue = (data) => {
+    const items = getFormatColumnDisplayFormatSummaryItems(data);
+    if (!items.length) {
+        return 'No Display Format';
+    }
+    return items
+        .map(({ label, value }) => (label ? `${label}: ${value}` : value))
+        .join(', ');
 };
 const renderCustomFormatter = (data, customFormatter, setFormatOption) => {
     const resolved = resolveDisplayFormat(data.DisplayFormat);
@@ -64,7 +162,14 @@ const renderCustomFormatter = (data, customFormatter, setFormatOption) => {
             } }) }, customFormatter.id));
 };
 export const renderFormatColumnFormatSummary = (data) => {
-    return _jsx(Tag, { children: getFormatColumnFormatSummaryValue(data) });
+    const items = getFormatColumnDisplayFormatSummaryItems(data);
+    if (!items.length) {
+        return _jsx(Tag, { children: "No Display Format" });
+    }
+    if (items.length === 1 && !items[0].label) {
+        return _jsx(Tag, { children: items[0].value });
+    }
+    return (_jsx(Box, { className: "twa:flex twa:flex-col twa:gap-2", children: items.map(({ label, value }) => (_jsxs(Box, { children: [label, " ", _jsx(Tag, { children: value })] }, label))) }));
 };
 export const getFormatDisplayTypeForScope = (scope, api) => {
     if (scope == undefined) {

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/FormatHelper';
+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,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

@@ -2,6 +2,36 @@ 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 const renderFormatColumnConditionWizardSummary = (formatColumn) => {
+    const { api } = useOnePageAdaptableWizardContext();
+    return renderFormatColumnConditionSummary(formatColumn, api);
+};
 export function FormatColumnRuleWizardSection(props) {
     const { data, api, moduleInfo } = useOnePageAdaptableWizardContext();
     if (data.Target && data.Target === 'columnHeader') {

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

@@ -1,6 +1,8 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { NewScopeComponent, renderScopeSummary } from '../../Components/NewScopeComponent';
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { NewScopeComponent } from '../../Components/NewScopeComponent';
 import { useOnePageAdaptableWizardContext } from '../../Wizard/OnePageAdaptableWizard';
+import { useAdaptable } from '../../AdaptableContext';
+import { getColumnTypeFriendlyName } from '../../../AdaptableState/Common/AdaptableColumn';
 import { isScopeColumnIds } from '../../../AdaptableState/Common/ColumnScope';
 import { Box, Flex } from '../../../components/Flex';
 import FormLayout, { FormRow } from '../../../components/FormLayout';
@@ -29,15 +31,18 @@ const isRowKindIncluded = (data, kind) => {
 const collectIncludedRowKinds = (data) => {
     return FORMAT_COLUMN_ROW_KINDS.filter((k) => isRowKindIncluded(data, k));
 };
-export const renderFormatColumnScopeSummary = (data) => {
+const FormatColumnScopeSummaryContent = ({ data, }) => {
+    const adaptable = 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 (_jsxs(Box, { className: "twa:pr-2 twa:py-2", children: [_jsx(Box, { children: 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 && (_jsxs(Box, { className: "twa:mt-3", children: ["Rows:", ' ', allKinds ? (_jsx(Tag, { children: "All" })) : includedKinds.length === 0 ? (_jsx(Tag, { children: "None" })) : (includedKinds.map((k) => (_jsx(Tag, { className: "twa:mr-1", children: k }, k))))] }))] }));
+    return (_jsxs(Box, { className: "twa:flex twa:flex-col twa:gap-3", children: [_jsx(Box, { children: scopeApi.scopeIsAll(scope) ? (_jsxs(_Fragment, { children: ["Columns ", _jsx(Tag, { children: "All" })] })) : 'ColumnIds' in scope ? (_jsxs(_Fragment, { children: ["Columns", ' ', columnsInScope.length ? (columnsInScope.map((column) => (_jsx(Tag, { className: "twa:mr-1", children: column.friendlyName }, column.columnId)))) : (_jsx(Tag, { children: "None" }))] })) : 'DataTypes' in scope ? (_jsxs(_Fragment, { children: ["Data Types", ' ', scope.DataTypes.length ? (scope.DataTypes.map((dataType) => (_jsx(Tag, { className: "twa:mr-1", children: getColumnTypeFriendlyName(dataType) }, dataType)))) : (_jsx(Tag, { children: "None" }))] })) : null }), showRows && (_jsxs(Box, { children: ["Rows", ' ', allKinds ? (_jsx(Tag, { children: "All" })) : includedKinds.length === 0 ? (_jsx(Tag, { children: "None" })) : (includedKinds.map((k) => (_jsx(Tag, { className: "twa:mr-1", children: k }, k))))] }))] }));
+};
+export const renderFormatColumnScopeSummary = (data) => {
+    return _jsx(FormatColumnScopeSummaryContent, { data: data });
 };
 // ---------------------------------------------------------------------------
 // Section

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

@@ -8,7 +8,7 @@ import { Card } from '../../../components/Card';
 import Input from '../../../components/Input';
 import { TypeRadio } from '../../Wizard/TypeRadio';
 export const renderFormatColumnSettingsSummary = (data) => {
-    return (_jsxs(Box, { className: "twa:p-2", children: [_jsxs(Box, { className: "twa:mt-3", children: ["Name ", _jsx(Tag, { children: data.Name })] }), _jsxs(Box, { className: "twa:mt-3", children: ["Target", ' ', _jsx(Tag, { children: !data.Target || data.Target === 'cell' ? 'Column Cells' : 'Column Header' })] }), ' ', _jsxs(Box, { className: "twa:mt-3", children: ["Apply on Column Groups:", ' ', _jsx(Tag, { children: !data.ColumnGroupScope || data.ColumnGroupScope === 'Both'
+    return (_jsxs(Flex, { flexWrap: "wrap", alignItems: "center", className: "twa:gap-x-4 twa:gap-y-2", children: [_jsxs(Box, { children: ["Name ", _jsx(Tag, { children: data.Name })] }), _jsxs(Box, { children: ["Target", ' ', _jsx(Tag, { children: !data.Target || data.Target === 'cell' ? 'Column Cells' : 'Column Header' })] }), _jsxs(Box, { children: ["Column Groups", ' ', _jsx(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 {};

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

@@ -1,9 +1,11 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { convertAdaptableStyleToCSS } from '../../../Utilities/Helpers/StyleHelper';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { StyleComponent } from '../../Components/StyleComponent';
 import { useOnePageAdaptableWizardContext } from '../../Wizard/OnePageAdaptableWizard';
 import UIHelper from '../../UIHelper';
+import StringExtensions from '../../../Utilities/Extensions/StringExtensions';
 import { Box } from '../../../components/Flex';
+import { Tag } from '../../../components/Tag';
+import { getFormatColumnStylePreviewText } from './FormatColumnPreview';
 export const isFormatColumnStyleValid = (data, api) => {
     if (data.Style &&
         UIHelper.IsEmptyStyle(data.Style) &&
@@ -13,25 +15,72 @@ export const isFormatColumnStyleValid = (data, api) => {
     }
     return true;
 };
-const toStyle = (data) => {
-    return {
-        ...convertAdaptableStyleToCSS(data.Style ?? {}),
-        borderWidth: data.Style?.BorderColor ? 2 : 0,
-        borderStyle: 'solid',
-        // ToDO abcdefg
-        textAlign: data.Style?.Alignment ? data.Style.Alignment.toLowerCase() : undefined,
-    };
+const getFormatColumnStyleSummaryItems = (formatColumn) => {
+    const style = formatColumn.Style;
+    if (!style) {
+        return [];
+    }
+    if (StringExtensions.IsNotNullOrEmpty(style.ClassName)) {
+        return [{ label: 'Class Name', value: style.ClassName }];
+    }
+    const items = [];
+    if (style.BackColor) {
+        items.push({ label: 'Back Colour', value: style.BackColor });
+    }
+    if (style.ForeColor) {
+        items.push({ label: 'Fore Colour', value: style.ForeColor });
+    }
+    if (style.BorderColor) {
+        items.push({ label: 'Border Colour', value: style.BorderColor });
+    }
+    if (style.BorderRadius != null) {
+        items.push({ label: 'Border Radius', value: String(style.BorderRadius) });
+    }
+    if (style.FontWeight === 'Bold') {
+        items.push({ label: 'Font Weight', value: 'Bold' });
+    }
+    if (style.FontStyle === 'Italic') {
+        items.push({ label: 'Font Style', value: 'Italic' });
+    }
+    if (style.TextDecoration && style.TextDecoration !== 'None') {
+        items.push({ label: 'Text Decoration', value: style.TextDecoration });
+    }
+    if (style.FontSize) {
+        items.push({ label: 'Font Size', value: style.FontSize });
+    }
+    if (style.Alignment && style.Alignment !== 'Default') {
+        items.push({ label: 'Alignment', value: style.Alignment });
+    }
+    return items;
+};
+export const hasFormatColumnStyle = (formatColumn) => {
+    if (formatColumn.Style == null || UIHelper.IsEmptyStyle(formatColumn.Style)) {
+        return false;
+    }
+    return getFormatColumnStyleSummaryItems(formatColumn).length > 0;
+};
+export const getFormatColumnStyleViewValues = (formatColumn) => {
+    return getFormatColumnStyleSummaryItems(formatColumn).map(({ label, value }) => `${label}: ${value}`);
 };
 export const renderFormatColumnStyleWizardSummary = (data) => {
     const { api } = useOnePageAdaptableWizardContext();
     return renderFormatColumnStyleSummary(data, api);
 };
-export const renderFormatColumnStyleSummary = (data, api) => {
-    return (_jsx(Box, { className: "ab-FormatPreview twa:p-2", style: toStyle(data), children: "Preview result" }));
+export const renderFormatColumnStyleSummary = (data, _api) => {
+    const hasStyle = data.Style != null && UIHelper.IsNotEmptyStyle(data.Style);
+    if (!hasStyle) {
+        return _jsx(Tag, { children: "No Style" });
+    }
+    const items = getFormatColumnStyleSummaryItems(data);
+    if (!items.length) {
+        return _jsx(Tag, { children: "No Style" });
+    }
+    return (_jsx(Box, { className: "twa:grid twa:grid-cols-2 twa:gap-2", children: items.map(({ label, value }) => (_jsxs(Box, { children: [label, " ", _jsx(Tag, { children: value })] }, label))) }));
 };
 export function FormatColumnStyleWizardSection(props) {
     const { data, api } = useOnePageAdaptableWizardContext();
-    return (_jsx(StyleComponent, { headless: true, api: api, Style: data.Style ?? {}, UpdateStyle: (Style) => {
+    const previewText = getFormatColumnStylePreviewText(data, api);
+    return (_jsx(StyleComponent, { headless: true, api: api, previewText: previewText, Style: data.Style ?? {}, UpdateStyle: (Style) => {
             props.onChange({ ...data, Style });
         } }));
 }

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

@@ -1,4 +1,4 @@
-import { jsx as _jsx } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import * as React from 'react';
 import { useState } from 'react';
 import { OnePageAdaptableWizard, OnePageWizardSummary } from '../../Wizard/OnePageAdaptableWizard';
@@ -15,11 +15,12 @@ import { useDispatch } from 'react-redux';
 import * as FormatColumnRedux from '../../../Redux/ActionsReducers/FormatColumnRedux';
 import { ObjectTagsWizardSection, renderObjectTagsSummary, } from '../../Wizard/ObjectTagsWizardSection';
 import { isAdaptableRuleValid } from '../../Components/EntityRulesEditor/Utilities';
-import { FormatColumnRuleWizardSection } from './FormatColumnRuleWizardSection';
+import { FormatColumnRuleWizardSection, renderFormatColumnConditionWizardSummary } from './FormatColumnRuleWizardSection';
 import { DEFAULT_PREDICATE_ID_FOR_FORMAT_COLUMN } from './constants';
 import { isObjectEmpty } from '../../../Utilities/Extensions/ObjectExtensions';
 import { isAdaptableNumericFormatPreset, } from '../../../AdaptableState/Common/AdaptableFormatPresets';
 import { Box, Flex } from '../../../components/Flex';
+import { FormatColumnPreviewSummaryCard } from './FormatColumnPreview';
 const adjustDisplayFormat = (fc, api) => {
     const formatColumn = { ...fc };
     let formatDataType = getFormatDisplayTypeForScope(formatColumn.Scope, api);
@@ -153,6 +154,7 @@ export function FormatColumnWizard(props) {
                 },
                 title: 'Condition',
                 details: 'Build a Rule when the Format Column should be applied',
+                renderSummary: renderFormatColumnConditionWizardSummary,
                 render: () => {
                     return (_jsx(FormatColumnRuleWizardSection, { onChange: setFormatColumn, defaultPredicateId: DEFAULT_PREDICATE_ID_FOR_FORMAT_COLUMN }));
                 },
@@ -185,7 +187,7 @@ export function FormatColumnWizard(props) {
             {
                 details: 'Review the Format Column',
                 render: () => {
-                    return (_jsx(Box, { className: "twa:p-2", children: _jsx(OnePageWizardSummary, {}) }));
+                    return (_jsxs(Box, { className: "twa:p-2 twa:flex twa:flex-col twa:gap-3", children: [_jsx(OnePageWizardSummary, {}), _jsx(FormatColumnPreviewSummaryCard, {})] }));
                 },
                 title: 'Summary',
             },

package/src/View/FreeTextColumn/Utilities/getFreeTextColumnSettingsTags.d.ts

@@ -0,0 +1,2 @@
+import { FreeTextColumnSettings } from '../../../AdaptableState/FreeTextColumnState';
+export declare const getFreeTextColumnSettingsTags: (settings: FreeTextColumnSettings) => string[];

package/src/View/FreeTextColumn/Utilities/getFreeTextColumnSettingsTags.js

@@ -0,0 +1,15 @@
+export const getFreeTextColumnSettingsTags = (settings) => {
+    const { DataType, Width, Filterable, Resizable, Groupable, Sortable, Pivotable, Aggregatable } = settings ?? {};
+    const colTypes = settings?.ColumnTypes ? settings.ColumnTypes.join(', ') : '';
+    return [
+        DataType ? `DataType: ${DataType}` : null,
+        Width ? `Width: ${Width}px` : null,
+        Pivotable ? 'Pivotable' : null,
+        Filterable ? 'Filterable' : null,
+        Resizable ? 'Resizable' : null,
+        Groupable ? 'Groupable' : null,
+        Sortable ? 'Sortable' : null,
+        Aggregatable ? 'Aggregatable' : null,
+        colTypes ? `Column Types: ${colTypes}` : null,
+    ].filter(Boolean);
+};

package/src/View/FreeTextColumn/Wizard/FreeTextColumnDefinitionWizardSection.d.ts

@@ -0,0 +1,10 @@
+import * as React from 'react';
+import { FreeTextColumn } from '../../../AdaptableState/FreeTextColumnState';
+import { AdaptableApi } from '../../../Api/AdaptableApi';
+export type FreeTextColumnDefinitionWizardSectionProps = {
+    onChange: (data: FreeTextColumn) => void;
+    isEdit: boolean;
+};
+export declare const renderFreeTextColumnDefinitionSummary: (data: FreeTextColumn) => React.JSX.Element;
+export declare const isValidFreeTextColumnDefinition: (data: FreeTextColumn, api: AdaptableApi) => true | string;
+export declare const FreeTextColumnDefinitionWizardSection: (props: FreeTextColumnDefinitionWizardSectionProps) => React.JSX.Element;