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

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

@@ -9,8 +9,6 @@ import { RangesComponent } from '../../Components/RangesComponent';
 import { ColumnSelector } from '../../Components/Selectors/ColumnSelector';
 import { getGraySwatchColor } from '../../UIHelper';
 import { useOnePageAdaptableWizardContext } from '../../Wizard/OnePageAdaptableWizard';
-import DropdownButton from '../../../components/DropdownButton';
-import ArrayExtensions from '../../../Utilities/Extensions/ArrayExtensions';
 import AdaptableInput from '../../Components/AdaptableInput';
 import { Box, Flex } from '../../../components/Flex';
 import { BulletRangesSummaryPreview } from './StyledColumnWizardStyleSection/Components/BulletRangesSummaryPreview';
@@ -18,10 +16,10 @@ import { StyledColumnBulletPreviewCard } from './StyledColumnWizardStyleSection/
 import { SingleSelect } from '../../../components/NewSelect';
 import { getCellFontStyleSummaryItems, StyledColumnFontStyleEditor, } from './StyledColumnSliceStyleEditors';
 import { Card } from '../../../components/Card';
+import { renderSummaryStringTags } from '../../Wizard/SummaryColorTag';
+import { formatBarChartCellTextLayoutSummary, getActiveBarChartCellTextTokens, hasBarChartCellTextConfigured, patchBarChartCellTextPlacement, resolveBarChartCellTextLayout, toggleBarChartCellTextToken, } from '../../../Utilities/Helpers/barChartCellText';
+import { BarChartCellTextLayoutEditor } from './StyledColumnWizardStyleSection/Components/BarChartCellTextLayoutEditor';
 const BULLET_STYLE_FORM_SIZES = ['200px', '1fr'];
-// ---------------------------------------------------------------------------
-// Summary helpers
-// ---------------------------------------------------------------------------
 const getTargetSummary = (target) => {
     if (target == undefined) {
         return null;
@@ -73,11 +71,12 @@ export const getStyledColumnBulletRangesViewValues = (data) => {
 };
 const buildStyledColumnBulletStyleSummaryStrings = (bullet, options) => {
     const items = [];
-    const targetSummary = getTargetSummary(bullet.Target);
+    const targetProperties = bullet.TargetProperties;
+    const targetSummary = getTargetSummary(targetProperties?.Target);
     if (targetSummary) {
         items.push(`Target: ${targetSummary}`);
     }
-    const marker = bullet.TargetMarker;
+    const marker = targetProperties?.Marker;
     if (marker?.Shape && marker.Shape !== 'Line') {
         items.push(`Target Marker Shape: ${marker.Shape}`);
     }
@@ -90,19 +89,24 @@ const buildStyledColumnBulletStyleSummaryStrings = (bullet, options) => {
     if (bullet.Orientation === 'Vertical') {
         items.push('Orientation: Vertical');
     }
-    if (bullet.BarColor) {
-        items.push(`Bar Colour: ${bullet.BarColor}`);
+    const barProperties = bullet.Bar;
+    if (barProperties?.Color) {
+        items.push(`Bar Colour: ${barProperties.Color}`);
     }
-    if (bullet.BarHeight != null) {
-        items.push(`${bullet.Orientation === 'Vertical' ? 'Bar Width' : 'Bar Height'}: ${bullet.BarHeight}px`);
+    if (barProperties?.Height != null) {
+        items.push(`${bullet.Orientation === 'Vertical' ? 'Bar Width' : 'Bar Height'}: ${barProperties.Height}px`);
     }
     items.push(`Origin: ${formatBulletOriginLabel(bullet.Origin)}`);
     if (bullet.BackColor) {
         items.push(`Back Colour: ${bullet.BackColor}`);
     }
-    if (bullet.CellText?.length) {
-        items.push(`Cell Text: ${formatBulletCellTextSummary(bullet.CellText)}`);
-        items.push(`Cell Text Position: ${bullet.CellTextPosition ?? 'Below'}`);
+    if (hasBarChartCellTextConfigured(bullet.CellTextProperties)) {
+        const tokens = getActiveBarChartCellTextTokens(bullet.CellTextProperties);
+        items.push(`Cell Text: ${formatBulletCellTextSummary(tokens)}`);
+        const layoutSummary = formatBarChartCellTextLayoutSummary(resolveBarChartCellTextLayout(bullet.CellTextProperties));
+        if (layoutSummary) {
+            items.push(`Placement: ${layoutSummary}`);
+        }
     }
     else if (options.includeEmptyCellText) {
         items.push('Cell Text: None');
@@ -135,7 +139,7 @@ export const renderStyledColumnBulletRangesSummary = (data) => {
         return _jsx(Tag, { children: "No bands defined" });
     }
     const tagItems = getStyledColumnBulletRangesViewValues(data);
-    return (_jsxs(Flex, { flexDirection: "column", className: "twa:gap-2 twa:items-start", children: [_jsx(Flex, { alignItems: "center", className: "twa:flex-wrap twa:gap-2", children: tagItems.map((item) => (_jsx(Tag, { children: item }, item))) }), _jsx(BulletRangesSummaryPreview, { bulletStyle: bullet })] }));
+    return (_jsxs(Flex, { flexDirection: "column", className: "twa:gap-2 twa:items-start", children: [renderSummaryStringTags(tagItems), _jsx(BulletRangesSummaryPreview, { bulletStyle: bullet })] }));
 };
 export const StyledColumnBulletRangesView = ({ data }) => renderStyledColumnBulletRangesSummary(data);
 /** Wizard / list-view summary for the Style step (target, bar, text, font). */
@@ -151,7 +155,7 @@ export const renderStyledColumnBulletStyleSummary = (data) => {
     if (!items.length) {
         return _jsx(Tag, { children: "No Style Defined" });
     }
-    return (_jsx(Flex, { alignItems: "center", className: "twa:flex-wrap twa:gap-2", children: items.map((item) => (_jsx(Tag, { children: item }, item))) }));
+    return renderSummaryStringTags(items);
 };
 /** Full combined summary (ranges + style); kept for callers that expect one block. */
 export const renderStyledColumnBulletSummary = (data) => {
@@ -260,20 +264,28 @@ export const StyledColumnWizardBulletSection = (props) => {
         });
     }, [data, bullet]);
     // -- Target ----------------------------------------------------------------
-    const currentMode = getSimpleTargetMode(bullet.Target);
+    const currentMode = getSimpleTargetMode(bullet.TargetProperties?.Target);
+    const updateTargetProperties = (patch) => {
+        const merged = {
+            ...bullet.TargetProperties,
+            ...patch,
+        };
+        // Strip the wrapper when nothing meaningful is left.
+        const isEmpty = merged.Target == undefined && merged.Marker == undefined;
+        update({ TargetProperties: isEmpty ? undefined : merged });
+    };
+    const setTarget = (target) => updateTargetProperties({ Target: target });
     const handleTargetModeChange = (mode) => {
         if (mode === 'None') {
-            const next = { ...bullet };
-            delete next.Target;
-            props.onChange({ ...data, BulletChartStyle: next });
+            setTarget(undefined);
             return;
         }
         if (mode === 'Col-Avg' || mode === 'Col-Median') {
-            update({ Target: mode });
+            setTarget(mode);
             return;
         }
         if (mode === 'Number') {
-            update({ Target: minMaxRangeValues?.max ?? 0 });
+            setTarget(minMaxRangeValues?.max ?? 0);
             return;
         }
         if (mode === 'Column') {
@@ -281,38 +293,43 @@ export const StyledColumnWizardBulletSection = (props) => {
             const candidate = api.columnApi
                 .getNumericColumns()
                 .find((c) => c.columnId !== data.ColumnId);
-            update({ Target: candidate?.columnId ?? '' });
+            setTarget(candidate?.columnId ?? '');
             return;
         }
     };
     const handleNumericTargetChange = (value) => {
-        if (value == undefined || isNaN(value)) {
-            update({ Target: 0 });
-        }
-        else {
-            update({ Target: value });
-        }
+        setTarget(value == undefined || isNaN(value) ? 0 : value);
     };
     const handleColumnTargetChange = (columnId) => {
-        update({ Target: columnId });
+        setTarget(columnId);
+    };
+    // -- Bar -------------------------------------------------------------------
+    const updateBar = (patch) => {
+        const merged = {
+            ...bullet.Bar,
+            ...patch,
+        };
+        const isEmpty = merged.Color == undefined && merged.Height == undefined;
+        update({ Bar: isEmpty ? undefined : merged });
     };
     // -- Marker ----------------------------------------------------------------
     const updateMarker = (patch) => {
-        update({
-            TargetMarker: {
+        updateTargetProperties({
+            Marker: {
                 Shape: 'Line',
-                ...bullet.TargetMarker,
+                ...bullet.TargetProperties?.Marker,
                 ...patch,
             },
         });
     };
     // -- Cell text -------------------------------------------------------------
-    const toggleCellText = (token, checked) => {
-        const current = bullet.CellText ?? [];
-        const next = checked
-            ? Array.from(new Set([...current, token]))
-            : current.filter((t) => t !== token);
-        update({ CellText: next });
+    const toggleCellText = (token, show) => {
+        update(toggleBarChartCellTextToken(bullet.CellTextProperties, token, show));
+    };
+    const onCellTextPlacementChange = (token, patch) => {
+        update({
+            CellTextProperties: patchBarChartCellTextPlacement(bullet.CellTextProperties, token, patch),
+        });
     };
     const toggleToolTipText = (token, checked) => {
         const current = bullet.ToolTipText ?? [];
@@ -321,9 +338,6 @@ export const StyledColumnWizardBulletSection = (props) => {
             : current.filter((t) => t !== token);
         update({ ToolTipText: next });
     };
-    const handleCellTextPositionChange = (pos) => {
-        update({ CellTextPosition: pos });
-    };
     // -------------------------------------------------------------------------
     // Render
     // -------------------------------------------------------------------------
@@ -336,22 +350,27 @@ export const StyledColumnWizardBulletSection = (props) => {
     if (variant === 'ranges') {
         return (_jsx(Box, { children: _jsxs(Card, { shadow: false, children: [_jsxs(Card.Title, { children: [_jsx(Box, { className: "twa:font-medium", children: "Ranges" }), _jsx(Box, { className: "twa:text-xs twa:opacity-70 twa:font-normal twa:max-w-[520px]", children: "Define qualitative bands for the bullet scale" })] }), _jsx(Card.Body, { children: _jsx(RangesComponent, { disabled: disabled, minMaxRangeValues: minMaxRangeValues, api: api, scope: scope, ranges: bullet.CellRanges, rangeValueType: bullet.RangeValueType, onRangeValueTypeChange: onRangeValueTypeChange, columnComparison: bullet.ColumnComparison, updateRanges: onUpdateRanges, updateColumnComparison: onUpdateColumnComparison, hideColumnComparison: true }) })] }) }));
     }
-    const numericTargetValue = typeof bullet.Target === 'number'
-        ? bullet.Target
-        : typeof bullet.Target?.Value === 'number'
-            ? bullet.Target.Value
+    const primaryTarget = Array.isArray(bullet.TargetProperties?.Target)
+        ? bullet.TargetProperties?.Target?.[0]
+        : bullet.TargetProperties?.Target;
+    const numericTargetValue = typeof primaryTarget === 'number'
+        ? primaryTarget
+        : typeof primaryTarget?.Value === 'number'
+            ? primaryTarget.Value
             : undefined;
-    const columnTargetValue = typeof bullet.Target === 'string' && bullet.Target !== 'Col-Avg' && bullet.Target !== 'Col-Median'
-        ? bullet.Target
-        : typeof bullet.Target?.Value === 'string'
-            ? bullet.Target.Value
+    const columnTargetValue = typeof primaryTarget === 'string' && primaryTarget !== 'Col-Avg' && primaryTarget !== 'Col-Median'
+        ? primaryTarget
+        : typeof primaryTarget?.Value === 'string'
+            ? primaryTarget.Value
             : undefined;
+    const markerCfg = bullet.TargetProperties?.Marker;
     const marker = {
-        Shape: bullet.TargetMarker?.Shape ?? 'Line',
-        Color: bullet.TargetMarker?.Color ?? '',
-        Size: bullet.TargetMarker?.Size ?? (bullet.TargetMarker?.Shape === 'Line' ? 2 : 8),
+        Shape: markerCfg?.Shape ?? 'Line',
+        Color: markerCfg?.Color ?? '',
+        Size: markerCfg?.Size ?? (markerCfg?.Shape === 'Line' ? 2 : 8),
     };
-    const cellTextDisabled = ArrayExtensions.IsNullOrEmpty(bullet.CellText) || disabled;
+    const cellTextProperties = bullet.CellTextProperties;
+    const cellTextDisabled = !hasBarChartCellTextConfigured(cellTextProperties) || disabled;
     return (_jsxs(Box, { children: [_jsxs(Card, { shadow: false, className: "twa:mb-3", children: [_jsxs(Card.Title, { children: [_jsx(Box, { className: "twa:font-medium", children: "Target" }), _jsx(Box, { className: "twa:text-xs twa:opacity-70 twa:font-normal twa:max-w-[520px]", children: "Select a target value for the bullet scale" })] }), _jsx(Card.Body, { children: _jsxs(FormLayout, { sizes: [...BULLET_STYLE_FORM_SIZES], children: [_jsx(FormRow, { label: "Target:", children: _jsx(Box, { className: "twa:max-w-[180px]", children: _jsx(SingleSelect, { className: "twa:w-full", value: currentMode, onValueChange: (v) => handleTargetModeChange(v), items: [
                                                 { value: 'None', label: 'None' },
                                                 { value: 'Number', label: 'Fixed Number' },
@@ -361,8 +380,8 @@ export const StyledColumnWizardBulletSection = (props) => {
                                             ] }) }) }), currentMode === 'Number' && (_jsx(FormRow, { label: "Target Value:", children: _jsx(Box, { className: "twa:max-w-[160px]", children: _jsx(AdaptableInput, { type: "number", value: numericTargetValue ?? '', onChange: (e) => handleNumericTargetChange(e.target.value === '' ? undefined : Number(e.target.value)) }) }) })), currentMode === 'Column' && (_jsx(FormRow, { label: "Target Column:", children: _jsx(Box, { className: "twa:max-w-[220px]", children: _jsx(ColumnSelector, { type: "number", value: columnTargetValue ?? '', onChange: handleColumnTargetChange, filterColumn: (c) => c.columnId !== data.ColumnId, placeholder: "Select numeric column" }) }) })), currentMode !== 'None' && (_jsxs(_Fragment, { children: [_jsx(FormRow, { label: "Marker Shape:", children: _jsx(Box, { className: "twa:max-w-[160px]", children: _jsx(SingleSelect, { className: "twa:w-full", value: marker.Shape, onValueChange: (s) => updateMarker({ Shape: s }), items: MARKER_SHAPES.map((s) => ({ value: s.value, label: s.label })) }) }) }), _jsx(FormRow, { label: "Marker Colour:", children: _jsx(ColorPicker, { disabled: disabled, api: api, value: marker.Color || undefined, onChange: (c) => updateMarker({ Color: c }) }) }), _jsx(FormRow, { label: "Marker Size:", children: _jsx(Box, { className: "twa:max-w-[100px]", children: _jsx(AdaptableInput, { type: "number", min: 1, value: marker.Size, onChange: (e) => updateMarker({ Size: Number(e.target.value) }) }) }) })] }))] }) })] }), _jsxs(Card, { shadow: false, className: "twa:mb-3", children: [_jsxs(Card.Title, { children: [_jsx(Box, { className: "twa:font-medium", children: "Bar" }), _jsx(Box, { className: "twa:text-xs twa:opacity-70 twa:font-normal twa:max-w-[520px]", children: "Set the bar orientation and height" })] }), _jsx(Card.Body, { children: _jsxs(FormLayout, { sizes: [...BULLET_STYLE_FORM_SIZES], children: [_jsx(FormRow, { label: "Orientation:", children: _jsx(Box, { className: "twa:max-w-[160px]", children: _jsx(SingleSelect, { className: "twa:w-full", value: bullet.Orientation ?? 'Horizontal', onValueChange: (v) => update({ Orientation: v }), items: [
                                                 { value: 'Horizontal', label: 'Horizontal' },
                                                 { value: 'Vertical', label: 'Vertical' },
-                                            ] }) }) }), bullet.Orientation === 'Vertical' && (_jsx(FormRow, { label: "", children: _jsxs(Box, { className: "twa:text-xs twa:text-neutral-500", children: ["Tip: vertical bullet charts need a tall row height to be readable (we recommend at least 60px). Set ", _jsx("code", { children: "rowHeight" }), " on ", _jsx("code", { children: " gridOptions " }), " or use", ' ', _jsx("code", { children: "getRowHeight" }), "."] }) })), _jsx(FormRow, { label: "Bar Colour:", children: _jsx(ColorPicker, { disabled: disabled, api: api, value: bullet.BarColor, onChange: (c) => update({ BarColor: c }) }) }), _jsx(FormRow, { label: bullet.Orientation === 'Vertical' ? 'Bar Width (px):' : 'Bar Height (px):', children: _jsx(Box, { className: "twa:max-w-[100px]", children: _jsx(AdaptableInput, { type: "number", min: 1, value: bullet.BarHeight ?? '', onChange: (e) => update({
-                                                BarHeight: e.target.value === '' ? undefined : Number(e.target.value),
+                                            ] }) }) }), bullet.Orientation === 'Vertical' && (_jsx(FormRow, { label: "", children: _jsxs(Box, { className: "twa:text-xs twa:text-neutral-500", children: ["Tip: vertical bullet charts need a tall row height to be readable (we recommend at least 60px). Set ", _jsx("code", { children: "rowHeight" }), " on ", _jsx("code", { children: " gridOptions " }), " or use", ' ', _jsx("code", { children: "getRowHeight" }), "."] }) })), _jsx(FormRow, { label: "Bar Colour:", children: _jsx(ColorPicker, { disabled: disabled, api: api, value: bullet.Bar?.Color, onChange: (c) => updateBar({ Color: c }) }) }), _jsx(FormRow, { label: bullet.Orientation === 'Vertical' ? 'Bar Width (px):' : 'Bar Height (px):', children: _jsx(Box, { className: "twa:max-w-[100px]", children: _jsx(AdaptableInput, { type: "number", min: 1, value: bullet.Bar?.Height ?? '', onChange: (e) => updateBar({
+                                                Height: e.target.value === '' ? undefined : Number(e.target.value),
                                             }), placeholder: "8" }) }) }), _jsx(FormRow, { label: "Origin:", children: _jsx(Box, { className: "twa:max-w-[160px]", children: _jsx(SingleSelect, { className: "twa:w-full", value: typeof bullet.Origin === 'number' ? 'Number' : (bullet.Origin ?? 'Auto'), onValueChange: (v) => {
                                                 if (v === 'Auto' || v === 'Zero') {
                                                     update({ Origin: v });
@@ -373,20 +392,7 @@ export const StyledColumnWizardBulletSection = (props) => {
                                             }, items: [
                                                 { value: 'Auto', label: 'Auto' },
                                                 { value: 'Zero', label: 'Zero' },
-                                            ] }) }) })] }) })] }), _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: "Choose whether to display text in the cell (and if so, then position and font))" })] }), _jsxs(Card.Body, { children: [_jsxs(FormLayout, { sizes: [...BULLET_STYLE_FORM_SIZES], children: [_jsxs(FormRow, { label: "Cell Display:", children: [_jsx(CheckBox, { disabled: disabled, checked: bullet.CellText?.includes('CellValue'), onChange: (checked) => toggleCellText('CellValue', checked), children: "Cell Value" }), ' ', _jsx(CheckBox, { disabled: disabled, className: "twa:ml-3", checked: bullet.CellText?.includes('PercentageValue'), onChange: (checked) => toggleCellText('PercentageValue', checked), children: "Percent Value" })] }), _jsx(FormRow, { label: "Cell Display Position:", children: _jsx(DropdownButton, { disabled: cellTextDisabled, columns: ['label'], items: [
-                                                {
-                                                    label: 'Above Bar',
-                                                    onClick: () => handleCellTextPositionChange('Above'),
-                                                },
-                                                {
-                                                    label: 'Below Bar',
-                                                    onClick: () => handleCellTextPositionChange('Below'),
-                                                },
-                                                {
-                                                    label: 'Merged',
-                                                    onClick: () => handleCellTextPositionChange('Merged'),
-                                                },
-                                            ], children: bullet.CellTextPosition ?? '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: cellTextDisabled, value: bullet.Font, onChange: (next) => {
+                                            ] }) }) })] }) })] }), _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: "Pick which values to display and where each one sits around the bar" })] }), _jsxs(Card.Body, { children: [_jsx(FormLayout, { sizes: [...BULLET_STYLE_FORM_SIZES], children: _jsx(FormRow, { label: "Cell Text Layout:", children: _jsx(BarChartCellTextLayoutEditor, { disabled: disabled, cellTextProperties: cellTextProperties, onToggle: toggleCellText, onPlacementChange: onCellTextPlacementChange }) }) }), _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: cellTextDisabled, value: bullet.Font, onChange: (next) => {
                                         if (next) {
                                             update({ Font: next });
                                         }

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

@@ -10,6 +10,7 @@ import { NumberInput } from '../../../components/Input/NumberInput';
 import { DEFAULT_GRADIENT_MAX_ALPHA, DEFAULT_GRADIENT_MIN_ALPHA, } from '../../../Utilities/Helpers/StyledColumnGradientHelper';
 import { getCellFontStyleSummaryItems, StyledColumnFontStyleEditor, } from './StyledColumnSliceStyleEditors';
 import { Card } from '../../../components/Card';
+import { renderSummaryStringTags } from '../../Wizard/SummaryColorTag';
 import { StyledColumnGradientPreviewCard } from './StyledColumnWizardStyleSection/Components/StyledColumnGradientPreview';
 const STYLE_FORM_SIZES = ['200px', '1fr'];
 function formatGradientToolTipSummary(opts) {
@@ -51,7 +52,7 @@ export const renderStyledColumnGradientStyleSummary = (data) => {
         return _jsx(Tag, { children: "No Styling Defined" });
     }
     const items = buildStyledColumnGradientStyleSummaryStrings(gs, { includeEmptyTooltip: true });
-    return (_jsx(Flex, { alignItems: "center", className: "twa:flex-wrap twa:gap-2", children: items.map((item) => (_jsx(Tag, { children: item }, item))) }));
+    return renderSummaryStringTags(items);
 };
 export const StyledColumnWizardGradientSection = (props) => {
     const { data, api } = useOnePageAdaptableWizardContext();

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

@@ -5,17 +5,22 @@ import FormLayout, { FormRow } from '../../../components/FormLayout';
 import { Tag } from '../../../components/Tag';
 import { CheckBox } from '../../../components/CheckBox';
 import SimpleButton from '../../../components/SimpleButton';
+import { ButtonNew } from '../../Components/Buttons/ButtonNew';
 import { SingleSelect } from '../../../components/NewSelect';
 import { NumberInput } from '../../../components/Input/NumberInput';
 import Input from '../../../components/Input';
+import { Popover, PopoverContent, PopoverTrigger } from '../../../components/ui/popover';
+import { IconSelectorPanel } from '../../../components/IconSelector';
 import { useOnePageAdaptableWizardContext } from '../../Wizard/OnePageAdaptableWizard';
-import { AdaptableIconSelector } from '../../Components/AdaptableIconSelector';
+import { useAdaptable } from '../../AdaptableContext';
 import { AdaptableIconComponent } from '../../Components/AdaptableIconComponent';
 import { ICON_STYLE_PRESET_DESCRIPTIONS, ICON_STYLE_PRESET_LABELS, getIconStylePresetMappings, } from '../../../Utilities/Helpers/IconStylePresets';
 import { resolveEffectiveIconStyleMappings, resolveIconStyleMappingsForSummaryPreview } from '../../../agGrid/cellRenderers/IconRenderer';
 import { Card } from '../../../components/Card';
+import { renderSummaryStringTags } from '../../Wizard/SummaryColorTag';
 import { getCellBoxStyleSummaryItems, getCellFontStyleSummaryItems, StyledColumnCellStyleEditor, StyledColumnFontStyleEditor, } from './StyledColumnSliceStyleEditors';
 import { StyledColumnIconPreviewCard } from './StyledColumnWizardStyleSection/Components/StyledColumnIconPreview';
+import { wizardSelectionSimpleButtonProps } from '../../../Utilities/wizardSelection';
 const STYLE_FORM_SIZES = ['200px', '1fr'];
 const detectIconKind = (spec) => {
     if (typeof spec === 'string')
@@ -73,8 +78,9 @@ export const getStyledColumnIconMappingsViewValues = (data) => {
     if (ic.MatchMode && ic.MatchMode !== 'Exact') {
         items.push(`Match Mode: ${ic.MatchMode}`);
     }
-    if (ic.Fallback && ic.Fallback !== 'Hide') {
-        items.push(`Fallback: ${ic.Fallback}`);
+    const fallbackMode = ic.FallbackProperties?.Mode;
+    if (fallbackMode && fallbackMode !== 'Hide') {
+        items.push(`Fallback: ${fallbackMode}`);
     }
     return items;
 };
@@ -86,9 +92,10 @@ const buildStyledColumnIconStyleSummaryStrings = (ic, options) => {
     if (ic.Gap != null) {
         items.push(`Gap: ${ic.Gap}px`);
     }
-    if (ic.CellText?.length) {
-        items.push(`Cell Text: ${formatIconCellTextSummary(ic.CellText)}`);
-        items.push(`Cell Text Position: ${ic.CellTextPosition ?? 'After'}`);
+    const ctp = ic.CellTextProperties;
+    if (ctp?.CellText?.length) {
+        items.push(`Cell Text: ${formatIconCellTextSummary(ctp.CellText)}`);
+        items.push(`Cell Text Position: ${ctp.CellTextPosition ?? 'After'}`);
     }
     else if (options.includeEmptyCellText) {
         items.push('Cell Text: None');
@@ -125,7 +132,7 @@ export const renderStyledColumnIconMappingsSummary = (data) => {
     }
     const tagItems = getStyledColumnIconMappingsViewValues(data);
     const previewMappings = resolveIconStyleMappingsForSummaryPreview(ic);
-    return (_jsxs(Flex, { flexDirection: "column", className: "twa:gap-2 twa:items-start", children: [_jsx(Flex, { alignItems: "center", className: "twa:flex-wrap twa:gap-2", children: tagItems.map((item) => (_jsx(Tag, { children: item }, item))) }), renderMappingsPreview(previewMappings)] }));
+    return (_jsxs(Flex, { flexDirection: "column", className: "twa:gap-2 twa:items-start", children: [renderSummaryStringTags(tagItems), renderMappingsPreview(previewMappings)] }));
 };
 export const StyledColumnIconMappingsView = ({ data }) => renderStyledColumnIconMappingsSummary(data);
 /** Style step summary (size, text, tooltip, font / cell). */
@@ -141,7 +148,7 @@ export const renderStyledColumnIconStyleSummary = (data) => {
     if (!items.length) {
         return _jsx(Tag, { children: "No Style Defined" });
     }
-    return (_jsx(Flex, { alignItems: "center", className: "twa:flex-wrap twa:gap-2", children: items.map((item) => (_jsx(Tag, { children: item }, item))) }));
+    return renderSummaryStringTags(items);
 };
 /**
  * Combined summary for the Styled Columns list row (preview + key facts).
@@ -172,11 +179,7 @@ export const StyledColumnWizardIconSection = (props) => {
     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 [autoOpenPickerIndex, setAutoOpenPickerIndex] = React.useState(null);
     const update = (patch) => {
         props.onChange({
             ...data,
@@ -236,9 +239,7 @@ export const StyledColumnWizardIconSection = (props) => {
     };
     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);
+        setAutoOpenPickerIndex(null);
     };
     const addMapping = () => {
         const next = [
@@ -249,18 +250,40 @@ export const StyledColumnWizardIconSection = (props) => {
             },
         ];
         setMappings(next);
-        // Auto-expand the newly added row so the user can edit straight away.
-        setEditingRow(next.length - 1);
+        setAutoOpenPickerIndex(next.length - 1);
     };
     // -----------------------------------------------------------------------
     // CellText helpers
     // -----------------------------------------------------------------------
+    const updateCellTextProperties = (patch) => {
+        const merged = {
+            ...iconStyle.CellTextProperties,
+            ...patch,
+        };
+        // Strip the wrapper when both inner properties are unset, so empty state
+        // serialises cleanly.
+        const isEmpty = !merged.CellText?.length && merged.CellTextPosition == undefined;
+        update({ CellTextProperties: isEmpty ? undefined : merged });
+    };
     const toggleCellText = (token, checked) => {
-        const current = iconStyle.CellText ?? [];
+        const current = iconStyle.CellTextProperties?.CellText ?? [];
         const next = checked
             ? Array.from(new Set([...current, token]))
             : current.filter((t) => t !== token);
-        update({ CellText: next });
+        updateCellTextProperties({ CellText: next });
+    };
+    // -----------------------------------------------------------------------
+    // Fallback helpers
+    // -----------------------------------------------------------------------
+    const updateFallbackProperties = (patch) => {
+        const merged = {
+            ...iconStyle.FallbackProperties,
+            ...patch,
+        };
+        // Strip the wrapper when there's nothing to remember; the renderer
+        // already defaults to `Mode: 'Hide'` when `FallbackProperties` is unset.
+        const isEmpty = (merged.Mode == undefined || merged.Mode === 'Hide') && merged.Icon == undefined;
+        update({ FallbackProperties: isEmpty ? undefined : merged });
     };
     const toggleToolTipText = (token, checked) => {
         const current = iconStyle.ToolTipText ?? [];
@@ -276,27 +299,27 @@ export const StyledColumnWizardIconSection = (props) => {
         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
+        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, { ...wizardSelectionSimpleButtonProps(iconStyle.Preset === p), 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 (===)' },
+                                        : '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) => (_jsxs(Flex, { alignItems: "center", className: "twa:gap-2 twa:px-2 twa:py-1 twa:rounded twa:hover:bg-[var(--ab-color-primarylight)]", children: [_jsx(Box, { className: "twa:w-[44px] twa:shrink-0 twa:flex twa:justify-center", children: _jsx(IconPickerButton, { value: m.Icon, defaultOpen: autoOpenPickerIndex === i, onOpenChange: (open) => {
+                                                            if (!open && autoOpenPickerIndex === i) {
+                                                                setAutoOpenPickerIndex(null);
+                                                            }
+                                                        }, onChange: (next) => updateMapping(i, { Icon: next }) }) }), _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) }) })] }, i)))] })), _jsx(Box, { className: "twa:mt-2", children: _jsx(ButtonNew, { 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 Match Required' },
                                                     { 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: [
+                                                ] }) }) }), _jsx(FormRow, { label: "Fallback:", children: _jsx(Box, { className: "twa:max-w-[200px]", children: _jsx(SingleSelect, { className: "twa:w-full", value: iconStyle.FallbackProperties?.Mode ?? 'Hide', onValueChange: (v) => updateFallbackProperties({ Mode: 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 }) }) }))] }) }))] }) })] })] }));
+                                                ] }) }) }), iconStyle.FallbackProperties?.Mode === 'Icon' && (_jsx(FormRow, { label: "Fallback Icon:", children: _jsx(IconPickerButton, { value: iconStyle.FallbackProperties?.Icon, onChange: (next) => updateFallbackProperties({ Icon: next }) }) }))] }) })] })] }));
     }
     // ----- Style variant (wizard step title: "Style") ------------------------
-    const cellText = iconStyle.CellText ?? [];
+    const cellText = iconStyle.CellTextProperties?.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) => {
@@ -309,14 +332,39 @@ export const StyledColumnWizardIconSection = (props) => {
                                                 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: [
+                                            } }) }) }), _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.CellTextProperties?.CellTextPosition ?? 'After', onValueChange: (v) => updateCellTextProperties({
+                                                    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 }) })] }), _jsx(StyledColumnIconPreviewCard, { data: data })] }));
 };
+// ---------------------------------------------------------------------------
+// Icon picker — click-to-open popover (closes on outside click or system pick)
+// ---------------------------------------------------------------------------
+const ICON_KIND_OPTIONS = [
+    { value: 'Emoji', label: 'Emoji' },
+    { value: 'System', label: 'Built-in' },
+    { value: 'Url', label: 'Image URL' },
+];
+const IconPickerButton = (props) => {
+    const [open, setOpen] = React.useState(props.defaultOpen ?? false);
+    React.useEffect(() => {
+        if (props.defaultOpen) {
+            setOpen(true);
+        }
+    }, [props.defaultOpen]);
+    const handleOpenChange = (next) => {
+        setOpen(next);
+        props.onOpenChange?.(next);
+    };
+    return (_jsxs(Popover, { open: open, onOpenChange: handleOpenChange, children: [_jsx(PopoverTrigger, { nativeButton: true, render: _jsx(SimpleButton, { type: "button", tooltip: "Choose icon", ...wizardSelectionSimpleButtonProps(open, 'twa:!min-w-[40px] twa:!w-10 twa:!h-10 twa:!p-0 twa:justify-center twa:items-center'), children: previewIcon(props.value) }) }), _jsx(PopoverContent, { align: "start", side: "bottom", sideOffset: 8, className: "twa:!w-[300px] twa:max-w-[300px] twa:p-3 twa:gap-0", children: _jsx(IconSpecEditorFields, { value: props.value, onChange: props.onChange, onSystemIconSelected: () => handleOpenChange(false) }) })] }));
+};
 const IconSpecEditorFields = (props) => {
+    const adaptable = useAdaptable();
+    const customIcons = adaptable.api.userInterfaceApi.getCustomIcons();
     const kind = detectIconKind(props.value);
     const [pendingKind, setPendingKind] = React.useState(null);
     const prevValueRef = React.useRef(props.value);
@@ -344,13 +392,10 @@ const IconSpecEditorFields = (props) => {
         ? 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) => {
+    return (_jsxs(Flex, { flexDirection: "column", className: "twa:gap-3 twa:w-full", children: [_jsx(Box, { className: "twa:grid twa:grid-cols-3 twa:gap-1 twa:w-full", role: "tablist", "aria-label": "Icon type", children: ICON_KIND_OPTIONS.map((option) => (_jsx(SimpleButton, { type: "button", role: "tab", "aria-selected": effectiveKind === option.value, ...wizardSelectionSimpleButtonProps(effectiveKind === option.value, 'twa:w-full twa:min-h-[32px] twa:h-8 twa:px-1 twa:text-xs twa:leading-tight'), onClick: () => onKindChange(option.value), children: option.label }, option.value))) }), 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(IconSelectorPanel, { className: "twa:p-0", showTitle: false, customIcons: customIcons, value: systemName, onChange: (iconName) => {
                     if (iconName) {
                         props.onChange({ name: iconName });
+                        props.onSystemIconSelected?.();
                     }
                 } })), effectiveKind === 'Url' && (_jsx(Input, { className: "twa:w-full", value: urlSrc, onChange: (e) => props.onChange({ src: e.target.value }), placeholder: "https://\u2026" }))] }));
 };