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

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

@@ -7,13 +7,9 @@ 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 Tabs_1 = require("../../../../components/Tabs");
+const Card_1 = require("../../../../components/Card");
 const Tag_1 = require("../../../../components/Tag");
 const AggregationColumns_1 = require("../../../../AdaptableState/Common/AggregationColumns");
-const validateParameterizedAggregations_1 = require("../../../../Aggregation/validateParameterizedAggregations");
-const parameterizedAggregationHeader_1 = require("../../../../Aggregation/parameterizedAggregationHeader");
-const parameterizedAggregationWizardHelpers_1 = require("../../../../Aggregation/parameterizedAggregationWizardHelpers");
-const ParameterizedAggFuncPicker_1 = require("./ParameterizedAggFuncPicker");
 const AdaptableContext_1 = require("../../../AdaptableContext");
 const ValueSelector_1 = require("../../../Components/ValueSelector");
 const OnePageAdaptableWizard_1 = require("../../../Wizard/OnePageAdaptableWizard");
@@ -26,6 +22,33 @@ const NewSelect_1 = require("../../../../components/NewSelect");
 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 currentAggFnName = props.aggregationColumnsMap[props.column.columnId];
+    const updateAggFunc = (fnName) => {
+        let aggCols = [...(props.layout.PivotAggregationColumns || [])];
+        const AggFuncValue = fnName;
+        let found = false;
+        aggCols = aggCols.map(({ ColumnId, AggFunc, ...rest }) => {
+            if (ColumnId === props.column.columnId) {
+                found = true;
+                return {
+                    ColumnId,
+                    AggFunc: AggFuncValue,
+                    ...rest,
+                };
+            }
+            return { ColumnId, AggFunc, ...rest };
+        });
+        if (!found) {
+            aggCols.push({
+                ColumnId: props.column.columnId,
+                AggFunc: AggFuncValue,
+            });
+        }
+        props.onChangeAggFunction(aggCols);
+    };
     const totalOptions = ['Off', 'Before', 'After', 'Pivot Specific'].map((totalVariant) => {
         return {
             label: totalVariant,
@@ -98,8 +121,11 @@ const PivotColumnRow = (props) => {
         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 }), (0, jsx_runtime_1.jsx)(ParameterizedAggFuncPicker_1.ParameterizedAggFuncPicker, { column: props.column, aggValue: aggValue, aggregationColumnsMap: props.aggregationColumnsMap, numberColumns: props.numberColumns, aggregationEntries: props.layout.PivotAggregationColumns || [], onChangeEntries: props.onChangeAggFunction, availableAggregationFunctions: props.column.availableAggregationFunctions }), 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-text-on-primary)',
+    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) => {
@@ -121,14 +147,25 @@ const PivotColumnRow = (props) => {
                                     })), children: currentValue })] }, pivotColId));
                     }) }))] }) }));
 };
-exports.isPivotAggregationsSectionValid = validateParameterizedAggregations_1.validatePivotLayoutAggregations;
+const isPivotAggregationsSectionValid = (data) => {
+    const weightedAvg = data.PivotAggregationColumns
+        ? (data.PivotAggregationColumns || [])
+            .map((agg) => agg.AggFunc)
+            .find((agg) => typeof agg === 'object' && agg.type === 'weightedAverage')
+        : null;
+    if (weightedAvg && !weightedAvg.weightedColumnId) {
+        return 'Weighted Average requires a weight column to be selected.';
+    }
+    return true;
+};
+exports.isPivotAggregationsSectionValid = isPivotAggregationsSectionValid;
 const PivotAggregationsSectionSummary = () => {
     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: (0, parameterizedAggregationHeader_1.getParameterizedAggregationDisplayName)(adaptable.api, aggFunc, colId) }) }, colId))) }));
+        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))) }));
     }
     else {
         content = (0, jsx_runtime_1.jsx)(Tag_1.Tag, { children: "No Pivot Column Aggregations" });
@@ -141,7 +178,6 @@ const PivotAggregationsSection = (props) => {
     const { data: layout } = (0, OnePageAdaptableWizard_1.useOnePageAdaptableWizardContext)();
     const allAggregableColumns = adaptable.api.columnApi.getAggregatableColumns();
     const allColumns = adaptable.api.columnApi.getUIAvailableColumns();
-    const numberColumns = adaptable.api.columnApi.getNumericColumns();
     const sortedAggregableColumns = React.useMemo(() => {
         return ArrayExtensions_1.default.sortArrayWithOrder(allAggregableColumns.map((col) => col.columnId), (layout.PivotAggregationColumns ?? []).map((col) => col.ColumnId), { sortUnorderedItems: false }).map((colId) => adaptable.api.columnApi.getColumnWithColumnId(colId));
     }, [layout, allAggregableColumns]);
@@ -175,8 +211,22 @@ const PivotAggregationsSection = (props) => {
             acc[col.columnId] = col;
             return acc;
         }, {});
-        return (0, parameterizedAggregationWizardHelpers_1.buildAggregationColumnsMap)(layout.PivotAggregationColumns || [], allColumnsMap);
-    }, [layout, allColumns]);
+        return (layout.PivotAggregationColumns || []).reduce((acc, { ColumnId: colId, AggFunc: aggFunc }) => {
+            let fn = aggFunc;
+            let fnName = '';
+            if (typeof fn === 'boolean') {
+                fnName = allColumnsMap[colId].aggregationFunction;
+            }
+            if (typeof fn === 'object' && fn.type === 'weightedAverage') {
+                fnName = AggregationColumns_1.WEIGHTED_AVERAGE_AGG_FN_NAME;
+            }
+            else if (typeof fn === 'string') {
+                fnName = fn;
+            }
+            acc[colId] = fnName;
+            return acc;
+        }, {});
+    }, [layout]);
     const handleSuppressAggFuncInHeader = (checked) => {
         props.onChange({
             ...layout,
@@ -201,47 +251,47 @@ const PivotAggregationsSection = (props) => {
         return true;
     };
     const isPivotColumnTotalEnabled = checkIfPivotColumnTotalEnabled();
-    return ((0, jsx_runtime_1.jsxs)(Tabs_1.Tabs, { style: { height: '100%' }, children: [(0, jsx_runtime_1.jsx)(Tabs_1.Tabs.Tab, { children: "Column Aggregations" }), (0, jsx_runtime_1.jsxs)(Tabs_1.Tabs.Content, { children: [(0, jsx_runtime_1.jsx)(Flex_1.Flex, { className: "twa:mb-2", children: (0, jsx_runtime_1.jsxs)(FormLayout_1.default, { children: [(0, jsx_runtime_1.jsx)(FormLayout_1.FormRow, { label: 'Omit Aggregation from Header', children: (0, jsx_runtime_1.jsx)(CheckBox_1.CheckBox, { checked: layout.SuppressAggFuncInHeader, onChange: handleSuppressAggFuncInHeader }) }), (0, jsx_runtime_1.jsx)(FormLayout_1.FormRow, { label: 'Grand Total Row', children: (0, jsx_runtime_1.jsx)(NewSelect_1.SingleSelect, { className: "twa:w-[160px]", items: [
-                                            {
-                                                label: 'Off',
-                                                value: null,
-                                            },
-                                        ].concat(['top', 'bottom', 'pinnedTop', 'pinnedBottom'].map((position) => {
+    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.CamelCaseToHumanText(position),
+                                                label: StringExtensions_1.default.CapitaliseFirstLetter(position),
                                                 value: position,
                                             };
-                                        })), placeholder: "[none]", value: layout.GrandTotalRow, onValueChange: (value) => {
-                                            props.onChange({
-                                                ...layout,
-                                                GrandTotalRow: value,
-                                            });
-                                        } }) }), (0, jsx_runtime_1.jsx)(FormLayout_1.FormRow, { label: 'Pivot Grand Total', children: (0, jsx_runtime_1.jsx)(NewSelect_1.SingleSelect, { className: "twa:w-[160px]", items: [
-                                            { label: 'Off', value: null },
-                                            ...['before', 'after'].map((position) => {
-                                                return {
-                                                    label: StringExtensions_1.default.CapitaliseFirstLetter(position),
-                                                    value: position,
-                                                };
-                                            }),
-                                        ], placeholder: "[none]", value: layout.PivotGrandTotal, onValueChange: (value) => {
-                                            props.onChange({
-                                                ...layout,
-                                                PivotGrandTotal: value,
-                                            });
-                                        } }) }), (0, jsx_runtime_1.jsx)(FormLayout_1.FormRow, { label: 'Pivot Column Total', children: isPivotColumnTotalEnabled === true ? ((0, jsx_runtime_1.jsx)(NewSelect_1.SingleSelect, { className: "twa:w-[160px]", items: [
-                                            { label: 'Off', value: null },
-                                            ...['before', 'after'].map((position) => {
-                                                return {
-                                                    label: StringExtensions_1.default.CapitaliseFirstLetter(position),
-                                                    value: position,
-                                                };
-                                            }),
-                                        ], placeholder: "[none]", value: layout.PivotColumnTotal, onValueChange: (value) => {
-                                            props.onChange({
-                                                ...layout,
-                                                PivotColumnTotal: value,
-                                            });
-                                        } })) : ((0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:ml-1 twa:italic", children: isPivotColumnTotalEnabled })) })] }) }), (0, jsx_runtime_1.jsx)(ValueSelector_1.ValueSelector, { 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, numberColumns: numberColumns })), options: sortedAggregableColumns, value: (layout.PivotAggregationColumns || []).map((col) => col.ColumnId), allowReorder: true, onChange: handleColumnsSelectionChange })] })] }));
+                                        }),
+                                    ], 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 })) })] })] })] }));
 };
 exports.PivotAggregationsSection = PivotAggregationsSection;

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

@@ -4,7 +4,6 @@ exports.PivotColumnsSection = exports.PivotColumnsSectionSummary = void 0;
 const tslib_1 = require("tslib");
 const jsx_runtime_1 = require("react/jsx-runtime");
 const React = tslib_1.__importStar(require("react"));
-const Tabs_1 = require("../../../../components/Tabs");
 const Tag_1 = require("../../../../components/Tag");
 const AdaptableContext_1 = require("../../../AdaptableContext");
 const ValueSelector_1 = require("../../../Components/ValueSelector");
@@ -13,6 +12,8 @@ const Utilities_1 = require("./Utilities");
 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 adaptable = (0, AdaptableContext_1.useAdaptable)();
     const { data: layout } = (0, OnePageAdaptableWizard_1.useOnePageAdaptableWizardContext)();
@@ -25,18 +26,18 @@ const PivotColumnsSection = (props) => {
     const allPivotColumns = adaptable.api.columnApi.getPivotableColumns();
     const sortedPivotColumns = React.useMemo(() => {
         return ArrayExtensions_1.default.sortArrayWithOrder(allPivotColumns.map((col) => col.columnId), layout.PivotColumns ?? [], { sortUnorderedItems: false }).map((colId) => adaptable.api.columnApi.getColumnWithColumnId(colId));
-    }, [layout, allPivotColumns]);
+    }, [layout, allPivotColumns, adaptable]);
     const handleColumnsChange = (columnIds) => {
         props.onChange({
             ...layout,
             PivotColumns: columnIds,
         });
     };
-    return ((0, jsx_runtime_1.jsxs)(Tabs_1.Tabs, { className: "twa:h-full", children: [(0, jsx_runtime_1.jsx)(Tabs_1.Tabs.Tab, { children: "Pivot Columns" }), (0, jsx_runtime_1.jsxs)(Tabs_1.Tabs.Content, { children: [(0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:mb-3 twa:px-2", 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)(ValueSelector_1.ValueSelector, { 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 })] })] }));
+    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" })] })] }) })] }));
 };
 exports.PivotColumnsSection = PivotColumnsSection;

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

@@ -6,7 +6,6 @@ const jsx_runtime_1 = require("react/jsx-runtime");
 const React = tslib_1.__importStar(require("react"));
 const Utilities_1 = require("./Utilities");
 const ColumnGroupTag_1 = require("../../../Components/ColumnGroupTag");
-const Tabs_1 = require("../../../../components/Tabs");
 const Tag_1 = require("../../../../components/Tag");
 const AdaptableContext_1 = require("../../../AdaptableContext");
 const ValueSelector_1 = require("../../../Components/ValueSelector");
@@ -15,11 +14,12 @@ const ArrayExtensions_1 = tslib_1.__importDefault(require("../../../../Utilities
 const LayoutHelpers_1 = require("../../../../Api/Implementation/LayoutHelpers");
 const RowGroupingSection_1 = require("./RowGroupingSection");
 const Flex_1 = require("../../../../components/Flex");
+const Card_1 = require("../../../../components/Card");
 const PivotRowGroupingSectionSummary = () => {
     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) }));
+            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" })) }));
 };
 exports.PivotRowGroupingSectionSummary = PivotRowGroupingSectionSummary;
@@ -39,7 +39,7 @@ const PivotRowGroupingSection = (props) => {
             PivotGroupedColumns: columnIds,
         });
     };
-    const rowGroupsText = 'Row Group ' + adaptable.api.internalApi.getCorrectEnglishVariant('Behaviour');
-    return ((0, jsx_runtime_1.jsxs)(Tabs_1.Tabs, { style: { height: '100%' }, children: [(0, jsx_runtime_1.jsx)(Tabs_1.Tabs.Tab, { children: "Row Grouped Columns" }), (0, jsx_runtime_1.jsx)(Tabs_1.Tabs.Tab, { children: rowGroupsText }), (0, jsx_runtime_1.jsx)(Tabs_1.Tabs.Content, { children: (0, jsx_runtime_1.jsx)(ValueSelector_1.ValueSelector, { 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)(Tabs_1.Tabs.Content, { children: (0, jsx_runtime_1.jsx)(RowGroupingSection_1.RowGroupBehaviorSection, { layout: layout, onChange: onChange }) })] }));
+    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 }) })] }) })] }));
 };
 exports.PivotRowGroupingSection = PivotRowGroupingSection;

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

@@ -4,11 +4,9 @@ exports.RowGroupingSection = exports.RowGroupBehaviorSection = exports.RowGroupi
 const tslib_1 = require("tslib");
 const jsx_runtime_1 = require("react/jsx-runtime");
 const React = tslib_1.__importStar(require("react"));
-const FormLayout_1 = tslib_1.__importDefault(require("../../../../components/FormLayout"));
 const Utilities_1 = require("./Utilities");
 const ColumnGroupTag_1 = require("../../../Components/ColumnGroupTag");
 const Radio_1 = require("../../../../components/Radio");
-const Tabs_1 = require("../../../../components/Tabs");
 const Tag_1 = require("../../../../components/Tag");
 const AdaptableContext_1 = require("../../../AdaptableContext");
 const ValueSelector_1 = require("../../../Components/ValueSelector");
@@ -17,6 +15,7 @@ const ArrayExtensions_1 = tslib_1.__importDefault(require("../../../../Utilities
 const LayoutHelpers_1 = require("../../../../Api/Implementation/LayoutHelpers");
 const TypeRadio_1 = require("../../../Wizard/TypeRadio");
 const Flex_1 = require("../../../../components/Flex");
+const Card_1 = require("../../../../components/Card");
 const RowGroupingSectionSummary = () => {
     const adaptable = (0, AdaptableContext_1.useAdaptable)();
     const { data: layout } = (0, OnePageAdaptableWizard_1.useOnePageAdaptableWizardContext)();
@@ -30,28 +29,48 @@ const RowGroupingSectionSummary = () => {
 exports.RowGroupingSectionSummary = RowGroupingSectionSummary;
 const RowGroupBehaviorSection = (props) => {
     const { layout, onChange } = props;
-    return ((0, jsx_runtime_1.jsx)(FormLayout_1.default, { children: (0, jsx_runtime_1.jsxs)(Radio_1.RadioGroup, { orientation: "vertical", value: layout.RowGroupValues?.RowGroupDefaultBehavior ?? 'always-collapsed', onRadioChange: (RowGroupDefaultBehavior) => {
-                const newLayout = {
-                    ...layout,
-                    RowGroupValues: {
-                        RowGroupDefaultBehavior,
-                    },
-                };
-                if (newLayout.RowGroupValues.RowGroupDefaultBehavior === 'collapsed' ||
-                    newLayout.RowGroupValues.RowGroupDefaultBehavior === 'expanded') {
-                    newLayout.RowGroupValues.ExceptionGroupKeys = [];
-                }
-                onChange(newLayout);
-            }, children: [(0, jsx_runtime_1.jsx)(TypeRadio_1.TypeRadio, { value: "always-collapsed", text: "All Collapsed", description: "Layout opens with all Grouped Rows always collapsed" }), (0, jsx_runtime_1.jsx)(TypeRadio_1.TypeRadio, { value: "always-expanded", text: "All Expanded", description: "Layout opens with all Grouped Rows always expanded" }), (0, jsx_runtime_1.jsx)(TypeRadio_1.TypeRadio, { value: "expanded", text: "Mostly Expanded", description: "Layout opens with all Grouped rows expanded, other than those collapsed when Layout last displayed" }), (0, jsx_runtime_1.jsx)(TypeRadio_1.TypeRadio, { value: "collapsed", text: "Mostly Collapsed", description: "Layout opens with all Grouped rows collapsed, other than those expanded when Layout last displayed" })] }) }));
+    return ((0, jsx_runtime_1.jsxs)(Radio_1.RadioGroup, { orientation: "vertical", value: layout.RowGroupValues?.RowGroupDefaultBehavior ?? 'always-collapsed', onRadioChange: (RowGroupDefaultBehavior) => {
+            const newLayout = {
+                ...layout,
+                RowGroupValues: {
+                    RowGroupDefaultBehavior,
+                },
+            };
+            if (newLayout.RowGroupValues.RowGroupDefaultBehavior === 'collapsed' ||
+                newLayout.RowGroupValues.RowGroupDefaultBehavior === 'expanded') {
+                newLayout.RowGroupValues.ExceptionGroupKeys = [];
+            }
+            onChange(newLayout);
+        }, children: [(0, jsx_runtime_1.jsx)(TypeRadio_1.TypeRadio, { value: "always-collapsed", text: "All Collapsed", description: "All Grouped Rows are always collapsed" }), (0, jsx_runtime_1.jsx)(TypeRadio_1.TypeRadio, { value: "always-expanded", text: "All Expanded", description: "All Grouped Rows are always expanded" }), (0, jsx_runtime_1.jsx)(TypeRadio_1.TypeRadio, { value: "expanded", text: "Mostly Expanded", description: "All expanded, other than those collapsed when Layout last displayed" }), (0, jsx_runtime_1.jsx)(TypeRadio_1.TypeRadio, { value: "collapsed", text: "Mostly Collapsed", description: "All collapsed, other than those expanded when Layout last displayed" })] }));
 };
 exports.RowGroupBehaviorSection = RowGroupBehaviorSection;
+const RowGroupDisplayTypeSection = ({ layout, onChange }) => {
+    const adaptable = (0, AdaptableContext_1.useAdaptable)();
+    return ((0, jsx_runtime_1.jsxs)(Radio_1.RadioGroup, { orientation: "vertical", value: layout.RowGroupDisplayType ?? 'single', onRadioChange: (RowGroupDisplayType) => {
+            let newLayout = {
+                ...layout,
+                RowGroupDisplayType,
+            };
+            if (RowGroupDisplayType === 'single') {
+                newLayout.TableColumns = (newLayout.TableColumns || []).filter((colId) => !adaptable.api.columnApi.isAutoRowGroupColumnForMulti(colId));
+            }
+            else if (RowGroupDisplayType === 'multi') {
+                newLayout.TableColumns = (newLayout.TableColumns || []).filter((colId) => !adaptable.api.columnApi.isAutoRowGroupColumnForSingle(colId));
+            }
+            else {
+                newLayout.TableColumns = (newLayout.TableColumns || []).filter((colId) => !adaptable.api.columnApi.isAutoRowGroupColumnForSingle(colId) &&
+                    !adaptable.api.columnApi.isAutoRowGroupColumnForMulti(colId));
+            }
+            onChange(newLayout);
+        }, children: [(0, jsx_runtime_1.jsx)(TypeRadio_1.TypeRadio, { value: "single", text: "Single Column", description: "All Row Grouped Columns display in one hierarchical Column" }), (0, jsx_runtime_1.jsx)(TypeRadio_1.TypeRadio, { value: "multi", text: "Multiple Columns", description: "Each Row Grouped Column displays in its own, separate, Column" }), (0, jsx_runtime_1.jsx)(TypeRadio_1.TypeRadio, { value: "groupRows", text: "Full Width Group Rows", description: "Row groups display as full-width rows (no group column and no aggregations)" })] }));
+};
 const RowGroupingSection = (props) => {
     const adaptable = (0, AdaptableContext_1.useAdaptable)();
     if (adaptable.api.gridApi.isTreeDataGrid()) {
         return ((0, jsx_runtime_1.jsx)(Flex_1.Flex, { flexDirection: "row", children: (0, jsx_runtime_1.jsx)(Tag_1.Tag, { children: "Row Grouping is not available in Tree Grids" }) }));
     }
     const { data: layout } = (0, OnePageAdaptableWizard_1.useOnePageAdaptableWizardContext)();
-    const rowGroupsText = 'Row Group ' + adaptable.api.internalApi.getCorrectEnglishVariant('Behaviour');
+    const rowGroupsText = 'Grouped Rows ' + adaptable.api.internalApi.getCorrectEnglishVariant('Behaviour');
     const allGroupableColumns = adaptable.api.columnApi.getGroupableColumns();
     const sortedGroupableColumns = React.useMemo(() => {
         return ArrayExtensions_1.default.sortArrayWithOrder(allGroupableColumns.map((col) => col.columnId), layout.RowGroupedColumns ?? [], { sortUnorderedItems: false }).map((colId) => adaptable.api.columnApi.getColumnWithColumnId(colId));
@@ -71,22 +90,6 @@ const RowGroupingSection = (props) => {
         }
         onChange(newLayout);
     };
-    return ((0, jsx_runtime_1.jsxs)(Flex_1.Box, { className: "twa:h-full", children: [(0, jsx_runtime_1.jsxs)(Tabs_1.Tabs, { children: [(0, jsx_runtime_1.jsx)(Tabs_1.Tabs.Tab, { children: "Group Display Type" }), (0, jsx_runtime_1.jsx)(Tabs_1.Tabs.Content, { children: (0, jsx_runtime_1.jsx)(FormLayout_1.default, { children: (0, jsx_runtime_1.jsxs)(Radio_1.RadioGroup, { orientation: "vertical", value: layout.RowGroupDisplayType ?? 'single', onRadioChange: (RowGroupDisplayType) => {
-                                    let newLayout = {
-                                        ...layout,
-                                        RowGroupDisplayType,
-                                    };
-                                    if (RowGroupDisplayType === 'single') {
-                                        newLayout.TableColumns = (newLayout.TableColumns || []).filter((colId) => !adaptable.api.columnApi.isAutoRowGroupColumnForMulti(colId));
-                                    }
-                                    else if (RowGroupDisplayType === 'multi') {
-                                        newLayout.TableColumns = (newLayout.TableColumns || []).filter((colId) => !adaptable.api.columnApi.isAutoRowGroupColumnForSingle(colId));
-                                    }
-                                    else {
-                                        newLayout.TableColumns = (newLayout.TableColumns || []).filter((colId) => !adaptable.api.columnApi.isAutoRowGroupColumnForSingle(colId) &&
-                                            !adaptable.api.columnApi.isAutoRowGroupColumnForMulti(colId));
-                                    }
-                                    onChange(newLayout);
-                                }, children: [(0, jsx_runtime_1.jsx)(TypeRadio_1.TypeRadio, { value: "single", text: "Single Column", description: "All Row Grouped Columns display in one hierarchical Column" }), (0, jsx_runtime_1.jsx)(TypeRadio_1.TypeRadio, { value: "multi", text: "Multiple Columns", description: "Each Row Grouped Column displays in its own, separate, Column" }), (0, jsx_runtime_1.jsx)(TypeRadio_1.TypeRadio, { value: "groupRows", text: "Full Width Group Rows", description: "Row groups display as full-width rows (no group column and no aggregations)" })] }) }) })] }), (0, jsx_runtime_1.jsxs)(Tabs_1.Tabs, { className: "twa:mt-2", children: [(0, jsx_runtime_1.jsx)(Tabs_1.Tabs.Tab, { children: "Row Grouped Columns" }), (0, jsx_runtime_1.jsx)(Tabs_1.Tabs.Tab, { children: rowGroupsText }), (0, jsx_runtime_1.jsx)(Tabs_1.Tabs.Content, { children: (0, jsx_runtime_1.jsx)(ValueSelector_1.ValueSelector, { 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.RowGroupedColumns ?? [], allowReorder: true, onChange: handleColumnsChange }) }), (0, jsx_runtime_1.jsx)(Tabs_1.Tabs.Content, { children: (0, jsx_runtime_1.jsx)(exports.RowGroupBehaviorSection, { layout: layout, onChange: onChange }) })] })] }));
+    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.RowGroupedColumns ?? [], allowReorder: true, onChange: handleColumnsChange }) })] }), (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.jsxs)(Card_1.Card.Title, { children: [(0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:font-medium", children: "Group Display Type" }), (0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:text-xs twa:opacity-70 twa:font-normal twa:max-w-[520px]", children: "Choose how grouped rows display in the grid" })] }), (0, jsx_runtime_1.jsx)(Card_1.Card.Body, { className: "twa:p-1", children: (0, jsx_runtime_1.jsx)(RowGroupDisplayTypeSection, { layout: layout, onChange: onChange }) })] }), (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)(exports.RowGroupBehaviorSection, { layout: layout, onChange: onChange }) })] })] })] }));
 };
 exports.RowGroupingSection = RowGroupingSection;

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

@@ -6,7 +6,6 @@ const jsx_runtime_1 = require("react/jsx-runtime");
 const CheckBox_1 = require("../../../../components/CheckBox");
 const Radio_1 = tslib_1.__importStar(require("../../../../components/Radio"));
 const Radio_2 = require("../../../../components/Radio");
-const Tabs_1 = require("../../../../components/Tabs");
 const Tag_1 = require("../../../../components/Tag");
 const OnePageAdaptableWizard_1 = require("../../../Wizard/OnePageAdaptableWizard");
 const Flex_1 = require("../../../../components/Flex");
@@ -14,6 +13,7 @@ const twMerge_1 = require("../../../../twMerge");
 const HelpBlock_1 = tslib_1.__importDefault(require("../../../../components/HelpBlock"));
 const isPivotLayout_1 = require("../../../../Utilities/isPivotLayout");
 const GeneralConstants_1 = require("../../../../Utilities/Constants/GeneralConstants");
+const Card_1 = require("../../../../components/Card");
 const RowSelectionSectionSummary = () => {
     const { data: layout } = (0, OnePageAdaptableWizard_1.useOnePageAdaptableWizardContext)();
     if (layout.RowSelection === false) {
@@ -74,6 +74,6 @@ const RowSelectionSection = (props) => {
         }
         props.onChange(newLayout);
     };
-    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)(Tabs_1.Tabs, { children: [(0, jsx_runtime_1.jsx)(Tabs_1.Tabs.Tab, { children: "Row Selection Mode" }), (0, jsx_runtime_1.jsx)(Tabs_1.Tabs.Content, { children: (0, jsx_runtime_1.jsx)(Flex_1.Flex, { flexDirection: "column", children: (0, jsx_runtime_1.jsxs)(Radio_2.RadioGroup, { orientation: "horizontal", variant: "text-only", className: (0, twMerge_1.twMerge)(Radio_1.radioGroupStyling.horizontalTextOnly, 'twa:gap-2 twa:max-w-[500px] twa:bg-background twa:p-2'), value: mode, name: "rowSelectionMode", onRadioChange: handleModeChange, children: [(0, jsx_runtime_1.jsx)(Radio_1.default, { value: false, children: "Disabled" }), (0, jsx_runtime_1.jsx)(Radio_1.default, { value: "singleRow", children: "Single Row" }), (0, jsx_runtime_1.jsx)(Radio_1.default, { value: "multiRow", children: "Multi Row" })] }) }) })] }), !rowSelection && (0, jsx_runtime_1.jsx)(HelpBlock_1.default, { children: "There is no Row Selection configured for this Layout" }), rowSelection && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)(Tabs_1.Tabs, { className: "twa:mt-2", children: [(0, jsx_runtime_1.jsx)(Tabs_1.Tabs.Tab, { children: "Row Selection Column Checkboxes" }), (0, jsx_runtime_1.jsx)(Tabs_1.Tabs.Content, { children: (0, jsx_runtime_1.jsxs)(Flex_1.Flex, { flexDirection: "row", className: "twa:gap-6", children: [(0, jsx_runtime_1.jsx)(CheckBox_1.CheckBox, { className: "twa:flex-1", checked: rowSelection.Checkboxes ?? true, onChange: (checked) => updateRowSelection({ Checkboxes: checked }), children: "Checkboxes in Column Cells" }), mode === 'multiRow' && ((0, jsx_runtime_1.jsx)(CheckBox_1.CheckBox, { className: "twa:flex-1", checked: rowSelection.HeaderCheckbox ?? true, onChange: (checked) => updateRowSelection({ HeaderCheckbox: checked }), children: "Checkbox in Column Header (to enable Select All)" }))] }) })] }), (rowSelection.Checkboxes ?? true) && ((0, jsx_runtime_1.jsxs)(Tabs_1.Tabs, { className: "twa:mt-2", children: [(0, jsx_runtime_1.jsx)(Tabs_1.Tabs.Tab, { children: "Row Grouping Selection Checkboxes" }), (0, jsx_runtime_1.jsx)(Tabs_1.Tabs.Content, { children: (0, jsx_runtime_1.jsxs)(Radio_2.RadioGroup, { orientation: "vertical", value: rowSelection.CheckboxInGroupColumn ?? false, name: "checkboxLocation", onRadioChange: (value) => updateRowSelection({ CheckboxInGroupColumn: value }), children: [(0, jsx_runtime_1.jsx)(Radio_1.default, { value: false, children: "Display in dedicated Selection Column" }), (0, jsx_runtime_1.jsx)(Radio_1.default, { value: true, children: "Display in Row Grouped Column" })] }) })] })), (0, jsx_runtime_1.jsxs)(Tabs_1.Tabs, { className: "twa:mt-2", children: [(0, jsx_runtime_1.jsx)(Tabs_1.Tabs.Tab, { children: "Row Click Selection (when user clicks on Row outside of Selection Checkbox)" }), (0, jsx_runtime_1.jsx)(Tabs_1.Tabs.Content, { children: (0, jsx_runtime_1.jsxs)(Radio_2.RadioGroup, { orientation: "vertical", value: rowSelection.EnableClickSelection ?? false, name: "clickSelection", onRadioChange: (value) => updateRowSelection({ EnableClickSelection: value }), children: [(0, jsx_runtime_1.jsx)(Radio_1.default, { value: false, children: "Disabled (Cannot select or deselect by clicking in Row)" }), (0, jsx_runtime_1.jsx)(Radio_1.default, { value: true, children: "Full (Enable selection by clicking in Row and deselection by Ctrl+clicking in Row)" }), (0, jsx_runtime_1.jsx)(Radio_1.default, { value: 'enableSelection', children: "Selection Only (Enable selection by clicking in Row)" }), (0, jsx_runtime_1.jsx)(Radio_1.default, { value: 'enableDeselection', children: "Deselection Only (Enable deselection by Ctrl+clicking in Row)" })] }) })] }), mode === 'multiRow' && !isPivot && ((0, jsx_runtime_1.jsxs)(Tabs_1.Tabs, { className: "twa:mt-2", children: [(0, jsx_runtime_1.jsx)(Tabs_1.Tabs.Tab, { children: "Grouped Row Selection Behaviour" }), (0, jsx_runtime_1.jsx)(Tabs_1.Tabs.Content, { children: (0, jsx_runtime_1.jsxs)(Radio_2.RadioGroup, { orientation: "vertical", value: rowSelection.GroupSelectMode ?? 'self', name: "groupSelectMode", onRadioChange: (value) => updateRowSelection({ GroupSelectMode: value }), children: [(0, jsx_runtime_1.jsx)(Radio_1.default, { value: 'self', children: "Select Grouped Row Only (no cascade)" }), (0, jsx_runtime_1.jsx)(Radio_1.default, { value: 'descendants', children: "Select Grouped Row and all descendants" }), (0, jsx_runtime_1.jsx)(Radio_1.default, { value: 'filteredDescendants', children: "Select Grouped Row and only filtered descendants" })] }) })] })), mode === 'multiRow' && ((0, jsx_runtime_1.jsxs)(Tabs_1.Tabs, { className: "twa:mt-2", children: [(0, jsx_runtime_1.jsx)(Tabs_1.Tabs.Tab, { children: "Select All (in Header) Behaviour" }), (0, jsx_runtime_1.jsx)(Tabs_1.Tabs.Content, { children: (0, jsx_runtime_1.jsxs)(Radio_2.RadioGroup, { orientation: "vertical", value: rowSelection.SelectAllMode ?? 'all', name: "selectAllMode", onRadioChange: (value) => updateRowSelection({ SelectAllMode: value }), children: [(0, jsx_runtime_1.jsx)(Radio_1.default, { value: 'all', children: "All rows" }), (0, jsx_runtime_1.jsx)(Radio_1.default, { value: 'filtered', children: "Filtered rows only" }), (0, jsx_runtime_1.jsx)(Radio_1.default, { value: 'currentPage', children: "Current page only" })] }) })] }))] }))] }));
+    return ((0, jsx_runtime_1.jsxs)(Flex_1.Flex, { flexDirection: "column", className: "twa:gap-3 twa:p-3", children: [(0, jsx_runtime_1.jsxs)(Card_1.Card, { shadow: false, children: [(0, jsx_runtime_1.jsxs)(Card_1.Card.Title, { children: [(0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:font-medium", children: "Row Selection Mode" }), (0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:text-xs twa:opacity-70 twa:font-normal twa:max-w-[520px]", children: "Choose whether row selection is disabled, single row, or multi row" })] }), (0, jsx_runtime_1.jsx)(Card_1.Card.Body, { className: "twa:p-1", children: (0, jsx_runtime_1.jsxs)(Radio_2.RadioGroup, { orientation: "horizontal", variant: "text-only", className: (0, twMerge_1.twMerge)(Radio_1.radioGroupStyling.horizontalTextOnly, 'twa:gap-2 twa:max-w-[500px] twa:bg-background twa:p-2'), value: mode, name: "rowSelectionMode", onRadioChange: handleModeChange, children: [(0, jsx_runtime_1.jsx)(Radio_1.default, { value: false, children: "Disabled" }), (0, jsx_runtime_1.jsx)(Radio_1.default, { value: "singleRow", children: "Single Row" }), (0, jsx_runtime_1.jsx)(Radio_1.default, { value: "multiRow", children: "Multi Row" })] }) })] }), !rowSelection && (0, jsx_runtime_1.jsx)(HelpBlock_1.default, { children: "There is no Row Selection configured for this Layout" }), rowSelection && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { 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: "Row Selection Column Checkboxes" }), (0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:text-xs twa:opacity-70 twa:font-normal twa:max-w-[520px]", children: "Configure checkboxes in the selection column cells and header" })] }), (0, jsx_runtime_1.jsx)(Card_1.Card.Body, { className: "twa:p-1", children: (0, jsx_runtime_1.jsxs)(Flex_1.Flex, { flexDirection: "row", className: "twa:gap-6", children: [(0, jsx_runtime_1.jsx)(CheckBox_1.CheckBox, { className: "twa:flex-1", checked: rowSelection.Checkboxes ?? true, onChange: (checked) => updateRowSelection({ Checkboxes: checked }), children: "Checkboxes in Column Cells" }), mode === 'multiRow' && ((0, jsx_runtime_1.jsx)(CheckBox_1.CheckBox, { className: "twa:flex-1", checked: rowSelection.HeaderCheckbox ?? true, onChange: (checked) => updateRowSelection({ HeaderCheckbox: checked }), children: "Checkbox in Column Header (to enable Select All)" }))] }) })] }), (rowSelection.Checkboxes ?? true) && ((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: "Row Grouping Selection Checkboxes" }), (0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:text-xs twa:opacity-70 twa:font-normal twa:max-w-[520px]", children: "Choose where selection checkboxes appear when row grouping is enabled" })] }), (0, jsx_runtime_1.jsx)(Card_1.Card.Body, { className: "twa:p-1", children: (0, jsx_runtime_1.jsxs)(Radio_2.RadioGroup, { orientation: "vertical", value: rowSelection.CheckboxInGroupColumn ?? false, name: "checkboxLocation", onRadioChange: (value) => updateRowSelection({ CheckboxInGroupColumn: value }), children: [(0, jsx_runtime_1.jsx)(Radio_1.default, { value: false, children: "Display in dedicated Selection Column" }), (0, jsx_runtime_1.jsx)(Radio_1.default, { value: true, children: "Display in Row Grouped Column" })] }) })] })), (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: "Row Click Selection" }), (0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:text-xs twa:opacity-70 twa:font-normal twa:max-w-[520px]", children: "Configure whether users can select or deselect rows by clicking outside the checkbox" })] }), (0, jsx_runtime_1.jsx)(Card_1.Card.Body, { className: "twa:p-1", children: (0, jsx_runtime_1.jsxs)(Radio_2.RadioGroup, { orientation: "vertical", value: rowSelection.EnableClickSelection ?? false, name: "clickSelection", onRadioChange: (value) => updateRowSelection({ EnableClickSelection: value }), children: [(0, jsx_runtime_1.jsx)(Radio_1.default, { value: false, children: "Disabled (Cannot select or deselect by clicking in Row)" }), (0, jsx_runtime_1.jsx)(Radio_1.default, { value: true, children: "Full (Enable selection by clicking in Row and deselection by Ctrl+clicking in Row)" }), (0, jsx_runtime_1.jsx)(Radio_1.default, { value: 'enableSelection', children: "Selection Only (Enable selection by clicking in Row)" }), (0, jsx_runtime_1.jsx)(Radio_1.default, { value: 'enableDeselection', children: "Deselection Only (Enable deselection by Ctrl+clicking in Row)" })] }) })] }), mode === 'multiRow' && !isPivot && ((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: "Grouped Row Selection Behaviour" }), (0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:text-xs twa:opacity-70 twa:font-normal twa:max-w-[520px]", children: "Choose how selection cascades when a grouped row is selected" })] }), (0, jsx_runtime_1.jsx)(Card_1.Card.Body, { className: "twa:p-1", children: (0, jsx_runtime_1.jsxs)(Radio_2.RadioGroup, { orientation: "vertical", value: rowSelection.GroupSelectMode ?? 'self', name: "groupSelectMode", onRadioChange: (value) => updateRowSelection({ GroupSelectMode: value }), children: [(0, jsx_runtime_1.jsx)(Radio_1.default, { value: 'self', children: "Select Grouped Row Only (no cascade)" }), (0, jsx_runtime_1.jsx)(Radio_1.default, { value: 'descendants', children: "Select Grouped Row and all descendants" }), (0, jsx_runtime_1.jsx)(Radio_1.default, { value: 'filteredDescendants', children: "Select Grouped Row and only filtered descendants" })] }) })] })), mode === 'multiRow' && ((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: "Select All Behaviour" }), (0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:text-xs twa:opacity-70 twa:font-normal twa:max-w-[520px]", children: "Choose which rows are selected when the header Select All checkbox is used" })] }), (0, jsx_runtime_1.jsx)(Card_1.Card.Body, { className: "twa:p-1", children: (0, jsx_runtime_1.jsxs)(Radio_2.RadioGroup, { orientation: "vertical", value: rowSelection.SelectAllMode ?? 'all', name: "selectAllMode", onRadioChange: (value) => updateRowSelection({ SelectAllMode: value }), children: [(0, jsx_runtime_1.jsx)(Radio_1.default, { value: 'all', children: "All rows" }), (0, jsx_runtime_1.jsx)(Radio_1.default, { value: 'filtered', children: "Filtered rows only" }), (0, jsx_runtime_1.jsx)(Radio_1.default, { value: 'currentPage', children: "Current page only" })] }) })] }))] }))] }));
 };
 exports.RowSelectionSection = RowSelectionSection;