devexpress-reporting 23.2.4-build-2419-1220 → 23.2.4

package/viewer/internal/_actions.js

@@ -1,7 +1,7 @@
 /**
 * DevExpress HTML/JS Reporting (viewer\internal\_actions.js)
-* Version:  23.2.4-build-2419-1220
-* Build date: Jan 19, 2024
+* Version:  23.2.4
+* Build date: Jan 29, 2024
 * Copyright (c) 2012 - 2024 Developer Express Inc. ALL RIGHTS RESERVED
 * License: https://www.devexpress.com/Support/EULAs/universal.xml
 */
@@ -14,8 +14,8 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
 import { ActionId, ZoomAutoBy } from '../constants';
 import { EditablePreviewEnabled } from '../settings';
 import { getLocalization, Disposable } from '@devexpress/analytics-core/analytics-utils-native';
-import { parseZoom, getParentContainer, ActionListsBase } from '@devexpress/analytics-core/analytics-internal-native';
-import { createViewModelGenerator, mutableArray } from '@devexpress/analytics-core/analytics-serializer-native';
+import { parseZoom, getParentContainer, ActionListsBase, BaseAction, koUtils } from '@devexpress/analytics-core/analytics-internal-native';
+import { createViewModelGenerator, mutable, mutableArray } from '@devexpress/analytics-core/analytics-serializer-native';
 export class PreviewDesignerActions extends Disposable {
     constructor(reportPreview, fullscreen) {
         super();
@@ -41,27 +41,7 @@ export class PreviewDesignerActions extends Disposable {
             ]
         };
         this.actions.push(designAction);
-        const getFullScreenImageTemplateName = (fullscreen) => fullscreen ? 'dxrd-svg-toolbar-fullscreen-exit' : 'dxrd-svg-toolbar-fullscreen';
-        this.actions.push({
-            id: ActionId.FullScreen,
-            text: getLocalization('Full Screen', 'ASPxReportsStringId.ToolBarItemText_FullScreen'),
-            imageClassName: 'dxrd-image-fullscreen',
-            imageTemplateName: getFullScreenImageTemplateName(fullscreen()),
-            setImageTemplateNameChangedEvent: (callback) => {
-                const handler = (newValue) => callback(getFullScreenImageTemplateName(newValue));
-                const dispose = fullscreen.subscribe(handler);
-                return () => dispose();
-            },
-            visible: !reportPreview.canSwitchToDesigner,
-            selected: fullscreen(),
-            setSelectedChangedEvent: (callback) => {
-                const dispose = fullscreen.subscribe(callback);
-                return () => dispose();
-            },
-            clickAction: () => {
-                fullscreen(!fullscreen());
-            }
-        });
+        this.actions.push(new FullScreenViewerAction(reportPreview, fullscreen));
     }
     dispose() {
         super.dispose();
@@ -84,87 +64,6 @@ export class ActionLists extends ActionListsBase {
         };
         this.globalActionProviders = globalActionProviders;
     }
-    _isPaginationAction(action) {
-        return 'pageItems' in action;
-    }
-    _isExportAction(action) {
-        return 'eventHandlers' in action;
-    }
-    createActionViewModel(action, index) {
-        const viewModel = super.createActionViewModel(action, index);
-        if ('zoom' in action) {
-            const selectBoxViewModel = createViewModelGenerator(viewModel)
-                .configureProperty('widget', (property) => {
-                property.inputAttr = {
-                    'aria-label': getLocalization('Zoom', 'ASPxReportsStringId.WebDocumentViewer_AriaLabelZoomCombobox')
-                };
-            })
-                .getViewModel();
-            return selectBoxViewModel;
-        }
-        if (this._isPaginationAction(action)) {
-            const selectBoxViewModel = createViewModelGenerator(viewModel)
-                .generateProperty('templateName', action.templateName)
-                .generateProperty('getPopupContainer', getParentContainer)
-                .generateProperty('widget', createViewModelGenerator()
-                .generateProperty('dataSource', action.pageItems)
-                .generateProperty('displayExpr', action.displayExpr)
-                .generateProperty('value', action.selectedItem)
-                .generateProperty('searchEnabled', true)
-                .generateProperty('opened', false)
-                .generateProperty('onValueChanged', (e) => {
-                action.selectItem(e.value);
-            })
-                .generateProperty('onKeyUp', (e) => {
-                if (e.event.which !== 13)
-                    return;
-                if (action._isPageChanged(e.component.option('text'))) {
-                    selectBoxViewModel.widget.opened = false;
-                }
-            })
-                .generateProperty('searchMode', action.searchMode)
-                .generateProperty('searchTimeout', action.searchTimeout)
-                .generateProperty('itemTemplate', action.itemTemplate)
-                .generateProperty('dropDownOptions', {
-                wrapperAttr: {
-                    'aria-label': getLocalization('Pager', 'ASPxReportsStringId.WebDocumentViewer_AriaLabelPagerCombobox'),
-                    'class': 'dx-page-selectbox-popup-wrapper'
-                }
-            })
-                .generateProperty('inputAttr', {
-                'aria-label': getLocalization('Pager', 'ASPxReportsStringId.WebDocumentViewer_AriaLabelPagerCombobox')
-            })
-                .getViewModel())
-                .getViewModel();
-            this.subscribe(action.pageItems, (pageItems) => selectBoxViewModel.widget.dataSource = pageItems, action.setPageItemsChangedEvent);
-            this.subscribe(action.selectedItem, (selectedItem) => selectBoxViewModel.widget.value = selectedItem, action.setSelectedItemChangedEvent);
-            return selectBoxViewModel;
-        }
-        else if (this._isExportAction(action)) {
-            const getItems = (items) => {
-                return items.map(x => ({
-                    imageClassName: x.imageClassName,
-                    imageTemplateName: x.imageTemplateName,
-                    text: getLocalization(x.text, x.textId),
-                    format: x.format,
-                    items: x.items && getItems(x.items) || undefined
-                }));
-            };
-            const exportActionViewModel = createViewModelGenerator(viewModel)
-                .generateProperty('widget', createViewModelGenerator()
-                .generateProperty('items', getItems(action.items))
-                .generateProperty('onItemRendered', (e) => action.eventHandlers.onItemRendered(e))
-                .generateProperty('onSubmenuHiding', (e) => action.eventHandlers.onSubmenuHiding(e))
-                .generateProperty('onSubmenuShown', (e) => action.eventHandlers.onSubmenuShown(e))
-                .generateProperty('onSubmenuShowing', (container, element) => action.eventHandlers.onSubmenuShowing(container, element))
-                .getViewModel())
-                .generateProperty('getPopupContainer', getParentContainer)
-                .getViewModel();
-            this.subscribe(action.items, (items) => exportActionViewModel.widget.items = getItems(items), action.setItemsChangedEvent);
-            return exportActionViewModel;
-        }
-        return viewModel;
-    }
     onPropertyChanged(args) {
         if (args.propertyName === 'globalActionProviders')
             this.updateToolbarItems();
@@ -187,394 +86,465 @@ export class PreviewActions extends Disposable {
     constructor(reportPreview) {
         super();
         this.actions = [];
-        const exportDisabledChangedCallbacks = [];
-        const visibilityChangedCallbacks = [];
-        const zoomChangedCallbacks = [];
-        const editingFieldsHighlightedChangedCallbacks = [];
-        const editingFieldsChangedCallbacks = [];
-        const showMultipagePreviewChangedCallbacks = [];
-        const pageIndexChangedCallbacks = [];
-        const pagesChangedCallbacks = [];
-        const pagesAndIndexChangedCallbacks = [];
-        this.addDisposable(reportPreview.events.on('zoomChanged', (args) => {
-            zoomChangedCallbacks.forEach(event => event(args.newValue));
-        }), reportPreview.events.on('editingFieldsHighlightedChanged', (args) => {
-            editingFieldsHighlightedChangedCallbacks.forEach(event => event(args.newValue));
-        }), reportPreview.events.on('showMultipagePreviewChanged', (args) => {
-            showMultipagePreviewChangedCallbacks.forEach(event => event(args.newValue));
-        }), reportPreview.events.on('pageIndexChanged', (args) => {
-            pageIndexChangedCallbacks.forEach(event => event(args.newValue));
-            pagesAndIndexChangedCallbacks.forEach(event => event(reportPreview.pages, reportPreview.pageIndex));
-        }), reportPreview.events.on('pagesChanged', (args) => {
-            pagesChangedCallbacks.forEach(event => event(reportPreview.pages));
-            pagesAndIndexChangedCallbacks.forEach(event => event(reportPreview.pages, reportPreview.pageIndex));
-        }), reportPreview.events.on('previewVisibleChanged', (args) => {
-            visibilityChangedCallbacks.forEach(event => event(args.newValue));
-        }), reportPreview.events.on('exportDisabledChanged', (args) => {
-            exportDisabledChangedCallbacks.forEach(event => event(args.newValue));
-        }), reportPreview.events.on('_editingFieldsChanged', (args) => {
-            editingFieldsChangedCallbacks.forEach(event => event(args.newValue));
-        }));
-        const goBackwardsDisabled = () => reportPreview.pageIndex < 1;
-        const setVisibleChangedEvent = (callback) => {
-            const handler = (visible) => callback(visible);
-            visibilityChangedCallbacks.push(handler);
-            return () => visibilityChangedCallbacks.splice(visibilityChangedCallbacks.indexOf(handler), 1);
-        };
-        this.actions.push({
-            id: ActionId.FirstPage,
-            text: getLocalization('First Page', 'ASPxReportsStringId.DocumentViewer_RibbonCommandText_FirstPage'),
-            imageClassName: 'dxrd-image-preview-first',
-            imageTemplateName: 'dxrd-svg-preview-first_page',
-            setDisabledChangedEvent: (callback) => {
-                const handler = () => callback(goBackwardsDisabled());
-                pageIndexChangedCallbacks.push(handler);
-                return () => pageIndexChangedCallbacks.splice(pageIndexChangedCallbacks.indexOf(handler), 1);
-            },
-            getDisabled: () => goBackwardsDisabled(),
-            getVisible: () => reportPreview.previewVisible,
-            setVisibleChangedEvent: setVisibleChangedEvent,
-            hotKey: { ctrlKey: true, keyCode: 37 },
-            clickAction: () => {
-                if (reportPreview.pageIndex > 0) {
-                    reportPreview.goToPage(0);
-                }
-            }
+        const actions = [
+            new FirstPageAction(reportPreview),
+            new PreviousPageAction(reportPreview),
+            new PaginationAction(reportPreview),
+            new NextPageAction(reportPreview),
+            new LastPageAction(reportPreview),
+            new MultipageModeAction(reportPreview),
+            new ZoomOutAction(reportPreview),
+            new ZoomAction(reportPreview),
+            new ZoomInAction(reportPreview),
+            new HighlightingAction(reportPreview),
+            new PrintAction(reportPreview),
+            new PrintPageAction(reportPreview),
+        ];
+        this.addDisposable(...actions);
+        this.actions.push(...actions);
+    }
+    wrapDisposable(object) {
+        this.addDisposable(object);
+        return object;
+    }
+    dispose() {
+        super.dispose();
+        this.removeProperties();
+    }
+    getActions(context) {
+        return this.actions;
+    }
+}
+export class ViewerAction extends BaseAction {
+    constructor(reportPreview, visibilityDependencies = [], disabilityDependencies = [], model) {
+        super(model);
+        this.reportPreview = reportPreview;
+        this.visible = this.isVisible();
+        this.disabled = this.isDisabled();
+        visibilityDependencies.forEach(dependency => {
+            this.addDisposable(this.reportPreview.events.on(`${dependency}Changed`, () => {
+                this.visible = this.isVisible();
+            }));
         });
-        this.actions.push({
-            id: ActionId.PrevPage,
-            text: getLocalization('Previous Page', 'ASPxReportsStringId.ToolBarItemText_PreviousPage'),
-            imageClassName: 'dxrd-image-preview-prev',
-            imageTemplateName: 'dxrd-svg-preview-previous_page',
-            setDisabledChangedEvent: (callback) => {
-                const handler = () => callback(goBackwardsDisabled());
-                pageIndexChangedCallbacks.push(handler);
-                return () => pageIndexChangedCallbacks.splice(pageIndexChangedCallbacks.indexOf(handler), 1);
-            },
-            getDisabled: () => goBackwardsDisabled(),
-            getVisible: () => reportPreview.previewVisible,
-            setVisibleChangedEvent: setVisibleChangedEvent,
-            hotKey: { ctrlKey: false, keyCode: 37 },
-            clickAction: () => {
-                if (reportPreview.pageIndex >= 1) {
-                    reportPreview.goToPage(reportPreview.pageIndex - 1, false, 500);
-                }
-            },
+        disabilityDependencies.forEach(dependency => {
+            this.addDisposable(this.reportPreview.events.on(`${dependency}Changed`, () => {
+                this.disabled = this.isDisabled();
+            }));
         });
-        const getPageItems = () => {
-            const pageCount = reportPreview.pages.length;
-            if (pageCount === 0 || reportPreview.pageIndex === -1) {
-                return [];
-            }
-            const pagesArray = new Array();
-            for (let i = 0; i < pageCount;) {
-                pagesArray.push({ index: i, text: ++i });
+    }
+}
+export class FullScreenActionBase extends BaseAction {
+    constructor(fullscreen, model) {
+        super(model);
+        this.fullscreen = fullscreen;
+        this.text = getLocalization('Full Screen', 'ASPxReportsStringId.ToolBarItemText_FullScreen');
+        this.imageClassName = 'dxrd-image-fullscreen';
+        this.imageTemplateName = this.getFullScreenImageTemplateName();
+        this.selected = koUtils.unwrap(this.fullscreen);
+        this.addDisposable(fullscreen === null || fullscreen === void 0 ? void 0 : fullscreen.subscribe(() => {
+            this.selected = this.fullscreen();
+            this.imageTemplateName = this.getFullScreenImageTemplateName();
+        }));
+        this.clickAction = () => {
+            fullscreen(!fullscreen());
+        };
+    }
+    getFullScreenImageTemplateName() { return koUtils.unwrap(this.fullscreen) ? 'dxrd-svg-toolbar-fullscreen-exit' : 'dxrd-svg-toolbar-fullscreen'; }
+}
+class FullScreenViewerAction extends FullScreenActionBase {
+    constructor(reportPreview, fullscreen) {
+        super(fullscreen);
+        this.id = ActionId.FullScreen;
+        this.visible = !reportPreview.canSwitchToDesigner;
+    }
+}
+class NavigationAction extends ViewerAction {
+    constructor(reportPreview) {
+        super(reportPreview, ['previewVisible'], ['pageIndex', 'pages']);
+    }
+    isVisible() {
+        return this.reportPreview.previewVisible;
+    }
+}
+class GoBackwardsAction extends NavigationAction {
+    isDisabled() {
+        return this.reportPreview.pageIndex < 1;
+    }
+}
+class FirstPageAction extends GoBackwardsAction {
+    constructor(reportPreview) {
+        super(reportPreview);
+        this.id = ActionId.FirstPage;
+        this.text = getLocalization('First Page', 'ASPxReportsStringId.DocumentViewer_RibbonCommandText_FirstPage');
+        this.imageClassName = 'dxrd-image-preview-first';
+        this.imageTemplateName = 'dxrd-svg-preview-first_page';
+        this.hotKey = { ctrlKey: true, keyCode: 37 };
+        this.clickAction = () => {
+            if (reportPreview.pageIndex > 0) {
+                reportPreview.goToPage(0);
             }
-            return {
-                store: pagesArray,
-                paginate: pageCount > 200,
-                pageSize: 100
-            };
         };
-        const getSelectedItem = () => {
-            if (reportPreview.pageIndex < 0) {
-                return null;
+    }
+}
+class PreviousPageAction extends GoBackwardsAction {
+    constructor(reportPreview) {
+        super(reportPreview);
+        this.id = ActionId.PrevPage;
+        this.text = getLocalization('Previous Page', 'ASPxReportsStringId.ToolBarItemText_PreviousPage');
+        this.imageClassName = 'dxrd-image-preview-prev';
+        this.imageTemplateName = 'dxrd-svg-preview-previous_page';
+        this.hotKey = { ctrlKey: false, keyCode: 37 };
+        this.clickAction = () => {
+            if (reportPreview.pageIndex >= 1) {
+                reportPreview.goToPage(reportPreview.pageIndex - 1, false, 500);
             }
-            const items = getPageItems();
-            return items && items.store && (items.store.length > reportPreview.pageIndex) && items.store[reportPreview.pageIndex];
         };
-        const previewHasNoPages = () => reportPreview.pages.length === 0 || reportPreview.pageIndex === -1;
-        const paginationSelectBoxViewModel = {
-            id: ActionId.Pagination,
-            text: 'Pagination',
-            setDisabledChangedEvent: (callback) => {
-                const handler = () => callback(previewHasNoPages());
-                pagesAndIndexChangedCallbacks.push(handler);
-                return () => pagesAndIndexChangedCallbacks.splice(pagesAndIndexChangedCallbacks.indexOf(handler), 1);
-            },
-            getDisabled: () => previewHasNoPages(),
-            getVisible: () => reportPreview.previewVisible,
-            setVisibleChangedEvent: setVisibleChangedEvent,
-            selectItem: (newValue) => {
-                if (!!newValue && (newValue.index || newValue.index === 0)) {
-                    reportPreview.goToPage(newValue.index);
-                }
-            },
-            selectedItem: getSelectedItem(),
-            setSelectedItemChangedEvent: (callback) => {
-                const handler = () => callback(getSelectedItem());
-                pagesAndIndexChangedCallbacks.push(handler);
-                return () => pagesAndIndexChangedCallbacks.splice(pagesAndIndexChangedCallbacks.indexOf(handler), 1);
-            },
-            pageItems: getPageItems(),
-            setPageItemsChangedEvent: (callback) => {
-                const handler = () => callback(getPageItems());
-                pagesChangedCallbacks.push(handler);
-                return () => pagesChangedCallbacks.splice(pagesChangedCallbacks.indexOf(handler), 1);
-            },
-            _isPageChanged: (value) => {
-                let val = parseInt && parseInt(value);
-                if (!!val && val-- > 0 && val < reportPreview.pages.length) {
-                    reportPreview.goToPage(val);
-                    return true;
-                }
-                return false;
-            },
-            displayExpr: function (value) {
-                if (reportPreview.pageIndex !== -1 && value && reportPreview.pageIndex !== value.index) {
-                    return value.text;
-                }
-                if (reportPreview.pageIndex === -1) {
-                    return getLocalization('0 pages', 'ASPxReportsStringId.WebDocumentViewer_0Pages');
-                }
-                else {
-                    const ofText = getLocalization('of', 'ASPxReportsStringId.ToolBarItemText_OfLabel');
-                    return (reportPreview.pageIndex + 1) + ' ' + ofText + ' ' + reportPreview.pages.length;
-                }
-            },
-            itemTemplate: function (value) { return value.text; },
-            searchMode: 'startswith',
-            searchTimeout: 10,
-            templateName: 'dxrd-preview-pager'
+    }
+}
+class PaginationAction extends NavigationAction {
+    constructor(reportPreview) {
+        super(reportPreview);
+        this.id = ActionId.Pagination;
+        this.text = 'Pagination';
+        this.selectedItem = this.getSelectedItem();
+        this.addDisposable(reportPreview.events.on('pageIndexChanged', (args) => {
+            this.selectedItem = this.getSelectedItem();
+        }));
+        this.pageItems = this.getPageItems();
+        this.addDisposable(reportPreview.events.on('pagesChanged', (args) => {
+            this.pageItems = this.getPageItems();
+            this.selectedItem = this.getSelectedItem();
+        }));
+        this._isPageChanged = (value) => {
+            let val = parseInt && parseInt(value);
+            if (!!val && val-- > 0 && val < reportPreview.pages.length) {
+                reportPreview.goToPage(val);
+                return true;
+            }
+            return false;
         };
-        const goForwardActionDisabled = () => reportPreview.pageIndex < 0 || reportPreview.pageIndex >= reportPreview.pages.length - 1;
-        this.actions.push(paginationSelectBoxViewModel);
-        this.actions.push({
-            id: ActionId.NextPage,
-            text: getLocalization('Next Page', 'ASPxReportsStringId.ToolBarItemText_NextPage'),
-            imageClassName: 'dxrd-image-preview-next',
-            imageTemplateName: 'dxrd-svg-preview-next_page',
-            setDisabledChangedEvent: (callback) => {
-                const handler = () => callback(goForwardActionDisabled());
-                pagesAndIndexChangedCallbacks.push(handler);
-                return () => pagesAndIndexChangedCallbacks.splice(pagesAndIndexChangedCallbacks.indexOf(handler), 1);
-            },
-            getDisabled: () => goForwardActionDisabled(),
-            getVisible: () => reportPreview.previewVisible,
-            setVisibleChangedEvent: setVisibleChangedEvent,
-            hotKey: { ctrlKey: false, keyCode: 39 },
-            clickAction: () => {
-                if (reportPreview.pageIndex < reportPreview.pages.length - 1) {
-                    reportPreview.goToPage(reportPreview.pageIndex + 1, false, 500);
-                }
+        this.displayExpr = function (value) {
+            if (reportPreview.pageIndex !== -1 && value && reportPreview.pageIndex !== value.index) {
+                return value.text;
             }
-        });
-        this.actions.push({
-            id: ActionId.LastPage,
-            text: getLocalization('Last Page', 'ASPxReportsStringId.DocumentViewer_RibbonCommandText_LastPage'),
-            imageClassName: 'dxrd-image-preview-last',
-            imageTemplateName: 'dxrd-svg-preview-last_page',
-            setDisabledChangedEvent: (callback) => {
-                const handler = () => callback(goForwardActionDisabled());
-                pagesAndIndexChangedCallbacks.push(handler);
-                return () => pagesAndIndexChangedCallbacks.splice(pagesAndIndexChangedCallbacks.indexOf(handler), 1);
-            },
-            getDisabled: () => goForwardActionDisabled(),
-            getVisible: () => reportPreview.previewVisible,
-            setVisibleChangedEvent: setVisibleChangedEvent,
-            hotKey: { ctrlKey: true, keyCode: 39 },
-            clickAction: () => {
-                if (reportPreview.pageIndex < reportPreview.pages.length - 1) {
-                    reportPreview.goToPage(reportPreview.pages.length - 1);
-                }
+            if (reportPreview.pageIndex === -1) {
+                return getLocalization('0 pages', 'ASPxReportsStringId.WebDocumentViewer_0Pages');
+            }
+            else {
+                const ofText = getLocalization('of', 'ASPxReportsStringId.ToolBarItemText_OfLabel');
+                return (reportPreview.pageIndex + 1) + ' ' + ofText + ' ' + reportPreview.pages.length;
             }
-        });
-        const getMultipageToggleImageClassName = (showMultipagePreview) => {
-            return showMultipagePreview ? 'dxrd-image-preview-single-page' : 'dxrd-image-preview-multipage';
-        };
-        const getMultipageToggleImageTemplateName = (showMultipagePreview) => {
-            return showMultipagePreview ? 'dxrd-svg-preview-single_page' : 'dxrd-svg-preview-multi_page_preview';
-        };
-        const multipageModeAction = {
-            id: ActionId.MultipageToggle,
-            text: getLocalization('Toggle Multipage Mode', 'ASPxReportsStringId.WebDocumentViewer_ToggleMultipageMode'),
-            imageClassName: getMultipageToggleImageClassName(reportPreview.showMultipagePreview),
-            imageTemplateName: getMultipageToggleImageTemplateName(reportPreview.showMultipagePreview),
-            getVisible: () => reportPreview.previewVisible,
-            setVisibleChangedEvent: setVisibleChangedEvent,
-            hotKey: { ctrlKey: true, keyCode: 77 },
-            clickAction: () => {
-                const zoom = reportPreview.originalZoom;
-                reportPreview.showMultipagePreview = !reportPreview.showMultipagePreview;
-                reportPreview.zoom = zoom;
-            },
-            setImageClassNameChangedEvent: (callback) => {
-                const handler = (newValue) => callback(getMultipageToggleImageClassName(newValue));
-                showMultipagePreviewChangedCallbacks.push(handler);
-                return () => showMultipagePreviewChangedCallbacks.splice(showMultipagePreviewChangedCallbacks.indexOf(handler), 1);
-            },
-            setImageTemplateNameChangedEvent: (callback) => {
-                const handler = (newValue) => callback(getMultipageToggleImageTemplateName(newValue));
-                showMultipagePreviewChangedCallbacks.push(handler);
-                return () => showMultipagePreviewChangedCallbacks.splice(showMultipagePreviewChangedCallbacks.indexOf(handler), 1);
-            },
-            hasSeparator: true
         };
-        this.actions.push(multipageModeAction);
-        this.actions.push({
-            id: ActionId.ZoomOut,
-            text: getLocalization('Zoom Out', 'DevExpress.XtraPrinting.PrintingSystemCommand.ZoomOut'),
-            imageClassName: 'dxrd-image-zoomout',
-            imageTemplateName: 'dxrd-svg-toolbar-zoomout',
-            visible: true,
-            hotKey: { ctrlKey: false, keyCode: 109 },
-            clickAction: () => {
-                const currentZoom = reportPreview.zoom;
-                const zoomLevel = currentZoom > 0 ? currentZoom : reportPreview.originalZoom;
-                reportPreview.zoom = Math.max(zoomLevel - reportPreview.zoomStep, 0.1);
-            },
-            hasSeparator: true
-        });
-        const getZoomLevels = (showMultipagePreview) => {
-            const items = reportPreview.predefinedZoomLevels.slice(0);
-            if (showMultipagePreview === false && items.indexOf(0) === -1) {
-                items.push(ZoomAutoBy.PageWidth);
-                items.push(ZoomAutoBy.WholePage);
+        this.itemTemplate = function (value) { return value.text; };
+        this.searchMode = 'startswith';
+        this.searchTimeout = 10;
+        this.templateName = 'dxrd-preview-pager';
+    }
+    updateViewModel(args) {
+        super.updateViewModel(args);
+        const selectBoxViewModel = this.getViewModel();
+        if (args.propertyName === 'pageItems')
+            selectBoxViewModel.widget.dataSource = args.newValue;
+        if (args.propertyName === 'selectedItem')
+            selectBoxViewModel.widget.value = args.newValue;
+    }
+    createViewModel(parent, index) {
+        const viewModel = super.createViewModel(parent, index);
+        const selectBoxViewModel = createViewModelGenerator(viewModel)
+            .generateProperty('templateName', this.templateName)
+            .generateProperty('getPopupContainer', getParentContainer)
+            .generateProperty('widget', createViewModelGenerator()
+            .generateProperty('dataSource', this.pageItems)
+            .generateProperty('displayExpr', this.displayExpr)
+            .generateProperty('value', this.selectedItem)
+            .generateProperty('searchEnabled', true)
+            .generateProperty('opened', false)
+            .generateProperty('onValueChanged', (e) => {
+            this.selectItem(e.value);
+        })
+            .generateProperty('onKeyUp', (e) => {
+            if (e.event.which !== 13)
+                return;
+            if (this._isPageChanged(e.component.option('text'))) {
+                selectBoxViewModel.widget.opened = false;
             }
-            return items;
+        })
+            .generateProperty('searchMode', this.searchMode)
+            .generateProperty('searchTimeout', this.searchTimeout)
+            .generateProperty('itemTemplate', this.itemTemplate)
+            .generateProperty('dropDownOptions', {
+            wrapperAttr: {
+                'aria-label': getLocalization('Pager', 'ASPxReportsStringId.WebDocumentViewer_AriaLabelPagerCombobox'),
+                'class': 'dx-page-selectbox-popup-wrapper'
+            }
+        })
+            .generateProperty('inputAttr', {
+            'aria-label': getLocalization('Pager', 'ASPxReportsStringId.WebDocumentViewer_AriaLabelPagerCombobox')
+        })
+            .getViewModel())
+            .getViewModel();
+        return selectBoxViewModel;
+    }
+    selectItem(newValue) {
+        if (!!newValue && (newValue.index || newValue.index === 0)) {
+            this.reportPreview.goToPage(newValue.index);
+        }
+    }
+    getPageItems() {
+        const pageCount = this.reportPreview.pages.length;
+        if (pageCount === 0 || this.reportPreview.pageIndex === -1) {
+            return [];
+        }
+        const pagesArray = new Array();
+        for (let i = 0; i < pageCount;) {
+            pagesArray.push({ index: i, text: ++i });
+        }
+        return {
+            store: pagesArray,
+            paginate: pageCount > 200,
+            pageSize: 100
         };
-        const zoomAction = {
-            id: ActionId.ZoomSelector,
-            visible: true,
-            hotKey: { ctrlKey: true, keyCode: 187 },
-            templateName: 'dxrd-zoom-autofit-select-template',
-            displayExpr: (val) => {
-                if (val === ZoomAutoBy.PageWidth) {
-                    return getLocalization('Page Width', 'DevExpress.XtraReports.UI.XtraReport.PageWidth');
-                }
-                else if (Math.round(val * 100) === 0) {
-                    return getLocalization('Whole Page', 'PreviewStringId.MenuItem_ZoomWholePage');
-                }
-                else {
-                    return Math.round((val || reportPreview.zoom) * 100) + '%';
-                }
-            },
-            onCustomItemCreating: (e) => { e.customItem = parseZoom(e.text); },
-            zoom: reportPreview.zoom,
-            zoomLevels: getZoomLevels(reportPreview.showMultipagePreview),
-            setZoomLevelsChangedEvent: (callback) => {
-                const handler = (newValue) => callback(getZoomLevels(newValue));
-                showMultipagePreviewChangedCallbacks.push(handler);
-                return () => showMultipagePreviewChangedCallbacks.splice(showMultipagePreviewChangedCallbacks.indexOf(handler), 1);
-            },
-            setZoom: (newValue) => {
-                reportPreview.zoom = newValue;
-            },
-            setZoomChangedEvent: (callback) => {
-                zoomChangedCallbacks.push(callback);
-                return () => zoomChangedCallbacks.splice(zoomChangedCallbacks.indexOf(callback), 1);
+    }
+    getSelectedItem() {
+        if (this.reportPreview.pageIndex < 0) {
+            return null;
+        }
+        const items = this.getPageItems();
+        return items && items.store && (items.store.length > this.reportPreview.pageIndex) && items.store[this.reportPreview.pageIndex];
+    }
+    isDisabled() {
+        return this.reportPreview.pages.length === 0 || this.reportPreview.pageIndex === -1;
+    }
+}
+__decorate([
+    mutable(() => null)
+], PaginationAction.prototype, "selectedItem", void 0);
+__decorate([
+    mutable(() => null)
+], PaginationAction.prototype, "pageItems", void 0);
+class GoForwardAction extends NavigationAction {
+    isDisabled() {
+        return this.reportPreview.pageIndex < 0 || this.reportPreview.pageIndex >= this.reportPreview.pages.length - 1;
+    }
+}
+class NextPageAction extends GoForwardAction {
+    constructor(reportPreview) {
+        super(reportPreview);
+        this.id = ActionId.NextPage;
+        this.text = getLocalization('Next Page', 'ASPxReportsStringId.ToolBarItemText_NextPage');
+        this.imageClassName = 'dxrd-image-preview-next';
+        this.imageTemplateName = 'dxrd-svg-preview-next_page';
+        this.hotKey = { ctrlKey: false, keyCode: 39 };
+        this.clickAction = () => {
+            if (reportPreview.pageIndex < reportPreview.pages.length - 1) {
+                reportPreview.goToPage(reportPreview.pageIndex + 1, false, 500);
             }
         };
-        this.actions.push(zoomAction);
-        this.actions.push({
-            id: ActionId.ZoomIn,
-            text: getLocalization('Zoom In', 'DevExpress.XtraPrinting.PrintingSystemCommand.ZoomIn'),
-            imageClassName: 'dxrd-image-zoomin',
-            imageTemplateName: 'dxrd-svg-toolbar-zoomin',
-            visible: true,
-            hotKey: { ctrlKey: false, keyCode: 107 },
-            clickAction: () => {
-                const currentZoom = reportPreview.zoom;
-                const zoomLevel = currentZoom > 0 ? currentZoom : reportPreview.originalZoom;
-                reportPreview.zoom = Math.min(zoomLevel + reportPreview.zoomStep, 10);
+    }
+}
+class LastPageAction extends GoForwardAction {
+    constructor(reportPreview) {
+        super(reportPreview);
+        this.id = ActionId.LastPage;
+        this.text = getLocalization('Last Page', 'ASPxReportsStringId.DocumentViewer_RibbonCommandText_LastPage');
+        this.imageClassName = 'dxrd-image-preview-last';
+        this.imageTemplateName = 'dxrd-svg-preview-last_page';
+        this.hotKey = { ctrlKey: true, keyCode: 39 };
+        this.clickAction = () => {
+            if (reportPreview.pageIndex < reportPreview.pages.length - 1) {
+                reportPreview.goToPage(reportPreview.pages.length - 1);
             }
-        });
-        const getHighlightEditingFieldsVisible = () => EditablePreviewEnabled() && reportPreview.previewVisible;
-        const getHighlightEditingFieldsDisabled = () => reportPreview.editingFieldsProvider().length < 1;
-        const highlightingAction = {
-            id: ActionId.HighlightEditingFields,
-            text: getLocalization('Highlight Editing Fields', 'DevExpress.XtraPrinting.PrintingSystemCommand.HighlightEditingFields'),
-            imageClassName: 'dxrp-image-hightlight-editing-fields',
-            imageTemplateName: 'dxrd-svg-toolbar-hightlightEditingFields',
-            setDisabledChangedEvent: (callback) => {
-                const handler = () => callback(getHighlightEditingFieldsDisabled());
-                editingFieldsChangedCallbacks.push(handler);
-                return () => editingFieldsChangedCallbacks.splice(editingFieldsChangedCallbacks.indexOf(handler), 1);
-            },
-            getDisabled: () => getHighlightEditingFieldsDisabled(),
-            getVisible: () => getHighlightEditingFieldsVisible(),
-            setVisibleChangedEvent: (callback) => {
-                const handler = () => callback(getHighlightEditingFieldsVisible());
-                visibilityChangedCallbacks.push(handler);
-                const subscriptionDispose = EditablePreviewEnabled.subscribe(handler);
-                return () => {
-                    subscriptionDispose();
-                    visibilityChangedCallbacks.splice(visibilityChangedCallbacks.indexOf(handler), 1);
-                };
-            },
-            selected: reportPreview.editingFieldsHighlighted,
-            setSelectedChangedEvent: (callback) => {
-                editingFieldsHighlightedChangedCallbacks.push(callback);
-                return () => editingFieldsHighlightedChangedCallbacks.splice(editingFieldsHighlightedChangedCallbacks.indexOf(callback), 1);
-            },
-            hotKey: { ctrlKey: true, keyCode: 72 },
-            clickAction: () => {
-                reportPreview.editingFieldsHighlighted = !reportPreview.editingFieldsHighlighted;
-            },
-            hasSeparator: true
         };
-        this.actions.push(highlightingAction);
-        this.addDisposable(reportPreview.events.on('propertyChanged', (e) => {
-            if (e.propertyName === 'showMultipagePreview') {
-                zoomAction.zoomLevels = getZoomLevels(reportPreview.showMultipagePreview);
-                multipageModeAction.imageClassName = getMultipageToggleImageClassName(reportPreview.showMultipagePreview);
-                multipageModeAction.imageTemplateName = getMultipageToggleImageTemplateName(reportPreview.showMultipagePreview);
+    }
+}
+class MultipageModeAction extends ViewerAction {
+    constructor(reportPreview) {
+        super(reportPreview, ['previewVisible']);
+        this.id = ActionId.MultipageToggle;
+        this.text = getLocalization('Toggle Multipage Mode', 'ASPxReportsStringId.WebDocumentViewer_ToggleMultipageMode');
+        this.imageClassName = this.getMultipageToggleImageClassName(reportPreview.showMultipagePreview);
+        this.imageTemplateName = this.getMultipageToggleImageTemplateName(reportPreview.showMultipagePreview);
+        this.hotKey = { ctrlKey: true, keyCode: 77 };
+        this.clickAction = () => {
+            const zoom = reportPreview.originalZoom;
+            reportPreview.showMultipagePreview = !reportPreview.showMultipagePreview;
+            reportPreview.zoom = zoom;
+        };
+        this.addDisposable(reportPreview.events.on('showMultipagePreviewChanged', (args) => {
+            this.imageClassName = this.getMultipageToggleImageClassName(reportPreview.showMultipagePreview);
+            this.imageTemplateName = this.getMultipageToggleImageTemplateName(reportPreview.showMultipagePreview);
+        }));
+        this.hasSeparator = true;
+    }
+    getMultipageToggleImageClassName(showMultipagePreview) {
+        return showMultipagePreview ? 'dxrd-image-preview-single-page' : 'dxrd-image-preview-multipage';
+    }
+    getMultipageToggleImageTemplateName(showMultipagePreview) {
+        return showMultipagePreview ? 'dxrd-svg-preview-single_page' : 'dxrd-svg-preview-multi_page_preview';
+    }
+    isVisible() {
+        return this.reportPreview.previewVisible;
+    }
+}
+class ZoomOutAction extends ViewerAction {
+    constructor(reportPreview) {
+        super(reportPreview);
+        this.id = ActionId.ZoomOut;
+        this.text = getLocalization('Zoom Out', 'DevExpress.XtraPrinting.PrintingSystemCommand.ZoomOut');
+        this.imageClassName = 'dxrd-image-zoomout';
+        this.imageTemplateName = 'dxrd-svg-toolbar-zoomout';
+        this.hotKey = { ctrlKey: false, keyCode: 109 };
+        this.clickAction = () => {
+            const currentZoom = reportPreview.zoom;
+            const zoomLevel = currentZoom > 0 ? currentZoom : reportPreview.originalZoom;
+            reportPreview.zoom = Math.max(zoomLevel - reportPreview.zoomStep, 0.1);
+        };
+        this.hasSeparator = true;
+    }
+}
+class ZoomAction extends ViewerAction {
+    constructor(reportPreview) {
+        super(reportPreview);
+        this.id = ActionId.ZoomSelector;
+        this.hotKey = { ctrlKey: true, keyCode: 187 };
+        this.templateName = 'dxrd-zoom-autofit-select-template';
+        this.displayExpr = (val) => {
+            if (val === ZoomAutoBy.PageWidth) {
+                return getLocalization('Page Width', 'DevExpress.XtraReports.UI.XtraReport.PageWidth');
             }
-            else if (e.propertyName === 'zoom') {
-                zoomAction.zoom = reportPreview.zoom;
+            else if (Math.round(val * 100) === 0) {
+                return getLocalization('Whole Page', 'PreviewStringId.MenuItem_ZoomWholePage');
             }
-            else if (e.propertyName === 'editingFieldsHighlighted') {
-                highlightingAction.selected = reportPreview.editingFieldsHighlighted;
+            else {
+                return Math.round((val || reportPreview.zoom) * 100) + '%';
             }
+        },
+            this.onCustomItemCreating = (e) => { e.customItem = parseZoom(e.text); };
+        this.zoom = reportPreview.zoom;
+        this.addDisposable(reportPreview.events.on('zoomChanged', (args) => {
+            this.zoom = reportPreview.zoom;
+        }));
+        this.zoomLevels = this.getZoomLevels();
+        this.addDisposable(reportPreview.events.on('showMultipagePreviewChanged', (args) => {
+            this.zoomLevels = this.getZoomLevels();
         }));
-        this.actions.push({
-            id: ActionId.Print,
-            text: getLocalization('Print', 'ASPxReportsStringId.DocumentViewer_RibbonPrintGroupText'),
-            imageClassName: 'dxrd-image-print',
-            imageTemplateName: 'dxrd-svg-preview-print',
-            hasSeparator: true,
-            getDisabled: () => reportPreview.exportDisabled,
-            setDisabledChangedEvent: (callback) => {
-                exportDisabledChangedCallbacks.push(callback);
-                return () => exportDisabledChangedCallbacks.splice(exportDisabledChangedCallbacks.indexOf(callback), 1);
-            },
-            visible: true,
-            hotKey: { ctrlKey: true, keyCode: 80 },
-            clickAction: () => {
-                if (reportPreview.exportDisabled) {
-                    return;
-                }
-                reportPreview.printDocument();
-            }
-        });
-        this.actions.push({
-            id: ActionId.PrintPage,
-            text: getLocalization('Print Page', 'ASPxReportsStringId.DocumentViewer_RibbonCommandText_PrintPage'),
-            imageClassName: 'dxrd-image-print-page',
-            imageTemplateName: 'dxrd-svg-preview-print_page',
-            getDisabled: () => reportPreview.exportDisabled,
-            setDisabledChangedEvent: (callback) => {
-                exportDisabledChangedCallbacks.push(callback);
-                return () => exportDisabledChangedCallbacks.splice(exportDisabledChangedCallbacks.indexOf(callback), 1);
-            },
-            visible: true,
-            clickAction: () => {
-                if (reportPreview.exportDisabled) {
-                    return;
-                }
-                reportPreview.printDocument(reportPreview.pageIndex);
-            }
-        });
     }
-    wrapDisposable(object) {
-        this.addDisposable(object);
-        return object;
+    onPropertyChanged(args) {
+        if (args.propertyName === 'zoom') {
+            this.reportPreview.zoom = this.zoom;
+        }
     }
-    dispose() {
-        super.dispose();
-        this.removeProperties();
+    createViewModel(parent, index) {
+        const viewModel = super.createViewModel(parent, index);
+        const selectBoxViewModel = createViewModelGenerator(viewModel)
+            .configureProperty('widget', (property) => {
+            property.inputAttr = {
+                'aria-label': getLocalization('Zoom', 'ASPxReportsStringId.WebDocumentViewer_AriaLabelZoomCombobox')
+            };
+        })
+            .getViewModel();
+        return selectBoxViewModel;
     }
-    getActions(context) {
-        return this.actions;
+    updateViewModel(args) {
+        super.updateViewModel(args);
+        const selectBoxViewModel = this.getViewModel();
+        if (args.propertyName === 'zoomLevels')
+            selectBoxViewModel.widget.dataSource = args.newValue;
+        if (args.propertyName === 'zoom')
+            selectBoxViewModel.widget.value = args.newValue;
+    }
+    getZoomLevels() {
+        const items = this.reportPreview.predefinedZoomLevels.slice(0);
+        if (this.reportPreview.showMultipagePreview === false && items.indexOf(0) === -1) {
+            items.push(ZoomAutoBy.PageWidth);
+            items.push(ZoomAutoBy.WholePage);
+        }
+        return items;
+    }
+}
+__decorate([
+    mutable(0)
+], ZoomAction.prototype, "zoom", void 0);
+__decorate([
+    mutable(() => [])
+], ZoomAction.prototype, "zoomLevels", void 0);
+class ZoomInAction extends ViewerAction {
+    constructor(reportPreview) {
+        super(reportPreview);
+        this.id = ActionId.ZoomIn;
+        this.text = getLocalization('Zoom In', 'DevExpress.XtraPrinting.PrintingSystemCommand.ZoomIn');
+        this.imageClassName = 'dxrd-image-zoomin';
+        this.imageTemplateName = 'dxrd-svg-toolbar-zoomin';
+        this.hotKey = { ctrlKey: false, keyCode: 107 };
+        this.clickAction = () => {
+            const currentZoom = reportPreview.zoom;
+            const zoomLevel = currentZoom > 0 ? currentZoom : reportPreview.originalZoom;
+            reportPreview.zoom = Math.min(zoomLevel + reportPreview.zoomStep, 10);
+        };
+    }
+}
+class HighlightingAction extends ViewerAction {
+    constructor(reportPreview) {
+        super(reportPreview, ['previewVisible'], ['_editingFields']);
+        this.id = ActionId.HighlightEditingFields;
+        this.text = getLocalization('Highlight Editing Fields', 'DevExpress.XtraPrinting.PrintingSystemCommand.HighlightEditingFields');
+        this.imageClassName = 'dxrp-image-hightlight-editing-fields';
+        this.imageTemplateName = 'dxrd-svg-toolbar-hightlightEditingFields';
+        EditablePreviewEnabled.subscribe(() => this.visible = this.isVisible());
+        this.selected = reportPreview.editingFieldsHighlighted;
+        this.addDisposable(reportPreview.events.on('editingFieldsHighlightedChanged', (args) => {
+            this.selected = args.newValue;
+        }));
+        this.hotKey = { ctrlKey: true, keyCode: 72 };
+        this.clickAction = () => {
+            reportPreview.editingFieldsHighlighted = !reportPreview.editingFieldsHighlighted;
+        },
+            this.hasSeparator = true;
+    }
+    isDisabled() {
+        return this.reportPreview.editingFieldsProvider().length < 1;
+    }
+    isVisible() {
+        return EditablePreviewEnabled() && this.reportPreview.previewVisible;
+    }
+}
+export class ExportActionBase extends ViewerAction {
+    constructor(reportPreview) {
+        super(reportPreview, undefined, ['exportDisabled']);
+    }
+    isDisabled() {
+        return this.reportPreview.exportDisabled;
+    }
+}
+class PrintAction extends ExportActionBase {
+    constructor(reportPreview) {
+        super(reportPreview);
+        this.id = ActionId.Print;
+        this.text = getLocalization('Print', 'ASPxReportsStringId.DocumentViewer_RibbonPrintGroupText');
+        this.imageClassName = 'dxrd-image-print';
+        this.imageTemplateName = 'dxrd-svg-preview-print';
+        this.hasSeparator = true;
+        this.hotKey = { ctrlKey: true, keyCode: 80 };
+        this.clickAction = () => {
+            if (reportPreview.exportDisabled) {
+                return;
+            }
+            reportPreview.printDocument();
+        };
+    }
+}
+class PrintPageAction extends ExportActionBase {
+    constructor(reportPreview) {
+        super(reportPreview);
+        this.id = ActionId.PrintPage;
+        this.text = getLocalization('Print Page', 'ASPxReportsStringId.DocumentViewer_RibbonCommandText_PrintPage');
+        this.imageClassName = 'dxrd-image-print-page';
+        this.imageTemplateName = 'dxrd-svg-preview-print_page';
+        this.clickAction = () => {
+            if (reportPreview.exportDisabled) {
+                return;
+            }
+            reportPreview.printDocument(reportPreview.pageIndex);
+        };
     }
 }