@adaptabletools/adaptable 22.1.1 → 23.0.0-canary.0

package/src/View/StyledColumn/Wizard/StyledColumnWizardStyleSection/StyledColumnWizardRangesSection.js

@@ -0,0 +1,153 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as React from 'react';
+import ErrorBox from '../../../../components/ErrorBox';
+import { Tag } from '../../../../components/Tag';
+import { RangesComponent } from '../../../Components/RangesComponent';
+import { getGraySwatchColor } from '../../../UIHelper';
+import { useOnePageAdaptableWizardContext } from '../../../Wizard/OnePageAdaptableWizard';
+import { Box } from '../../../../components/Flex';
+import { PercentBarColumnComparisonPreview } from './Components/PercentBarColumnComparisonPreview';
+import { PercentBarPreview } from './Components/PercentBarRangesPreview';
+import { GradientColumnComparisonSummaryPreview, GradientRangesSummaryPreview, } from './Components/GradientSummaryPreview';
+// ---------------------------------------------------------------------------
+// Summary helpers (extracted from the old single-step Style section)
+// ---------------------------------------------------------------------------
+/**
+ * Summary of the Ranges / Column Comparison configuration of a styled column.
+ * Works for both Gradient and Percent Bar.
+ */
+export const renderStyledColumnRangesSummary = (data, api) => {
+    if (!api) {
+        const { api: adaptableApi } = useOnePageAdaptableWizardContext();
+        api = adaptableApi;
+    }
+    if (data.GradientStyle) {
+        if (data.GradientStyle.ZeroCentred) {
+            return (_jsx(GradientRangesSummaryPreview, { zeroCentred: data.GradientStyle.ZeroCentred, rangeValueType: data.GradientStyle.RangeValueType, gradientStyle: data.GradientStyle }));
+        }
+        if (data.GradientStyle.CellRanges) {
+            return (_jsx(GradientRangesSummaryPreview, { ranges: data.GradientStyle.CellRanges, rangeValueType: data.GradientStyle.RangeValueType, gradientStyle: data.GradientStyle }));
+        }
+        if (data.GradientStyle.ColumnComparison) {
+            return (_jsx(GradientColumnComparisonSummaryPreview, { columnComparison: data.GradientStyle.ColumnComparison, gradientStyle: data.GradientStyle, api: api }));
+        }
+    }
+    if (data.PercentBarStyle) {
+        if (data.PercentBarStyle.ColumnComparison) {
+            return _jsx(PercentBarColumnComparisonPreview, { percentBarStyle: data.PercentBarStyle });
+        }
+        if (data.PercentBarStyle.CellRanges) {
+            return _jsx(PercentBarPreview, { percentBarStyle: data.PercentBarStyle });
+        }
+    }
+    return _jsx(Tag, { children: "No Ranges Defined" });
+};
+export const StyledColumnWizardRangesSection = (props) => {
+    const { data, api } = 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 disabled = !data.ColumnId;
+    // Gradient updates
+    const onUpdateGradientStyleRanges = (ranges) => {
+        const gradientStyle = {
+            ...data.GradientStyle,
+            CellRanges: ranges,
+        };
+        delete gradientStyle.ZeroCentred;
+        delete gradientStyle.ColumnComparison;
+        props.onChange({ ...data, GradientStyle: gradientStyle });
+    };
+    const onUpdateGradientStyleColumnComparison = (columnComparison) => {
+        const nextGradient = {
+            ...data.GradientStyle,
+            ColumnComparison: columnComparison,
+        };
+        delete nextGradient.CellRanges;
+        delete nextGradient.RangeValueType;
+        delete nextGradient.ZeroCentred;
+        props.onChange({ ...data, GradientStyle: nextGradient });
+    };
+    const onApplyGradientZeroCentred = (zc) => {
+        const gradientStyle = {
+            ...data.GradientStyle,
+            ZeroCentred: zc,
+            // Zero-centred bands use absolute numeric 0 as the midpoint; Percentage
+            // mode interprets numeric endpoints as % along Col-Min…Col-Max and breaks
+            // the diverging bands (see `gradientStyleRangeLookupValueType`).
+            RangeValueType: 'Number',
+        };
+        delete gradientStyle.CellRanges;
+        delete gradientStyle.ColumnComparison;
+        props.onChange({ ...data, GradientStyle: gradientStyle });
+    };
+    // Percent Bar updates — switching to Column Comparison wipes any existing
+    // CellRanges / RangeValueType so the two modes can't coexist in state.
+    const onUpdatePercentBarStyleColumnComparison = (columnComparison) => {
+        const nextPercentBar = {
+            ...data.PercentBarStyle,
+            ColumnComparison: columnComparison,
+        };
+        delete nextPercentBar.CellRanges;
+        delete nextPercentBar.RangeValueType;
+        props.onChange({ ...data, PercentBarStyle: nextPercentBar });
+    };
+    const onUpdatePercentBarStyleRanges = (ranges) => {
+        const nextPercentBar = {
+            ...data.PercentBarStyle,
+            CellRanges: ranges,
+        };
+        delete nextPercentBar.ColumnComparison;
+        props.onChange({ ...data, PercentBarStyle: nextPercentBar });
+    };
+    const handleRangeValueTypeChange = React.useCallback((rangeValueType) => {
+        const ranges = rangeValueType === 'Number'
+            ? api.columnScopeApi.createCellColorRangesForScope(scope)
+            : [
+                {
+                    Min: 0,
+                    Max: 100,
+                    Color: getGraySwatchColor(),
+                },
+            ];
+        let newStyledColumn = data;
+        const commonStyle = {
+            CellRanges: ranges,
+            RangeValueType: rangeValueType,
+        };
+        if ('GradientStyle' in newStyledColumn) {
+            const gs = {
+                ...newStyledColumn.GradientStyle,
+                ...commonStyle,
+            };
+            delete gs.ZeroCentred;
+            delete gs.ColumnComparison;
+            newStyledColumn = {
+                ...newStyledColumn,
+                GradientStyle: gs,
+            };
+        }
+        else {
+            const pb = {
+                ...newStyledColumn.PercentBarStyle,
+                ...commonStyle,
+            };
+            delete pb.ColumnComparison;
+            newStyledColumn = {
+                ...newStyledColumn,
+                PercentBarStyle: pb,
+            };
+        }
+        props.onChange(newStyledColumn);
+    }, [data]);
+    return (_jsxs(Box, { children: [data?.GradientStyle && (_jsx(RangesComponent, { disabled: disabled, minMaxRangeValues: minMaxRangeValues, api: api, scope: scope, showZeroCentredTab: true, showRangeDirection: true, zeroCentred: data.GradientStyle.ZeroCentred, onApplyZeroCentred: onApplyGradientZeroCentred, ranges: data.GradientStyle.CellRanges ?? [], rangeValueType: data.GradientStyle?.RangeValueType, onRangeValueTypeChange: handleRangeValueTypeChange, columnComparison: data?.GradientStyle?.ColumnComparison, updateRanges: onUpdateGradientStyleRanges, updateColumnComparison: onUpdateGradientStyleColumnComparison })), data?.PercentBarStyle && (_jsx(RangesComponent, { disabled: disabled, minMaxRangeValues: minMaxRangeValues, api: api, scope: scope, ranges: data.PercentBarStyle?.CellRanges, rangeValueType: data.PercentBarStyle?.RangeValueType, onRangeValueTypeChange: handleRangeValueTypeChange, columnComparison: data?.PercentBarStyle?.ColumnComparison, updateRanges: onUpdatePercentBarStyleRanges, updateColumnComparison: onUpdatePercentBarStyleColumnComparison })), !data.ColumnId && (_jsx(ErrorBox, { className: "twa:mt-2", children: "You need to select a column before defining Ranges." }))] }));
+};

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

@@ -1,8 +1,17 @@
 import * as React from 'react';
 import { StyledColumn } from '../../../../AdaptableState/StyledColumnState';
 import { AdaptableApi } from '../../../../types';
+export { renderStyledColumnRangesSummary, StyledColumnWizardRangesSection, } from './StyledColumnWizardRangesSection';
+/**
+ * Compact summary of the *non-range* style properties of a Percent Bar.
+ * (Gradient uses `renderStyledColumnGradientStyleSummary`.)
+ *
+ * Used by:
+ *   - the wizard's "Style" step `renderSummary`
+ *   - the Styled Column module's `toView` (read-only summary popup)
+ */
+export declare const renderStyledColumnStyleSummary: (data: StyledColumn, _api?: AdaptableApi) => React.JSX.Element;
 export declare const renderFormatColumnStyleWizardSummary: (data: StyledColumn) => React.JSX.Element;
-export declare const renderStyledColumnStyleSummary: (data: StyledColumn, api: AdaptableApi) => React.JSX.Element;
 export interface StyledColumnWizardStyleSectionProps {
     onChange: (styledColumn: StyledColumn) => void;
 }

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

@@ -1,317 +1,174 @@
-import * as React from 'react';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { CheckBox } from '../../../../components/CheckBox';
 import ErrorBox from '../../../../components/ErrorBox';
 import FormLayout, { FormRow } from '../../../../components/FormLayout';
 import { Tag } from '../../../../components/Tag';
 import { ColorPicker } from '../../../../components/ColorPicker';
-import { RangesComponent } from '../../../Components/RangesComponent';
-import { StyleVisualItem } from '../../../Components/StyleVisualItem';
-import { getHexForName, GRAY } from '../../../UIHelper';
+import { getGraySwatchColor } from '../../../UIHelper';
 import { useOnePageAdaptableWizardContext } from '../../../Wizard/OnePageAdaptableWizard';
-import { PercentBarColumnComparisonPreview } from './Components/PercentBarColumnComparisonPreview';
-import { PercentBarPreview } from './Components/PercentBarRangesPreview';
-import DropdownButton from '../../../../components/DropdownButton';
 import ArrayExtensions from '../../../../Utilities/Extensions/ArrayExtensions';
 import { Box, Flex } from '../../../../components/Flex';
-export const renderFormatColumnStyleWizardSummary = (data) => {
-    const { api } = useOnePageAdaptableWizardContext();
-    return renderStyledColumnStyleSummary(data, api);
+import Radio, { RadioGroup } from '../../../../components/Radio';
+import { Toggle, ToggleGroup } from '../../../../components/Toggle';
+import { renderFontStyleSummaryTags, StyledColumnFontStyleEditor, } from '../StyledColumnSliceStyleEditors';
+import { Card } from '../../../../components/Card';
+// Re-export the Ranges section + summary for legacy import paths.
+export { renderStyledColumnRangesSummary, StyledColumnWizardRangesSection, } from './StyledColumnWizardRangesSection';
+// ---------------------------------------------------------------------------
+// Summary helpers
+// ---------------------------------------------------------------------------
+const formatOriginLabel = (origin) => {
+    if (origin == undefined)
+        return 'Auto';
+    if (typeof origin === 'number')
+        return `Custom (${origin})`;
+    return origin;
 };
-const getRanges = (ranges, rangeValueType) => {
-    let postfix = '';
-    if (rangeValueType === 'Percentage') {
-        postfix = '%';
-    }
-    return ranges.map((r, i) => (React.createElement(Flex, { key: i, alignItems: "center", className: "twa:mr-3" },
-        React.createElement(Box, { className: "twa:mr-1" },
-            r.Min,
-            postfix,
-            " to ",
-            r.Max,
-            postfix),
-        React.createElement(StyleVisualItem, { Style: {
-                BackColor: r.Color,
-                ForeColor: r.Color,
-            } }))));
+const formatAlignmentLabel = (alignment) => {
+    if (alignment == undefined)
+        return 'Inherit';
+    return alignment;
 };
-const getColumnComparison = (columnComparison, api) => {
-    return (React.createElement(Flex, { key: 'cc', alignItems: "center", className: "twa:mr-3" },
-        React.createElement(Box, { className: "twa:mr-1" },
-            "Min Value:",
-            ' ',
-            isNaN(Number(columnComparison.MinValue))
-                ? '[' + api.columnApi.getFriendlyNameForColumnId(String(columnComparison.MinValue)) + ']'
-                : columnComparison.MinValue,
-            ' ',
-            ", Max Value:",
-            ' ',
-            isNaN(Number(columnComparison.MaxValue))
-                ? '[' + api.columnApi.getFriendlyNameForColumnId(String(columnComparison.MaxValue)) + ']'
-                : columnComparison.MaxValue,
-            ' '),
-        React.createElement(StyleVisualItem, { Style: {
-                BackColor: columnComparison.Color,
-                ForeColor: columnComparison.Color,
-            } })));
+const formatCellText = (cellText) => {
+    if (!cellText || cellText.length === 0)
+        return '—';
+    return cellText.map((t) => (t === 'CellValue' ? 'Cell Value' : 'Percent Value')).join(' + ');
 };
-export const renderStyledColumnStyleSummary = (data, api) => {
-    if (!api) {
-        const { api: adaptableApi } = useOnePageAdaptableWizardContext();
-        api = adaptableApi;
+/**
+ * Compact summary of the *non-range* style properties of a Percent Bar.
+ * (Gradient uses `renderStyledColumnGradientStyleSummary`.)
+ *
+ * Used by:
+ *   - the wizard's "Style" step `renderSummary`
+ *   - the Styled Column module's `toView` (read-only summary popup)
+ */
+export const renderStyledColumnStyleSummary = (data, _api) => {
+    const pb = data.PercentBarStyle;
+    if (!pb) {
+        return _jsx(Tag, { children: "No Styling Defined" });
     }
-    if (data.GradientStyle) {
-        if (data.GradientStyle.CellRanges) {
-            return getRanges(data.GradientStyle.CellRanges, data.GradientStyle.RangeValueType);
-        }
-        if (data.GradientStyle.ColumnComparison) {
-            return getColumnComparison(data.GradientStyle.ColumnComparison, api);
-        }
+    const parts = [
+        _jsxs(Box, { className: "twa:mr-2", children: ["Origin: ", _jsx(Tag, { children: formatOriginLabel(pb.Origin) })] }, "origin"),
+    ];
+    if (pb.CellText && pb.CellText.length > 0) {
+        parts.push(_jsxs(Box, { className: "twa:mr-2", children: ["Text: ", _jsx(Tag, { children: formatCellText(pb.CellText) }), " (", pb.CellTextPosition ?? 'Below', ")"] }, "text"));
+        parts.push(_jsxs(Box, { className: "twa:mr-2", children: ["Align: ", _jsx(Tag, { children: formatAlignmentLabel(pb.CellTextAlignment) })] }, "align"));
     }
-    if (data.PercentBarStyle) {
-        if (data.PercentBarStyle.ColumnComparison) {
-            return React.createElement(PercentBarColumnComparisonPreview, { percentBarStyle: data.PercentBarStyle });
-        }
-        if (data.PercentBarStyle.CellRanges) {
-            return React.createElement(PercentBarPreview, { percentBarStyle: data.PercentBarStyle });
-        }
+    const fontTags = renderFontStyleSummaryTags(pb.Font);
+    if (fontTags) {
+        parts.push(_jsxs(Box, { className: "twa:mr-2", children: ["Font: ", fontTags] }, "font"));
     }
-    return React.createElement(Tag, null, "No Styling Defined");
+    return (_jsx(Flex, { alignItems: "center", className: "twa:flex-wrap", children: parts }));
+};
+// Legacy wrapper kept for any external consumers; safe no-op here.
+export const renderFormatColumnStyleWizardSummary = (data) => {
+    return renderStyledColumnStyleSummary(data);
 };
+// Shared label-column width across all FormLayout blocks in this section.
+// Pinning the width forces colons to line up vertically across cards rather than
+// each FormLayout sizing its label column independently from its own longest label.
+const STYLE_FORM_SIZES = ['200px', '1fr'];
+const CELL_TEXT_POSITION_CHOICES = [
+    { value: 'Above', label: 'Above Bar' },
+    { value: 'Below', label: 'Below Bar' },
+    { value: 'Merged', label: 'Merged' },
+];
+const ORIGIN_CHOICES = [
+    {
+        value: 'Auto',
+        label: 'Auto',
+        hint: 'Anchors to left, but centres at 0 when using negatives',
+    },
+    {
+        value: 'Zero',
+        label: 'Zero',
+        hint: 'Centres at 0; positives extend right, negatives extend left',
+    },
+    {
+        value: 'Min',
+        label: 'Min',
+        hint: "Always anchored at the column's minimum (left edge)",
+    },
+];
 export const StyledColumnWizardStyleSection = (props) => {
     const { data, api } = 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] }; // TODO: remove scope when format column columnStyle is removed
-    // gradient
-    const onUpdateGradientStyleRanges = (ranges) => {
-        const gradientStyle = {
-            ...data.GradientStyle,
-            CellRanges: ranges,
-        };
-        // delete gradientStyle.ColumnComparison in case we are switching from ColumnComparison to CellRanges
-        delete gradientStyle.ColumnComparison;
-        props.onChange({ ...data, GradientStyle: gradientStyle });
-    };
-    const onUpdateGradientStyleColumnComparison = (columnComparison) => {
-        const GradientStyle = {
-            ColumnComparison: columnComparison,
-        };
-        props.onChange({ ...data, GradientStyle });
-    };
-    // percentbar
-    const onUpdatePercentBarStyleColumnComparison = (columnComparison) => {
-        const PercentBarStyle = {
-            ...data.PercentBarStyle,
-            ColumnComparison: columnComparison,
-        };
-        props.onChange({ ...data, PercentBarStyle });
-    };
-    const onUpdatePercentBarStyleRanges = (ranges) => {
-        const PercentBarStyle = {
-            ...data.PercentBarStyle,
-            CellRanges: ranges,
-        };
-        props.onChange({ ...data, PercentBarStyle });
-    };
-    const onPercentBarCellTextCellValueChanged = (checked) => {
-        let percentBarStyle = data?.PercentBarStyle;
-        if (checked) {
-            if (!percentBarStyle.CellText) {
-                percentBarStyle.CellText = ['CellValue'];
-            }
-            else {
-                percentBarStyle.CellText.push('CellValue');
-            }
-        }
-        else {
-            if (percentBarStyle.CellText && percentBarStyle.CellText.includes('PercentageValue')) {
-                percentBarStyle.CellText = ['PercentageValue'];
-            }
-            else {
-                percentBarStyle.CellText = [];
-            }
-        }
+    const disabled = !data.ColumnId;
+    if (!data.PercentBarStyle) {
+        return (_jsx(Box, { children: !data.ColumnId && (_jsx(ErrorBox, { className: "twa:mt-2", children: "You need to select a column before styling." })) }));
+    }
+    const pb = data.PercentBarStyle;
+    // ---- updaters -----------------------------------------------------------
+    const update = (patch) => {
         props.onChange({
             ...data,
-            PercentBarStyle: percentBarStyle,
+            PercentBarStyle: { ...pb, ...patch },
         });
     };
-    const onPercentBarCellTextPercentValueChanged = (checked) => {
-        let percentBarStyle = data?.PercentBarStyle;
-        if (checked) {
-            if (!percentBarStyle.CellText) {
-                percentBarStyle.CellText = ['PercentageValue'];
-            }
-            else {
-                percentBarStyle.CellText.push('PercentageValue');
-            }
-        }
-        else {
-            if (percentBarStyle.CellText && percentBarStyle.CellText.includes('CellValue')) {
-                percentBarStyle.CellText = ['CellValue'];
-            }
-            else {
-                percentBarStyle.CellText = [];
-            }
-        }
-        props.onChange({
-            ...data,
-            PercentBarStyle: percentBarStyle,
-        });
+    const onCellTextChanged = (token, checked) => {
+        const current = pb.CellText ?? [];
+        const next = checked
+            ? Array.from(new Set([...current, token]))
+            : current.filter((t) => t !== token);
+        update({ CellText: next });
     };
-    const handlePercentBarCellTextPositionChange = (percentBarPosition) => {
-        props.onChange({
-            ...data,
-            PercentBarStyle: {
-                ...data.PercentBarStyle,
-                CellTextPosition: percentBarPosition,
-            },
-        });
+    const onToolTipTextChanged = (token, checked) => {
+        const current = pb.ToolTipText ?? [];
+        const next = checked
+            ? Array.from(new Set([...current, token]))
+            : current.filter((t) => t !== token);
+        update({ ToolTipText: next });
     };
-    const onPercentBarToolTipTextCellValueChanged = (checked) => {
-        let percentBarStyle = data?.PercentBarStyle;
-        if (checked) {
-            if (!percentBarStyle.ToolTipText) {
-                percentBarStyle.ToolTipText = ['CellValue'];
-            }
-            else {
-                percentBarStyle.ToolTipText.push('CellValue');
-            }
+    const handleCellTextPositionChange = (pos) => update({ CellTextPosition: pos });
+    const handleOriginChange = (origin) => update({ Origin: origin });
+    const handleCellTextAlignmentChange = (choice) => {
+        if (choice === 'Inherit') {
+            const next = { ...pb };
+            delete next.CellTextAlignment;
+            props.onChange({ ...data, PercentBarStyle: next });
+            return;
         }
-        else {
-            if (percentBarStyle.ToolTipText && percentBarStyle.ToolTipText.includes('PercentageValue')) {
-                percentBarStyle.ToolTipText = ['PercentageValue'];
-            }
-            else {
-                percentBarStyle.ToolTipText = [];
-            }
-        }
-        props.onChange({
-            ...data,
-            PercentBarStyle: percentBarStyle,
-        });
+        update({ CellTextAlignment: choice });
     };
-    const onPercentBarToolTipTextPercentValueChanged = (checked) => {
-        let percentBarStyle = data.PercentBarStyle;
-        if (checked) {
-            if (!percentBarStyle.ToolTipText) {
-                percentBarStyle.ToolTipText = ['PercentageValue'];
-            }
-            else {
-                percentBarStyle.ToolTipText.push('PercentageValue');
-            }
+    const onAutoCellTextAlignmentChecked = (checked) => {
+        if (!checked) {
+            handleCellTextAlignmentChange('Inherit');
+            return;
         }
-        else {
-            if (percentBarStyle.ToolTipText && percentBarStyle.ToolTipText.includes('CellValue')) {
-                percentBarStyle.ToolTipText = ['CellValue'];
-            }
-            else {
-                percentBarStyle.ToolTipText = [];
+        let nextFont = pb.Font ? { ...pb.Font } : undefined;
+        if (nextFont) {
+            delete nextFont.Alignment;
+            if (Object.keys(nextFont).length === 0) {
+                nextFont = undefined;
             }
         }
         props.onChange({
             ...data,
-            PercentBarStyle: percentBarStyle,
-        });
-    };
-    const onUsePercentStyleColorCheckChanged = (checked) => {
-        let percentBarStyle = data?.PercentBarStyle;
-        percentBarStyle.BackColor = checked ? getHexForName(GRAY) : null;
-        props.onChange({
-            ...data,
-            PercentBarStyle: percentBarStyle,
+            PercentBarStyle: {
+                ...pb,
+                CellTextAlignment: 'Auto',
+                Font: nextFont,
+            },
         });
     };
-    const onForeColorSelectChange = (color) => {
-        let percentBarStyle = data.PercentBarStyle;
-        percentBarStyle.BackColor = color;
-        props.onChange({
-            ...data,
-            PercentBarStyle: percentBarStyle,
-        });
+    const onUseBackColorChanged = (checked) => {
+        update({ BackColor: checked ? getGraySwatchColor() : null });
     };
-    const handleRangeValueTypeChange = React.useCallback((rangeValueType) => {
-        const ranges = rangeValueType === 'Number'
-            ? api.columnScopeApi.createCellColorRangesForScope(scope)
-            : [
-                {
-                    Min: 0,
-                    Max: 100,
-                    Color: getHexForName(GRAY),
-                },
-            ];
-        let newStyledColumn = data;
-        const commonStyle = {
-            CellRanges: ranges,
-            RangeValueType: rangeValueType,
-        };
-        if ('GradientStyle' in newStyledColumn) {
-            newStyledColumn = {
-                ...newStyledColumn,
-                GradientStyle: {
-                    ...newStyledColumn.GradientStyle,
-                    ...commonStyle,
-                },
-            };
-        }
-        else {
-            newStyledColumn = {
-                ...newStyledColumn,
-                PercentBarStyle: {
-                    ...newStyledColumn.PercentBarStyle,
-                    ...commonStyle,
-                },
-            };
-        }
-        props.onChange(newStyledColumn);
-    }, [data]);
-    const disabled = !data.ColumnId;
-    return (React.createElement(Box, null,
-        data?.GradientStyle && (React.createElement(RangesComponent, { disabled: !data.ColumnId, minMaxRangeValues: minMaxRangeValues, api: api, scope: scope, showRangeDirection: true, ranges: data.GradientStyle?.CellRanges, rangeValueType: data.GradientStyle?.RangeValueType, onRangeValueTypeChange: handleRangeValueTypeChange, columnComparison: data?.GradientStyle?.ColumnComparison, updateRanges: (ranges) => onUpdateGradientStyleRanges(ranges), updateColumnComparison: (columnComparison) => onUpdateGradientStyleColumnComparison(columnComparison) })),
-        data.PercentBarStyle && (React.createElement(React.Fragment, null,
-            React.createElement(RangesComponent, { disabled: disabled, minMaxRangeValues: minMaxRangeValues, api: api, scope: scope, showRangeDirection: false, ranges: data.PercentBarStyle?.CellRanges, rangeValueType: data.PercentBarStyle?.RangeValueType, onRangeValueTypeChange: handleRangeValueTypeChange, columnComparison: data?.PercentBarStyle?.ColumnComparison, updateRanges: (ranges) => onUpdatePercentBarStyleRanges(ranges), updateColumnComparison: (columnComparison) => onUpdatePercentBarStyleColumnComparison(columnComparison) }),
-            React.createElement(FormLayout, { className: "twa:mt-2 twa:ml-2" },
-                React.createElement(FormRow, { label: "Cell Display:" },
-                    React.createElement(CheckBox, { disabled: disabled, className: "twa:ml-2", checked: data.PercentBarStyle?.CellText?.includes('CellValue'), onChange: (checked) => onPercentBarCellTextCellValueChanged(checked) }, "Cell Value"),
-                    ' ',
-                    React.createElement(CheckBox, { disabled: disabled, className: "twa:ml-3", checked: data?.PercentBarStyle?.CellText?.includes('PercentageValue'), onChange: (checked) => onPercentBarCellTextPercentValueChanged(checked) },
-                        "Percent Value",
-                        ' '),
-                    ' '),
-                React.createElement(FormRow, { label: "Cell Display Position:" },
-                    React.createElement(DropdownButton, { disabled: ArrayExtensions.IsNullOrEmpty(data.PercentBarStyle.CellText) || disabled, columns: ['label'], items: [
-                            {
-                                label: 'Above Bar',
-                                onClick: () => handlePercentBarCellTextPositionChange('Above'),
-                            },
-                            {
-                                label: 'Below Bar',
-                                onClick: () => handlePercentBarCellTextPositionChange('Below'),
-                            },
-                            {
-                                label: 'Merged',
-                                onClick: () => handlePercentBarCellTextPositionChange('Merged'),
-                            },
-                        ] }, data.PercentBarStyle?.CellTextPosition ?? 'Below')),
-                React.createElement(FormRow, { label: "ToolTip Display:" },
-                    React.createElement(CheckBox, { disabled: disabled, className: "twa:ml-2", checked: data?.PercentBarStyle?.ToolTipText?.includes('CellValue'), onChange: (checked) => onPercentBarToolTipTextCellValueChanged(checked) }, "Cell Value"),
-                    ' ',
-                    React.createElement(CheckBox, { disabled: disabled, className: "twa:ml-3", checked: data?.PercentBarStyle?.ToolTipText?.includes('PercentageValue'), onChange: (checked) => onPercentBarToolTipTextPercentValueChanged(checked) },
-                        "Percent Value",
-                        ' '),
-                    ' '),
-                React.createElement(FormRow, { label: `Back ${api.internalApi.getCorrectEnglishVariant('Colour')}` },
-                    React.createElement(Flex, { alignItems: "center", className: "twa:ml-2" },
-                        React.createElement(CheckBox, { disabled: disabled, checked: !!data.PercentBarStyle?.BackColor, onChange: (checked) => onUsePercentStyleColorCheckChanged(checked), className: "twa:mr-2" }),
-                        data.PercentBarStyle?.BackColor !== undefined && (React.createElement(ColorPicker, { disabled: disabled, api: api, value: data.PercentBarStyle?.BackColor, onChange: (x) => onForeColorSelectChange(x) }))))))),
-        !data.ColumnId && (React.createElement(ErrorBox, { className: "twa:mt-2" }, "You need to select a column before styling."))));
+    const onBackColorChange = (color) => update({ BackColor: color });
+    const cellTextDisabled = ArrayExtensions.IsNullOrEmpty(pb.CellText) || disabled;
+    const currentAlignment = pb.CellTextAlignment ?? 'Inherit';
+    const currentOrigin = typeof pb.Origin === 'number'
+        ? 'Min' // numeric origin doesn't fit the radio set; treat as Min for selection state
+        : pb.Origin ?? 'Auto';
+    return (_jsxs(Box, { children: [_jsxs(Card, { shadow: false, className: "twa:mb-3", children: [_jsxs(Card.Title, { children: [_jsx(Box, { className: "twa:font-medium", children: "Bar Position" }), _jsx(Box, { className: "twa:text-xs twa:opacity-70 twa:font-normal twa:max-w-[520px]", children: "Set the position of the cell text relative to the bar" })] }), _jsx(Card.Body, { children: _jsx(RadioGroup, { orientation: "vertical", name: "ab-percentbar-origin", value: currentOrigin, onRadioChange: handleOriginChange, children: ORIGIN_CHOICES.map((choice) => (_jsx(Radio, { value: choice.value, disabled: disabled, children: _jsxs(Flex, { alignItems: "center", children: [_jsx(Box, { className: "twa:min-w-[60px]", children: choice.label }), _jsx(Box, { className: "twa:text-xs twa:opacity-70", children: choice.hint })] }) }, choice.value))) }) })] }), _jsxs(Card, { shadow: false, className: "twa:mb-3", children: [_jsxs(Card.Title, { children: [_jsx(Box, { className: "twa:font-medium", children: "Cell Text" }), _jsx(Box, { className: "twa:text-xs twa:opacity-70 twa:font-normal twa:max-w-[540px]", children: "Choose whether and how to display cell text (font properties take precedence over Format Column)" })] }), _jsxs(Card.Body, { children: [_jsxs(FormLayout, { sizes: [...STYLE_FORM_SIZES], children: [_jsxs(FormRow, { label: "Cell Display:", children: [_jsx(CheckBox, { disabled: disabled, checked: pb.CellText?.includes('CellValue'), onChange: (checked) => onCellTextChanged('CellValue', checked), children: "Cell Value" }), ' ', _jsx(CheckBox, { disabled: disabled, className: "twa:ml-3", checked: pb.CellText?.includes('PercentageValue'), onChange: (checked) => onCellTextChanged('PercentageValue', checked), children: "Percent Value" })] }), _jsx(FormRow, { label: "Cell Display Position:", children: _jsx(RadioGroup, { orientation: "horizontal", name: "ab-percentbar-cell-text-position", value: pb.CellTextPosition ?? 'Below', onRadioChange: handleCellTextPositionChange, className: "twa:gap-4", children: CELL_TEXT_POSITION_CHOICES.map((choice) => (_jsx(Radio, { value: choice.value, disabled: cellTextDisabled, children: choice.label }, choice.value))) }) }), _jsx(FormRow, { label: "Auto Text Alignment:", children: _jsxs(Flex, { alignItems: "center", className: "twa:gap-2", children: [_jsx(CheckBox, { disabled: cellTextDisabled, checked: pb.CellTextAlignment === 'Auto', onChange: onAutoCellTextAlignmentChecked }), _jsx(Box, { className: "twa:text-xs twa:opacity-70 twa:max-w-[420px]", children: "Follows bar (if Position is Auto or Zero); overrides fixed alignment below" })] }) }), _jsx(FormRow, { label: "Cell Text Alignment:", children: _jsx(Flex, { alignItems: "center", className: "twa:gap-2", children: _jsx(Box, { className: cellTextDisabled || pb.CellTextAlignment === 'Auto'
+                                                    ? 'twa:opacity-50 twa:pointer-events-none'
+                                                    : '', children: _jsx(Flex, { alignItems: "center", className: "twa:gap-2", children: _jsxs(ToggleGroup, { children: [_jsx(Toggle, { icon: "align-left", pressed: currentAlignment === 'Left', onPressedChange: (pressed) => handleCellTextAlignmentChange(pressed ? 'Left' : 'Inherit') }), _jsx(Toggle, { icon: "align-center", pressed: currentAlignment === 'Center', onPressedChange: (pressed) => handleCellTextAlignmentChange(pressed ? 'Center' : 'Inherit') }), _jsx(Toggle, { icon: "align-right", pressed: currentAlignment === 'Right', onPressedChange: (pressed) => handleCellTextAlignmentChange(pressed ? 'Right' : 'Inherit') })] }) }) }) }) })] }), _jsx(Box, { className: `twa:mt-3 twa:pt-3 twa:border-t twa:border-foreground/15 ${cellTextDisabled ? 'twa:opacity-50' : ''}`, children: _jsx(StyledColumnFontStyleEditor, { api: api, disabled: cellTextDisabled, hideAlignment: true, value: pb.Font, onChange: (next) => {
+                                        if (next) {
+                                            update({ Font: next });
+                                        }
+                                        else {
+                                            const cleaned = { ...pb };
+                                            delete cleaned.Font;
+                                            props.onChange({ ...data, PercentBarStyle: cleaned });
+                                        }
+                                    } }) })] })] }), _jsxs(Card, { shadow: false, className: "twa:mb-3", children: [_jsxs(Card.Title, { children: [_jsx(Box, { className: "twa:font-medium", children: "Cell Style" }), _jsx(Box, { className: "twa:text-xs twa:opacity-70 twa:font-normal twa:max-w-[520px]", children: "Configure Tooltip and Background Colour" })] }), _jsx(Card.Body, { children: _jsxs(FormLayout, { sizes: [...STYLE_FORM_SIZES], children: [_jsxs(FormRow, { label: "Tooltip Display:", children: [_jsx(CheckBox, { disabled: disabled, checked: pb.ToolTipText?.includes('CellValue'), onChange: (checked) => onToolTipTextChanged('CellValue', checked), children: "Cell Value" }), ' ', _jsx(CheckBox, { disabled: disabled, className: "twa:ml-3", checked: pb.ToolTipText?.includes('PercentageValue'), onChange: (checked) => onToolTipTextChanged('PercentageValue', checked), children: "Percent Value" })] }), _jsx(FormRow, { label: `Back ${api.internalApi.getCorrectEnglishVariant('Colour')}:`, children: _jsxs(Flex, { alignItems: "center", children: [_jsx(CheckBox, { disabled: disabled, checked: !!pb.BackColor, onChange: onUseBackColorChanged, className: "twa:mr-2" }), pb.BackColor != undefined && (_jsx(ColorPicker, { disabled: disabled, api: api, value: pb.BackColor, onChange: onBackColorChange }))] }) })] }) })] })] }));
 };