@eternalheart/angular-file-preview 1.6.5

package/lib/fesm2022/eternalheart-angular-file-preview-eternalheart-angular-file-preview-index-BGqTRZbm-CAOLRw20.mjs

@@ -0,0 +1,688 @@
+import * as i0 from '@angular/core';
+import { input, inject, viewChild, signal, computed, effect, untracked, DestroyRef, output, ChangeDetectionStrategy, Component } from '@angular/core';
+import { L as LocaleService, R as RequestService, g as getFallbackTranslator, d as jM, w as wg, f as ZI, I as Ig, K as Kg, F as FilePreviewContent, a as R0, V as V0 } 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';
+import * as i1 from 'lucide-angular';
+import { ChevronRight, Folder, FolderOpen, FileImage, FileText, FileCode, File, LucideAngularModule } from 'lucide-angular';
+
+class ResizableSplit {
+    constructor() {
+        this.initialLeftWidth = input(280);
+        this.minLeftWidth = input(160);
+        this.maxLeftWidth = input(640);
+        this.minRightWidth = input(200);
+        this.storageKey = input(undefined);
+        this.desktopMedia = input('(min-width: 768px)');
+        this.mobileTabMode = input(false);
+        this.leftTabLabel = input('文件树');
+        this.rightTabLabel = input('预览');
+        this.container = viewChild('containerRef');
+        this.destroyRef = inject(DestroyRef);
+        this.leftWidth = signal(280);
+        this.dragging = signal(false);
+        this.isDesktop = signal(false);
+        this.activeTab = signal('left');
+        this.isMobileTab = computed(() => this.mobileTabMode() && !this.isDesktop());
+        this.leftStyle = computed(() => this.isDesktop() ? { width: `${this.leftWidth()}px` } : undefined);
+        this.leftPaneClass = computed(() => this.isMobileTab()
+            ? 'afp-flex-1 afp-min-h-0 afp-min-w-0 afp-w-full afp-overflow-hidden'
+            : 'afp-min-h-0 afp-min-w-0 afp-flex-shrink-0 afp-w-full afp-max-h-60 md:afp-h-full md:afp-max-h-none');
+        this.rightPaneClass = computed(() => this.isMobileTab()
+            ? 'afp-flex-1 afp-min-h-0 afp-min-w-0 afp-w-full afp-overflow-hidden'
+            : 'afp-flex-1 afp-min-w-0 afp-min-h-0 afp-overflow-hidden');
+        this.storageApplied = false;
+        this.onMove = (e) => {
+            const el = this.container()?.nativeElement;
+            if (!el)
+                return;
+            const rect = el.getBoundingClientRect();
+            const x = e.clientX - rect.left;
+            const cap = rect.width - this.minRightWidth() - 6;
+            const effectiveMax = Math.min(this.maxLeftWidth(), cap);
+            this.leftWidth.set(Math.max(this.minLeftWidth(), Math.min(effectiveMax, x)));
+        };
+        this.onUp = () => {
+            if (!this.dragging())
+                return;
+            this.dragging.set(false);
+            window.removeEventListener('mousemove', this.onMove);
+            window.removeEventListener('mouseup', this.onUp);
+            document.body.style.cursor = '';
+            document.body.style.userSelect = '';
+            const key = this.storageKey();
+            if (key) {
+                try {
+                    window.localStorage.setItem(key, String(this.leftWidth()));
+                }
+                catch {
+                    /* ignore */
+                }
+            }
+        };
+        effect(() => {
+            const key = this.storageKey();
+            const initial = this.initialLeftWidth();
+            if (!this.storageApplied) {
+                this.storageApplied = true;
+                if (key && typeof window !== 'undefined') {
+                    const saved = Number(window.localStorage.getItem(key));
+                    if (!isNaN(saved) && saved > 0) {
+                        this.leftWidth.set(saved);
+                        return;
+                    }
+                }
+                this.leftWidth.set(initial);
+                return;
+            }
+            if (!key)
+                this.leftWidth.set(initial);
+        });
+        effect((onCleanup) => {
+            const media = this.desktopMedia();
+            if (typeof window === 'undefined')
+                return;
+            const mq = window.matchMedia(media);
+            const handler = () => {
+                this.isDesktop.set(mq.matches);
+            };
+            handler();
+            mq.addEventListener('change', handler);
+            onCleanup(() => mq.removeEventListener('change', handler));
+        });
+        this.destroyRef.onDestroy(() => {
+            window.removeEventListener('mousemove', this.onMove);
+            window.removeEventListener('mouseup', this.onUp);
+            if (this.dragging()) {
+                document.body.style.cursor = '';
+                document.body.style.userSelect = '';
+            }
+        });
+    }
+    switchTab(tab) {
+        this.activeTab.set(tab);
+    }
+    onDividerDown(e) {
+        e.preventDefault();
+        this.dragging.set(true);
+        window.addEventListener('mousemove', this.onMove);
+        window.addEventListener('mouseup', this.onUp);
+        document.body.style.cursor = 'col-resize';
+        document.body.style.userSelect = 'none';
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: ResizableSplit, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.25", type: ResizableSplit, isStandalone: true, selector: "afp-resizable-split", inputs: { initialLeftWidth: { classPropertyName: "initialLeftWidth", publicName: "initialLeftWidth", isSignal: true, isRequired: false, transformFunction: null }, minLeftWidth: { classPropertyName: "minLeftWidth", publicName: "minLeftWidth", isSignal: true, isRequired: false, transformFunction: null }, maxLeftWidth: { classPropertyName: "maxLeftWidth", publicName: "maxLeftWidth", isSignal: true, isRequired: false, transformFunction: null }, minRightWidth: { classPropertyName: "minRightWidth", publicName: "minRightWidth", isSignal: true, isRequired: false, transformFunction: null }, storageKey: { classPropertyName: "storageKey", publicName: "storageKey", isSignal: true, isRequired: false, transformFunction: null }, desktopMedia: { classPropertyName: "desktopMedia", publicName: "desktopMedia", isSignal: true, isRequired: false, transformFunction: null }, mobileTabMode: { classPropertyName: "mobileTabMode", publicName: "mobileTabMode", isSignal: true, isRequired: false, transformFunction: null }, leftTabLabel: { classPropertyName: "leftTabLabel", publicName: "leftTabLabel", isSignal: true, isRequired: false, transformFunction: null }, rightTabLabel: { classPropertyName: "rightTabLabel", publicName: "rightTabLabel", isSignal: true, isRequired: false, transformFunction: null } }, viewQueries: [{ propertyName: "container", first: true, predicate: ["containerRef"], descendants: true, isSignal: true }], ngImport: i0, template: `
+    <div
+      #containerRef
+      class="afp-w-full afp-h-full afp-flex afp-flex-col md:afp-flex-row afp-min-h-0 afp-min-w-0"
+    >
+      @if (isMobileTab()) {
+        <div class="afp-flex afp-flex-shrink-0 afp-border-b afp-border-line-weak afp-bg-surface-toolbar">
+          <button
+            type="button"
+            class="afp-flex-1 afp-py-2.5 afp-text-sm afp-transition-colors"
+            [class.afp-text-fg-primary]="activeTab() === 'left'"
+            [class.afp-border-b-2]="activeTab() === 'left'"
+            [class.afp-border-fg-primary]="activeTab() === 'left'"
+            [class.-afp-mb-px]="activeTab() === 'left'"
+            [class.afp-text-fg-secondary]="activeTab() !== 'left'"
+            (click)="switchTab('left')"
+          >
+            {{ leftTabLabel() }}
+          </button>
+          <button
+            type="button"
+            class="afp-flex-1 afp-py-2.5 afp-text-sm afp-transition-colors"
+            [class.afp-text-fg-primary]="activeTab() === 'right'"
+            [class.afp-border-b-2]="activeTab() === 'right'"
+            [class.afp-border-fg-primary]="activeTab() === 'right'"
+            [class.-afp-mb-px]="activeTab() === 'right'"
+            [class.afp-text-fg-secondary]="activeTab() !== 'right'"
+            (click)="switchTab('right')"
+          >
+            {{ rightTabLabel() }}
+          </button>
+        </div>
+      }
+      <div
+        [class]="leftPaneClass()"
+        [style]="isMobileTab() ? null : leftStyle()"
+        [hidden]="isMobileTab() && activeTab() !== 'left'"
+      >
+        <ng-content select="[splitLeft]" />
+      </div>
+      @if (!isMobileTab()) {
+        <div
+          role="separator"
+          aria-orientation="vertical"
+          class="split-divider afp-hidden md:afp-block afp-relative afp-w-1.5 afp-flex-shrink-0 afp-cursor-col-resize afp-transition-colors"
+          [class.dragging]="dragging()"
+          (mousedown)="onDividerDown($event)"
+        >
+          <span class="afp-absolute afp-inset-y-0 hit-area"></span>
+        </div>
+      }
+      <div
+        [class]="rightPaneClass()"
+        [hidden]="isMobileTab() && activeTab() !== 'right'"
+      >
+        <ng-content select="[splitRight]" />
+      </div>
+    </div>
+  `, isInline: true, styles: [":host{display:block;width:100%;height:100%}.split-divider{background:var(--fp-line-weak)}.split-divider:hover{background:var(--fp-line)}.split-divider.dragging{background:var(--fp-line-strong)}.hit-area{left:-4px;right:-4px}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: ResizableSplit, decorators: [{
+            type: Component,
+            args: [{ selector: 'afp-resizable-split', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, template: `
+    <div
+      #containerRef
+      class="afp-w-full afp-h-full afp-flex afp-flex-col md:afp-flex-row afp-min-h-0 afp-min-w-0"
+    >
+      @if (isMobileTab()) {
+        <div class="afp-flex afp-flex-shrink-0 afp-border-b afp-border-line-weak afp-bg-surface-toolbar">
+          <button
+            type="button"
+            class="afp-flex-1 afp-py-2.5 afp-text-sm afp-transition-colors"
+            [class.afp-text-fg-primary]="activeTab() === 'left'"
+            [class.afp-border-b-2]="activeTab() === 'left'"
+            [class.afp-border-fg-primary]="activeTab() === 'left'"
+            [class.-afp-mb-px]="activeTab() === 'left'"
+            [class.afp-text-fg-secondary]="activeTab() !== 'left'"
+            (click)="switchTab('left')"
+          >
+            {{ leftTabLabel() }}
+          </button>
+          <button
+            type="button"
+            class="afp-flex-1 afp-py-2.5 afp-text-sm afp-transition-colors"
+            [class.afp-text-fg-primary]="activeTab() === 'right'"
+            [class.afp-border-b-2]="activeTab() === 'right'"
+            [class.afp-border-fg-primary]="activeTab() === 'right'"
+            [class.-afp-mb-px]="activeTab() === 'right'"
+            [class.afp-text-fg-secondary]="activeTab() !== 'right'"
+            (click)="switchTab('right')"
+          >
+            {{ rightTabLabel() }}
+          </button>
+        </div>
+      }
+      <div
+        [class]="leftPaneClass()"
+        [style]="isMobileTab() ? null : leftStyle()"
+        [hidden]="isMobileTab() && activeTab() !== 'left'"
+      >
+        <ng-content select="[splitLeft]" />
+      </div>
+      @if (!isMobileTab()) {
+        <div
+          role="separator"
+          aria-orientation="vertical"
+          class="split-divider afp-hidden md:afp-block afp-relative afp-w-1.5 afp-flex-shrink-0 afp-cursor-col-resize afp-transition-colors"
+          [class.dragging]="dragging()"
+          (mousedown)="onDividerDown($event)"
+        >
+          <span class="afp-absolute afp-inset-y-0 hit-area"></span>
+        </div>
+      }
+      <div
+        [class]="rightPaneClass()"
+        [hidden]="isMobileTab() && activeTab() !== 'right'"
+      >
+        <ng-content select="[splitRight]" />
+      </div>
+    </div>
+  `, styles: [":host{display:block;width:100%;height:100%}.split-divider{background:var(--fp-line-weak)}.split-divider:hover{background:var(--fp-line)}.split-divider.dragging{background:var(--fp-line-strong)}.hit-area{left:-4px;right:-4px}\n"] }]
+        }], ctorParameters: () => [] });
+
+class ZipTreeItem {
+    constructor() {
+        this.node = input.required();
+        this.depth = input.required();
+        this.selectedPath = input(null);
+        this.expanded = input.required();
+        this.toggle = output();
+        this.select = output();
+        this.hover = output();
+        this.leave = output();
+        this.chevronRight = ChevronRight;
+        this.folder = Folder;
+        this.folderOpen = FolderOpen;
+        this.formatFileSize = R0;
+        this.padStyle = computed(() => ({ paddingLeft: `${this.depth() * 14 + 10}px` }));
+        this.isOpen = computed(() => this.expanded().has(this.node().path));
+        this.isSelected = computed(() => this.selectedPath() === this.node().path);
+        this.fileIcon = computed(() => {
+            const name = this.node().name;
+            const ft = V0({ name, type: '' });
+            if (ft === 'image')
+                return FileImage;
+            if (ft === 'text' || ft === 'markdown' || ft === 'json' || ft === 'csv' || ft === 'xml' || ft === 'subtitle') {
+                return (name.endsWith('.md') || name.endsWith('.markdown')) ? FileText : FileCode;
+            }
+            return File;
+        });
+    }
+    handleEnter(e) {
+        const rect = e.currentTarget.getBoundingClientRect();
+        this.hover.emit({ text: this.node().name || '/', rect });
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: ZipTreeItem, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.25", type: ZipTreeItem, isStandalone: true, selector: "afp-zip-tree-item", inputs: { node: { classPropertyName: "node", publicName: "node", isSignal: true, isRequired: true, transformFunction: null }, depth: { classPropertyName: "depth", publicName: "depth", isSignal: true, isRequired: true, transformFunction: null }, selectedPath: { classPropertyName: "selectedPath", publicName: "selectedPath", isSignal: true, isRequired: false, transformFunction: null }, expanded: { classPropertyName: "expanded", publicName: "expanded", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { toggle: "toggle", select: "select", hover: "hover", leave: "leave" }, ngImport: i0, template: `
+    @if (node().isDir) {
+      <div>
+        <button
+          type="button"
+          class="tree-row dir-row"
+          [style]="padStyle()"
+          (click)="toggle.emit(node().path)"
+          (mouseenter)="handleEnter($event)"
+          (mouseleave)="leave.emit()"
+        >
+          <i-lucide
+            [img]="chevronRight"
+            class="afp-w-3.5 afp-h-3.5 afp-flex-shrink-0 afp-transition-transform"
+            [class.afp-rotate-90]="isOpen()"
+          />
+          <i-lucide
+            [img]="isOpen() ? folderOpen : folder"
+            class="afp-w-4 afp-h-4 afp-flex-shrink-0 afp-text-amber-300/80"
+          />
+          <span class="afp-truncate afp-flex-1 afp-min-w-0">{{ node().name || '/' }}</span>
+        </button>
+        @if (isOpen() && node().children) {
+          @for (child of node().children; track child.path) {
+            <afp-zip-tree-item
+              [node]="child"
+              [depth]="depth() + 1"
+              [selectedPath]="selectedPath()"
+              [expanded]="expanded()"
+              (toggle)="toggle.emit($event)"
+              (select)="select.emit($event)"
+              (hover)="hover.emit($event)"
+              (leave)="leave.emit()"
+            />
+          }
+        }
+      </div>
+    } @else {
+      <button
+        type="button"
+        class="tree-row file-row"
+        [class.selected]="isSelected()"
+        [style]="padStyle()"
+        (click)="select.emit(node())"
+        (mouseenter)="handleEnter($event)"
+        (mouseleave)="leave.emit()"
+      >
+        <span class="afp-w-3.5 afp-h-3.5 afp-flex-shrink-0"></span>
+        <i-lucide [img]="fileIcon()" class="afp-w-4 afp-h-4 afp-flex-shrink-0 afp-text-fg-tertiary" />
+        <span class="afp-flex-1 afp-truncate afp-min-w-0">{{ node().name }}</span>
+        <span class="afp-text-xs afp-text-fg-disabled afp-flex-shrink-0 afp-ml-2">{{ formatFileSize(node().size) }}</span>
+      </button>
+    }
+  `, isInline: true, styles: [":host{display:block;width:100%}.tree-row{width:100%;display:flex;align-items:center;gap:.375rem;padding-top:.375rem;padding-bottom:.375rem;padding-right:.5rem;text-align:left;font-size:.875rem;background:transparent;border:0;cursor:pointer}.dir-row,.file-row{color:var(--fp-fg-secondary)}.tree-row:hover{background:var(--fp-surface-1)}.file-row.selected{background:var(--fp-line);color:var(--fp-fg-inverse)}\n"], dependencies: [{ kind: "component", type: ZipTreeItem, selector: "afp-zip-tree-item", inputs: ["node", "depth", "selectedPath", "expanded"], outputs: ["toggle", "select", "hover", "leave"] }, { 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"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: ZipTreeItem, decorators: [{
+            type: Component,
+            args: [{ selector: 'afp-zip-tree-item', standalone: true, imports: [LucideAngularModule], changeDetection: ChangeDetectionStrategy.OnPush, template: `
+    @if (node().isDir) {
+      <div>
+        <button
+          type="button"
+          class="tree-row dir-row"
+          [style]="padStyle()"
+          (click)="toggle.emit(node().path)"
+          (mouseenter)="handleEnter($event)"
+          (mouseleave)="leave.emit()"
+        >
+          <i-lucide
+            [img]="chevronRight"
+            class="afp-w-3.5 afp-h-3.5 afp-flex-shrink-0 afp-transition-transform"
+            [class.afp-rotate-90]="isOpen()"
+          />
+          <i-lucide
+            [img]="isOpen() ? folderOpen : folder"
+            class="afp-w-4 afp-h-4 afp-flex-shrink-0 afp-text-amber-300/80"
+          />
+          <span class="afp-truncate afp-flex-1 afp-min-w-0">{{ node().name || '/' }}</span>
+        </button>
+        @if (isOpen() && node().children) {
+          @for (child of node().children; track child.path) {
+            <afp-zip-tree-item
+              [node]="child"
+              [depth]="depth() + 1"
+              [selectedPath]="selectedPath()"
+              [expanded]="expanded()"
+              (toggle)="toggle.emit($event)"
+              (select)="select.emit($event)"
+              (hover)="hover.emit($event)"
+              (leave)="leave.emit()"
+            />
+          }
+        }
+      </div>
+    } @else {
+      <button
+        type="button"
+        class="tree-row file-row"
+        [class.selected]="isSelected()"
+        [style]="padStyle()"
+        (click)="select.emit(node())"
+        (mouseenter)="handleEnter($event)"
+        (mouseleave)="leave.emit()"
+      >
+        <span class="afp-w-3.5 afp-h-3.5 afp-flex-shrink-0"></span>
+        <i-lucide [img]="fileIcon()" class="afp-w-4 afp-h-4 afp-flex-shrink-0 afp-text-fg-tertiary" />
+        <span class="afp-flex-1 afp-truncate afp-min-w-0">{{ node().name }}</span>
+        <span class="afp-text-xs afp-text-fg-disabled afp-flex-shrink-0 afp-ml-2">{{ formatFileSize(node().size) }}</span>
+      </button>
+    }
+  `, styles: [":host{display:block;width:100%}.tree-row{width:100%;display:flex;align-items:center;gap:.375rem;padding-top:.375rem;padding-bottom:.375rem;padding-right:.5rem;text-align:left;font-size:.875rem;background:transparent;border:0;cursor:pointer}.dir-row,.file-row{color:var(--fp-fg-secondary)}.tree-row:hover{background:var(--fp-surface-1)}.file-row.selected{background:var(--fp-line);color:var(--fp-fg-inverse)}\n"] }]
+        }] });
+
+const ZIP_TIP_STYLE_ID = 'afp-zip-tip-styles';
+function ensureZipTipStyles() {
+    if (typeof document === 'undefined')
+        return;
+    if (document.getElementById(ZIP_TIP_STYLE_ID))
+        return;
+    const el = document.createElement('style');
+    el.id = ZIP_TIP_STYLE_ID;
+    el.textContent = `
+    .afp-zip-tip {
+      position: fixed;
+      z-index: 9999;
+      pointer-events: none;
+      transform: translateY(-50%);
+      padding: 4px 8px;
+      background: rgba(0, 0, 0, 0.85);
+      color: var(--fp-fg-inverse, #fff);
+      font-size: 12px;
+      line-height: 1.5;
+      border-radius: 4px;
+      white-space: nowrap;
+      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
+    }
+  `;
+    document.head.appendChild(el);
+}
+class ZipRenderer {
+    constructor() {
+        this.url = input.required();
+        this.nestingDepth = input(0);
+        this.emitter = new ToolbarEventEmitter();
+        this.locale = inject(LocaleService, { optional: true });
+        this.request = inject(RequestService, { optional: true });
+        this.t = this.locale?.t() ?? getFallbackTranslator();
+        this.splitRef = viewChild(ResizableSplit);
+        this.zip = signal(null);
+        this.tree = signal(null);
+        this.loading = signal(true);
+        this.error = signal(null);
+        this.expanded = signal(new Set(['']));
+        this.selected = signal(null);
+        this.previewLoading = signal(false);
+        this.previewError = signal(null);
+        this.hoverTip = signal(null);
+        this.totalStats = computed(() => {
+            const root = this.tree();
+            if (!root)
+                return null;
+            let files = 0, dirs = 0, size = 0;
+            const walk = (n) => {
+                if (n.isDir) {
+                    if (n.path)
+                        dirs++;
+                    n.children?.forEach(walk);
+                }
+                else {
+                    files++;
+                    size += n.size;
+                }
+            };
+            walk(root);
+            return { files, dirs, size };
+        });
+        this.previewFiles = computed(() => {
+            const sel = this.selected();
+            if (!sel)
+                return [];
+            return [{ name: sel.name, url: sel.blobUrl, type: jM(sel.name) }];
+        });
+        this.tipEl = null;
+        this.getToolbarGroups = () => [];
+        this.onToolbarChange = (listener) => this.emitter.subscribe(listener);
+        ensureZipTipStyles();
+        effect(() => {
+            const url = this.url();
+            if (!url)
+                return;
+            untracked(() => { void this.load(); });
+        });
+        effect(() => {
+            this.totalStats();
+            this.emitter.notify();
+        });
+        effect(() => {
+            const tip = this.hoverTip();
+            untracked(() => this.syncTip(tip));
+        });
+        inject(DestroyRef).onDestroy(() => {
+            this.revokeCurrent();
+            this.syncTip(null);
+        });
+    }
+    handleToggle(path) {
+        const next = new Set(this.expanded());
+        if (next.has(path))
+            next.delete(path);
+        else
+            next.add(path);
+        this.expanded.set(next);
+    }
+    handleHover(payload) {
+        this.hoverTip.set({ text: payload.text, x: payload.rect.right + 8, y: payload.rect.top + payload.rect.height / 2 });
+    }
+    handleLeave() {
+        this.hoverTip.set(null);
+    }
+    async handleSelect(node) {
+        const z = this.zip();
+        if (!z || node.isDir)
+            return;
+        this.revokeCurrent();
+        this.previewLoading.set(true);
+        this.previewError.set(null);
+        try {
+            const mime = jM(node.name);
+            const blob = await wg(z, node.path, mime !== 'application/octet-stream' ? mime : undefined);
+            const blobUrl = URL.createObjectURL(blob);
+            this.selected.set({ path: node.path, name: node.name, size: node.size, blobUrl });
+            this.splitRef()?.switchTab('right');
+        }
+        catch (err) {
+            console.error(err);
+            this.previewError.set('条目读取失败');
+        }
+        finally {
+            this.previewLoading.set(false);
+        }
+    }
+    revokeCurrent() {
+        const sel = this.selected();
+        if (sel?.blobUrl)
+            URL.revokeObjectURL(sel.blobUrl);
+    }
+    syncTip(tip) {
+        if (!tip) {
+            this.tipEl?.remove();
+            this.tipEl = null;
+            return;
+        }
+        if (!this.tipEl) {
+            this.tipEl = document.createElement('div');
+            this.tipEl.className = 'afp-zip-tip';
+            document.body.appendChild(this.tipEl);
+        }
+        this.tipEl.textContent = tip.text;
+        this.tipEl.style.left = `${tip.x}px`;
+        this.tipEl.style.top = `${tip.y}px`;
+    }
+    async load() {
+        this.revokeCurrent();
+        this.selected.set(null);
+        this.loading.set(true);
+        this.error.set(null);
+        try {
+            const fetcher = this.request?.fetcher() ?? ((u, init) => fetch(u, init));
+            const res = await fetcher(this.url());
+            if (!res.ok)
+                throw new Error('加载失败');
+            const buf = await res.arrayBuffer();
+            const z = await ZI(buf);
+            const entries = Ig(z);
+            const root = Kg(entries);
+            this.zip.set(z);
+            this.tree.set(root);
+            const init = new Set(['']);
+            if (root.children)
+                for (const c of root.children)
+                    if (c.isDir)
+                        init.add(c.path);
+            this.expanded.set(init);
+        }
+        catch (err) {
+            console.error(err);
+            this.error.set(this.t('zip.load_failed'));
+        }
+        finally {
+            this.loading.set(false);
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: ZipRenderer, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.25", type: ZipRenderer, isStandalone: true, selector: "afp-zip-renderer", inputs: { url: { classPropertyName: "url", publicName: "url", isSignal: true, isRequired: true, transformFunction: null }, nestingDepth: { classPropertyName: "nestingDepth", publicName: "nestingDepth", isSignal: true, isRequired: false, transformFunction: null } }, host: { classAttribute: "afp-block afp-w-full afp-h-full" }, viewQueries: [{ propertyName: "splitRef", first: true, predicate: ResizableSplit, descendants: true, isSignal: true }], 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() || !tree()) {
+      <afp-renderer-error [message]="error() || t('zip.parse_failed')" />
+    } @else {
+      <afp-resizable-split
+        [initialLeftWidth]="280"
+        [minLeftWidth]="180"
+        [maxLeftWidth]="560"
+        storageKey="afp-zip-split-left"
+        [mobileTabMode]="true"
+        leftTabLabel="文件树"
+        rightTabLabel="预览"
+      >
+        <div splitLeft class="afp-w-full afp-h-full afp-overflow-auto">
+          @for (child of tree()!.children || []; track child.path) {
+            <afp-zip-tree-item
+              [node]="child"
+              [depth]="0"
+              [selectedPath]="selected()?.path ?? null"
+              [expanded]="expanded()"
+              (toggle)="handleToggle($event)"
+              (select)="handleSelect($event)"
+              (hover)="handleHover($event)"
+              (leave)="handleLeave()"
+            />
+          }
+        </div>
+        <div splitRight class="afp-w-full afp-h-full afp-flex afp-flex-col">
+          @if (!selected()) {
+            <div class="afp-flex-1 afp-flex afp-items-center afp-justify-center afp-text-fg-muted afp-text-sm afp-p-6">
+              从左侧选择一个文件以预览
+            </div>
+          } @else if (previewLoading()) {
+            <div class="afp-flex-1 afp-flex afp-items-center afp-justify-center">
+              <div class="afp-w-8 afp-h-8 afp-border-4 afp-border-line-strong afp-border-t-spinner-head afp-rounded-full afp-animate-spin"></div>
+            </div>
+          } @else if (previewError()) {
+            <div class="afp-flex-1 afp-flex afp-items-center afp-justify-center afp-text-fg-secondary">{{ previewError() }}</div>
+          } @else {
+            <div class="afp-flex-1 afp-min-h-0 afp-overflow-hidden afp-flex afp-relative afp-z-0">
+              <FilePreviewContent
+                mode="embed"
+                [files]="previewFiles()"
+                [currentIndex]="0"
+                [zipNestingDepth]="nestingDepth() + 1"
+              />
+            </div>
+          }
+        </div>
+      </afp-resizable-split>
+    }
+  `, isInline: true, dependencies: [{ kind: "component", type: RendererError, selector: "afp-renderer-error", inputs: ["message", "detail", "showIcon"] }, { kind: "component", type: ResizableSplit, selector: "afp-resizable-split", inputs: ["initialLeftWidth", "minLeftWidth", "maxLeftWidth", "minRightWidth", "storageKey", "desktopMedia", "mobileTabMode", "leftTabLabel", "rightTabLabel"] }, { kind: "component", type: ZipTreeItem, selector: "afp-zip-tree-item", inputs: ["node", "depth", "selectedPath", "expanded"], outputs: ["toggle", "select", "hover", "leave"] }, { kind: "component", type: FilePreviewContent, selector: "FilePreviewContent, afp-file-preview-content", inputs: ["files", "currentIndex", "customRenderers", "mode", "zipNestingDepth", "locale", "messages", "headless", "theme", "requestInit", "requestHandler", "shouldFetchAsBlob", "onDownload", "showClose", "showDownload"], outputs: ["navigate", "close", "customEvent"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: ZipRenderer, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'afp-zip-renderer',
+                    standalone: true,
+                    imports: [RendererError, ResizableSplit, ZipTreeItem, FilePreviewContent],
+                    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() || !tree()) {
+      <afp-renderer-error [message]="error() || t('zip.parse_failed')" />
+    } @else {
+      <afp-resizable-split
+        [initialLeftWidth]="280"
+        [minLeftWidth]="180"
+        [maxLeftWidth]="560"
+        storageKey="afp-zip-split-left"
+        [mobileTabMode]="true"
+        leftTabLabel="文件树"
+        rightTabLabel="预览"
+      >
+        <div splitLeft class="afp-w-full afp-h-full afp-overflow-auto">
+          @for (child of tree()!.children || []; track child.path) {
+            <afp-zip-tree-item
+              [node]="child"
+              [depth]="0"
+              [selectedPath]="selected()?.path ?? null"
+              [expanded]="expanded()"
+              (toggle)="handleToggle($event)"
+              (select)="handleSelect($event)"
+              (hover)="handleHover($event)"
+              (leave)="handleLeave()"
+            />
+          }
+        </div>
+        <div splitRight class="afp-w-full afp-h-full afp-flex afp-flex-col">
+          @if (!selected()) {
+            <div class="afp-flex-1 afp-flex afp-items-center afp-justify-center afp-text-fg-muted afp-text-sm afp-p-6">
+              从左侧选择一个文件以预览
+            </div>
+          } @else if (previewLoading()) {
+            <div class="afp-flex-1 afp-flex afp-items-center afp-justify-center">
+              <div class="afp-w-8 afp-h-8 afp-border-4 afp-border-line-strong afp-border-t-spinner-head afp-rounded-full afp-animate-spin"></div>
+            </div>
+          } @else if (previewError()) {
+            <div class="afp-flex-1 afp-flex afp-items-center afp-justify-center afp-text-fg-secondary">{{ previewError() }}</div>
+          } @else {
+            <div class="afp-flex-1 afp-min-h-0 afp-overflow-hidden afp-flex afp-relative afp-z-0">
+              <FilePreviewContent
+                mode="embed"
+                [files]="previewFiles()"
+                [currentIndex]="0"
+                [zipNestingDepth]="nestingDepth() + 1"
+              />
+            </div>
+          }
+        </div>
+      </afp-resizable-split>
+    }
+  `,
+                }]
+        }], ctorParameters: () => [] });
+
+export { ZipRenderer };
+//# sourceMappingURL=eternalheart-angular-file-preview-eternalheart-angular-file-preview-index-BGqTRZbm-CAOLRw20.mjs.map