@shival99/z-ui 2.0.49 → 2.0.50

package/fesm2022/shival99-z-ui-components-z-gallery.mjs

@@ -1,5 +1,5 @@
 import * as i0 from '@angular/core';
-import { input, output, signal, computed, ViewEncapsulation, ChangeDetectionStrategy, Component, inject, viewChild, effect, model, EventEmitter, Injector, PLATFORM_ID, Injectable, ElementRef, Directive } from '@angular/core';
+import { input, output, signal, computed, ViewEncapsulation, ChangeDetectionStrategy, Component, inject, viewChild, effect, EventEmitter, Injector, PLATFORM_ID, Injectable, DestroyRef, model, ElementRef, Directive } from '@angular/core';
 import * as i1$1 from '@angular/forms';
 import { FormsModule } from '@angular/forms';
 import { TranslatePipe } from '@ngx-translate/core';
@@ -12,14 +12,14 @@ import { ZInputComponent } from '@shival99/z-ui/components/z-input';
 import { ZSkeletonComponent } from '@shival99/z-ui/components/z-skeleton';
 import { zMergeClasses, zTransform } from '@shival99/z-ui/utils';
 import { ZTooltipDirective } from '@shival99/z-ui/components/z-tooltip';
+import { Overlay, OverlayConfig } from '@angular/cdk/overlay';
+import { ComponentPortal } from '@angular/cdk/portal';
 import { DOCUMENT, isPlatformBrowser } from '@angular/common';
+import { ZOverlayZIndexService } from '@shival99/z-ui/services';
 import { DomSanitizer } from '@angular/platform-browser';
 import * as i1 from 'ng2-pdfjs-viewer';
 import { PdfJsViewerModule } from 'ng2-pdfjs-viewer';
 import { cva } from 'class-variance-authority';
-import { Overlay, OverlayConfig } from '@angular/cdk/overlay';
-import { ComponentPortal } from '@angular/cdk/portal';
-import { ZOverlayZIndexService } from '@shival99/z-ui/services';
 
 const FILE_CATEGORY_STYLES = {
     image: {
@@ -1372,6 +1372,107 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.9", ngImpor
                     }, template: "<div\n  class=\"animate-in fade-in fixed inset-0 z-50 flex items-center justify-center bg-black/80 backdrop-blur-sm duration-200\"\n  (click)=\"onBackdropClick($event)\">\n  <button\n    z-button\n    zType=\"ghost\"\n    zShape=\"circle\"\n    class=\"absolute top-3 right-3 z-20 text-white hover:bg-white/20 lg:top-4 lg:right-4\"\n    (click)=\"close()\">\n    <i z-icon zType=\"lucideX\" zSize=\"24\"></i>\n  </button>\n\n  @if (hasPrev()) {\n    <button\n      z-button\n      zType=\"ghost\"\n      zShape=\"circle\"\n      class=\"absolute left-4 z-10 text-white hover:bg-white/20\"\n      (click)=\"navigate(-1)\">\n      <i z-icon zType=\"lucideChevronLeft\" zSize=\"32\"></i>\n    </button>\n  }\n\n  @if (hasNext()) {\n    <button\n      z-button\n      zType=\"ghost\"\n      zShape=\"circle\"\n      class=\"absolute right-4 z-10 text-white hover:bg-white/20\"\n      (click)=\"navigate(1)\">\n      <i z-icon zType=\"lucideChevronRight\" zSize=\"32\"></i>\n    </button>\n  }\n\n  <div class=\"flex h-full w-full flex-col items-center\" (click)=\"$event.stopPropagation()\">\n    <div\n      class=\"dark:!border-border absolute top-3 right-14 left-3 z-10 flex min-w-0 items-center justify-between gap-2 rounded-[0.375rem] border !border-transparent bg-black/70 px-2.5 py-1.5 text-xs text-white shadow-lg backdrop-blur-sm lg:top-4 lg:right-auto lg:left-1/2 lg:max-w-[calc(100vw-10rem)] lg:-translate-x-1/2 lg:justify-start lg:bg-black/60 lg:px-4 lg:py-2 lg:text-sm dark:border\">\n      <div class=\"flex min-w-0 items-baseline gap-1.5\">\n        <span class=\"min-w-0 truncate font-medium lg:max-w-[12.5rem]\">{{ file().name }}</span>\n        <span class=\"hidden shrink-0 text-white/70 lg:inline\">({{ formattedSize() }})</span>\n      </div>\n\n      @if (files().length > 1) {\n        <span class=\"hidden shrink-0 text-white/70 md:inline\">{{ currentIndex() + 1 }} / {{ files().length }}</span>\n      }\n\n      <div class=\"ml-1 flex shrink-0 items-center gap-0.5\">\n        @if (isImageFile()) {\n          <button\n            z-button\n            zType=\"ghost\"\n            zSize=\"xs\"\n            zShape=\"circle\"\n            class=\"text-white hover:bg-white/20\"\n            z-tooltip\n            [zContent]=\"'i18n_z_ui_gallery_rotate_left' | translate\"\n            (click)=\"rotateLeft()\">\n            <i z-icon zType=\"lucideUndo\" zSize=\"14\"></i>\n          </button>\n          <button\n            z-button\n            zType=\"ghost\"\n            zSize=\"xs\"\n            zShape=\"circle\"\n            class=\"text-white hover:bg-white/20\"\n            z-tooltip\n            [zContent]=\"'i18n_z_ui_gallery_rotate_right' | translate\"\n            (click)=\"rotateRight()\">\n            <i z-icon zType=\"lucideRedo\" zSize=\"14\"></i>\n          </button>\n        }\n\n        <button\n          z-button\n          zType=\"ghost\"\n          zSize=\"xs\"\n          zShape=\"circle\"\n          class=\"text-white hover:bg-white/20\"\n          z-tooltip\n          [zContent]=\"'i18n_z_ui_gallery_download' | translate\"\n          (click)=\"download()\">\n          <i z-icon zType=\"lucideDownload\" zSize=\"14\"></i>\n        </button>\n\n        @if (zShowRemove()) {\n          <button\n            z-button\n            zType=\"ghost\"\n            zSize=\"xs\"\n            zShape=\"circle\"\n            class=\"text-white hover:bg-white/20\"\n            z-tooltip\n            [zContent]=\"'i18n_z_ui_gallery_delete' | translate\"\n            (click)=\"remove()\">\n            <i z-icon zType=\"lucideTrash2\" zSize=\"14\"></i>\n          </button>\n        }\n      </div>\n    </div>\n\n    <div class=\"relative flex flex-1 items-center justify-center pt-16\">\n      @if (isImageFile()) {\n        <div class=\"relative flex h-[60vh] w-[70vw] items-center justify-center\">\n          @if (isLoading()) {\n            <z-skeleton class=\"absolute inset-0 rounded-lg\" />\n            <div class=\"text-muted-foreground absolute inset-0 flex items-center justify-center text-sm font-medium\">\n              {{ 'i18n_z_ui_gallery_loading_preview' | translate }}\n            </div>\n          }\n          @if (previewError()) {\n            <div class=\"bg-card flex size-full flex-col items-center justify-center rounded-lg p-8 shadow-2xl\">\n              <div class=\"bg-muted mb-4 flex size-16 items-center justify-center rounded-xl\">\n                <i z-icon zType=\"lucideTriangleAlert\" zSize=\"28\" class=\"text-destructive\"></i>\n              </div>\n              <span class=\"text-foreground text-sm font-medium\">\n                {{ 'i18n_z_ui_gallery_preview_load_error' | translate }}\n              </span>\n            </div>\n          } @else {\n            <img\n              [src]=\"file().url || file().thumbnailUrl\"\n              [alt]=\"file().name\"\n              class=\"max-h-full max-w-full rounded-lg object-contain shadow-2xl transition-opacity duration-300\"\n              [class.opacity-0]=\"isLoading()\"\n              [class.opacity-100]=\"!isLoading()\"\n              [class.cursor-zoom-in]=\"!zoomed()\"\n              [class.cursor-zoom-out]=\"zoomed()\"\n              [style.transform]=\"imageTransform()\"\n              (load)=\"onImageLoad()\"\n              (error)=\"onMediaError()\"\n              (click)=\"toggleZoom()\" />\n          }\n        </div>\n      } @else if (isPdf() && pdfUrl()) {\n        <div\n          class=\"z-gallery-pdf-frame relative h-[75vh] w-[85vw] max-w-[96vw] overflow-hidden rounded-sm border shadow-xs\">\n          @if (isLoading()) {\n            <z-skeleton class=\"absolute inset-0 rounded-sm\" />\n            <div\n              class=\"text-muted-foreground absolute inset-0 z-10 flex items-center justify-center text-sm font-medium\">\n              {{ 'i18n_z_ui_gallery_loading_preview' | translate }}\n            </div>\n          }\n          @if (previewError()) {\n            <div class=\"bg-card flex size-full flex-col items-center justify-center p-8\">\n              <div class=\"bg-muted mb-4 flex size-16 items-center justify-center rounded-xl\">\n                <i z-icon zType=\"lucideTriangleAlert\" zSize=\"28\" class=\"text-destructive\"></i>\n              </div>\n              <span class=\"text-foreground text-sm font-medium\">\n                {{ 'i18n_z_ui_gallery_preview_load_error' | translate }}\n              </span>\n            </div>\n          } @else {\n            <div\n              class=\"relative size-full bg-white transition-opacity duration-300\"\n              [class.opacity-0]=\"isLoading()\"\n              [class.opacity-100]=\"!isLoading()\">\n              @let pdfConfig = pdfViewerConfig();\n              <ng2-pdfjs-viewer\n                #pdfViewer\n                class=\"block size-full\"\n                [viewerFolder]=\"pdfConfig.viewerFolder!\"\n                [viewerId]=\"pdfViewerId()\"\n                [pdfSrc]=\"pdfUrl()!\"\n                [downloadFileName]=\"file().name\"\n                [locale]=\"pdfConfig.locale!\"\n                [showSpinner]=\"pdfConfig.showSpinner!\"\n                [useOnlyCssZoom]=\"pdfConfig.useOnlyCssZoom!\"\n                [diagnosticLogs]=\"pdfConfig.diagnosticLogs!\"\n                [showOpenFile]=\"pdfConfig.showOpenFile!\"\n                [showAnnotations]=\"pdfConfig.showAnnotations!\"\n                [showDownload]=\"pdfConfig.showDownload!\"\n                [showViewBookmark]=\"pdfConfig.showViewBookmark!\"\n                [showPrint]=\"pdfConfig.showPrint!\"\n                [showFullScreen]=\"pdfConfig.showFullScreen!\"\n                [showFind]=\"pdfConfig.showFind!\"\n                [downloadOnLoad]=\"pdfConfig.downloadOnLoad!\"\n                [printOnLoad]=\"pdfConfig.printOnLoad!\"\n                [rotateCW]=\"pdfConfig.rotateCW!\"\n                [rotateCCW]=\"pdfConfig.rotateCCW!\"\n                [showLastPageOnLoad]=\"pdfConfig.showLastPageOnLoad!\"\n                [showToolbarLeft]=\"pdfConfig.showToolbarLeft!\"\n                [showToolbarMiddle]=\"pdfConfig.showToolbarMiddle!\"\n                [showToolbarRight]=\"pdfConfig.showToolbarRight!\"\n                [showSecondaryToolbarToggle]=\"pdfConfig.showSecondaryToolbarToggle!\"\n                [showSidebar]=\"pdfConfig.showSidebar!\"\n                [showSidebarLeft]=\"pdfConfig.showSidebarLeft!\"\n                [showSidebarRight]=\"pdfConfig.showSidebarRight!\"\n                [toolbarDensity]=\"pdfConfig.toolbarDensity!\"\n                [sidebarWidth]=\"pdfConfig.sidebarWidth\"\n                [toolbarPosition]=\"pdfConfig.toolbarPosition!\"\n                [sidebarPosition]=\"pdfConfig.sidebarPosition!\"\n                [responsiveBreakpoint]=\"pdfConfig.responsiveBreakpoint\"\n                [zoom]=\"pdfConfig.zoom!\"\n                [rotation]=\"pdfConfig.rotation!\"\n                [cursor]=\"pdfConfig.cursor!\"\n                [scroll]=\"pdfConfig.scroll!\"\n                [spread]=\"pdfConfig.spread!\"\n                [pageMode]=\"pdfConfig.pageMode!\"\n                [page]=\"pdfConfig.page!\"\n                [iframeBorder]=\"pdfConfig.iframeBorder!\"\n                [theme]=\"pdfConfig.theme!\"\n                [primaryColor]=\"pdfConfig.primaryColor\"\n                [backgroundColor]=\"pdfConfig.backgroundColor\"\n                [pageBorderColor]=\"pdfConfig.pageBorderColor\"\n                [pageSpacing]=\"pdfConfig.pageSpacing\"\n                [toolbarColor]=\"pdfConfig.toolbarColor\"\n                [textColor]=\"pdfConfig.textColor\"\n                [borderRadius]=\"pdfConfig.borderRadius\"\n                [customCSS]=\"pdfConfig.customCSS\"\n                [cspNonce]=\"pdfConfig.cspNonce\"\n                [iframeTitle]=\"pdfConfig.iframeTitle || ('i18n_z_ui_gallery_pdf_preview' | translate)\"\n                [urlValidation]=\"pdfConfig.urlValidation!\"\n                [controlVisibility]=\"pdfConfig.controlVisibility!\"\n                [groupVisibility]=\"pdfConfig.groupVisibility!\"\n                [autoActions]=\"pdfConfig.autoActions!\"\n                [viewerConfig]=\"pdfConfig.viewerConfig!\"\n                [themeConfig]=\"pdfConfig.themeConfig!\"\n                [layoutConfig]=\"pdfConfig.layoutConfig!\"\n                (onDocumentLoad)=\"onPdfLoad()\"\n                (onDocumentError)=\"onMediaError()\" />\n            </div>\n          }\n        </div>\n      } @else if (isVideo()) {\n        <div class=\"relative flex h-[60vh] w-[70vw] items-center justify-center\">\n          @if (isLoading()) {\n            <z-skeleton class=\"absolute inset-0 rounded-lg\" />\n            <div class=\"text-muted-foreground absolute inset-0 flex items-center justify-center text-sm font-medium\">\n              {{ 'i18n_z_ui_gallery_loading_preview' | translate }}\n            </div>\n          }\n          @if (previewError()) {\n            <div class=\"bg-card flex size-full flex-col items-center justify-center rounded-lg p-8 shadow-2xl\">\n              <div class=\"bg-muted mb-4 flex size-16 items-center justify-center rounded-xl\">\n                <i z-icon zType=\"lucideTriangleAlert\" zSize=\"28\" class=\"text-destructive\"></i>\n              </div>\n              <span class=\"text-foreground text-sm font-medium\">\n                {{ 'i18n_z_ui_gallery_preview_load_error' | translate }}\n              </span>\n            </div>\n          } @else {\n            <video\n              [src]=\"file().url\"\n              controls\n              autoplay\n              class=\"max-h-full max-w-full rounded-lg shadow-2xl transition-opacity duration-300\"\n              [class.opacity-0]=\"isLoading()\"\n              [class.opacity-100]=\"!isLoading()\"\n              (loadeddata)=\"onVideoLoad()\"\n              (error)=\"onMediaError()\">\n              {{ 'i18n_z_ui_gallery_video_not_supported' | translate }}\n            </video>\n          }\n        </div>\n      } @else if (isWordFile()) {\n        <div class=\"relative h-[75vh] w-[85vw]\">\n          @if (isLoading() || isConverting()) {\n            <z-skeleton class=\"absolute inset-0 rounded-lg\" />\n            <div class=\"text-muted-foreground absolute inset-0 flex items-center justify-center text-sm font-medium\">\n              {{ 'i18n_z_ui_gallery_loading_preview' | translate }}\n            </div>\n          }\n          @if (conversionError()) {\n            <div class=\"bg-card flex size-full flex-col items-center justify-center rounded-lg p-12 shadow-2xl\">\n              <div class=\"bg-muted mb-4 flex size-24 items-center justify-center rounded-xl\">\n                <i z-icon [zType]=\"fileIcon()\" zSize=\"40\" class=\"text-muted-foreground\"></i>\n              </div>\n              <span class=\"text-foreground mb-2 text-lg font-medium\">{{ file().name }}</span>\n              <span class=\"text-muted-foreground rounded-md bg-red-100 px-3 py-1.5 text-xs dark:bg-red-900/30\">\n                <span class=\"text-red-700 dark:text-red-300\">{{ conversionError() }}</span>\n              </span>\n            </div>\n          } @else if (docHtmlContent()) {\n            <div\n              class=\"absolute inset-0 overflow-auto rounded-lg bg-white p-8 text-gray-950 shadow-2xl\"\n              [innerHTML]=\"docHtmlContent()\"></div>\n          }\n        </div>\n      } @else if (isExcelFile()) {\n        <div class=\"relative h-[75vh] w-[85vw]\">\n          @if (isLoading() || isConverting()) {\n            <z-skeleton class=\"absolute inset-0 rounded-lg\" />\n            <div class=\"text-muted-foreground absolute inset-0 flex items-center justify-center text-sm font-medium\">\n              {{ 'i18n_z_ui_gallery_loading_preview' | translate }}\n            </div>\n          }\n          @if (conversionError()) {\n            <div class=\"bg-card flex size-full flex-col items-center justify-center rounded-lg p-12 shadow-2xl\">\n              <div class=\"bg-muted mb-4 flex size-24 items-center justify-center rounded-xl\">\n                <i z-icon [zType]=\"fileIcon()\" zSize=\"40\" class=\"text-muted-foreground\"></i>\n              </div>\n              <span class=\"text-foreground mb-2 text-lg font-medium\">{{ file().name }}</span>\n              <span class=\"text-muted-foreground rounded-md bg-red-100 px-3 py-1.5 text-xs dark:bg-red-900/30\">\n                <span class=\"text-red-700 dark:text-red-300\">{{ conversionError() }}</span>\n              </span>\n            </div>\n          } @else if (docHtmlContent()) {\n            <div\n              class=\"absolute inset-0 overflow-auto rounded-lg bg-white p-4 text-gray-950 shadow-2xl\"\n              [innerHTML]=\"docHtmlContent()\"></div>\n          }\n        </div>\n      } @else if (isTextFile()) {\n        <div class=\"relative h-[75vh] w-[85vw]\">\n          @if (isLoading() || isConverting()) {\n            <z-skeleton class=\"absolute inset-0 rounded-lg\" />\n            <div class=\"text-muted-foreground absolute inset-0 flex items-center justify-center text-sm font-medium\">\n              {{ 'i18n_z_ui_gallery_loading_preview' | translate }}\n            </div>\n          }\n          @if (conversionError()) {\n            <div class=\"bg-card flex size-full flex-col items-center justify-center rounded-lg p-12 shadow-2xl\">\n              <div class=\"bg-muted mb-4 flex size-24 items-center justify-center rounded-xl\">\n                <i z-icon [zType]=\"fileIcon()\" zSize=\"40\" class=\"text-muted-foreground\"></i>\n              </div>\n              <span class=\"text-foreground mb-2 text-lg font-medium\">{{ file().name }}</span>\n              <span class=\"text-muted-foreground rounded-md bg-red-100 px-3 py-1.5 text-xs dark:bg-red-900/30\">\n                <span class=\"text-red-700 dark:text-red-300\">{{ conversionError() }}</span>\n              </span>\n            </div>\n          } @else if (textContent()) {\n            <div class=\"absolute inset-0 overflow-auto rounded-lg bg-gray-950 p-6 shadow-2xl\">\n              <pre class=\"font-mono text-sm leading-relaxed whitespace-pre-wrap text-gray-100\">{{ textContent() }}</pre>\n            </div>\n          }\n        </div>\n      } @else {\n        <div class=\"bg-card flex flex-col items-center justify-center rounded-lg p-12 shadow-2xl\">\n          <div class=\"bg-muted mb-4 flex size-24 items-center justify-center rounded-xl\">\n            <i z-icon [zType]=\"fileIcon()\" zSize=\"40\" class=\"text-muted-foreground\"></i>\n          </div>\n          <span class=\"text-foreground mb-2 text-lg font-medium\">{{ file().name }}</span>\n          <span class=\"text-muted-foreground mb-4 text-sm\">{{ formattedSize() }}</span>\n          <span class=\"text-muted-foreground rounded-md bg-amber-100 px-3 py-1.5 text-xs dark:bg-amber-900/30\">\n            <i\n              z-icon\n              zType=\"lucideInfo\"\n              zSize=\"14\"\n              class=\"mr-1 inline-block align-middle text-amber-600 dark:text-amber-400\"></i>\n            <span class=\"align-middle text-amber-700 dark:text-amber-300\">\n              {{ 'i18n_z_ui_gallery_preview_not_supported' | translate }}\n            </span>\n          </span>\n        </div>\n      }\n    </div>\n  </div>\n</div>\n", styles: [".z-gallery-pdf-frame,.z-gallery-pdf-frame *{border-color:#606060!important;outline-color:#606060!important}.z-gallery-pdf-frame{border-width:1px!important;border-style:solid!important;background:#606060}.z-gallery-pdf-frame ng2-pdfjs-viewer,.z-gallery-pdf-frame ng2-pdfjs-viewer iframe{display:block;width:100%;height:100%;border:0!important;outline:0!important;box-shadow:none!important;background:#606060}\n"] }]
         }], ctorParameters: () => [], propDecorators: { file: [{ type: i0.Input, args: [{ isSignal: true, alias: "file", required: true }] }], files: [{ type: i0.Input, args: [{ isSignal: true, alias: "files", required: false }] }], zShowRemove: [{ type: i0.Input, args: [{ isSignal: true, alias: "zShowRemove", required: false }] }], zPdfViewerConfig: [{ type: i0.Input, args: [{ isSignal: true, alias: "zPdfViewerConfig", required: false }] }], zTrustedResourceOrigins: [{ type: i0.Input, args: [{ isSignal: true, alias: "zTrustedResourceOrigins", required: false }] }], zOnClose: [{ type: i0.Output, args: ["zOnClose"] }], zOnDownload: [{ type: i0.Output, args: ["zOnDownload"] }], zOnNavigate: [{ type: i0.Output, args: ["zOnNavigate"] }], zOnRemove: [{ type: i0.Output, args: ["zOnRemove"] }], pdfViewer: [{ type: i0.ViewChild, args: ['pdfViewer', { isSignal: true }] }] } });
 
+class ZGalleryPreviewRef {
+    _overlayRef;
+    _closed = false;
+    componentInstance = null;
+    zAfterClose = new EventEmitter();
+    constructor(_overlayRef) {
+        this._overlayRef = _overlayRef;
+    }
+    close() {
+        if (this._closed) {
+            return;
+        }
+        this._closed = true;
+        this.zAfterClose.emit();
+        this.zAfterClose.complete();
+        this._overlayRef?.dispose();
+    }
+}
+
+class ZGalleryPreviewService {
+    _document = inject(DOCUMENT);
+    _injector = inject(Injector);
+    _overlay = inject(Overlay);
+    _platformId = inject(PLATFORM_ID);
+    _zIndexService = inject(ZOverlayZIndexService);
+    open(fileOrOptions, options = {}) {
+        const previewOptions = this._normalizeOptions(fileOrOptions, options);
+        const overlayRef = this._createOverlay();
+        const previewRef = new ZGalleryPreviewRef(overlayRef ?? null);
+        if (!overlayRef) {
+            return previewRef;
+        }
+        const componentRef = overlayRef.attach(new ComponentPortal(ZGalleryPreviewComponent, null, this._injector));
+        previewRef.componentInstance = componentRef.instance;
+        componentRef.setInput('file', previewOptions.file);
+        componentRef.setInput('files', previewOptions.files);
+        componentRef.setInput('zShowRemove', previewOptions.zShowRemove ?? false);
+        componentRef.setInput('zPdfViewerConfig', previewOptions.zPdfViewerConfig ?? {});
+        componentRef.setInput('zTrustedResourceOrigins', previewOptions.zTrustedResourceOrigins ?? []);
+        componentRef.instance.zOnClose.subscribe(() => {
+            previewOptions.zOnClose?.();
+            previewRef.close();
+        });
+        componentRef.instance.zOnDownload.subscribe(file => this._handleDownload(file, previewOptions));
+        componentRef.instance.zOnNavigate.subscribe(file => {
+            componentRef.setInput('file', file);
+            previewOptions.zOnNavigate?.(file);
+        });
+        componentRef.instance.zOnRemove.subscribe(file => previewOptions.zOnRemove?.(file));
+        return previewRef;
+    }
+    _createOverlay() {
+        if (!isPlatformBrowser(this._platformId)) {
+            return undefined;
+        }
+        const overlayRef = this._overlay.create(new OverlayConfig({
+            hasBackdrop: false,
+            panelClass: 'z-gallery-preview-overlay-pane',
+            positionStrategy: this._overlay.position().global(),
+            scrollStrategy: this._overlay.scrollStrategies.block(),
+        }));
+        this._zIndexService.applyToOverlay(overlayRef);
+        this._zIndexService.deferMoveToTop(overlayRef);
+        return overlayRef;
+    }
+    _normalizeOptions(fileOrOptions, options) {
+        const previewOptions = 'file' in fileOrOptions ? fileOrOptions : { ...options, file: fileOrOptions };
+        const files = previewOptions.files?.length ? previewOptions.files : [previewOptions.file];
+        const hasCurrentFile = files.some(file => file.id === previewOptions.file.id);
+        return {
+            ...previewOptions,
+            files: hasCurrentFile ? files : [previewOptions.file, ...files],
+        };
+    }
+    _handleDownload(file, options) {
+        options.zOnDownload?.(file);
+        if (options.zDownload === false) {
+            return;
+        }
+        const downloadLink = file.downloadUrl || file.url;
+        if (!downloadLink || !isPlatformBrowser(this._platformId)) {
+            return;
+        }
+        const link = this._document.createElement('a');
+        link.href = downloadLink;
+        link.download = file.name;
+        link.target = '_blank';
+        this._document.body.appendChild(link);
+        link.click();
+        this._document.body.removeChild(link);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.9", ngImport: i0, type: ZGalleryPreviewService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.0.9", ngImport: i0, type: ZGalleryPreviewService, providedIn: 'root' });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.9", ngImport: i0, type: ZGalleryPreviewService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root',
+                }]
+        }] });
+
 const zGalleryVariants = cva('z-gallery', {
     variants: {
         zSize: {
@@ -1437,6 +1538,9 @@ const zGalleryFileIconVariants = cva('flex items-center justify-center rounded-m
 });
 
 class ZGalleryComponent {
+    _destroyRef = inject(DestroyRef);
+    _previewService = inject(ZGalleryPreviewService);
+    _previewRef = null;
     zFiles = input([], ...(ngDevMode ? [{ debugName: "zFiles" }] : []));
     zMode = model('grid', ...(ngDevMode ? [{ debugName: "zMode" }] : []));
     zSize = input('default', ...(ngDevMode ? [{ debugName: "zSize" }] : []));
@@ -1471,7 +1575,6 @@ class ZGalleryComponent {
     zSelectionChange = output();
     zOnAction = output();
     modeIndex = signal(0, ...(ngDevMode ? [{ debugName: "modeIndex" }] : []));
-    previewFile = signal(null, ...(ngDevMode ? [{ debugName: "previewFile" }] : []));
     searchInputQuery = signal('', ...(ngDevMode ? [{ debugName: "searchInputQuery" }] : []));
     searchQuery = signal('', ...(ngDevMode ? [{ debugName: "searchQuery" }] : []));
     skeletonItems = computed(() => {
@@ -1579,6 +1682,7 @@ class ZGalleryComponent {
     }, ...(ngDevMode ? [{ debugName: "isIndeterminate" }] : []));
     selectedCount = computed(() => this.zSelectedFiles().length, ...(ngDevMode ? [{ debugName: "selectedCount" }] : []));
     ngAfterViewInit() {
+        this._destroyRef.onDestroy(() => this.closePreview());
         this.zControl.emit({
             setMode: mode => {
                 this.modeIndex.set(mode === 'list' ? 1 : 0);
@@ -1587,8 +1691,8 @@ class ZGalleryComponent {
             },
             getMode: () => this.currentMode(),
             getFiles: () => this.zFiles(),
-            openPreview: file => this.previewFile.set(file),
-            closePreview: () => this.previewFile.set(null),
+            openPreview: file => this._openPreview(file),
+            closePreview: () => this.closePreview(),
             selectAll: () => this.selectAll(),
             deselectAll: () => this.deselectAll(),
             toggleSelection: file => this.toggleSelection(file),
@@ -1615,17 +1719,14 @@ class ZGalleryComponent {
         }
     }
     onPreview(file) {
-        this.previewFile.set(file);
-        this.zOnPreview.emit(file);
+        this._openPreview(file, true);
     }
     onRemove(file) {
         this.zOnRemove.emit(file);
     }
     closePreview() {
-        this.previewFile.set(null);
-    }
-    onNavigatePreview(file) {
-        this.previewFile.set(file);
+        this._previewRef?.close();
+        this._previewRef = null;
     }
     onRemoveFromPreview(file) {
         this.zOnRemove.emit(file);
@@ -1633,12 +1734,30 @@ class ZGalleryComponent {
         const currentIndex = allFiles.findIndex(f => f.id === file.id);
         if (allFiles.length <= 1) {
             this.closePreview();
-        }
-        if (currentIndex < allFiles.length - 1) {
-            this.previewFile.set(allFiles[currentIndex + 1]);
             return;
         }
-        this.previewFile.set(allFiles[currentIndex - 1]);
+        const nextFile = currentIndex < allFiles.length - 1 ? allFiles[currentIndex + 1] : allFiles[currentIndex - 1];
+        this._openPreview(nextFile);
+    }
+    _openPreview(file, emitPreview = false) {
+        this.closePreview();
+        if (emitPreview) {
+            this.zOnPreview.emit(file);
+        }
+        const previewRef = this._previewService.open({
+            file,
+            files: this.filteredFiles(),
+            zShowRemove: this.zShowRemove(),
+            zPdfViewerConfig: this.zPdfViewerConfig(),
+            zTrustedResourceOrigins: this.zTrustedResourceOrigins(),
+            zDownload: false,
+            zOnClose: () => {
+                this._previewRef = null;
+            },
+            zOnDownload: previewFile => this.onDownload(previewFile),
+            zOnRemove: previewFile => this.onRemoveFromPreview(previewFile),
+        });
+        this._previewRef = previewRef;
     }
     isFileSelected(file) {
         return this.selectedIds().has(file.id);
@@ -1867,22 +1986,8 @@ class ZGalleryComponent {
           zSize="sm"
         />
       }
-
-      @if (previewFile()) {
-        <z-gallery-preview
-          [file]="previewFile()!"
-          [files]="filteredFiles()"
-          [zShowRemove]="zShowRemove()"
-          [zPdfViewerConfig]="zPdfViewerConfig()"
-          [zTrustedResourceOrigins]="zTrustedResourceOrigins()"
-          (zOnClose)="closePreview()"
-          (zOnDownload)="onDownload($event)"
-          (zOnNavigate)="onNavigatePreview($event)"
-          (zOnRemove)="onRemoveFromPreview($event)"
-        />
-      }
     </div>
-  `, isInline: true, dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: ZGalleryItemComponent, selector: "z-gallery-item", inputs: ["file", "zMode", "zSize", "zShowDownload", "zShowPreview", "zShowRemove", "zSelectable", "zSelected"], outputs: ["zOnDownload", "zOnPreview", "zOnRemove", "zOnSelect"] }, { kind: "component", type: ZGalleryPreviewComponent, selector: "z-gallery-preview", inputs: ["file", "files", "zShowRemove", "zPdfViewerConfig", "zTrustedResourceOrigins"], outputs: ["zOnClose", "zOnDownload", "zOnNavigate", "zOnRemove"] }, { kind: "component", type: ZButtonGroupComponent, selector: "z-button-group", inputs: ["zClass", "zOrientation", "zActive"], outputs: ["zActiveChange"], exportAs: ["zButtonGroup"] }, { kind: "directive", type: ZButtonGroupItemDirective, selector: "[z-button-group-item]", exportAs: ["zButtonGroupItem"] }, { kind: "component", type: ZButtonComponent, selector: "z-button, button[z-button], a[z-button]", inputs: ["class", "zType", "zSize", "zShape", "zLabel", "zLoading", "zDisabled", "zTypeIcon", "zAnimatedTypeIcon", "zAnimateIcon", "zAnimationTriggerIcon", "zSizeIcon", "zStrokeWidthIcon", "zWave"], exportAs: ["zButton"] }, { kind: "component", type: ZCheckboxComponent, selector: "z-checkbox", inputs: ["class", "zType", "zSize", "zLabel", "zText", "zDisabled", "zIndeterminate", "zValue", "zOptions", "zOrientation", "zCheckAll", "zCheckAllText", "zChecked", "zGroupValue"], outputs: ["zChange", "zGroupChange", "zOnBlur", "zOnFocus", "zControl", "zEvent", "zCheckedChange", "zGroupValueChange"] }, { kind: "component", type: ZIconComponent, selector: "z-icon, [z-icon]", inputs: ["class", "zType", "zAnimatedType", "zAnimate", "zAnimationTrigger", "zSize", "zStrokeWidth", "zSvg"] }, { kind: "component", type: ZEmptyComponent, selector: "z-empty", inputs: ["class", "zType", "zIcon", "zIconSize", "zSize", "zMessage", "zDescription"] }, { kind: "component", type: ZInputComponent, selector: "z-input", inputs: ["class", "zType", "zSize", "zAlign", "zLabel", "zLabelClass", "zPlaceholder", "zRequired", "zDisabled", "zReadonly", "zPrefix", "zSuffix", "zMin", "zMax", "zStep", "zShowArrows", "zMask", "zDecimalPlaces", "zAllowNegative", "zThousandSeparator", "zDecimalMarker", "zValidators", "zAsyncValidators", "zAsyncDebounce", "zAsyncValidateOn", "zShowPasswordToggle", "zSearch", "zDebounce", "zAutofocus", "zAutoComplete", "zAllowClear", "zAutoSizeContent", "zRows", "zResize", "zMaxLength", "zAutoSuggest", "zColorConfig"], outputs: ["zOnSearch", "zOnChange", "zOnBlur", "zOnFocus", "zOnKeydown", "zOnEnter", "zOnColorCollapse", "zControl", "zEvent"], exportAs: ["zInput"] }, { kind: "component", type: ZSkeletonComponent, selector: "z-skeleton", inputs: ["class", "zType", "zSize", "zWidth", "zHeight", "zRows", "zGap", "zAnimated", "zRadius"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+  `, isInline: true, dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: ZGalleryItemComponent, selector: "z-gallery-item", inputs: ["file", "zMode", "zSize", "zShowDownload", "zShowPreview", "zShowRemove", "zSelectable", "zSelected"], outputs: ["zOnDownload", "zOnPreview", "zOnRemove", "zOnSelect"] }, { kind: "component", type: ZButtonGroupComponent, selector: "z-button-group", inputs: ["zClass", "zOrientation", "zActive"], outputs: ["zActiveChange"], exportAs: ["zButtonGroup"] }, { kind: "directive", type: ZButtonGroupItemDirective, selector: "[z-button-group-item]", exportAs: ["zButtonGroupItem"] }, { kind: "component", type: ZButtonComponent, selector: "z-button, button[z-button], a[z-button]", inputs: ["class", "zType", "zSize", "zShape", "zLabel", "zLoading", "zDisabled", "zTypeIcon", "zAnimatedTypeIcon", "zAnimateIcon", "zAnimationTriggerIcon", "zSizeIcon", "zStrokeWidthIcon", "zWave"], exportAs: ["zButton"] }, { kind: "component", type: ZCheckboxComponent, selector: "z-checkbox", inputs: ["class", "zType", "zSize", "zLabel", "zText", "zDisabled", "zIndeterminate", "zValue", "zOptions", "zOrientation", "zCheckAll", "zCheckAllText", "zChecked", "zGroupValue"], outputs: ["zChange", "zGroupChange", "zOnBlur", "zOnFocus", "zControl", "zEvent", "zCheckedChange", "zGroupValueChange"] }, { kind: "component", type: ZIconComponent, selector: "z-icon, [z-icon]", inputs: ["class", "zType", "zAnimatedType", "zAnimate", "zAnimationTrigger", "zSize", "zStrokeWidth", "zSvg"] }, { kind: "component", type: ZEmptyComponent, selector: "z-empty", inputs: ["class", "zType", "zIcon", "zIconSize", "zSize", "zMessage", "zDescription"] }, { kind: "component", type: ZInputComponent, selector: "z-input", inputs: ["class", "zType", "zSize", "zAlign", "zLabel", "zLabelClass", "zPlaceholder", "zRequired", "zDisabled", "zReadonly", "zPrefix", "zSuffix", "zMin", "zMax", "zStep", "zShowArrows", "zMask", "zDecimalPlaces", "zAllowNegative", "zThousandSeparator", "zDecimalMarker", "zValidators", "zAsyncValidators", "zAsyncDebounce", "zAsyncValidateOn", "zShowPasswordToggle", "zSearch", "zDebounce", "zAutofocus", "zAutoComplete", "zAllowClear", "zAutoSizeContent", "zRows", "zResize", "zMaxLength", "zAutoSuggest", "zColorConfig"], outputs: ["zOnSearch", "zOnChange", "zOnBlur", "zOnFocus", "zOnKeydown", "zOnEnter", "zOnColorCollapse", "zControl", "zEvent"], exportAs: ["zInput"] }, { kind: "component", type: ZSkeletonComponent, selector: "z-skeleton", inputs: ["class", "zType", "zSize", "zWidth", "zHeight", "zRows", "zGap", "zAnimated", "zRadius"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.9", ngImport: i0, type: ZGalleryComponent, decorators: [{
             type: Component,
@@ -1892,7 +1997,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.9", ngImpor
                         FormsModule,
                         TranslatePipe,
                         ZGalleryItemComponent,
-                        ZGalleryPreviewComponent,
                         ZButtonGroupComponent,
                         ZButtonGroupItemDirective,
                         ZButtonComponent,
@@ -2080,20 +2184,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.9", ngImpor
           zSize="sm"
         />
       }
-
-      @if (previewFile()) {
-        <z-gallery-preview
-          [file]="previewFile()!"
-          [files]="filteredFiles()"
-          [zShowRemove]="zShowRemove()"
-          [zPdfViewerConfig]="zPdfViewerConfig()"
-          [zTrustedResourceOrigins]="zTrustedResourceOrigins()"
-          (zOnClose)="closePreview()"
-          (zOnDownload)="onDownload($event)"
-          (zOnNavigate)="onNavigatePreview($event)"
-          (zOnRemove)="onRemoveFromPreview($event)"
-        />
-      }
     </div>
   `,
                     changeDetection: ChangeDetectionStrategy.OnPush,
@@ -2197,107 +2287,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.9", ngImpor
                 }]
         }], propDecorators: { file: [{ type: i0.Input, args: [{ isSignal: true, alias: "file", required: true }] }], zSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "zSize", required: false }] }], zMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "zMode", required: false }] }] } });
 
-class ZGalleryPreviewRef {
-    _overlayRef;
-    _closed = false;
-    componentInstance = null;
-    zAfterClose = new EventEmitter();
-    constructor(_overlayRef) {
-        this._overlayRef = _overlayRef;
-    }
-    close() {
-        if (this._closed) {
-            return;
-        }
-        this._closed = true;
-        this.zAfterClose.emit();
-        this.zAfterClose.complete();
-        this._overlayRef?.dispose();
-    }
-}
-
-class ZGalleryPreviewService {
-    _document = inject(DOCUMENT);
-    _injector = inject(Injector);
-    _overlay = inject(Overlay);
-    _platformId = inject(PLATFORM_ID);
-    _zIndexService = inject(ZOverlayZIndexService);
-    open(fileOrOptions, options = {}) {
-        const previewOptions = this._normalizeOptions(fileOrOptions, options);
-        const overlayRef = this._createOverlay();
-        const previewRef = new ZGalleryPreviewRef(overlayRef ?? null);
-        if (!overlayRef) {
-            return previewRef;
-        }
-        const componentRef = overlayRef.attach(new ComponentPortal(ZGalleryPreviewComponent, null, this._injector));
-        previewRef.componentInstance = componentRef.instance;
-        componentRef.setInput('file', previewOptions.file);
-        componentRef.setInput('files', previewOptions.files);
-        componentRef.setInput('zShowRemove', previewOptions.zShowRemove ?? false);
-        componentRef.setInput('zPdfViewerConfig', previewOptions.zPdfViewerConfig ?? {});
-        componentRef.setInput('zTrustedResourceOrigins', previewOptions.zTrustedResourceOrigins ?? []);
-        componentRef.instance.zOnClose.subscribe(() => {
-            previewOptions.zOnClose?.();
-            previewRef.close();
-        });
-        componentRef.instance.zOnDownload.subscribe(file => this._handleDownload(file, previewOptions));
-        componentRef.instance.zOnNavigate.subscribe(file => {
-            componentRef.setInput('file', file);
-            previewOptions.zOnNavigate?.(file);
-        });
-        componentRef.instance.zOnRemove.subscribe(file => previewOptions.zOnRemove?.(file));
-        return previewRef;
-    }
-    _createOverlay() {
-        if (!isPlatformBrowser(this._platformId)) {
-            return undefined;
-        }
-        const overlayRef = this._overlay.create(new OverlayConfig({
-            hasBackdrop: false,
-            panelClass: 'z-gallery-preview-overlay-pane',
-            positionStrategy: this._overlay.position().global(),
-            scrollStrategy: this._overlay.scrollStrategies.block(),
-        }));
-        this._zIndexService.applyToOverlay(overlayRef);
-        this._zIndexService.deferMoveToTop(overlayRef);
-        return overlayRef;
-    }
-    _normalizeOptions(fileOrOptions, options) {
-        const previewOptions = 'file' in fileOrOptions ? fileOrOptions : { ...options, file: fileOrOptions };
-        const files = previewOptions.files?.length ? previewOptions.files : [previewOptions.file];
-        const hasCurrentFile = files.some(file => file.id === previewOptions.file.id);
-        return {
-            ...previewOptions,
-            files: hasCurrentFile ? files : [previewOptions.file, ...files],
-        };
-    }
-    _handleDownload(file, options) {
-        options.zOnDownload?.(file);
-        if (options.zDownload === false) {
-            return;
-        }
-        const downloadLink = file.downloadUrl || file.url;
-        if (!downloadLink || !isPlatformBrowser(this._platformId)) {
-            return;
-        }
-        const link = this._document.createElement('a');
-        link.href = downloadLink;
-        link.download = file.name;
-        link.target = '_blank';
-        this._document.body.appendChild(link);
-        link.click();
-        this._document.body.removeChild(link);
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.9", ngImport: i0, type: ZGalleryPreviewService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.0.9", ngImport: i0, type: ZGalleryPreviewService, providedIn: 'root' });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.9", ngImport: i0, type: ZGalleryPreviewService, decorators: [{
-            type: Injectable,
-            args: [{
-                    providedIn: 'root',
-                }]
-        }] });
-
 class ZGalleryPreviewItemDirective {
     zGalleryPreviewItem = input.required(...(ngDevMode ? [{ debugName: "zGalleryPreviewItem" }] : []));
     zGalleryPreviewFiles = input(null, ...(ngDevMode ? [{ debugName: "zGalleryPreviewFiles" }] : []));