@adaptabletools/adaptable 23.1.0 → 24.0.0-canary.0

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

@@ -1,19 +1,20 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import * as React from 'react';
-import { getLayoutFilterViewItems } from '../../../../Strategy/Utilities/Layout/getLayoutFilterViewItems';
-import * as ModuleConstants from '../../../../Utilities/Constants/ModuleConstants';
+import StringExtensions from '../../../../Utilities/Extensions/StringExtensions';
+import { getLayoutFilterViewItems } from '../../../../View/ObjectItemViews/Layout/getLayoutFilterViewItems';
 import { Tag } from '../../../../components/Tag';
 import { useAdaptable } from '../../../AdaptableContext';
-import { AdaptableObjectListItemView } from '../../../Components/AdaptableObjectList/AdaptableObjectList';
 import { ColumnSelector } from '../../../Components/Selectors/ColumnSelector';
 import { useOnePageAdaptableWizardContext } from '../../../Wizard/OnePageAdaptableWizard';
-import { LayoutColumnFilter } from '../../../Components/ColumnFilter/LayoutColumnFilter';
-import { Box } from '../../../../components/Flex';
+import { LayoutColumnFilterCard } from '../../../Filter/ColumnFilter/LayoutColumnFilterCard';
+import { Box, Flex } from '../../../../components/Flex';
 import { Card } from '../../../../components/Card';
+const isColumnFilterConfigured = (columnFilter) => StringExtensions.IsNotNullOrEmpty(columnFilter?.Expression) ||
+    StringExtensions.IsNotNullOrEmpty(columnFilter?.PreferredFilter);
 export const isColumnFiltersValid = (layout) => {
-    const invalidColumnFilters = (layout.ColumnFilters ?? [])?.filter((columnFilter) => !columnFilter?.Predicates[0]?.PredicateId);
+    const invalidColumnFilters = (layout.ColumnFilters ?? [])?.filter((columnFilter) => !isColumnFilterConfigured(columnFilter));
     if (invalidColumnFilters.length > 0) {
-        return 'Please select a predicate for each column filter.';
+        return 'Please configure a filter for each selected column.';
     }
     return true;
 };
@@ -24,8 +25,6 @@ export const FilterSectionSummary = () => {
     return (_jsx(Box, { children: fitlerViewItems.values.length ? (fitlerViewItems.values.map((value) => (_jsx(Tag, { className: "twa:mb-1 twa:mr-1", children: value }, value)))) : (_jsx(Tag, { children: "No Column Filters" })) }));
 };
 export const FilterSection = (props) => {
-    const adaptable = useAdaptable();
-    const filterModule = adaptable.ModuleService.getModuleById(ModuleConstants.ColumnFilterModuleId);
     const { data: layout } = useOnePageAdaptableWizardContext();
     const layoutFilters = layout.ColumnFilters ?? [];
     const handleDelete = React.useCallback((columnFilter) => {
@@ -33,41 +32,22 @@ export const FilterSection = (props) => {
             ...layout,
             ColumnFilters: layoutFilters.filter((layoutFilter) => layoutFilter.ColumnId !== columnFilter.ColumnId),
         });
-    }, [layout]);
-    const handlePredicateEdit = React.useCallback((columnFilter) => {
+    }, [layout, layoutFilters, props]);
+    const handleColumnFilterChange = React.useCallback((columnFilter) => {
         props.onChange({
             ...layout,
             ColumnFilters: layoutFilters.map((layoutFilter) => layoutFilter.ColumnId === columnFilter.ColumnId ? { ...columnFilter } : layoutFilter),
         });
-    }, [layout.ColumnFilters]);
-    return (_jsxs(Box, { className: "twa:gap-3 twa:p-3 twa:flex twa:flex-col", children: [_jsxs(Card, { shadow: false, children: [_jsxs(Card.Title, { children: [_jsx(Box, { className: "twa:font-medium", children: "Add Column Filter" }), _jsx(Box, { className: "twa:text-xs twa:opacity-70 twa:font-normal twa:max-w-[520px]", children: "Select a column and then create a Filter" })] }), _jsx(Card.Body, { className: "twa:p-1", children: _jsx(ColumnSelector, { filterColumn: (column) => column.filterable && !layoutFilters.some((f) => f.ColumnId === column.columnId), placeholder: "Select a Column", onChange: (option) => {
+    }, [layout, layoutFilters, props]);
+    return (_jsxs(Box, { className: "twa:gap-3 twa:p-3 twa:flex twa:flex-col", children: [layoutFilters.length > 0 && (_jsxs(Card, { shadow: false, children: [_jsxs(Card.Title, { children: [_jsx(Box, { className: "twa:font-medium", children: "Column Filters" }), _jsx(Box, { className: "twa:text-xs twa:opacity-70 twa:font-normal twa:max-w-[520px]", children: "Configure the filter for each selected column in this Layout" })] }), _jsx(Card.Body, { className: "twa:p-1", children: _jsx(Flex, { flexDirection: "column", className: "twa:gap-2", children: layoutFilters.map((columnFilter) => (_jsx(LayoutColumnFilterCard, { columnFilter: columnFilter, onChange: handleColumnFilterChange, onDelete: () => handleDelete(columnFilter) }, columnFilter.ColumnId))) }) })] })), _jsxs(Card, { shadow: false, children: [_jsxs(Card.Title, { children: [_jsx(Box, { className: "twa:font-medium", children: "Add Column Filter" }), _jsx(Box, { className: "twa:text-xs twa:opacity-70 twa:font-normal twa:max-w-[520px]", children: "Select a column and then create a Filter" })] }), _jsx(Card.Body, { className: "twa:p-1", children: _jsx(ColumnSelector, { filterColumn: (column) => column.filterable && !layoutFilters.some((f) => f.ColumnId === column.columnId), placeholder: "Select a Column", onChange: (option) => {
                                 props.onChange({
                                     ...layout,
                                     ColumnFilters: [
                                         ...layoutFilters,
                                         {
                                             ColumnId: option,
-                                            Predicates: [],
                                         },
                                     ],
                                 });
-                            } }) })] }), layoutFilters?.length > 0 && (_jsxs(Card, { shadow: false, children: [_jsxs(Card.Title, { children: [_jsx(Box, { className: "twa:font-medium", children: "Column Filters" }), _jsx(Box, { className: "twa:text-xs twa:opacity-70 twa:font-normal twa:max-w-[520px]", children: "Configure predicates for each column filter in this Layout" })] }), _jsx(Card.Body, { className: "twa:p-1", children: _jsx(Box, { className: "twa:p-0", as: "ul", children: layoutFilters.map((columnFilter) => {
-                                const moduleItems = filterModule.toView(columnFilter).items;
-                                const column = adaptable.api.columnApi.getColumnWithColumnId(columnFilter.ColumnId);
-                                const columnGroupItems = column?.columnGroup && column.columnGroup.groupCount > 1
-                                    ? [{ name: 'Column Group', values: [column.columnGroup.friendlyName] }]
-                                    : [];
-                                const items = [
-                                    moduleItems[0],
-                                    ...columnGroupItems,
-                                    ...moduleItems.slice(1),
-                                    {
-                                        name: 'Column Filter',
-                                        view: (_jsx(LayoutColumnFilter, { columnFilter: columnFilter, onColumnFilterChange: (columnFilter) => {
-                                                handlePredicateEdit(columnFilter);
-                                            } })),
-                                    },
-                                ];
-                                return (_jsx(AdaptableObjectListItemView, { module: filterModule, abObject: columnFilter, entityType: "Column Filter", showActions: true, showEditButton: false, items: items, onDelete: () => handleDelete(columnFilter) }, columnFilter.ColumnId));
-                            }) }) })] }))] }));
+                            } }) })] })] }));
 };

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

@@ -1,14 +1,12 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
 import * as React from 'react';
 import { useAdaptable } from '../../../AdaptableContext';
 import { useOnePageAdaptableWizardContext } from '../../../Wizard/OnePageAdaptableWizard';
 import { Tag } from '../../../../components/Tag';
-import { ExpressionEditor } from '../../../../components/ExpressionEditor';
+import { ExpressionEditor, ExpressionUseCaseCard, } from '../../../../components/aql/ExpressionEditor';
 import { GridFilterModuleId } from '../../../../Utilities/Constants/ModuleConstants';
 import StringExtensions from '../../../../Utilities/Extensions/StringExtensions';
-import { useGridFilterOptionsForExpressionEditorProps } from '../../../GridFilter/useGridFilterOptionsForExpressionEditor';
 import { Box } from '../../../../components/Flex';
-import { Card } from '../../../../components/Card';
 export const isGridFiltersValid = (layout, api) => {
     const expression = layout?.GridFilter?.Expression;
     if (StringExtensions.IsNullOrEmpty(expression)) {
@@ -25,14 +23,13 @@ export const GridFilterSection = (props) => {
     const { api } = useAdaptable();
     const { data: layout } = useOnePageAdaptableWizardContext();
     const initialData = React.useMemo(() => api.internalApi.getQueryPreviewData(), []);
-    const expressionEditorProps = useGridFilterOptionsForExpressionEditorProps();
-    return (_jsx(Box, { className: "twa:p-3", children: _jsxs(Card, { shadow: false, children: [_jsxs(Card.Title, { children: [_jsx(Box, { className: "twa:font-medium", children: "Grid Filter" }), _jsx(Box, { className: "twa:text-xs twa:opacity-70 twa:font-normal twa:max-w-[520px]", children: "Define a boolean expression to filter rows across the entire grid in this Layout" })] }), _jsx(Card.Body, { className: "twa:p-1", children: _jsx(ExpressionEditor, { ...expressionEditorProps, allowSaveNamedQuery: false, type: 'boolean', module: GridFilterModuleId, value: layout?.GridFilter?.Expression ?? '', onChange: (expression) => {
-                            props.onChange({
-                                ...layout,
-                                GridFilter: {
-                                    ...layout.GridFilter,
-                                    Expression: expression,
-                                },
-                            });
-                        }, initialData: initialData, columns: api.columnApi.internalApi.getQueryableColumnsForUIEditor(), fields: api.expressionApi.internalApi.getAvailableFields(), namedQueries: api.namedQueryApi.getNamedQueries(), api: api }) })] }) }));
+    return (_jsx(ExpressionUseCaseCard, { className: "twa:p-3", title: "Grid Filter", description: _jsx(_Fragment, { children: "Build a boolean (true / false) Expression to filter which rows are shown across the entire grid in this Layout." }), examplesKind: "boolean", children: _jsx(ExpressionEditor, { type: 'scalar', module: GridFilterModuleId, value: layout?.GridFilter?.Expression ?? '', onChange: (expression) => {
+                props.onChange({
+                    ...layout,
+                    GridFilter: {
+                        ...layout.GridFilter,
+                        Expression: expression,
+                    },
+                });
+            }, initialData: initialData, columns: api.columnApi.internalApi.getQueryableColumnsForUIEditor(), fields: api.expressionApi.internalApi.getAvailableFields(), namedQueries: api.namedQueryApi.getNamedQueries(), api: api, suppressTypeInfoCard: true, examplesKind: "boolean" }) }));
 };

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

@@ -1,22 +1,22 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import * as React from 'react';
 import { Card } from '../../../../components/Card';
-import { ColumnTag, Tag } from '../../../../components/Tag';
+import { AccentTag, Tag } from '../../../../components/Tag';
 import { getAggFuncName, isWeightedAverageAggFuncName, WEIGHTED_AVERAGE_AGG_FN_NAME, } from '../../../../AdaptableState/Common/AggregationColumns';
 import { useAdaptable } from '../../../AdaptableContext';
 import { ValueSelector } from '../../../Components/ValueSelector';
 import { useOnePageAdaptableWizardContext } from '../../../Wizard/OnePageAdaptableWizard';
-import { CollapsibleWizardCard, CollapsibleWizardValueSummary, getWizardAccordionSectionClassName, renderCompactColumnTags, useWizardCardAccordion, } from '../../../Wizard/CollapsibleWizardCard';
+import { CollapsibleWizardCard, CollapsibleWizardValueSummary, getWizardAccordionSectionClassName, renderCompactAccentTags, useWizardCardAccordion, } from '../../../Wizard/CollapsibleWizardCard';
 import { TypeRadio } from '../../../Wizard/TypeRadio';
-import { getLayoutWizardInitialExpandedCardId, isPivotAggregationsSectionConfigured, } from './layoutWizardAccordionHelpers';
-import { columnFilter } from './Utilities';
+import { getLayoutWizardInitialExpandedCardId, isPivotAggregationsSectionConfigured, } from '../../Utilities/layoutWizardAccordionHelpers';
+import { columnFilter } from '../../Utilities/columnFilter';
 import { ColumnGroupTag } from '../../../Components/ColumnGroupTag';
 import ArrayExtensions from '../../../../Utilities/Extensions/ArrayExtensions';
 import { Box, Flex } from '../../../../components/Flex';
-import { SingleSelect } from '../../../../components/NewSelect';
+import { SingleSelect } from '../../../../components/Select';
 import Radio, { RadioGroup } from '../../../../components/Radio';
-import { LAYOUT_WIZARD_COLUMN_LIST_HEADER_CLASS, LAYOUT_WIZARD_COLUMN_LIST_OPTION_CLASS, LAYOUT_WIZARD_COLUMN_LIST_SEARCH_CLASS, } from './layoutWizardColumns';
-import { getPivotAggregationSummaryValues } from '../../../../Strategy/Utilities/Layout/aggregationSummaryHelpers';
+import { LAYOUT_WIZARD_COLUMN_LIST_HEADER_CLASS, LAYOUT_WIZARD_COLUMN_LIST_OPTION_CLASS, LAYOUT_WIZARD_COLUMN_LIST_SEARCH_CLASS, } from '../../Utilities/layoutWizardColumns';
+import { getPivotAggregationSummaryValues } from '../../../../View/ObjectItemViews/Layout/aggregationSummaryHelpers';
 import { renderSummaryStringTags } from '../../../Wizard/SummaryColorTag';
 import { getAggFuncSummaryLabel, getGrandTotalRowKey, getGrandTotalRowLabel, GRAND_TOTAL_ROW_DESCRIPTIONS, GRAND_TOTAL_ROW_LABELS, GRAND_TOTAL_ROW_OPTIONS, } from './AggregationsSection';
 const PIVOT_LAYOUT_TOTAL_LABELS = {
@@ -282,7 +282,7 @@ export const PivotAggregationsSection = (props) => {
             [field]: key === 'off' ? null : key,
         });
     };
-    return (_jsxs(Box, { className: getWizardAccordionSectionClassName(hasExpandedCard, expandedFillsSpace), children: [_jsx(CollapsibleWizardCard, { ...bindCard('aggregation-columns', { fillAvailable: true }), surface: "panel", "data-name": "aggregation-columns", title: "Aggregation Columns", help: "Select a column and an aggregation function", collapsedHelp: "", compactSummary: renderCompactColumnTags(aggregationEntries.map(({ ColumnId }) => ColumnId), (columnId) => adaptable.api.columnApi.getFriendlyNameForColumnId(columnId), { emptyLabel: 'No columns' }), summary: aggregationEntries.length ? (_jsx(Flex, { flexWrap: "wrap", className: "twa:gap-1", children: aggregationEntries.map(({ ColumnId, AggFunc }) => (_jsxs(ColumnTag, { children: [adaptable.api.columnApi.getFriendlyNameForColumnId(ColumnId), " (", getAggFuncSummaryLabel(ColumnId, AggFunc, aggregationColumnsMap), ")"] }, ColumnId))) })) : (_jsx(Tag, { children: "No columns" })), children: _jsx(Card, { shadow: false, className: "twa:h-full twa:overflow-hidden twa:flex twa:flex-col", children: _jsx(Card.Body, { className: "", children: _jsx(Box, { className: "twa:flex twa:flex-col twa:min-h-0", "data-name": "aggregation-columns-container", children: _jsx(ValueSelector, { style: { minHeight: 0 }, compact: true, showFilterInput: true, filter: columnFilter, filterPlaceholder: "Search Columns...", compactHeaderClassName: LAYOUT_WIZARD_COLUMN_LIST_HEADER_CLASS, compactFilterClassName: LAYOUT_WIZARD_COLUMN_LIST_SEARCH_CLASS, optionLayout: "label-beside-checkbox", toggleSelectionOnRowClick: true, optionClassName: LAYOUT_WIZARD_COLUMN_LIST_OPTION_CLASS, toIdentifier: (option) => `${option.columnId}`, toLabel: (option) => option.friendlyName ?? option.columnId, toListLabel: (column) => (_jsx(PivotColumnRow, { onChangeAggFunction: handleAggregationChange, layout: layout, column: column, aggregationColumnsMap: aggregationColumnsMap })), options: sortedAggregableColumns, value: aggregationEntries.map((agg) => agg.ColumnId), allowReorder: () => true, onChange: handleColumnsSelectionChange }) }) }) }) }), _jsx(CollapsibleWizardCard, { ...bindCard('suppress-header'), surface: "panel", "data-name": "omit-aggregation-from-header", title: "Aggregation Column Header", help: "Set behaviour for aggregation function names", collapsedHelp: "Behaviour for aggregation function names", compactSummary: _jsx(Tag, { children: layout.SuppressAggFuncInHeader ? 'Hide Function Name' : 'Show Function Name' }), summary: _jsx(CollapsibleWizardValueSummary, { value: _jsx(Tag, { children: layout.SuppressAggFuncInHeader ? 'Hide Function Name' : 'Show Function Name' }) }), children: _jsxs(RadioGroup, { orientation: "vertical", value: layout.SuppressAggFuncInHeader ?? false, onRadioChange: handleSuppressAggFuncInHeader, children: [_jsx(Radio, { value: false, children: "Show Aggregation function names" }), _jsx(Radio, { value: true, children: "Hide Aggregation function names" })] }) }), _jsx(CollapsibleWizardCard, { ...bindCard('grand-total'), surface: "panel", "data-name": "grand-total-row", title: "Grand Total Row", help: "Set position of the Grand Total Row in the grid", collapsedHelp: "Position of the Grand Total Row in the grid", compactSummary: _jsx(Tag, { children: getGrandTotalRowLabel(layout) }), summary: _jsx(CollapsibleWizardValueSummary, { value: _jsx(Tag, { children: getGrandTotalRowLabel(layout) }) }), children: _jsx(RadioGroup, { orientation: "vertical", value: getGrandTotalRowKey(layout), onRadioChange: (key) => {
+    return (_jsxs(Box, { className: getWizardAccordionSectionClassName(hasExpandedCard, expandedFillsSpace), children: [_jsx(CollapsibleWizardCard, { ...bindCard('aggregation-columns', { fillAvailable: true }), surface: "panel", "data-name": "aggregation-columns", title: "Aggregation Columns", help: "Select a column and an aggregation function", collapsedHelp: "", compactSummary: renderCompactAccentTags(aggregationEntries.map(({ ColumnId }) => ColumnId), (columnId) => adaptable.api.columnApi.getFriendlyNameForColumnId(columnId), { emptyLabel: 'No columns' }), summary: aggregationEntries.length ? (_jsx(Flex, { flexWrap: "wrap", className: "twa:gap-1", children: aggregationEntries.map(({ ColumnId, AggFunc }) => (_jsxs(AccentTag, { children: [adaptable.api.columnApi.getFriendlyNameForColumnId(ColumnId), " (", getAggFuncSummaryLabel(ColumnId, AggFunc, aggregationColumnsMap), ")"] }, ColumnId))) })) : (_jsx(Tag, { children: "No columns" })), children: _jsx(Card, { shadow: false, className: "twa:h-full twa:overflow-hidden twa:flex twa:flex-col", children: _jsx(Card.Body, { className: "", children: _jsx(Box, { className: "twa:flex twa:flex-col twa:min-h-0", "data-name": "aggregation-columns-container", children: _jsx(ValueSelector, { style: { minHeight: 0 }, compact: true, showFilterInput: true, filter: columnFilter, filterPlaceholder: "Search Columns...", compactHeaderClassName: LAYOUT_WIZARD_COLUMN_LIST_HEADER_CLASS, compactFilterClassName: LAYOUT_WIZARD_COLUMN_LIST_SEARCH_CLASS, optionLayout: "label-beside-checkbox", toggleSelectionOnRowClick: true, optionClassName: LAYOUT_WIZARD_COLUMN_LIST_OPTION_CLASS, toIdentifier: (option) => `${option.columnId}`, toLabel: (option) => option.friendlyName ?? option.columnId, toListLabel: (column) => (_jsx(PivotColumnRow, { onChangeAggFunction: handleAggregationChange, layout: layout, column: column, aggregationColumnsMap: aggregationColumnsMap })), options: sortedAggregableColumns, value: aggregationEntries.map((agg) => agg.ColumnId), allowReorder: () => true, onChange: handleColumnsSelectionChange }) }) }) }) }), _jsx(CollapsibleWizardCard, { ...bindCard('suppress-header'), surface: "panel", "data-name": "omit-aggregation-from-header", title: "Aggregation Column Header", help: "Set behaviour for aggregation function names", collapsedHelp: "Behaviour for aggregation function names", compactSummary: _jsx(Tag, { children: layout.SuppressAggFuncInHeader ? 'Hide Function Name' : 'Show Function Name' }), summary: _jsx(CollapsibleWizardValueSummary, { value: _jsx(Tag, { children: layout.SuppressAggFuncInHeader ? 'Hide Function Name' : 'Show Function Name' }) }), children: _jsxs(RadioGroup, { orientation: "vertical", value: layout.SuppressAggFuncInHeader ?? false, onRadioChange: handleSuppressAggFuncInHeader, children: [_jsx(Radio, { value: false, children: "Show Aggregation function names" }), _jsx(Radio, { value: true, children: "Hide Aggregation function names" })] }) }), _jsx(CollapsibleWizardCard, { ...bindCard('grand-total'), surface: "panel", "data-name": "grand-total-row", title: "Grand Total Row", help: "Set position of the Grand Total Row in the grid", collapsedHelp: "Position of the Grand Total Row in the grid", compactSummary: _jsx(Tag, { children: getGrandTotalRowLabel(layout) }), summary: _jsx(CollapsibleWizardValueSummary, { value: _jsx(Tag, { children: getGrandTotalRowLabel(layout) }) }), children: _jsx(RadioGroup, { orientation: "vertical", value: getGrandTotalRowKey(layout), onRadioChange: (key) => {
                         props.onChange({
                             ...layout,
                             GrandTotalRow: key === 'off' ? null : key,

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

@@ -1,27 +1,27 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import * as React from 'react';
-import { ColumnTag, Tag } from '../../../../components/Tag';
+import { AccentTag, Tag } from '../../../../components/Tag';
 import { useAdaptable } from '../../../AdaptableContext';
 import { ValueSelector } from '../../../Components/ValueSelector';
 import { useOnePageAdaptableWizardContext } from '../../../Wizard/OnePageAdaptableWizard';
-import { getLayoutWizardInitialExpandedCardId, isPivotColumnsSectionConfigured, } from './layoutWizardAccordionHelpers';
-import { columnFilter } from './Utilities';
+import { getLayoutWizardInitialExpandedCardId, isPivotColumnsSectionConfigured, } from '../../Utilities/layoutWizardAccordionHelpers';
+import { columnFilter } from '../../Utilities/columnFilter';
 import { ColumnGroupTag } from '../../../Components/ColumnGroupTag';
 import ArrayExtensions from '../../../../Utilities/Extensions/ArrayExtensions';
 import { Box, Flex } from '../../../../components/Flex';
 import { CheckBox } from '../../../../components/CheckBox';
 import { Card } from '../../../../components/Card';
-import { CollapsibleWizardCard, CollapsibleWizardValueSummary, getWizardAccordionSectionClassName, renderCompactColumnTags, useWizardCardAccordion, } from '../../../Wizard/CollapsibleWizardCard';
-import { LAYOUT_WIZARD_COLUMN_LIST_HEADER_CLASS, LAYOUT_WIZARD_COLUMN_LIST_OPTION_CLASS, LAYOUT_WIZARD_COLUMN_LIST_SEARCH_CLASS, } from './layoutWizardColumns';
+import { CollapsibleWizardCard, CollapsibleWizardValueSummary, getWizardAccordionSectionClassName, renderCompactAccentTags, useWizardCardAccordion, } from '../../../Wizard/CollapsibleWizardCard';
+import { LAYOUT_WIZARD_COLUMN_LIST_HEADER_CLASS, LAYOUT_WIZARD_COLUMN_LIST_OPTION_CLASS, LAYOUT_WIZARD_COLUMN_LIST_SEARCH_CLASS, } from '../../Utilities/layoutWizardColumns';
 import { ColumnSortingWizardCard } from './SortSection';
-import { getTableColumnsSortingSummaryValues } from '../../../../Strategy/Utilities/Layout/columnsSummaryHelpers';
+import { getTableColumnsSortingSummaryValues } from '../../../../View/ObjectItemViews/Layout/columnsSummaryHelpers';
 import { renderSummaryStringTags } from '../../../Wizard/SummaryColorTag';
 export const PivotColumnsSectionSummary = (props) => {
     const adaptable = useAdaptable();
     const { data: contextLayout } = useOnePageAdaptableWizardContext();
     const layout = props.layout ?? contextLayout;
     const sortValues = getTableColumnsSortingSummaryValues(layout, adaptable.api);
-    return (_jsxs(Flex, { flexDirection: "column", className: "twa:gap-3", children: [_jsxs(Box, { children: [_jsx(Box, { className: "twa:text-xs twa:font-medium twa:mb-1", children: "Pivot Columns" }), _jsx(Flex, { flexDirection: "row", flexWrap: "wrap", className: "twa:gap-1", children: layout.PivotColumns?.length ? (layout.PivotColumns.map((columnId) => (_jsx(ColumnTag, { children: adaptable.api.columnApi.getFriendlyNameForColumnId(columnId) }, columnId)))) : (_jsx(Tag, { children: "No Pivot Columns Defined" })) })] }), sortValues.length ? (_jsxs(Box, { children: [_jsx(Box, { className: "twa:text-xs twa:font-medium twa:mb-1", children: "Sorting" }), renderSummaryStringTags(sortValues)] })) : null] }));
+    return (_jsxs(Flex, { flexDirection: "column", className: "twa:gap-3", children: [_jsxs(Box, { children: [_jsx(Box, { className: "twa:text-xs twa:font-medium twa:mb-1", children: "Pivot Columns" }), _jsx(Flex, { flexDirection: "row", flexWrap: "wrap", className: "twa:gap-1", children: layout.PivotColumns?.length ? (layout.PivotColumns.map((columnId) => (_jsx(AccentTag, { children: adaptable.api.columnApi.getFriendlyNameForColumnId(columnId) }, columnId)))) : (_jsx(Tag, { children: "No Pivot Columns Defined" })) })] }), sortValues.length ? (_jsxs(Box, { children: [_jsx(Box, { className: "twa:text-xs twa:font-medium twa:mb-1", children: "Sorting" }), renderSummaryStringTags(sortValues)] })) : null] }));
 };
 export const PivotColumnsSection = (props) => {
     const adaptable = useAdaptable();
@@ -40,7 +40,7 @@ export const PivotColumnsSection = (props) => {
     const layoutSupportedFeatures = adaptable.api.layoutApi.internalApi.getLayoutSupportedFeatures();
     const initialExpandedCardId = getLayoutWizardInitialExpandedCardId(props.layoutWizardMode, 'pivot-columns', isPivotColumnsSectionConfigured(layout));
     const { bindCard, hasExpandedCard, expandedFillsSpace } = useWizardCardAccordion(initialExpandedCardId);
-    return (_jsxs(Box, { className: getWizardAccordionSectionClassName(hasExpandedCard, expandedFillsSpace), children: [_jsx(CollapsibleWizardCard, { ...bindCard('pivot-columns', { fillAvailable: true }), surface: "panel", "data-name": "pivot-columns", title: "Pivot Columns", help: "Select and order the columns used as pivot columns", collapsedHelp: "", compactSummary: renderCompactColumnTags(layout.PivotColumns ?? [], (columnId) => adaptable.api.columnApi.getFriendlyNameForColumnId(columnId), { emptyLabel: 'No columns' }), summary: layout.PivotColumns?.length ? (_jsx(Flex, { flexWrap: "wrap", className: "twa:gap-1", children: layout.PivotColumns.map((columnId) => (_jsx(ColumnTag, { children: adaptable.api.columnApi.getFriendlyNameForColumnId(columnId) }, columnId))) })) : (_jsx(Tag, { children: "No columns" })), className: "twa:overflow-hidden twa:flex twa:flex-col", bodyClassName: "twa:min-h-[200px] twa:max-h-[420px] twa:overflow-hidden twa:flex twa:flex-col ", children: _jsx(Card, { shadow: false, className: "twa:h-full", children: _jsx(Card.Body, { children: _jsx(Box, { className: "twa:flex twa:flex-col twa:gap-1.5 twa:h-full twa:overflow-hidden twa:flex-1 twa:min-h-0", "data-name": "pivot-columns-container", children: _jsx(ValueSelector, { compact: true, showFilterInput: true, filter: columnFilter, filterPlaceholder: "Search Columns...", compactHeaderClassName: LAYOUT_WIZARD_COLUMN_LIST_HEADER_CLASS, compactFilterClassName: LAYOUT_WIZARD_COLUMN_LIST_SEARCH_CLASS, hideShowSelectedOnly: true, optionLayout: "label-beside-checkbox", toggleSelectionOnRowClick: true, optionClassName: LAYOUT_WIZARD_COLUMN_LIST_OPTION_CLASS, toIdentifier: (option) => `${option.columnId}`, toLabel: (option) => option.friendlyName ?? option.columnId, toListLabel: (option) => (_jsxs(Flex, { alignItems: "center", className: "twa:min-w-0", children: [_jsx(Box, { className: "twa:truncate", children: option.friendlyName ?? option.columnId }), _jsx(ColumnGroupTag, { column: option })] })), options: sortedPivotColumns, value: layout.PivotColumns ?? [], allowReorder: true, onChange: handleColumnsChange }) }) }) }) }), _jsx(CollapsibleWizardCard, { ...bindCard('pivot-result-columns'), surface: "panel", "data-name": "pivot-result-columns", title: "Pivot Result Columns", help: "Configure how dynamically created pivot result columns are stored in the Layout", collapsedHelp: "How dynamically created pivot result columns are stored in the Layout", compactSummary: _jsx(Tag, { children: persistPivotResultOrder ? 'Persist order' : 'Do not persist order' }), summary: _jsx(CollapsibleWizardValueSummary, { value: _jsx(Tag, { children: persistPivotResultOrder ? 'Persist order' : 'Do not persist order' }) }), children: _jsx(CheckBox, { checked: persistPivotResultOrder, onChange: (checked) => {
+    return (_jsxs(Box, { className: getWizardAccordionSectionClassName(hasExpandedCard, expandedFillsSpace), children: [_jsx(CollapsibleWizardCard, { ...bindCard('pivot-columns', { fillAvailable: true }), surface: "panel", "data-name": "pivot-columns", title: "Pivot Columns", help: "Select and order the columns used as pivot columns", collapsedHelp: "", compactSummary: renderCompactAccentTags(layout.PivotColumns ?? [], (columnId) => adaptable.api.columnApi.getFriendlyNameForColumnId(columnId), { emptyLabel: 'No columns' }), summary: layout.PivotColumns?.length ? (_jsx(Flex, { flexWrap: "wrap", className: "twa:gap-1", children: layout.PivotColumns.map((columnId) => (_jsx(AccentTag, { children: adaptable.api.columnApi.getFriendlyNameForColumnId(columnId) }, columnId))) })) : (_jsx(Tag, { children: "No columns" })), className: "twa:overflow-hidden twa:flex twa:flex-col", bodyClassName: "twa:min-h-[200px] twa:max-h-[420px] twa:overflow-hidden twa:flex twa:flex-col ", children: _jsx(Card, { shadow: false, className: "twa:h-full", children: _jsx(Card.Body, { children: _jsx(Box, { className: "twa:flex twa:flex-col twa:gap-1.5 twa:h-full twa:overflow-hidden twa:flex-1 twa:min-h-0", "data-name": "pivot-columns-container", children: _jsx(ValueSelector, { compact: true, showFilterInput: true, filter: columnFilter, filterPlaceholder: "Search Columns...", compactHeaderClassName: LAYOUT_WIZARD_COLUMN_LIST_HEADER_CLASS, compactFilterClassName: LAYOUT_WIZARD_COLUMN_LIST_SEARCH_CLASS, hideShowSelectedOnly: true, optionLayout: "label-beside-checkbox", toggleSelectionOnRowClick: true, optionClassName: LAYOUT_WIZARD_COLUMN_LIST_OPTION_CLASS, toIdentifier: (option) => `${option.columnId}`, toLabel: (option) => option.friendlyName ?? option.columnId, toListLabel: (option) => (_jsxs(Flex, { alignItems: "center", className: "twa:min-w-0", children: [_jsx(Box, { className: "twa:truncate", children: option.friendlyName ?? option.columnId }), _jsx(ColumnGroupTag, { column: option })] })), options: sortedPivotColumns, value: layout.PivotColumns ?? [], allowReorder: true, onChange: handleColumnsChange }) }) }) }) }), _jsx(CollapsibleWizardCard, { ...bindCard('pivot-result-columns'), surface: "panel", "data-name": "pivot-result-columns", title: "Pivot Result Columns", help: "Configure how dynamically created pivot result columns are stored in the Layout", collapsedHelp: "How dynamically created pivot result columns are stored in the Layout", compactSummary: _jsx(Tag, { children: persistPivotResultOrder ? 'Persist order' : 'Do not persist order' }), summary: _jsx(CollapsibleWizardValueSummary, { value: _jsx(Tag, { children: persistPivotResultOrder ? 'Persist order' : 'Do not persist order' }) }), children: _jsx(CheckBox, { checked: persistPivotResultOrder, onChange: (checked) => {
                         props.onChange({
                             ...layout,
                             PivotResultColumnsOrder: checked,

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

@@ -1,20 +1,20 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import * as React from 'react';
-import { getLayoutWizardInitialExpandedCardId, isPivotRowGroupingSectionConfigured, } from './layoutWizardAccordionHelpers';
-import { columnFilter } from './Utilities';
+import { getLayoutWizardInitialExpandedCardId, isPivotRowGroupingSectionConfigured, } from '../../Utilities/layoutWizardAccordionHelpers';
+import { columnFilter } from '../../Utilities/columnFilter';
 import { ColumnGroupTag } from '../../../Components/ColumnGroupTag';
-import { ColumnTag, Tag } from '../../../../components/Tag';
+import { AccentTag, Tag } from '../../../../components/Tag';
 import { useAdaptable } from '../../../AdaptableContext';
 import { ValueSelector } from '../../../Components/ValueSelector';
 import { useOnePageAdaptableWizardContext } from '../../../Wizard/OnePageAdaptableWizard';
 import ArrayExtensions from '../../../../Utilities/Extensions/ArrayExtensions';
-import { normalizeLayout } from '../../../../Api/Implementation/LayoutHelpers';
+import { normalizeLayout } from '../../../../Utilities/Helpers/Layouts/LayoutHelper';
 import { RowGroupBehaviorSection, getRowGroupBehaviorLabel, } from './RowGroupingSection';
 import { PivotRowGroupSummaryTags } from '../../../Wizard/rowGroupSummaryTags';
 import { Box, Flex } from '../../../../components/Flex';
 import { Card } from '../../../../components/Card';
-import { CollapsibleWizardCard, CollapsibleWizardValueSummary, getWizardAccordionSectionClassName, renderCompactColumnTags, useWizardCardAccordion, } from '../../../Wizard/CollapsibleWizardCard';
-import { LAYOUT_WIZARD_COLUMN_LIST_HEADER_CLASS, LAYOUT_WIZARD_COLUMN_LIST_OPTION_CLASS, LAYOUT_WIZARD_COLUMN_LIST_SEARCH_CLASS, } from './layoutWizardColumns';
+import { CollapsibleWizardCard, CollapsibleWizardValueSummary, getWizardAccordionSectionClassName, renderCompactAccentTags, useWizardCardAccordion, } from '../../../Wizard/CollapsibleWizardCard';
+import { LAYOUT_WIZARD_COLUMN_LIST_HEADER_CLASS, LAYOUT_WIZARD_COLUMN_LIST_OPTION_CLASS, LAYOUT_WIZARD_COLUMN_LIST_SEARCH_CLASS, } from '../../Utilities/layoutWizardColumns';
 export const PivotRowGroupingSectionSummary = (props) => {
     const adaptable = useAdaptable();
     const { data: contextLayout } = useOnePageAdaptableWizardContext();
@@ -46,5 +46,5 @@ export const PivotRowGroupingSection = (props) => {
     const rowGroupsText = 'Grouped Rows ' + adaptable.api.internalApi.getCorrectEnglishVariant('Behaviour');
     const initialExpandedCardId = getLayoutWizardInitialExpandedCardId(props.layoutWizardMode, 'columns', isPivotRowGroupingSectionConfigured(layout));
     const { bindCard, hasExpandedCard, expandedFillsSpace } = useWizardCardAccordion(initialExpandedCardId);
-    return (_jsxs(Box, { className: getWizardAccordionSectionClassName(hasExpandedCard, expandedFillsSpace), children: [_jsx(CollapsibleWizardCard, { ...bindCard('columns', { fillAvailable: true }), surface: "panel", "data-name": "pivot-row-grouped-columns", title: "Row Grouped Columns", help: "Select and order Columns used in Row Grouping", collapsedHelp: "", compactSummary: renderCompactColumnTags(layout.PivotGroupedColumns ?? [], (columnId) => adaptable.api.columnApi.getFriendlyNameForColumnId(columnId), { emptyLabel: 'No columns' }), summary: layout.PivotGroupedColumns?.length ? (_jsx(Flex, { flexWrap: "wrap", className: "twa:gap-1", children: layout.PivotGroupedColumns.map((columnId) => (_jsx(ColumnTag, { children: adaptable.api.columnApi.getFriendlyNameForColumnId(columnId) }, columnId))) })) : (_jsx(Tag, { children: "No columns" })), className: "twa:overflow-hidden twa:flex twa:flex-col", bodyClassName: "twa:min-h-[200px] twa:max-h-[420px] twa:overflow-hidden twa:flex twa:flex-col twa:!pt-0 twa:!pb-0 twa:px-1", children: _jsx(Card, { shadow: false, className: "twa:h-full twa:overflow-hidden twa:flex twa:flex-col", children: _jsx(Card.Body, { className: "twa:flex-1 twa:min-h-0 twa:overflow-hidden twa:px-1 twa:pt-0 twa:pb-0", children: _jsx(Box, { className: "twa:flex twa:flex-col twa:gap-1.5 twa:h-full twa:overflow-hidden twa:flex-1 twa:min-h-0", "data-name": "pivot-row-grouped-columns-container", children: _jsx(ValueSelector, { compact: true, showFilterInput: true, filter: columnFilter, filterPlaceholder: "Search Columns...", compactHeaderClassName: LAYOUT_WIZARD_COLUMN_LIST_HEADER_CLASS, compactFilterClassName: LAYOUT_WIZARD_COLUMN_LIST_SEARCH_CLASS, hideShowSelectedOnly: true, optionLayout: "label-beside-checkbox", toggleSelectionOnRowClick: true, optionClassName: LAYOUT_WIZARD_COLUMN_LIST_OPTION_CLASS, toIdentifier: (option) => `${option.columnId}`, toLabel: (option) => option.friendlyName ?? option.columnId, toListLabel: (option) => (_jsxs(Flex, { alignItems: "center", className: "twa:min-w-0", children: [_jsx(Box, { className: "twa:truncate", children: option.friendlyName ?? option.columnId }), _jsx(ColumnGroupTag, { column: option })] })), options: sortedGroupableColumns, value: layout.PivotGroupedColumns ?? [], allowReorder: true, onChange: handleColumnsChange }) }) }) }) }), _jsx(CollapsibleWizardCard, { ...bindCard('behavior'), surface: "panel", "data-name": "pivot-row-group-behavior", title: rowGroupsText, help: "Set Grouped Rows expanded / collapsed behaviour when Layout opens", collapsedHelp: "Grouped Rows expanded / collapsed behaviour when Layout opens", compactSummary: _jsx(Tag, { children: getRowGroupBehaviorLabel(layout) }), summary: _jsx(CollapsibleWizardValueSummary, { value: _jsx(Tag, { children: getRowGroupBehaviorLabel(layout) }) }), children: _jsx(RowGroupBehaviorSection, { layout: layout, onChange: onChange }) })] }));
+    return (_jsxs(Box, { className: getWizardAccordionSectionClassName(hasExpandedCard, expandedFillsSpace), children: [_jsx(CollapsibleWizardCard, { ...bindCard('columns', { fillAvailable: true }), surface: "panel", "data-name": "pivot-row-grouped-columns", title: "Row Grouped Columns", help: "Select and order Columns used in Row Grouping", collapsedHelp: "", compactSummary: renderCompactAccentTags(layout.PivotGroupedColumns ?? [], (columnId) => adaptable.api.columnApi.getFriendlyNameForColumnId(columnId), { emptyLabel: 'No columns' }), summary: layout.PivotGroupedColumns?.length ? (_jsx(Flex, { flexWrap: "wrap", className: "twa:gap-1", children: layout.PivotGroupedColumns.map((columnId) => (_jsx(AccentTag, { children: adaptable.api.columnApi.getFriendlyNameForColumnId(columnId) }, columnId))) })) : (_jsx(Tag, { children: "No columns" })), className: "twa:overflow-hidden twa:flex twa:flex-col", bodyClassName: "twa:min-h-[200px] twa:max-h-[420px] twa:overflow-hidden twa:flex twa:flex-col twa:!pt-0 twa:!pb-0 twa:px-1", children: _jsx(Card, { shadow: false, className: "twa:h-full twa:overflow-hidden twa:flex twa:flex-col", children: _jsx(Card.Body, { className: "twa:flex-1 twa:min-h-0 twa:overflow-hidden twa:px-1 twa:pt-0 twa:pb-0", children: _jsx(Box, { className: "twa:flex twa:flex-col twa:gap-1.5 twa:h-full twa:overflow-hidden twa:flex-1 twa:min-h-0", "data-name": "pivot-row-grouped-columns-container", children: _jsx(ValueSelector, { compact: true, showFilterInput: true, filter: columnFilter, filterPlaceholder: "Search Columns...", compactHeaderClassName: LAYOUT_WIZARD_COLUMN_LIST_HEADER_CLASS, compactFilterClassName: LAYOUT_WIZARD_COLUMN_LIST_SEARCH_CLASS, hideShowSelectedOnly: true, optionLayout: "label-beside-checkbox", toggleSelectionOnRowClick: true, optionClassName: LAYOUT_WIZARD_COLUMN_LIST_OPTION_CLASS, toIdentifier: (option) => `${option.columnId}`, toLabel: (option) => option.friendlyName ?? option.columnId, toListLabel: (option) => (_jsxs(Flex, { alignItems: "center", className: "twa:min-w-0", children: [_jsx(Box, { className: "twa:truncate", children: option.friendlyName ?? option.columnId }), _jsx(ColumnGroupTag, { column: option })] })), options: sortedGroupableColumns, value: layout.PivotGroupedColumns ?? [], allowReorder: true, onChange: handleColumnsChange }) }) }) }) }), _jsx(CollapsibleWizardCard, { ...bindCard('behavior'), surface: "panel", "data-name": "pivot-row-group-behavior", title: rowGroupsText, help: "Set Grouped Rows expanded / collapsed behaviour when Layout opens", collapsedHelp: "Grouped Rows expanded / collapsed behaviour when Layout opens", compactSummary: _jsx(Tag, { children: getRowGroupBehaviorLabel(layout) }), summary: _jsx(CollapsibleWizardValueSummary, { value: _jsx(Tag, { children: getRowGroupBehaviorLabel(layout) }) }), children: _jsx(RowGroupBehaviorSection, { layout: layout, onChange: onChange }) })] }));
 };

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

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { Layout } from '../../../../../types';
-export { getRowGroupBehaviorDescription, getRowGroupBehaviorLabel, getRowGroupDisplayTypeDescription, getRowGroupDisplayTypeLabel, } from '../../../../Strategy/Utilities/Layout/rowGroupSummaryHelpers';
+export { getRowGroupBehaviorDescription, getRowGroupBehaviorLabel, getRowGroupDisplayTypeDescription, getRowGroupDisplayTypeLabel, } from '../../../../View/ObjectItemViews/Layout/rowGroupSummaryHelpers';
 export declare const RowGroupingSectionSummary: React.FunctionComponent<{
     layout?: Layout;
 }>;

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

@@ -1,23 +1,23 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import * as React from 'react';
-import { getLayoutWizardInitialExpandedCardId, isRowGroupingSectionConfigured, } from './layoutWizardAccordionHelpers';
-import { columnFilter } from './Utilities';
+import { getLayoutWizardInitialExpandedCardId, isRowGroupingSectionConfigured, } from '../../Utilities/layoutWizardAccordionHelpers';
+import { columnFilter } from '../../Utilities/columnFilter';
 import { ColumnGroupTag } from '../../../Components/ColumnGroupTag';
 import { RadioGroup } from '../../../../components/Radio';
-import { ColumnTag, Tag } from '../../../../components/Tag';
+import { AccentTag, Tag } from '../../../../components/Tag';
 import { useAdaptable } from '../../../AdaptableContext';
 import { ValueSelector } from '../../../Components/ValueSelector';
 import { useOnePageAdaptableWizardContext } from '../../../Wizard/OnePageAdaptableWizard';
 import ArrayExtensions from '../../../../Utilities/Extensions/ArrayExtensions';
-import { normalizeLayout } from '../../../../Api/Implementation/LayoutHelpers';
+import { normalizeLayout } from '../../../../Utilities/Helpers/Layouts/LayoutHelper';
 import { TypeRadio } from '../../../Wizard/TypeRadio';
-import { CollapsibleWizardCard, CollapsibleWizardValueSummary, getWizardAccordionSectionClassName, renderCompactColumnTags, useWizardCardAccordion, } from '../../../Wizard/CollapsibleWizardCard';
+import { CollapsibleWizardCard, CollapsibleWizardValueSummary, getWizardAccordionSectionClassName, renderCompactAccentTags, useWizardCardAccordion, } from '../../../Wizard/CollapsibleWizardCard';
 import { Card } from '../../../../components/Card';
 import { Box, Flex } from '../../../../components/Flex';
-import { LAYOUT_WIZARD_COLUMN_LIST_HEADER_CLASS, LAYOUT_WIZARD_COLUMN_LIST_OPTION_CLASS, LAYOUT_WIZARD_COLUMN_LIST_SEARCH_CLASS, } from './layoutWizardColumns';
-import { getRowGroupBehaviorLabel, getRowGroupDisplayTypeLabel, } from '../../../../Strategy/Utilities/Layout/rowGroupSummaryHelpers';
+import { LAYOUT_WIZARD_COLUMN_LIST_HEADER_CLASS, LAYOUT_WIZARD_COLUMN_LIST_OPTION_CLASS, LAYOUT_WIZARD_COLUMN_LIST_SEARCH_CLASS, } from '../../Utilities/layoutWizardColumns';
+import { getRowGroupBehaviorLabel, getRowGroupDisplayTypeLabel, } from '../../../../View/ObjectItemViews/Layout/rowGroupSummaryHelpers';
 import { TableRowGroupSummaryTags } from '../../../Wizard/rowGroupSummaryTags';
-export { getRowGroupBehaviorDescription, getRowGroupBehaviorLabel, getRowGroupDisplayTypeDescription, getRowGroupDisplayTypeLabel, } from '../../../../Strategy/Utilities/Layout/rowGroupSummaryHelpers';
+export { getRowGroupBehaviorDescription, getRowGroupBehaviorLabel, getRowGroupDisplayTypeDescription, getRowGroupDisplayTypeLabel, } from '../../../../View/ObjectItemViews/Layout/rowGroupSummaryHelpers';
 export const RowGroupingSectionSummary = (props) => {
     const adaptable = useAdaptable();
     const { data: contextLayout } = useOnePageAdaptableWizardContext();
@@ -91,5 +91,5 @@ export const RowGroupingSection = (props) => {
     };
     const initialExpandedCardId = getLayoutWizardInitialExpandedCardId(props.layoutWizardMode, 'columns', isRowGroupingSectionConfigured(layout));
     const { bindCard, hasExpandedCard, expandedFillsSpace } = useWizardCardAccordion(initialExpandedCardId);
-    return (_jsxs(Box, { className: getWizardAccordionSectionClassName(hasExpandedCard, expandedFillsSpace), children: [_jsx(CollapsibleWizardCard, { ...bindCard('columns', { fillAvailable: true }), surface: "panel", "data-name": "row-grouped-columns", title: "Row Grouped Columns", help: "Select and order Columns used in Row Grouping", collapsedHelp: "", compactSummary: renderCompactColumnTags(layout.RowGroupedColumns ?? [], (columnId) => adaptable.api.columnApi.getFriendlyNameForColumnId(columnId), { emptyLabel: 'No columns' }), summary: layout.RowGroupedColumns?.length ? (_jsx(Flex, { flexWrap: "wrap", className: "twa:gap-1", children: layout.RowGroupedColumns.map((columnId) => (_jsx(ColumnTag, { children: adaptable.api.columnApi.getFriendlyNameForColumnId(columnId) }, columnId))) })) : (_jsx(Tag, { children: "No columns" })), bodyClassName: "twa:min-h-[200px] twa:max-h-[420px]  twa:flex twa:flex-col twa:px-1", children: _jsx(Card, { shadow: false, className: "twa:h-full twa:flex twa:flex-col", children: _jsx(Card.Body, { children: _jsx(ValueSelector, { compact: true, showFilterInput: true, filter: columnFilter, filterPlaceholder: "Search Columns...", compactHeaderClassName: LAYOUT_WIZARD_COLUMN_LIST_HEADER_CLASS, compactFilterClassName: LAYOUT_WIZARD_COLUMN_LIST_SEARCH_CLASS, hideShowSelectedOnly: true, optionLayout: "label-beside-checkbox", toggleSelectionOnRowClick: true, optionClassName: LAYOUT_WIZARD_COLUMN_LIST_OPTION_CLASS, toIdentifier: (option) => `${option.columnId}`, toLabel: (option) => option.friendlyName ?? option.columnId, toListLabel: (option) => (_jsxs(Flex, { alignItems: "center", className: "twa:min-w-0", children: [_jsx(Box, { className: "twa:truncate", children: option.friendlyName ?? option.columnId }), _jsx(ColumnGroupTag, { column: option })] })), options: sortedGroupableColumns, value: layout.RowGroupedColumns ?? [], allowReorder: true, onChange: handleColumnsChange }) }) }) }), _jsx(CollapsibleWizardCard, { ...bindCard('display-type'), surface: "panel", "data-name": "row-group-display-type", title: "Group Display Type", help: "Choose how Row Grouped Columns display in the grid", collapsedHelp: "How Row Grouped Columns display in the grid", compactSummary: _jsx(Tag, { children: getRowGroupDisplayTypeLabel(layout) }), summary: _jsx(CollapsibleWizardValueSummary, { value: _jsx(Tag, { children: getRowGroupDisplayTypeLabel(layout) }) }), children: _jsx(RowGroupDisplayTypeSection, { layout: layout, onChange: onChange }) }), _jsx(CollapsibleWizardCard, { ...bindCard('behavior'), surface: "panel", "data-name": "row-group-behavior", title: rowGroupsText, help: "Set Grouped Rows expanded / collapsed behaviour when Layout opens", collapsedHelp: "Grouped Rows expanded / collapsed behaviour when Layout opens", compactSummary: _jsx(Tag, { children: getRowGroupBehaviorLabel(layout) }), summary: _jsx(CollapsibleWizardValueSummary, { value: _jsx(Tag, { children: getRowGroupBehaviorLabel(layout) }) }), children: _jsx(RowGroupBehaviorSection, { layout: layout, onChange: onChange }) })] }));
+    return (_jsxs(Box, { className: getWizardAccordionSectionClassName(hasExpandedCard, expandedFillsSpace), children: [_jsx(CollapsibleWizardCard, { ...bindCard('columns', { fillAvailable: true }), surface: "panel", "data-name": "row-grouped-columns", title: "Row Grouped Columns", help: "Select and order Columns used in Row Grouping", collapsedHelp: "", compactSummary: renderCompactAccentTags(layout.RowGroupedColumns ?? [], (columnId) => adaptable.api.columnApi.getFriendlyNameForColumnId(columnId), { emptyLabel: 'No columns' }), summary: layout.RowGroupedColumns?.length ? (_jsx(Flex, { flexWrap: "wrap", className: "twa:gap-1", children: layout.RowGroupedColumns.map((columnId) => (_jsx(AccentTag, { children: adaptable.api.columnApi.getFriendlyNameForColumnId(columnId) }, columnId))) })) : (_jsx(Tag, { children: "No columns" })), bodyClassName: "twa:min-h-[200px] twa:max-h-[420px]  twa:flex twa:flex-col twa:px-1", children: _jsx(Card, { shadow: false, className: "twa:h-full twa:flex twa:flex-col", children: _jsx(Card.Body, { children: _jsx(ValueSelector, { compact: true, showFilterInput: true, filter: columnFilter, filterPlaceholder: "Search Columns...", compactHeaderClassName: LAYOUT_WIZARD_COLUMN_LIST_HEADER_CLASS, compactFilterClassName: LAYOUT_WIZARD_COLUMN_LIST_SEARCH_CLASS, hideShowSelectedOnly: true, optionLayout: "label-beside-checkbox", toggleSelectionOnRowClick: true, optionClassName: LAYOUT_WIZARD_COLUMN_LIST_OPTION_CLASS, toIdentifier: (option) => `${option.columnId}`, toLabel: (option) => option.friendlyName ?? option.columnId, toListLabel: (option) => (_jsxs(Flex, { alignItems: "center", className: "twa:min-w-0", children: [_jsx(Box, { className: "twa:truncate", children: option.friendlyName ?? option.columnId }), _jsx(ColumnGroupTag, { column: option })] })), options: sortedGroupableColumns, value: layout.RowGroupedColumns ?? [], allowReorder: true, onChange: handleColumnsChange }) }) }) }), _jsx(CollapsibleWizardCard, { ...bindCard('display-type'), surface: "panel", "data-name": "row-group-display-type", title: "Group Display Type", help: "Choose how Row Grouped Columns display in the grid", collapsedHelp: "How Row Grouped Columns display in the grid", compactSummary: _jsx(Tag, { children: getRowGroupDisplayTypeLabel(layout) }), summary: _jsx(CollapsibleWizardValueSummary, { value: _jsx(Tag, { children: getRowGroupDisplayTypeLabel(layout) }) }), children: _jsx(RowGroupDisplayTypeSection, { layout: layout, onChange: onChange }) }), _jsx(CollapsibleWizardCard, { ...bindCard('behavior'), surface: "panel", "data-name": "row-group-behavior", title: rowGroupsText, help: "Set Grouped Rows expanded / collapsed behaviour when Layout opens", collapsedHelp: "Grouped Rows expanded / collapsed behaviour when Layout opens", compactSummary: _jsx(Tag, { children: getRowGroupBehaviorLabel(layout) }), summary: _jsx(CollapsibleWizardValueSummary, { value: _jsx(Tag, { children: getRowGroupBehaviorLabel(layout) }) }), children: _jsx(RowGroupBehaviorSection, { layout: layout, onChange: onChange }) })] }));
 };

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

@@ -1,7 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { CheckBox } from '../../../../components/CheckBox';
 import Radio from '../../../../components/Radio';
-import { RadioGroup, radioGroupStyling } from '../../../../components/Radio';
+import { RadioGroup } from '../../../../components/Radio';
 import { Tag } from '../../../../components/Tag';
 import { useOnePageAdaptableWizardContext } from '../../../Wizard/OnePageAdaptableWizard';
 import { Box, Flex } from '../../../../components/Flex';
@@ -73,5 +73,5 @@ export const RowSelectionSection = (props) => {
         }
         props.onChange(newLayout);
     };
-    return (_jsxs(Flex, { flexDirection: "column", className: "twa:gap-3 twa:p-3", children: [_jsxs(Card, { shadow: false, children: [_jsxs(Card.Title, { children: [_jsx(Box, { className: "twa:font-medium", children: "Row Selection Mode" }), _jsx(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" })] }), _jsx(Card.Body, { className: "twa:p-1", children: _jsx(Flex, { flexDirection: "row", className: "twa:gap-2 twa:flex-wrap", children: _jsx(RadioGroup, { orientation: "horizontal", variant: "text-only", className: radioGroupStyling.horizontalTextOnly, value: mode, name: "rowSelectionMode", onRadioChange: (value) => handleModeChange(value), children: ROW_SELECTION_MODE_OPTIONS.map((option) => (_jsx(Radio, { value: option.value, "data-name": `row-selection-mode-${option.value === false ? 'disabled' : option.value}`, children: option.label }, String(option.value)))) }) }) })] }), !rowSelection && _jsx(HelpBlock, { children: "There is no Row Selection configured for this Layout" }), rowSelection && (_jsxs(_Fragment, { children: [_jsxs(Card, { shadow: false, children: [_jsxs(Card.Title, { children: [_jsx(Box, { className: "twa:font-medium", children: "Row Selection Column Checkboxes" }), _jsx(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" })] }), _jsx(Card.Body, { className: "twa:p-1", children: _jsxs(Flex, { flexDirection: "row", className: "twa:gap-6", children: [_jsx(CheckBox, { className: "twa:flex-1", checked: rowSelection.Checkboxes ?? true, onChange: (checked) => updateRowSelection({ Checkboxes: checked }), children: "Checkboxes in Column Cells" }), mode === 'multiRow' && (_jsx(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) && (_jsxs(Card, { shadow: false, children: [_jsxs(Card.Title, { children: [_jsx(Box, { className: "twa:font-medium", children: "Row Grouping Selection Checkboxes" }), _jsx(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" })] }), _jsx(Card.Body, { className: "twa:p-1", children: _jsxs(RadioGroup, { orientation: "vertical", value: rowSelection.CheckboxInGroupColumn ?? false, name: "checkboxLocation", onRadioChange: (value) => updateRowSelection({ CheckboxInGroupColumn: value }), children: [_jsx(Radio, { value: false, children: "Display in dedicated Selection Column" }), _jsx(Radio, { value: true, children: "Display in Row Grouped Column" })] }) })] })), _jsxs(Card, { shadow: false, children: [_jsxs(Card.Title, { children: [_jsx(Box, { className: "twa:font-medium", children: "Row Click Selection" }), _jsx(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" })] }), _jsx(Card.Body, { className: "twa:p-1", children: _jsxs(RadioGroup, { orientation: "vertical", value: rowSelection.EnableClickSelection ?? false, name: "clickSelection", onRadioChange: (value) => updateRowSelection({ EnableClickSelection: value }), children: [_jsx(Radio, { value: false, children: "Disabled (Cannot select or deselect by clicking in Row)" }), _jsx(Radio, { value: true, children: "Full (Enable selection by clicking in Row and deselection by Ctrl+clicking in Row)" }), _jsx(Radio, { value: 'enableSelection', children: "Selection Only (Enable selection by clicking in Row)" }), _jsx(Radio, { value: 'enableDeselection', children: "Deselection Only (Enable deselection by Ctrl+clicking in Row)" })] }) })] }), mode === 'multiRow' && !isPivot && (_jsxs(Card, { shadow: false, children: [_jsxs(Card.Title, { children: [_jsx(Box, { className: "twa:font-medium", children: "Grouped Row Selection Behaviour" }), _jsx(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" })] }), _jsx(Card.Body, { className: "twa:p-1", children: _jsxs(RadioGroup, { orientation: "vertical", value: rowSelection.GroupSelectMode ?? 'self', name: "groupSelectMode", onRadioChange: (value) => updateRowSelection({ GroupSelectMode: value }), children: [_jsx(Radio, { value: 'self', children: "Select Grouped Row Only (no cascade)" }), _jsx(Radio, { value: 'descendants', children: "Select Grouped Row and all descendants" }), _jsx(Radio, { value: 'filteredDescendants', children: "Select Grouped Row and only filtered descendants" })] }) })] })), mode === 'multiRow' && (_jsxs(Card, { shadow: false, children: [_jsxs(Card.Title, { children: [_jsx(Box, { className: "twa:font-medium", children: "Select All Behaviour" }), _jsx(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" })] }), _jsx(Card.Body, { className: "twa:p-1", children: _jsxs(RadioGroup, { orientation: "vertical", value: rowSelection.SelectAllMode ?? 'all', name: "selectAllMode", onRadioChange: (value) => updateRowSelection({ SelectAllMode: value }), children: [_jsx(Radio, { value: 'all', children: "All rows" }), _jsx(Radio, { value: 'filtered', children: "Filtered rows only" }), _jsx(Radio, { value: 'currentPage', children: "Current page only" })] }) })] }))] }))] }));
+    return (_jsxs(Flex, { flexDirection: "column", className: "twa:gap-3 twa:p-3", children: [_jsxs(Card, { shadow: false, children: [_jsxs(Card.Title, { children: [_jsx(Box, { className: "twa:font-medium", children: "Row Selection Mode" }), _jsx(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" })] }), _jsx(Card.Body, { className: "twa:p-1", children: _jsx(Flex, { flexDirection: "row", className: "twa:gap-2 twa:flex-wrap", children: _jsx(RadioGroup, { orientation: "horizontal", variant: "text-only", value: mode, name: "rowSelectionMode", onRadioChange: (value) => handleModeChange(value), children: ROW_SELECTION_MODE_OPTIONS.map((option) => (_jsx(Radio, { value: option.value, "data-name": `row-selection-mode-${option.value === false ? 'disabled' : option.value}`, children: option.label }, String(option.value)))) }) }) })] }), !rowSelection && _jsx(HelpBlock, { children: "There is no Row Selection configured for this Layout" }), rowSelection && (_jsxs(_Fragment, { children: [_jsxs(Card, { shadow: false, children: [_jsxs(Card.Title, { children: [_jsx(Box, { className: "twa:font-medium", children: "Row Selection Column Checkboxes" }), _jsx(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" })] }), _jsx(Card.Body, { className: "twa:p-1", children: _jsxs(Flex, { flexDirection: "row", className: "twa:gap-6", children: [_jsx(CheckBox, { className: "twa:flex-1", checked: rowSelection.Checkboxes ?? true, onChange: (checked) => updateRowSelection({ Checkboxes: checked }), children: "Checkboxes in Column Cells" }), mode === 'multiRow' && (_jsx(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) && (_jsxs(Card, { shadow: false, children: [_jsxs(Card.Title, { children: [_jsx(Box, { className: "twa:font-medium", children: "Row Grouping Selection Checkboxes" }), _jsx(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" })] }), _jsx(Card.Body, { className: "twa:p-1", children: _jsxs(RadioGroup, { orientation: "vertical", value: rowSelection.CheckboxInGroupColumn ?? false, name: "checkboxLocation", onRadioChange: (value) => updateRowSelection({ CheckboxInGroupColumn: value }), children: [_jsx(Radio, { value: false, children: "Display in dedicated Selection Column" }), _jsx(Radio, { value: true, children: "Display in Row Grouped Column" })] }) })] })), _jsxs(Card, { shadow: false, children: [_jsxs(Card.Title, { children: [_jsx(Box, { className: "twa:font-medium", children: "Row Click Selection" }), _jsx(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" })] }), _jsx(Card.Body, { className: "twa:p-1", children: _jsxs(RadioGroup, { orientation: "vertical", value: rowSelection.EnableClickSelection ?? false, name: "clickSelection", onRadioChange: (value) => updateRowSelection({ EnableClickSelection: value }), children: [_jsx(Radio, { value: false, children: "Disabled (Cannot select or deselect by clicking in Row)" }), _jsx(Radio, { value: true, children: "Full (Enable selection by clicking in Row and deselection by Ctrl+clicking in Row)" }), _jsx(Radio, { value: 'enableSelection', children: "Selection Only (Enable selection by clicking in Row)" }), _jsx(Radio, { value: 'enableDeselection', children: "Deselection Only (Enable deselection by Ctrl+clicking in Row)" })] }) })] }), mode === 'multiRow' && !isPivot && (_jsxs(Card, { shadow: false, children: [_jsxs(Card.Title, { children: [_jsx(Box, { className: "twa:font-medium", children: "Grouped Row Selection Behaviour" }), _jsx(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" })] }), _jsx(Card.Body, { className: "twa:p-1", children: _jsxs(RadioGroup, { orientation: "vertical", value: rowSelection.GroupSelectMode ?? 'self', name: "groupSelectMode", onRadioChange: (value) => updateRowSelection({ GroupSelectMode: value }), children: [_jsx(Radio, { value: 'self', children: "Select Grouped Row Only (no cascade)" }), _jsx(Radio, { value: 'descendants', children: "Select Grouped Row and all descendants" }), _jsx(Radio, { value: 'filteredDescendants', children: "Select Grouped Row and only filtered descendants" })] }) })] })), mode === 'multiRow' && (_jsxs(Card, { shadow: false, children: [_jsxs(Card.Title, { children: [_jsx(Box, { className: "twa:font-medium", children: "Select All Behaviour" }), _jsx(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" })] }), _jsx(Card.Body, { className: "twa:p-1", children: _jsxs(RadioGroup, { orientation: "vertical", value: rowSelection.SelectAllMode ?? 'all', name: "selectAllMode", onRadioChange: (value) => updateRowSelection({ SelectAllMode: value }), children: [_jsx(Radio, { value: 'all', children: "All rows" }), _jsx(Radio, { value: 'filtered', children: "Filtered rows only" }), _jsx(Radio, { value: 'currentPage', children: "Current page only" })] }) })] }))] }))] }));
 };

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

@@ -5,20 +5,20 @@ import FormLayout, { FormRow } from '../../../../components/FormLayout';
 import SimpleButton from '../../../../components/SimpleButton';
 import { ButtonNew } from '../../../Components/Buttons/ButtonNew';
 import { Card } from '../../../../components/Card';
-import { ColumnTag, Tag } from '../../../../components/Tag';
+import { AccentTag, Tag } from '../../../../components/Tag';
 import { summarySupportedExpressions, WEIGHTED_AVERAGE_AGGREGATED_FUNCTION, } from '../../../../AdaptableState/Common/RowSummary';
-import { mapColumnDataTypeToExpressionFunctionType } from '../../../../Utilities/adaptableQlUtils';
+import { mapColumnDataTypeToExpressionFunctionType } from '../../../../aql/adaptableQlUtils';
 import { LayoutModuleId } from '../../../../Utilities/Constants/ModuleConstants';
-import { aggregatedExpressionFunctions } from '../../../../Utilities/ExpressionFunctions/aggregatedScalarExpressionFunctions';
+import { SYSTEM_AGGREGATION_CATALOGUE } from "../../../../../vendor/aql/index.js";
 import { useAdaptable } from '../../../AdaptableContext';
 import { SuspendToggleButton } from '../../../Components/Buttons/SuspendToggleButton';
 import { ValueSelector } from '../../../Components/ValueSelector';
 import { useOnePageAdaptableWizardContext } from '../../../Wizard/OnePageAdaptableWizard';
-import { columnFilter } from './Utilities';
+import { columnFilter } from '../../Utilities/columnFilter';
 import { ColumnGroupTag } from '../../../Components/ColumnGroupTag';
 import ArrayExtensions from '../../../../Utilities/Extensions/ArrayExtensions';
 import { Box, Flex } from '../../../../components/Flex';
-import { SingleSelect } from '../../../../components/NewSelect';
+import { SingleSelect } from '../../../../components/Select';
 import { CollapsibleWizardCard, getWizardAccordionSectionClassName, useWizardCardAccordion, } from '../../../Wizard/CollapsibleWizardCard';
 import { cn } from '../../../../lib/utils';
 import { objectListActionButtonClassName } from '../../../Components/AdaptableObjectList/objectListActionButtonStyles';
@@ -46,7 +46,7 @@ const getAvailableExpressionsForColumnType = (columnType, availableScalarExpress
     const columnInputType = mapColumnDataTypeToExpressionFunctionType(columnType);
     const expressions = Object.keys(availableScalarExpressions)
         .filter((availableExpression) => {
-        if (!aggregatedExpressionFunctions.includes(availableExpression)) {
+        if (!SYSTEM_AGGREGATION_CATALOGUE.isSystem(availableExpression)) {
             return true;
         }
         return Boolean(summarySupportedExpressions.includes(availableExpression));
@@ -106,7 +106,7 @@ const RowSummaryCardSummary = ({ rowSummary }) => {
     if (!columnIds.length) {
         return _jsx(Tag, { children: "No columns" });
     }
-    return (_jsx(Flex, { flexWrap: "wrap", className: "twa:gap-1", children: columnIds.map((colId) => (_jsxs(ColumnTag, { children: [rowSummary.ColumnsMap[colId], "(", adaptable.api.columnApi.getFriendlyNameForColumnId(colId), ")"] }, colId))) }));
+    return (_jsx(Flex, { flexWrap: "wrap", className: "twa:gap-1", children: columnIds.map((colId) => (_jsxs(AccentTag, { children: [rowSummary.ColumnsMap[colId], "(", adaptable.api.columnApi.getFriendlyNameForColumnId(colId), ")"] }, colId))) }));
 };
 export const RowSummarySectionSummary = () => {
     const adaptable = useAdaptable();
@@ -115,7 +115,7 @@ export const RowSummarySectionSummary = () => {
             return (_jsxs(Box, { className: "twa:mr-1 twa:mb-1", children: [rowSummary.Position, ":", ' ', Object.keys(rowSummary.ColumnsMap).map((colId) => {
                         if (colId === 'Source' || colId === 'Uuid')
                             return null;
-                        return (_jsxs(ColumnTag, { className: "twa:mr-1", children: [rowSummary.ColumnsMap[colId], "(", adaptable.api.columnApi.getFriendlyNameForColumnId(colId), ")"] }, colId));
+                        return (_jsxs(AccentTag, { className: "twa:mr-1", children: [rowSummary.ColumnsMap[colId], "(", adaptable.api.columnApi.getFriendlyNameForColumnId(colId), ")"] }, colId));
                     })] }, index));
         })) : (_jsx(Tag, { children: "No Row Summaries" })) }));
 };
@@ -200,7 +200,7 @@ export const RowSummarySection = (props) => {
             .getModuleExpressionFunctionsMap(LayoutModuleId).aggregatedScalarFunctions;
         return sytemExpressions;
     }, []);
-    const { bindCard, hasExpandedCard, expandedFillsSpace, expandedId, setExpandedId } = useWizardCardAccordion(null);
+    const { bindCard, hasExpandedCard, expandedFillsSpace, expandedId, setExpandedId } = useWizardCardAccordion(rowSummaries.length === 1 ? rowSummaryCardId(0) : null);
     const handleAddRowSummary = () => {
         const newIndex = rowSummaries.length;
         props.onChange({

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

@@ -2,14 +2,14 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import * as React from 'react';
 import SimpleButton from '../../../../components/SimpleButton';
 import { Card } from '../../../../components/Card';
-import { ColumnTag, Tag } from '../../../../components/Tag';
-import { getLayoutSortViewItems } from '../../../../Strategy/Utilities/Layout/getLayoutSortViewItems';
+import { AccentTag, Tag } from '../../../../components/Tag';
+import { getLayoutSortViewItems } from '../../../../View/ObjectItemViews/Layout/getLayoutSortViewItems';
 import { useAdaptable } from '../../../AdaptableContext';
 import { ValueSelector } from '../../../Components/ValueSelector';
 import { useOnePageAdaptableWizardContext } from '../../../Wizard/OnePageAdaptableWizard';
-import { columnFilter } from './Utilities';
+import { columnFilter } from '../../Utilities/columnFilter';
 import { cn } from '../../../../lib/utils';
-import { LAYOUT_WIZARD_COLUMN_LIST_HEADER_CLASS, LAYOUT_WIZARD_COLUMN_LIST_SEARCH_CLASS, } from './layoutWizardColumns';
+import { LAYOUT_WIZARD_COLUMN_LIST_HEADER_CLASS, LAYOUT_WIZARD_COLUMN_LIST_SEARCH_CLASS, } from '../../Utilities/layoutWizardColumns';
 import { ColumnGroupTag } from '../../../Components/ColumnGroupTag';
 import ArrayExtensions from '../../../../Utilities/Extensions/ArrayExtensions';
 import { Box, Flex } from '../../../../components/Flex';
@@ -18,7 +18,7 @@ export const SortSectionSummary = () => {
     const { data: layout } = useOnePageAdaptableWizardContext();
     const adaptable = useAdaptable();
     const sortViewItems = getLayoutSortViewItems(layout, adaptable.api);
-    return (_jsx(Box, { children: sortViewItems.values.length ? (sortViewItems.values.map((value) => (_jsx(ColumnTag, { className: "twa:mb-1 twa:mr-1", children: value }, value)))) : (_jsx(Tag, { children: "No Sorts" })) }));
+    return (_jsx(Box, { children: sortViewItems.values.length ? (sortViewItems.values.map((value) => (_jsx(AccentTag, { className: "twa:mb-1 twa:mr-1", children: value }, value)))) : (_jsx(Tag, { children: "No Sorts" })) }));
 };
 const getColumnSortOrder = (layout, columnId) => (layout.ColumnSorts ?? []).find((sort) => sort.ColumnId === columnId)?.SortOrder;
 const SortDirectionButton = (props) => {
@@ -39,7 +39,7 @@ export const buildColumnSortingSummary = (layout, adaptable) => {
     if (!sortViewItems.values.length) {
         return _jsx(Tag, { children: "No sorts" });
     }
-    return (_jsx(Flex, { flexWrap: "wrap", className: "twa:gap-1", children: sortViewItems.values.map((value) => (_jsx(ColumnTag, { children: value }, value))) }));
+    return (_jsx(Flex, { flexWrap: "wrap", className: "twa:gap-1", children: sortViewItems.values.map((value) => (_jsx(AccentTag, { children: value }, value))) }));
 };
 export const ColumnSortingWizardCard = (props) => {
     const title = props.title ?? 'Sorting';
@@ -79,5 +79,5 @@ export const ColumnSortingWizardCard = (props) => {
         });
     }, [props.layout, props.onChange]);
     const sortViewItems = getLayoutSortViewItems(props.layout, adaptable.api);
-    return (_jsx(CollapsibleWizardCard, { ...props.bindCard(cardId, { fillAvailable: fillWhenExpanded }), surface: "panel", "data-name": dataName, title: title, help: "Select columns to sort and set their order. Drag to change sort priority.", collapsedHelp: "", compactSummary: sortViewItems.values.length ? (_jsxs(Flex, { alignItems: "center", className: "twa:gap-1 twa:min-w-0 twa:overflow-hidden", children: [sortViewItems.values.slice(0, 2).map((value) => (_jsx(ColumnTag, { className: "twa:shrink-0", children: value }, value))), sortViewItems.values.length > 2 ? (_jsxs("span", { className: "twa:text-xs twa:opacity-70 twa:shrink-0", children: ["+", sortViewItems.values.length - 2] })) : null] })) : ('No sorts'), summary: buildColumnSortingSummary(props.layout, adaptable), className: "twa:overflow-hidden twa:flex twa:flex-col", bodyClassName: "twa:min-h-[200px] twa:max-h-[420px] twa:overflow-hidden twa:flex twa:flex-col twa:!pt-0 twa:!pb-0 twa:px-1", children: _jsx(Card, { shadow: false, className: "twa:h-full twa:overflow-hidden twa:flex twa:flex-col", children: _jsx(Card.Body, { className: "twa:flex-1 twa:min-h-0 twa:overflow-hidden twa:px-1 twa:pt-0 twa:pb-0", children: _jsx(Box, { className: "twa:flex twa:flex-col twa:gap-1.5 twa:h-full twa:overflow-hidden twa:flex-1 twa:min-h-0", "data-name": "sorting-columns-container", children: _jsx(ValueSelector, { compact: true, showFilterInput: true, filter: columnFilter, filterPlaceholder: "Search Columns...", compactHeaderClassName: LAYOUT_WIZARD_COLUMN_LIST_HEADER_CLASS, compactFilterClassName: LAYOUT_WIZARD_COLUMN_LIST_SEARCH_CLASS, toggleSelectionOnRowClick: true, optionClassName: SORT_VALUE_SELECTOR_OPTION_CLASS, toIdentifier: (option) => `${option.columnId}`, toLabel: (option) => option.friendlyName ?? option.columnId, optionLayout: "label-beside-checkbox", toListLabel: (column) => (_jsx(SortColumnRow, { compact: true, column: column, layout: props.layout, onSortChange: handleSortChange })), options: sortedSortColumns, value: (props.layout.ColumnSorts ?? []).map((sort) => sort.ColumnId), allowReorder: () => true, onChange: handleColumnsSelectionChange }) }) }) }) }));
+    return (_jsx(CollapsibleWizardCard, { ...props.bindCard(cardId, { fillAvailable: fillWhenExpanded }), surface: "panel", "data-name": dataName, title: title, help: "Select columns to sort and set their order. Drag to change sort priority.", collapsedHelp: "", compactSummary: sortViewItems.values.length ? (_jsxs(Flex, { alignItems: "center", className: "twa:gap-1 twa:min-w-0 twa:overflow-hidden", children: [sortViewItems.values.slice(0, 2).map((value) => (_jsx(AccentTag, { className: "twa:shrink-0", children: value }, value))), sortViewItems.values.length > 2 ? (_jsxs("span", { className: "twa:text-xs twa:opacity-70 twa:shrink-0", children: ["+", sortViewItems.values.length - 2] })) : null] })) : ('No sorts'), summary: buildColumnSortingSummary(props.layout, adaptable), className: "twa:overflow-hidden twa:flex twa:flex-col", bodyClassName: "twa:min-h-[200px] twa:max-h-[420px] twa:overflow-hidden twa:flex twa:flex-col twa:!pt-0 twa:!pb-0 twa:px-1", children: _jsx(Card, { shadow: false, className: "twa:h-full twa:overflow-hidden twa:flex twa:flex-col", children: _jsx(Card.Body, { className: "twa:flex-1 twa:min-h-0 twa:overflow-hidden twa:px-1 twa:pt-0 twa:pb-0", children: _jsx(Box, { className: "twa:flex twa:flex-col twa:gap-1.5 twa:h-full twa:overflow-hidden twa:flex-1 twa:min-h-0", "data-name": "sorting-columns-container", children: _jsx(ValueSelector, { compact: true, showFilterInput: true, filter: columnFilter, filterPlaceholder: "Search Columns...", compactHeaderClassName: LAYOUT_WIZARD_COLUMN_LIST_HEADER_CLASS, compactFilterClassName: LAYOUT_WIZARD_COLUMN_LIST_SEARCH_CLASS, toggleSelectionOnRowClick: true, optionClassName: SORT_VALUE_SELECTOR_OPTION_CLASS, toIdentifier: (option) => `${option.columnId}`, toLabel: (option) => option.friendlyName ?? option.columnId, optionLayout: "label-beside-checkbox", toListLabel: (column) => (_jsx(SortColumnRow, { compact: true, column: column, layout: props.layout, onSortChange: handleSortChange })), options: sortedSortColumns, value: (props.layout.ColumnSorts ?? []).map((sort) => sort.ColumnId), allowReorder: () => true, onChange: handleColumnsSelectionChange }) }) }) }) }));
 };

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

@@ -2,7 +2,7 @@ import * as React from 'react';
 import { Layout, TableLayout } from '../../../../../types';
 import { type WizardCardAccordionBindCard } from '../../../Wizard/CollapsibleWizardCard';
 import type { IAdaptable } from '../../../../AdaptableInterfaces/IAdaptable';
-import { type ColumnDefaultWidthResolver } from './columnLayoutHelpers';
+import { type ColumnDefaultWidthResolver } from '../../Utilities/columnLayoutHelpers';
 export declare const buildColumnPinningSummary: (layout: Layout, adaptable: IAdaptable) => React.ReactNode;
 export declare const buildColumnSizingSummary: (layout: Layout, adaptable: IAdaptable, resolveDefaultWidth: ColumnDefaultWidthResolver) => React.ReactNode;
 interface ColumnPinningWizardCardProps {

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

@@ -1,21 +1,21 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import * as React from 'react';
 import Input from '../../../../components/Input';
-import Radio, { RadioGroup, radioGroupStyling } from '../../../../components/Radio';
+import Radio, { RadioGroup } from '../../../../components/Radio';
 import { useAdaptable } from '../../../AdaptableContext';
 import { CollapsibleWizardCard } from '../../../Wizard/CollapsibleWizardCard';
-import { columnFilter } from './Utilities';
+import { columnFilter } from '../../Utilities/columnFilter';
 import { AdaptableFormControlTextClear } from '../../../Components/Forms/AdaptableFormControlTextClear';
 import { ColumnGroupTag } from '../../../Components/ColumnGroupTag';
-import { ColumnTag, Tag } from '../../../../components/Tag';
+import { AccentTag, Tag } from '../../../../components/Tag';
 import { Box, Flex } from '../../../../components/Flex';
-import { getLayoutWizardOrderedColumns } from './layoutWizardColumns';
+import { getLayoutWizardOrderedColumns } from '../../Utilities/layoutWizardColumns';
 import { cn } from '../../../../lib/utils';
-import { COLUMN_PINNING_OPTIONS, formatColumnSizingBrief, getExplicitSizingDisplayValues, getLayoutExplicitSizedColumnIds, getLayoutPinnedColumnIds, hasExplicitLayoutSizing, } from './columnLayoutHelpers';
+import { COLUMN_PINNING_OPTIONS, formatColumnSizingBrief, getExplicitSizingDisplayValues, getLayoutExplicitSizedColumnIds, getLayoutPinnedColumnIds, hasExplicitLayoutSizing, } from '../../Utilities/columnLayoutHelpers';
 const PinningColumnRow = (props) => {
     const columnPinning = props.layout.ColumnPinning?.[props.column.columnId];
     const currentPin = columnPinning === 'left' || columnPinning === 'right' ? columnPinning : 'None';
-    return (_jsxs(Flex, { alignItems: "center", className: cn('ab-Layout-Wizard__ColumnListRow', 'twa:bg-primary twa:text-primary-foreground twa:rounded-standard', 'twa:gap-2 twa:py-1.5 twa:px-2 twa:min-h-[2.5rem]'), "data-name": `pinning-row-${props.column.columnId}`, children: [_jsx(Box, { className: "twa:flex-1 twa:min-w-0 twa:truncate", children: _jsxs(Flex, { alignItems: "center", children: [props.column.friendlyName ?? props.column.columnId, _jsx(ColumnGroupTag, { column: props.column })] }) }), _jsx(RadioGroup, { orientation: "horizontal", variant: "text-only", className: cn(radioGroupStyling.horizontalTextOnly, 'twa:shrink-0'), value: currentPin, name: `pinning-${props.column.columnId}`, onRadioChange: (value) => {
+    return (_jsxs(Flex, { alignItems: "center", className: cn('ab-Layout-Wizard__ColumnListRow', 'twa:bg-primary twa:text-primary-foreground twa:rounded-standard', 'twa:gap-2 twa:py-1.5 twa:px-2 twa:min-h-[2.5rem]'), "data-name": `pinning-row-${props.column.columnId}`, children: [_jsx(Box, { className: "twa:flex-1 twa:min-w-0 twa:truncate", children: _jsxs(Flex, { alignItems: "center", children: [props.column.friendlyName ?? props.column.columnId, _jsx(ColumnGroupTag, { column: props.column })] }) }), _jsx(RadioGroup, { orientation: "horizontal", variant: "text-only", className: "twa:shrink-0", value: currentPin, name: `pinning-${props.column.columnId}`, onRadioChange: (value) => {
                     props.onPinChange(props.column.columnId, value === 'None' ? null : value);
                 }, children: COLUMN_PINNING_OPTIONS.map((option) => (_jsx(Radio, { value: option.value, "data-name": `pinning-${props.column.columnId}-${option.value}`, children: option.label }, option.value))) })] }));
 };
@@ -40,14 +40,14 @@ export const buildColumnPinningSummary = (layout, adaptable) => {
     if (!leftPinned.length && !rightPinned.length) {
         return _jsx(Tag, { children: "None pinned" });
     }
-    return (_jsxs(Flex, { flexDirection: "column", className: "twa:gap-2", children: [leftPinned.length ? (_jsxs(Flex, { flexWrap: "wrap", className: "twa:gap-1 twa:items-center", children: [_jsx(Box, { className: "twa:text-xs twa:opacity-70", children: "Left:" }), leftPinned.map((columnId) => (_jsx(ColumnTag, { children: adaptable.api.columnApi.getFriendlyNameForColumnId(columnId, layout) }, columnId)))] })) : null, rightPinned.length ? (_jsxs(Flex, { flexWrap: "wrap", className: "twa:gap-1 twa:items-center", children: [_jsx(Box, { className: "twa:text-xs twa:opacity-70", children: "Right:" }), rightPinned.map((columnId) => (_jsx(ColumnTag, { children: adaptable.api.columnApi.getFriendlyNameForColumnId(columnId, layout) }, columnId)))] })) : null] }));
+    return (_jsxs(Flex, { flexDirection: "column", className: "twa:gap-2", children: [leftPinned.length ? (_jsxs(Flex, { flexWrap: "wrap", className: "twa:gap-1 twa:items-center", children: [_jsx(Box, { className: "twa:text-xs twa:opacity-70", children: "Left:" }), leftPinned.map((columnId) => (_jsx(AccentTag, { children: adaptable.api.columnApi.getFriendlyNameForColumnId(columnId, layout) }, columnId)))] })) : null, rightPinned.length ? (_jsxs(Flex, { flexWrap: "wrap", className: "twa:gap-1 twa:items-center", children: [_jsx(Box, { className: "twa:text-xs twa:opacity-70", children: "Right:" }), rightPinned.map((columnId) => (_jsx(AccentTag, { children: adaptable.api.columnApi.getFriendlyNameForColumnId(columnId, layout) }, columnId)))] })) : null] }));
 };
 export const buildColumnSizingSummary = (layout, adaptable, resolveDefaultWidth) => {
     const sizedColumnIds = getLayoutExplicitSizedColumnIds(layout, resolveDefaultWidth);
     if (!sizedColumnIds.length) {
         return _jsx(Tag, { children: "Default sizing" });
     }
-    return (_jsx(Flex, { flexWrap: "wrap", className: "twa:gap-1", children: sizedColumnIds.map((columnId) => (_jsxs(ColumnTag, { children: [adaptable.api.columnApi.getFriendlyNameForColumnId(columnId, layout), " (", formatColumnSizingBrief(columnId, layout.ColumnSizing?.[columnId], resolveDefaultWidth), ")"] }, columnId))) }));
+    return (_jsx(Flex, { flexWrap: "wrap", className: "twa:gap-1", children: sizedColumnIds.map((columnId) => (_jsxs(AccentTag, { children: [adaptable.api.columnApi.getFriendlyNameForColumnId(columnId, layout), " (", formatColumnSizingBrief(columnId, layout.ColumnSizing?.[columnId], resolveDefaultWidth), ")"] }, columnId))) }));
 };
 export const ColumnPinningWizardCard = (props) => {
     const adaptable = useAdaptable();