@adaptabletools/adaptable 23.0.0-canary.8 → 23.0.0

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

@@ -12,13 +12,12 @@ import { useOnePageAdaptableWizardContext } from '../../Wizard/OnePageAdaptableW
 import AdaptableInput from '../../Components/AdaptableInput';
 import { Box, Flex } from '../../../components/Flex';
 import { BulletRangesSummaryPreview } from './StyledColumnWizardStyleSection/Components/BulletRangesSummaryPreview';
-import { StyledColumnBulletPreviewCard } from './StyledColumnWizardStyleSection/Components/StyledColumnBulletPreview';
 import { SingleSelect } from '../../../components/NewSelect';
 import { getCellFontStyleSummaryItems, StyledColumnFontStyleEditor, } from './StyledColumnSliceStyleEditors';
 import { Card } from '../../../components/Card';
 import { renderSummaryStringTags } from '../../Wizard/SummaryColorTag';
-import { formatBarChartCellTextLayoutSummary, getActiveBarChartCellTextTokens, hasBarChartCellTextConfigured, patchBarChartCellTextPlacement, resolveBarChartCellTextLayout, toggleBarChartCellTextToken, } from '../../../Utilities/Helpers/barChartCellText';
-import { BarChartCellTextLayoutEditor } from './StyledColumnWizardStyleSection/Components/BarChartCellTextLayoutEditor';
+import { formatBarStyleCellTextLayoutSummary, getActiveBarStyleCellTextTokens, hasBarStyleCellTextConfigured, patchBarStyleCellTextPlacement, resolveBarStyleCellTextLayout, toggleBarStyleCellTextToken, } from '../../../Utilities/Helpers/StyledColumns/BarStylesHelper';
+import { BarStyleCellTextLayoutEditor } from './StyledColumnWizardStyleSection/Components/BarStyleCellTextLayoutEditor';
 const BULLET_STYLE_FORM_SIZES = ['200px', '1fr'];
 const getTargetSummary = (target) => {
     if (target == undefined) {
@@ -51,12 +50,8 @@ const formatBulletOriginLabel = (origin) => {
     }
     return origin;
 };
-const formatBulletCellTextSummary = (cellText) => cellText
-    ?.map((t) => (t === 'CellValue' ? 'Cell Value' : 'Percent Value'))
-    .join(' + ') ?? '';
-const formatBulletToolTipSummary = (toolTipText) => toolTipText
-    ?.map((t) => (t === 'CellValue' ? 'Cell Value' : 'Percent Value'))
-    .join(' + ') ?? '';
+const formatBulletCellTextSummary = (cellText) => cellText?.map((t) => (t === 'CellValue' ? 'Cell Value' : 'Percent Value')).join(' + ') ?? '';
+const formatBulletToolTipSummary = (toolTipText) => toolTipText?.map((t) => (t === 'CellValue' ? 'Cell Value' : 'Percent Value')).join(' + ') ?? '';
 export const getStyledColumnBulletRangesViewValues = (data) => {
     const bullet = data.BulletChartStyle;
     if (!bullet) {
@@ -100,10 +95,10 @@ const buildStyledColumnBulletStyleSummaryStrings = (bullet, options) => {
     if (bullet.BackColor) {
         items.push(`Back Colour: ${bullet.BackColor}`);
     }
-    if (hasBarChartCellTextConfigured(bullet.CellTextProperties)) {
-        const tokens = getActiveBarChartCellTextTokens(bullet.CellTextProperties);
+    if (hasBarStyleCellTextConfigured(bullet.CellTextProperties)) {
+        const tokens = getActiveBarStyleCellTextTokens(bullet.CellTextProperties);
         items.push(`Cell Text: ${formatBulletCellTextSummary(tokens)}`);
-        const layoutSummary = formatBarChartCellTextLayoutSummary(resolveBarChartCellTextLayout(bullet.CellTextProperties));
+        const layoutSummary = formatBarStyleCellTextLayoutSummary(resolveBarStyleCellTextLayout(bullet.CellTextProperties));
         if (layoutSummary) {
             items.push(`Placement: ${layoutSummary}`);
         }
@@ -290,9 +285,7 @@ export const StyledColumnWizardBulletSection = (props) => {
         }
         if (mode === 'Column') {
             // Use the first available numeric column (excluding the styled column itself)
-            const candidate = api.columnApi
-                .getNumericColumns()
-                .find((c) => c.columnId !== data.ColumnId);
+            const candidate = api.columnApi.getNumericColumns().find((c) => c.columnId !== data.ColumnId);
             setTarget(candidate?.columnId ?? '');
             return;
         }
@@ -324,11 +317,11 @@ export const StyledColumnWizardBulletSection = (props) => {
     };
     // -- Cell text -------------------------------------------------------------
     const toggleCellText = (token, show) => {
-        update(toggleBarChartCellTextToken(bullet.CellTextProperties, token, show));
+        update(toggleBarStyleCellTextToken(bullet.CellTextProperties, token, show));
     };
     const onCellTextPlacementChange = (token, patch) => {
         update({
-            CellTextProperties: patchBarChartCellTextPlacement(bullet.CellTextProperties, token, patch),
+            CellTextProperties: patchBarStyleCellTextPlacement(bullet.CellTextProperties, token, patch),
         });
     };
     const toggleToolTipText = (token, checked) => {
@@ -358,7 +351,9 @@ export const StyledColumnWizardBulletSection = (props) => {
         : typeof primaryTarget?.Value === 'number'
             ? primaryTarget.Value
             : undefined;
-    const columnTargetValue = typeof primaryTarget === 'string' && primaryTarget !== 'Col-Avg' && primaryTarget !== 'Col-Median'
+    const columnTargetValue = typeof primaryTarget === 'string' &&
+        primaryTarget !== 'Col-Avg' &&
+        primaryTarget !== 'Col-Median'
         ? primaryTarget
         : typeof primaryTarget?.Value === 'string'
             ? primaryTarget.Value
@@ -370,7 +365,7 @@ export const StyledColumnWizardBulletSection = (props) => {
         Size: markerCfg?.Size ?? (markerCfg?.Shape === 'Line' ? 2 : 8),
     };
     const cellTextProperties = bullet.CellTextProperties;
-    const cellTextDisabled = !hasBarChartCellTextConfigured(cellTextProperties) || disabled;
+    const cellTextDisabled = !hasBarStyleCellTextConfigured(cellTextProperties) || disabled;
     return (_jsxs(Box, { children: [_jsxs(Card, { shadow: false, className: "twa:mb-3", children: [_jsxs(Card.Title, { children: [_jsx(Box, { className: "twa:font-medium", children: "Target" }), _jsx(Box, { className: "twa:text-xs twa:opacity-70 twa:font-normal twa:max-w-[520px]", children: "Select a target value for the bullet scale" })] }), _jsx(Card.Body, { children: _jsxs(FormLayout, { sizes: [...BULLET_STYLE_FORM_SIZES], children: [_jsx(FormRow, { label: "Target:", children: _jsx(Box, { className: "twa:max-w-[180px]", children: _jsx(SingleSelect, { className: "twa:w-full", value: currentMode, onValueChange: (v) => handleTargetModeChange(v), items: [
                                                 { value: 'None', label: 'None' },
                                                 { value: 'Number', label: 'Fixed Number' },
@@ -382,7 +377,7 @@ export const StyledColumnWizardBulletSection = (props) => {
                                                 { value: 'Vertical', label: 'Vertical' },
                                             ] }) }) }), bullet.Orientation === 'Vertical' && (_jsx(FormRow, { label: "", children: _jsxs(Box, { className: "twa:text-xs twa:text-neutral-500", children: ["Tip: vertical bullet charts need a tall row height to be readable (we recommend at least 60px). Set ", _jsx("code", { children: "rowHeight" }), " on ", _jsx("code", { children: " gridOptions " }), " or use", ' ', _jsx("code", { children: "getRowHeight" }), "."] }) })), _jsx(FormRow, { label: "Bar Colour:", children: _jsx(ColorPicker, { disabled: disabled, api: api, value: bullet.Bar?.Color, onChange: (c) => updateBar({ Color: c }) }) }), _jsx(FormRow, { label: bullet.Orientation === 'Vertical' ? 'Bar Width (px):' : 'Bar Height (px):', children: _jsx(Box, { className: "twa:max-w-[100px]", children: _jsx(AdaptableInput, { type: "number", min: 1, value: bullet.Bar?.Height ?? '', onChange: (e) => updateBar({
                                                 Height: e.target.value === '' ? undefined : Number(e.target.value),
-                                            }), placeholder: "8" }) }) }), _jsx(FormRow, { label: "Origin:", children: _jsx(Box, { className: "twa:max-w-[160px]", children: _jsx(SingleSelect, { className: "twa:w-full", value: typeof bullet.Origin === 'number' ? 'Number' : (bullet.Origin ?? 'Auto'), onValueChange: (v) => {
+                                            }), placeholder: "8" }) }) }), _jsx(FormRow, { label: "Origin:", children: _jsx(Box, { className: "twa:max-w-[160px]", children: _jsx(SingleSelect, { className: "twa:w-full", value: typeof bullet.Origin === 'number' ? 'Number' : bullet.Origin ?? 'Auto', onValueChange: (v) => {
                                                 if (v === 'Auto' || v === 'Zero') {
                                                     update({ Origin: v });
                                                 }
@@ -392,7 +387,7 @@ export const StyledColumnWizardBulletSection = (props) => {
                                             }, items: [
                                                 { value: 'Auto', label: 'Auto' },
                                                 { value: 'Zero', label: 'Zero' },
-                                            ] }) }) })] }) })] }), _jsxs(Card, { shadow: false, className: "twa:mb-3", children: [_jsxs(Card.Title, { children: [_jsx(Box, { className: "twa:font-medium", children: "Cell Text" }), _jsx(Box, { className: "twa:text-xs twa:opacity-70 twa:font-normal twa:max-w-[520px]", children: "Pick which values to display and where each one sits around the bar" })] }), _jsxs(Card.Body, { children: [_jsx(FormLayout, { sizes: [...BULLET_STYLE_FORM_SIZES], children: _jsx(FormRow, { label: "Cell Text Layout:", children: _jsx(BarChartCellTextLayoutEditor, { disabled: disabled, cellTextProperties: cellTextProperties, onToggle: toggleCellText, onPlacementChange: onCellTextPlacementChange }) }) }), _jsx(Box, { className: `twa:mt-3 twa:pt-3 twa:border-t twa:border-foreground/15 ${cellTextDisabled ? 'twa:opacity-50' : ''}`, children: _jsx(StyledColumnFontStyleEditor, { api: api, disabled: cellTextDisabled, value: bullet.Font, onChange: (next) => {
+                                            ] }) }) })] }) })] }), _jsxs(Card, { shadow: false, className: "twa:mb-3", children: [_jsxs(Card.Title, { children: [_jsx(Box, { className: "twa:font-medium", children: "Cell Text" }), _jsx(Box, { className: "twa:text-xs twa:opacity-70 twa:font-normal twa:max-w-[520px]", children: "Pick which values to display and where each one sits around the bar" })] }), _jsxs(Card.Body, { children: [_jsx(FormLayout, { sizes: [...BULLET_STYLE_FORM_SIZES], children: _jsx(BarStyleCellTextLayoutEditor, { disabled: disabled, cellTextProperties: cellTextProperties, onToggle: toggleCellText, onPlacementChange: onCellTextPlacementChange }) }), _jsx(Box, { className: `twa:mt-3 twa:pt-3 twa:border-t twa:border-foreground/15 ${cellTextDisabled ? 'twa:opacity-50' : ''}`, children: _jsx(StyledColumnFontStyleEditor, { api: api, disabled: cellTextDisabled, value: bullet.Font, onChange: (next) => {
                                         if (next) {
                                             update({ Font: next });
                                         }
@@ -401,5 +396,5 @@ export const StyledColumnWizardBulletSection = (props) => {
                                             delete cleaned.Font;
                                             props.onChange({ ...data, BulletChartStyle: cleaned });
                                         }
-                                    } }) })] })] }), _jsxs(Card, { shadow: false, className: "twa:mb-3", children: [_jsxs(Card.Title, { children: [_jsx(Box, { className: "twa:font-medium", children: "Tooltip" }), _jsx(Box, { className: "twa:text-xs twa:opacity-70 twa:font-normal twa:max-w-[520px]", children: "Choose whether to display a tooltip" })] }), _jsx(Card.Body, { children: _jsx(FormLayout, { sizes: [...BULLET_STYLE_FORM_SIZES], children: _jsxs(FormRow, { label: "Tooltip Display:", children: [_jsx(CheckBox, { disabled: disabled, checked: bullet.ToolTipText?.includes('CellValue'), onChange: (checked) => toggleToolTipText('CellValue', checked), children: "Cell Value" }), ' ', _jsx(CheckBox, { disabled: disabled, className: "twa:ml-3", checked: bullet.ToolTipText?.includes('PercentageValue'), onChange: (checked) => toggleToolTipText('PercentageValue', checked), children: "Percent Value" })] }) }) })] }), _jsx(StyledColumnBulletPreviewCard, { data: data })] }));
+                                    } }) })] })] }), _jsxs(Card, { shadow: false, className: "twa:mb-3", children: [_jsxs(Card.Title, { children: [_jsx(Box, { className: "twa:font-medium", children: "Tooltip" }), _jsx(Box, { className: "twa:text-xs twa:opacity-70 twa:font-normal twa:max-w-[520px]", children: "Choose whether to display a tooltip" })] }), _jsx(Card.Body, { children: _jsx(FormLayout, { sizes: [...BULLET_STYLE_FORM_SIZES], children: _jsxs(FormRow, { label: "Tooltip Display:", children: [_jsx(CheckBox, { disabled: disabled, checked: bullet.ToolTipText?.includes('CellValue'), onChange: (checked) => toggleToolTipText('CellValue', checked), children: "Cell Value" }), ' ', _jsx(CheckBox, { disabled: disabled, className: "twa:ml-3", checked: bullet.ToolTipText?.includes('PercentageValue'), onChange: (checked) => toggleToolTipText('PercentageValue', checked), children: "Percent Value" })] }) }) })] })] }));
 };

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

@@ -7,11 +7,10 @@ import { Tag } from '../../../components/Tag';
 import { useOnePageAdaptableWizardContext } from '../../Wizard/OnePageAdaptableWizard';
 import { Box, Flex } from '../../../components/Flex';
 import { NumberInput } from '../../../components/Input/NumberInput';
-import { DEFAULT_GRADIENT_MAX_ALPHA, DEFAULT_GRADIENT_MIN_ALPHA, } from '../../../Utilities/Helpers/StyledColumnGradientHelper';
+import { DEFAULT_GRADIENT_MAX_ALPHA, DEFAULT_GRADIENT_MIN_ALPHA, } from '../../../Utilities/Helpers/StyledColumns/GradientStyleHelper';
 import { getCellFontStyleSummaryItems, StyledColumnFontStyleEditor, } from './StyledColumnSliceStyleEditors';
 import { Card } from '../../../components/Card';
 import { renderSummaryStringTags } from '../../Wizard/SummaryColorTag';
-import { StyledColumnGradientPreviewCard } from './StyledColumnWizardStyleSection/Components/StyledColumnGradientPreview';
 const STYLE_FORM_SIZES = ['200px', '1fr'];
 function formatGradientToolTipSummary(opts) {
     return opts
@@ -110,5 +109,5 @@ export const StyledColumnWizardGradientSection = (props) => {
                                 else {
                                     patchGradient({ AutoContrastText: true });
                                 }
-                            }, children: "Make text readable on tinted backgrounds" }) })] }), _jsxs(Card, { shadow: false, className: "twa:mb-3", children: [_jsxs(Card.Title, { children: [_jsx(Box, { className: "twa:font-medium", children: "Tooltip" }), _jsx(Box, { className: "twa:text-xs twa:opacity-70 twa:font-normal twa:max-w-[600px]", children: "Set Tooltip properties" })] }), _jsx(Card.Body, { children: _jsx(FormLayout, { sizes: [...STYLE_FORM_SIZES], children: _jsx(FormRow, { label: "Tooltip:", children: _jsxs(Box, { className: "twa:ml-2", children: [_jsx(CheckBox, { disabled: disabled, checked: gs.ToolTipText?.includes('CellValue'), onChange: (checked) => onToolTipTextChanged('CellValue', checked), children: "Cell Value" }), ' ', _jsx(CheckBox, { disabled: disabled, className: "twa:ml-3", checked: gs.ToolTipText?.includes('PercentageValue'), onChange: (checked) => onToolTipTextChanged('PercentageValue', checked), children: "Percent along scale" })] }) }) }) })] }), _jsxs(Card, { shadow: false, children: [_jsxs(Card.Title, { children: [_jsx(Box, { className: "twa:font-medium", children: "Font" }), _jsx(Box, { className: "twa:text-xs twa:opacity-70 twa:font-normal twa:max-w-[480px]", children: "Optional font properties (takes precedence over Format Column)" })] }), _jsx(Card.Body, { children: _jsx(StyledColumnFontStyleEditor, { api: api, disabled: disabled, value: gs.Font, onChange: onFontChange }) })] }), _jsx(StyledColumnGradientPreviewCard, { data: data }), !data.ColumnId && (_jsx(ErrorBox, { className: "twa:mt-2", children: "Select a column before changing Gradient style." }))] }));
+                            }, children: "Make text readable on tinted backgrounds" }) })] }), _jsxs(Card, { shadow: false, className: "twa:mb-3", children: [_jsxs(Card.Title, { children: [_jsx(Box, { className: "twa:font-medium", children: "Tooltip" }), _jsx(Box, { className: "twa:text-xs twa:opacity-70 twa:font-normal twa:max-w-[600px]", children: "Set Tooltip properties" })] }), _jsx(Card.Body, { children: _jsx(FormLayout, { sizes: [...STYLE_FORM_SIZES], children: _jsx(FormRow, { label: "Tooltip:", children: _jsxs(Box, { className: "twa:ml-2", children: [_jsx(CheckBox, { disabled: disabled, checked: gs.ToolTipText?.includes('CellValue'), onChange: (checked) => onToolTipTextChanged('CellValue', checked), children: "Cell Value" }), ' ', _jsx(CheckBox, { disabled: disabled, className: "twa:ml-3", checked: gs.ToolTipText?.includes('PercentageValue'), onChange: (checked) => onToolTipTextChanged('PercentageValue', checked), children: "Percent along scale" })] }) }) }) })] }), _jsxs(Card, { shadow: false, children: [_jsxs(Card.Title, { children: [_jsx(Box, { className: "twa:font-medium", children: "Font" }), _jsx(Box, { className: "twa:text-xs twa:opacity-70 twa:font-normal twa:max-w-[480px]", children: "Optional font properties (takes precedence over Format Column)" })] }), _jsx(Card.Body, { children: _jsx(StyledColumnFontStyleEditor, { api: api, disabled: disabled, value: gs.Font, onChange: onFontChange }) })] }), !data.ColumnId && (_jsx(ErrorBox, { className: "twa:mt-2", children: "Select a column before changing Gradient style." }))] }));
 };

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

@@ -14,12 +14,11 @@ import { IconSelectorPanel } from '../../../components/IconSelector';
 import { useOnePageAdaptableWizardContext } from '../../Wizard/OnePageAdaptableWizard';
 import { useAdaptable } from '../../AdaptableContext';
 import { AdaptableIconComponent } from '../../Components/AdaptableIconComponent';
-import { ICON_STYLE_PRESET_DESCRIPTIONS, ICON_STYLE_PRESET_LABELS, getIconStylePresetMappings, } from '../../../Utilities/Helpers/IconStylePresets';
+import { ICON_STYLE_PRESET_DESCRIPTIONS, ICON_STYLE_PRESET_LABELS, getIconStylePresetMappings, } from '../../../Utilities/Helpers/StyledColumns/IconStyleHelper';
 import { resolveEffectiveIconStyleMappings, resolveIconStyleMappingsForSummaryPreview } from '../../../agGrid/cellRenderers/IconRenderer';
 import { Card } from '../../../components/Card';
 import { renderSummaryStringTags } from '../../Wizard/SummaryColorTag';
 import { getCellBoxStyleSummaryItems, getCellFontStyleSummaryItems, StyledColumnCellStyleEditor, StyledColumnFontStyleEditor, } from './StyledColumnSliceStyleEditors';
-import { StyledColumnIconPreviewCard } from './StyledColumnWizardStyleSection/Components/StyledColumnIconPreview';
 import { wizardSelectionSimpleButtonProps } from '../../../Utilities/wizardSelection';
 const STYLE_FORM_SIZES = ['200px', '1fr'];
 const detectIconKind = (spec) => {
@@ -339,7 +338,7 @@ export const StyledColumnWizardIconSection = (props) => {
                                                     { value: 'After', label: 'After' },
                                                     { value: 'Above', label: 'Above' },
                                                     { value: 'Below', label: 'Below' },
-                                                ] }) }) })] }), _jsx(Box, { className: `twa:mt-3 twa:pt-3 twa:border-t twa:border-foreground/15 ${cellTextDisabled ? 'twa:opacity-50' : ''}`, children: _jsx(StyledColumnFontStyleEditor, { api: api, disabled: disabled || cellTextDisabled, value: iconStyle.Font, onChange: onFontChange }) })] })] }), _jsxs(Card, { shadow: false, className: "twa:mb-3", children: [_jsxs(Card.Title, { children: [_jsx(Box, { className: "twa:font-medium", children: "Tooltip" }), _jsx(Box, { className: "twa:text-xs twa:opacity-70 twa:font-normal twa:max-w-[520px]", children: "Choose whether and how to display a tooltip" })] }), _jsx(Card.Body, { children: _jsx(FormLayout, { sizes: [...STYLE_FORM_SIZES], children: _jsxs(FormRow, { label: "Tooltip Display:", children: [_jsx(CheckBox, { checked: toolTipText.includes('CellValue'), onChange: (checked) => toggleToolTipText('CellValue', checked), children: "Cell Value" }), ' ', _jsx(CheckBox, { className: "twa:ml-3", checked: toolTipText.includes('IconDescription'), onChange: (checked) => toggleToolTipText('IconDescription', checked), children: "Description" })] }) }) })] }), _jsxs(Card, { shadow: false, children: [_jsxs(Card.Title, { children: [_jsx(Box, { className: "twa:font-medium", children: "Cell" }), _jsx(Box, { className: "twa:text-xs twa:opacity-70 twa:font-normal twa:max-w-[520px]", children: "Optional cell box styling (overrides Format Column properties)" })] }), _jsx(Card.Body, { children: _jsx(StyledColumnCellStyleEditor, { api: api, disabled: disabled, value: iconStyle.Cell, onChange: onCellChange }) })] }), _jsx(StyledColumnIconPreviewCard, { data: data })] }));
+                                                ] }) }) })] }), _jsx(Box, { className: `twa:mt-3 twa:pt-3 twa:border-t twa:border-foreground/15 ${cellTextDisabled ? 'twa:opacity-50' : ''}`, children: _jsx(StyledColumnFontStyleEditor, { api: api, disabled: disabled || cellTextDisabled, value: iconStyle.Font, onChange: onFontChange }) })] })] }), _jsxs(Card, { shadow: false, className: "twa:mb-3", children: [_jsxs(Card.Title, { children: [_jsx(Box, { className: "twa:font-medium", children: "Tooltip" }), _jsx(Box, { className: "twa:text-xs twa:opacity-70 twa:font-normal twa:max-w-[520px]", children: "Choose whether and how to display a tooltip" })] }), _jsx(Card.Body, { children: _jsx(FormLayout, { sizes: [...STYLE_FORM_SIZES], children: _jsxs(FormRow, { label: "Tooltip Display:", children: [_jsx(CheckBox, { checked: toolTipText.includes('CellValue'), onChange: (checked) => toggleToolTipText('CellValue', checked), children: "Cell Value" }), ' ', _jsx(CheckBox, { className: "twa:ml-3", checked: toolTipText.includes('IconDescription'), onChange: (checked) => toggleToolTipText('IconDescription', checked), children: "Description" })] }) }) })] }), _jsxs(Card, { shadow: false, children: [_jsxs(Card.Title, { children: [_jsx(Box, { className: "twa:font-medium", children: "Cell" }), _jsx(Box, { className: "twa:text-xs twa:opacity-70 twa:font-normal twa:max-w-[520px]", children: "Optional cell box styling (overrides Format Column properties)" })] }), _jsx(Card.Body, { children: _jsx(StyledColumnCellStyleEditor, { api: api, disabled: disabled, value: iconStyle.Cell, onChange: onCellChange }) })] })] }));
 };
 // ---------------------------------------------------------------------------
 // Icon picker — click-to-open popover (closes on outside click or system pick)

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

@@ -14,11 +14,10 @@ import AdaptableInput from '../../Components/AdaptableInput';
 import { Box, Flex } from '../../../components/Flex';
 import { SingleSelect } from '../../../components/NewSelect';
 import { RangeBarRangesSummaryPreview } from './StyledColumnWizardStyleSection/Components/RangeBarRangesSummaryPreview';
-import { StyledColumnRangeBarPreviewCard } from './StyledColumnWizardStyleSection/Components/StyledColumnRangeBarPreview';
 import { Card } from '../../../components/Card';
 import { renderSummaryStringTags } from '../../Wizard/SummaryColorTag';
-import { formatBarChartCellTextLayoutSummary, getActiveBarChartCellTextTokens, hasBarChartCellTextConfigured, patchBarChartCellTextPlacement, resolveBarChartCellTextLayout, toggleBarChartCellTextToken, } from '../../../Utilities/Helpers/barChartCellText';
-import { BarChartCellTextLayoutEditor } from './StyledColumnWizardStyleSection/Components/BarChartCellTextLayoutEditor';
+import { formatBarStyleCellTextLayoutSummary, getActiveBarStyleCellTextTokens, hasBarStyleCellTextConfigured, patchBarStyleCellTextPlacement, resolveBarStyleCellTextLayout, toggleBarStyleCellTextToken, } from '../../../Utilities/Helpers/StyledColumns/BarStylesHelper';
+import { BarStyleCellTextLayoutEditor } from './StyledColumnWizardStyleSection/Components/BarStyleCellTextLayoutEditor';
 const RANGE_STYLE_FORM_SIZES = ['200px', '1fr'];
 const BOUND_MODE_LABELS = {
     Number: 'Fixed Number',
@@ -106,14 +105,10 @@ const RangeBarBoundInput = ({ api, value, optional, fallbackNumber, excludeColum
         'twa:[&_.ab-Input]:w-full twa:[&_.ab-Input]:rounded-l-none!',
         'twa:[&_[data-slot=input-group]]:w-full! twa:[&_[data-slot=input-group]]:rounded-l-none!',
     ].join(' ');
-    return (_jsxs(InputGroup, { Component: Flex, className: "twa:items-stretch twa:max-w-[22rem]", children: [_jsx(SingleSelect, { className: `twa:w-[150px] twa:max-w-none twa:shrink-0 twa:box-border${hasEditor ? ' twa:rounded-r-none!' : ''}`, disabled: disabled, value: mode, items: items, onValueChange: (v) => handleModeChange(v) }), hasEditor && _jsx(Box, { className: editorWrapperClassName, children: editor })] }));
+    return (_jsxs(InputGroup, { Component: Flex, className: "twa:items-stretch twa:max-w-[22rem]", children: [_jsx(SingleSelect, { className: `twa:w-[150px] twa:max-w-none twa:shrink-0 twa:box-border${hasEditor ? 'twa:rounded-r-none!' : ''}`, disabled: disabled, value: mode, items: items, onValueChange: (v) => handleModeChange(v) }), hasEditor && _jsx(Box, { className: editorWrapperClassName, children: editor })] }));
 };
-const formatRangeBarCellTextSummary = (cellText) => cellText
-    ?.map((t) => (t === 'CellValue' ? 'Cell Value' : 'Percent Value'))
-    .join(' + ') ?? '';
-const formatRangeBarToolTipSummary = (toolTipText) => toolTipText
-    ?.map((t) => (t === 'CellValue' ? 'Cell Value' : 'Percent Value'))
-    .join(' + ') ?? '';
+const formatRangeBarCellTextSummary = (cellText) => cellText?.map((t) => (t === 'CellValue' ? 'Cell Value' : 'Percent Value')).join(' + ') ?? '';
+const formatRangeBarToolTipSummary = (toolTipText) => toolTipText?.map((t) => (t === 'CellValue' ? 'Cell Value' : 'Percent Value')).join(' + ') ?? '';
 export const getStyledColumnRangeBarRangeViewValues = (data) => {
     const range = data.RangeBarStyle;
     if (!range) {
@@ -177,10 +172,10 @@ const buildStyledColumnRangeBarDisplaySummaryStrings = (range, options) => {
     if (range.BackColor) {
         items.push(`Back Colour: ${range.BackColor}`);
     }
-    if (hasBarChartCellTextConfigured(range.CellTextProperties)) {
-        const tokens = getActiveBarChartCellTextTokens(range.CellTextProperties);
+    if (hasBarStyleCellTextConfigured(range.CellTextProperties)) {
+        const tokens = getActiveBarStyleCellTextTokens(range.CellTextProperties);
         items.push(`Cell Text: ${formatRangeBarCellTextSummary(tokens)}`);
-        const layoutSummary = formatBarChartCellTextLayoutSummary(resolveBarChartCellTextLayout(range.CellTextProperties));
+        const layoutSummary = formatBarStyleCellTextLayoutSummary(resolveBarStyleCellTextLayout(range.CellTextProperties));
         if (layoutSummary) {
             items.push(`Placement: ${layoutSummary}`);
         }
@@ -370,7 +365,9 @@ export const StyledColumnWizardRangeBarSection = (props) => {
     const resolvedBoundValues = {
         'Col-Min': minMaxRangeValues?.min,
         'Col-Max': minMaxRangeValues?.max,
-        'Col-Avg': column ? api.styledColumnApi.internalApi.getAvgValueForNumericColumn(column) : undefined,
+        'Col-Avg': column
+            ? api.styledColumnApi.internalApi.getAvgValueForNumericColumn(column)
+            : undefined,
         'Col-Median': column
             ? api.styledColumnApi.internalApi.getMedianValueForNumericColumn(column)
             : undefined,
@@ -437,11 +434,11 @@ export const StyledColumnWizardRangeBarSection = (props) => {
     };
     // -- Cell text -------------------------------------------------------------
     const toggleCellText = (token, show) => {
-        update(toggleBarChartCellTextToken(range.CellTextProperties, token, show));
+        update(toggleBarStyleCellTextToken(range.CellTextProperties, token, show));
     };
     const onCellTextPlacementChange = (token, patch) => {
         update({
-            CellTextProperties: patchBarChartCellTextPlacement(range.CellTextProperties, token, patch),
+            CellTextProperties: patchBarStyleCellTextPlacement(range.CellTextProperties, token, patch),
         });
     };
     const toggleToolTipText = (token, checked) => {
@@ -490,5 +487,5 @@ export const StyledColumnWizardRangeBarSection = (props) => {
                                                         { value: 'Clamp', label: 'Clamp to edge' },
                                                         { value: 'Overflow', label: 'Show outside' },
                                                         { value: 'Hide', label: 'Hide marker' },
-                                                    ] }) }) }), outOfRangeMode === 'Clamp' && (_jsx(FormRow, { label: `Out-of-range ${api.internalApi.getCorrectEnglishVariant('Colour')}:`, children: _jsx(OptionalColorPicker, { disabled: disabled, api: api, value: range.OutOfRange?.Color, defaultColor: "crimson", onChange: (c) => updateOutOfRangeProperties({ Color: c }) }) }))] }) })] }), _jsxs(Card, { shadow: false, children: [_jsxs(Card.Title, { children: [_jsx(Box, { className: "twa:font-medium", children: "Text & Tooltip" }), _jsx(Box, { className: "twa:text-xs twa:opacity-70 twa:font-normal twa:max-w-[520px]", children: "Optional cell-text overlay and AG Grid tooltip content." })] }), _jsx(Card.Body, { children: _jsxs(FormLayout, { sizes: [...RANGE_STYLE_FORM_SIZES], children: [_jsx(FormRow, { label: "Cell Text Layout:", children: _jsx(BarChartCellTextLayoutEditor, { disabled: disabled, cellTextProperties: range.CellTextProperties, onToggle: toggleCellText, onPlacementChange: onCellTextPlacementChange }) }), _jsxs(FormRow, { label: "Tooltip Display:", children: [_jsx(CheckBox, { disabled: disabled, checked: range.ToolTipText?.includes('CellValue'), onChange: (checked) => toggleToolTipText('CellValue', checked), children: "Cell Value" }), ' ', _jsx(CheckBox, { disabled: disabled, className: "twa:ml-3", checked: range.ToolTipText?.includes('PercentageValue'), onChange: (checked) => toggleToolTipText('PercentageValue', checked), children: "Percent Value" })] })] }) })] }), _jsx(StyledColumnRangeBarPreviewCard, { data: data })] }))] }));
+                                                    ] }) }) }), outOfRangeMode === 'Clamp' && (_jsx(FormRow, { label: `Out-of-range ${api.internalApi.getCorrectEnglishVariant('Colour')}:`, children: _jsx(OptionalColorPicker, { disabled: disabled, api: api, value: range.OutOfRange?.Color, defaultColor: "crimson", onChange: (c) => updateOutOfRangeProperties({ Color: c }) }) }))] }) })] }), _jsxs(Card, { shadow: false, children: [_jsxs(Card.Title, { children: [_jsx(Box, { className: "twa:font-medium", children: "Text & Tooltip" }), _jsx(Box, { className: "twa:text-xs twa:opacity-70 twa:font-normal twa:max-w-[520px]", children: "Optional cell-text overlay and AG Grid tooltip content." })] }), _jsx(Card.Body, { children: _jsxs(FormLayout, { sizes: [...RANGE_STYLE_FORM_SIZES], children: [_jsx(BarStyleCellTextLayoutEditor, { disabled: disabled, cellTextProperties: range.CellTextProperties, onToggle: toggleCellText, onPlacementChange: onCellTextPlacementChange }), _jsxs(FormRow, { label: "Tooltip Display:", children: [_jsx(CheckBox, { disabled: disabled, checked: range.ToolTipText?.includes('CellValue'), onChange: (checked) => toggleToolTipText('CellValue', checked), children: "Cell Value" }), ' ', _jsx(CheckBox, { disabled: disabled, className: "twa:ml-3", checked: range.ToolTipText?.includes('PercentageValue'), onChange: (checked) => toggleToolTipText('PercentageValue', checked), children: "Percent Value" })] })] }) })] })] }))] }));
 };

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

@@ -11,7 +11,7 @@ import Input from '../../../components/Input';
 import { getCellBoxStyleSummaryItems, StyledColumnCellStyleEditor, } from './StyledColumnSliceStyleEditors';
 import { Card } from '../../../components/Card';
 import { renderSummaryStringTags } from '../../Wizard/SummaryColorTag';
-import { DEFAULT_RATING_GAP, DEFAULT_RATING_ICON, DEFAULT_RATING_MAX, DEFAULT_RATING_SIZE, StyledColumnRatingPreviewCard, } from './StyledColumnWizardStyleSection/Components/StyledColumnRatingPreview';
+import { DEFAULT_RATING_GAP, DEFAULT_RATING_ICON, DEFAULT_RATING_MAX, DEFAULT_RATING_SIZE, } from './StyledColumnWizardStyleSection/Components/StyledColumnRatingPreview';
 const STYLE_FORM_SIZES = ['200px', '1fr'];
 const ICON_CHOICES = [
     { value: 'Star', label: 'Star' },
@@ -188,5 +188,5 @@ export const StyledColumnWizardRatingSection = (props) => {
                                     delete cleaned.Cell;
                                     props.onChange({ ...data, RatingStyle: cleaned });
                                 }
-                            } }) })] }), _jsx(StyledColumnRatingPreviewCard, { data: data })] }));
+                            } }) })] })] }));
 };

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

@@ -6,8 +6,8 @@ import { useOnePageAdaptableWizardContext } from '../../Wizard/OnePageAdaptableW
 import { Box, Flex } from '../../../components/Flex';
 import { CheckBox } from '../../../components/CheckBox';
 import { cn } from '../../../lib/utils';
-import { getStyledColumnRowKindDisabledReason, isStyledColumnRowKindSupported, sanitizeStyledColumnRowScope, STYLED_COLUMN_ROW_KIND_EXCLUDE_KEY, STYLED_COLUMN_ROW_KINDS, } from '../../../Utilities/Helpers/styledColumnRowKindSupport';
-import { isUnsupportedColumnDataTypeForIconStyle } from '../../../Utilities/Helpers/iconStyledColumnColumnSupport';
+import { getStyledColumnRowKindDisabledReason, isStyledColumnRowKindSupported, sanitizeStyledColumnRowScope, STYLED_COLUMN_ROW_KIND_EXCLUDE_KEY, STYLED_COLUMN_ROW_KINDS, } from '../../../Utilities/Helpers/StyledColumns/StyledColumnHelper';
+import { isUnsupportedColumnDataTypeForIconStyle } from '../../../Utilities/Helpers/StyledColumns/IconStyleHelper';
 import { CollapsibleWizardCard, CollapsibleWizardValueSummary, getWizardAccordionSectionClassName, renderCompactColumnTags, useWizardCardAccordion, } from '../../Wizard/CollapsibleWizardCard';
 // ---------------------------------------------------------------------------
 // Row-kind helpers

package/src/View/StyledColumn/Wizard/StyledColumnWizardStyleSection/Components/{BarChartCellTextLayoutEditor.d.ts → BarStyleCellTextLayoutEditor.d.ts}

@@ -1,9 +1,9 @@
 import * as React from 'react';
-import { BarChartCellTextPlacement, BarChartCellTextProperties } from '../../../../../AdaptableState/StyledColumns/Common/BarChartCellText';
+import { BarStyleCellTextPlacement, BarStyleCellTextProperties } from '../../../../../AdaptableState/StyledColumns/Common/BarStyleProperties';
 import { CellTextOption } from '../../../../../AdaptableState/StyledColumns/Common/CellTextOptions';
-export declare const BarChartCellTextLayoutEditor: React.FunctionComponent<{
+export declare const BarStyleCellTextLayoutEditor: React.FunctionComponent<{
     disabled?: boolean;
-    cellTextProperties?: BarChartCellTextProperties;
+    cellTextProperties?: BarStyleCellTextProperties;
     onToggle: (token: CellTextOption, show: boolean) => void;
-    onPlacementChange: (token: CellTextOption, patch: Partial<BarChartCellTextPlacement>) => void;
+    onPlacementChange: (token: CellTextOption, patch: Partial<BarStyleCellTextPlacement>) => void;
 }>;

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

@@ -0,0 +1,33 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { resolveBarStyleCellTextLayout } from '../../../../../Utilities/Helpers/StyledColumns/BarStylesHelper';
+import { CheckBox } from '../../../../../components/CheckBox';
+import { Box, Flex } from '../../../../../components/Flex';
+import { FormRow } from '../../../../../components/FormLayout';
+import { SingleSelect } from '../../../../../components/NewSelect';
+const HORIZONTAL_CHOICES = [
+    { value: 'Left', label: 'Left' },
+    { value: 'Center', label: 'Center' },
+    { value: 'Right', label: 'Right' },
+];
+const VERTICAL_CHOICES = [
+    { value: 'Above', label: 'Above Bar' },
+    { value: 'Below', label: 'Below Bar' },
+    { value: 'Merged', label: 'Merged' },
+];
+const ROWS = [
+    { token: 'CellValue', label: 'Cell Value:', key: 'CellValue' },
+    { token: 'PercentageValue', label: 'Percent Value:', key: 'PercentValue' },
+];
+export const BarStyleCellTextLayoutEditor = ({ disabled, cellTextProperties, onToggle, onPlacementChange }) => {
+    const layout = resolveBarStyleCellTextLayout(cellTextProperties);
+    return (_jsx(_Fragment, { children: ROWS.map(({ token, label, key }) => {
+            const placement = layout[key];
+            const isShown = Boolean(placement);
+            const rowDisabled = disabled || !isShown;
+            return (_jsx(FormRow, { label: label, children: _jsxs(Flex, { alignItems: "center", className: "twa:gap-3", children: [_jsx(CheckBox, { disabled: disabled, checked: isShown, onChange: (checked) => onToggle(token, checked) }), _jsx(Box, { className: "twa:w-[140px]", children: _jsx(SingleSelect, { className: "twa:w-full", disabled: rowDisabled, value: placement?.Horizontal ?? 'Left', onValueChange: (v) => onPlacementChange(token, {
+                                    Horizontal: v,
+                                }), items: HORIZONTAL_CHOICES }) }), _jsx(Box, { className: "twa:w-[140px]", children: _jsx(SingleSelect, { className: "twa:w-full", disabled: rowDisabled, value: placement?.Vertical ?? 'Below', onValueChange: (v) => onPlacementChange(token, {
+                                    Vertical: v,
+                                }), items: VERTICAL_CHOICES }) })] }) }, token));
+        }) }));
+};

package/src/View/StyledColumn/Wizard/StyledColumnWizardStyleSection/Components/{BarChartCellTextPreview.d.ts → BarStyleCellTextPreview.d.ts}

@@ -1,6 +1,6 @@
 import * as React from 'react';
-import { BarChartCellTextProperties } from '../../../../../AdaptableState/StyledColumns/Common/BarChartCellText';
-import { BarChartCellTextLabels } from '../../../../../Utilities/Helpers/barChartCellText';
+import { BarStyleCellTextProperties } from '../../../../../AdaptableState/StyledColumns/Common/BarStyleProperties';
+import { BarStyleCellTextLabels } from '../../../../../Utilities/Helpers/StyledColumns/BarStylesHelper';
 /**
  * Preview of the per-value cell-text layout. Renders three potential bands:
  * - `Above` slots (above the bar)
@@ -11,13 +11,13 @@ import { BarChartCellTextLabels } from '../../../../../Utilities/Helpers/barChar
  * stable. When `vertical` is provided, only the band matching that value is
  * rendered (used by the preview cards to position bands around the bar).
  */
-export declare const BarChartCellTextPreview: React.FunctionComponent<{
+export declare const BarStyleCellTextPreview: React.FunctionComponent<{
     className?: string;
     style?: React.CSSProperties;
-    cellTextProperties?: BarChartCellTextProperties;
-    labels: BarChartCellTextLabels;
+    cellTextProperties?: BarStyleCellTextProperties;
+    labels: BarStyleCellTextLabels;
     mergedOverlayClassName?: string;
     /** Render only the band matching this vertical position. */
     vertical?: 'Above' | 'Below' | 'Merged';
 }>;
-export declare const shouldShowBarChartCellTextOutsideBar: (cellTextProperties: BarChartCellTextProperties | undefined, hasCellText: boolean) => boolean;
+export declare const shouldShowBarStyleCellTextOutsideBar: (cellTextProperties: BarStyleCellTextProperties | undefined, hasCellText: boolean) => boolean;

package/src/View/StyledColumn/Wizard/StyledColumnWizardStyleSection/Components/{BarChartCellTextPreview.js → BarStyleCellTextPreview.js}

@@ -1,5 +1,5 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { getBarChartCellTextSlotPresence, hasBarChartCellTextConfigured, resolveBarChartCellTextSlots, } from '../../../../../Utilities/Helpers/barChartCellText';
+import { getBarStyleCellTextSlotPresence, hasBarStyleCellTextConfigured, resolveBarStyleCellTextSlots, } from '../../../../../Utilities/Helpers/StyledColumns/BarStylesHelper';
 import { Box, Flex } from '../../../../../components/Flex';
 const HORIZONTAL_ORDER = ['Left', 'Center', 'Right'];
 const HORIZONTAL_JUSTIFY = {
@@ -33,11 +33,11 @@ const CellTextRow = ({ className, style, slots }) => (_jsx(Flex, { className: cl
  * stable. When `vertical` is provided, only the band matching that value is
  * rendered (used by the preview cards to position bands around the bar).
  */
-export const BarChartCellTextPreview = ({ className, style, cellTextProperties, labels, mergedOverlayClassName, vertical }) => {
+export const BarStyleCellTextPreview = ({ className, style, cellTextProperties, labels, mergedOverlayClassName, vertical }) => {
     if (!labels.cellValue && !labels.percentage) {
         return null;
     }
-    const slots = resolveBarChartCellTextSlots(cellTextProperties, labels);
+    const slots = resolveBarStyleCellTextSlots(cellTextProperties, labels);
     if (!slots.length) {
         return null;
     }
@@ -48,10 +48,10 @@ export const BarChartCellTextPreview = ({ className, style, cellTextProperties,
     const usedClassName = vertical === 'Merged' ? mergedOverlayClassName ?? className : className;
     return (_jsx(CellTextRow, { className: usedClassName, style: style, slots: bandSlots.map((s) => ({ horizontal: s.horizontal, text: s.text })) }));
 };
-export const shouldShowBarChartCellTextOutsideBar = (cellTextProperties, hasCellText) => {
-    if (!hasCellText || !hasBarChartCellTextConfigured(cellTextProperties)) {
+export const shouldShowBarStyleCellTextOutsideBar = (cellTextProperties, hasCellText) => {
+    if (!hasCellText || !hasBarStyleCellTextConfigured(cellTextProperties)) {
         return false;
     }
-    const { hasAbove, hasBelow } = getBarChartCellTextSlotPresence(cellTextProperties);
+    const { hasAbove, hasBelow } = getBarStyleCellTextSlotPresence(cellTextProperties);
     return hasAbove || hasBelow;
 };

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

@@ -1,11 +1,11 @@
 import * as React from 'react';
 import { CellColorRange, ColumnComparison, NumericStyledColumn } from '../../../../../AdaptableState/StyledColumns/Common/NumericStyledColumn';
-import { GradientStyle, GradientZeroCentredColors } from '../../../../../AdaptableState/StyledColumns/GradientStyle';
+import { GradientStyle, ZeroCentredColors } from '../../../../../AdaptableState/StyledColumns/GradientStyle';
 import { AdaptableApi } from '../../../../../types';
 export declare function gradientRangeStripCss(color: string, reverseGradient: boolean, minAlpha: number, maxAlpha: number): string;
 export interface GradientRangesSummaryPreviewProps {
     ranges?: CellColorRange[];
-    zeroCentred?: GradientZeroCentredColors;
+    zeroCentred?: ZeroCentredColors;
     rangeValueType: NumericStyledColumn['RangeValueType'];
     gradientStyle?: Pick<GradientStyle, 'MinAlpha' | 'MaxAlpha'>;
 }

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

@@ -3,7 +3,7 @@ import tinycolor from 'tinycolor2';
 import { Box, Flex } from '../../../../../components/Flex';
 import { Tag } from '../../../../../components/Tag';
 import { getVariableColor } from '../../../../../Utilities/Helpers/StyleHelper';
-import { DEFAULT_GRADIENT_MAX_ALPHA, DEFAULT_GRADIENT_MIN_ALPHA, isDivergingZeroCellRanges, } from '../../../../../Utilities/Helpers/StyledColumnGradientHelper';
+import { DEFAULT_GRADIENT_MAX_ALPHA, DEFAULT_GRADIENT_MIN_ALPHA, isDivergingZeroCellRanges, } from '../../../../../Utilities/Helpers/StyledColumns/GradientStyleHelper';
 function clamp01(n) {
     if (Number.isNaN(n)) {
         return 0;
@@ -56,9 +56,7 @@ export const GradientRangesSummaryPreview = (props) => {
 export const GradientColumnComparisonSummaryPreview = (props) => {
     const minA = props.gradientStyle?.MinAlpha ?? DEFAULT_GRADIENT_MIN_ALPHA;
     const maxA = props.gradientStyle?.MaxAlpha ?? DEFAULT_GRADIENT_MAX_ALPHA;
-    const fmt = (v) => isNaN(Number(v))
-        ? `[${props.api.columnApi.getFriendlyNameForColumnId(String(v))}]`
-        : v;
+    const fmt = (v) => isNaN(Number(v)) ? `[${props.api.columnApi.getFriendlyNameForColumnId(String(v))}]` : v;
     return (_jsxs(Flex, { flexDirection: "column", className: "twa:gap-2", children: [_jsxs(Tag, { children: ["Min: ", fmt(props.columnComparison.MinValue), " \u2014 Max: ", fmt(props.columnComparison.MaxValue)] }), _jsx(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,17 +1,16 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx } from "react/jsx-runtime";
 import { DEFAULT_INTEGER_DISPLAY_VALUE, DEFAULT_STRING_DISPLAY_VALUE, } from '../../../../../Utilities/Constants/GeneralConstants';
 import { convertAdaptableStyleToCSS } from '../../../../../Utilities/Helpers/StyleHelper';
 import { useAdaptable } from '../../../../AdaptableContext';
 import { Badge } from '../../../../Components/Badge';
 import { Box } from '../../../../../components/Flex';
-import { Card } from '../../../../../components/Card';
 import { Tag } from '../../../../../components/Tag';
 const OVERFLOW_CLASS = {
     Truncate: 'ab-Badge__wrapper--truncate',
     Wrap: 'ab-Badge__wrapper--wrap',
     Scroll: 'ab-Badge__wrapper--scroll',
 };
-const PREVIEW_CELL_CLASS = 'ab-BadgePreviewCell twa:min-w-[140px] twa:min-h-[32px] twa:px-2 twa:py-1 twa:rounded-standard twa:border twa:border-[color-mix(in_srgb,var(--ab-color-foreground)_15%,transparent)]';
+const 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':
@@ -42,7 +41,9 @@ export const StyledColumnBadgePreview = ({ data }) => {
     const cellStyle = badgeStyle.Cell ? 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,
@@ -60,4 +61,3 @@ export const StyledColumnBadgePreview = ({ data }) => {
                 return (_jsx(Badge, { icon: iconProps?.Icon, pillStyle: badge.PillStyle, iconPosition: iconProps?.Position, shape: badge.Shape, density: badgeStyle.Density ?? 'Normal', iconGap: iconProps?.Gap, children: badgeValue }, index));
             }) }) }));
 };
-export const StyledColumnBadgePreviewCard = ({ data }) => (_jsxs(Card, { shadow: false, children: [_jsx(Card.Title, { children: _jsx(Box, { className: "twa:font-medium", children: "Preview" }) }), _jsx(Card.Body, { className: "twa:p-1", children: _jsx(StyledColumnBadgePreview, { data: data }) })] }));

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

@@ -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,11 +1,10 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { convertAdaptableStyleToCSS } from '../../../../../Utilities/Helpers/StyleHelper';
-import { buildBarChartCellTextLabels, getBarChartCellTextSlotPresence, hasBarChartCellTextConfigured, } from '../../../../../Utilities/Helpers/barChartCellText';
+import { buildBarStyleCellTextLabels, getBarStyleCellTextSlotPresence, hasBarStyleCellTextConfigured, } from '../../../../../Utilities/Helpers/StyledColumns/BarStylesHelper';
 import { Box, Flex } from '../../../../../components/Flex';
-import { Card } from '../../../../../components/Card';
 import { Tag } from '../../../../../components/Tag';
 import { StyledColumnBulletChartListPreview } from './StyledColumnChartListPreviews';
-import { BarChartCellTextPreview } from './BarChartCellTextPreview';
+import { BarStyleCellTextPreview } from './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 ?? [];
@@ -28,10 +27,10 @@ const getBulletPreviewSample = (bullet) => {
 const BulletChartPreviewContent = ({ bullet, }) => {
     const { sampleValue, valueFraction } = getBulletPreviewSample(bullet);
     const cellTextProperties = bullet.CellTextProperties;
-    const labels = buildBarChartCellTextLabels(cellTextProperties, Number.isInteger(sampleValue) ? String(sampleValue) : sampleValue.toFixed(1), `${(valueFraction * 100).toFixed(0)}%`);
-    const hasCellText = hasBarChartCellTextConfigured(cellTextProperties) &&
+    const labels = buildBarStyleCellTextLabels(cellTextProperties, Number.isInteger(sampleValue) ? String(sampleValue) : sampleValue.toFixed(1), `${(valueFraction * 100).toFixed(0)}%`);
+    const hasCellText = hasBarStyleCellTextConfigured(cellTextProperties) &&
         Boolean(labels.cellValue || labels.percentage);
-    const presence = getBarChartCellTextSlotPresence(cellTextProperties);
+    const presence = getBarStyleCellTextSlotPresence(cellTextProperties);
     const fontStyle = bullet.Font ? 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';
@@ -39,9 +38,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 (_jsxs(Box, { className: "ab-BulletChart__wrapper twa:relative twa:inline-flex", children: [chartEl, _jsx(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 (_jsxs(Box, { className: "ab-BulletChart__wrapper twa:relative twa:inline-flex", children: [chartEl, _jsx(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 (_jsxs(Flex, { className: "ab-BulletChart__wrapper twa:relative", flexDirection: "column", alignItems: isVertical ? 'center' : 'stretch', style: { justifyContent: 'center', gap: hasCellText ? 2 : 0 }, children: [hasCellText && presence.hasAbove && (_jsx(BarChartCellTextPreview, { className: cellTextClassName, style: fontStyle, cellTextProperties: cellTextProperties, labels: labels, vertical: "Above" })), _jsxs(Box, { className: "twa:relative twa:w-full", style: { display: 'inline-flex' }, children: [chartEl, hasCellText && presence.hasMerged && (_jsx(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 && (_jsx(BarChartCellTextPreview, { className: cellTextClassName, style: fontStyle, cellTextProperties: cellTextProperties, labels: labels, vertical: "Below" }))] }));
+    return (_jsxs(Flex, { className: "ab-BulletChart__wrapper twa:relative", flexDirection: "column", alignItems: isVertical ? 'center' : 'stretch', style: { justifyContent: 'center', gap: hasCellText ? 2 : 0 }, children: [hasCellText && presence.hasAbove && (_jsx(BarStyleCellTextPreview, { className: cellTextClassName, style: fontStyle, cellTextProperties: cellTextProperties, labels: labels, vertical: "Above" })), _jsxs(Box, { className: "twa:relative twa:w-full", style: { display: 'inline-flex' }, children: [chartEl, hasCellText && presence.hasMerged && (_jsx(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 && (_jsx(BarStyleCellTextPreview, { className: cellTextClassName, style: fontStyle, cellTextProperties: cellTextProperties, labels: labels, vertical: "Below" }))] }));
 };
 export const StyledColumnBulletPreview = ({ data }) => {
     const bullet = data.BulletChartStyle;
@@ -50,5 +49,4 @@ export const StyledColumnBulletPreview = ({ data }) => {
     }
     return (_jsx(Box, { className: PREVIEW_CELL_CLASS, children: _jsx(BulletChartPreviewContent, { bullet: bullet }) }));
 };
-export const StyledColumnBulletPreviewCard = ({ data }) => (_jsxs(Card, { shadow: false, children: [_jsx(Card.Title, { children: _jsx(Box, { className: "twa:font-medium", children: "Preview" }) }), _jsx(Card.Body, { className: "twa:p-1", children: _jsx(StyledColumnBulletPreview, { data: data }) })] }));
 export const hasBulletChartRangesConfigured = (bullet) => Boolean(bullet?.CellRanges?.length);

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

@@ -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,9 +1,8 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx } from "react/jsx-runtime";
 import { Box, Flex } from '../../../../../components/Flex';
-import { Card } from '../../../../../components/Card';
 import { Tag } from '../../../../../components/Tag';
 import { useAdaptable } from '../../../../AdaptableContext';
-import { getGradientPreviewCellStyle, getGradientPreviewSampleValues, hasGradientRangesConfigured, } from '../../../../../Utilities/Helpers/StyledColumnGradientHelper';
+import { getGradientPreviewCellStyle, getGradientPreviewSampleValues, hasGradientRangesConfigured, } from '../../../../../Utilities/Helpers/StyledColumns/GradientStyleHelper';
 const formatPreviewValue = (value) => {
     if (Number.isInteger(value)) {
         return value.toLocaleString();
@@ -27,4 +26,3 @@ export const StyledColumnGradientPreview = ({ data, api: apiProp }) => {
     const rowNode = api.gridApi?.getRowNodeForIndex(0) ?? null;
     return (_jsx(Flex, { alignItems: "stretch", className: "twa:flex-wrap twa:gap-2", children: sampleValues.map((value) => (_jsx(Box, { className: "ab-GradientPreviewCell twa:px-2 twa:py-1 twa:min-w-[56px] twa:text-2 twa:text-center twa:rounded-standard twa:border twa:border-[color-mix(in_srgb,var(--ab-color-foreground)_15%,transparent)]", style: getGradientPreviewCellStyle(value, data, api, rowNode), children: formatPreviewValue(value) }, value))) }));
 };
-export const StyledColumnGradientPreviewCard = ({ data }) => (_jsxs(Card, { shadow: false, children: [_jsx(Card.Title, { children: _jsx(Box, { className: "twa:font-medium", children: "Preview" }) }), _jsx(Card.Body, { className: "twa:p-1", children: _jsx(StyledColumnGradientPreview, { data: data }) })] }));

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

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