ng-images-preview 1.0.3 → 2.0.1

package/fesm2022/ng-images-preview.mjs

@@ -1,31 +1,137 @@
 import * as i0 from '@angular/core';
-import { input, viewChild, signal, computed, inject, PLATFORM_ID, effect, HostListener, ChangeDetectionStrategy, Component, ApplicationRef, EnvironmentInjector, ElementRef, createComponent, Input, Directive } from '@angular/core';
+import { input, viewChildren, signal, computed, inject, PLATFORM_ID, effect, HostListener, ChangeDetectionStrategy, Component, ApplicationRef, EnvironmentInjector, ElementRef, createComponent, Input, Directive, NgModule } from '@angular/core';
 import * as i1 from '@angular/common';
 import { isPlatformBrowser, CommonModule } from '@angular/common';
 import { trigger, transition, style, animate } from '@angular/animations';
+import { DomSanitizer } from '@angular/platform-browser';
 
+const PREVIEW_ICONS = {
+    close: '<svg viewBox="0 0 24 24"><path d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"/></svg>',
+    prev: '<svg viewBox="0 0 24 24"><path d="M15.41 7.41L14 6l-6 6 6 6 1.41-1.41L10.83 12z"/></svg>',
+    next: '<svg viewBox="0 0 24 24"><path d="M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z"/></svg>',
+    flipH: '<svg viewBox="0 0 24 24"><path d="M15 21h2v-2h-2v2zm4-12h2V7h-2v2zM3 5v14c0 1.1.9 2 2 2h4v-2H5V5h4V3H5c-1.1 0-2 .9-2 2zm16-2v2h2c0-1.1-.9-2-2-2zm-8 20h2V1h-2v22zm8-6h2v-2h-2v2zM15 5h2V3h-2v2zm4 8h2v-2h-2v2zm0 8c1.1 0 2-.9 2-2h-2v2z"/></svg>',
+    flipV: '<svg viewBox="0 0 24 24"><path d="M7 21h2v-2H7v2zM3 9h2V7H3v2zm12 12h2v-2h-2v2zm4-12h2V7h-2v2zm-4 4h2v-4h-2v4zm-8-8h2V3H7v2zm8 0h2V3h-2v2zm-4 8h4v-4h-4v4zM3 15h2v-2H3v2zm12-4h2v-4H3v4h2v-2h10v2zM7 3v2h2V3H7zm8 20h2v-2h-2v2zm-4 0h2v-2h-2v2zm4-12h2v-2h-2v2zM3 19c0 1.1.9 2 2 2h2v-2H5v-2H3v2zm16-6h2v-2h-2v2zm0 4v2c0 1.1-.9 2-2 2h-2v-2h2v-2h2zM5 3c-1.1 0-2 .9-2 2h2V3z"/></svg>',
+    rotateLeft: '<svg viewBox="0 0 24 24"><path d="M7.11 8.53L5.7 7.11C4.8 8.27 4.24 9.61 4.07 11h2.02c.14-.87.49-1.72 1.02-2.47zM6.09 13H4.07c.17 1.39.72 2.73 1.62 3.89l1.41-1.42c-.52-.75-.87-1.59-1.01-2.47zm1.01 5.32c1.16.9 2.51 1.44 3.9 1.61V17.9c-.87-.15-1.71-.49-2.46-1.03L7.1 18.32zM13 4.07V1L8.45 5.55 13 10V6.09c2.84.48 5 2.94 5 5.91s-2.16 5.43-5 5.91v2.02c3.95-.49 7-3.85 7-7.93s-3.05-7.44-7-7.93z"/></svg>',
+    rotateRight: '<svg viewBox="0 0 24 24"><path d="M15.55 5.55L11 1v3.07C7.06 4.56 4 7.92 4 12s3.05 7.44 7 7.93v-2.02c-2.84-.48-5-2.94-5-5.91s2.16-5.43 5-5.91V10l4.55-4.45zM19.93 11c-.17-1.39-.72-2.73-1.62-3.89l-1.42 1.42c.54.75.88 1.6 1.02 2.47h2.02zM13 17.9v2.02c1.39-.17 2.74-.71 3.9-1.61l-1.44-1.44c-.75.54-1.59.89-2.46 1.03zm3.89-2.42l1.42 1.41c.9-1.16 1.45-2.5 1.62-3.89h-2.02c-.14.87-.48 1.72-1.02 2.48z"/></svg>',
+    zoomOut: '<svg viewBox="0 0 24 24"><path d="M19 13H5v-2h14v2z"/></svg>',
+    zoomIn: '<svg viewBox="0 0 24 24"><path d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z"/></svg>'
+};
+
+/**
+ * Image Preview Overlay Component.
+ * Displays images in a full-screen overlay with zoom, rotate, and pan capabilities.
+ */
 class ImagesPreviewComponent {
+    /**
+     * The image source to display.
+     * @required
+     */
     src = input.required(...(ngDevMode ? [{ debugName: "src" }] : []));
+    /**
+     * List of image URLs for gallery navigation.
+     */
     images = input(...(ngDevMode ? [undefined, { debugName: "images" }] : []));
+    /**
+     * Optional srcset for the single image `src`.
+     */
+    srcset = input(...(ngDevMode ? [undefined, { debugName: "srcset" }] : []));
+    /**
+     * List of srcsets corresponding to the `images` array.
+     * Must be 1:1 mapped with `images`.
+     */
+    srcsets = input(...(ngDevMode ? [undefined, { debugName: "srcsets" }] : []));
+    /**
+     * Initial index for gallery navigation.
+     * @default 0
+     */
     initialIndex = input(0, ...(ngDevMode ? [{ debugName: "initialIndex" }] : []));
+    /**
+     * DOMRect of the element that opened the preview.
+     * Used for FLIP animation calculation.
+     */
+    openerRect = input(undefined, ...(ngDevMode ? [{ debugName: "openerRect" }] : []));
+    /**
+     * Custom template to render instead of the default viewer.
+     * Exposes `ImagesPreviewContext`.
+     */
     customTemplate = input(...(ngDevMode ? [undefined, { debugName: "customTemplate" }] : []));
+    /**
+     * Configuration for the toolbar buttons.
+     */
+    toolbarConfig = input({
+        showZoom: true,
+        showRotate: true,
+        showFlip: true,
+    }, ...(ngDevMode ? [{ debugName: "toolbarConfig" }] : []));
+    /**
+     * Callback function called when the preview is closed.
+     */
     closeCallback = () => {
         /* noop */
     };
-    imgRef = viewChild('imgRef', ...(ngDevMode ? [{ debugName: "imgRef" }] : []));
+    imgRefs = viewChildren('imgRef', ...(ngDevMode ? [{ debugName: "imgRefs" }] : []));
+    thumbRefs = viewChildren('thumbRef', ...(ngDevMode ? [{ debugName: "thumbRefs" }] : []));
     // State signals
     currentIndex = signal(0, ...(ngDevMode ? [{ debugName: "currentIndex" }] : []));
-    isLoading = signal(true, ...(ngDevMode ? [{ debugName: "isLoading" }] : []));
+    // isLoading = signal(true); // Replaced by per-image tracking
     hasError = signal(false, ...(ngDevMode ? [{ debugName: "hasError" }] : []));
-    activeSrc = computed(() => {
+    // Track loaded state for each image source
+    loadedImages = signal(new Set(), ...(ngDevMode ? [{ debugName: "loadedImages" }] : []));
+    // Toggle thumbnails
+    showThumbnails = input(true, ...(ngDevMode ? [{ debugName: "showThumbnails" }] : []));
+    // Toggle toolbar
+    showToolbar = input(true, ...(ngDevMode ? [{ debugName: "showToolbar" }] : []));
+    // Toolbar custom extensions
+    toolbarExtensions = input(null, ...(ngDevMode ? [{ debugName: "toolbarExtensions" }] : []));
+    activeBuffer = computed(() => {
         const imgs = this.images();
-        if (imgs && imgs.length > 0) {
-            return imgs[this.currentIndex()];
+        const srcsets = this.srcsets();
+        const current = this.currentIndex();
+        // Single image or fallback
+        if (!imgs || imgs.length === 0) {
+            return [{ src: this.src(), index: 0, offset: 0, srcset: this.srcset() }];
+        }
+        const buffer = [];
+        const total = imgs.length;
+        // Helper to get srcset safely
+        const getSrcset = (i) => (srcsets && srcsets[i]) ? srcsets[i] : undefined;
+        // Prev (-1)
+        if (current > 0) {
+            buffer.push({
+                src: imgs[current - 1],
+                index: current - 1,
+                offset: -1,
+                srcset: getSrcset(current - 1)
+            });
+        }
+        // Current (0)
+        buffer.push({
+            src: imgs[current],
+            index: current,
+            offset: 0,
+            srcset: getSrcset(current)
+        });
+        // Next (+1)
+        if (current < total - 1) {
+            buffer.push({
+                src: imgs[current + 1],
+                index: current + 1,
+                offset: 1,
+                srcset: getSrcset(current + 1)
+            });
         }
-        return this.src();
-    }, ...(ngDevMode ? [{ debugName: "activeSrc" }] : []));
+        return buffer;
+    }, ...(ngDevMode ? [{ debugName: "activeBuffer" }] : []));
     platformId = inject(PLATFORM_ID);
+    sanitizer = inject(DomSanitizer);
+    // Icons map with SafeHtml
+    icons;
     constructor() {
+        // Sanitize icons once
+        this.icons = Object.keys(PREVIEW_ICONS).reduce((acc, key) => {
+            acc[key] = this.sanitizer.bypassSecurityTrustHtml(PREVIEW_ICONS[key]);
+            return acc;
+        }, {});
         // defined in class body usually, but here to show logical grouping
         effect(() => {
             // Initialize index from input
@@ -34,7 +140,6 @@ class ImagesPreviewComponent {
         effect(() => {
             // Reset state when index changes
             this.currentIndex();
-            this.isLoading.set(true);
             this.hasError.set(false);
             this.reset(); // Reset zoom/rotate
         }, { allowSignalWrites: true });
@@ -43,19 +148,53 @@ class ImagesPreviewComponent {
             const index = this.currentIndex();
             const images = this.images();
             if (isPlatformBrowser(this.platformId) && images && images.length > 0) {
+                const srcsets = this.srcsets();
+                const getSrcset = (i) => (srcsets && srcsets[i]) ? srcsets[i] : undefined;
                 // Next
                 if (index < images.length - 1) {
                     const img = new Image();
+                    const s = getSrcset(index + 1);
+                    if (s)
+                        img.srcset = s;
                     img.src = images[index + 1];
                 }
                 // Prev
                 if (index > 0) {
                     const img = new Image();
+                    const s = getSrcset(index - 1);
+                    if (s)
+                        img.srcset = s;
                     img.src = images[index - 1];
                 }
             }
         });
+        effect(() => {
+            // Handle FLIP on open
+            const opener = this.openerRect();
+            if (opener && !this.flipAnimDone) {
+                // Defer to let the view render so we know final position
+                setTimeout(() => this.runFlipAnimation(opener));
+            }
+        });
+        // Auto-scroll thumbnails
+        effect(() => {
+            const index = this.currentIndex();
+            const show = this.showThumbnails();
+            const refs = this.thumbRefs();
+            if (show && refs && refs[index]) {
+                const el = refs[index].nativeElement;
+                const container = el.parentElement;
+                if (container) {
+                    const scrollLeft = el.offsetLeft + el.offsetWidth / 2 - container.offsetWidth / 2;
+                    container.scrollTo({
+                        left: scrollLeft,
+                        behavior: 'smooth'
+                    });
+                }
+            }
+        });
     }
+    flipAnimDone = false;
     scale = signal(1, ...(ngDevMode ? [{ debugName: "scale" }] : []));
     translateX = signal(0, ...(ngDevMode ? [{ debugName: "translateX" }] : []));
     translateY = signal(0, ...(ngDevMode ? [{ debugName: "translateY" }] : []));
@@ -63,10 +202,11 @@ class ImagesPreviewComponent {
     flipH = signal(false, ...(ngDevMode ? [{ debugName: "flipH" }] : []));
     flipV = signal(false, ...(ngDevMode ? [{ debugName: "flipV" }] : []));
     isDragging = signal(false, ...(ngDevMode ? [{ debugName: "isDragging" }] : []));
+    isInertia = signal(false, ...(ngDevMode ? [{ debugName: "isInertia" }] : []));
     // Touch state
     initialPinchDistance = 0;
     initialScale = 1;
-    isPinching = false;
+    isPinching = signal(false, ...(ngDevMode ? [{ debugName: "isPinching" }] : []));
     // Computed state object for template
     state = computed(() => ({
         src: this.src(),
@@ -74,8 +214,10 @@ class ImagesPreviewComponent {
         rotate: this.rotate(),
         flipH: this.flipH(),
         flipV: this.flipV(),
-        isLoading: this.isLoading(),
+        isLoading: !this.loadedImages().has(this.src() || '') && !this.hasError(),
         hasError: this.hasError(),
+        currentIndex: this.currentIndex(),
+        total: this.images()?.length ?? 1,
     }), ...(ngDevMode ? [{ debugName: "state" }] : []));
     // Actions object for template
     actions = {
@@ -87,6 +229,9 @@ class ImagesPreviewComponent {
         flipVertical: () => this.flipVertical(),
         reset: () => this.reset(),
         close: () => this.close(),
+        next: () => this.next(),
+        prev: () => this.prev(),
+        jumpTo: (index) => this.jumpTo(index),
     };
     MIN_SCALE = 0.5;
     MAX_SCALE = 5;
@@ -102,18 +247,92 @@ class ImagesPreviewComponent {
     cachedConstraints = null;
     lastTimestamp = 0;
     rafId = null;
-    FRICTION = 0.92; // Heavier feel
+    FRICTION = 0.95; // Super smooth glide
     VELOCITY_THRESHOLD = 0.01;
     MAX_VELOCITY = 3; // Cap speed to prevent teleporting
-    transformStyle = computed(() => {
+    // Updated transform logic for slide buffer
+    getTransform(offset) {
+        const viewportWidth = window.innerWidth;
+        const spacing = 16; // Gap between images
+        const baseOffset = offset * (viewportWidth + spacing);
+        // Dynamic movement from touch/inertia
+        // Global translateX applies to the whole "track"
+        const x = this.translateX() + baseOffset;
+        // Y-axis drag (Pull-to-Close) usually only affects the active image visually,
+        // but moving the whole track is acceptable and simpler.
+        // Ideally, neighbors stay at Y=0.
+        const effectiveY = offset === 0 ? this.translateY() : 0;
+        const effectiveScale = offset === 0 ? this.scale() : 1;
+        const effectiveRotate = offset === 0 ? this.rotate() : 0;
+        const flipH = offset === 0 ? this.flipH() : false;
+        const flipV = offset === 0 ? this.flipV() : false;
+        const scaleX = flipH ? -1 : 1;
+        const scaleY = flipV ? -1 : 1;
+        // FLIP override
+        if (offset === 0) {
+            const flip = this.flipTransform();
+            if (flip)
+                return flip;
+        }
+        return `translate3d(${x}px, ${effectiveY}px, 0) scale(${effectiveScale}) rotate(${effectiveRotate}deg) scaleX(${scaleX}) scaleY(${scaleY})`;
+    }
+    // FLIP State
+    flipTransform = signal('', ...(ngDevMode ? [{ debugName: "flipTransform" }] : []));
+    // Helper to get current active image element
+    getCurrentImageElement() {
+        const buffer = this.activeBuffer();
+        const index = buffer.findIndex((item) => item.offset === 0);
+        if (index === -1)
+            return undefined;
+        return this.imgRefs()[index]?.nativeElement;
+    }
+    runFlipAnimation(opener) {
+        if (!isPlatformBrowser(this.platformId))
+            return;
+        const imgEl = this.getCurrentImageElement();
+        if (!imgEl)
+            return;
+        // 1. First: Final state is already rendered (centered, max fit)
+        const finalRect = imgEl.getBoundingClientRect();
+        // 2. Invert: Calculate scale and translate to match opener
+        const scaleX = opener.width / finalRect.width;
+        const scaleY = opener.height / finalRect.height;
+        // Note: we use the larger scale to crop? 
+        // Or fit? 
+        // Usually we want to fit.
+        // Let's matching fitting.
+        // Actually, most simple FLIP matches dimensions exactly.
+        // But aspect ratios might differ.
+        // Let's just match the rect exactly.
+        const deltaX = opener.left - finalRect.left + (opener.width - finalRect.width) / 2;
+        const deltaY = opener.top - finalRect.top + (opener.height - finalRect.height) / 2;
+        // Apply Invert Transform immediately (no transition)
+        imgEl.style.transition = 'none';
+        this.flipTransform.set(`translate3d(${deltaX}px, ${deltaY}px, 0) scale(${scaleX}, ${scaleY})`);
+        // Force Reflow
+        imgEl.offsetHeight;
+        // 3. Play
+        requestAnimationFrame(() => {
+            // Enable transition
+            imgEl.style.transition = 'transform 300ms cubic-bezier(0.2, 0, 0.2, 1)';
+            // Remove override (animates to Final)
+            this.flipTransform.set('');
+            this.flipAnimDone = true;
+            // CLEANUP: Remove transition after animation wraps up so dragging/panning is instant
+            setTimeout(() => {
+                imgEl.style.transition = '';
+            }, 300);
+        });
+    }
+    overlayBackground = computed(() => {
+        const y = Math.abs(this.translateY());
         const scale = this.scale();
-        const x = this.translateX();
-        const y = this.translateY();
-        const rotate = this.rotate();
-        const scaleX = this.flipH() ? -1 : 1;
-        const scaleY = this.flipV() ? -1 : 1;
-        return `translate3d(${x}px, ${y}px, 0) scale(${scale}) rotate(${rotate}deg) scaleX(${scaleX}) scaleY(${scaleY})`;
-    }, ...(ngDevMode ? [{ debugName: "transformStyle" }] : []));
+        if (scale === 1 && y > 0) {
+            const opacity = Math.max(0, 0.95 - y / 400); // Fade out as we drag down
+            return `rgba(0, 0, 0, ${opacity})`;
+        }
+        return 'var(--ng-img-background)';
+    }, ...(ngDevMode ? [{ debugName: "overlayBackground" }] : []));
     onEscape() {
         this.close();
     }
@@ -134,13 +353,19 @@ class ImagesPreviewComponent {
             this.translateY.set(nextY);
             return;
         }
-        const img = this.imgRef()?.nativeElement;
+        const img = this.getCurrentImageElement();
         if (!img) {
             this.translateX.set(nextX);
             this.translateY.set(nextY);
             return;
         }
         const scale = this.scale();
+        // If scale is 1, we allow free movement for Pull-to-Close and Swipe Nav
+        if (scale === 1) {
+            this.translateX.set(nextX);
+            this.translateY.set(nextY);
+            return;
+        }
         const rotate = Math.abs(this.rotate() % 180);
         const isRotated = rotate === 90;
         const baseWidth = img.offsetWidth;
@@ -158,7 +383,7 @@ class ImagesPreviewComponent {
         this.translateY.set(clampedY);
     }
     onTouchMove(event) {
-        if (!this.isDragging() && !this.isPinching)
+        if (!this.isDragging() && !this.isPinching())
             return;
         // Prevent default to stop page scrolling/zooming
         if (event.cancelable) {
@@ -166,7 +391,7 @@ class ImagesPreviewComponent {
         }
         const touches = event.touches;
         // One finger: Pan
-        if (touches.length === 1 && this.isDragging() && !this.isPinching) {
+        if (touches.length === 1 && this.isDragging() && !this.isPinching()) {
             const now = Date.now();
             // Add point to history
             this.touchHistory.push({
@@ -190,11 +415,30 @@ class ImagesPreviewComponent {
             // Apply rubber banding if out of bounds
             // Use cached constraints to avoid reflows
             const constraints = this.cachedConstraints || this.getConstraints();
-            if (nextX > constraints.maxX) {
-                nextX = constraints.maxX + (nextX - constraints.maxX) * 0.5;
+            // At scale 1, we want linear drag for pull-to-close (Y) and swipe (X)
+            // But we can keep rubber banding if it feels good.
+            // For Pull-to-Close, standard is 1:1 or slightly resisted. 
+            // Let's stick to the current logic which applies resistance if "out of bounds".
+            // Since at scale 1 bounds are 0, it will apply resistance immediately.
+            // We want easier pull.
+            if (this.scale() === 1) {
+                // Reduce resistance
+                nextY = currentY + deltaY;
+                nextX = currentX + deltaX;
             }
-            else if (nextX < -constraints.maxX) {
-                nextX = -constraints.maxX + (nextX + constraints.maxX) * 0.5;
+            else {
+                if (nextX > constraints.maxX) {
+                    nextX = constraints.maxX + (nextX - constraints.maxX) * 0.5;
+                }
+                else if (nextX < -constraints.maxX) {
+                    nextX = -constraints.maxX + (nextX + constraints.maxX) * 0.5;
+                }
+                if (nextY > constraints.maxY) {
+                    nextY = constraints.maxY + (nextY - constraints.maxY) * 0.5;
+                }
+                else if (nextY < -constraints.maxY) {
+                    nextY = -constraints.maxY + (nextY + constraints.maxY) * 0.5;
+                }
             }
             if (nextY > constraints.maxY) {
                 nextY = constraints.maxY + (nextY - constraints.maxY) * 0.5;
@@ -208,15 +452,44 @@ class ImagesPreviewComponent {
             this.lastTouchY = touches[0].clientY;
         }
         // Two fingers: Pinch Zoom
-        if (touches.length === 2) {
+        if (touches.length === 2 && this.initialPinchDistance > 0) {
             const distance = this.getDistance(touches);
-            if (this.initialPinchDistance > 0) {
-                const scaleFactor = distance / this.initialPinchDistance;
-                const newScale = Math.min(Math.max(this.initialScale * scaleFactor, this.MIN_SCALE), this.MAX_SCALE);
-                this.scale.set(newScale);
-                // Re-clamp position after zoom
-                this.clampPosition();
+            const scaleFactor = distance / this.initialPinchDistance;
+            // Calculate new scale with limits
+            const rawNewScale = this.initialScale * scaleFactor;
+            const newScale = Math.min(Math.max(rawNewScale, this.MIN_SCALE), this.MAX_SCALE);
+            // Calculate new translation to keep focal point fixed
+            const effectiveRatio = newScale / this.initialScale;
+            const currentCenter = this.getCenter(touches);
+            const cx = currentCenter.x - window.innerWidth / 2;
+            const cy = currentCenter.y - window.innerHeight / 2;
+            const sx = this.initialPinchCenter.x - window.innerWidth / 2;
+            const sy = this.initialPinchCenter.y - window.innerHeight / 2;
+            let newTx = cx - (sx - this.initialTranslateX) * effectiveRatio;
+            let newTy = cy - (sy - this.initialTranslateY) * effectiveRatio;
+            // --- Clamp Logic (Inline for atomicity) ---
+            const img = this.getCurrentImageElement();
+            if (img) {
+                const rotate = Math.abs(this.rotate() % 180);
+                const isRotated = rotate === 90;
+                const baseWidth = img.offsetWidth;
+                const baseHeight = img.offsetHeight;
+                const currentWidth = (isRotated ? baseHeight : baseWidth) * newScale;
+                const currentHeight = (isRotated ? baseWidth : baseHeight) * newScale;
+                const maxTx = Math.max(0, (currentWidth - window.innerWidth) / 2);
+                const maxTy = Math.max(0, (currentHeight - window.innerHeight) / 2);
+                if (currentWidth <= window.innerWidth)
+                    newTx = 0;
+                else if (Math.abs(newTx) > maxTx)
+                    newTx = Math.sign(newTx) * maxTx;
+                if (currentHeight <= window.innerHeight)
+                    newTy = 0;
+                else if (Math.abs(newTy) > maxTy)
+                    newTy = Math.sign(newTy) * maxTy;
             }
+            this.scale.set(newScale);
+            this.translateX.set(newTx);
+            this.translateY.set(newTy);
         }
     }
     getConstraints() {
@@ -226,7 +499,7 @@ class ImagesPreviewComponent {
         // The `cachedConstraints` property is used *outside* this method.
         if (!isPlatformBrowser(this.platformId))
             return { maxX: 0, maxY: 0 };
-        const img = this.imgRef()?.nativeElement;
+        const img = this.getCurrentImageElement();
         if (!img)
             return { maxX: 0, maxY: 0 };
         const scale = this.scale();
@@ -246,7 +519,7 @@ class ImagesPreviewComponent {
     clampPosition() {
         if (!isPlatformBrowser(this.platformId))
             return;
-        const img = this.imgRef()?.nativeElement;
+        const img = this.getCurrentImageElement();
         if (!img)
             return;
         const scale = this.scale();
@@ -283,6 +556,7 @@ class ImagesPreviewComponent {
             this.translateY.set(newY);
     }
     startInertia() {
+        this.isInertia.set(true); // Disable CSS transition
         let lastTime = Date.now();
         const step = () => {
             if (!this.isDragging() &&
@@ -292,7 +566,6 @@ class ImagesPreviewComponent {
                 const dt = Math.min(now - lastTime, 64); // Cap dt to avoid huge jumps if lag
                 lastTime = now;
                 if (dt === 0) {
-                    // Skip if 0ms passed (can happen on fast screens)
                     this.rafId = requestAnimationFrame(step);
                     return;
                 }
@@ -300,14 +573,12 @@ class ImagesPreviewComponent {
                 this.velocityX = Math.max(-this.MAX_VELOCITY, Math.min(this.MAX_VELOCITY, this.velocityX));
                 this.velocityY = Math.max(-this.MAX_VELOCITY, Math.min(this.MAX_VELOCITY, this.velocityY));
                 // Time-based friction
-                // Standard friction is 0.95 per 16ms frame
                 const frictionFactor = Math.pow(this.FRICTION, dt / 16);
                 this.velocityX *= frictionFactor;
                 this.velocityY *= frictionFactor;
                 let nextX = this.translateX() + this.velocityX * dt;
                 let nextY = this.translateY() + this.velocityY * dt;
                 // Check bounds during inertia
-                // Hard stop/bounce logic can be improved here if needed
                 const constraints = this.cachedConstraints || this.getConstraints();
                 if (nextX > constraints.maxX) {
                     nextX = constraints.maxX;
@@ -331,14 +602,12 @@ class ImagesPreviewComponent {
             }
             else {
                 this.stopInertia();
-                // Clear cache when movement stops
-                // The instruction says to clear it in onTouchEnd or reset/scale changes.
-                // So, no need to clear it here.
             }
         };
         this.rafId = requestAnimationFrame(step);
     }
     stopInertia() {
+        this.isInertia.set(false); // Re-enable CSS transition
         if (this.rafId) {
             cancelAnimationFrame(this.rafId);
             this.rafId = null;
@@ -380,6 +649,27 @@ class ImagesPreviewComponent {
         event.stopPropagation();
     }
     onMouseUp() {
+        if (this.isDragging()) {
+            // Check Pull to Close for Mouse
+            if (this.scale() === 1) {
+                const y = this.translateY();
+                if (Math.abs(y) > 100) {
+                    this.close();
+                    return;
+                }
+                // Reset position if not closed
+                if (y !== 0) {
+                    this.translateY.set(0);
+                }
+                const x = this.translateX();
+                if (x !== 0) {
+                    this.translateX.set(0);
+                }
+            }
+            else {
+                this.snapBack();
+            }
+        }
         this.isDragging.set(false);
     }
     onTouchEnd(event) {
@@ -405,42 +695,55 @@ class ImagesPreviewComponent {
                 this.velocityY = 0;
             }
             this.isDragging.set(false);
-            this.isPinching = false;
+            this.isPinching.set(false);
             this.initialPinchDistance = 0;
             // Swipe Navigation (at 1x scale)
             if (this.scale() === 1) {
                 const x = this.translateX();
-                const threshold = 50; // px
+                const y = this.translateY();
+                // Pull to Close
+                if (Math.abs(y) > 100) {
+                    this.close();
+                    return;
+                }
+                const threshold = window.innerWidth * 0.25;
+                const images = this.images();
+                const total = images ? images.length : 0;
+                const index = this.currentIndex();
                 if (x < -threshold) {
-                    this.next();
+                    // NEXT (Slide Left)
+                    if (index < total - 1) {
+                        this.animateSlide(-1);
+                    }
+                    else {
+                        this.translateX.set(0);
+                        this.translateY.set(0);
+                    }
                     return;
                 }
                 else if (x > threshold) {
-                    this.prev();
+                    // PREV (Slide Right)
+                    if (index > 0) {
+                        this.animateSlide(1);
+                    }
+                    else {
+                        this.translateX.set(0);
+                        this.translateY.set(0);
+                    }
                     return;
                 }
-            }
-            // Check bounds
-            const constraints = this.cachedConstraints || this.getConstraints();
-            const x = this.translateX();
-            const y = this.translateY();
-            const outOfBounds = x > constraints.maxX ||
-                x < -constraints.maxX ||
-                y > constraints.maxY ||
-                y < -constraints.maxY;
-            if (outOfBounds) {
-                this.snapBack();
-                this.velocityX = 0;
-                this.velocityY = 0;
-                this.cachedConstraints = null;
+                // Snap back
+                this.translateX.set(0);
+                this.translateY.set(0);
             }
             else {
                 this.startInertia();
             }
+            return;
         }
-        else if (touches.length === 1 && this.isPinching) {
+        else if (touches.length === 1 && this.isPinching()) {
             // Transition from pinch to pan
-            this.isPinching = false;
+            this.isPinching.set(false);
             this.isDragging.set(true);
             this.lastTouchX = touches[0].clientX;
             this.lastTouchY = touches[0].clientY;
@@ -454,18 +757,32 @@ class ImagesPreviewComponent {
     }
     lastTouchX = 0;
     lastTouchY = 0;
+    initialPinchCenter = { x: 0, y: 0 };
+    initialTranslateX = 0;
+    initialTranslateY = 0;
     getDistance(touches) {
         return Math.hypot(touches[0].clientX - touches[1].clientX, touches[0].clientY - touches[1].clientY);
     }
+    getCenter(touches) {
+        return {
+            x: (touches[0].clientX + touches[1].clientX) / 2,
+            y: (touches[0].clientY + touches[1].clientY) / 2,
+        };
+    }
     close() {
         this.closeCallback();
     }
-    onImageLoad() {
-        this.isLoading.set(false);
+    onImageLoad(src) {
+        this.loadedImages.update(set => {
+            const newSet = new Set(set);
+            newSet.add(src);
+            return newSet;
+        });
         this.hasError.set(false);
     }
-    onImageError() {
-        this.isLoading.set(false);
+    onImageError(src) {
+        // this.loadedImages.update... (maybe not mark as loaded? or separate error tracking)
+        // For now, keep error simple
         this.hasError.set(true);
     }
     // Zoom
@@ -521,14 +838,45 @@ class ImagesPreviewComponent {
             this.currentIndex.update((i) => i - 1);
         }
     }
+    jumpTo(index) {
+        this.currentIndex.set(index);
+        this.reset();
+    }
+    // Slide Animation
+    animateSlide(direction) {
+        const spacing = 16;
+        const width = window.innerWidth + spacing;
+        // direction -1 (Next) -> move to -width
+        // direction 1 (Prev) -> move to width
+        // Wait. If I swipe Left (Next), x is negative. Target should be -width.
+        // If I swipe Right (Prev), x is positive. Target should be width.
+        // So target = direction * width? No.
+        // If direction is "Next" (index + 1), I want to slide to the Left (-X).
+        // Let's pass the sign of movement explicitly.
+        const target = direction === -1 ? -width : width;
+        this.translateX.set(target);
+        // Wait for CSS transition (0.3s)
+        setTimeout(() => {
+            // Update Index (silent swap)
+            this.isInertia.set(true); // Disable transition
+            if (direction === -1)
+                this.next();
+            else
+                this.prev();
+            this.translateX.set(0);
+            // Re-enable transition
+            setTimeout(() => {
+                this.isInertia.set(false);
+            }, 50);
+        }, 300);
+    }
     // Mouse Interaction
     onMouseDown(event) {
-        if (this.scale() <= 1 && !this.isDragging())
-            return; // Can drag only if zoomed? Or always? Default: only zoomed?
-        // User expectation for preview: maybe panning always allowed? or only when zoomed?
-        // Best practice: if image fits, no pan. If zoomed, pan.
-        // I'll allow pan if scale > 1
-        if (this.scale() <= 1)
+        // Allow dragging even at scale 1 for Pull-to-Close and Swipe-like nav (if intended)
+        if (this.isDragging())
+            return;
+        // Only trigger on Left Click
+        if (event.button !== 0)
             return;
         this.isDragging.set(true);
         this.startX = event.clientX;
@@ -540,36 +888,38 @@ class ImagesPreviewComponent {
     // Touch Interaction (bound in template)
     onTouchStart(event) {
         this.stopInertia(); // Cancel any ongoing movement
+        // if (event.cancelable) event.preventDefault(); // Removed to restore Tap-to-Close (click events)
+        // touch-action: none in CSS handles scroll prevention.
         const touches = event.touches;
         if (touches.length === 1) {
-            // Single touch: Pan. Only if touching the image directly.
-            // We need to check if the target is the image element.
-            const imgElement = this.imgRef()?.nativeElement;
-            if (imgElement && event.target === imgElement) {
-                this.isDragging.set(true);
-                this.lastTouchX = touches[0].clientX;
-                this.lastTouchY = touches[0].clientY;
-                this.lastTimestamp = Date.now(); // Keep for scroll decay reference if needed
-                // Initialize physics state
-                this.velocityX = 0;
-                this.velocityY = 0;
-                this.touchHistory = [
-                    {
-                        x: touches[0].clientX,
-                        y: touches[0].clientY,
-                        time: Date.now(),
-                    },
-                ];
-                // Cache layout to prevent thrashing
-                this.cachedConstraints = this.getConstraints();
-            }
+            // Single touch: Pan.
+            // Allow dragging from anywhere in the container (better UX for Pull-to-Close)
+            this.isDragging.set(true);
+            this.lastTouchX = touches[0].clientX;
+            this.lastTouchY = touches[0].clientY;
+            this.lastTimestamp = Date.now();
+            // Initialize physics state
+            this.velocityX = 0;
+            this.velocityY = 0;
+            this.touchHistory = [
+                {
+                    x: touches[0].clientX,
+                    y: touches[0].clientY,
+                    time: Date.now(),
+                },
+            ];
+            // Cache layout to prevent thrashing
+            this.cachedConstraints = this.getConstraints();
         }
         else if (touches.length === 2) {
             // Two fingers: Pinch
-            this.isPinching = true;
+            this.isPinching.set(true);
             this.isDragging.set(false); // Stop panning
             this.initialPinchDistance = this.getDistance(touches);
             this.initialScale = this.scale();
+            this.initialPinchCenter = this.getCenter(touches);
+            this.initialTranslateX = this.translateX();
+            this.initialTranslateY = this.translateY();
             // Clear caching on pinch (scale changes will invalidate limits)
             this.cachedConstraints = null;
             // Prevent default to avoid browser zoom
@@ -578,7 +928,7 @@ class ImagesPreviewComponent {
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.7", ngImport: i0, type: ImagesPreviewComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.7", type: ImagesPreviewComponent, isStandalone: true, selector: "ng-images-preview", inputs: { src: { classPropertyName: "src", publicName: "src", isSignal: true, isRequired: true, transformFunction: null }, images: { classPropertyName: "images", publicName: "images", isSignal: true, isRequired: false, transformFunction: null }, initialIndex: { classPropertyName: "initialIndex", publicName: "initialIndex", isSignal: true, isRequired: false, transformFunction: null }, customTemplate: { classPropertyName: "customTemplate", publicName: "customTemplate", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "document:mouseup": "onMouseUp()", "document:touchmove": "onTouchMove($event)", "document:touchend": "onTouchEnd($event)", "document:keydown.arrowleft": "prev()", "document:keydown.arrowright": "next()", "document:keydown.escape": "onEscape()", "document:mousemove": "onMouseMove($event)" } }, viewQueries: [{ propertyName: "imgRef", first: true, predicate: ["imgRef"], descendants: true, isSignal: true }], ngImport: i0, template: `
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.7", type: ImagesPreviewComponent, isStandalone: true, selector: "ng-images-preview", inputs: { src: { classPropertyName: "src", publicName: "src", isSignal: true, isRequired: true, transformFunction: null }, images: { classPropertyName: "images", publicName: "images", isSignal: true, isRequired: false, transformFunction: null }, srcset: { classPropertyName: "srcset", publicName: "srcset", isSignal: true, isRequired: false, transformFunction: null }, srcsets: { classPropertyName: "srcsets", publicName: "srcsets", isSignal: true, isRequired: false, transformFunction: null }, initialIndex: { classPropertyName: "initialIndex", publicName: "initialIndex", isSignal: true, isRequired: false, transformFunction: null }, openerRect: { classPropertyName: "openerRect", publicName: "openerRect", isSignal: true, isRequired: false, transformFunction: null }, customTemplate: { classPropertyName: "customTemplate", publicName: "customTemplate", isSignal: true, isRequired: false, transformFunction: null }, toolbarConfig: { classPropertyName: "toolbarConfig", publicName: "toolbarConfig", isSignal: true, isRequired: false, transformFunction: null }, showThumbnails: { classPropertyName: "showThumbnails", publicName: "showThumbnails", isSignal: true, isRequired: false, transformFunction: null }, showToolbar: { classPropertyName: "showToolbar", publicName: "showToolbar", isSignal: true, isRequired: false, transformFunction: null }, toolbarExtensions: { classPropertyName: "toolbarExtensions", publicName: "toolbarExtensions", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "document:mouseup": "onMouseUp()", "document:touchmove": "onTouchMove($event)", "document:touchend": "onTouchEnd($event)", "document:keydown.arrowleft": "prev()", "document:keydown.arrowright": "next()", "document:keydown.escape": "onEscape()", "document:mousemove": "onMouseMove($event)" } }, viewQueries: [{ propertyName: "imgRefs", predicate: ["imgRef"], descendants: true, isSignal: true }, { propertyName: "thumbRefs", predicate: ["thumbRef"], descendants: true, isSignal: true }], ngImport: i0, template: `
     <div
       class="overlay"
       [@fadeInOut]
@@ -587,6 +937,7 @@ class ImagesPreviewComponent {
       tabindex="0"
       role="button"
       aria-label="Close preview overlay"
+      [style.background-color]="overlayBackground()"
     >
       <!-- Custom Template Support -->
       @if (customTemplate(); as template) {
@@ -595,7 +946,7 @@ class ImagesPreviewComponent {
         ></ng-container>
       } @else {
         <!-- Loading -->
-        @if (isLoading()) {
+        @if (!loadedImages().has(src()) && !hasError()) {
           <div class="loader">Loading...</div>
         }
 
@@ -611,27 +962,32 @@ class ImagesPreviewComponent {
           (touchstart)="onTouchStart($event)"
           tabindex="-1"
         >
-          <img
-            #imgRef
-            [src]="activeSrc()"
-            [class.opacity-0]="isLoading() || hasError()"
-            class="preview-image"
-            [class.dragging]="isDragging()"
-            [class.zoom-in]="scale() === 1"
-            [class.zoom-out]="scale() > 1"
-            [style.transform]="transformStyle()"
-            (load)="onImageLoad()"
-            (error)="onImageError()"
-            (mousedown)="onMouseDown($event)"
-            (click)="$event.stopPropagation()"
-            draggable="false"
-            alt="Preview"
-          />
+          @for (item of activeBuffer(); track item.src) {
+            <img
+              #imgRef
+              [src]="item.src"
+              [srcset]="item.srcset || ''"
+              [class.opacity-0]="item.offset === 0 && (!loadedImages().has(item.src) || hasError())"
+              class="preview-image"
+              [class.dragging]="isDragging()"
+              [class.inertia]="isInertia()"
+              [class.pinching]="isPinching()"
+              [class.zoom-in]="scale() === 1"
+              [class.zoom-out]="scale() > 1"
+              [class.hidden]="item.offset !== 0 && scale() > 1"
+              [style.transform]="getTransform(item.offset)"
+              (load)="onImageLoad(item.src)"
+              (error)="onImageError(item.src)"
+              (mousedown)="onMouseDown($event)"
+              (click)="$event.stopPropagation()"
+              draggable="false"
+              alt="Preview"
+            />
+          }
         </div>
 
         <!-- Close Button -->
-        <button class="close-btn" (click)="close()" aria-label="Close preview">
-          <svg viewBox="0 0 24 24"><path d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"/></svg>
+        <button class="close-btn" (click)="close()" aria-label="Close preview" [innerHTML]="icons.close">
         </button>
 
         <!-- Navigation -->
@@ -643,8 +999,8 @@ class ImagesPreviewComponent {
               (click)="prev(); $event.stopPropagation()"
               (mousedown)="$event.stopPropagation()"
               aria-label="Previous image"
+              [innerHTML]="icons.prev"
             >
-              <svg viewBox="0 0 24 24"><path d="M15.41 7.41L14 6l-6 6 6 6 1.41-1.41L10.83 12z"/></svg>
             </button>
           }
           <!-- Check if not last -->
@@ -654,8 +1010,8 @@ class ImagesPreviewComponent {
               (click)="next(); $event.stopPropagation()"
               (mousedown)="$event.stopPropagation()"
               aria-label="Next image"
+              [innerHTML]="icons.next"
             >
-              <svg viewBox="0 0 24 24"><path d="M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z"/></svg>
             </button>
           }
 
@@ -664,40 +1020,61 @@ class ImagesPreviewComponent {
         }
 
         <!-- Toolbar -->
+        <!-- Toolbar -->
+        @if (showToolbar()) {
         <div
           class="toolbar"
           (click)="$event.stopPropagation()"
           (keydown)="onToolbarKey($event)"
           tabindex="0"
         >
-          <!-- Flip H -->
-          <button class="toolbar-btn" (click)="flipHorizontal()" aria-label="Flip Horizontal">
-            <svg viewBox="0 0 24 24"><path d="M15 21h2v-2h-2v2zm4-12h2V7h-2v2zM3 5v14c0 1.1.9 2 2 2h4v-2H5V5h4V3H5c-1.1 0-2 .9-2 2zm16-2v2h2c0-1.1-.9-2-2-2zm-8 20h2V1h-2v22zm8-6h2v-2h-2v2zM15 5h2V3h-2v2zm4 8h2v-2h-2v2zm0 8c1.1 0 2-.9 2-2h-2v2z"/></svg>
-          </button>
-          <!-- Flip V -->
-          <button class="toolbar-btn" (click)="flipVertical()" aria-label="Flip Vertical">
-            <svg viewBox="0 0 24 24"><path d="M7 21h2v-2H7v2zM3 9h2V7H3v2zm12 12h2v-2h-2v2zm4-12h2V7h-2v2zm-4 4h2v-4h-2v4zm-8-8h2V3H7v2zm8 0h2V3h-2v2zm-4 8h4v-4h-4v4zM3 15h2v-2H3v2zm12-4h2v-4H3v4h2v-2h10v2zM7 3v2h2V3H7zm8 20h2v-2h-2v2zm-4 0h2v-2h-2v2zm4-12h2v-2h-2v2zM3 19c0 1.1.9 2 2 2h2v-2H5v-2H3v2zm16-6h2v-2h-2v2zm0 4v2c0 1.1-.9 2-2 2h-2v-2h2v-2h2zM5 3c-1.1 0-2 .9-2 2h2V3z"/></svg>
-          </button>
-          <!-- Rotate Left -->
-          <button class="toolbar-btn" (click)="rotateLeft()" aria-label="Rotate Left">
-            <svg viewBox="0 0 24 24"><path d="M7.11 8.53L5.7 7.11C4.8 8.27 4.24 9.61 4.07 11h2.02c.14-.87.49-1.72 1.02-2.47zM6.09 13H4.07c.17 1.39.72 2.73 1.62 3.89l1.41-1.42c-.52-.75-.87-1.59-1.01-2.47zm1.01 5.32c1.16.9 2.51 1.44 3.9 1.61V17.9c-.87-.15-1.71-.49-2.46-1.03L7.1 18.32zM13 4.07V1L8.45 5.55 13 10V6.09c2.84.48 5 2.94 5 5.91s-2.16 5.43-5 5.91v2.02c3.95-.49 7-3.85 7-7.93s-3.05-7.44-7-7.93z"/></svg>
-          </button>
-          <!-- Rotate Right -->
-          <button class="toolbar-btn" (click)="rotateRight()" aria-label="Rotate Right">
-            <svg viewBox="0 0 24 24"><path d="M15.55 5.55L11 1v3.07C7.06 4.56 4 7.92 4 12s3.05 7.44 7 7.93v-2.02c-2.84-.48-5-2.94-5-5.91s2.16-5.43 5-5.91V10l4.55-4.45zM19.93 11c-.17-1.39-.72-2.73-1.62-3.89l-1.42 1.42c.54.75.88 1.6 1.02 2.47h2.02zM13 17.9v2.02c1.39-.17 2.74-.71 3.9-1.61l-1.44-1.44c-.75.54-1.59.89-2.46 1.03zm3.89-2.42l1.42 1.41c.9-1.16 1.45-2.5 1.62-3.89h-2.02c-.14.87-.48 1.72-1.02 2.48z"/></svg>
-          </button>
-          <!-- Zoom Out -->
-          <button class="toolbar-btn" (click)="zoomOut()" aria-label="Zoom Out">
-             <svg viewBox="0 0 24 24"><path d="M19 13H5v-2h14v2z"/></svg>
-          </button>
-          <!-- Zoom In -->
-          <button class="toolbar-btn" (click)="zoomIn()" aria-label="Zoom In">
-             <svg viewBox="0 0 24 24"><path d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z"/></svg>
-          </button>
+          <!-- Flip -->
+          @if (toolbarConfig().showFlip) {
+            <button class="toolbar-btn" (click)="flipHorizontal()" aria-label="Flip Horizontal" [innerHTML]="icons.flipH">
+            </button>
+            <button class="toolbar-btn" (click)="flipVertical()" aria-label="Flip Vertical" [innerHTML]="icons.flipV">
+            </button>
+          }
+          
+          <!-- Extensions (Custom Buttons) -->
+          @if (toolbarExtensions()) {
+            <ng-container *ngTemplateOutlet="toolbarExtensions(); context: { $implicit: images()![currentIndex()] }"></ng-container>
+          }
+          <!-- Rotate -->
+          @if (toolbarConfig().showRotate) {
+            <button class="toolbar-btn" (click)="rotateLeft()" aria-label="Rotate Left" [innerHTML]="icons.rotateLeft">
+            </button>
+            <button class="toolbar-btn" (click)="rotateRight()" aria-label="Rotate Right" [innerHTML]="icons.rotateRight">
+            </button>
+          }
+          <!-- Zoom -->
+          @if (toolbarConfig().showZoom) {
+            <button class="toolbar-btn" (click)="zoomOut()" aria-label="Zoom Out" [innerHTML]="icons.zoomOut">
+            </button>
+            <button class="toolbar-btn" (click)="zoomIn()" aria-label="Zoom In" [innerHTML]="icons.zoomIn">
+            </button>
+          }
+        </div>
+        }
+      }
+      
+      <!-- Thumbnails -->
+      @if (images() && images()!.length > 1 && showThumbnails()) {
+        <div class="thumbnail-strip" (click)="$event.stopPropagation()">
+            @for (img of images(); track img; let i = $index) {
+                <div 
+                    #thumbRef
+                    class="thumbnail-item" 
+                    [class.active]="i === currentIndex()"
+                    (click)="jumpTo(i)"
+                >
+                    <img [src]="img" loading="lazy" alt="Thumbnail">
+                </div>
+            }
         </div>
       }
     </div>
-  `, isInline: true, styles: [":host{display:block}.overlay{position:fixed;inset:0;z-index:50;display:flex;align-items:center;justify-content:center;background-color:#000000f2;overflow:hidden;-webkit-user-select:none;user-select:none;font-family:ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif}.loader,.error{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;color:#fffc;font-size:16px}.image-container{position:absolute;inset:0;width:100%;height:100%;margin:0;padding:0;box-sizing:border-box;display:flex;align-items:center;justify-content:center;touch-action:none}.preview-image{width:auto;height:auto;max-width:100%;max-height:100%;margin:auto;object-fit:contain;pointer-events:auto;will-change:transform;transform-origin:center center;transition:transform .1s ease-out;touch-action:none}.preview-image.dragging{cursor:move;transition:none}.preview-image.zoom-in{cursor:zoom-in}.preview-image.zoom-out{cursor:grab}.toolbar{position:absolute;bottom:30px;left:50%;transform:translate(-50%);display:flex;gap:16px;background-color:#ffffff1a;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);padding:10px 20px;border-radius:24px;pointer-events:auto;z-index:60}.toolbar-btn{background:none;border:none;color:#fff;cursor:pointer;padding:8px;border-radius:50%;display:flex;align-items:center;justify-content:center;transition:background-color .2s}.toolbar-btn:hover{background-color:#fff3}.toolbar-btn:focus-visible{outline:2px solid white;outline-offset:2px}.toolbar-btn svg{width:24px;height:24px;fill:currentColor}.close-btn{position:absolute;top:20px;right:20px;z-index:60;background:none;border:none;color:#fff;cursor:pointer;padding:8px;border-radius:50%;background-color:#00000080;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}.close-btn svg{width:24px;height:24px;fill:currentColor}.close-btn:hover{background:#fff3;transform:rotate(90deg)}.nav-btn{position:absolute;top:50%;transform:translateY(-50%);width:48px;height:48px;border-radius:50%;background:#ffffff1a;border:none;color:#fff;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .2s;z-index:10}.nav-btn:hover{background:#fff3}.nav-btn.prev{left:20px}.nav-btn.next{right:20px}.nav-btn svg{width:32px;height:32px;fill:currentColor;filter:drop-shadow(0 2px 4px rgba(0,0,0,.5))}.counter{position:absolute;top:20px;left:50%;transform:translate(-50%);color:#fffc;font-size:14px;background:#0000004d;padding:4px 12px;border-radius:12px;pointer-events:none;z-index:10}.hidden{display:none}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], animations: [
+  `, isInline: true, styles: [":host{display:block;--ng-img-background: rgba(0, 0, 0, .95);--ng-img-text-color: rgba(255, 255, 255, .8);--ng-img-z-index: 50;--ng-img-toolbar-bg: rgba(255, 255, 255, .1);--ng-img-toolbar-hover: rgba(255, 255, 255, .2);--ng-img-gap: 16px;--ng-img-item-bg: rgba(0, 0, 0, .3);--ng-img-thumb-strip-bg: rgba(0, 0, 0, .4);--ng-img-thumb-width: 60px;--ng-img-thumb-height: 40px;--ng-img-thumb-gap: 8px;--ng-img-thumb-border-radius: 6px;--ng-img-thumb-active-border: white}.overlay{position:fixed;inset:0;z-index:var(--ng-img-z-index);display:flex;align-items:center;justify-content:center;background-color:var(--ng-img-background);overflow:hidden;-webkit-user-select:none;user-select:none;font-family:ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;touch-action:none}.loader,.error{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;color:var(--ng-img-text-color);font-size:16px}.image-container{position:absolute;inset:0;width:100%;height:100%;margin:0;padding:0;box-sizing:border-box;display:flex;align-items:center;justify-content:center;touch-action:none}.preview-image{position:absolute;top:0;left:0;width:100%;height:100%;margin:auto;object-fit:contain;pointer-events:auto;will-change:transform;transform-origin:center center;transition:transform .3s cubic-bezier(.2,0,.2,1);touch-action:none}.preview-image.dragging,.preview-image.inertia,.preview-image.pinching{cursor:move;transition:none}.preview-image.zoom-in{cursor:zoom-in}.preview-image.zoom-out{cursor:grab}.toolbar{position:absolute;bottom:30px;left:50%;transform:translate(-50%);display:flex;gap:var(--ng-img-gap);background-color:var(--ng-img-toolbar-bg);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);padding:10px 20px;border-radius:24px;pointer-events:auto;z-index:calc(var(--ng-img-z-index) + 10)}.toolbar-btn{background:none;border:none;color:#fff;cursor:pointer;padding:8px;border-radius:50%;display:flex;align-items:center;justify-content:center;transition:background-color .2s}.toolbar-btn:hover{background-color:var(--ng-img-toolbar-hover)}.toolbar-btn:focus-visible{outline:2px solid white;outline-offset:2px}.toolbar-btn ::ng-deep svg{width:24px;height:24px;fill:currentColor}.close-btn{position:absolute;top:20px;right:20px;z-index:calc(var(--ng-img-z-index) + 10);background:none;border:none;color:#fff;cursor:pointer;padding:8px;border-radius:50%;background-color:#00000080;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}.close-btn ::ng-deep svg{width:24px;height:24px;fill:currentColor}.close-btn:hover{background:var(--ng-img-toolbar-hover);transform:rotate(90deg)}.nav-btn{position:absolute;top:50%;transform:translateY(-50%);width:48px;height:48px;border-radius:50%;background:var(--ng-img-toolbar-bg);border:none;color:#fff;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .2s;z-index:10}.nav-btn:hover{background:var(--ng-img-toolbar-hover)}.nav-btn.prev{left:20px}.nav-btn.next{right:20px}.nav-btn ::ng-deep svg{width:32px;height:32px;fill:currentColor;filter:drop-shadow(0 2px 4px rgba(0,0,0,.5))}.counter{position:absolute;top:20px;left:50%;transform:translate(-50%);color:var(--ng-img-text-color);font-size:14px;background:var(--ng-img-item-bg);padding:4px 12px;border-radius:12px;pointer-events:none;z-index:10}.hidden{display:none}.thumbnail-strip{position:absolute;bottom:100px;left:50%;transform:translate(-50%);display:inline-block;white-space:nowrap;max-width:90%;width:auto;overflow-x:auto;overflow-y:hidden;padding:8px;background:var(--ng-img-thumb-strip-bg);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);border-radius:12px;scroll-behavior:smooth;scrollbar-width:none;z-index:55;font-size:0}.thumbnail-strip::-webkit-scrollbar{display:none}.thumbnail-item{display:inline-block;vertical-align:middle;width:var(--ng-img-thumb-width);height:var(--ng-img-thumb-height);margin-right:var(--ng-img-thumb-gap);border-radius:var(--ng-img-thumb-border-radius);overflow:hidden;cursor:pointer;opacity:.6;transition:all .2s;border:2px solid transparent;box-sizing:border-box}.thumbnail-item:last-child{margin-right:0}.thumbnail-item:hover{opacity:.8}.thumbnail-item.active{opacity:1;border-color:var(--ng-img-thumb-active-border);transform:scale(1.1)}.thumbnail-item img{width:100%;height:100%;object-fit:cover}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], animations: [
             trigger('fadeInOut', [
                 transition(':enter', [
                     style({ opacity: 0 }),
@@ -718,6 +1095,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.7", ngImpor
       tabindex="0"
       role="button"
       aria-label="Close preview overlay"
+      [style.background-color]="overlayBackground()"
     >
       <!-- Custom Template Support -->
       @if (customTemplate(); as template) {
@@ -726,7 +1104,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.7", ngImpor
         ></ng-container>
       } @else {
         <!-- Loading -->
-        @if (isLoading()) {
+        @if (!loadedImages().has(src()) && !hasError()) {
           <div class="loader">Loading...</div>
         }
 
@@ -742,27 +1120,32 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.7", ngImpor
           (touchstart)="onTouchStart($event)"
           tabindex="-1"
         >
-          <img
-            #imgRef
-            [src]="activeSrc()"
-            [class.opacity-0]="isLoading() || hasError()"
-            class="preview-image"
-            [class.dragging]="isDragging()"
-            [class.zoom-in]="scale() === 1"
-            [class.zoom-out]="scale() > 1"
-            [style.transform]="transformStyle()"
-            (load)="onImageLoad()"
-            (error)="onImageError()"
-            (mousedown)="onMouseDown($event)"
-            (click)="$event.stopPropagation()"
-            draggable="false"
-            alt="Preview"
-          />
+          @for (item of activeBuffer(); track item.src) {
+            <img
+              #imgRef
+              [src]="item.src"
+              [srcset]="item.srcset || ''"
+              [class.opacity-0]="item.offset === 0 && (!loadedImages().has(item.src) || hasError())"
+              class="preview-image"
+              [class.dragging]="isDragging()"
+              [class.inertia]="isInertia()"
+              [class.pinching]="isPinching()"
+              [class.zoom-in]="scale() === 1"
+              [class.zoom-out]="scale() > 1"
+              [class.hidden]="item.offset !== 0 && scale() > 1"
+              [style.transform]="getTransform(item.offset)"
+              (load)="onImageLoad(item.src)"
+              (error)="onImageError(item.src)"
+              (mousedown)="onMouseDown($event)"
+              (click)="$event.stopPropagation()"
+              draggable="false"
+              alt="Preview"
+            />
+          }
         </div>
 
         <!-- Close Button -->
-        <button class="close-btn" (click)="close()" aria-label="Close preview">
-          <svg viewBox="0 0 24 24"><path d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"/></svg>
+        <button class="close-btn" (click)="close()" aria-label="Close preview" [innerHTML]="icons.close">
         </button>
 
         <!-- Navigation -->
@@ -774,8 +1157,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.7", ngImpor
               (click)="prev(); $event.stopPropagation()"
               (mousedown)="$event.stopPropagation()"
               aria-label="Previous image"
+              [innerHTML]="icons.prev"
             >
-              <svg viewBox="0 0 24 24"><path d="M15.41 7.41L14 6l-6 6 6 6 1.41-1.41L10.83 12z"/></svg>
             </button>
           }
           <!-- Check if not last -->
@@ -785,8 +1168,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.7", ngImpor
               (click)="next(); $event.stopPropagation()"
               (mousedown)="$event.stopPropagation()"
               aria-label="Next image"
+              [innerHTML]="icons.next"
             >
-              <svg viewBox="0 0 24 24"><path d="M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z"/></svg>
             </button>
           }
 
@@ -795,36 +1178,57 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.7", ngImpor
         }
 
         <!-- Toolbar -->
+        <!-- Toolbar -->
+        @if (showToolbar()) {
         <div
           class="toolbar"
           (click)="$event.stopPropagation()"
           (keydown)="onToolbarKey($event)"
           tabindex="0"
         >
-          <!-- Flip H -->
-          <button class="toolbar-btn" (click)="flipHorizontal()" aria-label="Flip Horizontal">
-            <svg viewBox="0 0 24 24"><path d="M15 21h2v-2h-2v2zm4-12h2V7h-2v2zM3 5v14c0 1.1.9 2 2 2h4v-2H5V5h4V3H5c-1.1 0-2 .9-2 2zm16-2v2h2c0-1.1-.9-2-2-2zm-8 20h2V1h-2v22zm8-6h2v-2h-2v2zM15 5h2V3h-2v2zm4 8h2v-2h-2v2zm0 8c1.1 0 2-.9 2-2h-2v2z"/></svg>
-          </button>
-          <!-- Flip V -->
-          <button class="toolbar-btn" (click)="flipVertical()" aria-label="Flip Vertical">
-            <svg viewBox="0 0 24 24"><path d="M7 21h2v-2H7v2zM3 9h2V7H3v2zm12 12h2v-2h-2v2zm4-12h2V7h-2v2zm-4 4h2v-4h-2v4zm-8-8h2V3H7v2zm8 0h2V3h-2v2zm-4 8h4v-4h-4v4zM3 15h2v-2H3v2zm12-4h2v-4H3v4h2v-2h10v2zM7 3v2h2V3H7zm8 20h2v-2h-2v2zm-4 0h2v-2h-2v2zm4-12h2v-2h-2v2zM3 19c0 1.1.9 2 2 2h2v-2H5v-2H3v2zm16-6h2v-2h-2v2zm0 4v2c0 1.1-.9 2-2 2h-2v-2h2v-2h2zM5 3c-1.1 0-2 .9-2 2h2V3z"/></svg>
-          </button>
-          <!-- Rotate Left -->
-          <button class="toolbar-btn" (click)="rotateLeft()" aria-label="Rotate Left">
-            <svg viewBox="0 0 24 24"><path d="M7.11 8.53L5.7 7.11C4.8 8.27 4.24 9.61 4.07 11h2.02c.14-.87.49-1.72 1.02-2.47zM6.09 13H4.07c.17 1.39.72 2.73 1.62 3.89l1.41-1.42c-.52-.75-.87-1.59-1.01-2.47zm1.01 5.32c1.16.9 2.51 1.44 3.9 1.61V17.9c-.87-.15-1.71-.49-2.46-1.03L7.1 18.32zM13 4.07V1L8.45 5.55 13 10V6.09c2.84.48 5 2.94 5 5.91s-2.16 5.43-5 5.91v2.02c3.95-.49 7-3.85 7-7.93s-3.05-7.44-7-7.93z"/></svg>
-          </button>
-          <!-- Rotate Right -->
-          <button class="toolbar-btn" (click)="rotateRight()" aria-label="Rotate Right">
-            <svg viewBox="0 0 24 24"><path d="M15.55 5.55L11 1v3.07C7.06 4.56 4 7.92 4 12s3.05 7.44 7 7.93v-2.02c-2.84-.48-5-2.94-5-5.91s2.16-5.43 5-5.91V10l4.55-4.45zM19.93 11c-.17-1.39-.72-2.73-1.62-3.89l-1.42 1.42c.54.75.88 1.6 1.02 2.47h2.02zM13 17.9v2.02c1.39-.17 2.74-.71 3.9-1.61l-1.44-1.44c-.75.54-1.59.89-2.46 1.03zm3.89-2.42l1.42 1.41c.9-1.16 1.45-2.5 1.62-3.89h-2.02c-.14.87-.48 1.72-1.02 2.48z"/></svg>
-          </button>
-          <!-- Zoom Out -->
-          <button class="toolbar-btn" (click)="zoomOut()" aria-label="Zoom Out">
-             <svg viewBox="0 0 24 24"><path d="M19 13H5v-2h14v2z"/></svg>
-          </button>
-          <!-- Zoom In -->
-          <button class="toolbar-btn" (click)="zoomIn()" aria-label="Zoom In">
-             <svg viewBox="0 0 24 24"><path d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z"/></svg>
-          </button>
+          <!-- Flip -->
+          @if (toolbarConfig().showFlip) {
+            <button class="toolbar-btn" (click)="flipHorizontal()" aria-label="Flip Horizontal" [innerHTML]="icons.flipH">
+            </button>
+            <button class="toolbar-btn" (click)="flipVertical()" aria-label="Flip Vertical" [innerHTML]="icons.flipV">
+            </button>
+          }
+          
+          <!-- Extensions (Custom Buttons) -->
+          @if (toolbarExtensions()) {
+            <ng-container *ngTemplateOutlet="toolbarExtensions(); context: { $implicit: images()![currentIndex()] }"></ng-container>
+          }
+          <!-- Rotate -->
+          @if (toolbarConfig().showRotate) {
+            <button class="toolbar-btn" (click)="rotateLeft()" aria-label="Rotate Left" [innerHTML]="icons.rotateLeft">
+            </button>
+            <button class="toolbar-btn" (click)="rotateRight()" aria-label="Rotate Right" [innerHTML]="icons.rotateRight">
+            </button>
+          }
+          <!-- Zoom -->
+          @if (toolbarConfig().showZoom) {
+            <button class="toolbar-btn" (click)="zoomOut()" aria-label="Zoom Out" [innerHTML]="icons.zoomOut">
+            </button>
+            <button class="toolbar-btn" (click)="zoomIn()" aria-label="Zoom In" [innerHTML]="icons.zoomIn">
+            </button>
+          }
+        </div>
+        }
+      }
+      
+      <!-- Thumbnails -->
+      @if (images() && images()!.length > 1 && showThumbnails()) {
+        <div class="thumbnail-strip" (click)="$event.stopPropagation()">
+            @for (img of images(); track img; let i = $index) {
+                <div 
+                    #thumbRef
+                    class="thumbnail-item" 
+                    [class.active]="i === currentIndex()"
+                    (click)="jumpTo(i)"
+                >
+                    <img [src]="img" loading="lazy" alt="Thumbnail">
+                </div>
+            }
         </div>
       }
     </div>
@@ -843,8 +1247,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.7", ngImpor
                         '(document:keydown.arrowleft)': 'prev()',
                         '(document:keydown.arrowright)': 'next()',
                         '(document:keydown.escape)': 'close()',
-                    }, styles: [":host{display:block}.overlay{position:fixed;inset:0;z-index:50;display:flex;align-items:center;justify-content:center;background-color:#000000f2;overflow:hidden;-webkit-user-select:none;user-select:none;font-family:ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif}.loader,.error{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;color:#fffc;font-size:16px}.image-container{position:absolute;inset:0;width:100%;height:100%;margin:0;padding:0;box-sizing:border-box;display:flex;align-items:center;justify-content:center;touch-action:none}.preview-image{width:auto;height:auto;max-width:100%;max-height:100%;margin:auto;object-fit:contain;pointer-events:auto;will-change:transform;transform-origin:center center;transition:transform .1s ease-out;touch-action:none}.preview-image.dragging{cursor:move;transition:none}.preview-image.zoom-in{cursor:zoom-in}.preview-image.zoom-out{cursor:grab}.toolbar{position:absolute;bottom:30px;left:50%;transform:translate(-50%);display:flex;gap:16px;background-color:#ffffff1a;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);padding:10px 20px;border-radius:24px;pointer-events:auto;z-index:60}.toolbar-btn{background:none;border:none;color:#fff;cursor:pointer;padding:8px;border-radius:50%;display:flex;align-items:center;justify-content:center;transition:background-color .2s}.toolbar-btn:hover{background-color:#fff3}.toolbar-btn:focus-visible{outline:2px solid white;outline-offset:2px}.toolbar-btn svg{width:24px;height:24px;fill:currentColor}.close-btn{position:absolute;top:20px;right:20px;z-index:60;background:none;border:none;color:#fff;cursor:pointer;padding:8px;border-radius:50%;background-color:#00000080;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}.close-btn svg{width:24px;height:24px;fill:currentColor}.close-btn:hover{background:#fff3;transform:rotate(90deg)}.nav-btn{position:absolute;top:50%;transform:translateY(-50%);width:48px;height:48px;border-radius:50%;background:#ffffff1a;border:none;color:#fff;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .2s;z-index:10}.nav-btn:hover{background:#fff3}.nav-btn.prev{left:20px}.nav-btn.next{right:20px}.nav-btn svg{width:32px;height:32px;fill:currentColor;filter:drop-shadow(0 2px 4px rgba(0,0,0,.5))}.counter{position:absolute;top:20px;left:50%;transform:translate(-50%);color:#fffc;font-size:14px;background:#0000004d;padding:4px 12px;border-radius:12px;pointer-events:none;z-index:10}.hidden{display:none}\n"] }]
-        }], ctorParameters: () => [], propDecorators: { src: [{ type: i0.Input, args: [{ isSignal: true, alias: "src", required: true }] }], images: [{ type: i0.Input, args: [{ isSignal: true, alias: "images", required: false }] }], initialIndex: [{ type: i0.Input, args: [{ isSignal: true, alias: "initialIndex", required: false }] }], customTemplate: [{ type: i0.Input, args: [{ isSignal: true, alias: "customTemplate", required: false }] }], imgRef: [{ type: i0.ViewChild, args: ['imgRef', { isSignal: true }] }], onEscape: [{
+                    }, styles: [":host{display:block;--ng-img-background: rgba(0, 0, 0, .95);--ng-img-text-color: rgba(255, 255, 255, .8);--ng-img-z-index: 50;--ng-img-toolbar-bg: rgba(255, 255, 255, .1);--ng-img-toolbar-hover: rgba(255, 255, 255, .2);--ng-img-gap: 16px;--ng-img-item-bg: rgba(0, 0, 0, .3);--ng-img-thumb-strip-bg: rgba(0, 0, 0, .4);--ng-img-thumb-width: 60px;--ng-img-thumb-height: 40px;--ng-img-thumb-gap: 8px;--ng-img-thumb-border-radius: 6px;--ng-img-thumb-active-border: white}.overlay{position:fixed;inset:0;z-index:var(--ng-img-z-index);display:flex;align-items:center;justify-content:center;background-color:var(--ng-img-background);overflow:hidden;-webkit-user-select:none;user-select:none;font-family:ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;touch-action:none}.loader,.error{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;color:var(--ng-img-text-color);font-size:16px}.image-container{position:absolute;inset:0;width:100%;height:100%;margin:0;padding:0;box-sizing:border-box;display:flex;align-items:center;justify-content:center;touch-action:none}.preview-image{position:absolute;top:0;left:0;width:100%;height:100%;margin:auto;object-fit:contain;pointer-events:auto;will-change:transform;transform-origin:center center;transition:transform .3s cubic-bezier(.2,0,.2,1);touch-action:none}.preview-image.dragging,.preview-image.inertia,.preview-image.pinching{cursor:move;transition:none}.preview-image.zoom-in{cursor:zoom-in}.preview-image.zoom-out{cursor:grab}.toolbar{position:absolute;bottom:30px;left:50%;transform:translate(-50%);display:flex;gap:var(--ng-img-gap);background-color:var(--ng-img-toolbar-bg);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);padding:10px 20px;border-radius:24px;pointer-events:auto;z-index:calc(var(--ng-img-z-index) + 10)}.toolbar-btn{background:none;border:none;color:#fff;cursor:pointer;padding:8px;border-radius:50%;display:flex;align-items:center;justify-content:center;transition:background-color .2s}.toolbar-btn:hover{background-color:var(--ng-img-toolbar-hover)}.toolbar-btn:focus-visible{outline:2px solid white;outline-offset:2px}.toolbar-btn ::ng-deep svg{width:24px;height:24px;fill:currentColor}.close-btn{position:absolute;top:20px;right:20px;z-index:calc(var(--ng-img-z-index) + 10);background:none;border:none;color:#fff;cursor:pointer;padding:8px;border-radius:50%;background-color:#00000080;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}.close-btn ::ng-deep svg{width:24px;height:24px;fill:currentColor}.close-btn:hover{background:var(--ng-img-toolbar-hover);transform:rotate(90deg)}.nav-btn{position:absolute;top:50%;transform:translateY(-50%);width:48px;height:48px;border-radius:50%;background:var(--ng-img-toolbar-bg);border:none;color:#fff;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .2s;z-index:10}.nav-btn:hover{background:var(--ng-img-toolbar-hover)}.nav-btn.prev{left:20px}.nav-btn.next{right:20px}.nav-btn ::ng-deep svg{width:32px;height:32px;fill:currentColor;filter:drop-shadow(0 2px 4px rgba(0,0,0,.5))}.counter{position:absolute;top:20px;left:50%;transform:translate(-50%);color:var(--ng-img-text-color);font-size:14px;background:var(--ng-img-item-bg);padding:4px 12px;border-radius:12px;pointer-events:none;z-index:10}.hidden{display:none}.thumbnail-strip{position:absolute;bottom:100px;left:50%;transform:translate(-50%);display:inline-block;white-space:nowrap;max-width:90%;width:auto;overflow-x:auto;overflow-y:hidden;padding:8px;background:var(--ng-img-thumb-strip-bg);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);border-radius:12px;scroll-behavior:smooth;scrollbar-width:none;z-index:55;font-size:0}.thumbnail-strip::-webkit-scrollbar{display:none}.thumbnail-item{display:inline-block;vertical-align:middle;width:var(--ng-img-thumb-width);height:var(--ng-img-thumb-height);margin-right:var(--ng-img-thumb-gap);border-radius:var(--ng-img-thumb-border-radius);overflow:hidden;cursor:pointer;opacity:.6;transition:all .2s;border:2px solid transparent;box-sizing:border-box}.thumbnail-item:last-child{margin-right:0}.thumbnail-item:hover{opacity:.8}.thumbnail-item.active{opacity:1;border-color:var(--ng-img-thumb-active-border);transform:scale(1.1)}.thumbnail-item img{width:100%;height:100%;object-fit:cover}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { src: [{ type: i0.Input, args: [{ isSignal: true, alias: "src", required: true }] }], images: [{ type: i0.Input, args: [{ isSignal: true, alias: "images", required: false }] }], srcset: [{ type: i0.Input, args: [{ isSignal: true, alias: "srcset", required: false }] }], srcsets: [{ type: i0.Input, args: [{ isSignal: true, alias: "srcsets", required: false }] }], initialIndex: [{ type: i0.Input, args: [{ isSignal: true, alias: "initialIndex", required: false }] }], openerRect: [{ type: i0.Input, args: [{ isSignal: true, alias: "openerRect", required: false }] }], customTemplate: [{ type: i0.Input, args: [{ isSignal: true, alias: "customTemplate", required: false }] }], toolbarConfig: [{ type: i0.Input, args: [{ isSignal: true, alias: "toolbarConfig", required: false }] }], imgRefs: [{ type: i0.ViewChildren, args: ['imgRef', { isSignal: true }] }], thumbRefs: [{ type: i0.ViewChildren, args: ['thumbRef', { isSignal: true }] }], showThumbnails: [{ type: i0.Input, args: [{ isSignal: true, alias: "showThumbnails", required: false }] }], showToolbar: [{ type: i0.Input, args: [{ isSignal: true, alias: "showToolbar", required: false }] }], toolbarExtensions: [{ type: i0.Input, args: [{ isSignal: true, alias: "toolbarExtensions", required: false }] }], onEscape: [{
                 type: HostListener,
                 args: ['document:keydown.escape']
             }], onMouseMove: [{
@@ -852,10 +1256,62 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.7", ngImpor
                 args: ['document:mousemove', ['$event']]
             }] } });
 
+/**
+ * Directive to open the image preview.
+ * Can be used on any element, but auto-detects `src` on `img` or nested `img`.
+ */
 class ImagesPreviewDirective {
+    /**
+     * High resolution image source to display in preview.
+     * If empty, tries to read `src` from host element or first child `img`.
+     */
     highResSrc = '';
+    /**
+     * List of images for gallery navigation.
+     * If provided, enables previous/next navigation buttons.
+     */
     previewImages = [];
+    /**
+     * Custom template to use for the preview.
+     * If provided, overrides the default viewer UI.
+     */
     previewTemplate;
+    /**
+     * Configuration for the toolbar buttons.
+     */
+    toolbarConfig;
+    /**
+     * Optional srcset for the single image.
+     */
+    srcset;
+    /**
+     * List of srcsets corresponding to the `previewImages` array.
+     */
+    /**
+     * List of srcsets corresponding to the `previewImages` array.
+     */
+    srcsets;
+    /**
+     * Whether to show the thumbnail strip.
+     * @default true
+     */
+    showThumbnails = true;
+    /**
+     * Whether to show the toolbar.
+     * @default true
+     */
+    showToolbar = true;
+    /**
+     * Custom template to render in the toolbar (e.g. for download buttons).
+     */
+    toolbarExtensions = null;
+    /**
+     * Type guard helper for strict template type checking.
+     * Allows Angular Language Service to infer types in `previewTemplate`.
+     */
+    static ngTemplateContextGuard(directive, context) {
+        return true;
+    }
     componentRef = null;
     appRef = inject(ApplicationRef);
     injector = inject(EnvironmentInjector);
@@ -878,11 +1334,12 @@ class ImagesPreviewDirective {
         }
         src = src || '';
         if (src) {
-            this.openPreview(src);
+            const rect = hostEl.getBoundingClientRect();
+            this.openPreview(src, rect);
         }
     }
     cursor = 'pointer';
-    openPreview(src) {
+    openPreview(src, rect) {
         if (!isPlatformBrowser(this.platformId))
             return;
         // Create Component
@@ -891,6 +1348,7 @@ class ImagesPreviewDirective {
         });
         // Set Inputs
         this.componentRef.setInput('src', src);
+        this.componentRef.setInput('openerRect', rect);
         if (this.previewImages.length > 0) {
             this.componentRef.setInput('images', this.previewImages);
             const index = this.previewImages.indexOf(src);
@@ -899,6 +1357,18 @@ class ImagesPreviewDirective {
         if (this.previewTemplate) {
             this.componentRef.setInput('customTemplate', this.previewTemplate);
         }
+        if (this.toolbarConfig) {
+            this.componentRef.setInput('toolbarConfig', this.toolbarConfig);
+        }
+        if (this.srcset) {
+            this.componentRef.setInput('srcset', this.srcset);
+        }
+        if (this.srcsets) {
+            this.componentRef.setInput('srcsets', this.srcsets);
+        }
+        this.componentRef.setInput('showThumbnails', this.showThumbnails);
+        this.componentRef.setInput('showToolbar', this.showToolbar);
+        this.componentRef.setInput('toolbarExtensions', this.toolbarExtensions);
         // Set Callbacks
         this.componentRef.instance.closeCallback = () => this.destroyPreview();
         // Attach to App
@@ -918,7 +1388,7 @@ class ImagesPreviewDirective {
         this.destroyPreview();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.7", ngImport: i0, type: ImagesPreviewDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.0.7", type: ImagesPreviewDirective, isStandalone: true, selector: "[ngImagesPreview]", inputs: { highResSrc: ["ngImagesPreview", "highResSrc"], previewImages: "previewImages", previewTemplate: "previewTemplate" }, host: { listeners: { "click": "onClick($event)", "style.cursor": "cursor()" } }, ngImport: i0 });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.0.7", type: ImagesPreviewDirective, isStandalone: true, selector: "[ngImagesPreview]", inputs: { highResSrc: ["ngImagesPreview", "highResSrc"], previewImages: "previewImages", previewTemplate: "previewTemplate", toolbarConfig: "toolbarConfig", srcset: "srcset", srcsets: "srcsets", showThumbnails: "showThumbnails", showToolbar: "showToolbar", toolbarExtensions: "toolbarExtensions" }, host: { listeners: { "click": "onClick($event)", "style.cursor": "cursor()" } }, ngImport: i0 });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.7", ngImport: i0, type: ImagesPreviewDirective, decorators: [{
             type: Directive,
@@ -933,6 +1403,18 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.7", ngImpor
                 type: Input
             }], previewTemplate: [{
                 type: Input
+            }], toolbarConfig: [{
+                type: Input
+            }], srcset: [{
+                type: Input
+            }], srcsets: [{
+                type: Input
+            }], showThumbnails: [{
+                type: Input
+            }], showToolbar: [{
+                type: Input
+            }], toolbarExtensions: [{
+                type: Input
             }], onClick: [{
                 type: HostListener,
                 args: ['click', ['$event']]
@@ -941,6 +1423,19 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.7", ngImpor
                 args: ['style.cursor']
             }] } });
 
+class NgImagesPreviewModule {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.7", ngImport: i0, type: NgImagesPreviewModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.0.7", ngImport: i0, type: NgImagesPreviewModule, imports: [ImagesPreviewComponent, ImagesPreviewDirective], exports: [ImagesPreviewComponent, ImagesPreviewDirective] });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.0.7", ngImport: i0, type: NgImagesPreviewModule, imports: [ImagesPreviewComponent] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.7", ngImport: i0, type: NgImagesPreviewModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    imports: [ImagesPreviewComponent, ImagesPreviewDirective],
+                    exports: [ImagesPreviewComponent, ImagesPreviewDirective]
+                }]
+        }] });
+
 /*
  * Public API Surface of ng-images-preview
  */
@@ -949,5 +1444,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.7", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { ImagesPreviewComponent, ImagesPreviewDirective };
+export { ImagesPreviewComponent, ImagesPreviewDirective, NgImagesPreviewModule };
 //# sourceMappingURL=ng-images-preview.mjs.map