@adaptabletools/adaptable 22.1.1 → 23.0.0-canary.1

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

@@ -1,135 +1,192 @@
-import * as React from 'react';
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import DropdownButton from '../../../components/DropdownButton';
 import ErrorBox from '../../../components/ErrorBox';
 import FormLayout, { FormRow } from '../../../components/FormLayout';
 import HelpBlock from '../../../components/HelpBlock';
 import SimpleButton from '../../../components/SimpleButton';
-import { Tabs } from '../../../components/Tabs';
+import { Tag } from '../../../components/Tag';
 import ObjectFactory from '../../../Utilities/ObjectFactory';
 import { AdaptableIconSelector } from '../../Components/AdaptableIconSelector';
 import { PredicateEditor } from '../../Components/PredicateEditor/PredicateEditor';
-import { StyleComponent } from '../../Components/StyleComponent';
 import { useOnePageAdaptableWizardContext } from '../../Wizard/OnePageAdaptableWizard';
 import { StyledColumnBadgePreview } from './StyledColumnWizardStyleSection/Components/StyledColumnBadgePreview';
 import { Badge } from '../../Components/Badge';
 import { AdaptableIconComponent } from '../../Components/AdaptableIconComponent';
 import { DEFAULT_INTEGER_DISPLAY_VALUE, DEFAULT_STRING_DISPLAY_VALUE, } from '../../../Utilities/Constants/GeneralConstants';
-import { Accordion } from '../../../components/Accordion';
 import { CheckBox } from '../../../components/CheckBox';
 import { Flex, Box } from '../../../components/Flex';
+import Radio, { RadioGroup } from '../../../components/Radio';
+import { NumberInput } from '../../../components/Input/NumberInput';
+import { Toggle, ToggleGroup } from '../../../components/Toggle';
+import { BadgePillStyleEditor } from './BadgePillStyleEditor';
+import { renderCellStyleSummaryTags, StyledColumnCellStyleEditor, } from './StyledColumnSliceStyleEditors';
+import { Card } from '../../../components/Card';
+const BADGE_STYLE_FORM_SIZES = ['200px', '1fr'];
+const SHAPE_CHOICES = [
+    { value: 'Pill', label: 'Pill' },
+    { value: 'Rounded', label: 'Rounded' },
+    { value: 'Square', label: 'Square' },
+];
+const DENSITY_CHOICES = [
+    { value: 'Compact', label: 'Compact', hint: 'Tight padding for dense grids' },
+    { value: 'Normal', label: 'Normal', hint: 'Balanced — default' },
+    { value: 'Comfortable', label: 'Comfortable', hint: 'Looser, for low-density grids' },
+];
+const OVERFLOW_CHOICES = [
+    { value: 'Truncate', label: 'Truncate', hint: 'Single line; cell clips overflow' },
+    { value: 'Wrap', label: 'Wrap', hint: 'Wrap onto subsequent lines' },
+    { value: 'Scroll', label: 'Scroll', hint: 'Single line; cell scrolls horizontally' },
+];
 const BadgeEditor = (props) => {
     const { api } = useOnePageAdaptableWizardContext();
-    const { badge, columnId, onChange } = props;
-    // badges evaluate predicate per value
+    const { badge, columnId, onChange, density, index } = props;
     const predicateDefs = api.styledColumnApi.internalApi.getBadgePredicateDefsForColumn(columnId);
     const dataType = api.columnApi.getColumnDataTypeForColumnId(columnId);
     const previewValue = dataType === 'number' || dataType == 'numberArray'
         ? DEFAULT_INTEGER_DISPLAY_VALUE
         : DEFAULT_STRING_DISPLAY_VALUE;
-    return (React.createElement(Flex, { className: "ab-Badge-Definition-Editor twa:mb-[15px] twa:p-3" },
-        React.createElement(Box, { className: "twa:flex-1" },
-            React.createElement(FormLayout, null,
-                React.createElement(FormRow, { label: "Preview" },
-                    React.createElement(Badge, { adaptableStyle: badge.Style, icon: badge.Icon, iconPosition: badge.IconPosition }, previewValue)),
-                React.createElement(FormRow, { label: "Style" },
-                    React.createElement(HelpBlock, { className: "twa:text-2 twa:mb-1 twa:mt-2" }, "Select the Style for the Badge"),
-                    ' ',
-                    React.createElement(Accordion, { title: "Edit Badge Style" },
-                        React.createElement(StyleComponent, { showFontSizeAs: "radio", headless: true, hidePreview: true, api: api, Style: badge.Style ?? {}, UpdateStyle: (Style) => {
-                                onChange({
-                                    ...badge,
-                                    Style,
-                                });
-                            } }))),
-                React.createElement(FormRow, { label: 'Predicate' }, columnId ? (React.createElement(React.Fragment, null,
-                    React.createElement(HelpBlock, { className: "twa:text-2 twa:mb-1 twa:mt-2" }, "Create (optional) Rule for when the Badge is displayed; if no Rule provided Badge will always display (unless overriden by another Rule)"),
-                    React.createElement(PredicateEditor, { columnId: columnId, predicate: badge.Predicate, predicateDefs: predicateDefs, placeholder: "No Predicate Selected", onChange: (predicate) => {
-                            onChange({
-                                ...badge,
-                                Predicate: predicate,
-                            });
-                        }, onClear: () => onChange({
-                            ...badge,
-                            Predicate: undefined,
-                        }) }))) : (React.createElement(ErrorBox, null, "Select a column first"))),
-                React.createElement(FormRow, { label: "Icon" },
-                    React.createElement(HelpBlock, { className: "twa:text-2 twa:mb-1 twa:mt-2" }, "Select (optional) Icon (and Icon position) to display in the Badge"),
-                    ' ',
-                    // for now, only show for system icons the
-                    !badge.Icon || 'name' in badge.Icon ? (React.createElement(AdaptableIconSelector, { value: badge?.Icon && 'name' in badge?.Icon ? badge.Icon.name : undefined, onChange: (iconName) => {
-                            if (iconName) {
-                                onChange({
-                                    ...badge,
-                                    Icon: {
-                                        name: iconName,
+    const currentShape = badge.Shape ?? 'Rounded';
+    return (_jsxs(Box, { className: "ab-Badge-Definition-Editor twa:mb-3 twa:rounded-standard twa:border twa:border-border twa:overflow-hidden twa:shadow-sm", children: [_jsxs(Flex, { alignItems: "center", className: "ab-Badge-Definition-Editor__header twa:px-3 twa:py-2 twa:border-b twa:border-border twa:gap-2", children: [_jsx(Box, { className: "twa:flex-1 twa:font-medium twa:text-3", children: `Badge ${index + 1}` }), _jsx(SimpleButton, { icon: "delete", variant: "text", tooltip: "Delete badge", onClick: props.onDelete })] }), _jsx(Box, { className: "twa:p-3", children: _jsxs(FormLayout, { children: [_jsx(FormRow, { label: "Preview", children: _jsx(Badge, { pillStyle: badge.PillStyle, icon: badge.Icon, iconPosition: badge.IconPosition, shape: badge.Shape, density: density, iconGap: badge.IconGap, children: badge.IconOnly ? '' : previewValue }) }), _jsx(FormRow, { label: "Shape", children: _jsx(Box, { className: "twa:ml-2", children: _jsx(RadioGroup, { orientation: "horizontal", name: `ab-badge-shape-${columnId}`, value: currentShape, onRadioChange: (value) => onChange({ ...badge, Shape: value }), className: "twa:gap-3", children: SHAPE_CHOICES.map((choice) => (_jsx(Radio, { value: choice.value, children: choice.label }, choice.value))) }) }) }), _jsx(FormRow, { label: "Style", children: _jsx(BadgePillStyleEditor, { api: api, value: badge.PillStyle, onChange: (next) => {
+                                    if (next) {
+                                        onChange({ ...badge, PillStyle: next });
+                                    }
+                                    else {
+                                        const cleaned = { ...badge };
+                                        delete cleaned.PillStyle;
+                                        onChange(cleaned);
+                                    }
+                                } }) }), _jsx(FormRow, { label: 'Rule', children: columnId ? (_jsxs(_Fragment, { children: [_jsx(HelpBlock, { className: "twa:text-2 twa:mb-1 twa:mt-2", children: "Create (optional) Rule for when the Badge is displayed; if no Rule provided Badge will always display (unless overriden by another Rule)" }), _jsx(PredicateEditor, { columnId: columnId, predicate: badge.Predicate, predicateDefs: predicateDefs, placeholder: "No Predicate Selected", onChange: (predicate) => {
+                                            onChange({
+                                                ...badge,
+                                                Predicate: predicate,
+                                            });
+                                        }, onClear: () => onChange({
+                                            ...badge,
+                                            Predicate: undefined,
+                                        }) })] })) : (_jsx(ErrorBox, { children: "Select a column first" })) }), _jsxs(FormRow, { label: "Icon", children: [_jsx(HelpBlock, { className: "twa:text-2 twa:mb-1 twa:mt-2", children: "Select (optional) Icon (and Icon position) to display in the Badge" }), ' ', !badge.Icon || 'name' in badge.Icon ? (_jsx(AdaptableIconSelector, { value: badge?.Icon && 'name' in badge?.Icon ? badge.Icon.name : undefined, onChange: (iconName) => {
+                                        if (iconName) {
+                                            onChange({
+                                                ...badge,
+                                                Icon: {
+                                                    name: iconName,
+                                                },
+                                            });
+                                        }
+                                        else {
+                                            onChange({
+                                                ...badge,
+                                                Icon: undefined,
+                                            });
+                                        }
+                                    } })) : (_jsx(AdaptableIconComponent, { icon: badge.Icon }))] }), badge.Icon && (_jsx(FormRow, { label: "Icon Position", children: _jsx(DropdownButton, { columns: ['label'], items: [
+                                    {
+                                        label: 'Start',
+                                        onClick: () => onChange({ ...badge, IconPosition: 'Start' }),
                                     },
-                                });
-                            }
-                            else {
-                                onChange({
-                                    ...badge,
-                                    Icon: undefined,
-                                });
-                            }
-                        } })) : (React.createElement(AdaptableIconComponent, { icon: badge.Icon }))),
-                badge.Icon && (React.createElement(FormRow, { label: "Icon Position" },
-                    React.createElement(DropdownButton, { columns: ['label'], items: [
-                            {
-                                label: 'Start',
-                                onClick: () => onChange({ ...badge, IconPosition: 'Start' }),
-                            },
-                            {
-                                label: 'End',
-                                onClick: () => onChange({ ...badge, IconPosition: 'End' }),
-                            },
-                        ] }, badge.IconPosition ?? 'Start'))),
-                badge.Icon && (React.createElement(FormRow, { label: "Show Icon Only" },
-                    React.createElement(CheckBox, { checked: badge.IconOnly, 
-                        // onClick=()=> onChange({ ...badge, IconPosition: 'End' })
-                        onClick: () => onChange({ ...badge, IconOnly: !badge.IconOnly }) }))))),
-        React.createElement(Flex, { className: "twa:justify-end" },
-            React.createElement(SimpleButton, { icon: "delete", onClick: props.onDelete }))));
+                                    {
+                                        label: 'End',
+                                        onClick: () => onChange({ ...badge, IconPosition: 'End' }),
+                                    },
+                                ], children: badge.IconPosition ?? 'Start' }) })), badge.Icon && (_jsx(FormRow, { label: "Show Icon Only", children: _jsx(CheckBox, { checked: badge.IconOnly, onClick: () => onChange({ ...badge, IconOnly: !badge.IconOnly }) }) })), badge.Icon && !badge.IconOnly && (_jsx(FormRow, { label: "Icon Gap", children: _jsxs(Flex, { alignItems: "center", className: "twa:ml-2 twa:gap-2", children: [_jsx(NumberInput, { value: badge.IconGap ?? '', placeholder: "auto", step: 1, min: 0, style: { width: 70 }, onChange: (value) => {
+                                            onChange({
+                                                ...badge,
+                                                IconGap: typeof value === 'number' && value >= 0 ? value : undefined,
+                                            });
+                                        } }), _jsx(Box, { className: "twa:text-xs twa:opacity-70", children: "px between icon and text \u2014 leave blank to follow Density" })] }) }))] }) })] }));
 };
 export const renderBadgeSummary = (styledColumn) => {
-    return React.createElement(StyledColumnBadgePreview, { data: styledColumn });
+    return _jsx(StyledColumnBadgePreview, { data: styledColumn });
 };
 export const StyledColumnBadgeSection = (props) => {
     const { data } = useOnePageAdaptableWizardContext();
-    const badges = data?.BadgeStyle?.Badges ?? [];
-    return (React.createElement(Tabs, { style: { height: '100%' } },
-        React.createElement(Tabs.Tab, null, "Badges"),
-        React.createElement(Tabs.Content, null,
-            React.createElement(Flex, { className: "twa:justify-end" },
-                React.createElement(SimpleButton, { icon: "plus", onClick: () => {
+    const badgeStyle = data?.BadgeStyle ?? {};
+    const badges = badgeStyle.Badges ?? [];
+    const currentDensity = badgeStyle.Density ?? 'Normal';
+    return (_jsxs(Box, { children: [_jsx(Flex, { className: "twa:justify-end", children: _jsx(SimpleButton, { icon: "plus", onClick: () => {
                         props.onChange({
                             ...data,
                             BadgeStyle: {
+                                ...badgeStyle,
                                 Badges: [...badges, ObjectFactory.CreateDefaultStyledColumnBadge()],
                             },
                         });
-                    } }, "Add Badge")),
-            React.createElement(Flex, { flexDirection: "column", className: "twa:p-2" }, badges.map((badge, index) => {
-                const handleEditBadge = (badge) => {
-                    const newBadges = [...badges];
-                    newBadges[index] = badge;
-                    props.onChange({
-                        ...data,
-                        BadgeStyle: {
-                            ...data.BadgeStyle,
-                            Badges: newBadges,
-                        },
-                    });
-                };
-                return (React.createElement(BadgeEditor, { key: index, badge: badge, columnId: data.ColumnId, onChange: handleEditBadge, onDelete: () => {
+                    }, children: "Add Badge" }) }), _jsx(Flex, { flexDirection: "column", className: "twa:p-2", children: badges.map((badge, index) => {
+                    const handleEditBadge = (badge) => {
                         const newBadges = [...badges];
-                        newBadges.splice(index, 1);
+                        newBadges[index] = badge;
                         props.onChange({
                             ...data,
                             BadgeStyle: {
-                                ...data.BadgeStyle,
+                                ...badgeStyle,
                                 Badges: newBadges,
                             },
                         });
-                    } }));
-            })))));
+                    };
+                    return (_jsx(BadgeEditor, { index: index, badge: badge, density: currentDensity, columnId: data.ColumnId, onChange: handleEditBadge, onDelete: () => {
+                            const newBadges = [...badges];
+                            newBadges.splice(index, 1);
+                            props.onChange({
+                                ...data,
+                                BadgeStyle: {
+                                    ...badgeStyle,
+                                    Badges: newBadges,
+                                },
+                            });
+                        } }, index));
+                }) })] }));
+};
+export const StyledColumnBadgeStyleSection = (props) => {
+    const { data, api } = useOnePageAdaptableWizardContext();
+    const badgeStyle = data?.BadgeStyle ?? {};
+    const disabled = !data?.ColumnId;
+    const dataType = data?.ColumnId
+        ? api.columnApi.getColumnDataTypeForColumnId(data.ColumnId)
+        : undefined;
+    const isArrayColumn = dataType === 'numberArray' || dataType === 'textArray';
+    const updateBadgeStyle = (patch) => {
+        props.onChange({
+            ...data,
+            BadgeStyle: { ...badgeStyle, ...patch },
+        });
+    };
+    const currentDensity = badgeStyle.Density ?? 'Normal';
+    const currentOverflow = badgeStyle.OverflowMode ?? 'Truncate';
+    const currentAlignment = badgeStyle.Font?.Alignment;
+    const updateBadgeRowAlignment = (alignment) => {
+        const nextFont = alignment ? { Alignment: alignment } : undefined;
+        if (nextFont) {
+            updateBadgeStyle({ Font: nextFont });
+        }
+        else {
+            const cleaned = { ...badgeStyle };
+            delete cleaned.Font;
+            props.onChange({ ...data, BadgeStyle: cleaned });
+        }
+    };
+    return (_jsxs(Box, { children: [_jsxs(Card, { shadow: false, className: "twa:mb-3", children: [_jsxs(Card.Title, { children: [_jsx(Box, { className: "twa:font-medium", children: "Cell Density" }), _jsx(Box, { className: "twa:text-xs twa:opacity-70 twa:font-normal twa:max-w-[520px]", children: "Padding in cells containing Badge" })] }), _jsx(Card.Body, { children: _jsx(RadioGroup, { orientation: "vertical", name: "ab-badgestyle-density", value: currentDensity, onRadioChange: (value) => updateBadgeStyle({ Density: value }), children: DENSITY_CHOICES.map((choice) => (_jsx(Radio, { value: choice.value, disabled: disabled, children: _jsxs(Flex, { alignItems: "center", children: [_jsx(Box, { className: "twa:min-w-[110px]", children: choice.label }), _jsx(Box, { className: "twa:text-xs twa:opacity-70", children: choice.hint })] }) }, choice.value))) }) })] }), isArrayColumn && (_jsxs(_Fragment, { children: [_jsxs(Card, { shadow: false, className: "twa:mb-3", children: [_jsxs(Card.Title, { children: [_jsx(Box, { className: "twa:font-medium", children: "Inter-badge spacing" }), _jsx(Box, { className: "twa:text-xs twa:opacity-70 twa:font-normal twa:max-w-[520px]", children: "Set the spacing between adjacent badges" })] }), _jsx(Card.Body, { children: _jsx(FormLayout, { sizes: [...BADGE_STYLE_FORM_SIZES], children: _jsx(FormRow, { label: "Inter-badge spacing", children: _jsxs(Flex, { alignItems: "center", className: "twa:ml-2 twa:gap-2", children: [_jsx(NumberInput, { disabled: disabled, value: badgeStyle.Spacing ?? '', placeholder: "4", step: 1, min: 0, style: { width: 70 }, onChange: (value) => {
+                                                        updateBadgeStyle({
+                                                            Spacing: typeof value === 'number' && value >= 0 ? value : undefined,
+                                                        });
+                                                    } }), _jsx(Box, { className: "twa:text-xs twa:opacity-70", children: "px between adjacent badges" })] }) }) }) })] }), _jsxs(Card, { shadow: false, className: "twa:mb-3", children: [_jsxs(Card.Title, { children: [_jsx(Box, { className: "twa:font-medium", children: "Overflow" }), _jsx(Box, { className: "twa:text-xs twa:opacity-70 twa:font-normal twa:max-w-[520px]", children: "Configure the overflow mode for badges" })] }), _jsx(Card.Body, { children: _jsx(FormLayout, { sizes: [...BADGE_STYLE_FORM_SIZES], children: _jsx(FormRow, { label: "Overflow mode", children: _jsx(Box, { className: "twa:ml-2", children: _jsx(RadioGroup, { orientation: "vertical", name: "ab-badgestyle-overflow", value: currentOverflow, onRadioChange: (value) => updateBadgeStyle({ OverflowMode: value }), children: OVERFLOW_CHOICES.map((choice) => (_jsx(Radio, { value: choice.value, disabled: disabled, children: _jsxs(Flex, { alignItems: "center", children: [_jsx(Box, { className: "twa:min-w-[110px]", children: choice.label }), _jsx(Box, { className: "twa:text-xs twa:opacity-70", children: choice.hint })] }) }, choice.value))) }) }) }) }) })] })] })), _jsxs(Card, { shadow: false, children: [_jsxs(Card.Title, { children: [_jsx(Box, { className: "twa:font-medium", children: "Cell Style" }), _jsx(Box, { className: "twa:text-xs twa:opacity-70 twa:font-normal twa:max-w-[520px]", children: "Styling and alignment to apply to Badge cells (overrides Format Column)" })] }), _jsxs(Card.Body, { children: [_jsx(FormLayout, { sizes: [...BADGE_STYLE_FORM_SIZES], children: _jsx(FormRow, { label: "Alignment:", children: _jsx(Flex, { alignItems: "center", className: "twa:gap-2", children: _jsxs(ToggleGroup, { children: [_jsx(Toggle, { icon: "align-left", pressed: currentAlignment === 'Left', onPressedChange: (pressed) => updateBadgeRowAlignment(pressed ? 'Left' : undefined) }), _jsx(Toggle, { icon: "align-center", pressed: currentAlignment === 'Center', onPressedChange: (pressed) => updateBadgeRowAlignment(pressed ? 'Center' : undefined) }), _jsx(Toggle, { icon: "align-right", pressed: currentAlignment === 'Right', onPressedChange: (pressed) => updateBadgeRowAlignment(pressed ? 'Right' : undefined) })] }) }) }) }), _jsx(Box, { className: "twa:mt-3", children: _jsx(StyledColumnCellStyleEditor, { api: api, disabled: disabled, value: badgeStyle.Cell, onChange: (next) => {
+                                        if (next) {
+                                            updateBadgeStyle({ Cell: next });
+                                        }
+                                        else {
+                                            const cleaned = { ...badgeStyle };
+                                            delete cleaned.Cell;
+                                            props.onChange({ ...data, BadgeStyle: cleaned });
+                                        }
+                                    } }) })] })] })] }));
+};
+export const renderBadgeStyleSummary = (styledColumn) => {
+    const badgeStyle = styledColumn?.BadgeStyle;
+    if (!badgeStyle) {
+        return _jsx(Tag, { children: "\u2014" });
+    }
+    const density = badgeStyle.Density ?? 'Normal';
+    const spacing = typeof badgeStyle.Spacing === 'number' ? badgeStyle.Spacing : null;
+    const overflow = badgeStyle.OverflowMode ?? 'Truncate';
+    const alignment = badgeStyle.Font?.Alignment;
+    const cellTags = renderCellStyleSummaryTags(badgeStyle.Cell);
+    return (_jsxs(Flex, { alignItems: "center", className: "twa:flex-wrap twa:gap-2", children: [_jsxs(Box, { children: ["Density: ", _jsx(Tag, { children: density })] }), spacing != null && (_jsxs(Box, { children: ["Spacing: ", _jsxs(Tag, { children: [spacing, "px"] })] })), _jsxs(Box, { children: ["Overflow: ", _jsx(Tag, { children: overflow })] }), alignment && (_jsxs(Box, { children: ["Align: ", _jsx(Tag, { children: alignment })] })), cellTags && _jsxs(Box, { children: ["Cell: ", cellTags] })] }));
 };

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

@@ -0,0 +1,49 @@
+import * as React from 'react';
+import { AdaptableApi } from '../../../Api/AdaptableApi';
+import { CellBoxStyle, CellFontStyle } from '../../../AdaptableState/Common/AdaptableStyle';
+export interface StyledColumnFontStyleEditorProps {
+    api: AdaptableApi;
+    /** Current Font slice (may be undefined / partial). */
+    value: CellFontStyle | undefined;
+    /**
+     * Called whenever the Font slice changes. Pass `undefined` to clear it
+     * entirely (e.g. when the user resets all fields).
+     */
+    onChange: (next: CellFontStyle | undefined) => void;
+    disabled?: boolean;
+    /**
+     * When true, the Alignment row is omitted entirely. Used by Styled Columns
+     * that own horizontal alignment elsewhere (e.g. Percent Bar's "Auto / Left /
+     * Center / Right" controls drive `CellTextAlignment`, so showing a second
+     * Alignment row inside the font editor is confusing).
+     */
+    hideAlignment?: boolean;
+}
+export declare const StyledColumnFontStyleEditor: React.FunctionComponent<StyledColumnFontStyleEditorProps>;
+export interface StyledColumnCellStyleEditorProps {
+    api: AdaptableApi;
+    /** Current Cell slice (may be undefined / partial). */
+    value: CellBoxStyle | undefined;
+    /**
+     * Called whenever the Cell slice changes. Pass `undefined` to clear it
+     * entirely (e.g. when the user resets all fields).
+     */
+    onChange: (next: CellBoxStyle | undefined) => void;
+    disabled?: boolean;
+}
+/**
+ * Compact editor for the `Cell` slice (`CellBoxStyle`).
+ *
+ * Used by Styled Column wizards (Rating, Sparkline) that own a `Cell?`
+ * slot. Any change emits a new `CellBoxStyle` (or `undefined` once every
+ * key is unset) which the host wizard merges back into its `*Style` patch.
+ */
+export declare const StyledColumnCellStyleEditor: React.FunctionComponent<StyledColumnCellStyleEditorProps>;
+/**
+ * Compact summary tags for the Font slice; used by wizard summary panels.
+ */
+export declare const renderFontStyleSummaryTags: (font: CellFontStyle | undefined) => React.JSX.Element | null;
+/**
+ * Compact summary tags for the Cell slice; used by wizard summary panels.
+ */
+export declare const renderCellStyleSummaryTags: (cell: CellBoxStyle | undefined) => React.JSX.Element | null;

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

@@ -0,0 +1,138 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { CheckBox } from '../../../components/CheckBox';
+import { ColorPicker } 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 { Toggle, ToggleGroup } from '../../../components/Toggle';
+const FORM_SIZES = ['200px', '1fr'];
+const FONT_SIZE_ITEMS = [
+    { value: '', label: 'Default' },
+    { value: 'XSmall', label: 'XSmall' },
+    { value: 'Small', label: 'Small' },
+    { value: 'Medium', label: 'Medium' },
+    { value: 'Large', label: 'Large' },
+    { value: 'XLarge', label: 'XLarge' },
+];
+/**
+ * Compact editor for the `Font` slice (`CellFontStyle`).
+ *
+ * Used by Styled Column wizards (Gradient, Percent Bar, Bullet Chart) that
+ * own a `Font?` slot. Any change emits a new `CellFontStyle` (or
+ * `undefined` once every key is unset) which the host wizard merges back
+ * into its `*Style` patch.
+ */
+const disabledClassName = (disabled) => disabled ? 'twa:opacity-50 twa:pointer-events-none' : '';
+export const StyledColumnFontStyleEditor = (props) => {
+    const font = props.value ?? {};
+    const { disabled, hideAlignment } = props;
+    const disabledClass = disabledClassName(disabled);
+    const update = (patch) => {
+        const next = { ...font, ...patch };
+        // strip empty/undefined keys
+        Object.keys(next).forEach((k) => {
+            const v = next[k];
+            if (v === undefined || v === null || v === '') {
+                delete next[k];
+            }
+        });
+        if (Object.keys(next).length === 0) {
+            props.onChange(undefined);
+        }
+        else {
+            props.onChange(next);
+        }
+    };
+    const onForeColorChecked = (checked) => {
+        if (checked) {
+            update({ ForeColor: font.ForeColor ?? '#000000' });
+        }
+        else {
+            update({ ForeColor: undefined });
+        }
+    };
+    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({
+                                            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) })] }) }) }) }))] }) }));
+};
+/**
+ * Compact editor for the `Cell` slice (`CellBoxStyle`).
+ *
+ * Used by Styled Column wizards (Rating, Sparkline) that own a `Cell?`
+ * slot. Any change emits a new `CellBoxStyle` (or `undefined` once every
+ * key is unset) which the host wizard merges back into its `*Style` patch.
+ */
+export const StyledColumnCellStyleEditor = (props) => {
+    const cell = props.value ?? {};
+    const { disabled } = props;
+    const update = (patch) => {
+        const next = { ...cell, ...patch };
+        Object.keys(next).forEach((k) => {
+            const v = next[k];
+            if (v === undefined || v === null || v === '') {
+                delete next[k];
+            }
+        });
+        if (Object.keys(next).length === 0) {
+            props.onChange(undefined);
+        }
+        else {
+            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" })] }) })] }) }));
+};
+/**
+ * Compact summary tags for the Font slice; used by wizard summary panels.
+ */
+export const renderFontStyleSummaryTags = (font) => {
+    if (!font)
+        return null;
+    const tags = [];
+    if (font.ForeColor) {
+        tags.push(_jsxs(Tag, { children: ["Text ", font.ForeColor] }, "fg"));
+    }
+    if (font.FontWeight === 'Bold') {
+        tags.push(_jsx(Tag, { children: "Bold" }, "b"));
+    }
+    if (font.FontStyle === 'Italic') {
+        tags.push(_jsx(Tag, { children: "Italic" }, "i"));
+    }
+    if (font.TextDecoration && font.TextDecoration !== 'None') {
+        tags.push(_jsx(Tag, { children: font.TextDecoration }, "td"));
+    }
+    if (font.FontSize) {
+        tags.push(_jsx(Tag, { children: font.FontSize }, "fs"));
+    }
+    if (font.Alignment && font.Alignment !== 'Default') {
+        tags.push(_jsxs(Tag, { children: ["Align ", font.Alignment] }, "al"));
+    }
+    if (tags.length === 0)
+        return null;
+    return (_jsx(Flex, { alignItems: "center", className: "twa:gap-1 twa:flex-wrap", children: tags }));
+};
+/**
+ * Compact summary tags for the Cell slice; used by wizard summary panels.
+ */
+export const renderCellStyleSummaryTags = (cell) => {
+    if (!cell)
+        return null;
+    const tags = [];
+    if (cell.BackColor) {
+        tags.push(_jsxs(Tag, { children: ["Bg ", cell.BackColor] }, "bg"));
+    }
+    if (cell.BorderColor) {
+        tags.push(_jsxs(Tag, { children: ["Border ", cell.BorderColor] }, "bc"));
+    }
+    if (cell.BorderRadius != null) {
+        tags.push(_jsxs(Tag, { children: ["Radius ", cell.BorderRadius, "px"] }, "br"));
+    }
+    if (tags.length === 0)
+        return null;
+    return (_jsx(Flex, { alignItems: "center", className: "twa:gap-1 twa:flex-wrap", children: tags }));
+};

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

@@ -1,5 +1,17 @@
 import * as React from 'react';
 import type { StyledColumn } from '../../../types';
+/**
+ * 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.
+ */
+export declare const renderSparklineSummary: (data: StyledColumn) => React.ReactNode;
+/**
+ * Validation for the Sparkline Settings wizard step.
+ * - Sparkline type must be set (defaulted to `line` so this is mostly a safety net).
+ * - When Min and Max overrides are both provided, Min must be strictly less than Max.
+ */
+export declare const isValidSparklineSettings: (data: StyledColumn) => true | string;
 export declare const StyledColumnSparklineSettingsSection: React.FC<{
     onChange: (data: StyledColumn) => void;
 }>;