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

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

@@ -0,0 +1,57 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.LAYOUT_WIZARD_COLUMN_LIST_SEARCH_CLASS = exports.LAYOUT_WIZARD_COLUMN_LIST_HEADER_CLASS = exports.LAYOUT_WIZARD_COLUMN_LIST_OPTION_CLASS = void 0;
+exports.getLayoutWizardOrderedColumns = getLayoutWizardOrderedColumns;
+const tslib_1 = require("tslib");
+const ColumnApiImpl_1 = require("../../../../Api/Implementation/ColumnApiImpl");
+const ArrayExtensions_1 = tslib_1.__importDefault(require("../../../../Utilities/Extensions/ArrayExtensions"));
+const GeneralConstants_1 = require("../../../../Utilities/Constants/GeneralConstants");
+const wizardColumnListStyles_1 = require("../../../Components/wizardColumnListStyles");
+/** ValueSelector row sizing — matches Visibility and Order list rows. */
+exports.LAYOUT_WIZARD_COLUMN_LIST_OPTION_CLASS = wizardColumnListStyles_1.WIZARD_COLUMN_LIST_OPTION_CLASS;
+/** Compact list header — spacing between Select All, Show Selected Only, and search. */
+exports.LAYOUT_WIZARD_COLUMN_LIST_HEADER_CLASS = wizardColumnListStyles_1.WIZARD_COLUMN_LIST_HEADER_CLASS;
+/** Narrow search field (matches Visibility list column width, not full card width). */
+exports.LAYOUT_WIZARD_COLUMN_LIST_SEARCH_CLASS = wizardColumnListStyles_1.WIZARD_COLUMN_LIST_SEARCH_CLASS;
+/** Columns shown in Layout wizard column steps, in layout table order. */
+function getLayoutWizardOrderedColumns(adaptable, layout) {
+    const hasSelectionColumn = adaptable.api.columnApi
+        .getColumns()
+        .some((col) => col.isGeneratedSelectionColumn);
+    const allColumns = adaptable.api.columnApi
+        .getUIAvailableColumns()
+        .filter((col) => !col.isGeneratedRowGroupColumn)
+        .filter((col) => !col.isGeneratedPivotResultColumn)
+        .filter((col) => !col.isGeneratedSelectionColumn);
+    if (layout.RowGroupedColumns && layout.RowGroupedColumns.length > 0) {
+        if (layout.RowGroupDisplayType === 'single') {
+            allColumns.unshift((0, ColumnApiImpl_1.generateAutoRowGroupSingleColumn)());
+        }
+        else if (layout.RowGroupDisplayType === 'multi') {
+            [...layout.RowGroupedColumns].reverse().forEach((col) => {
+                const groupCol = (0, ColumnApiImpl_1.generateAutoRowGroupColumnForColumn)(adaptable.api.columnApi.getColumnWithColumnId(col));
+                allColumns.unshift(groupCol);
+            });
+        }
+    }
+    if (adaptable.api.gridApi.isTreeDataGrid() &&
+        !allColumns.find((col) => col.columnId === GeneralConstants_1.AG_GRID_GROUPED_COLUMN)) {
+        allColumns.unshift((0, ColumnApiImpl_1.generateAutoTreeSingleColumn)());
+    }
+    if (hasSelectionColumn) {
+        allColumns.unshift((0, ColumnApiImpl_1.generateSelectionColumn)());
+    }
+    const colIdToCol = allColumns.reduce((acc, col) => {
+        if (col) {
+            acc[col.columnId] = col;
+        }
+        return acc;
+    }, {});
+    let tableColumns = layout.TableColumns ?? [];
+    if (hasSelectionColumn && !tableColumns.includes(GeneralConstants_1.AG_GRID_SELECTION_COLUMN)) {
+        tableColumns = [GeneralConstants_1.AG_GRID_SELECTION_COLUMN, ...tableColumns];
+    }
+    return ArrayExtensions_1.default.sortArrayWithOrder(allColumns.map((col) => col.columnId), tableColumns, { sortUnorderedItems: false })
+        .map((colId) => colIdToCol[colId])
+        .filter(Boolean);
+}

package/src/View/License/LicenseWatermark.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.LicenseWatermark=void 0;const e=require("tslib"),r=require("react/jsx-runtime"),t=e.__importStar(require("react")),o=require("../../components/Logo"),n=require("../../components/Flex"),i={border:"1px solid var(--ab-color-error)",padding:"5px",fontWeight:600,margin:"5px",fontSize:"14px",alignItems:"center",color:"var(--ab-color-foreground)",background:"var(--ab-color-background)"},s=e=>{const r=[["display","none"],["opacity","0"],["position","absolute"],["position","fixed"],["position","relative"],["visibility","hidden"]];for(const[t,o]of r)if(e.style[t]===o)return!1;return!0},l=e=>{const l=t.useRef(null);return t.useEffect(()=>{const e=setInterval(()=>{l.current?.isConnected||alert("It is not allowed to remove the Adaptable watermark."),s(l.current)||alert("It is not allowed to modify the Adaptable watermark."),l?.current?.style&&(l.current.style.border=i.border,l.current.style.padding=i.padding,l.current.style.fontWeight=`${i.fontWeight}`,l.current.style.margin=i.margin,l.current.style.fontSize=i.fontSize,l.current.style.color=i.color,l.current.style.background=i.background,l.current.style.display="flex",l.current.style.position="static",l.current.style.opacity="1",l.current.style.visibility="visible")},5e3);return()=>clearTimeout(e)},[]),(0,r.jsxs)(n.Flex,{style:i,ref:l,children:[(0,r.jsx)(o.Logo,{style:{marginRight:10}}),(0,r.jsx)("div",{children:e.children})]})};exports.LicenseWatermark=l;
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.LicenseWatermark=void 0;const e=require("tslib"),r=require("react/jsx-runtime"),t=e.__importStar(require("react")),o=require("../../components/Logo"),n=require("../../components/Flex"),i={border:"1px solid red",padding:"5px",fontWeight:600,margin:"5px",fontSize:"14px",alignItems:"center",color:"var(--ab-color-foreground)",background:"var(--ab-color-background)"},s=e=>{const r=[["display","none"],["opacity","0"],["position","absolute"],["position","fixed"],["position","relative"],["visibility","hidden"]];for(const[t,o]of r)if(e.style[t]===o)return!1;return!0},l=e=>{const l=t.useRef(null);return t.useEffect(()=>{const e=setInterval(()=>{l.current?.isConnected||alert("It is not allowed to remove the Adaptable watermark."),s(l.current)||alert("It is not allowed to modify the Adaptable watermark."),l?.current?.style&&(l.current.style.border=i.border,l.current.style.padding=i.padding,l.current.style.fontWeight=`${i.fontWeight}`,l.current.style.margin=i.margin,l.current.style.fontSize=i.fontSize,l.current.style.color=i.color,l.current.style.background=i.background,l.current.style.display="flex",l.current.style.position="static",l.current.style.opacity="1",l.current.style.visibility="visible")},5e3);return()=>clearTimeout(e)},[]),(0,r.jsxs)(n.Flex,{style:i,ref:l,children:[(0,r.jsx)(o.Logo,{style:{marginRight:10}}),(0,r.jsx)("div",{children:e.children})]})};exports.LicenseWatermark=l;

package/src/View/NamedQuery/Wizard/NamedQueryExpressionWizardSection.d.ts

@@ -5,5 +5,5 @@ export interface NamedQueryExpressionWizardSectionProps {
     onChange: (data: NamedQuery) => void;
 }
 export declare const isValidNamedQueryExpression: (data: NamedQuery, api: AdaptableApi) => string | true;
-export declare const renderNamedQueryExpressionSummary: (data: NamedQuery) => React.JSX.Element;
+export declare const renderNamedQueryExpressionSummary: (data: NamedQuery, api: AdaptableApi) => React.JSX.Element;
 export declare const NamedQueryExpressionWizardSection: (props: NamedQueryExpressionWizardSectionProps) => React.JSX.Element;

package/src/View/NamedQuery/Wizard/NamedQueryExpressionWizardSection.js

@@ -19,8 +19,7 @@ const isValidNamedQueryExpression = (data, api) => {
     return valid;
 };
 exports.isValidNamedQueryExpression = isValidNamedQueryExpression;
-const renderNamedQueryExpressionSummary = (data) => {
-    const { api } = (0, OnePageAdaptableWizard_1.useOnePageAdaptableWizardContext)();
+const renderNamedQueryExpressionSummary = (data, api) => {
     return ((0, jsx_runtime_1.jsxs)(Flex_1.Box, { className: "twa:text-2", children: ["Expression: ", (0, jsx_runtime_1.jsx)(Tag_1.Tag, { children: api.internalApi.getAdaptableQueryExpressionText(data) })] }));
 };
 exports.renderNamedQueryExpressionSummary = renderNamedQueryExpressionSummary;

package/src/View/Note/NoteEditor.js

@@ -8,7 +8,7 @@ const React = tslib_1.__importStar(require("react"));
 const Textarea_1 = tslib_1.__importDefault(require("../../components/Textarea"));
 const SimpleButton_1 = tslib_1.__importDefault(require("../../components/SimpleButton"));
 const AdaptableContext_1 = require("../AdaptableContext");
-const clsx_1 = tslib_1.__importDefault(require("clsx"));
+const utils_1 = require("../../lib/utils");
 const NoteEditor = ({ note, onNoteChange, onClose, editMode, isReadonly }) => {
     const { api } = (0, AdaptableContext_1.useAdaptable)();
     const showPopupCloseButton = api.optionsApi.getNoteOptions()?.showPopupCloseButton ?? true;
@@ -29,7 +29,7 @@ const NoteEditor = ({ note, onNoteChange, onClose, editMode, isReadonly }) => {
     if (note === undefined || note === null) {
         return null;
     }
-    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(Textarea_1.default, { readOnly: isReadonly, ref: textAreaRef, className: (0, clsx_1.default)('twa:min-w-[180px] twa:min-h-[120px] twa:w-full', {
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(Textarea_1.default, { readOnly: isReadonly, ref: textAreaRef, className: (0, utils_1.cn)('twa:min-w-[180px] twa:min-h-[120px] twa:w-full', {
                     'twa:pr-[30px]': showPopupCloseButton,
                     'twa:pr-0': !showPopupCloseButton,
                 }), value: liveValue, onBlur: () => onClose(), onKeyDown: (event) => {

package/src/View/QuickSearch/QuickSearchPopup.js

@@ -14,10 +14,9 @@ const Tabs_1 = require("../../components/Tabs");
 const StringExtensions_1 = tslib_1.__importDefault(require("../../Utilities/Extensions/StringExtensions"));
 const useQuickSearchDebounced_1 = require("./useQuickSearchDebounced");
 const QuickSearchInput_1 = require("./QuickSearchInput");
-const HelpBlock_1 = tslib_1.__importDefault(require("../../components/HelpBlock"));
 const Card_1 = require("../../components/Card");
 const QuickSearchStyleHelper_1 = require("../../Utilities/Helpers/QuickSearchStyleHelper");
-const QuickSearchStyleEditor = ({ api, helpText, headerText, style, updateStyle }) => ((0, jsx_runtime_1.jsxs)(Flex_1.Flex, { flexDirection: "column", className: "twa:gap-2", children: [(0, jsx_runtime_1.jsx)(HelpBlock_1.default, { className: "twa:text-2", children: helpText }), (0, jsx_runtime_1.jsx)(StyleComponent_1.StyleComponent, { headless: true, hidePreview: true, className: "twa:h-full twa:flex-1 twa:rounded-none", headerText: headerText, api: api, Style: style, UpdateStyle: updateStyle })] }));
+const QuickSearchStyleEditor = ({ api, helpText, headerText, style, updateStyle }) => ((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: headerText }), (0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:text-xs twa:opacity-70 twa:font-normal twa:max-w-[520px]", children: helpText })] }), (0, jsx_runtime_1.jsx)(Card_1.Card.Body, { className: "twa:p-1", children: (0, jsx_runtime_1.jsx)(StyleComponent_1.StyleComponent, { headless: true, hidePreview: true, className: "twa:h-full twa:flex-1 twa:rounded-none", api: api, Style: style, UpdateStyle: updateStyle }) })] }));
 const QuickSearchPopupComponent = (props) => {
     const [searchText, search] = (0, useQuickSearchDebounced_1.useQuickSearchDebounced)(props);
     const [state, setState] = (0, react_1.useState)({
@@ -29,7 +28,7 @@ const QuickSearchPopupComponent = (props) => {
             checked;
     };
     const isServerSideRowModel = props.api.agGridApi.getGridOption('rowModelType') === 'serverSide';
-    return ((0, jsx_runtime_1.jsx)(PopupPanel_1.PopupPanel, { headerText: props.moduleInfo.FriendlyName, glyphicon: props.moduleInfo.Glyph, infoLink: props.moduleInfo.HelpPage, infoLinkDisabled: !props.api.internalApi.isDocumentationLinksDisplayed(), bodyClassName: "twa:gap-3 twa:flex twa:flex-col", children: (0, jsx_runtime_1.jsxs)(Flex_1.Flex, { flexDirection: "column", className: "twa:h-full twa:gap-4", children: [(0, jsx_runtime_1.jsxs)(Card_1.Card, { children: [(0, jsx_runtime_1.jsx)(Card_1.Card.Title, { children: "Search Text" }), (0, jsx_runtime_1.jsx)(Card_1.Card.Body, { className: "twa:p-1 twa:w-fit", children: (0, jsx_runtime_1.jsx)(QuickSearchInput_1.QuickSearchInput, {}) })] }), (0, jsx_runtime_1.jsxs)(Card_1.Card, { children: [(0, jsx_runtime_1.jsx)(Card_1.Card.Title, { children: "Behaviour" }), (0, jsx_runtime_1.jsxs)(Card_1.Card.Body, { className: "twa:p-1", gap: 2, children: [(0, jsx_runtime_1.jsxs)(HelpBlock_1.default, { className: "twa:text-2 twa:w-fit", children: ["Filter Grid when searching to only show rows with matching cells; ", (0, jsx_runtime_1.jsx)("b", { children: "use with care" }), " as can cause performance issues"] }), (0, jsx_runtime_1.jsx)(CheckBox_1.CheckBox, { "data-name": "filter-quick-search-results", value: "existing", checked: state.RunQueryAfterQuickSearch, disabled: StringExtensions_1.default.IsNotNullOrEmpty(searchText), onChange: onQuickSearchBehaviourChange, children: "Filter using Quick Search Results" })] })] }), (0, jsx_runtime_1.jsxs)(Card_1.Card, { children: [(0, jsx_runtime_1.jsx)(Card_1.Card.Title, { children: "Matching Styles" }), (0, jsx_runtime_1.jsx)(Card_1.Card.Body, { className: "twa:p-0", children: isServerSideRowModel ? ((0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:p-2", children: (0, jsx_runtime_1.jsx)(QuickSearchStyleEditor, { api: props.api, helpText: "Server-side row model: styles the whole matching cell.", headerText: "Cell Matching Style", style: props.QuickSearchCellMatchStyle, updateStyle: props.onSetCellMatchingStyle }) })) : ((0, jsx_runtime_1.jsxs)(Tabs_1.Tabs, { defaultValue: "text", className: "twa:min-h-0", children: [(0, jsx_runtime_1.jsx)(Tabs_1.Tabs.Tab, { value: "text", children: "Text Match" }), (0, jsx_runtime_1.jsx)(Tabs_1.Tabs.Tab, { value: "current", children: "Current Match" }), (0, jsx_runtime_1.jsx)(Tabs_1.Tabs.Tab, { value: "cell", children: "Cell Match" }), (0, jsx_runtime_1.jsx)(Tabs_1.Tabs.Content, { value: "text", children: (0, jsx_runtime_1.jsx)(QuickSearchStyleEditor, { api: props.api, helpText: "Highlights the matching text within each cell (AG Grid Find).", headerText: "Text Matching Style", style: props.QuickSearchTextMatchStyle, updateStyle: props.onSetTextMatchingStyle }) }), (0, jsx_runtime_1.jsx)(Tabs_1.Tabs.Content, { value: "current", children: (0, jsx_runtime_1.jsx)(QuickSearchStyleEditor, { api: props.api, helpText: "Applied to the active match when cycling through results.", headerText: "Current Match Style", style: props.QuickSearchCurrentTextMatchStyle, updateStyle: props.onSetCurrentTextMatchingStyle }) }), (0, jsx_runtime_1.jsx)(Tabs_1.Tabs.Content, { value: "cell", children: (0, jsx_runtime_1.jsx)(QuickSearchStyleEditor, { api: props.api, helpText: "Optional background for whole matching cells. When unset, only matching text is highlighted.", headerText: "Cell Matching Style", style: props.QuickSearchCellMatchStyle, updateStyle: props.onSetCellMatchingStyle }) })] })) })] })] }) }));
+    return ((0, jsx_runtime_1.jsx)(PopupPanel_1.PopupPanel, { headerText: props.moduleInfo.FriendlyName, glyphicon: props.moduleInfo.Glyph, infoLink: props.moduleInfo.HelpPage, infoLinkDisabled: !props.api.internalApi.isDocumentationLinksDisplayed(), bodyClassName: "twa:gap-3 twa:flex twa:flex-col", children: (0, jsx_runtime_1.jsxs)(Flex_1.Flex, { flexDirection: "column", className: "twa:h-full twa:gap-3", 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: "Search Text" }), (0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:text-xs twa:opacity-70 twa:font-normal twa:max-w-[520px]", children: "Enter the text to find across visible grid cells" })] }), (0, jsx_runtime_1.jsx)(Card_1.Card.Body, { className: "twa:p-1 twa:w-fit", children: (0, jsx_runtime_1.jsx)(QuickSearchInput_1.QuickSearchInput, {}) })] }), (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: "Behaviour" }), (0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:text-xs twa:opacity-70 twa:font-normal twa:max-w-[520px]", children: "Filter the grid to matching rows only when searching; use with care as this can affect performance" })] }), (0, jsx_runtime_1.jsx)(Card_1.Card.Body, { className: "twa:p-1", gap: 2, children: (0, jsx_runtime_1.jsx)(CheckBox_1.CheckBox, { "data-name": "filter-quick-search-results", value: "existing", checked: state.RunQueryAfterQuickSearch, disabled: StringExtensions_1.default.IsNotNullOrEmpty(searchText), onChange: onQuickSearchBehaviourChange, children: "Filter using Quick Search Results" }) })] }), (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: "Matching Styles" }), (0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:text-xs twa:opacity-70 twa:font-normal twa:max-w-[520px]", children: "Configure colours and fonts for how search matches appear in the grid" })] }), (0, jsx_runtime_1.jsx)(Card_1.Card.Body, { className: "twa:p-1", children: isServerSideRowModel ? ((0, jsx_runtime_1.jsx)(QuickSearchStyleEditor, { api: props.api, helpText: "Server-side row model: styles the whole matching cell.", headerText: "Cell Matching Style", style: props.QuickSearchCellMatchStyle, updateStyle: props.onSetCellMatchingStyle })) : ((0, jsx_runtime_1.jsxs)(Tabs_1.Tabs, { defaultValue: "text", className: "twa:min-h-0", children: [(0, jsx_runtime_1.jsx)(Tabs_1.Tabs.Tab, { value: "text", children: "Text Match" }), (0, jsx_runtime_1.jsx)(Tabs_1.Tabs.Tab, { value: "current", children: "Current Match" }), (0, jsx_runtime_1.jsx)(Tabs_1.Tabs.Tab, { value: "cell", children: "Cell Match" }), (0, jsx_runtime_1.jsx)(Tabs_1.Tabs.Content, { value: "text", children: (0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:pt-2", children: (0, jsx_runtime_1.jsx)(QuickSearchStyleEditor, { api: props.api, helpText: "Highlights the matching text within each cell (AG Grid Find).", headerText: "Text Matching Style", style: props.QuickSearchTextMatchStyle, updateStyle: props.onSetTextMatchingStyle }) }) }), (0, jsx_runtime_1.jsx)(Tabs_1.Tabs.Content, { value: "current", children: (0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:pt-2", children: (0, jsx_runtime_1.jsx)(QuickSearchStyleEditor, { api: props.api, helpText: "Applied to the active match when cycling through results.", headerText: "Current Match Style", style: props.QuickSearchCurrentTextMatchStyle, updateStyle: props.onSetCurrentTextMatchingStyle }) }) }), (0, jsx_runtime_1.jsx)(Tabs_1.Tabs.Content, { value: "cell", children: (0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:pt-2", children: (0, jsx_runtime_1.jsx)(QuickSearchStyleEditor, { api: props.api, helpText: "Optional background for whole matching cells. When unset, only matching text is highlighted.", headerText: "Cell Matching Style", style: props.QuickSearchCellMatchStyle, updateStyle: props.onSetCellMatchingStyle }) }) })] })) })] })] }) }));
 };
 function mapStateToProps(state, ownProps) {
     const quickSearch = state.QuickSearch;

package/src/View/Schedule/Wizard/ScheduleScheduleWizard.js

@@ -160,6 +160,6 @@ const ScheduleBuilderWizard = (props) => {
         commit({ customCron: value, preset: 'custom' });
     };
     const timeValue = `${`${hour}`.padStart(2, '0')}:${`${minute}`.padStart(2, '0')}`;
-    return ((0, jsx_runtime_1.jsx)(Flex_1.Box, { "data-name": "schedule-setup", 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: "Schedule" }), (0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:text-xs twa:opacity-70 twa:font-normal twa:max-w-[520px]", children: "Configure when this should run" })] }), (0, jsx_runtime_1.jsx)(Card_1.Card.Body, { children: (0, jsx_runtime_1.jsxs)(FormLayout_1.default, { children: [(0, jsx_runtime_1.jsxs)(FormLayout_1.FormRow, { label: "Frequency", children: [(0, jsx_runtime_1.jsx)(Radio_1.default, { "data-name": "frequency-recurring", className: "twa:mr-2", value: "recurring", checked: !isOneOff, onChange: (checked) => checked && handleFrequencyChange(false), children: "Recurring" }), (0, jsx_runtime_1.jsx)(Radio_1.default, { "data-name": "frequency-one-off", checked: isOneOff, value: "oneoff", onChange: (checked) => checked && handleFrequencyChange(true), children: "One-off" })] }), isOneOff ? ((0, jsx_runtime_1.jsx)(FormLayout_1.FormRow, { label: "Date", children: (0, jsx_runtime_1.jsx)(AdaptableInput_1.default, { "data-name": "one-off-date", className: "twa:w-[300px]", type: "date", placeholder: "Date", onChange: handleOneOffDateChange, value: oneOffDate }) })) : ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(FormLayout_1.FormRow, { label: "Pattern", children: (0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:max-w-[300px]", children: (0, jsx_runtime_1.jsx)(NewSelect_1.SingleSelect, { className: "twa:w-full", "data-name": "recurrence-preset", items: PRESET_OPTIONS, value: preset, placeholder: "Select pattern", onValueChange: handlePresetChange }) }) }), preset === 'selectedDays' && ((0, jsx_runtime_1.jsx)(FormLayout_1.FormRow, { label: "Days", children: daysMap.map((day) => ((0, jsx_runtime_1.jsx)(CheckBox_1.CheckBox, { "data-name": `day-${day.value}`, className: "twa:ml-2 twa:w-1/3", value: day.value, checked: selectedDays.includes(day.value), onChange: (checked) => handleDayChange(checked, day.value), children: day.label }, day.value))) })), preset === 'monthly' && ((0, jsx_runtime_1.jsx)(FormLayout_1.FormRow, { label: "Day of month", children: (0, jsx_runtime_1.jsx)(AdaptableInput_1.default, { "data-name": "day-of-month", className: "twa:w-[120px]", type: "number", min: 1, max: 31, value: dayOfMonth, onChange: handleDayOfMonthChange }) })), preset === 'custom' && ((0, jsx_runtime_1.jsx)(FormLayout_1.FormRow, { label: "Cron expression", children: (0, jsx_runtime_1.jsx)(AdaptableInput_1.default, { "data-name": "custom-cron", className: "twa:w-[300px]", placeholder: "minute hour day month weekday", value: customCron, onChange: handleCustomCronChange }) }))] })), (0, jsx_runtime_1.jsx)(FormLayout_1.FormRow, { label: "Time", children: (0, jsx_runtime_1.jsx)(AdaptableInput_1.default, { "data-name": "time", className: "twa:w-[300px]", value: timeValue, type: "time", onChange: handleTimeChange }) })] }) })] }) }));
+    return ((0, jsx_runtime_1.jsx)(Flex_1.Box, { "data-name": "schedule-setup", 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: "Schedule" }), (0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:text-xs twa:opacity-70 twa:font-normal twa:max-w-[520px]", children: "Configure when this should run" })] }), (0, jsx_runtime_1.jsx)(Card_1.Card.Body, { children: (0, jsx_runtime_1.jsxs)(FormLayout_1.default, { children: [(0, jsx_runtime_1.jsxs)(FormLayout_1.FormRow, { label: "Frequency", children: [(0, jsx_runtime_1.jsx)(Radio_1.default, { "data-name": "frequency-recurring", className: "twa:mr-2", value: "recurring", checked: !isOneOff, onChange: (checked) => checked && handleFrequencyChange(false), children: "Recurring" }), (0, jsx_runtime_1.jsx)(Radio_1.default, { "data-name": "frequency-one-off", checked: isOneOff, value: "oneoff", onChange: (checked) => checked && handleFrequencyChange(true), children: "One-off" })] }), isOneOff ? ((0, jsx_runtime_1.jsx)(FormLayout_1.FormRow, { label: "Date", children: (0, jsx_runtime_1.jsx)(AdaptableInput_1.default, { "data-name": "one-off-date", className: "twa:w-[300px]", type: "date", placeholder: "Date", onChange: handleOneOffDateChange, value: oneOffDate }) })) : ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(FormLayout_1.FormRow, { label: "Pattern", children: (0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:max-w-[300px]", children: (0, jsx_runtime_1.jsx)(NewSelect_1.SingleSelect, { className: "twa:w-full", "data-name": "recurrence-preset", items: PRESET_OPTIONS, value: preset, placeholder: "Select pattern", onValueChange: handlePresetChange }) }) }), preset === 'selectedDays' && ((0, jsx_runtime_1.jsx)(FormLayout_1.FormRow, { label: "Days", children: daysMap.map((day) => ((0, jsx_runtime_1.jsx)(CheckBox_1.CheckBox, { "data-name": `day-${day.value}`, className: "twa:ml-2 twa:w-1/3", value: day.value, checked: selectedDays.includes(day.value), onChange: (checked) => handleDayChange(checked, day.value), children: day.label }, day.value))) })), preset === 'monthly' && ((0, jsx_runtime_1.jsx)(FormLayout_1.FormRow, { label: "Day of month", children: (0, jsx_runtime_1.jsx)(AdaptableInput_1.default, { "data-name": "day-of-month", className: "twa:w-[120px]", type: "number", min: 1, max: 31, value: dayOfMonth, onChange: handleDayOfMonthChange }) })), preset === 'custom' && ((0, jsx_runtime_1.jsx)(FormLayout_1.FormRow, { label: "Cron expression", children: (0, jsx_runtime_1.jsx)(AdaptableInput_1.default, { "data-name": "custom-cron", className: "twa:w-[300px]", placeholder: "minute hour day month weekday", value: customCron, onChange: handleCustomCronChange }) }))] })), (isOneOff || preset !== 'custom') && ((0, jsx_runtime_1.jsx)(FormLayout_1.FormRow, { label: "Time", children: (0, jsx_runtime_1.jsx)(AdaptableInput_1.default, { "data-name": "time", className: "twa:w-[300px]", value: timeValue, type: "time", onChange: handleTimeChange }) }))] }) })] }) }));
 };
 exports.ScheduleBuilderWizard = ScheduleBuilderWizard;

package/src/View/Shortcut/Wizard/ShortcutSettingsWizard.js

@@ -81,6 +81,6 @@ const ShortcutSettingsWizard = (props) => {
             result,
         };
     }, [shortcut.ShortcutOperation, shortcut.ShortcutValue]);
-    return ((0, jsx_runtime_1.jsx)(Flex_1.Box, { "data-name": "shortcut-column-settings", children: (0, jsx_runtime_1.jsxs)(Flex_1.Flex, { flexDirection: "column", className: "twa:gap-3 twa:p-3", 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: "Name" }), (0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:text-xs twa:opacity-70 twa:font-normal twa:max-w-[520px]", children: "Provide a unique name for the Shortcut" })] }), (0, jsx_runtime_1.jsx)(Card_1.Card.Body, { className: "twa:p-1", children: (0, jsx_runtime_1.jsx)(Input_1.default, { "data-name": "shortcut-name", className: "twa:max-w-[300px] twa:w-full", onChange: handleNameChange, placeholder: "Enter Name", value: shortcut.Name ?? '' }) })] }), (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: "Key" }), (0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:text-xs twa:opacity-70 twa:font-normal twa:max-w-[520px]", children: "Keyboard key that, when pressed, triggers the Shortcut" })] }), (0, jsx_runtime_1.jsx)(Card_1.Card.Body, { className: "twa:p-1", children: (0, jsx_runtime_1.jsx)(NewSelect_1.SingleSelect, { "data-name": "shortcut-key", ariaLabel: "Select Key", placeholder: "Select Key", items: optionKeys, className: "twa:max-w-[300px]", onValueChange: (key) => handleKeyChange(key), value: shortcut.ShortcutKey || undefined }) })] }), (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: "Operation" }), (0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:text-xs twa:opacity-70 twa:font-normal twa:max-w-[520px]", children: "Mathematical operation performed on the cell's current value" })] }), (0, jsx_runtime_1.jsx)(Card_1.Card.Body, { className: "twa:p-1", children: (0, jsx_runtime_1.jsx)(NewSelect_1.SingleSelect, { "data-name": "shortcut-operation", placeholder: "Select Operation", ariaLabel: "Select Operation", className: "twa:max-w-[300px]", items: optionActions, onValueChange: (operation) => handleOperationChange(operation), value: shortcut.ShortcutOperation }) })] }), (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: "Value" }), (0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:text-xs twa:opacity-70 twa:font-normal twa:max-w-[520px]", children: "Number used with the operation and current cell value to calculate the new total" })] }), (0, jsx_runtime_1.jsx)(Card_1.Card.Body, { className: "twa:p-1", children: (0, jsx_runtime_1.jsx)(Input_1.default, { "data-name": "shortcut-value", className: "twa:max-w-[300px] twa:w-full", onChange: handleOperationValueChange, placeholder: "Enter Number", type: "number", value: shortcut.ShortcutValue ?? '' }) })] }), preview ? ((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: "Example" }), (0, jsx_runtime_1.jsxs)(Flex_1.Box, { className: "twa:text-xs twa:opacity-70 twa:font-normal twa:max-w-[520px]", children: ["If a cell contains ", shortcutOperations_1.SHORTCUT_PREVIEW_EXAMPLE_VALUE, ", pressing this Shortcut would change it to:"] })] }), (0, jsx_runtime_1.jsx)(Card_1.Card.Body, { children: 'error' in preview ? ((0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:text-2 twa:text-error", children: preview.error })) : ((0, jsx_runtime_1.jsxs)(Flex_1.Box, { className: "twa:text-3 twa:font-medium", children: [preview.expression, " \u2192 ", preview.result] })) })] })) : null] }) }));
+    return ((0, jsx_runtime_1.jsx)(Flex_1.Box, { "data-name": "shortcut-column-settings", children: (0, jsx_runtime_1.jsxs)(Flex_1.Flex, { flexDirection: "column", className: "twa:gap-3 twa:p-3", 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: "Name" }), (0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:text-xs twa:opacity-70 twa:font-normal twa:max-w-[520px]", children: "Provide a unique name for the Shortcut" })] }), (0, jsx_runtime_1.jsx)(Card_1.Card.Body, { className: "twa:p-1", children: (0, jsx_runtime_1.jsx)(Input_1.default, { "data-name": "shortcut-name", className: "twa:max-w-[300px] twa:w-full", onChange: handleNameChange, placeholder: "Enter Name", value: shortcut.Name ?? '' }) })] }), (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: "Key" }), (0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:text-xs twa:opacity-70 twa:font-normal twa:max-w-[520px]", children: "Keyboard key that, when pressed, triggers the Shortcut" })] }), (0, jsx_runtime_1.jsx)(Card_1.Card.Body, { className: "twa:p-1", children: (0, jsx_runtime_1.jsx)(NewSelect_1.SingleSelect, { "data-name": "shortcut-key", ariaLabel: "Select Key", placeholder: "Select Key", items: optionKeys, className: "twa:max-w-[300px]", onValueChange: (key) => handleKeyChange(key), value: shortcut.ShortcutKey || undefined }) })] }), (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: "Operation" }), (0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:text-xs twa:opacity-70 twa:font-normal twa:max-w-[520px]", children: "Mathematical operation performed on the cell's current value" })] }), (0, jsx_runtime_1.jsx)(Card_1.Card.Body, { className: "twa:p-1", children: (0, jsx_runtime_1.jsx)(NewSelect_1.SingleSelect, { "data-name": "shortcut-operation", placeholder: "Select Operation", ariaLabel: "Select Operation", className: "twa:max-w-[300px]", items: optionActions, onValueChange: (operation) => handleOperationChange(operation), value: shortcut.ShortcutOperation }) })] }), (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: "Value" }), (0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:text-xs twa:opacity-70 twa:font-normal twa:max-w-[520px]", children: "Number used with the operation and current cell value to calculate the new total" })] }), (0, jsx_runtime_1.jsx)(Card_1.Card.Body, { className: "twa:p-1", children: (0, jsx_runtime_1.jsx)(Input_1.default, { "data-name": "shortcut-value", className: "twa:max-w-[300px] twa:w-full", onChange: handleOperationValueChange, placeholder: "Enter Number", type: "number", value: shortcut.ShortcutValue ?? '' }) })] }), preview ? ((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: "Example" }), (0, jsx_runtime_1.jsxs)(Flex_1.Box, { className: "twa:text-xs twa:opacity-70 twa:font-normal twa:max-w-[520px]", children: ["If a cell contains ", shortcutOperations_1.SHORTCUT_PREVIEW_EXAMPLE_VALUE, ", pressing this Shortcut would change it to:"] })] }), (0, jsx_runtime_1.jsx)(Card_1.Card.Body, { children: 'error' in preview ? ((0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:text-2 twa:text-destructive", children: preview.error })) : ((0, jsx_runtime_1.jsxs)(Flex_1.Box, { className: "twa:text-3 twa:font-medium", children: [preview.expression, " \u2192 ", preview.result] })) })] })) : null] }) }));
 };
 exports.ShortcutSettingsWizard = ShortcutSettingsWizard;

package/src/View/SmartEdit/SmartEditPopup.js

@@ -15,7 +15,7 @@ const PreviewResultsPanel_1 = require("../Components/PreviewResultsPanel");
 const PreviewHelper_1 = require("../../Utilities/Helpers/PreviewHelper");
 const StringExtensions_1 = require("../../Utilities/Extensions/StringExtensions");
 const Input_1 = tslib_1.__importDefault(require("../../components/Input"));
-const DropdownButton_1 = tslib_1.__importDefault(require("../../components/DropdownButton"));
+const DropdownButton_1 = require("../../components/DropdownButton");
 const SimpleButton_1 = tslib_1.__importDefault(require("../../components/SimpleButton"));
 const Flex_1 = require("../../components/Flex");
 const preventDefault = (e) => e.preventDefault();
@@ -58,7 +58,7 @@ class SmartEditPopupComponent extends React.Component {
                 if (e.key === 'Enter') {
                     this.submit();
                 }
-            }, children: [(0, jsx_runtime_1.jsxs)(Flex_1.Flex, { flexDirection: "row", "data-name": "smart-edit-operation", className: "twa:p-2", children: [(0, jsx_runtime_1.jsx)(DropdownButton_1.default, { "data-name": "smart-edit-operation-dropdown", items: operationMenuItems, columns: ['label'], onMouseDown: preventDefault, children: typeof this.props.SmartEditOperation === 'object'
+            }, children: [(0, jsx_runtime_1.jsxs)(Flex_1.Flex, { flexDirection: "row", "data-name": "smart-edit-operation", className: "twa:p-2", children: [(0, jsx_runtime_1.jsx)(DropdownButton_1.NewDropdownButton, { "data-name": "smart-edit-operation-dropdown", items: operationMenuItems, onMouseDown: preventDefault, children: typeof this.props.SmartEditOperation === 'object'
                                 ? this.props.SmartEditOperation.name
                                 : this.props.SmartEditOperation }), (0, jsx_runtime_1.jsx)(Input_1.default, { "data-name": "smart-edit-value", value: this.props.SmartEditValue.toString(), className: "twa:mx-2", type: "number", placeholder: "Enter a Number", onChange: (e) => this.onSmartEditValueChange(e) }), (0, jsx_runtime_1.jsx)(SimpleButton_1.default, { "data-name": "smart-edit-apply-button", className: "twa:mr-2", tone: this.getButtonStyle(), variant: "raised", disabled: StringExtensions_1.StringExtensions.IsNullOrEmpty(`${this.props.SmartEditValue}`) ||
                                 (this.props.PreviewInfo &&

package/src/View/SmartEdit/SmartEditViewPanel.js

@@ -17,8 +17,8 @@ const AdaptablePopover_1 = require("../AdaptablePopover");
 const UIHelper_1 = require("../UIHelper");
 const react_redux_1 = require("react-redux");
 const Flex_1 = require("../../components/Flex");
-const clsx_1 = tslib_1.__importDefault(require("clsx"));
 const NewSelect_1 = require("../../components/NewSelect");
+const utils_1 = require("../../lib/utils");
 class SmartEditViewPanelComponent extends React.Component {
     cleanupEvent;
     constructor(props) {
@@ -72,7 +72,7 @@ class SmartEditViewPanelComponent extends React.Component {
             !this.props.IsValidSelection ||
             this.props.api.layoutApi.isCurrentLayoutPivot() == true;
         const elementType = this.props.viewType === 'Toolbar' ? 'DashboardToolbar' : 'ToolPanel';
-        return ((0, jsx_runtime_1.jsxs)(Flex_1.Flex, { flexDirection: "row", className: (0, clsx_1.default)(`ab-${elementType}__SmartEdit__wrap twa:gap-1 twa:flex-row`, {
+        return ((0, jsx_runtime_1.jsxs)(Flex_1.Flex, { flexDirection: "row", className: (0, utils_1.cn)(`ab-${elementType}__SmartEdit__wrap twa:gap-1 twa:flex-row`, {
                 'twa:flex-nowrap': this.props.viewType === 'Toolbar',
                 'twa:flex-wrap': this.props.viewType !== 'Toolbar',
             }), flexWrap: this.props.viewType === 'ToolPanel' ? 'wrap' : 'nowrap', children: [(0, jsx_runtime_1.jsxs)(Flex_1.Flex, { className: "twa:gap-1", children: [(0, jsx_runtime_1.jsx)(NewSelect_1.SingleSelect, { ariaLabel: 'Select Smart Edit Operation', value: typeof this.props.SmartEditOperation === 'object'

package/src/View/StateManagement/StateManagementPopup.js

@@ -11,6 +11,6 @@ const ExportDropdown_1 = require("./components/ExportDropdown");
 const Panel_1 = tslib_1.__importDefault(require("../../components/Panel"));
 const StateManagementPopup = (props) => {
     const baseClassName = 'ab-ManageState';
-    return ((0, jsx_runtime_1.jsxs)(PopupPanel_1.PopupPanel, { className: baseClassName, headerText: props.moduleInfo.FriendlyName, glyphicon: props.moduleInfo.Glyph, infoLink: props.moduleInfo.HelpPage, infoLinkDisabled: !props.api.internalApi.isDocumentationLinksDisplayed(), children: [(0, jsx_runtime_1.jsxs)(Panel_1.default, { className: `${baseClassName}__panel twa:mr-2 twa:mb-2 twa:h-auto twa:rounded-none`, "data-name": "user-state", header: 'User State', variant: "default", children: [(0, jsx_runtime_1.jsx)(HelpBlock_1.default, { className: "twa:mb-2", children: 'Clear all current user state that has been persisted' }), (0, jsx_runtime_1.jsx)(HelpBlock_1.default, { style: { color: 'var(--ab-color-warn)' }, children: 'This will cause this window to close and any State you have previously created will be lost, and the Initial Adaptable State will be reapplied' }), (0, jsx_runtime_1.jsx)(ClearButton_1.ClearButton, { "data-name": "clear-user-state-button", tone: "info", variant: "raised", className: "twa:mt-2", accessLevel: props.accessLevel, onClick: () => props.api.stateApi.reloadInitialState(), children: "Clear User State" })] }), (0, jsx_runtime_1.jsxs)(Panel_1.default, { className: `${baseClassName}__panel twa:mt-3 twa:mr-2 twa:mb-2 twa:h-auto twa:rounded-none`, "data-name": "initial-state", header: 'Initial Adaptable State', variant: "default", children: [(0, jsx_runtime_1.jsx)(HelpBlock_1.default, { className: "twa:mt-2", children: 'Load Initial Adaptable State (from a .json file) - this will cause this window to close' }), ' ', (0, jsx_runtime_1.jsx)(LoadButton_1.LoadButton, { tone: "info", variant: "raised", className: "twa:mt-2", accessLevel: props.accessLevel, onLoad: (json) => props.api.stateApi.reloadInitialState(json), "data-name": "load-initial-state-button", children: "Load Initial Adaptable State" })] }), (0, jsx_runtime_1.jsxs)(Panel_1.default, { className: `${baseClassName}__panel twa:mt-3 twa:mr-2 twa:mb-2 twa:h-auto twa:rounded-none`, "data-name": "adaptable-state", header: 'Export Adaptable State', children: [(0, jsx_runtime_1.jsx)(HelpBlock_1.default, { className: "twa:my-2", children: 'Exports the currently persisted Adaptable State' }), ' ', (0, jsx_runtime_1.jsx)(ExportDropdown_1.ExportDropdown, { api: props.api, type: "adaptableState", className: "twa:mr-3 twa:flex-1 twa:max-w-none", columns: ['label'], "data-name": "export-adaptable-state-dropdown", children: "Select Export Destination" })] }), (0, jsx_runtime_1.jsxs)(Panel_1.default, { className: `${baseClassName}__panel twa:mt-3 twa:mr-2 twa:mb-2 twa:h-auto twa:rounded-none`, "data-name": "initial-state", header: 'Export Initial Adaptable State', variant: "default", children: [(0, jsx_runtime_1.jsx)(HelpBlock_1.default, { className: "twa:my-2", children: 'Exports the Initial Adaptable State which was provided at design time' }), ' ', (0, jsx_runtime_1.jsx)(ExportDropdown_1.ExportDropdown, { api: props.api, type: "initialState", className: "twa:mr-3 twa:flex-1 twa:max-w-none", columns: ['label'], "data-name": "export-initial-state-dropdown", children: "Select Export Destination" })] })] }));
+    return ((0, jsx_runtime_1.jsxs)(PopupPanel_1.PopupPanel, { className: baseClassName, headerText: props.moduleInfo.FriendlyName, glyphicon: props.moduleInfo.Glyph, infoLink: props.moduleInfo.HelpPage, infoLinkDisabled: !props.api.internalApi.isDocumentationLinksDisplayed(), children: [(0, jsx_runtime_1.jsxs)(Panel_1.default, { className: `${baseClassName}__panel twa:mr-2 twa:mb-2 twa:h-auto twa:rounded-none`, "data-name": "user-state", header: 'User State', variant: "default", children: [(0, jsx_runtime_1.jsx)(HelpBlock_1.default, { className: "twa:mb-2", children: 'Clear all current user state that has been persisted' }), (0, jsx_runtime_1.jsx)(HelpBlock_1.default, { className: "twa:text-warn twa:mb-2", children: 'This will cause this window to close and any State you have previously created will be lost, and the Initial Adaptable State will be reapplied' }), (0, jsx_runtime_1.jsx)(ClearButton_1.ClearButton, { "data-name": "clear-user-state-button", tone: "info", variant: "raised", accessLevel: props.accessLevel, onClick: () => props.api.stateApi.reloadInitialState(), children: "Clear User State" })] }), (0, jsx_runtime_1.jsxs)(Panel_1.default, { className: `${baseClassName}__panel twa:mt-3 twa:mr-2 twa:mb-2 twa:h-auto twa:rounded-none`, "data-name": "initial-state", header: 'Initial Adaptable State', variant: "default", children: [(0, jsx_runtime_1.jsx)(HelpBlock_1.default, { className: "twa:mb-2", children: 'Load Initial Adaptable State (from a .json file) - this will cause this window to close' }), ' ', (0, jsx_runtime_1.jsx)(LoadButton_1.LoadButton, { tone: "info", variant: "raised", accessLevel: props.accessLevel, onLoad: (json) => props.api.stateApi.reloadInitialState(json), "data-name": "load-initial-state-button", children: "Load Initial Adaptable State" })] }), (0, jsx_runtime_1.jsxs)(Panel_1.default, { className: `${baseClassName}__panel twa:mt-3 twa:mr-2 twa:mb-2 twa:h-auto twa:rounded-none`, "data-name": "adaptable-state", header: 'Export Adaptable State', children: [(0, jsx_runtime_1.jsx)(HelpBlock_1.default, { className: "twa:my-2", children: 'Exports the currently persisted Adaptable State' }), ' ', (0, jsx_runtime_1.jsx)(ExportDropdown_1.ExportDropdown, { api: props.api, type: "adaptableState", className: "twa:mr-3 twa:flex-1 twa:max-w-none", "data-name": "export-adaptable-state-dropdown", children: "Select Export Destination" })] }), (0, jsx_runtime_1.jsxs)(Panel_1.default, { className: `${baseClassName}__panel twa:mt-3 twa:mr-2 twa:mb-2 twa:h-auto twa:rounded-none`, "data-name": "initial-state", header: 'Export Initial Adaptable State', variant: "default", children: [(0, jsx_runtime_1.jsx)(HelpBlock_1.default, { className: "twa:my-2", children: 'Exports the Initial Adaptable State which was provided at design time' }), ' ', (0, jsx_runtime_1.jsx)(ExportDropdown_1.ExportDropdown, { api: props.api, type: "initialState", className: "twa:mr-3 twa:flex-1 twa:max-w-none", "data-name": "export-initial-state-dropdown", children: "Select Export Destination" })] })] }));
 };
 exports.StateManagementPopup = StateManagementPopup;

package/src/View/StateManagement/components/ExportDropdown.d.ts

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { AdaptableApi } from '../../../../types';
-import { DropdownButtonProps } from '../../../components/DropdownButton';
-export interface ExportDropdownProps extends Omit<DropdownButtonProps, 'options' | 'value'> {
+import { type NewDropdownButtonProps } from '../../../components/DropdownButton';
+export interface ExportDropdownProps extends Omit<NewDropdownButtonProps, 'items'> {
     api: AdaptableApi;
     type: 'adaptableState' | 'initialState';
 }

package/src/View/StateManagement/components/ExportDropdown.js

@@ -1,40 +1,39 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.ExportDropdown = void 0;
-const tslib_1 = require("tslib");
 const jsx_runtime_1 = require("react/jsx-runtime");
-const DropdownButton_1 = tslib_1.__importDefault(require("../../../components/DropdownButton"));
+const DropdownButton_1 = require("../../../components/DropdownButton");
 const handleExportState_1 = require("../handleExportState");
 const ExportDropdown = (props) => {
+    const { api, type, ...rest } = props;
     const handleChange = (destination) => {
-        switch (props.type) {
-            case 'adaptableState':
-                const adaptableState = props.api.stateApi.getPersistentState();
-                (0, handleExportState_1.handleExportState)(destination, 'adaptableState', adaptableState, props.api);
+        switch (type) {
+            case 'adaptableState': {
+                const adaptableState = api.stateApi.getPersistentState();
+                (0, handleExportState_1.handleExportState)(destination, 'adaptableState', adaptableState, api);
                 break;
-            case 'initialState':
-                const initialState = props.api.stateApi.getInitialState();
-                (0, handleExportState_1.handleExportState)(destination, 'initialState', initialState, props.api);
+            }
+            case 'initialState': {
+                const initialState = api.stateApi.getInitialState();
+                (0, handleExportState_1.handleExportState)(destination, 'initialState', initialState, api);
                 break;
+            }
         }
     };
     const destinationOptions = [
         {
-            value: 'Clipboard',
             label: 'Clipboard',
             onClick: () => handleChange('Clipboard'),
         },
         {
-            value: 'Console',
             label: 'Console',
             onClick: () => handleChange('Console'),
         },
         {
-            value: 'JSON',
             label: 'JSON',
             onClick: () => handleChange('JSON'),
         },
     ];
-    return ((0, jsx_runtime_1.jsx)(DropdownButton_1.default, { className: "ab-StateManagement__Export-Dropdown", ...props, items: destinationOptions, value: undefined }));
+    return ((0, jsx_runtime_1.jsx)(DropdownButton_1.NewDropdownButton, { variant: "outlined", className: "ab-StateManagement__Export-Dropdown", ...rest, items: destinationOptions }));
 };
 exports.ExportDropdown = ExportDropdown;

package/src/View/StatusBar/StatusBarPanel.js

@@ -8,7 +8,7 @@ const SimpleButton_1 = tslib_1.__importDefault(require("../../components/SimpleB
 const ArrayExtensions_1 = tslib_1.__importDefault(require("../../Utilities/Extensions/ArrayExtensions"));
 const AdaptablePopover_1 = require("../AdaptablePopover");
 const Flex_1 = require("../../components/Flex");
-const clsx_1 = tslib_1.__importDefault(require("clsx"));
+const utils_1 = require("../../lib/utils");
 /**
  * Statusbar sub panel are similar to vs code:
  * - text
@@ -40,6 +40,6 @@ const StatusBarPanel = (props) => {
     const preparedContent = typeof content === 'function'
         ? React.createElement(content)
         : content;
-    return ((0, jsx_runtime_1.jsxs)(Flex_1.Flex, { ...flexProps, alignItems: "center", justifyContent: "center", className: (0, clsx_1.default)(baseClassName, flexProps.className, shouldTriggerActionOnWrapperClick ? 'twa:cursor-pointer' : 'twa:cursor-default'), onClick: handleWrapperClick, children: [props.icon && ((0, jsx_runtime_1.jsx)(SimpleButton_1.default, { tooltip: tooltip, color: props.color, icon: props.icon, iconSize: 15, variant: "text", onClick: handleIconClick, className: preparedContent ? 'twa:mr-1' : 'twa:mr-0' })), popover ? ((0, jsx_runtime_1.jsx)(AdaptablePopover_1.AdaptablePopover, { alignPosition: [['BottomCenter', 'TopCenter']], tooltipText: tooltip, showIcon: false, bodyText: [popoverContent], MessageType: 'Info', showEvent: 'focus', hideEvent: "blur", popoverMinWidth: popoverMinWidth, children: preparedContent })) : (preparedContent), ArrayExtensions_1.default.IsNotNullOrEmpty(extraActions) && ((0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:ml-1", children: extraActions?.map?.((action, index) => React.createElement(action, { key: index })) }))] }));
+    return ((0, jsx_runtime_1.jsxs)(Flex_1.Flex, { ...flexProps, alignItems: "center", justifyContent: "center", className: (0, utils_1.cn)(baseClassName, flexProps.className, shouldTriggerActionOnWrapperClick ? 'twa:cursor-pointer' : 'twa:cursor-default'), onClick: handleWrapperClick, children: [props.icon && ((0, jsx_runtime_1.jsx)(SimpleButton_1.default, { tooltip: tooltip, color: props.color, icon: props.icon, iconSize: 15, variant: "text", onClick: handleIconClick, className: preparedContent ? 'twa:mr-1' : 'twa:mr-0' })), popover ? ((0, jsx_runtime_1.jsx)(AdaptablePopover_1.AdaptablePopover, { alignPosition: [['BottomCenter', 'TopCenter']], tooltipText: tooltip, showIcon: false, bodyText: [popoverContent], MessageType: 'Info', showEvent: 'focus', hideEvent: "blur", popoverMinWidth: popoverMinWidth, children: preparedContent })) : (preparedContent), ArrayExtensions_1.default.IsNotNullOrEmpty(extraActions) && ((0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:ml-1", children: extraActions?.map?.((action, index) => React.createElement(action, { key: index })) }))] }));
 };
 exports.StatusBarPanel = StatusBarPanel;

package/src/View/StatusBar/StatusBarPopup.js

@@ -12,6 +12,7 @@ const StatusBarRedux_1 = require("../../Redux/ActionsReducers/StatusBarRedux");
 const AdaptableContext_1 = require("../AdaptableContext");
 const PopupPanel_1 = require("../Components/Popups/AdaptablePopup/PopupPanel");
 const GeneralConstants_1 = require("../../Utilities/Constants/GeneralConstants");
+const statusBarPanelHelpers_1 = require("./statusBarPanelHelpers");
 const StatusBarPopup = (props) => {
     const statusPanels = (0, react_redux_1.useSelector)(StatusBarRedux_1.getStatusPanelsSelector);
     const adaptable = (0, AdaptableContext_1.useAdaptable)();
@@ -30,20 +31,47 @@ const StatusBarPopup = (props) => {
             };
         });
         adaptable.api.statusBarApi.setStatusBarPanels(newStatusPanels);
-    }, [statusPanels]);
-    const availableItems = Types_1.ALL_STATUS_SUB_PANELS.filter((panel) => {
+    }, [statusPanels, adaptable.api.statusBarApi]);
+    const availableItems = React.useMemo(() => Types_1.ALL_STATUS_SUB_PANELS.filter((panel) => {
         const module = adaptable.ModuleService.getModuleById(panel);
         return module?.isModuleVisible();
     }).map((panel) => {
         const module = adaptable.ModuleService.getModuleById(panel);
         return { Id: panel, Title: module.moduleInfo.FriendlyName };
-    });
+    }), [adaptable]);
+    const unusedItemGroups = React.useMemo(() => {
+        const statusPanelIds = [];
+        const moduleShortcutIds = [];
+        availableItems.forEach((item) => {
+            const module = adaptable.ModuleService.getModuleById(item.Id);
+            if ((0, statusBarPanelHelpers_1.isRichStatusBarPanel)(module)) {
+                statusPanelIds.push(item.Id);
+            }
+            else {
+                moduleShortcutIds.push(item.Id);
+            }
+        });
+        return [
+            {
+                listId: 'UNUSED-PANELS',
+                title: 'Status Panels',
+                help: 'Fully featured actionable controls',
+                items: statusPanelIds,
+            },
+            {
+                listId: 'UNUSED-SHORTCUTS',
+                title: 'Module Shortcuts',
+                help: 'Buttons to open Module Status Panel',
+                items: moduleShortcutIds,
+            },
+        ];
+    }, [availableItems, adaptable]);
     const disabled = props.accessLevel === GeneralConstants_1.ACCESS_LEVEL_READ_ONLY;
-    return ((0, jsx_runtime_1.jsx)(PopupPanel_1.PopupPanel, { headerText: props.moduleInfo.FriendlyName, glyphicon: props.moduleInfo.Glyph, infoLink: props.moduleInfo.HelpPage, infoLinkDisabled: !props.api.internalApi.isDocumentationLinksDisplayed(), children: statusPanels.length ? ((0, jsx_runtime_1.jsx)(ModuleManager_1.ModuleManager, { permittedActions: {
+    return ((0, jsx_runtime_1.jsx)(PopupPanel_1.PopupPanel, { headerText: props.moduleInfo.FriendlyName, glyphicon: props.moduleInfo.Glyph, infoLink: props.moduleInfo.HelpPage, infoLinkDisabled: !props.api.internalApi.isDocumentationLinksDisplayed(), children: statusPanels.length ? ((0, jsx_runtime_1.jsx)(ModuleManager_1.ModuleManager, { dragScope: "status-bar", layout: "rows", permittedActions: {
                 createTab: false,
                 dragAndDropTab: false,
                 deleteTab: false,
                 editTabName: false,
-            }, onTabsChange: handleTabChange, disabled: disabled, tabs: tabs, availableItems: availableItems, tabsTitle: 'AdapTable Status Bar Panels', unusedPanelTitle: "Available Status Bar Components", dragItemText: "Drag into a Status Bar Panel below" })) : ((0, jsx_runtime_1.jsx)(EmptyContent_1.default, { children: "To enable this feature add to Grid Options statusPanels the Adaptable Status Panel." })) }));
+            }, onTabsChange: handleTabChange, disabled: disabled, tabs: tabs, availableItems: availableItems, unusedItemGroups: unusedItemGroups, dragItemText: "Drag items from either panel above into a Status Bar Panel below", tabsTitle: "AdapTable Status Bar Panels" })) : ((0, jsx_runtime_1.jsx)(EmptyContent_1.default, { children: "To enable this feature add to Grid Options statusPanels the Adaptable Status Panel." })) }));
 };
 exports.StatusBarPopup = StatusBarPopup;

package/src/View/StatusBar/statusBarPanelHelpers.d.ts

@@ -0,0 +1,2 @@
+import { IModule } from '../../Strategy/Interface/IModule';
+export declare const isRichStatusBarPanel: (module: IModule | undefined) => boolean;

package/src/View/StatusBar/statusBarPanelHelpers.js

@@ -0,0 +1,11 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.isRichStatusBarPanel = void 0;
+const isRichStatusBarPanel = (module) => {
+    if (!module) {
+        return false;
+    }
+    const statusBarPanelProps = module.getViewProperties?.()?.getStatusBarPanelProps?.() ?? {};
+    return Boolean(statusBarPanelProps.view || statusBarPanelProps.content || statusBarPanelProps.popover);
+};
+exports.isRichStatusBarPanel = isRichStatusBarPanel;

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). */
@@ -11,6 +11,8 @@ export interface BadgePillStyleEditorProps {
      */
     onChange: (next: BadgePillStyle | undefined) => void;
     disabled?: boolean;
+    /** When true, omit outer border — for use inside a wizard Card body. */
+    embedded?: boolean;
 }
 /**
  * Compact editor for the cut-down {@link BadgePillStyle}.

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

@@ -3,12 +3,11 @@ Object.defineProperty(exports, "__esModule", { value: true });
 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");
 const ColorPicker_1 = require("../../../components/ColorPicker");
 const FormLayout_1 = tslib_1.__importStar(require("../../../components/FormLayout"));
 const Flex_1 = require("../../../components/Flex");
 const Toggle_1 = require("../../../components/Toggle");
-const Tag_1 = require("../../../components/Tag");
+const SummaryColorTag_1 = require("../../Wizard/SummaryColorTag");
 const LABEL_COLUMN = { name: 'label', style: { textAlign: 'start' } };
 const CHILD_COLUMN = { name: 'children' };
 /**
@@ -39,7 +38,11 @@ const BadgePillStyleEditor = (props) => {
         }
     };
     const disabledClass = disabled ? 'twa:opacity-50 twa:pointer-events-none' : '';
-    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" })] })] }) }) })] }) }) }));
+    const form = ((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.jsx)(ColorPicker_1.OptionalColorPicker, { disabled: disabled, api: props.api, value: pill.BackColor, defaultColor: "#cccccc", onChange: (c) => update({ BackColor: c }) }) }), (0, jsx_runtime_1.jsx)(FormLayout_1.FormRow, { label: "Text", children: (0, jsx_runtime_1.jsx)(ColorPicker_1.OptionalColorPicker, { disabled: disabled, api: props.api, value: pill.ForeColor, defaultColor: "#000000", onChange: (c) => update({ ForeColor: c }) }) }), (0, jsx_runtime_1.jsx)(FormLayout_1.FormRow, { label: "Border", children: (0, jsx_runtime_1.jsx)(ColorPicker_1.OptionalColorPicker, { disabled: disabled, api: props.api, value: pill.BorderColor, defaultColor: "#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)(Flex_1.Flex, { alignItems: "center", className: "twa:gap-2", children: [(0, jsx_runtime_1.jsx)(Toggle_1.Toggle, { standalone: true, pressed: pill.FontStyle === 'Italic', onPressedChange: (pressed) => update({ FontStyle: pressed ? 'Italic' : undefined }), icon: "italic" }), (0, jsx_runtime_1.jsx)(Toggle_1.Toggle, { standalone: true, 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" })] })] }) }) })] }));
+    if (props.embedded) {
+        return form;
+    }
+    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). */
@@ -49,22 +52,22 @@ const getBadgePillStyleSummaryItems = (pill) => {
     }
     const items = [];
     if (pill.BackColor) {
-        items.push({ label: 'Pill Back Colour', value: pill.BackColor });
+        items.push({ label: 'Back Colour', value: pill.BackColor });
     }
     if (pill.ForeColor) {
-        items.push({ label: 'Pill Fore Colour', value: pill.ForeColor });
+        items.push({ label: 'Fore Colour', value: pill.ForeColor });
     }
     if (pill.BorderColor) {
-        items.push({ label: 'Pill Border Colour', value: pill.BorderColor });
+        items.push({ label: 'Border Colour', value: pill.BorderColor });
     }
     if (pill.FontWeight === 'Bold') {
-        items.push({ label: 'Pill Font Weight', value: 'Bold' });
+        items.push({ label: 'Font Weight', value: 'Bold' });
     }
     if (pill.FontStyle === 'Italic') {
-        items.push({ label: 'Pill Font Style', value: 'Italic' });
+        items.push({ label: 'Font Style', value: 'Italic' });
     }
     if (pill.TextDecoration && pill.TextDecoration !== 'None') {
-        items.push({ label: 'Pill Text Decoration', value: pill.TextDecoration });
+        items.push({ label: 'Text Decoration', value: pill.TextDecoration });
     }
     return items;
 };
@@ -75,6 +78,6 @@ const renderBadgePillStyleSummaryTags = (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: items.map(({ label, value }) => ((0, jsx_runtime_1.jsx)(Tag_1.Tag, { children: `${label}: ${value}` }, label))) }));
+    return (0, SummaryColorTag_1.renderSummaryLabelValueTags)(items);
 };
 exports.renderBadgePillStyleSummaryTags = renderBadgePillStyleSummaryTags;

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

@@ -8,7 +8,7 @@ export declare const renderBadgeDefinitionSummaryTags: (styledColumn: StyledColu
 export declare const StyledColumnBadgeDefinitionsView: React.FunctionComponent<React.PropsWithChildren<{
     data: StyledColumn;
 }>>;
-export declare const renderBadgeSummary: (styledColumn: StyledColumn, api?: AdaptableApi) => React.JSX.Element;
+export declare const renderBadgeSummary: (styledColumn: StyledColumn, api: AdaptableApi) => React.JSX.Element;
 export interface StyledColumnBadgeSectionProps {
     onChange: (data: StyledColumn) => void;
 }
@@ -17,4 +17,4 @@ export interface StyledColumnBadgeStyleSectionProps {
     onChange: (data: StyledColumn) => void;
 }
 export declare const StyledColumnBadgeStyleSection: React.FunctionComponent<StyledColumnBadgeStyleSectionProps>;
-export declare const renderBadgeStyleSummary: (styledColumn: StyledColumn, api?: AdaptableApi) => React.JSX.Element;
+export declare const renderBadgeStyleSummary: (styledColumn: StyledColumn, api: AdaptableApi) => React.JSX.Element;