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

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

@@ -1,9 +1,10 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.RowGroupingSection = exports.RowGroupBehaviorSection = exports.RowGroupingSectionSummary = void 0;
+exports.RowGroupingSection = exports.RowGroupBehaviorSection = exports.RowGroupingSectionSummary = exports.getRowGroupDisplayTypeLabel = exports.getRowGroupDisplayTypeDescription = exports.getRowGroupBehaviorLabel = exports.getRowGroupBehaviorDescription = void 0;
 const tslib_1 = require("tslib");
 const jsx_runtime_1 = require("react/jsx-runtime");
 const React = tslib_1.__importStar(require("react"));
+const layoutWizardAccordionHelpers_1 = require("./layoutWizardAccordionHelpers");
 const Utilities_1 = require("./Utilities");
 const ColumnGroupTag_1 = require("../../../Components/ColumnGroupTag");
 const Radio_1 = require("../../../../components/Radio");
@@ -14,17 +15,25 @@ const OnePageAdaptableWizard_1 = require("../../../Wizard/OnePageAdaptableWizard
 const ArrayExtensions_1 = tslib_1.__importDefault(require("../../../../Utilities/Extensions/ArrayExtensions"));
 const LayoutHelpers_1 = require("../../../../Api/Implementation/LayoutHelpers");
 const TypeRadio_1 = require("../../../Wizard/TypeRadio");
-const Flex_1 = require("../../../../components/Flex");
+const CollapsibleWizardCard_1 = require("../../../Wizard/CollapsibleWizardCard");
 const Card_1 = require("../../../../components/Card");
-const RowGroupingSectionSummary = () => {
+const Flex_1 = require("../../../../components/Flex");
+const layoutWizardColumns_1 = require("./layoutWizardColumns");
+const rowGroupSummaryHelpers_1 = require("../../../../Strategy/Utilities/Layout/rowGroupSummaryHelpers");
+const rowGroupSummaryTags_1 = require("../../../Wizard/rowGroupSummaryTags");
+var rowGroupSummaryHelpers_2 = require("../../../../Strategy/Utilities/Layout/rowGroupSummaryHelpers");
+Object.defineProperty(exports, "getRowGroupBehaviorDescription", { enumerable: true, get: function () { return rowGroupSummaryHelpers_2.getRowGroupBehaviorDescription; } });
+Object.defineProperty(exports, "getRowGroupBehaviorLabel", { enumerable: true, get: function () { return rowGroupSummaryHelpers_2.getRowGroupBehaviorLabel; } });
+Object.defineProperty(exports, "getRowGroupDisplayTypeDescription", { enumerable: true, get: function () { return rowGroupSummaryHelpers_2.getRowGroupDisplayTypeDescription; } });
+Object.defineProperty(exports, "getRowGroupDisplayTypeLabel", { enumerable: true, get: function () { return rowGroupSummaryHelpers_2.getRowGroupDisplayTypeLabel; } });
+const RowGroupingSectionSummary = (props) => {
     const adaptable = (0, AdaptableContext_1.useAdaptable)();
-    const { data: layout } = (0, OnePageAdaptableWizard_1.useOnePageAdaptableWizardContext)();
+    const { data: contextLayout } = (0, OnePageAdaptableWizard_1.useOnePageAdaptableWizardContext)();
+    const layout = props.layout ?? contextLayout;
     if (adaptable.api.gridApi.isTreeDataGrid()) {
         return ((0, jsx_runtime_1.jsx)(Flex_1.Flex, { flexDirection: "row", children: (0, jsx_runtime_1.jsx)(Tag_1.Tag, { children: "Row Grouping is not available in Tree Grids" }) }));
     }
-    return ((0, jsx_runtime_1.jsx)(Flex_1.Flex, { flexDirection: "row", children: layout.RowGroupedColumns?.length ? (layout.RowGroupedColumns.map((columnId) => {
-            return ((0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:mb-2 twa:mr-2", children: (0, jsx_runtime_1.jsx)(Tag_1.Tag, { children: adaptable.api.columnApi.getFriendlyNameForColumnId(columnId) }) }, columnId));
-        })) : ((0, jsx_runtime_1.jsx)(Tag_1.Tag, { children: "No Row Grouping" })) }));
+    return (0, jsx_runtime_1.jsx)(rowGroupSummaryTags_1.TableRowGroupSummaryTags, { layout: layout, api: adaptable.api });
 };
 exports.RowGroupingSectionSummary = RowGroupingSectionSummary;
 const RowGroupBehaviorSection = (props) => {
@@ -41,7 +50,7 @@ const RowGroupBehaviorSection = (props) => {
                 newLayout.RowGroupValues.ExceptionGroupKeys = [];
             }
             onChange(newLayout);
-        }, children: [(0, jsx_runtime_1.jsx)(TypeRadio_1.TypeRadio, { value: "always-collapsed", text: "All Collapsed", description: "All Grouped Rows are always collapsed" }), (0, jsx_runtime_1.jsx)(TypeRadio_1.TypeRadio, { value: "always-expanded", text: "All Expanded", description: "All Grouped Rows are always expanded" }), (0, jsx_runtime_1.jsx)(TypeRadio_1.TypeRadio, { value: "expanded", text: "Mostly Expanded", description: "All expanded, other than those collapsed when Layout last displayed" }), (0, jsx_runtime_1.jsx)(TypeRadio_1.TypeRadio, { value: "collapsed", text: "Mostly Collapsed", description: "All collapsed, other than those expanded when Layout last displayed" })] }));
+        }, children: [(0, jsx_runtime_1.jsx)(TypeRadio_1.TypeRadio, { value: "always-collapsed", text: "All Collapsed", description: "All Grouped Rows are always collapsed" }), (0, jsx_runtime_1.jsx)(TypeRadio_1.TypeRadio, { value: "always-expanded", text: "All Expanded", description: "All Grouped Rows are always expanded" }), (0, jsx_runtime_1.jsx)(TypeRadio_1.TypeRadio, { value: "expanded", text: "Mostly Expanded", description: "All Grouped Rows expanded, other than those collapsed when Layout last displayed" }), (0, jsx_runtime_1.jsx)(TypeRadio_1.TypeRadio, { value: "collapsed", text: "Mostly Collapsed", description: "All Grouped Rows collapsed, other than those expanded when Layout last displayed" })] }));
 };
 exports.RowGroupBehaviorSection = RowGroupBehaviorSection;
 const RowGroupDisplayTypeSection = ({ layout, onChange }) => {
@@ -66,15 +75,15 @@ const RowGroupDisplayTypeSection = ({ layout, onChange }) => {
 };
 const RowGroupingSection = (props) => {
     const adaptable = (0, AdaptableContext_1.useAdaptable)();
-    if (adaptable.api.gridApi.isTreeDataGrid()) {
-        return ((0, jsx_runtime_1.jsx)(Flex_1.Flex, { flexDirection: "row", children: (0, jsx_runtime_1.jsx)(Tag_1.Tag, { children: "Row Grouping is not available in Tree Grids" }) }));
-    }
     const { data: layout } = (0, OnePageAdaptableWizard_1.useOnePageAdaptableWizardContext)();
     const rowGroupsText = 'Grouped Rows ' + adaptable.api.internalApi.getCorrectEnglishVariant('Behaviour');
     const allGroupableColumns = adaptable.api.columnApi.getGroupableColumns();
     const sortedGroupableColumns = React.useMemo(() => {
         return ArrayExtensions_1.default.sortArrayWithOrder(allGroupableColumns.map((col) => col.columnId), layout.RowGroupedColumns ?? [], { sortUnorderedItems: false }).map((colId) => adaptable.api.columnApi.getColumnWithColumnId(colId));
     }, [layout, allGroupableColumns]);
+    if (adaptable.api.gridApi.isTreeDataGrid()) {
+        return ((0, jsx_runtime_1.jsx)(Flex_1.Flex, { flexDirection: "row", children: (0, jsx_runtime_1.jsx)(Tag_1.Tag, { children: "Row Grouping is not available in Tree Grids" }) }));
+    }
     const onChange = (layout) => {
         props.onChange((0, LayoutHelpers_1.normalizeLayout)(layout));
     };
@@ -90,6 +99,8 @@ const RowGroupingSection = (props) => {
         }
         onChange(newLayout);
     };
-    return ((0, jsx_runtime_1.jsxs)(Flex_1.Box, { className: "twa:h-full twa:min-h-0 twa:p-2 twa:gap-2 twa:overflow-hidden twa:grid twa:grid-cols-2", children: [(0, jsx_runtime_1.jsxs)(Card_1.Card, { shadow: false, className: "twa:h-full twa:overflow-hidden twa:flex twa:flex-col", children: [(0, jsx_runtime_1.jsxs)(Card_1.Card.Title, { children: [(0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:font-medium", children: "Row Grouped Columns" }), (0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:text-xs twa:opacity-70 twa:font-normal twa:max-w-[520px]", children: "Select and order Columns used in grouping" })] }), (0, jsx_runtime_1.jsx)(Card_1.Card.Body, { className: "twa:flex-1 twa:min-h-0 twa:overflow-hidden twa:p-1", children: (0, jsx_runtime_1.jsx)(ValueSelector_1.ValueSelector, { style: { minHeight: 0 }, showFilterInput: true, filter: Utilities_1.columnFilter, toIdentifier: (option) => `${option.columnId}`, toLabel: (option) => option.friendlyName ?? option.columnId, toListLabel: (option) => ((0, jsx_runtime_1.jsxs)(Flex_1.Flex, { alignItems: "center", children: [option.friendlyName ?? option.columnId, (0, jsx_runtime_1.jsx)(ColumnGroupTag_1.ColumnGroupTag, { column: option })] })), options: sortedGroupableColumns, value: layout.RowGroupedColumns ?? [], allowReorder: true, onChange: handleColumnsChange }) })] }), (0, jsx_runtime_1.jsxs)(Flex_1.Box, { className: "twa:h-full twa:min-h-0 twa:overflow-y-auto twa:flex twa:flex-col twa:gap-2", children: [(0, jsx_runtime_1.jsxs)(Card_1.Card, { shadow: false, children: [(0, jsx_runtime_1.jsxs)(Card_1.Card.Title, { children: [(0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:font-medium", children: "Group Display Type" }), (0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:text-xs twa:opacity-70 twa:font-normal twa:max-w-[520px]", children: "Choose how grouped rows display in the grid" })] }), (0, jsx_runtime_1.jsx)(Card_1.Card.Body, { className: "twa:p-1", children: (0, jsx_runtime_1.jsx)(RowGroupDisplayTypeSection, { layout: layout, onChange: onChange }) })] }), (0, jsx_runtime_1.jsxs)(Card_1.Card, { shadow: false, children: [(0, jsx_runtime_1.jsxs)(Card_1.Card.Title, { children: [(0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:font-medium", children: rowGroupsText }), (0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:text-xs twa:opacity-70 twa:font-normal twa:max-w-[520px]", children: "Set what happens when Layout opens" })] }), (0, jsx_runtime_1.jsx)(Card_1.Card.Body, { className: "twa:p-1", children: (0, jsx_runtime_1.jsx)(exports.RowGroupBehaviorSection, { layout: layout, onChange: onChange }) })] })] })] }));
+    const initialExpandedCardId = (0, layoutWizardAccordionHelpers_1.getLayoutWizardInitialExpandedCardId)(props.layoutWizardMode, 'columns', (0, layoutWizardAccordionHelpers_1.isRowGroupingSectionConfigured)(layout));
+    const { bindCard, hasExpandedCard, expandedFillsSpace } = (0, CollapsibleWizardCard_1.useWizardCardAccordion)(initialExpandedCardId);
+    return ((0, jsx_runtime_1.jsxs)(Flex_1.Box, { className: (0, CollapsibleWizardCard_1.getWizardAccordionSectionClassName)(hasExpandedCard, expandedFillsSpace), children: [(0, jsx_runtime_1.jsx)(CollapsibleWizardCard_1.CollapsibleWizardCard, { ...bindCard('columns', { fillAvailable: true }), surface: "panel", "data-name": "row-grouped-columns", title: "Row Grouped Columns", help: "Select and order Columns used in Row Grouping", collapsedHelp: "", compactSummary: (0, CollapsibleWizardCard_1.renderCompactColumnTags)(layout.RowGroupedColumns ?? [], (columnId) => adaptable.api.columnApi.getFriendlyNameForColumnId(columnId), { emptyLabel: 'No columns' }), summary: layout.RowGroupedColumns?.length ? ((0, jsx_runtime_1.jsx)(Flex_1.Flex, { flexWrap: "wrap", className: "twa:gap-1", children: layout.RowGroupedColumns.map((columnId) => ((0, jsx_runtime_1.jsx)(Tag_1.ColumnTag, { children: adaptable.api.columnApi.getFriendlyNameForColumnId(columnId) }, columnId))) })) : ((0, jsx_runtime_1.jsx)(Tag_1.Tag, { children: "No columns" })), bodyClassName: "twa:min-h-[200px] twa:max-h-[420px]  twa:flex twa:flex-col twa:px-1", children: (0, jsx_runtime_1.jsx)(Card_1.Card, { shadow: false, className: "twa:h-full twa:flex twa:flex-col", children: (0, jsx_runtime_1.jsx)(Card_1.Card.Body, { children: (0, jsx_runtime_1.jsx)(ValueSelector_1.ValueSelector, { compact: true, showFilterInput: true, filter: Utilities_1.columnFilter, filterPlaceholder: "Search Columns...", compactHeaderClassName: layoutWizardColumns_1.LAYOUT_WIZARD_COLUMN_LIST_HEADER_CLASS, compactFilterClassName: layoutWizardColumns_1.LAYOUT_WIZARD_COLUMN_LIST_SEARCH_CLASS, hideShowSelectedOnly: true, optionLayout: "label-beside-checkbox", toggleSelectionOnRowClick: true, optionClassName: layoutWizardColumns_1.LAYOUT_WIZARD_COLUMN_LIST_OPTION_CLASS, toIdentifier: (option) => `${option.columnId}`, toLabel: (option) => option.friendlyName ?? option.columnId, toListLabel: (option) => ((0, jsx_runtime_1.jsxs)(Flex_1.Flex, { alignItems: "center", className: "twa:min-w-0", children: [(0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:truncate", children: option.friendlyName ?? option.columnId }), (0, jsx_runtime_1.jsx)(ColumnGroupTag_1.ColumnGroupTag, { column: option })] })), options: sortedGroupableColumns, value: layout.RowGroupedColumns ?? [], allowReorder: true, onChange: handleColumnsChange }) }) }) }), (0, jsx_runtime_1.jsx)(CollapsibleWizardCard_1.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: (0, jsx_runtime_1.jsx)(Tag_1.Tag, { children: (0, rowGroupSummaryHelpers_1.getRowGroupDisplayTypeLabel)(layout) }), summary: (0, jsx_runtime_1.jsx)(CollapsibleWizardCard_1.CollapsibleWizardValueSummary, { value: (0, jsx_runtime_1.jsx)(Tag_1.Tag, { children: (0, rowGroupSummaryHelpers_1.getRowGroupDisplayTypeLabel)(layout) }) }), children: (0, jsx_runtime_1.jsx)(RowGroupDisplayTypeSection, { layout: layout, onChange: onChange }) }), (0, jsx_runtime_1.jsx)(CollapsibleWizardCard_1.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: (0, jsx_runtime_1.jsx)(Tag_1.Tag, { children: (0, rowGroupSummaryHelpers_1.getRowGroupBehaviorLabel)(layout) }), summary: (0, jsx_runtime_1.jsx)(CollapsibleWizardCard_1.CollapsibleWizardValueSummary, { value: (0, jsx_runtime_1.jsx)(Tag_1.Tag, { children: (0, rowGroupSummaryHelpers_1.getRowGroupBehaviorLabel)(layout) }) }), children: (0, jsx_runtime_1.jsx)(exports.RowGroupBehaviorSection, { layout: layout, onChange: onChange }) })] }));
 };
 exports.RowGroupingSection = RowGroupingSection;

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

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

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

@@ -8,6 +8,7 @@ const CheckBox_1 = require("../../../../components/CheckBox");
 const FormLayout_1 = tslib_1.__importStar(require("../../../../components/FormLayout"));
 const Panel_1 = tslib_1.__importDefault(require("../../../../components/Panel"));
 const SimpleButton_1 = tslib_1.__importDefault(require("../../../../components/SimpleButton"));
+const ButtonNew_1 = require("../../../Components/Buttons/ButtonNew");
 const Card_1 = require("../../../../components/Card");
 const Tag_1 = require("../../../../components/Tag");
 const RowSummary_1 = require("../../../../AdaptableState/Common/RowSummary");
@@ -84,9 +85,7 @@ const buildRowSummaryExpressionOptions = (column, availableScalarExpressions, la
         value: expression,
     }));
     const aggregation = layout.TableAggregationColumns?.find((agg) => agg.ColumnId === column.columnId)?.AggFunc;
-    if (aggregation &&
-        typeof aggregation === 'object' &&
-        aggregation.weightedColumnId) {
+    if (aggregation && typeof aggregation === 'object' && aggregation.weightedColumnId) {
         expressionOptions.push({
             label: 'WEIGHTERD_AVG',
             value: RowSummary_1.WEIGHTED_AVERAGE_AGGREGATED_FUNCTION,
@@ -112,7 +111,7 @@ const RowSummarySectionSummary = () => {
             return ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: (0, jsx_runtime_1.jsxs)(Flex_1.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 ((0, jsx_runtime_1.jsxs)(Tag_1.Tag, { className: "twa:mr-1", children: [rowSummary.ColumnsMap[colId], "(", adaptable.api.columnApi.getFriendlyNameForColumnId(colId), ")"] }, colId));
+                            return ((0, jsx_runtime_1.jsxs)(Tag_1.ColumnTag, { className: "twa:mr-1", children: [rowSummary.ColumnsMap[colId], "(", adaptable.api.columnApi.getFriendlyNameForColumnId(colId), ")"] }, colId));
                         })] }, index) }));
         })) : ((0, jsx_runtime_1.jsx)(Tag_1.Tag, { children: "No Row Summaries" })) }));
 };
@@ -164,14 +163,15 @@ const RowSummaryEditor = React.memo(({ rowSummary, onChange, availableScalarExpr
                                                 ...rowSummary,
                                                 IncludeOnlyFilteredRows,
                                             });
-                                        }, children: "Include Only Filtered Rows" }) })] }), (0, jsx_runtime_1.jsxs)(Card_1.Card, { shadow: false, className: "twa:h-[360px] twa:overflow-hidden twa:flex twa:flex-col", children: [(0, jsx_runtime_1.jsxs)(Card_1.Card.Title, { children: [(0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:font-medium", children: "Column Aggregations" }), (0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:text-xs twa:opacity-70 twa:font-normal twa:max-w-[520px]", children: "Select columns and choose an aggregation function for each" })] }), (0, jsx_runtime_1.jsx)(Card_1.Card.Body, { className: "twa:flex-1 twa:min-h-0 twa:overflow-hidden twa:p-1", children: (0, jsx_runtime_1.jsx)(ValueSelector_1.ValueSelector, { style: { minHeight: 0, maxHeight: '100%' }, showFilterInput: true, filter: Utilities_1.columnFilter, toIdentifier: (column) => column.columnId, toLabel: (option) => option.friendlyName ?? option.columnId, options: columns, toListLabel: (column) => {
+                                        }, children: "Include Only Filtered Rows" }) })] }), (0, jsx_runtime_1.jsxs)(Card_1.Card, { shadow: false, className: "twa:h-[400px] twa:overflow-hidden twa:flex twa:flex-col", children: [(0, jsx_runtime_1.jsxs)(Card_1.Card.Title, { children: [(0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:font-medium", children: "Column Aggregations" }), (0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:text-xs twa:opacity-70 twa:font-normal twa:max-w-[520px]", children: "Select columns and choose an aggregation function for each" })] }), (0, jsx_runtime_1.jsx)(Card_1.Card.Body, { className: "twa:flex-1 twa:min-h-0 twa:overflow-hidden twa:p-1", children: (0, jsx_runtime_1.jsx)(ValueSelector_1.ValueSelector, { style: { minHeight: 0, maxHeight: '100%' }, showFilterInput: true, toggleSelectionOnRowClick: false, filter: Utilities_1.columnFilter, toIdentifier: (column) => column.columnId, toLabel: (option) => option.friendlyName ?? option.columnId, options: columns, optionLayout: "label-beside-checkbox", toListLabel: (column) => {
                                             const label = column.friendlyName ?? column.columnId;
-                                            if (!(column.columnId in (rowSummary.ColumnsMap ?? {}))) {
-                                                return ((0, jsx_runtime_1.jsxs)(Flex_1.Flex, { alignItems: "center", children: [label, (0, jsx_runtime_1.jsx)(ColumnGroupTag_1.ColumnGroupTag, { column: column })] }));
+                                            const disabled = !(column.columnId in (rowSummary.ColumnsMap ?? {}));
+                                            if (disabled) {
+                                                return ((0, jsx_runtime_1.jsxs)(Flex_1.Flex, { alignItems: "center", className: "twa:gap-2", children: [label, (0, jsx_runtime_1.jsx)(ColumnGroupTag_1.ColumnGroupTag, { column: column }), (0, jsx_runtime_1.jsx)(NewSelect_1.SingleSelect, { disabled: true, items: [{ label: 'Select Aggregation', value: null }] })] }));
                                             }
                                             const expressionOptions = buildRowSummaryExpressionOptions(column, availableScalarExpressions, layout);
                                             const expression = rowSummary.ColumnsMap[column.columnId];
-                                            return ((0, jsx_runtime_1.jsxs)(Flex_1.Flex, { children: [(0, jsx_runtime_1.jsxs)(Flex_1.Flex, { className: "twa:mr-2", alignItems: 'center', children: [label, (0, jsx_runtime_1.jsx)(ColumnGroupTag_1.ColumnGroupTag, { column: column })] }), (0, jsx_runtime_1.jsx)(NewSelect_1.SingleSelect, { className: "twa:min-w-[140px]", value: expression, items: expressionOptions, onValueChange: (expression) => {
+                                            return ((0, jsx_runtime_1.jsxs)(Flex_1.Flex, { children: [(0, jsx_runtime_1.jsxs)(Flex_1.Flex, { className: "twa:mr-2", alignItems: 'center', children: [label, (0, jsx_runtime_1.jsx)(ColumnGroupTag_1.ColumnGroupTag, { column: column })] }), (0, jsx_runtime_1.jsx)(NewSelect_1.SingleSelect, { value: expression, items: expressionOptions, onValueChange: (expression) => {
                                                             onChange({
                                                                 ...rowSummary,
                                                                 ColumnsMap: {
@@ -208,7 +208,7 @@ const RowSummarySection = (props) => {
             .getModuleExpressionFunctionsMap(ModuleConstants_1.LayoutModuleId).aggregatedScalarFunctions;
         return sytemExpressions;
     }, []);
-    return ((0, jsx_runtime_1.jsx)(Flex_1.Flex, { flexDirection: "column", className: "twa:gap-3 twa:p-3 twa:h-full", children: (0, jsx_runtime_1.jsxs)(Card_1.Card, { shadow: false, children: [(0, jsx_runtime_1.jsxs)(Card_1.Card.Title, { children: [(0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:font-medium", children: "Row Summaries" }), (0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:text-xs twa:opacity-70 twa:font-normal twa:max-w-[520px]", children: "Add summary rows at the top or bottom of the grid with aggregated column values" })] }), (0, jsx_runtime_1.jsxs)(Card_1.Card.Body, { className: "twa:p-1", children: [(0, jsx_runtime_1.jsxs)(Flex_1.Flex, { className: "twa:mb-2", children: [(0, jsx_runtime_1.jsx)(Flex_1.Flex, { className: "twa:flex-1" }), (0, jsx_runtime_1.jsx)(SimpleButton_1.default, { onClick: () => {
+    return ((0, jsx_runtime_1.jsx)(Flex_1.Flex, { flexDirection: "column", className: "twa:gap-3 twa:p-3 twa:h-full", children: (0, jsx_runtime_1.jsxs)(Card_1.Card, { shadow: false, children: [(0, jsx_runtime_1.jsxs)(Card_1.Card.Title, { children: [(0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:font-medium", children: "Row Summaries" }), (0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:text-xs twa:opacity-70 twa:font-normal twa:max-w-[520px]", children: "Add summary rows at the top or bottom of the grid with aggregated column values" })] }), (0, jsx_runtime_1.jsxs)(Card_1.Card.Body, { className: "twa:p-1", children: [(0, jsx_runtime_1.jsxs)(Flex_1.Flex, { className: "twa:mb-2", children: [(0, jsx_runtime_1.jsx)(Flex_1.Flex, { className: "twa:flex-1" }), (0, jsx_runtime_1.jsx)(ButtonNew_1.ButtonNew, { onClick: () => {
                                         props.onChange({
                                             ...layout,
                                             RowSummaries: [
@@ -220,7 +220,7 @@ const RowSummarySection = (props) => {
                                                 },
                                             ],
                                         });
-                                    }, icon: "plus", children: "Add Row Summary" })] }), (layout.RowSummaries ?? []).map((rowSummary, index) => {
+                                    }, children: "Add Row Summary" })] }), (layout.RowSummaries ?? []).map((rowSummary, index) => {
                             return ((0, jsx_runtime_1.jsx)(RowSummaryEditor, { onDelete: () => {
                                     const newSummaries = [...layout.RowSummaries];
                                     newSummaries.splice(index, 1);

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

@@ -1,8 +1,18 @@
 import * as React from 'react';
 import { Layout } from '../../../../../types';
+import { useAdaptable } from '../../../AdaptableContext';
+import { type WizardCardAccordionBindCard } from '../../../Wizard/CollapsibleWizardCard';
 export declare const SortSectionSummary: React.FunctionComponent;
-interface SortSectionProps {
+export declare const buildColumnSortingSummary: (layout: Layout, adaptable: ReturnType<typeof useAdaptable>) => React.ReactNode;
+interface ColumnSortingWizardCardProps {
+    layout: Layout;
     onChange: (data: Layout) => void;
+    bindCard: WizardCardAccordionBindCard;
+    title?: string;
+    cardId?: string;
+    'data-name'?: string;
+    /** When expanded, grow to fill remaining section height. */
+    fillWhenExpanded?: boolean;
 }
-export declare const SortSection: React.FunctionComponent<SortSectionProps>;
+export declare const ColumnSortingWizardCard: React.FunctionComponent<ColumnSortingWizardCardProps>;
 export {};

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

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.SortSection = exports.SortSectionSummary = void 0;
+exports.ColumnSortingWizardCard = exports.buildColumnSortingSummary = exports.SortSectionSummary = void 0;
 const tslib_1 = require("tslib");
 const jsx_runtime_1 = require("react/jsx-runtime");
 const React = tslib_1.__importStar(require("react"));
@@ -12,44 +12,68 @@ const AdaptableContext_1 = require("../../../AdaptableContext");
 const ValueSelector_1 = require("../../../Components/ValueSelector");
 const OnePageAdaptableWizard_1 = require("../../../Wizard/OnePageAdaptableWizard");
 const Utilities_1 = require("./Utilities");
+const utils_1 = require("../../../../lib/utils");
+const layoutWizardColumns_1 = require("./layoutWizardColumns");
 const ColumnGroupTag_1 = require("../../../Components/ColumnGroupTag");
 const ArrayExtensions_1 = tslib_1.__importDefault(require("../../../../Utilities/Extensions/ArrayExtensions"));
 const Flex_1 = require("../../../../components/Flex");
+const CollapsibleWizardCard_1 = require("../../../Wizard/CollapsibleWizardCard");
 const SortSectionSummary = () => {
     const { data: layout } = (0, OnePageAdaptableWizard_1.useOnePageAdaptableWizardContext)();
     const adaptable = (0, AdaptableContext_1.useAdaptable)();
     const sortViewItems = (0, getLayoutSortViewItems_1.getLayoutSortViewItems)(layout, adaptable.api);
-    return ((0, jsx_runtime_1.jsx)(Flex_1.Box, { children: sortViewItems.values.length ? (sortViewItems.values.map((value) => ((0, jsx_runtime_1.jsx)(Tag_1.Tag, { className: "twa:mb-1 twa:mr-1", children: value }, value)))) : ((0, jsx_runtime_1.jsx)(Tag_1.Tag, { children: "No Sorts" })) }));
+    return ((0, jsx_runtime_1.jsx)(Flex_1.Box, { children: sortViewItems.values.length ? (sortViewItems.values.map((value) => ((0, jsx_runtime_1.jsx)(Tag_1.ColumnTag, { className: "twa:mb-1 twa:mr-1", children: value }, value)))) : ((0, jsx_runtime_1.jsx)(Tag_1.Tag, { children: "No Sorts" })) }));
 };
 exports.SortSectionSummary = SortSectionSummary;
-const ColumnRow = (props) => {
-    const SortOrder = (props.layout?.ColumnSorts ?? []).find((sort) => sort.ColumnId === props.column.columnId)?.SortOrder;
-    const icon = SortOrder === 'Asc' ? 'sort-asc' : 'sort-desc';
-    return ((0, jsx_runtime_1.jsxs)(Flex_1.Flex, { alignItems: "center", children: [props.column.friendlyName, (0, jsx_runtime_1.jsx)(ColumnGroupTag_1.ColumnGroupTag, { column: props.column }), SortOrder && ((0, jsx_runtime_1.jsx)(SimpleButton_1.default, { className: "twa:ml-2", onClick: () => props.onSortChange(props.column.columnId, SortOrder === 'Asc' ? 'Desc' : 'Asc'), variant: "raised", icon: icon }))] }));
+const getColumnSortOrder = (layout, columnId) => (layout.ColumnSorts ?? []).find((sort) => sort.ColumnId === columnId)?.SortOrder;
+const SortDirectionButton = (props) => {
+    const icon = props.sortOrder === 'Asc' ? 'sort-asc' : 'sort-desc';
+    const sortTooltip = props.sortOrder === 'Asc' ? 'Ascending (A to Z)' : 'Descending (Z to A)';
+    return ((0, jsx_runtime_1.jsx)(SimpleButton_1.default, { className: (0, utils_1.cn)('twa:flex twa:items-center twa:justify-center twa:m-1 twa:p-1', props.compact ? 'twa:min-h-7 twa:min-w-7 twa:p-0' : 'twa:shrink-0'), tooltip: sortTooltip, onClick: (event) => {
+            event.stopPropagation();
+            props.onSortChange(props.columnId, props.sortOrder === 'Asc' ? 'Desc' : 'Asc');
+        }, variant: props.compact ? 'outlined' : 'raised', tone: props.compact ? 'none' : undefined, iconSize: props.compact ? 16 : undefined, icon: icon }));
 };
-const SortSection = (props) => {
+const SortColumnRow = (props) => {
+    const sortOrder = getColumnSortOrder(props.layout, props.column.columnId);
+    return ((0, jsx_runtime_1.jsxs)(Flex_1.Flex, { alignItems: "center", className: "twa:gap-2", children: [(0, jsx_runtime_1.jsx)(Flex_1.Box, { className: props.compact ? 'twa:truncate' : undefined, children: props.column.friendlyName ?? props.column.columnId }), sortOrder ? ((0, jsx_runtime_1.jsx)(SortDirectionButton, { compact: props.compact, columnId: props.column.columnId, sortOrder: sortOrder, onSortChange: props.onSortChange })) : null, (0, jsx_runtime_1.jsx)(ColumnGroupTag_1.ColumnGroupTag, { column: props.column })] }));
+};
+const SORT_VALUE_SELECTOR_OPTION_CLASS = 'twa:!py-1.5 twa:!px-2 twa:min-h-[2.5rem]';
+const buildColumnSortingSummary = (layout, adaptable) => {
+    const sortViewItems = (0, getLayoutSortViewItems_1.getLayoutSortViewItems)(layout, adaptable.api);
+    if (!sortViewItems.values.length) {
+        return (0, jsx_runtime_1.jsx)(Tag_1.Tag, { children: "No sorts" });
+    }
+    return ((0, jsx_runtime_1.jsx)(Flex_1.Flex, { flexWrap: "wrap", className: "twa:gap-1", children: sortViewItems.values.map((value) => ((0, jsx_runtime_1.jsx)(Tag_1.ColumnTag, { children: value }, value))) }));
+};
+exports.buildColumnSortingSummary = buildColumnSortingSummary;
+const ColumnSortingWizardCard = (props) => {
+    const title = props.title ?? 'Sorting';
+    const cardId = props.cardId ?? 'sorting';
+    const dataName = props['data-name'] ?? 'column-sorting';
+    const fillWhenExpanded = props.fillWhenExpanded ?? true;
     const adaptable = (0, AdaptableContext_1.useAdaptable)();
-    const { data: layout } = (0, OnePageAdaptableWizard_1.useOnePageAdaptableWizardContext)();
     const allSortableColumns = adaptable.api.columnApi.getSortableColumns();
     const sortedSortColumns = React.useMemo(() => {
-        return ArrayExtensions_1.default.sortArrayWithOrder(allSortableColumns.map((col) => col.columnId), (layout.ColumnSorts ?? []).map((sort) => sort.ColumnId), { sortUnorderedItems: false }).map((colId) => adaptable.api.columnApi.getColumnWithColumnId(colId));
-    }, [layout, allSortableColumns]);
+        return ArrayExtensions_1.default.sortArrayWithOrder(allSortableColumns.map((col) => col.columnId), (props.layout.ColumnSorts ?? []).map((sort) => sort.ColumnId), { sortUnorderedItems: false }).map((colId) => adaptable.api.columnApi.getColumnWithColumnId(colId));
+    }, [props.layout, allSortableColumns, adaptable]);
     const handleColumnsSelectionChange = React.useCallback((columnIds) => {
         props.onChange({
-            ...layout,
+            ...props.layout,
             ColumnSorts: (columnIds || []).map((columnId) => {
-                const SortOrder = layout.ColumnSorts?.find((sort) => sort.ColumnId === columnId)?.SortOrder ?? 'Asc';
+                const SortOrder = props.layout.ColumnSorts?.find((sort) => sort.ColumnId === columnId)?.SortOrder ??
+                    'Asc';
                 return {
                     ColumnId: columnId,
                     SortOrder: SortOrder,
                 };
             }),
         });
-    }, [layout]);
+    }, [props.layout, props.onChange]);
     const handleSortChange = React.useCallback((columnId, SortOrder) => {
         props.onChange({
-            ...layout,
-            ColumnSorts: layout.ColumnSorts?.map((sort) => {
+            ...props.layout,
+            ColumnSorts: props.layout.ColumnSorts?.map((sort) => {
                 if (sort.ColumnId === columnId) {
                     return {
                         ...sort,
@@ -59,7 +83,8 @@ const SortSection = (props) => {
                 return sort;
             }),
         });
-    }, [layout]);
-    return ((0, jsx_runtime_1.jsx)(Flex_1.Flex, { flexDirection: "column", className: "twa:gap-3 twa:p-3 twa:h-full", children: (0, jsx_runtime_1.jsxs)(Card_1.Card, { shadow: false, className: "twa:flex-1 twa:min-h-0", children: [(0, jsx_runtime_1.jsxs)(Card_1.Card.Title, { children: [(0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:font-medium", children: "Column Sorts" }), (0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:text-xs twa:opacity-70 twa:font-normal twa:max-w-[520px]", children: "Select columns to sort and set their sort order. Drag to change sort priority." })] }), (0, jsx_runtime_1.jsx)(Card_1.Card.Body, { className: "twa:p-1 twa:min-h-[200px]", children: (0, jsx_runtime_1.jsx)(ValueSelector_1.ValueSelector, { showFilterInput: true, filter: Utilities_1.columnFilter, toIdentifier: (option) => `${option.columnId}`, toLabel: (option) => option.friendlyName ?? option.columnId, toListLabel: (column) => ((0, jsx_runtime_1.jsx)(ColumnRow, { onSortChange: handleSortChange, layout: layout, column: column })), options: sortedSortColumns, value: (layout.ColumnSorts ?? []).map((sort) => sort.ColumnId), allowReorder: () => true, onChange: handleColumnsSelectionChange }) })] }) }));
+    }, [props.layout, props.onChange]);
+    const sortViewItems = (0, getLayoutSortViewItems_1.getLayoutSortViewItems)(props.layout, adaptable.api);
+    return ((0, jsx_runtime_1.jsx)(CollapsibleWizardCard_1.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 ? ((0, jsx_runtime_1.jsxs)(Flex_1.Flex, { alignItems: "center", className: "twa:gap-1 twa:min-w-0 twa:overflow-hidden", children: [sortViewItems.values.slice(0, 2).map((value) => ((0, jsx_runtime_1.jsx)(Tag_1.ColumnTag, { className: "twa:shrink-0", children: value }, value))), sortViewItems.values.length > 2 ? ((0, jsx_runtime_1.jsxs)("span", { className: "twa:text-xs twa:opacity-70 twa:shrink-0", children: ["+", sortViewItems.values.length - 2] })) : null] })) : ('No sorts'), summary: (0, exports.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: (0, jsx_runtime_1.jsx)(Card_1.Card, { shadow: false, className: "twa:h-full twa:overflow-hidden twa:flex twa:flex-col", children: (0, jsx_runtime_1.jsx)(Card_1.Card.Body, { className: "twa:flex-1 twa:min-h-0 twa:overflow-hidden twa:px-1 twa:pt-0 twa:pb-0", children: (0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:flex twa:flex-col twa:gap-1.5 twa:h-full twa:overflow-hidden twa:flex-1 twa:min-h-0", "data-name": "sorting-columns-container", children: (0, jsx_runtime_1.jsx)(ValueSelector_1.ValueSelector, { compact: true, showFilterInput: true, filter: Utilities_1.columnFilter, filterPlaceholder: "Search Columns...", compactHeaderClassName: layoutWizardColumns_1.LAYOUT_WIZARD_COLUMN_LIST_HEADER_CLASS, compactFilterClassName: layoutWizardColumns_1.LAYOUT_WIZARD_COLUMN_LIST_SEARCH_CLASS, toggleSelectionOnRowClick: true, optionClassName: SORT_VALUE_SELECTOR_OPTION_CLASS, toIdentifier: (option) => `${option.columnId}`, toLabel: (option) => option.friendlyName ?? option.columnId, optionLayout: "label-beside-checkbox", toListLabel: (column) => ((0, jsx_runtime_1.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 }) }) }) }) }));
 };
-exports.SortSection = SortSection;
+exports.ColumnSortingWizardCard = ColumnSortingWizardCard;

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

@@ -0,0 +1,20 @@
+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';
+export declare const buildColumnPinningSummary: (layout: Layout, adaptable: IAdaptable) => React.ReactNode;
+export declare const buildColumnSizingSummary: (layout: Layout, adaptable: IAdaptable, resolveDefaultWidth: ColumnDefaultWidthResolver) => React.ReactNode;
+interface ColumnPinningWizardCardProps {
+    layout: TableLayout;
+    onChange: (data: Layout) => void;
+    bindCard: WizardCardAccordionBindCard;
+}
+export declare const ColumnPinningWizardCard: React.FunctionComponent<ColumnPinningWizardCardProps>;
+interface ColumnSizingWizardCardProps {
+    layout: TableLayout;
+    onChange: (data: Layout) => void;
+    bindCard: WizardCardAccordionBindCard;
+}
+export declare const ColumnSizingWizardCard: React.FunctionComponent<ColumnSizingWizardCardProps>;
+export {};

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

@@ -0,0 +1,167 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ColumnSizingWizardCard = exports.ColumnPinningWizardCard = exports.buildColumnSizingSummary = exports.buildColumnPinningSummary = void 0;
+const tslib_1 = require("tslib");
+const jsx_runtime_1 = require("react/jsx-runtime");
+const React = tslib_1.__importStar(require("react"));
+const Input_1 = tslib_1.__importDefault(require("../../../../components/Input"));
+const Radio_1 = tslib_1.__importStar(require("../../../../components/Radio"));
+const AdaptableContext_1 = require("../../../AdaptableContext");
+const CollapsibleWizardCard_1 = require("../../../Wizard/CollapsibleWizardCard");
+const Utilities_1 = require("./Utilities");
+const AdaptableFormControlTextClear_1 = require("../../../Components/Forms/AdaptableFormControlTextClear");
+const ColumnGroupTag_1 = require("../../../Components/ColumnGroupTag");
+const Tag_1 = require("../../../../components/Tag");
+const Flex_1 = require("../../../../components/Flex");
+const layoutWizardColumns_1 = require("./layoutWizardColumns");
+const utils_1 = require("../../../../lib/utils");
+const columnLayoutHelpers_1 = require("./columnLayoutHelpers");
+const PinningColumnRow = (props) => {
+    const columnPinning = props.layout.ColumnPinning?.[props.column.columnId];
+    const currentPin = columnPinning === 'left' || columnPinning === 'right' ? columnPinning : 'None';
+    return ((0, jsx_runtime_1.jsxs)(Flex_1.Flex, { alignItems: "center", className: (0, utils_1.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: [(0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:flex-1 twa:min-w-0 twa:truncate", children: (0, jsx_runtime_1.jsxs)(Flex_1.Flex, { alignItems: "center", children: [props.column.friendlyName ?? props.column.columnId, (0, jsx_runtime_1.jsx)(ColumnGroupTag_1.ColumnGroupTag, { column: props.column })] }) }), (0, jsx_runtime_1.jsx)(Radio_1.RadioGroup, { orientation: "horizontal", variant: "text-only", className: (0, utils_1.cn)(Radio_1.radioGroupStyling.horizontalTextOnly, 'twa:shrink-0'), value: currentPin, name: `pinning-${props.column.columnId}`, onRadioChange: (value) => {
+                    props.onPinChange(props.column.columnId, value === 'None' ? null : value);
+                }, children: columnLayoutHelpers_1.COLUMN_PINNING_OPTIONS.map((option) => ((0, jsx_runtime_1.jsx)(Radio_1.default, { value: option.value, "data-name": `pinning-${props.column.columnId}-${option.value}`, children: option.label }, option.value))) })] }));
+};
+const SizingColumnRow = (props) => {
+    const sizing = props.layout.ColumnSizing?.[props.column.columnId];
+    const displayValues = (0, columnLayoutHelpers_1.getExplicitSizingDisplayValues)(props.column.columnId, sizing, props.resolveDefaultWidth);
+    const resizable = props.column.resizable !== false;
+    const parseNumberInput = (value) => {
+        const parsed = parseFloat(value);
+        return typeof parsed === 'number' && !isNaN(parsed) ? parsed : undefined;
+    };
+    const sizingLabelClass = 'twa:text-xs twa:opacity-70 twa:shrink-0';
+    const sizingInputClass = 'ab-Layout-Wizard__ColumnLayoutSizingInput ab-Layout-Wizard__ColumnPropertiesEditor__Input twa:!min-h-0 twa:text-2';
+    const sizingField = (label, inputName, value, onChange) => ((0, jsx_runtime_1.jsxs)(Flex_1.Flex, { alignItems: "center", className: "twa:gap-1 twa:shrink-0", children: [(0, jsx_runtime_1.jsx)(Flex_1.Box, { className: sizingLabelClass, children: label }), (0, jsx_runtime_1.jsx)(Input_1.default, { "data-name": inputName, className: sizingInputClass, type: "number", placeholder: "\u2014", disabled: !resizable, onChange: (event) => {
+                    onChange(parseNumberInput(event.target.value));
+                }, value: value ?? '' })] }));
+    return ((0, jsx_runtime_1.jsxs)(Flex_1.Flex, { alignItems: "center", className: (0, utils_1.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] twa:min-w-0'), "data-name": `sizing-row-${props.column.columnId}`, children: [(0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:flex-1 twa:min-w-0 twa:truncate", children: (0, jsx_runtime_1.jsxs)(Flex_1.Flex, { alignItems: "center", children: [props.column.friendlyName ?? props.column.columnId, (0, jsx_runtime_1.jsx)(ColumnGroupTag_1.ColumnGroupTag, { column: props.column })] }) }), (0, jsx_runtime_1.jsxs)(Flex_1.Flex, { alignItems: "center", className: "twa:gap-4 twa:flex-shrink-0", children: [sizingField('Width', `sizing-width-${props.column.columnId}`, displayValues.width, (value) => props.onColumnWidthChange(props.column.columnId, value)), sizingField('Flex', `sizing-flex-${props.column.columnId}`, displayValues.flex, (value) => props.onColumnFlexChange(props.column.columnId, value)), sizingField('Min', `sizing-min-${props.column.columnId}`, displayValues.minWidth, (value) => props.onColumnMinWidthChange(props.column.columnId, value)), sizingField('Max', `sizing-max-${props.column.columnId}`, displayValues.maxWidth, (value) => props.onColumnMaxWidthChange(props.column.columnId, value))] })] }));
+};
+const buildColumnPinningSummary = (layout, adaptable) => {
+    const leftPinned = (0, columnLayoutHelpers_1.getLayoutPinnedColumnIds)(layout, 'left');
+    const rightPinned = (0, columnLayoutHelpers_1.getLayoutPinnedColumnIds)(layout, 'right');
+    if (!leftPinned.length && !rightPinned.length) {
+        return (0, jsx_runtime_1.jsx)(Tag_1.Tag, { children: "None pinned" });
+    }
+    return ((0, jsx_runtime_1.jsxs)(Flex_1.Flex, { flexDirection: "column", className: "twa:gap-2", children: [leftPinned.length ? ((0, jsx_runtime_1.jsxs)(Flex_1.Flex, { flexWrap: "wrap", className: "twa:gap-1 twa:items-center", children: [(0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:text-xs twa:opacity-70", children: "Left:" }), leftPinned.map((columnId) => ((0, jsx_runtime_1.jsx)(Tag_1.ColumnTag, { children: adaptable.api.columnApi.getFriendlyNameForColumnId(columnId, layout) }, columnId)))] })) : null, rightPinned.length ? ((0, jsx_runtime_1.jsxs)(Flex_1.Flex, { flexWrap: "wrap", className: "twa:gap-1 twa:items-center", children: [(0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:text-xs twa:opacity-70", children: "Right:" }), rightPinned.map((columnId) => ((0, jsx_runtime_1.jsx)(Tag_1.ColumnTag, { children: adaptable.api.columnApi.getFriendlyNameForColumnId(columnId, layout) }, columnId)))] })) : null] }));
+};
+exports.buildColumnPinningSummary = buildColumnPinningSummary;
+const buildColumnSizingSummary = (layout, adaptable, resolveDefaultWidth) => {
+    const sizedColumnIds = (0, columnLayoutHelpers_1.getLayoutExplicitSizedColumnIds)(layout, resolveDefaultWidth);
+    if (!sizedColumnIds.length) {
+        return (0, jsx_runtime_1.jsx)(Tag_1.Tag, { children: "Default sizing" });
+    }
+    return ((0, jsx_runtime_1.jsx)(Flex_1.Flex, { flexWrap: "wrap", className: "twa:gap-1", children: sizedColumnIds.map((columnId) => ((0, jsx_runtime_1.jsxs)(Tag_1.ColumnTag, { children: [adaptable.api.columnApi.getFriendlyNameForColumnId(columnId, layout), " (", (0, columnLayoutHelpers_1.formatColumnSizingBrief)(columnId, layout.ColumnSizing?.[columnId], resolveDefaultWidth), ")"] }, columnId))) }));
+};
+exports.buildColumnSizingSummary = buildColumnSizingSummary;
+const ColumnPinningWizardCard = (props) => {
+    const adaptable = (0, AdaptableContext_1.useAdaptable)();
+    const [pinningSearch, setPinningSearch] = React.useState('');
+    const layoutColumns = React.useMemo(() => (0, layoutWizardColumns_1.getLayoutWizardOrderedColumns)(adaptable, props.layout), [adaptable, props.layout]);
+    const filteredPinningColumns = pinningSearch
+        ? layoutColumns.filter((col) => (0, Utilities_1.columnFilter)(col, pinningSearch))
+        : layoutColumns;
+    const handlePinChange = (columnId, pinning) => {
+        const ColumnPinning = { ...props.layout.ColumnPinning };
+        if (pinning) {
+            ColumnPinning[columnId] = pinning;
+        }
+        else {
+            delete ColumnPinning[columnId];
+        }
+        props.onChange({
+            ...props.layout,
+            ColumnPinning,
+        });
+    };
+    const leftPinned = (0, columnLayoutHelpers_1.getLayoutPinnedColumnIds)(props.layout, 'left');
+    const rightPinned = (0, columnLayoutHelpers_1.getLayoutPinnedColumnIds)(props.layout, 'right');
+    const pinnedColumnIds = [...leftPinned, ...rightPinned];
+    return ((0, jsx_runtime_1.jsx)(CollapsibleWizardCard_1.CollapsibleWizardCard, { ...props.bindCard('pinning', { fillAvailable: true }), surface: "panel", "data-name": "column-pinning", title: "Pinning", help: "Pin columns to the left or right of the grid", collapsedHelp: "", compactSummary: pinnedColumnIds.length ? ((0, jsx_runtime_1.jsxs)("span", { children: [pinnedColumnIds.length, " pinned", leftPinned.length && rightPinned.length
+                    ? ` (${leftPinned.length} left, ${rightPinned.length} right)`
+                    : leftPinned.length
+                        ? ' (left)'
+                        : ' (right)'] })) : ('None pinned'), summary: (0, exports.buildColumnPinningSummary)(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", children: (0, jsx_runtime_1.jsxs)(Flex_1.Flex, { flexDirection: "column", className: "twa:gap-2 twa:h-full twa:min-h-0 twa:p-1", children: [(0, jsx_runtime_1.jsx)(AdaptableFormControlTextClear_1.AdaptableFormControlTextClear, { value: pinningSearch, OnTextChange: setPinningSearch, placeholder: "Search columns...", className: "twa:w-full" }), (0, jsx_runtime_1.jsx)(Flex_1.Flex, { flexDirection: "column", className: "twa:gap-0.5 twa:flex-1 twa:min-h-0 twa:overflow-y-auto", children: filteredPinningColumns.map((column) => ((0, jsx_runtime_1.jsx)(PinningColumnRow, { column: column, layout: props.layout, onPinChange: handlePinChange }, column.columnId))) })] }) }));
+};
+exports.ColumnPinningWizardCard = ColumnPinningWizardCard;
+const ColumnSizingWizardCard = (props) => {
+    const adaptable = (0, AdaptableContext_1.useAdaptable)();
+    const [sizingSearch, setSizingSearch] = React.useState('');
+    const resolveDefaultWidth = React.useCallback((columnId) => adaptable.getDefaultColumnWidthForCol(columnId), [adaptable]);
+    const layoutColumns = React.useMemo(() => (0, layoutWizardColumns_1.getLayoutWizardOrderedColumns)(adaptable, props.layout), [adaptable, props.layout]);
+    const filteredSizingColumns = sizingSearch
+        ? layoutColumns.filter((col) => (0, Utilities_1.columnFilter)(col, sizingSearch))
+        : layoutColumns;
+    const updateColumnSizing = (columnId, update) => {
+        const ColumnSizing = { ...props.layout.ColumnSizing };
+        const colSizingForCol = { ...(ColumnSizing[columnId] ?? {}) };
+        const updated = update(colSizingForCol);
+        if ((0, columnLayoutHelpers_1.hasExplicitLayoutSizing)(columnId, updated, resolveDefaultWidth)) {
+            ColumnSizing[columnId] = updated;
+        }
+        else {
+            delete ColumnSizing[columnId];
+        }
+        props.onChange({
+            ...props.layout,
+            ColumnSizing,
+        });
+    };
+    const handleColumnWidthChange = (columnId, width) => {
+        updateColumnSizing(columnId, (colSizing) => {
+            const next = { ...colSizing };
+            if (width == null ||
+                width === resolveDefaultWidth(columnId)) {
+                delete next.Width;
+            }
+            else {
+                delete next.Flex;
+                next.Width = width;
+            }
+            return next;
+        });
+    };
+    const handleColumnFlexChange = (columnId, flex) => {
+        updateColumnSizing(columnId, (colSizing) => {
+            const next = { ...colSizing };
+            if (flex == null) {
+                delete next.Flex;
+            }
+            else {
+                delete next.Width;
+                next.Flex = flex;
+            }
+            return next;
+        });
+    };
+    const handleColumnMinWidthChange = (columnId, minWidth) => {
+        updateColumnSizing(columnId, (colSizing) => {
+            const next = { ...colSizing };
+            if (minWidth == null) {
+                delete next.MinWidth;
+            }
+            else {
+                next.MinWidth = minWidth;
+            }
+            return next;
+        });
+    };
+    const handleColumnMaxWidthChange = (columnId, maxWidth) => {
+        updateColumnSizing(columnId, (colSizing) => {
+            const next = { ...colSizing };
+            if (maxWidth == null) {
+                delete next.MaxWidth;
+            }
+            else {
+                next.MaxWidth = maxWidth;
+            }
+            return next;
+        });
+    };
+    const sizedColumnIds = (0, columnLayoutHelpers_1.getLayoutExplicitSizedColumnIds)(props.layout, resolveDefaultWidth);
+    return ((0, jsx_runtime_1.jsx)(CollapsibleWizardCard_1.CollapsibleWizardCard, { ...props.bindCard('sizing', { fillAvailable: true }), surface: "panel", "data-name": "column-sizing", title: "Sizing", help: "Set width, flex, and min/max overrides. Default column widths are not stored in the Layout.", collapsedHelp: "", compactSummary: sizedColumnIds.length
+            ? `${sizedColumnIds.length} custom ${sizedColumnIds.length === 1 ? 'size' : 'sizes'}`
+            : 'Default sizing', summary: (0, exports.buildColumnSizingSummary)(props.layout, adaptable, resolveDefaultWidth), className: "twa:overflow-hidden twa:flex twa:flex-col", bodyClassName: "twa:min-h-[200px] twa:max-h-[420px] twa:overflow-hidden twa:flex twa:flex-col", children: (0, jsx_runtime_1.jsxs)(Flex_1.Flex, { flexDirection: "column", className: "twa:gap-1.5 twa:h-full twa:min-h-0 twa:p-1", children: [(0, jsx_runtime_1.jsx)(AdaptableFormControlTextClear_1.AdaptableFormControlTextClear, { value: sizingSearch, OnTextChange: setSizingSearch, placeholder: "Search columns...", className: "twa:w-full" }), (0, jsx_runtime_1.jsx)(Flex_1.Flex, { flexDirection: "column", className: "twa:gap-0.5 twa:flex-1 twa:min-h-0 twa:overflow-y-auto", children: filteredSizingColumns.map((column) => ((0, jsx_runtime_1.jsx)(SizingColumnRow, { column: column, layout: props.layout, resolveDefaultWidth: resolveDefaultWidth, onColumnWidthChange: handleColumnWidthChange, onColumnFlexChange: handleColumnFlexChange, onColumnMinWidthChange: handleColumnMinWidthChange, onColumnMaxWidthChange: handleColumnMaxWidthChange }, column.columnId))) })] }) }));
+};
+exports.ColumnSizingWizardCard = ColumnSizingWizardCard;

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

@@ -0,0 +1,30 @@
+import type { ColumnSizingDefinition } from '../../../../AdaptableState/LayoutState';
+import type { ColumnSort, Layout } from '../../../../../types';
+export declare const COLUMN_PINNING_OPTIONS: {
+    value: 'left' | 'right' | 'None';
+    label: string;
+}[];
+export declare const COLUMN_SORT_OPTIONS: {
+    value: ColumnSort['SortOrder'] | 'None';
+    label: string;
+}[];
+export type ColumnDefaultWidthResolver = (columnId: string) => number;
+export declare function getLayoutPinnedColumnIds(layout: Layout, side: 'left' | 'right'): string[];
+/** Whether this column has sizing stored in the Layout that differs from grid defaults. */
+export declare function hasExplicitLayoutSizing(columnId: string, sizing: ColumnSizingDefinition | undefined, resolveDefaultWidth?: ColumnDefaultWidthResolver): boolean;
+export declare function getLayoutExplicitSizedColumnIds(layout: Layout, resolveDefaultWidth?: ColumnDefaultWidthResolver): string[];
+export declare function formatColumnSizingBrief(columnId: string, sizing: ColumnSizingDefinition | undefined, resolveDefaultWidth?: ColumnDefaultWidthResolver): string;
+/** Width/flex values to show in the sizing editor (default grid widths are omitted). */
+export declare function getExplicitSizingDisplayValues(columnId: string, sizing: ColumnSizingDefinition | undefined, resolveDefaultWidth?: ColumnDefaultWidthResolver): {
+    width: number | undefined;
+    flex: number | undefined;
+    minWidth: number | undefined;
+    maxWidth: number | undefined;
+};
+export declare function formatColumnInspectorPinning(layout: Layout, columnId: string): string;
+export declare function formatColumnInspectorSizing(columnId: string, sizing: ColumnSizingDefinition | undefined, resolveDefaultWidth?: ColumnDefaultWidthResolver): string;
+export declare function formatColumnInspectorSorting(layout: Layout, columnId: string): string;
+export declare function getColumnSortSelection(layout: Layout, columnId: string): ColumnSort['SortOrder'] | 'None';
+export declare function applyColumnPinChange(layout: Layout, columnId: string, pinning: 'left' | 'right' | null): Layout;
+export declare function applyColumnSortChange(layout: Layout, columnId: string, sortOrder: ColumnSort['SortOrder'] | 'None'): Layout;
+export declare function applyColumnSizingFieldChange(layout: Layout, columnId: string, field: 'width' | 'flex' | 'minWidth' | 'maxWidth', value: number | undefined, resolveDefaultWidth: ColumnDefaultWidthResolver): Layout;