@memberjunction/ng-conversations 6.2.0-edge.0 → 6.2.0-edge.1

package/dist/lib/components/attachment/image-viewer.component.d.ts

@@ -6,21 +6,69 @@ import * as i0 from "@angular/core";
  */
 export declare class ImageViewerComponent implements OnInit, OnDestroy {
     /** Image source URL (can be data URL or regular URL) */
-    imageUrl: string;
+    ImageUrl: string;
+    /** @deprecated Use {@link ImageUrl}. */
+    set imageUrl(value: string);
+    /** @deprecated Use {@link ImageUrl}. */
+    get imageUrl(): string;
     /** Image alt text */
-    alt: string;
+    Alt: string;
+    /** @deprecated Use {@link Alt}. */
+    set alt(value: string);
+    /** @deprecated Use {@link Alt}. */
+    get alt(): string;
     /** Image filename for download */
-    fileName: string;
+    FileName: string;
+    /** @deprecated Use {@link FileName}. */
+    set fileName(value: string);
+    /** @deprecated Use {@link FileName}. */
+    get fileName(): string;
     /** Whether the viewer is visible */
-    visible: boolean;
+    Visible: boolean;
+    /** @deprecated Use {@link Visible}. */
+    set visible(value: boolean);
+    /** @deprecated Use {@link Visible}. */
+    get visible(): boolean;
     /** Emits when the viewer should be closed */
+    Closed: EventEmitter<void>;
+    /**
+     * @deprecated Use {@link Closed}.
+     *
+     * The same emitter under the old binding name, so a template still binding
+     * (closed) keeps working. Must stay AFTER Closed: class fields
+     * initialise in order, and the other way round this captures undefined.
+     */
     closed: EventEmitter<void>;
-    zoomLevel: number;
-    minZoom: number;
-    maxZoom: number;
-    translateX: number;
-    translateY: number;
-    isDragging: boolean;
+    ZoomLevel: number;
+    /** @deprecated Use {@link ZoomLevel}. */
+    get zoomLevel(): number;
+    /** @deprecated Use {@link ZoomLevel}. */
+    set zoomLevel(value: number);
+    MinZoom: number;
+    /** @deprecated Use {@link MinZoom}. */
+    get minZoom(): number;
+    /** @deprecated Use {@link MinZoom}. */
+    set minZoom(value: number);
+    MaxZoom: number;
+    /** @deprecated Use {@link MaxZoom}. */
+    get maxZoom(): number;
+    /** @deprecated Use {@link MaxZoom}. */
+    set maxZoom(value: number);
+    TranslateX: number;
+    /** @deprecated Use {@link TranslateX}. */
+    get translateX(): number;
+    /** @deprecated Use {@link TranslateX}. */
+    set translateX(value: number);
+    TranslateY: number;
+    /** @deprecated Use {@link TranslateY}. */
+    get translateY(): number;
+    /** @deprecated Use {@link TranslateY}. */
+    set translateY(value: number);
+    IsDragging: boolean;
+    /** @deprecated Use {@link IsDragging}. */
+    get isDragging(): boolean;
+    /** @deprecated Use {@link IsDragging}. */
+    set isDragging(value: boolean);
     private lastMouseX;
     private lastMouseY;
     ngOnInit(): void;
@@ -40,22 +88,32 @@ export declare class ImageViewerComponent implements OnInit, OnDestroy {
     /**
      * Handle backdrop click
      */
+    OnBackdropClick(event: MouseEvent): void;
+    /** @deprecated Use {@link OnBackdropClick}. */
     onBackdropClick(event: MouseEvent): void;
     /**
      * Zoom in
      */
+    ZoomIn(): void;
+    /** @deprecated Use {@link ZoomIn}. */
     zoomIn(): void;
     /**
      * Zoom out
      */
+    ZoomOut(): void;
+    /** @deprecated Use {@link ZoomOut}. */
     zoomOut(): void;
     /**
      * Reset to 100% zoom
      */
+    ResetZoom(): void;
+    /** @deprecated Use {@link ResetZoom}. */
     resetZoom(): void;
     /**
      * Fit image to screen
      */
+    FitToScreen(): void;
+    /** @deprecated Use {@link FitToScreen}. */
     fitToScreen(): void;
     /**
      * Reset view to initial state
@@ -68,6 +126,8 @@ export declare class ImageViewerComponent implements OnInit, OnDestroy {
     /**
      * Handle mouse down for dragging
      */
+    OnMouseDown(event: MouseEvent): void;
+    /** @deprecated Use {@link OnMouseDown}. */
     onMouseDown(event: MouseEvent): void;
     /**
      * Handle mouse move for dragging
@@ -80,16 +140,22 @@ export declare class ImageViewerComponent implements OnInit, OnDestroy {
     /**
      * Download the image
      */
+    DownloadImage(): void;
+    /** @deprecated Use {@link DownloadImage}. */
     downloadImage(): void;
     /**
      * Get current zoom percentage for display
      */
+    get ZoomPercentage(): string;
+    /** @deprecated Use {@link ZoomPercentage}. */
     get zoomPercentage(): string;
     /**
      * Get transform style for image
      */
+    get ImageTransform(): string;
+    /** @deprecated Use {@link ImageTransform}. */
     get imageTransform(): string;
     static ɵfac: i0.ɵɵFactoryDeclaration<ImageViewerComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<ImageViewerComponent, "mj-image-viewer", never, { "imageUrl": { "alias": "imageUrl"; "required": false; }; "alt": { "alias": "alt"; "required": false; }; "fileName": { "alias": "fileName"; "required": false; }; "visible": { "alias": "visible"; "required": false; }; }, { "closed": "closed"; }, never, never, false, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<ImageViewerComponent, "mj-image-viewer", never, { "ImageUrl": { "alias": "ImageUrl"; "required": false; }; "imageUrl": { "alias": "imageUrl"; "required": false; }; "Alt": { "alias": "Alt"; "required": false; }; "alt": { "alias": "alt"; "required": false; }; "FileName": { "alias": "FileName"; "required": false; }; "fileName": { "alias": "fileName"; "required": false; }; "Visible": { "alias": "Visible"; "required": false; }; "visible": { "alias": "visible"; "required": false; }; }, { "Closed": "Closed"; "closed": "closed"; }, never, never, false, never>;
 }
 //# sourceMappingURL=image-viewer.component.d.ts.map

package/dist/lib/components/attachment/image-viewer.component.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"image-viewer.component.d.ts","sourceRoot":"","sources":["../../../../src/lib/components/attachment/image-viewer.component.ts"],"names":[],"mappings":"AAAA,OAAO,EAIL,YAAY,EAEZ,MAAM,EACN,SAAS,EACV,MAAM,eAAe,CAAC;;AAEvB;;;GAGG;AACH,qBAMa,oBAAqB,YAAW,MAAM,EAAE,SAAS;IAC5D,wDAAwD;IAC/C,QAAQ,EAAE,MAAM,CAAM;IAE/B,qBAAqB;IACZ,GAAG,EAAE,MAAM,CAAW;IAE/B,kCAAkC;IACzB,QAAQ,EAAE,MAAM,CAAW;IAEpC,oCAAoC;IAC3B,OAAO,EAAE,OAAO,CAAS;IAElC,6CAA6C;IACnC,MAAM,qBAA4B;IAGrC,SAAS,EAAE,MAAM,CAAK;IACtB,OAAO,EAAE,MAAM,CAAO;IACtB,OAAO,EAAE,MAAM,CAAK;IACpB,UAAU,EAAE,MAAM,CAAK;IACvB,UAAU,EAAE,MAAM,CAAK;IAGvB,UAAU,EAAE,OAAO,CAAS;IACnC,OAAO,CAAC,UAAU,CAAa;IAC/B,OAAO,CAAC,UAAU,CAAa;IAE/B,QAAQ,IAAI,IAAI;IAOhB,WAAW,IAAI,IAAI;IAKnB;;OAEG;IAEH,WAAW,IAAI,IAAI;IAMnB;;OAEG;IAEH,OAAO,CAAC,KAAK,EAAE,UAAU,GAAG,IAAI;IAQhC;;OAEG;IACH,KAAK,IAAI,IAAI;IAMb;;OAEG;IACH,eAAe,CAAC,KAAK,EAAE,UAAU,GAAG,IAAI;IAQxC;;OAEG;IACH,MAAM,IAAI,IAAI;IAId;;OAEG;IACH,OAAO,IAAI,IAAI;IAIf;;OAEG;IACH,SAAS,IAAI,IAAI;IAMjB;;OAEG;IACH,WAAW,IAAI,IAAI;IAKnB;;OAEG;IACH,OAAO,CAAC,SAAS;IAMjB;;OAEG;IACH,OAAO,CAAC,UAAU;IAoBlB;;OAEG;IACH,WAAW,CAAC,KAAK,EAAE,UAAU,GAAG,IAAI;IAUpC;;OAEG;IAEH,WAAW,CAAC,KAAK,EAAE,UAAU,GAAG,IAAI;IAapC;;OAEG;IAEH,SAAS,IAAI,IAAI;IAIjB;;OAEG;IACH,aAAa,IAAI,IAAI;IAOrB;;OAEG;IACH,IAAI,cAAc,IAAI,MAAM,CAE3B;IAED;;OAEG;IACH,IAAI,cAAc,IAAI,MAAM,CAE3B;yCA7MU,oBAAoB;2CAApB,oBAAoB;CA8MhC"}
+{"version":3,"file":"image-viewer.component.d.ts","sourceRoot":"","sources":["../../../../src/lib/components/attachment/image-viewer.component.ts"],"names":[],"mappings":"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"}

package/dist/lib/components/attachment/image-viewer.component.js

@@ -81,28 +81,116 @@ function ImageViewerComponent_Conditional_0_Template(rf, ctx) { if (rf & 1) {
  */
 export class ImageViewerComponent {
     /** Image source URL (can be data URL or regular URL) */
-    imageUrl = '';
+    ImageUrl = '';
+    /** @deprecated Use {@link ImageUrl}. */
+    set imageUrl(value) {
+        this.ImageUrl = value;
+    }
+    /** @deprecated Use {@link ImageUrl}. */
+    get imageUrl() {
+        return this.ImageUrl;
+    }
     /** Image alt text */
-    alt = 'Image';
+    Alt = 'Image';
+    /** @deprecated Use {@link Alt}. */
+    set alt(value) {
+        this.Alt = value;
+    }
+    /** @deprecated Use {@link Alt}. */
+    get alt() {
+        return this.Alt;
+    }
     /** Image filename for download */
-    fileName = 'image';
+    FileName = 'image';
+    /** @deprecated Use {@link FileName}. */
+    set fileName(value) {
+        this.FileName = value;
+    }
+    /** @deprecated Use {@link FileName}. */
+    get fileName() {
+        return this.FileName;
+    }
     /** Whether the viewer is visible */
-    visible = false;
+    Visible = false;
+    /** @deprecated Use {@link Visible}. */
+    set visible(value) {
+        this.Visible = value;
+    }
+    /** @deprecated Use {@link Visible}. */
+    get visible() {
+        return this.Visible;
+    }
     /** Emits when the viewer should be closed */
-    closed = new EventEmitter();
+    Closed = new EventEmitter();
+    /**
+     * @deprecated Use {@link Closed}.
+     *
+     * The same emitter under the old binding name, so a template still binding
+     * (closed) keeps working. Must stay AFTER Closed: class fields
+     * initialise in order, and the other way round this captures undefined.
+     */
+    closed = this.Closed;
     // Zoom and pan state
-    zoomLevel = 1;
-    minZoom = 0.1;
-    maxZoom = 5;
-    translateX = 0;
-    translateY = 0;
+    ZoomLevel = 1;
+    /** @deprecated Use {@link ZoomLevel}. */
+    get zoomLevel() {
+        return this.ZoomLevel;
+    }
+    /** @deprecated Use {@link ZoomLevel}. */
+    set zoomLevel(value) {
+        this.ZoomLevel = value;
+    }
+    MinZoom = 0.1;
+    /** @deprecated Use {@link MinZoom}. */
+    get minZoom() {
+        return this.MinZoom;
+    }
+    /** @deprecated Use {@link MinZoom}. */
+    set minZoom(value) {
+        this.MinZoom = value;
+    }
+    MaxZoom = 5;
+    /** @deprecated Use {@link MaxZoom}. */
+    get maxZoom() {
+        return this.MaxZoom;
+    }
+    /** @deprecated Use {@link MaxZoom}. */
+    set maxZoom(value) {
+        this.MaxZoom = value;
+    }
+    TranslateX = 0;
+    /** @deprecated Use {@link TranslateX}. */
+    get translateX() {
+        return this.TranslateX;
+    }
+    /** @deprecated Use {@link TranslateX}. */
+    set translateX(value) {
+        this.TranslateX = value;
+    }
+    TranslateY = 0;
+    /** @deprecated Use {@link TranslateY}. */
+    get translateY() {
+        return this.TranslateY;
+    }
+    /** @deprecated Use {@link TranslateY}. */
+    set translateY(value) {
+        this.TranslateY = value;
+    }
     // Drag state
-    isDragging = false;
+    IsDragging = false;
+    /** @deprecated Use {@link IsDragging}. */
+    get isDragging() {
+        return this.IsDragging;
+    }
+    /** @deprecated Use {@link IsDragging}. */
+    set isDragging(value) {
+        this.IsDragging = value;
+    }
     lastMouseX = 0;
     lastMouseY = 0;
     ngOnInit() {
         // Lock body scroll when viewer is open
-        if (this.visible) {
+        if (this.Visible) {
             document.body.style.overflow = 'hidden';
         }
     }
@@ -114,7 +202,7 @@ export class ImageViewerComponent {
      * Handle escape key to close
      */
     onEscapeKey() {
-        if (this.visible) {
+        if (this.Visible) {
             this.close();
         }
     }
@@ -122,7 +210,7 @@ export class ImageViewerComponent {
      * Handle mouse wheel for zoom
      */
     onWheel(event) {
-        if (!this.visible)
+        if (!this.Visible)
             return;
         event.preventDefault();
         const delta = event.deltaY > 0 ? -0.1 : 0.1;
@@ -134,95 +222,119 @@ export class ImageViewerComponent {
     close() {
         this.resetView();
         document.body.style.overflow = '';
-        this.closed.emit();
+        this.Closed.emit();
     }
     /**
      * Handle backdrop click
      */
-    onBackdropClick(event) {
+    OnBackdropClick(event) {
         // Only close if clicking directly on backdrop
         const target = event.target;
         if (target.classList.contains('image-viewer-backdrop')) {
             this.close();
         }
     }
+    /** @deprecated Use {@link OnBackdropClick}. */
+    onBackdropClick(event) {
+        return this.OnBackdropClick(event);
+    }
     /**
      * Zoom in
      */
-    zoomIn() {
+    ZoomIn() {
         this.adjustZoom(0.25);
     }
+    /** @deprecated Use {@link ZoomIn}. */
+    zoomIn() {
+        return this.ZoomIn();
+    }
     /**
      * Zoom out
      */
-    zoomOut() {
+    ZoomOut() {
         this.adjustZoom(-0.25);
     }
+    /** @deprecated Use {@link ZoomOut}. */
+    zoomOut() {
+        return this.ZoomOut();
+    }
     /**
      * Reset to 100% zoom
      */
+    ResetZoom() {
+        this.ZoomLevel = 1;
+        this.TranslateX = 0;
+        this.TranslateY = 0;
+    }
+    /** @deprecated Use {@link ResetZoom}. */
     resetZoom() {
-        this.zoomLevel = 1;
-        this.translateX = 0;
-        this.translateY = 0;
+        return this.ResetZoom();
     }
     /**
      * Fit image to screen
      */
-    fitToScreen() {
+    FitToScreen() {
         // Reset position and set zoom to 1 (CSS will handle fitting)
         this.resetView();
     }
+    /** @deprecated Use {@link FitToScreen}. */
+    fitToScreen() {
+        return this.FitToScreen();
+    }
     /**
      * Reset view to initial state
      */
     resetView() {
-        this.zoomLevel = 1;
-        this.translateX = 0;
-        this.translateY = 0;
+        this.ZoomLevel = 1;
+        this.TranslateX = 0;
+        this.TranslateY = 0;
     }
     /**
      * Adjust zoom level
      */
     adjustZoom(delta, centerX, centerY) {
-        const newZoom = Math.max(this.minZoom, Math.min(this.maxZoom, this.zoomLevel + delta));
-        if (centerX !== undefined && centerY !== undefined && newZoom !== this.zoomLevel) {
+        const newZoom = Math.max(this.MinZoom, Math.min(this.MaxZoom, this.ZoomLevel + delta));
+        if (centerX !== undefined && centerY !== undefined && newZoom !== this.ZoomLevel) {
             // Zoom towards mouse position
-            const factor = newZoom / this.zoomLevel;
+            const factor = newZoom / this.ZoomLevel;
             const imageContainer = document.querySelector('.image-container');
             if (imageContainer) {
                 const rect = imageContainer.getBoundingClientRect();
-                const offsetX = centerX - rect.left - rect.width / 2 - this.translateX;
-                const offsetY = centerY - rect.top - rect.height / 2 - this.translateY;
-                this.translateX = this.translateX - offsetX * (factor - 1);
-                this.translateY = this.translateY - offsetY * (factor - 1);
+                const offsetX = centerX - rect.left - rect.width / 2 - this.TranslateX;
+                const offsetY = centerY - rect.top - rect.height / 2 - this.TranslateY;
+                this.TranslateX = this.TranslateX - offsetX * (factor - 1);
+                this.TranslateY = this.TranslateY - offsetY * (factor - 1);
             }
         }
-        this.zoomLevel = newZoom;
+        this.ZoomLevel = newZoom;
     }
     /**
      * Handle mouse down for dragging
      */
-    onMouseDown(event) {
+    OnMouseDown(event) {
         if (event.button !== 0)
             return; // Only left click
-        if (this.zoomLevel <= 1)
+        if (this.ZoomLevel <= 1)
             return; // Only allow pan when zoomed in
-        this.isDragging = true;
+        this.IsDragging = true;
         this.lastMouseX = event.clientX;
         this.lastMouseY = event.clientY;
         event.preventDefault();
     }
+    /** @deprecated Use {@link OnMouseDown}. */
+    onMouseDown(event) {
+        return this.OnMouseDown(event);
+    }
     /**
      * Handle mouse move for dragging
      */
     onMouseMove(event) {
-        if (!this.isDragging)
+        if (!this.IsDragging)
             return;
         const deltaX = event.clientX - this.lastMouseX;
         const deltaY = event.clientY - this.lastMouseY;
-        this.translateX += deltaX;
-        this.translateY += deltaY;
+        this.TranslateX += deltaX;
+        this.TranslateY += deltaY;
         this.lastMouseX = event.clientX;
         this.lastMouseY = event.clientY;
     }
@@ -230,33 +342,45 @@ export class ImageViewerComponent {
      * Handle mouse up to stop dragging
      */
     onMouseUp() {
-        this.isDragging = false;
+        this.IsDragging = false;
     }
     /**
      * Download the image
      */
-    downloadImage() {
+    DownloadImage() {
         const link = document.createElement('a');
-        link.href = this.imageUrl;
-        link.download = this.fileName;
+        link.href = this.ImageUrl;
+        link.download = this.FileName;
         link.click();
     }
+    /** @deprecated Use {@link DownloadImage}. */
+    downloadImage() {
+        return this.DownloadImage();
+    }
     /**
      * Get current zoom percentage for display
      */
+    get ZoomPercentage() {
+        return Math.round(this.ZoomLevel * 100) + '%';
+    }
+    /** @deprecated Use {@link ZoomPercentage}. */
     get zoomPercentage() {
-        return Math.round(this.zoomLevel * 100) + '%';
+        return this.ZoomPercentage;
     }
     /**
      * Get transform style for image
      */
+    get ImageTransform() {
+        return `translate(${this.TranslateX}px, ${this.TranslateY}px) scale(${this.ZoomLevel})`;
+    }
+    /** @deprecated Use {@link ImageTransform}. */
     get imageTransform() {
-        return `translate(${this.translateX}px, ${this.translateY}px) scale(${this.zoomLevel})`;
+        return this.ImageTransform;
     }
     static ɵfac = function ImageViewerComponent_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || ImageViewerComponent)(); };
     static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: ImageViewerComponent, selectors: [["mj-image-viewer"]], hostBindings: function ImageViewerComponent_HostBindings(rf, ctx) { if (rf & 1) {
             i0.ɵɵlistener("keydown.escape", function ImageViewerComponent_keydown_escape_HostBindingHandler() { return ctx.onEscapeKey(); }, i0.ɵɵresolveDocument)("wheel", function ImageViewerComponent_wheel_HostBindingHandler($event) { return ctx.onWheel($event); })("mousemove", function ImageViewerComponent_mousemove_HostBindingHandler($event) { return ctx.onMouseMove($event); }, i0.ɵɵresolveDocument)("mouseup", function ImageViewerComponent_mouseup_HostBindingHandler() { return ctx.onMouseUp(); }, i0.ɵɵresolveDocument);
-        } }, inputs: { imageUrl: "imageUrl", alt: "alt", fileName: "fileName", visible: "visible" }, outputs: { closed: "closed" }, standalone: false, decls: 1, vars: 1, consts: [[1, "image-viewer-backdrop"], [1, "image-viewer-backdrop", 3, "click"], [1, "viewer-toolbar"], [1, "toolbar-left"], [1, "file-name"], [1, "toolbar-center"], ["title", "Zoom Out", 1, "toolbar-btn", 3, "click"], [1, "fa-solid", "fa-minus"], [1, "zoom-display"], ["title", "Zoom In", 1, "toolbar-btn", 3, "click"], [1, "fa-solid", "fa-plus"], [1, "toolbar-separator"], ["title", "Reset Zoom (100%)", 1, "toolbar-btn", 3, "click"], [1, "fa-solid", "fa-expand"], ["title", "Fit to Screen", 1, "toolbar-btn", 3, "click"], [1, "fa-solid", "fa-compress"], [1, "toolbar-right"], ["title", "Download", 1, "toolbar-btn", 3, "click"], [1, "fa-solid", "fa-download"], ["title", "Close (Esc)", 1, "toolbar-btn", "close-btn", 3, "click"], [1, "fa-solid", "fa-times"], [1, "image-container", 3, "mousedown"], ["draggable", "false", 1, "viewer-image", 3, "src", "alt"], [1, "viewer-instructions"], [1, "separator"]], template: function ImageViewerComponent_Template(rf, ctx) { if (rf & 1) {
+        } }, inputs: { ImageUrl: "ImageUrl", imageUrl: "imageUrl", Alt: "Alt", alt: "alt", FileName: "FileName", fileName: "fileName", Visible: "Visible", visible: "visible" }, outputs: { Closed: "Closed", closed: "closed" }, standalone: false, decls: 1, vars: 1, consts: [[1, "image-viewer-backdrop"], [1, "image-viewer-backdrop", 3, "click"], [1, "viewer-toolbar"], [1, "toolbar-left"], [1, "file-name"], [1, "toolbar-center"], ["title", "Zoom Out", 1, "toolbar-btn", 3, "click"], [1, "fa-solid", "fa-minus"], [1, "zoom-display"], ["title", "Zoom In", 1, "toolbar-btn", 3, "click"], [1, "fa-solid", "fa-plus"], [1, "toolbar-separator"], ["title", "Reset Zoom (100%)", 1, "toolbar-btn", 3, "click"], [1, "fa-solid", "fa-expand"], ["title", "Fit to Screen", 1, "toolbar-btn", 3, "click"], [1, "fa-solid", "fa-compress"], [1, "toolbar-right"], ["title", "Download", 1, "toolbar-btn", 3, "click"], [1, "fa-solid", "fa-download"], ["title", "Close (Esc)", 1, "toolbar-btn", "close-btn", 3, "click"], [1, "fa-solid", "fa-times"], [1, "image-container", 3, "mousedown"], ["draggable", "false", 1, "viewer-image", 3, "src", "alt"], [1, "viewer-instructions"], [1, "separator"]], template: function ImageViewerComponent_Template(rf, ctx) { if (rf & 1) {
             i0.ɵɵconditionalCreate(0, ImageViewerComponent_Conditional_0_Template, 34, 8, "div", 0);
         } if (rf & 2) {
             i0.ɵɵconditional(ctx.visible ? 0 : -1);
@@ -265,14 +389,24 @@ export class ImageViewerComponent {
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(ImageViewerComponent, [{
         type: Component,
         args: [{ standalone: false, selector: 'mj-image-viewer', template: "@if (visible) {\n  <div class=\"image-viewer-backdrop\"\n    (click)=\"onBackdropClick($event)\">\n    <!-- Toolbar -->\n    <div class=\"viewer-toolbar\">\n      <div class=\"toolbar-left\">\n        @if (fileName) {\n          <span class=\"file-name\">{{ fileName }}</span>\n        }\n      </div>\n      <div class=\"toolbar-center\">\n        <button class=\"toolbar-btn\" (click)=\"zoomOut()\" title=\"Zoom Out\">\n          <i class=\"fa-solid fa-minus\"></i>\n        </button>\n        <span class=\"zoom-display\">{{ zoomPercentage }}</span>\n        <button class=\"toolbar-btn\" (click)=\"zoomIn()\" title=\"Zoom In\">\n          <i class=\"fa-solid fa-plus\"></i>\n        </button>\n        <div class=\"toolbar-separator\"></div>\n        <button class=\"toolbar-btn\" (click)=\"resetZoom()\" title=\"Reset Zoom (100%)\">\n          <i class=\"fa-solid fa-expand\"></i>\n        </button>\n        <button class=\"toolbar-btn\" (click)=\"fitToScreen()\" title=\"Fit to Screen\">\n          <i class=\"fa-solid fa-compress\"></i>\n        </button>\n      </div>\n      <div class=\"toolbar-right\">\n        <button class=\"toolbar-btn\" (click)=\"downloadImage()\" title=\"Download\">\n          <i class=\"fa-solid fa-download\"></i>\n        </button>\n        <button class=\"toolbar-btn close-btn\" (click)=\"close()\" title=\"Close (Esc)\">\n          <i class=\"fa-solid fa-times\"></i>\n        </button>\n      </div>\n    </div>\n    <!-- Image Container -->\n    <div class=\"image-container\"\n      (mousedown)=\"onMouseDown($event)\"\n      [style.cursor]=\"zoomLevel > 1 ? (isDragging ? 'grabbing' : 'grab') : 'default'\">\n      <img [src]=\"imageUrl\"\n        [alt]=\"alt\"\n        class=\"viewer-image\"\n        [style.transform]=\"imageTransform\"\n        draggable=\"false\">\n    </div>\n    <!-- Instructions -->\n    <div class=\"viewer-instructions\">\n      <span>Scroll to zoom</span>\n      <span class=\"separator\">|</span>\n      <span>Drag to pan when zoomed</span>\n      <span class=\"separator\">|</span>\n      <span>Esc to close</span>\n    </div>\n  </div>\n}\n", styles: [".image-viewer-backdrop {\n  position: fixed;\n  inset: 0;\n  z-index: 10000;\n  background: rgba(0, 0, 0, 0.92);\n  display: flex;\n  flex-direction: column;\n  animation: fadeIn 0.2s ease-out;\n}\n\n@keyframes fadeIn {\n  from {\n    opacity: 0;\n  }\n  to {\n    opacity: 1;\n  }\n}\n\n/* Toolbar */\n.viewer-toolbar {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  padding: 12px 16px;\n  background: rgba(0, 0, 0, 0.5);\n  backdrop-filter: blur(10px);\n  border-bottom: 1px solid rgba(255, 255, 255, 0.1);\n}\n\n.toolbar-left,\n.toolbar-center,\n.toolbar-right {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n}\n\n.toolbar-left {\n  flex: 1;\n  min-width: 0;\n}\n\n.toolbar-right {\n  flex: 1;\n  justify-content: flex-end;\n}\n\n.file-name {\n  color: rgba(255, 255, 255, 0.9);\n  font-size: 14px;\n  font-weight: 500;\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  max-width: 300px;\n}\n\n.toolbar-btn {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: 36px;\n  height: 36px;\n  border: none;\n  border-radius: 8px;\n  background: rgba(255, 255, 255, 0.1);\n  color: rgba(255, 255, 255, 0.9);\n  cursor: pointer;\n  transition: background 0.2s, transform 0.15s;\n}\n\n.toolbar-btn:hover {\n  background: rgba(255, 255, 255, 0.2);\n  transform: scale(1.05);\n}\n\n.toolbar-btn:active {\n  transform: scale(0.95);\n}\n\n.toolbar-btn.close-btn {\n  background: color-mix(in srgb, var(--mj-status-error) 20%, transparent);\n}\n\n.toolbar-btn.close-btn:hover {\n  background: color-mix(in srgb, var(--mj-status-error) 40%, transparent);\n}\n\n.toolbar-btn i {\n  font-size: 14px;\n}\n\n.zoom-display {\n  color: rgba(255, 255, 255, 0.9);\n  font-size: 13px;\n  font-weight: 500;\n  min-width: 50px;\n  text-align: center;\n  font-family: 'SF Mono', 'Monaco', 'Inconsolata', 'Roboto Mono', monospace;\n}\n\n.toolbar-separator {\n  width: 1px;\n  height: 20px;\n  background: rgba(255, 255, 255, 0.2);\n  margin: 0 4px;\n}\n\n/* Image Container */\n.image-container {\n  flex: 1;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  overflow: hidden;\n  padding: 20px;\n}\n\n.viewer-image {\n  max-width: 100%;\n  max-height: 100%;\n  object-fit: contain;\n  transition: transform 0.1s ease-out;\n  user-select: none;\n  pointer-events: none;\n  border-radius: 4px;\n  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);\n}\n\n/* Instructions */\n.viewer-instructions {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  gap: 8px;\n  padding: 10px;\n  color: rgba(255, 255, 255, 0.5);\n  font-size: 12px;\n}\n\n.viewer-instructions .separator {\n  opacity: 0.3;\n}\n\n/* Responsive */\n@media (max-width: 768px) {\n  .viewer-toolbar {\n    padding: 8px 12px;\n  }\n\n  .toolbar-btn {\n    width: 32px;\n    height: 32px;\n  }\n\n  .file-name {\n    max-width: 150px;\n    font-size: 12px;\n  }\n\n  .zoom-display {\n    min-width: 40px;\n    font-size: 11px;\n  }\n\n  .viewer-instructions {\n    font-size: 10px;\n    padding: 8px;\n  }\n\n  .image-container {\n    padding: 10px;\n  }\n}\n\n/* Touch support */\n@media (hover: none) {\n  .toolbar-btn:hover {\n    background: rgba(255, 255, 255, 0.1);\n    transform: none;\n  }\n\n  .toolbar-btn.close-btn:hover {\n    background: color-mix(in srgb, var(--mj-status-error) 20%, transparent);\n  }\n\n  .viewer-instructions {\n    display: none;\n  }\n}\n"] }]
-    }], null, { imageUrl: [{
+    }], null, { ImageUrl: [{
+            type: Input
+        }], imageUrl: [{
+            type: Input
+        }], Alt: [{
             type: Input
         }], alt: [{
             type: Input
+        }], FileName: [{
+            type: Input
         }], fileName: [{
             type: Input
+        }], Visible: [{
+            type: Input
         }], visible: [{
             type: Input
+        }], Closed: [{
+            type: Output
         }], closed: [{
             type: Output
         }], onEscapeKey: [{

package/dist/lib/components/attachment/image-viewer.component.js.map

@@ -1 +1 @@
-{"version":3,"file":"image-viewer.component.js","sourceRoot":"","sources":["../../../../src/lib/components/attachment/image-viewer.component.ts","../../../../src/lib/components/attachment/image-viewer.component.html"],"names":[],"mappings":"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","sourcesContent":["import {\n  Component,\n  Input,\n  Output,\n  EventEmitter,\n  HostListener,\n  OnInit,\n  OnDestroy\n} from '@angular/core';\n\n/**\n * Full-screen image viewer modal with zoom and pan capabilities.\n * Provides a lightbox-style experience for viewing attachment images.\n */\n@Component({\n  standalone: false,\n  selector: 'mj-image-viewer',\n  templateUrl: './image-viewer.component.html',\n  styleUrls: ['./image-viewer.component.css']\n})\nexport class ImageViewerComponent implements OnInit, OnDestroy {\n  /** Image source URL (can be data URL or regular URL) */\n  @Input() imageUrl: string = '';\n\n  /** Image alt text */\n  @Input() alt: string = 'Image';\n\n  /** Image filename for download */\n  @Input() fileName: string = 'image';\n\n  /** Whether the viewer is visible */\n  @Input() visible: boolean = false;\n\n  /** Emits when the viewer should be closed */\n  @Output() closed = new EventEmitter<void>();\n\n  // Zoom and pan state\n  public zoomLevel: number = 1;\n  public minZoom: number = 0.1;\n  public maxZoom: number = 5;\n  public translateX: number = 0;\n  public translateY: number = 0;\n\n  // Drag state\n  public isDragging: boolean = false;\n  private lastMouseX: number = 0;\n  private lastMouseY: number = 0;\n\n  ngOnInit(): void {\n    // Lock body scroll when viewer is open\n    if (this.visible) {\n      document.body.style.overflow = 'hidden';\n    }\n  }\n\n  ngOnDestroy(): void {\n    // Restore body scroll\n    document.body.style.overflow = '';\n  }\n\n  /**\n   * Handle escape key to close\n   */\n  @HostListener('document:keydown.escape')\n  onEscapeKey(): void {\n    if (this.visible) {\n      this.close();\n    }\n  }\n\n  /**\n   * Handle mouse wheel for zoom\n   */\n  @HostListener('wheel', ['$event'])\n  onWheel(event: WheelEvent): void {\n    if (!this.visible) return;\n    event.preventDefault();\n\n    const delta = event.deltaY > 0 ? -0.1 : 0.1;\n    this.adjustZoom(delta, event.clientX, event.clientY);\n  }\n\n  /**\n   * Close the viewer\n   */\n  close(): void {\n    this.resetView();\n    document.body.style.overflow = '';\n    this.closed.emit();\n  }\n\n  /**\n   * Handle backdrop click\n   */\n  onBackdropClick(event: MouseEvent): void {\n    // Only close if clicking directly on backdrop\n    const target = event.target as HTMLElement;\n    if (target.classList.contains('image-viewer-backdrop')) {\n      this.close();\n    }\n  }\n\n  /**\n   * Zoom in\n   */\n  zoomIn(): void {\n    this.adjustZoom(0.25);\n  }\n\n  /**\n   * Zoom out\n   */\n  zoomOut(): void {\n    this.adjustZoom(-0.25);\n  }\n\n  /**\n   * Reset to 100% zoom\n   */\n  resetZoom(): void {\n    this.zoomLevel = 1;\n    this.translateX = 0;\n    this.translateY = 0;\n  }\n\n  /**\n   * Fit image to screen\n   */\n  fitToScreen(): void {\n    // Reset position and set zoom to 1 (CSS will handle fitting)\n    this.resetView();\n  }\n\n  /**\n   * Reset view to initial state\n   */\n  private resetView(): void {\n    this.zoomLevel = 1;\n    this.translateX = 0;\n    this.translateY = 0;\n  }\n\n  /**\n   * Adjust zoom level\n   */\n  private adjustZoom(delta: number, centerX?: number, centerY?: number): void {\n    const newZoom = Math.max(this.minZoom, Math.min(this.maxZoom, this.zoomLevel + delta));\n\n    if (centerX !== undefined && centerY !== undefined && newZoom !== this.zoomLevel) {\n      // Zoom towards mouse position\n      const factor = newZoom / this.zoomLevel;\n      const imageContainer = document.querySelector('.image-container') as HTMLElement;\n      if (imageContainer) {\n        const rect = imageContainer.getBoundingClientRect();\n        const offsetX = centerX - rect.left - rect.width / 2 - this.translateX;\n        const offsetY = centerY - rect.top - rect.height / 2 - this.translateY;\n\n        this.translateX = this.translateX - offsetX * (factor - 1);\n        this.translateY = this.translateY - offsetY * (factor - 1);\n      }\n    }\n\n    this.zoomLevel = newZoom;\n  }\n\n  /**\n   * Handle mouse down for dragging\n   */\n  onMouseDown(event: MouseEvent): void {\n    if (event.button !== 0) return; // Only left click\n    if (this.zoomLevel <= 1) return; // Only allow pan when zoomed in\n\n    this.isDragging = true;\n    this.lastMouseX = event.clientX;\n    this.lastMouseY = event.clientY;\n    event.preventDefault();\n  }\n\n  /**\n   * Handle mouse move for dragging\n   */\n  @HostListener('document:mousemove', ['$event'])\n  onMouseMove(event: MouseEvent): void {\n    if (!this.isDragging) return;\n\n    const deltaX = event.clientX - this.lastMouseX;\n    const deltaY = event.clientY - this.lastMouseY;\n\n    this.translateX += deltaX;\n    this.translateY += deltaY;\n\n    this.lastMouseX = event.clientX;\n    this.lastMouseY = event.clientY;\n  }\n\n  /**\n   * Handle mouse up to stop dragging\n   */\n  @HostListener('document:mouseup')\n  onMouseUp(): void {\n    this.isDragging = false;\n  }\n\n  /**\n   * Download the image\n   */\n  downloadImage(): void {\n    const link = document.createElement('a');\n    link.href = this.imageUrl;\n    link.download = this.fileName;\n    link.click();\n  }\n\n  /**\n   * Get current zoom percentage for display\n   */\n  get zoomPercentage(): string {\n    return Math.round(this.zoomLevel * 100) + '%';\n  }\n\n  /**\n   * Get transform style for image\n   */\n  get imageTransform(): string {\n    return `translate(${this.translateX}px, ${this.translateY}px) scale(${this.zoomLevel})`;\n  }\n}\n","@if (visible) {\n  <div class=\"image-viewer-backdrop\"\n    (click)=\"onBackdropClick($event)\">\n    <!-- Toolbar -->\n    <div class=\"viewer-toolbar\">\n      <div class=\"toolbar-left\">\n        @if (fileName) {\n          <span class=\"file-name\">{{ fileName }}</span>\n        }\n      </div>\n      <div class=\"toolbar-center\">\n        <button class=\"toolbar-btn\" (click)=\"zoomOut()\" title=\"Zoom Out\">\n          <i class=\"fa-solid fa-minus\"></i>\n        </button>\n        <span class=\"zoom-display\">{{ zoomPercentage }}</span>\n        <button class=\"toolbar-btn\" (click)=\"zoomIn()\" title=\"Zoom In\">\n          <i class=\"fa-solid fa-plus\"></i>\n        </button>\n        <div class=\"toolbar-separator\"></div>\n        <button class=\"toolbar-btn\" (click)=\"resetZoom()\" title=\"Reset Zoom (100%)\">\n          <i class=\"fa-solid fa-expand\"></i>\n        </button>\n        <button class=\"toolbar-btn\" (click)=\"fitToScreen()\" title=\"Fit to Screen\">\n          <i class=\"fa-solid fa-compress\"></i>\n        </button>\n      </div>\n      <div class=\"toolbar-right\">\n        <button class=\"toolbar-btn\" (click)=\"downloadImage()\" title=\"Download\">\n          <i class=\"fa-solid fa-download\"></i>\n        </button>\n        <button class=\"toolbar-btn close-btn\" (click)=\"close()\" title=\"Close (Esc)\">\n          <i class=\"fa-solid fa-times\"></i>\n        </button>\n      </div>\n    </div>\n    <!-- Image Container -->\n    <div class=\"image-container\"\n      (mousedown)=\"onMouseDown($event)\"\n      [style.cursor]=\"zoomLevel > 1 ? (isDragging ? 'grabbing' : 'grab') : 'default'\">\n      <img [src]=\"imageUrl\"\n        [alt]=\"alt\"\n        class=\"viewer-image\"\n        [style.transform]=\"imageTransform\"\n        draggable=\"false\">\n    </div>\n    <!-- Instructions -->\n    <div class=\"viewer-instructions\">\n      <span>Scroll to zoom</span>\n      <span class=\"separator\">|</span>\n      <span>Drag to pan when zoomed</span>\n      <span class=\"separator\">|</span>\n      <span>Esc to close</span>\n    </div>\n  </div>\n}\n"]}
+{"version":3,"file":"image-viewer.component.js","sourceRoot":"","sources":["../../../../src/lib/components/attachment/image-viewer.component.ts","../../../../src/lib/components/attachment/image-viewer.component.html"],"names":[],"mappings":"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","sourcesContent":["import {\n  Component,\n  Input,\n  Output,\n  EventEmitter,\n  HostListener,\n  OnInit,\n  OnDestroy\n} from '@angular/core';\n\n/**\n * Full-screen image viewer modal with zoom and pan capabilities.\n * Provides a lightbox-style experience for viewing attachment images.\n */\n@Component({\n  standalone: false,\n  selector: 'mj-image-viewer',\n  templateUrl: './image-viewer.component.html',\n  styleUrls: ['./image-viewer.component.css']\n})\nexport class ImageViewerComponent implements OnInit, OnDestroy {\n  /** Image source URL (can be data URL or regular URL) */\n  @Input() ImageUrl: string = '';\n\n  /** @deprecated Use {@link ImageUrl}. */\n  @Input() set imageUrl(value: string) {\n    this.ImageUrl = value;\n  }\n  /** @deprecated Use {@link ImageUrl}. */\n  get imageUrl(): string {\n    return this.ImageUrl;\n  }\n\n  /** Image alt text */\n  @Input() Alt: string = 'Image';\n\n  /** @deprecated Use {@link Alt}. */\n  @Input() set alt(value: string) {\n    this.Alt = value;\n  }\n  /** @deprecated Use {@link Alt}. */\n  get alt(): string {\n    return this.Alt;\n  }\n\n  /** Image filename for download */\n  @Input() FileName: string = 'image';\n\n  /** @deprecated Use {@link FileName}. */\n  @Input() set fileName(value: string) {\n    this.FileName = value;\n  }\n  /** @deprecated Use {@link FileName}. */\n  get fileName(): string {\n    return this.FileName;\n  }\n\n  /** Whether the viewer is visible */\n  @Input() Visible: boolean = false;\n\n  /** @deprecated Use {@link Visible}. */\n  @Input() set visible(value: boolean) {\n    this.Visible = value;\n  }\n  /** @deprecated Use {@link Visible}. */\n  get visible(): boolean {\n    return this.Visible;\n  }\n\n  /** Emits when the viewer should be closed */\n  @Output() Closed = new EventEmitter<void>();\n\n  /**\n   * @deprecated Use {@link Closed}.\n   *\n   * The same emitter under the old binding name, so a template still binding\n   * (closed) keeps working. Must stay AFTER Closed: class fields\n   * initialise in order, and the other way round this captures undefined.\n   */\n  @Output() closed = this.Closed;\n\n  // Zoom and pan state\n  public ZoomLevel: number = 1;\n\n  /** @deprecated Use {@link ZoomLevel}. */\n  public get zoomLevel(): number {\n    return this.ZoomLevel;\n  }\n  /** @deprecated Use {@link ZoomLevel}. */\n  public set zoomLevel(value: number) {\n    this.ZoomLevel = value;\n  }\n  public MinZoom: number = 0.1;\n\n  /** @deprecated Use {@link MinZoom}. */\n  public get minZoom(): number {\n    return this.MinZoom;\n  }\n  /** @deprecated Use {@link MinZoom}. */\n  public set minZoom(value: number) {\n    this.MinZoom = value;\n  }\n  public MaxZoom: number = 5;\n\n  /** @deprecated Use {@link MaxZoom}. */\n  public get maxZoom(): number {\n    return this.MaxZoom;\n  }\n  /** @deprecated Use {@link MaxZoom}. */\n  public set maxZoom(value: number) {\n    this.MaxZoom = value;\n  }\n  public TranslateX: number = 0;\n\n  /** @deprecated Use {@link TranslateX}. */\n  public get translateX(): number {\n    return this.TranslateX;\n  }\n  /** @deprecated Use {@link TranslateX}. */\n  public set translateX(value: number) {\n    this.TranslateX = value;\n  }\n  public TranslateY: number = 0;\n\n  /** @deprecated Use {@link TranslateY}. */\n  public get translateY(): number {\n    return this.TranslateY;\n  }\n  /** @deprecated Use {@link TranslateY}. */\n  public set translateY(value: number) {\n    this.TranslateY = value;\n  }\n\n  // Drag state\n  public IsDragging: boolean = false;\n\n  /** @deprecated Use {@link IsDragging}. */\n  public get isDragging(): boolean {\n    return this.IsDragging;\n  }\n  /** @deprecated Use {@link IsDragging}. */\n  public set isDragging(value: boolean) {\n    this.IsDragging = value;\n  }\n  private lastMouseX: number = 0;\n  private lastMouseY: number = 0;\n\n  ngOnInit(): void {\n    // Lock body scroll when viewer is open\n    if (this.Visible) {\n      document.body.style.overflow = 'hidden';\n    }\n  }\n\n  ngOnDestroy(): void {\n    // Restore body scroll\n    document.body.style.overflow = '';\n  }\n\n  /**\n   * Handle escape key to close\n   */\n  @HostListener('document:keydown.escape')\n  onEscapeKey(): void {\n    if (this.Visible) {\n      this.close();\n    }\n  }\n\n  /**\n   * Handle mouse wheel for zoom\n   */\n  @HostListener('wheel', ['$event'])\n  onWheel(event: WheelEvent): void {\n    if (!this.Visible) return;\n    event.preventDefault();\n\n    const delta = event.deltaY > 0 ? -0.1 : 0.1;\n    this.adjustZoom(delta, event.clientX, event.clientY);\n  }\n\n  /**\n   * Close the viewer\n   */\n  close(): void {\n    this.resetView();\n    document.body.style.overflow = '';\n    this.Closed.emit();\n  }\n\n  /**\n   * Handle backdrop click\n   */\n  OnBackdropClick(event: MouseEvent): void {\n    // Only close if clicking directly on backdrop\n    const target = event.target as HTMLElement;\n    if (target.classList.contains('image-viewer-backdrop')) {\n      this.close();\n    }\n  }\n\n  /** @deprecated Use {@link OnBackdropClick}. */\n  onBackdropClick(event: MouseEvent): void {\n    return this.OnBackdropClick(event);\n  }\n\n  /**\n   * Zoom in\n   */\n  ZoomIn(): void {\n    this.adjustZoom(0.25);\n  }\n\n  /** @deprecated Use {@link ZoomIn}. */\n  zoomIn(): void {\n    return this.ZoomIn();\n  }\n\n  /**\n   * Zoom out\n   */\n  ZoomOut(): void {\n    this.adjustZoom(-0.25);\n  }\n\n  /** @deprecated Use {@link ZoomOut}. */\n  zoomOut(): void {\n    return this.ZoomOut();\n  }\n\n  /**\n   * Reset to 100% zoom\n   */\n  ResetZoom(): void {\n    this.ZoomLevel = 1;\n    this.TranslateX = 0;\n    this.TranslateY = 0;\n  }\n\n  /** @deprecated Use {@link ResetZoom}. */\n  resetZoom(): void {\n    return this.ResetZoom();\n  }\n\n  /**\n   * Fit image to screen\n   */\n  FitToScreen(): void {\n    // Reset position and set zoom to 1 (CSS will handle fitting)\n    this.resetView();\n  }\n\n  /** @deprecated Use {@link FitToScreen}. */\n  fitToScreen(): void {\n    return this.FitToScreen();\n  }\n\n  /**\n   * Reset view to initial state\n   */\n  private resetView(): void {\n    this.ZoomLevel = 1;\n    this.TranslateX = 0;\n    this.TranslateY = 0;\n  }\n\n  /**\n   * Adjust zoom level\n   */\n  private adjustZoom(delta: number, centerX?: number, centerY?: number): void {\n    const newZoom = Math.max(this.MinZoom, Math.min(this.MaxZoom, this.ZoomLevel + delta));\n\n    if (centerX !== undefined && centerY !== undefined && newZoom !== this.ZoomLevel) {\n      // Zoom towards mouse position\n      const factor = newZoom / this.ZoomLevel;\n      const imageContainer = document.querySelector('.image-container') as HTMLElement;\n      if (imageContainer) {\n        const rect = imageContainer.getBoundingClientRect();\n        const offsetX = centerX - rect.left - rect.width / 2 - this.TranslateX;\n        const offsetY = centerY - rect.top - rect.height / 2 - this.TranslateY;\n\n        this.TranslateX = this.TranslateX - offsetX * (factor - 1);\n        this.TranslateY = this.TranslateY - offsetY * (factor - 1);\n      }\n    }\n\n    this.ZoomLevel = newZoom;\n  }\n\n  /**\n   * Handle mouse down for dragging\n   */\n  OnMouseDown(event: MouseEvent): void {\n    if (event.button !== 0) return; // Only left click\n    if (this.ZoomLevel <= 1) return; // Only allow pan when zoomed in\n\n    this.IsDragging = true;\n    this.lastMouseX = event.clientX;\n    this.lastMouseY = event.clientY;\n    event.preventDefault();\n  }\n\n  /** @deprecated Use {@link OnMouseDown}. */\n  onMouseDown(event: MouseEvent): void {\n    return this.OnMouseDown(event);\n  }\n\n  /**\n   * Handle mouse move for dragging\n   */\n  @HostListener('document:mousemove', ['$event'])\n  onMouseMove(event: MouseEvent): void {\n    if (!this.IsDragging) return;\n\n    const deltaX = event.clientX - this.lastMouseX;\n    const deltaY = event.clientY - this.lastMouseY;\n\n    this.TranslateX += deltaX;\n    this.TranslateY += deltaY;\n\n    this.lastMouseX = event.clientX;\n    this.lastMouseY = event.clientY;\n  }\n\n  /**\n   * Handle mouse up to stop dragging\n   */\n  @HostListener('document:mouseup')\n  onMouseUp(): void {\n    this.IsDragging = false;\n  }\n\n  /**\n   * Download the image\n   */\n  DownloadImage(): void {\n    const link = document.createElement('a');\n    link.href = this.ImageUrl;\n    link.download = this.FileName;\n    link.click();\n  }\n\n  /** @deprecated Use {@link DownloadImage}. */\n  downloadImage(): void {\n    return this.DownloadImage();\n  }\n\n  /**\n   * Get current zoom percentage for display\n   */\n  get ZoomPercentage(): string {\n    return Math.round(this.ZoomLevel * 100) + '%';\n  }\n\n  /** @deprecated Use {@link ZoomPercentage}. */\n  get zoomPercentage(): string {\n    return this.ZoomPercentage;\n  }\n\n  /**\n   * Get transform style for image\n   */\n  get ImageTransform(): string {\n    return `translate(${this.TranslateX}px, ${this.TranslateY}px) scale(${this.ZoomLevel})`;\n  }\n\n  /** @deprecated Use {@link ImageTransform}. */\n  get imageTransform(): string {\n    return this.ImageTransform;\n  }\n}\n","@if (visible) {\n  <div class=\"image-viewer-backdrop\"\n    (click)=\"onBackdropClick($event)\">\n    <!-- Toolbar -->\n    <div class=\"viewer-toolbar\">\n      <div class=\"toolbar-left\">\n        @if (fileName) {\n          <span class=\"file-name\">{{ fileName }}</span>\n        }\n      </div>\n      <div class=\"toolbar-center\">\n        <button class=\"toolbar-btn\" (click)=\"zoomOut()\" title=\"Zoom Out\">\n          <i class=\"fa-solid fa-minus\"></i>\n        </button>\n        <span class=\"zoom-display\">{{ zoomPercentage }}</span>\n        <button class=\"toolbar-btn\" (click)=\"zoomIn()\" title=\"Zoom In\">\n          <i class=\"fa-solid fa-plus\"></i>\n        </button>\n        <div class=\"toolbar-separator\"></div>\n        <button class=\"toolbar-btn\" (click)=\"resetZoom()\" title=\"Reset Zoom (100%)\">\n          <i class=\"fa-solid fa-expand\"></i>\n        </button>\n        <button class=\"toolbar-btn\" (click)=\"fitToScreen()\" title=\"Fit to Screen\">\n          <i class=\"fa-solid fa-compress\"></i>\n        </button>\n      </div>\n      <div class=\"toolbar-right\">\n        <button class=\"toolbar-btn\" (click)=\"downloadImage()\" title=\"Download\">\n          <i class=\"fa-solid fa-download\"></i>\n        </button>\n        <button class=\"toolbar-btn close-btn\" (click)=\"close()\" title=\"Close (Esc)\">\n          <i class=\"fa-solid fa-times\"></i>\n        </button>\n      </div>\n    </div>\n    <!-- Image Container -->\n    <div class=\"image-container\"\n      (mousedown)=\"onMouseDown($event)\"\n      [style.cursor]=\"zoomLevel > 1 ? (isDragging ? 'grabbing' : 'grab') : 'default'\">\n      <img [src]=\"imageUrl\"\n        [alt]=\"alt\"\n        class=\"viewer-image\"\n        [style.transform]=\"imageTransform\"\n        draggable=\"false\">\n    </div>\n    <!-- Instructions -->\n    <div class=\"viewer-instructions\">\n      <span>Scroll to zoom</span>\n      <span class=\"separator\">|</span>\n      <span>Drag to pan when zoomed</span>\n      <span class=\"separator\">|</span>\n      <span>Esc to close</span>\n    </div>\n  </div>\n}\n"]}