@adaptabletools/adaptable-cjs 23.0.0-canary.8 → 23.0.0

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

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

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

@@ -8,6 +8,3 @@ 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,20 +1,19 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.StyledColumnBadgePreviewCard = exports.StyledColumnBadgePreview = void 0;
+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 PREVIEW_CELL_CLASS = 'ab-BadgePreviewCell twa:bg-background twa:text-foreground 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':
@@ -45,7 +44,9 @@ const StyledColumnBadgePreview = ({ data }) => {
     const cellStyle = badgeStyle.Cell ? (0, StyleHelper_1.convertAdaptableStyleToCSS)(badgeStyle.Cell) : undefined;
     const dataType = adaptable.api.columnApi.getColumnDataTypeForColumnId(data.ColumnId);
     const wrapperStyle = {
-        ...(spacing != null ? { ['--ab-cmp-badge__spacing']: `${spacing}px` } : {}),
+        ...(spacing != null
+            ? { ['--ab-cmp-badge__spacing']: `${spacing}px` }
+            : {}),
         ...(rowJustify
             ? {
                 justifyContent: rowJustify,
@@ -64,5 +65,3 @@ 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

@@ -4,7 +4,4 @@ import { BulletChartStyle } from '../../../../../AdaptableState/StyledColumns/Bu
 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

@@ -1,14 +1,13 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.hasBulletChartRangesConfigured = exports.StyledColumnBulletPreviewCard = exports.StyledColumnBulletPreview = void 0;
+exports.hasBulletChartRangesConfigured = exports.StyledColumnBulletPreview = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const StyleHelper_1 = require("../../../../../Utilities/Helpers/StyleHelper");
-const barChartCellText_1 = require("../../../../../Utilities/Helpers/barChartCellText");
+const BarStylesHelper_1 = require("../../../../../Utilities/Helpers/StyledColumns/BarStylesHelper");
 const Flex_1 = require("../../../../../components/Flex");
-const Card_1 = require("../../../../../components/Card");
 const Tag_1 = require("../../../../../components/Tag");
 const StyledColumnChartListPreviews_1 = require("./StyledColumnChartListPreviews");
-const BarChartCellTextPreview_1 = require("./BarChartCellTextPreview");
+const BarStyleCellTextPreview_1 = require("./BarStyleCellTextPreview");
 const PREVIEW_CELL_CLASS = 'ab-BulletPreviewCell twa:inline-flex twa:items-center twa:min-w-[180px] twa:min-h-[36px] twa:px-2 twa:py-1 twa:rounded-standard twa:border twa:border-[color-mix(in_srgb,var(--ab-color-foreground)_15%,transparent)]';
 const getBulletPreviewSample = (bullet) => {
     const ranges = bullet.CellRanges ?? [];
@@ -31,10 +30,10 @@ const getBulletPreviewSample = (bullet) => {
 const BulletChartPreviewContent = ({ bullet, }) => {
     const { sampleValue, valueFraction } = getBulletPreviewSample(bullet);
     const cellTextProperties = bullet.CellTextProperties;
-    const labels = (0, barChartCellText_1.buildBarChartCellTextLabels)(cellTextProperties, Number.isInteger(sampleValue) ? String(sampleValue) : sampleValue.toFixed(1), `${(valueFraction * 100).toFixed(0)}%`);
-    const hasCellText = (0, barChartCellText_1.hasBarChartCellTextConfigured)(cellTextProperties) &&
+    const labels = (0, BarStylesHelper_1.buildBarStyleCellTextLabels)(cellTextProperties, Number.isInteger(sampleValue) ? String(sampleValue) : sampleValue.toFixed(1), `${(valueFraction * 100).toFixed(0)}%`);
+    const hasCellText = (0, BarStylesHelper_1.hasBarStyleCellTextConfigured)(cellTextProperties) &&
         Boolean(labels.cellValue || labels.percentage);
-    const presence = (0, barChartCellText_1.getBarChartCellTextSlotPresence)(cellTextProperties);
+    const presence = (0, BarStylesHelper_1.getBarStyleCellTextSlotPresence)(cellTextProperties);
     const fontStyle = bullet.Font ? (0, StyleHelper_1.convertAdaptableStyleToCSS)(bullet.Font) : undefined;
     const isVertical = bullet.Orientation === 'Vertical';
     const cellTextClassName = 'ab-BulletChart__text twa:text-2 twa:leading-tight twa:truncate twa:max-w-full';
@@ -42,9 +41,9 @@ const BulletChartPreviewContent = ({ bullet, }) => {
     // Merged-only with no outside bands → relative container so the overlay sits
     // on top of the chart, matching the runtime renderer's behaviour.
     if (hasCellText && presence.hasMerged && !presence.hasAbove && !presence.hasBelow) {
-        return ((0, jsx_runtime_1.jsxs)(Flex_1.Box, { className: "ab-BulletChart__wrapper twa:relative twa:inline-flex", children: [chartEl, (0, jsx_runtime_1.jsx)(BarChartCellTextPreview_1.BarChartCellTextPreview, { mergedOverlayClassName: "ab-BulletChart__text twa:absolute twa:inset-x-0 twa:top-1/2 twa:-translate-y-1/2 twa:px-1 twa:text-2 twa:truncate twa:pointer-events-none", style: fontStyle, cellTextProperties: cellTextProperties, labels: labels, vertical: "Merged" })] }));
+        return ((0, jsx_runtime_1.jsxs)(Flex_1.Box, { className: "ab-BulletChart__wrapper twa:relative twa:inline-flex", children: [chartEl, (0, jsx_runtime_1.jsx)(BarStyleCellTextPreview_1.BarStyleCellTextPreview, { mergedOverlayClassName: "ab-BulletChart__text twa:absolute twa:inset-x-0 twa:top-1/2 twa:-translate-y-1/2 twa:px-1 twa:text-2 twa:truncate twa:pointer-events-none", style: fontStyle, cellTextProperties: cellTextProperties, labels: labels, vertical: "Merged" })] }));
     }
-    return ((0, jsx_runtime_1.jsxs)(Flex_1.Flex, { className: "ab-BulletChart__wrapper twa:relative", flexDirection: "column", alignItems: isVertical ? 'center' : 'stretch', style: { justifyContent: 'center', gap: hasCellText ? 2 : 0 }, children: [hasCellText && presence.hasAbove && ((0, jsx_runtime_1.jsx)(BarChartCellTextPreview_1.BarChartCellTextPreview, { className: cellTextClassName, style: fontStyle, cellTextProperties: cellTextProperties, labels: labels, vertical: "Above" })), (0, jsx_runtime_1.jsxs)(Flex_1.Box, { className: "twa:relative twa:w-full", style: { display: 'inline-flex' }, children: [chartEl, hasCellText && presence.hasMerged && ((0, jsx_runtime_1.jsx)(BarChartCellTextPreview_1.BarChartCellTextPreview, { mergedOverlayClassName: "ab-BulletChart__text twa:absolute twa:inset-x-0 twa:top-1/2 twa:-translate-y-1/2 twa:px-1 twa:text-2 twa:truncate twa:pointer-events-none", style: fontStyle, cellTextProperties: cellTextProperties, labels: labels, vertical: "Merged" }))] }), hasCellText && presence.hasBelow && ((0, jsx_runtime_1.jsx)(BarChartCellTextPreview_1.BarChartCellTextPreview, { className: cellTextClassName, style: fontStyle, cellTextProperties: cellTextProperties, labels: labels, vertical: "Below" }))] }));
+    return ((0, jsx_runtime_1.jsxs)(Flex_1.Flex, { className: "ab-BulletChart__wrapper twa:relative", flexDirection: "column", alignItems: isVertical ? 'center' : 'stretch', style: { justifyContent: 'center', gap: hasCellText ? 2 : 0 }, children: [hasCellText && presence.hasAbove && ((0, jsx_runtime_1.jsx)(BarStyleCellTextPreview_1.BarStyleCellTextPreview, { className: cellTextClassName, style: fontStyle, cellTextProperties: cellTextProperties, labels: labels, vertical: "Above" })), (0, jsx_runtime_1.jsxs)(Flex_1.Box, { className: "twa:relative twa:w-full", style: { display: 'inline-flex' }, children: [chartEl, hasCellText && presence.hasMerged && ((0, jsx_runtime_1.jsx)(BarStyleCellTextPreview_1.BarStyleCellTextPreview, { mergedOverlayClassName: "ab-BulletChart__text twa:absolute twa:inset-x-0 twa:top-1/2 twa:-translate-y-1/2 twa:px-1 twa:text-2 twa:truncate twa:pointer-events-none", style: fontStyle, cellTextProperties: cellTextProperties, labels: labels, vertical: "Merged" }))] }), hasCellText && presence.hasBelow && ((0, jsx_runtime_1.jsx)(BarStyleCellTextPreview_1.BarStyleCellTextPreview, { className: cellTextClassName, style: fontStyle, cellTextProperties: cellTextProperties, labels: labels, vertical: "Below" }))] }));
 };
 const StyledColumnBulletPreview = ({ data }) => {
     const bullet = data.BulletChartStyle;
@@ -54,7 +53,5 @@ const StyledColumnBulletPreview = ({ data }) => {
     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

@@ -5,6 +5,3 @@ export declare const StyledColumnGradientPreview: React.FunctionComponent<React.
     data: StyledColumn;
     api?: AdaptableApi;
 }>>;
-export declare const StyledColumnGradientPreviewCard: React.FunctionComponent<React.PropsWithChildren<{
-    data: StyledColumn;
-}>>;

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

@@ -1,12 +1,11 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.StyledColumnGradientPreviewCard = exports.StyledColumnGradientPreview = void 0;
+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 GradientStyleHelper_1 = require("../../../../../Utilities/Helpers/StyledColumns/GradientStyleHelper");
 const formatPreviewValue = (value) => {
     if (Number.isInteger(value)) {
         return value.toLocaleString();
@@ -20,16 +19,14 @@ const StyledColumnGradientPreview = ({ data, api: apiProp }) => {
     if (!gs) {
         return (0, jsx_runtime_1.jsx)(Tag_1.Tag, { children: "No Gradient Style" });
     }
-    if (!(0, StyledColumnGradientHelper_1.hasGradientRangesConfigured)(gs)) {
+    if (!(0, GradientStyleHelper_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);
+    const sampleValues = (0, GradientStyleHelper_1.getGradientPreviewSampleValues)(data, api);
     if (!sampleValues.length) {
         return (0, jsx_runtime_1.jsx)(Tag_1.Tag, { children: "No preview available" });
     }
     const rowNode = api.gridApi?.getRowNodeForIndex(0) ?? null;
-    return ((0, jsx_runtime_1.jsx)(Flex_1.Flex, { alignItems: "stretch", className: "twa:flex-wrap twa:gap-2", children: sampleValues.map((value) => ((0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "ab-GradientPreviewCell twa:px-2 twa:py-1 twa:min-w-[56px] twa:text-2 twa:text-center twa:rounded-standard twa:border twa:border-[color-mix(in_srgb,var(--ab-color-foreground)_15%,transparent)]", style: (0, StyledColumnGradientHelper_1.getGradientPreviewCellStyle)(value, data, api, rowNode), children: formatPreviewValue(value) }, value))) }));
+    return ((0, jsx_runtime_1.jsx)(Flex_1.Flex, { alignItems: "stretch", className: "twa:flex-wrap twa:gap-2", children: sampleValues.map((value) => ((0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "ab-GradientPreviewCell twa:px-2 twa:py-1 twa:min-w-[56px] twa:text-2 twa:text-center twa:rounded-standard twa:border twa:border-[color-mix(in_srgb,var(--ab-color-foreground)_15%,transparent)]", style: (0, GradientStyleHelper_1.getGradientPreviewCellStyle)(value, data, api, rowNode), children: formatPreviewValue(value) }, value))) }));
 };
 exports.StyledColumnGradientPreview = StyledColumnGradientPreview;
-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

@@ -5,6 +5,3 @@ 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

@@ -1,12 +1,11 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.StyledColumnIconPreviewCard = exports.StyledColumnIconPreview = exports.DEFAULT_ICON_STYLE_GAP = exports.DEFAULT_ICON_STYLE_SIZE = void 0;
+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;
@@ -92,5 +91,3 @@ const StyledColumnIconPreview = ({ data }) => {
     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

@@ -3,6 +3,3 @@ 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

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

@@ -3,6 +3,3 @@ 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

@@ -1,13 +1,12 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.StyledColumnRangeBarPreviewCard = exports.StyledColumnRangeBarPreview = void 0;
+exports.StyledColumnRangeBarPreview = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
-const barChartCellText_1 = require("../../../../../Utilities/Helpers/barChartCellText");
+const BarStylesHelper_1 = require("../../../../../Utilities/Helpers/StyledColumns/BarStylesHelper");
 const Flex_1 = require("../../../../../components/Flex");
-const Card_1 = require("../../../../../components/Card");
 const Tag_1 = require("../../../../../components/Tag");
 const StyledColumnChartListPreviews_1 = require("./StyledColumnChartListPreviews");
-const BarChartCellTextPreview_1 = require("./BarChartCellTextPreview");
+const BarStyleCellTextPreview_1 = require("./BarStyleCellTextPreview");
 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;
@@ -28,17 +27,17 @@ const getRangeBarPreviewSample = (range) => {
 const RangeBarPreviewContent = ({ range }) => {
     const { sampleValue, valueFraction } = getRangeBarPreviewSample(range);
     const cellTextProperties = range.CellTextProperties;
-    const labels = (0, barChartCellText_1.buildBarChartCellTextLabels)(cellTextProperties, Number.isInteger(sampleValue) ? String(sampleValue) : sampleValue.toFixed(1), `${(valueFraction * 100).toFixed(0)}%`);
-    const hasCellText = (0, barChartCellText_1.hasBarChartCellTextConfigured)(cellTextProperties) &&
+    const labels = (0, BarStylesHelper_1.buildBarStyleCellTextLabels)(cellTextProperties, Number.isInteger(sampleValue) ? String(sampleValue) : sampleValue.toFixed(1), `${(valueFraction * 100).toFixed(0)}%`);
+    const hasCellText = (0, BarStylesHelper_1.hasBarStyleCellTextConfigured)(cellTextProperties) &&
         Boolean(labels.cellValue || labels.percentage);
-    const presence = (0, barChartCellText_1.getBarChartCellTextSlotPresence)(cellTextProperties);
+    const presence = (0, BarStylesHelper_1.getBarStyleCellTextSlotPresence)(cellTextProperties);
     const isVertical = range.Orientation === 'Vertical';
     const cellTextClassName = 'ab-RangeBar__text twa:text-2 twa:leading-tight twa:truncate twa:max-w-full';
     const chartEl = (0, jsx_runtime_1.jsx)(StyledColumnChartListPreviews_1.StyledColumnRangeBarListPreview, { range: range });
     if (hasCellText && presence.hasMerged && !presence.hasAbove && !presence.hasBelow) {
-        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)(BarChartCellTextPreview_1.BarChartCellTextPreview, { mergedOverlayClassName: "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", cellTextProperties: cellTextProperties, labels: labels, vertical: "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)(BarStyleCellTextPreview_1.BarStyleCellTextPreview, { mergedOverlayClassName: "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", cellTextProperties: cellTextProperties, labels: labels, vertical: "Merged" })] }));
     }
-    return ((0, jsx_runtime_1.jsxs)(Flex_1.Flex, { className: "ab-RangeBar__wrapper twa:relative", flexDirection: "column", alignItems: isVertical ? 'center' : 'stretch', style: { justifyContent: 'center', gap: hasCellText ? 2 : 0 }, children: [hasCellText && presence.hasAbove && ((0, jsx_runtime_1.jsx)(BarChartCellTextPreview_1.BarChartCellTextPreview, { className: cellTextClassName, cellTextProperties: cellTextProperties, labels: labels, vertical: "Above" })), (0, jsx_runtime_1.jsxs)(Flex_1.Box, { className: "twa:relative twa:w-full", style: { display: 'inline-flex' }, children: [chartEl, hasCellText && presence.hasMerged && ((0, jsx_runtime_1.jsx)(BarChartCellTextPreview_1.BarChartCellTextPreview, { mergedOverlayClassName: "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", cellTextProperties: cellTextProperties, labels: labels, vertical: "Merged" }))] }), hasCellText && presence.hasBelow && ((0, jsx_runtime_1.jsx)(BarChartCellTextPreview_1.BarChartCellTextPreview, { className: cellTextClassName, cellTextProperties: cellTextProperties, labels: labels, vertical: "Below" }))] }));
+    return ((0, jsx_runtime_1.jsxs)(Flex_1.Flex, { className: "ab-RangeBar__wrapper twa:relative", flexDirection: "column", alignItems: isVertical ? 'center' : 'stretch', style: { justifyContent: 'center', gap: hasCellText ? 2 : 0 }, children: [hasCellText && presence.hasAbove && ((0, jsx_runtime_1.jsx)(BarStyleCellTextPreview_1.BarStyleCellTextPreview, { className: cellTextClassName, cellTextProperties: cellTextProperties, labels: labels, vertical: "Above" })), (0, jsx_runtime_1.jsxs)(Flex_1.Box, { className: "twa:relative twa:w-full", style: { display: 'inline-flex' }, children: [chartEl, hasCellText && presence.hasMerged && ((0, jsx_runtime_1.jsx)(BarStyleCellTextPreview_1.BarStyleCellTextPreview, { mergedOverlayClassName: "ab-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", cellTextProperties: cellTextProperties, labels: labels, vertical: "Merged" }))] }), hasCellText && presence.hasBelow && ((0, jsx_runtime_1.jsx)(BarStyleCellTextPreview_1.BarStyleCellTextPreview, { className: cellTextClassName, cellTextProperties: cellTextProperties, labels: labels, vertical: "Below" }))] }));
 };
 const StyledColumnRangeBarPreview = ({ data }) => {
     const range = data.RangeBarStyle;
@@ -48,5 +47,3 @@ const StyledColumnRangeBarPreview = ({ data }) => {
     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

@@ -14,6 +14,3 @@ export declare const RatingPreview: React.FC<{
 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

@@ -1,12 +1,11 @@
 "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.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;
@@ -40,6 +39,8 @@ const RatingPreview = ({ rating, value, }) => {
     const allowHalf = rating.AllowHalf ?? true;
     const previewValue = value ?? Math.max(1, Math.min(max, max * 0.7));
     const effective = allowHalf ? previewValue : Math.round(previewValue);
+    // Display rounded to 1 dp so e.g. 3 * 0.7 doesn't surface as 2.0999999999999996.
+    const displayValue = Math.round(previewValue * 10) / 10;
     const d = ICON_PATHS[icon];
     return ((0, jsx_runtime_1.jsxs)("span", { style: {
             display: 'inline-flex',
@@ -50,7 +51,7 @@ const RatingPreview = ({ rating, value, }) => {
                 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 }))] }));
+            }), rating.ShowValue && ((0, jsx_runtime_1.jsx)("span", { style: { marginLeft: 6, fontVariantNumeric: 'tabular-nums' }, children: displayValue }))] }));
 };
 exports.RatingPreview = RatingPreview;
 const StyledColumnRatingPreview = ({ data }) => {
@@ -62,5 +63,3 @@ const StyledColumnRatingPreview = ({ data }) => {
     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

@@ -5,6 +5,3 @@ export declare function getSparklineCellChromeCss(cell: CellBoxStyle | undefined
 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

@@ -1,16 +1,15 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.StyledColumnSparklinePreviewCard = exports.StyledColumnSparklinePreview = void 0;
+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 SparklineStyleHelper_1 = require("../../../../../Utilities/Helpers/StyledColumns/SparklineStyleHelper");
 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];
@@ -44,7 +43,7 @@ const buildSparklinePreviewOptions = (sparklineStyle, container, data, width, he
     const sanitized = AdaptableHelper_1.AdaptableHelper.removeAdaptableObjectPrimitives({
         ...persisted,
     });
-    const options = (0, SparklineOptionsHelper_1.resolveSparklineOptionsForRender)({
+    const options = (0, SparklineStyleHelper_1.resolveSparklineOptionsForRender)({
         ...sanitized,
         type: sanitized.type ?? 'line',
         container,
@@ -129,5 +128,3 @@ const StyledColumnSparklinePreview = ({ data }) => {
     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/StyledColumnWizardStyleSection.js

@@ -7,8 +7,8 @@ const CheckBox_1 = require("../../../../components/CheckBox");
 const ErrorBox_1 = tslib_1.__importDefault(require("../../../../components/ErrorBox"));
 const FormLayout_1 = tslib_1.__importStar(require("../../../../components/FormLayout"));
 const Tag_1 = require("../../../../components/Tag");
-const barChartCellText_1 = require("../../../../Utilities/Helpers/barChartCellText");
-const BarChartCellTextLayoutEditor_1 = require("./Components/BarChartCellTextLayoutEditor");
+const BarStylesHelper_1 = require("../../../../Utilities/Helpers/StyledColumns/BarStylesHelper");
+const BarStyleCellTextLayoutEditor_1 = require("./Components/BarStyleCellTextLayoutEditor");
 const ColorPicker_1 = require("../../../../components/ColorPicker");
 const UIHelper_1 = require("../../../UIHelper");
 const OnePageAdaptableWizard_1 = require("../../../Wizard/OnePageAdaptableWizard");
@@ -17,7 +17,6 @@ const Radio_1 = tslib_1.__importStar(require("../../../../components/Radio"));
 const StyledColumnSliceStyleEditors_1 = require("../StyledColumnSliceStyleEditors");
 const Card_1 = require("../../../../components/Card");
 const SummaryColorTag_1 = require("../../../Wizard/SummaryColorTag");
-const StyledColumnPercentBarPreview_1 = require("./Components/StyledColumnPercentBarPreview");
 // Re-export the Ranges section + summary for legacy import paths.
 var StyledColumnWizardRangesSection_1 = require("./StyledColumnWizardRangesSection");
 Object.defineProperty(exports, "renderStyledColumnRangesSummary", { enumerable: true, get: function () { return StyledColumnWizardRangesSection_1.renderStyledColumnRangesSummary; } });
@@ -34,18 +33,14 @@ const formatOriginLabel = (origin) => {
     }
     return origin;
 };
-const formatPercentBarCellTextSummary = (cellText) => cellText
-    ?.map((t) => (t === 'CellValue' ? 'Cell Value' : 'Percent Value'))
-    .join(' + ') ?? '';
-const formatPercentBarToolTipSummary = (toolTipText) => toolTipText
-    ?.map((t) => (t === 'CellValue' ? 'Cell Value' : 'Percent Value'))
-    .join(' + ') ?? '';
+const formatPercentBarCellTextSummary = (cellText) => cellText?.map((t) => (t === 'CellValue' ? 'Cell Value' : 'Percent Value')).join(' + ') ?? '';
+const formatPercentBarToolTipSummary = (toolTipText) => toolTipText?.map((t) => (t === 'CellValue' ? 'Cell Value' : 'Percent Value')).join(' + ') ?? '';
 const buildStyledColumnPercentBarStyleSummaryStrings = (pb, options) => {
     const items = [`Origin: ${formatOriginLabel(pb.Origin)}`];
-    if ((0, barChartCellText_1.hasBarChartCellTextConfigured)(pb.CellTextProperties)) {
-        const tokens = (0, barChartCellText_1.getActiveBarChartCellTextTokens)(pb.CellTextProperties);
+    if ((0, BarStylesHelper_1.hasBarStyleCellTextConfigured)(pb.CellTextProperties)) {
+        const tokens = (0, BarStylesHelper_1.getActiveBarStyleCellTextTokens)(pb.CellTextProperties);
         items.push(`Cell Text: ${formatPercentBarCellTextSummary(tokens)}`);
-        const layoutSummary = (0, barChartCellText_1.formatBarChartCellTextLayoutSummary)((0, barChartCellText_1.resolveBarChartCellTextLayout)(pb.CellTextProperties));
+        const layoutSummary = (0, BarStylesHelper_1.formatBarStyleCellTextLayoutSummary)((0, BarStylesHelper_1.resolveBarStyleCellTextLayout)(pb.CellTextProperties));
         if (layoutSummary) {
             items.push(`Placement: ${layoutSummary}`);
         }
@@ -135,11 +130,11 @@ const StyledColumnWizardStyleSection = (props) => {
         });
     };
     const onCellTextLayoutToggle = (token, show) => {
-        update((0, barChartCellText_1.toggleBarChartCellTextToken)(cellTextProperties, token, show));
+        update((0, BarStylesHelper_1.toggleBarStyleCellTextToken)(cellTextProperties, token, show));
     };
     const onCellTextPlacementChange = (token, patch) => {
         update({
-            CellTextProperties: (0, barChartCellText_1.patchBarChartCellTextPlacement)(cellTextProperties, token, patch),
+            CellTextProperties: (0, BarStylesHelper_1.patchBarStyleCellTextPlacement)(cellTextProperties, token, patch),
         });
     };
     const onToolTipTextChanged = (token, checked) => {
@@ -158,11 +153,11 @@ const StyledColumnWizardStyleSection = (props) => {
         const { BackColor: _removed, ...rest } = pb;
         props.onChange({ ...data, PercentBarStyle: rest });
     };
-    const cellTextDisabled = !(0, barChartCellText_1.hasBarChartCellTextConfigured)(cellTextProperties) || disabled;
+    const cellTextDisabled = !(0, BarStylesHelper_1.hasBarStyleCellTextConfigured)(cellTextProperties) || disabled;
     const currentOrigin = typeof pb.Origin === 'number'
         ? 'Min' // numeric origin doesn't fit the radio set; treat as Min for selection state
         : pb.Origin ?? 'Auto';
-    return ((0, jsx_runtime_1.jsxs)(Flex_1.Box, { children: [(0, jsx_runtime_1.jsxs)(Card_1.Card, { shadow: false, className: "twa:mb-3", children: [(0, jsx_runtime_1.jsxs)(Card_1.Card.Title, { children: [(0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:font-medium", children: "Bar Position" }), (0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:text-xs twa:opacity-70 twa:font-normal twa:max-w-[520px]", children: "Set the position of the cell text relative to the bar" })] }), (0, jsx_runtime_1.jsx)(Card_1.Card.Body, { children: (0, jsx_runtime_1.jsx)(Radio_1.RadioGroup, { orientation: "vertical", name: "ab-percentbar-origin", value: currentOrigin, onRadioChange: handleOriginChange, children: ORIGIN_CHOICES.map((choice) => ((0, jsx_runtime_1.jsx)(Radio_1.default, { value: choice.value, disabled: disabled, children: (0, jsx_runtime_1.jsxs)(Flex_1.Flex, { alignItems: "center", children: [(0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:min-w-[60px]", children: choice.label }), (0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:text-xs twa:opacity-70", children: choice.hint })] }) }, choice.value))) }) })] }), (0, jsx_runtime_1.jsxs)(Card_1.Card, { shadow: false, className: "twa:mb-3", children: [(0, jsx_runtime_1.jsxs)(Card_1.Card.Title, { children: [(0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:font-medium", children: "Cell Text" }), (0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:text-xs twa:opacity-70 twa:font-normal twa:max-w-[540px]", children: "Pick which values to display and where each one sits around the bar (font properties take precedence over Format Column)" })] }), (0, jsx_runtime_1.jsxs)(Card_1.Card.Body, { children: [(0, jsx_runtime_1.jsx)(FormLayout_1.default, { sizes: [...STYLE_FORM_SIZES], children: (0, jsx_runtime_1.jsx)(FormLayout_1.FormRow, { label: "Cell Text Layout:", children: (0, jsx_runtime_1.jsx)(BarChartCellTextLayoutEditor_1.BarChartCellTextLayoutEditor, { disabled: disabled, cellTextProperties: cellTextProperties, onToggle: onCellTextLayoutToggle, onPlacementChange: onCellTextPlacementChange }) }) }), (0, jsx_runtime_1.jsx)(Flex_1.Box, { className: `twa:mt-3 twa:pt-3 twa:border-t twa:border-foreground/15 ${cellTextDisabled ? 'twa:opacity-50' : ''}`, children: (0, jsx_runtime_1.jsx)(StyledColumnSliceStyleEditors_1.StyledColumnFontStyleEditor, { api: api, disabled: cellTextDisabled, value: pb.Font, onChange: (next) => {
+    return ((0, jsx_runtime_1.jsxs)(Flex_1.Box, { children: [(0, jsx_runtime_1.jsxs)(Card_1.Card, { shadow: false, className: "twa:mb-3", children: [(0, jsx_runtime_1.jsxs)(Card_1.Card.Title, { children: [(0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:font-medium", children: "Bar Position" }), (0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:text-xs twa:opacity-70 twa:font-normal twa:max-w-[520px]", children: "Set the position of the cell text relative to the bar" })] }), (0, jsx_runtime_1.jsx)(Card_1.Card.Body, { children: (0, jsx_runtime_1.jsx)(Radio_1.RadioGroup, { orientation: "vertical", name: "ab-percentbar-origin", value: currentOrigin, onRadioChange: handleOriginChange, children: ORIGIN_CHOICES.map((choice) => ((0, jsx_runtime_1.jsx)(Radio_1.default, { value: choice.value, disabled: disabled, children: (0, jsx_runtime_1.jsxs)(Flex_1.Flex, { alignItems: "center", children: [(0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:min-w-[60px]", children: choice.label }), (0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:text-xs twa:opacity-70", children: choice.hint })] }) }, choice.value))) }) })] }), (0, jsx_runtime_1.jsxs)(Card_1.Card, { shadow: false, className: "twa:mb-3", children: [(0, jsx_runtime_1.jsxs)(Card_1.Card.Title, { children: [(0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:font-medium", children: "Cell Text" }), (0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:text-xs twa:opacity-70 twa:font-normal twa:max-w-[540px]", children: "Pick which values to display and where each one sits around the bar (font properties take precedence over Format Column)" })] }), (0, jsx_runtime_1.jsxs)(Card_1.Card.Body, { children: [(0, jsx_runtime_1.jsx)(FormLayout_1.default, { sizes: [...STYLE_FORM_SIZES], children: (0, jsx_runtime_1.jsx)(BarStyleCellTextLayoutEditor_1.BarStyleCellTextLayoutEditor, { disabled: disabled, cellTextProperties: cellTextProperties, onToggle: onCellTextLayoutToggle, onPlacementChange: onCellTextPlacementChange }) }), (0, jsx_runtime_1.jsx)(Flex_1.Box, { className: `twa:mt-3 twa:pt-3 twa:border-t twa:border-foreground/15 ${cellTextDisabled ? 'twa:opacity-50' : ''}`, children: (0, jsx_runtime_1.jsx)(StyledColumnSliceStyleEditors_1.StyledColumnFontStyleEditor, { api: api, disabled: cellTextDisabled, value: pb.Font, onChange: (next) => {
                                         if (next) {
                                             update({ Font: next });
                                         }
@@ -171,6 +166,6 @@ const StyledColumnWizardStyleSection = (props) => {
                                             delete cleaned.Font;
                                             props.onChange({ ...data, PercentBarStyle: cleaned });
                                         }
-                                    } }) })] })] }), (0, jsx_runtime_1.jsxs)(Card_1.Card, { shadow: false, className: "twa:mb-3", children: [(0, jsx_runtime_1.jsxs)(Card_1.Card.Title, { children: [(0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:font-medium", children: "Cell Style" }), (0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:text-xs twa:opacity-70 twa:font-normal twa:max-w-[520px]", children: "Configure Tooltip and Background Colour" })] }), (0, jsx_runtime_1.jsx)(Card_1.Card.Body, { children: (0, jsx_runtime_1.jsxs)(FormLayout_1.default, { sizes: [...STYLE_FORM_SIZES], children: [(0, jsx_runtime_1.jsxs)(FormLayout_1.FormRow, { label: "Tooltip Display:", children: [(0, jsx_runtime_1.jsx)(CheckBox_1.CheckBox, { disabled: disabled, checked: pb.ToolTipText?.includes('CellValue'), onChange: (checked) => onToolTipTextChanged('CellValue', checked), children: "Cell Value" }), ' ', (0, jsx_runtime_1.jsx)(CheckBox_1.CheckBox, { disabled: disabled, className: "twa:ml-3", checked: pb.ToolTipText?.includes('PercentageValue'), onChange: (checked) => onToolTipTextChanged('PercentageValue', checked), children: "Percent Value" })] }), (0, jsx_runtime_1.jsx)(FormLayout_1.FormRow, { label: `Back ${api.internalApi.getCorrectEnglishVariant('Colour')}:`, children: (0, jsx_runtime_1.jsx)(ColorPicker_1.OptionalColorPicker, { disabled: disabled, api: api, value: pb.BackColor ?? undefined, defaultColor: (0, UIHelper_1.getGraySwatchColor)(), onChange: onBackColorChange }) })] }) })] }), (0, jsx_runtime_1.jsx)(StyledColumnPercentBarPreview_1.StyledColumnPercentBarPreviewCard, { data: data })] }));
+                                    } }) })] })] }), (0, jsx_runtime_1.jsxs)(Card_1.Card, { shadow: false, className: "twa:mb-3", children: [(0, jsx_runtime_1.jsxs)(Card_1.Card.Title, { children: [(0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:font-medium", children: "Cell Style" }), (0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:text-xs twa:opacity-70 twa:font-normal twa:max-w-[520px]", children: "Configure Tooltip and Background Colour" })] }), (0, jsx_runtime_1.jsx)(Card_1.Card.Body, { children: (0, jsx_runtime_1.jsxs)(FormLayout_1.default, { sizes: [...STYLE_FORM_SIZES], children: [(0, jsx_runtime_1.jsxs)(FormLayout_1.FormRow, { label: "Tooltip Display:", children: [(0, jsx_runtime_1.jsx)(CheckBox_1.CheckBox, { disabled: disabled, checked: pb.ToolTipText?.includes('CellValue'), onChange: (checked) => onToolTipTextChanged('CellValue', checked), children: "Cell Value" }), ' ', (0, jsx_runtime_1.jsx)(CheckBox_1.CheckBox, { disabled: disabled, className: "twa:ml-3", checked: pb.ToolTipText?.includes('PercentageValue'), onChange: (checked) => onToolTipTextChanged('PercentageValue', checked), children: "Percent Value" })] }), (0, jsx_runtime_1.jsx)(FormLayout_1.FormRow, { label: `Back ${api.internalApi.getCorrectEnglishVariant('Colour')}:`, children: (0, jsx_runtime_1.jsx)(ColorPicker_1.OptionalColorPicker, { disabled: disabled, api: api, value: pb.BackColor ?? undefined, defaultColor: (0, UIHelper_1.getGraySwatchColor)(), onChange: onBackColorChange }) })] }) })] })] }));
 };
 exports.StyledColumnWizardStyleSection = StyledColumnWizardStyleSection;

package/src/View/UIHelper.js

@@ -36,7 +36,7 @@ const tslib_1 = require("tslib");
 const EditableConfigEntityState_1 = require("./Components/SharedProps/EditableConfigEntityState");
 const Enums_1 = require("../AdaptableState/Common/Enums");
 const StringExtensions_1 = require("../Utilities/Extensions/StringExtensions");
-const ScheduleHelper_1 = require("../Utilities/Helpers/ScheduleHelper");
+const ScheduleHelper_1 = require("../Utilities/Helpers/Scheduling/ScheduleHelper");
 const ArrayExtensions_1 = tslib_1.__importDefault(require("../Utilities/Extensions/ArrayExtensions"));
 const resolveContainerElement_1 = require("../Utilities/resolveContainerElement");
 /** Generic swatch entries for the Colour Picker (resolved at runtime per active theme). */