@shival99/z-ui 2.1.29 → 2.1.30

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

@@ -0,0 +1,2419 @@
+import * as i0 from '@angular/core';
+import { input, output, signal, computed, ViewEncapsulation, ChangeDetectionStrategy, Component, inject, viewChild, effect, EventEmitter, Injector, PLATFORM_ID, Injectable, DestroyRef, model, ElementRef, Directive } from '@angular/core';
+import * as i1$1 from '@angular/forms';
+import { FormsModule } from '@angular/forms';
+import { TranslatePipe } from '@ngx-translate/core';
+import { ZButtonComponent } from '@shival99/z-ui/components/z-button';
+import { ZButtonGroupComponent, ZButtonGroupItemDirective } from '@shival99/z-ui/components/z-button-group';
+import { ZCheckboxComponent } from '@shival99/z-ui/components/z-checkbox';
+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, zTransform } from '@shival99/z-ui/utils';
+import { ZTooltipDirective } from '@shival99/z-ui/components/z-tooltip';
+import { Overlay, OverlayConfig } from '@angular/cdk/overlay';
+import { ComponentPortal } from '@angular/cdk/portal';
+import { DOCUMENT, isPlatformBrowser } from '@angular/common';
+import { ZOverlayZIndexService } from '@shival99/z-ui/services';
+import { DomSanitizer } from '@angular/platform-browser';
+import * as i1 from 'ng2-pdfjs-viewer';
+import { PdfJsViewerModule } from 'ng2-pdfjs-viewer';
+import { cva } from 'class-variance-authority';
+
+const FILE_CATEGORY_STYLES = {
+    image: {
+        bg: 'bg-purple-100 dark:bg-purple-900/30',
+        text: 'text-purple-600 dark:text-purple-400',
+        label: 'IMG',
+        icon: 'lucideImage',
+    },
+    pdf: {
+        bg: 'bg-red-100 dark:bg-red-900/30',
+        text: 'text-red-600 dark:text-red-400',
+        label: 'PDF',
+        icon: 'lucideFileText',
+    },
+    word: {
+        bg: 'bg-blue-100 dark:bg-blue-900/30',
+        text: 'text-blue-600 dark:text-blue-400',
+        label: 'DOC',
+        icon: 'lucideFileText',
+    },
+    excel: {
+        bg: 'bg-green-100 dark:bg-green-900/30',
+        text: 'text-green-600 dark:text-green-400',
+        label: 'XLS',
+        icon: 'lucideFileSpreadsheet',
+    },
+    powerpoint: {
+        bg: 'bg-orange-100 dark:bg-orange-900/30',
+        text: 'text-orange-600 dark:text-orange-400',
+        label: 'PPT',
+        icon: 'lucideFileText',
+    },
+    video: {
+        bg: 'bg-pink-100 dark:bg-pink-900/30',
+        text: 'text-pink-600 dark:text-pink-400',
+        label: 'VID',
+        icon: 'lucideVideo',
+    },
+    audio: {
+        bg: 'bg-yellow-100 dark:bg-yellow-900/30',
+        text: 'text-yellow-700 dark:text-yellow-400',
+        label: 'AUD',
+        icon: 'lucideMusic',
+    },
+    archive: {
+        bg: 'bg-amber-100 dark:bg-amber-900/30',
+        text: 'text-amber-600 dark:text-amber-400',
+        label: 'ZIP',
+        icon: 'lucideFileArchive',
+    },
+    code: {
+        bg: 'bg-slate-100 dark:bg-slate-800',
+        text: 'text-slate-600 dark:text-slate-400',
+        label: 'CODE',
+        icon: 'lucideCode',
+    },
+    text: {
+        bg: 'bg-gray-100 dark:bg-gray-800',
+        text: 'text-gray-600 dark:text-gray-400',
+        label: 'TXT',
+        icon: 'lucideFileText',
+    },
+    unknown: {
+        bg: 'bg-gray-100 dark:bg-gray-800',
+        text: 'text-gray-500 dark:text-gray-400',
+        label: 'FILE',
+        icon: 'lucideFile',
+    },
+};
+
+const IMAGE_EXTENSIONS = ['jpg', 'jpeg', 'png', 'gif', 'webp', 'svg', 'bmp', 'ico'];
+const VIDEO_EXTENSIONS = ['mp4', 'avi', 'mov', 'wmv', 'flv', 'webm', 'mkv'];
+const AUDIO_EXTENSIONS = ['mp3', 'wav', 'ogg', 'flac', 'aac', 'm4a'];
+const ARCHIVE_EXTENSIONS = ['zip', 'rar', 'tar', 'gz', '7z', 'bz2'];
+const CODE_EXTENSIONS = [
+    'js',
+    'ts',
+    'jsx',
+    'tsx',
+    'html',
+    'css',
+    'scss',
+    'json',
+    'xml',
+    'py',
+    'java',
+    'c',
+    'cpp',
+    'go',
+    'rs',
+    'php',
+    'rb',
+    'swift',
+    'kt',
+];
+const TEXT_EXTENSIONS = ['txt', 'md', 'log'];
+const WORD_EXTENSIONS = ['doc', 'docx', 'odt', 'rtf'];
+const EXCEL_EXTENSIONS = ['xls', 'xlsx', 'csv', 'ods'];
+const POWERPOINT_EXTENSIONS = ['ppt', 'pptx', 'odp'];
+const FILE_SIZE_UNITS = ['B', 'KB', 'MB', 'GB'];
+const FILE_SIZE_BASE = 1024;
+const getFileCategory = (file) => {
+    const type = file.type?.toLowerCase() || '';
+    const name = file.name?.toLowerCase() || '';
+    const ext = name.split('.').pop() || '';
+    if (type.startsWith('image/') || IMAGE_EXTENSIONS.includes(ext)) {
+        return 'image';
+    }
+    if (type === 'application/pdf' || ext === 'pdf') {
+        return 'pdf';
+    }
+    if (type.includes('excel') || type.includes('spreadsheet') || EXCEL_EXTENSIONS.includes(ext)) {
+        return 'excel';
+    }
+    if (type.includes('powerpoint') || type.includes('presentation') || POWERPOINT_EXTENSIONS.includes(ext)) {
+        return 'powerpoint';
+    }
+    if (type.includes('word') || type.includes('wordprocessingml') || WORD_EXTENSIONS.includes(ext)) {
+        return 'word';
+    }
+    if (type.startsWith('video/') || VIDEO_EXTENSIONS.includes(ext)) {
+        return 'video';
+    }
+    if (type.startsWith('audio/') || AUDIO_EXTENSIONS.includes(ext)) {
+        return 'audio';
+    }
+    if (type.includes('zip') ||
+        type.includes('rar') ||
+        type.includes('tar') ||
+        type.includes('compressed') ||
+        ARCHIVE_EXTENSIONS.includes(ext)) {
+        return 'archive';
+    }
+    if (CODE_EXTENSIONS.includes(ext)) {
+        return 'code';
+    }
+    if (type.startsWith('text/') || TEXT_EXTENSIONS.includes(ext)) {
+        return 'text';
+    }
+    return 'unknown';
+};
+const formatFileSize = (bytes) => {
+    if (bytes === 0) {
+        return '0 B';
+    }
+    const i = Math.floor(Math.log(bytes) / Math.log(FILE_SIZE_BASE));
+    const size = bytes / Math.pow(FILE_SIZE_BASE, i);
+    return `${size.toFixed(i > 0 ? 1 : 0)} ${FILE_SIZE_UNITS[i]}`;
+};
+const isPreviewable = (file) => {
+    const category = getFileCategory(file);
+    return (category === 'image' ||
+        category === 'pdf' ||
+        category === 'video' ||
+        category === 'word' ||
+        category === 'excel' ||
+        category === 'text' ||
+        category === 'code');
+};
+const isImage = (file) => getFileCategory(file) === 'image';
+
+class ZGalleryItemComponent {
+    file = input.required(...(ngDevMode ? [{ debugName: "file" }] : []));
+    zMode = input('grid', ...(ngDevMode ? [{ debugName: "zMode" }] : []));
+    zSize = input('default', ...(ngDevMode ? [{ debugName: "zSize" }] : []));
+    zShowDownload = input(true, ...(ngDevMode ? [{ debugName: "zShowDownload" }] : []));
+    zShowPreview = input(true, ...(ngDevMode ? [{ debugName: "zShowPreview" }] : []));
+    zShowRemove = input(false, ...(ngDevMode ? [{ debugName: "zShowRemove" }] : []));
+    zSelectable = input(false, ...(ngDevMode ? [{ debugName: "zSelectable" }] : []));
+    zSelected = input(false, ...(ngDevMode ? [{ debugName: "zSelected" }] : []));
+    zOnDownload = output();
+    zOnPreview = output();
+    zOnRemove = output();
+    zOnSelect = output();
+    isLoading = signal(true, ...(ngDevMode ? [{ debugName: "isLoading" }] : []));
+    formattedSize = computed(() => formatFileSize(this.file().size), ...(ngDevMode ? [{ debugName: "formattedSize" }] : []));
+    category = computed(() => getFileCategory(this.file()), ...(ngDevMode ? [{ debugName: "category" }] : []));
+    isImage = computed(() => this.category() === 'image', ...(ngDevMode ? [{ debugName: "isImage" }] : []));
+    isVideo = computed(() => this.category() === 'video', ...(ngDevMode ? [{ debugName: "isVideo" }] : []));
+    hasVideoPreview = computed(() => this.isVideo() && !!this.file().url, ...(ngDevMode ? [{ debugName: "hasVideoPreview" }] : []));
+    fileExtension = computed(() => {
+        const fileName = this.file().name;
+        const parts = fileName.split('.');
+        if (parts.length < 2) {
+            return 'FILE';
+        }
+        return parts[parts.length - 1].toUpperCase();
+    }, ...(ngDevMode ? [{ debugName: "fileExtension" }] : []));
+    mediaHeightClass = computed(() => {
+        const size = this.zSize();
+        switch (size) {
+            case 'sm':
+                return 'h-36';
+            case 'lg':
+                return 'h-56';
+            default:
+                return 'h-44';
+        }
+    }, ...(ngDevMode ? [{ debugName: "mediaHeightClass" }] : []));
+    formattedDate = computed(() => {
+        const file = this.file();
+        const date = file.updatedAt || file.createdAt;
+        if (!date) {
+            return null;
+        }
+        return new Intl.DateTimeFormat(undefined, {
+            month: 'short',
+            day: '2-digit',
+            year: 'numeric',
+        }).format(date);
+    }, ...(ngDevMode ? [{ debugName: "formattedDate" }] : []));
+    categoryStyle = computed(() => {
+        const style = FILE_CATEGORY_STYLES[this.category()];
+        return {
+            ...style,
+            icon: style.icon,
+        };
+    }, ...(ngDevMode ? [{ debugName: "categoryStyle" }] : []));
+    fileTypeClasses = computed(() => zMergeClasses('inline-flex min-w-14 items-center justify-center rounded-sm border border-black/5 px-2.5 py-1 text-[0.6875rem] font-semibold tracking-wide dark:border-white/10', this.categoryStyle().bg, this.categoryStyle().text), ...(ngDevMode ? [{ debugName: "fileTypeClasses" }] : []));
+    canPreview = computed(() => isPreviewable(this.file()), ...(ngDevMode ? [{ debugName: "canPreview" }] : []));
+    onImageLoad() {
+        this.isLoading.set(false);
+    }
+    onImageError() {
+        this.isLoading.set(false);
+    }
+    onDownload(event) {
+        event.stopPropagation();
+        this.zOnDownload.emit(this.file());
+    }
+    onPreviewClick(event) {
+        event.stopPropagation();
+        this.zOnPreview.emit(this.file());
+    }
+    onPreview() {
+        if (this.canPreview()) {
+            this.zOnPreview.emit(this.file());
+        }
+    }
+    onItemClick() {
+        if (this.zSelectable()) {
+            this.zOnSelect.emit(this.file());
+            return;
+        }
+        this.onPreview();
+    }
+    onRemove(event) {
+        event.stopPropagation();
+        this.zOnRemove.emit(this.file());
+    }
+    onSelectClick(event) {
+        event.stopPropagation();
+        this.zOnSelect.emit(this.file());
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.9", ngImport: i0, type: ZGalleryItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.9", type: ZGalleryItemComponent, isStandalone: true, selector: "z-gallery-item", inputs: { file: { classPropertyName: "file", publicName: "file", isSignal: true, isRequired: true, transformFunction: null }, zMode: { classPropertyName: "zMode", publicName: "zMode", isSignal: true, isRequired: false, transformFunction: null }, zSize: { classPropertyName: "zSize", publicName: "zSize", 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 }, zSelectable: { classPropertyName: "zSelectable", publicName: "zSelectable", isSignal: true, isRequired: false, transformFunction: null }, zSelected: { classPropertyName: "zSelected", publicName: "zSelected", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { zOnDownload: "zOnDownload", zOnPreview: "zOnPreview", zOnRemove: "zOnRemove", zOnSelect: "zOnSelect" }, host: { classAttribute: "z-gallery-item block" }, ngImport: i0, template: `
+    @if (zMode() === 'grid') {
+      <div
+        class="group border-border bg-card hover:border-primary/30 relative cursor-pointer overflow-hidden rounded-md border shadow-sm transition-all duration-300 hover:shadow-lg"
+        [class.border-primary]="zSelected()"
+        [class.ring-1]="zSelected()"
+        [class.ring-primary/35]="zSelected()"
+        (click)="onItemClick()"
+      >
+        @if (zSelectable()) {
+          <div
+            class="bg-primary shadow-card absolute top-3 right-3 z-20 flex size-6 items-center justify-center rounded-full transition-all duration-200"
+            [class.scale-100]="zSelected()"
+            [class.opacity-100]="zSelected()"
+            [class.scale-90]="!zSelected()"
+            [class.opacity-0]="!zSelected()"
+          >
+            <i z-icon zType="lucideCheck" zSize="14" class="text-primary-foreground"></i>
+          </div>
+        }
+
+        <div class="relative overflow-hidden" [class]="mediaHeightClass()">
+          @if (isImage()) {
+            @if (isLoading()) {
+              <div class="absolute inset-0">
+                <z-skeleton class="size-full" />
+              </div>
+            }
+            <img
+              [src]="file().thumbnailUrl || file().url"
+              [alt]="file().name"
+              class="size-full object-cover transition-all duration-500"
+              [class.opacity-0]="isLoading()"
+              [class.scale-100]="!isLoading()"
+              [class.group-hover:scale-110]="!isLoading()"
+              loading="lazy"
+              (load)="onImageLoad()"
+              (error)="onImageError()"
+            />
+          } @else if (hasVideoPreview()) {
+            <video
+              [src]="file().url"
+              [poster]="file().thumbnailUrl ?? ''"
+              class="size-full object-cover transition-all duration-500 group-hover:scale-110"
+              muted
+              playsinline
+              preload="metadata"
+            ></video>
+            <div
+              class="absolute inset-0 flex items-center justify-center bg-black/10 transition-colors duration-300 group-hover:bg-black/25"
+            >
+              <div
+                class="flex size-12 items-center justify-center rounded-full bg-black/50 shadow-lg backdrop-blur-sm transition-transform duration-300 group-hover:scale-110"
+              >
+                <i z-icon zType="lucidePlay" zSize="20" class="fill-white text-white"></i>
+              </div>
+            </div>
+          } @else {
+            <div
+              class="flex size-full flex-col items-center justify-center gap-2 bg-gradient-to-br"
+              [class]="categoryStyle().bg"
+            >
+              <i z-icon [zType]="categoryStyle().icon" zSize="34" [class]="categoryStyle().text"></i>
+              <span class="text-xs font-semibold tracking-wide" [class]="categoryStyle().text">
+                {{ categoryStyle().label }}
+              </span>
+            </div>
+          }
+
+          <div class="absolute inset-x-0 top-0 z-10 flex items-start justify-between p-3">
+            <span
+              class="rounded-full border border-white/35 bg-black/45 px-2.5 py-1 text-[0.6875rem] font-semibold tracking-wide text-white backdrop-blur-md"
+            >
+              {{ fileExtension() }}
+            </span>
+            <span
+              class="rounded-full border border-white/25 bg-black/35 px-2 py-1 text-[0.625rem] font-medium text-white/95 backdrop-blur-md"
+            >
+              {{ formattedSize() }}
+            </span>
+          </div>
+
+          <div
+            class="absolute inset-x-0 bottom-0 h-24 bg-gradient-to-t from-black/70 via-black/30 to-transparent opacity-85 transition-opacity duration-300 group-hover:opacity-100"
+          ></div>
+
+          <div
+            class="absolute right-3 bottom-3 z-20 flex items-center gap-1.5 rounded-full border border-white/20 bg-black/40 p-1 opacity-0 backdrop-blur-md transition-all duration-200 group-hover:opacity-100"
+          >
+            @if (zShowPreview() && canPreview()) {
+              <button
+                z-button
+                zType="secondary"
+                zSize="xs"
+                zShape="circle"
+                class="shadow-lg"
+                (click)="onPreviewClick($event)"
+                z-tooltip
+                [zContent]="'i18n_z_ui_gallery_preview' | translate"
+              >
+                <i z-icon zType="lucideEye" zSize="14"></i>
+              </button>
+            }
+            @if (zShowDownload() && (file().downloadUrl || file().url)) {
+              <button
+                z-button
+                zType="secondary"
+                zSize="xs"
+                zShape="circle"
+                class="shadow-lg"
+                (click)="onDownload($event)"
+                z-tooltip
+                [zContent]="'i18n_z_ui_gallery_download' | translate"
+              >
+                <i z-icon zType="lucideDownload" zSize="14"></i>
+              </button>
+            }
+            @if (zShowRemove()) {
+              <button
+                z-button
+                zType="secondary"
+                zSize="xs"
+                zShape="circle"
+                class="shadow-lg"
+                (click)="onRemove($event)"
+                z-tooltip
+                [zContent]="'i18n_z_ui_gallery_remove' | translate"
+              >
+                <i z-icon zType="lucideTrash2" zSize="14"></i>
+              </button>
+            }
+          </div>
+        </div>
+
+        <div class="p-3">
+          <p class="text-foreground truncate text-sm leading-normal font-semibold" z-tooltip [zContent]="file().name">
+            {{ file().name }}
+          </p>
+          @if (formattedDate()) {
+            <p class="text-muted-foreground mt-1 text-xs">{{ formattedDate() }}</p>
+          }
+        </div>
+      </div>
+    } @else {
+      <div
+        class="group border-border bg-card hover:border-primary/35 flex cursor-pointer items-center gap-3 rounded-sm border px-3 py-2.5 shadow-sm transition-all duration-200 hover:shadow-md"
+        [class.border-primary]="zSelected()"
+        [class.ring-1]="zSelected()"
+        [class.ring-primary/30]="zSelected()"
+        (click)="onItemClick()"
+      >
+        @if (zSelectable()) {
+          <div
+            class="bg-primary -ml-1 flex size-5 shrink-0 items-center justify-center rounded-full transition-all duration-200"
+            [class.scale-100]="zSelected()"
+            [class.opacity-100]="zSelected()"
+            [class.scale-90]="!zSelected()"
+            [class.opacity-0]="!zSelected()"
+          >
+            <i z-icon zType="lucideCheck" zSize="12" class="text-primary-foreground"></i>
+          </div>
+        }
+
+        <div
+          class="relative flex size-11 shrink-0 items-center justify-center overflow-hidden rounded-sm border border-black/5 bg-white/40 shadow-sm backdrop-blur-sm dark:border-white/10 dark:bg-white/5"
+        >
+          @if (isImage() && (file().thumbnailUrl || file().url)) {
+            <img
+              [src]="file().thumbnailUrl || file().url"
+              [alt]="file().name"
+              class="size-full rounded-sm object-cover"
+              loading="lazy"
+            />
+          } @else if (hasVideoPreview()) {
+            <video
+              [src]="file().url"
+              [poster]="file().thumbnailUrl ?? ''"
+              class="size-full rounded-sm object-cover"
+              muted
+              playsinline
+              preload="metadata"
+            ></video>
+            <div class="absolute inset-0 flex items-center justify-center rounded-sm bg-black/25">
+              <i z-icon zType="lucidePlay" zSize="12" class="fill-white text-white"></i>
+            </div>
+          } @else {
+            <span class="absolute inset-0 opacity-30 dark:opacity-20" [class]="categoryStyle().bg"></span>
+            <i
+              z-icon
+              [zType]="categoryStyle().icon"
+              zSize="18"
+              class="relative z-10"
+              [class]="categoryStyle().text"
+            ></i>
+          }
+        </div>
+
+        <div class="min-w-0 flex-1">
+          <p class="text-foreground truncate text-sm font-medium" z-tooltip [zContent]="file().name">
+            {{ file().name }}
+          </p>
+          <p class="text-muted-foreground truncate text-xs">{{ formattedSize() }} · {{ categoryStyle().label }}</p>
+        </div>
+
+        <div class="ml-auto flex shrink-0 items-center gap-1.5">
+          <span [class]="fileTypeClasses()">
+            {{ fileExtension() }}
+          </span>
+          @if (zShowPreview() && canPreview()) {
+            <button
+              z-button
+              zType="ghost"
+              zSize="xs"
+              zShape="circle"
+              class="text-muted-foreground hover:text-foreground"
+              (click)="onPreviewClick($event)"
+              z-tooltip
+              [zContent]="'i18n_z_ui_gallery_preview' | translate"
+            >
+              <i z-icon zType="lucideEye" zSize="16"></i>
+            </button>
+          }
+          @if (zShowDownload() && (file().downloadUrl || file().url)) {
+            <button
+              z-button
+              zType="ghost"
+              zSize="xs"
+              zShape="circle"
+              class="text-muted-foreground hover:text-foreground"
+              (click)="onDownload($event)"
+              z-tooltip
+              [zContent]="'i18n_z_ui_gallery_download' | translate"
+            >
+              <i z-icon zType="lucideDownload" zSize="16"></i>
+            </button>
+          }
+          @if (zShowRemove()) {
+            <button
+              z-button
+              zType="ghost"
+              zSize="xs"
+              zShape="circle"
+              class="text-muted-foreground hover:text-destructive"
+              (click)="onRemove($event)"
+              z-tooltip
+              [zContent]="'i18n_z_ui_gallery_remove' | translate"
+            >
+              <i z-icon zType="lucideTrash2" zSize="16"></i>
+            </button>
+          }
+        </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: "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: "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: ZGalleryItemComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'z-gallery-item',
+                    imports: [ZButtonComponent, ZIconComponent, ZTooltipDirective, ZSkeletonComponent, TranslatePipe],
+                    standalone: true,
+                    template: `
+    @if (zMode() === 'grid') {
+      <div
+        class="group border-border bg-card hover:border-primary/30 relative cursor-pointer overflow-hidden rounded-md border shadow-sm transition-all duration-300 hover:shadow-lg"
+        [class.border-primary]="zSelected()"
+        [class.ring-1]="zSelected()"
+        [class.ring-primary/35]="zSelected()"
+        (click)="onItemClick()"
+      >
+        @if (zSelectable()) {
+          <div
+            class="bg-primary shadow-card absolute top-3 right-3 z-20 flex size-6 items-center justify-center rounded-full transition-all duration-200"
+            [class.scale-100]="zSelected()"
+            [class.opacity-100]="zSelected()"
+            [class.scale-90]="!zSelected()"
+            [class.opacity-0]="!zSelected()"
+          >
+            <i z-icon zType="lucideCheck" zSize="14" class="text-primary-foreground"></i>
+          </div>
+        }
+
+        <div class="relative overflow-hidden" [class]="mediaHeightClass()">
+          @if (isImage()) {
+            @if (isLoading()) {
+              <div class="absolute inset-0">
+                <z-skeleton class="size-full" />
+              </div>
+            }
+            <img
+              [src]="file().thumbnailUrl || file().url"
+              [alt]="file().name"
+              class="size-full object-cover transition-all duration-500"
+              [class.opacity-0]="isLoading()"
+              [class.scale-100]="!isLoading()"
+              [class.group-hover:scale-110]="!isLoading()"
+              loading="lazy"
+              (load)="onImageLoad()"
+              (error)="onImageError()"
+            />
+          } @else if (hasVideoPreview()) {
+            <video
+              [src]="file().url"
+              [poster]="file().thumbnailUrl ?? ''"
+              class="size-full object-cover transition-all duration-500 group-hover:scale-110"
+              muted
+              playsinline
+              preload="metadata"
+            ></video>
+            <div
+              class="absolute inset-0 flex items-center justify-center bg-black/10 transition-colors duration-300 group-hover:bg-black/25"
+            >
+              <div
+                class="flex size-12 items-center justify-center rounded-full bg-black/50 shadow-lg backdrop-blur-sm transition-transform duration-300 group-hover:scale-110"
+              >
+                <i z-icon zType="lucidePlay" zSize="20" class="fill-white text-white"></i>
+              </div>
+            </div>
+          } @else {
+            <div
+              class="flex size-full flex-col items-center justify-center gap-2 bg-gradient-to-br"
+              [class]="categoryStyle().bg"
+            >
+              <i z-icon [zType]="categoryStyle().icon" zSize="34" [class]="categoryStyle().text"></i>
+              <span class="text-xs font-semibold tracking-wide" [class]="categoryStyle().text">
+                {{ categoryStyle().label }}
+              </span>
+            </div>
+          }
+
+          <div class="absolute inset-x-0 top-0 z-10 flex items-start justify-between p-3">
+            <span
+              class="rounded-full border border-white/35 bg-black/45 px-2.5 py-1 text-[0.6875rem] font-semibold tracking-wide text-white backdrop-blur-md"
+            >
+              {{ fileExtension() }}
+            </span>
+            <span
+              class="rounded-full border border-white/25 bg-black/35 px-2 py-1 text-[0.625rem] font-medium text-white/95 backdrop-blur-md"
+            >
+              {{ formattedSize() }}
+            </span>
+          </div>
+
+          <div
+            class="absolute inset-x-0 bottom-0 h-24 bg-gradient-to-t from-black/70 via-black/30 to-transparent opacity-85 transition-opacity duration-300 group-hover:opacity-100"
+          ></div>
+
+          <div
+            class="absolute right-3 bottom-3 z-20 flex items-center gap-1.5 rounded-full border border-white/20 bg-black/40 p-1 opacity-0 backdrop-blur-md transition-all duration-200 group-hover:opacity-100"
+          >
+            @if (zShowPreview() && canPreview()) {
+              <button
+                z-button
+                zType="secondary"
+                zSize="xs"
+                zShape="circle"
+                class="shadow-lg"
+                (click)="onPreviewClick($event)"
+                z-tooltip
+                [zContent]="'i18n_z_ui_gallery_preview' | translate"
+              >
+                <i z-icon zType="lucideEye" zSize="14"></i>
+              </button>
+            }
+            @if (zShowDownload() && (file().downloadUrl || file().url)) {
+              <button
+                z-button
+                zType="secondary"
+                zSize="xs"
+                zShape="circle"
+                class="shadow-lg"
+                (click)="onDownload($event)"
+                z-tooltip
+                [zContent]="'i18n_z_ui_gallery_download' | translate"
+              >
+                <i z-icon zType="lucideDownload" zSize="14"></i>
+              </button>
+            }
+            @if (zShowRemove()) {
+              <button
+                z-button
+                zType="secondary"
+                zSize="xs"
+                zShape="circle"
+                class="shadow-lg"
+                (click)="onRemove($event)"
+                z-tooltip
+                [zContent]="'i18n_z_ui_gallery_remove' | translate"
+              >
+                <i z-icon zType="lucideTrash2" zSize="14"></i>
+              </button>
+            }
+          </div>
+        </div>
+
+        <div class="p-3">
+          <p class="text-foreground truncate text-sm leading-normal font-semibold" z-tooltip [zContent]="file().name">
+            {{ file().name }}
+          </p>
+          @if (formattedDate()) {
+            <p class="text-muted-foreground mt-1 text-xs">{{ formattedDate() }}</p>
+          }
+        </div>
+      </div>
+    } @else {
+      <div
+        class="group border-border bg-card hover:border-primary/35 flex cursor-pointer items-center gap-3 rounded-sm border px-3 py-2.5 shadow-sm transition-all duration-200 hover:shadow-md"
+        [class.border-primary]="zSelected()"
+        [class.ring-1]="zSelected()"
+        [class.ring-primary/30]="zSelected()"
+        (click)="onItemClick()"
+      >
+        @if (zSelectable()) {
+          <div
+            class="bg-primary -ml-1 flex size-5 shrink-0 items-center justify-center rounded-full transition-all duration-200"
+            [class.scale-100]="zSelected()"
+            [class.opacity-100]="zSelected()"
+            [class.scale-90]="!zSelected()"
+            [class.opacity-0]="!zSelected()"
+          >
+            <i z-icon zType="lucideCheck" zSize="12" class="text-primary-foreground"></i>
+          </div>
+        }
+
+        <div
+          class="relative flex size-11 shrink-0 items-center justify-center overflow-hidden rounded-sm border border-black/5 bg-white/40 shadow-sm backdrop-blur-sm dark:border-white/10 dark:bg-white/5"
+        >
+          @if (isImage() && (file().thumbnailUrl || file().url)) {
+            <img
+              [src]="file().thumbnailUrl || file().url"
+              [alt]="file().name"
+              class="size-full rounded-sm object-cover"
+              loading="lazy"
+            />
+          } @else if (hasVideoPreview()) {
+            <video
+              [src]="file().url"
+              [poster]="file().thumbnailUrl ?? ''"
+              class="size-full rounded-sm object-cover"
+              muted
+              playsinline
+              preload="metadata"
+            ></video>
+            <div class="absolute inset-0 flex items-center justify-center rounded-sm bg-black/25">
+              <i z-icon zType="lucidePlay" zSize="12" class="fill-white text-white"></i>
+            </div>
+          } @else {
+            <span class="absolute inset-0 opacity-30 dark:opacity-20" [class]="categoryStyle().bg"></span>
+            <i
+              z-icon
+              [zType]="categoryStyle().icon"
+              zSize="18"
+              class="relative z-10"
+              [class]="categoryStyle().text"
+            ></i>
+          }
+        </div>
+
+        <div class="min-w-0 flex-1">
+          <p class="text-foreground truncate text-sm font-medium" z-tooltip [zContent]="file().name">
+            {{ file().name }}
+          </p>
+          <p class="text-muted-foreground truncate text-xs">{{ formattedSize() }} · {{ categoryStyle().label }}</p>
+        </div>
+
+        <div class="ml-auto flex shrink-0 items-center gap-1.5">
+          <span [class]="fileTypeClasses()">
+            {{ fileExtension() }}
+          </span>
+          @if (zShowPreview() && canPreview()) {
+            <button
+              z-button
+              zType="ghost"
+              zSize="xs"
+              zShape="circle"
+              class="text-muted-foreground hover:text-foreground"
+              (click)="onPreviewClick($event)"
+              z-tooltip
+              [zContent]="'i18n_z_ui_gallery_preview' | translate"
+            >
+              <i z-icon zType="lucideEye" zSize="16"></i>
+            </button>
+          }
+          @if (zShowDownload() && (file().downloadUrl || file().url)) {
+            <button
+              z-button
+              zType="ghost"
+              zSize="xs"
+              zShape="circle"
+              class="text-muted-foreground hover:text-foreground"
+              (click)="onDownload($event)"
+              z-tooltip
+              [zContent]="'i18n_z_ui_gallery_download' | translate"
+            >
+              <i z-icon zType="lucideDownload" zSize="16"></i>
+            </button>
+          }
+          @if (zShowRemove()) {
+            <button
+              z-button
+              zType="ghost"
+              zSize="xs"
+              zShape="circle"
+              class="text-muted-foreground hover:text-destructive"
+              (click)="onRemove($event)"
+              z-tooltip
+              [zContent]="'i18n_z_ui_gallery_remove' | translate"
+            >
+              <i z-icon zType="lucideTrash2" zSize="16"></i>
+            </button>
+          }
+        </div>
+      </div>
+    }
+  `,
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    encapsulation: ViewEncapsulation.None,
+                    host: {
+                        class: 'z-gallery-item block',
+                    },
+                }]
+        }], 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();
+    zOnNavigate = output();
+    zOnRemove = output();
+    zoomed = signal(false, ...(ngDevMode ? [{ debugName: "zoomed" }] : []));
+    isLoading = signal(true, ...(ngDevMode ? [{ debugName: "isLoading" }] : []));
+    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;
+    constructor() {
+        effect(() => {
+            const currentFile = this.file();
+            if (!currentFile) {
+                return;
+            }
+            this.isLoading.set(true);
+            this._mediaLoaded.set(false);
+            this._loadingStartTime = Date.now();
+            this.zoomed.set(false);
+            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);
+            if (category === 'word' || category === 'excel' || category === 'text' || category === 'code') {
+                void this._loadFileContent(currentFile, category);
+            }
+        });
+    }
+    async _loadFileContent(file, category) {
+        const url = file.url || file.downloadUrl;
+        if (!url) {
+            this.conversionError.set('No URL available for preview');
+            this._completeLoading();
+            return;
+        }
+        this.isConverting.set(true);
+        try {
+            if (category === 'word') {
+                await this._loadDocx(url);
+            }
+            else if (category === 'excel') {
+                await this._loadExcel(url);
+            }
+            else {
+                await this._loadText(url);
+            }
+        }
+        catch (error) {
+            const message = error instanceof Error ? error.message : 'Failed to load file content';
+            this.conversionError.set(message);
+        }
+        finally {
+            this.isConverting.set(false);
+            this._completeLoading();
+        }
+    }
+    async _loadDocx(url) {
+        const response = await fetch(url);
+        this._assertSuccessfulResponse(response);
+        const arrayBuffer = await response.arrayBuffer();
+        const mammothModule = await import('mammoth');
+        const mammoth = mammothModule.default ?? mammothModule;
+        const result = await mammoth.convertToHtml({ arrayBuffer });
+        this.docHtmlContent.set(this._sanitizer.bypassSecurityTrustHtml(result.value));
+    }
+    async _loadExcel(url) {
+        const response = await fetch(url);
+        this._assertSuccessfulResponse(response);
+        const arrayBuffer = await response.arrayBuffer();
+        const xlsxModule = await import('xlsx');
+        const XLSX = xlsxModule.default ?? xlsxModule;
+        const workbook = XLSX.read(arrayBuffer);
+        const firstSheet = workbook.Sheets[workbook.SheetNames[0]];
+        const html = XLSX.utils.sheet_to_html(firstSheet);
+        this.docHtmlContent.set(this._sanitizer.bypassSecurityTrustHtml(html));
+    }
+    async _loadText(url) {
+        const response = await fetch(url);
+        this._assertSuccessfulResponse(response);
+        const text = await response.text();
+        this.textContent.set(text);
+    }
+    _assertSuccessfulResponse(response) {
+        if (!response.ok) {
+            throw new Error(`Failed to fetch file: ${response.status}`);
+        }
+    }
+    _completeLoading() {
+        const elapsed = Date.now() - this._loadingStartTime;
+        const remaining = this._minLoadingTime - elapsed;
+        if (remaining > 0) {
+            setTimeout(() => this.isLoading.set(false), remaining);
+            return;
+        }
+        this.isLoading.set(false);
+    }
+    currentIndex = computed(() => {
+        const allFiles = this.files();
+        const current = this.file();
+        return allFiles.findIndex(f => f.id === current.id);
+    }, ...(ngDevMode ? [{ debugName: "currentIndex" }] : []));
+    hasPrev = computed(() => this.currentIndex() > 0, ...(ngDevMode ? [{ debugName: "hasPrev" }] : []));
+    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" }] : []));
+    pdfUrl = computed(() => {
+        const url = this.file().url || this.file().downloadUrl;
+        if (!url) {
+            return null;
+        }
+        if (!this._isAllowedResourceUrl(url)) {
+            return null;
+        }
+        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" }] : []));
+    isTextFile = computed(() => {
+        const category = getFileCategory(this.file());
+        return category === 'text' || category === 'code';
+    }, ...(ngDevMode ? [{ debugName: "isTextFile" }] : []));
+    canPreview = computed(() => isPreviewable(this.file()), ...(ngDevMode ? [{ debugName: "canPreview" }] : []));
+    formattedSize = computed(() => formatFileSize(this.file().size), ...(ngDevMode ? [{ debugName: "formattedSize" }] : []));
+    imageTransform = computed(() => {
+        const rot = this.rotation();
+        const zoom = this.zoomed() ? 'scale(1.5)' : 'scale(1)';
+        return `rotate(${rot}deg) ${zoom}`;
+    }, ...(ngDevMode ? [{ debugName: "imageTransform" }] : []));
+    _isAllowedResourceUrl(url) {
+        const currentOrigin = globalThis.location?.origin;
+        const baseUrl = currentOrigin ?? 'http://localhost';
+        try {
+            const parsedUrl = new URL(url, baseUrl);
+            if (parsedUrl.protocol === 'blob:') {
+                return parsedUrl.origin === baseUrl;
+            }
+            return parsedUrl.origin === baseUrl || this._trustedOrigins().has(parsedUrl.origin);
+        }
+        catch {
+            return false;
+        }
+    }
+    _trustedOrigins = computed(() => new Set(this.zTrustedResourceOrigins()
+        .map(origin => this._normalizeOrigin(origin))
+        .filter((origin) => Boolean(origin))), ...(ngDevMode ? [{ debugName: "_trustedOrigins" }] : []));
+    _normalizeOrigin(origin) {
+        try {
+            return new URL(origin).origin;
+        }
+        catch {
+            return null;
+        }
+    }
+    fileIcon = computed(() => {
+        const category = getFileCategory(this.file());
+        const iconMap = {
+            pdf: 'lucideFileText',
+            word: 'lucideFileText',
+            excel: 'lucideFileSpreadsheet',
+            video: 'lucideVideo',
+            audio: 'lucideMusic',
+            archive: 'lucideFileArchive',
+            code: 'lucideCode',
+            text: 'lucideFileText',
+            unknown: 'lucideFile',
+        };
+        return iconMap[category] || 'lucideFile';
+    }, ...(ngDevMode ? [{ debugName: "fileIcon" }] : []));
+    onKeyDown(event) {
+        switch (event.key) {
+            case 'Escape':
+                this.close();
+                break;
+            case 'ArrowLeft':
+                if (this.hasPrev()) {
+                    this.navigate(-1);
+                }
+                break;
+            case 'ArrowRight':
+                if (this.hasNext()) {
+                    this.navigate(1);
+                }
+                break;
+            case 'r':
+            case 'R':
+                if (this.isImageFile()) {
+                    this.rotateRight();
+                }
+                break;
+        }
+    }
+    close() {
+        this.zOnClose.emit();
+    }
+    navigate(direction) {
+        const allFiles = this.files();
+        const newIndex = this.currentIndex() + direction;
+        if (newIndex >= 0 && newIndex < allFiles.length) {
+            this.zoomed.set(false);
+            this.rotation.set(0);
+            this.isLoading.set(true);
+            this._mediaLoaded.set(false);
+            this._loadingStartTime = Date.now();
+            this.previewError.set(false);
+            this.zOnNavigate.emit(allFiles[newIndex]);
+        }
+    }
+    toggleZoom() {
+        if (this.isImageFile()) {
+            this.zoomed.update(z => !z);
+        }
+    }
+    rotateLeft() {
+        this.rotation.update(r => (r - 90 + 360) % 360);
+    }
+    rotateRight() {
+        this.rotation.update(r => (r + 90) % 360);
+    }
+    onImageLoad() {
+        this._completeLoading();
+    }
+    onVideoLoad() {
+        this._completeLoading();
+    }
+    onPdfLoad() {
+        this._queueMobilePdfFit();
+        this._completeLoading();
+    }
+    onMediaError() {
+        this.previewError.set(true);
+        this._completeLoading();
+    }
+    download() {
+        this.zOnDownload.emit(this.file());
+    }
+    remove() {
+        this.zOnRemove.emit(this.file());
+    }
+    onBackdropClick(event) {
+        if (event.target.classList.contains('fixed')) {
+            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 }, 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", "externalLinkTarget", "rememberLastView", "annotationEditor", "highlightEditorColors", "enableSignatureEditor", "signatureStorage", "pageColors", "pdfJsOptions", "enableCommentEditor", "enablePageEditing", "showToolbar", "chromeless", "customToolbarTpl", "customSidebarTpl", "aiAssistantConfig", "pageOverlayTpl", "httpHeaders", "withCredentials", "formData", "contentProtection", "iframeSandbox", "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", "onPasswordPrompt", "onAnnotationEditorStateChange", "onPagesEdited", "onReadAloudStateChange", "onSidebarViewChanged", "onLayersChanged", "onNamedAction", "onDocumentProperties", "annotationEditorChange", "onProgress", "formDataChange", "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, PdfJsViewerModule], standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, host: {
+                        class: 'z-gallery-preview z-[9999]',
+                        '(document:keydown)': 'onKeyDown($event)',
+                    }, template: "<div\n  class=\"animate-in fade-in fixed inset-0 z-50 flex items-center justify-center bg-black/80 backdrop-blur-sm duration-200\"\n  (click)=\"onBackdropClick($event)\">\n  <button\n    z-button\n    zType=\"ghost\"\n    zShape=\"circle\"\n    class=\"absolute top-3 right-3 z-20 text-white hover:bg-white/20 lg:top-4 lg:right-4\"\n    (click)=\"close()\">\n    <i z-icon zType=\"lucideX\" zSize=\"24\"></i>\n  </button>\n\n  @if (hasPrev()) {\n    <button\n      z-button\n      zType=\"ghost\"\n      zShape=\"circle\"\n      class=\"absolute left-4 z-10 text-white hover:bg-white/20\"\n      (click)=\"navigate(-1)\">\n      <i z-icon zType=\"lucideChevronLeft\" zSize=\"32\"></i>\n    </button>\n  }\n\n  @if (hasNext()) {\n    <button\n      z-button\n      zType=\"ghost\"\n      zShape=\"circle\"\n      class=\"absolute right-4 z-10 text-white hover:bg-white/20\"\n      (click)=\"navigate(1)\">\n      <i z-icon zType=\"lucideChevronRight\" zSize=\"32\"></i>\n    </button>\n  }\n\n  <div class=\"flex h-full w-full flex-col items-center\" (click)=\"$event.stopPropagation()\">\n    <div\n      class=\"dark:!border-border absolute top-3 right-14 left-3 z-10 flex min-w-0 items-center justify-between gap-2 rounded-[0.375rem] border !border-transparent bg-black/70 px-2.5 py-1.5 text-xs text-white shadow-lg backdrop-blur-sm lg:top-4 lg:right-auto lg:left-1/2 lg:max-w-[calc(100vw-10rem)] lg:-translate-x-1/2 lg:justify-start lg:bg-black/60 lg:px-4 lg:py-2 lg:text-sm dark:border\">\n      <div class=\"flex min-w-0 items-baseline gap-1.5\">\n        <span class=\"min-w-0 truncate font-medium lg:max-w-[12.5rem]\">{{ file().name }}</span>\n        <span class=\"hidden shrink-0 text-white/70 lg:inline\">({{ formattedSize() }})</span>\n      </div>\n\n      @if (files().length > 1) {\n        <span class=\"hidden shrink-0 text-white/70 md:inline\">{{ currentIndex() + 1 }} / {{ files().length }}</span>\n      }\n\n      <div class=\"ml-1 flex shrink-0 items-center gap-0.5\">\n        @if (isImageFile()) {\n          <button\n            z-button\n            zType=\"ghost\"\n            zSize=\"xs\"\n            zShape=\"circle\"\n            class=\"text-white hover:bg-white/20\"\n            z-tooltip\n            [zContent]=\"'i18n_z_ui_gallery_rotate_left' | translate\"\n            (click)=\"rotateLeft()\">\n            <i z-icon zType=\"lucideUndo\" zSize=\"14\"></i>\n          </button>\n          <button\n            z-button\n            zType=\"ghost\"\n            zSize=\"xs\"\n            zShape=\"circle\"\n            class=\"text-white hover:bg-white/20\"\n            z-tooltip\n            [zContent]=\"'i18n_z_ui_gallery_rotate_right' | translate\"\n            (click)=\"rotateRight()\">\n            <i z-icon zType=\"lucideRedo\" zSize=\"14\"></i>\n          </button>\n        }\n\n        <button\n          z-button\n          zType=\"ghost\"\n          zSize=\"xs\"\n          zShape=\"circle\"\n          class=\"text-white hover:bg-white/20\"\n          z-tooltip\n          [zContent]=\"'i18n_z_ui_gallery_download' | translate\"\n          (click)=\"download()\">\n          <i z-icon zType=\"lucideDownload\" zSize=\"14\"></i>\n        </button>\n\n        @if (zShowRemove()) {\n          <button\n            z-button\n            zType=\"ghost\"\n            zSize=\"xs\"\n            zShape=\"circle\"\n            class=\"text-white hover:bg-white/20\"\n            z-tooltip\n            [zContent]=\"'i18n_z_ui_gallery_delete' | translate\"\n            (click)=\"remove()\">\n            <i z-icon zType=\"lucideTrash2\" zSize=\"14\"></i>\n          </button>\n        }\n      </div>\n    </div>\n\n    <div class=\"relative flex flex-1 items-center justify-center pt-16\">\n      @if (isImageFile()) {\n        <div class=\"relative flex h-[60vh] w-[70vw] items-center justify-center\">\n          @if (isLoading()) {\n            <z-skeleton class=\"absolute inset-0 rounded-lg\" />\n            <div class=\"text-muted-foreground absolute inset-0 flex items-center justify-center text-sm font-medium\">\n              {{ 'i18n_z_ui_gallery_loading_preview' | translate }}\n            </div>\n          }\n          @if (previewError()) {\n            <div class=\"bg-card flex size-full flex-col items-center justify-center rounded-lg p-8 shadow-2xl\">\n              <div class=\"bg-muted mb-4 flex size-16 items-center justify-center rounded-xl\">\n                <i z-icon zType=\"lucideTriangleAlert\" zSize=\"28\" class=\"text-destructive\"></i>\n              </div>\n              <span class=\"text-foreground text-sm font-medium\">\n                {{ 'i18n_z_ui_gallery_preview_load_error' | translate }}\n              </span>\n            </div>\n          } @else {\n            <img\n              [src]=\"file().url || file().thumbnailUrl\"\n              [alt]=\"file().name\"\n              class=\"max-h-full max-w-full rounded-lg object-contain shadow-2xl transition-opacity duration-300\"\n              [class.opacity-0]=\"isLoading()\"\n              [class.opacity-100]=\"!isLoading()\"\n              [class.cursor-zoom-in]=\"!zoomed()\"\n              [class.cursor-zoom-out]=\"zoomed()\"\n              [style.transform]=\"imageTransform()\"\n              (load)=\"onImageLoad()\"\n              (error)=\"onMediaError()\"\n              (click)=\"toggleZoom()\" />\n          }\n        </div>\n      } @else if (isPdf() && pdfUrl()) {\n        <div\n          class=\"z-gallery-pdf-frame relative h-[75vh] w-[85vw] max-w-[96vw] overflow-hidden rounded-sm border shadow-xs\">\n          @if (isLoading()) {\n            <z-skeleton class=\"absolute inset-0 rounded-sm\" />\n            <div\n              class=\"text-muted-foreground absolute inset-0 z-10 flex items-center justify-center text-sm font-medium\">\n              {{ 'i18n_z_ui_gallery_loading_preview' | translate }}\n            </div>\n          }\n          @if (previewError()) {\n            <div class=\"bg-card flex size-full flex-col items-center justify-center p-8\">\n              <div class=\"bg-muted mb-4 flex size-16 items-center justify-center rounded-xl\">\n                <i z-icon zType=\"lucideTriangleAlert\" zSize=\"28\" class=\"text-destructive\"></i>\n              </div>\n              <span class=\"text-foreground text-sm font-medium\">\n                {{ 'i18n_z_ui_gallery_preview_load_error' | translate }}\n              </span>\n            </div>\n          } @else {\n            <div\n              class=\"relative size-full bg-white transition-opacity duration-300\"\n              [class.opacity-0]=\"isLoading()\"\n              [class.opacity-100]=\"!isLoading()\">\n              @let pdfConfig = pdfViewerConfig();\n              <ng2-pdfjs-viewer\n                #pdfViewer\n                class=\"block size-full\"\n                [viewerFolder]=\"pdfConfig.viewerFolder!\"\n                [viewerId]=\"pdfViewerId()\"\n                [pdfSrc]=\"pdfUrl()!\"\n                [downloadFileName]=\"file().name\"\n                [locale]=\"pdfConfig.locale!\"\n                [showSpinner]=\"pdfConfig.showSpinner!\"\n                [useOnlyCssZoom]=\"pdfConfig.useOnlyCssZoom!\"\n                [diagnosticLogs]=\"pdfConfig.diagnosticLogs!\"\n                [showOpenFile]=\"pdfConfig.showOpenFile!\"\n                [showAnnotations]=\"pdfConfig.showAnnotations!\"\n                [showDownload]=\"pdfConfig.showDownload!\"\n                [showViewBookmark]=\"pdfConfig.showViewBookmark!\"\n                [showPrint]=\"pdfConfig.showPrint!\"\n                [showFullScreen]=\"pdfConfig.showFullScreen!\"\n                [showFind]=\"pdfConfig.showFind!\"\n                [downloadOnLoad]=\"pdfConfig.downloadOnLoad!\"\n                [printOnLoad]=\"pdfConfig.printOnLoad!\"\n                [rotateCW]=\"pdfConfig.rotateCW!\"\n                [rotateCCW]=\"pdfConfig.rotateCCW!\"\n                [showLastPageOnLoad]=\"pdfConfig.showLastPageOnLoad!\"\n                [showToolbarLeft]=\"pdfConfig.showToolbarLeft!\"\n                [showToolbarMiddle]=\"pdfConfig.showToolbarMiddle!\"\n                [showToolbarRight]=\"pdfConfig.showToolbarRight!\"\n                [showSecondaryToolbarToggle]=\"pdfConfig.showSecondaryToolbarToggle!\"\n                [showSidebar]=\"pdfConfig.showSidebar!\"\n                [showSidebarLeft]=\"pdfConfig.showSidebarLeft!\"\n                [showSidebarRight]=\"pdfConfig.showSidebarRight!\"\n                [toolbarDensity]=\"pdfConfig.toolbarDensity!\"\n                [sidebarWidth]=\"pdfConfig.sidebarWidth\"\n                [toolbarPosition]=\"pdfConfig.toolbarPosition!\"\n                [sidebarPosition]=\"pdfConfig.sidebarPosition!\"\n                [responsiveBreakpoint]=\"pdfConfig.responsiveBreakpoint\"\n                [zoom]=\"pdfConfig.zoom!\"\n                [rotation]=\"pdfConfig.rotation!\"\n                [cursor]=\"pdfConfig.cursor!\"\n                [scroll]=\"pdfConfig.scroll!\"\n                [spread]=\"pdfConfig.spread!\"\n                [pageMode]=\"pdfConfig.pageMode!\"\n                [page]=\"pdfConfig.page!\"\n                [iframeBorder]=\"pdfConfig.iframeBorder!\"\n                [theme]=\"pdfConfig.theme!\"\n                [primaryColor]=\"pdfConfig.primaryColor\"\n                [backgroundColor]=\"pdfConfig.backgroundColor\"\n                [pageBorderColor]=\"pdfConfig.pageBorderColor\"\n                [pageSpacing]=\"pdfConfig.pageSpacing\"\n                [toolbarColor]=\"pdfConfig.toolbarColor\"\n                [textColor]=\"pdfConfig.textColor\"\n                [borderRadius]=\"pdfConfig.borderRadius\"\n                [customCSS]=\"pdfConfig.customCSS\"\n                [cspNonce]=\"pdfConfig.cspNonce\"\n                [iframeTitle]=\"pdfConfig.iframeTitle || ('i18n_z_ui_gallery_pdf_preview' | translate)\"\n                [urlValidation]=\"pdfConfig.urlValidation!\"\n                [controlVisibility]=\"pdfConfig.controlVisibility!\"\n                [groupVisibility]=\"pdfConfig.groupVisibility!\"\n                [autoActions]=\"pdfConfig.autoActions!\"\n                [viewerConfig]=\"pdfConfig.viewerConfig!\"\n                [themeConfig]=\"pdfConfig.themeConfig!\"\n                [layoutConfig]=\"pdfConfig.layoutConfig!\"\n                (onDocumentLoad)=\"onPdfLoad()\"\n                (onDocumentError)=\"onMediaError()\" />\n            </div>\n          }\n        </div>\n      } @else if (isVideo()) {\n        <div class=\"relative flex h-[60vh] w-[70vw] items-center justify-center\">\n          @if (isLoading()) {\n            <z-skeleton class=\"absolute inset-0 rounded-lg\" />\n            <div class=\"text-muted-foreground absolute inset-0 flex items-center justify-center text-sm font-medium\">\n              {{ 'i18n_z_ui_gallery_loading_preview' | translate }}\n            </div>\n          }\n          @if (previewError()) {\n            <div class=\"bg-card flex size-full flex-col items-center justify-center rounded-lg p-8 shadow-2xl\">\n              <div class=\"bg-muted mb-4 flex size-16 items-center justify-center rounded-xl\">\n                <i z-icon zType=\"lucideTriangleAlert\" zSize=\"28\" class=\"text-destructive\"></i>\n              </div>\n              <span class=\"text-foreground text-sm font-medium\">\n                {{ 'i18n_z_ui_gallery_preview_load_error' | translate }}\n              </span>\n            </div>\n          } @else {\n            <video\n              [src]=\"file().url\"\n              controls\n              autoplay\n              class=\"max-h-full max-w-full rounded-lg shadow-2xl transition-opacity duration-300\"\n              [class.opacity-0]=\"isLoading()\"\n              [class.opacity-100]=\"!isLoading()\"\n              (loadeddata)=\"onVideoLoad()\"\n              (error)=\"onMediaError()\">\n              {{ 'i18n_z_ui_gallery_video_not_supported' | translate }}\n            </video>\n          }\n        </div>\n      } @else if (isWordFile()) {\n        <div class=\"relative h-[75vh] w-[85vw]\">\n          @if (isLoading() || isConverting()) {\n            <z-skeleton class=\"absolute inset-0 rounded-lg\" />\n            <div class=\"text-muted-foreground absolute inset-0 flex items-center justify-center text-sm font-medium\">\n              {{ 'i18n_z_ui_gallery_loading_preview' | translate }}\n            </div>\n          }\n          @if (conversionError()) {\n            <div class=\"bg-card flex size-full flex-col items-center justify-center rounded-lg p-12 shadow-2xl\">\n              <div class=\"bg-muted mb-4 flex size-24 items-center justify-center rounded-xl\">\n                <i z-icon [zType]=\"fileIcon()\" zSize=\"40\" class=\"text-muted-foreground\"></i>\n              </div>\n              <span class=\"text-foreground mb-2 text-lg font-medium\">{{ file().name }}</span>\n              <span class=\"text-muted-foreground rounded-md bg-red-100 px-3 py-1.5 text-xs dark:bg-red-900/30\">\n                <span class=\"text-red-700 dark:text-red-300\">{{ conversionError() }}</span>\n              </span>\n            </div>\n          } @else if (docHtmlContent()) {\n            <div\n              class=\"absolute inset-0 overflow-auto rounded-lg bg-white p-8 text-gray-950 shadow-2xl\"\n              [innerHTML]=\"docHtmlContent()\"></div>\n          }\n        </div>\n      } @else if (isExcelFile()) {\n        <div class=\"relative h-[75vh] w-[85vw]\">\n          @if (isLoading() || isConverting()) {\n            <z-skeleton class=\"absolute inset-0 rounded-lg\" />\n            <div class=\"text-muted-foreground absolute inset-0 flex items-center justify-center text-sm font-medium\">\n              {{ 'i18n_z_ui_gallery_loading_preview' | translate }}\n            </div>\n          }\n          @if (conversionError()) {\n            <div class=\"bg-card flex size-full flex-col items-center justify-center rounded-lg p-12 shadow-2xl\">\n              <div class=\"bg-muted mb-4 flex size-24 items-center justify-center rounded-xl\">\n                <i z-icon [zType]=\"fileIcon()\" zSize=\"40\" class=\"text-muted-foreground\"></i>\n              </div>\n              <span class=\"text-foreground mb-2 text-lg font-medium\">{{ file().name }}</span>\n              <span class=\"text-muted-foreground rounded-md bg-red-100 px-3 py-1.5 text-xs dark:bg-red-900/30\">\n                <span class=\"text-red-700 dark:text-red-300\">{{ conversionError() }}</span>\n              </span>\n            </div>\n          } @else if (docHtmlContent()) {\n            <div\n              class=\"absolute inset-0 overflow-auto rounded-lg bg-white p-4 text-gray-950 shadow-2xl\"\n              [innerHTML]=\"docHtmlContent()\"></div>\n          }\n        </div>\n      } @else if (isTextFile()) {\n        <div class=\"relative h-[75vh] w-[85vw]\">\n          @if (isLoading() || isConverting()) {\n            <z-skeleton class=\"absolute inset-0 rounded-lg\" />\n            <div class=\"text-muted-foreground absolute inset-0 flex items-center justify-center text-sm font-medium\">\n              {{ 'i18n_z_ui_gallery_loading_preview' | translate }}\n            </div>\n          }\n          @if (conversionError()) {\n            <div class=\"bg-card flex size-full flex-col items-center justify-center rounded-lg p-12 shadow-2xl\">\n              <div class=\"bg-muted mb-4 flex size-24 items-center justify-center rounded-xl\">\n                <i z-icon [zType]=\"fileIcon()\" zSize=\"40\" class=\"text-muted-foreground\"></i>\n              </div>\n              <span class=\"text-foreground mb-2 text-lg font-medium\">{{ file().name }}</span>\n              <span class=\"text-muted-foreground rounded-md bg-red-100 px-3 py-1.5 text-xs dark:bg-red-900/30\">\n                <span class=\"text-red-700 dark:text-red-300\">{{ conversionError() }}</span>\n              </span>\n            </div>\n          } @else if (textContent()) {\n            <div class=\"absolute inset-0 overflow-auto rounded-lg bg-gray-950 p-6 shadow-2xl\">\n              <pre class=\"font-mono text-sm leading-relaxed whitespace-pre-wrap text-gray-100\">{{ textContent() }}</pre>\n            </div>\n          }\n        </div>\n      } @else {\n        <div class=\"bg-card flex flex-col items-center justify-center rounded-lg p-12 shadow-2xl\">\n          <div class=\"bg-muted mb-4 flex size-24 items-center justify-center rounded-xl\">\n            <i z-icon [zType]=\"fileIcon()\" zSize=\"40\" class=\"text-muted-foreground\"></i>\n          </div>\n          <span class=\"text-foreground mb-2 text-lg font-medium\">{{ file().name }}</span>\n          <span class=\"text-muted-foreground mb-4 text-sm\">{{ formattedSize() }}</span>\n          <span class=\"text-muted-foreground rounded-md bg-amber-100 px-3 py-1.5 text-xs dark:bg-amber-900/30\">\n            <i\n              z-icon\n              zType=\"lucideInfo\"\n              zSize=\"14\"\n              class=\"mr-1 inline-block align-middle text-amber-600 dark:text-amber-400\"></i>\n            <span class=\"align-middle text-amber-700 dark:text-amber-300\">\n              {{ 'i18n_z_ui_gallery_preview_not_supported' | translate }}\n            </span>\n          </span>\n        </div>\n      }\n    </div>\n  </div>\n</div>\n", styles: [".z-gallery-pdf-frame,.z-gallery-pdf-frame *{border-color:#606060!important;outline-color:#606060!important}.z-gallery-pdf-frame{border-width:1px!important;border-style:solid!important;background:#606060}.z-gallery-pdf-frame ng2-pdfjs-viewer,.z-gallery-pdf-frame ng2-pdfjs-viewer iframe{display:block;width:100%;height:100%;border:0!important;outline:0!important;box-shadow:none!important;background:#606060}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { file: [{ type: i0.Input, args: [{ isSignal: true, alias: "file", required: true }] }], files: [{ type: i0.Input, args: [{ isSignal: true, alias: "files", required: false }] }], zShowRemove: [{ type: i0.Input, args: [{ isSignal: true, alias: "zShowRemove", required: false }] }], zPdfViewerConfig: [{ type: i0.Input, args: [{ isSignal: true, alias: "zPdfViewerConfig", required: false }] }], zTrustedResourceOrigins: [{ type: i0.Input, args: [{ isSignal: true, alias: "zTrustedResourceOrigins", required: false }] }], zOnClose: [{ type: i0.Output, args: ["zOnClose"] }], zOnDownload: [{ type: i0.Output, args: ["zOnDownload"] }], zOnNavigate: [{ type: i0.Output, args: ["zOnNavigate"] }], zOnRemove: [{ type: i0.Output, args: ["zOnRemove"] }], pdfViewer: [{ type: i0.ViewChild, args: ['pdfViewer', { isSignal: true }] }] } });
+
+class ZGalleryPreviewRef {
+    _overlayRef;
+    _closed = false;
+    componentInstance = null;
+    zAfterClose = new EventEmitter();
+    constructor(_overlayRef) {
+        this._overlayRef = _overlayRef;
+    }
+    close() {
+        if (this._closed) {
+            return;
+        }
+        this._closed = true;
+        this.zAfterClose.emit();
+        this.zAfterClose.complete();
+        this._overlayRef?.dispose();
+    }
+}
+
+class ZGalleryPreviewService {
+    _document = inject(DOCUMENT);
+    _injector = inject(Injector);
+    _overlay = inject(Overlay);
+    _platformId = inject(PLATFORM_ID);
+    _zIndexService = inject(ZOverlayZIndexService);
+    open(fileOrOptions, options = {}) {
+        const previewOptions = this._normalizeOptions(fileOrOptions, options);
+        const overlayRef = this._createOverlay();
+        const previewRef = new ZGalleryPreviewRef(overlayRef ?? null);
+        if (!overlayRef) {
+            return previewRef;
+        }
+        const componentRef = overlayRef.attach(new ComponentPortal(ZGalleryPreviewComponent, null, this._injector));
+        previewRef.componentInstance = componentRef.instance;
+        componentRef.setInput('file', previewOptions.file);
+        componentRef.setInput('files', previewOptions.files);
+        componentRef.setInput('zShowRemove', previewOptions.zShowRemove ?? false);
+        componentRef.setInput('zPdfViewerConfig', previewOptions.zPdfViewerConfig ?? {});
+        componentRef.setInput('zTrustedResourceOrigins', previewOptions.zTrustedResourceOrigins ?? []);
+        componentRef.instance.zOnClose.subscribe(() => {
+            previewOptions.zOnClose?.();
+            previewRef.close();
+        });
+        componentRef.instance.zOnDownload.subscribe(file => this._handleDownload(file, previewOptions));
+        componentRef.instance.zOnNavigate.subscribe(file => {
+            componentRef.setInput('file', file);
+            previewOptions.zOnNavigate?.(file);
+        });
+        componentRef.instance.zOnRemove.subscribe(file => previewOptions.zOnRemove?.(file));
+        return previewRef;
+    }
+    _createOverlay() {
+        if (!isPlatformBrowser(this._platformId)) {
+            return undefined;
+        }
+        const overlayRef = this._overlay.create(new OverlayConfig({
+            hasBackdrop: false,
+            panelClass: 'z-gallery-preview-overlay-pane',
+            positionStrategy: this._overlay.position().global(),
+            scrollStrategy: this._overlay.scrollStrategies.block(),
+        }));
+        this._zIndexService.applyToOverlay(overlayRef);
+        this._zIndexService.deferMoveToTop(overlayRef);
+        return overlayRef;
+    }
+    _normalizeOptions(fileOrOptions, options) {
+        const previewOptions = 'file' in fileOrOptions ? fileOrOptions : { ...options, file: fileOrOptions };
+        const files = previewOptions.files?.length ? previewOptions.files : [previewOptions.file];
+        const hasCurrentFile = files.some(file => file.id === previewOptions.file.id);
+        return {
+            ...previewOptions,
+            files: hasCurrentFile ? files : [previewOptions.file, ...files],
+        };
+    }
+    _handleDownload(file, options) {
+        options.zOnDownload?.(file);
+        if (options.zDownload === false) {
+            return;
+        }
+        const downloadLink = file.downloadUrl || file.url;
+        if (!downloadLink || !isPlatformBrowser(this._platformId)) {
+            return;
+        }
+        const link = this._document.createElement('a');
+        link.href = downloadLink;
+        link.download = file.name;
+        link.target = '_blank';
+        this._document.body.appendChild(link);
+        link.click();
+        this._document.body.removeChild(link);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.9", ngImport: i0, type: ZGalleryPreviewService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.0.9", ngImport: i0, type: ZGalleryPreviewService, providedIn: 'root' });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.9", ngImport: i0, type: ZGalleryPreviewService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root',
+                }]
+        }] });
+
+const zGalleryVariants = cva('z-gallery', {
+    variants: {
+        zSize: {
+            sm: 'z-gallery--sm',
+            default: 'z-gallery--default',
+            lg: 'z-gallery--lg',
+        },
+    },
+    defaultVariants: {
+        zSize: 'default',
+    },
+});
+// Grid item variants
+const zGalleryItemVariants = cva('group relative overflow-hidden rounded-lg border border-border bg-card transition-all duration-200 cursor-pointer', {
+    variants: {
+        zMode: {
+            grid: 'flex flex-col hover:scale-[1.02] hover:shadow-md hover:border-primary/50',
+            list: 'flex flex-row items-center gap-3 p-3 hover:bg-accent hover:border-primary/50',
+        },
+        zSize: {
+            sm: '',
+            default: '',
+            lg: '',
+        },
+    },
+    compoundVariants: [
+        // Grid sizes
+        { zMode: 'grid', zSize: 'sm', class: '' },
+        { zMode: 'grid', zSize: 'default', class: '' },
+        { zMode: 'grid', zSize: 'lg', class: '' },
+        // List sizes
+        { zMode: 'list', zSize: 'sm', class: 'p-2' },
+        { zMode: 'list', zSize: 'default', class: 'p-3' },
+        { zMode: 'list', zSize: 'lg', class: 'p-4' },
+    ],
+    defaultVariants: {
+        zMode: 'grid',
+        zSize: 'default',
+    },
+});
+// File icon badge variants
+const zGalleryFileIconVariants = cva('flex items-center justify-center rounded-md font-bold uppercase select-none', {
+    variants: {
+        zSize: {
+            sm: 'w-full h-16 text-xs',
+            default: 'w-full h-24 text-sm',
+            lg: 'w-full h-32 text-base',
+        },
+        zMode: {
+            grid: '',
+            list: '',
+        },
+    },
+    compoundVariants: [
+        { zMode: 'list', zSize: 'sm', class: 'size-8 text-[0.625rem]' },
+        { zMode: 'list', zSize: 'default', class: 'size-10 text-xs' },
+        { zMode: 'list', zSize: 'lg', class: 'size-12 text-sm' },
+    ],
+    defaultVariants: {
+        zSize: 'default',
+        zMode: 'grid',
+    },
+});
+
+class ZGalleryComponent {
+    _destroyRef = inject(DestroyRef);
+    _previewService = inject(ZGalleryPreviewService);
+    _previewRef = null;
+    zFiles = input([], ...(ngDevMode ? [{ debugName: "zFiles" }] : []));
+    zMode = model('grid', ...(ngDevMode ? [{ debugName: "zMode" }] : []));
+    zSize = input('default', ...(ngDevMode ? [{ debugName: "zSize" }] : []));
+    zColumns = input(4, ...(ngDevMode ? [{ debugName: "zColumns" }] : []));
+    zItemWidth = input(null, ...(ngDevMode ? [{ debugName: "zItemWidth" }] : []));
+    zLoading = input(false, ...(ngDevMode ? [{ debugName: "zLoading" }] : []));
+    zSkeletonRows = input(2, ...(ngDevMode ? [{ debugName: "zSkeletonRows" }] : []));
+    zSkeletonItems = input(null, ...(ngDevMode ? [{ debugName: "zSkeletonItems" }] : []));
+    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" }] : []));
+    zServerSearch = input(false, ...(ngDevMode ? [{ debugName: "zServerSearch" }] : []));
+    zSearchDebounce = input(300, ...(ngDevMode ? [{ debugName: "zSearchDebounce" }] : []));
+    zSearchPlaceholder = input('Search files...', ...(ngDevMode ? [{ debugName: "zSearchPlaceholder" }] : []));
+    zToggleSize = input('default', ...(ngDevMode ? [{ debugName: "zToggleSize" }] : []));
+    zTitle = input('', ...(ngDevMode ? [{ debugName: "zTitle" }] : []));
+    zEmptyText = input('No files', ...(ngDevMode ? [{ debugName: "zEmptyText" }] : []));
+    zEmptyIcon = input('lucideImage', ...(ngDevMode ? [{ debugName: "zEmptyIcon" }] : []));
+    zClass = input('', ...(ngDevMode ? [{ debugName: "zClass" }] : []));
+    zSelectable = input(false, ...(ngDevMode ? [{ debugName: "zSelectable" }] : []));
+    zSelectedFiles = model([], ...(ngDevMode ? [{ debugName: "zSelectedFiles" }] : []));
+    zOnDownload = output();
+    zOnPreview = output();
+    zOnRemove = output();
+    zModeChange = output();
+    zSearchChange = output();
+    zControl = output();
+    zSelectionChange = output();
+    zOnAction = output();
+    modeIndex = signal(0, ...(ngDevMode ? [{ debugName: "modeIndex" }] : []));
+    searchInputQuery = signal('', ...(ngDevMode ? [{ debugName: "searchInputQuery" }] : []));
+    searchQuery = signal('', ...(ngDevMode ? [{ debugName: "searchQuery" }] : []));
+    skeletonItems = computed(() => {
+        const itemCount = this.zSkeletonItems();
+        if (itemCount !== null) {
+            return Array.from({ length: Math.max(1, itemCount) }, (_, index) => index);
+        }
+        const columns = this.currentMode() === 'list' ? 1 : Math.max(1, this.zColumns());
+        const rows = Math.max(1, this.zSkeletonRows());
+        return Array.from({ length: columns * rows }, (_, index) => index);
+    }, ...(ngDevMode ? [{ debugName: "skeletonItems" }] : []));
+    currentMode = computed(() => {
+        const index = this.modeIndex();
+        return index === 1 ? 'list' : 'grid';
+    }, ...(ngDevMode ? [{ debugName: "currentMode" }] : []));
+    gridColumnsClass = computed(() => {
+        if (this.zItemWidth()) {
+            return 'justify-start';
+        }
+        const cols = this.zColumns();
+        switch (cols) {
+            case 1:
+                return 'grid-cols-1';
+            case 2:
+                return 'grid-cols-1 sm:grid-cols-2';
+            case 3:
+                return 'grid-cols-1 sm:grid-cols-2 lg:grid-cols-3';
+            case 4:
+                return 'grid-cols-2 sm:grid-cols-3 lg:grid-cols-4';
+            case 5:
+                return 'grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5';
+            case 6:
+                return 'grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-6';
+            default:
+                return `grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-${cols}`;
+        }
+    }, ...(ngDevMode ? [{ debugName: "gridColumnsClass" }] : []));
+    gridTemplateColumns = computed(() => {
+        const itemWidth = this.zItemWidth();
+        return itemWidth ? `repeat(auto-fill, minmax(${itemWidth}, ${itemWidth}))` : null;
+    }, ...(ngDevMode ? [{ debugName: "gridTemplateColumns" }] : []));
+    containerClasses = computed(() => zMergeClasses(zGalleryVariants({ zSize: this.zSize() }), this.zClass()), ...(ngDevMode ? [{ debugName: "containerClasses" }] : []));
+    showHeader = computed(() => this.zTitle() || this.zShowSearch() || (this.zShowModeToggle() && (this.zFiles().length > 0 || this.zLoading())), ...(ngDevMode ? [{ debugName: "showHeader" }] : []));
+    headerControlHeight = computed(() => {
+        switch (this.zToggleSize()) {
+            case 'xs':
+                return '1.75rem';
+            case 'sm':
+                return '2rem';
+            case 'lg':
+                return '2.5rem';
+            default:
+                return '2.25rem';
+        }
+    }, ...(ngDevMode ? [{ debugName: "headerControlHeight" }] : []));
+    skeletonMediaHeight = computed(() => {
+        switch (this.zSize()) {
+            case 'sm':
+                return '9rem';
+            case 'lg':
+                return '14rem';
+            default:
+                return '11rem';
+        }
+    }, ...(ngDevMode ? [{ debugName: "skeletonMediaHeight" }] : []));
+    toggleIconSize = computed(() => {
+        const size = this.zToggleSize();
+        switch (size) {
+            case 'xs':
+                return '14';
+            case 'sm':
+                return '16';
+            case 'lg':
+                return '20';
+            default:
+                return '18';
+        }
+    }, ...(ngDevMode ? [{ debugName: "toggleIconSize" }] : []));
+    searchInputSize = computed(() => {
+        const size = this.zToggleSize();
+        if (size === 'xs') {
+            return 'sm';
+        }
+        return size;
+    }, ...(ngDevMode ? [{ debugName: "searchInputSize" }] : []));
+    filteredFiles = computed(() => {
+        const files = this.zFiles();
+        const query = this.searchQuery().toLowerCase().trim();
+        if (!query || this.zServerSearch()) {
+            return files;
+        }
+        return files.filter(file => file.name.toLowerCase().includes(query));
+    }, ...(ngDevMode ? [{ debugName: "filteredFiles" }] : []));
+    selectedIds = computed(() => new Set(this.zSelectedFiles().map(f => f.id)), ...(ngDevMode ? [{ debugName: "selectedIds" }] : []));
+    isAllSelected = computed(() => {
+        const files = this.filteredFiles();
+        const selectedIds = this.selectedIds();
+        return files.length > 0 && files.every(f => selectedIds.has(f.id));
+    }, ...(ngDevMode ? [{ debugName: "isAllSelected" }] : []));
+    isIndeterminate = computed(() => {
+        const files = this.filteredFiles();
+        const selectedIds = this.selectedIds();
+        const selectedCount = files.filter(f => selectedIds.has(f.id)).length;
+        return selectedCount > 0 && selectedCount < files.length;
+    }, ...(ngDevMode ? [{ debugName: "isIndeterminate" }] : []));
+    selectedCount = computed(() => this.zSelectedFiles().length, ...(ngDevMode ? [{ debugName: "selectedCount" }] : []));
+    ngAfterViewInit() {
+        this._destroyRef.onDestroy(() => this.closePreview());
+        this.zControl.emit({
+            setMode: mode => {
+                this.modeIndex.set(mode === 'list' ? 1 : 0);
+                this.zMode.set(mode);
+                this.zModeChange.emit(mode);
+            },
+            getMode: () => this.currentMode(),
+            getFiles: () => this.zFiles(),
+            openPreview: file => this._openPreview(file),
+            closePreview: () => this.closePreview(),
+            selectAll: () => this.selectAll(),
+            deselectAll: () => this.deselectAll(),
+            toggleSelection: file => this.toggleSelection(file),
+            getSelectedFiles: () => this.zSelectedFiles(),
+            isSelected: file => this.isFileSelected(file),
+        });
+    }
+    onSearchChange(query) {
+        const normalizedQuery = String(query ?? '');
+        this.searchQuery.set(normalizedQuery);
+        this.zSearchChange.emit(normalizedQuery);
+    }
+    onDownload(file) {
+        this.zOnDownload.emit(file);
+        const downloadLink = file.downloadUrl || file.url;
+        if (downloadLink) {
+            const link = document.createElement('a');
+            link.href = downloadLink;
+            link.download = file.name;
+            link.target = '_blank';
+            document.body.appendChild(link);
+            link.click();
+            document.body.removeChild(link);
+        }
+    }
+    onPreview(file) {
+        this._openPreview(file, true);
+    }
+    onRemove(file) {
+        this.zOnRemove.emit(file);
+    }
+    closePreview() {
+        this._previewRef?.close();
+        this._previewRef = null;
+    }
+    onRemoveFromPreview(file) {
+        this.zOnRemove.emit(file);
+        const allFiles = this.filteredFiles();
+        const currentIndex = allFiles.findIndex(f => f.id === file.id);
+        if (allFiles.length <= 1) {
+            this.closePreview();
+            return;
+        }
+        const nextFile = currentIndex < allFiles.length - 1 ? allFiles[currentIndex + 1] : allFiles[currentIndex - 1];
+        this._openPreview(nextFile);
+    }
+    _openPreview(file, emitPreview = false) {
+        this.closePreview();
+        if (emitPreview) {
+            this.zOnPreview.emit(file);
+        }
+        const previewRef = this._previewService.open({
+            file,
+            files: this.filteredFiles(),
+            zShowRemove: this.zShowRemove(),
+            zPdfViewerConfig: this.zPdfViewerConfig(),
+            zTrustedResourceOrigins: this.zTrustedResourceOrigins(),
+            zDownload: false,
+            zOnClose: () => {
+                this._previewRef = null;
+            },
+            zOnDownload: previewFile => this.onDownload(previewFile),
+            zOnRemove: previewFile => this.onRemoveFromPreview(previewFile),
+        });
+        this._previewRef = previewRef;
+    }
+    isFileSelected(file) {
+        return this.selectedIds().has(file.id);
+    }
+    toggleSelection(file) {
+        const currentSelected = this.zSelectedFiles();
+        const isSelected = this.isFileSelected(file);
+        const newSelected = isSelected ? currentSelected.filter(f => f.id !== file.id) : [...currentSelected, file];
+        this.zOnAction.emit({ type: isSelected ? 'deselect' : 'select', file });
+        this.zSelectedFiles.set(newSelected);
+        this.zSelectionChange.emit({
+            selectedFiles: newSelected,
+            addedFiles: isSelected ? undefined : [file],
+            removedFiles: isSelected ? [file] : undefined,
+        });
+    }
+    selectAll() {
+        const files = this.filteredFiles();
+        this.zSelectedFiles.set([...files]);
+        this.zOnAction.emit({ type: 'select-all', files });
+        this.zSelectionChange.emit({
+            selectedFiles: files,
+            addedFiles: files,
+        });
+    }
+    deselectAll() {
+        const previousSelected = this.zSelectedFiles();
+        this.zSelectedFiles.set([]);
+        this.zOnAction.emit({ type: 'deselect-all', files: previousSelected });
+        this.zSelectionChange.emit({
+            selectedFiles: [],
+            removedFiles: previousSelected,
+        });
+    }
+    toggleSelectAll() {
+        if (this.isAllSelected()) {
+            this.deselectAll();
+            return;
+        }
+        this.selectAll();
+    }
+    onBulkDelete() {
+        const selectedFiles = this.zSelectedFiles();
+        this.zOnAction.emit({ type: 'delete', files: selectedFiles });
+    }
+    onBulkDownload() {
+        const selectedFiles = this.zSelectedFiles();
+        this.zOnAction.emit({ type: 'download', files: selectedFiles });
+        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 }, 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">
+          <div class="flex items-center gap-3">
+            @if (zTitle()) {
+              @if (zLoading()) {
+                <z-skeleton zWidth="7rem" zHeight="1.25rem" />
+              } @else {
+                <h3 class="text-sm font-medium">{{ zTitle() }}</h3>
+              }
+            }
+
+            @if (zShowSearch()) {
+              @if (zLoading()) {
+                <z-skeleton zWidth="16rem" [zHeight]="headerControlHeight()" zRadius="0.375rem" />
+              } @else {
+                <z-input
+                  zSearch
+                  [zSize]="searchInputSize()"
+                  [zPlaceholder]="zSearchPlaceholder() || ('i18n_z_ui_gallery_search_placeholder' | translate)"
+                  [zDebounce]="zSearchDebounce()"
+                  [ngModel]="searchInputQuery()"
+                  (ngModelChange)="searchInputQuery.set($event)"
+                  (zOnSearch)="onSearchChange($event)"
+                  class="w-64"
+                />
+              }
+            }
+          </div>
+
+          @if (zShowModeToggle() && (zFiles().length > 0 || zLoading())) {
+            @if (zLoading()) {
+              <z-skeleton zWidth="5rem" [zHeight]="headerControlHeight()" zRadius="0.375rem" />
+            } @else {
+              <z-button-group [(zActive)]="modeIndex">
+                <button z-button zType="outline" [zSize]="zToggleSize()" z-button-group-item>
+                  <i z-icon zType="lucideLayoutGrid" [zSize]="toggleIconSize()"></i>
+                </button>
+                <button z-button zType="outline" [zSize]="zToggleSize()" z-button-group-item>
+                  <i z-icon zType="lucideList" [zSize]="toggleIconSize()"></i>
+                </button>
+              </z-button-group>
+            }
+          }
+        </div>
+      }
+
+      @if (zLoading()) {
+        @if (currentMode() === 'grid') {
+          <div class="grid gap-4" [class]="gridColumnsClass()" [style.gridTemplateColumns]="gridTemplateColumns()">
+            @for (item of skeletonItems(); track item) {
+              <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="1.25rem" />
+                </div>
+              </div>
+            }
+          </div>
+        } @else {
+          <div class="flex flex-col gap-2">
+            @for (item of skeletonItems(); track item) {
+              <div class="border-border bg-card flex items-center gap-3 rounded-sm border px-3 py-2.5 shadow-sm">
+                <z-skeleton class="shrink-0" zWidth="2.75rem" zHeight="2.75rem" zRadius="0.125rem" />
+                <div class="min-w-0 flex-1 space-y-2">
+                  <z-skeleton zWidth="40%" zHeight="0.875rem" />
+                  <z-skeleton zWidth="25%" zHeight="0.75rem" />
+                </div>
+                <z-skeleton class="shrink-0" zWidth="3.5rem" zHeight="1.5rem" zRadius="0.125rem" />
+              </div>
+            }
+          </div>
+        }
+      } @else if (zSelectable() && filteredFiles().length > 0) {
+        <div
+          class="bg-muted/30 shadow-card dark:!border-border mb-4 flex h-11 items-center justify-between gap-3 rounded-[0.375rem] border border-transparent px-3"
+        >
+          <div class="flex items-center gap-3">
+            <z-checkbox
+              [zChecked]="isAllSelected()"
+              [zIndeterminate]="isIndeterminate()"
+              (zChange)="toggleSelectAll()"
+              zSize="sm"
+            />
+            <span class="text-muted-foreground text-sm">
+              @if (selectedCount() > 0) {
+                {{ selectedCount() }} {{ 'i18n_z_ui_gallery_selected' | translate }}
+              } @else {
+                {{ 'i18n_z_ui_gallery_select_all' | translate }}
+              }
+            </span>
+          </div>
+
+          @if (selectedCount() > 0) {
+            <div class="flex items-center gap-1">
+              @if (zShowDownload()) {
+                <button
+                  z-button
+                  zType="ghost"
+                  zSize="xs"
+                  (click)="onBulkDownload()"
+                  class="text-muted-foreground hover:text-foreground"
+                >
+                  <i z-icon zType="lucideDownload" zSize="14"></i>
+                  <span class="ml-1">{{ 'i18n_z_ui_gallery_download' | translate }}</span>
+                </button>
+              }
+              @if (zShowRemove()) {
+                <button
+                  z-button
+                  zType="ghost"
+                  zSize="xs"
+                  (click)="onBulkDelete()"
+                  class="text-destructive hover:text-destructive"
+                >
+                  <i z-icon zType="lucideTrash2" zSize="14"></i>
+                  <span class="ml-1">{{ 'i18n_z_ui_gallery_delete' | translate }}</span>
+                </button>
+              }
+              <button z-button zType="ghost" zSize="xs" (click)="deselectAll()">
+                <i z-icon zType="lucideX" zSize="14"></i>
+              </button>
+            </div>
+          }
+        </div>
+      }
+
+      @if (!zLoading() && filteredFiles().length > 0) {
+        @if (currentMode() === 'grid') {
+          <div class="grid gap-4" [class]="gridColumnsClass()" [style.gridTemplateColumns]="gridTemplateColumns()">
+            @for (file of filteredFiles(); track file.id) {
+              <z-gallery-item
+                [file]="file"
+                zMode="grid"
+                [zSize]="zSize()"
+                [zShowDownload]="zShowDownload()"
+                [zShowPreview]="zShowPreview()"
+                [zShowRemove]="zShowRemove()"
+                [zSelectable]="zSelectable()"
+                [zSelected]="isFileSelected(file)"
+                (zOnDownload)="onDownload($event)"
+                (zOnPreview)="onPreview($event)"
+                (zOnRemove)="onRemove($event)"
+                (zOnSelect)="toggleSelection($event)"
+              />
+            }
+          </div>
+        } @else {
+          <div class="flex flex-col gap-2">
+            @for (file of filteredFiles(); track file.id) {
+              <z-gallery-item
+                [file]="file"
+                zMode="list"
+                [zSize]="zSize()"
+                [zShowDownload]="zShowDownload()"
+                [zShowPreview]="zShowPreview()"
+                [zShowRemove]="zShowRemove()"
+                [zSelectable]="zSelectable()"
+                [zSelected]="isFileSelected(file)"
+                (zOnDownload)="onDownload($event)"
+                (zOnPreview)="onPreview($event)"
+                (zOnRemove)="onRemove($event)"
+                (zOnSelect)="toggleSelection($event)"
+              />
+            }
+          </div>
+        }
+      } @else if (!zLoading() && zFiles().length > 0 && searchQuery()) {
+        <z-empty zIcon="lucideSearchX" [zMessage]="'i18n_z_ui_gallery_no_search_results' | translate" zSize="sm" />
+      } @else if (!zLoading()) {
+        <z-empty
+          [zIcon]="zEmptyIcon()"
+          [zMessage]="zEmptyText() || ('i18n_z_ui_gallery_no_files' | translate)"
+          zSize="sm"
+        />
+      }
+    </div>
+  `, isInline: true, dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: ZGalleryItemComponent, selector: "z-gallery-item", inputs: ["file", "zMode", "zSize", "zShowDownload", "zShowPreview", "zShowRemove", "zSelectable", "zSelected"], outputs: ["zOnDownload", "zOnPreview", "zOnRemove", "zOnSelect"] }, { kind: "component", type: ZButtonGroupComponent, selector: "z-button-group", inputs: ["zClass", "zOrientation", "zActive"], outputs: ["zActiveChange", "zActiveIndexChange", "zActiveValueChange"], exportAs: ["zButtonGroup"] }, { kind: "directive", type: ZButtonGroupItemDirective, selector: "[z-button-group-item]", inputs: ["zValue"], 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", "zLoading", "zLoadingOutline", "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,
+            args: [{
+                    selector: 'z-gallery',
+                    imports: [
+                        FormsModule,
+                        TranslatePipe,
+                        ZGalleryItemComponent,
+                        ZButtonGroupComponent,
+                        ZButtonGroupItemDirective,
+                        ZButtonComponent,
+                        ZCheckboxComponent,
+                        ZIconComponent,
+                        ZEmptyComponent,
+                        ZInputComponent,
+                        ZSkeletonComponent,
+                    ],
+                    standalone: true,
+                    template: `
+    <div [class]="containerClasses()">
+      @if (showHeader()) {
+        <div class="mb-4 flex flex-wrap items-center justify-between gap-3">
+          <div class="flex items-center gap-3">
+            @if (zTitle()) {
+              @if (zLoading()) {
+                <z-skeleton zWidth="7rem" zHeight="1.25rem" />
+              } @else {
+                <h3 class="text-sm font-medium">{{ zTitle() }}</h3>
+              }
+            }
+
+            @if (zShowSearch()) {
+              @if (zLoading()) {
+                <z-skeleton zWidth="16rem" [zHeight]="headerControlHeight()" zRadius="0.375rem" />
+              } @else {
+                <z-input
+                  zSearch
+                  [zSize]="searchInputSize()"
+                  [zPlaceholder]="zSearchPlaceholder() || ('i18n_z_ui_gallery_search_placeholder' | translate)"
+                  [zDebounce]="zSearchDebounce()"
+                  [ngModel]="searchInputQuery()"
+                  (ngModelChange)="searchInputQuery.set($event)"
+                  (zOnSearch)="onSearchChange($event)"
+                  class="w-64"
+                />
+              }
+            }
+          </div>
+
+          @if (zShowModeToggle() && (zFiles().length > 0 || zLoading())) {
+            @if (zLoading()) {
+              <z-skeleton zWidth="5rem" [zHeight]="headerControlHeight()" zRadius="0.375rem" />
+            } @else {
+              <z-button-group [(zActive)]="modeIndex">
+                <button z-button zType="outline" [zSize]="zToggleSize()" z-button-group-item>
+                  <i z-icon zType="lucideLayoutGrid" [zSize]="toggleIconSize()"></i>
+                </button>
+                <button z-button zType="outline" [zSize]="zToggleSize()" z-button-group-item>
+                  <i z-icon zType="lucideList" [zSize]="toggleIconSize()"></i>
+                </button>
+              </z-button-group>
+            }
+          }
+        </div>
+      }
+
+      @if (zLoading()) {
+        @if (currentMode() === 'grid') {
+          <div class="grid gap-4" [class]="gridColumnsClass()" [style.gridTemplateColumns]="gridTemplateColumns()">
+            @for (item of skeletonItems(); track item) {
+              <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="1.25rem" />
+                </div>
+              </div>
+            }
+          </div>
+        } @else {
+          <div class="flex flex-col gap-2">
+            @for (item of skeletonItems(); track item) {
+              <div class="border-border bg-card flex items-center gap-3 rounded-sm border px-3 py-2.5 shadow-sm">
+                <z-skeleton class="shrink-0" zWidth="2.75rem" zHeight="2.75rem" zRadius="0.125rem" />
+                <div class="min-w-0 flex-1 space-y-2">
+                  <z-skeleton zWidth="40%" zHeight="0.875rem" />
+                  <z-skeleton zWidth="25%" zHeight="0.75rem" />
+                </div>
+                <z-skeleton class="shrink-0" zWidth="3.5rem" zHeight="1.5rem" zRadius="0.125rem" />
+              </div>
+            }
+          </div>
+        }
+      } @else if (zSelectable() && filteredFiles().length > 0) {
+        <div
+          class="bg-muted/30 shadow-card dark:!border-border mb-4 flex h-11 items-center justify-between gap-3 rounded-[0.375rem] border border-transparent px-3"
+        >
+          <div class="flex items-center gap-3">
+            <z-checkbox
+              [zChecked]="isAllSelected()"
+              [zIndeterminate]="isIndeterminate()"
+              (zChange)="toggleSelectAll()"
+              zSize="sm"
+            />
+            <span class="text-muted-foreground text-sm">
+              @if (selectedCount() > 0) {
+                {{ selectedCount() }} {{ 'i18n_z_ui_gallery_selected' | translate }}
+              } @else {
+                {{ 'i18n_z_ui_gallery_select_all' | translate }}
+              }
+            </span>
+          </div>
+
+          @if (selectedCount() > 0) {
+            <div class="flex items-center gap-1">
+              @if (zShowDownload()) {
+                <button
+                  z-button
+                  zType="ghost"
+                  zSize="xs"
+                  (click)="onBulkDownload()"
+                  class="text-muted-foreground hover:text-foreground"
+                >
+                  <i z-icon zType="lucideDownload" zSize="14"></i>
+                  <span class="ml-1">{{ 'i18n_z_ui_gallery_download' | translate }}</span>
+                </button>
+              }
+              @if (zShowRemove()) {
+                <button
+                  z-button
+                  zType="ghost"
+                  zSize="xs"
+                  (click)="onBulkDelete()"
+                  class="text-destructive hover:text-destructive"
+                >
+                  <i z-icon zType="lucideTrash2" zSize="14"></i>
+                  <span class="ml-1">{{ 'i18n_z_ui_gallery_delete' | translate }}</span>
+                </button>
+              }
+              <button z-button zType="ghost" zSize="xs" (click)="deselectAll()">
+                <i z-icon zType="lucideX" zSize="14"></i>
+              </button>
+            </div>
+          }
+        </div>
+      }
+
+      @if (!zLoading() && filteredFiles().length > 0) {
+        @if (currentMode() === 'grid') {
+          <div class="grid gap-4" [class]="gridColumnsClass()" [style.gridTemplateColumns]="gridTemplateColumns()">
+            @for (file of filteredFiles(); track file.id) {
+              <z-gallery-item
+                [file]="file"
+                zMode="grid"
+                [zSize]="zSize()"
+                [zShowDownload]="zShowDownload()"
+                [zShowPreview]="zShowPreview()"
+                [zShowRemove]="zShowRemove()"
+                [zSelectable]="zSelectable()"
+                [zSelected]="isFileSelected(file)"
+                (zOnDownload)="onDownload($event)"
+                (zOnPreview)="onPreview($event)"
+                (zOnRemove)="onRemove($event)"
+                (zOnSelect)="toggleSelection($event)"
+              />
+            }
+          </div>
+        } @else {
+          <div class="flex flex-col gap-2">
+            @for (file of filteredFiles(); track file.id) {
+              <z-gallery-item
+                [file]="file"
+                zMode="list"
+                [zSize]="zSize()"
+                [zShowDownload]="zShowDownload()"
+                [zShowPreview]="zShowPreview()"
+                [zShowRemove]="zShowRemove()"
+                [zSelectable]="zSelectable()"
+                [zSelected]="isFileSelected(file)"
+                (zOnDownload)="onDownload($event)"
+                (zOnPreview)="onPreview($event)"
+                (zOnRemove)="onRemove($event)"
+                (zOnSelect)="toggleSelection($event)"
+              />
+            }
+          </div>
+        }
+      } @else if (!zLoading() && zFiles().length > 0 && searchQuery()) {
+        <z-empty zIcon="lucideSearchX" [zMessage]="'i18n_z_ui_gallery_no_search_results' | translate" zSize="sm" />
+      } @else if (!zLoading()) {
+        <z-empty
+          [zIcon]="zEmptyIcon()"
+          [zMessage]="zEmptyText() || ('i18n_z_ui_gallery_no_files' | translate)"
+          zSize="sm"
+        />
+      }
+    </div>
+  `,
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    encapsulation: ViewEncapsulation.None,
+                    host: {
+                        class: 'z-gallery block',
+                    },
+                    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 }] }], 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" }] : []));
+    zSize = input('default', ...(ngDevMode ? [{ debugName: "zSize" }] : []));
+    zMode = input('grid', ...(ngDevMode ? [{ debugName: "zMode" }] : []));
+    imageError = signal(false, ...(ngDevMode ? [{ debugName: "imageError" }] : []));
+    isLoading = signal(true, ...(ngDevMode ? [{ debugName: "isLoading" }] : []));
+    category = computed(() => getFileCategory(this.file()), ...(ngDevMode ? [{ debugName: "category" }] : []));
+    style = computed(() => FILE_CATEGORY_STYLES[this.category()], ...(ngDevMode ? [{ debugName: "style" }] : []));
+    showThumbnail = computed(() => {
+        const file = this.file();
+        const cat = this.category();
+        return cat === 'image' && (file.thumbnailUrl || file.url) && !this.imageError();
+    }, ...(ngDevMode ? [{ debugName: "showThumbnail" }] : []));
+    containerClasses = computed(() => {
+        const style = this.style();
+        const showThumb = this.showThumbnail();
+        return zMergeClasses(zGalleryFileIconVariants({
+            zSize: this.zSize(),
+            zMode: this.zMode(),
+        }), showThumb ? 'bg-muted relative' : [style.bg, style.text]);
+    }, ...(ngDevMode ? [{ debugName: "containerClasses" }] : []));
+    onImageLoad() {
+        this.isLoading.set(false);
+    }
+    onImageError(event) {
+        this.imageError.set(true);
+        this.isLoading.set(false);
+        const img = event.target;
+        img.style.display = 'none';
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.9", ngImport: i0, type: ZGalleryFileIconComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.9", type: ZGalleryFileIconComponent, isStandalone: true, selector: "z-gallery-file-icon", inputs: { file: { classPropertyName: "file", publicName: "file", isSignal: true, isRequired: true, transformFunction: null }, zSize: { classPropertyName: "zSize", publicName: "zSize", isSignal: true, isRequired: false, transformFunction: null }, zMode: { classPropertyName: "zMode", publicName: "zMode", isSignal: true, isRequired: false, transformFunction: null } }, host: { classAttribute: "z-gallery-file-icon block" }, ngImport: i0, template: `
+    <div [class]="containerClasses()" class="group/icon overflow-hidden">
+      @if (showThumbnail()) {
+        @if (isLoading()) {
+          <z-skeleton class="absolute inset-0 size-full" />
+        }
+        <img
+          [src]="file().thumbnailUrl || file().url"
+          [alt]="file().name"
+          class="size-full object-cover transition-transform duration-300 group-hover/icon:scale-105"
+          loading="lazy"
+          [class.opacity-0]="isLoading()"
+          [class.opacity-100]="!isLoading()"
+          (load)="onImageLoad()"
+          (error)="onImageError($event)"
+        />
+      } @else {
+        <div class="flex flex-col items-center justify-center gap-1">
+          <span class="font-bold tracking-wide">{{ style().label }}</span>
+        </div>
+      }
+    </div>
+  `, isInline: true, dependencies: [{ kind: "component", type: ZSkeletonComponent, selector: "z-skeleton", inputs: ["class", "zType", "zSize", "zWidth", "zHeight", "zRows", "zGap", "zAnimated", "zRadius"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.9", ngImport: i0, type: ZGalleryFileIconComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'z-gallery-file-icon',
+                    imports: [ZSkeletonComponent],
+                    standalone: true,
+                    template: `
+    <div [class]="containerClasses()" class="group/icon overflow-hidden">
+      @if (showThumbnail()) {
+        @if (isLoading()) {
+          <z-skeleton class="absolute inset-0 size-full" />
+        }
+        <img
+          [src]="file().thumbnailUrl || file().url"
+          [alt]="file().name"
+          class="size-full object-cover transition-transform duration-300 group-hover/icon:scale-105"
+          loading="lazy"
+          [class.opacity-0]="isLoading()"
+          [class.opacity-100]="!isLoading()"
+          (load)="onImageLoad()"
+          (error)="onImageError($event)"
+        />
+      } @else {
+        <div class="flex flex-col items-center justify-center gap-1">
+          <span class="font-bold tracking-wide">{{ style().label }}</span>
+        </div>
+      }
+    </div>
+  `,
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    encapsulation: ViewEncapsulation.None,
+                    host: {
+                        class: 'z-gallery-file-icon block',
+                    },
+                }]
+        }], propDecorators: { file: [{ type: i0.Input, args: [{ isSignal: true, alias: "file", required: true }] }], zSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "zSize", required: false }] }], zMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "zMode", required: false }] }] } });
+
+class 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, ZGalleryPreviewItemDirective, ZGalleryPreviewRef, ZGalleryPreviewService, formatFileSize, getFileCategory, isImage, isPreviewable, zGalleryFileIconVariants, zGalleryItemVariants, zGalleryVariants };
+//# sourceMappingURL=shival99-z-ui-components-z-gallery.mjs.map