@nexterajs/report-viewer 0.0.1

package/fesm2022/nexterajs-report-viewer.mjs

@@ -0,0 +1,1219 @@
+import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
+import * as i0 from '@angular/core';
+import { input, inject, DOCUMENT, ElementRef, ChangeDetectionStrategy, Component, Injectable, signal, computed, DestroyRef, output } from '@angular/core';
+import { 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;
+
+/**
+ * Page HTML from the server, made safe to place in the application's document.
+ *
+ * The report repository's HTML renderer escapes every attribute value and writes links only with
+ * http, https, mailto, tel or no scheme, and its chart renderer strips event handlers from chart SVG.
+ * This is the second layer: whatever reaches the viewer, a page can neither run script nor load active
+ * content, and it cannot style the viewer around it.
+ */
+/**
+ * Elements that run script, load documents, plugins or media, submit, animate other attributes, or
+ * carry CSS of their own. The renderer writes none of them into a page.
+ */
+const REMOVED_ELEMENTS = [
+    'script',
+    'noscript',
+    'template',
+    'style',
+    'link',
+    'meta',
+    'base',
+    'iframe',
+    'frame',
+    'frameset',
+    'object',
+    'embed',
+    'applet',
+    'portal',
+    'audio',
+    'video',
+    'source',
+    'track',
+    'picture',
+    'form',
+    'set',
+    'animate',
+].join(',');
+/** Attributes holding a URL that a click or a load would follow. */
+const URL_ATTRIBUTES = new Set([
+    'href',
+    'xlink:href',
+    'src',
+    'action',
+    'formaction',
+    'poster',
+    'background',
+]);
+/** Attributes that make requests of their own and have no use in a page. */
+const REMOVED_ATTRIBUTES = new Set(['srcset', 'ping']);
+const LINK_SCHEMES = new Set(['http', 'https', 'mailto', 'tel']);
+/**
+ * Whether a URL attribute's value can stay: no scheme (a relative or fragment URL), a link scheme, or,
+ * for `src`, an image as a data URL. Browsers ignore spaces and control characters around and inside a
+ * scheme, so the check drops them before reading it.
+ */
+function isSafeUrl(attribute, value) {
+    let compact = '';
+    for (const character of value) {
+        if (character.charCodeAt(0) > 0x20)
+            compact += character;
+    }
+    const scheme = /^([a-z][a-z0-9+.-]*):/i.exec(compact)?.[1]?.toLowerCase();
+    if (scheme === undefined || LINK_SCHEMES.has(scheme))
+        return true;
+    return attribute === 'src' && scheme === 'data' && /^data:image\//i.test(compact);
+}
+/**
+ * Parses page HTML and returns it without anything active. A template's content is inert while it is
+ * examined: its scripts do not run, its images do not load and its handlers do not fire.
+ */
+function scrubPageHtml(html, document) {
+    const template = document.createElement('template');
+    template.innerHTML = html;
+    const content = template.content;
+    for (const element of Array.from(content.querySelectorAll(REMOVED_ELEMENTS))) {
+        element.remove();
+    }
+    for (const element of Array.from(content.querySelectorAll('*'))) {
+        for (const attribute of Array.from(element.attributes)) {
+            const name = attribute.name.toLowerCase();
+            const unsafe = name.startsWith('on') ||
+                REMOVED_ATTRIBUTES.has(name) ||
+                (URL_ATTRIBUTES.has(name) && !isSafeUrl(name, attribute.value));
+            if (unsafe)
+                element.removeAttribute(attribute.name);
+        }
+    }
+    return content;
+}
+/**
+ * Deletes every style rule whose selector names `:host` or `:host-context()`, also inside grouping rules
+ * such as `@media` and inside nested rules. In a shadow root those rules style the shadow host, the
+ * viewer's own page element, so a page's CSS could otherwise move or hide it.
+ */
+function deleteHostRules(container) {
+    for (let index = container.cssRules.length - 1; index >= 0; index--) {
+        const rule = container.cssRules[index];
+        if (rule instanceof CSSStyleRule && /:host/i.test(rule.selectorText)) {
+            container.deleteRule(index);
+        }
+        else if ('cssRules' in rule && !(rule instanceof CSSKeyframesRule)) {
+            deleteHostRules(rule);
+        }
+    }
+}
+const sheets = new Map();
+/**
+ * One constructed stylesheet per distinct CSS text, shared by every shadow root that adopts it. A
+ * report's page CSS is the same for every page, so a long report parses it once. The sheet keeps no rule
+ * that could style the shadow host. CSS that a constructed stylesheet refuses gives an empty sheet, so the
+ * page shows unstyled instead of not at all.
+ */
+function adoptedSheet(cssText) {
+    let sheet = sheets.get(cssText);
+    if (!sheet) {
+        sheet = new CSSStyleSheet();
+        try {
+            sheet.replaceSync(cssText);
+            deleteHostRules(sheet);
+        }
+        catch {
+            sheet = new CSSStyleSheet();
+        }
+        sheets.set(cssText, sheet);
+    }
+    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;}';
+/**
+ * One report page, in its own shadow root.
+ *
+ * The page's size comes from the report's page list, so the page holds its place before its HTML
+ * arrives. The HTML is scrubbed by `scrubPageHtml` and placed beside the adopted page stylesheet, so the
+ * report's styles and the application's never meet. `contain: paint` keeps even a fixed-position
+ * element inside the page's box.
+ */
+class NxrReportPageComponent {
+    /** The page's number and size. */
+    page = input.required(/* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "page" }] : /* istanbul ignore next */ []));
+    /** The page's HTML from the server, or null while it has not arrived. */
+    html = input(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "html" }] : /* istanbul ignore next */ []));
+    /** The stylesheet every page of the report needs. */
+    css = input.required(/* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "css" }] : /* 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['html']) {
+            const html = this.html();
+            if (html === null) {
+                this.root.replaceChildren();
+            }
+            else {
+                this.root.replaceChildren(scrubPageHtml(html, this.document));
+            }
+        }
+    }
+    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 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.5", ngImport: i0, type: NxrReportPageComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'nxr-report-page', standalone: true, template: '', changeDetection: ChangeDetectionStrategy.OnPush, host: {
+                        class: 'nxr-report-page',
+                        '[attr.data-page]': 'page().pageNumber',
+                        '[style.width.pt]': 'page().widthPoints',
+                        '[style.height.pt]': 'page().heightPoints',
+                    }, 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);
+}
+
+/**
+ * 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 {
+    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.`);
+        this.action = action;
+        this.protocol = protocol;
+        this.name = 'NxrMalformedAnswerError';
+    }
+}
+/** A request that got no answer within the server options' `requestTimeout`. */
+class NxrTimeoutError extends Error {
+    seconds;
+    constructor(seconds) {
+        super(`No answer within ${seconds} seconds.`);
+        this.seconds = seconds;
+        this.name = 'NxrTimeoutError';
+    }
+}
+const OPTION_GROUPS = ['actions', 'appearance', 'toolbar', 'exports', 'server'];
+function isObject(value) {
+    return typeof value === 'object' && value !== null && !Array.isArray(value);
+}
+function isIndex(value) {
+    return typeof value === 'number' && Number.isInteger(value) && value >= 0;
+}
+function isNumber(value) {
+    return typeof value === 'number' && Number.isFinite(value);
+}
+function isBounds(value) {
+    return (isObject(value) &&
+        isNumber(value['x']) &&
+        isNumber(value['y']) &&
+        isNumber(value['width']) &&
+        isNumber(value['height']));
+}
+function isPages(value) {
+    if (!isObject(value))
+        return false;
+    const pages = value['pages'];
+    return (isIndex(value['startIndex']) &&
+        Array.isArray(pages) &&
+        pages.every((page) => typeof page === 'string'));
+}
+function isPageSize(value) {
+    return (isObject(value) &&
+        isIndex(value['pageNumber']) &&
+        isNumber(value['widthPoints']) &&
+        isNumber(value['heightPoints']));
+}
+function isLocated(value, textKey) {
+    return (isObject(value) &&
+        typeof value[textKey] === 'string' &&
+        isIndex(value['pageIndex']) &&
+        isBounds(value['bounds']));
+}
+/** 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');
+    const { protocol, token, options, localization } = body;
+    if (isNumber(protocol) && protocol !== NXR_VIEWER_PROTOCOL) {
+        throw new NxrMalformedAnswerError('AngularViewerData', protocol);
+    }
+    const valid = protocol === NXR_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');
+    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');
+    const { reportName, pageCount, pages, bookmarks, pageCss, pagesHtml } = body;
+    const valid = typeof reportName === 'string' &&
+        isIndex(pageCount) &&
+        Array.isArray(pages) &&
+        pages.length === pageCount &&
+        pages.every(isPageSize) &&
+        Array.isArray(bookmarks) &&
+        bookmarks.every((bookmark) => isLocated(bookmark, 'title')) &&
+        typeof pageCss === 'string' &&
+        (pagesHtml === undefined || isPages(pagesHtml));
+    if (!valid)
+        throw new NxrMalformedAnswerError('GetReport');
+    return {
+        ...body,
+        pagesHtml: pagesHtml ?? null,
+    };
+}
+/** Reads the answer to GetPages. */
+function readPages(body) {
+    if (!isPages(body))
+        throw new NxrMalformedAnswerError('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');
+    return body;
+}
+/** Reads the answer to UpdateCache. */
+function readUpdateCache(body) {
+    if (!isObject(body) || typeof body['updated'] !== 'boolean')
+        throw new NxrMalformedAnswerError('UpdateCache');
+    return body;
+}
+function described(status, message) {
+    return { status, type: 'Error', message, retryable: false, traceId: null };
+}
+/**
+ * What went wrong with a request, from whatever it failed with:
+ * - the server's own error answer, kept as it is;
+ * - an HTTP error answer without the protocol's shape (a host's, a framework's or a proxy's);
+ * - no answer at all;
+ * - a timeout;
+ * - a success answer the viewer cannot read.
+ */
+function readFailure(failure, action, strings = NXR_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;
+            return {
+                status: failure.status,
+                type: body['type'],
+                message: body['message'],
+                retryable: body['retryable'],
+                traceId,
+            };
+        }
+        if (failure.status === 0)
+            return described(0, strings.errorUnreachable);
+        if (failure.status >= 200 && failure.status < 300)
+            return described(0, formatString(strings.errorMalformed, action));
+        return described(failure.status, formatString(strings.errorStatus, failure.status));
+    }
+    if (failure instanceof NxrTimeoutError) {
+        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))
+            : described(0, formatString(strings.errorMalformed, failure.action));
+    }
+    return described(0, failure instanceof Error ? failure.message : String(failure));
+}
+
+/**
+ * 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;
+/**
+ * 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.
+ */
+function actionUrl(requestUrl, action) {
+    const queryAt = action.indexOf('?');
+    const path = queryAt < 0 ? action : action.slice(0, queryAt);
+    const url = requestUrl.replace('{action}', () => path);
+    if (queryAt < 0)
+        return url;
+    return `${url}${url.includes('?') ? '&' : '?'}${action.slice(queryAt + 1)}`;
+}
+/**
+ * The host action that answers a viewer action. GetReport goes to `getReport` (or `viewerEvent` when that
+ * is empty). The other actions go to `viewerEvent`, or to `getReport` when the server keeps nothing.
+ * ExportReport goes to `exportReport` when that is set.
+ */
+function hostActionFor(options, action) {
+    const { getReport, viewerEvent, exportReport } = options.actions;
+    const reportAction = getReport || viewerEvent;
+    const eventAction = options.server.cacheMode === 'None' ? reportAction : viewerEvent;
+    if (action === 'GetReport')
+        return reportAction;
+    if (action === 'ExportReport')
+        return exportReport || eventAction;
+    return eventAction;
+}
+/** The file name in a Content-Disposition header, preferring its UTF-8 form. */
+function fileNameOf(disposition) {
+    if (!disposition)
+        return null;
+    const encoded = /filename\*\s*=\s*UTF-8''([^;]+)/i.exec(disposition);
+    if (encoded) {
+        try {
+            return decodeURIComponent(encoded[1].trim());
+        }
+        catch {
+            // A malformed escape: the plain file name follows.
+        }
+    }
+    const plain = /filename\s*=\s*(?:"([^"]*)"|([^;]+))/i.exec(disposition);
+    return plain ? (plain[1] ?? plain[2]).trim() : null;
+}
+function timeoutOf(session) {
+    const seconds = session?.options.server.requestTimeout ?? 0;
+    return seconds > 0 ? seconds : NXR_UNSET_REQUEST_TIMEOUT_SECONDS;
+}
+function formOf(context, action, session, parameters) {
+    const form = new FormData();
+    form.set('nextera_action', action);
+    if (session) {
+        const { cacheMode, cacheTimeout, cacheItemPriority } = session.options.server;
+        form.set('nextera_token', session.token);
+        form.set('nextera_cache', JSON.stringify({ mode: cacheMode, timeout: cacheTimeout, priority: cacheItemPriority }));
+    }
+    if (parameters)
+        form.set('nextera_parameters', JSON.stringify(parameters));
+    if (context.properties)
+        form.set('properties', JSON.stringify(context.properties));
+    const added = context.postParametersFunction?.({ ...parameters, action });
+    if (typeof added === 'object' && added !== null) {
+        for (const [name, value] of Object.entries(added)) {
+            form.set(name, value instanceof Blob ? value : String(value));
+        }
+    }
+    return form;
+}
+/** An error answer to a blob request carries its body as a blob. Read it, as JSON when it is JSON, so it can be classified. */
+async function readableFailure(failure) {
+    if (!(failure instanceof HttpErrorResponse) || !(failure.error instanceof Blob))
+        return failure;
+    const text = await failure.error.text();
+    let body = text;
+    try {
+        body = JSON.parse(text);
+    }
+    catch {
+        // Not JSON: the failure is described by its status.
+    }
+    return new HttpErrorResponse({
+        error: body,
+        headers: failure.headers,
+        status: failure.status,
+        statusText: failure.statusText,
+        url: failure.url ?? undefined,
+    });
+}
+/**
+ * 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
+ * form is built when the observable is subscribed.
+ */
+class NxrViewerClientService {
+    http = inject(HttpClient);
+    /** AngularViewerData, sent to the component's `action`: the token and the options. */
+    openViewer(context, action) {
+        return this.post(context, 'AngularViewerData', action, null, null, readViewerData);
+    }
+    /** GetReport: renders the report, with the HTML of the pages in `range` when one is given. */
+    getReport(context, session, range) {
+        const hostAction = hostActionFor(session.options, 'GetReport');
+        return this.post(context, 'GetReport', hostAction, session, range ?? null, readReport);
+    }
+    /** GetPages: the HTML of the pages in `range`. */
+    getPages(context, session, range) {
+        return this.post(context, 'GetPages', hostActionFor(session.options, 'GetPages'), session, range, readPages);
+    }
+    /** Find: the text components that match. */
+    find(context, session, parameters) {
+        return this.post(context, 'Find', hostActionFor(session.options, 'Find'), session, parameters, readFind);
+    }
+    /** UpdateCache: keeps the server's copy of the report. */
+    updateCache(context, session) {
+        const hostAction = hostActionFor(session.options, 'UpdateCache');
+        return this.post(context, 'UpdateCache', hostAction, session, null, readUpdateCache);
+    }
+    /** ExportReport: the report as a file, in a format such as `Pdf` or `Html`. It never times out. */
+    exportReport(context, session, format) {
+        const url = actionUrl(context.requestUrl, hostActionFor(session.options, 'ExportReport'));
+        return defer(() => this.http.post(url, formOf(context, 'ExportReport', session, { format }), {
+            observe: 'response',
+            responseType: 'blob',
+        })).pipe(map((response) => ({
+            blob: response.body ?? new Blob([]),
+            fileName: fileNameOf(response.headers.get('Content-Disposition')) ?? '',
+            contentType: response.headers.get('Content-Type') ?? '',
+        })), catchError((failure) => from(readableFailure(failure)).pipe(switchMap((readable) => throwError(() => readFailure(readable, 'ExportReport', context.strings))))));
+    }
+    post(context, action, hostAction, session, parameters, read) {
+        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)),
+        }), 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 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.5", ngImport: i0, type: NxrViewerClientService, 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;
+function withPages(pages, answer) {
+    answer?.pages.forEach((html, offset) => pages.set(answer.startIndex + offset, html));
+    return pages;
+}
+/**
+ * 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);
+    optionsState = signal(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "optionsState" }] : /* istanbul ignore next */ []));
+    reportState = signal(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "reportState" }] : /* istanbul ignore next */ []));
+    htmlState = signal(new Map(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "htmlState" }] : /* istanbul ignore next */ []));
+    pageIndexState = signal(0, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "pageIndexState" }] : /* istanbul ignore next */ []));
+    pendingState = signal(0, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "pendingState" }] : /* istanbul ignore next */ []));
+    failureState = signal(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "failureState" }] : /* istanbul ignore next */ []));
+    /** The options from the last AngularViewerData answer. */
+    options = this.optionsState.asReadonly();
+    /** The report from the last GetReport answer, or null before one. */
+    report = this.reportState.asReadonly();
+    /** The 0-based index of the page on screen. */
+    pageIndex = this.pageIndexState.asReadonly();
+    /** The failure on show, until it is dismissed. */
+    failure = this.failureState.asReadonly();
+    /** How many pages the report has; 0 before one is loaded. */
+    pageCount = computed(() => this.reportState()?.pageCount ?? 0, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "pageCount" }] : /* istanbul ignore next */ []));
+    /** Whether a request the user waits for is on its way. Keep-alive requests do not count. */
+    busy = computed(() => this.pendingState() > 0, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "busy" }] : /* istanbul ignore next */ []));
+    /** The page on screen, or null before a report. */
+    shownPage = computed(() => {
+        const report = this.reportState();
+        const index = this.pageIndexState();
+        if (!report || index >= report.pageCount)
+            return null;
+        return { index, size: report.pages[index], html: this.htmlState().get(index) ?? null };
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "shownPage" }] : /* istanbul ignore next */ []));
+    /** Emits after each successful GetReport answer. */
+    reportLoaded = new Subject();
+    /** Emits each failure put on show. */
+    failed = new Subject();
+    context = null;
+    session = null;
+    /** Every request the user waits for. */
+    requests = new Subscription();
+    /** The page requests among them, which a new rendering of the report makes obsolete. */
+    pageRequests = new Subscription();
+    keepAlive = Subscription.EMPTY;
+    pagesOnTheWay = new Set();
+    /** True from the moment an expired report is sent to be rendered again until that rendering settles. */
+    recovering = false;
+    destroyed = false;
+    constructor() {
+        inject(DestroyRef).onDestroy(() => {
+            this.destroyed = true;
+            this.close();
+            this.reportLoaded.complete();
+            this.failed.complete();
+        });
+    }
+    /** Opens the report the host action names, in place of whatever this viewer showed. */
+    open(context, action) {
+        if (this.destroyed)
+            return;
+        this.close();
+        this.context = context;
+        this.reportState.set(null);
+        this.htmlState.set(new Map());
+        this.pageIndexState.set(0);
+        this.failureState.set(null);
+        if (!context.requestUrl)
+            return;
+        this.track(this.client.openViewer(context, action), false, (answer) => {
+            const session = { token: answer.token, options: answer.options };
+            this.session = session;
+            this.optionsState.set(answer.options);
+            this.startKeepAlive(context, session);
+            this.render();
+        });
+    }
+    /**
+     * Shows the page at a 0-based index; an index outside the report is ignored. Asking for the page already
+     * on screen fetches it again when its HTML is missing, as it is after its request failed.
+     */
+    goToPage(index) {
+        const inReport = Number.isInteger(index) && index >= 0 && index < this.pageCount();
+        if (this.destroyed || !inReport)
+            return;
+        this.pageIndexState.set(index);
+        this.loadPage(index);
+    }
+    /** Takes the failure off show. */
+    dismissFailure() {
+        this.failureState.set(null);
+    }
+    /**
+     * GetReport, asking for the page on screen, which stays on screen when it is still in the report. The new
+     * rendering makes every page request still on its way obsolete. Its settling ends a recovery.
+     */
+    render() {
+        const { context, session } = this.connection();
+        const range = { startIndex: this.pageIndexState(), count: 1 };
+        const rendering = this.client
+            .getReport(context, session, range)
+            .pipe(finalize(() => (this.recovering = false)));
+        this.track(rendering, false, (report) => {
+            this.pageRequests.unsubscribe();
+            this.pageRequests = new Subscription();
+            this.htmlState.set(withPages(new Map(), report.pagesHtml));
+            this.reportState.set(report);
+            this.pageIndexState.update((index) => Math.max(0, Math.min(index, report.pageCount - 1)));
+            this.reportLoaded.next();
+            this.loadPage(this.pageIndexState());
+        });
+    }
+    /** GetPages for one page, unless the page is already here or on its way. */
+    loadPage(index) {
+        if (index >= this.pageCount() || this.htmlState().has(index) || this.pagesOnTheWay.has(index))
+            return;
+        const { context, session } = this.connection();
+        this.pagesOnTheWay.add(index);
+        const request = this.client
+            .getPages(context, session, { startIndex: index, count: 1 })
+            .pipe(finalize(() => this.pagesOnTheWay.delete(index)));
+        this.pageRequests.add(this.track(request, true, (answer) => this.htmlState.set(withPages(new Map(this.htmlState()), answer))));
+    }
+    /**
+     * Sends a request the user waits for, and returns its subscription. A `recoverable` request that finds the
+     * report gone renders it again; every other failure goes on show.
+     */
+    track(request, recoverable, next) {
+        this.pendingState.update((count) => count + 1);
+        const subscription = request
+            .pipe(finalize(() => this.pendingState.update((count) => count - 1)))
+            .subscribe({
+            next,
+            error: (failure) => this.fail(failure, recoverable),
+        });
+        this.requests.add(subscription);
+        return subscription;
+    }
+    /**
+     * An expired report found by a recoverable request is rendered again, unless a rendering is already on its
+     * way; every other failure goes on show. Only that rendering settling ends the recovery, so failures in the
+     * meantime cannot start a second one.
+     */
+    fail(failure, recoverable) {
+        if (failure.type === 'CacheExpired' && recoverable) {
+            if (!this.recovering) {
+                this.recovering = true;
+                this.render();
+            }
+            return;
+        }
+        this.failureState.set(failure);
+        this.failed.next(failure);
+    }
+    /** UpdateCache every three minutes while the server keeps the report. Its failures are not shown. */
+    startKeepAlive(context, session) {
+        const { allowAutoUpdateCache, cacheMode } = session.options.server;
+        if (!allowAutoUpdateCache || cacheMode === 'None')
+            return;
+        this.keepAlive = interval(NXR_KEEP_ALIVE_MS)
+            .pipe(exhaustMap(() => this.client.updateCache(context, session).pipe(catchError(() => EMPTY))))
+            .subscribe();
+    }
+    /** Stops every request and the keep-alive. */
+    close() {
+        this.requests.unsubscribe();
+        this.requests = new Subscription();
+        this.pageRequests = new Subscription();
+        this.keepAlive.unsubscribe();
+        this.session = null;
+        this.pagesOnTheWay.clear();
+        this.recovering = false;
+    }
+    connection() {
+        if (!this.context || !this.session)
+            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 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.5", ngImport: i0, type: NxrViewerSessionService, 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 toolbar's page navigation.
+ *
+ * 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.
+ *
+ * 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.
+ */
+class NxrViewerToolbarComponent {
+    /** 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 */ []));
+    /** The 0-based index of the page on screen. */
+    pageIndex = input(0, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "pageIndex" }] : /* istanbul ignore next */ []));
+    /** How many pages the report has. */
+    pageCount = input(0, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "pageCount" }] : /* istanbul ignore next */ []));
+    /** Whether a request the user waits for is on its way. */
+    busy = input(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "busy" }] : /* istanbul ignore next */ []));
+    /** The captions to show. */
+    strings = input(NXR_ENGLISH, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "strings" }] : /* istanbul ignore next */ []));
+    /** The 0-based page the user asked for. */
+    goToPage = output();
+    pageBoxWidth = PAGE_BOX_WIDTH_PX;
+    toolbar = computed(() => this.options()?.toolbar ?? null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "toolbar" }] : /* istanbul ignore next */ []));
+    appearance = computed(() => this.options()?.appearance ?? null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "appearance" }] : /* istanbul ignore next */ []));
+    /**
+     * Stimulsoft's rule: navigation is off in `MultiplePages`, and in `Continuous` unless the report
+     * panel scrolls or the viewer is full screen — in those cases the page is reached by scrolling.
+     */
+    navigationDisabled = computed(() => {
+        const toolbar = this.toolbar();
+        const appearance = this.appearance();
+        if (!toolbar || !appearance)
+            return true;
+        if (toolbar.viewMode === 'MultiplePages')
+            return true;
+        return (toolbar.viewMode === 'Continuous' &&
+            !appearance.scrollbarsMode &&
+            !appearance.fullScreenMode);
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "navigationDisabled" }] : /* 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 */
+    ...(ngDevMode ? [{ debugName: "showPreviousPage" }] : /* istanbul ignore next */ []));
+    showCurrentPage = computed(() => this.toolbar()?.showCurrentPageControl === true, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "showCurrentPage" }] : /* istanbul ignore next */ []));
+    showNextPage = computed(() => this.toolbar()?.showNextPageButton === true, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "showNextPage" }] : /* istanbul ignore next */ []));
+    showLastPage = computed(() => this.toolbar()?.showLastPageButton === true, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "showLastPage" }] : /* istanbul ignore next */ []));
+    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 */
+    ...(ngDevMode ? [{ debugName: "atEnd" }] : /* istanbul ignore next */ []));
+    pageControlDisabled = computed(() => this.busy() || this.navigationDisabled() || this.pageCount() <= 1, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "pageControlDisabled" }] : /* istanbul ignore next */ []));
+    backgroundColor = computed(() => this.toolbar()?.backgroundColor || null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "backgroundColor" }] : /* istanbul ignore next */ []));
+    fontColor = computed(() => this.toolbar()?.fontColor || null, /* @ts-ignore */
+    ...(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. */
+    border = computed(() => {
+        const toolbar = this.toolbar();
+        if (!toolbar || toolbar.displayMode === 'Separated' || !toolbar.borderColor)
+            return null;
+        return `1px solid ${toolbar.borderColor}`;
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "border" }] : /* istanbul ignore next */ []));
+    justifyContent = computed(() => {
+        switch (this.toolbar()?.alignment) {
+            case 'Center':
+                return 'center';
+            case 'Right':
+                return 'flex-end';
+            default:
+                return 'flex-start';
+        }
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "justifyContent" }] : /* istanbul ignore next */ []));
+    /**
+     * Enter in the page box goes to the page typed, reading anything that is not a number as page 1
+     * and clamping to the report, as Stimulsoft's page control does. Leaving the box does nothing.
+     */
+    enterPage(event) {
+        const box = event.target;
+        const typed = Number.parseInt(box.value, 10);
+        const page = Math.min(Math.max(Number.isNaN(typed) ? 1 : typed, 1), this.pageCount());
+        box.value = String(page);
+        this.goTo(page - 1);
+    }
+    goTo(index) {
+        if (this.busy() || index === this.pageIndex() || index < 0 || index >= this.pageCount())
+            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 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.5", ngImport: i0, type: NxrViewerToolbarComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'nxr-viewer-toolbar', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, host: {
+                        class: 'nxr-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"] }] } });
+
+/**
+ * A report served by `Nextera.Reports.Angular.NetCore`, shown page by page.
+ *
+ * The inputs, outputs and `api` are Stimulsoft's `stimulsoft-viewer-angular`, so a host swaps the
+ * component and keeps its bindings. As there, a change to any input reloads the report: the
+ * component asks for the viewer's options again and opens the report the action names.
+ *
+ * Each viewer provides its own session, so several on a page never share a report or a token.
+ */
+class NxrReportViewerComponent {
+    /** 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 */ []));
+    /** The host action that answers the first request, and so names the report to open. */
+    action = input('', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "action" }] : /* istanbul ignore next */ []));
+    /** Sent to the host with every request, as JSON, when it is truthy. */
+    properties = input(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "properties" }] : /* istanbul ignore next */ []));
+    /** The viewer's width; `100%` when it is not given. */
+    width = input(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "width" }] : /* istanbul ignore next */ []));
+    /** The viewer's height; 650px when the report panel scrolls, otherwise `100%`. */
+    height = input(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "height" }] : /* istanbul ignore next */ []));
+    /** The viewer's background; `White` when it is not given. */
+    backgroundColor = input('White', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "backgroundColor" }] : /* istanbul ignore next */ []));
+    /** Styles for the viewer's root element. Width, height and background take precedence over it. */
+    style = input(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "style" }] : /* istanbul ignore next */ []));
+    /** Called for every request; each key of an object it returns becomes a form field. */
+    postParametersFunction = input(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "postParametersFunction" }] : /* istanbul ignore next */ []));
+    /** Emits after each report is loaded. */
+    loaded = output();
+    /** Emits every failure the viewer puts on show. */
+    error = output();
+    session = inject(NxrViewerSessionService);
+    /** 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 */ []));
+    toolbarVisible = computed(() => this.session.options()?.toolbar.visible !== false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "toolbarVisible" }] : /* 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 */
+    ...(ngDevMode ? [{ debugName: "showPageShadow" }] : /* istanbul ignore next */ []));
+    pageBorder = computed(() => {
+        const color = this.appearance()?.pageBorderColor;
+        return color ? `1px solid ${color}` : null;
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "pageBorder" }] : /* istanbul ignore next */ []));
+    /** Stimulsoft aligns the pages with the report panel's text alignment; `Default` means centred. */
+    pageAlignment = computed(() => {
+        switch (this.appearance()?.pageAlignment) {
+            case 'Left':
+                return 'left';
+            case 'Right':
+                return 'right';
+            default:
+                return 'center';
+        }
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "pageAlignment" }] : /* istanbul ignore next */ []));
+    /** The report panel scrolls inside the viewer only when the server asks for scrollbars. */
+    pagesOverflow = computed(() => this.appearance()?.scrollbarsMode ? 'auto' : 'hidden', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "pagesOverflow" }] : /* istanbul ignore next */ []));
+    rootWidth = computed(() => this.width() ?? '100%', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "rootWidth" }] : /* istanbul ignore next */ []));
+    rootBackgroundColor = computed(() => this.backgroundColor() ?? 'White', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "rootBackgroundColor" }] : /* istanbul ignore next */ []));
+    rootHeight = computed(() => {
+        const given = this.height();
+        if (given !== null)
+            return given;
+        return this.appearance()?.scrollbarsMode ? '650px' : '100%';
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "rootHeight" }] : /* istanbul ignore next */ []));
+    constructor() {
+        this.session.reportLoaded
+            .pipe(takeUntilDestroyed())
+            .subscribe(() => this.loaded.emit());
+        this.session.failed
+            .pipe(takeUntilDestroyed())
+            .subscribe((failure) => this.error.emit(failure));
+    }
+    /**
+     * A change to any input reloads, as Stimulsoft's viewer does: its `ngOnChanges` never looks at
+     * which input changed, so even a width change asks the server for the options and the report
+     * again. Matching that keeps a host's reload behaviour the same across the swap.
+     */
+    ngOnChanges() {
+        this.session.open(this.context(), this.action());
+    }
+    /**
+     * 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
+     * literal's accessor is the literal.
+     */
+    buildApi() {
+        const session = this.session;
+        return {
+            get currentPage() {
+                return session.pageIndex();
+            },
+            set currentPage(value) {
+                session.goToPage(value);
+            },
+            get pagesCount() {
+                return session.pageCount();
+            },
+            get reportType() {
+                return 'Report';
+            },
+        };
+    }
+    context() {
+        return {
+            requestUrl: this.requestUrl(),
+            properties: this.properties(),
+            postParametersFunction: this.postParametersFunction(),
+            strings: NXR_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 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.5", ngImport: i0, type: NxrReportViewerComponent, 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"] }] } });
+
+/*
+ * Public API Surface of @nexterajs/report-viewer
+ */
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { NXR_VIEWER_PROTOCOL, NxrReportViewerComponent };
+//# sourceMappingURL=nexterajs-report-viewer.mjs.map