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

package/src/Utilities/Helpers/Helper.d.ts

@@ -10,9 +10,6 @@ export declare function copyToClipboard(text: string): Promise<boolean>;
 export declare function returnItemCount(items: any[], itemName: string): string;
 export declare function isInputNullOrEmpty(itemToCheck: any): boolean;
 export declare function isInputNotNullOrEmpty(itemToCheck: any): boolean;
-export declare function roundNumber(numberToRound: any, decimalPlaces: number): number;
-export declare function roundNumberTo4dp(numberToRound: any): number;
-export declare function clamp(value: any, boundOne: number, boundTwo: number): number;
 export declare function extractColsFromText(text: string): string[];
 export declare function replaceAll(text: string, toReplace: string, replaceWith: string): string;
 export declare function extractContextKeysFromText(text: string): string[];
@@ -28,9 +25,6 @@ export declare const Helper: {
     returnItemCount: typeof returnItemCount;
     isInputNullOrEmpty: typeof isInputNullOrEmpty;
     isInputNotNullOrEmpty: typeof isInputNotNullOrEmpty;
-    roundNumber: typeof roundNumber;
-    roundNumberTo4dp: typeof roundNumberTo4dp;
-    clamp: typeof clamp;
     extractColsFromText: typeof extractColsFromText;
     replaceAll: typeof replaceAll;
     extractContextKeysFromText: typeof extractContextKeysFromText;

package/src/Utilities/Helpers/Helper.js

@@ -140,38 +140,6 @@ export function isInputNullOrEmpty(itemToCheck) {
 export function isInputNotNullOrEmpty(itemToCheck) {
     return !isInputNullOrEmpty(itemToCheck);
 }
-export function roundNumber(numberToRound, decimalPlaces) {
-    switch (decimalPlaces) {
-        case 1:
-            return Math.round(numberToRound * 10) / 10;
-        case 2:
-            return Math.round(numberToRound * 100) / 100;
-        case 3:
-            return Math.round(numberToRound * 1000) / 1000;
-        case 4:
-            return Math.round(numberToRound * 10000) / 10000;
-        case 5:
-            return Math.round(numberToRound * 100000) / 100000;
-        case 6:
-            return Math.round(numberToRound * 1000000) / 1000000;
-    }
-}
-export function roundNumberTo4dp(numberToRound) {
-    return roundNumber(numberToRound, 4);
-}
-// putting this here to remove lodash clamp which seems to cause an issue
-export function clamp(value, boundOne, boundTwo) {
-    if (!boundTwo) {
-        return Math.max(value, boundOne) === boundOne ? value : boundOne;
-    }
-    else if (Math.min(value, boundOne) === value) {
-        return boundOne;
-    }
-    else if (Math.max(value, boundTwo) === value) {
-        return boundTwo;
-    }
-    return value;
-}
 export function extractColsFromText(text) {
     // rowData.columnName => columnName
     const regex = /\[rowData\.(.*?)\]/g;
@@ -212,9 +180,6 @@ export const Helper = {
     returnItemCount,
     isInputNullOrEmpty,
     isInputNotNullOrEmpty,
-    roundNumber,
-    roundNumberTo4dp,
-    clamp,
     extractColsFromText,
     replaceAll,
     extractContextKeysFromText,

package/src/Utilities/Helpers/{QuickSearchStyleHelper.js → QuickSearchHelper.js}

@@ -1,6 +1,6 @@
 import { QUICK_SEARCH_DEFAULT_CURRENT_TEXT_MATCH_STYLE, QUICK_SEARCH_DEFAULT_TEXT_MATCH_STYLE, } from '../../Redux/ActionsReducers/QuickSearchRedux';
 import { convertAdaptableStyleToCSS } from './StyleHelper';
-import kebabCase from '../utils/kebabCase';
+import { kebabCase } from '../Extensions/StringExtensions';
 const QUICK_SEARCH_FIND_CSS_KEYS = [
     'backgroundColor',
     'color',

package/src/Utilities/Helpers/{ScheduleHelper.d.ts → Scheduling/ScheduleHelper.d.ts}

@@ -1,4 +1,4 @@
-import { Schedule, Weekday } from '../../AdaptableState/Common/Schedule';
+import { Schedule, Weekday } from '../../../AdaptableState/Common/Schedule';
 export type ScheduleRecurrencePreset = 'daily' | 'weekdays' | 'selectedDays' | 'monthly' | 'custom';
 export declare function buildCronExpression(preset: ScheduleRecurrencePreset, hour: number, minute: number, options?: {
     days?: Weekday[];

package/src/Utilities/Helpers/{ScheduleHelper.js → Scheduling/ScheduleHelper.js}

@@ -1,5 +1,5 @@
 import { parseExpression } from 'cron-parser';
-import StringExtensions from '../Extensions/StringExtensions';
+import StringExtensions from '../../Extensions/StringExtensions';
 const WEEKDAY_TO_CRON = {
     Sunday: 0,
     Monday: 1,

package/src/Utilities/Helpers/{ScheduleJobManager.d.ts → Scheduling/ScheduleJobManager.d.ts}

@@ -1,4 +1,4 @@
-import { Schedule } from '../../AdaptableState/Common/Schedule';
+import { Schedule } from '../../../AdaptableState/Common/Schedule';
 export interface ScheduleJobManagerConfig<T> {
     getActiveItems: () => T[];
     getSchedule: (item: T) => Schedule | undefined;

package/src/Utilities/Helpers/{ScheduleJobRunner.d.ts → Scheduling/ScheduleJobRunner.d.ts}

@@ -1,4 +1,4 @@
-import { Schedule } from '../../AdaptableState/Common/Schedule';
+import { Schedule } from '../../../AdaptableState/Common/Schedule';
 export interface ScheduleJob {
     cancel: () => void;
 }

package/src/Utilities/Helpers/{ScheduledAlertHelper.d.ts → Scheduling/ScheduledAlertHelper.d.ts}

@@ -1,4 +1,4 @@
-import { AlertButtonForm, AlertDefinition, RuleAlertProperties, RuleBasedAlertDefinition, ScheduledAlertDefinition } from '../../AdaptableState/AlertState';
+import { AlertButtonForm, AlertDefinition, RuleAlertProperties, RuleBasedAlertDefinition, ScheduledAlertDefinition } from '../../../AdaptableState/AlertState';
 export declare function isScheduledAlertDefinition(alert: AlertDefinition | undefined | null): alert is ScheduledAlertDefinition;
 export declare function isRuleBasedAlertDefinition(alert: AlertDefinition | undefined | null): alert is RuleBasedAlertDefinition;
 export declare function getRuleAlertProperties(alert: AlertDefinition | undefined | null): RuleAlertProperties | undefined;

package/src/Utilities/Helpers/{ScheduledAlertHelper.js → Scheduling/ScheduledAlertHelper.js}

@@ -1,7 +1,7 @@
-import ObjectFactory from '../ObjectFactory';
-import { EMPTY_STRING } from '../Constants/GeneralConstants';
-import { ALERT_DEFAULT_MESSAGE_TYPE } from '../Constants/ObjectDefaultConstants';
-import { createUuid } from '../../AdaptableState/Uuid';
+import ObjectFactory from '../../ObjectFactory';
+import { EMPTY_STRING } from '../../Constants/GeneralConstants';
+import { ALERT_DEFAULT_MESSAGE_TYPE } from '../../Constants/ObjectDefaultConstants';
+import { createUuid } from '../../../AdaptableState/Uuid';
 export function isScheduledAlertDefinition(alert) {
     return alert != null && 'Schedule' in alert;
 }

package/src/Utilities/Helpers/{ScheduledJobsMiddlewareHelper.d.ts → Scheduling/ScheduledJobsMiddlewareHelper.d.ts}

@@ -1,3 +1,3 @@
-import { IAdaptable } from '../../AdaptableInterfaces/IAdaptable';
+import { IAdaptable } from '../../../AdaptableInterfaces/IAdaptable';
 export declare function refreshScheduledAlertJobs(adaptable: IAdaptable): void;
 export declare function refreshScheduledReportJobs(adaptable: IAdaptable): void;

package/src/Utilities/Helpers/{ScheduledJobsMiddlewareHelper.js → Scheduling/ScheduledJobsMiddlewareHelper.js}

@@ -1,4 +1,4 @@
-import * as ModuleConstants from '../Constants/ModuleConstants';
+import * as ModuleConstants from '../../Constants/ModuleConstants';
 export function refreshScheduledAlertJobs(adaptable) {
     const alertModule = adaptable.adaptableModules.get(ModuleConstants.AlertModuleId);
     alertModule?.setUpScheduledAlertJobs?.();

package/src/Utilities/Helpers/{ScheduledReportHelper.d.ts → Scheduling/ScheduledReportHelper.d.ts}

@@ -1,4 +1,4 @@
-import { ExportState, ReportNameType, ReportSchedule } from '../../AdaptableState/ExportState';
+import { ExportState, ReportNameType, ReportSchedule } from '../../../AdaptableState/ExportState';
 export declare function reportScheduleToSchedule(reportSchedule: {
     ReportName?: string;
     ScheduleType?: string;

package/src/Utilities/Helpers/{ScheduledReportHelper.js → Scheduling/ScheduledReportHelper.js}

@@ -1,4 +1,4 @@
-import { createUuid } from '../../AdaptableState/Uuid';
+import { createUuid } from '../../../AdaptableState/Uuid';
 export function reportScheduleToSchedule(reportSchedule) {
     const { ReportName: reportName, ScheduleType: _scheduleType, ...schedule } = reportSchedule;
     return {

package/src/Utilities/Helpers/SettingsPanelHelper.d.ts

@@ -0,0 +1,5 @@
+import { AdaptableApi } from '../../Api/AdaptableApi';
+import { SettingsPanelNavigation, SettingsPanelNavigationGroup, SettingsPanelOptions } from '../../AdaptableOptions/SettingsPanelOptions';
+export declare const DEFAULT_SETTINGS_PANEL_NAVIGATION_GROUPS: SettingsPanelNavigationGroup[];
+export declare const buildDefaultSettingsPanelNavigation: (customPanelNames?: string[]) => SettingsPanelNavigation;
+export declare const resolveSettingsPanelNavigation: (api: AdaptableApi, settingsPanelOptions: SettingsPanelOptions) => SettingsPanelNavigation;

package/src/Utilities/{Defaults/DefaultSettingsPanel.js → Helpers/SettingsPanelHelper.js}

@@ -45,3 +45,17 @@ export const buildDefaultSettingsPanelNavigation = (customPanelNames = []) => {
     }
     return { groups };
 };
+const cloneSettingsPanelNavigation = (navigation) => ({
+    groups: navigation.groups.map((group) => ({
+        label: group.label,
+        items: [...group.items],
+    })),
+});
+export const resolveSettingsPanelNavigation = (api, settingsPanelOptions) => {
+    const defaultNavigation = buildDefaultSettingsPanelNavigation(settingsPanelOptions.customSettingsPanels?.map((panel) => panel.name) ?? []);
+    if (!settingsPanelOptions.navigation) {
+        return defaultNavigation;
+    }
+    const context = api.internalApi.buildBaseContext();
+    return settingsPanelOptions.navigation(context, cloneSettingsPanelNavigation(defaultNavigation));
+};

package/src/Utilities/Helpers/StyledColumns/BarStylesHelper.d.ts

@@ -0,0 +1,63 @@
+import { BarStyleCellTextHorizontalAlignment, BarStyleCellTextLayout, BarStyleCellTextPlacement, BarStyleCellTextProperties, BarStyleCellTextVerticalAlignment } from '../../../AdaptableState/StyledColumns/Common/BarStyleProperties';
+import { CellTextOption, CellTextOptions } from '../../../AdaptableState/StyledColumns/Common/CellTextOptions';
+export type BarStyleCellTextLabels = {
+    cellValue?: string;
+    percentage?: string;
+};
+export declare const resolveBarStyleCellTextLayout: (props: BarStyleCellTextProperties | undefined) => BarStyleCellTextLayout;
+/** True when any value is configured for display. */
+export declare const hasBarStyleCellTextConfigured: (props: BarStyleCellTextProperties | undefined) => boolean;
+/** Set of value tokens that currently have a placement. */
+export declare const getActiveBarStyleCellTextTokens: (props: BarStyleCellTextProperties | undefined) => CellTextOptions;
+export declare const mergeBarStyleCellTextProperties: (current: BarStyleCellTextProperties | undefined, patch: Partial<BarStyleCellTextProperties>) => BarStyleCellTextProperties | undefined;
+/**
+ * Set or clear a value's placement. Passing `placement: undefined` removes the value.
+ */
+export declare const setBarStyleCellTextPlacement: (current: BarStyleCellTextProperties | undefined, token: CellTextOption, placement: BarStyleCellTextPlacement | undefined) => BarStyleCellTextProperties | undefined;
+/**
+ * Patch a single axis of a value's placement (creating the value with defaults if
+ * needed). Used by the wizard's placement pickers.
+ */
+export declare const patchBarStyleCellTextPlacement: (current: BarStyleCellTextProperties | undefined, token: CellTextOption, patch: Partial<BarStyleCellTextPlacement>) => BarStyleCellTextProperties | undefined;
+/**
+ * Toggle whether a value is displayed. When turning on a previously-hidden
+ * value we use the default placement (Left / Below).
+ */
+export declare const toggleBarStyleCellTextToken: (current: BarStyleCellTextProperties | undefined, token: CellTextOption, show: boolean) => {
+    CellTextProperties: BarStyleCellTextProperties | undefined;
+};
+export declare const buildBarStyleCellTextLabels: (props: BarStyleCellTextProperties | undefined, cellValueLabel: string | undefined, percentageLabel: string | undefined) => BarStyleCellTextLabels;
+export declare const hasBarStyleCellTextLabels: (labels: BarStyleCellTextLabels) => boolean;
+/** Join active labels with a space, Cell Value first then Percent Value. */
+export declare const joinBarStyleCellTextLabels: (labels: BarStyleCellTextLabels) => string;
+export type BarStyleCellTextSlotEntry = {
+    vertical: BarStyleCellTextVerticalAlignment;
+    horizontal: BarStyleCellTextHorizontalAlignment;
+    /** Labels in render order (Cell Value first, then Percent Value). */
+    parts: string[];
+    /** The joined text, ready to render. */
+    text: string;
+};
+/**
+ * Resolve which placements are populated and what text goes in each cell of
+ * the 3 × 3 grid. Empty slots are omitted. Two values landing on the same
+ * (vertical, horizontal) slot are concatenated with a single space, Cell
+ * Value before Percent Value.
+ */
+export declare const resolveBarStyleCellTextSlots: (props: BarStyleCellTextProperties | undefined, labels: BarStyleCellTextLabels) => BarStyleCellTextSlotEntry[];
+export type BarStyleCellTextSlotPresence = {
+    hasAbove: boolean;
+    hasBelow: boolean;
+    hasMerged: boolean;
+};
+export declare const getBarStyleCellTextSlotPresence: (props: BarStyleCellTextProperties | undefined) => BarStyleCellTextSlotPresence;
+export declare const formatBarStyleCellTextLayoutSummary: (layout: BarStyleCellTextLayout) => string | undefined;
+export type MountBarStyleCellTextArgs = {
+    wrapperEl: HTMLElement;
+    mergedOverlayEl?: HTMLElement;
+    textClassName: string;
+    cellTextProperties?: BarStyleCellTextProperties;
+    labels: BarStyleCellTextLabels;
+    mergedPointerEventsNone?: boolean;
+};
+export declare const mountBarStyleCellText: (args: MountBarStyleCellTextArgs) => void;

package/src/Utilities/Helpers/StyledColumns/BarStylesHelper.js

@@ -0,0 +1,317 @@
+/** Default placement applied to a value whose Horizontal/Vertical were omitted. */
+const DEFAULT_PLACEMENT = {
+    Horizontal: 'Left',
+    Vertical: 'Below',
+};
+const HORIZONTAL_VALUES = ['Left', 'Center', 'Right'];
+const VERTICAL_VALUES = ['Above', 'Below', 'Merged'];
+const isHorizontal = (value) => typeof value === 'string' && HORIZONTAL_VALUES.includes(value);
+const isVertical = (value) => typeof value === 'string' && VERTICAL_VALUES.includes(value);
+/** Normalise a placement, applying defaults for missing axes. */
+const sanitizePlacement = (placement) => ({
+    Horizontal: isHorizontal(placement?.Horizontal)
+        ? placement.Horizontal
+        : DEFAULT_PLACEMENT.Horizontal,
+    Vertical: isVertical(placement?.Vertical) ? placement.Vertical : DEFAULT_PLACEMENT.Vertical,
+});
+/** Returns a layout with only the values that are actually present, defaults filled in. */
+const sanitizeCellTextLayout = (layout) => {
+    const result = {};
+    if (layout?.CellValue) {
+        result.CellValue = sanitizePlacement(layout.CellValue);
+    }
+    if (layout?.PercentValue) {
+        result.PercentValue = sanitizePlacement(layout.PercentValue);
+    }
+    return result;
+};
+export const resolveBarStyleCellTextLayout = (props) => sanitizeCellTextLayout(props?.CellTextLayout);
+/** True when any value is configured for display. */
+export const hasBarStyleCellTextConfigured = (props) => {
+    const layout = resolveBarStyleCellTextLayout(props);
+    return Boolean(layout.CellValue || layout.PercentValue);
+};
+/** Set of value tokens that currently have a placement. */
+export const getActiveBarStyleCellTextTokens = (props) => {
+    const layout = resolveBarStyleCellTextLayout(props);
+    const tokens = [];
+    if (layout.CellValue) {
+        tokens.push('CellValue');
+    }
+    if (layout.PercentValue) {
+        tokens.push('PercentageValue');
+    }
+    return tokens;
+};
+export const mergeBarStyleCellTextProperties = (current, patch) => {
+    const merged = { ...current, ...patch };
+    if (merged.CellTextLayout) {
+        merged.CellTextLayout = sanitizeCellTextLayout(merged.CellTextLayout);
+        if (!merged.CellTextLayout.CellValue && !merged.CellTextLayout.PercentValue) {
+            delete merged.CellTextLayout;
+        }
+    }
+    if (!merged.CellTextLayout) {
+        return undefined;
+    }
+    return merged;
+};
+/**
+ * Set or clear a value's placement. Passing `placement: undefined` removes the value.
+ */
+export const setBarStyleCellTextPlacement = (current, token, placement) => {
+    const layout = resolveBarStyleCellTextLayout(current);
+    const next = { ...layout };
+    const key = token === 'CellValue' ? 'CellValue' : 'PercentValue';
+    if (placement) {
+        next[key] = sanitizePlacement(placement);
+    }
+    else {
+        delete next[key];
+    }
+    return mergeBarStyleCellTextProperties(current, { CellTextLayout: next });
+};
+/**
+ * Patch a single axis of a value's placement (creating the value with defaults if
+ * needed). Used by the wizard's placement pickers.
+ */
+export const patchBarStyleCellTextPlacement = (current, token, patch) => {
+    const layout = resolveBarStyleCellTextLayout(current);
+    const key = token === 'CellValue' ? 'CellValue' : 'PercentValue';
+    const existing = layout[key];
+    const nextPlacement = {
+        ...(existing ?? DEFAULT_PLACEMENT),
+        ...patch,
+    };
+    return setBarStyleCellTextPlacement(current, token, nextPlacement);
+};
+/**
+ * Toggle whether a value is displayed. When turning on a previously-hidden
+ * value we use the default placement (Left / Below).
+ */
+export const toggleBarStyleCellTextToken = (current, token, show) => {
+    const layout = resolveBarStyleCellTextLayout(current);
+    const key = token === 'CellValue' ? 'CellValue' : 'PercentValue';
+    if (show && !layout[key]) {
+        return {
+            CellTextProperties: setBarStyleCellTextPlacement(current, token, DEFAULT_PLACEMENT),
+        };
+    }
+    if (!show && layout[key]) {
+        return {
+            CellTextProperties: setBarStyleCellTextPlacement(current, token, undefined),
+        };
+    }
+    return { CellTextProperties: current };
+};
+export const buildBarStyleCellTextLabels = (props, cellValueLabel, percentageLabel) => {
+    const layout = resolveBarStyleCellTextLayout(props);
+    const labels = {};
+    if (layout.CellValue && cellValueLabel != undefined) {
+        labels.cellValue = cellValueLabel;
+    }
+    if (layout.PercentValue && percentageLabel != undefined) {
+        labels.percentage = percentageLabel;
+    }
+    return labels;
+};
+export const hasBarStyleCellTextLabels = (labels) => Boolean(labels.cellValue || labels.percentage);
+/** Join active labels with a space, Cell Value first then Percent Value. */
+export const joinBarStyleCellTextLabels = (labels) => {
+    const parts = [];
+    if (labels.cellValue)
+        parts.push(labels.cellValue);
+    if (labels.percentage)
+        parts.push(labels.percentage);
+    return parts.join(' ');
+};
+/**
+ * Resolve which placements are populated and what text goes in each cell of
+ * the 3 × 3 grid. Empty slots are omitted. Two values landing on the same
+ * (vertical, horizontal) slot are concatenated with a single space, Cell
+ * Value before Percent Value.
+ */
+export const resolveBarStyleCellTextSlots = (props, labels) => {
+    const layout = resolveBarStyleCellTextLayout(props);
+    // Iteration order matters when both values share a slot: Cell Value first,
+    // then Percent Value (matches the legacy "joined" behaviour).
+    const candidates = [];
+    if (layout.CellValue && labels.cellValue) {
+        candidates.push({
+            placement: sanitizePlacement(layout.CellValue),
+            text: labels.cellValue,
+        });
+    }
+    if (layout.PercentValue && labels.percentage) {
+        candidates.push({
+            placement: sanitizePlacement(layout.PercentValue),
+            text: labels.percentage,
+        });
+    }
+    const slotMap = new Map();
+    for (const { placement, text } of candidates) {
+        const key = `${placement.Vertical}|${placement.Horizontal}`;
+        const existing = slotMap.get(key);
+        if (existing) {
+            existing.parts.push(text);
+            existing.text = existing.parts.join(' ');
+        }
+        else {
+            slotMap.set(key, {
+                vertical: placement.Vertical,
+                horizontal: placement.Horizontal,
+                parts: [text],
+                text,
+            });
+        }
+    }
+    return Array.from(slotMap.values());
+};
+export const getBarStyleCellTextSlotPresence = (props) => {
+    const layout = resolveBarStyleCellTextLayout(props);
+    const verticals = new Set();
+    if (layout.CellValue)
+        verticals.add(sanitizePlacement(layout.CellValue).Vertical);
+    if (layout.PercentValue)
+        verticals.add(sanitizePlacement(layout.PercentValue).Vertical);
+    return {
+        hasAbove: verticals.has('Above'),
+        hasBelow: verticals.has('Below'),
+        hasMerged: verticals.has('Merged'),
+    };
+};
+// ---------------------------------------------------------------------------
+// Summary formatting
+// ---------------------------------------------------------------------------
+const HORIZONTAL_LABEL = {
+    Left: 'Left',
+    Center: 'Center',
+    Right: 'Right',
+};
+const VERTICAL_LABEL = {
+    Above: 'Above',
+    Below: 'Below',
+    Merged: 'Merged',
+};
+const formatTokenLabel = (token) => token === 'CellValue' ? 'Cell Value' : 'Percent Value';
+const formatPlacementSummary = (placement) => {
+    const { Horizontal, Vertical } = sanitizePlacement(placement);
+    return `${VERTICAL_LABEL[Vertical]}-${HORIZONTAL_LABEL[Horizontal]}`;
+};
+export const formatBarStyleCellTextLayoutSummary = (layout) => {
+    const parts = [];
+    if (layout.CellValue) {
+        parts.push(`${formatTokenLabel('CellValue')}: ${formatPlacementSummary(layout.CellValue)}`);
+    }
+    if (layout.PercentValue) {
+        parts.push(`${formatTokenLabel('PercentageValue')}: ${formatPlacementSummary(layout.PercentValue)}`);
+    }
+    return parts.length ? parts.join('; ') : undefined;
+};
+// ---------------------------------------------------------------------------
+// DOM mount
+// ---------------------------------------------------------------------------
+const HORIZONTAL_FLEX_JUSTIFY = {
+    Left: 'flex-start',
+    Center: 'center',
+    Right: 'flex-end',
+};
+const HORIZONTAL_TEXT_ALIGN = {
+    Left: 'left',
+    Center: 'center',
+    Right: 'right',
+};
+const createCellTextRow = (slots, textClassName, compact) => {
+    const row = document.createElement('div');
+    row.className = textClassName;
+    row.style.display = 'flex';
+    row.style.flexDirection = 'row';
+    row.style.alignItems = 'center';
+    row.style.width = '100%';
+    // When `Above` AND `Below` are both populated, two default-size text rows
+    // would squeeze the bar to 0 on a standard ~28-40px cell, so the caller
+    // asks for a compact band (smaller font + tighter line-height).
+    // Otherwise we render at the inherited cell font for legibility.
+    if (compact) {
+        row.style.fontSize = '0.75em';
+        row.style.lineHeight = '1';
+    }
+    else {
+        row.style.lineHeight = '1.2';
+    }
+    row.style.flex = '0 0 auto';
+    row.style.gap = '4px';
+    // Render fixed Left / Center / Right cells so spacing is stable even when
+    // only one or two slots are present.
+    for (const horizontal of HORIZONTAL_VALUES) {
+        const slot = slots.find((s) => s.horizontal === horizontal);
+        const cell = document.createElement('span');
+        cell.style.flex = '1';
+        cell.style.minWidth = '0';
+        cell.style.textAlign = HORIZONTAL_TEXT_ALIGN[horizontal];
+        cell.style.display = 'flex';
+        cell.style.justifyContent = HORIZONTAL_FLEX_JUSTIFY[horizontal];
+        cell.style.alignItems = 'center';
+        if (slot) {
+            cell.textContent = slot.text;
+        }
+        row.append(cell);
+    }
+    // Suppress the dummy row in the rare case where every slot for this band is
+    // empty (e.g. the only label is empty string). `String(...)` because text
+    // may arrive as a number when `params.formatValue` is undefined for a
+    // numeric column — `(11).length` is `undefined`, which would otherwise
+    // wrongly trip the empty-row branch.
+    if (!slots.some((s) => String(s.text ?? '').length)) {
+        row.style.display = 'none';
+    }
+    return row;
+};
+export const mountBarStyleCellText = (args) => {
+    const { cellTextProperties, labels, wrapperEl, textClassName } = args;
+    if (!hasBarStyleCellTextConfigured(cellTextProperties) || !hasBarStyleCellTextLabels(labels)) {
+        return;
+    }
+    const slots = resolveBarStyleCellTextSlots(cellTextProperties, labels);
+    if (!slots.length) {
+        return;
+    }
+    const mergedOverlayEl = args.mergedOverlayEl ?? wrapperEl;
+    const mergedPointerEventsNone = args.mergedPointerEventsNone ?? mergedOverlayEl === wrapperEl;
+    const slotsByVertical = {
+        Above: slots.filter((s) => s.vertical === 'Above'),
+        Below: slots.filter((s) => s.vertical === 'Below'),
+        Merged: slots.filter((s) => s.vertical === 'Merged'),
+    };
+    // Compact when Cell Value and Percent Value have *different* verticals
+    // (i.e. the two tokens claim two separate bands of vertical space). When
+    // they share a vertical band — or when only one token is configured —
+    // we have room for the full-size font.
+    const layout = resolveBarStyleCellTextLayout(cellTextProperties);
+    const compact = Boolean(layout.CellValue &&
+        layout.PercentValue &&
+        sanitizePlacement(layout.CellValue).Vertical !==
+            sanitizePlacement(layout.PercentValue).Vertical);
+    if (slotsByVertical.Above.length) {
+        const row = createCellTextRow(slotsByVertical.Above, textClassName, compact);
+        wrapperEl.prepend(row);
+    }
+    if (slotsByVertical.Below.length) {
+        const row = createCellTextRow(slotsByVertical.Below, textClassName, compact);
+        wrapperEl.append(row);
+    }
+    if (slotsByVertical.Merged.length) {
+        const row = createCellTextRow(slotsByVertical.Merged, textClassName, compact);
+        row.style.position = 'absolute';
+        row.style.top = '50%';
+        row.style.transform = 'translateY(-50%)';
+        row.style.left = '0';
+        row.style.right = '0';
+        row.style.paddingLeft = '5px';
+        row.style.paddingRight = '5px';
+        if (mergedPointerEventsNone) {
+            row.style.pointerEvents = 'none';
+        }
+        mergedOverlayEl.append(row);
+    }
+};

package/src/Utilities/Helpers/{StyledColumnGradientHelper.d.ts → StyledColumns/GradientStyleHelper.d.ts}

@@ -1,7 +1,9 @@
 import type { CSSProperties } from 'react';
 import type { IRowNode } from 'ag-grid-community';
-import { CellColorRange, GradientStyle, NumericStyledColumn, StyledColumn } from '../../AdaptableState/StyledColumnState';
-import { AdaptableApi } from '../../Api/AdaptableApi';
+import { StyledColumn } from '../../../AdaptableState/StyledColumnState';
+import { CellColorRange, NumericStyledColumn } from '../../../AdaptableState/StyledColumns/Common/NumericStyledColumn';
+import { GradientStyle } from '../../../AdaptableState/StyledColumns/GradientStyle';
+import { AdaptableApi } from '../../../Api/AdaptableApi';
 /**
  * Default alpha at the **low** end of a Gradient range when `MinAlpha` is unset.
  * Slightly above zero so the bottom-edge value of every range still shows its

package/src/Utilities/Helpers/{StyledColumnGradientHelper.js → StyledColumns/GradientStyleHelper.js}

@@ -1,7 +1,7 @@
 import tinycolor from 'tinycolor2';
-import { convertAdaptableStyleToCSS } from './StyleHelper';
-import { getAutoContrastTextColor, getVariableColor } from './StyleHelper';
-import clamp from '../utils/clamp';
+import { convertAdaptableStyleToCSS } from '../StyleHelper';
+import { getAutoContrastTextColor, getVariableColor } from '../StyleHelper';
+import { clamp } from '../../Extensions/NumberExtensions';
 /**
  * Default alpha at the **low** end of a Gradient range when `MinAlpha` is unset.
  * Slightly above zero so the bottom-edge value of every range still shows its

package/src/Utilities/Helpers/{IconStylePresets.d.ts → StyledColumns/IconStyleHelper.d.ts}

@@ -1,4 +1,9 @@
-import { IconStyleBuiltInPreset, IconStyleMapping } from '../../AdaptableState/StyledColumnState';
+import { IconStyleBuiltInPreset, IconStyleMapping } from '../../../AdaptableState/StyledColumns/IconStyle';
+/**
+ * Icon Column Style resolves one key → glyph per scalar cell value; AdapTable
+ * array column types are not supported (use Badge Style for per-element visuals).
+ */
+export declare function isUnsupportedColumnDataTypeForIconStyle(dataType?: string): boolean;
 export declare const ICON_STYLE_PRESETS: Record<IconStyleBuiltInPreset, IconStyleMapping[]>;
 /** Returns a fresh copy of the mappings for a given preset. */
 export declare const getIconStylePresetMappings: (preset: IconStyleBuiltInPreset) => IconStyleMapping[];

package/src/Utilities/Helpers/{IconStylePresets.js → StyledColumns/IconStyleHelper.js}

@@ -1,3 +1,18 @@
+/**
+ * Icon Column Style resolves one key → glyph per scalar cell value; AdapTable
+ * array column types are not supported (use Badge Style for per-element visuals).
+ */
+export function isUnsupportedColumnDataTypeForIconStyle(dataType) {
+    switch (dataType) {
+        case 'textArray':
+        case 'numberArray':
+        case 'tupleArray':
+        case 'objectArray':
+            return true;
+        default:
+            return false;
+    }
+}
 /**
  * Built-in {@link IconStyle} mapping presets.
  *

package/src/Utilities/Helpers/{percentBarPreviewHelper.d.ts → StyledColumns/PercentBarStyleHelper.d.ts}

@@ -1,4 +1,5 @@
-import { PercentBarStyle, StyledColumn } from '../../AdaptableState/StyledColumnState';
+import { StyledColumn } from '../../../AdaptableState/StyledColumnState';
+import { PercentBarStyle } from '../../../AdaptableState/StyledColumns/PercentBarStyle';
 export declare const hasPercentBarRangesConfigured: (pb: PercentBarStyle | undefined) => boolean;
 /** Illustrative scale for preview — shows negatives when origin is Auto or Zero. */
 export declare const getPercentBarPreviewScale: (pb: PercentBarStyle) => {