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

package/viewer/internal/_page.js

@@ -1,95 +1,91 @@
-/**
-* DevExpress HTML/JS Reporting (viewer\internal\_page.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 { Disposable, getLocalization } from '@devexpress/analytics-core/analytics-utils';
+/**
+* DevExpress HTML/JS Reporting (viewer\internal\_page.js)
+* Version:  23.2.1-alpha-23254-1700
+* Build date: Sep 11, 2023
+* Copyright (c) 2012 - 2023 Developer Express Inc. ALL RIGHTS RESERVED
+* License: https://www.devexpress.com/Support/EULAs/universal.xml
+*/
+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 { compareSizes } from '@devexpress/analytics-core/analytics-elements-native';
+import { $dx } from '@devexpress/analytics-core/analytics-internal-native';
+import { BaseRenderingModel, mutable, mutableArray } from '@devexpress/analytics-core/analytics-serializer-native';
 import * as $ from 'jquery';
-import * as ko from 'knockout';
 import { generateGuid } from '../../common/utils/_utils';
 import { PreviewEditingFieldsKeyboardHelper } from '../accessibility/_previewEditingFieldsKeyboardHelper';
-import { HandlerUri, previewDefaultResolution } from '../settings';
+import { ZoomAutoBy } from '../constants';
+import { HandlerUri } from '../settings';
 import { brickText, initializeBrick, updateBricksPosition } from './_brickUtils';
+import { createPreviewPageViewModel, updatePreviewPageViewModel } from './_page.viewModel';
 import { PreviewRequestWrapper } from './_previewRequestWrapper';
 import { PreviewSelection } from './_previewSelection';
 import { getCurrentResolution } from './_utils';
-export class PreviewPage extends Disposable {
-    constructor(preview, pageIndex, processClick, loading) {
+const imageSrcMutableOptions = { rateLimit: { timeout: 100, method: 'notifyWhenChangesStop' } };
+export class PreviewPage extends BaseRenderingModel {
+    constructor(reportPreview, pageIndex, processClick, subscribeToPageLoading = false) {
         super();
-        this.isClientVisible = ko.observable(false);
-        this.originalHeight = ko.observable(0);
-        this.originalWidth = ko.observable(0);
-        this.loadingText = getLocalization('Loading...', 'AnalyticsCoreStringId.Loading');
-        this.realZoom = ko.observable(1);
+        this.reportPreview = reportPreview;
         this.actualResolution = 0;
-        this.currentScaleFactor = ko.observable(1);
-        this.imageHeight = ko.observable(0);
-        this.imageWidth = ko.observable(0);
-        this.imageSrc = ko.observable('').extend({ rateLimit: { timeout: 100, method: 'notifyWhenChangesStop' } });
-        this.displayImageSrc = ko.observable('');
-        this.brick = ko.observable(null);
-        this.brickLoading = ko.observable(true);
+        this.currentScaleFactor = 1;
+        this.imageHeight = 0;
+        this.imageWidth = 0;
+        this.imageSrcOptions = { rateLimit: { timeout: 100, method: 'notifyWhenChangesStop' } };
         this.shouldSkipBrickLoading = false;
-        this.bricks = ko.computed(() => {
-            return this.getBricksFlatList(this.brick());
-        });
-        this.activeBricks = ko.computed(() => {
-            return this.bricks().filter((x) => x.active());
-        });
-        this.clickableBricks = ko.computed(() => {
-            return this.bricks().filter((x) => !!x.navigation);
-        });
-        this.active = ko.observable(false);
+        this.bricks = [];
+        this.clickableBricks = [];
         this.maxZoom = 0;
         this.disableResolutionReduction = false;
         this.shouldSendRequest = true;
         this._lastZoom = 0;
         this._selectedBrickPath = null;
+        this._resizeTimeout = null;
+        this._onResize = () => {
+            imageSrcMutableOptions.rateLimit.timeout = 500;
+            this._resizeTimeout && clearTimeout(this._resizeTimeout);
+            this._resizeTimeout = setTimeout(() => {
+                imageSrcMutableOptions.rateLimit.timeout = 100;
+            }, 500);
+        };
+        this._editingFieldsSubscriptionDispose = null;
         this.pageIndex = pageIndex;
-        this.documentId = preview._currentDocumentId || ko.observable(null);
-        this._disposables.push(this.imageSrc.subscribe((newVal) => {
+        this._onImageSrcChanged = () => {
             this.lastGetPageDeferred && this.lastGetPageDeferred.resolve(null);
             var currentGetPageDeferred = $.Deferred();
             this.lastGetPageDeferred = currentGetPageDeferred;
             currentGetPageDeferred
-                .done((response) => {
-                if (!response)
-                    return;
-                this.imageHeight(response.height);
-                this.imageWidth(response.width);
-                this.currentScaleFactor(this._currentScaleFactor);
-                this.displayImageSrc('data:image/png;base64,' + response.base64string);
-                this._onPageLoaded(response, processClick, preview._editingFields);
-            }).fail((_e) => {
-                this._onPageLoadFailed();
-            });
-            this.shouldSendRequest && this._requestPage(preview);
-        }));
-        var unifier = ko.isObservable(preview._unifier) ? preview._unifier : ko.observable(preview._unifier || generateGuid());
-        this.pageLoading = loading || ko.observable(true);
-        this.originalHeight(ko.unwrap(preview._pageHeight));
-        this.originalWidth(ko.unwrap(preview._pageWidth));
-        this.zoom = preview._zoom;
-        this.imageWidth(this.originalWidth() * this._getPixelRatio());
-        this.imageHeight(this.originalHeight() * this._getPixelRatio());
-        this._disposables.push(this.isClientVisible.subscribe((newVal) => {
-            if (newVal) {
-                this._setPageImgSrc(this.documentId(), unifier(), this.zoom());
+                .done((response) => this._onPageLoaded(response, processClick))
+                .fail((_e) => this._onPageLoadFailed());
+            this.shouldSendRequest && this._requestPage(reportPreview);
+        };
+        this._unifier = reportPreview._unifier || generateGuid();
+        this.originalSize = { height: reportPreview._pageHeight, width: reportPreview._pageWidth };
+        this.addDisposable(reportPreview.events.on('originalZoomChanged', (args) => {
+            this.zoom = args.newValue;
+        }), reportPreview.events.on('previewSizeChanged', (args) => {
+            this.previewSize = args.newValue;
+        }), reportPreview.events.on('autoFitByChanged', (args) => {
+            this.autoFitBy = args.newValue;
+        }), reportPreview.events.on('_unifierChanged', (args) => {
+            this._unifier = args.newValue;
+        }), reportPreview.events.on('pageLoadingChanged', (args) => {
+            if (subscribeToPageLoading) {
+                this.pageLoading = args.newValue;
             }
         }));
-        this.color = ko.isObservable(preview._pageBackColor) ? preview._pageBackColor.peek() : '';
-        this.width = ko.pureComputed(() => {
-            return this.imageWidth() * this.zoom() / this.currentScaleFactor() / this._getPixelRatio();
-        }).extend({ deferred: true });
-        this.height = ko.pureComputed(() => {
-            return this.imageHeight() * this.zoom() / this.currentScaleFactor() / this._getPixelRatio();
-        }).extend({ deferred: true });
-        this.isEmpty = pageIndex === -1 && !this.brick() && !processClick;
+        this.previewSize = reportPreview.previewSize;
+        this.autoFitBy = reportPreview.autoFitBy;
+        this.imageWidth = this.originalSize.width * this._getPixelRatio();
+        this.imageHeight = this.originalSize.height * this._getPixelRatio();
+        this.color = reportPreview._pageBackColor || '';
+        this.zoom = reportPreview.originalZoom;
+        this.isEmpty = pageIndex === -1 && !this.brick && !processClick;
         this.resetBrickRecusive = (brick) => {
-            if (brick && brick.active) {
-                brick.active(false);
+            if (brick && brick.active !== undefined) {
+                this.deactivateBrick(brick);
                 if (brick.bricks) {
                     brick.bricks.forEach((childBrick) => { this.resetBrickRecusive(childBrick); });
                 }
@@ -99,7 +95,7 @@ export class PreviewPage extends Disposable {
             if (PreviewSelection.started)
                 return;
             processClick && processClick(null);
-            var currentBrick = this.brick();
+            var currentBrick = this.brick;
             !ctrlKey && this.resetBrickRecusive(currentBrick);
             if (!path) {
                 return;
@@ -112,30 +108,56 @@ export class PreviewPage extends Disposable {
             pathElements.forEach((el) => {
                 currentBrick = currentBrick.bricks[parseInt(el)];
             });
-            currentBrick.active(true);
+            this.activateBrick(currentBrick);
         };
-        this._disposables.push(ko.computed(() => {
-            if (!this.active()) {
-                this.resetBrickRecusive(this.brick());
-                this._selectedBrickPath = null;
-            }
-        }));
-        this.editingFieldsKeyboardHelper = new PreviewEditingFieldsKeyboardHelper();
+        this.editingFieldsKeyboardHelper = new PreviewEditingFieldsKeyboardHelper(this);
         this._disposables.push(this.editingFieldsKeyboardHelper);
     }
-    _initializeEditingFields(editingFieldBricks, previewEditngFields, originalWidth, originalHeight) {
-        if (this.editingFields) {
-            var oldEditFields = ko.unwrap(this.editingFields());
-            if (oldEditFields && oldEditFields.length > 0) {
-                oldEditFields.forEach(field => field.dispose && field.dispose());
+    createViewModel() {
+        return createPreviewPageViewModel.call(this, super.createViewModel());
+    }
+    updateViewModel(args) {
+        updatePreviewPageViewModel.call(this, args);
+    }
+    onPropertyChanged(args) {
+        if (args.propertyName === 'zoom') {
+            this._updatePageSize();
+        }
+        if (args.propertyName === 'previewSize')
+            this._onResize();
+        if (args.propertyName === 'originalSize' || args.propertyName === 'autoFitBy' || args.propertyName === 'brickLoading' || args.propertyName === 'previewSize') {
+            this._onAutoFitChanged && this._onAutoFitChanged();
+        }
+        if (args.propertyName === 'active' || args.propertyName === 'brick') {
+            if (!this.active) {
+                this.resetBrickRecusive(this.brick);
+                this._selectedBrickPath = null;
+            }
+            this._onPageActiveChanged && this._onPageActiveChanged(this.active);
+        }
+        if (args.propertyName === 'brick') {
+            this.bricks = this.getBricksFlatList(this.brick);
+            this.clickableBricks = this.bricks.filter((x) => !!x.navigation);
+            this.updateActiveBricks();
+        }
+        if (args.propertyName === 'isClientVisible') {
+            if (args.newValue) {
+                this._setPageImgSrc(this.reportPreview.documentId, this._unifier, this.zoom);
             }
-            this.editingFields.dispose();
         }
-        this.editingFields = ko.pureComputed(() => {
-            if (!previewEditngFields || editingFieldBricks.length === 0) {
+        if (args.propertyName === 'imageSrc')
+            this._onImageSrcChanged();
+    }
+    _initializeEditingFields(editingFieldBricks, originalWidth, originalHeight) {
+        if (this._editingFieldsSubscriptionDispose) {
+            this.editingFields.forEach(field => field.dispose && field.dispose());
+            this._editingFieldsSubscriptionDispose();
+        }
+        const createEditingFields = () => {
+            var allEditingFields = this.reportPreview._editingFields;
+            if (!allEditingFields || editingFieldBricks.length === 0) {
                 return [];
             }
-            var allEditingFields = previewEditngFields();
             var pageFieldViewModels = [];
             for (var i = 0; i < editingFieldBricks.length; i++) {
                 var brick = editingFieldBricks[i];
@@ -143,34 +165,44 @@ export class PreviewPage extends Disposable {
                 if (!editingField)
                     return [];
                 editingField.brick = brick;
-                pageFieldViewModels.push(editingField.createViewModel(this.zoom, originalWidth, originalHeight, () => allEditingFields, brick.absoluteBounds));
+                pageFieldViewModels.push(editingField.createModel(this, originalWidth, originalHeight, () => allEditingFields, brick.absoluteBounds));
                 brick.text = (brick => (() => brickText(brick, () => allEditingFields)))(brick);
             }
             return pageFieldViewModels;
+        };
+        this.editingFields = createEditingFields();
+        this._editingFieldsSubscriptionDispose = this.reportPreview.events.on('_editingFieldsChanged', (args) => {
+            this.editingFields = createEditingFields();
         });
     }
     _getPixelRatio() {
         return window['devicePixelRatio'] || 1;
     }
-    _onPageLoaded(result, processClick, previewEditingFields) {
+    _onPageLoaded(result, processClick) {
+        if (!result)
+            return;
+        this.imageHeight = result.height;
+        this.imageWidth = result.width;
+        this.currentScaleFactor = this._currentScaleFactor;
+        this._updatePageSize();
+        this.displayImageSrc = 'data:image/png;base64,' + result.base64string;
         if (this._isDisposed)
             return;
-        this.pageLoading(false);
+        this.pageLoading = false;
         try {
             if (!result || !result.brick) {
                 return;
             }
             this.brickColumnWidthArray = result.columnWidthArray;
-            this.originalWidth(result.brick.width);
-            this.originalHeight(result.brick.height);
+            this.originalSize = { width: result.brick.width, height: result.brick.height };
             var editignFieldBricks = [];
-            this.initializeBrick(result.brick, processClick, this.zoom, editignFieldBricks);
-            this._initializeEditingFields(editignFieldBricks, previewEditingFields, result.brick.width, result.brick.height);
+            this.initializeBrick(result.brick, processClick, editignFieldBricks);
+            this._initializeEditingFields(editignFieldBricks, result.brick.width, result.brick.height);
             this._selectedBrickPath && this.selectBrick(this._selectedBrickPath);
         }
         finally {
             if (!this.shouldSkipBrickLoading) {
-                this.brickLoading(false);
+                this.brickLoading = false;
             }
             this.shouldSkipBrickLoading = false;
         }
@@ -178,22 +210,47 @@ export class PreviewPage extends Disposable {
     _onPageLoadFailed() {
         if (this._isDisposed)
             return;
-        if (this.isClientVisible()) {
-            this.pageLoading(false);
-            this.pageIndex !== -1 && this.brickLoading(false);
+        if (this.isClientVisible) {
+            this.pageLoading = false;
+            this.pageIndex !== -1 && (this.brickLoading = false);
+        }
+    }
+    _updatePageSize() {
+        const newSize = {
+            width: this.imageWidth * this.zoom / this.currentScaleFactor / this._getPixelRatio(),
+            height: this.imageHeight * this.zoom / this.currentScaleFactor / this._getPixelRatio()
+        };
+        if (!compareSizes(newSize, this.size)) {
+            this.size = newSize;
         }
     }
     updateSize(zoom) {
         var newResolution = getCurrentResolution(zoom);
-        this.realZoom(newResolution / previewDefaultResolution());
         return newResolution;
     }
+    updateActiveBricks() {
+        this.activeBricks = this.bricks.filter(x => x.active);
+    }
+    activateBrick(brick) {
+        if (brick.active)
+            return;
+        brick.active = true;
+        this.updateActiveBricks();
+    }
+    deactivateBrick(brick) {
+        if (!brick.active)
+            return;
+        brick.active = false;
+        this.updateActiveBricks();
+    }
     clearBricks() {
-        this.brickLoading(true);
+        this.brickLoading = true;
     }
     dispose() {
         super.dispose();
         this._isDisposed = true;
+        this._editingFieldsSubscriptionDispose && this._editingFieldsSubscriptionDispose();
+        this.reportPreview = null;
     }
     _setPageImgSrc(documentId, unifier, zoom, shouldSkipBricks) {
         if (!documentId || this.pageIndex === -1) {
@@ -206,26 +263,28 @@ export class PreviewPage extends Disposable {
             this._lastZoom = zoom;
         }
         else {
-            if (this.actualResolution && this.disableResolutionReduction && this.imageSrc())
+            if (this.actualResolution && this.disableResolutionReduction && this.imageSrc)
                 return;
         }
         var newResolution = this.updateSize(zoom);
-        if ((this.actualResolution === newResolution || newResolution < 9) && this.imageSrc()) {
+        if ((this.actualResolution === newResolution || newResolution < 9) && this.imageSrc) {
             return;
         }
         this.actualResolution = newResolution;
         this._currentScaleFactor = zoom;
         this.shouldSkipBrickLoading = shouldSkipBricks !== null && shouldSkipBricks !== void 0 ? shouldSkipBricks : false;
-        this.imageSrc(HandlerUri() +
+        this.imageSrc = HandlerUri() +
             '?actionKey=getPage&unifier=' + unifier +
-            '&arg=' + encodeURIComponent(JSON.stringify(this._getCurrentPageRequest(documentId, shouldSkipBricks))));
+            '&arg=' + encodeURIComponent(JSON.stringify(this._getCurrentPageRequest(documentId, shouldSkipBricks)));
     }
     _requestPage(preview) {
-        this.brickLoading(true);
-        var documentId = this.documentId.peek();
+        if (this.isDisposing)
+            return;
+        this.brickLoading = true;
+        var documentId = this.reportPreview.documentId;
         var currentGetPageDeferred = this.lastGetPageDeferred;
         var ignoreError = preview._closeDocumentRequests && (() => preview._closeDocumentRequests[documentId] || currentGetPageDeferred.state() != 'pending');
-        PreviewRequestWrapper.getPage(this.imageSrc(), ignoreError)
+        PreviewRequestWrapper.getPage(this.imageSrc, ignoreError)
             .done((response) => {
             currentGetPageDeferred.resolve(response);
         }).fail((_e) => {
@@ -237,26 +296,34 @@ export class PreviewPage extends Disposable {
             pageIndex: this.pageIndex,
             documentId: documentId,
             resolution: Math.floor(this.actualResolution * this._getPixelRatio()),
-            includeBricks: shouldSkipBricks ? false : this.brickLoading()
+            includeBricks: shouldSkipBricks ? false : this.brickLoading
+        };
+    }
+    _getPageSizeConfiguration() {
+        return {
+            width: this.originalSize.width,
+            height: this.originalSize.height,
+            autoFitBy: this.autoFitBy,
+            skipIfInvisible: false,
         };
     }
     _clear() {
         this.pageIndex = -1;
-        this.isClientVisible(false);
+        this.isClientVisible = false;
         this._setPageImgSrc(null, null, 1);
         this.actualResolution = 0;
     }
-    initializeBrick(brick, processClick, zoom, editingFieldBricks) {
-        initializeBrick(brick, processClick, this.zoom, editingFieldBricks);
+    initializeBrick(brick, processClick, editingFieldBricks) {
+        initializeBrick(brick, processClick, editingFieldBricks);
         updateBricksPosition(brick, brick.height, brick.width);
-        this.brick(brick);
+        this.brick = brick;
     }
-    clickToBrick(s, e) {
-        var target = $.fn.constructor(e.currentTarget);
+    _clickToBrick(e) {
+        var target = $dx(e.currentTarget);
         var offset = target.offset();
         var xPerc = (e.clientX - offset.left + window.scrollX) / target.width() * 100;
         var yPerc = (e.clientY - offset.top + window.scrollY) / target.height() * 100;
-        var bricks = s.bricks();
+        var bricks = this.bricks;
         for (var i = 0; i < bricks.length; i++) {
             if (parseFloat(bricks[i].topP) < yPerc && parseFloat(bricks[i].topP) + parseFloat(bricks[i].heightP) > yPerc
                 && parseFloat(bricks[i].leftP) < xPerc && parseFloat(bricks[i].leftP) + parseFloat(bricks[i].widthP) > xPerc) {
@@ -278,3 +345,48 @@ export class PreviewPage extends Disposable {
         return [];
     }
 }
+__decorate([
+    mutable(() => [])
+], PreviewPage.prototype, "editingFields", void 0);
+__decorate([
+    mutable(false)
+], PreviewPage.prototype, "isClientVisible", void 0);
+__decorate([
+    mutable(1)
+], PreviewPage.prototype, "zoom", void 0);
+__decorate([
+    mutable(0)
+], PreviewPage.prototype, "previewSize", void 0);
+__decorate([
+    mutable(ZoomAutoBy.WholePage)
+], PreviewPage.prototype, "autoFitBy", void 0);
+__decorate([
+    mutable(() => { return { with: 0, height: 0 }; }, { deferred: true })
+], PreviewPage.prototype, "size", void 0);
+__decorate([
+    mutable(() => { return { with: 0, height: 0 }; })
+], PreviewPage.prototype, "originalSize", void 0);
+__decorate([
+    mutable(() => '', imageSrcMutableOptions)
+], PreviewPage.prototype, "imageSrc", void 0);
+__decorate([
+    mutable(true)
+], PreviewPage.prototype, "pageLoading", void 0);
+__decorate([
+    mutable(true)
+], PreviewPage.prototype, "brickLoading", void 0);
+__decorate([
+    mutable(() => '')
+], PreviewPage.prototype, "displayImageSrc", void 0);
+__decorate([
+    mutable(false)
+], PreviewPage.prototype, "active", void 0);
+__decorate([
+    mutable(null)
+], PreviewPage.prototype, "brick", void 0);
+__decorate([
+    mutable('')
+], PreviewPage.prototype, "_unifier", void 0);
+__decorate([
+    mutableArray(() => [])
+], PreviewPage.prototype, "activeBricks", void 0);

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

@@ -0,0 +1,41 @@
+/**
+* DevExpress HTML/JS Reporting (viewer\internal\_page.viewModel.d.ts)
+* Version:  23.2.1-alpha-23254-1700
+* Build date: Sep 11, 2023
+* Copyright (c) 2012 - 2023 Developer Express Inc. ALL RIGHTS RESERVED
+* License: https://www.devexpress.com/Support/EULAs/universal.xml
+*/
+import { ArrayPropertyChangedEventArgs, IViewModel, PropertyChangedEventArgs } from '@devexpress/analytics-core/analytics-serializer-native';
+import { ReportPreview } from '../reportPreview';
+import { IBrickNode } from '../utils/utils';
+import { IAutoFitOptions } from './_bindings';
+import { PreviewPage } from './_page';
+import { PreviewEditingFieldsKeyboardHelper } from '../accessibility/_previewEditingFieldsKeyboardHelper';
+export interface IPreviewPageViewModel extends IViewModel {
+    pageLoading: boolean;
+    brickLoading: boolean;
+    displayImageSrc: string;
+    width: number;
+    height: number;
+    loadingText: string;
+    brickSelectionProg: {
+        page: PreviewPage;
+        preview: ReportPreview;
+        click: (pageIndex: number) => void;
+    };
+    autoFitOptions: IAutoFitOptions;
+    editingFields: any[];
+    delayedInit: () => void;
+    clickToBrick: (sender: IPreviewPageViewModel, event: any) => void;
+    currentPageAriaLabelImgAlt: () => string;
+    bricks: IBrickNode[];
+    activeBricks: IBrickNode[];
+    clickableBricks: IBrickNode[];
+    setPageActiveChangedEvent: (callback: (active: boolean) => void) => () => void;
+    isClientVisible: boolean;
+    color: string;
+    active: boolean;
+    editingFieldsKeyboardHelper: PreviewEditingFieldsKeyboardHelper;
+}
+export declare function createPreviewPageViewModel(this: PreviewPage, base: IPreviewPageViewModel): IPreviewPageViewModel;
+export declare function updatePreviewPageViewModel(this: PreviewPage, args: PropertyChangedEventArgs<PreviewPage> | ArrayPropertyChangedEventArgs<PreviewPage>): void;

package/viewer/internal/_page.viewModel.js

@@ -0,0 +1,96 @@
+/**
+* DevExpress HTML/JS Reporting (viewer\internal\_page.viewModel.js)
+* Version:  23.2.1-alpha-23254-1700
+* Build date: Sep 11, 2023
+* Copyright (c) 2012 - 2023 Developer Express Inc. ALL RIGHTS RESERVED
+* License: https://www.devexpress.com/Support/EULAs/universal.xml
+*/
+import { formatUnicorn } from '@devexpress/analytics-core/analytics-internal-native';
+import { createViewModelGenerator } from '@devexpress/analytics-core/analytics-serializer-native';
+import { getLocalization, } from '@devexpress/analytics-core/analytics-utils-native';
+export function createPreviewPageViewModel(base) {
+    return createViewModelGenerator(base)
+        .generateProperty('pageLoading', this.pageLoading)
+        .generateProperty('brickLoading', this.brickLoading)
+        .generateProperty('width', this.size.width)
+        .generateProperty('height', this.size.height)
+        .generateProperty('displayImageSrc', this.displayImageSrc)
+        .generateProperty('loadingText', getLocalization('Loading...', 'AnalyticsCoreStringId.Loading'))
+        .generateProperty('delayedInit', () => this.reportPreview.delayedInit())
+        .generateProperty('brickSelectionProg', {
+        page: this, preview: this.reportPreview,
+        click: (pageIndex) => this.reportPreview.goToPage(pageIndex)
+    })
+        .generateProperty('autoFitOptions', {
+        setZoom: (newValue) => {
+            if (this.isDisposing)
+                return;
+            this.reportPreview.originalZoom = newValue;
+        },
+        setAutoFitChangedEvent: (callback) => {
+            this._onAutoFitChanged = callback;
+            return () => this._onAutoFitChanged = undefined;
+        },
+        getPageSizeConfiguration: () => this._getPageSizeConfiguration()
+    })
+        .generateProperty('clickToBrick', (_, event) => this._clickToBrick(event))
+        .generateProperty('currentPageAriaLabelImgAlt', () => {
+        return formatUnicorn(getLocalization('Report Preview page {0} of {1}', 'ASPxReportsStringId.WebDocumentViewer_AriaLabelPreviewPage'), this.pageIndex + 1, this.reportPreview.pages.length);
+    })
+        .generateProperty('editingFields', this.editingFields)
+        .generateProperty('color', this.color)
+        .generateProperty('bricks', this.bricks)
+        .generateProperty('activeBricks', this.activeBricks)
+        .generateProperty('active', this.active)
+        .generateProperty('clickableBricks', this.clickableBricks)
+        .generateProperty('setPageActiveChangedEvent', (callback) => {
+        this._onPageActiveChanged = callback;
+        return () => {
+            this._onPageActiveChanged = undefined;
+        };
+    })
+        .generateProperty('editingFieldsKeyboardHelper', this.editingFieldsKeyboardHelper)
+        .getViewModel();
+}
+export function updatePreviewPageViewModel(args) {
+    const viewModel = this.getViewModel();
+    if (args.propertyName === 'displayImageSrc') {
+        viewModel.displayImageSrc = this.displayImageSrc;
+    }
+    else if (args.propertyName === 'pageLoading') {
+        viewModel.pageLoading = this.pageLoading;
+    }
+    else if (args.propertyName === 'brickLoading') {
+        viewModel.brickLoading = this.brickLoading;
+    }
+    else if (args.propertyName === 'isClientVisible') {
+        viewModel.isClientVisible = this.isClientVisible;
+    }
+    else if (args.propertyName === 'active') {
+        viewModel.active = this.active;
+    }
+    else if (args.propertyName === 'size') {
+        viewModel.width = args.newValue['width'];
+        viewModel.height = args.newValue['height'];
+    }
+    else if (args.propertyName === 'brick') {
+        viewModel.bricks = this.bricks;
+        viewModel.activeBricks = this.activeBricks;
+        viewModel.clickableBricks = this.clickableBricks;
+    }
+    else if (args.propertyName === 'activeBricks') {
+        if ('added' in args) {
+            const arrayArgs = args;
+            viewModel.activeBricks.push(...arrayArgs.added.map(x => x.item));
+            arrayArgs.removed.forEach((x) => {
+                viewModel.activeBricks.splice(viewModel.activeBricks.indexOf(x.item), 1);
+            });
+        }
+        else {
+            viewModel.activeBricks = this.activeBricks;
+        }
+    }
+    else if (args.propertyName === 'editingFields') {
+        viewModel.editingFields = this.editingFields.map(x => x.getViewModel());
+    }
+}

package/viewer/internal/_pageLoader.d.ts

@@ -1,10 +1,10 @@
-/**
-* DevExpress HTML/JS Reporting (viewer\internal\_pageLoader.d.ts)
-* Version:  23.2.1-build-23191-1448
-* Build date: Jul 10, 2023
-* Copyright (c) 2012 - 2023 Developer Express Inc. ALL RIGHTS RESERVED
-* License: https://www.devexpress.com/Support/EULAs/universal.xml
-*/
+/**
+* DevExpress HTML/JS Reporting (viewer\internal\_pageLoader.d.ts)
+* Version:  23.2.1-alpha-23254-1700
+* Build date: Sep 11, 2023
+* Copyright (c) 2012 - 2023 Developer Express Inc. ALL RIGHTS RESERVED
+* License: https://www.devexpress.com/Support/EULAs/universal.xml
+*/
 import { ReportPreview } from '../reportPreview';
 import { PreviewPage } from './_page';
 export declare class PageLoader {