devexpress-reporting 23.2.0-build-000-1111 → 23.2.1-alpha-23254-1700

package/designer/tools/generator/_inititalizer.js

@@ -1,14 +1,14 @@
-/**
-* DevExpress HTML/JS Reporting (designer\tools\generator\_inititalizer.js)
-* Version:  23.2.1-build-23191-1448
-* Build date: Jul 10, 2023
-* Copyright (c) 2012 - 2023 Developer Express Inc. ALL RIGHTS RESERVED
-* License: https://www.devexpress.com/Support/EULAs/universal.xml
-*/
-import { ActionLists, addDisposeCallback, appendStaticContextToRootViewModel, CombinedObject, CommonDesignerGenerator, createActionWrappingFunction, DesignerBaseElements, DragDropHandler, DragHelperContent, extend, FieldListProvider, findFirstItemMatchesCondition, formatUnicorn, getControlFullName, getControlTypeName, InlineTextEdit, localizeNoneString, NotifyType, ObjectExplorerProvider, processErrorEvent, ShowMessage, SnapLinesHelper, staticContext, SurfaceSelection, updateSurfaceContentSize } from '@devexpress/analytics-core/analytics-internal';
+/**
+* DevExpress HTML/JS Reporting (designer\tools\generator\_inititalizer.js)
+* Version:  23.2.1-alpha-23254-1700
+* Build date: Sep 11, 2023
+* Copyright (c) 2012 - 2023 Developer Express Inc. ALL RIGHTS RESERVED
+* License: https://www.devexpress.com/Support/EULAs/universal.xml
+*/
+import { ActionLists, addDisposeCallback, appendStaticContextToRootViewModel, CombinedObject, CommonDesignerGenerator, ContextMenuProvider, createActionWrappingFunction, DesignerBaseElements, DragDropHandler, DragHelperContent, extend, FieldListProvider, findFirstItemMatchesCondition, formatUnicorn, getControlFullName, getControlTypeName, InlineTextEdit, koUtils, localizeNoneString, NotifyType, ObjectExplorerProvider, processErrorEvent, ShowMessage, SnapLinesHelper, staticContext, SurfaceSelection, updateSurfaceContentSize } from '@devexpress/analytics-core/analytics-internal';
 import { ActionId as AnalyticActionId } from '@devexpress/analytics-core/analytics-tools';
 import { getLocalization, ModelSerializer, TabInfo } from '@devexpress/analytics-core/analytics-utils';
-import { editorTemplates, ObjectProperties } from '@devexpress/analytics-core/analytics-widgets';
+import { editorTemplates, ObjectProperties, unwrapEditor } from '@devexpress/analytics-core/analytics-widgets';
 import { aceAvailable, availableFonts, formatStringStandardPatterns, propertiesGridEditorsPaddingLeft, TreeListController } from '@devexpress/analytics-core/analytics-widgets-internal';
 import { FullscreenDataSourceWizard, FullscreenWizard, _createDefaultDataSourceWizardState } from '@devexpress/analytics-core/analytics-wizard';
 import config from 'devextreme/core/config';
@@ -16,7 +16,7 @@ import dxScrollView from 'devextreme/ui/scroll_view';
 import * as $ from 'jquery';
 import * as ko from 'knockout';
 import { HandlerUri as ChartInternalHandlerUri } from '../../../chart/_handlerUri';
-import { defaultCulture } from '../../../common/metadata';
+import { defaultCulture } from '../../../common/defaultCulture';
 import { convertMapToKeyValuePair } from '../../../common/types';
 import { createFullscreenComputed, cultureInfo } from '../../../common/utils/_utils';
 import { createPreview } from '../../../viewer/internal/_initializer';
@@ -80,7 +80,7 @@ import { ReportDataSourceService } from '../../services/_reportDataSourceService
 import { ReportPreviewService } from '../../services/_reportPreviewService';
 import { ReportWizardService } from '../../services/_reportWizardService';
 import { ReportDesignerAddOns, ReportDesignerElements } from '../../utils/reportDesignerElements';
-import { controlsFactory, DataBindingMode as UtilsDataBindingMode, DefaultCrossTabControl, formatStringEditorCustomSet, HandlerUri as UtilsHandlerUri, smartTagFactory as UtilsSmartTagFactory } from '../../utils/settings';
+import { controlsFactory, DataBindingMode as UtilsDataBindingMode, DefaultCrossTabControl, formatStringEditorCustomSet, HandlerUri as UtilsHandlerUri, smartTagFactory as UtilsSmartTagFactory, ShowPopularControlActions, TasksSmartTagEnabled, ShowPopularControlTasks, ContextMenuDisabled } from '../../utils/settings';
 import { registerControls } from '../../utils/_registerControls';
 import { registerCustomControls } from '../../utils/_registerCustomControls';
 import { registerCustomGlobalExpressions, registerCustomReportExpressions } from '../../utils/_registerCustomExpressions';
@@ -91,10 +91,11 @@ import { CustomizeLabelPage } from '../../wizard/pages/customizeLabelPage';
 import { ReportType } from '../../wizard/reportWizardState';
 import { createReportWizardState } from '../../wizard/reportWizardStateCreating';
 import { NavigateByReports } from '../navigation/navigateByReports';
-import { ExpressionSmartTag } from '../smartTags/expressionSmartTag';
+import { ExpressionSmartTag, TasksSmartTag } from '../smartTags/expressionSmartTag';
 import { SmartTagModel } from '../smartTags/smartTagContainer';
 import { ReportMenuSettings } from './_reportMenuSettings';
 import { ReportDialogSettings, WizardsInitializerSettings } from './_settings';
+import { ChartActions } from '../../actions/chartActions';
 export class ReportDesignerInitializer extends CommonDesignerGenerator {
     constructor(options) {
         super();
@@ -290,20 +291,35 @@ export class ReportDesignerInitializer extends CommonDesignerGenerator {
     }
     addErrorPanelViewModel(element, options) {
         this.addElement('errorPanelViewModel', () => {
-            var rightPosition = ko.computed(() => {
+            var getRightPositionSize = () => {
+                return this.buildingModel.designMode() ?
+                    this.buildingModel.tabPanel.headerWidth :
+                    this.buildingModel.reportPreviewModel && this.buildingModel.reportPreviewModel.tabPanel.headerWidth;
+            };
+            var rightPosition = ko.observable(0);
+            var dispose = null;
+            var subscribeDesignMode = () => {
+                dispose && dispose();
                 if (this.buildingModel.designMode()) {
-                    return this.buildingModel.tabPanel.headerWidth();
+                    dispose = this.buildingModel.tabPanel.events.on('headerWidthChanged', (args) => {
+                        rightPosition(getRightPositionSize());
+                    });
                 }
                 else {
-                    return this.buildingModel.reportPreviewModel && this.buildingModel.reportPreviewModel.tabPanel.headerWidth();
+                    dispose = this.buildingModel.reportPreviewModel.tabPanel.events.on('headerWidthChanged', (args) => {
+                        rightPosition(getRightPositionSize());
+                    });
                 }
-            });
+                rightPosition(getRightPositionSize());
+            };
+            subscribeDesignMode();
+            this._addDisposable(this.buildingModel.designMode.subscribe(() => subscribeDesignMode()));
             var leftPosition = ko.computed(() => {
                 return this.buildingModel.designMode() ? 96 : 0;
             });
             var errorPanel = new ErrorPanelViewModel(Object.assign(Object.assign({}, options), { controlScrollingTool: this.buildingModel.controlScrollingTool, controlsHelper: this.buildingModel.controlsHelper, editableObject: this.buildingModel.editableObject, selection: this.buildingModel.selection, undoEngine: () => this.buildingModel.undoEngine(), onClick: () => {
                     if (!this.buildingModel.designMode()) {
-                        this.buildingModel.reportPreviewModel.reportPreview.previewVisible(false);
+                        this.buildingModel.reportPreviewModel.reportPreview.previewVisible = false;
                         this.buildingModel.reportPreviewModel.reportPreview.deactivate();
                     }
                     this.buildingModel.tabPanel.selectTab({
@@ -313,7 +329,7 @@ export class ReportDesignerInitializer extends CommonDesignerGenerator {
                     left: leftPosition,
                     right: rightPosition
                 } }));
-            errorPanel._disposables.push(rightPosition, leftPosition);
+            errorPanel._disposables.push({ dispose }, leftPosition);
             this._addDisposable(this._reportcontext.subscribe((newVal) => {
                 errorPanel.clear();
                 if (newVal != null) {
@@ -415,11 +431,14 @@ export class ReportDesignerInitializer extends CommonDesignerGenerator {
         })
             .done((reportPreviewModel) => {
             this.addElement('reportPreviewModel', () => {
-                this._addDisposable(reportPreviewModel.reportPreview.previewVisible.subscribe((newValue) => {
-                    this.buildingModel.designMode(!newValue);
-                    if (!newValue && this._updateCallback)
-                        this._updateCallback();
-                }));
+                this._addDisposable({
+                    dispose: reportPreviewModel.reportPreview.events.on('previewVisibleChanged', (args) => {
+                        const newValue = args.newValue;
+                        this.buildingModel.designMode(!newValue);
+                        if (!newValue && this._updateCallback)
+                            this._updateCallback();
+                    })
+                });
                 return reportPreviewModel;
             });
             this._addDisposable(reportPreviewModel);
@@ -565,9 +584,10 @@ export class ReportDesignerInitializer extends CommonDesignerGenerator {
     }
     createControlProperties(editors, groups, accessibilityProvider) {
         var properties = super.createControlProperties(editors, groups, accessibilityProvider);
-        properties.createEditorAddOn = (editor) => {
-            var editorAddOn = new ValueEditorAddOn(editor, properties.popupService);
-            var editorExression = new ExpressionEditorAddOn(editor, properties.popupService, 'dxrd-svg-properties-propertyexpression');
+        properties.createEditorAddOn = (_editor) => {
+            const editor = unwrapEditor(_editor);
+            const editorAddOn = new ValueEditorAddOn(editor, properties.popupService);
+            const editorExression = new ExpressionEditorAddOn(editor, properties.popupService, 'dxrd-svg-properties-propertyexpression');
             editor._disposables.push(editorAddOn, editorExression);
             return {
                 templateName: 'dx-editor-addons',
@@ -599,6 +619,8 @@ export class ReportDesignerInitializer extends CommonDesignerGenerator {
         extend(smartTagFactory, {
             'default': (reportElement) => {
                 var result = [];
+                if (TasksSmartTagEnabled())
+                    result.push(new TasksSmartTag(reportElement, this.buildingModel.popularProperties));
                 if (UtilsDataBindingMode() !== DataBindingMode.Bindings)
                     result.push(new ExpressionSmartTag(reportElement, this.buildingModel.activatedExpressionEditor));
                 return result;
@@ -616,18 +638,27 @@ export class ReportDesignerInitializer extends CommonDesignerGenerator {
         return this;
     }
     _createPropertiesTab() {
-        return new TabInfo({
+        var getVisible = () => { return !!this.buildingModel.model(); };
+        var getDisabled = () => {
+            var _a, _b, _c;
+            return this.buildingModel.propertyGrid.focusedItem() instanceof Array ||
+                (!((_c = (_b = (_a = this.options.data) === null || _a === void 0 ? void 0 : _a.dataSourceSettings) === null || _b === void 0 ? void 0 : _b.allowEditDataSource) !== null && _c !== void 0 ? _c : true) && this.buildingModel.propertyGrid.focusedItem() instanceof ComponentsModel);
+        };
+        var tabInfo = new TabInfo({
             text: 'Properties',
             template: 'dxrd-propertiestab',
             model: this.buildingModel.propertyGrid,
             localizationId: 'AnalyticsCoreStringId.Cmd_Properties',
-            visible: ko.pureComputed(() => { return !!this.buildingModel.model(); }),
-            disabled: ko.pureComputed(() => {
-                var _a, _b, _c;
-                return this.buildingModel.propertyGrid.focusedItem() instanceof Array ||
-                    (!((_c = (_b = (_a = this.options.data) === null || _a === void 0 ? void 0 : _a.dataSourceSettings) === null || _b === void 0 ? void 0 : _b.allowEditDataSource) !== null && _c !== void 0 ? _c : true) && this.buildingModel.propertyGrid.focusedItem() instanceof ComponentsModel);
-            })
+            visible: getVisible(),
+            disabled: getDisabled()
         });
+        this._addDisposable(this.buildingModel.model.subscribe((newVal) => {
+            tabInfo.visible = getVisible();
+        }));
+        this._addDisposable(this.buildingModel.propertyGrid.focusedItem.subscribe((newVal) => {
+            tabInfo.disabled = getDisabled();
+        }));
+        return tabInfo;
     }
     _createExpressionsTab(context) {
         var expressionGridModel = ko.computed(() => {
@@ -641,6 +672,10 @@ export class ReportDesignerInitializer extends CommonDesignerGenerator {
         expressionGrid = new ObjectProperties(expressionGridModel);
         this._addDisposable(expressionGrid);
         this._addDisposable(expressionGridModel);
+        var getVisible = () => { return this.buildingModel.model() && this.buildingModel.model()._dataBindingMode() !== DataBindingMode.Bindings; };
+        var getDisabled = () => {
+            return !expressionGridModel();
+        };
         var expressionTab = new TabInfo({
             text: 'Expressions',
             template: 'dxrd-expressions-tab',
@@ -648,20 +683,30 @@ export class ReportDesignerInitializer extends CommonDesignerGenerator {
             localizationId: 'DevExpress.XtraReports.UI.XRControl.Expressions',
             imageClassName: 'expressions',
             imageTemplateName: 'dxrd-svg-tabs-expressions',
-            visible: ko.pureComputed(() => { return this.buildingModel.model() && this.buildingModel.model()._dataBindingMode() !== DataBindingMode.Bindings; }),
-            disabled: ko.pureComputed(() => {
-                return !expressionGridModel();
-            })
+            visible: getVisible(),
+            disabled: getDisabled(),
         });
-        var currentFilter = undefined;
-        this._addDisposable(expressionTab.active.subscribe((newVal) => {
-            if (newVal && expressionTab.visible()) {
-                currentFilter = this.buildingModel.controlsStore.getFilter();
-                this.buildingModel.controlsStore.setFilter(isControl);
-            }
-            else if (currentFilter !== undefined)
-                this.buildingModel.controlsStore.setFilter(currentFilter);
+        this._addDisposable(this.buildingModel.model.subscribe((newVal) => {
+            if (newVal)
+                this._addDisposable(newVal._dataBindingMode.subscribe((newVal) => {
+                    expressionTab.visible = getVisible();
+                }));
+            expressionTab.visible = getVisible();
+        }));
+        this._addDisposable(expressionGridModel.subscribe((newVal) => {
+            expressionTab.disabled = getDisabled();
         }));
+        var currentFilter = undefined;
+        this._addDisposable({
+            dispose: expressionTab.events.on('activeChanged', (args) => {
+                if (expressionTab.active && expressionTab.visible) {
+                    currentFilter = this.buildingModel.controlsStore.getFilter();
+                    this.buildingModel.controlsStore.setFilter(isControl);
+                }
+                else if (currentFilter !== undefined)
+                    this.buildingModel.controlsStore.setFilter(currentFilter);
+            })
+        });
         return expressionTab;
     }
     _createReportExplorerTab() {
@@ -672,21 +717,26 @@ export class ReportDesignerInitializer extends CommonDesignerGenerator {
             this.buildingModel.tabPanel.selectTab({ model: propertiesTab });
         }, new ReportExplorerDragDropHandler(this.buildingModel.canAddItems, this.buildingModel.surface, this.buildingModel.selection, this.buildingModel.undoEngine, this.buildingModel.dragHelperContent), this.buildingModel.selection, (_a = this.options.data) === null || _a === void 0 ? void 0 : _a.dataSourceSettings);
         this._addDisposable(reportExplorer);
-        return new TabInfo({
+        var getVisible = () => { return !!this.buildingModel.model(); };
+        var tabInfo = new TabInfo({
             text: 'Report Explorer',
             template: 'dxrd-reportexplorerwrapper',
             model: reportExplorer,
             localizationId: 'ReportStringId.UD_Title_ReportExplorer',
             imageClassName: 'reportexplorer',
             imageTemplateName: 'dxrd-svg-tabs-reportexplorer',
-            visible: ko.pureComputed(() => { return !!this.buildingModel.model(); })
+            visible: getVisible()
         });
+        this._addDisposable(this.buildingModel.model.subscribe(() => {
+            tabInfo.visible = getVisible();
+        }));
+        return tabInfo;
     }
     _createFieldListTab(designerCallbacks, startDataSourceWizard) {
         var _a, _b, _c;
         var treeListOptions = {
             itemsProvider: this.buildingModel.fieldListProvider,
-            factory: new FieldListItemFactory(ko.observable(false)),
+            factory: new FieldListItemFactory(),
             selectedPath: this.buildingModel.selectedPath,
             treeListController: new FieldListController(this.buildingModel.fieldListActionProviders, createActionWrappingFunction('WrapForFieldList', (model, handler) => {
                 this.buildingModel.undoEngine().start();
@@ -696,7 +746,25 @@ export class ReportDesignerInitializer extends CommonDesignerGenerator {
                     this.buildingModel.selectedPath(model.path + '.' + ko.unwrap(result.name));
                 }
             }), this.buildingModel.fieldDragHandler, designerCallbacks.customizeFieldListActions)
-        }, fieldListModel = {
+        };
+        var useContextMenu = ko.observable(true);
+        var actions = ko.observable([]);
+        this.addDisposable(treeListOptions.treeListController.subscribeOnSelectedItemChange(newValue => {
+            var _a, _b;
+            useContextMenu((_b = (_a = this.getModel().parts) === null || _a === void 0 ? void 0 : _a.some(part => part.id === ReportDesignerElements.ContextMenu)) !== null && _b !== void 0 ? _b : true);
+            if (useContextMenu() && treeListOptions.treeListController.selectedItem)
+                actions(treeListOptions.treeListController.getActions(treeListOptions.treeListController.selectedItem));
+            else
+                actions([]);
+        }));
+        var fieldListContextMenu = new ContextMenuProvider({
+            actions: actions,
+            target: '.' + this.buildingModel.containerClass + ' .dxrd-fieldslist-context-menu-container',
+            cssClass: 'dx-designer-viewport',
+            getClickAtionParams: () => treeListOptions.treeListController.selectedItem
+        });
+        this.addContextMenu(fieldListContextMenu);
+        var fieldListModel = {
             treeListOptions: treeListOptions,
             startWizard: () => {
                 startDataSourceWizard();
@@ -707,16 +775,23 @@ export class ReportDesignerInitializer extends CommonDesignerGenerator {
             },
             addDataSourceButtonText: getLocalization('Add Data Source', 'ASPxReportsStringId.ReportDesigner_FieldList_AddDataSource'),
             allowAddDataSource: (_c = (_b = (_a = this.options.data) === null || _a === void 0 ? void 0 : _a.dataSourceSettings) === null || _b === void 0 ? void 0 : _b.allowAddDataSource) !== null && _c !== void 0 ? _c : true,
+            fieldListContextMenu: fieldListContextMenu,
+            useContextMenu: useContextMenu
         };
-        return new TabInfo({
+        var getVisible = () => { return !!this.buildingModel.model(); };
+        var tabInfo = new TabInfo({
             text: 'Fields',
             template: 'dxrd-fieldlistwrapper',
             model: fieldListModel,
             localizationId: 'ReportStringId.UD_Title_FieldList',
             imageClassName: 'fieldlist',
             imageTemplateName: 'dxrd-svg-tabs-fieldlist',
-            visible: ko.pureComputed(() => { return !!this.buildingModel.model(); })
+            visible: getVisible()
         });
+        this._addDisposable(this.buildingModel.model.subscribe(() => {
+            tabInfo.visible = getVisible();
+        }));
+        return tabInfo;
     }
     addTabPanel(panel, addTabInfo = () => {
         return [
@@ -732,7 +807,7 @@ export class ReportDesignerInitializer extends CommonDesignerGenerator {
         var contextSubscription = this._reportcontext.subscribe((newVal) => {
             if (!!newVal) {
                 contextSubscription.dispose();
-                this.buildingModel.tabPanel.collapsed(false);
+                this.buildingModel.tabPanel.collapsed = false;
             }
         });
         this._addDisposable(contextSubscription);
@@ -754,7 +829,7 @@ export class ReportDesignerInitializer extends CommonDesignerGenerator {
     addShowPreviewMethod() {
         this.addElement('showPreview', () => () => {
             var reportPreview = this.buildingModel.reportPreviewModel.reportPreview;
-            reportPreview.previewVisible(true);
+            reportPreview.previewVisible = true;
             if (!this.buildingModel.model()) {
                 var subscription = this.buildingModel.model.subscribe((newVal) => {
                     subscription.dispose();
@@ -825,7 +900,7 @@ export class ReportDesignerInitializer extends CommonDesignerGenerator {
             verticalScrollOffset(verticalOffset);
         }));
         this._updateCallback = () => {
-            if (!this.buildingModel.reportPreviewModel.reportPreview.previewVisible())
+            if (!this.buildingModel.reportPreviewModel.reportPreview.previewVisible)
                 updateSurfaceContentSize_();
         };
         window.addEventListener('resize', this._updateCallback);
@@ -838,9 +913,11 @@ export class ReportDesignerInitializer extends CommonDesignerGenerator {
         this.addElement('horizontalScrollOffset', () => horizontalScrollOffset);
         this._addDisposable(reportHeight);
         this._addDisposable(reportWidth);
-        this._addDisposable(this.buildingModel.tabPanel.width.subscribe(() => {
-            updateSurfaceContentSize_async();
-        }));
+        this._addDisposable({
+            dispose: this.buildingModel.tabPanel.events.on('widthChanged', (args) => {
+                updateSurfaceContentSize_async();
+            })
+        });
         this._addDisposable(this.buildingModel.localizationEditor.width.subscribe(() => {
             updateSurfaceContentSize_async();
         }));
@@ -1142,24 +1219,34 @@ export class ReportDesignerInitializer extends CommonDesignerGenerator {
                 selected: designerModel.validationMode,
                 visible: true,
                 hasSeparator: true,
+                isContextMenuAction: false,
                 clickAction: () => {
                     designerModel.validationMode(!designerModel.validationMode());
                 },
             });
+            var getFullscreenActionImageTemplateName = (fullScreen) => fullScreen ? 'dxrd-svg-toolbar-fullscreen-exit' : 'dxrd-svg-toolbar-fullscreen';
             actions.push({
                 id: ActionId.FullScreen,
                 text: 'Full Screen',
                 displayText: () => getLocalization('Full Screen', 'ASPxReportsStringId.ToolBarItemText_FullScreen'),
                 imageClassName: 'dxrd-image-fullscreen',
-                imageTemplateName: () => designerModel.fullScreen() ? 'dxrd-svg-toolbar-fullscreen-exit' : 'dxrd-svg-toolbar-fullscreen',
-                disabled: ko.observable(false),
-                selected: designerModel.fullScreen,
+                imageTemplateName: getFullscreenActionImageTemplateName(koUtils.unwrap(designerModel.fullScreen)),
+                setImageTemplateNameChangedEvent: (callback) => {
+                    const handler = (newValue) => callback(getFullscreenActionImageTemplateName(newValue));
+                    const dispose = designerModel.fullScreen.subscribe(handler);
+                    return () => dispose();
+                },
+                selected: koUtils.unwrap(designerModel.fullScreen),
+                setSelectedChangedEvent: (callback) => {
+                    const dispose = designerModel.fullScreen.subscribe(callback);
+                    return () => dispose();
+                },
                 visible: true,
+                isContextMenuAction: false,
                 clickAction: () => {
                     designerModel.fullScreen(!designerModel.fullScreen());
                 },
             });
-            this._disposables.push(designerModel.fullScreen);
             if (scriptsEditor) {
                 actions.push({
                     id: ActionId.Scripts,
@@ -1174,10 +1261,17 @@ export class ReportDesignerInitializer extends CommonDesignerGenerator {
                         scriptsEditor.initialize();
                         scriptsEditor.editorVisible(true);
                     },
-                    hasSeparator: true
+                    hasSeparator: true,
+                    isContextMenuAction: false,
                 });
             }
             if (reportPreview) {
+                let visibilityChangedCallback = null;
+                this._addDisposable({
+                    dispose: reportPreview.events.on('previewVisibleChanged', (args) => {
+                        visibilityChangedCallback && visibilityChangedCallback(args.newValue);
+                    })
+                });
                 var previewAction = {
                     id: ActionId.Preview,
                     text: 'Preview',
@@ -1186,10 +1280,17 @@ export class ReportDesignerInitializer extends CommonDesignerGenerator {
                     imageTemplateName: 'dxrd-svg-preview-print_preview',
                     templateName: reportPreview.canSwitchToDesigner ? 'dxrd-toolbar-two-way-switch' : undefined,
                     disabled: ko.pureComputed(() => { return !report(); }),
-                    visible: ko.pureComputed(() => { return !reportPreview.previewVisible(); }),
+                    visible: !reportPreview.previewVisible,
+                    setVisibleChangedEvent: (callback) => {
+                        visibilityChangedCallback = (newValue) => callback(!newValue);
+                        return () => {
+                            visibilityChangedCallback = undefined;
+                        };
+                    },
                     hotKey: { ctrlKey: true, keyCode: 'P'.charCodeAt(0) },
+                    isContextMenuAction: false,
                     clickAction: () => {
-                        reportPreview.previewVisible(true);
+                        reportPreview.previewVisible = true;
                         reportPreview.initialize(ReportPreviewService.initializePreview(report()));
                     },
                     hasSeparator: true
@@ -1212,6 +1313,7 @@ export class ReportDesignerInitializer extends CommonDesignerGenerator {
                     imageTemplateName: 'dxrd-svg-menu-add_datasource',
                     disabled: ko.pureComputed(() => { return !report(); }),
                     visible: false,
+                    isContextMenuAction: false,
                     clickAction: () => {
                         dataSourceWizard.initialize(_createDefaultDataSourceWizardState());
                         dataSourceWizard.start();
@@ -1319,18 +1421,20 @@ export class ReportDesignerInitializer extends CommonDesignerGenerator {
         var disposableProviders = [
             new ReportElementActions(this.buildingModel.surface, this.buildingModel.selection),
             new ElementsGroupActions(this.buildingModel.surface, this.buildingModel.selection),
-            new ReportActions(this._designerCallbacks.componentAdded),
+            new ReportActions(this._designerCallbacks.componentAdded, this.buildingModel),
             new TableRowActions(this.buildingModel.selection, this._designerCallbacks.componentAdded, isDisabled),
             new TableCellActions(this.buildingModel.selection, this._designerCallbacks.componentAdded, isDisabled),
             new TextElementAction(this.buildingModel.selection),
             new TableCellGroupActions(this.buildingModel.selection),
             new PdfContentActions(this.buildingModel.selection, isDisabled),
             new CrossTabActions(this._converters, isDisabled),
-            new PivotGridActions(this._converters, isDisabled)
+            new PivotGridActions(this._converters, isDisabled),
+            new ChartActions(this.buildingModel),
         ];
         this._disposables.push(...disposableProviders);
         settings.actionProviders = disposableProviders;
         settings.createDefaultGroupAction(this.buildingModel.editableObject, this.buildingModel.undoEngine);
+        settings.createDefaultContextMenuActions(this.buildingModel.editableObject, this.buildingModel.undoEngine);
     }) {
         super.addContextActions(func);
         return this;
@@ -1405,14 +1509,17 @@ export class ReportDesignerInitializer extends CommonDesignerGenerator {
             parts.splice(index, 1);
         });
         parts.push({ id: DesignerBaseElements.GroupedToolbox, templateName: DesignerBaseElements.GroupedToolbox, model: this.buildingModel }, { id: ReportDesignerElements.NavigationPanel, templateName: ReportDesignerElements.NavigationPanel, model: this.buildingModel.navigateByReports }, { id: null, templateName: ReportDesignerElements.ReportDialog, model: this.buildingModel.saveReportDialog }, { id: null, templateName: ReportDesignerElements.ReportDialog, model: this.buildingModel.saveReportDialogLight }, { id: null, templateName: ReportDesignerElements.ReportDialog, model: this.buildingModel.openReportDialog }, { id: ReportDesignerElements.MenuButton, templateName: ReportDesignerElements.MenuButton, model: this.buildingModel }, this._createChartDesignerPart(this._reportcontext), { id: null, templateName: ReportDesignerElements.Parameters, model: this.buildingModel.parameters }, ...this._converters.map(model => { return { id: null, templateName: ReportDesignerElements.ReportConverterDialog, model: model }; }));
+        if (!ContextMenuDisabled())
+            parts.push({ id: ReportDesignerElements.ContextMenu, templateName: ReportDesignerElements.ContextMenu, model: this.buildingModel });
         return parts;
     }) {
         super.addParts(func);
+        this.addElement('ContextMenuDisabled', () => ko.computed(() => ContextMenuDisabled()));
         this._designerCallbacks.customizeParts && this._designerCallbacks.customizeParts(this.buildingModel.parts);
         return this;
     }
     addDefaultAddons(addons = [
-        { id: ReportDesignerAddOns.Preview, templateName: ReportDesignerAddOns.Preview, model: this.buildingModel.reportPreviewModel },
+        { id: ReportDesignerAddOns.Preview, templateName: ReportDesignerAddOns.Preview, model: this.buildingModel.reportPreviewModel.getViewModel() },
         this._createWizardPart('ReportWizard', this.buildingModel.wizard),
         { id: ReportDesignerAddOns.DataSourceWizard, templateName: ReportDesignerAddOns.DataSourceWizard.split('#')[0], model: this.buildingModel.dataSourceWizard },
         this._createWizardPart('MultiQueryDataSourceWizard', this.buildingModel.multiQueryDataSourceWizard),
@@ -1560,9 +1667,18 @@ export class ReportDesignerInitializer extends CommonDesignerGenerator {
     addPopularProperties(controlsFactory, accessibilityProvider) {
         super.addPopularProperties(controlsFactory, this._accessibilityProvider);
         this.addElement('popularVisible', () => ko.pureComputed(() => {
-            return this.buildingModel.popularProperties._editors().some((x) => { return x.visible(); }) ||
-                this.buildingModel.contextActions && this.buildingModel.contextActions().length > 0;
+            const condition = ShowPopularControlTasks() ? (editor) => editor._get('visible') : (editor) => editor._get('visible') && editor.isComplexEditor;
+            return this.buildingModel.popularProperties._get('_editors').some(condition) ||
+                this.buildingModel.contextActions && this.buildingModel.contextActions().length > 0
+                    && this.buildingModel.contextActions().some(action => !action.isContextMenuAction);
+        }));
+        this.addElement('popularVisibleEditors', () => ko.pureComputed(() => {
+            return ShowPopularControlTasks() ? this.buildingModel.popularProperties._get('_editors')
+                : this.buildingModel.popularProperties._get('_editors').filter(editor => editor.isComplexEditor);
         }));
+        var showPopularActions = ko.observable(ShowPopularControlActions());
+        ShowPopularControlActions.subscribe((newValue) => showPopularActions(newValue));
+        this.addElement('ShowPopularControlActions', () => showPopularActions);
         return this;
     }
     addInlineTextEdit(func) {

package/designer/tools/generator/_qBRequestWrapper.d.ts

@@ -1,9 +1,9 @@
-/**
-* DevExpress HTML/JS Reporting (designer\tools\generator\_qBRequestWrapper.d.ts)
-* Version:  23.2.1-build-23191-1448
-* Build date: Jul 10, 2023
-* Copyright (c) 2012 - 2023 Developer Express Inc. ALL RIGHTS RESERVED
-* License: https://www.devexpress.com/Support/EULAs/universal.xml
-*/
+/**
+* DevExpress HTML/JS Reporting (designer\tools\generator\_qBRequestWrapper.d.ts)
+* Version:  23.2.1-alpha-23254-1700
+* Build date: Sep 11, 2023
+* Copyright (c) 2012 - 2023 Developer Express Inc. ALL RIGHTS RESERVED
+* License: https://www.devexpress.com/Support/EULAs/universal.xml
+*/
 import { RequestWrapper } from '@devexpress/analytics-core/queryBuilder-utils';
-export declare var QBRequestWrapper: (newVal?: RequestWrapper) => RequestWrapper;
+export declare var QBRequestWrapper: import("@devexpress/analytics-core/analytics-internal").IGlobalSubscribableValue<RequestWrapper>;

package/designer/tools/generator/_qBRequestWrapper.js

@@ -1,10 +1,10 @@
-/**
-* DevExpress HTML/JS Reporting (designer\tools\generator\_qBRequestWrapper.js)
-* Version:  23.2.1-build-23191-1448
-* Build date: Jul 10, 2023
-* Copyright (c) 2012 - 2023 Developer Express Inc. ALL RIGHTS RESERVED
-* License: https://www.devexpress.com/Support/EULAs/universal.xml
-*/
+/**
+* DevExpress HTML/JS Reporting (designer\tools\generator\_qBRequestWrapper.js)
+* Version:  23.2.1-alpha-23254-1700
+* Build date: Sep 11, 2023
+* Copyright (c) 2012 - 2023 Developer Express Inc. ALL RIGHTS RESERVED
+* License: https://www.devexpress.com/Support/EULAs/universal.xml
+*/
 import { createGlobalModuleVariableFunc } from '@devexpress/analytics-core/analytics-internal';
 import { RequestWrapper } from '@devexpress/analytics-core/queryBuilder-utils';
 export var QBRequestWrapper = createGlobalModuleVariableFunc(new RequestWrapper());

package/designer/tools/generator/_reportMenuSettings.d.ts

@@ -1,10 +1,10 @@
-/**
-* DevExpress HTML/JS Reporting (designer\tools\generator\_reportMenuSettings.d.ts)
-* Version:  23.2.1-build-23191-1448
-* Build date: Jul 10, 2023
-* Copyright (c) 2012 - 2023 Developer Express Inc. ALL RIGHTS RESERVED
-* License: https://www.devexpress.com/Support/EULAs/universal.xml
-*/
+/**
+* DevExpress HTML/JS Reporting (designer\tools\generator\_reportMenuSettings.d.ts)
+* Version:  23.2.1-alpha-23254-1700
+* Build date: Sep 11, 2023
+* Copyright (c) 2012 - 2023 Developer Express Inc. ALL RIGHTS RESERVED
+* License: https://www.devexpress.com/Support/EULAs/universal.xml
+*/
 import { MenuSettings } from '@devexpress/analytics-core/analytics-internal';
 import * as ko from 'knockout';
 export declare class ReportMenuSettings extends MenuSettings {

package/designer/tools/generator/_reportMenuSettings.js

@@ -1,10 +1,10 @@
-/**
-* DevExpress HTML/JS Reporting (designer\tools\generator\_reportMenuSettings.js)
-* Version:  23.2.1-build-23191-1448
-* Build date: Jul 10, 2023
-* Copyright (c) 2012 - 2023 Developer Express Inc. ALL RIGHTS RESERVED
-* License: https://www.devexpress.com/Support/EULAs/universal.xml
-*/
+/**
+* DevExpress HTML/JS Reporting (designer\tools\generator\_reportMenuSettings.js)
+* Version:  23.2.1-alpha-23254-1700
+* Build date: Sep 11, 2023
+* Copyright (c) 2012 - 2023 Developer Express Inc. ALL RIGHTS RESERVED
+* License: https://www.devexpress.com/Support/EULAs/universal.xml
+*/
 import { MenuSettings } from '@devexpress/analytics-core/analytics-internal';
 import * as events from 'devextreme/events';
 import * as ko from 'knockout';

package/designer/tools/generator/_settings.d.ts

@@ -1,10 +1,10 @@
-/**
-* DevExpress HTML/JS Reporting (designer\tools\generator\_settings.d.ts)
-* Version:  23.2.1-build-23191-1448
-* Build date: Jul 10, 2023
-* Copyright (c) 2012 - 2023 Developer Express Inc. ALL RIGHTS RESERVED
-* License: https://www.devexpress.com/Support/EULAs/universal.xml
-*/
+/**
+* DevExpress HTML/JS Reporting (designer\tools\generator\_settings.d.ts)
+* Version:  23.2.1-alpha-23254-1700
+* Build date: Sep 11, 2023
+* Copyright (c) 2012 - 2023 Developer Express Inc. ALL RIGHTS RESERVED
+* License: https://www.devexpress.com/Support/EULAs/universal.xml
+*/
 import { FieldListProvider, IDataSourceInfo, ILocalizationSettings, SurfaceSelection } from '@devexpress/analytics-core/analytics-internal';
 import { IItemsProvider, UndoEngine } from '@devexpress/analytics-core/analytics-utils';
 import { DataSourceWizard, FullscreenDataSourceWizard, IDataSourceWizardConnectionStrings, MultiQueryDataSourceWizard, PageFactory } from '@devexpress/analytics-core/analytics-wizard';
@@ -56,7 +56,7 @@ export interface IReportUriSettings {
     previewUri?: string;
 }
 export interface PreviewOptions {
-    element: Element;
+    element: HTMLElement;
     callbacks: IPreviewCustomizationHandler;
     localizationSettings?: ILocalizationSettings;
     parametersInfo?: IReportParametersInfo;

package/designer/tools/generator/_settings.js

@@ -1,10 +1,10 @@
-/**
-* DevExpress HTML/JS Reporting (designer\tools\generator\_settings.js)
-* Version:  23.2.1-build-23191-1448
-* Build date: Jul 10, 2023
-* Copyright (c) 2012 - 2023 Developer Express Inc. ALL RIGHTS RESERVED
-* License: https://www.devexpress.com/Support/EULAs/universal.xml
-*/
+/**
+* DevExpress HTML/JS Reporting (designer\tools\generator\_settings.js)
+* Version:  23.2.1-alpha-23254-1700
+* Build date: Sep 11, 2023
+* Copyright (c) 2012 - 2023 Developer Express Inc. ALL RIGHTS RESERVED
+* License: https://www.devexpress.com/Support/EULAs/universal.xml
+*/
 import { ModelSerializer } from '@devexpress/analytics-core/analytics-utils';
 import { DataSourceType, _createDataSourceFullscreenWizard, _createDataSourceWizard, _createMultiQueryDataSourceWizard, _DataSourceWizardOptions, _MultiQueryDataSourceWizardOptions, _registerMultiQueryDataSourcePages } from '@devexpress/analytics-core/analytics-wizard';
 import * as $ from 'jquery';