@shival99/z-ui 2.3.9 → 2.3.11

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

@@ -1,5 +1,5 @@
 import * as i0 from '@angular/core';
-import { input, output, signal, computed, ViewEncapsulation, ChangeDetectionStrategy, Component, inject, viewChild, effect, EventEmitter, Injector, PLATFORM_ID, Injectable, DestroyRef, model, ElementRef, Directive } from '@angular/core';
+import { inject, DestroyRef, input, output, viewChild, effect, ChangeDetectionStrategy, Component, computed, signal, ViewEncapsulation, EventEmitter, Injectable, model, ElementRef, Directive } from '@angular/core';
 import * as i1$1 from '@angular/forms';
 import { FormsModule } from '@angular/forms';
 import { TranslatePipe } from '@ngx-translate/core';
@@ -11,917 +11,201 @@ 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 { DOCUMENT } from '@angular/common';
+import { ZGalleryOfficeRenderService, ZDynamicService } from '@shival99/z-ui/services';
+import { ZAudioPlayerComponent } from '@shival99/z-ui/components/z-audio-player';
+import { ZCodeComponent } from '@shival99/z-ui/components/z-code';
+import { ZMediaPlayerComponent } from '@shival99/z-ui/components/z-media-player';
 import { ZTooltipDirective } from '@shival99/z-ui/components/z-tooltip';
-import { DOCUMENT, isPlatformBrowser } from '@angular/common';
-import { ZOverlayService } from '@shival99/z-ui/components/z-overlay';
-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';
+class ZGalleryOfficePreviewComponent {
+    _destroyRef = inject(DestroyRef);
+    _renderService = inject(ZGalleryOfficeRenderService);
+    zSource = input.required(/* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "zSource" }] : /* istanbul ignore next */ []));
+    zKind = input.required(/* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "zKind" }] : /* istanbul ignore next */ []));
+    zLoaded = output();
+    zError = output();
+    _host = viewChild.required('host', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_host" }] : /* istanbul ignore next */ []));
+    _render = null;
+    _renderedSource = null;
+    constructor() {
+        effect(() => {
+            const source = this.zSource();
+            const host = this._host().nativeElement;
+            if (source === this._renderedSource) {
+                return;
+            }
+            this._renderedSource = source;
+            this._dispose();
+            host.replaceChildren();
+            void this._render$(host, source);
+        });
+        this._destroyRef.onDestroy(() => this._dispose());
     }
-    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(/* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "file" }] : /* istanbul ignore next */ []));
-    zMode = input('grid', /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "zMode" }] : /* istanbul ignore next */ []));
-    zSize = input('default', /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "zSize" }] : /* istanbul ignore next */ []));
-    zShowDownload = input(true, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "zShowDownload" }] : /* istanbul ignore next */ []));
-    zShowPreview = input(true, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "zShowPreview" }] : /* istanbul ignore next */ []));
-    zShowRemove = input(false, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "zShowRemove" }] : /* istanbul ignore next */ []));
-    zSelectable = input(false, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "zSelectable" }] : /* istanbul ignore next */ []));
-    zSelected = input(false, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "zSelected" }] : /* istanbul ignore next */ []));
-    zOnDownload = output();
-    zOnPreview = output();
-    zOnRemove = output();
-    zOnSelect = output();
-    isLoading = signal(true, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "isLoading" }] : /* istanbul ignore next */ []));
-    formattedSize = computed(() => formatFileSize(this.file().size), /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "formattedSize" }] : /* istanbul ignore next */ []));
-    category = computed(() => getFileCategory(this.file()), /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "category" }] : /* istanbul ignore next */ []));
-    isImage = computed(() => this.category() === 'image', /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "isImage" }] : /* istanbul ignore next */ []));
-    isVideo = computed(() => this.category() === 'video', /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "isVideo" }] : /* istanbul ignore next */ []));
-    hasVideoPreview = computed(() => this.isVideo() && !!this.file().url, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "hasVideoPreview" }] : /* istanbul ignore next */ []));
-    fileExtension = computed(() => {
-        const fileName = this.file().name;
-        const parts = fileName.split('.');
-        if (parts.length < 2) {
-            return 'FILE';
-        }
-        return parts[parts.length - 1].toUpperCase();
-    }, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "fileExtension" }] : /* istanbul ignore next */ []));
-    mediaHeightClass = computed(() => {
-        const size = this.zSize();
-        switch (size) {
-            case 'sm':
-                return 'h-36';
-            case 'lg':
-                return 'h-56';
-            default:
-                return 'h-44';
+    async _render$(host, source) {
+        try {
+            if (this.zKind() === 'word') {
+                this._render = await this._renderService.renderDoc(host, source);
+                this.zLoaded.emit();
+                return;
+            }
+            if (this.zKind() === 'excel') {
+                this._render = await this._renderService.renderSheet(host, source);
+                this.zLoaded.emit();
+                return;
+            }
+            this._render = await this._renderService.renderSlide(host, source);
+            this.zLoaded.emit();
         }
-    }, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "mediaHeightClass" }] : /* istanbul ignore next */ []));
-    formattedDate = computed(() => {
-        const file = this.file();
-        const date = file.updatedAt || file.createdAt;
-        if (!date) {
-            return null;
+        catch (error) {
+            this.zError.emit(error instanceof Error ? error.message : 'i18n_z_ui_gallery_preview_load_error');
         }
-        return new Intl.DateTimeFormat(undefined, {
-            month: 'short',
-            day: '2-digit',
-            year: 'numeric',
-        }).format(date);
-    }, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "formattedDate" }] : /* istanbul ignore next */ []));
-    categoryStyle = computed(() => {
-        const style = FILE_CATEGORY_STYLES[this.category()];
-        return {
-            ...style,
-            icon: style.icon,
-        };
-    }, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "categoryStyle" }] : /* istanbul ignore next */ []));
-    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), /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "fileTypeClasses" }] : /* istanbul ignore next */ []));
-    canPreview = computed(() => isPreviewable(this.file()), /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "canPreview" }] : /* istanbul ignore next */ []));
-    onImageLoad() {
-        this.isLoading.set(false);
-    }
-    onImageError() {
-        this.isLoading.set(false);
     }
-    onDownload(event) {
-        event.stopPropagation();
-        this.zOnDownload.emit(this.file());
+    _dispose() {
+        this._render?.dispose();
+        this._render = null;
     }
-    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: "22.1.2", ngImport: i0, type: ZGalleryItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.2", 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>
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: ZGalleryOfficePreviewComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "22.1.2", type: ZGalleryOfficePreviewComponent, isStandalone: true, selector: "z-gallery-office-preview", inputs: { zSource: { classPropertyName: "zSource", publicName: "zSource", isSignal: true, isRequired: true, transformFunction: null }, zKind: { classPropertyName: "zKind", publicName: "zKind", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { zLoaded: "zLoaded", zError: "zError" }, viewQueries: [{ propertyName: "_host", first: true, predicate: ["host"], descendants: true, isSignal: true }], ngImport: i0, template: "<div\n  #host\n  class=\"z-gallery-office-preview\"\n  [class.z-gallery-office-preview--sheet]=\"zKind() === 'excel'\"\n  [class.z-gallery-office-preview--slide]=\"zKind() === 'powerpoint'\"></div>\n", styles: ["*,:before,:after,::backdrop{--univer-tw-border-spacing-x: 0;--univer-tw-border-spacing-y: 0;--univer-tw-translate-x: 0;--univer-tw-translate-y: 0;--univer-tw-rotate: 0;--univer-tw-skew-x: 0;--univer-tw-skew-y: 0;--univer-tw-scale-x: 1;--univer-tw-scale-y: 1;--univer-tw-pan-x: ;--univer-tw-pan-y: ;--univer-tw-pinch-zoom: ;--univer-tw-scroll-snap-strictness: proximity;--univer-tw-gradient-from-position: ;--univer-tw-gradient-via-position: ;--univer-tw-gradient-to-position: ;--univer-tw-ordinal: ;--univer-tw-slashed-zero: ;--univer-tw-numeric-figure: ;--univer-tw-numeric-spacing: ;--univer-tw-numeric-fraction: ;--univer-tw-ring-inset: ;--univer-tw-ring-offset-width: 0px;--univer-tw-ring-offset-color: #fff;--univer-tw-ring-color: #93c5fd80;--univer-tw-ring-offset-shadow: 0 0 #0000;--univer-tw-ring-shadow: 0 0 #0000;--univer-tw-shadow: 0 0 #0000;--univer-tw-shadow-colored: 0 0 #0000;--univer-tw-blur: ;--univer-tw-brightness: ;--univer-tw-contrast: ;--univer-tw-grayscale: ;--univer-tw-hue-rotate: ;--univer-tw-invert: ;--univer-tw-saturate: ;--univer-tw-sepia: ;--univer-tw-drop-shadow: ;--univer-tw-backdrop-blur: ;--univer-tw-backdrop-brightness: ;--univer-tw-backdrop-contrast: ;--univer-tw-backdrop-grayscale: ;--univer-tw-backdrop-hue-rotate: ;--univer-tw-backdrop-invert: ;--univer-tw-backdrop-opacity: ;--univer-tw-backdrop-saturate: ;--univer-tw-backdrop-sepia: ;--univer-tw-contain-size: ;--univer-tw-contain-layout: ;--univer-tw-contain-paint: ;--univer-tw-contain-style: }*{scrollbar-color:initial;scrollbar-width:initial}.univer-sr-only{clip:rect(0,0,0,0);white-space:nowrap;border-width:0;width:1px;height:1px;margin:-1px;padding:0;position:absolute;overflow:hidden}.univer-inset-x-0{left:0;right:0}.univer-bottom-0\\.5{bottom:.125rem}.univer-bottom-6{bottom:1.5rem}.univer-left-0\\.5{left:.125rem}.univer-left-2{left:.5rem}.univer-left-\\[-16px\\]{left:-16px}.univer-right-4{right:1rem}.univer-right-px{right:1px}.univer-top-px{top:1px}.univer-z-0{z-index:0}.univer-z-\\[1081\\]{z-index:1081}.-univer-mx-1{margin-left:-.25rem;margin-right:-.25rem}.univer-my-0{margin-top:0;margin-bottom:0}.univer-ml-auto{margin-left:auto}.univer-inline-block{display:inline-block}.\\!univer-hidden{display:none!important}.univer-size-2{width:.5rem;height:.5rem}.univer-size-2\\.5{width:.625rem;height:.625rem}.univer-h-1\\/2{height:50%}.univer-h-12{height:3rem}.univer-h-2{height:.5rem}.univer-h-32{height:8rem}.univer-h-48{height:12rem}.univer-h-\\[150px\\]{height:150px}.univer-h-\\[calc\\(100\\%-2px\\)\\]{height:calc(100% - 2px)}.univer-max-h-0{max-height:0}.univer-max-h-80{max-height:20rem}.univer-max-h-\\[--radix-popper-available-height\\]{max-height:var(--radix-popper-available-height)}.univer-max-h-\\[1000px\\]{max-height:1000px}.univer-max-h-\\[40vh\\]{max-height:40vh}.univer-max-h-full{max-height:100%}.univer-max-h-screen{max-height:100vh}.univer-min-h-3\\.5{min-height:.875rem}.univer-min-h-\\[520px\\]{min-height:520px}.\\!univer-w-fit{width:fit-content!important}.univer-w-64{width:16rem}.univer-w-72{width:18rem}.univer-w-80{width:20rem}.univer-w-\\[--radix-popper-anchor-width\\]{width:var(--radix-popper-anchor-width)}.univer-w-\\[calc\\(100\\%-16px\\)\\]{width:calc(100% - 16px)}.univer-min-w-36{min-width:9rem}.univer-min-w-\\[320px\\]{min-width:320px}.univer-max-w-2xl{max-width:42rem}.univer-max-w-\\[520px\\]{max-width:520px}.univer-max-w-\\[60vw\\]{max-width:60vw}.univer-max-w-sm{max-width:24rem}.univer-max-w-xs{max-width:20rem}.univer-shrink{flex-shrink:1}.univer-shrink-0{flex-shrink:0}.univer-origin-\\[--radix-hover-card-content-transform-origin\\]{transform-origin:var(--radix-hover-card-content-transform-origin)}.-univer-translate-y-1\\/2,.univer--translate-y-1\\/2{--univer-tw-translate-y: -50%;transform:translate(var(--univer-tw-translate-x),-50%) rotate(var(--univer-tw-rotate)) skew(var(--univer-tw-skew-x)) skewY(var(--univer-tw-skew-y)) scaleX(var(--univer-tw-scale-x)) scaleY(var(--univer-tw-scale-y));transform:translate(var(--univer-tw-translate-x),var(--univer-tw-translate-y)) rotate(var(--univer-tw-rotate)) skew(var(--univer-tw-skew-x)) skewY(var(--univer-tw-skew-y)) scaleX(var(--univer-tw-scale-x)) scaleY(var(--univer-tw-scale-y))}.univer-translate-x-3{--univer-tw-translate-x: .75rem;transform:translate(.75rem,var(--univer-tw-translate-y)) rotate(var(--univer-tw-rotate)) skew(var(--univer-tw-skew-x)) skewY(var(--univer-tw-skew-y)) scaleX(var(--univer-tw-scale-x)) scaleY(var(--univer-tw-scale-y));transform:translate(var(--univer-tw-translate-x),var(--univer-tw-translate-y)) rotate(var(--univer-tw-rotate)) skew(var(--univer-tw-skew-x)) skewY(var(--univer-tw-skew-y)) scaleX(var(--univer-tw-scale-x)) scaleY(var(--univer-tw-scale-y))}.-univer-rotate-90{--univer-tw-rotate: -90deg;transform:translate(var(--univer-tw-translate-x),var(--univer-tw-translate-y)) rotate(-90deg) skew(var(--univer-tw-skew-x)) skewY(var(--univer-tw-skew-y)) scaleX(var(--univer-tw-scale-x)) scaleY(var(--univer-tw-scale-y));transform:translate(var(--univer-tw-translate-x),var(--univer-tw-translate-y)) rotate(var(--univer-tw-rotate)) skew(var(--univer-tw-skew-x)) skewY(var(--univer-tw-skew-y)) scaleX(var(--univer-tw-scale-x)) scaleY(var(--univer-tw-scale-y))}.univer-rotate-0{--univer-tw-rotate: 0deg;transform:translate(var(--univer-tw-translate-x),var(--univer-tw-translate-y)) rotate(0) skew(var(--univer-tw-skew-x)) skewY(var(--univer-tw-skew-y)) scaleX(var(--univer-tw-scale-x)) scaleY(var(--univer-tw-scale-y));transform:translate(var(--univer-tw-translate-x),var(--univer-tw-translate-y)) rotate(var(--univer-tw-rotate)) skew(var(--univer-tw-skew-x)) skewY(var(--univer-tw-skew-y)) scaleX(var(--univer-tw-scale-x)) scaleY(var(--univer-tw-scale-y))}.univer-rotate-45{--univer-tw-rotate: 45deg;transform:translate(var(--univer-tw-translate-x),var(--univer-tw-translate-y)) rotate(45deg) skew(var(--univer-tw-skew-x)) skewY(var(--univer-tw-skew-y)) scaleX(var(--univer-tw-scale-x)) scaleY(var(--univer-tw-scale-y));transform:translate(var(--univer-tw-translate-x),var(--univer-tw-translate-y)) rotate(var(--univer-tw-rotate)) skew(var(--univer-tw-skew-x)) skewY(var(--univer-tw-skew-y)) scaleX(var(--univer-tw-scale-x)) scaleY(var(--univer-tw-scale-y))}.univer-rotate-\\[-90deg\\]{--univer-tw-rotate: -90deg;transform:translate(var(--univer-tw-translate-x),var(--univer-tw-translate-y)) rotate(-90deg) skew(var(--univer-tw-skew-x)) skewY(var(--univer-tw-skew-y)) scaleX(var(--univer-tw-scale-x)) scaleY(var(--univer-tw-scale-y));transform:translate(var(--univer-tw-translate-x),var(--univer-tw-translate-y)) rotate(var(--univer-tw-rotate)) skew(var(--univer-tw-skew-x)) skewY(var(--univer-tw-skew-y)) scaleX(var(--univer-tw-scale-x)) scaleY(var(--univer-tw-scale-y))}.\\!univer-animate-none{animation:none!important}.univer-cursor-crosshair{cursor:crosshair}.univer-cursor-grabbing{cursor:grabbing}.univer-resize{resize:both}.univer-grid-flow-row{grid-auto-flow:row}.univer-grid-cols-7{grid-template-columns:repeat(7,minmax(0,1fr))}.univer-flex-col-reverse{flex-direction:column-reverse}.univer-content-center{align-content:center}.univer-gap-5{gap:1.25rem}.univer-space-y-1\\.5>:not([hidden])~:not([hidden]){--univer-tw-space-y-reverse: 0;margin-top:calc(.375rem * (1 - var(--univer-tw-space-y-reverse)));margin-top:.375rem;margin-top:calc(.375rem * calc(1 - var(--univer-tw-space-y-reverse)));margin-bottom:0;margin-bottom:calc(.375rem * var(--univer-tw-space-y-reverse))}.univer-divide-x>:not([hidden])~:not([hidden]){--univer-tw-divide-x-reverse: 0;border-right-width:0;border-right-width:calc(1px * var(--univer-tw-divide-x-reverse));border-left-width:calc(1px * (1 - var(--univer-tw-divide-x-reverse)));border-left-width:1px;border-left-width:calc(1px * calc(1 - var(--univer-tw-divide-x-reverse)))}.univer-divide-y-0>:not([hidden])~:not([hidden]){--univer-tw-divide-y-reverse: 0;border-top-width:calc(0px * (1 - var(--univer-tw-divide-y-reverse)));border-top-width:0;border-top-width:calc(0px * calc(1 - var(--univer-tw-divide-y-reverse)));border-bottom-width:0;border-bottom-width:calc(0px * var(--univer-tw-divide-y-reverse))}.univer-text-ellipsis{text-overflow:ellipsis}.univer-text-balance{text-wrap:balance}.\\!univer-rounded-b-none{border-bottom-right-radius:0!important;border-bottom-left-radius:0!important}.\\!univer-rounded-l-none{border-top-left-radius:0!important;border-bottom-left-radius:0!important}.\\!univer-rounded-r-none{border-top-right-radius:0!important;border-bottom-right-radius:0!important}.\\!univer-rounded-t-none{border-top-left-radius:0!important;border-top-right-radius:0!important}.univer-rounded-r-md{border-top-right-radius:.375rem;border-bottom-right-radius:.375rem}.\\!univer-border-l-0{border-left-width:0!important}.\\!univer-border-t-0{border-top-width:0!important}.univer-border-b-0{border-bottom-width:0}.univer-border-l{border-left-width:1px}.univer-border-l-0{border-left-width:0}.univer-border-r{border-right-width:1px}.univer-border-t{border-top-width:1px}.univer-border-t-0{border-top-width:0}.univer-border-dashed{border-style:dashed}.\\!univer-border-gray-200{border-color:var(--univer-gray-200)!important}.univer-border-gray-300{border-color:var(--univer-gray-300)}.univer-border-primary-200{border-color:var(--univer-primary-200)}.univer-border-primary-300{border-color:var(--univer-primary-300)}.univer-border-red-300{border-color:var(--univer-red-300)}.univer-border-red-500{border-color:var(--univer-red-500)}.univer-border-white{border-color:var(--univer-white)}.\\!univer-bg-primary-600{background-color:var(--univer-primary-600)!important}.univer-bg-\\[rgba\\(0\\,0\\,0\\,0\\.8\\)\\]{background-color:#000c}.univer-bg-gray-800{background-color:var(--univer-gray-800)}.univer-bg-gray-900{background-color:var(--univer-gray-900)}.univer-bg-primary-500{background-color:var(--univer-primary-500)}.univer-bg-red-500{background-color:var(--univer-red-500)}.univer-bg-sky-100\\/70{background-color:#e0f2feb3}.univer-bg-slate-100\\/80{background-color:#f1f5f9cc}.univer-bg-slate-900\\/90{background-color:#0f172ae6}.univer-bg-gradient-to-br{background-image:linear-gradient(to bottom right,var(--univer-tw-gradient-stops))}.univer-from-slate-100{--univer-tw-gradient-from: #f1f5f9 var(--univer-tw-gradient-from-position);--univer-tw-gradient-to: #f1f5f900 var(--univer-tw-gradient-to-position);--univer-tw-gradient-stops: var(--univer-tw-gradient-from), var(--univer-tw-gradient-to)}.univer-via-cyan-50{--univer-tw-gradient-to: #ecfeff00 var(--univer-tw-gradient-to-position);--univer-tw-gradient-stops: var(--univer-tw-gradient-from), #ecfeff var(--univer-tw-gradient-via-position), var(--univer-tw-gradient-to)}.univer-to-blue-100{--univer-tw-gradient-to: var(--univer-blue-100) var(--univer-tw-gradient-to-position)}.univer-fill-current{fill:currentColor}.\\!univer-p-2\\.5{padding:.625rem!important}.univer-p-6{padding:1.5rem}.\\!univer-pl-4{padding-left:1rem!important}.univer-pb-2\\.5{padding-bottom:.625rem}.univer-pl-8{padding-left:2rem}.univer-pr-32{padding-right:8rem}.univer-pr-8{padding-right:2rem}.univer-pt-4{padding-top:1rem}.univer-align-middle{vertical-align:middle}.univer-font-mono{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace}.univer-text-\\[13px\\]{font-size:13px}.univer-text-\\[8px\\]{font-size:8px}.univer-text-sm\\/8{font-size:.875rem;line-height:2rem}.univer-text-xs\\/6{font-size:.75rem;line-height:1.5rem}.univer-leading-9{line-height:2.25rem}.univer-leading-normal{line-height:1.5}.univer-tracking-wide{letter-spacing:.025em}.univer-tracking-widest{letter-spacing:.1em}.\\!univer-text-primary-500{color:var(--univer-primary-500)!important}.univer-text-amber-500{--univer-tw-text-opacity: 1;color:rgba(245,158,11,var(--univer-tw-text-opacity, 1))}.univer-text-cyan-700{--univer-tw-text-opacity: 1;color:rgba(14,116,144,var(--univer-tw-text-opacity, 1))}.univer-text-green-500{color:var(--univer-green-500)}.univer-text-sky-500{--univer-tw-text-opacity: 1;color:rgba(14,165,233,var(--univer-tw-text-opacity, 1))}.univer-text-sky-700{--univer-tw-text-opacity: 1;color:rgba(3,105,161,var(--univer-tw-text-opacity, 1))}.univer-text-sky-900{--univer-tw-text-opacity: 1;color:rgba(12,74,110,var(--univer-tw-text-opacity, 1))}.univer-text-slate-500{--univer-tw-text-opacity: 1;color:rgba(100,116,139,var(--univer-tw-text-opacity, 1))}.univer-text-slate-600{--univer-tw-text-opacity: 1;color:rgba(71,85,105,var(--univer-tw-text-opacity, 1))}.univer-text-slate-700{--univer-tw-text-opacity: 1;color:rgba(51,65,85,var(--univer-tw-text-opacity, 1))}.univer-text-slate-800{--univer-tw-text-opacity: 1;color:rgba(30,41,59,var(--univer-tw-text-opacity, 1))}.univer-text-violet-500{--univer-tw-text-opacity: 1;color:rgba(139,92,246,var(--univer-tw-text-opacity, 1))}.univer-underline-offset-4{text-underline-offset:4px}.univer-opacity-100{opacity:1}.univer-opacity-50{opacity:.5}.univer-opacity-80{opacity:.8}.univer-shadow-\\[0_30px_60px_-35px_rgba\\(15\\,23\\,42\\,0\\.55\\)\\]{--univer-tw-shadow: 0 30px 60px -35px #0f172a8c;--univer-tw-shadow-colored: 0 30px 60px -35px var(--univer-tw-shadow-color);box-shadow:0 0 #0000,0 0 #0000,0 30px 60px -35px #0f172a8c;box-shadow:var(--univer-tw-ring-offset-shadow, 0 0 #0000),var(--univer-tw-ring-shadow, 0 0 #0000),var(--univer-tw-shadow)}.univer-shadow-inner{--univer-tw-shadow: inset 0 2px 4px 0 #0000000d;--univer-tw-shadow-colored: inset 0 2px 4px 0 var(--univer-tw-shadow-color);box-shadow:0 0 #0000,0 0 #0000,inset 0 2px 4px #0000000d;box-shadow:var(--univer-tw-ring-offset-shadow, 0 0 #0000),var(--univer-tw-ring-shadow, 0 0 #0000),var(--univer-tw-shadow)}.univer-ring-2{--univer-tw-ring-offset-shadow: var(--univer-tw-ring-inset) 0 0 0 var(--univer-tw-ring-offset-width) var(--univer-tw-ring-offset-color);--univer-tw-ring-shadow: var(--univer-tw-ring-inset) 0 0 0 calc(2px + var(--univer-tw-ring-offset-width)) var(--univer-tw-ring-color);box-shadow:var(--univer-tw-ring-offset-shadow),var(--univer-tw-ring-shadow),0 0 #0000;box-shadow:var(--univer-tw-ring-offset-shadow),var(--univer-tw-ring-shadow),var(--univer-tw-shadow, 0 0 #0000)}.\\!univer-ring-primary-900{--univer-tw-ring-color: var(--univer-primary-900) !important}.univer-ring-primary-50{--univer-tw-ring-color: var(--univer-primary-50)}.univer-ring-white{--univer-tw-ring-color: var(--univer-white)}.univer-ring-offset-2{--univer-tw-ring-offset-width: 2px}.\\!univer-ring-offset-gray-600{--univer-tw-ring-offset-color: var(--univer-gray-600) !important}.univer-ring-offset-white{--univer-tw-ring-offset-color: var(--univer-white)}.univer-drop-shadow-sm{--univer-tw-drop-shadow: drop-shadow(0 1px 1px #0000000d);filter:var(--univer-tw-blur) var(--univer-tw-brightness) var(--univer-tw-contrast) var(--univer-tw-grayscale) var(--univer-tw-hue-rotate) var(--univer-tw-invert) var(--univer-tw-saturate) var(--univer-tw-sepia) var(--univer-tw-drop-shadow)}.univer-transition-\\[color\\,box-shadow\\]{transition-property:color,box-shadow;transition-duration:.15s;transition-timing-function:cubic-bezier(.4,0,.2,1)}.univer-transition-\\[max-height\\,opacity\\]{transition-property:max-height,opacity;transition-duration:.15s;transition-timing-function:cubic-bezier(.4,0,.2,1)}.univer-transition-opacity{transition-property:opacity;transition-duration:.15s;transition-timing-function:cubic-bezier(.4,0,.2,1)}.univer-transition-shadow{transition-property:box-shadow;transition-duration:.15s;transition-timing-function:cubic-bezier(.4,0,.2,1)}.univer-transition-transform{transition-property:transform;transition-duration:.15s;transition-timing-function:cubic-bezier(.4,0,.2,1)}.univer-duration-150{transition-duration:.15s}.univer-duration-500{transition-duration:.5s}.univer-duration-75{transition-duration:75ms}.univer-ease-in-out{transition-timing-function:cubic-bezier(.4,0,.2,1)}.univer-ease-out{transition-timing-function:cubic-bezier(0,0,.2,1)}.univer-will-change-transform{will-change:transform}.univer-scrollbar-thin::-webkit-scrollbar-track{background-color:var(--scrollbar-track);border-radius:var(--scrollbar-track-radius)}.univer-scrollbar-thin::-webkit-scrollbar-track:hover{background-color:var(--scrollbar-track-hover, var(--scrollbar-track))}.univer-scrollbar-thin::-webkit-scrollbar-track:active{background-color:var(--scrollbar-track-active, var(--scrollbar-track-hover, var(--scrollbar-track)))}.univer-scrollbar-thin::-webkit-scrollbar-thumb{background-color:var(--scrollbar-thumb);border-radius:var(--scrollbar-thumb-radius)}.univer-scrollbar-thin::-webkit-scrollbar-thumb:hover{background-color:var(--scrollbar-thumb-hover, var(--scrollbar-thumb))}.univer-scrollbar-thin::-webkit-scrollbar-thumb:active{background-color:var(--scrollbar-thumb-active, var(--scrollbar-thumb-hover, var(--scrollbar-thumb)))}.univer-scrollbar-thin::-webkit-scrollbar-corner{background-color:var(--scrollbar-corner);border-radius:var(--scrollbar-corner-radius)}.univer-scrollbar-thin::-webkit-scrollbar-corner:hover{background-color:var(--scrollbar-corner-hover, var(--scrollbar-corner))}.univer-scrollbar-thin::-webkit-scrollbar-corner:active{background-color:var(--scrollbar-corner-active, var(--scrollbar-corner-hover, var(--scrollbar-corner)))}.univer-scrollbar-thin{scrollbar-width:thin;scrollbar-color:initial initial;scrollbar-color:var(--scrollbar-thumb, initial) var(--scrollbar-track, initial)}.univer-scrollbar-thin::-webkit-scrollbar{width:8px;height:8px;display:block}.univer-scrollbar-track-gray-50{--scrollbar-track: var(--univer-gray-50) !important}.univer-scrollbar-thumb-gray-300{--scrollbar-thumb: var(--univer-gray-300) !important}.univer-animate-out{--univer-tw-exit-opacity: initial;--univer-tw-exit-scale: initial;--univer-tw-exit-rotate: initial;--univer-tw-exit-translate-x: initial;--univer-tw-exit-translate-y: initial;animation-name:exit;animation-duration:.15s}.univer-fade-in,.univer-fade-in-0{--univer-tw-enter-opacity: 0}.univer-fade-out{--univer-tw-exit-opacity: 0}.univer-zoom-in-95{--univer-tw-enter-scale: .95}.univer-duration-150{animation-duration:.15s}.univer-duration-200{animation-duration:.2s}.univer-duration-300{animation-duration:.3s}.univer-duration-500{animation-duration:.5s}.univer-duration-75{animation-duration:75ms}.univer-ease-in-out{animation-timing-function:cubic-bezier(.4,0,.2,1)}.univer-ease-out{animation-timing-function:cubic-bezier(0,0,.2,1)}.placeholder\\:univer-text-gray-200::placeholder{color:var(--univer-gray-200)}.placeholder\\:univer-text-gray-400::placeholder{color:var(--univer-gray-400)}.before\\:univer-absolute:before{content:var(--univer-tw-content);position:absolute}.before\\:univer-top-1\\/2:before{content:var(--univer-tw-content);top:50%}.before\\:univer-block:before{content:var(--univer-tw-content);display:block}.before\\:univer-h-px:before{content:var(--univer-tw-content);height:1px}.before\\:univer-w-full:before{content:var(--univer-tw-content);width:100%}.before\\:-univer-translate-y-1\\/2:before{content:var(--univer-tw-content);--univer-tw-translate-y: -50%;transform:translate(var(--univer-tw-translate-x),-50%) rotate(var(--univer-tw-rotate)) skew(var(--univer-tw-skew-x)) skewY(var(--univer-tw-skew-y)) scaleX(var(--univer-tw-scale-x)) scaleY(var(--univer-tw-scale-y));transform:translate(var(--univer-tw-translate-x),var(--univer-tw-translate-y)) rotate(var(--univer-tw-rotate)) skew(var(--univer-tw-skew-x)) skewY(var(--univer-tw-skew-y)) scaleX(var(--univer-tw-scale-x)) scaleY(var(--univer-tw-scale-y))}.before\\:univer-bg-gray-200:before{content:var(--univer-tw-content);background-color:var(--univer-gray-200)}.before\\:univer-content-\\[\\\"\\\"\\]:before{--univer-tw-content: \"\";content:\"\";content:var(--univer-tw-content)}.data-\\[disabled\\]\\:univer-pointer-events-none[data-disabled]{pointer-events:none}.data-\\[orientation\\=horizontal\\]\\:univer-h-px[data-orientation=horizontal]{height:1px}.data-\\[orientation\\=vertical\\]\\:univer-h-full[data-orientation=vertical]{height:100%}.data-\\[orientation\\=horizontal\\]\\:univer-w-full[data-orientation=horizontal]{width:100%}.data-\\[orientation\\=vertical\\]\\:univer-w-px[data-orientation=vertical]{width:1px}.data-\\[state\\=open\\]\\:univer-bg-gray-100[data-state=open]{background-color:var(--univer-gray-100)}.data-\\[disabled\\]\\:univer-opacity-50[data-disabled]{opacity:.5}.data-\\[state\\=open\\]\\:univer-animate-in[data-state=open]{--univer-tw-enter-opacity: initial;--univer-tw-enter-scale: initial;--univer-tw-enter-rotate: initial;--univer-tw-enter-translate-x: initial;--univer-tw-enter-translate-y: initial;animation-name:enter;animation-duration:.15s}.data-\\[state\\=closed\\]\\:univer-animate-out[data-state=closed]{--univer-tw-exit-opacity: initial;--univer-tw-exit-scale: initial;--univer-tw-exit-rotate: initial;--univer-tw-exit-translate-x: initial;--univer-tw-exit-translate-y: initial;animation-name:exit;animation-duration:.15s}.data-\\[state\\=closed\\]\\:univer-fade-out-0[data-state=closed]{--univer-tw-exit-opacity: 0}.data-\\[state\\=open\\]\\:univer-fade-in-0[data-state=open]{--univer-tw-enter-opacity: 0}.data-\\[state\\=closed\\]\\:univer-zoom-out-95[data-state=closed]{--univer-tw-exit-scale: .95}.data-\\[state\\=open\\]\\:univer-zoom-in-95[data-state=open]{--univer-tw-enter-scale: .95}.data-\\[side\\=bottom\\]\\:univer-slide-in-from-top-2[data-side=bottom]{--univer-tw-enter-translate-y: -.5rem}.data-\\[side\\=left\\]\\:univer-slide-in-from-right-2[data-side=left]{--univer-tw-enter-translate-x: .5rem}.data-\\[side\\=right\\]\\:univer-slide-in-from-left-2[data-side=right]{--univer-tw-enter-translate-x: -.5rem}.data-\\[side\\=top\\]\\:univer-slide-in-from-bottom-2[data-side=top]{--univer-tw-enter-translate-y: .5rem}.data-\\[state\\=closed\\]\\:univer-slide-out-to-left-1\\/2[data-state=closed]{--univer-tw-exit-translate-x: -50%}.data-\\[state\\=closed\\]\\:univer-slide-out-to-top-\\[48\\%\\][data-state=closed]{--univer-tw-exit-translate-y: -48%}.data-\\[state\\=open\\]\\:univer-slide-in-from-left-1\\/2[data-state=open]{--univer-tw-enter-translate-x: -50%}.data-\\[state\\=open\\]\\:univer-slide-in-from-top-\\[48\\%\\][data-state=open]{--univer-tw-enter-translate-y: -48%}.hover\\:univer-border-red-400:hover{border-color:var(--univer-red-400)}.hover\\:univer-border-transparent:hover{border-color:#0000}.hover\\:univer-bg-primary-500:hover{background-color:var(--univer-primary-500)}.hover\\:univer-bg-red-400:hover{background-color:var(--univer-red-400)}.hover\\:univer-text-gray-500:hover{color:var(--univer-gray-500)}.hover\\:univer-text-primary-500:hover{color:var(--univer-primary-500)}.hover\\:univer-text-white:hover{color:var(--univer-white)}.hover\\:univer-underline:hover{text-decoration-line:underline}.hover\\:univer-opacity-100:hover{opacity:1}.hover\\:univer-opacity-70:hover{opacity:.7}.hover\\:univer-opacity-80:hover{opacity:.8}.focus\\:univer-border-primary-600:focus{border-color:var(--univer-primary-600)}.focus\\:univer-bg-gray-100:focus{background-color:var(--univer-gray-100)}.focus\\:univer-ring-primary-50:focus{--univer-tw-ring-color: var(--univer-primary-50)}.active\\:univer-border-red-600:active{border-color:var(--univer-red-600)}.active\\:univer-bg-primary-700:active{background-color:var(--univer-primary-700)}.active\\:univer-bg-red-600:active{background-color:var(--univer-red-600)}.active\\:univer-text-primary-700:active{color:var(--univer-primary-700)}.disabled\\:univer-pointer-events-none:disabled{pointer-events:none}.disabled\\:univer-opacity-50:disabled{opacity:.5}@media(min-width:640px){.sm\\:\\!univer-flex-row{flex-direction:row!important}.sm\\:\\!univer-justify-end{justify-content:flex-end!important}.sm\\:\\!univer-space-x-2>:not([hidden])~:not([hidden]){--univer-tw-space-x-reverse: 0 !important;margin-right:0!important;margin-right:calc(.5rem * var(--univer-tw-space-x-reverse))!important;margin-left:calc(.5rem * (1 - var(--univer-tw-space-x-reverse)))!important;margin-left:.5rem!important;margin-left:calc(.5rem * calc(1 - var(--univer-tw-space-x-reverse)))!important}.sm\\:\\!univer-rounded-lg{border-radius:.5rem!important}.sm\\:\\!univer-text-left{text-align:left!important}}@media(min-width:768px){.md\\:univer-grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}}.rtl\\:univer-left-px:where([dir=rtl],[dir=rtl] *){left:1px}.rtl\\:univer-right-auto:where([dir=rtl],[dir=rtl] *){right:auto}.rtl\\:univer-rounded-l-md:where([dir=rtl],[dir=rtl] *){border-top-left-radius:.375rem;border-bottom-left-radius:.375rem}.rtl\\:univer-rounded-r-none:where([dir=rtl],[dir=rtl] *){border-top-right-radius:0;border-bottom-right-radius:0}.rtl\\:univer-border-l-0:where([dir=rtl],[dir=rtl] *){border-left-width:0}.rtl\\:univer-border-r:where([dir=rtl],[dir=rtl] *){border-right-width:1px}.dark\\:\\!univer-border-gray-500:where(.univer-dark,.univer-dark *){border-color:var(--univer-gray-500)!important}.dark\\:\\!univer-border-primary-700:where(.univer-dark,.univer-dark *){border-color:var(--univer-primary-700)!important}.dark\\:\\!univer-bg-gray-100:where(.univer-dark,.univer-dark *){background-color:var(--univer-gray-100)!important}.dark\\:\\!univer-bg-primary-600:where(.univer-dark,.univer-dark *){background-color:var(--univer-primary-600)!important}.dark\\:\\!univer-text-gray-900:where(.univer-dark,.univer-dark *){color:var(--univer-gray-900)!important}.dark\\:\\!univer-text-primary-500:where(.univer-dark,.univer-dark *){color:var(--univer-primary-500)!important}.dark\\:\\!univer-text-sky-400:where(.univer-dark,.univer-dark *){--univer-tw-text-opacity: 1 !important;color:rgba(56,189,248,var(--univer-tw-text-opacity, 1))!important}.dark\\:\\!univer-ring-primary-600:where(.univer-dark,.univer-dark *){--univer-tw-ring-color: var(--univer-primary-600) !important}.dark\\:\\!univer-ring-primary-900:where(.univer-dark,.univer-dark *){--univer-tw-ring-color: var(--univer-primary-900) !important}.dark\\:\\!univer-ring-offset-gray-600:where(.univer-dark,.univer-dark *){--univer-tw-ring-offset-color: var(--univer-gray-600) !important}.dark\\:\\!univer-scrollbar-track-gray-900:where(.univer-dark,.univer-dark *){--scrollbar-track: var(--univer-gray-900) !important}.dark\\:\\!univer-scrollbar-thumb-gray-700:where(.univer-dark,.univer-dark *){--scrollbar-thumb: var(--univer-gray-700) !important}.dark\\:before\\:\\!univer-bg-gray-600:where(.univer-dark,.univer-dark *):before{content:var(--univer-tw-content);background-color:var(--univer-gray-600)!important}.dark\\:data-\\[state\\=open\\]\\:\\!univer-bg-gray-600[data-state=open]:where(.univer-dark,.univer-dark *){background-color:var(--univer-gray-600)!important}.dark\\:hover\\:\\!univer-text-white:hover:where(.univer-dark,.univer-dark *){color:var(--univer-white)!important}.dark\\:focus\\:\\!univer-border-primary-500:focus:where(.univer-dark,.univer-dark *){border-color:var(--univer-primary-500)!important}.dark\\:focus\\:\\!univer-bg-gray-600:focus:where(.univer-dark,.univer-dark *){background-color:var(--univer-gray-600)!important}.dark\\:focus\\:\\!univer-ring-primary-900:focus:where(.univer-dark,.univer-dark *){--univer-tw-ring-color: var(--univer-primary-900) !important}.dark\\:focus-visible\\:\\!univer-border-gray-600:focus-visible:where(.univer-dark,.univer-dark *){border-color:var(--univer-gray-600)!important}.dark\\:active\\:\\!univer-bg-gray-700:active:where(.univer-dark,.univer-dark *){background-color:var(--univer-gray-700)!important}.\\[\\&\\:\\:-webkit-calendar-picker-indicator\\]\\:univer-hidden::-webkit-calendar-picker-indicator{display:none}.\\[\\&\\:\\:-webkit-calendar-picker-indicator\\]\\:univer-appearance-none::-webkit-calendar-picker-indicator{-webkit-appearance:none;appearance:none}.\\[\\&\\>input\\]\\:univer-w-11>input{width:2.75rem}.\\[\\&\\>input\\]\\:univer-border-gray-200>input{border-color:var(--univer-gray-200)}.\\[\\&\\>input\\]\\:focus\\:univer-border-primary-500:focus>input{border-color:var(--univer-primary-500)}.dark\\:\\[\\&\\>input\\]\\:\\!univer-border-gray-600>input:where(.univer-dark,.univer-dark *){border-color:var(--univer-gray-600)!important}.dark\\:\\[\\&\\>input\\]\\:\\!univer-text-white>input:where(.univer-dark,.univer-dark *){color:var(--univer-white)!important}.\\[\\&\\>svg\\]\\:univer-block>svg{display:block}.\\[\\&\\>svg\\]\\:univer-size-4>svg{width:1rem;height:1rem}.\\[\\&\\>ul\\:not\\(\\:last-child\\)\\]\\:univer-border-0>ul:not(:last-child){border-width:0}.\\[\\&\\>ul\\:not\\(\\:last-child\\)\\]\\:univer-border-r>ul:not(:last-child){border-right-width:1px}.\\[\\&\\>ul\\:not\\(\\:last-child\\)\\]\\:univer-border-solid>ul:not(:last-child){border-style:solid}.\\[\\&\\>ul\\:not\\(\\:last-child\\)\\]\\:univer-border-r-gray-200>ul:not(:last-child){border-right-color:var(--univer-gray-200)}.\\[\\&_\\[data-description\\]\\]\\:univer-text-sm [data-description]{font-size:.875rem;line-height:1.25rem}.\\[\\&_\\[data-description\\]\\]\\:univer-text-gray-200 [data-description]{color:var(--univer-gray-200)}.\\[\\&_\\[data-description\\]\\]\\:univer-text-gray-600 [data-description]{color:var(--univer-gray-600)}.\\[\\&_\\[data-icon\\]\\>svg\\]\\:univer-relative [data-icon]>svg{position:relative}.\\[\\&_\\[data-icon\\]\\>svg\\]\\:univer-top-1 [data-icon]>svg{top:.25rem}.\\[\\&_\\[data-icon\\]\\]\\:univer-self-baseline [data-icon]{align-self:baseline}.\\[\\&_\\[data-icon\\]\\]\\:univer-text-amber-500 [data-icon]{--univer-tw-text-opacity: 1;color:rgba(245,158,11,var(--univer-tw-text-opacity, 1))}.\\[\\&_\\[data-icon\\]\\]\\:univer-text-green-500 [data-icon]{color:var(--univer-green-500)}.\\[\\&_\\[data-icon\\]\\]\\:univer-text-primary-600 [data-icon]{color:var(--univer-primary-600)}.\\[\\&_\\[data-icon\\]\\]\\:univer-text-red-500 [data-icon]{color:var(--univer-red-500)}.\\[\\&_\\[data-icon\\]\\]\\:univer-text-sky-500 [data-icon]{--univer-tw-text-opacity: 1;color:rgba(14,165,233,var(--univer-tw-text-opacity, 1))}.\\[\\&_\\[data-icon\\]\\]\\:univer-text-violet-500 [data-icon]{--univer-tw-text-opacity: 1;color:rgba(139,92,246,var(--univer-tw-text-opacity, 1))}.\\[\\&_\\[data-icon\\]\\]\\:univer-text-yellow-500 [data-icon]{color:var(--univer-yellow-500)}.\\[\\&_\\[data-sonner-toast\\]\\]\\:univer-rounded-2xl [data-sonner-toast]{border-radius:1rem}.\\[\\&_\\[data-sonner-toast\\]\\]\\:univer-border [data-sonner-toast]{border-width:1px}.\\[\\&_\\[data-sonner-toast\\]\\]\\:univer-border-solid [data-sonner-toast]{border-style:solid}.\\[\\&_\\[data-sonner-toast\\]\\]\\:univer-border-gray-200 [data-sonner-toast]{border-color:var(--univer-gray-200)}.\\[\\&_\\[data-sonner-toast\\]\\]\\:univer-shadow-\\[0_16px_40px_-20px_rgba\\(15\\,23\\,42\\,0\\.55\\)\\] [data-sonner-toast]{--univer-tw-shadow: 0 16px 40px -20px #0f172a8c;--univer-tw-shadow-colored: 0 16px 40px -20px var(--univer-tw-shadow-color);box-shadow:0 0 #0000,0 0 #0000,0 16px 40px -20px #0f172a8c;box-shadow:var(--univer-tw-ring-offset-shadow, 0 0 #0000),var(--univer-tw-ring-shadow, 0 0 #0000),var(--univer-tw-shadow)}.\\[\\&_\\[data-sonner-toast\\]\\]\\:univer-shadow-md [data-sonner-toast]{--univer-tw-shadow: 0px 1px 6px -2px #1e284d14, 0px 2px 6px -1px #1e284d1a;--univer-tw-shadow-colored: 0px 1px 6px -2px var(--univer-tw-shadow-color), 0px 2px 6px -1px var(--univer-tw-shadow-color);box-shadow:0 0 #0000,0 0 #0000,0 1px 6px -2px #1e284d14,0 2px 6px -1px #1e284d1a;box-shadow:var(--univer-tw-ring-offset-shadow, 0 0 #0000),var(--univer-tw-ring-shadow, 0 0 #0000),var(--univer-tw-shadow)}.\\[\\&_\\[data-sonner-toast\\]\\]\\:univer-backdrop-blur-sm [data-sonner-toast]{--univer-tw-backdrop-blur: blur(4px);backdrop-filter:var(--univer-tw-backdrop-blur) var(--univer-tw-backdrop-brightness) var(--univer-tw-backdrop-contrast) var(--univer-tw-backdrop-grayscale) var(--univer-tw-backdrop-hue-rotate) var(--univer-tw-backdrop-invert) var(--univer-tw-backdrop-opacity) var(--univer-tw-backdrop-saturate) var(--univer-tw-backdrop-sepia)}.dark\\:\\[\\&_\\[data-sonner-toast\\]\\]\\:\\!univer-border-gray-600 [data-sonner-toast]:where(.univer-dark,.univer-dark *){border-color:var(--univer-gray-600)!important}.\\[\\&_\\[data-title\\]\\]\\:univer-text-sm [data-title]{font-size:.875rem;line-height:1.25rem}.\\[\\&_\\[data-title\\]\\]\\:univer-text-gray-900 [data-title]{color:var(--univer-gray-900)}.\\[\\&_\\[data-u-comp\\=form-layout\\]\\]\\:univer-max-w-\\[calc\\(50\\%-8px\\)\\] [data-u-comp=form-layout]{max-width:calc(50% - 8px)}.\\[\\&_\\[data-u-comp\\=form-layout\\]\\]\\:univer-shrink [data-u-comp=form-layout]{flex-shrink:1}.\\[\\&_\\[data-u-comp\\=form-layout\\]\\]\\:univer-grow [data-u-comp=form-layout]{flex-grow:1}.\\[\\&_\\[data-u-comp\\=input\\]\\]\\:univer-w-full [data-u-comp=input]{width:100%}.\\[\\&_\\[data-u-comp\\=input\\]\\]\\:univer-border-red-500 [data-u-comp=input]{border-color:var(--univer-red-500)}.\\[\\&_\\[data-u-comp\\=pager-left-arrow\\]\\:hover\\]\\:\\!univer-bg-gray-600 [data-u-comp=pager-left-arrow]:hover,.\\[\\&_\\[data-u-comp\\=pager-right-arrow\\]\\:hover\\]\\:\\!univer-bg-gray-600 [data-u-comp=pager-right-arrow]:hover{background-color:var(--univer-gray-600)!important}.\\[\\&_\\[data-u-comp\\=select\\]\\]\\:univer-w-full [data-u-comp=select]{width:100%}.\\[\\&_\\[data-u-comp\\=select\\]\\]\\:univer-border-red-500 [data-u-comp=select]{border-color:var(--univer-red-500)}.\\[\\&_input\\]\\:univer-box-border input{box-sizing:border-box}.\\[\\&_input\\]\\:univer-flex input{display:flex}.\\[\\&_input\\]\\:univer-h-7 input{height:1.75rem}.\\[\\&_input\\]\\:univer-items-center input{align-items:center}.\\[\\&_input\\]\\:univer-rounded input{border-radius:.25rem}.\\[\\&_input\\]\\:univer-border input{border-width:1px}.\\[\\&_input\\]\\:univer-border-solid input{border-style:solid}.\\[\\&_input\\]\\:univer-border-gray-200 input{border-color:var(--univer-gray-200)}.\\[\\&_input\\]\\:univer-border-gray-600 input{border-color:var(--univer-gray-600)}.\\[\\&_input\\]\\:univer-bg-transparent input{background-color:#0000}.\\[\\&_input\\]\\:univer-px-1\\.5 input{padding-left:.375rem;padding-right:.375rem}.\\[\\&_input\\]\\:univer-text-gray-700 input{color:var(--univer-gray-700)}.\\[\\&_input\\]\\:univer-text-white input{color:var(--univer-white)}.\\[\\&_input\\]\\:univer-outline-none input{outline-offset:2px;outline:2px solid #0000}.\\[\\&_svg\\]\\:univer-pointer-events-none svg{pointer-events:none}.\\[\\&_svg\\]\\:univer-size-4 svg{width:1rem;height:1rem}.\\[\\&_svg\\]\\:univer-shrink-0 svg{flex-shrink:0}.univer-popup{z-index:1070;--univer-tw-shadow: 0 1px 3px 0 #0000001a, 0 1px 2px -1px #0000001a;--univer-tw-shadow-colored: 0 1px 3px 0 var(--univer-tw-shadow-color), 0 1px 2px -1px var(--univer-tw-shadow-color);box-shadow:0 0 #0000,0 0 #0000,0 1px 3px #0000001a,0 1px 2px -1px #0000001a;box-shadow:var(--univer-tw-ring-offset-shadow, 0 0 #0000),var(--univer-tw-ring-shadow, 0 0 #0000),var(--univer-tw-shadow);border-radius:6px;position:fixed;top:-9999px;left:-9999px;overflow:hidden}.univer-popup-enter{transform-origin:0 0;opacity:0;animation-duration:.15s;animation-timing-function:cubic-bezier(.08,.82,.17,1);animation-play-state:paused;animation-fill-mode:both}.univer-popup-enter-active{animation-name:popup-slide-up-in;animation-play-state:running}.univer-popup-exit{transform-origin:0 0;opacity:1;animation-name:popup-slide-up-out;animation-duration:.15s;animation-timing-function:cubic-bezier(.6,.04,.98,.34);animation-play-state:running;animation-fill-mode:both}.univer-popup-exit-active{display:none}@keyframes popup-slide-up-in{0%{transform-origin:0 0;opacity:0;transform:scaleY(0)}to{transform-origin:0 0;opacity:1;transform:scaleY(1)}}@keyframes popup-slide-up-out{0%{transform-origin:0 0;opacity:1;transform:scaleY(1)}to{transform-origin:0 0;opacity:0;transform:scaleY(0)}}.univer-popup-mask{z-index:1060;position:fixed;inset:0}.univer-pointer-events-auto{pointer-events:auto}.univer-invisible{visibility:hidden}.univer-sticky{position:sticky}.-univer-left-\\[99999\\]{left:-99999px}.-univer-top-\\[99999\\]{top:-99999px}.univer-left-1\\/2{left:50%}.univer-left-\\[-9999px\\]{left:-9999px}.univer-right-2{right:.5rem}.univer-top-\\[-9999px\\]{top:-9999px}.univer-top-\\[calc\\(50\\%-6px\\)\\]{top:calc(50% - 6px)}.univer-z-20{z-index:20}.univer-z-\\[-1\\]{z-index:-1}.univer-z-\\[1020\\]{z-index:1020}.univer-z-\\[1080\\]{z-index:1080}.univer-z-\\[1\\]{z-index:1}.univer-mx-2{margin-left:.5rem;margin-right:.5rem}.univer-mx-auto{margin-left:auto;margin-right:auto}.univer-mt-6{margin-top:1.5rem}.univer-line-clamp-2{-webkit-line-clamp:2;-webkit-box-orient:vertical;display:-webkit-box;overflow:hidden}.\\!univer-size-3\\.5{width:.875rem!important;height:.875rem!important}.univer-size-12{width:3rem;height:3rem}.univer-size-3\\.5{width:.875rem;height:.875rem}.univer-size-7{width:1.75rem;height:1.75rem}.univer-size-9{width:2.25rem;height:2.25rem}.univer-h-0{height:0}.univer-h-1\\.5{height:.375rem}.univer-max-h-\\[80vh\\]{max-height:80vh}.univer-max-h-\\[min\\(72vh\\,560px\\)\\]{max-height:min(72vh,560px)}.univer-min-h-\\[560px\\]{min-height:560px}.univer-min-h-\\[56px\\]{min-height:56px}.univer-min-h-full{min-height:100%}.univer-w-0{width:0}.univer-w-1{width:.25rem}.univer-w-10{width:2.5rem}.univer-w-40{width:10rem}.univer-w-7{width:1.75rem}.univer-w-8{width:2rem}.univer-w-96{width:24rem}.univer-w-max{width:max-content}.univer-w-screen{width:100vw}.univer-min-w-52{min-width:13rem}.univer-min-w-6{min-width:1.5rem}.univer-min-w-min{min-width:min-content}.univer-max-w-3xl{max-width:48rem}.univer-max-w-5xl{max-width:64rem}.univer-max-w-96{max-width:24rem}.univer-max-w-\\[--radix-popper-available-width\\]{max-width:var(--radix-popper-available-width)}.univer-max-w-\\[32\\%\\]{max-width:32%}.univer-max-w-\\[560px\\]{max-width:560px}.univer-max-w-\\[calc\\(100vw-16px\\)\\]{max-width:calc(100vw - 16px)}.univer-max-w-full{max-width:100%}.univer-origin-center{transform-origin:center}.-univer-translate-x-1\\/2{--univer-tw-translate-x: -50%;transform:translate(-50%,var(--univer-tw-translate-y)) rotate(var(--univer-tw-rotate)) skew(var(--univer-tw-skew-x)) skewY(var(--univer-tw-skew-y)) scaleX(var(--univer-tw-scale-x)) scaleY(var(--univer-tw-scale-y));transform:translate(var(--univer-tw-translate-x),var(--univer-tw-translate-y)) rotate(var(--univer-tw-rotate)) skew(var(--univer-tw-skew-x)) skewY(var(--univer-tw-skew-y)) scaleX(var(--univer-tw-scale-x)) scaleY(var(--univer-tw-scale-y))}.univer-translate-x-0{--univer-tw-translate-x: 0px;transform:translateY(var(--univer-tw-translate-y)) rotate(var(--univer-tw-rotate)) skew(var(--univer-tw-skew-x)) skewY(var(--univer-tw-skew-y)) scaleX(var(--univer-tw-scale-x)) scaleY(var(--univer-tw-scale-y));transform:translate(var(--univer-tw-translate-x),var(--univer-tw-translate-y)) rotate(var(--univer-tw-rotate)) skew(var(--univer-tw-skew-x)) skewY(var(--univer-tw-skew-y)) scaleX(var(--univer-tw-scale-x)) scaleY(var(--univer-tw-scale-y))}.univer-translate-x-full{--univer-tw-translate-x: 100%;transform:translate(100%,var(--univer-tw-translate-y)) rotate(var(--univer-tw-rotate)) skew(var(--univer-tw-skew-x)) skewY(var(--univer-tw-skew-y)) scaleX(var(--univer-tw-scale-x)) scaleY(var(--univer-tw-scale-y));transform:translate(var(--univer-tw-translate-x),var(--univer-tw-translate-y)) rotate(var(--univer-tw-rotate)) skew(var(--univer-tw-skew-x)) skewY(var(--univer-tw-skew-y)) scaleX(var(--univer-tw-scale-x)) scaleY(var(--univer-tw-scale-y))}.univer-cursor-col-resize{cursor:col-resize}.univer-grid-cols-\\[1fr\\]{grid-template-columns:1fr}.univer-grid-cols-\\[22px_minmax\\(0\\,1fr\\)_22px\\]{grid-template-columns:22px minmax(0,1fr) 22px}.univer-grid-cols-\\[28px_minmax\\(0\\,1fr\\)_auto\\]{grid-template-columns:28px minmax(0,1fr) auto}.univer-grid-cols-\\[32px_minmax\\(0\\,1fr\\)_32px\\]{grid-template-columns:32px minmax(0,1fr) 32px}.univer-grid-cols-\\[auto\\,1fr\\]{grid-template-columns:auto 1fr}.univer-grid-cols-\\[auto_1fr_auto\\]{grid-template-columns:auto 1fr auto}.univer-grid-rows-\\[100\\%\\]{grid-template-rows:100%}.univer-grid-rows-\\[auto_1fr\\]{grid-template-rows:auto 1fr}.univer-grid-rows-\\[auto_1fr_auto\\]{grid-template-rows:auto 1fr auto}.univer-flex-wrap{flex-wrap:wrap}.univer-items-end{align-items:flex-end}.univer-gap-0\\.5{gap:.125rem}.univer-overscroll-contain{overscroll-behavior:contain}.univer-scroll-smooth{scroll-behavior:smooth}.\\!univer-rounded-full{border-radius:9999px!important}.\\!univer-rounded-xl{border-radius:.75rem!important}.univer-rounded-2xl{border-radius:1rem}.univer-rounded-3xl{border-radius:1.5rem}.univer-rounded-xl{border-radius:.75rem}.univer-rounded-r{border-top-right-radius:.25rem;border-bottom-right-radius:.25rem}.univer-rounded-t-\\[28px\\]{border-top-left-radius:28px;border-top-right-radius:28px}.univer-border-0{border-width:0}.\\!univer-bg-gray-200{background-color:var(--univer-gray-200)!important}.\\!univer-bg-gray-500{background-color:var(--univer-gray-500)!important}.univer-bg-\\[rgba\\(15\\,23\\,42\\,0\\.32\\)\\]{background-color:#0f172a52}.univer-bg-gray-300{background-color:var(--univer-gray-300)}.univer-bg-gray-50{background-color:var(--univer-gray-50)}.univer-bg-gray-700{background-color:var(--univer-gray-700)}.univer-bg-primary-50{background-color:var(--univer-primary-50)}.univer-bg-gradient-to-tr{background-image:linear-gradient(to top right,var(--univer-tw-gradient-stops))}.univer-from-slate-950{--univer-tw-gradient-from: #020617 var(--univer-tw-gradient-from-position);--univer-tw-gradient-to: #02061700 var(--univer-tw-gradient-to-position);--univer-tw-gradient-stops: var(--univer-tw-gradient-from), var(--univer-tw-gradient-to)}.univer-via-blue-950{--univer-tw-gradient-to: #17255400 var(--univer-tw-gradient-to-position);--univer-tw-gradient-stops: var(--univer-tw-gradient-from), #172554 var(--univer-tw-gradient-via-position), var(--univer-tw-gradient-to)}.univer-to-cyan-900{--univer-tw-gradient-to: #164e63 var(--univer-tw-gradient-to-position)}.univer-p-8{padding:2rem}.univer-px-0{padding-left:0;padding-right:0}.univer-px-0\\.5{padding-left:.125rem;padding-right:.125rem}.univer-px-3{padding-left:.75rem;padding-right:.75rem}.univer-pb-2{padding-bottom:.5rem}.univer-pl-2{padding-left:.5rem}.univer-pl-4{padding-left:1rem}.univer-pr-1\\.5{padding-right:.375rem}.univer-pt-3{padding-top:.75rem}.univer-text-left{text-align:left}.univer-text-right{text-align:right}.univer-font-sans{font-family:ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,Noto Sans,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol,Noto Color Emoji}.univer-text-2xl{font-size:1.5rem;line-height:2rem}.univer-uppercase{text-transform:uppercase}.univer-leading-4{line-height:1rem}.univer-leading-none{line-height:1}.univer-tracking-\\[0\\.08em\\]{letter-spacing:.08em}.univer-tracking-tight{letter-spacing:-.025em}.\\!univer-text-gray-600{color:var(--univer-gray-600)!important}.univer-text-current{color:currentColor}.univer-text-slate-200{--univer-tw-text-opacity: 1;color:rgba(226,232,240,var(--univer-tw-text-opacity, 1))}.univer-underline{text-decoration-line:underline}.univer-opacity-0{opacity:0}.univer-opacity-30{opacity:.3}.univer-opacity-40{opacity:.4}.univer-opacity-60{opacity:.6}.univer-shadow-\\[0_-16px_48px_rgba\\(15\\,23\\,42\\,0\\.18\\)\\]{--univer-tw-shadow: 0 -16px 48px #0f172a2e;--univer-tw-shadow-colored: 0 -16px 48px var(--univer-tw-shadow-color);box-shadow:0 0 #0000,0 0 #0000,0 -16px 48px #0f172a2e;box-shadow:var(--univer-tw-ring-offset-shadow, 0 0 #0000),var(--univer-tw-ring-shadow, 0 0 #0000),var(--univer-tw-shadow)}.univer-ring-0{--univer-tw-ring-offset-shadow: var(--univer-tw-ring-inset) 0 0 0 var(--univer-tw-ring-offset-width) var(--univer-tw-ring-offset-color);--univer-tw-ring-shadow: var(--univer-tw-ring-inset) 0 0 0 calc(0px + var(--univer-tw-ring-offset-width)) var(--univer-tw-ring-color);box-shadow:var(--univer-tw-ring-offset-shadow),var(--univer-tw-ring-shadow),0 0 #0000;box-shadow:var(--univer-tw-ring-offset-shadow),var(--univer-tw-ring-shadow),var(--univer-tw-shadow, 0 0 #0000)}.univer-ring-primary-600{--univer-tw-ring-color: var(--univer-primary-600)}.univer-backdrop-blur-\\[2px\\]{--univer-tw-backdrop-blur: blur(2px);backdrop-filter:var(--univer-tw-backdrop-blur) var(--univer-tw-backdrop-brightness) var(--univer-tw-backdrop-contrast) var(--univer-tw-backdrop-grayscale) var(--univer-tw-backdrop-hue-rotate) var(--univer-tw-backdrop-invert) var(--univer-tw-backdrop-opacity) var(--univer-tw-backdrop-saturate) var(--univer-tw-backdrop-sepia)}.univer-backdrop-blur-xl{--univer-tw-backdrop-blur: blur(24px);backdrop-filter:var(--univer-tw-backdrop-blur) var(--univer-tw-backdrop-brightness) var(--univer-tw-backdrop-contrast) var(--univer-tw-backdrop-grayscale) var(--univer-tw-backdrop-hue-rotate) var(--univer-tw-backdrop-invert) var(--univer-tw-backdrop-opacity) var(--univer-tw-backdrop-saturate) var(--univer-tw-backdrop-sepia)}.univer-transition-\\[width\\]{transition-property:width;transition-duration:.15s;transition-timing-function:cubic-bezier(.4,0,.2,1)}@keyframes enter{0%{opacity:1;opacity:var(--univer-tw-enter-opacity, 1);transform:translateZ(0) scaleZ(1) rotate(0);transform:translate3d(var(--univer-tw-enter-translate-x, 0),var(--univer-tw-enter-translate-y, 0),0) scale3d(var(--univer-tw-enter-scale, 1),var(--univer-tw-enter-scale, 1),var(--univer-tw-enter-scale, 1)) rotate(var(--univer-tw-enter-rotate, 0))}}@keyframes exit{to{opacity:1;opacity:var(--univer-tw-exit-opacity, 1);transform:translateZ(0) scaleZ(1) rotate(0);transform:translate3d(var(--univer-tw-exit-translate-x, 0),var(--univer-tw-exit-translate-y, 0),0) scale3d(var(--univer-tw-exit-scale, 1),var(--univer-tw-exit-scale, 1),var(--univer-tw-exit-scale, 1)) rotate(var(--univer-tw-exit-rotate, 0))}}.univer-animate-in{--univer-tw-enter-opacity: initial;--univer-tw-enter-scale: initial;--univer-tw-enter-rotate: initial;--univer-tw-enter-translate-x: initial;--univer-tw-enter-translate-y: initial;animation-name:enter;animation-duration:.15s}.univer-fade-in{--univer-tw-enter-opacity: 0}.univer-fade-in-70{--univer-tw-enter-opacity: .7}.last\\:univer-border-b-0:last-child{border-bottom-width:0}.empty\\:univer-hidden:empty{display:none}.hover\\:univer-opacity-50:hover{opacity:.5}.focus\\:univer-bg-white:focus{background-color:var(--univer-white)}.focus\\:univer-ring-2:focus{--univer-tw-ring-offset-shadow: var(--univer-tw-ring-inset) 0 0 0 var(--univer-tw-ring-offset-width) var(--univer-tw-ring-offset-color);--univer-tw-ring-shadow: var(--univer-tw-ring-inset) 0 0 0 calc(2px + var(--univer-tw-ring-offset-width)) var(--univer-tw-ring-color);box-shadow:var(--univer-tw-ring-offset-shadow),var(--univer-tw-ring-shadow),0 0 #0000;box-shadow:var(--univer-tw-ring-offset-shadow),var(--univer-tw-ring-shadow),var(--univer-tw-shadow, 0 0 #0000)}.focus-visible\\:univer-ring-primary-600:focus-visible{--univer-tw-ring-color: var(--univer-primary-600)}.focus-visible\\:univer-ring-offset-0:focus-visible{--univer-tw-ring-offset-width: 0px}.active\\:univer-bg-gray-200:active{background-color:var(--univer-gray-200)}.enabled\\:hover\\:univer-bg-gray-50:hover:enabled{background-color:var(--univer-gray-50)}.enabled\\:active\\:univer-bg-gray-100:active:enabled{background-color:var(--univer-gray-100)}.disabled\\:univer-cursor-not-allowed:disabled{cursor:not-allowed}.disabled\\:univer-text-gray-300:disabled{color:var(--univer-gray-300)}.disabled\\:univer-opacity-40:disabled{opacity:.4}.disabled\\:hover\\:univer-bg-transparent:hover:disabled{background-color:#0000}@media(min-width:640px){.sm\\:\\!univer-block{display:block!important}}.rtl\\:univer-pl-1\\.5:where([dir=rtl],[dir=rtl] *){padding-left:.375rem}.rtl\\:univer-pr-0:where([dir=rtl],[dir=rtl] *){padding-right:0}.rtl\\:univer-pr-2:where([dir=rtl],[dir=rtl] *){padding-right:.5rem}.dark\\:\\!univer-bg-gray-200:where(.univer-dark,.univer-dark *){background-color:var(--univer-gray-200)!important}.dark\\:\\!univer-bg-primary-400:where(.univer-dark,.univer-dark *){background-color:var(--univer-primary-400)!important}.dark\\:\\!univer-text-gray-500:where(.univer-dark,.univer-dark *){color:var(--univer-gray-500)!important}.dark\\:\\!univer-text-gray-600:where(.univer-dark,.univer-dark *){color:var(--univer-gray-600)!important}.dark\\:\\!univer-text-gray-800:where(.univer-dark,.univer-dark *){color:var(--univer-gray-800)!important}.dark\\:\\!univer-text-primary-100:where(.univer-dark,.univer-dark *){color:var(--univer-primary-100)!important}.dark\\:\\!univer-text-primary-300:where(.univer-dark,.univer-dark *){color:var(--univer-primary-300)!important}.dark\\:\\!univer-text-primary-400:where(.univer-dark,.univer-dark *){color:var(--univer-primary-400)!important}.dark\\:hover\\:\\!univer-bg-gray-900:hover:where(.univer-dark,.univer-dark *){background-color:var(--univer-gray-900)!important}.dark\\:hover\\:\\!univer-bg-transparent:hover:where(.univer-dark,.univer-dark *){background-color:#0000!important}.dark\\:active\\:\\!univer-bg-gray-600:active:where(.univer-dark,.univer-dark *){background-color:var(--univer-gray-600)!important}.dark\\:disabled\\:\\!univer-text-gray-600:disabled:where(.univer-dark,.univer-dark *){color:var(--univer-gray-600)!important}.\\[\\&\\:\\:-webkit-scrollbar\\]\\:univer-hidden::-webkit-scrollbar{display:none}.\\[\\&\\>\\*\\]\\:univer-m-0>*{margin:0}.\\[\\&\\>\\*\\]\\:univer-inline-flex>*{display:inline-flex}.\\[\\&\\>\\*\\]\\:univer-h-6>*{height:1.5rem}.\\[\\&\\>\\*\\]\\:univer-min-h-7>*{min-height:1.75rem}.\\[\\&\\>\\*\\]\\:univer-min-w-7>*{min-width:1.75rem}.\\[\\&\\>\\*\\]\\:univer-appearance-none>*{-webkit-appearance:none;appearance:none}.\\[\\&\\>\\*\\]\\:univer-items-center>*{align-items:center}.\\[\\&\\>\\*\\]\\:univer-justify-center>*{justify-content:center}.\\[\\&\\>\\*\\]\\:univer-rounded>*{border-radius:.25rem}.\\[\\&\\>\\*\\]\\:univer-rounded-md>*{border-radius:.375rem}.\\[\\&\\>\\*\\]\\:univer-border-0>*{border-width:0}.\\[\\&\\>\\*\\]\\:univer-px-1>*{padding-left:.25rem;padding-right:.25rem}.\\[\\&\\>\\*\\]\\:univer-px-1\\.5>*{padding-left:.375rem;padding-right:.375rem}.\\[\\&\\>\\*\\]\\:univer-leading-none>*{line-height:1}.\\[\\&\\>\\*\\]\\:univer-outline-none>*{outline-offset:2px;outline:2px solid #0000}.\\[\\&\\>\\*\\]\\:univer-transition-colors>*{transition-property:color,background-color,border-color,text-decoration-color,fill,stroke;transition-duration:.15s;transition-timing-function:cubic-bezier(.4,0,.2,1)}.hover\\:\\[\\&\\>\\*\\]\\:univer-bg-gray-100>:hover{background-color:var(--univer-gray-100)}.\\[\\&\\>span\\]\\:univer-truncate>span{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.\\[\\&\\>span\\]\\:univer-text-sm>span{font-size:.875rem;line-height:1.25rem}.\\[\\&\\>span\\]\\:univer-font-medium>span{font-weight:500}.\\[\\&\\>svg\\]\\:univer-shrink-0>svg{flex-shrink:0}.\\[\\&\\>svg\\]\\:univer-text-lg>svg{font-size:1.125rem;line-height:1.75rem}.\\[\\&\\>svg\\]\\:univer-text-gray-700>svg{color:var(--univer-gray-700)}.\\[\\&_\\*\\]\\:univer-box-border *{box-sizing:border-box}.\\[\\&_\\.univer-custom-label\\]\\:univer-text-sm .univer-custom-label{font-size:.875rem;line-height:1.25rem}.\\[\\&_\\.univer-custom-label\\]\\:univer-leading-none .univer-custom-label{line-height:1}.\\[\\&_\\.univer-toolbar-button-selector-main\\]\\:\\!univer-h-8 .univer-toolbar-button-selector-main{height:2rem!important}.\\[\\&_\\.univer-toolbar-button-selector-main\\]\\:\\!univer-rounded-none .univer-toolbar-button-selector-main{border-radius:0!important}.\\[\\&_\\.univer-toolbar-button-selector-main\\]\\:\\!univer-rounded-l-md .univer-toolbar-button-selector-main{border-top-left-radius:.375rem!important;border-bottom-left-radius:.375rem!important}.\\[\\&_\\.univer-toolbar-button-selector-main\\]\\:\\!univer-px-1\\.5 .univer-toolbar-button-selector-main{padding-left:.375rem!important;padding-right:.375rem!important}.\\[\\&_\\.univer-toolbar-button-selector-root\\]\\:\\!univer-h-8 .univer-toolbar-button-selector-root{height:2rem!important}.\\[\\&_\\.univer-toolbar-button-selector-root\\]\\:univer-overflow-hidden .univer-toolbar-button-selector-root{overflow:hidden}.\\[\\&_\\.univer-toolbar-button-selector-root\\]\\:\\!univer-rounded-md .univer-toolbar-button-selector-root{border-radius:.375rem!important}.\\[\\&_\\.univer-toolbar-button-selector-root\\]\\:\\!univer-pr-0 .univer-toolbar-button-selector-root{padding-right:0!important}.\\[\\&_\\.univer-toolbar-button-selector-trigger\\]\\:\\!univer-static .univer-toolbar-button-selector-trigger{position:static!important}.\\[\\&_\\.univer-toolbar-button-selector-trigger\\]\\:\\!univer-h-8 .univer-toolbar-button-selector-trigger{height:2rem!important}.\\[\\&_\\.univer-toolbar-button-selector-trigger\\]\\:\\!univer-w-6 .univer-toolbar-button-selector-trigger{width:1.5rem!important}.\\[\\&_\\.univer-toolbar-button-selector-trigger\\]\\:\\!univer-rounded-none .univer-toolbar-button-selector-trigger{border-radius:0!important}.\\[\\&_\\.univer-toolbar-button-selector-trigger\\]\\:\\!univer-rounded-r-md .univer-toolbar-button-selector-trigger{border-top-right-radius:.375rem!important;border-bottom-right-radius:.375rem!important}.\\[\\&_\\.univer-toolbar-selector-root\\]\\:\\!univer-h-8 .univer-toolbar-selector-root{height:2rem!important}.\\[\\&_\\.univer-toolbar-selector-root\\]\\:\\!univer-gap-1 .univer-toolbar-selector-root{gap:.25rem!important}.\\[\\&_\\.univer-toolbar-selector-root\\]\\:\\!univer-rounded-md .univer-toolbar-selector-root{border-radius:.375rem!important}.\\[\\&_\\.univer-toolbar-selector-root\\]\\:\\!univer-px-1\\.5 .univer-toolbar-selector-root{padding-left:.375rem!important;padding-right:.375rem!important}.\\[\\&_\\.univer-toolbar-selector-trigger\\]\\:\\!univer-pl-0\\.5 .univer-toolbar-selector-trigger{padding-left:.125rem!important}.\\[\\&_\\.univer-tooltip\\]\\:univer-inline-flex .univer-tooltip{display:inline-flex}.\\[\\&_\\.univer-tooltip\\]\\:univer-h-full .univer-tooltip{height:100%}.\\[\\&_\\.univer-tooltip\\]\\:univer-items-center .univer-tooltip{align-items:center}.\\[\\&_\\[data-u-command\\]\\]\\:\\!univer-h-8 [data-u-command]{height:2rem!important}.\\[\\&_\\[data-u-command\\]\\]\\:\\!univer-min-h-8 [data-u-command]{min-height:2rem!important}.\\[\\&_\\[data-u-command\\]\\]\\:\\!univer-rounded-md [data-u-command]{border-radius:.375rem!important}.\\[\\&_\\[data-u-command\\]\\]\\:\\!univer-px-1\\.5 [data-u-command]{padding-left:.375rem!important;padding-right:.375rem!important}.\\[\\&_button\\]\\:\\!univer-m-0 button{margin:0!important}.\\[\\&_button\\]\\:\\!univer-h-8 button{height:2rem!important}.\\[\\&_button\\]\\:\\!univer-min-w-8 button{min-width:2rem!important}.\\[\\&_button\\]\\:\\!univer-appearance-none button{-webkit-appearance:none!important;appearance:none!important}.\\[\\&_button\\]\\:\\!univer-rounded-md button{border-radius:.375rem!important}.\\[\\&_button\\]\\:\\!univer-border-0 button{border-width:0!important}.\\[\\&_button\\]\\:\\!univer-bg-transparent button{background-color:#0000!important}.\\[\\&_button\\]\\:\\!univer-p-0 button{padding:0!important}.\\[\\&_button\\]\\:\\!univer-px-1\\.5 button{padding-left:.375rem!important;padding-right:.375rem!important}.\\[\\&_button\\]\\:\\!univer-leading-none button{line-height:1!important}.\\[\\&_button\\]\\:\\!univer-outline-none button{outline-offset:2px!important;outline:2px solid #0000!important}.\\[\\&_input\\:focus\\]\\:\\!univer-ring-0 input:focus{--univer-tw-ring-offset-shadow: var(--univer-tw-ring-inset) 0 0 0 var(--univer-tw-ring-offset-width) var(--univer-tw-ring-offset-color) !important;--univer-tw-ring-shadow: var(--univer-tw-ring-inset) 0 0 0 calc(0px + var(--univer-tw-ring-offset-width)) var(--univer-tw-ring-color) !important;box-shadow:var(--univer-tw-ring-offset-shadow),var(--univer-tw-ring-shadow),0 0 #0000!important;box-shadow:var(--univer-tw-ring-offset-shadow),var(--univer-tw-ring-shadow),var(--univer-tw-shadow, 0 0 #0000)!important}.\\[\\&_input\\]\\:\\!univer-m-0 input{margin:0!important}.\\[\\&_input\\]\\:univer-h-6 input{height:1.5rem}.\\[\\&_input\\]\\:univer-w-7 input{width:1.75rem}.\\[\\&_input\\]\\:\\!univer-appearance-none input{-webkit-appearance:none!important;appearance:none!important}.\\[\\&_input\\]\\:\\!univer-border-0 input{border-width:0!important}.\\[\\&_input\\]\\:univer-border-none input{border-style:none}.\\[\\&_input\\]\\:\\!univer-bg-transparent input{background-color:#0000!important}.\\[\\&_input\\]\\:\\!univer-p-0 input{padding:0!important}.\\[\\&_input\\]\\:univer-p-0 input{padding:0}.\\[\\&_input\\]\\:univer-text-sm input{font-size:.875rem;line-height:1.25rem}.\\[\\&_input\\]\\:\\!univer-leading-none input{line-height:1!important}.\\[\\&_input\\]\\:\\!univer-outline-none input{outline-offset:2px!important;outline:2px solid #0000!important}.univer-fixed{position:fixed}.univer-bottom-0{bottom:0}.univer-left-5{left:1.25rem}.univer-left-\\[5px\\]{left:5px}.univer-top-4{top:1rem}.univer-top-\\[5px\\]{top:5px}.univer-z-\\[10000\\]{z-index:10000}.univer-mb-1{margin-bottom:.25rem}.univer-mr-1{margin-right:.25rem}.univer-mt-1\\.5{margin-top:.375rem}.univer-mt-12{margin-top:3rem}.univer-mt-5{margin-top:1.25rem}.univer-size-0\\.5{width:.125rem;height:.125rem}.univer-size-3{width:.75rem;height:.75rem}.univer-size-5{width:1.25rem;height:1.25rem}.univer-size-8{width:2rem;height:2rem}.univer-h-16{height:4rem}.univer-h-3\\.5{height:.875rem}.univer-h-\\[24px\\]{height:24px}.univer-min-h-8{min-height:2rem}.univer-w-2{width:.5rem}.univer-w-2\\.5{width:.625rem}.univer-w-28{width:7rem}.univer-w-4\\/5{width:80%}.univer-w-\\[0px\\]{width:0}.univer-w-\\[212px\\]{width:212px}.univer-w-\\[72px\\]{width:72px}.univer-min-w-\\[180px\\]{min-width:180px}.univer-flex-shrink-0{flex-shrink:0}.univer-cursor-grab{cursor:grab}.univer-grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}.univer-grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}.univer-grid-cols-4{grid-template-columns:repeat(4,minmax(0,1fr))}.univer-place-items-center{place-items:center}.univer-items-stretch{align-items:stretch}.univer-gap-2\\.5{gap:.625rem}.univer-gap-3{gap:.75rem}.univer-gap-x-0\\.5{-moz-column-gap:.125rem;column-gap:.125rem}.univer-gap-y-px{row-gap:1px}.univer-overflow-x-hidden{overflow-x:hidden}.univer-rounded-r-2xl{border-top-right-radius:1rem;border-bottom-right-radius:1rem}.\\!univer-border-primary-500{border-color:var(--univer-primary-500)!important}.univer-border-primary-500{border-color:var(--univer-primary-500)}.\\!univer-bg-primary-50{background-color:var(--univer-primary-50)!important}.\\!univer-bg-primary-900{background-color:var(--univer-primary-900)!important}.univer-bg-gray-400{background-color:var(--univer-gray-400)}.univer-px-2\\.5{padding-left:.625rem;padding-right:.625rem}.univer-py-0{padding-top:0;padding-bottom:0}.univer-pb-0\\.5{padding-bottom:.125rem}.univer-pb-4{padding-bottom:1rem}.univer-pr-1{padding-right:.25rem}.univer-pr-2{padding-right:.5rem}.univer-pt-1\\.5{padding-top:.375rem}.univer-pt-14{padding-top:3.5rem}.univer-text-lg{font-size:1.125rem;line-height:1.75rem}.univer-font-\\[500\\],.univer-font-medium{font-weight:500}.univer-font-normal{font-weight:400}.univer-leading-\\[24px\\]{line-height:24px}.\\!univer-text-gray-200{color:var(--univer-gray-200)!important}.\\!univer-text-gray-400{color:var(--univer-gray-400)!important}.\\!univer-text-primary-600{color:var(--univer-primary-600)!important}.univer-text-gray-800{color:var(--univer-gray-800)}.univer-shadow-sm{--univer-tw-shadow: 0px 1px 2px 0px #1e284d14;--univer-tw-shadow-colored: 0px 1px 2px 0px var(--univer-tw-shadow-color);box-shadow:0 0 #0000,0 0 #0000,0 1px 2px #1e284d14;box-shadow:var(--univer-tw-ring-offset-shadow, 0 0 #0000),var(--univer-tw-ring-shadow, 0 0 #0000),var(--univer-tw-shadow)}.univer-backdrop-blur-\\[10px\\]{--univer-tw-backdrop-blur: blur(10px);backdrop-filter:var(--univer-tw-backdrop-blur) var(--univer-tw-backdrop-brightness) var(--univer-tw-backdrop-contrast) var(--univer-tw-backdrop-grayscale) var(--univer-tw-backdrop-hue-rotate) var(--univer-tw-backdrop-invert) var(--univer-tw-backdrop-opacity) var(--univer-tw-backdrop-saturate) var(--univer-tw-backdrop-sepia)}.univer-duration-300{transition-duration:.3s}.univer-group:hover .group-hover\\:univer-bg-gray-500{background-color:var(--univer-gray-500)}.hover\\:univer-border-primary-500:hover{border-color:var(--univer-primary-500)}.hover\\:univer-bg-white:hover{background-color:var(--univer-white)}.hover\\:univer-text-gray-900:hover{color:var(--univer-gray-900)}.hover\\:univer-text-primary-600:hover{color:var(--univer-primary-600)}.hover\\:univer-shadow-md:hover{--univer-tw-shadow: 0px 1px 6px -2px #1e284d14, 0px 2px 6px -1px #1e284d1a;--univer-tw-shadow-colored: 0px 1px 6px -2px var(--univer-tw-shadow-color), 0px 2px 6px -1px var(--univer-tw-shadow-color);box-shadow:0 0 #0000,0 0 #0000,0 1px 6px -2px #1e284d14,0 2px 6px -1px #1e284d1a;box-shadow:var(--univer-tw-ring-offset-shadow, 0 0 #0000),var(--univer-tw-ring-shadow, 0 0 #0000),var(--univer-tw-shadow)}.active\\:univer-cursor-grabbing:active{cursor:grabbing}.dark\\:\\!univer-border-gray-600:where(.univer-dark,.univer-dark *){border-color:var(--univer-gray-600)!important}.dark\\:\\!univer-bg-gray-500:where(.univer-dark,.univer-dark *){background-color:var(--univer-gray-500)!important}.dark\\:\\!univer-bg-primary-900:where(.univer-dark,.univer-dark *){background-color:var(--univer-primary-900)!important}.dark\\:\\!univer-text-gray-100:where(.univer-dark,.univer-dark *){color:var(--univer-gray-100)!important}.univer-group:hover .dark\\:group-hover\\:\\!univer-bg-gray-300:where(.univer-dark,.univer-dark *){background-color:var(--univer-gray-300)!important}.univer-pointer-events-none{pointer-events:none}.univer-inset-0{inset:0}.-univer-bottom-0\\.5{bottom:-.125rem}.-univer-left-0\\.5{left:-.125rem}.-univer-right-0\\.5{right:-.125rem}.-univer-top-0\\.5{top:-.125rem}.univer-left-0{left:0}.univer-left-1{left:.25rem}.univer-left-3{left:.75rem}.univer-right-0{right:0}.univer-right-5{right:1.25rem}.univer-top-0{top:0}.univer-top-0\\.5{top:.125rem}.univer-z-10{z-index:10}.univer-z-\\[1001\\]{z-index:1001}.univer-z-\\[100\\]{z-index:100}.univer-mx-1{margin-left:.25rem;margin-right:.25rem}.univer-mx-1\\.5{margin-left:.375rem;margin-right:.375rem}.univer-mb-1\\.5{margin-bottom:.375rem}.univer-mb-3{margin-bottom:.75rem}.univer-mb-4{margin-bottom:1rem}.univer-ml-1{margin-left:.25rem}.univer-ml-1\\.5{margin-left:.375rem}.univer-ml-3{margin-left:.75rem}.univer-ml-6{margin-left:1.5rem}.univer-ml-px{margin-left:1px}.univer-mr-1\\.5{margin-right:.375rem}.univer-mr-2{margin-right:.5rem}.univer-mr-5{margin-right:1.25rem}.univer-mt-auto{margin-top:auto}.univer-hidden{display:none}.univer-size-0{width:0;height:0}.univer-size-10{width:2.5rem;height:2.5rem}.univer-size-4{width:1rem;height:1rem}.univer-h-0\\.5{height:.125rem}.univer-h-1{height:.25rem}.univer-h-10{height:2.5rem}.univer-h-20{height:5rem}.univer-h-4{height:1rem}.univer-h-5{height:1.25rem}.univer-h-6{height:1.5rem}.univer-h-60{height:15rem}.univer-h-8{height:2rem}.univer-h-9{height:2.25rem}.univer-h-\\[270px\\]{height:270px}.univer-h-\\[30px\\]{height:30px}.univer-h-\\[calc\\(100\\%-16px\\)\\]{height:calc(100% - 16px)}.univer-h-\\[calc\\(100\\%-8px\\)\\]{height:calc(100% - 8px)}.univer-h-px{height:1px}.univer-max-h-52{max-height:13rem}.univer-max-h-\\[100px\\]{max-height:100px}.univer-max-h-\\[360px\\]{max-height:360px}.univer-min-h-0{min-height:0}.univer-min-h-\\[30px\\]{min-height:30px}.\\!univer-w-\\[90px\\]{width:90px!important}.univer-w-16{width:4rem}.univer-w-20{width:5rem}.univer-w-24{width:6rem}.univer-w-5{width:1.25rem}.univer-w-6{width:1.5rem}.univer-w-60{width:15rem}.univer-w-\\[100px\\]{width:100px}.univer-w-\\[130px\\]{width:130px}.univer-w-\\[156px\\]{width:156px}.univer-w-\\[300px\\]{width:300px}.univer-w-\\[50\\%\\]{width:50%}.univer-w-fit{width:fit-content}.univer-min-w-0{min-width:0}.univer-min-w-72{min-width:18rem}.univer-max-w-32{max-width:8rem}.univer-max-w-36{max-width:9rem}.univer-max-w-64{max-width:16rem}.univer-max-w-\\[190px\\]{max-width:190px}.univer-max-w-\\[200px\\]{max-width:200px}.univer-max-w-\\[calc\\(100\\%-112px\\)\\]{max-width:calc(100% - 112px)}.univer-max-w-fit{max-width:fit-content}.univer-max-w-lg{max-width:32rem}.univer-flex-shrink-0,.univer-shrink-0{flex-shrink:0}.univer-flex-grow{flex-grow:1}.univer-flex-grow-0{flex-grow:0}.univer-rotate-180{--univer-tw-rotate: 180deg;transform:translate(var(--univer-tw-translate-x),var(--univer-tw-translate-y)) rotate(180deg) skew(var(--univer-tw-skew-x)) skewY(var(--univer-tw-skew-y)) scaleX(var(--univer-tw-scale-x)) scaleY(var(--univer-tw-scale-y));transform:translate(var(--univer-tw-translate-x),var(--univer-tw-translate-y)) rotate(var(--univer-tw-rotate)) skew(var(--univer-tw-skew-x)) skewY(var(--univer-tw-skew-y)) scaleX(var(--univer-tw-scale-x)) scaleY(var(--univer-tw-scale-y))}@keyframes univer-spin{to{transform:rotate(360deg)}}.univer-animate-spin{animation:1s linear infinite univer-spin}.univer-cursor-not-allowed{cursor:not-allowed}.univer-appearance-none{-webkit-appearance:none;appearance:none}.univer-grid-flow-col{grid-auto-flow:column}.univer-grid-cols-5{grid-template-columns:repeat(5,minmax(0,1fr))}.univer-grid-cols-\\[1fr\\,auto\\,auto\\,auto\\]{grid-template-columns:1fr auto auto auto}.univer-flex-row{flex-direction:row}.univer-flex-row-reverse{flex-direction:row-reverse}.univer-flex-nowrap{flex-wrap:nowrap}.univer-gap-7{gap:1.75rem}.univer-gap-x-2{-moz-column-gap:.5rem;column-gap:.5rem}.univer-space-y-2>:not([hidden])~:not([hidden]){--univer-tw-space-y-reverse: 0;margin-top:calc(.5rem * (1 - var(--univer-tw-space-y-reverse)));margin-top:.5rem;margin-top:calc(.5rem * calc(1 - var(--univer-tw-space-y-reverse)));margin-bottom:0;margin-bottom:calc(.5rem * var(--univer-tw-space-y-reverse))}.univer-divide-x-0>:not([hidden])~:not([hidden]){--univer-tw-divide-x-reverse: 0;border-right-width:0;border-right-width:calc(0px * var(--univer-tw-divide-x-reverse));border-left-width:calc(0px * (1 - var(--univer-tw-divide-x-reverse)));border-left-width:0;border-left-width:calc(0px * calc(1 - var(--univer-tw-divide-x-reverse)))}.univer-divide-y>:not([hidden])~:not([hidden]){--univer-tw-divide-y-reverse: 0;border-top-width:calc(1px * (1 - var(--univer-tw-divide-y-reverse)));border-top-width:1px;border-top-width:calc(1px * calc(1 - var(--univer-tw-divide-y-reverse)));border-bottom-width:0;border-bottom-width:calc(1px * var(--univer-tw-divide-y-reverse))}.univer-divide-solid>:not([hidden])~:not([hidden]){border-style:solid}.univer-divide-gray-200>:not([hidden])~:not([hidden]){border-color:var(--univer-gray-200)}.univer-justify-self-center{justify-self:center}.univer-overflow-hidden{overflow:hidden}.univer-overflow-x-auto{overflow-x:auto}.univer-overflow-y-hidden{overflow-y:hidden}.univer-rounded-full{border-radius:9999px}.univer-rounded-md{border-radius:.375rem}.univer-rounded-sm{border-radius:.125rem}.univer-border-2{border-width:2px}.univer-border-4{border-width:4px}.univer-border-b{border-bottom-width:1px}.univer-border-solid{border-style:solid}.univer-border-none{border-style:none}.univer-border-\\[rgba\\(13\\,13\\,13\\,0\\.12\\)\\]{border-color:#0d0d0d1f}.univer-border-gray-100{border-color:var(--univer-gray-100)}.univer-border-gray-200{border-color:var(--univer-gray-200)}.univer-border-transparent{border-color:#0000}.univer-border-r-gray-200{border-right-color:var(--univer-gray-200)}.univer-border-t-primary-500{border-top-color:var(--univer-primary-500)}.\\!univer-bg-gray-700{background-color:var(--univer-gray-700)!important}.\\!univer-bg-gray-800{background-color:var(--univer-gray-800)!important}.\\!univer-bg-gray-900{background-color:var(--univer-gray-900)!important}.univer-bg-blue-500{background-color:var(--univer-blue-500)}.univer-bg-blue-600{background-color:var(--univer-blue-600)}.univer-bg-gray-100{background-color:var(--univer-gray-100)}.univer-bg-gradient-to-b{background-image:linear-gradient(to bottom,var(--univer-tw-gradient-stops))}.univer-from-gray-50{--univer-tw-gradient-from: var(--univer-gray-50) var(--univer-tw-gradient-from-position);--univer-tw-gradient-to: #fff0 var(--univer-tw-gradient-to-position);--univer-tw-gradient-stops: var(--univer-tw-gradient-from), var(--univer-tw-gradient-to)}.univer-to-gray-100{--univer-tw-gradient-to: var(--univer-gray-100) var(--univer-tw-gradient-to-position)}.univer-fill-gray-900{fill:var(--univer-gray-900)}.univer-fill-primary-600{fill:var(--univer-primary-600)}.univer-p-1{padding:.25rem}.univer-p-4{padding:1rem}.univer-px-1{padding-left:.25rem;padding-right:.25rem}.univer-px-1\\.5{padding-left:.375rem;padding-right:.375rem}.univer-px-3\\.5{padding-left:.875rem;padding-right:.875rem}.univer-px-5{padding-left:1.25rem;padding-right:1.25rem}.univer-py-0\\.5{padding-top:.125rem;padding-bottom:.125rem}.univer-py-5{padding-top:1.25rem;padding-bottom:1.25rem}.univer-pb-1{padding-bottom:.25rem}.univer-pl-1\\.5{padding-left:.375rem}.univer-pl-3{padding-left:.75rem}.univer-pl-6{padding-left:1.5rem}.univer-pr-5{padding-right:1.25rem}.univer-pt-1{padding-top:.25rem}.univer-pt-2{padding-top:.5rem}.univer-text-center{text-align:center}.univer-font-semibold{font-weight:600}.univer-leading-6{line-height:1.5rem}.univer-leading-7{line-height:1.75rem}.\\!univer-text-blue-400{color:var(--univer-blue-400)!important}.\\!univer-text-gray-700{color:var(--univer-gray-700)!important}.\\!univer-text-white{color:var(--univer-white)!important}.univer-text-blue-500{color:var(--univer-blue-500)}.univer-text-blue-600{color:var(--univer-blue-600)}.univer-text-gray-200{color:var(--univer-gray-200)}.univer-text-gray-300{color:var(--univer-gray-300)}.univer-text-gray-700{color:var(--univer-gray-700)}.univer-text-green-600{color:var(--univer-green-600)}.univer-text-primary-700{color:var(--univer-primary-700)}.univer-text-red-600{color:var(--univer-red-600)}.univer-text-rose-600{--univer-tw-text-opacity: 1;color:rgba(225,29,72,var(--univer-tw-text-opacity, 1))}.univer-text-yellow-500{color:var(--univer-yellow-500)}.univer-shadow{--univer-tw-shadow: 0 1px 3px 0 #0000001a, 0 1px 2px -1px #0000001a;--univer-tw-shadow-colored: 0 1px 3px 0 var(--univer-tw-shadow-color), 0 1px 2px -1px var(--univer-tw-shadow-color);box-shadow:0 0 #0000,0 0 #0000,0 1px 3px #0000001a,0 1px 2px -1px #0000001a;box-shadow:var(--univer-tw-ring-offset-shadow, 0 0 #0000),var(--univer-tw-ring-shadow, 0 0 #0000),var(--univer-tw-shadow)}.univer-shadow-lg{--univer-tw-shadow: 0px 4px 6px 0px #1e284d0d, 0px 10px 15px -3px #1e284d1a;--univer-tw-shadow-colored: 0px 4px 6px 0px var(--univer-tw-shadow-color), 0px 10px 15px -3px var(--univer-tw-shadow-color);box-shadow:0 0 #0000,0 0 #0000,0 4px 6px #1e284d0d,0 10px 15px -3px #1e284d1a;box-shadow:var(--univer-tw-ring-offset-shadow, 0 0 #0000),var(--univer-tw-ring-shadow, 0 0 #0000),var(--univer-tw-shadow)}.univer-blur-sm{--univer-tw-blur: blur(4px);filter:var(--univer-tw-blur) var(--univer-tw-brightness) var(--univer-tw-contrast) var(--univer-tw-grayscale) var(--univer-tw-hue-rotate) var(--univer-tw-invert) var(--univer-tw-saturate) var(--univer-tw-sepia) var(--univer-tw-drop-shadow)}.univer-backdrop-blur{--univer-tw-backdrop-blur: blur(8px);backdrop-filter:var(--univer-tw-backdrop-blur) var(--univer-tw-backdrop-brightness) var(--univer-tw-backdrop-contrast) var(--univer-tw-backdrop-grayscale) var(--univer-tw-backdrop-hue-rotate) var(--univer-tw-backdrop-invert) var(--univer-tw-backdrop-opacity) var(--univer-tw-backdrop-saturate) var(--univer-tw-backdrop-sepia)}.univer-transition-\\[colors\\,box-shadow\\]{transition-property:colors,box-shadow;transition-duration:.15s;transition-timing-function:cubic-bezier(.4,0,.2,1)}.univer-transition-\\[height\\]{transition-property:height;transition-duration:.15s;transition-timing-function:cubic-bezier(.4,0,.2,1)}.univer-transition-all{transition-property:all;transition-duration:.15s;transition-timing-function:cubic-bezier(.4,0,.2,1)}.univer-duration-200{transition-duration:.2s}.univer-ease-linear{transition-timing-function:linear}.after\\:univer-absolute:after{content:var(--univer-tw-content);position:absolute}.after\\:univer-right-0:after{content:var(--univer-tw-content);right:0}.after\\:univer-top-1\\/2:after{content:var(--univer-tw-content);top:50%}.after\\:univer-block:after{content:var(--univer-tw-content);display:block}.after\\:univer-h-4:after{content:var(--univer-tw-content);height:1rem}.after\\:univer-w-px:after{content:var(--univer-tw-content);width:1px}.after\\:-univer-translate-y-1\\/2:after{content:var(--univer-tw-content);--univer-tw-translate-y: -50%;transform:translate(var(--univer-tw-translate-x),-50%) rotate(var(--univer-tw-rotate)) skew(var(--univer-tw-skew-x)) skewY(var(--univer-tw-skew-y)) scaleX(var(--univer-tw-scale-x)) scaleY(var(--univer-tw-scale-y));transform:translate(var(--univer-tw-translate-x),var(--univer-tw-translate-y)) rotate(var(--univer-tw-rotate)) skew(var(--univer-tw-skew-x)) skewY(var(--univer-tw-skew-y)) scaleX(var(--univer-tw-scale-x)) scaleY(var(--univer-tw-scale-y))}.after\\:univer-bg-gray-200:after{content:var(--univer-tw-content);background-color:var(--univer-gray-200)}.after\\:univer-content-\\[\\\"\\\"\\]:after{--univer-tw-content: \"\";content:\"\";content:var(--univer-tw-content)}.last\\:univer-mb-0:last-child{margin-bottom:0}.univer-group:hover .group-hover\\:univer-flex{display:flex}.hover\\:univer-border-primary-600:hover{border-color:var(--univer-primary-600)}.hover\\:univer-bg-gray-50:hover{background-color:var(--univer-gray-50)}.hover\\:univer-bg-transparent:hover{background-color:#0000}.focus\\:univer-border-primary-500:focus{border-color:var(--univer-primary-500)}.focus\\:univer-outline-none:focus{outline-offset:2px;outline:2px solid #0000}.focus-visible\\:univer-ring-2:focus-visible{--univer-tw-ring-offset-shadow: var(--univer-tw-ring-inset) 0 0 0 var(--univer-tw-ring-offset-width) var(--univer-tw-ring-offset-color);--univer-tw-ring-shadow: var(--univer-tw-ring-inset) 0 0 0 calc(2px + var(--univer-tw-ring-offset-width)) var(--univer-tw-ring-color);box-shadow:var(--univer-tw-ring-offset-shadow),var(--univer-tw-ring-shadow),0 0 #0000;box-shadow:var(--univer-tw-ring-offset-shadow),var(--univer-tw-ring-shadow),var(--univer-tw-shadow, 0 0 #0000)}.focus-visible\\:univer-ring-primary-500:focus-visible{--univer-tw-ring-color: var(--univer-primary-500)}.active\\:univer-bg-gray-100:active{background-color:var(--univer-gray-100)}.dark\\:\\!univer-divide-gray-600:where(.univer-dark,.univer-dark *)>:not([hidden])~:not([hidden]){border-color:var(--univer-gray-600)!important}.dark\\:\\!univer-border-gray-700:where(.univer-dark,.univer-dark *){border-color:var(--univer-gray-700)!important}.dark\\:\\!univer-border-r-gray-700:where(.univer-dark,.univer-dark *){border-right-color:var(--univer-gray-700)!important}.dark\\:\\!univer-bg-black:where(.univer-dark,.univer-dark *){background-color:var(--univer-black)!important}.dark\\:\\!univer-bg-blue-400:where(.univer-dark,.univer-dark *){background-color:var(--univer-blue-400)!important}.dark\\:\\!univer-bg-gray-700:where(.univer-dark,.univer-dark *){background-color:var(--univer-gray-700)!important}.dark\\:\\!univer-bg-gray-800:where(.univer-dark,.univer-dark *){background-color:var(--univer-gray-800)!important}.dark\\:\\!univer-from-gray-800:where(.univer-dark,.univer-dark *){--univer-tw-gradient-from: var(--univer-gray-800) var(--univer-tw-gradient-from-position) !important;--univer-tw-gradient-to: #fff0 var(--univer-tw-gradient-to-position) !important;--univer-tw-gradient-stops: var(--univer-tw-gradient-from), var(--univer-tw-gradient-to) !important}.dark\\:\\!univer-to-gray-900:where(.univer-dark,.univer-dark *){--univer-tw-gradient-to: var(--univer-gray-900) var(--univer-tw-gradient-to-position) !important}.dark\\:\\!univer-fill-white:where(.univer-dark,.univer-dark *){fill:var(--univer-white)!important}.dark\\:\\!univer-text-blue-400:where(.univer-dark,.univer-dark *){color:var(--univer-blue-400)!important}.dark\\:\\!univer-text-gray-700:where(.univer-dark,.univer-dark *){color:var(--univer-gray-700)!important}.dark\\:\\!univer-text-green-400:where(.univer-dark,.univer-dark *){color:var(--univer-green-400)!important}.dark\\:\\!univer-text-red-400:where(.univer-dark,.univer-dark *){color:var(--univer-red-400)!important}.dark\\:hover\\:\\!univer-bg-gray-800:hover:where(.univer-dark,.univer-dark *){background-color:var(--univer-gray-800)!important}.\\[\\&\\>div\\:first-child\\]\\:univer-px-2\\.5>div:first-child{padding-left:.625rem;padding-right:.625rem}.\\[\\&\\>div\\]\\:univer-h-5>div{height:1.25rem}.\\[\\&\\>div\\]\\:univer-ring-transparent>div{--univer-tw-ring-color: transparent}.\\[\\&_canvas\\]\\:univer-absolute canvas{position:absolute}.univer-absolute{position:absolute}.univer-relative{position:relative}.univer-left-1\\.5{left:.375rem}.univer-top-1\\/2{top:50%}.univer-z-\\[15\\]{z-index:15}.univer-m-0{margin:0}.-univer-mx-6{margin-left:-1.5rem;margin-right:-1.5rem}.univer-mx-0{margin-left:0;margin-right:0}.univer-my-1{margin-top:.25rem;margin-bottom:.25rem}.univer-my-2{margin-top:.5rem;margin-bottom:.5rem}.univer-mb-0{margin-bottom:0}.univer-mb-2{margin-bottom:.5rem}.univer-ml-2{margin-left:.5rem}.univer-ml-4{margin-left:1rem}.univer-mr-0{margin-right:0}.univer-mt-0{margin-top:0}.univer-mt-1{margin-top:.25rem}.univer-box-border{box-sizing:border-box}.univer-block{display:block}.univer-inline-flex{display:inline-flex}.univer-size-6{width:1.5rem;height:1.5rem}.univer-size-full{width:100%;height:100%}.univer-h-\\[18px\\]{height:18px}.univer-h-\\[364px\\]{height:364px}.univer-max-h-60{max-height:15rem}.univer-max-h-72{max-height:18rem}.univer-max-h-\\[350px\\]{max-height:350px}.univer-w-\\[250px\\]{width:250px}.univer-flex-1{flex:1}.-univer-translate-y-1\\/2{--univer-tw-translate-y: -50%;transform:translate(var(--univer-tw-translate-x),-50%) rotate(var(--univer-tw-rotate)) skew(var(--univer-tw-skew-x)) skewY(var(--univer-tw-skew-y)) scaleX(var(--univer-tw-scale-x)) scaleY(var(--univer-tw-scale-y));transform:translate(var(--univer-tw-translate-x),var(--univer-tw-translate-y)) rotate(var(--univer-tw-rotate)) skew(var(--univer-tw-skew-x)) skewY(var(--univer-tw-skew-y)) scaleX(var(--univer-tw-scale-x)) scaleY(var(--univer-tw-scale-y))}.univer-select-none{-webkit-user-select:none;user-select:none}.univer-list-none{list-style-type:none}.univer-justify-center{justify-content:center}.univer-justify-around{justify-content:space-around}.univer-gap-2{gap:.5rem}.univer-gap-4{gap:1rem}.univer-overflow-visible{overflow:visible}.univer-truncate{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.univer-whitespace-nowrap{white-space:nowrap}.univer-whitespace-pre-wrap{white-space:pre-wrap}.univer-break-words{word-wrap:break-word}.univer-break-all{word-break:break-all}.univer-rounded-none{border-radius:0}.univer-rounded-l{border-top-left-radius:.25rem;border-bottom-left-radius:.25rem}.univer-border{border-width:1px}.univer-border-r-0{border-right-width:0}.univer-border-gray-600{border-color:var(--univer-gray-600)}.univer-border-primary-600{border-color:var(--univer-primary-600)}.\\!univer-bg-gray-600{background-color:var(--univer-gray-600)!important}.univer-bg-gray-200{background-color:var(--univer-gray-200)}.univer-bg-primary-600{background-color:var(--univer-primary-600)}.univer-bg-transparent{background-color:#0000}.univer-bg-white{background-color:var(--univer-white)}.univer-p-0{padding:0}.univer-p-0\\.5{padding:.125rem}.univer-p-3{padding:.75rem}.univer-px-4{padding-left:1rem;padding-right:1rem}.univer-px-6{padding-left:1.5rem;padding-right:1.5rem}.univer-px-7{padding-left:1.75rem;padding-right:1.75rem}.univer-py-1{padding-top:.25rem;padding-bottom:.25rem}.univer-py-2{padding-top:.5rem;padding-bottom:.5rem}.univer-py-3{padding-top:.75rem;padding-bottom:.75rem}.univer-pb-3{padding-bottom:.75rem}.univer-pt-0{padding-top:0}.univer-text-base{font-size:1rem;line-height:1.5rem}.univer-text-sm{font-size:.875rem;line-height:1.25rem}.univer-font-bold{font-weight:700}.univer-font-medium{font-weight:500}.univer-leading-5{line-height:1.25rem}.univer-leading-\\[13px\\]{line-height:13px}.univer-text-gray-900{color:var(--univer-gray-900)}.univer-text-primary-500{color:var(--univer-primary-500)}.univer-text-red-500{color:var(--univer-red-500)}.univer-text-white{color:var(--univer-white)}.univer-shadow-md{--univer-tw-shadow: 0px 1px 6px -2px #1e284d14, 0px 2px 6px -1px #1e284d1a;--univer-tw-shadow-colored: 0px 1px 6px -2px var(--univer-tw-shadow-color), 0px 2px 6px -1px var(--univer-tw-shadow-color);box-shadow:0 0 #0000,0 0 #0000,0 1px 6px -2px #1e284d14,0 2px 6px -1px #1e284d1a;box-shadow:var(--univer-tw-ring-offset-shadow, 0 0 #0000),var(--univer-tw-ring-shadow, 0 0 #0000),var(--univer-tw-shadow)}.univer-outline-none{outline-offset:2px;outline:2px solid #0000}.univer-ring-1{--univer-tw-ring-offset-shadow: var(--univer-tw-ring-inset) 0 0 0 var(--univer-tw-ring-offset-width) var(--univer-tw-ring-offset-color);--univer-tw-ring-shadow: var(--univer-tw-ring-inset) 0 0 0 calc(1px + var(--univer-tw-ring-offset-width)) var(--univer-tw-ring-color);box-shadow:var(--univer-tw-ring-offset-shadow),var(--univer-tw-ring-shadow),0 0 #0000;box-shadow:var(--univer-tw-ring-offset-shadow),var(--univer-tw-ring-shadow),var(--univer-tw-shadow, 0 0 #0000)}.univer-ring-primary-500{--univer-tw-ring-color: var(--univer-primary-500)}.univer-ring-red-500{--univer-tw-ring-color: var(--univer-red-500)}.univer-transition-colors{transition-property:color,background-color,border-color,text-decoration-color,fill,stroke;transition-duration:.15s;transition-timing-function:cubic-bezier(.4,0,.2,1)}.hover\\:univer-bg-gray-200:hover{background-color:var(--univer-gray-200)}.hover\\:univer-bg-gray-300:hover{background-color:var(--univer-gray-300)}.dark\\:\\!univer-bg-gray-600:where(.univer-dark,.univer-dark *){background-color:var(--univer-gray-600)!important}.dark\\:\\!univer-bg-gray-900:where(.univer-dark,.univer-dark *){background-color:var(--univer-gray-900)!important}.dark\\:\\!univer-text-gray-300:where(.univer-dark,.univer-dark *){color:var(--univer-gray-300)!important}.dark\\:\\!univer-text-white:where(.univer-dark,.univer-dark *){color:var(--univer-white)!important}.dark\\:hover\\:\\!univer-bg-gray-600:hover:where(.univer-dark,.univer-dark *){background-color:var(--univer-gray-600)!important}.univer-mb-5{margin-bottom:1.25rem}.univer-mr-3{margin-right:.75rem}.univer-mt-2{margin-top:.5rem}.univer-mt-3{margin-top:.75rem}.univer-mt-3\\.5{margin-top:.875rem}.univer-mt-4{margin-top:1rem}.univer-flex{display:flex}.univer-grid{display:grid}.univer-h-7{height:1.75rem}.univer-h-full{height:100%}.univer-max-h-\\[400px\\]{max-height:400px}.univer-w-32{width:8rem}.univer-w-36{width:9rem}.univer-w-4{width:1rem}.univer-w-\\[340px\\]{width:340px}.univer-w-full{width:100%}.univer-cursor-default{cursor:default}.univer-cursor-pointer{cursor:pointer}.univer-flex-col{flex-direction:column}.univer-items-center{align-items:center}.univer-justify-end{justify-content:flex-end}.univer-justify-between{justify-content:space-between}.univer-gap-1{gap:.25rem}.univer-gap-1\\.5{gap:.375rem}.univer-gap-6{gap:1.5rem}.univer-overflow-auto{overflow:auto}.univer-overflow-y-auto{overflow-y:auto}.univer-rounded{border-radius:.25rem}.univer-rounded-lg{border-radius:.5rem}.univer-p-1\\.5{padding:.375rem}.univer-p-2{padding:.5rem}.univer-px-2{padding-left:.5rem;padding-right:.5rem}.univer-py-1\\.5{padding-top:.375rem;padding-bottom:.375rem}.univer-pb-5{padding-bottom:1.25rem}.univer-text-sm,.univer-text-sm\\/5{font-size:.875rem;line-height:1.25rem}.univer-text-xs{font-size:.75rem;line-height:1rem}.univer-text-gray-400{color:var(--univer-gray-400)}.univer-text-gray-500{color:var(--univer-gray-500)}.univer-text-gray-600{color:var(--univer-gray-600)}.univer-text-primary-600{color:var(--univer-primary-600)}.hover\\:univer-bg-gray-100:hover{background-color:var(--univer-gray-100)}.dark\\:\\!univer-text-gray-200:where(.univer-dark,.univer-dark *){color:var(--univer-gray-200)!important}.dark\\:\\!univer-text-gray-400:where(.univer-dark,.univer-dark *){color:var(--univer-gray-400)!important}.dark\\:hover\\:\\!univer-bg-gray-700:hover:where(.univer-dark,.univer-dark *){background-color:var(--univer-gray-700)!important}:host{display:block;width:100%;height:100%;min-width:0;min-height:0;overflow:hidden}.z-gallery-office-preview{width:100%;height:100%;overflow:auto;padding:0;background:var(--muted)}.z-gallery-office-preview--sheet{overflow:hidden}.z-gallery-office-preview--slide{display:flex;align-items:center;justify-content:center;padding:0}:host ::ng-deep .docx-wrapper{display:flex;flex-direction:column;align-items:center;gap:.75rem;padding:0;background:transparent}:host ::ng-deep .docx{max-width:100%;box-shadow:0 .5rem 2rem #0000001f}:host ::ng-deep .z-gallery-office-preview--sheet>div{width:100%;min-width:45rem;height:100%}:host ::ng-deep .z-gallery-office-preview--slide canvas{max-width:none}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: ZGalleryOfficePreviewComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'z-gallery-office-preview', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\n  #host\n  class=\"z-gallery-office-preview\"\n  [class.z-gallery-office-preview--sheet]=\"zKind() === 'excel'\"\n  [class.z-gallery-office-preview--slide]=\"zKind() === 'powerpoint'\"></div>\n", styles: ["*,:before,:after,::backdrop{--univer-tw-border-spacing-x: 0;--univer-tw-border-spacing-y: 0;--univer-tw-translate-x: 0;--univer-tw-translate-y: 0;--univer-tw-rotate: 0;--univer-tw-skew-x: 0;--univer-tw-skew-y: 0;--univer-tw-scale-x: 1;--univer-tw-scale-y: 1;--univer-tw-pan-x: ;--univer-tw-pan-y: ;--univer-tw-pinch-zoom: ;--univer-tw-scroll-snap-strictness: proximity;--univer-tw-gradient-from-position: ;--univer-tw-gradient-via-position: ;--univer-tw-gradient-to-position: ;--univer-tw-ordinal: ;--univer-tw-slashed-zero: ;--univer-tw-numeric-figure: ;--univer-tw-numeric-spacing: ;--univer-tw-numeric-fraction: ;--univer-tw-ring-inset: ;--univer-tw-ring-offset-width: 0px;--univer-tw-ring-offset-color: #fff;--univer-tw-ring-color: #93c5fd80;--univer-tw-ring-offset-shadow: 0 0 #0000;--univer-tw-ring-shadow: 0 0 #0000;--univer-tw-shadow: 0 0 #0000;--univer-tw-shadow-colored: 0 0 #0000;--univer-tw-blur: ;--univer-tw-brightness: ;--univer-tw-contrast: ;--univer-tw-grayscale: ;--univer-tw-hue-rotate: ;--univer-tw-invert: ;--univer-tw-saturate: ;--univer-tw-sepia: ;--univer-tw-drop-shadow: ;--univer-tw-backdrop-blur: ;--univer-tw-backdrop-brightness: ;--univer-tw-backdrop-contrast: ;--univer-tw-backdrop-grayscale: ;--univer-tw-backdrop-hue-rotate: ;--univer-tw-backdrop-invert: ;--univer-tw-backdrop-opacity: ;--univer-tw-backdrop-saturate: ;--univer-tw-backdrop-sepia: ;--univer-tw-contain-size: ;--univer-tw-contain-layout: ;--univer-tw-contain-paint: ;--univer-tw-contain-style: }*{scrollbar-color:initial;scrollbar-width:initial}.univer-sr-only{clip:rect(0,0,0,0);white-space:nowrap;border-width:0;width:1px;height:1px;margin:-1px;padding:0;position:absolute;overflow:hidden}.univer-inset-x-0{left:0;right:0}.univer-bottom-0\\.5{bottom:.125rem}.univer-bottom-6{bottom:1.5rem}.univer-left-0\\.5{left:.125rem}.univer-left-2{left:.5rem}.univer-left-\\[-16px\\]{left:-16px}.univer-right-4{right:1rem}.univer-right-px{right:1px}.univer-top-px{top:1px}.univer-z-0{z-index:0}.univer-z-\\[1081\\]{z-index:1081}.-univer-mx-1{margin-left:-.25rem;margin-right:-.25rem}.univer-my-0{margin-top:0;margin-bottom:0}.univer-ml-auto{margin-left:auto}.univer-inline-block{display:inline-block}.\\!univer-hidden{display:none!important}.univer-size-2{width:.5rem;height:.5rem}.univer-size-2\\.5{width:.625rem;height:.625rem}.univer-h-1\\/2{height:50%}.univer-h-12{height:3rem}.univer-h-2{height:.5rem}.univer-h-32{height:8rem}.univer-h-48{height:12rem}.univer-h-\\[150px\\]{height:150px}.univer-h-\\[calc\\(100\\%-2px\\)\\]{height:calc(100% - 2px)}.univer-max-h-0{max-height:0}.univer-max-h-80{max-height:20rem}.univer-max-h-\\[--radix-popper-available-height\\]{max-height:var(--radix-popper-available-height)}.univer-max-h-\\[1000px\\]{max-height:1000px}.univer-max-h-\\[40vh\\]{max-height:40vh}.univer-max-h-full{max-height:100%}.univer-max-h-screen{max-height:100vh}.univer-min-h-3\\.5{min-height:.875rem}.univer-min-h-\\[520px\\]{min-height:520px}.\\!univer-w-fit{width:fit-content!important}.univer-w-64{width:16rem}.univer-w-72{width:18rem}.univer-w-80{width:20rem}.univer-w-\\[--radix-popper-anchor-width\\]{width:var(--radix-popper-anchor-width)}.univer-w-\\[calc\\(100\\%-16px\\)\\]{width:calc(100% - 16px)}.univer-min-w-36{min-width:9rem}.univer-min-w-\\[320px\\]{min-width:320px}.univer-max-w-2xl{max-width:42rem}.univer-max-w-\\[520px\\]{max-width:520px}.univer-max-w-\\[60vw\\]{max-width:60vw}.univer-max-w-sm{max-width:24rem}.univer-max-w-xs{max-width:20rem}.univer-shrink{flex-shrink:1}.univer-shrink-0{flex-shrink:0}.univer-origin-\\[--radix-hover-card-content-transform-origin\\]{transform-origin:var(--radix-hover-card-content-transform-origin)}.-univer-translate-y-1\\/2,.univer--translate-y-1\\/2{--univer-tw-translate-y: -50%;transform:translate(var(--univer-tw-translate-x),-50%) rotate(var(--univer-tw-rotate)) skew(var(--univer-tw-skew-x)) skewY(var(--univer-tw-skew-y)) scaleX(var(--univer-tw-scale-x)) scaleY(var(--univer-tw-scale-y));transform:translate(var(--univer-tw-translate-x),var(--univer-tw-translate-y)) rotate(var(--univer-tw-rotate)) skew(var(--univer-tw-skew-x)) skewY(var(--univer-tw-skew-y)) scaleX(var(--univer-tw-scale-x)) scaleY(var(--univer-tw-scale-y))}.univer-translate-x-3{--univer-tw-translate-x: .75rem;transform:translate(.75rem,var(--univer-tw-translate-y)) rotate(var(--univer-tw-rotate)) skew(var(--univer-tw-skew-x)) skewY(var(--univer-tw-skew-y)) scaleX(var(--univer-tw-scale-x)) scaleY(var(--univer-tw-scale-y));transform:translate(var(--univer-tw-translate-x),var(--univer-tw-translate-y)) rotate(var(--univer-tw-rotate)) skew(var(--univer-tw-skew-x)) skewY(var(--univer-tw-skew-y)) scaleX(var(--univer-tw-scale-x)) scaleY(var(--univer-tw-scale-y))}.-univer-rotate-90{--univer-tw-rotate: -90deg;transform:translate(var(--univer-tw-translate-x),var(--univer-tw-translate-y)) rotate(-90deg) skew(var(--univer-tw-skew-x)) skewY(var(--univer-tw-skew-y)) scaleX(var(--univer-tw-scale-x)) scaleY(var(--univer-tw-scale-y));transform:translate(var(--univer-tw-translate-x),var(--univer-tw-translate-y)) rotate(var(--univer-tw-rotate)) skew(var(--univer-tw-skew-x)) skewY(var(--univer-tw-skew-y)) scaleX(var(--univer-tw-scale-x)) scaleY(var(--univer-tw-scale-y))}.univer-rotate-0{--univer-tw-rotate: 0deg;transform:translate(var(--univer-tw-translate-x),var(--univer-tw-translate-y)) rotate(0) skew(var(--univer-tw-skew-x)) skewY(var(--univer-tw-skew-y)) scaleX(var(--univer-tw-scale-x)) scaleY(var(--univer-tw-scale-y));transform:translate(var(--univer-tw-translate-x),var(--univer-tw-translate-y)) rotate(var(--univer-tw-rotate)) skew(var(--univer-tw-skew-x)) skewY(var(--univer-tw-skew-y)) scaleX(var(--univer-tw-scale-x)) scaleY(var(--univer-tw-scale-y))}.univer-rotate-45{--univer-tw-rotate: 45deg;transform:translate(var(--univer-tw-translate-x),var(--univer-tw-translate-y)) rotate(45deg) skew(var(--univer-tw-skew-x)) skewY(var(--univer-tw-skew-y)) scaleX(var(--univer-tw-scale-x)) scaleY(var(--univer-tw-scale-y));transform:translate(var(--univer-tw-translate-x),var(--univer-tw-translate-y)) rotate(var(--univer-tw-rotate)) skew(var(--univer-tw-skew-x)) skewY(var(--univer-tw-skew-y)) scaleX(var(--univer-tw-scale-x)) scaleY(var(--univer-tw-scale-y))}.univer-rotate-\\[-90deg\\]{--univer-tw-rotate: -90deg;transform:translate(var(--univer-tw-translate-x),var(--univer-tw-translate-y)) rotate(-90deg) skew(var(--univer-tw-skew-x)) skewY(var(--univer-tw-skew-y)) scaleX(var(--univer-tw-scale-x)) scaleY(var(--univer-tw-scale-y));transform:translate(var(--univer-tw-translate-x),var(--univer-tw-translate-y)) rotate(var(--univer-tw-rotate)) skew(var(--univer-tw-skew-x)) skewY(var(--univer-tw-skew-y)) scaleX(var(--univer-tw-scale-x)) scaleY(var(--univer-tw-scale-y))}.\\!univer-animate-none{animation:none!important}.univer-cursor-crosshair{cursor:crosshair}.univer-cursor-grabbing{cursor:grabbing}.univer-resize{resize:both}.univer-grid-flow-row{grid-auto-flow:row}.univer-grid-cols-7{grid-template-columns:repeat(7,minmax(0,1fr))}.univer-flex-col-reverse{flex-direction:column-reverse}.univer-content-center{align-content:center}.univer-gap-5{gap:1.25rem}.univer-space-y-1\\.5>:not([hidden])~:not([hidden]){--univer-tw-space-y-reverse: 0;margin-top:calc(.375rem * (1 - var(--univer-tw-space-y-reverse)));margin-top:.375rem;margin-top:calc(.375rem * calc(1 - var(--univer-tw-space-y-reverse)));margin-bottom:0;margin-bottom:calc(.375rem * var(--univer-tw-space-y-reverse))}.univer-divide-x>:not([hidden])~:not([hidden]){--univer-tw-divide-x-reverse: 0;border-right-width:0;border-right-width:calc(1px * var(--univer-tw-divide-x-reverse));border-left-width:calc(1px * (1 - var(--univer-tw-divide-x-reverse)));border-left-width:1px;border-left-width:calc(1px * calc(1 - var(--univer-tw-divide-x-reverse)))}.univer-divide-y-0>:not([hidden])~:not([hidden]){--univer-tw-divide-y-reverse: 0;border-top-width:calc(0px * (1 - var(--univer-tw-divide-y-reverse)));border-top-width:0;border-top-width:calc(0px * calc(1 - var(--univer-tw-divide-y-reverse)));border-bottom-width:0;border-bottom-width:calc(0px * var(--univer-tw-divide-y-reverse))}.univer-text-ellipsis{text-overflow:ellipsis}.univer-text-balance{text-wrap:balance}.\\!univer-rounded-b-none{border-bottom-right-radius:0!important;border-bottom-left-radius:0!important}.\\!univer-rounded-l-none{border-top-left-radius:0!important;border-bottom-left-radius:0!important}.\\!univer-rounded-r-none{border-top-right-radius:0!important;border-bottom-right-radius:0!important}.\\!univer-rounded-t-none{border-top-left-radius:0!important;border-top-right-radius:0!important}.univer-rounded-r-md{border-top-right-radius:.375rem;border-bottom-right-radius:.375rem}.\\!univer-border-l-0{border-left-width:0!important}.\\!univer-border-t-0{border-top-width:0!important}.univer-border-b-0{border-bottom-width:0}.univer-border-l{border-left-width:1px}.univer-border-l-0{border-left-width:0}.univer-border-r{border-right-width:1px}.univer-border-t{border-top-width:1px}.univer-border-t-0{border-top-width:0}.univer-border-dashed{border-style:dashed}.\\!univer-border-gray-200{border-color:var(--univer-gray-200)!important}.univer-border-gray-300{border-color:var(--univer-gray-300)}.univer-border-primary-200{border-color:var(--univer-primary-200)}.univer-border-primary-300{border-color:var(--univer-primary-300)}.univer-border-red-300{border-color:var(--univer-red-300)}.univer-border-red-500{border-color:var(--univer-red-500)}.univer-border-white{border-color:var(--univer-white)}.\\!univer-bg-primary-600{background-color:var(--univer-primary-600)!important}.univer-bg-\\[rgba\\(0\\,0\\,0\\,0\\.8\\)\\]{background-color:#000c}.univer-bg-gray-800{background-color:var(--univer-gray-800)}.univer-bg-gray-900{background-color:var(--univer-gray-900)}.univer-bg-primary-500{background-color:var(--univer-primary-500)}.univer-bg-red-500{background-color:var(--univer-red-500)}.univer-bg-sky-100\\/70{background-color:#e0f2feb3}.univer-bg-slate-100\\/80{background-color:#f1f5f9cc}.univer-bg-slate-900\\/90{background-color:#0f172ae6}.univer-bg-gradient-to-br{background-image:linear-gradient(to bottom right,var(--univer-tw-gradient-stops))}.univer-from-slate-100{--univer-tw-gradient-from: #f1f5f9 var(--univer-tw-gradient-from-position);--univer-tw-gradient-to: #f1f5f900 var(--univer-tw-gradient-to-position);--univer-tw-gradient-stops: var(--univer-tw-gradient-from), var(--univer-tw-gradient-to)}.univer-via-cyan-50{--univer-tw-gradient-to: #ecfeff00 var(--univer-tw-gradient-to-position);--univer-tw-gradient-stops: var(--univer-tw-gradient-from), #ecfeff var(--univer-tw-gradient-via-position), var(--univer-tw-gradient-to)}.univer-to-blue-100{--univer-tw-gradient-to: var(--univer-blue-100) var(--univer-tw-gradient-to-position)}.univer-fill-current{fill:currentColor}.\\!univer-p-2\\.5{padding:.625rem!important}.univer-p-6{padding:1.5rem}.\\!univer-pl-4{padding-left:1rem!important}.univer-pb-2\\.5{padding-bottom:.625rem}.univer-pl-8{padding-left:2rem}.univer-pr-32{padding-right:8rem}.univer-pr-8{padding-right:2rem}.univer-pt-4{padding-top:1rem}.univer-align-middle{vertical-align:middle}.univer-font-mono{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace}.univer-text-\\[13px\\]{font-size:13px}.univer-text-\\[8px\\]{font-size:8px}.univer-text-sm\\/8{font-size:.875rem;line-height:2rem}.univer-text-xs\\/6{font-size:.75rem;line-height:1.5rem}.univer-leading-9{line-height:2.25rem}.univer-leading-normal{line-height:1.5}.univer-tracking-wide{letter-spacing:.025em}.univer-tracking-widest{letter-spacing:.1em}.\\!univer-text-primary-500{color:var(--univer-primary-500)!important}.univer-text-amber-500{--univer-tw-text-opacity: 1;color:rgba(245,158,11,var(--univer-tw-text-opacity, 1))}.univer-text-cyan-700{--univer-tw-text-opacity: 1;color:rgba(14,116,144,var(--univer-tw-text-opacity, 1))}.univer-text-green-500{color:var(--univer-green-500)}.univer-text-sky-500{--univer-tw-text-opacity: 1;color:rgba(14,165,233,var(--univer-tw-text-opacity, 1))}.univer-text-sky-700{--univer-tw-text-opacity: 1;color:rgba(3,105,161,var(--univer-tw-text-opacity, 1))}.univer-text-sky-900{--univer-tw-text-opacity: 1;color:rgba(12,74,110,var(--univer-tw-text-opacity, 1))}.univer-text-slate-500{--univer-tw-text-opacity: 1;color:rgba(100,116,139,var(--univer-tw-text-opacity, 1))}.univer-text-slate-600{--univer-tw-text-opacity: 1;color:rgba(71,85,105,var(--univer-tw-text-opacity, 1))}.univer-text-slate-700{--univer-tw-text-opacity: 1;color:rgba(51,65,85,var(--univer-tw-text-opacity, 1))}.univer-text-slate-800{--univer-tw-text-opacity: 1;color:rgba(30,41,59,var(--univer-tw-text-opacity, 1))}.univer-text-violet-500{--univer-tw-text-opacity: 1;color:rgba(139,92,246,var(--univer-tw-text-opacity, 1))}.univer-underline-offset-4{text-underline-offset:4px}.univer-opacity-100{opacity:1}.univer-opacity-50{opacity:.5}.univer-opacity-80{opacity:.8}.univer-shadow-\\[0_30px_60px_-35px_rgba\\(15\\,23\\,42\\,0\\.55\\)\\]{--univer-tw-shadow: 0 30px 60px -35px #0f172a8c;--univer-tw-shadow-colored: 0 30px 60px -35px var(--univer-tw-shadow-color);box-shadow:0 0 #0000,0 0 #0000,0 30px 60px -35px #0f172a8c;box-shadow:var(--univer-tw-ring-offset-shadow, 0 0 #0000),var(--univer-tw-ring-shadow, 0 0 #0000),var(--univer-tw-shadow)}.univer-shadow-inner{--univer-tw-shadow: inset 0 2px 4px 0 #0000000d;--univer-tw-shadow-colored: inset 0 2px 4px 0 var(--univer-tw-shadow-color);box-shadow:0 0 #0000,0 0 #0000,inset 0 2px 4px #0000000d;box-shadow:var(--univer-tw-ring-offset-shadow, 0 0 #0000),var(--univer-tw-ring-shadow, 0 0 #0000),var(--univer-tw-shadow)}.univer-ring-2{--univer-tw-ring-offset-shadow: var(--univer-tw-ring-inset) 0 0 0 var(--univer-tw-ring-offset-width) var(--univer-tw-ring-offset-color);--univer-tw-ring-shadow: var(--univer-tw-ring-inset) 0 0 0 calc(2px + var(--univer-tw-ring-offset-width)) var(--univer-tw-ring-color);box-shadow:var(--univer-tw-ring-offset-shadow),var(--univer-tw-ring-shadow),0 0 #0000;box-shadow:var(--univer-tw-ring-offset-shadow),var(--univer-tw-ring-shadow),var(--univer-tw-shadow, 0 0 #0000)}.\\!univer-ring-primary-900{--univer-tw-ring-color: var(--univer-primary-900) !important}.univer-ring-primary-50{--univer-tw-ring-color: var(--univer-primary-50)}.univer-ring-white{--univer-tw-ring-color: var(--univer-white)}.univer-ring-offset-2{--univer-tw-ring-offset-width: 2px}.\\!univer-ring-offset-gray-600{--univer-tw-ring-offset-color: var(--univer-gray-600) !important}.univer-ring-offset-white{--univer-tw-ring-offset-color: var(--univer-white)}.univer-drop-shadow-sm{--univer-tw-drop-shadow: drop-shadow(0 1px 1px #0000000d);filter:var(--univer-tw-blur) var(--univer-tw-brightness) var(--univer-tw-contrast) var(--univer-tw-grayscale) var(--univer-tw-hue-rotate) var(--univer-tw-invert) var(--univer-tw-saturate) var(--univer-tw-sepia) var(--univer-tw-drop-shadow)}.univer-transition-\\[color\\,box-shadow\\]{transition-property:color,box-shadow;transition-duration:.15s;transition-timing-function:cubic-bezier(.4,0,.2,1)}.univer-transition-\\[max-height\\,opacity\\]{transition-property:max-height,opacity;transition-duration:.15s;transition-timing-function:cubic-bezier(.4,0,.2,1)}.univer-transition-opacity{transition-property:opacity;transition-duration:.15s;transition-timing-function:cubic-bezier(.4,0,.2,1)}.univer-transition-shadow{transition-property:box-shadow;transition-duration:.15s;transition-timing-function:cubic-bezier(.4,0,.2,1)}.univer-transition-transform{transition-property:transform;transition-duration:.15s;transition-timing-function:cubic-bezier(.4,0,.2,1)}.univer-duration-150{transition-duration:.15s}.univer-duration-500{transition-duration:.5s}.univer-duration-75{transition-duration:75ms}.univer-ease-in-out{transition-timing-function:cubic-bezier(.4,0,.2,1)}.univer-ease-out{transition-timing-function:cubic-bezier(0,0,.2,1)}.univer-will-change-transform{will-change:transform}.univer-scrollbar-thin::-webkit-scrollbar-track{background-color:var(--scrollbar-track);border-radius:var(--scrollbar-track-radius)}.univer-scrollbar-thin::-webkit-scrollbar-track:hover{background-color:var(--scrollbar-track-hover, var(--scrollbar-track))}.univer-scrollbar-thin::-webkit-scrollbar-track:active{background-color:var(--scrollbar-track-active, var(--scrollbar-track-hover, var(--scrollbar-track)))}.univer-scrollbar-thin::-webkit-scrollbar-thumb{background-color:var(--scrollbar-thumb);border-radius:var(--scrollbar-thumb-radius)}.univer-scrollbar-thin::-webkit-scrollbar-thumb:hover{background-color:var(--scrollbar-thumb-hover, var(--scrollbar-thumb))}.univer-scrollbar-thin::-webkit-scrollbar-thumb:active{background-color:var(--scrollbar-thumb-active, var(--scrollbar-thumb-hover, var(--scrollbar-thumb)))}.univer-scrollbar-thin::-webkit-scrollbar-corner{background-color:var(--scrollbar-corner);border-radius:var(--scrollbar-corner-radius)}.univer-scrollbar-thin::-webkit-scrollbar-corner:hover{background-color:var(--scrollbar-corner-hover, var(--scrollbar-corner))}.univer-scrollbar-thin::-webkit-scrollbar-corner:active{background-color:var(--scrollbar-corner-active, var(--scrollbar-corner-hover, var(--scrollbar-corner)))}.univer-scrollbar-thin{scrollbar-width:thin;scrollbar-color:initial initial;scrollbar-color:var(--scrollbar-thumb, initial) var(--scrollbar-track, initial)}.univer-scrollbar-thin::-webkit-scrollbar{width:8px;height:8px;display:block}.univer-scrollbar-track-gray-50{--scrollbar-track: var(--univer-gray-50) !important}.univer-scrollbar-thumb-gray-300{--scrollbar-thumb: var(--univer-gray-300) !important}.univer-animate-out{--univer-tw-exit-opacity: initial;--univer-tw-exit-scale: initial;--univer-tw-exit-rotate: initial;--univer-tw-exit-translate-x: initial;--univer-tw-exit-translate-y: initial;animation-name:exit;animation-duration:.15s}.univer-fade-in,.univer-fade-in-0{--univer-tw-enter-opacity: 0}.univer-fade-out{--univer-tw-exit-opacity: 0}.univer-zoom-in-95{--univer-tw-enter-scale: .95}.univer-duration-150{animation-duration:.15s}.univer-duration-200{animation-duration:.2s}.univer-duration-300{animation-duration:.3s}.univer-duration-500{animation-duration:.5s}.univer-duration-75{animation-duration:75ms}.univer-ease-in-out{animation-timing-function:cubic-bezier(.4,0,.2,1)}.univer-ease-out{animation-timing-function:cubic-bezier(0,0,.2,1)}.placeholder\\:univer-text-gray-200::placeholder{color:var(--univer-gray-200)}.placeholder\\:univer-text-gray-400::placeholder{color:var(--univer-gray-400)}.before\\:univer-absolute:before{content:var(--univer-tw-content);position:absolute}.before\\:univer-top-1\\/2:before{content:var(--univer-tw-content);top:50%}.before\\:univer-block:before{content:var(--univer-tw-content);display:block}.before\\:univer-h-px:before{content:var(--univer-tw-content);height:1px}.before\\:univer-w-full:before{content:var(--univer-tw-content);width:100%}.before\\:-univer-translate-y-1\\/2:before{content:var(--univer-tw-content);--univer-tw-translate-y: -50%;transform:translate(var(--univer-tw-translate-x),-50%) rotate(var(--univer-tw-rotate)) skew(var(--univer-tw-skew-x)) skewY(var(--univer-tw-skew-y)) scaleX(var(--univer-tw-scale-x)) scaleY(var(--univer-tw-scale-y));transform:translate(var(--univer-tw-translate-x),var(--univer-tw-translate-y)) rotate(var(--univer-tw-rotate)) skew(var(--univer-tw-skew-x)) skewY(var(--univer-tw-skew-y)) scaleX(var(--univer-tw-scale-x)) scaleY(var(--univer-tw-scale-y))}.before\\:univer-bg-gray-200:before{content:var(--univer-tw-content);background-color:var(--univer-gray-200)}.before\\:univer-content-\\[\\\"\\\"\\]:before{--univer-tw-content: \"\";content:\"\";content:var(--univer-tw-content)}.data-\\[disabled\\]\\:univer-pointer-events-none[data-disabled]{pointer-events:none}.data-\\[orientation\\=horizontal\\]\\:univer-h-px[data-orientation=horizontal]{height:1px}.data-\\[orientation\\=vertical\\]\\:univer-h-full[data-orientation=vertical]{height:100%}.data-\\[orientation\\=horizontal\\]\\:univer-w-full[data-orientation=horizontal]{width:100%}.data-\\[orientation\\=vertical\\]\\:univer-w-px[data-orientation=vertical]{width:1px}.data-\\[state\\=open\\]\\:univer-bg-gray-100[data-state=open]{background-color:var(--univer-gray-100)}.data-\\[disabled\\]\\:univer-opacity-50[data-disabled]{opacity:.5}.data-\\[state\\=open\\]\\:univer-animate-in[data-state=open]{--univer-tw-enter-opacity: initial;--univer-tw-enter-scale: initial;--univer-tw-enter-rotate: initial;--univer-tw-enter-translate-x: initial;--univer-tw-enter-translate-y: initial;animation-name:enter;animation-duration:.15s}.data-\\[state\\=closed\\]\\:univer-animate-out[data-state=closed]{--univer-tw-exit-opacity: initial;--univer-tw-exit-scale: initial;--univer-tw-exit-rotate: initial;--univer-tw-exit-translate-x: initial;--univer-tw-exit-translate-y: initial;animation-name:exit;animation-duration:.15s}.data-\\[state\\=closed\\]\\:univer-fade-out-0[data-state=closed]{--univer-tw-exit-opacity: 0}.data-\\[state\\=open\\]\\:univer-fade-in-0[data-state=open]{--univer-tw-enter-opacity: 0}.data-\\[state\\=closed\\]\\:univer-zoom-out-95[data-state=closed]{--univer-tw-exit-scale: .95}.data-\\[state\\=open\\]\\:univer-zoom-in-95[data-state=open]{--univer-tw-enter-scale: .95}.data-\\[side\\=bottom\\]\\:univer-slide-in-from-top-2[data-side=bottom]{--univer-tw-enter-translate-y: -.5rem}.data-\\[side\\=left\\]\\:univer-slide-in-from-right-2[data-side=left]{--univer-tw-enter-translate-x: .5rem}.data-\\[side\\=right\\]\\:univer-slide-in-from-left-2[data-side=right]{--univer-tw-enter-translate-x: -.5rem}.data-\\[side\\=top\\]\\:univer-slide-in-from-bottom-2[data-side=top]{--univer-tw-enter-translate-y: .5rem}.data-\\[state\\=closed\\]\\:univer-slide-out-to-left-1\\/2[data-state=closed]{--univer-tw-exit-translate-x: -50%}.data-\\[state\\=closed\\]\\:univer-slide-out-to-top-\\[48\\%\\][data-state=closed]{--univer-tw-exit-translate-y: -48%}.data-\\[state\\=open\\]\\:univer-slide-in-from-left-1\\/2[data-state=open]{--univer-tw-enter-translate-x: -50%}.data-\\[state\\=open\\]\\:univer-slide-in-from-top-\\[48\\%\\][data-state=open]{--univer-tw-enter-translate-y: -48%}.hover\\:univer-border-red-400:hover{border-color:var(--univer-red-400)}.hover\\:univer-border-transparent:hover{border-color:#0000}.hover\\:univer-bg-primary-500:hover{background-color:var(--univer-primary-500)}.hover\\:univer-bg-red-400:hover{background-color:var(--univer-red-400)}.hover\\:univer-text-gray-500:hover{color:var(--univer-gray-500)}.hover\\:univer-text-primary-500:hover{color:var(--univer-primary-500)}.hover\\:univer-text-white:hover{color:var(--univer-white)}.hover\\:univer-underline:hover{text-decoration-line:underline}.hover\\:univer-opacity-100:hover{opacity:1}.hover\\:univer-opacity-70:hover{opacity:.7}.hover\\:univer-opacity-80:hover{opacity:.8}.focus\\:univer-border-primary-600:focus{border-color:var(--univer-primary-600)}.focus\\:univer-bg-gray-100:focus{background-color:var(--univer-gray-100)}.focus\\:univer-ring-primary-50:focus{--univer-tw-ring-color: var(--univer-primary-50)}.active\\:univer-border-red-600:active{border-color:var(--univer-red-600)}.active\\:univer-bg-primary-700:active{background-color:var(--univer-primary-700)}.active\\:univer-bg-red-600:active{background-color:var(--univer-red-600)}.active\\:univer-text-primary-700:active{color:var(--univer-primary-700)}.disabled\\:univer-pointer-events-none:disabled{pointer-events:none}.disabled\\:univer-opacity-50:disabled{opacity:.5}@media(min-width:640px){.sm\\:\\!univer-flex-row{flex-direction:row!important}.sm\\:\\!univer-justify-end{justify-content:flex-end!important}.sm\\:\\!univer-space-x-2>:not([hidden])~:not([hidden]){--univer-tw-space-x-reverse: 0 !important;margin-right:0!important;margin-right:calc(.5rem * var(--univer-tw-space-x-reverse))!important;margin-left:calc(.5rem * (1 - var(--univer-tw-space-x-reverse)))!important;margin-left:.5rem!important;margin-left:calc(.5rem * calc(1 - var(--univer-tw-space-x-reverse)))!important}.sm\\:\\!univer-rounded-lg{border-radius:.5rem!important}.sm\\:\\!univer-text-left{text-align:left!important}}@media(min-width:768px){.md\\:univer-grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}}.rtl\\:univer-left-px:where([dir=rtl],[dir=rtl] *){left:1px}.rtl\\:univer-right-auto:where([dir=rtl],[dir=rtl] *){right:auto}.rtl\\:univer-rounded-l-md:where([dir=rtl],[dir=rtl] *){border-top-left-radius:.375rem;border-bottom-left-radius:.375rem}.rtl\\:univer-rounded-r-none:where([dir=rtl],[dir=rtl] *){border-top-right-radius:0;border-bottom-right-radius:0}.rtl\\:univer-border-l-0:where([dir=rtl],[dir=rtl] *){border-left-width:0}.rtl\\:univer-border-r:where([dir=rtl],[dir=rtl] *){border-right-width:1px}.dark\\:\\!univer-border-gray-500:where(.univer-dark,.univer-dark *){border-color:var(--univer-gray-500)!important}.dark\\:\\!univer-border-primary-700:where(.univer-dark,.univer-dark *){border-color:var(--univer-primary-700)!important}.dark\\:\\!univer-bg-gray-100:where(.univer-dark,.univer-dark *){background-color:var(--univer-gray-100)!important}.dark\\:\\!univer-bg-primary-600:where(.univer-dark,.univer-dark *){background-color:var(--univer-primary-600)!important}.dark\\:\\!univer-text-gray-900:where(.univer-dark,.univer-dark *){color:var(--univer-gray-900)!important}.dark\\:\\!univer-text-primary-500:where(.univer-dark,.univer-dark *){color:var(--univer-primary-500)!important}.dark\\:\\!univer-text-sky-400:where(.univer-dark,.univer-dark *){--univer-tw-text-opacity: 1 !important;color:rgba(56,189,248,var(--univer-tw-text-opacity, 1))!important}.dark\\:\\!univer-ring-primary-600:where(.univer-dark,.univer-dark *){--univer-tw-ring-color: var(--univer-primary-600) !important}.dark\\:\\!univer-ring-primary-900:where(.univer-dark,.univer-dark *){--univer-tw-ring-color: var(--univer-primary-900) !important}.dark\\:\\!univer-ring-offset-gray-600:where(.univer-dark,.univer-dark *){--univer-tw-ring-offset-color: var(--univer-gray-600) !important}.dark\\:\\!univer-scrollbar-track-gray-900:where(.univer-dark,.univer-dark *){--scrollbar-track: var(--univer-gray-900) !important}.dark\\:\\!univer-scrollbar-thumb-gray-700:where(.univer-dark,.univer-dark *){--scrollbar-thumb: var(--univer-gray-700) !important}.dark\\:before\\:\\!univer-bg-gray-600:where(.univer-dark,.univer-dark *):before{content:var(--univer-tw-content);background-color:var(--univer-gray-600)!important}.dark\\:data-\\[state\\=open\\]\\:\\!univer-bg-gray-600[data-state=open]:where(.univer-dark,.univer-dark *){background-color:var(--univer-gray-600)!important}.dark\\:hover\\:\\!univer-text-white:hover:where(.univer-dark,.univer-dark *){color:var(--univer-white)!important}.dark\\:focus\\:\\!univer-border-primary-500:focus:where(.univer-dark,.univer-dark *){border-color:var(--univer-primary-500)!important}.dark\\:focus\\:\\!univer-bg-gray-600:focus:where(.univer-dark,.univer-dark *){background-color:var(--univer-gray-600)!important}.dark\\:focus\\:\\!univer-ring-primary-900:focus:where(.univer-dark,.univer-dark *){--univer-tw-ring-color: var(--univer-primary-900) !important}.dark\\:focus-visible\\:\\!univer-border-gray-600:focus-visible:where(.univer-dark,.univer-dark *){border-color:var(--univer-gray-600)!important}.dark\\:active\\:\\!univer-bg-gray-700:active:where(.univer-dark,.univer-dark *){background-color:var(--univer-gray-700)!important}.\\[\\&\\:\\:-webkit-calendar-picker-indicator\\]\\:univer-hidden::-webkit-calendar-picker-indicator{display:none}.\\[\\&\\:\\:-webkit-calendar-picker-indicator\\]\\:univer-appearance-none::-webkit-calendar-picker-indicator{-webkit-appearance:none;appearance:none}.\\[\\&\\>input\\]\\:univer-w-11>input{width:2.75rem}.\\[\\&\\>input\\]\\:univer-border-gray-200>input{border-color:var(--univer-gray-200)}.\\[\\&\\>input\\]\\:focus\\:univer-border-primary-500:focus>input{border-color:var(--univer-primary-500)}.dark\\:\\[\\&\\>input\\]\\:\\!univer-border-gray-600>input:where(.univer-dark,.univer-dark *){border-color:var(--univer-gray-600)!important}.dark\\:\\[\\&\\>input\\]\\:\\!univer-text-white>input:where(.univer-dark,.univer-dark *){color:var(--univer-white)!important}.\\[\\&\\>svg\\]\\:univer-block>svg{display:block}.\\[\\&\\>svg\\]\\:univer-size-4>svg{width:1rem;height:1rem}.\\[\\&\\>ul\\:not\\(\\:last-child\\)\\]\\:univer-border-0>ul:not(:last-child){border-width:0}.\\[\\&\\>ul\\:not\\(\\:last-child\\)\\]\\:univer-border-r>ul:not(:last-child){border-right-width:1px}.\\[\\&\\>ul\\:not\\(\\:last-child\\)\\]\\:univer-border-solid>ul:not(:last-child){border-style:solid}.\\[\\&\\>ul\\:not\\(\\:last-child\\)\\]\\:univer-border-r-gray-200>ul:not(:last-child){border-right-color:var(--univer-gray-200)}.\\[\\&_\\[data-description\\]\\]\\:univer-text-sm [data-description]{font-size:.875rem;line-height:1.25rem}.\\[\\&_\\[data-description\\]\\]\\:univer-text-gray-200 [data-description]{color:var(--univer-gray-200)}.\\[\\&_\\[data-description\\]\\]\\:univer-text-gray-600 [data-description]{color:var(--univer-gray-600)}.\\[\\&_\\[data-icon\\]\\>svg\\]\\:univer-relative [data-icon]>svg{position:relative}.\\[\\&_\\[data-icon\\]\\>svg\\]\\:univer-top-1 [data-icon]>svg{top:.25rem}.\\[\\&_\\[data-icon\\]\\]\\:univer-self-baseline [data-icon]{align-self:baseline}.\\[\\&_\\[data-icon\\]\\]\\:univer-text-amber-500 [data-icon]{--univer-tw-text-opacity: 1;color:rgba(245,158,11,var(--univer-tw-text-opacity, 1))}.\\[\\&_\\[data-icon\\]\\]\\:univer-text-green-500 [data-icon]{color:var(--univer-green-500)}.\\[\\&_\\[data-icon\\]\\]\\:univer-text-primary-600 [data-icon]{color:var(--univer-primary-600)}.\\[\\&_\\[data-icon\\]\\]\\:univer-text-red-500 [data-icon]{color:var(--univer-red-500)}.\\[\\&_\\[data-icon\\]\\]\\:univer-text-sky-500 [data-icon]{--univer-tw-text-opacity: 1;color:rgba(14,165,233,var(--univer-tw-text-opacity, 1))}.\\[\\&_\\[data-icon\\]\\]\\:univer-text-violet-500 [data-icon]{--univer-tw-text-opacity: 1;color:rgba(139,92,246,var(--univer-tw-text-opacity, 1))}.\\[\\&_\\[data-icon\\]\\]\\:univer-text-yellow-500 [data-icon]{color:var(--univer-yellow-500)}.\\[\\&_\\[data-sonner-toast\\]\\]\\:univer-rounded-2xl [data-sonner-toast]{border-radius:1rem}.\\[\\&_\\[data-sonner-toast\\]\\]\\:univer-border [data-sonner-toast]{border-width:1px}.\\[\\&_\\[data-sonner-toast\\]\\]\\:univer-border-solid [data-sonner-toast]{border-style:solid}.\\[\\&_\\[data-sonner-toast\\]\\]\\:univer-border-gray-200 [data-sonner-toast]{border-color:var(--univer-gray-200)}.\\[\\&_\\[data-sonner-toast\\]\\]\\:univer-shadow-\\[0_16px_40px_-20px_rgba\\(15\\,23\\,42\\,0\\.55\\)\\] [data-sonner-toast]{--univer-tw-shadow: 0 16px 40px -20px #0f172a8c;--univer-tw-shadow-colored: 0 16px 40px -20px var(--univer-tw-shadow-color);box-shadow:0 0 #0000,0 0 #0000,0 16px 40px -20px #0f172a8c;box-shadow:var(--univer-tw-ring-offset-shadow, 0 0 #0000),var(--univer-tw-ring-shadow, 0 0 #0000),var(--univer-tw-shadow)}.\\[\\&_\\[data-sonner-toast\\]\\]\\:univer-shadow-md [data-sonner-toast]{--univer-tw-shadow: 0px 1px 6px -2px #1e284d14, 0px 2px 6px -1px #1e284d1a;--univer-tw-shadow-colored: 0px 1px 6px -2px var(--univer-tw-shadow-color), 0px 2px 6px -1px var(--univer-tw-shadow-color);box-shadow:0 0 #0000,0 0 #0000,0 1px 6px -2px #1e284d14,0 2px 6px -1px #1e284d1a;box-shadow:var(--univer-tw-ring-offset-shadow, 0 0 #0000),var(--univer-tw-ring-shadow, 0 0 #0000),var(--univer-tw-shadow)}.\\[\\&_\\[data-sonner-toast\\]\\]\\:univer-backdrop-blur-sm [data-sonner-toast]{--univer-tw-backdrop-blur: blur(4px);backdrop-filter:var(--univer-tw-backdrop-blur) var(--univer-tw-backdrop-brightness) var(--univer-tw-backdrop-contrast) var(--univer-tw-backdrop-grayscale) var(--univer-tw-backdrop-hue-rotate) var(--univer-tw-backdrop-invert) var(--univer-tw-backdrop-opacity) var(--univer-tw-backdrop-saturate) var(--univer-tw-backdrop-sepia)}.dark\\:\\[\\&_\\[data-sonner-toast\\]\\]\\:\\!univer-border-gray-600 [data-sonner-toast]:where(.univer-dark,.univer-dark *){border-color:var(--univer-gray-600)!important}.\\[\\&_\\[data-title\\]\\]\\:univer-text-sm [data-title]{font-size:.875rem;line-height:1.25rem}.\\[\\&_\\[data-title\\]\\]\\:univer-text-gray-900 [data-title]{color:var(--univer-gray-900)}.\\[\\&_\\[data-u-comp\\=form-layout\\]\\]\\:univer-max-w-\\[calc\\(50\\%-8px\\)\\] [data-u-comp=form-layout]{max-width:calc(50% - 8px)}.\\[\\&_\\[data-u-comp\\=form-layout\\]\\]\\:univer-shrink [data-u-comp=form-layout]{flex-shrink:1}.\\[\\&_\\[data-u-comp\\=form-layout\\]\\]\\:univer-grow [data-u-comp=form-layout]{flex-grow:1}.\\[\\&_\\[data-u-comp\\=input\\]\\]\\:univer-w-full [data-u-comp=input]{width:100%}.\\[\\&_\\[data-u-comp\\=input\\]\\]\\:univer-border-red-500 [data-u-comp=input]{border-color:var(--univer-red-500)}.\\[\\&_\\[data-u-comp\\=pager-left-arrow\\]\\:hover\\]\\:\\!univer-bg-gray-600 [data-u-comp=pager-left-arrow]:hover,.\\[\\&_\\[data-u-comp\\=pager-right-arrow\\]\\:hover\\]\\:\\!univer-bg-gray-600 [data-u-comp=pager-right-arrow]:hover{background-color:var(--univer-gray-600)!important}.\\[\\&_\\[data-u-comp\\=select\\]\\]\\:univer-w-full [data-u-comp=select]{width:100%}.\\[\\&_\\[data-u-comp\\=select\\]\\]\\:univer-border-red-500 [data-u-comp=select]{border-color:var(--univer-red-500)}.\\[\\&_input\\]\\:univer-box-border input{box-sizing:border-box}.\\[\\&_input\\]\\:univer-flex input{display:flex}.\\[\\&_input\\]\\:univer-h-7 input{height:1.75rem}.\\[\\&_input\\]\\:univer-items-center input{align-items:center}.\\[\\&_input\\]\\:univer-rounded input{border-radius:.25rem}.\\[\\&_input\\]\\:univer-border input{border-width:1px}.\\[\\&_input\\]\\:univer-border-solid input{border-style:solid}.\\[\\&_input\\]\\:univer-border-gray-200 input{border-color:var(--univer-gray-200)}.\\[\\&_input\\]\\:univer-border-gray-600 input{border-color:var(--univer-gray-600)}.\\[\\&_input\\]\\:univer-bg-transparent input{background-color:#0000}.\\[\\&_input\\]\\:univer-px-1\\.5 input{padding-left:.375rem;padding-right:.375rem}.\\[\\&_input\\]\\:univer-text-gray-700 input{color:var(--univer-gray-700)}.\\[\\&_input\\]\\:univer-text-white input{color:var(--univer-white)}.\\[\\&_input\\]\\:univer-outline-none input{outline-offset:2px;outline:2px solid #0000}.\\[\\&_svg\\]\\:univer-pointer-events-none svg{pointer-events:none}.\\[\\&_svg\\]\\:univer-size-4 svg{width:1rem;height:1rem}.\\[\\&_svg\\]\\:univer-shrink-0 svg{flex-shrink:0}.univer-popup{z-index:1070;--univer-tw-shadow: 0 1px 3px 0 #0000001a, 0 1px 2px -1px #0000001a;--univer-tw-shadow-colored: 0 1px 3px 0 var(--univer-tw-shadow-color), 0 1px 2px -1px var(--univer-tw-shadow-color);box-shadow:0 0 #0000,0 0 #0000,0 1px 3px #0000001a,0 1px 2px -1px #0000001a;box-shadow:var(--univer-tw-ring-offset-shadow, 0 0 #0000),var(--univer-tw-ring-shadow, 0 0 #0000),var(--univer-tw-shadow);border-radius:6px;position:fixed;top:-9999px;left:-9999px;overflow:hidden}.univer-popup-enter{transform-origin:0 0;opacity:0;animation-duration:.15s;animation-timing-function:cubic-bezier(.08,.82,.17,1);animation-play-state:paused;animation-fill-mode:both}.univer-popup-enter-active{animation-name:popup-slide-up-in;animation-play-state:running}.univer-popup-exit{transform-origin:0 0;opacity:1;animation-name:popup-slide-up-out;animation-duration:.15s;animation-timing-function:cubic-bezier(.6,.04,.98,.34);animation-play-state:running;animation-fill-mode:both}.univer-popup-exit-active{display:none}@keyframes popup-slide-up-in{0%{transform-origin:0 0;opacity:0;transform:scaleY(0)}to{transform-origin:0 0;opacity:1;transform:scaleY(1)}}@keyframes popup-slide-up-out{0%{transform-origin:0 0;opacity:1;transform:scaleY(1)}to{transform-origin:0 0;opacity:0;transform:scaleY(0)}}.univer-popup-mask{z-index:1060;position:fixed;inset:0}.univer-pointer-events-auto{pointer-events:auto}.univer-invisible{visibility:hidden}.univer-sticky{position:sticky}.-univer-left-\\[99999\\]{left:-99999px}.-univer-top-\\[99999\\]{top:-99999px}.univer-left-1\\/2{left:50%}.univer-left-\\[-9999px\\]{left:-9999px}.univer-right-2{right:.5rem}.univer-top-\\[-9999px\\]{top:-9999px}.univer-top-\\[calc\\(50\\%-6px\\)\\]{top:calc(50% - 6px)}.univer-z-20{z-index:20}.univer-z-\\[-1\\]{z-index:-1}.univer-z-\\[1020\\]{z-index:1020}.univer-z-\\[1080\\]{z-index:1080}.univer-z-\\[1\\]{z-index:1}.univer-mx-2{margin-left:.5rem;margin-right:.5rem}.univer-mx-auto{margin-left:auto;margin-right:auto}.univer-mt-6{margin-top:1.5rem}.univer-line-clamp-2{-webkit-line-clamp:2;-webkit-box-orient:vertical;display:-webkit-box;overflow:hidden}.\\!univer-size-3\\.5{width:.875rem!important;height:.875rem!important}.univer-size-12{width:3rem;height:3rem}.univer-size-3\\.5{width:.875rem;height:.875rem}.univer-size-7{width:1.75rem;height:1.75rem}.univer-size-9{width:2.25rem;height:2.25rem}.univer-h-0{height:0}.univer-h-1\\.5{height:.375rem}.univer-max-h-\\[80vh\\]{max-height:80vh}.univer-max-h-\\[min\\(72vh\\,560px\\)\\]{max-height:min(72vh,560px)}.univer-min-h-\\[560px\\]{min-height:560px}.univer-min-h-\\[56px\\]{min-height:56px}.univer-min-h-full{min-height:100%}.univer-w-0{width:0}.univer-w-1{width:.25rem}.univer-w-10{width:2.5rem}.univer-w-40{width:10rem}.univer-w-7{width:1.75rem}.univer-w-8{width:2rem}.univer-w-96{width:24rem}.univer-w-max{width:max-content}.univer-w-screen{width:100vw}.univer-min-w-52{min-width:13rem}.univer-min-w-6{min-width:1.5rem}.univer-min-w-min{min-width:min-content}.univer-max-w-3xl{max-width:48rem}.univer-max-w-5xl{max-width:64rem}.univer-max-w-96{max-width:24rem}.univer-max-w-\\[--radix-popper-available-width\\]{max-width:var(--radix-popper-available-width)}.univer-max-w-\\[32\\%\\]{max-width:32%}.univer-max-w-\\[560px\\]{max-width:560px}.univer-max-w-\\[calc\\(100vw-16px\\)\\]{max-width:calc(100vw - 16px)}.univer-max-w-full{max-width:100%}.univer-origin-center{transform-origin:center}.-univer-translate-x-1\\/2{--univer-tw-translate-x: -50%;transform:translate(-50%,var(--univer-tw-translate-y)) rotate(var(--univer-tw-rotate)) skew(var(--univer-tw-skew-x)) skewY(var(--univer-tw-skew-y)) scaleX(var(--univer-tw-scale-x)) scaleY(var(--univer-tw-scale-y));transform:translate(var(--univer-tw-translate-x),var(--univer-tw-translate-y)) rotate(var(--univer-tw-rotate)) skew(var(--univer-tw-skew-x)) skewY(var(--univer-tw-skew-y)) scaleX(var(--univer-tw-scale-x)) scaleY(var(--univer-tw-scale-y))}.univer-translate-x-0{--univer-tw-translate-x: 0px;transform:translateY(var(--univer-tw-translate-y)) rotate(var(--univer-tw-rotate)) skew(var(--univer-tw-skew-x)) skewY(var(--univer-tw-skew-y)) scaleX(var(--univer-tw-scale-x)) scaleY(var(--univer-tw-scale-y));transform:translate(var(--univer-tw-translate-x),var(--univer-tw-translate-y)) rotate(var(--univer-tw-rotate)) skew(var(--univer-tw-skew-x)) skewY(var(--univer-tw-skew-y)) scaleX(var(--univer-tw-scale-x)) scaleY(var(--univer-tw-scale-y))}.univer-translate-x-full{--univer-tw-translate-x: 100%;transform:translate(100%,var(--univer-tw-translate-y)) rotate(var(--univer-tw-rotate)) skew(var(--univer-tw-skew-x)) skewY(var(--univer-tw-skew-y)) scaleX(var(--univer-tw-scale-x)) scaleY(var(--univer-tw-scale-y));transform:translate(var(--univer-tw-translate-x),var(--univer-tw-translate-y)) rotate(var(--univer-tw-rotate)) skew(var(--univer-tw-skew-x)) skewY(var(--univer-tw-skew-y)) scaleX(var(--univer-tw-scale-x)) scaleY(var(--univer-tw-scale-y))}.univer-cursor-col-resize{cursor:col-resize}.univer-grid-cols-\\[1fr\\]{grid-template-columns:1fr}.univer-grid-cols-\\[22px_minmax\\(0\\,1fr\\)_22px\\]{grid-template-columns:22px minmax(0,1fr) 22px}.univer-grid-cols-\\[28px_minmax\\(0\\,1fr\\)_auto\\]{grid-template-columns:28px minmax(0,1fr) auto}.univer-grid-cols-\\[32px_minmax\\(0\\,1fr\\)_32px\\]{grid-template-columns:32px minmax(0,1fr) 32px}.univer-grid-cols-\\[auto\\,1fr\\]{grid-template-columns:auto 1fr}.univer-grid-cols-\\[auto_1fr_auto\\]{grid-template-columns:auto 1fr auto}.univer-grid-rows-\\[100\\%\\]{grid-template-rows:100%}.univer-grid-rows-\\[auto_1fr\\]{grid-template-rows:auto 1fr}.univer-grid-rows-\\[auto_1fr_auto\\]{grid-template-rows:auto 1fr auto}.univer-flex-wrap{flex-wrap:wrap}.univer-items-end{align-items:flex-end}.univer-gap-0\\.5{gap:.125rem}.univer-overscroll-contain{overscroll-behavior:contain}.univer-scroll-smooth{scroll-behavior:smooth}.\\!univer-rounded-full{border-radius:9999px!important}.\\!univer-rounded-xl{border-radius:.75rem!important}.univer-rounded-2xl{border-radius:1rem}.univer-rounded-3xl{border-radius:1.5rem}.univer-rounded-xl{border-radius:.75rem}.univer-rounded-r{border-top-right-radius:.25rem;border-bottom-right-radius:.25rem}.univer-rounded-t-\\[28px\\]{border-top-left-radius:28px;border-top-right-radius:28px}.univer-border-0{border-width:0}.\\!univer-bg-gray-200{background-color:var(--univer-gray-200)!important}.\\!univer-bg-gray-500{background-color:var(--univer-gray-500)!important}.univer-bg-\\[rgba\\(15\\,23\\,42\\,0\\.32\\)\\]{background-color:#0f172a52}.univer-bg-gray-300{background-color:var(--univer-gray-300)}.univer-bg-gray-50{background-color:var(--univer-gray-50)}.univer-bg-gray-700{background-color:var(--univer-gray-700)}.univer-bg-primary-50{background-color:var(--univer-primary-50)}.univer-bg-gradient-to-tr{background-image:linear-gradient(to top right,var(--univer-tw-gradient-stops))}.univer-from-slate-950{--univer-tw-gradient-from: #020617 var(--univer-tw-gradient-from-position);--univer-tw-gradient-to: #02061700 var(--univer-tw-gradient-to-position);--univer-tw-gradient-stops: var(--univer-tw-gradient-from), var(--univer-tw-gradient-to)}.univer-via-blue-950{--univer-tw-gradient-to: #17255400 var(--univer-tw-gradient-to-position);--univer-tw-gradient-stops: var(--univer-tw-gradient-from), #172554 var(--univer-tw-gradient-via-position), var(--univer-tw-gradient-to)}.univer-to-cyan-900{--univer-tw-gradient-to: #164e63 var(--univer-tw-gradient-to-position)}.univer-p-8{padding:2rem}.univer-px-0{padding-left:0;padding-right:0}.univer-px-0\\.5{padding-left:.125rem;padding-right:.125rem}.univer-px-3{padding-left:.75rem;padding-right:.75rem}.univer-pb-2{padding-bottom:.5rem}.univer-pl-2{padding-left:.5rem}.univer-pl-4{padding-left:1rem}.univer-pr-1\\.5{padding-right:.375rem}.univer-pt-3{padding-top:.75rem}.univer-text-left{text-align:left}.univer-text-right{text-align:right}.univer-font-sans{font-family:ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,Noto Sans,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol,Noto Color Emoji}.univer-text-2xl{font-size:1.5rem;line-height:2rem}.univer-uppercase{text-transform:uppercase}.univer-leading-4{line-height:1rem}.univer-leading-none{line-height:1}.univer-tracking-\\[0\\.08em\\]{letter-spacing:.08em}.univer-tracking-tight{letter-spacing:-.025em}.\\!univer-text-gray-600{color:var(--univer-gray-600)!important}.univer-text-current{color:currentColor}.univer-text-slate-200{--univer-tw-text-opacity: 1;color:rgba(226,232,240,var(--univer-tw-text-opacity, 1))}.univer-underline{text-decoration-line:underline}.univer-opacity-0{opacity:0}.univer-opacity-30{opacity:.3}.univer-opacity-40{opacity:.4}.univer-opacity-60{opacity:.6}.univer-shadow-\\[0_-16px_48px_rgba\\(15\\,23\\,42\\,0\\.18\\)\\]{--univer-tw-shadow: 0 -16px 48px #0f172a2e;--univer-tw-shadow-colored: 0 -16px 48px var(--univer-tw-shadow-color);box-shadow:0 0 #0000,0 0 #0000,0 -16px 48px #0f172a2e;box-shadow:var(--univer-tw-ring-offset-shadow, 0 0 #0000),var(--univer-tw-ring-shadow, 0 0 #0000),var(--univer-tw-shadow)}.univer-ring-0{--univer-tw-ring-offset-shadow: var(--univer-tw-ring-inset) 0 0 0 var(--univer-tw-ring-offset-width) var(--univer-tw-ring-offset-color);--univer-tw-ring-shadow: var(--univer-tw-ring-inset) 0 0 0 calc(0px + var(--univer-tw-ring-offset-width)) var(--univer-tw-ring-color);box-shadow:var(--univer-tw-ring-offset-shadow),var(--univer-tw-ring-shadow),0 0 #0000;box-shadow:var(--univer-tw-ring-offset-shadow),var(--univer-tw-ring-shadow),var(--univer-tw-shadow, 0 0 #0000)}.univer-ring-primary-600{--univer-tw-ring-color: var(--univer-primary-600)}.univer-backdrop-blur-\\[2px\\]{--univer-tw-backdrop-blur: blur(2px);backdrop-filter:var(--univer-tw-backdrop-blur) var(--univer-tw-backdrop-brightness) var(--univer-tw-backdrop-contrast) var(--univer-tw-backdrop-grayscale) var(--univer-tw-backdrop-hue-rotate) var(--univer-tw-backdrop-invert) var(--univer-tw-backdrop-opacity) var(--univer-tw-backdrop-saturate) var(--univer-tw-backdrop-sepia)}.univer-backdrop-blur-xl{--univer-tw-backdrop-blur: blur(24px);backdrop-filter:var(--univer-tw-backdrop-blur) var(--univer-tw-backdrop-brightness) var(--univer-tw-backdrop-contrast) var(--univer-tw-backdrop-grayscale) var(--univer-tw-backdrop-hue-rotate) var(--univer-tw-backdrop-invert) var(--univer-tw-backdrop-opacity) var(--univer-tw-backdrop-saturate) var(--univer-tw-backdrop-sepia)}.univer-transition-\\[width\\]{transition-property:width;transition-duration:.15s;transition-timing-function:cubic-bezier(.4,0,.2,1)}@keyframes enter{0%{opacity:1;opacity:var(--univer-tw-enter-opacity, 1);transform:translateZ(0) scaleZ(1) rotate(0);transform:translate3d(var(--univer-tw-enter-translate-x, 0),var(--univer-tw-enter-translate-y, 0),0) scale3d(var(--univer-tw-enter-scale, 1),var(--univer-tw-enter-scale, 1),var(--univer-tw-enter-scale, 1)) rotate(var(--univer-tw-enter-rotate, 0))}}@keyframes exit{to{opacity:1;opacity:var(--univer-tw-exit-opacity, 1);transform:translateZ(0) scaleZ(1) rotate(0);transform:translate3d(var(--univer-tw-exit-translate-x, 0),var(--univer-tw-exit-translate-y, 0),0) scale3d(var(--univer-tw-exit-scale, 1),var(--univer-tw-exit-scale, 1),var(--univer-tw-exit-scale, 1)) rotate(var(--univer-tw-exit-rotate, 0))}}.univer-animate-in{--univer-tw-enter-opacity: initial;--univer-tw-enter-scale: initial;--univer-tw-enter-rotate: initial;--univer-tw-enter-translate-x: initial;--univer-tw-enter-translate-y: initial;animation-name:enter;animation-duration:.15s}.univer-fade-in{--univer-tw-enter-opacity: 0}.univer-fade-in-70{--univer-tw-enter-opacity: .7}.last\\:univer-border-b-0:last-child{border-bottom-width:0}.empty\\:univer-hidden:empty{display:none}.hover\\:univer-opacity-50:hover{opacity:.5}.focus\\:univer-bg-white:focus{background-color:var(--univer-white)}.focus\\:univer-ring-2:focus{--univer-tw-ring-offset-shadow: var(--univer-tw-ring-inset) 0 0 0 var(--univer-tw-ring-offset-width) var(--univer-tw-ring-offset-color);--univer-tw-ring-shadow: var(--univer-tw-ring-inset) 0 0 0 calc(2px + var(--univer-tw-ring-offset-width)) var(--univer-tw-ring-color);box-shadow:var(--univer-tw-ring-offset-shadow),var(--univer-tw-ring-shadow),0 0 #0000;box-shadow:var(--univer-tw-ring-offset-shadow),var(--univer-tw-ring-shadow),var(--univer-tw-shadow, 0 0 #0000)}.focus-visible\\:univer-ring-primary-600:focus-visible{--univer-tw-ring-color: var(--univer-primary-600)}.focus-visible\\:univer-ring-offset-0:focus-visible{--univer-tw-ring-offset-width: 0px}.active\\:univer-bg-gray-200:active{background-color:var(--univer-gray-200)}.enabled\\:hover\\:univer-bg-gray-50:hover:enabled{background-color:var(--univer-gray-50)}.enabled\\:active\\:univer-bg-gray-100:active:enabled{background-color:var(--univer-gray-100)}.disabled\\:univer-cursor-not-allowed:disabled{cursor:not-allowed}.disabled\\:univer-text-gray-300:disabled{color:var(--univer-gray-300)}.disabled\\:univer-opacity-40:disabled{opacity:.4}.disabled\\:hover\\:univer-bg-transparent:hover:disabled{background-color:#0000}@media(min-width:640px){.sm\\:\\!univer-block{display:block!important}}.rtl\\:univer-pl-1\\.5:where([dir=rtl],[dir=rtl] *){padding-left:.375rem}.rtl\\:univer-pr-0:where([dir=rtl],[dir=rtl] *){padding-right:0}.rtl\\:univer-pr-2:where([dir=rtl],[dir=rtl] *){padding-right:.5rem}.dark\\:\\!univer-bg-gray-200:where(.univer-dark,.univer-dark *){background-color:var(--univer-gray-200)!important}.dark\\:\\!univer-bg-primary-400:where(.univer-dark,.univer-dark *){background-color:var(--univer-primary-400)!important}.dark\\:\\!univer-text-gray-500:where(.univer-dark,.univer-dark *){color:var(--univer-gray-500)!important}.dark\\:\\!univer-text-gray-600:where(.univer-dark,.univer-dark *){color:var(--univer-gray-600)!important}.dark\\:\\!univer-text-gray-800:where(.univer-dark,.univer-dark *){color:var(--univer-gray-800)!important}.dark\\:\\!univer-text-primary-100:where(.univer-dark,.univer-dark *){color:var(--univer-primary-100)!important}.dark\\:\\!univer-text-primary-300:where(.univer-dark,.univer-dark *){color:var(--univer-primary-300)!important}.dark\\:\\!univer-text-primary-400:where(.univer-dark,.univer-dark *){color:var(--univer-primary-400)!important}.dark\\:hover\\:\\!univer-bg-gray-900:hover:where(.univer-dark,.univer-dark *){background-color:var(--univer-gray-900)!important}.dark\\:hover\\:\\!univer-bg-transparent:hover:where(.univer-dark,.univer-dark *){background-color:#0000!important}.dark\\:active\\:\\!univer-bg-gray-600:active:where(.univer-dark,.univer-dark *){background-color:var(--univer-gray-600)!important}.dark\\:disabled\\:\\!univer-text-gray-600:disabled:where(.univer-dark,.univer-dark *){color:var(--univer-gray-600)!important}.\\[\\&\\:\\:-webkit-scrollbar\\]\\:univer-hidden::-webkit-scrollbar{display:none}.\\[\\&\\>\\*\\]\\:univer-m-0>*{margin:0}.\\[\\&\\>\\*\\]\\:univer-inline-flex>*{display:inline-flex}.\\[\\&\\>\\*\\]\\:univer-h-6>*{height:1.5rem}.\\[\\&\\>\\*\\]\\:univer-min-h-7>*{min-height:1.75rem}.\\[\\&\\>\\*\\]\\:univer-min-w-7>*{min-width:1.75rem}.\\[\\&\\>\\*\\]\\:univer-appearance-none>*{-webkit-appearance:none;appearance:none}.\\[\\&\\>\\*\\]\\:univer-items-center>*{align-items:center}.\\[\\&\\>\\*\\]\\:univer-justify-center>*{justify-content:center}.\\[\\&\\>\\*\\]\\:univer-rounded>*{border-radius:.25rem}.\\[\\&\\>\\*\\]\\:univer-rounded-md>*{border-radius:.375rem}.\\[\\&\\>\\*\\]\\:univer-border-0>*{border-width:0}.\\[\\&\\>\\*\\]\\:univer-px-1>*{padding-left:.25rem;padding-right:.25rem}.\\[\\&\\>\\*\\]\\:univer-px-1\\.5>*{padding-left:.375rem;padding-right:.375rem}.\\[\\&\\>\\*\\]\\:univer-leading-none>*{line-height:1}.\\[\\&\\>\\*\\]\\:univer-outline-none>*{outline-offset:2px;outline:2px solid #0000}.\\[\\&\\>\\*\\]\\:univer-transition-colors>*{transition-property:color,background-color,border-color,text-decoration-color,fill,stroke;transition-duration:.15s;transition-timing-function:cubic-bezier(.4,0,.2,1)}.hover\\:\\[\\&\\>\\*\\]\\:univer-bg-gray-100>:hover{background-color:var(--univer-gray-100)}.\\[\\&\\>span\\]\\:univer-truncate>span{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.\\[\\&\\>span\\]\\:univer-text-sm>span{font-size:.875rem;line-height:1.25rem}.\\[\\&\\>span\\]\\:univer-font-medium>span{font-weight:500}.\\[\\&\\>svg\\]\\:univer-shrink-0>svg{flex-shrink:0}.\\[\\&\\>svg\\]\\:univer-text-lg>svg{font-size:1.125rem;line-height:1.75rem}.\\[\\&\\>svg\\]\\:univer-text-gray-700>svg{color:var(--univer-gray-700)}.\\[\\&_\\*\\]\\:univer-box-border *{box-sizing:border-box}.\\[\\&_\\.univer-custom-label\\]\\:univer-text-sm .univer-custom-label{font-size:.875rem;line-height:1.25rem}.\\[\\&_\\.univer-custom-label\\]\\:univer-leading-none .univer-custom-label{line-height:1}.\\[\\&_\\.univer-toolbar-button-selector-main\\]\\:\\!univer-h-8 .univer-toolbar-button-selector-main{height:2rem!important}.\\[\\&_\\.univer-toolbar-button-selector-main\\]\\:\\!univer-rounded-none .univer-toolbar-button-selector-main{border-radius:0!important}.\\[\\&_\\.univer-toolbar-button-selector-main\\]\\:\\!univer-rounded-l-md .univer-toolbar-button-selector-main{border-top-left-radius:.375rem!important;border-bottom-left-radius:.375rem!important}.\\[\\&_\\.univer-toolbar-button-selector-main\\]\\:\\!univer-px-1\\.5 .univer-toolbar-button-selector-main{padding-left:.375rem!important;padding-right:.375rem!important}.\\[\\&_\\.univer-toolbar-button-selector-root\\]\\:\\!univer-h-8 .univer-toolbar-button-selector-root{height:2rem!important}.\\[\\&_\\.univer-toolbar-button-selector-root\\]\\:univer-overflow-hidden .univer-toolbar-button-selector-root{overflow:hidden}.\\[\\&_\\.univer-toolbar-button-selector-root\\]\\:\\!univer-rounded-md .univer-toolbar-button-selector-root{border-radius:.375rem!important}.\\[\\&_\\.univer-toolbar-button-selector-root\\]\\:\\!univer-pr-0 .univer-toolbar-button-selector-root{padding-right:0!important}.\\[\\&_\\.univer-toolbar-button-selector-trigger\\]\\:\\!univer-static .univer-toolbar-button-selector-trigger{position:static!important}.\\[\\&_\\.univer-toolbar-button-selector-trigger\\]\\:\\!univer-h-8 .univer-toolbar-button-selector-trigger{height:2rem!important}.\\[\\&_\\.univer-toolbar-button-selector-trigger\\]\\:\\!univer-w-6 .univer-toolbar-button-selector-trigger{width:1.5rem!important}.\\[\\&_\\.univer-toolbar-button-selector-trigger\\]\\:\\!univer-rounded-none .univer-toolbar-button-selector-trigger{border-radius:0!important}.\\[\\&_\\.univer-toolbar-button-selector-trigger\\]\\:\\!univer-rounded-r-md .univer-toolbar-button-selector-trigger{border-top-right-radius:.375rem!important;border-bottom-right-radius:.375rem!important}.\\[\\&_\\.univer-toolbar-selector-root\\]\\:\\!univer-h-8 .univer-toolbar-selector-root{height:2rem!important}.\\[\\&_\\.univer-toolbar-selector-root\\]\\:\\!univer-gap-1 .univer-toolbar-selector-root{gap:.25rem!important}.\\[\\&_\\.univer-toolbar-selector-root\\]\\:\\!univer-rounded-md .univer-toolbar-selector-root{border-radius:.375rem!important}.\\[\\&_\\.univer-toolbar-selector-root\\]\\:\\!univer-px-1\\.5 .univer-toolbar-selector-root{padding-left:.375rem!important;padding-right:.375rem!important}.\\[\\&_\\.univer-toolbar-selector-trigger\\]\\:\\!univer-pl-0\\.5 .univer-toolbar-selector-trigger{padding-left:.125rem!important}.\\[\\&_\\.univer-tooltip\\]\\:univer-inline-flex .univer-tooltip{display:inline-flex}.\\[\\&_\\.univer-tooltip\\]\\:univer-h-full .univer-tooltip{height:100%}.\\[\\&_\\.univer-tooltip\\]\\:univer-items-center .univer-tooltip{align-items:center}.\\[\\&_\\[data-u-command\\]\\]\\:\\!univer-h-8 [data-u-command]{height:2rem!important}.\\[\\&_\\[data-u-command\\]\\]\\:\\!univer-min-h-8 [data-u-command]{min-height:2rem!important}.\\[\\&_\\[data-u-command\\]\\]\\:\\!univer-rounded-md [data-u-command]{border-radius:.375rem!important}.\\[\\&_\\[data-u-command\\]\\]\\:\\!univer-px-1\\.5 [data-u-command]{padding-left:.375rem!important;padding-right:.375rem!important}.\\[\\&_button\\]\\:\\!univer-m-0 button{margin:0!important}.\\[\\&_button\\]\\:\\!univer-h-8 button{height:2rem!important}.\\[\\&_button\\]\\:\\!univer-min-w-8 button{min-width:2rem!important}.\\[\\&_button\\]\\:\\!univer-appearance-none button{-webkit-appearance:none!important;appearance:none!important}.\\[\\&_button\\]\\:\\!univer-rounded-md button{border-radius:.375rem!important}.\\[\\&_button\\]\\:\\!univer-border-0 button{border-width:0!important}.\\[\\&_button\\]\\:\\!univer-bg-transparent button{background-color:#0000!important}.\\[\\&_button\\]\\:\\!univer-p-0 button{padding:0!important}.\\[\\&_button\\]\\:\\!univer-px-1\\.5 button{padding-left:.375rem!important;padding-right:.375rem!important}.\\[\\&_button\\]\\:\\!univer-leading-none button{line-height:1!important}.\\[\\&_button\\]\\:\\!univer-outline-none button{outline-offset:2px!important;outline:2px solid #0000!important}.\\[\\&_input\\:focus\\]\\:\\!univer-ring-0 input:focus{--univer-tw-ring-offset-shadow: var(--univer-tw-ring-inset) 0 0 0 var(--univer-tw-ring-offset-width) var(--univer-tw-ring-offset-color) !important;--univer-tw-ring-shadow: var(--univer-tw-ring-inset) 0 0 0 calc(0px + var(--univer-tw-ring-offset-width)) var(--univer-tw-ring-color) !important;box-shadow:var(--univer-tw-ring-offset-shadow),var(--univer-tw-ring-shadow),0 0 #0000!important;box-shadow:var(--univer-tw-ring-offset-shadow),var(--univer-tw-ring-shadow),var(--univer-tw-shadow, 0 0 #0000)!important}.\\[\\&_input\\]\\:\\!univer-m-0 input{margin:0!important}.\\[\\&_input\\]\\:univer-h-6 input{height:1.5rem}.\\[\\&_input\\]\\:univer-w-7 input{width:1.75rem}.\\[\\&_input\\]\\:\\!univer-appearance-none input{-webkit-appearance:none!important;appearance:none!important}.\\[\\&_input\\]\\:\\!univer-border-0 input{border-width:0!important}.\\[\\&_input\\]\\:univer-border-none input{border-style:none}.\\[\\&_input\\]\\:\\!univer-bg-transparent input{background-color:#0000!important}.\\[\\&_input\\]\\:\\!univer-p-0 input{padding:0!important}.\\[\\&_input\\]\\:univer-p-0 input{padding:0}.\\[\\&_input\\]\\:univer-text-sm input{font-size:.875rem;line-height:1.25rem}.\\[\\&_input\\]\\:\\!univer-leading-none input{line-height:1!important}.\\[\\&_input\\]\\:\\!univer-outline-none input{outline-offset:2px!important;outline:2px solid #0000!important}.univer-fixed{position:fixed}.univer-bottom-0{bottom:0}.univer-left-5{left:1.25rem}.univer-left-\\[5px\\]{left:5px}.univer-top-4{top:1rem}.univer-top-\\[5px\\]{top:5px}.univer-z-\\[10000\\]{z-index:10000}.univer-mb-1{margin-bottom:.25rem}.univer-mr-1{margin-right:.25rem}.univer-mt-1\\.5{margin-top:.375rem}.univer-mt-12{margin-top:3rem}.univer-mt-5{margin-top:1.25rem}.univer-size-0\\.5{width:.125rem;height:.125rem}.univer-size-3{width:.75rem;height:.75rem}.univer-size-5{width:1.25rem;height:1.25rem}.univer-size-8{width:2rem;height:2rem}.univer-h-16{height:4rem}.univer-h-3\\.5{height:.875rem}.univer-h-\\[24px\\]{height:24px}.univer-min-h-8{min-height:2rem}.univer-w-2{width:.5rem}.univer-w-2\\.5{width:.625rem}.univer-w-28{width:7rem}.univer-w-4\\/5{width:80%}.univer-w-\\[0px\\]{width:0}.univer-w-\\[212px\\]{width:212px}.univer-w-\\[72px\\]{width:72px}.univer-min-w-\\[180px\\]{min-width:180px}.univer-flex-shrink-0{flex-shrink:0}.univer-cursor-grab{cursor:grab}.univer-grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}.univer-grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}.univer-grid-cols-4{grid-template-columns:repeat(4,minmax(0,1fr))}.univer-place-items-center{place-items:center}.univer-items-stretch{align-items:stretch}.univer-gap-2\\.5{gap:.625rem}.univer-gap-3{gap:.75rem}.univer-gap-x-0\\.5{-moz-column-gap:.125rem;column-gap:.125rem}.univer-gap-y-px{row-gap:1px}.univer-overflow-x-hidden{overflow-x:hidden}.univer-rounded-r-2xl{border-top-right-radius:1rem;border-bottom-right-radius:1rem}.\\!univer-border-primary-500{border-color:var(--univer-primary-500)!important}.univer-border-primary-500{border-color:var(--univer-primary-500)}.\\!univer-bg-primary-50{background-color:var(--univer-primary-50)!important}.\\!univer-bg-primary-900{background-color:var(--univer-primary-900)!important}.univer-bg-gray-400{background-color:var(--univer-gray-400)}.univer-px-2\\.5{padding-left:.625rem;padding-right:.625rem}.univer-py-0{padding-top:0;padding-bottom:0}.univer-pb-0\\.5{padding-bottom:.125rem}.univer-pb-4{padding-bottom:1rem}.univer-pr-1{padding-right:.25rem}.univer-pr-2{padding-right:.5rem}.univer-pt-1\\.5{padding-top:.375rem}.univer-pt-14{padding-top:3.5rem}.univer-text-lg{font-size:1.125rem;line-height:1.75rem}.univer-font-\\[500\\],.univer-font-medium{font-weight:500}.univer-font-normal{font-weight:400}.univer-leading-\\[24px\\]{line-height:24px}.\\!univer-text-gray-200{color:var(--univer-gray-200)!important}.\\!univer-text-gray-400{color:var(--univer-gray-400)!important}.\\!univer-text-primary-600{color:var(--univer-primary-600)!important}.univer-text-gray-800{color:var(--univer-gray-800)}.univer-shadow-sm{--univer-tw-shadow: 0px 1px 2px 0px #1e284d14;--univer-tw-shadow-colored: 0px 1px 2px 0px var(--univer-tw-shadow-color);box-shadow:0 0 #0000,0 0 #0000,0 1px 2px #1e284d14;box-shadow:var(--univer-tw-ring-offset-shadow, 0 0 #0000),var(--univer-tw-ring-shadow, 0 0 #0000),var(--univer-tw-shadow)}.univer-backdrop-blur-\\[10px\\]{--univer-tw-backdrop-blur: blur(10px);backdrop-filter:var(--univer-tw-backdrop-blur) var(--univer-tw-backdrop-brightness) var(--univer-tw-backdrop-contrast) var(--univer-tw-backdrop-grayscale) var(--univer-tw-backdrop-hue-rotate) var(--univer-tw-backdrop-invert) var(--univer-tw-backdrop-opacity) var(--univer-tw-backdrop-saturate) var(--univer-tw-backdrop-sepia)}.univer-duration-300{transition-duration:.3s}.univer-group:hover .group-hover\\:univer-bg-gray-500{background-color:var(--univer-gray-500)}.hover\\:univer-border-primary-500:hover{border-color:var(--univer-primary-500)}.hover\\:univer-bg-white:hover{background-color:var(--univer-white)}.hover\\:univer-text-gray-900:hover{color:var(--univer-gray-900)}.hover\\:univer-text-primary-600:hover{color:var(--univer-primary-600)}.hover\\:univer-shadow-md:hover{--univer-tw-shadow: 0px 1px 6px -2px #1e284d14, 0px 2px 6px -1px #1e284d1a;--univer-tw-shadow-colored: 0px 1px 6px -2px var(--univer-tw-shadow-color), 0px 2px 6px -1px var(--univer-tw-shadow-color);box-shadow:0 0 #0000,0 0 #0000,0 1px 6px -2px #1e284d14,0 2px 6px -1px #1e284d1a;box-shadow:var(--univer-tw-ring-offset-shadow, 0 0 #0000),var(--univer-tw-ring-shadow, 0 0 #0000),var(--univer-tw-shadow)}.active\\:univer-cursor-grabbing:active{cursor:grabbing}.dark\\:\\!univer-border-gray-600:where(.univer-dark,.univer-dark *){border-color:var(--univer-gray-600)!important}.dark\\:\\!univer-bg-gray-500:where(.univer-dark,.univer-dark *){background-color:var(--univer-gray-500)!important}.dark\\:\\!univer-bg-primary-900:where(.univer-dark,.univer-dark *){background-color:var(--univer-primary-900)!important}.dark\\:\\!univer-text-gray-100:where(.univer-dark,.univer-dark *){color:var(--univer-gray-100)!important}.univer-group:hover .dark\\:group-hover\\:\\!univer-bg-gray-300:where(.univer-dark,.univer-dark *){background-color:var(--univer-gray-300)!important}.univer-pointer-events-none{pointer-events:none}.univer-inset-0{inset:0}.-univer-bottom-0\\.5{bottom:-.125rem}.-univer-left-0\\.5{left:-.125rem}.-univer-right-0\\.5{right:-.125rem}.-univer-top-0\\.5{top:-.125rem}.univer-left-0{left:0}.univer-left-1{left:.25rem}.univer-left-3{left:.75rem}.univer-right-0{right:0}.univer-right-5{right:1.25rem}.univer-top-0{top:0}.univer-top-0\\.5{top:.125rem}.univer-z-10{z-index:10}.univer-z-\\[1001\\]{z-index:1001}.univer-z-\\[100\\]{z-index:100}.univer-mx-1{margin-left:.25rem;margin-right:.25rem}.univer-mx-1\\.5{margin-left:.375rem;margin-right:.375rem}.univer-mb-1\\.5{margin-bottom:.375rem}.univer-mb-3{margin-bottom:.75rem}.univer-mb-4{margin-bottom:1rem}.univer-ml-1{margin-left:.25rem}.univer-ml-1\\.5{margin-left:.375rem}.univer-ml-3{margin-left:.75rem}.univer-ml-6{margin-left:1.5rem}.univer-ml-px{margin-left:1px}.univer-mr-1\\.5{margin-right:.375rem}.univer-mr-2{margin-right:.5rem}.univer-mr-5{margin-right:1.25rem}.univer-mt-auto{margin-top:auto}.univer-hidden{display:none}.univer-size-0{width:0;height:0}.univer-size-10{width:2.5rem;height:2.5rem}.univer-size-4{width:1rem;height:1rem}.univer-h-0\\.5{height:.125rem}.univer-h-1{height:.25rem}.univer-h-10{height:2.5rem}.univer-h-20{height:5rem}.univer-h-4{height:1rem}.univer-h-5{height:1.25rem}.univer-h-6{height:1.5rem}.univer-h-60{height:15rem}.univer-h-8{height:2rem}.univer-h-9{height:2.25rem}.univer-h-\\[270px\\]{height:270px}.univer-h-\\[30px\\]{height:30px}.univer-h-\\[calc\\(100\\%-16px\\)\\]{height:calc(100% - 16px)}.univer-h-\\[calc\\(100\\%-8px\\)\\]{height:calc(100% - 8px)}.univer-h-px{height:1px}.univer-max-h-52{max-height:13rem}.univer-max-h-\\[100px\\]{max-height:100px}.univer-max-h-\\[360px\\]{max-height:360px}.univer-min-h-0{min-height:0}.univer-min-h-\\[30px\\]{min-height:30px}.\\!univer-w-\\[90px\\]{width:90px!important}.univer-w-16{width:4rem}.univer-w-20{width:5rem}.univer-w-24{width:6rem}.univer-w-5{width:1.25rem}.univer-w-6{width:1.5rem}.univer-w-60{width:15rem}.univer-w-\\[100px\\]{width:100px}.univer-w-\\[130px\\]{width:130px}.univer-w-\\[156px\\]{width:156px}.univer-w-\\[300px\\]{width:300px}.univer-w-\\[50\\%\\]{width:50%}.univer-w-fit{width:fit-content}.univer-min-w-0{min-width:0}.univer-min-w-72{min-width:18rem}.univer-max-w-32{max-width:8rem}.univer-max-w-36{max-width:9rem}.univer-max-w-64{max-width:16rem}.univer-max-w-\\[190px\\]{max-width:190px}.univer-max-w-\\[200px\\]{max-width:200px}.univer-max-w-\\[calc\\(100\\%-112px\\)\\]{max-width:calc(100% - 112px)}.univer-max-w-fit{max-width:fit-content}.univer-max-w-lg{max-width:32rem}.univer-flex-shrink-0,.univer-shrink-0{flex-shrink:0}.univer-flex-grow{flex-grow:1}.univer-flex-grow-0{flex-grow:0}.univer-rotate-180{--univer-tw-rotate: 180deg;transform:translate(var(--univer-tw-translate-x),var(--univer-tw-translate-y)) rotate(180deg) skew(var(--univer-tw-skew-x)) skewY(var(--univer-tw-skew-y)) scaleX(var(--univer-tw-scale-x)) scaleY(var(--univer-tw-scale-y));transform:translate(var(--univer-tw-translate-x),var(--univer-tw-translate-y)) rotate(var(--univer-tw-rotate)) skew(var(--univer-tw-skew-x)) skewY(var(--univer-tw-skew-y)) scaleX(var(--univer-tw-scale-x)) scaleY(var(--univer-tw-scale-y))}@keyframes univer-spin{to{transform:rotate(360deg)}}.univer-animate-spin{animation:1s linear infinite univer-spin}.univer-cursor-not-allowed{cursor:not-allowed}.univer-appearance-none{-webkit-appearance:none;appearance:none}.univer-grid-flow-col{grid-auto-flow:column}.univer-grid-cols-5{grid-template-columns:repeat(5,minmax(0,1fr))}.univer-grid-cols-\\[1fr\\,auto\\,auto\\,auto\\]{grid-template-columns:1fr auto auto auto}.univer-flex-row{flex-direction:row}.univer-flex-row-reverse{flex-direction:row-reverse}.univer-flex-nowrap{flex-wrap:nowrap}.univer-gap-7{gap:1.75rem}.univer-gap-x-2{-moz-column-gap:.5rem;column-gap:.5rem}.univer-space-y-2>:not([hidden])~:not([hidden]){--univer-tw-space-y-reverse: 0;margin-top:calc(.5rem * (1 - var(--univer-tw-space-y-reverse)));margin-top:.5rem;margin-top:calc(.5rem * calc(1 - var(--univer-tw-space-y-reverse)));margin-bottom:0;margin-bottom:calc(.5rem * var(--univer-tw-space-y-reverse))}.univer-divide-x-0>:not([hidden])~:not([hidden]){--univer-tw-divide-x-reverse: 0;border-right-width:0;border-right-width:calc(0px * var(--univer-tw-divide-x-reverse));border-left-width:calc(0px * (1 - var(--univer-tw-divide-x-reverse)));border-left-width:0;border-left-width:calc(0px * calc(1 - var(--univer-tw-divide-x-reverse)))}.univer-divide-y>:not([hidden])~:not([hidden]){--univer-tw-divide-y-reverse: 0;border-top-width:calc(1px * (1 - var(--univer-tw-divide-y-reverse)));border-top-width:1px;border-top-width:calc(1px * calc(1 - var(--univer-tw-divide-y-reverse)));border-bottom-width:0;border-bottom-width:calc(1px * var(--univer-tw-divide-y-reverse))}.univer-divide-solid>:not([hidden])~:not([hidden]){border-style:solid}.univer-divide-gray-200>:not([hidden])~:not([hidden]){border-color:var(--univer-gray-200)}.univer-justify-self-center{justify-self:center}.univer-overflow-hidden{overflow:hidden}.univer-overflow-x-auto{overflow-x:auto}.univer-overflow-y-hidden{overflow-y:hidden}.univer-rounded-full{border-radius:9999px}.univer-rounded-md{border-radius:.375rem}.univer-rounded-sm{border-radius:.125rem}.univer-border-2{border-width:2px}.univer-border-4{border-width:4px}.univer-border-b{border-bottom-width:1px}.univer-border-solid{border-style:solid}.univer-border-none{border-style:none}.univer-border-\\[rgba\\(13\\,13\\,13\\,0\\.12\\)\\]{border-color:#0d0d0d1f}.univer-border-gray-100{border-color:var(--univer-gray-100)}.univer-border-gray-200{border-color:var(--univer-gray-200)}.univer-border-transparent{border-color:#0000}.univer-border-r-gray-200{border-right-color:var(--univer-gray-200)}.univer-border-t-primary-500{border-top-color:var(--univer-primary-500)}.\\!univer-bg-gray-700{background-color:var(--univer-gray-700)!important}.\\!univer-bg-gray-800{background-color:var(--univer-gray-800)!important}.\\!univer-bg-gray-900{background-color:var(--univer-gray-900)!important}.univer-bg-blue-500{background-color:var(--univer-blue-500)}.univer-bg-blue-600{background-color:var(--univer-blue-600)}.univer-bg-gray-100{background-color:var(--univer-gray-100)}.univer-bg-gradient-to-b{background-image:linear-gradient(to bottom,var(--univer-tw-gradient-stops))}.univer-from-gray-50{--univer-tw-gradient-from: var(--univer-gray-50) var(--univer-tw-gradient-from-position);--univer-tw-gradient-to: #fff0 var(--univer-tw-gradient-to-position);--univer-tw-gradient-stops: var(--univer-tw-gradient-from), var(--univer-tw-gradient-to)}.univer-to-gray-100{--univer-tw-gradient-to: var(--univer-gray-100) var(--univer-tw-gradient-to-position)}.univer-fill-gray-900{fill:var(--univer-gray-900)}.univer-fill-primary-600{fill:var(--univer-primary-600)}.univer-p-1{padding:.25rem}.univer-p-4{padding:1rem}.univer-px-1{padding-left:.25rem;padding-right:.25rem}.univer-px-1\\.5{padding-left:.375rem;padding-right:.375rem}.univer-px-3\\.5{padding-left:.875rem;padding-right:.875rem}.univer-px-5{padding-left:1.25rem;padding-right:1.25rem}.univer-py-0\\.5{padding-top:.125rem;padding-bottom:.125rem}.univer-py-5{padding-top:1.25rem;padding-bottom:1.25rem}.univer-pb-1{padding-bottom:.25rem}.univer-pl-1\\.5{padding-left:.375rem}.univer-pl-3{padding-left:.75rem}.univer-pl-6{padding-left:1.5rem}.univer-pr-5{padding-right:1.25rem}.univer-pt-1{padding-top:.25rem}.univer-pt-2{padding-top:.5rem}.univer-text-center{text-align:center}.univer-font-semibold{font-weight:600}.univer-leading-6{line-height:1.5rem}.univer-leading-7{line-height:1.75rem}.\\!univer-text-blue-400{color:var(--univer-blue-400)!important}.\\!univer-text-gray-700{color:var(--univer-gray-700)!important}.\\!univer-text-white{color:var(--univer-white)!important}.univer-text-blue-500{color:var(--univer-blue-500)}.univer-text-blue-600{color:var(--univer-blue-600)}.univer-text-gray-200{color:var(--univer-gray-200)}.univer-text-gray-300{color:var(--univer-gray-300)}.univer-text-gray-700{color:var(--univer-gray-700)}.univer-text-green-600{color:var(--univer-green-600)}.univer-text-primary-700{color:var(--univer-primary-700)}.univer-text-red-600{color:var(--univer-red-600)}.univer-text-rose-600{--univer-tw-text-opacity: 1;color:rgba(225,29,72,var(--univer-tw-text-opacity, 1))}.univer-text-yellow-500{color:var(--univer-yellow-500)}.univer-shadow{--univer-tw-shadow: 0 1px 3px 0 #0000001a, 0 1px 2px -1px #0000001a;--univer-tw-shadow-colored: 0 1px 3px 0 var(--univer-tw-shadow-color), 0 1px 2px -1px var(--univer-tw-shadow-color);box-shadow:0 0 #0000,0 0 #0000,0 1px 3px #0000001a,0 1px 2px -1px #0000001a;box-shadow:var(--univer-tw-ring-offset-shadow, 0 0 #0000),var(--univer-tw-ring-shadow, 0 0 #0000),var(--univer-tw-shadow)}.univer-shadow-lg{--univer-tw-shadow: 0px 4px 6px 0px #1e284d0d, 0px 10px 15px -3px #1e284d1a;--univer-tw-shadow-colored: 0px 4px 6px 0px var(--univer-tw-shadow-color), 0px 10px 15px -3px var(--univer-tw-shadow-color);box-shadow:0 0 #0000,0 0 #0000,0 4px 6px #1e284d0d,0 10px 15px -3px #1e284d1a;box-shadow:var(--univer-tw-ring-offset-shadow, 0 0 #0000),var(--univer-tw-ring-shadow, 0 0 #0000),var(--univer-tw-shadow)}.univer-blur-sm{--univer-tw-blur: blur(4px);filter:var(--univer-tw-blur) var(--univer-tw-brightness) var(--univer-tw-contrast) var(--univer-tw-grayscale) var(--univer-tw-hue-rotate) var(--univer-tw-invert) var(--univer-tw-saturate) var(--univer-tw-sepia) var(--univer-tw-drop-shadow)}.univer-backdrop-blur{--univer-tw-backdrop-blur: blur(8px);backdrop-filter:var(--univer-tw-backdrop-blur) var(--univer-tw-backdrop-brightness) var(--univer-tw-backdrop-contrast) var(--univer-tw-backdrop-grayscale) var(--univer-tw-backdrop-hue-rotate) var(--univer-tw-backdrop-invert) var(--univer-tw-backdrop-opacity) var(--univer-tw-backdrop-saturate) var(--univer-tw-backdrop-sepia)}.univer-transition-\\[colors\\,box-shadow\\]{transition-property:colors,box-shadow;transition-duration:.15s;transition-timing-function:cubic-bezier(.4,0,.2,1)}.univer-transition-\\[height\\]{transition-property:height;transition-duration:.15s;transition-timing-function:cubic-bezier(.4,0,.2,1)}.univer-transition-all{transition-property:all;transition-duration:.15s;transition-timing-function:cubic-bezier(.4,0,.2,1)}.univer-duration-200{transition-duration:.2s}.univer-ease-linear{transition-timing-function:linear}.after\\:univer-absolute:after{content:var(--univer-tw-content);position:absolute}.after\\:univer-right-0:after{content:var(--univer-tw-content);right:0}.after\\:univer-top-1\\/2:after{content:var(--univer-tw-content);top:50%}.after\\:univer-block:after{content:var(--univer-tw-content);display:block}.after\\:univer-h-4:after{content:var(--univer-tw-content);height:1rem}.after\\:univer-w-px:after{content:var(--univer-tw-content);width:1px}.after\\:-univer-translate-y-1\\/2:after{content:var(--univer-tw-content);--univer-tw-translate-y: -50%;transform:translate(var(--univer-tw-translate-x),-50%) rotate(var(--univer-tw-rotate)) skew(var(--univer-tw-skew-x)) skewY(var(--univer-tw-skew-y)) scaleX(var(--univer-tw-scale-x)) scaleY(var(--univer-tw-scale-y));transform:translate(var(--univer-tw-translate-x),var(--univer-tw-translate-y)) rotate(var(--univer-tw-rotate)) skew(var(--univer-tw-skew-x)) skewY(var(--univer-tw-skew-y)) scaleX(var(--univer-tw-scale-x)) scaleY(var(--univer-tw-scale-y))}.after\\:univer-bg-gray-200:after{content:var(--univer-tw-content);background-color:var(--univer-gray-200)}.after\\:univer-content-\\[\\\"\\\"\\]:after{--univer-tw-content: \"\";content:\"\";content:var(--univer-tw-content)}.last\\:univer-mb-0:last-child{margin-bottom:0}.univer-group:hover .group-hover\\:univer-flex{display:flex}.hover\\:univer-border-primary-600:hover{border-color:var(--univer-primary-600)}.hover\\:univer-bg-gray-50:hover{background-color:var(--univer-gray-50)}.hover\\:univer-bg-transparent:hover{background-color:#0000}.focus\\:univer-border-primary-500:focus{border-color:var(--univer-primary-500)}.focus\\:univer-outline-none:focus{outline-offset:2px;outline:2px solid #0000}.focus-visible\\:univer-ring-2:focus-visible{--univer-tw-ring-offset-shadow: var(--univer-tw-ring-inset) 0 0 0 var(--univer-tw-ring-offset-width) var(--univer-tw-ring-offset-color);--univer-tw-ring-shadow: var(--univer-tw-ring-inset) 0 0 0 calc(2px + var(--univer-tw-ring-offset-width)) var(--univer-tw-ring-color);box-shadow:var(--univer-tw-ring-offset-shadow),var(--univer-tw-ring-shadow),0 0 #0000;box-shadow:var(--univer-tw-ring-offset-shadow),var(--univer-tw-ring-shadow),var(--univer-tw-shadow, 0 0 #0000)}.focus-visible\\:univer-ring-primary-500:focus-visible{--univer-tw-ring-color: var(--univer-primary-500)}.active\\:univer-bg-gray-100:active{background-color:var(--univer-gray-100)}.dark\\:\\!univer-divide-gray-600:where(.univer-dark,.univer-dark *)>:not([hidden])~:not([hidden]){border-color:var(--univer-gray-600)!important}.dark\\:\\!univer-border-gray-700:where(.univer-dark,.univer-dark *){border-color:var(--univer-gray-700)!important}.dark\\:\\!univer-border-r-gray-700:where(.univer-dark,.univer-dark *){border-right-color:var(--univer-gray-700)!important}.dark\\:\\!univer-bg-black:where(.univer-dark,.univer-dark *){background-color:var(--univer-black)!important}.dark\\:\\!univer-bg-blue-400:where(.univer-dark,.univer-dark *){background-color:var(--univer-blue-400)!important}.dark\\:\\!univer-bg-gray-700:where(.univer-dark,.univer-dark *){background-color:var(--univer-gray-700)!important}.dark\\:\\!univer-bg-gray-800:where(.univer-dark,.univer-dark *){background-color:var(--univer-gray-800)!important}.dark\\:\\!univer-from-gray-800:where(.univer-dark,.univer-dark *){--univer-tw-gradient-from: var(--univer-gray-800) var(--univer-tw-gradient-from-position) !important;--univer-tw-gradient-to: #fff0 var(--univer-tw-gradient-to-position) !important;--univer-tw-gradient-stops: var(--univer-tw-gradient-from), var(--univer-tw-gradient-to) !important}.dark\\:\\!univer-to-gray-900:where(.univer-dark,.univer-dark *){--univer-tw-gradient-to: var(--univer-gray-900) var(--univer-tw-gradient-to-position) !important}.dark\\:\\!univer-fill-white:where(.univer-dark,.univer-dark *){fill:var(--univer-white)!important}.dark\\:\\!univer-text-blue-400:where(.univer-dark,.univer-dark *){color:var(--univer-blue-400)!important}.dark\\:\\!univer-text-gray-700:where(.univer-dark,.univer-dark *){color:var(--univer-gray-700)!important}.dark\\:\\!univer-text-green-400:where(.univer-dark,.univer-dark *){color:var(--univer-green-400)!important}.dark\\:\\!univer-text-red-400:where(.univer-dark,.univer-dark *){color:var(--univer-red-400)!important}.dark\\:hover\\:\\!univer-bg-gray-800:hover:where(.univer-dark,.univer-dark *){background-color:var(--univer-gray-800)!important}.\\[\\&\\>div\\:first-child\\]\\:univer-px-2\\.5>div:first-child{padding-left:.625rem;padding-right:.625rem}.\\[\\&\\>div\\]\\:univer-h-5>div{height:1.25rem}.\\[\\&\\>div\\]\\:univer-ring-transparent>div{--univer-tw-ring-color: transparent}.\\[\\&_canvas\\]\\:univer-absolute canvas{position:absolute}.univer-absolute{position:absolute}.univer-relative{position:relative}.univer-left-1\\.5{left:.375rem}.univer-top-1\\/2{top:50%}.univer-z-\\[15\\]{z-index:15}.univer-m-0{margin:0}.-univer-mx-6{margin-left:-1.5rem;margin-right:-1.5rem}.univer-mx-0{margin-left:0;margin-right:0}.univer-my-1{margin-top:.25rem;margin-bottom:.25rem}.univer-my-2{margin-top:.5rem;margin-bottom:.5rem}.univer-mb-0{margin-bottom:0}.univer-mb-2{margin-bottom:.5rem}.univer-ml-2{margin-left:.5rem}.univer-ml-4{margin-left:1rem}.univer-mr-0{margin-right:0}.univer-mt-0{margin-top:0}.univer-mt-1{margin-top:.25rem}.univer-box-border{box-sizing:border-box}.univer-block{display:block}.univer-inline-flex{display:inline-flex}.univer-size-6{width:1.5rem;height:1.5rem}.univer-size-full{width:100%;height:100%}.univer-h-\\[18px\\]{height:18px}.univer-h-\\[364px\\]{height:364px}.univer-max-h-60{max-height:15rem}.univer-max-h-72{max-height:18rem}.univer-max-h-\\[350px\\]{max-height:350px}.univer-w-\\[250px\\]{width:250px}.univer-flex-1{flex:1}.-univer-translate-y-1\\/2{--univer-tw-translate-y: -50%;transform:translate(var(--univer-tw-translate-x),-50%) rotate(var(--univer-tw-rotate)) skew(var(--univer-tw-skew-x)) skewY(var(--univer-tw-skew-y)) scaleX(var(--univer-tw-scale-x)) scaleY(var(--univer-tw-scale-y));transform:translate(var(--univer-tw-translate-x),var(--univer-tw-translate-y)) rotate(var(--univer-tw-rotate)) skew(var(--univer-tw-skew-x)) skewY(var(--univer-tw-skew-y)) scaleX(var(--univer-tw-scale-x)) scaleY(var(--univer-tw-scale-y))}.univer-select-none{-webkit-user-select:none;user-select:none}.univer-list-none{list-style-type:none}.univer-justify-center{justify-content:center}.univer-justify-around{justify-content:space-around}.univer-gap-2{gap:.5rem}.univer-gap-4{gap:1rem}.univer-overflow-visible{overflow:visible}.univer-truncate{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.univer-whitespace-nowrap{white-space:nowrap}.univer-whitespace-pre-wrap{white-space:pre-wrap}.univer-break-words{word-wrap:break-word}.univer-break-all{word-break:break-all}.univer-rounded-none{border-radius:0}.univer-rounded-l{border-top-left-radius:.25rem;border-bottom-left-radius:.25rem}.univer-border{border-width:1px}.univer-border-r-0{border-right-width:0}.univer-border-gray-600{border-color:var(--univer-gray-600)}.univer-border-primary-600{border-color:var(--univer-primary-600)}.\\!univer-bg-gray-600{background-color:var(--univer-gray-600)!important}.univer-bg-gray-200{background-color:var(--univer-gray-200)}.univer-bg-primary-600{background-color:var(--univer-primary-600)}.univer-bg-transparent{background-color:#0000}.univer-bg-white{background-color:var(--univer-white)}.univer-p-0{padding:0}.univer-p-0\\.5{padding:.125rem}.univer-p-3{padding:.75rem}.univer-px-4{padding-left:1rem;padding-right:1rem}.univer-px-6{padding-left:1.5rem;padding-right:1.5rem}.univer-px-7{padding-left:1.75rem;padding-right:1.75rem}.univer-py-1{padding-top:.25rem;padding-bottom:.25rem}.univer-py-2{padding-top:.5rem;padding-bottom:.5rem}.univer-py-3{padding-top:.75rem;padding-bottom:.75rem}.univer-pb-3{padding-bottom:.75rem}.univer-pt-0{padding-top:0}.univer-text-base{font-size:1rem;line-height:1.5rem}.univer-text-sm{font-size:.875rem;line-height:1.25rem}.univer-font-bold{font-weight:700}.univer-font-medium{font-weight:500}.univer-leading-5{line-height:1.25rem}.univer-leading-\\[13px\\]{line-height:13px}.univer-text-gray-900{color:var(--univer-gray-900)}.univer-text-primary-500{color:var(--univer-primary-500)}.univer-text-red-500{color:var(--univer-red-500)}.univer-text-white{color:var(--univer-white)}.univer-shadow-md{--univer-tw-shadow: 0px 1px 6px -2px #1e284d14, 0px 2px 6px -1px #1e284d1a;--univer-tw-shadow-colored: 0px 1px 6px -2px var(--univer-tw-shadow-color), 0px 2px 6px -1px var(--univer-tw-shadow-color);box-shadow:0 0 #0000,0 0 #0000,0 1px 6px -2px #1e284d14,0 2px 6px -1px #1e284d1a;box-shadow:var(--univer-tw-ring-offset-shadow, 0 0 #0000),var(--univer-tw-ring-shadow, 0 0 #0000),var(--univer-tw-shadow)}.univer-outline-none{outline-offset:2px;outline:2px solid #0000}.univer-ring-1{--univer-tw-ring-offset-shadow: var(--univer-tw-ring-inset) 0 0 0 var(--univer-tw-ring-offset-width) var(--univer-tw-ring-offset-color);--univer-tw-ring-shadow: var(--univer-tw-ring-inset) 0 0 0 calc(1px + var(--univer-tw-ring-offset-width)) var(--univer-tw-ring-color);box-shadow:var(--univer-tw-ring-offset-shadow),var(--univer-tw-ring-shadow),0 0 #0000;box-shadow:var(--univer-tw-ring-offset-shadow),var(--univer-tw-ring-shadow),var(--univer-tw-shadow, 0 0 #0000)}.univer-ring-primary-500{--univer-tw-ring-color: var(--univer-primary-500)}.univer-ring-red-500{--univer-tw-ring-color: var(--univer-red-500)}.univer-transition-colors{transition-property:color,background-color,border-color,text-decoration-color,fill,stroke;transition-duration:.15s;transition-timing-function:cubic-bezier(.4,0,.2,1)}.hover\\:univer-bg-gray-200:hover{background-color:var(--univer-gray-200)}.hover\\:univer-bg-gray-300:hover{background-color:var(--univer-gray-300)}.dark\\:\\!univer-bg-gray-600:where(.univer-dark,.univer-dark *){background-color:var(--univer-gray-600)!important}.dark\\:\\!univer-bg-gray-900:where(.univer-dark,.univer-dark *){background-color:var(--univer-gray-900)!important}.dark\\:\\!univer-text-gray-300:where(.univer-dark,.univer-dark *){color:var(--univer-gray-300)!important}.dark\\:\\!univer-text-white:where(.univer-dark,.univer-dark *){color:var(--univer-white)!important}.dark\\:hover\\:\\!univer-bg-gray-600:hover:where(.univer-dark,.univer-dark *){background-color:var(--univer-gray-600)!important}.univer-mb-5{margin-bottom:1.25rem}.univer-mr-3{margin-right:.75rem}.univer-mt-2{margin-top:.5rem}.univer-mt-3{margin-top:.75rem}.univer-mt-3\\.5{margin-top:.875rem}.univer-mt-4{margin-top:1rem}.univer-flex{display:flex}.univer-grid{display:grid}.univer-h-7{height:1.75rem}.univer-h-full{height:100%}.univer-max-h-\\[400px\\]{max-height:400px}.univer-w-32{width:8rem}.univer-w-36{width:9rem}.univer-w-4{width:1rem}.univer-w-\\[340px\\]{width:340px}.univer-w-full{width:100%}.univer-cursor-default{cursor:default}.univer-cursor-pointer{cursor:pointer}.univer-flex-col{flex-direction:column}.univer-items-center{align-items:center}.univer-justify-end{justify-content:flex-end}.univer-justify-between{justify-content:space-between}.univer-gap-1{gap:.25rem}.univer-gap-1\\.5{gap:.375rem}.univer-gap-6{gap:1.5rem}.univer-overflow-auto{overflow:auto}.univer-overflow-y-auto{overflow-y:auto}.univer-rounded{border-radius:.25rem}.univer-rounded-lg{border-radius:.5rem}.univer-p-1\\.5{padding:.375rem}.univer-p-2{padding:.5rem}.univer-px-2{padding-left:.5rem;padding-right:.5rem}.univer-py-1\\.5{padding-top:.375rem;padding-bottom:.375rem}.univer-pb-5{padding-bottom:1.25rem}.univer-text-sm,.univer-text-sm\\/5{font-size:.875rem;line-height:1.25rem}.univer-text-xs{font-size:.75rem;line-height:1rem}.univer-text-gray-400{color:var(--univer-gray-400)}.univer-text-gray-500{color:var(--univer-gray-500)}.univer-text-gray-600{color:var(--univer-gray-600)}.univer-text-primary-600{color:var(--univer-primary-600)}.hover\\:univer-bg-gray-100:hover{background-color:var(--univer-gray-100)}.dark\\:\\!univer-text-gray-200:where(.univer-dark,.univer-dark *){color:var(--univer-gray-200)!important}.dark\\:\\!univer-text-gray-400:where(.univer-dark,.univer-dark *){color:var(--univer-gray-400)!important}.dark\\:hover\\:\\!univer-bg-gray-700:hover:where(.univer-dark,.univer-dark *){background-color:var(--univer-gray-700)!important}:host{display:block;width:100%;height:100%;min-width:0;min-height:0;overflow:hidden}.z-gallery-office-preview{width:100%;height:100%;overflow:auto;padding:0;background:var(--muted)}.z-gallery-office-preview--sheet{overflow:hidden}.z-gallery-office-preview--slide{display:flex;align-items:center;justify-content:center;padding:0}:host ::ng-deep .docx-wrapper{display:flex;flex-direction:column;align-items:center;gap:.75rem;padding:0;background:transparent}:host ::ng-deep .docx{max-width:100%;box-shadow:0 .5rem 2rem #0000001f}:host ::ng-deep .z-gallery-office-preview--sheet>div{width:100%;min-width:45rem;height:100%}:host ::ng-deep .z-gallery-office-preview--slide canvas{max-width:none}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { zSource: [{ type: i0.Input, args: [{ isSignal: true, alias: "zSource", required: true }] }], zKind: [{ type: i0.Input, args: [{ isSignal: true, alias: "zKind", required: true }] }], zLoaded: [{ type: i0.Output, args: ["zLoaded"] }], zError: [{ type: i0.Output, args: ["zError"] }], _host: [{ type: i0.ViewChild, args: ['host', { isSignal: true }] }] } });
+
+class ZGalleryTextPreviewComponent {
+    zContent = input.required(/* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "zContent" }] : /* istanbul ignore next */ []));
+    zLanguage = input('text', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "zLanguage" }] : /* istanbul ignore next */ []));
+    lines = computed(() => {
+        const content = this.zContent();
+        const lines = content.split(/\r\n|\r|\n/);
+        if (lines.length > 1 && lines[lines.length - 1] === '') {
+            lines.pop();
         }
+        return lines;
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "lines" }] : /* istanbul ignore next */ []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: ZGalleryTextPreviewComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.2", type: ZGalleryTextPreviewComponent, isStandalone: true, selector: "z-gallery-text-preview", inputs: { zContent: { classPropertyName: "zContent", publicName: "zContent", isSignal: true, isRequired: true, transformFunction: null }, zLanguage: { classPropertyName: "zLanguage", publicName: "zLanguage", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div class=\"z-gallery-text-preview\">\n  <div class=\"z-gallery-text-preview__header\">\n    <span>{{ zLanguage() }}</span>\n  </div>\n  <div class=\"z-gallery-text-preview__body\">\n    @for (line of lines(); track $index) {\n      <span class=\"z-gallery-text-preview__number\">{{ $index + 1 }}</span>\n      <span class=\"z-gallery-text-preview__line\">{{ line }}</span>\n    }\n  </div>\n</div>\n", styles: [":host{display:block;width:100%;height:100%;min-width:0;min-height:0;overflow:hidden}.z-gallery-text-preview{display:flex;width:100%;height:100%;min-width:0;min-height:0;flex-direction:column;overflow:hidden;background:var(--card);color:var(--foreground)}.z-gallery-text-preview__header{display:flex;flex:0 0 auto;justify-content:space-between;padding:.625rem 1rem;border-bottom:1px solid var(--border);background:var(--card);color:var(--muted-foreground);font-family:var(--font-mono);font-size:.6875rem;letter-spacing:.04em;text-transform:uppercase}.z-gallery-text-preview__body{flex:1 1 auto;display:grid;grid-template-columns:auto minmax(max-content,1fr);width:max-content;min-width:100%;min-height:0;align-content:start;gap:0 1rem;overflow:auto;padding:1rem 1.25rem 2rem .75rem;background:var(--card);color:var(--foreground);font-family:var(--font-mono);font-size:.75rem;line-height:1.625rem}.z-gallery-text-preview__body ::selection{background:var(--primary);color:var(--primary-foreground)}.z-gallery-text-preview__number{min-width:2rem;color:var(--muted-foreground);text-align:right;-webkit-user-select:none;user-select:none}.z-gallery-text-preview__line{min-width:0;color:var(--foreground);white-space:pre}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: ZGalleryTextPreviewComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'z-gallery-text-preview', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"z-gallery-text-preview\">\n  <div class=\"z-gallery-text-preview__header\">\n    <span>{{ zLanguage() }}</span>\n  </div>\n  <div class=\"z-gallery-text-preview__body\">\n    @for (line of lines(); track $index) {\n      <span class=\"z-gallery-text-preview__number\">{{ $index + 1 }}</span>\n      <span class=\"z-gallery-text-preview__line\">{{ line }}</span>\n    }\n  </div>\n</div>\n", styles: [":host{display:block;width:100%;height:100%;min-width:0;min-height:0;overflow:hidden}.z-gallery-text-preview{display:flex;width:100%;height:100%;min-width:0;min-height:0;flex-direction:column;overflow:hidden;background:var(--card);color:var(--foreground)}.z-gallery-text-preview__header{display:flex;flex:0 0 auto;justify-content:space-between;padding:.625rem 1rem;border-bottom:1px solid var(--border);background:var(--card);color:var(--muted-foreground);font-family:var(--font-mono);font-size:.6875rem;letter-spacing:.04em;text-transform:uppercase}.z-gallery-text-preview__body{flex:1 1 auto;display:grid;grid-template-columns:auto minmax(max-content,1fr);width:max-content;min-width:100%;min-height:0;align-content:start;gap:0 1rem;overflow:auto;padding:1rem 1.25rem 2rem .75rem;background:var(--card);color:var(--foreground);font-family:var(--font-mono);font-size:.75rem;line-height:1.625rem}.z-gallery-text-preview__body ::selection{background:var(--primary);color:var(--primary-foreground)}.z-gallery-text-preview__number{min-width:2rem;color:var(--muted-foreground);text-align:right;-webkit-user-select:none;user-select:none}.z-gallery-text-preview__line{min-width:0;color:var(--foreground);white-space:pre}\n"] }]
+        }], propDecorators: { zContent: [{ type: i0.Input, args: [{ isSignal: true, alias: "zContent", required: true }] }], zLanguage: [{ type: i0.Input, args: [{ isSignal: true, alias: "zLanguage", required: false }] }] } });
 
-        <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>
-          }
+const Z_GALLERY_PDF_VIEWER_CHROME_CSS = `
+#toolbarContainer,
+#toolbarContainer * {
+  box-sizing: border-box;
+}
 
-          <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>
+#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;
+}
 
-          <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>
+#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;
+}
 
-          <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>
+#toolbarContainer #toolbarViewer,
+#toolbarViewerLeft,
+#toolbarViewerMiddle,
+#toolbarViewerRight {
+  height: 100%;
+  align-items: center;
+}
 
-        <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>
-        }
+#toolbarContainer #toolbarViewer {
+  justify-content: space-between;
+}
 
-        <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>
+#toolbarViewerLeft,
+#toolbarViewerMiddle,
+#toolbarViewerRight,
+.toolbarHorizontalGroup {
+  gap: 1px;
+}
 
-        <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>
+#toolbarViewerLeft .loadingInput {
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+}
 
-        <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 });
+.toolbarButton,
+.toolbarButtonWithContainer {
+  height: 100% !important;
+  aspect-ratio: 1 !important;
+  flex: none !important;
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.2", 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>
-          }
+.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;
+}
 
-          <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>
+.toolbarButton:is(:hover, :focus-visible) {
+  background-color: var(--button-hover-color) !important;
+  color: var(--main-color) !important;
+}
 
-          <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>
+.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;
+}
 
-          <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>
+.toolbarButton:is(:hover, :focus-visible)::before {
+  background-color: var(--toolbar-icon-hover-bg-color) !important;
+}
 
-        <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 {
+  background-color: var(--toggled-btn-bg-color) !important;
+  color: var(--toggled-btn-color) !important;
+}
 
 .toolbarButton.toggled::before {
   background-color: var(--toggled-btn-color) !important;
@@ -1087,85 +371,179 @@ const Z_GALLERY_PDF_VIEWER_CHROME_CSS = `
 }
 `;
 
-class ZGalleryPreviewComponent {
-    _document = inject(DOCUMENT);
-    _sanitizer = inject(DomSanitizer);
-    file = input.required(/* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "file" }] : /* istanbul ignore next */ []));
-    files = input([], /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "files" }] : /* istanbul ignore next */ []));
-    zShowRemove = input(false, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "zShowRemove" }] : /* istanbul ignore next */ []));
-    zPdfViewerConfig = input({}, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "zPdfViewerConfig" }] : /* istanbul ignore next */ []));
-    zTrustedResourceOrigins = input([], /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "zTrustedResourceOrigins" }] : /* istanbul ignore next */ []));
-    zOnClose = output();
-    zOnDownload = output();
-    zOnNavigate = output();
-    zOnRemove = output();
-    zoomed = signal(false, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "zoomed" }] : /* istanbul ignore next */ []));
-    isLoading = signal(true, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "isLoading" }] : /* istanbul ignore next */ []));
-    rotation = signal(0, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "rotation" }] : /* istanbul ignore next */ []));
-    isConverting = signal(false, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "isConverting" }] : /* istanbul ignore next */ []));
-    conversionError = signal(null, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "conversionError" }] : /* istanbul ignore next */ []));
-    previewError = signal(false, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "previewError" }] : /* istanbul ignore next */ []));
-    docHtmlContent = signal(null, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "docHtmlContent" }] : /* istanbul ignore next */ []));
-    textContent = signal('', /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "textContent" }] : /* istanbul ignore next */ []));
-    pdfViewer = viewChild('pdfViewer', /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "pdfViewer" }] : /* istanbul ignore next */ []));
-    _mediaLoaded = signal(false, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "_mediaLoaded" }] : /* istanbul ignore next */ []));
-    _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;
+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 === 'audio' ||
+        category === 'word' ||
+        category === 'excel' ||
+        category === 'text' ||
+        category === 'code');
+};
+const isImage = (file) => getFileCategory(file) === 'image';
+
+class ZGalleryPreviewComponent {
+    _document = inject(DOCUMENT);
+    file = input.required(/* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "file" }] : /* istanbul ignore next */ []));
+    files = input([], /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "files" }] : /* istanbul ignore next */ []));
+    zShowRemove = input(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "zShowRemove" }] : /* istanbul ignore next */ []));
+    zPdfViewerConfig = input({}, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "zPdfViewerConfig" }] : /* istanbul ignore next */ []));
+    zTrustedResourceOrigins = input([], /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "zTrustedResourceOrigins" }] : /* istanbul ignore next */ []));
+    zOnClose = output();
+    zOnDownload = output();
+    zOnNavigate = output();
+    zOnRemove = output();
+    zoomed = signal(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "zoomed" }] : /* istanbul ignore next */ []));
+    isLoading = signal(true, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "isLoading" }] : /* istanbul ignore next */ []));
+    rotation = signal(0, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "rotation" }] : /* istanbul ignore next */ []));
+    isConverting = signal(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "isConverting" }] : /* istanbul ignore next */ []));
+    conversionError = signal(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "conversionError" }] : /* istanbul ignore next */ []));
+    previewError = signal(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "previewError" }] : /* istanbul ignore next */ []));
+    officeSource = signal(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "officeSource" }] : /* istanbul ignore next */ []));
+    textContent = signal('', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "textContent" }] : /* istanbul ignore next */ []));
+    pdfViewer = viewChild('pdfViewer', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "pdfViewer" }] : /* istanbul ignore next */ []));
+    _mediaLoaded = signal(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_mediaLoaded" }] : /* istanbul ignore next */ []));
+    _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.officeSource.set(null);
+            this.textContent.set('');
+            const category = getFileCategory(currentFile);
+            if (category === 'word' ||
+                category === 'excel' ||
+                category === 'powerpoint' ||
+                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);
+        const isOffice = category === 'word' || category === 'excel' || category === 'powerpoint';
         try {
-            if (category === 'word') {
-                await this._loadDocx(url);
-            }
-            else if (category === 'excel') {
-                await this._loadExcel(url);
-            }
-            else {
-                await this._loadText(url);
+            if (isOffice) {
+                const response = await fetch(url);
+                this._assertSuccessfulResponse(response);
+                this.officeSource.set(await response.blob());
+                return;
             }
+            await this._loadText(url);
         }
         catch (error) {
             const message = error instanceof Error ? error.message : 'Failed to load file content';
@@ -1173,29 +551,11 @@ class ZGalleryPreviewComponent {
         }
         finally {
             this.isConverting.set(false);
-            this._completeLoading();
+            if (!isOffice || this.conversionError()) {
+                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);
@@ -1257,15 +617,15 @@ class ZGalleryPreviewComponent {
         return {
             ...config,
             viewerFolder: config.viewerFolder ?? '/assets/pdfjs',
-            locale: viewerConfig?.locale ?? config.locale ?? '',
+            locale: viewerConfig?.locale ?? config.locale ?? 'vi',
             showSpinner: viewerConfig?.showSpinner ?? config.showSpinner ?? false,
-            useOnlyCssZoom: viewerConfig?.useOnlyCssZoom ?? config.useOnlyCssZoom ?? false,
+            useOnlyCssZoom: viewerConfig?.useOnlyCssZoom ?? config.useOnlyCssZoom ?? true,
             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,
+            showAnnotations: controlVisibility?.annotations ?? config.showAnnotations ?? false,
+            showDownload: controlVisibility?.download ?? config.showDownload ?? false,
+            showViewBookmark: controlVisibility?.viewBookmark ?? config.showViewBookmark ?? false,
+            showPrint: controlVisibility?.print ?? config.showPrint ?? false,
             showFullScreen: controlVisibility?.fullScreen ?? config.showFullScreen ?? true,
             showFind: controlVisibility?.find ?? config.showFind ?? true,
             downloadOnLoad: autoActions?.downloadOnLoad ?? config.downloadOnLoad ?? false,
@@ -1280,11 +640,11 @@ class ZGalleryPreviewComponent {
             showSidebar: groupVisibility?.sidebar ?? config.showSidebar ?? true,
             showSidebarLeft: groupVisibility?.sidebarLeft ?? config.showSidebarLeft ?? true,
             showSidebarRight: groupVisibility?.sidebarRight ?? config.showSidebarRight ?? true,
-            toolbarDensity: layoutConfig?.toolbarDensity ?? config.toolbarDensity ?? 'default',
+            toolbarDensity: layoutConfig?.toolbarDensity ?? config.toolbarDensity ?? 'compact',
             sidebarWidth: layoutConfig?.sidebarWidth ?? config.sidebarWidth,
             toolbarPosition: layoutConfig?.toolbarPosition ?? config.toolbarPosition ?? 'top',
             sidebarPosition: layoutConfig?.sidebarPosition ?? config.sidebarPosition ?? 'left',
-            responsiveBreakpoint: layoutConfig?.responsiveBreakpoint ?? config.responsiveBreakpoint,
+            responsiveBreakpoint: layoutConfig?.responsiveBreakpoint ?? config.responsiveBreakpoint ?? 768,
             zoom: config.zoom ?? 'page-fit',
             rotation: config.rotation ?? 0,
             cursor: config.cursor ?? 'select',
@@ -1293,7 +653,7 @@ class ZGalleryPreviewComponent {
             pageMode: config.pageMode ?? 'none',
             page: config.page ?? 1,
             iframeBorder: config.iframeBorder ?? 0,
-            theme: themeConfig?.theme ?? config.theme ?? 'auto',
+            theme: themeConfig?.theme ?? config.theme ?? 'light',
             primaryColor: themeConfig?.primaryColor ?? config.primaryColor,
             backgroundColor: themeConfig?.backgroundColor ?? config.backgroundColor,
             pageBorderColor: themeConfig?.pageBorderColor ?? config.pageBorderColor,
@@ -1322,15 +682,55 @@ class ZGalleryPreviewComponent {
     }
     isVideo = computed(() => getFileCategory(this.file()) === 'video', /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "isVideo" }] : /* istanbul ignore next */ []));
+    isAudio = computed(() => getFileCategory(this.file()) === 'audio', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "isAudio" }] : /* istanbul ignore next */ []));
     isWordFile = computed(() => getFileCategory(this.file()) === 'word', /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "isWordFile" }] : /* istanbul ignore next */ []));
     isExcelFile = computed(() => getFileCategory(this.file()) === 'excel', /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "isExcelFile" }] : /* istanbul ignore next */ []));
+    isPowerpointFile = computed(() => getFileCategory(this.file()) === 'powerpoint', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "isPowerpointFile" }] : /* istanbul ignore next */ []));
+    documentPreviewKind = computed(() => {
+        const category = getFileCategory(this.file());
+        return category === 'excel' ? 'excel' : category === 'powerpoint' ? 'powerpoint' : 'word';
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "documentPreviewKind" }] : /* istanbul ignore next */ []));
+    mediaUrl = computed(() => this.file().url || this.file().downloadUrl || null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "mediaUrl" }] : /* istanbul ignore next */ []));
     isTextFile = computed(() => {
         const category = getFileCategory(this.file());
         return category === 'text' || category === 'code';
     }, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "isTextFile" }] : /* istanbul ignore next */ []));
+    isCodeFile = computed(() => getFileCategory(this.file()) === 'code', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "isCodeFile" }] : /* istanbul ignore next */ []));
+    fileExtension = computed(() => this.file().name.split('.').pop()?.toUpperCase() ?? 'TEXT', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "fileExtension" }] : /* istanbul ignore next */ []));
+    codeLanguage = computed(() => {
+        switch (this.fileExtension()) {
+            case 'JS':
+                return 'javascript';
+            case 'HTML':
+                return 'html';
+            case 'CSS':
+                return 'css';
+            case 'SCSS':
+                return 'scss';
+            case 'JSON':
+                return 'json';
+            case 'YML':
+            case 'YAML':
+                return 'yaml';
+            case 'MD':
+                return 'markdown';
+            case 'SH':
+                return 'bash';
+            case 'TS':
+            default:
+                return 'typescript';
+        }
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "codeLanguage" }] : /* istanbul ignore next */ []));
     canPreview = computed(() => isPreviewable(this.file()), /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "canPreview" }] : /* istanbul ignore next */ []));
     formattedSize = computed(() => formatFileSize(this.file().size), /* @ts-ignore */
@@ -1373,6 +773,7 @@ class ZGalleryPreviewComponent {
             pdf: 'lucideFileText',
             word: 'lucideFileText',
             excel: 'lucideFileSpreadsheet',
+            powerpoint: 'lucidePresentation',
             video: 'lucideVideo',
             audio: 'lucideMusic',
             archive: 'lucideFileArchive',
@@ -1439,6 +840,13 @@ class ZGalleryPreviewComponent {
     onVideoLoad() {
         this._completeLoading();
     }
+    onOfficeLoad() {
+        this._completeLoading();
+    }
+    onOfficeError(message) {
+        this.conversionError.set(message);
+        this._completeLoading();
+    }
     onPdfLoad() {
         this._queueMobilePdfFit();
         this._completeLoading();
@@ -1475,115 +883,793 @@ class ZGalleryPreviewComponent {
         });
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: ZGalleryPreviewComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.2", 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 });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.2", 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 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            [zShowDelay]=\"300\"\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            [zShowDelay]=\"300\"\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          [zShowDelay]=\"300\"\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            [zShowDelay]=\"300\"\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 rounded-lg\">\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 dark:border-border relative h-[75vh] w-[85vw] max-w-[96vw] overflow-hidden rounded-sm border border-transparent 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                [externalWindow]=\"false\"\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\n          class=\"dark:border-border relative flex h-[60vh] w-[70vw] items-center justify-center rounded-lg border border-transparent\">\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            @if (mediaUrl()) {\n              <z-media-player\n                class=\"size-full max-w-full rounded-lg shadow-2xl transition-opacity duration-300\"\n                [class.opacity-0]=\"isLoading()\"\n                [class.opacity-100]=\"!isLoading()\"\n                [zSrc]=\"mediaUrl()!\"\n                [zPoster]=\"file().thumbnailUrl ?? ''\"\n                (zLoaded)=\"onVideoLoad()\"\n                (zError)=\"onMediaError()\" />\n            }\n          }\n        </div>\n      } @else if (isAudio()) {\n        <div\n          class=\"dark:border-border relative flex w-[min(90vw,42rem)] items-center justify-center overflow-hidden rounded-sm border border-transparent p-2 shadow-lg\">\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 items-center justify-center rounded-lg p-4 shadow-2xl\">\n              <span class=\"text-foreground text-sm font-medium\">\n                {{ 'i18n_z_ui_gallery_preview_load_error' | translate }}\n              </span>\n            </div>\n          } @else if (mediaUrl()) {\n            <z-audio-player\n              class=\"block w-full transition-opacity duration-300\"\n              [class.opacity-0]=\"isLoading()\"\n              [class.opacity-100]=\"!isLoading()\"\n              [zSrc]=\"mediaUrl()!\"\n              [zTitle]=\"file().name\"\n              (zLoaded)=\"onVideoLoad()\"\n              (zError)=\"onMediaError()\" />\n          }\n        </div>\n      } @else if (isWordFile() || isExcelFile() || isPowerpointFile()) {\n        <div class=\"dark:border-border relative h-[75vh] w-[85vw] overflow-hidden rounded-lg border border-transparent\">\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 (officeSource()) {\n            <z-gallery-office-preview\n              class=\"absolute inset-0 rounded-lg shadow-2xl\"\n              [zSource]=\"officeSource()!\"\n              [zKind]=\"documentPreviewKind()\"\n              (zLoaded)=\"onOfficeLoad()\"\n              (zError)=\"onOfficeError($event)\" />\n          }\n        </div>\n      } @else if (isTextFile()) {\n        <div class=\"dark:border-border relative h-[75vh] w-[85vw] overflow-hidden rounded-lg border border-transparent\">\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            @if (isCodeFile()) {\n              <z-code\n                class=\"absolute inset-0 overflow-hidden rounded-lg shadow-2xl\"\n                [zCode]=\"textContent()\"\n                [zLanguage]=\"codeLanguage()\"\n                [zTitle]=\"file().name\" />\n            } @else {\n              <z-gallery-text-preview\n                class=\"absolute inset-0 rounded-lg shadow-2xl\"\n                [zContent]=\"textContent()\"\n                [zLanguage]=\"fileExtension()\" />\n            }\n          }\n        </div>\n      } @else {\n        <div\n          class=\"bg-card dark:border-border flex flex-col items-center justify-center rounded-lg border border-transparent 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-preview-backdrop{background-color:#00000047;backdrop-filter:blur(3px);animation:z-gallery-backdrop-enter .15s ease-out forwards}.z-gallery-preview-backdrop.z-backdrop-leaving{animation:z-gallery-backdrop-exit .12s ease-in forwards}@keyframes z-gallery-backdrop-enter{0%{opacity:0}to{opacity:1}}@keyframes z-gallery-backdrop-exit{0%{opacity:1}to{opacity:0}}.z-gallery-pdf-frame *{border-color:#606060!important;outline-color:#606060!important}.z-gallery-pdf-frame{background:#606060}.z-gallery-preview .z-code ::selection{background:var(--primary);color:var(--primary-foreground)}.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: ZCodeComponent, selector: "z-code", inputs: ["class", "zTitle", "zLanguage", "zCode", "zTheme", "zShowLineNumbers"] }, { 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: "component", type: ZMediaPlayerComponent, selector: "z-media-player", inputs: ["class", "zSrc", "zSources", "zPoster", "zAutoplay", "zLoop", "zMuted", "zVolume", "zSubtitles", "zThumbnailsVtt", "zControls"], outputs: ["zLoaded", "zError", "zPlay", "zTimeUpdate", "zVolumeChange", "zFullscreenChange", "zTheaterModeChange", "zMiniplayerChange", "zQualityChange"] }, { kind: "component", type: ZAudioPlayerComponent, selector: "z-audio-player", inputs: ["zSrc", "zTitle", "zTags", "zDownload"], outputs: ["zLoaded", "zError", "zPlay"] }, { kind: "component", type: ZGalleryOfficePreviewComponent, selector: "z-gallery-office-preview", inputs: ["zSource", "zKind"], outputs: ["zLoaded", "zError"] }, { kind: "component", type: ZGalleryTextPreviewComponent, selector: "z-gallery-text-preview", inputs: ["zContent", "zLanguage"] }, { 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: "22.1.2", 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: {
+            args: [{ selector: 'z-gallery-preview', imports: [
+                        ZButtonComponent,
+                        ZCodeComponent,
+                        ZIconComponent,
+                        ZSkeletonComponent,
+                        ZTooltipDirective,
+                        ZMediaPlayerComponent,
+                        ZAudioPlayerComponent,
+                        ZGalleryOfficePreviewComponent,
+                        ZGalleryTextPreviewComponent,
+                        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"] }]
+                    }, template: "<div\n  class=\"animate-in fade-in fixed inset-0 z-50 flex items-center justify-center 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            [zShowDelay]=\"300\"\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            [zShowDelay]=\"300\"\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          [zShowDelay]=\"300\"\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            [zShowDelay]=\"300\"\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 rounded-lg\">\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 dark:border-border relative h-[75vh] w-[85vw] max-w-[96vw] overflow-hidden rounded-sm border border-transparent 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                [externalWindow]=\"false\"\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\n          class=\"dark:border-border relative flex h-[60vh] w-[70vw] items-center justify-center rounded-lg border border-transparent\">\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            @if (mediaUrl()) {\n              <z-media-player\n                class=\"size-full max-w-full rounded-lg shadow-2xl transition-opacity duration-300\"\n                [class.opacity-0]=\"isLoading()\"\n                [class.opacity-100]=\"!isLoading()\"\n                [zSrc]=\"mediaUrl()!\"\n                [zPoster]=\"file().thumbnailUrl ?? ''\"\n                (zLoaded)=\"onVideoLoad()\"\n                (zError)=\"onMediaError()\" />\n            }\n          }\n        </div>\n      } @else if (isAudio()) {\n        <div\n          class=\"dark:border-border relative flex w-[min(90vw,42rem)] items-center justify-center overflow-hidden rounded-sm border border-transparent p-2 shadow-lg\">\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 items-center justify-center rounded-lg p-4 shadow-2xl\">\n              <span class=\"text-foreground text-sm font-medium\">\n                {{ 'i18n_z_ui_gallery_preview_load_error' | translate }}\n              </span>\n            </div>\n          } @else if (mediaUrl()) {\n            <z-audio-player\n              class=\"block w-full transition-opacity duration-300\"\n              [class.opacity-0]=\"isLoading()\"\n              [class.opacity-100]=\"!isLoading()\"\n              [zSrc]=\"mediaUrl()!\"\n              [zTitle]=\"file().name\"\n              (zLoaded)=\"onVideoLoad()\"\n              (zError)=\"onMediaError()\" />\n          }\n        </div>\n      } @else if (isWordFile() || isExcelFile() || isPowerpointFile()) {\n        <div class=\"dark:border-border relative h-[75vh] w-[85vw] overflow-hidden rounded-lg border border-transparent\">\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 (officeSource()) {\n            <z-gallery-office-preview\n              class=\"absolute inset-0 rounded-lg shadow-2xl\"\n              [zSource]=\"officeSource()!\"\n              [zKind]=\"documentPreviewKind()\"\n              (zLoaded)=\"onOfficeLoad()\"\n              (zError)=\"onOfficeError($event)\" />\n          }\n        </div>\n      } @else if (isTextFile()) {\n        <div class=\"dark:border-border relative h-[75vh] w-[85vw] overflow-hidden rounded-lg border border-transparent\">\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            @if (isCodeFile()) {\n              <z-code\n                class=\"absolute inset-0 overflow-hidden rounded-lg shadow-2xl\"\n                [zCode]=\"textContent()\"\n                [zLanguage]=\"codeLanguage()\"\n                [zTitle]=\"file().name\" />\n            } @else {\n              <z-gallery-text-preview\n                class=\"absolute inset-0 rounded-lg shadow-2xl\"\n                [zContent]=\"textContent()\"\n                [zLanguage]=\"fileExtension()\" />\n            }\n          }\n        </div>\n      } @else {\n        <div\n          class=\"bg-card dark:border-border flex flex-col items-center justify-center rounded-lg border border-transparent 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-preview-backdrop{background-color:#00000047;backdrop-filter:blur(3px);animation:z-gallery-backdrop-enter .15s ease-out forwards}.z-gallery-preview-backdrop.z-backdrop-leaving{animation:z-gallery-backdrop-exit .12s ease-in forwards}@keyframes z-gallery-backdrop-enter{0%{opacity:0}to{opacity:1}}@keyframes z-gallery-backdrop-exit{0%{opacity:1}to{opacity:0}}.z-gallery-pdf-frame *{border-color:#606060!important;outline-color:#606060!important}.z-gallery-pdf-frame{background:#606060}.z-gallery-preview .z-code ::selection{background:var(--primary);color:var(--primary-foreground)}.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 ZGalleryPreviewRef {
+    _dynamicRef;
+    _closed = false;
+    componentInstance = null;
+    zAfterClose = new EventEmitter();
+    constructor(_dynamicRef) {
+        this._dynamicRef = _dynamicRef;
+    }
+    close() {
+        if (this._closed) {
+            return;
+        }
+        this._closed = true;
+        this.zAfterClose.emit();
+        this.zAfterClose.complete();
+        this._dynamicRef?.close();
+    }
+    markClosed() {
+        if (this._closed) {
+            return;
+        }
+        this._closed = true;
+        this.zAfterClose.emit();
+        this.zAfterClose.complete();
+    }
+}
+
+class ZGalleryPreviewService {
+    _document = inject(DOCUMENT);
+    _dynamicService = inject(ZDynamicService);
+    open(fileOrOptions, options = {}) {
+        const previewOptions = this._normalizeOptions(fileOrOptions, options);
+        const dynamicRef = this._dynamicService.open(ZGalleryPreviewComponent, {
+            inputs: {
+                file: previewOptions.file,
+                files: previewOptions.files,
+                zShowRemove: previewOptions.zShowRemove ?? false,
+                zPdfViewerConfig: previewOptions.zPdfViewerConfig ?? {},
+                zTrustedResourceOrigins: previewOptions.zTrustedResourceOrigins ?? [],
+            },
+            hasBackdrop: true,
+            backdropClass: 'z-gallery-preview-backdrop',
+            panelClass: 'z-gallery-preview-overlay-pane',
+            scrollLock: true,
+            scrollable: false,
+        });
+        const previewRef = new ZGalleryPreviewRef(dynamicRef);
+        previewRef.componentInstance = dynamicRef.componentInstance;
+        dynamicRef.afterClose.subscribe(() => previewRef.markClosed());
+        if (!dynamicRef.componentInstance) {
+            return previewRef;
+        }
+        dynamicRef.componentInstance.zOnClose.subscribe(() => {
+            previewOptions.zOnClose?.();
+            previewRef.close();
+        });
+        dynamicRef.componentInstance.zOnDownload.subscribe(file => this._handleDownload(file, previewOptions));
+        dynamicRef.componentInstance.zOnNavigate.subscribe(file => {
+            dynamicRef.setInput('file', file);
+            previewOptions.zOnNavigate?.(file);
+        });
+        dynamicRef.componentInstance.zOnRemove.subscribe(file => previewOptions.zOnRemove?.(file));
+        return previewRef;
+    }
+    _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 || typeof document === 'undefined') {
+            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: "22.1.2", ngImport: i0, type: ZGalleryPreviewService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: ZGalleryPreviewService, providedIn: 'root' });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: ZGalleryPreviewService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root',
+                }]
+        }] });
+
+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',
+    },
+};
+
+class ZGalleryItemComponent {
+    file = input.required(/* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "file" }] : /* istanbul ignore next */ []));
+    zMode = input('grid', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "zMode" }] : /* istanbul ignore next */ []));
+    zSize = input('default', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "zSize" }] : /* istanbul ignore next */ []));
+    zShowDownload = input(true, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "zShowDownload" }] : /* istanbul ignore next */ []));
+    zShowPreview = input(true, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "zShowPreview" }] : /* istanbul ignore next */ []));
+    zShowRemove = input(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "zShowRemove" }] : /* istanbul ignore next */ []));
+    zSelectable = input(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "zSelectable" }] : /* istanbul ignore next */ []));
+    zSelected = input(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "zSelected" }] : /* istanbul ignore next */ []));
+    zOnDownload = output();
+    zOnPreview = output();
+    zOnRemove = output();
+    zOnSelect = output();
+    isLoading = signal(true, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "isLoading" }] : /* istanbul ignore next */ []));
+    formattedSize = computed(() => formatFileSize(this.file().size), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "formattedSize" }] : /* istanbul ignore next */ []));
+    category = computed(() => getFileCategory(this.file()), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "category" }] : /* istanbul ignore next */ []));
+    isImage = computed(() => this.category() === 'image', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "isImage" }] : /* istanbul ignore next */ []));
+    isVideo = computed(() => this.category() === 'video', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "isVideo" }] : /* istanbul ignore next */ []));
+    hasVideoPreview = computed(() => this.isVideo() && !!this.file().url, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "hasVideoPreview" }] : /* istanbul ignore next */ []));
+    fileExtension = computed(() => {
+        const fileName = this.file().name;
+        const parts = fileName.split('.');
+        if (parts.length < 2) {
+            return 'FILE';
+        }
+        return parts[parts.length - 1].toUpperCase();
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "fileExtension" }] : /* istanbul ignore next */ []));
+    mediaHeightClass = computed(() => {
+        const size = this.zSize();
+        switch (size) {
+            case 'sm':
+                return 'h-36';
+            case 'lg':
+                return 'h-56';
+            default:
+                return 'h-44';
+        }
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "mediaHeightClass" }] : /* istanbul ignore next */ []));
+    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);
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "formattedDate" }] : /* istanbul ignore next */ []));
+    categoryStyle = computed(() => {
+        const style = FILE_CATEGORY_STYLES[this.category()];
+        return {
+            ...style,
+            icon: style.icon,
+        };
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "categoryStyle" }] : /* istanbul ignore next */ []));
+    fileTypeClasses = computed(() => zMergeClasses('inline-flex min-w-14 items-center justify-center rounded-full border border-current px-2.5 py-1 text-[0.6875rem] font-semibold tracking-wide shadow-2xs', this.categoryStyle().bg, this.categoryStyle().text), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "fileTypeClasses" }] : /* istanbul ignore next */ []));
+    canPreview = computed(() => isPreviewable(this.file()), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "canPreview" }] : /* istanbul ignore next */ []));
+    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: "22.1.2", ngImport: i0, type: ZGalleryItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.2", 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()"
+      >
+        <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-current bg-black/45 px-2.5 py-1 text-[0.6875rem] font-semibold tracking-wide text-white shadow-2xs 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()) {
+          <z-checkbox [zChecked]="zSelected()" zSize="sm" class="shrink-0" />
+        }
+
+        <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: 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: "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: "22.1.2", ngImport: i0, type: ZGalleryItemComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'z-gallery-item',
+                    imports: [ZButtonComponent, ZCheckboxComponent, 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()"
+      >
+        <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-current bg-black/45 px-2.5 py-1 text-[0.6875rem] font-semibold tracking-wide text-white shadow-2xs 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>
 
-class ZGalleryPreviewService {
-    _document = inject(DOCUMENT);
-    _injector = inject(Injector);
-    _overlayService = inject(ZOverlayService);
-    _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(ZGalleryPreviewComponent, { injector: 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._overlayService.createGlobal({
-            hasBackdrop: false,
-            panelClass: 'z-gallery-preview-overlay-pane',
-            scrollLock: true,
-        });
-        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;
+          <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()) {
+          <z-checkbox [zChecked]="zSelected()" zSize="sm" class="shrink-0" />
         }
-        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);
+
+        <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>
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: ZGalleryPreviewService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: ZGalleryPreviewService, providedIn: 'root' });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: ZGalleryPreviewService, decorators: [{
-            type: Injectable,
-            args: [{
-                    providedIn: 'root',
+  `,
+                    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 zGalleryVariants = cva('z-gallery', {
     variants: {
@@ -2521,5 +2607,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.2", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { FILE_CATEGORY_STYLES, ZGalleryComponent, ZGalleryFileIconComponent, ZGalleryItemComponent, ZGalleryPreviewComponent, ZGalleryPreviewItemDirective, ZGalleryPreviewRef, ZGalleryPreviewService, formatFileSize, getFileCategory, isImage, isPreviewable, zGalleryFileIconVariants, zGalleryItemVariants, zGalleryVariants };
+export { FILE_CATEGORY_STYLES, ZGalleryComponent, ZGalleryFileIconComponent, ZGalleryItemComponent, ZGalleryOfficePreviewComponent, ZGalleryPreviewComponent, ZGalleryPreviewItemDirective, ZGalleryPreviewRef, ZGalleryPreviewService, ZGalleryTextPreviewComponent, formatFileSize, getFileCategory, isImage, isPreviewable, zGalleryFileIconVariants, zGalleryItemVariants, zGalleryVariants };
 //# sourceMappingURL=shival99-z-ui-components-z-gallery.mjs.map