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

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

@@ -1,11 +1,40 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
+exports.renderFormatColumnConditionSummary = exports.hasFormatColumnCondition = void 0;
 exports.FormatColumnRuleWizardSection = FormatColumnRuleWizardSection;
 const tslib_1 = require("tslib");
 const jsx_runtime_1 = require("react/jsx-runtime");
 const OnePageAdaptableWizard_1 = require("../../Wizard/OnePageAdaptableWizard");
 const EntityRulesEditor_1 = require("../../Components/EntityRulesEditor");
 const HelpBlock_1 = tslib_1.__importDefault(require("../../../components/HelpBlock"));
+const Flex_1 = require("../../../components/Flex");
+const Tag_1 = require("../../../components/Tag");
+const hasFormatColumnCondition = (formatColumn) => {
+    const rule = formatColumn.Rule;
+    if (!rule) {
+        return false;
+    }
+    return Boolean(rule.Predicates?.length ||
+        rule.BooleanExpression ||
+        ('ObservableExpression' in rule && rule.ObservableExpression) ||
+        ('AggregatedBooleanExpression' in rule && rule.AggregatedBooleanExpression));
+};
+exports.hasFormatColumnCondition = hasFormatColumnCondition;
+const renderFormatColumnConditionSummary = (formatColumn, api) => {
+    if (formatColumn.Target === 'columnHeader') {
+        return (0, jsx_runtime_1.jsx)(Tag_1.Tag, { children: "No Condition" });
+    }
+    if (!(0, exports.hasFormatColumnCondition)(formatColumn)) {
+        return (0, jsx_runtime_1.jsx)(Tag_1.Tag, { children: "No Condition" });
+    }
+    const rule = formatColumn.Rule;
+    if (rule?.Predicates?.length) {
+        return ((0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:flex twa:flex-col twa:gap-2", children: rule.Predicates.map((predicate, index) => ((0, jsx_runtime_1.jsx)(Tag_1.Tag, { children: api.predicateApi.predicateToString(predicate) }, index))) }));
+    }
+    const expressionText = api.internalApi.getAdaptableQueryExpressionText(rule);
+    return (0, jsx_runtime_1.jsx)(Tag_1.Tag, { children: expressionText || 'No Condition' });
+};
+exports.renderFormatColumnConditionSummary = renderFormatColumnConditionSummary;
 function FormatColumnRuleWizardSection(props) {
     const { data, api, moduleInfo } = (0, OnePageAdaptableWizard_1.useOnePageAdaptableWizardContext)();
     if (data.Target && data.Target === 'columnHeader') {

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

@@ -1,21 +1,23 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.FormatColumnScopeWizardSection = exports.renderFormatColumnScopeSummary = void 0;
-const tslib_1 = require("tslib");
 const jsx_runtime_1 = require("react/jsx-runtime");
 const NewScopeComponent_1 = require("../../Components/NewScopeComponent");
 const OnePageAdaptableWizard_1 = require("../../Wizard/OnePageAdaptableWizard");
+const AdaptableContext_1 = require("../../AdaptableContext");
+const AdaptableColumn_1 = require("../../../AdaptableState/Common/AdaptableColumn");
 const ColumnScope_1 = require("../../../AdaptableState/Common/ColumnScope");
 const Flex_1 = require("../../../components/Flex");
-const FormLayout_1 = tslib_1.__importStar(require("../../../components/FormLayout"));
 const CheckBox_1 = require("../../../components/CheckBox");
 const Tag_1 = require("../../../components/Tag");
+const CollapsibleWizardCard_1 = require("../../Wizard/CollapsibleWizardCard");
+const utils_1 = require("../../../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',
@@ -33,40 +35,73 @@ const isRowKindIncluded = (data, kind) => {
 const collectIncludedRowKinds = (data) => {
     return FORMAT_COLUMN_ROW_KINDS.filter((k) => isRowKindIncluded(data, k));
 };
-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 = (0, AdaptableContext_1.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 ((0, jsx_runtime_1.jsxs)(Flex_1.Box, { className: "twa:pr-2 twa:py-2", children: [(0, jsx_runtime_1.jsx)(Flex_1.Box, { children: (0, NewScopeComponent_1.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 && ((0, jsx_runtime_1.jsxs)(Flex_1.Box, { className: "twa:mt-3", children: ["Rows:", ' ', allKinds ? ((0, jsx_runtime_1.jsx)(Tag_1.Tag, { children: "All" })) : includedKinds.length === 0 ? ((0, jsx_runtime_1.jsx)(Tag_1.Tag, { children: "None" })) : (includedKinds.map((k) => ((0, jsx_runtime_1.jsx)(Tag_1.Tag, { className: "twa:mr-1", children: k }, k))))] }))] }));
+    return ((0, jsx_runtime_1.jsxs)(Flex_1.Box, { className: "twa:flex twa:flex-col twa:gap-3", children: [(0, jsx_runtime_1.jsx)(Flex_1.Box, { children: scopeApi.scopeIsAll(scope) ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: ["Columns ", (0, jsx_runtime_1.jsx)(Tag_1.Tag, { children: "All" })] })) : 'ColumnIds' in scope ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: ["Columns", ' ', columnsInScope.length ? (columnsInScope.map((column) => ((0, jsx_runtime_1.jsx)(Tag_1.ColumnTag, { className: "twa:mr-1", children: column.friendlyName }, column.columnId)))) : ((0, jsx_runtime_1.jsx)(Tag_1.Tag, { children: "None" }))] })) : 'DataTypes' in scope ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: ["Data Types", ' ', scope.DataTypes.length ? (scope.DataTypes.map((dataType) => ((0, jsx_runtime_1.jsx)(Tag_1.Tag, { className: "twa:mr-1", children: (0, AdaptableColumn_1.getColumnTypeFriendlyName)(dataType) }, dataType)))) : ((0, jsx_runtime_1.jsx)(Tag_1.Tag, { children: "None" }))] })) : null }), showRows && ((0, jsx_runtime_1.jsxs)(Flex_1.Box, { children: ["Rows", ' ', allKinds ? ((0, jsx_runtime_1.jsx)(Tag_1.Tag, { children: "All" })) : includedKinds.length === 0 ? ((0, jsx_runtime_1.jsx)(Tag_1.Tag, { children: "None" })) : (includedKinds.map((k) => ((0, jsx_runtime_1.jsx)(Tag_1.Tag, { className: "twa:mr-1", children: k }, k))))] }))] }));
+};
+const renderFormatColumnScopeSummary = (data) => {
+    return (0, jsx_runtime_1.jsx)(FormatColumnScopeSummaryContent, { data: data });
 };
 exports.renderFormatColumnScopeSummary = renderFormatColumnScopeSummary;
+const FormatColumnColumnsScopeSummary = ({ data, }) => {
+    const adaptable = (0, AdaptableContext_1.useAdaptable)();
+    const scopeApi = adaptable.api.columnScopeApi;
+    const scope = data.Scope;
+    const columnsInScope = scopeApi.getColumnsInScope(scope);
+    if (scopeApi.scopeIsAll(scope)) {
+        return (0, jsx_runtime_1.jsx)(CollapsibleWizardCard_1.CollapsibleWizardValueSummary, { value: (0, jsx_runtime_1.jsx)(Tag_1.Tag, { children: "All columns in the row" }) });
+    }
+    if ('ColumnIds' in scope) {
+        return ((0, jsx_runtime_1.jsx)(CollapsibleWizardCard_1.CollapsibleWizardValueSummary, { value: columnsInScope.length ? ((0, jsx_runtime_1.jsx)(Flex_1.Flex, { flexWrap: "wrap", className: "twa:gap-1", children: columnsInScope.map((column) => ((0, jsx_runtime_1.jsx)(Tag_1.ColumnTag, { children: column.friendlyName }, column.columnId))) })) : ((0, jsx_runtime_1.jsx)(Tag_1.Tag, { children: "None" })) }));
+    }
+    if ('DataTypes' in scope) {
+        return ((0, jsx_runtime_1.jsx)(CollapsibleWizardCard_1.CollapsibleWizardValueSummary, { value: scope.DataTypes.length ? ((0, jsx_runtime_1.jsx)(Flex_1.Flex, { flexWrap: "wrap", className: "twa:gap-1", children: scope.DataTypes.map((dataType) => ((0, jsx_runtime_1.jsx)(Tag_1.Tag, { children: (0, AdaptableColumn_1.getColumnTypeFriendlyName)(dataType) }, dataType))) })) : ((0, jsx_runtime_1.jsx)(Tag_1.Tag, { children: "None" })) }));
+    }
+    return null;
+};
+const FormatColumnRowsScopeSummary = ({ data, }) => {
+    const includedKinds = collectIncludedRowKinds(data);
+    const allKinds = includedKinds.length === 4;
+    return ((0, jsx_runtime_1.jsx)(CollapsibleWizardCard_1.CollapsibleWizardValueSummary, { value: allKinds ? ((0, jsx_runtime_1.jsx)(Tag_1.Tag, { children: "All" })) : includedKinds.length === 0 ? ((0, jsx_runtime_1.jsx)(Tag_1.Tag, { children: "None" })) : ((0, jsx_runtime_1.jsx)(Flex_1.Flex, { flexWrap: "wrap", className: "twa:gap-1", children: includedKinds.map((kind) => ((0, jsx_runtime_1.jsx)(Tag_1.Tag, { children: ROW_KIND_LABELS[kind] }, kind))) })) }));
+};
+const FormatColumnRowScopePanel = ({ data, onRowKindChange, }) => ((0, jsx_runtime_1.jsx)(Flex_1.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) => ((0, jsx_runtime_1.jsx)(CheckBox_1.CheckBox, { "data-name": `include-${kind.toLowerCase()}-rows-checkbox`, checked: isRowKindIncluded(data, kind), onChange: (checked) => onRowKindChange(kind, checked), children: ROW_KIND_LABELS[kind] }, kind))) }));
 // ---------------------------------------------------------------------------
 // Section
 // ---------------------------------------------------------------------------
 const FormatColumnScopeWizardSection = (props) => {
     const { data, api } = (0, OnePageAdaptableWizard_1.useOnePageAdaptableWizardContext)();
+    const adaptable = (0, AdaptableContext_1.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 ((0, ColumnScope_1.isScopeColumnIds)(Scope) && Scope.ColumnIds.length > 1) {
                             return predicate.PredicateId !== 'In' && predicate.PredicateId !== 'NotIn';
                         }
@@ -87,12 +122,17 @@ const FormatColumnScopeWizardSection = (props) => {
         });
     };
     const showRowToggles = data.Target === 'cell';
-    return ((0, jsx_runtime_1.jsxs)(Flex_1.Flex, { flexDirection: "column", style: { height: '100%' }, children: [(0, jsx_runtime_1.jsxs)(Flex_1.Flex, { flexDirection: "column", className: "twa:flex-1 twa:min-h-0", children: [(0, jsx_runtime_1.jsxs)(Flex_1.Flex, { flexDirection: "row", alignItems: "center", className: "twa:p-2 twa:gap-3 twa:border-b twa:border-b-text-on-defaultbackground/20", children: [(0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:text-5 twa:font-medium", children: "Columns" }), (0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:text-xs twa:opacity-70", children: "Which Columns the Format Column will be applied to" })] }), (0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:flex-1 twa:min-h-0 twa:overflow-auto", children: (0, jsx_runtime_1.jsx)(NewScopeComponent_1.NewScopeComponent, { descriptions: {
-                                rowScope: 'Format all columns in the row',
-                                columnScope: 'Select columns to format',
-                            }, scope: data.Scope, updateScope: handleScopeChange }) })] }), showRowToggles && ((0, jsx_runtime_1.jsxs)(Flex_1.Box, { className: "twa:border-t twa:border-border twa:px-2 twa:py-3 twa:shrink-0", children: [(0, jsx_runtime_1.jsxs)(Flex_1.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: [(0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:text-5 twa:font-medium", children: "Rows" }), (0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:text-xs twa:opacity-70 twa:max-w-[520px]", children: "Which kinds of Rows the Format Column will be applied to" })] }), (0, jsx_runtime_1.jsx)(Flex_1.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) => ((0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:flex-1 twa:min-w-[220px]", children: (0, jsx_runtime_1.jsx)(FormLayout_1.default, { sizes: ['180px', '1fr'], children: rowKindGroup.map((kind) => ((0, jsx_runtime_1.jsx)(FormLayout_1.FormRow, { label: `${ROW_KIND_LABELS[kind]}:`, children: (0, jsx_runtime_1.jsx)(Flex_1.Flex, { alignItems: "center", className: "twa:ml-2", children: (0, jsx_runtime_1.jsx)(CheckBox_1.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 } = (0, CollapsibleWizardCard_1.useWizardCardAccordion)(initialExpandedCardId, { fillExpandedCard: true });
+    const columnsCompactSummary = scopeApi.scopeIsAll(scope) ? ((0, jsx_runtime_1.jsx)(Tag_1.Tag, { children: "All columns" })) : 'ColumnIds' in scope ? ((0, CollapsibleWizardCard_1.renderCompactColumnTags)(scope.ColumnIds, (columnId) => adaptable.api.columnApi.getFriendlyNameForColumnId(columnId), { emptyLabel: 'No columns' })) : 'DataTypes' in scope ? ((0, jsx_runtime_1.jsx)(Flex_1.Flex, { alignItems: "center", className: "twa:gap-1 twa:min-w-0 twa:overflow-hidden", children: scope.DataTypes.length ? (scope.DataTypes.map((dataType) => ((0, jsx_runtime_1.jsx)(Tag_1.Tag, { className: "twa:shrink-0", children: (0, AdaptableColumn_1.getColumnTypeFriendlyName)(dataType) }, dataType)))) : ((0, jsx_runtime_1.jsx)(Tag_1.Tag, { children: "None" })) })) : null;
+    const rowsCompactSummary = allRowKindsIncluded ? ((0, jsx_runtime_1.jsx)(Tag_1.Tag, { children: "All" })) : includedRowKinds.length === 0 ? ((0, jsx_runtime_1.jsx)(Tag_1.Tag, { children: "None" })) : ((0, jsx_runtime_1.jsx)(Flex_1.Flex, { alignItems: "center", className: "twa:gap-1 twa:min-w-0 twa:overflow-hidden", children: includedRowKinds.map((kind) => ((0, jsx_runtime_1.jsx)(Tag_1.Tag, { className: "twa:shrink-0", children: kind }, kind))) }));
+    return ((0, jsx_runtime_1.jsxs)(Flex_1.Box, { className: (0, utils_1.cn)((0, CollapsibleWizardCard_1.getWizardAccordionSectionClassName)(hasExpandedCard, expandedFillsSpace), 'twa:p-2'), children: [(0, jsx_runtime_1.jsx)(CollapsibleWizardCard_1.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: (0, jsx_runtime_1.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: (0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:flex-1 twa:min-h-0 twa:overflow-auto twa:h-full", children: (0, jsx_runtime_1.jsx)(NewScopeComponent_1.NewScopeComponent, { descriptions: {
+                            rowScope: 'Format all Columns in the Row',
+                            columnScope: 'Select Columns to format',
+                        }, scope: data.Scope, updateScope: handleScopeChange }) }) }), showRowToggles && ((0, jsx_runtime_1.jsx)(CollapsibleWizardCard_1.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: (0, jsx_runtime_1.jsx)(FormatColumnRowsScopeSummary, { data: data }), children: (0, jsx_runtime_1.jsx)(FormatColumnRowScopePanel, { data: data, onRowKindChange: handleRowKindChange }) }))] }));
 };
 exports.FormatColumnScopeWizardSection = FormatColumnScopeWizardSection;

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

@@ -12,7 +12,7 @@ const Card_1 = require("../../../components/Card");
 const Input_1 = tslib_1.__importDefault(require("../../../components/Input"));
 const TypeRadio_1 = require("../../Wizard/TypeRadio");
 const renderFormatColumnSettingsSummary = (data) => {
-    return ((0, jsx_runtime_1.jsxs)(Flex_1.Box, { className: "twa:p-2", children: [(0, jsx_runtime_1.jsxs)(Flex_1.Box, { className: "twa:mt-3", children: ["Name ", (0, jsx_runtime_1.jsx)(Tag_1.Tag, { children: data.Name })] }), (0, jsx_runtime_1.jsxs)(Flex_1.Box, { className: "twa:mt-3", children: ["Target", ' ', (0, jsx_runtime_1.jsx)(Tag_1.Tag, { children: !data.Target || data.Target === 'cell' ? 'Column Cells' : 'Column Header' })] }), ' ', (0, jsx_runtime_1.jsxs)(Flex_1.Box, { className: "twa:mt-3", children: ["Apply on Column Groups:", ' ', (0, jsx_runtime_1.jsx)(Tag_1.Tag, { children: !data.ColumnGroupScope || data.ColumnGroupScope === 'Both'
+    return ((0, jsx_runtime_1.jsxs)(Flex_1.Flex, { flexWrap: "wrap", alignItems: "center", className: "twa:gap-x-4 twa:gap-y-2", children: [(0, jsx_runtime_1.jsxs)(Flex_1.Box, { children: ["Name ", (0, jsx_runtime_1.jsx)(Tag_1.Tag, { children: data.Name })] }), (0, jsx_runtime_1.jsxs)(Flex_1.Box, { children: ["Target", ' ', (0, jsx_runtime_1.jsx)(Tag_1.Tag, { children: !data.Target || data.Target === 'cell' ? 'Column Cells' : 'Column Header' })] }), (0, jsx_runtime_1.jsxs)(Flex_1.Box, { children: ["Column Groups", ' ', (0, jsx_runtime_1.jsx)(Tag_1.Tag, { children: !data.ColumnGroupScope || data.ColumnGroupScope === 'Both'
                             ? 'Always'
                             : data.ColumnGroupScope })] })] }));
 };
@@ -62,7 +62,7 @@ const FormatColumnSettingsWizardSection = (props) => {
         });
     };
     const behaviourSpellingVariant = api.internalApi.getCorrectEnglishVariant('Behaviour');
-    return ((0, jsx_runtime_1.jsxs)(Flex_1.Flex, { flexDirection: "column", className: "twa:gap-3 twa:p-3", children: [(0, jsx_runtime_1.jsxs)(Card_1.Card, { shadow: false, children: [(0, jsx_runtime_1.jsxs)(Card_1.Card.Title, { children: [(0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:font-medium", children: "Name" }), (0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:text-xs twa:opacity-70 twa:font-normal twa:max-w-[520px]", children: "Provide a unique name for the Format Column" })] }), (0, jsx_runtime_1.jsx)(Card_1.Card.Body, { className: "twa:p-1", children: (0, jsx_runtime_1.jsx)(Input_1.default, { ref: nameInputRef, className: "twa:max-w-[300px] twa:w-full", "data-name": "format-column-name", onChange: onNameChange, value: data?.Name ?? '' }) })] }), (0, jsx_runtime_1.jsxs)(Card_1.Card, { shadow: false, children: [(0, jsx_runtime_1.jsxs)(Card_1.Card.Title, { children: [(0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:font-medium", children: "Target" }), (0, jsx_runtime_1.jsx)(Flex_1.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)" })] }), (0, jsx_runtime_1.jsx)(Card_1.Card.Body, { children: (0, jsx_runtime_1.jsxs)(Flex_1.Flex, { flexDirection: "column", children: [(0, jsx_runtime_1.jsx)(TypeRadio_1.TypeRadio, { "data-name": "target-column-cell", text: 'Column Cells', description: "", checked: currentTarget === 'cell', onClick: () => handleTargetChange('cell') }), (0, jsx_runtime_1.jsx)(TypeRadio_1.TypeRadio, { "data-name": "target-column-header", text: 'Column Header', description: "", checked: currentTarget === 'columnHeader', onClick: () => handleTargetChange('columnHeader') })] }) })] }), (0, jsx_runtime_1.jsxs)(Card_1.Card, { shadow: false, children: [(0, jsx_runtime_1.jsxs)(Card_1.Card.Title, { children: [(0, jsx_runtime_1.jsxs)(Flex_1.Box, { className: "twa:font-medium", children: ["Column Group ", behaviourSpellingVariant] }), (0, jsx_runtime_1.jsx)(Flex_1.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" })] }), (0, jsx_runtime_1.jsx)(Card_1.Card.Body, { children: (0, jsx_runtime_1.jsxs)(Radio_1.RadioGroup, { value: data.ColumnGroupScope || 'Both', name: "columnGroupScope", orientation: "horizontal", onRadioChange: (columnGroupScope) => {
+    return ((0, jsx_runtime_1.jsxs)(Flex_1.Flex, { flexDirection: "column", className: "twa:gap-3 twa:p-3", children: [(0, jsx_runtime_1.jsxs)(Card_1.Card, { shadow: false, children: [(0, jsx_runtime_1.jsxs)(Card_1.Card.Title, { children: [(0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:font-medium", children: "Name" }), (0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:text-xs twa:opacity-70 twa:font-normal twa:max-w-[520px]", children: "Provide a unique name for the Format Column" })] }), (0, jsx_runtime_1.jsx)(Card_1.Card.Body, { className: "twa:p-1", children: (0, jsx_runtime_1.jsx)(Input_1.default, { ref: nameInputRef, className: "twa:max-w-[300px] twa:w-full", "data-name": "format-column-name", onChange: onNameChange, value: data?.Name ?? '' }) })] }), (0, jsx_runtime_1.jsxs)(Card_1.Card, { shadow: false, children: [(0, jsx_runtime_1.jsxs)(Card_1.Card.Title, { children: [(0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:font-medium", children: "Target" }), (0, jsx_runtime_1.jsx)(Flex_1.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)" })] }), (0, jsx_runtime_1.jsx)(Card_1.Card.Body, { children: (0, jsx_runtime_1.jsxs)(Flex_1.Flex, { flexDirection: "column", children: [(0, jsx_runtime_1.jsx)(TypeRadio_1.TypeRadio, { "data-name": "target-column-cell", text: 'Column Cells', description: "", checked: currentTarget === 'cell', onClick: () => handleTargetChange('cell') }), (0, jsx_runtime_1.jsx)(TypeRadio_1.TypeRadio, { "data-name": "target-column-header", text: 'Column Header', description: "", checked: currentTarget === 'columnHeader', onClick: () => handleTargetChange('columnHeader') })] }) })] }), (0, jsx_runtime_1.jsxs)(Card_1.Card, { shadow: false, children: [(0, jsx_runtime_1.jsxs)(Card_1.Card.Title, { children: [(0, jsx_runtime_1.jsxs)(Flex_1.Box, { className: "twa:font-medium", children: ["Column Group ", behaviourSpellingVariant] }), (0, jsx_runtime_1.jsx)(Flex_1.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" })] }), (0, jsx_runtime_1.jsx)(Card_1.Card.Body, { children: (0, jsx_runtime_1.jsxs)(Radio_1.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,14 +1,17 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.renderFormatColumnStyleSummary = exports.renderFormatColumnStyleWizardSummary = exports.isFormatColumnStyleValid = void 0;
+exports.renderFormatColumnStyleSummary = exports.getFormatColumnStyleViewValues = exports.hasFormatColumnStyle = exports.isFormatColumnStyleValid = void 0;
 exports.FormatColumnStyleWizardSection = FormatColumnStyleWizardSection;
 const tslib_1 = require("tslib");
 const jsx_runtime_1 = require("react/jsx-runtime");
-const StyleHelper_1 = require("../../../Utilities/Helpers/StyleHelper");
 const StyleComponent_1 = require("../../Components/StyleComponent");
 const OnePageAdaptableWizard_1 = require("../../Wizard/OnePageAdaptableWizard");
 const UIHelper_1 = tslib_1.__importDefault(require("../../UIHelper"));
+const StringExtensions_1 = tslib_1.__importDefault(require("../../../Utilities/Extensions/StringExtensions"));
 const Flex_1 = require("../../../components/Flex");
+const Tag_1 = require("../../../components/Tag");
+const SummaryColorTag_1 = require("../../Wizard/SummaryColorTag");
+const FormatColumnPreview_1 = require("./FormatColumnPreview");
 const isFormatColumnStyleValid = (data, api) => {
     if (data.Style &&
         UIHelper_1.default.IsEmptyStyle(data.Style) &&
@@ -19,27 +22,71 @@ const isFormatColumnStyleValid = (data, api) => {
     return true;
 };
 exports.isFormatColumnStyleValid = isFormatColumnStyleValid;
-const toStyle = (data) => {
-    return {
-        ...(0, StyleHelper_1.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_1.default.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;
 };
-const renderFormatColumnStyleWizardSummary = (data) => {
-    const { api } = (0, OnePageAdaptableWizard_1.useOnePageAdaptableWizardContext)();
-    return (0, exports.renderFormatColumnStyleSummary)(data, api);
+const hasFormatColumnStyle = (formatColumn) => {
+    if (formatColumn.Style == null || UIHelper_1.default.IsEmptyStyle(formatColumn.Style)) {
+        return false;
+    }
+    return getFormatColumnStyleSummaryItems(formatColumn).length > 0;
 };
-exports.renderFormatColumnStyleWizardSummary = renderFormatColumnStyleWizardSummary;
-const renderFormatColumnStyleSummary = (data, api) => {
-    return ((0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "ab-FormatPreview twa:p-2", style: toStyle(data), children: "Preview result" }));
+exports.hasFormatColumnStyle = hasFormatColumnStyle;
+const getFormatColumnStyleViewValues = (formatColumn) => {
+    return (0, SummaryColorTag_1.summaryStringsToTagContents)(getFormatColumnStyleSummaryItems(formatColumn).map(({ label, value }) => `${label}: ${value}`));
+};
+exports.getFormatColumnStyleViewValues = getFormatColumnStyleViewValues;
+const renderFormatColumnStyleSummary = (data) => {
+    const hasStyle = data.Style != null && UIHelper_1.default.IsNotEmptyStyle(data.Style);
+    if (!hasStyle) {
+        return (0, jsx_runtime_1.jsx)(Tag_1.Tag, { children: "No Style" });
+    }
+    const items = getFormatColumnStyleSummaryItems(data);
+    if (!items.length) {
+        return (0, jsx_runtime_1.jsx)(Tag_1.Tag, { children: "No Style" });
+    }
+    return ((0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:grid twa:grid-cols-2 twa:gap-2", children: items.map(({ label, value }) => ((0, jsx_runtime_1.jsx)(Flex_1.Box, { children: (0, SummaryColorTag_1.isSummaryInTagLabel)(label) ? ((0, jsx_runtime_1.jsx)(Tag_1.Tag, { children: (0, SummaryColorTag_1.renderSummaryLabelValueTagContent)(label, value) })) : ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [label, " ", (0, jsx_runtime_1.jsx)(Tag_1.Tag, { children: value })] })) }, label))) }));
 };
 exports.renderFormatColumnStyleSummary = renderFormatColumnStyleSummary;
 function FormatColumnStyleWizardSection(props) {
     const { data, api } = (0, OnePageAdaptableWizard_1.useOnePageAdaptableWizardContext)();
-    return ((0, jsx_runtime_1.jsx)(StyleComponent_1.StyleComponent, { headless: true, api: api, Style: data.Style ?? {}, UpdateStyle: (Style) => {
+    const previewText = (0, FormatColumnPreview_1.getFormatColumnStylePreviewText)(data, api);
+    return ((0, jsx_runtime_1.jsx)(StyleComponent_1.StyleComponent, { headless: true, api: api, previewText: previewText, Style: data.Style ?? {}, UpdateStyle: (Style) => {
             props.onChange({ ...data, Style });
         } }));
 }

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

@@ -24,6 +24,7 @@ const constants_1 = require("./constants");
 const ObjectExtensions_1 = require("../../../Utilities/Extensions/ObjectExtensions");
 const AdaptableFormatPresets_1 = require("../../../AdaptableState/Common/AdaptableFormatPresets");
 const Flex_1 = require("../../../components/Flex");
+const FormatColumnPreview_1 = require("./FormatColumnPreview");
 const adjustDisplayFormat = (fc, api) => {
     const formatColumn = { ...fc };
     let formatDataType = (0, FormatColumnFormatWizardSection_1.getFormatDisplayTypeForScope)(formatColumn.Scope, api);
@@ -104,10 +105,7 @@ 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 &&
-            !(0, AdaptableFormatPresets_1.isAdaptableNumericFormatPreset)(df) &&
-            df.Options &&
-            (0, ObjectExtensions_1.isObjectEmpty)(df.Options)) {
+        if (df && !(0, AdaptableFormatPresets_1.isAdaptableNumericFormatPreset)(df) && df.Options && (0, ObjectExtensions_1.isObjectEmpty)(df.Options)) {
             delete formatColumn.DisplayFormat;
         }
         if (formatColumn.Style && (0, ObjectExtensions_1.isObjectEmpty)(formatColumn.Style)) {
@@ -144,9 +142,7 @@ function FormatColumnWizard(props) {
                 details: 'Select which Columns and Rows will be formatted',
                 isValid: NewScopeComponent_1.isScopeValid,
                 renderSummary: FormatColumnScopeWizardSection_1.renderFormatColumnScopeSummary,
-                render: () => {
-                    return ((0, jsx_runtime_1.jsx)(Flex_1.Flex, { flexDirection: "column", className: "twa:h-full", children: (0, jsx_runtime_1.jsx)(FormatColumnScopeWizardSection_1.FormatColumnScopeWizardSection, { onChange: setFormatColumn }) }));
-                },
+                render: () => (0, jsx_runtime_1.jsx)(FormatColumnScopeWizardSection_1.FormatColumnScopeWizardSection, { onChange: setFormatColumn }),
             },
             {
                 isValid: (abObject, api, context) => {
@@ -157,6 +153,7 @@ function FormatColumnWizard(props) {
                 },
                 title: 'Condition',
                 details: 'Build a Rule when the Format Column should be applied',
+                renderSummary: FormatColumnRuleWizardSection_1.renderFormatColumnConditionSummary,
                 render: () => {
                     return ((0, jsx_runtime_1.jsx)(FormatColumnRuleWizardSection_1.FormatColumnRuleWizardSection, { onChange: setFormatColumn, defaultPredicateId: constants_1.DEFAULT_PREDICATE_ID_FOR_FORMAT_COLUMN }));
                 },
@@ -165,7 +162,7 @@ function FormatColumnWizard(props) {
                 title: 'Style',
                 details: 'Create a Style',
                 isValid: FormatColumnStyleWizardSection_1.isFormatColumnStyleValid,
-                renderSummary: FormatColumnStyleWizardSection_1.renderFormatColumnStyleWizardSummary,
+                renderSummary: FormatColumnStyleWizardSection_1.renderFormatColumnStyleSummary,
                 render: () => {
                     return ((0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:p-2", children: (0, jsx_runtime_1.jsx)(FormatColumnStyleWizardSection_1.FormatColumnStyleWizardSection, { onChange: setFormatColumn }) }));
                 },
@@ -189,7 +186,7 @@ function FormatColumnWizard(props) {
             {
                 details: 'Review the Format Column',
                 render: () => {
-                    return ((0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:p-2", children: (0, jsx_runtime_1.jsx)(OnePageAdaptableWizard_1.OnePageWizardSummary, {}) }));
+                    return ((0, jsx_runtime_1.jsxs)(Flex_1.Box, { className: "twa:p-2 twa:flex twa:flex-col twa:gap-3", children: [(0, jsx_runtime_1.jsx)(OnePageAdaptableWizard_1.OnePageWizardSummary, {}), (0, jsx_runtime_1.jsx)(FormatColumnPreview_1.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,20 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getFreeTextColumnSettingsTags = void 0;
+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);
+};
+exports.getFreeTextColumnSettingsTags = getFreeTextColumnSettingsTags;

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,60 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.FreeTextColumnDefinitionWizardSection = exports.isValidFreeTextColumnDefinition = exports.renderFreeTextColumnDefinitionSummary = void 0;
+const tslib_1 = require("tslib");
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const Input_1 = tslib_1.__importDefault(require("../../../components/Input"));
+const Tag_1 = require("../../../components/Tag");
+const OnePageAdaptableWizard_1 = require("../../Wizard/OnePageAdaptableWizard");
+const Flex_1 = require("../../../components/Flex");
+const Card_1 = require("../../../components/Card");
+const renderFreeTextColumnDefinitionSummary = (data) => {
+    return ((0, jsx_runtime_1.jsxs)(Flex_1.Box, { className: "twa:text-2 twa:grid twa:items-center twa:grid-cols-[auto_1fr] twa:gap-2", children: [(0, jsx_runtime_1.jsx)(Flex_1.Box, { children: "Column Identifier:" }), (0, jsx_runtime_1.jsx)(Flex_1.Box, { children: (0, jsx_runtime_1.jsx)(Tag_1.Tag, { children: data.ColumnId }) }), data.FriendlyName ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(Flex_1.Box, { children: "Column Name:" }), (0, jsx_runtime_1.jsx)(Flex_1.Box, { children: (0, jsx_runtime_1.jsx)(Tag_1.Tag, { children: data.FriendlyName ?? data.ColumnId }) })] })) : null] }));
+};
+exports.renderFreeTextColumnDefinitionSummary = renderFreeTextColumnDefinitionSummary;
+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;
+};
+exports.isValidFreeTextColumnDefinition = isValidFreeTextColumnDefinition;
+const FreeTextColumnDefinitionWizardSection = (props) => {
+    const { data } = (0, OnePageAdaptableWizard_1.useOnePageAdaptableWizardContext)();
+    const [ColumnNameFocused, setColumnNameFocused] = (0, react_1.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 ((0, jsx_runtime_1.jsx)(Flex_1.Box, { "data-name": "free-text-column-definition", children: (0, jsx_runtime_1.jsxs)(Flex_1.Flex, { flexDirection: "column", className: "twa:gap-3 twa:p-3", children: [(0, jsx_runtime_1.jsxs)(Card_1.Card, { shadow: false, children: [(0, jsx_runtime_1.jsxs)(Card_1.Card.Title, { children: [(0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:font-medium", children: "Column Name" }), (0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:text-xs twa:opacity-70 twa:font-normal twa:max-w-[520px]", children: "Unique identifier for the Free Text Column" })] }), (0, jsx_runtime_1.jsx)(Card_1.Card.Body, { className: "twa:p-1", children: (0, jsx_runtime_1.jsx)(Input_1.default, { "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 }) })] }), (0, jsx_runtime_1.jsxs)(Card_1.Card, { shadow: false, children: [(0, jsx_runtime_1.jsxs)(Card_1.Card.Title, { children: [(0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:font-medium", children: "Column Header" }), (0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:text-xs twa:opacity-70 twa:font-normal twa:max-w-[520px]", children: "Optional display name shown in the grid header" })] }), (0, jsx_runtime_1.jsx)(Card_1.Card.Body, { className: "twa:p-1", children: (0, jsx_runtime_1.jsx)(Input_1.default, { "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 }) })] }), (0, jsx_runtime_1.jsxs)(Card_1.Card, { shadow: false, children: [(0, jsx_runtime_1.jsxs)(Card_1.Card.Title, { children: [(0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:font-medium", children: "Column Header Tooltip" }), (0, jsx_runtime_1.jsx)(Flex_1.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" })] }), (0, jsx_runtime_1.jsx)(Card_1.Card.Body, { className: "twa:p-1", children: (0, jsx_runtime_1.jsx)(Input_1.default, { "data-name": "header-tooltip", type: "text", className: "twa:max-w-[500px] twa:w-full", value: HeaderToolTip, onChange: (e) => handleSpecialColumnSettingsChange({
+                                    HeaderToolTip: e.target.value,
+                                }) }) })] })] }) }));
+};
+exports.FreeTextColumnDefinitionWizardSection = FreeTextColumnDefinitionWizardSection;

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;