@adaptabletools/adaptable-cjs 23.0.0-canary.5 → 23.0.0-canary.7

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

@@ -4,13 +4,12 @@ exports.renderCellStyleSummaryTags = exports.getCellBoxStyleSummaryItems = expor
 const tslib_1 = require("tslib");
 const jsx_runtime_1 = require("react/jsx-runtime");
 const React = tslib_1.__importStar(require("react"));
-const CheckBox_1 = require("../../../components/CheckBox");
 const ColorPicker_1 = require("../../../components/ColorPicker");
 const FormLayout_1 = tslib_1.__importStar(require("../../../components/FormLayout"));
 const Flex_1 = require("../../../components/Flex");
 const NumberInput_1 = require("../../../components/Input/NumberInput");
 const NewSelect_1 = require("../../../components/NewSelect");
-const Tag_1 = require("../../../components/Tag");
+const SummaryColorTag_1 = require("../../Wizard/SummaryColorTag");
 const Toggle_1 = require("../../../components/Toggle");
 const FORM_SIZES = ['200px', '1fr'];
 const FONT_SIZE_ITEMS = [
@@ -50,18 +49,13 @@ const StyledColumnFontStyleEditor = (props) => {
             props.onChange(next);
         }
     };
-    const onForeColorChecked = (checked) => {
-        if (checked) {
-            update({ ForeColor: font.ForeColor ?? '#000000' });
-        }
-        else {
-            update({ ForeColor: undefined });
-        }
+    const onForeColorChange = (color) => {
+        update({ ForeColor: color });
     };
     const onAlignmentChange = (alignment) => {
         update({ Alignment: alignment });
     };
-    return ((0, jsx_runtime_1.jsx)(Flex_1.Box, { children: (0, jsx_runtime_1.jsxs)(FormLayout_1.default, { className: "twa:ml-2", sizes: [...FORM_SIZES], children: [(0, jsx_runtime_1.jsx)(FormLayout_1.FormRow, { label: "Text Colour:", children: (0, jsx_runtime_1.jsxs)(Flex_1.Flex, { alignItems: "center", className: "twa:ml-2 twa:gap-2", children: [(0, jsx_runtime_1.jsx)(CheckBox_1.CheckBox, { disabled: disabled, checked: !!font.ForeColor, onChange: (checked) => onForeColorChecked(checked), children: "Set" }), (0, jsx_runtime_1.jsx)(ColorPicker_1.ColorPicker, { disabled: disabled || !font.ForeColor, api: props.api, value: font.ForeColor || '#000000', onChange: (c) => update({ ForeColor: c }) })] }) }), (0, jsx_runtime_1.jsx)(FormLayout_1.FormRow, { label: "Font:", children: (0, jsx_runtime_1.jsx)(Flex_1.Box, { className: disabledClass, children: (0, jsx_runtime_1.jsxs)(Flex_1.Flex, { alignItems: "center", className: "twa:ml-2 twa:gap-2 twa:flex-wrap", children: [(0, jsx_runtime_1.jsxs)(Toggle_1.ToggleGroup, { children: [(0, jsx_runtime_1.jsx)(Toggle_1.Toggle, { pressed: font.FontStyle === 'Italic', onPressedChange: (pressed) => update({ FontStyle: pressed ? 'Italic' : undefined }), icon: "italic" }), (0, jsx_runtime_1.jsx)(Toggle_1.Toggle, { pressed: font.FontWeight === 'Bold', onPressedChange: (pressed) => update({ FontWeight: pressed ? 'Bold' : undefined }), icon: "bold" })] }), (0, jsx_runtime_1.jsxs)(Toggle_1.ToggleGroup, { children: [(0, jsx_runtime_1.jsx)(Toggle_1.Toggle, { pressed: font.TextDecoration === 'Underline', onPressedChange: (pressed) => update({ TextDecoration: pressed ? 'Underline' : undefined }), icon: "underline" }), (0, jsx_runtime_1.jsx)(Toggle_1.Toggle, { pressed: font.TextDecoration === 'LineThrough', onPressedChange: (pressed) => update({ TextDecoration: pressed ? 'LineThrough' : undefined }), icon: "strikethrough" }), (0, jsx_runtime_1.jsx)(Toggle_1.Toggle, { pressed: font.TextDecoration === 'Overline', onPressedChange: (pressed) => update({ TextDecoration: pressed ? 'Overline' : undefined }), icon: "overline" })] }), (0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:w-32", children: (0, jsx_runtime_1.jsx)(NewSelect_1.SingleSelect, { placeholder: "Default size", items: FONT_SIZE_ITEMS, value: font.FontSize ?? '', onValueChange: (value) => update({
+    return ((0, jsx_runtime_1.jsx)(Flex_1.Box, { children: (0, jsx_runtime_1.jsxs)(FormLayout_1.default, { className: "twa:ml-2", sizes: [...FORM_SIZES], children: [(0, jsx_runtime_1.jsx)(FormLayout_1.FormRow, { label: "Text Colour:", children: (0, jsx_runtime_1.jsx)(ColorPicker_1.OptionalColorPicker, { className: "twa:ml-2", disabled: disabled, api: props.api, value: font.ForeColor, defaultColor: "#000000", onChange: onForeColorChange }) }), (0, jsx_runtime_1.jsx)(FormLayout_1.FormRow, { label: "Font:", children: (0, jsx_runtime_1.jsx)(Flex_1.Box, { className: disabledClass, children: (0, jsx_runtime_1.jsxs)(Flex_1.Flex, { alignItems: "center", className: "twa:ml-2 twa:gap-2 twa:flex-wrap", children: [(0, jsx_runtime_1.jsxs)(Flex_1.Flex, { alignItems: "center", className: "twa:gap-2", children: [(0, jsx_runtime_1.jsx)(Toggle_1.Toggle, { standalone: true, pressed: font.FontStyle === 'Italic', onPressedChange: (pressed) => update({ FontStyle: pressed ? 'Italic' : undefined }), icon: "italic" }), (0, jsx_runtime_1.jsx)(Toggle_1.Toggle, { standalone: true, pressed: font.FontWeight === 'Bold', onPressedChange: (pressed) => update({ FontWeight: pressed ? 'Bold' : undefined }), icon: "bold" })] }), (0, jsx_runtime_1.jsxs)(Toggle_1.ToggleGroup, { children: [(0, jsx_runtime_1.jsx)(Toggle_1.Toggle, { pressed: font.TextDecoration === 'Underline', onPressedChange: (pressed) => update({ TextDecoration: pressed ? 'Underline' : undefined }), icon: "underline" }), (0, jsx_runtime_1.jsx)(Toggle_1.Toggle, { pressed: font.TextDecoration === 'LineThrough', onPressedChange: (pressed) => update({ TextDecoration: pressed ? 'LineThrough' : undefined }), icon: "strikethrough" }), (0, jsx_runtime_1.jsx)(Toggle_1.Toggle, { pressed: font.TextDecoration === 'Overline', onPressedChange: (pressed) => update({ TextDecoration: pressed ? 'Overline' : undefined }), icon: "overline" })] }), (0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:w-32", children: (0, jsx_runtime_1.jsx)(NewSelect_1.SingleSelect, { placeholder: "Default size", items: FONT_SIZE_ITEMS, value: font.FontSize ?? '', onValueChange: (value) => update({
                                             FontSize: (value || undefined),
                                         }) }) })] }) }) }), !hideAlignment && ((0, jsx_runtime_1.jsx)(FormLayout_1.FormRow, { label: "Alignment:", children: (0, jsx_runtime_1.jsx)(Flex_1.Box, { className: disabledClass, children: (0, jsx_runtime_1.jsx)(Flex_1.Flex, { alignItems: "center", className: "twa:ml-2 twa:gap-2", children: (0, jsx_runtime_1.jsxs)(Toggle_1.ToggleGroup, { children: [(0, jsx_runtime_1.jsx)(Toggle_1.Toggle, { icon: "align-left", pressed: font.Alignment === 'Left', onPressedChange: (pressed) => onAlignmentChange(pressed ? 'Left' : undefined) }), (0, jsx_runtime_1.jsx)(Toggle_1.Toggle, { icon: "align-center", pressed: font.Alignment === 'Center', onPressedChange: (pressed) => onAlignmentChange(pressed ? 'Center' : undefined) }), (0, jsx_runtime_1.jsx)(Toggle_1.Toggle, { icon: "align-right", pressed: font.Alignment === 'Right', onPressedChange: (pressed) => onAlignmentChange(pressed ? 'Right' : undefined) })] }) }) }) }))] }) }));
 };
@@ -93,7 +87,7 @@ const StyledColumnCellStyleEditor = (props) => {
             props.onChange(next);
         }
     };
-    return ((0, jsx_runtime_1.jsx)(Flex_1.Box, { children: (0, jsx_runtime_1.jsxs)(FormLayout_1.default, { className: "twa:ml-2", sizes: [...FORM_SIZES], children: [(0, jsx_runtime_1.jsx)(FormLayout_1.FormRow, { label: "Background:", children: (0, jsx_runtime_1.jsxs)(Flex_1.Flex, { alignItems: "center", className: "twa:ml-2 twa:gap-2", children: [(0, jsx_runtime_1.jsx)(CheckBox_1.CheckBox, { disabled: disabled, checked: !!cell.BackColor, onChange: (checked) => update({ BackColor: checked ? cell.BackColor ?? '#ffffff' : undefined }), children: "Set" }), (0, jsx_runtime_1.jsx)(ColorPicker_1.ColorPicker, { disabled: disabled || !cell.BackColor, api: props.api, value: cell.BackColor || '#ffffff', onChange: (c) => update({ BackColor: c }) })] }) }), (0, jsx_runtime_1.jsx)(FormLayout_1.FormRow, { label: "Border colour:", children: (0, jsx_runtime_1.jsxs)(Flex_1.Flex, { alignItems: "center", className: "twa:ml-2 twa:gap-2", children: [(0, jsx_runtime_1.jsx)(CheckBox_1.CheckBox, { disabled: disabled, checked: !!cell.BorderColor, onChange: (checked) => update({ BorderColor: checked ? cell.BorderColor ?? '#000000' : undefined }), children: "Set" }), (0, jsx_runtime_1.jsx)(ColorPicker_1.ColorPicker, { disabled: disabled || !cell.BorderColor, api: props.api, value: cell.BorderColor || '#000000', onChange: (c) => update({ BorderColor: c }) })] }) }), (0, jsx_runtime_1.jsx)(FormLayout_1.FormRow, { label: "Border radius:", children: (0, jsx_runtime_1.jsxs)(Flex_1.Flex, { alignItems: "center", className: "twa:ml-2 twa:gap-2", children: [(0, jsx_runtime_1.jsx)(NumberInput_1.NumberInput, { disabled: disabled, className: "twa:w-20", value: cell.BorderRadius, min: 0, max: 64, step: 1, onChange: (v) => update({ BorderRadius: v === undefined || isNaN(Number(v)) ? undefined : v }) }), (0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:text-xs twa:opacity-70", children: "px" })] }) })] }) }));
+    return ((0, jsx_runtime_1.jsx)(Flex_1.Box, { children: (0, jsx_runtime_1.jsxs)(FormLayout_1.default, { className: "twa:ml-2", sizes: [...FORM_SIZES], children: [(0, jsx_runtime_1.jsx)(FormLayout_1.FormRow, { label: "Background:", children: (0, jsx_runtime_1.jsx)(ColorPicker_1.OptionalColorPicker, { className: "twa:ml-2", disabled: disabled, api: props.api, value: cell.BackColor, defaultColor: "#ffffff", onChange: (c) => update({ BackColor: c }) }) }), (0, jsx_runtime_1.jsx)(FormLayout_1.FormRow, { label: "Border colour:", children: (0, jsx_runtime_1.jsx)(ColorPicker_1.OptionalColorPicker, { className: "twa:ml-2", disabled: disabled, api: props.api, value: cell.BorderColor, defaultColor: "#000000", onChange: (c) => update({ BorderColor: c }) }) }), (0, jsx_runtime_1.jsx)(FormLayout_1.FormRow, { label: "Border radius:", children: (0, jsx_runtime_1.jsxs)(Flex_1.Flex, { alignItems: "center", className: "twa:ml-2 twa:gap-2", children: [(0, jsx_runtime_1.jsx)(NumberInput_1.NumberInput, { disabled: disabled, className: "twa:w-20", value: cell.BorderRadius, min: 0, max: 64, step: 1, onChange: (v) => update({ BorderRadius: v === undefined || isNaN(Number(v)) ? undefined : v }) }), (0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:text-xs twa:opacity-70", children: "px" })] }) })] }) }));
 };
 exports.StyledColumnCellStyleEditor = StyledColumnCellStyleEditor;
 /**
@@ -133,7 +127,7 @@ const renderFontStyleSummaryTags = (font) => {
     if (!items.length) {
         return null;
     }
-    return ((0, jsx_runtime_1.jsx)(Flex_1.Flex, { alignItems: "center", className: "twa:gap-1 twa:flex-wrap", children: items.map(({ label, value }) => ((0, jsx_runtime_1.jsx)(Tag_1.Tag, { children: `${label}: ${value}` }, label))) }));
+    return (0, SummaryColorTag_1.renderSummaryLabelValueTags)(items);
 };
 exports.renderFontStyleSummaryTags = renderFontStyleSummaryTags;
 /**
@@ -164,6 +158,6 @@ const renderCellStyleSummaryTags = (cell) => {
     if (!items.length) {
         return null;
     }
-    return ((0, jsx_runtime_1.jsx)(Flex_1.Flex, { alignItems: "center", className: "twa:gap-1 twa:flex-wrap", children: items.map(({ label, value }) => ((0, jsx_runtime_1.jsx)(Tag_1.Tag, { children: `${label}: ${value}` }, label))) }));
+    return (0, SummaryColorTag_1.renderSummaryLabelValueTags)(items);
 };
 exports.renderCellStyleSummaryTags = renderCellStyleSummaryTags;

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

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

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

@@ -0,0 +1,5 @@
+import * as React from 'react';
+export type StyledColumnTypeThumbnailKey = 'gradient' | 'percent' | 'sparkline' | 'badge' | 'bullet' | 'rating' | 'rangeBar' | 'icon';
+export declare const StyledColumnTypeThumbnail: React.FunctionComponent<{
+    type: StyledColumnTypeThumbnailKey;
+}>;

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

@@ -0,0 +1,54 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.StyledColumnTypeThumbnail = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const Flex_1 = require("../../../components/Flex");
+const Badge_1 = require("../../Components/Badge");
+const StyledColumnRatingPreview_1 = require("./StyledColumnWizardStyleSection/Components/StyledColumnRatingPreview");
+const WizardTypeSelection_1 = require("../../Wizard/WizardTypeSelection");
+const THUMBNAIL_FRAME_CLASS = WizardTypeSelection_1.WIZARD_TYPE_SELECTION_PREVIEW_FRAME_CLASS;
+const THUMBNAIL_SVG_CLASS = 'twa:block twa:h-[22px] twa:w-full';
+const DEFAULT_BAR = 'var(--ab-color-accent, #07c)';
+const DEFAULT_TRACK = 'color-mix(in srgb, var(--ab-color-foreground) 30%, transparent)';
+const DEFAULT_MARKER = 'var(--ab-color-foreground, #333)';
+const flagEmoji = (countryCodeAlpha2) => {
+    const cc = countryCodeAlpha2.toUpperCase();
+    if (cc.length !== 2) {
+        return cc;
+    }
+    const regionalIndicatorBase = 0x1f1a5;
+    return String.fromCodePoint(regionalIndicatorBase + cc.charCodeAt(0), regionalIndicatorBase + cc.charCodeAt(1));
+};
+const BadgeThumbnail = () => ((0, jsx_runtime_1.jsx)(Flex_1.Box, { className: `${THUMBNAIL_FRAME_CLASS} twa:justify-start`, children: (0, jsx_runtime_1.jsxs)("div", { className: "ab-Badge__wrapper ab-Badge__wrapper--truncate", style: { gap: 4 }, children: [(0, jsx_runtime_1.jsx)(Badge_1.Badge, { pillStyle: { BackColor: '#e8f5e9', ForeColor: '#2e7d32' }, shape: "Pill", density: "Compact", children: "Buy" }), (0, jsx_runtime_1.jsx)(Badge_1.Badge, { pillStyle: { BackColor: '#ffebee', ForeColor: '#c62828' }, shape: "Pill", density: "Compact", children: "Sell" })] }) }));
+const IconThumbnail = () => ((0, jsx_runtime_1.jsx)(Flex_1.Box, { className: THUMBNAIL_FRAME_CLASS, style: { gap: 10 }, children: ['US', 'GB', 'FR'].map((code) => ((0, jsx_runtime_1.jsx)("span", { className: "ab-IconStyle__glyph", style: {
+            fontSize: 18,
+            lineHeight: 1,
+            display: 'inline-flex',
+            alignItems: 'center',
+            justifyContent: 'center',
+        }, children: flagEmoji(code) }, code))) }));
+const RatingThumbnail = () => ((0, jsx_runtime_1.jsx)(Flex_1.Box, { className: THUMBNAIL_FRAME_CLASS, children: (0, jsx_runtime_1.jsx)(StyledColumnRatingPreview_1.RatingPreview, { rating: { Max: 5, AllowHalf: true }, value: 3.5 }) }));
+const GradientThumbnail = () => ((0, jsx_runtime_1.jsx)(Flex_1.Box, { className: `${THUMBNAIL_FRAME_CLASS} twa:gap-1 twa:px-1`, children: [
+        { label: '42', background: '#63be7b' },
+        { label: '68', background: '#ffeb84' },
+        { label: '91', background: '#f8696b' },
+    ].map((cell) => ((0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:flex-1 twa:rounded-sm twa:px-1 twa:py-0.5 twa:text-center twa:text-2 twa:leading-tight", style: { background: cell.background, color: '#1a1a1a' }, children: cell.label }, cell.label))) }));
+const PercentBarThumbnail = () => ((0, jsx_runtime_1.jsx)(Flex_1.Box, { className: THUMBNAIL_FRAME_CLASS, children: (0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:relative twa:h-[6px] twa:w-full twa:rounded-sm", style: { background: DEFAULT_TRACK }, children: (0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:absolute twa:top-0 twa:h-full twa:rounded-sm", style: { left: '8%', width: '62%', background: DEFAULT_BAR } }) }) }));
+const BulletThumbnail = () => ((0, jsx_runtime_1.jsx)(Flex_1.Box, { className: THUMBNAIL_FRAME_CLASS, children: (0, jsx_runtime_1.jsxs)("svg", { className: THUMBNAIL_SVG_CLASS, viewBox: "0 0 100 22", preserveAspectRatio: "none", "aria-hidden": true, children: [(0, jsx_runtime_1.jsx)("rect", { x: "0", y: "2", width: "33", height: "18", fill: "#f8696b", opacity: "0.45" }), (0, jsx_runtime_1.jsx)("rect", { x: "33", y: "2", width: "34", height: "18", fill: "#ffeb84", opacity: "0.45" }), (0, jsx_runtime_1.jsx)("rect", { x: "67", y: "2", width: "33", height: "18", fill: "#63be7b", opacity: "0.45" }), (0, jsx_runtime_1.jsx)("rect", { x: "4", y: "7", width: "52", height: "8", rx: "1", fill: DEFAULT_BAR }), (0, jsx_runtime_1.jsx)("line", { x1: "78", y1: "3", x2: "78", y2: "19", stroke: DEFAULT_MARKER, strokeWidth: "2.5", vectorEffect: "non-scaling-stroke" })] }) }));
+const RangeBarThumbnail = () => ((0, jsx_runtime_1.jsx)(Flex_1.Box, { className: THUMBNAIL_FRAME_CLASS, children: (0, jsx_runtime_1.jsxs)("svg", { className: THUMBNAIL_SVG_CLASS, viewBox: "0 0 100 22", preserveAspectRatio: "none", "aria-hidden": true, children: [(0, jsx_runtime_1.jsx)("rect", { x: "0", y: "0", width: "100", height: "22", fill: "transparent" }), (0, jsx_runtime_1.jsx)("rect", { x: "2", y: "8", width: "96", height: "6", rx: "1", fill: DEFAULT_TRACK }), (0, jsx_runtime_1.jsx)("line", { x1: "38", y1: "4", x2: "38", y2: "18", stroke: DEFAULT_MARKER, strokeWidth: "2", vectorEffect: "non-scaling-stroke" }), (0, jsx_runtime_1.jsx)("polygon", { points: "72,4 82,11 72,18", fill: DEFAULT_BAR })] }) }));
+const SparklineThumbnail = () => ((0, jsx_runtime_1.jsx)(Flex_1.Box, { className: THUMBNAIL_FRAME_CLASS, children: (0, jsx_runtime_1.jsxs)("svg", { className: THUMBNAIL_SVG_CLASS, viewBox: "0 0 100 22", preserveAspectRatio: "none", "aria-hidden": true, children: [(0, jsx_runtime_1.jsx)("polyline", { points: "0,16 12,12 24,14 36,8 48,10 60,4 72,7 84,3 100,6", fill: "none", stroke: DEFAULT_BAR, strokeWidth: "1.75", vectorEffect: "non-scaling-stroke" }), (0, jsx_runtime_1.jsx)("polygon", { points: "0,22 0,16 12,12 24,14 36,8 48,10 60,4 72,7 84,3 100,6 100,22", fill: DEFAULT_BAR, opacity: "0.15" })] }) }));
+const THUMBNAIL_BY_TYPE = {
+    badge: BadgeThumbnail,
+    icon: IconThumbnail,
+    rating: RatingThumbnail,
+    gradient: GradientThumbnail,
+    percent: PercentBarThumbnail,
+    bullet: BulletThumbnail,
+    rangeBar: RangeBarThumbnail,
+    sparkline: SparklineThumbnail,
+};
+const StyledColumnTypeThumbnail = ({ type }) => {
+    const Thumbnail = THUMBNAIL_BY_TYPE[type];
+    return ((0, jsx_runtime_1.jsx)(Flex_1.Box, { "aria-hidden": true, className: "twa:w-full", children: (0, jsx_runtime_1.jsx)(Thumbnail, {}) }));
+};
+exports.StyledColumnTypeThumbnail = StyledColumnTypeThumbnail;

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

@@ -4,4 +4,6 @@ import { StyledColumn } from '../../../AdaptableState/StyledColumnState';
 export interface StyledColumnWizardProps extends AdaptableOnePageWizardProps<StyledColumn> {
     isNew: boolean;
 }
+/** First wizard step to open when editing an existing Styled Column (column menu, settings list, etc.). */
+export declare const getStyledColumnEditDefaultSectionName: (styledColumn: StyledColumn) => string;
 export declare const StyledColumnWizard: (props: StyledColumnWizardProps) => React.JSX.Element;

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

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

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

@@ -13,7 +13,6 @@ const RangesComponent_1 = require("../../Components/RangesComponent");
 const ColumnSelector_1 = require("../../Components/Selectors/ColumnSelector");
 const UIHelper_1 = require("../../UIHelper");
 const OnePageAdaptableWizard_1 = require("../../Wizard/OnePageAdaptableWizard");
-const DropdownButton_1 = tslib_1.__importDefault(require("../../../components/DropdownButton"));
 const ArrayExtensions_1 = tslib_1.__importDefault(require("../../../Utilities/Extensions/ArrayExtensions"));
 const AdaptableInput_1 = tslib_1.__importDefault(require("../../Components/AdaptableInput"));
 const Flex_1 = require("../../../components/Flex");
@@ -22,6 +21,7 @@ const StyledColumnBulletPreview_1 = require("./StyledColumnWizardStyleSection/Co
 const NewSelect_1 = require("../../../components/NewSelect");
 const StyledColumnSliceStyleEditors_1 = require("./StyledColumnSliceStyleEditors");
 const Card_1 = require("../../../components/Card");
+const SummaryColorTag_1 = require("../../Wizard/SummaryColorTag");
 const BULLET_STYLE_FORM_SIZES = ['200px', '1fr'];
 // ---------------------------------------------------------------------------
 // Summary helpers
@@ -141,7 +141,7 @@ const renderStyledColumnBulletRangesSummary = (data) => {
         return (0, jsx_runtime_1.jsx)(Tag_1.Tag, { children: "No bands defined" });
     }
     const tagItems = (0, exports.getStyledColumnBulletRangesViewValues)(data);
-    return ((0, jsx_runtime_1.jsxs)(Flex_1.Flex, { flexDirection: "column", className: "twa:gap-2 twa:items-start", children: [(0, jsx_runtime_1.jsx)(Flex_1.Flex, { alignItems: "center", className: "twa:flex-wrap twa:gap-2", children: tagItems.map((item) => ((0, jsx_runtime_1.jsx)(Tag_1.Tag, { children: item }, item))) }), (0, jsx_runtime_1.jsx)(BulletRangesSummaryPreview_1.BulletRangesSummaryPreview, { bulletStyle: bullet })] }));
+    return ((0, jsx_runtime_1.jsxs)(Flex_1.Flex, { flexDirection: "column", className: "twa:gap-2 twa:items-start", children: [(0, SummaryColorTag_1.renderSummaryStringTags)(tagItems), (0, jsx_runtime_1.jsx)(BulletRangesSummaryPreview_1.BulletRangesSummaryPreview, { bulletStyle: bullet })] }));
 };
 exports.renderStyledColumnBulletRangesSummary = renderStyledColumnBulletRangesSummary;
 const StyledColumnBulletRangesView = ({ data }) => (0, exports.renderStyledColumnBulletRangesSummary)(data);
@@ -159,7 +159,7 @@ const renderStyledColumnBulletStyleSummary = (data) => {
     if (!items.length) {
         return (0, jsx_runtime_1.jsx)(Tag_1.Tag, { children: "No Style Defined" });
     }
-    return ((0, jsx_runtime_1.jsx)(Flex_1.Flex, { alignItems: "center", className: "twa:flex-wrap twa:gap-2", children: items.map((item) => ((0, jsx_runtime_1.jsx)(Tag_1.Tag, { children: item }, item))) }));
+    return (0, SummaryColorTag_1.renderSummaryStringTags)(items);
 };
 exports.renderStyledColumnBulletStyleSummary = renderStyledColumnBulletStyleSummary;
 /** Full combined summary (ranges + style); kept for callers that expect one block. */
@@ -383,20 +383,11 @@ const StyledColumnWizardBulletSection = (props) => {
                                             }, items: [
                                                 { value: 'Auto', label: 'Auto' },
                                                 { value: 'Zero', label: 'Zero' },
-                                            ] }) }) })] }) })] }), (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: "Choose whether to display text in the cell (and if so, then position and font))" })] }), (0, jsx_runtime_1.jsxs)(Card_1.Card.Body, { children: [(0, jsx_runtime_1.jsxs)(FormLayout_1.default, { sizes: [...BULLET_STYLE_FORM_SIZES], children: [(0, jsx_runtime_1.jsxs)(FormLayout_1.FormRow, { label: "Cell Display:", children: [(0, jsx_runtime_1.jsx)(CheckBox_1.CheckBox, { disabled: disabled, checked: bullet.CellText?.includes('CellValue'), onChange: (checked) => toggleCellText('CellValue', checked), children: "Cell Value" }), ' ', (0, jsx_runtime_1.jsx)(CheckBox_1.CheckBox, { disabled: disabled, className: "twa:ml-3", checked: bullet.CellText?.includes('PercentageValue'), onChange: (checked) => toggleCellText('PercentageValue', checked), children: "Percent Value" })] }), (0, jsx_runtime_1.jsx)(FormLayout_1.FormRow, { label: "Cell Display Position:", children: (0, jsx_runtime_1.jsx)(DropdownButton_1.default, { 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' }) })] }), (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: cellTextDisabled, value: bullet.Font, onChange: (next) => {
+                                            ] }) }) })] }) })] }), (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: "Choose whether to display text in the cell (and if so, then position and font))" })] }), (0, jsx_runtime_1.jsxs)(Card_1.Card.Body, { children: [(0, jsx_runtime_1.jsxs)(FormLayout_1.default, { sizes: [...BULLET_STYLE_FORM_SIZES], children: [(0, jsx_runtime_1.jsxs)(FormLayout_1.FormRow, { label: "Cell Display:", children: [(0, jsx_runtime_1.jsx)(CheckBox_1.CheckBox, { disabled: disabled, checked: bullet.CellText?.includes('CellValue'), onChange: (checked) => toggleCellText('CellValue', checked), children: "Cell Value" }), ' ', (0, jsx_runtime_1.jsx)(CheckBox_1.CheckBox, { disabled: disabled, className: "twa:ml-3", checked: bullet.CellText?.includes('PercentageValue'), onChange: (checked) => toggleCellText('PercentageValue', checked), children: "Percent Value" })] }), (0, jsx_runtime_1.jsx)(FormLayout_1.FormRow, { label: "Cell Display 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", disabled: cellTextDisabled, value: bullet.CellTextPosition ?? 'Below', onValueChange: (v) => handleCellTextPositionChange(v), items: [
+                                                    { value: 'Above', label: 'Above Bar' },
+                                                    { value: 'Below', label: 'Below Bar' },
+                                                    { value: 'Merged', label: 'Merged' },
+                                                ] }) }) })] }), (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: cellTextDisabled, value: bullet.Font, onChange: (next) => {
                                         if (next) {
                                             update({ Font: next });
                                         }

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

@@ -14,6 +14,7 @@ const NumberInput_1 = require("../../../components/Input/NumberInput");
 const StyledColumnGradientHelper_1 = require("../../../Utilities/Helpers/StyledColumnGradientHelper");
 const StyledColumnSliceStyleEditors_1 = require("./StyledColumnSliceStyleEditors");
 const Card_1 = require("../../../components/Card");
+const SummaryColorTag_1 = require("../../Wizard/SummaryColorTag");
 const StyledColumnGradientPreview_1 = require("./StyledColumnWizardStyleSection/Components/StyledColumnGradientPreview");
 const STYLE_FORM_SIZES = ['200px', '1fr'];
 function formatGradientToolTipSummary(opts) {
@@ -56,7 +57,7 @@ const renderStyledColumnGradientStyleSummary = (data) => {
         return (0, jsx_runtime_1.jsx)(Tag_1.Tag, { children: "No Styling Defined" });
     }
     const items = buildStyledColumnGradientStyleSummaryStrings(gs, { includeEmptyTooltip: true });
-    return ((0, jsx_runtime_1.jsx)(Flex_1.Flex, { alignItems: "center", className: "twa:flex-wrap twa:gap-2", children: items.map((item) => ((0, jsx_runtime_1.jsx)(Tag_1.Tag, { children: item }, item))) }));
+    return (0, SummaryColorTag_1.renderSummaryStringTags)(items);
 };
 exports.renderStyledColumnGradientStyleSummary = renderStyledColumnGradientStyleSummary;
 const StyledColumnWizardGradientSection = (props) => {

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

@@ -9,17 +9,22 @@ 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 IconRenderer_1 = require("../../../agGrid/cellRenderers/IconRenderer");
 const Card_1 = require("../../../components/Card");
+const SummaryColorTag_1 = require("../../Wizard/SummaryColorTag");
 const StyledColumnSliceStyleEditors_1 = require("./StyledColumnSliceStyleEditors");
 const StyledColumnIconPreview_1 = require("./StyledColumnWizardStyleSection/Components/StyledColumnIconPreview");
+const wizardSelection_1 = require("../../../Utilities/wizardSelection");
 const STYLE_FORM_SIZES = ['200px', '1fr'];
 const detectIconKind = (spec) => {
     if (typeof spec === 'string')
@@ -131,7 +136,7 @@ const renderStyledColumnIconMappingsSummary = (data) => {
     }
     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, jsx_runtime_1.jsx)(Flex_1.Flex, { alignItems: "center", className: "twa:flex-wrap twa:gap-2", children: tagItems.map((item) => ((0, jsx_runtime_1.jsx)(Tag_1.Tag, { children: item }, item))) }), renderMappingsPreview(previewMappings)] }));
+    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);
@@ -149,7 +154,7 @@ const renderStyledColumnIconStyleSummary = (data) => {
     if (!items.length) {
         return (0, jsx_runtime_1.jsx)(Tag_1.Tag, { children: "No Style Defined" });
     }
-    return ((0, jsx_runtime_1.jsx)(Flex_1.Flex, { alignItems: "center", className: "twa:flex-wrap twa:gap-2", children: items.map((item) => ((0, jsx_runtime_1.jsx)(Tag_1.Tag, { children: item }, item))) }));
+    return (0, SummaryColorTag_1.renderSummaryStringTags)(items);
 };
 exports.renderStyledColumnIconStyleSummary = renderStyledColumnIconStyleSummary;
 /**
@@ -183,11 +188,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,
@@ -247,9 +248,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 = [
@@ -260,8 +259,7 @@ 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
@@ -287,24 +285,24 @@ const StyledColumnWizardIconSection = (props) => {
         const presetMappingsPreview = iconStyle.Preset
             ? (0, IconStylePresets_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: 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
                                         ? '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: [
                                                     { 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.Fallback === 'Icon' && ((0, jsx_runtime_1.jsx)(FormLayout_1.FormRow, { label: "Fallback Icon:", children: (0, jsx_runtime_1.jsx)(IconPickerButton, { value: iconStyle.FallbackIcon, onChange: (next) => update({ FallbackIcon: next }) }) }))] }) })] })] }));
     }
     // ----- Style variant (wizard step title: "Style") ------------------------
     const cellText = iconStyle.CellText ?? [];
@@ -328,7 +326,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 }) })] }), (0, jsx_runtime_1.jsx)(StyledColumnIconPreview_1.StyledColumnIconPreviewCard, { data: data })] }));
 };
 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);
@@ -356,13 +377,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" }))] }));
 };