@shival99/z-ui 1.6.10 → 1.7.0

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

@@ -0,0 +1,1573 @@
+import * as i0 from '@angular/core';
+import { input, output, signal, computed, ViewEncapsulation, ChangeDetectionStrategy, Component, effect, model } from '@angular/core';
+import * as i1 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 { 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 { zMergeClasses } from '@shival99/z-ui/utils';
+import { ZSkeletonComponent } from '@shival99/z-ui/components/z-skeleton';
+import { ZTooltipDirective } from '@shival99/z-ui/components/z-tooltip';
+import { ZSafeResourceUrlPipe } from '@shival99/z-ui/pipes';
+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('word') || type.includes('document') || WORD_EXTENSIONS.includes(ext)) {
+        return 'word';
+    }
+    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.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';
+};
+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" }] : []));
+    zOnDownload = output();
+    zOnPreview = output();
+    zOnRemove = 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" }] : []));
+    categoryStyle = computed(() => {
+        const style = FILE_CATEGORY_STYLES[this.category()];
+        return {
+            ...style,
+            icon: style.icon,
+        };
+    }, ...(ngDevMode ? [{ debugName: "categoryStyle" }] : []));
+    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());
+        }
+    }
+    onRemove(event) {
+        event.stopPropagation();
+        this.zOnRemove.emit(this.file());
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: ZGalleryItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.6", 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 } }, outputs: { zOnDownload: "zOnDownload", zOnPreview: "zOnPreview", zOnRemove: "zOnRemove" }, 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-xl border shadow-sm transition-all duration-200 hover:shadow-md"
+        (click)="onPreview()"
+      >
+        <div class="relative aspect-square overflow-hidden">
+          @if (isImage()) {
+            @if (isLoading()) {
+              <z-skeleton class="absolute inset-0" />
+            }
+            <img
+              [src]="file().thumbnailUrl || file().url"
+              [alt]="file().name"
+              class="size-full object-cover transition-all duration-300"
+              [class.opacity-0]="isLoading()"
+              [class.scale-100]="!isLoading()"
+              [class.group-hover:scale-105]="!isLoading()"
+              loading="lazy"
+              (load)="onImageLoad()"
+              (error)="onImageError()"
+            />
+          } @else {
+            <div class="flex size-full flex-col items-center justify-center gap-2" [class]="categoryStyle().bg">
+              <i z-icon [zType]="categoryStyle().icon" zSize="32" [class]="categoryStyle().text"></i>
+              <span class="text-xs font-semibold" [class]="categoryStyle().text">
+                {{ categoryStyle().label }}
+              </span>
+            </div>
+          }
+
+          <div
+            class="absolute inset-0 flex items-center justify-center gap-2 bg-black/40 opacity-0 backdrop-blur-[2px] transition-all duration-200 group-hover:opacity-100"
+          >
+            @if (zShowPreview() && canPreview()) {
+              <button
+                z-button
+                zType="secondary"
+                zSize="sm"
+                zShape="circle"
+                class="shadow-lg"
+                (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="secondary"
+                zSize="sm"
+                zShape="circle"
+                class="shadow-lg"
+                (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="secondary"
+                zSize="sm"
+                zShape="circle"
+                class="shadow-lg"
+                (click)="onRemove($event)"
+                z-tooltip
+                [zContent]="'i18n_z_ui_gallery_remove' | translate"
+              >
+                <i z-icon zType="lucideTrash2" zSize="16"></i>
+              </button>
+            }
+          </div>
+        </div>
+
+        <div class="p-2.5">
+          <p class="text-foreground truncate text-sm font-medium" z-tooltip [zContent]="file().name">
+            {{ file().name }}
+          </p>
+          <p class="text-muted-foreground mt-0.5 text-xs">
+            {{ formattedSize() }}
+          </p>
+        </div>
+      </div>
+    } @else {
+      <div
+        class="group border-border bg-card hover:border-primary/30 flex cursor-pointer items-center gap-3 rounded-lg border px-3 py-2.5 shadow-sm transition-all duration-150 hover:shadow-md"
+        (click)="onPreview()"
+      >
+        <div class="flex size-10 shrink-0 items-center justify-center rounded-lg" [class]="categoryStyle().bg">
+          @if (isImage() && (file().thumbnailUrl || file().url)) {
+            <img
+              [src]="file().thumbnailUrl || file().url"
+              [alt]="file().name"
+              class="size-full rounded-lg object-cover"
+              loading="lazy"
+            />
+          } @else {
+            <i z-icon [zType]="categoryStyle().icon" zSize="18" [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 text-xs">{{ formattedSize() }} · {{ categoryStyle().label }}</p>
+        </div>
+
+        <div class="flex shrink-0 items-center gap-0.5 opacity-0 transition-opacity group-hover:opacity-100">
+          @if (zShowPreview() && canPreview()) {
+            <button
+              z-button
+              zType="ghost"
+              zSize="xs"
+              zShape="circle"
+              (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"
+              (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"
+              (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", "zSizeIcon", "zStrokeWidthIcon", "zWave"], exportAs: ["zButton"] }, { kind: "component", type: ZIconComponent, selector: "z-icon, [z-icon]", inputs: ["class", "zType", "zSize", "zStrokeWidth", "zSvg"] }, { kind: "directive", type: ZTooltipDirective, selector: "[z-tooltip], [zTooltip]", inputs: ["zContent", "zPosition", "zTrigger", "zTooltipType", "zTooltipSize", "zClass", "zShowDelay", "zHideDelay", "zArrow", "zDisabled", "zOffset", "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.6", 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-xl border shadow-sm transition-all duration-200 hover:shadow-md"
+        (click)="onPreview()"
+      >
+        <div class="relative aspect-square overflow-hidden">
+          @if (isImage()) {
+            @if (isLoading()) {
+              <z-skeleton class="absolute inset-0" />
+            }
+            <img
+              [src]="file().thumbnailUrl || file().url"
+              [alt]="file().name"
+              class="size-full object-cover transition-all duration-300"
+              [class.opacity-0]="isLoading()"
+              [class.scale-100]="!isLoading()"
+              [class.group-hover:scale-105]="!isLoading()"
+              loading="lazy"
+              (load)="onImageLoad()"
+              (error)="onImageError()"
+            />
+          } @else {
+            <div class="flex size-full flex-col items-center justify-center gap-2" [class]="categoryStyle().bg">
+              <i z-icon [zType]="categoryStyle().icon" zSize="32" [class]="categoryStyle().text"></i>
+              <span class="text-xs font-semibold" [class]="categoryStyle().text">
+                {{ categoryStyle().label }}
+              </span>
+            </div>
+          }
+
+          <div
+            class="absolute inset-0 flex items-center justify-center gap-2 bg-black/40 opacity-0 backdrop-blur-[2px] transition-all duration-200 group-hover:opacity-100"
+          >
+            @if (zShowPreview() && canPreview()) {
+              <button
+                z-button
+                zType="secondary"
+                zSize="sm"
+                zShape="circle"
+                class="shadow-lg"
+                (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="secondary"
+                zSize="sm"
+                zShape="circle"
+                class="shadow-lg"
+                (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="secondary"
+                zSize="sm"
+                zShape="circle"
+                class="shadow-lg"
+                (click)="onRemove($event)"
+                z-tooltip
+                [zContent]="'i18n_z_ui_gallery_remove' | translate"
+              >
+                <i z-icon zType="lucideTrash2" zSize="16"></i>
+              </button>
+            }
+          </div>
+        </div>
+
+        <div class="p-2.5">
+          <p class="text-foreground truncate text-sm font-medium" z-tooltip [zContent]="file().name">
+            {{ file().name }}
+          </p>
+          <p class="text-muted-foreground mt-0.5 text-xs">
+            {{ formattedSize() }}
+          </p>
+        </div>
+      </div>
+    } @else {
+      <div
+        class="group border-border bg-card hover:border-primary/30 flex cursor-pointer items-center gap-3 rounded-lg border px-3 py-2.5 shadow-sm transition-all duration-150 hover:shadow-md"
+        (click)="onPreview()"
+      >
+        <div class="flex size-10 shrink-0 items-center justify-center rounded-lg" [class]="categoryStyle().bg">
+          @if (isImage() && (file().thumbnailUrl || file().url)) {
+            <img
+              [src]="file().thumbnailUrl || file().url"
+              [alt]="file().name"
+              class="size-full rounded-lg object-cover"
+              loading="lazy"
+            />
+          } @else {
+            <i z-icon [zType]="categoryStyle().icon" zSize="18" [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 text-xs">{{ formattedSize() }} · {{ categoryStyle().label }}</p>
+        </div>
+
+        <div class="flex shrink-0 items-center gap-0.5 opacity-0 transition-opacity group-hover:opacity-100">
+          @if (zShowPreview() && canPreview()) {
+            <button
+              z-button
+              zType="ghost"
+              zSize="xs"
+              zShape="circle"
+              (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"
+              (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"
+              (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 }] }], zOnDownload: [{ type: i0.Output, args: ["zOnDownload"] }], zOnPreview: [{ type: i0.Output, args: ["zOnPreview"] }], zOnRemove: [{ type: i0.Output, args: ["zOnRemove"] }] } });
+
+class ZGalleryPreviewComponent {
+    file = input.required(...(ngDevMode ? [{ debugName: "file" }] : []));
+    files = input([], ...(ngDevMode ? [{ debugName: "files" }] : []));
+    zShowRemove = input(false, ...(ngDevMode ? [{ debugName: "zShowRemove" }] : []));
+    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" }] : []));
+    _mediaLoaded = signal(false, ...(ngDevMode ? [{ debugName: "_mediaLoaded" }] : []));
+    _loadingStartTime = 0;
+    _minLoadingTime = 300;
+    constructor() {
+        effect(() => {
+            const currentFile = this.file();
+            if (currentFile) {
+                this.isLoading.set(true);
+                this._mediaLoaded.set(false);
+                this._loadingStartTime = Date.now();
+                this.zoomed.set(false);
+                this.rotation.set(0);
+            }
+        });
+    }
+    _completeLoading() {
+        const elapsed = Date.now() - this._loadingStartTime;
+        const remaining = this._minLoadingTime - elapsed;
+        if (remaining > 0) {
+            setTimeout(() => this.isLoading.set(false), remaining);
+        }
+        else {
+            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" }] : []));
+    isVideo = computed(() => getFileCategory(this.file()) === 'video', ...(ngDevMode ? [{ debugName: "isVideo" }] : []));
+    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" }] : []));
+    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.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._completeLoading();
+    }
+    onMediaError() {
+        this._completeLoading();
+    }
+    download() {
+        this.zOnDownload.emit(this.file());
+    }
+    remove() {
+        this.zOnRemove.emit(this.file());
+    }
+    onBackdropClick(event) {
+        if (event.target.classList.contains('fixed')) {
+            this.close();
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: ZGalleryPreviewComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.6", 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 } }, outputs: { zOnClose: "zOnClose", zOnDownload: "zOnDownload", zOnNavigate: "zOnNavigate", zOnRemove: "zOnRemove" }, host: { listeners: { "document:keydown": "onKeyDown($event)" }, classAttribute: "z-gallery-preview" }, ngImport: i0, template: `
+    <div
+      class="animate-in fade-in fixed inset-0 z-50 flex items-center justify-center bg-black/80 backdrop-blur-sm duration-200"
+      (click)="onBackdropClick($event)"
+    >
+      <button
+        z-button
+        zType="ghost"
+        zShape="circle"
+        class="absolute top-4 right-4 z-10 text-white hover:bg-white/20"
+        (click)="close()"
+      >
+        <i z-icon zType="lucideX" zSize="24"></i>
+      </button>
+
+      @if (hasPrev()) {
+        <button
+          z-button
+          zType="ghost"
+          zShape="circle"
+          class="absolute left-4 z-10 text-white hover:bg-white/20"
+          (click)="navigate(-1)"
+        >
+          <i z-icon zType="lucideChevronLeft" zSize="32"></i>
+        </button>
+      }
+
+      @if (hasNext()) {
+        <button
+          z-button
+          zType="ghost"
+          zShape="circle"
+          class="absolute right-4 z-10 text-white hover:bg-white/20"
+          (click)="navigate(1)"
+        >
+          <i z-icon zType="lucideChevronRight" zSize="32"></i>
+        </button>
+      }
+
+      <div class="flex h-full w-full flex-col items-center" (click)="$event.stopPropagation()">
+        <div
+          class="dark:border-border absolute top-4 left-1/2 z-10 flex -translate-x-1/2 items-center gap-2 rounded-[6px] border border-transparent bg-black/60 px-4 py-2 text-sm text-white backdrop-blur-sm dark:border"
+        >
+          <div>
+            <span class="max-w-[200px] truncate font-medium">{{ file().name }}</span>
+            <span class="text-white/70">{{ formattedSize() }}</span>
+          </div>
+
+          @if (files().length > 1) {
+            <span class="text-white/70">{{ currentIndex() + 1 }} / {{ files().length }}</span>
+          }
+
+          <div class="ml-1 flex items-center gap-0.5">
+            @if (isImageFile()) {
+              <button
+                z-button
+                zType="ghost"
+                zSize="xs"
+                zShape="circle"
+                class="text-white hover:bg-white/20"
+                z-tooltip
+                [zContent]="'i18n_z_ui_gallery_rotate_left' | translate"
+                (click)="rotateLeft()"
+              >
+                <i z-icon zType="lucideRefreshCcw" zSize="14"></i>
+              </button>
+              <button
+                z-button
+                zType="ghost"
+                zSize="xs"
+                zShape="circle"
+                class="text-white hover:bg-white/20"
+                z-tooltip
+                [zContent]="'i18n_z_ui_gallery_rotate_right' | translate"
+                (click)="rotateRight()"
+              >
+                <i z-icon zType="lucideRefreshCw" zSize="14"></i>
+              </button>
+            }
+
+            <button
+              z-button
+              zType="ghost"
+              zSize="xs"
+              zShape="circle"
+              class="text-white hover:bg-white/20"
+              z-tooltip
+              [zContent]="'i18n_z_ui_gallery_download' | translate"
+              (click)="download()"
+            >
+              <i z-icon zType="lucideDownload" zSize="14"></i>
+            </button>
+
+            @if (zShowRemove()) {
+              <button
+                z-button
+                zType="ghost"
+                zSize="xs"
+                zShape="circle"
+                class="text-white hover:bg-white/20"
+                z-tooltip
+                [zContent]="'i18n_z_ui_gallery_delete' | translate"
+                (click)="remove()"
+              >
+                <i z-icon zType="lucideTrash2" zSize="14"></i>
+              </button>
+            }
+          </div>
+        </div>
+
+        <div class="relative flex flex-1 items-center justify-center pt-16">
+          @if (isImageFile()) {
+            <div class="relative flex h-[60vh] w-[70vw] items-center justify-center">
+              @if (isLoading()) {
+                <z-skeleton class="absolute inset-0 rounded-lg" />
+              }
+              <img
+                [src]="file().url || file().thumbnailUrl"
+                [alt]="file().name"
+                class="max-h-full max-w-full rounded-lg object-contain shadow-2xl transition-opacity duration-300"
+                [class.opacity-0]="isLoading()"
+                [class.opacity-100]="!isLoading()"
+                [class.cursor-zoom-in]="!zoomed()"
+                [class.cursor-zoom-out]="zoomed()"
+                [style.transform]="imageTransform()"
+                (load)="onImageLoad()"
+                (error)="onMediaError()"
+                (click)="toggleZoom()"
+              />
+            </div>
+          } @else if (isPdf()) {
+            <div class="relative h-[75vh] w-[85vw]">
+              @if (isLoading()) {
+                <z-skeleton class="absolute inset-0 rounded-lg" />
+              }
+              <iframe
+                [src]="file().url | zSafeResourceUrl"
+                class="absolute inset-0 size-full rounded-lg bg-white shadow-2xl transition-opacity duration-300"
+                [class.opacity-0]="isLoading()"
+                [class.opacity-100]="!isLoading()"
+                frameborder="0"
+                (load)="onPdfLoad()"
+              ></iframe>
+            </div>
+          } @else if (isVideo()) {
+            <div class="relative flex h-[60vh] w-[70vw] items-center justify-center">
+              @if (isLoading()) {
+                <z-skeleton class="absolute inset-0 rounded-lg" />
+              }
+              <video
+                [src]="file().url"
+                controls
+                autoplay
+                class="max-h-full max-w-full rounded-lg shadow-2xl transition-opacity duration-300"
+                [class.opacity-0]="isLoading()"
+                [class.opacity-100]="!isLoading()"
+                (loadeddata)="onVideoLoad()"
+                (error)="onMediaError()"
+              >
+                Your browser does not support the video tag.
+              </video>
+            </div>
+          } @else {
+            <div class="bg-card flex flex-col items-center justify-center rounded-lg p-12 shadow-2xl">
+              <div class="bg-muted mb-4 flex size-24 items-center justify-center rounded-xl">
+                <i z-icon [zType]="fileIcon()" zSize="40" class="text-muted-foreground"></i>
+              </div>
+              <span class="text-foreground mb-2 text-lg font-medium">{{ file().name }}</span>
+              <span class="text-muted-foreground mb-4 text-sm">{{ formattedSize() }}</span>
+              <span class="text-muted-foreground rounded-md bg-amber-100 px-3 py-1.5 text-xs dark:bg-amber-900/30">
+                <i
+                  z-icon
+                  zType="lucideInfo"
+                  zSize="14"
+                  class="mr-1 inline-block align-middle text-amber-600 dark:text-amber-400"
+                ></i>
+                <span class="align-middle text-amber-700 dark:text-amber-300">
+                  {{ 'i18n_z_ui_gallery_preview_not_supported' | translate }}
+                </span>
+              </span>
+            </div>
+          }
+        </div>
+      </div>
+    </div>
+  `, isInline: true, dependencies: [{ kind: "component", type: ZButtonComponent, selector: "z-button, button[z-button], a[z-button]", inputs: ["class", "zType", "zSize", "zShape", "zLabel", "zLoading", "zDisabled", "zTypeIcon", "zSizeIcon", "zStrokeWidthIcon", "zWave"], exportAs: ["zButton"] }, { kind: "component", type: ZIconComponent, selector: "z-icon, [z-icon]", inputs: ["class", "zType", "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", "zTrigger", "zTooltipType", "zTooltipSize", "zClass", "zShowDelay", "zHideDelay", "zArrow", "zDisabled", "zOffset", "zAutoDetect", "zTriggerElement", "zAlwaysShow", "zMaxWidth"], outputs: ["zShow", "zHide"], exportAs: ["zTooltip"] }, { kind: "pipe", type: ZSafeResourceUrlPipe, name: "zSafeResourceUrl" }, { kind: "pipe", type: TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: ZGalleryPreviewComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'z-gallery-preview',
+                    imports: [
+                        ZButtonComponent,
+                        ZIconComponent,
+                        ZSkeletonComponent,
+                        ZTooltipDirective,
+                        ZSafeResourceUrlPipe,
+                        TranslatePipe,
+                    ],
+                    standalone: true,
+                    template: `
+    <div
+      class="animate-in fade-in fixed inset-0 z-50 flex items-center justify-center bg-black/80 backdrop-blur-sm duration-200"
+      (click)="onBackdropClick($event)"
+    >
+      <button
+        z-button
+        zType="ghost"
+        zShape="circle"
+        class="absolute top-4 right-4 z-10 text-white hover:bg-white/20"
+        (click)="close()"
+      >
+        <i z-icon zType="lucideX" zSize="24"></i>
+      </button>
+
+      @if (hasPrev()) {
+        <button
+          z-button
+          zType="ghost"
+          zShape="circle"
+          class="absolute left-4 z-10 text-white hover:bg-white/20"
+          (click)="navigate(-1)"
+        >
+          <i z-icon zType="lucideChevronLeft" zSize="32"></i>
+        </button>
+      }
+
+      @if (hasNext()) {
+        <button
+          z-button
+          zType="ghost"
+          zShape="circle"
+          class="absolute right-4 z-10 text-white hover:bg-white/20"
+          (click)="navigate(1)"
+        >
+          <i z-icon zType="lucideChevronRight" zSize="32"></i>
+        </button>
+      }
+
+      <div class="flex h-full w-full flex-col items-center" (click)="$event.stopPropagation()">
+        <div
+          class="dark:border-border absolute top-4 left-1/2 z-10 flex -translate-x-1/2 items-center gap-2 rounded-[6px] border border-transparent bg-black/60 px-4 py-2 text-sm text-white backdrop-blur-sm dark:border"
+        >
+          <div>
+            <span class="max-w-[200px] truncate font-medium">{{ file().name }}</span>
+            <span class="text-white/70">{{ formattedSize() }}</span>
+          </div>
+
+          @if (files().length > 1) {
+            <span class="text-white/70">{{ currentIndex() + 1 }} / {{ files().length }}</span>
+          }
+
+          <div class="ml-1 flex items-center gap-0.5">
+            @if (isImageFile()) {
+              <button
+                z-button
+                zType="ghost"
+                zSize="xs"
+                zShape="circle"
+                class="text-white hover:bg-white/20"
+                z-tooltip
+                [zContent]="'i18n_z_ui_gallery_rotate_left' | translate"
+                (click)="rotateLeft()"
+              >
+                <i z-icon zType="lucideRefreshCcw" zSize="14"></i>
+              </button>
+              <button
+                z-button
+                zType="ghost"
+                zSize="xs"
+                zShape="circle"
+                class="text-white hover:bg-white/20"
+                z-tooltip
+                [zContent]="'i18n_z_ui_gallery_rotate_right' | translate"
+                (click)="rotateRight()"
+              >
+                <i z-icon zType="lucideRefreshCw" zSize="14"></i>
+              </button>
+            }
+
+            <button
+              z-button
+              zType="ghost"
+              zSize="xs"
+              zShape="circle"
+              class="text-white hover:bg-white/20"
+              z-tooltip
+              [zContent]="'i18n_z_ui_gallery_download' | translate"
+              (click)="download()"
+            >
+              <i z-icon zType="lucideDownload" zSize="14"></i>
+            </button>
+
+            @if (zShowRemove()) {
+              <button
+                z-button
+                zType="ghost"
+                zSize="xs"
+                zShape="circle"
+                class="text-white hover:bg-white/20"
+                z-tooltip
+                [zContent]="'i18n_z_ui_gallery_delete' | translate"
+                (click)="remove()"
+              >
+                <i z-icon zType="lucideTrash2" zSize="14"></i>
+              </button>
+            }
+          </div>
+        </div>
+
+        <div class="relative flex flex-1 items-center justify-center pt-16">
+          @if (isImageFile()) {
+            <div class="relative flex h-[60vh] w-[70vw] items-center justify-center">
+              @if (isLoading()) {
+                <z-skeleton class="absolute inset-0 rounded-lg" />
+              }
+              <img
+                [src]="file().url || file().thumbnailUrl"
+                [alt]="file().name"
+                class="max-h-full max-w-full rounded-lg object-contain shadow-2xl transition-opacity duration-300"
+                [class.opacity-0]="isLoading()"
+                [class.opacity-100]="!isLoading()"
+                [class.cursor-zoom-in]="!zoomed()"
+                [class.cursor-zoom-out]="zoomed()"
+                [style.transform]="imageTransform()"
+                (load)="onImageLoad()"
+                (error)="onMediaError()"
+                (click)="toggleZoom()"
+              />
+            </div>
+          } @else if (isPdf()) {
+            <div class="relative h-[75vh] w-[85vw]">
+              @if (isLoading()) {
+                <z-skeleton class="absolute inset-0 rounded-lg" />
+              }
+              <iframe
+                [src]="file().url | zSafeResourceUrl"
+                class="absolute inset-0 size-full rounded-lg bg-white shadow-2xl transition-opacity duration-300"
+                [class.opacity-0]="isLoading()"
+                [class.opacity-100]="!isLoading()"
+                frameborder="0"
+                (load)="onPdfLoad()"
+              ></iframe>
+            </div>
+          } @else if (isVideo()) {
+            <div class="relative flex h-[60vh] w-[70vw] items-center justify-center">
+              @if (isLoading()) {
+                <z-skeleton class="absolute inset-0 rounded-lg" />
+              }
+              <video
+                [src]="file().url"
+                controls
+                autoplay
+                class="max-h-full max-w-full rounded-lg shadow-2xl transition-opacity duration-300"
+                [class.opacity-0]="isLoading()"
+                [class.opacity-100]="!isLoading()"
+                (loadeddata)="onVideoLoad()"
+                (error)="onMediaError()"
+              >
+                Your browser does not support the video tag.
+              </video>
+            </div>
+          } @else {
+            <div class="bg-card flex flex-col items-center justify-center rounded-lg p-12 shadow-2xl">
+              <div class="bg-muted mb-4 flex size-24 items-center justify-center rounded-xl">
+                <i z-icon [zType]="fileIcon()" zSize="40" class="text-muted-foreground"></i>
+              </div>
+              <span class="text-foreground mb-2 text-lg font-medium">{{ file().name }}</span>
+              <span class="text-muted-foreground mb-4 text-sm">{{ formattedSize() }}</span>
+              <span class="text-muted-foreground rounded-md bg-amber-100 px-3 py-1.5 text-xs dark:bg-amber-900/30">
+                <i
+                  z-icon
+                  zType="lucideInfo"
+                  zSize="14"
+                  class="mr-1 inline-block align-middle text-amber-600 dark:text-amber-400"
+                ></i>
+                <span class="align-middle text-amber-700 dark:text-amber-300">
+                  {{ 'i18n_z_ui_gallery_preview_not_supported' | translate }}
+                </span>
+              </span>
+            </div>
+          }
+        </div>
+      </div>
+    </div>
+  `,
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    encapsulation: ViewEncapsulation.None,
+                    host: {
+                        class: 'z-gallery-preview',
+                        '(document:keydown)': 'onKeyDown($event)',
+                    },
+                }]
+        }], ctorParameters: () => [], propDecorators: { file: [{ type: i0.Input, args: [{ isSignal: true, alias: "file", required: true }] }], files: [{ type: i0.Input, args: [{ isSignal: true, alias: "files", required: false }] }], zShowRemove: [{ type: i0.Input, args: [{ isSignal: true, alias: "zShowRemove", required: false }] }], zOnClose: [{ type: i0.Output, args: ["zOnClose"] }], zOnDownload: [{ type: i0.Output, args: ["zOnDownload"] }], zOnNavigate: [{ type: i0.Output, args: ["zOnNavigate"] }], zOnRemove: [{ type: i0.Output, args: ["zOnRemove"] }] } });
+
+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-[10px]' },
+        { 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 {
+    zFiles = input([], ...(ngDevMode ? [{ debugName: "zFiles" }] : []));
+    zMode = model('grid', ...(ngDevMode ? [{ debugName: "zMode" }] : []));
+    zSize = input('default', ...(ngDevMode ? [{ debugName: "zSize" }] : []));
+    zColumns = input(4, ...(ngDevMode ? [{ debugName: "zColumns" }] : []));
+    zShowDownload = input(true, ...(ngDevMode ? [{ debugName: "zShowDownload" }] : []));
+    zShowPreview = input(true, ...(ngDevMode ? [{ debugName: "zShowPreview" }] : []));
+    zShowRemove = input(false, ...(ngDevMode ? [{ debugName: "zShowRemove" }] : []));
+    zShowModeToggle = input(true, ...(ngDevMode ? [{ debugName: "zShowModeToggle" }] : []));
+    zShowSearch = input(false, ...(ngDevMode ? [{ debugName: "zShowSearch" }] : []));
+    zServerSearch = input(false, ...(ngDevMode ? [{ debugName: "zServerSearch" }] : []));
+    zSearchPlaceholder = input('Search files...', ...(ngDevMode ? [{ debugName: "zSearchPlaceholder" }] : []));
+    zToggleSize = input('xs', ...(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" }] : []));
+    zOnDownload = output();
+    zOnPreview = output();
+    zOnRemove = output();
+    zModeChange = output();
+    zSearchChange = output();
+    zControl = output();
+    modeIndex = signal(0, ...(ngDevMode ? [{ debugName: "modeIndex" }] : []));
+    previewFile = signal(null, ...(ngDevMode ? [{ debugName: "previewFile" }] : []));
+    searchQuery = signal('', ...(ngDevMode ? [{ debugName: "searchQuery" }] : []));
+    currentMode = computed(() => {
+        const index = this.modeIndex();
+        return index === 1 ? 'list' : 'grid';
+    }, ...(ngDevMode ? [{ debugName: "currentMode" }] : []));
+    gridColumns = computed(() => {
+        const cols = this.zColumns();
+        return `repeat(${cols}, minmax(0, 1fr))`;
+    }, ...(ngDevMode ? [{ debugName: "gridColumns" }] : []));
+    containerClasses = computed(() => zMergeClasses(zGalleryVariants({ zSize: this.zSize() }), this.zClass()), ...(ngDevMode ? [{ debugName: "containerClasses" }] : []));
+    showHeader = computed(() => this.zTitle() || this.zShowSearch() || (this.zShowModeToggle() && this.zFiles().length > 0), ...(ngDevMode ? [{ debugName: "showHeader" }] : []));
+    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" }] : []));
+    ngAfterViewInit() {
+        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.previewFile.set(file),
+            closePreview: () => this.previewFile.set(null),
+        });
+    }
+    onSearchChange(query) {
+        this.searchQuery.set(query);
+        this.zSearchChange.emit(query);
+    }
+    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.previewFile.set(file);
+        this.zOnPreview.emit(file);
+    }
+    onRemove(file) {
+        this.zOnRemove.emit(file);
+    }
+    closePreview() {
+        this.previewFile.set(null);
+    }
+    onNavigatePreview(file) {
+        this.previewFile.set(file);
+    }
+    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();
+        }
+        if (currentIndex < allFiles.length - 1) {
+            this.previewFile.set(allFiles[currentIndex + 1]);
+            return;
+        }
+        this.previewFile.set(allFiles[currentIndex - 1]);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: ZGalleryComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.6", 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 }, 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 }, 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 }, 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 } }, outputs: { zMode: "zModeChange", zOnDownload: "zOnDownload", zOnPreview: "zOnPreview", zOnRemove: "zOnRemove", zModeChange: "zModeChange", zSearchChange: "zSearchChange", zControl: "zControl" }, 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()) {
+              <h3 class="text-sm font-medium">{{ zTitle() }}</h3>
+            }
+
+            @if (zShowSearch()) {
+              <z-input
+                zSearch
+                [zSize]="searchInputSize()"
+                [zPlaceholder]="zSearchPlaceholder() || ('i18n_z_ui_gallery_search_placeholder' | translate)"
+                [ngModel]="searchQuery()"
+                (ngModelChange)="onSearchChange($event)"
+                class="w-64"
+              />
+            }
+          </div>
+
+          @if (zShowModeToggle() && zFiles().length > 0) {
+            <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 (filteredFiles().length > 0) {
+        @if (currentMode() === 'grid') {
+          <div class="grid gap-4" [style.grid-template-columns]="gridColumns()">
+            @for (file of filteredFiles(); track file.id) {
+              <z-gallery-item
+                [file]="file"
+                zMode="grid"
+                [zSize]="zSize()"
+                [zShowDownload]="zShowDownload()"
+                [zShowPreview]="zShowPreview()"
+                [zShowRemove]="zShowRemove()"
+                (zOnDownload)="onDownload($event)"
+                (zOnPreview)="onPreview($event)"
+                (zOnRemove)="onRemove($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()"
+                (zOnDownload)="onDownload($event)"
+                (zOnPreview)="onPreview($event)"
+                (zOnRemove)="onRemove($event)"
+              />
+            }
+          </div>
+        }
+      } @else if (zFiles().length > 0 && searchQuery()) {
+        <z-empty zIcon="lucideSearchX" [zMessage]="'i18n_z_ui_gallery_no_search_results' | translate" zSize="sm" />
+      } @else {
+        <z-empty
+          [zIcon]="zEmptyIcon()"
+          [zMessage]="zEmptyText() || ('i18n_z_ui_gallery_no_files' | translate)"
+          zSize="sm"
+        />
+      }
+
+      @if (previewFile()) {
+        <z-gallery-preview
+          [file]="previewFile()!"
+          [files]="filteredFiles()"
+          [zShowRemove]="zShowRemove()"
+          (zOnClose)="closePreview()"
+          (zOnDownload)="onDownload($event)"
+          (zOnNavigate)="onNavigatePreview($event)"
+          (zOnRemove)="onRemoveFromPreview($event)"
+        />
+      }
+    </div>
+  `, isInline: true, dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: ZGalleryItemComponent, selector: "z-gallery-item", inputs: ["file", "zMode", "zSize", "zShowDownload", "zShowPreview", "zShowRemove"], outputs: ["zOnDownload", "zOnPreview", "zOnRemove"] }, { kind: "component", type: ZGalleryPreviewComponent, selector: "z-gallery-preview", inputs: ["file", "files", "zShowRemove"], outputs: ["zOnClose", "zOnDownload", "zOnNavigate", "zOnRemove"] }, { kind: "component", type: ZButtonGroupComponent, selector: "z-button-group", inputs: ["zClass", "zOrientation", "zActive"], outputs: ["zActiveChange"], exportAs: ["zButtonGroup"] }, { kind: "directive", type: ZButtonGroupItemDirective, selector: "[z-button-group-item]", exportAs: ["zButtonGroupItem"] }, { kind: "component", type: ZButtonComponent, selector: "z-button, button[z-button], a[z-button]", inputs: ["class", "zType", "zSize", "zShape", "zLabel", "zLoading", "zDisabled", "zTypeIcon", "zSizeIcon", "zStrokeWidthIcon", "zWave"], exportAs: ["zButton"] }, { kind: "component", type: ZIconComponent, selector: "z-icon, [z-icon]", inputs: ["class", "zType", "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", "zLabel", "zLabelClass", "zPlaceholder", "zRequired", "zDisabled", "zReadonly", "zPrefix", "zSuffix", "zMin", "zMax", "zStep", "zShowArrows", "zMask", "zDecimalPlaces", "zAllowNegative", "zThousandSeparator", "zDecimalMarker", "zValidators", "zAsyncValidators", "zAsyncDebounce", "zAsyncValidateOn", "zShowPasswordToggle", "zSearch", "zDebounce", "zAutofocus", "zAutoComplete", "zAllowClear", "zAutoSizeContent", "zRows", "zResize", "zMaxLength", "zAutoSuggest"], outputs: ["zOnSearch", "zOnChange", "zControl", "zEvent"], exportAs: ["zInput"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: ZGalleryComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'z-gallery',
+                    imports: [
+                        FormsModule,
+                        TranslatePipe,
+                        ZGalleryItemComponent,
+                        ZGalleryPreviewComponent,
+                        ZButtonGroupComponent,
+                        ZButtonGroupItemDirective,
+                        ZButtonComponent,
+                        ZIconComponent,
+                        ZEmptyComponent,
+                        ZInputComponent,
+                    ],
+                    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()) {
+              <h3 class="text-sm font-medium">{{ zTitle() }}</h3>
+            }
+
+            @if (zShowSearch()) {
+              <z-input
+                zSearch
+                [zSize]="searchInputSize()"
+                [zPlaceholder]="zSearchPlaceholder() || ('i18n_z_ui_gallery_search_placeholder' | translate)"
+                [ngModel]="searchQuery()"
+                (ngModelChange)="onSearchChange($event)"
+                class="w-64"
+              />
+            }
+          </div>
+
+          @if (zShowModeToggle() && zFiles().length > 0) {
+            <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 (filteredFiles().length > 0) {
+        @if (currentMode() === 'grid') {
+          <div class="grid gap-4" [style.grid-template-columns]="gridColumns()">
+            @for (file of filteredFiles(); track file.id) {
+              <z-gallery-item
+                [file]="file"
+                zMode="grid"
+                [zSize]="zSize()"
+                [zShowDownload]="zShowDownload()"
+                [zShowPreview]="zShowPreview()"
+                [zShowRemove]="zShowRemove()"
+                (zOnDownload)="onDownload($event)"
+                (zOnPreview)="onPreview($event)"
+                (zOnRemove)="onRemove($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()"
+                (zOnDownload)="onDownload($event)"
+                (zOnPreview)="onPreview($event)"
+                (zOnRemove)="onRemove($event)"
+              />
+            }
+          </div>
+        }
+      } @else if (zFiles().length > 0 && searchQuery()) {
+        <z-empty zIcon="lucideSearchX" [zMessage]="'i18n_z_ui_gallery_no_search_results' | translate" zSize="sm" />
+      } @else {
+        <z-empty
+          [zIcon]="zEmptyIcon()"
+          [zMessage]="zEmptyText() || ('i18n_z_ui_gallery_no_files' | translate)"
+          zSize="sm"
+        />
+      }
+
+      @if (previewFile()) {
+        <z-gallery-preview
+          [file]="previewFile()!"
+          [files]="filteredFiles()"
+          [zShowRemove]="zShowRemove()"
+          (zOnClose)="closePreview()"
+          (zOnDownload)="onDownload($event)"
+          (zOnNavigate)="onNavigatePreview($event)"
+          (zOnRemove)="onRemoveFromPreview($event)"
+        />
+      }
+    </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 }] }], 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 }] }], 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 }] }], 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 }] }], 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"] }] } });
+
+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.6", ngImport: i0, type: ZGalleryFileIconComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.6", 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.6", 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 }] }] } });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { FILE_CATEGORY_STYLES, ZGalleryComponent, ZGalleryFileIconComponent, ZGalleryItemComponent, ZGalleryPreviewComponent, formatFileSize, getFileCategory, isImage, isPreviewable, zGalleryFileIconVariants, zGalleryItemVariants, zGalleryVariants };
+//# sourceMappingURL=shival99-z-ui-components-z-gallery.mjs.map