@eternalheart/angular-file-preview 1.6.5

package/lib/fesm2022/eternalheart-angular-file-preview-eternalheart-angular-file-preview-index-CDjKPqyW-CmX5sdkL.mjs

@@ -0,0 +1,102 @@
+import * as i0 from '@angular/core';
+import { input, inject, signal, effect, untracked, ChangeDetectionStrategy, Component } from '@angular/core';
+import { DomSanitizer } from '@angular/platform-browser';
+import { L as LocaleService, R as RequestService, g as getFallbackTranslator, k as Tg } from './eternalheart-angular-file-preview-eternalheart-angular-file-preview-UobTf36G.mjs';
+import { R as RendererError } from './eternalheart-angular-file-preview-eternalheart-angular-file-preview-RendererError-DtNihCIX-DtNihCIX.mjs';
+
+class DocRenderer {
+    constructor() {
+        this.url = input.required();
+        this.locale = inject(LocaleService, { optional: true });
+        this.request = inject(RequestService, { optional: true });
+        this.sanitizer = inject(DomSanitizer);
+        this.t = this.locale?.t() ?? getFallbackTranslator();
+        this.html = signal('');
+        this.loading = signal(true);
+        this.error = signal(null);
+        this.getToolbarGroups = () => [];
+        effect(() => {
+            const newUrl = this.url();
+            if (newUrl) {
+                untracked(() => {
+                    void this.loadDoc();
+                });
+            }
+        });
+    }
+    trust(html) {
+        return this.sanitizer.bypassSecurityTrustHtml(html);
+    }
+    async loadDoc() {
+        this.loading.set(true);
+        this.error.set(null);
+        this.html.set('');
+        try {
+            const fetcher = this.request?.fetcher() ?? ((u, init) => fetch(u, init));
+            const response = await fetcher(this.url());
+            if (!response.ok)
+                throw new Error('load failed');
+            const buffer = await response.arrayBuffer();
+            this.html.set(await Tg(buffer));
+        }
+        catch (err) {
+            console.error('Doc 解析错误:', err);
+            this.error.set(this.t('doc.parse_failed'));
+        }
+        finally {
+            this.loading.set(false);
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: DocRenderer, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.25", type: DocRenderer, isStandalone: true, selector: "afp-doc-renderer", inputs: { url: { classPropertyName: "url", publicName: "url", isSignal: true, isRequired: true, transformFunction: null } }, host: { classAttribute: "afp-block afp-w-full afp-h-full" }, ngImport: i0, template: `
+    @if (loading()) {
+      <div class="afp-flex afp-items-center afp-justify-center afp-w-full afp-h-full">
+        <div
+          class="afp-w-12 afp-h-12 afp-border-4 afp-border-line-strong afp-border-t-spinner-head afp-rounded-full afp-animate-spin"
+        ></div>
+      </div>
+    } @else if (error()) {
+      <afp-renderer-error [message]="error()!" />
+    } @else {
+      <div class="afp-docx-container afp-w-full afp-h-full afp-overflow-auto afp-py-6 afp-px-4">
+        <div class="afp-flex afp-flex-col afp-items-center">
+          <div class="afp-legacy-doc-paper">
+            <div [innerHTML]="trust(html())"></div>
+          </div>
+        </div>
+      </div>
+    }
+  `, isInline: true, dependencies: [{ kind: "component", type: RendererError, selector: "afp-renderer-error", inputs: ["message", "detail", "showIcon"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: DocRenderer, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'afp-doc-renderer',
+                    standalone: true,
+                    imports: [RendererError],
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    host: { class: 'afp-block afp-w-full afp-h-full' },
+                    template: `
+    @if (loading()) {
+      <div class="afp-flex afp-items-center afp-justify-center afp-w-full afp-h-full">
+        <div
+          class="afp-w-12 afp-h-12 afp-border-4 afp-border-line-strong afp-border-t-spinner-head afp-rounded-full afp-animate-spin"
+        ></div>
+      </div>
+    } @else if (error()) {
+      <afp-renderer-error [message]="error()!" />
+    } @else {
+      <div class="afp-docx-container afp-w-full afp-h-full afp-overflow-auto afp-py-6 afp-px-4">
+        <div class="afp-flex afp-flex-col afp-items-center">
+          <div class="afp-legacy-doc-paper">
+            <div [innerHTML]="trust(html())"></div>
+          </div>
+        </div>
+      </div>
+    }
+  `,
+                }]
+        }], ctorParameters: () => [] });
+
+export { DocRenderer };
+//# sourceMappingURL=eternalheart-angular-file-preview-eternalheart-angular-file-preview-index-CDjKPqyW-CmX5sdkL.mjs.map

package/lib/fesm2022/eternalheart-angular-file-preview-eternalheart-angular-file-preview-index-CDjKPqyW-CmX5sdkL.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"eternalheart-angular-file-preview-eternalheart-angular-file-preview-index-CDjKPqyW-CmX5sdkL.mjs","sources":["../fesm2022/eternalheart-angular-file-preview-index-CDjKPqyW.mjs"],"sourcesContent":["import * as i0 from '@angular/core';\nimport { input, inject, signal, effect, untracked, ChangeDetectionStrategy, Component } from '@angular/core';\nimport { DomSanitizer } from '@angular/platform-browser';\nimport { L as LocaleService, R as RequestService, g as getFallbackTranslator } from './eternalheart-angular-file-preview-eternalheart-angular-file-preview-DXwNhxAB.mjs';\nimport { R as RendererError } from './eternalheart-angular-file-preview-RendererError-DtNihCIX.mjs';\nimport { renderLegacyDocHtml } from '@eternalheart/file-preview-core';\n\nclass DocRenderer {\n    constructor() {\n        this.url = input.required();\n        this.locale = inject(LocaleService, { optional: true });\n        this.request = inject(RequestService, { optional: true });\n        this.sanitizer = inject(DomSanitizer);\n        this.t = this.locale?.t() ?? getFallbackTranslator();\n        this.html = signal('');\n        this.loading = signal(true);\n        this.error = signal(null);\n        this.getToolbarGroups = () => [];\n        effect(() => {\n            const newUrl = this.url();\n            if (newUrl) {\n                untracked(() => {\n                    void this.loadDoc();\n                });\n            }\n        });\n    }\n    trust(html) {\n        return this.sanitizer.bypassSecurityTrustHtml(html);\n    }\n    async loadDoc() {\n        this.loading.set(true);\n        this.error.set(null);\n        this.html.set('');\n        try {\n            const fetcher = this.request?.fetcher() ?? ((u, init) => fetch(u, init));\n            const response = await fetcher(this.url());\n            if (!response.ok)\n                throw new Error('load failed');\n            const buffer = await response.arrayBuffer();\n            this.html.set(await renderLegacyDocHtml(buffer));\n        }\n        catch (err) {\n            console.error('Doc 解析错误:', err);\n            this.error.set(this.t('doc.parse_failed'));\n        }\n        finally {\n            this.loading.set(false);\n        }\n    }\n    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: \"12.0.0\", version: \"19.2.25\", ngImport: i0, type: DocRenderer, deps: [], target: i0.ɵɵFactoryTarget.Component }); }\n    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: \"17.0.0\", version: \"19.2.25\", type: DocRenderer, isStandalone: true, selector: \"afp-doc-renderer\", inputs: { url: { classPropertyName: \"url\", publicName: \"url\", isSignal: true, isRequired: true, transformFunction: null } }, host: { classAttribute: \"afp-block afp-w-full afp-h-full\" }, ngImport: i0, template: `\n    @if (loading()) {\n      <div class=\"afp-flex afp-items-center afp-justify-center afp-w-full afp-h-full\">\n        <div\n          class=\"afp-w-12 afp-h-12 afp-border-4 afp-border-line-strong afp-border-t-spinner-head afp-rounded-full afp-animate-spin\"\n        ></div>\n      </div>\n    } @else if (error()) {\n      <afp-renderer-error [message]=\"error()!\" />\n    } @else {\n      <div class=\"afp-docx-container afp-w-full afp-h-full afp-overflow-auto afp-py-6 afp-px-4\">\n        <div class=\"afp-flex afp-flex-col afp-items-center\">\n          <div class=\"afp-legacy-doc-paper\">\n            <div [innerHTML]=\"trust(html())\"></div>\n          </div>\n        </div>\n      </div>\n    }\n  `, isInline: true, dependencies: [{ kind: \"component\", type: RendererError, selector: \"afp-renderer-error\", inputs: [\"message\", \"detail\", \"showIcon\"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }\n}\ni0.ɵɵngDeclareClassMetadata({ minVersion: \"12.0.0\", version: \"19.2.25\", ngImport: i0, type: DocRenderer, decorators: [{\n            type: Component,\n            args: [{\n                    selector: 'afp-doc-renderer',\n                    standalone: true,\n                    imports: [RendererError],\n                    changeDetection: ChangeDetectionStrategy.OnPush,\n                    host: { class: 'afp-block afp-w-full afp-h-full' },\n                    template: `\n    @if (loading()) {\n      <div class=\"afp-flex afp-items-center afp-justify-center afp-w-full afp-h-full\">\n        <div\n          class=\"afp-w-12 afp-h-12 afp-border-4 afp-border-line-strong afp-border-t-spinner-head afp-rounded-full afp-animate-spin\"\n        ></div>\n      </div>\n    } @else if (error()) {\n      <afp-renderer-error [message]=\"error()!\" />\n    } @else {\n      <div class=\"afp-docx-container afp-w-full afp-h-full afp-overflow-auto afp-py-6 afp-px-4\">\n        <div class=\"afp-flex afp-flex-col afp-items-center\">\n          <div class=\"afp-legacy-doc-paper\">\n            <div [innerHTML]=\"trust(html())\"></div>\n          </div>\n        </div>\n      </div>\n    }\n  `,\n                }]\n        }], ctorParameters: () => [] });\n\nexport { DocRenderer };\n//# sourceMappingURL=eternalheart-angular-file-preview-index-CDjKPqyW.mjs.map\n"],"names":["renderLegacyDocHtml"],"mappings":"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"}

package/lib/fesm2022/eternalheart-angular-file-preview-eternalheart-angular-file-preview-index-CHi9tOe0-NOeQYAnM.mjs

@@ -0,0 +1,516 @@
+import * as i0 from '@angular/core';
+import { input, inject, viewChild, signal, afterNextRender, effect, untracked, DestroyRef, output, ChangeDetectionStrategy, Component } from '@angular/core';
+import * as i1 from 'lucide-angular';
+import { X, List, ChevronLeft, ChevronRight, Minimize2, Maximize2, LucideAngularModule } from 'lucide-angular';
+import 'foliate-js/view.js';
+import { L as LocaleService, R as RequestService, g as getFallbackTranslator } from './eternalheart-angular-file-preview-eternalheart-angular-file-preview-UobTf36G.mjs';
+import { R as RendererError } from './eternalheart-angular-file-preview-eternalheart-angular-file-preview-RendererError-DtNihCIX-DtNihCIX.mjs';
+import { T as ToolbarEventEmitter } from './eternalheart-angular-file-preview-eternalheart-angular-file-preview-base.types-D5x7QPey-D5x7QPey.mjs';
+
+const READER_CSS = `
+  @namespace epub "http://www.idpf.org/2007/ops";
+  html { color-scheme: light; }
+  body {
+    background: #ffffff !important;
+    color: #1a1a1a !important;
+    font-family: "Noto Serif SC", "Source Han Serif SC", Georgia, "Times New Roman", serif !important;
+    font-size: 16px !important;
+    line-height: 2 !important;
+    max-width: 100% !important;
+    box-sizing: border-box !important;
+    word-break: break-word !important;
+    overflow-wrap: break-word !important;
+  }
+  p, li, blockquote, dd { line-height: 2; text-align: justify; }
+  p { text-indent: 2em; margin: 0.8em 0; }
+  h1 { text-align: center; margin: 1.5em 0 1em; }
+  h2 { margin: 1.2em 0 0.8em; }
+  h3 { margin: 1em 0 0.6em; }
+  img { max-width: 100% !important; height: auto !important; }
+  a { color: #2563eb; text-decoration: none; }
+  pre { white-space: pre-wrap !important; }
+`;
+const A4_WIDTH = 794;
+const INITIAL_RENDER_TIMEOUT_MS = 10_000;
+async function renderInitialPage(renderer) {
+    const nextPromise = renderer.next?.();
+    if (!nextPromise)
+        return;
+    let timer;
+    try {
+        await Promise.race([
+            nextPromise,
+            new Promise((_, reject) => {
+                timer = window.setTimeout(() => reject(new Error('MOBI initial render timed out')), INITIAL_RENDER_TIMEOUT_MS);
+            }),
+        ]);
+    }
+    finally {
+        if (timer !== undefined)
+            window.clearTimeout(timer);
+    }
+}
+class MobiTocList {
+    constructor() {
+        this.items = input.required();
+        this.activeHref = input('');
+        this.depth = input(0);
+        this.select = output();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: MobiTocList, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.25", type: MobiTocList, isStandalone: true, selector: "afp-mobi-toc-list", inputs: { items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: true, transformFunction: null }, activeHref: { classPropertyName: "activeHref", publicName: "activeHref", isSignal: true, isRequired: false, transformFunction: null }, depth: { classPropertyName: "depth", publicName: "depth", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { select: "select" }, ngImport: i0, template: `
+    <ul [style.listStyle]="'none'" [style.padding]="'0'" [style.margin]="depth() > 0 ? '0 0 0 16px' : '0'">
+      @for (item of items(); track (item.href ?? item.label) + '-' + $index) {
+        <li>
+          @if (item.href) {
+            <button
+              type="button"
+              class="afp-w-full afp-text-left afp-py-2 afp-px-3 afp-text-sm afp-rounded afp-transition-all afp-truncate"
+              [class.afp-text-fg-primary]="activeHref() === item.href"
+              [class.afp-bg-surface-3]="activeHref() === item.href"
+              [class.afp-font-medium]="activeHref() === item.href"
+              [class.afp-text-fg-secondary]="activeHref() !== item.href"
+              [class.hover:afp-text-fg-primary]="activeHref() !== item.href"
+              [class.hover:afp-bg-surface-2]="activeHref() !== item.href"
+              [title]="item.label"
+              style="background: none; border: none; cursor: pointer"
+              (click)="select.emit(item.href)"
+            >
+              {{ item.label?.trim() }}
+            </button>
+          } @else {
+            <div class="afp-w-full afp-py-2 afp-px-3 afp-text-sm afp-text-fg-tertiary afp-truncate">
+              {{ item.label?.trim() }}
+            </div>
+          }
+          @if (item.subitems?.length) {
+            <afp-mobi-toc-list
+              [items]="item.subitems!"
+              [activeHref]="activeHref()"
+              [depth]="depth() + 1"
+              (select)="select.emit($event)"
+            />
+          }
+        </li>
+      }
+    </ul>
+  `, isInline: true, dependencies: [{ kind: "component", type: MobiTocList, selector: "afp-mobi-toc-list", inputs: ["items", "activeHref", "depth"], outputs: ["select"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: MobiTocList, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'afp-mobi-toc-list',
+                    standalone: true,
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    template: `
+    <ul [style.listStyle]="'none'" [style.padding]="'0'" [style.margin]="depth() > 0 ? '0 0 0 16px' : '0'">
+      @for (item of items(); track (item.href ?? item.label) + '-' + $index) {
+        <li>
+          @if (item.href) {
+            <button
+              type="button"
+              class="afp-w-full afp-text-left afp-py-2 afp-px-3 afp-text-sm afp-rounded afp-transition-all afp-truncate"
+              [class.afp-text-fg-primary]="activeHref() === item.href"
+              [class.afp-bg-surface-3]="activeHref() === item.href"
+              [class.afp-font-medium]="activeHref() === item.href"
+              [class.afp-text-fg-secondary]="activeHref() !== item.href"
+              [class.hover:afp-text-fg-primary]="activeHref() !== item.href"
+              [class.hover:afp-bg-surface-2]="activeHref() !== item.href"
+              [title]="item.label"
+              style="background: none; border: none; cursor: pointer"
+              (click)="select.emit(item.href)"
+            >
+              {{ item.label?.trim() }}
+            </button>
+          } @else {
+            <div class="afp-w-full afp-py-2 afp-px-3 afp-text-sm afp-text-fg-tertiary afp-truncate">
+              {{ item.label?.trim() }}
+            </div>
+          }
+          @if (item.subitems?.length) {
+            <afp-mobi-toc-list
+              [items]="item.subitems!"
+              [activeHref]="activeHref()"
+              [depth]="depth() + 1"
+              (select)="select.emit($event)"
+            />
+          }
+        </li>
+      }
+    </ul>
+  `,
+                }]
+        }] });
+class MobiRenderer {
+    constructor() {
+        this.url = input.required();
+        this.emitter = new ToolbarEventEmitter();
+        this.locale = inject(LocaleService, { optional: true });
+        this.request = inject(RequestService, { optional: true });
+        this.t = this.locale?.t() ?? getFallbackTranslator();
+        this.host = viewChild('hostRef');
+        this.xIcon = X;
+        this.a4Width = A4_WIDTH;
+        this.currentChapter = signal(1);
+        this.totalChapters = signal(1);
+        this.loading = signal(false);
+        this.error = signal(null);
+        this.toc = signal([]);
+        this.showToc = signal(false);
+        this.activeTocHref = signal('');
+        this.isFullWidth = signal(false);
+        this.mounted = signal(false);
+        this.viewInstance = null;
+        this.totalLocations = 1;
+        this.getToolbarGroups = () => [
+            {
+                items: [
+                    {
+                        type: 'button',
+                        icon: List,
+                        tooltip: this.t('toolbar.toc'),
+                        action: () => this.toggleToc(),
+                        disabled: this.toc().length === 0,
+                        active: this.showToc(),
+                    },
+                ],
+            },
+            {
+                items: [
+                    {
+                        type: 'button',
+                        icon: ChevronLeft,
+                        tooltip: this.t('toolbar.prev_page'),
+                        action: () => this.prevPage(),
+                        disabled: this.currentChapter() <= 1,
+                    },
+                    {
+                        type: 'text',
+                        content: `${this.currentChapter()} / ${this.totalChapters()}`,
+                        minWidth: '4rem',
+                    },
+                    {
+                        type: 'button',
+                        icon: ChevronRight,
+                        tooltip: this.t('toolbar.next_page'),
+                        action: () => this.nextPage(),
+                        disabled: this.currentChapter() >= this.totalChapters(),
+                    },
+                ],
+            },
+            {
+                items: [
+                    {
+                        type: 'button',
+                        icon: this.isFullWidth() ? Minimize2 : Maximize2,
+                        tooltip: this.isFullWidth() ? this.t('toolbar.normal_width') : this.t('toolbar.full_width'),
+                        action: () => this.toggleFullWidth(),
+                        active: this.isFullWidth(),
+                    },
+                ],
+            },
+        ];
+        this.onToolbarChange = (listener) => this.emitter.subscribe(listener);
+        afterNextRender(() => this.mounted.set(true));
+        effect(() => {
+            const url = this.url();
+            const mounted = this.mounted();
+            if (!mounted || !url)
+                return;
+            untracked(() => { void this.load(); });
+        });
+        effect(() => {
+            this.currentChapter();
+            this.totalChapters();
+            this.isFullWidth();
+            this.showToc();
+            this.loading();
+            this.toc().length;
+            this.emitter.notify();
+        });
+        const paginatorErrorHandler = (e) => {
+            if (e.filename?.includes('paginator')) {
+                e.preventDefault();
+            }
+        };
+        window.addEventListener('error', paginatorErrorHandler);
+        inject(DestroyRef).onDestroy(() => {
+            window.removeEventListener('error', paginatorErrorHandler);
+            try {
+                this.viewInstance?.close?.();
+            }
+            catch { /* ignore */ }
+            try {
+                this.viewInstance?.book?.destroy?.();
+            }
+            catch { /* ignore */ }
+            this.viewInstance = null;
+            this.host()?.nativeElement?.replaceChildren();
+        });
+    }
+    handleTocClick(href) {
+        this.activeTocHref.set(href);
+        this.showToc.set(false);
+        this.viewInstance?.goTo(href).catch(() => { });
+    }
+    prevPage() {
+        this.viewInstance?.prev().catch(() => { });
+    }
+    nextPage() {
+        this.viewInstance?.next().catch(() => { });
+    }
+    toggleToc() {
+        this.showToc.update((v) => !v);
+    }
+    toggleFullWidth() {
+        this.isFullWidth.update((v) => !v);
+        if (this.viewInstance?.renderer) {
+            this.viewInstance.renderer.setAttribute('max-inline-size', this.isFullWidth() ? '9999' : '720');
+        }
+    }
+    reportProgress(current, total) {
+        if (Number.isFinite(total) && total > 0)
+            this.totalLocations = total;
+        const safeCurrent = Number.isFinite(current) ? current : 0;
+        this.currentChapter.set(Math.max(1, safeCurrent + 1));
+        this.totalChapters.set(this.totalLocations);
+    }
+    async load() {
+        const host = this.host()?.nativeElement;
+        if (!host)
+            return;
+        this.loading.set(true);
+        this.error.set(null);
+        this.toc.set([]);
+        this.showToc.set(false);
+        this.activeTocHref.set('');
+        this.totalLocations = 1;
+        this.currentChapter.set(1);
+        this.totalChapters.set(1);
+        host.replaceChildren();
+        this.viewInstance = null;
+        let progressReported = false;
+        const sectionPagesMap = new Map();
+        try {
+            const view = document.createElement('foliate-view');
+            host.appendChild(view);
+            this.viewInstance = view;
+            view.addEventListener('relocate', (e) => {
+                const detail = e.detail;
+                if (!detail)
+                    return;
+                const sectionCount = this.viewInstance?.book?.sections.length ?? 0;
+                const renderer = this.viewInstance?.renderer;
+                const sectionIdx = renderer?.getContents?.()[0]?.index ?? -1;
+                if (renderer
+                    && typeof renderer.page === 'number'
+                    && Number.isFinite(renderer.page)
+                    && typeof renderer.pages === 'number'
+                    && Number.isFinite(renderer.pages)
+                    && renderer.pages > 2
+                    && sectionIdx >= 0) {
+                    progressReported = true;
+                    const curSectionPages = renderer.pages - 2;
+                    sectionPagesMap.set(sectionIdx, curSectionPages);
+                    let pagesBefore = 0;
+                    for (let i = 0; i < sectionIdx; i++) {
+                        pagesBefore += sectionPagesMap.get(i) ?? 0;
+                    }
+                    const currentPage = pagesBefore + Math.min(curSectionPages, Math.max(1, renderer.page));
+                    const atEnd = (detail.fraction ?? 0) >= 0.999;
+                    let total;
+                    if (sectionCount === 1) {
+                        total = curSectionPages;
+                    }
+                    else if (atEnd) {
+                        total = currentPage;
+                    }
+                    else {
+                        const sections = this.viewInstance?.book?.sections ?? [];
+                        const curSize = sections[sectionIdx]?.size ?? 0;
+                        const ratio = curSize > 0 ? curSectionPages / curSize : 0;
+                        let est = 0;
+                        for (let i = 0; i < sectionCount; i++) {
+                            if (sectionPagesMap.has(i)) {
+                                est += sectionPagesMap.get(i);
+                            }
+                            else {
+                                const s = sections[i]?.size ?? 0;
+                                est += Math.max(1, Math.round(s * ratio));
+                            }
+                        }
+                        total = Math.max(currentPage, est);
+                    }
+                    this.reportProgress(currentPage - 1, total);
+                    const tocItem = detail.tocItem;
+                    if (tocItem?.href)
+                        this.activeTocHref.set(tocItem.href);
+                    return;
+                }
+                const loc = detail.location;
+                if (loc
+                    && typeof loc.current === 'number'
+                    && Number.isFinite(loc.current)
+                    && typeof loc.total === 'number'
+                    && Number.isFinite(loc.total)) {
+                    progressReported = true;
+                    const atEnd = (detail.fraction ?? 0) >= 0.999;
+                    const actualTotal = atEnd ? loc.current + 1 : loc.total;
+                    this.reportProgress(loc.current, actualTotal);
+                }
+                else {
+                    const sections = this.viewInstance?.book?.sections ?? [];
+                    const idx = detail.index ?? 0;
+                    const frac = detail.fraction ?? 0;
+                    const total = Math.max(sections.length, 1);
+                    this.reportProgress(Math.round((idx + frac) / total * total), total);
+                }
+                const tocItem = detail.tocItem;
+                if (tocItem?.href)
+                    this.activeTocHref.set(tocItem.href);
+            });
+            const fetcher = this.request?.fetcher() ?? ((u, init) => fetch(u, init));
+            const res = await fetcher(this.url());
+            if (!res.ok)
+                throw new Error(`请求失败: ${res.status}`);
+            const blob = await res.blob();
+            let name = 'book.mobi';
+            try {
+                const u = new URL(this.url(), window.location.href);
+                const base = u.pathname.split('/').pop();
+                if (base)
+                    name = decodeURIComponent(base);
+            }
+            catch { /* blob: URL */ }
+            await view.open(new File([blob], name));
+            const renderer = view.renderer;
+            if (renderer) {
+                renderer.setAttribute('animated', '');
+                renderer.setAttribute('max-inline-size', '720');
+                renderer.setAttribute('margin', '48');
+                renderer.setAttribute('gap', '5%');
+                await renderInitialPage(renderer);
+                renderer.setStyles?.(READER_CSS);
+            }
+            this.toc.set((view.book?.toc ?? []));
+            this.loading.set(false);
+            if (!progressReported) {
+                this.reportProgress(0, view.book?.sections.length ?? 1);
+            }
+        }
+        catch (err) {
+            console.error('MOBI/AZW3 加载错误:', err);
+            this.error.set(this.t('mobi.load_failed'));
+            this.loading.set(false);
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: MobiRenderer, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.25", type: MobiRenderer, isStandalone: true, selector: "afp-mobi-renderer", inputs: { url: { classPropertyName: "url", publicName: "url", isSignal: true, isRequired: true, transformFunction: null } }, host: { classAttribute: "afp-block afp-w-full afp-h-full" }, viewQueries: [{ propertyName: "host", first: true, predicate: ["hostRef"], descendants: true, isSignal: true }], ngImport: i0, template: `
+    <div class="afp-relative afp-w-full afp-h-full afp-flex afp-justify-center afp-bg-surface-1 afp-overflow-hidden">
+      @if (error()) {
+        <afp-renderer-error [message]="error()!" class="afp-absolute afp-inset-0" />
+      }
+
+      @if (loading() && !error()) {
+        <div class="afp-absolute afp-inset-0 afp-flex afp-items-center afp-justify-center afp-z-10">
+          <div class="afp-w-12 afp-h-12 afp-border-4 afp-border-line-strong afp-border-t-spinner-head afp-rounded-full afp-animate-spin"></div>
+        </div>
+      }
+
+      @if (toc().length > 0) {
+        <div
+          class="afp-absolute afp-inset-0 afp-z-20 afp-flex afp-transition-opacity afp-duration-300"
+          [style.opacity]="showToc() ? 1 : 0"
+          [style.pointerEvents]="showToc() ? 'auto' : 'none'"
+        >
+          <div
+            class="afp-w-72 afp-max-w-[80%] afp-h-full afp-bg-surface-overlay afp-backdrop-blur-xl afp-border-r afp-border-line-weak afp-flex afp-flex-col afp-shadow-2xl afp-transition-transform afp-duration-300"
+            [style.transform]="showToc() ? 'translateX(0)' : 'translateX(-100%)'"
+          >
+            <div class="afp-flex afp-items-center afp-justify-between afp-px-4 afp-py-3 afp-border-b afp-border-line-weak afp-flex-shrink-0">
+              <span class="afp-text-fg-primary afp-font-medium afp-text-sm">{{ t('toolbar.toc') }}</span>
+              <button type="button" class="toc-close-btn" (click)="showToc.set(false)">
+                <i-lucide [img]="xIcon" class="afp-w-4 afp-h-4" />
+              </button>
+            </div>
+            <div class="afp-flex-1 afp-overflow-y-auto afp-py-4 afp-px-1">
+              <afp-mobi-toc-list [items]="toc()" [activeHref]="activeTocHref()" (select)="handleTocClick($event)" />
+            </div>
+          </div>
+          <div
+            class="afp-flex-1 afp-transition-opacity afp-duration-300"
+            [style.background]="showToc() ? 'rgba(0,0,0,0.3)' : 'transparent'"
+            (click)="showToc.set(false)"
+          ></div>
+        </div>
+      }
+
+      @if (!error()) {
+        <div
+          #hostRef
+          class="afp-h-full afp-bg-surface-toolbar afp-shadow-lg"
+          [style.width]="isFullWidth() ? '100%' : a4Width + 'px'"
+          [style.maxWidth]="'100%'"
+          [style.transition]="'width 0.3s ease'"
+        ></div>
+      }
+    </div>
+  `, isInline: true, styles: [".toc-close-btn{color:var(--fp-fg-tertiary);background:none;border:none;cursor:pointer;transition:color .15s}.toc-close-btn:hover{color:var(--fp-fg-primary)}\n"], dependencies: [{ kind: "component", type: RendererError, selector: "afp-renderer-error", inputs: ["message", "detail", "showIcon"] }, { kind: "ngmodule", type: LucideAngularModule }, { kind: "component", type: i1.LucideAngularComponent, selector: "lucide-angular, lucide-icon, i-lucide, span-lucide", inputs: ["class", "name", "img", "color", "absoluteStrokeWidth", "size", "strokeWidth"] }, { kind: "component", type: MobiTocList, selector: "afp-mobi-toc-list", inputs: ["items", "activeHref", "depth"], outputs: ["select"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: MobiRenderer, decorators: [{
+            type: Component,
+            args: [{ selector: 'afp-mobi-renderer', standalone: true, imports: [RendererError, LucideAngularModule, MobiTocList], changeDetection: ChangeDetectionStrategy.OnPush, host: { class: 'afp-block afp-w-full afp-h-full' }, template: `
+    <div class="afp-relative afp-w-full afp-h-full afp-flex afp-justify-center afp-bg-surface-1 afp-overflow-hidden">
+      @if (error()) {
+        <afp-renderer-error [message]="error()!" class="afp-absolute afp-inset-0" />
+      }
+
+      @if (loading() && !error()) {
+        <div class="afp-absolute afp-inset-0 afp-flex afp-items-center afp-justify-center afp-z-10">
+          <div class="afp-w-12 afp-h-12 afp-border-4 afp-border-line-strong afp-border-t-spinner-head afp-rounded-full afp-animate-spin"></div>
+        </div>
+      }
+
+      @if (toc().length > 0) {
+        <div
+          class="afp-absolute afp-inset-0 afp-z-20 afp-flex afp-transition-opacity afp-duration-300"
+          [style.opacity]="showToc() ? 1 : 0"
+          [style.pointerEvents]="showToc() ? 'auto' : 'none'"
+        >
+          <div
+            class="afp-w-72 afp-max-w-[80%] afp-h-full afp-bg-surface-overlay afp-backdrop-blur-xl afp-border-r afp-border-line-weak afp-flex afp-flex-col afp-shadow-2xl afp-transition-transform afp-duration-300"
+            [style.transform]="showToc() ? 'translateX(0)' : 'translateX(-100%)'"
+          >
+            <div class="afp-flex afp-items-center afp-justify-between afp-px-4 afp-py-3 afp-border-b afp-border-line-weak afp-flex-shrink-0">
+              <span class="afp-text-fg-primary afp-font-medium afp-text-sm">{{ t('toolbar.toc') }}</span>
+              <button type="button" class="toc-close-btn" (click)="showToc.set(false)">
+                <i-lucide [img]="xIcon" class="afp-w-4 afp-h-4" />
+              </button>
+            </div>
+            <div class="afp-flex-1 afp-overflow-y-auto afp-py-4 afp-px-1">
+              <afp-mobi-toc-list [items]="toc()" [activeHref]="activeTocHref()" (select)="handleTocClick($event)" />
+            </div>
+          </div>
+          <div
+            class="afp-flex-1 afp-transition-opacity afp-duration-300"
+            [style.background]="showToc() ? 'rgba(0,0,0,0.3)' : 'transparent'"
+            (click)="showToc.set(false)"
+          ></div>
+        </div>
+      }
+
+      @if (!error()) {
+        <div
+          #hostRef
+          class="afp-h-full afp-bg-surface-toolbar afp-shadow-lg"
+          [style.width]="isFullWidth() ? '100%' : a4Width + 'px'"
+          [style.maxWidth]="'100%'"
+          [style.transition]="'width 0.3s ease'"
+        ></div>
+      }
+    </div>
+  `, styles: [".toc-close-btn{color:var(--fp-fg-tertiary);background:none;border:none;cursor:pointer;transition:color .15s}.toc-close-btn:hover{color:var(--fp-fg-primary)}\n"] }]
+        }], ctorParameters: () => [] });
+
+export { MobiRenderer, MobiTocList };
+//# sourceMappingURL=eternalheart-angular-file-preview-eternalheart-angular-file-preview-index-CHi9tOe0-NOeQYAnM.mjs.map