@adaptabletools/adaptable 20.3.0-canary.2 → 20.3.0

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

@@ -2,11 +2,7 @@ import * as React from 'react';
 import { NewScopeComponent, renderScopeSummary } from '../../Components/NewScopeComponent';
 import { useOnePageAdaptableWizardContext } from '../../Wizard/OnePageAdaptableWizard';
 import { DEFAULT_PREDICATE_ID_FOR_FORMAT_COLUMN } from './constants';
-import { Tabs } from '../../../components/Tabs';
-import { Box, Flex } from 'rebass';
-import FormLayout, { FormRow } from '../../../components/FormLayout';
-import { CheckBox } from '../../../components/CheckBox';
-import HelpBlock from '../../../components/HelpBlock';
+import { Box } from 'rebass';
 export const renderFormatColumnScopeSummary = (data) => {
     return renderScopeSummary(data.Scope, {
         scopeWholeRow: 'Matching rows will be formatted',
@@ -16,42 +12,7 @@ export const renderFormatColumnScopeSummary = (data) => {
 };
 export const FormatColumnScopeWizardSection = (props) => {
     const { data, api } = useOnePageAdaptableWizardContext();
-    const currentTargets = data.Target?.length ? data.Target : ['cell'];
-    const handleTargetChange = (target, checked) => {
-        let newTargets;
-        if (checked) {
-            // Add the target if it's not already included
-            newTargets = [...new Set([...currentTargets, target])];
-        }
-        else {
-            // Remove the target
-            newTargets = currentTargets.filter((t) => t !== target);
-        }
-        // If all checkboxes are unchecked, default to ['cell']
-        if (newTargets.length === 0) {
-            newTargets = ['cell'];
-        }
-        // Update the formatColumn object
-        props.onChange({
-            ...data,
-            Target: newTargets,
-        });
-    };
     return (React.createElement(React.Fragment, null,
-        React.createElement(Tabs, { mb: 3 },
-            React.createElement(Tabs.Tab, null, "Target"),
-            React.createElement(Tabs.Content, null,
-                React.createElement(Flex, { flexDirection: "column" },
-                    React.createElement(FormLayout, { width: "100%" },
-                        React.createElement(FormRow, { label: "Target Column Elements: ", tooltip: "The visual elements where formatting will be applied" },
-                            React.createElement(CheckBox, { "data-name": "target-cell", checked: currentTargets.includes('cell'), onChange: (target) => {
-                                    handleTargetChange('cell', target);
-                                }, ml: 2 }, "Data Cells"),
-                            React.createElement(CheckBox, { "data-name": "target-column-header", checked: currentTargets.includes('columnHeader'), onChange: (target) => {
-                                    handleTargetChange('columnHeader', target);
-                                }, ml: 4 }, "Column Headers"))),
-                    React.createElement(HelpBlock, { fontSize: 2 }, 'At least one target element must be selected (defaults to Data Cells).' +
-                        ' Conditional formatting rules only apply to Data Cells, not to Headers.')))),
         React.createElement(Box, { "data-name": 'scope-heading', style: {
                 borderRadius: `var(--ab__border-radius)`,
             }, padding: 2, backgroundColor: `var(--ab-color-primarylight)` }, "Scope"),

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

@@ -83,29 +83,30 @@ export const FormatColumnSettingsWizardSection = (props) => {
         React.createElement(Tabs.Content, null,
             React.createElement(Flex, { flexDirection: "row" },
                 React.createElement(FormLayout, null,
-                    React.createElement(FormRow, { label: "Cell Alignment" },
-                        React.createElement(ToggleGroup, null,
-                            React.createElement(Toggle, { icon: "align-left", pressed: data.CellAlignment === 'Left', onPressedChange: (pressed) => pressed
-                                    ? onCellAlignmentSelectChanged('Left')
-                                    : onCellAlignmentSelectChanged(null) }),
-                            React.createElement(Toggle, { icon: "align-center", pressed: data.CellAlignment === 'Center', onPressedChange: (pressed) => pressed
-                                    ? onCellAlignmentSelectChanged('Center')
-                                    : onCellAlignmentSelectChanged(null) }),
-                            React.createElement(Toggle, { icon: "align-right", pressed: data.CellAlignment === 'Right', onPressedChange: (pressed) => pressed
-                                    ? onCellAlignmentSelectChanged('Right')
-                                    : onCellAlignmentSelectChanged(null) }))),
-                    React.createElement(FormRow, { label: "Exclude Data Rows:" },
-                        React.createElement(Flex, { alignItems: "center", marginLeft: 2 },
-                            React.createElement(CheckBox, { "data-name": "exclude-data-rows-checkbox", checked: data.RowScope?.ExcludeDataRows, onChange: onExcludeDataRowsChanged, mr: 2 }))),
-                    React.createElement(FormRow, { label: "Exclude Group Rows:" },
-                        React.createElement(Flex, { alignItems: "center", marginLeft: 2 },
-                            React.createElement(CheckBox, { "data-name": "exclude-grouped-rows-checkbox", checked: data.RowScope?.ExcludeGroupRows, onChange: onExcludeGroupedRowsChanged, mr: 2 }))),
-                    React.createElement(FormRow, { label: "Exclude Row Summaries:" },
-                        React.createElement(Flex, { alignItems: "center", marginLeft: 2 },
-                            React.createElement(CheckBox, { "data-name": "exclude-summary-rows-checkbox", checked: data.RowScope?.ExcludeSummaryRows, onChange: onExcludeSummaryRowsChanged, mr: 2 }))),
-                    React.createElement(FormRow, { label: "Exclude Total Rows:" },
-                        React.createElement(Flex, { alignItems: "center", marginLeft: 2 },
-                            React.createElement(CheckBox, { "data-name": "exclude-total-rows-checkbox", checked: data.RowScope?.ExcludeTotalRows, onChange: onExcludeTotalRowsChanged, mr: 2 }))),
+                    data.Target === 'cell' && (React.createElement(React.Fragment, null,
+                        React.createElement(FormRow, { label: "Cell Alignment" },
+                            React.createElement(ToggleGroup, null,
+                                React.createElement(Toggle, { icon: "align-left", pressed: data.CellAlignment === 'Left', onPressedChange: (pressed) => pressed
+                                        ? onCellAlignmentSelectChanged('Left')
+                                        : onCellAlignmentSelectChanged(null) }),
+                                React.createElement(Toggle, { icon: "align-center", pressed: data.CellAlignment === 'Center', onPressedChange: (pressed) => pressed
+                                        ? onCellAlignmentSelectChanged('Center')
+                                        : onCellAlignmentSelectChanged(null) }),
+                                React.createElement(Toggle, { icon: "align-right", pressed: data.CellAlignment === 'Right', onPressedChange: (pressed) => pressed
+                                        ? onCellAlignmentSelectChanged('Right')
+                                        : onCellAlignmentSelectChanged(null) }))),
+                        React.createElement(FormRow, { label: "Exclude Data Rows:" },
+                            React.createElement(Flex, { alignItems: "center", marginLeft: 2 },
+                                React.createElement(CheckBox, { "data-name": "exclude-data-rows-checkbox", checked: data.RowScope?.ExcludeDataRows, onChange: onExcludeDataRowsChanged, mr: 2 }))),
+                        React.createElement(FormRow, { label: "Exclude Group Rows:" },
+                            React.createElement(Flex, { alignItems: "center", marginLeft: 2 },
+                                React.createElement(CheckBox, { "data-name": "exclude-grouped-rows-checkbox", checked: data.RowScope?.ExcludeGroupRows, onChange: onExcludeGroupedRowsChanged, mr: 2 }))),
+                        React.createElement(FormRow, { label: "Exclude Row Summaries:" },
+                            React.createElement(Flex, { alignItems: "center", marginLeft: 2 },
+                                React.createElement(CheckBox, { "data-name": "exclude-summary-rows-checkbox", checked: data.RowScope?.ExcludeSummaryRows, onChange: onExcludeSummaryRowsChanged, mr: 2 }))),
+                        React.createElement(FormRow, { label: "Exclude Total Rows:" },
+                            React.createElement(Flex, { alignItems: "center", marginLeft: 2 },
+                                React.createElement(CheckBox, { "data-name": "exclude-total-rows-checkbox", checked: data.RowScope?.ExcludeTotalRows, onChange: onExcludeTotalRowsChanged, mr: 2 }))))),
                     React.createElement(FormRow, { label: "Apply on Column Group:" },
                         React.createElement(RadioGroup, { value: data.ColumnGroupScope || 'Both', name: "columnGroupScope", orientation: "horizontal", onRadioChange: (columnGroupScope) => {
                                 props.onChange({

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

@@ -0,0 +1,8 @@
+import * as React from 'react';
+import { FormatColumn } from '../../../AdaptableState/FormatColumnState';
+type FormatColumnScopeWizardSectionProps = {
+    onChange: (data: FormatColumn) => void;
+};
+export declare const renderFormatColumnTargetSummary: (data: FormatColumn) => "Column Header" | "Column Cells";
+export declare const FormatColumnTargetWizardSection: (props: FormatColumnScopeWizardSectionProps) => React.JSX.Element;
+export {};

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

@@ -0,0 +1,31 @@
+import * as React from 'react';
+import { useOnePageAdaptableWizardContext } from '../../Wizard/OnePageAdaptableWizard';
+import { Tabs } from '../../../components/Tabs';
+import { Flex } from 'rebass';
+import { TypeRadio } from '../../Wizard/TypeRadio';
+export const renderFormatColumnTargetSummary = (data) => {
+    if (!data.Target || data.Target === 'cell') {
+        return 'Column Cells';
+    }
+    if (data.Target === 'columnHeader') {
+        return 'Column Header';
+    }
+};
+export const FormatColumnTargetWizardSection = (props) => {
+    const { data, api } = useOnePageAdaptableWizardContext();
+    const currentTarget = data.Target ? data.Target : 'cell';
+    const handleTargetChange = (target) => {
+        // Update the formatColumn object
+        props.onChange({
+            ...data,
+            Target: target,
+        });
+    };
+    return (React.createElement(React.Fragment, null,
+        React.createElement(Tabs, { mb: 3 },
+            React.createElement(Tabs.Tab, null, "Target"),
+            React.createElement(Tabs.Content, null,
+                React.createElement(Flex, { flexDirection: "column" },
+                    React.createElement(TypeRadio, { "data-name": "target-column-cell", text: 'Column Cells', description: "Column Cells are styled and formatted", checked: currentTarget === 'cell', onClick: () => handleTargetChange('cell') }),
+                    React.createElement(TypeRadio, { "data-name": "target-column-header", text: 'Column Header', description: "The Column Header is styled (Note: Conditions are not available for Column Headers)", checked: currentTarget === 'columnHeader', onClick: () => handleTargetChange('columnHeader') }))))));
+};

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

@@ -17,9 +17,14 @@ import { isAdaptableRuleValid } from '../../Components/EntityRulesEditor/Utiliti
 import { FormatColumnRuleWizardSection } from './FormatColumnRuleWizardSection';
 import { DEFAULT_PREDICATE_ID_FOR_FORMAT_COLUMN } from './constants';
 import { isObjectEmpty } from '../../../Utilities/Extensions/ObjectExtensions';
-const adjustDisplayFormat = (formatColumn, api) => {
-    formatColumn = { ...formatColumn };
-    const formatDataType = getFormatDisplayTypeForScope(formatColumn.Scope, api);
+import { FormatColumnTargetWizardSection, renderFormatColumnTargetSummary, } from './FormatColumnTargetWizardSection';
+const adjustDisplayFormat = (fc, api) => {
+    const formatColumn = { ...fc };
+    let formatDataType = getFormatDisplayTypeForScope(formatColumn.Scope, api);
+    if (formatColumn.Target === 'columnHeader') {
+        // Column Headers are always text
+        formatDataType = 'text';
+    }
     if (!formatDataType && formatColumn.DisplayFormat) {
         formatColumn.DisplayFormat = undefined;
     }
@@ -88,7 +93,7 @@ export function FormatColumnWizard(props) {
     };
     return (React.createElement(OnePageAdaptableWizard, { defaultCurrentSectionName: props.defaultCurrentSectionName, moduleInfo: props.moduleInfo, data: formatColumn, onHide: props.onCloseWizard, onFinish: handleFinish, sections: [
             {
-                title: 'Scope & Target',
+                title: 'Scope',
                 details: 'Select which Columns will be formatted',
                 isValid: isScopeValid,
                 renderSummary: renderFormatColumnScopeSummary,
@@ -97,6 +102,15 @@ export function FormatColumnWizard(props) {
                         React.createElement(FormatColumnScopeWizardSection, { onChange: setFormatColumn })));
                 },
             },
+            {
+                title: 'Target',
+                details: 'Select which Columns Elements will be formatted',
+                renderSummary: renderFormatColumnTargetSummary,
+                render: () => {
+                    return (React.createElement(Flex, { flexDirection: "column", style: { height: '100%' }, padding: 2 },
+                        React.createElement(FormatColumnTargetWizardSection, { onChange: setFormatColumn })));
+                },
+            },
             {
                 isValid: (abObject, api, context) => {
                     if (!abObject.Rule) {

package/src/agGrid/AdaptableAgGrid.js

@@ -640,12 +640,15 @@ You need to define at least one Layout!`);
          */
         this.agGridOptionsService.setGridOptionsProperty(gridOptions, 'defaultColDef', (original_defaultColDef) => {
             if (original_defaultColDef?.headerValueGetter) {
-                this.logger.warn(`defaultColDef.headerValueGetter and overrides the Adaptable custom header mechanism! We recommend using a ColumnOptions.tableColumnHeader instead!`);
+                this.logger.warn(`defaultColDef.headerValueGetter and overrides the Adaptable custom header mechanism! We recommend using a ColumnOptions.columnHeader instead!`);
                 return original_defaultColDef;
             }
+            // #customize_header
             const defaultColDef = { ...original_defaultColDef };
             defaultColDef.headerValueGetter = tagProvidedByAdaptable((params) => {
-                return this.api.columnApi.internalApi.getColumnHeaderName(params);
+                const columnHeaderName = this.api.columnApi.internalApi.getColumnHeaderName(params);
+                const formattedHeaderName = this.api.formatColumnApi.internalApi.formatColumnHeaderName(columnHeaderName, params);
+                return formattedHeaderName;
             });
             return defaultColDef;
         });

package/src/agGrid/AgGridColumnAdapter.d.ts

@@ -29,7 +29,7 @@ export declare class AgGridColumnAdapter {
     private setupColumnAllowedAggFuncs;
     private setupColumnType;
     private setupColumnCellDataType;
-    setupColumnHeader({ col, abColumn }: ColumnSetupInfo): void;
+    setupColumnHeader({ col }: ColumnSetupInfo): void;
     private setupColumnFilter;
     setupColumnFloatingFilterTemporarily(initialGridOptions: GridOptions): void;
     private setupColumnFloatingFilter;

package/src/agGrid/AgGridColumnAdapter.js

@@ -134,8 +134,8 @@ export class AgGridColumnAdapter {
             this.setupColumnCellClass(colSetupInfo);
             this.setupColumnHeaderStyle(colSetupInfo);
             this.setupColumnHeaderClass(colSetupInfo);
-            this.setupColumnTooltipValueGetter(colSetupInfo);
             this.setupColumnValueGetter(colSetupInfo);
+            this.setupColumnTooltipValueGetter(colSetupInfo);
             this.setupColumnFilter(colSetupInfo);
             this.setupColumnFloatingFilter(colSetupInfo);
             this.setupColumnValueFormatter(colSetupInfo);
@@ -503,10 +503,11 @@ export class AgGridColumnAdapter {
             return original_cellDataType ?? true;
         });
     }
-    setupColumnHeader({ col, abColumn }) {
+    setupColumnHeader({ col }) {
         this.setColDefProperty(col, 'headerValueGetter', (original_headerValueGetter) => {
+            // see #customize_header
             if (!isProvidedByAdaptable(original_headerValueGetter)) {
-                this.adaptableApi.logWarn(`colDef.headerValueGetter is defined for column '${col.getColId()}', and overrides the Adaptable custom header mechanism! We recommend using a ColumnOptions.tableColumnHeader instead!`);
+                this.adaptableApi.logWarn(`colDef.headerValueGetter is defined for column '${col.getColId()}', and overrides the Adaptable custom header mechanism! We recommend using a ColumnOptions.columnHeader instead!`);
             }
             return original_headerValueGetter;
         });
@@ -597,7 +598,7 @@ export class AgGridColumnAdapter {
     }
     setupColumnValueFormatter({ col, abColumn }) {
         this.setColDefProperty(col, 'valueFormatter', (userPropertyValue) => {
-            const activeFormatColumnsWithDisplayFormat = this.adaptableApi.formatColumnApi.internalApi.getFormatColumnsWithDisplayFormatForColumn(abColumn);
+            const activeFormatColumnsWithDisplayFormat = this.adaptableApi.formatColumnApi.internalApi.getFormatColumnsWithDisplayFormatForColumn(abColumn, { target: 'cell' });
             if (!activeFormatColumnsWithDisplayFormat.length) {
                 return;
             }

package/src/agGrid/AgGridExportAdapter.js

@@ -477,7 +477,7 @@ export class AgGridExportAdapter {
                 return memoizedFormatColumns;
             }
             const abColumn = getAdaptableColumnWithColumnId(columnId);
-            const formatColumns = this.adaptableApi.formatColumnApi.internalApi.getFormatColumnsWithDisplayFormatForColumn(abColumn);
+            const formatColumns = this.adaptableApi.formatColumnApi.internalApi.getFormatColumnsWithDisplayFormatForColumn(abColumn, { target: 'cell' });
             formatColumnsWithDisplayFormatMemo[columnId] = formatColumns;
             return formatColumns;
         };

package/src/env.js

@@ -1,5 +1,5 @@
 export default {
     NEXT_PUBLIC_INFINITE_TABLE_LICENSE_KEY: "StartDate=2021-06-29|EndDate=2030-01-01|Owner=Adaptable|Type=distribution|TS=1624971462479|C=137829811,1004007071,2756196225,1839832928,3994409405,636616862" || '',
-    PUBLISH_TIMESTAMP: 1752841742262 || Date.now(),
-    VERSION: "20.3.0-canary.2" || '--current-version--',
+    PUBLISH_TIMESTAMP: 1753107517703 || Date.now(),
+    VERSION: "20.3.0" || '--current-version--',
 };

package/src/metamodel/adaptable.metamodel.d.ts

@@ -1480,6 +1480,16 @@ export declare const ADAPTABLE_METAMODEL: {
             desc: string;
         }[];
     };
+    AutoGroupColumnHeaderContext: {
+        name: string;
+        kind: string;
+        desc: string;
+        props: {
+            name: string;
+            kind: string;
+            desc: string;
+        }[];
+    };
     BadgeStyle: {
         name: string;
         kind: string;
@@ -2015,6 +2025,11 @@ export declare const ADAPTABLE_METAMODEL: {
         kind: string;
         desc: string;
     };
+    ColumnHeaderContext: {
+        name: string;
+        kind: string;
+        desc: string;
+    };
     ColumnMenuContext: {
         name: string;
         kind: string;
@@ -3670,7 +3685,7 @@ export declare const ADAPTABLE_METAMODEL: {
             desc: string;
             isOpt: boolean;
             defVal: string;
-            ref?: undefined;
+            ref: string;
         })[];
     };
     FormatColumnOptions: {
@@ -4526,6 +4541,46 @@ export declare const ADAPTABLE_METAMODEL: {
         kind: string;
         desc: string;
     };
+    PivotAggregationTotalHeaderContext: {
+        name: string;
+        kind: string;
+        desc: string;
+        props: {
+            name: string;
+            kind: string;
+            desc: string;
+        }[];
+    };
+    PivotColumnGroupHeaderContext: {
+        name: string;
+        kind: string;
+        desc: string;
+        props: {
+            name: string;
+            kind: string;
+            desc: string;
+        }[];
+    };
+    PivotColumnTotalHeaderContext: {
+        name: string;
+        kind: string;
+        desc: string;
+        props: {
+            name: string;
+            kind: string;
+            desc: string;
+        }[];
+    };
+    PivotGrandTotalHeaderContext: {
+        name: string;
+        kind: string;
+        desc: string;
+        props: {
+            name: string;
+            kind: string;
+            desc: string;
+        }[];
+    };
     PivotLayout: {
         name: string;
         kind: string;
@@ -4566,6 +4621,16 @@ export declare const ADAPTABLE_METAMODEL: {
             ref: string;
         })[];
     };
+    PivotResultColumnHeaderContext: {
+        name: string;
+        kind: string;
+        desc: string;
+        props: {
+            name: string;
+            kind: string;
+            desc: string;
+        }[];
+    };
     PivotTotalPosition: {
         name: string;
         kind: string;
@@ -5054,6 +5119,16 @@ export declare const ADAPTABLE_METAMODEL: {
         kind: string;
         desc: string;
     };
+    RowGroupColumnHeaderContext: {
+        name: string;
+        kind: string;
+        desc: string;
+        props: {
+            name: string;
+            kind: string;
+            desc: string;
+        }[];
+    };
     RowGroupValues: {
         name: string;
         kind: string;
@@ -5668,6 +5743,32 @@ export declare const ADAPTABLE_METAMODEL: {
         kind: string;
         desc: string;
     };
+    TableColumnGroupHeaderContext: {
+        name: string;
+        kind: string;
+        desc: string;
+        props: {
+            name: string;
+            kind: string;
+            desc: string;
+        }[];
+    };
+    TableColumnHeaderContext: {
+        name: string;
+        kind: string;
+        desc: string;
+        props: ({
+            name: string;
+            kind: string;
+            desc: string;
+            isOpt: boolean;
+        } | {
+            name: string;
+            kind: string;
+            desc: string;
+            isOpt?: undefined;
+        })[];
+    };
     TableLayout: {
         name: string;
         kind: string;