@adaptabletools/adaptable-cjs 23.0.0-canary.1 → 23.0.0-canary.10

package/src/View/CalculatedColumn/Wizard/CalculatedColumnTypeSection.js

@@ -2,10 +2,36 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.CalculatedColumnTypeWizardSection = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
-const Tabs_1 = require("../../../components/Tabs");
-const TypeRadio_1 = require("../../Wizard/TypeRadio");
 const Flex_1 = require("../../../components/Flex");
+const WizardTypeSelection_1 = require("../../Wizard/WizardTypeSelection");
+const CALCULATED_COLUMN_TYPE_OPTIONS = [
+    {
+        type: 'ScalarExpression',
+        label: 'Standard',
+        description: 'The calculated value is derived from other cells in the row',
+        expressionExample: '[price] * [quantity]',
+    },
+    {
+        type: 'AggregatedScalarExpression',
+        label: 'Aggregated',
+        description: 'The calculated value is derived from other rows',
+        expressionExample: 'SUM([pnl], GROUP_BY([desk]))',
+    },
+    {
+        type: 'CumulativeAggregatedExpression',
+        label: 'Cumulative',
+        description: 'The calculated value is derived cumulatively from other rows',
+        expressionExample: 'CUMUL(SUM([pnl]), OVER([tradeDate]))',
+    },
+    {
+        type: 'QuantileAggregatedExpression',
+        label: 'Quantile',
+        description: 'The calculated value is derived from other rows using quantile aggregations',
+        expressionExample: 'QUANT([pnl], 4)',
+    },
+];
+const CALCULATED_COLUMN_TYPE_COUNT = CALCULATED_COLUMN_TYPE_OPTIONS.length;
 const CalculatedColumnTypeWizardSection = (props) => {
-    return ((0, jsx_runtime_1.jsxs)(Tabs_1.Tabs, { children: [(0, jsx_runtime_1.jsx)(Tabs_1.Tabs.Tab, { children: "Calculated Column Type" }), (0, jsx_runtime_1.jsx)(Tabs_1.Tabs.Content, { children: (0, jsx_runtime_1.jsxs)(Flex_1.Flex, { flexDirection: "column", children: [(0, jsx_runtime_1.jsx)(TypeRadio_1.TypeRadio, { text: 'Standard', description: "The calculated value is derived from other cells in the row", checked: props.type === 'ScalarExpression', onClick: () => props.onTypeChange('ScalarExpression') }), (0, jsx_runtime_1.jsx)(TypeRadio_1.TypeRadio, { text: 'Aggregated', description: "The calculated value is derived from other rows", checked: props.type === 'AggregatedScalarExpression', onClick: () => props.onTypeChange('AggregatedScalarExpression') }), (0, jsx_runtime_1.jsx)(TypeRadio_1.TypeRadio, { text: 'Cumulative', description: "The calculated value is derived cumulatively from other rows", checked: props.type === 'CumulativeAggregatedExpression', onClick: () => props.onTypeChange('CumulativeAggregatedExpression') }), (0, jsx_runtime_1.jsx)(TypeRadio_1.TypeRadio, { text: 'Quantile', description: "The calculated value is derived from other rows using quantile aggregations", checked: props.type === 'QuantileAggregatedExpression', onClick: () => props.onTypeChange('QuantileAggregatedExpression') })] }) })] }));
+    return ((0, jsx_runtime_1.jsx)(Flex_1.Flex, { flexDirection: "column", "data-name": "calculated-column-type", className: "twa:h-full twa:min-h-0 twa:p-2", children: (0, jsx_runtime_1.jsx)(WizardTypeSelection_1.WizardTypeSelectionSection, { headingId: "calculated-column-type-heading", title: "Calculated Column Type", dataName: "calculated-column-type-grid", columns: (0, WizardTypeSelection_1.getWizardTypeSelectionGridColumns)(CALCULATED_COLUMN_TYPE_COUNT), intro: (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: ["Click a card to choose one of ", CALCULATED_COLUMN_TYPE_COUNT, " calculated column types"] }), children: CALCULATED_COLUMN_TYPE_OPTIONS.map((option) => ((0, jsx_runtime_1.jsx)(WizardTypeSelection_1.WizardTypeSelectionCard, { label: option.label, description: option.description, selected: props.type === option.type, dataName: `calculated-column-type-${option.type}`, minHeightClassName: "twa:min-h-[148px]", onSelect: () => props.onTypeChange(option.type), footer: (0, jsx_runtime_1.jsx)(WizardTypeSelection_1.WizardTypeSelectionPreviewFrame, { children: (0, jsx_runtime_1.jsx)(Flex_1.Box, { as: "code", className: "ab-CodeBlock twa:block twa:w-full twa:truncate twa:bg-transparent twa:p-0 twa:font-mono twa:text-2 twa:leading-snug twa:text-foreground twa:opacity-90", children: option.expressionExample }) }) }, option.type))) }) }));
 };
 exports.CalculatedColumnTypeWizardSection = CalculatedColumnTypeWizardSection;

package/src/View/CellSummary/CellSummaryViewPanel.js

@@ -7,13 +7,13 @@ const React = tslib_1.__importStar(require("react"));
 const EnumExtensions_1 = require("../../Utilities/Extensions/EnumExtensions");
 const Enums_1 = require("../../AdaptableState/Common/Enums");
 const ArrayExtensions_1 = tslib_1.__importDefault(require("../../Utilities/Extensions/ArrayExtensions"));
+const utils_1 = require("../../lib/utils");
 const CellSummaryPopover_1 = require("./CellSummaryPopover");
 const GeneralConstants = tslib_1.__importStar(require("../../Utilities/Constants/GeneralConstants"));
 const AdaptablePopover_1 = require("../AdaptablePopover");
 const InternalRedux = tslib_1.__importStar(require("../../Redux/ActionsReducers/InternalRedux"));
 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");
 class CellSummaryViewPanelComponent extends React.Component {
     cleanupEvent;
@@ -54,12 +54,12 @@ class CellSummaryViewPanelComponent extends React.Component {
         const isToolbar = this.props.viewType === 'Toolbar';
         const elementType = isToolbar ? 'DashboardToolbar' : 'ToolPanel';
         const operationValue = this.getOperationValue() ?? 'N/A';
-        return ((0, jsx_runtime_1.jsxs)(Flex_1.Flex, { className: (0, clsx_1.default)(shouldDisable ? GeneralConstants.READ_ONLY_STYLE : '', `ab-${elementType}__CellSummary__wrap twa:gap-2 twa:flex-row`, {
+        return ((0, jsx_runtime_1.jsxs)(Flex_1.Flex, { className: (0, utils_1.cn)(shouldDisable ? GeneralConstants.READ_ONLY_STYLE : '', `ab-${elementType}__CellSummary__wrap twa:gap-2 twa:flex-row`, {
                 'twa:min-w-[215px] twa:max-w-[215px] twa:w-[215px] twa:flex-nowrap': isToolbar,
                 'twa:flex-1 twa:flex-wrap': !isToolbar,
-            }), children: [(0, jsx_runtime_1.jsx)(Flex_1.Flex, { className: "twa:flex-1", children: (0, jsx_runtime_1.jsx)(NewSelect_1.SingleSelect, { ariaLabel: "Cell Summary Operation Selector", className: `ab-${elementType}__CellSummary__select twa:w-full`, disabled: shouldDisable, items: [...operationMenuItems, ...operationDefinitions], onValueChange: (x) => this.props.onCellSummaryOperationChange(x), value: this.props.CellSummaryOperation }) }), (0, jsx_runtime_1.jsx)(Flex_1.Flex, { className: "twa:items-center twa:gap-1", children: (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(Flex_1.Flex, { className: (0, clsx_1.default)(`ab-${elementType}__CellSummary__value twa:min-w-[50px]`, {
-                                    'twa:rounded-standard twa:text-color-text-on-info twa:bg-color-info twa:text-2': !isToolbar,
-                                    'twa:flex-1 twa:text-color-text-on-primary twa:justify-center': isToolbar,
+            }), children: [(0, jsx_runtime_1.jsx)(Flex_1.Flex, { className: "twa:flex-1", children: (0, jsx_runtime_1.jsx)(NewSelect_1.SingleSelect, { ariaLabel: "Cell Summary Operation Selector", className: `ab-${elementType}__CellSummary__select twa:w-full`, disabled: shouldDisable, items: [...operationMenuItems, ...operationDefinitions], onValueChange: (x) => this.props.onCellSummaryOperationChange(x), value: this.props.CellSummaryOperation }) }), (0, jsx_runtime_1.jsx)(Flex_1.Flex, { className: "twa:items-center twa:gap-1", children: (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(Flex_1.Flex, { className: (0, utils_1.cn)(`ab-${elementType}__CellSummary__value twa:min-w-[50px]`, {
+                                    'twa:rounded-standard twa:text-info-foreground twa:bg-info twa:text-2': !isToolbar,
+                                    'twa:flex-1 twa:text-primary-foreground twa:justify-center': isToolbar,
                                 }), children: operationValue }), (0, jsx_runtime_1.jsx)(AdaptablePopover_1.AdaptablePopover, { popoverMaxWidth: 360, className: "ab-ToolPanel__CellSummary__info", bodyText: [cellSummaryPopover], useButton: true, showEvent: 'focus', hideEvent: "blur", tooltipText: 'Show Cell Summaries', disabled: !this.props.CellSummary?.Count })] }) })] }));
     }
     checkSelectedCells() {

package/src/View/Charting/ChartingWizard/AgChargingWizard/AgChargingWizard.js

@@ -6,7 +6,6 @@ const jsx_runtime_1 = require("react/jsx-runtime");
 const React = tslib_1.__importStar(require("react"));
 const AdaptableContext_1 = require("../../../AdaptableContext");
 const OnePageAdaptableWizard_1 = require("../../../Wizard/OnePageAdaptableWizard");
-const PreviewChartSection_1 = require("./PreviewChartSection");
 const SettingsSection_1 = require("./SettingsSection");
 const ObjectTagsWizardSection_1 = require("../../../Wizard/ObjectTagsWizardSection");
 const Flex_1 = require("../../../../components/Flex");
@@ -21,10 +20,10 @@ const AgChargingWizard = (props) => {
     }, [chartDefinition]);
     return ((0, jsx_runtime_1.jsx)(OnePageAdaptableWizard_1.OnePageAdaptableWizard, { defaultCurrentSectionName: props.defaultCurrentSectionName, moduleInfo: props.moduleInfo, data: chartDefinition, onHide: props.onCloseWizard, onFinish: handleFinish, sections: [
             {
-                title: 'Settings',
-                details: 'Chart Settings',
+                title: 'Chart',
+                details: 'Configure chart properties and preview the result',
                 isValid: SettingsSection_1.isSettingsValid,
-                render: () => ((0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:p-2", children: (0, jsx_runtime_1.jsx)(SettingsSection_1.SettingsSection, { chartDefinition: chartDefinition, onChange: setChartDefinition }) })),
+                render: () => ((0, jsx_runtime_1.jsx)(SettingsSection_1.SettingsSection, { chartDefinition: chartDefinition, onChange: setChartDefinition })),
             },
             {
                 details: 'Select Chart Tags',
@@ -33,12 +32,6 @@ const AgChargingWizard = (props) => {
                 render: () => ((0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:p-2", children: (0, jsx_runtime_1.jsx)(ObjectTagsWizardSection_1.ObjectTagsWizardSection, { onChange: setChartDefinition }) })),
                 renderSummary: ObjectTagsWizardSection_1.renderObjectTagsSummary,
             },
-            '-',
-            {
-                title: 'Preview Chart',
-                details: 'Chart Preview',
-                render: () => ((0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:p-2", children: (0, jsx_runtime_1.jsx)(PreviewChartSection_1.PreviewChartSection, { chartDefinition: chartDefinition, onChange: setChartDefinition }) })),
-            },
         ] }));
 };
 exports.AgChargingWizard = AgChargingWizard;

package/src/View/Charting/ChartingWizard/AgChargingWizard/PreviewChartSection.js

@@ -5,7 +5,7 @@ const tslib_1 = require("tslib");
 const jsx_runtime_1 = require("react/jsx-runtime");
 const React = tslib_1.__importStar(require("react"));
 const react_redux_1 = require("react-redux");
-const isEqual_1 = tslib_1.__importDefault(require("../../../../Utilities/utils/isEqual"));
+const ObjectExtensions_1 = require("../../../../Utilities/Extensions/ObjectExtensions");
 const InternalRedux = tslib_1.__importStar(require("../../../../Redux/ActionsReducers/InternalRedux"));
 const AdaptableContext_1 = require("../../../AdaptableContext");
 const PreviewChartSection = (props) => {
@@ -26,13 +26,13 @@ const PreviewChartSection = (props) => {
     }, [divRef]);
     React.useEffect(() => {
         const model = currentChartModels.find((model) => model.chartId == localChartId);
-        if (model && !(0, isEqual_1.default)(model, props.chartDefinition.Model)) {
+        if (model && !(0, ObjectExtensions_1.isEqual)(model, props.chartDefinition.Model)) {
             props.onChange({
                 ...props.chartDefinition,
                 Model: model,
             });
         }
     }, [currentChartModels]);
-    return (0, jsx_runtime_1.jsx)("div", { ref: divRef });
+    return (0, jsx_runtime_1.jsx)("div", { ref: divRef, className: "twa:min-h-[280px] twa:h-full twa:w-full" });
 };
 exports.PreviewChartSection = PreviewChartSection;

package/src/View/Charting/ChartingWizard/AgChargingWizard/SettingsSection.js

@@ -3,65 +3,48 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.SettingsSection = exports.isSettingsValid = void 0;
 const tslib_1 = require("tslib");
 const jsx_runtime_1 = require("react/jsx-runtime");
-const React = tslib_1.__importStar(require("react"));
 const CheckBox_1 = require("../../../../components/CheckBox");
-const DropdownButton_1 = tslib_1.__importDefault(require("../../../../components/DropdownButton"));
-const FormLayout_1 = tslib_1.__importStar(require("../../../../components/FormLayout"));
-const chartingHelper_1 = require("../../../../Utilities/Helpers/chartingHelper");
-const AdaptableInput_1 = tslib_1.__importDefault(require("../../../Components/AdaptableInput"));
+const NewSelect_1 = require("../../../../components/NewSelect");
+const ChartHelper_1 = require("../../../../Utilities/Helpers/ChartHelper");
+const Flex_1 = require("../../../../components/Flex");
+const Card_1 = require("../../../../components/Card");
+const Input_1 = tslib_1.__importDefault(require("../../../../components/Input"));
+const PreviewChartSection_1 = require("./PreviewChartSection");
 const isSettingsValid = (chartDefinition, api) => {
-    return (0, chartingHelper_1.validateChartName)(api, chartDefinition.Name, chartDefinition.Uuid);
+    return (0, ChartHelper_1.validateChartName)(api, chartDefinition.Name, chartDefinition.Uuid);
 };
 exports.isSettingsValid = isSettingsValid;
+const AGG_FUNCS = ['sum', 'min', 'max', 'count', 'avg', 'first', 'last'];
 const SettingsSection = (props) => {
-    const handleNameChange = React.useCallback((event) => {
-        props.onChange({
-            ...props.chartDefinition,
-            Name: event.target.value,
-            Model: props.chartDefinition.Model,
-        });
-    }, [props.chartDefinition]);
-    const handleUnLinkChange = React.useCallback(() => {
-        props.onChange({
-            ...props.chartDefinition,
-            Model: {
-                ...props.chartDefinition.Model,
-                unlinkChart: !props.chartDefinition.Model.unlinkChart,
-            },
-        });
-    }, [props.chartDefinition]);
-    const handleSuppressChartRanges = React.useCallback(() => {
-        props.onChange({
-            ...props.chartDefinition,
-            Model: {
-                ...props.chartDefinition.Model,
-                suppressChartRanges: !props.chartDefinition.Model.suppressChartRanges,
-            },
-        });
-    }, [props.chartDefinition]);
-    const aggFuncs = ['sum', 'min', 'max', 'count', 'avg', 'first', 'last'];
-    const aggFuncsOptions = aggFuncs.map((aggFunc) => ({
-        label: aggFunc,
-        onClick: () => {
-            props.onChange({
-                ...props.chartDefinition,
-                Model: {
-                    ...props.chartDefinition.Model,
-                    aggFunc,
-                },
-            });
-        },
+    const { chartDefinition, onChange } = props;
+    const aggFunc = chartDefinition.Model.aggFunc;
+    const showAggFunc = chartDefinition.Model.modelType === 'range' && typeof aggFunc !== 'function';
+    const aggFuncsOptions = AGG_FUNCS.map((option) => ({
+        label: option,
+        value: option,
     }));
-    const aggFunc = props.chartDefinition.Model.aggFunc;
-    const handleAggFuncClear = React.useCallback(() => {
-        props.onChange({
-            ...props.chartDefinition,
-            Model: {
-                ...props.chartDefinition.Model,
-                aggFunc: '',
-            },
-        });
-    }, [props.chartDefinition]);
-    return ((0, jsx_runtime_1.jsxs)(FormLayout_1.default, { children: [(0, jsx_runtime_1.jsx)(FormLayout_1.FormRow, { label: "Name", children: (0, jsx_runtime_1.jsx)(AdaptableInput_1.default, { onChange: handleNameChange, value: props.chartDefinition.Name }) }), (0, jsx_runtime_1.jsx)(FormLayout_1.FormRow, { label: "Unlink Chart", children: (0, jsx_runtime_1.jsx)(CheckBox_1.CheckBox, { onClick: handleUnLinkChange, checked: props.chartDefinition.Model.unlinkChart }) }), (0, jsx_runtime_1.jsx)(FormLayout_1.FormRow, { label: "Suppress Chart Ranges", children: (0, jsx_runtime_1.jsx)(CheckBox_1.CheckBox, { onClick: handleSuppressChartRanges, checked: props.chartDefinition.Model.suppressChartRanges }) }), props.chartDefinition.Model.modelType === 'range' && typeof aggFunc !== 'function' && ((0, jsx_runtime_1.jsx)(FormLayout_1.FormRow, { label: "Agg Func", children: (0, jsx_runtime_1.jsx)(DropdownButton_1.default, { columns: ['label'], items: aggFuncsOptions, onClear: handleAggFuncClear, children: aggFunc ? aggFunc : 'Select ' }) }))] }));
+    return ((0, jsx_runtime_1.jsxs)(Flex_1.Flex, { flexDirection: "column", className: "twa:gap-3 twa:p-3 twa:h-full twa:min-h-0", 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 chart" })] }), (0, jsx_runtime_1.jsx)(Card_1.Card.Body, { className: "twa:p-1", children: (0, jsx_runtime_1.jsx)(Input_1.default, { "data-name": "chart-name", className: "twa:max-w-[300px] twa:w-full", onChange: (event) => onChange({
+                                ...chartDefinition,
+                                Name: event.target.value,
+                                Model: chartDefinition.Model,
+                            }), value: chartDefinition.Name ?? '', placeholder: "Enter chart 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: "Unlink Chart" }), (0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:text-xs twa:opacity-70 twa:font-normal twa:max-w-[520px]", children: "When enabled, the chart is not linked to the grid data range" })] }), (0, jsx_runtime_1.jsx)(Card_1.Card.Body, { children: (0, jsx_runtime_1.jsx)(CheckBox_1.CheckBox, { "data-name": "unlink-chart", checked: chartDefinition.Model.unlinkChart, onChange: (checked) => onChange({
+                                ...chartDefinition,
+                                Model: {
+                                    ...chartDefinition.Model,
+                                    unlinkChart: checked,
+                                },
+                            }), children: "Unlink from data" }) })] }), (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: "Suppress Chart Ranges" }), (0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:text-xs twa:opacity-70 twa:font-normal twa:max-w-[520px]", children: "Hide chart range highlights on the grid while the chart is open" })] }), (0, jsx_runtime_1.jsx)(Card_1.Card.Body, { children: (0, jsx_runtime_1.jsx)(CheckBox_1.CheckBox, { "data-name": "suppress-chart-ranges", checked: chartDefinition.Model.suppressChartRanges, onChange: (checked) => onChange({
+                                ...chartDefinition,
+                                Model: {
+                                    ...chartDefinition.Model,
+                                    suppressChartRanges: checked,
+                                },
+                            }), children: "Suppress chart ranges" }) })] }), showAggFunc ? ((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: "Aggregation" }), (0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:text-xs twa:opacity-70 twa:font-normal twa:max-w-[520px]", children: "Aggregation function used for range charts" })] }), (0, jsx_runtime_1.jsx)(Card_1.Card.Body, { className: "twa:p-1", children: (0, jsx_runtime_1.jsx)(NewSelect_1.SingleSelect, { "data-name": "chart-agg-func", placeholder: "Select", className: "twa:max-w-[300px]", items: aggFuncsOptions, value: aggFunc || undefined, onValueChange: (value) => onChange({
+                                ...chartDefinition,
+                                Model: {
+                                    ...chartDefinition.Model,
+                                    aggFunc: value,
+                                },
+                            }) }) })] })) : null, (0, jsx_runtime_1.jsxs)(Card_1.Card, { shadow: false, className: "twa:flex-1 twa:min-h-0", children: [(0, jsx_runtime_1.jsxs)(Card_1.Card.Title, { children: [(0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:font-medium", children: "Preview" }), (0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:text-xs twa:opacity-70 twa:font-normal twa:max-w-[520px]", children: "Live preview of the chart \u2014 changes here are reflected in the chart model" })] }), (0, jsx_runtime_1.jsx)(Card_1.Card.Body, { className: "twa:flex-1 twa:min-h-[280px]", children: (0, jsx_runtime_1.jsx)(PreviewChartSection_1.PreviewChartSection, { chartDefinition: chartDefinition, onChange: onChange }) })] })] }));
 };
 exports.SettingsSection = SettingsSection;

package/src/View/Charting/ChartingWizard/ExternalChartingWizard/ExternalChartingWizard.js

@@ -7,25 +7,6 @@ const React = tslib_1.__importStar(require("react"));
 const AdaptableContext_1 = require("../../../AdaptableContext");
 const OnePageAdaptableWizard_1 = require("../../../Wizard/OnePageAdaptableWizard");
 const SettingsSection_1 = require("./SettingsSection");
-const Flex_1 = require("../../../../components/Flex");
-const PreviewChartSection = ({ chartDefinition }) => {
-    const adaptable = (0, AdaptableContext_1.useAdaptable)();
-    const divRef = React.useRef(null);
-    React.useEffect(() => {
-        if (!divRef.current) {
-            return;
-        }
-        const container = {
-            name: 'Preview Chart',
-            element: divRef.current,
-        };
-        const transientChartDefinition = adaptable.api.chartingApi.internalApi.onPreviewExternalChart(chartDefinition, container);
-        return () => {
-            adaptable.api.chartingApi.internalApi.onHideExternalChart(transientChartDefinition);
-        };
-    }, [divRef]);
-    return (0, jsx_runtime_1.jsx)("div", { ref: divRef });
-};
 const ExternalChartingWizard = (props) => {
     const adaptable = (0, AdaptableContext_1.useAdaptable)();
     const onPreviewChart = adaptable.api.optionsApi.getChartingOptions().externalChartingOptions?.onPreviewChart;
@@ -38,19 +19,11 @@ const ExternalChartingWizard = (props) => {
     };
     return ((0, jsx_runtime_1.jsx)(OnePageAdaptableWizard_1.OnePageAdaptableWizard, { defaultCurrentSectionName: props.defaultCurrentSectionName, moduleInfo: props.moduleInfo, data: chartDefinition, onHide: props.onCloseWizard, onFinish: handleFinish, sections: [
             {
-                title: 'Settings',
-                details: 'Chart Settings',
+                title: 'Chart',
+                details: 'Configure chart properties and preview the result',
                 isValid: SettingsSection_1.isSettingsValid,
-                render: () => ((0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:p-2", children: (0, jsx_runtime_1.jsx)(SettingsSection_1.SettingsSection, { chartDefinition: chartDefinition, onChange: setChartDefinition }) })),
+                render: () => ((0, jsx_runtime_1.jsx)(SettingsSection_1.SettingsSection, { chartDefinition: chartDefinition, onChange: setChartDefinition, showPreview: Boolean(onPreviewChart) })),
             },
-            onPreviewChart
-                ? {
-                    title: 'Preview Chart',
-                    render: () => {
-                        return ((0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:p-2", children: (0, jsx_runtime_1.jsx)(PreviewChartSection, { chartDefinition: chartDefinition }) }));
-                    },
-                }
-                : null,
-        ].filter(Boolean) }));
+        ] }));
 };
 exports.ExternalChartingWizard = ExternalChartingWizard;

package/src/View/Charting/ChartingWizard/ExternalChartingWizard/PreviewChartSection.d.ts

@@ -0,0 +1,5 @@
+import * as React from 'react';
+import { ExternalChartDefinition } from '../../../../AdaptableState/ChartingState';
+export declare const PreviewChartSection: React.FunctionComponent<{
+    chartDefinition: ExternalChartDefinition;
+}>;

package/src/View/Charting/ChartingWizard/ExternalChartingWizard/PreviewChartSection.js

@@ -0,0 +1,26 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.PreviewChartSection = void 0;
+const tslib_1 = require("tslib");
+const jsx_runtime_1 = require("react/jsx-runtime");
+const React = tslib_1.__importStar(require("react"));
+const AdaptableContext_1 = require("../../../AdaptableContext");
+const PreviewChartSection = (props) => {
+    const adaptable = (0, AdaptableContext_1.useAdaptable)();
+    const divRef = React.useRef(null);
+    React.useEffect(() => {
+        if (!divRef.current) {
+            return;
+        }
+        const container = {
+            name: 'Preview Chart',
+            element: divRef.current,
+        };
+        const transientChartDefinition = adaptable.api.chartingApi.internalApi.onPreviewExternalChart(props.chartDefinition, container);
+        return () => {
+            adaptable.api.chartingApi.internalApi.onHideExternalChart(transientChartDefinition);
+        };
+    }, [divRef]);
+    return (0, jsx_runtime_1.jsx)("div", { ref: divRef, className: "twa:min-h-[280px] twa:h-full twa:w-full" });
+};
+exports.PreviewChartSection = PreviewChartSection;

package/src/View/Charting/ChartingWizard/ExternalChartingWizard/SettingsSection.d.ts

@@ -5,5 +5,6 @@ export declare const isSettingsValid: (chartDefinition: ExternalChartDefinition,
 export interface SettingsSectionProps {
     chartDefinition: ExternalChartDefinition;
     onChange: (chartDefinition: ExternalChartDefinition) => void;
+    showPreview?: boolean;
 }
 export declare const SettingsSection: React.FunctionComponent<SettingsSectionProps>;

package/src/View/Charting/ChartingWizard/ExternalChartingWizard/SettingsSection.js

@@ -3,17 +3,20 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.SettingsSection = exports.isSettingsValid = void 0;
 const tslib_1 = require("tslib");
 const jsx_runtime_1 = require("react/jsx-runtime");
-const FormLayout_1 = tslib_1.__importStar(require("../../../../components/FormLayout"));
-const chartingHelper_1 = require("../../../../Utilities/Helpers/chartingHelper");
-const AdaptableInput_1 = tslib_1.__importDefault(require("../../../Components/AdaptableInput"));
+const ChartHelper_1 = require("../../../../Utilities/Helpers/ChartHelper");
+const Flex_1 = require("../../../../components/Flex");
+const Card_1 = require("../../../../components/Card");
+const Input_1 = tslib_1.__importDefault(require("../../../../components/Input"));
+const PreviewChartSection_1 = require("./PreviewChartSection");
 const isSettingsValid = (chartDefinition, api) => {
-    return (0, chartingHelper_1.validateChartName)(api, chartDefinition.Name, chartDefinition.Uuid);
+    return (0, ChartHelper_1.validateChartName)(api, chartDefinition.Name, chartDefinition.Uuid);
 };
 exports.isSettingsValid = isSettingsValid;
 const SettingsSection = (props) => {
-    return ((0, jsx_runtime_1.jsx)(FormLayout_1.default, { children: (0, jsx_runtime_1.jsx)(FormLayout_1.FormRow, { label: "Name", children: (0, jsx_runtime_1.jsx)(AdaptableInput_1.default, { value: props.chartDefinition.Name, onChange: (e) => props.onChange({
-                    ...props.chartDefinition,
-                    Name: e.target.value,
-                }) }) }) }));
+    const { chartDefinition, onChange, showPreview } = props;
+    return ((0, jsx_runtime_1.jsxs)(Flex_1.Flex, { flexDirection: "column", className: "twa:gap-3 twa:p-3 twa:h-full twa:min-h-0", 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 chart" })] }), (0, jsx_runtime_1.jsx)(Card_1.Card.Body, { className: "twa:p-1", children: (0, jsx_runtime_1.jsx)(Input_1.default, { "data-name": "chart-name", className: "twa:max-w-[300px] twa:w-full", value: chartDefinition.Name ?? '', placeholder: "Enter chart name", onChange: (event) => onChange({
+                                ...chartDefinition,
+                                Name: event.target.value,
+                            }) }) })] }), showPreview ? ((0, jsx_runtime_1.jsxs)(Card_1.Card, { shadow: false, className: "twa:flex-1 twa:min-h-0", children: [(0, jsx_runtime_1.jsxs)(Card_1.Card.Title, { children: [(0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:font-medium", children: "Preview" }), (0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:text-xs twa:opacity-70 twa:font-normal twa:max-w-[520px]", children: "Live preview of the external chart" })] }), (0, jsx_runtime_1.jsx)(Card_1.Card.Body, { className: "twa:flex-1 twa:min-h-[280px]", children: (0, jsx_runtime_1.jsx)(PreviewChartSection_1.PreviewChartSection, { chartDefinition: chartDefinition }) })] })) : null] }));
 };
 exports.SettingsSection = SettingsSection;

package/src/View/Charting/ShowChartButton.js

@@ -5,7 +5,7 @@ const tslib_1 = require("tslib");
 const jsx_runtime_1 = require("react/jsx-runtime");
 const SimpleButton_1 = tslib_1.__importDefault(require("../../components/SimpleButton"));
 const AdaptableContext_1 = require("../AdaptableContext");
-const DropdownButton_1 = tslib_1.__importDefault(require("../../components/DropdownButton"));
+const DropdownButton_1 = require("../../components/DropdownButton");
 const GeneralConstants_1 = require("../../Utilities/Constants/GeneralConstants");
 const ChartingState_1 = require("../../AdaptableState/ChartingState");
 const useAgChartState_1 = require("./useAgChartState");
@@ -20,7 +20,7 @@ const BaseShowChartButton = (props) => {
     if (!chartContainers?.length) {
         return ((0, jsx_runtime_1.jsx)(SimpleButton_1.default, { "data-name": "show-chart-button", onClick: () => props.onShowChart(), variant: "text", tone: "success", icon: "visibility-on", tooltip: "Show Chart" }));
     }
-    return ((0, jsx_runtime_1.jsx)(DropdownButton_1.default, { "data-name": "show-chart-dropdown", variant: "text", columns: ['label'], items: props.containerOptions, children: (0, jsx_runtime_1.jsx)(SimpleButton_1.default, { variant: "raised", tone: "success", children: "Open" }) }));
+    return ((0, jsx_runtime_1.jsx)(DropdownButton_1.NewDropdownButton, { "data-name": "show-chart-dropdown", items: props.containerOptions, children: "Open In..." }));
 };
 const ShowAgChartButton = (props) => {
     const adaptableApi = (0, AdaptableContext_1.useAdaptable)().api;
@@ -33,13 +33,13 @@ const ShowAgChartButton = (props) => {
             onClick: () => {
                 showChart(null);
             },
-            ...(chartContainers
-                ? chartContainers?.map((contianerDef) => ({
-                    label: contianerDef.name,
-                    onClick: () => showChart(contianerDef),
-                }))
-                : []),
         },
+        ...(chartContainers
+            ? chartContainers.map((contianerDef) => ({
+                label: contianerDef.name,
+                onClick: () => showChart(contianerDef),
+            }))
+            : []),
     ];
     return ((0, jsx_runtime_1.jsx)(BaseShowChartButton, { chartOpened: isOpen, onShowChart: showChart, onCloseChart: closeChart, containerOptions: containerOptions }));
 };

package/src/View/ColumnInfo/ColumnInfo.js

@@ -14,6 +14,7 @@ const ButtonNew_1 = require("../Components/Buttons/ButtonNew");
 const ColumnSelector_1 = require("../Components/Selectors/ColumnSelector");
 const ArrayExtensions_1 = tslib_1.__importDefault(require("../../Utilities/Extensions/ArrayExtensions"));
 const Flex_1 = require("../../components/Flex");
+const columnLayoutHelpers_1 = require("../Layout/Wizard/sections/columnLayoutHelpers");
 const BASE_CLASS_NAME = 'ab-AdaptableColumns';
 const domProps = {
     className: 'twa:flex-1 twa:min-h-0 twa:w-full',
@@ -39,11 +40,22 @@ const MODULES_WITH_SCOPE = [
     'Shortcut',
     'StyledColumn',
 ];
+/** Column Info summary only — shows the resolved default width when layout has no explicit sizing. */
+const formatColumnInfoSummaryWidth = (columnId, sizing, resolveDefaultWidth) => {
+    const explicit = (0, columnLayoutHelpers_1.formatColumnInspectorSizing)(columnId, sizing, resolveDefaultWidth);
+    if (explicit !== 'Default') {
+        return explicit;
+    }
+    return String(resolveDefaultWidth(columnId));
+};
 const ColumnDefPreview = (props) => {
     const adaptable = (0, AdaptableContext_1.useAdaptable)();
     if (props.column) {
         const api = adaptable.api;
         const summary = api.columnApi.getColumnSummaryForColumnId(props.column.columnId);
+        const layout = api.layoutApi.getCurrentLayout();
+        const resolveDefaultWidth = (columnId) => adaptable.getDefaultColumnWidthForCol(columnId);
+        const columnSizing = layout.ColumnSizing?.[props.column.columnId];
         const keyValuePairs = [
             {
                 Key: 'Column Id',
@@ -89,9 +101,17 @@ const ColumnDefPreview = (props) => {
                 Key: 'Visible',
                 Value: props.column.visible ? 'Yes' : 'No',
             },
+            {
+                Key: 'Pinning',
+                Value: (0, columnLayoutHelpers_1.formatColumnInspectorPinning)(layout, props.column.columnId),
+            },
             {
                 Key: 'Width',
-                Value: props.column.width,
+                Value: formatColumnInfoSummaryWidth(props.column.columnId, columnSizing, resolveDefaultWidth),
+            },
+            {
+                Key: 'Sorting',
+                Value: (0, columnLayoutHelpers_1.formatColumnInspectorSorting)(layout, props.column.columnId),
             },
             {
                 Key: 'Row Grouped',

package/src/View/Comments/CommentsEditor.js

@@ -12,7 +12,7 @@ const CommentsRedux = tslib_1.__importStar(require("../../Redux/ActionsReducers/
 const InternalRedux_1 = require("../../Redux/ActionsReducers/InternalRedux");
 const AdaptableContext_1 = require("../AdaptableContext");
 const AdaptableInput_1 = tslib_1.__importDefault(require("../Components/AdaptableInput"));
-const FormatHelper_1 = tslib_1.__importDefault(require("../../Utilities/Helpers/FormatHelper"));
+const DisplayFormatHelper_1 = tslib_1.__importDefault(require("../../Utilities/Helpers/DisplayFormatHelper"));
 const Flex_1 = require("../../components/Flex");
 const GeneralConstants_1 = require("../../Utilities/Constants/GeneralConstants");
 // Edit Mode
@@ -55,9 +55,9 @@ const CommentsEditor = (props) => {
         return null;
     }
     const formatDate = (date, format) => {
-        return FormatHelper_1.default.DateFormatter(date, { Pattern: format });
+        return DisplayFormatHelper_1.default.DateFormatter(date, { Pattern: format });
     };
-    return ((0, jsx_runtime_1.jsxs)(Panel_1.default, { color: "var(--ab-color-text-on-primary)", onClick: () => props.enableEditMode(), className: "ab-CommentPopup twa:min-w-[250px]", onKeyDown: (event) => {
+    return ((0, jsx_runtime_1.jsxs)(Panel_1.default, { color: "var(--ab-color-primary-foreground)", onClick: () => props.enableEditMode(), className: "ab-CommentPopup twa:min-w-[250px]", onKeyDown: (event) => {
             if (event.key === 'Escape') {
                 api.commentApi.hideCommentsPopup();
             }

package/src/View/Comments/CommentsPopup.js

@@ -10,7 +10,7 @@ const Panel_1 = tslib_1.__importDefault(require("../../components/Panel"));
 const AdaptableContext_1 = require("../AdaptableContext");
 const PopupPanel_1 = require("../Components/Popups/AdaptablePopup/PopupPanel");
 const AdaptableButton_1 = require("../Components/AdaptableButton");
-const FormatHelper_1 = tslib_1.__importDefault(require("../../Utilities/Helpers/FormatHelper"));
+const DisplayFormatHelper_1 = tslib_1.__importDefault(require("../../Utilities/Helpers/DisplayFormatHelper"));
 const GeneralConstants_1 = require("../../Utilities/Constants/GeneralConstants");
 const Flex_1 = require("../../components/Flex");
 const tableDOMProps = {
@@ -34,7 +34,7 @@ const CellComments = (props) => {
     const isReadOnlyModule = adaptable.api.entitlementApi.getEntitlementAccessLevelForModule('Comment') ===
         GeneralConstants_1.ACCESS_LEVEL_READ_ONLY;
     const formatDate = (date, format) => {
-        return FormatHelper_1.default.DateFormatter(date, { Pattern: format });
+        return DisplayFormatHelper_1.default.DateFormatter(date, { Pattern: format });
     };
     const columnsMap = React.useMemo(() => {
         const columns = {

package/src/View/Components/AdaptableObjectCollection/index.js

@@ -1,14 +1,13 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.AdaptableObjectCollection = void 0;
-const tslib_1 = require("tslib");
 const jsx_runtime_1 = require("react/jsx-runtime");
 const PanelWithRow_1 = require("../Panels/PanelWithRow");
+const utils_1 = require("../../../lib/utils");
 const Flex_1 = require("../../../components/Flex");
-const clsx_1 = tslib_1.__importDefault(require("clsx"));
 const twMerge_1 = require("../../../twMerge");
 const AdaptableObjectCollection = (props) => {
-    return ((0, jsx_runtime_1.jsxs)(Flex_1.Box, { style: props.style, className: (0, twMerge_1.twMerge)('ab-ObjectCollection twa:flex twa:flex-col', props.className), children: [(0, jsx_runtime_1.jsx)(PanelWithRow_1.PanelWithRow, { border: "none", colItems: props.colItems }), (0, jsx_runtime_1.jsx)("div", { className: (0, clsx_1.default)('ab-ObjectCollection__items twa:shadow-none twa:flex-1', {
+    return ((0, jsx_runtime_1.jsxs)(Flex_1.Box, { style: props.style, className: (0, twMerge_1.twMerge)('ab-ObjectCollection twa:flex twa:flex-col', props.className), children: [(0, jsx_runtime_1.jsx)(PanelWithRow_1.PanelWithRow, { border: "none", colItems: props.colItems }), (0, jsx_runtime_1.jsx)("div", { className: (0, utils_1.cn)('ab-ObjectCollection__items twa:shadow-none twa:flex-1', {
                     'twa:overflow-y-visible': props.allowOverflow,
                     'twa:overflow-y-auto': !props.allowOverflow,
                 }), children: props.items })] }));

package/src/View/Components/AdaptableObjectList/AdaptableObjectCompactList.js

@@ -9,6 +9,7 @@ const SimpleButton_1 = tslib_1.__importDefault(require("../../../components/Simp
 const AdaptableContext_1 = require("../../AdaptableContext");
 const Flex_1 = require("../../../components/Flex");
 const Tag_1 = require("../../../components/Tag/Tag");
+const objectListActionButtonStyles_1 = require("./objectListActionButtonStyles");
 const baseClassName = 'ab-Adaptable-Object-Compact-List';
 const ICON_SIZE = 20;
 const AdaptableObjectCompactListItem = (props) => {
@@ -45,7 +46,7 @@ const AdaptableObjectCompactListItem = (props) => {
                         ? React.createElement(objectView.item.view, {
                             data: props.abObject,
                         })
-                        : objectView.item.view, Boolean(objectView.item?.values && objectView.item?.values?.length) && ((0, jsx_runtime_1.jsx)(Flex_1.Box, { className: `${baseClassName}__Item__Values`, children: (0, jsx_runtime_1.jsx)(Tag_1.TagList, { tags: objectView.item.values.map(String) }) }))] }), suspendAction && unSuspendAction && ((0, jsx_runtime_1.jsx)(SimpleButton_1.default, { onMouseDown: handleSuspendUnSuspend, tone: isSuspended ? 'neutral' : 'success', variant: "text", icon: isSuspended ? 'resume' : 'pause' })), (0, jsx_runtime_1.jsx)(Flex_1.Flex, { className: "twa:ml-1 twa:flex-[0_0_auto]", children: deleteAction && ((0, jsx_runtime_1.jsx)(SimpleButton_1.default, { iconSize: ICON_SIZE, icon: "delete", variant: "text", onMouseDown: handleDelete, accessLevel: moduleAccessLevel })) })] }));
+                        : objectView.item.view, Boolean(objectView.item?.values && objectView.item?.values?.length) && ((0, jsx_runtime_1.jsx)(Flex_1.Box, { className: `${baseClassName}__Item__Values`, children: (0, jsx_runtime_1.jsx)(Tag_1.TagList, { tags: objectView.item.values, variant: objectView.item.tagVariant }) }))] }), suspendAction && unSuspendAction && ((0, jsx_runtime_1.jsx)(SimpleButton_1.default, { onMouseDown: handleSuspendUnSuspend, tone: "neutral", variant: "text", iconSize: ICON_SIZE, icon: isSuspended ? 'resume' : 'pause', tooltip: isSuspended ? 'Resume' : 'Suspend', className: (0, objectListActionButtonStyles_1.objectListActionButtonClassName)('suspend', isSuspended ? 'twa:opacity-60' : undefined) })), (0, jsx_runtime_1.jsx)(Flex_1.Flex, { className: "twa:ml-1 twa:flex-[0_0_auto] twa:gap-1", children: deleteAction && ((0, jsx_runtime_1.jsx)(SimpleButton_1.default, { iconSize: ICON_SIZE, icon: "delete", variant: "text", onMouseDown: handleDelete, accessLevel: moduleAccessLevel, className: (0, objectListActionButtonStyles_1.objectListActionButtonClassName)('delete') })) })] }));
 };
 exports.AdaptableObjectCompactListItem = AdaptableObjectCompactListItem;
 const AdaptableObjectCompactList = (props) => {
@@ -69,7 +70,7 @@ const AdaptableObjectCompactList = (props) => {
             dispatch(unSuspendAllAction);
         }
     }, [isAtLeastOneAbObjectActive]);
-    return ((0, jsx_runtime_1.jsxs)(Flex_1.Flex, { flexDirection: "column", className: baseClassName, children: [(0, jsx_runtime_1.jsxs)(Flex_1.Flex, { className: `${baseClassName}__Header twa:text-3`, children: [(0, jsx_runtime_1.jsx)(Flex_1.Flex, { className: `${baseClassName}__Title`, alignItems: 'center', children: props.module.moduleInfo.FriendlyName }), (0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:flex-1" }), suspendAllAction && unSuspendAllAction && ((0, jsx_runtime_1.jsx)(SimpleButton_1.default, { className: "twa:mr-2", onMouseDown: handleSuspendUnsuspendAll, tone: isAtLeastOneAbObjectActive ? 'neutral' : 'success', variant: "raised", icon: isAtLeastOneAbObjectActive ? 'pause' : 'resume', accessLevel: accessLevel, children: isAtLeastOneAbObjectActive ? 'Suspend All' : 'Unsuspend All' })), deleteAllAction && ((0, jsx_runtime_1.jsx)(SimpleButton_1.default, { onMouseDown: () => dispatch(deleteAllAction), variant: "raised", tone: "neutral", accessLevel: accessLevel, children: "Clear All" }))] }), (0, jsx_runtime_1.jsx)(Flex_1.Box, { className: `${baseClassName}__Body`, children: props.abObjects.map((abObject) => {
+    return ((0, jsx_runtime_1.jsxs)(Flex_1.Flex, { flexDirection: "column", className: baseClassName, children: [(0, jsx_runtime_1.jsxs)(Flex_1.Flex, { className: `${baseClassName}__Header twa:text-3`, children: [(0, jsx_runtime_1.jsx)(Flex_1.Flex, { className: `${baseClassName}__Title`, alignItems: 'center', children: props.module.moduleInfo.FriendlyName }), (0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:flex-1" }), suspendAllAction && unSuspendAllAction && ((0, jsx_runtime_1.jsx)(SimpleButton_1.default, { className: "twa:mr-2", onMouseDown: handleSuspendUnsuspendAll, tone: "neutral", variant: "raised", icon: isAtLeastOneAbObjectActive ? 'pause' : 'resume', accessLevel: accessLevel, children: isAtLeastOneAbObjectActive ? 'Suspend All' : 'Resume All' })), deleteAllAction && ((0, jsx_runtime_1.jsx)(SimpleButton_1.default, { onMouseDown: () => dispatch(deleteAllAction), variant: "raised", tone: "neutral", accessLevel: accessLevel, children: "Clear All" }))] }), (0, jsx_runtime_1.jsx)(Flex_1.Box, { className: `${baseClassName}__Body`, children: props.abObjects.map((abObject) => {
                     return ((0, jsx_runtime_1.jsx)(exports.AdaptableObjectCompactListItem, { abObject: abObject, module: props.module }, abObject.Uuid));
                 }) })] }));
 };