@adaptabletools/adaptable-cjs 23.0.0-canary.4 → 23.0.0-canary.6

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

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.renderBadgePillStyleSummaryTags = exports.BadgePillStyleEditor = void 0;
+exports.renderBadgePillStyleSummaryTags = exports.getBadgePillStyleSummaryItems = exports.BadgePillStyleEditor = void 0;
 const tslib_1 = require("tslib");
 const jsx_runtime_1 = require("react/jsx-runtime");
 const CheckBox_1 = require("../../../components/CheckBox");
@@ -42,29 +42,39 @@ 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: (0, jsx_runtime_1.jsxs)(FormLayout_1.default, { columns: [LABEL_COLUMN, CHILD_COLUMN], sizes: ['7.5rem', '1fr'], gridColumnGap: "0.75rem", children: [(0, jsx_runtime_1.jsx)(FormLayout_1.FormRow, { label: "Background", children: (0, jsx_runtime_1.jsxs)(Flex_1.Flex, { alignItems: "center", className: "twa:gap-2", children: [(0, jsx_runtime_1.jsx)(CheckBox_1.CheckBox, { disabled: disabled, checked: !!pill.BackColor, onChange: (checked) => update({ BackColor: checked ? pill.BackColor ?? '#cccccc' : undefined }), children: "Set" }), (0, jsx_runtime_1.jsx)(ColorPicker_1.ColorPicker, { disabled: disabled || !pill.BackColor, api: props.api, value: pill.BackColor || '#cccccc', onChange: (c) => update({ BackColor: c }) })] }) }), (0, jsx_runtime_1.jsx)(FormLayout_1.FormRow, { label: "Text", children: (0, jsx_runtime_1.jsxs)(Flex_1.Flex, { alignItems: "center", className: "twa:gap-2", children: [(0, jsx_runtime_1.jsx)(CheckBox_1.CheckBox, { disabled: disabled, checked: !!pill.ForeColor, onChange: (checked) => update({ ForeColor: checked ? pill.ForeColor ?? '#000000' : undefined }), children: "Set" }), (0, jsx_runtime_1.jsx)(ColorPicker_1.ColorPicker, { disabled: disabled || !pill.ForeColor, api: props.api, value: pill.ForeColor || '#000000', onChange: (c) => update({ ForeColor: c }) })] }) }), (0, jsx_runtime_1.jsx)(FormLayout_1.FormRow, { label: "Border", children: (0, jsx_runtime_1.jsxs)(Flex_1.Flex, { alignItems: "center", className: "twa:gap-2", children: [(0, jsx_runtime_1.jsx)(CheckBox_1.CheckBox, { disabled: disabled, checked: !!pill.BorderColor, onChange: (checked) => update({ BorderColor: checked ? pill.BorderColor ?? '#000000' : undefined }), children: "Set" }), (0, jsx_runtime_1.jsx)(ColorPicker_1.ColorPicker, { disabled: disabled || !pill.BorderColor, api: props.api, value: pill.BorderColor || '#000000', onChange: (c) => update({ BorderColor: c }) })] }) }), (0, jsx_runtime_1.jsx)(FormLayout_1.FormRow, { label: "Font", children: (0, jsx_runtime_1.jsx)(Flex_1.Box, { className: disabledClass, children: (0, jsx_runtime_1.jsxs)(Flex_1.Flex, { alignItems: "center", className: "twa:gap-2 twa:flex-wrap", children: [(0, jsx_runtime_1.jsxs)(Toggle_1.ToggleGroup, { children: [(0, jsx_runtime_1.jsx)(Toggle_1.Toggle, { pressed: pill.FontStyle === 'Italic', onPressedChange: (pressed) => update({ FontStyle: pressed ? 'Italic' : undefined }), icon: "italic" }), (0, jsx_runtime_1.jsx)(Toggle_1.Toggle, { pressed: pill.FontWeight === 'Bold', onPressedChange: (pressed) => update({ FontWeight: pressed ? 'Bold' : undefined }), icon: "bold" })] }), (0, jsx_runtime_1.jsxs)(Toggle_1.ToggleGroup, { children: [(0, jsx_runtime_1.jsx)(Toggle_1.Toggle, { pressed: pill.TextDecoration === 'Underline', onPressedChange: (pressed) => update({ TextDecoration: pressed ? 'Underline' : undefined }), icon: "underline" }), (0, jsx_runtime_1.jsx)(Toggle_1.Toggle, { pressed: pill.TextDecoration === 'LineThrough', onPressedChange: (pressed) => update({ TextDecoration: pressed ? 'LineThrough' : undefined }), icon: "strikethrough" }), (0, jsx_runtime_1.jsx)(Toggle_1.Toggle, { pressed: pill.TextDecoration === 'Overline', onPressedChange: (pressed) => update({ TextDecoration: pressed ? 'Overline' : undefined }), icon: "overline" })] })] }) }) })] }) }) }));
 };
 exports.BadgePillStyleEditor = BadgePillStyleEditor;
-/** Compact summary tags for a {@link BadgePillStyle}; used by wizard summaries. */
-const renderBadgePillStyleSummaryTags = (pill) => {
-    if (!pill)
-        return null;
-    const tags = [];
+/** Descriptive pill properties for summary panels (`Label: value` strings). */
+const getBadgePillStyleSummaryItems = (pill) => {
+    if (!pill) {
+        return [];
+    }
+    const items = [];
     if (pill.BackColor) {
-        tags.push((0, jsx_runtime_1.jsxs)(Tag_1.Tag, { children: ["Bg ", pill.BackColor] }, "bg"));
+        items.push({ label: 'Pill Back Colour', value: pill.BackColor });
     }
     if (pill.ForeColor) {
-        tags.push((0, jsx_runtime_1.jsxs)(Tag_1.Tag, { children: ["Text ", pill.ForeColor] }, "fg"));
+        items.push({ label: 'Pill Fore Colour', value: pill.ForeColor });
     }
     if (pill.BorderColor) {
-        tags.push((0, jsx_runtime_1.jsxs)(Tag_1.Tag, { children: ["Border ", pill.BorderColor] }, "bc"));
+        items.push({ label: 'Pill Border Colour', value: pill.BorderColor });
+    }
+    if (pill.FontWeight === 'Bold') {
+        items.push({ label: 'Pill Font Weight', value: 'Bold' });
+    }
+    if (pill.FontStyle === 'Italic') {
+        items.push({ label: 'Pill Font Style', value: 'Italic' });
     }
-    if (pill.FontWeight === 'Bold')
-        tags.push((0, jsx_runtime_1.jsx)(Tag_1.Tag, { children: "Bold" }, "b"));
-    if (pill.FontStyle === 'Italic')
-        tags.push((0, jsx_runtime_1.jsx)(Tag_1.Tag, { children: "Italic" }, "i"));
     if (pill.TextDecoration && pill.TextDecoration !== 'None') {
-        tags.push((0, jsx_runtime_1.jsx)(Tag_1.Tag, { children: pill.TextDecoration }, "td"));
+        items.push({ label: 'Pill Text Decoration', value: pill.TextDecoration });
     }
-    if (tags.length === 0)
+    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) {
         return null;
-    return ((0, jsx_runtime_1.jsx)(Flex_1.Flex, { alignItems: "center", className: "twa:gap-1 twa:flex-wrap", children: tags }));
+    }
+    return ((0, jsx_runtime_1.jsx)(Flex_1.Flex, { alignItems: "center", className: "twa:gap-1 twa:flex-wrap", children: items.map(({ label, value }) => ((0, jsx_runtime_1.jsx)(Tag_1.Tag, { children: `${label}: ${value}` }, label))) }));
 };
 exports.renderBadgePillStyleSummaryTags = renderBadgePillStyleSummaryTags;

package/src/View/StyledColumn/Wizard/StyledColumnBadgeSection.d.ts

@@ -1,6 +1,14 @@
 import * as React from 'react';
 import { StyledColumn } from '../../../types';
-export declare const renderBadgeSummary: (styledColumn: StyledColumn) => React.JSX.Element;
+import { AdaptableApi } from '../../../Api/AdaptableApi';
+export declare const getStyledColumnBadgeDefinitionViewValueGroups: (styledColumn: StyledColumn, api: AdaptableApi) => string[][];
+export declare const getStyledColumnBadgeDefinitionViewValues: (styledColumn: StyledColumn, api: AdaptableApi) => string[];
+export declare const getStyledColumnBadgeStyleViewValues: (styledColumn: StyledColumn, api?: AdaptableApi) => string[];
+export declare const renderBadgeDefinitionSummaryTags: (styledColumn: StyledColumn, api: AdaptableApi) => React.JSX.Element;
+export declare const StyledColumnBadgeDefinitionsView: React.FunctionComponent<React.PropsWithChildren<{
+    data: StyledColumn;
+}>>;
+export declare const renderBadgeSummary: (styledColumn: StyledColumn, api?: AdaptableApi) => React.JSX.Element;
 export interface StyledColumnBadgeSectionProps {
     onChange: (data: StyledColumn) => void;
 }
@@ -9,4 +17,4 @@ export interface StyledColumnBadgeStyleSectionProps {
     onChange: (data: StyledColumn) => void;
 }
 export declare const StyledColumnBadgeStyleSection: React.FunctionComponent<StyledColumnBadgeStyleSectionProps>;
-export declare const renderBadgeStyleSummary: (styledColumn: StyledColumn) => React.JSX.Element;
+export declare const renderBadgeStyleSummary: (styledColumn: StyledColumn, api?: AdaptableApi) => React.JSX.Element;

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

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.renderBadgeStyleSummary = exports.StyledColumnBadgeStyleSection = exports.StyledColumnBadgeSection = exports.renderBadgeSummary = void 0;
+exports.renderBadgeStyleSummary = exports.StyledColumnBadgeStyleSection = exports.StyledColumnBadgeSection = exports.renderBadgeSummary = exports.StyledColumnBadgeDefinitionsView = exports.renderBadgeDefinitionSummaryTags = exports.getStyledColumnBadgeStyleViewValues = exports.getStyledColumnBadgeDefinitionViewValues = exports.getStyledColumnBadgeDefinitionViewValueGroups = void 0;
 const tslib_1 = require("tslib");
 const jsx_runtime_1 = require("react/jsx-runtime");
 const DropdownButton_1 = tslib_1.__importDefault(require("../../../components/DropdownButton"));
@@ -13,7 +13,6 @@ const ObjectFactory_1 = tslib_1.__importDefault(require("../../../Utilities/Obje
 const AdaptableIconSelector_1 = require("../../Components/AdaptableIconSelector");
 const PredicateEditor_1 = require("../../Components/PredicateEditor/PredicateEditor");
 const OnePageAdaptableWizard_1 = require("../../Wizard/OnePageAdaptableWizard");
-const StyledColumnBadgePreview_1 = require("./StyledColumnWizardStyleSection/Components/StyledColumnBadgePreview");
 const Badge_1 = require("../../Components/Badge");
 const AdaptableIconComponent_1 = require("../../Components/AdaptableIconComponent");
 const GeneralConstants_1 = require("../../../Utilities/Constants/GeneralConstants");
@@ -25,6 +24,8 @@ const Toggle_1 = require("../../../components/Toggle");
 const BadgePillStyleEditor_1 = require("./BadgePillStyleEditor");
 const StyledColumnSliceStyleEditors_1 = require("./StyledColumnSliceStyleEditors");
 const Card_1 = require("../../../components/Card");
+const AdaptableContext_1 = require("../../AdaptableContext");
+const StyledColumnBadgePreview_1 = require("./StyledColumnWizardStyleSection/Components/StyledColumnBadgePreview");
 const BADGE_STYLE_FORM_SIZES = ['200px', '1fr'];
 const SHAPE_CHOICES = [
     { value: 'Pill', label: 'Pill' },
@@ -98,8 +99,93 @@ const BadgeEditor = (props) => {
                                             });
                                         } }), (0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:text-xs twa:opacity-70", children: "px between icon and text \u2014 leave blank to follow Density" })] }) }))] }) })] }));
 };
-const renderBadgeSummary = (styledColumn) => {
-    return (0, jsx_runtime_1.jsx)(StyledColumnBadgePreview_1.StyledColumnBadgePreview, { data: styledColumn });
+const getStyledColumnBadgeDefinitionViewValueGroups = (styledColumn, api) => {
+    const badgeStyle = styledColumn.BadgeStyle;
+    if (!badgeStyle?.Badges?.length) {
+        return [];
+    }
+    return badgeStyle.Badges.map((badge, index) => {
+        const items = [];
+        let rule = 'Always';
+        if (badge.Predicate) {
+            rule = api.predicateApi.predicateToString(badge.Predicate);
+        }
+        else if (badge.Expression) {
+            rule = badge.Expression.BooleanExpression;
+        }
+        items.push(`Badge ${index + 1}: ${rule}`);
+        items.push(`Shape: ${badge.Shape ?? 'Rounded'}`);
+        (0, BadgePillStyleEditor_1.getBadgePillStyleSummaryItems)(badge.PillStyle).forEach(({ label, value }) => {
+            items.push(`${label}: ${value}`);
+        });
+        if (badge.Icon) {
+            const iconName = 'name' in badge.Icon ? badge.Icon.name : 'Custom';
+            items.push(`Icon: ${iconName}`);
+        }
+        if (badge.IconOnly) {
+            items.push('Icon Only: Yes');
+        }
+        if (badge.Icon && badge.IconPosition) {
+            items.push(`Icon Position: ${badge.IconPosition}`);
+        }
+        if (typeof badge.IconGap === 'number') {
+            items.push(`Icon Gap: ${badge.IconGap}px`);
+        }
+        return items;
+    });
+};
+exports.getStyledColumnBadgeDefinitionViewValueGroups = getStyledColumnBadgeDefinitionViewValueGroups;
+const getStyledColumnBadgeDefinitionViewValues = (styledColumn, api) => {
+    return (0, exports.getStyledColumnBadgeDefinitionViewValueGroups)(styledColumn, api).flat();
+};
+exports.getStyledColumnBadgeDefinitionViewValues = getStyledColumnBadgeDefinitionViewValues;
+const isBadgeArrayColumn = (styledColumn, api) => {
+    if (!api || !styledColumn.ColumnId) {
+        return false;
+    }
+    const dataType = api.columnApi.getColumnDataTypeForColumnId(styledColumn.ColumnId);
+    return dataType === 'numberArray' || dataType === 'textArray';
+};
+const getStyledColumnBadgeStyleViewValues = (styledColumn, api) => {
+    const badgeStyle = styledColumn.BadgeStyle;
+    if (!badgeStyle) {
+        return [];
+    }
+    const items = [`Density: ${badgeStyle.Density ?? 'Normal'}`];
+    if (isBadgeArrayColumn(styledColumn, api)) {
+        if (typeof badgeStyle.Spacing === 'number') {
+            items.push(`Spacing: ${badgeStyle.Spacing}px`);
+        }
+        items.push(`Overflow: ${badgeStyle.OverflowMode ?? 'Truncate'}`);
+    }
+    (0, StyledColumnSliceStyleEditors_1.getCellFontStyleSummaryItems)(badgeStyle.Font).forEach(({ label, value }) => {
+        items.push(`${label}: ${value}`);
+    });
+    (0, StyledColumnSliceStyleEditors_1.getCellBoxStyleSummaryItems)(badgeStyle.Cell).forEach(({ label, value }) => {
+        items.push(`${label}: ${value}`);
+    });
+    return items;
+};
+exports.getStyledColumnBadgeStyleViewValues = getStyledColumnBadgeStyleViewValues;
+const renderBadgeDefinitionSummaryTags = (styledColumn, api) => {
+    const groups = (0, exports.getStyledColumnBadgeDefinitionViewValueGroups)(styledColumn, api);
+    if (!groups.length) {
+        return (0, jsx_runtime_1.jsx)(Tag_1.Tag, { children: "No Badges Defined" });
+    }
+    return ((0, jsx_runtime_1.jsx)(Flex_1.Flex, { flexDirection: "column", className: "twa:gap-2", children: groups.map((items, index) => ((0, jsx_runtime_1.jsx)(Flex_1.Flex, { alignItems: "center", className: "twa:flex-wrap twa:gap-2", children: items.map((item, itemIndex) => ((0, jsx_runtime_1.jsx)(Tag_1.Tag, { children: item }, `${index}-${itemIndex}`))) }, index))) }));
+};
+exports.renderBadgeDefinitionSummaryTags = renderBadgeDefinitionSummaryTags;
+const StyledColumnBadgeDefinitionsView = ({ data }) => {
+    const { api } = (0, AdaptableContext_1.useAdaptable)();
+    return (0, exports.renderBadgeDefinitionSummaryTags)(data, api);
+};
+exports.StyledColumnBadgeDefinitionsView = StyledColumnBadgeDefinitionsView;
+const renderBadgeSummary = (styledColumn, api) => {
+    if (!api) {
+        const { api: adaptableApi } = (0, OnePageAdaptableWizard_1.useOnePageAdaptableWizardContext)();
+        api = adaptableApi;
+    }
+    return (0, exports.renderBadgeDefinitionSummaryTags)(styledColumn, api);
 };
 exports.renderBadgeSummary = renderBadgeSummary;
 const StyledColumnBadgeSection = (props) => {
@@ -182,19 +268,18 @@ const StyledColumnBadgeStyleSection = (props) => {
                                             delete cleaned.Cell;
                                             props.onChange({ ...data, BadgeStyle: cleaned });
                                         }
-                                    } }) })] })] })] }));
+                                    } }) })] })] }), (0, jsx_runtime_1.jsx)(StyledColumnBadgePreview_1.StyledColumnBadgePreviewCard, { data: data })] }));
 };
 exports.StyledColumnBadgeStyleSection = StyledColumnBadgeStyleSection;
-const renderBadgeStyleSummary = (styledColumn) => {
-    const badgeStyle = styledColumn?.BadgeStyle;
-    if (!badgeStyle) {
-        return (0, jsx_runtime_1.jsx)(Tag_1.Tag, { children: "\u2014" });
+const renderBadgeStyleSummary = (styledColumn, api) => {
+    if (!api) {
+        const { api: adaptableApi } = (0, OnePageAdaptableWizard_1.useOnePageAdaptableWizardContext)();
+        api = adaptableApi;
+    }
+    const items = (0, exports.getStyledColumnBadgeStyleViewValues)(styledColumn, api);
+    if (!items.length) {
+        return (0, jsx_runtime_1.jsx)(Tag_1.Tag, { children: "No Style Defined" });
     }
-    const density = badgeStyle.Density ?? 'Normal';
-    const spacing = typeof badgeStyle.Spacing === 'number' ? badgeStyle.Spacing : null;
-    const overflow = badgeStyle.OverflowMode ?? 'Truncate';
-    const alignment = badgeStyle.Font?.Alignment;
-    const cellTags = (0, StyledColumnSliceStyleEditors_1.renderCellStyleSummaryTags)(badgeStyle.Cell);
-    return ((0, jsx_runtime_1.jsxs)(Flex_1.Flex, { alignItems: "center", className: "twa:flex-wrap twa:gap-2", children: [(0, jsx_runtime_1.jsxs)(Flex_1.Box, { children: ["Density: ", (0, jsx_runtime_1.jsx)(Tag_1.Tag, { children: density })] }), spacing != null && ((0, jsx_runtime_1.jsxs)(Flex_1.Box, { children: ["Spacing: ", (0, jsx_runtime_1.jsxs)(Tag_1.Tag, { children: [spacing, "px"] })] })), (0, jsx_runtime_1.jsxs)(Flex_1.Box, { children: ["Overflow: ", (0, jsx_runtime_1.jsx)(Tag_1.Tag, { children: overflow })] }), alignment && ((0, jsx_runtime_1.jsxs)(Flex_1.Box, { children: ["Align: ", (0, jsx_runtime_1.jsx)(Tag_1.Tag, { children: alignment })] })), cellTags && (0, jsx_runtime_1.jsxs)(Flex_1.Box, { children: ["Cell: ", cellTags] })] }));
+    return ((0, jsx_runtime_1.jsx)(Flex_1.Flex, { alignItems: "center", className: "twa:flex-wrap twa:gap-2", children: items.map((item) => ((0, jsx_runtime_1.jsx)(Tag_1.Tag, { children: item }, item))) }));
 };
 exports.renderBadgeStyleSummary = renderBadgeStyleSummary;

package/src/View/StyledColumn/Wizard/StyledColumnSliceStyleEditors.d.ts

@@ -39,10 +39,24 @@ export interface StyledColumnCellStyleEditorProps {
  * key is unset) which the host wizard merges back into its `*Style` patch.
  */
 export declare const StyledColumnCellStyleEditor: React.FunctionComponent<StyledColumnCellStyleEditorProps>;
+/**
+ * Descriptive font properties for summary panels (`Label: value` strings).
+ */
+export declare const getCellFontStyleSummaryItems: (font: CellFontStyle | undefined) => {
+    label: string;
+    value: string;
+}[];
 /**
  * Compact summary tags for the Font slice; used by wizard summary panels.
  */
 export declare const renderFontStyleSummaryTags: (font: CellFontStyle | undefined) => React.JSX.Element | null;
+/**
+ * Descriptive cell box properties for summary panels (`Label: value` strings).
+ */
+export declare const getCellBoxStyleSummaryItems: (cell: CellBoxStyle | undefined) => {
+    label: string;
+    value: string;
+}[];
 /**
  * Compact summary tags for the Cell slice; used by wizard summary panels.
  */

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

@@ -1,8 +1,9 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.renderCellStyleSummaryTags = exports.renderFontStyleSummaryTags = exports.StyledColumnCellStyleEditor = exports.StyledColumnFontStyleEditor = void 0;
+exports.renderCellStyleSummaryTags = exports.getCellBoxStyleSummaryItems = exports.renderFontStyleSummaryTags = exports.getCellFontStyleSummaryItems = exports.StyledColumnCellStyleEditor = exports.StyledColumnFontStyleEditor = void 0;
 const tslib_1 = require("tslib");
 const jsx_runtime_1 = require("react/jsx-runtime");
+const React = tslib_1.__importStar(require("react"));
 const CheckBox_1 = require("../../../components/CheckBox");
 const ColorPicker_1 = require("../../../components/ColorPicker");
 const FormLayout_1 = tslib_1.__importStar(require("../../../components/FormLayout"));
@@ -74,9 +75,11 @@ exports.StyledColumnFontStyleEditor = StyledColumnFontStyleEditor;
  */
 const StyledColumnCellStyleEditor = (props) => {
     const cell = props.value ?? {};
+    const cellRef = React.useRef(cell);
+    cellRef.current = cell;
     const { disabled } = props;
     const update = (patch) => {
-        const next = { ...cell, ...patch };
+        const next = { ...cellRef.current, ...patch };
         Object.keys(next).forEach((k) => {
             const v = next[k];
             if (v === undefined || v === null || v === '') {
@@ -94,53 +97,73 @@ const StyledColumnCellStyleEditor = (props) => {
 };
 exports.StyledColumnCellStyleEditor = StyledColumnCellStyleEditor;
 /**
- * Compact summary tags for the Font slice; used by wizard summary panels.
+ * Descriptive font properties for summary panels (`Label: value` strings).
  */
-const renderFontStyleSummaryTags = (font) => {
-    if (!font)
-        return null;
-    const tags = [];
+const getCellFontStyleSummaryItems = (font) => {
+    if (!font) {
+        return [];
+    }
+    const items = [];
     if (font.ForeColor) {
-        tags.push((0, jsx_runtime_1.jsxs)(Tag_1.Tag, { children: ["Text ", font.ForeColor] }, "fg"));
+        items.push({ label: 'Fore Colour', value: font.ForeColor });
     }
     if (font.FontWeight === 'Bold') {
-        tags.push((0, jsx_runtime_1.jsx)(Tag_1.Tag, { children: "Bold" }, "b"));
+        items.push({ label: 'Font Weight', value: 'Bold' });
     }
     if (font.FontStyle === 'Italic') {
-        tags.push((0, jsx_runtime_1.jsx)(Tag_1.Tag, { children: "Italic" }, "i"));
+        items.push({ label: 'Font Style', value: 'Italic' });
     }
     if (font.TextDecoration && font.TextDecoration !== 'None') {
-        tags.push((0, jsx_runtime_1.jsx)(Tag_1.Tag, { children: font.TextDecoration }, "td"));
+        items.push({ label: 'Text Decoration', value: font.TextDecoration });
     }
     if (font.FontSize) {
-        tags.push((0, jsx_runtime_1.jsx)(Tag_1.Tag, { children: font.FontSize }, "fs"));
+        items.push({ label: 'Font Size', value: font.FontSize });
     }
     if (font.Alignment && font.Alignment !== 'Default') {
-        tags.push((0, jsx_runtime_1.jsxs)(Tag_1.Tag, { children: ["Align ", font.Alignment] }, "al"));
+        items.push({ label: 'Alignment', value: font.Alignment });
     }
-    if (tags.length === 0)
+    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) {
         return null;
-    return ((0, jsx_runtime_1.jsx)(Flex_1.Flex, { alignItems: "center", className: "twa:gap-1 twa:flex-wrap", children: tags }));
+    }
+    return ((0, jsx_runtime_1.jsx)(Flex_1.Flex, { alignItems: "center", className: "twa:gap-1 twa:flex-wrap", children: items.map(({ label, value }) => ((0, jsx_runtime_1.jsx)(Tag_1.Tag, { children: `${label}: ${value}` }, label))) }));
 };
 exports.renderFontStyleSummaryTags = renderFontStyleSummaryTags;
 /**
- * Compact summary tags for the Cell slice; used by wizard summary panels.
+ * Descriptive cell box properties for summary panels (`Label: value` strings).
  */
-const renderCellStyleSummaryTags = (cell) => {
-    if (!cell)
-        return null;
-    const tags = [];
+const getCellBoxStyleSummaryItems = (cell) => {
+    if (!cell) {
+        return [];
+    }
+    const items = [];
     if (cell.BackColor) {
-        tags.push((0, jsx_runtime_1.jsxs)(Tag_1.Tag, { children: ["Bg ", cell.BackColor] }, "bg"));
+        items.push({ label: 'Back Colour', value: cell.BackColor });
     }
     if (cell.BorderColor) {
-        tags.push((0, jsx_runtime_1.jsxs)(Tag_1.Tag, { children: ["Border ", cell.BorderColor] }, "bc"));
+        items.push({ label: 'Border Colour', value: cell.BorderColor });
     }
     if (cell.BorderRadius != null) {
-        tags.push((0, jsx_runtime_1.jsxs)(Tag_1.Tag, { children: ["Radius ", cell.BorderRadius, "px"] }, "br"));
+        items.push({ label: 'Border Radius', value: `${cell.BorderRadius}px` });
     }
-    if (tags.length === 0)
+    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) {
         return null;
-    return ((0, jsx_runtime_1.jsx)(Flex_1.Flex, { alignItems: "center", className: "twa:gap-1 twa:flex-wrap", children: tags }));
+    }
+    return ((0, jsx_runtime_1.jsx)(Flex_1.Flex, { alignItems: "center", className: "twa:gap-1 twa:flex-wrap", children: items.map(({ label, value }) => ((0, jsx_runtime_1.jsx)(Tag_1.Tag, { children: `${label}: ${value}` }, label))) }));
 };
 exports.renderCellStyleSummaryTags = renderCellStyleSummaryTags;

package/src/View/StyledColumn/Wizard/StyledColumnSparklineSettingsSection.d.ts

@@ -1,9 +1,8 @@
 import * as React from 'react';
 import type { StyledColumn } from '../../../types';
+export declare const getStyledColumnSparklineStyleViewValues: (data: StyledColumn) => string[];
 /**
- * Wizard-step summary for the Sparkline Settings step, mirroring the
- * pattern used by Bullet / Badge / Gradient / Percent Bar so the nav row
- * isn't blank when this step is collapsed.
+ * Wizard-step summary for the Sparkline Settings step.
  */
 export declare const renderSparklineSummary: (data: StyledColumn) => React.ReactNode;
 /**