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

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

@@ -21,8 +21,8 @@ const RangeBarRangesSummaryPreview_1 = require("./StyledColumnWizardStyleSection
 const StyledColumnRangeBarPreview_1 = require("./StyledColumnWizardStyleSection/Components/StyledColumnRangeBarPreview");
 const Card_1 = require("../../../components/Card");
 const SummaryColorTag_1 = require("../../Wizard/SummaryColorTag");
-const barChartCellText_1 = require("../../../Utilities/Helpers/barChartCellText");
-const BarChartCellTextLayoutEditor_1 = require("./StyledColumnWizardStyleSection/Components/BarChartCellTextLayoutEditor");
+const BarStylesHelper_1 = require("../../../Utilities/Helpers/StyledColumns/BarStylesHelper");
+const BarStyleCellTextLayoutEditor_1 = require("./StyledColumnWizardStyleSection/Components/BarStyleCellTextLayoutEditor");
 const RANGE_STYLE_FORM_SIZES = ['200px', '1fr'];
 const BOUND_MODE_LABELS = {
     Number: 'Fixed Number',
@@ -110,14 +110,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 ((0, jsx_runtime_1.jsxs)(InputGroup_1.InputGroup, { Component: Flex_1.Flex, className: "twa:items-stretch twa:max-w-[22rem]", children: [(0, jsx_runtime_1.jsx)(NewSelect_1.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 && (0, jsx_runtime_1.jsx)(Flex_1.Box, { className: editorWrapperClassName, children: editor })] }));
+    return ((0, jsx_runtime_1.jsxs)(InputGroup_1.InputGroup, { Component: Flex_1.Flex, className: "twa:items-stretch twa:max-w-[22rem]", children: [(0, jsx_runtime_1.jsx)(NewSelect_1.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 && (0, jsx_runtime_1.jsx)(Flex_1.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(' + ') ?? '';
 const getStyledColumnRangeBarRangeViewValues = (data) => {
     const range = data.RangeBarStyle;
     if (!range) {
@@ -182,10 +178,10 @@ const buildStyledColumnRangeBarDisplaySummaryStrings = (range, options) => {
     if (range.BackColor) {
         items.push(`Back Colour: ${range.BackColor}`);
     }
-    if ((0, barChartCellText_1.hasBarChartCellTextConfigured)(range.CellTextProperties)) {
-        const tokens = (0, barChartCellText_1.getActiveBarChartCellTextTokens)(range.CellTextProperties);
+    if ((0, BarStylesHelper_1.hasBarStyleCellTextConfigured)(range.CellTextProperties)) {
+        const tokens = (0, BarStylesHelper_1.getActiveBarStyleCellTextTokens)(range.CellTextProperties);
         items.push(`Cell Text: ${formatRangeBarCellTextSummary(tokens)}`);
-        const layoutSummary = (0, barChartCellText_1.formatBarChartCellTextLayoutSummary)((0, barChartCellText_1.resolveBarChartCellTextLayout)(range.CellTextProperties));
+        const layoutSummary = (0, BarStylesHelper_1.formatBarStyleCellTextLayoutSummary)((0, BarStylesHelper_1.resolveBarStyleCellTextLayout)(range.CellTextProperties));
         if (layoutSummary) {
             items.push(`Placement: ${layoutSummary}`);
         }
@@ -381,7 +377,9 @@ 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,
@@ -448,11 +446,11 @@ const StyledColumnWizardRangeBarSection = (props) => {
     };
     // -- Cell text -------------------------------------------------------------
     const toggleCellText = (token, show) => {
-        update((0, barChartCellText_1.toggleBarChartCellTextToken)(range.CellTextProperties, token, show));
+        update((0, BarStylesHelper_1.toggleBarStyleCellTextToken)(range.CellTextProperties, token, show));
     };
     const onCellTextPlacementChange = (token, patch) => {
         update({
-            CellTextProperties: (0, barChartCellText_1.patchBarChartCellTextPlacement)(range.CellTextProperties, token, patch),
+            CellTextProperties: (0, BarStylesHelper_1.patchBarStyleCellTextPlacement)(range.CellTextProperties, token, patch),
         });
     };
     const toggleToolTipText = (token, checked) => {
@@ -501,6 +499,6 @@ const StyledColumnWizardRangeBarSection = (props) => {
                                                         { value: 'Clamp', label: 'Clamp to edge' },
                                                         { value: 'Overflow', label: 'Show outside' },
                                                         { value: 'Hide', label: 'Hide marker' },
-                                                    ] }) }) }), outOfRangeMode === 'Clamp' && ((0, jsx_runtime_1.jsx)(FormLayout_1.FormRow, { label: `Out-of-range ${api.internalApi.getCorrectEnglishVariant('Colour')}:`, children: (0, jsx_runtime_1.jsx)(ColorPicker_1.OptionalColorPicker, { disabled: disabled, api: api, value: range.OutOfRange?.Color, defaultColor: "crimson", onChange: (c) => updateOutOfRangeProperties({ Color: c }) }) }))] }) })] }), (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: "Text & Tooltip" }), (0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:text-xs twa:opacity-70 twa:font-normal twa:max-w-[520px]", children: "Optional cell-text overlay and AG Grid tooltip content." })] }), (0, jsx_runtime_1.jsx)(Card_1.Card.Body, { children: (0, jsx_runtime_1.jsxs)(FormLayout_1.default, { sizes: [...RANGE_STYLE_FORM_SIZES], children: [(0, jsx_runtime_1.jsx)(FormLayout_1.FormRow, { label: "Cell Text Layout:", children: (0, jsx_runtime_1.jsx)(BarChartCellTextLayoutEditor_1.BarChartCellTextLayoutEditor, { disabled: disabled, cellTextProperties: range.CellTextProperties, onToggle: toggleCellText, onPlacementChange: onCellTextPlacementChange }) }), (0, jsx_runtime_1.jsxs)(FormLayout_1.FormRow, { label: "Tooltip Display:", children: [(0, jsx_runtime_1.jsx)(CheckBox_1.CheckBox, { disabled: disabled, checked: range.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: range.ToolTipText?.includes('PercentageValue'), onChange: (checked) => toggleToolTipText('PercentageValue', checked), children: "Percent Value" })] })] }) })] }), (0, jsx_runtime_1.jsx)(StyledColumnRangeBarPreview_1.StyledColumnRangeBarPreviewCard, { data: data })] }))] }));
+                                                    ] }) }) }), outOfRangeMode === 'Clamp' && ((0, jsx_runtime_1.jsx)(FormLayout_1.FormRow, { label: `Out-of-range ${api.internalApi.getCorrectEnglishVariant('Colour')}:`, children: (0, jsx_runtime_1.jsx)(ColorPicker_1.OptionalColorPicker, { disabled: disabled, api: api, value: range.OutOfRange?.Color, defaultColor: "crimson", onChange: (c) => updateOutOfRangeProperties({ Color: c }) }) }))] }) })] }), (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: "Text & Tooltip" }), (0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:text-xs twa:opacity-70 twa:font-normal twa:max-w-[520px]", children: "Optional cell-text overlay and AG Grid tooltip content." })] }), (0, jsx_runtime_1.jsx)(Card_1.Card.Body, { children: (0, jsx_runtime_1.jsxs)(FormLayout_1.default, { sizes: [...RANGE_STYLE_FORM_SIZES], children: [(0, jsx_runtime_1.jsx)(BarStyleCellTextLayoutEditor_1.BarStyleCellTextLayoutEditor, { disabled: disabled, cellTextProperties: range.CellTextProperties, onToggle: toggleCellText, onPlacementChange: onCellTextPlacementChange }), (0, jsx_runtime_1.jsxs)(FormLayout_1.FormRow, { label: "Tooltip Display:", children: [(0, jsx_runtime_1.jsx)(CheckBox_1.CheckBox, { disabled: disabled, checked: range.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: range.ToolTipText?.includes('PercentageValue'), onChange: (checked) => toggleToolTipText('PercentageValue', checked), children: "Percent Value" })] })] }) })] }), (0, jsx_runtime_1.jsx)(StyledColumnRangeBarPreview_1.StyledColumnRangeBarPreviewCard, { data: data })] }))] }));
 };
 exports.StyledColumnWizardRangeBarSection = StyledColumnWizardRangeBarSection;

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

@@ -10,8 +10,8 @@ const OnePageAdaptableWizard_1 = require("../../Wizard/OnePageAdaptableWizard");
 const Flex_1 = require("../../../components/Flex");
 const CheckBox_1 = require("../../../components/CheckBox");
 const utils_1 = require("../../../lib/utils");
-const styledColumnRowKindSupport_1 = require("../../../Utilities/Helpers/styledColumnRowKindSupport");
-const iconStyledColumnColumnSupport_1 = require("../../../Utilities/Helpers/iconStyledColumnColumnSupport");
+const StyledColumnHelper_1 = require("../../../Utilities/Helpers/StyledColumns/StyledColumnHelper");
+const IconStyleHelper_1 = require("../../../Utilities/Helpers/StyledColumns/IconStyleHelper");
 const CollapsibleWizardCard_1 = require("../../Wizard/CollapsibleWizardCard");
 // ---------------------------------------------------------------------------
 // Row-kind helpers
@@ -37,23 +37,23 @@ const defaultRowKindIncluded = (styledColumn, kind) => {
     if (styledColumn.BadgeStyle) {
         return true;
     }
-    if (!(0, styledColumnRowKindSupport_1.isStyledColumnRowKindSupported)(styledColumn, kind)) {
+    if (!(0, StyledColumnHelper_1.isStyledColumnRowKindSupported)(styledColumn, kind)) {
         return false;
     }
     return kind !== 'Group';
 };
 const isRowKindIncluded = (styledColumn, kind) => {
-    if (!(0, styledColumnRowKindSupport_1.isStyledColumnRowKindSupported)(styledColumn, kind)) {
+    if (!(0, StyledColumnHelper_1.isStyledColumnRowKindSupported)(styledColumn, kind)) {
         return false;
     }
     const scope = styledColumn.RowScope;
     if (scope) {
-        return !scope[styledColumnRowKindSupport_1.STYLED_COLUMN_ROW_KIND_EXCLUDE_KEY[kind]];
+        return !scope[StyledColumnHelper_1.STYLED_COLUMN_ROW_KIND_EXCLUDE_KEY[kind]];
     }
     return defaultRowKindIncluded(styledColumn, kind);
 };
 const collectIncludedRowKinds = (styledColumn) => {
-    return styledColumnRowKindSupport_1.STYLED_COLUMN_ROW_KINDS.filter((k) => isRowKindIncluded(styledColumn, k));
+    return StyledColumnHelper_1.STYLED_COLUMN_ROW_KINDS.filter((k) => isRowKindIncluded(styledColumn, k));
 };
 // ---------------------------------------------------------------------------
 // Summary
@@ -86,7 +86,7 @@ const isValidStyledColumnScope = (data, api) => {
         return 'Please select a column for the Styled Column.';
     }
     if (data.IconStyle &&
-        (0, iconStyledColumnColumnSupport_1.isUnsupportedColumnDataTypeForIconStyle)(api.columnApi.getColumnDataTypeForColumnId(data.ColumnId))) {
+        (0, IconStyleHelper_1.isUnsupportedColumnDataTypeForIconStyle)(api.columnApi.getColumnDataTypeForColumnId(data.ColumnId))) {
         return 'Icon Style applies to scalar cell values only. Choose a numeric or plain text column, or use Badge Style for array columns.';
     }
     if (collectIncludedRowKinds(data).length === 0) {
@@ -95,15 +95,15 @@ const isValidStyledColumnScope = (data, api) => {
     return true;
 };
 exports.isValidStyledColumnScope = isValidStyledColumnScope;
-const StyledColumnRowScopePanel = ({ data, onRowKindChange, }) => ((0, jsx_runtime_1.jsx)(Flex_1.Flex, { flexDirection: "column", className: "twa:items-start twa:px-1 twa:py-1", style: { rowGap: 'calc(var(--ab-base-space) * 2)' }, children: styledColumnRowKindSupport_1.STYLED_COLUMN_ROW_KINDS.map((kind) => {
-        const supported = (0, styledColumnRowKindSupport_1.isStyledColumnRowKindSupported)(data, kind);
-        const disabledReason = (0, styledColumnRowKindSupport_1.getStyledColumnRowKindDisabledReason)(data, kind);
+const StyledColumnRowScopePanel = ({ data, onRowKindChange, }) => ((0, jsx_runtime_1.jsx)(Flex_1.Flex, { flexDirection: "column", className: "twa:items-start twa:px-1 twa:py-1", style: { rowGap: 'calc(var(--ab-base-space) * 2)' }, children: StyledColumnHelper_1.STYLED_COLUMN_ROW_KINDS.map((kind) => {
+        const supported = (0, StyledColumnHelper_1.isStyledColumnRowKindSupported)(data, kind);
+        const disabledReason = (0, StyledColumnHelper_1.getStyledColumnRowKindDisabledReason)(data, kind);
         return ((0, jsx_runtime_1.jsx)(CheckBox_1.CheckBox, { "data-name": `include-${kind.toLowerCase()}-rows-checkbox`, disabled: !supported, title: disabledReason, checked: isRowKindIncluded(data, kind), onChange: (checked) => onRowKindChange(kind, checked), children: ROW_KIND_LABELS[kind] }, kind));
     }) }));
 const StyledColumnWizardScopeSection = (props) => {
     const { data, api } = (0, OnePageAdaptableWizard_1.useOnePageAdaptableWizardContext)();
     React.useEffect(() => {
-        const next = (0, styledColumnRowKindSupport_1.sanitizeStyledColumnRowScope)(data);
+        const next = (0, StyledColumnHelper_1.sanitizeStyledColumnRowScope)(data);
         if (!next) {
             return;
         }
@@ -131,7 +131,7 @@ const StyledColumnWizardScopeSection = (props) => {
             return;
         }
         const dt = api.columnApi.getColumnDataTypeForColumnId(data.ColumnId);
-        if ((0, iconStyledColumnColumnSupport_1.isUnsupportedColumnDataTypeForIconStyle)(dt)) {
+        if ((0, IconStyleHelper_1.isUnsupportedColumnDataTypeForIconStyle)(dt)) {
             props.onChange({
                 ...data,
                 ColumnId: undefined,
@@ -201,7 +201,7 @@ const StyledColumnWizardScopeSection = (props) => {
         props.onChange(newStyledColumn);
     };
     const handleRowKindChange = (kind, include) => {
-        if (!(0, styledColumnRowKindSupport_1.isStyledColumnRowKindSupported)(data, kind)) {
+        if (!(0, StyledColumnHelper_1.isStyledColumnRowKindSupported)(data, kind)) {
             return;
         }
         const baseScope = data.RowScope ?? {
@@ -212,7 +212,7 @@ const StyledColumnWizardScopeSection = (props) => {
         };
         const nextScope = {
             ...baseScope,
-            [styledColumnRowKindSupport_1.STYLED_COLUMN_ROW_KIND_EXCLUDE_KEY[kind]]: !include,
+            [StyledColumnHelper_1.STYLED_COLUMN_ROW_KIND_EXCLUDE_KEY[kind]]: !include,
         };
         props.onChange({
             ...data,

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,37 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.BarStyleCellTextLayoutEditor = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const BarStylesHelper_1 = require("../../../../../Utilities/Helpers/StyledColumns/BarStylesHelper");
+const CheckBox_1 = require("../../../../../components/CheckBox");
+const Flex_1 = require("../../../../../components/Flex");
+const FormLayout_1 = require("../../../../../components/FormLayout");
+const NewSelect_1 = require("../../../../../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' },
+];
+const BarStyleCellTextLayoutEditor = ({ disabled, cellTextProperties, onToggle, onPlacementChange }) => {
+    const layout = (0, BarStylesHelper_1.resolveBarStyleCellTextLayout)(cellTextProperties);
+    return ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: ROWS.map(({ token, label, key }) => {
+            const placement = layout[key];
+            const isShown = Boolean(placement);
+            const rowDisabled = disabled || !isShown;
+            return ((0, jsx_runtime_1.jsx)(FormLayout_1.FormRow, { label: label, children: (0, jsx_runtime_1.jsxs)(Flex_1.Flex, { alignItems: "center", className: "twa:gap-3", children: [(0, jsx_runtime_1.jsx)(CheckBox_1.CheckBox, { disabled: disabled, checked: isShown, onChange: (checked) => onToggle(token, checked) }), (0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:w-[140px]", children: (0, jsx_runtime_1.jsx)(NewSelect_1.SingleSelect, { className: "twa:w-full", disabled: rowDisabled, value: placement?.Horizontal ?? 'Left', onValueChange: (v) => onPlacementChange(token, {
+                                    Horizontal: v,
+                                }), items: HORIZONTAL_CHOICES }) }), (0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:w-[140px]", children: (0, jsx_runtime_1.jsx)(NewSelect_1.SingleSelect, { className: "twa:w-full", disabled: rowDisabled, value: placement?.Vertical ?? 'Below', onValueChange: (v) => onPlacementChange(token, {
+                                    Vertical: v,
+                                }), items: VERTICAL_CHOICES }) })] }) }, token));
+        }) }));
+};
+exports.BarStyleCellTextLayoutEditor = BarStyleCellTextLayoutEditor;

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,8 +1,8 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.shouldShowBarChartCellTextOutsideBar = exports.BarChartCellTextPreview = void 0;
+exports.shouldShowBarStyleCellTextOutsideBar = exports.BarStyleCellTextPreview = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
-const barChartCellText_1 = require("../../../../../Utilities/Helpers/barChartCellText");
+const BarStylesHelper_1 = require("../../../../../Utilities/Helpers/StyledColumns/BarStylesHelper");
 const Flex_1 = require("../../../../../components/Flex");
 const HORIZONTAL_ORDER = ['Left', 'Center', 'Right'];
 const HORIZONTAL_JUSTIFY = {
@@ -36,11 +36,11 @@ const CellTextRow = ({ className, style, slots }) => ((0, jsx_runtime_1.jsx)(Fle
  * stable. When `vertical` is provided, only the band matching that value is
  * rendered (used by the preview cards to position bands around the bar).
  */
-const BarChartCellTextPreview = ({ className, style, cellTextProperties, labels, mergedOverlayClassName, vertical }) => {
+const BarStyleCellTextPreview = ({ className, style, cellTextProperties, labels, mergedOverlayClassName, vertical }) => {
     if (!labels.cellValue && !labels.percentage) {
         return null;
     }
-    const slots = (0, barChartCellText_1.resolveBarChartCellTextSlots)(cellTextProperties, labels);
+    const slots = (0, BarStylesHelper_1.resolveBarStyleCellTextSlots)(cellTextProperties, labels);
     if (!slots.length) {
         return null;
     }
@@ -51,12 +51,12 @@ const BarChartCellTextPreview = ({ className, style, cellTextProperties, labels,
     const usedClassName = vertical === 'Merged' ? mergedOverlayClassName ?? className : className;
     return ((0, jsx_runtime_1.jsx)(CellTextRow, { className: usedClassName, style: style, slots: bandSlots.map((s) => ({ horizontal: s.horizontal, text: s.text })) }));
 };
-exports.BarChartCellTextPreview = BarChartCellTextPreview;
-const shouldShowBarChartCellTextOutsideBar = (cellTextProperties, hasCellText) => {
-    if (!hasCellText || !(0, barChartCellText_1.hasBarChartCellTextConfigured)(cellTextProperties)) {
+exports.BarStyleCellTextPreview = BarStyleCellTextPreview;
+const shouldShowBarStyleCellTextOutsideBar = (cellTextProperties, hasCellText) => {
+    if (!hasCellText || !(0, BarStylesHelper_1.hasBarStyleCellTextConfigured)(cellTextProperties)) {
         return false;
     }
-    const { hasAbove, hasBelow } = (0, barChartCellText_1.getBarChartCellTextSlotPresence)(cellTextProperties);
+    const { hasAbove, hasBelow } = (0, BarStylesHelper_1.getBarStyleCellTextSlotPresence)(cellTextProperties);
     return hasAbove || hasBelow;
 };
-exports.shouldShowBarChartCellTextOutsideBar = shouldShowBarChartCellTextOutsideBar;
+exports.shouldShowBarStyleCellTextOutsideBar = shouldShowBarStyleCellTextOutsideBar;

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

@@ -8,7 +8,7 @@ const tinycolor2_1 = tslib_1.__importDefault(require("tinycolor2"));
 const Flex_1 = require("../../../../../components/Flex");
 const Tag_1 = require("../../../../../components/Tag");
 const StyleHelper_1 = require("../../../../../Utilities/Helpers/StyleHelper");
-const StyledColumnGradientHelper_1 = require("../../../../../Utilities/Helpers/StyledColumnGradientHelper");
+const GradientStyleHelper_1 = require("../../../../../Utilities/Helpers/StyledColumns/GradientStyleHelper");
 function clamp01(n) {
     if (Number.isNaN(n)) {
         return 0;
@@ -39,14 +39,14 @@ function zeroCentredSplitPreview(negativeColor, positiveColor, postfix, minA, ma
  * `Col-Min..0` + `0..Col-Max` pairs render as a single split strip.
  */
 const GradientRangesSummaryPreview = (props) => {
-    const minA = props.gradientStyle?.MinAlpha ?? StyledColumnGradientHelper_1.DEFAULT_GRADIENT_MIN_ALPHA;
-    const maxA = props.gradientStyle?.MaxAlpha ?? StyledColumnGradientHelper_1.DEFAULT_GRADIENT_MAX_ALPHA;
+    const minA = props.gradientStyle?.MinAlpha ?? GradientStyleHelper_1.DEFAULT_GRADIENT_MIN_ALPHA;
+    const maxA = props.gradientStyle?.MaxAlpha ?? GradientStyleHelper_1.DEFAULT_GRADIENT_MAX_ALPHA;
     const postfix = (props.rangeValueType ?? 'Number') === 'Percentage' ? '%' : '';
     if (props.zeroCentred) {
         return zeroCentredSplitPreview(props.zeroCentred.NegativeColor, props.zeroCentred.PositiveColor, postfix, minA, maxA);
     }
     const ranges = props.ranges ?? [];
-    if ((0, StyledColumnGradientHelper_1.isDivergingZeroCellRanges)(ranges)) {
+    if ((0, GradientStyleHelper_1.isDivergingZeroCellRanges)(ranges)) {
         const [r0, r1] = ranges;
         return ((0, jsx_runtime_1.jsxs)(Flex_1.Flex, { flexDirection: "column", className: "twa:gap-2", children: [(0, jsx_runtime_1.jsxs)(Flex_1.Flex, { alignItems: "center", className: "twa:flex-wrap twa:gap-2", children: [(0, jsx_runtime_1.jsxs)(Tag_1.Tag, { children: [r0.Min, postfix, " \u2192 ", r0.Max, postfix] }), (0, jsx_runtime_1.jsxs)(Tag_1.Tag, { children: [r1.Min, postfix, " \u2192 ", r1.Max, postfix] })] }), (0, jsx_runtime_1.jsxs)(Flex_1.Flex, { className: `${stripClassName} twa:w-[200px]`, children: [(0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:flex-1", style: {
                                 background: gradientRangeStripCss(r0.Color, !!r0.ReverseGradient, minA, maxA),
@@ -60,11 +60,9 @@ const GradientRangesSummaryPreview = (props) => {
 };
 exports.GradientRangesSummaryPreview = GradientRangesSummaryPreview;
 const GradientColumnComparisonSummaryPreview = (props) => {
-    const minA = props.gradientStyle?.MinAlpha ?? StyledColumnGradientHelper_1.DEFAULT_GRADIENT_MIN_ALPHA;
-    const maxA = props.gradientStyle?.MaxAlpha ?? StyledColumnGradientHelper_1.DEFAULT_GRADIENT_MAX_ALPHA;
-    const fmt = (v) => isNaN(Number(v))
-        ? `[${props.api.columnApi.getFriendlyNameForColumnId(String(v))}]`
-        : v;
+    const minA = props.gradientStyle?.MinAlpha ?? GradientStyleHelper_1.DEFAULT_GRADIENT_MIN_ALPHA;
+    const maxA = props.gradientStyle?.MaxAlpha ?? GradientStyleHelper_1.DEFAULT_GRADIENT_MAX_ALPHA;
+    const fmt = (v) => isNaN(Number(v)) ? `[${props.api.columnApi.getFriendlyNameForColumnId(String(v))}]` : v;
     return ((0, jsx_runtime_1.jsxs)(Flex_1.Flex, { flexDirection: "column", className: "twa:gap-2", children: [(0, jsx_runtime_1.jsxs)(Tag_1.Tag, { children: ["Min: ", fmt(props.columnComparison.MinValue), " \u2014 Max: ", fmt(props.columnComparison.MaxValue)] }), (0, jsx_runtime_1.jsx)(Flex_1.Box, { className: `${stripClassName} twa:w-[200px]`, style: {
                     background: gradientRangeStripCss(props.columnComparison.Color, false, minA, maxA),
                 } })] }));

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

@@ -3,12 +3,12 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.hasBulletChartRangesConfigured = exports.StyledColumnBulletPreviewCard = exports.StyledColumnBulletPreview = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const StyleHelper_1 = require("../../../../../Utilities/Helpers/StyleHelper");
-const barChartCellText_1 = require("../../../../../Utilities/Helpers/barChartCellText");
+const BarStylesHelper_1 = require("../../../../../Utilities/Helpers/StyledColumns/BarStylesHelper");
 const Flex_1 = require("../../../../../components/Flex");
 const Card_1 = require("../../../../../components/Card");
 const Tag_1 = require("../../../../../components/Tag");
 const StyledColumnChartListPreviews_1 = require("./StyledColumnChartListPreviews");
-const BarChartCellTextPreview_1 = require("./BarChartCellTextPreview");
+const BarStyleCellTextPreview_1 = require("./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 ?? [];
@@ -31,10 +31,10 @@ const getBulletPreviewSample = (bullet) => {
 const BulletChartPreviewContent = ({ bullet, }) => {
     const { sampleValue, valueFraction } = getBulletPreviewSample(bullet);
     const cellTextProperties = bullet.CellTextProperties;
-    const labels = (0, barChartCellText_1.buildBarChartCellTextLabels)(cellTextProperties, Number.isInteger(sampleValue) ? String(sampleValue) : sampleValue.toFixed(1), `${(valueFraction * 100).toFixed(0)}%`);
-    const hasCellText = (0, barChartCellText_1.hasBarChartCellTextConfigured)(cellTextProperties) &&
+    const labels = (0, BarStylesHelper_1.buildBarStyleCellTextLabels)(cellTextProperties, Number.isInteger(sampleValue) ? String(sampleValue) : sampleValue.toFixed(1), `${(valueFraction * 100).toFixed(0)}%`);
+    const hasCellText = (0, BarStylesHelper_1.hasBarStyleCellTextConfigured)(cellTextProperties) &&
         Boolean(labels.cellValue || labels.percentage);
-    const presence = (0, barChartCellText_1.getBarChartCellTextSlotPresence)(cellTextProperties);
+    const presence = (0, BarStylesHelper_1.getBarStyleCellTextSlotPresence)(cellTextProperties);
     const fontStyle = bullet.Font ? (0, StyleHelper_1.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';
@@ -42,9 +42,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 ((0, jsx_runtime_1.jsxs)(Flex_1.Box, { className: "ab-BulletChart__wrapper twa:relative twa:inline-flex", children: [chartEl, (0, jsx_runtime_1.jsx)(BarChartCellTextPreview_1.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 ((0, jsx_runtime_1.jsxs)(Flex_1.Box, { className: "ab-BulletChart__wrapper twa:relative twa:inline-flex", children: [chartEl, (0, jsx_runtime_1.jsx)(BarStyleCellTextPreview_1.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 ((0, jsx_runtime_1.jsxs)(Flex_1.Flex, { className: "ab-BulletChart__wrapper twa:relative", flexDirection: "column", alignItems: isVertical ? 'center' : 'stretch', style: { justifyContent: 'center', gap: hasCellText ? 2 : 0 }, children: [hasCellText && presence.hasAbove && ((0, jsx_runtime_1.jsx)(BarChartCellTextPreview_1.BarChartCellTextPreview, { className: cellTextClassName, style: fontStyle, cellTextProperties: cellTextProperties, labels: labels, vertical: "Above" })), (0, jsx_runtime_1.jsxs)(Flex_1.Box, { className: "twa:relative twa:w-full", style: { display: 'inline-flex' }, children: [chartEl, hasCellText && presence.hasMerged && ((0, jsx_runtime_1.jsx)(BarChartCellTextPreview_1.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 && ((0, jsx_runtime_1.jsx)(BarChartCellTextPreview_1.BarChartCellTextPreview, { className: cellTextClassName, style: fontStyle, cellTextProperties: cellTextProperties, labels: labels, vertical: "Below" }))] }));
+    return ((0, jsx_runtime_1.jsxs)(Flex_1.Flex, { className: "ab-BulletChart__wrapper twa:relative", flexDirection: "column", alignItems: isVertical ? 'center' : 'stretch', style: { justifyContent: 'center', gap: hasCellText ? 2 : 0 }, children: [hasCellText && presence.hasAbove && ((0, jsx_runtime_1.jsx)(BarStyleCellTextPreview_1.BarStyleCellTextPreview, { className: cellTextClassName, style: fontStyle, cellTextProperties: cellTextProperties, labels: labels, vertical: "Above" })), (0, jsx_runtime_1.jsxs)(Flex_1.Box, { className: "twa:relative twa:w-full", style: { display: 'inline-flex' }, children: [chartEl, hasCellText && presence.hasMerged && ((0, jsx_runtime_1.jsx)(BarStyleCellTextPreview_1.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 && ((0, jsx_runtime_1.jsx)(BarStyleCellTextPreview_1.BarStyleCellTextPreview, { className: cellTextClassName, style: fontStyle, cellTextProperties: cellTextProperties, labels: labels, vertical: "Below" }))] }));
 };
 const StyledColumnBulletPreview = ({ data }) => {
     const bullet = data.BulletChartStyle;

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

@@ -6,7 +6,7 @@ const Flex_1 = require("../../../../../components/Flex");
 const Card_1 = require("../../../../../components/Card");
 const Tag_1 = require("../../../../../components/Tag");
 const AdaptableContext_1 = require("../../../../AdaptableContext");
-const StyledColumnGradientHelper_1 = require("../../../../../Utilities/Helpers/StyledColumnGradientHelper");
+const GradientStyleHelper_1 = require("../../../../../Utilities/Helpers/StyledColumns/GradientStyleHelper");
 const formatPreviewValue = (value) => {
     if (Number.isInteger(value)) {
         return value.toLocaleString();
@@ -20,15 +20,15 @@ const StyledColumnGradientPreview = ({ data, api: apiProp }) => {
     if (!gs) {
         return (0, jsx_runtime_1.jsx)(Tag_1.Tag, { children: "No Gradient Style" });
     }
-    if (!(0, StyledColumnGradientHelper_1.hasGradientRangesConfigured)(gs)) {
+    if (!(0, GradientStyleHelper_1.hasGradientRangesConfigured)(gs)) {
         return (0, jsx_runtime_1.jsx)(Tag_1.Tag, { children: "Define ranges before previewing" });
     }
-    const sampleValues = (0, StyledColumnGradientHelper_1.getGradientPreviewSampleValues)(data, api);
+    const sampleValues = (0, GradientStyleHelper_1.getGradientPreviewSampleValues)(data, api);
     if (!sampleValues.length) {
         return (0, jsx_runtime_1.jsx)(Tag_1.Tag, { children: "No preview available" });
     }
     const rowNode = api.gridApi?.getRowNodeForIndex(0) ?? null;
-    return ((0, jsx_runtime_1.jsx)(Flex_1.Flex, { alignItems: "stretch", className: "twa:flex-wrap twa:gap-2", children: sampleValues.map((value) => ((0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "ab-GradientPreviewCell twa:px-2 twa:py-1 twa:min-w-[56px] twa:text-2 twa:text-center twa:rounded-standard twa:border twa:border-[color-mix(in_srgb,var(--ab-color-foreground)_15%,transparent)]", style: (0, StyledColumnGradientHelper_1.getGradientPreviewCellStyle)(value, data, api, rowNode), children: formatPreviewValue(value) }, value))) }));
+    return ((0, jsx_runtime_1.jsx)(Flex_1.Flex, { alignItems: "stretch", className: "twa:flex-wrap twa:gap-2", children: sampleValues.map((value) => ((0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "ab-GradientPreviewCell twa:px-2 twa:py-1 twa:min-w-[56px] twa:text-2 twa:text-center twa:rounded-standard twa:border twa:border-[color-mix(in_srgb,var(--ab-color-foreground)_15%,transparent)]", style: (0, GradientStyleHelper_1.getGradientPreviewCellStyle)(value, data, api, rowNode), children: formatPreviewValue(value) }, value))) }));
 };
 exports.StyledColumnGradientPreview = StyledColumnGradientPreview;
 const StyledColumnGradientPreviewCard = ({ data }) => ((0, jsx_runtime_1.jsxs)(Card_1.Card, { shadow: false, children: [(0, jsx_runtime_1.jsx)(Card_1.Card.Title, { children: (0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:font-medium", children: "Preview" }) }), (0, jsx_runtime_1.jsx)(Card_1.Card.Body, { className: "twa:p-1", children: (0, jsx_runtime_1.jsx)(exports.StyledColumnGradientPreview, { data: data }) })] }));

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

@@ -3,41 +3,43 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.StyledColumnPercentBarPreviewCard = exports.StyledColumnPercentBarPreview = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const StyleHelper_1 = require("../../../../../Utilities/Helpers/StyleHelper");
-const percentBarPreviewHelper_1 = require("../../../../../Utilities/Helpers/percentBarPreviewHelper");
-const barChartCellText_1 = require("../../../../../Utilities/Helpers/barChartCellText");
+const PercentBarStyleHelper_1 = require("../../../../../Utilities/Helpers/StyledColumns/PercentBarStyleHelper");
+const BarStylesHelper_1 = require("../../../../../Utilities/Helpers/StyledColumns/BarStylesHelper");
 const Flex_1 = require("../../../../../components/Flex");
 const Card_1 = require("../../../../../components/Card");
 const Tag_1 = require("../../../../../components/Tag");
-const BarChartCellTextPreview_1 = require("./BarChartCellTextPreview");
+const BarStyleCellTextPreview_1 = require("./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;
-    const { barLeftPercent, barWidthPercent, percentageValue, barColor } = (0, percentBarPreviewHelper_1.getPercentBarPreviewGeometry)(value, pb, min, max);
-    const trackColor = (0, percentBarPreviewHelper_1.getPercentBarPreviewTrackColor)(pb);
-    const fillColor = (0, percentBarPreviewHelper_1.getPercentBarPreviewResolvedBarColor)(barColor);
+    const { barLeftPercent, barWidthPercent, percentageValue, barColor } = (0, PercentBarStyleHelper_1.getPercentBarPreviewGeometry)(value, pb, min, max);
+    const trackColor = (0, PercentBarStyleHelper_1.getPercentBarPreviewTrackColor)(pb);
+    const fillColor = (0, PercentBarStyleHelper_1.getPercentBarPreviewResolvedBarColor)(barColor);
     const cellTextProperties = pb.CellTextProperties;
-    const labels = (0, barChartCellText_1.buildBarChartCellTextLabels)(cellTextProperties, Number.isInteger(value) ? String(value) : value.toFixed(1), `${percentageValue.toFixed(0)}%`);
-    const hasCellText = (0, barChartCellText_1.hasBarChartCellTextConfigured)(cellTextProperties) &&
+    const labels = (0, BarStylesHelper_1.buildBarStyleCellTextLabels)(cellTextProperties, Number.isInteger(value) ? String(value) : value.toFixed(1), `${percentageValue.toFixed(0)}%`);
+    const hasCellText = (0, BarStylesHelper_1.hasBarStyleCellTextConfigured)(cellTextProperties) &&
         Boolean(labels.cellValue || labels.percentage);
-    const presence = (0, barChartCellText_1.getBarChartCellTextSlotPresence)(cellTextProperties);
+    const presence = (0, BarStylesHelper_1.getBarStyleCellTextSlotPresence)(cellTextProperties);
     const fontStyle = pb.Font ? (0, StyleHelper_1.convertAdaptableStyleToCSS)(pb.Font) : undefined;
     const cellTextClassName = 'ab-PercentBar__text twa:text-2 twa:leading-tight twa:truncate';
-    const barEl = ((0, jsx_runtime_1.jsxs)(Flex_1.Box, { className: "ab-PercentBar__bar twa:relative twa:flex-1 twa:min-h-[6px]", style: trackColor ? { background: (0, percentBarPreviewHelper_1.getPercentBarPreviewResolvedBarColor)(trackColor) } : undefined, children: [fillColor && ((0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "ab-PercentBar__barInside twa:absolute twa:top-0 twa:h-full", style: {
+    const barEl = ((0, jsx_runtime_1.jsxs)(Flex_1.Box, { className: "ab-PercentBar__bar twa:relative twa:flex-1 twa:min-h-[6px]", style: trackColor ? { background: (0, PercentBarStyleHelper_1.getPercentBarPreviewResolvedBarColor)(trackColor) } : undefined, children: [fillColor && ((0, jsx_runtime_1.jsx)(Flex_1.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 && ((0, jsx_runtime_1.jsx)(BarChartCellTextPreview_1.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 && ((0, jsx_runtime_1.jsx)(BarStyleCellTextPreview_1.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 ((0, jsx_runtime_1.jsxs)(Flex_1.Flex, { className: `ab-PercentBar__wrapper ${PREVIEW_CELL_CLASS}`, flexDirection: "column", style: {
             justifyContent: 'center',
-            height: (0, BarChartCellTextPreview_1.shouldShowBarChartCellTextOutsideBar)(cellTextProperties, hasCellText) ? '100%' : undefined,
-        }, children: [hasCellText && presence.hasAbove && ((0, jsx_runtime_1.jsx)(BarChartCellTextPreview_1.BarChartCellTextPreview, { className: cellTextClassName, style: fontStyle, cellTextProperties: cellTextProperties, labels: labels, vertical: "Above" })), barEl, hasCellText && presence.hasBelow && ((0, jsx_runtime_1.jsx)(BarChartCellTextPreview_1.BarChartCellTextPreview, { className: cellTextClassName, style: fontStyle, cellTextProperties: cellTextProperties, labels: labels, vertical: "Below" }))] }));
+            height: (0, BarStyleCellTextPreview_1.shouldShowBarStyleCellTextOutsideBar)(cellTextProperties, hasCellText)
+                ? '100%'
+                : undefined,
+        }, children: [hasCellText && presence.hasAbove && ((0, jsx_runtime_1.jsx)(BarStyleCellTextPreview_1.BarStyleCellTextPreview, { className: cellTextClassName, style: fontStyle, cellTextProperties: cellTextProperties, labels: labels, vertical: "Above" })), barEl, hasCellText && presence.hasBelow && ((0, jsx_runtime_1.jsx)(BarStyleCellTextPreview_1.BarStyleCellTextPreview, { className: cellTextClassName, style: fontStyle, cellTextProperties: cellTextProperties, labels: labels, vertical: "Below" }))] }));
 };
 const StyledColumnPercentBarPreview = ({ data }) => {
     const pb = data.PercentBarStyle;
     if (!pb) {
         return (0, jsx_runtime_1.jsx)(Tag_1.Tag, { children: "No Percent Bar Style" });
     }
-    if (!(0, percentBarPreviewHelper_1.hasPercentBarRangesConfigured)(pb)) {
+    if (!(0, PercentBarStyleHelper_1.hasPercentBarRangesConfigured)(pb)) {
         return (0, jsx_runtime_1.jsx)(Tag_1.Tag, { children: "Define ranges before previewing" });
     }
     let min;
@@ -50,13 +52,13 @@ const StyledColumnPercentBarPreview = ({ data }) => {
             max = cmpMax;
         }
         else {
-            ({ min, max } = (0, percentBarPreviewHelper_1.getPercentBarPreviewScale)(pb));
+            ({ min, max } = (0, PercentBarStyleHelper_1.getPercentBarPreviewScale)(pb));
         }
     }
     else {
-        ({ min, max } = (0, percentBarPreviewHelper_1.getPercentBarPreviewScale)(pb));
+        ({ min, max } = (0, PercentBarStyleHelper_1.getPercentBarPreviewScale)(pb));
     }
-    const sampleValues = (0, percentBarPreviewHelper_1.getPercentBarPreviewSampleValues)(pb);
+    const sampleValues = (0, PercentBarStyleHelper_1.getPercentBarPreviewSampleValues)(pb);
     return ((0, jsx_runtime_1.jsx)(Flex_1.Flex, { alignItems: "stretch", className: "twa:flex-wrap twa:gap-2", children: sampleValues.map((value) => ((0, jsx_runtime_1.jsx)(PercentBarPreviewCell, { styledColumn: data, value: value, min: min, max: max }, value))) }));
 };
 exports.StyledColumnPercentBarPreview = StyledColumnPercentBarPreview;

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

@@ -2,12 +2,12 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.StyledColumnRangeBarPreviewCard = exports.StyledColumnRangeBarPreview = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
-const barChartCellText_1 = require("../../../../../Utilities/Helpers/barChartCellText");
+const BarStylesHelper_1 = require("../../../../../Utilities/Helpers/StyledColumns/BarStylesHelper");
 const Flex_1 = require("../../../../../components/Flex");
 const Card_1 = require("../../../../../components/Card");
 const Tag_1 = require("../../../../../components/Tag");
 const StyledColumnChartListPreviews_1 = require("./StyledColumnChartListPreviews");
-const BarChartCellTextPreview_1 = require("./BarChartCellTextPreview");
+const BarStyleCellTextPreview_1 = require("./BarStyleCellTextPreview");
 const PREVIEW_CELL_CLASS = 'ab-RangeBarPreviewCell 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 getRangeBarPreviewSample = (range) => {
     let min = 0;
@@ -28,17 +28,17 @@ const getRangeBarPreviewSample = (range) => {
 const RangeBarPreviewContent = ({ range }) => {
     const { sampleValue, valueFraction } = getRangeBarPreviewSample(range);
     const cellTextProperties = range.CellTextProperties;
-    const labels = (0, barChartCellText_1.buildBarChartCellTextLabels)(cellTextProperties, Number.isInteger(sampleValue) ? String(sampleValue) : sampleValue.toFixed(1), `${(valueFraction * 100).toFixed(0)}%`);
-    const hasCellText = (0, barChartCellText_1.hasBarChartCellTextConfigured)(cellTextProperties) &&
+    const labels = (0, BarStylesHelper_1.buildBarStyleCellTextLabels)(cellTextProperties, Number.isInteger(sampleValue) ? String(sampleValue) : sampleValue.toFixed(1), `${(valueFraction * 100).toFixed(0)}%`);
+    const hasCellText = (0, BarStylesHelper_1.hasBarStyleCellTextConfigured)(cellTextProperties) &&
         Boolean(labels.cellValue || labels.percentage);
-    const presence = (0, barChartCellText_1.getBarChartCellTextSlotPresence)(cellTextProperties);
+    const presence = (0, BarStylesHelper_1.getBarStyleCellTextSlotPresence)(cellTextProperties);
     const isVertical = range.Orientation === 'Vertical';
     const cellTextClassName = 'ab-RangeBar__text twa:text-2 twa:leading-tight twa:truncate twa:max-w-full';
     const chartEl = (0, jsx_runtime_1.jsx)(StyledColumnChartListPreviews_1.StyledColumnRangeBarListPreview, { range: range });
     if (hasCellText && presence.hasMerged && !presence.hasAbove && !presence.hasBelow) {
-        return ((0, jsx_runtime_1.jsxs)(Flex_1.Box, { className: "ab-RangeBar__wrapper twa:relative twa:inline-flex", children: [chartEl, (0, jsx_runtime_1.jsx)(BarChartCellTextPreview_1.BarChartCellTextPreview, { mergedOverlayClassName: "ab-RangeBar__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", cellTextProperties: cellTextProperties, labels: labels, vertical: "Merged" })] }));
+        return ((0, jsx_runtime_1.jsxs)(Flex_1.Box, { className: "ab-RangeBar__wrapper twa:relative twa:inline-flex", children: [chartEl, (0, jsx_runtime_1.jsx)(BarStyleCellTextPreview_1.BarStyleCellTextPreview, { mergedOverlayClassName: "ab-RangeBar__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", cellTextProperties: cellTextProperties, labels: labels, vertical: "Merged" })] }));
     }
-    return ((0, jsx_runtime_1.jsxs)(Flex_1.Flex, { className: "ab-RangeBar__wrapper twa:relative", flexDirection: "column", alignItems: isVertical ? 'center' : 'stretch', style: { justifyContent: 'center', gap: hasCellText ? 2 : 0 }, children: [hasCellText && presence.hasAbove && ((0, jsx_runtime_1.jsx)(BarChartCellTextPreview_1.BarChartCellTextPreview, { className: cellTextClassName, cellTextProperties: cellTextProperties, labels: labels, vertical: "Above" })), (0, jsx_runtime_1.jsxs)(Flex_1.Box, { className: "twa:relative twa:w-full", style: { display: 'inline-flex' }, children: [chartEl, hasCellText && presence.hasMerged && ((0, jsx_runtime_1.jsx)(BarChartCellTextPreview_1.BarChartCellTextPreview, { mergedOverlayClassName: "ab-RangeBar__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", cellTextProperties: cellTextProperties, labels: labels, vertical: "Merged" }))] }), hasCellText && presence.hasBelow && ((0, jsx_runtime_1.jsx)(BarChartCellTextPreview_1.BarChartCellTextPreview, { className: cellTextClassName, cellTextProperties: cellTextProperties, labels: labels, vertical: "Below" }))] }));
+    return ((0, jsx_runtime_1.jsxs)(Flex_1.Flex, { className: "ab-RangeBar__wrapper twa:relative", flexDirection: "column", alignItems: isVertical ? 'center' : 'stretch', style: { justifyContent: 'center', gap: hasCellText ? 2 : 0 }, children: [hasCellText && presence.hasAbove && ((0, jsx_runtime_1.jsx)(BarStyleCellTextPreview_1.BarStyleCellTextPreview, { className: cellTextClassName, cellTextProperties: cellTextProperties, labels: labels, vertical: "Above" })), (0, jsx_runtime_1.jsxs)(Flex_1.Box, { className: "twa:relative twa:w-full", style: { display: 'inline-flex' }, children: [chartEl, hasCellText && presence.hasMerged && ((0, jsx_runtime_1.jsx)(BarStyleCellTextPreview_1.BarStyleCellTextPreview, { mergedOverlayClassName: "ab-RangeBar__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", cellTextProperties: cellTextProperties, labels: labels, vertical: "Merged" }))] }), hasCellText && presence.hasBelow && ((0, jsx_runtime_1.jsx)(BarStyleCellTextPreview_1.BarStyleCellTextPreview, { className: cellTextClassName, cellTextProperties: cellTextProperties, labels: labels, vertical: "Below" }))] }));
 };
 const StyledColumnRangeBarPreview = ({ data }) => {
     const range = data.RangeBarStyle;

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

@@ -7,7 +7,7 @@ const jsx_runtime_1 = require("react/jsx-runtime");
 const React = tslib_1.__importStar(require("react"));
 const ag_charts_enterprise_1 = require("ag-charts-enterprise");
 const AdaptableHelper_1 = require("../../../../../Utilities/Helpers/AdaptableHelper");
-const SparklineOptionsHelper_1 = require("../../../../../Utilities/Helpers/SparklineOptionsHelper");
+const SparklineStyleHelper_1 = require("../../../../../Utilities/Helpers/StyledColumns/SparklineStyleHelper");
 const StyleHelper_1 = require("../../../../../Utilities/Helpers/StyleHelper");
 const Flex_1 = require("../../../../../components/Flex");
 const Card_1 = require("../../../../../components/Card");
@@ -44,7 +44,7 @@ const buildSparklinePreviewOptions = (sparklineStyle, container, data, width, he
     const sanitized = AdaptableHelper_1.AdaptableHelper.removeAdaptableObjectPrimitives({
         ...persisted,
     });
-    const options = (0, SparklineOptionsHelper_1.resolveSparklineOptionsForRender)({
+    const options = (0, SparklineStyleHelper_1.resolveSparklineOptionsForRender)({
         ...sanitized,
         type: sanitized.type ?? 'line',
         container,