@adaptabletools/adaptable 23.1.0 → 24.0.0-canary.0

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

@@ -8,7 +8,6 @@ import SimpleButton from '../../../components/SimpleButton';
 import { isAdaptableNumericFormatPreset, resolveDisplayFormat, } from '../../../AdaptableState/Common/AdaptableFormatPresets';
 import { CheckBox } from '../../../components/CheckBox';
 import FormLayout, { FormRow } from '../../../components/FormLayout';
-import { AdaptableObjectRow } from '../../Components/AdaptableObjectRow';
 import Radio from '../../../components/Radio';
 import { useOnePageAdaptableWizardContext } from '../../Wizard/OnePageAdaptableWizard';
 import StringExtensions from '../../../Utilities/Extensions/StringExtensions';
@@ -271,6 +270,26 @@ 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 FORMAT_EXAMPLE_ROW_HEIGHT = 32;
+const FORMAT_EXAMPLE_HEADER_HEIGHT = 40;
+const FormatExamplesTable = ({ rawHeader, formattedHeader, rows }) => {
+    const columns = React.useMemo(() => ({
+        raw: {
+            field: 'raw',
+            header: rawHeader,
+            defaultFlex: 1,
+            renderMenuIcon: false,
+        },
+        formatted: {
+            field: 'formatted',
+            header: formattedHeader,
+            defaultFlex: 1,
+            renderMenuIcon: false,
+        },
+    }), [rawHeader, formattedHeader]);
+    const tableHeight = FORMAT_EXAMPLE_HEADER_HEIGHT + rows.length * FORMAT_EXAMPLE_ROW_HEIGHT;
+    return (_jsx(DataSource, { data: rows, primaryKey: "id", children: _jsx(InfiniteTableGrid, { sortable: false, domProps: { style: { height: tableHeight, width: '100%' } }, columns: columns }) }));
+};
 const DateFormatPresetsTable = ({ onApplyPattern }) => {
     const rows = React.useMemo(() => DateFormatPresets.map((pattern) => ({
         pattern,
@@ -360,34 +379,28 @@ const renderNumberFormat = (data, onChange, setFormatOption, scopedCustomFormatt
                                                     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: [
-                                    { Content: DEFAULT_DOUBLE_DISPLAY_VALUE, Size: 1 },
-                                    {
-                                        Content: FormatHelper.NumberFormatter(DEFAULT_DOUBLE_DISPLAY_VALUE, resolved.Options),
-                                        Size: 1,
-                                    },
-                                ] }), _jsx(AdaptableObjectRow, { colItems: [
-                                    { Content: '-' + DEFAULT_DOUBLE_DISPLAY_VALUE, Size: 1 },
-                                    {
-                                        Content: FormatHelper.NumberFormatter(-DEFAULT_DOUBLE_DISPLAY_VALUE, resolved.Options),
-                                        Size: 1,
-                                    },
-                                ] }), _jsx(AdaptableObjectRow, { colItems: [
-                                    { Content: '0.123', Size: 1 },
-                                    {
-                                        Content: FormatHelper.NumberFormatter(0.123, resolved.Options),
-                                        Size: 1,
-                                    },
-                                ] }), _jsx(AdaptableObjectRow, { colItems: [
-                                    { Content: '0', Size: 1 },
-                                    {
-                                        Content: FormatHelper.NumberFormatter(0, resolved.Options),
-                                        Size: 1,
-                                    },
-                                ] })] })] })] }));
+                                                } }) })] }), _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" })] }), _jsx(Card.Body, { children: _jsx(FormatExamplesTable, { rawHeader: "Raw Number", formattedHeader: "Formatted Number", rows: [
+                                {
+                                    id: 'positive',
+                                    raw: String(DEFAULT_DOUBLE_DISPLAY_VALUE),
+                                    formatted: FormatHelper.NumberFormatter(DEFAULT_DOUBLE_DISPLAY_VALUE, resolved.Options),
+                                },
+                                {
+                                    id: 'negative',
+                                    raw: '-' + DEFAULT_DOUBLE_DISPLAY_VALUE,
+                                    formatted: FormatHelper.NumberFormatter(-DEFAULT_DOUBLE_DISPLAY_VALUE, resolved.Options),
+                                },
+                                {
+                                    id: 'fraction',
+                                    raw: '0.123',
+                                    formatted: FormatHelper.NumberFormatter(0.123, resolved.Options),
+                                },
+                                {
+                                    id: 'zero',
+                                    raw: '0',
+                                    formatted: FormatHelper.NumberFormatter(0, resolved.Options),
+                                },
+                            ] }) })] })] }));
 };
 const renderStringFormat = (data, _onChange, setFormatOption, scopedCustomFormatters, api) => {
     const resolved = resolveDisplayFormat(data.DisplayFormat);
@@ -395,18 +408,15 @@ const renderStringFormat = (data, _onChange, setFormatOption, scopedCustomFormat
         return null;
     }
     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: "Format" }), _jsx(Box, { className: "twa:text-xs twa:opacity-70 twa:font-normal twa:max-w-[520px]", children: "Customise the string format with case, trim, prefix / suffix and dynamic content" })] }), _jsxs(Card.Body, { className: "twa:grid twa:p-2 twa:grid-cols-[1fr_1fr] twa:gap-2", children: [_jsxs(Flex, { flexDirection: "row", className: "twa:gap-2 twa:col-span-2 twa:items-center", children: [_jsx("label", { children: "Case:" }), _jsxs(ToggleGroup, { children: [_jsx(Toggle, { pressed: resolved.Options.Case === 'Upper', onPressedChange: (pressed) => setFormatOption('Case', pressed ? 'Upper' : undefined), icon: "case-upper" }), _jsx(Toggle, { pressed: resolved.Options.Case === 'Lower', onPressedChange: (pressed) => setFormatOption('Case', pressed ? 'Lower' : undefined), icon: "case-lower" }), _jsx(Toggle, { pressed: resolved.Options.Case === 'Sentence', onPressedChange: (pressed) => setFormatOption('Case', pressed ? 'Sentence' : undefined), icon: "case-sentence" })] }), _jsx(CheckBox, { "data-name": "trim-checkbox", className: "twa:ml-5", checked: resolved.Options.Trim, onChange: (checked) => setFormatOption('Trim', checked), children: "Trim" })] }), _jsxs(Flex, { flexDirection: "column", className: "twa:gap-2", children: [_jsx("label", { children: "Prefix" }), _jsx(Input, { "data-name": "prefix", value: resolved.Options.Prefix ?? '', onChange: (e) => setFormatOption('Prefix', e.currentTarget.value) })] }), _jsxs(Flex, { flexDirection: "column", className: "twa:gap-2", children: [_jsx("label", { children: "Suffix" }), _jsx(Input, { "data-name": "suffix", value: resolved.Options.Suffix ?? '', onChange: (e) => setFormatOption('Suffix', e.currentTarget.value) })] }), _jsxs(Flex, { flexDirection: "column", className: "twa:col-span-2 twa:gap-2", children: [_jsx("label", { children: "Content" }), _jsx(Textarea, { className: "twa:min-w-[300px]", rows: 3, placeholder: "", type: 'text', autoFocus: false, value: resolved.Options.Content ?? '', 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') }), "See how to create dynamic Display Format using placeholders"] }))] }), _jsx(CheckBox, { className: "twa:col-span-2", "data-name": "empty-checkbox", checked: resolved.Options.Empty, onChange: (checked) => setFormatOption('Empty', checked), children: "Empty" })] })] }), 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: "column", children: _jsx(FormLayout, { className: "twa:mr-3", children: scopedCustomFormatters.map((formatter) => renderCustomFormatter(data, formatter, setFormatOption)) }) }) })] })), _jsxs(Card, { shadow: false, children: [_jsxs(Card.Title, { children: [_jsx(Box, { className: "twa:font-medium", children: "Example" }), _jsx(Box, { className: "twa:text-xs twa:opacity-70 twa:font-normal twa:max-w-[520px]", children: "Preview the formatter against a sample value" })] }), _jsxs(Card.Body, { children: [_jsx(AdaptableObjectRow, { className: "twa:font-bold", colItems: [
-                                    { Content: 'Raw String', Size: 1 },
-                                    { Content: 'Formatted String', Size: 1 },
-                                ] }), _jsx(AdaptableObjectRow, { colItems: [
-                                    { Content: '"' + DEFAULT_STRING_DISPLAY_VALUE + '"', Size: 1 },
-                                    {
-                                        Content: '"' +
-                                            FormatHelper.StringFormatter(DEFAULT_STRING_DISPLAY_VALUE, resolved.Options) +
-                                            '"',
-                                        Size: 1,
-                                    },
-                                ] })] })] })] }));
+    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: "Format" }), _jsx(Box, { className: "twa:text-xs twa:opacity-70 twa:font-normal twa:max-w-[520px]", children: "Customise the string format with case, trim, prefix / suffix and dynamic content" })] }), _jsxs(Card.Body, { className: "twa:grid twa:p-2 twa:grid-cols-[1fr_1fr] twa:gap-2", children: [_jsxs(Flex, { flexDirection: "row", className: "twa:gap-2 twa:col-span-2 twa:items-center", children: [_jsx("label", { children: "Case:" }), _jsxs(ToggleGroup, { children: [_jsx(Toggle, { pressed: resolved.Options.Case === 'Upper', onPressedChange: (pressed) => setFormatOption('Case', pressed ? 'Upper' : undefined), icon: "case-upper" }), _jsx(Toggle, { pressed: resolved.Options.Case === 'Lower', onPressedChange: (pressed) => setFormatOption('Case', pressed ? 'Lower' : undefined), icon: "case-lower" }), _jsx(Toggle, { pressed: resolved.Options.Case === 'Sentence', onPressedChange: (pressed) => setFormatOption('Case', pressed ? 'Sentence' : undefined), icon: "case-sentence" })] }), _jsx(CheckBox, { "data-name": "trim-checkbox", className: "twa:ml-5", checked: resolved.Options.Trim, onChange: (checked) => setFormatOption('Trim', checked), children: "Trim" })] }), _jsxs(Flex, { flexDirection: "column", className: "twa:gap-2", children: [_jsx("label", { children: "Prefix" }), _jsx(Input, { "data-name": "prefix", value: resolved.Options.Prefix ?? '', onChange: (e) => setFormatOption('Prefix', e.currentTarget.value) })] }), _jsxs(Flex, { flexDirection: "column", className: "twa:gap-2", children: [_jsx("label", { children: "Suffix" }), _jsx(Input, { "data-name": "suffix", value: resolved.Options.Suffix ?? '', onChange: (e) => setFormatOption('Suffix', e.currentTarget.value) })] }), _jsxs(Flex, { flexDirection: "column", className: "twa:col-span-2 twa:gap-2", children: [_jsx("label", { children: "Content" }), _jsx(Textarea, { className: "twa:min-w-[300px]", rows: 3, placeholder: "", type: 'text', autoFocus: false, value: resolved.Options.Content ?? '', 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') }), "See how to create dynamic Display Format using placeholders"] }))] }), _jsx(CheckBox, { className: "twa:col-span-2", "data-name": "empty-checkbox", checked: resolved.Options.Empty, onChange: (checked) => setFormatOption('Empty', checked), children: "Empty" })] })] }), 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: "column", children: _jsx(FormLayout, { className: "twa:mr-3", children: scopedCustomFormatters.map((formatter) => renderCustomFormatter(data, formatter, setFormatOption)) }) }) })] })), _jsxs(Card, { shadow: false, children: [_jsxs(Card.Title, { children: [_jsx(Box, { className: "twa:font-medium", children: "Example" }), _jsx(Box, { className: "twa:text-xs twa:opacity-70 twa:font-normal twa:max-w-[520px]", children: "Preview the formatter against a sample value" })] }), _jsx(Card.Body, { children: _jsx(FormatExamplesTable, { rawHeader: "Raw String", formattedHeader: "Formatted String", rows: [
+                                {
+                                    id: 'sample',
+                                    raw: '"' + DEFAULT_STRING_DISPLAY_VALUE + '"',
+                                    formatted: '"' +
+                                        FormatHelper.StringFormatter(DEFAULT_STRING_DISPLAY_VALUE, resolved.Options) +
+                                        '"',
+                                },
+                            ] }) })] })] }));
 };
 export const FormatColumnFormatWizardSection = (props) => {
     const { data } = useOnePageAdaptableWizardContext();

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

@@ -3,9 +3,14 @@ import { FormatColumn } from '../../../../types';
 import { AdaptableApi } from '../../../Api/AdaptableApi';
 type FormatColumnRuleWizardSectionProps = {
     onChange: (data: FormatColumn) => void;
-    defaultPredicateId: string;
 };
+/**
+ * Authoring lens while a Condition is open. Not persisted — derived from `Rule`
+ * text when present (observable brace call → observable; else standard).
+ */
+export type FormatColumnConditionEditorKind = 'standard' | 'observable';
 export declare const hasFormatColumnCondition: (formatColumn: FormatColumn) => boolean;
-export declare const renderFormatColumnConditionSummary: (formatColumn: FormatColumn, api: AdaptableApi) => React.JSX.Element;
+export declare const inferFormatColumnConditionEditorKind: (rule: string) => FormatColumnConditionEditorKind;
+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

@@ -1,42 +1,106 @@
-import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
-import { useOnePageAdaptableWizardContext } from '../../Wizard/OnePageAdaptableWizard';
-import { EntityRulesEditor } from '../../Components/EntityRulesEditor';
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useMemo, useState } from 'react';
+import { SummaryText, useOnePageAdaptableWizardContext, } from '../../Wizard/OnePageAdaptableWizard';
+import { EntityRulesEditor, EntityRulesSummary } from '../../Components/EntityRulesEditor';
 import HelpBlock from '../../../components/HelpBlock';
-import { Box } from '../../../components/Flex';
-import { Tag } from '../../../components/Tag';
+import { ExpressionTag, Tag } from '../../../components/Tag';
+import { Box, Flex } from '../../../components/Flex';
+import { ExpressionEditor, ExpressionUseCaseCard, } from '../../../components/aql/ExpressionEditor';
+import { expressionContainsObservableCall } from '../../../AdaptableState/CalculatedColumnState';
+import { WizardTypeSelectionCard, WizardTypeSelectionPreviewFrame, WizardTypeSelectionSection, } from '../../Wizard/WizardTypeSelection';
+const CONDITION_OPTIONS = [
+    {
+        kind: 'none',
+        label: 'No Condition',
+        description: 'The Format Column is always applied to cells in Scope',
+    },
+    {
+        kind: 'standard',
+        label: 'Standard Condition',
+        description: 'Apply the Format Column when a boolean Expression over cell values is true',
+        expressionExample: '[price] > 100',
+    },
+    {
+        kind: 'observable',
+        label: 'Observable Condition',
+        description: 'Apply the Format Column from how a value has changed over time — counts, moves, highs and lows, row age',
+        expressionExample: 'CHANGE_COUNT{[price], WITHIN(3s)} = 0',
+    },
+];
 export const hasFormatColumnCondition = (formatColumn) => {
-    const rule = formatColumn.Rule;
-    if (!rule) {
-        return false;
+    return Boolean(formatColumn.Rule?.trim());
+};
+export const inferFormatColumnConditionEditorKind = (rule) => expressionContainsObservableCall(rule) ? 'observable' : 'standard';
+const conditionSummaryLabel = (formatColumn) => {
+    if (formatColumn.Rule == null) {
+        return 'Always Apply';
     }
-    return Boolean(rule.Predicates?.length ||
-        rule.BooleanExpression ||
-        ('ObservableExpression' in rule && rule.ObservableExpression) ||
-        ('AggregatedBooleanExpression' in rule && rule.AggregatedBooleanExpression));
+    return inferFormatColumnConditionEditorKind(formatColumn.Rule) === 'observable'
+        ? 'Observable Condition'
+        : 'Standard Condition';
 };
-export const renderFormatColumnConditionSummary = (formatColumn, api) => {
+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' });
+    const hasCondition = formatColumn.Rule != null;
+    return (_jsxs(_Fragment, { children: [_jsxs(SummaryText, { children: ["Condition ", _jsx(Tag, { children: conditionSummaryLabel(formatColumn) })] }), hasCondition && formatColumn.Rule?.trim() ? (_jsx(EntityRulesSummary, { data: formatColumn, renderQueryExpression: (contents) => (_jsxs(_Fragment, { children: ["Apply Format Column when ", _jsx(ExpressionTag, { children: contents })] })) })) : null] }));
+};
+const deleteConditionAction = (onDelete) => ({
+    label: 'Delete Condition',
+    onClick: onDelete,
+    icon: 'delete',
+    tone: 'neutral',
+    variant: 'raised',
+    'data-name': 'format-column-delete-condition',
+});
+const StandardConditionEditor = (props) => {
+    const { moduleInfo } = useOnePageAdaptableWizardContext();
+    const formatColumnWithRule = {
+        ...props.data,
+        Rule: props.data.Rule ?? '',
+    };
+    return (_jsx(ExpressionUseCaseCard, { title: "Standard Condition", description: _jsx(_Fragment, { children: "The Format Column is only applied when the row matches this Expression. It must resolve to a boolean (true / false) value." }), examplesKind: "boolean", children: _jsx(EntityRulesEditor, { module: moduleInfo.ModuleName, flexProps: { style: { minHeight: 0, height: '100%' } }, showAggregation: false, showQueryBuilder: true, data: formatColumnWithRule, onChange: (formatColumn) => props.onChange(formatColumn), secondaryAction: deleteConditionAction(props.onDelete), suppressTypeInfoCard: true, suppressObservable: true, examplesKind: "boolean" }) }));
+};
+const ObservableConditionEditor = (props) => {
+    const { api, moduleInfo } = useOnePageAdaptableWizardContext();
+    const initialData = useMemo(() => api.internalApi.getQueryPreviewData(), []);
+    return (_jsx(ExpressionUseCaseCard, { title: "Observable Condition", description: _jsx(_Fragment, { children: "Build a boolean (true / false) Expression over change history or time. The Format Column applies while the Expression is true and re-evaluates as time windows expire." }), examplesKind: "observable", children: _jsx(ExpressionEditor, { type: "scalar", scalarVariant: "observable", module: moduleInfo.ModuleName, className: "twa:pl-0", value: props.data.Rule ?? '', onChange: (expression) => {
+                props.onChange({
+                    ...props.data,
+                    Rule: expression,
+                });
+            }, initialData: initialData, columns: api.columnApi.internalApi.getQueryableColumnsForUIEditor(), fields: api.expressionApi.internalApi.getAvailableFields(), namedQueries: api.namedQueryApi.getNamedQueries(), api: api, showQueryBuilder: false, columnScope: props.data.Scope, secondaryAction: deleteConditionAction(props.onDelete), suppressTypeInfoCard: true, examplesKind: "observable" }) }));
 };
 export function FormatColumnRuleWizardSection(props) {
-    const { data, api, moduleInfo } = useOnePageAdaptableWizardContext();
+    const { data } = useOnePageAdaptableWizardContext();
+    const hasCondition = data.Rule != null;
+    const [editorKind, setEditorKind] = useState(() => data.Rule != null ? inferFormatColumnConditionEditorKind(data.Rule) : 'standard');
     if (data.Target && data.Target === 'columnHeader') {
         return (_jsx(HelpBlock, { className: "twa:mt-3", children: "Conditions cannot be applied if the Target of the Format Column is Column Header" }));
     }
-    return (_jsx(EntityRulesEditor, { module: moduleInfo.ModuleName, defaultPredicateId: props.defaultPredicateId, predicateDefs: api.formatColumnApi.internalApi.getFormatColumnDefsForScope(data.Scope), getPredicateDefsForColId: (colId) => api.formatColumnApi.internalApi.getFormatColumnDefsForScope({ ColumnIds: [colId] }), showNoRule: true, showBoolean: true, showAggregation: false, showObservable: false, showQueryBuilder: true, showPredicate: !api.columnScopeApi.scopeIsAll(data.Scope), data: data, onChange: (formatColumn) => props.onChange(formatColumn), descriptions: {
-            selectPredicate: 'Create a Format Column Rule - to be applied when data changes',
-            useBooleanQuery: (_jsxs(_Fragment, { children: ["Use an BooleanQuery if ", _jsx("i", { children: "Scope" }), " is 'All Columns' - so any data change may be evaluated in a complex BooleanExpression"] })),
-            useObservableQuery: (_jsxs(_Fragment, { children: ["Use an ObservableQuery if ", _jsx("i", { children: "Scope" }), " is 'All Columns' - so any data change may be evaluated in a complex ObservableExpression"] })),
-            useAggregationQuery: (_jsxs(_Fragment, { children: ["Use an AggregatedBooleanQuery if ", _jsx("i", { children: "Scope" }), " is 'All Columns' - so any data change may be evaluated in a complex AggregatedBooleanExpression"] })),
-        } }));
+    const deleteCondition = () => {
+        const next = { ...data };
+        delete next.Rule;
+        props.onChange(next);
+    };
+    const openCondition = (kind) => {
+        setEditorKind(kind);
+        props.onChange({
+            ...data,
+            Rule: data.Rule ?? '',
+        });
+    };
+    const activeEditorKind = data.Rule != null && expressionContainsObservableCall(data.Rule)
+        ? 'observable'
+        : editorKind;
+    if (!hasCondition) {
+        return (_jsx(Flex, { flexDirection: "column", className: "twa:h-full twa:min-h-0 twa:p-2", children: _jsx(WizardTypeSelectionSection, { headingId: "format-column-condition-heading", title: "Condition", dataName: "format-column-condition-grid", columns: 3, intro: _jsx(_Fragment, { children: "The Format Column is always applied. Click a card to keep that, or add a Standard or Observable Condition" }), children: CONDITION_OPTIONS.map((option) => (_jsx(WizardTypeSelectionCard, { label: option.label, description: option.description, selected: option.kind === 'none', dataName: `format-column-condition-${option.kind}`, minHeightClassName: "twa:min-h-[148px]", onSelect: () => {
+                        if (option.kind === 'none') {
+                            return;
+                        }
+                        openCondition(option.kind);
+                    }, footer: option.expressionExample ? (_jsx(WizardTypeSelectionPreviewFrame, { children: _jsx(Box, { as: "code", className: "ab-CodeBlock twa:block twa:w-full twa:truncate twa:bg-transparent twa:p-0 twa:font-mono twa:text-2 twa:leading-snug twa:text-foreground twa:opacity-90", children: option.expressionExample }) })) : undefined }, option.kind))) }) }));
+    }
+    return (_jsx(Box, { className: "twa:h-full twa:min-h-0 twa:overflow-hidden", children: activeEditorKind === 'observable' ? (_jsx(ObservableConditionEditor, { data: data, onChange: props.onChange, onDelete: deleteCondition })) : (_jsx(StandardConditionEditor, { data: data, onChange: props.onChange, onDelete: deleteCondition })) }));
 }

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

@@ -2,12 +2,11 @@ import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-run
 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 { CheckBox } from '../../../components/CheckBox';
-import { ColumnTag, Tag } from '../../../components/Tag';
-import { CollapsibleWizardCard, CollapsibleWizardValueSummary, getWizardAccordionSectionClassName, renderCompactColumnTags, useWizardCardAccordion, } from '../../Wizard/CollapsibleWizardCard';
+import { AccentTag, Tag } from '../../../components/Tag';
+import { getScopeDataTypeLabel } from '../../../components/Tag/columnScopeTagHelpers';
+import { CollapsibleWizardCard, CollapsibleWizardValueSummary, getWizardAccordionSectionClassName, renderCompactAccentTags, useWizardCardAccordion, } from '../../Wizard/CollapsibleWizardCard';
 import { cn } from '../../../lib/utils';
 const FORMAT_COLUMN_ROW_KINDS = ['Data', 'Group', 'Summary', 'Total'];
 const ROW_KIND_LABELS = {
@@ -48,7 +47,7 @@ const FormatColumnScopeSummaryContent = ({ data, }) => {
     const showRows = data.Target === 'cell';
     const includedKinds = collectIncludedRowKinds(data);
     const allKinds = includedKinds.length === 4;
-    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(ColumnTag, { 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))))] }))] }));
+    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(AccentTag, { 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: getScopeDataTypeLabel(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 });
@@ -62,10 +61,10 @@ const FormatColumnColumnsScopeSummary = ({ data, }) => {
         return _jsx(CollapsibleWizardValueSummary, { value: _jsx(Tag, { children: "All columns in the row" }) });
     }
     if ('ColumnIds' in scope) {
-        return (_jsx(CollapsibleWizardValueSummary, { value: columnsInScope.length ? (_jsx(Flex, { flexWrap: "wrap", className: "twa:gap-1", children: columnsInScope.map((column) => (_jsx(ColumnTag, { children: column.friendlyName }, column.columnId))) })) : (_jsx(Tag, { children: "None" })) }));
+        return (_jsx(CollapsibleWizardValueSummary, { value: columnsInScope.length ? (_jsx(Flex, { flexWrap: "wrap", className: "twa:gap-1", children: columnsInScope.map((column) => (_jsx(AccentTag, { children: column.friendlyName }, column.columnId))) })) : (_jsx(Tag, { children: "None" })) }));
     }
     if ('DataTypes' in scope) {
-        return (_jsx(CollapsibleWizardValueSummary, { value: scope.DataTypes.length ? (_jsx(Flex, { flexWrap: "wrap", className: "twa:gap-1", children: scope.DataTypes.map((dataType) => (_jsx(Tag, { children: getColumnTypeFriendlyName(dataType) }, dataType))) })) : (_jsx(Tag, { children: "None" })) }));
+        return (_jsx(CollapsibleWizardValueSummary, { value: scope.DataTypes.length ? (_jsx(Flex, { flexWrap: "wrap", className: "twa:gap-1", children: scope.DataTypes.map((dataType) => (_jsx(Tag, { children: getScopeDataTypeLabel(dataType) }, dataType))) })) : (_jsx(Tag, { children: "None" })) }));
     }
     return null;
 };
@@ -76,29 +75,11 @@ const FormatColumnRowsScopeSummary = ({ data, }) => {
 };
 const FormatColumnRowScopePanel = ({ data, onRowKindChange, }) => (_jsx(Flex, { flexDirection: "column", className: "twa:items-start twa:px-1 twa:py-1", style: { rowGap: 'calc(var(--ab-base-space) * 2)' }, children: FORMAT_COLUMN_ROW_KINDS.map((kind) => (_jsx(CheckBox, { "data-name": `include-${kind.toLowerCase()}-rows-checkbox`, checked: isRowKindIncluded(data, kind), onChange: (checked) => onRowKindChange(kind, checked), children: ROW_KIND_LABELS[kind] }, kind))) }));
 export const FormatColumnScopeWizardSection = (props) => {
-    const { data, api } = useOnePageAdaptableWizardContext();
+    const { data } = useOnePageAdaptableWizardContext();
     const adaptable = useAdaptable();
     const scopeApi = adaptable.api.columnScopeApi;
     const handleScopeChange = (Scope) => {
         const newData = { ...data, Scope };
-        const wholeRow = api.columnScopeApi.scopeIsAll(Scope);
-        if (newData.Rule?.Predicates?.length) {
-            if (wholeRow) {
-                delete newData.Rule.Predicates;
-                newData.Rule.BooleanExpression = '';
-            }
-            else {
-                const validPredicateIds = new Set(api.formatColumnApi.internalApi.getFormatColumnDefsForScope(Scope).map((def) => def.id));
-                newData.Rule = {
-                    Predicates: newData.Rule.Predicates.filter((p) => validPredicateIds.has(p.PredicateId)).filter((predicate) => {
-                        if (isScopeColumnIds(Scope) && Scope.ColumnIds.length > 1) {
-                            return predicate.PredicateId !== 'In' && predicate.PredicateId !== 'NotIn';
-                        }
-                        return true;
-                    }),
-                };
-            }
-        }
         props.onChange(newData);
     };
     const handleRowKindChange = (kind, include) => {
@@ -117,7 +98,7 @@ export const FormatColumnScopeWizardSection = (props) => {
     const allRowKindsIncluded = includedRowKinds.length === 4;
     const initialExpandedCardId = columnsScopeConfigured ? null : 'columns';
     const { bindCard, hasExpandedCard, expandedFillsSpace } = useWizardCardAccordion(initialExpandedCardId, { fillExpandedCard: true });
-    const columnsCompactSummary = scopeApi.scopeIsAll(scope) ? (_jsx(Tag, { children: "All columns" })) : 'ColumnIds' in scope ? (renderCompactColumnTags(scope.ColumnIds, (columnId) => adaptable.api.columnApi.getFriendlyNameForColumnId(columnId), { emptyLabel: 'No columns' })) : 'DataTypes' in scope ? (_jsx(Flex, { alignItems: "center", className: "twa:gap-1 twa:min-w-0 twa:overflow-hidden", children: scope.DataTypes.length ? (scope.DataTypes.map((dataType) => (_jsx(Tag, { className: "twa:shrink-0", children: getColumnTypeFriendlyName(dataType) }, dataType)))) : (_jsx(Tag, { children: "None" })) })) : null;
+    const columnsCompactSummary = scopeApi.scopeIsAll(scope) ? (_jsx(Tag, { children: "All columns" })) : 'ColumnIds' in scope ? (renderCompactAccentTags(scope.ColumnIds, (columnId) => adaptable.api.columnApi.getFriendlyNameForColumnId(columnId), { emptyLabel: 'No columns' })) : 'DataTypes' in scope ? (_jsx(Flex, { alignItems: "center", className: "twa:gap-1 twa:min-w-0 twa:overflow-hidden", children: scope.DataTypes.length ? (scope.DataTypes.map((dataType) => (_jsx(Tag, { className: "twa:shrink-0", children: getScopeDataTypeLabel(dataType) }, dataType)))) : (_jsx(Tag, { children: "None" })) })) : null;
     const rowsCompactSummary = allRowKindsIncluded ? (_jsx(Tag, { children: "All" })) : includedRowKinds.length === 0 ? (_jsx(Tag, { children: "None" })) : (_jsx(Flex, { alignItems: "center", className: "twa:gap-1 twa:min-w-0 twa:overflow-hidden", children: includedRowKinds.map((kind) => (_jsx(Tag, { className: "twa:shrink-0", children: kind }, kind))) }));
     return (_jsxs(Box, { className: cn(getWizardAccordionSectionClassName(hasExpandedCard, expandedFillsSpace), 'twa:p-2'), children: [_jsx(CollapsibleWizardCard, { ...bindCard('columns', { fillAvailable: true }), surface: "panel", "data-name": "format-column-scope-columns", title: "Columns", help: "Which Columns the Format Column will be applied to", collapsedHelp: "Columns the Format Column applies to", compactSummary: columnsCompactSummary, summary: _jsx(FormatColumnColumnsScopeSummary, { data: data }), className: "twa:overflow-hidden twa:flex twa:flex-col", bodyClassName: "twa:min-h-[200px] twa:max-h-[420px] twa:overflow-hidden twa:flex twa:flex-col twa:!pt-0 twa:!pb-0 twa:px-1", children: _jsx(Box, { className: "twa:flex-1 twa:min-h-0 twa:overflow-auto twa:h-full", children: _jsx(NewScopeComponent, { descriptions: {
                             rowScope: 'Format all Columns in the Row',

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

@@ -1,7 +1,7 @@
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import { StyleComponent } from '../../Components/StyleComponent';
 import { useOnePageAdaptableWizardContext } from '../../Wizard/OnePageAdaptableWizard';
-import UIHelper from '../../UIHelper';
+import UIHelper from '../../../Utilities/Helpers/UIHelper';
 import StringExtensions from '../../../Utilities/Extensions/StringExtensions';
 import { Box } from '../../../components/Flex';
 import { Tag } from '../../../components/Tag';

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

@@ -14,9 +14,9 @@ import ObjectFactory from '../../../Utilities/ObjectFactory';
 import { useDispatch } from 'react-redux';
 import * as FormatColumnRedux from '../../../Redux/ActionsReducers/FormatColumnRedux';
 import { ObjectTagsWizardSection, renderObjectTagsSummary, } from '../../Wizard/ObjectTagsWizardSection';
+import { isLayoutExtensionInfoWizardSectionVisible, LayoutExtensionInfoWizardSection, renderLayoutExtensionInfoSummary, useLayoutExtensionInfoState, } from '../../Wizard/LayoutExtensionInfoWizardSection';
 import { isAdaptableRuleValid } from '../../Components/EntityRulesEditor/Utilities';
 import { FormatColumnRuleWizardSection, renderFormatColumnConditionSummary, } 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 } from '../../../components/Flex';
@@ -72,6 +72,7 @@ export function FormatColumnWizard(props) {
     const { api } = useAdaptable();
     const allFormatColumns = useSelector((state) => state.FormatColumn?.FormatColumns ?? []);
     const data = props.data ?? props.popupParams?.value;
+    const layoutExtensionInfo = useLayoutExtensionInfoState('FormatColumn', data);
     const [formatColumn, doSetFormatColumn] = useState(() => {
         let formatColumn = data ? cloneObject(data) : ObjectFactory.CreateEmptyFormatColumn();
         formatColumn.Scope = formatColumn.Scope ?? {
@@ -103,6 +104,7 @@ export function FormatColumnWizard(props) {
         else {
             dispatch(FormatColumnRedux.FormatColumnAdd(formatColumn));
         }
+        layoutExtensionInfo.applyLayoutExtensionInfo(formatColumn);
         props.onFinishWizard(formatColumn);
     };
     return (_jsx(OnePageAdaptableWizard, { defaultCurrentSectionName: props.defaultCurrentSectionName, moduleInfo: props.moduleInfo, modal: props.modal, data: formatColumn, onHide: props.onCloseWizard, onFinish: handleFinish, sections: [
@@ -132,16 +134,21 @@ export function FormatColumnWizard(props) {
             },
             {
                 isValid: (abObject, api, context) => {
-                    if (!abObject.Rule) {
+                    if (abObject.Rule == undefined) {
                         return true;
                     }
+                    if (!abObject.Rule.trim()) {
+                        return 'A valid rule is required.';
+                    }
                     return isAdaptableRuleValid(abObject, api, context);
                 },
                 title: 'Condition',
-                details: 'Build a Rule when the Format Column should be applied',
+                details: formatColumn.Rule == null
+                    ? 'Choose No Condition, a Standard Condition, or an Observable Condition'
+                    : 'Edit the Condition',
                 renderSummary: renderFormatColumnConditionSummary,
                 render: () => {
-                    return (_jsx(FormatColumnRuleWizardSection, { onChange: setFormatColumn, defaultPredicateId: DEFAULT_PREDICATE_ID_FOR_FORMAT_COLUMN }));
+                    return _jsx(FormatColumnRuleWizardSection, { onChange: setFormatColumn });
                 },
             },
             {
@@ -168,6 +175,13 @@ export function FormatColumnWizard(props) {
                 render: () => (_jsx(Box, { className: "twa:p-2", children: _jsx(ObjectTagsWizardSection, { onChange: setFormatColumn }) })),
                 renderSummary: renderObjectTagsSummary,
             },
+            {
+                details: 'Select the Layouts where this Format Column is available',
+                title: 'Layouts',
+                isVisible: (_, api) => isLayoutExtensionInfoWizardSectionVisible(api),
+                render: () => (_jsx(Box, { className: "twa:p-2", children: _jsx(LayoutExtensionInfoWizardSection, { layoutNames: layoutExtensionInfo.layoutNames, onChange: layoutExtensionInfo.setLayoutNames }) })),
+                renderSummary: () => renderLayoutExtensionInfoSummary(layoutExtensionInfo.layoutNames),
+            },
             '-',
             {
                 details: 'Review the Format Column',

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

@@ -1,7 +1,9 @@
 export const getFreeTextColumnSettingsTags = (settings) => {
-    const { Width, Filterable, Resizable, Groupable, Sortable, Pivotable, Aggregatable, SuppressMenu, SuppressMovable, } = settings ?? {};
+    const { DataType, CellDataType, Width, Filterable, Resizable, Groupable, Sortable, Pivotable, Aggregatable, SuppressMenu, SuppressMovable, } = settings ?? {};
     const colTypes = settings?.ColumnTypes ? settings.ColumnTypes.join(', ') : '';
     return [
+        DataType ? `DataType: ${DataType}` : null,
+        CellDataType ? `Cell Data Type: ${CellDataType}` : null,
         Width ? `Width: ${Width}px` : null,
         Pivotable ? 'Pivotable' : null,
         Filterable ? 'Filterable' : null,

package/src/View/FreeTextColumn/Wizard/FreeTextColumnSettingsWizardSection.js

@@ -1,4 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import * as React from 'react';
 import Input from '../../../components/Input';
 import Radio, { RadioGroup } from '../../../components/Radio';
 import { useOnePageAdaptableWizardContext } from '../../Wizard/OnePageAdaptableWizard';
@@ -7,13 +8,14 @@ import { CheckBox } from '../../../components/CheckBox';
 import { DateFormatter } from '../../../Utilities/Helpers/DisplayFormatHelper';
 import { parseToISO } from '../../../Utilities/Helpers/DateHelper';
 import { Tag } from '../../../components/Tag';
-import { SpecialColumnSettingsWizardStep } from '../../SpecialColumnSettingsWizardStep';
+import { SpecialColumnSettingsWizardStep } from '../../Wizard/SpecialColumnSettingsWizardStep';
 import { Box, Flex } from '../../../components/Flex';
-import { SingleSelect } from '../../../components/NewSelect';
+import { SingleSelect } from '../../../components/Select';
 import { Card } from '../../../components/Card';
 import { getFreeTextColumnSettingsTags } from '../Utilities/getFreeTextColumnSettingsTags';
 import { SummaryText } from '../../Wizard/OnePageAdaptableWizard';
-const dataTypeOptions = [
+import { isCellDataTypeCompatibleWithDataType } from '../../../agGrid/AgGridCellDataTypeHelper';
+const DATA_TYPE_OPTIONS = [
     { value: 'number', label: 'Number' },
     { value: 'text', label: 'Text' },
     { value: 'date', label: 'Date' },
@@ -21,7 +23,7 @@ const dataTypeOptions = [
 ];
 export const renderFreeTextColumnSettingsSummary = (data) => {
     const propertyTags = getFreeTextColumnSettingsTags(data.FreeTextColumnSettings);
-    return (_jsxs(_Fragment, { children: [_jsxs(SummaryText, { children: ["Data Type: ", _jsx(Tag, { children: data.FreeTextColumnSettings.DataType || 'Not specified' })] }), data.DefaultValue !== undefined ? (_jsxs(SummaryText, { children: ["Default Value: ", _jsx(Tag, { children: String(data.DefaultValue) })] })) : null, data.TextEditor !== undefined ? (_jsxs(SummaryText, { children: ["Editor Type: ", _jsx(Tag, { children: data.TextEditor })] })) : null, propertyTags.length ? (_jsxs(SummaryText, { children: ["Properties:", ' ', propertyTags.map((tag, index) => (_jsx(Tag, { className: index > 0 ? 'twa:ml-1' : undefined, children: tag }, String(tag))))] })) : null] }));
+    return (_jsxs(_Fragment, { children: [_jsxs(SummaryText, { children: ["Data Type: ", _jsx(Tag, { children: data.FreeTextColumnSettings.DataType || 'Not specified' })] }), data.FreeTextColumnSettings.CellDataType ? (_jsxs(SummaryText, { children: ["AG Grid Cell Data Type: ", _jsx(Tag, { children: data.FreeTextColumnSettings.CellDataType })] })) : null, data.DefaultValue !== undefined ? (_jsxs(SummaryText, { children: ["Default Value: ", _jsx(Tag, { children: String(data.DefaultValue) })] })) : null, data.TextEditor !== undefined ? (_jsxs(SummaryText, { children: ["Editor Type: ", _jsx(Tag, { children: data.TextEditor })] })) : null, propertyTags.length ? (_jsxs(SummaryText, { children: ["Properties:", ' ', propertyTags.map((tag, index) => (_jsx(Tag, { className: index > 0 ? 'twa:ml-1' : undefined, children: tag }, String(tag))))] })) : null] }));
 };
 export const isValidFreeTextColumnSettings = (data) => {
     if (!data.FreeTextColumnSettings?.DataType) {
@@ -32,20 +34,40 @@ export const isValidFreeTextColumnSettings = (data) => {
 export const FreeTextColumnSettingsWizardSection = (props) => {
     const { data, api } = useOnePageAdaptableWizardContext();
     const Pattern = api.optionsApi.getUserInterfaceOptions().dateInputOptions.dateFormat;
-    const handleDataTypeChange = (DataType) => {
+    const customCellDataTypes = React.useMemo(() => api.columnApi.getAvailableCellDataTypes(), [api.columnApi]);
+    const dataType = data.FreeTextColumnSettings.DataType;
+    const cellDataType = data.FreeTextColumnSettings.CellDataType;
+    const compatibleCustomCellDataTypes = React.useMemo(() => customCellDataTypes.filter((item) => !dataType || item.adaptableDataType === dataType), [customCellDataTypes, dataType]);
+    const compatibleCellDataTypeOptions = React.useMemo(() => compatibleCustomCellDataTypes.map((item) => ({
+        value: item.cellDataType,
+        label: item.label,
+    })), [compatibleCustomCellDataTypes]);
+    const showCellDataTypeDropdown = compatibleCustomCellDataTypes.length > 0;
+    const handleDataTypeChange = (nextDataType) => {
+        const keepCellDataType = cellDataType &&
+            isCellDataTypeCompatibleWithDataType(cellDataType, nextDataType, api.agGridApi.getGridOption('dataTypeDefinitions'))
+            ? cellDataType
+            : undefined;
         const newData = {
             ...data,
             FreeTextColumnSettings: {
                 ...data.FreeTextColumnSettings,
-                DataType,
+                DataType: nextDataType,
+                CellDataType: keepCellDataType,
             },
         };
         delete newData.DefaultValue;
-        if (!DataType) {
-            delete newData.FreeTextColumnSettings?.DataType;
-        }
         props.onChange(newData);
     };
+    const handleAgGridCellDataTypeChange = (value) => {
+        props.onChange({
+            ...data,
+            FreeTextColumnSettings: {
+                ...data.FreeTextColumnSettings,
+                CellDataType: value || undefined,
+            },
+        });
+    };
     const handleDefaultValueChange = (event) => {
         let e = event.target;
         let DefaultValue = e.value;
@@ -69,7 +91,7 @@ export const FreeTextColumnSettingsWizardSection = (props) => {
         });
     };
     const { Width } = data.FreeTextColumnSettings ?? {};
-    return (_jsx(Box, { "data-name": "free-text-column-settings", children: _jsxs(Flex, { flexDirection: "column", className: "twa:gap-3 twa:p-3", children: [_jsxs(Card, { shadow: false, children: [_jsxs(Card.Title, { children: [_jsx(Box, { className: "twa:font-medium", children: "Data Type" }), _jsx(Box, { className: "twa:text-xs twa:opacity-70 twa:font-normal twa:max-w-[520px]", children: "Choose the data type for values entered in this column" })] }), _jsx(Card.Body, { className: "twa:p-1", children: _jsx(SingleSelect, { "data-name": "column-type-dropdown", className: "twa:max-w-[300px]", items: dataTypeOptions, placeholder: "Select Data Type", value: data.FreeTextColumnSettings.DataType, onValueChange: (value) => handleDataTypeChange(value) }) })] }), _jsxs(Card, { shadow: false, children: [_jsxs(Card.Title, { children: [_jsx(Box, { className: "twa:font-medium", children: "Default Value" }), _jsx(Box, { className: "twa:text-xs twa:opacity-70 twa:font-normal twa:max-w-[520px]", children: "Optional initial value for each cell in the column" })] }), _jsx(Card.Body, { children: data.FreeTextColumnSettings.DataType === 'boolean' ? (_jsx(CheckBox, { "data-name": "column-default-value-checkbox", checked: !!data.DefaultValue, onChange: (DefaultValue) => {
+    return (_jsx(Box, { "data-name": "free-text-column-settings", children: _jsxs(Flex, { flexDirection: "column", className: "twa:gap-3 twa:p-3", children: [_jsxs(Card, { shadow: false, children: [_jsxs(Card.Title, { children: [_jsx(Box, { className: "twa:font-medium twa:shrink-0 twa:whitespace-nowrap", children: "Data Type" }), _jsx(Box, { className: "twa:text-xs twa:opacity-70 twa:font-normal twa:min-w-0 twa:flex-1", children: "AdapTable type used by expressions, filters, and other modules" })] }), _jsx(Card.Body, { className: "twa:p-1", children: _jsx(SingleSelect, { "data-name": "column-type-dropdown", className: "twa:max-w-[300px]", items: DATA_TYPE_OPTIONS, placeholder: "Select Data Type", value: dataType, onValueChange: (value) => handleDataTypeChange(value) }) })] }), showCellDataTypeDropdown ? (_jsxs(Card, { shadow: false, children: [_jsxs(Card.Title, { children: [_jsx(Box, { className: "twa:font-medium twa:shrink-0 twa:whitespace-nowrap", children: "Cell Data Type" }), _jsx(Box, { className: "twa:text-xs twa:opacity-70 twa:font-normal twa:min-w-0 twa:flex-1", children: "Optionally use a grid cell data type for formatting, editing and export" })] }), _jsx(Card.Body, { className: "twa:p-1", children: _jsx(SingleSelect, { "data-name": "ag-grid-cell-data-type", className: "twa:max-w-[300px]", items: compatibleCellDataTypeOptions, placeholder: "None", value: cellDataType, onValueChange: handleAgGridCellDataTypeChange, showClear: true }) })] })) : null, _jsxs(Card, { shadow: false, children: [_jsxs(Card.Title, { children: [_jsx(Box, { className: "twa:font-medium", children: "Default Value" }), _jsx(Box, { className: "twa:text-xs twa:opacity-70 twa:font-normal twa:w-full", children: "Optional initial value for each cell in the column" })] }), _jsx(Card.Body, { children: data.FreeTextColumnSettings.DataType === 'boolean' ? (_jsx(CheckBox, { "data-name": "column-default-value-checkbox", checked: !!data.DefaultValue, onChange: (DefaultValue) => {
                                     props.onChange({
                                         ...data,
                                         DefaultValue,
@@ -80,12 +102,12 @@ export const FreeTextColumnSettingsWizardSection = (props) => {
                                     ? 'number'
                                     : data.FreeTextColumnSettings.DataType === 'date'
                                         ? 'date'
-                                        : 'text', placeholder: "Enter a default value (optional)", onChange: handleDefaultValueChange })) })] }), data.FreeTextColumnSettings.DataType === 'text' ? (_jsxs(Card, { shadow: false, children: [_jsxs(Card.Title, { children: [_jsx(Box, { className: "twa:font-medium", children: "Cell Editor" }), _jsx(Box, { className: "twa:text-xs twa:opacity-70 twa:font-normal twa:max-w-[520px]", children: "Choose how text values are edited in the grid" })] }), _jsx(Card.Body, { children: _jsxs(RadioGroup, { value: data.TextEditor ?? 'Inline', name: "textEditor", orientation: "horizontal", onRadioChange: (TextEditor) => {
+                                        : 'text', placeholder: "Enter a default value (optional)", onChange: handleDefaultValueChange })) })] }), data.FreeTextColumnSettings.DataType === 'text' ? (_jsxs(Card, { shadow: false, children: [_jsxs(Card.Title, { children: [_jsx(Box, { className: "twa:font-medium", children: "Cell Editor" }), _jsx(Box, { className: "twa:text-xs twa:opacity-70 twa:font-normal twa:w-full", children: "Choose how text values are edited in the grid" })] }), _jsx(Card.Body, { children: _jsxs(RadioGroup, { value: data.TextEditor ?? 'Inline', name: "textEditor", orientation: "horizontal", onRadioChange: (TextEditor) => {
                                     props.onChange({
                                         ...data,
                                         TextEditor,
                                     });
-                                }, children: [_jsx(Radio, { className: "twa:ml-1", "data-name": "inline-editor", value: "Inline", children: "Inline Editor" }), _jsx(Radio, { className: "twa:ml-4", "data-name": "large-editor", value: "Large", children: "Large Editor" })] }) })] })) : null, _jsxs(Card, { shadow: false, children: [_jsxs(Card.Title, { children: [_jsx(Box, { className: "twa:font-medium", children: "Width" }), _jsx(Box, { className: "twa:text-xs twa:opacity-70 twa:font-normal twa:max-w-[520px]", children: "Optional column width in pixels" })] }), _jsx(Card.Body, { className: "twa:p-1", children: _jsx(Input, { "data-name": "column-width", type: "number", className: "twa:max-w-[300px]", value: Width || '', onChange: (e) => handleSpecialColumnSettingsChange({
+                                }, children: [_jsx(Radio, { className: "twa:ml-1", "data-name": "inline-editor", value: "Inline", children: "Inline Editor" }), _jsx(Radio, { className: "twa:ml-4", "data-name": "large-editor", value: "Large", children: "Large Editor" })] }) })] })) : null, _jsxs(Card, { shadow: false, children: [_jsxs(Card.Title, { children: [_jsx(Box, { className: "twa:font-medium", children: "Width" }), _jsx(Box, { className: "twa:text-xs twa:opacity-70 twa:font-normal twa:w-full", children: "Optional column width in pixels" })] }), _jsx(Card.Body, { className: "twa:p-1", children: _jsx(Input, { "data-name": "column-width", type: "number", className: "twa:max-w-[300px]", value: Width || '', onChange: (e) => handleSpecialColumnSettingsChange({
                                     Width: Number(e.target.value),
                                 }) }) })] }), _jsx(SpecialColumnSettingsWizardStep, { isEditable: true, settings: data.FreeTextColumnSettings, onChange: handleSpecialColumnSettingsChange })] }) }));
 };