@adaptabletools/adaptable-cjs 23.0.0-canary.3 → 23.0.0-canary.5

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

@@ -0,0 +1,66 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.StyledColumnRatingPreviewCard = exports.StyledColumnRatingPreview = exports.RatingPreview = exports.DEFAULT_RATING_ICON = exports.DEFAULT_RATING_GAP = exports.DEFAULT_RATING_SIZE = exports.DEFAULT_RATING_MAX = void 0;
+exports.getRatingCellChromeCss = getRatingCellChromeCss;
+const tslib_1 = require("tslib");
+const jsx_runtime_1 = require("react/jsx-runtime");
+const React = tslib_1.__importStar(require("react"));
+const Flex_1 = require("../../../../../components/Flex");
+const Card_1 = require("../../../../../components/Card");
+const Tag_1 = require("../../../../../components/Tag");
+const StyleHelper_1 = require("../../../../../Utilities/Helpers/StyleHelper");
+exports.DEFAULT_RATING_MAX = 5;
+exports.DEFAULT_RATING_SIZE = 14;
+exports.DEFAULT_RATING_GAP = 2;
+exports.DEFAULT_RATING_ICON = 'Star';
+const DEFAULT_FILLED_COLOR = 'var(--ab-color-warn, #f5a623)';
+const DEFAULT_EMPTY_COLOR = 'color-mix(in srgb, currentColor 22%, transparent)';
+const PREVIEW_CELL_CLASS = 'ab-RatingPreviewCell twa:inline-flex twa:items-center twa:min-w-[140px] twa:min-h-[32px] twa:px-2 twa:py-1 twa:rounded-standard twa:border twa:border-[color-mix(in_srgb,var(--ab-color-foreground)_15%,transparent)]';
+const ICON_PATHS = {
+    Star: 'M12 2 L14.9 8.6 L22 9.3 L16.7 14.1 L18.2 21 L12 17.4 L5.8 21 L7.3 14.1 L2 9.3 L9.1 8.6 Z',
+    Heart: 'M12 21 C 12 21 3 14.5 3 8.5 C 3 5.5 5.5 3 8.5 3 C 10.3 3 11.7 4 12 5.2 C 12.3 4 13.7 3 15.5 3 C 18.5 3 21 5.5 21 8.5 C 21 14.5 12 21 12 21 Z',
+    Circle: 'M12 4 a8 8 0 1 0 0.0001 0 Z',
+    Thumb: 'M2 11 h4 v10 h-4 z M7 11 l4 -8 c.5 -1 2 -1 2 0 l-1 5 h6 c1 0 2 1 1.7 2 l-2 8 c-.3 1 -1 1.6 -2 1.6 H7 z',
+};
+const clamp = (n, lo, hi) => Math.max(lo, Math.min(hi, n));
+function getRatingCellChromeCss(cell) {
+    if (!cell || !(0, StyleHelper_1.hasCellBoxStyle)(cell)) {
+        return {};
+    }
+    return (0, StyleHelper_1.convertAdaptableStyleToCSS)(cell);
+}
+const RatingPreview = ({ rating, value, }) => {
+    const instanceId = React.useId();
+    const max = rating.Max ?? exports.DEFAULT_RATING_MAX;
+    const size = rating.Size ?? exports.DEFAULT_RATING_SIZE;
+    const gap = rating.Gap ?? exports.DEFAULT_RATING_GAP;
+    const icon = rating.Icon ?? exports.DEFAULT_RATING_ICON;
+    const filledColor = rating.FilledColor ?? DEFAULT_FILLED_COLOR;
+    const emptyColor = rating.EmptyColor ?? DEFAULT_EMPTY_COLOR;
+    const allowHalf = rating.AllowHalf ?? true;
+    const previewValue = value ?? Math.max(1, Math.min(max, max * 0.7));
+    const effective = allowHalf ? previewValue : Math.round(previewValue);
+    const d = ICON_PATHS[icon];
+    return ((0, jsx_runtime_1.jsxs)("span", { style: {
+            display: 'inline-flex',
+            alignItems: 'center',
+            gap: `${gap}px`,
+            lineHeight: 1,
+        }, "aria-hidden": "true", children: [Array.from({ length: max }).map((_, i) => {
+                const fill = clamp(effective - i, 0, 1);
+                const clipId = `ab-rating-preview-clip-${instanceId}-${i}`;
+                return ((0, jsx_runtime_1.jsxs)("svg", { width: size, height: size, viewBox: "0 0 24 24", children: [(0, jsx_runtime_1.jsx)("path", { d: d, fill: emptyColor }), fill > 0 && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("defs", { children: (0, jsx_runtime_1.jsx)("clipPath", { id: clipId, children: (0, jsx_runtime_1.jsx)("rect", { x: 0, y: 0, width: 24 * fill, height: 24 }) }) }), (0, jsx_runtime_1.jsx)("path", { d: d, fill: filledColor, clipPath: `url(#${clipId})` })] }))] }, i));
+            }), rating.ShowValue && ((0, jsx_runtime_1.jsx)("span", { style: { marginLeft: 6, fontVariantNumeric: 'tabular-nums' }, children: previewValue }))] }));
+};
+exports.RatingPreview = RatingPreview;
+const StyledColumnRatingPreview = ({ data }) => {
+    const rating = data.RatingStyle;
+    if (!rating) {
+        return (0, jsx_runtime_1.jsx)(Tag_1.Tag, { children: "No Rating Style" });
+    }
+    const previewCellChrome = getRatingCellChromeCss(rating.Cell);
+    return ((0, jsx_runtime_1.jsx)(Flex_1.Box, { className: PREVIEW_CELL_CLASS, style: previewCellChrome, children: (0, jsx_runtime_1.jsx)(exports.RatingPreview, { rating: rating }) }));
+};
+exports.StyledColumnRatingPreview = StyledColumnRatingPreview;
+const StyledColumnRatingPreviewCard = ({ 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.StyledColumnRatingPreview, { data: data }) })] }));
+exports.StyledColumnRatingPreviewCard = StyledColumnRatingPreviewCard;

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

@@ -0,0 +1,10 @@
+import * as React from 'react';
+import type { CellBoxStyle } from '../../../../../AdaptableState/Common/AdaptableStyle';
+import { StyledColumn } from '../../../../../AdaptableState/StyledColumnState';
+export declare function getSparklineCellChromeCss(cell: CellBoxStyle | undefined): React.CSSProperties;
+export declare const StyledColumnSparklinePreview: React.FunctionComponent<React.PropsWithChildren<{
+    data: StyledColumn;
+}>>;
+export declare const StyledColumnSparklinePreviewCard: React.FunctionComponent<React.PropsWithChildren<{
+    data: StyledColumn;
+}>>;

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

@@ -0,0 +1,133 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.StyledColumnSparklinePreviewCard = exports.StyledColumnSparklinePreview = void 0;
+exports.getSparklineCellChromeCss = getSparklineCellChromeCss;
+const tslib_1 = require("tslib");
+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 StyleHelper_1 = require("../../../../../Utilities/Helpers/StyleHelper");
+const Flex_1 = require("../../../../../components/Flex");
+const Card_1 = require("../../../../../components/Card");
+const Tag_1 = require("../../../../../components/Tag");
+const AdaptableContext_1 = require("../../../../AdaptableContext");
+const FALLBACK_NUMBER_ARRAY = [12, 18, 9, 22, 15, 28, 19, 24, 17, 21];
+const PREVIEW_HEIGHT = 36;
+const PREVIEW_CELL_CLASS = 'ab-SparklinePreviewCell twa:block twa:min-w-[200px] 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)]';
+function getSparklineCellChromeCss(cell) {
+    if (!cell || !(0, StyleHelper_1.hasCellBoxStyle)(cell)) {
+        return {};
+    }
+    return (0, StyleHelper_1.convertAdaptableStyleToCSS)(cell);
+}
+const resolveSparklinePreviewData = (columnId, getColumnWithColumnId, getRowNodeForIndex) => {
+    if (!columnId) {
+        return FALLBACK_NUMBER_ARRAY;
+    }
+    const column = getColumnWithColumnId(columnId);
+    if (!column) {
+        return FALLBACK_NUMBER_ARRAY;
+    }
+    for (let row = 0; row < 20; row++) {
+        const rowNode = getRowNodeForIndex(row);
+        const cellData = rowNode?.data?.[column.field];
+        if (Array.isArray(cellData) && cellData.length > 0) {
+            return cellData;
+        }
+    }
+    return FALLBACK_NUMBER_ARRAY;
+};
+const buildSparklinePreviewOptions = (sparklineStyle, container, data, width, height) => {
+    const persisted = sparklineStyle.options ?? { type: 'line' };
+    const sanitized = AdaptableHelper_1.AdaptableHelper.removeAdaptableObjectPrimitives({
+        ...persisted,
+    });
+    const options = (0, SparklineOptionsHelper_1.resolveSparklineOptionsForRender)({
+        ...sanitized,
+        type: sanitized.type ?? 'line',
+        container,
+        width,
+        height,
+        data: data,
+    });
+    // Custom tooltip renderers expect AG Grid row context — use the default tooltip in preview.
+    if (options.tooltip?.renderer) {
+        const { renderer: _renderer, ...tooltipRest } = options.tooltip;
+        options.tooltip = tooltipRest;
+    }
+    return options;
+};
+/**
+ * AG Grid registers chart modules via `AgChartsEnterpriseModule.setup()` when
+ * sparklines are enabled. Standalone `AgCharts.createSparkline` needs the same
+ * setup — otherwise the settings-panel preview throws "No modules registered".
+ */
+let agChartsPreviewModulesReady = false;
+const ensureAgChartsEnterpriseModules = () => {
+    if (agChartsPreviewModulesReady) {
+        return;
+    }
+    ag_charts_enterprise_1.AgChartsEnterpriseModule.setup();
+    agChartsPreviewModulesReady = true;
+};
+const createSparkline = (options) => {
+    ensureAgChartsEnterpriseModules();
+    return ag_charts_enterprise_1.AgChartsEnterpriseModule.createSparkline(options);
+};
+const SparklinePreviewCanvas = ({ sparklineStyle, columnId }) => {
+    const adaptable = (0, AdaptableContext_1.useAdaptable)();
+    const containerRef = React.useRef(null);
+    const instanceRef = React.useRef(null);
+    const [previewError, setPreviewError] = React.useState(null);
+    const canDisplay = adaptable.api.styledColumnApi.canDisplaySparklines();
+    const optionsKey = JSON.stringify(sparklineStyle.options ?? {});
+    React.useEffect(() => {
+        return () => {
+            instanceRef.current?.destroy();
+            instanceRef.current = null;
+        };
+    }, []);
+    React.useEffect(() => {
+        const container = containerRef.current;
+        if (!container || !canDisplay) {
+            return;
+        }
+        const data = resolveSparklinePreviewData(columnId, (id) => adaptable.api.columnApi.getColumnWithColumnId(id), (index) => adaptable.api.gridApi.getRowNodeForIndex(index));
+        const width = Math.max(container.clientWidth, 200);
+        const options = buildSparklinePreviewOptions(sparklineStyle, container, data, width, PREVIEW_HEIGHT);
+        try {
+            if (!instanceRef.current) {
+                instanceRef.current = createSparkline(options);
+            }
+            else {
+                instanceRef.current.update(options);
+            }
+            setPreviewError(null);
+        }
+        catch (error) {
+            instanceRef.current?.destroy();
+            instanceRef.current = null;
+            setPreviewError(error instanceof Error ? error.message : 'Unable to render sparkline preview');
+        }
+    }, [sparklineStyle, columnId, canDisplay, adaptable.api, optionsKey]);
+    if (!canDisplay) {
+        return (0, jsx_runtime_1.jsx)(Tag_1.Tag, { children: "Sparklines module not registered" });
+    }
+    if (previewError) {
+        return (0, jsx_runtime_1.jsx)(Tag_1.Tag, { children: previewError });
+    }
+    return ((0, jsx_runtime_1.jsx)("div", { ref: containerRef, className: "ab-SparklinePreviewCanvas", style: { width: '100%', height: PREVIEW_HEIGHT } }));
+};
+const StyledColumnSparklinePreview = ({ data }) => {
+    const sparklineStyle = data.SparklineStyle;
+    if (!sparklineStyle) {
+        return (0, jsx_runtime_1.jsx)(Tag_1.Tag, { children: "No Sparkline Style" });
+    }
+    const previewCellChrome = getSparklineCellChromeCss(sparklineStyle.Cell);
+    return ((0, jsx_runtime_1.jsx)(Flex_1.Box, { className: PREVIEW_CELL_CLASS, style: previewCellChrome, children: (0, jsx_runtime_1.jsx)(SparklinePreviewCanvas, { sparklineStyle: sparklineStyle, columnId: data.ColumnId }) }));
+};
+exports.StyledColumnSparklinePreview = StyledColumnSparklinePreview;
+const StyledColumnSparklinePreviewCard = ({ data }) => ((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: "Preview" }), (0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:text-xs twa:opacity-70 twa:font-normal twa:max-w-[500px]", children: "Sample sparkline using first non-empty cell in Column (or demo data when unavailable)" })] }), (0, jsx_runtime_1.jsx)(Card_1.Card.Body, { className: "twa:p-1", children: (0, jsx_runtime_1.jsx)(exports.StyledColumnSparklinePreview, { data: data }) })] }));
+exports.StyledColumnSparklinePreviewCard = StyledColumnSparklinePreviewCard;

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

@@ -49,19 +49,24 @@ const renderStyledColumnRangesSummary = (data, api) => {
 exports.renderStyledColumnRangesSummary = renderStyledColumnRangesSummary;
 const StyledColumnWizardRangesSection = (props) => {
     const { data, api } = (0, OnePageAdaptableWizard_1.useOnePageAdaptableWizardContext)();
-    const minMaxRangeValues = React.useMemo(() => {
+    const column = React.useMemo(() => {
         const columnId = data.ColumnId;
         if (!columnId) {
+            return undefined;
+        }
+        return api.columnApi.getColumnWithColumnId(columnId);
+    }, [data.ColumnId, api]);
+    const minMaxRangeValues = React.useMemo(() => {
+        if (!column) {
             return null;
         }
-        const column = api.columnApi.getColumnWithColumnId(columnId);
         return {
             min: api.styledColumnApi.internalApi.getMinValueForNumericColumn(column),
             max: api.styledColumnApi.internalApi.getMaxValueForNumericColumn(column),
         };
-    }, [data]);
+    }, [column, api]);
     const scope = { ColumnIds: [data.ColumnId] };
-    const disabled = !data.ColumnId;
+    const disabled = !data.ColumnId || !column;
     // Gradient updates
     const onUpdateGradientStyleRanges = (ranges) => {
         const gradientStyle = {
@@ -154,6 +159,8 @@ const StyledColumnWizardRangesSection = (props) => {
         }
         props.onChange(newStyledColumn);
     }, [data]);
-    return ((0, jsx_runtime_1.jsxs)(Flex_1.Box, { children: [data?.GradientStyle && ((0, jsx_runtime_1.jsx)(RangesComponent_1.RangesComponent, { disabled: disabled, minMaxRangeValues: minMaxRangeValues, api: api, scope: scope, showZeroCentredTab: true, showRangeDirection: true, zeroCentred: data.GradientStyle.ZeroCentred, onApplyZeroCentred: onApplyGradientZeroCentred, ranges: data.GradientStyle.CellRanges ?? [], rangeValueType: data.GradientStyle?.RangeValueType, onRangeValueTypeChange: handleRangeValueTypeChange, columnComparison: data?.GradientStyle?.ColumnComparison, updateRanges: onUpdateGradientStyleRanges, updateColumnComparison: onUpdateGradientStyleColumnComparison })), data?.PercentBarStyle && ((0, jsx_runtime_1.jsx)(RangesComponent_1.RangesComponent, { disabled: disabled, minMaxRangeValues: minMaxRangeValues, api: api, scope: scope, ranges: data.PercentBarStyle?.CellRanges, rangeValueType: data.PercentBarStyle?.RangeValueType, onRangeValueTypeChange: handleRangeValueTypeChange, columnComparison: data?.PercentBarStyle?.ColumnComparison, updateRanges: onUpdatePercentBarStyleRanges, updateColumnComparison: onUpdatePercentBarStyleColumnComparison })), !data.ColumnId && ((0, jsx_runtime_1.jsx)(ErrorBox_1.default, { className: "twa:mt-2", children: "You need to select a column before defining Ranges." }))] }));
+    return ((0, jsx_runtime_1.jsxs)(Flex_1.Box, { children: [data?.GradientStyle && ((0, jsx_runtime_1.jsx)(RangesComponent_1.RangesComponent, { disabled: disabled, minMaxRangeValues: minMaxRangeValues, api: api, scope: scope, showZeroCentredTab: true, showRangeDirection: true, zeroCentred: data.GradientStyle.ZeroCentred, onApplyZeroCentred: onApplyGradientZeroCentred, ranges: data.GradientStyle.CellRanges ?? [], rangeValueType: data.GradientStyle?.RangeValueType, onRangeValueTypeChange: handleRangeValueTypeChange, columnComparison: data?.GradientStyle?.ColumnComparison, updateRanges: onUpdateGradientStyleRanges, updateColumnComparison: onUpdateGradientStyleColumnComparison })), data?.PercentBarStyle && ((0, jsx_runtime_1.jsx)(RangesComponent_1.RangesComponent, { disabled: disabled, minMaxRangeValues: minMaxRangeValues, api: api, scope: scope, ranges: data.PercentBarStyle?.CellRanges, rangeValueType: data.PercentBarStyle?.RangeValueType, onRangeValueTypeChange: handleRangeValueTypeChange, columnComparison: data?.PercentBarStyle?.ColumnComparison, updateRanges: onUpdatePercentBarStyleRanges, updateColumnComparison: onUpdatePercentBarStyleColumnComparison })), (!data.ColumnId || !column) && ((0, jsx_runtime_1.jsx)(ErrorBox_1.default, { className: "twa:mt-2", children: !data.ColumnId
+                    ? 'You need to select a column before defining Ranges.'
+                    : `Column "${data.ColumnId}" was not found in the grid.` }))] }));
 };
 exports.StyledColumnWizardRangesSection = StyledColumnWizardRangesSection;

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

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

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

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.StyledColumnWizardStyleSection = exports.renderFormatColumnStyleWizardSummary = exports.renderStyledColumnStyleSummary = exports.StyledColumnWizardRangesSection = exports.renderStyledColumnRangesSummary = void 0;
+exports.StyledColumnWizardStyleSection = exports.renderFormatColumnStyleWizardSummary = exports.renderStyledColumnStyleSummary = exports.getStyledColumnPercentBarStyleViewValues = exports.StyledColumnWizardRangesSection = exports.renderStyledColumnRangesSummary = void 0;
 const tslib_1 = require("tslib");
 const jsx_runtime_1 = require("react/jsx-runtime");
 const CheckBox_1 = require("../../../../components/CheckBox");
@@ -16,6 +16,7 @@ const Radio_1 = tslib_1.__importStar(require("../../../../components/Radio"));
 const Toggle_1 = require("../../../../components/Toggle");
 const StyledColumnSliceStyleEditors_1 = require("../StyledColumnSliceStyleEditors");
 const Card_1 = require("../../../../components/Card");
+const StyledColumnPercentBarPreview_1 = require("./Components/StyledColumnPercentBarPreview");
 // Re-export the Ranges section + summary for legacy import paths.
 var StyledColumnWizardRangesSection_1 = require("./StyledColumnWizardRangesSection");
 Object.defineProperty(exports, "renderStyledColumnRangesSummary", { enumerable: true, get: function () { return StyledColumnWizardRangesSection_1.renderStyledColumnRangesSummary; } });
@@ -24,47 +25,70 @@ Object.defineProperty(exports, "StyledColumnWizardRangesSection", { enumerable:
 // Summary helpers
 // ---------------------------------------------------------------------------
 const formatOriginLabel = (origin) => {
-    if (origin == undefined)
+    if (origin == undefined) {
         return 'Auto';
-    if (typeof origin === 'number')
+    }
+    if (typeof origin === 'number') {
         return `Custom (${origin})`;
+    }
     return origin;
 };
-const formatAlignmentLabel = (alignment) => {
-    if (alignment == undefined)
-        return 'Inherit';
-    return alignment;
+const formatPercentBarCellTextSummary = (cellText) => cellText
+    ?.map((t) => (t === 'CellValue' ? 'Cell Value' : 'Percent Value'))
+    .join(' + ') ?? '';
+const formatPercentBarToolTipSummary = (toolTipText) => toolTipText
+    ?.map((t) => (t === 'CellValue' ? 'Cell Value' : 'Percent Value'))
+    .join(' + ') ?? '';
+const buildStyledColumnPercentBarStyleSummaryStrings = (pb, options) => {
+    const items = [`Origin: ${formatOriginLabel(pb.Origin)}`];
+    if (pb.CellText?.length) {
+        items.push(`Cell Text: ${formatPercentBarCellTextSummary(pb.CellText)}`);
+        items.push(`Cell Text Position: ${pb.CellTextPosition ?? 'Below'}`);
+        if (pb.CellTextAlignment != null) {
+            items.push(`Cell Text Alignment: ${pb.CellTextAlignment}`);
+        }
+    }
+    else if (options.includeEmptyCellText) {
+        items.push('Cell Text: None');
+    }
+    if (pb.ToolTipText?.length) {
+        items.push(`Tooltip: ${formatPercentBarToolTipSummary(pb.ToolTipText)}`);
+    }
+    else if (options.includeEmptyTooltip) {
+        items.push('Tooltip: No Tooltip');
+    }
+    if (pb.BackColor) {
+        items.push(`Back Colour: ${pb.BackColor}`);
+    }
+    (0, StyledColumnSliceStyleEditors_1.getCellFontStyleSummaryItems)(pb.Font).forEach(({ label, value }) => {
+        items.push(`${label}: ${value}`);
+    });
+    return items;
 };
-const formatCellText = (cellText) => {
-    if (!cellText || cellText.length === 0)
-        return '—';
-    return cellText.map((t) => (t === 'CellValue' ? 'Cell Value' : 'Percent Value')).join(' + ');
+const getStyledColumnPercentBarStyleViewValues = (data) => {
+    const pb = data.PercentBarStyle;
+    if (!pb) {
+        return [];
+    }
+    return buildStyledColumnPercentBarStyleSummaryStrings(pb, {
+        includeEmptyCellText: false,
+        includeEmptyTooltip: false,
+    });
 };
+exports.getStyledColumnPercentBarStyleViewValues = getStyledColumnPercentBarStyleViewValues;
 /**
  * Compact summary of the *non-range* style properties of a Percent Bar.
- * (Gradient uses `renderStyledColumnGradientStyleSummary`.)
- *
- * Used by:
- *   - the wizard's "Style" step `renderSummary`
- *   - the Styled Column module's `toView` (read-only summary popup)
  */
 const renderStyledColumnStyleSummary = (data, _api) => {
     const pb = data.PercentBarStyle;
     if (!pb) {
         return (0, jsx_runtime_1.jsx)(Tag_1.Tag, { children: "No Styling Defined" });
     }
-    const parts = [
-        (0, jsx_runtime_1.jsxs)(Flex_1.Box, { className: "twa:mr-2", children: ["Origin: ", (0, jsx_runtime_1.jsx)(Tag_1.Tag, { children: formatOriginLabel(pb.Origin) })] }, "origin"),
-    ];
-    if (pb.CellText && pb.CellText.length > 0) {
-        parts.push((0, jsx_runtime_1.jsxs)(Flex_1.Box, { className: "twa:mr-2", children: ["Text: ", (0, jsx_runtime_1.jsx)(Tag_1.Tag, { children: formatCellText(pb.CellText) }), " (", pb.CellTextPosition ?? 'Below', ")"] }, "text"));
-        parts.push((0, jsx_runtime_1.jsxs)(Flex_1.Box, { className: "twa:mr-2", children: ["Align: ", (0, jsx_runtime_1.jsx)(Tag_1.Tag, { children: formatAlignmentLabel(pb.CellTextAlignment) })] }, "align"));
-    }
-    const fontTags = (0, StyledColumnSliceStyleEditors_1.renderFontStyleSummaryTags)(pb.Font);
-    if (fontTags) {
-        parts.push((0, jsx_runtime_1.jsxs)(Flex_1.Box, { className: "twa:mr-2", children: ["Font: ", fontTags] }, "font"));
-    }
-    return ((0, jsx_runtime_1.jsx)(Flex_1.Flex, { alignItems: "center", className: "twa:flex-wrap", children: parts }));
+    const items = buildStyledColumnPercentBarStyleSummaryStrings(pb, {
+        includeEmptyCellText: true,
+        includeEmptyTooltip: true,
+    });
+    return ((0, jsx_runtime_1.jsx)(Flex_1.Flex, { alignItems: "center", className: "twa:flex-wrap twa:gap-2", children: items.map((item) => ((0, jsx_runtime_1.jsx)(Tag_1.Tag, { children: item }, item))) }));
 };
 exports.renderStyledColumnStyleSummary = renderStyledColumnStyleSummary;
 // Legacy wrapper kept for any external consumers; safe no-op here.
@@ -178,6 +202,6 @@ const StyledColumnWizardStyleSection = (props) => {
                                             delete cleaned.Font;
                                             props.onChange({ ...data, PercentBarStyle: cleaned });
                                         }
-                                    } }) })] })] }), (0, jsx_runtime_1.jsxs)(Card_1.Card, { shadow: false, className: "twa:mb-3", children: [(0, jsx_runtime_1.jsxs)(Card_1.Card.Title, { children: [(0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:font-medium", children: "Cell Style" }), (0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:text-xs twa:opacity-70 twa:font-normal twa:max-w-[520px]", children: "Configure Tooltip and Background Colour" })] }), (0, jsx_runtime_1.jsx)(Card_1.Card.Body, { children: (0, jsx_runtime_1.jsxs)(FormLayout_1.default, { sizes: [...STYLE_FORM_SIZES], children: [(0, jsx_runtime_1.jsxs)(FormLayout_1.FormRow, { label: "Tooltip Display:", children: [(0, jsx_runtime_1.jsx)(CheckBox_1.CheckBox, { disabled: disabled, checked: pb.ToolTipText?.includes('CellValue'), onChange: (checked) => onToolTipTextChanged('CellValue', checked), children: "Cell Value" }), ' ', (0, jsx_runtime_1.jsx)(CheckBox_1.CheckBox, { disabled: disabled, className: "twa:ml-3", checked: pb.ToolTipText?.includes('PercentageValue'), onChange: (checked) => onToolTipTextChanged('PercentageValue', checked), children: "Percent Value" })] }), (0, jsx_runtime_1.jsx)(FormLayout_1.FormRow, { label: `Back ${api.internalApi.getCorrectEnglishVariant('Colour')}:`, children: (0, jsx_runtime_1.jsxs)(Flex_1.Flex, { alignItems: "center", children: [(0, jsx_runtime_1.jsx)(CheckBox_1.CheckBox, { disabled: disabled, checked: !!pb.BackColor, onChange: onUseBackColorChanged, className: "twa:mr-2" }), pb.BackColor != undefined && ((0, jsx_runtime_1.jsx)(ColorPicker_1.ColorPicker, { disabled: disabled, api: api, value: pb.BackColor, onChange: onBackColorChange }))] }) })] }) })] })] }));
+                                    } }) })] })] }), (0, jsx_runtime_1.jsxs)(Card_1.Card, { shadow: false, className: "twa:mb-3", children: [(0, jsx_runtime_1.jsxs)(Card_1.Card.Title, { children: [(0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:font-medium", children: "Cell Style" }), (0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:text-xs twa:opacity-70 twa:font-normal twa:max-w-[520px]", children: "Configure Tooltip and Background Colour" })] }), (0, jsx_runtime_1.jsx)(Card_1.Card.Body, { children: (0, jsx_runtime_1.jsxs)(FormLayout_1.default, { sizes: [...STYLE_FORM_SIZES], children: [(0, jsx_runtime_1.jsxs)(FormLayout_1.FormRow, { label: "Tooltip Display:", children: [(0, jsx_runtime_1.jsx)(CheckBox_1.CheckBox, { disabled: disabled, checked: pb.ToolTipText?.includes('CellValue'), onChange: (checked) => onToolTipTextChanged('CellValue', checked), children: "Cell Value" }), ' ', (0, jsx_runtime_1.jsx)(CheckBox_1.CheckBox, { disabled: disabled, className: "twa:ml-3", checked: pb.ToolTipText?.includes('PercentageValue'), onChange: (checked) => onToolTipTextChanged('PercentageValue', checked), children: "Percent Value" })] }), (0, jsx_runtime_1.jsx)(FormLayout_1.FormRow, { label: `Back ${api.internalApi.getCorrectEnglishVariant('Colour')}:`, children: (0, jsx_runtime_1.jsxs)(Flex_1.Flex, { alignItems: "center", children: [(0, jsx_runtime_1.jsx)(CheckBox_1.CheckBox, { disabled: disabled, checked: !!pb.BackColor, onChange: onUseBackColorChanged, className: "twa:mr-2" }), pb.BackColor != undefined && ((0, jsx_runtime_1.jsx)(ColorPicker_1.ColorPicker, { disabled: disabled, api: api, value: pb.BackColor, onChange: onBackColorChange }))] }) })] }) })] }), (0, jsx_runtime_1.jsx)(StyledColumnPercentBarPreview_1.StyledColumnPercentBarPreviewCard, { data: data })] }));
 };
 exports.StyledColumnWizardStyleSection = StyledColumnWizardStyleSection;

package/src/View/SystemStatus/Utilities/getStatusItemStyle.js

@@ -7,7 +7,7 @@ const getStatusItemStyle = (systemStatusMessageInfo) => {
     const background = UIHelper_1.default.getColorByMessageType(systemStatusMessageInfo?.statusType ?? 'Success');
     const color = systemStatusMessageInfo
         ? UIHelper_1.default.getButtonTextColourForMessageType(systemStatusMessageInfo.statusType)
-        : 'var(--ab-color-text-on-primary)';
+        : 'var(--ab-color-primary-foreground)';
     return {
         background,
         color,

package/src/View/Theme/ThemePopup.d.ts

@@ -1,19 +1,7 @@
 import * as React from 'react';
-import * as ThemeRedux from '../../Redux/ActionsReducers/ThemeRedux';
 import { ModuleViewPopupProps } from '../Components/SharedProps/ModuleViewPopupProps';
-import { AdaptableTheme } from '../../AdaptableState/ThemeState';
-interface ThemePopupProps extends ModuleViewPopupProps<ThemePopupComponent> {
-    CurrentTheme: string;
-    UserThemes: AdaptableTheme[];
-    SelectTheme: (newTheme: string) => ThemeRedux.ThemeSelectAction;
-    hideShowInWindow?: boolean;
-}
-declare class ThemePopupComponent extends React.Component<ThemePopupProps, {}> {
+declare class ThemePopupComponent extends React.Component<ModuleViewPopupProps<ThemePopupComponent>, {}> {
     render(): React.JSX.Element;
-    onChangeTheme(value: string): void;
-    handleCreateNewTheme: (variant: "dark" | "light") => void;
 }
-export declare let ThemePopup: import("react-redux").ConnectedComponent<typeof ThemePopupComponent, {
-    [x: string]: any;
-}>;
+export declare let ThemePopup: typeof ThemePopupComponent;
 export {};

package/src/View/Theme/ThemePopup.js

@@ -4,48 +4,13 @@ exports.ThemePopup = void 0;
 const tslib_1 = require("tslib");
 const jsx_runtime_1 = require("react/jsx-runtime");
 const React = tslib_1.__importStar(require("react"));
-const react_redux_1 = require("react-redux");
-const ThemeRedux = tslib_1.__importStar(require("../../Redux/ActionsReducers/ThemeRedux"));
 const PopupPanel_1 = require("../Components/Popups/AdaptablePopup/PopupPanel");
 const FormLayout_1 = tslib_1.__importStar(require("../../components/FormLayout"));
-const ObjectFactory_1 = tslib_1.__importDefault(require("../../Utilities/ObjectFactory"));
-const GeneralConstants_1 = require("../../Utilities/Constants/GeneralConstants");
 const ThemeSelector_1 = require("./ThemeSelector");
 const Flex_1 = require("../../components/Flex");
 class ThemePopupComponent extends React.Component {
     render() {
-        const isCustomTheme = this.props.api.themeApi
-            .getUserThemes()
-            .some((theme) => theme.Name === this.props.CurrentTheme);
-        const disabled = this.props.accessLevel === GeneralConstants_1.ACCESS_LEVEL_READ_ONLY;
         return ((0, jsx_runtime_1.jsx)(PopupPanel_1.PopupPanel, { headerText: this.props.moduleInfo.FriendlyName, glyphicon: this.props.moduleInfo.Glyph, infoLink: this.props.moduleInfo.HelpPage, infoLinkDisabled: !this.props.api.internalApi.isDocumentationLinksDisplayed(), children: (0, jsx_runtime_1.jsx)(FormLayout_1.default, { children: (0, jsx_runtime_1.jsx)(FormLayout_1.FormRow, { label: "Select Current Theme:", children: (0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:max-w-[150px]", children: (0, jsx_runtime_1.jsx)(ThemeSelector_1.ThemeSelector, {}) }) }) }) }));
     }
-    onChangeTheme(value) {
-        this.props.SelectTheme(value);
-    }
-    handleCreateNewTheme = (variant) => {
-        let nthItem = this.props.UserThemes.length + 1;
-        let name = 'Custom-Theme-' + nthItem;
-        // make sure it is unique
-        while (this.props.UserThemes.some((theme) => theme.Name === name)) {
-            nthItem++;
-            name = 'Custom-Theme-' + nthItem;
-        }
-        const newTheme = ObjectFactory_1.default.CreateEmptyTheme(name);
-        newTheme.Variant = variant;
-        this.props.api.themeApi.addUserTheme(newTheme);
-        this.props.api.themeApi.loadTheme(newTheme.Name);
-    };
-}
-function mapStateToProps(state, ownProps) {
-    return {
-        CurrentTheme: state.Theme.CurrentTheme,
-        UserThemes: state.Theme.UserThemes,
-    };
-}
-function mapDispatchToProps(dispatch) {
-    return {
-        SelectTheme: (newTheme) => dispatch(ThemeRedux.ThemeSelect(newTheme)),
-    };
 }
-exports.ThemePopup = (0, react_redux_1.connect)(mapStateToProps, mapDispatchToProps)(ThemePopupComponent);
+exports.ThemePopup = ThemePopupComponent;

package/src/View/UIHelper.js

@@ -350,7 +350,7 @@ function getButtonColourForAdaptableAlerts(adaptableAlerts, messageTypeColor) {
 }
 function getButtonTextColourForArrayandMessageType(adaptableAlerts, messageType) {
     if (ArrayExtensions_1.default.IsNullOrEmpty(adaptableAlerts)) {
-        return 'text-on-primary';
+        return 'primary-foreground';
     }
     return this.getButtonTextColourForMessageType(messageType);
 }

package/src/View/Wizard/OnePageAdaptableWizard.js

@@ -8,9 +8,9 @@ const React = tslib_1.__importStar(require("react"));
 const react_1 = require("react");
 const react_redux_1 = require("react-redux");
 const NamedQueryRedux = tslib_1.__importStar(require("../../Redux/ActionsReducers/NamedQueryRedux"));
-const SimpleButton_1 = tslib_1.__importDefault(require("../../components/SimpleButton"));
 const AdaptableContext_1 = require("../AdaptableContext");
-const Tabs_1 = require("../../components/Tabs");
+const Card_1 = require("../../components/Card");
+const ButtonEdit_1 = require("../Components/Buttons/ButtonEdit");
 const NamedQueryContext_1 = require("../../components/ExpressionEditor/NamedQueryContext");
 const OnePageWizards_1 = require("./OnePageWizards");
 const kebabCase_1 = tslib_1.__importDefault(require("../../Utilities/utils/kebabCase"));
@@ -83,20 +83,9 @@ const OnePageAdaptableWizard = (props) => {
 };
 exports.OnePageAdaptableWizard = OnePageAdaptableWizard;
 const OnePageWizardSummary = () => {
-    const { sections, data, api, moduleInfo } = useOnePageAdaptableWizardContext();
-    const { setCurrentSection } = (0, OnePageWizards_1.useOnePageWizardContext)();
-    const [namedQuery] = (0, react_1.useState)(false);
-    const renderEdit = (index) => ((0, jsx_runtime_1.jsx)(SimpleButton_1.default, { className: "twa:px-1 twa:inline-block twa:text-2 twa:underline", variant: "text", onClick: () => {
-            setCurrentSection(index);
-        }, children: "edit" }));
-    const extraContext = {
-        data,
-        api,
-        namedQuery,
-        moduleInfo: moduleInfo,
-        sections,
-    };
-    return ((0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "ab-OnePageWizardSummary twa:flex twa:flex-col twa:gap-2", children: sections
+    const { data, api } = useOnePageAdaptableWizardContext();
+    const { sections: visibleSections, setCurrentSection } = (0, OnePageWizards_1.useOnePageWizardContext)();
+    return ((0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "ab-OnePageWizardSummary twa:flex twa:flex-col twa:gap-3", children: visibleSections
             .map((section, index) => {
             if (section === '-') {
                 return null;
@@ -104,10 +93,7 @@ const OnePageWizardSummary = () => {
             if (!section.renderSummary) {
                 return null;
             }
-            if (section.isVisible && !section.isVisible(data, api, extraContext)) {
-                return null;
-            }
-            return ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: (0, jsx_runtime_1.jsxs)(Tabs_1.Tabs, { keyboardNavigation: false, children: [(0, jsx_runtime_1.jsxs)(Tabs_1.Tabs.Tab, { children: [section.title, " ", renderEdit(index)] }), (0, jsx_runtime_1.jsx)(Tabs_1.Tabs.Content, { children: section.renderSummary(data, api) })] }, index) }));
+            return ((0, jsx_runtime_1.jsxs)(Card_1.Card, { shadow: false, children: [(0, jsx_runtime_1.jsxs)(Card_1.Card.Title, { className: "twa:w-full", children: [(0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:font-medium twa:flex-1", children: section.title }), (0, jsx_runtime_1.jsx)(ButtonEdit_1.ButtonEdit, { onClick: () => setCurrentSection(index) })] }), (0, jsx_runtime_1.jsx)(Card_1.Card.Body, { className: "twa:p-1", children: section.renderSummary?.(data, api) })] }, `${section.title}-${index}`));
         })
             .filter(Boolean) }));
 };

package/src/View/renderWithAdaptableContext.js

@@ -5,9 +5,8 @@ const tslib_1 = require("tslib");
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_redux_1 = require("react-redux");
 const AdaptableContext_1 = tslib_1.__importDefault(require("./AdaptableContext"));
-const AdaptableComputedCSSVarsContext_1 = require("./AdaptableComputedCSSVarsContext");
 const tooltip_1 = require("../components/ui/tooltip");
 const renderWithAdaptableContext = (children, adaptable) => {
-    return ((0, jsx_runtime_1.jsx)(tooltip_1.TooltipProvider, { delay: 300, children: (0, jsx_runtime_1.jsx)(react_redux_1.Provider, { store: adaptable.adaptableStore.TheStore, children: (0, jsx_runtime_1.jsx)(AdaptableComputedCSSVarsContext_1.WithAdaptableComputedCSSVars, { children: (0, jsx_runtime_1.jsx)(AdaptableContext_1.default.Provider, { value: adaptable, children: children }) }) }) }));
+    return ((0, jsx_runtime_1.jsx)(tooltip_1.TooltipProvider, { delay: 300, children: (0, jsx_runtime_1.jsx)(react_redux_1.Provider, { store: adaptable.adaptableStore.TheStore, children: (0, jsx_runtime_1.jsx)(AdaptableContext_1.default.Provider, { value: adaptable, children: children }) }) }));
 };
 exports.renderWithAdaptableContext = renderWithAdaptableContext;

package/src/agGrid/AdaptableAgGrid.d.ts

@@ -97,7 +97,6 @@ export declare class AdaptableAgGrid implements IAdaptable {
     private LicenseService;
     private ChartingService;
     private rowListeners;
-    private throttleFilterOnDataChange;
     private debouncedSetSelectedRows;
     private debouncedSetSelectedCells;
     private agGridListenerKeydown;
@@ -361,6 +360,7 @@ export declare class AdaptableAgGrid implements IAdaptable {
     private hasFloatingFilterOnAtLeastOneColumn;
     getChartRef(chartId: string): ChartRef;
     updateLayoutInManagerAfterStoreHasChanged(layout?: Layout): void;
+    private getActiveAdaptableAggFuncForCol;
     private onRowDataChanged;
     private onCellDataChanged;
     private isUndoChange;