devexpress-reporting 23.1.5 → 23.2.1-alpha-23254-1700

package/viewer/internal/_exportHandler.js

@@ -1,18 +1,24 @@
 /**
 * DevExpress HTML/JS Reporting (viewer\internal\_exportHandler.js)
-* Version:  23.1.5
-* Build date: Aug 29, 2023
+* 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 { formatUnicorn, StringId } from '@devexpress/analytics-core/analytics-internal';
-import { Disposable, getLocalization, _isFetchConfigured } from '@devexpress/analytics-core/analytics-utils';
-import { getTemplate } from '@devexpress/analytics-core/analytics-widgets';
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+import { formatUnicorn } from '@devexpress/analytics-core/analytics-internal-native';
+import { BaseRenderingModel, mutable } from '@devexpress/analytics-core/analytics-serializer-native';
+import { getLocalization, _isFetchConfigured } from '@devexpress/analytics-core/analytics-utils-native';
 import browser from 'devextreme/core/utils/browser';
 import * as $ from 'jquery';
-import * as ko from 'knockout';
 import { generateGuid, isIOS, isAndroid, isMobile } from '../../common/utils/_utils';
 import { AsyncExportApproach, HandlerUri, ReportServerDownloadUri } from '../settings';
+import { createExportHandlerViewModel, updateExportHandlerViewModel } from './_exportHandler.viewModel';
 import { PreviewRequestWrapper } from './_previewRequestWrapper';
 import { safelyRunWindowOpen } from './_utils';
 export class ExportResultRequestData {
@@ -22,30 +28,13 @@ export class ExportResultRequestData {
         this.QueryParameters = {};
     }
 }
-export class ExportHandler extends Disposable {
+export class ExportHandler extends BaseRenderingModel {
     constructor(exportSetting, preview) {
         super();
         this.preview = preview;
-        this.exportActionUri = ko.observable(null);
-        this.exportFormData = ko.observable([]);
-        this.reportDisplayName = ko.observable(null);
-        this.popupVisible = ko.observable(false);
-        this.popupWidth = ko.observable(510);
-        this.popupHeight = ko.observable('auto');
         this.exportingFrameName = 'dxrd-exporting-frame' + generateGuid();
-        this.popupButtons = [
-            {
-                toolbar: 'bottom', location: 'after', widget: 'dxButton',
-                options: {
-                    text: getLocalization('OK', StringId.DataAccessBtnOK), type: 'default', stylingMode: 'contained',
-                    onClick: () => this.popupVisible(false)
-                }
-            }
-        ];
         this.printingLinkCallback = () => { };
-        this.printingTextPrefix = ko.observable('');
-        this.printingTextPostfix = ko.observable('');
-        this.getPopupTitle = () => this.reportDisplayName() || '';
+        this.getPopupTitle = () => this.reportDisplayName || '';
         this._exportResultRequestData = new ExportResultRequestData();
         this._showPrintNotificationDialog = true;
         this._useSameTabExport = true;
@@ -92,6 +81,13 @@ export class ExportHandler extends Disposable {
                 this._showPrintNotificationDialog = exportSetting.showPrintNotificationDialog;
         }
     }
+    onPropertyChanged(args) { }
+    createViewModel() {
+        return createExportHandlerViewModel.call(this, super.createViewModel());
+    }
+    updateViewModel(args) {
+        updateExportHandlerViewModel.call(this, args);
+    }
     _getUrlObject() {
         return window.URL || window['webkitURL'] || window['mozURL'] || window['msURL'] || window['oURL'];
     }
@@ -134,26 +130,17 @@ export class ExportHandler extends Disposable {
             worker.postMessage('start');
         }
     }
-    _clearExportingFrame() {
+    clearExportTools() {
         if (this._isNewBrowser()) {
             var iframe = this.exportingFrame.contentWindow;
             iframe && iframe.location.replace('about:blank');
         }
+        this.printingLinkCallback = () => { };
+        this.popupVisible = false;
     }
     _initPrintingWindow() {
-        var printingTextParts = getLocalization('If the operation fails, you can download the {0} and print it out from another application.', 'ASPxReportsStringId.WebDocumentViewer_Print_Popup_Text').split('{0}');
-        this.printingTextPrefix(printingTextParts[0]);
-        this.printingTextPostfix(printingTextParts[1]);
         if (this._showPrintNotificationDialog) {
-            var subscription = this.popupVisible.subscribe((newVal) => {
-                if (!newVal) {
-                    this.printingLinkCallback = () => { };
-                    this._clearExportingFrame();
-                    subscription.dispose();
-                }
-            });
-            this._disposables.push(subscription);
-            this.popupVisible(true);
+            this.popupVisible = true;
         }
     }
     _setPrintingLinkCallback(printingLinkCallback) {
@@ -164,12 +151,12 @@ export class ExportHandler extends Disposable {
     _formSubmit(_requestData, _formTarget) {
         if (this.postingForm) {
             this.postingForm.target = _formTarget;
-            this.exportActionUri(_requestData.RequestUrl);
+            this.exportActionUri = _requestData.RequestUrl;
             var formData = [];
             for (var key in _requestData.FormData) {
                 formData.push({ name: key, value: _requestData.FormData[key] });
             }
-            this.exportFormData(formData);
+            this.exportFormData = formData;
             this.postingForm.submit();
         }
     }
@@ -203,14 +190,10 @@ export class ExportHandler extends Disposable {
         this.preview.requestWrapper.getExportResult(_requestData, shouldIgnoreError(operationId), _method)
             .done(response => { var _a; return (_a = this._exportResultDeferred) === null || _a === void 0 ? void 0 : _a.resolve(response); })
             .catch(fail => { var _a; return (_a = this._exportResultDeferred) === null || _a === void 0 ? void 0 : _a.fail(fail); });
-        this.preview.progressBar.text(getLocalization('Downloading the document...', 'WebDocumentViewer_DownloadingDocument'));
-        let progress = ko.observable(0);
-        this._disposables.push(progress.subscribe(value => {
-            this._useSameTabExport && this.updateExportStatus(100 + value, operationId);
-        }));
+        this.preview.progressBar.text = getLocalization('Downloading the document...', 'WebDocumentViewer_DownloadingDocument');
         this._exportResultDeferred.done(response => {
             if (response.ok) {
-                return this._handleBlobUsingFetch(response, _url, progress, printable, abortController)
+                return this._handleBlobUsingFetch(response, _url, operationId, printable, abortController)
                     .then(fileMetadata => {
                     handleFile(fileMetadata, _url);
                 });
@@ -223,7 +206,7 @@ export class ExportHandler extends Disposable {
             PreviewRequestWrapper.getProcessErrorCallback(this.preview, message, true)('', this, '');
         });
     }
-    _handleBlobUsingFetch(response, _url, progress, printable, abortController) {
+    _handleBlobUsingFetch(response, _url, operationId, printable, abortController) {
         const contentLength = +response.headers.get('Content-Length');
         const contentDisposition = response.headers.get('Content-Disposition');
         const contentFilename = this._getFileName(contentDisposition);
@@ -239,7 +222,8 @@ export class ExportHandler extends Disposable {
                     return;
                 }
                 receivedLenght += value.byteLength;
-                progress(Math.round(receivedLenght * 100 / contentLength));
+                const currentProgress = Math.round(receivedLenght * 100 / contentLength) + 100;
+                this._useSameTabExport && this.updateExportStatus(currentProgress, operationId);
                 controller.enqueue(value);
                 readChunk(controller);
             });
@@ -312,19 +296,19 @@ export class ExportHandler extends Disposable {
             if (!this._useSameTabExport) {
                 this._window = window.open();
                 this._window && (this._window.onunload = () => {
-                    this.preview.progressBar.stop();
+                    this.preview.progressBar.cancelAction();
                     this._terminateWorker();
                 });
                 this._initExportWindow();
             }
         }
-        this.preview.progressBar.text(getLocalization('Exporting the document...', 'PreviewStringId.Msg_ExportingDocument'));
-        this.preview.progressBar.cancelText(getLocalization('Cancel', 'AnalyticsCoreStringId.SearchDialog_Cancel'));
+        this.preview.progressBar.text = getLocalization('Exporting the document...', 'PreviewStringId.Msg_ExportingDocument');
+        this.preview.progressBar.cancelText = getLocalization('Cancel', 'AnalyticsCoreStringId.SearchDialog_Cancel');
         var exportOperationIdDeferred = $.Deferred();
         var startExportOperationId = generateGuid();
         var shouldIgnoreError = (operationId) => () => this.preview.progressBar.wasCancelRequested(operationId || startExportOperationId);
         this.preview.progressBar.startProgress(startExportOperationId, (operationId) => {
-            if (_isFetchConfigured() && this.preview.progressBar.progress() >= 50)
+            if (_isFetchConfigured() && this.preview.progressBar.progress >= 50)
                 abortController.abort();
             else
                 this.preview.requestWrapper.cancelExportRequest(operationId, shouldIgnoreError(operationId));
@@ -345,7 +329,7 @@ export class ExportHandler extends Disposable {
         var deferred = $.Deferred();
         var requestData = this._exportResultRequestData;
         requestData.RequestUrl = actionUri;
-        if (this.preview._editingFields().length > 0 || AsyncExportApproach() || this._useAsynchronousExport || (this.preview.exportOptionsModel() && this.preview.exportOptionsModel().hasSensitiveData())) {
+        if (this.preview._editingFields.length > 0 || AsyncExportApproach() || this._useAsynchronousExport || (this.preview.exportOptionsModel && this.preview.exportOptionsModel.hasSensitiveData())) {
             setTimeout(() => {
                 this._startExportAsync(args(), this._useSameTabExport, deferred, inlineResult, printable, abortController);
             });
@@ -472,7 +456,8 @@ export class ExportHandler extends Disposable {
         if (_isFetchConfigured() && this._useSameTabExport) {
             progress = Math.floor(progress / 2);
         }
-        this.preview.progressBar && this.preview.progressBar.progress(progress);
+        if (this.preview.progressBar)
+            this.preview.progressBar.progress = progress;
         if (this._window) {
             var div = this._window.document.getElementById('loading');
             let exportText = getLocalization('Exporting the document...', 'PreviewStringId.Msg_ExportingDocument') + ' ' + progress + '%';
@@ -524,16 +509,15 @@ export class ExportHandler extends Disposable {
         this._window = null;
     }
 }
-ko.bindingHandlers['dxViewerExport'] = {
-    init: function (element, valueAccessor) {
-        var exportHandler = valueAccessor();
-        var templateHtml = getTemplate('dxrd-export-tool-content');
-        $.fn.constructor(element).append(templateHtml);
-        var exportFrame = document.createElement('iframe');
-        exportFrame.name = exportHandler.exportingFrameName;
-        exportFrame.setAttribute('role', 'none');
-        element.querySelector('.dxrd-visually-hidden').appendChild(exportFrame);
-        exportHandler.exportingFrame = exportFrame;
-        exportHandler.postingForm = element.querySelector('form');
-    }
-};
+__decorate([
+    mutable(null)
+], ExportHandler.prototype, "exportActionUri", void 0);
+__decorate([
+    mutable(() => [])
+], ExportHandler.prototype, "exportFormData", void 0);
+__decorate([
+    mutable(null)
+], ExportHandler.prototype, "reportDisplayName", void 0);
+__decorate([
+    mutable(false)
+], ExportHandler.prototype, "popupVisible", void 0);

package/viewer/internal/_exportHandler.viewModel.d.ts

@@ -0,0 +1,39 @@
+/**
+* DevExpress HTML/JS Reporting (viewer\internal\_exportHandler.viewModel.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 { getParentContainer } from '@devexpress/analytics-core/analytics-internal-native';
+import { IViewModel, PropertyChangedEventArgs } from '@devexpress/analytics-core/analytics-serializer-native';
+import { dxPopupToolbarItem } from 'devextreme/ui/popup';
+import { ExportHandler } from './_exportHandler';
+export interface IExportToolViewModel extends IViewModel {
+    popupOptions: {
+        width: string;
+        height: string;
+        title: string;
+        visible: boolean;
+        toolbarItems: Array<dxPopupToolbarItem>;
+        wrapperAttr: {
+            [key: string]: string;
+        };
+        getPopupContainer: typeof getParentContainer;
+        onHidden: () => void;
+    };
+    printingTexts: {
+        link: string;
+        caption: string;
+        postfix: string;
+        prefix: string;
+    };
+    exportActionUri: string;
+    exportFormData: Array<{
+        name: string;
+        value: string;
+    }>;
+    printingLinkCallback: (data: IExportToolViewModel, event: Event) => void;
+}
+export declare function createExportHandlerViewModel(this: ExportHandler, base: IViewModel): IExportToolViewModel;
+export declare function updateExportHandlerViewModel(this: ExportHandler, args: PropertyChangedEventArgs<ExportHandler>): void;

package/viewer/internal/_exportHandler.viewModel.js

@@ -0,0 +1,55 @@
+/**
+* DevExpress HTML/JS Reporting (viewer\internal\_exportHandler.viewModel.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 { getLocalization, getParentContainer, StringId } from '@devexpress/analytics-core/analytics-internal-native';
+import { createViewModelGenerator } from '@devexpress/analytics-core/analytics-serializer-native';
+export function createExportHandlerViewModel(base) {
+    const printingTextParts = getLocalization('If the operation fails, you can download the {0} and print it out from another application.', 'ASPxReportsStringId.WebDocumentViewer_Print_Popup_Text').split('{0}');
+    return createViewModelGenerator(base)
+        .generateProperty('popupOptions', createViewModelGenerator()
+        .generateProperty('width', '515px')
+        .generateProperty('height', 'auto')
+        .generateProperty('title', this.getPopupTitle())
+        .generateProperty('visible', this.popupVisible)
+        .generateProperty('toolbarItems', [{
+            toolbar: 'bottom', location: 'after', widget: 'dxButton',
+            options: {
+                text: getLocalization('OK', StringId.DataAccessBtnOK), type: 'default', stylingMode: 'contained',
+                onClick: () => {
+                    this.popupVisible = false;
+                }
+            }
+        }])
+        .generateProperty('wrapperAttr', { class: 'dxrd-print-dialog dx-editors dx-widget' })
+        .generateProperty('getPopupContainer', (element) => getParentContainer(element))
+        .generateProperty('onHidden', () => this.clearExportTools())
+        .getViewModel())
+        .generateProperty('printingTexts', createViewModelGenerator()
+        .generateProperty('link', getLocalization('document in PDF format', 'ASPxReportsStringId.WebDocumentViewer_Print_Popup_LinkText'))
+        .generateProperty('caption', getLocalization('The browser sent the document to the printer.', 'ASPxReportsStringId.WebDocumentViewer_Print_Popup_Caption'))
+        .generateProperty('postfix', printingTextParts[1])
+        .generateProperty('prefix', printingTextParts[0])
+        .getViewModel())
+        .generateProperty('exportActionUri', this.exportActionUri)
+        .generateProperty('exportFormData', this.exportFormData)
+        .generateProperty('printingLinkCallback', (_, event) => {
+        this.printingLinkCallback();
+        event.preventDefault();
+    })
+        .getViewModel();
+}
+export function updateExportHandlerViewModel(args) {
+    const viewModel = this.getViewModel();
+    if (args.propertyName === 'popupVisible')
+        viewModel.popupOptions.visible = this.popupVisible;
+    if (args.propertyName === 'reportDisplayName')
+        viewModel.popupOptions.title = this.getPopupTitle();
+    if (args.propertyName === 'exportActionUri')
+        viewModel.exportActionUri = this.exportActionUri;
+    if (args.propertyName === 'exportFormData')
+        viewModel.exportFormData = this.exportFormData;
+}

package/viewer/internal/_initializer.d.ts

@@ -1,7 +1,7 @@
 /**
 * DevExpress HTML/JS Reporting (viewer\internal\_initializer.d.ts)
-* Version:  23.1.5
-* Build date: Aug 29, 2023
+* 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
 */
@@ -10,5 +10,5 @@ import { IBindingSettings, IPreviewCustomizationHandler, IWebDocumentViewerModel
 import { PreviewDisposableModel, PreviewModel } from './_previewModel';
 export declare function createDesktopPreview(bindingSettings: IBindingSettings): PreviewModel;
 export declare function createPreview(bindingSettings: IBindingSettings): JQueryDeferred<PreviewDisposableModel>;
-export declare function createPreviewModel(viewerModel: IWebDocumentViewerModel, element: Element, callbacks?: IPreviewCustomizationHandler, applyBindings?: boolean): JQueryDeferred<PreviewDisposableModel>;
+export declare function createPreviewModel(viewerModel: IWebDocumentViewerModel, element: HTMLElement, callbacks?: IPreviewCustomizationHandler, applyBindings?: boolean): JQueryDeferred<PreviewDisposableModel>;
 export declare function initPreviewModel(previewModel: PreviewDisposableModel, viewerModel: IWebDocumentViewerModel): void;

package/viewer/internal/_initializer.js

@@ -1,15 +1,15 @@
 /**
 * DevExpress HTML/JS Reporting (viewer\internal\_initializer.js)
-* Version:  23.1.5
-* Build date: Aug 29, 2023
+* 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 { appendStaticContextToRootViewModel, initGlobalize, processErrorEvent, RequestHelper, resolveFromPromises, staticContext, ToolbarKeyboardHelper, troubleshootingPageWrapper } from '@devexpress/analytics-core/analytics-internal';
-import { addCultureInfo, ajaxSetup, requestManager, TabPanel, fetchSetup, _isFetchConfigured } from '@devexpress/analytics-core/analytics-utils';
+import { initGlobalize, koUtils, processErrorEvent, RequestHelper, resolveFromPromises, troubleshootingPageWrapper } from '@devexpress/analytics-core/analytics-internal-native';
+import { currentMultiPlatformEngine } from '@devexpress/analytics-core/analytics-serializer-native';
+import { addCultureInfo, ajaxSetup, requestManager, TabPanel, fetchSetup, _isFetchConfigured } from '@devexpress/analytics-core/analytics-utils-native';
 import config from 'devextreme/core/config';
 import * as $ from 'jquery';
-import * as ko from 'knockout';
 import { createFullscreenComputed, cultureInfo, processZoomFactor } from '../../common/utils/_utils';
 import { PreviewElements } from '../constants';
 import { DocumentMapModel } from '../documentMap/_documentMapModel';
@@ -19,7 +19,6 @@ import { PreviewParameterHelper } from '../parameters/previewParameterHelper';
 import { PreviewParametersViewModel } from '../parameters/previewParametersViewModel';
 import { ReportPreview } from '../reportPreview';
 import { SearchViewModel } from '../search/_searchViewModel';
-import { formatSearchResult } from '../search/_utils';
 import { AsyncExportApproach, EditablePreviewEnabled, ReportServerDownloadUri, ReportServerExportUri, ReportServerInvokeUri, SearchAvailable } from '../settings';
 import { ActionLists, PreviewActions, PreviewDesignerActions } from './_actions';
 import { PreviewModel } from './_previewModel';
@@ -50,13 +49,14 @@ export function createDesktopPreview(bindingSettings) {
         autoSelectTab: true,
         rtl: bindingModel.rtl
     });
-    tabPanel.collapsed(true);
+    tabPanel.collapsed = true;
     var fullscreenEnabled = createFullscreenComputed(bindingElement, reportPreview);
+    reportPreview.previewVisible = bindingModel.previewVisible;
+    reportPreview.tabPanel = tabPanel;
     var previewActions = new PreviewActions(reportPreview);
     var designPreviewActions = new PreviewDesignerActions(reportPreview, fullscreenEnabled);
-    var globalActionProviders = ko.observableArray([previewActions, exportModel, searchModel, designPreviewActions]);
-    var actionLists = new ActionLists(reportPreview, globalActionProviders, callbacks && callbacks.customizeActions, reportPreview.previewVisible);
-    reportPreview.previewVisible(bindingModel.previewVisible);
+    var globalActionProviders = [previewActions, exportModel, searchModel, designPreviewActions];
+    var actionLists = new ActionLists(reportPreview, globalActionProviders, callbacks && callbacks.customizeActions, () => reportPreview.previewVisible);
     var designerModelOptions = {
         rootStyle: 'dxrd-preview dxd-back-primary-invariant' + (reportPreview.canSwitchToDesigner ? ' dxrd-designer-preview' : ''),
         reportPreview: reportPreview,
@@ -70,45 +70,43 @@ export function createDesktopPreview(bindingSettings) {
         accessibilityCompliant: bindingModel.accessibilityCompliant
     };
     var designerModel = new PreviewModel(designerModelOptions);
-    designerModel._addDisposable(previewActions);
-    designerModel._addDisposable(designPreviewActions);
+    designerModel.addDisposable(previewActions);
+    designerModel.addDisposable(designPreviewActions);
+    var designerViewModel = designerModel.getViewModel();
     designerModel.parts = [
-        { id: PreviewElements.Toolbar, templateName: PreviewElements.Toolbar, model: { actionLists: actionLists, keyboardHelper: new ToolbarKeyboardHelper(actionLists.toolbarItems), canSwitchToDesigner: reportPreview.canSwitchToDesigner } },
-        { id: PreviewElements.Surface, templateName: PreviewElements.Surface, model: designerModel.reportPreview },
-        { id: PreviewElements.RightPanel, templateName: PreviewElements.RightPanel, model: designerModel },
-        { id: PreviewElements.ExportTool, templateName: PreviewElements.ExportTool, model: designerModel.reportPreview.exportHandler }
+        { id: PreviewElements.Toolbar, templateName: PreviewElements.Toolbar, model: designerViewModel.toolBar, viewModel: designerViewModel.toolBar },
+        { id: PreviewElements.Surface, templateName: PreviewElements.Surface, model: designerModel.reportPreview, viewModel: designerViewModel.reportPreview },
+        { id: PreviewElements.RightPanel, templateName: PreviewElements.RightPanel, model: designerModel, viewModel: designerViewModel.tabPanel },
+        { id: PreviewElements.ExportTool, templateName: PreviewElements.ExportTool, model: designerModel.reportPreview.exportHandler, viewModel: designerViewModel.exportHandler }
     ];
     callbacks && callbacks.customizeParts && callbacks.customizeParts(designerModel.parts);
     var $window = $.fn.constructor(window);
     var timers = [];
     var updateProgressPosition = getUpdateProgressBarCallback(bindingModel.progressBarSettings, designerModel, reportPreview, bindingElement, $window);
-    var updatePreviewContentSize_ = updatePreviewContentSize(reportPreview.previewSize, bindingElement, bindingModel.rtl);
+    var updatePreviewContentSize_ = updatePreviewContentSize(reportPreview, bindingElement, bindingModel.rtl);
     if (bindingModel.tabPanelSettings) {
-        bindingModel.tabPanelSettings.width && tabPanel.width(parseInt(bindingModel.tabPanelSettings.width));
-        bindingModel.tabPanelSettings.position && tabPanel.position(bindingModel.tabPanelSettings.position);
+        if (bindingModel.tabPanelSettings.width)
+            tabPanel.width = parseInt(bindingModel.tabPanelSettings.width);
+        if (bindingModel.tabPanelSettings.position)
+            tabPanel.position = bindingModel.tabPanelSettings.position;
     }
     var updateSizesCallback = () => {
-        updatePreviewContentSize_ && updatePreviewContentSize_(tabPanel.position());
+        updatePreviewContentSize_ && updatePreviewContentSize_(tabPanel.position);
         updateProgressPosition && updateProgressPosition();
     };
     designerModel.updateSurfaceSize = updateSizesCallback;
     designerModel.resizeCallback = updateSizesCallback;
     window.addEventListener('resize', designerModel.resizeCallback);
-    designerModel._addDisposable(fullscreenEnabled);
-    designerModel._addDisposable(fullscreenEnabled.subscribe(designerModel.resizeCallback));
-    designerModel._addDisposable(tabPanel.width.subscribe(() => {
-        timers.push(setTimeout(() => updatePreviewContentSize_(tabPanel.position()), 1));
-    }));
-    designerModel._addDisposable(tabPanel.position.subscribe((newVal) => {
-        updatePreviewContentSize_(newVal);
-    }));
-    designerModel._addDisposable(tabPanel.isEmpty.subscribe(() => {
-        timers.push(setTimeout(() => {
-            updatePreviewContentSize_(tabPanel.position());
-        }, 1));
+    designerModel.addDisposable(fullscreenEnabled.subscribe(designerModel.resizeCallback));
+    designerModel.addDisposable(tabPanel.events.on('widthChanged', (args) => {
+        timers.push(setTimeout(() => updatePreviewContentSize_(tabPanel.position), 1));
+    }), tabPanel.events.on('isEmptyChanged', (args) => {
+        timers.push(setTimeout(() => updatePreviewContentSize_(tabPanel.position), 1));
+    }), tabPanel.events.on('positionChanged', (args) => {
+        updatePreviewContentSize_(tabPanel.position);
     }));
     updateSizesCallback();
-    designerModel._addDisposable({
+    designerModel.addDisposable({
         dispose: () => {
             window.removeEventListener('resize', designerModel.resizeCallback);
             designerModel.updateSurfaceSize = null;
@@ -118,9 +116,6 @@ export function createDesktopPreview(bindingSettings) {
             updateProgressPosition = null;
         }
     });
-    appendStaticContextToRootViewModel(designerModel, {
-        _static: Object.assign(Object.assign({}, staticContext._static), { formatSearchResult: formatSearchResult })
-    }, 'dx-report-viewer');
     return designerModel;
 }
 function _createPreview(bindingSettings) {
@@ -165,10 +160,10 @@ function _createPreview(bindingSettings) {
     if (bindingSettings.element && bindingSettings.applyBindings && !designerModel.reportPreview.canSwitchToDesigner) {
         ((_a = bindingSettings.callbacks) === null || _a === void 0 ? void 0 : _a.beforeRender) && bindingSettings.callbacks.beforeRender(designerModel);
         $.fn.constructor(bindingSettings.element).children().remove();
-        ko.applyBindings(designerModel, bindingSettings.element);
+        currentMultiPlatformEngine.applyBindings(designerModel.getViewModel(), bindingSettings.element);
     }
     if (disposableCallback) {
-        designerModel._addDisposable(disposableCallback);
+        designerModel.addDisposable(disposableCallback);
     }
     return designerModel;
 }
@@ -197,7 +192,7 @@ export function initPreviewModel(previewModel, viewerModel) {
         previewModel.reportPreview.initialize($.Deferred().resolve(viewerModel).promise());
     }
     else {
-        var unwrappedUrl = ko.unwrap(viewerModel.reportUrl);
+        var unwrappedUrl = koUtils.unwrap(viewerModel.reportUrl);
         if (unwrappedUrl) {
             previewModel.OpenReport(unwrappedUrl);
         }

package/viewer/internal/_ko_bindings.d.ts

@@ -0,0 +1,8 @@
+/**
+* DevExpress HTML/JS Reporting (viewer\internal\_ko_bindings.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
+*/
+export {};

package/viewer/internal/_ko_bindings.js

@@ -0,0 +1,42 @@
+/**
+* DevExpress HTML/JS Reporting (viewer\internal\_ko_bindings.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 * as ko from 'knockout';
+import { initializeAutoFitBinding, initializeChildStyleBinding, initializeLazyImagesBinding, initializeTextCopierBinding, initializeToViewBinding, initializeViewerExportBinding } from './_bindings';
+import { $dx, addDisposeCallback } from '@devexpress/analytics-core/analytics-internal-native';
+import { getTemplate } from '@devexpress/analytics-core/analytics-utils-native';
+import { initializeBrickSelectionProg } from './_previewSelection';
+function wrapWithDisposeCallback(element, disposeFunc) {
+    addDisposeCallback(element, disposeFunc);
+}
+ko.bindingHandlers['toView'] = {
+    init: (element, valueAccessor) => wrapWithDisposeCallback(element, initializeToViewBinding(element, valueAccessor()))
+};
+ko.bindingHandlers['lazyImages'] = {
+    init: (element, valueAccessor) => wrapWithDisposeCallback(element, initializeLazyImagesBinding(element, valueAccessor()))
+};
+ko.bindingHandlers['textCopier'] = {
+    init: (element, valueAccessor, allBindings, viewModel, bindingContext) => wrapWithDisposeCallback(element, initializeTextCopierBinding(element, { viewModel }))
+};
+ko.bindingHandlers['autoFit'] = {
+    init: (element, valueAccessor) => wrapWithDisposeCallback(element, initializeAutoFitBinding(element, valueAccessor()))
+};
+ko.bindingHandlers['childStyle'] = {
+    init: (element, valueAccessor) => initializeChildStyleBinding(element, valueAccessor())
+};
+ko.bindingHandlers['brick-selection-prog'] = {
+    init: function (element, valueAccessor) {
+        addDisposeCallback(element, initializeBrickSelectionProg(element, valueAccessor()));
+    }
+};
+ko.bindingHandlers['dxViewerExport'] = {
+    init: function (element, valueAccessor) {
+        var templateHtml = getTemplate('dxrd-export-tool-content');
+        $dx(element).append(templateHtml);
+        initializeViewerExportBinding(element, valueAccessor());
+    }
+};