@adaptabletools/adaptable-cjs 22.1.1-canary.1 → 23.0.0-canary.0

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

@@ -0,0 +1,309 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.StyledColumnWizardBulletSection = exports.renderStyledColumnBulletSummary = exports.renderStyledColumnBulletStyleSummary = exports.renderStyledColumnBulletRangesSummary = void 0;
+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 ErrorBox_1 = tslib_1.__importDefault(require("../../../components/ErrorBox"));
+const FormLayout_1 = tslib_1.__importStar(require("../../../components/FormLayout"));
+const Tag_1 = require("../../../components/Tag");
+const ColorPicker_1 = require("../../../components/ColorPicker");
+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");
+const StyledColumnChartListPreviews_1 = require("./StyledColumnWizardStyleSection/Components/StyledColumnChartListPreviews");
+const NewSelect_1 = require("../../../components/NewSelect");
+const StyledColumnSliceStyleEditors_1 = require("./StyledColumnSliceStyleEditors");
+const Card_1 = require("../../../components/Card");
+const BULLET_STYLE_FORM_SIZES = ['200px', '1fr'];
+// ---------------------------------------------------------------------------
+// Summary helpers
+// ---------------------------------------------------------------------------
+const getTargetSummary = (target) => {
+    if (target == undefined) {
+        return null;
+    }
+    if (Array.isArray(target)) {
+        return `${target.length} target${target.length === 1 ? '' : 's'}`;
+    }
+    if (typeof target === 'number') {
+        return String(target);
+    }
+    if (typeof target === 'string') {
+        return target;
+    }
+    // object form
+    const t = target;
+    return t.Label ?? String(t.Value);
+};
+/** Wizard / list-view summary for the Ranges step (qualitative bands). */
+const renderStyledColumnBulletRangesSummary = (data) => {
+    const bullet = data.BulletChartStyle;
+    if (!bullet) {
+        return (0, jsx_runtime_1.jsx)(Tag_1.Tag, { children: "\u2014" });
+    }
+    const bandCount = bullet.CellRanges?.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.jsx)(StyledColumnChartListPreviews_1.StyledColumnBulletChartListPreview, { bullet: bullet }), (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: [bandCount, " ", bandCount === 1 ? 'band' : 'bands'] }), bullet.RangeValueType != null && ((0, jsx_runtime_1.jsxs)(Flex_1.Box, { className: "twa:mr-1", children: ["\u00B7 ", (0, jsx_runtime_1.jsx)(Tag_1.Tag, { children: bullet.RangeValueType })] }))] })] }));
+};
+exports.renderStyledColumnBulletRangesSummary = renderStyledColumnBulletRangesSummary;
+/** Wizard / list-view summary for the Style step (target, bar, text, font). */
+const renderStyledColumnBulletStyleSummary = (data) => {
+    const bullet = data.BulletChartStyle;
+    if (!bullet) {
+        return (0, jsx_runtime_1.jsx)(Tag_1.Tag, { children: "No Styling Defined" });
+    }
+    const targetSummary = getTargetSummary(bullet.Target);
+    const isVertical = bullet.Orientation === 'Vertical';
+    const fontTags = (0, StyledColumnSliceStyleEditors_1.renderFontStyleSummaryTags)(bullet.Font);
+    return ((0, jsx_runtime_1.jsxs)(Flex_1.Flex, { flexDirection: "column", className: "twa:gap-2 twa:items-start", children: [(0, jsx_runtime_1.jsx)(StyledColumnChartListPreviews_1.StyledColumnBulletChartListPreview, { bullet: bullet }), (0, jsx_runtime_1.jsxs)(Flex_1.Flex, { alignItems: "center", className: "twa:flex-wrap", children: [targetSummary && ((0, jsx_runtime_1.jsxs)(Flex_1.Box, { className: "twa:mr-1", children: ["target: ", (0, jsx_runtime_1.jsx)(Tag_1.Tag, { children: targetSummary })] })), isVertical && ((0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:mr-1", children: (0, jsx_runtime_1.jsx)(Tag_1.Tag, { children: "vertical" }) })), fontTags && ((0, jsx_runtime_1.jsxs)(Flex_1.Box, { className: "twa:mr-1", children: ["Font: ", fontTags] }))] })] }));
+};
+exports.renderStyledColumnBulletStyleSummary = renderStyledColumnBulletStyleSummary;
+/** Full combined summary (ranges + style); kept for callers that expect one block. */
+const renderStyledColumnBulletSummary = (data) => {
+    const bullet = data.BulletChartStyle;
+    if (!bullet) {
+        return (0, jsx_runtime_1.jsx)(Tag_1.Tag, { children: "No Styling Defined" });
+    }
+    const bandCount = bullet.CellRanges?.length ?? 0;
+    const targetSummary = getTargetSummary(bullet.Target);
+    const isVertical = bullet.Orientation === 'Vertical';
+    const fontTags = (0, StyledColumnSliceStyleEditors_1.renderFontStyleSummaryTags)(bullet.Font);
+    return ((0, jsx_runtime_1.jsxs)(Flex_1.Flex, { flexDirection: "column", className: "twa:gap-2 twa:items-start", children: [(0, jsx_runtime_1.jsx)(StyledColumnChartListPreviews_1.StyledColumnBulletChartListPreview, { bullet: bullet }), (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: [bandCount, " ", bandCount === 1 ? 'band' : 'bands'] }), targetSummary && ((0, jsx_runtime_1.jsxs)(Flex_1.Box, { className: "twa:mr-1", children: ["\u00B7 target: ", (0, jsx_runtime_1.jsx)(Tag_1.Tag, { children: targetSummary })] })), isVertical && ((0, jsx_runtime_1.jsxs)(Flex_1.Box, { className: "twa:mr-1", children: ["\u00B7 ", (0, jsx_runtime_1.jsx)(Tag_1.Tag, { children: "vertical" })] })), fontTags && ((0, jsx_runtime_1.jsxs)(Flex_1.Box, { className: "twa:mr-1", children: ["\u00B7 Font: ", fontTags] }))] })] }));
+};
+exports.renderStyledColumnBulletSummary = renderStyledColumnBulletSummary;
+/**
+ * Maps the structured `BulletChartStyle.Target` field to one of the simple
+ * modes the wizard exposes. The wizard only configures *one* primary target;
+ * if a state-defined Bullet Chart used the array form or a per-target marker
+ * override, we leave it alone but treat the first entry as the editable one.
+ */
+const getSimpleTargetMode = (target) => {
+    if (target == undefined) {
+        return 'None';
+    }
+    const value = Array.isArray(target) ? extractTargetValue(target[0]) : extractTargetValue(target);
+    if (value === 'Col-Avg')
+        return 'Col-Avg';
+    if (value === 'Col-Median')
+        return 'Col-Median';
+    if (typeof value === 'number')
+        return 'Number';
+    if (typeof value === 'string')
+        return 'Column';
+    return 'None';
+};
+const extractTargetValue = (t) => {
+    if (t == undefined)
+        return undefined;
+    if (typeof t === 'object') {
+        return t.Value;
+    }
+    return t;
+};
+const MARKER_SHAPES = [
+    { value: 'Line', label: 'Line' },
+    { value: 'Triangle', label: 'Triangle' },
+    { value: 'Dot', label: 'Dot' },
+    { value: 'Diamond', label: 'Diamond' },
+];
+const StyledColumnWizardBulletSection = (props) => {
+    const variant = props.variant ?? 'style';
+    const { data, api } = (0, OnePageAdaptableWizard_1.useOnePageAdaptableWizardContext)();
+    const minMaxRangeValues = React.useMemo(() => {
+        const columnId = data.ColumnId;
+        if (!columnId) {
+            return null;
+        }
+        const column = api.columnApi.getColumnWithColumnId(columnId);
+        return {
+            min: api.styledColumnApi.internalApi.getMinValueForNumericColumn(column),
+            max: api.styledColumnApi.internalApi.getMaxValueForNumericColumn(column),
+        };
+    }, [data]);
+    const scope = { ColumnIds: [data.ColumnId] };
+    const bullet = data.BulletChartStyle ?? {};
+    const disabled = !data.ColumnId;
+    // -------------------------------------------------------------------------
+    // Updaters
+    // -------------------------------------------------------------------------
+    const update = (patch) => {
+        props.onChange({
+            ...data,
+            BulletChartStyle: {
+                ...bullet,
+                ...patch,
+            },
+        });
+    };
+    const onUpdateRanges = (ranges) => {
+        update({ CellRanges: ranges });
+    };
+    const onUpdateColumnComparison = (columnComparison) => {
+        // Bullet Chart can technically still accept a ColumnComparison through
+        // state, but the Bullet wizard hides the toggle. This callback is wired
+        // up only to satisfy the RangesComponent prop contract; in practice it
+        // will never be invoked because hideColumnComparison is true.
+        update({ ColumnComparison: columnComparison });
+    };
+    const onRangeValueTypeChange = React.useCallback((rangeValueType) => {
+        const ranges = rangeValueType === 'Number'
+            ? api.columnScopeApi.createCellColorRangesForScope(scope)
+            : [
+                {
+                    Min: 0,
+                    Max: 100,
+                    Color: (0, UIHelper_1.getGraySwatchColor)(),
+                },
+            ];
+        props.onChange({
+            ...data,
+            BulletChartStyle: {
+                ...bullet,
+                CellRanges: ranges,
+                RangeValueType: rangeValueType,
+            },
+        });
+    }, [data, bullet]);
+    // -- Target ----------------------------------------------------------------
+    const currentMode = getSimpleTargetMode(bullet.Target);
+    const handleTargetModeChange = (mode) => {
+        if (mode === 'None') {
+            const next = { ...bullet };
+            delete next.Target;
+            props.onChange({ ...data, BulletChartStyle: next });
+            return;
+        }
+        if (mode === 'Col-Avg' || mode === 'Col-Median') {
+            update({ Target: mode });
+            return;
+        }
+        if (mode === 'Number') {
+            update({ Target: minMaxRangeValues?.max ?? 0 });
+            return;
+        }
+        if (mode === 'Column') {
+            // Use the first available numeric column (excluding the styled column itself)
+            const candidate = api.columnApi
+                .getNumericColumns()
+                .find((c) => c.columnId !== data.ColumnId);
+            update({ Target: candidate?.columnId ?? '' });
+            return;
+        }
+    };
+    const handleNumericTargetChange = (value) => {
+        if (value == undefined || isNaN(value)) {
+            update({ Target: 0 });
+        }
+        else {
+            update({ Target: value });
+        }
+    };
+    const handleColumnTargetChange = (columnId) => {
+        update({ Target: columnId });
+    };
+    // -- Marker ----------------------------------------------------------------
+    const updateMarker = (patch) => {
+        update({
+            TargetMarker: {
+                Shape: 'Line',
+                ...bullet.TargetMarker,
+                ...patch,
+            },
+        });
+    };
+    // -- Cell text -------------------------------------------------------------
+    const toggleCellText = (token, checked) => {
+        const current = bullet.CellText ?? [];
+        const next = checked
+            ? Array.from(new Set([...current, token]))
+            : current.filter((t) => t !== token);
+        update({ CellText: next });
+    };
+    const toggleToolTipText = (token, checked) => {
+        const current = bullet.ToolTipText ?? [];
+        const next = checked
+            ? Array.from(new Set([...current, token]))
+            : current.filter((t) => t !== token);
+        update({ ToolTipText: next });
+    };
+    const handleCellTextPositionChange = (pos) => {
+        update({ CellTextPosition: pos });
+    };
+    // -------------------------------------------------------------------------
+    // Render
+    // -------------------------------------------------------------------------
+    if (!data.ColumnId) {
+        return ((0, jsx_runtime_1.jsx)(Flex_1.Box, { children: (0, jsx_runtime_1.jsx)(ErrorBox_1.default, { className: "twa:mt-2", children: "You need to select a column before styling." }) }));
+    }
+    // ----- Ranges-only variant (wizard step before Style) ---------------------
+    if (variant === 'ranges') {
+        return ((0, jsx_runtime_1.jsx)(Flex_1.Box, { children: (0, jsx_runtime_1.jsxs)(Card_1.Card, { shadow: false, children: [(0, jsx_runtime_1.jsxs)(Card_1.Card.Title, { children: [(0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:font-medium", children: "Ranges" }), (0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:text-xs twa:opacity-70 twa:font-normal twa:max-w-[520px]", children: "Define qualitative bands for the bullet scale" })] }), (0, jsx_runtime_1.jsx)(Card_1.Card.Body, { children: (0, jsx_runtime_1.jsx)(RangesComponent_1.RangesComponent, { disabled: disabled, minMaxRangeValues: minMaxRangeValues, api: api, scope: scope, ranges: bullet.CellRanges, rangeValueType: bullet.RangeValueType, onRangeValueTypeChange: onRangeValueTypeChange, columnComparison: bullet.ColumnComparison, updateRanges: onUpdateRanges, updateColumnComparison: onUpdateColumnComparison, hideColumnComparison: true }) })] }) }));
+    }
+    const numericTargetValue = typeof bullet.Target === 'number'
+        ? bullet.Target
+        : typeof bullet.Target?.Value === 'number'
+            ? bullet.Target.Value
+            : undefined;
+    const columnTargetValue = typeof bullet.Target === 'string' && bullet.Target !== 'Col-Avg' && bullet.Target !== 'Col-Median'
+        ? bullet.Target
+        : typeof bullet.Target?.Value === 'string'
+            ? bullet.Target.Value
+            : undefined;
+    const marker = {
+        Shape: bullet.TargetMarker?.Shape ?? 'Line',
+        Color: bullet.TargetMarker?.Color ?? '',
+        Size: bullet.TargetMarker?.Size ?? (bullet.TargetMarker?.Shape === 'Line' ? 2 : 8),
+    };
+    const cellTextDisabled = ArrayExtensions_1.default.IsNullOrEmpty(bullet.CellText) || disabled;
+    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: "Target" }), (0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:text-xs twa:opacity-70 twa:font-normal twa:max-w-[520px]", children: "Select a target value for the bullet scale" })] }), (0, jsx_runtime_1.jsx)(Card_1.Card.Body, { children: (0, jsx_runtime_1.jsxs)(FormLayout_1.default, { sizes: [...BULLET_STYLE_FORM_SIZES], children: [(0, jsx_runtime_1.jsx)(FormLayout_1.FormRow, { label: "Target:", children: (0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:max-w-[180px]", children: (0, jsx_runtime_1.jsx)(NewSelect_1.SingleSelect, { className: "twa:w-full", value: currentMode, onValueChange: (v) => handleTargetModeChange(v), items: [
+                                                { value: 'None', label: 'None' },
+                                                { value: 'Number', label: 'Fixed Number' },
+                                                { value: 'Column', label: 'Column' },
+                                                { value: 'Col-Avg', label: 'Column Average' },
+                                                { value: 'Col-Median', label: 'Column Median' },
+                                            ] }) }) }), currentMode === 'Number' && ((0, jsx_runtime_1.jsx)(FormLayout_1.FormRow, { label: "Target Value:", children: (0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:max-w-[160px]", children: (0, jsx_runtime_1.jsx)(AdaptableInput_1.default, { type: "number", value: numericTargetValue ?? '', onChange: (e) => handleNumericTargetChange(e.target.value === '' ? undefined : Number(e.target.value)) }) }) })), currentMode === 'Column' && ((0, jsx_runtime_1.jsx)(FormLayout_1.FormRow, { label: "Target Column:", children: (0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:max-w-[220px]", children: (0, jsx_runtime_1.jsx)(ColumnSelector_1.ColumnSelector, { type: "number", value: columnTargetValue ?? '', onChange: handleColumnTargetChange, filterColumn: (c) => c.columnId !== data.ColumnId, placeholder: "Select numeric column" }) }) })), currentMode !== 'None' && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(FormLayout_1.FormRow, { label: "Marker Shape:", 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: marker.Shape, onValueChange: (s) => updateMarker({ Shape: s }), items: MARKER_SHAPES.map((s) => ({ value: s.value, label: s.label })) }) }) }), (0, jsx_runtime_1.jsx)(FormLayout_1.FormRow, { label: "Marker Colour:", children: (0, jsx_runtime_1.jsx)(ColorPicker_1.ColorPicker, { disabled: disabled, api: api, value: marker.Color || undefined, onChange: (c) => updateMarker({ Color: c }) }) }), (0, jsx_runtime_1.jsx)(FormLayout_1.FormRow, { label: "Marker Size:", children: (0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:max-w-[100px]", children: (0, jsx_runtime_1.jsx)(AdaptableInput_1.default, { type: "number", min: 1, value: marker.Size, onChange: (e) => updateMarker({ Size: Number(e.target.value) }) }) }) })] }))] }) })] }), (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: "Bar" }), (0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:text-xs twa:opacity-70 twa:font-normal twa:max-w-[520px]", children: "Set the bar orientation and height" })] }), (0, jsx_runtime_1.jsx)(Card_1.Card.Body, { children: (0, jsx_runtime_1.jsxs)(FormLayout_1.default, { sizes: [...BULLET_STYLE_FORM_SIZES], children: [(0, jsx_runtime_1.jsx)(FormLayout_1.FormRow, { label: "Orientation:", 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: bullet.Orientation ?? 'Horizontal', onValueChange: (v) => update({ Orientation: v }), items: [
+                                                { value: 'Horizontal', label: 'Horizontal' },
+                                                { value: 'Vertical', label: 'Vertical' },
+                                            ] }) }) }), bullet.Orientation === 'Vertical' && ((0, jsx_runtime_1.jsx)(FormLayout_1.FormRow, { label: "", children: (0, jsx_runtime_1.jsxs)(Flex_1.Box, { className: "twa:text-xs twa:text-neutral-500", children: ["Tip: vertical bullet charts need a tall row height to be readable (we recommend at least 60px). Set ", (0, jsx_runtime_1.jsx)("code", { children: "rowHeight" }), " on ", (0, jsx_runtime_1.jsx)("code", { children: " gridOptions " }), " or use", ' ', (0, jsx_runtime_1.jsx)("code", { children: "getRowHeight" }), "."] }) })), (0, jsx_runtime_1.jsx)(FormLayout_1.FormRow, { label: "Bar Colour:", children: (0, jsx_runtime_1.jsx)(ColorPicker_1.ColorPicker, { disabled: disabled, api: api, value: bullet.BarColor, onChange: (c) => update({ BarColor: c }) }) }), (0, jsx_runtime_1.jsx)(FormLayout_1.FormRow, { label: bullet.Orientation === 'Vertical' ? 'Bar Width (px):' : 'Bar Height (px):', children: (0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:max-w-[100px]", children: (0, jsx_runtime_1.jsx)(AdaptableInput_1.default, { type: "number", min: 1, value: bullet.BarHeight ?? '', onChange: (e) => update({
+                                                BarHeight: e.target.value === '' ? undefined : Number(e.target.value),
+                                            }), placeholder: "8" }) }) }), (0, jsx_runtime_1.jsx)(FormLayout_1.FormRow, { label: "Origin:", 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: typeof bullet.Origin === 'number' ? 'Number' : (bullet.Origin ?? 'Auto'), onValueChange: (v) => {
+                                                if (v === 'Auto' || v === 'Zero') {
+                                                    update({ Origin: v });
+                                                }
+                                                else {
+                                                    update({ Origin: 0 });
+                                                }
+                                            }, 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) => {
+                                        if (next) {
+                                            update({ Font: next });
+                                        }
+                                        else {
+                                            const cleaned = { ...bullet };
+                                            delete cleaned.Font;
+                                            props.onChange({ ...data, BulletChartStyle: cleaned });
+                                        }
+                                    } }) })] })] }), (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 to display a tooltip" })] }), (0, jsx_runtime_1.jsx)(Card_1.Card.Body, { children: (0, jsx_runtime_1.jsx)(FormLayout_1.default, { sizes: [...BULLET_STYLE_FORM_SIZES], children: (0, jsx_runtime_1.jsxs)(FormLayout_1.FormRow, { label: "Tooltip Display:", children: [(0, jsx_runtime_1.jsx)(CheckBox_1.CheckBox, { disabled: disabled, checked: bullet.ToolTipText?.includes('CellValue'), onChange: (checked) => toggleToolTipText('CellValue', checked), children: "Cell Value" }), ' ', (0, jsx_runtime_1.jsx)(CheckBox_1.CheckBox, { disabled: disabled, className: "twa:ml-3", checked: bullet.ToolTipText?.includes('PercentageValue'), onChange: (checked) => toggleToolTipText('PercentageValue', checked), children: "Percent Value" })] }) }) })] })] }));
+};
+exports.StyledColumnWizardBulletSection = StyledColumnWizardBulletSection;

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

@@ -0,0 +1,10 @@
+import * as React from 'react';
+import { StyledColumn } from '../../../AdaptableState/StyledColumnState';
+export interface StyledColumnWizardGradientSectionProps {
+    onChange: (styledColumn: StyledColumn) => void;
+}
+/**
+ * Summary of Gradient-only style options (alpha bounds, auto-contrast, tooltip).
+ */
+export declare const renderStyledColumnGradientStyleSummary: (data: StyledColumn) => React.JSX.Element;
+export declare const StyledColumnWizardGradientSection: React.FunctionComponent<StyledColumnWizardGradientSectionProps>;

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

@@ -0,0 +1,96 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.StyledColumnWizardGradientSection = exports.renderStyledColumnGradientStyleSummary = void 0;
+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 ErrorBox_1 = tslib_1.__importDefault(require("../../../components/ErrorBox"));
+const FormLayout_1 = tslib_1.__importStar(require("../../../components/FormLayout"));
+const Tag_1 = require("../../../components/Tag");
+const OnePageAdaptableWizard_1 = require("../../Wizard/OnePageAdaptableWizard");
+const Flex_1 = require("../../../components/Flex");
+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 STYLE_FORM_SIZES = ['200px', '1fr'];
+function formatToolTipText(opts) {
+    if (!opts || opts.length === 0) {
+        return '—';
+    }
+    return opts.map((t) => (t === 'CellValue' ? 'Cell Value' : 'Percent Value')).join(' + ');
+}
+/**
+ * Summary of Gradient-only style options (alpha bounds, auto-contrast, tooltip).
+ */
+const renderStyledColumnGradientStyleSummary = (data) => {
+    const gs = data.GradientStyle;
+    if (!gs) {
+        return (0, jsx_runtime_1.jsx)(Tag_1.Tag, { children: "No Styling Defined" });
+    }
+    const minA = gs.MinAlpha ?? StyledColumnGradientHelper_1.DEFAULT_GRADIENT_MIN_ALPHA;
+    const maxA = gs.MaxAlpha ?? StyledColumnGradientHelper_1.DEFAULT_GRADIENT_MAX_ALPHA;
+    const fontTags = (0, StyledColumnSliceStyleEditors_1.renderFontStyleSummaryTags)(gs.Font);
+    return ((0, jsx_runtime_1.jsxs)(Flex_1.Flex, { alignItems: "center", className: "twa:flex-wrap twa:gap-2", children: [(0, jsx_runtime_1.jsxs)(Flex_1.Box, { children: ["Alpha: ", (0, jsx_runtime_1.jsx)(Tag_1.Tag, { children: minA }), " \u2192 ", (0, jsx_runtime_1.jsx)(Tag_1.Tag, { children: maxA })] }), gs.AutoContrastText && ((0, jsx_runtime_1.jsxs)(Flex_1.Box, { children: ["Text: ", (0, jsx_runtime_1.jsx)(Tag_1.Tag, { children: "Auto contrast" })] })), (0, jsx_runtime_1.jsxs)(Flex_1.Box, { children: ["Tooltip: ", (0, jsx_runtime_1.jsx)(Tag_1.Tag, { children: formatToolTipText(gs.ToolTipText) })] }), fontTags && (0, jsx_runtime_1.jsxs)(Flex_1.Box, { children: ["Font: ", fontTags] })] }));
+};
+exports.renderStyledColumnGradientStyleSummary = renderStyledColumnGradientStyleSummary;
+const StyledColumnWizardGradientSection = (props) => {
+    const { data, api } = (0, OnePageAdaptableWizard_1.useOnePageAdaptableWizardContext)();
+    const gs = data.GradientStyle ?? {};
+    const disabled = !data.ColumnId;
+    const onFontChange = (next) => {
+        if (next) {
+            props.onChange({ ...data, GradientStyle: { ...gs, Font: next } });
+        }
+        else {
+            const { Font: _f, ...rest } = gs;
+            props.onChange({ ...data, GradientStyle: rest });
+        }
+    };
+    const patchGradient = React.useCallback((patch) => {
+        const next = { ...gs, ...patch };
+        props.onChange({ ...data, GradientStyle: next });
+    }, [data, gs, props]);
+    const onToolTipTextChanged = (option, checked) => {
+        const current = gs.ToolTipText ?? [];
+        const next = checked
+            ? Array.from(new Set([...current, option]))
+            : current.filter((o) => o !== option);
+        if (next.length === 0) {
+            const { ToolTipText: _t, ...rest } = gs;
+            props.onChange({ ...data, GradientStyle: rest });
+        }
+        else {
+            patchGradient({ ToolTipText: next });
+        }
+    };
+    const minAlphaDisplay = gs.MinAlpha ?? StyledColumnGradientHelper_1.DEFAULT_GRADIENT_MIN_ALPHA;
+    const maxAlphaDisplay = gs.MaxAlpha ?? StyledColumnGradientHelper_1.DEFAULT_GRADIENT_MAX_ALPHA;
+    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: "Transparency" }), (0, jsx_runtime_1.jsxs)(Flex_1.Box, { className: "twa:text-xs twa:opacity-70 twa:font-normal twa:max-w-[480px]", children: ["Used at low and high ends of range; defaults are ", StyledColumnGradientHelper_1.DEFAULT_GRADIENT_MIN_ALPHA, " &", ' ', StyledColumnGradientHelper_1.DEFAULT_GRADIENT_MAX_ALPHA, " (Min 0 fades out lowest values)"] })] }), (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.jsx)(FormLayout_1.FormRow, { label: "Alpha range:", children: (0, jsx_runtime_1.jsxs)(Flex_1.Flex, { alignItems: "center", className: "twa:ml-2 twa:flex-wrap twa:gap-3", children: [(0, jsx_runtime_1.jsxs)(Flex_1.Flex, { alignItems: "center", className: "twa:gap-1", children: [(0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:text-sm", children: "Min" }), (0, jsx_runtime_1.jsx)(NumberInput_1.NumberInput, { disabled: disabled, className: "twa:w-20", value: minAlphaDisplay, min: 0, max: 1, step: 0.05, onChange: (v) => {
+                                                        if (v === StyledColumnGradientHelper_1.DEFAULT_GRADIENT_MIN_ALPHA) {
+                                                            const { MinAlpha: _m, ...rest } = gs;
+                                                            props.onChange({ ...data, GradientStyle: rest });
+                                                        }
+                                                        else {
+                                                            patchGradient({ MinAlpha: v });
+                                                        }
+                                                    } })] }), (0, jsx_runtime_1.jsxs)(Flex_1.Flex, { alignItems: "center", className: "twa:gap-1", children: [(0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:text-sm", children: "Max" }), (0, jsx_runtime_1.jsx)(NumberInput_1.NumberInput, { disabled: disabled, className: "twa:w-20", value: maxAlphaDisplay, min: 0, max: 1, step: 0.05, onChange: (v) => {
+                                                        if (v === StyledColumnGradientHelper_1.DEFAULT_GRADIENT_MAX_ALPHA) {
+                                                            const { MaxAlpha: _m, ...rest } = gs;
+                                                            props.onChange({ ...data, GradientStyle: rest });
+                                                        }
+                                                        else {
+                                                            patchGradient({ MaxAlpha: v });
+                                                        }
+                                                    } })] })] }) }) }) })] }), (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: "Auto Contrast" }), (0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:text-xs twa:opacity-70 twa:font-normal twa:max-w-[600px]", children: "Dynamically set cell fore colour so values stay readable (overrides Format Column properties)" })] }), (0, jsx_runtime_1.jsx)(Card_1.Card.Body, { children: (0, jsx_runtime_1.jsx)(CheckBox_1.CheckBox, { disabled: disabled, checked: !!gs.AutoContrastText, onChange: (checked) => {
+                                if (!checked) {
+                                    const { AutoContrastText: _a, ...rest } = gs;
+                                    props.onChange({ ...data, GradientStyle: rest });
+                                }
+                                else {
+                                    patchGradient({ AutoContrastText: true });
+                                }
+                            }, children: "Make text readable on tinted backgrounds" }) })] }), (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-[600px]", children: "Set Tooltip properties" })] }), (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.jsx)(FormLayout_1.FormRow, { label: "Tooltip:", children: (0, jsx_runtime_1.jsxs)(Flex_1.Box, { className: "twa:ml-2", children: [(0, jsx_runtime_1.jsx)(CheckBox_1.CheckBox, { disabled: disabled, checked: gs.ToolTipText?.includes('CellValue'), onChange: (checked) => onToolTipTextChanged('CellValue', checked), children: "Cell Value" }), ' ', (0, jsx_runtime_1.jsx)(CheckBox_1.CheckBox, { disabled: disabled, className: "twa:ml-3", checked: gs.ToolTipText?.includes('PercentageValue'), onChange: (checked) => onToolTipTextChanged('PercentageValue', checked), children: "Percent along scale" })] }) }) }) })] }), (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: "Font" }), (0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:text-xs twa:opacity-70 twa:font-normal twa:max-w-[480px]", children: "Optional font properties (takes precedence over Format Column)" })] }), (0, jsx_runtime_1.jsx)(Card_1.Card.Body, { children: (0, jsx_runtime_1.jsx)(StyledColumnSliceStyleEditors_1.StyledColumnFontStyleEditor, { api: api, disabled: disabled, value: gs.Font, onChange: onFontChange }) })] }), !data.ColumnId && ((0, jsx_runtime_1.jsx)(ErrorBox_1.default, { className: "twa:mt-2", children: "Select a column before changing Gradient style." }))] }));
+};
+exports.StyledColumnWizardGradientSection = StyledColumnWizardGradientSection;

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

@@ -0,0 +1,20 @@
+import * as React from 'react';
+import { StyledColumn } from '../../../AdaptableState/StyledColumnState';
+/** Mappings step summary. */
+export declare const renderStyledColumnIconMappingsSummary: (data: StyledColumn) => React.JSX.Element;
+/** Style step summary (size, text, tooltip, font / cell). */
+export declare const renderStyledColumnIconStyleSummary: (data: StyledColumn) => React.JSX.Element;
+/**
+ * Combined summary for the Styled Columns list row (preview + key facts).
+ */
+export declare const renderStyledColumnIconSummary: (data: StyledColumn) => React.JSX.Element;
+export declare const isValidIconStyleMappings: (data: StyledColumn) => true | string;
+export interface StyledColumnWizardIconSectionProps {
+    onChange: (styledColumn: StyledColumn) => void;
+    /**
+     * - `'mappings'` — Preset, mappings table, match mode, fallback.
+     * - `'style'`    — Size, gap, cell text, tooltip, font / cell slices.
+     */
+    variant: 'mappings' | 'style';
+}
+export declare const StyledColumnWizardIconSection: React.FunctionComponent<StyledColumnWizardIconSectionProps>;