@adaptabletools/adaptable-cjs 22.1.1 → 23.0.0-canary.0

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

@@ -0,0 +1,246 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.StyledColumnWizardScopeSection = exports.isValidStyledColumnScope = exports.collectIncludedRowKindLabels = exports.renderStyledColumnScopeSummary = void 0;
+const tslib_1 = require("tslib");
+const jsx_runtime_1 = require("react/jsx-runtime");
+const React = tslib_1.__importStar(require("react"));
+const Tag_1 = require("../../../components/Tag");
+const ColumnSelector_1 = require("../../Components/ColumnSelector");
+const OnePageAdaptableWizard_1 = require("../../Wizard/OnePageAdaptableWizard");
+const Flex_1 = require("../../../components/Flex");
+const AdaptableFormControlTextClear_1 = require("../../Components/Forms/AdaptableFormControlTextClear");
+const FormLayout_1 = tslib_1.__importStar(require("../../../components/FormLayout"));
+const CheckBox_1 = require("../../../components/CheckBox");
+const styledColumnRowKindSupport_1 = require("../../../Utilities/Helpers/styledColumnRowKindSupport");
+const iconStyledColumnColumnSupport_1 = require("../../../Utilities/Helpers/iconStyledColumnColumnSupport");
+// ---------------------------------------------------------------------------
+// Row-kind helpers
+// ---------------------------------------------------------------------------
+/**
+ * Per-type *effective* default for "render on this row kind?" — used by
+ * the wizard checkboxes when `StyledColumn.RowScope` is unset, and by
+ * the styled column list / summary view.
+ *
+ * Keep this in lockstep with `shouldRenderStyledColumnOnRow`:
+ *  - Badge defaults to rendering everywhere (subject to type capabilities).
+ *  - Every other type defaults to leaf rows only (matching the long-
+ *    standing renderer behaviour), intersected with type capabilities
+ *    (e.g. Sparkline → data rows only).
+ */
+const ROW_KIND_LABELS = {
+    Data: 'Data (leaf) rows',
+    Group: 'Group rows',
+    Summary: 'Summary rows',
+    Total: 'Total rows',
+};
+const defaultRowKindIncluded = (styledColumn, kind) => {
+    if (styledColumn.BadgeStyle) {
+        return true;
+    }
+    if (!(0, styledColumnRowKindSupport_1.isStyledColumnRowKindSupported)(styledColumn, kind)) {
+        return false;
+    }
+    // Non-Badge default: leaf rows only.
+    return kind !== 'Group';
+};
+/**
+ * Resolve "is this row kind included?" using:
+ *  - Type capabilities (unsupported kinds are never included).
+ *  - Explicit `RowScope[Exclude*]` flag when set.
+ *  - Per-type default otherwise.
+ */
+const isRowKindIncluded = (styledColumn, kind) => {
+    if (!(0, styledColumnRowKindSupport_1.isStyledColumnRowKindSupported)(styledColumn, kind)) {
+        return false;
+    }
+    const scope = styledColumn.RowScope;
+    if (scope) {
+        // Missing flags default to "include" — same semantics as FormatColumn.
+        return !scope[styledColumnRowKindSupport_1.STYLED_COLUMN_ROW_KIND_EXCLUDE_KEY[kind]];
+    }
+    return defaultRowKindIncluded(styledColumn, kind);
+};
+const collectIncludedRowKinds = (styledColumn) => {
+    return styledColumnRowKindSupport_1.STYLED_COLUMN_ROW_KINDS.filter((k) => isRowKindIncluded(styledColumn, k));
+};
+// ---------------------------------------------------------------------------
+// Summary
+// ---------------------------------------------------------------------------
+const renderStyledColumnScopeSummary = (data) => {
+    const { api } = (0, OnePageAdaptableWizard_1.useOnePageAdaptableWizardContext)();
+    const includedKinds = collectIncludedRowKinds(data);
+    const allKinds = includedKinds.length === 4;
+    return ((0, jsx_runtime_1.jsxs)(Flex_1.Box, { className: "twa:pr-2 twa:py-2", children: [(0, jsx_runtime_1.jsxs)(Flex_1.Box, { className: "twa:mt-1", children: ["Column:", ' ', (0, jsx_runtime_1.jsx)(Tag_1.Tag, { children: data.ColumnId
+                            ? api.columnApi.getFriendlyNameForColumnId(data.ColumnId)
+                            : 'No Column Selected' })] }), (0, jsx_runtime_1.jsxs)(Flex_1.Box, { className: "twa:mt-2", children: ["Rows:", ' ', allKinds ? ((0, jsx_runtime_1.jsx)(Tag_1.Tag, { children: "All" })) : includedKinds.length === 0 ? ((0, jsx_runtime_1.jsx)(Tag_1.Tag, { children: "None" })) : (includedKinds.map((k) => ((0, jsx_runtime_1.jsx)(Tag_1.Tag, { className: "twa:mr-1", children: k }, k))))] })] }));
+};
+exports.renderStyledColumnScopeSummary = renderStyledColumnScopeSummary;
+/** Used by the styled column list view (one-line "Rows: Data, Group, …"). */
+const collectIncludedRowKindLabels = (styledColumn) => collectIncludedRowKinds(styledColumn);
+exports.collectIncludedRowKindLabels = collectIncludedRowKindLabels;
+// ---------------------------------------------------------------------------
+// Validity
+// ---------------------------------------------------------------------------
+const isValidStyledColumnScope = (data, api) => {
+    if (!data.ColumnId) {
+        return 'Please select a column for the Styled Column.';
+    }
+    if (data.IconStyle &&
+        (0, iconStyledColumnColumnSupport_1.isUnsupportedColumnDataTypeForIconStyle)(api.columnApi.getColumnDataTypeForColumnId(data.ColumnId))) {
+        return 'Icon Style applies to scalar cell values only. Choose a numeric or plain text column, or use Badge Style for array columns.';
+    }
+    if (collectIncludedRowKinds(data).length === 0) {
+        return 'Pick at least one row kind to render the style on.';
+    }
+    return true;
+};
+exports.isValidStyledColumnScope = isValidStyledColumnScope;
+const StyledColumnWizardScopeSection = (props) => {
+    const { data, api } = (0, OnePageAdaptableWizard_1.useOnePageAdaptableWizardContext)();
+    // Strip impossible `RowScope` flags when the styled column type cannot
+    // ever target a row kind (e.g. Sparkline → data rows only).
+    React.useEffect(() => {
+        const next = (0, styledColumnRowKindSupport_1.sanitizeStyledColumnRowScope)(data);
+        if (!next) {
+            return;
+        }
+        props.onChange({
+            ...data,
+            RowScope: next,
+        });
+    }, [
+        data.Uuid,
+        data.SparklineStyle,
+        data.GradientStyle,
+        data.PercentBarStyle,
+        data.BulletChartStyle,
+        data.RangeBarStyle,
+        data.RatingStyle,
+        data.BadgeStyle,
+        data.IconStyle,
+        data.RowScope?.ExcludeDataRows,
+        data.RowScope?.ExcludeGroupRows,
+        data.RowScope?.ExcludeSummaryRows,
+        data.RowScope?.ExcludeTotalRows,
+    ]);
+    // Icon Style must not retain an array-typed ColumnId when the user swaps
+    // type (or loads invalid state): clear so the picker and validation align.
+    React.useEffect(() => {
+        if (!data.IconStyle || !data.ColumnId) {
+            return;
+        }
+        const dt = api.columnApi.getColumnDataTypeForColumnId(data.ColumnId);
+        if ((0, iconStyledColumnColumnSupport_1.isUnsupportedColumnDataTypeForIconStyle)(dt)) {
+            props.onChange({
+                ...data,
+                ColumnId: undefined,
+            });
+        }
+    }, [data.Uuid, data.IconStyle, data.ColumnId]);
+    // -------------------------------------------------------------------------
+    // Column picker
+    // -------------------------------------------------------------------------
+    const sortableCols = React.useMemo(() => {
+        let sortableColumns = [];
+        if (data.SparklineStyle) {
+            sortableColumns = api.columnApi.getNumericArrayColumns();
+        }
+        else if (data.IconStyle) {
+            sortableColumns = [
+                ...api.columnApi.getNumericColumns(),
+                ...api.columnApi.getTextColumns(),
+            ];
+        }
+        else if (data.BadgeStyle) {
+            sortableColumns = [
+                ...api.columnApi.getNumericColumns(),
+                ...api.columnApi.getTextColumns(),
+                ...api.columnApi.getTextArrayColumns(),
+                ...api.columnApi.getNumberArrayColumns(),
+            ];
+        }
+        else {
+            // Gradient / PercentBar / BulletChart / Rating / RangeBar - numeric only.
+            sortableColumns = api.columnApi.getNumericColumns();
+        }
+        const styledColumns = api.styledColumnApi.getStyledColumns();
+        const usedColumnIds = styledColumns
+            .map((styledColumn) => {
+            if (styledColumn.Uuid === data.Uuid) {
+                return null;
+            }
+            return styledColumn.ColumnId;
+        })
+            .filter(Boolean);
+        return sortableColumns.filter((column) => usedColumnIds.every((usedColumnId) => column.columnId !== usedColumnId));
+    }, [data]);
+    const handleColumnsChange = (columnIds) => {
+        const columnId = columnIds[0];
+        const emptyRanges = api.columnScopeApi.createCellColorRangesForScope({
+            ColumnIds: [columnId],
+        });
+        const newStyledColumn = {
+            ...data,
+            ColumnId: columnId,
+        };
+        if (newStyledColumn.PercentBarStyle) {
+            newStyledColumn.PercentBarStyle = {
+                ...newStyledColumn.PercentBarStyle,
+                CellRanges: emptyRanges,
+            };
+        }
+        if (newStyledColumn.GradientStyle) {
+            newStyledColumn.GradientStyle = {
+                ...newStyledColumn.GradientStyle,
+                CellRanges: emptyRanges,
+            };
+        }
+        if (newStyledColumn.BulletChartStyle) {
+            newStyledColumn.BulletChartStyle = {
+                ...newStyledColumn.BulletChartStyle,
+                CellRanges: emptyRanges,
+            };
+        }
+        props.onChange(newStyledColumn);
+    };
+    const [columnsSearchText, setColumnsSearchText] = React.useState('');
+    // -------------------------------------------------------------------------
+    // Row-kind toggles
+    // -------------------------------------------------------------------------
+    const handleRowKindChange = (kind, include) => {
+        if (!(0, styledColumnRowKindSupport_1.isStyledColumnRowKindSupported)(data, kind)) {
+            return;
+        }
+        // Materialise an explicit RowScope as soon as the user touches a
+        // checkbox. We start from the per-type default so any kinds the user
+        // didn't touch carry over their historical value (e.g. group rows
+        // stay excluded for a Gradient column even after the user toggles
+        // summary rows).
+        const baseScope = data.RowScope ?? {
+            ExcludeDataRows: !defaultRowKindIncluded(data, 'Data'),
+            ExcludeGroupRows: !defaultRowKindIncluded(data, 'Group'),
+            ExcludeSummaryRows: !defaultRowKindIncluded(data, 'Summary'),
+            ExcludeTotalRows: !defaultRowKindIncluded(data, 'Total'),
+        };
+        const nextScope = {
+            ...baseScope,
+            [styledColumnRowKindSupport_1.STYLED_COLUMN_ROW_KIND_EXCLUDE_KEY[kind]]: !include,
+        };
+        props.onChange({
+            ...data,
+            RowScope: nextScope,
+        });
+    };
+    // -------------------------------------------------------------------------
+    // Render
+    // -------------------------------------------------------------------------
+    return ((0, jsx_runtime_1.jsxs)(Flex_1.Flex, { flexDirection: "column", style: { height: '100%' }, children: [(0, jsx_runtime_1.jsxs)(Flex_1.Flex, { flexDirection: "column", className: "twa:flex-1 twa:min-h-0", children: [(0, jsx_runtime_1.jsxs)(Flex_1.Flex, { flexDirection: "row", alignItems: "center", className: "twa:p-2 twa:gap-3 twa:border-b twa:border-b-text-on-defaultbackground/20", children: [(0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:text-5 twa:font-medium", children: "Column" }), (0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:text-xs twa:opacity-70", children: "The Column the Style is applied to" }), (0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:flex-1" }), (0, jsx_runtime_1.jsx)(AdaptableFormControlTextClear_1.AdaptableFormControlTextClear, { value: columnsSearchText, OnTextChange: setColumnsSearchText, placeholder: "Type to search columns", style: { flex: 1, maxWidth: 320 } })] }), (0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:flex-1 twa:min-h-0 twa:overflow-auto", children: (0, jsx_runtime_1.jsx)(ColumnSelector_1.NewColumnSelector, { columnFilterText: columnsSearchText, availableColumns: sortableCols, selected: data.ColumnId ? [data.ColumnId] : [], singleSelect: true, onChange: handleColumnsChange, allowReorder: false }) })] }), (0, jsx_runtime_1.jsxs)(Flex_1.Box, { className: "twa:border-t twa:border-border twa:px-2 twa:py-3 twa:shrink-0", children: [(0, jsx_runtime_1.jsxs)(Flex_1.Flex, { alignItems: "center", className: "twa:gap-3 twa:pb-2 twa:mb-3 twa:flex-wrap twa:border-b twa:border-b-text-on-defaultbackground/20", children: [(0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:text-5 twa:font-medium", children: "Rows" }), (0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:text-xs twa:opacity-70 twa:max-w-[520px]", children: "Which kinds of Rows should the Styled Column render on" })] }), (0, jsx_runtime_1.jsx)(Flex_1.Flex, { flexDirection: "row", className: "twa:gap-6 twa:flex-wrap", children: [
+                            styledColumnRowKindSupport_1.STYLED_COLUMN_ROW_KINDS.slice(0, 2),
+                            styledColumnRowKindSupport_1.STYLED_COLUMN_ROW_KINDS.slice(2),
+                        ].map((rowKindGroup, groupIndex) => ((0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:flex-1 twa:min-w-[220px]", children: (0, jsx_runtime_1.jsx)(FormLayout_1.default, { sizes: ['180px', '1fr'], children: rowKindGroup.map((kind) => {
+                                    const supported = (0, styledColumnRowKindSupport_1.isStyledColumnRowKindSupported)(data, kind);
+                                    const disabledReason = (0, styledColumnRowKindSupport_1.getStyledColumnRowKindDisabledReason)(data, kind);
+                                    return ((0, jsx_runtime_1.jsx)(FormLayout_1.FormRow, { label: `${ROW_KIND_LABELS[kind]}:`, children: (0, jsx_runtime_1.jsx)(Flex_1.Flex, { alignItems: "center", className: "twa:ml-2", children: (0, jsx_runtime_1.jsx)(CheckBox_1.CheckBox, { "data-name": `include-${kind.toLowerCase()}-rows-checkbox`, className: "twa:mr-2", disabled: !supported, title: disabledReason, checked: isRowKindIncluded(data, kind), onChange: (checked) => handleRowKindChange(kind, checked) }) }) }, kind));
+                                }) }) }, groupIndex))) })] })] }));
+};
+exports.StyledColumnWizardScopeSection = StyledColumnWizardScopeSection;

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

@@ -0,0 +1,22 @@
+import * as React from 'react';
+import { CellColorRange, ColumnComparison, GradientStyle, GradientZeroCentredColors, NumericStyledColumn } from '../../../../../AdaptableState/StyledColumnState';
+import { AdaptableApi } from '../../../../../types';
+export declare function gradientRangeStripCss(color: string, reverseGradient: boolean, minAlpha: number, maxAlpha: number): string;
+export interface GradientRangesSummaryPreviewProps {
+    ranges?: CellColorRange[];
+    zeroCentred?: GradientZeroCentredColors;
+    rangeValueType: NumericStyledColumn['RangeValueType'];
+    gradientStyle?: Pick<GradientStyle, 'MinAlpha' | 'MaxAlpha'>;
+}
+/**
+ * Visual summary of Gradient cell ranges: shows an alpha ramp per range
+ * (instead of a flat colour swatch). Zero-centred and legacy diverging
+ * `Col-Min..0` + `0..Col-Max` pairs render as a single split strip.
+ */
+export declare const GradientRangesSummaryPreview: React.FC<GradientRangesSummaryPreviewProps>;
+export interface GradientColumnComparisonSummaryPreviewProps {
+    columnComparison: ColumnComparison;
+    gradientStyle?: Pick<GradientStyle, 'MinAlpha' | 'MaxAlpha'>;
+    api: AdaptableApi;
+}
+export declare const GradientColumnComparisonSummaryPreview: React.FC<GradientColumnComparisonSummaryPreviewProps>;

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

@@ -0,0 +1,78 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.GradientColumnComparisonSummaryPreview = exports.GradientRangesSummaryPreview = void 0;
+exports.gradientRangeStripCss = gradientRangeStripCss;
+const tslib_1 = require("tslib");
+const jsx_runtime_1 = require("react/jsx-runtime");
+const tinycolor2_1 = tslib_1.__importDefault(require("tinycolor2"));
+const Flex_1 = require("../../../../../components/Flex");
+const StyleHelper_1 = require("../../../../../Utilities/Helpers/StyleHelper");
+const StyledColumnGradientHelper_1 = require("../../../../../Utilities/Helpers/StyledColumnGradientHelper");
+function clamp01(n) {
+    if (Number.isNaN(n)) {
+        return 0;
+    }
+    return Math.min(1, Math.max(0, n));
+}
+function gradientRangeStripCss(color, reverseGradient, minAlpha, maxAlpha) {
+    const prepared = (0, StyleHelper_1.getVariableColor)(color);
+    const lo = Math.min(clamp01(minAlpha), clamp01(maxAlpha));
+    const hi = Math.max(clamp01(minAlpha), clamp01(maxAlpha));
+    const leftA = reverseGradient ? hi : lo;
+    const rightA = reverseGradient ? lo : hi;
+    const c1 = (0, tinycolor2_1.default)(prepared).setAlpha(leftA).toRgbString();
+    const c2 = (0, tinycolor2_1.default)(prepared).setAlpha(rightA).toRgbString();
+    return `linear-gradient(to right, ${c1}, ${c2})`;
+}
+function isDivergingZeroPair(ranges) {
+    if (!ranges || ranges.length !== 2) {
+        return false;
+    }
+    const [a, b] = ranges;
+    return a.Max === 0 && b.Min === 0;
+}
+const stripClassName = 'twa:h-6 twa:w-[128px] twa:rounded twa:overflow-hidden twa:border twa:border-[color-mix(in_srgb,var(--ab-color-foreground)_15%,transparent)]';
+function zeroCentredSplitPreview(negativeColor, positiveColor, postfix, minA, maxA) {
+    return ((0, jsx_runtime_1.jsxs)(Flex_1.Flex, { flexDirection: "column", className: "twa:gap-2", children: [(0, jsx_runtime_1.jsxs)(Flex_1.Flex, { alignItems: "center", className: "twa:flex-wrap twa:gap-2", children: [(0, jsx_runtime_1.jsxs)(Flex_1.Box, { className: "twa:text-sm", children: ["Col-Min", postfix, " \u2192 0", postfix] }), (0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:text-xs twa:opacity-50", children: "|" }), (0, jsx_runtime_1.jsxs)(Flex_1.Box, { className: "twa:text-sm", children: ["0", postfix, " \u2192 Col-Max", postfix] })] }), (0, jsx_runtime_1.jsxs)(Flex_1.Flex, { className: `${stripClassName} twa:w-[200px]`, children: [(0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:flex-1", style: {
+                            background: gradientRangeStripCss(negativeColor, true, minA, maxA),
+                        } }), (0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:flex-1", style: {
+                            background: gradientRangeStripCss(positiveColor, false, minA, maxA),
+                        } })] })] }));
+}
+/**
+ * Visual summary of Gradient cell ranges: shows an alpha ramp per range
+ * (instead of a flat colour swatch). Zero-centred and legacy diverging
+ * `Col-Min..0` + `0..Col-Max` pairs render as a single split strip.
+ */
+const GradientRangesSummaryPreview = (props) => {
+    const minA = props.gradientStyle?.MinAlpha ?? StyledColumnGradientHelper_1.DEFAULT_GRADIENT_MIN_ALPHA;
+    const maxA = props.gradientStyle?.MaxAlpha ?? StyledColumnGradientHelper_1.DEFAULT_GRADIENT_MAX_ALPHA;
+    const postfix = (props.rangeValueType ?? 'Number') === 'Percentage' ? '%' : '';
+    if (props.zeroCentred) {
+        return zeroCentredSplitPreview(props.zeroCentred.NegativeColor, props.zeroCentred.PositiveColor, postfix, minA, maxA);
+    }
+    const ranges = props.ranges ?? [];
+    if (isDivergingZeroPair(ranges)) {
+        const [r0, r1] = ranges;
+        return ((0, jsx_runtime_1.jsxs)(Flex_1.Flex, { flexDirection: "column", className: "twa:gap-2", children: [(0, jsx_runtime_1.jsxs)(Flex_1.Flex, { alignItems: "center", className: "twa:flex-wrap twa:gap-2", children: [(0, jsx_runtime_1.jsxs)(Flex_1.Box, { className: "twa:text-sm", children: [r0.Min, postfix, " \u2192 ", r0.Max, postfix] }), (0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:text-xs twa:opacity-50", children: "|" }), (0, jsx_runtime_1.jsxs)(Flex_1.Box, { className: "twa:text-sm", children: [r1.Min, postfix, " \u2192 ", r1.Max, postfix] })] }), (0, jsx_runtime_1.jsxs)(Flex_1.Flex, { className: `${stripClassName} twa:w-[200px]`, children: [(0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:flex-1", style: {
+                                background: gradientRangeStripCss(r0.Color, !!r0.ReverseGradient, minA, maxA),
+                            } }), (0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:flex-1", style: {
+                                background: gradientRangeStripCss(r1.Color, !!r1.ReverseGradient, minA, maxA),
+                            } })] })] }));
+    }
+    return ((0, jsx_runtime_1.jsx)(Flex_1.Flex, { flexDirection: "column", className: "twa:gap-2", children: ranges.map((r, i) => ((0, jsx_runtime_1.jsxs)(Flex_1.Flex, { alignItems: "center", className: "twa:flex-wrap twa:gap-2", children: [(0, jsx_runtime_1.jsxs)(Flex_1.Box, { className: "twa:text-sm twa:min-w-[120px]", children: [r.Min, postfix, " to ", r.Max, postfix] }), (0, jsx_runtime_1.jsx)(Flex_1.Box, { className: stripClassName, style: {
+                        background: gradientRangeStripCss(r.Color, !!r.ReverseGradient, minA, maxA),
+                    } })] }, i))) }));
+};
+exports.GradientRangesSummaryPreview = GradientRangesSummaryPreview;
+const GradientColumnComparisonSummaryPreview = (props) => {
+    const minA = props.gradientStyle?.MinAlpha ?? StyledColumnGradientHelper_1.DEFAULT_GRADIENT_MIN_ALPHA;
+    const maxA = props.gradientStyle?.MaxAlpha ?? StyledColumnGradientHelper_1.DEFAULT_GRADIENT_MAX_ALPHA;
+    const fmt = (v) => isNaN(Number(v))
+        ? `[${props.api.columnApi.getFriendlyNameForColumnId(String(v))}]`
+        : v;
+    return ((0, jsx_runtime_1.jsxs)(Flex_1.Flex, { flexDirection: "column", className: "twa:gap-2", children: [(0, jsx_runtime_1.jsxs)(Flex_1.Box, { className: "twa:text-sm", children: ["Min: ", fmt(props.columnComparison.MinValue), " \u2014 Max:", ' ', fmt(props.columnComparison.MaxValue)] }), (0, jsx_runtime_1.jsx)(Flex_1.Box, { className: `${stripClassName} twa:w-[200px]`, style: {
+                    background: gradientRangeStripCss(props.columnComparison.Color, false, minA, maxA),
+                } })] }));
+};
+exports.GradientColumnComparisonSummaryPreview = GradientColumnComparisonSummaryPreview;

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

@@ -1,26 +1,17 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.PercentBarColumnComparisonPreview = void 0;
-const tslib_1 = require("tslib");
-const React = tslib_1.__importStar(require("react"));
+const jsx_runtime_1 = require("react/jsx-runtime");
 const AdaptableContext_1 = require("../../../../AdaptableContext");
 const PercentBarStylePreview_1 = require("./PercentBarStylePreview");
 const Flex_1 = require("../../../../../components/Flex");
 const PercentBarColumnComparisonPreview = (props) => {
     const { api } = (0, AdaptableContext_1.useAdaptable)();
     const columnComparison = props.percentBarStyle.ColumnComparison;
-    return (React.createElement(Flex_1.Flex, { alignItems: "center", className: "twa:mr-3" },
-        React.createElement(Flex_1.Box, { className: "twa:basis-[120px] twa:mr-3" },
-            isNaN(Number(columnComparison.MinValue))
-                ? '[' + api.columnApi.getFriendlyNameForColumnId(String(columnComparison.MinValue)) + ']'
-                : columnComparison.MinValue,
-            ' ',
-            "to",
-            ' ',
-            isNaN(Number(columnComparison.MaxValue))
-                ? '[' + api.columnApi.getFriendlyNameForColumnId(String(columnComparison.MaxValue)) + ']'
-                : columnComparison.MaxValue,
-            ' '),
-        React.createElement(PercentBarStylePreview_1.PercentBarStylePreview, { backgroundColor: columnComparison.Color, barBackgroundColor: props.percentBarStyle.BackColor, cellText: props.percentBarStyle.CellText, toolTipText: props.percentBarStyle.ToolTipText })));
+    return ((0, jsx_runtime_1.jsxs)(Flex_1.Flex, { alignItems: "center", className: "twa:mr-3", children: [(0, jsx_runtime_1.jsxs)(Flex_1.Box, { className: "twa:basis-[120px] twa:mr-3", children: [isNaN(Number(columnComparison.MinValue))
+                        ? '[' + api.columnApi.getFriendlyNameForColumnId(String(columnComparison.MinValue)) + ']'
+                        : columnComparison.MinValue, ' ', "to", ' ', isNaN(Number(columnComparison.MaxValue))
+                        ? '[' + api.columnApi.getFriendlyNameForColumnId(String(columnComparison.MaxValue)) + ']'
+                        : columnComparison.MaxValue, ' '] }), (0, jsx_runtime_1.jsx)(PercentBarStylePreview_1.PercentBarStylePreview, { backgroundColor: columnComparison.Color, barBackgroundColor: props.percentBarStyle.BackColor, cellText: props.percentBarStyle.CellText, toolTipText: props.percentBarStyle.ToolTipText })] }));
 };
 exports.PercentBarColumnComparisonPreview = PercentBarColumnComparisonPreview;

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

@@ -1,8 +1,7 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.PercentBarPreview = void 0;
-const tslib_1 = require("tslib");
-const React = tslib_1.__importStar(require("react"));
+const jsx_runtime_1 = require("react/jsx-runtime");
 const PercentBarStylePreview_1 = require("./PercentBarStylePreview");
 const Flex_1 = require("../../../../../components/Flex");
 const PercentBarPreview = (props) => {
@@ -10,13 +9,6 @@ const PercentBarPreview = (props) => {
     if (props.percentBarStyle.RangeValueType === 'Percentage') {
         postfix = '%';
     }
-    return (React.createElement(React.Fragment, null, props.percentBarStyle.CellRanges.map((range, i) => (React.createElement(Flex_1.Flex, { key: i, alignItems: "stretch", className: "twa:mr-3 twa:mb-2" },
-        React.createElement(Flex_1.Flex, { className: "twa:basis-[120px] twa:mr-3", alignItems: "center" },
-            range.Min,
-            postfix,
-            " to ",
-            range.Max,
-            postfix),
-        React.createElement(PercentBarStylePreview_1.PercentBarStylePreview, { backgroundColor: props.percentBarStyle.BackColor, barBackgroundColor: range.Color, cellText: props.percentBarStyle.CellText, toolTipText: props.percentBarStyle.ToolTipText }))))));
+    return ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: props.percentBarStyle.CellRanges.map((range, i) => ((0, jsx_runtime_1.jsxs)(Flex_1.Flex, { alignItems: "stretch", className: "twa:mr-3 twa:mb-2", children: [(0, jsx_runtime_1.jsxs)(Flex_1.Flex, { className: "twa:basis-[120px] twa:mr-3", alignItems: "center", children: [range.Min, postfix, " to ", range.Max, postfix] }), (0, jsx_runtime_1.jsx)(PercentBarStylePreview_1.PercentBarStylePreview, { backgroundColor: props.percentBarStyle.BackColor, barBackgroundColor: range.Color, cellText: props.percentBarStyle.CellText, toolTipText: props.percentBarStyle.ToolTipText })] }, i))) }));
 };
 exports.PercentBarPreview = PercentBarPreview;

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

@@ -1,8 +1,7 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.PercentBarStylePreview = void 0;
-const tslib_1 = require("tslib");
-const React = tslib_1.__importStar(require("react"));
+const jsx_runtime_1 = require("react/jsx-runtime");
 const Flex_1 = require("../../../../../components/Flex");
 const getText = (options) => {
     let text = '';
@@ -17,9 +16,6 @@ const getText = (options) => {
 const PercentBarStylePreview = (props) => {
     const cellText = getText(props.cellText);
     const tooltip = getText(props.toolTipText);
-    return (React.createElement(Flex_1.Box, { title: tooltip, className: "twa:flex-1" },
-        React.createElement(Flex_1.Flex, { style: { backgroundColor: props.backgroundColor }, className: `twa:flex-1 ${cellText ? 'twa:h-[8px]' : 'twa:h-[18px]'}` },
-            React.createElement(Flex_1.Box, { className: "twa:basis-[50%]", style: { background: props.barBackgroundColor } })),
-        cellText && React.createElement(Flex_1.Box, { className: "twa:text-3" }, cellText)));
+    return ((0, jsx_runtime_1.jsxs)(Flex_1.Box, { title: tooltip, className: "twa:flex-1", children: [(0, jsx_runtime_1.jsx)(Flex_1.Flex, { style: { backgroundColor: props.backgroundColor }, className: `twa:flex-1 ${cellText ? 'twa:h-[8px]' : 'twa:h-[18px]'}`, children: (0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:basis-[50%]", style: { background: props.barBackgroundColor } }) }), cellText && (0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:text-3", children: cellText })] }));
 };
 exports.PercentBarStylePreview = PercentBarStylePreview;

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

@@ -1,5 +1,10 @@
 import * as React from 'react';
 import { StyledColumn } from '../../../../../types';
+/**
+ * Pixel-parity preview of the badges as they would render in the cell.
+ * Uses the same wrapper/badge classes (and the same `Badge` component) as
+ * `BadgeRenderer` so the wizard summary matches the grid output exactly.
+ */
 export declare const StyledColumnBadgePreview: React.FunctionComponent<React.PropsWithChildren<{
     data: StyledColumn;
 }>>;

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

@@ -1,26 +1,38 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.StyledColumnBadgePreview = void 0;
-const tslib_1 = require("tslib");
-const React = tslib_1.__importStar(require("react"));
+const jsx_runtime_1 = require("react/jsx-runtime");
 const GeneralConstants_1 = require("../../../../../Utilities/Constants/GeneralConstants");
 const AdaptableContext_1 = require("../../../../AdaptableContext");
 const Badge_1 = require("../../../../Components/Badge");
 const Flex_1 = require("../../../../../components/Flex");
+const OVERFLOW_CLASS = {
+    Truncate: 'ab-Badge__wrapper--truncate',
+    Wrap: 'ab-Badge__wrapper--wrap',
+    Scroll: 'ab-Badge__wrapper--scroll',
+};
+/**
+ * Pixel-parity preview of the badges as they would render in the cell.
+ * Uses the same wrapper/badge classes (and the same `Badge` component) as
+ * `BadgeRenderer` so the wizard summary matches the grid output exactly.
+ */
 const StyledColumnBadgePreview = ({ data }) => {
     const adaptable = (0, AdaptableContext_1.useAdaptable)();
     const badgeStyle = data.BadgeStyle;
-    if (!badgeStyle || badgeStyle.Badges.length === 0) {
-        return React.createElement("div", null, "No Badges Defined");
+    if (!badgeStyle || !badgeStyle.Badges || badgeStyle.Badges.length === 0) {
+        return (0, jsx_runtime_1.jsx)("div", { children: "No Badges Defined" });
     }
-    return (React.createElement(Flex_1.Flex, { flexDirection: "column" }, badgeStyle.Badges.map((badge, index) => {
-        const badgeValue = badge.IconOnly
-            ? ''
-            : adaptable.api.columnApi.getColumnDataTypeForColumnId(data.ColumnId) === 'number'
-                ? GeneralConstants_1.DEFAULT_INTEGER_DISPLAY_VALUE
-                : GeneralConstants_1.DEFAULT_STRING_DISPLAY_VALUE;
-        return (React.createElement(Flex_1.Box, { className: "twa:mb-1", key: index },
-            React.createElement(Badge_1.Badge, { icon: badge.Icon, adaptableStyle: badge.Style, iconPosition: badge.IconPosition }, badgeValue)));
-    })));
+    const overflow = badgeStyle.OverflowMode ?? 'Truncate';
+    const wrapperClassName = `ab-Badge__wrapper ${OVERFLOW_CLASS[overflow]}`;
+    const spacing = typeof badgeStyle.Spacing === 'number' ? badgeStyle.Spacing : null;
+    const dataType = adaptable.api.columnApi.getColumnDataTypeForColumnId(data.ColumnId);
+    return ((0, jsx_runtime_1.jsx)(Flex_1.Box, { children: (0, jsx_runtime_1.jsx)("div", { className: wrapperClassName, style: spacing != null ? { ['--ab-cmp-badge__spacing']: `${spacing}px` } : undefined, children: badgeStyle.Badges.map((badge, index) => {
+                const badgeValue = badge.IconOnly
+                    ? ''
+                    : dataType === 'number'
+                        ? GeneralConstants_1.DEFAULT_INTEGER_DISPLAY_VALUE
+                        : GeneralConstants_1.DEFAULT_STRING_DISPLAY_VALUE;
+                return ((0, jsx_runtime_1.jsx)(Badge_1.Badge, { icon: badge.Icon, pillStyle: badge.PillStyle, iconPosition: badge.IconPosition, shape: badge.Shape, density: badgeStyle.Density ?? 'Normal', iconGap: badge.IconGap, children: badgeValue }, index));
+            }) }) }));
 };
 exports.StyledColumnBadgePreview = StyledColumnBadgePreview;

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

@@ -1,32 +1,32 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.StyledColumnBadgeSettings = void 0;
-const tslib_1 = require("tslib");
-const React = tslib_1.__importStar(require("react"));
+const jsx_runtime_1 = require("react/jsx-runtime");
 const Tag_1 = require("../../../../../components/Tag");
 const AdaptableContext_1 = require("../../../../AdaptableContext");
 const Flex_1 = require("../../../../../components/Flex");
 const StyledColumnBadgeSettings = ({ data }) => {
     const adaptable = (0, AdaptableContext_1.useAdaptable)();
     const badgeStyle = data.BadgeStyle;
-    if (!badgeStyle || badgeStyle.Badges.length === 0) {
-        return React.createElement("div", null, "No Badges Defined");
+    if (!badgeStyle || !badgeStyle.Badges || badgeStyle.Badges.length === 0) {
+        return (0, jsx_runtime_1.jsx)("div", { children: "No Badges Defined" });
     }
-    return (React.createElement(Flex_1.Flex, { flexDirection: "column" }, badgeStyle.Badges.map((badge, index) => {
-        let ruleString = 'No Rule';
-        if (badge.Predicate) {
-            ruleString = adaptable.api.predicateApi.predicateToString(badge.Predicate);
-        }
-        if (badge.Expression) {
-            ruleString = badge.Expression.BooleanExpression;
-        }
-        const iconOnly = badge.Icon && badge.IconOnly;
-        const hasIconPosition = badge.Icon && badge.IconPosition;
-        const iconPosition = hasIconPosition ? 'Icon Position: ' + badge.IconPosition : '';
-        return (React.createElement(Flex_1.Box, { className: "twa:my-2", key: index },
-            React.createElement(Tag_1.Tag, null, ruleString),
-            iconOnly && React.createElement(Tag_1.Tag, { className: "twa:ml-2" }, 'Icon Only'),
-            hasIconPosition && React.createElement(Tag_1.Tag, { className: "twa:ml-2" }, iconPosition)));
-    })));
+    const density = badgeStyle.Density ?? 'Normal';
+    const spacing = typeof badgeStyle.Spacing === 'number' ? badgeStyle.Spacing : null;
+    const overflowMode = badgeStyle.OverflowMode ?? 'Truncate';
+    return ((0, jsx_runtime_1.jsxs)(Flex_1.Flex, { flexDirection: "column", children: [(0, jsx_runtime_1.jsxs)(Flex_1.Flex, { className: "twa:my-1 twa:flex-wrap twa:gap-2", children: [(0, jsx_runtime_1.jsxs)(Tag_1.Tag, { children: ["Density: ", density] }), spacing != null && (0, jsx_runtime_1.jsxs)(Tag_1.Tag, { children: ["Spacing: ", spacing, "px"] }), (0, jsx_runtime_1.jsxs)(Tag_1.Tag, { children: ["Overflow: ", overflowMode] })] }), badgeStyle.Badges.map((badge, index) => {
+                let ruleString = 'No Rule';
+                if (badge.Predicate) {
+                    ruleString = adaptable.api.predicateApi.predicateToString(badge.Predicate);
+                }
+                if (badge.Expression) {
+                    ruleString = badge.Expression.BooleanExpression;
+                }
+                const iconOnly = badge.Icon && badge.IconOnly;
+                const hasIconPosition = badge.Icon && badge.IconPosition;
+                const iconPosition = hasIconPosition ? 'Icon Position: ' + badge.IconPosition : '';
+                const shape = badge.Shape;
+                return ((0, jsx_runtime_1.jsxs)(Flex_1.Box, { className: "twa:my-2", children: [(0, jsx_runtime_1.jsx)(Tag_1.Tag, { children: ruleString }), shape && (0, jsx_runtime_1.jsx)(Tag_1.Tag, { className: "twa:ml-2", children: `Shape: ${shape}` }), iconOnly && (0, jsx_runtime_1.jsx)(Tag_1.Tag, { className: "twa:ml-2", children: 'Icon Only' }), hasIconPosition && (0, jsx_runtime_1.jsx)(Tag_1.Tag, { className: "twa:ml-2", children: iconPosition }), typeof badge.IconGap === 'number' && ((0, jsx_runtime_1.jsx)(Tag_1.Tag, { className: "twa:ml-2", children: `Icon Gap: ${badge.IconGap}px` }))] }, index));
+            })] }));
 };
 exports.StyledColumnBadgeSettings = StyledColumnBadgeSettings;

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

@@ -0,0 +1,16 @@
+import * as React from 'react';
+import { BulletChartStyle, RangeBarStyle } from '../../../../../AdaptableState/StyledColumnState';
+/**
+ * Compact schematic of a Range Bar (bands + track + value / reference markers)
+ * for the Styled Columns object list and wizard step summaries.
+ */
+export declare const StyledColumnRangeBarListPreview: React.FC<{
+    range: RangeBarStyle;
+}>;
+/**
+ * Compact schematic of a Bullet Chart (qualitative bands + bar + target marker)
+ * for the Styled Columns object list.
+ */
+export declare const StyledColumnBulletChartListPreview: React.FC<{
+    bullet: BulletChartStyle;
+}>;