@adaptabletools/adaptable-cjs 20.3.0-canary.2 → 20.3.0

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

@@ -6,11 +6,7 @@ const React = tslib_1.__importStar(require("react"));
 const NewScopeComponent_1 = require("../../Components/NewScopeComponent");
 const OnePageAdaptableWizard_1 = require("../../Wizard/OnePageAdaptableWizard");
 const constants_1 = require("./constants");
-const Tabs_1 = require("../../../components/Tabs");
 const rebass_1 = require("rebass");
-const FormLayout_1 = tslib_1.__importStar(require("../../../components/FormLayout"));
-const CheckBox_1 = require("../../../components/CheckBox");
-const HelpBlock_1 = tslib_1.__importDefault(require("../../../components/HelpBlock"));
 const renderFormatColumnScopeSummary = (data) => {
     return (0, NewScopeComponent_1.renderScopeSummary)(data.Scope, {
         scopeWholeRow: 'Matching rows will be formatted',
@@ -21,42 +17,7 @@ const renderFormatColumnScopeSummary = (data) => {
 exports.renderFormatColumnScopeSummary = renderFormatColumnScopeSummary;
 const FormatColumnScopeWizardSection = (props) => {
     const { data, api } = (0, OnePageAdaptableWizard_1.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_1.Tabs, { mb: 3 },
-            React.createElement(Tabs_1.Tabs.Tab, null, "Target"),
-            React.createElement(Tabs_1.Tabs.Content, null,
-                React.createElement(rebass_1.Flex, { flexDirection: "column" },
-                    React.createElement(FormLayout_1.default, { width: "100%" },
-                        React.createElement(FormLayout_1.FormRow, { label: "Target Column Elements: ", tooltip: "The visual elements where formatting will be applied" },
-                            React.createElement(CheckBox_1.CheckBox, { "data-name": "target-cell", checked: currentTargets.includes('cell'), onChange: (target) => {
-                                    handleTargetChange('cell', target);
-                                }, ml: 2 }, "Data Cells"),
-                            React.createElement(CheckBox_1.CheckBox, { "data-name": "target-column-header", checked: currentTargets.includes('columnHeader'), onChange: (target) => {
-                                    handleTargetChange('columnHeader', target);
-                                }, ml: 4 }, "Column Headers"))),
-                    React.createElement(HelpBlock_1.default, { 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(rebass_1.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

@@ -88,29 +88,30 @@ const FormatColumnSettingsWizardSection = (props) => {
         React.createElement(Tabs_1.Tabs.Content, null,
             React.createElement(rebass_1.Flex, { flexDirection: "row" },
                 React.createElement(FormLayout_1.default, null,
-                    React.createElement(FormLayout_1.FormRow, { label: "Cell Alignment" },
-                        React.createElement(ToggleGroup_1.ToggleGroup, null,
-                            React.createElement(Toggle_1.Toggle, { icon: "align-left", pressed: data.CellAlignment === 'Left', onPressedChange: (pressed) => pressed
-                                    ? onCellAlignmentSelectChanged('Left')
-                                    : onCellAlignmentSelectChanged(null) }),
-                            React.createElement(Toggle_1.Toggle, { icon: "align-center", pressed: data.CellAlignment === 'Center', onPressedChange: (pressed) => pressed
-                                    ? onCellAlignmentSelectChanged('Center')
-                                    : onCellAlignmentSelectChanged(null) }),
-                            React.createElement(Toggle_1.Toggle, { icon: "align-right", pressed: data.CellAlignment === 'Right', onPressedChange: (pressed) => pressed
-                                    ? onCellAlignmentSelectChanged('Right')
-                                    : onCellAlignmentSelectChanged(null) }))),
-                    React.createElement(FormLayout_1.FormRow, { label: "Exclude Data Rows:" },
-                        React.createElement(rebass_1.Flex, { alignItems: "center", marginLeft: 2 },
-                            React.createElement(CheckBox_1.CheckBox, { "data-name": "exclude-data-rows-checkbox", checked: data.RowScope?.ExcludeDataRows, onChange: onExcludeDataRowsChanged, mr: 2 }))),
-                    React.createElement(FormLayout_1.FormRow, { label: "Exclude Group Rows:" },
-                        React.createElement(rebass_1.Flex, { alignItems: "center", marginLeft: 2 },
-                            React.createElement(CheckBox_1.CheckBox, { "data-name": "exclude-grouped-rows-checkbox", checked: data.RowScope?.ExcludeGroupRows, onChange: onExcludeGroupedRowsChanged, mr: 2 }))),
-                    React.createElement(FormLayout_1.FormRow, { label: "Exclude Row Summaries:" },
-                        React.createElement(rebass_1.Flex, { alignItems: "center", marginLeft: 2 },
-                            React.createElement(CheckBox_1.CheckBox, { "data-name": "exclude-summary-rows-checkbox", checked: data.RowScope?.ExcludeSummaryRows, onChange: onExcludeSummaryRowsChanged, mr: 2 }))),
-                    React.createElement(FormLayout_1.FormRow, { label: "Exclude Total Rows:" },
-                        React.createElement(rebass_1.Flex, { alignItems: "center", marginLeft: 2 },
-                            React.createElement(CheckBox_1.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(FormLayout_1.FormRow, { label: "Cell Alignment" },
+                            React.createElement(ToggleGroup_1.ToggleGroup, null,
+                                React.createElement(Toggle_1.Toggle, { icon: "align-left", pressed: data.CellAlignment === 'Left', onPressedChange: (pressed) => pressed
+                                        ? onCellAlignmentSelectChanged('Left')
+                                        : onCellAlignmentSelectChanged(null) }),
+                                React.createElement(Toggle_1.Toggle, { icon: "align-center", pressed: data.CellAlignment === 'Center', onPressedChange: (pressed) => pressed
+                                        ? onCellAlignmentSelectChanged('Center')
+                                        : onCellAlignmentSelectChanged(null) }),
+                                React.createElement(Toggle_1.Toggle, { icon: "align-right", pressed: data.CellAlignment === 'Right', onPressedChange: (pressed) => pressed
+                                        ? onCellAlignmentSelectChanged('Right')
+                                        : onCellAlignmentSelectChanged(null) }))),
+                        React.createElement(FormLayout_1.FormRow, { label: "Exclude Data Rows:" },
+                            React.createElement(rebass_1.Flex, { alignItems: "center", marginLeft: 2 },
+                                React.createElement(CheckBox_1.CheckBox, { "data-name": "exclude-data-rows-checkbox", checked: data.RowScope?.ExcludeDataRows, onChange: onExcludeDataRowsChanged, mr: 2 }))),
+                        React.createElement(FormLayout_1.FormRow, { label: "Exclude Group Rows:" },
+                            React.createElement(rebass_1.Flex, { alignItems: "center", marginLeft: 2 },
+                                React.createElement(CheckBox_1.CheckBox, { "data-name": "exclude-grouped-rows-checkbox", checked: data.RowScope?.ExcludeGroupRows, onChange: onExcludeGroupedRowsChanged, mr: 2 }))),
+                        React.createElement(FormLayout_1.FormRow, { label: "Exclude Row Summaries:" },
+                            React.createElement(rebass_1.Flex, { alignItems: "center", marginLeft: 2 },
+                                React.createElement(CheckBox_1.CheckBox, { "data-name": "exclude-summary-rows-checkbox", checked: data.RowScope?.ExcludeSummaryRows, onChange: onExcludeSummaryRowsChanged, mr: 2 }))),
+                        React.createElement(FormLayout_1.FormRow, { label: "Exclude Total Rows:" },
+                            React.createElement(rebass_1.Flex, { alignItems: "center", marginLeft: 2 },
+                                React.createElement(CheckBox_1.CheckBox, { "data-name": "exclude-total-rows-checkbox", checked: data.RowScope?.ExcludeTotalRows, onChange: onExcludeTotalRowsChanged, mr: 2 }))))),
                     React.createElement(FormLayout_1.FormRow, { label: "Apply on Column Group:" },
                         React.createElement(Radio_1.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,37 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.FormatColumnTargetWizardSection = exports.renderFormatColumnTargetSummary = void 0;
+const tslib_1 = require("tslib");
+const React = tslib_1.__importStar(require("react"));
+const OnePageAdaptableWizard_1 = require("../../Wizard/OnePageAdaptableWizard");
+const Tabs_1 = require("../../../components/Tabs");
+const rebass_1 = require("rebass");
+const TypeRadio_1 = require("../../Wizard/TypeRadio");
+const renderFormatColumnTargetSummary = (data) => {
+    if (!data.Target || data.Target === 'cell') {
+        return 'Column Cells';
+    }
+    if (data.Target === 'columnHeader') {
+        return 'Column Header';
+    }
+};
+exports.renderFormatColumnTargetSummary = renderFormatColumnTargetSummary;
+const FormatColumnTargetWizardSection = (props) => {
+    const { data, api } = (0, OnePageAdaptableWizard_1.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_1.Tabs, { mb: 3 },
+            React.createElement(Tabs_1.Tabs.Tab, null, "Target"),
+            React.createElement(Tabs_1.Tabs.Content, null,
+                React.createElement(rebass_1.Flex, { flexDirection: "column" },
+                    React.createElement(TypeRadio_1.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_1.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') }))))));
+};
+exports.FormatColumnTargetWizardSection = FormatColumnTargetWizardSection;

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

@@ -21,9 +21,14 @@ const Utilities_1 = require("../../Components/EntityRulesEditor/Utilities");
 const FormatColumnRuleWizardSection_1 = require("./FormatColumnRuleWizardSection");
 const constants_1 = require("./constants");
 const ObjectExtensions_1 = require("../../../Utilities/Extensions/ObjectExtensions");
-const adjustDisplayFormat = (formatColumn, api) => {
-    formatColumn = { ...formatColumn };
-    const formatDataType = (0, FormatColumnFormatWizardSection_1.getFormatDisplayTypeForScope)(formatColumn.Scope, api);
+const FormatColumnTargetWizardSection_1 = require("./FormatColumnTargetWizardSection");
+const adjustDisplayFormat = (fc, api) => {
+    const formatColumn = { ...fc };
+    let formatDataType = (0, FormatColumnFormatWizardSection_1.getFormatDisplayTypeForScope)(formatColumn.Scope, api);
+    if (formatColumn.Target === 'columnHeader') {
+        // Column Headers are always text
+        formatDataType = 'text';
+    }
     if (!formatDataType && formatColumn.DisplayFormat) {
         formatColumn.DisplayFormat = undefined;
     }
@@ -92,7 +97,7 @@ function FormatColumnWizard(props) {
     };
     return (React.createElement(OnePageAdaptableWizard_1.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: NewScopeComponent_1.isScopeValid,
                 renderSummary: FormatColumnScopeWizardSection_1.renderFormatColumnScopeSummary,
@@ -101,6 +106,15 @@ function FormatColumnWizard(props) {
                         React.createElement(FormatColumnScopeWizardSection_1.FormatColumnScopeWizardSection, { onChange: setFormatColumn })));
                 },
             },
+            {
+                title: 'Target',
+                details: 'Select which Columns Elements will be formatted',
+                renderSummary: FormatColumnTargetWizardSection_1.renderFormatColumnTargetSummary,
+                render: () => {
+                    return (React.createElement(rebass_1.Flex, { flexDirection: "column", style: { height: '100%' }, padding: 2 },
+                        React.createElement(FormatColumnTargetWizardSection_1.FormatColumnTargetWizardSection, { onChange: setFormatColumn })));
+                },
+            },
             {
                 isValid: (abObject, api, context) => {
                     if (!abObject.Rule) {

package/src/agGrid/AdaptableAgGrid.js

@@ -644,12 +644,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 = (0, adaptableOverrideCheck_1.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

@@ -139,8 +139,8 @@ 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);
@@ -508,10 +508,11 @@ class AgGridColumnAdapter {
             return original_cellDataType ?? true;
         });
     }
-    setupColumnHeader({ col, abColumn }) {
+    setupColumnHeader({ col }) {
         this.setColDefProperty(col, 'headerValueGetter', (original_headerValueGetter) => {
+            // see #customize_header
             if (!(0, adaptableOverrideCheck_1.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;
         });
@@ -602,7 +603,7 @@ 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

@@ -481,7 +481,7 @@ 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

@@ -2,6 +2,6 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.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: 1752841771489 || Date.now(),
-    VERSION: "20.3.0-canary.2" || '--current-version--',
+    PUBLISH_TIMESTAMP: 1753107549084 || 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;