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

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

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