@nexterajs/report-viewer 0.0.1 → 0.1.1

package/fesm2022/nexterajs-report-viewer.mjs

@@ -1,14 +1,334 @@
-import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
+import { takeUntilDestroyed, toObservable } 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, output, signal, viewChild, afterNextRender, ChangeDetectionStrategy, Component, computed, inject, DOCUMENT, ElementRef, Injectable, DestroyRef, linkedSignal } from '@angular/core';
+import { defer, map, catchError, from, switchMap, throwError, timeout, Subject, Subscription, finalize, interval, exhaustMap, EMPTY, distinctUntilChanged, skip } from 'rxjs';
 import { HttpErrorResponse, HttpClient } from '@angular/common/http';
-import { defer, map, catchError, from, switchMap, throwError, timeout, Subject, Subscription, finalize, interval, exhaustMap, EMPTY } from 'rxjs';
 
 /**
  * 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;
+
+/**
+ * Finding text in the pages on screen, as Stimulsoft 2025.1.4's viewer does
+ * (angular-viewer-panels-chrome.md §1.4-1.7), over each page's shadow root.
+ *
+ * A candidate is an element whose only child is a single text node; text split across elements is
+ * never found. The element's HTML is compared, lower-cased unless the case must match, by a plain
+ * substring test; a whole word needs no ASCII letter or digit on either side of the first occurrence.
+ * Each hit gets one label, however often the text occurs in it.
+ */
+/** The label every hit carries, and how the current one differs from the rest. */
+const LABEL_CLASS = 'nxe-find-label';
+const CURRENT_BORDER = 'red';
+const OTHER_BORDER = 'rgb(138, 138, 138)';
+/** The inline position a hit had before its label made it a positioning box, to put back afterwards. */
+const PREVIOUS_POSITION = 'nxeFindPosition';
+const WORD_CHARACTER = /[A-Za-z0-9]/;
+/** Every element in the roots, in document order, that holds the text. */
+function findHits(roots, text, match) {
+    const needle = match.matchCase ? text : text.toLowerCase();
+    const hits = [];
+    if (needle === '')
+        return hits;
+    for (const root of roots) {
+        for (const element of Array.from(root.querySelectorAll('*'))) {
+            if (element.childNodes.length !== 1 || element.firstChild?.nodeType !== 3)
+                continue;
+            const html = match.matchCase ? element.innerHTML : element.innerHTML.toLowerCase();
+            const at = html.indexOf(needle);
+            if (at < 0)
+                continue;
+            if (match.wholeWord && !standsAlone(html, at, needle.length))
+                continue;
+            hits.push(element);
+        }
+    }
+    return hits;
+}
+function standsAlone(html, at, length) {
+    const before = at > 0 ? html[at - 1] : '';
+    const after = html[at + length] ?? '';
+    return !WORD_CHARACTER.test(before) && !WORD_CHARACTER.test(after);
+}
+/**
+ * Labels each hit: a yellow box over the element, 60 % opaque so the text reads through it, with a
+ * 2 px border that is red on the current hit and grey on the rest, inserted as the element's first
+ * child and sized to it. The element becomes the label's positioning box; Stimulsoft makes it
+ * `relative` unless it is positioned already, and it is here unless its computed position is
+ * `static`, because this engine positions its page elements from the stylesheet.
+ */
+function labelHits(hits, current) {
+    hits.forEach((element, index) => {
+        const label = element.ownerDocument.createElement('div');
+        label.className = LABEL_CLASS;
+        Object.assign(label.style, {
+            position: 'absolute',
+            left: '0px',
+            top: '0px',
+            width: `${Math.max(0, element.offsetWidth - 4)}px`,
+            height: `${Math.max(0, element.offsetHeight - 4)}px`,
+            zIndex: '150',
+            opacity: '0.6',
+            borderRadius: '3px',
+            background: 'rgb(255, 255, 0)',
+            border: `2px solid ${index === current ? CURRENT_BORDER : OTHER_BORDER}`,
+            pointerEvents: 'none',
+        });
+        if (getComputedStyle(element).position === 'static') {
+            element.dataset[PREVIOUS_POSITION] = element.style.position;
+            element.style.position = 'relative';
+        }
+        element.insertBefore(label, element.firstChild);
+    });
+}
+/** Moves the current mark from one hit to another. */
+function markCurrent(hits, previous, current) {
+    const border = (index, color) => {
+        const label = hits[index]?.querySelector(`:scope > .${LABEL_CLASS}`);
+        if (label)
+            label.style.borderColor = color;
+    };
+    border(previous, OTHER_BORDER);
+    border(current, CURRENT_BORDER);
+}
+/** Removes every label from the roots, and gives back the position each hit had before it. */
+function clearHits(roots) {
+    for (const root of roots) {
+        for (const label of Array.from(root.querySelectorAll(`.${LABEL_CLASS}`))) {
+            const element = label.parentElement;
+            label.remove();
+            if (element && PREVIOUS_POSITION in element.dataset) {
+                element.style.position = element.dataset[PREVIOUS_POSITION] ?? '';
+                delete element.dataset[PREVIOUS_POSITION];
+            }
+        }
+    }
+}
+
+/**
+ * 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 `NxeViewerStrings` value wherever one is at hand.
+ */
+const NXE_ENGLISH = {
+    /** The label before the page-number box. */
+    Page: 'Page',
+    /** The label between the page-number box and the page count. */
+    PageOf: 'of',
+    FirstPage: 'First page',
+    PrevPage: 'Previous page',
+    NextPage: 'Next page',
+    LastPage: 'Last page',
+    /** The save button's caption and tooltip, and its menu items, captioned by the format they write. */
+    Save: 'Save',
+    SaveToolTip: 'Save',
+    formatPdf: 'Adobe PDF',
+    formatHtml: 'HTML',
+    /** The resources button's tooltip. */
+    Resources: 'Resources',
+    /** The find button's tooltip, and the find panel's captions. */
+    FindToolTip: 'Find',
+    FindWhat: 'Find What',
+    FindPrevious: 'Find Previous',
+    FindNext: 'Find Next',
+    MatchCase: 'Match Case',
+    MatchWholeWord: 'Match Whole Word',
+    closeFind: 'Close',
+    /** 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',
+    /** Fitting a whole page, which Stimulsoft's menu captions by the page's height. */
+    ZoomOnePage: 'Page Height',
+    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.',
+    errorMalformed: "The report server's answer to {0} is not one this viewer can read.",
+    errorProtocol: 'The report server speaks viewer protocol {0}, and this viewer speaks protocol {1}.',
+};
+/** Puts each value in place of its numbered placeholder: `{0}` is the first value. */
+function formatString(template, ...values) {
+    return template.replace(/\{(\d+)\}/g, (placeholder, index) => Number(index) < values.length ? String(values[Number(index)]) : placeholder);
+}
+
+/**
+ * The find panel, as Stimulsoft 2025.1.4 draws and runs it (angular-viewer-panels-chrome.md §1): a
+ * second bar below the toolbar with Close, the "Find What" box, Find Previous, Find Next, and the Match
+ * Case and Match Whole Word toggles, every item with a 2 px margin.
+ *
+ * It searches only on Enter in the box and on the two find buttons, never as the user types, and the
+ * toggles only change how the next search runs. It opens empty with the box focused, and has no
+ * tooltips. The viewer does the finding; this panel says what to find.
+ */
+class NxeViewerFindPanelComponent {
+    /** The captions to show. */
+    strings = input(NXE_ENGLISH, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "strings" }] : /* istanbul ignore next */ []));
+    /** A search the user asked for. */
+    search = output();
+    /** The user closed the panel. */
+    closed = output();
+    matchCase = signal(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "matchCase" }] : /* istanbul ignore next */ []));
+    wholeWord = signal(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "wholeWord" }] : /* istanbul ignore next */ []));
+    box = viewChild.required('box', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "box" }] : /* istanbul ignore next */ []));
+    constructor() {
+        // Stimulsoft focuses the box on the next tick after the panel opens.
+        afterNextRender(() => this.box().nativeElement.focus());
+    }
+    find(text, forward) {
+        this.search.emit({ text, forward, matchCase: this.matchCase(), wholeWord: this.wholeWord() });
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.5", ngImport: i0, type: NxeViewerFindPanelComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "22.1.5", type: NxeViewerFindPanelComponent, isStandalone: true, selector: "nxe-viewer-find-panel", inputs: { strings: { classPropertyName: "strings", publicName: "strings", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { search: "search", closed: "closed" }, host: { attributes: { "role": "search" }, classAttribute: "nxe-viewer-find-panel" }, viewQueries: [{ propertyName: "box", first: true, predicate: ["box"], descendants: true, isSignal: true }], ngImport: i0, template: `
+    <div class="nxe-find-bar">
+      <button
+        type="button"
+        class="nxe-find-button"
+        [attr.aria-label]="strings().closeFind"
+        (click)="closed.emit()"
+      >
+        <span class="nxe-find-icon">
+          <svg viewBox="0 0 16 16" aria-hidden="true">
+            <path d="M3.5 3.5l9 9m0-9-9 9" fill="none" stroke="#707070" stroke-width="1.2" />
+          </svg>
+        </span>
+      </button>
+      <span class="nxe-find-label">{{ strings().FindWhat }}</span>
+      <input
+        #box
+        type="text"
+        class="nxe-find-box"
+        [attr.aria-label]="strings().FindWhat"
+        (keydown.enter)="find(box.value, true)"
+      />
+      <button type="button" class="nxe-find-button" (click)="find(box.value, false)">
+        <span class="nxe-find-icon">
+          <svg viewBox="0 0 16 16" aria-hidden="true">
+            <path
+              d="M8 3.5 13 9h-3v3.5H6V9H3z"
+              fill="#81c1f1"
+              stroke="#0161b1"
+              stroke-linejoin="round"
+            />
+          </svg>
+        </span>
+        <span class="nxe-find-caption">{{ strings().FindPrevious }}</span>
+      </button>
+      <button type="button" class="nxe-find-button" (click)="find(box.value, true)">
+        <span class="nxe-find-icon">
+          <svg viewBox="0 0 16 16" aria-hidden="true">
+            <path
+              d="M8 12.5 13 7h-3V3.5H6V7H3z"
+              fill="#81c1f1"
+              stroke="#0161b1"
+              stroke-linejoin="round"
+            />
+          </svg>
+        </span>
+        <span class="nxe-find-caption">{{ strings().FindNext }}</span>
+      </button>
+      <button
+        type="button"
+        class="nxe-find-button"
+        [class.nxe-find-on]="matchCase()"
+        [attr.aria-pressed]="matchCase()"
+        (click)="matchCase.set(!matchCase())"
+      >
+        <span class="nxe-find-caption">{{ strings().MatchCase }}</span>
+      </button>
+      <button
+        type="button"
+        class="nxe-find-button"
+        [class.nxe-find-on]="wholeWord()"
+        [attr.aria-pressed]="wholeWord()"
+        (click)="wholeWord.set(!wholeWord())"
+      >
+        <span class="nxe-find-caption">{{ strings().MatchWholeWord }}</span>
+      </button>
+    </div>
+  `, isInline: true, styles: [":host{display:block;box-sizing:border-box;padding-top:2px;-webkit-user-select:none;user-select:none;font-family:Arial;font-size:12px;color:#202020}.nxe-find-bar{display:flex;align-items:center;box-sizing:border-box;height:31px;border:1px solid #c6c6c6;border-radius:3px;background:#fff;cursor:default}.nxe-find-button{display:inline-flex;align-items:center;box-sizing:border-box;height:25px;margin:2px;padding:0;border:1px solid transparent;border-radius:3px;background:transparent;color:inherit;font:inherit;white-space:nowrap;cursor:default}.nxe-find-button:hover{background:#dadada}.nxe-find-button.nxe-find-on{background:#e5e5e5}.nxe-find-icon{display:flex;flex:none;box-sizing:border-box;width:22px;padding-left:3px}.nxe-find-icon svg{width:16px;height:16px}.nxe-find-caption{padding:1px 5px 0 0}.nxe-find-label{margin:2px;padding:2px 0 0;white-space:nowrap}.nxe-find-box{box-sizing:content-box;width:170px;height:21px;margin:2px;padding:0 0 0 4px;border:1px solid #ababab;border-radius:3px;background:#fff;color:inherit;font:inherit;line-height:21px;outline:none}.nxe-find-box:hover{border-color:#6b6b6b}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.5", ngImport: i0, type: NxeViewerFindPanelComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'nxe-viewer-find-panel', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, host: { class: 'nxe-viewer-find-panel', role: 'search' }, template: `
+    <div class="nxe-find-bar">
+      <button
+        type="button"
+        class="nxe-find-button"
+        [attr.aria-label]="strings().closeFind"
+        (click)="closed.emit()"
+      >
+        <span class="nxe-find-icon">
+          <svg viewBox="0 0 16 16" aria-hidden="true">
+            <path d="M3.5 3.5l9 9m0-9-9 9" fill="none" stroke="#707070" stroke-width="1.2" />
+          </svg>
+        </span>
+      </button>
+      <span class="nxe-find-label">{{ strings().FindWhat }}</span>
+      <input
+        #box
+        type="text"
+        class="nxe-find-box"
+        [attr.aria-label]="strings().FindWhat"
+        (keydown.enter)="find(box.value, true)"
+      />
+      <button type="button" class="nxe-find-button" (click)="find(box.value, false)">
+        <span class="nxe-find-icon">
+          <svg viewBox="0 0 16 16" aria-hidden="true">
+            <path
+              d="M8 3.5 13 9h-3v3.5H6V9H3z"
+              fill="#81c1f1"
+              stroke="#0161b1"
+              stroke-linejoin="round"
+            />
+          </svg>
+        </span>
+        <span class="nxe-find-caption">{{ strings().FindPrevious }}</span>
+      </button>
+      <button type="button" class="nxe-find-button" (click)="find(box.value, true)">
+        <span class="nxe-find-icon">
+          <svg viewBox="0 0 16 16" aria-hidden="true">
+            <path
+              d="M8 12.5 13 7h-3V3.5H6V7H3z"
+              fill="#81c1f1"
+              stroke="#0161b1"
+              stroke-linejoin="round"
+            />
+          </svg>
+        </span>
+        <span class="nxe-find-caption">{{ strings().FindNext }}</span>
+      </button>
+      <button
+        type="button"
+        class="nxe-find-button"
+        [class.nxe-find-on]="matchCase()"
+        [attr.aria-pressed]="matchCase()"
+        (click)="matchCase.set(!matchCase())"
+      >
+        <span class="nxe-find-caption">{{ strings().MatchCase }}</span>
+      </button>
+      <button
+        type="button"
+        class="nxe-find-button"
+        [class.nxe-find-on]="wholeWord()"
+        [attr.aria-pressed]="wholeWord()"
+        (click)="wholeWord.set(!wholeWord())"
+      >
+        <span class="nxe-find-caption">{{ strings().MatchWholeWord }}</span>
+      </button>
+    </div>
+  `, styles: [":host{display:block;box-sizing:border-box;padding-top:2px;-webkit-user-select:none;user-select:none;font-family:Arial;font-size:12px;color:#202020}.nxe-find-bar{display:flex;align-items:center;box-sizing:border-box;height:31px;border:1px solid #c6c6c6;border-radius:3px;background:#fff;cursor:default}.nxe-find-button{display:inline-flex;align-items:center;box-sizing:border-box;height:25px;margin:2px;padding:0;border:1px solid transparent;border-radius:3px;background:transparent;color:inherit;font:inherit;white-space:nowrap;cursor:default}.nxe-find-button:hover{background:#dadada}.nxe-find-button.nxe-find-on{background:#e5e5e5}.nxe-find-icon{display:flex;flex:none;box-sizing:border-box;width:22px;padding-left:3px}.nxe-find-icon svg{width:16px;height:16px}.nxe-find-caption{padding:1px 5px 0 0}.nxe-find-label{margin:2px;padding:2px 0 0;white-space:nowrap}.nxe-find-box{box-sizing:content-box;width:170px;height:21px;margin:2px;padding:0 0 0 4px;border:1px solid #ababab;border-radius:3px;background:#fff;color:inherit;font:inherit;line-height:21px;outline:none}.nxe-find-box:hover{border-color:#6b6b6b}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { strings: [{ type: i0.Input, args: [{ isSignal: true, alias: "strings", required: false }] }], search: [{ type: i0.Output, args: ["search"] }], closed: [{ type: i0.Output, args: ["closed"] }], box: [{ type: i0.ViewChild, args: ['box', { isSignal: true }] }] } });
 
 /**
  * Page HTML from the server, made safe to place in the application's document.
@@ -137,8 +457,22 @@ 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;}';
+/** CSS pixels per point, and the share of its height Stimulsoft's viewer gives a page. */
+const PX_PER_PT = 96 / 72;
+const VIEWER_HEIGHT = 239 / 240;
+/**
+ * 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 +481,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 +491,26 @@ 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 */ []));
+    /**
+     * The page's box in CSS pixels, as the server's page HTML draws it and Stimulsoft's viewer sizes a
+     * page: floor(W) wide and floor(H x 239/240) tall, 796 x 1118 for A4 (renderer-html's
+     * viewer-page.ts). Known from the page's size alone, so the frame holds its place before the HTML
+     * arrives, and scaled by the zoom.
+     */
+    scaledWidth = computed(() => Math.floor(this.page().widthPoints * PX_PER_PT + 1e-9) * this.zoom(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "scaledWidth" }] : /* istanbul ignore next */ []));
+    scaledHeight = computed(() => Math.floor(this.page().heightPoints * PX_PER_PT * VIEWER_HEIGHT + 1e-9) * 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,68 +522,42 @@ 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.px": "scaledWidth()", "style.height.px": "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.px]': 'scaledWidth()',
+                        '[style.height.px]': '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 }] }] } });
-
-/**
- * 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.
- */
-const NXR_ENGLISH = {
-    /** The label before the page-number box. */
-    Page: 'Page',
-    /** The label between the page-number box and the page count. */
-    PageOf: 'of',
-    FirstPage: 'First page',
-    PrevPage: 'Previous page',
-    NextPage: 'Next page',
-    LastPage: 'Last page',
-    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.',
-    errorMalformed: "The report server's answer to {0} is not one this viewer can read.",
-    errorProtocol: 'The report server speaks viewer protocol {0}, and this viewer speaks protocol {1}.',
-};
-/** Puts each value in place of its numbered placeholder: `{0}` is the first value. */
-function formatString(template, ...values) {
-    return template.replace(/\{(\d+)\}/g, (placeholder, index) => Number(index) < values.length ? String(values[Number(index)]) : placeholder);
-}
+        }], 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 }] }] } });
 
 /**
  * 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 +600,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 +630,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 +639,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 +666,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 +689,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 +704,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 +750,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 +794,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 +837,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 +912,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 +979,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 +1078,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,30 +1097,37 @@ 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.
+ * The toolbar, as Stimulsoft 2025.1.4 draws it in its default theme, Office2022WhiteBlue.
+ *
+ * The items and the rules for each are Stimulsoft's (angular-viewer-toolbar-view.md §1): Save and
+ * Resources, Find, the page navigation and the page control, then Zoom and View mode, each group
+ * opened by a separator whose condition is the group's own. Buttons for what this viewer does not do
+ * yet — Print, Open, Send Email, Bookmarks, Parameters, Editor, Full Screen — are left out; bright and
+ * orbit turn all of them off.
  *
- * Stimulsoft's toolbar is a long list of groups; this is the navigation group of it, which is what
- * a report viewer cannot do without: first, previous, the page control, next, last. Each button
- * appears only when its `toolbar.show…Button` option is on, and the group is laid out where
- * `toolbar.alignment` says. The other groups — save, print, find, bookmarks, zoom, view mode —
- * arrive with the tasks that implement them.
+ * The look was measured on Stimulsoft's own viewer, side by side with this one: a 31 px bar with a 1 px
+ * #c6c6c6 border and 3 px corners, 12 px Arial in #202020; 24 x 25 buttons with a transparent 1 px
+ * border, #dadada under the mouse or while their menu is open, #e5e5e5 while selected, and a half
+ * transparent icon when disabled; 1 x 21 separators in #d4d4d4; menus with a 1 px #ababab border, a
+ * 7 px shadow and 24 px items. The icons are this package's own drawings in the same colours.
  *
  * Navigation is disabled the way Stimulsoft disables it: in `MultiplePages`, and in `Continuous`
- * unless the report panel or the whole viewer scrolls. A button is disabled at the end of the
- * report it would move past, and everything is disabled while a request the user waits for is on
- * its way.
+ * unless the report panel or the whole viewer scrolls. A button is disabled at the end of the 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 +1141,70 @@ 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 */ []));
+    /** Whether the find panel is open, which Stimulsoft's Find button shows as its selected state. */
+    findOpen = input(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "findOpen" }] : /* istanbul ignore next */ []));
     /** The 0-based page the user asked for. */
     goToPage = output();
-    pageBoxWidth = PAGE_BOX_WIDTH_PX;
+    /** 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();
+    /** The user pressed Find, which opens the find panel or closes it. */
+    findToggle = output();
+    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 */ []));
+    /** The caption Stimulsoft's save menu gives a format. */
+    formatCaption(format) {
+        return format === 'Pdf' ? this.strings().formatPdf : this.strings().formatHtml;
+    }
+    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 */
@@ -781,6 +1225,13 @@ class NxrViewerToolbarComponent {
             !appearance.fullScreenMode);
     }, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "navigationDisabled" }] : /* istanbul ignore next */ []));
+    /** Save, Zoom and View mode show their captions unless the server turns captions off. */
+    showCaptions = computed(() => this.toolbar()?.showButtonCaptions !== false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "showCaptions" }] : /* istanbul ignore next */ []));
+    showResources = computed(() => this.toolbar()?.showResourcesButton === true, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "showResources" }] : /* istanbul ignore next */ []));
+    showFind = computed(() => this.toolbar()?.showFindButton === true, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "showFind" }] : /* istanbul ignore next */ []));
     showFirstPage = computed(() => this.toolbar()?.showFirstPageButton === true, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "showFirstPage" }] : /* istanbul ignore next */ []));
     showPreviousPage = computed(() => this.toolbar()?.showPreviousPageButton === true, /* @ts-ignore */
@@ -791,6 +1242,46 @@ 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 */ []));
+    /**
+     * Stimulsoft opens the panels group — Bookmarks, Parameters, Resources — only when Bookmarks or
+     * Parameters is on; Resources alone follows Save with no separator, as bright and orbit show it.
+     */
+    showPanelsSeparator = computed(() => this.toolbar()?.showBookmarksButton === true || this.toolbar()?.showParametersButton === true, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "showPanelsSeparator" }] : /* istanbul ignore next */ []));
+    /** Stimulsoft opens the Find group whenever Find or Editor is on, whatever comes before it. */
+    showFindSeparator = computed(() => this.toolbar()?.showFindButton === true || this.toolbar()?.showEditorButton === true, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "showFindSeparator" }] : /* istanbul ignore next */ []));
+    /** And the navigation group whenever any of its five items is on. */
+    showNavigationSeparator = computed(() => this.showFirstPage() ||
+        this.showPreviousPage() ||
+        this.showCurrentPage() ||
+        this.showNextPage() ||
+        this.showLastPage(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "showNavigationSeparator" }] : /* 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 */
@@ -803,12 +1294,17 @@ class NxrViewerToolbarComponent {
     ...(ngDevMode ? [{ debugName: "fontColor" }] : /* istanbul ignore next */ []));
     fontFamily = computed(() => this.toolbar()?.fontFamily || null, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "fontFamily" }] : /* istanbul ignore next */ []));
-    /** A border only in `Simple`; `Separated` has none, as Stimulsoft's toolbar does. */
+    /**
+     * The server's border colour in `Simple`, and none at all in `Separated`, as Stimulsoft's toolbar
+     * does; without a colour the theme's own border stays.
+     */
     border = computed(() => {
         const toolbar = this.toolbar();
-        if (!toolbar || toolbar.displayMode === 'Separated' || !toolbar.borderColor)
+        if (!toolbar)
             return null;
-        return `1px solid ${toolbar.borderColor}`;
+        if (toolbar.displayMode === 'Separated')
+            return '0';
+        return toolbar.borderColor ? `1px solid ${toolbar.borderColor}` : null;
     }, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "border" }] : /* istanbul ignore next */ []));
     justifyContent = computed(() => {
@@ -838,153 +1334,614 @@ 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: `
-    @if (showFirstPage()) {
-      <button
-        type="button"
-        class="nxr-toolbar-button"
-        [disabled]="atStart()"
-        [attr.aria-label]="strings().FirstPage"
-        (click)="goTo(0)"
-      >
-        <svg viewBox="0 0 16 16" aria-hidden="true">
-          <path d="M12.5 3v10L6 8zM4.5 3h1.2v10H4.5z" />
-        </svg>
-      </button>
-    }
-    @if (showPreviousPage()) {
-      <button
-        type="button"
-        class="nxr-toolbar-button"
-        [disabled]="atStart()"
-        [attr.aria-label]="strings().PrevPage"
-        (click)="goTo(pageIndex() - 1)"
-      >
-        <svg viewBox="0 0 16 16" aria-hidden="true"><path d="M11 3v10L4.5 8z" /></svg>
-      </button>
-    }
-    @if (showCurrentPage()) {
-      <span class="nxr-page-control">
-        <span class="nxr-page-label">{{ strings().Page }}</span>
-        <input
-          type="text"
-          inputmode="numeric"
-          class="nxr-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>
-    }
-    @if (showNextPage()) {
-      <button
-        type="button"
-        class="nxr-toolbar-button"
-        [disabled]="atEnd()"
-        [attr.aria-label]="strings().NextPage"
-        (click)="goTo(pageIndex() + 1)"
-      >
-        <svg viewBox="0 0 16 16" aria-hidden="true"><path d="M5 3v10l6.5-5z" /></svg>
-      </button>
-    }
-    @if (showLastPage()) {
-      <button
-        type="button"
-        class="nxr-toolbar-button"
-        [disabled]="atEnd()"
-        [attr.aria-label]="strings().LastPage"
-        (click)="goTo(pageCount() - 1)"
-      >
-        <svg viewBox="0 0 16 16" aria-hidden="true">
-          <path d="M3.5 3v10L10 8zM10.3 3h1.2v10h-1.2z" />
-        </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 });
+    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 }, findOpen: { classPropertyName: "findOpen", publicName: "findOpen", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { goToPage: "goToPage", viewModeChange: "viewModeChange", zoomChange: "zoomChange", fitRequest: "fitRequest", saveRequest: "saveRequest", findToggle: "findToggle" }, host: { attributes: { "role": "toolbar" }, properties: { "style.color": "fontColor()", "style.font-family": "fontFamily()", "class.nxe-busy": "busy()" }, classAttribute: "nxe-viewer-toolbar" }, ngImport: i0, template: `
+    <div
+      class="nxe-toolbar-bar"
+      [style.background-color]="backgroundColor()"
+      [style.border]="border()"
+      [style.justify-content]="justifyContent()"
+    >
+      @if (showSave()) {
+        <div class="nxe-toolbar-menu">
+          <button
+            type="button"
+            class="nxe-toolbar-button"
+            [attr.aria-label]="strings().SaveToolTip"
+            [attr.aria-expanded]="openMenu() === 'save'"
+            (click)="toggleMenu('save')"
+          >
+            <span class="nxe-toolbar-icon">
+              <svg viewBox="0 0 16 16" aria-hidden="true">
+                <path d="M1.5 1.5h13v13h-13z" fill="#d890d8" stroke="#903098" />
+                <path d="M4.5 1.5h7v4.5h-7z" fill="#fff" stroke="#903098" />
+                <path d="M3.5 9.5h9v5h-9z" fill="#fff" stroke="#903098" />
+              </svg>
+            </span>
+            @if (showCaptions()) {
+              <span class="nxe-toolbar-caption">{{ strings().Save }}</span>
+            }
+            <span class="nxe-toolbar-arrow">
+              <svg viewBox="0 0 8 8" aria-hidden="true">
+                <path d="M1.5 2.5 4 5l2.5-2.5" fill="none" stroke="#787878" />
+              </svg>
+            </span>
+          </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.5.5h7l3 3v12h-10z" fill="#fff" stroke="#6e6e6e" />
+                      <path d="M10.5.5v3h3" fill="none" stroke="#6e6e6e" />
+                      @if (format === 'Pdf') {
+                        <path d="M.5 6.5h11v5H.5z" fill="#f6d0d0" stroke="#d83b3b" />
+                        <text x="6" y="10.4" fill="#d83b3b" font-family="Arial" font-size="4.2" font-weight="bold" text-anchor="middle">PDF</text>
+                      } @else {
+                        <path d="M.5 6.5h13v5H.5z" fill="#d6e9f8" stroke="#2088d0" />
+                        <text x="7" y="10.4" fill="#2088d0" font-family="Arial" font-size="4" font-weight="bold" text-anchor="middle">HTML</text>
+                      }
+                    </svg>
+                  </span>
+                  <span class="nxe-toolbar-item-text">{{ formatCaption(format) }}</span>
+                </button>
+              }
+            </div>
+          }
+        </div>
+      }
+      @if (showPanelsSeparator()) {
+        <span class="nxe-toolbar-separator"></span>
+      }
+      @if (showResources()) {
+        <!-- A report's resources are not served yet, so there are none to show: Stimulsoft disables the button then. -->
+        <button type="button" class="nxe-toolbar-button" disabled [attr.aria-label]="strings().Resources">
+          <span class="nxe-toolbar-icon">
+            <svg viewBox="0 0 16 16" aria-hidden="true" fill="none" stroke="#313131">
+              <path d="M6.5 1.5h5l3 3v8h-8z" fill="#fff" />
+              <path d="M11.5 1.5v3h3" />
+              <path d="M1.5 4.5h5v10h-5z" fill="#fff" />
+              <path d="M2.5 7.5h3m-3 2h3m-3 2h3" stroke="#717171" />
+            </svg>
+          </span>
+        </button>
+      }
+      @if (showFindSeparator()) {
+        <span class="nxe-toolbar-separator"></span>
+      }
+      @if (showFind()) {
+        <button
+          type="button"
+          class="nxe-toolbar-button"
+          [class.nxe-toolbar-selected]="findOpen()"
+          [attr.aria-label]="strings().FindToolTip"
+          [attr.aria-pressed]="findOpen()"
+          (click)="findToggle.emit()"
+        >
+          <span class="nxe-toolbar-icon">
+            <svg viewBox="0 0 16 16" aria-hidden="true" fill="none" stroke="#383838">
+              <circle cx="9.5" cy="6.5" r="4.4" stroke-width="1.4" />
+              <path d="M6.4 9.6 2 14" stroke-width="2" stroke-linecap="round" />
+            </svg>
+          </span>
+        </button>
+      }
+      @if (showNavigationSeparator()) {
+        <span class="nxe-toolbar-separator"></span>
+      }
+      @if (showFirstPage()) {
+        <button
+          type="button"
+          class="nxe-toolbar-button"
+          [disabled]="atStart()"
+          [attr.aria-label]="strings().FirstPage"
+          (click)="goTo(0)"
+        >
+          <span class="nxe-toolbar-icon">
+            <svg viewBox="0 0 16 16" aria-hidden="true" fill="#81c1f1" stroke="#0161b1" stroke-linejoin="round">
+              <path d="M3.5 2.5h2v11h-2z" />
+              <path d="M12.5 2.5v11l-6-5.5z" />
+            </svg>
+          </span>
+        </button>
+      }
+      @if (showPreviousPage()) {
+        <button
+          type="button"
+          class="nxe-toolbar-button"
+          [disabled]="atStart()"
+          [attr.aria-label]="strings().PrevPage"
+          (click)="goTo(pageIndex() - 1)"
+        >
+          <span class="nxe-toolbar-icon">
+            <svg viewBox="0 0 16 16" aria-hidden="true" fill="#81c1f1" stroke="#0161b1" stroke-linejoin="round">
+              <path d="M10.5 2.5v11l-6-5.5z" />
+            </svg>
+          </span>
+        </button>
+      }
+      @if (showCurrentPage()) {
+        <span class="nxe-page-control">
+          <span class="nxe-page-label">{{ strings().Page }}</span>
+          <span class="nxe-page-box-cell" [class.nxe-page-box-off]="pageControlDisabled()">
+            <input
+              type="text"
+              inputmode="numeric"
+              class="nxe-page-box"
+              [disabled]="pageControlDisabled()"
+              [value]="pageIndex() + 1"
+              [attr.aria-label]="strings().Page"
+              (keydown.enter)="enterPage($event)"
+            />
+          </span>
+          <span class="nxe-page-label">{{ strings().PageOf }}</span>
+          <span class="nxe-page-label">{{ pageCount() }}</span>
+        </span>
+      }
+      @if (showNextPage()) {
+        <button
+          type="button"
+          class="nxe-toolbar-button"
+          [disabled]="atEnd()"
+          [attr.aria-label]="strings().NextPage"
+          (click)="goTo(pageIndex() + 1)"
+        >
+          <span class="nxe-toolbar-icon">
+            <svg viewBox="0 0 16 16" aria-hidden="true" fill="#81c1f1" stroke="#0161b1" stroke-linejoin="round">
+              <path d="M5.5 2.5v11l6-5.5z" />
+            </svg>
+          </span>
+        </button>
+      }
+      @if (showLastPage()) {
+        <button
+          type="button"
+          class="nxe-toolbar-button"
+          [disabled]="atEnd()"
+          [attr.aria-label]="strings().LastPage"
+          (click)="goTo(pageCount() - 1)"
+        >
+          <span class="nxe-toolbar-icon">
+            <svg viewBox="0 0 16 16" aria-hidden="true" fill="#81c1f1" stroke="#0161b1" stroke-linejoin="round">
+              <path d="M3.5 2.5v11l6-5.5z" />
+              <path d="M10.5 2.5h2v11h-2z" />
+            </svg>
+          </span>
+        </button>
+      }
+      @if (showZoom() || showViewMode()) {
+        <span class="nxe-toolbar-separator"></span>
+      }
+      @if (showZoom()) {
+        <div class="nxe-toolbar-menu">
+          <button
+            type="button"
+            class="nxe-toolbar-button"
+            [attr.aria-label]="strings().ZoomToolTip"
+            [attr.aria-expanded]="openMenu() === 'zoom'"
+            (click)="toggleMenu('zoom')"
+          >
+            <span class="nxe-toolbar-icon">
+              <svg viewBox="0 0 16 16" aria-hidden="true" fill="none">
+                <path d="M2.5 1.5h6l3 3v5M8.5 1.5v3h3M2.5 1.5v13h7" stroke="#383838" />
+                <circle cx="11.5" cy="11.5" r="2" stroke="#2088d0" />
+                <path d="m13 13 1.8 1.8" stroke="#2088d0" />
+              </svg>
+            </span>
+            @if (showCaptions()) {
+              <span class="nxe-toolbar-caption">{{ zoomCaption() }}</span>
+            }
+            <span class="nxe-toolbar-arrow">
+              <svg viewBox="0 0 8 8" aria-hidden="true">
+                <path d="M1.5 2.5 4 5l2.5-2.5" fill="none" stroke="#787878" />
+              </svg>
+            </span>
+          </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>
+                  <span class="nxe-toolbar-item-text">{{ percent }}%</span>
+                </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" fill="none">
+                    <path d="M3.5 1.5h9v13h-9z" fill="#fff" stroke="#383838" />
+                    <path d="M8 3.5v9M6 5.5l2-2 2 2M6 10.5l2 2 2-2" stroke="#2088d0" />
+                  </svg>
+                </span>
+                <span class="nxe-toolbar-item-text">{{ strings().ZoomOnePage }}</span>
+              </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" fill="none">
+                    <path d="M1.5 3.5h13v9h-13z" fill="#fff" stroke="#383838" />
+                    <path d="M3.5 8h9M5.5 6l-2 2 2 2M10.5 6l2 2-2 2" stroke="#2088d0" />
+                  </svg>
+                </span>
+                <span class="nxe-toolbar-item-text">{{ strings().ZoomPageWidth }}</span>
+              </button>
+            </div>
+          }
+        </div>
+      }
+      @if (showViewMode()) {
+        <div class="nxe-toolbar-menu">
+          <button
+            type="button"
+            class="nxe-toolbar-button"
+            [attr.aria-label]="strings().ViewModeToolTip"
+            [attr.aria-expanded]="openMenu() === 'viewMode'"
+            (click)="toggleMenu('viewMode')"
+          >
+            <!-- Stimulsoft's button keeps the single-page icon whatever the mode. -->
+            <span class="nxe-toolbar-icon">
+              <svg viewBox="0 0 16 16" aria-hidden="true">
+                <path d="M2.5 1.5h11v13h-11z" fill="#fff" stroke="#383838" />
+              </svg>
+            </span>
+            @if (showCaptions()) {
+              <span class="nxe-toolbar-caption">{{ strings()[viewMode()] }}</span>
+            }
+            <span class="nxe-toolbar-arrow">
+              <svg viewBox="0 0 8 8" aria-hidden="true">
+                <path d="M1.5 2.5 4 5l2.5-2.5" fill="none" stroke="#787878" />
+              </svg>
+            </span>
+          </button>
+          @if (openMenu() === 'viewMode') {
+            <!-- Stimulsoft marks no item here as the current one, unlike the zoom menu. -->
+            <div class="nxe-toolbar-popup" role="menu">
+              @for (mode of viewModes; track mode) {
+                <button type="button" class="nxe-toolbar-item" role="menuitem" (click)="chooseViewMode(mode)">
+                  <span class="nxe-toolbar-item-icon">
+                    <svg viewBox="0 0 16 16" aria-hidden="true" fill="#fff" stroke="#383838">
+                      @switch (mode) {
+                        @case ('SinglePage') {
+                          <path d="M2.5 1.5h11v13h-11z" />
+                        }
+                        @case ('Continuous') {
+                          <path d="M2.5 1.5h11v4h-11zm0 6h11v7h-11z" />
+                        }
+                        @case ('MultiplePages') {
+                          <path d="M2.5 2.5h5v5h-5zm6 0h5v5h-5zm-6 6h5v5h-5zm6 0h5v5h-5z" />
+                        }
+                      }
+                    </svg>
+                  </span>
+                  <span class="nxe-toolbar-item-text">{{ strings()[mode] }}</span>
+                </button>
+              }
+            </div>
+          }
+        </div>
+      }
+    </div>
+  `, isInline: true, styles: [":host{display:block;box-sizing:border-box;padding-top:2px;position:relative;-webkit-user-select:none;user-select:none;font-family:Arial;font-size:12px;color:#202020}:host(.nxe-busy):after{content:\"\";position:absolute;inset:0;cursor:default}.nxe-toolbar-bar{display:flex;align-items:center;box-sizing:border-box;height:31px;padding:1px;border:1px solid #c6c6c6;border-radius:3px;background:#fff;cursor:default}.nxe-toolbar-button{display:inline-flex;align-items:center;box-sizing:border-box;height:25px;margin:1px;padding:0;border:1px solid transparent;border-radius:3px;background:transparent;color:inherit;font:inherit;white-space:nowrap;cursor:default}.nxe-toolbar-button:hover:not(:disabled),.nxe-toolbar-button[aria-expanded=true]{background:#dadada}.nxe-toolbar-button.nxe-toolbar-selected{background:#e5e5e5}.nxe-toolbar-button:disabled{color:#d6d3d6}.nxe-toolbar-button:disabled svg{opacity:.5}.nxe-toolbar-icon{display:flex;flex:none;box-sizing:border-box;width:22px;padding-left:3px}.nxe-toolbar-icon svg{width:16px;height:16px}.nxe-toolbar-arrow{display:flex;flex:none;justify-content:center;width:18px}.nxe-toolbar-arrow svg{width:8px;height:8px}.nxe-toolbar-separator{flex:none;width:1px;height:21px;background:#d4d4d4}.nxe-page-control{display:inline-flex;align-items:center;height:23px;margin:0 1px;white-space:nowrap}.nxe-page-label,.nxe-page-box-cell{padding:0 2px}.nxe-page-box-cell{display:flex}.nxe-page-box{box-sizing:border-box;width:51px;height:23px;margin:0;padding:0 0 0 4px;border:1px solid #ababab;border-radius:3px;background:#fff;color:inherit;font:inherit;line-height:21px;text-align:left;outline:none}.nxe-page-box:hover:not(:disabled){border-color:#6b6b6b}.nxe-page-box:disabled{border-color:#e1e1e1;background:#f7f7f7;color:inherit;-webkit-text-fill-color:currentColor;opacity:1}.nxe-page-box-off{opacity:.5}.nxe-toolbar-menu{position:relative;display:flex;align-items:center}.nxe-toolbar-popup{position:absolute;top:100%;left:0;z-index:10;display:flex;flex-direction:column;gap:1px;box-sizing:border-box;padding:1px;border:1px solid #ababab;border-radius:3px;background:#fff;box-shadow:0 0 7px #0000004d}.nxe-toolbar-item{display:flex;align-items:center;flex:none;box-sizing:border-box;height:24px;margin:0 1px;padding:0;border:0;border-radius:3px;background:transparent;color:#202020;font:inherit;text-align:left;white-space:nowrap;cursor:default}.nxe-toolbar-item:first-child{margin-top:1px}.nxe-toolbar-item:last-child{margin-bottom:1px}.nxe-toolbar-item-on{background:#e5e5e5}.nxe-toolbar-item:hover{background:#dadada}.nxe-toolbar-item-icon{display:flex;flex:none;box-sizing:border-box;width:22px;padding-left:3px}.nxe-toolbar-item-icon svg{width:16px;height:16px}.nxe-toolbar-item-text{padding:0 20px 0 7px}.nxe-toolbar-item-separator{flex:none;height:1px;margin:0 2px 0 30px;background:#d4d4d4}\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()',
-                    }, template: `
-    @if (showFirstPage()) {
-      <button
-        type="button"
-        class="nxr-toolbar-button"
-        [disabled]="atStart()"
-        [attr.aria-label]="strings().FirstPage"
-        (click)="goTo(0)"
-      >
-        <svg viewBox="0 0 16 16" aria-hidden="true">
-          <path d="M12.5 3v10L6 8zM4.5 3h1.2v10H4.5z" />
-        </svg>
-      </button>
-    }
-    @if (showPreviousPage()) {
-      <button
-        type="button"
-        class="nxr-toolbar-button"
-        [disabled]="atStart()"
-        [attr.aria-label]="strings().PrevPage"
-        (click)="goTo(pageIndex() - 1)"
-      >
-        <svg viewBox="0 0 16 16" aria-hidden="true"><path d="M11 3v10L4.5 8z" /></svg>
-      </button>
-    }
-    @if (showCurrentPage()) {
-      <span class="nxr-page-control">
-        <span class="nxr-page-label">{{ strings().Page }}</span>
-        <input
-          type="text"
-          inputmode="numeric"
-          class="nxr-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>
-    }
-    @if (showNextPage()) {
-      <button
-        type="button"
-        class="nxr-toolbar-button"
-        [disabled]="atEnd()"
-        [attr.aria-label]="strings().NextPage"
-        (click)="goTo(pageIndex() + 1)"
-      >
-        <svg viewBox="0 0 16 16" aria-hidden="true"><path d="M5 3v10l6.5-5z" /></svg>
-      </button>
-    }
-    @if (showLastPage()) {
-      <button
-        type="button"
-        class="nxr-toolbar-button"
-        [disabled]="atEnd()"
-        [attr.aria-label]="strings().LastPage"
-        (click)="goTo(pageCount() - 1)"
-      >
-        <svg viewBox="0 0 16 16" aria-hidden="true">
-          <path d="M3.5 3v10L10 8zM10.3 3h1.2v10h-1.2z" />
-        </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"] }] } });
+                        '[class.nxe-busy]': 'busy()',
+                    }, template: `
+    <div
+      class="nxe-toolbar-bar"
+      [style.background-color]="backgroundColor()"
+      [style.border]="border()"
+      [style.justify-content]="justifyContent()"
+    >
+      @if (showSave()) {
+        <div class="nxe-toolbar-menu">
+          <button
+            type="button"
+            class="nxe-toolbar-button"
+            [attr.aria-label]="strings().SaveToolTip"
+            [attr.aria-expanded]="openMenu() === 'save'"
+            (click)="toggleMenu('save')"
+          >
+            <span class="nxe-toolbar-icon">
+              <svg viewBox="0 0 16 16" aria-hidden="true">
+                <path d="M1.5 1.5h13v13h-13z" fill="#d890d8" stroke="#903098" />
+                <path d="M4.5 1.5h7v4.5h-7z" fill="#fff" stroke="#903098" />
+                <path d="M3.5 9.5h9v5h-9z" fill="#fff" stroke="#903098" />
+              </svg>
+            </span>
+            @if (showCaptions()) {
+              <span class="nxe-toolbar-caption">{{ strings().Save }}</span>
+            }
+            <span class="nxe-toolbar-arrow">
+              <svg viewBox="0 0 8 8" aria-hidden="true">
+                <path d="M1.5 2.5 4 5l2.5-2.5" fill="none" stroke="#787878" />
+              </svg>
+            </span>
+          </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.5.5h7l3 3v12h-10z" fill="#fff" stroke="#6e6e6e" />
+                      <path d="M10.5.5v3h3" fill="none" stroke="#6e6e6e" />
+                      @if (format === 'Pdf') {
+                        <path d="M.5 6.5h11v5H.5z" fill="#f6d0d0" stroke="#d83b3b" />
+                        <text x="6" y="10.4" fill="#d83b3b" font-family="Arial" font-size="4.2" font-weight="bold" text-anchor="middle">PDF</text>
+                      } @else {
+                        <path d="M.5 6.5h13v5H.5z" fill="#d6e9f8" stroke="#2088d0" />
+                        <text x="7" y="10.4" fill="#2088d0" font-family="Arial" font-size="4" font-weight="bold" text-anchor="middle">HTML</text>
+                      }
+                    </svg>
+                  </span>
+                  <span class="nxe-toolbar-item-text">{{ formatCaption(format) }}</span>
+                </button>
+              }
+            </div>
+          }
+        </div>
+      }
+      @if (showPanelsSeparator()) {
+        <span class="nxe-toolbar-separator"></span>
+      }
+      @if (showResources()) {
+        <!-- A report's resources are not served yet, so there are none to show: Stimulsoft disables the button then. -->
+        <button type="button" class="nxe-toolbar-button" disabled [attr.aria-label]="strings().Resources">
+          <span class="nxe-toolbar-icon">
+            <svg viewBox="0 0 16 16" aria-hidden="true" fill="none" stroke="#313131">
+              <path d="M6.5 1.5h5l3 3v8h-8z" fill="#fff" />
+              <path d="M11.5 1.5v3h3" />
+              <path d="M1.5 4.5h5v10h-5z" fill="#fff" />
+              <path d="M2.5 7.5h3m-3 2h3m-3 2h3" stroke="#717171" />
+            </svg>
+          </span>
+        </button>
+      }
+      @if (showFindSeparator()) {
+        <span class="nxe-toolbar-separator"></span>
+      }
+      @if (showFind()) {
+        <button
+          type="button"
+          class="nxe-toolbar-button"
+          [class.nxe-toolbar-selected]="findOpen()"
+          [attr.aria-label]="strings().FindToolTip"
+          [attr.aria-pressed]="findOpen()"
+          (click)="findToggle.emit()"
+        >
+          <span class="nxe-toolbar-icon">
+            <svg viewBox="0 0 16 16" aria-hidden="true" fill="none" stroke="#383838">
+              <circle cx="9.5" cy="6.5" r="4.4" stroke-width="1.4" />
+              <path d="M6.4 9.6 2 14" stroke-width="2" stroke-linecap="round" />
+            </svg>
+          </span>
+        </button>
+      }
+      @if (showNavigationSeparator()) {
+        <span class="nxe-toolbar-separator"></span>
+      }
+      @if (showFirstPage()) {
+        <button
+          type="button"
+          class="nxe-toolbar-button"
+          [disabled]="atStart()"
+          [attr.aria-label]="strings().FirstPage"
+          (click)="goTo(0)"
+        >
+          <span class="nxe-toolbar-icon">
+            <svg viewBox="0 0 16 16" aria-hidden="true" fill="#81c1f1" stroke="#0161b1" stroke-linejoin="round">
+              <path d="M3.5 2.5h2v11h-2z" />
+              <path d="M12.5 2.5v11l-6-5.5z" />
+            </svg>
+          </span>
+        </button>
+      }
+      @if (showPreviousPage()) {
+        <button
+          type="button"
+          class="nxe-toolbar-button"
+          [disabled]="atStart()"
+          [attr.aria-label]="strings().PrevPage"
+          (click)="goTo(pageIndex() - 1)"
+        >
+          <span class="nxe-toolbar-icon">
+            <svg viewBox="0 0 16 16" aria-hidden="true" fill="#81c1f1" stroke="#0161b1" stroke-linejoin="round">
+              <path d="M10.5 2.5v11l-6-5.5z" />
+            </svg>
+          </span>
+        </button>
+      }
+      @if (showCurrentPage()) {
+        <span class="nxe-page-control">
+          <span class="nxe-page-label">{{ strings().Page }}</span>
+          <span class="nxe-page-box-cell" [class.nxe-page-box-off]="pageControlDisabled()">
+            <input
+              type="text"
+              inputmode="numeric"
+              class="nxe-page-box"
+              [disabled]="pageControlDisabled()"
+              [value]="pageIndex() + 1"
+              [attr.aria-label]="strings().Page"
+              (keydown.enter)="enterPage($event)"
+            />
+          </span>
+          <span class="nxe-page-label">{{ strings().PageOf }}</span>
+          <span class="nxe-page-label">{{ pageCount() }}</span>
+        </span>
+      }
+      @if (showNextPage()) {
+        <button
+          type="button"
+          class="nxe-toolbar-button"
+          [disabled]="atEnd()"
+          [attr.aria-label]="strings().NextPage"
+          (click)="goTo(pageIndex() + 1)"
+        >
+          <span class="nxe-toolbar-icon">
+            <svg viewBox="0 0 16 16" aria-hidden="true" fill="#81c1f1" stroke="#0161b1" stroke-linejoin="round">
+              <path d="M5.5 2.5v11l6-5.5z" />
+            </svg>
+          </span>
+        </button>
+      }
+      @if (showLastPage()) {
+        <button
+          type="button"
+          class="nxe-toolbar-button"
+          [disabled]="atEnd()"
+          [attr.aria-label]="strings().LastPage"
+          (click)="goTo(pageCount() - 1)"
+        >
+          <span class="nxe-toolbar-icon">
+            <svg viewBox="0 0 16 16" aria-hidden="true" fill="#81c1f1" stroke="#0161b1" stroke-linejoin="round">
+              <path d="M3.5 2.5v11l6-5.5z" />
+              <path d="M10.5 2.5h2v11h-2z" />
+            </svg>
+          </span>
+        </button>
+      }
+      @if (showZoom() || showViewMode()) {
+        <span class="nxe-toolbar-separator"></span>
+      }
+      @if (showZoom()) {
+        <div class="nxe-toolbar-menu">
+          <button
+            type="button"
+            class="nxe-toolbar-button"
+            [attr.aria-label]="strings().ZoomToolTip"
+            [attr.aria-expanded]="openMenu() === 'zoom'"
+            (click)="toggleMenu('zoom')"
+          >
+            <span class="nxe-toolbar-icon">
+              <svg viewBox="0 0 16 16" aria-hidden="true" fill="none">
+                <path d="M2.5 1.5h6l3 3v5M8.5 1.5v3h3M2.5 1.5v13h7" stroke="#383838" />
+                <circle cx="11.5" cy="11.5" r="2" stroke="#2088d0" />
+                <path d="m13 13 1.8 1.8" stroke="#2088d0" />
+              </svg>
+            </span>
+            @if (showCaptions()) {
+              <span class="nxe-toolbar-caption">{{ zoomCaption() }}</span>
+            }
+            <span class="nxe-toolbar-arrow">
+              <svg viewBox="0 0 8 8" aria-hidden="true">
+                <path d="M1.5 2.5 4 5l2.5-2.5" fill="none" stroke="#787878" />
+              </svg>
+            </span>
+          </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>
+                  <span class="nxe-toolbar-item-text">{{ percent }}%</span>
+                </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" fill="none">
+                    <path d="M3.5 1.5h9v13h-9z" fill="#fff" stroke="#383838" />
+                    <path d="M8 3.5v9M6 5.5l2-2 2 2M6 10.5l2 2 2-2" stroke="#2088d0" />
+                  </svg>
+                </span>
+                <span class="nxe-toolbar-item-text">{{ strings().ZoomOnePage }}</span>
+              </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" fill="none">
+                    <path d="M1.5 3.5h13v9h-13z" fill="#fff" stroke="#383838" />
+                    <path d="M3.5 8h9M5.5 6l-2 2 2 2M10.5 6l2 2-2 2" stroke="#2088d0" />
+                  </svg>
+                </span>
+                <span class="nxe-toolbar-item-text">{{ strings().ZoomPageWidth }}</span>
+              </button>
+            </div>
+          }
+        </div>
+      }
+      @if (showViewMode()) {
+        <div class="nxe-toolbar-menu">
+          <button
+            type="button"
+            class="nxe-toolbar-button"
+            [attr.aria-label]="strings().ViewModeToolTip"
+            [attr.aria-expanded]="openMenu() === 'viewMode'"
+            (click)="toggleMenu('viewMode')"
+          >
+            <!-- Stimulsoft's button keeps the single-page icon whatever the mode. -->
+            <span class="nxe-toolbar-icon">
+              <svg viewBox="0 0 16 16" aria-hidden="true">
+                <path d="M2.5 1.5h11v13h-11z" fill="#fff" stroke="#383838" />
+              </svg>
+            </span>
+            @if (showCaptions()) {
+              <span class="nxe-toolbar-caption">{{ strings()[viewMode()] }}</span>
+            }
+            <span class="nxe-toolbar-arrow">
+              <svg viewBox="0 0 8 8" aria-hidden="true">
+                <path d="M1.5 2.5 4 5l2.5-2.5" fill="none" stroke="#787878" />
+              </svg>
+            </span>
+          </button>
+          @if (openMenu() === 'viewMode') {
+            <!-- Stimulsoft marks no item here as the current one, unlike the zoom menu. -->
+            <div class="nxe-toolbar-popup" role="menu">
+              @for (mode of viewModes; track mode) {
+                <button type="button" class="nxe-toolbar-item" role="menuitem" (click)="chooseViewMode(mode)">
+                  <span class="nxe-toolbar-item-icon">
+                    <svg viewBox="0 0 16 16" aria-hidden="true" fill="#fff" stroke="#383838">
+                      @switch (mode) {
+                        @case ('SinglePage') {
+                          <path d="M2.5 1.5h11v13h-11z" />
+                        }
+                        @case ('Continuous') {
+                          <path d="M2.5 1.5h11v4h-11zm0 6h11v7h-11z" />
+                        }
+                        @case ('MultiplePages') {
+                          <path d="M2.5 2.5h5v5h-5zm6 0h5v5h-5zm-6 6h5v5h-5zm6 0h5v5h-5z" />
+                        }
+                      }
+                    </svg>
+                  </span>
+                  <span class="nxe-toolbar-item-text">{{ strings()[mode] }}</span>
+                </button>
+              }
+            </div>
+          }
+        </div>
+      }
+    </div>
+  `, styles: [":host{display:block;box-sizing:border-box;padding-top:2px;position:relative;-webkit-user-select:none;user-select:none;font-family:Arial;font-size:12px;color:#202020}:host(.nxe-busy):after{content:\"\";position:absolute;inset:0;cursor:default}.nxe-toolbar-bar{display:flex;align-items:center;box-sizing:border-box;height:31px;padding:1px;border:1px solid #c6c6c6;border-radius:3px;background:#fff;cursor:default}.nxe-toolbar-button{display:inline-flex;align-items:center;box-sizing:border-box;height:25px;margin:1px;padding:0;border:1px solid transparent;border-radius:3px;background:transparent;color:inherit;font:inherit;white-space:nowrap;cursor:default}.nxe-toolbar-button:hover:not(:disabled),.nxe-toolbar-button[aria-expanded=true]{background:#dadada}.nxe-toolbar-button.nxe-toolbar-selected{background:#e5e5e5}.nxe-toolbar-button:disabled{color:#d6d3d6}.nxe-toolbar-button:disabled svg{opacity:.5}.nxe-toolbar-icon{display:flex;flex:none;box-sizing:border-box;width:22px;padding-left:3px}.nxe-toolbar-icon svg{width:16px;height:16px}.nxe-toolbar-arrow{display:flex;flex:none;justify-content:center;width:18px}.nxe-toolbar-arrow svg{width:8px;height:8px}.nxe-toolbar-separator{flex:none;width:1px;height:21px;background:#d4d4d4}.nxe-page-control{display:inline-flex;align-items:center;height:23px;margin:0 1px;white-space:nowrap}.nxe-page-label,.nxe-page-box-cell{padding:0 2px}.nxe-page-box-cell{display:flex}.nxe-page-box{box-sizing:border-box;width:51px;height:23px;margin:0;padding:0 0 0 4px;border:1px solid #ababab;border-radius:3px;background:#fff;color:inherit;font:inherit;line-height:21px;text-align:left;outline:none}.nxe-page-box:hover:not(:disabled){border-color:#6b6b6b}.nxe-page-box:disabled{border-color:#e1e1e1;background:#f7f7f7;color:inherit;-webkit-text-fill-color:currentColor;opacity:1}.nxe-page-box-off{opacity:.5}.nxe-toolbar-menu{position:relative;display:flex;align-items:center}.nxe-toolbar-popup{position:absolute;top:100%;left:0;z-index:10;display:flex;flex-direction:column;gap:1px;box-sizing:border-box;padding:1px;border:1px solid #ababab;border-radius:3px;background:#fff;box-shadow:0 0 7px #0000004d}.nxe-toolbar-item{display:flex;align-items:center;flex:none;box-sizing:border-box;height:24px;margin:0 1px;padding:0;border:0;border-radius:3px;background:transparent;color:#202020;font:inherit;text-align:left;white-space:nowrap;cursor:default}.nxe-toolbar-item:first-child{margin-top:1px}.nxe-toolbar-item:last-child{margin-bottom:1px}.nxe-toolbar-item-on{background:#e5e5e5}.nxe-toolbar-item:hover{background:#dadada}.nxe-toolbar-item-icon{display:flex;flex:none;box-sizing:border-box;width:22px;padding-left:3px}.nxe-toolbar-item-icon svg{width:16px;height:16px}.nxe-toolbar-item-text{padding:0 20px 0 7px}.nxe-toolbar-item-separator{flex:none;height:1px;margin:0 2px 0 30px;background:#d4d4d4}\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 }] }], findOpen: [{ type: i0.Input, args: [{ isSignal: true, alias: "findOpen", 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"] }], findToggle: [{ type: i0.Output, args: ["findToggle"] }] } });
 
+/** 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;
+/** Stimulsoft scrolls a hit to its own height plus this far below the top of the report panel. */
+const FIND_SCROLL_GAP = 50;
 /**
  * A report served by `Nextera.Reports.Angular.NetCore`, shown page by page.
  *
@@ -994,7 +1951,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,13 +1980,64 @@ 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 */ []));
+    /** See `.nxe-viewer-bookmarks`: the whole of Stimulsoft's bookmarks panel at width 0. */
+    showBookmarksStrip = computed(() => this.session.report() !== null && this.appearance()?.bookmarksTreeWidth === 0, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "showBookmarksStrip" }] : /* istanbul ignore next */ []));
+    /** Whether the find panel is open; Stimulsoft's Find button opens and closes it. */
+    findOpen = signal(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "findOpen" }] : /* istanbul ignore next */ []));
+    /** The search on show: what was looked for, the elements found, and which one is current. */
+    findKey = null;
+    hits = [];
+    currentHit = 0;
+    lastFind = null;
+    /**
+     * The pages whose HTML is on screen, so a search can follow them: in SinglePage the page changes
+     * under it, and in the scrolling modes pages keep arriving as they are fetched.
+     */
+    renderedPages = computed(() => this.shownPages()
+        .map((page) => `${page.index}:${page.html === null ? 0 : 1}`)
+        .join(','), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "renderedPages" }] : /* istanbul ignore next */ []));
     pageCss = computed(() => this.session.report()?.pageCss ?? '', /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "pageCss" }] : /* istanbul ignore next */ []));
     showPageShadow = computed(() => this.appearance()?.showPageShadow === true, /* @ts-ignore */
@@ -1058,7 +2066,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,12 +2089,126 @@ 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));
+        // While a search is on show, new page HTML on screen means the search runs again over it.
+        toObservable(this.renderedPages)
+            .pipe(distinctUntilChanged(), skip(1), takeUntilDestroyed())
+            .subscribe(() => {
+            if (this.findOpen() && this.lastFind !== null) {
+                requestAnimationFrame(() => this.refreshFind());
+            }
+        });
+    }
+    /** The Find button opens the panel, or closes it and takes the search's highlights away. */
+    toggleFind() {
+        if (this.findOpen()) {
+            this.closeFind();
+            return;
+        }
+        this.findOpen.set(true);
+        this.afterPagesSettle();
+    }
+    closeFind() {
+        this.findOpen.set(false);
+        this.resetFind();
+        this.afterPagesSettle();
+    }
+    /**
+     * A search from the find panel, run as Stimulsoft runs it (angular-viewer-panels-chrome.md §1.3,
+     * §1.6): empty text clears the highlights; new text, or a changed option, finds afresh and makes the
+     * first hit current; the same search again steps to the next or previous hit, round the ends. Each
+     * current hit is scrolled into view. Stimulsoft finds only in the pages it has on screen; this viewer
+     * fetches the pages a scrolling mode has not fetched yet, and finds in them as they arrive.
+     */
+    find(request) {
+        this.lastFind = request;
+        if (request.text === '') {
+            this.resetFind();
+            return;
+        }
+        const key = `${request.matchCase ? 1 : 0}${request.wholeWord ? 1 : 0}${request.text}`;
+        if (key !== this.findKey) {
+            this.findKey = key;
+            this.requestAllPages();
+            this.runFind(request, 0);
+            this.revealHit(true);
+            return;
+        }
+        if (this.hits.length === 0)
+            return;
+        const previous = this.currentHit;
+        const count = this.hits.length;
+        this.currentHit = request.forward ? (previous + 1) % count : (previous - 1 + count) % count;
+        markCurrent(this.hits, previous, this.currentHit);
+        this.revealHit(false);
+    }
+    /** Finds again over the pages now on screen, keeping the current hit when it is still there. */
+    refreshFind() {
+        const request = this.lastFind;
+        if (request === null || request.text === '')
+            return;
+        const kept = this.hits[this.currentHit];
+        this.runFind(request, 0);
+        const index = kept ? this.hits.indexOf(kept) : -1;
+        if (index > 0) {
+            markCurrent(this.hits, 0, index);
+            this.currentHit = index;
+        }
+    }
+    runFind(request, current) {
+        const roots = this.pageRoots();
+        clearHits(roots);
+        this.hits = findHits(roots, request.text, request);
+        this.currentHit = current;
+        labelHits(this.hits, this.currentHit);
+    }
+    resetFind() {
+        clearHits(this.pageRoots());
+        this.hits = [];
+        this.currentHit = 0;
+        this.findKey = null;
+        this.lastFind = null;
+    }
+    /** Each page on screen keeps its HTML in its own shadow root. */
+    pageRoots() {
+        const box = this.pagesBox()?.nativeElement;
+        if (!box)
+            return [];
+        return Array.from(box.querySelectorAll('nxe-report-page'))
+            .map((page) => page.shadowRoot)
+            .filter((root) => root !== null);
+    }
+    requestAllPages() {
+        if (this.viewMode() === 'SinglePage')
+            return;
+        for (let index = 0; index < this.session.pageCount(); index++)
+            this.session.requestPage(index);
+    }
+    /**
+     * Scrolls the current hit to its own height plus 50 px below the top of the report panel, over
+     * 350 ms: always after a fresh search, and after a step only when the hit is out of view. That is
+     * what Stimulsoft's viewer was seen to do; the exact place it scrolls to also carries offsets of its
+     * own page markup, which this viewer's pages do not have.
+     */
+    revealHit(always) {
+        const box = this.pagesBox()?.nativeElement;
+        const hit = this.hits[this.currentHit];
+        if (!box || !hit)
+            return;
+        const panel = box.getBoundingClientRect();
+        const target = hit.getBoundingClientRect();
+        if (!always && target.top >= panel.top && target.bottom <= panel.bottom)
+            return;
+        const to = box.scrollTop + target.top - panel.top - (target.height + FIND_SCROLL_GAP);
+        this.animateScroll(box, Math.max(0, to));
     }
     /**
      * A change to any input reloads, as Stimulsoft's viewer does: its `ngOnChanges` never looks at
@@ -1081,6 +2218,146 @@ 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();
+        // A height that resolved is left alone, as Stimulsoft leaves it, even when it ends at the very
+        // bottom of the window; one that grew past the window's bottom is taken over.
+        if (this.measuredHeight() === null && rect.bottom <= window.innerHeight + 1)
+            return;
+        const room = Math.max(MIN_PANEL_HEIGHT, Math.round(window.innerHeight - rect.top - VIEWER_BOTTOM_GAP));
+        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;
+        this.animateScroll(box, element.offsetTop - box.offsetTop);
+    }
+    /** Scrolls the report panel over 350 ms in steps of about 30 ms, as Stimulsoft's scrolls all run. */
+    animateScroll(box, to) {
+        const from = box.scrollTop;
+        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 +2385,148 @@ 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: `
-    <div
-      class="nxr-viewer-root"
-      [style]="style()"
-      [style.background-color]="rootBackgroundColor()"
-      [style.width]="rootWidth()"
-      [style.height]="rootHeight()"
-    >
-      @if (toolbarVisible()) {
-        <nxr-viewer-toolbar
-          [options]="session.options()"
-          [pageIndex]="session.pageIndex()"
-          [pageCount]="session.pageCount()"
-          [busy]="session.busy()"
-          (goToPage)="session.goToPage($event)"
-        />
-      }
-
-      <div
-        class="nxr-viewer-pages"
-        [style.text-align]="pageAlignment()"
-        [style.overflow]="pagesOverflow()"
-      >
-        @if (session.shownPage(); as page) {
-          <nxr-report-page
-            class="nxr-viewer-page"
-            [class.nxr-viewer-page-shadow]="showPageShadow()"
-            [style.border]="pageBorder()"
-            [page]="page.size"
-            [html]="page.html"
-            [css]="pageCss()"
-          />
-        }
-      </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()">
-            &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 });
+    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
+      #rootBox
+      class="nxe-viewer-root"
+      [style]="style()"
+      [style.background-color]="rootBackgroundColor()"
+      [style.width]="rootWidth()"
+      [style.height]="rootHeight()"
+    >
+      @if (toolbarVisible()) {
+        <nxe-viewer-toolbar
+          [options]="session.options()"
+          [pageIndex]="session.pageIndex()"
+          [pageCount]="session.pageCount()"
+          [busy]="session.busy()"
+          [viewMode]="viewMode()"
+          [zoom]="zoom()"
+          [findOpen]="findOpen()"
+          (goToPage)="navigateTo($event)"
+          (viewModeChange)="setViewMode($event)"
+          (zoomChange)="setZoom($event)"
+          (fitRequest)="fitTo($event)"
+          (saveRequest)="session.exportTo($event)"
+          (findToggle)="toggleFind()"
+        />
+      }
+      @if (findOpen()) {
+        <nxe-viewer-find-panel (search)="find($event)" (closed)="closeFind()" />
+      }
+
+      <div class="nxe-viewer-body">
+        @if (showBookmarksStrip()) {
+          <div class="nxe-viewer-bookmarks"></div>
+        }
+        <div
+          #pagesBox
+          class="nxe-viewer-pages"
+          [class.nxe-viewer-continuous]="viewMode() === 'Continuous'"
+          [class.nxe-viewer-pages-beside]="showBookmarksStrip()"
+          [style.text-align]="pageAlignment()"
+          [style.overflow]="pagesOverflow()"
+          (scroll)="onScroll()"
+        >
+          @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>
+      </div>
+
+      @if (session.failure(); as failure) {
+        <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}.nxe-viewer-root{display:inline-flex;flex-direction:column;box-sizing:border-box;position:relative}.nxe-viewer-body{position:relative;display:flex;flex:1 1 auto;min-height:0;margin-top:2px}.nxe-viewer-bookmarks{position:absolute;top:0;bottom:0;left:0;box-sizing:border-box;width:5px;border-left:1px solid #c6c6c6;border-right:1px solid #c6c6c6;background:#fff}.nxe-viewer-pages{position:relative;flex:1 1 auto;min-width:0;box-sizing:border-box;padding:0 10px}.nxe-viewer-pages-beside{margin-left:2px}.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: NxeViewerFindPanelComponent, selector: "nxe-viewer-find-panel", inputs: ["strings"], outputs: ["search", "closed"] }, { kind: "component", type: NxeViewerToolbarComponent, selector: "nxe-viewer-toolbar", inputs: ["options", "pageIndex", "pageCount", "busy", "strings", "viewMode", "zoom", "findOpen"], outputs: ["goToPage", "viewModeChange", "zoomChange", "fitRequest", "saveRequest", "findToggle"] }], 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: `
-    <div
-      class="nxr-viewer-root"
-      [style]="style()"
-      [style.background-color]="rootBackgroundColor()"
-      [style.width]="rootWidth()"
-      [style.height]="rootHeight()"
-    >
-      @if (toolbarVisible()) {
-        <nxr-viewer-toolbar
-          [options]="session.options()"
-          [pageIndex]="session.pageIndex()"
-          [pageCount]="session.pageCount()"
-          [busy]="session.busy()"
-          (goToPage)="session.goToPage($event)"
-        />
-      }
-
-      <div
-        class="nxr-viewer-pages"
-        [style.text-align]="pageAlignment()"
-        [style.overflow]="pagesOverflow()"
-      >
-        @if (session.shownPage(); as page) {
-          <nxr-report-page
-            class="nxr-viewer-page"
-            [class.nxr-viewer-page-shadow]="showPageShadow()"
-            [style.border]="pageBorder()"
-            [page]="page.size"
-            [html]="page.html"
-            [css]="pageCss()"
-          />
-        }
-      </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()">
-            &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"] }] } });
+            args: [{ selector: 'nxe-report-viewer', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, imports: [NxeReportPageComponent, NxeViewerFindPanelComponent, NxeViewerToolbarComponent], providers: [NxeViewerClientService, NxeViewerSessionService], host: { '(window:resize)': 'onWindowResize()' }, template: `
+    <div
+      #rootBox
+      class="nxe-viewer-root"
+      [style]="style()"
+      [style.background-color]="rootBackgroundColor()"
+      [style.width]="rootWidth()"
+      [style.height]="rootHeight()"
+    >
+      @if (toolbarVisible()) {
+        <nxe-viewer-toolbar
+          [options]="session.options()"
+          [pageIndex]="session.pageIndex()"
+          [pageCount]="session.pageCount()"
+          [busy]="session.busy()"
+          [viewMode]="viewMode()"
+          [zoom]="zoom()"
+          [findOpen]="findOpen()"
+          (goToPage)="navigateTo($event)"
+          (viewModeChange)="setViewMode($event)"
+          (zoomChange)="setZoom($event)"
+          (fitRequest)="fitTo($event)"
+          (saveRequest)="session.exportTo($event)"
+          (findToggle)="toggleFind()"
+        />
+      }
+      @if (findOpen()) {
+        <nxe-viewer-find-panel (search)="find($event)" (closed)="closeFind()" />
+      }
+
+      <div class="nxe-viewer-body">
+        @if (showBookmarksStrip()) {
+          <div class="nxe-viewer-bookmarks"></div>
+        }
+        <div
+          #pagesBox
+          class="nxe-viewer-pages"
+          [class.nxe-viewer-continuous]="viewMode() === 'Continuous'"
+          [class.nxe-viewer-pages-beside]="showBookmarksStrip()"
+          [style.text-align]="pageAlignment()"
+          [style.overflow]="pagesOverflow()"
+          (scroll)="onScroll()"
+        >
+          @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>
+      </div>
+
+      @if (session.failure(); as failure) {
+        <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}.nxe-viewer-root{display:inline-flex;flex-direction:column;box-sizing:border-box;position:relative}.nxe-viewer-body{position:relative;display:flex;flex:1 1 auto;min-height:0;margin-top:2px}.nxe-viewer-bookmarks{position:absolute;top:0;bottom:0;left:0;box-sizing:border-box;width:5px;border-left:1px solid #c6c6c6;border-right:1px solid #c6c6c6;background:#fff}.nxe-viewer-pages{position:relative;flex:1 1 auto;min-width:0;box-sizing:border-box;padding:0 10px}.nxe-viewer-pages-beside{margin-left:2px}.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 +2536,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