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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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;

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

@@ -1,9 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { useState } from 'react';
 import Input from '../../../components/Input';
-import ErrorBox from '../../../components/ErrorBox';
-import Radio from '../../../components/Radio';
-import FormLayout, { FormRow } from '../../../components/FormLayout';
+import Radio, { RadioGroup } from '../../../components/Radio';
 import { useOnePageAdaptableWizardContext } from '../../Wizard/OnePageAdaptableWizard';
 import AdaptableInput from '../../Components/AdaptableInput';
 import { CheckBox } from '../../../components/CheckBox';
@@ -11,28 +8,24 @@ import { DateFormatter } from '../../../Utilities/Helpers/FormatHelper';
 import { parseToISO } from '../../../Utilities/Helpers/DateHelper';
 import { Tag } from '../../../components/Tag';
 import { SpecialColumnSettingsWizardStep } from '../../SpecialColumnSettingsWizardStep';
-import { Box } from '../../../components/Flex';
+import { Box, Flex } from '../../../components/Flex';
 import { SingleSelect } from '../../../components/NewSelect';
-const options = [
+import { Card } from '../../../components/Card';
+import { TagList } from '../../../components/Tag/Tag';
+import { getFreeTextColumnSettingsTags } from '../Utilities/getFreeTextColumnSettingsTags';
+import { SummaryText } from '../../Wizard/OnePageAdaptableWizard';
+const dataTypeOptions = [
     { value: 'number', label: 'Number' },
     { value: 'text', label: 'Text' },
     { value: 'date', label: 'Date' },
     { value: 'boolean', label: 'Boolean' },
 ];
-export const renderFreeTextColumnSummary = (data) => {
-    return (_jsxs(Box, { className: "twa:text-2", children: [_jsxs(Box, { children: ["Column Identifier: ", _jsx(Tag, { children: data.ColumnId })] }), data.FriendlyName ? (_jsxs(Box, { className: "twa:mt-3", children: ["Column Name: ", _jsx(Tag, { children: data.FriendlyName ?? data.ColumnId })] })) : null, _jsxs(Box, { className: "twa:mt-3", children: ["Data Type: ", _jsx(Tag, { children: data.FreeTextColumnSettings.DataType })] }), data.DefaultValue !== undefined ? (_jsxs(Box, { className: "twa:mt-3", children: ["Default Value: ", _jsx(Tag, { children: data.DefaultValue })] })) : null, data.TextEditor !== undefined ? (_jsxs(Box, { className: "twa:mt-3", children: ["Editor Type: ", _jsx(Tag, { children: data.TextEditor })] })) : null] }));
+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 ? (_jsx(Box, { className: "twa:mt-2", children: _jsx(TagList, { tags: propertyTags }) })) : null] }));
 };
-export const isValidFreeTextColumn = (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;
-    if (hasAlreadyExistingId) {
-        return 'A column with this Name already exists';
-    }
-    if (!data.FreeTextColumnSettings.DataType) {
+export const isValidFreeTextColumnSettings = (data) => {
+    if (!data.FreeTextColumnSettings?.DataType) {
         return 'A data type is required for the column';
     }
     return true;
@@ -40,26 +33,6 @@ export const isValidFreeTextColumn = (data, api) => {
 export const FreeTextColumnSettingsWizardSection = (props) => {
     const { data, api } = useOnePageAdaptableWizardContext();
     const Pattern = api.optionsApi.getUserInterfaceOptions().dateInputOptions.dateFormat;
-    const [ColumnNameFocused, setColumnNameFocused] = useState(false);
-    const inEdit = props.isEdit;
-    const validCheck = isValidFreeTextColumn(data, api);
-    const ErrorMessage = validCheck === true ? null : validCheck;
-    const handleColumnIdChange = (event) => {
-        let e = event.target;
-        const ColumnId = e.value;
-        props.onChange({
-            ...data,
-            ColumnId,
-        });
-    };
-    const handleColumnNameChange = (event) => {
-        let e = event.target;
-        const ColumnName = e.value;
-        props.onChange({
-            ...data,
-            FriendlyName: ColumnName,
-        });
-    };
     const handleDataTypeChange = (DataType) => {
         const newData = {
             ...data,
@@ -74,14 +47,6 @@ export const FreeTextColumnSettingsWizardSection = (props) => {
         }
         props.onChange(newData);
     };
-    const onDynamicSelectChanged = (event) => {
-        let e = event.target;
-        const TextEditor = e.value;
-        props.onChange({
-            ...data,
-            TextEditor,
-        });
-    };
     const handleDefaultValueChange = (event) => {
         let e = event.target;
         let DefaultValue = e.value;
@@ -95,9 +60,7 @@ export const FreeTextColumnSettingsWizardSection = (props) => {
             DefaultValue,
         });
     };
-    const handleSpecialColumnSettingsChange = (
-    //  settings: SpecialColumnSettings
-    settings) => {
+    const handleSpecialColumnSettingsChange = (settings) => {
         props.onChange({
             ...data,
             FreeTextColumnSettings: {
@@ -106,22 +69,24 @@ export const FreeTextColumnSettingsWizardSection = (props) => {
             },
         });
     };
-    return (_jsxs(_Fragment, { children: [_jsxs(FormLayout, { children: [_jsx(FormRow, { label: "Column Name", children: _jsx(Input, { "data-name": "column-id", autoFocus: !inEdit, value: data.ColumnId || '', style: { width: '100%', maxWidth: 500 }, disabled: inEdit, type: "text", placeholder: "Enter a Column Name", onChange: (e) => handleColumnIdChange(e) }) }), _jsx(FormRow, { label: "Column Header", children: _jsx(Input, { "data-name": "column-name", autoFocus: inEdit, onFocus: () => {
-                                setColumnNameFocused(true);
-                            }, onBlur: () => {
-                                setColumnNameFocused(false);
-                            }, value: ColumnNameFocused ? data.FriendlyName || '' : data.FriendlyName || data.ColumnId || '', style: { width: '100%', maxWidth: 500 }, type: "text", placeholder: "Enter a Column Header (optional)", onChange: (e) => handleColumnNameChange(e) }) }), _jsx(FormRow, { label: "Data Type", children: _jsx(Box, { className: "twa:max-w-[500px]", children: _jsx(SingleSelect, { "data-name": "column-type-dropdown", className: "twa:w-full", items: options, placeholder: "Select Data Type", value: data.FreeTextColumnSettings.DataType, onValueChange: (value) => handleDataTypeChange(value) }) }) }), _jsx(FormRow, { label: "Default Value", children: data.FreeTextColumnSettings.DataType === 'boolean' ? (_jsx(CheckBox, { "data-name": "column-default-value-checkbox", checked: !!data.DefaultValue, onChange: (DefaultValue) => {
-                                props.onChange({
-                                    ...data,
-                                    DefaultValue,
-                                });
-                            } })) : (_jsx(AdaptableInput, { "data-name": "column-default-value", value: data.FreeTextColumnSettings.DataType === 'date' && data.DefaultValue
-                                ? parseToISO(data.DefaultValue, Pattern) || ''
-                                : data.DefaultValue || '', className: "twa:w-full twa:max-w-[500px]", type: data.FreeTextColumnSettings.DataType === 'number'
-                                ? 'number'
-                                : data.FreeTextColumnSettings.DataType === 'date'
-                                    ? 'date'
-                                    : 'text', placeholder: "Enter a default value (optional)", onChange: (e) => handleDefaultValueChange(e) })) }), _jsx(FormRow, { label: "Header Tooltip", children: _jsx(Input, { "data-name": "header-tooltip", type: "text", style: { width: '100%', maxWidth: 500 }, value: data.FreeTextColumnSettings?.HeaderToolTip || '', onChange: (e) => handleSpecialColumnSettingsChange({
-                                HeaderToolTip: e.target.value,
-                            }) }) }), ' ', data.FreeTextColumnSettings.DataType == 'text' && (_jsxs(FormRow, { label: "Cell Editor", children: [_jsx(Radio, { "data-name": "inline-editor", value: "Inline", checked: data.TextEditor == 'Inline', onChange: (_, e) => onDynamicSelectChanged(e), className: "twa:mr-2", children: "Inline Editor" }), _jsx(Radio, { "data-name": "large-editor", value: "Large", checked: data.TextEditor == 'Large', onChange: (_, e) => onDynamicSelectChanged(e), children: "Large Editor" })] }))] }), ErrorMessage ? _jsx(ErrorBox, { className: "twa:my-2", children: ErrorMessage }) : null, _jsx(Box, { className: "twa:mt-2", children: _jsx(SpecialColumnSettingsWizardStep, { isEditable: true, settings: data.FreeTextColumnSettings, onChange: handleSpecialColumnSettingsChange }) })] }));
+    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) => {
+                                    props.onChange({
+                                        ...data,
+                                        DefaultValue,
+                                    });
+                                } })) : (_jsx(AdaptableInput, { "data-name": "column-default-value", value: data.FreeTextColumnSettings.DataType === 'date' && data.DefaultValue
+                                    ? parseToISO(data.DefaultValue, Pattern) || ''
+                                    : data.DefaultValue || '', className: "twa:max-w-[500px] twa:w-full", type: data.FreeTextColumnSettings.DataType === 'number'
+                                    ? '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) => {
+                                    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({
+                                    Width: Number(e.target.value),
+                                }) }) })] }), _jsx(SpecialColumnSettingsWizardStep, { isEditable: true, settings: data.FreeTextColumnSettings, onChange: handleSpecialColumnSettingsChange })] }) }));
 };

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

@@ -2,7 +2,8 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import { useState } from 'react';
 import { OnePageAdaptableWizard, OnePageWizardSummary } from '../../Wizard/OnePageAdaptableWizard';
 import { cloneObject } from '../../../Utilities/Helpers/Helper';
-import { FreeTextColumnSettingsWizardSection, isValidFreeTextColumn, renderFreeTextColumnSummary, } from './FreeTextColumnSettingsWizardSection';
+import { FreeTextColumnSettingsWizardSection, isValidFreeTextColumnSettings, renderFreeTextColumnSettingsSummary, } from './FreeTextColumnSettingsWizardSection';
+import { FreeTextColumnDefinitionWizardSection, isValidFreeTextColumnDefinition, renderFreeTextColumnDefinitionSummary, } from './FreeTextColumnDefinitionWizardSection';
 import ObjectFactory from '../../../Utilities/ObjectFactory';
 import * as FreeTextColumnRedux from '../../../Redux/ActionsReducers/FreeTextColumnRedux';
 import { useDispatch, useSelector } from 'react-redux';
@@ -22,7 +23,7 @@ export const FreeTextColumnWizard = (props) => {
         return ObjectFactory.CreateEmptyFreeTextColumn(adaptable.api.gridApi.internalApi.deriveSpecialColumnSettingsFromAgGridDefaultColDef());
     });
     const dispatch = useDispatch();
-    const isEdit = props.data || props.popupParams?.action === 'Edit';
+    const isEdit = Boolean(props.data) || props.popupParams?.action === 'Edit';
     const handleFinish = () => {
         if (isEdit) {
             dispatch(FreeTextColumnRedux.FreeTextColumnEdit(freeTextColumn));
@@ -33,13 +34,19 @@ export const FreeTextColumnWizard = (props) => {
         props.onFinishWizard(freeTextColumn);
     };
     return (_jsx(OnePageAdaptableWizard, { defaultCurrentSectionName: props.defaultCurrentSectionName, moduleInfo: props.moduleInfo, data: freeTextColumn, onHide: props.onCloseWizard, onFinish: handleFinish, sections: [
+            {
+                title: 'Details',
+                details: 'Provide Free Text Column Details',
+                isValid: isValidFreeTextColumnDefinition,
+                renderSummary: renderFreeTextColumnDefinitionSummary,
+                render: () => (_jsx(Box, { className: "twa:p-2", children: _jsx(FreeTextColumnDefinitionWizardSection, { isEdit: isEdit, onChange: setFreeTextColumn }) })),
+            },
             {
                 title: 'Settings',
-                details: 'Configure the Free Text Column',
-                isValid: isValidFreeTextColumn,
-                render: () => {
-                    return (_jsx(Box, { className: "twa:p-2", children: _jsx(FreeTextColumnSettingsWizardSection, { isEdit: Boolean(props.data), onChange: setFreeTextColumn }) }));
-                },
+                details: 'Specify Free Text Column Properties',
+                isValid: isValidFreeTextColumnSettings,
+                renderSummary: renderFreeTextColumnSettingsSummary,
+                render: () => (_jsx(Box, { className: "twa:p-2", children: _jsx(FreeTextColumnSettingsWizardSection, { isEdit: isEdit, onChange: setFreeTextColumn }) })),
             },
             {
                 details: 'Select Free Text Column Tags',
@@ -51,10 +58,7 @@ export const FreeTextColumnWizard = (props) => {
             '-',
             {
                 details: 'Review the Free Text Column',
-                renderSummary: renderFreeTextColumnSummary,
-                render: () => {
-                    return (_jsx(Box, { className: "twa:p-2", children: _jsx(OnePageWizardSummary, {}) }));
-                },
+                render: () => (_jsx(Box, { className: "twa:p-2", children: _jsx(OnePageWizardSummary, {}) })),
                 title: 'Summary',
             },
         ] }));

package/src/View/Layout/TransposedPopup.js

@@ -183,8 +183,8 @@ export const TransposedPopup = (props) => {
             modules,
         }).then((adaptableApi) => {
             transposedAdaptableApiRef.current = adaptableApi;
-            adaptableApi.eventApi.on('ThemeChanged', (event) => {
-                transposedAdaptableApiRef.current?.themeApi.loadTheme(typeof event.theme === 'object' ? event.theme.Name : event.theme);
+            adaptableApi.eventApi.on('ThemeSelected', (event) => {
+                transposedAdaptableApiRef.current?.themeApi.loadTheme(event.theme);
             });
         });
     }, [elevatedColumnId, adaptable]);

package/src/View/Layout/Wizard/LayoutWizard.js

@@ -175,8 +175,7 @@ export const LayoutWizard = (props) => {
             {
                 title: 'Row Groups',
                 isVisible: () => layoutSupportedFeatures.RowGroupedColumns,
-                isValid: areSummaryRowsValid,
-                details: 'Configure Row Grouping',
+                details: 'Configure Row Grouping and Display Behaviour',
                 renderSummary: () => _jsx(RowGroupingSectionSummary, {}),
                 render: () => (_jsx(Box, { className: "twa:p-2 twa:h-full", children: _jsx(RowGroupingSection, { onChange: setLayout }) })),
             },
@@ -190,7 +189,7 @@ export const LayoutWizard = (props) => {
             {
                 title: 'Aggregations',
                 isVisible: () => layoutSupportedFeatures.TableAggregationColumns,
-                details: 'Select Column Aggregations',
+                details: 'Select Aggregation Columns and Behaviour',
                 renderSummary: () => _jsx(AggregationsSectionSummary, {}),
                 isValid: (data) => isAggregationsSectionValid(data),
                 render: () => (_jsx(Box, { className: "twa:p-2 twa:h-full", children: _jsx(AggregationsSection, { onChange: (layout) => {
@@ -229,6 +228,7 @@ export const LayoutWizard = (props) => {
                 details: 'Configure Row Summaries',
                 renderSummary: () => _jsx(RowSummarySectionSummary, {}),
                 isVisible: () => layoutSupportedFeatures.RowSummaries,
+                isValid: areSummaryRowsValid,
                 render: () => (_jsx(Box, { className: "twa:p-2 twa:h-full", children: _jsx(RowSummarySection, { onChange: setLayout }) })),
             },
             {

package/src/View/Layout/Wizard/sections/AggregationsSection.d.ts

@@ -1,7 +1,6 @@
 import * as React from 'react';
-import { TableLayout } from '../../../../../types';
-import { validateTableLayoutAggregations } from '../../../../Aggregation/validateParameterizedAggregations';
-export declare const isAggregationsSectionValid: typeof validateTableLayoutAggregations;
+import { Layout, TableLayout } from '../../../../../types';
+export declare const isAggregationsSectionValid: (data: Layout) => true | string;
 export declare const AggregationsSectionSummary: React.FunctionComponent;
 interface AggregationsSectionProps {
     onChange: (data: TableLayout) => void;