@adaptabletools/adaptable 23.0.0-canary.6 → 23.0.0-canary.8

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

@@ -0,0 +1,159 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as React from 'react';
+import Input from '../../../../components/Input';
+import Radio, { RadioGroup, radioGroupStyling } from '../../../../components/Radio';
+import { useAdaptable } from '../../../AdaptableContext';
+import { CollapsibleWizardCard } from '../../../Wizard/CollapsibleWizardCard';
+import { columnFilter } from './Utilities';
+import { AdaptableFormControlTextClear } from '../../../Components/Forms/AdaptableFormControlTextClear';
+import { ColumnGroupTag } from '../../../Components/ColumnGroupTag';
+import { ColumnTag, Tag } from '../../../../components/Tag';
+import { Box, Flex } from '../../../../components/Flex';
+import { getLayoutWizardOrderedColumns } from './layoutWizardColumns';
+import { cn } from '../../../../lib/utils';
+import { COLUMN_PINNING_OPTIONS, formatColumnSizingBrief, getExplicitSizingDisplayValues, getLayoutExplicitSizedColumnIds, getLayoutPinnedColumnIds, hasExplicitLayoutSizing, } from './columnLayoutHelpers';
+const PinningColumnRow = (props) => {
+    const columnPinning = props.layout.ColumnPinning?.[props.column.columnId];
+    const currentPin = columnPinning === 'left' || columnPinning === 'right' ? columnPinning : 'None';
+    return (_jsxs(Flex, { alignItems: "center", className: cn('ab-Layout-Wizard__ColumnListRow', 'twa:bg-primary twa:text-primary-foreground twa:rounded-standard', 'twa:gap-2 twa:py-1.5 twa:px-2 twa:min-h-[2.5rem]'), "data-name": `pinning-row-${props.column.columnId}`, children: [_jsx(Box, { className: "twa:flex-1 twa:min-w-0 twa:truncate", children: _jsxs(Flex, { alignItems: "center", children: [props.column.friendlyName ?? props.column.columnId, _jsx(ColumnGroupTag, { column: props.column })] }) }), _jsx(RadioGroup, { orientation: "horizontal", variant: "text-only", className: cn(radioGroupStyling.horizontalTextOnly, 'twa:shrink-0'), value: currentPin, name: `pinning-${props.column.columnId}`, onRadioChange: (value) => {
+                    props.onPinChange(props.column.columnId, value === 'None' ? null : value);
+                }, children: COLUMN_PINNING_OPTIONS.map((option) => (_jsx(Radio, { value: option.value, "data-name": `pinning-${props.column.columnId}-${option.value}`, children: option.label }, option.value))) })] }));
+};
+const SizingColumnRow = (props) => {
+    const sizing = props.layout.ColumnSizing?.[props.column.columnId];
+    const displayValues = 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) => (_jsxs(Flex, { alignItems: "center", className: "twa:gap-1 twa:shrink-0", children: [_jsx(Box, { className: sizingLabelClass, children: label }), _jsx(Input, { "data-name": inputName, className: sizingInputClass, type: "number", placeholder: "\u2014", disabled: !resizable, onChange: (event) => {
+                    onChange(parseNumberInput(event.target.value));
+                }, value: value ?? '' })] }));
+    return (_jsxs(Flex, { alignItems: "center", className: cn('ab-Layout-Wizard__ColumnListRow', 'twa:bg-primary twa:text-primary-foreground twa:rounded-standard', 'twa:gap-2 twa:py-1.5 twa:px-2 twa:min-h-[2.5rem] twa:min-w-0'), "data-name": `sizing-row-${props.column.columnId}`, children: [_jsx(Box, { className: "twa:flex-1 twa:min-w-0 twa:truncate", children: _jsxs(Flex, { alignItems: "center", children: [props.column.friendlyName ?? props.column.columnId, _jsx(ColumnGroupTag, { column: props.column })] }) }), _jsxs(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))] })] }));
+};
+export const buildColumnPinningSummary = (layout, adaptable) => {
+    const leftPinned = getLayoutPinnedColumnIds(layout, 'left');
+    const rightPinned = getLayoutPinnedColumnIds(layout, 'right');
+    if (!leftPinned.length && !rightPinned.length) {
+        return _jsx(Tag, { children: "None pinned" });
+    }
+    return (_jsxs(Flex, { flexDirection: "column", className: "twa:gap-2", children: [leftPinned.length ? (_jsxs(Flex, { flexWrap: "wrap", className: "twa:gap-1 twa:items-center", children: [_jsx(Box, { className: "twa:text-xs twa:opacity-70", children: "Left:" }), leftPinned.map((columnId) => (_jsx(ColumnTag, { children: adaptable.api.columnApi.getFriendlyNameForColumnId(columnId, layout) }, columnId)))] })) : null, rightPinned.length ? (_jsxs(Flex, { flexWrap: "wrap", className: "twa:gap-1 twa:items-center", children: [_jsx(Box, { className: "twa:text-xs twa:opacity-70", children: "Right:" }), rightPinned.map((columnId) => (_jsx(ColumnTag, { children: adaptable.api.columnApi.getFriendlyNameForColumnId(columnId, layout) }, columnId)))] })) : null] }));
+};
+export const buildColumnSizingSummary = (layout, adaptable, resolveDefaultWidth) => {
+    const sizedColumnIds = getLayoutExplicitSizedColumnIds(layout, resolveDefaultWidth);
+    if (!sizedColumnIds.length) {
+        return _jsx(Tag, { children: "Default sizing" });
+    }
+    return (_jsx(Flex, { flexWrap: "wrap", className: "twa:gap-1", children: sizedColumnIds.map((columnId) => (_jsxs(ColumnTag, { children: [adaptable.api.columnApi.getFriendlyNameForColumnId(columnId, layout), " (", formatColumnSizingBrief(columnId, layout.ColumnSizing?.[columnId], resolveDefaultWidth), ")"] }, columnId))) }));
+};
+export const ColumnPinningWizardCard = (props) => {
+    const adaptable = useAdaptable();
+    const [pinningSearch, setPinningSearch] = React.useState('');
+    const layoutColumns = React.useMemo(() => getLayoutWizardOrderedColumns(adaptable, props.layout), [adaptable, props.layout]);
+    const filteredPinningColumns = pinningSearch
+        ? layoutColumns.filter((col) => 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 = getLayoutPinnedColumnIds(props.layout, 'left');
+    const rightPinned = getLayoutPinnedColumnIds(props.layout, 'right');
+    const pinnedColumnIds = [...leftPinned, ...rightPinned];
+    return (_jsx(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 ? (_jsxs("span", { children: [pinnedColumnIds.length, " pinned", leftPinned.length && rightPinned.length
+                    ? ` (${leftPinned.length} left, ${rightPinned.length} right)`
+                    : leftPinned.length
+                        ? ' (left)'
+                        : ' (right)'] })) : ('None pinned'), summary: 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: _jsxs(Flex, { flexDirection: "column", className: "twa:gap-2 twa:h-full twa:min-h-0 twa:p-1", children: [_jsx(AdaptableFormControlTextClear, { value: pinningSearch, OnTextChange: setPinningSearch, placeholder: "Search columns...", className: "twa:w-full" }), _jsx(Flex, { flexDirection: "column", className: "twa:gap-0.5 twa:flex-1 twa:min-h-0 twa:overflow-y-auto", children: filteredPinningColumns.map((column) => (_jsx(PinningColumnRow, { column: column, layout: props.layout, onPinChange: handlePinChange }, column.columnId))) })] }) }));
+};
+export const ColumnSizingWizardCard = (props) => {
+    const adaptable = useAdaptable();
+    const [sizingSearch, setSizingSearch] = React.useState('');
+    const resolveDefaultWidth = React.useCallback((columnId) => adaptable.getDefaultColumnWidthForCol(columnId), [adaptable]);
+    const layoutColumns = React.useMemo(() => getLayoutWizardOrderedColumns(adaptable, props.layout), [adaptable, props.layout]);
+    const filteredSizingColumns = sizingSearch
+        ? layoutColumns.filter((col) => columnFilter(col, sizingSearch))
+        : layoutColumns;
+    const updateColumnSizing = (columnId, update) => {
+        const ColumnSizing = { ...props.layout.ColumnSizing };
+        const colSizingForCol = { ...(ColumnSizing[columnId] ?? {}) };
+        const updated = update(colSizingForCol);
+        if (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 = getLayoutExplicitSizedColumnIds(props.layout, resolveDefaultWidth);
+    return (_jsx(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: 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: _jsxs(Flex, { flexDirection: "column", className: "twa:gap-1.5 twa:h-full twa:min-h-0 twa:p-1", children: [_jsx(AdaptableFormControlTextClear, { value: sizingSearch, OnTextChange: setSizingSearch, placeholder: "Search columns...", className: "twa:w-full" }), _jsx(Flex, { flexDirection: "column", className: "twa:gap-0.5 twa:flex-1 twa:min-h-0 twa:overflow-y-auto", children: filteredSizingColumns.map((column) => (_jsx(SizingColumnRow, { column: column, layout: props.layout, resolveDefaultWidth: resolveDefaultWidth, onColumnWidthChange: handleColumnWidthChange, onColumnFlexChange: handleColumnFlexChange, onColumnMinWidthChange: handleColumnMinWidthChange, onColumnMaxWidthChange: handleColumnMaxWidthChange }, column.columnId))) })] }) }));
+};

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,201 @@
+export const COLUMN_PINNING_OPTIONS = [
+    { value: 'left', label: 'Left' },
+    { value: 'None', label: 'None' },
+    { value: 'right', label: 'Right' },
+];
+export const COLUMN_SORT_OPTIONS = [
+    { value: 'Asc', label: 'Asc' },
+    { value: 'Desc', label: 'Desc' },
+    { value: 'None', label: 'None' },
+];
+export 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. */
+export 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;
+}
+export function getLayoutExplicitSizedColumnIds(layout, resolveDefaultWidth) {
+    const sizing = layout.ColumnSizing ?? {};
+    return Object.keys(sizing).filter((columnId) => hasExplicitLayoutSizing(columnId, sizing[columnId], resolveDefaultWidth));
+}
+export 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). */
+export 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,
+    };
+}
+export function formatColumnInspectorPinning(layout, columnId) {
+    const pin = layout.ColumnPinning?.[columnId];
+    if (pin === 'left') {
+        return 'Left';
+    }
+    if (pin === 'right') {
+        return 'Right';
+    }
+    return 'None';
+}
+export 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';
+}
+export function formatColumnInspectorSorting(layout, columnId) {
+    return getColumnSortSelection(layout, columnId);
+}
+export function getColumnSortSelection(layout, columnId) {
+    const sort = (layout.ColumnSorts ?? []).find((entry) => entry.ColumnId === columnId);
+    return sort?.SortOrder ?? 'None';
+}
+export function applyColumnPinChange(layout, columnId, pinning) {
+    const ColumnPinning = { ...layout.ColumnPinning };
+    if (pinning) {
+        ColumnPinning[columnId] = pinning;
+    }
+    else {
+        delete ColumnPinning[columnId];
+    }
+    return {
+        ...layout,
+        ColumnPinning,
+    };
+}
+export 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 }],
+    };
+}
+export 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,63 @@
+export function getLayoutWizardInitialExpandedCardId(layoutWizardMode, firstCardId, isSectionConfigured) {
+    if (layoutWizardMode !== 'create' || isSectionConfigured) {
+        return null;
+    }
+    return firstCardId;
+}
+export 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;
+}
+export function isRowGroupingSectionConfigured(layout) {
+    return (layout.RowGroupedColumns?.length ?? 0) > 0;
+}
+export function isPivotRowGroupingSectionConfigured(layout) {
+    return (layout.PivotGroupedColumns?.length ?? 0) > 0;
+}
+export function isTableAggregationsSectionConfigured(layout) {
+    if ((layout.TableAggregationColumns?.length ?? 0) > 0) {
+        return true;
+    }
+    if (layout.GrandTotalRow != null && layout.GrandTotalRow !== false) {
+        return true;
+    }
+    return false;
+}
+export 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;
+}
+export 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,52 @@
+import { generateAutoRowGroupColumnForColumn, generateAutoRowGroupSingleColumn, generateAutoTreeSingleColumn, generateSelectionColumn, } from '../../../../Api/Implementation/ColumnApiImpl';
+import ArrayExtensions from '../../../../Utilities/Extensions/ArrayExtensions';
+import { AG_GRID_GROUPED_COLUMN, AG_GRID_SELECTION_COLUMN } from '../../../../Utilities/Constants/GeneralConstants';
+import { WIZARD_COLUMN_LIST_HEADER_CLASS, WIZARD_COLUMN_LIST_OPTION_CLASS, WIZARD_COLUMN_LIST_SEARCH_CLASS, } from '../../../Components/wizardColumnListStyles';
+/** ValueSelector row sizing — matches Visibility and Order list rows. */
+export const LAYOUT_WIZARD_COLUMN_LIST_OPTION_CLASS = WIZARD_COLUMN_LIST_OPTION_CLASS;
+/** Compact list header — spacing between Select All, Show Selected Only, and search. */
+export const LAYOUT_WIZARD_COLUMN_LIST_HEADER_CLASS = WIZARD_COLUMN_LIST_HEADER_CLASS;
+/** Narrow search field (matches Visibility list column width, not full card width). */
+export const LAYOUT_WIZARD_COLUMN_LIST_SEARCH_CLASS = WIZARD_COLUMN_LIST_SEARCH_CLASS;
+/** Columns shown in Layout wizard column steps, in layout table order. */
+export 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(generateAutoRowGroupSingleColumn());
+        }
+        else if (layout.RowGroupDisplayType === 'multi') {
+            [...layout.RowGroupedColumns].reverse().forEach((col) => {
+                const groupCol = generateAutoRowGroupColumnForColumn(adaptable.api.columnApi.getColumnWithColumnId(col));
+                allColumns.unshift(groupCol);
+            });
+        }
+    }
+    if (adaptable.api.gridApi.isTreeDataGrid() &&
+        !allColumns.find((col) => col.columnId === AG_GRID_GROUPED_COLUMN)) {
+        allColumns.unshift(generateAutoTreeSingleColumn());
+    }
+    if (hasSelectionColumn) {
+        allColumns.unshift(generateSelectionColumn());
+    }
+    const colIdToCol = allColumns.reduce((acc, col) => {
+        if (col) {
+            acc[col.columnId] = col;
+        }
+        return acc;
+    }, {});
+    let tableColumns = layout.TableColumns ?? [];
+    if (hasSelectionColumn && !tableColumns.includes(AG_GRID_SELECTION_COLUMN)) {
+        tableColumns = [AG_GRID_SELECTION_COLUMN, ...tableColumns];
+    }
+    return ArrayExtensions.sortArrayWithOrder(allColumns.map((col) => col.columnId), tableColumns, { sortUnorderedItems: false })
+        .map((colId) => colIdToCol[colId])
+        .filter(Boolean);
+}

package/src/View/License/LicenseWatermark.js

@@ -1 +1 @@
-import{jsx as r,jsxs as t}from"react/jsx-runtime";import*as e from"react";import{Logo as o}from"../../components/Logo";import{Flex as n}from"../../components/Flex";const 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-background)"},s=r=>{const t=[["display","none"],["opacity","0"],["position","absolute"],["position","fixed"],["position","relative"],["visibility","hidden"]];for(const[e,o]of t)if(r.style[e]===o)return!1;return!0};export const LicenseWatermark=l=>{const a=e.useRef(null);return e.useEffect(()=>{const r=setInterval(()=>{a.current?.isConnected||alert("It is not allowed to remove the Adaptable watermark."),s(a.current)||alert("It is not allowed to modify the Adaptable watermark."),a?.current?.style&&(a.current.style.border=i.border,a.current.style.padding=i.padding,a.current.style.fontWeight=`${i.fontWeight}`,a.current.style.margin=i.margin,a.current.style.fontSize=i.fontSize,a.current.style.color=i.color,a.current.style.background=i.background,a.current.style.display="flex",a.current.style.position="static",a.current.style.opacity="1",a.current.style.visibility="visible")},5e3);return()=>clearTimeout(r)},[]),t(n,{style:i,ref:a,children:[r(o,{style:{marginRight:10}}),r("div",{children:l.children})]})};
+import{jsx as t,jsxs as e}from"react/jsx-runtime";import*as r from"react";import{Logo as o}from"../../components/Logo";import{Flex as n}from"../../components/Flex";const 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=t=>{const e=[["display","none"],["opacity","0"],["position","absolute"],["position","fixed"],["position","relative"],["visibility","hidden"]];for(const[r,o]of e)if(t.style[r]===o)return!1;return!0};export const LicenseWatermark=l=>{const a=r.useRef(null);return r.useEffect(()=>{const t=setInterval(()=>{a.current?.isConnected||alert("It is not allowed to remove the Adaptable watermark."),s(a.current)||alert("It is not allowed to modify the Adaptable watermark."),a?.current?.style&&(a.current.style.border=i.border,a.current.style.padding=i.padding,a.current.style.fontWeight=`${i.fontWeight}`,a.current.style.margin=i.margin,a.current.style.fontSize=i.fontSize,a.current.style.color=i.color,a.current.style.background=i.background,a.current.style.display="flex",a.current.style.position="static",a.current.style.opacity="1",a.current.style.visibility="visible")},5e3);return()=>clearTimeout(t)},[]),e(n,{style:i,ref:a,children:[t(o,{style:{marginRight:10}}),t("div",{children:l.children})]})};

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

@@ -15,8 +15,7 @@ export const isValidNamedQueryExpression = (data, api) => {
     }
     return valid;
 };
-export const renderNamedQueryExpressionSummary = (data) => {
-    const { api } = useOnePageAdaptableWizardContext();
+export const renderNamedQueryExpressionSummary = (data, api) => {
     return (_jsxs(Box, { className: "twa:text-2", children: ["Expression: ", _jsx(Tag, { children: api.internalApi.getAdaptableQueryExpressionText(data) })] }));
 };
 export const NamedQueryExpressionWizardSection = (props) => {

package/src/View/Note/NoteEditor.js

@@ -4,7 +4,7 @@ import * as React from 'react';
 import Textarea from '../../components/Textarea';
 import SimpleButton from '../../components/SimpleButton';
 import { useAdaptable } from '../AdaptableContext';
-import clsx from 'clsx';
+import { cn } from '../../lib/utils';
 export const NoteEditor = ({ note, onNoteChange, onClose, editMode, isReadonly }) => {
     const { api } = useAdaptable();
     const showPopupCloseButton = api.optionsApi.getNoteOptions()?.showPopupCloseButton ?? true;
@@ -25,7 +25,7 @@ export const NoteEditor = ({ note, onNoteChange, onClose, editMode, isReadonly }
     if (note === undefined || note === null) {
         return null;
     }
-    return (_jsxs(_Fragment, { children: [_jsx(Textarea, { readOnly: isReadonly, ref: textAreaRef, className: clsx('twa:min-w-[180px] twa:min-h-[120px] twa:w-full', {
+    return (_jsxs(_Fragment, { children: [_jsx(Textarea, { readOnly: isReadonly, ref: textAreaRef, className: cn('twa:min-w-[180px] twa:min-h-[120px] twa:w-full', {
                     'twa:pr-[30px]': showPopupCloseButton,
                     'twa:pr-0': !showPopupCloseButton,
                 }), value: liveValue, onBlur: () => onClose(), onKeyDown: (event) => {

package/src/View/QuickSearch/QuickSearchPopup.js

@@ -10,10 +10,9 @@ import { Tabs } from '../../components/Tabs';
 import StringExtensions from '../../Utilities/Extensions/StringExtensions';
 import { useQuickSearchDebounced } from './useQuickSearchDebounced';
 import { QuickSearchInput } from './QuickSearchInput';
-import HelpBlock from '../../components/HelpBlock';
 import { Card } from '../../components/Card';
 import { isQuickSearchStyleUnset, resolveQuickSearchCurrentTextMatchStyle, resolveQuickSearchTextMatchStyle, } from '../../Utilities/Helpers/QuickSearchStyleHelper';
-const QuickSearchStyleEditor = ({ api, helpText, headerText, style, updateStyle }) => (_jsxs(Flex, { flexDirection: "column", className: "twa:gap-2", children: [_jsx(HelpBlock, { className: "twa:text-2", children: helpText }), _jsx(StyleComponent, { headless: true, hidePreview: true, className: "twa:h-full twa:flex-1 twa:rounded-none", headerText: headerText, api: api, Style: style, UpdateStyle: updateStyle })] }));
+const QuickSearchStyleEditor = ({ api, helpText, headerText, style, updateStyle }) => (_jsxs(Card, { shadow: false, children: [_jsxs(Card.Title, { children: [_jsx(Box, { className: "twa:font-medium", children: headerText }), _jsx(Box, { className: "twa:text-xs twa:opacity-70 twa:font-normal twa:max-w-[520px]", children: helpText })] }), _jsx(Card.Body, { className: "twa:p-1", children: _jsx(StyleComponent, { headless: true, hidePreview: true, className: "twa:h-full twa:flex-1 twa:rounded-none", api: api, Style: style, UpdateStyle: updateStyle }) })] }));
 const QuickSearchPopupComponent = (props) => {
     const [searchText, search] = useQuickSearchDebounced(props);
     const [state, setState] = useState({
@@ -25,7 +24,7 @@ const QuickSearchPopupComponent = (props) => {
             checked;
     };
     const isServerSideRowModel = props.api.agGridApi.getGridOption('rowModelType') === 'serverSide';
-    return (_jsx(PopupPanel, { headerText: props.moduleInfo.FriendlyName, glyphicon: props.moduleInfo.Glyph, infoLink: props.moduleInfo.HelpPage, infoLinkDisabled: !props.api.internalApi.isDocumentationLinksDisplayed(), bodyClassName: "twa:gap-3 twa:flex twa:flex-col", children: _jsxs(Flex, { flexDirection: "column", className: "twa:h-full twa:gap-4", children: [_jsxs(Card, { children: [_jsx(Card.Title, { children: "Search Text" }), _jsx(Card.Body, { className: "twa:p-1 twa:w-fit", children: _jsx(QuickSearchInput, {}) })] }), _jsxs(Card, { children: [_jsx(Card.Title, { children: "Behaviour" }), _jsxs(Card.Body, { className: "twa:p-1", gap: 2, children: [_jsxs(HelpBlock, { className: "twa:text-2 twa:w-fit", children: ["Filter Grid when searching to only show rows with matching cells; ", _jsx("b", { children: "use with care" }), " as can cause performance issues"] }), _jsx(CheckBox, { "data-name": "filter-quick-search-results", value: "existing", checked: state.RunQueryAfterQuickSearch, disabled: StringExtensions.IsNotNullOrEmpty(searchText), onChange: onQuickSearchBehaviourChange, children: "Filter using Quick Search Results" })] })] }), _jsxs(Card, { children: [_jsx(Card.Title, { children: "Matching Styles" }), _jsx(Card.Body, { className: "twa:p-0", children: isServerSideRowModel ? (_jsx(Box, { className: "twa:p-2", children: _jsx(QuickSearchStyleEditor, { api: props.api, helpText: "Server-side row model: styles the whole matching cell.", headerText: "Cell Matching Style", style: props.QuickSearchCellMatchStyle, updateStyle: props.onSetCellMatchingStyle }) })) : (_jsxs(Tabs, { defaultValue: "text", className: "twa:min-h-0", children: [_jsx(Tabs.Tab, { value: "text", children: "Text Match" }), _jsx(Tabs.Tab, { value: "current", children: "Current Match" }), _jsx(Tabs.Tab, { value: "cell", children: "Cell Match" }), _jsx(Tabs.Content, { value: "text", children: _jsx(QuickSearchStyleEditor, { api: props.api, helpText: "Highlights the matching text within each cell (AG Grid Find).", headerText: "Text Matching Style", style: props.QuickSearchTextMatchStyle, updateStyle: props.onSetTextMatchingStyle }) }), _jsx(Tabs.Content, { value: "current", children: _jsx(QuickSearchStyleEditor, { api: props.api, helpText: "Applied to the active match when cycling through results.", headerText: "Current Match Style", style: props.QuickSearchCurrentTextMatchStyle, updateStyle: props.onSetCurrentTextMatchingStyle }) }), _jsx(Tabs.Content, { value: "cell", children: _jsx(QuickSearchStyleEditor, { api: props.api, helpText: "Optional background for whole matching cells. When unset, only matching text is highlighted.", headerText: "Cell Matching Style", style: props.QuickSearchCellMatchStyle, updateStyle: props.onSetCellMatchingStyle }) })] })) })] })] }) }));
+    return (_jsx(PopupPanel, { headerText: props.moduleInfo.FriendlyName, glyphicon: props.moduleInfo.Glyph, infoLink: props.moduleInfo.HelpPage, infoLinkDisabled: !props.api.internalApi.isDocumentationLinksDisplayed(), bodyClassName: "twa:gap-3 twa:flex twa:flex-col", children: _jsxs(Flex, { flexDirection: "column", className: "twa:h-full twa:gap-3", children: [_jsxs(Card, { shadow: false, children: [_jsxs(Card.Title, { children: [_jsx(Box, { className: "twa:font-medium", children: "Search Text" }), _jsx(Box, { className: "twa:text-xs twa:opacity-70 twa:font-normal twa:max-w-[520px]", children: "Enter the text to find across visible grid cells" })] }), _jsx(Card.Body, { className: "twa:p-1 twa:w-fit", children: _jsx(QuickSearchInput, {}) })] }), _jsxs(Card, { shadow: false, children: [_jsxs(Card.Title, { children: [_jsx(Box, { className: "twa:font-medium", children: "Behaviour" }), _jsx(Box, { className: "twa:text-xs twa:opacity-70 twa:font-normal twa:max-w-[520px]", children: "Filter the grid to matching rows only when searching; use with care as this can affect performance" })] }), _jsx(Card.Body, { className: "twa:p-1", gap: 2, children: _jsx(CheckBox, { "data-name": "filter-quick-search-results", value: "existing", checked: state.RunQueryAfterQuickSearch, disabled: StringExtensions.IsNotNullOrEmpty(searchText), onChange: onQuickSearchBehaviourChange, children: "Filter using Quick Search Results" }) })] }), _jsxs(Card, { shadow: false, children: [_jsxs(Card.Title, { children: [_jsx(Box, { className: "twa:font-medium", children: "Matching Styles" }), _jsx(Box, { className: "twa:text-xs twa:opacity-70 twa:font-normal twa:max-w-[520px]", children: "Configure colours and fonts for how search matches appear in the grid" })] }), _jsx(Card.Body, { className: "twa:p-1", children: isServerSideRowModel ? (_jsx(QuickSearchStyleEditor, { api: props.api, helpText: "Server-side row model: styles the whole matching cell.", headerText: "Cell Matching Style", style: props.QuickSearchCellMatchStyle, updateStyle: props.onSetCellMatchingStyle })) : (_jsxs(Tabs, { defaultValue: "text", className: "twa:min-h-0", children: [_jsx(Tabs.Tab, { value: "text", children: "Text Match" }), _jsx(Tabs.Tab, { value: "current", children: "Current Match" }), _jsx(Tabs.Tab, { value: "cell", children: "Cell Match" }), _jsx(Tabs.Content, { value: "text", children: _jsx(Box, { className: "twa:pt-2", children: _jsx(QuickSearchStyleEditor, { api: props.api, helpText: "Highlights the matching text within each cell (AG Grid Find).", headerText: "Text Matching Style", style: props.QuickSearchTextMatchStyle, updateStyle: props.onSetTextMatchingStyle }) }) }), _jsx(Tabs.Content, { value: "current", children: _jsx(Box, { className: "twa:pt-2", children: _jsx(QuickSearchStyleEditor, { api: props.api, helpText: "Applied to the active match when cycling through results.", headerText: "Current Match Style", style: props.QuickSearchCurrentTextMatchStyle, updateStyle: props.onSetCurrentTextMatchingStyle }) }) }), _jsx(Tabs.Content, { value: "cell", children: _jsx(Box, { className: "twa:pt-2", children: _jsx(QuickSearchStyleEditor, { api: props.api, helpText: "Optional background for whole matching cells. When unset, only matching text is highlighted.", headerText: "Cell Matching Style", style: props.QuickSearchCellMatchStyle, updateStyle: props.onSetCellMatchingStyle }) }) })] })) })] })] }) }));
 };
 function mapStateToProps(state, ownProps) {
     const quickSearch = state.QuickSearch;

package/src/View/Schedule/Wizard/ScheduleScheduleWizard.js

@@ -155,5 +155,5 @@ export const ScheduleBuilderWizard = (props) => {
         commit({ customCron: value, preset: 'custom' });
     };
     const timeValue = `${`${hour}`.padStart(2, '0')}:${`${minute}`.padStart(2, '0')}`;
-    return (_jsx(Box, { "data-name": "schedule-setup", children: _jsxs(Card, { shadow: false, children: [_jsxs(Card.Title, { children: [_jsx(Box, { className: "twa:font-medium", children: "Schedule" }), _jsx(Box, { className: "twa:text-xs twa:opacity-70 twa:font-normal twa:max-w-[520px]", children: "Configure when this should run" })] }), _jsx(Card.Body, { children: _jsxs(FormLayout, { children: [_jsxs(FormRow, { label: "Frequency", children: [_jsx(Radio, { "data-name": "frequency-recurring", className: "twa:mr-2", value: "recurring", checked: !isOneOff, onChange: (checked) => checked && handleFrequencyChange(false), children: "Recurring" }), _jsx(Radio, { "data-name": "frequency-one-off", checked: isOneOff, value: "oneoff", onChange: (checked) => checked && handleFrequencyChange(true), children: "One-off" })] }), isOneOff ? (_jsx(FormRow, { label: "Date", children: _jsx(AdaptableInput, { "data-name": "one-off-date", className: "twa:w-[300px]", type: "date", placeholder: "Date", onChange: handleOneOffDateChange, value: oneOffDate }) })) : (_jsxs(_Fragment, { children: [_jsx(FormRow, { label: "Pattern", children: _jsx(Box, { className: "twa:max-w-[300px]", children: _jsx(SingleSelect, { className: "twa:w-full", "data-name": "recurrence-preset", items: PRESET_OPTIONS, value: preset, placeholder: "Select pattern", onValueChange: handlePresetChange }) }) }), preset === 'selectedDays' && (_jsx(FormRow, { label: "Days", children: daysMap.map((day) => (_jsx(CheckBox, { "data-name": `day-${day.value}`, className: "twa:ml-2 twa:w-1/3", value: day.value, checked: selectedDays.includes(day.value), onChange: (checked) => handleDayChange(checked, day.value), children: day.label }, day.value))) })), preset === 'monthly' && (_jsx(FormRow, { label: "Day of month", children: _jsx(AdaptableInput, { "data-name": "day-of-month", className: "twa:w-[120px]", type: "number", min: 1, max: 31, value: dayOfMonth, onChange: handleDayOfMonthChange }) })), preset === 'custom' && (_jsx(FormRow, { label: "Cron expression", children: _jsx(AdaptableInput, { "data-name": "custom-cron", className: "twa:w-[300px]", placeholder: "minute hour day month weekday", value: customCron, onChange: handleCustomCronChange }) }))] })), _jsx(FormRow, { label: "Time", children: _jsx(AdaptableInput, { "data-name": "time", className: "twa:w-[300px]", value: timeValue, type: "time", onChange: handleTimeChange }) })] }) })] }) }));
+    return (_jsx(Box, { "data-name": "schedule-setup", children: _jsxs(Card, { shadow: false, children: [_jsxs(Card.Title, { children: [_jsx(Box, { className: "twa:font-medium", children: "Schedule" }), _jsx(Box, { className: "twa:text-xs twa:opacity-70 twa:font-normal twa:max-w-[520px]", children: "Configure when this should run" })] }), _jsx(Card.Body, { children: _jsxs(FormLayout, { children: [_jsxs(FormRow, { label: "Frequency", children: [_jsx(Radio, { "data-name": "frequency-recurring", className: "twa:mr-2", value: "recurring", checked: !isOneOff, onChange: (checked) => checked && handleFrequencyChange(false), children: "Recurring" }), _jsx(Radio, { "data-name": "frequency-one-off", checked: isOneOff, value: "oneoff", onChange: (checked) => checked && handleFrequencyChange(true), children: "One-off" })] }), isOneOff ? (_jsx(FormRow, { label: "Date", children: _jsx(AdaptableInput, { "data-name": "one-off-date", className: "twa:w-[300px]", type: "date", placeholder: "Date", onChange: handleOneOffDateChange, value: oneOffDate }) })) : (_jsxs(_Fragment, { children: [_jsx(FormRow, { label: "Pattern", children: _jsx(Box, { className: "twa:max-w-[300px]", children: _jsx(SingleSelect, { className: "twa:w-full", "data-name": "recurrence-preset", items: PRESET_OPTIONS, value: preset, placeholder: "Select pattern", onValueChange: handlePresetChange }) }) }), preset === 'selectedDays' && (_jsx(FormRow, { label: "Days", children: daysMap.map((day) => (_jsx(CheckBox, { "data-name": `day-${day.value}`, className: "twa:ml-2 twa:w-1/3", value: day.value, checked: selectedDays.includes(day.value), onChange: (checked) => handleDayChange(checked, day.value), children: day.label }, day.value))) })), preset === 'monthly' && (_jsx(FormRow, { label: "Day of month", children: _jsx(AdaptableInput, { "data-name": "day-of-month", className: "twa:w-[120px]", type: "number", min: 1, max: 31, value: dayOfMonth, onChange: handleDayOfMonthChange }) })), preset === 'custom' && (_jsx(FormRow, { label: "Cron expression", children: _jsx(AdaptableInput, { "data-name": "custom-cron", className: "twa:w-[300px]", placeholder: "minute hour day month weekday", value: customCron, onChange: handleCustomCronChange }) }))] })), (isOneOff || preset !== 'custom') && (_jsx(FormRow, { label: "Time", children: _jsx(AdaptableInput, { "data-name": "time", className: "twa:w-[300px]", value: timeValue, type: "time", onChange: handleTimeChange }) }))] }) })] }) }));
 };