@adaptabletools/adaptable-cjs 23.0.0-canary.1 → 23.0.0-canary.10

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

@@ -1,10 +1,11 @@
 import * as React from 'react';
-import { CellColorRange, ColumnComparison, GradientStyle, GradientZeroCentredColors, NumericStyledColumn } from '../../../../../AdaptableState/StyledColumnState';
+import { CellColorRange, ColumnComparison, NumericStyledColumn } from '../../../../../AdaptableState/StyledColumns/Common/NumericStyledColumn';
+import { GradientStyle, ZeroCentredColors } from '../../../../../AdaptableState/StyledColumns/GradientStyle';
 import { AdaptableApi } from '../../../../../types';
 export declare function gradientRangeStripCss(color: string, reverseGradient: boolean, minAlpha: number, maxAlpha: number): string;
 export interface GradientRangesSummaryPreviewProps {
     ranges?: CellColorRange[];
-    zeroCentred?: GradientZeroCentredColors;
+    zeroCentred?: ZeroCentredColors;
     rangeValueType: NumericStyledColumn['RangeValueType'];
     gradientStyle?: Pick<GradientStyle, 'MinAlpha' | 'MaxAlpha'>;
 }

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

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

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

@@ -5,13 +5,13 @@ 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 Tag_1 = require("../../../../../components/Tag");
 const PercentBarColumnComparisonPreview = (props) => {
     const { api } = (0, AdaptableContext_1.useAdaptable)();
     const columnComparison = props.percentBarStyle.ColumnComparison;
-    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 })] }));
+    const fmt = (v) => isNaN(Number(v))
+        ? `[${api.columnApi.getFriendlyNameForColumnId(String(v))}]`
+        : v;
+    return ((0, jsx_runtime_1.jsxs)(Flex_1.Flex, { flexDirection: "column", className: "twa:gap-2", children: [(0, jsx_runtime_1.jsxs)(Tag_1.Tag, { children: ["Min: ", fmt(columnComparison.MinValue), " \u2014 Max: ", fmt(columnComparison.MaxValue)] }), (0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:max-w-[200px]", children: (0, jsx_runtime_1.jsx)(PercentBarStylePreview_1.PercentBarStylePreview, { backgroundColor: props.percentBarStyle.BackColor, barBackgroundColor: columnComparison.Color }) })] }));
 };
 exports.PercentBarColumnComparisonPreview = PercentBarColumnComparisonPreview;

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

@@ -4,11 +4,12 @@ exports.PercentBarPreview = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const PercentBarStylePreview_1 = require("./PercentBarStylePreview");
 const Flex_1 = require("../../../../../components/Flex");
+const Tag_1 = require("../../../../../components/Tag");
 const PercentBarPreview = (props) => {
     let postfix = '';
     if (props.percentBarStyle.RangeValueType === 'Percentage') {
         postfix = '%';
     }
-    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))) }));
+    return ((0, jsx_runtime_1.jsx)(Flex_1.Flex, { flexDirection: "column", className: "twa:gap-2", children: props.percentBarStyle.CellRanges.map((range, i) => ((0, jsx_runtime_1.jsxs)(Flex_1.Flex, { alignItems: "stretch", className: "twa:flex-wrap twa:gap-2", children: [(0, jsx_runtime_1.jsxs)(Tag_1.Tag, { children: [range.Min, postfix, " \u2192 ", range.Max, postfix] }), (0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:flex-1 twa:min-w-[120px]", children: (0, jsx_runtime_1.jsx)(PercentBarStylePreview_1.PercentBarStylePreview, { backgroundColor: props.percentBarStyle.BackColor, barBackgroundColor: range.Color }) })] }, i))) }));
 };
 exports.PercentBarPreview = PercentBarPreview;

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

@@ -1,8 +1,9 @@
 import * as React from 'react';
-import { CellTextOptions } from '../../../../../types';
+/**
+ * Compact range-colour strip for Percent Bar range summaries.
+ * Cell text / origin / font are shown in `StyledColumnPercentBarPreview`.
+ */
 export declare const PercentBarStylePreview: React.FunctionComponent<{
-    backgroundColor: string;
+    backgroundColor?: string | null;
     barBackgroundColor?: string;
-    cellText?: CellTextOptions;
-    toolTipText?: CellTextOptions;
 }>;

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

@@ -3,19 +3,17 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.PercentBarStylePreview = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const Flex_1 = require("../../../../../components/Flex");
-const getText = (options) => {
-    let text = '';
-    if (options && options.includes('CellValue')) {
-        text += '20';
-    }
-    if (options && options.includes('PercentageValue')) {
-        text += ' (50%)';
-    }
-    return text.trim();
-};
+const StyleHelper_1 = require("../../../../../Utilities/Helpers/StyleHelper");
+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)]';
+/**
+ * Compact range-colour strip for Percent Bar range summaries.
+ * Cell text / origin / font are shown in `StyledColumnPercentBarPreview`.
+ */
 const PercentBarStylePreview = (props) => {
-    const cellText = getText(props.cellText);
-    const tooltip = getText(props.toolTipText);
-    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 })] }));
+    const trackColor = props.backgroundColor ? (0, StyleHelper_1.getVariableColor)(props.backgroundColor) : undefined;
+    const barColor = props.barBackgroundColor
+        ? (0, StyleHelper_1.getVariableColor)(props.barBackgroundColor)
+        : undefined;
+    return ((0, jsx_runtime_1.jsx)(Flex_1.Box, { className: stripClassName, children: (0, jsx_runtime_1.jsx)(Flex_1.Flex, { className: "twa:h-full twa:relative", style: trackColor ? { backgroundColor: trackColor } : undefined, children: barColor && ((0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:absolute twa:top-0 twa:left-0 twa:h-full twa:w-1/2", style: { background: barColor } })) }) }));
 };
 exports.PercentBarStylePreview = PercentBarStylePreview;

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

@@ -0,0 +1,5 @@
+import * as React from 'react';
+import { RangeBarStyle } from '../../../../../AdaptableState/StyledColumns/RangeBarStyle';
+export declare const RangeBarRangesSummaryPreview: React.FunctionComponent<{
+    rangeStyle: RangeBarStyle;
+}>;

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

@@ -0,0 +1,20 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.RangeBarRangesSummaryPreview = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const Flex_1 = require("../../../../../components/Flex");
+const Tag_1 = require("../../../../../components/Tag");
+const StyleHelper_1 = require("../../../../../Utilities/Helpers/StyleHelper");
+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)]';
+const RangeBarRangesSummaryPreview = ({ rangeStyle }) => {
+    const ranges = rangeStyle.CellRanges ?? [];
+    if (!ranges.length) {
+        return null;
+    }
+    let postfix = '';
+    if (rangeStyle.RangeValueType === 'Percentage') {
+        postfix = '%';
+    }
+    return ((0, jsx_runtime_1.jsx)(Flex_1.Flex, { flexDirection: "column", className: "twa:gap-2", children: ranges.map((range, i) => ((0, jsx_runtime_1.jsxs)(Flex_1.Flex, { alignItems: "center", className: "twa:flex-wrap twa:gap-2", children: [(0, jsx_runtime_1.jsxs)(Tag_1.Tag, { children: [range.Min, postfix, " \u2192 ", range.Max, postfix] }), (0, jsx_runtime_1.jsx)(Flex_1.Box, { className: stripClassName, style: { background: (0, StyleHelper_1.getVariableColor)(range.Color) } })] }, i))) }));
+};
+exports.RangeBarRangesSummaryPreview = RangeBarRangesSummaryPreview;

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

@@ -3,14 +3,29 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.StyledColumnBadgePreview = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const GeneralConstants_1 = require("../../../../../Utilities/Constants/GeneralConstants");
+const StyleHelper_1 = require("../../../../../Utilities/Helpers/StyleHelper");
 const AdaptableContext_1 = require("../../../../AdaptableContext");
 const Badge_1 = require("../../../../Components/Badge");
 const Flex_1 = require("../../../../../components/Flex");
+const Tag_1 = require("../../../../../components/Tag");
 const OVERFLOW_CLASS = {
     Truncate: 'ab-Badge__wrapper--truncate',
     Wrap: 'ab-Badge__wrapper--wrap',
     Scroll: 'ab-Badge__wrapper--scroll',
 };
+const PREVIEW_CELL_CLASS = 'ab-BadgePreviewCell 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 resolveBadgeRowJustify = (alignment) => {
+    switch (alignment) {
+        case 'Center':
+            return 'center';
+        case 'Right':
+            return 'flex-end';
+        case 'Left':
+            return 'flex-start';
+        default:
+            return null;
+    }
+};
 /**
  * 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
@@ -20,19 +35,31 @@ const StyledColumnBadgePreview = ({ data }) => {
     const adaptable = (0, AdaptableContext_1.useAdaptable)();
     const badgeStyle = data.BadgeStyle;
     if (!badgeStyle || !badgeStyle.Badges || badgeStyle.Badges.length === 0) {
-        return (0, jsx_runtime_1.jsx)("div", { children: "No Badges Defined" });
+        return (0, jsx_runtime_1.jsx)(Tag_1.Tag, { children: "No Badges Defined" });
     }
     const overflow = badgeStyle.OverflowMode ?? 'Truncate';
     const wrapperClassName = `ab-Badge__wrapper ${OVERFLOW_CLASS[overflow]}`;
     const spacing = typeof badgeStyle.Spacing === 'number' ? badgeStyle.Spacing : null;
+    const rowJustify = resolveBadgeRowJustify(badgeStyle.Font?.Alignment);
+    const cellStyle = badgeStyle.Cell ? (0, StyleHelper_1.convertAdaptableStyleToCSS)(badgeStyle.Cell) : undefined;
     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
+    const wrapperStyle = {
+        ...(spacing != null ? { ['--ab-cmp-badge__spacing']: `${spacing}px` } : {}),
+        ...(rowJustify
+            ? {
+                justifyContent: rowJustify,
+                width: '100%',
+            }
+            : {}),
+    };
+    return ((0, jsx_runtime_1.jsx)(Flex_1.Box, { className: PREVIEW_CELL_CLASS, style: cellStyle, children: (0, jsx_runtime_1.jsx)("div", { className: wrapperClassName, style: wrapperStyle, children: badgeStyle.Badges.map((badge, index) => {
+                const iconProps = badge.IconProperties;
+                const badgeValue = iconProps?.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));
+                return ((0, jsx_runtime_1.jsx)(Badge_1.Badge, { icon: iconProps?.Icon, pillStyle: badge.PillStyle, iconPosition: iconProps?.Position, shape: badge.Shape, density: badgeStyle.Density ?? 'Normal', iconGap: iconProps?.Gap, children: badgeValue }, index));
             }) }) }));
 };
 exports.StyledColumnBadgePreview = StyledColumnBadgePreview;

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

@@ -0,0 +1,7 @@
+import * as React from 'react';
+import { StyledColumn } from '../../../../../AdaptableState/StyledColumnState';
+import { BulletChartStyle } from '../../../../../AdaptableState/StyledColumns/BulletChartStyle';
+export declare const StyledColumnBulletPreview: React.FunctionComponent<React.PropsWithChildren<{
+    data: StyledColumn;
+}>>;
+export declare const hasBulletChartRangesConfigured: (bullet: BulletChartStyle | undefined) => boolean;

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

@@ -0,0 +1,57 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.hasBulletChartRangesConfigured = exports.StyledColumnBulletPreview = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const StyleHelper_1 = require("../../../../../Utilities/Helpers/StyleHelper");
+const BarStylesHelper_1 = require("../../../../../Utilities/Helpers/StyledColumns/BarStylesHelper");
+const Flex_1 = require("../../../../../components/Flex");
+const Tag_1 = require("../../../../../components/Tag");
+const StyledColumnChartListPreviews_1 = require("./StyledColumnChartListPreviews");
+const BarStyleCellTextPreview_1 = require("./BarStyleCellTextPreview");
+const PREVIEW_CELL_CLASS = 'ab-BulletPreviewCell twa:inline-flex twa:items-center twa:min-w-[180px] twa:min-h-[36px] twa:px-2 twa:py-1 twa:rounded-standard twa:border twa:border-[color-mix(in_srgb,var(--ab-color-foreground)_15%,transparent)]';
+const getBulletPreviewSample = (bullet) => {
+    const ranges = bullet.CellRanges ?? [];
+    const numeric = ranges.filter((range) => typeof range.Min === 'number' && typeof range.Max === 'number');
+    let min = 0;
+    let max = 100;
+    if (numeric.length) {
+        min = Math.min(...numeric.map((range) => range.Min));
+        max = Math.max(...numeric.map((range) => range.Max));
+    }
+    const span = max - min || 1;
+    // Matches the schematic bar width (~58%) in `StyledColumnBulletChartListPreview`.
+    const sampleValue = min + span * 0.58;
+    const valueFraction = (sampleValue - min) / span;
+    return {
+        sampleValue,
+        valueFraction: Math.max(0, Math.min(1, valueFraction)),
+    };
+};
+const BulletChartPreviewContent = ({ bullet, }) => {
+    const { sampleValue, valueFraction } = getBulletPreviewSample(bullet);
+    const cellTextProperties = bullet.CellTextProperties;
+    const labels = (0, BarStylesHelper_1.buildBarStyleCellTextLabels)(cellTextProperties, Number.isInteger(sampleValue) ? String(sampleValue) : sampleValue.toFixed(1), `${(valueFraction * 100).toFixed(0)}%`);
+    const hasCellText = (0, BarStylesHelper_1.hasBarStyleCellTextConfigured)(cellTextProperties) &&
+        Boolean(labels.cellValue || labels.percentage);
+    const presence = (0, BarStylesHelper_1.getBarStyleCellTextSlotPresence)(cellTextProperties);
+    const fontStyle = bullet.Font ? (0, StyleHelper_1.convertAdaptableStyleToCSS)(bullet.Font) : undefined;
+    const isVertical = bullet.Orientation === 'Vertical';
+    const cellTextClassName = 'ab-BulletChart__text twa:text-2 twa:leading-tight twa:truncate twa:max-w-full';
+    const chartEl = (0, jsx_runtime_1.jsx)(StyledColumnChartListPreviews_1.StyledColumnBulletChartListPreview, { bullet: bullet });
+    // Merged-only with no outside bands → relative container so the overlay sits
+    // on top of the chart, matching the runtime renderer's behaviour.
+    if (hasCellText && presence.hasMerged && !presence.hasAbove && !presence.hasBelow) {
+        return ((0, jsx_runtime_1.jsxs)(Flex_1.Box, { className: "ab-BulletChart__wrapper twa:relative twa:inline-flex", children: [chartEl, (0, jsx_runtime_1.jsx)(BarStyleCellTextPreview_1.BarStyleCellTextPreview, { mergedOverlayClassName: "ab-BulletChart__text twa:absolute twa:inset-x-0 twa:top-1/2 twa:-translate-y-1/2 twa:px-1 twa:text-2 twa:truncate twa:pointer-events-none", style: fontStyle, cellTextProperties: cellTextProperties, labels: labels, vertical: "Merged" })] }));
+    }
+    return ((0, jsx_runtime_1.jsxs)(Flex_1.Flex, { className: "ab-BulletChart__wrapper twa:relative", flexDirection: "column", alignItems: isVertical ? 'center' : 'stretch', style: { justifyContent: 'center', gap: hasCellText ? 2 : 0 }, children: [hasCellText && presence.hasAbove && ((0, jsx_runtime_1.jsx)(BarStyleCellTextPreview_1.BarStyleCellTextPreview, { className: cellTextClassName, style: fontStyle, cellTextProperties: cellTextProperties, labels: labels, vertical: "Above" })), (0, jsx_runtime_1.jsxs)(Flex_1.Box, { className: "twa:relative twa:w-full", style: { display: 'inline-flex' }, children: [chartEl, hasCellText && presence.hasMerged && ((0, jsx_runtime_1.jsx)(BarStyleCellTextPreview_1.BarStyleCellTextPreview, { mergedOverlayClassName: "ab-BulletChart__text twa:absolute twa:inset-x-0 twa:top-1/2 twa:-translate-y-1/2 twa:px-1 twa:text-2 twa:truncate twa:pointer-events-none", style: fontStyle, cellTextProperties: cellTextProperties, labels: labels, vertical: "Merged" }))] }), hasCellText && presence.hasBelow && ((0, jsx_runtime_1.jsx)(BarStyleCellTextPreview_1.BarStyleCellTextPreview, { className: cellTextClassName, style: fontStyle, cellTextProperties: cellTextProperties, labels: labels, vertical: "Below" }))] }));
+};
+const StyledColumnBulletPreview = ({ data }) => {
+    const bullet = data.BulletChartStyle;
+    if (!bullet) {
+        return (0, jsx_runtime_1.jsx)(Tag_1.Tag, { children: "No Bullet Chart Style" });
+    }
+    return ((0, jsx_runtime_1.jsx)(Flex_1.Box, { className: PREVIEW_CELL_CLASS, children: (0, jsx_runtime_1.jsx)(BulletChartPreviewContent, { bullet: bullet }) }));
+};
+exports.StyledColumnBulletPreview = StyledColumnBulletPreview;
+const hasBulletChartRangesConfigured = (bullet) => Boolean(bullet?.CellRanges?.length);
+exports.hasBulletChartRangesConfigured = hasBulletChartRangesConfigured;

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

@@ -1,5 +1,6 @@
 import * as React from 'react';
-import { BulletChartStyle, RangeBarStyle } from '../../../../../AdaptableState/StyledColumnState';
+import { BulletChartStyle } from '../../../../../AdaptableState/StyledColumns/BulletChartStyle';
+import { RangeBarStyle } from '../../../../../AdaptableState/StyledColumns/RangeBarStyle';
 /**
  * Compact schematic of a Range Bar (bands + track + value / reference markers)
  * for the Styled Columns object list and wizard step summaries.

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

@@ -44,10 +44,10 @@ const DEFAULT_MARKER = 'var(--ab-color-foreground, #333)';
 const StyledColumnRangeBarListPreview = (props) => {
     const { range } = props;
     const segments = bandSegmentsForPreview(range.CellRanges);
-    const trackFill = range.TrackColor ?? DEFAULT_TRACK;
+    const trackFill = range.Track?.Color ?? DEFAULT_TRACK;
     const valueColor = range.Marker?.Color || DEFAULT_BAR;
-    const refColor = range.ReferenceMarker?.Color || DEFAULT_MARKER;
-    const hasRef = range.Reference != undefined;
+    const refColor = range.Reference?.Marker?.Color || DEFAULT_MARKER;
+    const hasRef = range.Reference?.Value != undefined;
     const isVertical = range.Orientation === 'Vertical';
     return ((0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:rounded twa:border twa:border-[color-mix(in_srgb,var(--ab-color-foreground)_12%,transparent)] twa:bg-[color-mix(in_srgb,var(--ab-color-primary)_40%,transparent)] twa:px-1 twa:py-0.5", style: { width: PREVIEW_WIDTH, height: PREVIEW_HEIGHT }, children: (0, jsx_runtime_1.jsxs)("svg", { width: "100%", height: "100%", viewBox: `0 0 ${VB_W} ${VB_H}`, preserveAspectRatio: "none", "aria-hidden": true, children: [segments.length === 0 ? ((0, jsx_runtime_1.jsx)("rect", { x: "0", y: "0", width: VB_W, height: VB_H, fill: range.BackColor ?? 'transparent' })) : (segments.map((s, i) => ((0, jsx_runtime_1.jsx)("rect", { x: s.x0 * VB_W, y: "0", width: (s.x1 - s.x0) * VB_W, height: VB_H, fill: s.color, opacity: 0.55 }, i)))), isVertical ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("rect", { x: VB_W * 0.42, y: "2", width: "5", height: VB_H - 4, rx: "1", fill: trackFill }), hasRef && ((0, jsx_runtime_1.jsx)("line", { x1: VB_W * 0.46, y1: "3", x2: VB_W * 0.46, y2: VB_H - 3, stroke: refColor, strokeWidth: "2", vectorEffect: "non-scaling-stroke" })), (0, jsx_runtime_1.jsx)("polygon", { points: `${VB_W * 0.52},${VB_H * 0.35} ${VB_W * 0.62},${VB_H * 0.5} ${VB_W * 0.52},${VB_H * 0.65}`, fill: valueColor })] })) : ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("rect", { x: "2", y: VB_H * 0.38, width: VB_W - 4, height: "5", rx: "1", fill: trackFill }), hasRef && ((0, jsx_runtime_1.jsx)("line", { x1: VB_W * 0.38, y1: VB_H * 0.2, x2: VB_W * 0.38, y2: VB_H * 0.8, stroke: refColor, strokeWidth: "2", vectorEffect: "non-scaling-stroke" })), (0, jsx_runtime_1.jsx)("polygon", { points: `${VB_W * 0.72},${VB_H * 0.2} ${VB_W * 0.82},${VB_H * 0.5} ${VB_W * 0.72},${VB_H * 0.8}`, fill: valueColor })] }))] }) }));
 };
@@ -59,8 +59,8 @@ exports.StyledColumnRangeBarListPreview = StyledColumnRangeBarListPreview;
 const StyledColumnBulletChartListPreview = (props) => {
     const { bullet } = props;
     const segments = bandSegmentsForPreview(bullet.CellRanges);
-    const barColor = bullet.BarColor ?? DEFAULT_BAR;
-    const markerColor = bullet.TargetMarker?.Color || DEFAULT_MARKER;
+    const barColor = bullet.Bar?.Color ?? DEFAULT_BAR;
+    const markerColor = bullet.TargetProperties?.Marker?.Color || DEFAULT_MARKER;
     return ((0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:rounded twa:border twa:border-[color-mix(in_srgb,var(--ab-color-foreground)_12%,transparent)] twa:bg-[color-mix(in_srgb,var(--ab-color-primary)_40%,transparent)] twa:px-1 twa:py-0.5", style: { width: PREVIEW_WIDTH, height: PREVIEW_HEIGHT }, children: (0, jsx_runtime_1.jsxs)("svg", { width: "100%", height: "100%", viewBox: `0 0 ${VB_W} ${VB_H}`, preserveAspectRatio: "none", "aria-hidden": true, children: [segments.length === 0 ? ((0, jsx_runtime_1.jsx)("rect", { x: "0", y: "0", width: VB_W, height: VB_H, fill: bullet.BackColor ?? 'transparent' })) : (segments.map((s, i) => ((0, jsx_runtime_1.jsx)("rect", { x: s.x0 * VB_W, y: "2", width: (s.x1 - s.x0) * VB_W, height: VB_H - 4, fill: s.color, opacity: 0.5 }, i)))), (0, jsx_runtime_1.jsx)("rect", { x: VB_W * 0.04, y: VB_H * 0.35, width: VB_W * 0.58, height: VB_H * 0.3, rx: "1", fill: barColor }), (0, jsx_runtime_1.jsx)("line", { x1: VB_W * 0.78, y1: VB_H * 0.12, x2: VB_W * 0.78, y2: VB_H * 0.88, stroke: markerColor, strokeWidth: "2.5", vectorEffect: "non-scaling-stroke" })] }) }));
 };
 exports.StyledColumnBulletChartListPreview = StyledColumnBulletChartListPreview;

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

@@ -0,0 +1,7 @@
+import * as React from 'react';
+import { StyledColumn } from '../../../../../AdaptableState/StyledColumnState';
+import { AdaptableApi } from '../../../../../Api/AdaptableApi';
+export declare const StyledColumnGradientPreview: React.FunctionComponent<React.PropsWithChildren<{
+    data: StyledColumn;
+    api?: AdaptableApi;
+}>>;

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

@@ -0,0 +1,32 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.StyledColumnGradientPreview = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const Flex_1 = require("../../../../../components/Flex");
+const Tag_1 = require("../../../../../components/Tag");
+const AdaptableContext_1 = require("../../../../AdaptableContext");
+const GradientStyleHelper_1 = require("../../../../../Utilities/Helpers/StyledColumns/GradientStyleHelper");
+const formatPreviewValue = (value) => {
+    if (Number.isInteger(value)) {
+        return value.toLocaleString();
+    }
+    return value.toLocaleString(undefined, { maximumFractionDigits: 2 });
+};
+const StyledColumnGradientPreview = ({ data, api: apiProp }) => {
+    const adaptable = (0, AdaptableContext_1.useAdaptable)();
+    const api = apiProp ?? adaptable.api;
+    const gs = data.GradientStyle;
+    if (!gs) {
+        return (0, jsx_runtime_1.jsx)(Tag_1.Tag, { children: "No Gradient Style" });
+    }
+    if (!(0, GradientStyleHelper_1.hasGradientRangesConfigured)(gs)) {
+        return (0, jsx_runtime_1.jsx)(Tag_1.Tag, { children: "Define ranges before previewing" });
+    }
+    const sampleValues = (0, GradientStyleHelper_1.getGradientPreviewSampleValues)(data, api);
+    if (!sampleValues.length) {
+        return (0, jsx_runtime_1.jsx)(Tag_1.Tag, { children: "No preview available" });
+    }
+    const rowNode = api.gridApi?.getRowNodeForIndex(0) ?? null;
+    return ((0, jsx_runtime_1.jsx)(Flex_1.Flex, { alignItems: "stretch", className: "twa:flex-wrap twa:gap-2", children: sampleValues.map((value) => ((0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "ab-GradientPreviewCell twa:px-2 twa:py-1 twa:min-w-[56px] twa:text-2 twa:text-center twa:rounded-standard twa:border twa:border-[color-mix(in_srgb,var(--ab-color-foreground)_15%,transparent)]", style: (0, GradientStyleHelper_1.getGradientPreviewCellStyle)(value, data, api, rowNode), children: formatPreviewValue(value) }, value))) }));
+};
+exports.StyledColumnGradientPreview = StyledColumnGradientPreview;

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

@@ -0,0 +1,7 @@
+import * as React from 'react';
+import { StyledColumn } from '../../../../../AdaptableState/StyledColumnState';
+export declare const DEFAULT_ICON_STYLE_SIZE = 18;
+export declare const DEFAULT_ICON_STYLE_GAP = 4;
+export declare const StyledColumnIconPreview: React.FunctionComponent<React.PropsWithChildren<{
+    data: StyledColumn;
+}>>;

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

@@ -0,0 +1,93 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.StyledColumnIconPreview = exports.DEFAULT_ICON_STYLE_GAP = exports.DEFAULT_ICON_STYLE_SIZE = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const Icon_1 = require("../../../../../components/Icon");
+const IconRenderer_1 = require("../../../../../agGrid/cellRenderers/IconRenderer");
+const AdaptableIconComponent_1 = require("../../../../Components/AdaptableIconComponent");
+const Flex_1 = require("../../../../../components/Flex");
+const Tag_1 = require("../../../../../components/Tag");
+const StyleHelper_1 = require("../../../../../Utilities/Helpers/StyleHelper");
+exports.DEFAULT_ICON_STYLE_SIZE = 18;
+exports.DEFAULT_ICON_STYLE_GAP = 4;
+const PREVIEW_CELL_CLASS = 'ab-IconPreviewCell 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 isInlineGlyph = (spec) => typeof spec === 'string';
+const isAdaptableIconSpec = (spec) => !!spec &&
+    ((0, Icon_1.isAdaptableSystemIcon)(spec) ||
+        (0, Icon_1.isAdaptableCustomIcon)(spec) ||
+        (0, Icon_1.isAdaptableElementIcon)(spec));
+function getIconCellChromeCss(cell) {
+    if (!cell || !(0, StyleHelper_1.hasCellBoxStyle)(cell)) {
+        return {};
+    }
+    return (0, StyleHelper_1.convertAdaptableStyleToCSS)(cell);
+}
+const renderIconSpecForPreview = (spec, size) => {
+    if (isInlineGlyph(spec)) {
+        return ((0, jsx_runtime_1.jsx)("span", { className: "ab-IconStyle__glyph", style: {
+                fontSize: size,
+                lineHeight: 1,
+                display: 'inline-flex',
+                alignItems: 'center',
+                justifyContent: 'center',
+            }, children: spec }));
+    }
+    if (isAdaptableIconSpec(spec)) {
+        return (0, jsx_runtime_1.jsx)(AdaptableIconComponent_1.AdaptableIconComponent, { icon: spec });
+    }
+    return null;
+};
+const buildPreviewText = (mapping, iconStyle) => {
+    const cellTextTokens = iconStyle.CellTextProperties?.CellText ?? [];
+    const formatted = String(mapping.Key);
+    const textParts = [];
+    if (cellTextTokens.includes('CellValue') && formatted) {
+        textParts.push(formatted);
+    }
+    if (cellTextTokens.includes('IconDescription') && mapping.Description) {
+        textParts.push(mapping.Description);
+    }
+    return textParts.length > 0 ? textParts.join(' · ') : undefined;
+};
+const IconCellPreviewTree = ({ iconStyle, mapping }) => {
+    const size = iconStyle.Size ?? exports.DEFAULT_ICON_STYLE_SIZE;
+    const gap = iconStyle.Gap ?? exports.DEFAULT_ICON_STYLE_GAP;
+    const textPosition = iconStyle.CellTextProperties?.CellTextPosition ?? 'After';
+    const text = buildPreviewText(mapping, iconStyle);
+    const fontStyle = iconStyle.Font ? (0, StyleHelper_1.convertAdaptableStyleToCSS)(iconStyle.Font) : undefined;
+    const iconNode = renderIconSpecForPreview(mapping.Icon, size);
+    const textNode = text ? ((0, jsx_runtime_1.jsx)("span", { className: "ab-IconStyle__text", style: { lineHeight: 1.2, ...fontStyle }, children: text })) : null;
+    if (!iconNode && !textNode) {
+        return null;
+    }
+    if (!textNode) {
+        return (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: iconNode });
+    }
+    if (!iconNode) {
+        return (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: textNode });
+    }
+    const isStacked = textPosition === 'Above' || textPosition === 'Below';
+    const children = textPosition === 'Before' || textPosition === 'Above'
+        ? [textNode, iconNode]
+        : [iconNode, textNode];
+    return ((0, jsx_runtime_1.jsx)("span", { className: "ab-IconStyle__wrapper", style: {
+            display: 'inline-flex',
+            flexDirection: isStacked ? 'column' : 'row',
+            alignItems: 'center',
+            gap,
+            lineHeight: 1,
+        }, children: children }));
+};
+const StyledColumnIconPreview = ({ data }) => {
+    const iconStyle = data.IconStyle;
+    if (!iconStyle) {
+        return (0, jsx_runtime_1.jsx)(Tag_1.Tag, { children: "No Icon Style" });
+    }
+    const effectiveMappings = (0, IconRenderer_1.resolveEffectiveIconStyleMappings)(iconStyle);
+    if (effectiveMappings.length === 0) {
+        return (0, jsx_runtime_1.jsx)(Tag_1.Tag, { children: "Define mappings to preview" });
+    }
+    const previewCellChrome = getIconCellChromeCss(iconStyle.Cell);
+    return ((0, jsx_runtime_1.jsx)(Flex_1.Box, { className: PREVIEW_CELL_CLASS, style: previewCellChrome, children: (0, jsx_runtime_1.jsx)(IconCellPreviewTree, { iconStyle: iconStyle, mapping: effectiveMappings[0] }) }));
+};
+exports.StyledColumnIconPreview = StyledColumnIconPreview;

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

@@ -0,0 +1,5 @@
+import * as React from 'react';
+import { StyledColumn } from '../../../../../AdaptableState/StyledColumnState';
+export declare const StyledColumnPercentBarPreview: React.FunctionComponent<React.PropsWithChildren<{
+    data: StyledColumn;
+}>>;

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

@@ -0,0 +1,63 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.StyledColumnPercentBarPreview = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const StyleHelper_1 = require("../../../../../Utilities/Helpers/StyleHelper");
+const PercentBarStyleHelper_1 = require("../../../../../Utilities/Helpers/StyledColumns/PercentBarStyleHelper");
+const BarStylesHelper_1 = require("../../../../../Utilities/Helpers/StyledColumns/BarStylesHelper");
+const Flex_1 = require("../../../../../components/Flex");
+const Tag_1 = require("../../../../../components/Tag");
+const BarStyleCellTextPreview_1 = require("./BarStyleCellTextPreview");
+const PREVIEW_CELL_CLASS = 'ab-PercentBarPreviewCell twa:w-[72px] twa:min-h-[32px] twa:px-1 twa:py-1 twa:rounded-standard twa:border twa:border-[color-mix(in_srgb,var(--ab-color-foreground)_15%,transparent)]';
+const PercentBarPreviewCell = ({ styledColumn, value, min, max }) => {
+    const pb = styledColumn.PercentBarStyle;
+    const { barLeftPercent, barWidthPercent, percentageValue, barColor } = (0, PercentBarStyleHelper_1.getPercentBarPreviewGeometry)(value, pb, min, max);
+    const trackColor = (0, PercentBarStyleHelper_1.getPercentBarPreviewTrackColor)(pb);
+    const fillColor = (0, PercentBarStyleHelper_1.getPercentBarPreviewResolvedBarColor)(barColor);
+    const cellTextProperties = pb.CellTextProperties;
+    const labels = (0, BarStylesHelper_1.buildBarStyleCellTextLabels)(cellTextProperties, Number.isInteger(value) ? String(value) : value.toFixed(1), `${percentageValue.toFixed(0)}%`);
+    const hasCellText = (0, BarStylesHelper_1.hasBarStyleCellTextConfigured)(cellTextProperties) &&
+        Boolean(labels.cellValue || labels.percentage);
+    const presence = (0, BarStylesHelper_1.getBarStyleCellTextSlotPresence)(cellTextProperties);
+    const fontStyle = pb.Font ? (0, StyleHelper_1.convertAdaptableStyleToCSS)(pb.Font) : undefined;
+    const cellTextClassName = 'ab-PercentBar__text twa:text-2 twa:leading-tight twa:truncate';
+    const barEl = ((0, jsx_runtime_1.jsxs)(Flex_1.Box, { className: "ab-PercentBar__bar twa:relative twa:flex-1 twa:min-h-[6px]", style: trackColor ? { background: (0, PercentBarStyleHelper_1.getPercentBarPreviewResolvedBarColor)(trackColor) } : undefined, children: [fillColor && ((0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "ab-PercentBar__barInside twa:absolute twa:top-0 twa:h-full", style: {
+                    background: fillColor,
+                    left: `${barLeftPercent.toFixed(2)}%`,
+                    width: `${barWidthPercent.toFixed(2)}%`,
+                } })), hasCellText && presence.hasMerged && ((0, jsx_runtime_1.jsx)(BarStyleCellTextPreview_1.BarStyleCellTextPreview, { mergedOverlayClassName: "ab-PercentBar__text twa:absolute twa:inset-x-0 twa:top-1/2 twa:-translate-y-1/2 twa:px-1 twa:text-2 twa:truncate", style: fontStyle, cellTextProperties: cellTextProperties, labels: labels, vertical: "Merged" }))] }));
+    return ((0, jsx_runtime_1.jsxs)(Flex_1.Flex, { className: `ab-PercentBar__wrapper ${PREVIEW_CELL_CLASS}`, flexDirection: "column", style: {
+            justifyContent: 'center',
+            height: (0, BarStyleCellTextPreview_1.shouldShowBarStyleCellTextOutsideBar)(cellTextProperties, hasCellText)
+                ? '100%'
+                : undefined,
+        }, children: [hasCellText && presence.hasAbove && ((0, jsx_runtime_1.jsx)(BarStyleCellTextPreview_1.BarStyleCellTextPreview, { className: cellTextClassName, style: fontStyle, cellTextProperties: cellTextProperties, labels: labels, vertical: "Above" })), barEl, hasCellText && presence.hasBelow && ((0, jsx_runtime_1.jsx)(BarStyleCellTextPreview_1.BarStyleCellTextPreview, { className: cellTextClassName, style: fontStyle, cellTextProperties: cellTextProperties, labels: labels, vertical: "Below" }))] }));
+};
+const StyledColumnPercentBarPreview = ({ data }) => {
+    const pb = data.PercentBarStyle;
+    if (!pb) {
+        return (0, jsx_runtime_1.jsx)(Tag_1.Tag, { children: "No Percent Bar Style" });
+    }
+    if (!(0, PercentBarStyleHelper_1.hasPercentBarRangesConfigured)(pb)) {
+        return (0, jsx_runtime_1.jsx)(Tag_1.Tag, { children: "Define ranges before previewing" });
+    }
+    let min;
+    let max;
+    if (pb.ColumnComparison) {
+        const cmpMin = Number(pb.ColumnComparison.MinValue);
+        const cmpMax = Number(pb.ColumnComparison.MaxValue);
+        if (!Number.isNaN(cmpMin) && !Number.isNaN(cmpMax)) {
+            min = cmpMin;
+            max = cmpMax;
+        }
+        else {
+            ({ min, max } = (0, PercentBarStyleHelper_1.getPercentBarPreviewScale)(pb));
+        }
+    }
+    else {
+        ({ min, max } = (0, PercentBarStyleHelper_1.getPercentBarPreviewScale)(pb));
+    }
+    const sampleValues = (0, PercentBarStyleHelper_1.getPercentBarPreviewSampleValues)(pb);
+    return ((0, jsx_runtime_1.jsx)(Flex_1.Flex, { alignItems: "stretch", className: "twa:flex-wrap twa:gap-2", children: sampleValues.map((value) => ((0, jsx_runtime_1.jsx)(PercentBarPreviewCell, { styledColumn: data, value: value, min: min, max: max }, value))) }));
+};
+exports.StyledColumnPercentBarPreview = StyledColumnPercentBarPreview;

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

@@ -0,0 +1,5 @@
+import * as React from 'react';
+import { StyledColumn } from '../../../../../AdaptableState/StyledColumnState';
+export declare const StyledColumnRangeBarPreview: React.FunctionComponent<React.PropsWithChildren<{
+    data: StyledColumn;
+}>>;