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

package/src/View/Layout/Wizard/sections/RowSummarySection.js

@@ -6,7 +6,6 @@ const jsx_runtime_1 = require("react/jsx-runtime");
 const React = tslib_1.__importStar(require("react"));
 const CheckBox_1 = require("../../../../components/CheckBox");
 const FormLayout_1 = tslib_1.__importStar(require("../../../../components/FormLayout"));
-const Panel_1 = tslib_1.__importDefault(require("../../../../components/Panel"));
 const SimpleButton_1 = tslib_1.__importDefault(require("../../../../components/SimpleButton"));
 const ButtonNew_1 = require("../../../Components/Buttons/ButtonNew");
 const Card_1 = require("../../../../components/Card");
@@ -24,6 +23,9 @@ const ColumnGroupTag_1 = require("../../../Components/ColumnGroupTag");
 const ArrayExtensions_1 = tslib_1.__importDefault(require("../../../../Utilities/Extensions/ArrayExtensions"));
 const Flex_1 = require("../../../../components/Flex");
 const NewSelect_1 = require("../../../../components/NewSelect");
+const CollapsibleWizardCard_1 = require("../../../Wizard/CollapsibleWizardCard");
+const utils_1 = require("../../../../lib/utils");
+const objectListActionButtonStyles_1 = require("../../../Components/AdaptableObjectList/objectListActionButtonStyles");
 const areSummaryRowsValid = (layout) => {
     if (!layout.RowSummaries)
         return true;
@@ -39,6 +41,7 @@ const areSummaryRowsValid = (layout) => {
     return valid;
 };
 exports.areSummaryRowsValid = areSummaryRowsValid;
+const rowSummaryCardId = (index) => `row-summary-${index}`;
 const availableExpressionsForColumnTypeCache = new Map();
 const getAvailableExpressionsForColumnType = (columnType, availableScalarExpressions) => {
     const key = columnType;
@@ -104,19 +107,28 @@ const getDefaultRowSummaryExpression = (column, availableScalarExpressions, layo
     }
     return optionValues[0] ?? null;
 };
+const RowSummaryPositionTag = ({ position }) => (0, jsx_runtime_1.jsx)(Tag_1.Tag, { className: "twa:shrink-0", children: position });
+const RowSummaryCardSummary = ({ rowSummary }) => {
+    const adaptable = (0, AdaptableContext_1.useAdaptable)();
+    const columnIds = Object.keys(rowSummary.ColumnsMap ?? {}).filter((colId) => colId !== 'Source' && colId !== 'Uuid');
+    if (!columnIds.length) {
+        return (0, jsx_runtime_1.jsx)(Tag_1.Tag, { children: "No columns" });
+    }
+    return ((0, jsx_runtime_1.jsx)(Flex_1.Flex, { flexWrap: "wrap", className: "twa:gap-1", children: columnIds.map((colId) => ((0, jsx_runtime_1.jsxs)(Tag_1.ColumnTag, { children: [rowSummary.ColumnsMap[colId], "(", adaptable.api.columnApi.getFriendlyNameForColumnId(colId), ")"] }, colId))) }));
+};
 const RowSummarySectionSummary = () => {
     const adaptable = (0, AdaptableContext_1.useAdaptable)();
     const { data: layout } = (0, OnePageAdaptableWizard_1.useOnePageAdaptableWizardContext)();
     return ((0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:flex twa:flex-col", children: layout.RowSummaries?.length ? (layout.RowSummaries.map((rowSummary, index) => {
-            return ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: (0, jsx_runtime_1.jsxs)(Flex_1.Box, { className: "twa:mr-1 twa:mb-1", children: [rowSummary.Position, ":", ' ', Object.keys(rowSummary.ColumnsMap).map((colId) => {
-                            if (colId === 'Source' || colId === 'Uuid')
-                                return null;
-                            return ((0, jsx_runtime_1.jsxs)(Tag_1.ColumnTag, { className: "twa:mr-1", children: [rowSummary.ColumnsMap[colId], "(", adaptable.api.columnApi.getFriendlyNameForColumnId(colId), ")"] }, colId));
-                        })] }, index) }));
+            return ((0, jsx_runtime_1.jsxs)(Flex_1.Box, { className: "twa:mr-1 twa:mb-1", children: [rowSummary.Position, ":", ' ', Object.keys(rowSummary.ColumnsMap).map((colId) => {
+                        if (colId === 'Source' || colId === 'Uuid')
+                            return null;
+                        return ((0, jsx_runtime_1.jsxs)(Tag_1.ColumnTag, { className: "twa:mr-1", children: [rowSummary.ColumnsMap[colId], "(", adaptable.api.columnApi.getFriendlyNameForColumnId(colId), ")"] }, colId));
+                    })] }, index));
         })) : ((0, jsx_runtime_1.jsx)(Tag_1.Tag, { children: "No Row Summaries" })) }));
 };
 exports.RowSummarySectionSummary = RowSummarySectionSummary;
-const RowSummaryEditor = React.memo(({ rowSummary, onChange, availableScalarExpressions, onDelete, }) => {
+const RowSummaryEditorForm = React.memo(({ rowSummary, onChange, availableScalarExpressions, }) => {
     const { data: layout } = (0, OnePageAdaptableWizard_1.useOnePageAdaptableWizardContext)();
     const adaptable = (0, AdaptableContext_1.useAdaptable)();
     const columns = React.useMemo(() => {
@@ -132,110 +144,124 @@ const RowSummaryEditor = React.memo(({ rowSummary, onChange, availableScalarExpr
             sortUnorderedItems: false,
         }).map((colId) => adaptable.api.columnApi.getColumnWithColumnId(colId));
     }, [rowSummary.ColumnsMap]);
-    return ((0, jsx_runtime_1.jsx)(Panel_1.default, { className: "twa:mb-3", bodyProps: { className: 'twa:p-2' }, children: (0, jsx_runtime_1.jsxs)(Card_1.Card, { shadow: false, children: [(0, jsx_runtime_1.jsxs)(Card_1.Card.Title, { className: "twa:w-full", children: [(0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:font-medium twa:flex-1", children: "Row Summary" }), (0, jsx_runtime_1.jsxs)(Flex_1.Flex, { alignItems: "center", className: "twa:gap-2 twa:shrink-0", children: [(0, jsx_runtime_1.jsx)(SuspendToggleButton_1.SuspendToggleButton, { onSuspend: () => {
-                                        onChange({
-                                            ...rowSummary,
-                                            IsSuspended: true,
-                                        });
-                                    }, onUnSuspend: () => {
-                                        onChange({
-                                            ...rowSummary,
-                                            IsSuspended: false,
-                                        });
-                                    }, suspendableObject: rowSummary }), (0, jsx_runtime_1.jsx)(SimpleButton_1.default, { icon: "delete", onClick: () => {
-                                        onDelete();
-                                    } })] })] }), (0, jsx_runtime_1.jsxs)(Card_1.Card.Body, { className: "twa:p-1 twa:gap-3", children: [(0, jsx_runtime_1.jsxs)(FormLayout_1.default, { children: [(0, jsx_runtime_1.jsx)(FormLayout_1.FormRow, { label: "Position", children: (0, jsx_runtime_1.jsx)(NewSelect_1.SingleSelect, { items: [
-                                            {
-                                                label: 'Top',
-                                                value: 'Top',
-                                            },
-                                            {
-                                                label: 'Bottom',
-                                                value: 'Bottom',
-                                            },
-                                        ], value: rowSummary.Position, onValueChange: (position) => {
-                                            onChange({
-                                                ...rowSummary,
-                                                Position: position,
-                                            });
-                                        } }) }), (0, jsx_runtime_1.jsx)(FormLayout_1.FormRow, { label: "", children: (0, jsx_runtime_1.jsx)(CheckBox_1.CheckBox, { checked: rowSummary.IncludeOnlyFilteredRows ?? true, onChange: (IncludeOnlyFilteredRows) => {
-                                            onChange({
-                                                ...rowSummary,
-                                                IncludeOnlyFilteredRows,
-                                            });
-                                        }, children: "Include Only Filtered Rows" }) })] }), (0, jsx_runtime_1.jsxs)(Card_1.Card, { shadow: false, className: "twa:h-[400px] twa:overflow-hidden twa:flex twa:flex-col", children: [(0, jsx_runtime_1.jsxs)(Card_1.Card.Title, { children: [(0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:font-medium", children: "Column Aggregations" }), (0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:text-xs twa:opacity-70 twa:font-normal twa:max-w-[520px]", children: "Select columns and choose an aggregation function for each" })] }), (0, jsx_runtime_1.jsx)(Card_1.Card.Body, { className: "twa:flex-1 twa:min-h-0 twa:overflow-hidden twa:p-1", children: (0, jsx_runtime_1.jsx)(ValueSelector_1.ValueSelector, { style: { minHeight: 0, maxHeight: '100%' }, showFilterInput: true, toggleSelectionOnRowClick: false, filter: Utilities_1.columnFilter, toIdentifier: (column) => column.columnId, toLabel: (option) => option.friendlyName ?? option.columnId, options: columns, optionLayout: "label-beside-checkbox", toListLabel: (column) => {
-                                            const label = column.friendlyName ?? column.columnId;
-                                            const disabled = !(column.columnId in (rowSummary.ColumnsMap ?? {}));
-                                            if (disabled) {
-                                                return ((0, jsx_runtime_1.jsxs)(Flex_1.Flex, { alignItems: "center", className: "twa:gap-2", children: [label, (0, jsx_runtime_1.jsx)(ColumnGroupTag_1.ColumnGroupTag, { column: column }), (0, jsx_runtime_1.jsx)(NewSelect_1.SingleSelect, { disabled: true, items: [{ label: 'Select Aggregation', value: null }] })] }));
-                                            }
-                                            const expressionOptions = buildRowSummaryExpressionOptions(column, availableScalarExpressions, layout);
-                                            const expression = rowSummary.ColumnsMap[column.columnId];
-                                            return ((0, jsx_runtime_1.jsxs)(Flex_1.Flex, { children: [(0, jsx_runtime_1.jsxs)(Flex_1.Flex, { className: "twa:mr-2", alignItems: 'center', children: [label, (0, jsx_runtime_1.jsx)(ColumnGroupTag_1.ColumnGroupTag, { column: column })] }), (0, jsx_runtime_1.jsx)(NewSelect_1.SingleSelect, { value: expression, items: expressionOptions, onValueChange: (expression) => {
-                                                            onChange({
-                                                                ...rowSummary,
-                                                                ColumnsMap: {
-                                                                    ...rowSummary.ColumnsMap,
-                                                                    [column.columnId]: expression,
-                                                                },
-                                                            });
-                                                        } })] }));
-                                        }, value: Object.keys(rowSummary.ColumnsMap), onChange: (colIds) => {
-                                            const newColumnsMap = {};
-                                            colIds.forEach((colId) => {
-                                                const existing = rowSummary.ColumnsMap[colId];
-                                                if (existing) {
-                                                    newColumnsMap[colId] = existing;
-                                                    return;
-                                                }
-                                                const column = adaptable.api.columnApi.getColumnWithColumnId(colId);
-                                                newColumnsMap[colId] = column
-                                                    ? getDefaultRowSummaryExpression(column, availableScalarExpressions, layout)
-                                                    : null;
-                                            });
-                                            onChange({
-                                                ...rowSummary,
-                                                ColumnsMap: newColumnsMap,
-                                            });
-                                        } }) })] })] })] }) }));
+    return ((0, jsx_runtime_1.jsxs)(Flex_1.Box, { className: "twa:flex twa:flex-col twa:gap-3 twa:h-full twa:min-h-0 twa:overflow-hidden", children: [(0, jsx_runtime_1.jsxs)(FormLayout_1.default, { children: [(0, jsx_runtime_1.jsx)(FormLayout_1.FormRow, { label: "Position", children: (0, jsx_runtime_1.jsx)(NewSelect_1.SingleSelect, { items: [
+                                {
+                                    label: 'Top',
+                                    value: 'Top',
+                                },
+                                {
+                                    label: 'Bottom',
+                                    value: 'Bottom',
+                                },
+                            ], value: rowSummary.Position, onValueChange: (position) => {
+                                onChange({
+                                    ...rowSummary,
+                                    Position: position,
+                                });
+                            } }) }), (0, jsx_runtime_1.jsx)(FormLayout_1.FormRow, { label: "", children: (0, jsx_runtime_1.jsx)(CheckBox_1.CheckBox, { checked: rowSummary.IncludeOnlyFilteredRows ?? true, onChange: (IncludeOnlyFilteredRows) => {
+                                onChange({
+                                    ...rowSummary,
+                                    IncludeOnlyFilteredRows,
+                                });
+                            }, children: "Include Only Filtered Rows" }) })] }), (0, jsx_runtime_1.jsxs)(Card_1.Card, { shadow: false, className: "twa:flex-1 twa:min-h-0 twa:overflow-hidden twa:flex twa:flex-col", children: [(0, jsx_runtime_1.jsxs)(Card_1.Card.Title, { children: [(0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:font-medium", children: "Column Aggregations" }), (0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:text-xs twa:opacity-70 twa:font-normal twa:max-w-[520px]", children: "Select columns and choose an aggregation function for each" })] }), (0, jsx_runtime_1.jsx)(Card_1.Card.Body, { className: "twa:flex-1 twa:min-h-0 twa:overflow-hidden twa:p-1", children: (0, jsx_runtime_1.jsx)(ValueSelector_1.ValueSelector, { style: { minHeight: 0, maxHeight: '100%' }, showFilterInput: true, toggleSelectionOnRowClick: false, filter: Utilities_1.columnFilter, toIdentifier: (column) => column.columnId, toLabel: (option) => option.friendlyName ?? option.columnId, options: columns, optionLayout: "label-beside-checkbox", toListLabel: (column) => {
+                                const label = column.friendlyName ?? column.columnId;
+                                const disabled = !(column.columnId in (rowSummary.ColumnsMap ?? {}));
+                                if (disabled) {
+                                    return ((0, jsx_runtime_1.jsxs)(Flex_1.Flex, { alignItems: "center", className: "twa:gap-2", children: [label, (0, jsx_runtime_1.jsx)(ColumnGroupTag_1.ColumnGroupTag, { column: column }), (0, jsx_runtime_1.jsx)(NewSelect_1.SingleSelect, { disabled: true, items: [{ label: 'Select Aggregation', value: null }] })] }));
+                                }
+                                const expressionOptions = buildRowSummaryExpressionOptions(column, availableScalarExpressions, layout);
+                                const expression = rowSummary.ColumnsMap[column.columnId];
+                                return ((0, jsx_runtime_1.jsxs)(Flex_1.Flex, { children: [(0, jsx_runtime_1.jsxs)(Flex_1.Flex, { className: "twa:mr-2", alignItems: 'center', children: [label, (0, jsx_runtime_1.jsx)(ColumnGroupTag_1.ColumnGroupTag, { column: column })] }), (0, jsx_runtime_1.jsx)(NewSelect_1.SingleSelect, { value: expression, items: expressionOptions, onValueChange: (expression) => {
+                                                onChange({
+                                                    ...rowSummary,
+                                                    ColumnsMap: {
+                                                        ...rowSummary.ColumnsMap,
+                                                        [column.columnId]: expression,
+                                                    },
+                                                });
+                                            } })] }));
+                            }, value: Object.keys(rowSummary.ColumnsMap), onChange: (colIds) => {
+                                const newColumnsMap = {};
+                                colIds.forEach((colId) => {
+                                    const existing = rowSummary.ColumnsMap[colId];
+                                    if (existing) {
+                                        newColumnsMap[colId] = existing;
+                                        return;
+                                    }
+                                    const column = adaptable.api.columnApi.getColumnWithColumnId(colId);
+                                    newColumnsMap[colId] = column
+                                        ? getDefaultRowSummaryExpression(column, availableScalarExpressions, layout)
+                                        : null;
+                                });
+                                onChange({
+                                    ...rowSummary,
+                                    ColumnsMap: newColumnsMap,
+                                });
+                            } }) })] })] }));
 });
 const RowSummarySection = (props) => {
     const adaptable = (0, AdaptableContext_1.useAdaptable)();
     const { data: layout } = (0, OnePageAdaptableWizard_1.useOnePageAdaptableWizardContext)();
+    const rowSummaries = layout.RowSummaries ?? [];
     const availableScalarExpressions = React.useMemo(() => {
         const sytemExpressions = adaptable.api.internalApi
             .getQueryLanguageService()
             .getModuleExpressionFunctionsMap(ModuleConstants_1.LayoutModuleId).aggregatedScalarFunctions;
         return sytemExpressions;
     }, []);
-    return ((0, jsx_runtime_1.jsx)(Flex_1.Flex, { flexDirection: "column", className: "twa:gap-3 twa:p-3 twa:h-full", 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: "Row Summaries" }), (0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:text-xs twa:opacity-70 twa:font-normal twa:max-w-[520px]", children: "Add summary rows at the top or bottom of the grid with aggregated column values" })] }), (0, jsx_runtime_1.jsxs)(Card_1.Card.Body, { className: "twa:p-1", children: [(0, jsx_runtime_1.jsxs)(Flex_1.Flex, { className: "twa:mb-2", children: [(0, jsx_runtime_1.jsx)(Flex_1.Flex, { className: "twa:flex-1" }), (0, jsx_runtime_1.jsx)(ButtonNew_1.ButtonNew, { onClick: () => {
-                                        props.onChange({
-                                            ...layout,
-                                            RowSummaries: [
-                                                ...(layout.RowSummaries ?? []),
-                                                {
-                                                    Position: 'Top',
-                                                    ColumnsMap: {},
-                                                    IncludeOnlyFilteredRows: true,
-                                                },
-                                            ],
-                                        });
-                                    }, children: "Add Row Summary" })] }), (layout.RowSummaries ?? []).map((rowSummary, index) => {
-                            return ((0, jsx_runtime_1.jsx)(RowSummaryEditor, { onDelete: () => {
-                                    const newSummaries = [...layout.RowSummaries];
-                                    newSummaries.splice(index, 1);
-                                    props.onChange({
-                                        ...layout,
-                                        RowSummaries: newSummaries,
-                                    });
-                                }, availableScalarExpressions: availableScalarExpressions, rowSummary: rowSummary, onChange: (rowSummary) => {
-                                    const newSummaries = [...layout.RowSummaries];
-                                    newSummaries[index] = rowSummary;
-                                    props.onChange({
-                                        ...layout,
-                                        RowSummaries: newSummaries,
-                                    });
-                                } }, index));
-                        })] })] }) }));
+    const { bindCard, hasExpandedCard, expandedFillsSpace, expandedId, setExpandedId } = (0, CollapsibleWizardCard_1.useWizardCardAccordion)(null);
+    const handleAddRowSummary = () => {
+        const newIndex = rowSummaries.length;
+        props.onChange({
+            ...layout,
+            RowSummaries: [
+                ...rowSummaries,
+                {
+                    Position: 'Top',
+                    ColumnsMap: {},
+                    IncludeOnlyFilteredRows: true,
+                },
+            ],
+        });
+        setExpandedId(rowSummaryCardId(newIndex));
+    };
+    const handleDeleteRowSummary = (index) => {
+        const cardId = rowSummaryCardId(index);
+        const newSummaries = [...rowSummaries];
+        newSummaries.splice(index, 1);
+        props.onChange({
+            ...layout,
+            RowSummaries: newSummaries,
+        });
+        if (expandedId === cardId) {
+            setExpandedId(null);
+            return;
+        }
+        if (expandedId?.startsWith('row-summary-')) {
+            const expandedIndex = Number(expandedId.replace('row-summary-', ''));
+            if (!Number.isNaN(expandedIndex) && expandedIndex > index) {
+                setExpandedId(rowSummaryCardId(expandedIndex - 1));
+            }
+        }
+    };
+    return ((0, jsx_runtime_1.jsxs)(Flex_1.Box, { className: (0, utils_1.cn)((0, CollapsibleWizardCard_1.getWizardAccordionSectionClassName)(hasExpandedCard, expandedFillsSpace), 'twa:p-3'), children: [(0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:text-xs twa:opacity-70 twa:mb-2 twa:max-w-[520px] twa:shrink-0", children: "Add summary rows at the top or bottom of the grid with aggregated column values" }), (0, jsx_runtime_1.jsx)(Flex_1.Flex, { className: "twa:justify-end twa:mb-2 twa:shrink-0", children: (0, jsx_runtime_1.jsx)(ButtonNew_1.ButtonNew, { onClick: handleAddRowSummary, children: "Add Row Summary" }) }), (0, jsx_runtime_1.jsx)(Flex_1.Flex, { flexDirection: "column", className: "twa:gap-3 twa:min-h-0", children: rowSummaries.map((rowSummary, index) => {
+                    const cardBinding = bindCard(rowSummaryCardId(index), { fillAvailable: true });
+                    return ((0, jsx_runtime_1.jsx)(CollapsibleWizardCard_1.CollapsibleWizardCard, { ...cardBinding, surface: "panel", "data-name": `row-summary-${index}`, title: `Row Summary ${index + 1}`, help: "Configure position, filters, and column aggregations for this summary row", collapsedHelp: false, compactSummary: (0, jsx_runtime_1.jsx)(RowSummaryPositionTag, { position: rowSummary.Position }), headerVisual: !cardBinding.expanded ? ((0, jsx_runtime_1.jsx)(RowSummaryPositionTag, { position: rowSummary.Position })) : undefined, headerActions: (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [cardBinding.expanded ? ((0, jsx_runtime_1.jsx)(SuspendToggleButton_1.SuspendToggleButton, { iconSize: 26, className: (0, objectListActionButtonStyles_1.objectListActionButtonClassName)('suspend'), onSuspend: () => {
+                                        const newSummaries = [...rowSummaries];
+                                        newSummaries[index] = { ...rowSummary, IsSuspended: true };
+                                        props.onChange({ ...layout, RowSummaries: newSummaries });
+                                    }, onUnSuspend: () => {
+                                        const newSummaries = [...rowSummaries];
+                                        newSummaries[index] = { ...rowSummary, IsSuspended: false };
+                                        props.onChange({ ...layout, RowSummaries: newSummaries });
+                                    }, suspendableObject: rowSummary })) : null, (0, jsx_runtime_1.jsx)(SimpleButton_1.default, { icon: "delete", variant: "text", tooltip: "Delete row summary", className: (0, objectListActionButtonStyles_1.objectListActionButtonClassName)('delete'), onClick: () => handleDeleteRowSummary(index) })] }), summary: (0, jsx_runtime_1.jsx)(RowSummaryCardSummary, { rowSummary: rowSummary }), className: "twa:overflow-hidden twa:flex twa:flex-col", bodyClassName: "twa:min-h-[200px] twa:max-h-[420px] twa:overflow-hidden twa:flex twa:flex-col twa:!pt-0", children: (0, jsx_runtime_1.jsx)(RowSummaryEditorForm, { rowSummary: rowSummary, availableScalarExpressions: availableScalarExpressions, onChange: (nextRowSummary) => {
+                                const newSummaries = [...rowSummaries];
+                                newSummaries[index] = nextRowSummary;
+                                props.onChange({
+                                    ...layout,
+                                    RowSummaries: newSummaries,
+                                });
+                            } }) }, rowSummaryCardId(index)));
+                }) })] }));
 };
 exports.RowSummarySection = RowSummarySection;

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

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { AdaptableApi } from '../../../Api/AdaptableApi';
-import { BadgePillStyle } from '../../../AdaptableState/StyledColumnState';
+import { BadgePillStyle } from '../../../AdaptableState/StyledColumns/BadgeStyle';
 export interface BadgePillStyleEditorProps {
     api: AdaptableApi;
     /** Current pill style (may be undefined / partial). */

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

@@ -61,32 +61,47 @@ const getBadgeDefinitionSummaryItems = (badge, api) => {
     items.push({ label: 'Rule', value: rule });
     items.push({ label: 'Shape', value: badge.Shape ?? 'Rounded' });
     items.push(...(0, BadgePillStyleEditor_1.getBadgePillStyleSummaryItems)(badge.PillStyle));
-    if (badge.Icon) {
+    const iconProps = badge.IconProperties;
+    if (iconProps?.Icon) {
         items.push({
             label: 'Icon',
-            value: 'name' in badge.Icon ? badge.Icon.name : 'Custom',
-            icon: badge.Icon,
+            value: 'name' in iconProps.Icon ? iconProps.Icon.name : 'Custom',
+            icon: iconProps.Icon,
         });
     }
-    if (badge.IconOnly) {
+    if (iconProps?.IconOnly) {
         items.push({ label: 'Icon Only', value: 'Yes' });
     }
-    if (badge.Icon && badge.IconPosition) {
-        items.push({ label: 'Icon Position', value: badge.IconPosition });
+    if (iconProps?.Icon && iconProps.Position) {
+        items.push({ label: 'Icon Position', value: iconProps.Position });
     }
-    if (typeof badge.IconGap === 'number') {
-        items.push({ label: 'Icon Gap', value: `${badge.IconGap}px` });
+    if (typeof iconProps?.Gap === 'number') {
+        items.push({ label: 'Icon Gap', value: `${iconProps.Gap}px` });
     }
     return items;
 };
-const BadgePreview = ({ badge, density, previewValue }) => ((0, jsx_runtime_1.jsx)(Badge_1.Badge, { pillStyle: badge.PillStyle, icon: badge.Icon, iconPosition: badge.IconPosition, shape: badge.Shape, density: density, iconGap: badge.IconGap, children: badge.IconOnly ? '' : previewValue }));
+const BadgePreview = ({ badge, density, previewValue }) => ((0, jsx_runtime_1.jsx)(Badge_1.Badge, { pillStyle: badge.PillStyle, icon: badge.IconProperties?.Icon, iconPosition: badge.IconProperties?.Position, shape: badge.Shape, density: density, iconGap: badge.IconProperties?.Gap, children: badge.IconProperties?.IconOnly ? '' : previewValue }));
 const BadgeCardSummary = ({ badge, api }) => ((0, jsx_runtime_1.jsx)(CollapsibleWizardCard_1.CollapsibleWizardValueSummary, { value: (0, SummaryColorTag_1.renderSummaryLabelValueTags)(getBadgeDefinitionSummaryItems(badge, api)) }));
 const BadgeEditorForm = (props) => {
     const { api } = (0, OnePageAdaptableWizard_1.useOnePageAdaptableWizardContext)();
     const { badge, columnId, onChange } = props;
     const predicateDefs = api.styledColumnApi.internalApi.getBadgePredicateDefsForColumn(columnId);
     const currentShape = badge.Shape ?? 'Rounded';
-    const hasIcon = Boolean(badge.Icon);
+    const iconProps = badge.IconProperties;
+    const hasIcon = Boolean(iconProps?.Icon);
+    const updateIconProperties = (patch) => {
+        const next = {
+            ...(iconProps ?? { Icon: undefined }),
+            ...patch,
+        };
+        if (!next.Icon) {
+            const cleaned = { ...badge };
+            delete cleaned.IconProperties;
+            onChange(cleaned);
+            return;
+        }
+        onChange({ ...badge, IconProperties: next });
+    };
     return ((0, jsx_runtime_1.jsxs)(Flex_1.Flex, { flexDirection: "column", className: "twa:gap-3 twa:p-2", 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: "Shape" }), (0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:text-xs twa:opacity-70 twa:font-normal twa:max-w-[520px]", children: "Define shape of the corners for this badge" })] }), (0, jsx_runtime_1.jsx)(Card_1.Card.Body, { className: "twa:p-1", children: (0, jsx_runtime_1.jsx)(Radio_1.RadioGroup, { orientation: "horizontal", name: `ab-badge-shape-${columnId}`, value: currentShape, onRadioChange: (value) => onChange({ ...badge, Shape: value }), className: "twa:gap-3", children: SHAPE_CHOICES.map((choice) => ((0, jsx_runtime_1.jsx)(Radio_1.default, { value: choice.value, children: choice.label }, choice.value))) }) })] }), (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: "Style" }), (0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:text-xs twa:opacity-70 twa:font-normal twa:max-w-[520px]", children: "Colours and font styling for the badge pill" })] }), (0, jsx_runtime_1.jsx)(Card_1.Card.Body, { className: "twa:p-1", children: (0, jsx_runtime_1.jsx)(BadgePillStyleEditor_1.BadgePillStyleEditor, { embedded: true, api: api, value: badge.PillStyle, onChange: (next) => {
                                 if (next) {
                                     onChange({ ...badge, PillStyle: next });
@@ -104,31 +119,23 @@ const BadgeEditorForm = (props) => {
                             }, onClear: () => onChange({
                                 ...badge,
                                 Predicate: undefined,
-                            }) })) : ((0, jsx_runtime_1.jsx)(ErrorBox_1.default, { children: "Select a column first" })) })] }), (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: "Icon" }), (0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:text-xs twa:opacity-70 twa:font-normal twa:max-w-[520px]", children: "Optional icon inside the badge \u2014 position and spacing apply once an icon is selected" })] }), (0, jsx_runtime_1.jsx)(Card_1.Card.Body, { className: "twa:p-1", children: (0, jsx_runtime_1.jsxs)(FormLayout_1.default, { children: [(0, jsx_runtime_1.jsx)(FormLayout_1.FormRow, { label: "Icon", children: !badge.Icon || 'name' in badge.Icon ? ((0, jsx_runtime_1.jsx)(AdaptableIconSelector_1.AdaptableIconSelector, { value: badge?.Icon && 'name' in badge.Icon ? badge.Icon.name : undefined, onChange: (iconName) => {
+                            }) })) : ((0, jsx_runtime_1.jsx)(ErrorBox_1.default, { children: "Select a column first" })) })] }), (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: "Icon" }), (0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:text-xs twa:opacity-70 twa:font-normal twa:max-w-[520px]", children: "Optional icon inside the badge \u2014 position and spacing apply once an icon is selected" })] }), (0, jsx_runtime_1.jsx)(Card_1.Card.Body, { className: "twa:p-1", children: (0, jsx_runtime_1.jsxs)(FormLayout_1.default, { children: [(0, jsx_runtime_1.jsx)(FormLayout_1.FormRow, { label: "Icon", children: !iconProps?.Icon || 'name' in iconProps.Icon ? ((0, jsx_runtime_1.jsx)(AdaptableIconSelector_1.AdaptableIconSelector, { value: iconProps?.Icon && 'name' in iconProps.Icon ? iconProps.Icon.name : undefined, onChange: (iconName) => {
                                             if (iconName) {
-                                                onChange({
-                                                    ...badge,
-                                                    Icon: {
-                                                        name: iconName,
-                                                    },
+                                                updateIconProperties({
+                                                    Icon: { name: iconName },
                                                 });
                                             }
                                             else {
-                                                onChange({
-                                                    ...badge,
-                                                    Icon: undefined,
-                                                    IconOnly: undefined,
-                                                    IconPosition: undefined,
-                                                    IconGap: undefined,
-                                                });
+                                                const cleaned = { ...badge };
+                                                delete cleaned.IconProperties;
+                                                onChange(cleaned);
                                             }
-                                        } })) : ((0, jsx_runtime_1.jsx)(AdaptableIconComponent_1.AdaptableIconComponent, { icon: badge.Icon })) }), (0, jsx_runtime_1.jsx)(FormLayout_1.FormRow, { label: "Icon Position", children: (0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:max-w-[160px]", children: (0, jsx_runtime_1.jsx)(NewSelect_1.SingleSelect, { disabled: !hasIcon, className: "twa:w-full", value: badge.IconPosition ?? 'Start', onValueChange: (v) => onChange({ ...badge, IconPosition: v }), items: [
+                                        } })) : ((0, jsx_runtime_1.jsx)(AdaptableIconComponent_1.AdaptableIconComponent, { icon: iconProps.Icon })) }), (0, jsx_runtime_1.jsx)(FormLayout_1.FormRow, { label: "Icon Position", children: (0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:max-w-[160px]", children: (0, jsx_runtime_1.jsx)(NewSelect_1.SingleSelect, { disabled: !hasIcon, className: "twa:w-full", value: iconProps?.Position ?? 'Start', onValueChange: (v) => updateIconProperties({ Position: v }), items: [
                                                 { value: 'Start', label: 'Start' },
                                                 { value: 'End', label: 'End' },
-                                            ] }) }) }), (0, jsx_runtime_1.jsx)(FormLayout_1.FormRow, { label: "Show Icon Only", children: (0, jsx_runtime_1.jsx)(CheckBox_1.CheckBox, { disabled: !hasIcon, checked: badge.IconOnly, onClick: () => onChange({ ...badge, IconOnly: !badge.IconOnly }) }) }), (0, jsx_runtime_1.jsx)(FormLayout_1.FormRow, { label: "Icon Gap", children: (0, jsx_runtime_1.jsxs)(Flex_1.Flex, { alignItems: "center", className: "twa:gap-2", children: [(0, jsx_runtime_1.jsx)(NumberInput_1.NumberInput, { disabled: !hasIcon || badge.IconOnly, value: badge.IconGap ?? '', placeholder: "auto", step: 1, min: 0, style: { width: 70 }, onChange: (value) => {
-                                                    onChange({
-                                                        ...badge,
-                                                        IconGap: typeof value === 'number' && value >= 0 ? value : undefined,
+                                            ] }) }) }), (0, jsx_runtime_1.jsx)(FormLayout_1.FormRow, { label: "Show Icon Only", children: (0, jsx_runtime_1.jsx)(CheckBox_1.CheckBox, { disabled: !hasIcon, checked: iconProps?.IconOnly, onClick: () => updateIconProperties({ IconOnly: !iconProps?.IconOnly }) }) }), (0, jsx_runtime_1.jsx)(FormLayout_1.FormRow, { label: "Icon Gap", children: (0, jsx_runtime_1.jsxs)(Flex_1.Flex, { alignItems: "center", className: "twa:gap-2", children: [(0, jsx_runtime_1.jsx)(NumberInput_1.NumberInput, { disabled: !hasIcon || iconProps?.IconOnly, value: iconProps?.Gap ?? '', placeholder: "auto", step: 1, min: 0, style: { width: 70 }, onChange: (value) => {
+                                                    updateIconProperties({
+                                                        Gap: typeof value === 'number' && value >= 0 ? value : undefined,
                                                     });
                                                 } }), (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" })] }) })] }) })] })] }));
 };
@@ -198,8 +205,7 @@ const StyledColumnBadgeSection = (props) => {
         ? api.columnApi.getColumnDataTypeForColumnId(data.ColumnId)
         : 'text';
     const previewValue = getBadgePreviewValue(dataType);
-    const initialExpandedCardId = badges.length === 1 ? badgeCardId(0) : null;
-    const { bindCard, hasExpandedCard, expandedFillsSpace, expandedId, setExpandedId } = (0, CollapsibleWizardCard_1.useWizardCardAccordion)(initialExpandedCardId);
+    const { bindCard, hasExpandedCard, expandedFillsSpace, expandedId, setExpandedId } = (0, CollapsibleWizardCard_1.useWizardCardAccordion)(null);
     const handleAddBadge = () => {
         const newIndex = badges.length;
         props.onChange({

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

@@ -13,9 +13,7 @@ export interface StyledColumnFontStyleEditorProps {
     disabled?: boolean;
     /**
      * When true, the Alignment row is omitted entirely. Used by Styled Columns
-     * that own horizontal alignment elsewhere (e.g. Percent Bar's "Auto / Left /
-     * Center / Right" controls drive `CellTextAlignment`, so showing a second
-     * Alignment row inside the font editor is confusing).
+     * that own horizontal alignment elsewhere (e.g. Badge row layout).
      */
     hideAlignment?: boolean;
 }