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

package/src/View/Layout/LayoutViewPanel.js

@@ -2,7 +2,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import * as React from 'react';
 import * as PopupRedux from '../../Redux/ActionsReducers/PopupRedux';
 import { connect } from 'react-redux';
-import isEqual from '../../Utilities/utils/isEqual';
+import { isEqual } from '../../Utilities/Extensions/ObjectExtensions';
 import join from '../../components/utils/join';
 import * as LayoutRedux from '../../Redux/ActionsReducers/LayoutRedux';
 import * as GeneralConstants from '../../Utilities/Constants/GeneralConstants';

package/src/View/Note/NoteEditor.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
-import throttle from '../../Utilities/utils/throttle';
+import { throttle } from '../../Utilities/Helpers/TimingHelper';
 import * as React from 'react';
 import Textarea from '../../components/Textarea';
 import SimpleButton from '../../components/SimpleButton';

package/src/View/Note/NotePopup.js

@@ -7,7 +7,7 @@ import { useAdaptable } from '../AdaptableContext';
 import { AdaptableButtonComponent } from '../Components/AdaptableButton';
 import { PopupPanel } from '../Components/Popups/AdaptablePopup/PopupPanel';
 import StringExtensions from '../../Utilities/Extensions/StringExtensions';
-import FormatHelper from '../../Utilities/Helpers/FormatHelper';
+import FormatHelper from '../../Utilities/Helpers/DisplayFormatHelper';
 import { ACCESS_LEVEL_READ_ONLY } from '../../Utilities/Constants/GeneralConstants';
 const tableDOMProps = {
     style: {

package/src/View/PlusMinus/Wizard/PlusMinusSettingsWizardSection.js

@@ -5,7 +5,7 @@ import { SummaryText, useOnePageAdaptableWizardContext, } from '../../Wizard/One
 import { Tag } from '../../../components/Tag';
 import { Box, Flex } from '../../../components/Flex';
 import { Card } from '../../../components/Card';
-import { plusMinusDecrementKeyFromOptionsOnly, plusMinusIncrementKeyFromOptionsOnly, plusMinusResolvedKeysConflict, plusMinusTriggerSameAsBaseline, resolvePlusMinusTriggerKeysForNudge, } from '../../../Utilities/Helpers/plusMinusTriggerKeys';
+import { plusMinusDecrementKeyFromOptionsOnly, plusMinusIncrementKeyFromOptionsOnly, plusMinusResolvedKeysConflict, plusMinusTriggerSameAsBaseline, resolvePlusMinusTriggerKeysForNudge, } from '../../../Utilities/Helpers/PlusMinusHelper';
 export const PlusMinusSettingsSummary = () => {
     const { data, api } = useOnePageAdaptableWizardContext();
     const { incrementKey, decrementKey } = resolvePlusMinusTriggerKeysForNudge(data, api.optionsApi.getEditOptions().plusMinusOptions ?? {});

package/src/View/QuickSearch/QuickSearchPopup.js

@@ -11,7 +11,7 @@ import StringExtensions from '../../Utilities/Extensions/StringExtensions';
 import { useQuickSearchDebounced } from './useQuickSearchDebounced';
 import { QuickSearchInput } from './QuickSearchInput';
 import { Card } from '../../components/Card';
-import { isQuickSearchStyleUnset, resolveQuickSearchCurrentTextMatchStyle, resolveQuickSearchTextMatchStyle, } from '../../Utilities/Helpers/QuickSearchStyleHelper';
+import { isQuickSearchStyleUnset, resolveQuickSearchCurrentTextMatchStyle, resolveQuickSearchTextMatchStyle, } from '../../Utilities/Helpers/QuickSearchHelper';
 const QuickSearchStyleEditor = ({ api, helpText, headerText, style, updateStyle }) => (_jsxs(Card, { shadow: false, children: [_jsxs(Card.Title, { children: [_jsx(Box, { className: "twa:font-medium", children: headerText }), _jsx(Box, { className: "twa:text-xs twa:opacity-70 twa:font-normal twa:max-w-[520px]", children: helpText })] }), _jsx(Card.Body, { className: "twa:p-1", children: _jsx(StyleComponent, { headless: true, hidePreview: true, className: "twa:h-full twa:flex-1 twa:rounded-none", api: api, Style: style, UpdateStyle: updateStyle }) })] }));
 const QuickSearchPopupComponent = (props) => {
     const [searchText, search] = useQuickSearchDebounced(props);

package/src/View/QuickSearch/useQuickSearchDebounced.js

@@ -1,5 +1,5 @@
 import { useEffect, useState, useMemo } from 'react';
-import debounce from '../../Utilities/utils/debounce';
+import { debounce } from '../../Utilities/Helpers/TimingHelper';
 import { QUICK_SEARCH_DEBOUNCE_TIME } from '../../Utilities/Constants/GeneralConstants';
 export const useQuickSearchDebounced = (props) => {
     const [searchText, setSearchText] = useState(props.QuickSearchText ?? '');

package/src/View/Schedule/Wizard/ScheduleScheduleWizard.js

@@ -9,7 +9,7 @@ import { Box } from '../../../components/Flex';
 import { Card } from '../../../components/Card';
 import { SingleSelect } from '../../../components/NewSelect';
 import ObjectFactory from '../../../Utilities/ObjectFactory';
-import { buildCronExpression, buildRunAtIso, inferPresetFromCron, isScheduleValid as validateSchedule, parseOneOffDateFromRunAt, parseTimeFromSchedule, } from '../../../Utilities/Helpers/ScheduleHelper';
+import { buildCronExpression, buildRunAtIso, inferPresetFromCron, isScheduleValid as validateSchedule, parseOneOffDateFromRunAt, parseTimeFromSchedule, } from '../../../Utilities/Helpers/Scheduling/ScheduleHelper';
 export const isScheduleValid = (holder) => {
     if (!holder?.Schedule) {
         return 'Schedule is not specified';

package/src/View/SpecialColumnSettingsWizardStep.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import chunk from '../Utilities/utils/chunk';
+import { chunk } from '../Utilities/Extensions/ArrayExtensions';
 import { CheckBox } from '../components/CheckBox';
 import FormLayout, { FormRow } from '../components/FormLayout';
 import { useAdaptable } from './AdaptableContext';

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

@@ -17,8 +17,8 @@ import { SingleSelect } from '../../../components/NewSelect';
 import { getCellFontStyleSummaryItems, StyledColumnFontStyleEditor, } from './StyledColumnSliceStyleEditors';
 import { Card } from '../../../components/Card';
 import { renderSummaryStringTags } from '../../Wizard/SummaryColorTag';
-import { formatBarChartCellTextLayoutSummary, getActiveBarChartCellTextTokens, hasBarChartCellTextConfigured, patchBarChartCellTextPlacement, resolveBarChartCellTextLayout, toggleBarChartCellTextToken, } from '../../../Utilities/Helpers/barChartCellText';
-import { BarChartCellTextLayoutEditor } from './StyledColumnWizardStyleSection/Components/BarChartCellTextLayoutEditor';
+import { formatBarStyleCellTextLayoutSummary, getActiveBarStyleCellTextTokens, hasBarStyleCellTextConfigured, patchBarStyleCellTextPlacement, resolveBarStyleCellTextLayout, toggleBarStyleCellTextToken, } from '../../../Utilities/Helpers/StyledColumns/BarStylesHelper';
+import { BarStyleCellTextLayoutEditor } from './StyledColumnWizardStyleSection/Components/BarStyleCellTextLayoutEditor';
 const BULLET_STYLE_FORM_SIZES = ['200px', '1fr'];
 const getTargetSummary = (target) => {
     if (target == undefined) {
@@ -51,12 +51,8 @@ const formatBulletOriginLabel = (origin) => {
     }
     return origin;
 };
-const formatBulletCellTextSummary = (cellText) => cellText
-    ?.map((t) => (t === 'CellValue' ? 'Cell Value' : 'Percent Value'))
-    .join(' + ') ?? '';
-const formatBulletToolTipSummary = (toolTipText) => toolTipText
-    ?.map((t) => (t === 'CellValue' ? 'Cell Value' : 'Percent Value'))
-    .join(' + ') ?? '';
+const formatBulletCellTextSummary = (cellText) => cellText?.map((t) => (t === 'CellValue' ? 'Cell Value' : 'Percent Value')).join(' + ') ?? '';
+const formatBulletToolTipSummary = (toolTipText) => toolTipText?.map((t) => (t === 'CellValue' ? 'Cell Value' : 'Percent Value')).join(' + ') ?? '';
 export const getStyledColumnBulletRangesViewValues = (data) => {
     const bullet = data.BulletChartStyle;
     if (!bullet) {
@@ -100,10 +96,10 @@ const buildStyledColumnBulletStyleSummaryStrings = (bullet, options) => {
     if (bullet.BackColor) {
         items.push(`Back Colour: ${bullet.BackColor}`);
     }
-    if (hasBarChartCellTextConfigured(bullet.CellTextProperties)) {
-        const tokens = getActiveBarChartCellTextTokens(bullet.CellTextProperties);
+    if (hasBarStyleCellTextConfigured(bullet.CellTextProperties)) {
+        const tokens = getActiveBarStyleCellTextTokens(bullet.CellTextProperties);
         items.push(`Cell Text: ${formatBulletCellTextSummary(tokens)}`);
-        const layoutSummary = formatBarChartCellTextLayoutSummary(resolveBarChartCellTextLayout(bullet.CellTextProperties));
+        const layoutSummary = formatBarStyleCellTextLayoutSummary(resolveBarStyleCellTextLayout(bullet.CellTextProperties));
         if (layoutSummary) {
             items.push(`Placement: ${layoutSummary}`);
         }
@@ -290,9 +286,7 @@ export const StyledColumnWizardBulletSection = (props) => {
         }
         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);
+            const candidate = api.columnApi.getNumericColumns().find((c) => c.columnId !== data.ColumnId);
             setTarget(candidate?.columnId ?? '');
             return;
         }
@@ -324,11 +318,11 @@ export const StyledColumnWizardBulletSection = (props) => {
     };
     // -- Cell text -------------------------------------------------------------
     const toggleCellText = (token, show) => {
-        update(toggleBarChartCellTextToken(bullet.CellTextProperties, token, show));
+        update(toggleBarStyleCellTextToken(bullet.CellTextProperties, token, show));
     };
     const onCellTextPlacementChange = (token, patch) => {
         update({
-            CellTextProperties: patchBarChartCellTextPlacement(bullet.CellTextProperties, token, patch),
+            CellTextProperties: patchBarStyleCellTextPlacement(bullet.CellTextProperties, token, patch),
         });
     };
     const toggleToolTipText = (token, checked) => {
@@ -358,7 +352,9 @@ export const StyledColumnWizardBulletSection = (props) => {
         : typeof primaryTarget?.Value === 'number'
             ? primaryTarget.Value
             : undefined;
-    const columnTargetValue = typeof primaryTarget === 'string' && primaryTarget !== 'Col-Avg' && primaryTarget !== 'Col-Median'
+    const columnTargetValue = typeof primaryTarget === 'string' &&
+        primaryTarget !== 'Col-Avg' &&
+        primaryTarget !== 'Col-Median'
         ? primaryTarget
         : typeof primaryTarget?.Value === 'string'
             ? primaryTarget.Value
@@ -370,7 +366,7 @@ export const StyledColumnWizardBulletSection = (props) => {
         Size: markerCfg?.Size ?? (markerCfg?.Shape === 'Line' ? 2 : 8),
     };
     const cellTextProperties = bullet.CellTextProperties;
-    const cellTextDisabled = !hasBarChartCellTextConfigured(cellTextProperties) || disabled;
+    const cellTextDisabled = !hasBarStyleCellTextConfigured(cellTextProperties) || disabled;
     return (_jsxs(Box, { children: [_jsxs(Card, { shadow: false, className: "twa:mb-3", children: [_jsxs(Card.Title, { children: [_jsx(Box, { className: "twa:font-medium", children: "Target" }), _jsx(Box, { className: "twa:text-xs twa:opacity-70 twa:font-normal twa:max-w-[520px]", children: "Select a target value for the bullet scale" })] }), _jsx(Card.Body, { children: _jsxs(FormLayout, { sizes: [...BULLET_STYLE_FORM_SIZES], children: [_jsx(FormRow, { label: "Target:", children: _jsx(Box, { className: "twa:max-w-[180px]", children: _jsx(SingleSelect, { className: "twa:w-full", value: currentMode, onValueChange: (v) => handleTargetModeChange(v), items: [
                                                 { value: 'None', label: 'None' },
                                                 { value: 'Number', label: 'Fixed Number' },
@@ -382,7 +378,7 @@ export const StyledColumnWizardBulletSection = (props) => {
                                                 { value: 'Vertical', label: 'Vertical' },
                                             ] }) }) }), bullet.Orientation === 'Vertical' && (_jsx(FormRow, { label: "", children: _jsxs(Box, { className: "twa:text-xs twa:text-neutral-500", children: ["Tip: vertical bullet charts need a tall row height to be readable (we recommend at least 60px). Set ", _jsx("code", { children: "rowHeight" }), " on ", _jsx("code", { children: " gridOptions " }), " or use", ' ', _jsx("code", { children: "getRowHeight" }), "."] }) })), _jsx(FormRow, { label: "Bar Colour:", children: _jsx(ColorPicker, { disabled: disabled, api: api, value: bullet.Bar?.Color, onChange: (c) => updateBar({ Color: c }) }) }), _jsx(FormRow, { label: bullet.Orientation === 'Vertical' ? 'Bar Width (px):' : 'Bar Height (px):', children: _jsx(Box, { className: "twa:max-w-[100px]", children: _jsx(AdaptableInput, { type: "number", min: 1, value: bullet.Bar?.Height ?? '', onChange: (e) => updateBar({
                                                 Height: e.target.value === '' ? undefined : Number(e.target.value),
-                                            }), placeholder: "8" }) }) }), _jsx(FormRow, { label: "Origin:", children: _jsx(Box, { className: "twa:max-w-[160px]", children: _jsx(SingleSelect, { className: "twa:w-full", value: typeof bullet.Origin === 'number' ? 'Number' : (bullet.Origin ?? 'Auto'), onValueChange: (v) => {
+                                            }), placeholder: "8" }) }) }), _jsx(FormRow, { label: "Origin:", children: _jsx(Box, { className: "twa:max-w-[160px]", children: _jsx(SingleSelect, { className: "twa:w-full", value: typeof bullet.Origin === 'number' ? 'Number' : bullet.Origin ?? 'Auto', onValueChange: (v) => {
                                                 if (v === 'Auto' || v === 'Zero') {
                                                     update({ Origin: v });
                                                 }
@@ -392,7 +388,7 @@ export const StyledColumnWizardBulletSection = (props) => {
                                             }, items: [
                                                 { value: 'Auto', label: 'Auto' },
                                                 { value: 'Zero', label: 'Zero' },
-                                            ] }) }) })] }) })] }), _jsxs(Card, { shadow: false, className: "twa:mb-3", children: [_jsxs(Card.Title, { children: [_jsx(Box, { className: "twa:font-medium", children: "Cell Text" }), _jsx(Box, { className: "twa:text-xs twa:opacity-70 twa:font-normal twa:max-w-[520px]", children: "Pick which values to display and where each one sits around the bar" })] }), _jsxs(Card.Body, { children: [_jsx(FormLayout, { sizes: [...BULLET_STYLE_FORM_SIZES], children: _jsx(FormRow, { label: "Cell Text Layout:", children: _jsx(BarChartCellTextLayoutEditor, { disabled: disabled, cellTextProperties: cellTextProperties, onToggle: toggleCellText, onPlacementChange: onCellTextPlacementChange }) }) }), _jsx(Box, { className: `twa:mt-3 twa:pt-3 twa:border-t twa:border-foreground/15 ${cellTextDisabled ? 'twa:opacity-50' : ''}`, children: _jsx(StyledColumnFontStyleEditor, { api: api, disabled: cellTextDisabled, value: bullet.Font, onChange: (next) => {
+                                            ] }) }) })] }) })] }), _jsxs(Card, { shadow: false, className: "twa:mb-3", children: [_jsxs(Card.Title, { children: [_jsx(Box, { className: "twa:font-medium", children: "Cell Text" }), _jsx(Box, { className: "twa:text-xs twa:opacity-70 twa:font-normal twa:max-w-[520px]", children: "Pick which values to display and where each one sits around the bar" })] }), _jsxs(Card.Body, { children: [_jsx(FormLayout, { sizes: [...BULLET_STYLE_FORM_SIZES], children: _jsx(BarStyleCellTextLayoutEditor, { disabled: disabled, cellTextProperties: cellTextProperties, onToggle: toggleCellText, onPlacementChange: onCellTextPlacementChange }) }), _jsx(Box, { className: `twa:mt-3 twa:pt-3 twa:border-t twa:border-foreground/15 ${cellTextDisabled ? 'twa:opacity-50' : ''}`, children: _jsx(StyledColumnFontStyleEditor, { api: api, disabled: cellTextDisabled, value: bullet.Font, onChange: (next) => {
                                         if (next) {
                                             update({ Font: next });
                                         }

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

@@ -7,7 +7,7 @@ import { Tag } from '../../../components/Tag';
 import { useOnePageAdaptableWizardContext } from '../../Wizard/OnePageAdaptableWizard';
 import { Box, Flex } from '../../../components/Flex';
 import { NumberInput } from '../../../components/Input/NumberInput';
-import { DEFAULT_GRADIENT_MAX_ALPHA, DEFAULT_GRADIENT_MIN_ALPHA, } from '../../../Utilities/Helpers/StyledColumnGradientHelper';
+import { DEFAULT_GRADIENT_MAX_ALPHA, DEFAULT_GRADIENT_MIN_ALPHA, } from '../../../Utilities/Helpers/StyledColumns/GradientStyleHelper';
 import { getCellFontStyleSummaryItems, StyledColumnFontStyleEditor, } from './StyledColumnSliceStyleEditors';
 import { Card } from '../../../components/Card';
 import { renderSummaryStringTags } from '../../Wizard/SummaryColorTag';

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

@@ -14,7 +14,7 @@ import { IconSelectorPanel } from '../../../components/IconSelector';
 import { useOnePageAdaptableWizardContext } from '../../Wizard/OnePageAdaptableWizard';
 import { useAdaptable } from '../../AdaptableContext';
 import { AdaptableIconComponent } from '../../Components/AdaptableIconComponent';
-import { ICON_STYLE_PRESET_DESCRIPTIONS, ICON_STYLE_PRESET_LABELS, getIconStylePresetMappings, } from '../../../Utilities/Helpers/IconStylePresets';
+import { ICON_STYLE_PRESET_DESCRIPTIONS, ICON_STYLE_PRESET_LABELS, getIconStylePresetMappings, } from '../../../Utilities/Helpers/StyledColumns/IconStyleHelper';
 import { resolveEffectiveIconStyleMappings, resolveIconStyleMappingsForSummaryPreview } from '../../../agGrid/cellRenderers/IconRenderer';
 import { Card } from '../../../components/Card';
 import { renderSummaryStringTags } from '../../Wizard/SummaryColorTag';

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

@@ -17,8 +17,8 @@ import { RangeBarRangesSummaryPreview } from './StyledColumnWizardStyleSection/C
 import { StyledColumnRangeBarPreviewCard } from './StyledColumnWizardStyleSection/Components/StyledColumnRangeBarPreview';
 import { Card } from '../../../components/Card';
 import { renderSummaryStringTags } from '../../Wizard/SummaryColorTag';
-import { formatBarChartCellTextLayoutSummary, getActiveBarChartCellTextTokens, hasBarChartCellTextConfigured, patchBarChartCellTextPlacement, resolveBarChartCellTextLayout, toggleBarChartCellTextToken, } from '../../../Utilities/Helpers/barChartCellText';
-import { BarChartCellTextLayoutEditor } from './StyledColumnWizardStyleSection/Components/BarChartCellTextLayoutEditor';
+import { formatBarStyleCellTextLayoutSummary, getActiveBarStyleCellTextTokens, hasBarStyleCellTextConfigured, patchBarStyleCellTextPlacement, resolveBarStyleCellTextLayout, toggleBarStyleCellTextToken, } from '../../../Utilities/Helpers/StyledColumns/BarStylesHelper';
+import { BarStyleCellTextLayoutEditor } from './StyledColumnWizardStyleSection/Components/BarStyleCellTextLayoutEditor';
 const RANGE_STYLE_FORM_SIZES = ['200px', '1fr'];
 const BOUND_MODE_LABELS = {
     Number: 'Fixed Number',
@@ -106,14 +106,10 @@ const RangeBarBoundInput = ({ api, value, optional, fallbackNumber, excludeColum
         'twa:[&_.ab-Input]:w-full twa:[&_.ab-Input]:rounded-l-none!',
         'twa:[&_[data-slot=input-group]]:w-full! twa:[&_[data-slot=input-group]]:rounded-l-none!',
     ].join(' ');
-    return (_jsxs(InputGroup, { Component: Flex, className: "twa:items-stretch twa:max-w-[22rem]", children: [_jsx(SingleSelect, { className: `twa:w-[150px] twa:max-w-none twa:shrink-0 twa:box-border${hasEditor ? ' twa:rounded-r-none!' : ''}`, disabled: disabled, value: mode, items: items, onValueChange: (v) => handleModeChange(v) }), hasEditor && _jsx(Box, { className: editorWrapperClassName, children: editor })] }));
+    return (_jsxs(InputGroup, { Component: Flex, className: "twa:items-stretch twa:max-w-[22rem]", children: [_jsx(SingleSelect, { className: `twa:w-[150px] twa:max-w-none twa:shrink-0 twa:box-border${hasEditor ? 'twa:rounded-r-none!' : ''}`, disabled: disabled, value: mode, items: items, onValueChange: (v) => handleModeChange(v) }), hasEditor && _jsx(Box, { className: editorWrapperClassName, children: editor })] }));
 };
-const formatRangeBarCellTextSummary = (cellText) => cellText
-    ?.map((t) => (t === 'CellValue' ? 'Cell Value' : 'Percent Value'))
-    .join(' + ') ?? '';
-const formatRangeBarToolTipSummary = (toolTipText) => toolTipText
-    ?.map((t) => (t === 'CellValue' ? 'Cell Value' : 'Percent Value'))
-    .join(' + ') ?? '';
+const formatRangeBarCellTextSummary = (cellText) => cellText?.map((t) => (t === 'CellValue' ? 'Cell Value' : 'Percent Value')).join(' + ') ?? '';
+const formatRangeBarToolTipSummary = (toolTipText) => toolTipText?.map((t) => (t === 'CellValue' ? 'Cell Value' : 'Percent Value')).join(' + ') ?? '';
 export const getStyledColumnRangeBarRangeViewValues = (data) => {
     const range = data.RangeBarStyle;
     if (!range) {
@@ -177,10 +173,10 @@ const buildStyledColumnRangeBarDisplaySummaryStrings = (range, options) => {
     if (range.BackColor) {
         items.push(`Back Colour: ${range.BackColor}`);
     }
-    if (hasBarChartCellTextConfigured(range.CellTextProperties)) {
-        const tokens = getActiveBarChartCellTextTokens(range.CellTextProperties);
+    if (hasBarStyleCellTextConfigured(range.CellTextProperties)) {
+        const tokens = getActiveBarStyleCellTextTokens(range.CellTextProperties);
         items.push(`Cell Text: ${formatRangeBarCellTextSummary(tokens)}`);
-        const layoutSummary = formatBarChartCellTextLayoutSummary(resolveBarChartCellTextLayout(range.CellTextProperties));
+        const layoutSummary = formatBarStyleCellTextLayoutSummary(resolveBarStyleCellTextLayout(range.CellTextProperties));
         if (layoutSummary) {
             items.push(`Placement: ${layoutSummary}`);
         }
@@ -370,7 +366,9 @@ export const StyledColumnWizardRangeBarSection = (props) => {
     const resolvedBoundValues = {
         'Col-Min': minMaxRangeValues?.min,
         'Col-Max': minMaxRangeValues?.max,
-        'Col-Avg': column ? api.styledColumnApi.internalApi.getAvgValueForNumericColumn(column) : undefined,
+        'Col-Avg': column
+            ? api.styledColumnApi.internalApi.getAvgValueForNumericColumn(column)
+            : undefined,
         'Col-Median': column
             ? api.styledColumnApi.internalApi.getMedianValueForNumericColumn(column)
             : undefined,
@@ -437,11 +435,11 @@ export const StyledColumnWizardRangeBarSection = (props) => {
     };
     // -- Cell text -------------------------------------------------------------
     const toggleCellText = (token, show) => {
-        update(toggleBarChartCellTextToken(range.CellTextProperties, token, show));
+        update(toggleBarStyleCellTextToken(range.CellTextProperties, token, show));
     };
     const onCellTextPlacementChange = (token, patch) => {
         update({
-            CellTextProperties: patchBarChartCellTextPlacement(range.CellTextProperties, token, patch),
+            CellTextProperties: patchBarStyleCellTextPlacement(range.CellTextProperties, token, patch),
         });
     };
     const toggleToolTipText = (token, checked) => {
@@ -490,5 +488,5 @@ export const StyledColumnWizardRangeBarSection = (props) => {
                                                         { value: 'Clamp', label: 'Clamp to edge' },
                                                         { value: 'Overflow', label: 'Show outside' },
                                                         { value: 'Hide', label: 'Hide marker' },
-                                                    ] }) }) }), outOfRangeMode === 'Clamp' && (_jsx(FormRow, { label: `Out-of-range ${api.internalApi.getCorrectEnglishVariant('Colour')}:`, children: _jsx(OptionalColorPicker, { disabled: disabled, api: api, value: range.OutOfRange?.Color, defaultColor: "crimson", onChange: (c) => updateOutOfRangeProperties({ Color: c }) }) }))] }) })] }), _jsxs(Card, { shadow: false, children: [_jsxs(Card.Title, { children: [_jsx(Box, { className: "twa:font-medium", children: "Text & Tooltip" }), _jsx(Box, { className: "twa:text-xs twa:opacity-70 twa:font-normal twa:max-w-[520px]", children: "Optional cell-text overlay and AG Grid tooltip content." })] }), _jsx(Card.Body, { children: _jsxs(FormLayout, { sizes: [...RANGE_STYLE_FORM_SIZES], children: [_jsx(FormRow, { label: "Cell Text Layout:", children: _jsx(BarChartCellTextLayoutEditor, { disabled: disabled, cellTextProperties: range.CellTextProperties, onToggle: toggleCellText, onPlacementChange: onCellTextPlacementChange }) }), _jsxs(FormRow, { label: "Tooltip Display:", children: [_jsx(CheckBox, { disabled: disabled, checked: range.ToolTipText?.includes('CellValue'), onChange: (checked) => toggleToolTipText('CellValue', checked), children: "Cell Value" }), ' ', _jsx(CheckBox, { disabled: disabled, className: "twa:ml-3", checked: range.ToolTipText?.includes('PercentageValue'), onChange: (checked) => toggleToolTipText('PercentageValue', checked), children: "Percent Value" })] })] }) })] }), _jsx(StyledColumnRangeBarPreviewCard, { data: data })] }))] }));
+                                                    ] }) }) }), outOfRangeMode === 'Clamp' && (_jsx(FormRow, { label: `Out-of-range ${api.internalApi.getCorrectEnglishVariant('Colour')}:`, children: _jsx(OptionalColorPicker, { disabled: disabled, api: api, value: range.OutOfRange?.Color, defaultColor: "crimson", onChange: (c) => updateOutOfRangeProperties({ Color: c }) }) }))] }) })] }), _jsxs(Card, { shadow: false, children: [_jsxs(Card.Title, { children: [_jsx(Box, { className: "twa:font-medium", children: "Text & Tooltip" }), _jsx(Box, { className: "twa:text-xs twa:opacity-70 twa:font-normal twa:max-w-[520px]", children: "Optional cell-text overlay and AG Grid tooltip content." })] }), _jsx(Card.Body, { children: _jsxs(FormLayout, { sizes: [...RANGE_STYLE_FORM_SIZES], children: [_jsx(BarStyleCellTextLayoutEditor, { disabled: disabled, cellTextProperties: range.CellTextProperties, onToggle: toggleCellText, onPlacementChange: onCellTextPlacementChange }), _jsxs(FormRow, { label: "Tooltip Display:", children: [_jsx(CheckBox, { disabled: disabled, checked: range.ToolTipText?.includes('CellValue'), onChange: (checked) => toggleToolTipText('CellValue', checked), children: "Cell Value" }), ' ', _jsx(CheckBox, { disabled: disabled, className: "twa:ml-3", checked: range.ToolTipText?.includes('PercentageValue'), onChange: (checked) => toggleToolTipText('PercentageValue', checked), children: "Percent Value" })] })] }) })] }), _jsx(StyledColumnRangeBarPreviewCard, { data: data })] }))] }));
 };

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

@@ -6,8 +6,8 @@ import { useOnePageAdaptableWizardContext } from '../../Wizard/OnePageAdaptableW
 import { Box, Flex } from '../../../components/Flex';
 import { CheckBox } from '../../../components/CheckBox';
 import { cn } from '../../../lib/utils';
-import { getStyledColumnRowKindDisabledReason, isStyledColumnRowKindSupported, sanitizeStyledColumnRowScope, STYLED_COLUMN_ROW_KIND_EXCLUDE_KEY, STYLED_COLUMN_ROW_KINDS, } from '../../../Utilities/Helpers/styledColumnRowKindSupport';
-import { isUnsupportedColumnDataTypeForIconStyle } from '../../../Utilities/Helpers/iconStyledColumnColumnSupport';
+import { getStyledColumnRowKindDisabledReason, isStyledColumnRowKindSupported, sanitizeStyledColumnRowScope, STYLED_COLUMN_ROW_KIND_EXCLUDE_KEY, STYLED_COLUMN_ROW_KINDS, } from '../../../Utilities/Helpers/StyledColumns/StyledColumnHelper';
+import { isUnsupportedColumnDataTypeForIconStyle } from '../../../Utilities/Helpers/StyledColumns/IconStyleHelper';
 import { CollapsibleWizardCard, CollapsibleWizardValueSummary, getWizardAccordionSectionClassName, renderCompactColumnTags, useWizardCardAccordion, } from '../../Wizard/CollapsibleWizardCard';
 // ---------------------------------------------------------------------------
 // Row-kind helpers

package/src/View/StyledColumn/Wizard/StyledColumnWizardStyleSection/Components/{BarChartCellTextLayoutEditor.d.ts → BarStyleCellTextLayoutEditor.d.ts}

@@ -1,9 +1,9 @@
 import * as React from 'react';
-import { BarChartCellTextPlacement, BarChartCellTextProperties } from '../../../../../AdaptableState/StyledColumns/Common/BarChartCellText';
+import { BarStyleCellTextPlacement, BarStyleCellTextProperties } from '../../../../../AdaptableState/StyledColumns/Common/BarStyleProperties';
 import { CellTextOption } from '../../../../../AdaptableState/StyledColumns/Common/CellTextOptions';
-export declare const BarChartCellTextLayoutEditor: React.FunctionComponent<{
+export declare const BarStyleCellTextLayoutEditor: React.FunctionComponent<{
     disabled?: boolean;
-    cellTextProperties?: BarChartCellTextProperties;
+    cellTextProperties?: BarStyleCellTextProperties;
     onToggle: (token: CellTextOption, show: boolean) => void;
-    onPlacementChange: (token: CellTextOption, patch: Partial<BarChartCellTextPlacement>) => void;
+    onPlacementChange: (token: CellTextOption, patch: Partial<BarStyleCellTextPlacement>) => void;
 }>;

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

@@ -0,0 +1,33 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { resolveBarStyleCellTextLayout } from '../../../../../Utilities/Helpers/StyledColumns/BarStylesHelper';
+import { CheckBox } from '../../../../../components/CheckBox';
+import { Box, Flex } from '../../../../../components/Flex';
+import { FormRow } from '../../../../../components/FormLayout';
+import { SingleSelect } from '../../../../../components/NewSelect';
+const HORIZONTAL_CHOICES = [
+    { value: 'Left', label: 'Left' },
+    { value: 'Center', label: 'Center' },
+    { value: 'Right', label: 'Right' },
+];
+const VERTICAL_CHOICES = [
+    { value: 'Above', label: 'Above Bar' },
+    { value: 'Below', label: 'Below Bar' },
+    { value: 'Merged', label: 'Merged' },
+];
+const ROWS = [
+    { token: 'CellValue', label: 'Cell Value:', key: 'CellValue' },
+    { token: 'PercentageValue', label: 'Percent Value:', key: 'PercentValue' },
+];
+export const BarStyleCellTextLayoutEditor = ({ disabled, cellTextProperties, onToggle, onPlacementChange }) => {
+    const layout = resolveBarStyleCellTextLayout(cellTextProperties);
+    return (_jsx(_Fragment, { children: ROWS.map(({ token, label, key }) => {
+            const placement = layout[key];
+            const isShown = Boolean(placement);
+            const rowDisabled = disabled || !isShown;
+            return (_jsx(FormRow, { label: label, children: _jsxs(Flex, { alignItems: "center", className: "twa:gap-3", children: [_jsx(CheckBox, { disabled: disabled, checked: isShown, onChange: (checked) => onToggle(token, checked) }), _jsx(Box, { className: "twa:w-[140px]", children: _jsx(SingleSelect, { className: "twa:w-full", disabled: rowDisabled, value: placement?.Horizontal ?? 'Left', onValueChange: (v) => onPlacementChange(token, {
+                                    Horizontal: v,
+                                }), items: HORIZONTAL_CHOICES }) }), _jsx(Box, { className: "twa:w-[140px]", children: _jsx(SingleSelect, { className: "twa:w-full", disabled: rowDisabled, value: placement?.Vertical ?? 'Below', onValueChange: (v) => onPlacementChange(token, {
+                                    Vertical: v,
+                                }), items: VERTICAL_CHOICES }) })] }) }, token));
+        }) }));
+};

package/src/View/StyledColumn/Wizard/StyledColumnWizardStyleSection/Components/{BarChartCellTextPreview.d.ts → BarStyleCellTextPreview.d.ts}

@@ -1,6 +1,6 @@
 import * as React from 'react';
-import { BarChartCellTextProperties } from '../../../../../AdaptableState/StyledColumns/Common/BarChartCellText';
-import { BarChartCellTextLabels } from '../../../../../Utilities/Helpers/barChartCellText';
+import { BarStyleCellTextProperties } from '../../../../../AdaptableState/StyledColumns/Common/BarStyleProperties';
+import { BarStyleCellTextLabels } from '../../../../../Utilities/Helpers/StyledColumns/BarStylesHelper';
 /**
  * Preview of the per-value cell-text layout. Renders three potential bands:
  * - `Above` slots (above the bar)
@@ -11,13 +11,13 @@ import { BarChartCellTextLabels } from '../../../../../Utilities/Helpers/barChar
  * stable. When `vertical` is provided, only the band matching that value is
  * rendered (used by the preview cards to position bands around the bar).
  */
-export declare const BarChartCellTextPreview: React.FunctionComponent<{
+export declare const BarStyleCellTextPreview: React.FunctionComponent<{
     className?: string;
     style?: React.CSSProperties;
-    cellTextProperties?: BarChartCellTextProperties;
-    labels: BarChartCellTextLabels;
+    cellTextProperties?: BarStyleCellTextProperties;
+    labels: BarStyleCellTextLabels;
     mergedOverlayClassName?: string;
     /** Render only the band matching this vertical position. */
     vertical?: 'Above' | 'Below' | 'Merged';
 }>;
-export declare const shouldShowBarChartCellTextOutsideBar: (cellTextProperties: BarChartCellTextProperties | undefined, hasCellText: boolean) => boolean;
+export declare const shouldShowBarStyleCellTextOutsideBar: (cellTextProperties: BarStyleCellTextProperties | undefined, hasCellText: boolean) => boolean;

package/src/View/StyledColumn/Wizard/StyledColumnWizardStyleSection/Components/{BarChartCellTextPreview.js → BarStyleCellTextPreview.js}

@@ -1,5 +1,5 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { getBarChartCellTextSlotPresence, hasBarChartCellTextConfigured, resolveBarChartCellTextSlots, } from '../../../../../Utilities/Helpers/barChartCellText';
+import { getBarStyleCellTextSlotPresence, hasBarStyleCellTextConfigured, resolveBarStyleCellTextSlots, } from '../../../../../Utilities/Helpers/StyledColumns/BarStylesHelper';
 import { Box, Flex } from '../../../../../components/Flex';
 const HORIZONTAL_ORDER = ['Left', 'Center', 'Right'];
 const HORIZONTAL_JUSTIFY = {
@@ -33,11 +33,11 @@ const CellTextRow = ({ className, style, slots }) => (_jsx(Flex, { className: cl
  * stable. When `vertical` is provided, only the band matching that value is
  * rendered (used by the preview cards to position bands around the bar).
  */
-export const BarChartCellTextPreview = ({ className, style, cellTextProperties, labels, mergedOverlayClassName, vertical }) => {
+export const BarStyleCellTextPreview = ({ className, style, cellTextProperties, labels, mergedOverlayClassName, vertical }) => {
     if (!labels.cellValue && !labels.percentage) {
         return null;
     }
-    const slots = resolveBarChartCellTextSlots(cellTextProperties, labels);
+    const slots = resolveBarStyleCellTextSlots(cellTextProperties, labels);
     if (!slots.length) {
         return null;
     }
@@ -48,10 +48,10 @@ export const BarChartCellTextPreview = ({ className, style, cellTextProperties,
     const usedClassName = vertical === 'Merged' ? mergedOverlayClassName ?? className : className;
     return (_jsx(CellTextRow, { className: usedClassName, style: style, slots: bandSlots.map((s) => ({ horizontal: s.horizontal, text: s.text })) }));
 };
-export const shouldShowBarChartCellTextOutsideBar = (cellTextProperties, hasCellText) => {
-    if (!hasCellText || !hasBarChartCellTextConfigured(cellTextProperties)) {
+export const shouldShowBarStyleCellTextOutsideBar = (cellTextProperties, hasCellText) => {
+    if (!hasCellText || !hasBarStyleCellTextConfigured(cellTextProperties)) {
         return false;
     }
-    const { hasAbove, hasBelow } = getBarChartCellTextSlotPresence(cellTextProperties);
+    const { hasAbove, hasBelow } = getBarStyleCellTextSlotPresence(cellTextProperties);
     return hasAbove || hasBelow;
 };

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

@@ -1,11 +1,11 @@
 import * as React from 'react';
 import { CellColorRange, ColumnComparison, NumericStyledColumn } from '../../../../../AdaptableState/StyledColumns/Common/NumericStyledColumn';
-import { GradientStyle, GradientZeroCentredColors } from '../../../../../AdaptableState/StyledColumns/GradientStyle';
+import { GradientStyle, ZeroCentredColors } from '../../../../../AdaptableState/StyledColumns/GradientStyle';
 import { AdaptableApi } from '../../../../../types';
 export declare function gradientRangeStripCss(color: string, reverseGradient: boolean, minAlpha: number, maxAlpha: number): string;
 export interface GradientRangesSummaryPreviewProps {
     ranges?: CellColorRange[];
-    zeroCentred?: GradientZeroCentredColors;
+    zeroCentred?: ZeroCentredColors;
     rangeValueType: NumericStyledColumn['RangeValueType'];
     gradientStyle?: Pick<GradientStyle, 'MinAlpha' | 'MaxAlpha'>;
 }

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

@@ -3,7 +3,7 @@ import tinycolor from 'tinycolor2';
 import { Box, Flex } from '../../../../../components/Flex';
 import { Tag } from '../../../../../components/Tag';
 import { getVariableColor } from '../../../../../Utilities/Helpers/StyleHelper';
-import { DEFAULT_GRADIENT_MAX_ALPHA, DEFAULT_GRADIENT_MIN_ALPHA, isDivergingZeroCellRanges, } from '../../../../../Utilities/Helpers/StyledColumnGradientHelper';
+import { DEFAULT_GRADIENT_MAX_ALPHA, DEFAULT_GRADIENT_MIN_ALPHA, isDivergingZeroCellRanges, } from '../../../../../Utilities/Helpers/StyledColumns/GradientStyleHelper';
 function clamp01(n) {
     if (Number.isNaN(n)) {
         return 0;
@@ -56,9 +56,7 @@ export const GradientRangesSummaryPreview = (props) => {
 export const GradientColumnComparisonSummaryPreview = (props) => {
     const minA = props.gradientStyle?.MinAlpha ?? DEFAULT_GRADIENT_MIN_ALPHA;
     const maxA = props.gradientStyle?.MaxAlpha ?? DEFAULT_GRADIENT_MAX_ALPHA;
-    const fmt = (v) => isNaN(Number(v))
-        ? `[${props.api.columnApi.getFriendlyNameForColumnId(String(v))}]`
-        : v;
+    const fmt = (v) => isNaN(Number(v)) ? `[${props.api.columnApi.getFriendlyNameForColumnId(String(v))}]` : v;
     return (_jsxs(Flex, { flexDirection: "column", className: "twa:gap-2", children: [_jsxs(Tag, { children: ["Min: ", fmt(props.columnComparison.MinValue), " \u2014 Max: ", fmt(props.columnComparison.MaxValue)] }), _jsx(Box, { className: `${stripClassName} twa:w-[200px]`, style: {
                     background: gradientRangeStripCss(props.columnComparison.Color, false, minA, maxA),
                 } })] }));

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

@@ -1,11 +1,11 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { convertAdaptableStyleToCSS } from '../../../../../Utilities/Helpers/StyleHelper';
-import { buildBarChartCellTextLabels, getBarChartCellTextSlotPresence, hasBarChartCellTextConfigured, } from '../../../../../Utilities/Helpers/barChartCellText';
+import { buildBarStyleCellTextLabels, getBarStyleCellTextSlotPresence, hasBarStyleCellTextConfigured, } from '../../../../../Utilities/Helpers/StyledColumns/BarStylesHelper';
 import { Box, Flex } from '../../../../../components/Flex';
 import { Card } from '../../../../../components/Card';
 import { Tag } from '../../../../../components/Tag';
 import { StyledColumnBulletChartListPreview } from './StyledColumnChartListPreviews';
-import { BarChartCellTextPreview } from './BarChartCellTextPreview';
+import { BarStyleCellTextPreview } from './BarStyleCellTextPreview';
 const PREVIEW_CELL_CLASS = 'ab-BulletPreviewCell twa:inline-flex twa:items-center twa:min-w-[180px] twa:min-h-[36px] twa:px-2 twa:py-1 twa:rounded-standard twa:border twa:border-[color-mix(in_srgb,var(--ab-color-foreground)_15%,transparent)]';
 const getBulletPreviewSample = (bullet) => {
     const ranges = bullet.CellRanges ?? [];
@@ -28,10 +28,10 @@ const getBulletPreviewSample = (bullet) => {
 const BulletChartPreviewContent = ({ bullet, }) => {
     const { sampleValue, valueFraction } = getBulletPreviewSample(bullet);
     const cellTextProperties = bullet.CellTextProperties;
-    const labels = buildBarChartCellTextLabels(cellTextProperties, Number.isInteger(sampleValue) ? String(sampleValue) : sampleValue.toFixed(1), `${(valueFraction * 100).toFixed(0)}%`);
-    const hasCellText = hasBarChartCellTextConfigured(cellTextProperties) &&
+    const labels = buildBarStyleCellTextLabels(cellTextProperties, Number.isInteger(sampleValue) ? String(sampleValue) : sampleValue.toFixed(1), `${(valueFraction * 100).toFixed(0)}%`);
+    const hasCellText = hasBarStyleCellTextConfigured(cellTextProperties) &&
         Boolean(labels.cellValue || labels.percentage);
-    const presence = getBarChartCellTextSlotPresence(cellTextProperties);
+    const presence = getBarStyleCellTextSlotPresence(cellTextProperties);
     const fontStyle = bullet.Font ? convertAdaptableStyleToCSS(bullet.Font) : undefined;
     const isVertical = bullet.Orientation === 'Vertical';
     const cellTextClassName = 'ab-BulletChart__text twa:text-2 twa:leading-tight twa:truncate twa:max-w-full';
@@ -39,9 +39,9 @@ const BulletChartPreviewContent = ({ bullet, }) => {
     // Merged-only with no outside bands → relative container so the overlay sits
     // on top of the chart, matching the runtime renderer's behaviour.
     if (hasCellText && presence.hasMerged && !presence.hasAbove && !presence.hasBelow) {
-        return (_jsxs(Box, { className: "ab-BulletChart__wrapper twa:relative twa:inline-flex", children: [chartEl, _jsx(BarChartCellTextPreview, { mergedOverlayClassName: "ab-BulletChart__text twa:absolute twa:inset-x-0 twa:top-1/2 twa:-translate-y-1/2 twa:px-1 twa:text-2 twa:truncate twa:pointer-events-none", style: fontStyle, cellTextProperties: cellTextProperties, labels: labels, vertical: "Merged" })] }));
+        return (_jsxs(Box, { className: "ab-BulletChart__wrapper twa:relative twa:inline-flex", children: [chartEl, _jsx(BarStyleCellTextPreview, { mergedOverlayClassName: "ab-BulletChart__text twa:absolute twa:inset-x-0 twa:top-1/2 twa:-translate-y-1/2 twa:px-1 twa:text-2 twa:truncate twa:pointer-events-none", style: fontStyle, cellTextProperties: cellTextProperties, labels: labels, vertical: "Merged" })] }));
     }
-    return (_jsxs(Flex, { className: "ab-BulletChart__wrapper twa:relative", flexDirection: "column", alignItems: isVertical ? 'center' : 'stretch', style: { justifyContent: 'center', gap: hasCellText ? 2 : 0 }, children: [hasCellText && presence.hasAbove && (_jsx(BarChartCellTextPreview, { className: cellTextClassName, style: fontStyle, cellTextProperties: cellTextProperties, labels: labels, vertical: "Above" })), _jsxs(Box, { className: "twa:relative twa:w-full", style: { display: 'inline-flex' }, children: [chartEl, hasCellText && presence.hasMerged && (_jsx(BarChartCellTextPreview, { mergedOverlayClassName: "ab-BulletChart__text twa:absolute twa:inset-x-0 twa:top-1/2 twa:-translate-y-1/2 twa:px-1 twa:text-2 twa:truncate twa:pointer-events-none", style: fontStyle, cellTextProperties: cellTextProperties, labels: labels, vertical: "Merged" }))] }), hasCellText && presence.hasBelow && (_jsx(BarChartCellTextPreview, { className: cellTextClassName, style: fontStyle, cellTextProperties: cellTextProperties, labels: labels, vertical: "Below" }))] }));
+    return (_jsxs(Flex, { className: "ab-BulletChart__wrapper twa:relative", flexDirection: "column", alignItems: isVertical ? 'center' : 'stretch', style: { justifyContent: 'center', gap: hasCellText ? 2 : 0 }, children: [hasCellText && presence.hasAbove && (_jsx(BarStyleCellTextPreview, { className: cellTextClassName, style: fontStyle, cellTextProperties: cellTextProperties, labels: labels, vertical: "Above" })), _jsxs(Box, { className: "twa:relative twa:w-full", style: { display: 'inline-flex' }, children: [chartEl, hasCellText && presence.hasMerged && (_jsx(BarStyleCellTextPreview, { mergedOverlayClassName: "ab-BulletChart__text twa:absolute twa:inset-x-0 twa:top-1/2 twa:-translate-y-1/2 twa:px-1 twa:text-2 twa:truncate twa:pointer-events-none", style: fontStyle, cellTextProperties: cellTextProperties, labels: labels, vertical: "Merged" }))] }), hasCellText && presence.hasBelow && (_jsx(BarStyleCellTextPreview, { className: cellTextClassName, style: fontStyle, cellTextProperties: cellTextProperties, labels: labels, vertical: "Below" }))] }));
 };
 export const StyledColumnBulletPreview = ({ data }) => {
     const bullet = data.BulletChartStyle;

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

@@ -3,7 +3,7 @@ import { Box, Flex } from '../../../../../components/Flex';
 import { Card } from '../../../../../components/Card';
 import { Tag } from '../../../../../components/Tag';
 import { useAdaptable } from '../../../../AdaptableContext';
-import { getGradientPreviewCellStyle, getGradientPreviewSampleValues, hasGradientRangesConfigured, } from '../../../../../Utilities/Helpers/StyledColumnGradientHelper';
+import { getGradientPreviewCellStyle, getGradientPreviewSampleValues, hasGradientRangesConfigured, } from '../../../../../Utilities/Helpers/StyledColumns/GradientStyleHelper';
 const formatPreviewValue = (value) => {
     if (Number.isInteger(value)) {
         return value.toLocaleString();

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

@@ -1,11 +1,11 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { convertAdaptableStyleToCSS } from '../../../../../Utilities/Helpers/StyleHelper';
-import { getPercentBarPreviewGeometry, getPercentBarPreviewResolvedBarColor, getPercentBarPreviewSampleValues, getPercentBarPreviewScale, getPercentBarPreviewTrackColor, hasPercentBarRangesConfigured, } from '../../../../../Utilities/Helpers/percentBarPreviewHelper';
-import { buildBarChartCellTextLabels, getBarChartCellTextSlotPresence, hasBarChartCellTextConfigured, } from '../../../../../Utilities/Helpers/barChartCellText';
+import { getPercentBarPreviewGeometry, getPercentBarPreviewResolvedBarColor, getPercentBarPreviewSampleValues, getPercentBarPreviewScale, getPercentBarPreviewTrackColor, hasPercentBarRangesConfigured, } from '../../../../../Utilities/Helpers/StyledColumns/PercentBarStyleHelper';
+import { buildBarStyleCellTextLabels, getBarStyleCellTextSlotPresence, hasBarStyleCellTextConfigured, } from '../../../../../Utilities/Helpers/StyledColumns/BarStylesHelper';
 import { Box, Flex } from '../../../../../components/Flex';
 import { Card } from '../../../../../components/Card';
 import { Tag } from '../../../../../components/Tag';
-import { BarChartCellTextPreview, shouldShowBarChartCellTextOutsideBar, } from './BarChartCellTextPreview';
+import { BarStyleCellTextPreview, shouldShowBarStyleCellTextOutsideBar, } from './BarStyleCellTextPreview';
 const PREVIEW_CELL_CLASS = 'ab-PercentBarPreviewCell twa:w-[72px] twa:min-h-[32px] twa:px-1 twa:py-1 twa:rounded-standard twa:border twa:border-[color-mix(in_srgb,var(--ab-color-foreground)_15%,transparent)]';
 const PercentBarPreviewCell = ({ styledColumn, value, min, max }) => {
     const pb = styledColumn.PercentBarStyle;
@@ -13,21 +13,23 @@ const PercentBarPreviewCell = ({ styledColumn, value, min, max }) => {
     const trackColor = getPercentBarPreviewTrackColor(pb);
     const fillColor = getPercentBarPreviewResolvedBarColor(barColor);
     const cellTextProperties = pb.CellTextProperties;
-    const labels = buildBarChartCellTextLabels(cellTextProperties, Number.isInteger(value) ? String(value) : value.toFixed(1), `${percentageValue.toFixed(0)}%`);
-    const hasCellText = hasBarChartCellTextConfigured(cellTextProperties) &&
+    const labels = buildBarStyleCellTextLabels(cellTextProperties, Number.isInteger(value) ? String(value) : value.toFixed(1), `${percentageValue.toFixed(0)}%`);
+    const hasCellText = hasBarStyleCellTextConfigured(cellTextProperties) &&
         Boolean(labels.cellValue || labels.percentage);
-    const presence = getBarChartCellTextSlotPresence(cellTextProperties);
+    const presence = getBarStyleCellTextSlotPresence(cellTextProperties);
     const fontStyle = pb.Font ? convertAdaptableStyleToCSS(pb.Font) : undefined;
     const cellTextClassName = 'ab-PercentBar__text twa:text-2 twa:leading-tight twa:truncate';
     const barEl = (_jsxs(Box, { className: "ab-PercentBar__bar twa:relative twa:flex-1 twa:min-h-[6px]", style: trackColor ? { background: getPercentBarPreviewResolvedBarColor(trackColor) } : undefined, children: [fillColor && (_jsx(Box, { className: "ab-PercentBar__barInside twa:absolute twa:top-0 twa:h-full", style: {
                     background: fillColor,
                     left: `${barLeftPercent.toFixed(2)}%`,
                     width: `${barWidthPercent.toFixed(2)}%`,
-                } })), hasCellText && presence.hasMerged && (_jsx(BarChartCellTextPreview, { mergedOverlayClassName: "ab-PercentBar__text twa:absolute twa:inset-x-0 twa:top-1/2 twa:-translate-y-1/2 twa:px-1 twa:text-2 twa:truncate", style: fontStyle, cellTextProperties: cellTextProperties, labels: labels, vertical: "Merged" }))] }));
+                } })), hasCellText && presence.hasMerged && (_jsx(BarStyleCellTextPreview, { mergedOverlayClassName: "ab-PercentBar__text twa:absolute twa:inset-x-0 twa:top-1/2 twa:-translate-y-1/2 twa:px-1 twa:text-2 twa:truncate", style: fontStyle, cellTextProperties: cellTextProperties, labels: labels, vertical: "Merged" }))] }));
     return (_jsxs(Flex, { className: `ab-PercentBar__wrapper ${PREVIEW_CELL_CLASS}`, flexDirection: "column", style: {
             justifyContent: 'center',
-            height: shouldShowBarChartCellTextOutsideBar(cellTextProperties, hasCellText) ? '100%' : undefined,
-        }, children: [hasCellText && presence.hasAbove && (_jsx(BarChartCellTextPreview, { className: cellTextClassName, style: fontStyle, cellTextProperties: cellTextProperties, labels: labels, vertical: "Above" })), barEl, hasCellText && presence.hasBelow && (_jsx(BarChartCellTextPreview, { className: cellTextClassName, style: fontStyle, cellTextProperties: cellTextProperties, labels: labels, vertical: "Below" }))] }));
+            height: shouldShowBarStyleCellTextOutsideBar(cellTextProperties, hasCellText)
+                ? '100%'
+                : undefined,
+        }, children: [hasCellText && presence.hasAbove && (_jsx(BarStyleCellTextPreview, { className: cellTextClassName, style: fontStyle, cellTextProperties: cellTextProperties, labels: labels, vertical: "Above" })), barEl, hasCellText && presence.hasBelow && (_jsx(BarStyleCellTextPreview, { className: cellTextClassName, style: fontStyle, cellTextProperties: cellTextProperties, labels: labels, vertical: "Below" }))] }));
 };
 export const StyledColumnPercentBarPreview = ({ data }) => {
     const pb = data.PercentBarStyle;