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

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

@@ -1,17 +1,20 @@
-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';
 import { CheckBox } from '../../../components/CheckBox';
-import { Tag } from '../../../components/Tag';
+import { ColumnTag, Tag } from '../../../components/Tag';
+import { CollapsibleWizardCard, CollapsibleWizardValueSummary, getWizardAccordionSectionClassName, renderCompactColumnTags, useWizardCardAccordion, } from '../../Wizard/CollapsibleWizardCard';
+import { cn } from '../../../lib/utils';
 const FORMAT_COLUMN_ROW_KINDS = ['Data', 'Group', 'Summary', 'Total'];
 const ROW_KIND_LABELS = {
-    Data: 'Data (leaf) rows',
-    Group: 'Group rows',
-    Summary: 'Summary rows',
-    Total: 'Total rows',
+    Data: 'Data (leaf) Rows',
+    Group: 'Group Rows',
+    Summary: 'Summary Rows',
+    Total: 'Total Rows',
 };
 const ROW_KIND_EXCLUDE_KEY = {
     Data: 'ExcludeDataRows',
@@ -29,39 +32,72 @@ const isRowKindIncluded = (data, kind) => {
 const collectIncludedRowKinds = (data) => {
     return FORMAT_COLUMN_ROW_KINDS.filter((k) => isRowKindIncluded(data, k));
 };
-export const renderFormatColumnScopeSummary = (data) => {
+const isFormatColumnColumnsScopeConfigured = (scope, scopeApi) => {
+    if (scopeApi.scopeIsAll(scope)) {
+        return true;
+    }
+    if ('ColumnIds' in scope) {
+        return scope.ColumnIds.length > 0;
+    }
+    if ('DataTypes' in scope) {
+        return scope.DataTypes.length > 0;
+    }
+    return false;
+};
+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(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))))] }))] }));
+};
+export const renderFormatColumnScopeSummary = (data) => {
+    return _jsx(FormatColumnScopeSummaryContent, { data: data });
+};
+const FormatColumnColumnsScopeSummary = ({ data, }) => {
+    const adaptable = useAdaptable();
+    const scopeApi = adaptable.api.columnScopeApi;
+    const scope = data.Scope;
+    const columnsInScope = scopeApi.getColumnsInScope(scope);
+    if (scopeApi.scopeIsAll(scope)) {
+        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" })) }));
+    }
+    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 null;
+};
+const FormatColumnRowsScopeSummary = ({ data, }) => {
+    const includedKinds = collectIncludedRowKinds(data);
+    const allKinds = includedKinds.length === 4;
+    return (_jsx(CollapsibleWizardValueSummary, { value: allKinds ? (_jsx(Tag, { children: "All" })) : includedKinds.length === 0 ? (_jsx(Tag, { children: "None" })) : (_jsx(Flex, { flexWrap: "wrap", className: "twa:gap-1", children: includedKinds.map((kind) => (_jsx(Tag, { children: ROW_KIND_LABELS[kind] }, kind))) })) }));
 };
+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))) }));
 // ---------------------------------------------------------------------------
 // Section
 // ---------------------------------------------------------------------------
 export const FormatColumnScopeWizardSection = (props) => {
     const { data, api } = 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) {
-                // if scope is whole row, a predicate cannot be present, so we set the rule
-                // to be a boolean expression
                 delete newData.Rule.Predicates;
                 newData.Rule.BooleanExpression = '';
             }
             else {
-                const validPredicateIds = new Set(api.formatColumnApi.internalApi
-                    .getFormatColumnDefsForScope(Scope)
-                    .map((def) => def.id));
+                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 there are more than 1 column, then we must eliminate the IN/NotIn predicates
-                        // TODO: this should NOT be required, but the ColumnValueSelector does NOT support creatable values right now
                         if (isScopeColumnIds(Scope) && Scope.ColumnIds.length > 1) {
                             return predicate.PredicateId !== 'In' && predicate.PredicateId !== 'NotIn';
                         }
@@ -82,11 +118,16 @@ export const FormatColumnScopeWizardSection = (props) => {
         });
     };
     const showRowToggles = data.Target === 'cell';
-    return (_jsxs(Flex, { flexDirection: "column", style: { height: '100%' }, children: [_jsxs(Flex, { flexDirection: "column", className: "twa:flex-1 twa:min-h-0", children: [_jsxs(Flex, { flexDirection: "row", alignItems: "center", className: "twa:p-2 twa:gap-3 twa:border-b twa:border-b-text-on-defaultbackground/20", children: [_jsx(Box, { className: "twa:text-5 twa:font-medium", children: "Columns" }), _jsx(Box, { className: "twa:text-xs twa:opacity-70", children: "Which Columns the Format Column will be applied to" })] }), _jsx(Box, { className: "twa:flex-1 twa:min-h-0 twa:overflow-auto", children: _jsx(NewScopeComponent, { descriptions: {
-                                rowScope: 'Format all columns in the row',
-                                columnScope: 'Select columns to format',
-                            }, scope: data.Scope, updateScope: handleScopeChange }) })] }), showRowToggles && (_jsxs(Box, { className: "twa:border-t twa:border-border twa:px-2 twa:py-3 twa:shrink-0", children: [_jsxs(Flex, { alignItems: "center", className: "twa:gap-3 twa:pb-2 twa:mb-3 twa:flex-wrap twa:border-b twa:border-b-text-on-defaultbackground/20", children: [_jsx(Box, { className: "twa:text-5 twa:font-medium", children: "Rows" }), _jsx(Box, { className: "twa:text-xs twa:opacity-70 twa:max-w-[520px]", children: "Which kinds of Rows the Format Column will be applied to" })] }), _jsx(Flex, { flexDirection: "row", className: "twa:gap-6 twa:flex-wrap", children: [
-                            FORMAT_COLUMN_ROW_KINDS.slice(0, 2),
-                            FORMAT_COLUMN_ROW_KINDS.slice(2),
-                        ].map((rowKindGroup, groupIndex) => (_jsx(Box, { className: "twa:flex-1 twa:min-w-[220px]", children: _jsx(FormLayout, { sizes: ['180px', '1fr'], children: rowKindGroup.map((kind) => (_jsx(FormRow, { label: `${ROW_KIND_LABELS[kind]}:`, children: _jsx(Flex, { alignItems: "center", className: "twa:ml-2", children: _jsx(CheckBox, { "data-name": `include-${kind.toLowerCase()}-rows-checkbox`, className: "twa:mr-2", checked: isRowKindIncluded(data, kind), onChange: (checked) => handleRowKindChange(kind, checked) }) }) }, kind))) }) }, groupIndex))) })] }))] }));
+    const scope = data.Scope;
+    const columnsScopeConfigured = isFormatColumnColumnsScopeConfigured(scope, scopeApi);
+    const includedRowKinds = collectIncludedRowKinds(data);
+    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 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',
+                            columnScope: 'Select Columns to format',
+                        }, scope: data.Scope, updateScope: handleScopeChange }) }) }), showRowToggles && (_jsx(CollapsibleWizardCard, { ...bindCard('rows'), surface: "panel", "data-name": "format-column-scope-rows", title: "Rows", help: "Which kinds of Rows the Format Column will be applied to", collapsedHelp: "Row kinds the Format Column applies to", compactSummary: rowsCompactSummary, summary: _jsx(FormatColumnRowsScopeSummary, { data: data }), children: _jsx(FormatColumnRowScopePanel, { data: data, onRowKindChange: handleRowKindChange }) }))] }));
 };

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 })] })] }));
 };
@@ -57,7 +57,7 @@ export const FormatColumnSettingsWizardSection = (props) => {
         });
     };
     const behaviourSpellingVariant = api.internalApi.getCorrectEnglishVariant('Behaviour');
-    return (_jsxs(Flex, { flexDirection: "column", className: "twa:gap-3 twa:p-3", children: [_jsxs(Card, { shadow: false, children: [_jsxs(Card.Title, { children: [_jsx(Box, { className: "twa:font-medium", children: "Name" }), _jsx(Box, { className: "twa:text-xs twa:opacity-70 twa:font-normal twa:max-w-[520px]", children: "Provide a unique name for the Format Column" })] }), _jsx(Card.Body, { className: "twa:p-1", children: _jsx(Input, { ref: nameInputRef, className: "twa:max-w-[300px] twa:w-full", "data-name": "format-column-name", onChange: onNameChange, value: data?.Name ?? '' }) })] }), _jsxs(Card, { shadow: false, children: [_jsxs(Card.Title, { children: [_jsx(Box, { className: "twa:font-medium", children: "Target" }), _jsx(Box, { className: "twa:text-xs twa:opacity-70 twa:font-normal twa:max-w-[700px]", children: "Choose whether Format Column applies to Column Cells or Column Header (latter doesn't support Conditions)" })] }), _jsx(Card.Body, { children: _jsxs(Flex, { flexDirection: "column", children: [_jsx(TypeRadio, { "data-name": "target-column-cell", text: 'Column Cells', description: "", checked: currentTarget === 'cell', onClick: () => handleTargetChange('cell') }), _jsx(TypeRadio, { "data-name": "target-column-header", text: 'Column Header', description: "", checked: currentTarget === 'columnHeader', onClick: () => handleTargetChange('columnHeader') })] }) })] }), _jsxs(Card, { shadow: false, children: [_jsxs(Card.Title, { children: [_jsxs(Box, { className: "twa:font-medium", children: ["Column Group ", behaviourSpellingVariant] }), _jsx(Box, { className: "twa:text-xs twa:opacity-70 twa:font-normal twa:max-w-[520px]", children: "Choose when the Format Column is applied to the Column Group" })] }), _jsx(Card.Body, { children: _jsxs(RadioGroup, { value: data.ColumnGroupScope || 'Both', name: "columnGroupScope", orientation: "horizontal", onRadioChange: (columnGroupScope) => {
+    return (_jsxs(Flex, { flexDirection: "column", className: "twa:gap-3 twa:p-3", children: [_jsxs(Card, { shadow: false, children: [_jsxs(Card.Title, { children: [_jsx(Box, { className: "twa:font-medium", children: "Name" }), _jsx(Box, { className: "twa:text-xs twa:opacity-70 twa:font-normal twa:max-w-[520px]", children: "Provide a unique name for the Format Column" })] }), _jsx(Card.Body, { className: "twa:p-1", children: _jsx(Input, { ref: nameInputRef, className: "twa:max-w-[300px] twa:w-full", "data-name": "format-column-name", onChange: onNameChange, value: data?.Name ?? '' }) })] }), _jsxs(Card, { shadow: false, children: [_jsxs(Card.Title, { children: [_jsx(Box, { className: "twa:font-medium", children: "Target" }), _jsx(Box, { className: "twa:text-xs twa:opacity-70 twa:font-normal twa:max-w-[700px]", children: "Choose whether Format Column applies to Column Cells or Column Header (latter doesn't support Conditions)" })] }), _jsx(Card.Body, { children: _jsxs(Flex, { flexDirection: "column", children: [_jsx(TypeRadio, { "data-name": "target-column-cell", text: 'Column Cells', description: "", checked: currentTarget === 'cell', onClick: () => handleTargetChange('cell') }), _jsx(TypeRadio, { "data-name": "target-column-header", text: 'Column Header', description: "", checked: currentTarget === 'columnHeader', onClick: () => handleTargetChange('columnHeader') })] }) })] }), _jsxs(Card, { shadow: false, children: [_jsxs(Card.Title, { children: [_jsxs(Box, { className: "twa:font-medium", children: ["Column Group ", behaviourSpellingVariant] }), _jsx(Box, { className: "twa:text-xs twa:opacity-70 twa:font-normal twa:max-w-[520px]", children: "Choose when the Format Column is applied in a Column Group" })] }), _jsx(Card.Body, { children: _jsxs(RadioGroup, { value: data.ColumnGroupScope || 'Both', name: "columnGroupScope", orientation: "horizontal", onRadioChange: (columnGroupScope) => {
                                 props.onChange({
                                     ...data,
                                     ColumnGroupScope: columnGroupScope,

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

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

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

@@ -1,9 +1,12 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { convertAdaptableStyleToCSS } from '../../../Utilities/Helpers/StyleHelper';
+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 StringExtensions from '../../../Utilities/Extensions/StringExtensions';
 import { Box } from '../../../components/Flex';
+import { Tag } from '../../../components/Tag';
+import { isSummaryInTagLabel, renderSummaryLabelValueTagContent, summaryStringsToTagContents, } from '../../Wizard/SummaryColorTag';
+import { getFormatColumnStylePreviewText } from './FormatColumnPreview';
 export const isFormatColumnStyleValid = (data, api) => {
     if (data.Style &&
         UIHelper.IsEmptyStyle(data.Style) &&
@@ -13,25 +16,68 @@ 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 renderFormatColumnStyleWizardSummary = (data) => {
-    const { api } = useOnePageAdaptableWizardContext();
-    return renderFormatColumnStyleSummary(data, api);
+export const hasFormatColumnStyle = (formatColumn) => {
+    if (formatColumn.Style == null || UIHelper.IsEmptyStyle(formatColumn.Style)) {
+        return false;
+    }
+    return getFormatColumnStyleSummaryItems(formatColumn).length > 0;
 };
-export const renderFormatColumnStyleSummary = (data, api) => {
-    return (_jsx(Box, { className: "ab-FormatPreview twa:p-2", style: toStyle(data), children: "Preview result" }));
+export const getFormatColumnStyleViewValues = (formatColumn) => {
+    return summaryStringsToTagContents(getFormatColumnStyleSummaryItems(formatColumn).map(({ label, value }) => `${label}: ${value}`));
+};
+export const renderFormatColumnStyleSummary = (data) => {
+    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 }) => (_jsx(Box, { children: isSummaryInTagLabel(label) ? (_jsx(Tag, { children: renderSummaryLabelValueTagContent(label, value) })) : (_jsxs(_Fragment, { 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,10 +1,10 @@
-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';
 import { cloneObject } from '../../../Utilities/Helpers/Helper';
 import { FormatColumnScopeWizardSection, renderFormatColumnScopeSummary, } from './FormatColumnScopeWizardSection';
-import { FormatColumnStyleWizardSection, isFormatColumnStyleValid, renderFormatColumnStyleWizardSummary, } from './FormatColumnStyleWizardSection';
+import { FormatColumnStyleWizardSection, isFormatColumnStyleValid, renderFormatColumnStyleSummary, } from './FormatColumnStyleWizardSection';
 import { FormatColumnFormatWizardSection, getFormatDisplayTypeForScope, renderFormatColumnFormatSummary, } from './FormatColumnFormatWizardSection';
 import { useAdaptable } from '../../AdaptableContext';
 import { FormatColumnSettingsWizardSection, renderFormatColumnSettingsSummary, } from './FormatColumnSettingsWizardSection';
@@ -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, 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, Flex } from '../../../components/Flex';
+import { isAdaptableNumericFormatPreset } from '../../../AdaptableState/Common/AdaptableFormatPresets';
+import { Box } from '../../../components/Flex';
+import { FormatColumnPreviewSummaryCard } from './FormatColumnPreview';
 const adjustDisplayFormat = (fc, api) => {
     const formatColumn = { ...fc };
     let formatDataType = getFormatDisplayTypeForScope(formatColumn.Scope, api);
@@ -100,10 +101,7 @@ export function FormatColumnWizard(props) {
         // DisplayFormat object so we don't persist an empty shell. Preset
         // strings are always meaningful and should never be removed here.
         const df = formatColumn?.DisplayFormat;
-        if (df &&
-            !isAdaptableNumericFormatPreset(df) &&
-            df.Options &&
-            isObjectEmpty(df.Options)) {
+        if (df && !isAdaptableNumericFormatPreset(df) && df.Options && isObjectEmpty(df.Options)) {
             delete formatColumn.DisplayFormat;
         }
         if (formatColumn.Style && isObjectEmpty(formatColumn.Style)) {
@@ -140,9 +138,7 @@ export function FormatColumnWizard(props) {
                 details: 'Select which Columns and Rows will be formatted',
                 isValid: isScopeValid,
                 renderSummary: renderFormatColumnScopeSummary,
-                render: () => {
-                    return (_jsx(Flex, { flexDirection: "column", className: "twa:h-full", children: _jsx(FormatColumnScopeWizardSection, { onChange: setFormatColumn }) }));
-                },
+                render: () => _jsx(FormatColumnScopeWizardSection, { onChange: setFormatColumn }),
             },
             {
                 isValid: (abObject, api, context) => {
@@ -153,6 +149,7 @@ export function FormatColumnWizard(props) {
                 },
                 title: 'Condition',
                 details: 'Build a Rule when the Format Column should be applied',
+                renderSummary: renderFormatColumnConditionSummary,
                 render: () => {
                     return (_jsx(FormatColumnRuleWizardSection, { onChange: setFormatColumn, defaultPredicateId: DEFAULT_PREDICATE_ID_FOR_FORMAT_COLUMN }));
                 },
@@ -161,7 +158,7 @@ export function FormatColumnWizard(props) {
                 title: 'Style',
                 details: 'Create a Style',
                 isValid: isFormatColumnStyleValid,
-                renderSummary: renderFormatColumnStyleWizardSummary,
+                renderSummary: renderFormatColumnStyleSummary,
                 render: () => {
                     return (_jsx(Box, { className: "twa:p-2", children: _jsx(FormatColumnStyleWizardSection, { onChange: setFormatColumn }) }));
                 },
@@ -185,7 +182,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,16 @@
+export const getFreeTextColumnSettingsTags = (settings) => {
+    const { Width, Filterable, Resizable, Groupable, Sortable, Pivotable, Aggregatable, SuppressMenu, SuppressMovable, } = settings ?? {};
+    const colTypes = settings?.ColumnTypes ? settings.ColumnTypes.join(', ') : '';
+    return [
+        Width ? `Width: ${Width}px` : null,
+        Pivotable ? 'Pivotable' : null,
+        Filterable ? 'Filterable' : null,
+        Resizable ? 'Resizable' : null,
+        Groupable ? 'Groupable' : null,
+        Sortable ? 'Sortable' : null,
+        Aggregatable ? 'Aggregatable' : null,
+        SuppressMenu ? 'Suppress Menu' : null,
+        SuppressMovable ? 'Suppress Movable' : 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;

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

@@ -0,0 +1,53 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from 'react';
+import Input from '../../../components/Input';
+import { Tag } from '../../../components/Tag';
+import { useOnePageAdaptableWizardContext } from '../../Wizard/OnePageAdaptableWizard';
+import { Box, Flex } from '../../../components/Flex';
+import { Card } from '../../../components/Card';
+export const renderFreeTextColumnDefinitionSummary = (data) => {
+    return (_jsxs(Box, { className: "twa:text-2 twa:grid twa:items-center twa:grid-cols-[auto_1fr] twa:gap-2", children: [_jsx(Box, { children: "Column Identifier:" }), _jsx(Box, { children: _jsx(Tag, { children: data.ColumnId }) }), data.FriendlyName ? (_jsxs(_Fragment, { children: [_jsx(Box, { children: "Column Name:" }), _jsx(Box, { children: _jsx(Tag, { children: data.FriendlyName ?? data.ColumnId }) })] })) : null] }));
+};
+export const isValidFreeTextColumnDefinition = (data, api) => {
+    const columns = api.columnApi.getUIAvailableColumns();
+    if (!data.ColumnId) {
+        return 'A Column Name is required';
+    }
+    const columnsWithSameIdCount = columns.filter((c) => c.columnId === data.ColumnId).length;
+    const hasAlreadyExistingId = data.Uuid ? columnsWithSameIdCount > 1 : columnsWithSameIdCount > 0;
+    return hasAlreadyExistingId ? 'A column with this Name already exists' : true;
+};
+export const FreeTextColumnDefinitionWizardSection = (props) => {
+    const { data } = useOnePageAdaptableWizardContext();
+    const [ColumnNameFocused, setColumnNameFocused] = useState(false);
+    const inEdit = props.isEdit;
+    const handleColumnIdChange = (event) => {
+        let e = event.target;
+        props.onChange({
+            ...data,
+            ColumnId: e.value,
+        });
+    };
+    const handleColumnNameChange = (event) => {
+        let e = event.target;
+        props.onChange({
+            ...data,
+            FriendlyName: e.value,
+        });
+    };
+    const handleSpecialColumnSettingsChange = (settings) => {
+        props.onChange({
+            ...data,
+            FreeTextColumnSettings: {
+                ...data.FreeTextColumnSettings,
+                ...settings,
+            },
+        });
+    };
+    const { HeaderToolTip } = data.FreeTextColumnSettings ?? {};
+    return (_jsx(Box, { "data-name": "free-text-column-definition", 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: "Column Name" }), _jsx(Box, { className: "twa:text-xs twa:opacity-70 twa:font-normal twa:max-w-[520px]", children: "Unique identifier for the Free Text Column" })] }), _jsx(Card.Body, { className: "twa:p-1", children: _jsx(Input, { "data-name": "column-id", value: data.ColumnId || '', className: "twa:max-w-[500px] twa:w-full", autoFocus: !inEdit, disabled: inEdit, type: "text", placeholder: "Enter a Column Name", onChange: handleColumnIdChange }) })] }), _jsxs(Card, { shadow: false, children: [_jsxs(Card.Title, { children: [_jsx(Box, { className: "twa:font-medium", children: "Column Header" }), _jsx(Box, { className: "twa:text-xs twa:opacity-70 twa:font-normal twa:max-w-[520px]", children: "Optional display name shown in the grid header" })] }), _jsx(Card.Body, { className: "twa:p-1", children: _jsx(Input, { "data-name": "column-name", autoFocus: inEdit, onFocus: () => setColumnNameFocused(true), onBlur: () => setColumnNameFocused(false), value: ColumnNameFocused
+                                    ? data.FriendlyName || ''
+                                    : data.FriendlyName || data.ColumnId || '', className: "twa:max-w-[500px] twa:w-full", type: "text", placeholder: "Enter a Column Header (optional)", onChange: handleColumnNameChange }) })] }), _jsxs(Card, { shadow: false, children: [_jsxs(Card.Title, { children: [_jsx(Box, { className: "twa:font-medium", children: "Column Header Tooltip" }), _jsx(Box, { className: "twa:text-xs twa:opacity-70 twa:font-normal twa:max-w-[520px]", children: "Optional text shown when hovering over the column header" })] }), _jsx(Card.Body, { className: "twa:p-1", children: _jsx(Input, { "data-name": "header-tooltip", type: "text", className: "twa:max-w-[500px] twa:w-full", value: HeaderToolTip, onChange: (e) => handleSpecialColumnSettingsChange({
+                                    HeaderToolTip: e.target.value,
+                                }) }) })] })] }) }));
+};

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

@@ -1,8 +1,7 @@
 import * as React from 'react';
 import { FreeTextColumn } from '../../../AdaptableState/FreeTextColumnState';
-import { AdaptableApi } from '../../../Api/AdaptableApi';
-export declare const renderFreeTextColumnSummary: (data: FreeTextColumn) => React.JSX.Element;
-export declare const isValidFreeTextColumn: (data: FreeTextColumn, api: AdaptableApi) => true | "A Column Name is required" | "A column with this Name already exists" | "A data type is required for the column";
+export declare const renderFreeTextColumnSettingsSummary: (data: FreeTextColumn) => React.JSX.Element;
+export declare const isValidFreeTextColumnSettings: (data: FreeTextColumn) => true | string;
 export type FreeTextColumnSettingsWizardSectionProps = {
     onChange: (data: FreeTextColumn) => void;
     isEdit: boolean;