@adaptabletools/adaptable-cjs 22.1.1 → 23.0.0-canary.0

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

@@ -1,141 +1,200 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.StyledColumnBadgeSection = exports.renderBadgeSummary = void 0;
+exports.renderBadgeStyleSummary = exports.StyledColumnBadgeStyleSection = exports.StyledColumnBadgeSection = exports.renderBadgeSummary = void 0;
 const tslib_1 = require("tslib");
-const React = tslib_1.__importStar(require("react"));
+const jsx_runtime_1 = require("react/jsx-runtime");
 const DropdownButton_1 = tslib_1.__importDefault(require("../../../components/DropdownButton"));
 const ErrorBox_1 = tslib_1.__importDefault(require("../../../components/ErrorBox"));
 const FormLayout_1 = tslib_1.__importStar(require("../../../components/FormLayout"));
 const HelpBlock_1 = tslib_1.__importDefault(require("../../../components/HelpBlock"));
 const SimpleButton_1 = tslib_1.__importDefault(require("../../../components/SimpleButton"));
-const Tabs_1 = require("../../../components/Tabs");
+const Tag_1 = require("../../../components/Tag");
 const ObjectFactory_1 = tslib_1.__importDefault(require("../../../Utilities/ObjectFactory"));
 const AdaptableIconSelector_1 = require("../../Components/AdaptableIconSelector");
 const PredicateEditor_1 = require("../../Components/PredicateEditor/PredicateEditor");
-const StyleComponent_1 = require("../../Components/StyleComponent");
 const OnePageAdaptableWizard_1 = require("../../Wizard/OnePageAdaptableWizard");
 const StyledColumnBadgePreview_1 = require("./StyledColumnWizardStyleSection/Components/StyledColumnBadgePreview");
 const Badge_1 = require("../../Components/Badge");
 const AdaptableIconComponent_1 = require("../../Components/AdaptableIconComponent");
 const GeneralConstants_1 = require("../../../Utilities/Constants/GeneralConstants");
-const Accordion_1 = require("../../../components/Accordion");
 const CheckBox_1 = require("../../../components/CheckBox");
 const Flex_1 = require("../../../components/Flex");
+const Radio_1 = tslib_1.__importStar(require("../../../components/Radio"));
+const NumberInput_1 = require("../../../components/Input/NumberInput");
+const Toggle_1 = require("../../../components/Toggle");
+const BadgePillStyleEditor_1 = require("./BadgePillStyleEditor");
+const StyledColumnSliceStyleEditors_1 = require("./StyledColumnSliceStyleEditors");
+const Card_1 = require("../../../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 } = (0, OnePageAdaptableWizard_1.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'
         ? GeneralConstants_1.DEFAULT_INTEGER_DISPLAY_VALUE
         : GeneralConstants_1.DEFAULT_STRING_DISPLAY_VALUE;
-    return (React.createElement(Flex_1.Flex, { className: "ab-Badge-Definition-Editor twa:mb-[15px] twa:p-3" },
-        React.createElement(Flex_1.Box, { className: "twa:flex-1" },
-            React.createElement(FormLayout_1.default, null,
-                React.createElement(FormLayout_1.FormRow, { label: "Preview" },
-                    React.createElement(Badge_1.Badge, { adaptableStyle: badge.Style, icon: badge.Icon, iconPosition: badge.IconPosition }, previewValue)),
-                React.createElement(FormLayout_1.FormRow, { label: "Style" },
-                    React.createElement(HelpBlock_1.default, { className: "twa:text-2 twa:mb-1 twa:mt-2" }, "Select the Style for the Badge"),
-                    ' ',
-                    React.createElement(Accordion_1.Accordion, { title: "Edit Badge Style" },
-                        React.createElement(StyleComponent_1.StyleComponent, { showFontSizeAs: "radio", headless: true, hidePreview: true, api: api, Style: badge.Style ?? {}, UpdateStyle: (Style) => {
-                                onChange({
-                                    ...badge,
-                                    Style,
-                                });
-                            } }))),
-                React.createElement(FormLayout_1.FormRow, { label: 'Predicate' }, columnId ? (React.createElement(React.Fragment, null,
-                    React.createElement(HelpBlock_1.default, { 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_1.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_1.default, null, "Select a column first"))),
-                React.createElement(FormLayout_1.FormRow, { label: "Icon" },
-                    React.createElement(HelpBlock_1.default, { 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_1.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 ((0, jsx_runtime_1.jsxs)(Flex_1.Box, { className: "ab-Badge-Definition-Editor twa:mb-3 twa:rounded-standard twa:border twa:border-border twa:overflow-hidden twa:shadow-sm", children: [(0, jsx_runtime_1.jsxs)(Flex_1.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: [(0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:flex-1 twa:font-medium twa:text-3", children: `Badge ${index + 1}` }), (0, jsx_runtime_1.jsx)(SimpleButton_1.default, { icon: "delete", variant: "text", tooltip: "Delete badge", onClick: props.onDelete })] }), (0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:p-3", children: (0, jsx_runtime_1.jsxs)(FormLayout_1.default, { children: [(0, jsx_runtime_1.jsx)(FormLayout_1.FormRow, { label: "Preview", children: (0, jsx_runtime_1.jsx)(Badge_1.Badge, { pillStyle: badge.PillStyle, icon: badge.Icon, iconPosition: badge.IconPosition, shape: badge.Shape, density: density, iconGap: badge.IconGap, children: badge.IconOnly ? '' : previewValue }) }), (0, jsx_runtime_1.jsx)(FormLayout_1.FormRow, { label: "Shape", children: (0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:ml-2", children: (0, jsx_runtime_1.jsx)(Radio_1.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) => ((0, jsx_runtime_1.jsx)(Radio_1.default, { value: choice.value, children: choice.label }, choice.value))) }) }) }), (0, jsx_runtime_1.jsx)(FormLayout_1.FormRow, { label: "Style", children: (0, jsx_runtime_1.jsx)(BadgePillStyleEditor_1.BadgePillStyleEditor, { api: api, value: badge.PillStyle, onChange: (next) => {
+                                    if (next) {
+                                        onChange({ ...badge, PillStyle: next });
+                                    }
+                                    else {
+                                        const cleaned = { ...badge };
+                                        delete cleaned.PillStyle;
+                                        onChange(cleaned);
+                                    }
+                                } }) }), (0, jsx_runtime_1.jsx)(FormLayout_1.FormRow, { label: 'Rule', children: columnId ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(HelpBlock_1.default, { 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)" }), (0, jsx_runtime_1.jsx)(PredicateEditor_1.PredicateEditor, { columnId: columnId, predicate: badge.Predicate, predicateDefs: predicateDefs, placeholder: "No Predicate Selected", onChange: (predicate) => {
+                                            onChange({
+                                                ...badge,
+                                                Predicate: predicate,
+                                            });
+                                        }, onClear: () => onChange({
+                                            ...badge,
+                                            Predicate: undefined,
+                                        }) })] })) : ((0, jsx_runtime_1.jsx)(ErrorBox_1.default, { children: "Select a column first" })) }), (0, jsx_runtime_1.jsxs)(FormLayout_1.FormRow, { label: "Icon", children: [(0, jsx_runtime_1.jsx)(HelpBlock_1.default, { 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 ? ((0, jsx_runtime_1.jsx)(AdaptableIconSelector_1.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,
+                                            });
+                                        }
+                                    } })) : ((0, jsx_runtime_1.jsx)(AdaptableIconComponent_1.AdaptableIconComponent, { icon: badge.Icon }))] }), badge.Icon && ((0, jsx_runtime_1.jsx)(FormLayout_1.FormRow, { label: "Icon Position", children: (0, jsx_runtime_1.jsx)(DropdownButton_1.default, { columns: ['label'], items: [
+                                    {
+                                        label: 'Start',
+                                        onClick: () => onChange({ ...badge, IconPosition: 'Start' }),
                                     },
-                                });
-                            }
-                            else {
-                                onChange({
-                                    ...badge,
-                                    Icon: undefined,
-                                });
-                            }
-                        } })) : (React.createElement(AdaptableIconComponent_1.AdaptableIconComponent, { icon: badge.Icon }))),
-                badge.Icon && (React.createElement(FormLayout_1.FormRow, { label: "Icon Position" },
-                    React.createElement(DropdownButton_1.default, { columns: ['label'], items: [
-                            {
-                                label: 'Start',
-                                onClick: () => onChange({ ...badge, IconPosition: 'Start' }),
-                            },
-                            {
-                                label: 'End',
-                                onClick: () => onChange({ ...badge, IconPosition: 'End' }),
-                            },
-                        ] }, badge.IconPosition ?? 'Start'))),
-                badge.Icon && (React.createElement(FormLayout_1.FormRow, { label: "Show Icon Only" },
-                    React.createElement(CheckBox_1.CheckBox, { checked: badge.IconOnly, 
-                        // onClick=()=> onChange({ ...badge, IconPosition: 'End' })
-                        onClick: () => onChange({ ...badge, IconOnly: !badge.IconOnly }) }))))),
-        React.createElement(Flex_1.Flex, { className: "twa:justify-end" },
-            React.createElement(SimpleButton_1.default, { icon: "delete", onClick: props.onDelete }))));
+                                    {
+                                        label: 'End',
+                                        onClick: () => onChange({ ...badge, IconPosition: 'End' }),
+                                    },
+                                ], children: badge.IconPosition ?? 'Start' }) })), badge.Icon && ((0, jsx_runtime_1.jsx)(FormLayout_1.FormRow, { label: "Show Icon Only", children: (0, jsx_runtime_1.jsx)(CheckBox_1.CheckBox, { checked: badge.IconOnly, onClick: () => onChange({ ...badge, IconOnly: !badge.IconOnly }) }) })), badge.Icon && !badge.IconOnly && ((0, jsx_runtime_1.jsx)(FormLayout_1.FormRow, { label: "Icon Gap", children: (0, jsx_runtime_1.jsxs)(Flex_1.Flex, { alignItems: "center", className: "twa:ml-2 twa:gap-2", children: [(0, jsx_runtime_1.jsx)(NumberInput_1.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,
+                                            });
+                                        } }), (0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:text-xs twa:opacity-70", children: "px between icon and text \u2014 leave blank to follow Density" })] }) }))] }) })] }));
 };
 const renderBadgeSummary = (styledColumn) => {
-    return React.createElement(StyledColumnBadgePreview_1.StyledColumnBadgePreview, { data: styledColumn });
+    return (0, jsx_runtime_1.jsx)(StyledColumnBadgePreview_1.StyledColumnBadgePreview, { data: styledColumn });
 };
 exports.renderBadgeSummary = renderBadgeSummary;
 const StyledColumnBadgeSection = (props) => {
     const { data } = (0, OnePageAdaptableWizard_1.useOnePageAdaptableWizardContext)();
-    const badges = data?.BadgeStyle?.Badges ?? [];
-    return (React.createElement(Tabs_1.Tabs, { style: { height: '100%' } },
-        React.createElement(Tabs_1.Tabs.Tab, null, "Badges"),
-        React.createElement(Tabs_1.Tabs.Content, null,
-            React.createElement(Flex_1.Flex, { className: "twa:justify-end" },
-                React.createElement(SimpleButton_1.default, { icon: "plus", onClick: () => {
+    const badgeStyle = data?.BadgeStyle ?? {};
+    const badges = badgeStyle.Badges ?? [];
+    const currentDensity = badgeStyle.Density ?? 'Normal';
+    return ((0, jsx_runtime_1.jsxs)(Flex_1.Box, { children: [(0, jsx_runtime_1.jsx)(Flex_1.Flex, { className: "twa:justify-end", children: (0, jsx_runtime_1.jsx)(SimpleButton_1.default, { icon: "plus", onClick: () => {
                         props.onChange({
                             ...data,
                             BadgeStyle: {
+                                ...badgeStyle,
                                 Badges: [...badges, ObjectFactory_1.default.CreateDefaultStyledColumnBadge()],
                             },
                         });
-                    } }, "Add Badge")),
-            React.createElement(Flex_1.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" }) }), (0, jsx_runtime_1.jsx)(Flex_1.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 ((0, jsx_runtime_1.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));
+                }) })] }));
 };
 exports.StyledColumnBadgeSection = StyledColumnBadgeSection;
+const StyledColumnBadgeStyleSection = (props) => {
+    const { data, api } = (0, OnePageAdaptableWizard_1.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 ((0, jsx_runtime_1.jsxs)(Flex_1.Box, { children: [(0, jsx_runtime_1.jsxs)(Card_1.Card, { shadow: false, className: "twa:mb-3", children: [(0, jsx_runtime_1.jsxs)(Card_1.Card.Title, { children: [(0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:font-medium", children: "Cell Density" }), (0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:text-xs twa:opacity-70 twa:font-normal twa:max-w-[520px]", children: "Padding in cells containing Badge" })] }), (0, jsx_runtime_1.jsx)(Card_1.Card.Body, { children: (0, jsx_runtime_1.jsx)(Radio_1.RadioGroup, { orientation: "vertical", name: "ab-badgestyle-density", value: currentDensity, onRadioChange: (value) => updateBadgeStyle({ Density: value }), children: DENSITY_CHOICES.map((choice) => ((0, jsx_runtime_1.jsx)(Radio_1.default, { value: choice.value, disabled: disabled, children: (0, jsx_runtime_1.jsxs)(Flex_1.Flex, { alignItems: "center", children: [(0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:min-w-[110px]", children: choice.label }), (0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:text-xs twa:opacity-70", children: choice.hint })] }) }, choice.value))) }) })] }), isArrayColumn && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)(Card_1.Card, { shadow: false, className: "twa:mb-3", children: [(0, jsx_runtime_1.jsxs)(Card_1.Card.Title, { children: [(0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:font-medium", children: "Inter-badge spacing" }), (0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:text-xs twa:opacity-70 twa:font-normal twa:max-w-[520px]", children: "Set the spacing between adjacent badges" })] }), (0, jsx_runtime_1.jsx)(Card_1.Card.Body, { children: (0, jsx_runtime_1.jsx)(FormLayout_1.default, { sizes: [...BADGE_STYLE_FORM_SIZES], children: (0, jsx_runtime_1.jsx)(FormLayout_1.FormRow, { label: "Inter-badge spacing", children: (0, jsx_runtime_1.jsxs)(Flex_1.Flex, { alignItems: "center", className: "twa:ml-2 twa:gap-2", children: [(0, jsx_runtime_1.jsx)(NumberInput_1.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,
+                                                        });
+                                                    } }), (0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:text-xs twa:opacity-70", children: "px between adjacent badges" })] }) }) }) })] }), (0, jsx_runtime_1.jsxs)(Card_1.Card, { shadow: false, className: "twa:mb-3", children: [(0, jsx_runtime_1.jsxs)(Card_1.Card.Title, { children: [(0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:font-medium", children: "Overflow" }), (0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:text-xs twa:opacity-70 twa:font-normal twa:max-w-[520px]", children: "Configure the overflow mode for badges" })] }), (0, jsx_runtime_1.jsx)(Card_1.Card.Body, { children: (0, jsx_runtime_1.jsx)(FormLayout_1.default, { sizes: [...BADGE_STYLE_FORM_SIZES], children: (0, jsx_runtime_1.jsx)(FormLayout_1.FormRow, { label: "Overflow mode", children: (0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:ml-2", children: (0, jsx_runtime_1.jsx)(Radio_1.RadioGroup, { orientation: "vertical", name: "ab-badgestyle-overflow", value: currentOverflow, onRadioChange: (value) => updateBadgeStyle({ OverflowMode: value }), children: OVERFLOW_CHOICES.map((choice) => ((0, jsx_runtime_1.jsx)(Radio_1.default, { value: choice.value, disabled: disabled, children: (0, jsx_runtime_1.jsxs)(Flex_1.Flex, { alignItems: "center", children: [(0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:min-w-[110px]", children: choice.label }), (0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:text-xs twa:opacity-70", children: choice.hint })] }) }, choice.value))) }) }) }) }) })] })] })), (0, jsx_runtime_1.jsxs)(Card_1.Card, { shadow: false, children: [(0, jsx_runtime_1.jsxs)(Card_1.Card.Title, { children: [(0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:font-medium", children: "Cell Style" }), (0, jsx_runtime_1.jsx)(Flex_1.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)" })] }), (0, jsx_runtime_1.jsxs)(Card_1.Card.Body, { children: [(0, jsx_runtime_1.jsx)(FormLayout_1.default, { sizes: [...BADGE_STYLE_FORM_SIZES], children: (0, jsx_runtime_1.jsx)(FormLayout_1.FormRow, { label: "Alignment:", children: (0, jsx_runtime_1.jsx)(Flex_1.Flex, { alignItems: "center", className: "twa:gap-2", children: (0, jsx_runtime_1.jsxs)(Toggle_1.ToggleGroup, { children: [(0, jsx_runtime_1.jsx)(Toggle_1.Toggle, { icon: "align-left", pressed: currentAlignment === 'Left', onPressedChange: (pressed) => updateBadgeRowAlignment(pressed ? 'Left' : undefined) }), (0, jsx_runtime_1.jsx)(Toggle_1.Toggle, { icon: "align-center", pressed: currentAlignment === 'Center', onPressedChange: (pressed) => updateBadgeRowAlignment(pressed ? 'Center' : undefined) }), (0, jsx_runtime_1.jsx)(Toggle_1.Toggle, { icon: "align-right", pressed: currentAlignment === 'Right', onPressedChange: (pressed) => updateBadgeRowAlignment(pressed ? 'Right' : undefined) })] }) }) }) }), (0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:mt-3", children: (0, jsx_runtime_1.jsx)(StyledColumnSliceStyleEditors_1.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 });
+                                        }
+                                    } }) })] })] })] }));
+};
+exports.StyledColumnBadgeStyleSection = StyledColumnBadgeStyleSection;
+const renderBadgeStyleSummary = (styledColumn) => {
+    const badgeStyle = styledColumn?.BadgeStyle;
+    if (!badgeStyle) {
+        return (0, jsx_runtime_1.jsx)(Tag_1.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 = (0, StyledColumnSliceStyleEditors_1.renderCellStyleSummaryTags)(badgeStyle.Cell);
+    return ((0, jsx_runtime_1.jsxs)(Flex_1.Flex, { alignItems: "center", className: "twa:flex-wrap twa:gap-2", children: [(0, jsx_runtime_1.jsxs)(Flex_1.Box, { children: ["Density: ", (0, jsx_runtime_1.jsx)(Tag_1.Tag, { children: density })] }), spacing != null && ((0, jsx_runtime_1.jsxs)(Flex_1.Box, { children: ["Spacing: ", (0, jsx_runtime_1.jsxs)(Tag_1.Tag, { children: [spacing, "px"] })] })), (0, jsx_runtime_1.jsxs)(Flex_1.Box, { children: ["Overflow: ", (0, jsx_runtime_1.jsx)(Tag_1.Tag, { children: overflow })] }), alignment && ((0, jsx_runtime_1.jsxs)(Flex_1.Box, { children: ["Align: ", (0, jsx_runtime_1.jsx)(Tag_1.Tag, { children: alignment })] })), cellTags && (0, jsx_runtime_1.jsxs)(Flex_1.Box, { children: ["Cell: ", cellTags] })] }));
+};
+exports.renderBadgeStyleSummary = renderBadgeStyleSummary;

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,146 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.renderCellStyleSummaryTags = exports.renderFontStyleSummaryTags = exports.StyledColumnCellStyleEditor = exports.StyledColumnFontStyleEditor = void 0;
+const tslib_1 = require("tslib");
+const jsx_runtime_1 = require("react/jsx-runtime");
+const CheckBox_1 = require("../../../components/CheckBox");
+const ColorPicker_1 = require("../../../components/ColorPicker");
+const FormLayout_1 = tslib_1.__importStar(require("../../../components/FormLayout"));
+const Flex_1 = require("../../../components/Flex");
+const NumberInput_1 = require("../../../components/Input/NumberInput");
+const NewSelect_1 = require("../../../components/NewSelect");
+const Tag_1 = require("../../../components/Tag");
+const Toggle_1 = require("../../../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' : '';
+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 ((0, jsx_runtime_1.jsx)(Flex_1.Box, { children: (0, jsx_runtime_1.jsxs)(FormLayout_1.default, { className: "twa:ml-2", sizes: [...FORM_SIZES], children: [(0, jsx_runtime_1.jsx)(FormLayout_1.FormRow, { label: "Text Colour:", children: (0, jsx_runtime_1.jsxs)(Flex_1.Flex, { alignItems: "center", className: "twa:ml-2 twa:gap-2", children: [(0, jsx_runtime_1.jsx)(CheckBox_1.CheckBox, { disabled: disabled, checked: !!font.ForeColor, onChange: (checked) => onForeColorChecked(checked), children: "Set" }), (0, jsx_runtime_1.jsx)(ColorPicker_1.ColorPicker, { disabled: disabled || !font.ForeColor, api: props.api, value: font.ForeColor || '#000000', onChange: (c) => update({ ForeColor: c }) })] }) }), (0, jsx_runtime_1.jsx)(FormLayout_1.FormRow, { label: "Font:", children: (0, jsx_runtime_1.jsx)(Flex_1.Box, { className: disabledClass, children: (0, jsx_runtime_1.jsxs)(Flex_1.Flex, { alignItems: "center", className: "twa:ml-2 twa:gap-2 twa:flex-wrap", children: [(0, jsx_runtime_1.jsxs)(Toggle_1.ToggleGroup, { children: [(0, jsx_runtime_1.jsx)(Toggle_1.Toggle, { pressed: font.FontStyle === 'Italic', onPressedChange: (pressed) => update({ FontStyle: pressed ? 'Italic' : undefined }), icon: "italic" }), (0, jsx_runtime_1.jsx)(Toggle_1.Toggle, { pressed: font.FontWeight === 'Bold', onPressedChange: (pressed) => update({ FontWeight: pressed ? 'Bold' : undefined }), icon: "bold" })] }), (0, jsx_runtime_1.jsxs)(Toggle_1.ToggleGroup, { children: [(0, jsx_runtime_1.jsx)(Toggle_1.Toggle, { pressed: font.TextDecoration === 'Underline', onPressedChange: (pressed) => update({ TextDecoration: pressed ? 'Underline' : undefined }), icon: "underline" }), (0, jsx_runtime_1.jsx)(Toggle_1.Toggle, { pressed: font.TextDecoration === 'LineThrough', onPressedChange: (pressed) => update({ TextDecoration: pressed ? 'LineThrough' : undefined }), icon: "strikethrough" }), (0, jsx_runtime_1.jsx)(Toggle_1.Toggle, { pressed: font.TextDecoration === 'Overline', onPressedChange: (pressed) => update({ TextDecoration: pressed ? 'Overline' : undefined }), icon: "overline" })] }), (0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:w-32", children: (0, jsx_runtime_1.jsx)(NewSelect_1.SingleSelect, { placeholder: "Default size", items: FONT_SIZE_ITEMS, value: font.FontSize ?? '', onValueChange: (value) => update({
+                                            FontSize: (value || undefined),
+                                        }) }) })] }) }) }), !hideAlignment && ((0, jsx_runtime_1.jsx)(FormLayout_1.FormRow, { label: "Alignment:", children: (0, jsx_runtime_1.jsx)(Flex_1.Box, { className: disabledClass, children: (0, jsx_runtime_1.jsx)(Flex_1.Flex, { alignItems: "center", className: "twa:ml-2 twa:gap-2", children: (0, jsx_runtime_1.jsxs)(Toggle_1.ToggleGroup, { children: [(0, jsx_runtime_1.jsx)(Toggle_1.Toggle, { icon: "align-left", pressed: font.Alignment === 'Left', onPressedChange: (pressed) => onAlignmentChange(pressed ? 'Left' : undefined) }), (0, jsx_runtime_1.jsx)(Toggle_1.Toggle, { icon: "align-center", pressed: font.Alignment === 'Center', onPressedChange: (pressed) => onAlignmentChange(pressed ? 'Center' : undefined) }), (0, jsx_runtime_1.jsx)(Toggle_1.Toggle, { icon: "align-right", pressed: font.Alignment === 'Right', onPressedChange: (pressed) => onAlignmentChange(pressed ? 'Right' : undefined) })] }) }) }) }))] }) }));
+};
+exports.StyledColumnFontStyleEditor = StyledColumnFontStyleEditor;
+/**
+ * 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.
+ */
+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 ((0, jsx_runtime_1.jsx)(Flex_1.Box, { children: (0, jsx_runtime_1.jsxs)(FormLayout_1.default, { className: "twa:ml-2", sizes: [...FORM_SIZES], children: [(0, jsx_runtime_1.jsx)(FormLayout_1.FormRow, { label: "Background:", children: (0, jsx_runtime_1.jsxs)(Flex_1.Flex, { alignItems: "center", className: "twa:ml-2 twa:gap-2", children: [(0, jsx_runtime_1.jsx)(CheckBox_1.CheckBox, { disabled: disabled, checked: !!cell.BackColor, onChange: (checked) => update({ BackColor: checked ? cell.BackColor ?? '#ffffff' : undefined }), children: "Set" }), (0, jsx_runtime_1.jsx)(ColorPicker_1.ColorPicker, { disabled: disabled || !cell.BackColor, api: props.api, value: cell.BackColor || '#ffffff', onChange: (c) => update({ BackColor: c }) })] }) }), (0, jsx_runtime_1.jsx)(FormLayout_1.FormRow, { label: "Border colour:", children: (0, jsx_runtime_1.jsxs)(Flex_1.Flex, { alignItems: "center", className: "twa:ml-2 twa:gap-2", children: [(0, jsx_runtime_1.jsx)(CheckBox_1.CheckBox, { disabled: disabled, checked: !!cell.BorderColor, onChange: (checked) => update({ BorderColor: checked ? cell.BorderColor ?? '#000000' : undefined }), children: "Set" }), (0, jsx_runtime_1.jsx)(ColorPicker_1.ColorPicker, { disabled: disabled || !cell.BorderColor, api: props.api, value: cell.BorderColor || '#000000', onChange: (c) => update({ BorderColor: c }) })] }) }), (0, jsx_runtime_1.jsx)(FormLayout_1.FormRow, { label: "Border radius:", children: (0, jsx_runtime_1.jsxs)(Flex_1.Flex, { alignItems: "center", className: "twa:ml-2 twa:gap-2", children: [(0, jsx_runtime_1.jsx)(NumberInput_1.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 }) }), (0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:text-xs twa:opacity-70", children: "px" })] }) })] }) }));
+};
+exports.StyledColumnCellStyleEditor = StyledColumnCellStyleEditor;
+/**
+ * Compact summary tags for the Font slice; used by wizard summary panels.
+ */
+const renderFontStyleSummaryTags = (font) => {
+    if (!font)
+        return null;
+    const tags = [];
+    if (font.ForeColor) {
+        tags.push((0, jsx_runtime_1.jsxs)(Tag_1.Tag, { children: ["Text ", font.ForeColor] }, "fg"));
+    }
+    if (font.FontWeight === 'Bold') {
+        tags.push((0, jsx_runtime_1.jsx)(Tag_1.Tag, { children: "Bold" }, "b"));
+    }
+    if (font.FontStyle === 'Italic') {
+        tags.push((0, jsx_runtime_1.jsx)(Tag_1.Tag, { children: "Italic" }, "i"));
+    }
+    if (font.TextDecoration && font.TextDecoration !== 'None') {
+        tags.push((0, jsx_runtime_1.jsx)(Tag_1.Tag, { children: font.TextDecoration }, "td"));
+    }
+    if (font.FontSize) {
+        tags.push((0, jsx_runtime_1.jsx)(Tag_1.Tag, { children: font.FontSize }, "fs"));
+    }
+    if (font.Alignment && font.Alignment !== 'Default') {
+        tags.push((0, jsx_runtime_1.jsxs)(Tag_1.Tag, { children: ["Align ", font.Alignment] }, "al"));
+    }
+    if (tags.length === 0)
+        return null;
+    return ((0, jsx_runtime_1.jsx)(Flex_1.Flex, { alignItems: "center", className: "twa:gap-1 twa:flex-wrap", children: tags }));
+};
+exports.renderFontStyleSummaryTags = renderFontStyleSummaryTags;
+/**
+ * Compact summary tags for the Cell slice; used by wizard summary panels.
+ */
+const renderCellStyleSummaryTags = (cell) => {
+    if (!cell)
+        return null;
+    const tags = [];
+    if (cell.BackColor) {
+        tags.push((0, jsx_runtime_1.jsxs)(Tag_1.Tag, { children: ["Bg ", cell.BackColor] }, "bg"));
+    }
+    if (cell.BorderColor) {
+        tags.push((0, jsx_runtime_1.jsxs)(Tag_1.Tag, { children: ["Border ", cell.BorderColor] }, "bc"));
+    }
+    if (cell.BorderRadius != null) {
+        tags.push((0, jsx_runtime_1.jsxs)(Tag_1.Tag, { children: ["Radius ", cell.BorderRadius, "px"] }, "br"));
+    }
+    if (tags.length === 0)
+        return null;
+    return ((0, jsx_runtime_1.jsx)(Flex_1.Flex, { alignItems: "center", className: "twa:gap-1 twa:flex-wrap", children: tags }));
+};
+exports.renderCellStyleSummaryTags = renderCellStyleSummaryTags;

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;
 }>;