@shival99/z-ui 2.3.10 → 2.4.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@shival99/z-ui",
-  "version": "2.3.10",
+  "version": "2.4.0",
   "description": "Z-UI: Modern Angular UI Component Library - A comprehensive, high-performance design system built with Angular 22, featuring 40+ customizable components with dark mode, accessibility, and enterprise-ready features.",
   "keywords": [
     "angular",
@@ -36,6 +36,7 @@
     "url": "https://github.com/vuboi/z-ui/issues"
   },
   "peerDependencies": {
+    "@aiden0z/pptx-renderer": ">=1.2.4",
     "@angular/cdk": ">=22.0.0 <23.0.0",
     "@angular/common": ">=22.0.0 <23.0.0",
     "@angular/core": ">=22.0.0 <23.0.0",
@@ -53,6 +54,8 @@
     "@ng-icons/phosphor-icons": ">=33.0.0",
     "@ng-icons/tabler-icons": ">=33.0.0",
     "@ngx-translate/core": ">=17.0.0",
+    "@univerjs/preset-sheets-core": ">=0.25.1",
+    "@univerjs/presets": ">=0.25.1",
     "@tanstack/angular-virtual": ">=6.0.2",
     "@shival99/ngx-sonner": ">=3.0.0",
     "@tanstack/angular-table": ">=9.1.0",
@@ -74,6 +77,7 @@
     "class-variance-authority": ">=0.7.0",
     "clsx": ">=2.0.0",
     "dompurify": ">=3.0.0",
+    "docx-preview": ">=0.4.0",
     "echarts": ">=5.0.0",
     "exceljs": "^4.4.0",
     "file-saver": "^2.0.5",
@@ -92,9 +96,18 @@
     "xlsx": "^0.18.5"
   },
   "peerDependenciesMeta": {
+    "@aiden0z/pptx-renderer": {
+      "optional": true
+    },
     "@dayflow/blossom-color-picker-angular": {
       "optional": true
     },
+    "@univerjs/preset-sheets-core": {
+      "optional": true
+    },
+    "@univerjs/presets": {
+      "optional": true
+    },
     "@tanstack/angular-virtual": {
       "optional": true
     },
@@ -149,6 +162,9 @@
     "boneyard-js": {
       "optional": true
     },
+    "docx-preview": {
+      "optional": true
+    },
     "mammoth": {
       "optional": true
     },
@@ -183,6 +199,10 @@
       "types": "./types/shival99-z-ui-components-z-accordion.d.ts",
       "default": "./fesm2022/shival99-z-ui-components-z-accordion.mjs"
     },
+    "./components/z-audio-player": {
+      "types": "./types/shival99-z-ui-components-z-audio-player.d.ts",
+      "default": "./fesm2022/shival99-z-ui-components-z-audio-player.mjs"
+    },
     "./components/z-autocomplete": {
       "types": "./types/shival99-z-ui-components-z-autocomplete.d.ts",
       "default": "./fesm2022/shival99-z-ui-components-z-autocomplete.mjs"

package/types/shival99-z-ui-components-z-audio-player.d.ts

@@ -0,0 +1,46 @@
+import * as _angular_core from '@angular/core';
+import { ElementRef } from '@angular/core';
+
+declare class ZAudioPlayerComponent {
+    private readonly _destroyRef;
+    private _animationFrameId;
+    private _isSeeking;
+    constructor();
+    readonly zSrc: _angular_core.InputSignal<string>;
+    readonly zTitle: _angular_core.InputSignal<string>;
+    readonly zTags: _angular_core.InputSignal<readonly string[]>;
+    readonly zDownload: _angular_core.InputSignal<boolean>;
+    readonly zLoaded: _angular_core.OutputEmitterRef<void>;
+    readonly zError: _angular_core.OutputEmitterRef<Error>;
+    readonly zPlay: _angular_core.OutputEmitterRef<boolean>;
+    protected readonly audio: _angular_core.Signal<ElementRef<HTMLAudioElement>>;
+    protected readonly isPlaying: _angular_core.WritableSignal<boolean>;
+    protected readonly currentTime: _angular_core.WritableSignal<number>;
+    protected readonly duration: _angular_core.WritableSignal<number>;
+    protected readonly waveform: readonly [28, 42, 34, 56, 38, 66, 45, 32, 52, 72, 46, 58, 36, 78, 48, 64, 40, 30, 54, 70, 44, 60, 35, 50, 76, 42, 58, 38, 68, 46, 34, 56, 74, 40, 62, 36, 52, 70, 44, 30, 48, 64, 38, 58, 76, 42, 54, 34, 66, 46, 72, 40, 56, 32, 68, 48, 60, 36, 74, 44, 52, 30, 64, 42, 78, 46, 58, 34, 70, 40, 54, 32, 66, 48, 62, 38, 72, 44, 56, 30, 68, 42, 60, 36, 76, 46, 54, 34, 64, 40, 70, 48, 58, 32, 66, 44, 74, 38, 52, 30, 62, 46, 68, 36, 56, 78, 42, 60, 34, 72, 48, 54, 38, 66, 44, 76, 40, 58, 32, 70, 46, 62, 36, 74, 48, 56, 30, 64, 42, 68, 38, 52, 72, 44, 60, 34, 76, 46, 54, 32, 66, 40, 58, 74, 36, 62, 48, 70, 42, 56, 30, 68, 44, 60, 38, 74, 46, 54, 32, 66, 40, 58, 72, 36, 62, 48, 70, 42, 56, 34, 76, 44, 60, 38, 68, 46, 52, 30, 64, 42, 74, 36, 58, 48, 70, 40, 54, 32, 66, 44, 60, 38, 76, 46, 56, 34, 68, 42, 72, 48, 58];
+    protected readonly title: _angular_core.InputSignal<string>;
+    protected readonly tags: _angular_core.InputSignal<readonly string[]>;
+    protected readonly progress: _angular_core.Signal<number>;
+    protected readonly currentTimeLabel: _angular_core.Signal<string>;
+    protected readonly durationLabel: _angular_core.Signal<string>;
+    protected togglePlay(): Promise<void>;
+    protected onWaveformPointerDown(event: PointerEvent): void;
+    protected onWaveformPointerMove(event: PointerEvent): void;
+    protected onWaveformPointerUp(event: PointerEvent): void;
+    private _seekToPointerPosition;
+    protected onWaveformKeydown(event: KeyboardEvent): void;
+    protected onLoadedMetadata(): void;
+    protected onLoadStart(): void;
+    protected onTimeUpdate(): void;
+    protected onEnded(): void;
+    protected onError(): void;
+    protected onPlayStateChange(isPlaying: boolean): void;
+    private _seekToTime;
+    private _startPlaybackFrame;
+    private _stopPlaybackFrame;
+    private _formatTime;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<ZAudioPlayerComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<ZAudioPlayerComponent, "z-audio-player", never, { "zSrc": { "alias": "zSrc"; "required": true; "isSignal": true; }; "zTitle": { "alias": "zTitle"; "required": false; "isSignal": true; }; "zTags": { "alias": "zTags"; "required": false; "isSignal": true; }; "zDownload": { "alias": "zDownload"; "required": false; "isSignal": true; }; }, { "zLoaded": "zLoaded"; "zError": "zError"; "zPlay": "zPlay"; }, never, never, true, never>;
+}
+
+export { ZAudioPlayerComponent };

package/types/shival99-z-ui-components-z-gallery.d.ts

@@ -4,8 +4,9 @@ import { ZIcon } from '@shival99/z-ui/components/z-icon';
 import { ClassValue } from 'clsx';
 import { LayoutConfig, ThemeConfig, ControlVisibilityConfig, GroupVisibilityConfig, AutoActionConfig, ViewerConfig, PdfJsViewerComponent } from 'ng2-pdfjs-viewer';
 import * as _shival99_z_ui_components_z_gallery from '@shival99/z-ui/components/z-gallery';
-import { SafeHtml } from '@angular/platform-browser';
-import { ZOverlayRef } from '@shival99/z-ui/components/z-overlay';
+import { BundledLanguage } from 'shiki';
+import { ZDynamicRef } from '@shival99/z-ui/services';
+export { ZGalleryOfficeRenderResult } from '@shival99/z-ui/services';
 import * as class_variance_authority_types from 'class-variance-authority/types';
 import { VariantProps } from 'class-variance-authority';
 
@@ -17,6 +18,7 @@ type ZGalleryPdfViewerCursor = 'select' | 'hand' | 'zoom';
 type ZGalleryPdfViewerScroll = 'vertical' | 'horizontal' | 'wrapped' | 'page';
 type ZGalleryPdfViewerSpread = 'none' | 'odd' | 'even';
 type ZGalleryPdfViewerPageMode = 'none' | 'thumbs' | 'bookmarks' | 'attachments';
+type ZGalleryDocumentPreviewKind = 'word' | 'excel' | 'powerpoint';
 interface ZGalleryPdfViewerConfig {
     viewerFolder?: string;
     locale?: string;
@@ -92,7 +94,6 @@ interface ZFileCategoryStyle {
     label: string;
     icon: string;
 }
-declare const FILE_CATEGORY_STYLES: Record<ZFileCategory, ZFileCategoryStyle>;
 interface ZGalleryControl {
     setMode: (mode: ZGalleryMode) => void;
     getMode: () => ZGalleryMode;
@@ -187,7 +188,7 @@ declare class ZGalleryComponent implements AfterViewInit {
     protected readonly headerControlHeight: _angular_core.Signal<"1.75rem" | "2rem" | "2.5rem" | "2.25rem">;
     protected readonly skeletonMediaHeight: _angular_core.Signal<"9rem" | "14rem" | "11rem">;
     protected readonly toggleIconSize: _angular_core.Signal<"14" | "16" | "20" | "18">;
-    protected readonly searchInputSize: _angular_core.Signal<"default" | "sm" | "lg">;
+    protected readonly searchInputSize: _angular_core.Signal<"sm" | "default" | "lg">;
     protected readonly filteredFiles: _angular_core.Signal<ZGalleryFile[]>;
     protected readonly selectedIds: _angular_core.Signal<Set<string>>;
     protected readonly isAllSelected: _angular_core.Signal<boolean>;
@@ -212,6 +213,22 @@ declare class ZGalleryComponent implements AfterViewInit {
     static ɵcmp: _angular_core.ɵɵComponentDeclaration<ZGalleryComponent, "z-gallery", ["zGallery"], { "zFiles": { "alias": "zFiles"; "required": false; "isSignal": true; }; "zMode": { "alias": "zMode"; "required": false; "isSignal": true; }; "zSize": { "alias": "zSize"; "required": false; "isSignal": true; }; "zColumns": { "alias": "zColumns"; "required": false; "isSignal": true; }; "zItemWidth": { "alias": "zItemWidth"; "required": false; "isSignal": true; }; "zLoading": { "alias": "zLoading"; "required": false; "isSignal": true; }; "zSkeletonRows": { "alias": "zSkeletonRows"; "required": false; "isSignal": true; }; "zSkeletonItems": { "alias": "zSkeletonItems"; "required": false; "isSignal": true; }; "zShowDownload": { "alias": "zShowDownload"; "required": false; "isSignal": true; }; "zShowPreview": { "alias": "zShowPreview"; "required": false; "isSignal": true; }; "zShowRemove": { "alias": "zShowRemove"; "required": false; "isSignal": true; }; "zPdfViewerConfig": { "alias": "zPdfViewerConfig"; "required": false; "isSignal": true; }; "zTrustedResourceOrigins": { "alias": "zTrustedResourceOrigins"; "required": false; "isSignal": true; }; "zShowModeToggle": { "alias": "zShowModeToggle"; "required": false; "isSignal": true; }; "zShowSearch": { "alias": "zShowSearch"; "required": false; "isSignal": true; }; "zServerSearch": { "alias": "zServerSearch"; "required": false; "isSignal": true; }; "zSearchDebounce": { "alias": "zSearchDebounce"; "required": false; "isSignal": true; }; "zSearchPlaceholder": { "alias": "zSearchPlaceholder"; "required": false; "isSignal": true; }; "zToggleSize": { "alias": "zToggleSize"; "required": false; "isSignal": true; }; "zTitle": { "alias": "zTitle"; "required": false; "isSignal": true; }; "zEmptyText": { "alias": "zEmptyText"; "required": false; "isSignal": true; }; "zEmptyIcon": { "alias": "zEmptyIcon"; "required": false; "isSignal": true; }; "zClass": { "alias": "zClass"; "required": false; "isSignal": true; }; "zSelectable": { "alias": "zSelectable"; "required": false; "isSignal": true; }; "zSelectedFiles": { "alias": "zSelectedFiles"; "required": false; "isSignal": true; }; }, { "zMode": "zModeChange"; "zSelectedFiles": "zSelectedFilesChange"; "zOnDownload": "zOnDownload"; "zOnPreview": "zOnPreview"; "zOnRemove": "zOnRemove"; "zSearchChange": "zSearchChange"; "zControl": "zControl"; "zSelectionChange": "zSelectionChange"; "zOnAction": "zOnAction"; }, never, never, true, never>;
 }
 
+declare class ZGalleryFileIconComponent {
+    readonly file: _angular_core.InputSignal<ZGalleryFile>;
+    readonly zSize: _angular_core.InputSignal<ZGallerySize>;
+    readonly zMode: _angular_core.InputSignal<ZGalleryMode>;
+    protected readonly imageError: _angular_core.WritableSignal<boolean>;
+    protected readonly isLoading: _angular_core.WritableSignal<boolean>;
+    protected readonly category: _angular_core.Signal<ZFileCategory>;
+    protected readonly style: _angular_core.Signal<_shival99_z_ui_components_z_gallery.ZFileCategoryStyle>;
+    protected readonly showThumbnail: _angular_core.Signal<boolean | "" | undefined>;
+    protected readonly containerClasses: _angular_core.Signal<string>;
+    protected onImageLoad(): void;
+    protected onImageError(event: Event): void;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<ZGalleryFileIconComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<ZGalleryFileIconComponent, "z-gallery-file-icon", never, { "file": { "alias": "file"; "required": true; "isSignal": true; }; "zSize": { "alias": "zSize"; "required": false; "isSignal": true; }; "zMode": { "alias": "zMode"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+}
+
 declare class ZGalleryItemComponent {
     readonly file: _angular_core.InputSignal<ZGalleryFile>;
     readonly zMode: _angular_core.InputSignal<ZGalleryMode>;
@@ -251,22 +268,6 @@ declare class ZGalleryItemComponent {
     static ɵcmp: _angular_core.ɵɵComponentDeclaration<ZGalleryItemComponent, "z-gallery-item", never, { "file": { "alias": "file"; "required": true; "isSignal": true; }; "zMode": { "alias": "zMode"; "required": false; "isSignal": true; }; "zSize": { "alias": "zSize"; "required": false; "isSignal": true; }; "zShowDownload": { "alias": "zShowDownload"; "required": false; "isSignal": true; }; "zShowPreview": { "alias": "zShowPreview"; "required": false; "isSignal": true; }; "zShowRemove": { "alias": "zShowRemove"; "required": false; "isSignal": true; }; "zSelectable": { "alias": "zSelectable"; "required": false; "isSignal": true; }; "zSelected": { "alias": "zSelected"; "required": false; "isSignal": true; }; }, { "zOnDownload": "zOnDownload"; "zOnPreview": "zOnPreview"; "zOnRemove": "zOnRemove"; "zOnSelect": "zOnSelect"; }, never, never, true, never>;
 }
 
-declare class ZGalleryFileIconComponent {
-    readonly file: _angular_core.InputSignal<ZGalleryFile>;
-    readonly zSize: _angular_core.InputSignal<ZGallerySize>;
-    readonly zMode: _angular_core.InputSignal<ZGalleryMode>;
-    protected readonly imageError: _angular_core.WritableSignal<boolean>;
-    protected readonly isLoading: _angular_core.WritableSignal<boolean>;
-    protected readonly category: _angular_core.Signal<ZFileCategory>;
-    protected readonly style: _angular_core.Signal<_shival99_z_ui_components_z_gallery.ZFileCategoryStyle>;
-    protected readonly showThumbnail: _angular_core.Signal<boolean | "" | undefined>;
-    protected readonly containerClasses: _angular_core.Signal<string>;
-    protected onImageLoad(): void;
-    protected onImageError(event: Event): void;
-    static ɵfac: _angular_core.ɵɵFactoryDeclaration<ZGalleryFileIconComponent, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<ZGalleryFileIconComponent, "z-gallery-file-icon", never, { "file": { "alias": "file"; "required": true; "isSignal": true; }; "zSize": { "alias": "zSize"; "required": false; "isSignal": true; }; "zMode": { "alias": "zMode"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
-}
-
 declare class ZGalleryPreviewItemDirective {
     readonly zGalleryPreviewItem: _angular_core.InputSignal<ZGalleryFile>;
     readonly zGalleryPreviewFiles: _angular_core.InputSignal<ZGalleryFile[] | null>;
@@ -286,7 +287,6 @@ declare class ZGalleryPreviewItemDirective {
 
 declare class ZGalleryPreviewComponent {
     private readonly _document;
-    private readonly _sanitizer;
     readonly file: _angular_core.InputSignal<ZGalleryFile>;
     readonly files: _angular_core.InputSignal<ZGalleryFile[]>;
     readonly zShowRemove: _angular_core.InputSignal<boolean>;
@@ -302,7 +302,7 @@ declare class ZGalleryPreviewComponent {
     protected readonly isConverting: _angular_core.WritableSignal<boolean>;
     protected readonly conversionError: _angular_core.WritableSignal<string | null>;
     protected readonly previewError: _angular_core.WritableSignal<boolean>;
-    protected readonly docHtmlContent: _angular_core.WritableSignal<SafeHtml | null>;
+    protected readonly officeSource: _angular_core.WritableSignal<Blob | null>;
     protected readonly textContent: _angular_core.WritableSignal<string>;
     protected readonly pdfViewer: _angular_core.Signal<PdfJsViewerComponent | undefined>;
     private readonly _mediaLoaded;
@@ -310,8 +310,6 @@ declare class ZGalleryPreviewComponent {
     private readonly _minLoadingTime;
     constructor();
     private _loadFileContent;
-    private _loadDocx;
-    private _loadExcel;
     private _loadText;
     private _assertSuccessfulResponse;
     private _completeLoading;
@@ -325,9 +323,16 @@ declare class ZGalleryPreviewComponent {
     protected readonly pdfViewerConfig: _angular_core.Signal<ZGalleryPdfViewerConfig>;
     private _mergePdfViewerCss;
     protected readonly isVideo: _angular_core.Signal<boolean>;
+    protected readonly isAudio: _angular_core.Signal<boolean>;
     protected readonly isWordFile: _angular_core.Signal<boolean>;
     protected readonly isExcelFile: _angular_core.Signal<boolean>;
+    protected readonly isPowerpointFile: _angular_core.Signal<boolean>;
+    protected readonly documentPreviewKind: _angular_core.Signal<ZGalleryDocumentPreviewKind>;
+    protected readonly mediaUrl: _angular_core.Signal<string | null>;
     protected readonly isTextFile: _angular_core.Signal<boolean>;
+    protected readonly isCodeFile: _angular_core.Signal<boolean>;
+    protected readonly fileExtension: _angular_core.Signal<string>;
+    protected readonly codeLanguage: _angular_core.Signal<BundledLanguage>;
     protected readonly canPreview: _angular_core.Signal<boolean>;
     protected readonly formattedSize: _angular_core.Signal<string>;
     protected readonly imageTransform: _angular_core.Signal<string>;
@@ -343,6 +348,8 @@ declare class ZGalleryPreviewComponent {
     protected rotateRight(): void;
     protected onImageLoad(): void;
     protected onVideoLoad(): void;
+    protected onOfficeLoad(): void;
+    protected onOfficeError(message: string): void;
     protected onPdfLoad(): void;
     protected onMediaError(): void;
     protected download(): void;
@@ -354,48 +361,72 @@ declare class ZGalleryPreviewComponent {
 }
 
 declare class ZGalleryPreviewRef {
-    private readonly _overlayRef;
+    private readonly _dynamicRef;
     private _closed;
     componentInstance: ZGalleryPreviewComponent | null;
     readonly zAfterClose: EventEmitter<void>;
-    constructor(_overlayRef: ZOverlayRef | null);
+    constructor(_dynamicRef: ZDynamicRef<ZGalleryPreviewComponent> | null);
     close(): void;
+    markClosed(): void;
 }
 
 declare class ZGalleryPreviewService {
     private readonly _document;
-    private readonly _injector;
-    private readonly _overlayService;
-    private readonly _platformId;
-    private readonly _zIndexService;
+    private readonly _dynamicService;
     open(file: ZGalleryFile, options?: Omit<ZGalleryPreviewOptions, 'file'>): ZGalleryPreviewRef;
     open(options: ZGalleryPreviewOptions): ZGalleryPreviewRef;
-    private _createOverlay;
     private _normalizeOptions;
     private _handleDownload;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<ZGalleryPreviewService, never>;
     static ɵprov: _angular_core.ɵɵInjectableDeclaration<ZGalleryPreviewService>;
 }
 
+declare class ZGalleryOfficePreviewComponent {
+    private readonly _destroyRef;
+    private readonly _renderService;
+    readonly zSource: _angular_core.InputSignal<Blob>;
+    readonly zKind: _angular_core.InputSignal<ZGalleryDocumentPreviewKind>;
+    readonly zLoaded: _angular_core.OutputEmitterRef<void>;
+    readonly zError: _angular_core.OutputEmitterRef<string>;
+    private readonly _host;
+    private _render;
+    private _renderedSource;
+    constructor();
+    private _render$;
+    private _dispose;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<ZGalleryOfficePreviewComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<ZGalleryOfficePreviewComponent, "z-gallery-office-preview", never, { "zSource": { "alias": "zSource"; "required": true; "isSignal": true; }; "zKind": { "alias": "zKind"; "required": true; "isSignal": true; }; }, { "zLoaded": "zLoaded"; "zError": "zError"; }, never, never, true, never>;
+}
+
+declare class ZGalleryTextPreviewComponent {
+    readonly zContent: _angular_core.InputSignal<string>;
+    readonly zLanguage: _angular_core.InputSignal<string>;
+    protected readonly lines: _angular_core.Signal<string[]>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<ZGalleryTextPreviewComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<ZGalleryTextPreviewComponent, "z-gallery-text-preview", never, { "zContent": { "alias": "zContent"; "required": true; "isSignal": true; }; "zLanguage": { "alias": "zLanguage"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+}
+
 declare const getFileCategory: (file: ZGalleryFile) => ZFileCategory;
 declare const formatFileSize: (bytes: number) => string;
 declare const isPreviewable: (file: ZGalleryFile) => boolean;
 declare const isImage: (file: ZGalleryFile) => boolean;
 
 declare const zGalleryVariants: (props?: ({
-    zSize?: "default" | "sm" | "lg" | null | undefined;
+    zSize?: "sm" | "default" | "lg" | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
 type ZGalleryVariants = VariantProps<typeof zGalleryVariants>;
 declare const zGalleryItemVariants: (props?: ({
     zMode?: "grid" | "list" | null | undefined;
-    zSize?: "default" | "sm" | "lg" | null | undefined;
+    zSize?: "sm" | "default" | "lg" | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
 type ZGalleryItemVariants = VariantProps<typeof zGalleryItemVariants>;
 declare const zGalleryFileIconVariants: (props?: ({
-    zSize?: "default" | "sm" | "lg" | null | undefined;
+    zSize?: "sm" | "default" | "lg" | null | undefined;
     zMode?: "grid" | "list" | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
 type ZGalleryFileIconVariants = VariantProps<typeof zGalleryFileIconVariants>;
 
-export { FILE_CATEGORY_STYLES, ZGalleryComponent, ZGalleryFileIconComponent, ZGalleryItemComponent, ZGalleryPreviewComponent, ZGalleryPreviewItemDirective, ZGalleryPreviewRef, ZGalleryPreviewService, formatFileSize, getFileCategory, isImage, isPreviewable, zGalleryFileIconVariants, zGalleryItemVariants, zGalleryVariants };
-export type { ZFileCategory, ZFileCategoryStyle, ZGalleryActionEvent, ZGalleryActionType, ZGalleryControl, ZGalleryFile, ZGalleryFileIconVariants, ZGalleryItemVariants, ZGalleryMode, ZGalleryPdfViewerConfig, ZGalleryPdfViewerCursor, ZGalleryPdfViewerPageMode, ZGalleryPdfViewerScroll, ZGalleryPdfViewerSpread, ZGalleryPdfViewerZoom, ZGalleryPreviewItemOptions, ZGalleryPreviewOptions, ZGallerySelectionChange, ZGallerySize, ZGalleryToggleSize, ZGalleryVariants };
+declare const FILE_CATEGORY_STYLES: Record<ZFileCategory, ZFileCategoryStyle>;
+
+export { FILE_CATEGORY_STYLES, ZGalleryComponent, ZGalleryFileIconComponent, ZGalleryItemComponent, ZGalleryOfficePreviewComponent, ZGalleryPreviewComponent, ZGalleryPreviewItemDirective, ZGalleryPreviewRef, ZGalleryPreviewService, ZGalleryTextPreviewComponent, formatFileSize, getFileCategory, isImage, isPreviewable, zGalleryFileIconVariants, zGalleryItemVariants, zGalleryVariants };
+export type { ZFileCategory, ZFileCategoryStyle, ZGalleryActionEvent, ZGalleryActionType, ZGalleryControl, ZGalleryDocumentPreviewKind, ZGalleryFile, ZGalleryFileIconVariants, ZGalleryItemVariants, ZGalleryMode, ZGalleryPdfViewerConfig, ZGalleryPdfViewerCursor, ZGalleryPdfViewerPageMode, ZGalleryPdfViewerScroll, ZGalleryPdfViewerSpread, ZGalleryPdfViewerZoom, ZGalleryPreviewItemOptions, ZGalleryPreviewOptions, ZGallerySelectionChange, ZGallerySize, ZGalleryToggleSize, ZGalleryVariants };

package/types/shival99-z-ui-components-z-icon.d.ts

@@ -63,7 +63,7 @@ type ZIcon = ZLucideIcon | ZSaxIcon | ZPhosphorIcon | ZTablerIcon | ZHeroIcon |
 declare class ZIconComponent implements OnDestroy {
     readonly class: _angular_core.InputSignal<ClassValue>;
     readonly zType: _angular_core.InputSignal<ZIcon | undefined>;
-    readonly zAnimatedType: _angular_core.InputSignal<("accessibility" | "activity" | "play" | "airplay" | "check" | "alarm-clock-check" | "clock" | "alarm-clock" | "alarm-clock-off" | "align-horizontal-space-around" | "align-vertical-space-around" | "anvil" | "archive" | "arrow-big-down-dash" | "arrow-big-down" | "arrow-big-left-dash" | "arrow-big-left" | "arrow-big-right-dash" | "arrow-big-right" | "arrow-big-up-dash" | "arrow-big-up" | "arrow-down-01" | "arrow-down-10" | "arrow-down-a-z" | "arrow-down" | "arrow-down-left" | "arrow-down-right" | "arrow-down-z-a" | "arrow-left" | "arrow-left-right" | "arrow-right" | "arrow-right-left" | "arrow-up-01" | "arrow-up-10" | "arrow-up-a-z" | "arrow-up" | "arrow-up-left" | "arrow-up-right" | "arrow-up-z-a" | "award" | "x" | "axe" | "axis-3d" | "badge-alert" | "badge-check" | "badge-question-mark" | "battery-charging" | "battery-full" | "battery" | "battery-low" | "battery-medium" | "battery-warning" | "bean-off" | "beer-off" | "bell" | "bell-off" | "bell-ring" | "between-horizontal-end" | "between-horizontal-start" | "between-vertical-end" | "between-vertical-start" | "binary" | "blend" | "blocks" | "bluetooth-off" | "bold" | "bolt" | "bone" | "book-a" | "book-audio" | "book-check" | "book-dashed" | "book-down" | "book-headphones" | "heart" | "book-heart" | "book" | "book-image" | "key" | "book-key" | "book-lock" | "book-marked" | "minus" | "book-minus" | "book-open-check" | "book-open-text" | "plus" | "book-plus" | "book-text" | "book-type" | "book-up-2" | "book-up" | "user" | "book-user" | "book-x" | "bookmark-check" | "bookmark" | "bookmark-minus" | "bookmark-plus" | "bookmark-x" | "bot" | "bot-off" | "boxes" | "cog" | "brain-cog" | "briefcase-business" | "briefcase-conveyor-belt" | "briefcase" | "briefcase-medical" | "brush-cleaning" | "brush" | "bug-off" | "calendar-check-2" | "calendar-check" | "calendar-cog" | "calendar-days" | "calendar-off" | "calendar-sync" | "camera-off" | "candy-off" | "captions-off" | "cast" | "cctv" | "chart-bar-decreasing" | "chart-bar" | "chart-bar-increasing" | "chart-column-decreasing" | "chart-column" | "chart-column-increasing" | "chart-gantt" | "chart-line" | "chart-no-axes-column-decreasing" | "chart-no-axes-column" | "chart-no-axes-column-increasing" | "chart-no-axes-combined" | "chart-no-axes-gantt" | "chart-pie" | "chart-scatter" | "chart-spline" | "check-check" | "cherry" | "chevron-down" | "chevron-left" | "chevron-right" | "chevron-up" | "chevrons-down" | "chevrons-down-up" | "chevrons-left" | "chevrons-left-right" | "chevrons-right" | "chevrons-right-left" | "chevrons-up-down" | "chevrons-up" | "cigarette-off" | "circle-alert" | "circle-arrow-down" | "circle-arrow-left" | "circle-arrow-out-down-left" | "circle-arrow-out-down-right" | "circle-arrow-out-up-left" | "circle-arrow-out-up-right" | "circle-arrow-right" | "circle-arrow-up" | "circle-check-big" | "circle-check" | "circle-chevron-down" | "circle-chevron-left" | "circle-chevron-right" | "circle-chevron-up" | "circle-off" | "circle-parking-off" | "circle-plus" | "circle-question-mark" | "clapperboard" | "clipboard-check" | "clipboard" | "clipboard-list" | "pen" | "clipboard-pen" | "pen-line" | "clipboard-pen-line" | "clipboard-x" | "clock-10" | "clock-11" | "clock-12" | "clock-1" | "clock-2" | "clock-3" | "clock-4" | "clock-5" | "clock-6" | "clock-7" | "clock-8" | "clock-9" | "cloud-cog" | "download" | "cloud-download" | "cloud-moon" | "cloud-off" | "upload" | "cloud-upload" | "compass" | "contrast" | "copy-check" | "copy" | "cpu" | "crop" | "diamond-plus" | "dice-1" | "dice-2" | "dice-3" | "dice-4" | "dice-5" | "dice-6" | "diff" | "dna-off" | "droplet-off" | "drum" | "ear-off" | "eclipse" | "egg-off" | "expand" | "eye-off" | "file-chart-column" | "file-chart-column-increasing" | "file-chart-line" | "file-check-corner" | "file-check" | "file-cog" | "file-down" | "file-exclamation-point" | "file-minus" | "file-pen" | "file-pen-line" | "file-plus" | "file-question-mark" | "file-sliders" | "file-stack" | "terminal" | "file-terminal" | "file-up" | "fish-off" | "flag-off" | "flashlight-off" | "flask-conical-off" | "folder-check" | "folder-cog" | "folder-down" | "kanban" | "folder-kanban" | "folder-pen" | "folder-plus" | "folder-sync" | "folder-up" | "folder-x" | "frame" | "funnel-x" | "gallery-horizontal-end" | "gallery-horizontal" | "gallery-thumbnails" | "gallery-vertical-end" | "gallery-vertical" | "gauge" | "gavel" | "grid-2x2-check" | "grip-horizontal" | "grip" | "grip-vertical" | "hammer" | "hand-coins" | "hand-heart" | "hard-drive-download" | "hard-drive-upload" | "phone-off" | "headphone-off" | "heart-off" | "history" | "hop-off" | "house" | "wifi" | "house-wifi" | "image-down" | "image-off" | "image-up" | "images" | "infinity" | "key-round" | "key-square" | "keyboard" | "keyboard-off" | "landmark" | "layers" | "layout-dashboard" | "layout-grid" | "layout-panel-left" | "layout-panel-top" | "layout-template" | "lightbulb" | "lightbulb-off" | "link2-off" | "list-check" | "list-checks" | "list-restart" | "list-todo" | "loader-pinwheel" | "locate-off" | "log-out" | "mail-check" | "map-pin-check" | "map-pin-check-inside" | "pin-off" | "map-pin-off" | "maximize-2" | "maximize" | "megaphone-off" | "message-circle" | "message-circle-more" | "message-circle-off" | "message-circle-question-mark" | "message-circle-warning" | "message-square" | "message-square-more" | "message-square-off" | "mic-off" | "milk-off" | "minimize-2" | "minimize" | "monitor-check" | "monitor-cog" | "monitor-down" | "monitor-off" | "monitor-up" | "mouse-off" | "mouse-pointer-2" | "mouse-pointer" | "move-diagonal-2" | "move-diagonal" | "move-down" | "move-down-left" | "move-down-right" | "move-horizontal" | "move-left" | "move-right" | "move-up" | "move-up-left" | "move-up-right" | "move-vertical" | "navigation2-off" | "navigation-off" | "nfc" | "notebook-pen" | "nut-off" | "octagon-alert" | "orbit" | "package-check" | "paintbrush" | "panel-bottom-close" | "panel-bottom-open" | "panel-left-close" | "panel-left-open" | "panel-right-close" | "panel-right-open" | "panel-top-close" | "panel-top-open" | "paperclip" | "pen-off" | "pencil" | "pencil-line" | "pencil-off" | "pickaxe" | "plane" | "pointer-off" | "power-off" | "printer-check" | "rabbit" | "radar" | "radio" | "radio-tower" | "rainbow" | "redo-dot" | "redo" | "refresh-ccw-dot" | "refresh-ccw" | "refresh-cw" | "refresh-cw-off" | "rocket" | "rocking-chair" | "rotate-ccw" | "rotate-ccw-key" | "rotate-cw" | "route" | "route-off" | "rss" | "save-off" | "scan-text" | "scissors" | "search-check" | "search" | "send-horizontal" | "send" | "server-cog" | "server-off" | "settings" | "shield-alert" | "shield-check" | "shield-off" | "shield-plus" | "shield-question-mark" | "ship" | "ship-wheel" | "shopping-cart" | "shovel" | "shower-head" | "shrink" | "signal-high" | "signal" | "signal-low" | "signal-medium" | "signal-zero" | "signature" | "sliders-horizontal" | "sliders-vertical" | "smartphone-nfc" | "snowflake" | "sparkle" | "sparkles" | "speech" | "spell-check" | "square-arrow-down" | "square-arrow-down-left" | "square-arrow-down-right" | "square-arrow-left" | "square-arrow-out-down-left" | "square-arrow-out-down-right" | "square-arrow-out-up-left" | "square-arrow-out-up-right" | "square-arrow-right" | "square-arrow-up" | "square-arrow-up-left" | "square-arrow-up-right" | "square-chart-gantt" | "square-check-big" | "square-check" | "square-chevron-down" | "square-chevron-left" | "square-chevron-right" | "square-chevron-up" | "square-dashed-kanban" | "square-kanban" | "square-parking-off" | "square-pen" | "square-plus" | "square-scissors" | "square-stack" | "square-terminal" | "star" | "star-off" | "sun" | "sword" | "tag" | "telescope" | "text-align-center" | "text-cursor" | "text-cursor-input" | "text-search" | "thermometer" | "thumbs-down" | "thumbs-up" | "ticket-check" | "timer" | "timer-off" | "toggle-left" | "toggle-right" | "tornado" | "touchpad-off" | "trash-2" | "trash" | "triangle-alert" | "umbrella-off" | "undo-dot" | "undo" | "unfold-horizontal" | "unfold-vertical" | "unplug" | "user-check" | "user-cog" | "user-pen" | "user-round-check" | "user-round-cog" | "user-round" | "user-round-pen" | "vibrate" | "vibrate-off" | "video-off" | "volume-off" | "vote" | "waves" | "webhook-off" | "wheat-off" | "wifi-high" | "wifi-low" | "wifi-off" | "wifi-pen" | "wifi-zero" | "wine-off" | "zap-off") | undefined>;
+    readonly zAnimatedType: _angular_core.InputSignal<("key" | "bold" | "accessibility" | "activity" | "play" | "airplay" | "check" | "alarm-clock-check" | "clock" | "alarm-clock" | "alarm-clock-off" | "align-horizontal-space-around" | "align-vertical-space-around" | "anvil" | "archive" | "arrow-big-down-dash" | "arrow-big-down" | "arrow-big-left-dash" | "arrow-big-left" | "arrow-big-right-dash" | "arrow-big-right" | "arrow-big-up-dash" | "arrow-big-up" | "arrow-down-01" | "arrow-down-10" | "arrow-down-a-z" | "arrow-down" | "arrow-down-left" | "arrow-down-right" | "arrow-down-z-a" | "arrow-left" | "arrow-left-right" | "arrow-right" | "arrow-right-left" | "arrow-up-01" | "arrow-up-10" | "arrow-up-a-z" | "arrow-up" | "arrow-up-left" | "arrow-up-right" | "arrow-up-z-a" | "award" | "x" | "axe" | "axis-3d" | "badge-alert" | "badge-check" | "badge-question-mark" | "battery-charging" | "battery-full" | "battery" | "battery-low" | "battery-medium" | "battery-warning" | "bean-off" | "beer-off" | "bell" | "bell-off" | "bell-ring" | "between-horizontal-end" | "between-horizontal-start" | "between-vertical-end" | "between-vertical-start" | "binary" | "blend" | "blocks" | "bluetooth-off" | "bolt" | "bone" | "book-a" | "book-audio" | "book-check" | "book-dashed" | "book-down" | "book-headphones" | "heart" | "book-heart" | "book" | "book-image" | "book-key" | "book-lock" | "book-marked" | "minus" | "book-minus" | "book-open-check" | "book-open-text" | "plus" | "book-plus" | "book-text" | "book-type" | "book-up-2" | "book-up" | "user" | "book-user" | "book-x" | "bookmark-check" | "bookmark" | "bookmark-minus" | "bookmark-plus" | "bookmark-x" | "bot" | "bot-off" | "boxes" | "cog" | "brain-cog" | "briefcase-business" | "briefcase-conveyor-belt" | "briefcase" | "briefcase-medical" | "brush-cleaning" | "brush" | "bug-off" | "calendar-check-2" | "calendar-check" | "calendar-cog" | "calendar-days" | "calendar-off" | "calendar-sync" | "camera-off" | "candy-off" | "captions-off" | "cast" | "cctv" | "chart-bar-decreasing" | "chart-bar" | "chart-bar-increasing" | "chart-column-decreasing" | "chart-column" | "chart-column-increasing" | "chart-gantt" | "chart-line" | "chart-no-axes-column-decreasing" | "chart-no-axes-column" | "chart-no-axes-column-increasing" | "chart-no-axes-combined" | "chart-no-axes-gantt" | "chart-pie" | "chart-scatter" | "chart-spline" | "check-check" | "cherry" | "chevron-down" | "chevron-left" | "chevron-right" | "chevron-up" | "chevrons-down" | "chevrons-down-up" | "chevrons-left" | "chevrons-left-right" | "chevrons-right" | "chevrons-right-left" | "chevrons-up-down" | "chevrons-up" | "cigarette-off" | "circle-alert" | "circle-arrow-down" | "circle-arrow-left" | "circle-arrow-out-down-left" | "circle-arrow-out-down-right" | "circle-arrow-out-up-left" | "circle-arrow-out-up-right" | "circle-arrow-right" | "circle-arrow-up" | "circle-check-big" | "circle-check" | "circle-chevron-down" | "circle-chevron-left" | "circle-chevron-right" | "circle-chevron-up" | "circle-off" | "circle-parking-off" | "circle-plus" | "circle-question-mark" | "clapperboard" | "clipboard-check" | "clipboard" | "clipboard-list" | "pen" | "clipboard-pen" | "pen-line" | "clipboard-pen-line" | "clipboard-x" | "clock-10" | "clock-11" | "clock-12" | "clock-1" | "clock-2" | "clock-3" | "clock-4" | "clock-5" | "clock-6" | "clock-7" | "clock-8" | "clock-9" | "cloud-cog" | "download" | "cloud-download" | "cloud-moon" | "cloud-off" | "upload" | "cloud-upload" | "compass" | "contrast" | "copy-check" | "copy" | "cpu" | "crop" | "diamond-plus" | "dice-1" | "dice-2" | "dice-3" | "dice-4" | "dice-5" | "dice-6" | "diff" | "dna-off" | "droplet-off" | "drum" | "ear-off" | "eclipse" | "egg-off" | "expand" | "eye-off" | "file-chart-column" | "file-chart-column-increasing" | "file-chart-line" | "file-check-corner" | "file-check" | "file-cog" | "file-down" | "file-exclamation-point" | "file-minus" | "file-pen" | "file-pen-line" | "file-plus" | "file-question-mark" | "file-sliders" | "file-stack" | "terminal" | "file-terminal" | "file-up" | "fish-off" | "flag-off" | "flashlight-off" | "flask-conical-off" | "folder-check" | "folder-cog" | "folder-down" | "kanban" | "folder-kanban" | "folder-pen" | "folder-plus" | "folder-sync" | "folder-up" | "folder-x" | "frame" | "funnel-x" | "gallery-horizontal-end" | "gallery-horizontal" | "gallery-thumbnails" | "gallery-vertical-end" | "gallery-vertical" | "gauge" | "gavel" | "grid-2x2-check" | "grip-horizontal" | "grip" | "grip-vertical" | "hammer" | "hand-coins" | "hand-heart" | "hard-drive-download" | "hard-drive-upload" | "phone-off" | "headphone-off" | "heart-off" | "history" | "hop-off" | "house" | "wifi" | "house-wifi" | "image-down" | "image-off" | "image-up" | "images" | "infinity" | "key-round" | "key-square" | "keyboard" | "keyboard-off" | "landmark" | "layers" | "layout-dashboard" | "layout-grid" | "layout-panel-left" | "layout-panel-top" | "layout-template" | "lightbulb" | "lightbulb-off" | "link2-off" | "list-check" | "list-checks" | "list-restart" | "list-todo" | "loader-pinwheel" | "locate-off" | "log-out" | "mail-check" | "map-pin-check" | "map-pin-check-inside" | "pin-off" | "map-pin-off" | "maximize-2" | "maximize" | "megaphone-off" | "message-circle" | "message-circle-more" | "message-circle-off" | "message-circle-question-mark" | "message-circle-warning" | "message-square" | "message-square-more" | "message-square-off" | "mic-off" | "milk-off" | "minimize-2" | "minimize" | "monitor-check" | "monitor-cog" | "monitor-down" | "monitor-off" | "monitor-up" | "mouse-off" | "mouse-pointer-2" | "mouse-pointer" | "move-diagonal-2" | "move-diagonal" | "move-down" | "move-down-left" | "move-down-right" | "move-horizontal" | "move-left" | "move-right" | "move-up" | "move-up-left" | "move-up-right" | "move-vertical" | "navigation2-off" | "navigation-off" | "nfc" | "notebook-pen" | "nut-off" | "octagon-alert" | "orbit" | "package-check" | "paintbrush" | "panel-bottom-close" | "panel-bottom-open" | "panel-left-close" | "panel-left-open" | "panel-right-close" | "panel-right-open" | "panel-top-close" | "panel-top-open" | "paperclip" | "pen-off" | "pencil" | "pencil-line" | "pencil-off" | "pickaxe" | "plane" | "pointer-off" | "power-off" | "printer-check" | "rabbit" | "radar" | "radio" | "radio-tower" | "rainbow" | "redo-dot" | "redo" | "refresh-ccw-dot" | "refresh-ccw" | "refresh-cw" | "refresh-cw-off" | "rocket" | "rocking-chair" | "rotate-ccw" | "rotate-ccw-key" | "rotate-cw" | "route" | "route-off" | "rss" | "save-off" | "scan-text" | "scissors" | "search-check" | "search" | "send-horizontal" | "send" | "server-cog" | "server-off" | "settings" | "shield-alert" | "shield-check" | "shield-off" | "shield-plus" | "shield-question-mark" | "ship" | "ship-wheel" | "shopping-cart" | "shovel" | "shower-head" | "shrink" | "signal-high" | "signal" | "signal-low" | "signal-medium" | "signal-zero" | "signature" | "sliders-horizontal" | "sliders-vertical" | "smartphone-nfc" | "snowflake" | "sparkle" | "sparkles" | "speech" | "spell-check" | "square-arrow-down" | "square-arrow-down-left" | "square-arrow-down-right" | "square-arrow-left" | "square-arrow-out-down-left" | "square-arrow-out-down-right" | "square-arrow-out-up-left" | "square-arrow-out-up-right" | "square-arrow-right" | "square-arrow-up" | "square-arrow-up-left" | "square-arrow-up-right" | "square-chart-gantt" | "square-check-big" | "square-check" | "square-chevron-down" | "square-chevron-left" | "square-chevron-right" | "square-chevron-up" | "square-dashed-kanban" | "square-kanban" | "square-parking-off" | "square-pen" | "square-plus" | "square-scissors" | "square-stack" | "square-terminal" | "star" | "star-off" | "sun" | "sword" | "tag" | "telescope" | "text-align-center" | "text-cursor" | "text-cursor-input" | "text-search" | "thermometer" | "thumbs-down" | "thumbs-up" | "ticket-check" | "timer" | "timer-off" | "toggle-left" | "toggle-right" | "tornado" | "touchpad-off" | "trash-2" | "trash" | "triangle-alert" | "umbrella-off" | "undo-dot" | "undo" | "unfold-horizontal" | "unfold-vertical" | "unplug" | "user-check" | "user-cog" | "user-pen" | "user-round-check" | "user-round-cog" | "user-round" | "user-round-pen" | "vibrate" | "vibrate-off" | "video-off" | "volume-off" | "vote" | "waves" | "webhook-off" | "wheat-off" | "wifi-high" | "wifi-low" | "wifi-off" | "wifi-pen" | "wifi-zero" | "wine-off" | "zap-off") | undefined>;
     readonly zAnimate: _angular_core.InputSignal<boolean>;
     readonly zAnimationTrigger: _angular_core.InputSignal<ZIconAnimationTrigger>;
     readonly zSize: _angular_core.InputSignal<string | number | null | undefined>;

package/types/shival99-z-ui-components-z-media-player.d.ts

@@ -1,7 +1,15 @@
+import * as _angular_platform_browser from '@angular/platform-browser';
 import * as _angular_core from '@angular/core';
 import { OnDestroy, ElementRef } from '@angular/core';
 import { ClassValue } from 'clsx';
+import { VariantProps } from 'class-variance-authority';
+import * as class_variance_authority_types from 'class-variance-authority/types';
 
+declare const zMediaPlayerVariants: (props?: ({
+    zLayout?: "theater" | "fullscreen" | "default" | null | undefined;
+} & class_variance_authority_types.ClassProp) | undefined) => string;
+
+type ZMediaPlayerVariants = VariantProps<typeof zMediaPlayerVariants>;
 interface ZMediaPlayerSubtitleTrack {
     label: string;
     src: string;
@@ -16,10 +24,45 @@ interface ZMediaPlayerPlaybackSpeed {
     label: string;
     value: number;
 }
-
+interface ZWebkitHTMLVideoElement extends HTMLVideoElement {
+    webkitSupportsPresentationMode?(mode: 'inline' | 'picture-in-picture'): boolean;
+    webkitPresentationMode?: 'inline' | 'picture-in-picture';
+    webkitSetPresentationMode?(mode: 'inline' | 'picture-in-picture'): void;
+}
+interface ZDocumentWithPiP extends Document {
+    pictureInPictureEnabled: boolean;
+    pictureInPictureElement: Element | null;
+    exitPictureInPicture(): Promise<void>;
+}
 type ZMediaPlayerSettingsPanel = 'main' | 'quality' | 'speed';
+/** One cue parsed from a WebVTT storyboard file (`00:00:00.000 --> 00:00:02.000` + `sprite.jpg#xywh=x,y,w,h`). */
+interface ZMediaPlayerThumbnailCue {
+    start: number;
+    end: number;
+    src: string;
+    x: number;
+    y: number;
+    w: number;
+    h: number;
+}
+/** Toggles which control bar groups are rendered. All default to `true`. */
+interface ZMediaPlayerControls {
+    play: boolean;
+    volume: boolean;
+    skip: boolean;
+    time: boolean;
+    timeline: boolean;
+    subtitles: boolean;
+    settings: boolean;
+    pip: boolean;
+    theater: boolean;
+    fullscreen: boolean;
+}
+
 declare class ZMediaPlayerComponent implements OnDestroy {
     private readonly _elementRef;
+    private readonly _ngZone;
+    private readonly _sanitizer;
     readonly class: _angular_core.InputSignal<ClassValue>;
     readonly zSrc: _angular_core.InputSignal<string>;
     readonly zSources: _angular_core.InputSignal<ZMediaPlayerSource[]>;
@@ -29,6 +72,12 @@ declare class ZMediaPlayerComponent implements OnDestroy {
     readonly zMuted: _angular_core.InputSignal<boolean>;
     readonly zVolume: _angular_core.InputSignal<number>;
     readonly zSubtitles: _angular_core.InputSignal<ZMediaPlayerSubtitleTrack[]>;
+    /** URL to a WebVTT storyboard file powering the YouTube-style timeline hover preview. */
+    readonly zThumbnailsVtt: _angular_core.InputSignal<string>;
+    /** Toggles which control bar groups render. Unset groups default to visible. */
+    readonly zControls: _angular_core.InputSignal<Partial<ZMediaPlayerControls>>;
+    readonly zLoaded: _angular_core.OutputEmitterRef<void>;
+    readonly zError: _angular_core.OutputEmitterRef<Error | null>;
     readonly zPlay: _angular_core.OutputEmitterRef<boolean>;
     readonly zTimeUpdate: _angular_core.OutputEmitterRef<number>;
     readonly zVolumeChange: _angular_core.OutputEmitterRef<number>;
@@ -38,6 +87,7 @@ declare class ZMediaPlayerComponent implements OnDestroy {
     readonly zQualityChange: _angular_core.OutputEmitterRef<ZMediaPlayerSource>;
     readonly videoElement: _angular_core.Signal<ElementRef<HTMLVideoElement> | undefined>;
     readonly timelineContainer: _angular_core.Signal<ElementRef<HTMLDivElement> | undefined>;
+    private readonly _settingsPopover;
     protected readonly isPlaying: _angular_core.WritableSignal<boolean>;
     protected readonly currentTime: _angular_core.WritableSignal<number>;
     protected readonly duration: _angular_core.WritableSignal<number>;
@@ -45,9 +95,13 @@ declare class ZMediaPlayerComponent implements OnDestroy {
     protected readonly isMuted: _angular_core.WritableSignal<boolean>;
     protected readonly playbackSpeed: _angular_core.WritableSignal<number>;
     protected readonly activeSourceSrc: _angular_core.WritableSignal<string | null>;
+    private readonly _activeQualitySourceLabel;
     protected readonly showControls: _angular_core.WritableSignal<boolean>;
+    protected readonly isPointerOver: _angular_core.WritableSignal<boolean>;
     protected readonly isBuffering: _angular_core.WritableSignal<boolean>;
     protected readonly captionsEnabled: _angular_core.WritableSignal<boolean>;
+    protected readonly subtitleText: _angular_core.WritableSignal<string>;
+    protected readonly hasSubtitles: _angular_core.Signal<boolean>;
     protected readonly isTheaterMode: _angular_core.WritableSignal<boolean>;
     protected readonly isFullscreen: _angular_core.WritableSignal<boolean>;
     protected readonly isMiniplayer: _angular_core.WritableSignal<boolean>;
@@ -55,10 +109,13 @@ declare class ZMediaPlayerComponent implements OnDestroy {
     protected readonly settingsPanel: _angular_core.WritableSignal<ZMediaPlayerSettingsPanel>;
     protected readonly isDragging: _angular_core.WritableSignal<boolean>;
     protected readonly bufferedProgress: _angular_core.WritableSignal<number>;
-    protected readonly progress: _angular_core.Signal<number>;
+    protected readonly progress: _angular_core.WritableSignal<number>;
     protected readonly playPauseFlash: _angular_core.WritableSignal<"play" | "pause" | null>;
     protected readonly hoverTimeLabel: _angular_core.WritableSignal<string | null>;
+    protected readonly hoverTime: _angular_core.WritableSignal<number | null>;
     protected readonly hoverX: _angular_core.WritableSignal<number>;
+    private readonly _thumbnailCues;
+    private readonly _positionedSubtitleTracks;
     protected readonly skipOverlayDirection: _angular_core.WritableSignal<"left" | "right" | null>;
     protected readonly skipOverlayValue: _angular_core.WritableSignal<number>;
     protected readonly skipOverlayPulse: _angular_core.WritableSignal<number>;
@@ -67,14 +124,23 @@ declare class ZMediaPlayerComponent implements OnDestroy {
     private _controlsTimeout;
     private _flashTimeout;
     private _skipOverlayTimeout;
-    private _clickTimeout;
+    private _bufferAnimationFrame;
+    private _playbackAnimationFrame;
+    private _mouseMoveCleanup;
+    private _lastMouseMoveAt;
+    private _bufferedTarget;
     private _accumulatedSkip;
     protected readonly zClasses: _angular_core.Signal<string>;
     protected readonly currentTimeLabel: _angular_core.Signal<string>;
     protected readonly durationLabel: _angular_core.Signal<string>;
+    protected readonly controls: _angular_core.Signal<ZMediaPlayerControls>;
     protected readonly effectiveSrc: _angular_core.Signal<string>;
     protected readonly qualitySources: _angular_core.Signal<ZMediaPlayerSource[]>;
     protected readonly activeQualityLabel: _angular_core.Signal<string>;
+    protected readonly youtubeVideoId: _angular_core.Signal<string | null>;
+    protected readonly isYouTube: _angular_core.Signal<boolean>;
+    protected readonly youtubeEmbedUrl: _angular_core.Signal<_angular_platform_browser.SafeResourceUrl | null>;
+    protected readonly hoverThumbnailCue: _angular_core.Signal<ZMediaPlayerThumbnailCue | null>;
     constructor();
     ngOnDestroy(): void;
     private _initializeVideoState;
@@ -97,28 +163,38 @@ declare class ZMediaPlayerComponent implements OnDestroy {
     protected onLeavePiP(): void;
     protected onWebkitPresentationModeChanged(): void;
     protected toggleSubtitles(): void;
+    private _positionSubtitleCues;
+    private _updateSubtitleText;
     protected onPlayStateChange(playing: boolean): void;
     protected onTimeUpdate(): void;
     protected onDurationChange(): void;
+    protected onLoadedData(): void;
+    protected onVideoError(): void;
     protected onSeeking(seeking: boolean): void;
     protected updateBufferedProgress(): void;
+    private _setBufferedTarget;
+    private _startPlaybackProgressLoop;
+    private _stopPlaybackProgressLoop;
+    private _syncPlaybackProgress;
     protected onTimelineDragStart(event: MouseEvent): void;
     protected onTimelineHover(event: MouseEvent): void;
     protected onTimelineHoverEnd(): void;
+    private _loadThumbnailVtt;
+    private _parseThumbnailVtt;
+    private _parseVttTimestamp;
     private _updateTimeFromCoords;
     protected onMouseMove(): void;
     protected onMouseLeave(): void;
     private _resetControlsTimer;
-    protected onVideoClick(event: MouseEvent): void;
-    private _handleVideoDoubleClick;
+    protected onVideoClick(): void;
     protected triggerSkip(seconds: number, direction: 'left' | 'right'): void;
     private _triggerSkipOverlay;
     protected onKeyDown(event: KeyboardEvent): void;
     protected toggleSettings(): void;
     private _formatTime;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<ZMediaPlayerComponent, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<ZMediaPlayerComponent, "z-media-player", never, { "class": { "alias": "class"; "required": false; "isSignal": true; }; "zSrc": { "alias": "zSrc"; "required": true; "isSignal": true; }; "zSources": { "alias": "zSources"; "required": false; "isSignal": true; }; "zPoster": { "alias": "zPoster"; "required": false; "isSignal": true; }; "zAutoplay": { "alias": "zAutoplay"; "required": false; "isSignal": true; }; "zLoop": { "alias": "zLoop"; "required": false; "isSignal": true; }; "zMuted": { "alias": "zMuted"; "required": false; "isSignal": true; }; "zVolume": { "alias": "zVolume"; "required": false; "isSignal": true; }; "zSubtitles": { "alias": "zSubtitles"; "required": false; "isSignal": true; }; }, { "zPlay": "zPlay"; "zTimeUpdate": "zTimeUpdate"; "zVolumeChange": "zVolumeChange"; "zFullscreenChange": "zFullscreenChange"; "zTheaterModeChange": "zTheaterModeChange"; "zMiniplayerChange": "zMiniplayerChange"; "zQualityChange": "zQualityChange"; }, never, never, true, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<ZMediaPlayerComponent, "z-media-player", never, { "class": { "alias": "class"; "required": false; "isSignal": true; }; "zSrc": { "alias": "zSrc"; "required": true; "isSignal": true; }; "zSources": { "alias": "zSources"; "required": false; "isSignal": true; }; "zPoster": { "alias": "zPoster"; "required": false; "isSignal": true; }; "zAutoplay": { "alias": "zAutoplay"; "required": false; "isSignal": true; }; "zLoop": { "alias": "zLoop"; "required": false; "isSignal": true; }; "zMuted": { "alias": "zMuted"; "required": false; "isSignal": true; }; "zVolume": { "alias": "zVolume"; "required": false; "isSignal": true; }; "zSubtitles": { "alias": "zSubtitles"; "required": false; "isSignal": true; }; "zThumbnailsVtt": { "alias": "zThumbnailsVtt"; "required": false; "isSignal": true; }; "zControls": { "alias": "zControls"; "required": false; "isSignal": true; }; }, { "zLoaded": "zLoaded"; "zError": "zError"; "zPlay": "zPlay"; "zTimeUpdate": "zTimeUpdate"; "zVolumeChange": "zVolumeChange"; "zFullscreenChange": "zFullscreenChange"; "zTheaterModeChange": "zTheaterModeChange"; "zMiniplayerChange": "zMiniplayerChange"; "zQualityChange": "zQualityChange"; }, never, never, true, never>;
 }
 
 export { ZMediaPlayerComponent };
-export type { ZMediaPlayerPlaybackSpeed, ZMediaPlayerSource, ZMediaPlayerSubtitleTrack };
+export type { ZDocumentWithPiP, ZMediaPlayerControls, ZMediaPlayerPlaybackSpeed, ZMediaPlayerSettingsPanel, ZMediaPlayerSource, ZMediaPlayerSubtitleTrack, ZMediaPlayerThumbnailCue, ZMediaPlayerVariants, ZWebkitHTMLVideoElement };

package/types/shival99-z-ui-components-z-popover.d.ts

@@ -30,6 +30,7 @@ declare class ZPopoverComponent implements OnInit, OnDestroy {
     private readonly _document;
     private readonly _overlayContainerService;
     private readonly _zIndexService;
+    private readonly _zone;
     private readonly _trigger;
     readonly zShow: _angular_core.OutputEmitterRef<void>;
     readonly zHide: _angular_core.OutputEmitterRef<void>;

package/types/shival99-z-ui-components-z-tabs.d.ts

@@ -87,9 +87,13 @@ declare class ZTabsComponent implements OnInit, AfterViewInit, OnDestroy {
     protected readonly tabsListHasBottomPadding: _angular_core.Signal<boolean>;
     protected readonly verticalTabsScrollable: _angular_core.Signal<boolean>;
     protected readonly navClasses: _angular_core.Signal<string>;
-    protected getTabItemClasses(_tab: ZTab): string;
+    protected readonly tabItems: _angular_core.Signal<{
+        tab: ZTab;
+        classes: string;
+        isActive: boolean;
+    }[]>;
+    private readonly _tabItemClasses;
     protected selectTab(tab: ZTab, scrollToView?: boolean): void;
-    protected isTabActive(tab: ZTab): boolean;
     protected onTabKeydown(event: KeyboardEvent, currentIndex: number): void;
     protected checkScroll(): void;
     protected scrollLeft(): void;