@nexterajs/report-viewer 0.0.1 → 0.1.0

package/fesm2022/nexterajs-report-viewer.mjs

@@ -1,6 +1,6 @@
 import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
 import * as i0 from '@angular/core';
-import { input, inject, DOCUMENT, ElementRef, ChangeDetectionStrategy, Component, Injectable, signal, computed, DestroyRef, output } from '@angular/core';
+import { input, computed, inject, DOCUMENT, ElementRef, ChangeDetectionStrategy, Component, Injectable, signal, DestroyRef, output, viewChild, linkedSignal } from '@angular/core';
 import { HttpErrorResponse, HttpClient } from '@angular/common/http';
 import { defer, map, catchError, from, switchMap, throwError, timeout, Subject, Subscription, finalize, interval, exhaustMap, EMPTY } from 'rxjs';
 
@@ -8,7 +8,7 @@ import { defer, map, catchError, from, switchMap, throwError, timeout, Subject,
  * The version of the viewer protocol this package speaks: the `protocol` member of every
  * `AngularViewerData` answer from `Nextera.Report.AspNetCore`.
  */
-const NXR_VIEWER_PROTOCOL = 1;
+const NXE_VIEWER_PROTOCOL = 1;
 
 /**
  * Page HTML from the server, made safe to place in the application's document.
@@ -137,8 +137,19 @@ function adoptedSheet(cssText) {
     return sheet;
 }
 
-/** The viewer draws each page's frame and the space between pages, so the page CSS's own are cancelled. */
-const PAGE_FRAME_CSS = '.nextera-page{margin:0;box-shadow:none;}';
+/**
+ * The viewer draws each page's frame and the space between pages, so the page CSS's own are cancelled.
+ *
+ * Zoom scales the page's own box from its top left corner. Stimulsoft re-renders the page on the server
+ * at the asked-for zoom and never scales on the client; this engine's page HTML is absolutely positioned
+ * in points, so scaling it here puts the same marks in the same places without a round trip, and the text
+ * is re-rasterised at the new size rather than resampled. The host element is sized to the scaled box so
+ * the pages around it lay out against what is on screen.
+ */
+function pageFrameCss(zoom) {
+    const transform = zoom === 1 ? '' : `transform:scale(${zoom});transform-origin:top left;`;
+    return `.nextera-page{margin:0;box-shadow:none;${transform}}`;
+}
 /**
  * One report page, in its own shadow root.
  *
@@ -147,7 +158,7 @@ const PAGE_FRAME_CSS = '.nextera-page{margin:0;box-shadow:none;}';
  * report's styles and the application's never meet. `contain: paint` keeps even a fixed-position
  * element inside the page's box.
  */
-class NxrReportPageComponent {
+class NxeReportPageComponent {
     /** The page's number and size. */
     page = input.required(/* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "page" }] : /* istanbul ignore next */ []));
@@ -157,13 +168,20 @@ class NxrReportPageComponent {
     /** The stylesheet every page of the report needs. */
     css = input.required(/* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "css" }] : /* istanbul ignore next */ []));
+    /** The zoom to draw the page at, as a factor: 1 is 100 %. */
+    zoom = input(1, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "zoom" }] : /* istanbul ignore next */ []));
+    scaledWidth = computed(() => this.page().widthPoints * this.zoom(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "scaledWidth" }] : /* istanbul ignore next */ []));
+    scaledHeight = computed(() => this.page().heightPoints * this.zoom(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "scaledHeight" }] : /* istanbul ignore next */ []));
     document = inject(DOCUMENT);
     root = inject(ElementRef).nativeElement.attachShadow({
         mode: 'open',
     });
     ngOnChanges(changes) {
-        if (changes['css']) {
-            this.root.adoptedStyleSheets = [adoptedSheet(this.css()), adoptedSheet(PAGE_FRAME_CSS)];
+        if (changes['css'] || changes['zoom']) {
+            this.root.adoptedStyleSheets = [adoptedSheet(this.css()), adoptedSheet(pageFrameCss(this.zoom()))];
         }
         if (changes['html']) {
             const html = this.html();
@@ -175,26 +193,26 @@ class NxrReportPageComponent {
             }
         }
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.5", ngImport: i0, type: NxrReportPageComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.1.5", type: NxrReportPageComponent, isStandalone: true, selector: "nxr-report-page", inputs: { page: { classPropertyName: "page", publicName: "page", isSignal: true, isRequired: true, transformFunction: null }, html: { classPropertyName: "html", publicName: "html", isSignal: true, isRequired: false, transformFunction: null }, css: { classPropertyName: "css", publicName: "css", isSignal: true, isRequired: true, transformFunction: null } }, host: { properties: { "attr.data-page": "page().pageNumber", "style.width.pt": "page().widthPoints", "style.height.pt": "page().heightPoints" }, classAttribute: "nxr-report-page" }, usesOnChanges: true, ngImport: i0, template: '', isInline: true, styles: [":host{display:block;position:relative;box-sizing:content-box;contain:paint;background:#fff}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.5", ngImport: i0, type: NxeReportPageComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.1.5", type: NxeReportPageComponent, isStandalone: true, selector: "nxe-report-page", inputs: { page: { classPropertyName: "page", publicName: "page", isSignal: true, isRequired: true, transformFunction: null }, html: { classPropertyName: "html", publicName: "html", isSignal: true, isRequired: false, transformFunction: null }, css: { classPropertyName: "css", publicName: "css", isSignal: true, isRequired: true, transformFunction: null }, zoom: { classPropertyName: "zoom", publicName: "zoom", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "attr.data-page": "page().pageNumber", "style.width.pt": "scaledWidth()", "style.height.pt": "scaledHeight()" }, classAttribute: "nxe-report-page" }, usesOnChanges: true, ngImport: i0, template: '', isInline: true, styles: [":host{display:block;position:relative;box-sizing:content-box;contain:paint;background:#fff}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.5", ngImport: i0, type: NxrReportPageComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.5", ngImport: i0, type: NxeReportPageComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'nxr-report-page', standalone: true, template: '', changeDetection: ChangeDetectionStrategy.OnPush, host: {
-                        class: 'nxr-report-page',
+            args: [{ selector: 'nxe-report-page', standalone: true, template: '', changeDetection: ChangeDetectionStrategy.OnPush, host: {
+                        class: 'nxe-report-page',
                         '[attr.data-page]': 'page().pageNumber',
-                        '[style.width.pt]': 'page().widthPoints',
-                        '[style.height.pt]': 'page().heightPoints',
+                        '[style.width.pt]': 'scaledWidth()',
+                        '[style.height.pt]': 'scaledHeight()',
                     }, styles: [":host{display:block;position:relative;box-sizing:content-box;contain:paint;background:#fff}\n"] }]
-        }], propDecorators: { page: [{ type: i0.Input, args: [{ isSignal: true, alias: "page", required: true }] }], html: [{ type: i0.Input, args: [{ isSignal: true, alias: "html", required: false }] }], css: [{ type: i0.Input, args: [{ isSignal: true, alias: "css", required: true }] }] } });
+        }], propDecorators: { page: [{ type: i0.Input, args: [{ isSignal: true, alias: "page", required: true }] }], html: [{ type: i0.Input, args: [{ isSignal: true, alias: "html", required: false }] }], css: [{ type: i0.Input, args: [{ isSignal: true, alias: "css", required: true }] }], zoom: [{ type: i0.Input, args: [{ isSignal: true, alias: "zoom", required: false }] }] } });
 
 /**
  * Every caption and message the viewer shows, in its built-in English. A key in PascalCase is the name
  * Stimulsoft's viewer gives the same text, such as `PageOf`; a key in camelCase names a message only this
  * viewer has. The English is this package's own. A later plan lets a host's translation file replace any
- * of them, so code reads them from an `NxrViewerStrings` value wherever one is at hand.
+ * of them, so code reads them from an `NxeViewerStrings` value wherever one is at hand.
  */
-const NXR_ENGLISH = {
+const NXE_ENGLISH = {
     /** The label before the page-number box. */
     Page: 'Page',
     /** The label between the page-number box and the page count. */
@@ -203,6 +221,18 @@ const NXR_ENGLISH = {
     PrevPage: 'Previous page',
     NextPage: 'Next page',
     LastPage: 'Last page',
+    /** The save button's caption and tooltip; its menu items are captioned by the format they write. */
+    Save: 'Save',
+    SaveToolTip: 'Save',
+    /** The view-mode button's tooltip, and its menu items, whose captions are the mode names. */
+    ViewModeToolTip: 'View mode',
+    SinglePage: 'Single Page',
+    Continuous: 'Continuous',
+    MultiplePages: 'Multiple Pages',
+    /** The zoom button's tooltip; its caption is the current percentage, so it has no key. */
+    ZoomToolTip: 'Zoom',
+    ZoomOnePage: 'One Page',
+    ZoomPageWidth: 'Page Width',
     errorUnreachable: 'The report server could not be reached.',
     errorStatus: 'The report server answered with HTTP status {0}.',
     errorTimeout: 'The report server did not answer within {0} seconds.',
@@ -218,25 +248,25 @@ function formatString(template, ...values) {
  * A success answer that is not what the protocol says its action answers: the wrong shape, or an
  * AngularViewerData answer from another version of the protocol.
  */
-class NxrMalformedAnswerError extends Error {
+class NxeMalformedAnswerError extends Error {
     action;
     protocol;
     constructor(action, 
     /** The version an AngularViewerData answer declared, when it declared another one. */
-    protocol = NXR_VIEWER_PROTOCOL) {
-        super(`The ${action} answer is not what viewer protocol ${NXR_VIEWER_PROTOCOL} answers.`);
+    protocol = NXE_VIEWER_PROTOCOL) {
+        super(`The ${action} answer is not what viewer protocol ${NXE_VIEWER_PROTOCOL} answers.`);
         this.action = action;
         this.protocol = protocol;
-        this.name = 'NxrMalformedAnswerError';
+        this.name = 'NxeMalformedAnswerError';
     }
 }
 /** A request that got no answer within the server options' `requestTimeout`. */
-class NxrTimeoutError extends Error {
+class NxeTimeoutError extends Error {
     seconds;
     constructor(seconds) {
         super(`No answer within ${seconds} seconds.`);
         this.seconds = seconds;
-        this.name = 'NxrTimeoutError';
+        this.name = 'NxeTimeoutError';
     }
 }
 const OPTION_GROUPS = ['actions', 'appearance', 'toolbar', 'exports', 'server'];
@@ -279,25 +309,25 @@ function isLocated(value, textKey) {
 /** Reads the answer to AngularViewerData: the token, the viewer options and the host's translation. */
 function readViewerData(body) {
     if (!isObject(body))
-        throw new NxrMalformedAnswerError('AngularViewerData');
+        throw new NxeMalformedAnswerError('AngularViewerData');
     const { protocol, token, options, localization } = body;
-    if (isNumber(protocol) && protocol !== NXR_VIEWER_PROTOCOL) {
-        throw new NxrMalformedAnswerError('AngularViewerData', protocol);
+    if (isNumber(protocol) && protocol !== NXE_VIEWER_PROTOCOL) {
+        throw new NxeMalformedAnswerError('AngularViewerData', protocol);
     }
-    const valid = protocol === NXR_VIEWER_PROTOCOL &&
+    const valid = protocol === NXE_VIEWER_PROTOCOL &&
         typeof token === 'string' &&
         token !== '' &&
         isObject(options) &&
         OPTION_GROUPS.every((group) => isObject(options[group])) &&
         (localization === null || isObject(localization));
     if (!valid)
-        throw new NxrMalformedAnswerError('AngularViewerData');
+        throw new NxeMalformedAnswerError('AngularViewerData');
     return body;
 }
 /** Reads the answer to GetReport: the report's name, page count, page sizes, bookmarks and page stylesheet. */
 function readReport(body) {
     if (!isObject(body))
-        throw new NxrMalformedAnswerError('GetReport');
+        throw new NxeMalformedAnswerError('GetReport');
     const { reportName, pageCount, pages, bookmarks, pageCss, pagesHtml } = body;
     const valid = typeof reportName === 'string' &&
         isIndex(pageCount) &&
@@ -309,7 +339,7 @@ function readReport(body) {
         typeof pageCss === 'string' &&
         (pagesHtml === undefined || isPages(pagesHtml));
     if (!valid)
-        throw new NxrMalformedAnswerError('GetReport');
+        throw new NxeMalformedAnswerError('GetReport');
     return {
         ...body,
         pagesHtml: pagesHtml ?? null,
@@ -318,20 +348,20 @@ function readReport(body) {
 /** Reads the answer to GetPages. */
 function readPages(body) {
     if (!isPages(body))
-        throw new NxrMalformedAnswerError('GetPages');
+        throw new NxeMalformedAnswerError('GetPages');
     return body;
 }
 /** Reads the answer to Find. */
 function readFind(body) {
     const hits = isObject(body) ? body['hits'] : undefined;
     if (!Array.isArray(hits) || !hits.every((hit) => isLocated(hit, 'text')))
-        throw new NxrMalformedAnswerError('Find');
+        throw new NxeMalformedAnswerError('Find');
     return body;
 }
 /** Reads the answer to UpdateCache. */
 function readUpdateCache(body) {
     if (!isObject(body) || typeof body['updated'] !== 'boolean')
-        throw new NxrMalformedAnswerError('UpdateCache');
+        throw new NxeMalformedAnswerError('UpdateCache');
     return body;
 }
 function described(status, message) {
@@ -345,21 +375,21 @@ function described(status, message) {
  * - a timeout;
  * - a success answer the viewer cannot read.
  */
-function readFailure(failure, action, strings = NXR_ENGLISH) {
+function readFailure(failure, action, strings = NXE_ENGLISH) {
     if (failure instanceof HttpErrorResponse) {
         const body = failure.error;
-        if (isObject(body) &&
-            body['status'] === 'error' &&
-            typeof body['type'] === 'string' &&
-            typeof body['message'] === 'string' &&
-            typeof body['retryable'] === 'boolean') {
-            const traceId = typeof body['traceId'] === 'string' ? body['traceId'] : null;
+        // status and message are all that is asked for. The rest of the protocol's error answer is taken when the server
+        // sent it and defaulted when it did not, because a host that writes its own error -- bright answers a failed
+        // GetReport with {status, message} from its controller's catch -- says the one thing the reader cannot work out
+        // for itself, and demanding type and retryable alongside it threw that sentence away and left the viewer showing
+        // the status code on its own.
+        if (isObject(body) && body['status'] === 'error' && typeof body['message'] === 'string') {
             return {
                 status: failure.status,
-                type: body['type'],
+                type: typeof body['type'] === 'string' ? body['type'] : 'Error',
                 message: body['message'],
-                retryable: body['retryable'],
-                traceId,
+                retryable: typeof body['retryable'] === 'boolean' ? body['retryable'] : false,
+                traceId: typeof body['traceId'] === 'string' ? body['traceId'] : null,
             };
         }
         if (failure.status === 0)
@@ -368,12 +398,12 @@ function readFailure(failure, action, strings = NXR_ENGLISH) {
             return described(0, formatString(strings.errorMalformed, action));
         return described(failure.status, formatString(strings.errorStatus, failure.status));
     }
-    if (failure instanceof NxrTimeoutError) {
+    if (failure instanceof NxeTimeoutError) {
         return described(0, formatString(strings.errorTimeout, failure.seconds));
     }
-    if (failure instanceof NxrMalformedAnswerError) {
-        return failure.protocol !== NXR_VIEWER_PROTOCOL
-            ? described(0, formatString(strings.errorProtocol, failure.protocol, NXR_VIEWER_PROTOCOL))
+    if (failure instanceof NxeMalformedAnswerError) {
+        return failure.protocol !== NXE_VIEWER_PROTOCOL
+            ? described(0, formatString(strings.errorProtocol, failure.protocol, NXE_VIEWER_PROTOCOL))
             : described(0, formatString(strings.errorMalformed, failure.action));
     }
     return described(0, failure instanceof Error ? failure.message : String(failure));
@@ -383,7 +413,7 @@ function readFailure(failure, action, strings = NXR_ENGLISH) {
  * The seconds a request may take when no positive `requestTimeout` applies. That includes the first
  * request, which is sent before the server's options are known. Stimulsoft's viewer uses the same value.
  */
-const NXR_UNSET_REQUEST_TIMEOUT_SECONDS = 1000;
+const NXE_UNSET_REQUEST_TIMEOUT_SECONDS = 1000;
 /**
  * The URL of a host action. The action's path takes the place of `{action}` in `requestUrl`, and a query
  * string on the action is appended to the URL's own.
@@ -429,7 +459,7 @@ function fileNameOf(disposition) {
 }
 function timeoutOf(session) {
     const seconds = session?.options.server.requestTimeout ?? 0;
-    return seconds > 0 ? seconds : NXR_UNSET_REQUEST_TIMEOUT_SECONDS;
+    return seconds > 0 ? seconds : NXE_UNSET_REQUEST_TIMEOUT_SECONDS;
 }
 function formOf(context, action, session, parameters) {
     const form = new FormData();
@@ -473,10 +503,10 @@ async function readableFailure(failure) {
 }
 /**
  * Sends one viewer's protocol requests through the application's `HttpClient`, so the application's
- * interceptors apply, and reads each answer. Every observable fails with an `NxrViewerFailure`. A request's
+ * interceptors apply, and reads each answer. Every observable fails with an `NxeViewerFailure`. A request's
  * form is built when the observable is subscribed.
  */
-class NxrViewerClientService {
+class NxeViewerClientService {
     http = inject(HttpClient);
     /** AngularViewerData, sent to the component's `action`: the token and the options. */
     openViewer(context, action) {
@@ -516,30 +546,46 @@ class NxrViewerClientService {
         const seconds = timeoutOf(session);
         return defer(() => this.http.post(actionUrl(context.requestUrl, hostAction), formOf(context, action, session, parameters))).pipe(timeout({
             first: seconds * 1000,
-            with: () => throwError(() => new NxrTimeoutError(seconds)),
+            with: () => throwError(() => new NxeTimeoutError(seconds)),
         }), map((body) => read(body)), catchError((failure) => throwError(() => readFailure(failure, action, context.strings))));
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.5", ngImport: i0, type: NxrViewerClientService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.1.5", ngImport: i0, type: NxrViewerClientService });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.5", ngImport: i0, type: NxeViewerClientService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.1.5", ngImport: i0, type: NxeViewerClientService });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.5", ngImport: i0, type: NxrViewerClientService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.5", ngImport: i0, type: NxeViewerClientService, decorators: [{
             type: Injectable
         }] });
 
 /** How often an open viewer asks the server to keep its report: every 3 minutes, as Stimulsoft's viewer does. */
-const NXR_KEEP_ALIVE_MS = 180_000;
+const NXE_KEEP_ALIVE_MS = 180_000;
 function withPages(pages, answer) {
     answer?.pages.forEach((html, offset) => pages.set(answer.startIndex + offset, html));
     return pages;
 }
+/**
+ * Hands a file to the browser to save, under the name the server gave it. A blob URL is used rather
+ * than a data one because an exported report is far larger than a URL may be, and it is revoked on
+ * the next turn of the event loop, once the click has been taken.
+ */
+function saveBlob(blob, fileName) {
+    const url = URL.createObjectURL(blob);
+    const link = document.createElement('a');
+    link.href = url;
+    link.download = fileName;
+    link.style.display = 'none';
+    document.body.append(link);
+    link.click();
+    link.remove();
+    setTimeout(() => URL.revokeObjectURL(url), 0);
+}
 /**
  * One viewer's conversation with the report server, and the state the viewer shows.
  *
  * Every signal changes only in this service's methods and in the answers they handle; nothing reacts to
  * a signal changing. Each viewer provides its own session, so viewers on one page never share state.
  */
-class NxrViewerSessionService {
-    client = inject(NxrViewerClientService);
+class NxeViewerSessionService {
+    client = inject(NxeViewerClientService);
     optionsState = signal(null, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "optionsState" }] : /* istanbul ignore next */ []));
     reportState = signal(null, /* @ts-ignore */
@@ -575,6 +621,19 @@ class NxrViewerSessionService {
         return { index, size: report.pages[index], html: this.htmlState().get(index) ?? null };
     }, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "shownPage" }] : /* istanbul ignore next */ []));
+    /**
+     * Every page of the report, in order, each with its HTML when it has arrived. The page modes that show
+     * more than one page at a time lay these out and ask for the ones that come into view; a page holds its
+     * size, and so its place, before its HTML is here.
+     */
+    allPages = computed(() => {
+        const report = this.reportState();
+        if (!report)
+            return [];
+        const html = this.htmlState();
+        return report.pages.map((size, index) => ({ index, size, html: html.get(index) ?? null }));
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "allPages" }] : /* istanbul ignore next */ []));
     /** Emits after each successful GetReport answer. */
     reportLoaded = new Subject();
     /** Emits each failure put on show. */
@@ -629,6 +688,34 @@ class NxrViewerSessionService {
         this.pageIndexState.set(index);
         this.loadPage(index);
     }
+    /**
+     * Asks for a page's HTML without moving the page on screen, for the modes that show several pages at
+     * once and fetch the ones that come into view. A page already here, or already on its way, is left alone.
+     */
+    requestPage(index) {
+        if (this.destroyed || !Number.isInteger(index) || index < 0)
+            return;
+        this.loadPage(index);
+    }
+    /** Moves the page on screen without asking for it, for scroll tracking, which follows what is drawn. */
+    markCurrentPage(index) {
+        if (this.destroyed || !Number.isInteger(index) || index < 0 || index >= this.pageCount())
+            return;
+        this.pageIndexState.set(index);
+    }
+    /**
+     * ExportReport: the report as a file, handed to the browser to save. The export never times out, so
+     * it is tracked as a request the user waits for and the toolbar stays disabled until the file is here.
+     */
+    exportTo(format) {
+        if (this.destroyed || this.session === null || this.context === null)
+            return;
+        const { context, session } = this.connection();
+        this.track(this.client.exportReport(context, session, format), false, (answer) => {
+            const name = answer.fileName || `${this.reportState()?.reportName ?? 'report'}.${format.toLowerCase()}`;
+            saveBlob(answer.blob, name);
+        });
+    }
     /** Takes the failure off show. */
     dismissFailure() {
         this.failureState.set(null);
@@ -700,7 +787,7 @@ class NxrViewerSessionService {
         const { allowAutoUpdateCache, cacheMode } = session.options.server;
         if (!allowAutoUpdateCache || cacheMode === 'None')
             return;
-        this.keepAlive = interval(NXR_KEEP_ALIVE_MS)
+        this.keepAlive = interval(NXE_KEEP_ALIVE_MS)
             .pipe(exhaustMap(() => this.client.updateCache(context, session).pipe(catchError(() => EMPTY))))
             .subscribe();
     }
@@ -719,15 +806,19 @@ class NxrViewerSessionService {
             throw new Error('The viewer has no report open.');
         return { context: this.context, session: this.session };
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.5", ngImport: i0, type: NxrViewerSessionService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.1.5", ngImport: i0, type: NxrViewerSessionService });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.5", ngImport: i0, type: NxeViewerSessionService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.1.5", ngImport: i0, type: NxeViewerSessionService });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.5", ngImport: i0, type: NxrViewerSessionService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.5", ngImport: i0, type: NxeViewerSessionService, decorators: [{
             type: Injectable
         }], ctorParameters: () => [] });
 
 /** The width of the page-number box, as Stimulsoft's page control sizes it. */
 const PAGE_BOX_WIDTH_PX = 45;
+/** The zoom menu's fixed percentages, in Stimulsoft's order, above the two fit items. */
+const ZOOM_PRESETS = [25, 50, 75, 100, 150, 200];
+/** The view-mode menu's items, in Stimulsoft's order. */
+const VIEW_MODES = ['SinglePage', 'Continuous', 'MultiplePages'];
 /**
  * The toolbar's page navigation.
  *
@@ -742,7 +833,7 @@ const PAGE_BOX_WIDTH_PX = 45;
  * report it would move past, and everything is disabled while a request the user waits for is on
  * its way.
  */
-class NxrViewerToolbarComponent {
+class NxeViewerToolbarComponent {
     /** The options from the server, or null before the first answer, when the toolbar shows nothing. */
     options = input(null, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "options" }] : /* istanbul ignore next */ []));
@@ -756,11 +847,62 @@ class NxrViewerToolbarComponent {
     busy = input(false, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "busy" }] : /* istanbul ignore next */ []));
     /** The captions to show. */
-    strings = input(NXR_ENGLISH, /* @ts-ignore */
+    strings = input(NXE_ENGLISH, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "strings" }] : /* istanbul ignore next */ []));
+    /** The mode the pages are shown in. */
+    viewMode = input('SinglePage', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "viewMode" }] : /* istanbul ignore next */ []));
+    /** The zoom the pages are drawn at, as a factor: 1 is 100 %. */
+    zoom = input(1, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "zoom" }] : /* istanbul ignore next */ []));
     /** The 0-based page the user asked for. */
     goToPage = output();
+    /** The mode the user chose. */
+    viewModeChange = output();
+    /** The zoom the user chose, as a factor. */
+    zoomChange = output();
+    /** The user asked to fit a whole page, or the page's width, in the panel. */
+    fitRequest = output();
+    /** The format the user asked the report to be saved as. */
+    saveRequest = output();
     pageBoxWidth = PAGE_BOX_WIDTH_PX;
+    zoomPresets = ZOOM_PRESETS;
+    viewModes = VIEW_MODES;
+    /** Which menu is open, or null. Stimulsoft opens one at a time and closes it on the next click. */
+    openMenuState = signal(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "openMenuState" }] : /* istanbul ignore next */ []));
+    openMenu = this.openMenuState.asReadonly();
+    /**
+     * The save menu's formats, in the order Stimulsoft lists them, and only those the server turned on.
+     * The button itself is left out when no format is on, as Stimulsoft forces it off then.
+     */
+    saveFormats = computed(() => {
+        const exports = this.options()?.exports;
+        if (!exports)
+            return [];
+        const formats = [];
+        if (exports.showExportToPdf)
+            formats.push('Pdf');
+        if (exports.showExportToHtml)
+            formats.push('Html');
+        return formats;
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "saveFormats" }] : /* istanbul ignore next */ []));
+    showSave = computed(() => this.toolbar()?.showSaveButton === true && this.saveFormats().length > 0, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "showSave" }] : /* istanbul ignore next */ []));
+    save(format) {
+        this.openMenuState.set(null);
+        this.saveRequest.emit(format);
+    }
+    /**
+     * The zoom as a rounded percentage, as Stimulsoft captions the button, and empty when the zoom is
+     * unknown or zero.
+     */
+    zoomCaption = computed(() => {
+        const zoom = this.zoom();
+        return Number.isFinite(zoom) && zoom > 0 ? `${Math.round(zoom * 100)}%` : '';
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "zoomCaption" }] : /* istanbul ignore next */ []));
     toolbar = computed(() => this.options()?.toolbar ?? null, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "toolbar" }] : /* istanbul ignore next */ []));
     appearance = computed(() => this.options()?.appearance ?? null, /* @ts-ignore */
@@ -791,6 +933,30 @@ class NxrViewerToolbarComponent {
     ...(ngDevMode ? [{ debugName: "showNextPage" }] : /* istanbul ignore next */ []));
     showLastPage = computed(() => this.toolbar()?.showLastPageButton === true, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "showLastPage" }] : /* istanbul ignore next */ []));
+    showZoom = computed(() => this.toolbar()?.showZoomButton === true, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "showZoom" }] : /* istanbul ignore next */ []));
+    showViewMode = computed(() => this.toolbar()?.showViewModeButton === true, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "showViewMode" }] : /* istanbul ignore next */ []));
+    /** Whether a preset is the zoom on show, so its menu item reads as chosen. */
+    isZoom(percent) {
+        return Math.round(this.zoom() * 100) === percent;
+    }
+    /** Opens a menu, or closes it when it is the one already open. */
+    toggleMenu(menu) {
+        this.openMenuState.update((open) => (open === menu ? null : menu));
+    }
+    chooseZoom(percent) {
+        this.openMenuState.set(null);
+        this.zoomChange.emit(percent / 100);
+    }
+    fit(what) {
+        this.openMenuState.set(null);
+        this.fitRequest.emit(what);
+    }
+    chooseViewMode(mode) {
+        this.openMenuState.set(null);
+        this.viewModeChange.emit(mode);
+    }
     atStart = computed(() => this.busy() || this.navigationDisabled() || this.pageIndex() <= 0, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "atStart" }] : /* istanbul ignore next */ []));
     atEnd = computed(() => this.busy() || this.navigationDisabled() || this.pageIndex() >= this.pageCount() - 1, /* @ts-ignore */
@@ -838,12 +1004,53 @@ class NxrViewerToolbarComponent {
             return;
         this.goToPage.emit(index);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.5", ngImport: i0, type: NxrViewerToolbarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.5", type: NxrViewerToolbarComponent, isStandalone: true, selector: "nxr-viewer-toolbar", inputs: { options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null }, pageIndex: { classPropertyName: "pageIndex", publicName: "pageIndex", isSignal: true, isRequired: false, transformFunction: null }, pageCount: { classPropertyName: "pageCount", publicName: "pageCount", isSignal: true, isRequired: false, transformFunction: null }, busy: { classPropertyName: "busy", publicName: "busy", isSignal: true, isRequired: false, transformFunction: null }, strings: { classPropertyName: "strings", publicName: "strings", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { goToPage: "goToPage" }, host: { attributes: { "role": "toolbar" }, properties: { "style.background-color": "backgroundColor()", "style.border": "border()", "style.color": "fontColor()", "style.font-family": "fontFamily()", "style.justify-content": "justifyContent()", "class.nxr-busy": "busy()" }, classAttribute: "nxr-viewer-toolbar" }, ngImport: i0, template: `
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.5", ngImport: i0, type: NxeViewerToolbarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.5", type: NxeViewerToolbarComponent, isStandalone: true, selector: "nxe-viewer-toolbar", inputs: { options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null }, pageIndex: { classPropertyName: "pageIndex", publicName: "pageIndex", isSignal: true, isRequired: false, transformFunction: null }, pageCount: { classPropertyName: "pageCount", publicName: "pageCount", isSignal: true, isRequired: false, transformFunction: null }, busy: { classPropertyName: "busy", publicName: "busy", isSignal: true, isRequired: false, transformFunction: null }, strings: { classPropertyName: "strings", publicName: "strings", isSignal: true, isRequired: false, transformFunction: null }, viewMode: { classPropertyName: "viewMode", publicName: "viewMode", isSignal: true, isRequired: false, transformFunction: null }, zoom: { classPropertyName: "zoom", publicName: "zoom", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { goToPage: "goToPage", viewModeChange: "viewModeChange", zoomChange: "zoomChange", fitRequest: "fitRequest", saveRequest: "saveRequest" }, host: { attributes: { "role": "toolbar" }, properties: { "style.background-color": "backgroundColor()", "style.border": "border()", "style.color": "fontColor()", "style.font-family": "fontFamily()", "style.justify-content": "justifyContent()", "class.nxe-busy": "busy()" }, classAttribute: "nxe-viewer-toolbar" }, ngImport: i0, template: `
+    @if (showSave()) {
+      <div class="nxe-toolbar-menu">
+        <button
+          type="button"
+          class="nxe-toolbar-button nxe-toolbar-captioned"
+          [attr.aria-label]="strings().SaveToolTip"
+          [attr.aria-expanded]="openMenu() === 'save'"
+          (click)="toggleMenu('save')"
+        >
+          <svg viewBox="0 0 16 16" aria-hidden="true">
+            <path
+              d="M2 2h9.5L14 4.5V14H2zm2.5 0v4.5h6V2zm-1 7.5h9V14h-9zM8.5 3h1.5v2.5H8.5z"
+            />
+          </svg>
+          <span class="nxe-toolbar-caption">{{ strings().Save }}</span>
+          <svg class="nxe-toolbar-arrow" viewBox="0 0 8 8" aria-hidden="true">
+            <path d="M1 3h6L4 6.2z" />
+          </svg>
+        </button>
+        @if (openMenu() === 'save') {
+          <div class="nxe-toolbar-popup" role="menu">
+            @for (format of saveFormats(); track format) {
+              <button
+                type="button"
+                class="nxe-toolbar-item"
+                role="menuitem"
+                (click)="save(format)"
+              >
+                <span class="nxe-toolbar-item-icon">
+                  <svg viewBox="0 0 16 16" aria-hidden="true">
+                    <path d="M3 1h7l3 3v11H3zm6.6 1.2v2.2h2.2z" />
+                  </svg>
+                </span>
+                {{ format }}
+              </button>
+            }
+          </div>
+        }
+      </div>
+      <span class="nxe-toolbar-separator"></span>
+    }
     @if (showFirstPage()) {
       <button
         type="button"
-        class="nxr-toolbar-button"
+        class="nxe-toolbar-button"
         [disabled]="atStart()"
         [attr.aria-label]="strings().FirstPage"
         (click)="goTo(0)"
@@ -856,7 +1063,7 @@ class NxrViewerToolbarComponent {
     @if (showPreviousPage()) {
       <button
         type="button"
-        class="nxr-toolbar-button"
+        class="nxe-toolbar-button"
         [disabled]="atStart()"
         [attr.aria-label]="strings().PrevPage"
         (click)="goTo(pageIndex() - 1)"
@@ -865,25 +1072,25 @@ class NxrViewerToolbarComponent {
       </button>
     }
     @if (showCurrentPage()) {
-      <span class="nxr-page-control">
-        <span class="nxr-page-label">{{ strings().Page }}</span>
+      <span class="nxe-page-control">
+        <span class="nxe-page-label">{{ strings().Page }}</span>
         <input
           type="text"
           inputmode="numeric"
-          class="nxr-page-box"
+          class="nxe-page-box"
           [style.width.px]="pageBoxWidth"
           [disabled]="pageControlDisabled()"
           [value]="pageIndex() + 1"
           [attr.aria-label]="strings().Page"
           (keydown.enter)="enterPage($event)"
         />
-        <span class="nxr-page-label">{{ strings().PageOf }} {{ pageCount() }}</span>
+        <span class="nxe-page-label">{{ strings().PageOf }} {{ pageCount() }}</span>
       </span>
     }
     @if (showNextPage()) {
       <button
         type="button"
-        class="nxr-toolbar-button"
+        class="nxe-toolbar-button"
         [disabled]="atEnd()"
         [attr.aria-label]="strings().NextPage"
         (click)="goTo(pageIndex() + 1)"
@@ -894,7 +1101,7 @@ class NxrViewerToolbarComponent {
     @if (showLastPage()) {
       <button
         type="button"
-        class="nxr-toolbar-button"
+        class="nxe-toolbar-button"
         [disabled]="atEnd()"
         [attr.aria-label]="strings().LastPage"
         (click)="goTo(pageCount() - 1)"
@@ -904,24 +1111,166 @@ class NxrViewerToolbarComponent {
         </svg>
       </button>
     }
-  `, isInline: true, styles: [":host{display:flex;align-items:center;gap:2px;box-sizing:border-box;padding:3px 6px;min-height:30px;position:relative;-webkit-user-select:none;user-select:none}:host(.nxr-busy):after{content:\"\";position:absolute;inset:0;cursor:default}.nxr-toolbar-button{display:inline-flex;align-items:center;justify-content:center;width:26px;height:26px;padding:0;border:0;border-radius:2px;background:transparent;color:inherit;font:inherit;cursor:pointer}.nxr-toolbar-button:hover:not(:disabled){background:#00000014}.nxr-toolbar-button:disabled{opacity:.5;cursor:default}.nxr-toolbar-button svg{width:16px;height:16px;fill:currentColor}.nxr-page-control{display:inline-flex;align-items:center;gap:4px;padding:0 4px;white-space:nowrap}.nxr-page-box{height:21px;box-sizing:border-box;text-align:center;font:inherit;color:inherit}.nxr-page-box:disabled{color:transparent}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    @if (showZoom() || showViewMode()) {
+      <span class="nxe-toolbar-separator"></span>
+    }
+    @if (showZoom()) {
+      <div class="nxe-toolbar-menu">
+        <button
+          type="button"
+          class="nxe-toolbar-button nxe-toolbar-captioned"
+          [attr.aria-label]="strings().ZoomToolTip"
+          [attr.aria-expanded]="openMenu() === 'zoom'"
+          (click)="toggleMenu('zoom')"
+        >
+          <svg viewBox="0 0 16 16" aria-hidden="true">
+            <path
+              d="M3 2h7l3 3v9H3zm6.6 1.2v2.2h2.2zM5 8h6v1.1H5zm0 2.4h6v1.1H5z"
+            />
+          </svg>
+          <span class="nxe-toolbar-caption">{{ zoomCaption() }}</span>
+          <svg class="nxe-toolbar-arrow" viewBox="0 0 8 8" aria-hidden="true">
+            <path d="M1 3h6L4 6.2z" />
+          </svg>
+        </button>
+        @if (openMenu() === 'zoom') {
+          <div class="nxe-toolbar-popup" role="menu">
+            @for (percent of zoomPresets; track percent) {
+              <button
+                type="button"
+                class="nxe-toolbar-item"
+                role="menuitem"
+                [class.nxe-toolbar-item-on]="isZoom(percent)"
+                (click)="chooseZoom(percent)"
+              >
+                <span class="nxe-toolbar-item-icon"></span>{{ percent }}%
+              </button>
+            }
+            <span class="nxe-toolbar-item-separator"></span>
+            <button type="button" class="nxe-toolbar-item" role="menuitem" (click)="fit('page')">
+              <span class="nxe-toolbar-item-icon">
+                <svg viewBox="0 0 16 16" aria-hidden="true"><path d="M3 2h10v12H3zm1.2 1.2v9.6h7.6V3.2z" /></svg>
+              </span>
+              {{ strings().ZoomOnePage }}
+            </button>
+            <button type="button" class="nxe-toolbar-item" role="menuitem" (click)="fit('width')">
+              <span class="nxe-toolbar-item-icon">
+                <svg viewBox="0 0 16 16" aria-hidden="true"><path d="M1 6h14v4H1zm1.2 1.2v1.6h11.6V7.2z" /></svg>
+              </span>
+              {{ strings().ZoomPageWidth }}
+            </button>
+          </div>
+        }
+      </div>
+    }
+    @if (showViewMode()) {
+      <div class="nxe-toolbar-menu">
+        <button
+          type="button"
+          class="nxe-toolbar-button nxe-toolbar-captioned"
+          [attr.aria-label]="strings().ViewModeToolTip"
+          [attr.aria-expanded]="openMenu() === 'viewMode'"
+          (click)="toggleMenu('viewMode')"
+        >
+          <svg viewBox="0 0 16 16" aria-hidden="true"><path d="M3 2h10v12H3zm1.2 1.2v9.6h7.6V3.2z" /></svg>
+          <span class="nxe-toolbar-caption">{{ strings()[viewMode()] }}</span>
+          <svg class="nxe-toolbar-arrow" viewBox="0 0 8 8" aria-hidden="true">
+            <path d="M1 3h6L4 6.2z" />
+          </svg>
+        </button>
+        @if (openMenu() === 'viewMode') {
+          <div class="nxe-toolbar-popup" role="menu">
+            @for (mode of viewModes; track mode) {
+              <button
+                type="button"
+                class="nxe-toolbar-item"
+                role="menuitem"
+                [class.nxe-toolbar-item-on]="viewMode() === mode"
+                (click)="chooseViewMode(mode)"
+              >
+                <span class="nxe-toolbar-item-icon">
+                  @switch (mode) {
+                    @case ('SinglePage') {
+                      <svg viewBox="0 0 16 16" aria-hidden="true"><path d="M3 2h10v12H3zm1.2 1.2v9.6h7.6V3.2z" /></svg>
+                    }
+                    @case ('Continuous') {
+                      <svg viewBox="0 0 16 16" aria-hidden="true">
+                        <path d="M3 1h10v6H3zm1.2 1.2v3.6h7.6V2.2zM3 9h10v6H3zm1.2 1.2v3.6h7.6v-3.6z" />
+                      </svg>
+                    }
+                    @case ('MultiplePages') {
+                      <svg viewBox="0 0 16 16" aria-hidden="true">
+                        <path d="M2 2h5v5H2zm7 0h5v5H9zM2 9h5v5H2zm7 0h5v5H9z" />
+                      </svg>
+                    }
+                  }
+                </span>
+                {{ strings()[mode] }}
+              </button>
+            }
+          </div>
+        }
+      </div>
+    }
+  `, isInline: true, styles: [":host{display:flex;align-items:center;gap:2px;box-sizing:border-box;padding:3px 6px;min-height:30px;position:relative;-webkit-user-select:none;user-select:none}:host(.nxe-busy):after{content:\"\";position:absolute;inset:0;cursor:default}.nxe-toolbar-button{display:inline-flex;align-items:center;justify-content:center;width:26px;height:26px;padding:0;border:0;border-radius:2px;background:transparent;color:inherit;font:inherit;cursor:pointer}.nxe-toolbar-button:hover:not(:disabled){background:#00000014}.nxe-toolbar-button:disabled{opacity:.5;cursor:default}.nxe-toolbar-button svg{width:16px;height:16px;fill:currentColor}.nxe-page-control{display:inline-flex;align-items:center;gap:4px;padding:0 4px;white-space:nowrap}.nxe-page-box{height:21px;box-sizing:border-box;text-align:center;font:inherit;color:inherit}.nxe-page-box:disabled{color:inherit;-webkit-text-fill-color:currentColor;opacity:1}.nxe-toolbar-separator{width:1px;height:18px;margin:0 4px;background:currentColor;opacity:.25}.nxe-toolbar-menu{position:relative;display:flex;align-items:center}.nxe-toolbar-captioned{width:auto;gap:4px;padding:0 6px}.nxe-toolbar-caption{font-size:12px;white-space:nowrap}.nxe-toolbar-arrow{width:8px;height:8px;fill:currentColor;flex:none}.nxe-toolbar-popup{position:absolute;top:100%;left:0;z-index:10;min-width:150px;margin-top:2px;padding:3px 0;background:#fff;color:#000;border:1px solid #c8c8c8;box-shadow:0 2px 8px #00000040;display:flex;flex-direction:column}.nxe-toolbar-item{display:flex;align-items:center;gap:8px;border:0;background:transparent;color:inherit;font:inherit;font-size:12px;text-align:left;white-space:nowrap;padding:5px 14px 5px 6px;cursor:pointer}.nxe-toolbar-item:hover{background:#00000012}.nxe-toolbar-item-on{background:#0000001c}.nxe-toolbar-item-icon{width:16px;height:16px;flex:none;display:inline-flex;align-items:center;justify-content:center}.nxe-toolbar-item-icon svg{width:16px;height:16px;fill:currentColor}.nxe-toolbar-item-separator{height:1px;margin:3px 0;background:#c8c8c8}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.5", ngImport: i0, type: NxrViewerToolbarComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.5", ngImport: i0, type: NxeViewerToolbarComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'nxr-viewer-toolbar', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, host: {
-                        class: 'nxr-viewer-toolbar',
+            args: [{ selector: 'nxe-viewer-toolbar', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, host: {
+                        class: 'nxe-viewer-toolbar',
                         role: 'toolbar',
                         '[style.background-color]': 'backgroundColor()',
                         '[style.border]': 'border()',
                         '[style.color]': 'fontColor()',
                         '[style.font-family]': 'fontFamily()',
                         '[style.justify-content]': 'justifyContent()',
-                        '[class.nxr-busy]': 'busy()',
+                        '[class.nxe-busy]': 'busy()',
                     }, template: `
+    @if (showSave()) {
+      <div class="nxe-toolbar-menu">
+        <button
+          type="button"
+          class="nxe-toolbar-button nxe-toolbar-captioned"
+          [attr.aria-label]="strings().SaveToolTip"
+          [attr.aria-expanded]="openMenu() === 'save'"
+          (click)="toggleMenu('save')"
+        >
+          <svg viewBox="0 0 16 16" aria-hidden="true">
+            <path
+              d="M2 2h9.5L14 4.5V14H2zm2.5 0v4.5h6V2zm-1 7.5h9V14h-9zM8.5 3h1.5v2.5H8.5z"
+            />
+          </svg>
+          <span class="nxe-toolbar-caption">{{ strings().Save }}</span>
+          <svg class="nxe-toolbar-arrow" viewBox="0 0 8 8" aria-hidden="true">
+            <path d="M1 3h6L4 6.2z" />
+          </svg>
+        </button>
+        @if (openMenu() === 'save') {
+          <div class="nxe-toolbar-popup" role="menu">
+            @for (format of saveFormats(); track format) {
+              <button
+                type="button"
+                class="nxe-toolbar-item"
+                role="menuitem"
+                (click)="save(format)"
+              >
+                <span class="nxe-toolbar-item-icon">
+                  <svg viewBox="0 0 16 16" aria-hidden="true">
+                    <path d="M3 1h7l3 3v11H3zm6.6 1.2v2.2h2.2z" />
+                  </svg>
+                </span>
+                {{ format }}
+              </button>
+            }
+          </div>
+        }
+      </div>
+      <span class="nxe-toolbar-separator"></span>
+    }
     @if (showFirstPage()) {
       <button
         type="button"
-        class="nxr-toolbar-button"
+        class="nxe-toolbar-button"
         [disabled]="atStart()"
         [attr.aria-label]="strings().FirstPage"
         (click)="goTo(0)"
@@ -934,7 +1283,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.5", ngImpor
     @if (showPreviousPage()) {
       <button
         type="button"
-        class="nxr-toolbar-button"
+        class="nxe-toolbar-button"
         [disabled]="atStart()"
         [attr.aria-label]="strings().PrevPage"
         (click)="goTo(pageIndex() - 1)"
@@ -943,25 +1292,25 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.5", ngImpor
       </button>
     }
     @if (showCurrentPage()) {
-      <span class="nxr-page-control">
-        <span class="nxr-page-label">{{ strings().Page }}</span>
+      <span class="nxe-page-control">
+        <span class="nxe-page-label">{{ strings().Page }}</span>
         <input
           type="text"
           inputmode="numeric"
-          class="nxr-page-box"
+          class="nxe-page-box"
           [style.width.px]="pageBoxWidth"
           [disabled]="pageControlDisabled()"
           [value]="pageIndex() + 1"
           [attr.aria-label]="strings().Page"
           (keydown.enter)="enterPage($event)"
         />
-        <span class="nxr-page-label">{{ strings().PageOf }} {{ pageCount() }}</span>
+        <span class="nxe-page-label">{{ strings().PageOf }} {{ pageCount() }}</span>
       </span>
     }
     @if (showNextPage()) {
       <button
         type="button"
-        class="nxr-toolbar-button"
+        class="nxe-toolbar-button"
         [disabled]="atEnd()"
         [attr.aria-label]="strings().NextPage"
         (click)="goTo(pageIndex() + 1)"
@@ -972,7 +1321,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.5", ngImpor
     @if (showLastPage()) {
       <button
         type="button"
-        class="nxr-toolbar-button"
+        class="nxe-toolbar-button"
         [disabled]="atEnd()"
         [attr.aria-label]="strings().LastPage"
         (click)="goTo(pageCount() - 1)"
@@ -982,9 +1331,118 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.5", ngImpor
         </svg>
       </button>
     }
-  `, styles: [":host{display:flex;align-items:center;gap:2px;box-sizing:border-box;padding:3px 6px;min-height:30px;position:relative;-webkit-user-select:none;user-select:none}:host(.nxr-busy):after{content:\"\";position:absolute;inset:0;cursor:default}.nxr-toolbar-button{display:inline-flex;align-items:center;justify-content:center;width:26px;height:26px;padding:0;border:0;border-radius:2px;background:transparent;color:inherit;font:inherit;cursor:pointer}.nxr-toolbar-button:hover:not(:disabled){background:#00000014}.nxr-toolbar-button:disabled{opacity:.5;cursor:default}.nxr-toolbar-button svg{width:16px;height:16px;fill:currentColor}.nxr-page-control{display:inline-flex;align-items:center;gap:4px;padding:0 4px;white-space:nowrap}.nxr-page-box{height:21px;box-sizing:border-box;text-align:center;font:inherit;color:inherit}.nxr-page-box:disabled{color:transparent}\n"] }]
-        }], propDecorators: { options: [{ type: i0.Input, args: [{ isSignal: true, alias: "options", required: false }] }], pageIndex: [{ type: i0.Input, args: [{ isSignal: true, alias: "pageIndex", required: false }] }], pageCount: [{ type: i0.Input, args: [{ isSignal: true, alias: "pageCount", required: false }] }], busy: [{ type: i0.Input, args: [{ isSignal: true, alias: "busy", required: false }] }], strings: [{ type: i0.Input, args: [{ isSignal: true, alias: "strings", required: false }] }], goToPage: [{ type: i0.Output, args: ["goToPage"] }] } });
+    @if (showZoom() || showViewMode()) {
+      <span class="nxe-toolbar-separator"></span>
+    }
+    @if (showZoom()) {
+      <div class="nxe-toolbar-menu">
+        <button
+          type="button"
+          class="nxe-toolbar-button nxe-toolbar-captioned"
+          [attr.aria-label]="strings().ZoomToolTip"
+          [attr.aria-expanded]="openMenu() === 'zoom'"
+          (click)="toggleMenu('zoom')"
+        >
+          <svg viewBox="0 0 16 16" aria-hidden="true">
+            <path
+              d="M3 2h7l3 3v9H3zm6.6 1.2v2.2h2.2zM5 8h6v1.1H5zm0 2.4h6v1.1H5z"
+            />
+          </svg>
+          <span class="nxe-toolbar-caption">{{ zoomCaption() }}</span>
+          <svg class="nxe-toolbar-arrow" viewBox="0 0 8 8" aria-hidden="true">
+            <path d="M1 3h6L4 6.2z" />
+          </svg>
+        </button>
+        @if (openMenu() === 'zoom') {
+          <div class="nxe-toolbar-popup" role="menu">
+            @for (percent of zoomPresets; track percent) {
+              <button
+                type="button"
+                class="nxe-toolbar-item"
+                role="menuitem"
+                [class.nxe-toolbar-item-on]="isZoom(percent)"
+                (click)="chooseZoom(percent)"
+              >
+                <span class="nxe-toolbar-item-icon"></span>{{ percent }}%
+              </button>
+            }
+            <span class="nxe-toolbar-item-separator"></span>
+            <button type="button" class="nxe-toolbar-item" role="menuitem" (click)="fit('page')">
+              <span class="nxe-toolbar-item-icon">
+                <svg viewBox="0 0 16 16" aria-hidden="true"><path d="M3 2h10v12H3zm1.2 1.2v9.6h7.6V3.2z" /></svg>
+              </span>
+              {{ strings().ZoomOnePage }}
+            </button>
+            <button type="button" class="nxe-toolbar-item" role="menuitem" (click)="fit('width')">
+              <span class="nxe-toolbar-item-icon">
+                <svg viewBox="0 0 16 16" aria-hidden="true"><path d="M1 6h14v4H1zm1.2 1.2v1.6h11.6V7.2z" /></svg>
+              </span>
+              {{ strings().ZoomPageWidth }}
+            </button>
+          </div>
+        }
+      </div>
+    }
+    @if (showViewMode()) {
+      <div class="nxe-toolbar-menu">
+        <button
+          type="button"
+          class="nxe-toolbar-button nxe-toolbar-captioned"
+          [attr.aria-label]="strings().ViewModeToolTip"
+          [attr.aria-expanded]="openMenu() === 'viewMode'"
+          (click)="toggleMenu('viewMode')"
+        >
+          <svg viewBox="0 0 16 16" aria-hidden="true"><path d="M3 2h10v12H3zm1.2 1.2v9.6h7.6V3.2z" /></svg>
+          <span class="nxe-toolbar-caption">{{ strings()[viewMode()] }}</span>
+          <svg class="nxe-toolbar-arrow" viewBox="0 0 8 8" aria-hidden="true">
+            <path d="M1 3h6L4 6.2z" />
+          </svg>
+        </button>
+        @if (openMenu() === 'viewMode') {
+          <div class="nxe-toolbar-popup" role="menu">
+            @for (mode of viewModes; track mode) {
+              <button
+                type="button"
+                class="nxe-toolbar-item"
+                role="menuitem"
+                [class.nxe-toolbar-item-on]="viewMode() === mode"
+                (click)="chooseViewMode(mode)"
+              >
+                <span class="nxe-toolbar-item-icon">
+                  @switch (mode) {
+                    @case ('SinglePage') {
+                      <svg viewBox="0 0 16 16" aria-hidden="true"><path d="M3 2h10v12H3zm1.2 1.2v9.6h7.6V3.2z" /></svg>
+                    }
+                    @case ('Continuous') {
+                      <svg viewBox="0 0 16 16" aria-hidden="true">
+                        <path d="M3 1h10v6H3zm1.2 1.2v3.6h7.6V2.2zM3 9h10v6H3zm1.2 1.2v3.6h7.6v-3.6z" />
+                      </svg>
+                    }
+                    @case ('MultiplePages') {
+                      <svg viewBox="0 0 16 16" aria-hidden="true">
+                        <path d="M2 2h5v5H2zm7 0h5v5H9zM2 9h5v5H2zm7 0h5v5H9z" />
+                      </svg>
+                    }
+                  }
+                </span>
+                {{ strings()[mode] }}
+              </button>
+            }
+          </div>
+        }
+      </div>
+    }
+  `, styles: [":host{display:flex;align-items:center;gap:2px;box-sizing:border-box;padding:3px 6px;min-height:30px;position:relative;-webkit-user-select:none;user-select:none}:host(.nxe-busy):after{content:\"\";position:absolute;inset:0;cursor:default}.nxe-toolbar-button{display:inline-flex;align-items:center;justify-content:center;width:26px;height:26px;padding:0;border:0;border-radius:2px;background:transparent;color:inherit;font:inherit;cursor:pointer}.nxe-toolbar-button:hover:not(:disabled){background:#00000014}.nxe-toolbar-button:disabled{opacity:.5;cursor:default}.nxe-toolbar-button svg{width:16px;height:16px;fill:currentColor}.nxe-page-control{display:inline-flex;align-items:center;gap:4px;padding:0 4px;white-space:nowrap}.nxe-page-box{height:21px;box-sizing:border-box;text-align:center;font:inherit;color:inherit}.nxe-page-box:disabled{color:inherit;-webkit-text-fill-color:currentColor;opacity:1}.nxe-toolbar-separator{width:1px;height:18px;margin:0 4px;background:currentColor;opacity:.25}.nxe-toolbar-menu{position:relative;display:flex;align-items:center}.nxe-toolbar-captioned{width:auto;gap:4px;padding:0 6px}.nxe-toolbar-caption{font-size:12px;white-space:nowrap}.nxe-toolbar-arrow{width:8px;height:8px;fill:currentColor;flex:none}.nxe-toolbar-popup{position:absolute;top:100%;left:0;z-index:10;min-width:150px;margin-top:2px;padding:3px 0;background:#fff;color:#000;border:1px solid #c8c8c8;box-shadow:0 2px 8px #00000040;display:flex;flex-direction:column}.nxe-toolbar-item{display:flex;align-items:center;gap:8px;border:0;background:transparent;color:inherit;font:inherit;font-size:12px;text-align:left;white-space:nowrap;padding:5px 14px 5px 6px;cursor:pointer}.nxe-toolbar-item:hover{background:#00000012}.nxe-toolbar-item-on{background:#0000001c}.nxe-toolbar-item-icon{width:16px;height:16px;flex:none;display:inline-flex;align-items:center;justify-content:center}.nxe-toolbar-item-icon svg{width:16px;height:16px;fill:currentColor}.nxe-toolbar-item-separator{height:1px;margin:3px 0;background:#c8c8c8}\n"] }]
+        }], propDecorators: { options: [{ type: i0.Input, args: [{ isSignal: true, alias: "options", required: false }] }], pageIndex: [{ type: i0.Input, args: [{ isSignal: true, alias: "pageIndex", required: false }] }], pageCount: [{ type: i0.Input, args: [{ isSignal: true, alias: "pageCount", required: false }] }], busy: [{ type: i0.Input, args: [{ isSignal: true, alias: "busy", required: false }] }], strings: [{ type: i0.Input, args: [{ isSignal: true, alias: "strings", required: false }] }], viewMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "viewMode", required: false }] }], zoom: [{ type: i0.Input, args: [{ isSignal: true, alias: "zoom", required: false }] }], goToPage: [{ type: i0.Output, args: ["goToPage"] }], viewModeChange: [{ type: i0.Output, args: ["viewModeChange"] }], zoomChange: [{ type: i0.Output, args: ["zoomChange"] }], fitRequest: [{ type: i0.Output, args: ["fitRequest"] }], saveRequest: [{ type: i0.Output, args: ["saveRequest"] }] } });
 
+/** Stimulsoft's scroll tracker waits this long after scrolling stops before it moves the page. */
+const SCROLL_SETTLE_MS = 300;
+/** And animates a navigation scroll over this long, in steps of about this many milliseconds. */
+const SCROLL_ANIMATION_MS = 350;
+const SCROLL_STEP_MS = 30;
+/** The viewer never measures itself smaller than this, nor closer than this to the window's bottom. */
+const MIN_PANEL_HEIGHT = 200;
+const VIEWER_BOTTOM_GAP = 16;
 /**
  * A report served by `Nextera.Reports.Angular.NetCore`, shown page by page.
  *
@@ -994,7 +1452,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.5", ngImpor
  *
  * Each viewer provides its own session, so several on a page never share a report or a token.
  */
-class NxrReportViewerComponent {
+class NxeReportViewerComponent {
     /** Each request's URL, with `{action}` in place of the host action it goes to. */
     requestUrl = input('', /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "requestUrl" }] : /* istanbul ignore next */ []));
@@ -1023,11 +1481,43 @@ class NxrReportViewerComponent {
     loaded = output();
     /** Emits every failure the viewer puts on show. */
     error = output();
-    session = inject(NxrViewerSessionService);
+    session = inject(NxeViewerSessionService);
     /** Stimulsoft's `api` object: what a host calls to drive the viewer from outside. */
     api = this.buildApi();
     appearance = computed(() => this.session.options()?.appearance ?? null, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "appearance" }] : /* istanbul ignore next */ []));
+    pagesBox = viewChild('pagesBox', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "pagesBox" }] : /* istanbul ignore next */ []));
+    rootBox = viewChild('rootBox', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "rootBox" }] : /* istanbul ignore next */ []));
+    /**
+     * The mode the pages are shown in, and the zoom they are drawn at. Both start from the server's
+     * options and are then the user's, until a new report's options arrive and reset them — which is
+     * what `linkedSignal` says and an effect would only imply.
+     */
+    viewMode = linkedSignal(() => this.session.options()?.toolbar.viewMode ?? 'SinglePage', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "viewMode" }] : /* istanbul ignore next */ []));
+    zoom = linkedSignal(() => {
+        const percent = this.session.options()?.toolbar.zoom ?? 100;
+        return percent > 0 ? percent / 100 : 1;
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "zoom" }] : /* istanbul ignore next */ []));
+    /**
+     * The pages on screen: one in `SinglePage`, the whole report in the modes that scroll through it.
+     * A page carries its size before its HTML arrives, so the list holds its shape while the pages that
+     * come into view are fetched.
+     */
+    shownPages = computed(() => {
+        if (this.viewMode() === 'SinglePage') {
+            const page = this.session.shownPage();
+            return page ? [page] : [];
+        }
+        return this.session.allPages();
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "shownPages" }] : /* istanbul ignore next */ []));
+    /** Set while a page-navigation scroll is running, so scroll tracking does not fight it. */
+    scrollingToPage = false;
+    scrollSettled = null;
     toolbarVisible = computed(() => this.session.options()?.toolbar.visible !== false, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "toolbarVisible" }] : /* istanbul ignore next */ []));
     pageCss = computed(() => this.session.report()?.pageCss ?? '', /* @ts-ignore */
@@ -1058,7 +1548,22 @@ class NxrReportViewerComponent {
     ...(ngDevMode ? [{ debugName: "rootWidth" }] : /* istanbul ignore next */ []));
     rootBackgroundColor = computed(() => this.backgroundColor() ?? 'White', /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "rootBackgroundColor" }] : /* istanbul ignore next */ []));
+    /**
+     * The height the viewer was measured to fill, once it is known.
+     *
+     * The report panel is what scrolls, as Stimulsoft's does — its panel measures 836 px against a
+     * 16 513 px report while the document itself does not scroll at all. That needs the viewer to have a
+     * definite height, and a host that asks for `100%` inside a container whose own height is automatic
+     * does not give it one: the viewer would then grow to the whole report, 29 pages of it, and the
+     * page would scroll instead of the panel. So when the height the host asked for cannot resolve, the
+     * viewer measures the room between its top and the bottom of the window and takes that.
+     */
+    measuredHeight = signal(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "measuredHeight" }] : /* istanbul ignore next */ []));
     rootHeight = computed(() => {
+        const measured = this.measuredHeight();
+        if (measured !== null)
+            return measured;
         const given = this.height();
         if (given !== null)
             return given;
@@ -1066,9 +1571,12 @@ class NxrReportViewerComponent {
     }, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "rootHeight" }] : /* istanbul ignore next */ []));
     constructor() {
-        this.session.reportLoaded
-            .pipe(takeUntilDestroyed())
-            .subscribe(() => this.loaded.emit());
+        this.session.reportLoaded.pipe(takeUntilDestroyed()).subscribe(() => {
+            // The modes that show the whole report start with every page laid out at its size and none of
+            // them fetched, so the first screenful has to be asked for here; scrolling asks for the rest.
+            this.afterPagesSettle();
+            this.loaded.emit();
+        });
         this.session.failed
             .pipe(takeUntilDestroyed())
             .subscribe((failure) => this.error.emit(failure));
@@ -1081,6 +1589,142 @@ class NxrReportViewerComponent {
     ngOnChanges() {
         this.session.open(this.context(), this.action());
     }
+    /**
+     * Page navigation. In a mode that scrolls through the whole report the page is reached by scrolling
+     * to it, over 350 ms, which is what Stimulsoft's navigation actions do; in `SinglePage` the page is
+     * simply the one shown.
+     */
+    navigateTo(index) {
+        this.session.goToPage(index);
+        if (this.viewMode() === 'SinglePage')
+            return;
+        this.scrollToPage(index);
+    }
+    /** The page number is kept and nothing scrolls, as Stimulsoft's view-mode actions leave it. */
+    setViewMode(mode) {
+        this.viewMode.set(mode);
+        this.afterPagesSettle();
+    }
+    /** Nothing preserves the scroll offset across a zoom change, so the visible region shifts. */
+    setZoom(zoom) {
+        this.zoom.set(zoom);
+        this.afterPagesSettle();
+    }
+    /**
+     * Fit a whole page, or a page's width, in the panel. Stimulsoft computes this once from what is on
+     * screen and stores the number as the zoom; no fit mode is remembered, so a later resize does not
+     * re-fit. The 40 px it subtracts is the panel's padding and the page's margins.
+     */
+    fitTo(what) {
+        const box = this.pagesBox()?.nativeElement;
+        const page = box?.querySelector('nxe-report-page');
+        if (!box || !(page instanceof HTMLElement))
+            return;
+        const available = what === 'width' ? box.clientWidth - 40 : box.clientHeight - 40;
+        const drawn = what === 'width' ? page.offsetWidth : page.offsetHeight;
+        if (drawn <= 0 || available <= 0)
+            return;
+        this.zoom.set((available * this.zoom()) / drawn);
+        this.afterPagesSettle();
+    }
+    /**
+     * Scrolling asks for the pages that have come into view, and, once it has stopped for 300 ms, moves
+     * the page the toolbar reports to the first one still on screen — Stimulsoft's scroll tracking.
+     */
+    onScroll() {
+        this.requestVisiblePages();
+        if (this.scrollSettled !== null)
+            clearTimeout(this.scrollSettled);
+        this.scrollSettled = setTimeout(() => {
+            this.scrollSettled = null;
+            if (!this.scrollingToPage)
+                this.trackCurrentPage();
+        }, SCROLL_SETTLE_MS);
+    }
+    /** The room on screen changed, so the viewer measures itself against it again. */
+    onWindowResize() {
+        this.fitToAvailableRoom();
+    }
+    /** Lets the new layout reach the DOM, then fits the viewer to it and asks for what is on screen. */
+    afterPagesSettle() {
+        requestAnimationFrame(() => {
+            this.fitToAvailableRoom();
+            this.requestVisiblePages();
+        });
+    }
+    /**
+     * Takes the room between the viewer's top and the bottom of the window when the height the host
+     * asked for did not resolve, so the panel inside scrolls rather than the page. Measured before the
+     * height is applied, and again only when the window changes, so it never chases its own answer.
+     */
+    fitToAvailableRoom() {
+        const root = this.rootBox()?.nativeElement;
+        if (!root || !this.appearance()?.scrollbarsMode)
+            return;
+        const rect = root.getBoundingClientRect();
+        const room = Math.max(MIN_PANEL_HEIGHT, Math.round(window.innerHeight - rect.top - VIEWER_BOTTOM_GAP));
+        // A height that resolved is left alone; one that grew past the room on screen is taken over.
+        if (this.measuredHeight() === null && rect.height <= room + 1)
+            return;
+        this.measuredHeight.set(`${room}px`);
+    }
+    /** Every page whose box meets the panel, plus one either side, so scrolling stays ahead of the eye. */
+    requestVisiblePages() {
+        if (this.viewMode() === 'SinglePage')
+            return;
+        const box = this.pagesBox()?.nativeElement;
+        if (!box)
+            return;
+        const pages = box.querySelectorAll('nxe-report-page');
+        const top = box.scrollTop - box.clientHeight;
+        const bottom = box.scrollTop + box.clientHeight * 2;
+        pages.forEach((element, index) => {
+            if (!(element instanceof HTMLElement))
+                return;
+            const pageTop = element.offsetTop - box.offsetTop;
+            if (pageTop + element.offsetHeight >= top && pageTop <= bottom)
+                this.session.requestPage(index);
+        });
+    }
+    /** The first page whose bottom is still below the panel's scroll offset. */
+    trackCurrentPage() {
+        const box = this.pagesBox()?.nativeElement;
+        if (!box)
+            return;
+        const pages = box.querySelectorAll('nxe-report-page');
+        for (let index = 0; index < pages.length; index++) {
+            const element = pages[index];
+            if (!(element instanceof HTMLElement))
+                continue;
+            const pageTop = element.offsetTop - box.offsetTop;
+            if (pageTop + element.offsetHeight > box.scrollTop) {
+                this.session.markCurrentPage(index);
+                return;
+            }
+        }
+    }
+    /** Stimulsoft animates the panel to the page's top over 350 ms, in steps of about 30 ms. */
+    scrollToPage(index) {
+        const box = this.pagesBox()?.nativeElement;
+        const element = box?.querySelectorAll('nxe-report-page')[index];
+        if (!box || !(element instanceof HTMLElement))
+            return;
+        const from = box.scrollTop;
+        const to = element.offsetTop - box.offsetTop;
+        const started = performance.now();
+        this.scrollingToPage = true;
+        const step = () => {
+            const done = Math.min(1, (performance.now() - started) / SCROLL_ANIMATION_MS);
+            box.scrollTop = from + (to - from) * done;
+            if (done < 1) {
+                setTimeout(step, SCROLL_STEP_MS);
+                return;
+            }
+            this.scrollingToPage = false;
+            this.requestVisiblePages();
+        };
+        step();
+    }
     /**
      * The getters read the session's signals, so a host that asks between renders gets what is on
      * screen now. Built from a captured session rather than `this`, because `this` inside an object
@@ -1108,104 +1752,126 @@ class NxrReportViewerComponent {
             requestUrl: this.requestUrl(),
             properties: this.properties(),
             postParametersFunction: this.postParametersFunction(),
-            strings: NXR_ENGLISH,
+            strings: NXE_ENGLISH,
         };
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.5", ngImport: i0, type: NxrReportViewerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.5", type: NxrReportViewerComponent, isStandalone: true, selector: "nxr-report-viewer", inputs: { requestUrl: { classPropertyName: "requestUrl", publicName: "requestUrl", isSignal: true, isRequired: false, transformFunction: null }, action: { classPropertyName: "action", publicName: "action", isSignal: true, isRequired: false, transformFunction: null }, properties: { classPropertyName: "properties", publicName: "properties", isSignal: true, isRequired: false, transformFunction: null }, width: { classPropertyName: "width", publicName: "width", isSignal: true, isRequired: false, transformFunction: null }, height: { classPropertyName: "height", publicName: "height", isSignal: true, isRequired: false, transformFunction: null }, backgroundColor: { classPropertyName: "backgroundColor", publicName: "backgroundColor", isSignal: true, isRequired: false, transformFunction: null }, style: { classPropertyName: "style", publicName: "style", isSignal: true, isRequired: false, transformFunction: null }, postParametersFunction: { classPropertyName: "postParametersFunction", publicName: "postParametersFunction", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { loaded: "loaded", error: "error" }, providers: [NxrViewerClientService, NxrViewerSessionService], usesOnChanges: true, ngImport: i0, template: `
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.5", ngImport: i0, type: NxeReportViewerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.5", type: NxeReportViewerComponent, isStandalone: true, selector: "nxe-report-viewer", inputs: { requestUrl: { classPropertyName: "requestUrl", publicName: "requestUrl", isSignal: true, isRequired: false, transformFunction: null }, action: { classPropertyName: "action", publicName: "action", isSignal: true, isRequired: false, transformFunction: null }, properties: { classPropertyName: "properties", publicName: "properties", isSignal: true, isRequired: false, transformFunction: null }, width: { classPropertyName: "width", publicName: "width", isSignal: true, isRequired: false, transformFunction: null }, height: { classPropertyName: "height", publicName: "height", isSignal: true, isRequired: false, transformFunction: null }, backgroundColor: { classPropertyName: "backgroundColor", publicName: "backgroundColor", isSignal: true, isRequired: false, transformFunction: null }, style: { classPropertyName: "style", publicName: "style", isSignal: true, isRequired: false, transformFunction: null }, postParametersFunction: { classPropertyName: "postParametersFunction", publicName: "postParametersFunction", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { loaded: "loaded", error: "error" }, host: { listeners: { "window:resize": "onWindowResize()" } }, providers: [NxeViewerClientService, NxeViewerSessionService], viewQueries: [{ propertyName: "pagesBox", first: true, predicate: ["pagesBox"], descendants: true, isSignal: true }, { propertyName: "rootBox", first: true, predicate: ["rootBox"], descendants: true, isSignal: true }], usesOnChanges: true, ngImport: i0, template: `
     <div
-      class="nxr-viewer-root"
+      #rootBox
+      class="nxe-viewer-root"
       [style]="style()"
       [style.background-color]="rootBackgroundColor()"
       [style.width]="rootWidth()"
       [style.height]="rootHeight()"
     >
       @if (toolbarVisible()) {
-        <nxr-viewer-toolbar
+        <nxe-viewer-toolbar
           [options]="session.options()"
           [pageIndex]="session.pageIndex()"
           [pageCount]="session.pageCount()"
           [busy]="session.busy()"
-          (goToPage)="session.goToPage($event)"
+          [viewMode]="viewMode()"
+          [zoom]="zoom()"
+          (goToPage)="navigateTo($event)"
+          (viewModeChange)="setViewMode($event)"
+          (zoomChange)="setZoom($event)"
+          (fitRequest)="fitTo($event)"
+          (saveRequest)="session.exportTo($event)"
         />
       }
 
       <div
-        class="nxr-viewer-pages"
+        #pagesBox
+        class="nxe-viewer-pages"
+        [class.nxe-viewer-continuous]="viewMode() === 'Continuous'"
         [style.text-align]="pageAlignment()"
         [style.overflow]="pagesOverflow()"
+        (scroll)="onScroll()"
       >
-        @if (session.shownPage(); as page) {
-          <nxr-report-page
-            class="nxr-viewer-page"
-            [class.nxr-viewer-page-shadow]="showPageShadow()"
+        @for (page of shownPages(); track page.index) {
+          <nxe-report-page
+            class="nxe-viewer-page"
+            [class.nxe-viewer-page-shadow]="showPageShadow()"
             [style.border]="pageBorder()"
             [page]="page.size"
             [html]="page.html"
             [css]="pageCss()"
+            [zoom]="zoom()"
           />
         }
       </div>
 
       @if (session.failure(); as failure) {
-        <div class="nxr-viewer-failure" role="alert">
-          <span class="nxr-viewer-failure-text">{{ failure.message }}</span>
-          <button type="button" class="nxr-viewer-failure-close" (click)="session.dismissFailure()">
+        <div class="nxe-viewer-failure" role="alert">
+          <span class="nxe-viewer-failure-text">{{ failure.message }}</span>
+          <button type="button" class="nxe-viewer-failure-close" (click)="session.dismissFailure()">
             &times;
           </button>
         </div>
       }
     </div>
-  `, isInline: true, styles: [":host{display:inline-block;position:relative}.nxr-viewer-root{display:flex;flex-direction:column;box-sizing:border-box;position:relative}.nxr-viewer-pages{flex:1 1 auto;min-height:0;padding:10px;box-sizing:border-box}.nxr-viewer-page{display:inline-block;vertical-align:top}.nxr-viewer-page-shadow{box-shadow:2px 2px 6px #0000004d}.nxr-viewer-failure{position:absolute;left:0;right:0;bottom:0;display:flex;align-items:center;gap:8px;padding:8px 12px;background:#fdecea;color:#611a15;font-size:13px}.nxr-viewer-failure-text{flex:1 1 auto}.nxr-viewer-failure-close{border:0;background:transparent;color:inherit;font-size:18px;line-height:1;cursor:pointer}\n"], dependencies: [{ kind: "component", type: NxrReportPageComponent, selector: "nxr-report-page", inputs: ["page", "html", "css"] }, { kind: "component", type: NxrViewerToolbarComponent, selector: "nxr-viewer-toolbar", inputs: ["options", "pageIndex", "pageCount", "busy", "strings"], outputs: ["goToPage"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+  `, isInline: true, styles: [":host{display:inline-block;position:relative}.nxe-viewer-root{display:flex;flex-direction:column;box-sizing:border-box;position:relative}.nxe-viewer-pages{flex:1 1 auto;min-height:0;box-sizing:border-box}.nxe-viewer-page{display:inline-block;vertical-align:top;margin:10px}.nxe-viewer-continuous .nxe-viewer-page{display:block;margin:10px auto}.nxe-viewer-page-shadow{box-shadow:2px 2px 6px #0000004d}.nxe-viewer-failure{position:absolute;left:0;right:0;bottom:0;display:flex;align-items:center;gap:8px;padding:8px 12px;background:#fdecea;color:#611a15;font-size:13px}.nxe-viewer-failure-text{flex:1 1 auto}.nxe-viewer-failure-close{border:0;background:transparent;color:inherit;font-size:18px;line-height:1;cursor:pointer}\n"], dependencies: [{ kind: "component", type: NxeReportPageComponent, selector: "nxe-report-page", inputs: ["page", "html", "css", "zoom"] }, { kind: "component", type: NxeViewerToolbarComponent, selector: "nxe-viewer-toolbar", inputs: ["options", "pageIndex", "pageCount", "busy", "strings", "viewMode", "zoom"], outputs: ["goToPage", "viewModeChange", "zoomChange", "fitRequest", "saveRequest"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.5", ngImport: i0, type: NxrReportViewerComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.5", ngImport: i0, type: NxeReportViewerComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'nxr-report-viewer', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, imports: [NxrReportPageComponent, NxrViewerToolbarComponent], providers: [NxrViewerClientService, NxrViewerSessionService], template: `
+            args: [{ selector: 'nxe-report-viewer', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, imports: [NxeReportPageComponent, NxeViewerToolbarComponent], providers: [NxeViewerClientService, NxeViewerSessionService], host: { '(window:resize)': 'onWindowResize()' }, template: `
     <div
-      class="nxr-viewer-root"
+      #rootBox
+      class="nxe-viewer-root"
       [style]="style()"
       [style.background-color]="rootBackgroundColor()"
       [style.width]="rootWidth()"
       [style.height]="rootHeight()"
     >
       @if (toolbarVisible()) {
-        <nxr-viewer-toolbar
+        <nxe-viewer-toolbar
           [options]="session.options()"
           [pageIndex]="session.pageIndex()"
           [pageCount]="session.pageCount()"
           [busy]="session.busy()"
-          (goToPage)="session.goToPage($event)"
+          [viewMode]="viewMode()"
+          [zoom]="zoom()"
+          (goToPage)="navigateTo($event)"
+          (viewModeChange)="setViewMode($event)"
+          (zoomChange)="setZoom($event)"
+          (fitRequest)="fitTo($event)"
+          (saveRequest)="session.exportTo($event)"
         />
       }
 
       <div
-        class="nxr-viewer-pages"
+        #pagesBox
+        class="nxe-viewer-pages"
+        [class.nxe-viewer-continuous]="viewMode() === 'Continuous'"
         [style.text-align]="pageAlignment()"
         [style.overflow]="pagesOverflow()"
+        (scroll)="onScroll()"
       >
-        @if (session.shownPage(); as page) {
-          <nxr-report-page
-            class="nxr-viewer-page"
-            [class.nxr-viewer-page-shadow]="showPageShadow()"
+        @for (page of shownPages(); track page.index) {
+          <nxe-report-page
+            class="nxe-viewer-page"
+            [class.nxe-viewer-page-shadow]="showPageShadow()"
             [style.border]="pageBorder()"
             [page]="page.size"
             [html]="page.html"
             [css]="pageCss()"
+            [zoom]="zoom()"
           />
         }
       </div>
 
       @if (session.failure(); as failure) {
-        <div class="nxr-viewer-failure" role="alert">
-          <span class="nxr-viewer-failure-text">{{ failure.message }}</span>
-          <button type="button" class="nxr-viewer-failure-close" (click)="session.dismissFailure()">
+        <div class="nxe-viewer-failure" role="alert">
+          <span class="nxe-viewer-failure-text">{{ failure.message }}</span>
+          <button type="button" class="nxe-viewer-failure-close" (click)="session.dismissFailure()">
             &times;
           </button>
         </div>
       }
     </div>
-  `, styles: [":host{display:inline-block;position:relative}.nxr-viewer-root{display:flex;flex-direction:column;box-sizing:border-box;position:relative}.nxr-viewer-pages{flex:1 1 auto;min-height:0;padding:10px;box-sizing:border-box}.nxr-viewer-page{display:inline-block;vertical-align:top}.nxr-viewer-page-shadow{box-shadow:2px 2px 6px #0000004d}.nxr-viewer-failure{position:absolute;left:0;right:0;bottom:0;display:flex;align-items:center;gap:8px;padding:8px 12px;background:#fdecea;color:#611a15;font-size:13px}.nxr-viewer-failure-text{flex:1 1 auto}.nxr-viewer-failure-close{border:0;background:transparent;color:inherit;font-size:18px;line-height:1;cursor:pointer}\n"] }]
-        }], ctorParameters: () => [], propDecorators: { requestUrl: [{ type: i0.Input, args: [{ isSignal: true, alias: "requestUrl", required: false }] }], action: [{ type: i0.Input, args: [{ isSignal: true, alias: "action", required: false }] }], properties: [{ type: i0.Input, args: [{ isSignal: true, alias: "properties", required: false }] }], width: [{ type: i0.Input, args: [{ isSignal: true, alias: "width", required: false }] }], height: [{ type: i0.Input, args: [{ isSignal: true, alias: "height", required: false }] }], backgroundColor: [{ type: i0.Input, args: [{ isSignal: true, alias: "backgroundColor", required: false }] }], style: [{ type: i0.Input, args: [{ isSignal: true, alias: "style", required: false }] }], postParametersFunction: [{ type: i0.Input, args: [{ isSignal: true, alias: "postParametersFunction", required: false }] }], loaded: [{ type: i0.Output, args: ["loaded"] }], error: [{ type: i0.Output, args: ["error"] }] } });
+  `, styles: [":host{display:inline-block;position:relative}.nxe-viewer-root{display:flex;flex-direction:column;box-sizing:border-box;position:relative}.nxe-viewer-pages{flex:1 1 auto;min-height:0;box-sizing:border-box}.nxe-viewer-page{display:inline-block;vertical-align:top;margin:10px}.nxe-viewer-continuous .nxe-viewer-page{display:block;margin:10px auto}.nxe-viewer-page-shadow{box-shadow:2px 2px 6px #0000004d}.nxe-viewer-failure{position:absolute;left:0;right:0;bottom:0;display:flex;align-items:center;gap:8px;padding:8px 12px;background:#fdecea;color:#611a15;font-size:13px}.nxe-viewer-failure-text{flex:1 1 auto}.nxe-viewer-failure-close{border:0;background:transparent;color:inherit;font-size:18px;line-height:1;cursor:pointer}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { requestUrl: [{ type: i0.Input, args: [{ isSignal: true, alias: "requestUrl", required: false }] }], action: [{ type: i0.Input, args: [{ isSignal: true, alias: "action", required: false }] }], properties: [{ type: i0.Input, args: [{ isSignal: true, alias: "properties", required: false }] }], width: [{ type: i0.Input, args: [{ isSignal: true, alias: "width", required: false }] }], height: [{ type: i0.Input, args: [{ isSignal: true, alias: "height", required: false }] }], backgroundColor: [{ type: i0.Input, args: [{ isSignal: true, alias: "backgroundColor", required: false }] }], style: [{ type: i0.Input, args: [{ isSignal: true, alias: "style", required: false }] }], postParametersFunction: [{ type: i0.Input, args: [{ isSignal: true, alias: "postParametersFunction", required: false }] }], loaded: [{ type: i0.Output, args: ["loaded"] }], error: [{ type: i0.Output, args: ["error"] }], pagesBox: [{ type: i0.ViewChild, args: ['pagesBox', { isSignal: true }] }], rootBox: [{ type: i0.ViewChild, args: ['rootBox', { isSignal: true }] }] } });
 
 /*
  * Public API Surface of @nexterajs/report-viewer
@@ -1215,5 +1881,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.5", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { NXR_VIEWER_PROTOCOL, NxrReportViewerComponent };
+export { NXE_VIEWER_PROTOCOL, NxeReportViewerComponent };
 //# sourceMappingURL=nexterajs-report-viewer.mjs.map