devexpress-reporting 23.2.0-build-000-1111 → 23.2.2-beta

package/viewer/reportPreview.js

@@ -1,16 +1,22 @@
-/**
-* DevExpress HTML/JS Reporting (viewer\reportPreview.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 { CustomSortedArrayStore, formatUnicorn, getErrorMessage } from '@devexpress/analytics-core/analytics-internal';
-import { Disposable, getLocalization, ModelSerializer } from '@devexpress/analytics-core/analytics-utils';
+/**
+* DevExpress HTML/JS Reporting (viewer\reportPreview.js)
+* Version:  23.2.2-beta
+* Build date: Nov 13, 2023
+* Copyright (c) 2012 - 2023 Developer Express Inc. ALL RIGHTS RESERVED
+* License: https://www.devexpress.com/Support/EULAs/universal.xml
+*/
+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 } from '../common/utils/_utils';
+import { generateGuid, transformNewLineCharacters, isIOS } from '../common/utils/_utils';
 import { PreviewBricksKeyboardHelper } from './accessibility/_previewBricksKeyboardHelper';
 import { ZoomAutoBy } from './constants';
 import { EditingField } from './editing/editingField';
@@ -23,27 +29,20 @@ 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 {
-    constructor(handlerUri, previewRequestWrapper, previewHandlersHelper, callbacks, rtl = false, enableKeyboardSupport, exportSettings, element) {
+import { BreadcrumbModel } from './internal/_previewBreadcrumbs';
+export class ReportPreview extends BaseRenderingModel {
+    constructor(handlerUri, previewRequestWrapper, previewHandlersHelper, callbacks, rtl = false, enableKeyboardSupport, exportSettings, element, breadcrumb) {
         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 +50,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 +59,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 +101,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);
@@ -201,98 +116,94 @@ export class ReportPreview extends Disposable {
         this.previewHandlersHelper = previewHandlersHelper || new PreviewHandlersHelper(this);
         this.requestWrapper = previewRequestWrapper || new PreviewRequestWrapper(null, callbacks);
         this.rtlViewer = rtl;
+        this._breadcrumb = breadcrumb !== null && breadcrumb !== void 0 ? breadcrumb : new BreadcrumbModel();
         this.exportHandler = new ExportHandler(exportSettings, this);
         if (callbacks) {
             this.customProcessBrickClick = callbacks.previewClick;
             this.customizeExportOptions = callbacks.customizeExportOptions;
+            this.documentReady = callbacks.documentReady;
             this.exportHandler.onExportCustomEvent = callbacks.onExport;
             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);
                 }
-                if (callbacks && callbacks.documentReady && documentId) {
-                    var self = this;
-                    this._timeouts.push(setTimeout(function () {
-                        callbacks.documentReady(documentId, self._currentReportId(), pageCount);
-                    }));
-                }
             }
             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.exportHandler.events.on('reportDisplayNameChanged', (args) => {
+            this._breadcrumb.updateCurrentReportName(args.newValue);
+        }), this.events.on('documentIdChanged', (args) => {
+            this._breadcrumb.updateCurrentDocumentId(this.documentId);
+        }));
+        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();
@@ -304,62 +215,72 @@ 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() {
         super.dispose();
+        this.pageLoader.reset();
+        this.removeAllPages();
         (this._timeouts || []).forEach(tic => clearTimeout(tic));
         (this._deferreds || []).forEach(deferred => deferred.reject());
         this.exportHandler && this.exportHandler.dispose();
         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() {
+    _initialize(closeDocument = true) {
         var _a, _b, _c;
         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);
+        if (closeDocument)
+            this.closeDocument();
+        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;
@@ -367,7 +288,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('');
@@ -376,7 +297,11 @@ export class ReportPreview extends Disposable {
             var brickNavigation = brick && brick.navigation;
             var defaultHandler = () => {
                 if (brickNavigation) {
-                    if (brickNavigation.drillDownKey && _self.reportId && _self._doDrillDown && _self._drillDownState.length > 0) {
+                    if (brickNavigation.drillThroughData && _self.reportId) {
+                        this._breadcrumb.updateCurrentPosition(this.pageIndex, brick.indexes);
+                        _self.drillThrough(brickNavigation.drillThroughData);
+                    }
+                    else if (brickNavigation.drillDownKey && _self.reportId && _self._doDrillDown && _self._drillDownState.length > 0) {
                         if (_self._startBuildOperationId)
                             return;
                         _self._doDrillDown(brickNavigation.drillDownKey);
@@ -386,8 +311,8 @@ export class ReportPreview extends Disposable {
                             return;
                         _self._doSorting(brickNavigation.sortData, shiftKey, ctrlKey);
                     }
-                    if (brickNavigation.pageIndex >= 0) {
-                        var targetPage = _self.pages().filter(page => page.pageIndex === brickNavigation.pageIndex)[0];
+                    else if (brickNavigation.pageIndex >= 0) {
+                        var targetPage = _self.pages.filter(page => page.pageIndex === brickNavigation.pageIndex)[0];
                         if (targetPage) {
                             _self.goToPage(brickNavigation.pageIndex);
                             targetPage.selectBrick(brickNavigation.indexes);
@@ -431,9 +356,10 @@ export class ReportPreview extends Disposable {
         });
         return this.initialize(deferred.promise());
     }
-    drillThrough(customData, closeCurrentReport = true) {
+    goToReport(customData, closeCurrentReport = true) {
         var deferred = $.Deferred();
-        this.requestWrapper.drillThrough(customData).done(response => {
+        this._deferreds.push(deferred);
+        this.requestWrapper.goToReport(customData).done(response => {
             if (closeCurrentReport) {
                 this._clearReportInfo();
                 this.initialize(deferred.promise());
@@ -444,6 +370,18 @@ export class ReportPreview extends Disposable {
         });
         return deferred.promise();
     }
+    drillThrough(drillThroughData) {
+        var deferred = $.Deferred();
+        this._deferreds.push(deferred);
+        this.requestWrapper.drillThrough(drillThroughData).done(response => {
+            this._breadcrumb.addItem(response);
+            this.initialize(deferred.promise(), false, true);
+            deferred.resolve(response);
+        }).fail((error) => {
+            deferred.reject(error);
+        });
+        return deferred.promise();
+    }
     _sortCustomParametersLookUpValues(reportParameterInfo) {
         var _a;
         if (!reportParameterInfo || !reportParameterInfo.knownEnums)
@@ -457,9 +395,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);
@@ -469,51 +407,91 @@ export class ReportPreview extends Disposable {
         }
         this.setPageVisibility(firstPage, true);
     }
-    initialize(initializeDataPromise) {
-        this.reportOpening(true);
-        this._currentReportId(null);
-        this._currentReportUrl(null);
-        this._currentDocumentId(null);
-        this._initialize();
+    initialize(initializeDataPromise, closeDocument = true, submitParams = false) {
+        this.reportOpening = true;
+        this.reportId = null;
+        this.reportUrl = null;
+        this.documentId = null;
+        this._initialize(closeDocument);
         var _initializeDeferred = $.Deferred();
         this._deferreds.push(_initializeDeferred);
         _initializeDeferred.done(() => {
             initializeDataPromise.done((previewInitialize) => {
-                this.reportOpening(false);
+                var _a;
+                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);
-                    var pageSettings = previewInitialize.pageSettings;
-                    if (pageSettings) {
-                        if (pageSettings.height)
-                            this._pageHeight(pageSettings.height);
-                        if (pageSettings.width)
-                            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()) {
-                        var documentIdPromise = $.Deferred().resolve(previewInitialize.documentId).promise();
-                        this.progressBar.startProgress(null, () => { this.stopBuild(); }, documentIdPromise)
-                            .always(() => { this.documentBuilding(false); });
-                        this.documentBuilding(true);
-                        var doGetBuildStatusFunc = this.getDoGetBuildStatusFunc(true);
-                        doGetBuildStatusFunc(previewInitialize.documentId);
-                    }
+                    var setReport = (previewInitialize, parameters, pageIndex) => {
+                        this._initialize(false);
+                        this.documentBuilding = false;
+                        this.progressBar.inProgress = false;
+                        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;
+                            if (pageSettings.width)
+                                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) {
+                            var documentIdPromise = $.Deferred().resolve(previewInitialize.documentId).promise();
+                            this.progressBar.startProgress(null, () => { this.stopBuild(); }, documentIdPromise)
+                                .always(() => { this.documentBuilding = false; });
+                            this.documentBuilding = true;
+                            var doGetBuildStatusFunc = this.getDoGetBuildStatusFunc(true);
+                            doGetBuildStatusFunc(previewInitialize.documentId);
+                        }
+                        if (parameters) {
+                            Object.keys(parameters).forEach(path => {
+                                var setParameterValueByPath = (parameterViewModel, parameterPath, value) => {
+                                    var _a;
+                                    if (parameterViewModel[parameterPath] !== undefined) {
+                                        parameterViewModel[parameterPath].value ? parameterViewModel[parameterPath].value = value
+                                            : parameterViewModel[parameterPath] = value;
+                                    }
+                                    else {
+                                        (_a = parameterViewModel.groupLayoutItems) === null || _a === void 0 ? void 0 : _a.forEach(groupLayoutItem => {
+                                            setParameterValueByPath(groupLayoutItem, parameterPath, value);
+                                        });
+                                    }
+                                };
+                                setParameterValueByPath(this.previewParametersViewModel, path, parameters[path]);
+                            });
+                        }
+                        this._breadcrumb.updatePreviewSize && this._breadcrumb.updatePreviewSize();
+                        this.disposePagesChangedEvent && this.disposePagesChangedEvent();
+                        if (pageIndex !== undefined) {
+                            this.disposePagesChangedEvent = this.events.on('pagesChanged', (args) => {
+                                const pageInfo = this._breadcrumb.getCurrentPageInfo();
+                                if (this.pages.length && this.pages.length > pageInfo.pageIndex) {
+                                    var targetPage = this.pages[pageInfo.pageIndex];
+                                    if (targetPage) {
+                                        this.pageIndex !== pageInfo.pageIndex && this.goToPage(pageInfo.pageIndex);
+                                        pageInfo.indexes && pageInfo.indexes.length && targetPage.selectBrick(pageInfo.indexes);
+                                        this.disposePagesChangedEvent && this.disposePagesChangedEvent();
+                                    }
+                                }
+                            });
+                        }
+                    };
+                    setReport(previewInitialize);
+                    this._breadcrumb.updateCurrentItem(previewInitialize, setReport, (_a = previewInitialize.documentData) === null || _a === void 0 ? void 0 : _a.displayName);
                 }
                 else if (previewInitialize.startBuildFaultMessage) {
                     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();
@@ -521,27 +499,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) => {
@@ -566,32 +544,33 @@ 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() {
-        var docuemntIdDeferred = $.Deferred();
-        if (!this._initializeStartBuild(docuemntIdDeferred)) {
+        var documentIdDeferred = $.Deferred();
+        if (!this._initializeStartBuild(documentIdDeferred)) {
             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)
             .done((response) => {
-            this.previewHandlersHelper && this.previewHandlersHelper.doneStartBuildHandler(deferred, response, startBuildOperationId, docuemntIdDeferred);
+            this.previewHandlersHelper && this.previewHandlersHelper.doneStartBuildHandler(deferred, response, startBuildOperationId, documentIdDeferred);
+            this._breadcrumb.updateCurrentParameters(this.previewParametersViewModel);
         })
             .fail(() => {
             this.previewHandlersHelper && this.previewHandlersHelper.errorStartBuildHandler(deferred, startBuildOperationId);
-            docuemntIdDeferred.reject();
+            documentIdDeferred.reject();
         });
         deferred.always(() => this._startBuildOperationId = '');
         return deferred.promise();
@@ -603,7 +582,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) => {
@@ -625,12 +604,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 = () => {
@@ -643,18 +622,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);
                     }
@@ -676,7 +655,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)
@@ -701,7 +680,7 @@ export class ReportPreview extends Disposable {
                     });
                 if (x.validFrom && x.validTo)
                     fields.push({
-                        value: formatUnicorn(getLocalization('Valid from {0:d} to {1:d}', 'PreviewStringId.ExportOption_PdfSignature_ValidRange'), x.validFrom, x.validTo)
+                        value: formatUnicorn(getLocalization('Valid From: {0:d} to {1:d}', 'PreviewStringId.ExportOption_PdfSignature_ValidRange'), x.validFrom, x.validTo)
                     });
                 if (x.image)
                     image = ImageSource.parse(x.image).getDataUrl();
@@ -711,10 +690,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
@@ -723,45 +702,49 @@ 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.reportId, pageCount);
+                }));
+            }
         })
             .fail(error => {
             documentDataDeferred.reject(error);
         });
     }
     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;
@@ -770,32 +753,35 @@ export class ReportPreview extends Disposable {
         this.exportHandler.export(args, HandlerUri(), inlineResult);
     }
     printDocument(pageIndex) {
-        if (!this._currentDocumentId())
+        if (!this.documentId)
             return;
         this.pageLoader.reset();
-        var signature = this.exportOptionsModel().pdf.signature();
-        var previousShowPrintDialogOnOpen = this.exportOptionsModel().pdf['showPrintDialogOnOpen']();
-        const previousPageRange = this.exportOptionsModel().pdf['pageRange']();
-        this.exportOptionsModel().pdf['showPrintDialogOnOpen'](true);
+        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);
         }
-        var serializedExportOptions = JSON.stringify(new ModelSerializer().serialize(this.exportOptionsModel()));
-        var args = () => encodeURIComponent(JSON.stringify({
-            documentId: this._currentDocumentId(),
+        const serializedExportOptions = JSON.stringify(nativeModelSerializer().serialize(this.exportOptionsModel));
+        const args = () => encodeURIComponent(JSON.stringify({
+            documentId: this.documentId,
             exportOptions: serializedExportOptions,
             format: 'printpdf',
             signature,
-            inlineResult: true,
-            editingFieldValues: this._editingFields && this._editingFields().map(item => item.editValue())
+            inlineResult: !isIOS,
+            editingFieldValues: this._editingFields.map(item => item.getEditValue())
         }));
         this.exportHandler.export(args, HandlerUri(), true, true);
-        this.exportOptionsModel().pdf['showPrintDialogOnOpen'](previousShowPrintDialogOnOpen);
-        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;
@@ -804,7 +790,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;
@@ -815,7 +801,7 @@ export class ReportPreview extends Disposable {
     }
     closeReport() {
         this._openReportOperationDeferred && this._openReportOperationDeferred.reject();
-        var currentReportId = this._currentReportId();
+        var currentReportId = this.reportId;
         if (!currentReportId) {
             return;
         }
@@ -823,7 +809,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();
@@ -835,36 +821,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);
@@ -884,13 +918,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);