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

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-defaultbackground)"},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

@@ -7,7 +7,7 @@ import { useOnePageAdaptableWizardContext } from '../../Wizard/OnePageAdaptableW
 import { Box } from '../../../components/Flex';
 export const isValidNamedQueryExpression = (data, api) => {
     if (!data.BooleanExpression) {
-        return 'An expression is required.';
+        return 'An expression is required';
     }
     const valid = api.expressionApi.isValidBooleanExpression(data.BooleanExpression, NamedQueryModuleId);
     if (!valid) {
@@ -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/NamedQuery/Wizard/NamedQuerySettingsWizardSection.js

@@ -1,11 +1,9 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import WizardPanel from '../../../components/WizardPanel';
-import FormLayout, { FormRow } from '../../../components/FormLayout';
-import ErrorBox from '../../../components/ErrorBox';
-import { useOnePageAdaptableWizardContext } from '../../Wizard/OnePageAdaptableWizard';
-import AdaptableInput from '../../Components/AdaptableInput';
+import { useOnePageAdaptableWizardContext, SummaryText } from '../../Wizard/OnePageAdaptableWizard';
 import { Tag } from '../../../components/Tag';
-import { Box } from '../../../components/Flex';
+import { Box, Flex } from '../../../components/Flex';
+import { Card } from '../../../components/Card';
+import Input from '../../../components/Input';
 export const isValidNamedQuerySettings = (data, api) => {
     const validationResult = api.namedQueryApi.isValidNamedQuery(data);
     const ErrorMessage = !validationResult.valid ? validationResult.message : null;
@@ -15,18 +13,15 @@ export const isValidNamedQuerySettings = (data, api) => {
     return ErrorMessage;
 };
 export const renderNamedQuerySettingsSummary = (data) => {
-    return (_jsxs(Box, { className: "twa:text-2", children: ["Name: ", _jsx(Tag, { children: data.Name })] }));
+    return (_jsxs(SummaryText, { children: ["Name ", _jsx(Tag, { children: data.Name || 'Not specified' })] }));
 };
 export const NamedQuerySettingsWizardSection = (props) => {
-    const { data, api } = useOnePageAdaptableWizardContext();
-    const valid = isValidNamedQuerySettings(data, api);
-    const errorMessage = valid === true ? null : valid;
-    const handleColumnNameChange = (event) => {
-        let e = event.target;
+    const { data } = useOnePageAdaptableWizardContext();
+    const handleNameChange = (event) => {
         props.onChange({
             ...data,
-            Name: e.value,
+            Name: event.target.value,
         });
     };
-    return (_jsx(WizardPanel, { "data-name": 'named-query-settings', children: _jsxs(FormLayout, { children: [_jsx(FormRow, { label: "Name", children: _jsx(AdaptableInput, { "data-name": "query-name", value: data.Name, autoFocus: true, className: "twa:w-[300px]", type: "text", placeholder: "Enter Named Query Name", onChange: (e) => handleColumnNameChange(e) }) }), ' ', errorMessage ? (_jsx(FormRow, { label: "", children: _jsx(ErrorBox, { children: errorMessage }) })) : null] }) }));
+    return (_jsx(Box, { "data-name": "named-query-settings", children: _jsx(Flex, { flexDirection: "column", className: "twa:gap-3 twa:p-3", children: _jsxs(Card, { shadow: false, children: [_jsxs(Card.Title, { children: [_jsx(Box, { className: "twa:font-medium", children: "Name" }), _jsx(Box, { className: "twa:text-xs twa:opacity-70 twa:font-normal twa:max-w-[520px]", children: "Provide a unique name for the Named Query" })] }), _jsx(Card.Body, { className: "twa:p-1", children: _jsx(Input, { "data-name": "query-name", value: data.Name ?? '', autoFocus: true, className: "twa:max-w-[300px] twa:w-full", type: "text", placeholder: "Enter name for Named Query", onChange: handleNameChange }) })] }) }) }));
 };

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

@@ -39,9 +39,7 @@ export function NamedQueryWizard(props) {
                 details: 'Specify a unique Name for the Named Query',
                 renderSummary: renderNamedQuerySettingsSummary,
                 isValid: isValidNamedQuerySettings,
-                render: () => {
-                    return _jsx(NamedQuerySettingsWizardSection, { onChange: setNamedQuery });
-                },
+                render: () => _jsx(NamedQuerySettingsWizardSection, { onChange: setNamedQuery }),
             },
             {
                 details: 'Select Named Query Tags',

package/src/View/Note/NoteEditor.js

@@ -1,10 +1,10 @@
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
-import throttle from '../../Utilities/utils/throttle';
+import { throttle } from '../../Utilities/Helpers/TimingHelper';
 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/Note/NotePopup.js

@@ -7,7 +7,7 @@ import { useAdaptable } from '../AdaptableContext';
 import { AdaptableButtonComponent } from '../Components/AdaptableButton';
 import { PopupPanel } from '../Components/Popups/AdaptablePopup/PopupPanel';
 import StringExtensions from '../../Utilities/Extensions/StringExtensions';
-import FormatHelper from '../../Utilities/Helpers/FormatHelper';
+import FormatHelper from '../../Utilities/Helpers/DisplayFormatHelper';
 import { ACCESS_LEVEL_READ_ONLY } from '../../Utilities/Constants/GeneralConstants';
 const tableDOMProps = {
     style: {

package/src/View/PlusMinus/Wizard/PlusMinusRuleWizardSection.d.ts

@@ -1,6 +1,10 @@
 import * as React from 'react';
 import { PlusMinusNudge } from '../../../types';
+import { OnePageAdaptableWizardContextType } from '../../Wizard/OnePageAdaptableWizard';
+import { AdaptableApi } from '../../../Api/AdaptableApi';
 export declare function PlusMinusRuleSummary(): React.JSX.Element;
+export declare const PlusMinusRuleStepSummary: React.FunctionComponent;
+export declare const isRuleValid: (data: PlusMinusNudge, api: AdaptableApi, context: OnePageAdaptableWizardContextType<PlusMinusNudge>) => string | true;
 interface PlusMinusRuleWizardSectionProps {
     onChange: (data: PlusMinusNudge) => void;
     defaultPredicateId: string;

package/src/View/PlusMinus/Wizard/PlusMinusRuleWizardSection.js

@@ -1,7 +1,12 @@
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
-import { useOnePageAdaptableWizardContext } from '../../Wizard/OnePageAdaptableWizard';
+import { SummaryText, useOnePageAdaptableWizardContext, } from '../../Wizard/OnePageAdaptableWizard';
 import { EntityRulesEditor, EntityRulesSummary } from '../../Components/EntityRulesEditor';
 import { CodeBlock } from '../../../components/CodeBlock';
+import { isAdaptableRuleValid } from '../../Components/EntityRulesEditor/Utilities';
+import { Box, Flex } from '../../../components/Flex';
+import { Card } from '../../../components/Card';
+import { TypeRadio } from '../../Wizard/TypeRadio';
+import { Tag } from '../../../components/Tag';
 export function PlusMinusRuleSummary() {
     const { data } = useOnePageAdaptableWizardContext();
     return (_jsx(EntityRulesSummary, { data: data, renderPredicate: (contents) => {
@@ -10,22 +15,47 @@ export function PlusMinusRuleSummary() {
             return (_jsxs(_Fragment, { children: ["Apply Plus Minus when", ' ', _jsx("b", { children: _jsx(CodeBlock, { children: contents }) })] }));
         } }));
 }
+export const PlusMinusRuleStepSummary = () => {
+    const { data } = useOnePageAdaptableWizardContext();
+    const hasCondition = Boolean(data.Rule);
+    return (_jsxs(_Fragment, { children: [_jsxs(SummaryText, { children: ["Nudge Type ", _jsx(Tag, { children: hasCondition ? 'Conditional' : 'Always Apply' })] }), hasCondition ? _jsx(PlusMinusRuleSummary, {}) : null] }));
+};
+export const isRuleValid = (data, api, context) => {
+    if (!data.Rule) {
+        return true;
+    }
+    if (!data.Rule.BooleanExpression) {
+        return 'A valid rule is required.';
+    }
+    const ruleValidation = isAdaptableRuleValid(data, api, context);
+    if (typeof ruleValidation === 'string') {
+        return ruleValidation;
+    }
+    return true;
+};
 export function PlusMinusRuleWizardSection(props) {
     const { data, moduleInfo } = useOnePageAdaptableWizardContext();
+    const hasCondition = Boolean(data.Rule);
+    const handleNudgeTypeChange = (conditional) => {
+        if (conditional) {
+            props.onChange({
+                ...data,
+                Rule: data.Rule ?? { BooleanExpression: '' },
+            });
+            return;
+        }
+        const preparedData = { ...data };
+        delete preparedData.Rule;
+        props.onChange(preparedData);
+    };
     const plusMinusNudge = {
         ...data,
         Rule: data?.Rule ?? { BooleanExpression: '' },
     };
-    return (_jsx(EntityRulesEditor, { module: moduleInfo.ModuleName, 
-        // min-height 0 so the container does not min-size from it's children
-        // https://stackoverflow.com/questions/33605552/how-to-prevent-a-flex-item-height-to-overflow-due-to-its-content
-        flexProps: { style: { minHeight: 0 } }, defaultPredicateId: props.defaultPredicateId, predicateDefs: [], showAggregation: false, showObservable: false, showPredicate: false, data: plusMinusNudge, 
-        // the cast is to convince TS that it still a PlusMinusNudge
-        // even when Rule is not optional, the type is inferred from `plusMinusNudge`
-        onChange: (plusMinus) => props.onChange(plusMinus), descriptions: {
-            selectPredicate: null,
-            useBooleanQuery: (_jsxs(_Fragment, { children: ["Use an BooleanQuery if ", _jsx("i", { children: "Scope" }), " is 'All Columns' - so any data change may be evaluated in a complex BooleanExpression"] })),
-            useObservableQuery: null,
-            useAggregationQuery: null,
-        } }));
+    return (_jsxs(Flex, { flexDirection: "column", className: "twa:h-full twa:gap-3 twa:p-3", children: [_jsxs(Card, { shadow: false, children: [_jsxs(Card.Title, { children: [_jsx(Box, { className: "twa:font-medium", children: "Nudge Type" }), _jsx(Box, { className: "twa:text-xs twa:opacity-70 twa:font-normal twa:max-w-[520px]", children: "Choose whether the nudge is always applied or only when a condition is met" })] }), _jsx(Card.Body, { children: _jsxs(Flex, { flexDirection: "column", children: [_jsx(TypeRadio, { "data-name": "nudge-type-always", text: "Always Apply", description: "The nudge value is always applied when using Plus/Minus", checked: !hasCondition, onClick: () => handleNudgeTypeChange(false) }), _jsx(TypeRadio, { "data-name": "nudge-type-condition", text: "Conditional", description: "Apply the nudge only when the row matches a rule", checked: hasCondition, onClick: () => handleNudgeTypeChange(true) })] }) })] }), hasCondition ? (_jsxs(Card, { shadow: false, className: "twa:flex-1 twa:min-h-0", children: [_jsxs(Card.Title, { children: [_jsx(Box, { className: "twa:font-medium", children: "Condition" }), _jsx(Box, { className: "twa:text-xs twa:opacity-70 twa:font-normal twa:max-w-[520px]", children: "Build a rule that determines when the nudge should be applied" })] }), _jsx(Card.Body, { className: "twa:flex-1 twa:min-h-0", children: _jsx(EntityRulesEditor, { module: moduleInfo.ModuleName, flexProps: { style: { minHeight: 0 } }, defaultPredicateId: props.defaultPredicateId, predicateDefs: [], showAggregation: false, showObservable: false, showPredicate: false, data: plusMinusNudge, onChange: (plusMinus) => props.onChange(plusMinus), descriptions: {
+                                selectPredicate: null,
+                                useBooleanQuery: (_jsxs(_Fragment, { children: ["Use an BooleanQuery if ", _jsx("i", { children: "Scope" }), " is 'All Columns' - so any data change may be evaluated in a complex BooleanExpression"] })),
+                                useObservableQuery: null,
+                                useAggregationQuery: null,
+                            } }) })] })) : null] }));
 }

package/src/View/PlusMinus/Wizard/PlusMinusScopeWizardSection.js

@@ -1,25 +1,18 @@
-import { jsx as _jsx } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import * as React from 'react';
 import { useOnePageAdaptableWizardContext } from '../../Wizard/OnePageAdaptableWizard';
 import { NewScopeComponent } from '../../Components/NewScopeComponent';
+import { Box, Flex } from '../../../components/Flex';
 export const PlusMinusScopeWizardSection = (props) => {
     const { data, api } = useOnePageAdaptableWizardContext();
     const availableColumns = React.useMemo(() => api.columnApi.getNumericColumns(), []);
-    return (_jsx(NewScopeComponent, { availableDataTypes: ['number'], scopeColumns: availableColumns, scope: data.Scope, descriptions: {
-            rowScope: 'Matching rows will have the plus/minus applied',
-            columnScope: 'Matching Columns will have the plus/minus applied',
-        }, updateScope: (Scope) => {
-            let preparedScope = Scope;
-            if (Scope && 'DataTypes' in Scope && Scope.DataTypes.length === 0) {
-                // default to checked
-                preparedScope = {
-                    ...Scope,
-                    DataTypes: ['number'],
-                };
-            }
-            props.onChange({
-                ...data,
-                Scope: preparedScope,
-            });
-        } }));
+    return (_jsxs(Flex, { flexDirection: "column", className: "twa:h-full", children: [_jsxs(Flex, { flexDirection: "row", alignItems: "center", className: "twa:p-2 twa:gap-3 twa:border-b twa:mb-2 twa:border-b-foreground/20", children: [_jsx(Box, { className: "twa:text-5 twa:font-medium", children: "Target" }), _jsx(Box, { className: "twa:text-xs twa:opacity-70 twa:max-w-[520px]", children: "Specify where the Plus/Minus Nudge should be applied (numeric columns only)" })] }), _jsx(Box, { className: "twa:flex-1 twa:min-h-0 twa:overflow-auto twa:p-2", children: _jsx(NewScopeComponent, { disableDataTypes: true, scopeColumns: availableColumns, scope: data.Scope, descriptions: {
+                        rowScope: 'Matching rows will have the plus/minus applied',
+                        columnScope: 'Selected Columns will have the plus/minus applied',
+                    }, updateScope: (Scope) => {
+                        props.onChange({
+                            ...data,
+                            Scope: Scope,
+                        });
+                    } }) })] }));
 };

package/src/View/PlusMinus/Wizard/PlusMinusSettingsWizardSection.d.ts

@@ -1,14 +1,10 @@
 import * as React from 'react';
 import { OnePageAdaptableWizardContextType } from '../../Wizard/OnePageAdaptableWizard';
 import { AdaptableApi, PlusMinusNudge } from '../../../types';
-export declare const PlusMinusSettingsSummary: React.FunctionComponent<{
-    hasCondition: boolean;
-}>;
-export declare const isSettingsValid: (hasCondition: boolean) => (data: PlusMinusNudge, api: AdaptableApi, context: OnePageAdaptableWizardContextType<PlusMinusNudge>) => string | true;
+export declare const PlusMinusSettingsSummary: React.FunctionComponent;
+export declare const isSettingsValid: (data: PlusMinusNudge, api: AdaptableApi, _context: OnePageAdaptableWizardContextType<PlusMinusNudge>) => true | "A name is required." | "A Plus/Minus Nudge with this name already exists." | "A nudge value is required." | "Nudge value must not be zero." | "Increment and decrement keys cannot be the same for this nudge.";
 interface PlusMinusSettingsWizardSectionProps {
     onChange: (plusMinusNudge: PlusMinusNudge) => void;
-    hasCondition: boolean;
-    onConditionChange: (hasCondition: boolean) => void;
 }
 export declare const PlusMinusSettingsWizardSection: React.FunctionComponent<PlusMinusSettingsWizardSectionProps>;
 export {};