@shival99/z-ui 2.0.29 → 2.0.31

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

@@ -1,6 +1,6 @@
 import * as i0 from '@angular/core';
-import { input, output, signal, computed, ViewEncapsulation, ChangeDetectionStrategy, Component, inject, effect, model, EventEmitter, Injector, PLATFORM_ID, Injectable } from '@angular/core';
-import * as i1 from '@angular/forms';
+import { input, output, signal, computed, ViewEncapsulation, ChangeDetectionStrategy, Component, inject, viewChild, effect, model, EventEmitter, Injector, PLATFORM_ID, Injectable, ElementRef, Directive } from '@angular/core';
+import * as i1$1 from '@angular/forms';
 import { FormsModule } from '@angular/forms';
 import { TranslatePipe } from '@ngx-translate/core';
 import { ZButtonComponent } from '@shival99/z-ui/components/z-button';
@@ -10,13 +10,15 @@ import { ZEmptyComponent } from '@shival99/z-ui/components/z-empty';
 import { ZIconComponent } from '@shival99/z-ui/components/z-icon';
 import { ZInputComponent } from '@shival99/z-ui/components/z-input';
 import { ZSkeletonComponent } from '@shival99/z-ui/components/z-skeleton';
-import { zMergeClasses } from '@shival99/z-ui/utils';
+import { zMergeClasses, zTransform } from '@shival99/z-ui/utils';
 import { ZTooltipDirective } from '@shival99/z-ui/components/z-tooltip';
+import { DOCUMENT, isPlatformBrowser } from '@angular/common';
 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 { DOCUMENT, isPlatformBrowser } from '@angular/common';
 import { ZOverlayZIndexService } from '@shival99/z-ui/services';
 
 const FILE_CATEGORY_STYLES = {
@@ -734,11 +736,283 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.9", ngImpor
                 }]
         }], propDecorators: { file: [{ type: i0.Input, args: [{ isSignal: true, alias: "file", required: true }] }], zMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "zMode", required: false }] }], zSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "zSize", required: false }] }], zShowDownload: [{ type: i0.Input, args: [{ isSignal: true, alias: "zShowDownload", required: false }] }], zShowPreview: [{ type: i0.Input, args: [{ isSignal: true, alias: "zShowPreview", required: false }] }], zShowRemove: [{ type: i0.Input, args: [{ isSignal: true, alias: "zShowRemove", required: false }] }], zSelectable: [{ type: i0.Input, args: [{ isSignal: true, alias: "zSelectable", required: false }] }], zSelected: [{ type: i0.Input, args: [{ isSignal: true, alias: "zSelected", required: false }] }], zOnDownload: [{ type: i0.Output, args: ["zOnDownload"] }], zOnPreview: [{ type: i0.Output, args: ["zOnPreview"] }], zOnRemove: [{ type: i0.Output, args: ["zOnRemove"] }], zOnSelect: [{ type: i0.Output, args: ["zOnSelect"] }] } });
 
+const Z_GALLERY_PDF_VIEWER_CHROME_CSS = `
+#toolbarContainer,
+#toolbarContainer * {
+  box-sizing: border-box;
+}
+
+#toolbarContainer,
+.findbar,
+.secondaryToolbar {
+  --toolbar-bg-color: #050505;
+  --toolbar-box-shadow: none;
+  --toolbar-border-bottom: 1px solid #222222;
+  --main-color: #f5f5f5;
+  --toolbar-icon-bg-color: #e7e7e7;
+  --toolbar-icon-hover-bg-color: #ffffff;
+  --toolbar-icon-opacity: 0.92;
+  --button-hover-color: #1f1f1f;
+  --toggled-btn-bg-color: #2a2a2a;
+  --toggled-btn-color: #ffffff;
+  --separator-color: #303030;
+  --field-bg-color: #111111;
+  --field-color: #f5f5f5;
+  --field-border-color: #3a3a3a;
+  --dropdown-btn-bg-color: #111111;
+  --dropdown-btn-border: 1px solid #3a3a3a;
+}
+
+#toolbarContainer {
+  height: var(--toolbar-height) !important;
+  padding: var(--toolbar-vertical-padding) var(--toolbar-horizontal-padding) !important;
+  background-color: var(--toolbar-bg-color) !important;
+  box-shadow: var(--toolbar-box-shadow) !important;
+  border-bottom: var(--toolbar-border-bottom) !important;
+  font: message-box !important;
+}
+
+#toolbarContainer #toolbarViewer,
+#toolbarViewerLeft,
+#toolbarViewerMiddle,
+#toolbarViewerRight {
+  height: 100%;
+  align-items: center;
+}
+
+#toolbarContainer #toolbarViewer {
+  justify-content: space-between;
+}
+
+#toolbarViewerLeft,
+#toolbarViewerMiddle,
+#toolbarViewerRight,
+.toolbarHorizontalGroup {
+  gap: 1px;
+}
+
+#toolbarViewerLeft .loadingInput {
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+}
+
+.toolbarButton,
+.toolbarButtonWithContainer {
+  height: 100% !important;
+  aspect-ratio: 1 !important;
+  flex: none !important;
+}
+
+.toolbarButton {
+  display: flex !important;
+  align-items: center !important;
+  justify-content: center !important;
+  padding: 0 !important;
+  border: none !important;
+  border-radius: 2px !important;
+  background: none !important;
+  color: var(--main-color) !important;
+  font: message-box !important;
+  outline: none !important;
+}
+
+.toolbarButton:is(:hover, :focus-visible) {
+  background-color: var(--button-hover-color) !important;
+  color: var(--main-color) !important;
+}
+
+.toolbarButton::before {
+  width: var(--icon-size) !important;
+  height: var(--icon-size) !important;
+  background-color: var(--toolbar-icon-bg-color) !important;
+  opacity: var(--toolbar-icon-opacity) !important;
+  -webkit-mask-size: cover !important;
+  mask-size: cover !important;
+  -webkit-mask-position: center !important;
+  mask-position: center !important;
+}
+
+.toolbarButton:is(:hover, :focus-visible)::before {
+  background-color: var(--toolbar-icon-hover-bg-color) !important;
+}
+
+.toolbarButton.toggled {
+  background-color: var(--toggled-btn-bg-color) !important;
+  color: var(--toggled-btn-color) !important;
+}
+
+.toolbarButton.toggled::before {
+  background-color: var(--toggled-btn-color) !important;
+}
+
+.splitToolbarButtonSeparator {
+  width: 0 !important;
+  height: 62% !important;
+  border-left: 1px solid var(--separator-color) !important;
+  border-right: none !important;
+}
+
+.toolbarField {
+  padding: 4px 7px !important;
+  margin: 3px 0 !important;
+  border-radius: 2px !important;
+  background-color: var(--field-bg-color) !important;
+  background-clip: padding-box !important;
+  border: 1px solid var(--field-border-color) !important;
+  box-shadow: none !important;
+  color: var(--field-color) !important;
+  font: message-box !important;
+  font-size: 12px !important;
+  line-height: 16px !important;
+  outline: none !important;
+}
+
+.toolbarField:focus {
+  border-color: #0a84ff !important;
+}
+
+#toolbarViewerLeft #pageNumber.toolbarField {
+  appearance: textfield !important;
+  width: 48px !important;
+  min-width: 48px !important;
+  max-width: 48px !important;
+  height: auto !important;
+  min-height: 0 !important;
+  margin: 3px 0 !important;
+  padding: 4px 7px !important;
+  border-radius: 2px !important;
+  font-size: 12px !important;
+  line-height: 16px !important;
+  text-align: end !important;
+  background-size: 0 0 !important;
+  transition-property: none !important;
+}
+
+#pageNumber::-webkit-inner-spin-button {
+  -webkit-appearance: none !important;
+  appearance: none !important;
+}
+
+#toolbarViewerLeft #numPages.toolbarLabel {
+  white-space: nowrap;
+}
+
+.toolbarLabel {
+  width: max-content !important;
+  min-width: 16px !important;
+  height: 100% !important;
+  padding-inline: 4px !important;
+  margin: 2px !important;
+  border-radius: 2px !important;
+  color: var(--main-color) !important;
+  font-size: 12px !important;
+  line-height: 14px !important;
+  text-align: left !important;
+  user-select: none !important;
+  cursor: default !important;
+  display: inline flex !important;
+  flex-direction: column !important;
+  align-items: center !important;
+  justify-content: center !important;
+}
+
+.dropdownToolbarButton {
+  width: fit-content !important;
+  min-width: 140px !important;
+  padding: 0 !important;
+  border: var(--dropdown-btn-border) !important;
+  border-radius: 2px !important;
+  background-color: var(--dropdown-btn-bg-color) !important;
+  color: var(--main-color) !important;
+  font-size: 12px !important;
+  line-height: 14px !important;
+}
+
+.dropdownToolbarButton:hover {
+  background-color: var(--button-hover-color) !important;
+}
+
+.dropdownToolbarButton > select {
+  height: 28px !important;
+  margin: 0 !important;
+  padding-block: 1px 2px !important;
+  padding-inline: 6px 38px !important;
+  border: none !important;
+  background-color: var(--dropdown-btn-bg-color) !important;
+  color: var(--main-color) !important;
+  font: message-box !important;
+  font-size: 12px !important;
+}
+
+.dropdownToolbarButton > select > option {
+  background-color: #111111 !important;
+  color: #f5f5f5 !important;
+}
+
+#viewerContainer,
+#viewer,
+.pdfViewer,
+.pdfViewer .page,
+.pdfViewer .page canvas {
+  border-color: oklch(0.49 0 0) !important;
+  outline-color: oklch(0.49 0 0) !important;
+}
+
+.pdfViewer .page {
+  background-color: oklch(0.49 0 0) !important;
+  border: 0 !important;
+  box-shadow: none !important;
+}
+
+@media (max-width: 768px) {
+  #toolbarContainer {
+    --toolbar-horizontal-padding: 4px;
+  }
+
+  #editorModeButtons,
+  #editorSignatureButton,
+  #editorHighlightButton,
+  #editorFreeTextButton,
+  #editorInkButton,
+  #editorStampButton {
+    display: none !important;
+  }
+
+  #toolbarViewerRight {
+    gap: 0;
+  }
+
+  .dropdownToolbarButton {
+    min-width: 112px !important;
+  }
+
+  #toolbarViewerLeft #pageNumber.toolbarField {
+    width: 40px !important;
+    min-width: 40px !important;
+    max-width: 40px !important;
+  }
+}
+
+@media (max-width: 480px) {
+  #printButton,
+  #secondaryToolbarToggleButton {
+    display: none !important;
+  }
+
+  .dropdownToolbarButton {
+    min-width: 96px !important;
+  }
+}
+`;
+
 class ZGalleryPreviewComponent {
+    _document = inject(DOCUMENT);
     _sanitizer = inject(DomSanitizer);
     file = input.required(...(ngDevMode ? [{ debugName: "file" }] : []));
     files = input([], ...(ngDevMode ? [{ debugName: "files" }] : []));
     zShowRemove = input(false, ...(ngDevMode ? [{ debugName: "zShowRemove" }] : []));
+    zPdfViewerConfig = input({}, ...(ngDevMode ? [{ debugName: "zPdfViewerConfig" }] : []));
     zTrustedResourceOrigins = input([], ...(ngDevMode ? [{ debugName: "zTrustedResourceOrigins" }] : []));
     zOnClose = output();
     zOnDownload = output();
@@ -749,8 +1023,10 @@ class ZGalleryPreviewComponent {
     rotation = signal(0, ...(ngDevMode ? [{ debugName: "rotation" }] : []));
     isConverting = signal(false, ...(ngDevMode ? [{ debugName: "isConverting" }] : []));
     conversionError = signal(null, ...(ngDevMode ? [{ debugName: "conversionError" }] : []));
+    previewError = signal(false, ...(ngDevMode ? [{ debugName: "previewError" }] : []));
     docHtmlContent = signal(null, ...(ngDevMode ? [{ debugName: "docHtmlContent" }] : []));
     textContent = signal('', ...(ngDevMode ? [{ debugName: "textContent" }] : []));
+    pdfViewer = viewChild('pdfViewer', ...(ngDevMode ? [{ debugName: "pdfViewer" }] : []));
     _mediaLoaded = signal(false, ...(ngDevMode ? [{ debugName: "_mediaLoaded" }] : []));
     _loadingStartTime = 0;
     _minLoadingTime = 300;
@@ -767,6 +1043,7 @@ class ZGalleryPreviewComponent {
             this.rotation.set(0);
             this.isConverting.set(false);
             this.conversionError.set(null);
+            this.previewError.set(false);
             this.docHtmlContent.set(null);
             this.textContent.set('');
             const category = getFileCategory(currentFile);
@@ -852,16 +1129,93 @@ class ZGalleryPreviewComponent {
     hasNext = computed(() => this.currentIndex() < this.files().length - 1, ...(ngDevMode ? [{ debugName: "hasNext" }] : []));
     isImageFile = computed(() => isImage(this.file()), ...(ngDevMode ? [{ debugName: "isImageFile" }] : []));
     isPdf = computed(() => getFileCategory(this.file()) === 'pdf', ...(ngDevMode ? [{ debugName: "isPdf" }] : []));
-    safePdfUrl = computed(() => {
-        const { url } = this.file();
+    pdfUrl = computed(() => {
+        const url = this.file().url || this.file().downloadUrl;
         if (!url) {
             return null;
         }
         if (!this._isAllowedResourceUrl(url)) {
             return null;
         }
-        return this._sanitizer.bypassSecurityTrustResourceUrl(url);
-    }, ...(ngDevMode ? [{ debugName: "safePdfUrl" }] : []));
+        return url;
+    }, ...(ngDevMode ? [{ debugName: "pdfUrl" }] : []));
+    pdfViewerId = computed(() => {
+        const normalizedId = this.file().id.replace(/[^a-zA-Z0-9_-]/g, '-');
+        return `z-gallery-preview-${normalizedId}`;
+    }, ...(ngDevMode ? [{ debugName: "pdfViewerId" }] : []));
+    pdfViewerConfig = computed(() => {
+        const config = this.zPdfViewerConfig();
+        const { controlVisibility } = config;
+        const { groupVisibility } = config;
+        const { autoActions } = config;
+        const { viewerConfig } = config;
+        const { themeConfig } = config;
+        const { layoutConfig } = config;
+        return {
+            ...config,
+            viewerFolder: config.viewerFolder ?? '/assets/pdfjs',
+            locale: viewerConfig?.locale ?? config.locale ?? '',
+            showSpinner: viewerConfig?.showSpinner ?? config.showSpinner ?? false,
+            useOnlyCssZoom: viewerConfig?.useOnlyCssZoom ?? config.useOnlyCssZoom ?? false,
+            diagnosticLogs: viewerConfig?.diagnosticLogs ?? config.diagnosticLogs ?? false,
+            showOpenFile: controlVisibility?.openFile ?? config.showOpenFile ?? false,
+            showAnnotations: controlVisibility?.annotations ?? config.showAnnotations ?? true,
+            showDownload: controlVisibility?.download ?? config.showDownload ?? true,
+            showViewBookmark: controlVisibility?.viewBookmark ?? config.showViewBookmark ?? true,
+            showPrint: controlVisibility?.print ?? config.showPrint ?? true,
+            showFullScreen: controlVisibility?.fullScreen ?? config.showFullScreen ?? true,
+            showFind: controlVisibility?.find ?? config.showFind ?? true,
+            downloadOnLoad: autoActions?.downloadOnLoad ?? config.downloadOnLoad ?? false,
+            printOnLoad: autoActions?.printOnLoad ?? config.printOnLoad ?? false,
+            rotateCW: autoActions?.rotateCW ?? config.rotateCW ?? false,
+            rotateCCW: autoActions?.rotateCCW ?? config.rotateCCW ?? false,
+            showLastPageOnLoad: autoActions?.showLastPageOnLoad ?? config.showLastPageOnLoad ?? false,
+            showToolbarLeft: groupVisibility?.toolbarLeft ?? config.showToolbarLeft ?? true,
+            showToolbarMiddle: groupVisibility?.toolbarMiddle ?? config.showToolbarMiddle ?? true,
+            showToolbarRight: groupVisibility?.toolbarRight ?? config.showToolbarRight ?? true,
+            showSecondaryToolbarToggle: groupVisibility?.secondaryToolbarToggle ?? config.showSecondaryToolbarToggle ?? true,
+            showSidebar: groupVisibility?.sidebar ?? config.showSidebar ?? true,
+            showSidebarLeft: groupVisibility?.sidebarLeft ?? config.showSidebarLeft ?? true,
+            showSidebarRight: groupVisibility?.sidebarRight ?? config.showSidebarRight ?? true,
+            toolbarDensity: layoutConfig?.toolbarDensity ?? config.toolbarDensity ?? 'default',
+            sidebarWidth: layoutConfig?.sidebarWidth ?? config.sidebarWidth,
+            toolbarPosition: layoutConfig?.toolbarPosition ?? config.toolbarPosition ?? 'top',
+            sidebarPosition: layoutConfig?.sidebarPosition ?? config.sidebarPosition ?? 'left',
+            responsiveBreakpoint: layoutConfig?.responsiveBreakpoint ?? config.responsiveBreakpoint,
+            zoom: config.zoom ?? 'page-fit',
+            rotation: config.rotation ?? 0,
+            cursor: config.cursor ?? 'select',
+            scroll: config.scroll ?? 'vertical',
+            spread: config.spread ?? 'none',
+            pageMode: config.pageMode ?? 'none',
+            page: config.page ?? 1,
+            iframeBorder: config.iframeBorder ?? 0,
+            theme: themeConfig?.theme ?? config.theme ?? 'auto',
+            primaryColor: themeConfig?.primaryColor ?? config.primaryColor,
+            backgroundColor: themeConfig?.backgroundColor ?? config.backgroundColor,
+            pageBorderColor: themeConfig?.pageBorderColor ?? config.pageBorderColor,
+            pageSpacing: themeConfig?.pageSpacing ?? config.pageSpacing,
+            toolbarColor: themeConfig?.toolbarColor ?? config.toolbarColor,
+            textColor: themeConfig?.textColor ?? config.textColor,
+            borderRadius: themeConfig?.borderRadius ?? config.borderRadius,
+            customCSS: this._mergePdfViewerCss(themeConfig?.customCSS ?? config.customCSS),
+            cspNonce: themeConfig?.cspNonce ?? config.cspNonce,
+            iframeTitle: themeConfig?.iframeTitle ?? config.iframeTitle,
+            urlValidation: config.urlValidation ?? true,
+            controlVisibility: controlVisibility ?? {},
+            groupVisibility: groupVisibility ?? {},
+            autoActions: autoActions ?? {},
+            viewerConfig: viewerConfig ?? {},
+            themeConfig: themeConfig ?? {},
+            layoutConfig: layoutConfig ?? {},
+        };
+    }, ...(ngDevMode ? [{ debugName: "pdfViewerConfig" }] : []));
+    _mergePdfViewerCss(customCSS) {
+        if (!customCSS) {
+            return Z_GALLERY_PDF_VIEWER_CHROME_CSS;
+        }
+        return `${Z_GALLERY_PDF_VIEWER_CHROME_CSS}\n${customCSS}`;
+    }
     isVideo = computed(() => getFileCategory(this.file()) === 'video', ...(ngDevMode ? [{ debugName: "isVideo" }] : []));
     isWordFile = computed(() => getFileCategory(this.file()) === 'word', ...(ngDevMode ? [{ debugName: "isWordFile" }] : []));
     isExcelFile = computed(() => getFileCategory(this.file()) === 'excel', ...(ngDevMode ? [{ debugName: "isExcelFile" }] : []));
@@ -951,6 +1305,7 @@ class ZGalleryPreviewComponent {
             this.isLoading.set(true);
             this._mediaLoaded.set(false);
             this._loadingStartTime = Date.now();
+            this.previewError.set(false);
             this.zOnNavigate.emit(allFiles[newIndex]);
         }
     }
@@ -972,9 +1327,11 @@ class ZGalleryPreviewComponent {
         this._completeLoading();
     }
     onPdfLoad() {
+        this._queueMobilePdfFit();
         this._completeLoading();
     }
     onMediaError() {
+        this.previewError.set(true);
         this._completeLoading();
     }
     download() {
@@ -988,530 +1345,32 @@ class ZGalleryPreviewComponent {
             this.close();
         }
     }
+    _queueMobilePdfFit() {
+        if (this.zPdfViewerConfig().zoom) {
+            return;
+        }
+        const { defaultView } = this._document;
+        if (!defaultView?.matchMedia('(max-width: 768px)').matches) {
+            return;
+        }
+        const syncZoom = () => {
+            void this.pdfViewer()?.setZoom('page-fit');
+        };
+        defaultView.requestAnimationFrame(() => {
+            syncZoom();
+            defaultView.setTimeout(syncZoom, 120);
+        });
+    }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.9", ngImport: i0, type: ZGalleryPreviewComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.9", type: ZGalleryPreviewComponent, isStandalone: true, selector: "z-gallery-preview", inputs: { file: { classPropertyName: "file", publicName: "file", isSignal: true, isRequired: true, transformFunction: null }, files: { classPropertyName: "files", publicName: "files", isSignal: true, isRequired: false, transformFunction: null }, zShowRemove: { classPropertyName: "zShowRemove", publicName: "zShowRemove", isSignal: true, isRequired: false, transformFunction: null }, zTrustedResourceOrigins: { classPropertyName: "zTrustedResourceOrigins", publicName: "zTrustedResourceOrigins", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { zOnClose: "zOnClose", zOnDownload: "zOnDownload", zOnNavigate: "zOnNavigate", zOnRemove: "zOnRemove" }, host: { listeners: { "document:keydown": "onKeyDown($event)" }, classAttribute: "z-gallery-preview z-[9999]" }, ngImport: i0, template: `
-    <div
-      class="animate-in fade-in fixed inset-0 z-50 flex items-center justify-center bg-black/80 backdrop-blur-sm duration-200"
-      (click)="onBackdropClick($event)"
-    >
-      <button
-        z-button
-        zType="ghost"
-        zShape="circle"
-        class="absolute top-4 right-4 z-10 text-white hover:bg-white/20"
-        (click)="close()"
-      >
-        <i z-icon zType="lucideX" zSize="24"></i>
-      </button>
-
-      @if (hasPrev()) {
-        <button
-          z-button
-          zType="ghost"
-          zShape="circle"
-          class="absolute left-4 z-10 text-white hover:bg-white/20"
-          (click)="navigate(-1)"
-        >
-          <i z-icon zType="lucideChevronLeft" zSize="32"></i>
-        </button>
-      }
-
-      @if (hasNext()) {
-        <button
-          z-button
-          zType="ghost"
-          zShape="circle"
-          class="absolute right-4 z-10 text-white hover:bg-white/20"
-          (click)="navigate(1)"
-        >
-          <i z-icon zType="lucideChevronRight" zSize="32"></i>
-        </button>
-      }
-
-      <div class="flex h-full w-full flex-col items-center" (click)="$event.stopPropagation()">
-        <div
-          class="dark:!border-border absolute top-4 left-1/2 z-10 flex -translate-x-1/2 items-center gap-2 rounded-[0.375rem] border !border-transparent bg-black/60 px-4 py-2 text-sm text-white backdrop-blur-sm dark:border"
-        >
-          <div class="flex min-w-0 items-baseline gap-1.5">
-            <span class="max-w-[12.5rem] truncate font-medium">{{ file().name }}</span>
-            <span class="shrink-0 text-white/70">({{ formattedSize() }})</span>
-          </div>
-
-          @if (files().length > 1) {
-            <span class="text-white/70">{{ currentIndex() + 1 }} / {{ files().length }}</span>
-          }
-
-          <div class="ml-1 flex items-center gap-0.5">
-            @if (isImageFile()) {
-              <button
-                z-button
-                zType="ghost"
-                zSize="xs"
-                zShape="circle"
-                class="text-white hover:bg-white/20"
-                z-tooltip
-                [zContent]="'i18n_z_ui_gallery_rotate_left' | translate"
-                (click)="rotateLeft()"
-              >
-                <i z-icon zType="lucideUndo" zSize="14"></i>
-              </button>
-              <button
-                z-button
-                zType="ghost"
-                zSize="xs"
-                zShape="circle"
-                class="text-white hover:bg-white/20"
-                z-tooltip
-                [zContent]="'i18n_z_ui_gallery_rotate_right' | translate"
-                (click)="rotateRight()"
-              >
-                <i z-icon zType="lucideRedo" zSize="14"></i>
-              </button>
-            }
-
-            <button
-              z-button
-              zType="ghost"
-              zSize="xs"
-              zShape="circle"
-              class="text-white hover:bg-white/20"
-              z-tooltip
-              [zContent]="'i18n_z_ui_gallery_download' | translate"
-              (click)="download()"
-            >
-              <i z-icon zType="lucideDownload" zSize="14"></i>
-            </button>
-
-            @if (zShowRemove()) {
-              <button
-                z-button
-                zType="ghost"
-                zSize="xs"
-                zShape="circle"
-                class="text-white hover:bg-white/20"
-                z-tooltip
-                [zContent]="'i18n_z_ui_gallery_delete' | translate"
-                (click)="remove()"
-              >
-                <i z-icon zType="lucideTrash2" zSize="14"></i>
-              </button>
-            }
-          </div>
-        </div>
-
-        <div class="relative flex flex-1 items-center justify-center pt-16">
-          @if (isImageFile()) {
-            <div class="relative flex h-[60vh] w-[70vw] items-center justify-center">
-              @if (isLoading()) {
-                <z-skeleton class="absolute inset-0 rounded-lg" />
-              }
-              <img
-                [src]="file().url || file().thumbnailUrl"
-                [alt]="file().name"
-                class="max-h-full max-w-full rounded-lg object-contain shadow-2xl transition-opacity duration-300"
-                [class.opacity-0]="isLoading()"
-                [class.opacity-100]="!isLoading()"
-                [class.cursor-zoom-in]="!zoomed()"
-                [class.cursor-zoom-out]="zoomed()"
-                [style.transform]="imageTransform()"
-                (load)="onImageLoad()"
-                (error)="onMediaError()"
-                (click)="toggleZoom()"
-              />
-            </div>
-          } @else if (isPdf() && safePdfUrl()) {
-            <div class="relative h-[75vh] w-[85vw]">
-              @if (isLoading()) {
-                <z-skeleton class="absolute inset-0 rounded-lg" />
-              }
-              <iframe
-                [src]="safePdfUrl()"
-                class="absolute inset-0 size-full rounded-lg bg-white shadow-2xl transition-opacity duration-300"
-                [class.opacity-0]="isLoading()"
-                [class.opacity-100]="!isLoading()"
-                frameborder="0"
-                referrerpolicy="no-referrer"
-                (load)="onPdfLoad()"
-              ></iframe>
-            </div>
-          } @else if (isVideo()) {
-            <div class="relative flex h-[60vh] w-[70vw] items-center justify-center">
-              @if (isLoading()) {
-                <z-skeleton class="absolute inset-0 rounded-lg" />
-              }
-              <video
-                [src]="file().url"
-                controls
-                autoplay
-                class="max-h-full max-w-full rounded-lg shadow-2xl transition-opacity duration-300"
-                [class.opacity-0]="isLoading()"
-                [class.opacity-100]="!isLoading()"
-                (loadeddata)="onVideoLoad()"
-                (error)="onMediaError()"
-              >
-                Your browser does not support the video tag.
-              </video>
-            </div>
-          } @else if (isWordFile()) {
-            <div class="relative h-[75vh] w-[85vw]">
-              @if (isLoading() || isConverting()) {
-                <z-skeleton class="absolute inset-0 rounded-lg" />
-              }
-              @if (conversionError()) {
-                <div class="bg-card flex size-full flex-col items-center justify-center rounded-lg p-12 shadow-2xl">
-                  <div class="bg-muted mb-4 flex size-24 items-center justify-center rounded-xl">
-                    <i z-icon [zType]="fileIcon()" zSize="40" class="text-muted-foreground"></i>
-                  </div>
-                  <span class="text-foreground mb-2 text-lg font-medium">{{ file().name }}</span>
-                  <span class="text-muted-foreground rounded-md bg-red-100 px-3 py-1.5 text-xs dark:bg-red-900/30">
-                    <span class="text-red-700 dark:text-red-300">{{ conversionError() }}</span>
-                  </span>
-                </div>
-              } @else if (docHtmlContent()) {
-                <div
-                  class="absolute inset-0 overflow-auto rounded-lg bg-white p-8 text-gray-950 shadow-2xl"
-                  [innerHTML]="docHtmlContent()"
-                ></div>
-              }
-            </div>
-          } @else if (isExcelFile()) {
-            <div class="relative h-[75vh] w-[85vw]">
-              @if (isLoading() || isConverting()) {
-                <z-skeleton class="absolute inset-0 rounded-lg" />
-              }
-              @if (conversionError()) {
-                <div class="bg-card flex size-full flex-col items-center justify-center rounded-lg p-12 shadow-2xl">
-                  <div class="bg-muted mb-4 flex size-24 items-center justify-center rounded-xl">
-                    <i z-icon [zType]="fileIcon()" zSize="40" class="text-muted-foreground"></i>
-                  </div>
-                  <span class="text-foreground mb-2 text-lg font-medium">{{ file().name }}</span>
-                  <span class="text-muted-foreground rounded-md bg-red-100 px-3 py-1.5 text-xs dark:bg-red-900/30">
-                    <span class="text-red-700 dark:text-red-300">{{ conversionError() }}</span>
-                  </span>
-                </div>
-              } @else if (docHtmlContent()) {
-                <div
-                  class="absolute inset-0 overflow-auto rounded-lg bg-white p-4 text-gray-950 shadow-2xl"
-                  [innerHTML]="docHtmlContent()"
-                ></div>
-              }
-            </div>
-          } @else if (isTextFile()) {
-            <div class="relative h-[75vh] w-[85vw]">
-              @if (isLoading() || isConverting()) {
-                <z-skeleton class="absolute inset-0 rounded-lg" />
-              }
-              @if (conversionError()) {
-                <div class="bg-card flex size-full flex-col items-center justify-center rounded-lg p-12 shadow-2xl">
-                  <div class="bg-muted mb-4 flex size-24 items-center justify-center rounded-xl">
-                    <i z-icon [zType]="fileIcon()" zSize="40" class="text-muted-foreground"></i>
-                  </div>
-                  <span class="text-foreground mb-2 text-lg font-medium">{{ file().name }}</span>
-                  <span class="text-muted-foreground rounded-md bg-red-100 px-3 py-1.5 text-xs dark:bg-red-900/30">
-                    <span class="text-red-700 dark:text-red-300">{{ conversionError() }}</span>
-                  </span>
-                </div>
-              } @else if (textContent()) {
-                <div class="absolute inset-0 overflow-auto rounded-lg bg-gray-950 p-6 shadow-2xl">
-                  <pre class="font-mono text-sm leading-relaxed whitespace-pre-wrap text-gray-100">{{
-                    textContent()
-                  }}</pre>
-                </div>
-              }
-            </div>
-          } @else {
-            <div class="bg-card flex flex-col items-center justify-center rounded-lg p-12 shadow-2xl">
-              <div class="bg-muted mb-4 flex size-24 items-center justify-center rounded-xl">
-                <i z-icon [zType]="fileIcon()" zSize="40" class="text-muted-foreground"></i>
-              </div>
-              <span class="text-foreground mb-2 text-lg font-medium">{{ file().name }}</span>
-              <span class="text-muted-foreground mb-4 text-sm">{{ formattedSize() }}</span>
-              <span class="text-muted-foreground rounded-md bg-amber-100 px-3 py-1.5 text-xs dark:bg-amber-900/30">
-                <i
-                  z-icon
-                  zType="lucideInfo"
-                  zSize="14"
-                  class="mr-1 inline-block align-middle text-amber-600 dark:text-amber-400"
-                ></i>
-                <span class="align-middle text-amber-700 dark:text-amber-300">
-                  {{ 'i18n_z_ui_gallery_preview_not_supported' | translate }}
-                </span>
-              </span>
-            </div>
-          }
-        </div>
-      </div>
-    </div>
-  `, isInline: true, dependencies: [{ 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: ZIconComponent, selector: "z-icon, [z-icon]", inputs: ["class", "zType", "zAnimatedType", "zAnimate", "zAnimationTrigger", "zSize", "zStrokeWidth", "zSvg"] }, { kind: "component", type: ZSkeletonComponent, selector: "z-skeleton", inputs: ["class", "zType", "zSize", "zWidth", "zHeight", "zRows", "zGap", "zAnimated", "zRadius"] }, { kind: "directive", type: ZTooltipDirective, selector: "[z-tooltip], [zTooltip]", inputs: ["zContent", "zPosition", "zTooltipPosition", "zTrigger", "zTooltipTrigger", "zTooltipType", "zTooltipSize", "zClass", "zTooltipClass", "zShowDelay", "zTooltipShowDelay", "zHideDelay", "zTooltipHideDelay", "zArrow", "zTooltipArrow", "zDisabled", "zTooltipDisabled", "zOffset", "zTooltipOffset", "zAutoDetect", "zTriggerElement", "zAlwaysShow", "zMaxWidth"], outputs: ["zShow", "zHide"], exportAs: ["zTooltip"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.9", type: ZGalleryPreviewComponent, isStandalone: true, selector: "z-gallery-preview", inputs: { file: { classPropertyName: "file", publicName: "file", isSignal: true, isRequired: true, transformFunction: null }, files: { classPropertyName: "files", publicName: "files", isSignal: true, isRequired: false, transformFunction: null }, zShowRemove: { classPropertyName: "zShowRemove", publicName: "zShowRemove", isSignal: true, isRequired: false, transformFunction: null }, zPdfViewerConfig: { classPropertyName: "zPdfViewerConfig", publicName: "zPdfViewerConfig", isSignal: true, isRequired: false, transformFunction: null }, zTrustedResourceOrigins: { classPropertyName: "zTrustedResourceOrigins", publicName: "zTrustedResourceOrigins", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { zOnClose: "zOnClose", zOnDownload: "zOnDownload", zOnNavigate: "zOnNavigate", zOnRemove: "zOnRemove" }, host: { listeners: { "document:keydown": "onKeyDown($event)" }, classAttribute: "z-gallery-preview z-[9999]" }, viewQueries: [{ propertyName: "pdfViewer", first: true, predicate: ["pdfViewer"], descendants: true, isSignal: true }], ngImport: i0, 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"], dependencies: [{ 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: ZIconComponent, selector: "z-icon, [z-icon]", inputs: ["class", "zType", "zAnimatedType", "zAnimate", "zAnimationTrigger", "zSize", "zStrokeWidth", "zSvg"] }, { kind: "component", type: ZSkeletonComponent, selector: "z-skeleton", inputs: ["class", "zType", "zSize", "zWidth", "zHeight", "zRows", "zGap", "zAnimated", "zRadius"] }, { kind: "directive", type: ZTooltipDirective, selector: "[z-tooltip], [zTooltip]", inputs: ["zContent", "zPosition", "zTooltipPosition", "zTrigger", "zTooltipTrigger", "zTooltipType", "zTooltipSize", "zClass", "zTooltipClass", "zShowDelay", "zTooltipShowDelay", "zHideDelay", "zTooltipHideDelay", "zArrow", "zTooltipArrow", "zDisabled", "zTooltipDisabled", "zOffset", "zTooltipOffset", "zAutoDetect", "zTriggerElement", "zAlwaysShow", "zMaxWidth"], outputs: ["zShow", "zHide"], exportAs: ["zTooltip"] }, { kind: "ngmodule", type: PdfJsViewerModule }, { kind: "component", type: i1.PdfJsViewerComponent, selector: "ng2-pdfjs-viewer", inputs: ["viewerId", "viewerFolder", "externalWindow", "target", "showSpinner", "downloadFileName", "locale", "useOnlyCssZoom", "diagnosticLogs", "showOpenFile", "showAnnotations", "showDownload", "showViewBookmark", "showPrint", "showFullScreen", "showFind", "downloadOnLoad", "printOnLoad", "rotateCW", "rotateCCW", "showLastPageOnLoad", "namedDest", "errorOverride", "errorAppend", "errorMessage", "urlValidation", "customSecurityTpl", "theme", "primaryColor", "backgroundColor", "pageBorderColor", "pageSpacing", "toolbarColor", "textColor", "borderRadius", "customCSS", "cspNonce", "iframeTitle", "customSpinnerTpl", "spinnerClass", "customErrorTpl", "errorClass", "showToolbarLeft", "showToolbarMiddle", "showToolbarRight", "showSecondaryToolbarToggle", "showSidebar", "showSidebarLeft", "showSidebarRight", "toolbarDensity", "sidebarWidth", "toolbarPosition", "sidebarPosition", "responsiveBreakpoint", "controlVisibility", "autoActions", "errorHandling", "viewerConfig", "themeConfig", "groupVisibility", "layoutConfig", "startDownload", "startPrint", "openFile", "download", "print", "fullScreen", "find", "viewBookmark", "lastPage", "externalWindowOptions", "iframeBorder", "zoom", "rotation", "cursor", "scroll", "spread", "pageMode", "page", "pdfSrc"], outputs: ["onBeforePrint", "onAfterPrint", "onDocumentLoad", "onPageChange", "onScaleChange", "onRotationChange", "onDocumentError", "onDocumentInit", "onPagesInit", "onPresentationModeChanged", "onOpenFile", "onFind", "onUpdateFindMatchesCount", "onMetadataLoaded", "onOutlineLoaded", "onPageRendered", "onAnnotationLayerRendered", "onBookmarkClick", "onIdle", "zoomChange", "cursorChange", "scrollChange", "spreadChange", "pageModeChange"] }, { 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: ZGalleryPreviewComponent, decorators: [{
             type: Component,
-            args: [{
-                    selector: 'z-gallery-preview',
-                    imports: [ZButtonComponent, ZIconComponent, ZSkeletonComponent, ZTooltipDirective, TranslatePipe],
-                    standalone: true,
-                    template: `
-    <div
-      class="animate-in fade-in fixed inset-0 z-50 flex items-center justify-center bg-black/80 backdrop-blur-sm duration-200"
-      (click)="onBackdropClick($event)"
-    >
-      <button
-        z-button
-        zType="ghost"
-        zShape="circle"
-        class="absolute top-4 right-4 z-10 text-white hover:bg-white/20"
-        (click)="close()"
-      >
-        <i z-icon zType="lucideX" zSize="24"></i>
-      </button>
-
-      @if (hasPrev()) {
-        <button
-          z-button
-          zType="ghost"
-          zShape="circle"
-          class="absolute left-4 z-10 text-white hover:bg-white/20"
-          (click)="navigate(-1)"
-        >
-          <i z-icon zType="lucideChevronLeft" zSize="32"></i>
-        </button>
-      }
-
-      @if (hasNext()) {
-        <button
-          z-button
-          zType="ghost"
-          zShape="circle"
-          class="absolute right-4 z-10 text-white hover:bg-white/20"
-          (click)="navigate(1)"
-        >
-          <i z-icon zType="lucideChevronRight" zSize="32"></i>
-        </button>
-      }
-
-      <div class="flex h-full w-full flex-col items-center" (click)="$event.stopPropagation()">
-        <div
-          class="dark:!border-border absolute top-4 left-1/2 z-10 flex -translate-x-1/2 items-center gap-2 rounded-[0.375rem] border !border-transparent bg-black/60 px-4 py-2 text-sm text-white backdrop-blur-sm dark:border"
-        >
-          <div class="flex min-w-0 items-baseline gap-1.5">
-            <span class="max-w-[12.5rem] truncate font-medium">{{ file().name }}</span>
-            <span class="shrink-0 text-white/70">({{ formattedSize() }})</span>
-          </div>
-
-          @if (files().length > 1) {
-            <span class="text-white/70">{{ currentIndex() + 1 }} / {{ files().length }}</span>
-          }
-
-          <div class="ml-1 flex items-center gap-0.5">
-            @if (isImageFile()) {
-              <button
-                z-button
-                zType="ghost"
-                zSize="xs"
-                zShape="circle"
-                class="text-white hover:bg-white/20"
-                z-tooltip
-                [zContent]="'i18n_z_ui_gallery_rotate_left' | translate"
-                (click)="rotateLeft()"
-              >
-                <i z-icon zType="lucideUndo" zSize="14"></i>
-              </button>
-              <button
-                z-button
-                zType="ghost"
-                zSize="xs"
-                zShape="circle"
-                class="text-white hover:bg-white/20"
-                z-tooltip
-                [zContent]="'i18n_z_ui_gallery_rotate_right' | translate"
-                (click)="rotateRight()"
-              >
-                <i z-icon zType="lucideRedo" zSize="14"></i>
-              </button>
-            }
-
-            <button
-              z-button
-              zType="ghost"
-              zSize="xs"
-              zShape="circle"
-              class="text-white hover:bg-white/20"
-              z-tooltip
-              [zContent]="'i18n_z_ui_gallery_download' | translate"
-              (click)="download()"
-            >
-              <i z-icon zType="lucideDownload" zSize="14"></i>
-            </button>
-
-            @if (zShowRemove()) {
-              <button
-                z-button
-                zType="ghost"
-                zSize="xs"
-                zShape="circle"
-                class="text-white hover:bg-white/20"
-                z-tooltip
-                [zContent]="'i18n_z_ui_gallery_delete' | translate"
-                (click)="remove()"
-              >
-                <i z-icon zType="lucideTrash2" zSize="14"></i>
-              </button>
-            }
-          </div>
-        </div>
-
-        <div class="relative flex flex-1 items-center justify-center pt-16">
-          @if (isImageFile()) {
-            <div class="relative flex h-[60vh] w-[70vw] items-center justify-center">
-              @if (isLoading()) {
-                <z-skeleton class="absolute inset-0 rounded-lg" />
-              }
-              <img
-                [src]="file().url || file().thumbnailUrl"
-                [alt]="file().name"
-                class="max-h-full max-w-full rounded-lg object-contain shadow-2xl transition-opacity duration-300"
-                [class.opacity-0]="isLoading()"
-                [class.opacity-100]="!isLoading()"
-                [class.cursor-zoom-in]="!zoomed()"
-                [class.cursor-zoom-out]="zoomed()"
-                [style.transform]="imageTransform()"
-                (load)="onImageLoad()"
-                (error)="onMediaError()"
-                (click)="toggleZoom()"
-              />
-            </div>
-          } @else if (isPdf() && safePdfUrl()) {
-            <div class="relative h-[75vh] w-[85vw]">
-              @if (isLoading()) {
-                <z-skeleton class="absolute inset-0 rounded-lg" />
-              }
-              <iframe
-                [src]="safePdfUrl()"
-                class="absolute inset-0 size-full rounded-lg bg-white shadow-2xl transition-opacity duration-300"
-                [class.opacity-0]="isLoading()"
-                [class.opacity-100]="!isLoading()"
-                frameborder="0"
-                referrerpolicy="no-referrer"
-                (load)="onPdfLoad()"
-              ></iframe>
-            </div>
-          } @else if (isVideo()) {
-            <div class="relative flex h-[60vh] w-[70vw] items-center justify-center">
-              @if (isLoading()) {
-                <z-skeleton class="absolute inset-0 rounded-lg" />
-              }
-              <video
-                [src]="file().url"
-                controls
-                autoplay
-                class="max-h-full max-w-full rounded-lg shadow-2xl transition-opacity duration-300"
-                [class.opacity-0]="isLoading()"
-                [class.opacity-100]="!isLoading()"
-                (loadeddata)="onVideoLoad()"
-                (error)="onMediaError()"
-              >
-                Your browser does not support the video tag.
-              </video>
-            </div>
-          } @else if (isWordFile()) {
-            <div class="relative h-[75vh] w-[85vw]">
-              @if (isLoading() || isConverting()) {
-                <z-skeleton class="absolute inset-0 rounded-lg" />
-              }
-              @if (conversionError()) {
-                <div class="bg-card flex size-full flex-col items-center justify-center rounded-lg p-12 shadow-2xl">
-                  <div class="bg-muted mb-4 flex size-24 items-center justify-center rounded-xl">
-                    <i z-icon [zType]="fileIcon()" zSize="40" class="text-muted-foreground"></i>
-                  </div>
-                  <span class="text-foreground mb-2 text-lg font-medium">{{ file().name }}</span>
-                  <span class="text-muted-foreground rounded-md bg-red-100 px-3 py-1.5 text-xs dark:bg-red-900/30">
-                    <span class="text-red-700 dark:text-red-300">{{ conversionError() }}</span>
-                  </span>
-                </div>
-              } @else if (docHtmlContent()) {
-                <div
-                  class="absolute inset-0 overflow-auto rounded-lg bg-white p-8 text-gray-950 shadow-2xl"
-                  [innerHTML]="docHtmlContent()"
-                ></div>
-              }
-            </div>
-          } @else if (isExcelFile()) {
-            <div class="relative h-[75vh] w-[85vw]">
-              @if (isLoading() || isConverting()) {
-                <z-skeleton class="absolute inset-0 rounded-lg" />
-              }
-              @if (conversionError()) {
-                <div class="bg-card flex size-full flex-col items-center justify-center rounded-lg p-12 shadow-2xl">
-                  <div class="bg-muted mb-4 flex size-24 items-center justify-center rounded-xl">
-                    <i z-icon [zType]="fileIcon()" zSize="40" class="text-muted-foreground"></i>
-                  </div>
-                  <span class="text-foreground mb-2 text-lg font-medium">{{ file().name }}</span>
-                  <span class="text-muted-foreground rounded-md bg-red-100 px-3 py-1.5 text-xs dark:bg-red-900/30">
-                    <span class="text-red-700 dark:text-red-300">{{ conversionError() }}</span>
-                  </span>
-                </div>
-              } @else if (docHtmlContent()) {
-                <div
-                  class="absolute inset-0 overflow-auto rounded-lg bg-white p-4 text-gray-950 shadow-2xl"
-                  [innerHTML]="docHtmlContent()"
-                ></div>
-              }
-            </div>
-          } @else if (isTextFile()) {
-            <div class="relative h-[75vh] w-[85vw]">
-              @if (isLoading() || isConverting()) {
-                <z-skeleton class="absolute inset-0 rounded-lg" />
-              }
-              @if (conversionError()) {
-                <div class="bg-card flex size-full flex-col items-center justify-center rounded-lg p-12 shadow-2xl">
-                  <div class="bg-muted mb-4 flex size-24 items-center justify-center rounded-xl">
-                    <i z-icon [zType]="fileIcon()" zSize="40" class="text-muted-foreground"></i>
-                  </div>
-                  <span class="text-foreground mb-2 text-lg font-medium">{{ file().name }}</span>
-                  <span class="text-muted-foreground rounded-md bg-red-100 px-3 py-1.5 text-xs dark:bg-red-900/30">
-                    <span class="text-red-700 dark:text-red-300">{{ conversionError() }}</span>
-                  </span>
-                </div>
-              } @else if (textContent()) {
-                <div class="absolute inset-0 overflow-auto rounded-lg bg-gray-950 p-6 shadow-2xl">
-                  <pre class="font-mono text-sm leading-relaxed whitespace-pre-wrap text-gray-100">{{
-                    textContent()
-                  }}</pre>
-                </div>
-              }
-            </div>
-          } @else {
-            <div class="bg-card flex flex-col items-center justify-center rounded-lg p-12 shadow-2xl">
-              <div class="bg-muted mb-4 flex size-24 items-center justify-center rounded-xl">
-                <i z-icon [zType]="fileIcon()" zSize="40" class="text-muted-foreground"></i>
-              </div>
-              <span class="text-foreground mb-2 text-lg font-medium">{{ file().name }}</span>
-              <span class="text-muted-foreground mb-4 text-sm">{{ formattedSize() }}</span>
-              <span class="text-muted-foreground rounded-md bg-amber-100 px-3 py-1.5 text-xs dark:bg-amber-900/30">
-                <i
-                  z-icon
-                  zType="lucideInfo"
-                  zSize="14"
-                  class="mr-1 inline-block align-middle text-amber-600 dark:text-amber-400"
-                ></i>
-                <span class="align-middle text-amber-700 dark:text-amber-300">
-                  {{ 'i18n_z_ui_gallery_preview_not_supported' | translate }}
-                </span>
-              </span>
-            </div>
-          }
-        </div>
-      </div>
-    </div>
-  `,
-                    changeDetection: ChangeDetectionStrategy.OnPush,
-                    encapsulation: ViewEncapsulation.None,
-                    host: {
+            args: [{ selector: 'z-gallery-preview', imports: [ZButtonComponent, ZIconComponent, ZSkeletonComponent, ZTooltipDirective, TranslatePipe, PdfJsViewerModule], standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, host: {
                         class: 'z-gallery-preview z-[9999]',
                         '(document:keydown)': 'onKeyDown($event)',
-                    },
-                }]
-        }], 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 }] }], 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"] }] } });
+                    }, 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 }] }] } });
 
 const zGalleryVariants = cva('z-gallery', {
     variants: {
@@ -1589,6 +1448,7 @@ class ZGalleryComponent {
     zShowDownload = input(true, ...(ngDevMode ? [{ debugName: "zShowDownload" }] : []));
     zShowPreview = input(true, ...(ngDevMode ? [{ debugName: "zShowPreview" }] : []));
     zShowRemove = input(false, ...(ngDevMode ? [{ debugName: "zShowRemove" }] : []));
+    zPdfViewerConfig = input({}, ...(ngDevMode ? [{ debugName: "zPdfViewerConfig" }] : []));
     zTrustedResourceOrigins = input([], ...(ngDevMode ? [{ debugName: "zTrustedResourceOrigins" }] : []));
     zShowModeToggle = input(true, ...(ngDevMode ? [{ debugName: "zShowModeToggle" }] : []));
     zShowSearch = input(false, ...(ngDevMode ? [{ debugName: "zShowSearch" }] : []));
@@ -1830,7 +1690,7 @@ class ZGalleryComponent {
         selectedFiles.forEach(file => this.onDownload(file));
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.9", ngImport: i0, type: ZGalleryComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.9", type: ZGalleryComponent, isStandalone: true, selector: "z-gallery", inputs: { zFiles: { classPropertyName: "zFiles", publicName: "zFiles", isSignal: true, isRequired: false, transformFunction: null }, zMode: { classPropertyName: "zMode", publicName: "zMode", isSignal: true, isRequired: false, transformFunction: null }, zSize: { classPropertyName: "zSize", publicName: "zSize", isSignal: true, isRequired: false, transformFunction: null }, zColumns: { classPropertyName: "zColumns", publicName: "zColumns", isSignal: true, isRequired: false, transformFunction: null }, zItemWidth: { classPropertyName: "zItemWidth", publicName: "zItemWidth", isSignal: true, isRequired: false, transformFunction: null }, zLoading: { classPropertyName: "zLoading", publicName: "zLoading", isSignal: true, isRequired: false, transformFunction: null }, zSkeletonRows: { classPropertyName: "zSkeletonRows", publicName: "zSkeletonRows", isSignal: true, isRequired: false, transformFunction: null }, zSkeletonItems: { classPropertyName: "zSkeletonItems", publicName: "zSkeletonItems", isSignal: true, isRequired: false, transformFunction: null }, zShowDownload: { classPropertyName: "zShowDownload", publicName: "zShowDownload", isSignal: true, isRequired: false, transformFunction: null }, zShowPreview: { classPropertyName: "zShowPreview", publicName: "zShowPreview", isSignal: true, isRequired: false, transformFunction: null }, zShowRemove: { classPropertyName: "zShowRemove", publicName: "zShowRemove", isSignal: true, isRequired: false, transformFunction: null }, zTrustedResourceOrigins: { classPropertyName: "zTrustedResourceOrigins", publicName: "zTrustedResourceOrigins", isSignal: true, isRequired: false, transformFunction: null }, zShowModeToggle: { classPropertyName: "zShowModeToggle", publicName: "zShowModeToggle", isSignal: true, isRequired: false, transformFunction: null }, zShowSearch: { classPropertyName: "zShowSearch", publicName: "zShowSearch", isSignal: true, isRequired: false, transformFunction: null }, zServerSearch: { classPropertyName: "zServerSearch", publicName: "zServerSearch", isSignal: true, isRequired: false, transformFunction: null }, zSearchDebounce: { classPropertyName: "zSearchDebounce", publicName: "zSearchDebounce", isSignal: true, isRequired: false, transformFunction: null }, zSearchPlaceholder: { classPropertyName: "zSearchPlaceholder", publicName: "zSearchPlaceholder", isSignal: true, isRequired: false, transformFunction: null }, zToggleSize: { classPropertyName: "zToggleSize", publicName: "zToggleSize", isSignal: true, isRequired: false, transformFunction: null }, zTitle: { classPropertyName: "zTitle", publicName: "zTitle", isSignal: true, isRequired: false, transformFunction: null }, zEmptyText: { classPropertyName: "zEmptyText", publicName: "zEmptyText", isSignal: true, isRequired: false, transformFunction: null }, zEmptyIcon: { classPropertyName: "zEmptyIcon", publicName: "zEmptyIcon", isSignal: true, isRequired: false, transformFunction: null }, zClass: { classPropertyName: "zClass", publicName: "zClass", isSignal: true, isRequired: false, transformFunction: null }, zSelectable: { classPropertyName: "zSelectable", publicName: "zSelectable", isSignal: true, isRequired: false, transformFunction: null }, zSelectedFiles: { classPropertyName: "zSelectedFiles", publicName: "zSelectedFiles", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { zMode: "zModeChange", zSelectedFiles: "zSelectedFilesChange", zOnDownload: "zOnDownload", zOnPreview: "zOnPreview", zOnRemove: "zOnRemove", zModeChange: "zModeChange", zSearchChange: "zSearchChange", zControl: "zControl", zSelectionChange: "zSelectionChange", zOnAction: "zOnAction" }, host: { classAttribute: "z-gallery block" }, exportAs: ["zGallery"], ngImport: i0, template: `
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.9", type: ZGalleryComponent, isStandalone: true, selector: "z-gallery", inputs: { zFiles: { classPropertyName: "zFiles", publicName: "zFiles", isSignal: true, isRequired: false, transformFunction: null }, zMode: { classPropertyName: "zMode", publicName: "zMode", isSignal: true, isRequired: false, transformFunction: null }, zSize: { classPropertyName: "zSize", publicName: "zSize", isSignal: true, isRequired: false, transformFunction: null }, zColumns: { classPropertyName: "zColumns", publicName: "zColumns", isSignal: true, isRequired: false, transformFunction: null }, zItemWidth: { classPropertyName: "zItemWidth", publicName: "zItemWidth", isSignal: true, isRequired: false, transformFunction: null }, zLoading: { classPropertyName: "zLoading", publicName: "zLoading", isSignal: true, isRequired: false, transformFunction: null }, zSkeletonRows: { classPropertyName: "zSkeletonRows", publicName: "zSkeletonRows", isSignal: true, isRequired: false, transformFunction: null }, zSkeletonItems: { classPropertyName: "zSkeletonItems", publicName: "zSkeletonItems", isSignal: true, isRequired: false, transformFunction: null }, zShowDownload: { classPropertyName: "zShowDownload", publicName: "zShowDownload", isSignal: true, isRequired: false, transformFunction: null }, zShowPreview: { classPropertyName: "zShowPreview", publicName: "zShowPreview", isSignal: true, isRequired: false, transformFunction: null }, zShowRemove: { classPropertyName: "zShowRemove", publicName: "zShowRemove", isSignal: true, isRequired: false, transformFunction: null }, zPdfViewerConfig: { classPropertyName: "zPdfViewerConfig", publicName: "zPdfViewerConfig", isSignal: true, isRequired: false, transformFunction: null }, zTrustedResourceOrigins: { classPropertyName: "zTrustedResourceOrigins", publicName: "zTrustedResourceOrigins", isSignal: true, isRequired: false, transformFunction: null }, zShowModeToggle: { classPropertyName: "zShowModeToggle", publicName: "zShowModeToggle", isSignal: true, isRequired: false, transformFunction: null }, zShowSearch: { classPropertyName: "zShowSearch", publicName: "zShowSearch", isSignal: true, isRequired: false, transformFunction: null }, zServerSearch: { classPropertyName: "zServerSearch", publicName: "zServerSearch", isSignal: true, isRequired: false, transformFunction: null }, zSearchDebounce: { classPropertyName: "zSearchDebounce", publicName: "zSearchDebounce", isSignal: true, isRequired: false, transformFunction: null }, zSearchPlaceholder: { classPropertyName: "zSearchPlaceholder", publicName: "zSearchPlaceholder", isSignal: true, isRequired: false, transformFunction: null }, zToggleSize: { classPropertyName: "zToggleSize", publicName: "zToggleSize", isSignal: true, isRequired: false, transformFunction: null }, zTitle: { classPropertyName: "zTitle", publicName: "zTitle", isSignal: true, isRequired: false, transformFunction: null }, zEmptyText: { classPropertyName: "zEmptyText", publicName: "zEmptyText", isSignal: true, isRequired: false, transformFunction: null }, zEmptyIcon: { classPropertyName: "zEmptyIcon", publicName: "zEmptyIcon", isSignal: true, isRequired: false, transformFunction: null }, zClass: { classPropertyName: "zClass", publicName: "zClass", isSignal: true, isRequired: false, transformFunction: null }, zSelectable: { classPropertyName: "zSelectable", publicName: "zSelectable", isSignal: true, isRequired: false, transformFunction: null }, zSelectedFiles: { classPropertyName: "zSelectedFiles", publicName: "zSelectedFiles", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { zMode: "zModeChange", zSelectedFiles: "zSelectedFilesChange", zOnDownload: "zOnDownload", zOnPreview: "zOnPreview", zOnRemove: "zOnRemove", zModeChange: "zModeChange", zSearchChange: "zSearchChange", zControl: "zControl", zSelectionChange: "zSelectionChange", zOnAction: "zOnAction" }, host: { classAttribute: "z-gallery block" }, exportAs: ["zGallery"], ngImport: i0, template: `
     <div [class]="containerClasses()">
       @if (showHeader()) {
         <div class="mb-4 flex flex-wrap items-center justify-between gap-3">
@@ -1885,7 +1745,7 @@ class ZGalleryComponent {
               <div class="border-border bg-card overflow-hidden rounded-md border shadow-sm">
                 <z-skeleton [zHeight]="skeletonMediaHeight()" zRadius="0" />
                 <div class="p-3">
-                  <z-skeleton zWidth="75%" zHeight="0.875rem" />
+                  <z-skeleton zWidth="75%" zHeight="1.25rem" />
                 </div>
               </div>
             }
@@ -2013,6 +1873,7 @@ class ZGalleryComponent {
           [file]="previewFile()!"
           [files]="filteredFiles()"
           [zShowRemove]="zShowRemove()"
+          [zPdfViewerConfig]="zPdfViewerConfig()"
           [zTrustedResourceOrigins]="zTrustedResourceOrigins()"
           (zOnClose)="closePreview()"
           (zOnDownload)="onDownload($event)"
@@ -2021,7 +1882,7 @@ class ZGalleryComponent {
         />
       }
     </div>
-  `, isInline: true, dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.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", "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: 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 });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.9", ngImport: i0, type: ZGalleryComponent, decorators: [{
             type: Component,
@@ -2097,7 +1958,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.9", ngImpor
               <div class="border-border bg-card overflow-hidden rounded-md border shadow-sm">
                 <z-skeleton [zHeight]="skeletonMediaHeight()" zRadius="0" />
                 <div class="p-3">
-                  <z-skeleton zWidth="75%" zHeight="0.875rem" />
+                  <z-skeleton zWidth="75%" zHeight="1.25rem" />
                 </div>
               </div>
             }
@@ -2225,6 +2086,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.9", ngImpor
           [file]="previewFile()!"
           [files]="filteredFiles()"
           [zShowRemove]="zShowRemove()"
+          [zPdfViewerConfig]="zPdfViewerConfig()"
           [zTrustedResourceOrigins]="zTrustedResourceOrigins()"
           (zOnClose)="closePreview()"
           (zOnDownload)="onDownload($event)"
@@ -2241,7 +2103,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.9", ngImpor
                     },
                     exportAs: 'zGallery',
                 }]
-        }], propDecorators: { zFiles: [{ type: i0.Input, args: [{ isSignal: true, alias: "zFiles", required: false }] }], zMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "zMode", required: false }] }, { type: i0.Output, args: ["zModeChange"] }], zSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "zSize", required: false }] }], zColumns: [{ type: i0.Input, args: [{ isSignal: true, alias: "zColumns", required: false }] }], zItemWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "zItemWidth", required: false }] }], zLoading: [{ type: i0.Input, args: [{ isSignal: true, alias: "zLoading", required: false }] }], zSkeletonRows: [{ type: i0.Input, args: [{ isSignal: true, alias: "zSkeletonRows", required: false }] }], zSkeletonItems: [{ type: i0.Input, args: [{ isSignal: true, alias: "zSkeletonItems", required: false }] }], zShowDownload: [{ type: i0.Input, args: [{ isSignal: true, alias: "zShowDownload", required: false }] }], zShowPreview: [{ type: i0.Input, args: [{ isSignal: true, alias: "zShowPreview", required: false }] }], zShowRemove: [{ type: i0.Input, args: [{ isSignal: true, alias: "zShowRemove", required: false }] }], zTrustedResourceOrigins: [{ type: i0.Input, args: [{ isSignal: true, alias: "zTrustedResourceOrigins", required: false }] }], zShowModeToggle: [{ type: i0.Input, args: [{ isSignal: true, alias: "zShowModeToggle", required: false }] }], zShowSearch: [{ type: i0.Input, args: [{ isSignal: true, alias: "zShowSearch", required: false }] }], zServerSearch: [{ type: i0.Input, args: [{ isSignal: true, alias: "zServerSearch", required: false }] }], zSearchDebounce: [{ type: i0.Input, args: [{ isSignal: true, alias: "zSearchDebounce", required: false }] }], zSearchPlaceholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "zSearchPlaceholder", required: false }] }], zToggleSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "zToggleSize", required: false }] }], zTitle: [{ type: i0.Input, args: [{ isSignal: true, alias: "zTitle", required: false }] }], zEmptyText: [{ type: i0.Input, args: [{ isSignal: true, alias: "zEmptyText", required: false }] }], zEmptyIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "zEmptyIcon", required: false }] }], zClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "zClass", required: false }] }], zSelectable: [{ type: i0.Input, args: [{ isSignal: true, alias: "zSelectable", required: false }] }], zSelectedFiles: [{ type: i0.Input, args: [{ isSignal: true, alias: "zSelectedFiles", required: false }] }, { type: i0.Output, args: ["zSelectedFilesChange"] }], zOnDownload: [{ type: i0.Output, args: ["zOnDownload"] }], zOnPreview: [{ type: i0.Output, args: ["zOnPreview"] }], zOnRemove: [{ type: i0.Output, args: ["zOnRemove"] }], zModeChange: [{ type: i0.Output, args: ["zModeChange"] }], zSearchChange: [{ type: i0.Output, args: ["zSearchChange"] }], zControl: [{ type: i0.Output, args: ["zControl"] }], zSelectionChange: [{ type: i0.Output, args: ["zSelectionChange"] }], zOnAction: [{ type: i0.Output, args: ["zOnAction"] }] } });
+        }], propDecorators: { zFiles: [{ type: i0.Input, args: [{ isSignal: true, alias: "zFiles", required: false }] }], zMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "zMode", required: false }] }, { type: i0.Output, args: ["zModeChange"] }], zSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "zSize", required: false }] }], zColumns: [{ type: i0.Input, args: [{ isSignal: true, alias: "zColumns", required: false }] }], zItemWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "zItemWidth", required: false }] }], zLoading: [{ type: i0.Input, args: [{ isSignal: true, alias: "zLoading", required: false }] }], zSkeletonRows: [{ type: i0.Input, args: [{ isSignal: true, alias: "zSkeletonRows", required: false }] }], zSkeletonItems: [{ type: i0.Input, args: [{ isSignal: true, alias: "zSkeletonItems", required: false }] }], zShowDownload: [{ type: i0.Input, args: [{ isSignal: true, alias: "zShowDownload", required: false }] }], zShowPreview: [{ type: i0.Input, args: [{ isSignal: true, alias: "zShowPreview", 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 }] }], zShowModeToggle: [{ type: i0.Input, args: [{ isSignal: true, alias: "zShowModeToggle", required: false }] }], zShowSearch: [{ type: i0.Input, args: [{ isSignal: true, alias: "zShowSearch", required: false }] }], zServerSearch: [{ type: i0.Input, args: [{ isSignal: true, alias: "zServerSearch", required: false }] }], zSearchDebounce: [{ type: i0.Input, args: [{ isSignal: true, alias: "zSearchDebounce", required: false }] }], zSearchPlaceholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "zSearchPlaceholder", required: false }] }], zToggleSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "zToggleSize", required: false }] }], zTitle: [{ type: i0.Input, args: [{ isSignal: true, alias: "zTitle", required: false }] }], zEmptyText: [{ type: i0.Input, args: [{ isSignal: true, alias: "zEmptyText", required: false }] }], zEmptyIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "zEmptyIcon", required: false }] }], zClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "zClass", required: false }] }], zSelectable: [{ type: i0.Input, args: [{ isSignal: true, alias: "zSelectable", required: false }] }], zSelectedFiles: [{ type: i0.Input, args: [{ isSignal: true, alias: "zSelectedFiles", required: false }] }, { type: i0.Output, args: ["zSelectedFilesChange"] }], zOnDownload: [{ type: i0.Output, args: ["zOnDownload"] }], zOnPreview: [{ type: i0.Output, args: ["zOnPreview"] }], zOnRemove: [{ type: i0.Output, args: ["zOnRemove"] }], zModeChange: [{ type: i0.Output, args: ["zModeChange"] }], zSearchChange: [{ type: i0.Output, args: ["zSearchChange"] }], zControl: [{ type: i0.Output, args: ["zControl"] }], zSelectionChange: [{ type: i0.Output, args: ["zSelectionChange"] }], zOnAction: [{ type: i0.Output, args: ["zOnAction"] }] } });
 
 class ZGalleryFileIconComponent {
     file = input.required(...(ngDevMode ? [{ debugName: "file" }] : []));
@@ -2372,6 +2234,7 @@ class ZGalleryPreviewService {
         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?.();
@@ -2435,9 +2298,71 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.9", ngImpor
                 }]
         }] });
 
+class ZGalleryPreviewItemDirective {
+    zGalleryPreviewItem = input.required(...(ngDevMode ? [{ debugName: "zGalleryPreviewItem" }] : []));
+    zGalleryPreviewFiles = input(null, ...(ngDevMode ? [{ debugName: "zGalleryPreviewFiles" }] : []));
+    zGalleryPreviewOptions = input({}, ...(ngDevMode ? [{ debugName: "zGalleryPreviewOptions" }] : []));
+    zDisabled = input(false, { ...(ngDevMode ? { debugName: "zDisabled" } : {}), transform: zTransform });
+    zOnPreview = output();
+    _elementRef = inject((ElementRef));
+    _previewService = inject(ZGalleryPreviewService);
+    hostRole = computed(() => (this._isNativeInteractive() ? null : 'button'), ...(ngDevMode ? [{ debugName: "hostRole" }] : []));
+    hostTabIndex = computed(() => {
+        if (this._isNativeInteractive()) {
+            return null;
+        }
+        return this.zDisabled() ? -1 : 0;
+    }, ...(ngDevMode ? [{ debugName: "hostTabIndex" }] : []));
+    hostAriaDisabled = computed(() => (this.zDisabled() ? true : null), ...(ngDevMode ? [{ debugName: "hostAriaDisabled" }] : []));
+    openPreview(event) {
+        if (this.zDisabled()) {
+            return;
+        }
+        if (event instanceof KeyboardEvent && this._isNativeInteractive()) {
+            return;
+        }
+        const file = this.zGalleryPreviewItem();
+        if (!isPreviewable(file)) {
+            return;
+        }
+        if (event instanceof KeyboardEvent) {
+            event.preventDefault();
+        }
+        this.zOnPreview.emit(file);
+        this._previewService.open({
+            ...this.zGalleryPreviewOptions(),
+            file,
+            files: this.zGalleryPreviewFiles() ?? undefined,
+        });
+    }
+    _isNativeInteractive() {
+        const tagName = this._elementRef.nativeElement.tagName.toLowerCase();
+        return tagName === 'button' || tagName === 'a';
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.9", ngImport: i0, type: ZGalleryPreviewItemDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.0.9", type: ZGalleryPreviewItemDirective, isStandalone: true, selector: "[zGalleryPreviewItem], [z-gallery-preview-item]", inputs: { zGalleryPreviewItem: { classPropertyName: "zGalleryPreviewItem", publicName: "zGalleryPreviewItem", isSignal: true, isRequired: true, transformFunction: null }, zGalleryPreviewFiles: { classPropertyName: "zGalleryPreviewFiles", publicName: "zGalleryPreviewFiles", isSignal: true, isRequired: false, transformFunction: null }, zGalleryPreviewOptions: { classPropertyName: "zGalleryPreviewOptions", publicName: "zGalleryPreviewOptions", isSignal: true, isRequired: false, transformFunction: null }, zDisabled: { classPropertyName: "zDisabled", publicName: "zDisabled", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { zOnPreview: "zOnPreview" }, host: { listeners: { "click": "openPreview()", "keydown.enter": "openPreview($event)", "keydown.space": "openPreview($event)" }, properties: { "attr.role": "hostRole()", "attr.tabindex": "hostTabIndex()", "attr.aria-disabled": "hostAriaDisabled()" }, classAttribute: "z-gallery-preview-item" }, exportAs: ["zGalleryPreviewItem"], ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.9", ngImport: i0, type: ZGalleryPreviewItemDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[zGalleryPreviewItem], [z-gallery-preview-item]',
+                    standalone: true,
+                    host: {
+                        class: 'z-gallery-preview-item',
+                        '[attr.role]': 'hostRole()',
+                        '[attr.tabindex]': 'hostTabIndex()',
+                        '[attr.aria-disabled]': 'hostAriaDisabled()',
+                        '(click)': 'openPreview()',
+                        '(keydown.enter)': 'openPreview($event)',
+                        '(keydown.space)': 'openPreview($event)',
+                    },
+                    exportAs: 'zGalleryPreviewItem',
+                }]
+        }], propDecorators: { zGalleryPreviewItem: [{ type: i0.Input, args: [{ isSignal: true, alias: "zGalleryPreviewItem", required: true }] }], zGalleryPreviewFiles: [{ type: i0.Input, args: [{ isSignal: true, alias: "zGalleryPreviewFiles", required: false }] }], zGalleryPreviewOptions: [{ type: i0.Input, args: [{ isSignal: true, alias: "zGalleryPreviewOptions", required: false }] }], zDisabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "zDisabled", required: false }] }], zOnPreview: [{ type: i0.Output, args: ["zOnPreview"] }] } });
+
 /**
  * Generated bundle index. Do not edit.
  */
 
-export { FILE_CATEGORY_STYLES, ZGalleryComponent, ZGalleryFileIconComponent, ZGalleryItemComponent, ZGalleryPreviewComponent, ZGalleryPreviewRef, ZGalleryPreviewService, formatFileSize, getFileCategory, isImage, isPreviewable, zGalleryFileIconVariants, zGalleryItemVariants, zGalleryVariants };
+export { FILE_CATEGORY_STYLES, ZGalleryComponent, ZGalleryFileIconComponent, ZGalleryItemComponent, ZGalleryPreviewComponent, ZGalleryPreviewItemDirective, ZGalleryPreviewRef, ZGalleryPreviewService, formatFileSize, getFileCategory, isImage, isPreviewable, zGalleryFileIconVariants, zGalleryItemVariants, zGalleryVariants };
 //# sourceMappingURL=shival99-z-ui-components-z-gallery.mjs.map