@adaptabletools/adaptable-cjs 23.0.0-canary.4 → 23.0.0-canary.6

package/src/Utilities/Helpers/StyledColumnGradientHelper.js

@@ -1,9 +1,16 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.DEFAULT_GRADIENT_MAX_ALPHA = exports.DEFAULT_GRADIENT_MIN_ALPHA = void 0;
+exports.getGradientPreviewCellStyle = exports.getGradientPreviewSampleValues = exports.getZeroCentredGradientPreviewValues = exports.ZERO_CENTRED_GRADIENT_PREVIEW_VALUES = exports.ZERO_CENTRED_PREVIEW_SCALE_MAX = exports.ZERO_CENTRED_PREVIEW_SCALE_MIN = exports.STYLED_COLUMN_PREVIEW_SAMPLE_COUNT = exports.hasGradientRangesConfigured = exports.DEFAULT_GRADIENT_MAX_ALPHA = exports.DEFAULT_GRADIENT_MIN_ALPHA = void 0;
+exports.isDivergingZeroCellRanges = isDivergingZeroCellRanges;
+exports.isZeroCentredGradientStyle = isZeroCentredGradientStyle;
 exports.expandGradientCellRanges = expandGradientCellRanges;
 exports.gradientStyleRangeLookupValueType = gradientStyleRangeLookupValueType;
 exports.isNegativeZeroCentredBand = isNegativeZeroCentredBand;
+const tslib_1 = require("tslib");
+const tinycolor2_1 = tslib_1.__importDefault(require("tinycolor2"));
+const StyleHelper_1 = require("./StyleHelper");
+const StyleHelper_2 = require("./StyleHelper");
+const clamp_1 = tslib_1.__importDefault(require("../utils/clamp"));
 /**
  * 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
@@ -14,6 +21,210 @@ exports.DEFAULT_GRADIENT_MIN_ALPHA = 0.15;
  * Default alpha at the **high** end of a Gradient range when `MaxAlpha` is unset.
  */
 exports.DEFAULT_GRADIENT_MAX_ALPHA = 1;
+const hasGradientRangesConfigured = (gs) => !!(gs?.ZeroCentred || gs?.CellRanges?.length || gs?.ColumnComparison);
+exports.hasGradientRangesConfigured = hasGradientRangesConfigured;
+const evenlySpacedValues = (min, max, count) => {
+    if (count <= 1) {
+        return [min];
+    }
+    const step = (max - min) / (count - 1);
+    return Array.from({ length: count }, (_, i) => min + step * i);
+};
+/** Number of sample cells shown in Gradient / Percent Bar style previews. */
+exports.STYLED_COLUMN_PREVIEW_SAMPLE_COUNT = 6;
+/** Illustrative zero-centred scale endpoints for preview geometry. */
+exports.ZERO_CENTRED_PREVIEW_SCALE_MIN = -20;
+exports.ZERO_CENTRED_PREVIEW_SCALE_MAX = 20;
+/** @deprecated Use {@link getZeroCentredGradientPreviewValues} — kept for callers using endpoints. */
+exports.ZERO_CENTRED_GRADIENT_PREVIEW_VALUES = evenlySpacedValues(exports.ZERO_CENTRED_PREVIEW_SCALE_MIN, exports.ZERO_CENTRED_PREVIEW_SCALE_MAX, exports.STYLED_COLUMN_PREVIEW_SAMPLE_COUNT);
+const getZeroCentredGradientPreviewValues = () => evenlySpacedValues(exports.ZERO_CENTRED_PREVIEW_SCALE_MIN, exports.ZERO_CENTRED_PREVIEW_SCALE_MAX, exports.STYLED_COLUMN_PREVIEW_SAMPLE_COUNT);
+exports.getZeroCentredGradientPreviewValues = getZeroCentredGradientPreviewValues;
+function isDivergingZeroCellRanges(ranges) {
+    if (!ranges || ranges.length !== 2) {
+        return false;
+    }
+    const [a, b] = ranges;
+    return a.Max === 0 && b.Min === 0;
+}
+function isZeroCentredGradientStyle(gs) {
+    return !!(gs.ZeroCentred || isDivergingZeroCellRanges(gs.CellRanges));
+}
+/**
+ * Sample cell values for gradient preview strips — spread across the effective scale.
+ */
+const getGradientPreviewSampleValues = (styledColumn, api) => {
+    const gs = styledColumn.GradientStyle;
+    if (!gs || !(0, exports.hasGradientRangesConfigured)(gs)) {
+        return [];
+    }
+    if (isZeroCentredGradientStyle(gs)) {
+        return (0, exports.getZeroCentredGradientPreviewValues)();
+    }
+    if (gs.ColumnComparison) {
+        const min = Number(gs.ColumnComparison.MinValue);
+        const max = Number(gs.ColumnComparison.MaxValue);
+        if (!Number.isNaN(min) && !Number.isNaN(max)) {
+            return evenlySpacedValues(min, max, exports.STYLED_COLUMN_PREVIEW_SAMPLE_COUNT);
+        }
+        return evenlySpacedValues(0, 100, exports.STYLED_COLUMN_PREVIEW_SAMPLE_COUNT);
+    }
+    const column = styledColumn.ColumnId
+        ? api.columnApi.getColumnWithColumnId(styledColumn.ColumnId)
+        : undefined;
+    if (!column) {
+        return evenlySpacedValues(0, 100, exports.STYLED_COLUMN_PREVIEW_SAMPLE_COUNT);
+    }
+    const colMin = api.styledColumnApi.internalApi.getMinValueForNumericColumn(column);
+    const colMax = api.styledColumnApi.internalApi.getMaxValueForNumericColumn(column);
+    if (colMin === colMax) {
+        return [colMin];
+    }
+    return evenlySpacedValues(colMin, colMax, exports.STYLED_COLUMN_PREVIEW_SAMPLE_COUNT);
+};
+exports.getGradientPreviewSampleValues = getGradientPreviewSampleValues;
+const getZeroCentredPreviewColors = (gradientStyle) => {
+    if (gradientStyle.ZeroCentred) {
+        return {
+            negative: gradientStyle.ZeroCentred.NegativeColor,
+            positive: gradientStyle.ZeroCentred.PositiveColor,
+        };
+    }
+    const ranges = gradientStyle.CellRanges;
+    if (isDivergingZeroCellRanges(ranges)) {
+        return {
+            negative: ranges[0].Color,
+            positive: ranges[1].Color,
+        };
+    }
+    return null;
+};
+/**
+ * Zero-centred preview uses a fixed -20…20 illustrative scale so negative
+ * colours always appear — independent of whether the column currently has
+ * negative values (Col-Min may be above zero today).
+ */
+const getZeroCentredGradientPreviewCellStyle = (cellValue, gradientStyle) => {
+    const colors = getZeroCentredPreviewColors(gradientStyle);
+    if (!colors) {
+        return {};
+    }
+    const previewMin = exports.ZERO_CENTRED_PREVIEW_SCALE_MIN;
+    const previewMax = exports.ZERO_CENTRED_PREVIEW_SCALE_MAX;
+    const syntheticRanges = [
+        { Min: previewMin, Max: 0, Color: colors.negative },
+        { Min: 0, Max: previewMax, Color: colors.positive },
+    ];
+    let matchingRange = null;
+    for (const range of syntheticRanges) {
+        const min = range.Min;
+        const max = range.Max;
+        if (cellValue >= min && cellValue <= max) {
+            matchingRange = range;
+            break;
+        }
+    }
+    if (!matchingRange) {
+        return {};
+    }
+    const min = matchingRange.Min;
+    const max = matchingRange.Max;
+    const reverseGradient = matchingRange.Min === previewMin && matchingRange.Max === 0;
+    const minAlphaBound = gradientStyle.MinAlpha ?? exports.DEFAULT_GRADIENT_MIN_ALPHA;
+    const maxAlphaBound = gradientStyle.MaxAlpha ?? exports.DEFAULT_GRADIENT_MAX_ALPHA;
+    const lo = Math.min((0, clamp_1.default)(minAlphaBound, 0, 1), (0, clamp_1.default)(maxAlphaBound, 0, 1));
+    const hi = Math.max((0, clamp_1.default)(minAlphaBound, 0, 1), (0, clamp_1.default)(maxAlphaBound, 0, 1));
+    const span = Math.abs(max - min);
+    let t = span === 0 ? 0.5 : (Number(cellValue) - min) / span;
+    t = (0, clamp_1.default)(t, 0, 1);
+    if (reverseGradient) {
+        t = 1 - t;
+    }
+    const alpha = Number((lo + t * (hi - lo)).toPrecision(4));
+    let style = {};
+    const bg = (0, tinycolor2_1.default)((0, StyleHelper_2.getVariableColor)(matchingRange.Color)).setAlpha(alpha);
+    style.backgroundColor = bg.toRgbString();
+    if (gradientStyle.AutoContrastText) {
+        style.color = bg.getLuminance() > 0.45 ? '#111111' : '#ffffff';
+    }
+    const autoContrastColor = gradientStyle.AutoContrastText && style.color ? style.color : undefined;
+    if (gradientStyle.Font) {
+        style = { ...style, ...(0, StyleHelper_1.convertAdaptableStyleToCSS)(gradientStyle.Font) };
+    }
+    if (autoContrastColor) {
+        style.color = autoContrastColor;
+    }
+    if (gradientStyle.Font?.Alignment && gradientStyle.Font.Alignment !== 'Default') {
+        style.textAlign = gradientStyle.Font.Alignment.toLowerCase();
+    }
+    return style;
+};
+/**
+ * Cell CSS for gradient preview — mirrors `AgGridColumnAdapter.getStyledColumnStyle` gradient path.
+ */
+const getGradientPreviewCellStyle = (cellValue, styledColumn, api, rowNode) => {
+    const gradientStyle = styledColumn.GradientStyle;
+    if (!gradientStyle || !(0, exports.hasGradientRangesConfigured)(gradientStyle)) {
+        return {};
+    }
+    if (isZeroCentredGradientStyle(gradientStyle)) {
+        return getZeroCentredGradientPreviewCellStyle(cellValue, gradientStyle);
+    }
+    const column = styledColumn.ColumnId
+        ? api.columnApi.getColumnWithColumnId(styledColumn.ColumnId)
+        : undefined;
+    if (!column) {
+        return {};
+    }
+    const node = rowNode ?? api.gridApi?.getRowNodeForIndex(0) ?? null;
+    const internalApi = api.styledColumnApi.internalApi;
+    let style = {};
+    const min = internalApi.getNumericStyleMinValue(styledColumn, column, node, cellValue);
+    const max = internalApi.getNumericStyleMaxValue(styledColumn, column, node, cellValue);
+    let cellBackColor;
+    let reverseGradient = false;
+    if (gradientStyle.ColumnComparison) {
+        cellBackColor = gradientStyle.ColumnComparison.Color;
+    }
+    else {
+        const matchingRange = internalApi.findRangeForColumn(expandGradientCellRanges(gradientStyle), column, gradientStyleRangeLookupValueType(gradientStyle), cellValue);
+        if (matchingRange) {
+            cellBackColor = matchingRange.Color;
+            reverseGradient =
+                (!!gradientStyle.ZeroCentred && isNegativeZeroCentredBand(matchingRange)) ||
+                    !!matchingRange.ReverseGradient;
+        }
+    }
+    const minAlphaBound = gradientStyle.MinAlpha ?? exports.DEFAULT_GRADIENT_MIN_ALPHA;
+    const maxAlphaBound = gradientStyle.MaxAlpha ?? exports.DEFAULT_GRADIENT_MAX_ALPHA;
+    const lo = Math.min((0, clamp_1.default)(minAlphaBound, 0, 1), (0, clamp_1.default)(maxAlphaBound, 0, 1));
+    const hi = Math.max((0, clamp_1.default)(minAlphaBound, 0, 1), (0, clamp_1.default)(maxAlphaBound, 0, 1));
+    const span = Math.abs(max - min);
+    let t = span === 0 ? 0.5 : (Number(cellValue) - min) / span;
+    t = (0, clamp_1.default)(t, 0, 1);
+    if (reverseGradient) {
+        t = 1 - t;
+    }
+    const alpha = Number((lo + t * (hi - lo)).toPrecision(4));
+    if (cellBackColor) {
+        const bg = (0, tinycolor2_1.default)((0, StyleHelper_2.getVariableColor)(cellBackColor)).setAlpha(alpha);
+        style.backgroundColor = bg.toRgbString();
+        if (gradientStyle.AutoContrastText) {
+            style.color = bg.getLuminance() > 0.45 ? '#111111' : '#ffffff';
+        }
+    }
+    const autoContrastColor = gradientStyle.AutoContrastText && style.color ? style.color : undefined;
+    if (gradientStyle.Font) {
+        style = { ...style, ...(0, StyleHelper_1.convertAdaptableStyleToCSS)(gradientStyle.Font) };
+    }
+    if (autoContrastColor) {
+        style.color = autoContrastColor;
+    }
+    if (gradientStyle.Font?.Alignment && gradientStyle.Font.Alignment !== 'Default') {
+        style.textAlign = gradientStyle.Font.Alignment.toLowerCase();
+    }
+    return style;
+};
+exports.getGradientPreviewCellStyle = getGradientPreviewCellStyle;
 /**
  * Effective cell ranges for gradient rendering / range lookup.
  * When `ZeroCentred` is set, expands to the canonical Col-Min…0 and 0…Col-Max bands.

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

@@ -0,0 +1,5 @@
+import { AdaptableTheme, SystemThemeEntry } from '../../AdaptableState/ThemeState';
+import { AdaptableLogger } from '../../agGrid/AdaptableLogger';
+export declare function isLegacySystemThemeObject(theme: SystemThemeEntry | AdaptableTheme): theme is AdaptableTheme;
+export declare function resolveSystemThemeDescription(name: string): string;
+export declare function systemThemeEntryToAdaptableTheme(theme: SystemThemeEntry | AdaptableTheme, logger?: AdaptableLogger): AdaptableTheme;

package/src/Utilities/Helpers/ThemeHelpers.js

@@ -0,0 +1,43 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.isLegacySystemThemeObject = isLegacySystemThemeObject;
+exports.resolveSystemThemeDescription = resolveSystemThemeDescription;
+exports.systemThemeEntryToAdaptableTheme = systemThemeEntryToAdaptableTheme;
+const themes_1 = require("../../themes");
+const logDeprecation_1 = require("../logDeprecation");
+const LEGACY_SYSTEM_THEME_PROPS = ['Description', 'CSSVariables', 'Variant'];
+function isLegacySystemThemeObject(theme) {
+    if (typeof theme === 'string') {
+        return false;
+    }
+    return LEGACY_SYSTEM_THEME_PROPS.some((prop) => prop in theme && theme[prop] !== undefined);
+}
+function resolveSystemThemeDescription(name) {
+    return themes_1.StaticThemes.find((staticTheme) => staticTheme.Name === name)?.Description ?? name;
+}
+function systemThemeEntryToAdaptableTheme(theme, logger) {
+    if (typeof theme === 'string') {
+        return {
+            Name: theme,
+            Description: resolveSystemThemeDescription(theme),
+        };
+    }
+    if (isLegacySystemThemeObject(theme)) {
+        if (logger) {
+            (0, logDeprecation_1.logDeprecation)(logger, 'ThemeState', 'SystemThemes', undefined, 'Passing a full AdaptableTheme object in SystemThemes is deprecated. Use a theme name string or SystemThemeOptions (Name with AgThemeMode / AgGridClassName only).');
+        }
+        return {
+            Name: theme.Name,
+            Description: theme.Description ?? resolveSystemThemeDescription(theme.Name),
+            AgThemeMode: theme.AgThemeMode,
+            AgGridClassName: theme.AgGridClassName,
+        };
+    }
+    const options = theme;
+    return {
+        Name: options.Name,
+        Description: resolveSystemThemeDescription(options.Name),
+        AgThemeMode: options.AgThemeMode,
+        AgGridClassName: options.AgGridClassName,
+    };
+}

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

@@ -0,0 +1,19 @@
+import { PercentBarStyle, StyledColumn } from '../../AdaptableState/StyledColumnState';
+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) => {
+    min: number;
+    max: number;
+};
+export declare const getPercentBarPreviewSampleValues: (pb: PercentBarStyle) => number[];
+export type PercentBarPreviewGeometry = {
+    barLeftPercent: number;
+    barWidthPercent: number;
+    percentageValue: number;
+    barColor?: string;
+};
+export declare const getPercentBarPreviewGeometry: (numericValue: number, pb: PercentBarStyle, min: number, max: number) => PercentBarPreviewGeometry;
+export declare const formatPercentBarPreviewCellText: (numericValue: number, percentageValue: number, pb: PercentBarStyle) => string;
+export declare const getPercentBarPreviewTrackColor: (pb: PercentBarStyle) => string | undefined;
+export declare const getPercentBarPreviewResolvedBarColor: (color: string | undefined) => string | undefined;
+export declare const hasPercentBarStylePreview: (styledColumn: StyledColumn) => boolean;

package/src/Utilities/Helpers/percentBarPreviewHelper.js

@@ -0,0 +1,155 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.hasPercentBarStylePreview = exports.getPercentBarPreviewResolvedBarColor = exports.getPercentBarPreviewTrackColor = exports.formatPercentBarPreviewCellText = exports.getPercentBarPreviewGeometry = exports.getPercentBarPreviewSampleValues = exports.getPercentBarPreviewScale = exports.hasPercentBarRangesConfigured = void 0;
+const tslib_1 = require("tslib");
+const StyleHelper_1 = require("./StyleHelper");
+const clamp_1 = tslib_1.__importDefault(require("../utils/clamp"));
+const StyledColumnGradientHelper_1 = require("./StyledColumnGradientHelper");
+const evenlySpacedValues = (min, max, count) => {
+    if (count <= 1) {
+        return [min];
+    }
+    const step = (max - min) / (count - 1);
+    return Array.from({ length: count }, (_, i) => min + step * i);
+};
+const toFraction = (value, min, max) => {
+    if (max === min) {
+        return 0;
+    }
+    return (0, clamp_1.default)((value - min) / (max - min), 0, 1);
+};
+const resolveOrigin = (percentBarStyle, cellValue, min, max) => {
+    const origin = percentBarStyle.Origin ?? 'Auto';
+    if (typeof origin === 'number') {
+        return origin;
+    }
+    if (origin === 'Zero') {
+        return 0;
+    }
+    if (origin === 'Min') {
+        return min;
+    }
+    if (min < 0 || max < 0 || cellValue < 0) {
+        return 0;
+    }
+    return min;
+};
+const columnComparisonUsesCentredAxis = (origin) => {
+    const o = origin ?? 'Auto';
+    if (typeof o === 'number') {
+        return false;
+    }
+    return o === 'Zero' || o === 'Auto';
+};
+const resolveRangeEndpoint = (endpoint, scaleMin, scaleMax) => {
+    if (endpoint === 'Col-Min') {
+        return scaleMin;
+    }
+    if (endpoint === 'Col-Max') {
+        return scaleMax;
+    }
+    if (typeof endpoint === 'number') {
+        return endpoint;
+    }
+    return scaleMin;
+};
+const getPreviewBarColor = (value, pb, scaleMin, scaleMax) => {
+    if (pb.ColumnComparison) {
+        return pb.ColumnComparison.Color;
+    }
+    for (const range of pb.CellRanges ?? []) {
+        const rMin = resolveRangeEndpoint(range.Min, scaleMin, scaleMax);
+        const rMax = resolveRangeEndpoint(range.Max, scaleMin, scaleMax);
+        if (value >= Math.min(rMin, rMax) && value <= Math.max(rMin, rMax)) {
+            return range.Color;
+        }
+    }
+    return pb.CellRanges?.[0]?.Color;
+};
+const hasPercentBarRangesConfigured = (pb) => !!(pb?.CellRanges?.length || pb?.ColumnComparison);
+exports.hasPercentBarRangesConfigured = hasPercentBarRangesConfigured;
+/** Illustrative scale for preview — shows negatives when origin is Auto or Zero. */
+const getPercentBarPreviewScale = (pb) => {
+    const origin = pb.Origin ?? 'Auto';
+    if (origin === 'Zero' || origin === 'Auto') {
+        return { min: StyledColumnGradientHelper_1.ZERO_CENTRED_PREVIEW_SCALE_MIN, max: StyledColumnGradientHelper_1.ZERO_CENTRED_PREVIEW_SCALE_MAX };
+    }
+    return { min: 0, max: 100 };
+};
+exports.getPercentBarPreviewScale = getPercentBarPreviewScale;
+const getPercentBarPreviewSampleValues = (pb) => {
+    const { min, max } = (0, exports.getPercentBarPreviewScale)(pb);
+    return evenlySpacedValues(min, max, StyledColumnGradientHelper_1.STYLED_COLUMN_PREVIEW_SAMPLE_COUNT);
+};
+exports.getPercentBarPreviewSampleValues = getPercentBarPreviewSampleValues;
+const getPercentBarPreviewGeometry = (numericValue, pb, min, max) => {
+    let percentageValue = 0;
+    let barLeftPercent = 0;
+    let barWidthPercent = 0;
+    if (pb.ColumnComparison) {
+        const absMax = Math.abs(max);
+        percentageValue = absMax === 0 ? 0 : (numericValue / absMax) * 100;
+        const magnitude = Math.min(100, Math.abs(percentageValue));
+        const origin = pb.Origin ?? 'Auto';
+        const isCentred = columnComparisonUsesCentredAxis(origin);
+        if (isCentred) {
+            const halfWidth = magnitude / 2;
+            if (percentageValue >= 0) {
+                barLeftPercent = 50;
+                barWidthPercent = halfWidth;
+            }
+            else {
+                barLeftPercent = 50 - halfWidth;
+                barWidthPercent = halfWidth;
+            }
+        }
+        else {
+            barLeftPercent = 0;
+            barWidthPercent = magnitude;
+        }
+    }
+    else if (max === min) {
+        percentageValue = 0;
+        barLeftPercent = 0;
+        barWidthPercent = 0;
+    }
+    else {
+        percentageValue = (((0, clamp_1.default)(numericValue, min, max) - min) / (max - min)) * 100;
+        const origin = resolveOrigin(pb, numericValue, min, max);
+        const valueFrac = toFraction(numericValue, min, max);
+        const originFrac = toFraction(origin, min, max);
+        const start = Math.min(valueFrac, originFrac);
+        const end = Math.max(valueFrac, originFrac);
+        barLeftPercent = start * 100;
+        barWidthPercent = (end - start) * 100;
+    }
+    return {
+        barLeftPercent,
+        barWidthPercent,
+        percentageValue,
+        barColor: getPreviewBarColor(numericValue, pb, min, max),
+    };
+};
+exports.getPercentBarPreviewGeometry = getPercentBarPreviewGeometry;
+const formatPercentBarPreviewCellText = (numericValue, percentageValue, pb) => {
+    const parts = [];
+    if (pb.CellText?.includes('CellValue')) {
+        parts.push(Number.isInteger(numericValue) ? String(numericValue) : numericValue.toFixed(1));
+    }
+    if (pb.CellText?.includes('PercentageValue')) {
+        parts.push(`${percentageValue.toFixed(0)}%`);
+    }
+    return parts.join(' ');
+};
+exports.formatPercentBarPreviewCellText = formatPercentBarPreviewCellText;
+const getPercentBarPreviewTrackColor = (pb) => {
+    if (pb.ColumnComparison) {
+        return pb.BackColor ?? undefined;
+    }
+    return pb.BackColor ?? undefined;
+};
+exports.getPercentBarPreviewTrackColor = getPercentBarPreviewTrackColor;
+const getPercentBarPreviewResolvedBarColor = (color) => color ? (0, StyleHelper_1.getVariableColor)(color) : undefined;
+exports.getPercentBarPreviewResolvedBarColor = getPercentBarPreviewResolvedBarColor;
+const hasPercentBarStylePreview = (styledColumn) => (0, exports.hasPercentBarRangesConfigured)(styledColumn.PercentBarStyle);
+exports.hasPercentBarStylePreview = hasPercentBarStylePreview;

package/src/Utilities/ObjectFactory.d.ts

@@ -16,7 +16,7 @@ import { PlusMinusNudge } from '../AdaptableState/PlusMinusState';
 import { Shortcut } from '../AdaptableState/ShortcutState';
 import { NotificationsOptions } from '../AdaptableOptions/NotificationsOptions';
 import { CellSummmaryInfo } from '../AdaptableState/Common/CellSummary';
-import { AdaptableTheme, ChartDefinition, ColumnFilter, CommentThread, CustomDisplayFormatterContext, FlashingCellDefinition, RowDataChangedInfo, SpecialColumnSettings, SystemFilterPredicateId } from '../types';
+import { ChartDefinition, ColumnFilter, CommentThread, CustomDisplayFormatterContext, FlashingCellDefinition, RowDataChangedInfo, SpecialColumnSettings, SystemFilterPredicateId } from '../types';
 import { IRowNode } from 'ag-grid-enterprise';
 import { AdaptableApi, AdaptableComment, BadgeStyleDefinition, CellAddress, NamedQuery, PivotLayout, TableLayout } from '../../types';
 import { ToastOptions } from '../components/Toastify';
@@ -54,7 +54,6 @@ export declare function CreateEmptyStyledColumn(): StyledColumn;
 export declare function CreateDefaultStyledColumnBadge(): BadgeStyleDefinition;
 export declare function CreateEmptyChartDefinition(chartDefinition?: ChartDefinition): ChartDefinition;
 export declare function CreateCustomDisplayFormatterContext(value: any, node: IRowNode, abColumn: AdaptableColumn, api: AdaptableApi): CustomDisplayFormatterContext;
-export declare function CreateEmptyTheme(name?: string): AdaptableTheme;
 export declare function CreateEmptyCommentThread(cellAddress: CellAddress): CommentThread;
 export declare function CreateToastOptions(notificationsOptions: NotificationsOptions, { onClose, containerId }: {
     onClose?: VoidFunction;
@@ -91,7 +90,6 @@ export declare const ObjectFactory: {
     CreateEmptyStyledColumn: typeof CreateEmptyStyledColumn;
     CreateDefaultStyledColumnBadge: typeof CreateDefaultStyledColumnBadge;
     CreateEmptyChartDefinition: typeof CreateEmptyChartDefinition;
-    CreateEmptyTheme: typeof CreateEmptyTheme;
     CreateEmptyCommentThread: typeof CreateEmptyCommentThread;
     CreateAdaptableComment: typeof CreateAdaptableComment;
     CreateDefaultSchedule: typeof CreateDefaultSchedule;

package/src/Utilities/ObjectFactory.js

@@ -28,7 +28,6 @@ exports.CreateEmptyStyledColumn = CreateEmptyStyledColumn;
 exports.CreateDefaultStyledColumnBadge = CreateDefaultStyledColumnBadge;
 exports.CreateEmptyChartDefinition = CreateEmptyChartDefinition;
 exports.CreateCustomDisplayFormatterContext = CreateCustomDisplayFormatterContext;
-exports.CreateEmptyTheme = CreateEmptyTheme;
 exports.CreateEmptyCommentThread = CreateEmptyCommentThread;
 exports.CreateToastOptions = CreateToastOptions;
 exports.CreateDefaultSchedule = CreateDefaultSchedule;
@@ -322,13 +321,6 @@ function CreateCustomDisplayFormatterContext(value, node, abColumn, api) {
         ...api.internalApi.buildBaseContext(),
     };
 }
-function CreateEmptyTheme(name) {
-    return {
-        Uuid: (0, Uuid_1.createUuid)(),
-        Name: name || 'Custom Theme',
-        Description: name || 'Custom Theme',
-    };
-}
 function CreateEmptyCommentThread(cellAddress) {
     return {
         ...cellAddress,
@@ -423,7 +415,6 @@ exports.ObjectFactory = {
     CreateEmptyStyledColumn,
     CreateDefaultStyledColumnBadge,
     CreateEmptyChartDefinition,
-    CreateEmptyTheme,
     CreateEmptyCommentThread,
     CreateAdaptableComment,
     CreateDefaultSchedule,

package/src/Utilities/Services/ThemeService.js

@@ -23,7 +23,7 @@ class ThemeService {
         document.adoptedStyleSheets = [...document.adoptedStyleSheets].filter((sheet) => sheet !== this.styleSheetObject);
     }
     subscribe() {
-        const themeChangedUnsubscribe = this.api.eventApi.on('ThemeChanged', this.onThemeChanged);
+        const themeChangedUnsubscribe = this.api.eventApi.on('ThemeSelected', this.onThemeChanged);
         const prefferedColorSchemeUnsubscribe = this.attachPrefferedColorSchemeListener();
         this.unsubscribe = () => {
             themeChangedUnsubscribe();

package/src/View/Alert/Wizard/AlertBehaviourWizardSection.js

@@ -4,7 +4,6 @@ exports.AlertBehaviourWizardSection = exports.renderAlertBehaviourSummary = expo
 const tslib_1 = require("tslib");
 const jsx_runtime_1 = require("react/jsx-runtime");
 const ScheduledAlertHelper_1 = require("../../../Utilities/Helpers/ScheduledAlertHelper");
-const Tabs_1 = require("../../../components/Tabs");
 const OnePageAdaptableWizard_1 = require("../../Wizard/OnePageAdaptableWizard");
 const CheckBox_1 = require("../../../components/CheckBox");
 const CodeBlock_1 = require("../../../components/CodeBlock");
@@ -17,6 +16,7 @@ const getAlertType_1 = require("../Utilities/getAlertType");
 const Flex_1 = require("../../../components/Flex");
 const Tag_1 = require("../../../components/Tag/Tag");
 const NewSelect_1 = require("../../../components/NewSelect");
+const Card_1 = require("../../../components/Card");
 const HighlightStyle = (props) => {
     const adaptable = (0, AdaptableContext_1.useAdaptable)();
     const options = [
@@ -90,6 +90,7 @@ const renderAlertBehaviourSummary = (alert, api, allowWrap = false) => {
 exports.renderAlertBehaviourSummary = renderAlertBehaviourSummary;
 const AlertBehaviourWizardSection = (props) => {
     const { data, api } = (0, OnePageAdaptableWizard_1.useOnePageAdaptableWizardContext)();
+    const behaviourSpellingVariant = api.internalApi.getCorrectEnglishVariant('Behaviour');
     const presentationProperties = data.AlertProperties ?? {};
     const ruleProperties = (0, ScheduledAlertHelper_1.isRuleBasedAlertDefinition)(data)
         ? (data.AlertProperties ?? {})
@@ -113,20 +114,20 @@ const AlertBehaviourWizardSection = (props) => {
             },
         });
     };
-    return ((0, jsx_runtime_1.jsxs)(Tabs_1.Tabs, { children: [(0, jsx_runtime_1.jsx)(Tabs_1.Tabs.Tab, { children: api.internalApi.getCorrectEnglishVariant('Behaviour') }), (0, jsx_runtime_1.jsxs)(Tabs_1.Tabs.Content, { className: "twa:flex twa:flex-col twa:gap-1", children: [hasPreventCellEdit && ((0, jsx_runtime_1.jsxs)(CheckBox_1.CheckBox, { "data-name": "prevent-cell-edit", style: { alignItems: 'flex-start' }, checked: ruleProperties.PreventEdit, disabled: true, children: ["Prevent Cell Edit", (0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:text-2 twa:mt-1", children: "(automatically undo data change which triggered Alert)" })] })), hasHighlightCell && ((0, jsx_runtime_1.jsx)(HighlightStyle, { dataName: "highlight-cell", highlight: ruleProperties.HighlightCell, label: "Highlight Cell", onChange: (HighlightCell) => {
-                            onChange({ HighlightCell });
-                        } })), hasHighlightRow && ((0, jsx_runtime_1.jsx)(HighlightStyle, { dataName: "highlight-row", highlight: ruleProperties.HighlightRow, label: "Highlight Row", onChange: (HighlightRow) => {
-                            onChange({ HighlightRow });
-                        } })), hasJumpToCell && ((0, jsx_runtime_1.jsx)(CheckBox_1.CheckBox, { "data-name": "jump-to-cell", checked: ruleProperties.JumpToCell, onChange: (JumpToCell) => {
-                            onChange({ JumpToCell });
-                        }, children: "Jump To Cell" })), hasJumpToRow && ((0, jsx_runtime_1.jsx)(CheckBox_1.CheckBox, { "data-name": "jump-to-row", checked: ruleProperties.JumpToRow, onChange: (JumpToRow) => {
-                            onChange({ JumpToRow });
-                        }, children: "Jump To Row" })), showInSeparateDiv && ((0, jsx_runtime_1.jsxs)(CheckBox_1.CheckBox, { "data-name": "show-in-div", checked: presentationProperties.ShowInDiv, onChange: (ShowInDiv) => {
-                            onChange({ ShowInDiv });
-                        }, children: ["Show in separate ", (0, jsx_runtime_1.jsx)(CodeBlock_1.CodeBlock, { children: `<div />` }), " element"] })), logToConsole && ((0, jsx_runtime_1.jsx)(CheckBox_1.CheckBox, { "data-name": "log-to-console", checked: presentationProperties.LogToConsole, onChange: (LogToConsole) => {
-                            onChange({ LogToConsole });
-                        }, children: "Log To Console" })), showSystemStatusMessage && ((0, jsx_runtime_1.jsx)(CheckBox_1.CheckBox, { "data-name": "system-status-message", checked: presentationProperties.DisplaySystemStatusMessage, onChange: (DisplaySystemStatusMessage) => {
-                            onChange({ DisplaySystemStatusMessage });
-                        }, children: "Show as System Status Message" }))] })] }));
+    return ((0, jsx_runtime_1.jsx)(Flex_1.Flex, { flexDirection: "column", className: "twa:gap-3 twa:p-3", children: (0, jsx_runtime_1.jsxs)(Card_1.Card, { shadow: false, children: [(0, jsx_runtime_1.jsxs)(Card_1.Card.Title, { children: [(0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:font-medium", children: behaviourSpellingVariant }), (0, jsx_runtime_1.jsxs)(Flex_1.Box, { className: "twa:text-xs twa:opacity-70 twa:font-normal twa:max-w-[520px]", children: ["Configure ", behaviourSpellingVariant.toLowerCase(), "s for the Alert when it fires"] })] }), (0, jsx_runtime_1.jsxs)(Card_1.Card.Body, { className: "twa:gap-1", children: [hasPreventCellEdit && ((0, jsx_runtime_1.jsxs)(CheckBox_1.CheckBox, { "data-name": "prevent-cell-edit", style: { alignItems: 'flex-start' }, checked: ruleProperties.PreventEdit, disabled: true, children: ["Prevent Cell Edit", (0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:text-2 twa:mt-1", children: "(automatically undo data change which triggered Alert)" })] })), hasHighlightCell && ((0, jsx_runtime_1.jsx)(HighlightStyle, { dataName: "highlight-cell", highlight: ruleProperties.HighlightCell, label: "Highlight Cell", onChange: (HighlightCell) => {
+                                onChange({ HighlightCell });
+                            } })), hasHighlightRow && ((0, jsx_runtime_1.jsx)(HighlightStyle, { dataName: "highlight-row", highlight: ruleProperties.HighlightRow, label: "Highlight Row", onChange: (HighlightRow) => {
+                                onChange({ HighlightRow });
+                            } })), hasJumpToCell && ((0, jsx_runtime_1.jsx)(CheckBox_1.CheckBox, { "data-name": "jump-to-cell", checked: ruleProperties.JumpToCell, onChange: (JumpToCell) => {
+                                onChange({ JumpToCell });
+                            }, children: "Jump To Cell" })), hasJumpToRow && ((0, jsx_runtime_1.jsx)(CheckBox_1.CheckBox, { "data-name": "jump-to-row", checked: ruleProperties.JumpToRow, onChange: (JumpToRow) => {
+                                onChange({ JumpToRow });
+                            }, children: "Jump To Row" })), showInSeparateDiv && ((0, jsx_runtime_1.jsxs)(CheckBox_1.CheckBox, { "data-name": "show-in-div", checked: presentationProperties.ShowInDiv, onChange: (ShowInDiv) => {
+                                onChange({ ShowInDiv });
+                            }, children: ["Show in separate ", (0, jsx_runtime_1.jsx)(CodeBlock_1.CodeBlock, { children: `<div />` }), " element"] })), logToConsole && ((0, jsx_runtime_1.jsx)(CheckBox_1.CheckBox, { "data-name": "log-to-console", checked: presentationProperties.LogToConsole, onChange: (LogToConsole) => {
+                                onChange({ LogToConsole });
+                            }, children: "Log To Console" })), showSystemStatusMessage && ((0, jsx_runtime_1.jsx)(CheckBox_1.CheckBox, { "data-name": "system-status-message", checked: presentationProperties.DisplaySystemStatusMessage, onChange: (DisplaySystemStatusMessage) => {
+                                onChange({ DisplaySystemStatusMessage });
+                            }, children: "Show as System Status Message" }))] })] }) }));
 };
 exports.AlertBehaviourWizardSection = AlertBehaviourWizardSection;