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

package/viewer/reportPreview.js

@@ -1,14 +1,20 @@
 /**
 * DevExpress HTML/JS Reporting (viewer\reportPreview.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 { CustomSortedArrayStore, formatUnicorn, getErrorMessage } from '@devexpress/analytics-core/analytics-internal';
-import { Disposable, getLocalization, ModelSerializer } from '@devexpress/analytics-core/analytics-utils';
+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 { CustomSortedArrayStore, formatUnicorn, getErrorMessage } from '@devexpress/analytics-core/analytics-internal-native';
+import { BaseRenderingModel, mutable, mutableArray, nativeModelSerializer } from '@devexpress/analytics-core/analytics-serializer-native';
+import { getLocalization } from '@devexpress/analytics-core/analytics-utils-native';
 import * as $ from 'jquery';
-import * as ko from 'knockout';
 import { ImageSource } from '../common/imageSource';
 import { generateGuid, transformNewLineCharacters, isIOS } from '../common/utils/_utils';
 import { PreviewBricksKeyboardHelper } from './accessibility/_previewBricksKeyboardHelper';
@@ -23,27 +29,19 @@ import { PreviewRequestWrapper } from './internal/_previewRequestWrapper';
 import { ProgressViewModel } from './internal/_progressViewModel';
 import { SortingProcessor } from './internal/_sortingProcessor';
 import { safelyRunWindowOpen } from './internal/_utils';
+import { createReportPreviewViewModel, updateReportPreviewViewModel } from './reportPreview.viewModel';
 import { EditablePreviewEnabled, HandlerUri, MessageHandler, PollingDelay, PreloadedPagesOffset } from './settings';
-export class ReportPreview extends Disposable {
+export class ReportPreview extends BaseRenderingModel {
     constructor(handlerUri, previewRequestWrapper, previewHandlersHelper, callbacks, rtl = false, enableKeyboardSupport, exportSettings, element) {
         super();
         this.enableKeyboardSupport = enableKeyboardSupport;
         this.element = element;
-        this.predefinedZoomLevels = ko.observableArray([5, 2, 1.5, 1, 0.75, 0.5, 0.25]);
-        this._pageWidth = ko.observable(818);
-        this._pageHeight = ko.observable(1058);
-        this._pageBackColor = ko.observable('');
-        this._currentReportId = ko.observable(null);
-        this._currentReportUrl = ko.observable(null);
-        this._currentDocumentId = ko.observable(null);
-        this._unifier = ko.observable('');
+        this.predefinedZoomLevels = [5, 2, 1.5, 1, 0.75, 0.5, 0.25];
         this._stopBuildRequests = {};
         this._closeReportRequests = {};
         this._closeDocumentRequests = {};
         this._cancelExportRequests = {};
-        this._editingFields = ko.observable([]);
         this._startBuildOperationId = '';
-        this._editingValuesSubscriptions = [];
         this._drillDownState = [];
         this._sortingState = [];
         this._sortingProcessor = new SortingProcessor(() => this._sortingState || []);
@@ -51,7 +49,7 @@ export class ReportPreview extends Disposable {
         this._timeouts = [];
         this._deferreds = [];
         this.getSelectedContent = (punctuationMark = '') => {
-            var currentPage = this.pages()[this.pageIndex()];
+            var currentPage = this.pages[this.pageIndex];
             if (!currentPage || !currentPage.brickColumnWidthArray) {
                 return '';
             }
@@ -60,10 +58,10 @@ export class ReportPreview extends Disposable {
                 if (!currentBrick) {
                     return;
                 }
-                currentBrick.active() && currentBrick.genlIndex != -1 && activeBricks.push(currentBrick);
+                currentBrick.active && currentBrick.genlIndex != -1 && activeBricks.push(currentBrick);
                 currentBrick.bricks && currentBrick.bricks.length != 0 && currentBrick.bricks.forEach((innerBrick) => { getActiveBricks(innerBrick, resultArray); });
             };
-            getActiveBricks(currentPage.brick(), activeBricks);
+            getActiveBricks(currentPage.brick, activeBricks);
             if (!activeBricks) {
                 return '';
             }
@@ -102,98 +100,14 @@ export class ReportPreview extends Disposable {
             });
             return result;
         };
-        this.rtlReport = ko.observable(false);
-        this.currentPage = ko.observable(null);
-        this.originalParametersInfo = ko.observable(null);
-        this.pageIndex = ko.observable(-1);
-        this.showMultipagePreview = ko.observable(false);
-        this.documentMap = ko.observable();
-        this.exportOptionsModel = ko.observable();
-        this.pageLoading = ko.observable(false);
-        this.errorMessage = ko.observable('');
-        this.documentBuilding = ko.observable(false);
-        this.reportOpening = ko.observable(false);
-        this.pages = ko.observableArray([]).extend({ rateLimit: { timeout: 20, method: 'notifyWhenChangesStop' } });
-        this.isAutoFit = ko.observable(true);
-        this.autoFitBy = ko.observable(ZoomAutoBy.WholePage);
-        this.exportDisabled = ko.pureComputed(() => this.progressBar.inProgress() || !this.exportOptionsModel());
-        this._zoom = ko.observable(1);
-        this.zoom = ko.pureComputed({
-            read: () => {
-                var autoFitBy = this.autoFitBy();
-                if (autoFitBy != ZoomAutoBy.None || this._zoom() === 0) {
-                    return autoFitBy;
-                }
-                return this._zoom();
-            },
-            write: (val) => {
-                if (val > 0) {
-                    this.autoFitBy(ZoomAutoBy.None);
-                    this._zoom(val);
-                }
-                else {
-                    this.autoFitBy(val);
-                }
-            }
-        });
-        this.editingFieldsProvider = () => this._editingFields();
-        this._currentPageText = ko.pureComputed(() => {
-            if (this.pageIndex() === -1) {
-                return getLocalization('0 pages', 'ASPxReportsStringId.WebDocumentViewer_0Pages');
-            }
-            else {
-                var ofText = getLocalization('of', 'ASPxReportsStringId.ToolBarItemText_OfLabel');
-                return (this.pageIndex() + 1) + ' ' + ofText + ' ' + this.pages().length;
-            }
-        });
-        this._raiseOnSizeChanged = () => { this.onSizeChanged() && this.onSizeChanged()(); };
-        this.previewSize = ko.observable(0);
-        this.onSizeChanged = ko.observable();
-        this.previewVisible = ko.observable(false);
-        this.editingFieldsHighlighted = ko.observable(false);
+        this.editingFieldsProvider = () => this._editingFields;
+        this._raiseOnSizeChanged = () => { this._loadVisibleImages && this._loadVisibleImages(); };
+        this._loadVisibleImages = null;
+        this._getPagesViewModels = () => { var _a; return (_a = this.pages) === null || _a === void 0 ? void 0 : _a.map(x => x.getViewModel()); };
         this.canSwitchToDesigner = true;
         this.allowURLsWithJSContent = false;
-        this.zoomStep = ko.observable(0.05);
+        this.zoomStep = 0.05;
         this._progressFirstTime = false;
-        this.emptyDocumentCaption = ko.pureComputed(() => {
-            var parametersInfo = this.originalParametersInfo();
-            var parametersExist = parametersInfo && parametersInfo.parameters.some(x => x.Visible);
-            var newCaption = '';
-            if (this.documentBuilding()) {
-                if (this.currentPage()) {
-                    if (!this._progressFirstTime)
-                        newCaption = formatUnicorn(getLocalization('Progress {0}%', 'ASPxReportsStringId.WebDocumentViewer_AriaDocumentProgress'), this.progressBar.progress().toString());
-                    else
-                        newCaption = this.progressBar.progress() + '%';
-                    this._progressFirstTime = true;
-                }
-                else {
-                    newCaption = getLocalization('Creating the document...', 'PreviewStringId.Msg_CreatingDocument');
-                }
-            }
-            else if (parametersExist && !this.documentId) {
-                newCaption = getLocalization('Waiting for parameter values...', 'PreviewStringId.Msg_WaitingForParameterValues');
-            }
-            else if (this.documentId) {
-                this._progressFirstTime = false;
-                if (this.pageIndex() !== -1 && !this.progressBar.inProgress()) {
-                    newCaption = getLocalization('Document is ready', 'ASPxReportsStringId.WebDocumentViewer_AriaDocumentReady');
-                }
-                else {
-                    newCaption = getLocalization('The document does not contain any pages.', 'PreviewStringId.Msg_EmptyDocument');
-                }
-            }
-            else if (this.reportOpening()) {
-                this._progressFirstTime = false;
-                newCaption = getLocalization('Loading...', 'AnalyticsCoreStringId.Loading');
-            }
-            else if (this.errorMessage()) {
-                newCaption = this.errorMessage();
-            }
-            return newCaption;
-        }).extend({ rateLimit: { timeout: 1000 } });
-        this.signatures = ko.observableArray([]);
-        this.exportOptionsTabVisible = ko.observable(true);
         HandlerUri(handlerUri || HandlerUri());
         this.pageLoader = new PageLoader(this);
         this.progressBar = new ProgressViewModel(enableKeyboardSupport);
@@ -210,84 +124,80 @@ export class ReportPreview extends Disposable {
             this._onGetBuildStatus = callbacks._onGetBuildStatus;
             this._onGetDocumentDetails = callbacks._onGetDocumentDetails;
         }
-        this._disposables.push(EditablePreviewEnabled.subscribe((newValue) => !newValue && this.editingFieldsHighlighted(false)));
-        this._disposables.push(this.documentBuilding.subscribe((newVal) => {
+        this.addDisposable(EditablePreviewEnabled.subscribe((newValue) => !newValue && (this.editingFieldsHighlighted = false)));
+        this._onDocumentBuildingChanged = (newVal) => {
             if (!newVal) {
-                this._unifier(generateGuid());
-                var documentId = this._currentDocumentId();
-                var pageCount = this.pages().length;
+                this._unifier = generateGuid();
+                var documentId = this.documentId;
+                var pageCount = this.pages.length;
                 for (var i = 0; i < pageCount; i++) {
-                    var page = this.pages()[i];
-                    if (!page.pageLoading()) {
+                    var page = this.pages[i];
+                    if (!page.pageLoading) {
                         page.clearBricks();
                     }
-                    page.updateSize(this._zoom());
+                    page.updateSize(this.originalZoom);
                     page.actualResolution = 0;
-                    page.isClientVisible() && page._setPageImgSrc(documentId, this._unifier(), this._zoom());
+                    page.isClientVisible && page._setPageImgSrc(documentId, this._unifier, this.originalZoom);
                 }
                 if (!this.pageLoader.isActive()) {
                     this.pageLoader.prefetchPages(0, 0, undefined);
                 }
             }
             else {
-                this.progressBar.text(getLocalization('Creating the document...', 'PreviewStringId.Msg_CreatingDocument'));
-                this.progressBar.cancelText(getLocalization('Cancel', 'AnalyticsCoreStringId.SearchDialog_Cancel'));
+                this.progressBar.text = getLocalization('Creating the document...', 'PreviewStringId.Msg_CreatingDocument');
+                this.progressBar.cancelText = getLocalization('Cancel', 'AnalyticsCoreStringId.SearchDialog_Cancel');
             }
-        }));
-        this._disposables.push(this._currentDocumentId.subscribe((newVal) => {
-            this._unifier(newVal ? generateGuid() : '');
-        }));
-        this._disposables.push(this.previewSize.subscribe(() => this._raiseOnSizeChanged()));
-        this._disposables.push(this.zoom);
-        this._disposables.push(this.exportDisabled);
-        this._disposables.push(this._currentPageText);
+        };
         this._disposables.push(this.progressBar);
-        this._disposables.push(this.emptyDocumentCaption);
-        this._disposables.push(this.showMultipagePreview.subscribe(() => {
-            if (!this.showMultipagePreview()) {
-                var currentPage = this.pages()[this.pageIndex()];
-                currentPage && currentPage.isClientVisible(true);
-            }
-        }));
-        this._disposables.push(this._zoom.subscribe(() => {
-            if (this.showMultipagePreview()) {
-                this.pages().forEach((page) => {
-                    page.updateSize(page.zoom());
-                    page.isClientVisible(false);
+        this._onOriginalZoomChanged = () => {
+            if (this.showMultipagePreview) {
+                this.pages.forEach((page) => {
+                    page.updateSize(this.originalZoom);
+                    page.isClientVisible = false;
                 });
                 this._raiseOnSizeChanged();
             }
             else {
-                var currentPage = this.pages()[this.pageIndex()];
-                currentPage && currentPage.isClientVisible.notifySubscribers(currentPage.isClientVisible.peek());
+                var currentPage = this.pages[this.pageIndex];
+                currentPage && Promise.resolve().then(() => {
+                    currentPage.onPropertyChanged({ propertyName: 'isClientVisible', newValue: currentPage.isClientVisible });
+                });
             }
-        }));
-        this._disposables.push(ko.computed(() => {
-            var pagesArray = this.pages();
-            var pageIndex = this.pageIndex();
+        };
+        this._updateCurrentPage = () => {
+            var pagesArray = this.pages;
+            var pageIndex = this.pageIndex;
             if (!pagesArray || pageIndex >= pagesArray.length)
                 return;
             var currentPage = null;
             if (pageIndex >= 0)
                 currentPage = pagesArray[pageIndex];
-            if (currentPage != this.currentPage.peek())
-                this.currentPage(currentPage);
-        }));
+            if (currentPage != this.currentPage)
+                this.currentPage = currentPage;
+        };
         if (enableKeyboardSupport) {
             this.previewBrickKeyboardHelper = new PreviewBricksKeyboardHelper(this);
             this._disposables.push(this.previewBrickKeyboardHelper);
         }
+        this.addDisposable(this.progressBar.events.on('inProgressChanged', (args) => {
+            this._updateExportDisabled();
+        }), this.progressBar.events.on('progressChanged', (args) => {
+            if (this.currentPage) {
+                this._updateEmptyDocumentCaption();
+            }
+        }));
+        this._updateExportDisabled();
     }
     _doDrillDown(drillDownKey) {
         this._drillDownState.forEach((x) => x.Key === drillDownKey && (x.Value = !x.Value));
-        var documentId = this._currentDocumentId();
+        var documentId = this.documentId;
         this.closeDocument();
         this.progressBar.complete(documentId);
-        this.documentMap(null);
-        for (var i = this.pages().length - 1; i >= 0; i--) {
-            var page = this.pages()[i];
-            if (i > this.pageIndex()) {
-                this.pages.remove(page);
+        this.documentMap = null;
+        for (var i = this.pages.length - 1; i >= 0; i--) {
+            var page = this.pages[i];
+            if (i > this.pageIndex) {
+                this.removePage(page);
             }
             else {
                 page._clear();
@@ -299,8 +209,8 @@ export class ReportPreview extends Disposable {
         if (!this._sortingProcessor.doSorting(sortData, shiftKey, ctrlKey))
             return;
         this.closeDocument();
-        this.documentMap(null);
-        this.pages().forEach(page => page._clear());
+        this.documentMap = null;
+        this.pages.forEach(page => page._clear());
         this._startBuildRequest();
     }
     dispose() {
@@ -311,11 +221,19 @@ export class ReportPreview extends Disposable {
         this.removeProperties();
         this._sortingProcessor = null;
     }
+    removePage(page) {
+        const deletedPage = this.pages.splice(this.pages.indexOf(page), 1)[0];
+        deletedPage === null || deletedPage === void 0 ? void 0 : deletedPage.dispose();
+    }
+    removeAllPages() {
+        this.pages.forEach(x => x.dispose());
+        this.pages = [];
+    }
     removeEmptyPages(all) {
-        all && this.pages.removeAll();
-        for (var idx = this.pages().length - 1; idx >= 0; idx--) {
-            var tempPage = this.pages()[idx];
-            (tempPage.isEmpty || tempPage.pageIndex === -1) && this.pages.remove(tempPage);
+        all && this.removeAllPages();
+        for (var idx = this.pages.length - 1; idx >= 0; idx--) {
+            var tempPage = this.pages[idx];
+            (tempPage.isEmpty || tempPage.pageIndex === -1) && this.removePage(tempPage);
         }
     }
     _initialize() {
@@ -323,38 +241,37 @@ export class ReportPreview extends Disposable {
         this._drillDownState = [];
         this._sortingState = [];
         this._initialDocumentData = null;
-        if (this.requestWrapper && ((_a = this.requestWrapper['_searchModel']) === null || _a === void 0 ? void 0 : _a.loading()) && ((_b = this.requestWrapper['_searchModel']) === null || _b === void 0 ? void 0 : _b.useAsyncSearch()))
+        if (this.requestWrapper && ((_a = this.requestWrapper['_searchModel']) === null || _a === void 0 ? void 0 : _a.loading) && ((_b = this.requestWrapper['_searchModel']) === null || _b === void 0 ? void 0 : _b.useAsyncSearch))
             (_c = this.requestWrapper['_searchModel']) === null || _c === void 0 ? void 0 : _c.stopSearchProcess();
         this.closeDocument();
-        this._editingFields([]);
-        this._editingValuesSubscriptions.forEach(item => item.dispose());
-        this._editingValuesSubscriptions = [];
-        this.documentMap(null);
-        this.pageIndex(-1);
-        this.pageLoading(true);
-        this.errorMessage('');
-        this.exportOptionsModel(null);
+        this._editingFields = [];
+        this.disposeArray(this._editingFields);
+        this.documentMap = null;
+        this.pageIndex = -1;
+        this.pageLoading = true;
+        this.errorMessage = '';
+        this.exportOptionsModel = null;
         this.progressBar.complete(null);
         this._getBuildStatusDeferreds.forEach(a => a.reject());
         this._getBuildStatusDeferreds = [];
-        this.pages().forEach(x => x.dispose());
-        this.pages([this.createPage(-1, undefined, this.pageLoading)]);
-        this.exportHandler.reportDisplayName(null);
+        this.pages.forEach(x => x.dispose());
+        this.pages = [this.createPage(-1, undefined)];
+        this.exportHandler.reportDisplayName = null;
     }
-    createPage(pageIndex, processClick, loading) {
-        return new PreviewPage(this, pageIndex, processClick, loading);
+    createPage(pageIndex, processClick, subscribeToPageLoading = false) {
+        return new PreviewPage(this, pageIndex, processClick, subscribeToPageLoading);
     }
     _getIgnorePredicate(documentId) {
         return () => this._closeDocumentRequests && this._closeDocumentRequests[documentId];
     }
     _cleanTabInfo() {
-        this.exportOptionsModel(null);
-        this.documentMap(null);
+        this.exportOptionsModel = null;
+        this.documentMap = null;
     }
     _clearReportInfo() {
         this._cleanTabInfo();
         this.closeReport();
-        this.originalParametersInfo(null);
+        this.originalParametersInfo = null;
     }
     createBrickClickProcessor(cyclePageIndex) {
         var _self = this;
@@ -362,7 +279,7 @@ export class ReportPreview extends Disposable {
             _self.goToPage(cyclePageIndex, true);
             if (!brick)
                 return;
-            var page = _self.pages()[cyclePageIndex];
+            var page = _self.pages[cyclePageIndex];
             if (!page)
                 return;
             page.selectBrick('');
@@ -382,7 +299,7 @@ export class ReportPreview extends Disposable {
                         _self._doSorting(brickNavigation.sortData, shiftKey, ctrlKey);
                     }
                     if (brickNavigation.pageIndex >= 0) {
-                        var targetPage = _self.pages().filter(page => page.pageIndex === brickNavigation.pageIndex)[0];
+                        var targetPage = _self.pages.filter(page => page.pageIndex === brickNavigation.pageIndex)[0];
                         if (targetPage) {
                             _self.goToPage(brickNavigation.pageIndex);
                             targetPage.selectBrick(brickNavigation.indexes);
@@ -452,9 +369,9 @@ export class ReportPreview extends Disposable {
         });
     }
     _resolveFirstPage(status) {
-        var firstPage = this.pages()[0];
+        var firstPage = this.pages[0];
         firstPage.shouldSendRequest = true;
-        if (firstPage.displayImageSrc() || status.pageCount === 0)
+        if (firstPage.displayImageSrc || status.pageCount === 0)
             return;
         if (status.firstPageResponse && firstPage.lastGetPageDeferred) {
             firstPage.lastGetPageDeferred.resolve(status.firstPageResponse);
@@ -465,37 +382,37 @@ export class ReportPreview extends Disposable {
         this.setPageVisibility(firstPage, true);
     }
     initialize(initializeDataPromise) {
-        this.reportOpening(true);
-        this._currentReportId(null);
-        this._currentReportUrl(null);
-        this._currentDocumentId(null);
+        this.reportOpening = true;
+        this.reportId = null;
+        this.reportUrl = null;
+        this.documentId = null;
         this._initialize();
         var _initializeDeferred = $.Deferred();
         this._deferreds.push(_initializeDeferred);
         _initializeDeferred.done(() => {
             initializeDataPromise.done((previewInitialize) => {
-                this.reportOpening(false);
+                this.reportOpening = false;
                 if (previewInitialize && !previewInitialize.error && !previewInitialize.startBuildFaultMessage && (previewInitialize.reportId || previewInitialize.documentId)) {
-                    this._currentReportId(previewInitialize.reportId);
-                    this._currentReportUrl(previewInitialize.reportUrl);
-                    this._currentDocumentId(previewInitialize.documentId);
-                    this.rtlReport(previewInitialize.rtlReport);
+                    this.reportId = previewInitialize.reportId;
+                    this.reportUrl = previewInitialize.reportUrl;
+                    this.documentId = previewInitialize.documentId;
+                    this.rtlReport = previewInitialize.rtlReport;
                     var pageSettings = previewInitialize.pageSettings;
                     if (pageSettings) {
                         if (pageSettings.height)
-                            this._pageHeight(pageSettings.height);
+                            this._pageHeight = pageSettings.height;
                         if (pageSettings.width)
-                            this._pageWidth(pageSettings.width);
-                        this._pageBackColor((pageSettings.color && this.readerMode) ? 'rgba(' + pageSettings.color + ')' : '');
+                            this._pageWidth = pageSettings.width;
+                        this._pageBackColor = (pageSettings.color && this.readerMode) ? 'rgba(' + pageSettings.color + ')' : '';
                     }
                     this._initialDocumentData = previewInitialize.documentData;
                     this._sortCustomParametersLookUpValues(previewInitialize.parametersInfo);
-                    this.originalParametersInfo(previewInitialize.parametersInfo);
-                    if (previewInitialize.documentId && !this.documentBuilding()) {
+                    this.originalParametersInfo = previewInitialize.parametersInfo;
+                    if (previewInitialize.documentId && !this.documentBuilding) {
                         var documentIdPromise = $.Deferred().resolve(previewInitialize.documentId).promise();
                         this.progressBar.startProgress(null, () => { this.stopBuild(); }, documentIdPromise)
-                            .always(() => { this.documentBuilding(false); });
-                        this.documentBuilding(true);
+                            .always(() => { this.documentBuilding = false; });
+                        this.documentBuilding = true;
                         var doGetBuildStatusFunc = this.getDoGetBuildStatusFunc(true);
                         doGetBuildStatusFunc(previewInitialize.documentId);
                     }
@@ -504,11 +421,11 @@ export class ReportPreview extends Disposable {
                     this._processError(getLocalization('Cannot create a document for the current report', 'ASPxReportsStringId.WebDocumentViewer_DocumentCreationError'), null, true, previewInitialize.startBuildFaultMessage);
                 }
                 else {
-                    this.pageLoading(false);
+                    this.pageLoading = false;
                     this._processError(getLocalization('The report preview initialization has failed', 'ASPxReportsStringId.WebDocumentViewer_InitializationError'), previewInitialize && previewInitialize.error);
                 }
             }).fail((error) => {
-                this.reportOpening(false);
+                this.reportOpening = false;
                 this.removeEmptyPages();
             });
         }).resolve();
@@ -516,27 +433,27 @@ export class ReportPreview extends Disposable {
     }
     _deserializeExportOptions(exportOptionsString, isMerged) {
         var jsonModel = exportOptionsString && JSON.parse(exportOptionsString);
-        return (isMerged ? new ExportOptionsMergedPreview(this.signatures) : new ExportOptionsPreview(this.signatures)).deserialize(jsonModel);
+        return (isMerged ? new ExportOptionsMergedPreview(this.signatures) : new ExportOptionsPreview(this.signatures)).deserialize(jsonModel, nativeModelSerializer());
     }
     deactivate() {
         this._initialize();
         this._cleanTabInfo();
         this.closeReport();
-        this._currentDocumentId(null);
-        this._currentReportId(null);
-        this._currentReportUrl(null);
-        this.originalParametersInfo(null);
+        this.documentId = null;
+        this.reportId = null;
+        this.reportUrl = null;
+        this.originalParametersInfo = null;
     }
     startBuild() {
         this._initialize();
         return this._startBuildRequest();
     }
     customDocumentOperation(customData, hideMessageFromUser) {
-        var documentId = this._currentDocumentId();
-        if (this.documentBuilding() || !documentId)
+        var documentId = this.documentId;
+        if (this.documentBuilding || !documentId)
             return;
-        var serializedExportOptions = this.exportOptionsModel() ? JSON.stringify(new ModelSerializer().serialize(this.exportOptionsModel())) : null;
-        var editingFields = () => this._editingFields && this._editingFields().map(item => item.editValue());
+        var serializedExportOptions = this.exportOptionsModel ? JSON.stringify(nativeModelSerializer().serialize(this.exportOptionsModel)) : null;
+        var editingFields = () => this._editingFields.map(item => item.getEditValue());
         var deferred = $.Deferred();
         setTimeout(() => this.requestWrapper.customDocumentOperation(documentId, serializedExportOptions, editingFields(), customData, hideMessageFromUser)
             .done((response) => {
@@ -561,14 +478,14 @@ export class ReportPreview extends Disposable {
         return deferred.promise();
     }
     _initializeStartBuild(documentIdPromise) {
-        if (this.documentBuilding() || this._startBuildOperationId) {
+        if (this.documentBuilding || this._startBuildOperationId) {
             return false;
         }
         this._startBuildOperationId = generateGuid();
-        this._currentDocumentId(null);
+        this.documentId = null;
         this.progressBar.startProgress(this._startBuildOperationId, () => { this.stopBuild(); }, documentIdPromise)
-            .always(() => { this.documentBuilding(false); });
-        this.documentBuilding(true);
+            .always(() => { this.documentBuilding = false; });
+        this.documentBuilding = true;
         return true;
     }
     _startBuildRequest() {
@@ -577,7 +494,7 @@ export class ReportPreview extends Disposable {
             return null;
         }
         var deferred = $.Deferred();
-        var currentReportId = this._currentReportId();
+        var currentReportId = this.reportId;
         var startBuildOperationId = this._startBuildOperationId;
         var shouldIgnoreError = () => this._closeReportRequests[currentReportId];
         this.requestWrapper.startBuildRequest(shouldIgnoreError)
@@ -598,7 +515,7 @@ export class ReportPreview extends Disposable {
         this._getBuildStatusDeferreds.push(sessionDeferred);
         this._timeouts.push(setTimeout(() => {
             var ignorePredicate = this._getIgnorePredicate(documentId);
-            var firstPage = this.pages()[0];
+            var firstPage = this.pages[0];
             var firstPageRequest = ((firstPage === null || firstPage === void 0 ? void 0 : firstPage.shouldSendRequest) || !shouldRequestFirstPage) ? undefined : firstPage === null || firstPage === void 0 ? void 0 : firstPage._getCurrentPageRequest(documentId);
             this.requestWrapper.getBuildStatusRequest(documentId, ignorePredicate, isFirstRequest, firstPageRequest)
                 .done((response) => {
@@ -620,12 +537,12 @@ export class ReportPreview extends Disposable {
         var preview = this;
         var isFirstRequest = true;
         this.previewHandlersHelper.processPages(1, this._getIgnorePredicate(this.documentId));
-        this.pages()[0].shouldSendRequest = false;
+        this.pages[0].shouldSendRequest = false;
         var doGetBuildStatus = (documentId) => {
             var promise = preview.getBuildStatus(documentId, isFirstRequest, shouldRequestFirstPage);
             promise.done((result) => {
                 isFirstRequest = false;
-                if (documentId !== preview._currentDocumentId())
+                if (documentId !== preview.documentId)
                     return;
                 if (result && result.requestAgain && !preview._closeDocumentRequests[documentId]) {
                     var doStatusRequest = () => {
@@ -638,18 +555,18 @@ export class ReportPreview extends Disposable {
                 else {
                     try {
                         if (result.error || !result.requestAgain && !result.pageCount) {
-                            preview.pageLoading(false);
+                            preview.pageLoading = false;
                             preview.removeEmptyPages(!result.pageCount);
-                            if (!preview.pages().length)
-                                preview.pageIndex(-1);
+                            if (!preview.pages.length)
+                                preview.pageIndex = -1;
                             return;
                         }
                         if (!result.completed) {
                             return;
                         }
-                        else if (result.pageCount < preview.pages().length) {
-                            preview.pageIndex(Math.min(result.pageCount - 1, preview.pageIndex()));
-                            preview.pages.splice(result.pageCount, preview.pages().length);
+                        else if (result.pageCount < preview.pages.length) {
+                            preview.pageIndex = Math.min(result.pageCount - 1, preview.pageIndex);
+                            preview.pages.splice(result.pageCount, preview.pages.length);
                         }
                         preview.getDocumentData(documentId);
                     }
@@ -671,7 +588,7 @@ export class ReportPreview extends Disposable {
             if (!response) {
                 return;
             }
-            this.signatures((response.signatures || []).map(x => {
+            this.signatures = (response.signatures || []).map(x => {
                 var fields = [];
                 var image = null;
                 if (x.issuer)
@@ -706,10 +623,10 @@ export class ReportPreview extends Disposable {
                     key: x.key,
                     fields
                 };
-            }));
+            });
             this.previewHandlersHelper.processPages(response.pageCount, () => false);
             this._onGetDocumentDetails && this._onGetDocumentDetails(response);
-            this.exportHandler.reportDisplayName(response.displayName);
+            this.exportHandler.reportDisplayName = response.displayName;
             this._drillDownState = response.drillDownKeys || [];
             this._sortingState = response.sortingState || [];
             var isMerged = this.reportId
@@ -718,27 +635,25 @@ export class ReportPreview extends Disposable {
             var deserializedExportOptions = this._deserializeExportOptions(response.exportOptions, isMerged);
             var customizeExportOptionsArgs = { exportOptions: deserializedExportOptions, panelVisible: true };
             this.customizeExportOptions && this.customizeExportOptions(customizeExportOptionsArgs);
-            this.exportOptionsTabVisible(customizeExportOptionsArgs.panelVisible);
-            this.exportOptionsModel(deserializedExportOptions);
-            this.documentMap(response.documentMap);
-            this._editingValuesSubscriptions.forEach(item => item.dispose());
-            this._editingValuesSubscriptions = [];
-            this._editingFields((response.editingFields || []).map((item, index) => {
+            this.exportOptionsTabVisible = customizeExportOptionsArgs.panelVisible;
+            this.exportOptionsModel = deserializedExportOptions;
+            this.documentMap = response.documentMap;
+            this.disposeArray(this._editingFields);
+            this._editingFields = (response.editingFields || []).map((item, index) => {
                 var field = this.createEditingField(item, index);
                 if (this.editingFieldChanged) {
                     field.editingFieldChanged = this.editingFieldChanged;
                 }
-                this._editingValuesSubscriptions.push(field.editValue);
                 return field;
-            }));
+            });
         });
         this.requestWrapper.getDocumentData(documentId, ignoreErrorPredicate)
             .done(response => {
             documentDataDeferred.resolve(response);
             if (this.documentReady && documentId) {
                 this._timeouts.push(setTimeout(() => {
-                    const pageCount = this.pages().length;
-                    this.documentReady(documentId, this._currentReportId(), pageCount);
+                    const pageCount = this.pages.length;
+                    this.documentReady(documentId, this.reportId, pageCount);
                 }));
             }
         })
@@ -747,22 +662,22 @@ export class ReportPreview extends Disposable {
         });
     }
     exportDocumentTo(format, inlineResult) {
-        if (!this._currentDocumentId())
+        if (!this.documentId)
             return;
         this.pageLoader.reset();
         var signature = null;
         if (format === 'pdf') {
-            signature = this.exportOptionsModel().pdf.signature();
+            signature = this.exportOptionsModel.pdf._get('signature');
         }
-        var serializedExportOptions = this.exportOptionsModel() ? JSON.stringify(new ModelSerializer().serialize(this.exportOptionsModel())) : null;
+        var serializedExportOptions = this.exportOptionsModel ? JSON.stringify(nativeModelSerializer().serialize(this.exportOptionsModel)) : null;
         var args = () => encodeURIComponent(JSON.stringify({
-            documentId: this._currentDocumentId(),
+            documentId: this.documentId,
             exportOptions: serializedExportOptions,
             format: format,
             signature,
             inlineResult: inlineResult,
-            editingFieldValues: this._editingFields && this._editingFields().map(item => {
-                var editValue = item.editValue();
+            editingFieldValues: this._editingFields.map(item => {
+                var editValue = item.getEditValue();
                 if (typeof editValue === 'string')
                     return transformNewLineCharacters(editValue);
                 return editValue;
@@ -771,35 +686,35 @@ export class ReportPreview extends Disposable {
         this.exportHandler.export(args, HandlerUri(), inlineResult);
     }
     printDocument(pageIndex) {
-        if (!this._currentDocumentId())
+        if (!this.documentId)
             return;
         this.pageLoader.reset();
-        const signature = this.exportOptionsModel().pdf.signature();
-        const previousShowPrintDialogOnOpen = this.exportOptionsModel().pdf['showPrintDialogOnOpen']();
-        const previousPdfACompatibility = this.exportOptionsModel().pdf['pdfACompatibility']();
-        const previousPageRange = this.exportOptionsModel().pdf['pageRange']();
-        this.exportOptionsModel().pdf['showPrintDialogOnOpen'](true);
-        this.exportOptionsModel().pdf['pdfACompatibility']('None');
+        const signature = this.exportOptionsModel.pdf._get('signature');
+        const previousShowPrintDialogOnOpen = this.exportOptionsModel.pdf._get('showPrintDialogOnOpen');
+        const previousPdfACompatibility = this.exportOptionsModel.pdf._get('pdfACompatibility');
+        const previousPageRange = this.exportOptionsModel.pdf._get('pageRange');
+        this.exportOptionsModel.pdf._set('showPrintDialogOnOpen', true);
+        this.exportOptionsModel.pdf._set('pdfACompatibility', 'None');
         pageIndex = parseInt(pageIndex);
-        if ((!!pageIndex && pageIndex > 0 || pageIndex === 0) && (this.pages().length > pageIndex)) {
-            this.exportOptionsModel().pdf['pageRange'](pageIndex + 1);
+        if ((!!pageIndex && pageIndex > 0 || pageIndex === 0) && (this.pages.length > pageIndex)) {
+            this.exportOptionsModel.pdf._set('pageRange', pageIndex + 1);
         }
-        const serializedExportOptions = JSON.stringify(new ModelSerializer().serialize(this.exportOptionsModel()));
+        const serializedExportOptions = JSON.stringify(nativeModelSerializer().serialize(this.exportOptionsModel));
         const args = () => encodeURIComponent(JSON.stringify({
-            documentId: this._currentDocumentId(),
+            documentId: this.documentId,
             exportOptions: serializedExportOptions,
             format: isIOS ? 'pdf' : 'printpdf',
             signature,
             inlineResult: !isIOS,
-            editingFieldValues: this._editingFields && this._editingFields().map(item => item.editValue())
+            editingFieldValues: this._editingFields.map(item => item.getEditValue())
         }));
         this.exportHandler.export(args, HandlerUri(), true, true);
-        this.exportOptionsModel().pdf['showPrintDialogOnOpen'](previousShowPrintDialogOnOpen);
-        this.exportOptionsModel().pdf['pdfACompatibility'](previousPdfACompatibility);
-        this.exportOptionsModel().pdf['pageRange'](previousPageRange);
+        this.exportOptionsModel.pdf._set('showPrintDialogOnOpen', previousShowPrintDialogOnOpen);
+        this.exportOptionsModel.pdf._set('pdfACompatibility', previousPdfACompatibility);
+        this.exportOptionsModel.pdf._set('pageRange', previousPageRange);
     }
     stopBuild(documentId) {
-        var id = documentId || this._currentDocumentId();
+        var id = documentId || this.documentId;
         if (!id) {
             this._startBuildOperationId && (this._stopBuildRequests[this._startBuildOperationId] = true);
             return;
@@ -808,7 +723,7 @@ export class ReportPreview extends Disposable {
         this.requestWrapper.stopBuild(id);
     }
     closeDocument(documentId) {
-        var _documentId = documentId || this._currentDocumentId();
+        var _documentId = documentId || this.documentId;
         if (!_documentId) {
             this._startBuildOperationId && (this._closeDocumentRequests[this._startBuildOperationId] = true);
             return;
@@ -819,7 +734,7 @@ export class ReportPreview extends Disposable {
     }
     closeReport() {
         this._openReportOperationDeferred && this._openReportOperationDeferred.reject();
-        var currentReportId = this._currentReportId();
+        var currentReportId = this.reportId;
         if (!currentReportId) {
             return;
         }
@@ -827,7 +742,7 @@ export class ReportPreview extends Disposable {
         this.requestWrapper.sendCloseRequest(null, currentReportId);
     }
     setPageVisibility(page, visible) {
-        page.isClientVisible(visible);
+        page.isClientVisible = visible;
         if (visible) {
             this.pageLoader.reset();
             var offset = PreloadedPagesOffset();
@@ -839,36 +754,84 @@ export class ReportPreview extends Disposable {
             this.pageLoader.prefetchPages(startIndex, endIndex, page.pageIndex);
         }
     }
-    updatePage(page, zoom = this._zoom()) {
-        page._setPageImgSrc(this._currentDocumentId(), this._unifier(), zoom, this.documentBuilding());
+    updatePage(page, zoom = this.originalZoom) {
+        page._setPageImgSrc(this.documentId, this._unifier, zoom, this.documentBuilding);
     }
     goToPage(pageIndex, forcePageChanging, throttle) {
         var _a;
-        if (!forcePageChanging && this.pageIndex.peek() === pageIndex || this.pages.peek().length === 0 || pageIndex < 0 || pageIndex >= this.pages.peek().length) {
+        if (!forcePageChanging && this.pageIndex === pageIndex || this.pages.length === 0 || pageIndex < 0 || pageIndex >= this.pages.length) {
             return;
         }
         if (this._goToPageTimer !== undefined) {
             clearTimeout(this._goToPageTimer);
         }
         var updateActivePage = (activePageIndex) => {
-            this.pages.peek().forEach((page) => {
+            this.pages.forEach((page) => {
                 var visible = page.pageIndex === activePageIndex;
-                page.active(visible);
+                page.active = visible;
                 this.setPageVisibility(page, visible);
             });
             this._goToPageTimer = undefined;
         };
-        if (throttle && !ko.unwrap((_a = this.pages()[pageIndex]) === null || _a === void 0 ? void 0 : _a.imageSrc))
-            this._timeouts.push(this._goToPageTimer = setTimeout(() => updateActivePage(this.pageIndex()), throttle));
+        if (throttle && !((_a = this.pages[pageIndex]) === null || _a === void 0 ? void 0 : _a.imageSrc))
+            this._timeouts.push(this._goToPageTimer = setTimeout(() => updateActivePage(this.pageIndex), throttle));
         else
             updateActivePage(pageIndex);
-        this.pageIndex(pageIndex);
+        this.pageIndex = pageIndex;
     }
     createEditingField(item, index) {
         return new EditingField(item, index, this.requestWrapper);
     }
-    currentPageAriaLabelImgAlt(index) {
-        return formatUnicorn(getLocalization('Report Preview page {0} of {1}', 'ASPxReportsStringId.WebDocumentViewer_AriaLabelPreviewPage'), index + 1, this.pages().length);
+    _updateExportDisabled() {
+        this.exportDisabled = this.progressBar.inProgress || !this.exportOptionsModel;
+    }
+    onPropertyChanged(args) {
+        if (args.propertyName === 'zoom') {
+            const zoom = args.newValue;
+            if (zoom > 0) {
+                this.autoFitBy = ZoomAutoBy.None;
+                this.originalZoom = zoom;
+            }
+            else {
+                this.autoFitBy = zoom;
+            }
+        }
+        if (args.propertyName === 'autoFitBy' || args.propertyName === 'originalZoom') {
+            this.zoom = (this.autoFitBy != ZoomAutoBy.None || this.originalZoom === 0) ? this.autoFitBy : this.originalZoom;
+        }
+        if (args.propertyName === 'documentId')
+            this._unifier = args.newValue ? generateGuid() : '';
+        if (args.propertyName === 'originalZoom')
+            this._onOriginalZoomChanged();
+        if (args.propertyName === 'previewSize')
+            this._raiseOnSizeChanged();
+        if (args.propertyName === 'pages' || args.propertyName === 'pageIndex')
+            this._updateCurrentPage();
+        if (args.propertyName === 'documentBuilding')
+            this._onDocumentBuildingChanged(args.newValue);
+        if (args.propertyName === 'exportOptionsModel')
+            this._updateExportDisabled();
+        if (args.propertyName === 'showMultipagePreview') {
+            if (!args.newValue) {
+                var currentPage = this.pages[this.pageIndex];
+                if (currentPage)
+                    currentPage.isClientVisible = true;
+            }
+            else {
+                this._loadVisibleImages && this._loadVisibleImages(500);
+            }
+        }
+        if (args.propertyName === 'documentId' || args.propertyName === 'currentPage' || args.propertyName === 'pageIndex'
+            || args.propertyName === 'documentBuilding' || args.propertyName == 'reportOpening' || args.propertyName == 'errorMessage'
+            || args.propertyName === 'originalParametersInfo') {
+            this._updateEmptyDocumentCaption();
+        }
+    }
+    createViewModel() {
+        return createReportPreviewViewModel.call(this, super.createViewModel());
+    }
+    updateViewModel(args) {
+        updateReportPreviewViewModel.call(this, args);
     }
     _getErrorMessage(jqXHR) {
         var serverError = getErrorMessage(jqXHR);
@@ -888,13 +851,131 @@ export class ReportPreview extends Disposable {
         var _a;
         return (_a = this.element) === null || _a === void 0 ? void 0 : _a.getElementsByClassName('dx-designer-viewport')[0];
     }
-    get reportId() {
-        return this._currentReportId();
-    }
-    get reportUrl() {
-        return this._currentReportUrl();
-    }
-    get documentId() {
-        return this._currentDocumentId();
+    _updateEmptyDocumentCaption() {
+        var parametersInfo = this.originalParametersInfo;
+        var parametersExist = parametersInfo && parametersInfo.parameters.some(x => x.Visible);
+        var newCaption = '';
+        if (this.documentBuilding) {
+            if (this.currentPage) {
+                if (!this._progressFirstTime)
+                    newCaption = formatUnicorn(getLocalization('Progress {0}%', 'ASPxReportsStringId.WebDocumentViewer_AriaDocumentProgress'), this.progressBar.progress.toString());
+                else
+                    newCaption = this.progressBar.progress + '%';
+                this._progressFirstTime = true;
+            }
+            else {
+                newCaption = getLocalization('Creating the document...', 'PreviewStringId.Msg_CreatingDocument');
+            }
+        }
+        else if (parametersExist && !this.documentId) {
+            newCaption = getLocalization('Waiting for parameter values...', 'PreviewStringId.Msg_WaitingForParameterValues');
+        }
+        else if (this.documentId) {
+            this._progressFirstTime = false;
+            if (this.pageIndex !== -1 && !this.progressBar.inProgress) {
+                newCaption = getLocalization('Document is ready', 'ASPxReportsStringId.WebDocumentViewer_AriaDocumentReady');
+            }
+            else {
+                newCaption = getLocalization('The document does not contain any pages.', 'PreviewStringId.Msg_EmptyDocument');
+            }
+        }
+        else if (this.reportOpening) {
+            this._progressFirstTime = false;
+            newCaption = getLocalization('Loading...', 'AnalyticsCoreStringId.Loading');
+        }
+        else if (this.errorMessage) {
+            newCaption = this.errorMessage;
+        }
+        this.emptyDocumentCaption = newCaption;
     }
 }
+__decorate([
+    mutable(null)
+], ReportPreview.prototype, "originalParametersInfo", void 0);
+__decorate([
+    mutable(null)
+], ReportPreview.prototype, "exportOptionsModel", void 0);
+__decorate([
+    mutable('')
+], ReportPreview.prototype, "errorMessage", void 0);
+__decorate([
+    mutable(false)
+], ReportPreview.prototype, "reportOpening", void 0);
+__decorate([
+    mutable(false)
+], ReportPreview.prototype, "exportDisabled", void 0);
+__decorate([
+    mutableArray(() => [])
+], ReportPreview.prototype, "pages", void 0);
+__decorate([
+    mutable(-1)
+], ReportPreview.prototype, "pageIndex", void 0);
+__decorate([
+    mutable(null)
+], ReportPreview.prototype, "currentPage", void 0);
+__decorate([
+    mutable(false)
+], ReportPreview.prototype, "showMultipagePreview", void 0);
+__decorate([
+    mutable(false)
+], ReportPreview.prototype, "rtlReport", void 0);
+__decorate([
+    mutable(false)
+], ReportPreview.prototype, "editingFieldsHighlighted", void 0);
+__decorate([
+    mutable(null)
+], ReportPreview.prototype, "documentMap", void 0);
+__decorate([
+    mutable(false)
+], ReportPreview.prototype, "pageLoading", void 0);
+__decorate([
+    mutable(ZoomAutoBy.WholePage)
+], ReportPreview.prototype, "autoFitBy", void 0);
+__decorate([
+    mutable(1)
+], ReportPreview.prototype, "originalZoom", void 0);
+__decorate([
+    mutable(ZoomAutoBy.WholePage)
+], ReportPreview.prototype, "zoom", void 0);
+__decorate([
+    mutable(0)
+], ReportPreview.prototype, "previewSize", void 0);
+__decorate([
+    mutable(null)
+], ReportPreview.prototype, "documentId", void 0);
+__decorate([
+    mutable(null)
+], ReportPreview.prototype, "reportId", void 0);
+__decorate([
+    mutable(null)
+], ReportPreview.prototype, "reportUrl", void 0);
+__decorate([
+    mutable(false)
+], ReportPreview.prototype, "documentBuilding", void 0);
+__decorate([
+    mutable('')
+], ReportPreview.prototype, "_unifier", void 0);
+__decorate([
+    mutable(818)
+], ReportPreview.prototype, "_pageWidth", void 0);
+__decorate([
+    mutable(1058)
+], ReportPreview.prototype, "_pageHeight", void 0);
+__decorate([
+    mutable('')
+], ReportPreview.prototype, "_pageBackColor", void 0);
+__decorate([
+    mutable('', { rateLimit: { timeout: 1000 } })
+], ReportPreview.prototype, "emptyDocumentCaption", void 0);
+__decorate([
+    mutable(true)
+], ReportPreview.prototype, "exportOptionsTabVisible", void 0);
+__decorate([
+    mutable(false)
+], ReportPreview.prototype, "previewVisible", void 0);
+__decorate([
+    mutable(() => [])
+], ReportPreview.prototype, "_editingFields", void 0);
+__decorate([
+    mutable(() => [])
+], ReportPreview.prototype, "signatures", void 0);