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

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

@@ -1,17 +1,15 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx } from "react/jsx-runtime";
 import { Box, Flex } from '../../../../../components/Flex';
-const getText = (options) => {
-    let text = '';
-    if (options && options.includes('CellValue')) {
-        text += '20';
-    }
-    if (options && options.includes('PercentageValue')) {
-        text += ' (50%)';
-    }
-    return text.trim();
-};
+import { getVariableColor } from '../../../../../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`.
+ */
 export const PercentBarStylePreview = (props) => {
-    const cellText = getText(props.cellText);
-    const tooltip = getText(props.toolTipText);
-    return (_jsxs(Box, { title: tooltip, className: "twa:flex-1", children: [_jsx(Flex, { style: { backgroundColor: props.backgroundColor }, className: `twa:flex-1 ${cellText ? 'twa:h-[8px]' : 'twa:h-[18px]'}`, children: _jsx(Box, { className: "twa:basis-[50%]", style: { background: props.barBackgroundColor } }) }), cellText && _jsx(Box, { className: "twa:text-3", children: cellText })] }));
+    const trackColor = props.backgroundColor ? getVariableColor(props.backgroundColor) : undefined;
+    const barColor = props.barBackgroundColor
+        ? getVariableColor(props.barBackgroundColor)
+        : undefined;
+    return (_jsx(Box, { className: stripClassName, children: _jsx(Flex, { className: "twa:h-full twa:relative", style: trackColor ? { backgroundColor: trackColor } : undefined, children: barColor && (_jsx(Box, { className: "twa:absolute twa:top-0 twa:left-0 twa:h-full twa:w-1/2", style: { background: barColor } })) }) }));
 };

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,16 @@
+import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
+import { Box, Flex } from '../../../../../components/Flex';
+import { Tag } from '../../../../../components/Tag';
+import { getVariableColor } from '../../../../../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)]';
+export const RangeBarRangesSummaryPreview = ({ rangeStyle }) => {
+    const ranges = rangeStyle.CellRanges ?? [];
+    if (!ranges.length) {
+        return null;
+    }
+    let postfix = '';
+    if (rangeStyle.RangeValueType === 'Percentage') {
+        postfix = '%';
+    }
+    return (_jsx(Flex, { flexDirection: "column", className: "twa:gap-2", children: ranges.map((range, i) => (_jsxs(Flex, { alignItems: "center", className: "twa:flex-wrap twa:gap-2", children: [_jsxs(Tag, { children: [range.Min, postfix, " \u2192 ", range.Max, postfix] }), _jsx(Box, { className: stripClassName, style: { background: getVariableColor(range.Color) } })] }, i))) }));
+};

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,13 +1,29 @@
-import { jsx as _jsx } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { DEFAULT_INTEGER_DISPLAY_VALUE, DEFAULT_STRING_DISPLAY_VALUE, } from '../../../../../Utilities/Constants/GeneralConstants';
+import { convertAdaptableStyleToCSS } from '../../../../../Utilities/Helpers/StyleHelper';
 import { useAdaptable } from '../../../../AdaptableContext';
 import { Badge } from '../../../../Components/Badge';
 import { Box } from '../../../../../components/Flex';
+import { Card } from '../../../../../components/Card';
+import { Tag } from '../../../../../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
@@ -17,13 +33,24 @@ export const StyledColumnBadgePreview = ({ data }) => {
     const adaptable = useAdaptable();
     const badgeStyle = data.BadgeStyle;
     if (!badgeStyle || !badgeStyle.Badges || badgeStyle.Badges.length === 0) {
-        return _jsx("div", { children: "No Badges Defined" });
+        return _jsx(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 ? convertAdaptableStyleToCSS(badgeStyle.Cell) : undefined;
     const dataType = adaptable.api.columnApi.getColumnDataTypeForColumnId(data.ColumnId);
-    return (_jsx(Box, { children: _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 (_jsx(Box, { className: PREVIEW_CELL_CLASS, style: cellStyle, children: _jsx("div", { className: wrapperClassName, style: wrapperStyle, children: badgeStyle.Badges.map((badge, index) => {
                 const badgeValue = badge.IconOnly
                     ? ''
                     : dataType === 'number'
@@ -32,3 +59,4 @@ export const StyledColumnBadgePreview = ({ data }) => {
                 return (_jsx(Badge, { icon: badge.Icon, pillStyle: badge.PillStyle, iconPosition: badge.IconPosition, shape: badge.Shape, density: badgeStyle.Density ?? 'Normal', iconGap: badge.IconGap, children: badgeValue }, index));
             }) }) }));
 };
+export const StyledColumnBadgePreviewCard = ({ data }) => (_jsxs(Card, { shadow: false, children: [_jsx(Card.Title, { children: _jsx(Box, { className: "twa:font-medium", children: "Preview" }) }), _jsx(Card.Body, { className: "twa:p-1", children: _jsx(StyledColumnBadgePreview, { data: data }) })] }));

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,58 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { convertAdaptableStyleToCSS } from '../../../../../Utilities/Helpers/StyleHelper';
+import { Box, Flex } from '../../../../../components/Flex';
+import { Card } from '../../../../../components/Card';
+import { Tag } from '../../../../../components/Tag';
+import { StyledColumnBulletChartListPreview } from './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 ? convertAdaptableStyleToCSS(bullet.Font) : undefined;
+    const isVertical = bullet.Orientation === 'Vertical';
+    const chartEl = _jsx(StyledColumnBulletChartListPreview, { bullet: bullet });
+    const textEl = hasCellText ? (_jsx(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 (_jsxs(Box, { className: "ab-BulletChart__wrapper twa:relative twa:inline-flex", children: [chartEl, _jsx(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 (_jsxs(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] }));
+};
+export const StyledColumnBulletPreview = ({ data }) => {
+    const bullet = data.BulletChartStyle;
+    if (!bullet) {
+        return _jsx(Tag, { children: "No Bullet Chart Style" });
+    }
+    return (_jsx(Box, { className: PREVIEW_CELL_CLASS, children: _jsx(BulletChartPreviewContent, { bullet: bullet }) }));
+};
+export const StyledColumnBulletPreviewCard = ({ data }) => (_jsxs(Card, { shadow: false, children: [_jsx(Card.Title, { children: _jsx(Box, { className: "twa:font-medium", children: "Preview" }) }), _jsx(Card.Body, { className: "twa:p-1", children: _jsx(StyledColumnBulletPreview, { data: data }) })] }));
+export const hasBulletChartRangesConfigured = (bullet) => Boolean(bullet?.CellRanges?.length);

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;
+}>>;

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

@@ -0,0 +1,30 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Box, Flex } from '../../../../../components/Flex';
+import { Card } from '../../../../../components/Card';
+import { Tag } from '../../../../../components/Tag';
+import { useAdaptable } from '../../../../AdaptableContext';
+import { getGradientPreviewCellStyle, getGradientPreviewSampleValues, hasGradientRangesConfigured, } from '../../../../../Utilities/Helpers/StyledColumnGradientHelper';
+const formatPreviewValue = (value) => {
+    if (Number.isInteger(value)) {
+        return value.toLocaleString();
+    }
+    return value.toLocaleString(undefined, { maximumFractionDigits: 2 });
+};
+export const StyledColumnGradientPreview = ({ data, api: apiProp }) => {
+    const adaptable = useAdaptable();
+    const api = apiProp ?? adaptable.api;
+    const gs = data.GradientStyle;
+    if (!gs) {
+        return _jsx(Tag, { children: "No Gradient Style" });
+    }
+    if (!hasGradientRangesConfigured(gs)) {
+        return _jsx(Tag, { children: "Define ranges before previewing" });
+    }
+    const sampleValues = getGradientPreviewSampleValues(data, api);
+    if (!sampleValues.length) {
+        return _jsx(Tag, { children: "No preview available" });
+    }
+    const rowNode = api.gridApi?.getRowNodeForIndex(0) ?? null;
+    return (_jsx(Flex, { alignItems: "stretch", className: "twa:flex-wrap twa:gap-2", children: sampleValues.map((value) => (_jsx(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: getGradientPreviewCellStyle(value, data, api, rowNode), children: formatPreviewValue(value) }, value))) }));
+};
+export const StyledColumnGradientPreviewCard = ({ data }) => (_jsxs(Card, { shadow: false, children: [_jsx(Card.Title, { children: _jsx(Box, { className: "twa:font-medium", children: "Preview" }) }), _jsx(Card.Body, { className: "twa:p-1", children: _jsx(StyledColumnGradientPreview, { data: data }) })] }));

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,91 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { isAdaptableCustomIcon, isAdaptableElementIcon, isAdaptableSystemIcon, } from '../../../../../components/Icon';
+import { resolveEffectiveIconStyleMappings } from '../../../../../agGrid/cellRenderers/IconRenderer';
+import { AdaptableIconComponent } from '../../../../Components/AdaptableIconComponent';
+import { Box } from '../../../../../components/Flex';
+import { Card } from '../../../../../components/Card';
+import { Tag } from '../../../../../components/Tag';
+import { convertAdaptableStyleToCSS, hasCellBoxStyle, } from '../../../../../Utilities/Helpers/StyleHelper';
+export const DEFAULT_ICON_STYLE_SIZE = 18;
+export const 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 &&
+    (isAdaptableSystemIcon(spec) ||
+        isAdaptableCustomIcon(spec) ||
+        isAdaptableElementIcon(spec));
+function getIconCellChromeCss(cell) {
+    if (!cell || !hasCellBoxStyle(cell)) {
+        return {};
+    }
+    return convertAdaptableStyleToCSS(cell);
+}
+const renderIconSpecForPreview = (spec, size) => {
+    if (isInlineGlyph(spec)) {
+        return (_jsx("span", { className: "ab-IconStyle__glyph", style: {
+                fontSize: size,
+                lineHeight: 1,
+                display: 'inline-flex',
+                alignItems: 'center',
+                justifyContent: 'center',
+            }, children: spec }));
+    }
+    if (isAdaptableIconSpec(spec)) {
+        return _jsx(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 ?? DEFAULT_ICON_STYLE_SIZE;
+    const gap = iconStyle.Gap ?? DEFAULT_ICON_STYLE_GAP;
+    const textPosition = iconStyle.CellTextPosition ?? 'After';
+    const text = buildPreviewText(mapping, iconStyle);
+    const fontStyle = iconStyle.Font ? convertAdaptableStyleToCSS(iconStyle.Font) : undefined;
+    const iconNode = renderIconSpecForPreview(mapping.Icon, size);
+    const textNode = text ? (_jsx("span", { className: "ab-IconStyle__text", style: { lineHeight: 1.2, ...fontStyle }, children: text })) : null;
+    if (!iconNode && !textNode) {
+        return null;
+    }
+    if (!textNode) {
+        return _jsx(_Fragment, { children: iconNode });
+    }
+    if (!iconNode) {
+        return _jsx(_Fragment, { children: textNode });
+    }
+    const isStacked = textPosition === 'Above' || textPosition === 'Below';
+    const children = textPosition === 'Before' || textPosition === 'Above'
+        ? [textNode, iconNode]
+        : [iconNode, textNode];
+    return (_jsx("span", { className: "ab-IconStyle__wrapper", style: {
+            display: 'inline-flex',
+            flexDirection: isStacked ? 'column' : 'row',
+            alignItems: 'center',
+            gap,
+            lineHeight: 1,
+        }, children: children }));
+};
+export const StyledColumnIconPreview = ({ data }) => {
+    const iconStyle = data.IconStyle;
+    if (!iconStyle) {
+        return _jsx(Tag, { children: "No Icon Style" });
+    }
+    const effectiveMappings = resolveEffectiveIconStyleMappings(iconStyle);
+    if (effectiveMappings.length === 0) {
+        return _jsx(Tag, { children: "Define mappings to preview" });
+    }
+    const previewCellChrome = getIconCellChromeCss(iconStyle.Cell);
+    return (_jsx(Box, { className: PREVIEW_CELL_CLASS, style: previewCellChrome, children: _jsx(IconCellPreviewTree, { iconStyle: iconStyle, mapping: effectiveMappings[0] }) }));
+};
+export const StyledColumnIconPreviewCard = ({ data }) => (_jsxs(Card, { shadow: false, children: [_jsx(Card.Title, { children: _jsx(Box, { className: "twa:font-medium", children: "Preview" }) }), _jsx(Card.Body, { className: "twa:p-1", children: _jsx(StyledColumnIconPreview, { data: data }) })] }));

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,52 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { convertAdaptableStyleToCSS } from '../../../../../Utilities/Helpers/StyleHelper';
+import { formatPercentBarPreviewCellText, getPercentBarPreviewGeometry, getPercentBarPreviewResolvedBarColor, getPercentBarPreviewSampleValues, getPercentBarPreviewScale, getPercentBarPreviewTrackColor, hasPercentBarRangesConfigured, } from '../../../../../Utilities/Helpers/percentBarPreviewHelper';
+import { Box, Flex } from '../../../../../components/Flex';
+import { Card } from '../../../../../components/Card';
+import { Tag } from '../../../../../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 } = getPercentBarPreviewGeometry(value, pb, min, max);
+    const trackColor = getPercentBarPreviewTrackColor(pb);
+    const fillColor = getPercentBarPreviewResolvedBarColor(barColor);
+    const cellText = formatPercentBarPreviewCellText(value, percentageValue, pb);
+    const hasCellText = Boolean(pb.CellText?.length && cellText);
+    const textPosition = pb.CellTextPosition ?? 'Below';
+    const fontStyle = pb.Font ? convertAdaptableStyleToCSS(pb.Font) : undefined;
+    const textEl = hasCellText ? (_jsx(Box, { className: "ab-PercentBar__text twa:text-2 twa:leading-tight twa:truncate", style: fontStyle, children: cellText })) : null;
+    const barEl = (_jsxs(Box, { className: "ab-PercentBar__bar twa:relative twa:flex-1 twa:min-h-[6px]", style: trackColor ? { background: getPercentBarPreviewResolvedBarColor(trackColor) } : undefined, children: [fillColor && (_jsx(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' && (_jsx(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 (_jsxs(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] }));
+};
+export const StyledColumnPercentBarPreview = ({ data }) => {
+    const pb = data.PercentBarStyle;
+    if (!pb) {
+        return _jsx(Tag, { children: "No Percent Bar Style" });
+    }
+    if (!hasPercentBarRangesConfigured(pb)) {
+        return _jsx(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 } = getPercentBarPreviewScale(pb));
+        }
+    }
+    else {
+        ({ min, max } = getPercentBarPreviewScale(pb));
+    }
+    const sampleValues = getPercentBarPreviewSampleValues(pb);
+    return (_jsx(Flex, { alignItems: "stretch", className: "twa:flex-wrap twa:gap-2", children: sampleValues.map((value) => (_jsx(PercentBarPreviewCell, { styledColumn: data, value: value, min: min, max: max }, value))) }));
+};
+export const StyledColumnPercentBarPreviewCard = ({ data }) => (_jsxs(Card, { shadow: false, children: [_jsx(Card.Title, { children: _jsx(Box, { className: "twa:font-medium", children: "Preview" }) }), _jsx(Card.Body, { className: "twa:p-1", children: _jsx(StyledColumnPercentBarPreview, { data: data }) })] }));

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,53 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Box, Flex } from '../../../../../components/Flex';
+import { Card } from '../../../../../components/Card';
+import { Tag } from '../../../../../components/Tag';
+import { StyledColumnRangeBarListPreview } from './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 = _jsx(StyledColumnRangeBarListPreview, { range: range });
+    const textEl = hasCellText ? (_jsx(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 (_jsxs(Box, { className: "ab-RangeBar__wrapper twa:relative twa:inline-flex", children: [chartEl, _jsx(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 (_jsxs(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] }));
+};
+export const StyledColumnRangeBarPreview = ({ data }) => {
+    const range = data.RangeBarStyle;
+    if (!range) {
+        return _jsx(Tag, { children: "No Range Bar Style" });
+    }
+    return (_jsx(Box, { className: PREVIEW_CELL_CLASS, children: _jsx(RangeBarPreviewContent, { range: range }) }));
+};
+export const StyledColumnRangeBarPreviewCard = ({ data }) => (_jsxs(Card, { shadow: false, children: [_jsx(Card.Title, { children: _jsx(Box, { className: "twa:font-medium", children: "Preview" }) }), _jsx(Card.Body, { className: "twa:p-1", children: _jsx(StyledColumnRangeBarPreview, { data: data }) })] }));

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,58 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import * as React from 'react';
+import { Box } from '../../../../../components/Flex';
+import { Card } from '../../../../../components/Card';
+import { Tag } from '../../../../../components/Tag';
+import { convertAdaptableStyleToCSS, hasCellBoxStyle, } from '../../../../../Utilities/Helpers/StyleHelper';
+export const DEFAULT_RATING_MAX = 5;
+export const DEFAULT_RATING_SIZE = 14;
+export const DEFAULT_RATING_GAP = 2;
+export const 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));
+export function getRatingCellChromeCss(cell) {
+    if (!cell || !hasCellBoxStyle(cell)) {
+        return {};
+    }
+    return convertAdaptableStyleToCSS(cell);
+}
+export const RatingPreview = ({ rating, value, }) => {
+    const instanceId = React.useId();
+    const max = rating.Max ?? DEFAULT_RATING_MAX;
+    const size = rating.Size ?? DEFAULT_RATING_SIZE;
+    const gap = rating.Gap ?? DEFAULT_RATING_GAP;
+    const icon = rating.Icon ?? 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 (_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 (_jsxs("svg", { width: size, height: size, viewBox: "0 0 24 24", children: [_jsx("path", { d: d, fill: emptyColor }), fill > 0 && (_jsxs(_Fragment, { children: [_jsx("defs", { children: _jsx("clipPath", { id: clipId, children: _jsx("rect", { x: 0, y: 0, width: 24 * fill, height: 24 }) }) }), _jsx("path", { d: d, fill: filledColor, clipPath: `url(#${clipId})` })] }))] }, i));
+            }), rating.ShowValue && (_jsx("span", { style: { marginLeft: 6, fontVariantNumeric: 'tabular-nums' }, children: previewValue }))] }));
+};
+export const StyledColumnRatingPreview = ({ data }) => {
+    const rating = data.RatingStyle;
+    if (!rating) {
+        return _jsx(Tag, { children: "No Rating Style" });
+    }
+    const previewCellChrome = getRatingCellChromeCss(rating.Cell);
+    return (_jsx(Box, { className: PREVIEW_CELL_CLASS, style: previewCellChrome, children: _jsx(RatingPreview, { rating: rating }) }));
+};
+export const StyledColumnRatingPreviewCard = ({ data }) => (_jsxs(Card, { shadow: false, children: [_jsx(Card.Title, { children: _jsx(Box, { className: "twa:font-medium", children: "Preview" }) }), _jsx(Card.Body, { className: "twa:p-1", children: _jsx(StyledColumnRatingPreview, { data: data }) })] }));

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;
+}>>;