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

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

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.StyledColumnWizardIconSection = exports.isValidIconStyleMappings = exports.renderStyledColumnIconSummary = exports.renderStyledColumnIconStyleSummary = exports.renderStyledColumnIconMappingsSummary = void 0;
+exports.StyledColumnWizardIconSection = exports.isValidIconStyleMappings = exports.renderStyledColumnIconSummary = exports.renderStyledColumnIconStyleSummary = exports.StyledColumnIconMappingsView = exports.renderStyledColumnIconMappingsSummary = exports.getStyledColumnIconStyleViewValues = exports.getStyledColumnIconMappingsViewValues = void 0;
 const tslib_1 = require("tslib");
 const jsx_runtime_1 = require("react/jsx-runtime");
 const React = tslib_1.__importStar(require("react"));
@@ -9,16 +9,21 @@ const FormLayout_1 = tslib_1.__importStar(require("../../../components/FormLayou
 const Tag_1 = require("../../../components/Tag");
 const CheckBox_1 = require("../../../components/CheckBox");
 const SimpleButton_1 = tslib_1.__importDefault(require("../../../components/SimpleButton"));
+const ButtonNew_1 = require("../../Components/Buttons/ButtonNew");
 const NewSelect_1 = require("../../../components/NewSelect");
 const NumberInput_1 = require("../../../components/Input/NumberInput");
 const Input_1 = tslib_1.__importDefault(require("../../../components/Input"));
+const popover_1 = require("../../../components/ui/popover");
+const IconSelector_1 = require("../../../components/IconSelector");
 const OnePageAdaptableWizard_1 = require("../../Wizard/OnePageAdaptableWizard");
-const AdaptableIconSelector_1 = require("../../Components/AdaptableIconSelector");
+const AdaptableContext_1 = require("../../AdaptableContext");
 const AdaptableIconComponent_1 = require("../../Components/AdaptableIconComponent");
-const IconStylePresets_1 = require("../../../Utilities/Helpers/IconStylePresets");
+const IconStyleHelper_1 = require("../../../Utilities/Helpers/StyledColumns/IconStyleHelper");
 const IconRenderer_1 = require("../../../agGrid/cellRenderers/IconRenderer");
 const Card_1 = require("../../../components/Card");
+const SummaryColorTag_1 = require("../../Wizard/SummaryColorTag");
 const StyledColumnSliceStyleEditors_1 = require("./StyledColumnSliceStyleEditors");
+const wizardSelection_1 = require("../../../Utilities/wizardSelection");
 const STYLE_FORM_SIZES = ['200px', '1fr'];
 const detectIconKind = (spec) => {
     if (typeof spec === 'string')
@@ -41,38 +46,116 @@ const previewIcon = (spec) => {
 // ---------------------------------------------------------------------------
 // Summary helpers (used by the wizard step header + Styled Columns list)
 // ---------------------------------------------------------------------------
+const ICON_MAPPINGS_PREVIEW_CHIP_LIMIT = 6;
 const previewMapping = (mapping, index) => {
-    return ((0, jsx_runtime_1.jsxs)(Flex_1.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: [(0, jsx_runtime_1.jsx)(Flex_1.Box, { children: previewIcon(mapping.Icon) }), (0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:text-xs twa:opacity-90", children: String(mapping.Key) })] }, index));
+    return ((0, jsx_runtime_1.jsxs)(Flex_1.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: [(0, jsx_runtime_1.jsx)(Flex_1.Box, { children: previewIcon(mapping.Icon) }), (0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:text-xs twa:opacity-90", children: String(mapping.Key) })] }, `${String(mapping.Key)}-${index}`));
 };
 const renderMappingsPreview = (mappings) => {
     if (!mappings || mappings.length === 0) {
         return (0, jsx_runtime_1.jsx)(Tag_1.Tag, { children: "No mappings" });
     }
-    const previewItems = mappings.slice(0, 6).map((m, i) => previewMapping(m, i));
+    const previewItems = mappings.slice(0, ICON_MAPPINGS_PREVIEW_CHIP_LIMIT).map((m, i) => previewMapping(m, i));
     const remaining = mappings.length - previewItems.length;
     return ((0, jsx_runtime_1.jsxs)(Flex_1.Flex, { alignItems: "center", className: "twa:gap-1 twa:flex-wrap", children: [previewItems, remaining > 0 && (0, jsx_runtime_1.jsxs)(Flex_1.Box, { className: "twa:text-xs twa:opacity-60", children: ["+", remaining, " more"] })] }));
 };
+const formatIconCellTextSummary = (cellText) => cellText
+    ?.map((t) => (t === 'CellValue' ? 'Cell Value' : 'Description'))
+    .join(' + ') ?? '';
+const formatIconToolTipSummary = (toolTipText) => toolTipText
+    ?.map((t) => (t === 'CellValue' ? 'Cell Value' : 'Description'))
+    .join(' + ') ?? '';
+const getStyledColumnIconMappingsViewValues = (data) => {
+    const ic = data.IconStyle;
+    if (!ic) {
+        return [];
+    }
+    const effectiveMappings = (0, IconRenderer_1.resolveEffectiveIconStyleMappings)(ic);
+    const items = [`Mappings: ${effectiveMappings.length}`];
+    if (ic.Preset) {
+        items.push(`Preset: ${IconStyleHelper_1.ICON_STYLE_PRESET_LABELS[ic.Preset]}`);
+    }
+    const customCount = ic.Mappings?.length ?? 0;
+    if (customCount > 0) {
+        items.push(`Custom Mappings: ${customCount}`);
+    }
+    if (ic.MatchMode && ic.MatchMode !== 'Exact') {
+        items.push(`Match Mode: ${ic.MatchMode}`);
+    }
+    const fallbackMode = ic.FallbackProperties?.Mode;
+    if (fallbackMode && fallbackMode !== 'Hide') {
+        items.push(`Fallback: ${fallbackMode}`);
+    }
+    return items;
+};
+exports.getStyledColumnIconMappingsViewValues = getStyledColumnIconMappingsViewValues;
+const buildStyledColumnIconStyleSummaryStrings = (ic, options) => {
+    const items = [];
+    if (ic.Size != null) {
+        items.push(`Icon Size: ${ic.Size}px`);
+    }
+    if (ic.Gap != null) {
+        items.push(`Gap: ${ic.Gap}px`);
+    }
+    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');
+    }
+    (0, StyledColumnSliceStyleEditors_1.getCellFontStyleSummaryItems)(ic.Font).forEach(({ label, value }) => {
+        items.push(`${label}: ${value}`);
+    });
+    (0, StyledColumnSliceStyleEditors_1.getCellBoxStyleSummaryItems)(ic.Cell).forEach(({ label, value }) => {
+        items.push(`${label}: ${value}`);
+    });
+    if (ic.ToolTipText?.length) {
+        items.push(`Tooltip: ${formatIconToolTipSummary(ic.ToolTipText)}`);
+    }
+    else if (options.includeEmptyTooltip) {
+        items.push('Tooltip: No Tooltip');
+    }
+    return items;
+};
+const getStyledColumnIconStyleViewValues = (data) => {
+    const ic = data.IconStyle;
+    if (!ic) {
+        return [];
+    }
+    return buildStyledColumnIconStyleSummaryStrings(ic, {
+        includeEmptyCellText: false,
+        includeEmptyTooltip: false,
+    });
+};
+exports.getStyledColumnIconStyleViewValues = getStyledColumnIconStyleViewValues;
 /** Mappings step summary. */
 const renderStyledColumnIconMappingsSummary = (data) => {
     const ic = data.IconStyle;
     if (!ic) {
         return (0, jsx_runtime_1.jsx)(Tag_1.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 = (0, IconRenderer_1.resolveEffectiveIconStyleMappings)(ic);
-    const customCount = ic.Mappings?.length ?? 0;
-    return ((0, jsx_runtime_1.jsxs)(Flex_1.Flex, { flexDirection: "column", className: "twa:gap-2 twa:items-start", children: [(0, jsx_runtime_1.jsxs)(Flex_1.Flex, { alignItems: "center", className: "twa:flex-wrap", children: [(0, jsx_runtime_1.jsxs)(Flex_1.Box, { className: "twa:mr-1", children: [effectiveMappings.length, " ", effectiveMappings.length === 1 ? 'mapping' : 'mappings'] }), ic.Preset && ((0, jsx_runtime_1.jsxs)(Flex_1.Box, { className: "twa:mr-1", children: ["\u00B7 Preset: ", (0, jsx_runtime_1.jsx)(Tag_1.Tag, { children: IconStylePresets_1.ICON_STYLE_PRESET_LABELS[ic.Preset] })] })), customCount > 0 && ((0, jsx_runtime_1.jsxs)(Flex_1.Box, { className: "twa:mr-1", children: ["\u00B7 Custom: ", (0, jsx_runtime_1.jsx)(Tag_1.Tag, { children: customCount })] })), ic.MatchMode && ic.MatchMode !== 'Exact' && ((0, jsx_runtime_1.jsxs)(Flex_1.Box, { className: "twa:mr-1", children: ["\u00B7 Match: ", (0, jsx_runtime_1.jsx)(Tag_1.Tag, { children: ic.MatchMode })] })), ic.Fallback && ic.Fallback !== 'Hide' && ((0, jsx_runtime_1.jsxs)(Flex_1.Box, { className: "twa:mr-1", children: ["\u00B7 Fallback: ", (0, jsx_runtime_1.jsx)(Tag_1.Tag, { children: ic.Fallback })] }))] }), renderMappingsPreview(effectiveMappings)] }));
+    const tagItems = (0, exports.getStyledColumnIconMappingsViewValues)(data);
+    const previewMappings = (0, IconRenderer_1.resolveIconStyleMappingsForSummaryPreview)(ic);
+    return ((0, jsx_runtime_1.jsxs)(Flex_1.Flex, { flexDirection: "column", className: "twa:gap-2 twa:items-start", children: [(0, SummaryColorTag_1.renderSummaryStringTags)(tagItems), renderMappingsPreview(previewMappings)] }));
 };
 exports.renderStyledColumnIconMappingsSummary = renderStyledColumnIconMappingsSummary;
+const StyledColumnIconMappingsView = ({ data }) => (0, exports.renderStyledColumnIconMappingsSummary)(data);
+exports.StyledColumnIconMappingsView = StyledColumnIconMappingsView;
 /** Style step summary (size, text, tooltip, font / cell). */
 const renderStyledColumnIconStyleSummary = (data) => {
     const ic = data.IconStyle;
     if (!ic) {
         return (0, jsx_runtime_1.jsx)(Tag_1.Tag, { children: "No Icon Style defined" });
     }
-    const cellText = ic.CellText ?? [];
-    return ((0, jsx_runtime_1.jsxs)(Flex_1.Flex, { alignItems: "center", className: "twa:flex-wrap", children: [(0, jsx_runtime_1.jsxs)(Flex_1.Box, { className: "twa:mr-1", children: ["Size: ", (0, jsx_runtime_1.jsxs)(Tag_1.Tag, { children: [ic.Size ?? 18, "px"] })] }), cellText.length > 0 && ((0, jsx_runtime_1.jsxs)(Flex_1.Box, { className: "twa:mr-1", children: ["\u00B7 Text: ", (0, jsx_runtime_1.jsx)(Tag_1.Tag, { children: cellText.join(', ') })] })), cellText.length > 0 && ((0, jsx_runtime_1.jsxs)(Flex_1.Box, { className: "twa:mr-1", children: ["\u00B7 Position: ", (0, jsx_runtime_1.jsx)(Tag_1.Tag, { children: ic.CellTextPosition ?? 'After' })] })), ic.ToolTipText?.length > 0 && ((0, jsx_runtime_1.jsxs)(Flex_1.Box, { className: "twa:mr-1", children: ["\u00B7 Tooltip: ", (0, jsx_runtime_1.jsx)(Tag_1.Tag, { children: ic.ToolTipText.join(', ') })] }))] }));
+    const items = buildStyledColumnIconStyleSummaryStrings(ic, {
+        includeEmptyCellText: true,
+        includeEmptyTooltip: true,
+    });
+    if (!items.length) {
+        return (0, jsx_runtime_1.jsx)(Tag_1.Tag, { children: "No Style Defined" });
+    }
+    return (0, SummaryColorTag_1.renderSummaryStringTags)(items);
 };
 exports.renderStyledColumnIconStyleSummary = renderStyledColumnIconStyleSummary;
 /**
@@ -106,11 +189,7 @@ 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,
@@ -170,9 +249,7 @@ 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 = [
@@ -183,18 +260,40 @@ 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 ?? [];
@@ -208,29 +307,29 @@ const StyledColumnWizardIconSection = (props) => {
     // -----------------------------------------------------------------------
     if (props.variant === 'mappings') {
         const presetMappingsPreview = iconStyle.Preset
-            ? (0, IconStylePresets_1.getIconStylePresetMappings)(iconStyle.Preset)
+            ? (0, IconStyleHelper_1.getIconStylePresetMappings)(iconStyle.Preset)
             : [];
-        return ((0, jsx_runtime_1.jsxs)(Flex_1.Box, { children: [(0, jsx_runtime_1.jsxs)(Card_1.Card, { shadow: false, className: "twa:mb-3", children: [(0, jsx_runtime_1.jsxs)(Card_1.Card.Title, { children: [(0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:font-medium", children: "Presets" }), (0, jsx_runtime_1.jsxs)(Flex_1.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", ' ', (0, jsx_runtime_1.jsx)("strong", { children: "Custom mappings" }), " below"] })] }), (0, jsx_runtime_1.jsx)(Card_1.Card.Body, { children: (0, jsx_runtime_1.jsxs)(FormLayout_1.default, { children: [(0, jsx_runtime_1.jsx)(FormLayout_1.FormRow, { label: "Select Preset:", children: (0, jsx_runtime_1.jsxs)(Flex_1.Flex, { alignItems: "center", className: "twa:gap-2 twa:flex-wrap", children: [['Flags', 'Currencies', 'Trend', 'Status'].map((p) => ((0, jsx_runtime_1.jsx)(SimpleButton_1.default, { variant: iconStyle.Preset === p ? 'raised' : 'outlined', tone: iconStyle.Preset === p ? 'accent' : 'none', onClick: () => applyPreset(p), children: IconStylePresets_1.ICON_STYLE_PRESET_LABELS[p] }, p))), iconStyle.Preset && ((0, jsx_runtime_1.jsx)(SimpleButton_1.default, { variant: "text", icon: "undo", tooltip: "Stop using this preset (custom mappings are kept)", onClick: clearPreset, children: "Clear preset" }))] }) }), iconStyle.Preset && ((0, jsx_runtime_1.jsx)(FormLayout_1.FormRow, { label: "Active:", children: (0, jsx_runtime_1.jsxs)(Flex_1.Flex, { flexDirection: "column", className: "twa:gap-1 twa:max-w-[640px]", children: [(0, jsx_runtime_1.jsxs)(Flex_1.Box, { className: "twa:text-xs twa:opacity-70", children: [IconStylePresets_1.ICON_STYLE_PRESET_DESCRIPTIONS[iconStyle.Preset], " \u2014", ' ', presetMappingsPreview.length, " mappings shipped with the preset."] }), renderMappingsPreview(presetMappingsPreview)] }) }))] }) })] }), (0, jsx_runtime_1.jsxs)(Card_1.Card, { shadow: false, className: "twa:mb-3", children: [(0, jsx_runtime_1.jsxs)(Card_1.Card.Title, { children: [(0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:font-medium", children: "Custom Mappings" }), (0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:text-xs twa:opacity-70 twa:font-normal twa:max-w-[520px]", children: iconStyle.Preset
+        return ((0, jsx_runtime_1.jsxs)(Flex_1.Box, { children: [(0, jsx_runtime_1.jsxs)(Card_1.Card, { shadow: false, className: "twa:mb-3", children: [(0, jsx_runtime_1.jsxs)(Card_1.Card.Title, { children: [(0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:font-medium", children: "Presets" }), (0, jsx_runtime_1.jsxs)(Flex_1.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", ' ', (0, jsx_runtime_1.jsx)("strong", { children: "Custom mappings" }), " below"] })] }), (0, jsx_runtime_1.jsx)(Card_1.Card.Body, { children: (0, jsx_runtime_1.jsxs)(FormLayout_1.default, { children: [(0, jsx_runtime_1.jsx)(FormLayout_1.FormRow, { label: "Select Preset:", children: (0, jsx_runtime_1.jsxs)(Flex_1.Flex, { alignItems: "center", className: "twa:gap-2 twa:flex-wrap", children: [['Flags', 'Currencies', 'Trend', 'Status'].map((p) => ((0, jsx_runtime_1.jsx)(SimpleButton_1.default, { ...(0, wizardSelection_1.wizardSelectionSimpleButtonProps)(iconStyle.Preset === p), onClick: () => applyPreset(p), children: IconStyleHelper_1.ICON_STYLE_PRESET_LABELS[p] }, p))), iconStyle.Preset && ((0, jsx_runtime_1.jsx)(SimpleButton_1.default, { variant: "text", icon: "undo", tooltip: "Stop using this preset (custom mappings are kept)", onClick: clearPreset, children: "Clear preset" }))] }) }), iconStyle.Preset && ((0, jsx_runtime_1.jsx)(FormLayout_1.FormRow, { label: "Active:", children: (0, jsx_runtime_1.jsxs)(Flex_1.Flex, { flexDirection: "column", className: "twa:gap-1 twa:max-w-[640px]", children: [(0, jsx_runtime_1.jsxs)(Flex_1.Box, { className: "twa:text-xs twa:opacity-70", children: [IconStyleHelper_1.ICON_STYLE_PRESET_DESCRIPTIONS[iconStyle.Preset], " \u2014", ' ', presetMappingsPreview.length, " mappings shipped with the preset."] }), renderMappingsPreview(presetMappingsPreview)] }) }))] }) })] }), (0, jsx_runtime_1.jsxs)(Card_1.Card, { shadow: false, className: "twa:mb-3", children: [(0, jsx_runtime_1.jsxs)(Card_1.Card.Title, { children: [(0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:font-medium", children: "Custom Mappings" }), (0, jsx_runtime_1.jsx)(Flex_1.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)' })] }), (0, jsx_runtime_1.jsxs)(Card_1.Card.Body, { children: [mappings.length === 0 ? ((0, jsx_runtime_1.jsx)(Flex_1.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' })) : ((0, jsx_runtime_1.jsxs)(Flex_1.Box, { className: "twa:max-w-[720px]", children: [(0, jsx_runtime_1.jsxs)(Flex_1.Flex, { alignItems: "center", className: "twa:gap-2 twa:px-2 twa:py-1 twa:text-xs twa:opacity-60", children: [(0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:w-[44px] twa:shrink-0" }), (0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:min-w-0 twa:flex-1", children: "Key" }), (0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:min-w-0 twa:flex-1", children: "Description" }), (0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:w-8 twa:shrink-0" })] }), mappings.map((m, i) => {
-                                            const isEditing = editingRow === i;
-                                            return ((0, jsx_runtime_1.jsxs)(Flex_1.Box, { children: [(0, jsx_runtime_1.jsxs)(Flex_1.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: [(0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:w-[44px] twa:shrink-0 twa:flex twa:justify-center", children: (0, jsx_runtime_1.jsx)(SimpleButton_1.default, { 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) }) }), (0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:min-w-0 twa:flex-1", children: (0, jsx_runtime_1.jsx)(Input_1.default, { className: "twa:w-full", value: String(m.Key ?? ''), onChange: (e) => updateMapping(i, { Key: e.target.value }), placeholder: "Cell value" }) }), (0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:min-w-0 twa:flex-1", children: (0, jsx_runtime_1.jsx)(Input_1.default, { className: "twa:w-full", value: m.Description ?? '', onChange: (e) => updateMapping(i, {
-                                                                        Description: e.target.value || undefined,
-                                                                    }), placeholder: "Tooltip label (optional)" }) }), (0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:w-8 twa:shrink-0 twa:flex twa:justify-center", children: (0, jsx_runtime_1.jsx)(SimpleButton_1.default, { icon: "delete", variant: "text", tooltip: "Remove mapping", onClick: () => removeMapping(i) }) })] }), isEditing && ((0, jsx_runtime_1.jsxs)(Flex_1.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: [(0, jsx_runtime_1.jsxs)(Flex_1.Flex, { alignItems: "center", className: "twa:justify-between twa:mb-2", children: [(0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:font-semibold twa:text-xs", children: "Edit icon" }), (0, jsx_runtime_1.jsx)(SimpleButton_1.default, { variant: "text", icon: "check", tooltip: "Done", onClick: () => setEditingRow(null), children: "Done" })] }), (0, jsx_runtime_1.jsx)(IconSpecEditorFields, { value: m.Icon, onChange: (next) => updateMapping(i, { Icon: next }) })] }))] }, i));
-                                        })] })), (0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:mt-2", children: (0, jsx_runtime_1.jsx)(SimpleButton_1.default, { variant: "raised", icon: "plus", onClick: addMapping, children: "Add Mapping" }) })] })] }), (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: "Matching" }), (0, jsx_runtime_1.jsx)(Flex_1.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" })] }), (0, jsx_runtime_1.jsx)(Card_1.Card.Body, { children: (0, jsx_runtime_1.jsxs)(FormLayout_1.default, { children: [(0, jsx_runtime_1.jsx)(FormLayout_1.FormRow, { label: "Match Mode:", children: (0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:max-w-[200px]", children: (0, jsx_runtime_1.jsx)(NewSelect_1.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' })) : ((0, jsx_runtime_1.jsxs)(Flex_1.Box, { className: "twa:max-w-[720px]", children: [(0, jsx_runtime_1.jsxs)(Flex_1.Flex, { alignItems: "center", className: "twa:gap-2 twa:px-2 twa:py-1 twa:text-xs twa:opacity-60", children: [(0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:w-[44px] twa:shrink-0" }), (0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:min-w-0 twa:flex-1", children: "Key" }), (0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:min-w-0 twa:flex-1", children: "Description" }), (0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:w-8 twa:shrink-0" })] }), mappings.map((m, i) => ((0, jsx_runtime_1.jsxs)(Flex_1.Flex, { alignItems: "center", className: "twa:gap-2 twa:px-2 twa:py-1 twa:rounded twa:hover:bg-[var(--ab-color-primarylight)]", children: [(0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:w-[44px] twa:shrink-0 twa:flex twa:justify-center", children: (0, jsx_runtime_1.jsx)(IconPickerButton, { value: m.Icon, defaultOpen: autoOpenPickerIndex === i, onOpenChange: (open) => {
+                                                            if (!open && autoOpenPickerIndex === i) {
+                                                                setAutoOpenPickerIndex(null);
+                                                            }
+                                                        }, onChange: (next) => updateMapping(i, { Icon: next }) }) }), (0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:min-w-0 twa:flex-1", children: (0, jsx_runtime_1.jsx)(Input_1.default, { className: "twa:w-full", value: String(m.Key ?? ''), onChange: (e) => updateMapping(i, { Key: e.target.value }), placeholder: "Cell value" }) }), (0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:min-w-0 twa:flex-1", children: (0, jsx_runtime_1.jsx)(Input_1.default, { className: "twa:w-full", value: m.Description ?? '', onChange: (e) => updateMapping(i, {
+                                                            Description: e.target.value || undefined,
+                                                        }), placeholder: "Tooltip label (optional)" }) }), (0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:w-8 twa:shrink-0 twa:flex twa:justify-center", children: (0, jsx_runtime_1.jsx)(SimpleButton_1.default, { icon: "delete", variant: "text", tooltip: "Remove mapping", onClick: () => removeMapping(i) }) })] }, i)))] })), (0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:mt-2", children: (0, jsx_runtime_1.jsx)(ButtonNew_1.ButtonNew, { onClick: addMapping, children: "Add Mapping" }) })] })] }), (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: "Matching" }), (0, jsx_runtime_1.jsx)(Flex_1.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" })] }), (0, jsx_runtime_1.jsx)(Card_1.Card.Body, { children: (0, jsx_runtime_1.jsxs)(FormLayout_1.default, { children: [(0, jsx_runtime_1.jsx)(FormLayout_1.FormRow, { label: "Match Mode:", children: (0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:max-w-[200px]", children: (0, jsx_runtime_1.jsx)(NewSelect_1.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)' },
-                                                ] }) }) }), (0, jsx_runtime_1.jsx)(FormLayout_1.FormRow, { label: "Fallback:", children: (0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:max-w-[200px]", children: (0, jsx_runtime_1.jsx)(NewSelect_1.SingleSelect, { className: "twa:w-full", value: iconStyle.Fallback ?? 'Hide', onValueChange: (v) => update({ Fallback: v }), items: [
+                                                ] }) }) }), (0, jsx_runtime_1.jsx)(FormLayout_1.FormRow, { label: "Fallback:", children: (0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:max-w-[200px]", children: (0, jsx_runtime_1.jsx)(NewSelect_1.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' && ((0, jsx_runtime_1.jsx)(FormLayout_1.FormRow, { label: "Fallback Icon:", children: (0, jsx_runtime_1.jsxs)(Flex_1.Flex, { flexDirection: "column", className: "twa:gap-2", children: [(0, jsx_runtime_1.jsxs)(Flex_1.Flex, { alignItems: "center", className: "twa:gap-2", children: [(0, jsx_runtime_1.jsx)(SimpleButton_1.default, { 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 && ((0, jsx_runtime_1.jsx)(SimpleButton_1.default, { variant: "text", icon: "check", tooltip: "Done", onClick: () => setFallbackIconEditing(false), children: "Done" }))] }), fallbackIconEditing && ((0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:p-3 twa:rounded twa:bg-[var(--ab-color-surface)] twa:border twa:border-border twa:max-w-[320px]", children: (0, jsx_runtime_1.jsx)(IconSpecEditorFields, { value: iconStyle.FallbackIcon, onChange: (next) => update({ FallbackIcon: next }) }) }))] }) }))] }) })] })] }));
+                                                ] }) }) }), iconStyle.FallbackProperties?.Mode === 'Icon' && ((0, jsx_runtime_1.jsx)(FormLayout_1.FormRow, { label: "Fallback Icon:", children: (0, jsx_runtime_1.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 ((0, jsx_runtime_1.jsxs)(Flex_1.Box, { children: [(0, jsx_runtime_1.jsxs)(Card_1.Card, { shadow: false, className: "twa:mb-3", children: [(0, jsx_runtime_1.jsx)(Card_1.Card.Title, { children: "Sizing" }), (0, jsx_runtime_1.jsx)(Card_1.Card.Body, { children: (0, jsx_runtime_1.jsxs)(FormLayout_1.default, { sizes: [...STYLE_FORM_SIZES], children: [(0, jsx_runtime_1.jsx)(FormLayout_1.FormRow, { label: "Icon Size (px):", children: (0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:max-w-[100px]", children: (0, jsx_runtime_1.jsx)(Input_1.default, { type: "number", min: 8, step: 1, value: iconStyle.Size ?? '', placeholder: "18", className: "twa:w-full", onChange: (event) => {
@@ -243,7 +342,9 @@ const StyledColumnWizardIconSection = (props) => {
                                                 update({
                                                     Size: Number.isFinite(parsed) && parsed >= 8 ? parsed : undefined,
                                                 });
-                                            } }) }) }), (0, jsx_runtime_1.jsx)(FormLayout_1.FormRow, { label: "Gap (px):", children: (0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:max-w-[100px]", children: (0, jsx_runtime_1.jsx)(NumberInput_1.NumberInput, { value: iconStyle.Gap ?? '', placeholder: "4", min: 0, step: 1, onChange: (value) => update({ Gap: typeof value === 'number' ? value : undefined }) }) }) })] }) })] }), (0, jsx_runtime_1.jsxs)(Card_1.Card, { shadow: false, className: "twa:mb-3", children: [(0, jsx_runtime_1.jsxs)(Card_1.Card.Title, { children: [(0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:font-medium", children: "Cell Text" }), (0, jsx_runtime_1.jsx)(Flex_1.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)." })] }), (0, jsx_runtime_1.jsxs)(Card_1.Card.Body, { children: [(0, jsx_runtime_1.jsxs)(FormLayout_1.default, { sizes: [...STYLE_FORM_SIZES], children: [(0, jsx_runtime_1.jsxs)(FormLayout_1.FormRow, { label: "Cell Display:", children: [(0, jsx_runtime_1.jsx)(CheckBox_1.CheckBox, { checked: cellText.includes('CellValue'), onChange: (checked) => toggleCellText('CellValue', checked), children: "Cell Value" }), ' ', (0, jsx_runtime_1.jsx)(CheckBox_1.CheckBox, { className: "twa:ml-3", checked: cellText.includes('IconDescription'), onChange: (checked) => toggleCellText('IconDescription', checked), children: "Description" })] }), (0, jsx_runtime_1.jsx)(FormLayout_1.FormRow, { label: "Position:", children: (0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:max-w-[160px]", children: (0, jsx_runtime_1.jsx)(NewSelect_1.SingleSelect, { className: "twa:w-full", value: iconStyle.CellTextPosition ?? 'After', onValueChange: (v) => update({ CellTextPosition: v }), items: [
+                                            } }) }) }), (0, jsx_runtime_1.jsx)(FormLayout_1.FormRow, { label: "Gap (px):", children: (0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:max-w-[100px]", children: (0, jsx_runtime_1.jsx)(NumberInput_1.NumberInput, { value: iconStyle.Gap ?? '', placeholder: "4", min: 0, step: 1, onChange: (value) => update({ Gap: typeof value === 'number' ? value : undefined }) }) }) })] }) })] }), (0, jsx_runtime_1.jsxs)(Card_1.Card, { shadow: false, className: "twa:mb-3", children: [(0, jsx_runtime_1.jsxs)(Card_1.Card.Title, { children: [(0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:font-medium", children: "Cell Text" }), (0, jsx_runtime_1.jsx)(Flex_1.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)." })] }), (0, jsx_runtime_1.jsxs)(Card_1.Card.Body, { children: [(0, jsx_runtime_1.jsxs)(FormLayout_1.default, { sizes: [...STYLE_FORM_SIZES], children: [(0, jsx_runtime_1.jsxs)(FormLayout_1.FormRow, { label: "Cell Display:", children: [(0, jsx_runtime_1.jsx)(CheckBox_1.CheckBox, { checked: cellText.includes('CellValue'), onChange: (checked) => toggleCellText('CellValue', checked), children: "Cell Value" }), ' ', (0, jsx_runtime_1.jsx)(CheckBox_1.CheckBox, { className: "twa:ml-3", checked: cellText.includes('IconDescription'), onChange: (checked) => toggleCellText('IconDescription', checked), children: "Description" })] }), (0, jsx_runtime_1.jsx)(FormLayout_1.FormRow, { label: "Position:", children: (0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:max-w-[160px]", children: (0, jsx_runtime_1.jsx)(NewSelect_1.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' },
@@ -251,7 +352,30 @@ const StyledColumnWizardIconSection = (props) => {
                                                 ] }) }) })] }), (0, jsx_runtime_1.jsx)(Flex_1.Box, { className: `twa:mt-3 twa:pt-3 twa:border-t twa:border-foreground/15 ${cellTextDisabled ? 'twa:opacity-50' : ''}`, children: (0, jsx_runtime_1.jsx)(StyledColumnSliceStyleEditors_1.StyledColumnFontStyleEditor, { api: api, disabled: disabled || cellTextDisabled, value: iconStyle.Font, onChange: onFontChange }) })] })] }), (0, jsx_runtime_1.jsxs)(Card_1.Card, { shadow: false, className: "twa:mb-3", children: [(0, jsx_runtime_1.jsxs)(Card_1.Card.Title, { children: [(0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:font-medium", children: "Tooltip" }), (0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:text-xs twa:opacity-70 twa:font-normal twa:max-w-[520px]", children: "Choose whether and how to display a tooltip" })] }), (0, jsx_runtime_1.jsx)(Card_1.Card.Body, { children: (0, jsx_runtime_1.jsx)(FormLayout_1.default, { sizes: [...STYLE_FORM_SIZES], children: (0, jsx_runtime_1.jsxs)(FormLayout_1.FormRow, { label: "Tooltip Display:", children: [(0, jsx_runtime_1.jsx)(CheckBox_1.CheckBox, { checked: toolTipText.includes('CellValue'), onChange: (checked) => toggleToolTipText('CellValue', checked), children: "Cell Value" }), ' ', (0, jsx_runtime_1.jsx)(CheckBox_1.CheckBox, { className: "twa:ml-3", checked: toolTipText.includes('IconDescription'), onChange: (checked) => toggleToolTipText('IconDescription', checked), children: "Description" })] }) }) })] }), (0, jsx_runtime_1.jsxs)(Card_1.Card, { shadow: false, children: [(0, jsx_runtime_1.jsxs)(Card_1.Card.Title, { children: [(0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:font-medium", children: "Cell" }), (0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:text-xs twa:opacity-70 twa:font-normal twa:max-w-[520px]", children: "Optional cell box styling (overrides Format Column properties)" })] }), (0, jsx_runtime_1.jsx)(Card_1.Card.Body, { children: (0, jsx_runtime_1.jsx)(StyledColumnSliceStyleEditors_1.StyledColumnCellStyleEditor, { api: api, disabled: disabled, value: iconStyle.Cell, onChange: onCellChange }) })] })] }));
 };
 exports.StyledColumnWizardIconSection = StyledColumnWizardIconSection;
+// ---------------------------------------------------------------------------
+// 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 ((0, jsx_runtime_1.jsxs)(popover_1.Popover, { open: open, onOpenChange: handleOpenChange, children: [(0, jsx_runtime_1.jsx)(popover_1.PopoverTrigger, { nativeButton: true, render: (0, jsx_runtime_1.jsx)(SimpleButton_1.default, { type: "button", tooltip: "Choose icon", ...(0, wizardSelection_1.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) }) }), (0, jsx_runtime_1.jsx)(popover_1.PopoverContent, { align: "start", side: "bottom", sideOffset: 8, className: "twa:!w-[300px] twa:max-w-[300px] twa:p-3 twa:gap-0", children: (0, jsx_runtime_1.jsx)(IconSpecEditorFields, { value: props.value, onChange: props.onChange, onSystemIconSelected: () => handleOpenChange(false) }) })] }));
+};
 const IconSpecEditorFields = (props) => {
+    const adaptable = (0, AdaptableContext_1.useAdaptable)();
+    const customIcons = adaptable.api.userInterfaceApi.getCustomIcons();
     const kind = detectIconKind(props.value);
     const [pendingKind, setPendingKind] = React.useState(null);
     const prevValueRef = React.useRef(props.value);
@@ -279,13 +403,10 @@ const IconSpecEditorFields = (props) => {
         ? props.value.name
         : undefined;
     const urlSrc = isObject && 'src' in props.value ? props.value.src : '';
-    return ((0, jsx_runtime_1.jsxs)(Flex_1.Flex, { flexDirection: "column", className: "twa:gap-2 twa:min-w-[220px]", children: [(0, jsx_runtime_1.jsx)(NewSelect_1.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' && ((0, jsx_runtime_1.jsx)(Input_1.default, { 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' && ((0, jsx_runtime_1.jsx)(AdaptableIconSelector_1.AdaptableIconSelector, { clearable: false, value: systemName, onChange: (iconName) => {
+    return ((0, jsx_runtime_1.jsxs)(Flex_1.Flex, { flexDirection: "column", className: "twa:gap-3 twa:w-full", children: [(0, jsx_runtime_1.jsx)(Flex_1.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) => ((0, jsx_runtime_1.jsx)(SimpleButton_1.default, { type: "button", role: "tab", "aria-selected": effectiveKind === option.value, ...(0, wizardSelection_1.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' && ((0, jsx_runtime_1.jsx)(Input_1.default, { 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' && ((0, jsx_runtime_1.jsx)(IconSelector_1.IconSelectorPanel, { className: "twa:p-0", showTitle: false, customIcons: customIcons, value: systemName, onChange: (iconName) => {
                     if (iconName) {
                         props.onChange({ name: iconName });
+                        props.onSystemIconSelected?.();
                     }
                 } })), effectiveKind === 'Url' && ((0, jsx_runtime_1.jsx)(Input_1.default, { 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

@@ -1,7 +1,12 @@
 import * as React from 'react';
 import { StyledColumn } from '../../../AdaptableState/StyledColumnState';
+export declare const getStyledColumnRangeBarRangeViewValues: (data: StyledColumn) => string[];
+export declare const getStyledColumnRangeBarDisplayViewValues: (data: StyledColumn) => string[];
 /** Summary line for the Range wizard step (bounds + bands only). */
 export declare const renderStyledColumnRangeBarRangeStepSummary: (data: StyledColumn) => React.JSX.Element;
+export declare const StyledColumnRangeBarRangeView: React.FunctionComponent<React.PropsWithChildren<{
+    data: StyledColumn;
+}>>;
 /** Summary for the Display wizard step (markers, track, text). */
 export declare const renderStyledColumnRangeBarDisplayStepSummary: (data: StyledColumn) => React.JSX.Element;
 /**