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

package/src/Strategy/StyledColumnModule.js

@@ -6,6 +6,7 @@ const AdaptableModuleBase_1 = require("./AdaptableModuleBase");
 const ModuleConstants = tslib_1.__importStar(require("../Utilities/Constants/ModuleConstants"));
 const StyledColumnRedux = tslib_1.__importStar(require("../Redux/ActionsReducers/StyledColumnRedux"));
 const StyledColumnWizard_1 = require("../View/StyledColumn/Wizard/StyledColumnWizard");
+const SummaryColorTag_1 = require("../View/Wizard/SummaryColorTag");
 const StyledColumnWizardStyleSection_1 = require("../View/StyledColumn/Wizard/StyledColumnWizardStyleSection/StyledColumnWizardStyleSection");
 const StyledColumnWizardGradientSection_1 = require("../View/StyledColumn/Wizard/StyledColumnWizardGradientSection");
 const StyledColumnWizardBulletSection_1 = require("../View/StyledColumn/Wizard/StyledColumnWizardBulletSection");
@@ -84,26 +85,7 @@ class StyledColumnModule extends AdaptableModuleBase_1.AdaptableModuleBase {
                 // Edit is common
                 if (styledColumn) {
                     if (!styledColumn.IsReadOnly) {
-                        let defaultCurrentSectionName = undefined;
-                        if (styledColumn.BadgeStyle) {
-                            defaultCurrentSectionName = 'Badges';
-                        }
-                        else if (styledColumn.GradientStyle || styledColumn.PercentBarStyle) {
-                            // Gradient + Percent Bar wizards now lead with the Ranges step.
-                            defaultCurrentSectionName = 'Ranges';
-                        }
-                        else if (styledColumn.BulletChartStyle) {
-                            defaultCurrentSectionName = 'Ranges';
-                        }
-                        else if (styledColumn.RangeBarStyle) {
-                            defaultCurrentSectionName = 'Style';
-                        }
-                        else if (styledColumn.IconStyle) {
-                            defaultCurrentSectionName = 'Mappings';
-                        }
-                        else {
-                            defaultCurrentSectionName = 'Style';
-                        }
+                        const defaultCurrentSectionName = (0, StyledColumnWizard_1.getStyledColumnEditDefaultSectionName)(styledColumn);
                         const popupParam = {
                             action: 'Edit',
                             source: 'ColumnMenu',
@@ -295,7 +277,7 @@ class StyledColumnModule extends AdaptableModuleBase_1.AdaptableModuleBase {
             if (styledColumn.PercentBarStyle) {
                 specificTypeItems.push({
                     name: 'Style',
-                    values: (0, StyledColumnWizardStyleSection_1.getStyledColumnPercentBarStyleViewValues)(styledColumn),
+                    values: (0, SummaryColorTag_1.summaryStringsToTagContents)((0, StyledColumnWizardStyleSection_1.getStyledColumnPercentBarStyleViewValues)(styledColumn)),
                 });
                 specificTypeItems.push({
                     name: 'Preview',
@@ -305,7 +287,7 @@ class StyledColumnModule extends AdaptableModuleBase_1.AdaptableModuleBase {
             if (styledColumn.GradientStyle) {
                 specificTypeItems.push({
                     name: 'Style',
-                    values: (0, StyledColumnWizardGradientSection_1.getStyledColumnGradientStyleViewValues)(styledColumn),
+                    values: (0, SummaryColorTag_1.summaryStringsToTagContents)((0, StyledColumnWizardGradientSection_1.getStyledColumnGradientStyleViewValues)(styledColumn)),
                 });
                 specificTypeItems.push({
                     name: 'Preview',
@@ -320,7 +302,7 @@ class StyledColumnModule extends AdaptableModuleBase_1.AdaptableModuleBase {
             });
             specificTypeItems.push({
                 name: 'Style',
-                values: (0, StyledColumnWizardBulletSection_1.getStyledColumnBulletStyleViewValues)(styledColumn),
+                values: (0, SummaryColorTag_1.summaryStringsToTagContents)((0, StyledColumnWizardBulletSection_1.getStyledColumnBulletStyleViewValues)(styledColumn)),
             });
             specificTypeItems.push({
                 name: 'Preview',
@@ -330,7 +312,7 @@ class StyledColumnModule extends AdaptableModuleBase_1.AdaptableModuleBase {
         if (styledColumn.RatingStyle) {
             specificTypeItems.push({
                 name: 'Style',
-                values: (0, StyledColumnWizardRatingSection_1.getStyledColumnRatingStyleViewValues)(styledColumn),
+                values: (0, SummaryColorTag_1.summaryStringsToTagContents)((0, StyledColumnWizardRatingSection_1.getStyledColumnRatingStyleViewValues)(styledColumn)),
             });
             specificTypeItems.push({
                 name: 'Preview',
@@ -344,7 +326,7 @@ class StyledColumnModule extends AdaptableModuleBase_1.AdaptableModuleBase {
             });
             specificTypeItems.push({
                 name: 'Display',
-                values: (0, StyledColumnWizardRangeBarSection_1.getStyledColumnRangeBarDisplayViewValues)(styledColumn),
+                values: (0, SummaryColorTag_1.summaryStringsToTagContents)((0, StyledColumnWizardRangeBarSection_1.getStyledColumnRangeBarDisplayViewValues)(styledColumn)),
             });
             specificTypeItems.push({
                 name: 'Preview',
@@ -358,7 +340,7 @@ class StyledColumnModule extends AdaptableModuleBase_1.AdaptableModuleBase {
             });
             specificTypeItems.push({
                 name: 'Style',
-                values: (0, StyledColumnWizardIconSection_1.getStyledColumnIconStyleViewValues)(styledColumn),
+                values: (0, SummaryColorTag_1.summaryStringsToTagContents)((0, StyledColumnWizardIconSection_1.getStyledColumnIconStyleViewValues)(styledColumn)),
             });
             specificTypeItems.push({
                 name: 'Preview',
@@ -372,7 +354,7 @@ class StyledColumnModule extends AdaptableModuleBase_1.AdaptableModuleBase {
             });
             specificTypeItems.push({
                 name: 'Style',
-                values: (0, StyledColumnBadgeSection_1.getStyledColumnBadgeStyleViewValues)(styledColumn, this.api),
+                values: (0, SummaryColorTag_1.summaryStringsToTagContents)((0, StyledColumnBadgeSection_1.getStyledColumnBadgeStyleViewValues)(styledColumn, this.api)),
             });
             specificTypeItems.push({
                 name: 'Preview',
@@ -382,7 +364,7 @@ class StyledColumnModule extends AdaptableModuleBase_1.AdaptableModuleBase {
         if (styledColumn.SparklineStyle) {
             specificTypeItems.push({
                 name: 'Style',
-                values: (0, StyledColumnSparklineSettingsSection_1.getStyledColumnSparklineStyleViewValues)(styledColumn),
+                values: (0, SummaryColorTag_1.summaryStringsToTagContents)((0, StyledColumnSparklineSettingsSection_1.getStyledColumnSparklineStyleViewValues)(styledColumn)),
             });
             specificTypeItems.push({
                 name: 'Preview',
@@ -404,6 +386,7 @@ class StyledColumnModule extends AdaptableModuleBase_1.AdaptableModuleBase {
                 {
                     name: 'Column',
                     values: [this.api.columnApi.getFriendlyNameForColumnId(styledColumn.ColumnId)],
+                    tagVariant: 'column',
                 },
                 {
                     name: 'Rows',

package/src/Strategy/Utilities/CustomSort/getCustomSortColumnViewItems.d.ts

@@ -2,4 +2,5 @@ import { AdaptableApi, CustomSort } from '../../../../types';
 export declare const getCustomSortColumnViewItems: (customSort: CustomSort, api: AdaptableApi) => {
     name: string;
     values: string[];
+    tagVariant: "column";
 };

package/src/Strategy/Utilities/CustomSort/getCustomSortColumnViewItems.js

@@ -5,6 +5,7 @@ const getCustomSortColumnViewItems = (customSort, api) => {
     return {
         name: 'Column',
         values: [api.columnApi.getFriendlyNameForColumnId(customSort.ColumnId)],
+        tagVariant: 'column',
     };
 };
 exports.getCustomSortColumnViewItems = getCustomSortColumnViewItems;

package/src/Strategy/Utilities/Export/getExportColumnsViewItems.d.ts

@@ -1,3 +1,5 @@
+import * as React from 'react';
 import { AdaptableObjectItemView } from '../../Interface/IModule';
 import { AdaptableApi, Report } from '../../../../types';
 export declare const getExportColumnsViewItems: (report: Report, api: AdaptableApi) => AdaptableObjectItemView;
+export declare const renderExportColumnsView: (report: Report, api: AdaptableApi) => React.ReactNode;

package/src/Strategy/Utilities/Export/getExportColumnsViewItems.js

@@ -1,10 +1,26 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.getExportColumnsViewItems = void 0;
+exports.renderExportColumnsView = exports.getExportColumnsViewItems = void 0;
+const tslib_1 = require("tslib");
+const React = tslib_1.__importStar(require("react"));
+const Tag_1 = require("../../../components/Tag/Tag");
+const columnScopeTagHelpers_1 = require("../../../components/Tag/columnScopeTagHelpers");
 const getExportColumnsViewItems = (report, api) => {
     return {
         name: 'Columns',
         values: [...api.exportApi.internalApi.getReportColumnScopeShortDescription(report)],
+        tagVariant: (0, columnScopeTagHelpers_1.reportColumnTagsUseColumnVariant)(report) ? 'column' : undefined,
     };
 };
 exports.getExportColumnsViewItems = getExportColumnsViewItems;
+const renderExportColumnsView = (report, api) => {
+    const { values } = (0, exports.getExportColumnsViewItems)(report, api);
+    if (!values?.length) {
+        return null;
+    }
+    return React.createElement(Tag_1.TagList, {
+        tags: values,
+        variant: (0, columnScopeTagHelpers_1.reportColumnTagsUseColumnVariant)(report) ? 'column' : undefined,
+    });
+};
+exports.renderExportColumnsView = renderExportColumnsView;

package/src/Strategy/Utilities/Export/getExportRowsViewItems.d.ts

@@ -4,3 +4,4 @@ export declare const getExportRowsViewItems: (report: Report, api: AdaptableApi)
     name: string;
     view: React.JSX.Element;
 };
+export declare const renderExportRowsView: (report: Report, api: AdaptableApi) => React.ReactNode;

package/src/Strategy/Utilities/Export/getExportRowsViewItems.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.getExportRowsViewItems = void 0;
+exports.renderExportRowsView = exports.getExportRowsViewItems = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const ExpressionPreview_1 = require("../../../components/ExpressionEditor/ExpressionPreview");
 const Tag_1 = require("../../../components/Tag");
@@ -18,3 +18,7 @@ const getExportRowsViewItems = (report, api) => {
     };
 };
 exports.getExportRowsViewItems = getExportRowsViewItems;
+const renderExportRowsView = (report, api) => {
+    return (0, exports.getExportRowsViewItems)(report, api).view;
+};
+exports.renderExportRowsView = renderExportRowsView;

package/src/Strategy/Utilities/Layout/aggregationSummaryHelpers.d.ts

@@ -0,0 +1,11 @@
+import { AdaptableApi, PivotLayout, TableLayout } from '../../../types';
+export declare function getTableAggregationSummaryValues(layout: TableLayout, api: AdaptableApi): string[];
+export declare function getPivotAggregationSummaryValues(layout: PivotLayout, api: AdaptableApi): string[];
+export declare function getLayoutTableAggregationViewItems(layout: TableLayout, api: AdaptableApi): {
+    name: string;
+    values: string[];
+}[];
+export declare function getLayoutPivotAggregationViewItems(layout: PivotLayout, api: AdaptableApi): {
+    name: string;
+    values: string[];
+}[];

package/src/Strategy/Utilities/Layout/aggregationSummaryHelpers.js

@@ -0,0 +1,111 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getTableAggregationSummaryValues = getTableAggregationSummaryValues;
+exports.getPivotAggregationSummaryValues = getPivotAggregationSummaryValues;
+exports.getLayoutTableAggregationViewItems = getLayoutTableAggregationViewItems;
+exports.getLayoutPivotAggregationViewItems = getLayoutPivotAggregationViewItems;
+const AggregationColumns_1 = require("../../../AdaptableState/Common/AggregationColumns");
+const IGNORED_AGG_COLUMN_IDS = new Set(['Source', 'Uuid', 'AdaptableVersion']);
+const GRAND_TOTAL_ROW_LABELS = {
+    off: 'None',
+    top: 'Top',
+    bottom: 'Bottom',
+    pinnedTop: 'Pinned Top',
+    pinnedBottom: 'Pinned Bottom',
+};
+const PIVOT_LAYOUT_TOTAL_LABELS = {
+    off: 'None',
+    before: 'Before',
+    after: 'After',
+};
+function getGrandTotalRowKey(layout) {
+    const value = layout.GrandTotalRow;
+    if (value == null || value === false) {
+        return 'off';
+    }
+    return value;
+}
+function getGrandTotalRowLabel(layout) {
+    return GRAND_TOTAL_ROW_LABELS[getGrandTotalRowKey(layout)];
+}
+function getPivotLayoutTotalKey(value) {
+    if (value == null || value === false) {
+        return 'off';
+    }
+    if (value === 'before') {
+        return 'before';
+    }
+    if (value === 'after') {
+        return 'after';
+    }
+    return 'off';
+}
+function getPivotLayoutTotalLabel(value) {
+    return PIVOT_LAYOUT_TOTAL_LABELS[getPivotLayoutTotalKey(value)];
+}
+function formatAggregationTag(columnId, aggFn, columnIdToFriendlyName) {
+    if (IGNORED_AGG_COLUMN_IDS.has(columnId)) {
+        return null;
+    }
+    let aggFnName = '';
+    if (typeof aggFn === 'string') {
+        aggFnName = aggFn;
+    }
+    else if (typeof aggFn === 'object' && aggFn?.type === 'weightedAverage') {
+        aggFnName = AggregationColumns_1.WEIGHTED_AVERAGE_AGG_FN_NAME;
+    }
+    if (!aggFnName) {
+        return null;
+    }
+    return `${aggFnName}(${columnIdToFriendlyName(columnId)})`;
+}
+function getTableAggregationSummaryValues(layout, api) {
+    const columnIdToFriendlyName = (columnId) => api.columnApi.getFriendlyNameForColumnId(columnId);
+    const values = (layout.TableAggregationColumns || [])
+        .map(({ ColumnId, AggFunc }) => formatAggregationTag(ColumnId, AggFunc, columnIdToFriendlyName))
+        .filter((value) => Boolean(value));
+    if (getGrandTotalRowKey(layout) !== 'off') {
+        values.push(`Grand Total Row: ${getGrandTotalRowLabel(layout)}`);
+    }
+    return values;
+}
+function getPivotAggregationSummaryValues(layout, api) {
+    const columnIdToFriendlyName = (columnId) => api.columnApi.getFriendlyNameForColumnId(columnId);
+    const values = (layout.PivotAggregationColumns || [])
+        .map(({ ColumnId, AggFunc }) => formatAggregationTag(ColumnId, AggFunc, columnIdToFriendlyName))
+        .filter((value) => Boolean(value));
+    if (getGrandTotalRowKey(layout) !== 'off') {
+        values.push(`Grand Total Row: ${getGrandTotalRowLabel(layout)}`);
+    }
+    if (getPivotLayoutTotalKey(layout.PivotGrandTotal) !== 'off') {
+        values.push(`Pivot Grand Total: ${getPivotLayoutTotalLabel(layout.PivotGrandTotal)}`);
+    }
+    if (getPivotLayoutTotalKey(layout.PivotColumnTotal) !== 'off') {
+        values.push(`Pivot Column Total: ${getPivotLayoutTotalLabel(layout.PivotColumnTotal)}`);
+    }
+    return values;
+}
+function getLayoutTableAggregationViewItems(layout, api) {
+    const values = getTableAggregationSummaryValues(layout, api);
+    if (!values.length) {
+        return [];
+    }
+    return [
+        {
+            name: 'Aggregations',
+            values,
+        },
+    ];
+}
+function getLayoutPivotAggregationViewItems(layout, api) {
+    const values = getPivotAggregationSummaryValues(layout, api);
+    if (!values.length) {
+        return [];
+    }
+    return [
+        {
+            name: 'Aggregations',
+            values,
+        },
+    ];
+}

package/src/Strategy/Utilities/Layout/columnsSummaryHelpers.d.ts

@@ -0,0 +1,48 @@
+import { AdaptableApi, Layout, TableLayout } from '../../../types';
+export declare const TABLE_COLUMNS_SETTINGS_PANEL_LABELS: {
+    visibility: string;
+    pinning: string;
+    sizing: string;
+    sorting: string;
+};
+export declare const TABLE_COLUMNS_WIZARD_SUBSECTION_LABELS: {
+    visibility: string;
+    pinning: string;
+    sizing: string;
+    sorting: string;
+};
+export type TableColumnsSummaryLabels = {
+    readonly visibility: string;
+    readonly pinning: string;
+    readonly sizing: string;
+    readonly sorting: string;
+};
+export type TableColumnsSummaryGroup = {
+    label: string;
+    values: string[];
+    emptyLabel: string;
+};
+export declare function getTableColumnsVisibilitySummaryValues(layout: TableLayout, api: AdaptableApi): string[];
+export declare function getTableColumnsPinningSummaryValues(layout: Layout, api: AdaptableApi): string[];
+export declare function getTableColumnsSizingSummaryValues(layout: Layout, api: AdaptableApi): string[];
+export declare function getTableColumnsSortingSummaryValues(layout: Layout, api: AdaptableApi): string[];
+/** Matches legacy Layout settings panel behaviour (`layoutViewOptions.maxColumnsToDisplay`). */
+export declare const DEFAULT_LAYOUT_VIEW_MAX_COLUMNS = 10;
+/**
+ * Collapse a long column list for compact views (e.g. Layout settings panel).
+ * Keeps all items when the overflow is only 1 column; otherwise shows `+N more`.
+ */
+export declare function truncateColumnSummaryValues(values: string[], maxToDisplay?: number): string[];
+export declare function getTableColumnsSummaryGroups(layout: TableLayout, api: AdaptableApi, labels?: TableColumnsSummaryLabels): TableColumnsSummaryGroup[];
+export declare function getLayoutTableColumnsViewItems(layout: Layout, api: AdaptableApi, options?: {
+    maxColumnsToDisplay?: number;
+}): {
+    name: string;
+    values: string[];
+    tagVariant: "column";
+}[];
+export declare function getLayoutPivotSortingViewItem(layout: Layout, api: AdaptableApi): {
+    name: string;
+    values: string[];
+    tagVariant: "column";
+};

package/src/Strategy/Utilities/Layout/columnsSummaryHelpers.js

@@ -0,0 +1,177 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.DEFAULT_LAYOUT_VIEW_MAX_COLUMNS = exports.TABLE_COLUMNS_WIZARD_SUBSECTION_LABELS = exports.TABLE_COLUMNS_SETTINGS_PANEL_LABELS = void 0;
+exports.getTableColumnsVisibilitySummaryValues = getTableColumnsVisibilitySummaryValues;
+exports.getTableColumnsPinningSummaryValues = getTableColumnsPinningSummaryValues;
+exports.getTableColumnsSizingSummaryValues = getTableColumnsSizingSummaryValues;
+exports.getTableColumnsSortingSummaryValues = getTableColumnsSortingSummaryValues;
+exports.truncateColumnSummaryValues = truncateColumnSummaryValues;
+exports.getTableColumnsSummaryGroups = getTableColumnsSummaryGroups;
+exports.getLayoutTableColumnsViewItems = getLayoutTableColumnsViewItems;
+exports.getLayoutPivotSortingViewItem = getLayoutPivotSortingViewItem;
+exports.TABLE_COLUMNS_SETTINGS_PANEL_LABELS = {
+    visibility: 'Columns',
+    pinning: 'Pinning',
+    sizing: 'Sizing',
+    sorting: 'Sorting',
+};
+exports.TABLE_COLUMNS_WIZARD_SUBSECTION_LABELS = {
+    visibility: 'Visibility and Order',
+    pinning: 'Pinning',
+    sizing: 'Sizing',
+    sorting: 'Sorting',
+};
+function resolveDefaultColumnWidth(api) {
+    return (columnId) => api.internalApi.getAdaptableInstance().getDefaultColumnWidthForCol(columnId);
+}
+function hasExplicitLayoutSizing(columnId, sizing, resolveDefaultWidth) {
+    if (!sizing) {
+        return false;
+    }
+    if (sizing.Flex != null) {
+        return true;
+    }
+    if (sizing.MinWidth != null || sizing.MaxWidth != null) {
+        return true;
+    }
+    if (sizing.Width != null) {
+        return sizing.Width !== resolveDefaultWidth(columnId);
+    }
+    return false;
+}
+function getLayoutExplicitSizedColumnIds(layout, resolveDefaultWidth) {
+    const sizing = layout.ColumnSizing ?? {};
+    return Object.keys(sizing).filter((columnId) => hasExplicitLayoutSizing(columnId, sizing[columnId], resolveDefaultWidth));
+}
+function formatExplicitColumnSizingBrief(columnId, sizing, resolveDefaultWidth) {
+    if (!hasExplicitLayoutSizing(columnId, sizing, resolveDefaultWidth)) {
+        return '';
+    }
+    const parts = [];
+    if (sizing?.Flex != null) {
+        parts.push(`flex ${sizing.Flex}`);
+    }
+    else if (sizing?.Width != null && sizing.Width !== resolveDefaultWidth(columnId)) {
+        parts.push(String(sizing.Width));
+    }
+    if (sizing?.MinWidth != null) {
+        parts.push(`min ${sizing.MinWidth}`);
+    }
+    if (sizing?.MaxWidth != null) {
+        parts.push(`max ${sizing.MaxWidth}`);
+    }
+    return parts.join(', ');
+}
+function getLayoutTableColumnIds(layout, api) {
+    return (layout.TableColumns ?? [])
+        .filter((columnId) => !api.columnApi.isAutoRowGroupColumn(columnId))
+        .filter((columnId) => !api.columnApi.isPivotResultColumn(columnId))
+        .filter((columnId) => !api.columnApi.isSelectionColumn(columnId));
+}
+function getLayoutPinnedColumnIds(layout, side) {
+    const pinning = layout.ColumnPinning ?? {};
+    return Object.entries(pinning)
+        .filter(([, pin]) => pin === side)
+        .map(([columnId]) => columnId);
+}
+function getTableColumnsVisibilitySummaryValues(layout, api) {
+    return getLayoutTableColumnIds(layout, api).map((columnId) => {
+        const name = api.columnApi.getFriendlyNameForColumnId(columnId, layout);
+        const customHeader = layout.ColumnHeaders?.[columnId]?.trim();
+        if (customHeader) {
+            return `${name} (header: ${customHeader})`;
+        }
+        return name;
+    });
+}
+function getTableColumnsPinningSummaryValues(layout, api) {
+    const leftPinned = getLayoutPinnedColumnIds(layout, 'left');
+    const rightPinned = getLayoutPinnedColumnIds(layout, 'right');
+    return [
+        ...leftPinned.map((columnId) => `${api.columnApi.getFriendlyNameForColumnId(columnId, layout)} (left)`),
+        ...rightPinned.map((columnId) => `${api.columnApi.getFriendlyNameForColumnId(columnId, layout)} (right)`),
+    ];
+}
+function getTableColumnsSizingSummaryValues(layout, api) {
+    const resolveDefaultWidth = resolveDefaultColumnWidth(api);
+    return getLayoutExplicitSizedColumnIds(layout, resolveDefaultWidth).map((columnId) => {
+        const name = api.columnApi.getFriendlyNameForColumnId(columnId, layout);
+        const sizingBrief = formatExplicitColumnSizingBrief(columnId, layout.ColumnSizing?.[columnId], resolveDefaultWidth);
+        return `${name} (${sizingBrief})`;
+    });
+}
+function getTableColumnsSortingSummaryValues(layout, api) {
+    return (layout.ColumnSorts ?? []).map((sort) => `[${api.columnApi.getFriendlyNameForColumnId(sort.ColumnId, layout)}: ${sort.SortOrder}]`);
+}
+/** Matches legacy Layout settings panel behaviour (`layoutViewOptions.maxColumnsToDisplay`). */
+exports.DEFAULT_LAYOUT_VIEW_MAX_COLUMNS = 10;
+/**
+ * Collapse a long column list for compact views (e.g. Layout settings panel).
+ * Keeps all items when the overflow is only 1 column; otherwise shows `+N more`.
+ */
+function truncateColumnSummaryValues(values, maxToDisplay = exports.DEFAULT_LAYOUT_VIEW_MAX_COLUMNS) {
+    if (maxToDisplay <= 0 || values.length <= maxToDisplay + 1) {
+        return values;
+    }
+    const extra = values.length - maxToDisplay;
+    return [...values.slice(0, maxToDisplay), `+${extra} more`];
+}
+function getTableColumnsSummaryGroups(layout, api, labels = exports.TABLE_COLUMNS_SETTINGS_PANEL_LABELS) {
+    return [
+        {
+            label: labels.visibility,
+            values: getTableColumnsVisibilitySummaryValues(layout, api),
+            emptyLabel: 'No columns in this Layout',
+        },
+        {
+            label: labels.pinning,
+            values: getTableColumnsPinningSummaryValues(layout, api),
+            emptyLabel: 'No columns pinned in this Layout',
+        },
+        {
+            label: labels.sizing,
+            values: getTableColumnsSizingSummaryValues(layout, api),
+            emptyLabel: 'All columns use default sizing in this Layout',
+        },
+        {
+            label: labels.sorting,
+            values: getTableColumnsSortingSummaryValues(layout, api),
+            emptyLabel: 'No column sorts in this Layout',
+        },
+    ];
+}
+function getLayoutTableColumnsViewItems(layout, api, options) {
+    const maxColumnsToDisplay = options?.maxColumnsToDisplay ?? exports.DEFAULT_LAYOUT_VIEW_MAX_COLUMNS;
+    const optionalRowLabels = new Set([
+        exports.TABLE_COLUMNS_SETTINGS_PANEL_LABELS.pinning,
+        exports.TABLE_COLUMNS_SETTINGS_PANEL_LABELS.sizing,
+        exports.TABLE_COLUMNS_SETTINGS_PANEL_LABELS.sorting,
+    ]);
+    return getTableColumnsSummaryGroups(layout, api).flatMap(({ label, values, emptyLabel }) => {
+        if (optionalRowLabels.has(label) && !values.length) {
+            return [];
+        }
+        const resolvedValues = values.length ? values : [emptyLabel];
+        const displayValues = label === exports.TABLE_COLUMNS_SETTINGS_PANEL_LABELS.visibility
+            ? truncateColumnSummaryValues(resolvedValues, maxColumnsToDisplay)
+            : resolvedValues;
+        return [
+            {
+                name: label,
+                values: displayValues,
+                tagVariant: 'column',
+            },
+        ];
+    });
+}
+function getLayoutPivotSortingViewItem(layout, api) {
+    const values = getTableColumnsSortingSummaryValues(layout, api);
+    if (!values.length) {
+        return null;
+    }
+    return {
+        name: 'Sorting',
+        values,
+        tagVariant: 'column',
+    };
+}

package/src/Strategy/Utilities/Layout/getLayoutSortViewItems.d.ts

@@ -2,4 +2,5 @@ import { AdaptableApi, Layout } from '../../../types';
 export declare const getLayoutSortViewItems: (layout: Layout, api: AdaptableApi) => {
     name: string;
     values: string[];
+    tagVariant: "column";
 };

package/src/Strategy/Utilities/Layout/getLayoutSortViewItems.js

@@ -8,6 +8,7 @@ const getLayoutSortViewItems = (layout, api) => {
     return {
         name: 'Sort',
         values: (layout.ColumnSorts ?? []).map((customSort) => `[${columnIdToFriendlyName(customSort.ColumnId)}: ${customSort.SortOrder}]`),
+        tagVariant: 'column',
     };
 };
 exports.getLayoutSortViewItems = getLayoutSortViewItems;

package/src/Strategy/Utilities/Layout/rowGroupSummaryHelpers.d.ts

@@ -0,0 +1,26 @@
+import * as React from 'react';
+import { AdaptableApi, Layout, TableLayout } from '../../../types';
+export declare const ROW_GROUP_DISPLAY_TYPE_LABELS: Record<NonNullable<TableLayout['RowGroupDisplayType']>, string>;
+export declare const ROW_GROUP_DISPLAY_TYPE_DESCRIPTIONS: Record<NonNullable<TableLayout['RowGroupDisplayType']>, string>;
+export declare const ROW_GROUP_BEHAVIOR_LABELS: Record<TableLayout['RowGroupValues']['RowGroupDefaultBehavior'], string>;
+export declare const ROW_GROUP_BEHAVIOR_DESCRIPTIONS: Record<TableLayout['RowGroupValues']['RowGroupDefaultBehavior'], string>;
+export declare function getRowGroupDisplayTypeLabel(layout: Layout): string;
+export declare function getRowGroupDisplayTypeDescription(layout: Layout): string;
+export declare function getRowGroupBehaviorLabel(layout: Layout): string;
+export declare function getRowGroupBehaviorDescription(layout: Layout): string;
+export declare function getTableRowGroupSummaryValues(layout: Layout, api: AdaptableApi): string[];
+export declare function getLayoutTableRowGroupViewItems(layout: Layout, api: AdaptableApi): {
+    name: string;
+    view: () => React.FunctionComponentElement<{
+        layout: Layout;
+        api: AdaptableApi;
+    }>;
+}[];
+export declare function getPivotRowGroupSummaryValues(layout: Layout, api: AdaptableApi): string[];
+export declare function getLayoutPivotRowGroupViewItems(layout: Layout, api: AdaptableApi): {
+    name: string;
+    view: () => React.FunctionComponentElement<{
+        layout: Layout;
+        api: AdaptableApi;
+    }>;
+}[];