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

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

@@ -0,0 +1,35 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.StyledColumnGradientPreviewCard = exports.StyledColumnGradientPreview = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const Flex_1 = require("../../../../../components/Flex");
+const Card_1 = require("../../../../../components/Card");
+const Tag_1 = require("../../../../../components/Tag");
+const AdaptableContext_1 = require("../../../../AdaptableContext");
+const StyledColumnGradientHelper_1 = require("../../../../../Utilities/Helpers/StyledColumnGradientHelper");
+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, StyledColumnGradientHelper_1.hasGradientRangesConfigured)(gs)) {
+        return (0, jsx_runtime_1.jsx)(Tag_1.Tag, { children: "Define ranges before previewing" });
+    }
+    const sampleValues = (0, StyledColumnGradientHelper_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, StyledColumnGradientHelper_1.getGradientPreviewCellStyle)(value, data, api, rowNode), children: formatPreviewValue(value) }, value))) }));
+};
+exports.StyledColumnGradientPreview = StyledColumnGradientPreview;
+const StyledColumnGradientPreviewCard = ({ 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.StyledColumnGradientPreview, { data: data }) })] }));
+exports.StyledColumnGradientPreviewCard = StyledColumnGradientPreviewCard;

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

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

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

@@ -0,0 +1,96 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.StyledColumnIconPreviewCard = 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 Card_1 = require("../../../../../components/Card");
+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.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.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;
+const StyledColumnIconPreviewCard = ({ 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.StyledColumnIconPreview, { data: data }) })] }));
+exports.StyledColumnIconPreviewCard = StyledColumnIconPreviewCard;

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

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

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

@@ -0,0 +1,57 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.StyledColumnPercentBarPreviewCard = exports.StyledColumnPercentBarPreview = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const StyleHelper_1 = require("../../../../../Utilities/Helpers/StyleHelper");
+const percentBarPreviewHelper_1 = require("../../../../../Utilities/Helpers/percentBarPreviewHelper");
+const Flex_1 = require("../../../../../components/Flex");
+const Card_1 = require("../../../../../components/Card");
+const Tag_1 = require("../../../../../components/Tag");
+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, percentBarPreviewHelper_1.getPercentBarPreviewGeometry)(value, pb, min, max);
+    const trackColor = (0, percentBarPreviewHelper_1.getPercentBarPreviewTrackColor)(pb);
+    const fillColor = (0, percentBarPreviewHelper_1.getPercentBarPreviewResolvedBarColor)(barColor);
+    const cellText = (0, percentBarPreviewHelper_1.formatPercentBarPreviewCellText)(value, percentageValue, pb);
+    const hasCellText = Boolean(pb.CellText?.length && cellText);
+    const textPosition = pb.CellTextPosition ?? 'Below';
+    const fontStyle = pb.Font ? (0, StyleHelper_1.convertAdaptableStyleToCSS)(pb.Font) : undefined;
+    const textEl = hasCellText ? ((0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "ab-PercentBar__text twa:text-2 twa:leading-tight twa:truncate", style: fontStyle, children: cellText })) : null;
+    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, percentBarPreviewHelper_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 && textPosition === 'Merged' && ((0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "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, children: cellText }))] }));
+    return ((0, jsx_runtime_1.jsxs)(Flex_1.Flex, { className: `ab-PercentBar__wrapper ${PREVIEW_CELL_CLASS}`, flexDirection: "column", style: { justifyContent: 'center', height: hasCellText && textPosition !== 'Merged' ? '100%' : undefined }, children: [hasCellText && textPosition === 'Above' && textEl, barEl, hasCellText && textPosition === 'Below' && textEl] }));
+};
+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, percentBarPreviewHelper_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, percentBarPreviewHelper_1.getPercentBarPreviewScale)(pb));
+        }
+    }
+    else {
+        ({ min, max } = (0, percentBarPreviewHelper_1.getPercentBarPreviewScale)(pb));
+    }
+    const sampleValues = (0, percentBarPreviewHelper_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;
+const StyledColumnPercentBarPreviewCard = ({ 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.StyledColumnPercentBarPreview, { data: data }) })] }));
+exports.StyledColumnPercentBarPreviewCard = StyledColumnPercentBarPreviewCard;

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

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

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

@@ -0,0 +1,58 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.StyledColumnRangeBarPreviewCard = exports.StyledColumnRangeBarPreview = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+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-RangeBarPreviewCell 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 getRangeBarPreviewSample = (range) => {
+    let min = 0;
+    let max = 100;
+    if (typeof range.Min === 'number' && typeof range.Max === 'number') {
+        min = range.Min;
+        max = range.Max;
+    }
+    const span = max - min || 1;
+    // Matches the value-marker position (~72%) in `StyledColumnRangeBarListPreview`.
+    const sampleValue = min + span * 0.72;
+    const valueFraction = (sampleValue - min) / span;
+    return {
+        sampleValue,
+        valueFraction: Math.max(0, Math.min(1, valueFraction)),
+    };
+};
+const formatRangeBarPreviewCellText = (sampleValue, valueFraction, range) => {
+    const parts = [];
+    if (range.CellText?.includes('CellValue')) {
+        parts.push(Number.isInteger(sampleValue) ? String(sampleValue) : sampleValue.toFixed(1));
+    }
+    if (range.CellText?.includes('PercentageValue')) {
+        parts.push(`${(valueFraction * 100).toFixed(0)}%`);
+    }
+    return parts.join(' ');
+};
+const RangeBarPreviewContent = ({ range }) => {
+    const { sampleValue, valueFraction } = getRangeBarPreviewSample(range);
+    const cellText = formatRangeBarPreviewCellText(sampleValue, valueFraction, range);
+    const hasCellText = Boolean(range.CellText?.length && cellText);
+    const textPosition = range.CellTextPosition ?? 'Below';
+    const isVertical = range.Orientation === 'Vertical';
+    const chartEl = (0, jsx_runtime_1.jsx)(StyledColumnChartListPreviews_1.StyledColumnRangeBarListPreview, { range: range });
+    const textEl = hasCellText ? ((0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "ab-RangeBar__text twa:text-2 twa:leading-tight twa:truncate twa:max-w-full", children: cellText })) : null;
+    if (hasCellText && textPosition === 'Merged') {
+        return ((0, jsx_runtime_1.jsxs)(Flex_1.Box, { className: "ab-RangeBar__wrapper twa:relative twa:inline-flex", children: [chartEl, (0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "ab-RangeBar__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", children: cellText })] }));
+    }
+    return ((0, jsx_runtime_1.jsxs)(Flex_1.Flex, { className: "ab-RangeBar__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 StyledColumnRangeBarPreview = ({ data }) => {
+    const range = data.RangeBarStyle;
+    if (!range) {
+        return (0, jsx_runtime_1.jsx)(Tag_1.Tag, { children: "No Range Bar Style" });
+    }
+    return ((0, jsx_runtime_1.jsx)(Flex_1.Box, { className: PREVIEW_CELL_CLASS, children: (0, jsx_runtime_1.jsx)(RangeBarPreviewContent, { range: range }) }));
+};
+exports.StyledColumnRangeBarPreview = StyledColumnRangeBarPreview;
+const StyledColumnRangeBarPreviewCard = ({ 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.StyledColumnRangeBarPreview, { data: data }) })] }));
+exports.StyledColumnRangeBarPreviewCard = StyledColumnRangeBarPreviewCard;

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

@@ -0,0 +1,18 @@
+import * as React from 'react';
+import type { CellBoxStyle } from '../../../../../AdaptableState/Common/AdaptableStyle';
+import { RatingIconShape, RatingStyle, StyledColumn } from '../../../../../AdaptableState/StyledColumnState';
+export declare const DEFAULT_RATING_MAX = 5;
+export declare const DEFAULT_RATING_SIZE = 14;
+export declare const DEFAULT_RATING_GAP = 2;
+export declare const DEFAULT_RATING_ICON: RatingIconShape;
+export declare function getRatingCellChromeCss(cell: CellBoxStyle | undefined): React.CSSProperties;
+export declare const RatingPreview: React.FC<{
+    rating: RatingStyle;
+    value?: number;
+}>;
+export declare const StyledColumnRatingPreview: React.FunctionComponent<React.PropsWithChildren<{
+    data: StyledColumn;
+}>>;
+export declare const StyledColumnRatingPreviewCard: React.FunctionComponent<React.PropsWithChildren<{
+    data: StyledColumn;
+}>>;

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

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

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

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

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

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

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

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

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

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