@adaptabletools/adaptable 22.1.1 → 23.0.0-canary.0

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

@@ -0,0 +1,282 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as React from 'react';
+import { Box, Flex } from '../../../components/Flex';
+import FormLayout, { FormRow } from '../../../components/FormLayout';
+import { Tag } from '../../../components/Tag';
+import { CheckBox } from '../../../components/CheckBox';
+import SimpleButton from '../../../components/SimpleButton';
+import { SingleSelect } from '../../../components/NewSelect';
+import { NumberInput } from '../../../components/Input/NumberInput';
+import Input from '../../../components/Input';
+import { useOnePageAdaptableWizardContext } from '../../Wizard/OnePageAdaptableWizard';
+import { AdaptableIconSelector } from '../../Components/AdaptableIconSelector';
+import { AdaptableIconComponent } from '../../Components/AdaptableIconComponent';
+import { ICON_STYLE_PRESET_DESCRIPTIONS, ICON_STYLE_PRESET_LABELS, getIconStylePresetMappings, } from '../../../Utilities/Helpers/IconStylePresets';
+import { resolveEffectiveIconStyleMappings } from '../../../agGrid/cellRenderers/IconRenderer';
+import { Card } from '../../../components/Card';
+import { StyledColumnCellStyleEditor, StyledColumnFontStyleEditor, } from './StyledColumnSliceStyleEditors';
+const STYLE_FORM_SIZES = ['200px', '1fr'];
+const detectIconKind = (spec) => {
+    if (typeof spec === 'string')
+        return 'Emoji';
+    if (spec && typeof spec.name === 'string')
+        return 'System';
+    if (spec && typeof spec.src === 'string')
+        return 'Url';
+    return 'Emoji';
+};
+const previewIcon = (spec) => {
+    if (!spec) {
+        return _jsx("span", { className: "twa:opacity-50", children: "\u2014" });
+    }
+    if (typeof spec === 'string') {
+        return _jsx("span", { style: { fontSize: 18, lineHeight: 1 }, children: spec });
+    }
+    return _jsx(AdaptableIconComponent, { icon: spec });
+};
+// ---------------------------------------------------------------------------
+// Summary helpers (used by the wizard step header + Styled Columns list)
+// ---------------------------------------------------------------------------
+const previewMapping = (mapping, index) => {
+    return (_jsxs(Flex, { alignItems: "center", className: "twa:gap-1 twa:px-1.5 twa:py-0.5 twa:rounded twa:bg-[var(--ab-color-primary)] twa:text-[var(--ab-color-primarytext)]", children: [_jsx(Box, { children: previewIcon(mapping.Icon) }), _jsx(Box, { className: "twa:text-xs twa:opacity-90", children: String(mapping.Key) })] }, index));
+};
+const renderMappingsPreview = (mappings) => {
+    if (!mappings || mappings.length === 0) {
+        return _jsx(Tag, { children: "No mappings" });
+    }
+    const previewItems = mappings.slice(0, 6).map((m, i) => previewMapping(m, i));
+    const remaining = mappings.length - previewItems.length;
+    return (_jsxs(Flex, { alignItems: "center", className: "twa:gap-1 twa:flex-wrap", children: [previewItems, remaining > 0 && _jsxs(Box, { className: "twa:text-xs twa:opacity-60", children: ["+", remaining, " more"] })] }));
+};
+/** Mappings step summary. */
+export const renderStyledColumnIconMappingsSummary = (data) => {
+    const ic = data.IconStyle;
+    if (!ic) {
+        return _jsx(Tag, { children: "No Icon Style defined" });
+    }
+    // Show the *effective* mapping count (preset + user) so the summary
+    // matches what the renderer actually uses at runtime.
+    const effectiveMappings = resolveEffectiveIconStyleMappings(ic);
+    const customCount = ic.Mappings?.length ?? 0;
+    return (_jsxs(Flex, { flexDirection: "column", className: "twa:gap-2 twa:items-start", children: [_jsxs(Flex, { alignItems: "center", className: "twa:flex-wrap", children: [_jsxs(Box, { className: "twa:mr-1", children: [effectiveMappings.length, " ", effectiveMappings.length === 1 ? 'mapping' : 'mappings'] }), ic.Preset && (_jsxs(Box, { className: "twa:mr-1", children: ["\u00B7 Preset: ", _jsx(Tag, { children: ICON_STYLE_PRESET_LABELS[ic.Preset] })] })), customCount > 0 && (_jsxs(Box, { className: "twa:mr-1", children: ["\u00B7 Custom: ", _jsx(Tag, { children: customCount })] })), ic.MatchMode && ic.MatchMode !== 'Exact' && (_jsxs(Box, { className: "twa:mr-1", children: ["\u00B7 Match: ", _jsx(Tag, { children: ic.MatchMode })] })), ic.Fallback && ic.Fallback !== 'Hide' && (_jsxs(Box, { className: "twa:mr-1", children: ["\u00B7 Fallback: ", _jsx(Tag, { children: ic.Fallback })] }))] }), renderMappingsPreview(effectiveMappings)] }));
+};
+/** Style step summary (size, text, tooltip, font / cell). */
+export const renderStyledColumnIconStyleSummary = (data) => {
+    const ic = data.IconStyle;
+    if (!ic) {
+        return _jsx(Tag, { children: "No Icon Style defined" });
+    }
+    const cellText = ic.CellText ?? [];
+    return (_jsxs(Flex, { alignItems: "center", className: "twa:flex-wrap", children: [_jsxs(Box, { className: "twa:mr-1", children: ["Size: ", _jsxs(Tag, { children: [ic.Size ?? 18, "px"] })] }), cellText.length > 0 && (_jsxs(Box, { className: "twa:mr-1", children: ["\u00B7 Text: ", _jsx(Tag, { children: cellText.join(', ') })] })), cellText.length > 0 && (_jsxs(Box, { className: "twa:mr-1", children: ["\u00B7 Position: ", _jsx(Tag, { children: ic.CellTextPosition ?? 'After' })] })), ic.ToolTipText?.length > 0 && (_jsxs(Box, { className: "twa:mr-1", children: ["\u00B7 Tooltip: ", _jsx(Tag, { children: ic.ToolTipText.join(', ') })] }))] }));
+};
+/**
+ * Combined summary for the Styled Columns list row (preview + key facts).
+ */
+export const renderStyledColumnIconSummary = (data) => {
+    const ic = data.IconStyle;
+    if (!ic) {
+        return _jsx(Tag, { children: "No Icon Style defined" });
+    }
+    return renderStyledColumnIconMappingsSummary(data);
+};
+// ---------------------------------------------------------------------------
+// Wizard validity check
+// ---------------------------------------------------------------------------
+export const isValidIconStyleMappings = (data) => {
+    const ic = data.IconStyle;
+    if (!ic)
+        return 'Select a Mapping or Preset';
+    const hasPreset = !!ic.Preset;
+    const hasCustom = (ic.Mappings?.length ?? 0) > 0;
+    if (!hasPreset && !hasCustom) {
+        return 'Apply a preset or add at least one custom mapping';
+    }
+    return true;
+};
+export const StyledColumnWizardIconSection = (props) => {
+    const { data, api } = useOnePageAdaptableWizardContext();
+    const iconStyle = data.IconStyle ?? {};
+    const mappings = iconStyle.Mappings ?? [];
+    const disabled = !data.ColumnId;
+    // Which row currently has its inline icon editor expanded. We expand
+    // a single row at a time to keep the table tidy and to avoid having
+    // multiple editors fighting for screen space.
+    const [editingRow, setEditingRow] = React.useState(null);
+    const [fallbackIconEditing, setFallbackIconEditing] = React.useState(false);
+    const update = (patch) => {
+        props.onChange({
+            ...data,
+            IconStyle: {
+                ...iconStyle,
+                ...patch,
+            },
+        });
+    };
+    const onFontChange = (next) => {
+        if (next) {
+            update({ Font: next });
+        }
+        else {
+            const { Font: _f, ...rest } = iconStyle;
+            props.onChange({ ...data, IconStyle: rest });
+        }
+    };
+    const onCellChange = (next) => {
+        if (next) {
+            update({ Cell: next });
+        }
+        else {
+            const { Cell: _c, ...rest } = iconStyle;
+            props.onChange({ ...data, IconStyle: rest });
+        }
+    };
+    // -----------------------------------------------------------------------
+    // Preset operations
+    // -----------------------------------------------------------------------
+    const applyPreset = (preset) => {
+        // Presets are now resolved at *runtime* — we only need to record the
+        // selection here. Custom `Mappings` continue to act as overrides /
+        // additions on top of the preset.
+        update({
+            Preset: preset,
+            // Flags / Status presets pair best with case-insensitive matching
+            // because they include both code (`'GBP'`) and name (`'United Kingdom'`)
+            // synonyms; user can flip back to Exact in the wizard if needed.
+            MatchMode: preset === 'Flags' || preset === 'Status'
+                ? 'CaseInsensitive'
+                : iconStyle.MatchMode ?? 'Exact',
+        });
+    };
+    const clearPreset = () => {
+        update({ Preset: undefined });
+    };
+    // -----------------------------------------------------------------------
+    // Mapping list operations
+    // -----------------------------------------------------------------------
+    const setMappings = (next) => {
+        update({ Mappings: next });
+    };
+    const updateMapping = (index, patch) => {
+        const next = mappings.map((m, i) => (i === index ? { ...m, ...patch } : m));
+        setMappings(next);
+    };
+    const removeMapping = (index) => {
+        setMappings(mappings.filter((_, i) => i !== index));
+        // Close any open editor — indexes shift after a delete and we don't
+        // want the wrong row to suddenly appear expanded.
+        setEditingRow(null);
+    };
+    const addMapping = () => {
+        const next = [
+            ...mappings,
+            {
+                Key: '',
+                Icon: '⭐',
+            },
+        ];
+        setMappings(next);
+        // Auto-expand the newly added row so the user can edit straight away.
+        setEditingRow(next.length - 1);
+    };
+    // -----------------------------------------------------------------------
+    // CellText helpers
+    // -----------------------------------------------------------------------
+    const toggleCellText = (token, checked) => {
+        const current = iconStyle.CellText ?? [];
+        const next = checked
+            ? Array.from(new Set([...current, token]))
+            : current.filter((t) => t !== token);
+        update({ CellText: next });
+    };
+    const toggleToolTipText = (token, checked) => {
+        const current = iconStyle.ToolTipText ?? [];
+        const next = checked
+            ? Array.from(new Set([...current, token]))
+            : current.filter((t) => t !== token);
+        update({ ToolTipText: next });
+    };
+    // -----------------------------------------------------------------------
+    // Render
+    // -----------------------------------------------------------------------
+    if (props.variant === 'mappings') {
+        const presetMappingsPreview = iconStyle.Preset
+            ? getIconStylePresetMappings(iconStyle.Preset)
+            : [];
+        return (_jsxs(Box, { children: [_jsxs(Card, { shadow: false, className: "twa:mb-3", children: [_jsxs(Card.Title, { children: [_jsx(Box, { className: "twa:font-medium", children: "Presets" }), _jsxs(Box, { className: "twa:text-xs twa:opacity-70 twa:font-normal twa:max-w-[520px]", children: ["Contains most commonly used values; add anything missing in", ' ', _jsx("strong", { children: "Custom mappings" }), " below"] })] }), _jsx(Card.Body, { children: _jsxs(FormLayout, { children: [_jsx(FormRow, { label: "Select Preset:", children: _jsxs(Flex, { alignItems: "center", className: "twa:gap-2 twa:flex-wrap", children: [['Flags', 'Currencies', 'Trend', 'Status'].map((p) => (_jsx(SimpleButton, { variant: iconStyle.Preset === p ? 'raised' : 'outlined', tone: iconStyle.Preset === p ? 'accent' : 'none', onClick: () => applyPreset(p), children: ICON_STYLE_PRESET_LABELS[p] }, p))), iconStyle.Preset && (_jsx(SimpleButton, { variant: "text", icon: "undo", tooltip: "Stop using this preset (custom mappings are kept)", onClick: clearPreset, children: "Clear preset" }))] }) }), iconStyle.Preset && (_jsx(FormRow, { label: "Active:", children: _jsxs(Flex, { flexDirection: "column", className: "twa:gap-1 twa:max-w-[640px]", children: [_jsxs(Box, { className: "twa:text-xs twa:opacity-70", children: [ICON_STYLE_PRESET_DESCRIPTIONS[iconStyle.Preset], " \u2014", ' ', presetMappingsPreview.length, " mappings shipped with the preset."] }), renderMappingsPreview(presetMappingsPreview)] }) }))] }) })] }), _jsxs(Card, { shadow: false, className: "twa:mb-3", children: [_jsxs(Card.Title, { children: [_jsx(Box, { className: "twa:font-medium", children: "Custom Mappings" }), _jsx(Box, { className: "twa:text-xs twa:opacity-70 twa:font-normal twa:max-w-[520px]", children: iconStyle.Preset
+                                        ? 'Add any mappings that are not present in the selected preset'
+                                        : 'Add custom mappings entries (icon, key and description)' })] }), _jsxs(Card.Body, { children: [mappings.length === 0 ? (_jsx(Box, { className: "twa:text-xs twa:opacity-60 twa:max-w-[520px] twa:mb-2", children: iconStyle.Preset
+                                        ? 'No custom mappings — the preset above is being used as-is'
+                                        : 'No mappings applied - select a preset above or click "Add Mapping" to define your own' })) : (_jsxs(Box, { className: "twa:max-w-[720px]", children: [_jsxs(Flex, { alignItems: "center", className: "twa:gap-2 twa:px-2 twa:py-1 twa:text-xs twa:opacity-60", children: [_jsx(Box, { className: "twa:w-[44px] twa:shrink-0" }), _jsx(Box, { className: "twa:min-w-0 twa:flex-1", children: "Key" }), _jsx(Box, { className: "twa:min-w-0 twa:flex-1", children: "Description" }), _jsx(Box, { className: "twa:w-8 twa:shrink-0" })] }), mappings.map((m, i) => {
+                                            const isEditing = editingRow === i;
+                                            return (_jsxs(Box, { children: [_jsxs(Flex, { alignItems: "center", className: 'twa:gap-2 twa:px-2 twa:py-1 twa:rounded twa:hover:bg-[var(--ab-color-primarylight)]' +
+                                                            (isEditing ? ' twa:bg-[var(--ab-color-primarylight)]' : ''), children: [_jsx(Box, { className: "twa:w-[44px] twa:shrink-0 twa:flex twa:justify-center", children: _jsx(SimpleButton, { type: "button", variant: "raised", tone: isEditing ? 'accent' : 'none', className: "twa:!min-w-[40px] twa:!w-10 twa:!h-10 twa:!p-0 twa:justify-center twa:items-center", tooltip: isEditing ? 'Close icon editor' : 'Click to edit icon', onClick: () => setEditingRow(isEditing ? null : i), children: previewIcon(m.Icon) }) }), _jsx(Box, { className: "twa:min-w-0 twa:flex-1", children: _jsx(Input, { className: "twa:w-full", value: String(m.Key ?? ''), onChange: (e) => updateMapping(i, { Key: e.target.value }), placeholder: "Cell value" }) }), _jsx(Box, { className: "twa:min-w-0 twa:flex-1", children: _jsx(Input, { className: "twa:w-full", value: m.Description ?? '', onChange: (e) => updateMapping(i, {
+                                                                        Description: e.target.value || undefined,
+                                                                    }), placeholder: "Tooltip label (optional)" }) }), _jsx(Box, { className: "twa:w-8 twa:shrink-0 twa:flex twa:justify-center", children: _jsx(SimpleButton, { icon: "delete", variant: "text", tooltip: "Remove mapping", onClick: () => removeMapping(i) }) })] }), isEditing && (_jsxs(Box, { className: "twa:ml-[52px] twa:mr-2 twa:mb-2 twa:p-3 twa:rounded twa:bg-[var(--ab-color-surface)] twa:border twa:border-border", children: [_jsxs(Flex, { alignItems: "center", className: "twa:justify-between twa:mb-2", children: [_jsx(Box, { className: "twa:font-semibold twa:text-xs", children: "Edit icon" }), _jsx(SimpleButton, { variant: "text", icon: "check", tooltip: "Done", onClick: () => setEditingRow(null), children: "Done" })] }), _jsx(IconSpecEditorFields, { value: m.Icon, onChange: (next) => updateMapping(i, { Icon: next }) })] }))] }, i));
+                                        })] })), _jsx(Box, { className: "twa:mt-2", children: _jsx(SimpleButton, { variant: "raised", icon: "plus", onClick: addMapping, children: "Add Mapping" }) })] })] }), _jsxs(Card, { shadow: false, children: [_jsxs(Card.Title, { children: [_jsx(Box, { className: "twa:font-medium", children: "Matching" }), _jsx(Box, { className: "twa:text-xs twa:opacity-70 twa:font-normal twa:max-w-[520px]", children: "How keys are compared to cell values, and what to render when no mapping matches" })] }), _jsx(Card.Body, { children: _jsxs(FormLayout, { children: [_jsx(FormRow, { label: "Match Mode:", children: _jsx(Box, { className: "twa:max-w-[200px]", children: _jsx(SingleSelect, { className: "twa:w-full", value: iconStyle.MatchMode ?? 'Exact', onValueChange: (v) => update({ MatchMode: v }), items: [
+                                                    { value: 'Exact', label: 'Exact (===)' },
+                                                    { value: 'CaseInsensitive', label: 'Case-insensitive (strings)' },
+                                                ] }) }) }), _jsx(FormRow, { label: "Fallback:", children: _jsx(Box, { className: "twa:max-w-[200px]", children: _jsx(SingleSelect, { className: "twa:w-full", value: iconStyle.Fallback ?? 'Hide', onValueChange: (v) => update({ Fallback: v }), items: [
+                                                    { value: 'Hide', label: 'Show No Value' },
+                                                    { value: 'ShowText', label: 'Show Raw Value' },
+                                                    { value: 'Icon', label: 'Show Fallback Icon' },
+                                                ] }) }) }), iconStyle.Fallback === 'Icon' && (_jsx(FormRow, { label: "Fallback Icon:", children: _jsxs(Flex, { flexDirection: "column", className: "twa:gap-2", children: [_jsxs(Flex, { alignItems: "center", className: "twa:gap-2", children: [_jsx(SimpleButton, { type: "button", variant: "raised", tone: fallbackIconEditing ? 'accent' : 'none', className: "twa:!min-w-[40px] twa:!w-10 twa:!h-10 twa:!p-0 twa:justify-center twa:items-center", tooltip: fallbackIconEditing ? 'Close icon editor' : 'Click to edit icon', onClick: () => setFallbackIconEditing(!fallbackIconEditing), children: previewIcon(iconStyle.FallbackIcon) }), fallbackIconEditing && (_jsx(SimpleButton, { variant: "text", icon: "check", tooltip: "Done", onClick: () => setFallbackIconEditing(false), children: "Done" }))] }), fallbackIconEditing && (_jsx(Box, { className: "twa:p-3 twa:rounded twa:bg-[var(--ab-color-surface)] twa:border twa:border-border twa:max-w-[320px]", children: _jsx(IconSpecEditorFields, { value: iconStyle.FallbackIcon, onChange: (next) => update({ FallbackIcon: next }) }) }))] }) }))] }) })] })] }));
+    }
+    // ----- Style variant (wizard step title: "Style") ------------------------
+    const cellText = iconStyle.CellText ?? [];
+    const toolTipText = iconStyle.ToolTipText ?? [];
+    const cellTextDisabled = cellText.length === 0;
+    return (_jsxs(Box, { children: [_jsxs(Card, { shadow: false, className: "twa:mb-3", children: [_jsx(Card.Title, { children: "Sizing" }), _jsx(Card.Body, { children: _jsxs(FormLayout, { sizes: [...STYLE_FORM_SIZES], children: [_jsx(FormRow, { label: "Icon Size (px):", children: _jsx(Box, { className: "twa:max-w-[100px]", children: _jsx(Input, { type: "number", min: 8, step: 1, value: iconStyle.Size ?? '', placeholder: "18", className: "twa:w-full", onChange: (event) => {
+                                                const raw = event.target.value;
+                                                if (raw === '' || raw == null) {
+                                                    update({ Size: undefined });
+                                                    return;
+                                                }
+                                                const parsed = Number(raw);
+                                                update({
+                                                    Size: Number.isFinite(parsed) && parsed >= 8 ? parsed : undefined,
+                                                });
+                                            } }) }) }), _jsx(FormRow, { label: "Gap (px):", children: _jsx(Box, { className: "twa:max-w-[100px]", children: _jsx(NumberInput, { value: iconStyle.Gap ?? '', placeholder: "4", min: 0, step: 1, onChange: (value) => update({ Gap: typeof value === 'number' ? value : undefined }) }) }) })] }) })] }), _jsxs(Card, { shadow: false, className: "twa:mb-3", children: [_jsxs(Card.Title, { children: [_jsx(Box, { className: "twa:font-medium", children: "Cell Text" }), _jsx(Box, { className: "twa:text-xs twa:opacity-70 twa:font-normal twa:max-w-[520px]", children: "Optionally show the raw value or the matched description alongside the icon (e.g. flag plus label)." })] }), _jsxs(Card.Body, { children: [_jsxs(FormLayout, { sizes: [...STYLE_FORM_SIZES], children: [_jsxs(FormRow, { label: "Cell Display:", children: [_jsx(CheckBox, { checked: cellText.includes('CellValue'), onChange: (checked) => toggleCellText('CellValue', checked), children: "Cell Value" }), ' ', _jsx(CheckBox, { className: "twa:ml-3", checked: cellText.includes('IconDescription'), onChange: (checked) => toggleCellText('IconDescription', checked), children: "Description" })] }), _jsx(FormRow, { label: "Position:", children: _jsx(Box, { className: "twa:max-w-[160px]", children: _jsx(SingleSelect, { className: "twa:w-full", value: iconStyle.CellTextPosition ?? 'After', onValueChange: (v) => update({ CellTextPosition: v }), items: [
+                                                    { value: 'Before', label: 'Before' },
+                                                    { value: 'After', label: 'After' },
+                                                    { value: 'Above', label: 'Above' },
+                                                    { value: 'Below', label: 'Below' },
+                                                ] }) }) })] }), _jsx(Box, { className: `twa:mt-3 twa:pt-3 twa:border-t twa:border-foreground/15 ${cellTextDisabled ? 'twa:opacity-50' : ''}`, children: _jsx(StyledColumnFontStyleEditor, { api: api, disabled: disabled || cellTextDisabled, value: iconStyle.Font, onChange: onFontChange }) })] })] }), _jsxs(Card, { shadow: false, className: "twa:mb-3", children: [_jsxs(Card.Title, { children: [_jsx(Box, { className: "twa:font-medium", children: "Tooltip" }), _jsx(Box, { className: "twa:text-xs twa:opacity-70 twa:font-normal twa:max-w-[520px]", children: "Choose whether and how to display a tooltip" })] }), _jsx(Card.Body, { children: _jsx(FormLayout, { sizes: [...STYLE_FORM_SIZES], children: _jsxs(FormRow, { label: "Tooltip Display:", children: [_jsx(CheckBox, { checked: toolTipText.includes('CellValue'), onChange: (checked) => toggleToolTipText('CellValue', checked), children: "Cell Value" }), ' ', _jsx(CheckBox, { className: "twa:ml-3", checked: toolTipText.includes('IconDescription'), onChange: (checked) => toggleToolTipText('IconDescription', checked), children: "Description" })] }) }) })] }), _jsxs(Card, { shadow: false, children: [_jsxs(Card.Title, { children: [_jsx(Box, { className: "twa:font-medium", children: "Cell" }), _jsx(Box, { className: "twa:text-xs twa:opacity-70 twa:font-normal twa:max-w-[520px]", children: "Optional cell box styling (overrides Format Column properties)" })] }), _jsx(Card.Body, { children: _jsx(StyledColumnCellStyleEditor, { api: api, disabled: disabled, value: iconStyle.Cell, onChange: onCellChange }) })] })] }));
+};
+const IconSpecEditorFields = (props) => {
+    const kind = detectIconKind(props.value);
+    const [pendingKind, setPendingKind] = React.useState(null);
+    const prevValueRef = React.useRef(props.value);
+    React.useEffect(() => {
+        if (prevValueRef.current !== props.value) {
+            setPendingKind(null);
+            prevValueRef.current = props.value;
+        }
+    }, [props.value]);
+    const effectiveKind = pendingKind ?? kind;
+    const onKindChange = (next) => {
+        setPendingKind(next);
+        if (next === 'Emoji') {
+            props.onChange(typeof props.value === 'string' ? props.value : '');
+        }
+        else if (next === 'System') {
+            props.onChange(kind === 'System' ? props.value : { name: 'flag' });
+        }
+        else if (next === 'Url') {
+            props.onChange(kind === 'Url' ? props.value : { src: '' });
+        }
+    };
+    const isObject = typeof props.value === 'object' && props.value !== null;
+    const systemName = isObject && 'name' in props.value
+        ? props.value.name
+        : undefined;
+    const urlSrc = isObject && 'src' in props.value ? props.value.src : '';
+    return (_jsxs(Flex, { flexDirection: "column", className: "twa:gap-2 twa:min-w-[220px]", children: [_jsx(SingleSelect, { className: "twa:w-full", value: effectiveKind, onValueChange: (v) => onKindChange(v), items: [
+                    { value: 'Emoji', label: 'Emoji / text' },
+                    { value: 'System', label: 'System' },
+                    { value: 'Url', label: 'Image URL' },
+                ] }), effectiveKind === 'Emoji' && (_jsx(Input, { className: "twa:w-full", value: typeof props.value === 'string' ? props.value : '', onChange: (e) => props.onChange(e.target.value), placeholder: "\uD83C\uDDFA\uD83C\uDDF8  $  \u2B06" })), effectiveKind === 'System' && (_jsx(AdaptableIconSelector, { clearable: false, value: systemName, onChange: (iconName) => {
+                    if (iconName) {
+                        props.onChange({ name: iconName });
+                    }
+                } })), effectiveKind === 'Url' && (_jsx(Input, { className: "twa:w-full", value: urlSrc, onChange: (e) => props.onChange({ src: e.target.value }), placeholder: "https://\u2026" }))] }));
+};

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

@@ -0,0 +1,26 @@
+import * as React from 'react';
+import { StyledColumn } from '../../../AdaptableState/StyledColumnState';
+/** Summary line for the Range wizard step (bounds + bands only). */
+export declare const renderStyledColumnRangeBarRangeStepSummary: (data: StyledColumn) => React.JSX.Element;
+/** Summary for the Display wizard step (markers, track, text). */
+export declare const renderStyledColumnRangeBarDisplayStepSummary: (data: StyledColumn) => React.JSX.Element;
+/**
+ * Combined summary for the Styled Columns list row (preview + key facts).
+ */
+export declare const renderStyledColumnRangeBarSummary: (data: StyledColumn) => React.JSX.Element;
+/**
+ * Returns `true` if the Range Bar's bounds are well-formed, otherwise an
+ * error string explaining what's missing. Used as the wizard step's
+ * `isValid` callback.
+ */
+/** Bounds + bands step — Min / Max required and numeric pair must span. */
+export declare const isValidRangeBarBounds: (data: StyledColumn) => true | string;
+export interface StyledColumnWizardRangeBarSectionProps {
+    onChange: (styledColumn: StyledColumn) => void;
+    /**
+     * - `'range'` — Min, Max, Reference, and optional bands (the numeric scale).
+     * - `'appearance'` — markers, track, overflow behaviour, cell text & tooltip.
+     */
+    variant: 'range' | 'appearance';
+}
+export declare const StyledColumnWizardRangeBarSection: React.FunctionComponent<StyledColumnWizardRangeBarSectionProps>;