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

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;

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

@@ -0,0 +1,216 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.COLUMN_SORT_OPTIONS = exports.COLUMN_PINNING_OPTIONS = void 0;
+exports.getLayoutPinnedColumnIds = getLayoutPinnedColumnIds;
+exports.hasExplicitLayoutSizing = hasExplicitLayoutSizing;
+exports.getLayoutExplicitSizedColumnIds = getLayoutExplicitSizedColumnIds;
+exports.formatColumnSizingBrief = formatColumnSizingBrief;
+exports.getExplicitSizingDisplayValues = getExplicitSizingDisplayValues;
+exports.formatColumnInspectorPinning = formatColumnInspectorPinning;
+exports.formatColumnInspectorSizing = formatColumnInspectorSizing;
+exports.formatColumnInspectorSorting = formatColumnInspectorSorting;
+exports.getColumnSortSelection = getColumnSortSelection;
+exports.applyColumnPinChange = applyColumnPinChange;
+exports.applyColumnSortChange = applyColumnSortChange;
+exports.applyColumnSizingFieldChange = applyColumnSizingFieldChange;
+exports.COLUMN_PINNING_OPTIONS = [
+    { value: 'left', label: 'Left' },
+    { value: 'None', label: 'None' },
+    { value: 'right', label: 'Right' },
+];
+exports.COLUMN_SORT_OPTIONS = [
+    { value: 'Asc', label: 'Asc' },
+    { value: 'Desc', label: 'Desc' },
+    { value: 'None', label: 'None' },
+];
+function getLayoutPinnedColumnIds(layout, side) {
+    const pinning = layout.ColumnPinning ?? {};
+    return Object.entries(pinning)
+        .filter(([, pin]) => pin === side)
+        .map(([columnId]) => columnId);
+}
+/** Whether this column has sizing stored in the Layout that differs from grid defaults. */
+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) {
+        if (resolveDefaultWidth) {
+            return sizing.Width !== resolveDefaultWidth(columnId);
+        }
+        return true;
+    }
+    return false;
+}
+function getLayoutExplicitSizedColumnIds(layout, resolveDefaultWidth) {
+    const sizing = layout.ColumnSizing ?? {};
+    return Object.keys(sizing).filter((columnId) => hasExplicitLayoutSizing(columnId, sizing[columnId], resolveDefaultWidth));
+}
+function formatColumnSizingBrief(columnId, sizing, resolveDefaultWidth) {
+    if (!hasExplicitLayoutSizing(columnId, sizing, resolveDefaultWidth)) {
+        return '';
+    }
+    const display = getExplicitSizingDisplayValues(columnId, sizing, resolveDefaultWidth);
+    const parts = [];
+    if (display.flex != null) {
+        parts.push(`flex ${display.flex}`);
+    }
+    else if (display.width != null) {
+        parts.push(String(display.width));
+    }
+    if (display.minWidth != null) {
+        parts.push(`min ${display.minWidth}`);
+    }
+    if (display.maxWidth != null) {
+        parts.push(`max ${display.maxWidth}`);
+    }
+    return parts.join(', ');
+}
+/** Width/flex values to show in the sizing editor (default grid widths are omitted). */
+function getExplicitSizingDisplayValues(columnId, sizing, resolveDefaultWidth) {
+    if (!sizing) {
+        return {
+            width: undefined,
+            flex: undefined,
+            minWidth: undefined,
+            maxWidth: undefined,
+        };
+    }
+    const width = sizing.Width != null &&
+        (!resolveDefaultWidth || sizing.Width !== resolveDefaultWidth(columnId))
+        ? sizing.Width
+        : undefined;
+    return {
+        width,
+        flex: sizing.Flex ?? undefined,
+        minWidth: sizing.MinWidth ?? undefined,
+        maxWidth: sizing.MaxWidth ?? undefined,
+    };
+}
+function formatColumnInspectorPinning(layout, columnId) {
+    const pin = layout.ColumnPinning?.[columnId];
+    if (pin === 'left') {
+        return 'Left';
+    }
+    if (pin === 'right') {
+        return 'Right';
+    }
+    return 'None';
+}
+function formatColumnInspectorSizing(columnId, sizing, resolveDefaultWidth) {
+    if (!hasExplicitLayoutSizing(columnId, sizing, resolveDefaultWidth)) {
+        return 'Default';
+    }
+    const display = getExplicitSizingDisplayValues(columnId, sizing, resolveDefaultWidth);
+    const parts = [];
+    if (display.width != null) {
+        parts.push(String(display.width));
+    }
+    if (display.flex != null) {
+        parts.push(`flex ${display.flex}`);
+    }
+    if (display.minWidth != null) {
+        parts.push(`min ${display.minWidth}`);
+    }
+    if (display.maxWidth != null) {
+        parts.push(`max ${display.maxWidth}`);
+    }
+    return parts.length ? parts.join(', ') : 'Default';
+}
+function formatColumnInspectorSorting(layout, columnId) {
+    return getColumnSortSelection(layout, columnId);
+}
+function getColumnSortSelection(layout, columnId) {
+    const sort = (layout.ColumnSorts ?? []).find((entry) => entry.ColumnId === columnId);
+    return sort?.SortOrder ?? 'None';
+}
+function applyColumnPinChange(layout, columnId, pinning) {
+    const ColumnPinning = { ...layout.ColumnPinning };
+    if (pinning) {
+        ColumnPinning[columnId] = pinning;
+    }
+    else {
+        delete ColumnPinning[columnId];
+    }
+    return {
+        ...layout,
+        ColumnPinning,
+    };
+}
+function applyColumnSortChange(layout, columnId, sortOrder) {
+    const existing = layout.ColumnSorts ?? [];
+    if (sortOrder === 'None') {
+        return {
+            ...layout,
+            ColumnSorts: existing.filter((entry) => entry.ColumnId !== columnId),
+        };
+    }
+    const current = existing.find((entry) => entry.ColumnId === columnId);
+    if (current) {
+        return {
+            ...layout,
+            ColumnSorts: existing.map((entry) => entry.ColumnId === columnId ? { ...entry, SortOrder: sortOrder } : entry),
+        };
+    }
+    return {
+        ...layout,
+        ColumnSorts: [...existing, { ColumnId: columnId, SortOrder: sortOrder }],
+    };
+}
+function applyColumnSizingFieldChange(layout, columnId, field, value, resolveDefaultWidth) {
+    const ColumnSizing = { ...layout.ColumnSizing };
+    const colSizingForCol = { ...(ColumnSizing[columnId] ?? {}) };
+    const next = { ...colSizingForCol };
+    switch (field) {
+        case 'width':
+            if (value == null || value === resolveDefaultWidth(columnId)) {
+                delete next.Width;
+            }
+            else {
+                delete next.Flex;
+                next.Width = value;
+            }
+            break;
+        case 'flex':
+            if (value == null) {
+                delete next.Flex;
+            }
+            else {
+                delete next.Width;
+                next.Flex = value;
+            }
+            break;
+        case 'minWidth':
+            if (value == null) {
+                delete next.MinWidth;
+            }
+            else {
+                next.MinWidth = value;
+            }
+            break;
+        case 'maxWidth':
+            if (value == null) {
+                delete next.MaxWidth;
+            }
+            else {
+                next.MaxWidth = value;
+            }
+            break;
+    }
+    if (hasExplicitLayoutSizing(columnId, next, resolveDefaultWidth)) {
+        ColumnSizing[columnId] = next;
+    }
+    else {
+        delete ColumnSizing[columnId];
+    }
+    return {
+        ...layout,
+        ColumnSizing,
+    };
+}

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

@@ -0,0 +1,8 @@
+import { Layout, PivotLayout, TableLayout } from '../../../../types';
+export declare function getLayoutWizardInitialExpandedCardId(layoutWizardMode: 'create' | 'edit' | undefined, firstCardId: string, isSectionConfigured: boolean): string | null;
+export declare function isColumnsSectionConfigured(layout: TableLayout): boolean;
+export declare function isRowGroupingSectionConfigured(layout: Layout): boolean;
+export declare function isPivotRowGroupingSectionConfigured(layout: PivotLayout): boolean;
+export declare function isTableAggregationsSectionConfigured(layout: TableLayout): boolean;
+export declare function isPivotAggregationsSectionConfigured(layout: PivotLayout): boolean;
+export declare function isPivotColumnsSectionConfigured(layout: PivotLayout): boolean;

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

@@ -0,0 +1,72 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getLayoutWizardInitialExpandedCardId = getLayoutWizardInitialExpandedCardId;
+exports.isColumnsSectionConfigured = isColumnsSectionConfigured;
+exports.isRowGroupingSectionConfigured = isRowGroupingSectionConfigured;
+exports.isPivotRowGroupingSectionConfigured = isPivotRowGroupingSectionConfigured;
+exports.isTableAggregationsSectionConfigured = isTableAggregationsSectionConfigured;
+exports.isPivotAggregationsSectionConfigured = isPivotAggregationsSectionConfigured;
+exports.isPivotColumnsSectionConfigured = isPivotColumnsSectionConfigured;
+function getLayoutWizardInitialExpandedCardId(layoutWizardMode, firstCardId, isSectionConfigured) {
+    if (layoutWizardMode !== 'create' || isSectionConfigured) {
+        return null;
+    }
+    return firstCardId;
+}
+function isColumnsSectionConfigured(layout) {
+    if ((layout.TableColumns?.length ?? 0) > 0) {
+        return true;
+    }
+    if (layout.ColumnPinning && Object.keys(layout.ColumnPinning).length > 0) {
+        return true;
+    }
+    if ((layout.ColumnSorts?.length ?? 0) > 0) {
+        return true;
+    }
+    if (layout.ColumnSizing && Object.keys(layout.ColumnSizing).length > 0) {
+        return true;
+    }
+    return false;
+}
+function isRowGroupingSectionConfigured(layout) {
+    return (layout.RowGroupedColumns?.length ?? 0) > 0;
+}
+function isPivotRowGroupingSectionConfigured(layout) {
+    return (layout.PivotGroupedColumns?.length ?? 0) > 0;
+}
+function isTableAggregationsSectionConfigured(layout) {
+    if ((layout.TableAggregationColumns?.length ?? 0) > 0) {
+        return true;
+    }
+    if (layout.GrandTotalRow != null && layout.GrandTotalRow !== false) {
+        return true;
+    }
+    return false;
+}
+function isPivotAggregationsSectionConfigured(layout) {
+    if ((layout.PivotAggregationColumns?.length ?? 0) > 0) {
+        return true;
+    }
+    if (layout.GrandTotalRow != null && layout.GrandTotalRow !== false) {
+        return true;
+    }
+    if (layout.PivotGrandTotal != null && layout.PivotGrandTotal !== false) {
+        return true;
+    }
+    if (layout.PivotColumnTotal != null && layout.PivotColumnTotal !== false) {
+        return true;
+    }
+    return false;
+}
+function isPivotColumnsSectionConfigured(layout) {
+    if ((layout.PivotColumns?.length ?? 0) > 0) {
+        return true;
+    }
+    if (layout.PivotResultColumnsOrder) {
+        return true;
+    }
+    if ((layout.ColumnSorts?.length ?? 0) > 0) {
+        return true;
+    }
+    return false;
+}

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

@@ -0,0 +1,11 @@
+import { AdaptableColumn } from '../../../../AdaptableState/Common/AdaptableColumn';
+import type { IAdaptable } from '../../../../AdaptableInterfaces/IAdaptable';
+import type { Layout } from '../../../../../types';
+/** ValueSelector row sizing — matches Visibility and Order list rows. */
+export declare const LAYOUT_WIZARD_COLUMN_LIST_OPTION_CLASS = "twa:!py-1 twa:!px-1.5";
+/** Compact list header — spacing between Select All, Show Selected Only, and search. */
+export declare const LAYOUT_WIZARD_COLUMN_LIST_HEADER_CLASS = "twa:gap-4";
+/** Narrow search field (matches Visibility list column width, not full card width). */
+export declare const LAYOUT_WIZARD_COLUMN_LIST_SEARCH_CLASS = "twa:w-[12rem] twa:shrink-0 twa:min-w-0";
+/** Columns shown in Layout wizard column steps, in layout table order. */
+export declare function getLayoutWizardOrderedColumns(adaptable: IAdaptable, layout: Layout): AdaptableColumn[];

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

@@ -0,0 +1,57 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.LAYOUT_WIZARD_COLUMN_LIST_SEARCH_CLASS = exports.LAYOUT_WIZARD_COLUMN_LIST_HEADER_CLASS = exports.LAYOUT_WIZARD_COLUMN_LIST_OPTION_CLASS = void 0;
+exports.getLayoutWizardOrderedColumns = getLayoutWizardOrderedColumns;
+const tslib_1 = require("tslib");
+const ColumnApiImpl_1 = require("../../../../Api/Implementation/ColumnApiImpl");
+const ArrayExtensions_1 = tslib_1.__importDefault(require("../../../../Utilities/Extensions/ArrayExtensions"));
+const GeneralConstants_1 = require("../../../../Utilities/Constants/GeneralConstants");
+const wizardColumnListStyles_1 = require("../../../Components/wizardColumnListStyles");
+/** ValueSelector row sizing — matches Visibility and Order list rows. */
+exports.LAYOUT_WIZARD_COLUMN_LIST_OPTION_CLASS = wizardColumnListStyles_1.WIZARD_COLUMN_LIST_OPTION_CLASS;
+/** Compact list header — spacing between Select All, Show Selected Only, and search. */
+exports.LAYOUT_WIZARD_COLUMN_LIST_HEADER_CLASS = wizardColumnListStyles_1.WIZARD_COLUMN_LIST_HEADER_CLASS;
+/** Narrow search field (matches Visibility list column width, not full card width). */
+exports.LAYOUT_WIZARD_COLUMN_LIST_SEARCH_CLASS = wizardColumnListStyles_1.WIZARD_COLUMN_LIST_SEARCH_CLASS;
+/** Columns shown in Layout wizard column steps, in layout table order. */
+function getLayoutWizardOrderedColumns(adaptable, layout) {
+    const hasSelectionColumn = adaptable.api.columnApi
+        .getColumns()
+        .some((col) => col.isGeneratedSelectionColumn);
+    const allColumns = adaptable.api.columnApi
+        .getUIAvailableColumns()
+        .filter((col) => !col.isGeneratedRowGroupColumn)
+        .filter((col) => !col.isGeneratedPivotResultColumn)
+        .filter((col) => !col.isGeneratedSelectionColumn);
+    if (layout.RowGroupedColumns && layout.RowGroupedColumns.length > 0) {
+        if (layout.RowGroupDisplayType === 'single') {
+            allColumns.unshift((0, ColumnApiImpl_1.generateAutoRowGroupSingleColumn)());
+        }
+        else if (layout.RowGroupDisplayType === 'multi') {
+            [...layout.RowGroupedColumns].reverse().forEach((col) => {
+                const groupCol = (0, ColumnApiImpl_1.generateAutoRowGroupColumnForColumn)(adaptable.api.columnApi.getColumnWithColumnId(col));
+                allColumns.unshift(groupCol);
+            });
+        }
+    }
+    if (adaptable.api.gridApi.isTreeDataGrid() &&
+        !allColumns.find((col) => col.columnId === GeneralConstants_1.AG_GRID_GROUPED_COLUMN)) {
+        allColumns.unshift((0, ColumnApiImpl_1.generateAutoTreeSingleColumn)());
+    }
+    if (hasSelectionColumn) {
+        allColumns.unshift((0, ColumnApiImpl_1.generateSelectionColumn)());
+    }
+    const colIdToCol = allColumns.reduce((acc, col) => {
+        if (col) {
+            acc[col.columnId] = col;
+        }
+        return acc;
+    }, {});
+    let tableColumns = layout.TableColumns ?? [];
+    if (hasSelectionColumn && !tableColumns.includes(GeneralConstants_1.AG_GRID_SELECTION_COLUMN)) {
+        tableColumns = [GeneralConstants_1.AG_GRID_SELECTION_COLUMN, ...tableColumns];
+    }
+    return ArrayExtensions_1.default.sortArrayWithOrder(allColumns.map((col) => col.columnId), tableColumns, { sortUnorderedItems: false })
+        .map((colId) => colIdToCol[colId])
+        .filter(Boolean);
+}

package/src/View/License/LicenseWatermark.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.LicenseWatermark=void 0;const e=require("tslib"),r=require("react/jsx-runtime"),t=e.__importStar(require("react")),o=require("../../components/Logo"),n=require("../../components/Flex"),i={border:"1px solid var(--ab-color-error)",padding:"5px",fontWeight:600,margin:"5px",fontSize:"14px",alignItems:"center",color:"var(--ab-color-foreground)",background:"var(--ab-color-defaultbackground)"},s=e=>{const r=[["display","none"],["opacity","0"],["position","absolute"],["position","fixed"],["position","relative"],["visibility","hidden"]];for(const[t,o]of r)if(e.style[t]===o)return!1;return!0},l=e=>{const l=t.useRef(null);return t.useEffect(()=>{const e=setInterval(()=>{l.current?.isConnected||alert("It is not allowed to remove the Adaptable watermark."),s(l.current)||alert("It is not allowed to modify the Adaptable watermark."),l?.current?.style&&(l.current.style.border=i.border,l.current.style.padding=i.padding,l.current.style.fontWeight=`${i.fontWeight}`,l.current.style.margin=i.margin,l.current.style.fontSize=i.fontSize,l.current.style.color=i.color,l.current.style.background=i.background,l.current.style.display="flex",l.current.style.position="static",l.current.style.opacity="1",l.current.style.visibility="visible")},5e3);return()=>clearTimeout(e)},[]),(0,r.jsxs)(n.Flex,{style:i,ref:l,children:[(0,r.jsx)(o.Logo,{style:{marginRight:10}}),(0,r.jsx)("div",{children:e.children})]})};exports.LicenseWatermark=l;
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.LicenseWatermark=void 0;const e=require("tslib"),r=require("react/jsx-runtime"),t=e.__importStar(require("react")),o=require("../../components/Logo"),n=require("../../components/Flex"),i={border:"1px solid red",padding:"5px",fontWeight:600,margin:"5px",fontSize:"14px",alignItems:"center",color:"var(--ab-color-foreground)",background:"var(--ab-color-background)"},s=e=>{const r=[["display","none"],["opacity","0"],["position","absolute"],["position","fixed"],["position","relative"],["visibility","hidden"]];for(const[t,o]of r)if(e.style[t]===o)return!1;return!0},l=e=>{const l=t.useRef(null);return t.useEffect(()=>{const e=setInterval(()=>{l.current?.isConnected||alert("It is not allowed to remove the Adaptable watermark."),s(l.current)||alert("It is not allowed to modify the Adaptable watermark."),l?.current?.style&&(l.current.style.border=i.border,l.current.style.padding=i.padding,l.current.style.fontWeight=`${i.fontWeight}`,l.current.style.margin=i.margin,l.current.style.fontSize=i.fontSize,l.current.style.color=i.color,l.current.style.background=i.background,l.current.style.display="flex",l.current.style.position="static",l.current.style.opacity="1",l.current.style.visibility="visible")},5e3);return()=>clearTimeout(e)},[]),(0,r.jsxs)(n.Flex,{style:i,ref:l,children:[(0,r.jsx)(o.Logo,{style:{marginRight:10}}),(0,r.jsx)("div",{children:e.children})]})};exports.LicenseWatermark=l;

package/src/View/NamedQuery/Wizard/NamedQueryExpressionWizardSection.d.ts

@@ -5,5 +5,5 @@ export interface NamedQueryExpressionWizardSectionProps {
     onChange: (data: NamedQuery) => void;
 }
 export declare const isValidNamedQueryExpression: (data: NamedQuery, api: AdaptableApi) => string | true;
-export declare const renderNamedQueryExpressionSummary: (data: NamedQuery) => React.JSX.Element;
+export declare const renderNamedQueryExpressionSummary: (data: NamedQuery, api: AdaptableApi) => React.JSX.Element;
 export declare const NamedQueryExpressionWizardSection: (props: NamedQueryExpressionWizardSectionProps) => React.JSX.Element;

package/src/View/NamedQuery/Wizard/NamedQueryExpressionWizardSection.js

@@ -10,7 +10,7 @@ const OnePageAdaptableWizard_1 = require("../../Wizard/OnePageAdaptableWizard");
 const Flex_1 = require("../../../components/Flex");
 const isValidNamedQueryExpression = (data, api) => {
     if (!data.BooleanExpression) {
-        return 'An expression is required.';
+        return 'An expression is required';
     }
     const valid = api.expressionApi.isValidBooleanExpression(data.BooleanExpression, ModuleConstants_1.NamedQueryModuleId);
     if (!valid) {
@@ -19,8 +19,7 @@ const isValidNamedQueryExpression = (data, api) => {
     return valid;
 };
 exports.isValidNamedQueryExpression = isValidNamedQueryExpression;
-const renderNamedQueryExpressionSummary = (data) => {
-    const { api } = (0, OnePageAdaptableWizard_1.useOnePageAdaptableWizardContext)();
+const renderNamedQueryExpressionSummary = (data, api) => {
     return ((0, jsx_runtime_1.jsxs)(Flex_1.Box, { className: "twa:text-2", children: ["Expression: ", (0, jsx_runtime_1.jsx)(Tag_1.Tag, { children: api.internalApi.getAdaptableQueryExpressionText(data) })] }));
 };
 exports.renderNamedQueryExpressionSummary = renderNamedQueryExpressionSummary;