@sdcorejs/angular 19.0.0-rc.1

package/fesm2022/sdcorejs-angular-components-preview.mjs

@@ -0,0 +1,1987 @@
+import * as i1 from '@angular/common';
+import { CommonModule } from '@angular/common';
+import * as i0 from '@angular/core';
+import { inject, ElementRef, DestroyRef, input, computed, output, signal, effect, afterNextRender, HostListener, ChangeDetectionStrategy, Component, InjectionToken, viewChild, viewChildren } from '@angular/core';
+import * as i2 from '@angular/material/icon';
+import { MatIconModule } from '@angular/material/icon';
+import { TranslatePipe } from '@sdcorejs/angular/i18n';
+import * as uuid from 'uuid';
+import { FormsModule } from '@angular/forms';
+import * as pdfjsLib from 'pdfjs-dist';
+
+var _a$1;
+class SdPreviewImage {
+    // ==========================================
+    // CONSTANTS
+    // ==========================================
+    // Zoom giới hạn theo handoff: stage hiển thị từ 25% → 400% là dải hữu dụng.
+    // Ngoài dải này ảnh hoặc quá nhỏ để thao tác hoặc đã pixelated nặng.
+    static MIN_ZOOM = 0.25;
+    static MAX_ZOOM = 4;
+    static ZOOM_STEP = 0.1;
+    static SWIPE_THRESHOLD = 40;
+    // ==========================================
+    // DI
+    // ==========================================
+    #hostEl = inject(ElementRef);
+    #destroyRef = inject(DestroyRef);
+    // ==========================================
+    // INPUTS (signal-based, Angular 19 style)
+    // ==========================================
+    // Declarative items input — consumer drives state. Mỗi lần items() đổi,
+    // effect() bên dưới sẽ normalize + load lại danh sách.
+    // autoId prefix `preview-image-`. Per-element child autoIds derive `${autoId}-{suffix}`.
+    autoIdInput = input(undefined, { alias: 'autoId' });
+    autoId = computed(() => (this.autoIdInput() ? `components-preview-image-${this.autoIdInput()}` : undefined));
+    #childAutoId = (suffix) => {
+        return this.autoId() ? `${this.autoId()}-${suffix}` : undefined;
+    };
+    autoIdPrev = computed(() => this.#childAutoId('prev'));
+    autoIdNext = computed(() => this.#childAutoId('next'));
+    autoIdZoomIn = computed(() => this.#childAutoId('zoom-in'));
+    autoIdZoomOut = computed(() => this.#childAutoId('zoom-out'));
+    autoIdFit = computed(() => this.#childAutoId('fit'));
+    autoIdRotate = computed(() => this.#childAutoId('rotate'));
+    autoIdDownload = computed(() => this.#childAutoId('download'));
+    autoIdFullscreen = computed(() => this.#childAutoId('fullscreen'));
+    autoIdRetry = computed(() => this.#childAutoId('retry'));
+    autoIdThumb = (i) => this.#childAutoId(`thumb-${i}`);
+    autoIdDot = (i) => this.#childAutoId(`dot-${i}`);
+    items = input([]);
+    title = input(undefined);
+    thumbnailPosition = input('bottom');
+    showToolbar = input(true);
+    downloadable = input(true);
+    zoomable = input(true);
+    loop = input(true);
+    startIndex = input(0);
+    // Theme variant — drives [data-theme] host attribute. Default 'dark' preserves
+    // pre-existing visual contract; consumers opt-in to 'light' explicitly.
+    theme = input('dark');
+    // ==========================================
+    // OUTPUTS
+    // ==========================================
+    // `close`: user requested dismissal (X button hoặc Esc). Consumer tự quyết
+    // định đóng modal / điều hướng / hide section.
+    close = output();
+    activeIndexChange = output();
+    download = output();
+    imageError = output();
+    // ==========================================
+    // STATE (signals)
+    // ==========================================
+    #activeIndex = signal(0);
+    #images = signal([]);
+    #zoom = signal(1);
+    #rotation = signal(0);
+    #pan = signal({ x: 0, y: 0 });
+    #stage = signal('empty');
+    #isFullscreen = signal(false);
+    #isDragging = signal(false);
+    // Track every blob URL we created so we can revoke on destroy / re-normalize.
+    // CDN strings hoá ra File→blob URL nội bộ — bắt buộc phải revoke để không leak.
+    #ownedBlobUrls = new Set();
+    // Token chống race: nếu items() đổi liên tiếp (user click rất nhanh) thì
+    // promise normalize của lần trước phải bị bỏ qua khi resolve.
+    #loadToken = 0;
+    // Pointer state for drag/pinch — không cần signal vì không drive template.
+    #dragStart = null;
+    #swipeStart = null;
+    #activePointers = new Map();
+    #pinchStartDistance = 0;
+    #pinchStartZoom = 1;
+    // ==========================================
+    // COMPUTED (template-readable)
+    // ==========================================
+    activeIndex = this.#activeIndex.asReadonly();
+    images = this.#images.asReadonly();
+    zoom = this.#zoom.asReadonly();
+    rotation = this.#rotation.asReadonly();
+    pan = this.#pan.asReadonly();
+    stage = this.#stage.asReadonly();
+    isFullscreen = this.#isFullscreen.asReadonly();
+    activeImage = computed(() => this.#images()[this.#activeIndex()]);
+    hasPrev = computed(() => {
+        const len = this.#images().length;
+        return len > 1 && (this.loop() || this.#activeIndex() > 0);
+    });
+    hasNext = computed(() => {
+        const len = this.#images().length;
+        return len > 1 && (this.loop() || this.#activeIndex() < len - 1);
+    });
+    zoomPercent = computed(() => Math.round(this.#zoom() * 100));
+    // Transform style cho ảnh stage. WHY: gom translate/scale/rotate vào 1 string
+    // duy nhất để OnPush phát hiện thay đổi qua signal kéo theo computed.
+    imageTransform = computed(() => {
+        const p = this.#pan();
+        const z = this.#zoom();
+        const r = this.#rotation();
+        return `translate(${p.x}px, ${p.y}px) scale(${z}) rotate(${r}deg)`;
+    });
+    shellClass = computed(() => {
+        const pos = this.thumbnailPosition();
+        return {
+            'sd-preview-shell': true,
+            [`sd-preview-shell--pos-${pos}`]: true,
+            'sd-preview-shell--fullscreen': this.#isFullscreen(),
+        };
+    });
+    // ==========================================
+    // CONSTRUCTOR — declarative wiring
+    // ==========================================
+    constructor() {
+        // Đồng bộ #isFullscreen với trạng thái thực của browser (sự kiện 'fullscreenchange' fire
+        // bất kể user thoát fullscreen bằng cách nào: nút Thoát, Esc, F11, programmatic).
+        const onFullscreenChange = () => {
+            this.#isFullscreen.set(document.fullscreenElement === this.#hostEl.nativeElement);
+        };
+        document.addEventListener('fullscreenchange', onFullscreenChange);
+        this.#destroyRef.onDestroy(() => {
+            document.removeEventListener('fullscreenchange', onFullscreenChange);
+        });
+        // Reactive normalize: mỗi lần items() đổi → revoke blob cũ → load mới.
+        // WHY effect không async: effect() callback không hỗ trợ async cleanup,
+        // dùng token-based race guard trong #normalizeAndLoad để bỏ qua kết quả cũ.
+        effect(() => {
+            const list = this.items();
+            const start = this.startIndex();
+            this.#normalizeAndLoad(list, start);
+        });
+        // Auto-focus host sau lần render đầu để keyboard hoạt động ngay.
+        // WHY: nếu consumer KHÔNG bọc trong modal, không có ai focus giúp.
+        // Consumer bọc modal sẽ tự focus trap riêng — focus() này vô hại (no-op
+        // nếu element không visible).
+        afterNextRender(() => {
+            try {
+                this.#hostEl.nativeElement.focus({ preventScroll: true });
+            }
+            catch {
+                // ignore — focus() can throw on detached/hidden elements.
+            }
+        });
+        // Cleanup khi component bị destroy.
+        this.#destroyRef.onDestroy(() => {
+            this.#revokeAllBlobs();
+            if (document.fullscreenElement === this.#hostEl.nativeElement) {
+                // Tránh để fullscreen "treo" khi component bị huỷ giữa chừng.
+                document.exitFullscreen?.().catch(() => undefined);
+            }
+        });
+    }
+    // ==========================================
+    // LIFECYCLE
+    // ==========================================
+    ngOnDestroy() {
+        // Giữ ngOnDestroy để vẫn tương thích với khai báo `implements OnDestroy`.
+        // Logic dọn dẹp đã được dời sang DestroyRef.onDestroy ở constructor để có
+        // thể chia sẻ với effect() teardown nếu cần sau này.
+    }
+    // ==========================================
+    // PUBLIC API
+    // ==========================================
+    onClickThumbnailImage(index) {
+        if (index < 0 || index >= this.#images().length)
+            return;
+        if (index === this.#activeIndex())
+            return;
+        this.#setActive(index);
+    }
+    updateCurrentImage(direction) {
+        const len = this.#images().length;
+        if (len <= 1)
+            return;
+        const next = this.#activeIndex() + direction;
+        let target;
+        if (this.loop()) {
+            target = (next + len) % len;
+        }
+        else {
+            if (next < 0 || next >= len)
+                return;
+            target = next;
+        }
+        this.#setActive(target);
+    }
+    zoomIn() {
+        if (!this.zoomable())
+            return;
+        this.#setZoom(this.#zoom() + _a$1.ZOOM_STEP);
+    }
+    zoomOut() {
+        if (!this.zoomable())
+            return;
+        this.#setZoom(this.#zoom() - _a$1.ZOOM_STEP);
+    }
+    fitToScreen() {
+        this.#resetTransform();
+    }
+    rotate(direction) {
+        const delta = direction === 'right' ? 90 : -90;
+        // Wrap về [0, 360) cho gọn — không strictly cần thiết về mặt visual.
+        this.#rotation.update(r => ((r + delta) % 360 + 360) % 360);
+    }
+    downloadCurrent() {
+        if (!this.downloadable())
+            return;
+        const img = this.activeImage();
+        if (!img || img.error)
+            return;
+        // Ưu tiên CDN URL nếu có để tận dụng Content-Disposition của server,
+        // fallback về blob URL khi user upload File trực tiếp.
+        const href = img.url || img.blobUrl;
+        const a = document.createElement('a');
+        a.href = href;
+        a.download = img.name || 'image';
+        document.body.appendChild(a);
+        a.click();
+        a.remove();
+        this.download.emit({ index: this.#activeIndex(), item: img });
+    }
+    toggleFullscreen() {
+        // WHY: trạng thái #isFullscreen được sync qua sự kiện 'fullscreenchange' (xem constructor)
+        // — single source of truth. Không cần .then(set(true/false)) ở đây nữa.
+        if (!document.fullscreenElement) {
+            this.#hostEl.nativeElement.requestFullscreen?.().catch(() => undefined);
+        }
+        else {
+            document.exitFullscreen?.().catch(() => undefined);
+        }
+    }
+    /** Retry just the active image (Artboard G action). */
+    async retryActive() {
+        const idx = this.#activeIndex();
+        const img = this.#images()[idx];
+        if (!img || !img.url)
+            return;
+        // Per-image loading: chỉ đánh dấu record này loading, KHÔNG đụng stage().
+        // Nhờ vậy nav arrows + thumbnails vẫn render trong lúc retry, không flicker.
+        this.#images.update(arr => {
+            const next = [...arr];
+            next[idx] = { ...arr[idx], loading: true, error: false };
+            return next;
+        });
+        const refreshed = await this.#normalize(img.url, { name: img.name, caption: img.caption, alt: img.alt });
+        if (refreshed) {
+            // Trao đổi nguyên record để giữ id thumbnail (avoid track-by reset).
+            this.#images.update(arr => {
+                const next = [...arr];
+                // Revoke blob cũ TRƯỚC khi thay để không leak record vừa fail tải.
+                if (this.#ownedBlobUrls.has(arr[idx].blobUrl)) {
+                    URL.revokeObjectURL(arr[idx].blobUrl);
+                    this.#ownedBlobUrls.delete(arr[idx].blobUrl);
+                }
+                next[idx] = { ...refreshed, id: img.id, loading: false };
+                return next;
+            });
+        }
+        else {
+            // Normalize trả null → giữ record cũ nhưng tắt loading + mark error
+            // để inline placeholder hiển thị (không lật cả stage).
+            this.#images.update(arr => {
+                const next = [...arr];
+                next[idx] = { ...arr[idx], loading: false, error: true };
+                return next;
+            });
+        }
+    }
+    /** User clicked the X button — emit close intent for the consumer to react. */
+    requestClose() {
+        this.close.emit();
+    }
+    // ==========================================
+    // KEYBOARD — bound to HOST (not document)
+    // ==========================================
+    // WHY @HostListener('keydown') on host: component có tabindex=0 nên nhận được
+    // keyboard event khi nó hoặc descendant đang focused. Không bind document để
+    // tránh "cướp" phím tắt của các phần khác trong app khi component không hoạt động.
+    onKeyDown(event) {
+        // Bỏ qua khi user đang gõ trong input — toolbar / overlay có thể chứa
+        // input ẩn (search), không muốn ← → cướp event của họ.
+        const target = event.target;
+        if (target && (target.tagName === 'INPUT' || target.tagName === 'TEXTAREA' || target.isContentEditable)) {
+            return;
+        }
+        switch (event.key) {
+            case 'ArrowLeft':
+                event.preventDefault();
+                this.updateCurrentImage(-1);
+                break;
+            case 'ArrowRight':
+                event.preventDefault();
+                this.updateCurrentImage(1);
+                break;
+            case '+':
+            case '=':
+                if (this.zoomable()) {
+                    event.preventDefault();
+                    this.zoomIn();
+                }
+                break;
+            case '-':
+                if (this.zoomable()) {
+                    event.preventDefault();
+                    this.zoomOut();
+                }
+                break;
+            case '0':
+                event.preventDefault();
+                this.fitToScreen();
+                break;
+            case 'r':
+                event.preventDefault();
+                this.rotate('right');
+                break;
+            case 'R':
+                event.preventDefault();
+                this.rotate('left');
+                break;
+            case 'f':
+                event.preventDefault();
+                this.toggleFullscreen();
+                break;
+            case 'd':
+                if (this.downloadable()) {
+                    event.preventDefault();
+                    this.downloadCurrent();
+                }
+                break;
+        }
+    }
+    // ==========================================
+    // MOUSE / POINTER HANDLERS (template-bound)
+    // ==========================================
+    onWheel(event) {
+        if (!this.zoomable())
+            return;
+        event.preventDefault();
+        // deltaY < 0 nghĩa là cuộn lên = zoom in (giống Google Photos / macOS Preview).
+        const factor = event.deltaY < 0 ? 1 + _a$1.ZOOM_STEP : 1 - _a$1.ZOOM_STEP;
+        this.#setZoom(this.#zoom() * factor);
+    }
+    onPointerDown(event) {
+        if (event.button !== 0 && event.pointerType === 'mouse')
+            return;
+        // Bỏ qua nếu pointer xuất phát trên control tương tác (toolbar / nav / dots / retry button).
+        // WHY: stage chứa các button con; setPointerCapture đi cùng drag/swipe logic sẽ
+        // "ăn" click event của những button đó (như nút Thoát fullscreen / zoom / rotate).
+        if (event.target.closest('button, [role="button"]'))
+            return;
+        event.target.setPointerCapture?.(event.pointerId);
+        this.#activePointers.set(event.pointerId, { x: event.clientX, y: event.clientY });
+        if (this.#activePointers.size === 2) {
+            // Bắt đầu pinch — khoá zoom hiện tại làm anchor.
+            const pts = [...this.#activePointers.values()];
+            this.#pinchStartDistance = Math.hypot(pts[0].x - pts[1].x, pts[0].y - pts[1].y);
+            this.#pinchStartZoom = this.#zoom();
+            this.#dragStart = null;
+            this.#swipeStart = null;
+            return;
+        }
+        if (this.#zoom() > 1) {
+            // Đã zoom → pointer drag = pan, không phải swipe.
+            this.#isDragging.set(true);
+            this.#dragStart = {
+                x: event.clientX,
+                y: event.clientY,
+                panX: this.#pan().x,
+                panY: this.#pan().y,
+            };
+        }
+        else {
+            // Ở mức 100% → pointer drag được coi là swipe sang ảnh kế.
+            this.#swipeStart = { x: event.clientX, y: event.clientY, t: performance.now() };
+        }
+    }
+    onPointerMove(event) {
+        if (!this.#activePointers.has(event.pointerId))
+            return;
+        this.#activePointers.set(event.pointerId, { x: event.clientX, y: event.clientY });
+        if (this.#activePointers.size === 2 && this.zoomable() && this.#pinchStartDistance > 0) {
+            const pts = [...this.#activePointers.values()];
+            const dist = Math.hypot(pts[0].x - pts[1].x, pts[0].y - pts[1].y);
+            const ratio = dist / this.#pinchStartDistance;
+            this.#setZoom(this.#pinchStartZoom * ratio);
+            return;
+        }
+        if (this.#dragStart && this.#zoom() > 1) {
+            const dx = event.clientX - this.#dragStart.x;
+            const dy = event.clientY - this.#dragStart.y;
+            this.#pan.set({ x: this.#dragStart.panX + dx, y: this.#dragStart.panY + dy });
+        }
+    }
+    onPointerUp(event) {
+        const start = this.#swipeStart;
+        this.#activePointers.delete(event.pointerId);
+        if (this.#activePointers.size < 2) {
+            this.#pinchStartDistance = 0;
+        }
+        if (this.#dragStart) {
+            this.#dragStart = null;
+            this.#isDragging.set(false);
+        }
+        // Detect swipe — chỉ khi đang ở fit/100% và di chuyển ngang đủ xa.
+        if (start && this.#zoom() <= 1) {
+            const dx = event.clientX - start.x;
+            const dy = event.clientY - start.y;
+            if (Math.abs(dx) >= _a$1.SWIPE_THRESHOLD && Math.abs(dx) > Math.abs(dy) * 1.5) {
+                this.updateCurrentImage(dx < 0 ? 1 : -1);
+            }
+        }
+        this.#swipeStart = null;
+    }
+    onPointerCancel(event) {
+        this.#activePointers.delete(event.pointerId);
+        this.#dragStart = null;
+        this.#swipeStart = null;
+        this.#isDragging.set(false);
+        if (this.#activePointers.size < 2) {
+            this.#pinchStartDistance = 0;
+        }
+    }
+    onImageDblClick() {
+        if (!this.zoomable())
+            return;
+        if (this.#zoom() === 1) {
+            this.#setZoom(2);
+        }
+        else {
+            this.#resetTransform();
+        }
+    }
+    onImageError() {
+        const idx = this.#activeIndex();
+        const img = this.#images()[idx];
+        if (!img)
+            return;
+        this.#images.update(arr => {
+            const next = [...arr];
+            next[idx] = { ...img, error: true, loading: false };
+            return next;
+        });
+        // WHY không set stage='error': lỗi từng ảnh không nên ẩn nav/dots/thumb của
+        // cả viewer. Template render placeholder inline ngay trong khung ảnh khi
+        // activeImage().error === true — user vẫn có thể chuyển sang ảnh khác.
+        this.imageError.emit({ index: idx, reason: 'render-failed' });
+    }
+    trackByImage(_i, item) {
+        return item.id;
+    }
+    formatBytes(bytes) {
+        if (!bytes || bytes < 0)
+            return '';
+        if (bytes < 1024)
+            return `${bytes} B`;
+        if (bytes < 1024 * 1024)
+            return `${(bytes / 1024).toFixed(1)} KB`;
+        if (bytes < 1024 * 1024 * 1024)
+            return `${(bytes / (1024 * 1024)).toFixed(1)} MB`;
+        return `${(bytes / (1024 * 1024 * 1024)).toFixed(2)} GB`;
+    }
+    // ==========================================
+    // INTERNALS
+    // ==========================================
+    async #normalizeAndLoad(items, startIndex) {
+        const token = ++this.#loadToken;
+        // Revoke trước khi map mới — items() đổi liên tiếp sẽ leak nếu không.
+        this.#revokeAllBlobs();
+        this.#resetTransform();
+        if (!Array.isArray(items) || items.length === 0) {
+            this.#images.set([]);
+            this.#activeIndex.set(0);
+            this.#stage.set('empty');
+            return;
+        }
+        this.#activeIndex.set(Math.max(0, Math.min(startIndex ?? 0, items.length - 1)));
+        this.#stage.set('loading');
+        const normalized = await Promise.all(items.map(item => this.#normalize(item)));
+        // Race guard: nếu items() đã đổi trong lúc await thì kết quả này là stale.
+        // Lưu ý: blob URL của batch này đã add vào #ownedBlobUrls — batch mới sẽ
+        // revoke chúng khi nó cũng vào #normalizeAndLoad.
+        if (token !== this.#loadToken) {
+            return;
+        }
+        const valid = normalized.filter((img) => img !== null);
+        this.#images.set(valid);
+        if (valid.length === 0) {
+            this.#stage.set('empty');
+        }
+        else {
+            const idx = Math.min(this.#activeIndex(), valid.length - 1);
+            this.#activeIndex.set(idx);
+            // WHY luôn 'ready' kể cả khi ảnh đầu bị error: per-image error render
+            // inline để giữ nav + thumb interactive. User vẫn điều hướng được sang
+            // ảnh khác.
+            this.#stage.set('ready');
+        }
+    }
+    #setActive(index) {
+        this.#activeIndex.set(index);
+        this.#resetTransform();
+        // WHY luôn set 'ready' (không phụ thuộc img.error): per-image error giờ
+        // render inline trong stage thay vì lật cả stage sang 'error'. Giữ stage
+        // 'ready' để nav/dots/thumbnail/toolbar không bị ẩn.
+        this.#stage.set('ready');
+        this.activeIndexChange.emit(index);
+        // Auto-scroll thumbnail strip — đợi 1 microtask để DOM rendered xong.
+        // WHY scoped query: thumbnail id là global ('sd-preview-thumb-N'); nếu có
+        // > 1 instance trên page sẽ collide. Query trong nativeElement để isolate.
+        queueMicrotask(() => {
+            const el = this.#hostEl.nativeElement.querySelector(`#sd-preview-thumb-${index}`);
+            el?.scrollIntoView({ behavior: 'smooth', block: 'nearest', inline: 'center' });
+        });
+    }
+    #setZoom(value) {
+        const clamped = Math.min(_a$1.MAX_ZOOM, Math.max(_a$1.MIN_ZOOM, value));
+        this.#zoom.set(clamped);
+        if (clamped <= 1) {
+            // Khi về fit/100% — pan không còn ý nghĩa, reset để không bị "lệch" khi
+            // zoom lại lần sau.
+            this.#pan.set({ x: 0, y: 0 });
+        }
+    }
+    #resetTransform() {
+        this.#zoom.set(1);
+        this.#rotation.set(0);
+        this.#pan.set({ x: 0, y: 0 });
+    }
+    #revokeAllBlobs() {
+        for (const url of this.#ownedBlobUrls) {
+            URL.revokeObjectURL(url);
+        }
+        this.#ownedBlobUrls.clear();
+    }
+    async #normalize(item, override) {
+        try {
+            if (typeof item === 'string') {
+                return await this.#fromUrl(item, override);
+            }
+            if (item instanceof File) {
+                return this.#fromFile(item, override);
+            }
+            if (item && typeof item === 'object') {
+                // Object form: chấp nhận file hoặc url, ưu tiên file vì không cần network.
+                if (item.file) {
+                    return this.#fromFile(item.file, { name: item.name, caption: item.caption, alt: item.alt });
+                }
+                if (item.url) {
+                    return await this.#fromUrl(item.url, {
+                        name: item.name,
+                        caption: item.caption,
+                        alt: item.alt,
+                    });
+                }
+            }
+            return null;
+        }
+        catch (err) {
+            console.error('[sd-preview-image] normalize failed', err);
+            return null;
+        }
+    }
+    async #fromUrl(url, override) {
+        const id = uuid.v4();
+        // Lấy filename từ phần path cuối — bỏ query string.
+        const baseSrc = url.split('?')[0];
+        const inferredName = override?.name || baseSrc.substring(baseSrc.lastIndexOf('/') + 1) || 'image';
+        try {
+            const res = await fetch(url);
+            if (!res.ok)
+                throw new Error(`HTTP ${res.status}`);
+            const blob = await res.blob();
+            const file = new File([blob], inferredName, { type: blob.type });
+            const blobUrl = URL.createObjectURL(file);
+            this.#ownedBlobUrls.add(blobUrl);
+            return {
+                id,
+                url,
+                blobUrl,
+                name: inferredName,
+                size: file.size,
+                caption: override?.caption,
+                alt: override?.alt,
+                loading: false,
+                error: false,
+            };
+        }
+        catch {
+            // Vẫn trả về record để Artboard G có thể hiển thị Retry — error=true sẽ
+            // được stage signal chuyển sang trạng thái lỗi khi đây là active image.
+            return {
+                id,
+                url,
+                blobUrl: '',
+                name: inferredName,
+                size: 0,
+                caption: override?.caption,
+                alt: override?.alt,
+                loading: false,
+                error: true,
+            };
+        }
+    }
+    #fromFile(file, override) {
+        if (!file.type.startsWith('image/')) {
+            // Silently filter — handoff yêu cầu non-image File bị drop yên lặng để
+            // tương thích với upload form nơi user trộn lẫn ảnh và tài liệu.
+            return null;
+        }
+        const blobUrl = URL.createObjectURL(file);
+        this.#ownedBlobUrls.add(blobUrl);
+        return {
+            id: uuid.v4(),
+            blobUrl,
+            name: override?.name || file.name,
+            size: file.size,
+            caption: override?.caption,
+            alt: override?.alt,
+            loading: false,
+            error: false,
+        };
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: SdPreviewImage, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.21", type: SdPreviewImage, isStandalone: true, selector: "sd-preview-image", inputs: { autoIdInput: { classPropertyName: "autoIdInput", publicName: "autoId", isSignal: true, isRequired: false, transformFunction: null }, items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: false, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, thumbnailPosition: { classPropertyName: "thumbnailPosition", publicName: "thumbnailPosition", isSignal: true, isRequired: false, transformFunction: null }, showToolbar: { classPropertyName: "showToolbar", publicName: "showToolbar", isSignal: true, isRequired: false, transformFunction: null }, downloadable: { classPropertyName: "downloadable", publicName: "downloadable", isSignal: true, isRequired: false, transformFunction: null }, zoomable: { classPropertyName: "zoomable", publicName: "zoomable", isSignal: true, isRequired: false, transformFunction: null }, loop: { classPropertyName: "loop", publicName: "loop", isSignal: true, isRequired: false, transformFunction: null }, startIndex: { classPropertyName: "startIndex", publicName: "startIndex", isSignal: true, isRequired: false, transformFunction: null }, theme: { classPropertyName: "theme", publicName: "theme", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { close: "close", activeIndexChange: "activeIndexChange", download: "download", imageError: "imageError" }, host: { attributes: { "tabindex": "0" }, listeners: { "keydown": "onKeyDown($event)" }, properties: { "attr.data-theme": "theme()", "class.sd-preview-image-host--fullscreen": "isFullscreen()" }, classAttribute: "sd-preview-image-host" }, ngImport: i0, template: "<!--\n  Self-contained viewer shell. Component sizes to its parent (width:100%;\n  height:100%) \u2014 consumer decides whether to wrap in <sd-modal>,\n  <sd-side-drawer>, a page section, or use inline.\n-->\n<div [ngClass]=\"shellClass()\" role=\"region\">\n\n  <!-- ============================================\n       HEADER BAR\n       ============================================ -->\n  @if (stage() !== 'empty' && activeImage(); as img) {\n    <div class=\"sd-preview-header\">\n      <div class=\"sd-preview-header__left\">\n        <mat-icon class=\"sd-preview-header__icon\" fontIcon=\"image\"></mat-icon>\n        <div class=\"sd-preview-header__meta\">\n          <div class=\"sd-preview-header__name T14M\" [title]=\"img.name\">{{ img.name }}</div>\n          @if (img.size) {\n            <div class=\"sd-preview-header__sub\">\n              {{ formatBytes(img.size) }}\n            </div>\n          }\n        </div>\n      </div>\n\n      @if (images().length > 1) {\n        <div class=\"sd-preview-header__counter\" aria-live=\"polite\">\n          {{ activeIndex() + 1 }} / {{ images().length }}\n        </div>\n      }\n    </div>\n  } @else if (title()) {\n    <!-- Optional override title even on empty state -->\n    <div class=\"sd-preview-header sd-preview-header--simple\">\n      <div class=\"sd-preview-header__name T14M\">{{ title() }}</div>\n    </div>\n  }\n\n  <!-- ============================================\n       BODY (stage + thumbnails per layout)\n       ============================================ -->\n  <div class=\"sd-preview-body\">\n\n    <!-- STAGE ............................................................... -->\n    <div\n      class=\"sd-preview-stage\"\n      [class.sd-preview-stage--dragging]=\"zoom() > 1\"\n      (wheel)=\"onWheel($event)\"\n      (pointerdown)=\"onPointerDown($event)\"\n      (pointermove)=\"onPointerMove($event)\"\n      (pointerup)=\"onPointerUp($event)\"\n      (pointercancel)=\"onPointerCancel($event)\"\n      (dblclick)=\"onImageDblClick()\">\n\n      @switch (stage()) {\n        @case ('empty') {\n          <div class=\"sd-preview-status\">\n            <div class=\"sd-preview-status__tile sd-preview-status__tile--muted\">\n              <mat-icon fontIcon=\"image_not_supported\"></mat-icon>\n            </div>\n            <div class=\"sd-preview-status__title\">\n              {{ 'core.component.preview-image.no-image' | translate }}\n            </div>\n            <div class=\"sd-preview-status__hint\">\n              {{ 'core.component.preview-image.no-image-hint' | translate }}\n            </div>\n          </div>\n        }\n        @case ('loading') {\n          <div class=\"sd-preview-status\">\n            <div class=\"sd-preview-spinner\" role=\"progressbar\"></div>\n            <div class=\"sd-preview-status__hint\">\n              {{ 'core.component.preview-image.loading' | translate }}\n            </div>\n          </div>\n        }\n        @default {\n          @if (activeImage(); as img) {\n            @if (img.loading) {\n              <!-- Per-image loading (retry inline) \u2014 gi\u1EEF nav/dots/thumbs visible -->\n              <div class=\"sd-preview-image-loading\" role=\"status\"\n                   [attr.aria-label]=\"'core.component.preview-image.loading' | translate\">\n                <div class=\"sd-preview-spinner\"></div>\n                <div class=\"sd-preview-status__hint\">\n                  {{ 'core.component.preview-image.loading' | translate }}\n                </div>\n              </div>\n            } @else if (img.error) {\n              <!-- Inline broken-image placeholder \u2014 gi\u1EEF nav/dots/thumbs visible -->\n              <div class=\"sd-preview-image-broken\" role=\"img\"\n                   [attr.aria-label]=\"'core.component.preview-image.load-error' | translate\">\n                <div class=\"sd-preview-status__tile sd-preview-status__tile--danger\">\n                  <mat-icon fontIcon=\"broken_image\"></mat-icon>\n                </div>\n                <div class=\"sd-preview-status__title\">\n                  {{ 'core.component.preview-image.load-error' | translate }}\n                </div>\n                <div class=\"sd-preview-status__hint\">\n                  {{ 'core.component.preview-image.load-error-hint' | translate }}\n                </div>\n                <button type=\"button\" class=\"sd-preview-btn-primary\" (click)=\"retryActive()\" [attr.data-autoId]=\"autoIdRetry()\">\n                  <mat-icon fontIcon=\"refresh\"></mat-icon>\n                  <span>{{ 'core.component.preview-image.retry' | translate }}</span>\n                </button>\n              </div>\n            } @else {\n              <img\n                class=\"sd-preview-image\"\n                [src]=\"img.blobUrl || img.url\"\n                [alt]=\"img.alt || img.name\"\n                [style.transform]=\"imageTransform()\"\n                (error)=\"onImageError()\"\n                draggable=\"false\" />\n\n              @if (img.caption) {\n                <div class=\"sd-preview-caption\">{{ img.caption }}</div>\n              }\n            }\n          }\n        }\n      }\n\n      <!-- KEYBOARD HINT ............................................. -->\n      @if (stage() === 'ready' && images().length > 1) {\n        <div class=\"sd-preview-kbd-hint\" aria-hidden=\"true\">\n          <span class=\"sd-preview-kbd\">\u2190</span>\n          <span class=\"sd-preview-kbd\">\u2192</span>\n          <span class=\"sd-preview-kbd-text\">{{ 'core.component.preview-image.kbd-hint-nav' | translate }}</span>\n        </div>\n      }\n\n      <!-- NAV ARROWS ............................................. -->\n      @if (stage() === 'ready' && images().length > 1) {\n        <button\n          type=\"button\"\n          class=\"sd-preview-nav sd-preview-nav--prev\"\n          [disabled]=\"!hasPrev()\"\n          [attr.aria-label]=\"'core.component.preview-image.prev' | translate\"\n          [attr.data-autoId]=\"autoIdPrev()\"\n          (click)=\"updateCurrentImage(-1)\">\n          <mat-icon fontIcon=\"chevron_left\"></mat-icon>\n        </button>\n        <button\n          type=\"button\"\n          class=\"sd-preview-nav sd-preview-nav--next\"\n          [disabled]=\"!hasNext()\"\n          [attr.aria-label]=\"'core.component.preview-image.next' | translate\"\n          [attr.data-autoId]=\"autoIdNext()\"\n          (click)=\"updateCurrentImage(1)\">\n          <mat-icon fontIcon=\"chevron_right\"></mat-icon>\n        </button>\n      }\n\n      <!-- DOTS INDICATOR ......................................... -->\n      @if (thumbnailPosition() === 'dots' && stage() === 'ready' && images().length > 1) {\n        <div class=\"sd-preview-dots\" role=\"tablist\">\n          @for (img of images(); track img.id; let i = $index) {\n            <button\n              type=\"button\"\n              class=\"sd-preview-dot\"\n              [class.sd-preview-dot--active]=\"i === activeIndex()\"\n              [attr.aria-label]=\"'core.component.preview-image.next' | translate\"\n              [attr.data-autoId]=\"autoIdDot(i)\"\n              (click)=\"onClickThumbnailImage(i)\"></button>\n          }\n        </div>\n      }\n\n      <!-- FLOATING TOOLBAR ....................................... -->\n      @if (showToolbar() && stage() === 'ready') {\n        <div class=\"sd-preview-toolbar\" role=\"toolbar\">\n          @if (zoomable()) {\n            <button\n              type=\"button\"\n              class=\"sd-preview-toolbar__btn\"\n              [attr.aria-label]=\"'core.component.preview-image.zoom-out' | translate\"\n              [attr.title]=\"'core.component.preview-image.zoom-out' | translate\"\n              [attr.data-autoId]=\"autoIdZoomOut()\"\n              (click)=\"zoomOut()\">\n              <mat-icon fontIcon=\"zoom_out\"></mat-icon>\n            </button>\n            <span class=\"sd-preview-toolbar__readout\">{{ zoomPercent() }}%</span>\n            <button\n              type=\"button\"\n              class=\"sd-preview-toolbar__btn\"\n              [attr.aria-label]=\"'core.component.preview-image.zoom-in' | translate\"\n              [attr.title]=\"'core.component.preview-image.zoom-in' | translate\"\n              [attr.data-autoId]=\"autoIdZoomIn()\"\n              (click)=\"zoomIn()\">\n              <mat-icon fontIcon=\"zoom_in\"></mat-icon>\n            </button>\n            <span class=\"sd-preview-toolbar__divider\"></span>\n          }\n          <button\n            type=\"button\"\n            class=\"sd-preview-toolbar__btn sd-preview-toolbar__btn--with-label\"\n            [attr.aria-label]=\"'core.component.preview-image.fit' | translate\"\n            [attr.data-autoId]=\"autoIdFit()\"\n            (click)=\"fitToScreen()\">\n            <mat-icon fontIcon=\"fit_screen\"></mat-icon>\n            <span class=\"sd-preview-toolbar__btn-label\">{{ 'core.component.preview-image.fit' | translate }}</span>\n          </button>\n          <button\n            type=\"button\"\n            class=\"sd-preview-toolbar__btn\"\n            [attr.aria-label]=\"'core.component.preview-image.rotate' | translate\"\n            [attr.title]=\"'core.component.preview-image.rotate' | translate\"\n            [attr.data-autoId]=\"autoIdRotate()\"\n            (click)=\"rotate('right')\">\n            <mat-icon fontIcon=\"rotate_right\"></mat-icon>\n          </button>\n          <span class=\"sd-preview-toolbar__divider\"></span>\n          @if (downloadable()) {\n            <button\n              type=\"button\"\n              class=\"sd-preview-toolbar__btn\"\n              [attr.aria-label]=\"'core.component.preview-image.download' | translate\"\n              [attr.title]=\"'core.component.preview-image.download' | translate\"\n              [attr.data-autoId]=\"autoIdDownload()\"\n              (click)=\"downloadCurrent()\">\n              <mat-icon fontIcon=\"download\"></mat-icon>\n            </button>\n          }\n          <button\n            type=\"button\"\n            class=\"sd-preview-toolbar__btn\"\n            [attr.aria-label]=\"'core.component.preview-image.fullscreen' | translate\"\n            [attr.title]=\"'core.component.preview-image.fullscreen' | translate\"\n            [attr.data-autoId]=\"autoIdFullscreen()\"\n            (click)=\"toggleFullscreen()\">\n            <mat-icon [fontIcon]=\"isFullscreen() ? 'fullscreen_exit' : 'fullscreen'\"></mat-icon>\n          </button>\n        </div>\n      }\n    </div>\n\n    <!-- THUMBNAIL STRIP .................................................... -->\n    @if (\n      stage() === 'ready' &&\n      images().length > 1 &&\n      thumbnailPosition() !== 'none' &&\n      thumbnailPosition() !== 'dots'\n    ) {\n      <div\n        class=\"sd-preview-thumbs\"\n        [class.sd-preview-thumbs--vertical]=\"thumbnailPosition() === 'left' || thumbnailPosition() === 'right'\">\n        @for (img of images(); track trackByImage($index, img); let i = $index) {\n          <button\n            type=\"button\"\n            class=\"sd-preview-thumb\"\n            [class.sd-preview-thumb--active]=\"i === activeIndex()\"\n            [id]=\"'sd-preview-thumb-' + i\"\n            [attr.aria-label]=\"img.name\"\n            [attr.aria-current]=\"i === activeIndex() ? 'true' : null\"\n            [attr.data-autoId]=\"autoIdThumb(i)\"\n            (click)=\"onClickThumbnailImage(i)\">\n            @if (img.error) {\n              <div class=\"sd-preview-thumb__broken\">\n                <mat-icon fontIcon=\"broken_image\"></mat-icon>\n              </div>\n            } @else {\n              <img class=\"sd-preview-thumb__img\" [src]=\"img.blobUrl || img.url\" [alt]=\"img.alt || img.name\" />\n            }\n            <span class=\"sd-preview-thumb__badge\">{{ i + 1 }}</span>\n            @if (thumbnailPosition() === 'right' || thumbnailPosition() === 'left') {\n              <span class=\"sd-preview-thumb__name\" [title]=\"img.name\">{{ img.name }}</span>\n            }\n          </button>\n        }\n      </div>\n    }\n  </div>\n</div>\n", styles: [":host{--sd-preview-shell-bg: #0d0e10;--sd-preview-shell-bg-2: #17191c;--sd-preview-panel-bg: rgba(15, 17, 20, .92);--sd-preview-divider: rgba(255, 255, 255, .08);--sd-preview-fg: #f5f6f7;--sd-preview-fg-muted: rgba(255, 255, 255, .6);--sd-preview-fg-subtle: rgba(255, 255, 255, .4);--sd-preview-accent: var(--sd-primary, #3b82f6);--sd-preview-accent-soft: rgba(59, 130, 246, .2);--sd-preview-danger: var(--sd-error, #ef4444);--sd-preview-success: var(--sd-success, #22c55e);--sd-preview-danger-soft: rgba(239, 68, 68, .1);--sd-preview-danger-border: rgba(239, 68, 68, .3);--sd-preview-hover-bg: rgba(255, 255, 255, .1);display:block;width:100%;height:100%;min-height:320px;outline:none}:host([data-theme=light]){--sd-preview-shell-bg: #f7f8fa;--sd-preview-shell-bg-2: #ffffff;--sd-preview-panel-bg: rgba(255, 255, 255, .94);--sd-preview-divider: rgba(0, 0, 0, .08);--sd-preview-fg: #1a1c1f;--sd-preview-fg-muted: rgba(0, 0, 0, .62);--sd-preview-fg-subtle: rgba(0, 0, 0, .42);--sd-preview-accent: var(--sd-primary, #1f49bf);--sd-preview-accent-soft: rgba(31, 73, 191, .18);--sd-preview-danger: var(--sd-error, #ef4444);--sd-preview-success: var(--sd-success, #22c55e);--sd-preview-danger-soft: rgba(239, 68, 68, .08);--sd-preview-danger-border: rgba(239, 68, 68, .25);--sd-preview-hover-bg: rgba(0, 0, 0, .06)}.sd-preview-shell{position:relative;display:flex;flex-direction:column;width:100%;height:100%;background:var(--sd-preview-shell-bg);color:var(--sd-preview-fg);border-radius:12px;overflow:hidden;box-shadow:0 30px 80px #0000008c,0 0 0 1px #ffffff0a;font-family:inherit}.sd-preview-shell--fullscreen{height:100vh;width:100vw;border-radius:0}:host(.sd-preview-image-host--fullscreen){width:100vw;height:100vh;min-height:0}.sd-preview-header{position:relative;display:flex;align-items:center;height:68px;padding:0 16px;background:var(--sd-preview-panel-bg);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-bottom:1px solid var(--sd-preview-divider);flex:0 0 auto;z-index:2}.sd-preview-header--simple{justify-content:space-between}.sd-preview-header__left{display:flex;align-items:center;gap:12px;min-width:0;flex:1 1 auto}.sd-preview-header__icon{color:var(--sd-preview-fg-muted);font-size:20px;width:20px;height:20px}.sd-preview-header__meta{display:flex;flex-direction:column;min-width:0}.sd-preview-header__name{color:var(--sd-preview-fg);max-width:360px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.sd-preview-header__sub{font-size:12px;color:var(--sd-preview-fg-muted);margin-top:2px}.sd-preview-header__counter{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);font-size:13px;font-weight:500;color:var(--sd-preview-fg-muted);background:#ffffff14;padding:4px 12px;border-radius:999px;font-variant-numeric:tabular-nums}.sd-preview-body{flex:1 1 auto;min-height:0;display:flex;flex-direction:column;overflow:hidden}.sd-preview-shell--pos-bottom .sd-preview-body{flex-direction:column}.sd-preview-shell--pos-top .sd-preview-body{flex-direction:column-reverse}.sd-preview-shell--pos-right .sd-preview-body{flex-direction:row}.sd-preview-shell--pos-left .sd-preview-body{flex-direction:row-reverse}.sd-preview-shell--pos-dots .sd-preview-body,.sd-preview-shell--pos-none .sd-preview-body{flex-direction:column}.sd-preview-stage{position:relative;flex:1 1 auto;min-height:0;min-width:0;background:var(--sd-preview-shell-bg);background-image:linear-gradient(45deg,rgba(255,255,255,.02) 25%,transparent 25%),linear-gradient(-45deg,rgba(255,255,255,.02) 25%,transparent 25%),linear-gradient(45deg,transparent 75%,rgba(255,255,255,.02) 75%),linear-gradient(-45deg,transparent 75%,rgba(255,255,255,.02) 75%);background-size:24px 24px;background-position:0 0,0 12px,12px -12px,-12px 0;display:flex;align-items:center;justify-content:center;overflow:hidden;touch-action:none;-webkit-user-select:none;user-select:none}.sd-preview-stage--dragging{cursor:grab}:host([data-theme=light]) .sd-preview-stage{background-image:linear-gradient(45deg,rgba(0,0,0,.015) 25%,transparent 25%),linear-gradient(-45deg,rgba(0,0,0,.015) 25%,transparent 25%),linear-gradient(45deg,transparent 75%,rgba(0,0,0,.015) 75%),linear-gradient(-45deg,transparent 75%,rgba(0,0,0,.015) 75%)}.sd-preview-image{max-width:100%;max-height:100%;object-fit:contain;transform-origin:center center;transition:transform .2s ease;will-change:transform;pointer-events:none}.sd-preview-caption{position:absolute;bottom:96px;left:50%;transform:translate(-50%);max-width:70%;padding:6px 12px;background:#0f1114b3;color:var(--sd-preview-fg);border-radius:8px;font-size:13px;text-align:center}.sd-preview-image-broken,.sd-preview-image-loading{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;width:100%;max-width:480px;padding:24px;text-align:center}.sd-preview-nav{position:absolute;top:50%;transform:translateY(-50%);width:48px;height:48px;border-radius:999px;border:none;background:#14141699;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);color:var(--sd-preview-fg);display:flex;align-items:center;justify-content:center;cursor:pointer;box-shadow:0 4px 16px #0000004d;transition:background .12s;z-index:3}.sd-preview-nav mat-icon{font-size:28px;width:28px;height:28px}.sd-preview-nav:hover:not(:disabled){background:#ffffff2e}.sd-preview-nav:focus-visible{outline:2px solid var(--sd-preview-accent);outline-offset:2px}.sd-preview-nav:disabled{background:#ffffff0a;opacity:.35;cursor:not-allowed}.sd-preview-nav--prev{left:16px}.sd-preview-nav--next{right:16px}.sd-preview-toolbar{position:absolute;bottom:24px;left:50%;transform:translate(-50%);display:flex;align-items:center;gap:4px;padding:6px 8px;background:var(--sd-preview-panel-bg);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border:1px solid var(--sd-preview-divider);border-radius:12px;box-shadow:0 8px 30px #0006;z-index:3}.sd-preview-toolbar__btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;min-width:36px;height:36px;padding:0 8px;background:transparent;border:none;color:var(--sd-preview-fg);border-radius:8px;cursor:pointer;transition:background .12s}.sd-preview-toolbar__btn mat-icon{font-size:20px;width:20px;height:20px}.sd-preview-toolbar__btn--with-label{padding:0 12px}.sd-preview-toolbar__btn:hover:not(:disabled){background:var(--sd-preview-hover-bg)}.sd-preview-toolbar__btn:focus-visible{outline:2px solid var(--sd-preview-accent);outline-offset:2px}.sd-preview-toolbar__btn-label{font-size:13px;font-weight:500}.sd-preview-toolbar__readout{min-width:56px;text-align:center;color:var(--sd-preview-fg);font-size:13px;font-weight:500;font-variant-numeric:tabular-nums}.sd-preview-toolbar__divider{width:1px;height:20px;background:var(--sd-preview-divider);margin:0 4px}.sd-preview-thumbs{display:flex;gap:8px;padding:12px;background:var(--sd-preview-shell-bg-2);overflow:auto;flex:0 0 auto;flex-direction:row;height:116px}.sd-preview-thumbs--vertical{flex-direction:column;width:152px;height:100%}.sd-preview-thumb{position:relative;flex:0 0 auto;width:120px;height:76px;padding:0;border:none;background:transparent;border-radius:8px;outline:1px solid var(--sd-preview-divider);outline-offset:-1px;opacity:.7;overflow:hidden;cursor:pointer;transition:opacity .12s,outline-color .12s}.sd-preview-thumb:hover{opacity:1}.sd-preview-thumb--active{opacity:1;outline:2px solid var(--sd-preview-accent);outline-offset:-2px;box-shadow:inset 0 0 0 2px var(--sd-preview-accent)}.sd-preview-thumb:focus-visible{outline:2px solid var(--sd-preview-accent);outline-offset:2px}.sd-preview-thumb__img{width:100%;height:100%;object-fit:cover;display:block;pointer-events:none}.sd-preview-thumb__broken{display:flex;align-items:center;justify-content:center;width:100%;height:100%;background:var(--sd-preview-danger-soft);color:var(--sd-preview-danger);pointer-events:none}.sd-preview-thumb__broken mat-icon{font-size:24px;width:24px;height:24px}.sd-preview-thumb__badge{position:absolute;top:4px;right:4px;background:#000000b3;color:#fff;font-size:10px;font-weight:600;padding:1px 5px;border-radius:4px;pointer-events:none}.sd-preview-thumb__name{position:absolute;left:0;right:0;bottom:0;padding:14px 6px 4px;color:var(--sd-preview-fg);font-size:11px;line-height:1.3;background:linear-gradient(to top,rgba(0,0,0,.85),transparent);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;pointer-events:none}.sd-preview-thumbs--vertical .sd-preview-thumb{width:128px}.sd-preview-dots{position:absolute;bottom:24px;left:50%;transform:translate(-50%);display:flex;align-items:center;gap:6px;z-index:3}.sd-preview-dot{width:8px;height:8px;border:none;background:#ffffff4d;border-radius:999px;padding:0;cursor:pointer;transition:width .18s,background .18s}.sd-preview-dot--active{width:24px;background:#f5f6f7}.sd-preview-dot:focus-visible{outline:2px solid var(--sd-preview-accent);outline-offset:2px}.sd-preview-status{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;text-align:center;padding:24px}.sd-preview-status__tile{width:96px;height:96px;border-radius:24px;display:flex;align-items:center;justify-content:center;border:1px solid var(--sd-preview-divider);background:#ffffff0d}.sd-preview-status__tile mat-icon{font-size:48px;width:48px;height:48px;color:var(--sd-preview-fg-subtle)}.sd-preview-status__tile--muted{background:#ffffff0d;border-color:var(--sd-preview-divider)}.sd-preview-status__tile--danger{background:var(--sd-preview-danger-soft);border-color:var(--sd-preview-danger-border)}.sd-preview-status__tile--danger mat-icon{color:var(--sd-preview-danger)}.sd-preview-status__title{font-size:16px;font-weight:500;color:var(--sd-preview-fg)}.sd-preview-status__hint{font-size:13px;color:var(--sd-preview-fg-muted);max-width:320px}.sd-preview-spinner{width:56px;height:56px;border-radius:999px;border:3px solid rgba(255,255,255,.08);border-top-color:var(--sd-preview-accent);animation:sd-preview-spin .9s linear infinite}@keyframes sd-preview-spin{to{transform:rotate(360deg)}}.sd-preview-btn-primary{display:inline-flex;align-items:center;gap:6px;height:36px;padding:0 16px;background:var(--sd-preview-accent);color:#fff;border:none;border-radius:8px;cursor:pointer;font-size:13px;font-weight:500;transition:filter .12s}.sd-preview-btn-primary mat-icon{font-size:18px;width:18px;height:18px}.sd-preview-btn-primary:hover{filter:brightness(1.1)}.sd-preview-btn-primary:focus-visible{outline:2px solid #fff;outline-offset:2px}.sd-preview-kbd-hint{position:absolute;top:16px;left:16px;display:flex;align-items:center;gap:6px;z-index:2;pointer-events:none}.sd-preview-kbd{display:inline-flex;align-items:center;justify-content:center;min-width:20px;height:20px;padding:0 5px;border:1px solid var(--sd-preview-divider);background:#ffffff0a;color:var(--sd-preview-fg-muted);border-radius:4px;font:500 11px/1 ui-monospace,SFMono-Regular,Menlo,monospace}.sd-preview-kbd-text,.sd-preview-kbd-dot{font-size:11px;color:var(--sd-preview-fg-subtle)}.sd-preview-kbd-dot{margin:0 2px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+_a$1 = SdPreviewImage;
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: SdPreviewImage, decorators: [{
+            type: Component,
+            args: [{ selector: 'sd-preview-image', standalone: true, imports: [CommonModule, MatIconModule, TranslatePipe], changeDetection: ChangeDetectionStrategy.OnPush, host: {
+                        tabindex: '0',
+                        class: 'sd-preview-image-host',
+                        // WHY data-theme attribute (not class): SCSS uses :host([data-theme="light"])
+                        // to swap CSS custom properties — keeps the theme variant declarative and
+                        // visible in devtools without polluting the class list.
+                        '[attr.data-theme]': 'theme()',
+                        '[class.sd-preview-image-host--fullscreen]': 'isFullscreen()',
+                    }, template: "<!--\n  Self-contained viewer shell. Component sizes to its parent (width:100%;\n  height:100%) \u2014 consumer decides whether to wrap in <sd-modal>,\n  <sd-side-drawer>, a page section, or use inline.\n-->\n<div [ngClass]=\"shellClass()\" role=\"region\">\n\n  <!-- ============================================\n       HEADER BAR\n       ============================================ -->\n  @if (stage() !== 'empty' && activeImage(); as img) {\n    <div class=\"sd-preview-header\">\n      <div class=\"sd-preview-header__left\">\n        <mat-icon class=\"sd-preview-header__icon\" fontIcon=\"image\"></mat-icon>\n        <div class=\"sd-preview-header__meta\">\n          <div class=\"sd-preview-header__name T14M\" [title]=\"img.name\">{{ img.name }}</div>\n          @if (img.size) {\n            <div class=\"sd-preview-header__sub\">\n              {{ formatBytes(img.size) }}\n            </div>\n          }\n        </div>\n      </div>\n\n      @if (images().length > 1) {\n        <div class=\"sd-preview-header__counter\" aria-live=\"polite\">\n          {{ activeIndex() + 1 }} / {{ images().length }}\n        </div>\n      }\n    </div>\n  } @else if (title()) {\n    <!-- Optional override title even on empty state -->\n    <div class=\"sd-preview-header sd-preview-header--simple\">\n      <div class=\"sd-preview-header__name T14M\">{{ title() }}</div>\n    </div>\n  }\n\n  <!-- ============================================\n       BODY (stage + thumbnails per layout)\n       ============================================ -->\n  <div class=\"sd-preview-body\">\n\n    <!-- STAGE ............................................................... -->\n    <div\n      class=\"sd-preview-stage\"\n      [class.sd-preview-stage--dragging]=\"zoom() > 1\"\n      (wheel)=\"onWheel($event)\"\n      (pointerdown)=\"onPointerDown($event)\"\n      (pointermove)=\"onPointerMove($event)\"\n      (pointerup)=\"onPointerUp($event)\"\n      (pointercancel)=\"onPointerCancel($event)\"\n      (dblclick)=\"onImageDblClick()\">\n\n      @switch (stage()) {\n        @case ('empty') {\n          <div class=\"sd-preview-status\">\n            <div class=\"sd-preview-status__tile sd-preview-status__tile--muted\">\n              <mat-icon fontIcon=\"image_not_supported\"></mat-icon>\n            </div>\n            <div class=\"sd-preview-status__title\">\n              {{ 'core.component.preview-image.no-image' | translate }}\n            </div>\n            <div class=\"sd-preview-status__hint\">\n              {{ 'core.component.preview-image.no-image-hint' | translate }}\n            </div>\n          </div>\n        }\n        @case ('loading') {\n          <div class=\"sd-preview-status\">\n            <div class=\"sd-preview-spinner\" role=\"progressbar\"></div>\n            <div class=\"sd-preview-status__hint\">\n              {{ 'core.component.preview-image.loading' | translate }}\n            </div>\n          </div>\n        }\n        @default {\n          @if (activeImage(); as img) {\n            @if (img.loading) {\n              <!-- Per-image loading (retry inline) \u2014 gi\u1EEF nav/dots/thumbs visible -->\n              <div class=\"sd-preview-image-loading\" role=\"status\"\n                   [attr.aria-label]=\"'core.component.preview-image.loading' | translate\">\n                <div class=\"sd-preview-spinner\"></div>\n                <div class=\"sd-preview-status__hint\">\n                  {{ 'core.component.preview-image.loading' | translate }}\n                </div>\n              </div>\n            } @else if (img.error) {\n              <!-- Inline broken-image placeholder \u2014 gi\u1EEF nav/dots/thumbs visible -->\n              <div class=\"sd-preview-image-broken\" role=\"img\"\n                   [attr.aria-label]=\"'core.component.preview-image.load-error' | translate\">\n                <div class=\"sd-preview-status__tile sd-preview-status__tile--danger\">\n                  <mat-icon fontIcon=\"broken_image\"></mat-icon>\n                </div>\n                <div class=\"sd-preview-status__title\">\n                  {{ 'core.component.preview-image.load-error' | translate }}\n                </div>\n                <div class=\"sd-preview-status__hint\">\n                  {{ 'core.component.preview-image.load-error-hint' | translate }}\n                </div>\n                <button type=\"button\" class=\"sd-preview-btn-primary\" (click)=\"retryActive()\" [attr.data-autoId]=\"autoIdRetry()\">\n                  <mat-icon fontIcon=\"refresh\"></mat-icon>\n                  <span>{{ 'core.component.preview-image.retry' | translate }}</span>\n                </button>\n              </div>\n            } @else {\n              <img\n                class=\"sd-preview-image\"\n                [src]=\"img.blobUrl || img.url\"\n                [alt]=\"img.alt || img.name\"\n                [style.transform]=\"imageTransform()\"\n                (error)=\"onImageError()\"\n                draggable=\"false\" />\n\n              @if (img.caption) {\n                <div class=\"sd-preview-caption\">{{ img.caption }}</div>\n              }\n            }\n          }\n        }\n      }\n\n      <!-- KEYBOARD HINT ............................................. -->\n      @if (stage() === 'ready' && images().length > 1) {\n        <div class=\"sd-preview-kbd-hint\" aria-hidden=\"true\">\n          <span class=\"sd-preview-kbd\">\u2190</span>\n          <span class=\"sd-preview-kbd\">\u2192</span>\n          <span class=\"sd-preview-kbd-text\">{{ 'core.component.preview-image.kbd-hint-nav' | translate }}</span>\n        </div>\n      }\n\n      <!-- NAV ARROWS ............................................. -->\n      @if (stage() === 'ready' && images().length > 1) {\n        <button\n          type=\"button\"\n          class=\"sd-preview-nav sd-preview-nav--prev\"\n          [disabled]=\"!hasPrev()\"\n          [attr.aria-label]=\"'core.component.preview-image.prev' | translate\"\n          [attr.data-autoId]=\"autoIdPrev()\"\n          (click)=\"updateCurrentImage(-1)\">\n          <mat-icon fontIcon=\"chevron_left\"></mat-icon>\n        </button>\n        <button\n          type=\"button\"\n          class=\"sd-preview-nav sd-preview-nav--next\"\n          [disabled]=\"!hasNext()\"\n          [attr.aria-label]=\"'core.component.preview-image.next' | translate\"\n          [attr.data-autoId]=\"autoIdNext()\"\n          (click)=\"updateCurrentImage(1)\">\n          <mat-icon fontIcon=\"chevron_right\"></mat-icon>\n        </button>\n      }\n\n      <!-- DOTS INDICATOR ......................................... -->\n      @if (thumbnailPosition() === 'dots' && stage() === 'ready' && images().length > 1) {\n        <div class=\"sd-preview-dots\" role=\"tablist\">\n          @for (img of images(); track img.id; let i = $index) {\n            <button\n              type=\"button\"\n              class=\"sd-preview-dot\"\n              [class.sd-preview-dot--active]=\"i === activeIndex()\"\n              [attr.aria-label]=\"'core.component.preview-image.next' | translate\"\n              [attr.data-autoId]=\"autoIdDot(i)\"\n              (click)=\"onClickThumbnailImage(i)\"></button>\n          }\n        </div>\n      }\n\n      <!-- FLOATING TOOLBAR ....................................... -->\n      @if (showToolbar() && stage() === 'ready') {\n        <div class=\"sd-preview-toolbar\" role=\"toolbar\">\n          @if (zoomable()) {\n            <button\n              type=\"button\"\n              class=\"sd-preview-toolbar__btn\"\n              [attr.aria-label]=\"'core.component.preview-image.zoom-out' | translate\"\n              [attr.title]=\"'core.component.preview-image.zoom-out' | translate\"\n              [attr.data-autoId]=\"autoIdZoomOut()\"\n              (click)=\"zoomOut()\">\n              <mat-icon fontIcon=\"zoom_out\"></mat-icon>\n            </button>\n            <span class=\"sd-preview-toolbar__readout\">{{ zoomPercent() }}%</span>\n            <button\n              type=\"button\"\n              class=\"sd-preview-toolbar__btn\"\n              [attr.aria-label]=\"'core.component.preview-image.zoom-in' | translate\"\n              [attr.title]=\"'core.component.preview-image.zoom-in' | translate\"\n              [attr.data-autoId]=\"autoIdZoomIn()\"\n              (click)=\"zoomIn()\">\n              <mat-icon fontIcon=\"zoom_in\"></mat-icon>\n            </button>\n            <span class=\"sd-preview-toolbar__divider\"></span>\n          }\n          <button\n            type=\"button\"\n            class=\"sd-preview-toolbar__btn sd-preview-toolbar__btn--with-label\"\n            [attr.aria-label]=\"'core.component.preview-image.fit' | translate\"\n            [attr.data-autoId]=\"autoIdFit()\"\n            (click)=\"fitToScreen()\">\n            <mat-icon fontIcon=\"fit_screen\"></mat-icon>\n            <span class=\"sd-preview-toolbar__btn-label\">{{ 'core.component.preview-image.fit' | translate }}</span>\n          </button>\n          <button\n            type=\"button\"\n            class=\"sd-preview-toolbar__btn\"\n            [attr.aria-label]=\"'core.component.preview-image.rotate' | translate\"\n            [attr.title]=\"'core.component.preview-image.rotate' | translate\"\n            [attr.data-autoId]=\"autoIdRotate()\"\n            (click)=\"rotate('right')\">\n            <mat-icon fontIcon=\"rotate_right\"></mat-icon>\n          </button>\n          <span class=\"sd-preview-toolbar__divider\"></span>\n          @if (downloadable()) {\n            <button\n              type=\"button\"\n              class=\"sd-preview-toolbar__btn\"\n              [attr.aria-label]=\"'core.component.preview-image.download' | translate\"\n              [attr.title]=\"'core.component.preview-image.download' | translate\"\n              [attr.data-autoId]=\"autoIdDownload()\"\n              (click)=\"downloadCurrent()\">\n              <mat-icon fontIcon=\"download\"></mat-icon>\n            </button>\n          }\n          <button\n            type=\"button\"\n            class=\"sd-preview-toolbar__btn\"\n            [attr.aria-label]=\"'core.component.preview-image.fullscreen' | translate\"\n            [attr.title]=\"'core.component.preview-image.fullscreen' | translate\"\n            [attr.data-autoId]=\"autoIdFullscreen()\"\n            (click)=\"toggleFullscreen()\">\n            <mat-icon [fontIcon]=\"isFullscreen() ? 'fullscreen_exit' : 'fullscreen'\"></mat-icon>\n          </button>\n        </div>\n      }\n    </div>\n\n    <!-- THUMBNAIL STRIP .................................................... -->\n    @if (\n      stage() === 'ready' &&\n      images().length > 1 &&\n      thumbnailPosition() !== 'none' &&\n      thumbnailPosition() !== 'dots'\n    ) {\n      <div\n        class=\"sd-preview-thumbs\"\n        [class.sd-preview-thumbs--vertical]=\"thumbnailPosition() === 'left' || thumbnailPosition() === 'right'\">\n        @for (img of images(); track trackByImage($index, img); let i = $index) {\n          <button\n            type=\"button\"\n            class=\"sd-preview-thumb\"\n            [class.sd-preview-thumb--active]=\"i === activeIndex()\"\n            [id]=\"'sd-preview-thumb-' + i\"\n            [attr.aria-label]=\"img.name\"\n            [attr.aria-current]=\"i === activeIndex() ? 'true' : null\"\n            [attr.data-autoId]=\"autoIdThumb(i)\"\n            (click)=\"onClickThumbnailImage(i)\">\n            @if (img.error) {\n              <div class=\"sd-preview-thumb__broken\">\n                <mat-icon fontIcon=\"broken_image\"></mat-icon>\n              </div>\n            } @else {\n              <img class=\"sd-preview-thumb__img\" [src]=\"img.blobUrl || img.url\" [alt]=\"img.alt || img.name\" />\n            }\n            <span class=\"sd-preview-thumb__badge\">{{ i + 1 }}</span>\n            @if (thumbnailPosition() === 'right' || thumbnailPosition() === 'left') {\n              <span class=\"sd-preview-thumb__name\" [title]=\"img.name\">{{ img.name }}</span>\n            }\n          </button>\n        }\n      </div>\n    }\n  </div>\n</div>\n", styles: [":host{--sd-preview-shell-bg: #0d0e10;--sd-preview-shell-bg-2: #17191c;--sd-preview-panel-bg: rgba(15, 17, 20, .92);--sd-preview-divider: rgba(255, 255, 255, .08);--sd-preview-fg: #f5f6f7;--sd-preview-fg-muted: rgba(255, 255, 255, .6);--sd-preview-fg-subtle: rgba(255, 255, 255, .4);--sd-preview-accent: var(--sd-primary, #3b82f6);--sd-preview-accent-soft: rgba(59, 130, 246, .2);--sd-preview-danger: var(--sd-error, #ef4444);--sd-preview-success: var(--sd-success, #22c55e);--sd-preview-danger-soft: rgba(239, 68, 68, .1);--sd-preview-danger-border: rgba(239, 68, 68, .3);--sd-preview-hover-bg: rgba(255, 255, 255, .1);display:block;width:100%;height:100%;min-height:320px;outline:none}:host([data-theme=light]){--sd-preview-shell-bg: #f7f8fa;--sd-preview-shell-bg-2: #ffffff;--sd-preview-panel-bg: rgba(255, 255, 255, .94);--sd-preview-divider: rgba(0, 0, 0, .08);--sd-preview-fg: #1a1c1f;--sd-preview-fg-muted: rgba(0, 0, 0, .62);--sd-preview-fg-subtle: rgba(0, 0, 0, .42);--sd-preview-accent: var(--sd-primary, #1f49bf);--sd-preview-accent-soft: rgba(31, 73, 191, .18);--sd-preview-danger: var(--sd-error, #ef4444);--sd-preview-success: var(--sd-success, #22c55e);--sd-preview-danger-soft: rgba(239, 68, 68, .08);--sd-preview-danger-border: rgba(239, 68, 68, .25);--sd-preview-hover-bg: rgba(0, 0, 0, .06)}.sd-preview-shell{position:relative;display:flex;flex-direction:column;width:100%;height:100%;background:var(--sd-preview-shell-bg);color:var(--sd-preview-fg);border-radius:12px;overflow:hidden;box-shadow:0 30px 80px #0000008c,0 0 0 1px #ffffff0a;font-family:inherit}.sd-preview-shell--fullscreen{height:100vh;width:100vw;border-radius:0}:host(.sd-preview-image-host--fullscreen){width:100vw;height:100vh;min-height:0}.sd-preview-header{position:relative;display:flex;align-items:center;height:68px;padding:0 16px;background:var(--sd-preview-panel-bg);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-bottom:1px solid var(--sd-preview-divider);flex:0 0 auto;z-index:2}.sd-preview-header--simple{justify-content:space-between}.sd-preview-header__left{display:flex;align-items:center;gap:12px;min-width:0;flex:1 1 auto}.sd-preview-header__icon{color:var(--sd-preview-fg-muted);font-size:20px;width:20px;height:20px}.sd-preview-header__meta{display:flex;flex-direction:column;min-width:0}.sd-preview-header__name{color:var(--sd-preview-fg);max-width:360px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.sd-preview-header__sub{font-size:12px;color:var(--sd-preview-fg-muted);margin-top:2px}.sd-preview-header__counter{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);font-size:13px;font-weight:500;color:var(--sd-preview-fg-muted);background:#ffffff14;padding:4px 12px;border-radius:999px;font-variant-numeric:tabular-nums}.sd-preview-body{flex:1 1 auto;min-height:0;display:flex;flex-direction:column;overflow:hidden}.sd-preview-shell--pos-bottom .sd-preview-body{flex-direction:column}.sd-preview-shell--pos-top .sd-preview-body{flex-direction:column-reverse}.sd-preview-shell--pos-right .sd-preview-body{flex-direction:row}.sd-preview-shell--pos-left .sd-preview-body{flex-direction:row-reverse}.sd-preview-shell--pos-dots .sd-preview-body,.sd-preview-shell--pos-none .sd-preview-body{flex-direction:column}.sd-preview-stage{position:relative;flex:1 1 auto;min-height:0;min-width:0;background:var(--sd-preview-shell-bg);background-image:linear-gradient(45deg,rgba(255,255,255,.02) 25%,transparent 25%),linear-gradient(-45deg,rgba(255,255,255,.02) 25%,transparent 25%),linear-gradient(45deg,transparent 75%,rgba(255,255,255,.02) 75%),linear-gradient(-45deg,transparent 75%,rgba(255,255,255,.02) 75%);background-size:24px 24px;background-position:0 0,0 12px,12px -12px,-12px 0;display:flex;align-items:center;justify-content:center;overflow:hidden;touch-action:none;-webkit-user-select:none;user-select:none}.sd-preview-stage--dragging{cursor:grab}:host([data-theme=light]) .sd-preview-stage{background-image:linear-gradient(45deg,rgba(0,0,0,.015) 25%,transparent 25%),linear-gradient(-45deg,rgba(0,0,0,.015) 25%,transparent 25%),linear-gradient(45deg,transparent 75%,rgba(0,0,0,.015) 75%),linear-gradient(-45deg,transparent 75%,rgba(0,0,0,.015) 75%)}.sd-preview-image{max-width:100%;max-height:100%;object-fit:contain;transform-origin:center center;transition:transform .2s ease;will-change:transform;pointer-events:none}.sd-preview-caption{position:absolute;bottom:96px;left:50%;transform:translate(-50%);max-width:70%;padding:6px 12px;background:#0f1114b3;color:var(--sd-preview-fg);border-radius:8px;font-size:13px;text-align:center}.sd-preview-image-broken,.sd-preview-image-loading{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;width:100%;max-width:480px;padding:24px;text-align:center}.sd-preview-nav{position:absolute;top:50%;transform:translateY(-50%);width:48px;height:48px;border-radius:999px;border:none;background:#14141699;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);color:var(--sd-preview-fg);display:flex;align-items:center;justify-content:center;cursor:pointer;box-shadow:0 4px 16px #0000004d;transition:background .12s;z-index:3}.sd-preview-nav mat-icon{font-size:28px;width:28px;height:28px}.sd-preview-nav:hover:not(:disabled){background:#ffffff2e}.sd-preview-nav:focus-visible{outline:2px solid var(--sd-preview-accent);outline-offset:2px}.sd-preview-nav:disabled{background:#ffffff0a;opacity:.35;cursor:not-allowed}.sd-preview-nav--prev{left:16px}.sd-preview-nav--next{right:16px}.sd-preview-toolbar{position:absolute;bottom:24px;left:50%;transform:translate(-50%);display:flex;align-items:center;gap:4px;padding:6px 8px;background:var(--sd-preview-panel-bg);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border:1px solid var(--sd-preview-divider);border-radius:12px;box-shadow:0 8px 30px #0006;z-index:3}.sd-preview-toolbar__btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;min-width:36px;height:36px;padding:0 8px;background:transparent;border:none;color:var(--sd-preview-fg);border-radius:8px;cursor:pointer;transition:background .12s}.sd-preview-toolbar__btn mat-icon{font-size:20px;width:20px;height:20px}.sd-preview-toolbar__btn--with-label{padding:0 12px}.sd-preview-toolbar__btn:hover:not(:disabled){background:var(--sd-preview-hover-bg)}.sd-preview-toolbar__btn:focus-visible{outline:2px solid var(--sd-preview-accent);outline-offset:2px}.sd-preview-toolbar__btn-label{font-size:13px;font-weight:500}.sd-preview-toolbar__readout{min-width:56px;text-align:center;color:var(--sd-preview-fg);font-size:13px;font-weight:500;font-variant-numeric:tabular-nums}.sd-preview-toolbar__divider{width:1px;height:20px;background:var(--sd-preview-divider);margin:0 4px}.sd-preview-thumbs{display:flex;gap:8px;padding:12px;background:var(--sd-preview-shell-bg-2);overflow:auto;flex:0 0 auto;flex-direction:row;height:116px}.sd-preview-thumbs--vertical{flex-direction:column;width:152px;height:100%}.sd-preview-thumb{position:relative;flex:0 0 auto;width:120px;height:76px;padding:0;border:none;background:transparent;border-radius:8px;outline:1px solid var(--sd-preview-divider);outline-offset:-1px;opacity:.7;overflow:hidden;cursor:pointer;transition:opacity .12s,outline-color .12s}.sd-preview-thumb:hover{opacity:1}.sd-preview-thumb--active{opacity:1;outline:2px solid var(--sd-preview-accent);outline-offset:-2px;box-shadow:inset 0 0 0 2px var(--sd-preview-accent)}.sd-preview-thumb:focus-visible{outline:2px solid var(--sd-preview-accent);outline-offset:2px}.sd-preview-thumb__img{width:100%;height:100%;object-fit:cover;display:block;pointer-events:none}.sd-preview-thumb__broken{display:flex;align-items:center;justify-content:center;width:100%;height:100%;background:var(--sd-preview-danger-soft);color:var(--sd-preview-danger);pointer-events:none}.sd-preview-thumb__broken mat-icon{font-size:24px;width:24px;height:24px}.sd-preview-thumb__badge{position:absolute;top:4px;right:4px;background:#000000b3;color:#fff;font-size:10px;font-weight:600;padding:1px 5px;border-radius:4px;pointer-events:none}.sd-preview-thumb__name{position:absolute;left:0;right:0;bottom:0;padding:14px 6px 4px;color:var(--sd-preview-fg);font-size:11px;line-height:1.3;background:linear-gradient(to top,rgba(0,0,0,.85),transparent);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;pointer-events:none}.sd-preview-thumbs--vertical .sd-preview-thumb{width:128px}.sd-preview-dots{position:absolute;bottom:24px;left:50%;transform:translate(-50%);display:flex;align-items:center;gap:6px;z-index:3}.sd-preview-dot{width:8px;height:8px;border:none;background:#ffffff4d;border-radius:999px;padding:0;cursor:pointer;transition:width .18s,background .18s}.sd-preview-dot--active{width:24px;background:#f5f6f7}.sd-preview-dot:focus-visible{outline:2px solid var(--sd-preview-accent);outline-offset:2px}.sd-preview-status{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;text-align:center;padding:24px}.sd-preview-status__tile{width:96px;height:96px;border-radius:24px;display:flex;align-items:center;justify-content:center;border:1px solid var(--sd-preview-divider);background:#ffffff0d}.sd-preview-status__tile mat-icon{font-size:48px;width:48px;height:48px;color:var(--sd-preview-fg-subtle)}.sd-preview-status__tile--muted{background:#ffffff0d;border-color:var(--sd-preview-divider)}.sd-preview-status__tile--danger{background:var(--sd-preview-danger-soft);border-color:var(--sd-preview-danger-border)}.sd-preview-status__tile--danger mat-icon{color:var(--sd-preview-danger)}.sd-preview-status__title{font-size:16px;font-weight:500;color:var(--sd-preview-fg)}.sd-preview-status__hint{font-size:13px;color:var(--sd-preview-fg-muted);max-width:320px}.sd-preview-spinner{width:56px;height:56px;border-radius:999px;border:3px solid rgba(255,255,255,.08);border-top-color:var(--sd-preview-accent);animation:sd-preview-spin .9s linear infinite}@keyframes sd-preview-spin{to{transform:rotate(360deg)}}.sd-preview-btn-primary{display:inline-flex;align-items:center;gap:6px;height:36px;padding:0 16px;background:var(--sd-preview-accent);color:#fff;border:none;border-radius:8px;cursor:pointer;font-size:13px;font-weight:500;transition:filter .12s}.sd-preview-btn-primary mat-icon{font-size:18px;width:18px;height:18px}.sd-preview-btn-primary:hover{filter:brightness(1.1)}.sd-preview-btn-primary:focus-visible{outline:2px solid #fff;outline-offset:2px}.sd-preview-kbd-hint{position:absolute;top:16px;left:16px;display:flex;align-items:center;gap:6px;z-index:2;pointer-events:none}.sd-preview-kbd{display:inline-flex;align-items:center;justify-content:center;min-width:20px;height:20px;padding:0 5px;border:1px solid var(--sd-preview-divider);background:#ffffff0a;color:var(--sd-preview-fg-muted);border-radius:4px;font:500 11px/1 ui-monospace,SFMono-Regular,Menlo,monospace}.sd-preview-kbd-text,.sd-preview-kbd-dot{font-size:11px;color:var(--sd-preview-fg-subtle)}.sd-preview-kbd-dot{margin:0 2px}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { onKeyDown: [{
+                type: HostListener,
+                args: ['keydown', ['$event']]
+            }] } });
+
+var _a;
+const SD_PDFJS_LIB = new InjectionToken('SD_PDFJS_LIB', {
+    providedIn: 'root',
+    factory: () => {
+        // Try the worker URL one time at first-injection. Guarded so the
+        // component still imports cleanly in environments (tests, SSR) where
+        // import.meta.url can't be resolved or the worker bundle isn't shipped.
+        try {
+            if (pdfjsLib?.GlobalWorkerOptions && !pdfjsLib.GlobalWorkerOptions.workerSrc) {
+                pdfjsLib.GlobalWorkerOptions.workerSrc = new URL(
+                // eslint-disable-next-line @typescript-eslint/no-explicit-any
+                'pdfjs-dist/build/pdf.worker.min.mjs', import.meta.url).toString();
+            }
+        }
+        catch {
+            // Consumer app must set workerSrc manually (documented in sd-preview.md).
+        }
+        return pdfjsLib;
+    },
+});
+class SdPreviewPdf {
+    // ==========================================
+    // CONSTANTS
+    // ==========================================
+    // Dải zoom hữu dụng cho viewer PDF. Dưới 25% chữ thành chấm, trên 400% là
+    // raster bị pixelated nặng (canvas + DPR vẫn có giới hạn). Trùng dải của
+    // preview-image để consumer làm quen với 1 spec duy nhất.
+    static MIN_ZOOM = 0.25;
+    static MAX_ZOOM = 4;
+    static ZOOM_STEP = 0.1;
+    // ==========================================
+    // DI
+    // ==========================================
+    #hostEl = inject(ElementRef);
+    #destroyRef = inject(DestroyRef);
+    #pdfjs = inject(SD_PDFJS_LIB);
+    // ==========================================
+    // VIEW CHILDREN
+    // WHY `protected readonly` (not `#private`): Angular's `viewChild()` query
+    // function emits a decorator-equivalent metadata that the compiler can't
+    // see through ES private fields (NG1053). `protected` keeps them invisible
+    // to consumers but accessible to the template.
+    // ==========================================
+    pageCanvasRef = viewChild('pageCanvas');
+    stageEl = viewChild('stageRef');
+    pageInputRef = viewChild('pageInput');
+    searchInputRef = viewChild('searchInput');
+    // Every thumbnail <canvas> in the sidebar — populated when sidebar is open +
+    // mode==='thumbnails'. We feed these to the IntersectionObserver below so a
+    // thumb only renders when it scrolls into the viewport (lazy fill).
+    thumbCanvases = viewChildren('thumbCanvas');
+    // ==========================================
+    // INPUTS (signal-based, Angular 19 style)
+    // ==========================================
+    // autoId prefix `preview-pdf-`. Per-element child autoIds derive `${autoId}-{suffix}`.
+    autoIdInput = input(undefined, { alias: 'autoId' });
+    autoId = computed(() => (this.autoIdInput() ? `components-preview-pdf-${this.autoIdInput()}` : undefined));
+    #childAutoId = (suffix) => {
+        return this.autoId() ? `${this.autoId()}-${suffix}` : undefined;
+    };
+    // Page navigation
+    autoIdFirst = computed(() => this.#childAutoId('first'));
+    autoIdPrev = computed(() => this.#childAutoId('prev'));
+    autoIdNext = computed(() => this.#childAutoId('next'));
+    autoIdLast = computed(() => this.#childAutoId('last'));
+    autoIdPageInput = computed(() => this.#childAutoId('page-input'));
+    // Zoom
+    autoIdZoomIn = computed(() => this.#childAutoId('zoom-in'));
+    autoIdZoomOut = computed(() => this.#childAutoId('zoom-out'));
+    autoIdZoomReadout = computed(() => this.#childAutoId('zoom-readout'));
+    // Modes
+    autoIdFitPage = computed(() => this.#childAutoId('fit-page'));
+    autoIdFitWidth = computed(() => this.#childAutoId('fit-width'));
+    autoIdRotate = computed(() => this.#childAutoId('rotate'));
+    autoIdScrollMode = computed(() => this.#childAutoId('scroll-mode'));
+    // Header actions
+    autoIdSearchToggle = computed(() => this.#childAutoId('search'));
+    autoIdPrint = computed(() => this.#childAutoId('print'));
+    autoIdDownload = computed(() => this.#childAutoId('download'));
+    autoIdFullscreen = computed(() => this.#childAutoId('fullscreen'));
+    autoIdSidebarToggle = computed(() => this.#childAutoId('sidebar-toggle'));
+    // Sidebar tabs
+    autoIdTabThumbnails = computed(() => this.#childAutoId('tab-thumbnails'));
+    autoIdTabOutline = computed(() => this.#childAutoId('tab-outline'));
+    autoIdTabSearch = computed(() => this.#childAutoId('tab-search'));
+    // Search bar
+    autoIdSearchInput = computed(() => this.#childAutoId('search-input'));
+    autoIdSearchNext = computed(() => this.#childAutoId('search-next'));
+    autoIdSearchPrev = computed(() => this.#childAutoId('search-prev'));
+    autoIdSearchCase = computed(() => this.#childAutoId('search-case'));
+    autoIdSearchWhole = computed(() => this.#childAutoId('search-whole'));
+    autoIdSearchClose = computed(() => this.#childAutoId('search-close'));
+    // Retry (error state)
+    autoIdRetry = computed(() => this.#childAutoId('retry'));
+    // Per-index helpers (thumb + search result)
+    autoIdThumb = (i) => this.#childAutoId(`thumb-${i}`);
+    autoIdResult = (i) => this.#childAutoId(`result-${i}`);
+    source = input(null);
+    title = input(undefined);
+    startPage = input(1);
+    initialZoom = input('page-fit');
+    sidebar = input('thumbnails');
+    sidebarOpen = input(true);
+    scrollMode = input('page');
+    showToolbar = input(true);
+    downloadable = input(true);
+    password = input(undefined);
+    httpHeaders = input(undefined);
+    // Theme variant — drives [data-theme] host attribute. Default 'dark'
+    // preserves the original visual contract; 'light' flips token set via SCSS.
+    theme = input('dark');
+    // ==========================================
+    // OUTPUTS
+    // ==========================================
+    close = output();
+    loaded = output();
+    pageChange = output();
+    zoomChange = output();
+    download = output();
+    loadError = output();
+    // Fired whenever the search term, results, or active index changes — gives
+    // the consumer a stable hook for analytics / sticky highlight bars without
+    // poking at the internal state signal.
+    searchChange = output();
+    // ==========================================
+    // STATE (signals)
+    // ==========================================
+    #stage = signal('empty');
+    #pdfDoc = signal(null);
+    #meta = signal(null);
+    #activePage = signal(1);
+    #zoom = signal(1);
+    #zoomMode = signal('page-fit');
+    #rotation = signal(0);
+    #sidebarOpenInternal = signal(true);
+    #sidebarModeInternal = signal('thumbnails');
+    #scrollModeInternal = signal('page');
+    #loadProgress = signal({ loaded: 0, total: 0 });
+    #loadError = signal(null);
+    #isFullscreen = signal(false);
+    #filename = signal('document.pdf');
+    #fileSize = signal(0);
+    // Thumbnail cache: page number → data URL of mini-render. Lazy-populated as
+    // the user opens the sidebar / scrolls thumbnails into view.
+    #thumbCache = signal({});
+    // ==========================================
+    // SEARCH STATE
+    // ==========================================
+    // Whether the search bar (between header + body) is visible. Toggled via
+    // Ctrl+F, the sidebar tab, or `openSearch()` / `closeSearch()`. Independent
+    // from the sidebar's `'search'` tab — the bar can stay open with the
+    // sidebar closed (Ctrl+F flow), and the tab can be open without the bar.
+    #searchBarOpen = signal(false);
+    // Persisted across `clearSearch()` so user toggles don't reset on each new
+    // term — mirrors Acrobat / Chrome's "Find in page" behaviour.
+    #searchCaseSensitive = signal(false);
+    #searchWholeWord = signal(false);
+    #searchTerm = signal('');
+    #searchResults = signal([]);
+    // -1 sentinel means "no result focused yet" (e.g. right after clearSearch
+    // or before the first searchNext). Highlight rendering uses this to skip
+    // the `--active` class altogether.
+    #searchActiveIndex = signal(-1);
+    // Page-text cache: pageNum → fully-joined plain text. We pay the
+    // `getTextContent()` cost once per page per document, then reuse across
+    // re-runs (e.g. toggling case-sensitive). Cleared on every source change.
+    #pageTextCache = new Map();
+    // Token to abort an in-flight `search()` call when a newer one supersedes it
+    // — same pattern as #loadToken / #renderToken upstream.
+    #searchToken = 0;
+    // The IntersectionObserver instance that drives lazy thumb rendering. Lives
+    // for the component's lifetime; we just rebind to the latest canvas refs
+    // when the sidebar tab switches.
+    #thumbObserver = null;
+    // Pages currently being rendered as thumbs — guards against double work
+    // when a thumb scrolls in/out/in rapidly.
+    #thumbsRendering = new Set();
+    // Cached resolved source object that getDocument actually consumed — used
+    // for download fallback when caller passed a non-URL source.
+    #lastBlobUrl = null;
+    // Track ALL blob URLs we created so we can revoke on source change + destroy.
+    #ownedBlobUrls = new Set();
+    // Race guards mirror preview-image's #loadToken pattern.
+    #loadToken = 0;
+    #currentRenderTask = null;
+    #renderToken = 0;
+    // ==========================================
+    // COMPUTED (template-readable)
+    // ==========================================
+    stage = this.#stage.asReadonly();
+    activePage = this.#activePage.asReadonly();
+    zoom = this.#zoom.asReadonly();
+    zoomMode = this.#zoomMode.asReadonly();
+    rotation = this.#rotation.asReadonly();
+    sidebarMode = this.#sidebarModeInternal.asReadonly();
+    scrollModeCurrent = this.#scrollModeInternal.asReadonly();
+    isFullscreen = this.#isFullscreen.asReadonly();
+    meta = this.#meta.asReadonly();
+    filename = this.#filename.asReadonly();
+    fileSize = this.#fileSize.asReadonly();
+    loadError$ = this.#loadError.asReadonly();
+    thumbCache = this.#thumbCache.asReadonly();
+    numPages = computed(() => this.#meta()?.numPages ?? 0);
+    canPrev = computed(() => this.#activePage() > 1);
+    canNext = computed(() => {
+        const n = this.numPages();
+        return n > 0 && this.#activePage() < n;
+    });
+    zoomPercent = computed(() => Math.round(this.#zoom() * 100));
+    loadPercent = computed(() => {
+        const p = this.#loadProgress();
+        if (p.total <= 0)
+            return 0;
+        return Math.min(100, Math.round((p.loaded / p.total) * 100));
+    });
+    isSidebarOpen = computed(() => this.#sidebarOpenInternal() && this.#sidebarModeInternal() !== 'none');
+    pageList = computed(() => {
+        const n = this.numPages();
+        return n > 0 ? Array.from({ length: n }, (_, i) => i + 1) : [];
+    });
+    // Alias used by the template's thumbnail @for — keeps the JSX-y `pageNumbers`
+    // name from the design handoff while reusing the same computed.
+    pageNumbers = this.pageList;
+    // Search readonly accessors for the template + tests. Read-only by design;
+    // mutations go through `search()` / `searchNext()` etc.
+    searchBarOpen = this.#searchBarOpen.asReadonly();
+    searchTerm = this.#searchTerm.asReadonly();
+    searchResults = this.#searchResults.asReadonly();
+    searchActiveIndex = this.#searchActiveIndex.asReadonly();
+    searchCaseSensitive = this.#searchCaseSensitive.asReadonly();
+    searchWholeWord = this.#searchWholeWord.asReadonly();
+    searchTotal = computed(() => this.#searchResults().length);
+    // 1-based "X of N" indicator for the search bar counter. Reads 0 when
+    // there are no results so the template can hide / dim the counter.
+    searchCurrent = computed(() => {
+        const idx = this.#searchActiveIndex();
+        return idx < 0 ? 0 : idx + 1;
+    });
+    // Currently-active hit (or null when nothing is focused) — drives the
+    // in-page `<mark class="--active">` highlight + auto-scroll effect below.
+    searchActiveResult = computed(() => {
+        const idx = this.#searchActiveIndex();
+        const results = this.#searchResults();
+        return idx >= 0 && idx < results.length ? results[idx] : null;
+    });
+    // Snapshot of the full search state — handed to consumer via
+    // `getSearchState()` for parity with `searchChange` event shape.
+    searchState = computed(() => ({
+        term: this.#searchTerm(),
+        caseSensitive: this.#searchCaseSensitive(),
+        wholeWord: this.#searchWholeWord(),
+        results: this.#searchResults(),
+        activeIndex: this.#searchActiveIndex(),
+    }));
+    // ==========================================
+    // CONSTRUCTOR — declarative wiring
+    // ==========================================
+    constructor() {
+        // Initialize internal mirrors from inputs once. WHY mirrors: user actions
+        // (toggleSidebar / setSidebarMode / setZoom) must modify state that the
+        // template reads; signal inputs are read-only.
+        effect(() => {
+            this.#sidebarOpenInternal.set(this.sidebarOpen());
+        });
+        effect(() => {
+            const m = this.sidebar();
+            // 'outline' + 'search' are deferred — selecting them through the input
+            // is allowed (we still toggle the tab UI) but the body shows the deferred
+            // placeholder. Don't force-fallback to 'thumbnails' so the input value
+            // is honored visibly.
+            this.#sidebarModeInternal.set(m);
+        });
+        effect(() => {
+            const m = this.scrollMode();
+            // Continuous scroll is deferred — warn once if requested but keep the
+            // input value so consumer code is forward-compatible.
+            if (m === 'continuous') {
+                console.warn(
+                // eslint-disable-next-line max-len
+                '[sd-preview-pdf] scrollMode="continuous" is deferred; falling back to single-page rendering.');
+            }
+            this.#scrollModeInternal.set(m);
+        });
+        effect(() => {
+            // Reset zoom mode when initialZoom input changes — only fires when the
+            // input itself updates (not when user clicks zoom +/-).
+            this.#zoomMode.set(this.initialZoom());
+        });
+        // Sync fullscreen state from the browser (works with Esc, F11, programmatic exit).
+        const onFullscreenChange = () => {
+            this.#isFullscreen.set(document.fullscreenElement === this.#hostEl.nativeElement);
+        };
+        document.addEventListener('fullscreenchange', onFullscreenChange);
+        this.#destroyRef.onDestroy(() => {
+            document.removeEventListener('fullscreenchange', onFullscreenChange);
+        });
+        // React to source changes — destroy previous doc, load new one.
+        // WHY untracked-via-queueMicrotask: `effect()` tracks every signal READ
+        // sync-ly inside the callback. `#loadDocument` reads internal signals
+        // (#pdfDoc via #destroyDoc, plus #zoom on the cleanup path). Letting the
+        // effect track those would re-fire whenever we updated them inside the
+        // load flow → infinite loop. Reading only `source()` here and deferring
+        // the actual load to a microtask scopes the tracking to ONLY `source()`.
+        effect(() => {
+            const src = this.source();
+            queueMicrotask(() => this.#loadDocument(src));
+        });
+        // Auto-focus host after first render so keyboard works immediately.
+        afterNextRender(() => {
+            try {
+                this.#hostEl.nativeElement.focus({ preventScroll: true });
+            }
+            catch {
+                // ignore — focus() can throw on detached elements.
+            }
+        });
+        // Drive lazy thumbnail rendering — every time the list of thumbnail
+        // <canvas> refs changes (sidebar opens, mode flips, doc reloads) we
+        // disconnect any prior observer and start watching the new set.
+        // WHY effect (not afterNextRender): viewChildren() emits a signal that
+        // updates whenever the template's @for collection mutates.
+        effect(() => {
+            const refs = this.thumbCanvases();
+            this.#syncThumbObserver(refs.map(r => r.nativeElement));
+        });
+        // Re-apply highlights when the rendered page changes OR when the search
+        // term / active hit changes. WHY a separate effect: text-layer overlay
+        // doesn't exist in this commit, so we hook the page canvas wrapper and
+        // sprinkle `<mark>` siblings via DOM. Effect re-runs are cheap; the
+        // helper is a no-op when there's nothing to highlight.
+        effect(() => {
+            // Track these signals so the effect re-fires:
+            this.#searchTerm();
+            this.#searchActiveIndex();
+            this.activePage();
+            // Defer to a microtask so the canvas render finished writing — keeps
+            // us out of the page render's await chain.
+            queueMicrotask(() => this.#applyHighlightsForActivePage());
+        });
+        // Cleanup on destroy.
+        this.#destroyRef.onDestroy(() => {
+            this.#cancelRender();
+            this.#destroyDoc();
+            this.#revokeAllBlobs();
+            this.#thumbObserver?.disconnect();
+            this.#thumbObserver = null;
+            this.#thumbsRendering.clear();
+            this.#pageTextCache.clear();
+            if (document.fullscreenElement === this.#hostEl.nativeElement) {
+                document.exitFullscreen?.().catch(() => undefined);
+            }
+        });
+    }
+    ngOnDestroy() {
+        // Cleanup logic dời vào DestroyRef.onDestroy ở constructor — giữ hook để
+        // tương thích với `implements OnDestroy` (giúp test code `spyOn(comp, 'ngOnDestroy')`).
+    }
+    // ==========================================
+    // PUBLIC API
+    // ==========================================
+    goToPage(page) {
+        const n = this.numPages();
+        if (n <= 0)
+            return;
+        const target = Math.max(1, Math.min(page, n));
+        if (target === this.#activePage())
+            return;
+        this.#activePage.set(target);
+        this.pageChange.emit(target);
+        this.#renderActivePage();
+    }
+    nextPage() { this.goToPage(this.#activePage() + 1); }
+    prevPage() { this.goToPage(this.#activePage() - 1); }
+    firstPage() { this.goToPage(1); }
+    lastPage() { this.goToPage(this.numPages()); }
+    zoomIn() {
+        this.#zoomMode.set(this.#zoom() + _a.ZOOM_STEP);
+        this.#setZoom(this.#zoom() + _a.ZOOM_STEP);
+    }
+    zoomOut() {
+        this.#zoomMode.set(this.#zoom() - _a.ZOOM_STEP);
+        this.#setZoom(this.#zoom() - _a.ZOOM_STEP);
+    }
+    setZoom(mode) {
+        this.#zoomMode.set(mode);
+        if (typeof mode === 'number') {
+            this.#setZoom(mode);
+        }
+        else {
+            // Fit modes recompute against stage size + page natural size — done in
+            // #renderActivePage which reads zoomMode().
+            this.#renderActivePage();
+        }
+    }
+    rotate(direction) {
+        const delta = direction === 'right' ? 90 : -90;
+        this.#rotation.update(r => ((r + delta) % 360 + 360) % 360);
+        this.#renderActivePage();
+    }
+    toggleSidebar() {
+        this.#sidebarOpenInternal.update(v => !v);
+    }
+    setSidebarMode(mode) {
+        this.#sidebarModeInternal.set(mode);
+        if (mode !== 'none' && !this.#sidebarOpenInternal()) {
+            this.#sidebarOpenInternal.set(true);
+        }
+        // Selecting the 'search' tab implicitly opens the search bar so the user
+        // can start typing right away — matches Acrobat's flyout behaviour.
+        if (mode === 'search') {
+            this.openSearch();
+        }
+    }
+    // TODO(preview-pdf): setScrollMode is signature-only; continuous + horizontal
+    // layout deferred. Currently this just updates internal state + emits a
+    // warning when consumer asks for the deferred 'continuous' mode.
+    setScrollMode(mode) {
+        if (mode === 'continuous') {
+            console.warn(
+            // eslint-disable-next-line max-len
+            '[sd-preview-pdf] setScrollMode("continuous") is deferred; staying in single-page mode.');
+        }
+        this.#scrollModeInternal.set(mode);
+    }
+    downloadFile() {
+        if (!this.downloadable())
+            return;
+        const src = this.source();
+        const filename = this.#filename();
+        // Strategy: if caller passed a URL, anchor download honors server's
+        // Content-Disposition; for File/Blob/buffer sources we re-emit the blob.
+        let href = null;
+        if (typeof src === 'string') {
+            href = src;
+        }
+        else if (src instanceof File || src instanceof Blob) {
+            href = URL.createObjectURL(src);
+            this.#ownedBlobUrls.add(href);
+        }
+        else if (this.#lastBlobUrl) {
+            href = this.#lastBlobUrl;
+        }
+        else if (src && typeof src === 'object' && 'url' in src && typeof src.url === 'string') {
+            href = src.url;
+        }
+        else if (src instanceof ArrayBuffer || src instanceof Uint8Array) {
+            const blob = new Blob([src], { type: 'application/pdf' });
+            href = URL.createObjectURL(blob);
+            this.#ownedBlobUrls.add(href);
+        }
+        if (!href)
+            return;
+        const a = document.createElement('a');
+        a.href = href;
+        a.download = filename;
+        document.body.appendChild(a);
+        a.click();
+        a.remove();
+        this.download.emit({ filename });
+    }
+    toggleFullscreen() {
+        if (!document.fullscreenElement) {
+            this.#hostEl.nativeElement.requestFullscreen?.().catch(() => undefined);
+        }
+        else {
+            document.exitFullscreen?.().catch(() => undefined);
+        }
+    }
+    /** Programmatic equivalent of clicking the X — emits the close output. */
+    requestClose() {
+        this.close.emit();
+    }
+    /** Retry the active load attempt (called from the error state retry button). */
+    retryLoad() {
+        this.#loadDocument(this.source());
+    }
+    // TODO(preview-pdf): printFile + scroll-mode continuous remain deferred.
+    // Search is now implemented below.
+    printFile() {
+        console.warn('[sd-preview-pdf] printFile() is deferred to a follow-up commit.');
+    }
+    /**
+     * Run a full-document search for `term`. Returns the result count.
+     *
+     * Options:
+     * - `caseSensitive`: default off; matches independent of capitalisation.
+     * - `wholeWord`: default off; requires Unicode word-boundary on both sides
+     *   so `cat` does NOT match `category` (uses `/\b...\b/u` so Vietnamese
+     *   diacritic-bearing letters still participate as word characters).
+     *
+     * Implementation: iterate every page once (cached), build a flat plain-text
+     * string per page (joining textItem.str), and slice ~30 chars of context
+     * around each match. We deliberately use plain JS regex rather than
+     * pdf.js's `pdfFindController` — it's <40 lines, fully testable, and
+     * sidesteps the find-controller's dependency on a real text layer (which
+     * we don't render).
+     */
+    async search(term, options) {
+        const token = ++this.#searchToken;
+        const cleanTerm = (term ?? '').trim();
+        if (options?.caseSensitive !== undefined) {
+            this.#searchCaseSensitive.set(options.caseSensitive);
+        }
+        if (options?.wholeWord !== undefined) {
+            this.#searchWholeWord.set(options.wholeWord);
+        }
+        this.#searchTerm.set(cleanTerm);
+        if (!cleanTerm) {
+            this.#searchResults.set([]);
+            this.#searchActiveIndex.set(-1);
+            this.#emitSearchChange();
+            return 0;
+        }
+        const doc = this.#pdfDoc();
+        if (!doc) {
+            this.#searchResults.set([]);
+            this.#searchActiveIndex.set(-1);
+            this.#emitSearchChange();
+            return 0;
+        }
+        const re = this.#buildSearchRegex(cleanTerm, this.#searchCaseSensitive(), this.#searchWholeWord());
+        if (!re) {
+            this.#searchResults.set([]);
+            this.#searchActiveIndex.set(-1);
+            this.#emitSearchChange();
+            return 0;
+        }
+        const results = [];
+        for (let p = 1; p <= doc.numPages; p++) {
+            if (token !== this.#searchToken)
+                return 0; // newer search superseded us
+            const text = await this.#getPageText(doc, p);
+            if (token !== this.#searchToken)
+                return 0;
+            // re is /g — must be re-created or `lastIndex` reset between pages.
+            re.lastIndex = 0;
+            let m;
+            while ((m = re.exec(text)) !== null) {
+                const start = m.index;
+                const matched = m[0];
+                const end = start + matched.length;
+                const before = text.slice(Math.max(0, start - 30), start);
+                const after = text.slice(end, end + 30);
+                results.push({ page: p, before, term: matched, after });
+                // Defensive: zero-length match would loop forever.
+                if (matched.length === 0)
+                    re.lastIndex++;
+            }
+        }
+        if (token !== this.#searchToken)
+            return 0;
+        this.#searchResults.set(results);
+        // Activate the first result so the user sees something immediately;
+        // tests can assert this via `searchActiveIndex()`. Skip when empty.
+        this.#searchActiveIndex.set(results.length > 0 ? 0 : -1);
+        if (results.length > 0) {
+            // Auto-jump to the first hit's page.
+            this.goToPage(results[0].page);
+        }
+        this.#emitSearchChange();
+        return results.length;
+    }
+    searchNext() {
+        const results = this.#searchResults();
+        if (results.length === 0)
+            return;
+        const next = (this.#searchActiveIndex() + 1) % results.length;
+        this.#searchActiveIndex.set(next);
+        this.goToPage(results[next].page);
+        this.#emitSearchChange();
+    }
+    searchPrev() {
+        const results = this.#searchResults();
+        if (results.length === 0)
+            return;
+        const cur = this.#searchActiveIndex();
+        const prev = cur <= 0 ? results.length - 1 : cur - 1;
+        this.#searchActiveIndex.set(prev);
+        this.goToPage(results[prev].page);
+        this.#emitSearchChange();
+    }
+    clearSearch() {
+        this.#searchToken++;
+        this.#searchTerm.set('');
+        this.#searchResults.set([]);
+        this.#searchActiveIndex.set(-1);
+        this.#emitSearchChange();
+    }
+    /** Open the search bar and focus its input. Idempotent. */
+    openSearch() {
+        this.#searchBarOpen.set(true);
+        // Defer focus a tick so the *ngIf-rendered input exists in the DOM.
+        queueMicrotask(() => {
+            this.searchInputRef()?.nativeElement?.focus();
+            this.searchInputRef()?.nativeElement?.select();
+        });
+    }
+    /** Close the search bar AND clear results (mirrors Acrobat behaviour). */
+    closeSearch() {
+        this.#searchBarOpen.set(false);
+        this.clearSearch();
+    }
+    toggleSearchCaseSensitive() {
+        this.#searchCaseSensitive.update(v => !v);
+        // Re-run with the persisted term so the result set reflects the new flag.
+        if (this.#searchTerm()) {
+            void this.search(this.#searchTerm());
+        }
+    }
+    toggleSearchWholeWord() {
+        this.#searchWholeWord.update(v => !v);
+        if (this.#searchTerm()) {
+            void this.search(this.#searchTerm());
+        }
+    }
+    /** Live binding from the search bar's `(input)` event. */
+    onSearchInput(value) {
+        void this.search(value);
+    }
+    // ==========================================
+    // KEYBOARD — bound to HOST (not document)
+    // ==========================================
+    onKeyDown(event) {
+        const target = event.target;
+        const isSearchInput = !!target && target === this.searchInputRef()?.nativeElement;
+        const isOtherEditable = !!target &&
+            !isSearchInput &&
+            (target.tagName === 'INPUT' ||
+                target.tagName === 'TEXTAREA' ||
+                target.isContentEditable);
+        // Ctrl/Cmd+F: open the search bar from anywhere (even when input has
+        // focus, e.g. re-focus the search bar from the page input). Handled
+        // before the input-target guard so it always works.
+        if ((event.ctrlKey || event.metaKey) && (event.key === 'f' || event.key === 'F')) {
+            event.preventDefault();
+            this.openSearch();
+            return;
+        }
+        // Keys while the search input is focused: Enter / Shift+Enter, F3 / Shift+F3
+        // cycle results; Esc closes the bar. Everything else (typing) passes through.
+        if (isSearchInput) {
+            if (event.key === 'Escape') {
+                event.preventDefault();
+                this.closeSearch();
+                // Re-focus the host so subsequent shortcuts work without a click.
+                this.#hostEl.nativeElement.focus();
+                return;
+            }
+            if (event.key === 'Enter') {
+                event.preventDefault();
+                if (event.shiftKey) {
+                    this.searchPrev();
+                }
+                else {
+                    this.searchNext();
+                }
+                return;
+            }
+            if (event.key === 'F3') {
+                event.preventDefault();
+                if (event.shiftKey) {
+                    this.searchPrev();
+                }
+                else {
+                    this.searchNext();
+                }
+                return;
+            }
+            return; // typing → let it pass through
+        }
+        // Other editable targets (page-number input etc.) shouldn't trigger
+        // viewer shortcuts — but Esc should still close an open search bar.
+        if (isOtherEditable) {
+            if (event.key === 'Escape' && this.#searchBarOpen()) {
+                event.preventDefault();
+                this.closeSearch();
+            }
+            return;
+        }
+        // F3 outside the search input still cycles results (matches browser
+        // Find-in-page convention). Only meaningful when the bar is open OR
+        // there are stale results — we keep it ungated for parity.
+        if (event.key === 'F3') {
+            event.preventDefault();
+            if (event.shiftKey) {
+                this.searchPrev();
+            }
+            else {
+                this.searchNext();
+            }
+            return;
+        }
+        switch (event.key) {
+            case 'ArrowLeft':
+            case 'PageUp':
+                event.preventDefault();
+                this.prevPage();
+                break;
+            case 'ArrowRight':
+            case 'PageDown':
+                event.preventDefault();
+                this.nextPage();
+                break;
+            case 'Home':
+                event.preventDefault();
+                this.firstPage();
+                break;
+            case 'End':
+                event.preventDefault();
+                this.lastPage();
+                break;
+            case '+':
+            case '=':
+                event.preventDefault();
+                this.zoomIn();
+                break;
+            case '-':
+                event.preventDefault();
+                this.zoomOut();
+                break;
+            case '0':
+                event.preventDefault();
+                this.setZoom('page-fit');
+                break;
+            case 'r':
+                event.preventDefault();
+                this.rotate('right');
+                break;
+            case 'R':
+                event.preventDefault();
+                this.rotate('left');
+                break;
+            case 'f':
+                event.preventDefault();
+                this.toggleFullscreen();
+                break;
+            case 'Escape':
+                // Esc closes the search bar (when open). NEVER emits `close` on the
+                // component — that remains the consumer's responsibility per the
+                // standalone-embed pattern.
+                if (this.#searchBarOpen()) {
+                    event.preventDefault();
+                    this.closeSearch();
+                }
+                break;
+            default:
+                break;
+        }
+    }
+    // ==========================================
+    // TEMPLATE HANDLERS
+    // ==========================================
+    onPageInputEnter(event) {
+        const input = event.target;
+        const value = Number(input.value);
+        if (Number.isFinite(value)) {
+            this.goToPage(value);
+        }
+        // Snap input back to the actual current page after clamping.
+        input.value = String(this.#activePage());
+    }
+    onPageInputBlur(event) {
+        const input = event.target;
+        input.value = String(this.#activePage());
+    }
+    onWheel(event) {
+        // Ctrl/Cmd + wheel = zoom (mirrors PDF readers + most image viewers).
+        // Plain wheel = let browser scroll the stage (especially when zoomed in).
+        if (event.ctrlKey || event.metaKey) {
+            event.preventDefault();
+            const factor = event.deltaY < 0 ? 1 + _a.ZOOM_STEP : 1 - _a.ZOOM_STEP;
+            this.#zoomMode.set(this.#zoom() * factor);
+            this.#setZoom(this.#zoom() * factor);
+        }
+    }
+    trackByPage(_i, page) {
+        return page;
+    }
+    // ==========================================
+    // INTERNALS
+    // ==========================================
+    async #loadDocument(src) {
+        const token = ++this.#loadToken;
+        this.#cancelRender();
+        await this.#destroyDoc();
+        this.#revokeAllBlobs();
+        this.#thumbCache.set({});
+        this.#pageTextCache.clear();
+        this.#thumbsRendering.clear();
+        // Reset search state — results are per-document, but keep the term so a
+        // newly-loaded source with the same term gets re-indexed automatically
+        // on the next user keystroke. Active index resets unconditionally.
+        this.#searchResults.set([]);
+        this.#searchActiveIndex.set(-1);
+        this.#loadError.set(null);
+        this.#loadProgress.set({ loaded: 0, total: 0 });
+        if (!src) {
+            this.#stage.set('empty');
+            this.#pdfDoc.set(null);
+            this.#meta.set(null);
+            this.#activePage.set(1);
+            return;
+        }
+        this.#stage.set('loading');
+        let spec;
+        try {
+            spec = await this.#normalizeSource(src);
+        }
+        catch (err) {
+            if (token !== this.#loadToken)
+                return;
+            this.#emitError(this.#classifyError(err), this.#errorMessage(err));
+            return;
+        }
+        if (this.password()) {
+            spec['password'] = this.password();
+        }
+        let task;
+        try {
+            task = this.#pdfjs.getDocument(spec);
+            // pdfjs's loadingTask exposes onProgress as an assignable property.
+            task.onProgress = (p) => {
+                if (token !== this.#loadToken)
+                    return;
+                this.#loadProgress.set({ loaded: p.loaded ?? 0, total: p.total ?? 0 });
+            };
+        }
+        catch (err) {
+            this.#emitError(this.#classifyError(err), this.#errorMessage(err));
+            return;
+        }
+        let pdfDoc;
+        try {
+            pdfDoc = (await task.promise);
+        }
+        catch (err) {
+            if (token !== this.#loadToken)
+                return;
+            this.#emitError(this.#classifyError(err), this.#errorMessage(err));
+            return;
+        }
+        if (token !== this.#loadToken) {
+            // A newer source replaced us mid-load. Cleanup this stale doc.
+            try {
+                await pdfDoc.destroy();
+            }
+            catch { /* ignore */ }
+            return;
+        }
+        let meta;
+        try {
+            const m = await pdfDoc.getMetadata();
+            const info = m?.info ?? {};
+            meta = {
+                title: info.Title,
+                author: info.Author,
+                subject: info.Subject,
+                numPages: pdfDoc.numPages,
+            };
+        }
+        catch {
+            meta = { numPages: pdfDoc.numPages };
+        }
+        this.#pdfDoc.set(pdfDoc);
+        this.#meta.set(meta);
+        this.#activePage.set(Math.max(1, Math.min(this.startPage(), pdfDoc.numPages)));
+        this.#stage.set('ready');
+        this.#zoom.set(1);
+        this.#rotation.set(0);
+        this.#zoomMode.set(this.initialZoom());
+        this.loaded.emit({ totalPages: pdfDoc.numPages, meta });
+        this.pageChange.emit(this.#activePage());
+        await this.#renderActivePage();
+    }
+    async #renderActivePage() {
+        const pdfDoc = this.#pdfDoc();
+        if (!pdfDoc)
+            return;
+        const token = ++this.#renderToken;
+        const pageNum = this.#activePage();
+        let page;
+        try {
+            page = await pdfDoc.getPage(pageNum);
+        }
+        catch {
+            return;
+        }
+        if (token !== this.#renderToken)
+            return;
+        const canvas = this.pageCanvasRef()?.nativeElement;
+        if (!canvas)
+            return;
+        // Resolve scale from current zoom mode.
+        const rotation = this.#rotation();
+        const baseViewport = page.getViewport({ scale: 1, rotation });
+        const scale = this.#resolveScale(baseViewport);
+        this.#zoom.set(scale);
+        const viewport = page.getViewport({ scale, rotation });
+        const ctx = canvas.getContext('2d');
+        if (!ctx)
+            return;
+        canvas.width = Math.floor(viewport.width);
+        canvas.height = Math.floor(viewport.height);
+        canvas.style.width = `${viewport.width}px`;
+        canvas.style.height = `${viewport.height}px`;
+        this.#cancelRender();
+        const renderTask = page.render({ canvasContext: ctx, viewport });
+        this.#currentRenderTask = renderTask;
+        try {
+            await renderTask.promise;
+        }
+        catch {
+            // Cancelled mid-flight when user navigated to a new page — fine.
+            return;
+        }
+        finally {
+            if (this.#currentRenderTask === renderTask) {
+                this.#currentRenderTask = null;
+            }
+        }
+        page.cleanup();
+        this.zoomChange.emit(scale);
+    }
+    #resolveScale(baseViewport) {
+        const mode = this.#zoomMode();
+        if (typeof mode === 'number') {
+            return Math.min(_a.MAX_ZOOM, Math.max(_a.MIN_ZOOM, mode));
+        }
+        if (mode === 'page-actual')
+            return 1;
+        const stage = this.stageEl()?.nativeElement;
+        if (!stage)
+            return 1;
+        const stageRect = stage.getBoundingClientRect();
+        // 32px horizontal + 96px bottom padding lives in the SCSS — subtract it so
+        // the page fits without overlapping the floating toolbar.
+        const availW = Math.max(80, stageRect.width - 48);
+        const availH = Math.max(80, stageRect.height - 120);
+        if (mode === 'page-width') {
+            return availW / baseViewport.width;
+        }
+        // page-fit
+        return Math.min(availW / baseViewport.width, availH / baseViewport.height);
+    }
+    #cancelRender() {
+        if (this.#currentRenderTask) {
+            try {
+                this.#currentRenderTask.cancel();
+            }
+            catch { /* ignore */ }
+            this.#currentRenderTask = null;
+        }
+    }
+    async #destroyDoc() {
+        const doc = this.#pdfDoc();
+        if (!doc)
+            return;
+        this.#pdfDoc.set(null);
+        try {
+            await doc.destroy();
+        }
+        catch { /* ignore */ }
+    }
+    #setZoom(value) {
+        const clamped = Math.min(_a.MAX_ZOOM, Math.max(_a.MIN_ZOOM, value));
+        this.#zoom.set(clamped);
+        this.#renderActivePage();
+    }
+    async #normalizeSource(src) {
+        if (typeof src === 'string') {
+            this.#filename.set(this.#guessName(src));
+            const headers = this.httpHeaders();
+            const spec = { url: src };
+            if (headers)
+                spec['httpHeaders'] = headers;
+            return spec;
+        }
+        if (src instanceof File) {
+            this.#filename.set(src.name);
+            this.#fileSize.set(src.size);
+            const buf = await src.arrayBuffer();
+            return { data: new Uint8Array(buf) };
+        }
+        if (src instanceof Blob) {
+            this.#filename.set('document.pdf');
+            this.#fileSize.set(src.size);
+            const buf = await src.arrayBuffer();
+            return { data: new Uint8Array(buf) };
+        }
+        if (src instanceof ArrayBuffer) {
+            this.#filename.set('document.pdf');
+            this.#fileSize.set(src.byteLength);
+            return { data: new Uint8Array(src) };
+        }
+        if (src instanceof Uint8Array) {
+            this.#filename.set('document.pdf');
+            this.#fileSize.set(src.byteLength);
+            return { data: src };
+        }
+        if (src && typeof src === 'object') {
+            if ('url' in src && typeof src.url === 'string') {
+                this.#filename.set(this.#guessName(src.url));
+                const spec = { url: src.url };
+                // Caller-provided headers win over the [httpHeaders] input.
+                const headers = src.httpHeaders ?? this.httpHeaders();
+                if (headers)
+                    spec['httpHeaders'] = headers;
+                if (src.withCredentials)
+                    spec['withCredentials'] = true;
+                return spec;
+            }
+            if ('data' in src && (src.data instanceof ArrayBuffer || src.data instanceof Uint8Array)) {
+                this.#filename.set('document.pdf');
+                const data = src.data instanceof ArrayBuffer ? new Uint8Array(src.data) : src.data;
+                this.#fileSize.set(data.byteLength);
+                return { data };
+            }
+        }
+        throw new Error('Unsupported PDF source');
+    }
+    #guessName(url) {
+        const path = url.split('?')[0];
+        const last = path.substring(path.lastIndexOf('/') + 1);
+        return last || 'document.pdf';
+    }
+    /** Map any thrown value into a {reason} we can render. */
+    #classifyError(err) {
+        if (!err)
+            return 'unknown';
+        // pdfjs throws named exception classes — we sniff by name to avoid
+        // importing the constructors (keeps the bundle smaller).
+        const name = err.name;
+        if (name === 'PasswordException')
+            return 'password';
+        if (name === 'InvalidPDFException')
+            return 'invalid';
+        if (name === 'MissingPDFException' || name === 'UnexpectedResponseException') {
+            return 'network';
+        }
+        if (err instanceof Error && /network|fetch|cors/i.test(err.message)) {
+            return 'network';
+        }
+        return 'unknown';
+    }
+    #errorMessage(err) {
+        if (err instanceof Error)
+            return err.message;
+        return undefined;
+    }
+    #emitError(reason, message) {
+        const ev = { reason, message };
+        this.#loadError.set(ev);
+        this.#stage.set('error');
+        this.loadError.emit(ev);
+    }
+    #revokeAllBlobs() {
+        for (const url of this.#ownedBlobUrls) {
+            URL.revokeObjectURL(url);
+        }
+        this.#ownedBlobUrls.clear();
+        this.#lastBlobUrl = null;
+    }
+    // ==========================================
+    // SEARCH HELPERS
+    // ==========================================
+    /**
+     * Build the search regex. We escape every metachar so the term is matched
+     * literally (so `foo.bar` doesn't treat `.` as "any char"). Unicode flag
+     * `u` makes `\b` understand Vietnamese diacritic-bearing letters as word
+     * characters — without it `\b` would split `đ` at the d, breaking
+     * whole-word matches on Vietnamese terms.
+     */
+    #buildSearchRegex(term, caseSensitive, wholeWord) {
+        if (!term)
+            return null;
+        const escaped = term.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
+        const flags = (caseSensitive ? 'g' : 'gi') + 'u';
+        const pattern = wholeWord ? `\\b${escaped}\\b` : escaped;
+        try {
+            return new RegExp(pattern, flags);
+        }
+        catch {
+            return null;
+        }
+    }
+    /**
+     * Fetch (and cache) the plain text of a single page. We normalize to NFC
+     * so the same Vietnamese letter encoded as composed vs decomposed sequences
+     * (NFD) matches the same search term — pdfjs has been seen to return NFD
+     * in some PDFs.
+     */
+    async #getPageText(doc, pageNum) {
+        const cached = this.#pageTextCache.get(pageNum);
+        if (cached !== undefined)
+            return cached;
+        let page;
+        try {
+            page = await doc.getPage(pageNum);
+        }
+        catch {
+            return '';
+        }
+        let text = '';
+        try {
+            const tc = (await page.getTextContent());
+            const items = Array.isArray(tc?.items) ? tc.items : [];
+            const parts = [];
+            for (const it of items) {
+                const str = it?.str;
+                if (typeof str === 'string')
+                    parts.push(str);
+            }
+            // Space-join so multi-word matches across textItem boundaries work.
+            text = parts.join(' ').normalize('NFC');
+        }
+        catch {
+            text = '';
+        }
+        this.#pageTextCache.set(pageNum, text);
+        return text;
+    }
+    #emitSearchChange() {
+        this.searchChange.emit({
+            term: this.#searchTerm(),
+            total: this.#searchResults().length,
+            current: this.#searchActiveIndex() + 1, // 1-based; 0 when no active
+        });
+    }
+    /**
+     * Paint highlight marks over the current page's canvas wrapper. WHY DOM
+     * append (not text layer): rendering the proper pdf.js text layer is a
+     * larger change — out-of-scope here. Instead we drop floating `<mark>`
+     * pills near the top of the page; they're a visual cue that the page
+     * contains a hit + which one is active, even when we can't place them
+     * pixel-accurately. The result-list cards still drive precise navigation.
+     *
+     * Tradeoff documented in sd-preview.md.
+     */
+    #applyHighlightsForActivePage() {
+        const wrap = this.#hostEl.nativeElement.querySelector('.sd-preview-pdf-page-wrap');
+        if (!wrap)
+            return;
+        // Clear prior overlay.
+        const prior = wrap.querySelector('.sd-pdf-search-overlay');
+        if (prior)
+            prior.remove();
+        const term = this.#searchTerm();
+        const results = this.#searchResults();
+        const activeIdx = this.#searchActiveIndex();
+        const activePage = this.activePage();
+        if (!term || results.length === 0)
+            return;
+        const pageHits = results
+            .map((r, i) => ({ r, i }))
+            .filter(({ r }) => r.page === activePage);
+        if (pageHits.length === 0)
+            return;
+        const overlay = document.createElement('div');
+        overlay.className = 'sd-pdf-search-overlay';
+        for (const { r, i } of pageHits) {
+            const m = document.createElement('mark');
+            m.className =
+                i === activeIdx ? 'sd-pdf-search-hi sd-pdf-search-hi--active' : 'sd-pdf-search-hi';
+            m.textContent = r.term;
+            overlay.appendChild(m);
+        }
+        wrap.appendChild(overlay);
+        // Scroll the active mark into view if it lives on this page.
+        if (activeIdx >= 0 && results[activeIdx]?.page === activePage) {
+            const activeMark = overlay.querySelector('.sd-pdf-search-hi--active');
+            try {
+                activeMark?.scrollIntoView({ block: 'center', behavior: 'smooth' });
+            }
+            catch {
+                // older Safari throws on smooth — fall back silently
+            }
+        }
+    }
+    // ==========================================
+    // THUMBNAIL HELPERS
+    // ==========================================
+    /**
+     * Rebind the IntersectionObserver to whatever set of thumbnail canvases is
+     * currently mounted. Called from an effect that tracks `thumbCanvases()`.
+     */
+    #syncThumbObserver(canvases) {
+        // Disconnect prior observer — refs are stale once the @for re-renders.
+        this.#thumbObserver?.disconnect();
+        if (canvases.length === 0) {
+            this.#thumbObserver = null;
+            return;
+        }
+        // Lazily create an IntersectionObserver scoped to the sidebar scroll
+        // container so we only render thumbs the user can actually see. Falls
+        // back to "render everything" when IntersectionObserver isn't available
+        // (very old runtime / SSR shim).
+        if (typeof IntersectionObserver !== 'function') {
+            for (const c of canvases) {
+                const n = Number(c.getAttribute('data-page'));
+                if (Number.isFinite(n))
+                    void this.#renderThumbnail(n, c);
+            }
+            return;
+        }
+        this.#thumbObserver = new IntersectionObserver(entries => {
+            for (const entry of entries) {
+                if (!entry.isIntersecting)
+                    continue;
+                const c = entry.target;
+                const n = Number(c.getAttribute('data-page'));
+                if (!Number.isFinite(n))
+                    continue;
+                this.#thumbObserver?.unobserve(c); // one-shot — cached after first paint
+                void this.#renderThumbnail(n, c);
+            }
+        }, { rootMargin: '120px 0px 120px 0px', threshold: 0.01 });
+        for (const c of canvases)
+            this.#thumbObserver.observe(c);
+    }
+    /**
+     * Render a single page into a sidebar thumbnail canvas at ~140px width.
+     * Cached via `#thumbsRendering` so rapid scroll bounces don't double-render.
+     *
+     * Visible for testing — tests can stub `getPage()` on the fake doc to
+     * assert this method calls `render(...)` with the right page argument.
+     */
+    async renderThumbnailForPage(pageNum) {
+        const canvas = this.thumbCanvases()
+            .map(r => r.nativeElement)
+            .find(c => Number(c.getAttribute('data-page')) === pageNum);
+        if (!canvas)
+            return;
+        return this.#renderThumbnail(pageNum, canvas);
+    }
+    async #renderThumbnail(pageNum, canvas) {
+        const doc = this.#pdfDoc();
+        if (!doc)
+            return;
+        if (this.#thumbsRendering.has(pageNum))
+            return;
+        if (this.#thumbCache()[pageNum]) {
+            // Already cached → just blit the dataURL onto the canvas.
+            this.#paintCachedThumb(canvas, this.#thumbCache()[pageNum]);
+            return;
+        }
+        this.#thumbsRendering.add(pageNum);
+        try {
+            const page = await doc.getPage(pageNum);
+            // Target ~140px wide for sidebar thumbs (handoff says 152px, leave a
+            // small margin so the canvas itself can fit inside the page wrapper's
+            // outline). PDF page viewport at scale=1 ≈ 612 wide; pick scale so the
+            // result lands near 140px.
+            const baseViewport = page.getViewport({ scale: 1 });
+            const scale = 140 / Math.max(1, baseViewport.width);
+            const viewport = page.getViewport({ scale });
+            canvas.width = Math.floor(viewport.width);
+            canvas.height = Math.floor(viewport.height);
+            canvas.style.width = `${viewport.width}px`;
+            canvas.style.height = `${viewport.height}px`;
+            const ctx = canvas.getContext('2d');
+            if (!ctx)
+                return;
+            const renderTask = page.render({ canvasContext: ctx, viewport });
+            try {
+                await renderTask.promise;
+            }
+            catch {
+                return; // cancelled / failed silently — keep the blank thumb
+            }
+            try {
+                const dataUrl = canvas.toDataURL('image/png');
+                this.#thumbCache.update(prev => ({ ...prev, [pageNum]: dataUrl }));
+            }
+            catch {
+                // Tainted canvas (e.g. dev mock) — just skip caching, keep visual.
+            }
+            page.cleanup();
+        }
+        catch {
+            // Page load failed — leave the thumb blank rather than throwing.
+        }
+        finally {
+            this.#thumbsRendering.delete(pageNum);
+        }
+    }
+    /**
+     * Paint a previously-rendered dataURL onto a freshly-mounted canvas so the
+     * mini-page reappears without re-rasterizing.
+     */
+    #paintCachedThumb(canvas, dataUrl) {
+        const img = new Image();
+        img.onload = () => {
+            canvas.width = img.naturalWidth;
+            canvas.height = img.naturalHeight;
+            canvas.style.width = `${img.naturalWidth}px`;
+            canvas.style.height = `${img.naturalHeight}px`;
+            const ctx = canvas.getContext('2d');
+            ctx?.drawImage(img, 0, 0);
+        };
+        img.src = dataUrl;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: SdPreviewPdf, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.21", type: SdPreviewPdf, isStandalone: true, selector: "sd-preview-pdf", inputs: { autoIdInput: { classPropertyName: "autoIdInput", publicName: "autoId", isSignal: true, isRequired: false, transformFunction: null }, source: { classPropertyName: "source", publicName: "source", isSignal: true, isRequired: false, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, startPage: { classPropertyName: "startPage", publicName: "startPage", isSignal: true, isRequired: false, transformFunction: null }, initialZoom: { classPropertyName: "initialZoom", publicName: "initialZoom", isSignal: true, isRequired: false, transformFunction: null }, sidebar: { classPropertyName: "sidebar", publicName: "sidebar", isSignal: true, isRequired: false, transformFunction: null }, sidebarOpen: { classPropertyName: "sidebarOpen", publicName: "sidebarOpen", isSignal: true, isRequired: false, transformFunction: null }, scrollMode: { classPropertyName: "scrollMode", publicName: "scrollMode", isSignal: true, isRequired: false, transformFunction: null }, showToolbar: { classPropertyName: "showToolbar", publicName: "showToolbar", isSignal: true, isRequired: false, transformFunction: null }, downloadable: { classPropertyName: "downloadable", publicName: "downloadable", isSignal: true, isRequired: false, transformFunction: null }, password: { classPropertyName: "password", publicName: "password", isSignal: true, isRequired: false, transformFunction: null }, httpHeaders: { classPropertyName: "httpHeaders", publicName: "httpHeaders", isSignal: true, isRequired: false, transformFunction: null }, theme: { classPropertyName: "theme", publicName: "theme", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { close: "close", loaded: "loaded", pageChange: "pageChange", zoomChange: "zoomChange", download: "download", loadError: "loadError", searchChange: "searchChange" }, host: { attributes: { "tabindex": "0" }, listeners: { "keydown": "onKeyDown($event)" }, properties: { "attr.data-theme": "theme()", "class.sd-preview-pdf-host--fullscreen": "isFullscreen()" }, classAttribute: "sd-preview-pdf-host" }, viewQueries: [{ propertyName: "pageCanvasRef", first: true, predicate: ["pageCanvas"], descendants: true, isSignal: true }, { propertyName: "stageEl", first: true, predicate: ["stageRef"], descendants: true, isSignal: true }, { propertyName: "pageInputRef", first: true, predicate: ["pageInput"], descendants: true, isSignal: true }, { propertyName: "searchInputRef", first: true, predicate: ["searchInput"], descendants: true, isSignal: true }, { propertyName: "thumbCanvases", predicate: ["thumbCanvas"], descendants: true, isSignal: true }], ngImport: i0, template: "<!--\n  sd-preview-pdf shell. Self-contained \u2014 sizes to its parent. Consumer wraps\n  in <sd-modal>/<sd-side-drawer>/page section. Header + sidebar + stage +\n  floating toolbar mirror Artboards A / C / E from the design handoff.\n-->\n<div class=\"sd-preview-pdf-shell\" role=\"region\">\n\n  <!-- ============================================\n       HEADER BAR \u2014 hidden in empty + loading per design\n       ============================================ -->\n  @if (stage() === 'ready') {\n    <div class=\"sd-preview-pdf-header\">\n      <div class=\"sd-preview-pdf-header__left\">\n        <button\n          type=\"button\"\n          class=\"sd-preview-pdf-iconbtn\"\n          [class.sd-preview-pdf-iconbtn--active]=\"isSidebarOpen()\"\n          [attr.aria-label]=\"'core.component.preview-pdf.toggle-sidebar' | translate\"\n          [attr.title]=\"'core.component.preview-pdf.toggle-sidebar' | translate\"\n          [attr.data-autoId]=\"autoIdSidebarToggle()\"\n          (click)=\"toggleSidebar()\">\n          <mat-icon fontIcon=\"menu\"></mat-icon>\n        </button>\n        <span class=\"sd-preview-pdf-header__divider\"></span>\n        <div class=\"sd-preview-pdf-fileicon\" aria-hidden=\"true\">PDF</div>\n        <div class=\"sd-preview-pdf-header__meta\">\n          <div class=\"sd-preview-pdf-header__name\" [title]=\"title() || filename()\">\n            {{ title() || filename() }}\n          </div>\n          <div class=\"sd-preview-pdf-header__sub\">\n            {{ 'core.component.preview-pdf.pages-count' | translate: { count: numPages() } }}\n          </div>\n        </div>\n      </div>\n\n      <div class=\"sd-preview-pdf-header__right\">\n        <button\n          type=\"button\"\n          class=\"sd-preview-pdf-iconbtn\"\n          [class.sd-preview-pdf-iconbtn--active]=\"searchBarOpen()\"\n          [attr.aria-label]=\"'core.component.preview-pdf.search' | translate\"\n          [attr.title]=\"'core.component.preview-pdf.search' | translate\"\n          [attr.data-autoId]=\"autoIdSearchToggle()\"\n          (click)=\"searchBarOpen() ? closeSearch() : openSearch()\">\n          <mat-icon fontIcon=\"search\"></mat-icon>\n        </button>\n        @if (downloadable()) {\n          <button\n            type=\"button\"\n            class=\"sd-preview-pdf-iconbtn\"\n            [attr.aria-label]=\"'core.component.preview-pdf.download' | translate\"\n            [attr.title]=\"'core.component.preview-pdf.download' | translate\"\n            [attr.data-autoId]=\"autoIdDownload()\"\n            (click)=\"downloadFile()\">\n            <mat-icon fontIcon=\"download\"></mat-icon>\n          </button>\n        }\n        <button\n          type=\"button\"\n          class=\"sd-preview-pdf-iconbtn\"\n          [attr.aria-label]=\"'core.component.preview-pdf.fullscreen' | translate\"\n          [attr.title]=\"'core.component.preview-pdf.fullscreen' | translate\"\n          [attr.data-autoId]=\"autoIdFullscreen()\"\n          (click)=\"toggleFullscreen()\">\n          <mat-icon [fontIcon]=\"isFullscreen() ? 'fullscreen_exit' : 'fullscreen'\"></mat-icon>\n        </button>\n      </div>\n    </div>\n\n    <!-- ============================================\n         SEARCH BAR \u2014 between header + body, only when bar is open\n         ============================================ -->\n    @if (searchBarOpen()) {\n      <div class=\"sd-preview-pdf-searchbar\" role=\"search\">\n        <mat-icon class=\"sd-preview-pdf-searchbar__icon\" fontIcon=\"search\"></mat-icon>\n        <input\n          #searchInput\n          type=\"text\"\n          class=\"sd-preview-pdf-searchbar__input\"\n          [attr.placeholder]=\"'core.component.preview-pdf.search-placeholder' | translate\"\n          [value]=\"searchTerm()\"\n          [attr.data-autoId]=\"autoIdSearchInput()\"\n          (input)=\"onSearchInput($any($event.target).value)\" />\n        <span class=\"sd-preview-pdf-searchbar__counter\" aria-live=\"polite\">\n          {{ searchCurrent() }} / {{ searchTotal() }}\n        </span>\n        <button\n          type=\"button\"\n          class=\"sd-preview-pdf-iconbtn\"\n          [disabled]=\"searchTotal() === 0\"\n          [attr.aria-label]=\"'core.component.preview-pdf.search-prev' | translate\"\n          [attr.title]=\"'core.component.preview-pdf.search-prev' | translate\"\n          [attr.data-autoId]=\"autoIdSearchPrev()\"\n          (click)=\"searchPrev()\">\n          <mat-icon fontIcon=\"keyboard_arrow_up\"></mat-icon>\n        </button>\n        <button\n          type=\"button\"\n          class=\"sd-preview-pdf-iconbtn\"\n          [disabled]=\"searchTotal() === 0\"\n          [attr.aria-label]=\"'core.component.preview-pdf.search-next' | translate\"\n          [attr.title]=\"'core.component.preview-pdf.search-next' | translate\"\n          [attr.data-autoId]=\"autoIdSearchNext()\"\n          (click)=\"searchNext()\">\n          <mat-icon fontIcon=\"keyboard_arrow_down\"></mat-icon>\n        </button>\n        <span class=\"sd-preview-pdf-searchbar__divider\"></span>\n        <button\n          type=\"button\"\n          class=\"sd-preview-pdf-iconbtn\"\n          [class.sd-preview-pdf-iconbtn--active]=\"searchCaseSensitive()\"\n          [attr.aria-label]=\"'core.component.preview-pdf.search-case' | translate\"\n          [attr.title]=\"'core.component.preview-pdf.search-case' | translate\"\n          [attr.data-autoId]=\"autoIdSearchCase()\"\n          (click)=\"toggleSearchCaseSensitive()\">\n          <mat-icon fontIcon=\"match_case\"></mat-icon>\n        </button>\n        <button\n          type=\"button\"\n          class=\"sd-preview-pdf-iconbtn\"\n          [class.sd-preview-pdf-iconbtn--active]=\"searchWholeWord()\"\n          [attr.aria-label]=\"'core.component.preview-pdf.search-whole' | translate\"\n          [attr.title]=\"'core.component.preview-pdf.search-whole' | translate\"\n          [attr.data-autoId]=\"autoIdSearchWhole()\"\n          (click)=\"toggleSearchWholeWord()\">\n          <mat-icon fontIcon=\"text_fields\"></mat-icon>\n        </button>\n        <span class=\"sd-preview-pdf-searchbar__spacer\"></span>\n        <button\n          type=\"button\"\n          class=\"sd-preview-pdf-iconbtn\"\n          [attr.aria-label]=\"'core.component.preview-pdf.search-close' | translate\"\n          [attr.title]=\"'core.component.preview-pdf.search-close' | translate\"\n          [attr.data-autoId]=\"autoIdSearchClose()\"\n          (click)=\"closeSearch()\">\n          <mat-icon fontIcon=\"close\"></mat-icon>\n        </button>\n      </div>\n    }\n  }\n\n  <!-- ============================================\n       BODY \u2014 sidebar + stage\n       ============================================ -->\n  <div class=\"sd-preview-pdf-body\">\n\n    <!-- SIDEBAR ............................................................. -->\n    @if (stage() === 'ready' && isSidebarOpen()) {\n      <aside class=\"sd-preview-pdf-sidebar\" role=\"complementary\">\n        <div class=\"sd-preview-pdf-sidebar__tabs\" role=\"tablist\">\n          <button\n            type=\"button\"\n            class=\"sd-preview-pdf-sidebar__tab\"\n            role=\"tab\"\n            [class.sd-preview-pdf-sidebar__tab--active]=\"sidebarMode() === 'thumbnails'\"\n            [attr.data-autoId]=\"autoIdTabThumbnails()\"\n            (click)=\"setSidebarMode('thumbnails')\">\n            <mat-icon fontIcon=\"view_carousel\"></mat-icon>\n            <span>{{ 'core.component.preview-pdf.tab.thumbnails' | translate }}</span>\n          </button>\n          <button\n            type=\"button\"\n            class=\"sd-preview-pdf-sidebar__tab\"\n            role=\"tab\"\n            [class.sd-preview-pdf-sidebar__tab--active]=\"sidebarMode() === 'outline'\"\n            [attr.data-autoId]=\"autoIdTabOutline()\"\n            (click)=\"setSidebarMode('outline')\">\n            <mat-icon fontIcon=\"list\"></mat-icon>\n            <span>{{ 'core.component.preview-pdf.tab.outline' | translate }}</span>\n          </button>\n          <button\n            type=\"button\"\n            class=\"sd-preview-pdf-sidebar__tab\"\n            role=\"tab\"\n            [class.sd-preview-pdf-sidebar__tab--active]=\"sidebarMode() === 'search'\"\n            [attr.data-autoId]=\"autoIdTabSearch()\"\n            (click)=\"setSidebarMode('search')\">\n            <mat-icon fontIcon=\"search\"></mat-icon>\n            <span>{{ 'core.component.preview-pdf.tab.search' | translate }}</span>\n          </button>\n        </div>\n\n        <div class=\"sd-preview-pdf-sidebar__content\">\n          @switch (sidebarMode()) {\n            @case ('thumbnails') {\n              <ul class=\"sd-preview-pdf-thumb-list\">\n                @for (p of pageNumbers(); track trackByPage($index, p); let pi = $index) {\n                  <li>\n                    <button\n                      type=\"button\"\n                      class=\"sd-preview-pdf-thumb\"\n                      [class.sd-preview-pdf-thumb--active]=\"p === activePage()\"\n                      [attr.aria-current]=\"p === activePage() ? 'page' : null\"\n                      [attr.aria-label]=\"('core.component.preview-pdf.page-of' | translate: { current: p, total: numPages() })\"\n                      [attr.data-autoId]=\"autoIdThumb(pi)\"\n                      (click)=\"goToPage(p)\">\n                      <div class=\"sd-preview-pdf-thumb__page\">\n                        <canvas\n                          #thumbCanvas\n                          class=\"sd-preview-pdf-thumb__canvas\"\n                          [attr.data-page]=\"p\"\n                          aria-hidden=\"true\"></canvas>\n                      </div>\n                      <span class=\"sd-preview-pdf-thumb__label\">{{ p }}</span>\n                    </button>\n                  </li>\n                }\n              </ul>\n            }\n            @case ('outline') {\n              <!-- TODO(preview-pdf): outline tree (pdfDoc.getOutline()) deferred to follow-up commit. -->\n              <div class=\"sd-preview-pdf-sidebar__deferred\">\n                <mat-icon fontIcon=\"list\"></mat-icon>\n                <p>{{ 'core.component.preview-pdf.deferred.outline' | translate }}</p>\n              </div>\n            }\n            @case ('search') {\n              @if (!searchTerm()) {\n                <div class=\"sd-preview-pdf-sidebar__deferred\">\n                  <mat-icon fontIcon=\"search\"></mat-icon>\n                  <p>{{ 'core.component.preview-pdf.search-placeholder' | translate }}</p>\n                </div>\n              } @else if (searchTotal() === 0) {\n                <div class=\"sd-preview-pdf-sidebar__deferred\">\n                  <mat-icon fontIcon=\"search_off\"></mat-icon>\n                  <p>{{ 'core.component.preview-pdf.search-no-results' | translate }}</p>\n                </div>\n              } @else {\n                <ul class=\"sd-preview-pdf-search-list\">\n                  @for (r of searchResults(); track $index; let i = $index) {\n                    <li>\n                      <button\n                        type=\"button\"\n                        class=\"sd-preview-pdf-search-result\"\n                        [class.sd-preview-pdf-search-result--active]=\"i === searchActiveIndex()\"\n                        [attr.data-autoId]=\"autoIdResult(i)\"\n                        (click)=\"goToPage(r.page)\">\n                        <span class=\"sd-preview-pdf-search-result__snippet\">\n                          {{ r.before }}<mark>{{ r.term }}</mark>{{ r.after }}\n                        </span>\n                        <span class=\"sd-preview-pdf-search-result__page\">{{ r.page }}</span>\n                      </button>\n                    </li>\n                  }\n                </ul>\n              }\n            }\n            @default {\n              <div class=\"sd-preview-pdf-sidebar__deferred\"></div>\n            }\n          }\n        </div>\n      </aside>\n    }\n\n    <!-- STAGE ............................................................... -->\n    <div class=\"sd-preview-pdf-stage\" #stageRef (wheel)=\"onWheel($event)\">\n      @switch (stage()) {\n        @case ('empty') {\n          <div class=\"sd-preview-pdf-status\">\n            <div class=\"sd-preview-pdf-status__tile sd-preview-pdf-status__tile--muted\">\n              <mat-icon fontIcon=\"picture_as_pdf\"></mat-icon>\n            </div>\n            <div class=\"sd-preview-pdf-status__title\">\n              {{ 'core.component.preview-pdf.empty.title' | translate }}\n            </div>\n            <div class=\"sd-preview-pdf-status__hint\">\n              {{ 'core.component.preview-pdf.empty.subtitle' | translate }}\n            </div>\n          </div>\n        }\n        @case ('loading') {\n          <div class=\"sd-preview-pdf-status\">\n            <div class=\"sd-preview-pdf-spinner\" role=\"progressbar\"></div>\n            <div class=\"sd-preview-pdf-status__title\">\n              {{ 'core.component.preview-pdf.loading' | translate }}\n              @if (loadPercent() > 0) {\n                <span class=\"sd-preview-pdf-progress-pct\">&nbsp;{{ loadPercent() }}%</span>\n              }\n            </div>\n            <div class=\"sd-preview-pdf-progress\">\n              <div class=\"sd-preview-pdf-progress__fill\" [style.width.%]=\"loadPercent()\"></div>\n            </div>\n          </div>\n        }\n        @case ('error') {\n          @if (loadError$(); as err) {\n            <div class=\"sd-preview-pdf-status\">\n              <div class=\"sd-preview-pdf-status__tile sd-preview-pdf-status__tile--danger\">\n                <mat-icon fontIcon=\"error_outline\"></mat-icon>\n              </div>\n              <div class=\"sd-preview-pdf-status__title\">\n                {{ ('core.component.preview-pdf.error.' + err.reason + '.title') | translate }}\n              </div>\n              <div class=\"sd-preview-pdf-status__hint\">\n                {{ ('core.component.preview-pdf.error.' + err.reason + '.body') | translate }}\n              </div>\n              <div class=\"sd-preview-pdf-status__actions\">\n                <button type=\"button\" class=\"sd-preview-pdf-btn-primary\" (click)=\"retryLoad()\" [attr.data-autoId]=\"autoIdRetry()\">\n                  <mat-icon fontIcon=\"refresh\"></mat-icon>\n                  <span>{{ 'core.component.preview-pdf.error.retry' | translate }}</span>\n                </button>\n                @if (downloadable()) {\n                  <button type=\"button\" class=\"sd-preview-pdf-btn-secondary\" (click)=\"downloadFile()\">\n                    <mat-icon fontIcon=\"download\"></mat-icon>\n                    <span>{{ 'core.component.preview-pdf.error.download-raw' | translate }}</span>\n                  </button>\n                }\n              </div>\n            </div>\n          }\n        }\n        @default {\n          <div class=\"sd-preview-pdf-page-wrap\">\n            <canvas\n              #pageCanvas\n              class=\"sd-preview-pdf-page\"\n              role=\"img\"\n              [attr.aria-label]=\"('core.component.preview-pdf.page-of' | translate: { current: activePage(), total: numPages() })\">\n            </canvas>\n          </div>\n        }\n      }\n\n      <!-- FLOATING TOOLBAR ........................................ -->\n      @if (showToolbar() && stage() === 'ready') {\n        <div class=\"sd-preview-pdf-toolbar\" role=\"toolbar\">\n          <button\n            type=\"button\"\n            class=\"sd-preview-pdf-toolbar__btn\"\n            [disabled]=\"!canPrev()\"\n            [attr.aria-label]=\"'core.component.preview-pdf.first-page' | translate\"\n            [attr.title]=\"'core.component.preview-pdf.first-page' | translate\"\n            [attr.data-autoId]=\"autoIdFirst()\"\n            (click)=\"firstPage()\">\n            <mat-icon fontIcon=\"first_page\"></mat-icon>\n          </button>\n          <button\n            type=\"button\"\n            class=\"sd-preview-pdf-toolbar__btn\"\n            [disabled]=\"!canPrev()\"\n            [attr.aria-label]=\"'core.component.preview-pdf.prev-page' | translate\"\n            [attr.title]=\"'core.component.preview-pdf.prev-page' | translate\"\n            [attr.data-autoId]=\"autoIdPrev()\"\n            (click)=\"prevPage()\">\n            <mat-icon fontIcon=\"chevron_left\"></mat-icon>\n          </button>\n          <span class=\"sd-preview-pdf-toolbar__page\">\n            <input\n              type=\"text\"\n              inputmode=\"numeric\"\n              class=\"sd-preview-pdf-toolbar__page-input\"\n              [value]=\"activePage()\"\n              #pageInput\n              (keydown.enter)=\"onPageInputEnter($event)\"\n              (blur)=\"onPageInputBlur($event)\"\n              [attr.aria-label]=\"'core.component.preview-pdf.page-of' | translate: { current: activePage(), total: numPages() }\"\n              [attr.data-autoId]=\"autoIdPageInput()\" />\n            <span class=\"sd-preview-pdf-toolbar__page-total\">/ {{ numPages() }}</span>\n          </span>\n          <button\n            type=\"button\"\n            class=\"sd-preview-pdf-toolbar__btn\"\n            [disabled]=\"!canNext()\"\n            [attr.aria-label]=\"'core.component.preview-pdf.next-page' | translate\"\n            [attr.title]=\"'core.component.preview-pdf.next-page' | translate\"\n            [attr.data-autoId]=\"autoIdNext()\"\n            (click)=\"nextPage()\">\n            <mat-icon fontIcon=\"chevron_right\"></mat-icon>\n          </button>\n          <button\n            type=\"button\"\n            class=\"sd-preview-pdf-toolbar__btn\"\n            [disabled]=\"!canNext()\"\n            [attr.aria-label]=\"'core.component.preview-pdf.last-page' | translate\"\n            [attr.title]=\"'core.component.preview-pdf.last-page' | translate\"\n            [attr.data-autoId]=\"autoIdLast()\"\n            (click)=\"lastPage()\">\n            <mat-icon fontIcon=\"last_page\"></mat-icon>\n          </button>\n\n          <span class=\"sd-preview-pdf-toolbar__divider\"></span>\n\n          <button\n            type=\"button\"\n            class=\"sd-preview-pdf-toolbar__btn\"\n            [attr.aria-label]=\"'core.component.preview-pdf.zoom-out' | translate\"\n            [attr.title]=\"'core.component.preview-pdf.zoom-out' | translate\"\n            [attr.data-autoId]=\"autoIdZoomOut()\"\n            (click)=\"zoomOut()\">\n            <mat-icon fontIcon=\"remove\"></mat-icon>\n          </button>\n          <span class=\"sd-preview-pdf-toolbar__zoom\" aria-live=\"polite\" [attr.data-autoId]=\"autoIdZoomReadout()\">{{ zoomPercent() }}%</span>\n          <button\n            type=\"button\"\n            class=\"sd-preview-pdf-toolbar__btn\"\n            [attr.aria-label]=\"'core.component.preview-pdf.zoom-in' | translate\"\n            [attr.title]=\"'core.component.preview-pdf.zoom-in' | translate\"\n            [attr.data-autoId]=\"autoIdZoomIn()\"\n            (click)=\"zoomIn()\">\n            <mat-icon fontIcon=\"add\"></mat-icon>\n          </button>\n\n          <span class=\"sd-preview-pdf-toolbar__divider\"></span>\n\n          <button\n            type=\"button\"\n            class=\"sd-preview-pdf-toolbar__btn sd-preview-pdf-toolbar__btn--with-label\"\n            [class.sd-preview-pdf-toolbar__btn--active]=\"zoomMode() === 'page-fit'\"\n            [attr.data-autoId]=\"autoIdFitPage()\"\n            (click)=\"setZoom('page-fit')\">\n            <mat-icon fontIcon=\"fit_screen\"></mat-icon>\n            <span>{{ 'core.component.preview-pdf.fit-page' | translate }}</span>\n          </button>\n          <button\n            type=\"button\"\n            class=\"sd-preview-pdf-toolbar__btn sd-preview-pdf-toolbar__btn--with-label\"\n            [class.sd-preview-pdf-toolbar__btn--active]=\"zoomMode() === 'page-width'\"\n            [attr.data-autoId]=\"autoIdFitWidth()\"\n            (click)=\"setZoom('page-width')\">\n            <mat-icon fontIcon=\"swap_horiz\"></mat-icon>\n            <span>{{ 'core.component.preview-pdf.fit-width' | translate }}</span>\n          </button>\n\n          <span class=\"sd-preview-pdf-toolbar__divider\"></span>\n\n          <button\n            type=\"button\"\n            class=\"sd-preview-pdf-toolbar__btn\"\n            [attr.aria-label]=\"'core.component.preview-pdf.rotate' | translate\"\n            [attr.title]=\"'core.component.preview-pdf.rotate' | translate\"\n            [attr.data-autoId]=\"autoIdRotate()\"\n            (click)=\"rotate('right')\">\n            <mat-icon fontIcon=\"rotate_right\"></mat-icon>\n          </button>\n\n          <!-- TODO(preview-pdf): scroll mode toggle is signature-only;\n               clicking switches the state but rendering stays single-page\n               until the continuous scroll feature lands. -->\n          <button\n            type=\"button\"\n            class=\"sd-preview-pdf-toolbar__btn sd-preview-pdf-toolbar__btn--with-label\"\n            [attr.data-autoId]=\"autoIdScrollMode()\"\n            (click)=\"setScrollMode(scrollModeCurrent() === 'page' ? 'continuous' : 'page')\">\n            <mat-icon [fontIcon]=\"scrollModeCurrent() === 'page' ? 'description' : 'view_day'\"></mat-icon>\n            <span>\n              {{ (scrollModeCurrent() === 'page'\n                  ? 'core.component.preview-pdf.scroll-page'\n                  : 'core.component.preview-pdf.scroll-continuous') | translate }}\n            </span>\n          </button>\n        </div>\n      }\n    </div>\n  </div>\n</div>\n", styles: [":host{--sd-pdf-shell-bg: #1a1c1f;--sd-pdf-sidebar-bg: #22252a;--sd-pdf-toolbar-bg: rgba(20, 22, 25, .94);--sd-pdf-page-bg: #ffffff;--sd-pdf-page-shadow: 0 4px 16px rgba(0, 0, 0, .4);--sd-pdf-divider: rgba(255, 255, 255, .08);--sd-pdf-fg: #f5f6f7;--sd-pdf-fg-muted: rgba(255, 255, 255, .6);--sd-pdf-fg-subtle: rgba(255, 255, 255, .4);--sd-pdf-accent: var(--sd-primary, #3b82f6);--sd-pdf-accent-soft: rgba(59, 130, 246, .2);--sd-pdf-danger: var(--sd-error, #ef4444);--sd-pdf-success: var(--sd-success, #22c55e);--sd-pdf-danger-soft: rgba(239, 68, 68, .1);--sd-pdf-danger-border: rgba(239, 68, 68, .3);--sd-pdf-danger-tint: rgba(239, 68, 68, .15);--sd-pdf-hover-bg: rgba(255, 255, 255, .1);--sd-pdf-search-hi: rgba(250, 204, 21, .55);--sd-pdf-search-hi-active: rgba(249, 115, 22, .85);display:block;width:100%;height:100%;min-height:320px;outline:none}:host([data-theme=light]){--sd-pdf-shell-bg: #f7f8fa;--sd-pdf-sidebar-bg: #ffffff;--sd-pdf-toolbar-bg: rgba(255, 255, 255, .94);--sd-pdf-page-bg: #ffffff;--sd-pdf-page-shadow: 0 4px 16px rgba(0, 0, 0, .12);--sd-pdf-divider: rgba(0, 0, 0, .08);--sd-pdf-fg: #1a1c1f;--sd-pdf-fg-muted: rgba(0, 0, 0, .62);--sd-pdf-fg-subtle: rgba(0, 0, 0, .42);--sd-pdf-accent: var(--sd-primary, #1f49bf);--sd-pdf-accent-soft: rgba(31, 73, 191, .18);--sd-pdf-danger: var(--sd-error, #ef4444);--sd-pdf-success: var(--sd-success, #22c55e);--sd-pdf-danger-soft: rgba(239, 68, 68, .08);--sd-pdf-danger-border: rgba(239, 68, 68, .25);--sd-pdf-danger-tint: rgba(239, 68, 68, .12);--sd-pdf-hover-bg: rgba(0, 0, 0, .06);--sd-pdf-search-hi: rgba(250, 204, 21, .55);--sd-pdf-search-hi-active: rgba(250, 204, 21, .9)}:host(.sd-preview-pdf-host--fullscreen){width:100vw;height:100vh;min-height:0}.sd-preview-pdf-shell{position:relative;display:flex;flex-direction:column;width:100%;height:100%;background:var(--sd-pdf-shell-bg);color:var(--sd-pdf-fg);border-radius:12px;overflow:hidden;box-shadow:0 30px 80px #0000008c,0 0 0 1px #ffffff0a;font-family:inherit}.sd-preview-pdf-header{display:flex;align-items:center;justify-content:space-between;gap:12px;height:57px;padding:0 12px;background:var(--sd-pdf-toolbar-bg);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-bottom:1px solid var(--sd-pdf-divider);flex:0 0 auto;z-index:2}.sd-preview-pdf-header__left{display:flex;align-items:center;gap:8px;min-width:0;flex:1 1 auto}.sd-preview-pdf-header__right{display:flex;align-items:center;gap:4px;flex-shrink:0}.sd-preview-pdf-header__divider{display:inline-block;width:1px;height:20px;background:var(--sd-pdf-divider)}.sd-preview-pdf-header__meta{display:flex;flex-direction:column;min-width:0}.sd-preview-pdf-header__name{font-size:14px;font-weight:500;color:var(--sd-pdf-fg);max-width:320px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.sd-preview-pdf-header__sub{font-size:11px;color:var(--sd-pdf-fg-muted);margin-top:2px}.sd-preview-pdf-fileicon{display:inline-flex;align-items:center;justify-content:center;width:32px;height:32px;border-radius:6px;background:var(--sd-pdf-danger-tint);border:1px solid var(--sd-pdf-danger-border);color:var(--sd-error-light, #f87171);font:700 10px/1 ui-monospace,SFMono-Regular,Menlo,monospace}.sd-preview-pdf-iconbtn{display:inline-flex;align-items:center;justify-content:center;gap:6px;min-width:32px;height:32px;padding:0 8px;background:transparent;border:none;color:var(--sd-pdf-fg);border-radius:6px;cursor:pointer;transition:background .12s,color .12s;white-space:nowrap;flex-shrink:0}.sd-preview-pdf-iconbtn mat-icon{font-size:18px;width:18px;height:18px}.sd-preview-pdf-iconbtn__label{font-size:13px;font-weight:500}.sd-preview-pdf-iconbtn:hover:not(:disabled){background:var(--sd-pdf-hover-bg)}.sd-preview-pdf-iconbtn:focus-visible{outline:2px solid var(--sd-pdf-accent);outline-offset:2px}.sd-preview-pdf-iconbtn:disabled{opacity:.35;cursor:not-allowed}.sd-preview-pdf-iconbtn--active{background:var(--sd-pdf-accent-soft);color:var(--sd-pdf-accent)}.sd-preview-pdf-searchbar{display:flex;align-items:center;gap:6px;height:46px;padding:0 12px;background:var(--sd-pdf-toolbar-bg);border-bottom:1px solid var(--sd-pdf-divider);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);flex:0 0 auto;z-index:2}.sd-preview-pdf-searchbar__icon{color:var(--sd-pdf-fg-muted);font-size:18px;width:18px;height:18px;flex-shrink:0}.sd-preview-pdf-searchbar__input{flex:0 1 360px;min-width:160px;height:30px;background:#ffffff0f;border:1px solid rgba(255,255,255,.08);color:var(--sd-pdf-fg);border-radius:6px;padding:0 10px;font-size:13px;outline:none}.sd-preview-pdf-searchbar__input::placeholder{color:var(--sd-pdf-fg-subtle)}.sd-preview-pdf-searchbar__input:focus{border-color:var(--sd-pdf-accent);background:#ffffff17}.sd-preview-pdf-searchbar__counter{color:var(--sd-pdf-fg-muted);font-size:12px;font-variant-numeric:tabular-nums;min-width:48px;text-align:center;flex-shrink:0}.sd-preview-pdf-searchbar__divider{width:1px;height:20px;background:var(--sd-pdf-divider);flex-shrink:0}.sd-preview-pdf-searchbar__spacer{flex:1 1 auto}.sd-pdf-search-overlay{position:absolute;top:8px;left:50%;transform:translate(-50%);display:flex;flex-wrap:wrap;gap:4px;max-width:80%;pointer-events:none;z-index:5}.sd-pdf-search-hi{display:inline-block;padding:1px 4px;border-radius:2px;background:var(--sd-pdf-search-hi);color:#000;font-size:12px;font-weight:500}.sd-pdf-search-hi--active{background:var(--sd-pdf-search-hi-active);color:#fff;box-shadow:0 0 0 2px #fff6}.sd-preview-pdf-body{position:relative;flex:1 1 auto;min-height:0;display:flex;flex-direction:row;overflow:hidden}.sd-preview-pdf-sidebar{width:240px;display:flex;flex-direction:column;background:var(--sd-pdf-sidebar-bg);border-right:1px solid var(--sd-pdf-divider);flex-shrink:0;min-height:0}.sd-preview-pdf-sidebar__tabs{display:flex;gap:4px;padding:8px;border-bottom:1px solid var(--sd-pdf-divider)}.sd-preview-pdf-sidebar__tab{flex:1 1 0;display:inline-flex;align-items:center;justify-content:center;gap:4px;height:32px;padding:0 4px;background:transparent;border:none;color:var(--sd-pdf-fg-muted);border-radius:6px;cursor:pointer;font-size:12px;font-weight:500;white-space:nowrap;flex-shrink:0;transition:background .12s,color .12s}.sd-preview-pdf-sidebar__tab mat-icon{font-size:14px;width:14px;height:14px}.sd-preview-pdf-sidebar__tab:hover{background:#ffffff0f;color:var(--sd-pdf-fg)}.sd-preview-pdf-sidebar__tab--active{background:var(--sd-pdf-accent-soft);color:var(--sd-pdf-accent)}.sd-preview-pdf-sidebar__content{flex:1 1 auto;overflow:auto;padding:12px}.sd-preview-pdf-sidebar__deferred{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;padding:32px 16px;text-align:center;color:var(--sd-pdf-fg-subtle)}.sd-preview-pdf-sidebar__deferred mat-icon{font-size:28px;width:28px;height:28px;opacity:.6}.sd-preview-pdf-sidebar__deferred p{margin:0;font-size:12px;line-height:1.5}.sd-preview-pdf-thumb-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:12px}.sd-preview-pdf-thumb{display:flex;flex-direction:column;align-items:center;gap:4px;width:100%;padding:0;background:transparent;border:none;cursor:pointer}.sd-preview-pdf-thumb__page{width:152px;aspect-ratio:612/792;background:var(--sd-pdf-page-bg);border-radius:2px;outline:1px solid rgba(255,255,255,.08);outline-offset:-1px;box-shadow:0 2px 6px #0000004d;display:flex;align-items:center;justify-content:center;overflow:hidden;-webkit-user-select:none;user-select:none;background-image:linear-gradient(90deg,#0000,#0000000a,#0000);background-size:200% 100%;animation:sd-preview-pdf-thumb-skel 1.6s ease-in-out infinite}.sd-preview-pdf-thumb__canvas{display:block;max-width:100%;max-height:100%;background:var(--sd-pdf-page-bg)}.sd-preview-pdf-thumb__label{font-size:11px;color:var(--sd-pdf-fg-muted);font-variant-numeric:tabular-nums}.sd-preview-pdf-thumb--active .sd-preview-pdf-thumb__page{outline:2px solid var(--sd-pdf-accent);outline-offset:-2px}.sd-preview-pdf-thumb--active .sd-preview-pdf-thumb__label{color:var(--sd-pdf-accent);font-weight:600}.sd-preview-pdf-thumb:focus-visible .sd-preview-pdf-thumb__page{outline:2px solid var(--sd-pdf-accent);outline-offset:2px}.sd-preview-pdf-stage{position:relative;flex:1 1 auto;min-width:0;min-height:0;background:var(--sd-pdf-shell-bg);background-image:linear-gradient(45deg,rgba(255,255,255,.015) 25%,transparent 25%),linear-gradient(-45deg,rgba(255,255,255,.015) 25%,transparent 25%),linear-gradient(45deg,transparent 75%,rgba(255,255,255,.015) 75%),linear-gradient(-45deg,transparent 75%,rgba(255,255,255,.015) 75%);background-size:24px 24px;background-position:0 0,0 12px,12px -12px,-12px 0;overflow:auto;padding:32px 24px 96px;display:flex;justify-content:center;align-items:flex-start}:host([data-theme=light]) .sd-preview-pdf-stage{background-image:linear-gradient(45deg,rgba(0,0,0,.015) 25%,transparent 25%),linear-gradient(-45deg,rgba(0,0,0,.015) 25%,transparent 25%),linear-gradient(45deg,transparent 75%,rgba(0,0,0,.015) 75%),linear-gradient(-45deg,transparent 75%,rgba(0,0,0,.015) 75%)}.sd-preview-pdf-page-wrap{display:inline-block;position:relative}.sd-preview-pdf-page{display:block;background:var(--sd-pdf-page-bg);border-radius:2px;box-shadow:var(--sd-pdf-page-shadow);max-width:100%}.sd-preview-pdf-toolbar{position:absolute;bottom:20px;left:50%;transform:translate(-50%);display:flex;align-items:center;gap:2px;padding:5px 6px;background:var(--sd-pdf-toolbar-bg);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border:1px solid var(--sd-pdf-divider);border-radius:10px;box-shadow:0 8px 30px #0006;z-index:4;max-width:calc(100% - 32px);overflow-x:auto}.sd-preview-pdf-toolbar__btn{display:inline-flex;align-items:center;justify-content:center;gap:4px;min-width:30px;height:28px;padding:0 6px;background:transparent;border:none;color:var(--sd-pdf-fg);border-radius:6px;cursor:pointer;white-space:nowrap;flex-shrink:0;transition:background .12s,color .12s}.sd-preview-pdf-toolbar__btn mat-icon{font-size:18px;width:18px;height:18px}.sd-preview-pdf-toolbar__btn span{font-size:13px;font-weight:500}.sd-preview-pdf-toolbar__btn--with-label{padding:0 10px}.sd-preview-pdf-toolbar__btn--active{background:var(--sd-pdf-accent-soft);color:var(--sd-pdf-accent)}.sd-preview-pdf-toolbar__btn:hover:not(:disabled):not(.sd-preview-pdf-toolbar__btn--active){background:var(--sd-pdf-hover-bg)}.sd-preview-pdf-toolbar__btn:focus-visible{outline:2px solid var(--sd-pdf-accent);outline-offset:2px}.sd-preview-pdf-toolbar__btn:disabled{opacity:.35;cursor:not-allowed}.sd-preview-pdf-toolbar__page{display:inline-flex;align-items:center;gap:4px;padding:0 6px;flex-shrink:0}.sd-preview-pdf-toolbar__page-input{width:36px;height:24px;background:#ffffff14;border:1px solid rgba(255,255,255,.08);color:var(--sd-pdf-fg);border-radius:4px;text-align:center;font-size:13px;font-variant-numeric:tabular-nums;outline:none}.sd-preview-pdf-toolbar__page-input:focus{border-color:var(--sd-pdf-accent)}.sd-preview-pdf-toolbar__page-total{font-size:13px;color:var(--sd-pdf-fg-muted);font-variant-numeric:tabular-nums}.sd-preview-pdf-toolbar__zoom{min-width:56px;text-align:center;color:var(--sd-pdf-fg);font-size:13px;font-weight:500;font-variant-numeric:tabular-nums;background:#ffffff14;border-radius:4px;padding:2px 8px}.sd-preview-pdf-toolbar__divider{width:1px;height:20px;background:var(--sd-pdf-divider);margin:0 4px;flex-shrink:0}.sd-preview-pdf-status{margin:auto;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;text-align:center;padding:32px;max-width:420px}.sd-preview-pdf-status__tile{width:96px;height:96px;border-radius:24px;display:flex;align-items:center;justify-content:center;border:1px solid var(--sd-pdf-divider)}.sd-preview-pdf-status__tile mat-icon{font-size:48px;width:48px;height:48px}.sd-preview-pdf-status__tile--muted{background:#ffffff0d}.sd-preview-pdf-status__tile--muted mat-icon{color:var(--sd-pdf-fg-subtle)}.sd-preview-pdf-status__tile--danger{background:var(--sd-pdf-danger-soft);border-color:var(--sd-pdf-danger-border)}.sd-preview-pdf-status__tile--danger mat-icon{color:var(--sd-pdf-danger)}.sd-preview-pdf-status__title{font-size:16px;font-weight:500;color:var(--sd-pdf-fg)}.sd-preview-pdf-status__hint{font-size:13px;color:var(--sd-pdf-fg-muted);line-height:1.5}.sd-preview-pdf-status__actions{display:flex;gap:8px;margin-top:4px}.sd-preview-pdf-progress-pct{font-variant-numeric:tabular-nums;color:var(--sd-pdf-fg-muted)}.sd-preview-pdf-progress{width:240px;height:4px;background:#ffffff14;border-radius:999px;overflow:hidden}.sd-preview-pdf-progress__fill{height:100%;background:var(--sd-pdf-accent);transition:width .12s linear}.sd-preview-pdf-spinner{width:56px;height:56px;border-radius:999px;border:3px solid rgba(255,255,255,.08);border-top-color:var(--sd-pdf-accent);animation:sd-preview-pdf-spin .9s linear infinite}@keyframes sd-preview-pdf-spin{to{transform:rotate(360deg)}}@keyframes sd-preview-pdf-thumb-skel{0%{background-position:200% 0}to{background-position:-200% 0}}.sd-preview-pdf-search-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px}.sd-preview-pdf-search-result{width:100%;display:flex;align-items:flex-start;gap:8px;padding:8px 10px;background:#ffffff0a;border:1px solid transparent;border-radius:6px;color:var(--sd-pdf-fg);cursor:pointer;text-align:left;transition:background .12s,border-color .12s}.sd-preview-pdf-search-result:hover{background:#ffffff12}.sd-preview-pdf-search-result--active{background:var(--sd-pdf-accent-soft);border-color:#3b82f673}.sd-preview-pdf-search-result__snippet{flex:1 1 auto;font-size:12px;line-height:1.4;color:var(--sd-pdf-fg);word-break:break-word}.sd-preview-pdf-search-result__snippet mark{background:var(--sd-pdf-search-hi);color:#000;padding:0 2px;border-radius:2px}.sd-preview-pdf-search-result__page{flex:0 0 auto;font-size:11px;font-variant-numeric:tabular-nums;color:var(--sd-pdf-fg-muted);background:#ffffff0f;padding:2px 6px;border-radius:4px}.sd-preview-pdf-btn-primary{display:inline-flex;align-items:center;gap:6px;height:36px;padding:0 16px;background:var(--sd-pdf-accent);color:#fff;border:none;border-radius:8px;cursor:pointer;font-size:13px;font-weight:500;transition:filter .12s}.sd-preview-pdf-btn-primary mat-icon{font-size:18px;width:18px;height:18px}.sd-preview-pdf-btn-primary:hover{filter:brightness(1.1)}.sd-preview-pdf-btn-primary:focus-visible{outline:2px solid #fff;outline-offset:2px}.sd-preview-pdf-btn-secondary{display:inline-flex;align-items:center;gap:6px;height:36px;padding:0 16px;background:transparent;color:var(--sd-pdf-fg);border:1px solid var(--sd-pdf-divider);border-radius:8px;cursor:pointer;font-size:13px;font-weight:500;transition:background .12s}.sd-preview-pdf-btn-secondary mat-icon{font-size:18px;width:18px;height:18px}.sd-preview-pdf-btn-secondary:hover{background:#ffffff0f}.sd-preview-pdf-btn-secondary:focus-visible{outline:2px solid var(--sd-pdf-accent);outline-offset:2px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+_a = SdPreviewPdf;
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: SdPreviewPdf, decorators: [{
+            type: Component,
+            args: [{ selector: 'sd-preview-pdf', standalone: true, imports: [CommonModule, FormsModule, MatIconModule, TranslatePipe], changeDetection: ChangeDetectionStrategy.OnPush, host: {
+                        tabindex: '0',
+                        class: 'sd-preview-pdf-host',
+                        // WHY data-theme attribute: SCSS uses :host([data-theme="light"]) to swap
+                        // CSS custom properties — declarative, devtools-visible, no class-name
+                        // collision with consumer styling.
+                        '[attr.data-theme]': 'theme()',
+                        '[class.sd-preview-pdf-host--fullscreen]': 'isFullscreen()',
+                    }, template: "<!--\n  sd-preview-pdf shell. Self-contained \u2014 sizes to its parent. Consumer wraps\n  in <sd-modal>/<sd-side-drawer>/page section. Header + sidebar + stage +\n  floating toolbar mirror Artboards A / C / E from the design handoff.\n-->\n<div class=\"sd-preview-pdf-shell\" role=\"region\">\n\n  <!-- ============================================\n       HEADER BAR \u2014 hidden in empty + loading per design\n       ============================================ -->\n  @if (stage() === 'ready') {\n    <div class=\"sd-preview-pdf-header\">\n      <div class=\"sd-preview-pdf-header__left\">\n        <button\n          type=\"button\"\n          class=\"sd-preview-pdf-iconbtn\"\n          [class.sd-preview-pdf-iconbtn--active]=\"isSidebarOpen()\"\n          [attr.aria-label]=\"'core.component.preview-pdf.toggle-sidebar' | translate\"\n          [attr.title]=\"'core.component.preview-pdf.toggle-sidebar' | translate\"\n          [attr.data-autoId]=\"autoIdSidebarToggle()\"\n          (click)=\"toggleSidebar()\">\n          <mat-icon fontIcon=\"menu\"></mat-icon>\n        </button>\n        <span class=\"sd-preview-pdf-header__divider\"></span>\n        <div class=\"sd-preview-pdf-fileicon\" aria-hidden=\"true\">PDF</div>\n        <div class=\"sd-preview-pdf-header__meta\">\n          <div class=\"sd-preview-pdf-header__name\" [title]=\"title() || filename()\">\n            {{ title() || filename() }}\n          </div>\n          <div class=\"sd-preview-pdf-header__sub\">\n            {{ 'core.component.preview-pdf.pages-count' | translate: { count: numPages() } }}\n          </div>\n        </div>\n      </div>\n\n      <div class=\"sd-preview-pdf-header__right\">\n        <button\n          type=\"button\"\n          class=\"sd-preview-pdf-iconbtn\"\n          [class.sd-preview-pdf-iconbtn--active]=\"searchBarOpen()\"\n          [attr.aria-label]=\"'core.component.preview-pdf.search' | translate\"\n          [attr.title]=\"'core.component.preview-pdf.search' | translate\"\n          [attr.data-autoId]=\"autoIdSearchToggle()\"\n          (click)=\"searchBarOpen() ? closeSearch() : openSearch()\">\n          <mat-icon fontIcon=\"search\"></mat-icon>\n        </button>\n        @if (downloadable()) {\n          <button\n            type=\"button\"\n            class=\"sd-preview-pdf-iconbtn\"\n            [attr.aria-label]=\"'core.component.preview-pdf.download' | translate\"\n            [attr.title]=\"'core.component.preview-pdf.download' | translate\"\n            [attr.data-autoId]=\"autoIdDownload()\"\n            (click)=\"downloadFile()\">\n            <mat-icon fontIcon=\"download\"></mat-icon>\n          </button>\n        }\n        <button\n          type=\"button\"\n          class=\"sd-preview-pdf-iconbtn\"\n          [attr.aria-label]=\"'core.component.preview-pdf.fullscreen' | translate\"\n          [attr.title]=\"'core.component.preview-pdf.fullscreen' | translate\"\n          [attr.data-autoId]=\"autoIdFullscreen()\"\n          (click)=\"toggleFullscreen()\">\n          <mat-icon [fontIcon]=\"isFullscreen() ? 'fullscreen_exit' : 'fullscreen'\"></mat-icon>\n        </button>\n      </div>\n    </div>\n\n    <!-- ============================================\n         SEARCH BAR \u2014 between header + body, only when bar is open\n         ============================================ -->\n    @if (searchBarOpen()) {\n      <div class=\"sd-preview-pdf-searchbar\" role=\"search\">\n        <mat-icon class=\"sd-preview-pdf-searchbar__icon\" fontIcon=\"search\"></mat-icon>\n        <input\n          #searchInput\n          type=\"text\"\n          class=\"sd-preview-pdf-searchbar__input\"\n          [attr.placeholder]=\"'core.component.preview-pdf.search-placeholder' | translate\"\n          [value]=\"searchTerm()\"\n          [attr.data-autoId]=\"autoIdSearchInput()\"\n          (input)=\"onSearchInput($any($event.target).value)\" />\n        <span class=\"sd-preview-pdf-searchbar__counter\" aria-live=\"polite\">\n          {{ searchCurrent() }} / {{ searchTotal() }}\n        </span>\n        <button\n          type=\"button\"\n          class=\"sd-preview-pdf-iconbtn\"\n          [disabled]=\"searchTotal() === 0\"\n          [attr.aria-label]=\"'core.component.preview-pdf.search-prev' | translate\"\n          [attr.title]=\"'core.component.preview-pdf.search-prev' | translate\"\n          [attr.data-autoId]=\"autoIdSearchPrev()\"\n          (click)=\"searchPrev()\">\n          <mat-icon fontIcon=\"keyboard_arrow_up\"></mat-icon>\n        </button>\n        <button\n          type=\"button\"\n          class=\"sd-preview-pdf-iconbtn\"\n          [disabled]=\"searchTotal() === 0\"\n          [attr.aria-label]=\"'core.component.preview-pdf.search-next' | translate\"\n          [attr.title]=\"'core.component.preview-pdf.search-next' | translate\"\n          [attr.data-autoId]=\"autoIdSearchNext()\"\n          (click)=\"searchNext()\">\n          <mat-icon fontIcon=\"keyboard_arrow_down\"></mat-icon>\n        </button>\n        <span class=\"sd-preview-pdf-searchbar__divider\"></span>\n        <button\n          type=\"button\"\n          class=\"sd-preview-pdf-iconbtn\"\n          [class.sd-preview-pdf-iconbtn--active]=\"searchCaseSensitive()\"\n          [attr.aria-label]=\"'core.component.preview-pdf.search-case' | translate\"\n          [attr.title]=\"'core.component.preview-pdf.search-case' | translate\"\n          [attr.data-autoId]=\"autoIdSearchCase()\"\n          (click)=\"toggleSearchCaseSensitive()\">\n          <mat-icon fontIcon=\"match_case\"></mat-icon>\n        </button>\n        <button\n          type=\"button\"\n          class=\"sd-preview-pdf-iconbtn\"\n          [class.sd-preview-pdf-iconbtn--active]=\"searchWholeWord()\"\n          [attr.aria-label]=\"'core.component.preview-pdf.search-whole' | translate\"\n          [attr.title]=\"'core.component.preview-pdf.search-whole' | translate\"\n          [attr.data-autoId]=\"autoIdSearchWhole()\"\n          (click)=\"toggleSearchWholeWord()\">\n          <mat-icon fontIcon=\"text_fields\"></mat-icon>\n        </button>\n        <span class=\"sd-preview-pdf-searchbar__spacer\"></span>\n        <button\n          type=\"button\"\n          class=\"sd-preview-pdf-iconbtn\"\n          [attr.aria-label]=\"'core.component.preview-pdf.search-close' | translate\"\n          [attr.title]=\"'core.component.preview-pdf.search-close' | translate\"\n          [attr.data-autoId]=\"autoIdSearchClose()\"\n          (click)=\"closeSearch()\">\n          <mat-icon fontIcon=\"close\"></mat-icon>\n        </button>\n      </div>\n    }\n  }\n\n  <!-- ============================================\n       BODY \u2014 sidebar + stage\n       ============================================ -->\n  <div class=\"sd-preview-pdf-body\">\n\n    <!-- SIDEBAR ............................................................. -->\n    @if (stage() === 'ready' && isSidebarOpen()) {\n      <aside class=\"sd-preview-pdf-sidebar\" role=\"complementary\">\n        <div class=\"sd-preview-pdf-sidebar__tabs\" role=\"tablist\">\n          <button\n            type=\"button\"\n            class=\"sd-preview-pdf-sidebar__tab\"\n            role=\"tab\"\n            [class.sd-preview-pdf-sidebar__tab--active]=\"sidebarMode() === 'thumbnails'\"\n            [attr.data-autoId]=\"autoIdTabThumbnails()\"\n            (click)=\"setSidebarMode('thumbnails')\">\n            <mat-icon fontIcon=\"view_carousel\"></mat-icon>\n            <span>{{ 'core.component.preview-pdf.tab.thumbnails' | translate }}</span>\n          </button>\n          <button\n            type=\"button\"\n            class=\"sd-preview-pdf-sidebar__tab\"\n            role=\"tab\"\n            [class.sd-preview-pdf-sidebar__tab--active]=\"sidebarMode() === 'outline'\"\n            [attr.data-autoId]=\"autoIdTabOutline()\"\n            (click)=\"setSidebarMode('outline')\">\n            <mat-icon fontIcon=\"list\"></mat-icon>\n            <span>{{ 'core.component.preview-pdf.tab.outline' | translate }}</span>\n          </button>\n          <button\n            type=\"button\"\n            class=\"sd-preview-pdf-sidebar__tab\"\n            role=\"tab\"\n            [class.sd-preview-pdf-sidebar__tab--active]=\"sidebarMode() === 'search'\"\n            [attr.data-autoId]=\"autoIdTabSearch()\"\n            (click)=\"setSidebarMode('search')\">\n            <mat-icon fontIcon=\"search\"></mat-icon>\n            <span>{{ 'core.component.preview-pdf.tab.search' | translate }}</span>\n          </button>\n        </div>\n\n        <div class=\"sd-preview-pdf-sidebar__content\">\n          @switch (sidebarMode()) {\n            @case ('thumbnails') {\n              <ul class=\"sd-preview-pdf-thumb-list\">\n                @for (p of pageNumbers(); track trackByPage($index, p); let pi = $index) {\n                  <li>\n                    <button\n                      type=\"button\"\n                      class=\"sd-preview-pdf-thumb\"\n                      [class.sd-preview-pdf-thumb--active]=\"p === activePage()\"\n                      [attr.aria-current]=\"p === activePage() ? 'page' : null\"\n                      [attr.aria-label]=\"('core.component.preview-pdf.page-of' | translate: { current: p, total: numPages() })\"\n                      [attr.data-autoId]=\"autoIdThumb(pi)\"\n                      (click)=\"goToPage(p)\">\n                      <div class=\"sd-preview-pdf-thumb__page\">\n                        <canvas\n                          #thumbCanvas\n                          class=\"sd-preview-pdf-thumb__canvas\"\n                          [attr.data-page]=\"p\"\n                          aria-hidden=\"true\"></canvas>\n                      </div>\n                      <span class=\"sd-preview-pdf-thumb__label\">{{ p }}</span>\n                    </button>\n                  </li>\n                }\n              </ul>\n            }\n            @case ('outline') {\n              <!-- TODO(preview-pdf): outline tree (pdfDoc.getOutline()) deferred to follow-up commit. -->\n              <div class=\"sd-preview-pdf-sidebar__deferred\">\n                <mat-icon fontIcon=\"list\"></mat-icon>\n                <p>{{ 'core.component.preview-pdf.deferred.outline' | translate }}</p>\n              </div>\n            }\n            @case ('search') {\n              @if (!searchTerm()) {\n                <div class=\"sd-preview-pdf-sidebar__deferred\">\n                  <mat-icon fontIcon=\"search\"></mat-icon>\n                  <p>{{ 'core.component.preview-pdf.search-placeholder' | translate }}</p>\n                </div>\n              } @else if (searchTotal() === 0) {\n                <div class=\"sd-preview-pdf-sidebar__deferred\">\n                  <mat-icon fontIcon=\"search_off\"></mat-icon>\n                  <p>{{ 'core.component.preview-pdf.search-no-results' | translate }}</p>\n                </div>\n              } @else {\n                <ul class=\"sd-preview-pdf-search-list\">\n                  @for (r of searchResults(); track $index; let i = $index) {\n                    <li>\n                      <button\n                        type=\"button\"\n                        class=\"sd-preview-pdf-search-result\"\n                        [class.sd-preview-pdf-search-result--active]=\"i === searchActiveIndex()\"\n                        [attr.data-autoId]=\"autoIdResult(i)\"\n                        (click)=\"goToPage(r.page)\">\n                        <span class=\"sd-preview-pdf-search-result__snippet\">\n                          {{ r.before }}<mark>{{ r.term }}</mark>{{ r.after }}\n                        </span>\n                        <span class=\"sd-preview-pdf-search-result__page\">{{ r.page }}</span>\n                      </button>\n                    </li>\n                  }\n                </ul>\n              }\n            }\n            @default {\n              <div class=\"sd-preview-pdf-sidebar__deferred\"></div>\n            }\n          }\n        </div>\n      </aside>\n    }\n\n    <!-- STAGE ............................................................... -->\n    <div class=\"sd-preview-pdf-stage\" #stageRef (wheel)=\"onWheel($event)\">\n      @switch (stage()) {\n        @case ('empty') {\n          <div class=\"sd-preview-pdf-status\">\n            <div class=\"sd-preview-pdf-status__tile sd-preview-pdf-status__tile--muted\">\n              <mat-icon fontIcon=\"picture_as_pdf\"></mat-icon>\n            </div>\n            <div class=\"sd-preview-pdf-status__title\">\n              {{ 'core.component.preview-pdf.empty.title' | translate }}\n            </div>\n            <div class=\"sd-preview-pdf-status__hint\">\n              {{ 'core.component.preview-pdf.empty.subtitle' | translate }}\n            </div>\n          </div>\n        }\n        @case ('loading') {\n          <div class=\"sd-preview-pdf-status\">\n            <div class=\"sd-preview-pdf-spinner\" role=\"progressbar\"></div>\n            <div class=\"sd-preview-pdf-status__title\">\n              {{ 'core.component.preview-pdf.loading' | translate }}\n              @if (loadPercent() > 0) {\n                <span class=\"sd-preview-pdf-progress-pct\">&nbsp;{{ loadPercent() }}%</span>\n              }\n            </div>\n            <div class=\"sd-preview-pdf-progress\">\n              <div class=\"sd-preview-pdf-progress__fill\" [style.width.%]=\"loadPercent()\"></div>\n            </div>\n          </div>\n        }\n        @case ('error') {\n          @if (loadError$(); as err) {\n            <div class=\"sd-preview-pdf-status\">\n              <div class=\"sd-preview-pdf-status__tile sd-preview-pdf-status__tile--danger\">\n                <mat-icon fontIcon=\"error_outline\"></mat-icon>\n              </div>\n              <div class=\"sd-preview-pdf-status__title\">\n                {{ ('core.component.preview-pdf.error.' + err.reason + '.title') | translate }}\n              </div>\n              <div class=\"sd-preview-pdf-status__hint\">\n                {{ ('core.component.preview-pdf.error.' + err.reason + '.body') | translate }}\n              </div>\n              <div class=\"sd-preview-pdf-status__actions\">\n                <button type=\"button\" class=\"sd-preview-pdf-btn-primary\" (click)=\"retryLoad()\" [attr.data-autoId]=\"autoIdRetry()\">\n                  <mat-icon fontIcon=\"refresh\"></mat-icon>\n                  <span>{{ 'core.component.preview-pdf.error.retry' | translate }}</span>\n                </button>\n                @if (downloadable()) {\n                  <button type=\"button\" class=\"sd-preview-pdf-btn-secondary\" (click)=\"downloadFile()\">\n                    <mat-icon fontIcon=\"download\"></mat-icon>\n                    <span>{{ 'core.component.preview-pdf.error.download-raw' | translate }}</span>\n                  </button>\n                }\n              </div>\n            </div>\n          }\n        }\n        @default {\n          <div class=\"sd-preview-pdf-page-wrap\">\n            <canvas\n              #pageCanvas\n              class=\"sd-preview-pdf-page\"\n              role=\"img\"\n              [attr.aria-label]=\"('core.component.preview-pdf.page-of' | translate: { current: activePage(), total: numPages() })\">\n            </canvas>\n          </div>\n        }\n      }\n\n      <!-- FLOATING TOOLBAR ........................................ -->\n      @if (showToolbar() && stage() === 'ready') {\n        <div class=\"sd-preview-pdf-toolbar\" role=\"toolbar\">\n          <button\n            type=\"button\"\n            class=\"sd-preview-pdf-toolbar__btn\"\n            [disabled]=\"!canPrev()\"\n            [attr.aria-label]=\"'core.component.preview-pdf.first-page' | translate\"\n            [attr.title]=\"'core.component.preview-pdf.first-page' | translate\"\n            [attr.data-autoId]=\"autoIdFirst()\"\n            (click)=\"firstPage()\">\n            <mat-icon fontIcon=\"first_page\"></mat-icon>\n          </button>\n          <button\n            type=\"button\"\n            class=\"sd-preview-pdf-toolbar__btn\"\n            [disabled]=\"!canPrev()\"\n            [attr.aria-label]=\"'core.component.preview-pdf.prev-page' | translate\"\n            [attr.title]=\"'core.component.preview-pdf.prev-page' | translate\"\n            [attr.data-autoId]=\"autoIdPrev()\"\n            (click)=\"prevPage()\">\n            <mat-icon fontIcon=\"chevron_left\"></mat-icon>\n          </button>\n          <span class=\"sd-preview-pdf-toolbar__page\">\n            <input\n              type=\"text\"\n              inputmode=\"numeric\"\n              class=\"sd-preview-pdf-toolbar__page-input\"\n              [value]=\"activePage()\"\n              #pageInput\n              (keydown.enter)=\"onPageInputEnter($event)\"\n              (blur)=\"onPageInputBlur($event)\"\n              [attr.aria-label]=\"'core.component.preview-pdf.page-of' | translate: { current: activePage(), total: numPages() }\"\n              [attr.data-autoId]=\"autoIdPageInput()\" />\n            <span class=\"sd-preview-pdf-toolbar__page-total\">/ {{ numPages() }}</span>\n          </span>\n          <button\n            type=\"button\"\n            class=\"sd-preview-pdf-toolbar__btn\"\n            [disabled]=\"!canNext()\"\n            [attr.aria-label]=\"'core.component.preview-pdf.next-page' | translate\"\n            [attr.title]=\"'core.component.preview-pdf.next-page' | translate\"\n            [attr.data-autoId]=\"autoIdNext()\"\n            (click)=\"nextPage()\">\n            <mat-icon fontIcon=\"chevron_right\"></mat-icon>\n          </button>\n          <button\n            type=\"button\"\n            class=\"sd-preview-pdf-toolbar__btn\"\n            [disabled]=\"!canNext()\"\n            [attr.aria-label]=\"'core.component.preview-pdf.last-page' | translate\"\n            [attr.title]=\"'core.component.preview-pdf.last-page' | translate\"\n            [attr.data-autoId]=\"autoIdLast()\"\n            (click)=\"lastPage()\">\n            <mat-icon fontIcon=\"last_page\"></mat-icon>\n          </button>\n\n          <span class=\"sd-preview-pdf-toolbar__divider\"></span>\n\n          <button\n            type=\"button\"\n            class=\"sd-preview-pdf-toolbar__btn\"\n            [attr.aria-label]=\"'core.component.preview-pdf.zoom-out' | translate\"\n            [attr.title]=\"'core.component.preview-pdf.zoom-out' | translate\"\n            [attr.data-autoId]=\"autoIdZoomOut()\"\n            (click)=\"zoomOut()\">\n            <mat-icon fontIcon=\"remove\"></mat-icon>\n          </button>\n          <span class=\"sd-preview-pdf-toolbar__zoom\" aria-live=\"polite\" [attr.data-autoId]=\"autoIdZoomReadout()\">{{ zoomPercent() }}%</span>\n          <button\n            type=\"button\"\n            class=\"sd-preview-pdf-toolbar__btn\"\n            [attr.aria-label]=\"'core.component.preview-pdf.zoom-in' | translate\"\n            [attr.title]=\"'core.component.preview-pdf.zoom-in' | translate\"\n            [attr.data-autoId]=\"autoIdZoomIn()\"\n            (click)=\"zoomIn()\">\n            <mat-icon fontIcon=\"add\"></mat-icon>\n          </button>\n\n          <span class=\"sd-preview-pdf-toolbar__divider\"></span>\n\n          <button\n            type=\"button\"\n            class=\"sd-preview-pdf-toolbar__btn sd-preview-pdf-toolbar__btn--with-label\"\n            [class.sd-preview-pdf-toolbar__btn--active]=\"zoomMode() === 'page-fit'\"\n            [attr.data-autoId]=\"autoIdFitPage()\"\n            (click)=\"setZoom('page-fit')\">\n            <mat-icon fontIcon=\"fit_screen\"></mat-icon>\n            <span>{{ 'core.component.preview-pdf.fit-page' | translate }}</span>\n          </button>\n          <button\n            type=\"button\"\n            class=\"sd-preview-pdf-toolbar__btn sd-preview-pdf-toolbar__btn--with-label\"\n            [class.sd-preview-pdf-toolbar__btn--active]=\"zoomMode() === 'page-width'\"\n            [attr.data-autoId]=\"autoIdFitWidth()\"\n            (click)=\"setZoom('page-width')\">\n            <mat-icon fontIcon=\"swap_horiz\"></mat-icon>\n            <span>{{ 'core.component.preview-pdf.fit-width' | translate }}</span>\n          </button>\n\n          <span class=\"sd-preview-pdf-toolbar__divider\"></span>\n\n          <button\n            type=\"button\"\n            class=\"sd-preview-pdf-toolbar__btn\"\n            [attr.aria-label]=\"'core.component.preview-pdf.rotate' | translate\"\n            [attr.title]=\"'core.component.preview-pdf.rotate' | translate\"\n            [attr.data-autoId]=\"autoIdRotate()\"\n            (click)=\"rotate('right')\">\n            <mat-icon fontIcon=\"rotate_right\"></mat-icon>\n          </button>\n\n          <!-- TODO(preview-pdf): scroll mode toggle is signature-only;\n               clicking switches the state but rendering stays single-page\n               until the continuous scroll feature lands. -->\n          <button\n            type=\"button\"\n            class=\"sd-preview-pdf-toolbar__btn sd-preview-pdf-toolbar__btn--with-label\"\n            [attr.data-autoId]=\"autoIdScrollMode()\"\n            (click)=\"setScrollMode(scrollModeCurrent() === 'page' ? 'continuous' : 'page')\">\n            <mat-icon [fontIcon]=\"scrollModeCurrent() === 'page' ? 'description' : 'view_day'\"></mat-icon>\n            <span>\n              {{ (scrollModeCurrent() === 'page'\n                  ? 'core.component.preview-pdf.scroll-page'\n                  : 'core.component.preview-pdf.scroll-continuous') | translate }}\n            </span>\n          </button>\n        </div>\n      }\n    </div>\n  </div>\n</div>\n", styles: [":host{--sd-pdf-shell-bg: #1a1c1f;--sd-pdf-sidebar-bg: #22252a;--sd-pdf-toolbar-bg: rgba(20, 22, 25, .94);--sd-pdf-page-bg: #ffffff;--sd-pdf-page-shadow: 0 4px 16px rgba(0, 0, 0, .4);--sd-pdf-divider: rgba(255, 255, 255, .08);--sd-pdf-fg: #f5f6f7;--sd-pdf-fg-muted: rgba(255, 255, 255, .6);--sd-pdf-fg-subtle: rgba(255, 255, 255, .4);--sd-pdf-accent: var(--sd-primary, #3b82f6);--sd-pdf-accent-soft: rgba(59, 130, 246, .2);--sd-pdf-danger: var(--sd-error, #ef4444);--sd-pdf-success: var(--sd-success, #22c55e);--sd-pdf-danger-soft: rgba(239, 68, 68, .1);--sd-pdf-danger-border: rgba(239, 68, 68, .3);--sd-pdf-danger-tint: rgba(239, 68, 68, .15);--sd-pdf-hover-bg: rgba(255, 255, 255, .1);--sd-pdf-search-hi: rgba(250, 204, 21, .55);--sd-pdf-search-hi-active: rgba(249, 115, 22, .85);display:block;width:100%;height:100%;min-height:320px;outline:none}:host([data-theme=light]){--sd-pdf-shell-bg: #f7f8fa;--sd-pdf-sidebar-bg: #ffffff;--sd-pdf-toolbar-bg: rgba(255, 255, 255, .94);--sd-pdf-page-bg: #ffffff;--sd-pdf-page-shadow: 0 4px 16px rgba(0, 0, 0, .12);--sd-pdf-divider: rgba(0, 0, 0, .08);--sd-pdf-fg: #1a1c1f;--sd-pdf-fg-muted: rgba(0, 0, 0, .62);--sd-pdf-fg-subtle: rgba(0, 0, 0, .42);--sd-pdf-accent: var(--sd-primary, #1f49bf);--sd-pdf-accent-soft: rgba(31, 73, 191, .18);--sd-pdf-danger: var(--sd-error, #ef4444);--sd-pdf-success: var(--sd-success, #22c55e);--sd-pdf-danger-soft: rgba(239, 68, 68, .08);--sd-pdf-danger-border: rgba(239, 68, 68, .25);--sd-pdf-danger-tint: rgba(239, 68, 68, .12);--sd-pdf-hover-bg: rgba(0, 0, 0, .06);--sd-pdf-search-hi: rgba(250, 204, 21, .55);--sd-pdf-search-hi-active: rgba(250, 204, 21, .9)}:host(.sd-preview-pdf-host--fullscreen){width:100vw;height:100vh;min-height:0}.sd-preview-pdf-shell{position:relative;display:flex;flex-direction:column;width:100%;height:100%;background:var(--sd-pdf-shell-bg);color:var(--sd-pdf-fg);border-radius:12px;overflow:hidden;box-shadow:0 30px 80px #0000008c,0 0 0 1px #ffffff0a;font-family:inherit}.sd-preview-pdf-header{display:flex;align-items:center;justify-content:space-between;gap:12px;height:57px;padding:0 12px;background:var(--sd-pdf-toolbar-bg);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-bottom:1px solid var(--sd-pdf-divider);flex:0 0 auto;z-index:2}.sd-preview-pdf-header__left{display:flex;align-items:center;gap:8px;min-width:0;flex:1 1 auto}.sd-preview-pdf-header__right{display:flex;align-items:center;gap:4px;flex-shrink:0}.sd-preview-pdf-header__divider{display:inline-block;width:1px;height:20px;background:var(--sd-pdf-divider)}.sd-preview-pdf-header__meta{display:flex;flex-direction:column;min-width:0}.sd-preview-pdf-header__name{font-size:14px;font-weight:500;color:var(--sd-pdf-fg);max-width:320px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.sd-preview-pdf-header__sub{font-size:11px;color:var(--sd-pdf-fg-muted);margin-top:2px}.sd-preview-pdf-fileicon{display:inline-flex;align-items:center;justify-content:center;width:32px;height:32px;border-radius:6px;background:var(--sd-pdf-danger-tint);border:1px solid var(--sd-pdf-danger-border);color:var(--sd-error-light, #f87171);font:700 10px/1 ui-monospace,SFMono-Regular,Menlo,monospace}.sd-preview-pdf-iconbtn{display:inline-flex;align-items:center;justify-content:center;gap:6px;min-width:32px;height:32px;padding:0 8px;background:transparent;border:none;color:var(--sd-pdf-fg);border-radius:6px;cursor:pointer;transition:background .12s,color .12s;white-space:nowrap;flex-shrink:0}.sd-preview-pdf-iconbtn mat-icon{font-size:18px;width:18px;height:18px}.sd-preview-pdf-iconbtn__label{font-size:13px;font-weight:500}.sd-preview-pdf-iconbtn:hover:not(:disabled){background:var(--sd-pdf-hover-bg)}.sd-preview-pdf-iconbtn:focus-visible{outline:2px solid var(--sd-pdf-accent);outline-offset:2px}.sd-preview-pdf-iconbtn:disabled{opacity:.35;cursor:not-allowed}.sd-preview-pdf-iconbtn--active{background:var(--sd-pdf-accent-soft);color:var(--sd-pdf-accent)}.sd-preview-pdf-searchbar{display:flex;align-items:center;gap:6px;height:46px;padding:0 12px;background:var(--sd-pdf-toolbar-bg);border-bottom:1px solid var(--sd-pdf-divider);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);flex:0 0 auto;z-index:2}.sd-preview-pdf-searchbar__icon{color:var(--sd-pdf-fg-muted);font-size:18px;width:18px;height:18px;flex-shrink:0}.sd-preview-pdf-searchbar__input{flex:0 1 360px;min-width:160px;height:30px;background:#ffffff0f;border:1px solid rgba(255,255,255,.08);color:var(--sd-pdf-fg);border-radius:6px;padding:0 10px;font-size:13px;outline:none}.sd-preview-pdf-searchbar__input::placeholder{color:var(--sd-pdf-fg-subtle)}.sd-preview-pdf-searchbar__input:focus{border-color:var(--sd-pdf-accent);background:#ffffff17}.sd-preview-pdf-searchbar__counter{color:var(--sd-pdf-fg-muted);font-size:12px;font-variant-numeric:tabular-nums;min-width:48px;text-align:center;flex-shrink:0}.sd-preview-pdf-searchbar__divider{width:1px;height:20px;background:var(--sd-pdf-divider);flex-shrink:0}.sd-preview-pdf-searchbar__spacer{flex:1 1 auto}.sd-pdf-search-overlay{position:absolute;top:8px;left:50%;transform:translate(-50%);display:flex;flex-wrap:wrap;gap:4px;max-width:80%;pointer-events:none;z-index:5}.sd-pdf-search-hi{display:inline-block;padding:1px 4px;border-radius:2px;background:var(--sd-pdf-search-hi);color:#000;font-size:12px;font-weight:500}.sd-pdf-search-hi--active{background:var(--sd-pdf-search-hi-active);color:#fff;box-shadow:0 0 0 2px #fff6}.sd-preview-pdf-body{position:relative;flex:1 1 auto;min-height:0;display:flex;flex-direction:row;overflow:hidden}.sd-preview-pdf-sidebar{width:240px;display:flex;flex-direction:column;background:var(--sd-pdf-sidebar-bg);border-right:1px solid var(--sd-pdf-divider);flex-shrink:0;min-height:0}.sd-preview-pdf-sidebar__tabs{display:flex;gap:4px;padding:8px;border-bottom:1px solid var(--sd-pdf-divider)}.sd-preview-pdf-sidebar__tab{flex:1 1 0;display:inline-flex;align-items:center;justify-content:center;gap:4px;height:32px;padding:0 4px;background:transparent;border:none;color:var(--sd-pdf-fg-muted);border-radius:6px;cursor:pointer;font-size:12px;font-weight:500;white-space:nowrap;flex-shrink:0;transition:background .12s,color .12s}.sd-preview-pdf-sidebar__tab mat-icon{font-size:14px;width:14px;height:14px}.sd-preview-pdf-sidebar__tab:hover{background:#ffffff0f;color:var(--sd-pdf-fg)}.sd-preview-pdf-sidebar__tab--active{background:var(--sd-pdf-accent-soft);color:var(--sd-pdf-accent)}.sd-preview-pdf-sidebar__content{flex:1 1 auto;overflow:auto;padding:12px}.sd-preview-pdf-sidebar__deferred{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;padding:32px 16px;text-align:center;color:var(--sd-pdf-fg-subtle)}.sd-preview-pdf-sidebar__deferred mat-icon{font-size:28px;width:28px;height:28px;opacity:.6}.sd-preview-pdf-sidebar__deferred p{margin:0;font-size:12px;line-height:1.5}.sd-preview-pdf-thumb-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:12px}.sd-preview-pdf-thumb{display:flex;flex-direction:column;align-items:center;gap:4px;width:100%;padding:0;background:transparent;border:none;cursor:pointer}.sd-preview-pdf-thumb__page{width:152px;aspect-ratio:612/792;background:var(--sd-pdf-page-bg);border-radius:2px;outline:1px solid rgba(255,255,255,.08);outline-offset:-1px;box-shadow:0 2px 6px #0000004d;display:flex;align-items:center;justify-content:center;overflow:hidden;-webkit-user-select:none;user-select:none;background-image:linear-gradient(90deg,#0000,#0000000a,#0000);background-size:200% 100%;animation:sd-preview-pdf-thumb-skel 1.6s ease-in-out infinite}.sd-preview-pdf-thumb__canvas{display:block;max-width:100%;max-height:100%;background:var(--sd-pdf-page-bg)}.sd-preview-pdf-thumb__label{font-size:11px;color:var(--sd-pdf-fg-muted);font-variant-numeric:tabular-nums}.sd-preview-pdf-thumb--active .sd-preview-pdf-thumb__page{outline:2px solid var(--sd-pdf-accent);outline-offset:-2px}.sd-preview-pdf-thumb--active .sd-preview-pdf-thumb__label{color:var(--sd-pdf-accent);font-weight:600}.sd-preview-pdf-thumb:focus-visible .sd-preview-pdf-thumb__page{outline:2px solid var(--sd-pdf-accent);outline-offset:2px}.sd-preview-pdf-stage{position:relative;flex:1 1 auto;min-width:0;min-height:0;background:var(--sd-pdf-shell-bg);background-image:linear-gradient(45deg,rgba(255,255,255,.015) 25%,transparent 25%),linear-gradient(-45deg,rgba(255,255,255,.015) 25%,transparent 25%),linear-gradient(45deg,transparent 75%,rgba(255,255,255,.015) 75%),linear-gradient(-45deg,transparent 75%,rgba(255,255,255,.015) 75%);background-size:24px 24px;background-position:0 0,0 12px,12px -12px,-12px 0;overflow:auto;padding:32px 24px 96px;display:flex;justify-content:center;align-items:flex-start}:host([data-theme=light]) .sd-preview-pdf-stage{background-image:linear-gradient(45deg,rgba(0,0,0,.015) 25%,transparent 25%),linear-gradient(-45deg,rgba(0,0,0,.015) 25%,transparent 25%),linear-gradient(45deg,transparent 75%,rgba(0,0,0,.015) 75%),linear-gradient(-45deg,transparent 75%,rgba(0,0,0,.015) 75%)}.sd-preview-pdf-page-wrap{display:inline-block;position:relative}.sd-preview-pdf-page{display:block;background:var(--sd-pdf-page-bg);border-radius:2px;box-shadow:var(--sd-pdf-page-shadow);max-width:100%}.sd-preview-pdf-toolbar{position:absolute;bottom:20px;left:50%;transform:translate(-50%);display:flex;align-items:center;gap:2px;padding:5px 6px;background:var(--sd-pdf-toolbar-bg);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border:1px solid var(--sd-pdf-divider);border-radius:10px;box-shadow:0 8px 30px #0006;z-index:4;max-width:calc(100% - 32px);overflow-x:auto}.sd-preview-pdf-toolbar__btn{display:inline-flex;align-items:center;justify-content:center;gap:4px;min-width:30px;height:28px;padding:0 6px;background:transparent;border:none;color:var(--sd-pdf-fg);border-radius:6px;cursor:pointer;white-space:nowrap;flex-shrink:0;transition:background .12s,color .12s}.sd-preview-pdf-toolbar__btn mat-icon{font-size:18px;width:18px;height:18px}.sd-preview-pdf-toolbar__btn span{font-size:13px;font-weight:500}.sd-preview-pdf-toolbar__btn--with-label{padding:0 10px}.sd-preview-pdf-toolbar__btn--active{background:var(--sd-pdf-accent-soft);color:var(--sd-pdf-accent)}.sd-preview-pdf-toolbar__btn:hover:not(:disabled):not(.sd-preview-pdf-toolbar__btn--active){background:var(--sd-pdf-hover-bg)}.sd-preview-pdf-toolbar__btn:focus-visible{outline:2px solid var(--sd-pdf-accent);outline-offset:2px}.sd-preview-pdf-toolbar__btn:disabled{opacity:.35;cursor:not-allowed}.sd-preview-pdf-toolbar__page{display:inline-flex;align-items:center;gap:4px;padding:0 6px;flex-shrink:0}.sd-preview-pdf-toolbar__page-input{width:36px;height:24px;background:#ffffff14;border:1px solid rgba(255,255,255,.08);color:var(--sd-pdf-fg);border-radius:4px;text-align:center;font-size:13px;font-variant-numeric:tabular-nums;outline:none}.sd-preview-pdf-toolbar__page-input:focus{border-color:var(--sd-pdf-accent)}.sd-preview-pdf-toolbar__page-total{font-size:13px;color:var(--sd-pdf-fg-muted);font-variant-numeric:tabular-nums}.sd-preview-pdf-toolbar__zoom{min-width:56px;text-align:center;color:var(--sd-pdf-fg);font-size:13px;font-weight:500;font-variant-numeric:tabular-nums;background:#ffffff14;border-radius:4px;padding:2px 8px}.sd-preview-pdf-toolbar__divider{width:1px;height:20px;background:var(--sd-pdf-divider);margin:0 4px;flex-shrink:0}.sd-preview-pdf-status{margin:auto;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;text-align:center;padding:32px;max-width:420px}.sd-preview-pdf-status__tile{width:96px;height:96px;border-radius:24px;display:flex;align-items:center;justify-content:center;border:1px solid var(--sd-pdf-divider)}.sd-preview-pdf-status__tile mat-icon{font-size:48px;width:48px;height:48px}.sd-preview-pdf-status__tile--muted{background:#ffffff0d}.sd-preview-pdf-status__tile--muted mat-icon{color:var(--sd-pdf-fg-subtle)}.sd-preview-pdf-status__tile--danger{background:var(--sd-pdf-danger-soft);border-color:var(--sd-pdf-danger-border)}.sd-preview-pdf-status__tile--danger mat-icon{color:var(--sd-pdf-danger)}.sd-preview-pdf-status__title{font-size:16px;font-weight:500;color:var(--sd-pdf-fg)}.sd-preview-pdf-status__hint{font-size:13px;color:var(--sd-pdf-fg-muted);line-height:1.5}.sd-preview-pdf-status__actions{display:flex;gap:8px;margin-top:4px}.sd-preview-pdf-progress-pct{font-variant-numeric:tabular-nums;color:var(--sd-pdf-fg-muted)}.sd-preview-pdf-progress{width:240px;height:4px;background:#ffffff14;border-radius:999px;overflow:hidden}.sd-preview-pdf-progress__fill{height:100%;background:var(--sd-pdf-accent);transition:width .12s linear}.sd-preview-pdf-spinner{width:56px;height:56px;border-radius:999px;border:3px solid rgba(255,255,255,.08);border-top-color:var(--sd-pdf-accent);animation:sd-preview-pdf-spin .9s linear infinite}@keyframes sd-preview-pdf-spin{to{transform:rotate(360deg)}}@keyframes sd-preview-pdf-thumb-skel{0%{background-position:200% 0}to{background-position:-200% 0}}.sd-preview-pdf-search-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px}.sd-preview-pdf-search-result{width:100%;display:flex;align-items:flex-start;gap:8px;padding:8px 10px;background:#ffffff0a;border:1px solid transparent;border-radius:6px;color:var(--sd-pdf-fg);cursor:pointer;text-align:left;transition:background .12s,border-color .12s}.sd-preview-pdf-search-result:hover{background:#ffffff12}.sd-preview-pdf-search-result--active{background:var(--sd-pdf-accent-soft);border-color:#3b82f673}.sd-preview-pdf-search-result__snippet{flex:1 1 auto;font-size:12px;line-height:1.4;color:var(--sd-pdf-fg);word-break:break-word}.sd-preview-pdf-search-result__snippet mark{background:var(--sd-pdf-search-hi);color:#000;padding:0 2px;border-radius:2px}.sd-preview-pdf-search-result__page{flex:0 0 auto;font-size:11px;font-variant-numeric:tabular-nums;color:var(--sd-pdf-fg-muted);background:#ffffff0f;padding:2px 6px;border-radius:4px}.sd-preview-pdf-btn-primary{display:inline-flex;align-items:center;gap:6px;height:36px;padding:0 16px;background:var(--sd-pdf-accent);color:#fff;border:none;border-radius:8px;cursor:pointer;font-size:13px;font-weight:500;transition:filter .12s}.sd-preview-pdf-btn-primary mat-icon{font-size:18px;width:18px;height:18px}.sd-preview-pdf-btn-primary:hover{filter:brightness(1.1)}.sd-preview-pdf-btn-primary:focus-visible{outline:2px solid #fff;outline-offset:2px}.sd-preview-pdf-btn-secondary{display:inline-flex;align-items:center;gap:6px;height:36px;padding:0 16px;background:transparent;color:var(--sd-pdf-fg);border:1px solid var(--sd-pdf-divider);border-radius:8px;cursor:pointer;font-size:13px;font-weight:500;transition:background .12s}.sd-preview-pdf-btn-secondary mat-icon{font-size:18px;width:18px;height:18px}.sd-preview-pdf-btn-secondary:hover{background:#ffffff0f}.sd-preview-pdf-btn-secondary:focus-visible{outline:2px solid var(--sd-pdf-accent);outline-offset:2px}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { onKeyDown: [{
+                type: HostListener,
+                args: ['keydown', ['$event']]
+            }] } });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { SD_PDFJS_LIB, SdPreviewImage, SdPreviewPdf };
+//# sourceMappingURL=sdcorejs-angular-components-preview.mjs.map