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

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

@@ -1,9 +1,8 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.StyledColumnWizardRatingSection = exports.isValidRatingStyle = exports.renderStyledColumnRatingSummary = void 0;
+exports.StyledColumnWizardRatingSection = exports.isValidRatingStyle = exports.renderStyledColumnRatingSummary = exports.getStyledColumnRatingStyleViewValues = void 0;
 const tslib_1 = require("tslib");
 const jsx_runtime_1 = require("react/jsx-runtime");
-const React = tslib_1.__importStar(require("react"));
 const CheckBox_1 = require("../../../components/CheckBox");
 const ErrorBox_1 = tslib_1.__importDefault(require("../../../components/ErrorBox"));
 const FormLayout_1 = tslib_1.__importStar(require("../../../components/FormLayout"));
@@ -15,7 +14,7 @@ const NewSelect_1 = require("../../../components/NewSelect");
 const Input_1 = tslib_1.__importDefault(require("../../../components/Input"));
 const StyledColumnSliceStyleEditors_1 = require("./StyledColumnSliceStyleEditors");
 const Card_1 = require("../../../components/Card");
-const StyleHelper_1 = require("../../../Utilities/Helpers/StyleHelper");
+const StyledColumnRatingPreview_1 = require("./StyledColumnWizardStyleSection/Components/StyledColumnRatingPreview");
 const STYLE_FORM_SIZES = ['200px', '1fr'];
 const ICON_CHOICES = [
     { value: 'Star', label: 'Star' },
@@ -23,13 +22,49 @@ const ICON_CHOICES = [
     { value: 'Circle', label: 'Circle' },
     { value: 'Thumb', label: 'Thumb' },
 ];
-// Mirrors the renderer defaults so the wizard preview/summary stay in sync.
-const DEFAULT_MAX = 5;
-const DEFAULT_SIZE = 14;
-const DEFAULT_GAP = 2;
-const DEFAULT_ICON = 'Star';
-const DEFAULT_FILLED_COLOR = 'var(--ab-color-warn, #f5a623)';
-const DEFAULT_EMPTY_COLOR = 'color-mix(in srgb, currentColor 22%, transparent)';
+const formatRatingToolTipSummary = (toolTipText) => toolTipText
+    ?.map((t) => (t === 'CellValue' ? 'Cell Value' : 'Percentage Value'))
+    .join(' + ') ?? '';
+const buildStyledColumnRatingStyleSummaryStrings = (rating, options) => {
+    const items = [
+        `Max: ${rating.Max ?? StyledColumnRatingPreview_1.DEFAULT_RATING_MAX}`,
+        `Icon: ${rating.Icon ?? StyledColumnRatingPreview_1.DEFAULT_RATING_ICON}`,
+    ];
+    if (rating.FilledColor) {
+        items.push(`Filled Colour: ${rating.FilledColor}`);
+    }
+    if (rating.EmptyColor) {
+        items.push(`Empty Colour: ${rating.EmptyColor}`);
+    }
+    if (rating.Size != null) {
+        items.push(`Icon Size: ${rating.Size}px`);
+    }
+    if (rating.Gap != null) {
+        items.push(`Icon Gap: ${rating.Gap}px`);
+    }
+    items.push(`Allow Half: ${(rating.AllowHalf ?? true) ? 'Yes' : 'No'}`);
+    items.push(`Show Value: ${rating.ShowValue ? 'Yes' : 'No'}`);
+    if (rating.ToolTipText?.length) {
+        items.push(`Tooltip: ${formatRatingToolTipSummary(rating.ToolTipText)}`);
+    }
+    else if (options.includeEmptyTooltip) {
+        items.push('Tooltip: No Tooltip');
+    }
+    (0, StyledColumnSliceStyleEditors_1.getCellBoxStyleSummaryItems)(rating.Cell).forEach(({ label, value }) => {
+        items.push(`${label}: ${value}`);
+    });
+    return items;
+};
+const getStyledColumnRatingStyleViewValues = (data) => {
+    const rating = data.RatingStyle;
+    if (!rating) {
+        return [];
+    }
+    return buildStyledColumnRatingStyleSummaryStrings(rating, {
+        includeEmptyTooltip: false,
+    });
+};
+exports.getStyledColumnRatingStyleViewValues = getStyledColumnRatingStyleViewValues;
 /**
  * Resolve a CSS custom property (e.g. `--ab-color-warn`) to its computed
  * value at runtime. Returns the fallback hex on SSR or when the variable
@@ -53,17 +88,10 @@ const resolveCssVar = (varName, fallbackHex) => {
  * the user hasn't chosen one. The renderer uses `var(--ab-color-warn,
  * #f5a623)`, but `ColorPicker` can't parse a `var(...)` with a fallback,
  * so we resolve the variable manually and pass a concrete hex.
- *
- * State remains untouched - the picker only writes to state when the user
- * actively picks a colour, so we never accidentally bake the resolved
- * theme value into the saved styled column.
  */
 const getDisplayedFilledColor = (rating) => rating.FilledColor || resolveCssVar('--ab-color-warn', '#f5a623');
 /**
- * Best-effort preview colour for the wizard's `Empty Colour` picker. The
- * renderer's actual default is `color-mix(in srgb, currentColor 22%,
- * transparent)`, which the picker can't parse either; we approximate it
- * by reading the document foreground colour and setting alpha to 0.22.
+ * Best-effort preview colour for the wizard's `Empty Colour` picker.
  */
 const getDisplayedEmptyColor = (rating) => {
     if (rating.EmptyColor)
@@ -82,63 +110,17 @@ const getDisplayedEmptyColor = (rating) => {
     }
     return 'rgba(127, 127, 127, 0.22)';
 };
-// ---------------------------------------------------------------------------
-// Inline preview (also reused by the wizard summary so the user sees a
-// pixel-accurate idea of the resulting cell at all times).
-// ---------------------------------------------------------------------------
-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 max = rating.Max ?? DEFAULT_MAX;
-    const size = rating.Size ?? DEFAULT_SIZE;
-    const gap = rating.Gap ?? DEFAULT_GAP;
-    const icon = rating.Icon ?? DEFAULT_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-${i}-${icon}-${size}`;
-                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 }))] }));
-};
-// ---------------------------------------------------------------------------
-// Wizard summary
-// ---------------------------------------------------------------------------
 const renderStyledColumnRatingSummary = (data) => {
     const rating = data.RatingStyle;
     if (!rating) {
         return (0, jsx_runtime_1.jsx)(Tag_1.Tag, { children: "No Styling Defined" });
     }
-    const max = rating.Max ?? DEFAULT_MAX;
-    const icon = rating.Icon ?? DEFAULT_ICON;
-    const cellTags = (0, StyledColumnSliceStyleEditors_1.renderCellStyleSummaryTags)(rating.Cell);
-    const toolTipTokens = rating.ToolTipText ?? [];
-    return ((0, jsx_runtime_1.jsxs)(Flex_1.Flex, { alignItems: "center", className: "twa:gap-2 twa:flex-wrap", children: [(0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:inline-flex twa:items-center twa:gap-2 twa:box-border", style: getRatingCellChromeCss(rating.Cell), children: (0, jsx_runtime_1.jsx)(RatingPreview, { rating: rating }) }), (0, jsx_runtime_1.jsxs)(Flex_1.Box, { children: ["Out of ", (0, jsx_runtime_1.jsx)(Tag_1.Tag, { children: max })] }), (0, jsx_runtime_1.jsxs)(Flex_1.Box, { children: ["Icon: ", (0, jsx_runtime_1.jsx)(Tag_1.Tag, { children: icon })] }), toolTipTokens.length > 0 && ((0, jsx_runtime_1.jsxs)(Flex_1.Box, { children: ["Tooltip: ", (0, jsx_runtime_1.jsx)(Tag_1.Tag, { children: toolTipTokens.join(', ') })] })), cellTags && (0, jsx_runtime_1.jsxs)(Flex_1.Box, { children: ["Cell: ", cellTags] })] }));
+    const items = buildStyledColumnRatingStyleSummaryStrings(rating, {
+        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.renderStyledColumnRatingSummary = renderStyledColumnRatingSummary;
-// ---------------------------------------------------------------------------
-// Wizard validation
-// ---------------------------------------------------------------------------
 const isValidRatingStyle = (data) => {
     const rating = data.RatingStyle;
     if (!rating) {
@@ -173,8 +155,7 @@ const StyledColumnWizardRatingSection = (props) => {
             : current.filter((t) => t !== token);
         update({ ToolTipText: next });
     };
-    const previewCellChrome = React.useMemo(() => getRatingCellChromeCss(rating.Cell), [rating.Cell]);
-    return ((0, jsx_runtime_1.jsxs)(Flex_1.Box, { children: [(0, jsx_runtime_1.jsxs)(Flex_1.Flex, { alignItems: "center", className: "twa:mb-3 twa:p-3 twa:rounded-standard twa:border twa:border-border twa:gap-3", children: [(0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:text-3 twa:font-medium", children: "Preview:" }), (0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:inline-flex twa:items-center twa:box-border", style: previewCellChrome, children: (0, jsx_runtime_1.jsx)(RatingPreview, { rating: rating }) }), (0, jsx_runtime_1.jsxs)(Flex_1.Box, { className: "twa:text-2 twa:opacity-70", children: ["(sample value ", (rating.Max ?? DEFAULT_MAX) * 0.7, ")"] })] }), (0, jsx_runtime_1.jsxs)(Card_1.Card, { shadow: false, className: "twa:mb-3", children: [(0, jsx_runtime_1.jsx)(Card_1.Card.Title, { children: "Icon" }), (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.jsx)(FormLayout_1.FormRow, { label: "Max:", children: (0, jsx_runtime_1.jsxs)(Flex_1.Flex, { alignItems: "center", className: "twa:gap-2", children: [(0, jsx_runtime_1.jsx)(Input_1.default, { type: "number", min: 1, step: 1, value: rating.Max ?? '', placeholder: String(DEFAULT_MAX), style: { width: 80 }, onChange: (event) => {
+    return ((0, jsx_runtime_1.jsxs)(Flex_1.Box, { children: [(0, jsx_runtime_1.jsxs)(Card_1.Card, { shadow: false, className: "twa:mb-3", children: [(0, jsx_runtime_1.jsx)(Card_1.Card.Title, { children: "Icon" }), (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.jsx)(FormLayout_1.FormRow, { label: "Max:", children: (0, jsx_runtime_1.jsxs)(Flex_1.Flex, { alignItems: "center", className: "twa:gap-2", children: [(0, jsx_runtime_1.jsx)(Input_1.default, { type: "number", min: 1, step: 1, value: rating.Max ?? '', placeholder: String(StyledColumnRatingPreview_1.DEFAULT_RATING_MAX), style: { width: 80 }, onChange: (event) => {
                                                     const raw = event.target.value;
                                                     if (raw === '' || raw == null) {
                                                         update({ Max: undefined });
@@ -184,7 +165,7 @@ const StyledColumnWizardRatingSection = (props) => {
                                                     update({
                                                         Max: Number.isFinite(parsed) && parsed >= 1 ? Math.floor(parsed) : undefined,
                                                     });
-                                                } }), (0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:text-xs twa:opacity-70 twa:min-w-0 twa:shrink", children: "Icon count and rating cap (no auto scaling is applied)" })] }) }), (0, jsx_runtime_1.jsx)(FormLayout_1.FormRow, { label: "Icon:", children: (0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:max-w-[160px]", children: (0, jsx_runtime_1.jsx)(NewSelect_1.SingleSelect, { className: "twa:w-full", value: rating.Icon ?? DEFAULT_ICON, onValueChange: (v) => update({ Icon: v }), items: ICON_CHOICES }) }) }), (0, jsx_runtime_1.jsx)(FormLayout_1.FormRow, { label: "Filled Colour:", children: (0, jsx_runtime_1.jsx)(ColorPicker_1.ColorPicker, { disabled: disabled, api: api, value: getDisplayedFilledColor(rating), onChange: (c) => update({ FilledColor: c }) }) }), (0, jsx_runtime_1.jsx)(FormLayout_1.FormRow, { label: "Empty Colour:", children: (0, jsx_runtime_1.jsx)(ColorPicker_1.ColorPicker, { disabled: disabled, api: api, value: getDisplayedEmptyColor(rating), onChange: (c) => update({ EmptyColor: c }) }) }), (0, jsx_runtime_1.jsx)(FormLayout_1.FormRow, { label: "Icon Size (px):", children: (0, jsx_runtime_1.jsxs)(Flex_1.Flex, { alignItems: "center", className: "twa:gap-2", children: [(0, jsx_runtime_1.jsx)(Input_1.default, { type: "number", min: 4, step: 1, value: rating.Size ?? '', placeholder: String(DEFAULT_SIZE), style: { width: 80 }, onChange: (event) => {
+                                                } }), (0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:text-xs twa:opacity-70 twa:min-w-0 twa:shrink", children: "Icon count and rating cap (no auto scaling is applied)" })] }) }), (0, jsx_runtime_1.jsx)(FormLayout_1.FormRow, { label: "Icon:", children: (0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:max-w-[160px]", children: (0, jsx_runtime_1.jsx)(NewSelect_1.SingleSelect, { className: "twa:w-full", value: rating.Icon ?? StyledColumnRatingPreview_1.DEFAULT_RATING_ICON, onValueChange: (v) => update({ Icon: v }), items: ICON_CHOICES }) }) }), (0, jsx_runtime_1.jsx)(FormLayout_1.FormRow, { label: "Filled Colour:", children: (0, jsx_runtime_1.jsx)(ColorPicker_1.ColorPicker, { disabled: disabled, api: api, value: getDisplayedFilledColor(rating), onChange: (c) => update({ FilledColor: c }) }) }), (0, jsx_runtime_1.jsx)(FormLayout_1.FormRow, { label: "Empty Colour:", children: (0, jsx_runtime_1.jsx)(ColorPicker_1.ColorPicker, { disabled: disabled, api: api, value: getDisplayedEmptyColor(rating), onChange: (c) => update({ EmptyColor: c }) }) }), (0, jsx_runtime_1.jsx)(FormLayout_1.FormRow, { label: "Icon Size (px):", children: (0, jsx_runtime_1.jsxs)(Flex_1.Flex, { alignItems: "center", className: "twa:gap-2", children: [(0, jsx_runtime_1.jsx)(Input_1.default, { type: "number", min: 4, step: 1, value: rating.Size ?? '', placeholder: String(StyledColumnRatingPreview_1.DEFAULT_RATING_SIZE), style: { width: 80 }, onChange: (event) => {
                                                     const raw = event.target.value;
                                                     if (raw === '' || raw == null) {
                                                         update({ Size: undefined });
@@ -194,7 +175,7 @@ const StyledColumnWizardRatingSection = (props) => {
                                                     update({
                                                         Size: Number.isFinite(parsed) && parsed >= 4 ? parsed : undefined,
                                                     });
-                                                } }), (0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:text-xs twa:opacity-70 twa:min-w-0 twa:shrink", children: "Square pixel size of each icon" })] }) }), (0, jsx_runtime_1.jsx)(FormLayout_1.FormRow, { label: "Icon Gap (px):", children: (0, jsx_runtime_1.jsxs)(Flex_1.Flex, { alignItems: "center", className: "twa:gap-2", children: [(0, jsx_runtime_1.jsx)(Input_1.default, { type: "number", min: 0, step: 1, value: rating.Gap ?? '', placeholder: String(DEFAULT_GAP), style: { width: 80 }, onChange: (event) => {
+                                                } }), (0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:text-xs twa:opacity-70 twa:min-w-0 twa:shrink", children: "Square pixel size of each icon" })] }) }), (0, jsx_runtime_1.jsx)(FormLayout_1.FormRow, { label: "Icon Gap (px):", children: (0, jsx_runtime_1.jsxs)(Flex_1.Flex, { alignItems: "center", className: "twa:gap-2", children: [(0, jsx_runtime_1.jsx)(Input_1.default, { type: "number", min: 0, step: 1, value: rating.Gap ?? '', placeholder: String(StyledColumnRatingPreview_1.DEFAULT_RATING_GAP), style: { width: 80 }, onChange: (event) => {
                                                     const raw = event.target.value;
                                                     if (raw === '' || raw == null) {
                                                         update({ Gap: undefined });
@@ -204,7 +185,7 @@ const StyledColumnWizardRatingSection = (props) => {
                                                     update({
                                                         Gap: Number.isFinite(parsed) && parsed >= 0 ? parsed : undefined,
                                                     });
-                                                } }), (0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:text-xs twa:opacity-70 twa:min-w-0 twa:shrink", children: "Pixel space between adjacent icons" })] }) }), (0, jsx_runtime_1.jsx)(FormLayout_1.FormRow, { label: "Allow Half Icons:", children: (0, jsx_runtime_1.jsx)(CheckBox_1.CheckBox, { disabled: disabled, className: "twa:ml-2", checked: rating.AllowHalf ?? true, onChange: (checked) => update({ AllowHalf: checked }), children: "Render fractional values as a partial icon (e.g. 3.5 \u2192 \u2605\u2605\u2605\u00BD\u2606)" }) })] }) })] }), (0, jsx_runtime_1.jsxs)(Card_1.Card, { shadow: false, className: "twa:mb-3", children: [(0, jsx_runtime_1.jsx)(Card_1.Card.Title, { children: "Text" }), (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.jsx)(FormLayout_1.FormRow, { label: "Show Value:", children: (0, jsx_runtime_1.jsx)(CheckBox_1.CheckBox, { disabled: disabled, className: "twa:ml-2", checked: rating.ShowValue ?? false, onChange: (checked) => update({ ShowValue: checked }), children: "Display the numeric value beside the icons" }) }), (0, jsx_runtime_1.jsx)(FormLayout_1.FormRow, { label: "Tooltip:", children: (0, jsx_runtime_1.jsxs)(Flex_1.Flex, { flexDirection: "column", className: "twa:gap-1 twa:ml-2", children: [(0, jsx_runtime_1.jsx)(CheckBox_1.CheckBox, { disabled: disabled, checked: rating.ToolTipText?.includes('CellValue') ?? false, onChange: (checked) => toggleToolTipText('CellValue', checked), children: "Cell Value" }), (0, jsx_runtime_1.jsx)(CheckBox_1.CheckBox, { disabled: disabled, checked: rating.ToolTipText?.includes('PercentageValue') ?? false, onChange: (checked) => toggleToolTipText('PercentageValue', checked), children: "Percentage Value (value \u00F7 Max)" })] }) })] }) })] }), (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: "Cell" }), (0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:text-xs twa:opacity-70 twa:font-normal twa:max-w-[500px]", children: "Optional Cell Style properties overrides Format Column properties)" })] }), (0, jsx_runtime_1.jsx)(Card_1.Card.Body, { children: (0, jsx_runtime_1.jsx)(StyledColumnSliceStyleEditors_1.StyledColumnCellStyleEditor, { api: api, disabled: disabled, value: rating.Cell, onChange: (next) => {
+                                                } }), (0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:text-xs twa:opacity-70 twa:min-w-0 twa:shrink", children: "Pixel space between adjacent icons" })] }) }), (0, jsx_runtime_1.jsx)(FormLayout_1.FormRow, { label: "Allow Half Icons:", children: (0, jsx_runtime_1.jsx)(CheckBox_1.CheckBox, { disabled: disabled, className: "twa:ml-2", checked: rating.AllowHalf ?? true, onChange: (checked) => update({ AllowHalf: checked }), children: "Render fractional values as a partial icon (e.g. 3.5 \u2192 \u2605\u2605\u2605\u00BD\u2606)" }) })] }) })] }), (0, jsx_runtime_1.jsxs)(Card_1.Card, { shadow: false, className: "twa:mb-3", children: [(0, jsx_runtime_1.jsx)(Card_1.Card.Title, { children: "Text" }), (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.jsx)(FormLayout_1.FormRow, { label: "Show Value:", children: (0, jsx_runtime_1.jsx)(CheckBox_1.CheckBox, { disabled: disabled, className: "twa:ml-2", checked: rating.ShowValue ?? false, onChange: (checked) => update({ ShowValue: checked }), children: "Display the numeric value beside the icons" }) }), (0, jsx_runtime_1.jsx)(FormLayout_1.FormRow, { label: "Tooltip:", children: (0, jsx_runtime_1.jsxs)(Flex_1.Flex, { flexDirection: "column", className: "twa:gap-1 twa:ml-2", children: [(0, jsx_runtime_1.jsx)(CheckBox_1.CheckBox, { disabled: disabled, checked: rating.ToolTipText?.includes('CellValue') ?? false, onChange: (checked) => toggleToolTipText('CellValue', checked), children: "Cell Value" }), (0, jsx_runtime_1.jsx)(CheckBox_1.CheckBox, { disabled: disabled, checked: rating.ToolTipText?.includes('PercentageValue') ?? false, onChange: (checked) => toggleToolTipText('PercentageValue', checked), children: "Percentage Value (value \u00F7 Max)" })] }) })] }) })] }), (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" }), (0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:text-xs twa:opacity-70 twa:font-normal twa:max-w-[500px]", children: "Optional Cell Style properties overrides Format Column properties)" })] }), (0, jsx_runtime_1.jsx)(Card_1.Card.Body, { children: (0, jsx_runtime_1.jsx)(StyledColumnSliceStyleEditors_1.StyledColumnCellStyleEditor, { api: api, disabled: disabled, value: rating.Cell, onChange: (next) => {
                                 if (next) {
                                     update({ Cell: next });
                                 }
@@ -213,6 +194,6 @@ const StyledColumnWizardRatingSection = (props) => {
                                     delete cleaned.Cell;
                                     props.onChange({ ...data, RatingStyle: cleaned });
                                 }
-                            } }) })] })] }));
+                            } }) })] }), (0, jsx_runtime_1.jsx)(StyledColumnRatingPreview_1.StyledColumnRatingPreviewCard, { data: data })] }));
 };
 exports.StyledColumnWizardRatingSection = StyledColumnWizardRatingSection;

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

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

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

@@ -0,0 +1,20 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.BulletRangesSummaryPreview = 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 BulletRangesSummaryPreview = ({ bulletStyle }) => {
+    const ranges = bulletStyle.CellRanges ?? [];
+    if (!ranges.length) {
+        return (0, jsx_runtime_1.jsx)(Tag_1.Tag, { children: "No bands defined" });
+    }
+    let postfix = '';
+    if (bulletStyle.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.BulletRangesSummaryPreview = BulletRangesSummaryPreview;

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

@@ -6,6 +6,7 @@ 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");
 function clamp01(n) {
@@ -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),
@@ -52,15 +46,15 @@ const GradientRangesSummaryPreview = (props) => {
         return zeroCentredSplitPreview(props.zeroCentred.NegativeColor, props.zeroCentred.PositiveColor, postfix, minA, maxA);
     }
     const ranges = props.ranges ?? [];
-    if (isDivergingZeroPair(ranges)) {
+    if ((0, StyledColumnGradientHelper_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))) }));
 };
@@ -71,7 +65,7 @@ const GradientColumnComparisonSummaryPreview = (props) => {
     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: {
+    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/StyledColumnState';
+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.d.ts

@@ -8,3 +8,6 @@ import { StyledColumn } from '../../../../../types';
 export declare const StyledColumnBadgePreview: React.FunctionComponent<React.PropsWithChildren<{
     data: StyledColumn;
 }>>;
+export declare const StyledColumnBadgePreviewCard: React.FunctionComponent<React.PropsWithChildren<{
+    data: StyledColumn;
+}>>;

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

@@ -1,16 +1,32 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.StyledColumnBadgePreview = void 0;
+exports.StyledColumnBadgePreviewCard = 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 Card_1 = require("../../../../../components/Card");
+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,13 +36,24 @@ 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 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 badgeValue = badge.IconOnly
                     ? ''
                     : dataType === 'number'
@@ -36,3 +63,5 @@ const StyledColumnBadgePreview = ({ data }) => {
             }) }) }));
 };
 exports.StyledColumnBadgePreview = StyledColumnBadgePreview;
+const StyledColumnBadgePreviewCard = ({ 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.StyledColumnBadgePreview, { data: data }) })] }));
+exports.StyledColumnBadgePreviewCard = StyledColumnBadgePreviewCard;

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

@@ -0,0 +1,9 @@
+import * as React from 'react';
+import { BulletChartStyle, StyledColumn } from '../../../../../AdaptableState/StyledColumnState';
+export declare const StyledColumnBulletPreview: React.FunctionComponent<React.PropsWithChildren<{
+    data: StyledColumn;
+}>>;
+export declare const StyledColumnBulletPreviewCard: 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,64 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.hasBulletChartRangesConfigured = exports.StyledColumnBulletPreviewCard = exports.StyledColumnBulletPreview = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+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 StyledColumnChartListPreviews_1 = require("./StyledColumnChartListPreviews");
+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 formatBulletPreviewCellText = (sampleValue, valueFraction, bullet) => {
+    const parts = [];
+    if (bullet.CellText?.includes('CellValue')) {
+        parts.push(Number.isInteger(sampleValue) ? String(sampleValue) : sampleValue.toFixed(1));
+    }
+    if (bullet.CellText?.includes('PercentageValue')) {
+        parts.push(`${(valueFraction * 100).toFixed(0)}%`);
+    }
+    return parts.join(' ');
+};
+const BulletChartPreviewContent = ({ bullet, }) => {
+    const { sampleValue, valueFraction } = getBulletPreviewSample(bullet);
+    const cellText = formatBulletPreviewCellText(sampleValue, valueFraction, bullet);
+    const hasCellText = Boolean(bullet.CellText?.length && cellText);
+    const textPosition = bullet.CellTextPosition ?? 'Below';
+    const fontStyle = bullet.Font ? (0, StyleHelper_1.convertAdaptableStyleToCSS)(bullet.Font) : undefined;
+    const isVertical = bullet.Orientation === 'Vertical';
+    const chartEl = (0, jsx_runtime_1.jsx)(StyledColumnChartListPreviews_1.StyledColumnBulletChartListPreview, { bullet: bullet });
+    const textEl = hasCellText ? ((0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "ab-BulletChart__text twa:text-2 twa:leading-tight twa:truncate twa:max-w-full", style: fontStyle, children: cellText })) : null;
+    if (hasCellText && textPosition === 'Merged') {
+        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)(Flex_1.Box, { className: "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, children: cellText })] }));
+    }
+    return ((0, jsx_runtime_1.jsxs)(Flex_1.Flex, { className: "ab-BulletChart__wrapper", flexDirection: "column", alignItems: isVertical ? 'center' : 'stretch', style: { justifyContent: 'center', gap: hasCellText ? 2 : 0 }, children: [hasCellText && textPosition === 'Above' && textEl, chartEl, hasCellText && textPosition === 'Below' && textEl] }));
+};
+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 StyledColumnBulletPreviewCard = ({ 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.StyledColumnBulletPreview, { data: data }) })] }));
+exports.StyledColumnBulletPreviewCard = StyledColumnBulletPreviewCard;
+const hasBulletChartRangesConfigured = (bullet) => Boolean(bullet?.CellRanges?.length);
+exports.hasBulletChartRangesConfigured = hasBulletChartRangesConfigured;

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

@@ -0,0 +1,10 @@
+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;
+}>>;
+export declare const StyledColumnGradientPreviewCard: React.FunctionComponent<React.PropsWithChildren<{
+    data: StyledColumn;
+}>>;