arilekh-report-viewer 1.0.0

package/fesm2022/arilekh-report-viewer.mjs

@@ -0,0 +1,1087 @@
+import * as i0 from '@angular/core';
+import { ViewChild, Input, ChangeDetectionStrategy, Component, Injectable, EventEmitter, Output, ViewChildren } from '@angular/core';
+import * as i3 from '@angular/common';
+import { CommonModule } from '@angular/common';
+import * as i2 from '@angular/forms';
+import { FormsModule } from '@angular/forms';
+import { BehaviorSubject, Subject, Observable } from 'rxjs';
+import { tap, takeUntil, debounceTime, distinctUntilChanged, switchMap } from 'rxjs/operators';
+import * as i1 from '@angular/common/http';
+import { HttpParams } from '@angular/common/http';
+
+const PT_TO_PX$1 = 1.333; // 1pt = 1.333px at 96dpi
+class PageRendererComponent {
+    page;
+    scale = PT_TO_PX$1;
+    pageEl;
+    Math = Math;
+    get widthPx() { return (this.page?.widthPt ?? 595) * this.scale; }
+    get heightPx() { return (this.page?.heightPt ?? 842) * this.scale; }
+    ngOnChanges(c) { }
+    // ── Style builders ────────────────────────────────────────────────────────
+    textStyle(el) {
+        const s = el.style;
+        const rot = el.rotation ? `rotate(${el.rotation}deg)` : '';
+        const vAlign = el.verticalAlign === 'middle' ? 'center'
+            : el.verticalAlign === 'bottom' ? 'flex-end'
+                : 'flex-start';
+        return {
+            position: 'absolute',
+            left: `${el.x * this.scale}px`,
+            top: `${el.y * this.scale}px`,
+            width: `${el.width * this.scale}px`,
+            height: `${el.height * this.scale}px`,
+            overflow: 'hidden',
+            fontSize: `${(s?.fontSize ?? 9) * this.scale}px`,
+            fontFamily: s?.fontFamily ?? 'inherit',
+            fontWeight: s?.bold ? 'bold' : 'normal',
+            fontStyle: s?.italic ? 'italic' : 'normal',
+            textDecoration: s?.underline ? 'underline' : 'none',
+            color: s?.foreColor ?? '#000',
+            background: s?.backColor ?? 'transparent',
+            textAlign: el.alignment ?? 'left',
+            display: 'flex',
+            flexDirection: 'column',
+            justifyContent: vAlign,
+            paddingLeft: `${(s?.paddingLeft ?? 0) * this.scale}px`,
+            paddingRight: `${(s?.paddingRight ?? 0) * this.scale}px`,
+            transform: rot,
+            transformOrigin: rot ? 'center center' : '',
+            boxSizing: 'border-box',
+        };
+    }
+    rectStyle(el) {
+        const rot = el.rotation ? `rotate(${el.rotation}deg)` : '';
+        return {
+            position: 'absolute',
+            left: `${el.x * this.scale}px`,
+            top: `${el.y * this.scale}px`,
+            width: `${el.width * this.scale}px`,
+            height: `${el.height * this.scale}px`,
+            background: el.fillColor ?? 'transparent',
+            border: el.strokeColor
+                ? `${(el.strokeWidth ?? 1) * this.scale}px solid ${el.strokeColor}`
+                : 'none',
+            borderRadius: el.borderRadius ? `${el.borderRadius}%` : '0',
+            transform: rot,
+            transformOrigin: rot ? 'center center' : '',
+            boxSizing: 'border-box',
+        };
+    }
+    lineSvgStyle(el) {
+        const x1 = el.x, y1 = el.y;
+        const x2 = el.x2 ?? el.x, y2 = el.y2 ?? el.y;
+        const left = Math.min(x1, x2) * this.scale;
+        const top = Math.min(y1, y2) * this.scale;
+        const width = Math.max(Math.abs(x2 - x1) * this.scale, (el.strokeWidth ?? 1) * this.scale + 2);
+        const height = Math.max(Math.abs(y2 - y1) * this.scale, (el.strokeWidth ?? 1) * this.scale + 2);
+        const rot = el.rotation ? `rotate(${el.rotation}deg)` : '';
+        return {
+            position: 'absolute',
+            left: `${left}px`, top: `${top}px`,
+            width: `${width}px`, height: `${height}px`,
+            transform: rot, transformOrigin: rot ? 'center center' : '',
+        };
+    }
+    lineX1(el) {
+        return (el.x * this.scale) - Math.min(el.x, el.x2 ?? el.x) * this.scale;
+    }
+    lineY1(el) {
+        return (el.y * this.scale) - Math.min(el.y, el.y2 ?? el.y) * this.scale;
+    }
+    lineX2(el) {
+        return ((el.x2 ?? el.x) * this.scale) - Math.min(el.x, el.x2 ?? el.x) * this.scale;
+    }
+    lineY2(el) {
+        return ((el.y2 ?? el.y) * this.scale) - Math.min(el.y, el.y2 ?? el.y) * this.scale;
+    }
+    ellipseSvgStyle(el) {
+        const rot = el.rotation ? `rotate(${el.rotation}deg)` : '';
+        return {
+            position: 'absolute',
+            left: `${el.x * this.scale}px`, top: `${el.y * this.scale}px`,
+            width: `${el.width * this.scale}px`, height: `${el.height * this.scale}px`,
+            transform: rot, transformOrigin: rot ? 'center center' : '',
+        };
+    }
+    imageStyle(el) {
+        const rot = el.rotation ? `rotate(${el.rotation}deg)` : '';
+        return {
+            position: 'absolute',
+            left: `${el.x * this.scale}px`,
+            top: `${el.y * this.scale}px`,
+            width: `${el.width * this.scale}px`,
+            height: `${el.height * this.scale}px`,
+            objectFit: el.stretch ?? 'contain',
+            transform: rot, transformOrigin: rot ? 'center center' : '',
+        };
+    }
+    openLink(url) {
+        window.open(url, '_blank', 'noopener');
+    }
+    /** Expose the page div for screenshot (called by parent). */
+    getPageElement() {
+        return this.pageEl?.nativeElement;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: PageRendererComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: PageRendererComponent, isStandalone: true, selector: "arv-page-renderer", inputs: { page: "page", scale: "scale" }, viewQueries: [{ propertyName: "pageEl", first: true, predicate: ["pageEl"], descendants: true }], usesOnChanges: true, ngImport: i0, template: `
+    <div class="arv-page"
+         #pageEl
+         [style.width.px]="widthPx"
+         [style.height.px]="heightPx"
+         [attr.data-page]="page?.pageNumber">
+
+      @if (page) {
+        @for (el of page.elements; track $index) {
+          <!-- TEXT -->
+          @if (el.type === 'text') {
+            <div [style]="textStyle(el)"
+                 [class.arv-hyperlink]="!!el.hyperlinkUrl"
+                 (click)="el.hyperlinkUrl && openLink(el.hyperlinkUrl)">
+              {{ el.text }}
+            </div>
+          }
+          <!-- RECT -->
+          @else if (el.type === 'rect') {
+            <div [style]="rectStyle(el)"></div>
+          }
+          <!-- LINE -->
+          @else if (el.type === 'line') {
+            <svg [style]="lineSvgStyle(el)" xmlns="http://www.w3.org/2000/svg">
+              <line
+                [attr.x1]="lineX1(el)" [attr.y1]="lineY1(el)"
+                [attr.x2]="lineX2(el)" [attr.y2]="lineY2(el)"
+                [attr.stroke]="el.strokeColor || '#000'"
+                [attr.stroke-width]="(el.strokeWidth || 1) * scale" />
+            </svg>
+          }
+          <!-- ELLIPSE -->
+          @else if (el.type === 'ellipse') {
+            <svg [style]="ellipseSvgStyle(el)" xmlns="http://www.w3.org/2000/svg">
+              <ellipse
+                [attr.cx]="(el.width  * scale / 2)"
+                [attr.cy]="(el.height * scale / 2)"
+                [attr.rx]="Math.max(0, el.width  * scale / 2 - (el.strokeWidth||1)*scale/2)"
+                [attr.ry]="Math.max(0, el.height * scale / 2 - (el.strokeWidth||1)*scale/2)"
+                [attr.fill]="el.fillColor || 'none'"
+                [attr.stroke]="el.strokeColor || '#000'"
+                [attr.stroke-width]="(el.strokeWidth || 1) * scale" />
+            </svg>
+          }
+          <!-- IMAGE -->
+          @else if (el.type === 'image') {
+            <img [style]="imageStyle(el)"
+                 [src]="el.src"
+                 alt="" />
+          }
+        }
+      }
+    </div>
+  `, isInline: true, styles: [":host{display:block}.arv-page{position:relative;background:#fff;overflow:hidden;box-shadow:0 2px 12px #0000004d}.arv-hyperlink{cursor:pointer}.arv-hyperlink:hover{opacity:.8}svg{overflow:visible}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: PageRendererComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'arv-page-renderer', standalone: true, imports: [CommonModule], changeDetection: ChangeDetectionStrategy.OnPush, template: `
+    <div class="arv-page"
+         #pageEl
+         [style.width.px]="widthPx"
+         [style.height.px]="heightPx"
+         [attr.data-page]="page?.pageNumber">
+
+      @if (page) {
+        @for (el of page.elements; track $index) {
+          <!-- TEXT -->
+          @if (el.type === 'text') {
+            <div [style]="textStyle(el)"
+                 [class.arv-hyperlink]="!!el.hyperlinkUrl"
+                 (click)="el.hyperlinkUrl && openLink(el.hyperlinkUrl)">
+              {{ el.text }}
+            </div>
+          }
+          <!-- RECT -->
+          @else if (el.type === 'rect') {
+            <div [style]="rectStyle(el)"></div>
+          }
+          <!-- LINE -->
+          @else if (el.type === 'line') {
+            <svg [style]="lineSvgStyle(el)" xmlns="http://www.w3.org/2000/svg">
+              <line
+                [attr.x1]="lineX1(el)" [attr.y1]="lineY1(el)"
+                [attr.x2]="lineX2(el)" [attr.y2]="lineY2(el)"
+                [attr.stroke]="el.strokeColor || '#000'"
+                [attr.stroke-width]="(el.strokeWidth || 1) * scale" />
+            </svg>
+          }
+          <!-- ELLIPSE -->
+          @else if (el.type === 'ellipse') {
+            <svg [style]="ellipseSvgStyle(el)" xmlns="http://www.w3.org/2000/svg">
+              <ellipse
+                [attr.cx]="(el.width  * scale / 2)"
+                [attr.cy]="(el.height * scale / 2)"
+                [attr.rx]="Math.max(0, el.width  * scale / 2 - (el.strokeWidth||1)*scale/2)"
+                [attr.ry]="Math.max(0, el.height * scale / 2 - (el.strokeWidth||1)*scale/2)"
+                [attr.fill]="el.fillColor || 'none'"
+                [attr.stroke]="el.strokeColor || '#000'"
+                [attr.stroke-width]="(el.strokeWidth || 1) * scale" />
+            </svg>
+          }
+          <!-- IMAGE -->
+          @else if (el.type === 'image') {
+            <img [style]="imageStyle(el)"
+                 [src]="el.src"
+                 alt="" />
+          }
+        }
+      }
+    </div>
+  `, styles: [":host{display:block}.arv-page{position:relative;background:#fff;overflow:hidden;box-shadow:0 2px 12px #0000004d}.arv-hyperlink{cursor:pointer}.arv-hyperlink:hover{opacity:.8}svg{overflow:visible}\n"] }]
+        }], propDecorators: { page: [{
+                type: Input
+            }], scale: [{
+                type: Input
+            }], pageEl: [{
+                type: ViewChild,
+                args: ['pageEl']
+            }] } });
+
+// ── Service ────────────────────────────────────────────────────────────────
+class ReportViewerApiService {
+    http;
+    baseUrl = '';
+    // ── Observable state ───────────────────────────────────────────────────────
+    _session = new BehaviorSubject(null);
+    _loading = new BehaviorSubject(false);
+    _error = new BehaviorSubject(null);
+    _pageCache = new Map();
+    _navigateTo$ = new Subject();
+    session$ = this._session.asObservable();
+    loading$ = this._loading.asObservable();
+    error$ = this._error.asObservable();
+    navigateTo$ = this._navigateTo$.asObservable();
+    // ── Configuration ──────────────────────────────────────────────────────────
+    configure(apiBaseUrl) {
+        this.baseUrl = apiBaseUrl.replace(/\/$/, '');
+    }
+    get sessionId() {
+        return this._session.value?.sessionId ?? null;
+    }
+    get pageCount() {
+        return this._session.value?.pageCount ?? 0;
+    }
+    get pageWidthPt() {
+        return this._session.value?.pageWidthPt ?? 595;
+    }
+    get pageHeightPt() {
+        return this._session.value?.pageHeightPt ?? 842;
+    }
+    // ── Render ────────────────────────────────────────────────────────────────
+    constructor(http) {
+        this.http = http;
+    }
+    render(req) {
+        this._loading.next(true);
+        this._error.next(null);
+        this._pageCache.clear();
+        this._session.next(null);
+        return this.http
+            .post(`${this.baseUrl}/api/reports/render`, req)
+            .pipe(tap({
+            next: r => { this._session.next(r); this._loading.next(false); },
+            error: e => {
+                this._error.next(e?.error?.error ?? 'Render failed');
+                this._loading.next(false);
+            }
+        }));
+    }
+    // ── Page retrieval (cached) ────────────────────────────────────────────────
+    getPage(pageNumber) {
+        const id = this.sessionId;
+        if (!id)
+            throw new Error('No active session.');
+        // Check cache first
+        const cached = this._pageCache.get(pageNumber);
+        if (cached) {
+            return new Observable(o => { o.next(cached); o.complete(); });
+        }
+        return this.http
+            .get(`${this.baseUrl}/api/reports/${id}/pages/${pageNumber}`)
+            .pipe(tap(p => this._pageCache.set(pageNumber, p)));
+    }
+    getPageRange(from, to) {
+        const id = this.sessionId;
+        if (!id)
+            throw new Error('No active session.');
+        const params = new HttpParams()
+            .set('from', from.toString())
+            .set('to', to.toString());
+        return this.http.get(`${this.baseUrl}/api/reports/${id}/pages`, { params });
+    }
+    // ── Thumbnails ────────────────────────────────────────────────────────────
+    getThumbnails() {
+        const id = this.sessionId;
+        return this.http.get(`${this.baseUrl}/api/reports/${id}/thumbnails`);
+    }
+    // ── Search ────────────────────────────────────────────────────────────────
+    search(query) {
+        const id = this.sessionId;
+        const params = new HttpParams().set('q', query);
+        return this.http.get(`${this.baseUrl}/api/reports/${id}/search`, { params });
+    }
+    // ── Navigation helper ─────────────────────────────────────────────────────
+    navigateTo(page) {
+        this._navigateTo$.next(Math.max(1, Math.min(page, this.pageCount)));
+    }
+    // ── Cache management ──────────────────────────────────────────────────────
+    evictPage(pageNumber) {
+        this._pageCache.delete(pageNumber);
+    }
+    clearCache() {
+        this._pageCache.clear();
+    }
+    isPageCached(pageNumber) {
+        return this._pageCache.has(pageNumber);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: ReportViewerApiService, deps: [{ token: i1.HttpClient }], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: ReportViewerApiService, providedIn: 'root' });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: ReportViewerApiService, decorators: [{
+            type: Injectable,
+            args: [{ providedIn: 'root' }]
+        }], ctorParameters: () => [{ type: i1.HttpClient }] });
+
+class LeftPanelComponent {
+    api;
+    cdr;
+    currentPage = 1;
+    pageSelected = new EventEmitter();
+    thumbnails;
+    searchQuery = '';
+    lastQuery = '';
+    searching = false;
+    searchResults = [];
+    destroy$ = new Subject();
+    search$ = new Subject();
+    constructor(api, cdr) {
+        this.api = api;
+        this.cdr = cdr;
+    }
+    ngOnInit() {
+        // Load thumbnails when session is ready
+        this.api.session$
+            .pipe(takeUntil(this.destroy$))
+            .subscribe(s => {
+            if (s)
+                this.loadThumbnails();
+        });
+        // Debounced search
+        this.search$.pipe(takeUntil(this.destroy$), debounceTime(400), distinctUntilChanged(), switchMap(q => {
+            if (!q.trim()) {
+                this.searchResults = [];
+                this.searching = false;
+                this.cdr.markForCheck();
+                return [];
+            }
+            this.searching = true;
+            this.cdr.markForCheck();
+            return this.api.search(q);
+        })).subscribe({
+            next: r => {
+                this.searchResults = r.results;
+                this.lastQuery = r.query;
+                this.searching = false;
+                this.cdr.markForCheck();
+            },
+            error: () => { this.searching = false; this.cdr.markForCheck(); }
+        });
+    }
+    ngOnDestroy() {
+        this.destroy$.next();
+        this.destroy$.complete();
+    }
+    loadThumbnails() {
+        this.api.getThumbnails()
+            .pipe(takeUntil(this.destroy$))
+            .subscribe(t => {
+            this.thumbnails = t;
+            this.cdr.markForCheck();
+        });
+    }
+    onSearchChange(q) {
+        this.search$.next(q);
+    }
+    goTo(page) {
+        this.pageSelected.emit(page);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: LeftPanelComponent, deps: [{ token: ReportViewerApiService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: LeftPanelComponent, isStandalone: true, selector: "arv-left-panel", inputs: { currentPage: "currentPage" }, outputs: { pageSelected: "pageSelected" }, ngImport: i0, template: `
+    <div class="arv-left">
+
+      <!-- Header -->
+      <div class="arv-left__header">
+        <span class="arv-left__title">Pages</span>
+        <span class="arv-left__badge">{{ api.pageCount }}</span>
+      </div>
+
+      <!-- Search -->
+      <div class="arv-left__search">
+        <input class="arv-input"
+               placeholder="Search in report…"
+               [(ngModel)]="searchQuery"
+               (ngModelChange)="onSearchChange($event)" />
+        @if (searching) {
+          <span class="arv-spinner-sm"></span>
+        }
+      </div>
+
+      <!-- Search results -->
+      @if (searchResults.length > 0) {
+        <div class="arv-left__section-title">
+          {{ searchResults.length }} result(s) for "{{ lastQuery }}"
+        </div>
+        <div class="arv-left__list">
+          @for (hit of searchResults; track hit.pageNumber) {
+            <div class="arv-bm arv-bm--search"
+                 [class.arv-bm--active]="currentPage === hit.pageNumber"
+                 (click)="goTo(hit.pageNumber)">
+              <span class="arv-bm__icon">🔍</span>
+              <div class="arv-bm__col">
+                <span class="arv-bm__label">Page {{ hit.pageNumber }}</span>
+                <span class="arv-bm__snippet">{{ hit.snippet }}</span>
+              </div>
+            </div>
+          }
+        </div>
+      }
+
+      <!-- Page thumbnails -->
+      @if (searchResults.length === 0) {
+        <div class="arv-left__section-title">All Pages</div>
+        <div class="arv-left__list">
+          @if (thumbnails) {
+            @for (pg of thumbnails.pages; track pg.pageNumber) {
+              <div class="arv-bm arv-thumb"
+                   [class.arv-bm--active]="currentPage === pg.pageNumber"
+                   (click)="goTo(pg.pageNumber)">
+                <!-- Mini thumbnail placeholder -->
+                <div class="arv-thumb__box">
+                  <span class="arv-thumb__num">{{ pg.pageNumber }}</span>
+                </div>
+                <div class="arv-bm__col">
+                  <span class="arv-bm__label">Page {{ pg.pageNumber }}</span>
+                  @if (pg.firstText) {
+                    <span class="arv-bm__snippet">{{ pg.firstText | slice:0:40 }}</span>
+                  }
+                </div>
+              </div>
+            }
+          } @else {
+            <div class="arv-left__loading">Loading…</div>
+          }
+        </div>
+      }
+
+      <!-- Footer info -->
+      <div class="arv-left__footer">
+        <span>{{ api.pageCount }} pages</span>
+        @if (api.pageCount > 0) {
+          <span>· Page {{ currentPage }}</span>
+        }
+      </div>
+    </div>
+  `, isInline: true, styles: [".arv-left{width:200px;flex-shrink:0;display:flex;flex-direction:column;background:var(--arv-surface, #2a2a3e);border-right:1px solid var(--arv-border, #3d3d5c);overflow:hidden;height:100%}.arv-left__header{display:flex;align-items:center;justify-content:space-between;padding:8px 10px 4px;font-weight:700;font-size:11px;color:var(--arv-text-muted, #888);text-transform:uppercase;flex-shrink:0}.arv-left__badge{font-size:9px;background:var(--arv-border, #3d3d5c);border-radius:8px;padding:1px 6px;color:var(--arv-text, #ccc)}.arv-left__search{display:flex;align-items:center;gap:4px;padding:4px 8px;flex-shrink:0}.arv-input{flex:1;padding:4px 8px;background:var(--arv-surface2, #313148);border:1px solid var(--arv-border, #3d3d5c);border-radius:4px;color:var(--arv-text, #ccc);font-size:11px;outline:none;width:100%;box-sizing:border-box}.arv-left__section-title{font-size:9px;color:var(--arv-text-muted, #888);text-transform:uppercase;padding:4px 10px 2px;flex-shrink:0}.arv-left__list{flex:1;overflow-y:auto;min-height:0}.arv-left__loading{padding:12px;font-size:11px;color:var(--arv-text-muted, #888)}.arv-bm{display:flex;align-items:flex-start;gap:6px;padding:5px 10px;cursor:pointer;font-size:11px;border-radius:2px;margin:1px 4px}.arv-bm:hover{background:var(--arv-surface2, #313148)}.arv-bm--active{background:#5b8ef026;color:var(--arv-accent, #5b8ef0)}.arv-bm__col{display:flex;flex-direction:column;gap:2px;overflow:hidden}.arv-bm__label{font-size:11px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.arv-bm__snippet{font-size:9px;color:var(--arv-text-muted, #888);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.arv-bm__icon{flex-shrink:0;font-size:12px}.arv-thumb__box{width:30px;height:40px;background:#fff;border:1px solid var(--arv-border, #3d3d5c);border-radius:2px;display:flex;align-items:center;justify-content:center;flex-shrink:0}.arv-thumb__num{font-size:8px;color:#999}.arv-left__footer{padding:6px 10px;font-size:10px;color:var(--arv-text-muted, #888);border-top:1px solid var(--arv-border, #3d3d5c);flex-shrink:0;display:flex;gap:4px}.arv-spinner-sm{width:14px;height:14px;border:2px solid var(--arv-border, #3d3d5c);border-top-color:var(--arv-accent, #5b8ef0);border-radius:50%;animation:arv-spin .7s linear infinite;flex-shrink:0}@keyframes arv-spin{to{transform:rotate(360deg)}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "pipe", type: i3.SlicePipe, name: "slice" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: LeftPanelComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'arv-left-panel', standalone: true, imports: [CommonModule, FormsModule], changeDetection: ChangeDetectionStrategy.OnPush, template: `
+    <div class="arv-left">
+
+      <!-- Header -->
+      <div class="arv-left__header">
+        <span class="arv-left__title">Pages</span>
+        <span class="arv-left__badge">{{ api.pageCount }}</span>
+      </div>
+
+      <!-- Search -->
+      <div class="arv-left__search">
+        <input class="arv-input"
+               placeholder="Search in report…"
+               [(ngModel)]="searchQuery"
+               (ngModelChange)="onSearchChange($event)" />
+        @if (searching) {
+          <span class="arv-spinner-sm"></span>
+        }
+      </div>
+
+      <!-- Search results -->
+      @if (searchResults.length > 0) {
+        <div class="arv-left__section-title">
+          {{ searchResults.length }} result(s) for "{{ lastQuery }}"
+        </div>
+        <div class="arv-left__list">
+          @for (hit of searchResults; track hit.pageNumber) {
+            <div class="arv-bm arv-bm--search"
+                 [class.arv-bm--active]="currentPage === hit.pageNumber"
+                 (click)="goTo(hit.pageNumber)">
+              <span class="arv-bm__icon">🔍</span>
+              <div class="arv-bm__col">
+                <span class="arv-bm__label">Page {{ hit.pageNumber }}</span>
+                <span class="arv-bm__snippet">{{ hit.snippet }}</span>
+              </div>
+            </div>
+          }
+        </div>
+      }
+
+      <!-- Page thumbnails -->
+      @if (searchResults.length === 0) {
+        <div class="arv-left__section-title">All Pages</div>
+        <div class="arv-left__list">
+          @if (thumbnails) {
+            @for (pg of thumbnails.pages; track pg.pageNumber) {
+              <div class="arv-bm arv-thumb"
+                   [class.arv-bm--active]="currentPage === pg.pageNumber"
+                   (click)="goTo(pg.pageNumber)">
+                <!-- Mini thumbnail placeholder -->
+                <div class="arv-thumb__box">
+                  <span class="arv-thumb__num">{{ pg.pageNumber }}</span>
+                </div>
+                <div class="arv-bm__col">
+                  <span class="arv-bm__label">Page {{ pg.pageNumber }}</span>
+                  @if (pg.firstText) {
+                    <span class="arv-bm__snippet">{{ pg.firstText | slice:0:40 }}</span>
+                  }
+                </div>
+              </div>
+            }
+          } @else {
+            <div class="arv-left__loading">Loading…</div>
+          }
+        </div>
+      }
+
+      <!-- Footer info -->
+      <div class="arv-left__footer">
+        <span>{{ api.pageCount }} pages</span>
+        @if (api.pageCount > 0) {
+          <span>· Page {{ currentPage }}</span>
+        }
+      </div>
+    </div>
+  `, styles: [".arv-left{width:200px;flex-shrink:0;display:flex;flex-direction:column;background:var(--arv-surface, #2a2a3e);border-right:1px solid var(--arv-border, #3d3d5c);overflow:hidden;height:100%}.arv-left__header{display:flex;align-items:center;justify-content:space-between;padding:8px 10px 4px;font-weight:700;font-size:11px;color:var(--arv-text-muted, #888);text-transform:uppercase;flex-shrink:0}.arv-left__badge{font-size:9px;background:var(--arv-border, #3d3d5c);border-radius:8px;padding:1px 6px;color:var(--arv-text, #ccc)}.arv-left__search{display:flex;align-items:center;gap:4px;padding:4px 8px;flex-shrink:0}.arv-input{flex:1;padding:4px 8px;background:var(--arv-surface2, #313148);border:1px solid var(--arv-border, #3d3d5c);border-radius:4px;color:var(--arv-text, #ccc);font-size:11px;outline:none;width:100%;box-sizing:border-box}.arv-left__section-title{font-size:9px;color:var(--arv-text-muted, #888);text-transform:uppercase;padding:4px 10px 2px;flex-shrink:0}.arv-left__list{flex:1;overflow-y:auto;min-height:0}.arv-left__loading{padding:12px;font-size:11px;color:var(--arv-text-muted, #888)}.arv-bm{display:flex;align-items:flex-start;gap:6px;padding:5px 10px;cursor:pointer;font-size:11px;border-radius:2px;margin:1px 4px}.arv-bm:hover{background:var(--arv-surface2, #313148)}.arv-bm--active{background:#5b8ef026;color:var(--arv-accent, #5b8ef0)}.arv-bm__col{display:flex;flex-direction:column;gap:2px;overflow:hidden}.arv-bm__label{font-size:11px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.arv-bm__snippet{font-size:9px;color:var(--arv-text-muted, #888);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.arv-bm__icon{flex-shrink:0;font-size:12px}.arv-thumb__box{width:30px;height:40px;background:#fff;border:1px solid var(--arv-border, #3d3d5c);border-radius:2px;display:flex;align-items:center;justify-content:center;flex-shrink:0}.arv-thumb__num{font-size:8px;color:#999}.arv-left__footer{padding:6px 10px;font-size:10px;color:var(--arv-text-muted, #888);border-top:1px solid var(--arv-border, #3d3d5c);flex-shrink:0;display:flex;gap:4px}.arv-spinner-sm{width:14px;height:14px;border:2px solid var(--arv-border, #3d3d5c);border-top-color:var(--arv-accent, #5b8ef0);border-radius:50%;animation:arv-spin .7s linear infinite;flex-shrink:0}@keyframes arv-spin{to{transform:rotate(360deg)}}\n"] }]
+        }], ctorParameters: () => [{ type: ReportViewerApiService }, { type: i0.ChangeDetectorRef }], propDecorators: { currentPage: [{
+                type: Input
+            }], pageSelected: [{
+                type: Output
+            }] } });
+
+const PT_TO_PX = 1.333;
+const WINDOW_RADIUS = 5; // render ±5 pages around current
+class ReportViewerComponent {
+    api;
+    cdr;
+    /** API base URL, e.g. 'http://localhost:5000' */
+    set apiBaseUrl(url) {
+        if (url)
+            this.api.configure(url);
+    }
+    /** Light or dark theme */
+    theme = 'dark';
+    /** If provided, render this report on init */
+    renderRequest;
+    scrollEl;
+    pageRenderers;
+    currentPage = 1;
+    scale = PT_TO_PX;
+    pageCache = new Map();
+    destroy$ = new Subject();
+    printPage; // undefined = all, number = single page
+    constructor(api, cdr) {
+        this.api = api;
+        this.cdr = cdr;
+    }
+    // ── Lifecycle ──────────────────────────────────────────────────────────────
+    ngOnInit() {
+        // Subscribe to external navigation commands
+        this.api.navigateTo$
+            .pipe(takeUntil(this.destroy$))
+            .subscribe(p => this.navigateTo(p));
+        // Auto-render if input provided
+        if (this.renderRequest) {
+            this.api.render(this.renderRequest)
+                .pipe(takeUntil(this.destroy$))
+                .subscribe(() => { this.currentPage = 1; this.cdr.markForCheck(); });
+        }
+    }
+    ngAfterViewInit() { }
+    ngOnDestroy() {
+        this.destroy$.next();
+        this.destroy$.complete();
+    }
+    // ── Page numbers ───────────────────────────────────────────────────────────
+    get pageNumbers() {
+        const count = this.api.pageCount;
+        return count > 0 ? Array.from({ length: count }, (_, i) => i + 1) : [];
+    }
+    get pageWidthPx() { return this.api.pageWidthPt * this.scale; }
+    get pageHeightPx() { return this.api.pageHeightPt * this.scale; }
+    get pageWrapHeight() { return this.pageHeightPx + 32; }
+    get pageListWidth() { return this.pageWidthPx + 40; }
+    get zoomPercent() { return Math.round(this.scale / PT_TO_PX * 100); }
+    isInWindow(p) {
+        return Math.abs(p - this.currentPage) <= WINDOW_RADIUS;
+    }
+    getPage(p) {
+        if (!this.pageCache.has(p)) {
+            // Trigger async load
+            this.loadPage(p);
+            return undefined;
+        }
+        return this.pageCache.get(p);
+    }
+    loadPage(p) {
+        if (this.pageCache.has(p))
+            return;
+        this.api.getPage(p)
+            .pipe(takeUntil(this.destroy$))
+            .subscribe(page => {
+            this.pageCache.set(p, page);
+            this.cdr.markForCheck();
+        });
+    }
+    // Preload window pages whenever currentPage changes
+    preloadWindow() {
+        const from = Math.max(1, this.currentPage - WINDOW_RADIUS);
+        const to = Math.min(this.api.pageCount, this.currentPage + WINDOW_RADIUS);
+        for (let p = from; p <= to; p++)
+            this.loadPage(p);
+    }
+    // ── Navigation ─────────────────────────────────────────────────────────────
+    navigateTo(page) {
+        this.currentPage = Math.max(1, Math.min(page, this.api.pageCount));
+        this.preloadWindow();
+        this.cdr.markForCheck();
+        setTimeout(() => this.scrollToPage(this.currentPage), 50);
+    }
+    onPageInputChange(e) {
+        const v = parseInt(e.target.value, 10);
+        if (!isNaN(v))
+            this.navigateTo(v);
+    }
+    scrollToPage(p) {
+        const el = document.getElementById(`arv-pw-${p}`);
+        const scroll = this.scrollEl?.nativeElement;
+        if (el && scroll) {
+            scroll.scrollTo({ top: el.offsetTop - 8, behavior: 'smooth' });
+        }
+    }
+    onScroll() {
+        const scroll = this.scrollEl?.nativeElement;
+        if (!scroll)
+            return;
+        const list = scroll.querySelector('.arv-page-list');
+        if (!list)
+            return;
+        const mid = scroll.scrollTop + scroll.clientHeight / 2;
+        let best = 1, bestDist = Infinity;
+        for (const child of Array.from(list.children)) {
+            if (!child.id?.startsWith('arv-pw-'))
+                continue;
+            const p = parseInt(child.id.replace('arv-pw-', ''), 10);
+            const dist = Math.abs(child.offsetTop + child.offsetHeight / 2 - mid);
+            if (dist < bestDist) {
+                bestDist = dist;
+                best = p;
+            }
+        }
+        if (best !== this.currentPage) {
+            this.currentPage = best;
+            this.preloadWindow();
+            this.cdr.markForCheck();
+        }
+    }
+    // ── Zoom ───────────────────────────────────────────────────────────────────
+    zoomIn() { this.scale = Math.min(this.scale * 1.2, PT_TO_PX * 4); this.cdr.markForCheck(); }
+    zoomOut() { this.scale = Math.max(this.scale / 1.2, PT_TO_PX * 0.25); this.cdr.markForCheck(); }
+    zoomReset() { this.scale = PT_TO_PX; this.cdr.markForCheck(); }
+    // ── Refresh ────────────────────────────────────────────────────────────────
+    refresh() {
+        this.pageCache.clear();
+        this.api.clearCache();
+        this.preloadWindow();
+        this.cdr.markForCheck();
+    }
+    // ── Print ──────────────────────────────────────────────────────────────────
+    printAll() {
+        this.ensureAllPagesLoaded(() => window.print());
+    }
+    printCurrent() {
+        // Add temporary class to hide all other pages
+        const list = document.querySelector('.arv-page-list');
+        if (!list) {
+            window.print();
+            return;
+        }
+        Array.from(list.querySelectorAll('.arv-page-wrap')).forEach((el) => {
+            const pageEl = el;
+            const id = pageEl.id?.replace('arv-pw-', '');
+            pageEl.style.display = id === String(this.currentPage) ? '' : 'none';
+        });
+        window.print();
+        // Restore
+        Array.from(list.querySelectorAll('.arv-page-wrap'))
+            .forEach((el) => (el.style.display = ''));
+    }
+    ensureAllPagesLoaded(callback) {
+        // Pre-load remaining pages then print
+        const missing = [];
+        for (let p = 1; p <= this.api.pageCount; p++) {
+            if (!this.pageCache.has(p))
+                missing.push(p);
+        }
+        if (missing.length === 0) {
+            callback();
+            return;
+        }
+        let loaded = 0;
+        for (const p of missing) {
+            this.api.getPage(p).pipe(takeUntil(this.destroy$)).subscribe(page => {
+                this.pageCache.set(p, page);
+                loaded++;
+                this.cdr.markForCheck();
+                if (loaded === missing.length)
+                    callback();
+            });
+        }
+    }
+    // ── Download page as image ─────────────────────────────────────────────────
+    async downloadPageImage() {
+        // Find the current page's renderer
+        const renderer = this.pageRenderers.find(r => {
+            const el = r.getPageElement();
+            return el?.getAttribute('data-page') === String(this.currentPage);
+        });
+        const pageEl = renderer?.getPageElement();
+        if (!pageEl) {
+            alert('Page not rendered yet. Please wait.');
+            return;
+        }
+        try {
+            // Use html2canvas if available, otherwise canvas screenshot
+            const h2c = window.html2canvas;
+            if (h2c) {
+                const canvas = await h2c(pageEl, { scale: 2, useCORS: true });
+                this.downloadCanvas(canvas, `page-${this.currentPage}.png`);
+            }
+            else {
+                // Fallback: DOM-to-canvas via browser print screenshot prompt
+                alert('html2canvas not loaded. Add <script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/1.4.1/html2canvas.min.js"></script> to your index.html for image download.');
+            }
+        }
+        catch (e) {
+            console.error('Screenshot failed', e);
+        }
+    }
+    downloadCanvas(canvas, filename) {
+        const a = document.createElement('a');
+        a.href = canvas.toDataURL('image/png');
+        a.download = filename;
+        document.body.appendChild(a);
+        a.click();
+        document.body.removeChild(a);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: ReportViewerComponent, deps: [{ token: ReportViewerApiService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: ReportViewerComponent, isStandalone: true, selector: "arv-report-viewer", inputs: { apiBaseUrl: "apiBaseUrl", theme: "theme", renderRequest: "renderRequest" }, viewQueries: [{ propertyName: "scrollEl", first: true, predicate: ["scrollEl"], descendants: true }, { propertyName: "pageRenderers", predicate: ["pageRenderers"], descendants: true }], ngImport: i0, template: `
+    <div class="arv-shell" [attr.data-theme]="theme">
+
+      <!-- ═══ TOOLBAR ════════════════════════════════════════════════ -->
+      <div class="arv-toolbar arv-no-print">
+
+        <span class="arv-toolbar__brand">📄 Report Viewer</span>
+
+        <!-- Navigation -->
+        <div class="arv-nav">
+          <button class="arv-btn arv-btn--icon" title="First" [disabled]="currentPage <= 1"
+                  (click)="navigateTo(1)">⏮</button>
+          <button class="arv-btn arv-btn--icon" title="Previous" [disabled]="currentPage <= 1"
+                  (click)="navigateTo(currentPage - 1)">◀</button>
+
+          <input class="arv-page-input" type="number"
+                 [min]="1" [max]="api.pageCount"
+                 [ngModel]="currentPage"
+                 (change)="onPageInputChange($event)" />
+          <span class="arv-nav__of">/ {{ api.pageCount }}</span>
+
+          <button class="arv-btn arv-btn--icon" title="Next"
+                  [disabled]="currentPage >= api.pageCount"
+                  (click)="navigateTo(currentPage + 1)">▶</button>
+          <button class="arv-btn arv-btn--icon" title="Last"
+                  [disabled]="currentPage >= api.pageCount"
+                  (click)="navigateTo(api.pageCount)">⏭</button>
+        </div>
+
+        <!-- Zoom -->
+        <div class="arv-zoom">
+          <button class="arv-btn arv-btn--icon" title="Zoom out" (click)="zoomOut()">−</button>
+          <span class="arv-zoom__val">{{ zoomPercent }}%</span>
+          <button class="arv-btn arv-btn--icon" title="Zoom in"  (click)="zoomIn()">+</button>
+          <button class="arv-btn arv-btn--sm" (click)="zoomReset()">1:1</button>
+        </div>
+
+        <!-- Refresh -->
+        <button class="arv-btn arv-btn--sm" title="Refresh" (click)="refresh()">🔄</button>
+
+        <!-- Print -->
+        <div class="arv-btn-group">
+          <button class="arv-btn arv-btn--sm" title="Print all pages" (click)="printAll()">🖨 Print All</button>
+          <button class="arv-btn arv-btn--sm" title="Print current page" (click)="printCurrent()">🖨 Page</button>
+        </div>
+
+        <!-- Download page as image -->
+        <button class="arv-btn arv-btn--sm" title="Download current page as image"
+                (click)="downloadPageImage()">⬇ Image</button>
+
+        <!-- Status -->
+        <div class="arv-status">
+          @if (api.loading$ | async) {
+            <span class="arv-spinner-sm"></span> Rendering…
+          } @else if (api.pageCount > 0) {
+            <span class="arv-status__ok">✓ {{ api.pageCount }} pages</span>
+          }
+        </div>
+      </div>
+
+      <!-- ═══ BODY ════════════════════════════════════════════════════ -->
+      <div class="arv-body">
+
+        <!-- Left panel -->
+        <arv-left-panel
+          class="arv-no-print"
+          [currentPage]="currentPage"
+          (pageSelected)="navigateTo($event)">
+        </arv-left-panel>
+
+        <!-- Virtual page list -->
+        <div class="arv-canvas-scroll"
+             #scrollEl
+             (scroll)="onScroll()">
+
+          @if (api.loading$ | async) {
+            <div class="arv-loading">
+              <div class="arv-spinner"></div>
+              <div>Rendering report…</div>
+            </div>
+          }
+
+          @else if ((api.session$ | async) === null) {
+            <div class="arv-empty">
+              No report loaded.
+            </div>
+          }
+
+          @else {
+            <div class="arv-page-list"
+                 [style.width.px]="pageListWidth">
+
+              @for (p of pageNumbers; track p) {
+                <div class="arv-page-wrap"
+                     [id]="'arv-pw-' + p"
+                     [style.height.px]="pageWrapHeight">
+
+                  <div class="arv-page-num-label arv-no-print">{{ p }}</div>
+
+                  @if (isInWindow(p)) {
+                    <!-- Rendered page -->
+                    <arv-page-renderer
+                      #pageRenderers
+                      [page]="getPage(p)"
+                      [scale]="scale"
+                      [attr.data-page]="p">
+                    </arv-page-renderer>
+                  } @else {
+                    <!-- Placeholder (correct height to keep scrollbar accurate) -->
+                    <div class="arv-placeholder"
+                         [style.width.px]="pageWidthPx"
+                         [style.height.px]="pageHeightPx">
+                      Page {{ p }}
+                    </div>
+                  }
+                </div>
+              }
+            </div>
+          }
+        </div>
+      </div>
+    </div>
+
+    <!-- ═══ PRINT STYLES ═══════════════════════════════════════════════ -->
+    <style id="arv-print-css">
+      @media print {
+        .arv-no-print { display: none !important; }
+        .arv-shell { height: auto !important; }
+        .arv-body  { overflow: visible !important; }
+        .arv-canvas-scroll { overflow: visible !important; height: auto !important; }
+        .arv-page-wrap { page-break-after: always; }
+        .arv-page-wrap:last-child { page-break-after: avoid; }
+      }
+    </style>
+  `, isInline: true, styles: [":host{display:block;height:100%}.arv-shell{display:flex;flex-direction:column;height:100%;background:var(--arv-bg, #1e1e2e);color:var(--arv-text, #abb2bf);font-family:system-ui,-apple-system,sans-serif;font-size:12px}[data-theme=light]{--arv-bg: #f0f0f5;--arv-surface: #ffffff;--arv-surface2: #f5f5fa;--arv-border: #d0d0e0;--arv-accent: #3b6fd4;--arv-text: #333;--arv-text-muted: #888}.arv-toolbar{display:flex;align-items:center;gap:8px;padding:0 12px;height:44px;flex-shrink:0;background:var(--arv-surface, #2a2a3e);border-bottom:1px solid var(--arv-border, #3d3d5c);flex-wrap:wrap}.arv-toolbar__brand{font-weight:700;font-size:13px;color:var(--arv-text-strong, #eee);margin-right:8px}.arv-nav{display:flex;align-items:center;gap:4px}.arv-nav__of{font-size:11px;color:var(--arv-text-muted, #888)}.arv-page-input{width:52px;text-align:center;padding:2px 4px;background:var(--arv-surface, #2a2a3e);border:1px solid var(--arv-border, #3d3d5c);border-radius:4px;color:var(--arv-text, #ccc);font-size:12px}.arv-zoom{display:flex;align-items:center;gap:4px}.arv-zoom__val{min-width:42px;text-align:center;font-size:11px;color:var(--arv-text-muted, #888)}.arv-btn{display:inline-flex;align-items:center;gap:3px;padding:3px 8px;background:var(--arv-surface2, #313148);border:1px solid var(--arv-border, #3d3d5c);border-radius:4px;color:var(--arv-text, #ccc);font-size:11px;cursor:pointer;white-space:nowrap}.arv-btn:hover{background:var(--arv-border, #3d3d5c)}.arv-btn:disabled{opacity:.4;pointer-events:none}.arv-btn--icon{padding:3px 6px;font-size:13px}.arv-btn--sm{padding:2px 7px}.arv-btn-group{display:flex;gap:1px}.arv-btn-group .arv-btn:first-child{border-radius:4px 0 0 4px}.arv-btn-group .arv-btn:last-child{border-radius:0 4px 4px 0}.arv-status{margin-left:auto;display:flex;align-items:center;gap:6px;font-size:11px;color:var(--arv-text-muted, #888)}.arv-status__ok{color:#4caf50}.arv-body{display:flex;flex:1;overflow:hidden;min-height:0}.arv-canvas-scroll{flex:1;overflow:auto;background:var(--arv-bg, #1e1e2e);padding:20px;display:flex;flex-direction:column;align-items:center}.arv-page-list{display:flex;flex-direction:column;align-items:center}.arv-page-wrap{position:relative;display:flex;flex-direction:column;align-items:center;padding-bottom:16px}.arv-page-num-label{font-size:10px;color:var(--arv-text-muted, #888);margin-bottom:4px;align-self:flex-start}.arv-placeholder{background:var(--arv-surface, #2a2a3e);border:1px dashed var(--arv-border, #3d3d5c);display:flex;align-items:center;justify-content:center;color:var(--arv-text-muted, #888);font-size:11px}.arv-loading{display:flex;flex-direction:column;align-items:center;gap:12px;padding:60px;color:var(--arv-text-muted, #888)}.arv-spinner{width:32px;height:32px;border:3px solid var(--arv-border, #3d3d5c);border-top-color:var(--arv-accent, #5b8ef0);border-radius:50%;animation:arv-spin .8s linear infinite}.arv-spinner-sm{display:inline-block;width:14px;height:14px;border:2px solid var(--arv-border, #3d3d5c);border-top-color:var(--arv-accent, #5b8ef0);border-radius:50%;animation:arv-spin .7s linear infinite}@keyframes arv-spin{to{transform:rotate(360deg)}}.arv-empty{padding:60px;text-align:center;color:var(--arv-text-muted, #888)}\n", "@media print{.arv-no-print{display:none!important}.arv-shell{height:auto!important}.arv-body{overflow:visible!important}.arv-canvas-scroll{overflow:visible!important;height:auto!important}.arv-page-wrap{page-break-after:always}.arv-page-wrap:last-child{page-break-after:avoid}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.MinValidator, selector: "input[type=number][min][formControlName],input[type=number][min][formControl],input[type=number][min][ngModel]", inputs: ["min"] }, { kind: "directive", type: i2.MaxValidator, selector: "input[type=number][max][formControlName],input[type=number][max][formControl],input[type=number][max][ngModel]", inputs: ["max"] }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: PageRendererComponent, selector: "arv-page-renderer", inputs: ["page", "scale"] }, { kind: "component", type: LeftPanelComponent, selector: "arv-left-panel", inputs: ["currentPage"], outputs: ["pageSelected"] }, { kind: "pipe", type: i3.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: ReportViewerComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'arv-report-viewer', standalone: true, imports: [CommonModule, FormsModule, PageRendererComponent, LeftPanelComponent], changeDetection: ChangeDetectionStrategy.OnPush, template: `
+    <div class="arv-shell" [attr.data-theme]="theme">
+
+      <!-- ═══ TOOLBAR ════════════════════════════════════════════════ -->
+      <div class="arv-toolbar arv-no-print">
+
+        <span class="arv-toolbar__brand">📄 Report Viewer</span>
+
+        <!-- Navigation -->
+        <div class="arv-nav">
+          <button class="arv-btn arv-btn--icon" title="First" [disabled]="currentPage <= 1"
+                  (click)="navigateTo(1)">⏮</button>
+          <button class="arv-btn arv-btn--icon" title="Previous" [disabled]="currentPage <= 1"
+                  (click)="navigateTo(currentPage - 1)">◀</button>
+
+          <input class="arv-page-input" type="number"
+                 [min]="1" [max]="api.pageCount"
+                 [ngModel]="currentPage"
+                 (change)="onPageInputChange($event)" />
+          <span class="arv-nav__of">/ {{ api.pageCount }}</span>
+
+          <button class="arv-btn arv-btn--icon" title="Next"
+                  [disabled]="currentPage >= api.pageCount"
+                  (click)="navigateTo(currentPage + 1)">▶</button>
+          <button class="arv-btn arv-btn--icon" title="Last"
+                  [disabled]="currentPage >= api.pageCount"
+                  (click)="navigateTo(api.pageCount)">⏭</button>
+        </div>
+
+        <!-- Zoom -->
+        <div class="arv-zoom">
+          <button class="arv-btn arv-btn--icon" title="Zoom out" (click)="zoomOut()">−</button>
+          <span class="arv-zoom__val">{{ zoomPercent }}%</span>
+          <button class="arv-btn arv-btn--icon" title="Zoom in"  (click)="zoomIn()">+</button>
+          <button class="arv-btn arv-btn--sm" (click)="zoomReset()">1:1</button>
+        </div>
+
+        <!-- Refresh -->
+        <button class="arv-btn arv-btn--sm" title="Refresh" (click)="refresh()">🔄</button>
+
+        <!-- Print -->
+        <div class="arv-btn-group">
+          <button class="arv-btn arv-btn--sm" title="Print all pages" (click)="printAll()">🖨 Print All</button>
+          <button class="arv-btn arv-btn--sm" title="Print current page" (click)="printCurrent()">🖨 Page</button>
+        </div>
+
+        <!-- Download page as image -->
+        <button class="arv-btn arv-btn--sm" title="Download current page as image"
+                (click)="downloadPageImage()">⬇ Image</button>
+
+        <!-- Status -->
+        <div class="arv-status">
+          @if (api.loading$ | async) {
+            <span class="arv-spinner-sm"></span> Rendering…
+          } @else if (api.pageCount > 0) {
+            <span class="arv-status__ok">✓ {{ api.pageCount }} pages</span>
+          }
+        </div>
+      </div>
+
+      <!-- ═══ BODY ════════════════════════════════════════════════════ -->
+      <div class="arv-body">
+
+        <!-- Left panel -->
+        <arv-left-panel
+          class="arv-no-print"
+          [currentPage]="currentPage"
+          (pageSelected)="navigateTo($event)">
+        </arv-left-panel>
+
+        <!-- Virtual page list -->
+        <div class="arv-canvas-scroll"
+             #scrollEl
+             (scroll)="onScroll()">
+
+          @if (api.loading$ | async) {
+            <div class="arv-loading">
+              <div class="arv-spinner"></div>
+              <div>Rendering report…</div>
+            </div>
+          }
+
+          @else if ((api.session$ | async) === null) {
+            <div class="arv-empty">
+              No report loaded.
+            </div>
+          }
+
+          @else {
+            <div class="arv-page-list"
+                 [style.width.px]="pageListWidth">
+
+              @for (p of pageNumbers; track p) {
+                <div class="arv-page-wrap"
+                     [id]="'arv-pw-' + p"
+                     [style.height.px]="pageWrapHeight">
+
+                  <div class="arv-page-num-label arv-no-print">{{ p }}</div>
+
+                  @if (isInWindow(p)) {
+                    <!-- Rendered page -->
+                    <arv-page-renderer
+                      #pageRenderers
+                      [page]="getPage(p)"
+                      [scale]="scale"
+                      [attr.data-page]="p">
+                    </arv-page-renderer>
+                  } @else {
+                    <!-- Placeholder (correct height to keep scrollbar accurate) -->
+                    <div class="arv-placeholder"
+                         [style.width.px]="pageWidthPx"
+                         [style.height.px]="pageHeightPx">
+                      Page {{ p }}
+                    </div>
+                  }
+                </div>
+              }
+            </div>
+          }
+        </div>
+      </div>
+    </div>
+
+    <!-- ═══ PRINT STYLES ═══════════════════════════════════════════════ -->
+    <style id="arv-print-css">
+      @media print {
+        .arv-no-print { display: none !important; }
+        .arv-shell { height: auto !important; }
+        .arv-body  { overflow: visible !important; }
+        .arv-canvas-scroll { overflow: visible !important; height: auto !important; }
+        .arv-page-wrap { page-break-after: always; }
+        .arv-page-wrap:last-child { page-break-after: avoid; }
+      }
+    </style>
+  `, styles: [":host{display:block;height:100%}.arv-shell{display:flex;flex-direction:column;height:100%;background:var(--arv-bg, #1e1e2e);color:var(--arv-text, #abb2bf);font-family:system-ui,-apple-system,sans-serif;font-size:12px}[data-theme=light]{--arv-bg: #f0f0f5;--arv-surface: #ffffff;--arv-surface2: #f5f5fa;--arv-border: #d0d0e0;--arv-accent: #3b6fd4;--arv-text: #333;--arv-text-muted: #888}.arv-toolbar{display:flex;align-items:center;gap:8px;padding:0 12px;height:44px;flex-shrink:0;background:var(--arv-surface, #2a2a3e);border-bottom:1px solid var(--arv-border, #3d3d5c);flex-wrap:wrap}.arv-toolbar__brand{font-weight:700;font-size:13px;color:var(--arv-text-strong, #eee);margin-right:8px}.arv-nav{display:flex;align-items:center;gap:4px}.arv-nav__of{font-size:11px;color:var(--arv-text-muted, #888)}.arv-page-input{width:52px;text-align:center;padding:2px 4px;background:var(--arv-surface, #2a2a3e);border:1px solid var(--arv-border, #3d3d5c);border-radius:4px;color:var(--arv-text, #ccc);font-size:12px}.arv-zoom{display:flex;align-items:center;gap:4px}.arv-zoom__val{min-width:42px;text-align:center;font-size:11px;color:var(--arv-text-muted, #888)}.arv-btn{display:inline-flex;align-items:center;gap:3px;padding:3px 8px;background:var(--arv-surface2, #313148);border:1px solid var(--arv-border, #3d3d5c);border-radius:4px;color:var(--arv-text, #ccc);font-size:11px;cursor:pointer;white-space:nowrap}.arv-btn:hover{background:var(--arv-border, #3d3d5c)}.arv-btn:disabled{opacity:.4;pointer-events:none}.arv-btn--icon{padding:3px 6px;font-size:13px}.arv-btn--sm{padding:2px 7px}.arv-btn-group{display:flex;gap:1px}.arv-btn-group .arv-btn:first-child{border-radius:4px 0 0 4px}.arv-btn-group .arv-btn:last-child{border-radius:0 4px 4px 0}.arv-status{margin-left:auto;display:flex;align-items:center;gap:6px;font-size:11px;color:var(--arv-text-muted, #888)}.arv-status__ok{color:#4caf50}.arv-body{display:flex;flex:1;overflow:hidden;min-height:0}.arv-canvas-scroll{flex:1;overflow:auto;background:var(--arv-bg, #1e1e2e);padding:20px;display:flex;flex-direction:column;align-items:center}.arv-page-list{display:flex;flex-direction:column;align-items:center}.arv-page-wrap{position:relative;display:flex;flex-direction:column;align-items:center;padding-bottom:16px}.arv-page-num-label{font-size:10px;color:var(--arv-text-muted, #888);margin-bottom:4px;align-self:flex-start}.arv-placeholder{background:var(--arv-surface, #2a2a3e);border:1px dashed var(--arv-border, #3d3d5c);display:flex;align-items:center;justify-content:center;color:var(--arv-text-muted, #888);font-size:11px}.arv-loading{display:flex;flex-direction:column;align-items:center;gap:12px;padding:60px;color:var(--arv-text-muted, #888)}.arv-spinner{width:32px;height:32px;border:3px solid var(--arv-border, #3d3d5c);border-top-color:var(--arv-accent, #5b8ef0);border-radius:50%;animation:arv-spin .8s linear infinite}.arv-spinner-sm{display:inline-block;width:14px;height:14px;border:2px solid var(--arv-border, #3d3d5c);border-top-color:var(--arv-accent, #5b8ef0);border-radius:50%;animation:arv-spin .7s linear infinite}@keyframes arv-spin{to{transform:rotate(360deg)}}.arv-empty{padding:60px;text-align:center;color:var(--arv-text-muted, #888)}\n", "@media print{.arv-no-print{display:none!important}.arv-shell{height:auto!important}.arv-body{overflow:visible!important}.arv-canvas-scroll{overflow:visible!important;height:auto!important}.arv-page-wrap{page-break-after:always}.arv-page-wrap:last-child{page-break-after:avoid}}\n"] }]
+        }], ctorParameters: () => [{ type: ReportViewerApiService }, { type: i0.ChangeDetectorRef }], propDecorators: { apiBaseUrl: [{
+                type: Input
+            }], theme: [{
+                type: Input
+            }], renderRequest: [{
+                type: Input
+            }], scrollEl: [{
+                type: ViewChild,
+                args: ['scrollEl']
+            }], pageRenderers: [{
+                type: ViewChildren,
+                args: ['pageRenderers']
+            }] } });
+
+// Public API for the report-viewer Angular library
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { LeftPanelComponent, PageRendererComponent, ReportViewerApiService, ReportViewerComponent };
+//# sourceMappingURL=arilekh-report-viewer.mjs.map