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

package/src/View/StyledColumn/Wizard/StyledColumnSliceStyleEditors.js

@@ -1,11 +1,11 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { CheckBox } from '../../../components/CheckBox';
-import { ColorPicker } from '../../../components/ColorPicker';
+import * as React from 'react';
+import { OptionalColorPicker } from '../../../components/ColorPicker';
 import FormLayout, { FormRow } from '../../../components/FormLayout';
 import { Box, Flex } from '../../../components/Flex';
 import { NumberInput } from '../../../components/Input/NumberInput';
 import { SingleSelect } from '../../../components/NewSelect';
-import { Tag } from '../../../components/Tag';
+import { renderSummaryLabelValueTags } from '../../Wizard/SummaryColorTag';
 import { Toggle, ToggleGroup } from '../../../components/Toggle';
 const FORM_SIZES = ['200px', '1fr'];
 const FONT_SIZE_ITEMS = [
@@ -45,18 +45,13 @@ export const StyledColumnFontStyleEditor = (props) => {
             props.onChange(next);
         }
     };
-    const onForeColorChecked = (checked) => {
-        if (checked) {
-            update({ ForeColor: font.ForeColor ?? '#000000' });
-        }
-        else {
-            update({ ForeColor: undefined });
-        }
+    const onForeColorChange = (color) => {
+        update({ ForeColor: color });
     };
     const onAlignmentChange = (alignment) => {
         update({ Alignment: alignment });
     };
-    return (_jsx(Box, { children: _jsxs(FormLayout, { className: "twa:ml-2", sizes: [...FORM_SIZES], children: [_jsx(FormRow, { label: "Text Colour:", children: _jsxs(Flex, { alignItems: "center", className: "twa:ml-2 twa:gap-2", children: [_jsx(CheckBox, { disabled: disabled, checked: !!font.ForeColor, onChange: (checked) => onForeColorChecked(checked), children: "Set" }), _jsx(ColorPicker, { disabled: disabled || !font.ForeColor, api: props.api, value: font.ForeColor || '#000000', onChange: (c) => update({ ForeColor: c }) })] }) }), _jsx(FormRow, { label: "Font:", children: _jsx(Box, { className: disabledClass, children: _jsxs(Flex, { alignItems: "center", className: "twa:ml-2 twa:gap-2 twa:flex-wrap", children: [_jsxs(ToggleGroup, { children: [_jsx(Toggle, { pressed: font.FontStyle === 'Italic', onPressedChange: (pressed) => update({ FontStyle: pressed ? 'Italic' : undefined }), icon: "italic" }), _jsx(Toggle, { pressed: font.FontWeight === 'Bold', onPressedChange: (pressed) => update({ FontWeight: pressed ? 'Bold' : undefined }), icon: "bold" })] }), _jsxs(ToggleGroup, { children: [_jsx(Toggle, { pressed: font.TextDecoration === 'Underline', onPressedChange: (pressed) => update({ TextDecoration: pressed ? 'Underline' : undefined }), icon: "underline" }), _jsx(Toggle, { pressed: font.TextDecoration === 'LineThrough', onPressedChange: (pressed) => update({ TextDecoration: pressed ? 'LineThrough' : undefined }), icon: "strikethrough" }), _jsx(Toggle, { pressed: font.TextDecoration === 'Overline', onPressedChange: (pressed) => update({ TextDecoration: pressed ? 'Overline' : undefined }), icon: "overline" })] }), _jsx(Box, { className: "twa:w-32", children: _jsx(SingleSelect, { placeholder: "Default size", items: FONT_SIZE_ITEMS, value: font.FontSize ?? '', onValueChange: (value) => update({
+    return (_jsx(Box, { children: _jsxs(FormLayout, { className: "twa:ml-2", sizes: [...FORM_SIZES], children: [_jsx(FormRow, { label: "Text Colour:", children: _jsx(OptionalColorPicker, { className: "twa:ml-2", disabled: disabled, api: props.api, value: font.ForeColor, defaultColor: "#000000", onChange: onForeColorChange }) }), _jsx(FormRow, { label: "Font:", children: _jsx(Box, { className: disabledClass, children: _jsxs(Flex, { alignItems: "center", className: "twa:ml-2 twa:gap-2 twa:flex-wrap", children: [_jsxs(Flex, { alignItems: "center", className: "twa:gap-2", children: [_jsx(Toggle, { standalone: true, pressed: font.FontStyle === 'Italic', onPressedChange: (pressed) => update({ FontStyle: pressed ? 'Italic' : undefined }), icon: "italic" }), _jsx(Toggle, { standalone: true, pressed: font.FontWeight === 'Bold', onPressedChange: (pressed) => update({ FontWeight: pressed ? 'Bold' : undefined }), icon: "bold" })] }), _jsxs(ToggleGroup, { children: [_jsx(Toggle, { pressed: font.TextDecoration === 'Underline', onPressedChange: (pressed) => update({ TextDecoration: pressed ? 'Underline' : undefined }), icon: "underline" }), _jsx(Toggle, { pressed: font.TextDecoration === 'LineThrough', onPressedChange: (pressed) => update({ TextDecoration: pressed ? 'LineThrough' : undefined }), icon: "strikethrough" }), _jsx(Toggle, { pressed: font.TextDecoration === 'Overline', onPressedChange: (pressed) => update({ TextDecoration: pressed ? 'Overline' : undefined }), icon: "overline" })] }), _jsx(Box, { className: "twa:w-32", children: _jsx(SingleSelect, { placeholder: "Default size", items: FONT_SIZE_ITEMS, value: font.FontSize ?? '', onValueChange: (value) => update({
                                             FontSize: (value || undefined),
                                         }) }) })] }) }) }), !hideAlignment && (_jsx(FormRow, { label: "Alignment:", children: _jsx(Box, { className: disabledClass, children: _jsx(Flex, { alignItems: "center", className: "twa:ml-2 twa:gap-2", children: _jsxs(ToggleGroup, { children: [_jsx(Toggle, { icon: "align-left", pressed: font.Alignment === 'Left', onPressedChange: (pressed) => onAlignmentChange(pressed ? 'Left' : undefined) }), _jsx(Toggle, { icon: "align-center", pressed: font.Alignment === 'Center', onPressedChange: (pressed) => onAlignmentChange(pressed ? 'Center' : undefined) }), _jsx(Toggle, { icon: "align-right", pressed: font.Alignment === 'Right', onPressedChange: (pressed) => onAlignmentChange(pressed ? 'Right' : undefined) })] }) }) }) }))] }) }));
 };
@@ -69,9 +64,11 @@ export const StyledColumnFontStyleEditor = (props) => {
  */
 export const StyledColumnCellStyleEditor = (props) => {
     const cell = props.value ?? {};
+    const cellRef = React.useRef(cell);
+    cellRef.current = cell;
     const { disabled } = props;
     const update = (patch) => {
-        const next = { ...cell, ...patch };
+        const next = { ...cellRef.current, ...patch };
         Object.keys(next).forEach((k) => {
             const v = next[k];
             if (v === undefined || v === null || v === '') {
@@ -85,54 +82,72 @@ export const StyledColumnCellStyleEditor = (props) => {
             props.onChange(next);
         }
     };
-    return (_jsx(Box, { children: _jsxs(FormLayout, { className: "twa:ml-2", sizes: [...FORM_SIZES], children: [_jsx(FormRow, { label: "Background:", children: _jsxs(Flex, { alignItems: "center", className: "twa:ml-2 twa:gap-2", children: [_jsx(CheckBox, { disabled: disabled, checked: !!cell.BackColor, onChange: (checked) => update({ BackColor: checked ? cell.BackColor ?? '#ffffff' : undefined }), children: "Set" }), _jsx(ColorPicker, { disabled: disabled || !cell.BackColor, api: props.api, value: cell.BackColor || '#ffffff', onChange: (c) => update({ BackColor: c }) })] }) }), _jsx(FormRow, { label: "Border colour:", children: _jsxs(Flex, { alignItems: "center", className: "twa:ml-2 twa:gap-2", children: [_jsx(CheckBox, { disabled: disabled, checked: !!cell.BorderColor, onChange: (checked) => update({ BorderColor: checked ? cell.BorderColor ?? '#000000' : undefined }), children: "Set" }), _jsx(ColorPicker, { disabled: disabled || !cell.BorderColor, api: props.api, value: cell.BorderColor || '#000000', onChange: (c) => update({ BorderColor: c }) })] }) }), _jsx(FormRow, { label: "Border radius:", children: _jsxs(Flex, { alignItems: "center", className: "twa:ml-2 twa:gap-2", children: [_jsx(NumberInput, { disabled: disabled, className: "twa:w-20", value: cell.BorderRadius, min: 0, max: 64, step: 1, onChange: (v) => update({ BorderRadius: v === undefined || isNaN(Number(v)) ? undefined : v }) }), _jsx(Box, { className: "twa:text-xs twa:opacity-70", children: "px" })] }) })] }) }));
+    return (_jsx(Box, { children: _jsxs(FormLayout, { className: "twa:ml-2", sizes: [...FORM_SIZES], children: [_jsx(FormRow, { label: "Background:", children: _jsx(OptionalColorPicker, { className: "twa:ml-2", disabled: disabled, api: props.api, value: cell.BackColor, defaultColor: "#ffffff", onChange: (c) => update({ BackColor: c }) }) }), _jsx(FormRow, { label: "Border colour:", children: _jsx(OptionalColorPicker, { className: "twa:ml-2", disabled: disabled, api: props.api, value: cell.BorderColor, defaultColor: "#000000", onChange: (c) => update({ BorderColor: c }) }) }), _jsx(FormRow, { label: "Border radius:", children: _jsxs(Flex, { alignItems: "center", className: "twa:ml-2 twa:gap-2", children: [_jsx(NumberInput, { disabled: disabled, className: "twa:w-20", value: cell.BorderRadius, min: 0, max: 64, step: 1, onChange: (v) => update({ BorderRadius: v === undefined || isNaN(Number(v)) ? undefined : v }) }), _jsx(Box, { className: "twa:text-xs twa:opacity-70", children: "px" })] }) })] }) }));
 };
 /**
- * Compact summary tags for the Font slice; used by wizard summary panels.
+ * Descriptive font properties for summary panels (`Label: value` strings).
  */
-export const renderFontStyleSummaryTags = (font) => {
-    if (!font)
-        return null;
-    const tags = [];
+export const getCellFontStyleSummaryItems = (font) => {
+    if (!font) {
+        return [];
+    }
+    const items = [];
     if (font.ForeColor) {
-        tags.push(_jsxs(Tag, { children: ["Text ", font.ForeColor] }, "fg"));
+        items.push({ label: 'Fore Colour', value: font.ForeColor });
     }
     if (font.FontWeight === 'Bold') {
-        tags.push(_jsx(Tag, { children: "Bold" }, "b"));
+        items.push({ label: 'Font Weight', value: 'Bold' });
     }
     if (font.FontStyle === 'Italic') {
-        tags.push(_jsx(Tag, { children: "Italic" }, "i"));
+        items.push({ label: 'Font Style', value: 'Italic' });
     }
     if (font.TextDecoration && font.TextDecoration !== 'None') {
-        tags.push(_jsx(Tag, { children: font.TextDecoration }, "td"));
+        items.push({ label: 'Text Decoration', value: font.TextDecoration });
     }
     if (font.FontSize) {
-        tags.push(_jsx(Tag, { children: font.FontSize }, "fs"));
+        items.push({ label: 'Font Size', value: font.FontSize });
     }
     if (font.Alignment && font.Alignment !== 'Default') {
-        tags.push(_jsxs(Tag, { children: ["Align ", font.Alignment] }, "al"));
+        items.push({ label: 'Alignment', value: font.Alignment });
     }
-    if (tags.length === 0)
-        return null;
-    return (_jsx(Flex, { alignItems: "center", className: "twa:gap-1 twa:flex-wrap", children: tags }));
+    return items;
 };
 /**
- * Compact summary tags for the Cell slice; used by wizard summary panels.
+ * Compact summary tags for the Font slice; used by wizard summary panels.
  */
-export const renderCellStyleSummaryTags = (cell) => {
-    if (!cell)
+export const renderFontStyleSummaryTags = (font) => {
+    const items = getCellFontStyleSummaryItems(font);
+    if (!items.length) {
         return null;
-    const tags = [];
+    }
+    return renderSummaryLabelValueTags(items);
+};
+/**
+ * Descriptive cell box properties for summary panels (`Label: value` strings).
+ */
+export const getCellBoxStyleSummaryItems = (cell) => {
+    if (!cell) {
+        return [];
+    }
+    const items = [];
     if (cell.BackColor) {
-        tags.push(_jsxs(Tag, { children: ["Bg ", cell.BackColor] }, "bg"));
+        items.push({ label: 'Back Colour', value: cell.BackColor });
     }
     if (cell.BorderColor) {
-        tags.push(_jsxs(Tag, { children: ["Border ", cell.BorderColor] }, "bc"));
+        items.push({ label: 'Border Colour', value: cell.BorderColor });
     }
     if (cell.BorderRadius != null) {
-        tags.push(_jsxs(Tag, { children: ["Radius ", cell.BorderRadius, "px"] }, "br"));
+        items.push({ label: 'Border Radius', value: `${cell.BorderRadius}px` });
     }
-    if (tags.length === 0)
+    return items;
+};
+/**
+ * Compact summary tags for the Cell slice; used by wizard summary panels.
+ */
+export const renderCellStyleSummaryTags = (cell) => {
+    const items = getCellBoxStyleSummaryItems(cell);
+    if (!items.length) {
         return null;
-    return (_jsx(Flex, { alignItems: "center", className: "twa:gap-1 twa:flex-wrap", children: tags }));
+    }
+    return renderSummaryLabelValueTags(items);
 };

package/src/View/StyledColumn/Wizard/StyledColumnSparklineSettingsSection.d.ts

@@ -1,9 +1,8 @@
 import * as React from 'react';
 import type { StyledColumn } from '../../../types';
+export declare const getStyledColumnSparklineStyleViewValues: (data: StyledColumn) => string[];
 /**
- * Wizard-step summary for the Sparkline Settings step, mirroring the
- * pattern used by Bullet / Badge / Gradient / Percent Bar so the nav row
- * isn't blank when this step is collapsed.
+ * Wizard-step summary for the Sparkline Settings step.
  */
 export declare const renderSparklineSummary: (data: StyledColumn) => React.ReactNode;
 /**

package/src/View/StyledColumn/Wizard/StyledColumnSparklineSettingsSection.js

@@ -1,15 +1,20 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import * as React from 'react';
 import { SingleSelect } from '../../../components/NewSelect';
-import { Tabs } from '../../../components/Tabs';
 import { useOnePageAdaptableWizardContext } from '../../Wizard/OnePageAdaptableWizard';
 import FormLayout, { FormRow } from '../../../components/FormLayout';
 import { Tag } from '../../../components/Tag';
+import { renderSummaryStringTags } from '../../Wizard/SummaryColorTag';
 import AdaptableInput from '../../Components/AdaptableInput';
 import { ColorPicker } from '../../../components/ColorPicker';
 import { CheckBox } from '../../../components/CheckBox';
 import { Box, Flex } from '../../../components/Flex';
-import { renderCellStyleSummaryTags, StyledColumnCellStyleEditor, } from './StyledColumnSliceStyleEditors';
+import { getCellBoxStyleSummaryItems, StyledColumnCellStyleEditor, } from './StyledColumnSliceStyleEditors';
+import { Card } from '../../../components/Card';
+import ErrorBox from '../../../components/ErrorBox';
+const STYLE_FORM_SIZES = ['200px', '1fr'];
+/** Sentinel for the theme dropdown — persisted options omit `theme` when this is chosen. */
+const SPARKLINE_CUSTOM_COLOURS_THEME = '__custom__';
 const SparklineTypes = {
     LINE: 'line',
     AREA: 'area',
@@ -30,22 +35,67 @@ const sparklineTypeLabel = (opts) => {
     }
     return type.charAt(0).toUpperCase() + type.slice(1);
 };
+const buildStyledColumnSparklineStyleSummaryStrings = (sparkline, options) => {
+    const opts = sparkline.options;
+    if (!opts) {
+        return [];
+    }
+    const items = [`Type: ${sparklineTypeLabel(opts)}`];
+    if (typeof opts.theme === 'string' && opts.theme !== 'ag-default') {
+        items.push(`Theme: ${opts.theme.replace(/^ag-/, '')}`);
+    }
+    if (typeof opts.min === 'number' || typeof opts.max === 'number') {
+        items.push(`Range: ${opts.min ?? 'auto'} → ${opts.max ?? 'auto'}`);
+    }
+    if (opts.xKey || opts.yKey) {
+        items.push(`Keys: x=${opts.xKey ?? 'x'}, y=${opts.yKey ?? 'y'}`);
+    }
+    const markerEnabled = opts.type !== 'bar' &&
+        opts.marker?.enabled;
+    if (markerEnabled) {
+        items.push('Markers: On');
+    }
+    else if (options.includeEmptyFeatures && opts.type !== 'bar') {
+        items.push('Markers: Off');
+    }
+    if (opts.tooltip?.enabled) {
+        items.push('Tooltip: On');
+    }
+    else if (options.includeEmptyFeatures) {
+        items.push('Tooltip: Off');
+    }
+    if (opts.axis?.visible) {
+        items.push('Axis: On');
+    }
+    else if (options.includeEmptyFeatures) {
+        items.push('Axis: Off');
+    }
+    getCellBoxStyleSummaryItems(sparkline.Cell).forEach(({ label, value }) => {
+        items.push(`${label}: ${value}`);
+    });
+    return items;
+};
+export const getStyledColumnSparklineStyleViewValues = (data) => {
+    const sparkline = data.SparklineStyle;
+    if (!sparkline) {
+        return [];
+    }
+    return buildStyledColumnSparklineStyleSummaryStrings(sparkline, {
+        includeEmptyFeatures: false,
+    });
+};
 /**
- * Wizard-step summary for the Sparkline Settings step, mirroring the
- * pattern used by Bullet / Badge / Gradient / Percent Bar so the nav row
- * isn't blank when this step is collapsed.
+ * Wizard-step summary for the Sparkline Settings step.
  */
 export const renderSparklineSummary = (data) => {
-    const opts = data.SparklineStyle?.options;
-    if (!opts) {
-        return _jsx(Tag, { children: "\u2014" });
+    const sparkline = data.SparklineStyle;
+    if (!sparkline?.options) {
+        return _jsx(Tag, { children: "No Styling Defined" });
     }
-    const type = sparklineTypeLabel(opts);
-    const theme = typeof opts.theme === 'string' ? opts.theme.replace(/^ag-/, '') : null;
-    const min = typeof opts.min === 'number' ? opts.min : null;
-    const max = typeof opts.max === 'number' ? opts.max : null;
-    const cellTags = renderCellStyleSummaryTags(data.SparklineStyle?.Cell);
-    return (_jsxs(Flex, { alignItems: "center", className: "twa:flex-wrap twa:gap-2", children: [_jsxs(Box, { children: ["Type: ", _jsx(Tag, { children: type })] }), theme && (_jsxs(Box, { children: ["Theme: ", _jsx(Tag, { children: theme })] })), (min != null || max != null) && (_jsxs(Box, { children: ["Range: ", _jsx(Tag, { children: `${min ?? 'auto'} → ${max ?? 'auto'}` })] })), cellTags && _jsxs(Box, { children: ["Cell: ", cellTags] })] }));
+    const items = buildStyledColumnSparklineStyleSummaryStrings(sparkline, {
+        includeEmptyFeatures: true,
+    });
+    return renderSummaryStringTags(items);
 };
 /**
  * Validation for the Sparkline Settings wizard step.
@@ -91,23 +141,32 @@ export const StyledColumnSparklineSettingsSection = ({ onChange }) => {
         }
         handleOptionsChange(newOptions);
     };
-    const isObjectNumberArray = api.columnApi.getColumnWithColumnId(data.ColumnId)?.dataType === 'objectArray';
-    return (_jsxs(_Fragment, { children: [_jsx(Box, { className: "twa:mb-3", children: _jsxs(FormLayout, { children: [_jsx(FormRow, { label: "Sparkline Type", children: _jsx(Box, { className: "twa:max-w-[160px]", children: _jsx(SingleSelect, { className: "twa:w-full", items: sparklineTypeOptions, value: sparklineType, onValueChange: handleTypeChange, placeholder: "Select Sparkline Type" }) }) }), isObjectNumberArray && (_jsx(SparklineObjectArrayProperties, { options: sparklineOptions, onChange: handleOptionsChange })), _jsx(FormRow, { label: "Min Value", children: _jsx(AdaptableInput, { type: "number", value: sparklineOptions.min ?? '', onChange: (e) => handleOptionsChange({
-                                    ...sparklineOptions,
-                                    min: e.target.value === '' ? undefined : Number(e.target.value),
-                                }), placeholder: 'Auto', title: "User override for the automatically determined min value (based on series data)" }) }), _jsx(FormRow, { label: "Max Value", children: _jsx(AdaptableInput, { type: "number", value: sparklineOptions.max ?? '', onChange: (e) => handleOptionsChange({
-                                    ...sparklineOptions,
-                                    max: e.target.value === '' ? undefined : Number(e.target.value),
-                                }), placeholder: 'Auto', title: "User override for the automatically determined max value (based on series data)" }) })] }) }), _jsxs(Tabs, { className: "twa:mb-2", children: [_jsx(Tabs.Tab, { children: "Theming" }), _jsx(Tabs.Tab, { children: "Axis" }), _jsx(Tabs.Tab, { hidden: sparklineOptions.type === 'bar', children: "Marker" }), _jsx(Tabs.Tab, { children: "Tooltip" }), _jsx(Tabs.Tab, { children: "Highlight Style" }), _jsx(Tabs.Content, { children: _jsx(SparklineThemingOptions, { options: sparklineOptions, onChange: handleOptionsChange }) }), _jsx(Tabs.Content, { children: _jsx(SparklineAxisOptions, { options: sparklineOptions, onChange: handleOptionsChange }) }), _jsx(Tabs.Content, { children: _jsx(SparklineMarkerOptions, { options: sparklineOptions, onChange: handleOptionsChange }) }), _jsx(Tabs.Content, { children: _jsx(SparklineTooltipOptions, { options: sparklineOptions, onChange: handleOptionsChange }) }), _jsx(Tabs.Content, { children: _jsx(SparklineHighlightOptions, { options: sparklineOptions, onChange: handleOptionsChange }) })] }), _jsxs(Box, { className: "twa:mt-3", children: [_jsx(Box, { className: "twa:ml-2 twa:font-semibold twa:text-sm", children: "Cell" }), _jsx(Box, { className: "twa:ml-2 twa:text-xs twa:opacity-70 twa:mt-1 twa:max-w-[480px] twa:mb-1", children: "Optional cell-box styling (background, border, radius) applied to the cell behind the sparkline. When any property is set, this column ignores Cell-box properties from any matching Format Column." }), _jsx(StyledColumnCellStyleEditor, { api: api, value: data.SparklineStyle?.Cell, onChange: (next) => {
-                            const sparkStyle = { ...(data.SparklineStyle ?? {}) };
-                            if (next) {
-                                sparkStyle.Cell = next;
-                            }
-                            else {
-                                delete sparkStyle.Cell;
-                            }
-                            onChange({ ...data, SparklineStyle: sparkStyle });
-                        } })] })] }));
+    const column = data.ColumnId
+        ? api.columnApi.getColumnWithColumnId(data.ColumnId)
+        : undefined;
+    const disabled = !data.ColumnId || !column;
+    const isObjectNumberArray = column?.dataType === 'objectArray';
+    if (!data.ColumnId || !column) {
+        return (_jsx(Box, { children: _jsx(ErrorBox, { className: "twa:mt-2", children: !data.ColumnId
+                    ? 'You need to select a column before styling.'
+                    : `Column "${data.ColumnId}" was not found in the grid.` }) }));
+    }
+    return (_jsxs(Box, { children: [_jsxs(Card, { shadow: false, className: "twa:mb-3", children: [_jsx(Card.Title, { children: "Chart" }), _jsx(Card.Body, { children: _jsxs(FormLayout, { sizes: [...STYLE_FORM_SIZES], children: [_jsx(FormRow, { label: "Type:", children: _jsx(Box, { className: "twa:max-w-[160px]", children: _jsx(SingleSelect, { className: "twa:w-full", disabled: disabled, items: sparklineTypeOptions, value: sparklineType, onValueChange: handleTypeChange, placeholder: "Select Sparkline Type" }) }) }), isObjectNumberArray && (_jsx(SparklineObjectArrayProperties, { options: sparklineOptions, onChange: handleOptionsChange })), _jsx(FormRow, { label: "Min Value:", children: _jsx(AdaptableInput, { disabled: disabled, type: "number", value: sparklineOptions.min ?? '', onChange: (e) => handleOptionsChange({
+                                            ...sparklineOptions,
+                                            min: e.target.value === '' ? undefined : Number(e.target.value),
+                                        }), placeholder: 'Auto', title: "User override for the automatically determined min value (based on series data)" }) }), _jsx(FormRow, { label: "Max Value:", children: _jsx(AdaptableInput, { disabled: disabled, type: "number", value: sparklineOptions.max ?? '', onChange: (e) => handleOptionsChange({
+                                            ...sparklineOptions,
+                                            max: e.target.value === '' ? undefined : Number(e.target.value),
+                                        }), placeholder: 'Auto', title: "User override for the automatically determined max value (based on series data)" }) })] }) })] }), _jsxs(Card, { shadow: false, className: "twa:mb-3", children: [_jsx(Card.Title, { children: "Theming" }), _jsx(Card.Body, { children: _jsx(SparklineThemingOptions, { options: sparklineOptions, onChange: handleOptionsChange }) })] }), _jsxs(Card, { shadow: false, className: "twa:mb-3", children: [_jsx(Card.Title, { children: "Axis" }), _jsx(Card.Body, { children: _jsx(SparklineAxisOptions, { options: sparklineOptions, onChange: handleOptionsChange }) })] }), sparklineOptions.type !== 'bar' && (_jsxs(Card, { shadow: false, className: "twa:mb-3", children: [_jsx(Card.Title, { children: "Markers" }), _jsx(Card.Body, { children: _jsx(SparklineMarkerOptions, { options: sparklineOptions, onChange: handleOptionsChange }) })] })), _jsxs(Card, { shadow: false, className: "twa:mb-3", children: [_jsx(Card.Title, { children: "Tooltip" }), _jsx(Card.Body, { children: _jsx(SparklineTooltipOptions, { options: sparklineOptions, onChange: handleOptionsChange }) })] }), _jsxs(Card, { shadow: false, className: "twa:mb-3", children: [_jsx(Card.Title, { children: "Highlight" }), _jsx(Card.Body, { children: _jsx(SparklineHighlightOptions, { options: sparklineOptions, onChange: handleOptionsChange }) })] }), _jsxs(Card, { shadow: false, className: "twa:mb-3", children: [_jsxs(Card.Title, { children: [_jsx(Box, { className: "twa:font-medium", children: "Cell" }), _jsx(Box, { className: "twa:text-xs twa:opacity-70 twa:font-normal twa:max-w-[500px]", children: "Optional cell-box styling behind the sparkline" })] }), _jsx(Card.Body, { children: _jsx(StyledColumnCellStyleEditor, { api: api, disabled: disabled, value: data.SparklineStyle?.Cell, onChange: (next) => {
+                                const sparkStyle = { ...(data.SparklineStyle ?? {}) };
+                                if (next) {
+                                    sparkStyle.Cell = next;
+                                }
+                                else {
+                                    delete sparkStyle.Cell;
+                                }
+                                onChange({ ...data, SparklineStyle: sparkStyle });
+                            } }) })] })] }));
 };
 const SparklineObjectArrayProperties = ({ options, onChange, }) => {
     const { data, api } = useOnePageAdaptableWizardContext();
@@ -140,11 +199,17 @@ const SparklineThemingOptions = ({ options, onChange, }) => {
     const handleChange = (key, value) => {
         onChange({ ...options, [key]: value });
     };
+    const applySeriesColour = (patch) => {
+        const next = { ...options, ...patch };
+        delete next.theme;
+        onChange(next);
+    };
     const handlePaddingChange = (key, value) => {
         const currentPadding = sparklineOptions.padding || {};
         handleChange('padding', { ...currentPadding, [key]: value });
     };
     const themes = [
+        { value: SPARKLINE_CUSTOM_COLOURS_THEME, label: 'Custom colours' },
         { value: 'ag-default', label: 'Default' },
         { value: 'ag-default-dark', label: 'Default Dark' },
         { value: 'ag-sheets', label: 'Sheets' },
@@ -158,7 +223,9 @@ const SparklineThemingOptions = ({ options, onChange, }) => {
         { value: 'ag-financial', label: 'Financial' },
         { value: 'ag-financial-dark', label: 'Financial Dark' },
     ];
-    return (_jsxs(FormLayout, { children: [sparklineOptions.type !== 'line' && (_jsx(FormRow, { label: "Fill", children: _jsx(ColorPicker, { title: "The colour for filling shapes", api: api, value: sparklineOptions.fill, onChange: (color) => handleChange('fill', color) }) })), _jsx(FormRow, { label: "Stroke", children: _jsxs(Flex, { alignItems: "center", children: [_jsx(ColorPicker, { title: "The colour for the stroke", api: api, value: sparklineOptions.stroke, onChange: (color) => handleChange('stroke', color) }), _jsx(Box, { className: "twa:ml-2 twa:mr-1", children: "Width" }), _jsx(AdaptableInput, { title: "The width of the stroke in pixels", type: "number", className: "twa:w-[70px]", min: 0, value: sparklineOptions.strokeWidth ?? '', onChange: (e) => handleChange('strokeWidth', Number(e.target.value)) })] }) }), _jsx(FormRow, { label: "Padding", children: _jsxs(Flex, { alignItems: "center", children: [_jsx(Box, { className: "twa:mr-1", children: "Top" }), _jsx(AdaptableInput, { type: "number", min: 0, value: sparklineOptions.padding?.top ?? '', onChange: (e) => handlePaddingChange('top', Number(e.target.value)), className: "twa:w-[70px]", title: "The number of pixels of padding at the top of the chart area" }), _jsx(Box, { className: "twa:ml-2 twa:mr-1", children: "Right" }), _jsx(AdaptableInput, { type: "number", min: 0, value: sparklineOptions.padding?.right ?? '', onChange: (e) => handlePaddingChange('right', Number(e.target.value)), className: "twa:w-[70px]", title: "The number of pixels of padding at the right of the chart area" }), _jsx(Box, { className: "twa:ml-2 twa:mr-1", children: "Bottom" }), _jsx(AdaptableInput, { type: "number", min: 0, value: sparklineOptions.padding?.bottom ?? '', onChange: (e) => handlePaddingChange('bottom', Number(e.target.value)), className: "twa:w-[70px]", title: "The number of pixels of padding at the bottom of the chart area" }), _jsx(Box, { className: "twa:ml-2 twa:mr-1", children: "Left" }), _jsx(AdaptableInput, { type: "number", min: 0, value: sparklineOptions.padding?.left ?? '', onChange: (e) => handlePaddingChange('left', Number(e.target.value)), className: "twa:w-[70px]", title: "The number of pixels of padding at the left of the chart area" })] }) }), _jsx(FormRow, { label: "Line Dash", children: _jsx(AdaptableInput, { title: "Length of dashes and gaps in pixels (comma-separated values, e.g. '3,6,9')", value: sparklineOptions.lineDash?.join(',') ?? '', onChange: (e) => {
+    return (_jsxs(FormLayout, { children: [sparklineOptions.type !== 'line' && (_jsx(FormRow, { label: "Fill", children: _jsxs(Box, { children: [_jsx(ColorPicker, { title: "The colour for filling shapes", api: api, value: sparklineOptions.fill, onChange: (color) => applySeriesColour({ fill: color }) }), _jsx(Box, { className: "twa:mt-1 twa:text-1 twa:opacity-70", children: "Bar, column, and area body colour." })] }) })), _jsx(FormRow, { label: "Stroke", children: _jsxs(Box, { children: [_jsxs(Flex, { alignItems: "center", children: [_jsx(ColorPicker, { title: "The colour for the stroke", api: api, value: sparklineOptions.stroke, onChange: (color) => applySeriesColour({ stroke: color }) }), _jsx(Box, { className: "twa:ml-2 twa:mr-1", children: "Width" }), _jsx(AdaptableInput, { title: "The width of the stroke in pixels", type: "number", className: "twa:w-[70px]", min: 0, value: sparklineOptions.strokeWidth ?? '', onChange: (e) => handleChange('strokeWidth', Number(e.target.value)) })] }), _jsx(Box, { className: "twa:mt-1 twa:text-1 twa:opacity-70", children: sparklineOptions.type === 'line'
+                                ? 'Line colour. Marker colours are in the Markers card.'
+                                : 'Outline colour — increase width to see it on bars and columns.' })] }) }), _jsx(FormRow, { label: "Padding", children: _jsxs(Flex, { alignItems: "center", children: [_jsx(Box, { className: "twa:mr-1", children: "Top" }), _jsx(AdaptableInput, { type: "number", min: 0, value: sparklineOptions.padding?.top ?? '', onChange: (e) => handlePaddingChange('top', Number(e.target.value)), className: "twa:w-[70px]", title: "The number of pixels of padding at the top of the chart area" }), _jsx(Box, { className: "twa:ml-2 twa:mr-1", children: "Right" }), _jsx(AdaptableInput, { type: "number", min: 0, value: sparklineOptions.padding?.right ?? '', onChange: (e) => handlePaddingChange('right', Number(e.target.value)), className: "twa:w-[70px]", title: "The number of pixels of padding at the right of the chart area" }), _jsx(Box, { className: "twa:ml-2 twa:mr-1", children: "Bottom" }), _jsx(AdaptableInput, { type: "number", min: 0, value: sparklineOptions.padding?.bottom ?? '', onChange: (e) => handlePaddingChange('bottom', Number(e.target.value)), className: "twa:w-[70px]", title: "The number of pixels of padding at the bottom of the chart area" }), _jsx(Box, { className: "twa:ml-2 twa:mr-1", children: "Left" }), _jsx(AdaptableInput, { type: "number", min: 0, value: sparklineOptions.padding?.left ?? '', onChange: (e) => handlePaddingChange('left', Number(e.target.value)), className: "twa:w-[70px]", title: "The number of pixels of padding at the left of the chart area" })] }) }), _jsx(FormRow, { label: "Line Dash", children: _jsx(AdaptableInput, { title: "Length of dashes and gaps in pixels (comma-separated values, e.g. '3,6,9')", value: sparklineOptions.lineDash?.join(',') ?? '', onChange: (e) => {
                         const value = e.target.value;
                         const dashArray = value
                             ? value
@@ -173,7 +240,15 @@ const SparklineThemingOptions = ({ options, onChange, }) => {
                             }) }), _jsx(Box, { className: "twa:ml-2", children: _jsx(ColorPicker, { disabled: !sparklineOptions.background?.visible, title: "The colour of the chart background", api: api, value: sparklineOptions.background?.fill, onChange: (fill) => handleChange('background', {
                                     ...sparklineOptions.background,
                                     fill,
-                                }) }) })] }) }), typeof sparklineOptions.theme !== 'object' && (_jsx(FormRow, { label: "Theme", children: _jsx(Box, { className: "twa:max-w-[160px]", children: _jsx(SingleSelect, { className: "twa:w-full", value: sparklineOptions.theme ?? 'ag-default', onValueChange: (themeName) => handleChange('theme', themeName), items: themes }) }) }))] }));
+                                }) }) })] }) }), typeof sparklineOptions.theme !== 'object' && (_jsx(FormRow, { label: "Theme", children: _jsxs(Box, { children: [_jsx(Box, { className: "twa:max-w-[160px]", children: _jsx(SingleSelect, { className: "twa:w-full", value: sparklineOptions.theme ?? SPARKLINE_CUSTOM_COLOURS_THEME, onValueChange: (themeName) => {
+                                    if (themeName === SPARKLINE_CUSTOM_COLOURS_THEME) {
+                                        const next = { ...options };
+                                        delete next.theme;
+                                        onChange(next);
+                                        return;
+                                    }
+                                    handleChange('theme', themeName);
+                                }, items: themes }) }), _jsx(Box, { className: "twa:mt-1 twa:text-1 twa:opacity-70", children: "Palette preset. Use Custom colours when Fill / Stroke above should control the chart." })] }) }))] }));
 };
 const SparklineAxisOptions = ({ options, onChange, }) => {
     const { api } = useOnePageAdaptableWizardContext();

package/src/View/StyledColumn/Wizard/StyledColumnTypeThumbnail.d.ts

@@ -0,0 +1,5 @@
+import * as React from 'react';
+export type StyledColumnTypeThumbnailKey = 'gradient' | 'percent' | 'sparkline' | 'badge' | 'bullet' | 'rating' | 'rangeBar' | 'icon';
+export declare const StyledColumnTypeThumbnail: React.FunctionComponent<{
+    type: StyledColumnTypeThumbnailKey;
+}>;

package/src/View/StyledColumn/Wizard/StyledColumnTypeThumbnail.js

@@ -0,0 +1,50 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Box } from '../../../components/Flex';
+import { Badge } from '../../Components/Badge';
+import { RatingPreview } from './StyledColumnWizardStyleSection/Components/StyledColumnRatingPreview';
+import { WIZARD_TYPE_SELECTION_PREVIEW_FRAME_CLASS } from '../../Wizard/WizardTypeSelection';
+const THUMBNAIL_FRAME_CLASS = WIZARD_TYPE_SELECTION_PREVIEW_FRAME_CLASS;
+const THUMBNAIL_SVG_CLASS = 'twa:block twa:h-[22px] twa:w-full';
+const DEFAULT_BAR = 'var(--ab-color-accent, #07c)';
+const DEFAULT_TRACK = 'color-mix(in srgb, var(--ab-color-foreground) 30%, transparent)';
+const DEFAULT_MARKER = 'var(--ab-color-foreground, #333)';
+const flagEmoji = (countryCodeAlpha2) => {
+    const cc = countryCodeAlpha2.toUpperCase();
+    if (cc.length !== 2) {
+        return cc;
+    }
+    const regionalIndicatorBase = 0x1f1a5;
+    return String.fromCodePoint(regionalIndicatorBase + cc.charCodeAt(0), regionalIndicatorBase + cc.charCodeAt(1));
+};
+const BadgeThumbnail = () => (_jsx(Box, { className: `${THUMBNAIL_FRAME_CLASS} twa:justify-start`, children: _jsxs("div", { className: "ab-Badge__wrapper ab-Badge__wrapper--truncate", style: { gap: 4 }, children: [_jsx(Badge, { pillStyle: { BackColor: '#e8f5e9', ForeColor: '#2e7d32' }, shape: "Pill", density: "Compact", children: "Buy" }), _jsx(Badge, { pillStyle: { BackColor: '#ffebee', ForeColor: '#c62828' }, shape: "Pill", density: "Compact", children: "Sell" })] }) }));
+const IconThumbnail = () => (_jsx(Box, { className: THUMBNAIL_FRAME_CLASS, style: { gap: 10 }, children: ['US', 'GB', 'FR'].map((code) => (_jsx("span", { className: "ab-IconStyle__glyph", style: {
+            fontSize: 18,
+            lineHeight: 1,
+            display: 'inline-flex',
+            alignItems: 'center',
+            justifyContent: 'center',
+        }, children: flagEmoji(code) }, code))) }));
+const RatingThumbnail = () => (_jsx(Box, { className: THUMBNAIL_FRAME_CLASS, children: _jsx(RatingPreview, { rating: { Max: 5, AllowHalf: true }, value: 3.5 }) }));
+const GradientThumbnail = () => (_jsx(Box, { className: `${THUMBNAIL_FRAME_CLASS} twa:gap-1 twa:px-1`, children: [
+        { label: '42', background: '#63be7b' },
+        { label: '68', background: '#ffeb84' },
+        { label: '91', background: '#f8696b' },
+    ].map((cell) => (_jsx(Box, { className: "twa:flex-1 twa:rounded-sm twa:px-1 twa:py-0.5 twa:text-center twa:text-2 twa:leading-tight", style: { background: cell.background, color: '#1a1a1a' }, children: cell.label }, cell.label))) }));
+const PercentBarThumbnail = () => (_jsx(Box, { className: THUMBNAIL_FRAME_CLASS, children: _jsx(Box, { className: "twa:relative twa:h-[6px] twa:w-full twa:rounded-sm", style: { background: DEFAULT_TRACK }, children: _jsx(Box, { className: "twa:absolute twa:top-0 twa:h-full twa:rounded-sm", style: { left: '8%', width: '62%', background: DEFAULT_BAR } }) }) }));
+const BulletThumbnail = () => (_jsx(Box, { className: THUMBNAIL_FRAME_CLASS, children: _jsxs("svg", { className: THUMBNAIL_SVG_CLASS, viewBox: "0 0 100 22", preserveAspectRatio: "none", "aria-hidden": true, children: [_jsx("rect", { x: "0", y: "2", width: "33", height: "18", fill: "#f8696b", opacity: "0.45" }), _jsx("rect", { x: "33", y: "2", width: "34", height: "18", fill: "#ffeb84", opacity: "0.45" }), _jsx("rect", { x: "67", y: "2", width: "33", height: "18", fill: "#63be7b", opacity: "0.45" }), _jsx("rect", { x: "4", y: "7", width: "52", height: "8", rx: "1", fill: DEFAULT_BAR }), _jsx("line", { x1: "78", y1: "3", x2: "78", y2: "19", stroke: DEFAULT_MARKER, strokeWidth: "2.5", vectorEffect: "non-scaling-stroke" })] }) }));
+const RangeBarThumbnail = () => (_jsx(Box, { className: THUMBNAIL_FRAME_CLASS, children: _jsxs("svg", { className: THUMBNAIL_SVG_CLASS, viewBox: "0 0 100 22", preserveAspectRatio: "none", "aria-hidden": true, children: [_jsx("rect", { x: "0", y: "0", width: "100", height: "22", fill: "transparent" }), _jsx("rect", { x: "2", y: "8", width: "96", height: "6", rx: "1", fill: DEFAULT_TRACK }), _jsx("line", { x1: "38", y1: "4", x2: "38", y2: "18", stroke: DEFAULT_MARKER, strokeWidth: "2", vectorEffect: "non-scaling-stroke" }), _jsx("polygon", { points: "72,4 82,11 72,18", fill: DEFAULT_BAR })] }) }));
+const SparklineThumbnail = () => (_jsx(Box, { className: THUMBNAIL_FRAME_CLASS, children: _jsxs("svg", { className: THUMBNAIL_SVG_CLASS, viewBox: "0 0 100 22", preserveAspectRatio: "none", "aria-hidden": true, children: [_jsx("polyline", { points: "0,16 12,12 24,14 36,8 48,10 60,4 72,7 84,3 100,6", fill: "none", stroke: DEFAULT_BAR, strokeWidth: "1.75", vectorEffect: "non-scaling-stroke" }), _jsx("polygon", { points: "0,22 0,16 12,12 24,14 36,8 48,10 60,4 72,7 84,3 100,6 100,22", fill: DEFAULT_BAR, opacity: "0.15" })] }) }));
+const THUMBNAIL_BY_TYPE = {
+    badge: BadgeThumbnail,
+    icon: IconThumbnail,
+    rating: RatingThumbnail,
+    gradient: GradientThumbnail,
+    percent: PercentBarThumbnail,
+    bullet: BulletThumbnail,
+    rangeBar: RangeBarThumbnail,
+    sparkline: SparklineThumbnail,
+};
+export const StyledColumnTypeThumbnail = ({ type }) => {
+    const Thumbnail = THUMBNAIL_BY_TYPE[type];
+    return (_jsx(Box, { "aria-hidden": true, className: "twa:w-full", children: _jsx(Thumbnail, {}) }));
+};

package/src/View/StyledColumn/Wizard/StyledColumnWizard.d.ts

@@ -4,4 +4,6 @@ import { StyledColumn } from '../../../AdaptableState/StyledColumnState';
 export interface StyledColumnWizardProps extends AdaptableOnePageWizardProps<StyledColumn> {
     isNew: boolean;
 }
+/** First wizard step to open when editing an existing Styled Column (column menu, settings list, etc.). */
+export declare const getStyledColumnEditDefaultSectionName: (styledColumn: StyledColumn) => string;
 export declare const StyledColumnWizard: (props: StyledColumnWizardProps) => React.JSX.Element;