@adaptabletools/adaptable-cjs 23.0.4 → 23.0.5-canary.0

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

@@ -10,15 +10,6 @@ const Toggle_1 = require("../../../components/Toggle");
 const SummaryColorTag_1 = require("../../Wizard/SummaryColorTag");
 const LABEL_COLUMN = { name: 'label', style: { textAlign: 'start' } };
 const CHILD_COLUMN = { name: 'children' };
-/**
- * Compact editor for the cut-down {@link BadgePillStyle}.
- *
- * Intentionally narrower than `StyleComponent`:
- * - **No** `BorderRadius` — corner radius is owned by `Shape`.
- * - **No** `Alignment` — badge-row alignment is column-level (`BadgeStyle.Font`).
- * - **No** `ClassName` — pill `ClassName` had no effect at runtime; gone.
- * - **No** `FontSize` — pills inherit cell font sizing.
- */
 const BadgePillStyleEditor = (props) => {
     const pill = props.value ?? {};
     const { disabled } = props;
@@ -45,7 +36,6 @@ const BadgePillStyleEditor = (props) => {
     return ((0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:mt-2 twa:rounded-standard twa:border twa:border-border twa:overflow-hidden twa:shadow-sm", children: (0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:p-3", children: form }) }));
 };
 exports.BadgePillStyleEditor = BadgePillStyleEditor;
-/** Descriptive pill properties for summary panels (`Label: value` strings). */
 const getBadgePillStyleSummaryItems = (pill) => {
     if (!pill) {
         return [];
@@ -72,7 +62,6 @@ const getBadgePillStyleSummaryItems = (pill) => {
     return items;
 };
 exports.getBadgePillStyleSummaryItems = getBadgePillStyleSummaryItems;
-/** Compact summary tags for a {@link BadgePillStyle}; used by wizard summaries. */
 const renderBadgePillStyleSummaryTags = (pill) => {
     const items = (0, exports.getBadgePillStyleSummaryItems)(pill);
     if (!items.length) {

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

@@ -20,14 +20,6 @@ const FONT_SIZE_ITEMS = [
     { value: 'Large', label: 'Large' },
     { value: 'XLarge', label: 'XLarge' },
 ];
-/**
- * Compact editor for the `Font` slice (`CellFontStyle`).
- *
- * Used by Styled Column wizards (Gradient, Percent Bar, Bullet Chart) that
- * own a `Font?` slot. Any change emits a new `CellFontStyle` (or
- * `undefined` once every key is unset) which the host wizard merges back
- * into its `*Style` patch.
- */
 const disabledClassName = (disabled) => disabled ? 'twa:opacity-50 twa:pointer-events-none' : '';
 const StyledColumnFontStyleEditor = (props) => {
     const font = props.value ?? {};
@@ -35,7 +27,6 @@ const StyledColumnFontStyleEditor = (props) => {
     const disabledClass = disabledClassName(disabled);
     const update = (patch) => {
         const next = { ...font, ...patch };
-        // strip empty/undefined keys
         Object.keys(next).forEach((k) => {
             const v = next[k];
             if (v === undefined || v === null || v === '') {
@@ -60,13 +51,6 @@ const StyledColumnFontStyleEditor = (props) => {
                                         }) }) })] }) }) }), !hideAlignment && ((0, jsx_runtime_1.jsx)(FormLayout_1.FormRow, { label: "Alignment:", children: (0, jsx_runtime_1.jsx)(Flex_1.Box, { className: disabledClass, children: (0, jsx_runtime_1.jsx)(Flex_1.Flex, { alignItems: "center", className: "twa:ml-2 twa:gap-2", children: (0, jsx_runtime_1.jsxs)(Toggle_1.ToggleGroup, { children: [(0, jsx_runtime_1.jsx)(Toggle_1.Toggle, { icon: "align-left", pressed: font.Alignment === 'Left', onPressedChange: (pressed) => onAlignmentChange(pressed ? 'Left' : undefined) }), (0, jsx_runtime_1.jsx)(Toggle_1.Toggle, { icon: "align-center", pressed: font.Alignment === 'Center', onPressedChange: (pressed) => onAlignmentChange(pressed ? 'Center' : undefined) }), (0, jsx_runtime_1.jsx)(Toggle_1.Toggle, { icon: "align-right", pressed: font.Alignment === 'Right', onPressedChange: (pressed) => onAlignmentChange(pressed ? 'Right' : undefined) })] }) }) }) }))] }) }));
 };
 exports.StyledColumnFontStyleEditor = StyledColumnFontStyleEditor;
-/**
- * Compact editor for the `Cell` slice (`CellBoxStyle`).
- *
- * Used by Styled Column wizards (Rating, Sparkline) that own a `Cell?`
- * slot. Any change emits a new `CellBoxStyle` (or `undefined` once every
- * key is unset) which the host wizard merges back into its `*Style` patch.
- */
 const StyledColumnCellStyleEditor = (props) => {
     const cell = props.value ?? {};
     const cellRef = React.useRef(cell);
@@ -90,9 +74,6 @@ const StyledColumnCellStyleEditor = (props) => {
     return ((0, jsx_runtime_1.jsx)(Flex_1.Box, { children: (0, jsx_runtime_1.jsxs)(FormLayout_1.default, { className: "twa:ml-2", sizes: [...FORM_SIZES], children: [(0, jsx_runtime_1.jsx)(FormLayout_1.FormRow, { label: "Background:", children: (0, jsx_runtime_1.jsx)(ColorPicker_1.OptionalColorPicker, { className: "twa:ml-2", disabled: disabled, api: props.api, value: cell.BackColor, defaultColor: "#ffffff", onChange: (c) => update({ BackColor: c }) }) }), (0, jsx_runtime_1.jsx)(FormLayout_1.FormRow, { label: "Border colour:", children: (0, jsx_runtime_1.jsx)(ColorPicker_1.OptionalColorPicker, { className: "twa:ml-2", disabled: disabled, api: props.api, value: cell.BorderColor, defaultColor: "#000000", onChange: (c) => update({ BorderColor: c }) }) }), (0, jsx_runtime_1.jsx)(FormLayout_1.FormRow, { label: "Border radius:", children: (0, jsx_runtime_1.jsxs)(Flex_1.Flex, { alignItems: "center", className: "twa:ml-2 twa:gap-2", children: [(0, jsx_runtime_1.jsx)(NumberInput_1.NumberInput, { disabled: disabled, className: "twa:w-20", value: cell.BorderRadius, min: 0, max: 64, step: 1, onChange: (v) => update({ BorderRadius: v === undefined || isNaN(Number(v)) ? undefined : v }) }), (0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:text-xs twa:opacity-70", children: "px" })] }) })] }) }));
 };
 exports.StyledColumnCellStyleEditor = StyledColumnCellStyleEditor;
-/**
- * Descriptive font properties for summary panels (`Label: value` strings).
- */
 const getCellFontStyleSummaryItems = (font) => {
     if (!font) {
         return [];
@@ -119,9 +100,6 @@ const getCellFontStyleSummaryItems = (font) => {
     return items;
 };
 exports.getCellFontStyleSummaryItems = getCellFontStyleSummaryItems;
-/**
- * Compact summary tags for the Font slice; used by wizard summary panels.
- */
 const renderFontStyleSummaryTags = (font) => {
     const items = (0, exports.getCellFontStyleSummaryItems)(font);
     if (!items.length) {
@@ -130,9 +108,6 @@ const renderFontStyleSummaryTags = (font) => {
     return (0, SummaryColorTag_1.renderSummaryLabelValueTags)(items);
 };
 exports.renderFontStyleSummaryTags = renderFontStyleSummaryTags;
-/**
- * Descriptive cell box properties for summary panels (`Label: value` strings).
- */
 const getCellBoxStyleSummaryItems = (cell) => {
     if (!cell) {
         return [];
@@ -150,9 +125,6 @@ const getCellBoxStyleSummaryItems = (cell) => {
     return items;
 };
 exports.getCellBoxStyleSummaryItems = getCellBoxStyleSummaryItems;
-/**
- * Compact summary tags for the Cell slice; used by wizard summary panels.
- */
 const renderCellStyleSummaryTags = (cell) => {
     const items = (0, exports.getCellBoxStyleSummaryItems)(cell);
     if (!items.length) {

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

@@ -17,7 +17,6 @@ const StyledColumnSliceStyleEditors_1 = require("./StyledColumnSliceStyleEditors
 const Card_1 = require("../../../components/Card");
 const ErrorBox_1 = tslib_1.__importDefault(require("../../../components/ErrorBox"));
 const STYLE_FORM_SIZES = ['200px', '1fr'];
-/** Sentinel for the theme dropdown — persisted options omit `theme` when this is chosen. */
 const SPARKLINE_CUSTOM_COLOURS_THEME = '__custom__';
 const SparklineTypes = {
     LINE: 'line',
@@ -89,9 +88,6 @@ const getStyledColumnSparklineStyleViewValues = (data) => {
     });
 };
 exports.getStyledColumnSparklineStyleViewValues = getStyledColumnSparklineStyleViewValues;
-/**
- * Wizard-step summary for the Sparkline Settings step.
- */
 const renderSparklineSummary = (data) => {
     const sparkline = data.SparklineStyle;
     if (!sparkline?.options) {
@@ -103,11 +99,6 @@ const renderSparklineSummary = (data) => {
     return (0, SummaryColorTag_1.renderSummaryStringTags)(items);
 };
 exports.renderSparklineSummary = renderSparklineSummary;
-/**
- * Validation for the Sparkline Settings wizard step.
- * - Sparkline type must be set (defaulted to `line` so this is mostly a safety net).
- * - When Min and Max overrides are both provided, Min must be strictly less than Max.
- */
 const isValidSparklineSettings = (data) => {
     const opts = data.SparklineStyle?.options;
     if (!opts?.type) {
@@ -121,8 +112,6 @@ const isValidSparklineSettings = (data) => {
 exports.isValidSparklineSettings = isValidSparklineSettings;
 const StyledColumnSparklineSettingsSection = ({ onChange }) => {
     const { data, api } = (0, OnePageAdaptableWizard_1.useOnePageAdaptableWizardContext)();
-    // Compute defaults non-destructively — never mutate persisted state during
-    // render. The chart `type` is required so default it to `line` if absent.
     const persistedOptions = data.SparklineStyle?.options;
     const sparklineOptions = persistedOptions
         ? { ...persistedOptions, type: persistedOptions.type ?? SparklineTypes.LINE }
@@ -260,8 +249,6 @@ const SparklineThemingOptions = ({ options, onChange, }) => {
 };
 const SparklineAxisOptions = ({ options, onChange, }) => {
     const { api } = (0, OnePageAdaptableWizard_1.useOnePageAdaptableWizardContext)();
-    // Non-destructive default for the axis sub-tree so we never mutate the
-    // persisted options object during render.
     const sparklineOptions = {
         ...(options ?? {}),
         axis: {

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

@@ -29,11 +29,6 @@ const StyledColumnIconPreview_1 = require("./StyledColumnWizardStyleSection/Comp
 const StyledColumnBulletPreview_1 = require("./StyledColumnWizardStyleSection/Components/StyledColumnBulletPreview");
 const StyledColumnRangeBarPreview_1 = require("./StyledColumnWizardStyleSection/Components/StyledColumnRangeBarPreview");
 const StyledColumnSparklinePreview_1 = require("./StyledColumnWizardStyleSection/Components/StyledColumnSparklinePreview");
-/**
- * Mirrors the migration default in `VersionUpgrade23.patchStyledColumnName` and
- * the auto-fill logic in `StyledColumnWizardTypeSection` so users opening the
- * wizard immediately see a sensible Name (e.g. `Badge-tradeId`).
- */
 const computeDefaultStyledColumnName = (sc) => {
     let typeKey = '';
     if (sc.GradientStyle)
@@ -57,7 +52,6 @@ const computeDefaultStyledColumnName = (sc) => {
     }
     return `${typeKey}-${sc.ColumnId || 'column'}`;
 };
-/** First wizard step to open when editing an existing Styled Column (column menu, settings list, etc.). */
 const getStyledColumnEditDefaultSectionName = (styledColumn) => {
     if (styledColumn.BadgeStyle) {
         return 'Badges';
@@ -89,10 +83,6 @@ const StyledColumnWizard = (props) => {
     const [styledColumn, setStyledColumn] = (0, react_1.useState)(() => {
         if (data) {
             const cloned = (0, Helper_1.cloneObject)(data);
-            // For *Edit* (existing object loaded from state) we fall back to the
-            // migration default if the Name is somehow missing. For *New* we leave
-            // the Name blank so the user enters one themselves — same pattern as
-            // Format Column / Alert / Custom Sort etc.
             const isNew = props.popupParams?.action === 'New';
             if (!isNew && !cloned.Name) {
                 cloned.Name = computeDefaultStyledColumnName(cloned);
@@ -100,16 +90,11 @@ const StyledColumnWizard = (props) => {
             return cloned;
         }
         const newData = ObjectFactory_1.default.CreateEmptyStyledColumn();
-        // Default new Styled Columns to a Badge — applicable to every data type
-        // and the most-used styled column overall, so it makes a sensible
-        // initial pick in the Type wizard step.
         newData.BadgeStyle = {
             Badges: [ObjectFactory_1.default.CreateDefaultStyledColumnBadge()],
         };
         if (props.popupParams?.column && props.popupParams?.action === 'New') {
             newData.ColumnId = props.popupParams.column.columnId;
-            // For numeric-array columns the natural pick is a Sparkline; flip the
-            // default rather than open a Badge over an array column.
             if (props.popupParams.column.dataType.includes('Array')) {
                 newData.SparklineStyle = {};
                 delete newData.BadgeStyle;
@@ -270,10 +255,6 @@ const StyledColumnWizard = (props) => {
             render: () => ((0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:p-2", children: (0, jsx_runtime_1.jsx)(StyledColumnBadgeSection_1.StyledColumnBadgeStyleSection, { onChange: setStyledColumn }) })),
         });
     }
-    // Persistent live preview shown at the top of the section content on
-    // every step. We render the bare preview (no Card chrome) so it sits
-    // flush above the form. Only one of these can apply at a time — the
-    // styled column owns exactly one of these style buckets.
     let headerPreview = null;
     if (styledColumn.GradientStyle) {
         headerPreview = (0, jsx_runtime_1.jsx)(StyledColumnGradientPreview_1.StyledColumnGradientPreview, { data: styledColumn });
@@ -299,12 +280,7 @@ const StyledColumnWizard = (props) => {
     else if (styledColumn.SparklineStyle) {
         headerPreview = (0, jsx_runtime_1.jsx)(StyledColumnSparklinePreview_1.StyledColumnSparklinePreview, { data: styledColumn });
     }
-    return ((0, jsx_runtime_1.jsx)(OnePageAdaptableWizard_1.OnePageAdaptableWizard, { defaultCurrentSectionName: defaultCurrentSectionName, moduleInfo: props.moduleInfo, 
-        // Display the picked type in the header (e.g. "Gradient Column",
-        // "Percent Bar Column") so the user always knows which kind of
-        // column they're configuring. Falls back to "Styled Column"
-        // before a type has been selected.
-        moduleName: (0, StyledColumnWizardTypeSection_1.getStyledColumnWizardTitle)(styledColumn), data: styledColumn, headerPreview: headerPreview, onFinish: handleFinish, onHide: props.onCloseWizard, sections: [
+    return ((0, jsx_runtime_1.jsx)(OnePageAdaptableWizard_1.OnePageAdaptableWizard, { defaultCurrentSectionName: defaultCurrentSectionName, moduleInfo: props.moduleInfo, moduleName: (0, StyledColumnWizardTypeSection_1.getStyledColumnWizardTitle)(styledColumn), data: styledColumn, headerPreview: headerPreview, onFinish: handleFinish, onHide: props.onCloseWizard, sections: [
             {
                 details: 'Enter a Name and select a Styled Column Type',
                 isValid: (data) => {

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

@@ -133,7 +133,6 @@ const getStyledColumnBulletStyleViewValues = (data) => {
     });
 };
 exports.getStyledColumnBulletStyleViewValues = getStyledColumnBulletStyleViewValues;
-/** Wizard / list-view summary for the Ranges step (qualitative bands). */
 const renderStyledColumnBulletRangesSummary = (data) => {
     const bullet = data.BulletChartStyle;
     if (!bullet) {
@@ -145,7 +144,6 @@ const renderStyledColumnBulletRangesSummary = (data) => {
 exports.renderStyledColumnBulletRangesSummary = renderStyledColumnBulletRangesSummary;
 const StyledColumnBulletRangesView = ({ data }) => (0, exports.renderStyledColumnBulletRangesSummary)(data);
 exports.StyledColumnBulletRangesView = StyledColumnBulletRangesView;
-/** Wizard / list-view summary for the Style step (target, bar, text, font). */
 const renderStyledColumnBulletStyleSummary = (data) => {
     const bullet = data.BulletChartStyle;
     if (!bullet) {
@@ -161,7 +159,6 @@ const renderStyledColumnBulletStyleSummary = (data) => {
     return (0, SummaryColorTag_1.renderSummaryStringTags)(items);
 };
 exports.renderStyledColumnBulletStyleSummary = renderStyledColumnBulletStyleSummary;
-/** Full combined summary (ranges + style); kept for callers that expect one block. */
 const renderStyledColumnBulletSummary = (data) => {
     const bullet = data.BulletChartStyle;
     if (!bullet) {
@@ -170,12 +167,6 @@ const renderStyledColumnBulletSummary = (data) => {
     return ((0, jsx_runtime_1.jsxs)(Flex_1.Flex, { flexDirection: "column", className: "twa:gap-3 twa:items-start", children: [(0, exports.renderStyledColumnBulletRangesSummary)(data), (0, exports.renderStyledColumnBulletStyleSummary)(data)] }));
 };
 exports.renderStyledColumnBulletSummary = renderStyledColumnBulletSummary;
-/**
- * Maps the structured `BulletChartStyle.Target` field to one of the simple
- * modes the wizard exposes. The wizard only configures *one* primary target;
- * if a state-defined Bullet Chart used the array form or a per-target marker
- * override, we leave it alone but treat the first entry as the editable one.
- */
 const getSimpleTargetMode = (target) => {
     if (target == undefined) {
         return 'None';
@@ -227,9 +218,6 @@ const StyledColumnWizardBulletSection = (props) => {
     const scope = { ColumnIds: [data.ColumnId] };
     const bullet = data.BulletChartStyle ?? {};
     const disabled = !data.ColumnId || !column;
-    // -------------------------------------------------------------------------
-    // Updaters
-    // -------------------------------------------------------------------------
     const update = (patch) => {
         props.onChange({
             ...data,
@@ -243,10 +231,6 @@ const StyledColumnWizardBulletSection = (props) => {
         update({ CellRanges: ranges });
     };
     const onUpdateColumnComparison = (columnComparison) => {
-        // Bullet Chart can technically still accept a ColumnComparison through
-        // state, but the Bullet wizard hides the toggle. This callback is wired
-        // up only to satisfy the RangesComponent prop contract; in practice it
-        // will never be invoked because hideColumnComparison is true.
         update({ ColumnComparison: columnComparison });
     };
     const onRangeValueTypeChange = React.useCallback((rangeValueType) => {
@@ -268,14 +252,12 @@ const StyledColumnWizardBulletSection = (props) => {
             },
         });
     }, [data, bullet]);
-    // -- Target ----------------------------------------------------------------
     const currentMode = getSimpleTargetMode(bullet.TargetProperties?.Target);
     const updateTargetProperties = (patch) => {
         const merged = {
             ...bullet.TargetProperties,
             ...patch,
         };
-        // Strip the wrapper when nothing meaningful is left.
         const isEmpty = merged.Target == undefined && merged.Marker == undefined;
         update({ TargetProperties: isEmpty ? undefined : merged });
     };
@@ -294,7 +276,6 @@ const StyledColumnWizardBulletSection = (props) => {
             return;
         }
         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);
             setTarget(candidate?.columnId ?? '');
             return;
@@ -306,7 +287,6 @@ const StyledColumnWizardBulletSection = (props) => {
     const handleColumnTargetChange = (columnId) => {
         setTarget(columnId);
     };
-    // -- Bar -------------------------------------------------------------------
     const updateBar = (patch) => {
         const merged = {
             ...bullet.Bar,
@@ -315,7 +295,6 @@ const StyledColumnWizardBulletSection = (props) => {
         const isEmpty = merged.Color == undefined && merged.Height == undefined;
         update({ Bar: isEmpty ? undefined : merged });
     };
-    // -- Marker ----------------------------------------------------------------
     const updateMarker = (patch) => {
         updateTargetProperties({
             Marker: {
@@ -325,7 +304,6 @@ const StyledColumnWizardBulletSection = (props) => {
             },
         });
     };
-    // -- Cell text -------------------------------------------------------------
     const toggleCellText = (token, show) => {
         update((0, BarStylesHelper_1.toggleBarStyleCellTextToken)(bullet.CellTextProperties, token, show));
     };
@@ -341,15 +319,11 @@ const StyledColumnWizardBulletSection = (props) => {
             : current.filter((t) => t !== token);
         update({ ToolTipText: next });
     };
-    // -------------------------------------------------------------------------
-    // Render
-    // -------------------------------------------------------------------------
     if (!data.ColumnId || !column) {
         return ((0, jsx_runtime_1.jsx)(Flex_1.Box, { children: (0, jsx_runtime_1.jsx)(ErrorBox_1.default, { className: "twa:mt-2", children: !data.ColumnId
                     ? 'You need to select a column before styling.'
                     : `Column "${data.ColumnId}" was not found in the grid.` }) }));
     }
-    // ----- Ranges-only variant (wizard step before Style) ---------------------
     if (variant === 'ranges') {
         return ((0, jsx_runtime_1.jsx)(Flex_1.Box, { children: (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: "Ranges" }), (0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:text-xs twa:opacity-70 twa:font-normal twa:max-w-[520px]", children: "Define qualitative bands for the bullet scale" })] }), (0, jsx_runtime_1.jsx)(Card_1.Card.Body, { children: (0, jsx_runtime_1.jsx)(RangesComponent_1.RangesComponent, { disabled: disabled, minMaxRangeValues: minMaxRangeValues, api: api, scope: scope, ranges: bullet.CellRanges, rangeValueType: bullet.RangeValueType, onRangeValueTypeChange: onRangeValueTypeChange, columnComparison: bullet.ColumnComparison, updateRanges: onUpdateRanges, updateColumnComparison: onUpdateColumnComparison, hideColumnComparison: true }) })] }) }));
     }

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

@@ -47,9 +47,6 @@ const getStyledColumnGradientStyleViewValues = (data) => {
     return buildStyledColumnGradientStyleSummaryStrings(gs, { includeEmptyTooltip: false });
 };
 exports.getStyledColumnGradientStyleViewValues = getStyledColumnGradientStyleViewValues;
-/**
- * Summary of Gradient-only style options (alpha bounds, auto-contrast, tooltip).
- */
 const renderStyledColumnGradientStyleSummary = (data) => {
     const gs = data.GradientStyle;
     if (!gs) {

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

@@ -43,9 +43,6 @@ const previewIcon = (spec) => {
     }
     return (0, jsx_runtime_1.jsx)(AdaptableIconComponent_1.AdaptableIconComponent, { icon: spec });
 };
-// ---------------------------------------------------------------------------
-// Summary helpers (used by the wizard step header + Styled Columns list)
-// ---------------------------------------------------------------------------
 const ICON_MAPPINGS_PREVIEW_CHIP_LIMIT = 6;
 const previewMapping = (mapping, index) => {
     return ((0, jsx_runtime_1.jsxs)(Flex_1.Flex, { alignItems: "center", className: "twa:gap-1 twa:px-1.5 twa:py-0.5 twa:rounded twa:bg-[var(--ab-color-primary)] twa:text-[var(--ab-color-primarytext)]", children: [(0, jsx_runtime_1.jsx)(Flex_1.Box, { children: previewIcon(mapping.Icon) }), (0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:text-xs twa:opacity-90", children: String(mapping.Key) })] }, `${String(mapping.Key)}-${index}`));
@@ -129,7 +126,6 @@ const getStyledColumnIconStyleViewValues = (data) => {
     });
 };
 exports.getStyledColumnIconStyleViewValues = getStyledColumnIconStyleViewValues;
-/** Mappings step summary. */
 const renderStyledColumnIconMappingsSummary = (data) => {
     const ic = data.IconStyle;
     if (!ic) {
@@ -142,7 +138,6 @@ const renderStyledColumnIconMappingsSummary = (data) => {
 exports.renderStyledColumnIconMappingsSummary = renderStyledColumnIconMappingsSummary;
 const StyledColumnIconMappingsView = ({ data }) => (0, exports.renderStyledColumnIconMappingsSummary)(data);
 exports.StyledColumnIconMappingsView = StyledColumnIconMappingsView;
-/** Style step summary (size, text, tooltip, font / cell). */
 const renderStyledColumnIconStyleSummary = (data) => {
     const ic = data.IconStyle;
     if (!ic) {
@@ -158,9 +153,6 @@ const renderStyledColumnIconStyleSummary = (data) => {
     return (0, SummaryColorTag_1.renderSummaryStringTags)(items);
 };
 exports.renderStyledColumnIconStyleSummary = renderStyledColumnIconStyleSummary;
-/**
- * Combined summary for the Styled Columns list row (preview + key facts).
- */
 const renderStyledColumnIconSummary = (data) => {
     const ic = data.IconStyle;
     if (!ic) {
@@ -169,9 +161,6 @@ const renderStyledColumnIconSummary = (data) => {
     return (0, exports.renderStyledColumnIconMappingsSummary)(data);
 };
 exports.renderStyledColumnIconSummary = renderStyledColumnIconSummary;
-// ---------------------------------------------------------------------------
-// Wizard validity check
-// ---------------------------------------------------------------------------
 const isValidIconStyleMappings = (data) => {
     const ic = data.IconStyle;
     if (!ic)
@@ -217,18 +206,9 @@ const StyledColumnWizardIconSection = (props) => {
             props.onChange({ ...data, IconStyle: rest });
         }
     };
-    // -----------------------------------------------------------------------
-    // Preset operations
-    // -----------------------------------------------------------------------
     const applyPreset = (preset) => {
-        // Presets are now resolved at *runtime* — we only need to record the
-        // selection here. Custom `Mappings` continue to act as overrides /
-        // additions on top of the preset.
         update({
             Preset: preset,
-            // Flags / Status presets pair best with case-insensitive matching
-            // because they include both code (`'GBP'`) and name (`'United Kingdom'`)
-            // synonyms; user can flip back to Exact in the wizard if needed.
             MatchMode: preset === 'Flags' || preset === 'Status'
                 ? 'CaseInsensitive'
                 : iconStyle.MatchMode ?? 'Exact',
@@ -237,9 +217,6 @@ const StyledColumnWizardIconSection = (props) => {
     const clearPreset = () => {
         update({ Preset: undefined });
     };
-    // -----------------------------------------------------------------------
-    // Mapping list operations
-    // -----------------------------------------------------------------------
     const setMappings = (next) => {
         update({ Mappings: next });
     };
@@ -262,16 +239,11 @@ const StyledColumnWizardIconSection = (props) => {
         setMappings(next);
         setAutoOpenPickerIndex(next.length - 1);
     };
-    // -----------------------------------------------------------------------
-    // CellText helpers
-    // -----------------------------------------------------------------------
     const updateCellTextProperties = (patch) => {
         const merged = {
             ...iconStyle.CellTextProperties,
             ...patch,
         };
-        // Strip the wrapper when both inner properties are unset, so empty state
-        // serialises cleanly.
         const isEmpty = !merged.CellText?.length && merged.CellTextPosition == undefined;
         update({ CellTextProperties: isEmpty ? undefined : merged });
     };
@@ -282,16 +254,11 @@ const StyledColumnWizardIconSection = (props) => {
             : current.filter((t) => t !== token);
         updateCellTextProperties({ CellText: next });
     };
-    // -----------------------------------------------------------------------
-    // Fallback helpers
-    // -----------------------------------------------------------------------
     const updateFallbackProperties = (patch) => {
         const merged = {
             ...iconStyle.FallbackProperties,
             ...patch,
         };
-        // Strip the wrapper when there's nothing to remember; the renderer
-        // already defaults to `Mode: 'Hide'` when `FallbackProperties` is unset.
         const isEmpty = (merged.Mode == undefined || merged.Mode === 'Hide') && merged.Icon == undefined;
         update({ FallbackProperties: isEmpty ? undefined : merged });
     };
@@ -302,9 +269,6 @@ const StyledColumnWizardIconSection = (props) => {
             : current.filter((t) => t !== token);
         update({ ToolTipText: next });
     };
-    // -----------------------------------------------------------------------
-    // Render
-    // -----------------------------------------------------------------------
     if (props.variant === 'mappings') {
         const presetMappingsPreview = iconStyle.Preset
             ? (0, IconStyleHelper_1.getIconStylePresetMappings)(iconStyle.Preset)
@@ -328,7 +292,6 @@ const StyledColumnWizardIconSection = (props) => {
                                                     { value: 'Icon', label: 'Show Fallback Icon' },
                                                 ] }) }) }), iconStyle.FallbackProperties?.Mode === 'Icon' && ((0, jsx_runtime_1.jsx)(FormLayout_1.FormRow, { label: "Fallback Icon:", children: (0, jsx_runtime_1.jsx)(IconPickerButton, { value: iconStyle.FallbackProperties?.Icon, onChange: (next) => updateFallbackProperties({ Icon: next }) }) }))] }) })] })] }));
     }
-    // ----- Style variant (wizard step title: "Style") ------------------------
     const cellText = iconStyle.CellTextProperties?.CellText ?? [];
     const toolTipText = iconStyle.ToolTipText ?? [];
     const cellTextDisabled = cellText.length === 0;
@@ -352,9 +315,6 @@ const StyledColumnWizardIconSection = (props) => {
                                                 ] }) }) })] }), (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: disabled || cellTextDisabled, value: iconStyle.Font, onChange: onFontChange }) })] })] }), (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: "Tooltip" }), (0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:text-xs twa:opacity-70 twa:font-normal twa:max-w-[520px]", children: "Choose whether and how to display a tooltip" })] }), (0, jsx_runtime_1.jsx)(Card_1.Card.Body, { children: (0, jsx_runtime_1.jsx)(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, { checked: toolTipText.includes('CellValue'), onChange: (checked) => toggleToolTipText('CellValue', checked), children: "Cell Value" }), ' ', (0, jsx_runtime_1.jsx)(CheckBox_1.CheckBox, { className: "twa:ml-3", checked: toolTipText.includes('IconDescription'), onChange: (checked) => toggleToolTipText('IconDescription', checked), children: "Description" })] }) }) })] }), (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: "Cell" }), (0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:text-xs twa:opacity-70 twa:font-normal twa:max-w-[520px]", children: "Optional cell box styling (overrides Format Column properties)" })] }), (0, jsx_runtime_1.jsx)(Card_1.Card.Body, { children: (0, jsx_runtime_1.jsx)(StyledColumnSliceStyleEditors_1.StyledColumnCellStyleEditor, { api: api, disabled: disabled, value: iconStyle.Cell, onChange: onCellChange }) })] })] }));
 };
 exports.StyledColumnWizardIconSection = StyledColumnWizardIconSection;
-// ---------------------------------------------------------------------------
-// Icon picker — click-to-open popover (closes on outside click or system pick)
-// ---------------------------------------------------------------------------
 const ICON_KIND_OPTIONS = [
     { value: 'Emoji', label: 'Emoji' },
     { value: 'System', label: 'Built-in' },

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

@@ -51,20 +51,6 @@ const summarizeBound = (bound) => {
     }
     return bound;
 };
-/**
- * A single joined bound control: a type selector (Fixed Number / Column /
- * Column Min / Max / Average / Median, plus `None` for the optional Reference)
- * joined inline with a contextual editor. Mirrors the Column Comparison bound
- * input so the two read as one block: the select hard-codes `rounded-input`, so
- * the touching corners are flattened directly (important, to beat it) and the
- * shared border overlapped via `-ml-px`.
- *
- *  - Fixed Number  → editable number input
- *  - Column        → numeric column selector (excluding the styled column)
- *  - Col-* (aggregate) → disabled input showing the resolved value (when a
- *    column is in scope), so the user sees the underlying number
- *  - None          → no editor (selector only)
- */
 const RangeBarBoundInput = ({ api, value, optional, fallbackNumber, excludeColumnId, resolved, disabled, onChange }) => {
     const mode = getBoundMode(value);
     const handleModeChange = (next) => {
@@ -80,7 +66,6 @@ const RangeBarBoundInput = ({ api, value, optional, fallbackNumber, excludeColum
                 .find((c) => c.columnId !== excludeColumnId);
             return onChange(candidate?.columnId ?? '');
         }
-        // Col-Min / Col-Max / Col-Avg / Col-Median
         return onChange(next);
     };
     const items = [
@@ -207,7 +192,6 @@ const getStyledColumnRangeBarDisplayViewValues = (data) => {
     });
 };
 exports.getStyledColumnRangeBarDisplayViewValues = getStyledColumnRangeBarDisplayViewValues;
-/** Summary line for the Range wizard step (bounds + bands only). */
 const renderStyledColumnRangeBarRangeStepSummary = (data) => {
     const range = data.RangeBarStyle;
     if (!range) {
@@ -219,7 +203,6 @@ const renderStyledColumnRangeBarRangeStepSummary = (data) => {
 exports.renderStyledColumnRangeBarRangeStepSummary = renderStyledColumnRangeBarRangeStepSummary;
 const StyledColumnRangeBarRangeView = ({ data }) => (0, exports.renderStyledColumnRangeBarRangeStepSummary)(data);
 exports.StyledColumnRangeBarRangeView = StyledColumnRangeBarRangeView;
-/** Summary for the Display wizard step (markers, track, text). */
 const renderStyledColumnRangeBarDisplayStepSummary = (data) => {
     const range = data.RangeBarStyle;
     if (!range) {
@@ -235,9 +218,6 @@ const renderStyledColumnRangeBarDisplayStepSummary = (data) => {
     return (0, SummaryColorTag_1.renderSummaryStringTags)(items);
 };
 exports.renderStyledColumnRangeBarDisplayStepSummary = renderStyledColumnRangeBarDisplayStepSummary;
-/**
- * Combined summary for the Styled Columns list row (preview + key facts).
- */
 const renderStyledColumnRangeBarSummary = (data) => {
     const range = data.RangeBarStyle;
     if (!range) {
@@ -246,15 +226,6 @@ const renderStyledColumnRangeBarSummary = (data) => {
     return ((0, jsx_runtime_1.jsxs)(Flex_1.Flex, { flexDirection: "column", className: "twa:gap-3 twa:items-start", children: [(0, exports.renderStyledColumnRangeBarRangeStepSummary)(data), (0, exports.renderStyledColumnRangeBarDisplayStepSummary)(data)] }));
 };
 exports.renderStyledColumnRangeBarSummary = renderStyledColumnRangeBarSummary;
-// ---------------------------------------------------------------------------
-// Wizard validity check (also used by the wizard step config)
-// ---------------------------------------------------------------------------
-/**
- * Returns `true` if the Range Bar's bounds are well-formed, otherwise an
- * error string explaining what's missing. Used as the wizard step's
- * `isValid` callback.
- */
-/** Bounds + bands step — Min / Max required and numeric pair must span. */
 const isValidRangeBarBounds = (data) => {
     const range = data.RangeBarStyle;
     if (!range)
@@ -271,9 +242,6 @@ const isValidRangeBarBounds = (data) => {
     return true;
 };
 exports.isValidRangeBarBounds = isValidRangeBarBounds;
-// ---------------------------------------------------------------------------
-// Section
-// ---------------------------------------------------------------------------
 const MARKER_SHAPES = [
     { value: 'Diamond', label: 'Diamond' },
     { value: 'Line', label: 'Line' },
@@ -301,9 +269,6 @@ const StyledColumnWizardRangeBarSection = (props) => {
     const scope = { ColumnIds: [data.ColumnId] };
     const range = data.RangeBarStyle ?? {};
     const disabled = !data.ColumnId || !column;
-    // -------------------------------------------------------------------------
-    // Updaters
-    // -------------------------------------------------------------------------
     const update = (patch) => {
         props.onChange({
             ...data,
@@ -316,9 +281,6 @@ const StyledColumnWizardRangeBarSection = (props) => {
     const onUpdateRanges = (ranges) => {
         update({ CellRanges: ranges });
     };
-    // The Range Bar wizard hides the column-comparison toggle (bounds *are*
-    // the per-row range here). Stub kept to satisfy the RangesComponent prop
-    // contract.
     const onUpdateColumnComparison = (columnComparison) => {
         update({ ColumnComparison: columnComparison });
     };
@@ -357,8 +319,6 @@ const StyledColumnWizardRangeBarSection = (props) => {
             ...range.OutOfRange,
             ...patch,
         };
-        // Default mode is `Clamp` with no override colour; drop the wrapper in
-        // that case so empty state serialises cleanly.
         const isEmpty = (merged.Mode == undefined || merged.Mode === 'Clamp') && merged.Color == undefined;
         update({ OutOfRange: isEmpty ? undefined : merged });
     };
@@ -370,9 +330,6 @@ const StyledColumnWizardRangeBarSection = (props) => {
         };
         update({ Reference: merged });
     };
-    // -- Bound editors ---------------------------------------------------------
-    // Resolved values for the column-wide aggregate bound modes, shown read-only
-    // in the bound editor so the user sees the underlying number.
     const resolvedBoundValues = {
         'Col-Min': minMaxRangeValues?.min,
         'Col-Max': minMaxRangeValues?.max,
@@ -383,11 +340,6 @@ const StyledColumnWizardRangeBarSection = (props) => {
             ? api.styledColumnApi.internalApi.getMedianValueForNumericColumn(column)
             : undefined,
     };
-    /**
-     * Renders one of `Min` / `Max` / `Reference` as a single joined row (type
-     * selector + contextual editor). Centralised so the three controls stay
-     * visually and behaviourally identical (only the field name differs).
-     */
     const renderBoundEditor = (opts) => {
         const setBound = (next) => {
             if (opts.field === 'Reference') {
@@ -411,7 +363,6 @@ const StyledColumnWizardRangeBarSection = (props) => {
         const value = opts.field === 'Reference' ? range.Reference?.Value : range[opts.field];
         return ((0, jsx_runtime_1.jsx)(FormLayout_1.FormRow, { label: `${opts.label}:`, children: (0, jsx_runtime_1.jsx)(RangeBarBoundInput, { api: api, value: value, optional: opts.optional, fallbackNumber: opts.fallbackNumber, excludeColumnId: data.ColumnId, resolved: resolvedBoundValues, disabled: disabled, onChange: setBound }) }));
     };
-    // -- Marker editors --------------------------------------------------------
     const updateValueMarker = (patch) => {
         update({
             Marker: {
@@ -430,8 +381,6 @@ const StyledColumnWizardRangeBarSection = (props) => {
             },
         });
     };
-    // Defaults applied locally for displaying current values in the editor —
-    // the renderer applies its own defaults if these stay undefined in state.
     const valueMarker = {
         Shape: range.Marker?.Shape ?? 'Diamond',
         Color: range.Marker?.Color ?? '',
@@ -443,7 +392,6 @@ const StyledColumnWizardRangeBarSection = (props) => {
         Color: referenceMarkerCfg?.Color ?? '',
         Size: referenceMarkerCfg?.Size ?? (referenceMarkerCfg?.Shape === 'Line' ? 2 : 8),
     };
-    // -- Cell text -------------------------------------------------------------
     const toggleCellText = (token, show) => {
         update((0, BarStylesHelper_1.toggleBarStyleCellTextToken)(range.CellTextProperties, token, show));
     };
@@ -459,9 +407,6 @@ const StyledColumnWizardRangeBarSection = (props) => {
             : current.filter((t) => t !== token);
         update({ ToolTipText: next });
     };
-    // -------------------------------------------------------------------------
-    // Render
-    // -------------------------------------------------------------------------
     if (!data.ColumnId || !column) {
         return ((0, jsx_runtime_1.jsx)(Flex_1.Box, { children: (0, jsx_runtime_1.jsx)(ErrorBox_1.default, { className: "twa:mt-2", children: !data.ColumnId
                     ? 'You need to select a column before styling.'