ng-images-preview 1.0.3 → 2.0.1

package/types/ng-images-preview.d.ts

@@ -1,5 +1,18 @@
 import * as _angular_core from '@angular/core';
 import { TemplateRef, ElementRef, OnDestroy } from '@angular/core';
+import { SafeHtml } from '@angular/platform-browser';
+
+declare const PREVIEW_ICONS: {
+    close: string;
+    prev: string;
+    next: string;
+    flipH: string;
+    flipV: string;
+    rotateLeft: string;
+    rotateRight: string;
+    zoomOut: string;
+    zoomIn: string;
+};
 
 interface ImagesPreviewState {
     src: string;
@@ -9,6 +22,8 @@ interface ImagesPreviewState {
     flipV: boolean;
     isLoading: boolean;
     hasError: boolean;
+    currentIndex: number;
+    total: number;
 }
 interface ImagesPreviewActions {
     zoomIn: () => void;
@@ -19,20 +34,93 @@ interface ImagesPreviewActions {
     flipVertical: () => void;
     reset: () => void;
     close: () => void;
+    next: () => void;
+    prev: () => void;
+    jumpTo: (index: number) => void;
+}
+/**
+ * Configuration for the toolbar.
+ */
+interface ToolbarConfig {
+    showZoom?: boolean;
+    showRotate?: boolean;
+    showFlip?: boolean;
+}
+/**
+ * Context passed to the custom template.
+ */
+interface ImagesPreviewContext {
+    $implicit: ImagesPreviewState;
+    actions: ImagesPreviewActions;
 }
+interface ImageBufferItem {
+    src: string;
+    index: number;
+    offset: number;
+    srcset?: string;
+}
+/**
+ * Image Preview Overlay Component.
+ * Displays images in a full-screen overlay with zoom, rotate, and pan capabilities.
+ */
 declare class ImagesPreviewComponent {
+    /**
+     * The image source to display.
+     * @required
+     */
     src: _angular_core.InputSignal<string>;
+    /**
+     * List of image URLs for gallery navigation.
+     */
     images: _angular_core.InputSignal<string[] | undefined>;
+    /**
+     * Optional srcset for the single image `src`.
+     */
+    srcset: _angular_core.InputSignal<string | undefined>;
+    /**
+     * List of srcsets corresponding to the `images` array.
+     * Must be 1:1 mapped with `images`.
+     */
+    srcsets: _angular_core.InputSignal<string[] | undefined>;
+    /**
+     * Initial index for gallery navigation.
+     * @default 0
+     */
     initialIndex: _angular_core.InputSignal<number>;
-    customTemplate: _angular_core.InputSignal<TemplateRef<unknown> | undefined>;
+    /**
+     * DOMRect of the element that opened the preview.
+     * Used for FLIP animation calculation.
+     */
+    openerRect: _angular_core.InputSignal<DOMRect | undefined>;
+    /**
+     * Custom template to render instead of the default viewer.
+     * Exposes `ImagesPreviewContext`.
+     */
+    customTemplate: _angular_core.InputSignal<TemplateRef<ImagesPreviewContext> | undefined>;
+    /**
+     * Configuration for the toolbar buttons.
+     */
+    toolbarConfig: _angular_core.InputSignal<ToolbarConfig>;
+    /**
+     * Callback function called when the preview is closed.
+     */
     closeCallback: () => void;
-    imgRef: _angular_core.Signal<ElementRef<HTMLImageElement> | undefined>;
+    imgRefs: _angular_core.Signal<readonly ElementRef<HTMLImageElement>[]>;
+    thumbRefs: _angular_core.Signal<readonly ElementRef<HTMLElement>[]>;
     currentIndex: _angular_core.WritableSignal<number>;
-    isLoading: _angular_core.WritableSignal<boolean>;
     hasError: _angular_core.WritableSignal<boolean>;
-    activeSrc: _angular_core.Signal<string>;
+    loadedImages: _angular_core.WritableSignal<Set<string>>;
+    showThumbnails: _angular_core.InputSignal<boolean>;
+    showToolbar: _angular_core.InputSignal<boolean>;
+    toolbarExtensions: _angular_core.InputSignal<TemplateRef<any> | null>;
+    activeBuffer: _angular_core.Signal<ImageBufferItem[]>;
     private platformId;
+    private sanitizer;
+    icons: {
+        [key in keyof typeof PREVIEW_ICONS]: SafeHtml;
+    };
     constructor();
+    private flipAnimDone;
     scale: _angular_core.WritableSignal<number>;
     translateX: _angular_core.WritableSignal<number>;
     translateY: _angular_core.WritableSignal<number>;
@@ -40,9 +128,10 @@ declare class ImagesPreviewComponent {
     flipH: _angular_core.WritableSignal<boolean>;
     flipV: _angular_core.WritableSignal<boolean>;
     isDragging: _angular_core.WritableSignal<boolean>;
+    isInertia: _angular_core.WritableSignal<boolean>;
     private initialPinchDistance;
     private initialScale;
-    private isPinching;
+    isPinching: _angular_core.WritableSignal<boolean>;
     state: _angular_core.Signal<ImagesPreviewState>;
     actions: ImagesPreviewActions;
     private readonly MIN_SCALE;
@@ -61,7 +150,11 @@ declare class ImagesPreviewComponent {
     private readonly FRICTION;
     private readonly VELOCITY_THRESHOLD;
     private readonly MAX_VELOCITY;
-    transformStyle: _angular_core.Signal<string>;
+    getTransform(offset: number): string;
+    private flipTransform;
+    private getCurrentImageElement;
+    private runFlipAnimation;
+    overlayBackground: _angular_core.Signal<string>;
     onEscape(): void;
     onMouseMove(event: MouseEvent): void;
     private applyMoveConstraints;
@@ -78,10 +171,14 @@ declare class ImagesPreviewComponent {
     onTouchEnd(event: TouchEvent): void;
     private lastTouchX;
     private lastTouchY;
+    private initialPinchCenter;
+    private initialTranslateX;
+    private initialTranslateY;
     private getDistance;
+    private getCenter;
     close(): void;
-    onImageLoad(): void;
-    onImageError(): void;
+    onImageLoad(src: string): void;
+    onImageError(src: string): void;
     zoomIn(): void;
     zoomOut(): void;
     rotateLeft(): void;
@@ -91,16 +188,68 @@ declare class ImagesPreviewComponent {
     reset(): void;
     next(): void;
     prev(): void;
+    jumpTo(index: number): void;
+    private animateSlide;
     onMouseDown(event: MouseEvent): void;
     onTouchStart(event: TouchEvent): void;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<ImagesPreviewComponent, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<ImagesPreviewComponent, "ng-images-preview", never, { "src": { "alias": "src"; "required": true; "isSignal": true; }; "images": { "alias": "images"; "required": false; "isSignal": true; }; "initialIndex": { "alias": "initialIndex"; "required": false; "isSignal": true; }; "customTemplate": { "alias": "customTemplate"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<ImagesPreviewComponent, "ng-images-preview", never, { "src": { "alias": "src"; "required": true; "isSignal": true; }; "images": { "alias": "images"; "required": false; "isSignal": true; }; "srcset": { "alias": "srcset"; "required": false; "isSignal": true; }; "srcsets": { "alias": "srcsets"; "required": false; "isSignal": true; }; "initialIndex": { "alias": "initialIndex"; "required": false; "isSignal": true; }; "openerRect": { "alias": "openerRect"; "required": false; "isSignal": true; }; "customTemplate": { "alias": "customTemplate"; "required": false; "isSignal": true; }; "toolbarConfig": { "alias": "toolbarConfig"; "required": false; "isSignal": true; }; "showThumbnails": { "alias": "showThumbnails"; "required": false; "isSignal": true; }; "showToolbar": { "alias": "showToolbar"; "required": false; "isSignal": true; }; "toolbarExtensions": { "alias": "toolbarExtensions"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
 }
 
+/**
+ * Directive to open the image preview.
+ * Can be used on any element, but auto-detects `src` on `img` or nested `img`.
+ */
 declare class ImagesPreviewDirective implements OnDestroy {
+    /**
+     * High resolution image source to display in preview.
+     * If empty, tries to read `src` from host element or first child `img`.
+     */
     highResSrc: string;
+    /**
+     * List of images for gallery navigation.
+     * If provided, enables previous/next navigation buttons.
+     */
     previewImages: string[];
-    previewTemplate?: TemplateRef<unknown>;
+    /**
+     * Custom template to use for the preview.
+     * If provided, overrides the default viewer UI.
+     */
+    previewTemplate?: TemplateRef<ImagesPreviewContext>;
+    /**
+     * Configuration for the toolbar buttons.
+     */
+    toolbarConfig?: ToolbarConfig;
+    /**
+     * Optional srcset for the single image.
+     */
+    srcset?: string;
+    /**
+     * List of srcsets corresponding to the `previewImages` array.
+     */
+    /**
+     * List of srcsets corresponding to the `previewImages` array.
+     */
+    srcsets?: string[];
+    /**
+     * Whether to show the thumbnail strip.
+     * @default true
+     */
+    showThumbnails: boolean;
+    /**
+     * Whether to show the toolbar.
+     * @default true
+     */
+    showToolbar: boolean;
+    /**
+     * Custom template to render in the toolbar (e.g. for download buttons).
+     */
+    toolbarExtensions: TemplateRef<any> | null;
+    /**
+     * Type guard helper for strict template type checking.
+     * Allows Angular Language Service to infer types in `previewTemplate`.
+     */
+    static ngTemplateContextGuard(directive: ImagesPreviewDirective, context: unknown): context is ImagesPreviewContext;
     private componentRef;
     private appRef;
     private injector;
@@ -112,8 +261,14 @@ declare class ImagesPreviewDirective implements OnDestroy {
     private destroyPreview;
     ngOnDestroy(): void;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<ImagesPreviewDirective, never>;
-    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<ImagesPreviewDirective, "[ngImagesPreview]", never, { "highResSrc": { "alias": "ngImagesPreview"; "required": false; }; "previewImages": { "alias": "previewImages"; "required": false; }; "previewTemplate": { "alias": "previewTemplate"; "required": false; }; }, {}, never, never, true, never>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<ImagesPreviewDirective, "[ngImagesPreview]", never, { "highResSrc": { "alias": "ngImagesPreview"; "required": false; }; "previewImages": { "alias": "previewImages"; "required": false; }; "previewTemplate": { "alias": "previewTemplate"; "required": false; }; "toolbarConfig": { "alias": "toolbarConfig"; "required": false; }; "srcset": { "alias": "srcset"; "required": false; }; "srcsets": { "alias": "srcsets"; "required": false; }; "showThumbnails": { "alias": "showThumbnails"; "required": false; }; "showToolbar": { "alias": "showToolbar"; "required": false; }; "toolbarExtensions": { "alias": "toolbarExtensions"; "required": false; }; }, {}, never, never, true, never>;
+}
+
+declare class NgImagesPreviewModule {
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<NgImagesPreviewModule, never>;
+    static ɵmod: _angular_core.ɵɵNgModuleDeclaration<NgImagesPreviewModule, never, [typeof ImagesPreviewComponent, typeof ImagesPreviewDirective], [typeof ImagesPreviewComponent, typeof ImagesPreviewDirective]>;
+    static ɵinj: _angular_core.ɵɵInjectorDeclaration<NgImagesPreviewModule>;
 }
 
-export { ImagesPreviewComponent, ImagesPreviewDirective };
-export type { ImagesPreviewActions, ImagesPreviewState };
+export { ImagesPreviewComponent, ImagesPreviewDirective, NgImagesPreviewModule };
+export type { ImagesPreviewActions, ImagesPreviewContext, ImagesPreviewState, ToolbarConfig };