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

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

@@ -3,12 +3,12 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.renderBadgeStyleSummary = exports.StyledColumnBadgeStyleSection = exports.StyledColumnBadgeSection = exports.renderBadgeSummary = exports.StyledColumnBadgeDefinitionsView = exports.renderBadgeDefinitionSummaryTags = exports.getStyledColumnBadgeStyleViewValues = exports.getStyledColumnBadgeDefinitionViewValues = exports.getStyledColumnBadgeDefinitionViewValueGroups = void 0;
 const tslib_1 = require("tslib");
 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 ButtonNew_1 = require("../../Components/Buttons/ButtonNew");
 const Tag_1 = require("../../../components/Tag");
+const SummaryColorTag_1 = require("../../Wizard/SummaryColorTag");
 const ObjectFactory_1 = tslib_1.__importDefault(require("../../../Utilities/ObjectFactory"));
 const AdaptableIconSelector_1 = require("../../Components/AdaptableIconSelector");
 const PredicateEditor_1 = require("../../Components/PredicateEditor/PredicateEditor");
@@ -26,6 +26,9 @@ const StyledColumnSliceStyleEditors_1 = require("./StyledColumnSliceStyleEditors
 const Card_1 = require("../../../components/Card");
 const AdaptableContext_1 = require("../../AdaptableContext");
 const StyledColumnBadgePreview_1 = require("./StyledColumnWizardStyleSection/Components/StyledColumnBadgePreview");
+const CollapsibleWizardCard_1 = require("../../Wizard/CollapsibleWizardCard");
+const NewSelect_1 = require("../../../components/NewSelect");
+const utils_1 = require("../../../lib/utils");
 const BADGE_STYLE_FORM_SIZES = ['200px', '1fr'];
 const SHAPE_CHOICES = [
     { value: 'Pill', label: 'Pill' },
@@ -42,97 +45,106 @@ const OVERFLOW_CHOICES = [
     { value: 'Wrap', label: 'Wrap', hint: 'Wrap onto subsequent lines' },
     { value: 'Scroll', label: 'Scroll', hint: 'Single line; cell scrolls horizontally' },
 ];
-const BadgeEditor = (props) => {
+const badgeCardId = (index) => `badge-${index}`;
+const getBadgePreviewValue = (dataType) => dataType === 'number' || dataType === 'numberArray'
+    ? `${GeneralConstants_1.DEFAULT_INTEGER_DISPLAY_VALUE}`
+    : GeneralConstants_1.DEFAULT_STRING_DISPLAY_VALUE;
+const getBadgeDefinitionSummaryItems = (badge, api) => {
+    const items = [];
+    let rule = 'Always';
+    if (badge.Predicate) {
+        rule = api.predicateApi.predicateToString(badge.Predicate);
+    }
+    else if (badge.Expression) {
+        rule = badge.Expression.BooleanExpression;
+    }
+    items.push({ label: 'Rule', value: rule });
+    items.push({ label: 'Shape', value: badge.Shape ?? 'Rounded' });
+    items.push(...(0, BadgePillStyleEditor_1.getBadgePillStyleSummaryItems)(badge.PillStyle));
+    const iconProps = badge.IconProperties;
+    if (iconProps?.Icon) {
+        items.push({
+            label: 'Icon',
+            value: 'name' in iconProps.Icon ? iconProps.Icon.name : 'Custom',
+            icon: iconProps.Icon,
+        });
+    }
+    if (iconProps?.IconOnly) {
+        items.push({ label: 'Icon Only', value: 'Yes' });
+    }
+    if (iconProps?.Icon && iconProps.Position) {
+        items.push({ label: 'Icon Position', value: iconProps.Position });
+    }
+    if (typeof iconProps?.Gap === 'number') {
+        items.push({ label: 'Icon Gap', value: `${iconProps.Gap}px` });
+    }
+    return items;
+};
+const BadgePreview = ({ badge, density, previewValue }) => ((0, jsx_runtime_1.jsx)(Badge_1.Badge, { pillStyle: badge.PillStyle, icon: badge.IconProperties?.Icon, iconPosition: badge.IconProperties?.Position, shape: badge.Shape, density: density, iconGap: badge.IconProperties?.Gap, children: badge.IconProperties?.IconOnly ? '' : previewValue }));
+const BadgeCardSummary = ({ badge, api }) => ((0, jsx_runtime_1.jsx)(CollapsibleWizardCard_1.CollapsibleWizardValueSummary, { value: (0, SummaryColorTag_1.renderSummaryLabelValueTags)(getBadgeDefinitionSummaryItems(badge, api)) }));
+const BadgeEditorForm = (props) => {
     const { api } = (0, OnePageAdaptableWizard_1.useOnePageAdaptableWizardContext)();
-    const { badge, columnId, onChange, density, index } = props;
+    const { badge, columnId, onChange } = 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;
     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' }),
-                                    },
-                                    {
-                                        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 iconProps = badge.IconProperties;
+    const hasIcon = Boolean(iconProps?.Icon);
+    const updateIconProperties = (patch) => {
+        const next = {
+            ...(iconProps ?? { Icon: undefined }),
+            ...patch,
+        };
+        if (!next.Icon) {
+            const cleaned = { ...badge };
+            delete cleaned.IconProperties;
+            onChange(cleaned);
+            return;
+        }
+        onChange({ ...badge, IconProperties: next });
+    };
+    return ((0, jsx_runtime_1.jsxs)(Flex_1.Flex, { flexDirection: "column", className: "twa:gap-3 twa:p-2", children: [(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: "Shape" }), (0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:text-xs twa:opacity-70 twa:font-normal twa:max-w-[520px]", children: "Define shape of the corners for this badge" })] }), (0, jsx_runtime_1.jsx)(Card_1.Card.Body, { className: "twa:p-1", 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.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: "Style" }), (0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:text-xs twa:opacity-70 twa:font-normal twa:max-w-[520px]", children: "Colours and font styling for the badge pill" })] }), (0, jsx_runtime_1.jsx)(Card_1.Card.Body, { className: "twa:p-1", children: (0, jsx_runtime_1.jsx)(BadgePillStyleEditor_1.BadgePillStyleEditor, { embedded: true, 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.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: "Rule" }), (0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:text-xs twa:opacity-70 twa:font-normal twa:max-w-[520px]", children: "Optional rule for when this badge is displayed \u2014 leave empty for Badge to always show" })] }), (0, jsx_runtime_1.jsx)(Card_1.Card.Body, { className: "twa:p-1", children: columnId ? ((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)(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: "Icon" }), (0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:text-xs twa:opacity-70 twa:font-normal twa:max-w-[520px]", children: "Optional icon inside the badge \u2014 position and spacing apply once an icon is selected" })] }), (0, jsx_runtime_1.jsx)(Card_1.Card.Body, { className: "twa:p-1", children: (0, jsx_runtime_1.jsxs)(FormLayout_1.default, { children: [(0, jsx_runtime_1.jsx)(FormLayout_1.FormRow, { label: "Icon", children: !iconProps?.Icon || 'name' in iconProps.Icon ? ((0, jsx_runtime_1.jsx)(AdaptableIconSelector_1.AdaptableIconSelector, { value: iconProps?.Icon && 'name' in iconProps.Icon ? iconProps.Icon.name : undefined, onChange: (iconName) => {
+                                            if (iconName) {
+                                                updateIconProperties({
+                                                    Icon: { name: iconName },
+                                                });
+                                            }
+                                            else {
+                                                const cleaned = { ...badge };
+                                                delete cleaned.IconProperties;
+                                                onChange(cleaned);
+                                            }
+                                        } })) : ((0, jsx_runtime_1.jsx)(AdaptableIconComponent_1.AdaptableIconComponent, { icon: iconProps.Icon })) }), (0, jsx_runtime_1.jsx)(FormLayout_1.FormRow, { label: "Icon Position", children: (0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:max-w-[160px]", children: (0, jsx_runtime_1.jsx)(NewSelect_1.SingleSelect, { disabled: !hasIcon, className: "twa:w-full", value: iconProps?.Position ?? 'Start', onValueChange: (v) => updateIconProperties({ Position: v }), items: [
+                                                { value: 'Start', label: 'Start' },
+                                                { value: 'End', label: 'End' },
+                                            ] }) }) }), (0, jsx_runtime_1.jsx)(FormLayout_1.FormRow, { label: "Show Icon Only", children: (0, jsx_runtime_1.jsx)(CheckBox_1.CheckBox, { disabled: !hasIcon, checked: iconProps?.IconOnly, onClick: () => updateIconProperties({ IconOnly: !iconProps?.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:gap-2", children: [(0, jsx_runtime_1.jsx)(NumberInput_1.NumberInput, { disabled: !hasIcon || iconProps?.IconOnly, value: iconProps?.Gap ?? '', placeholder: "auto", step: 1, min: 0, style: { width: 70 }, onChange: (value) => {
+                                                    updateIconProperties({
+                                                        Gap: 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 getStyledColumnBadgeDefinitionViewValueGroups = (styledColumn, api) => {
     const badgeStyle = styledColumn.BadgeStyle;
     if (!badgeStyle?.Badges?.length) {
         return [];
     }
-    return badgeStyle.Badges.map((badge, index) => {
-        const items = [];
-        let rule = 'Always';
-        if (badge.Predicate) {
-            rule = api.predicateApi.predicateToString(badge.Predicate);
-        }
-        else if (badge.Expression) {
-            rule = badge.Expression.BooleanExpression;
-        }
-        items.push(`Badge ${index + 1}: ${rule}`);
-        items.push(`Shape: ${badge.Shape ?? 'Rounded'}`);
-        (0, BadgePillStyleEditor_1.getBadgePillStyleSummaryItems)(badge.PillStyle).forEach(({ label, value }) => {
-            items.push(`${label}: ${value}`);
-        });
-        if (badge.Icon) {
-            const iconName = 'name' in badge.Icon ? badge.Icon.name : 'Custom';
-            items.push(`Icon: ${iconName}`);
-        }
-        if (badge.IconOnly) {
-            items.push('Icon Only: Yes');
-        }
-        if (badge.Icon && badge.IconPosition) {
-            items.push(`Icon Position: ${badge.IconPosition}`);
-        }
-        if (typeof badge.IconGap === 'number') {
-            items.push(`Icon Gap: ${badge.IconGap}px`);
-        }
-        return items;
-    });
+    return badgeStyle.Badges.map((badge) => getBadgeDefinitionSummaryItems(badge, api).map(({ label, value }) => `${label}: ${value}`));
 };
 exports.getStyledColumnBadgeDefinitionViewValueGroups = getStyledColumnBadgeDefinitionViewValueGroups;
 const getStyledColumnBadgeDefinitionViewValues = (styledColumn, api) => {
@@ -168,11 +180,11 @@ const getStyledColumnBadgeStyleViewValues = (styledColumn, api) => {
 };
 exports.getStyledColumnBadgeStyleViewValues = getStyledColumnBadgeStyleViewValues;
 const renderBadgeDefinitionSummaryTags = (styledColumn, api) => {
-    const groups = (0, exports.getStyledColumnBadgeDefinitionViewValueGroups)(styledColumn, api);
-    if (!groups.length) {
+    const badges = styledColumn.BadgeStyle?.Badges;
+    if (!badges?.length) {
         return (0, jsx_runtime_1.jsx)(Tag_1.Tag, { children: "No Badges Defined" });
     }
-    return ((0, jsx_runtime_1.jsx)(Flex_1.Flex, { flexDirection: "column", className: "twa:gap-2", children: groups.map((items, index) => ((0, jsx_runtime_1.jsx)(Flex_1.Flex, { alignItems: "center", className: "twa:flex-wrap twa:gap-2", children: items.map((item, itemIndex) => ((0, jsx_runtime_1.jsx)(Tag_1.Tag, { children: item }, `${index}-${itemIndex}`))) }, index))) }));
+    return ((0, jsx_runtime_1.jsx)(Flex_1.Flex, { flexDirection: "column", className: "twa:gap-2", children: badges.map((badge, index) => ((0, jsx_runtime_1.jsxs)(Flex_1.Flex, { alignItems: "center", className: "twa:flex-wrap twa:gap-2", children: [(0, jsx_runtime_1.jsxs)(Tag_1.Tag, { className: "twa:shrink-0", children: ["Badge ", index + 1] }), (0, SummaryColorTag_1.renderSummaryLabelValueTags)(getBadgeDefinitionSummaryItems(badge, api))] }, index))) }));
 };
 exports.renderBadgeDefinitionSummaryTags = renderBadgeDefinitionSummaryTags;
 const StyledColumnBadgeDefinitionsView = ({ data }) => {
@@ -181,30 +193,56 @@ const StyledColumnBadgeDefinitionsView = ({ data }) => {
 };
 exports.StyledColumnBadgeDefinitionsView = StyledColumnBadgeDefinitionsView;
 const renderBadgeSummary = (styledColumn, api) => {
-    if (!api) {
-        const { api: adaptableApi } = (0, OnePageAdaptableWizard_1.useOnePageAdaptableWizardContext)();
-        api = adaptableApi;
-    }
     return (0, exports.renderBadgeDefinitionSummaryTags)(styledColumn, api);
 };
 exports.renderBadgeSummary = renderBadgeSummary;
 const StyledColumnBadgeSection = (props) => {
-    const { data } = (0, OnePageAdaptableWizard_1.useOnePageAdaptableWizardContext)();
+    const { data, api } = (0, OnePageAdaptableWizard_1.useOnePageAdaptableWizardContext)();
     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()],
-                            },
-                        });
-                    }, 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 dataType = data.ColumnId
+        ? api.columnApi.getColumnDataTypeForColumnId(data.ColumnId)
+        : 'text';
+    const previewValue = getBadgePreviewValue(dataType);
+    const { bindCard, hasExpandedCard, expandedFillsSpace, expandedId, setExpandedId } = (0, CollapsibleWizardCard_1.useWizardCardAccordion)(null);
+    const handleAddBadge = () => {
+        const newIndex = badges.length;
+        props.onChange({
+            ...data,
+            BadgeStyle: {
+                ...badgeStyle,
+                Badges: [...badges, ObjectFactory_1.default.CreateDefaultStyledColumnBadge()],
+            },
+        });
+        setExpandedId(badgeCardId(newIndex));
+    };
+    const handleDeleteBadge = (index) => {
+        const cardId = badgeCardId(index);
+        const newBadges = [...badges];
+        newBadges.splice(index, 1);
+        props.onChange({
+            ...data,
+            BadgeStyle: {
+                ...badgeStyle,
+                Badges: newBadges,
+            },
+        });
+        if (expandedId === cardId) {
+            setExpandedId(null);
+            return;
+        }
+        if (expandedId?.startsWith('badge-')) {
+            const expandedIndex = Number(expandedId.replace('badge-', ''));
+            if (!Number.isNaN(expandedIndex) && expandedIndex > index) {
+                setExpandedId(badgeCardId(expandedIndex - 1));
+            }
+        }
+    };
+    return ((0, jsx_runtime_1.jsxs)(Flex_1.Box, { className: (0, utils_1.cn)((0, CollapsibleWizardCard_1.getWizardAccordionSectionClassName)(hasExpandedCard, expandedFillsSpace), 'twa:p-2'), children: [(0, jsx_runtime_1.jsx)(Flex_1.Flex, { className: "twa:justify-end twa:mb-2 twa:shrink-0", children: (0, jsx_runtime_1.jsx)(ButtonNew_1.ButtonNew, { onClick: handleAddBadge, children: "Add Badge" }) }), (0, jsx_runtime_1.jsx)(Flex_1.Flex, { flexDirection: "column", className: "twa:gap-3 twa:min-h-0", children: badges.map((badge, index) => {
+                    const handleEditBadge = (nextBadge) => {
                         const newBadges = [...badges];
-                        newBadges[index] = badge;
+                        newBadges[index] = nextBadge;
                         props.onChange({
                             ...data,
                             BadgeStyle: {
@@ -213,17 +251,7 @@ const StyledColumnBadgeSection = (props) => {
                             },
                         });
                     };
-                    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));
+                    return ((0, jsx_runtime_1.jsx)(CollapsibleWizardCard_1.CollapsibleWizardCard, { ...bindCard(badgeCardId(index)), surface: "panel", "data-name": `styled-column-badge-${index}`, title: `Badge ${index + 1}`, collapsedHelp: false, headerVisual: (0, jsx_runtime_1.jsx)(BadgePreview, { badge: badge, density: currentDensity, previewValue: previewValue }), headerActions: (0, jsx_runtime_1.jsx)(SimpleButton_1.default, { icon: "delete", variant: "text", tooltip: "Delete badge", onClick: () => handleDeleteBadge(index) }), summary: (0, jsx_runtime_1.jsx)(BadgeCardSummary, { badge: badge, api: api }), bodyClassName: "twa:!pt-0 twa:overflow-y-auto", children: (0, jsx_runtime_1.jsx)(BadgeEditorForm, { badge: badge, columnId: data.ColumnId, onChange: handleEditBadge }) }, badgeCardId(index)));
                 }) })] }));
 };
 exports.StyledColumnBadgeSection = StyledColumnBadgeSection;
@@ -272,14 +300,10 @@ const StyledColumnBadgeStyleSection = (props) => {
 };
 exports.StyledColumnBadgeStyleSection = StyledColumnBadgeStyleSection;
 const renderBadgeStyleSummary = (styledColumn, api) => {
-    if (!api) {
-        const { api: adaptableApi } = (0, OnePageAdaptableWizard_1.useOnePageAdaptableWizardContext)();
-        api = adaptableApi;
-    }
     const items = (0, exports.getStyledColumnBadgeStyleViewValues)(styledColumn, api);
     if (!items.length) {
         return (0, jsx_runtime_1.jsx)(Tag_1.Tag, { children: "No Style Defined" });
     }
-    return ((0, jsx_runtime_1.jsx)(Flex_1.Flex, { alignItems: "center", className: "twa:flex-wrap twa:gap-2", children: items.map((item) => ((0, jsx_runtime_1.jsx)(Tag_1.Tag, { children: item }, item))) }));
+    return (0, SummaryColorTag_1.renderSummaryStringTags)(items);
 };
 exports.renderBadgeStyleSummary = renderBadgeStyleSummary;

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

@@ -13,9 +13,7 @@ export interface StyledColumnFontStyleEditorProps {
     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).
+     * that own horizontal alignment elsewhere (e.g. Badge row layout).
      */
     hideAlignment?: boolean;
 }

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

@@ -4,13 +4,12 @@ exports.renderCellStyleSummaryTags = exports.getCellBoxStyleSummaryItems = expor
 const tslib_1 = require("tslib");
 const jsx_runtime_1 = require("react/jsx-runtime");
 const React = tslib_1.__importStar(require("react"));
-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 SummaryColorTag_1 = require("../../Wizard/SummaryColorTag");
 const Toggle_1 = require("../../../components/Toggle");
 const FORM_SIZES = ['200px', '1fr'];
 const FONT_SIZE_ITEMS = [
@@ -50,18 +49,13 @@ 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 ((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({
+    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.jsx)(ColorPicker_1.OptionalColorPicker, { className: "twa:ml-2", disabled: disabled, api: props.api, value: font.ForeColor, defaultColor: "#000000", onChange: onForeColorChange }) }), (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)(Flex_1.Flex, { alignItems: "center", className: "twa:gap-2", children: [(0, jsx_runtime_1.jsx)(Toggle_1.Toggle, { standalone: true, pressed: font.FontStyle === 'Italic', onPressedChange: (pressed) => update({ FontStyle: pressed ? 'Italic' : undefined }), icon: "italic" }), (0, jsx_runtime_1.jsx)(Toggle_1.Toggle, { standalone: true, 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) })] }) }) }) }))] }) }));
 };
@@ -93,7 +87,7 @@ const StyledColumnCellStyleEditor = (props) => {
             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" })] }) })] }) }));
+    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.jsx)(ColorPicker_1.OptionalColorPicker, { className: "twa:ml-2", disabled: disabled, api: props.api, value: cell.BackColor, defaultColor: "#ffffff", onChange: (c) => update({ BackColor: c }) }) }), (0, jsx_runtime_1.jsx)(FormLayout_1.FormRow, { label: "Border colour:", children: (0, jsx_runtime_1.jsx)(ColorPicker_1.OptionalColorPicker, { className: "twa:ml-2", disabled: disabled, api: props.api, value: cell.BorderColor, defaultColor: "#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;
 /**
@@ -133,7 +127,7 @@ const renderFontStyleSummaryTags = (font) => {
     if (!items.length) {
         return null;
     }
-    return ((0, jsx_runtime_1.jsx)(Flex_1.Flex, { alignItems: "center", className: "twa:gap-1 twa:flex-wrap", children: items.map(({ label, value }) => ((0, jsx_runtime_1.jsx)(Tag_1.Tag, { children: `${label}: ${value}` }, label))) }));
+    return (0, SummaryColorTag_1.renderSummaryLabelValueTags)(items);
 };
 exports.renderFontStyleSummaryTags = renderFontStyleSummaryTags;
 /**
@@ -164,6 +158,6 @@ const renderCellStyleSummaryTags = (cell) => {
     if (!items.length) {
         return null;
     }
-    return ((0, jsx_runtime_1.jsx)(Flex_1.Flex, { alignItems: "center", className: "twa:gap-1 twa:flex-wrap", children: items.map(({ label, value }) => ((0, jsx_runtime_1.jsx)(Tag_1.Tag, { children: `${label}: ${value}` }, label))) }));
+    return (0, SummaryColorTag_1.renderSummaryLabelValueTags)(items);
 };
 exports.renderCellStyleSummaryTags = renderCellStyleSummaryTags;

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

@@ -8,6 +8,7 @@ const NewSelect_1 = require("../../../components/NewSelect");
 const OnePageAdaptableWizard_1 = require("../../Wizard/OnePageAdaptableWizard");
 const FormLayout_1 = tslib_1.__importStar(require("../../../components/FormLayout"));
 const Tag_1 = require("../../../components/Tag");
+const SummaryColorTag_1 = require("../../Wizard/SummaryColorTag");
 const AdaptableInput_1 = tslib_1.__importDefault(require("../../Components/AdaptableInput"));
 const ColorPicker_1 = require("../../../components/ColorPicker");
 const CheckBox_1 = require("../../../components/CheckBox");
@@ -100,7 +101,7 @@ const renderSparklineSummary = (data) => {
     const items = buildStyledColumnSparklineStyleSummaryStrings(sparkline, {
         includeEmptyFeatures: true,
     });
-    return ((0, jsx_runtime_1.jsx)(Flex_1.Flex, { alignItems: "center", className: "twa:flex-wrap twa:gap-2", children: items.map((item) => ((0, jsx_runtime_1.jsx)(Tag_1.Tag, { children: item }, item))) }));
+    return (0, SummaryColorTag_1.renderSummaryStringTags)(items);
 };
 exports.renderSparklineSummary = renderSparklineSummary;
 /**

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,54 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.StyledColumnTypeThumbnail = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const Flex_1 = require("../../../components/Flex");
+const Badge_1 = require("../../Components/Badge");
+const StyledColumnRatingPreview_1 = require("./StyledColumnWizardStyleSection/Components/StyledColumnRatingPreview");
+const WizardTypeSelection_1 = require("../../Wizard/WizardTypeSelection");
+const THUMBNAIL_FRAME_CLASS = WizardTypeSelection_1.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 = () => ((0, jsx_runtime_1.jsx)(Flex_1.Box, { className: `${THUMBNAIL_FRAME_CLASS} twa:justify-start`, children: (0, jsx_runtime_1.jsxs)("div", { className: "ab-Badge__wrapper ab-Badge__wrapper--truncate", style: { gap: 4 }, children: [(0, jsx_runtime_1.jsx)(Badge_1.Badge, { pillStyle: { BackColor: '#e8f5e9', ForeColor: '#2e7d32' }, shape: "Pill", density: "Compact", children: "Buy" }), (0, jsx_runtime_1.jsx)(Badge_1.Badge, { pillStyle: { BackColor: '#ffebee', ForeColor: '#c62828' }, shape: "Pill", density: "Compact", children: "Sell" })] }) }));
+const IconThumbnail = () => ((0, jsx_runtime_1.jsx)(Flex_1.Box, { className: THUMBNAIL_FRAME_CLASS, style: { gap: 10 }, children: ['US', 'GB', 'FR'].map((code) => ((0, jsx_runtime_1.jsx)("span", { className: "ab-IconStyle__glyph", style: {
+            fontSize: 18,
+            lineHeight: 1,
+            display: 'inline-flex',
+            alignItems: 'center',
+            justifyContent: 'center',
+        }, children: flagEmoji(code) }, code))) }));
+const RatingThumbnail = () => ((0, jsx_runtime_1.jsx)(Flex_1.Box, { className: THUMBNAIL_FRAME_CLASS, children: (0, jsx_runtime_1.jsx)(StyledColumnRatingPreview_1.RatingPreview, { rating: { Max: 5, AllowHalf: true }, value: 3.5 }) }));
+const GradientThumbnail = () => ((0, jsx_runtime_1.jsx)(Flex_1.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) => ((0, jsx_runtime_1.jsx)(Flex_1.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 = () => ((0, jsx_runtime_1.jsx)(Flex_1.Box, { className: THUMBNAIL_FRAME_CLASS, children: (0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:relative twa:h-[6px] twa:w-full twa:rounded-sm", style: { background: DEFAULT_TRACK }, children: (0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:absolute twa:top-0 twa:h-full twa:rounded-sm", style: { left: '8%', width: '62%', background: DEFAULT_BAR } }) }) }));
+const BulletThumbnail = () => ((0, jsx_runtime_1.jsx)(Flex_1.Box, { className: THUMBNAIL_FRAME_CLASS, children: (0, jsx_runtime_1.jsxs)("svg", { className: THUMBNAIL_SVG_CLASS, viewBox: "0 0 100 22", preserveAspectRatio: "none", "aria-hidden": true, children: [(0, jsx_runtime_1.jsx)("rect", { x: "0", y: "2", width: "33", height: "18", fill: "#f8696b", opacity: "0.45" }), (0, jsx_runtime_1.jsx)("rect", { x: "33", y: "2", width: "34", height: "18", fill: "#ffeb84", opacity: "0.45" }), (0, jsx_runtime_1.jsx)("rect", { x: "67", y: "2", width: "33", height: "18", fill: "#63be7b", opacity: "0.45" }), (0, jsx_runtime_1.jsx)("rect", { x: "4", y: "7", width: "52", height: "8", rx: "1", fill: DEFAULT_BAR }), (0, jsx_runtime_1.jsx)("line", { x1: "78", y1: "3", x2: "78", y2: "19", stroke: DEFAULT_MARKER, strokeWidth: "2.5", vectorEffect: "non-scaling-stroke" })] }) }));
+const RangeBarThumbnail = () => ((0, jsx_runtime_1.jsx)(Flex_1.Box, { className: THUMBNAIL_FRAME_CLASS, children: (0, jsx_runtime_1.jsxs)("svg", { className: THUMBNAIL_SVG_CLASS, viewBox: "0 0 100 22", preserveAspectRatio: "none", "aria-hidden": true, children: [(0, jsx_runtime_1.jsx)("rect", { x: "0", y: "0", width: "100", height: "22", fill: "transparent" }), (0, jsx_runtime_1.jsx)("rect", { x: "2", y: "8", width: "96", height: "6", rx: "1", fill: DEFAULT_TRACK }), (0, jsx_runtime_1.jsx)("line", { x1: "38", y1: "4", x2: "38", y2: "18", stroke: DEFAULT_MARKER, strokeWidth: "2", vectorEffect: "non-scaling-stroke" }), (0, jsx_runtime_1.jsx)("polygon", { points: "72,4 82,11 72,18", fill: DEFAULT_BAR })] }) }));
+const SparklineThumbnail = () => ((0, jsx_runtime_1.jsx)(Flex_1.Box, { className: THUMBNAIL_FRAME_CLASS, children: (0, jsx_runtime_1.jsxs)("svg", { className: THUMBNAIL_SVG_CLASS, viewBox: "0 0 100 22", preserveAspectRatio: "none", "aria-hidden": true, children: [(0, jsx_runtime_1.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" }), (0, jsx_runtime_1.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,
+};
+const StyledColumnTypeThumbnail = ({ type }) => {
+    const Thumbnail = THUMBNAIL_BY_TYPE[type];
+    return ((0, jsx_runtime_1.jsx)(Flex_1.Box, { "aria-hidden": true, className: "twa:w-full", children: (0, jsx_runtime_1.jsx)(Thumbnail, {}) }));
+};
+exports.StyledColumnTypeThumbnail = StyledColumnTypeThumbnail;

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;

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

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.StyledColumnWizard = void 0;
+exports.StyledColumnWizard = exports.getStyledColumnEditDefaultSectionName = void 0;
 const tslib_1 = require("tslib");
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
@@ -57,10 +57,34 @@ const computeDefaultStyledColumnName = (sc) => {
     }
     return `${typeKey}-${sc.ColumnId || 'column'}`;
 };
+/** First wizard step to open when editing an existing Styled Column (column menu, settings list, etc.). */
+const getStyledColumnEditDefaultSectionName = (styledColumn) => {
+    if (styledColumn.BadgeStyle) {
+        return 'Badges';
+    }
+    if (styledColumn.GradientStyle || styledColumn.PercentBarStyle) {
+        return 'Ranges';
+    }
+    if (styledColumn.BulletChartStyle) {
+        return 'Ranges';
+    }
+    if (styledColumn.RangeBarStyle) {
+        return 'Style';
+    }
+    if (styledColumn.IconStyle) {
+        return 'Mappings';
+    }
+    return 'Style';
+};
+exports.getStyledColumnEditDefaultSectionName = getStyledColumnEditDefaultSectionName;
 const StyledColumnWizard = (props) => {
     const data = props.data ?? props.popupParams?.value;
     const popupDefaultCurrentSectionName = props?.popupParams?.config?.defaultCurrentSectionName ?? undefined;
-    const defaultCurrentSectionName = props.defaultCurrentSectionName ?? popupDefaultCurrentSectionName;
+    const hasExistingData = Boolean(data);
+    const isEdit = hasExistingData && props.popupParams?.action !== 'New';
+    const defaultCurrentSectionName = props.defaultCurrentSectionName ??
+        popupDefaultCurrentSectionName ??
+        (isEdit ? (0, exports.getStyledColumnEditDefaultSectionName)(data) : undefined);
     const allStyledColumns = (0, react_redux_1.useSelector)((state) => state.StyledColumn?.StyledColumns ?? []);
     const [styledColumn, setStyledColumn] = (0, react_1.useState)(() => {
         if (data) {
@@ -115,7 +139,7 @@ const StyledColumnWizard = (props) => {
     }
     else if (styledColumn.GradientStyle || styledColumn.PercentBarStyle) {
         specificSteps.push({
-            details: 'Define the Cell Ranges or a Column Comparison',
+            details: 'Select type of Cell Range and configure contents',
             renderSummary: StyledColumnWizardStyleSection_1.renderStyledColumnRangesSummary,
             render: () => ((0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:p-2", children: (0, jsx_runtime_1.jsx)(StyledColumnWizardStyleSection_1.StyledColumnWizardRangesSection, { onChange: setStyledColumn }) })),
             title: 'Ranges',
@@ -273,9 +297,7 @@ const StyledColumnWizard = (props) => {
                 isValid: StyledColumnWizardScopeSection_1.isValidStyledColumnScope,
                 renderSummary: StyledColumnWizardScopeSection_1.renderStyledColumnScopeSummary,
                 details: 'Select the Column and Rows where Style should render',
-                render: () => {
-                    return ((0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:p-2 twa:h-full", children: (0, jsx_runtime_1.jsx)(StyledColumnWizardScopeSection_1.StyledColumnWizardScopeSection, { isNew: props.isNew, onChange: setStyledColumn }) }));
-                },
+                render: () => ((0, jsx_runtime_1.jsx)(StyledColumnWizardScopeSection_1.StyledColumnWizardScopeSection, { isNew: props.isNew, onChange: setStyledColumn })),
                 title: 'Scope',
             },
             ...specificSteps,