@elementar-rt/components 0.6.58 → 0.7.0

package/fesm2022/elementar-rt-components-image-resizer.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"elementar-rt-components-image-resizer.mjs","sources":["../../../projects/components/image-resizer/src/image-resize-handler.directive.ts","../../../projects/components/image-resizer/src/image-resizer-image.directive.ts","../../../projects/components/image-resizer/src/image-resizer/image-resizer.component.ts","../../../projects/components/image-resizer/src/image-resizer/image-resizer.component.html","../../../projects/components/image-resizer/elementar-rt-components-image-resizer.ts"],"sourcesContent":["import {\n  ChangeDetectorRef, DestroyRef,\n  Directive,\n  ElementRef,\n  inject,\n  input,\n  NgZone, numberAttribute, output,\n  PLATFORM_ID,\n  Renderer2,\n  DOCUMENT\n} from '@angular/core';\nimport { isPlatformServer } from '@angular/common';\nimport { fromEvent, throttleTime } from 'rxjs';\nimport { takeUntilDestroyed } from '@angular/core/rxjs-interop';\n\n@Directive({\n  selector: '[emrImageResizeHandler]'\n})\nexport class ImageResizeHandlerDirective {\n  private _platformId = inject(PLATFORM_ID);\n  private _elementRef = inject(ElementRef);\n  private _renderer = inject(Renderer2);\n  private _cdr = inject(ChangeDetectorRef);\n  private _ngZone = inject(NgZone);\n  private _destroyRef = inject(DestroyRef);\n  private _document = inject(DOCUMENT);\n  private _resizing = false;\n  private _width: number;\n  private _clientX: number;\n\n  maxWidth = input.required({\n    transform: numberAttribute\n  });\n  minWidth = input.required({\n    transform: numberAttribute\n  });\n  targetElement = input.required<HTMLElement>();\n  direction = input.required<'left' | 'right'>();\n\n  readonly dimensionsChanged = output();\n\n  ngOnInit() {\n    if (isPlatformServer(this._platformId)) {\n      return;\n    }\n\n    const targetElement = this.targetElement();\n\n    this._ngZone.runOutsideAngular(() => {\n      fromEvent<MouseEvent>(this._elementRef.nativeElement, 'mousedown')\n        .pipe(takeUntilDestroyed(this._destroyRef))\n        .subscribe((event: MouseEvent) => {\n          this._resizing = true;\n          this._width = targetElement.getBoundingClientRect().width;\n          this._clientX = event.clientX;\n          this._cdr.detectChanges();\n        })\n      ;\n      fromEvent<MouseEvent>(this._document, 'mousemove')\n        .pipe(\n          throttleTime(5),\n          takeUntilDestroyed(this._destroyRef)\n        )\n        .subscribe((event: MouseEvent) => {\n          if (this._resizing) {\n            let width = this._width;\n\n            if (this.direction() === 'left') {\n              width = this._width - (this._clientX - event.clientX);\n            } else if (this.direction() === 'right') {\n              width = (this._width - (event.clientX - this._clientX));\n            }\n\n            if (width <= this.minWidth()) {\n              width = this.minWidth();\n            } else if (width >= this.maxWidth()) {\n              width = this.maxWidth();\n            }\n\n            this._renderer.setStyle(targetElement, 'width', width + 'px');\n            this.dimensionsChanged.emit();\n          }\n        })\n      ;\n      fromEvent(this._document, 'mouseup')\n        .pipe(takeUntilDestroyed(this._destroyRef))\n        .subscribe(event => {\n          this._resizing = false;\n          this._cdr.detectChanges();\n        })\n      ;\n    });\n  }\n}\n","import { Directive, ElementRef, inject } from '@angular/core';\n\n@Directive({\n  selector: '[emrImageResizerImage]',\n  exportAs: 'emrImageResizerImage',\n  host: {\n    '(dragstart)': '_onDragStart($event)'\n  }\n})\nexport class ImageResizerImageDirective {\n  readonly elementRef = inject<ElementRef<HTMLImageElement>>(ElementRef);\n\n  protected _onDragStart(event: Event) {\n    event.stopPropagation();\n    event.preventDefault();\n  }\n}\n","import {\n  AfterContentInit,\n  ChangeDetectionStrategy,\n  Component, contentChild, effect,\n  ElementRef,\n  inject, input, numberAttribute,\n  output,\n  PLATFORM_ID,\n  Renderer2,\n  signal,\n} from '@angular/core';\nimport { ImageResizeHandlerDirective } from '../image-resize-handler.directive';\nimport { isPlatformServer } from '@angular/common';\nimport { ImageResizedEvent } from '../types';\nimport { ImageResizerImageDirective } from '../image-resizer-image.directive';\n\n@Component({\n  selector: 'emr-image-resizer',\n  exportAs: 'emrImageResizer',\n  imports: [\n    ImageResizeHandlerDirective\n  ],\n  templateUrl: './image-resizer.component.html',\n  styleUrl: './image-resizer.component.scss',\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  host: {\n    'class': 'emr-image-resizer'\n  }\n})\nexport class ImageResizerComponent implements AfterContentInit {\n  protected _platformId = inject(PLATFORM_ID);\n  protected _elementRef = inject(ElementRef);\n  protected _renderer = inject(Renderer2);\n\n  readonly imageRef = contentChild.required(ImageResizerImageDirective);\n\n  imageMaxWidth = input(null, {\n    transform: numberAttribute\n  });\n  imageMinWidth = input(100, {\n    transform: numberAttribute\n  });\n\n  readonly imageResized = output<ImageResizedEvent>();\n\n  protected _maxWidth = signal<number | null>(null);\n\n  constructor() {\n    effect(() => {\n      this._maxWidth.set(this.imageMaxWidth());\n    });\n  }\n\n  ngAfterContentInit() {\n    if (isPlatformServer(this._platformId)) {\n      return;\n    }\n\n    this.imageRef().elementRef.nativeElement\n      .onload = () => {\n        setTimeout(() => {\n          const { width } = this.imageRef().elementRef.nativeElement.getBoundingClientRect();\n\n          if (this.imageMaxWidth() === null) {\n            this._maxWidth.set(width);\n          }\n        }, 100);\n      };\n  }\n\n  onDimensionsChanged() {\n    const { width, height } = this.imageRef().elementRef.nativeElement.getBoundingClientRect();\n    const { naturalWidth, naturalHeight } = this.imageRef().elementRef.nativeElement;\n    this.imageResized.emit({\n      width,\n      height,\n      naturalWidth,\n      naturalHeight\n    });\n  }\n}\n","<div emrImageResizeHandler direction=\"right\"\n     [maxWidth]=\"_maxWidth()\"\n     [minWidth]=\"imageMinWidth()\"\n     [targetElement]=\"imageRef().elementRef.nativeElement\" class=\"handler handler-start\"\n     (dimensionsChanged)=\"onDimensionsChanged()\"></div>\n<ng-content select=\"[emrImageResizerImage]\"/>\n<div emrImageResizeHandler direction=\"left\"\n     [maxWidth]=\"_maxWidth()\"\n     [minWidth]=\"imageMinWidth()\"\n     [targetElement]=\"imageRef().elementRef.nativeElement\" class=\"handler handler-end\"\n     (dimensionsChanged)=\"onDimensionsChanged()\"></div>\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"elementar-rt-components-image-resizer.mjs","sources":["../../../projects/components/image-resizer/src/image-resize-handler.directive.ts","../../../projects/components/image-resizer/src/image-resizer-image.directive.ts","../../../projects/components/image-resizer/src/image-resizer/image-resizer.component.ts","../../../projects/components/image-resizer/src/image-resizer/image-resizer.component.html","../../../projects/components/image-resizer/elementar-rt-components-image-resizer.ts"],"sourcesContent":["import {\n  ChangeDetectorRef, DestroyRef,\n  Directive,\n  ElementRef,\n  inject,\n  input,\n  NgZone, numberAttribute, output,\n  PLATFORM_ID,\n  Renderer2,\n  DOCUMENT\n} from '@angular/core';\nimport { isPlatformServer } from '@angular/common';\nimport { fromEvent, throttleTime } from 'rxjs';\nimport { takeUntilDestroyed } from '@angular/core/rxjs-interop';\n\n@Directive({\n  selector: '[emrImageResizeHandler]'\n})\nexport class ImageResizeHandlerDirective {\n  private _platformId = inject(PLATFORM_ID);\n  private _elementRef = inject(ElementRef);\n  private _renderer = inject(Renderer2);\n  private _cdr = inject(ChangeDetectorRef);\n  private _ngZone = inject(NgZone);\n  private _destroyRef = inject(DestroyRef);\n  private _document = inject(DOCUMENT);\n  private _resizing = false;\n  private _width: number;\n  private _clientX: number;\n\n  maxWidth = input.required({\n    transform: numberAttribute\n  });\n  minWidth = input.required({\n    transform: numberAttribute\n  });\n  targetElement = input.required<HTMLElement>();\n  direction = input.required<'left' | 'right'>();\n\n  readonly dimensionsChanged = output();\n\n  ngOnInit() {\n    if (isPlatformServer(this._platformId)) {\n      return;\n    }\n\n    const targetElement = this.targetElement();\n\n    this._ngZone.runOutsideAngular(() => {\n      fromEvent<MouseEvent>(this._elementRef.nativeElement, 'mousedown')\n        .pipe(takeUntilDestroyed(this._destroyRef))\n        .subscribe((event: MouseEvent) => {\n          this._resizing = true;\n          this._width = targetElement.getBoundingClientRect().width;\n          this._clientX = event.clientX;\n          this._cdr.detectChanges();\n        })\n      ;\n      fromEvent<MouseEvent>(this._document, 'mousemove')\n        .pipe(\n          throttleTime(5),\n          takeUntilDestroyed(this._destroyRef)\n        )\n        .subscribe((event: MouseEvent) => {\n          if (this._resizing) {\n            let width = this._width;\n\n            if (this.direction() === 'left') {\n              width = this._width - (this._clientX - event.clientX);\n            } else if (this.direction() === 'right') {\n              width = (this._width - (event.clientX - this._clientX));\n            }\n\n            if (width <= this.minWidth()) {\n              width = this.minWidth();\n            } else if (width >= this.maxWidth()) {\n              width = this.maxWidth();\n            }\n\n            this._renderer.setStyle(targetElement, 'width', width + 'px');\n            this.dimensionsChanged.emit();\n          }\n        })\n      ;\n      fromEvent(this._document, 'mouseup')\n        .pipe(takeUntilDestroyed(this._destroyRef))\n        .subscribe(event => {\n          this._resizing = false;\n          this._cdr.detectChanges();\n        })\n      ;\n    });\n  }\n}\n","import { Directive, ElementRef, inject } from '@angular/core';\n\n@Directive({\n  selector: '[emrImageResizerImage]',\n  exportAs: 'emrImageResizerImage',\n  host: {\n    '(dragstart)': '_onDragStart($event)'\n  }\n})\nexport class ImageResizerImageDirective {\n  readonly elementRef = inject<ElementRef<HTMLImageElement>>(ElementRef);\n\n  protected _onDragStart(event: Event) {\n    event.stopPropagation();\n    event.preventDefault();\n  }\n}\n","import {\n  AfterContentInit,\n  ChangeDetectionStrategy,\n  Component, contentChild, effect,\n  ElementRef,\n  inject, input, numberAttribute,\n  output,\n  PLATFORM_ID,\n  Renderer2,\n  signal,\n} from '@angular/core';\nimport { ImageResizeHandlerDirective } from '../image-resize-handler.directive';\nimport { isPlatformServer } from '@angular/common';\nimport { ImageResizedEvent } from '../types';\nimport { ImageResizerImageDirective } from '../image-resizer-image.directive';\n\n@Component({\n  selector: 'emr-image-resizer',\n  exportAs: 'emrImageResizer',\n  imports: [\n    ImageResizeHandlerDirective\n  ],\n  templateUrl: './image-resizer.component.html',\n  styleUrl: './image-resizer.component.scss',\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  host: {\n    'class': 'emr-image-resizer'\n  }\n})\nexport class ImageResizerComponent implements AfterContentInit {\n  protected _platformId = inject(PLATFORM_ID);\n  protected _elementRef = inject(ElementRef);\n  protected _renderer = inject(Renderer2);\n\n  readonly imageRef = contentChild.required(ImageResizerImageDirective);\n\n  imageMaxWidth = input(null, {\n    transform: numberAttribute\n  });\n  imageMinWidth = input(100, {\n    transform: numberAttribute\n  });\n\n  readonly imageResized = output<ImageResizedEvent>();\n\n  protected _maxWidth = signal<number | null>(null);\n\n  constructor() {\n    effect(() => {\n      this._maxWidth.set(this.imageMaxWidth());\n    });\n  }\n\n  ngAfterContentInit() {\n    if (isPlatformServer(this._platformId)) {\n      return;\n    }\n\n    this.imageRef().elementRef.nativeElement\n      .onload = () => {\n        setTimeout(() => {\n          const { width } = this.imageRef().elementRef.nativeElement.getBoundingClientRect();\n\n          if (this.imageMaxWidth() === null) {\n            this._maxWidth.set(width);\n          }\n        }, 100);\n      };\n  }\n\n  onDimensionsChanged() {\n    const { width, height } = this.imageRef().elementRef.nativeElement.getBoundingClientRect();\n    const { naturalWidth, naturalHeight } = this.imageRef().elementRef.nativeElement;\n    this.imageResized.emit({\n      width,\n      height,\n      naturalWidth,\n      naturalHeight\n    });\n  }\n}\n","<div emrImageResizeHandler direction=\"right\"\n     [maxWidth]=\"_maxWidth()\"\n     [minWidth]=\"imageMinWidth()\"\n     [targetElement]=\"imageRef().elementRef.nativeElement\" class=\"handler handler-start\"\n     (dimensionsChanged)=\"onDimensionsChanged()\"></div>\n<ng-content select=\"[emrImageResizerImage]\"/>\n<div emrImageResizeHandler direction=\"left\"\n     [maxWidth]=\"_maxWidth()\"\n     [minWidth]=\"imageMinWidth()\"\n     [targetElement]=\"imageRef().elementRef.nativeElement\" class=\"handler handler-end\"\n     (dimensionsChanged)=\"onDimensionsChanged()\"></div>\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}

package/fesm2022/elementar-rt-components-image-viewer.mjs

@@ -42,13 +42,13 @@ class ImageViewerComponent {
     padding = 30;
     scaled = computed(() => {
         return this.scale !== 1;
-    }, ...(ngDevMode ? [{ debugName: "scaled" }] : []));
+    }, ...(ngDevMode ? [{ debugName: "scaled" }] : /* istanbul ignore next */ []));
     hasTitle = computed(() => {
         return !!(this.data.title || this.data.titleTplRef);
-    }, ...(ngDevMode ? [{ debugName: "hasTitle" }] : []));
+    }, ...(ngDevMode ? [{ debugName: "hasTitle" }] : /* istanbul ignore next */ []));
     hasAside = computed(() => {
         return !!(this.data.caption || this.data.description || this.data.captionTplRef || this.data.descriptionTplRef);
-    }, ...(ngDevMode ? [{ debugName: "hasAside" }] : []));
+    }, ...(ngDevMode ? [{ debugName: "hasAside" }] : /* istanbul ignore next */ []));
     onLoad(event) {
         this.loading = false;
         this.image = event.target;
@@ -186,10 +186,10 @@ class ImageViewerComponent {
         this._tmpOffsetX = translateX;
         this._renderer.setStyle(image, 'transform', `translate(${translateX}px,${translateY}px)`);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: ImageViewerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.25", type: ImageViewerComponent, isStandalone: true, selector: "emr-image-viewer", host: { properties: { "class.loading": "loading", "class.dragging": "_dragging", "class.scaled": "scale !== 1" }, classAttribute: "emr-image-viewer" }, exportAs: ["emrImageViewer"], ngImport: i0, template: "<div class=\"title-container\">\n  @if (hasTitle()) {\n    <div class=\"title\">\n      @if (data.titleTplRef) {\n        <ng-container [ngTemplateOutlet]=\"data.titleTplRef\"></ng-container>\n      } @else if (data.caption) {\n        {{ data.title }}\n      }\n    </div>\n  }\n</div>\n<div class=\"controls\" (click)=\"onPreventClick($event)\">\n  <div class=\"w-max\">\n    <button (click)=\"pictureRef.close()\" class=\"close\">\n      <mat-icon>close</mat-icon>\n    </button>\n  </div>\n  <div class=\"w-max\">\n    <button class=\"zoom\" (click)=\"toggleZoom()\" [disabled]=\"scaleMax === 1 || null\">\n      @if (scale === this.scaleMin) {\n        <mat-icon>zoom_in</mat-icon>\n      } @else {\n        <mat-icon>zoom_out</mat-icon>\n      }\n    </button>\n  </div>\n</div>\n<div class=\"content\" (click)=\"onBackdropClick()\">\n  <div class=\"image\" (dragstart)=\"onDragStart($event)\">\n    @if (loading) {\n      <div class=\"spinner\">\n        <mat-spinner/>\n      </div>\n    }\n    <img [src]=\"data.sourceUrl\" alt=\"\" (load)=\"onLoad($event)\" (click)=\"onPreventClick($event)\" class=\"img\">\n  </div>\n  @if (hasAside()) {\n    <aside class=\"aside\" (click)=\"onPreventClick($event)\">\n      <div class=\"aside-header\">\n        @if (data.captionTplRef) {\n          <ng-container [ngTemplateOutlet]=\"data.captionTplRef\"></ng-container>\n        } @else if (data.caption) {\n          {{ data.caption }}\n        }\n      </div>\n      <div class=\"aside-body\">\n        <div class=\"aside-body-scroll\">\n          @if (data.descriptionTplRef) {\n            <ng-container [ngTemplateOutlet]=\"data.descriptionTplRef\"></ng-container>\n          } @else if (data.description) {\n            {{ data.description }}\n          }\n        </div>\n      </div>\n    </aside>\n  }\n</div>\n", styles: [":host{width:100vw;height:100vh;display:flex;flex-direction:column}:host .title-container{position:absolute;inset-inline-start:calc(var(--spacing, .25rem) * 4);top:calc(var(--spacing, .25rem) * 4);z-index:3}:host .controls{position:absolute;inset-inline-end:calc(var(--spacing, .25rem) * 4);top:calc(var(--spacing, .25rem) * 4);z-index:3;display:flex;flex-direction:column;gap:calc(var(--spacing, .25rem) * 4)}:host .header{position:absolute;top:0;inset-inline-start:0;inset-inline-end:0;height:calc(var(--spacing, .25rem) * 20);flex:none;padding-left:calc(var(--spacing, .25rem) * 4);padding-right:calc(var(--spacing, .25rem) * 4);z-index:3;display:flex;align-items:center;justify-content:space-between}:host .content{box-shadow:0 1px 3px #0000001a,0 1px 2px -1px #0000001a;z-index:2;display:flex;align-items:center;justify-content:center;gap:calc(var(--spacing, .25rem) * 8);width:100vw;height:100vh}:host.scaled img{cursor:grab}:host.dragging img{cursor:grabbing}:host:has(.aside) .content{padding-inline-end:420px}:host .img{-webkit-user-select:none;user-select:none;scale:var(--emr-image-viewer-picture-scale, 1);transition:scale .15s linear}:host:not(.dragging) img{transition:transform .15s linear,scale .15s linear}:host .title{background-color:var(--color-neutral-700);font-weight:500;height:calc(var(--spacing, .25rem) * 10);border-radius:calc(infinity * 1px);padding-left:calc(var(--spacing, .25rem) * 4);padding-right:calc(var(--spacing, .25rem) * 4);font-size:var(--text-tiny);display:flex;align-items:center;background:var(--color-neutral-700);color:var(--color-neutral-300)}:host .close,:host .zoom{width:calc(var(--spacing, .25rem) * 10);height:calc(var(--spacing, .25rem) * 10);border-radius:calc(infinity * 1px);cursor:pointer;display:flex;flex:none;align-items:center;justify-content:center;background:var(--color-neutral-700);color:var(--color-neutral-300)}:host .close:hover,:host .zoom:hover{background:var(--color-neutral-800);color:var(--color-neutral-200)}:host .close:active,:host .zoom:active{background:var(--color-neutral-950);color:var(--color-neutral-100)}:host .aside{width:420px;position:absolute;inset-inline-end:0;top:0;bottom:0;flex:none;background:var(--color-neutral-50);display:flex;flex-direction:column;gap:calc(var(--spacing, .25rem) * 5);height:100%;padding-inline-end:calc(var(--spacing, .25rem) * 10)}:host .aside-header{font-weight:700;padding-left:calc(var(--spacing, .25rem) * 8);padding-right:calc(var(--spacing, .25rem) * 8);padding-top:calc(var(--spacing, .25rem) * 8)}:host .aside-body{position:relative;flex-grow:1;font-size:.875rem;color:var(--color-neutral-600);line-height:var(--leading-relaxed)}:host .aside-body-scroll{position:absolute;inset:0;overflow-y:auto;padding-left:calc(var(--spacing, .25rem) * 8);padding-right:calc(var(--spacing, .25rem) * 8);padding-bottom:calc(var(--spacing, .25rem) * 8)}:host .image{position:relative;display:flex;align-items:center;justify-content:flex-end;height:100%;max-width:90%;max-height:90%}:host .image img{max-height:100%;max-width:100%}:host .spinner{visibility:hidden;width:max-content;position:absolute;top:50%;left:50%;z-index:-1;--tw-translate-y: -50%;--tw-translate-x: -50%;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}:host.loading .spinner{visibility:visible;z-index:1}:host.loading img{visibility:hidden;position:relative;z-index:-50}:host-context(html.dark) .title{background:var(--color-neutral-100);color:var(--color-neutral-600)}:host-context(html.dark) .close{background:var(--color-neutral-100);color:var(--color-neutral-600)}:host-context(html.dark) .close:hover{background:var(--color-neutral-200);color:var(--color-neutral-700)}:host-context(html.dark) .close:active{background:var(--color-neutral-300);color:var(--color-neutral-900)}:host-context(html.dark) .aside{background:var(--color-neutral-900)}:host-context(html.dark) .aside-body{color:var(--color-neutral-400)}\n/*! tailwindcss v4.3.2 | MIT License | https://tailwindcss.com */\n"], dependencies: [{ kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "mode", "value", "diameter", "strokeWidth"], exportAs: ["matProgressSpinner"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: ImageViewerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.22", type: ImageViewerComponent, isStandalone: true, selector: "emr-image-viewer", host: { properties: { "class.loading": "loading", "class.dragging": "_dragging", "class.scaled": "scale !== 1" }, classAttribute: "emr-image-viewer" }, exportAs: ["emrImageViewer"], ngImport: i0, template: "<div class=\"title-container\">\n  @if (hasTitle()) {\n    <div class=\"title\">\n      @if (data.titleTplRef) {\n        <ng-container [ngTemplateOutlet]=\"data.titleTplRef\"></ng-container>\n      } @else if (data.caption) {\n        {{ data.title }}\n      }\n    </div>\n  }\n</div>\n<div class=\"controls\" (click)=\"onPreventClick($event)\">\n  <div class=\"w-max\">\n    <button (click)=\"pictureRef.close()\" class=\"close\">\n      <mat-icon>close</mat-icon>\n    </button>\n  </div>\n  <div class=\"w-max\">\n    <button class=\"zoom\" (click)=\"toggleZoom()\" [disabled]=\"scaleMax === 1 || null\">\n      @if (scale === this.scaleMin) {\n        <mat-icon>zoom_in</mat-icon>\n      } @else {\n        <mat-icon>zoom_out</mat-icon>\n      }\n    </button>\n  </div>\n</div>\n<div class=\"content\" (click)=\"onBackdropClick()\">\n  <div class=\"image\" (dragstart)=\"onDragStart($event)\">\n    @if (loading) {\n      <div class=\"spinner\">\n        <mat-spinner/>\n      </div>\n    }\n    <img [src]=\"data.sourceUrl\" alt=\"\" (load)=\"onLoad($event)\" (click)=\"onPreventClick($event)\" class=\"img\">\n  </div>\n  @if (hasAside()) {\n    <aside class=\"aside\" (click)=\"onPreventClick($event)\">\n      <div class=\"aside-header\">\n        @if (data.captionTplRef) {\n          <ng-container [ngTemplateOutlet]=\"data.captionTplRef\"></ng-container>\n        } @else if (data.caption) {\n          {{ data.caption }}\n        }\n      </div>\n      <div class=\"aside-body\">\n        <div class=\"aside-body-scroll\">\n          @if (data.descriptionTplRef) {\n            <ng-container [ngTemplateOutlet]=\"data.descriptionTplRef\"></ng-container>\n          } @else if (data.description) {\n            {{ data.description }}\n          }\n        </div>\n      </div>\n    </aside>\n  }\n</div>\n", styles: [":host{width:100vw;height:100vh;display:flex;flex-direction:column}:host .title-container{position:absolute;inset-inline-start:calc(var(--spacing, .25rem) * 4);top:calc(var(--spacing, .25rem) * 4);z-index:3}:host .controls{position:absolute;inset-inline-end:calc(var(--spacing, .25rem) * 4);top:calc(var(--spacing, .25rem) * 4);z-index:3;display:flex;flex-direction:column;gap:calc(var(--spacing, .25rem) * 4)}:host .header{position:absolute;top:0;inset-inline-start:0;inset-inline-end:0;height:calc(var(--spacing, .25rem) * 20);flex:none;padding-left:calc(var(--spacing, .25rem) * 4);padding-right:calc(var(--spacing, .25rem) * 4);z-index:3;display:flex;align-items:center;justify-content:space-between}:host .content{box-shadow:0 1px 3px #0000001a,0 1px 2px -1px #0000001a;z-index:2;display:flex;align-items:center;justify-content:center;gap:calc(var(--spacing, .25rem) * 8);width:100vw;height:100vh}:host.scaled img{cursor:grab}:host.dragging img{cursor:grabbing}:host:has(.aside) .content{padding-inline-end:420px}:host .img{-webkit-user-select:none;user-select:none;scale:var(--emr-image-viewer-picture-scale, 1);transition:scale .15s linear}:host:not(.dragging) img{transition:transform .15s linear,scale .15s linear}:host .title{background-color:var(--color-neutral-700);font-weight:500;height:calc(var(--spacing, .25rem) * 10);border-radius:calc(infinity * 1px);padding-left:calc(var(--spacing, .25rem) * 4);padding-right:calc(var(--spacing, .25rem) * 4);font-size:var(--text-tiny);display:flex;align-items:center;background:var(--color-neutral-700);color:var(--color-neutral-300)}:host .close,:host .zoom{width:calc(var(--spacing, .25rem) * 10);height:calc(var(--spacing, .25rem) * 10);border-radius:calc(infinity * 1px);cursor:pointer;display:flex;flex:none;align-items:center;justify-content:center;background:var(--color-neutral-700);color:var(--color-neutral-300)}:host .close:hover,:host .zoom:hover{background:var(--color-neutral-800);color:var(--color-neutral-200)}:host .close:active,:host .zoom:active{background:var(--color-neutral-950);color:var(--color-neutral-100)}:host .aside{width:420px;position:absolute;inset-inline-end:0;top:0;bottom:0;flex:none;background:var(--color-neutral-50);display:flex;flex-direction:column;gap:calc(var(--spacing, .25rem) * 5);height:100%;padding-inline-end:calc(var(--spacing, .25rem) * 10)}:host .aside-header{font-weight:700;padding-left:calc(var(--spacing, .25rem) * 8);padding-right:calc(var(--spacing, .25rem) * 8);padding-top:calc(var(--spacing, .25rem) * 8)}:host .aside-body{position:relative;flex-grow:1;font-size:.875rem;color:var(--color-neutral-600);line-height:var(--leading-relaxed)}:host .aside-body-scroll{position:absolute;inset:0;overflow-y:auto;padding-left:calc(var(--spacing, .25rem) * 8);padding-right:calc(var(--spacing, .25rem) * 8);padding-bottom:calc(var(--spacing, .25rem) * 8)}:host .image{position:relative;display:flex;align-items:center;justify-content:flex-end;height:100%;max-width:90%;max-height:90%}:host .image img{max-height:100%;max-width:100%}:host .spinner{visibility:hidden;width:max-content;position:absolute;top:50%;left:50%;z-index:-1;--tw-translate-y: -50%;--tw-translate-x: -50%;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}:host.loading .spinner{visibility:visible;z-index:1}:host.loading img{visibility:hidden;position:relative;z-index:-50}:host-context(html.dark) .title{background:var(--color-neutral-100);color:var(--color-neutral-600)}:host-context(html.dark) .close{background:var(--color-neutral-100);color:var(--color-neutral-600)}:host-context(html.dark) .close:hover{background:var(--color-neutral-200);color:var(--color-neutral-700)}:host-context(html.dark) .close:active{background:var(--color-neutral-300);color:var(--color-neutral-900)}:host-context(html.dark) .aside{background:var(--color-neutral-900)}:host-context(html.dark) .aside-body{color:var(--color-neutral-400)}\n/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */\n"], dependencies: [{ kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "mode", "value", "diameter", "strokeWidth"], exportAs: ["matProgressSpinner"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: ImageViewerComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: ImageViewerComponent, decorators: [{
             type: Component,
             args: [{ selector: 'emr-image-viewer', exportAs: 'emrImageViewer', imports: [
                         MatIcon,
@@ -200,7 +200,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImpo
                         '[class.loading]': 'loading',
                         '[class.dragging]': '_dragging',
                         '[class.scaled]': 'scale !== 1'
-                    }, template: "<div class=\"title-container\">\n  @if (hasTitle()) {\n    <div class=\"title\">\n      @if (data.titleTplRef) {\n        <ng-container [ngTemplateOutlet]=\"data.titleTplRef\"></ng-container>\n      } @else if (data.caption) {\n        {{ data.title }}\n      }\n    </div>\n  }\n</div>\n<div class=\"controls\" (click)=\"onPreventClick($event)\">\n  <div class=\"w-max\">\n    <button (click)=\"pictureRef.close()\" class=\"close\">\n      <mat-icon>close</mat-icon>\n    </button>\n  </div>\n  <div class=\"w-max\">\n    <button class=\"zoom\" (click)=\"toggleZoom()\" [disabled]=\"scaleMax === 1 || null\">\n      @if (scale === this.scaleMin) {\n        <mat-icon>zoom_in</mat-icon>\n      } @else {\n        <mat-icon>zoom_out</mat-icon>\n      }\n    </button>\n  </div>\n</div>\n<div class=\"content\" (click)=\"onBackdropClick()\">\n  <div class=\"image\" (dragstart)=\"onDragStart($event)\">\n    @if (loading) {\n      <div class=\"spinner\">\n        <mat-spinner/>\n      </div>\n    }\n    <img [src]=\"data.sourceUrl\" alt=\"\" (load)=\"onLoad($event)\" (click)=\"onPreventClick($event)\" class=\"img\">\n  </div>\n  @if (hasAside()) {\n    <aside class=\"aside\" (click)=\"onPreventClick($event)\">\n      <div class=\"aside-header\">\n        @if (data.captionTplRef) {\n          <ng-container [ngTemplateOutlet]=\"data.captionTplRef\"></ng-container>\n        } @else if (data.caption) {\n          {{ data.caption }}\n        }\n      </div>\n      <div class=\"aside-body\">\n        <div class=\"aside-body-scroll\">\n          @if (data.descriptionTplRef) {\n            <ng-container [ngTemplateOutlet]=\"data.descriptionTplRef\"></ng-container>\n          } @else if (data.description) {\n            {{ data.description }}\n          }\n        </div>\n      </div>\n    </aside>\n  }\n</div>\n", styles: [":host{width:100vw;height:100vh;display:flex;flex-direction:column}:host .title-container{position:absolute;inset-inline-start:calc(var(--spacing, .25rem) * 4);top:calc(var(--spacing, .25rem) * 4);z-index:3}:host .controls{position:absolute;inset-inline-end:calc(var(--spacing, .25rem) * 4);top:calc(var(--spacing, .25rem) * 4);z-index:3;display:flex;flex-direction:column;gap:calc(var(--spacing, .25rem) * 4)}:host .header{position:absolute;top:0;inset-inline-start:0;inset-inline-end:0;height:calc(var(--spacing, .25rem) * 20);flex:none;padding-left:calc(var(--spacing, .25rem) * 4);padding-right:calc(var(--spacing, .25rem) * 4);z-index:3;display:flex;align-items:center;justify-content:space-between}:host .content{box-shadow:0 1px 3px #0000001a,0 1px 2px -1px #0000001a;z-index:2;display:flex;align-items:center;justify-content:center;gap:calc(var(--spacing, .25rem) * 8);width:100vw;height:100vh}:host.scaled img{cursor:grab}:host.dragging img{cursor:grabbing}:host:has(.aside) .content{padding-inline-end:420px}:host .img{-webkit-user-select:none;user-select:none;scale:var(--emr-image-viewer-picture-scale, 1);transition:scale .15s linear}:host:not(.dragging) img{transition:transform .15s linear,scale .15s linear}:host .title{background-color:var(--color-neutral-700);font-weight:500;height:calc(var(--spacing, .25rem) * 10);border-radius:calc(infinity * 1px);padding-left:calc(var(--spacing, .25rem) * 4);padding-right:calc(var(--spacing, .25rem) * 4);font-size:var(--text-tiny);display:flex;align-items:center;background:var(--color-neutral-700);color:var(--color-neutral-300)}:host .close,:host .zoom{width:calc(var(--spacing, .25rem) * 10);height:calc(var(--spacing, .25rem) * 10);border-radius:calc(infinity * 1px);cursor:pointer;display:flex;flex:none;align-items:center;justify-content:center;background:var(--color-neutral-700);color:var(--color-neutral-300)}:host .close:hover,:host .zoom:hover{background:var(--color-neutral-800);color:var(--color-neutral-200)}:host .close:active,:host .zoom:active{background:var(--color-neutral-950);color:var(--color-neutral-100)}:host .aside{width:420px;position:absolute;inset-inline-end:0;top:0;bottom:0;flex:none;background:var(--color-neutral-50);display:flex;flex-direction:column;gap:calc(var(--spacing, .25rem) * 5);height:100%;padding-inline-end:calc(var(--spacing, .25rem) * 10)}:host .aside-header{font-weight:700;padding-left:calc(var(--spacing, .25rem) * 8);padding-right:calc(var(--spacing, .25rem) * 8);padding-top:calc(var(--spacing, .25rem) * 8)}:host .aside-body{position:relative;flex-grow:1;font-size:.875rem;color:var(--color-neutral-600);line-height:var(--leading-relaxed)}:host .aside-body-scroll{position:absolute;inset:0;overflow-y:auto;padding-left:calc(var(--spacing, .25rem) * 8);padding-right:calc(var(--spacing, .25rem) * 8);padding-bottom:calc(var(--spacing, .25rem) * 8)}:host .image{position:relative;display:flex;align-items:center;justify-content:flex-end;height:100%;max-width:90%;max-height:90%}:host .image img{max-height:100%;max-width:100%}:host .spinner{visibility:hidden;width:max-content;position:absolute;top:50%;left:50%;z-index:-1;--tw-translate-y: -50%;--tw-translate-x: -50%;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}:host.loading .spinner{visibility:visible;z-index:1}:host.loading img{visibility:hidden;position:relative;z-index:-50}:host-context(html.dark) .title{background:var(--color-neutral-100);color:var(--color-neutral-600)}:host-context(html.dark) .close{background:var(--color-neutral-100);color:var(--color-neutral-600)}:host-context(html.dark) .close:hover{background:var(--color-neutral-200);color:var(--color-neutral-700)}:host-context(html.dark) .close:active{background:var(--color-neutral-300);color:var(--color-neutral-900)}:host-context(html.dark) .aside{background:var(--color-neutral-900)}:host-context(html.dark) .aside-body{color:var(--color-neutral-400)}\n/*! tailwindcss v4.3.2 | MIT License | https://tailwindcss.com */\n"] }]
+                    }, template: "<div class=\"title-container\">\n  @if (hasTitle()) {\n    <div class=\"title\">\n      @if (data.titleTplRef) {\n        <ng-container [ngTemplateOutlet]=\"data.titleTplRef\"></ng-container>\n      } @else if (data.caption) {\n        {{ data.title }}\n      }\n    </div>\n  }\n</div>\n<div class=\"controls\" (click)=\"onPreventClick($event)\">\n  <div class=\"w-max\">\n    <button (click)=\"pictureRef.close()\" class=\"close\">\n      <mat-icon>close</mat-icon>\n    </button>\n  </div>\n  <div class=\"w-max\">\n    <button class=\"zoom\" (click)=\"toggleZoom()\" [disabled]=\"scaleMax === 1 || null\">\n      @if (scale === this.scaleMin) {\n        <mat-icon>zoom_in</mat-icon>\n      } @else {\n        <mat-icon>zoom_out</mat-icon>\n      }\n    </button>\n  </div>\n</div>\n<div class=\"content\" (click)=\"onBackdropClick()\">\n  <div class=\"image\" (dragstart)=\"onDragStart($event)\">\n    @if (loading) {\n      <div class=\"spinner\">\n        <mat-spinner/>\n      </div>\n    }\n    <img [src]=\"data.sourceUrl\" alt=\"\" (load)=\"onLoad($event)\" (click)=\"onPreventClick($event)\" class=\"img\">\n  </div>\n  @if (hasAside()) {\n    <aside class=\"aside\" (click)=\"onPreventClick($event)\">\n      <div class=\"aside-header\">\n        @if (data.captionTplRef) {\n          <ng-container [ngTemplateOutlet]=\"data.captionTplRef\"></ng-container>\n        } @else if (data.caption) {\n          {{ data.caption }}\n        }\n      </div>\n      <div class=\"aside-body\">\n        <div class=\"aside-body-scroll\">\n          @if (data.descriptionTplRef) {\n            <ng-container [ngTemplateOutlet]=\"data.descriptionTplRef\"></ng-container>\n          } @else if (data.description) {\n            {{ data.description }}\n          }\n        </div>\n      </div>\n    </aside>\n  }\n</div>\n", styles: [":host{width:100vw;height:100vh;display:flex;flex-direction:column}:host .title-container{position:absolute;inset-inline-start:calc(var(--spacing, .25rem) * 4);top:calc(var(--spacing, .25rem) * 4);z-index:3}:host .controls{position:absolute;inset-inline-end:calc(var(--spacing, .25rem) * 4);top:calc(var(--spacing, .25rem) * 4);z-index:3;display:flex;flex-direction:column;gap:calc(var(--spacing, .25rem) * 4)}:host .header{position:absolute;top:0;inset-inline-start:0;inset-inline-end:0;height:calc(var(--spacing, .25rem) * 20);flex:none;padding-left:calc(var(--spacing, .25rem) * 4);padding-right:calc(var(--spacing, .25rem) * 4);z-index:3;display:flex;align-items:center;justify-content:space-between}:host .content{box-shadow:0 1px 3px #0000001a,0 1px 2px -1px #0000001a;z-index:2;display:flex;align-items:center;justify-content:center;gap:calc(var(--spacing, .25rem) * 8);width:100vw;height:100vh}:host.scaled img{cursor:grab}:host.dragging img{cursor:grabbing}:host:has(.aside) .content{padding-inline-end:420px}:host .img{-webkit-user-select:none;user-select:none;scale:var(--emr-image-viewer-picture-scale, 1);transition:scale .15s linear}:host:not(.dragging) img{transition:transform .15s linear,scale .15s linear}:host .title{background-color:var(--color-neutral-700);font-weight:500;height:calc(var(--spacing, .25rem) * 10);border-radius:calc(infinity * 1px);padding-left:calc(var(--spacing, .25rem) * 4);padding-right:calc(var(--spacing, .25rem) * 4);font-size:var(--text-tiny);display:flex;align-items:center;background:var(--color-neutral-700);color:var(--color-neutral-300)}:host .close,:host .zoom{width:calc(var(--spacing, .25rem) * 10);height:calc(var(--spacing, .25rem) * 10);border-radius:calc(infinity * 1px);cursor:pointer;display:flex;flex:none;align-items:center;justify-content:center;background:var(--color-neutral-700);color:var(--color-neutral-300)}:host .close:hover,:host .zoom:hover{background:var(--color-neutral-800);color:var(--color-neutral-200)}:host .close:active,:host .zoom:active{background:var(--color-neutral-950);color:var(--color-neutral-100)}:host .aside{width:420px;position:absolute;inset-inline-end:0;top:0;bottom:0;flex:none;background:var(--color-neutral-50);display:flex;flex-direction:column;gap:calc(var(--spacing, .25rem) * 5);height:100%;padding-inline-end:calc(var(--spacing, .25rem) * 10)}:host .aside-header{font-weight:700;padding-left:calc(var(--spacing, .25rem) * 8);padding-right:calc(var(--spacing, .25rem) * 8);padding-top:calc(var(--spacing, .25rem) * 8)}:host .aside-body{position:relative;flex-grow:1;font-size:.875rem;color:var(--color-neutral-600);line-height:var(--leading-relaxed)}:host .aside-body-scroll{position:absolute;inset:0;overflow-y:auto;padding-left:calc(var(--spacing, .25rem) * 8);padding-right:calc(var(--spacing, .25rem) * 8);padding-bottom:calc(var(--spacing, .25rem) * 8)}:host .image{position:relative;display:flex;align-items:center;justify-content:flex-end;height:100%;max-width:90%;max-height:90%}:host .image img{max-height:100%;max-width:100%}:host .spinner{visibility:hidden;width:max-content;position:absolute;top:50%;left:50%;z-index:-1;--tw-translate-y: -50%;--tw-translate-x: -50%;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}:host.loading .spinner{visibility:visible;z-index:1}:host.loading img{visibility:hidden;position:relative;z-index:-50}:host-context(html.dark) .title{background:var(--color-neutral-100);color:var(--color-neutral-600)}:host-context(html.dark) .close{background:var(--color-neutral-100);color:var(--color-neutral-600)}:host-context(html.dark) .close:hover{background:var(--color-neutral-200);color:var(--color-neutral-700)}:host-context(html.dark) .close:active{background:var(--color-neutral-300);color:var(--color-neutral-900)}:host-context(html.dark) .aside{background:var(--color-neutral-900)}:host-context(html.dark) .aside-body{color:var(--color-neutral-400)}\n/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */\n"] }]
         }] });
 
 class ImageViewerDirective {
@@ -238,10 +238,10 @@ class ImageViewerDirective {
         });
         return pictureRef;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: ImageViewerDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.25", type: ImageViewerDirective, isStandalone: true, selector: "[emrImageViewer]", host: { classAttribute: "emr-image-viewer" }, exportAs: ["emrImageViewer"], ngImport: i0 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: ImageViewerDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.22", type: ImageViewerDirective, isStandalone: true, selector: "[emrImageViewer]", host: { classAttribute: "emr-image-viewer" }, exportAs: ["emrImageViewer"], ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: ImageViewerDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: ImageViewerDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[emrImageViewer]',
@@ -255,10 +255,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImpo
 
 class ImageViewerPictureCaptionDirective {
     templateRef = inject(TemplateRef);
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: ImageViewerPictureCaptionDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.25", type: ImageViewerPictureCaptionDirective, isStandalone: true, selector: "[emrImageViewerPictureCaption]", ngImport: i0 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: ImageViewerPictureCaptionDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.22", type: ImageViewerPictureCaptionDirective, isStandalone: true, selector: "[emrImageViewerPictureCaption]", ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: ImageViewerPictureCaptionDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: ImageViewerPictureCaptionDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[emrImageViewerPictureCaption]',
@@ -268,10 +268,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImpo
 
 class ImageViewerPictureDescriptionDirective {
     templateRef = inject(TemplateRef);
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: ImageViewerPictureDescriptionDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.25", type: ImageViewerPictureDescriptionDirective, isStandalone: true, selector: "[emrImageViewerPictureDescription]", ngImport: i0 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: ImageViewerPictureDescriptionDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.22", type: ImageViewerPictureDescriptionDirective, isStandalone: true, selector: "[emrImageViewerPictureDescription]", ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: ImageViewerPictureDescriptionDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: ImageViewerPictureDescriptionDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[emrImageViewerPictureDescription]',
@@ -281,10 +281,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImpo
 
 class ImageViewerPictureTitleDirective {
     templateRef = inject(TemplateRef);
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: ImageViewerPictureTitleDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.25", type: ImageViewerPictureTitleDirective, isStandalone: true, selector: "[emrImageViewerPictureTitle]", ngImport: i0 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: ImageViewerPictureTitleDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.22", type: ImageViewerPictureTitleDirective, isStandalone: true, selector: "[emrImageViewerPictureTitle]", ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: ImageViewerPictureTitleDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: ImageViewerPictureTitleDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[emrImageViewerPictureTitle]',
@@ -294,13 +294,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImpo
 
 class ImageViewerPictureDirective {
     _imageViewer = inject(ImageViewerDirective);
-    _titleTplRef = contentChild(ImageViewerPictureTitleDirective, ...(ngDevMode ? [{ debugName: "_titleTplRef" }] : []));
-    _captionTplRef = contentChild(ImageViewerPictureCaptionDirective, ...(ngDevMode ? [{ debugName: "_captionTplRef" }] : []));
-    _descriptionTplRef = contentChild(ImageViewerPictureDescriptionDirective, ...(ngDevMode ? [{ debugName: "_descriptionTplRef" }] : []));
-    sourceUrl = input.required(...(ngDevMode ? [{ debugName: "sourceUrl" }] : []));
-    caption = input(...(ngDevMode ? [undefined, { debugName: "caption" }] : []));
-    title = input(...(ngDevMode ? [undefined, { debugName: "title" }] : []));
-    description = input(...(ngDevMode ? [undefined, { debugName: "description" }] : []));
+    _titleTplRef = contentChild(ImageViewerPictureTitleDirective, ...(ngDevMode ? [{ debugName: "_titleTplRef" }] : /* istanbul ignore next */ []));
+    _captionTplRef = contentChild(ImageViewerPictureCaptionDirective, ...(ngDevMode ? [{ debugName: "_captionTplRef" }] : /* istanbul ignore next */ []));
+    _descriptionTplRef = contentChild(ImageViewerPictureDescriptionDirective, ...(ngDevMode ? [{ debugName: "_descriptionTplRef" }] : /* istanbul ignore next */ []));
+    sourceUrl = input.required(...(ngDevMode ? [{ debugName: "sourceUrl" }] : /* istanbul ignore next */ []));
+    caption = input(...(ngDevMode ? [undefined, { debugName: "caption" }] : /* istanbul ignore next */ []));
+    title = input(...(ngDevMode ? [undefined, { debugName: "title" }] : /* istanbul ignore next */ []));
+    description = input(...(ngDevMode ? [undefined, { debugName: "description" }] : /* istanbul ignore next */ []));
     onClick(event) {
         event.preventDefault();
         event.stopPropagation();
@@ -314,15 +314,15 @@ class ImageViewerPictureDirective {
             descriptionTplRef: this._descriptionTplRef()?.templateRef
         });
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: ImageViewerPictureDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.2.0", version: "20.3.25", type: ImageViewerPictureDirective, isStandalone: true, selector: "[emrImageViewerPicture]", inputs: { sourceUrl: { classPropertyName: "sourceUrl", publicName: "sourceUrl", isSignal: true, isRequired: true, transformFunction: null }, caption: { classPropertyName: "caption", publicName: "caption", isSignal: true, isRequired: false, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, description: { classPropertyName: "description", publicName: "description", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "click": "onClick($event)" }, classAttribute: "emr-image-viewer-picture" }, providers: [
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: ImageViewerPictureDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.2.0", version: "21.2.22", type: ImageViewerPictureDirective, isStandalone: true, selector: "[emrImageViewerPicture]", inputs: { sourceUrl: { classPropertyName: "sourceUrl", publicName: "sourceUrl", isSignal: true, isRequired: true, transformFunction: null }, caption: { classPropertyName: "caption", publicName: "caption", isSignal: true, isRequired: false, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, description: { classPropertyName: "description", publicName: "description", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "click": "onClick($event)" }, classAttribute: "emr-image-viewer-picture" }, providers: [
             {
                 provide: IMAGE_VIEWER,
                 useExisting: ImageViewerPictureDirective
             }
         ], queries: [{ propertyName: "_titleTplRef", first: true, predicate: ImageViewerPictureTitleDirective, descendants: true, isSignal: true }, { propertyName: "_captionTplRef", first: true, predicate: ImageViewerPictureCaptionDirective, descendants: true, isSignal: true }, { propertyName: "_descriptionTplRef", first: true, predicate: ImageViewerPictureDescriptionDirective, descendants: true, isSignal: true }], exportAs: ["emrImageViewerPicture"], ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: ImageViewerPictureDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: ImageViewerPictureDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[emrImageViewerPicture]',

package/fesm2022/elementar-rt-components-image-viewer.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"elementar-rt-components-image-viewer.mjs","sources":["../../../projects/components/image-viewer/src/picture-ref.ts","../../../projects/components/image-viewer/src/types.ts","../../../projects/components/image-viewer/src/image-viewer/image-viewer.component.ts","../../../projects/components/image-viewer/src/image-viewer/image-viewer.component.html","../../../projects/components/image-viewer/src/image-viewer.directive.ts","../../../projects/components/image-viewer/src/image-viewer-picture-caption.directive.ts","../../../projects/components/image-viewer/src/image-viewer-picture-description.directive.ts","../../../projects/components/image-viewer/src/image-viewer-picture-title.directive.ts","../../../projects/components/image-viewer/src/image-viewer-picture.directive.ts","../../../projects/components/image-viewer/elementar-rt-components-image-viewer.ts"],"sourcesContent":["import { EventEmitter } from '@angular/core';\n\nexport class PictureRef {\n  readonly closed = new EventEmitter();\n\n  close(): void {\n    this.closed.emit();\n  }\n}\n","import { InjectionToken, TemplateRef } from '@angular/core';\nimport { PictureRef } from './picture-ref';\n\nexport interface PictureOptions {\n  sourceUrl: string;\n  title?: string | undefined;\n  caption?: string | undefined;\n  description?: string | undefined;\n  titleTplRef?: TemplateRef<any> | undefined;\n  captionTplRef?: TemplateRef<any> | undefined;\n  descriptionTplRef?: TemplateRef<any> | undefined;\n}\n\nexport const IMAGE_VIEWER = new InjectionToken('IMAGE_VIEWER');\nexport const IMAGE_VIEWER_PICTURE_REF = new InjectionToken<PictureRef>('IMAGE_VIEWER_PICTURE_REF');\nexport const IMAGE_VIEWER_PICTURE_DATA = new InjectionToken<PictureOptions>('IMAGE_VIEWER_PICTURE_DATA');\n","import { Component, computed, DestroyRef, ElementRef, inject, Renderer2, DOCUMENT } from '@angular/core';\nimport { IMAGE_VIEWER_PICTURE_DATA, IMAGE_VIEWER_PICTURE_REF } from '../types';\nimport { MatIcon } from '@angular/material/icon';\nimport { MatProgressSpinner } from '@angular/material/progress-spinner';\nimport { NgTemplateOutlet } from '@angular/common';\nimport { fromEvent } from 'rxjs';\nimport { takeUntilDestroyed } from '@angular/core/rxjs-interop';\n\n@Component({\n  selector: 'emr-image-viewer',\n  exportAs: 'emrImageViewer',\n  imports: [\n    MatIcon,\n    MatProgressSpinner,\n    NgTemplateOutlet\n  ],\n  templateUrl: './image-viewer.component.html',\n  styleUrl: './image-viewer.component.scss',\n  host: {\n    'class': 'emr-image-viewer',\n    '[class.loading]': 'loading',\n    '[class.dragging]': '_dragging',\n    '[class.scaled]': 'scale !== 1'\n  }\n})\nexport class ImageViewerComponent {\n  readonly elementRef = inject(ElementRef);\n  private _document = inject(DOCUMENT);\n  private _destroyRef = inject(DestroyRef);\n  private _renderer = inject(Renderer2);\n  private _startClientY = 0;\n  private _startClientX = 0;\n  private _offsetY = 0;\n  private _offsetX = 0;\n  private _tmpOffsetY = 0;\n  private _tmpOffsetX = 0;\n  protected _dragging = false;\n  readonly pictureRef = inject(IMAGE_VIEWER_PICTURE_REF);\n  readonly data = inject(IMAGE_VIEWER_PICTURE_DATA);\n  loading = true;\n  scale = 1;\n  image: HTMLImageElement;\n  alreadyDragged = false;\n  scaleMin = 1;\n  scaleMax = 1;\n  padding = 30;\n\n  scaled = computed<boolean>(() => {\n    return this.scale !== 1;\n  });\n  hasTitle = computed(() => {\n    return !!(this.data.title || this.data.titleTplRef);\n  });\n  hasAside = computed(() => {\n    return !!(this.data.caption || this.data.description || this.data.captionTplRef || this.data.descriptionTplRef);\n  });\n\n  onLoad(event: Event): void {\n    this.loading = false;\n    this.image = (event.target as HTMLImageElement);\n\n    if (this.image.width > this.image.height) {\n      this.scaleMax = this.image.naturalWidth / this.image.width;\n    } else {\n      this.scaleMax = this.image.naturalHeight / this.image.height;\n    }\n\n    const image = this.image;\n    fromEvent(image, 'mousedown')\n      .pipe(\n        takeUntilDestroyed(this._destroyRef)\n      )\n      .subscribe((event: MouseEvent | any) => {\n        if (this.scale === this.scaleMin || event.button === 2) {\n          return;\n        }\n\n        this._dragging = true;\n        this._startClientY = event.clientY;\n        this._startClientX = event.clientX;\n      })\n    ;\n    fromEvent(this._document, 'mousemove')\n      .pipe(\n        takeUntilDestroyed(this._destroyRef)\n      )\n      .subscribe((event: any) => {\n        if (this._dragging) {\n          const scaleFactor = (1 / this.scale);\n          let offsetY = (event.clientY - this._startClientY) * scaleFactor;\n          let offsetX = (event.clientX - this._startClientX) * scaleFactor;\n          this._transform(offsetY, offsetX);\n        }\n      })\n    ;\n    fromEvent(this._document, 'mouseup')\n      .pipe(\n        takeUntilDestroyed(this._destroyRef)\n      )\n      .subscribe((event: any) => {\n        if (this._dragging) {\n          const element = this.elementRef.nativeElement as HTMLElement;\n          const elementRect = element.getBoundingClientRect();\n          this._renderer.removeClass(element, 'dragging');\n          this._dragging = false;\n          let imageWidth = Math.floor(image.getBoundingClientRect().width);\n          let imageHeight = Math.floor(image.getBoundingClientRect().height);\n          let imageViewportWidth = this.hasAside() ? elementRect.width - 420 : elementRect.width;\n          let imageViewportHeight = elementRect.height;\n\n          if (imageWidth <= imageViewportWidth && imageHeight <= imageViewportHeight) {\n            this._tmpOffsetY = 0;\n            this._tmpOffsetX = 0;\n            this._offsetY = 0;\n            this._offsetX = 0;\n            this._renderer.setStyle(image, 'transform', `translate(0px,0px)`);\n          } else {\n            const imageRect = image.getBoundingClientRect();\n            const widthDiff = imageViewportWidth - imageWidth;\n            const heightDiff = imageViewportHeight - imageHeight;\n            const xPositionDiff = widthDiff / this.scale / 2;\n            const yPositionDiff = heightDiff / this.scale / 2;\n\n            if (imageRect.x > 0 && imageRect.y > 0) {\n              this._tmpOffsetY = yPositionDiff * -1 + this.padding;\n              this._tmpOffsetX = xPositionDiff * -1 + this.padding;\n            } else if (imageRect.x < widthDiff && imageRect.y > 0) {\n              this._tmpOffsetY = yPositionDiff * -1 + this.padding;\n              this._tmpOffsetX = xPositionDiff - this.padding;\n            } else if (imageRect.x < widthDiff && imageRect.y < heightDiff) {\n              this._tmpOffsetY = yPositionDiff - this.padding;\n              this._tmpOffsetX = xPositionDiff - this.padding;\n            } else if (imageRect.x > 0 && imageRect.y < heightDiff) {\n              this._tmpOffsetY = yPositionDiff - this.padding;\n              this._tmpOffsetX = xPositionDiff * -1 + this.padding;\n            }\n\n            if (imageWidth < imageViewportWidth) {\n              this._tmpOffsetX = 0;\n            }\n\n            if (imageHeight < imageViewportHeight) {\n              this._tmpOffsetY = 0;\n            }\n\n            this._offsetY = this._tmpOffsetY;\n            this._offsetX = this._tmpOffsetX;\n            this._renderer.setStyle(\n              image,\n              'transform', `translate(${this._tmpOffsetX}px,${this._tmpOffsetY}px)`\n            );\n          }\n        }\n      })\n    ;\n  }\n\n  onBackdropClick(): void {\n    this.pictureRef.close();\n  }\n\n  onPreventClick(event: MouseEvent) {\n    event.preventDefault();\n    event.stopPropagation();\n  }\n\n  toggleZoom(): void {\n    if (this.scale === this.scaleMin) {\n      this.scale = this.scaleMax;\n    } else {\n      this.scale = this.scaleMin;\n      this._renderer.setStyle(this.image, 'transform', `translate(0px,0px)`);\n      this._offsetX = 0;\n      this._offsetY = 0;\n      this._tmpOffsetY = 0;\n      this._tmpOffsetX = 0;\n    }\n\n    const element = this.elementRef.nativeElement as HTMLElement;\n    element.style.setProperty('--emr-image-viewer-picture-scale', this.scale.toString());\n  }\n\n  protected onDragStart(event: Event): void {\n    event.stopPropagation();\n    event.preventDefault();\n    this.alreadyDragged = true;\n  }\n\n  private _transform(offsetY: number, offsetX: number): void {\n    const image = this.image as HTMLImageElement;\n    const scaleFactor = (1 / this.scale);\n    let translateX = this._offsetX + offsetX;\n    // let offsetStartX = ((image.width / 2) - translateX) / scaleFactor;\n    // let offsetEndX = ((image.width / 2) + translateX) / scaleFactor;\n    let translateY = this._offsetY + offsetY;\n    // let offsetStartY = ((image.height / 2) - translateY) / scaleFactor;\n    // let offsetEndY = ((image.height / 2) + translateY) / scaleFactor;\n\n    // let thumbHalfWidth = 150;\n    //\n    // if (offsetStartX <= thumbHalfWidth && translateX > 0) {\n    //   translateX = (image.width / 2) - (thumbHalfWidth * scaleFactor);\n    // } else if (offsetEndX <= thumbHalfWidth && translateX < 0) {\n    //   translateX = -((image.width / 2) - (thumbHalfWidth * scaleFactor));\n    // }\n    //\n    // if (offsetStartY <= thumbHalfWidth && translateY > 0) {\n    //   translateY = (image.height / 2) - (thumbHalfWidth * scaleFactor);\n    // } else if (offsetEndY <= thumbHalfWidth && translateY < 0) {\n    //   translateY = -((image.height / 2) - (thumbHalfWidth * scaleFactor));\n    // }\n\n    this._tmpOffsetY = translateY;\n    this._tmpOffsetX = translateX;\n    this._renderer.setStyle(\n      image,\n      'transform', `translate(${translateX}px,${translateY}px)`\n    );\n  }\n}\n","<div class=\"title-container\">\n  @if (hasTitle()) {\n    <div class=\"title\">\n      @if (data.titleTplRef) {\n        <ng-container [ngTemplateOutlet]=\"data.titleTplRef\"></ng-container>\n      } @else if (data.caption) {\n        {{ data.title }}\n      }\n    </div>\n  }\n</div>\n<div class=\"controls\" (click)=\"onPreventClick($event)\">\n  <div class=\"w-max\">\n    <button (click)=\"pictureRef.close()\" class=\"close\">\n      <mat-icon>close</mat-icon>\n    </button>\n  </div>\n  <div class=\"w-max\">\n    <button class=\"zoom\" (click)=\"toggleZoom()\" [disabled]=\"scaleMax === 1 || null\">\n      @if (scale === this.scaleMin) {\n        <mat-icon>zoom_in</mat-icon>\n      } @else {\n        <mat-icon>zoom_out</mat-icon>\n      }\n    </button>\n  </div>\n</div>\n<div class=\"content\" (click)=\"onBackdropClick()\">\n  <div class=\"image\" (dragstart)=\"onDragStart($event)\">\n    @if (loading) {\n      <div class=\"spinner\">\n        <mat-spinner/>\n      </div>\n    }\n    <img [src]=\"data.sourceUrl\" alt=\"\" (load)=\"onLoad($event)\" (click)=\"onPreventClick($event)\" class=\"img\">\n  </div>\n  @if (hasAside()) {\n    <aside class=\"aside\" (click)=\"onPreventClick($event)\">\n      <div class=\"aside-header\">\n        @if (data.captionTplRef) {\n          <ng-container [ngTemplateOutlet]=\"data.captionTplRef\"></ng-container>\n        } @else if (data.caption) {\n          {{ data.caption }}\n        }\n      </div>\n      <div class=\"aside-body\">\n        <div class=\"aside-body-scroll\">\n          @if (data.descriptionTplRef) {\n            <ng-container [ngTemplateOutlet]=\"data.descriptionTplRef\"></ng-container>\n          } @else if (data.description) {\n            {{ data.description }}\n          }\n        </div>\n      </div>\n    </aside>\n  }\n</div>\n","import { DestroyRef, Directive, inject, Injector } from '@angular/core';\nimport { Overlay } from '@angular/cdk/overlay';\nimport { ComponentPortal } from '@angular/cdk/portal';\nimport { takeUntilDestroyed } from '@angular/core/rxjs-interop';\nimport { PictureRef } from './picture-ref';\nimport { ImageViewerComponent } from './image-viewer/image-viewer.component';\nimport { IMAGE_VIEWER_PICTURE_DATA, IMAGE_VIEWER_PICTURE_REF, PictureOptions } from './types';\n\n@Directive({\n  selector: '[emrImageViewer]',\n  exportAs: 'emrImageViewer',\n  standalone: true,\n  host: {\n    'class': 'emr-image-viewer',\n  }\n})\nexport class ImageViewerDirective {\n  private _overlay = inject(Overlay);\n  private _injector = inject(Injector);\n  private _destroyRef = inject(DestroyRef);\n\n  get api() {\n    return {\n      open: (options: PictureOptions): PictureRef => this._open(options)\n    }\n  }\n\n  private _open(options: PictureOptions): PictureRef {\n    const pictureRef = new PictureRef();\n    const overlayRef = this._overlay.create({\n      positionStrategy: this._overlay.position().global(),\n      hasBackdrop: true\n    });\n    const injector = Injector.create({\n      providers: [\n        {\n          provide: IMAGE_VIEWER_PICTURE_REF,\n          useValue: pictureRef\n        },\n        {\n          provide: IMAGE_VIEWER_PICTURE_DATA,\n          useValue: options\n        }\n      ],\n      parent: this._injector\n    });\n    const portal = new ComponentPortal(ImageViewerComponent, null, injector);\n    overlayRef.attach(portal);\n    pictureRef.closed.pipe(\n      takeUntilDestroyed(this._destroyRef)\n    ).subscribe(() => {\n      overlayRef.detach();\n    });\n    return pictureRef;\n  }\n}\n","import { Directive, inject, TemplateRef } from '@angular/core';\n\n@Directive({\n  selector: '[emrImageViewerPictureCaption]',\n  standalone: true\n})\nexport class ImageViewerPictureCaptionDirective {\n  readonly templateRef = inject(TemplateRef);\n}\n","import { Directive, inject, TemplateRef } from '@angular/core';\n\n@Directive({\n  selector: '[emrImageViewerPictureDescription]',\n  standalone: true\n})\nexport class ImageViewerPictureDescriptionDirective {\n  readonly templateRef = inject(TemplateRef);\n}\n","import { Directive, inject, TemplateRef } from '@angular/core';\n\n@Directive({\n  selector: '[emrImageViewerPictureTitle]',\n  standalone: true\n})\nexport class ImageViewerPictureTitleDirective {\n  readonly templateRef = inject(TemplateRef);\n}\n","import { contentChild, Directive, inject, input } from '@angular/core';\nimport { IMAGE_VIEWER } from './types';\nimport { ImageViewerDirective } from './image-viewer.directive';\nimport { ImageViewerPictureCaptionDirective } from './image-viewer-picture-caption.directive';\nimport { ImageViewerPictureDescriptionDirective } from './image-viewer-picture-description.directive';\nimport { ImageViewerPictureTitleDirective } from './image-viewer-picture-title.directive';\n\n@Directive({\n  selector: '[emrImageViewerPicture]',\n  exportAs: 'emrImageViewerPicture',\n  standalone: true,\n  providers: [\n    {\n      provide: IMAGE_VIEWER,\n      useExisting: ImageViewerPictureDirective\n    }\n  ],\n  host: {\n    'class': 'emr-image-viewer-picture',\n    '(click)': 'onClick($event)'\n  }\n})\nexport class ImageViewerPictureDirective {\n  private _imageViewer = inject(ImageViewerDirective);\n  private _titleTplRef = contentChild(ImageViewerPictureTitleDirective);\n  private _captionTplRef = contentChild(ImageViewerPictureCaptionDirective);\n  private _descriptionTplRef = contentChild(ImageViewerPictureDescriptionDirective);\n\n  sourceUrl = input.required<string>();\n  caption = input<string>();\n  title = input<string>();\n  description = input<string>();\n\n  protected onClick(event: MouseEvent) {\n    event.preventDefault();\n    event.stopPropagation();\n    this._imageViewer.api.open({\n      sourceUrl: this.sourceUrl(),\n      title: this.title(),\n      caption: this.caption(),\n      description: this.description(),\n      titleTplRef: this._titleTplRef()?.templateRef,\n      captionTplRef: this._captionTplRef()?.templateRef,\n      descriptionTplRef: this._descriptionTplRef()?.templateRef\n    });\n  }\n}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"elementar-rt-components-image-viewer.mjs","sources":["../../../projects/components/image-viewer/src/picture-ref.ts","../../../projects/components/image-viewer/src/types.ts","../../../projects/components/image-viewer/src/image-viewer/image-viewer.component.ts","../../../projects/components/image-viewer/src/image-viewer/image-viewer.component.html","../../../projects/components/image-viewer/src/image-viewer.directive.ts","../../../projects/components/image-viewer/src/image-viewer-picture-caption.directive.ts","../../../projects/components/image-viewer/src/image-viewer-picture-description.directive.ts","../../../projects/components/image-viewer/src/image-viewer-picture-title.directive.ts","../../../projects/components/image-viewer/src/image-viewer-picture.directive.ts","../../../projects/components/image-viewer/elementar-rt-components-image-viewer.ts"],"sourcesContent":["import { EventEmitter } from '@angular/core';\n\nexport class PictureRef {\n  readonly closed = new EventEmitter();\n\n  close(): void {\n    this.closed.emit();\n  }\n}\n","import { InjectionToken, TemplateRef } from '@angular/core';\nimport { PictureRef } from './picture-ref';\n\nexport interface PictureOptions {\n  sourceUrl: string;\n  title?: string | undefined;\n  caption?: string | undefined;\n  description?: string | undefined;\n  titleTplRef?: TemplateRef<any> | undefined;\n  captionTplRef?: TemplateRef<any> | undefined;\n  descriptionTplRef?: TemplateRef<any> | undefined;\n}\n\nexport const IMAGE_VIEWER = new InjectionToken('IMAGE_VIEWER');\nexport const IMAGE_VIEWER_PICTURE_REF = new InjectionToken<PictureRef>('IMAGE_VIEWER_PICTURE_REF');\nexport const IMAGE_VIEWER_PICTURE_DATA = new InjectionToken<PictureOptions>('IMAGE_VIEWER_PICTURE_DATA');\n","import { Component, computed, DestroyRef, ElementRef, inject, Renderer2, DOCUMENT } from '@angular/core';\nimport { IMAGE_VIEWER_PICTURE_DATA, IMAGE_VIEWER_PICTURE_REF } from '../types';\nimport { MatIcon } from '@angular/material/icon';\nimport { MatProgressSpinner } from '@angular/material/progress-spinner';\nimport { NgTemplateOutlet } from '@angular/common';\nimport { fromEvent } from 'rxjs';\nimport { takeUntilDestroyed } from '@angular/core/rxjs-interop';\n\n@Component({\n  selector: 'emr-image-viewer',\n  exportAs: 'emrImageViewer',\n  imports: [\n    MatIcon,\n    MatProgressSpinner,\n    NgTemplateOutlet\n  ],\n  templateUrl: './image-viewer.component.html',\n  styleUrl: './image-viewer.component.scss',\n  host: {\n    'class': 'emr-image-viewer',\n    '[class.loading]': 'loading',\n    '[class.dragging]': '_dragging',\n    '[class.scaled]': 'scale !== 1'\n  }\n})\nexport class ImageViewerComponent {\n  readonly elementRef = inject(ElementRef);\n  private _document = inject(DOCUMENT);\n  private _destroyRef = inject(DestroyRef);\n  private _renderer = inject(Renderer2);\n  private _startClientY = 0;\n  private _startClientX = 0;\n  private _offsetY = 0;\n  private _offsetX = 0;\n  private _tmpOffsetY = 0;\n  private _tmpOffsetX = 0;\n  protected _dragging = false;\n  readonly pictureRef = inject(IMAGE_VIEWER_PICTURE_REF);\n  readonly data = inject(IMAGE_VIEWER_PICTURE_DATA);\n  loading = true;\n  scale = 1;\n  image: HTMLImageElement;\n  alreadyDragged = false;\n  scaleMin = 1;\n  scaleMax = 1;\n  padding = 30;\n\n  scaled = computed<boolean>(() => {\n    return this.scale !== 1;\n  });\n  hasTitle = computed(() => {\n    return !!(this.data.title || this.data.titleTplRef);\n  });\n  hasAside = computed(() => {\n    return !!(this.data.caption || this.data.description || this.data.captionTplRef || this.data.descriptionTplRef);\n  });\n\n  onLoad(event: Event): void {\n    this.loading = false;\n    this.image = (event.target as HTMLImageElement);\n\n    if (this.image.width > this.image.height) {\n      this.scaleMax = this.image.naturalWidth / this.image.width;\n    } else {\n      this.scaleMax = this.image.naturalHeight / this.image.height;\n    }\n\n    const image = this.image;\n    fromEvent(image, 'mousedown')\n      .pipe(\n        takeUntilDestroyed(this._destroyRef)\n      )\n      .subscribe((event: MouseEvent | any) => {\n        if (this.scale === this.scaleMin || event.button === 2) {\n          return;\n        }\n\n        this._dragging = true;\n        this._startClientY = event.clientY;\n        this._startClientX = event.clientX;\n      })\n    ;\n    fromEvent(this._document, 'mousemove')\n      .pipe(\n        takeUntilDestroyed(this._destroyRef)\n      )\n      .subscribe((event: any) => {\n        if (this._dragging) {\n          const scaleFactor = (1 / this.scale);\n          let offsetY = (event.clientY - this._startClientY) * scaleFactor;\n          let offsetX = (event.clientX - this._startClientX) * scaleFactor;\n          this._transform(offsetY, offsetX);\n        }\n      })\n    ;\n    fromEvent(this._document, 'mouseup')\n      .pipe(\n        takeUntilDestroyed(this._destroyRef)\n      )\n      .subscribe((event: any) => {\n        if (this._dragging) {\n          const element = this.elementRef.nativeElement as HTMLElement;\n          const elementRect = element.getBoundingClientRect();\n          this._renderer.removeClass(element, 'dragging');\n          this._dragging = false;\n          let imageWidth = Math.floor(image.getBoundingClientRect().width);\n          let imageHeight = Math.floor(image.getBoundingClientRect().height);\n          let imageViewportWidth = this.hasAside() ? elementRect.width - 420 : elementRect.width;\n          let imageViewportHeight = elementRect.height;\n\n          if (imageWidth <= imageViewportWidth && imageHeight <= imageViewportHeight) {\n            this._tmpOffsetY = 0;\n            this._tmpOffsetX = 0;\n            this._offsetY = 0;\n            this._offsetX = 0;\n            this._renderer.setStyle(image, 'transform', `translate(0px,0px)`);\n          } else {\n            const imageRect = image.getBoundingClientRect();\n            const widthDiff = imageViewportWidth - imageWidth;\n            const heightDiff = imageViewportHeight - imageHeight;\n            const xPositionDiff = widthDiff / this.scale / 2;\n            const yPositionDiff = heightDiff / this.scale / 2;\n\n            if (imageRect.x > 0 && imageRect.y > 0) {\n              this._tmpOffsetY = yPositionDiff * -1 + this.padding;\n              this._tmpOffsetX = xPositionDiff * -1 + this.padding;\n            } else if (imageRect.x < widthDiff && imageRect.y > 0) {\n              this._tmpOffsetY = yPositionDiff * -1 + this.padding;\n              this._tmpOffsetX = xPositionDiff - this.padding;\n            } else if (imageRect.x < widthDiff && imageRect.y < heightDiff) {\n              this._tmpOffsetY = yPositionDiff - this.padding;\n              this._tmpOffsetX = xPositionDiff - this.padding;\n            } else if (imageRect.x > 0 && imageRect.y < heightDiff) {\n              this._tmpOffsetY = yPositionDiff - this.padding;\n              this._tmpOffsetX = xPositionDiff * -1 + this.padding;\n            }\n\n            if (imageWidth < imageViewportWidth) {\n              this._tmpOffsetX = 0;\n            }\n\n            if (imageHeight < imageViewportHeight) {\n              this._tmpOffsetY = 0;\n            }\n\n            this._offsetY = this._tmpOffsetY;\n            this._offsetX = this._tmpOffsetX;\n            this._renderer.setStyle(\n              image,\n              'transform', `translate(${this._tmpOffsetX}px,${this._tmpOffsetY}px)`\n            );\n          }\n        }\n      })\n    ;\n  }\n\n  onBackdropClick(): void {\n    this.pictureRef.close();\n  }\n\n  onPreventClick(event: MouseEvent) {\n    event.preventDefault();\n    event.stopPropagation();\n  }\n\n  toggleZoom(): void {\n    if (this.scale === this.scaleMin) {\n      this.scale = this.scaleMax;\n    } else {\n      this.scale = this.scaleMin;\n      this._renderer.setStyle(this.image, 'transform', `translate(0px,0px)`);\n      this._offsetX = 0;\n      this._offsetY = 0;\n      this._tmpOffsetY = 0;\n      this._tmpOffsetX = 0;\n    }\n\n    const element = this.elementRef.nativeElement as HTMLElement;\n    element.style.setProperty('--emr-image-viewer-picture-scale', this.scale.toString());\n  }\n\n  protected onDragStart(event: Event): void {\n    event.stopPropagation();\n    event.preventDefault();\n    this.alreadyDragged = true;\n  }\n\n  private _transform(offsetY: number, offsetX: number): void {\n    const image = this.image as HTMLImageElement;\n    const scaleFactor = (1 / this.scale);\n    let translateX = this._offsetX + offsetX;\n    // let offsetStartX = ((image.width / 2) - translateX) / scaleFactor;\n    // let offsetEndX = ((image.width / 2) + translateX) / scaleFactor;\n    let translateY = this._offsetY + offsetY;\n    // let offsetStartY = ((image.height / 2) - translateY) / scaleFactor;\n    // let offsetEndY = ((image.height / 2) + translateY) / scaleFactor;\n\n    // let thumbHalfWidth = 150;\n    //\n    // if (offsetStartX <= thumbHalfWidth && translateX > 0) {\n    //   translateX = (image.width / 2) - (thumbHalfWidth * scaleFactor);\n    // } else if (offsetEndX <= thumbHalfWidth && translateX < 0) {\n    //   translateX = -((image.width / 2) - (thumbHalfWidth * scaleFactor));\n    // }\n    //\n    // if (offsetStartY <= thumbHalfWidth && translateY > 0) {\n    //   translateY = (image.height / 2) - (thumbHalfWidth * scaleFactor);\n    // } else if (offsetEndY <= thumbHalfWidth && translateY < 0) {\n    //   translateY = -((image.height / 2) - (thumbHalfWidth * scaleFactor));\n    // }\n\n    this._tmpOffsetY = translateY;\n    this._tmpOffsetX = translateX;\n    this._renderer.setStyle(\n      image,\n      'transform', `translate(${translateX}px,${translateY}px)`\n    );\n  }\n}\n","<div class=\"title-container\">\n  @if (hasTitle()) {\n    <div class=\"title\">\n      @if (data.titleTplRef) {\n        <ng-container [ngTemplateOutlet]=\"data.titleTplRef\"></ng-container>\n      } @else if (data.caption) {\n        {{ data.title }}\n      }\n    </div>\n  }\n</div>\n<div class=\"controls\" (click)=\"onPreventClick($event)\">\n  <div class=\"w-max\">\n    <button (click)=\"pictureRef.close()\" class=\"close\">\n      <mat-icon>close</mat-icon>\n    </button>\n  </div>\n  <div class=\"w-max\">\n    <button class=\"zoom\" (click)=\"toggleZoom()\" [disabled]=\"scaleMax === 1 || null\">\n      @if (scale === this.scaleMin) {\n        <mat-icon>zoom_in</mat-icon>\n      } @else {\n        <mat-icon>zoom_out</mat-icon>\n      }\n    </button>\n  </div>\n</div>\n<div class=\"content\" (click)=\"onBackdropClick()\">\n  <div class=\"image\" (dragstart)=\"onDragStart($event)\">\n    @if (loading) {\n      <div class=\"spinner\">\n        <mat-spinner/>\n      </div>\n    }\n    <img [src]=\"data.sourceUrl\" alt=\"\" (load)=\"onLoad($event)\" (click)=\"onPreventClick($event)\" class=\"img\">\n  </div>\n  @if (hasAside()) {\n    <aside class=\"aside\" (click)=\"onPreventClick($event)\">\n      <div class=\"aside-header\">\n        @if (data.captionTplRef) {\n          <ng-container [ngTemplateOutlet]=\"data.captionTplRef\"></ng-container>\n        } @else if (data.caption) {\n          {{ data.caption }}\n        }\n      </div>\n      <div class=\"aside-body\">\n        <div class=\"aside-body-scroll\">\n          @if (data.descriptionTplRef) {\n            <ng-container [ngTemplateOutlet]=\"data.descriptionTplRef\"></ng-container>\n          } @else if (data.description) {\n            {{ data.description }}\n          }\n        </div>\n      </div>\n    </aside>\n  }\n</div>\n","import { DestroyRef, Directive, inject, Injector } from '@angular/core';\nimport { Overlay } from '@angular/cdk/overlay';\nimport { ComponentPortal } from '@angular/cdk/portal';\nimport { takeUntilDestroyed } from '@angular/core/rxjs-interop';\nimport { PictureRef } from './picture-ref';\nimport { ImageViewerComponent } from './image-viewer/image-viewer.component';\nimport { IMAGE_VIEWER_PICTURE_DATA, IMAGE_VIEWER_PICTURE_REF, PictureOptions } from './types';\n\n@Directive({\n  selector: '[emrImageViewer]',\n  exportAs: 'emrImageViewer',\n  standalone: true,\n  host: {\n    'class': 'emr-image-viewer',\n  }\n})\nexport class ImageViewerDirective {\n  private _overlay = inject(Overlay);\n  private _injector = inject(Injector);\n  private _destroyRef = inject(DestroyRef);\n\n  get api() {\n    return {\n      open: (options: PictureOptions): PictureRef => this._open(options)\n    }\n  }\n\n  private _open(options: PictureOptions): PictureRef {\n    const pictureRef = new PictureRef();\n    const overlayRef = this._overlay.create({\n      positionStrategy: this._overlay.position().global(),\n      hasBackdrop: true\n    });\n    const injector = Injector.create({\n      providers: [\n        {\n          provide: IMAGE_VIEWER_PICTURE_REF,\n          useValue: pictureRef\n        },\n        {\n          provide: IMAGE_VIEWER_PICTURE_DATA,\n          useValue: options\n        }\n      ],\n      parent: this._injector\n    });\n    const portal = new ComponentPortal(ImageViewerComponent, null, injector);\n    overlayRef.attach(portal);\n    pictureRef.closed.pipe(\n      takeUntilDestroyed(this._destroyRef)\n    ).subscribe(() => {\n      overlayRef.detach();\n    });\n    return pictureRef;\n  }\n}\n","import { Directive, inject, TemplateRef } from '@angular/core';\n\n@Directive({\n  selector: '[emrImageViewerPictureCaption]',\n  standalone: true\n})\nexport class ImageViewerPictureCaptionDirective {\n  readonly templateRef = inject(TemplateRef);\n}\n","import { Directive, inject, TemplateRef } from '@angular/core';\n\n@Directive({\n  selector: '[emrImageViewerPictureDescription]',\n  standalone: true\n})\nexport class ImageViewerPictureDescriptionDirective {\n  readonly templateRef = inject(TemplateRef);\n}\n","import { Directive, inject, TemplateRef } from '@angular/core';\n\n@Directive({\n  selector: '[emrImageViewerPictureTitle]',\n  standalone: true\n})\nexport class ImageViewerPictureTitleDirective {\n  readonly templateRef = inject(TemplateRef);\n}\n","import { contentChild, Directive, inject, input } from '@angular/core';\nimport { IMAGE_VIEWER } from './types';\nimport { ImageViewerDirective } from './image-viewer.directive';\nimport { ImageViewerPictureCaptionDirective } from './image-viewer-picture-caption.directive';\nimport { ImageViewerPictureDescriptionDirective } from './image-viewer-picture-description.directive';\nimport { ImageViewerPictureTitleDirective } from './image-viewer-picture-title.directive';\n\n@Directive({\n  selector: '[emrImageViewerPicture]',\n  exportAs: 'emrImageViewerPicture',\n  standalone: true,\n  providers: [\n    {\n      provide: IMAGE_VIEWER,\n      useExisting: ImageViewerPictureDirective\n    }\n  ],\n  host: {\n    'class': 'emr-image-viewer-picture',\n    '(click)': 'onClick($event)'\n  }\n})\nexport class ImageViewerPictureDirective {\n  private _imageViewer = inject(ImageViewerDirective);\n  private _titleTplRef = contentChild(ImageViewerPictureTitleDirective);\n  private _captionTplRef = contentChild(ImageViewerPictureCaptionDirective);\n  private _descriptionTplRef = contentChild(ImageViewerPictureDescriptionDirective);\n\n  sourceUrl = input.required<string>();\n  caption = input<string>();\n  title = input<string>();\n  description = input<string>();\n\n  protected onClick(event: MouseEvent) {\n    event.preventDefault();\n    event.stopPropagation();\n    this._imageViewer.api.open({\n      sourceUrl: this.sourceUrl(),\n      title: this.title(),\n      caption: this.caption(),\n      description: this.description(),\n      titleTplRef: this._titleTplRef()?.templateRef,\n      captionTplRef: this._captionTplRef()?.templateRef,\n      descriptionTplRef: this._descriptionTplRef()?.templateRef\n    });\n  }\n}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}

package/fesm2022/elementar-rt-components-image-zoom-viewer.mjs

@@ -2,15 +2,15 @@ import * as i0 from '@angular/core';
 import { input, numberAttribute, booleanAttribute, signal, computed, ChangeDetectionStrategy, Component } from '@angular/core';
 
 class ImageZoomViewerComponent {
-    src = input('', ...(ngDevMode ? [{ debugName: "src" }] : []));
-    alt = input('', ...(ngDevMode ? [{ debugName: "alt" }] : []));
-    minZoom = input(1, ...(ngDevMode ? [{ debugName: "minZoom", transform: numberAttribute }] : [{ transform: numberAttribute }]));
-    maxZoom = input(5, ...(ngDevMode ? [{ debugName: "maxZoom", transform: numberAttribute }] : [{ transform: numberAttribute }]));
-    showMinimap = input(true, ...(ngDevMode ? [{ debugName: "showMinimap", transform: booleanAttribute }] : [{ transform: booleanAttribute }]));
-    _scale = signal(1, ...(ngDevMode ? [{ debugName: "_scale" }] : []));
-    _translateX = signal(0, ...(ngDevMode ? [{ debugName: "_translateX" }] : []));
-    _translateY = signal(0, ...(ngDevMode ? [{ debugName: "_translateY" }] : []));
-    _isZoomed = computed(() => this._scale() > 1, ...(ngDevMode ? [{ debugName: "_isZoomed" }] : []));
+    src = input('', ...(ngDevMode ? [{ debugName: "src" }] : /* istanbul ignore next */ []));
+    alt = input('', ...(ngDevMode ? [{ debugName: "alt" }] : /* istanbul ignore next */ []));
+    minZoom = input(1, { ...(ngDevMode ? { debugName: "minZoom" } : /* istanbul ignore next */ {}), transform: numberAttribute });
+    maxZoom = input(5, { ...(ngDevMode ? { debugName: "maxZoom" } : /* istanbul ignore next */ {}), transform: numberAttribute });
+    showMinimap = input(true, { ...(ngDevMode ? { debugName: "showMinimap" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    _scale = signal(1, ...(ngDevMode ? [{ debugName: "_scale" }] : /* istanbul ignore next */ []));
+    _translateX = signal(0, ...(ngDevMode ? [{ debugName: "_translateX" }] : /* istanbul ignore next */ []));
+    _translateY = signal(0, ...(ngDevMode ? [{ debugName: "_translateY" }] : /* istanbul ignore next */ []));
+    _isZoomed = computed(() => this._scale() > 1, ...(ngDevMode ? [{ debugName: "_isZoomed" }] : /* istanbul ignore next */ []));
     _panning = false;
     _lastX = 0;
     _lastY = 0;
@@ -64,8 +64,8 @@ class ImageZoomViewerComponent {
         this._translateX.set(0);
         this._translateY.set(0);
     }
-    _imgStyle = computed(() => `transform: translate(${this._translateX()}px, ${this._translateY()}px) scale(${this._scale()}); cursor: ${this._scale() > 1 ? 'grab' : 'zoom-in'}`, ...(ngDevMode ? [{ debugName: "_imgStyle" }] : []));
-    _scaleLabel = computed(() => (this._scale() * 100).toFixed(0), ...(ngDevMode ? [{ debugName: "_scaleLabel" }] : []));
+    _imgStyle = computed(() => `transform: translate(${this._translateX()}px, ${this._translateY()}px) scale(${this._scale()}); cursor: ${this._scale() > 1 ? 'grab' : 'zoom-in'}`, ...(ngDevMode ? [{ debugName: "_imgStyle" }] : /* istanbul ignore next */ []));
+    _scaleLabel = computed(() => (this._scale() * 100).toFixed(0), ...(ngDevMode ? [{ debugName: "_scaleLabel" }] : /* istanbul ignore next */ []));
     _zoomIn() { this._scale.set(Math.min(this.maxZoom(), this._scale() + 0.5)); }
     _zoomOut() {
         const next = Math.max(this.minZoom(), this._scale() - 0.5);
@@ -80,13 +80,13 @@ class ImageZoomViewerComponent {
         const x = (-this._translateX() / this._scale()) / 4;
         const y = (-this._translateY() / this._scale()) / 4;
         return `width:${pct}%; height:${pct}%; transform: translate(${x}px, ${y}px)`;
-    }, ...(ngDevMode ? [{ debugName: "_minimapStyle" }] : []));
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: ImageZoomViewerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.25", type: ImageZoomViewerComponent, isStandalone: true, selector: "emr-image-zoom-viewer", inputs: { src: { classPropertyName: "src", publicName: "src", isSignal: true, isRequired: false, transformFunction: null }, alt: { classPropertyName: "alt", publicName: "alt", isSignal: true, isRequired: false, transformFunction: null }, minZoom: { classPropertyName: "minZoom", publicName: "minZoom", isSignal: true, isRequired: false, transformFunction: null }, maxZoom: { classPropertyName: "maxZoom", publicName: "maxZoom", isSignal: true, isRequired: false, transformFunction: null }, showMinimap: { classPropertyName: "showMinimap", publicName: "showMinimap", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div\n  class=\"zoom-container\"\n  (wheel)=\"_onWheel($event)\"\n  (mousedown)=\"_onMouseDown($event)\"\n  (mousemove)=\"_onMouseMove($event)\"\n  (mouseup)=\"_onMouseUp()\"\n  (mouseleave)=\"_onMouseUp()\"\n  (touchstart)=\"_onTouchStart($event)\"\n  (touchmove)=\"_onTouchMove($event)\"\n  (touchend)=\"_onTouchEnd()\"\n>\n  <img\n    class=\"zoom-img\"\n    [src]=\"src()\"\n    [alt]=\"alt()\"\n    [style]=\"_imgStyle()\"\n    draggable=\"false\"\n  />\n\n  @if (showMinimap() && _isZoomed()) {\n    <div class=\"minimap\">\n      <img class=\"minimap-img\" [src]=\"src()\" [alt]=\"alt()\" aria-hidden=\"true\" />\n      <div class=\"minimap-viewport\" [style]=\"_minimapStyle()\"></div>\n    </div>\n  }\n\n  <div class=\"zoom-controls\">\n    <button type=\"button\" class=\"zoom-btn\" (click)=\"_zoomIn()\" aria-label=\"Zoom in\">+</button>\n    <span class=\"zoom-label\">{{ _scaleLabel() }}%</span>\n    <button type=\"button\" class=\"zoom-btn\" (click)=\"_zoomOut()\" aria-label=\"Zoom out\">\u2212</button>\n    @if (_isZoomed()) {\n      <button type=\"button\" class=\"zoom-btn\" (click)=\"_reset()\" aria-label=\"Reset zoom\">\u21BA</button>\n    }\n  </div>\n</div>\n", styles: [":host{display:block}.zoom-container{position:relative;overflow:hidden;background:var(--color-surface-container);border-radius:.75rem;border:1px solid var(--color-outline-variant);width:100%;height:100%;user-select:none;-webkit-user-select:none}.zoom-img{display:block;width:100%;height:100%;object-fit:contain;transform-origin:center center;transition:transform 50ms linear;will-change:transform}.minimap{position:absolute;bottom:calc(var(--spacing, .25rem) * 12);right:calc(var(--spacing, .25rem) * 3);width:calc(var(--spacing, .25rem) * 24);height:calc(var(--spacing, .25rem) * 18);border-radius:.5rem;overflow:hidden;border:1px solid var(--color-outline-variant);box-shadow:0 2px 8px #0003;background:var(--color-surface-container)}.minimap-img{width:100%;height:100%;object-fit:contain;opacity:.6}.minimap-viewport{position:absolute;top:0;left:0;border:2px solid var(--color-primary);border-radius:.25rem;pointer-events:none;transition:all 50ms linear;max-width:100%;max-height:100%}.zoom-controls{position:absolute;bottom:calc(var(--spacing, .25rem) * 3);right:calc(var(--spacing, .25rem) * 3);display:flex;align-items:center;gap:var(--spacing, .25rem);background:var(--color-surface-container-high);border:1px solid var(--color-outline-variant);border-radius:9999px;padding:var(--spacing, .25rem) calc(var(--spacing, .25rem) * 2);box-shadow:0 2px 8px #00000026}.zoom-btn{width:calc(var(--spacing, .25rem) * 7);height:calc(var(--spacing, .25rem) * 7);display:flex;align-items:center;justify-content:center;background:transparent;border:none;cursor:pointer;font-size:1rem;font-weight:700;border-radius:50%;color:var(--color-on-surface)}.zoom-btn:hover{background:var(--color-surface-container)}.zoom-label{font-size:.75rem;font-weight:600;color:var(--color-on-surface-variant);min-width:calc(var(--spacing, .25rem) * 8);text-align:center}\n/*! tailwindcss v4.3.2 | MIT License | https://tailwindcss.com */\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    }, ...(ngDevMode ? [{ debugName: "_minimapStyle" }] : /* istanbul ignore next */ []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: ImageZoomViewerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.22", type: ImageZoomViewerComponent, isStandalone: true, selector: "emr-image-zoom-viewer", inputs: { src: { classPropertyName: "src", publicName: "src", isSignal: true, isRequired: false, transformFunction: null }, alt: { classPropertyName: "alt", publicName: "alt", isSignal: true, isRequired: false, transformFunction: null }, minZoom: { classPropertyName: "minZoom", publicName: "minZoom", isSignal: true, isRequired: false, transformFunction: null }, maxZoom: { classPropertyName: "maxZoom", publicName: "maxZoom", isSignal: true, isRequired: false, transformFunction: null }, showMinimap: { classPropertyName: "showMinimap", publicName: "showMinimap", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div\n  class=\"zoom-container\"\n  (wheel)=\"_onWheel($event)\"\n  (mousedown)=\"_onMouseDown($event)\"\n  (mousemove)=\"_onMouseMove($event)\"\n  (mouseup)=\"_onMouseUp()\"\n  (mouseleave)=\"_onMouseUp()\"\n  (touchstart)=\"_onTouchStart($event)\"\n  (touchmove)=\"_onTouchMove($event)\"\n  (touchend)=\"_onTouchEnd()\"\n>\n  <img\n    class=\"zoom-img\"\n    [src]=\"src()\"\n    [alt]=\"alt()\"\n    [style]=\"_imgStyle()\"\n    draggable=\"false\"\n  />\n\n  @if (showMinimap() && _isZoomed()) {\n    <div class=\"minimap\">\n      <img class=\"minimap-img\" [src]=\"src()\" [alt]=\"alt()\" aria-hidden=\"true\" />\n      <div class=\"minimap-viewport\" [style]=\"_minimapStyle()\"></div>\n    </div>\n  }\n\n  <div class=\"zoom-controls\">\n    <button type=\"button\" class=\"zoom-btn\" (click)=\"_zoomIn()\" aria-label=\"Zoom in\">+</button>\n    <span class=\"zoom-label\">{{ _scaleLabel() }}%</span>\n    <button type=\"button\" class=\"zoom-btn\" (click)=\"_zoomOut()\" aria-label=\"Zoom out\">\u2212</button>\n    @if (_isZoomed()) {\n      <button type=\"button\" class=\"zoom-btn\" (click)=\"_reset()\" aria-label=\"Reset zoom\">\u21BA</button>\n    }\n  </div>\n</div>\n", styles: [":host{display:block}.zoom-container{position:relative;overflow:hidden;background:var(--color-surface-container);border-radius:.75rem;border:1px solid var(--color-outline-variant);width:100%;height:100%;user-select:none;-webkit-user-select:none}.zoom-img{display:block;width:100%;height:100%;object-fit:contain;transform-origin:center center;transition:transform 50ms linear;will-change:transform}.minimap{position:absolute;bottom:calc(var(--spacing, .25rem) * 12);right:calc(var(--spacing, .25rem) * 3);width:calc(var(--spacing, .25rem) * 24);height:calc(var(--spacing, .25rem) * 18);border-radius:.5rem;overflow:hidden;border:1px solid var(--color-outline-variant);box-shadow:0 2px 8px #0003;background:var(--color-surface-container)}.minimap-img{width:100%;height:100%;object-fit:contain;opacity:.6}.minimap-viewport{position:absolute;top:0;left:0;border:2px solid var(--color-primary);border-radius:.25rem;pointer-events:none;transition:all 50ms linear;max-width:100%;max-height:100%}.zoom-controls{position:absolute;bottom:calc(var(--spacing, .25rem) * 3);right:calc(var(--spacing, .25rem) * 3);display:flex;align-items:center;gap:var(--spacing, .25rem);background:var(--color-surface-container-high);border:1px solid var(--color-outline-variant);border-radius:9999px;padding:var(--spacing, .25rem) calc(var(--spacing, .25rem) * 2);box-shadow:0 2px 8px #00000026}.zoom-btn{width:calc(var(--spacing, .25rem) * 7);height:calc(var(--spacing, .25rem) * 7);display:flex;align-items:center;justify-content:center;background:transparent;border:none;cursor:pointer;font-size:1rem;font-weight:700;border-radius:50%;color:var(--color-on-surface)}.zoom-btn:hover{background:var(--color-surface-container)}.zoom-label{font-size:.75rem;font-weight:600;color:var(--color-on-surface-variant);min-width:calc(var(--spacing, .25rem) * 8);text-align:center}\n/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: ImageZoomViewerComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: ImageZoomViewerComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'emr-image-zoom-viewer', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\n  class=\"zoom-container\"\n  (wheel)=\"_onWheel($event)\"\n  (mousedown)=\"_onMouseDown($event)\"\n  (mousemove)=\"_onMouseMove($event)\"\n  (mouseup)=\"_onMouseUp()\"\n  (mouseleave)=\"_onMouseUp()\"\n  (touchstart)=\"_onTouchStart($event)\"\n  (touchmove)=\"_onTouchMove($event)\"\n  (touchend)=\"_onTouchEnd()\"\n>\n  <img\n    class=\"zoom-img\"\n    [src]=\"src()\"\n    [alt]=\"alt()\"\n    [style]=\"_imgStyle()\"\n    draggable=\"false\"\n  />\n\n  @if (showMinimap() && _isZoomed()) {\n    <div class=\"minimap\">\n      <img class=\"minimap-img\" [src]=\"src()\" [alt]=\"alt()\" aria-hidden=\"true\" />\n      <div class=\"minimap-viewport\" [style]=\"_minimapStyle()\"></div>\n    </div>\n  }\n\n  <div class=\"zoom-controls\">\n    <button type=\"button\" class=\"zoom-btn\" (click)=\"_zoomIn()\" aria-label=\"Zoom in\">+</button>\n    <span class=\"zoom-label\">{{ _scaleLabel() }}%</span>\n    <button type=\"button\" class=\"zoom-btn\" (click)=\"_zoomOut()\" aria-label=\"Zoom out\">\u2212</button>\n    @if (_isZoomed()) {\n      <button type=\"button\" class=\"zoom-btn\" (click)=\"_reset()\" aria-label=\"Reset zoom\">\u21BA</button>\n    }\n  </div>\n</div>\n", styles: [":host{display:block}.zoom-container{position:relative;overflow:hidden;background:var(--color-surface-container);border-radius:.75rem;border:1px solid var(--color-outline-variant);width:100%;height:100%;user-select:none;-webkit-user-select:none}.zoom-img{display:block;width:100%;height:100%;object-fit:contain;transform-origin:center center;transition:transform 50ms linear;will-change:transform}.minimap{position:absolute;bottom:calc(var(--spacing, .25rem) * 12);right:calc(var(--spacing, .25rem) * 3);width:calc(var(--spacing, .25rem) * 24);height:calc(var(--spacing, .25rem) * 18);border-radius:.5rem;overflow:hidden;border:1px solid var(--color-outline-variant);box-shadow:0 2px 8px #0003;background:var(--color-surface-container)}.minimap-img{width:100%;height:100%;object-fit:contain;opacity:.6}.minimap-viewport{position:absolute;top:0;left:0;border:2px solid var(--color-primary);border-radius:.25rem;pointer-events:none;transition:all 50ms linear;max-width:100%;max-height:100%}.zoom-controls{position:absolute;bottom:calc(var(--spacing, .25rem) * 3);right:calc(var(--spacing, .25rem) * 3);display:flex;align-items:center;gap:var(--spacing, .25rem);background:var(--color-surface-container-high);border:1px solid var(--color-outline-variant);border-radius:9999px;padding:var(--spacing, .25rem) calc(var(--spacing, .25rem) * 2);box-shadow:0 2px 8px #00000026}.zoom-btn{width:calc(var(--spacing, .25rem) * 7);height:calc(var(--spacing, .25rem) * 7);display:flex;align-items:center;justify-content:center;background:transparent;border:none;cursor:pointer;font-size:1rem;font-weight:700;border-radius:50%;color:var(--color-on-surface)}.zoom-btn:hover{background:var(--color-surface-container)}.zoom-label{font-size:.75rem;font-weight:600;color:var(--color-on-surface-variant);min-width:calc(var(--spacing, .25rem) * 8);text-align:center}\n/*! tailwindcss v4.3.2 | MIT License | https://tailwindcss.com */\n"] }]
+            args: [{ selector: 'emr-image-zoom-viewer', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\n  class=\"zoom-container\"\n  (wheel)=\"_onWheel($event)\"\n  (mousedown)=\"_onMouseDown($event)\"\n  (mousemove)=\"_onMouseMove($event)\"\n  (mouseup)=\"_onMouseUp()\"\n  (mouseleave)=\"_onMouseUp()\"\n  (touchstart)=\"_onTouchStart($event)\"\n  (touchmove)=\"_onTouchMove($event)\"\n  (touchend)=\"_onTouchEnd()\"\n>\n  <img\n    class=\"zoom-img\"\n    [src]=\"src()\"\n    [alt]=\"alt()\"\n    [style]=\"_imgStyle()\"\n    draggable=\"false\"\n  />\n\n  @if (showMinimap() && _isZoomed()) {\n    <div class=\"minimap\">\n      <img class=\"minimap-img\" [src]=\"src()\" [alt]=\"alt()\" aria-hidden=\"true\" />\n      <div class=\"minimap-viewport\" [style]=\"_minimapStyle()\"></div>\n    </div>\n  }\n\n  <div class=\"zoom-controls\">\n    <button type=\"button\" class=\"zoom-btn\" (click)=\"_zoomIn()\" aria-label=\"Zoom in\">+</button>\n    <span class=\"zoom-label\">{{ _scaleLabel() }}%</span>\n    <button type=\"button\" class=\"zoom-btn\" (click)=\"_zoomOut()\" aria-label=\"Zoom out\">\u2212</button>\n    @if (_isZoomed()) {\n      <button type=\"button\" class=\"zoom-btn\" (click)=\"_reset()\" aria-label=\"Reset zoom\">\u21BA</button>\n    }\n  </div>\n</div>\n", styles: [":host{display:block}.zoom-container{position:relative;overflow:hidden;background:var(--color-surface-container);border-radius:.75rem;border:1px solid var(--color-outline-variant);width:100%;height:100%;user-select:none;-webkit-user-select:none}.zoom-img{display:block;width:100%;height:100%;object-fit:contain;transform-origin:center center;transition:transform 50ms linear;will-change:transform}.minimap{position:absolute;bottom:calc(var(--spacing, .25rem) * 12);right:calc(var(--spacing, .25rem) * 3);width:calc(var(--spacing, .25rem) * 24);height:calc(var(--spacing, .25rem) * 18);border-radius:.5rem;overflow:hidden;border:1px solid var(--color-outline-variant);box-shadow:0 2px 8px #0003;background:var(--color-surface-container)}.minimap-img{width:100%;height:100%;object-fit:contain;opacity:.6}.minimap-viewport{position:absolute;top:0;left:0;border:2px solid var(--color-primary);border-radius:.25rem;pointer-events:none;transition:all 50ms linear;max-width:100%;max-height:100%}.zoom-controls{position:absolute;bottom:calc(var(--spacing, .25rem) * 3);right:calc(var(--spacing, .25rem) * 3);display:flex;align-items:center;gap:var(--spacing, .25rem);background:var(--color-surface-container-high);border:1px solid var(--color-outline-variant);border-radius:9999px;padding:var(--spacing, .25rem) calc(var(--spacing, .25rem) * 2);box-shadow:0 2px 8px #00000026}.zoom-btn{width:calc(var(--spacing, .25rem) * 7);height:calc(var(--spacing, .25rem) * 7);display:flex;align-items:center;justify-content:center;background:transparent;border:none;cursor:pointer;font-size:1rem;font-weight:700;border-radius:50%;color:var(--color-on-surface)}.zoom-btn:hover{background:var(--color-surface-container)}.zoom-label{font-size:.75rem;font-weight:600;color:var(--color-on-surface-variant);min-width:calc(var(--spacing, .25rem) * 8);text-align:center}\n/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */\n"] }]
         }], propDecorators: { src: [{ type: i0.Input, args: [{ isSignal: true, alias: "src", required: false }] }], alt: [{ type: i0.Input, args: [{ isSignal: true, alias: "alt", required: false }] }], minZoom: [{ type: i0.Input, args: [{ isSignal: true, alias: "minZoom", required: false }] }], maxZoom: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxZoom", required: false }] }], showMinimap: [{ type: i0.Input, args: [{ isSignal: true, alias: "showMinimap", required: false }] }] } });
 
 /**

package/fesm2022/elementar-rt-components-image-zoom-viewer.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"elementar-rt-components-image-zoom-viewer.mjs","sources":["../../../projects/components/image-zoom-viewer/src/image-zoom-viewer/image-zoom-viewer.component.ts","../../../projects/components/image-zoom-viewer/src/image-zoom-viewer/image-zoom-viewer.component.html","../../../projects/components/image-zoom-viewer/elementar-rt-components-image-zoom-viewer.ts"],"sourcesContent":["import {\n  Component, input, signal, computed, ChangeDetectionStrategy,\n  numberAttribute, booleanAttribute, ElementRef, viewChild\n} from '@angular/core';\n\n@Component({\n  selector: 'emr-image-zoom-viewer',\n  standalone: true,\n  templateUrl: './image-zoom-viewer.component.html',\n  styleUrl: './image-zoom-viewer.component.scss',\n  changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class ImageZoomViewerComponent {\n  src = input('');\n  alt = input('');\n  minZoom = input(1, { transform: numberAttribute });\n  maxZoom = input(5, { transform: numberAttribute });\n  showMinimap = input(true, { transform: booleanAttribute });\n\n  protected _scale = signal(1);\n  protected _translateX = signal(0);\n  protected _translateY = signal(0);\n  protected _isZoomed = computed(() => this._scale() > 1);\n\n  private _panning = false;\n  private _lastX = 0;\n  private _lastY = 0;\n\n  protected _onWheel(e: WheelEvent): void {\n    e.preventDefault();\n    const delta = e.deltaY > 0 ? -0.2 : 0.2;\n    const next = Math.min(this.maxZoom(), Math.max(this.minZoom(), this._scale() + delta));\n    if (next === this.minZoom()) { this._translateX.set(0); this._translateY.set(0); }\n    this._scale.set(next);\n  }\n\n  protected _onMouseDown(e: MouseEvent): void {\n    if (this._scale() <= 1) return;\n    this._panning = true;\n    this._lastX = e.clientX;\n    this._lastY = e.clientY;\n  }\n\n  protected _onMouseMove(e: MouseEvent): void {\n    if (!this._panning) return;\n    this._translateX.set(this._translateX() + e.clientX - this._lastX);\n    this._translateY.set(this._translateY() + e.clientY - this._lastY);\n    this._lastX = e.clientX;\n    this._lastY = e.clientY;\n  }\n\n  protected _onMouseUp(): void { this._panning = false; }\n\n  protected _onTouchStart(e: TouchEvent): void {\n    if (e.touches.length === 1 && this._scale() > 1) {\n      this._panning = true;\n      this._lastX = e.touches[0].clientX;\n      this._lastY = e.touches[0].clientY;\n    }\n  }\n\n  protected _onTouchMove(e: TouchEvent): void {\n    if (e.touches.length === 2) {\n      e.preventDefault();\n    } else if (this._panning && e.touches.length === 1) {\n      this._translateX.set(this._translateX() + e.touches[0].clientX - this._lastX);\n      this._translateY.set(this._translateY() + e.touches[0].clientY - this._lastY);\n      this._lastX = e.touches[0].clientX;\n      this._lastY = e.touches[0].clientY;\n    }\n  }\n\n  protected _onTouchEnd(): void { this._panning = false; }\n\n  protected _reset(): void {\n    this._scale.set(1);\n    this._translateX.set(0);\n    this._translateY.set(0);\n  }\n\n  protected _imgStyle = computed(() =>\n    `transform: translate(${this._translateX()}px, ${this._translateY()}px) scale(${this._scale()}); cursor: ${this._scale() > 1 ? 'grab' : 'zoom-in'}`\n  );\n\n  protected _scaleLabel = computed(() => (this._scale() * 100).toFixed(0));\n\n  protected _zoomIn(): void { this._scale.set(Math.min(this.maxZoom(), this._scale() + 0.5)); }\n  protected _zoomOut(): void {\n    const next = Math.max(this.minZoom(), this._scale() - 0.5);\n    if (next === this.minZoom()) { this._translateX.set(0); this._translateY.set(0); }\n    this._scale.set(next);\n  }\n\n  protected _minimapStyle = computed(() => {\n    const pct = 100 / this._scale();\n    const x = (-this._translateX() / this._scale()) / 4;\n    const y = (-this._translateY() / this._scale()) / 4;\n    return `width:${pct}%; height:${pct}%; transform: translate(${x}px, ${y}px)`;\n  });\n}\n","<div\n  class=\"zoom-container\"\n  (wheel)=\"_onWheel($event)\"\n  (mousedown)=\"_onMouseDown($event)\"\n  (mousemove)=\"_onMouseMove($event)\"\n  (mouseup)=\"_onMouseUp()\"\n  (mouseleave)=\"_onMouseUp()\"\n  (touchstart)=\"_onTouchStart($event)\"\n  (touchmove)=\"_onTouchMove($event)\"\n  (touchend)=\"_onTouchEnd()\"\n>\n  <img\n    class=\"zoom-img\"\n    [src]=\"src()\"\n    [alt]=\"alt()\"\n    [style]=\"_imgStyle()\"\n    draggable=\"false\"\n  />\n\n  @if (showMinimap() && _isZoomed()) {\n    <div class=\"minimap\">\n      <img class=\"minimap-img\" [src]=\"src()\" [alt]=\"alt()\" aria-hidden=\"true\" />\n      <div class=\"minimap-viewport\" [style]=\"_minimapStyle()\"></div>\n    </div>\n  }\n\n  <div class=\"zoom-controls\">\n    <button type=\"button\" class=\"zoom-btn\" (click)=\"_zoomIn()\" aria-label=\"Zoom in\">+</button>\n    <span class=\"zoom-label\">{{ _scaleLabel() }}%</span>\n    <button type=\"button\" class=\"zoom-btn\" (click)=\"_zoomOut()\" aria-label=\"Zoom out\">−</button>\n    @if (_isZoomed()) {\n      <button type=\"button\" class=\"zoom-btn\" (click)=\"_reset()\" aria-label=\"Reset zoom\">↺</button>\n    }\n  </div>\n</div>\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"elementar-rt-components-image-zoom-viewer.mjs","sources":["../../../projects/components/image-zoom-viewer/src/image-zoom-viewer/image-zoom-viewer.component.ts","../../../projects/components/image-zoom-viewer/src/image-zoom-viewer/image-zoom-viewer.component.html","../../../projects/components/image-zoom-viewer/elementar-rt-components-image-zoom-viewer.ts"],"sourcesContent":["import {\n  Component, input, signal, computed, ChangeDetectionStrategy,\n  numberAttribute, booleanAttribute, ElementRef, viewChild\n} from '@angular/core';\n\n@Component({\n  selector: 'emr-image-zoom-viewer',\n  standalone: true,\n  templateUrl: './image-zoom-viewer.component.html',\n  styleUrl: './image-zoom-viewer.component.scss',\n  changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class ImageZoomViewerComponent {\n  src = input('');\n  alt = input('');\n  minZoom = input(1, { transform: numberAttribute });\n  maxZoom = input(5, { transform: numberAttribute });\n  showMinimap = input(true, { transform: booleanAttribute });\n\n  protected _scale = signal(1);\n  protected _translateX = signal(0);\n  protected _translateY = signal(0);\n  protected _isZoomed = computed(() => this._scale() > 1);\n\n  private _panning = false;\n  private _lastX = 0;\n  private _lastY = 0;\n\n  protected _onWheel(e: WheelEvent): void {\n    e.preventDefault();\n    const delta = e.deltaY > 0 ? -0.2 : 0.2;\n    const next = Math.min(this.maxZoom(), Math.max(this.minZoom(), this._scale() + delta));\n    if (next === this.minZoom()) { this._translateX.set(0); this._translateY.set(0); }\n    this._scale.set(next);\n  }\n\n  protected _onMouseDown(e: MouseEvent): void {\n    if (this._scale() <= 1) return;\n    this._panning = true;\n    this._lastX = e.clientX;\n    this._lastY = e.clientY;\n  }\n\n  protected _onMouseMove(e: MouseEvent): void {\n    if (!this._panning) return;\n    this._translateX.set(this._translateX() + e.clientX - this._lastX);\n    this._translateY.set(this._translateY() + e.clientY - this._lastY);\n    this._lastX = e.clientX;\n    this._lastY = e.clientY;\n  }\n\n  protected _onMouseUp(): void { this._panning = false; }\n\n  protected _onTouchStart(e: TouchEvent): void {\n    if (e.touches.length === 1 && this._scale() > 1) {\n      this._panning = true;\n      this._lastX = e.touches[0].clientX;\n      this._lastY = e.touches[0].clientY;\n    }\n  }\n\n  protected _onTouchMove(e: TouchEvent): void {\n    if (e.touches.length === 2) {\n      e.preventDefault();\n    } else if (this._panning && e.touches.length === 1) {\n      this._translateX.set(this._translateX() + e.touches[0].clientX - this._lastX);\n      this._translateY.set(this._translateY() + e.touches[0].clientY - this._lastY);\n      this._lastX = e.touches[0].clientX;\n      this._lastY = e.touches[0].clientY;\n    }\n  }\n\n  protected _onTouchEnd(): void { this._panning = false; }\n\n  protected _reset(): void {\n    this._scale.set(1);\n    this._translateX.set(0);\n    this._translateY.set(0);\n  }\n\n  protected _imgStyle = computed(() =>\n    `transform: translate(${this._translateX()}px, ${this._translateY()}px) scale(${this._scale()}); cursor: ${this._scale() > 1 ? 'grab' : 'zoom-in'}`\n  );\n\n  protected _scaleLabel = computed(() => (this._scale() * 100).toFixed(0));\n\n  protected _zoomIn(): void { this._scale.set(Math.min(this.maxZoom(), this._scale() + 0.5)); }\n  protected _zoomOut(): void {\n    const next = Math.max(this.minZoom(), this._scale() - 0.5);\n    if (next === this.minZoom()) { this._translateX.set(0); this._translateY.set(0); }\n    this._scale.set(next);\n  }\n\n  protected _minimapStyle = computed(() => {\n    const pct = 100 / this._scale();\n    const x = (-this._translateX() / this._scale()) / 4;\n    const y = (-this._translateY() / this._scale()) / 4;\n    return `width:${pct}%; height:${pct}%; transform: translate(${x}px, ${y}px)`;\n  });\n}\n","<div\n  class=\"zoom-container\"\n  (wheel)=\"_onWheel($event)\"\n  (mousedown)=\"_onMouseDown($event)\"\n  (mousemove)=\"_onMouseMove($event)\"\n  (mouseup)=\"_onMouseUp()\"\n  (mouseleave)=\"_onMouseUp()\"\n  (touchstart)=\"_onTouchStart($event)\"\n  (touchmove)=\"_onTouchMove($event)\"\n  (touchend)=\"_onTouchEnd()\"\n>\n  <img\n    class=\"zoom-img\"\n    [src]=\"src()\"\n    [alt]=\"alt()\"\n    [style]=\"_imgStyle()\"\n    draggable=\"false\"\n  />\n\n  @if (showMinimap() && _isZoomed()) {\n    <div class=\"minimap\">\n      <img class=\"minimap-img\" [src]=\"src()\" [alt]=\"alt()\" aria-hidden=\"true\" />\n      <div class=\"minimap-viewport\" [style]=\"_minimapStyle()\"></div>\n    </div>\n  }\n\n  <div class=\"zoom-controls\">\n    <button type=\"button\" class=\"zoom-btn\" (click)=\"_zoomIn()\" aria-label=\"Zoom in\">+</button>\n    <span class=\"zoom-label\">{{ _scaleLabel() }}%</span>\n    <button type=\"button\" class=\"zoom-btn\" (click)=\"_zoomOut()\" aria-label=\"Zoom out\">−</button>\n    @if (_isZoomed()) {\n      <button type=\"button\" class=\"zoom-btn\" (click)=\"_reset()\" aria-label=\"Reset zoom\">↺</button>\n    }\n  </div>\n</div>\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}