@shival99/z-ui 2.1.19 → 2.1.20

package/assets/css/base.css

@@ -1,3 +1,5 @@
+@import './global.css';
+
 :root {
   --font-sans: 'Be Vietnam Pro', system-ui, -apple-system, sans-serif;
   --font-mono: ui-monospace, 'Cascadia Code', 'Source Code Pro', Menlo, Consolas, 'Courier New', monospace;
@@ -111,49 +113,3 @@ body {
     box-shadow: var(--shadow-card-soft);
   }
 }
-
-/* ==================== CDK Drag-Drop Styles ==================== */
-
-/* Drag Preview - Element being dragged */
-.cdk-drag-preview {
-  box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.15);
-  border-radius: 6px;
-  background-color: var(--card);
-  z-index: 10000 !important;
-  pointer-events: none;
-  opacity: 1;
-  padding: 1rem;
-}
-
-.dark .cdk-drag-preview {
-  border: 1px solid var(--border);
-  box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.4);
-}
-
-/* Drag Placeholder - Empty space where item was */
-.cdk-drag-placeholder {
-  background-color: color-mix(in srgb, var(--primary) 12%, transparent);
-  border: 2px dashed var(--primary);
-  border-radius: 6px;
-  opacity: 0.8;
-  visibility: visible;
-}
-
-.cdk-drag-placeholder * {
-  opacity: 0;
-}
-
-/* Drag Animation - Item movement transition */
-.cdk-drag-animating {
-  transition: transform 100ms cubic-bezier(0, 0, 0.2, 1);
-}
-
-/* Drop List Animation - Smooth sorting transition */
-.cdk-drop-list-dragging .cdk-drag:not(.cdk-drag-placeholder) {
-  transition: transform 100ms cubic-bezier(0, 0, 0.2, 1);
-}
-
-/* Dragging Item - No transition during drag */
-.cdk-drag-dragging {
-  transition: none !important;
-}

package/assets/css/global.css

@@ -0,0 +1,100 @@
+/* CDK drag-drop */
+.cdk-drag-preview {
+  box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.15);
+  border-radius: 6px;
+  background-color: var(--card);
+  z-index: 10000 !important;
+  pointer-events: none;
+  opacity: 1;
+  padding: 1rem;
+}
+
+.dark .cdk-drag-preview {
+  border: 1px solid var(--border);
+  box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.4);
+}
+
+.cdk-drag-placeholder {
+  background-color: color-mix(in srgb, var(--primary) 12%, transparent);
+  border: 2px dashed var(--primary);
+  border-radius: 6px;
+  opacity: 0.8;
+  visibility: visible;
+}
+
+.cdk-drag-placeholder * {
+  opacity: 0;
+}
+
+.cdk-drag-animating,
+.cdk-drop-list-dragging .cdk-drag:not(.cdk-drag-placeholder) {
+  transition: transform 100ms cubic-bezier(0, 0, 0.2, 1);
+}
+
+.cdk-drag-dragging {
+  transition: none !important;
+}
+
+/* Modal print layout */
+@media print {
+  body > *:not(.cdk-overlay-container) {
+    display: none !important;
+  }
+
+  .cdk-overlay-backdrop {
+    display: none !important;
+  }
+
+  .cdk-overlay-pane {
+    position: static !important;
+    width: 100% !important;
+    max-width: 100% !important;
+    height: auto !important;
+    max-height: none !important;
+    transform: none !important;
+  }
+
+  .z-modal-wrapper,
+  z-modal {
+    position: static !important;
+    display: block !important;
+  }
+
+  .z-modal-header,
+  .z-modal-footer,
+  [zModalHeader],
+  [zModalFooter],
+  .z-modal__header,
+  .z-modal__footer,
+  .z-modal-close,
+  .z-modal__close {
+    display: none !important;
+  }
+
+  .z-modal-content,
+  .z-modal__content,
+  [zModalContent] {
+    padding: 0 !important;
+    margin: 0 !important;
+    border: none !important;
+    box-shadow: none !important;
+  }
+
+  * {
+    background: transparent !important;
+    box-shadow: none !important;
+    -webkit-print-color-adjust: exact !important;
+    print-color-adjust: exact !important;
+  }
+}
+
+/* Cho phép Blossom color picker thoát khỏi vùng overflow của drawer/modal. */
+z-drawer:has(.bcp-core[aria-expanded='true']),
+z-modal:has(.bcp-core[aria-expanded='true']) {
+  overflow: visible !important;
+}
+
+z-drawer:has(.bcp-core[aria-expanded='true']) .ng-scroll-viewport,
+z-modal:has(.bcp-core[aria-expanded='true']) .ng-scroll-viewport {
+  overflow: visible !important;
+}

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

@@ -1362,7 +1362,7 @@ class ZGalleryPreviewComponent {
         });
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.9", ngImport: i0, type: ZGalleryPreviewComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.9", type: ZGalleryPreviewComponent, isStandalone: true, selector: "z-gallery-preview", inputs: { file: { classPropertyName: "file", publicName: "file", isSignal: true, isRequired: true, transformFunction: null }, files: { classPropertyName: "files", publicName: "files", isSignal: true, isRequired: false, transformFunction: null }, zShowRemove: { classPropertyName: "zShowRemove", publicName: "zShowRemove", isSignal: true, isRequired: false, transformFunction: null }, zPdfViewerConfig: { classPropertyName: "zPdfViewerConfig", publicName: "zPdfViewerConfig", isSignal: true, isRequired: false, transformFunction: null }, zTrustedResourceOrigins: { classPropertyName: "zTrustedResourceOrigins", publicName: "zTrustedResourceOrigins", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { zOnClose: "zOnClose", zOnDownload: "zOnDownload", zOnNavigate: "zOnNavigate", zOnRemove: "zOnRemove" }, host: { listeners: { "document:keydown": "onKeyDown($event)" }, classAttribute: "z-gallery-preview z-[9999]" }, viewQueries: [{ propertyName: "pdfViewer", first: true, predicate: ["pdfViewer"], descendants: true, isSignal: true }], ngImport: i0, template: "<div\n  class=\"animate-in fade-in fixed inset-0 z-50 flex items-center justify-center bg-black/80 backdrop-blur-sm duration-200\"\n  (click)=\"onBackdropClick($event)\">\n  <button\n    z-button\n    zType=\"ghost\"\n    zShape=\"circle\"\n    class=\"absolute top-3 right-3 z-20 text-white hover:bg-white/20 lg:top-4 lg:right-4\"\n    (click)=\"close()\">\n    <i z-icon zType=\"lucideX\" zSize=\"24\"></i>\n  </button>\n\n  @if (hasPrev()) {\n    <button\n      z-button\n      zType=\"ghost\"\n      zShape=\"circle\"\n      class=\"absolute left-4 z-10 text-white hover:bg-white/20\"\n      (click)=\"navigate(-1)\">\n      <i z-icon zType=\"lucideChevronLeft\" zSize=\"32\"></i>\n    </button>\n  }\n\n  @if (hasNext()) {\n    <button\n      z-button\n      zType=\"ghost\"\n      zShape=\"circle\"\n      class=\"absolute right-4 z-10 text-white hover:bg-white/20\"\n      (click)=\"navigate(1)\">\n      <i z-icon zType=\"lucideChevronRight\" zSize=\"32\"></i>\n    </button>\n  }\n\n  <div class=\"flex h-full w-full flex-col items-center\" (click)=\"$event.stopPropagation()\">\n    <div\n      class=\"dark:!border-border absolute top-3 right-14 left-3 z-10 flex min-w-0 items-center justify-between gap-2 rounded-[0.375rem] border !border-transparent bg-black/70 px-2.5 py-1.5 text-xs text-white shadow-lg backdrop-blur-sm lg:top-4 lg:right-auto lg:left-1/2 lg:max-w-[calc(100vw-10rem)] lg:-translate-x-1/2 lg:justify-start lg:bg-black/60 lg:px-4 lg:py-2 lg:text-sm dark:border\">\n      <div class=\"flex min-w-0 items-baseline gap-1.5\">\n        <span class=\"min-w-0 truncate font-medium lg:max-w-[12.5rem]\">{{ file().name }}</span>\n        <span class=\"hidden shrink-0 text-white/70 lg:inline\">({{ formattedSize() }})</span>\n      </div>\n\n      @if (files().length > 1) {\n        <span class=\"hidden shrink-0 text-white/70 md:inline\">{{ currentIndex() + 1 }} / {{ files().length }}</span>\n      }\n\n      <div class=\"ml-1 flex shrink-0 items-center gap-0.5\">\n        @if (isImageFile()) {\n          <button\n            z-button\n            zType=\"ghost\"\n            zSize=\"xs\"\n            zShape=\"circle\"\n            class=\"text-white hover:bg-white/20\"\n            z-tooltip\n            [zContent]=\"'i18n_z_ui_gallery_rotate_left' | translate\"\n            (click)=\"rotateLeft()\">\n            <i z-icon zType=\"lucideUndo\" zSize=\"14\"></i>\n          </button>\n          <button\n            z-button\n            zType=\"ghost\"\n            zSize=\"xs\"\n            zShape=\"circle\"\n            class=\"text-white hover:bg-white/20\"\n            z-tooltip\n            [zContent]=\"'i18n_z_ui_gallery_rotate_right' | translate\"\n            (click)=\"rotateRight()\">\n            <i z-icon zType=\"lucideRedo\" zSize=\"14\"></i>\n          </button>\n        }\n\n        <button\n          z-button\n          zType=\"ghost\"\n          zSize=\"xs\"\n          zShape=\"circle\"\n          class=\"text-white hover:bg-white/20\"\n          z-tooltip\n          [zContent]=\"'i18n_z_ui_gallery_download' | translate\"\n          (click)=\"download()\">\n          <i z-icon zType=\"lucideDownload\" zSize=\"14\"></i>\n        </button>\n\n        @if (zShowRemove()) {\n          <button\n            z-button\n            zType=\"ghost\"\n            zSize=\"xs\"\n            zShape=\"circle\"\n            class=\"text-white hover:bg-white/20\"\n            z-tooltip\n            [zContent]=\"'i18n_z_ui_gallery_delete' | translate\"\n            (click)=\"remove()\">\n            <i z-icon zType=\"lucideTrash2\" zSize=\"14\"></i>\n          </button>\n        }\n      </div>\n    </div>\n\n    <div class=\"relative flex flex-1 items-center justify-center pt-16\">\n      @if (isImageFile()) {\n        <div class=\"relative flex h-[60vh] w-[70vw] items-center justify-center\">\n          @if (isLoading()) {\n            <z-skeleton class=\"absolute inset-0 rounded-lg\" />\n            <div class=\"text-muted-foreground absolute inset-0 flex items-center justify-center text-sm font-medium\">\n              {{ 'i18n_z_ui_gallery_loading_preview' | translate }}\n            </div>\n          }\n          @if (previewError()) {\n            <div class=\"bg-card flex size-full flex-col items-center justify-center rounded-lg p-8 shadow-2xl\">\n              <div class=\"bg-muted mb-4 flex size-16 items-center justify-center rounded-xl\">\n                <i z-icon zType=\"lucideTriangleAlert\" zSize=\"28\" class=\"text-destructive\"></i>\n              </div>\n              <span class=\"text-foreground text-sm font-medium\">\n                {{ 'i18n_z_ui_gallery_preview_load_error' | translate }}\n              </span>\n            </div>\n          } @else {\n            <img\n              [src]=\"file().url || file().thumbnailUrl\"\n              [alt]=\"file().name\"\n              class=\"max-h-full max-w-full rounded-lg object-contain shadow-2xl transition-opacity duration-300\"\n              [class.opacity-0]=\"isLoading()\"\n              [class.opacity-100]=\"!isLoading()\"\n              [class.cursor-zoom-in]=\"!zoomed()\"\n              [class.cursor-zoom-out]=\"zoomed()\"\n              [style.transform]=\"imageTransform()\"\n              (load)=\"onImageLoad()\"\n              (error)=\"onMediaError()\"\n              (click)=\"toggleZoom()\" />\n          }\n        </div>\n      } @else if (isPdf() && pdfUrl()) {\n        <div\n          class=\"z-gallery-pdf-frame relative h-[75vh] w-[85vw] max-w-[96vw] overflow-hidden rounded-sm border shadow-xs\">\n          @if (isLoading()) {\n            <z-skeleton class=\"absolute inset-0 rounded-sm\" />\n            <div\n              class=\"text-muted-foreground absolute inset-0 z-10 flex items-center justify-center text-sm font-medium\">\n              {{ 'i18n_z_ui_gallery_loading_preview' | translate }}\n            </div>\n          }\n          @if (previewError()) {\n            <div class=\"bg-card flex size-full flex-col items-center justify-center p-8\">\n              <div class=\"bg-muted mb-4 flex size-16 items-center justify-center rounded-xl\">\n                <i z-icon zType=\"lucideTriangleAlert\" zSize=\"28\" class=\"text-destructive\"></i>\n              </div>\n              <span class=\"text-foreground text-sm font-medium\">\n                {{ 'i18n_z_ui_gallery_preview_load_error' | translate }}\n              </span>\n            </div>\n          } @else {\n            <div\n              class=\"relative size-full bg-white transition-opacity duration-300\"\n              [class.opacity-0]=\"isLoading()\"\n              [class.opacity-100]=\"!isLoading()\">\n              @let pdfConfig = pdfViewerConfig();\n              <ng2-pdfjs-viewer\n                #pdfViewer\n                class=\"block size-full\"\n                [viewerFolder]=\"pdfConfig.viewerFolder!\"\n                [viewerId]=\"pdfViewerId()\"\n                [pdfSrc]=\"pdfUrl()!\"\n                [downloadFileName]=\"file().name\"\n                [locale]=\"pdfConfig.locale!\"\n                [showSpinner]=\"pdfConfig.showSpinner!\"\n                [useOnlyCssZoom]=\"pdfConfig.useOnlyCssZoom!\"\n                [diagnosticLogs]=\"pdfConfig.diagnosticLogs!\"\n                [showOpenFile]=\"pdfConfig.showOpenFile!\"\n                [showAnnotations]=\"pdfConfig.showAnnotations!\"\n                [showDownload]=\"pdfConfig.showDownload!\"\n                [showViewBookmark]=\"pdfConfig.showViewBookmark!\"\n                [showPrint]=\"pdfConfig.showPrint!\"\n                [showFullScreen]=\"pdfConfig.showFullScreen!\"\n                [showFind]=\"pdfConfig.showFind!\"\n                [downloadOnLoad]=\"pdfConfig.downloadOnLoad!\"\n                [printOnLoad]=\"pdfConfig.printOnLoad!\"\n                [rotateCW]=\"pdfConfig.rotateCW!\"\n                [rotateCCW]=\"pdfConfig.rotateCCW!\"\n                [showLastPageOnLoad]=\"pdfConfig.showLastPageOnLoad!\"\n                [showToolbarLeft]=\"pdfConfig.showToolbarLeft!\"\n                [showToolbarMiddle]=\"pdfConfig.showToolbarMiddle!\"\n                [showToolbarRight]=\"pdfConfig.showToolbarRight!\"\n                [showSecondaryToolbarToggle]=\"pdfConfig.showSecondaryToolbarToggle!\"\n                [showSidebar]=\"pdfConfig.showSidebar!\"\n                [showSidebarLeft]=\"pdfConfig.showSidebarLeft!\"\n                [showSidebarRight]=\"pdfConfig.showSidebarRight!\"\n                [toolbarDensity]=\"pdfConfig.toolbarDensity!\"\n                [sidebarWidth]=\"pdfConfig.sidebarWidth\"\n                [toolbarPosition]=\"pdfConfig.toolbarPosition!\"\n                [sidebarPosition]=\"pdfConfig.sidebarPosition!\"\n                [responsiveBreakpoint]=\"pdfConfig.responsiveBreakpoint\"\n                [zoom]=\"pdfConfig.zoom!\"\n                [rotation]=\"pdfConfig.rotation!\"\n                [cursor]=\"pdfConfig.cursor!\"\n                [scroll]=\"pdfConfig.scroll!\"\n                [spread]=\"pdfConfig.spread!\"\n                [pageMode]=\"pdfConfig.pageMode!\"\n                [page]=\"pdfConfig.page!\"\n                [iframeBorder]=\"pdfConfig.iframeBorder!\"\n                [theme]=\"pdfConfig.theme!\"\n                [primaryColor]=\"pdfConfig.primaryColor\"\n                [backgroundColor]=\"pdfConfig.backgroundColor\"\n                [pageBorderColor]=\"pdfConfig.pageBorderColor\"\n                [pageSpacing]=\"pdfConfig.pageSpacing\"\n                [toolbarColor]=\"pdfConfig.toolbarColor\"\n                [textColor]=\"pdfConfig.textColor\"\n                [borderRadius]=\"pdfConfig.borderRadius\"\n                [customCSS]=\"pdfConfig.customCSS\"\n                [cspNonce]=\"pdfConfig.cspNonce\"\n                [iframeTitle]=\"pdfConfig.iframeTitle || ('i18n_z_ui_gallery_pdf_preview' | translate)\"\n                [urlValidation]=\"pdfConfig.urlValidation!\"\n                [controlVisibility]=\"pdfConfig.controlVisibility!\"\n                [groupVisibility]=\"pdfConfig.groupVisibility!\"\n                [autoActions]=\"pdfConfig.autoActions!\"\n                [viewerConfig]=\"pdfConfig.viewerConfig!\"\n                [themeConfig]=\"pdfConfig.themeConfig!\"\n                [layoutConfig]=\"pdfConfig.layoutConfig!\"\n                (onDocumentLoad)=\"onPdfLoad()\"\n                (onDocumentError)=\"onMediaError()\" />\n            </div>\n          }\n        </div>\n      } @else if (isVideo()) {\n        <div class=\"relative flex h-[60vh] w-[70vw] items-center justify-center\">\n          @if (isLoading()) {\n            <z-skeleton class=\"absolute inset-0 rounded-lg\" />\n            <div class=\"text-muted-foreground absolute inset-0 flex items-center justify-center text-sm font-medium\">\n              {{ 'i18n_z_ui_gallery_loading_preview' | translate }}\n            </div>\n          }\n          @if (previewError()) {\n            <div class=\"bg-card flex size-full flex-col items-center justify-center rounded-lg p-8 shadow-2xl\">\n              <div class=\"bg-muted mb-4 flex size-16 items-center justify-center rounded-xl\">\n                <i z-icon zType=\"lucideTriangleAlert\" zSize=\"28\" class=\"text-destructive\"></i>\n              </div>\n              <span class=\"text-foreground text-sm font-medium\">\n                {{ 'i18n_z_ui_gallery_preview_load_error' | translate }}\n              </span>\n            </div>\n          } @else {\n            <video\n              [src]=\"file().url\"\n              controls\n              autoplay\n              class=\"max-h-full max-w-full rounded-lg shadow-2xl transition-opacity duration-300\"\n              [class.opacity-0]=\"isLoading()\"\n              [class.opacity-100]=\"!isLoading()\"\n              (loadeddata)=\"onVideoLoad()\"\n              (error)=\"onMediaError()\">\n              {{ 'i18n_z_ui_gallery_video_not_supported' | translate }}\n            </video>\n          }\n        </div>\n      } @else if (isWordFile()) {\n        <div class=\"relative h-[75vh] w-[85vw]\">\n          @if (isLoading() || isConverting()) {\n            <z-skeleton class=\"absolute inset-0 rounded-lg\" />\n            <div class=\"text-muted-foreground absolute inset-0 flex items-center justify-center text-sm font-medium\">\n              {{ 'i18n_z_ui_gallery_loading_preview' | translate }}\n            </div>\n          }\n          @if (conversionError()) {\n            <div class=\"bg-card flex size-full flex-col items-center justify-center rounded-lg p-12 shadow-2xl\">\n              <div class=\"bg-muted mb-4 flex size-24 items-center justify-center rounded-xl\">\n                <i z-icon [zType]=\"fileIcon()\" zSize=\"40\" class=\"text-muted-foreground\"></i>\n              </div>\n              <span class=\"text-foreground mb-2 text-lg font-medium\">{{ file().name }}</span>\n              <span class=\"text-muted-foreground rounded-md bg-red-100 px-3 py-1.5 text-xs dark:bg-red-900/30\">\n                <span class=\"text-red-700 dark:text-red-300\">{{ conversionError() }}</span>\n              </span>\n            </div>\n          } @else if (docHtmlContent()) {\n            <div\n              class=\"absolute inset-0 overflow-auto rounded-lg bg-white p-8 text-gray-950 shadow-2xl\"\n              [innerHTML]=\"docHtmlContent()\"></div>\n          }\n        </div>\n      } @else if (isExcelFile()) {\n        <div class=\"relative h-[75vh] w-[85vw]\">\n          @if (isLoading() || isConverting()) {\n            <z-skeleton class=\"absolute inset-0 rounded-lg\" />\n            <div class=\"text-muted-foreground absolute inset-0 flex items-center justify-center text-sm font-medium\">\n              {{ 'i18n_z_ui_gallery_loading_preview' | translate }}\n            </div>\n          }\n          @if (conversionError()) {\n            <div class=\"bg-card flex size-full flex-col items-center justify-center rounded-lg p-12 shadow-2xl\">\n              <div class=\"bg-muted mb-4 flex size-24 items-center justify-center rounded-xl\">\n                <i z-icon [zType]=\"fileIcon()\" zSize=\"40\" class=\"text-muted-foreground\"></i>\n              </div>\n              <span class=\"text-foreground mb-2 text-lg font-medium\">{{ file().name }}</span>\n              <span class=\"text-muted-foreground rounded-md bg-red-100 px-3 py-1.5 text-xs dark:bg-red-900/30\">\n                <span class=\"text-red-700 dark:text-red-300\">{{ conversionError() }}</span>\n              </span>\n            </div>\n          } @else if (docHtmlContent()) {\n            <div\n              class=\"absolute inset-0 overflow-auto rounded-lg bg-white p-4 text-gray-950 shadow-2xl\"\n              [innerHTML]=\"docHtmlContent()\"></div>\n          }\n        </div>\n      } @else if (isTextFile()) {\n        <div class=\"relative h-[75vh] w-[85vw]\">\n          @if (isLoading() || isConverting()) {\n            <z-skeleton class=\"absolute inset-0 rounded-lg\" />\n            <div class=\"text-muted-foreground absolute inset-0 flex items-center justify-center text-sm font-medium\">\n              {{ 'i18n_z_ui_gallery_loading_preview' | translate }}\n            </div>\n          }\n          @if (conversionError()) {\n            <div class=\"bg-card flex size-full flex-col items-center justify-center rounded-lg p-12 shadow-2xl\">\n              <div class=\"bg-muted mb-4 flex size-24 items-center justify-center rounded-xl\">\n                <i z-icon [zType]=\"fileIcon()\" zSize=\"40\" class=\"text-muted-foreground\"></i>\n              </div>\n              <span class=\"text-foreground mb-2 text-lg font-medium\">{{ file().name }}</span>\n              <span class=\"text-muted-foreground rounded-md bg-red-100 px-3 py-1.5 text-xs dark:bg-red-900/30\">\n                <span class=\"text-red-700 dark:text-red-300\">{{ conversionError() }}</span>\n              </span>\n            </div>\n          } @else if (textContent()) {\n            <div class=\"absolute inset-0 overflow-auto rounded-lg bg-gray-950 p-6 shadow-2xl\">\n              <pre class=\"font-mono text-sm leading-relaxed whitespace-pre-wrap text-gray-100\">{{ textContent() }}</pre>\n            </div>\n          }\n        </div>\n      } @else {\n        <div class=\"bg-card flex flex-col items-center justify-center rounded-lg p-12 shadow-2xl\">\n          <div class=\"bg-muted mb-4 flex size-24 items-center justify-center rounded-xl\">\n            <i z-icon [zType]=\"fileIcon()\" zSize=\"40\" class=\"text-muted-foreground\"></i>\n          </div>\n          <span class=\"text-foreground mb-2 text-lg font-medium\">{{ file().name }}</span>\n          <span class=\"text-muted-foreground mb-4 text-sm\">{{ formattedSize() }}</span>\n          <span class=\"text-muted-foreground rounded-md bg-amber-100 px-3 py-1.5 text-xs dark:bg-amber-900/30\">\n            <i\n              z-icon\n              zType=\"lucideInfo\"\n              zSize=\"14\"\n              class=\"mr-1 inline-block align-middle text-amber-600 dark:text-amber-400\"></i>\n            <span class=\"align-middle text-amber-700 dark:text-amber-300\">\n              {{ 'i18n_z_ui_gallery_preview_not_supported' | translate }}\n            </span>\n          </span>\n        </div>\n      }\n    </div>\n  </div>\n</div>\n", styles: [".z-gallery-pdf-frame,.z-gallery-pdf-frame *{border-color:#606060!important;outline-color:#606060!important}.z-gallery-pdf-frame{border-width:1px!important;border-style:solid!important;background:#606060}.z-gallery-pdf-frame ng2-pdfjs-viewer,.z-gallery-pdf-frame ng2-pdfjs-viewer iframe{display:block;width:100%;height:100%;border:0!important;outline:0!important;box-shadow:none!important;background:#606060}\n"], dependencies: [{ kind: "component", type: ZButtonComponent, selector: "z-button, button[z-button], a[z-button]", inputs: ["class", "zType", "zSize", "zShape", "zLabel", "zLoading", "zDisabled", "zTypeIcon", "zAnimatedTypeIcon", "zAnimateIcon", "zAnimationTriggerIcon", "zSizeIcon", "zStrokeWidthIcon", "zWave"], exportAs: ["zButton"] }, { kind: "component", type: ZIconComponent, selector: "z-icon, [z-icon]", inputs: ["class", "zType", "zAnimatedType", "zAnimate", "zAnimationTrigger", "zSize", "zStrokeWidth", "zSvg"] }, { kind: "component", type: ZSkeletonComponent, selector: "z-skeleton", inputs: ["class", "zType", "zSize", "zWidth", "zHeight", "zRows", "zGap", "zAnimated", "zRadius"] }, { kind: "directive", type: ZTooltipDirective, selector: "[z-tooltip], [zTooltip]", inputs: ["zContent", "zPosition", "zTooltipPosition", "zTrigger", "zTooltipTrigger", "zTooltipType", "zTooltipSize", "zClass", "zTooltipClass", "zShowDelay", "zTooltipShowDelay", "zHideDelay", "zTooltipHideDelay", "zArrow", "zTooltipArrow", "zDisabled", "zTooltipDisabled", "zOffset", "zTooltipOffset", "zAutoDetect", "zTriggerElement", "zAlwaysShow", "zMaxWidth"], outputs: ["zShow", "zHide"], exportAs: ["zTooltip"] }, { kind: "ngmodule", type: PdfJsViewerModule }, { kind: "component", type: i1.PdfJsViewerComponent, selector: "ng2-pdfjs-viewer", inputs: ["viewerId", "viewerFolder", "externalWindow", "target", "showSpinner", "downloadFileName", "locale", "useOnlyCssZoom", "diagnosticLogs", "showOpenFile", "showAnnotations", "showDownload", "showViewBookmark", "showPrint", "showFullScreen", "showFind", "downloadOnLoad", "printOnLoad", "rotateCW", "rotateCCW", "showLastPageOnLoad", "namedDest", "errorOverride", "errorAppend", "errorMessage", "urlValidation", "customSecurityTpl", "theme", "primaryColor", "backgroundColor", "pageBorderColor", "pageSpacing", "toolbarColor", "textColor", "borderRadius", "customCSS", "cspNonce", "iframeTitle", "customSpinnerTpl", "spinnerClass", "customErrorTpl", "errorClass", "showToolbarLeft", "showToolbarMiddle", "showToolbarRight", "showSecondaryToolbarToggle", "showSidebar", "showSidebarLeft", "showSidebarRight", "toolbarDensity", "sidebarWidth", "toolbarPosition", "sidebarPosition", "responsiveBreakpoint", "controlVisibility", "autoActions", "errorHandling", "viewerConfig", "themeConfig", "groupVisibility", "layoutConfig", "startDownload", "startPrint", "openFile", "download", "print", "fullScreen", "find", "viewBookmark", "lastPage", "externalWindowOptions", "iframeBorder", "zoom", "rotation", "cursor", "scroll", "spread", "pageMode", "page", "pdfSrc"], outputs: ["onBeforePrint", "onAfterPrint", "onDocumentLoad", "onPageChange", "onScaleChange", "onRotationChange", "onDocumentError", "onDocumentInit", "onPagesInit", "onPresentationModeChanged", "onOpenFile", "onFind", "onUpdateFindMatchesCount", "onMetadataLoaded", "onOutlineLoaded", "onPageRendered", "onAnnotationLayerRendered", "onBookmarkClick", "onIdle", "zoomChange", "cursorChange", "scrollChange", "spreadChange", "pageModeChange"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.9", type: ZGalleryPreviewComponent, isStandalone: true, selector: "z-gallery-preview", inputs: { file: { classPropertyName: "file", publicName: "file", isSignal: true, isRequired: true, transformFunction: null }, files: { classPropertyName: "files", publicName: "files", isSignal: true, isRequired: false, transformFunction: null }, zShowRemove: { classPropertyName: "zShowRemove", publicName: "zShowRemove", isSignal: true, isRequired: false, transformFunction: null }, zPdfViewerConfig: { classPropertyName: "zPdfViewerConfig", publicName: "zPdfViewerConfig", isSignal: true, isRequired: false, transformFunction: null }, zTrustedResourceOrigins: { classPropertyName: "zTrustedResourceOrigins", publicName: "zTrustedResourceOrigins", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { zOnClose: "zOnClose", zOnDownload: "zOnDownload", zOnNavigate: "zOnNavigate", zOnRemove: "zOnRemove" }, host: { listeners: { "document:keydown": "onKeyDown($event)" }, classAttribute: "z-gallery-preview z-[9999]" }, viewQueries: [{ propertyName: "pdfViewer", first: true, predicate: ["pdfViewer"], descendants: true, isSignal: true }], ngImport: i0, template: "<div\n  class=\"animate-in fade-in fixed inset-0 z-50 flex items-center justify-center bg-black/80 backdrop-blur-sm duration-200\"\n  (click)=\"onBackdropClick($event)\">\n  <button\n    z-button\n    zType=\"ghost\"\n    zShape=\"circle\"\n    class=\"absolute top-3 right-3 z-20 text-white hover:bg-white/20 lg:top-4 lg:right-4\"\n    (click)=\"close()\">\n    <i z-icon zType=\"lucideX\" zSize=\"24\"></i>\n  </button>\n\n  @if (hasPrev()) {\n    <button\n      z-button\n      zType=\"ghost\"\n      zShape=\"circle\"\n      class=\"absolute left-4 z-10 text-white hover:bg-white/20\"\n      (click)=\"navigate(-1)\">\n      <i z-icon zType=\"lucideChevronLeft\" zSize=\"32\"></i>\n    </button>\n  }\n\n  @if (hasNext()) {\n    <button\n      z-button\n      zType=\"ghost\"\n      zShape=\"circle\"\n      class=\"absolute right-4 z-10 text-white hover:bg-white/20\"\n      (click)=\"navigate(1)\">\n      <i z-icon zType=\"lucideChevronRight\" zSize=\"32\"></i>\n    </button>\n  }\n\n  <div class=\"flex h-full w-full flex-col items-center\" (click)=\"$event.stopPropagation()\">\n    <div\n      class=\"dark:!border-border absolute top-3 right-14 left-3 z-10 flex min-w-0 items-center justify-between gap-2 rounded-[0.375rem] border !border-transparent bg-black/70 px-2.5 py-1.5 text-xs text-white shadow-lg backdrop-blur-sm lg:top-4 lg:right-auto lg:left-1/2 lg:max-w-[calc(100vw-10rem)] lg:-translate-x-1/2 lg:justify-start lg:bg-black/60 lg:px-4 lg:py-2 lg:text-sm dark:border\">\n      <div class=\"flex min-w-0 items-baseline gap-1.5\">\n        <span class=\"min-w-0 truncate font-medium lg:max-w-[12.5rem]\">{{ file().name }}</span>\n        <span class=\"hidden shrink-0 text-white/70 lg:inline\">({{ formattedSize() }})</span>\n      </div>\n\n      @if (files().length > 1) {\n        <span class=\"hidden shrink-0 text-white/70 md:inline\">{{ currentIndex() + 1 }} / {{ files().length }}</span>\n      }\n\n      <div class=\"ml-1 flex shrink-0 items-center gap-0.5\">\n        @if (isImageFile()) {\n          <button\n            z-button\n            zType=\"ghost\"\n            zSize=\"xs\"\n            zShape=\"circle\"\n            class=\"text-white hover:bg-white/20\"\n            z-tooltip\n            [zContent]=\"'i18n_z_ui_gallery_rotate_left' | translate\"\n            (click)=\"rotateLeft()\">\n            <i z-icon zType=\"lucideUndo\" zSize=\"14\"></i>\n          </button>\n          <button\n            z-button\n            zType=\"ghost\"\n            zSize=\"xs\"\n            zShape=\"circle\"\n            class=\"text-white hover:bg-white/20\"\n            z-tooltip\n            [zContent]=\"'i18n_z_ui_gallery_rotate_right' | translate\"\n            (click)=\"rotateRight()\">\n            <i z-icon zType=\"lucideRedo\" zSize=\"14\"></i>\n          </button>\n        }\n\n        <button\n          z-button\n          zType=\"ghost\"\n          zSize=\"xs\"\n          zShape=\"circle\"\n          class=\"text-white hover:bg-white/20\"\n          z-tooltip\n          [zContent]=\"'i18n_z_ui_gallery_download' | translate\"\n          (click)=\"download()\">\n          <i z-icon zType=\"lucideDownload\" zSize=\"14\"></i>\n        </button>\n\n        @if (zShowRemove()) {\n          <button\n            z-button\n            zType=\"ghost\"\n            zSize=\"xs\"\n            zShape=\"circle\"\n            class=\"text-white hover:bg-white/20\"\n            z-tooltip\n            [zContent]=\"'i18n_z_ui_gallery_delete' | translate\"\n            (click)=\"remove()\">\n            <i z-icon zType=\"lucideTrash2\" zSize=\"14\"></i>\n          </button>\n        }\n      </div>\n    </div>\n\n    <div class=\"relative flex flex-1 items-center justify-center pt-16\">\n      @if (isImageFile()) {\n        <div class=\"relative flex h-[60vh] w-[70vw] items-center justify-center\">\n          @if (isLoading()) {\n            <z-skeleton class=\"absolute inset-0 rounded-lg\" />\n            <div class=\"text-muted-foreground absolute inset-0 flex items-center justify-center text-sm font-medium\">\n              {{ 'i18n_z_ui_gallery_loading_preview' | translate }}\n            </div>\n          }\n          @if (previewError()) {\n            <div class=\"bg-card flex size-full flex-col items-center justify-center rounded-lg p-8 shadow-2xl\">\n              <div class=\"bg-muted mb-4 flex size-16 items-center justify-center rounded-xl\">\n                <i z-icon zType=\"lucideTriangleAlert\" zSize=\"28\" class=\"text-destructive\"></i>\n              </div>\n              <span class=\"text-foreground text-sm font-medium\">\n                {{ 'i18n_z_ui_gallery_preview_load_error' | translate }}\n              </span>\n            </div>\n          } @else {\n            <img\n              [src]=\"file().url || file().thumbnailUrl\"\n              [alt]=\"file().name\"\n              class=\"max-h-full max-w-full rounded-lg object-contain shadow-2xl transition-opacity duration-300\"\n              [class.opacity-0]=\"isLoading()\"\n              [class.opacity-100]=\"!isLoading()\"\n              [class.cursor-zoom-in]=\"!zoomed()\"\n              [class.cursor-zoom-out]=\"zoomed()\"\n              [style.transform]=\"imageTransform()\"\n              (load)=\"onImageLoad()\"\n              (error)=\"onMediaError()\"\n              (click)=\"toggleZoom()\" />\n          }\n        </div>\n      } @else if (isPdf() && pdfUrl()) {\n        <div\n          class=\"z-gallery-pdf-frame relative h-[75vh] w-[85vw] max-w-[96vw] overflow-hidden rounded-sm border shadow-xs\">\n          @if (isLoading()) {\n            <z-skeleton class=\"absolute inset-0 rounded-sm\" />\n            <div\n              class=\"text-muted-foreground absolute inset-0 z-10 flex items-center justify-center text-sm font-medium\">\n              {{ 'i18n_z_ui_gallery_loading_preview' | translate }}\n            </div>\n          }\n          @if (previewError()) {\n            <div class=\"bg-card flex size-full flex-col items-center justify-center p-8\">\n              <div class=\"bg-muted mb-4 flex size-16 items-center justify-center rounded-xl\">\n                <i z-icon zType=\"lucideTriangleAlert\" zSize=\"28\" class=\"text-destructive\"></i>\n              </div>\n              <span class=\"text-foreground text-sm font-medium\">\n                {{ 'i18n_z_ui_gallery_preview_load_error' | translate }}\n              </span>\n            </div>\n          } @else {\n            <div\n              class=\"relative size-full bg-white transition-opacity duration-300\"\n              [class.opacity-0]=\"isLoading()\"\n              [class.opacity-100]=\"!isLoading()\">\n              @let pdfConfig = pdfViewerConfig();\n              <ng2-pdfjs-viewer\n                #pdfViewer\n                class=\"block size-full\"\n                [viewerFolder]=\"pdfConfig.viewerFolder!\"\n                [viewerId]=\"pdfViewerId()\"\n                [pdfSrc]=\"pdfUrl()!\"\n                [downloadFileName]=\"file().name\"\n                [locale]=\"pdfConfig.locale!\"\n                [showSpinner]=\"pdfConfig.showSpinner!\"\n                [useOnlyCssZoom]=\"pdfConfig.useOnlyCssZoom!\"\n                [diagnosticLogs]=\"pdfConfig.diagnosticLogs!\"\n                [showOpenFile]=\"pdfConfig.showOpenFile!\"\n                [showAnnotations]=\"pdfConfig.showAnnotations!\"\n                [showDownload]=\"pdfConfig.showDownload!\"\n                [showViewBookmark]=\"pdfConfig.showViewBookmark!\"\n                [showPrint]=\"pdfConfig.showPrint!\"\n                [showFullScreen]=\"pdfConfig.showFullScreen!\"\n                [showFind]=\"pdfConfig.showFind!\"\n                [downloadOnLoad]=\"pdfConfig.downloadOnLoad!\"\n                [printOnLoad]=\"pdfConfig.printOnLoad!\"\n                [rotateCW]=\"pdfConfig.rotateCW!\"\n                [rotateCCW]=\"pdfConfig.rotateCCW!\"\n                [showLastPageOnLoad]=\"pdfConfig.showLastPageOnLoad!\"\n                [showToolbarLeft]=\"pdfConfig.showToolbarLeft!\"\n                [showToolbarMiddle]=\"pdfConfig.showToolbarMiddle!\"\n                [showToolbarRight]=\"pdfConfig.showToolbarRight!\"\n                [showSecondaryToolbarToggle]=\"pdfConfig.showSecondaryToolbarToggle!\"\n                [showSidebar]=\"pdfConfig.showSidebar!\"\n                [showSidebarLeft]=\"pdfConfig.showSidebarLeft!\"\n                [showSidebarRight]=\"pdfConfig.showSidebarRight!\"\n                [toolbarDensity]=\"pdfConfig.toolbarDensity!\"\n                [sidebarWidth]=\"pdfConfig.sidebarWidth\"\n                [toolbarPosition]=\"pdfConfig.toolbarPosition!\"\n                [sidebarPosition]=\"pdfConfig.sidebarPosition!\"\n                [responsiveBreakpoint]=\"pdfConfig.responsiveBreakpoint\"\n                [zoom]=\"pdfConfig.zoom!\"\n                [rotation]=\"pdfConfig.rotation!\"\n                [cursor]=\"pdfConfig.cursor!\"\n                [scroll]=\"pdfConfig.scroll!\"\n                [spread]=\"pdfConfig.spread!\"\n                [pageMode]=\"pdfConfig.pageMode!\"\n                [page]=\"pdfConfig.page!\"\n                [iframeBorder]=\"pdfConfig.iframeBorder!\"\n                [theme]=\"pdfConfig.theme!\"\n                [primaryColor]=\"pdfConfig.primaryColor\"\n                [backgroundColor]=\"pdfConfig.backgroundColor\"\n                [pageBorderColor]=\"pdfConfig.pageBorderColor\"\n                [pageSpacing]=\"pdfConfig.pageSpacing\"\n                [toolbarColor]=\"pdfConfig.toolbarColor\"\n                [textColor]=\"pdfConfig.textColor\"\n                [borderRadius]=\"pdfConfig.borderRadius\"\n                [customCSS]=\"pdfConfig.customCSS\"\n                [cspNonce]=\"pdfConfig.cspNonce\"\n                [iframeTitle]=\"pdfConfig.iframeTitle || ('i18n_z_ui_gallery_pdf_preview' | translate)\"\n                [urlValidation]=\"pdfConfig.urlValidation!\"\n                [controlVisibility]=\"pdfConfig.controlVisibility!\"\n                [groupVisibility]=\"pdfConfig.groupVisibility!\"\n                [autoActions]=\"pdfConfig.autoActions!\"\n                [viewerConfig]=\"pdfConfig.viewerConfig!\"\n                [themeConfig]=\"pdfConfig.themeConfig!\"\n                [layoutConfig]=\"pdfConfig.layoutConfig!\"\n                (onDocumentLoad)=\"onPdfLoad()\"\n                (onDocumentError)=\"onMediaError()\" />\n            </div>\n          }\n        </div>\n      } @else if (isVideo()) {\n        <div class=\"relative flex h-[60vh] w-[70vw] items-center justify-center\">\n          @if (isLoading()) {\n            <z-skeleton class=\"absolute inset-0 rounded-lg\" />\n            <div class=\"text-muted-foreground absolute inset-0 flex items-center justify-center text-sm font-medium\">\n              {{ 'i18n_z_ui_gallery_loading_preview' | translate }}\n            </div>\n          }\n          @if (previewError()) {\n            <div class=\"bg-card flex size-full flex-col items-center justify-center rounded-lg p-8 shadow-2xl\">\n              <div class=\"bg-muted mb-4 flex size-16 items-center justify-center rounded-xl\">\n                <i z-icon zType=\"lucideTriangleAlert\" zSize=\"28\" class=\"text-destructive\"></i>\n              </div>\n              <span class=\"text-foreground text-sm font-medium\">\n                {{ 'i18n_z_ui_gallery_preview_load_error' | translate }}\n              </span>\n            </div>\n          } @else {\n            <video\n              [src]=\"file().url\"\n              controls\n              autoplay\n              class=\"max-h-full max-w-full rounded-lg shadow-2xl transition-opacity duration-300\"\n              [class.opacity-0]=\"isLoading()\"\n              [class.opacity-100]=\"!isLoading()\"\n              (loadeddata)=\"onVideoLoad()\"\n              (error)=\"onMediaError()\">\n              {{ 'i18n_z_ui_gallery_video_not_supported' | translate }}\n            </video>\n          }\n        </div>\n      } @else if (isWordFile()) {\n        <div class=\"relative h-[75vh] w-[85vw]\">\n          @if (isLoading() || isConverting()) {\n            <z-skeleton class=\"absolute inset-0 rounded-lg\" />\n            <div class=\"text-muted-foreground absolute inset-0 flex items-center justify-center text-sm font-medium\">\n              {{ 'i18n_z_ui_gallery_loading_preview' | translate }}\n            </div>\n          }\n          @if (conversionError()) {\n            <div class=\"bg-card flex size-full flex-col items-center justify-center rounded-lg p-12 shadow-2xl\">\n              <div class=\"bg-muted mb-4 flex size-24 items-center justify-center rounded-xl\">\n                <i z-icon [zType]=\"fileIcon()\" zSize=\"40\" class=\"text-muted-foreground\"></i>\n              </div>\n              <span class=\"text-foreground mb-2 text-lg font-medium\">{{ file().name }}</span>\n              <span class=\"text-muted-foreground rounded-md bg-red-100 px-3 py-1.5 text-xs dark:bg-red-900/30\">\n                <span class=\"text-red-700 dark:text-red-300\">{{ conversionError() }}</span>\n              </span>\n            </div>\n          } @else if (docHtmlContent()) {\n            <div\n              class=\"absolute inset-0 overflow-auto rounded-lg bg-white p-8 text-gray-950 shadow-2xl\"\n              [innerHTML]=\"docHtmlContent()\"></div>\n          }\n        </div>\n      } @else if (isExcelFile()) {\n        <div class=\"relative h-[75vh] w-[85vw]\">\n          @if (isLoading() || isConverting()) {\n            <z-skeleton class=\"absolute inset-0 rounded-lg\" />\n            <div class=\"text-muted-foreground absolute inset-0 flex items-center justify-center text-sm font-medium\">\n              {{ 'i18n_z_ui_gallery_loading_preview' | translate }}\n            </div>\n          }\n          @if (conversionError()) {\n            <div class=\"bg-card flex size-full flex-col items-center justify-center rounded-lg p-12 shadow-2xl\">\n              <div class=\"bg-muted mb-4 flex size-24 items-center justify-center rounded-xl\">\n                <i z-icon [zType]=\"fileIcon()\" zSize=\"40\" class=\"text-muted-foreground\"></i>\n              </div>\n              <span class=\"text-foreground mb-2 text-lg font-medium\">{{ file().name }}</span>\n              <span class=\"text-muted-foreground rounded-md bg-red-100 px-3 py-1.5 text-xs dark:bg-red-900/30\">\n                <span class=\"text-red-700 dark:text-red-300\">{{ conversionError() }}</span>\n              </span>\n            </div>\n          } @else if (docHtmlContent()) {\n            <div\n              class=\"absolute inset-0 overflow-auto rounded-lg bg-white p-4 text-gray-950 shadow-2xl\"\n              [innerHTML]=\"docHtmlContent()\"></div>\n          }\n        </div>\n      } @else if (isTextFile()) {\n        <div class=\"relative h-[75vh] w-[85vw]\">\n          @if (isLoading() || isConverting()) {\n            <z-skeleton class=\"absolute inset-0 rounded-lg\" />\n            <div class=\"text-muted-foreground absolute inset-0 flex items-center justify-center text-sm font-medium\">\n              {{ 'i18n_z_ui_gallery_loading_preview' | translate }}\n            </div>\n          }\n          @if (conversionError()) {\n            <div class=\"bg-card flex size-full flex-col items-center justify-center rounded-lg p-12 shadow-2xl\">\n              <div class=\"bg-muted mb-4 flex size-24 items-center justify-center rounded-xl\">\n                <i z-icon [zType]=\"fileIcon()\" zSize=\"40\" class=\"text-muted-foreground\"></i>\n              </div>\n              <span class=\"text-foreground mb-2 text-lg font-medium\">{{ file().name }}</span>\n              <span class=\"text-muted-foreground rounded-md bg-red-100 px-3 py-1.5 text-xs dark:bg-red-900/30\">\n                <span class=\"text-red-700 dark:text-red-300\">{{ conversionError() }}</span>\n              </span>\n            </div>\n          } @else if (textContent()) {\n            <div class=\"absolute inset-0 overflow-auto rounded-lg bg-gray-950 p-6 shadow-2xl\">\n              <pre class=\"font-mono text-sm leading-relaxed whitespace-pre-wrap text-gray-100\">{{ textContent() }}</pre>\n            </div>\n          }\n        </div>\n      } @else {\n        <div class=\"bg-card flex flex-col items-center justify-center rounded-lg p-12 shadow-2xl\">\n          <div class=\"bg-muted mb-4 flex size-24 items-center justify-center rounded-xl\">\n            <i z-icon [zType]=\"fileIcon()\" zSize=\"40\" class=\"text-muted-foreground\"></i>\n          </div>\n          <span class=\"text-foreground mb-2 text-lg font-medium\">{{ file().name }}</span>\n          <span class=\"text-muted-foreground mb-4 text-sm\">{{ formattedSize() }}</span>\n          <span class=\"text-muted-foreground rounded-md bg-amber-100 px-3 py-1.5 text-xs dark:bg-amber-900/30\">\n            <i\n              z-icon\n              zType=\"lucideInfo\"\n              zSize=\"14\"\n              class=\"mr-1 inline-block align-middle text-amber-600 dark:text-amber-400\"></i>\n            <span class=\"align-middle text-amber-700 dark:text-amber-300\">\n              {{ 'i18n_z_ui_gallery_preview_not_supported' | translate }}\n            </span>\n          </span>\n        </div>\n      }\n    </div>\n  </div>\n</div>\n", styles: [".z-gallery-pdf-frame,.z-gallery-pdf-frame *{border-color:#606060!important;outline-color:#606060!important}.z-gallery-pdf-frame{border-width:1px!important;border-style:solid!important;background:#606060}.z-gallery-pdf-frame ng2-pdfjs-viewer,.z-gallery-pdf-frame ng2-pdfjs-viewer iframe{display:block;width:100%;height:100%;border:0!important;outline:0!important;box-shadow:none!important;background:#606060}\n"], dependencies: [{ kind: "component", type: ZButtonComponent, selector: "z-button, button[z-button], a[z-button]", inputs: ["class", "zType", "zSize", "zShape", "zLabel", "zLoading", "zDisabled", "zTypeIcon", "zAnimatedTypeIcon", "zAnimateIcon", "zAnimationTriggerIcon", "zSizeIcon", "zStrokeWidthIcon", "zWave"], exportAs: ["zButton"] }, { kind: "component", type: ZIconComponent, selector: "z-icon, [z-icon]", inputs: ["class", "zType", "zAnimatedType", "zAnimate", "zAnimationTrigger", "zSize", "zStrokeWidth", "zSvg"] }, { kind: "component", type: ZSkeletonComponent, selector: "z-skeleton", inputs: ["class", "zType", "zSize", "zWidth", "zHeight", "zRows", "zGap", "zAnimated", "zRadius"] }, { kind: "directive", type: ZTooltipDirective, selector: "[z-tooltip], [zTooltip]", inputs: ["zContent", "zPosition", "zTooltipPosition", "zTrigger", "zTooltipTrigger", "zTooltipType", "zTooltipSize", "zClass", "zTooltipClass", "zShowDelay", "zTooltipShowDelay", "zHideDelay", "zTooltipHideDelay", "zArrow", "zTooltipArrow", "zDisabled", "zTooltipDisabled", "zOffset", "zTooltipOffset", "zAutoDetect", "zTriggerElement", "zAlwaysShow", "zMaxWidth"], outputs: ["zShow", "zHide"], exportAs: ["zTooltip"] }, { kind: "ngmodule", type: PdfJsViewerModule }, { kind: "component", type: i1.PdfJsViewerComponent, selector: "ng2-pdfjs-viewer", inputs: ["viewerId", "viewerFolder", "externalWindow", "target", "showSpinner", "downloadFileName", "locale", "useOnlyCssZoom", "externalLinkTarget", "rememberLastView", "annotationEditor", "highlightEditorColors", "enableSignatureEditor", "signatureStorage", "pageColors", "pdfJsOptions", "enableCommentEditor", "enablePageEditing", "showToolbar", "chromeless", "customToolbarTpl", "customSidebarTpl", "aiAssistantConfig", "pageOverlayTpl", "httpHeaders", "withCredentials", "formData", "contentProtection", "iframeSandbox", "diagnosticLogs", "showOpenFile", "showAnnotations", "showDownload", "showViewBookmark", "showPrint", "showFullScreen", "showFind", "downloadOnLoad", "printOnLoad", "rotateCW", "rotateCCW", "showLastPageOnLoad", "namedDest", "errorOverride", "errorAppend", "errorMessage", "urlValidation", "customSecurityTpl", "theme", "primaryColor", "backgroundColor", "pageBorderColor", "pageSpacing", "toolbarColor", "textColor", "borderRadius", "customCSS", "cspNonce", "iframeTitle", "customSpinnerTpl", "spinnerClass", "customErrorTpl", "errorClass", "showToolbarLeft", "showToolbarMiddle", "showToolbarRight", "showSecondaryToolbarToggle", "showSidebar", "showSidebarLeft", "showSidebarRight", "toolbarDensity", "sidebarWidth", "toolbarPosition", "sidebarPosition", "responsiveBreakpoint", "controlVisibility", "autoActions", "errorHandling", "viewerConfig", "themeConfig", "groupVisibility", "layoutConfig", "startDownload", "startPrint", "openFile", "download", "print", "fullScreen", "find", "viewBookmark", "lastPage", "externalWindowOptions", "iframeBorder", "zoom", "rotation", "cursor", "scroll", "spread", "pageMode", "page", "pdfSrc"], outputs: ["onBeforePrint", "onAfterPrint", "onDocumentLoad", "onPageChange", "onScaleChange", "onRotationChange", "onDocumentError", "onDocumentInit", "onPagesInit", "onPresentationModeChanged", "onOpenFile", "onFind", "onUpdateFindMatchesCount", "onMetadataLoaded", "onOutlineLoaded", "onPageRendered", "onAnnotationLayerRendered", "onBookmarkClick", "onIdle", "onPasswordPrompt", "onAnnotationEditorStateChange", "onPagesEdited", "onReadAloudStateChange", "onSidebarViewChanged", "onLayersChanged", "onNamedAction", "onDocumentProperties", "annotationEditorChange", "onProgress", "formDataChange", "zoomChange", "cursorChange", "scrollChange", "spreadChange", "pageModeChange"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.9", ngImport: i0, type: ZGalleryPreviewComponent, decorators: [{
             type: Component,