@adaptabletools/adaptable-cjs 22.1.1 → 23.0.0-canary.1

package/src/View/Layout/Wizard/LayoutWizard.js

@@ -2,6 +2,7 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.LayoutWizard = void 0;
 const tslib_1 = require("tslib");
+const jsx_runtime_1 = require("react/jsx-runtime");
 const React = tslib_1.__importStar(require("react"));
 const LayoutRedux = tslib_1.__importStar(require("../../../Redux/ActionsReducers/LayoutRedux"));
 const OnePageAdaptableWizard_1 = require("../../Wizard/OnePageAdaptableWizard");
@@ -23,6 +24,10 @@ const isPivotLayout_1 = require("../../../Utilities/isPivotLayout");
 const PivotRowGroupingSection_1 = require("./sections/PivotRowGroupingSection");
 const PivotAggregationsSection_1 = require("./sections/PivotAggregationsSection");
 const Flex_1 = require("../../../components/Flex");
+const getLayoutWizardTitle = (layout, moduleFriendlyName) => {
+    const layoutName = layout.Name?.trim();
+    return layoutName ? `${moduleFriendlyName} (${layoutName})` : moduleFriendlyName;
+};
 const LayoutWizard = (props) => {
     const dispatch = (0, react_redux_1.useDispatch)();
     const adaptable = (0, AdaptableContext_1.useAdaptable)();
@@ -76,7 +81,8 @@ const LayoutWizard = (props) => {
         props.onFinishWizard(layout);
     };
     const layoutSupportedFeatures = adaptable.api.layoutApi.internalApi.getLayoutSupportedFeatures();
-    return (0, isPivotLayout_1.isPivotLayout)(layout) ? (React.createElement(OnePageAdaptableWizard_1.OnePageAdaptableWizard, { defaultCurrentSectionName: props.defaultCurrentSectionName, moduleInfo: props.moduleInfo, data: layout, onHide: props.onCloseWizard, onFinish: handleFinish, sections: [
+    const wizardTitle = getLayoutWizardTitle(layout, props.moduleInfo.FriendlyName);
+    return (0, isPivotLayout_1.isPivotLayout)(layout) ? ((0, jsx_runtime_1.jsx)(OnePageAdaptableWizard_1.OnePageAdaptableWizard, { defaultCurrentSectionName: props.defaultCurrentSectionName, moduleInfo: props.moduleInfo, moduleName: wizardTitle, data: layout, onHide: props.onCloseWizard, onFinish: handleFinish, sections: [
             {
                 title: 'Settings',
                 details: 'Configure Pivot Layout',
@@ -89,81 +95,72 @@ const LayoutWizard = (props) => {
                     }
                     return true;
                 },
-                renderSummary: () => React.createElement(SettingsSection_1.SettingsSectionSummary, null),
-                render: () => (React.createElement(Flex_1.Box, { className: "twa:p-2" },
-                    React.createElement(SettingsSection_1.SettingsSection, { onChange: (newLayout) => setLayout(newLayout) }))),
+                renderSummary: () => (0, jsx_runtime_1.jsx)(SettingsSection_1.SettingsSectionSummary, {}),
+                render: () => ((0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:p-2", children: (0, jsx_runtime_1.jsx)(SettingsSection_1.SettingsSection, { onChange: (newLayout) => setLayout(newLayout) }) })),
             },
             {
                 title: 'Pivot Row Groups',
                 isVisible: () => layoutSupportedFeatures.PivotColumns && layoutSupportedFeatures.RowGroupedColumns,
                 details: 'Configure Pivot Row Grouping',
-                renderSummary: () => React.createElement(PivotRowGroupingSection_1.PivotRowGroupingSectionSummary, null),
-                render: () => (React.createElement(Flex_1.Box, { className: "twa:p-2 twa:h-full" },
-                    React.createElement(PivotRowGroupingSection_1.PivotRowGroupingSection, { onChange: (newLayout) => {
+                renderSummary: () => (0, jsx_runtime_1.jsx)(PivotRowGroupingSection_1.PivotRowGroupingSectionSummary, {}),
+                render: () => ((0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:p-2 twa:h-full", children: (0, jsx_runtime_1.jsx)(PivotRowGroupingSection_1.PivotRowGroupingSection, { onChange: (newLayout) => {
                             setLayout(newLayout);
-                        } }))),
+                        } }) })),
             },
             {
                 title: 'Pivot Columns',
                 details: 'Select Pivot Columns',
                 isVisible: () => layoutSupportedFeatures.PivotColumns,
-                renderSummary: () => React.createElement(PivotColumnsSection_1.PivotColumnsSectionSummary, null),
-                render: () => (React.createElement(Flex_1.Box, { className: "twa:p-2 twa:h-full" },
-                    React.createElement(PivotColumnsSection_1.PivotColumnsSection, { onChange: (newLayout) => setLayout(newLayout) }))),
+                renderSummary: () => (0, jsx_runtime_1.jsx)(PivotColumnsSection_1.PivotColumnsSectionSummary, {}),
+                render: () => ((0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:p-2 twa:h-full", children: (0, jsx_runtime_1.jsx)(PivotColumnsSection_1.PivotColumnsSection, { onChange: (newLayout) => setLayout(newLayout) }) })),
             },
             {
                 title: 'Pivot Aggregations',
                 isVisible: () => layoutSupportedFeatures.PivotAggregationColumns && layoutSupportedFeatures.PivotColumns,
                 details: 'Select Pivot Column Aggregations',
-                renderSummary: () => React.createElement(PivotAggregationsSection_1.PivotAggregationsSectionSummary, null),
+                renderSummary: () => (0, jsx_runtime_1.jsx)(PivotAggregationsSection_1.PivotAggregationsSectionSummary, {}),
                 isValid: (data) => (0, PivotAggregationsSection_1.isPivotAggregationsSectionValid)(data),
-                render: () => (React.createElement(Flex_1.Box, { className: "twa:p-2 twa:h-full" },
-                    React.createElement(PivotAggregationsSection_1.PivotAggregationsSection, { onChange: (layout) => {
+                render: () => ((0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:p-2 twa:h-full", children: (0, jsx_runtime_1.jsx)(PivotAggregationsSection_1.PivotAggregationsSection, { onChange: (layout) => {
                             const newLayout = (0, Helper_1.cloneObject)(layout);
                             setLayout(newLayout);
-                        } }))),
+                        } }) })),
             },
             {
                 title: 'Sort',
                 isVisible: () => layoutSupportedFeatures.ColumnSorts,
-                renderSummary: () => React.createElement(SortSection_1.SortSectionSummary, null),
+                renderSummary: () => (0, jsx_runtime_1.jsx)(SortSection_1.SortSectionSummary, {}),
                 details: 'Configure Aggregated Column Sorts',
-                render: () => (React.createElement(Flex_1.Box, { className: "twa:p-2 twa:h-full" },
-                    React.createElement(SortSection_1.SortSection, { onChange: (newLayout) => setLayout(newLayout) }))),
+                render: () => ((0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:p-2 twa:h-full", children: (0, jsx_runtime_1.jsx)(SortSection_1.SortSection, { onChange: (newLayout) => setLayout(newLayout) }) })),
             },
             {
                 title: 'Column Filters',
                 isVisible: () => layoutSupportedFeatures.ColumnFilters,
                 isValid: (layout) => (0, FilterSection_1.isColumnFiltersValid)(layout),
                 details: 'Set Aggregated Column Filters',
-                renderSummary: () => React.createElement(FilterSection_1.FilterSectionSummary, null),
-                render: () => (React.createElement(Flex_1.Box, { className: "twa:p-2 twa:h-full" },
-                    React.createElement(FilterSection_1.FilterSection, { onChange: (newLayout) => setLayout(newLayout) }))),
+                renderSummary: () => (0, jsx_runtime_1.jsx)(FilterSection_1.FilterSectionSummary, {}),
+                render: () => ((0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:p-2 twa:h-full", children: (0, jsx_runtime_1.jsx)(FilterSection_1.FilterSection, { onChange: (newLayout) => setLayout(newLayout) }) })),
             },
             {
                 title: 'Grid Filter',
                 isVisible: () => layoutSupportedFeatures.GridFilter,
                 isValid: (layout) => (0, GridFilterSection_1.isGridFiltersValid)(layout, adaptable.api),
                 details: 'Set Grid Filter',
-                renderSummary: () => React.createElement(GridFilterSection_1.GridFilterSectionSummary, null),
-                render: () => (React.createElement(Flex_1.Box, { className: "twa:p-2 twa:h-full" },
-                    React.createElement(GridFilterSection_1.GridFilterSection, { onChange: (newLayout) => setLayout(newLayout) }))),
+                renderSummary: () => (0, jsx_runtime_1.jsx)(GridFilterSection_1.GridFilterSectionSummary, {}),
+                render: () => ((0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:p-2 twa:h-full", children: (0, jsx_runtime_1.jsx)(GridFilterSection_1.GridFilterSection, { onChange: (newLayout) => setLayout(newLayout) }) })),
             },
             {
                 title: 'Row Selection',
                 details: 'Configure Row Selection',
-                renderSummary: () => React.createElement(RowSelectionSection_1.RowSelectionSectionSummary, null),
-                render: () => (React.createElement(Flex_1.Box, { className: "twa:p-2" },
-                    React.createElement(RowSelectionSection_1.RowSelectionSection, { onChange: (newLayout) => setLayout(newLayout) }))),
+                renderSummary: () => (0, jsx_runtime_1.jsx)(RowSelectionSection_1.RowSelectionSectionSummary, {}),
+                render: () => ((0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:p-2", children: (0, jsx_runtime_1.jsx)(RowSelectionSection_1.RowSelectionSection, { onChange: (newLayout) => setLayout(newLayout) }) })),
             },
             '-',
             {
                 details: 'Review your Pivot Layout',
-                render: () => (React.createElement(Flex_1.Box, { className: "twa:p-2" },
-                    React.createElement(OnePageAdaptableWizard_1.OnePageWizardSummary, null))),
+                render: () => ((0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:p-2", children: (0, jsx_runtime_1.jsx)(OnePageAdaptableWizard_1.OnePageWizardSummary, {}) })),
                 title: 'Summary',
             },
-        ] })) : (React.createElement(OnePageAdaptableWizard_1.OnePageAdaptableWizard, { defaultCurrentSectionName: props.defaultCurrentSectionName, moduleInfo: props.moduleInfo, data: layout, onHide: props.onCloseWizard, onFinish: handleFinish, sections: [
+        ] })) : ((0, jsx_runtime_1.jsx)(OnePageAdaptableWizard_1.OnePageAdaptableWizard, { defaultCurrentSectionName: props.defaultCurrentSectionName, moduleInfo: props.moduleInfo, moduleName: wizardTitle, data: layout, onHide: props.onCloseWizard, onFinish: handleFinish, sections: [
             {
                 title: 'Settings',
                 details: 'Configure Table Layout',
@@ -176,35 +173,31 @@ const LayoutWizard = (props) => {
                     }
                     return true;
                 },
-                renderSummary: () => React.createElement(SettingsSection_1.SettingsSectionSummary, null),
-                render: () => (React.createElement(Flex_1.Box, { className: "twa:p-2" },
-                    React.createElement(SettingsSection_1.SettingsSection, { onChange: (newLayout) => setLayout(newLayout) }))),
+                renderSummary: () => (0, jsx_runtime_1.jsx)(SettingsSection_1.SettingsSectionSummary, {}),
+                render: () => ((0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:p-2", children: (0, jsx_runtime_1.jsx)(SettingsSection_1.SettingsSection, { onChange: (newLayout) => setLayout(newLayout) }) })),
             },
             {
                 title: 'Row Groups',
                 isVisible: () => layoutSupportedFeatures.RowGroupedColumns,
                 isValid: RowSummarySection_1.areSummaryRowsValid,
                 details: 'Configure Row Grouping',
-                renderSummary: () => React.createElement(RowGroupingSection_1.RowGroupingSectionSummary, null),
-                render: () => (React.createElement(Flex_1.Box, { className: "twa:p-2 twa:h-full" },
-                    React.createElement(RowGroupingSection_1.RowGroupingSection, { onChange: setLayout }))),
+                renderSummary: () => (0, jsx_runtime_1.jsx)(RowGroupingSection_1.RowGroupingSectionSummary, {}),
+                render: () => ((0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:p-2 twa:h-full", children: (0, jsx_runtime_1.jsx)(RowGroupingSection_1.RowGroupingSection, { onChange: setLayout }) })),
             },
             {
                 title: 'Columns',
                 details: 'Select Columns',
                 isVisible: () => true,
-                renderSummary: () => React.createElement(ColumnsSection_1.ColumnsSectionSummary, null),
-                render: () => (React.createElement(Flex_1.Box, { className: "twa:p-2 twa:h-full" },
-                    React.createElement(ColumnsSection_1.ColumnsSection, { onChange: setLayout }))),
+                renderSummary: () => (0, jsx_runtime_1.jsx)(ColumnsSection_1.ColumnsSectionSummary, {}),
+                render: () => ((0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:p-2 twa:h-full", children: (0, jsx_runtime_1.jsx)(ColumnsSection_1.ColumnsSection, { onChange: setLayout }) })),
             },
             {
                 title: 'Aggregations',
                 isVisible: () => layoutSupportedFeatures.TableAggregationColumns,
                 details: 'Select Column Aggregations',
-                renderSummary: () => React.createElement(AggregationsSection_1.AggregationsSectionSummary, null),
+                renderSummary: () => (0, jsx_runtime_1.jsx)(AggregationsSection_1.AggregationsSectionSummary, {}),
                 isValid: (data) => (0, AggregationsSection_1.isAggregationsSectionValid)(data),
-                render: () => (React.createElement(Flex_1.Box, { className: "twa:p-2 twa:h-full" },
-                    React.createElement(AggregationsSection_1.AggregationsSection, { onChange: (layout) => {
+                render: () => ((0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:p-2 twa:h-full", children: (0, jsx_runtime_1.jsx)(AggregationsSection_1.AggregationsSection, { onChange: (layout) => {
                             let newLayout = (0, Helper_1.cloneObject)(layout);
                             // if we do not have an weighted avg col, we need to clear the row summary if one exists
                             if (newLayout.RowSummaries) {
@@ -233,54 +226,48 @@ const LayoutWizard = (props) => {
                                 });
                             }
                             setLayout(newLayout);
-                        } }))),
+                        } }) })),
             },
             {
                 title: 'Row Summaries',
                 details: 'Configure Row Summaries',
-                renderSummary: () => React.createElement(RowSummarySection_1.RowSummarySectionSummary, null),
+                renderSummary: () => (0, jsx_runtime_1.jsx)(RowSummarySection_1.RowSummarySectionSummary, {}),
                 isVisible: () => layoutSupportedFeatures.RowSummaries,
-                render: () => (React.createElement(Flex_1.Box, { className: "twa:p-2 twa:h-full" },
-                    React.createElement(RowSummarySection_1.RowSummarySection, { onChange: setLayout }))),
+                render: () => ((0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:p-2 twa:h-full", children: (0, jsx_runtime_1.jsx)(RowSummarySection_1.RowSummarySection, { onChange: setLayout }) })),
             },
             {
                 title: 'Sort',
                 isVisible: () => layoutSupportedFeatures.ColumnSorts,
-                renderSummary: () => React.createElement(SortSection_1.SortSectionSummary, null),
+                renderSummary: () => (0, jsx_runtime_1.jsx)(SortSection_1.SortSectionSummary, {}),
                 details: 'Configure Column Sorts',
-                render: () => (React.createElement(Flex_1.Box, { className: "twa:p-2 twa:h-full" },
-                    React.createElement(SortSection_1.SortSection, { onChange: (newLayout) => setLayout(newLayout) }))),
+                render: () => ((0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:p-2 twa:h-full", children: (0, jsx_runtime_1.jsx)(SortSection_1.SortSection, { onChange: (newLayout) => setLayout(newLayout) }) })),
             },
             {
                 title: 'Column Filters',
                 isVisible: () => layoutSupportedFeatures.ColumnFilters,
                 isValid: (layout) => (0, FilterSection_1.isColumnFiltersValid)(layout),
                 details: 'Set Column Filters',
-                renderSummary: () => React.createElement(FilterSection_1.FilterSectionSummary, null),
-                render: () => (React.createElement(Flex_1.Box, { className: "twa:p-2 twa:h-full" },
-                    React.createElement(FilterSection_1.FilterSection, { onChange: (newLayout) => setLayout(newLayout) }))),
+                renderSummary: () => (0, jsx_runtime_1.jsx)(FilterSection_1.FilterSectionSummary, {}),
+                render: () => ((0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:p-2 twa:h-full", children: (0, jsx_runtime_1.jsx)(FilterSection_1.FilterSection, { onChange: (newLayout) => setLayout(newLayout) }) })),
             },
             {
                 title: 'Grid Filter',
                 isVisible: () => layoutSupportedFeatures.GridFilter,
                 isValid: (layout) => (0, GridFilterSection_1.isGridFiltersValid)(layout, adaptable.api),
                 details: 'Set Grid Filter',
-                renderSummary: () => React.createElement(GridFilterSection_1.GridFilterSectionSummary, null),
-                render: () => (React.createElement(Flex_1.Box, { className: "twa:p-2 twa:h-full" },
-                    React.createElement(GridFilterSection_1.GridFilterSection, { onChange: (newLayout) => setLayout(newLayout) }))),
+                renderSummary: () => (0, jsx_runtime_1.jsx)(GridFilterSection_1.GridFilterSectionSummary, {}),
+                render: () => ((0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:p-2 twa:h-full", children: (0, jsx_runtime_1.jsx)(GridFilterSection_1.GridFilterSection, { onChange: (newLayout) => setLayout(newLayout) }) })),
             },
             {
                 title: 'Row Selection',
                 details: 'Configure Row Selection',
-                renderSummary: () => React.createElement(RowSelectionSection_1.RowSelectionSectionSummary, null),
-                render: () => (React.createElement(Flex_1.Box, { className: "twa:p-2" },
-                    React.createElement(RowSelectionSection_1.RowSelectionSection, { onChange: (newLayout) => setLayout(newLayout) }))),
+                renderSummary: () => (0, jsx_runtime_1.jsx)(RowSelectionSection_1.RowSelectionSectionSummary, {}),
+                render: () => ((0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:p-2", children: (0, jsx_runtime_1.jsx)(RowSelectionSection_1.RowSelectionSection, { onChange: (newLayout) => setLayout(newLayout) }) })),
             },
             '-',
             {
                 details: 'Review your Table Layout',
-                render: () => (React.createElement(Flex_1.Box, { className: "twa:p-2" },
-                    React.createElement(OnePageAdaptableWizard_1.OnePageWizardSummary, null))),
+                render: () => ((0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:p-2", children: (0, jsx_runtime_1.jsx)(OnePageAdaptableWizard_1.OnePageWizardSummary, {}) })),
                 title: 'Summary',
             },
         ] }));

package/src/View/Layout/Wizard/getGridFilterPreview.js

@@ -1,15 +1,13 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.getGridFilterViewItems = void 0;
-const tslib_1 = require("tslib");
-const React = tslib_1.__importStar(require("react"));
+const jsx_runtime_1 = require("react/jsx-runtime");
 const ExpressionPreview_1 = require("../../../components/ExpressionEditor/ExpressionPreview");
 const Tag_1 = require("../../../components/Tag");
 const getGridFilterViewItems = (layout) => {
     return {
         name: 'Grid Filter',
-        view: (React.createElement(Tag_1.Tag, null,
-            React.createElement(ExpressionPreview_1.ExpressionPreview, { query: { BooleanExpression: layout.GridFilter?.Expression } }))),
+        view: ((0, jsx_runtime_1.jsx)(Tag_1.Tag, { children: (0, jsx_runtime_1.jsx)(ExpressionPreview_1.ExpressionPreview, { query: { BooleanExpression: layout.GridFilter?.Expression } }) })),
     };
 };
 exports.getGridFilterViewItems = getGridFilterViewItems;

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

@@ -1,6 +1,7 @@
 import * as React from 'react';
-import { Layout, TableLayout } from '../../../../../types';
-export declare const isAggregationsSectionValid: (data: Layout) => true | string;
+import { TableLayout } from '../../../../../types';
+import { validateTableLayoutAggregations } from '../../../../Aggregation/validateParameterizedAggregations';
+export declare const isAggregationsSectionValid: typeof validateTableLayoutAggregations;
 export declare const AggregationsSectionSummary: React.FunctionComponent;
 interface AggregationsSectionProps {
     onChange: (data: TableLayout) => void;

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

@@ -2,145 +2,43 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.AggregationsSection = exports.AggregationsSectionSummary = exports.isAggregationsSectionValid = void 0;
 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 Tabs_1 = require("../../../../components/Tabs");
 const Tag_1 = require("../../../../components/Tag");
+const validateParameterizedAggregations_1 = require("../../../../Aggregation/validateParameterizedAggregations");
+const parameterizedAggregationHeader_1 = require("../../../../Aggregation/parameterizedAggregationHeader");
+const parameterizedAggregationWizardHelpers_1 = require("../../../../Aggregation/parameterizedAggregationWizardHelpers");
 const AdaptableContext_1 = require("../../../AdaptableContext");
 const ValueSelector_1 = require("../../../Components/ValueSelector");
 const OnePageAdaptableWizard_1 = require("../../../Wizard/OnePageAdaptableWizard");
 const Utilities_1 = require("./Utilities");
 const ColumnGroupTag_1 = require("../../../Components/ColumnGroupTag");
 const ArrayExtensions_1 = tslib_1.__importDefault(require("../../../../Utilities/Extensions/ArrayExtensions"));
-const Select_1 = require("../../../../components/Select");
 const StringExtensions_1 = tslib_1.__importDefault(require("../../../../Utilities/Extensions/StringExtensions"));
 const Flex_1 = require("../../../../components/Flex");
-const WEIGHTED_AVERAGE_AGG_FN_NAME = 'weightedAvg';
-const isAggregationsSectionValid = (data) => {
-    const weightedAvg = data.TableAggregationColumns
-        ? (data.TableAggregationColumns || []).find(({ AggFunc }) => typeof AggFunc === 'object' &&
-            AggFunc.type === 'weightedAverage')?.AggFunc
-        : null;
-    if (weightedAvg && !weightedAvg.weightedColumnId) {
-        return 'Weighted Average requires a weight column to be selected.';
-    }
-    return true;
-};
-exports.isAggregationsSectionValid = isAggregationsSectionValid;
+const NewSelect_1 = require("../../../../components/NewSelect");
+const ParameterizedAggFuncPicker_1 = require("./ParameterizedAggFuncPicker");
+exports.isAggregationsSectionValid = validateParameterizedAggregations_1.validateTableLayoutAggregations;
 const AggregationsSectionSummary = () => {
     const adaptable = (0, AdaptableContext_1.useAdaptable)();
     const { data: layout } = (0, OnePageAdaptableWizard_1.useOnePageAdaptableWizardContext)();
     const entries = layout.TableAggregationColumns || [];
     let content = null;
     if (entries.length) {
-        content = (React.createElement(FormLayout_1.default, null, entries.map(({ ColumnId, AggFunc }) => (React.createElement(FormLayout_1.FormRow, { key: ColumnId, label: adaptable.api.columnApi.getFriendlyNameForColumnId(ColumnId) },
-            React.createElement(Tag_1.Tag, null, typeof AggFunc === 'object' ? AggFunc.type : AggFunc))))));
+        content = ((0, jsx_runtime_1.jsx)(FormLayout_1.default, { children: entries.map(({ ColumnId, AggFunc }) => ((0, jsx_runtime_1.jsx)(FormLayout_1.FormRow, { label: adaptable.api.columnApi.getFriendlyNameForColumnId(ColumnId), children: (0, jsx_runtime_1.jsx)(Tag_1.Tag, { children: (0, parameterizedAggregationHeader_1.getParameterizedAggregationDisplayName)(adaptable.api, AggFunc, ColumnId) }) }, ColumnId))) }));
     }
     else {
-        content = React.createElement(Tag_1.Tag, null, "No Aggregations");
+        content = (0, jsx_runtime_1.jsx)(Tag_1.Tag, { children: "No Aggregations" });
     }
-    return React.createElement(Flex_1.Box, null, content);
+    return (0, jsx_runtime_1.jsx)(Flex_1.Box, { children: content });
 };
 exports.AggregationsSectionSummary = AggregationsSectionSummary;
 const ColumnRow = (props) => {
-    const adaptable = (0, AdaptableContext_1.useAdaptable)();
     const aggValue = props.layout?.TableAggregationColumns?.find((agg) => agg.ColumnId === props.column.columnId)?.AggFunc;
-    const adaptableAggFunctions = [];
-    if (props.column.dataType === 'number' && props.column.aggregatable) {
-        adaptableAggFunctions.push(WEIGHTED_AVERAGE_AGG_FN_NAME);
-    }
-    // props.column.availableAggregationFunctions is null for non-aggregatable columns
-    // but we want to support non-aggregatable columns that are specified to be aggregated by default
-    // so we need to allow this. as soon as they will be unchecked from aggregation, they will no longer be displayed in the aggregation wizard.
-    // but until the user checks them off, we want to allow them.
-    const availableAggregationFunctions = props.column.availableAggregationFunctions || [];
-    const aggOptions = [...new Set([...availableAggregationFunctions, ...adaptableAggFunctions])].map((fnName) => {
-        return {
-            label: fnName,
-            onClick: () => {
-                let aggCols = props.layout.TableAggregationColumns || [];
-                if (!aggCols) {
-                    return;
-                }
-                const AggFuncValue = fnName === WEIGHTED_AVERAGE_AGG_FN_NAME
-                    ? {
-                        type: 'weightedAverage',
-                        weightedColumnId: null,
-                    }
-                    : fnName;
-                let found = false;
-                aggCols = aggCols.map(({ ColumnId, AggFunc }) => {
-                    if (ColumnId === props.column.columnId) {
-                        found = true;
-                        return {
-                            ColumnId,
-                            AggFunc: AggFuncValue,
-                        };
-                    }
-                    return { ColumnId, AggFunc };
-                });
-                if (!found) {
-                    aggCols.push({
-                        ColumnId: props.column.columnId,
-                        AggFunc: AggFuncValue,
-                    });
-                }
-                props.onChangeAggFunction(aggCols);
-            },
-        };
-    });
-    const numericColumnsOptions = props.numberColumns
-        .filter((col) => col.columnId !== props.column.columnId)
-        .map((col) => {
-        return {
-            label: col.friendlyName,
-            onClick: () => {
-                let aggCols = [...(props.layout.TableAggregationColumns || [])];
-                if (!aggCols || !aggCols.length) {
-                    return;
-                }
-                const AggFuncValue = {
-                    type: 'weightedAverage',
-                    weightedColumnId: col.columnId,
-                };
-                let found = false;
-                aggCols = aggCols.map(({ ColumnId, AggFunc }) => {
-                    if (ColumnId === props.column.columnId) {
-                        found = true;
-                        return {
-                            ColumnId,
-                            AggFunc: AggFuncValue,
-                        };
-                    }
-                    return { ColumnId, AggFunc };
-                });
-                if (!found) {
-                    aggCols.push({
-                        ColumnId: props.column.columnId,
-                        AggFunc: AggFuncValue,
-                    });
-                }
-                props.onChangeAggFunction(aggCols);
-            },
-        };
-    });
-    const currentAggFnName = props.aggregationColumnsMap[props.column.columnId];
-    let weightName = null;
-    if (typeof aggValue === 'object' && aggValue.type === 'weightedAverage') {
-        weightName = aggValue.weightedColumnId
-            ? adaptable.api.columnApi.getFriendlyNameForColumnId(aggValue.weightedColumnId)
-            : 'Select Weight';
-    }
-    return (React.createElement(Flex_1.Flex, { alignItems: "center" },
-        props.column.friendlyName,
-        React.createElement(ColumnGroupTag_1.ColumnGroupTag, { column: props.column }),
-        aggValue && (React.createElement(DropdownButton_1.default, { columns: ['label'], items: aggOptions, className: "twa:ml-2" }, currentAggFnName)),
-        currentAggFnName === WEIGHTED_AVERAGE_AGG_FN_NAME && (React.createElement(Flex_1.Flex, { className: "twa:bg-primary twa:ml-3", alignItems: "center" },
-            React.createElement(Flex_1.Box, null, "Weight"),
-            ' ',
-            React.createElement(DropdownButton_1.default, { columns: ['label'], items: numericColumnsOptions, className: "twa:ml-2" }, weightName)))));
+    return ((0, jsx_runtime_1.jsxs)(Flex_1.Flex, { alignItems: "center", 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.TableAggregationColumns || [], onChangeEntries: props.onChangeAggFunction })] }));
 };
 const AggregationsSection = (props) => {
     const adaptable = (0, AdaptableContext_1.useAdaptable)();
@@ -150,8 +48,6 @@ const AggregationsSection = (props) => {
     const numberColumns = adaptable.api.columnApi.getNumericColumns();
     const allAggregatableColumnIds = allAggregableColumns.map((col) => col.columnId);
     (layout.TableAggregationColumns || []).forEach((agg) => {
-        // we need to also display the columns currently aggregated,
-        // even if they are not aggregatable
         if (!allAggregatableColumnIds.includes(agg.ColumnId)) {
             allAggregatableColumnIds.push(agg.ColumnId);
         }
@@ -186,47 +82,29 @@ const AggregationsSection = (props) => {
             acc[col.columnId] = col;
             return acc;
         }, {});
-        return (layout.TableAggregationColumns || []).reduce((acc, { ColumnId: colId, AggFunc }) => {
-            let fn = AggFunc;
-            let fnName = '';
-            if (typeof fn === 'boolean') {
-                fnName = allColumnsMap[colId].aggregationFunction;
-            }
-            if (typeof fn === 'object' && fn.type === 'weightedAverage') {
-                fnName = WEIGHTED_AVERAGE_AGG_FN_NAME;
-            }
-            else if (typeof fn === 'string') {
-                fnName = fn;
-            }
-            acc[colId] = fnName;
-            return acc;
-        }, {});
-    }, [layout]);
+        return (0, parameterizedAggregationWizardHelpers_1.buildAggregationColumnsMap)(layout.TableAggregationColumns || [], allColumnsMap);
+    }, [layout, allColumns]);
     const handleSuppressAggFuncInHeader = (checked) => {
         props.onChange({
             ...layout,
             SuppressAggFuncInHeader: checked,
         });
     };
-    return (React.createElement(Tabs_1.Tabs, { style: { height: '100%' } },
-        React.createElement(Tabs_1.Tabs.Tab, null, "Column Aggregations"),
-        React.createElement(Tabs_1.Tabs.Content, null,
-            React.createElement(Flex_1.Flex, null,
-                React.createElement(FormLayout_1.default, null,
-                    React.createElement(FormLayout_1.FormRow, { label: 'Omit Aggregation from Header' },
-                        React.createElement(CheckBox_1.CheckBox, { checked: layout.SuppressAggFuncInHeader, onChange: handleSuppressAggFuncInHeader })),
-                    React.createElement(FormLayout_1.FormRow, { label: 'Grand Total Row' },
-                        React.createElement(Select_1.Select, { style: { width: 160 }, options: ['top', 'bottom', 'pinnedTop', 'pinnedBottom'].map((position) => {
-                                return {
-                                    label: StringExtensions_1.default.CamelCaseToHumanText(position),
-                                    value: position,
-                                };
-                            }), placeholder: "Off", value: layout.GrandTotalRow, onChange: (value) => {
-                                props.onChange({
-                                    ...layout,
-                                    GrandTotalRow: value,
-                                });
-                            }, isClearable: true })))),
-            React.createElement(ValueSelector_1.ValueSelector, { showFilterInput: true, filter: Utilities_1.columnFilter, toIdentifier: (option) => `${option.columnId}`, toLabel: (option) => option.friendlyName ?? option.columnId, toListLabel: (column) => (React.createElement(ColumnRow, { onChangeAggFunction: handleAggregationChange, layout: layout, column: column, aggregationColumnsMap: aggregationColumnsMap, numberColumns: numberColumns })), options: sortedAggregableColumns, value: (layout.TableAggregationColumns || []).map((agg) => agg.ColumnId), allowReorder: () => true, onChange: handleColumnsSelectionChange }))));
+    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, { 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-[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.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)(ColumnRow, { onChangeAggFunction: handleAggregationChange, layout: layout, column: column, aggregationColumnsMap: aggregationColumnsMap, numberColumns: numberColumns })), options: sortedAggregableColumns, value: (layout.TableAggregationColumns || []).map((agg) => agg.ColumnId), allowReorder: () => true, onChange: handleColumnsSelectionChange })] })] }));
 };
 exports.AggregationsSection = AggregationsSection;