@adaptabletools/adaptable-cjs 23.0.0-canary.5 → 23.0.0-canary.7

package/src/View/Layout/Wizard/sections/PivotAggregationsSection.js

@@ -4,27 +4,70 @@ exports.PivotAggregationsSection = exports.PivotAggregationsSectionSummary = exp
 const tslib_1 = require("tslib");
 const jsx_runtime_1 = require("react/jsx-runtime");
 const React = tslib_1.__importStar(require("react"));
-const CheckBox_1 = require("../../../../components/CheckBox");
-const DropdownButton_1 = tslib_1.__importDefault(require("../../../../components/DropdownButton"));
-const FormLayout_1 = tslib_1.__importStar(require("../../../../components/FormLayout"));
 const Card_1 = require("../../../../components/Card");
 const Tag_1 = require("../../../../components/Tag");
 const AggregationColumns_1 = require("../../../../AdaptableState/Common/AggregationColumns");
 const AdaptableContext_1 = require("../../../AdaptableContext");
 const ValueSelector_1 = require("../../../Components/ValueSelector");
 const OnePageAdaptableWizard_1 = require("../../../Wizard/OnePageAdaptableWizard");
+const CollapsibleWizardCard_1 = require("../../../Wizard/CollapsibleWizardCard");
+const TypeRadio_1 = require("../../../Wizard/TypeRadio");
+const layoutWizardAccordionHelpers_1 = require("./layoutWizardAccordionHelpers");
 const Utilities_1 = require("./Utilities");
 const ColumnGroupTag_1 = require("../../../Components/ColumnGroupTag");
 const ArrayExtensions_1 = tslib_1.__importDefault(require("../../../../Utilities/Extensions/ArrayExtensions"));
-const StringExtensions_1 = tslib_1.__importDefault(require("../../../../Utilities/Extensions/StringExtensions"));
 const Flex_1 = require("../../../../components/Flex");
 const NewSelect_1 = require("../../../../components/NewSelect");
+const Radio_1 = tslib_1.__importStar(require("../../../../components/Radio"));
+const layoutWizardColumns_1 = require("./layoutWizardColumns");
+const aggregationSummaryHelpers_1 = require("../../../../Strategy/Utilities/Layout/aggregationSummaryHelpers");
+const SummaryColorTag_1 = require("../../../Wizard/SummaryColorTag");
+const AggregationsSection_1 = require("./AggregationsSection");
+const PIVOT_LAYOUT_TOTAL_LABELS = {
+    off: 'None',
+    before: 'Before',
+    after: 'After',
+};
+const PIVOT_LAYOUT_TOTAL_DESCRIPTIONS = {
+    off: 'Pivot totals are not displayed in the grid',
+    before: 'Pivot totals are displayed before the value columns',
+    after: 'Pivot totals are displayed after the value columns',
+};
+const PIVOT_LAYOUT_TOTAL_OPTIONS = ['off', 'before', 'after'];
+function getPivotLayoutTotalKey(value) {
+    if (value == null || value === false) {
+        return 'off';
+    }
+    if (value === 'before') {
+        return 'before';
+    }
+    if (value === 'after') {
+        return 'after';
+    }
+    return 'off';
+}
+function getPivotLayoutTotalLabel(value) {
+    return PIVOT_LAYOUT_TOTAL_LABELS[getPivotLayoutTotalKey(value)];
+}
+function getAggregationTotalSelectValue(total) {
+    if (!total) {
+        return 'off';
+    }
+    if (total === true || total === 'before') {
+        return 'before';
+    }
+    if (total === 'after') {
+        return 'after';
+    }
+    if (Array.isArray(total)) {
+        return 'pivot-specific';
+    }
+    return 'off';
+}
 const PivotColumnRow = (props) => {
     const adaptable = (0, AdaptableContext_1.useAdaptable)();
     const aggValue = (props.layout.PivotAggregationColumns || []).find((x) => x.ColumnId === props.column.columnId)?.AggFunc;
-    // Weighted Average is not supported in Pivot Layouts, so only the standard
-    // AG Grid aggregation functions are offered here.
-    const aggFunctionNames = props.column.availableAggregationFunctions || [];
+    const aggFunctionNames = (props.column.availableAggregationFunctions || []).filter((fnName) => !(0, AggregationColumns_1.isWeightedAverageAggFuncName)(fnName));
     const currentAggFnName = props.aggregationColumnsMap[props.column.columnId];
     const updateAggFunc = (fnName) => {
         let aggCols = [...(props.layout.PivotAggregationColumns || [])];
@@ -49,52 +92,39 @@ const PivotColumnRow = (props) => {
         }
         props.onChangeAggFunction(aggCols);
     };
-    const totalOptions = ['Off', 'Before', 'After', 'Pivot Specific'].map((totalVariant) => {
-        return {
-            label: totalVariant,
-            onClick: () => {
-                let aggCols = props.layout.PivotAggregationColumns;
-                if (!aggCols) {
-                    return;
+    const currentAggCol = props.layout.PivotAggregationColumns?.find((aggCol) => aggCol.ColumnId === props.column.columnId);
+    const currentTotalSelectValue = getAggregationTotalSelectValue(currentAggCol?.Total);
+    const handleTotalSelectChange = (totalVariant) => {
+        let aggCols = props.layout.PivotAggregationColumns;
+        if (!aggCols) {
+            return;
+        }
+        aggCols = aggCols.map((aggCol) => {
+            if (aggCol.ColumnId === props.column.columnId) {
+                let updatedTotal = false;
+                if (totalVariant === 'before') {
+                    updatedTotal = 'before';
+                }
+                else if (totalVariant === 'after') {
+                    updatedTotal = 'after';
                 }
-                aggCols = aggCols.map((aggCol) => {
-                    if (aggCol.ColumnId === props.column.columnId) {
-                        let updatedTotalColumn = false;
-                        if (totalVariant === 'Before') {
-                            updatedTotalColumn = 'before';
-                        }
-                        if (totalVariant === 'After') {
-                            updatedTotalColumn = 'after';
-                        }
-                        if (totalVariant === 'Pivot Specific') {
-                            updatedTotalColumn = props.layout.PivotColumns.map((pivotColId) => {
-                                return {
-                                    PivotColumnId: pivotColId,
-                                    ShowTotal: true,
-                                };
-                            });
-                        }
+                else if (totalVariant === 'pivot-specific') {
+                    updatedTotal = props.layout.PivotColumns.map((pivotColId) => {
                         return {
-                            ...aggCol,
-                            Total: updatedTotalColumn,
+                            PivotColumnId: pivotColId,
+                            ShowTotal: true,
                         };
-                    }
-                    return aggCol;
-                });
-                props.onChangeAggFunction(aggCols);
-            },
-        };
-    });
-    const currentAggCol = props.layout.PivotAggregationColumns?.find((aggCol) => aggCol.ColumnId === props.column.columnId);
-    const currentTotal = currentAggCol?.Total
-        ? currentAggCol.Total === true || currentAggCol.Total === 'before'
-            ? 'Before'
-            : currentAggCol.Total === 'after'
-                ? 'After'
-                : Array.isArray(currentAggCol.Total)
-                    ? 'Pivot Specific'
-                    : 'Off'
-        : 'Off';
+                    });
+                }
+                return {
+                    ...aggCol,
+                    Total: updatedTotal,
+                };
+            }
+            return aggCol;
+        });
+        props.onChangeAggFunction(aggCols);
+    };
     const hasPivotSpecificTotals = Array.isArray(currentAggCol?.Total);
     const pivotSpecificTotals = Array.isArray(currentAggCol?.Total)
         ? currentAggCol.Total
@@ -102,7 +132,7 @@ const PivotColumnRow = (props) => {
             PivotColumnId: pivotColId,
             ShowTotal: false,
         }));
-    const handleTotalChange = (pivotColId, value) => {
+    const handlePivotSpecificTotalChange = (pivotColId, value) => {
         const updatedAggCols = (props.layout.PivotAggregationColumns || []).map((aggCol) => {
             if (aggCol.ColumnId === props.column.columnId) {
                 const updatedTotals = pivotSpecificTotals.map((total) => {
@@ -117,35 +147,38 @@ const PivotColumnRow = (props) => {
         });
         props.onChangeAggFunction(updatedAggCols);
     };
-    const pivotTotalOptions = ['Off', 'Before', 'After'].map((option) => ({
-        label: option,
-        value: option === 'Off' ? false : option.toLowerCase(),
-    }));
-    return ((0, jsx_runtime_1.jsx)(Flex_1.Box, { "data-name": props.column.columnId, className: "ab-Layout-Wizard__ColumnRow", children: (0, jsx_runtime_1.jsxs)(Flex_1.Flex, { alignItems: "flex-start", children: [(0, jsx_runtime_1.jsxs)(Flex_1.Flex, { className: "twa:flex-[0_0_auto]", alignItems: "center", children: [(0, jsx_runtime_1.jsx)(Flex_1.Flex, { className: "twa:min-w-[80px]", children: props.column.friendlyName }), (0, jsx_runtime_1.jsx)(ColumnGroupTag_1.ColumnGroupTag, { column: props.column }), aggValue && ((0, jsx_runtime_1.jsx)(NewSelect_1.SingleSelect, { className: "twa:min-w-[140px] twa:ml-2", value: currentAggFnName, items: aggFunctionNames.map((fnName) => ({
-                                label: fnName,
-                                value: fnName,
-                            })), onValueChange: updateAggFunc })), aggValue && ((0, jsx_runtime_1.jsxs)(Flex_1.Flex, { className: "twa:bg-primary twa:ml-3", alignItems: "center", children: [(0, jsx_runtime_1.jsx)(Flex_1.Box, { children: "Total" }), ' ', (0, jsx_runtime_1.jsx)(DropdownButton_1.default, { columns: ['label'], items: totalOptions, className: "twa:ml-2", children: currentTotal })] }))] }), hasPivotSpecificTotals && ((0, jsx_runtime_1.jsx)(Flex_1.Flex, { className: "twa:ml-2 twa:pl-2 twa:flex-[1_1_auto] twa:min-w-[200px]", flexWrap: "wrap", alignItems: "center", style: {
-                        borderLeft: '1px solid var(--ab-color-primary-foreground)',
-                        rowGap: '8px',
-                        columnGap: '12px',
-                    }, children: props.layout.PivotColumns.map((pivotColId) => {
-                        const pivotTotalSetting = pivotSpecificTotals.find((t) => t.PivotColumnId === pivotColId);
-                        const currentValue = pivotTotalSetting == undefined
-                            ? 'Off'
-                            : pivotTotalSetting.ShowTotal === false
-                                ? 'Off'
-                                : pivotTotalSetting.ShowTotal === 'before' ||
-                                    pivotTotalSetting.ShowTotal === true ||
-                                    pivotTotalSetting.ShowTotal == undefined
-                                    ? 'Before'
-                                    : pivotTotalSetting.ShowTotal === 'after'
-                                        ? 'After'
-                                        : 'Off';
-                        return ((0, jsx_runtime_1.jsxs)(Flex_1.Flex, { alignItems: "center", children: [(0, jsx_runtime_1.jsxs)(Flex_1.Box, { className: "twa:mr-1", children: [adaptable.api.columnApi.getFriendlyNameForColumnId(pivotColId), ":"] }), (0, jsx_runtime_1.jsx)(DropdownButton_1.default, { columns: ['label'], items: pivotTotalOptions.map((opt) => ({
-                                        label: opt.label,
-                                        onClick: () => handleTotalChange(pivotColId, opt.value),
-                                    })), children: currentValue })] }, pivotColId));
-                    }) }))] }) }));
+    const getPivotSpecificTotalSelectValue = (showTotal) => {
+        if (showTotal === false || showTotal == undefined) {
+            return 'off';
+        }
+        if (showTotal === 'before' || showTotal === true) {
+            return 'before';
+        }
+        if (showTotal === 'after') {
+            return 'after';
+        }
+        return 'off';
+    };
+    return ((0, jsx_runtime_1.jsxs)(Flex_1.Flex, { alignItems: "flex-start", flexDirection: "column", className: "twa:min-w-0 twa:gap-y-1 twa:gap-x-1.5", children: [(0, jsx_runtime_1.jsxs)(Flex_1.Flex, { alignItems: "center", flexWrap: "wrap", className: "twa:min-w-0 twa:gap-x-1.5 twa:gap-y-0.5", children: [(0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:truncate", children: props.column.friendlyName }), (0, jsx_runtime_1.jsx)(ColumnGroupTag_1.ColumnGroupTag, { column: props.column }), aggValue && ((0, jsx_runtime_1.jsx)(NewSelect_1.SingleSelect, { size: "small", stopMouseDownPropagation: true, className: "twa:min-w-[6.5rem] twa:shrink-0", value: currentAggFnName, items: aggFunctionNames.map((fnName) => ({
+                            label: fnName,
+                            value: fnName,
+                        })), onValueChange: updateAggFunc })), aggValue && ((0, jsx_runtime_1.jsxs)(Flex_1.Flex, { alignItems: "center", className: "twa:gap-1 twa:shrink-0", children: [(0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:text-3", children: "Total" }), (0, jsx_runtime_1.jsx)(NewSelect_1.SingleSelect, { size: "small", stopMouseDownPropagation: true, className: "twa:min-w-[6.5rem]", value: currentTotalSelectValue, items: [
+                                    { label: 'Off', value: 'off' },
+                                    { label: 'Before', value: 'before' },
+                                    { label: 'After', value: 'after' },
+                                    { label: 'Pivot Specific', value: 'pivot-specific' },
+                                ], onValueChange: handleTotalSelectChange })] }))] }), hasPivotSpecificTotals && ((0, jsx_runtime_1.jsx)(Flex_1.Flex, { flexWrap: "wrap", alignItems: "center", className: "twa:gap-x-2 twa:gap-y-1 twa:pl-2", style: { borderLeft: '1px solid var(--ab-color-primary-foreground)' }, children: props.layout.PivotColumns.map((pivotColId) => {
+                    const pivotTotalSetting = pivotSpecificTotals.find((t) => t.PivotColumnId === pivotColId);
+                    const pivotTotalValue = getPivotSpecificTotalSelectValue(pivotTotalSetting?.ShowTotal);
+                    return ((0, jsx_runtime_1.jsxs)(Flex_1.Flex, { alignItems: "center", className: "twa:gap-1 twa:shrink-0", children: [(0, jsx_runtime_1.jsxs)(Flex_1.Box, { className: "twa:text-3 twa:truncate", children: [adaptable.api.columnApi.getFriendlyNameForColumnId(pivotColId), ":"] }), (0, jsx_runtime_1.jsx)(NewSelect_1.SingleSelect, { size: "small", stopMouseDownPropagation: true, className: "twa:min-w-[5.5rem]", value: pivotTotalValue, items: [
+                                    { label: 'Off', value: 'off' },
+                                    { label: 'Before', value: 'before' },
+                                    { label: 'After', value: 'after' },
+                                ], onValueChange: (value) => {
+                                    const mappedValue = value === 'off' ? false : value;
+                                    handlePivotSpecificTotalChange(pivotColId, mappedValue);
+                                } })] }, pivotColId));
+                }) }))] }));
 };
 const isPivotAggregationsSectionValid = (data) => {
     const weightedAvg = data.PivotAggregationColumns
@@ -159,18 +192,15 @@ const isPivotAggregationsSectionValid = (data) => {
     return true;
 };
 exports.isPivotAggregationsSectionValid = isPivotAggregationsSectionValid;
-const PivotAggregationsSectionSummary = () => {
+const PivotAggregationsSectionSummary = (props) => {
     const adaptable = (0, AdaptableContext_1.useAdaptable)();
-    const { data: layout } = (0, OnePageAdaptableWizard_1.useOnePageAdaptableWizardContext)();
-    const pivotAggregationColumns = layout.PivotAggregationColumns || [];
-    let content = null;
-    if (pivotAggregationColumns.length) {
-        content = ((0, jsx_runtime_1.jsx)(FormLayout_1.default, { children: pivotAggregationColumns.map(({ ColumnId: colId, AggFunc: aggFunc }) => ((0, jsx_runtime_1.jsx)(FormLayout_1.FormRow, { label: adaptable.api.columnApi.getFriendlyNameForColumnId(colId), children: (0, jsx_runtime_1.jsx)(Tag_1.Tag, { children: typeof aggFunc === 'object' ? aggFunc.type : aggFunc }) }, colId))) }));
+    const { data: contextLayout } = (0, OnePageAdaptableWizard_1.useOnePageAdaptableWizardContext)();
+    const layout = props.layout ?? contextLayout;
+    const values = (0, aggregationSummaryHelpers_1.getPivotAggregationSummaryValues)(layout, adaptable.api);
+    if (!values.length) {
+        return (0, jsx_runtime_1.jsx)(Tag_1.Tag, { children: "No Aggregations" });
     }
-    else {
-        content = (0, jsx_runtime_1.jsx)(Tag_1.Tag, { children: "No Pivot Column Aggregations" });
-    }
-    return (0, jsx_runtime_1.jsx)(Flex_1.Box, { children: content });
+    return (0, SummaryColorTag_1.renderSummaryStringTags)(values);
 };
 exports.PivotAggregationsSectionSummary = PivotAggregationsSectionSummary;
 const PivotAggregationsSection = (props) => {
@@ -184,11 +214,11 @@ const PivotAggregationsSection = (props) => {
     const handleColumnsSelectionChange = React.useCallback((columnIds) => {
         const currentAggColumns = layout.PivotAggregationColumns ?? [];
         const PivotAggregationColumns = columnIds.map((colId) => {
+            const existing = currentAggColumns.find((x) => x.ColumnId === colId);
             return {
                 ColumnId: colId,
-                AggFunc: currentAggColumns.find((x) => x.ColumnId === colId)?.AggFunc ??
-                    adaptable.api.columnApi.getDefaultAggFunc(colId),
-                TotalColumn: currentAggColumns.find((x) => x.ColumnId === colId)?.Total,
+                AggFunc: existing?.AggFunc ?? adaptable.api.columnApi.getDefaultAggFunc(colId),
+                Total: existing?.Total,
             };
         });
         props.onChange({
@@ -197,14 +227,14 @@ const PivotAggregationsSection = (props) => {
         });
     }, [layout]);
     const handleAggregationChange = React.useCallback((pivotAggregationColumns) => {
-        if (pivotAggregationColumns.some((aggCol) => aggCol.Total !== false || aggCol.Total !== null)) {
-            // if any Aggregation Column has a Total Column, we need to disable the Pivot Group Total Column
-            delete layout['PivotColumnTotal'];
-        }
-        props.onChange({
+        const updatedLayout = {
             ...layout,
             PivotAggregationColumns: pivotAggregationColumns,
-        });
+        };
+        if (pivotAggregationColumns.some((aggCol) => aggCol.Total !== false && aggCol.Total != null)) {
+            delete updatedLayout.PivotColumnTotal;
+        }
+        props.onChange(updatedLayout);
     }, [layout]);
     const aggregationColumnsMap = React.useMemo(() => {
         const allColumnsMap = allColumns.reduce((acc, col) => {
@@ -234,7 +264,6 @@ const PivotAggregationsSection = (props) => {
         });
     };
     const checkIfPivotColumnTotalEnabled = () => {
-        // check that all AggregationColumns have identical AggFuncs
         const aggregationColumns = layout.PivotAggregationColumns;
         if (!aggregationColumns || aggregationColumns.length === 0) {
             return true;
@@ -243,7 +272,6 @@ const PivotAggregationsSection = (props) => {
         if (layout.PivotAggregationColumns?.some((aggCol) => (0, AggregationColumns_1.getAggFuncName)(aggCol.AggFunc) !== firstAggFuncName)) {
             return 'All columns must use the same aggregation function.';
         }
-        // check that no Aggregation Total Column is enabled
         const hasAggregationTotalColumn = aggregationColumns.some((aggCol) => aggCol.Total !== false && aggCol.Total != null);
         if (hasAggregationTotalColumn) {
             return 'This option is not available when an Aggregation Total Column is present.';
@@ -251,47 +279,22 @@ const PivotAggregationsSection = (props) => {
         return true;
     };
     const isPivotColumnTotalEnabled = checkIfPivotColumnTotalEnabled();
-    return ((0, jsx_runtime_1.jsxs)(Flex_1.Box, { className: "twa:h-full twa:min-h-0 twa:p-2 twa:gap-2 twa:overflow-hidden twa:grid twa:grid-cols-2", children: [(0, jsx_runtime_1.jsxs)(Card_1.Card, { shadow: false, className: "twa:h-full twa:overflow-hidden twa:flex twa:flex-col", children: [(0, jsx_runtime_1.jsxs)(Card_1.Card.Title, { children: [(0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:font-medium", children: "Aggregation Columns" }), (0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:text-xs twa:opacity-70 twa:font-normal twa:max-w-[520px]", children: "Select a column and an aggregation function" })] }), (0, jsx_runtime_1.jsx)(Card_1.Card.Body, { className: "twa:flex-1 twa:min-h-0 twa:overflow-hidden twa:p-1", children: (0, jsx_runtime_1.jsx)(ValueSelector_1.ValueSelector, { style: { minHeight: 0 }, showFilterInput: true, filter: Utilities_1.columnFilter, toIdentifier: (option) => `${option.columnId}`, toLabel: (option) => option.friendlyName ?? option.columnId, toListLabel: (column) => ((0, jsx_runtime_1.jsx)(PivotColumnRow, { onChangeAggFunction: handleAggregationChange, layout: layout, column: column, aggregationColumnsMap: aggregationColumnsMap })), options: sortedAggregableColumns, value: (layout.PivotAggregationColumns || []).map((col) => col.ColumnId), allowReorder: true, onChange: handleColumnsSelectionChange }) })] }), (0, jsx_runtime_1.jsxs)(Flex_1.Box, { className: "twa:h-full twa:min-h-0 twa:overflow-y-auto twa:flex twa:flex-col twa:gap-2", children: [(0, jsx_runtime_1.jsxs)(Card_1.Card, { shadow: false, children: [(0, jsx_runtime_1.jsx)(Card_1.Card.Title, { children: (0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:font-medium", children: "Omit Aggregation from Header" }) }), (0, jsx_runtime_1.jsx)(Card_1.Card.Body, { className: "twa:p-1", children: (0, jsx_runtime_1.jsx)(CheckBox_1.CheckBox, { checked: layout.SuppressAggFuncInHeader, onChange: handleSuppressAggFuncInHeader, children: "Do not show aggregation function names in column headers" }) })] }), (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: "Grand Total Row" }), (0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:text-xs twa:opacity-70 twa:font-normal twa:max-w-[520px]", children: "Set position of the grand total row in the grid" })] }), (0, jsx_runtime_1.jsx)(Card_1.Card.Body, { className: "twa:p-1", children: (0, jsx_runtime_1.jsx)(NewSelect_1.SingleSelect, { className: "twa:w-[180px]", items: [
-                                        {
-                                            label: 'Off',
-                                            value: null,
-                                        },
-                                    ].concat(['top', 'bottom', 'pinnedTop', 'pinnedBottom'].map((position) => {
-                                        return {
-                                            label: StringExtensions_1.default.CamelCaseToHumanText(position),
-                                            value: position,
-                                        };
-                                    })), placeholder: "Off", value: layout.GrandTotalRow, onValueChange: (value) => {
-                                        props.onChange({
-                                            ...layout,
-                                            GrandTotalRow: value,
-                                        });
-                                    } }) })] }), (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: "Pivot Grand Total" }), (0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:text-xs twa:opacity-70 twa:font-normal twa:max-w-[520px]", children: "Set position of pivot grand total columns" })] }), (0, jsx_runtime_1.jsx)(Card_1.Card.Body, { className: "twa:p-1", children: (0, jsx_runtime_1.jsx)(NewSelect_1.SingleSelect, { className: "twa:w-[180px]", items: [
-                                        { label: 'Off', value: null },
-                                        ...['before', 'after'].map((position) => {
-                                            return {
-                                                label: StringExtensions_1.default.CapitaliseFirstLetter(position),
-                                                value: position,
-                                            };
-                                        }),
-                                    ], placeholder: "Off", value: layout.PivotGrandTotal, onValueChange: (value) => {
-                                        props.onChange({
-                                            ...layout,
-                                            PivotGrandTotal: value,
-                                        });
-                                    } }) })] }), (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: "Pivot Column Total" }), (0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:text-xs twa:opacity-70 twa:font-normal twa:max-w-[520px]", children: "Set position of pivot column totals" })] }), (0, jsx_runtime_1.jsx)(Card_1.Card.Body, { className: "twa:p-1", children: isPivotColumnTotalEnabled === true ? ((0, jsx_runtime_1.jsx)(NewSelect_1.SingleSelect, { className: "twa:w-[180px]", items: [
-                                        { label: 'Off', value: null },
-                                        ...['before', 'after'].map((position) => {
-                                            return {
-                                                label: StringExtensions_1.default.CapitaliseFirstLetter(position),
-                                                value: position,
-                                            };
-                                        }),
-                                    ], placeholder: "Off", value: layout.PivotColumnTotal, onValueChange: (value) => {
-                                        props.onChange({
-                                            ...layout,
-                                            PivotColumnTotal: value,
-                                        });
-                                    } })) : ((0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:text-xs twa:opacity-70 twa:italic", children: isPivotColumnTotalEnabled })) })] })] })] }));
+    const aggregationEntries = layout.PivotAggregationColumns || [];
+    const initialExpandedCardId = (0, layoutWizardAccordionHelpers_1.getLayoutWizardInitialExpandedCardId)(props.layoutWizardMode, 'aggregation-columns', (0, layoutWizardAccordionHelpers_1.isPivotAggregationsSectionConfigured)(layout));
+    const { bindCard, hasExpandedCard, expandedFillsSpace } = (0, CollapsibleWizardCard_1.useWizardCardAccordion)(initialExpandedCardId);
+    const handlePivotLayoutTotalChange = (field, key) => {
+        props.onChange({
+            ...layout,
+            [field]: key === 'off' ? null : key,
+        });
+    };
+    return ((0, jsx_runtime_1.jsxs)(Flex_1.Box, { className: (0, CollapsibleWizardCard_1.getWizardAccordionSectionClassName)(hasExpandedCard, expandedFillsSpace), children: [(0, jsx_runtime_1.jsx)(CollapsibleWizardCard_1.CollapsibleWizardCard, { ...bindCard('aggregation-columns', { fillAvailable: true }), surface: "panel", "data-name": "aggregation-columns", title: "Aggregation Columns", help: "Select a column and an aggregation function", collapsedHelp: "", compactSummary: (0, CollapsibleWizardCard_1.renderCompactColumnTags)(aggregationEntries.map(({ ColumnId }) => ColumnId), (columnId) => adaptable.api.columnApi.getFriendlyNameForColumnId(columnId), { emptyLabel: 'No columns' }), summary: aggregationEntries.length ? ((0, jsx_runtime_1.jsx)(Flex_1.Flex, { flexWrap: "wrap", className: "twa:gap-1", children: aggregationEntries.map(({ ColumnId, AggFunc }) => ((0, jsx_runtime_1.jsxs)(Tag_1.ColumnTag, { children: [adaptable.api.columnApi.getFriendlyNameForColumnId(ColumnId), " (", (0, AggregationsSection_1.getAggFuncSummaryLabel)(ColumnId, AggFunc, aggregationColumnsMap), ")"] }, ColumnId))) })) : ((0, jsx_runtime_1.jsx)(Tag_1.Tag, { children: "No columns" })), children: (0, jsx_runtime_1.jsx)(Card_1.Card, { shadow: false, className: "twa:h-full twa:overflow-hidden twa:flex twa:flex-col", children: (0, jsx_runtime_1.jsx)(Card_1.Card.Body, { className: "", children: (0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:flex twa:flex-col twa:min-h-0", "data-name": "aggregation-columns-container", children: (0, jsx_runtime_1.jsx)(ValueSelector_1.ValueSelector, { style: { minHeight: 0 }, compact: true, showFilterInput: true, filter: Utilities_1.columnFilter, filterPlaceholder: "Search Columns...", compactHeaderClassName: layoutWizardColumns_1.LAYOUT_WIZARD_COLUMN_LIST_HEADER_CLASS, compactFilterClassName: layoutWizardColumns_1.LAYOUT_WIZARD_COLUMN_LIST_SEARCH_CLASS, optionLayout: "label-beside-checkbox", toggleSelectionOnRowClick: true, optionClassName: layoutWizardColumns_1.LAYOUT_WIZARD_COLUMN_LIST_OPTION_CLASS, toIdentifier: (option) => `${option.columnId}`, toLabel: (option) => option.friendlyName ?? option.columnId, toListLabel: (column) => ((0, jsx_runtime_1.jsx)(PivotColumnRow, { onChangeAggFunction: handleAggregationChange, layout: layout, column: column, aggregationColumnsMap: aggregationColumnsMap })), options: sortedAggregableColumns, value: aggregationEntries.map((agg) => agg.ColumnId), allowReorder: () => true, onChange: handleColumnsSelectionChange }) }) }) }) }), (0, jsx_runtime_1.jsx)(CollapsibleWizardCard_1.CollapsibleWizardCard, { ...bindCard('suppress-header'), surface: "panel", "data-name": "omit-aggregation-from-header", title: "Aggregation Column Header", help: "Set behaviour for aggregation function names", collapsedHelp: "Behaviour for aggregation function names", compactSummary: (0, jsx_runtime_1.jsx)(Tag_1.Tag, { children: layout.SuppressAggFuncInHeader ? 'Hide Function Name' : 'Show Function Name' }), summary: (0, jsx_runtime_1.jsx)(CollapsibleWizardCard_1.CollapsibleWizardValueSummary, { value: (0, jsx_runtime_1.jsx)(Tag_1.Tag, { children: layout.SuppressAggFuncInHeader ? 'Hide Function Name' : 'Show Function Name' }) }), children: (0, jsx_runtime_1.jsxs)(Radio_1.RadioGroup, { orientation: "vertical", value: layout.SuppressAggFuncInHeader ?? false, onRadioChange: handleSuppressAggFuncInHeader, children: [(0, jsx_runtime_1.jsx)(Radio_1.default, { value: false, children: "Show Aggregation function names" }), (0, jsx_runtime_1.jsx)(Radio_1.default, { value: true, children: "Hide Aggregation function names" })] }) }), (0, jsx_runtime_1.jsx)(CollapsibleWizardCard_1.CollapsibleWizardCard, { ...bindCard('grand-total'), surface: "panel", "data-name": "grand-total-row", title: "Grand Total Row", help: "Set position of the Grand Total Row in the grid", collapsedHelp: "Position of the Grand Total Row in the grid", compactSummary: (0, jsx_runtime_1.jsx)(Tag_1.Tag, { children: (0, AggregationsSection_1.getGrandTotalRowLabel)(layout) }), summary: (0, jsx_runtime_1.jsx)(CollapsibleWizardCard_1.CollapsibleWizardValueSummary, { value: (0, jsx_runtime_1.jsx)(Tag_1.Tag, { children: (0, AggregationsSection_1.getGrandTotalRowLabel)(layout) }) }), children: (0, jsx_runtime_1.jsx)(Radio_1.RadioGroup, { orientation: "vertical", value: (0, AggregationsSection_1.getGrandTotalRowKey)(layout), onRadioChange: (key) => {
+                        props.onChange({
+                            ...layout,
+                            GrandTotalRow: key === 'off' ? null : key,
+                        });
+                    }, children: AggregationsSection_1.GRAND_TOTAL_ROW_OPTIONS.map((key) => ((0, jsx_runtime_1.jsx)(TypeRadio_1.TypeRadio, { value: key, text: AggregationsSection_1.GRAND_TOTAL_ROW_LABELS[key], description: AggregationsSection_1.GRAND_TOTAL_ROW_DESCRIPTIONS[key] }, key))) }) }), (0, jsx_runtime_1.jsx)(CollapsibleWizardCard_1.CollapsibleWizardCard, { ...bindCard('pivot-grand-total'), surface: "panel", "data-name": "pivot-grand-total", title: "Pivot Grand Total", help: "Set position of pivot grand total columns", compactSummary: (0, jsx_runtime_1.jsx)(Tag_1.Tag, { children: getPivotLayoutTotalLabel(layout.PivotGrandTotal) }), summary: (0, jsx_runtime_1.jsx)(CollapsibleWizardCard_1.CollapsibleWizardValueSummary, { value: (0, jsx_runtime_1.jsx)(Tag_1.Tag, { children: getPivotLayoutTotalLabel(layout.PivotGrandTotal) }) }), children: (0, jsx_runtime_1.jsx)(Radio_1.RadioGroup, { orientation: "vertical", value: getPivotLayoutTotalKey(layout.PivotGrandTotal), onRadioChange: (key) => handlePivotLayoutTotalChange('PivotGrandTotal', key), children: PIVOT_LAYOUT_TOTAL_OPTIONS.map((key) => ((0, jsx_runtime_1.jsx)(TypeRadio_1.TypeRadio, { value: key, text: PIVOT_LAYOUT_TOTAL_LABELS[key], description: PIVOT_LAYOUT_TOTAL_DESCRIPTIONS[key] }, key))) }) }), (0, jsx_runtime_1.jsx)(CollapsibleWizardCard_1.CollapsibleWizardCard, { ...bindCard('pivot-column-total'), surface: "panel", "data-name": "pivot-column-total", title: "Pivot Column Total", help: "Set position of pivot column totals within each pivot column group", compactSummary: (0, jsx_runtime_1.jsx)(Tag_1.Tag, { children: isPivotColumnTotalEnabled === true
+                        ? getPivotLayoutTotalLabel(layout.PivotColumnTotal)
+                        : 'Not available' }), summary: isPivotColumnTotalEnabled === true ? ((0, jsx_runtime_1.jsx)(CollapsibleWizardCard_1.CollapsibleWizardValueSummary, { value: (0, jsx_runtime_1.jsx)(Tag_1.Tag, { children: getPivotLayoutTotalLabel(layout.PivotColumnTotal) }) })) : ((0, jsx_runtime_1.jsx)(Tag_1.Tag, { children: isPivotColumnTotalEnabled })), children: isPivotColumnTotalEnabled === true ? ((0, jsx_runtime_1.jsx)(Radio_1.RadioGroup, { orientation: "vertical", value: getPivotLayoutTotalKey(layout.PivotColumnTotal), onRadioChange: (key) => handlePivotLayoutTotalChange('PivotColumnTotal', key), children: PIVOT_LAYOUT_TOTAL_OPTIONS.map((key) => ((0, jsx_runtime_1.jsx)(TypeRadio_1.TypeRadio, { value: key, text: PIVOT_LAYOUT_TOTAL_LABELS[key], description: PIVOT_LAYOUT_TOTAL_DESCRIPTIONS[key] }, key))) })) : ((0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:text-xs twa:opacity-70 twa:italic", children: isPivotColumnTotalEnabled })) })] }));
 };
 exports.PivotAggregationsSection = PivotAggregationsSection;

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

@@ -1,8 +1,11 @@
 import * as React from 'react';
-import { PivotLayout } from '../../../../types';
-export declare const PivotColumnsSectionSummary: React.FunctionComponent;
+import { Layout, PivotLayout } from '../../../../types';
+export declare const PivotColumnsSectionSummary: React.FunctionComponent<{
+    layout?: Layout;
+}>;
 interface PivotColumnsSectionProps {
     onChange: (data: PivotLayout) => void;
+    layoutWizardMode?: 'create' | 'edit';
 }
 export declare const PivotColumnsSection: React.FunctionComponent<PivotColumnsSectionProps>;
 export {};

package/src/View/Layout/Wizard/sections/PivotColumnsSection.js

@@ -8,16 +8,24 @@ const Tag_1 = require("../../../../components/Tag");
 const AdaptableContext_1 = require("../../../AdaptableContext");
 const ValueSelector_1 = require("../../../Components/ValueSelector");
 const OnePageAdaptableWizard_1 = require("../../../Wizard/OnePageAdaptableWizard");
+const layoutWizardAccordionHelpers_1 = require("./layoutWizardAccordionHelpers");
 const Utilities_1 = require("./Utilities");
+const ColumnGroupTag_1 = require("../../../Components/ColumnGroupTag");
 const ArrayExtensions_1 = tslib_1.__importDefault(require("../../../../Utilities/Extensions/ArrayExtensions"));
 const Flex_1 = require("../../../../components/Flex");
 const CheckBox_1 = require("../../../../components/CheckBox");
-const HelpBlock_1 = tslib_1.__importDefault(require("../../../../components/HelpBlock"));
 const Card_1 = require("../../../../components/Card");
-const PivotColumnsSectionSummary = () => {
+const CollapsibleWizardCard_1 = require("../../../Wizard/CollapsibleWizardCard");
+const layoutWizardColumns_1 = require("./layoutWizardColumns");
+const SortSection_1 = require("./SortSection");
+const columnsSummaryHelpers_1 = require("../../../../Strategy/Utilities/Layout/columnsSummaryHelpers");
+const SummaryColorTag_1 = require("../../../Wizard/SummaryColorTag");
+const PivotColumnsSectionSummary = (props) => {
     const adaptable = (0, AdaptableContext_1.useAdaptable)();
-    const { data: layout } = (0, OnePageAdaptableWizard_1.useOnePageAdaptableWizardContext)();
-    return ((0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:p-2 twa:rounded-standard twa:bg-background", children: layout.PivotColumns?.length ? (layout.PivotColumns.map((columnId) => ((0, jsx_runtime_1.jsx)(Tag_1.Tag, { className: "twa:mr-1", children: adaptable.api.columnApi.getFriendlyNameForColumnId(columnId) }, columnId)))) : ((0, jsx_runtime_1.jsx)(Tag_1.Tag, { children: "No Pivot Columns Defined" })) }));
+    const { data: contextLayout } = (0, OnePageAdaptableWizard_1.useOnePageAdaptableWizardContext)();
+    const layout = props.layout ?? contextLayout;
+    const sortValues = (0, columnsSummaryHelpers_1.getTableColumnsSortingSummaryValues)(layout, adaptable.api);
+    return ((0, jsx_runtime_1.jsxs)(Flex_1.Flex, { flexDirection: "column", className: "twa:gap-3", children: [(0, jsx_runtime_1.jsxs)(Flex_1.Box, { children: [(0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:text-xs twa:font-medium twa:mb-1", children: "Pivot Columns" }), (0, jsx_runtime_1.jsx)(Flex_1.Flex, { flexDirection: "row", flexWrap: "wrap", className: "twa:gap-1", children: layout.PivotColumns?.length ? (layout.PivotColumns.map((columnId) => ((0, jsx_runtime_1.jsx)(Tag_1.ColumnTag, { children: adaptable.api.columnApi.getFriendlyNameForColumnId(columnId) }, columnId)))) : ((0, jsx_runtime_1.jsx)(Tag_1.Tag, { children: "No Pivot Columns Defined" })) })] }), sortValues.length ? ((0, jsx_runtime_1.jsxs)(Flex_1.Box, { children: [(0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:text-xs twa:font-medium twa:mb-1", children: "Sorting" }), (0, SummaryColorTag_1.renderSummaryStringTags)(sortValues)] })) : null] }));
 };
 exports.PivotColumnsSectionSummary = PivotColumnsSectionSummary;
 const PivotColumnsSection = (props) => {
@@ -33,11 +41,15 @@ const PivotColumnsSection = (props) => {
             PivotColumns: columnIds,
         });
     };
-    return ((0, jsx_runtime_1.jsxs)(Flex_1.Box, { className: "twa:h-full twa:min-h-0 twa:p-2 twa:gap-2 twa:overflow-hidden twa:grid twa:grid-cols-2", children: [(0, jsx_runtime_1.jsxs)(Card_1.Card, { shadow: false, className: "twa:h-full twa:overflow-hidden twa:flex twa:flex-col", children: [(0, jsx_runtime_1.jsxs)(Card_1.Card.Title, { children: [(0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:font-medium", children: "Pivot Columns" }), (0, jsx_runtime_1.jsxs)(Flex_1.Box, { className: "twa:text-xs twa:opacity-70 twa:font-normal twa:max-w-[520px]", children: ["Select and order the columns used as pivot columns", ' '] })] }), (0, jsx_runtime_1.jsx)(Card_1.Card.Body, { className: "twa:flex-1 twa:min-h-0 twa:overflow-hidden twa:p-1", children: (0, jsx_runtime_1.jsx)(ValueSelector_1.ValueSelector, { style: { minHeight: 0 }, showFilterInput: true, filter: Utilities_1.columnFilter, toIdentifier: (option) => `${option.columnId}`, toLabel: (option) => option.friendlyName ?? option.columnId, options: sortedPivotColumns, value: layout.PivotColumns ?? [], allowReorder: true, onChange: handleColumnsChange }) })] }), (0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:h-full twa:min-h-0 twa:overflow-y-auto twa:flex twa:flex-col twa:gap-2", 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: "Pivot Result Columns" }), (0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:text-xs twa:opacity-70 twa:font-normal twa:max-w-[520px]", children: "Configure layout persistence behaviour" })] }), (0, jsx_runtime_1.jsxs)(Card_1.Card.Body, { className: "twa:p-1", children: [(0, jsx_runtime_1.jsx)(CheckBox_1.CheckBox, { checked: !!layout.PivotResultColumnsOrder, onChange: (checked) => {
-                                        props.onChange({
-                                            ...layout,
-                                            PivotResultColumnsOrder: checked,
-                                        });
-                                    }, children: "Persist order of pivot result columns" }), (0, jsx_runtime_1.jsx)(HelpBlock_1.default, { className: "twa:mt-2", children: "Result columns are created dynamically for each value in the pivot column" })] })] }) })] }));
+    const persistPivotResultOrder = !!layout.PivotResultColumnsOrder;
+    const layoutSupportedFeatures = adaptable.api.layoutApi.internalApi.getLayoutSupportedFeatures();
+    const initialExpandedCardId = (0, layoutWizardAccordionHelpers_1.getLayoutWizardInitialExpandedCardId)(props.layoutWizardMode, 'pivot-columns', (0, layoutWizardAccordionHelpers_1.isPivotColumnsSectionConfigured)(layout));
+    const { bindCard, hasExpandedCard, expandedFillsSpace } = (0, CollapsibleWizardCard_1.useWizardCardAccordion)(initialExpandedCardId);
+    return ((0, jsx_runtime_1.jsxs)(Flex_1.Box, { className: (0, CollapsibleWizardCard_1.getWizardAccordionSectionClassName)(hasExpandedCard, expandedFillsSpace), children: [(0, jsx_runtime_1.jsx)(CollapsibleWizardCard_1.CollapsibleWizardCard, { ...bindCard('pivot-columns', { fillAvailable: true }), surface: "panel", "data-name": "pivot-columns", title: "Pivot Columns", help: "Select and order the columns used as pivot columns", collapsedHelp: "", compactSummary: (0, CollapsibleWizardCard_1.renderCompactColumnTags)(layout.PivotColumns ?? [], (columnId) => adaptable.api.columnApi.getFriendlyNameForColumnId(columnId), { emptyLabel: 'No columns' }), summary: layout.PivotColumns?.length ? ((0, jsx_runtime_1.jsx)(Flex_1.Flex, { flexWrap: "wrap", className: "twa:gap-1", children: layout.PivotColumns.map((columnId) => ((0, jsx_runtime_1.jsx)(Tag_1.ColumnTag, { children: adaptable.api.columnApi.getFriendlyNameForColumnId(columnId) }, columnId))) })) : ((0, jsx_runtime_1.jsx)(Tag_1.Tag, { children: "No columns" })), 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 ", children: (0, jsx_runtime_1.jsx)(Card_1.Card, { shadow: false, className: "twa:h-full", children: (0, jsx_runtime_1.jsx)(Card_1.Card.Body, { children: (0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:flex twa:flex-col twa:gap-1.5 twa:h-full twa:overflow-hidden twa:flex-1 twa:min-h-0", "data-name": "pivot-columns-container", children: (0, jsx_runtime_1.jsx)(ValueSelector_1.ValueSelector, { compact: true, showFilterInput: true, filter: Utilities_1.columnFilter, filterPlaceholder: "Search Columns...", compactHeaderClassName: layoutWizardColumns_1.LAYOUT_WIZARD_COLUMN_LIST_HEADER_CLASS, compactFilterClassName: layoutWizardColumns_1.LAYOUT_WIZARD_COLUMN_LIST_SEARCH_CLASS, hideShowSelectedOnly: true, optionLayout: "label-beside-checkbox", toggleSelectionOnRowClick: true, optionClassName: layoutWizardColumns_1.LAYOUT_WIZARD_COLUMN_LIST_OPTION_CLASS, toIdentifier: (option) => `${option.columnId}`, toLabel: (option) => option.friendlyName ?? option.columnId, toListLabel: (option) => ((0, jsx_runtime_1.jsxs)(Flex_1.Flex, { alignItems: "center", className: "twa:min-w-0", children: [(0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:truncate", children: option.friendlyName ?? option.columnId }), (0, jsx_runtime_1.jsx)(ColumnGroupTag_1.ColumnGroupTag, { column: option })] })), options: sortedPivotColumns, value: layout.PivotColumns ?? [], allowReorder: true, onChange: handleColumnsChange }) }) }) }) }), (0, jsx_runtime_1.jsx)(CollapsibleWizardCard_1.CollapsibleWizardCard, { ...bindCard('pivot-result-columns'), surface: "panel", "data-name": "pivot-result-columns", title: "Pivot Result Columns", help: "Configure how dynamically created pivot result columns are stored in the Layout", collapsedHelp: "How dynamically created pivot result columns are stored in the Layout", compactSummary: (0, jsx_runtime_1.jsx)(Tag_1.Tag, { children: persistPivotResultOrder ? 'Persist order' : 'Do not persist order' }), summary: (0, jsx_runtime_1.jsx)(CollapsibleWizardCard_1.CollapsibleWizardValueSummary, { value: (0, jsx_runtime_1.jsx)(Tag_1.Tag, { children: persistPivotResultOrder ? 'Persist order' : 'Do not persist order' }) }), children: (0, jsx_runtime_1.jsx)(CheckBox_1.CheckBox, { checked: persistPivotResultOrder, onChange: (checked) => {
+                        props.onChange({
+                            ...layout,
+                            PivotResultColumnsOrder: checked,
+                        });
+                    }, children: "Persist order of pivot result columns" }) }), layoutSupportedFeatures.ColumnSorts ? ((0, jsx_runtime_1.jsx)(SortSection_1.ColumnSortingWizardCard, { layout: layout, onChange: props.onChange, bindCard: bindCard, title: "Column Sorting", cardId: "column-sorting", "data-name": "pivot-column-sorting" })) : null] }));
 };
 exports.PivotColumnsSection = PivotColumnsSection;

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

@@ -1,8 +1,11 @@
 import * as React from 'react';
 import { PivotLayout } from '../../../../../types';
-export declare const PivotRowGroupingSectionSummary: React.FunctionComponent;
+export declare const PivotRowGroupingSectionSummary: React.FunctionComponent<{
+    layout?: PivotLayout;
+}>;
 interface PivotRowGroupingSectionProps {
     onChange: (data: PivotLayout) => void;
+    layoutWizardMode?: 'create' | 'edit';
 }
 export declare const PivotRowGroupingSection: React.FunctionComponent<PivotRowGroupingSectionProps>;
 export {};

package/src/View/Layout/Wizard/sections/PivotRowGroupingSection.js

@@ -4,6 +4,7 @@ exports.PivotRowGroupingSection = exports.PivotRowGroupingSectionSummary = void
 const tslib_1 = require("tslib");
 const jsx_runtime_1 = require("react/jsx-runtime");
 const React = tslib_1.__importStar(require("react"));
+const layoutWizardAccordionHelpers_1 = require("./layoutWizardAccordionHelpers");
 const Utilities_1 = require("./Utilities");
 const ColumnGroupTag_1 = require("../../../Components/ColumnGroupTag");
 const Tag_1 = require("../../../../components/Tag");
@@ -13,14 +14,16 @@ const OnePageAdaptableWizard_1 = require("../../../Wizard/OnePageAdaptableWizard
 const ArrayExtensions_1 = tslib_1.__importDefault(require("../../../../Utilities/Extensions/ArrayExtensions"));
 const LayoutHelpers_1 = require("../../../../Api/Implementation/LayoutHelpers");
 const RowGroupingSection_1 = require("./RowGroupingSection");
+const rowGroupSummaryTags_1 = require("../../../Wizard/rowGroupSummaryTags");
 const Flex_1 = require("../../../../components/Flex");
 const Card_1 = require("../../../../components/Card");
-const PivotRowGroupingSectionSummary = () => {
+const CollapsibleWizardCard_1 = require("../../../Wizard/CollapsibleWizardCard");
+const layoutWizardColumns_1 = require("./layoutWizardColumns");
+const PivotRowGroupingSectionSummary = (props) => {
     const adaptable = (0, AdaptableContext_1.useAdaptable)();
-    const { data: layout } = (0, OnePageAdaptableWizard_1.useOnePageAdaptableWizardContext)();
-    return ((0, jsx_runtime_1.jsx)(Flex_1.Box, { children: layout.PivotGroupedColumns?.length ? (layout.PivotGroupedColumns.map((columnId) => {
-            return ((0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:mb-2", children: (0, jsx_runtime_1.jsx)(Tag_1.Tag, { children: adaptable.api.columnApi.getFriendlyNameForColumnId(columnId) }) }, columnId));
-        })) : ((0, jsx_runtime_1.jsx)(Tag_1.Tag, { children: "No Pivot Row Grouping" })) }));
+    const { data: contextLayout } = (0, OnePageAdaptableWizard_1.useOnePageAdaptableWizardContext)();
+    const layout = props.layout ?? contextLayout;
+    return (0, jsx_runtime_1.jsx)(rowGroupSummaryTags_1.PivotRowGroupSummaryTags, { layout: layout, api: adaptable.api });
 };
 exports.PivotRowGroupingSectionSummary = PivotRowGroupingSectionSummary;
 const PivotRowGroupingSection = (props) => {
@@ -30,16 +33,24 @@ const PivotRowGroupingSection = (props) => {
     const sortedGroupableColumns = React.useMemo(() => {
         return ArrayExtensions_1.default.sortArrayWithOrder(allGroupableColumns.map((col) => col.columnId), layout.PivotGroupedColumns ?? [], { sortUnorderedItems: false }).map((colId) => adaptable.api.columnApi.getColumnWithColumnId(colId));
     }, [layout, allGroupableColumns]);
-    const onChange = (layout) => {
-        props.onChange((0, LayoutHelpers_1.normalizeLayout)(layout));
+    const onChange = (nextLayout) => {
+        props.onChange((0, LayoutHelpers_1.normalizeLayout)(nextLayout));
     };
     const handleColumnsChange = (columnIds) => {
-        onChange({
+        const newLayout = {
             ...layout,
             PivotGroupedColumns: columnIds,
-        });
+        };
+        if (!newLayout.RowGroupValues) {
+            newLayout.RowGroupValues = {
+                RowGroupDefaultBehavior: 'always-collapsed',
+            };
+        }
+        onChange(newLayout);
     };
     const rowGroupsText = 'Grouped Rows ' + adaptable.api.internalApi.getCorrectEnglishVariant('Behaviour');
-    return ((0, jsx_runtime_1.jsxs)(Flex_1.Box, { className: "twa:h-full twa:min-h-0 twa:p-2 twa:gap-2 twa:overflow-hidden twa:grid twa:grid-cols-2", children: [(0, jsx_runtime_1.jsxs)(Card_1.Card, { shadow: false, className: "twa:h-full twa:overflow-hidden twa:flex twa:flex-col", children: [(0, jsx_runtime_1.jsxs)(Card_1.Card.Title, { children: [(0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:font-medium", children: "Row Grouped Columns" }), (0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:text-xs twa:opacity-70 twa:font-normal twa:max-w-[520px]", children: "Select and order Columns used in grouping" })] }), (0, jsx_runtime_1.jsx)(Card_1.Card.Body, { className: "twa:flex-1 twa:min-h-0 twa:overflow-hidden twa:p-1", children: (0, jsx_runtime_1.jsx)(ValueSelector_1.ValueSelector, { style: { minHeight: 0 }, showFilterInput: true, filter: Utilities_1.columnFilter, toIdentifier: (option) => `${option.columnId}`, toLabel: (option) => option.friendlyName ?? option.columnId, toListLabel: (option) => ((0, jsx_runtime_1.jsxs)(Flex_1.Flex, { alignItems: "center", children: [option.friendlyName ?? option.columnId, (0, jsx_runtime_1.jsx)(ColumnGroupTag_1.ColumnGroupTag, { column: option })] })), options: sortedGroupableColumns, value: layout.PivotGroupedColumns ?? [], allowReorder: true, onChange: handleColumnsChange }) })] }), (0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:h-full twa:min-h-0 twa:overflow-y-auto twa:flex twa:flex-col twa:gap-2", 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: rowGroupsText }), (0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:text-xs twa:opacity-70 twa:font-normal twa:max-w-[520px]", children: "Set what happens when Layout opens" })] }), (0, jsx_runtime_1.jsx)(Card_1.Card.Body, { className: "twa:p-1", children: (0, jsx_runtime_1.jsx)(RowGroupingSection_1.RowGroupBehaviorSection, { layout: layout, onChange: onChange }) })] }) })] }));
+    const initialExpandedCardId = (0, layoutWizardAccordionHelpers_1.getLayoutWizardInitialExpandedCardId)(props.layoutWizardMode, 'columns', (0, layoutWizardAccordionHelpers_1.isPivotRowGroupingSectionConfigured)(layout));
+    const { bindCard, hasExpandedCard, expandedFillsSpace } = (0, CollapsibleWizardCard_1.useWizardCardAccordion)(initialExpandedCardId);
+    return ((0, jsx_runtime_1.jsxs)(Flex_1.Box, { className: (0, CollapsibleWizardCard_1.getWizardAccordionSectionClassName)(hasExpandedCard, expandedFillsSpace), children: [(0, jsx_runtime_1.jsx)(CollapsibleWizardCard_1.CollapsibleWizardCard, { ...bindCard('columns', { fillAvailable: true }), surface: "panel", "data-name": "pivot-row-grouped-columns", title: "Row Grouped Columns", help: "Select and order Columns used in Row Grouping", collapsedHelp: "", compactSummary: (0, CollapsibleWizardCard_1.renderCompactColumnTags)(layout.PivotGroupedColumns ?? [], (columnId) => adaptable.api.columnApi.getFriendlyNameForColumnId(columnId), { emptyLabel: 'No columns' }), summary: layout.PivotGroupedColumns?.length ? ((0, jsx_runtime_1.jsx)(Flex_1.Flex, { flexWrap: "wrap", className: "twa:gap-1", children: layout.PivotGroupedColumns.map((columnId) => ((0, jsx_runtime_1.jsx)(Tag_1.ColumnTag, { children: adaptable.api.columnApi.getFriendlyNameForColumnId(columnId) }, columnId))) })) : ((0, jsx_runtime_1.jsx)(Tag_1.Tag, { children: "No columns" })), 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)(Card_1.Card, { shadow: false, className: "twa:h-full twa:overflow-hidden twa:flex twa:flex-col", children: (0, jsx_runtime_1.jsx)(Card_1.Card.Body, { className: "twa:flex-1 twa:min-h-0 twa:overflow-hidden twa:px-1 twa:pt-0 twa:pb-0", children: (0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:flex twa:flex-col twa:gap-1.5 twa:h-full twa:overflow-hidden twa:flex-1 twa:min-h-0", "data-name": "pivot-row-grouped-columns-container", children: (0, jsx_runtime_1.jsx)(ValueSelector_1.ValueSelector, { compact: true, showFilterInput: true, filter: Utilities_1.columnFilter, filterPlaceholder: "Search Columns...", compactHeaderClassName: layoutWizardColumns_1.LAYOUT_WIZARD_COLUMN_LIST_HEADER_CLASS, compactFilterClassName: layoutWizardColumns_1.LAYOUT_WIZARD_COLUMN_LIST_SEARCH_CLASS, hideShowSelectedOnly: true, optionLayout: "label-beside-checkbox", toggleSelectionOnRowClick: true, optionClassName: layoutWizardColumns_1.LAYOUT_WIZARD_COLUMN_LIST_OPTION_CLASS, toIdentifier: (option) => `${option.columnId}`, toLabel: (option) => option.friendlyName ?? option.columnId, toListLabel: (option) => ((0, jsx_runtime_1.jsxs)(Flex_1.Flex, { alignItems: "center", className: "twa:min-w-0", children: [(0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:truncate", children: option.friendlyName ?? option.columnId }), (0, jsx_runtime_1.jsx)(ColumnGroupTag_1.ColumnGroupTag, { column: option })] })), options: sortedGroupableColumns, value: layout.PivotGroupedColumns ?? [], allowReorder: true, onChange: handleColumnsChange }) }) }) }) }), (0, jsx_runtime_1.jsx)(CollapsibleWizardCard_1.CollapsibleWizardCard, { ...bindCard('behavior'), surface: "panel", "data-name": "pivot-row-group-behavior", title: rowGroupsText, help: "Set Grouped Rows expanded / collapsed behaviour when Layout opens", collapsedHelp: "Grouped Rows expanded / collapsed behaviour when Layout opens", compactSummary: (0, jsx_runtime_1.jsx)(Tag_1.Tag, { children: (0, RowGroupingSection_1.getRowGroupBehaviorLabel)(layout) }), summary: (0, jsx_runtime_1.jsx)(CollapsibleWizardCard_1.CollapsibleWizardValueSummary, { value: (0, jsx_runtime_1.jsx)(Tag_1.Tag, { children: (0, RowGroupingSection_1.getRowGroupBehaviorLabel)(layout) }) }), children: (0, jsx_runtime_1.jsx)(RowGroupingSection_1.RowGroupBehaviorSection, { layout: layout, onChange: onChange }) })] }));
 };
 exports.PivotRowGroupingSection = PivotRowGroupingSection;

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

@@ -1,12 +1,15 @@
 import * as React from 'react';
 import { Layout } from '../../../../../types';
-export declare const RowGroupingSectionSummary: React.FunctionComponent;
+export { getRowGroupBehaviorDescription, getRowGroupBehaviorLabel, getRowGroupDisplayTypeDescription, getRowGroupDisplayTypeLabel, } from '../../../../Strategy/Utilities/Layout/rowGroupSummaryHelpers';
+export declare const RowGroupingSectionSummary: React.FunctionComponent<{
+    layout?: Layout;
+}>;
 interface RowGroupingSectionProps {
     onChange: (data: Layout) => void;
+    layoutWizardMode?: 'create' | 'edit';
 }
 export declare const RowGroupBehaviorSection: (props: {
     layout: Layout;
     onChange: (data: Layout) => void;
 }) => React.JSX.Element;
 export declare const RowGroupingSection: React.FunctionComponent<RowGroupingSectionProps>;
-export {};