@elementar-rt/components 0.6.55

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

@@ -0,0 +1,349 @@
+import * as i0 from '@angular/core';
+import { EventEmitter, InjectionToken, inject, ElementRef, DOCUMENT, DestroyRef, Renderer2, computed, Component, Injector, Directive, TemplateRef, contentChild, input } from '@angular/core';
+import { Overlay } from '@angular/cdk/overlay';
+import { ComponentPortal } from '@angular/cdk/portal';
+import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
+import { MatIcon } from '@angular/material/icon';
+import { MatProgressSpinner } from '@angular/material/progress-spinner';
+import { NgTemplateOutlet } from '@angular/common';
+import { fromEvent } from 'rxjs';
+
+class PictureRef {
+    closed = new EventEmitter();
+    close() {
+        this.closed.emit();
+    }
+}
+
+const IMAGE_VIEWER = new InjectionToken('IMAGE_VIEWER');
+const IMAGE_VIEWER_PICTURE_REF = new InjectionToken('IMAGE_VIEWER_PICTURE_REF');
+const IMAGE_VIEWER_PICTURE_DATA = new InjectionToken('IMAGE_VIEWER_PICTURE_DATA');
+
+class ImageViewerComponent {
+    elementRef = inject(ElementRef);
+    _document = inject(DOCUMENT);
+    _destroyRef = inject(DestroyRef);
+    _renderer = inject(Renderer2);
+    _startClientY = 0;
+    _startClientX = 0;
+    _offsetY = 0;
+    _offsetX = 0;
+    _tmpOffsetY = 0;
+    _tmpOffsetX = 0;
+    _dragging = false;
+    pictureRef = inject(IMAGE_VIEWER_PICTURE_REF);
+    data = inject(IMAGE_VIEWER_PICTURE_DATA);
+    loading = true;
+    scale = 1;
+    image;
+    alreadyDragged = false;
+    scaleMin = 1;
+    scaleMax = 1;
+    padding = 30;
+    scaled = computed(() => {
+        return this.scale !== 1;
+    }, ...(ngDevMode ? [{ debugName: "scaled" }] : []));
+    hasTitle = computed(() => {
+        return !!(this.data.title || this.data.titleTplRef);
+    }, ...(ngDevMode ? [{ debugName: "hasTitle" }] : []));
+    hasAside = computed(() => {
+        return !!(this.data.caption || this.data.description || this.data.captionTplRef || this.data.descriptionTplRef);
+    }, ...(ngDevMode ? [{ debugName: "hasAside" }] : []));
+    onLoad(event) {
+        this.loading = false;
+        this.image = event.target;
+        if (this.image.width > this.image.height) {
+            this.scaleMax = this.image.naturalWidth / this.image.width;
+        }
+        else {
+            this.scaleMax = this.image.naturalHeight / this.image.height;
+        }
+        const image = this.image;
+        fromEvent(image, 'mousedown')
+            .pipe(takeUntilDestroyed(this._destroyRef))
+            .subscribe((event) => {
+            if (this.scale === this.scaleMin || event.button === 2) {
+                return;
+            }
+            this._dragging = true;
+            this._startClientY = event.clientY;
+            this._startClientX = event.clientX;
+        });
+        fromEvent(this._document, 'mousemove')
+            .pipe(takeUntilDestroyed(this._destroyRef))
+            .subscribe((event) => {
+            if (this._dragging) {
+                const scaleFactor = (1 / this.scale);
+                let offsetY = (event.clientY - this._startClientY) * scaleFactor;
+                let offsetX = (event.clientX - this._startClientX) * scaleFactor;
+                this._transform(offsetY, offsetX);
+            }
+        });
+        fromEvent(this._document, 'mouseup')
+            .pipe(takeUntilDestroyed(this._destroyRef))
+            .subscribe((event) => {
+            if (this._dragging) {
+                const element = this.elementRef.nativeElement;
+                const elementRect = element.getBoundingClientRect();
+                this._renderer.removeClass(element, 'dragging');
+                this._dragging = false;
+                let imageWidth = Math.floor(image.getBoundingClientRect().width);
+                let imageHeight = Math.floor(image.getBoundingClientRect().height);
+                let imageViewportWidth = this.hasAside() ? elementRect.width - 420 : elementRect.width;
+                let imageViewportHeight = elementRect.height;
+                if (imageWidth <= imageViewportWidth && imageHeight <= imageViewportHeight) {
+                    this._tmpOffsetY = 0;
+                    this._tmpOffsetX = 0;
+                    this._offsetY = 0;
+                    this._offsetX = 0;
+                    this._renderer.setStyle(image, 'transform', `translate(0px,0px)`);
+                }
+                else {
+                    const imageRect = image.getBoundingClientRect();
+                    const widthDiff = imageViewportWidth - imageWidth;
+                    const heightDiff = imageViewportHeight - imageHeight;
+                    const xPositionDiff = widthDiff / this.scale / 2;
+                    const yPositionDiff = heightDiff / this.scale / 2;
+                    if (imageRect.x > 0 && imageRect.y > 0) {
+                        this._tmpOffsetY = yPositionDiff * -1 + this.padding;
+                        this._tmpOffsetX = xPositionDiff * -1 + this.padding;
+                    }
+                    else if (imageRect.x < widthDiff && imageRect.y > 0) {
+                        this._tmpOffsetY = yPositionDiff * -1 + this.padding;
+                        this._tmpOffsetX = xPositionDiff - this.padding;
+                    }
+                    else if (imageRect.x < widthDiff && imageRect.y < heightDiff) {
+                        this._tmpOffsetY = yPositionDiff - this.padding;
+                        this._tmpOffsetX = xPositionDiff - this.padding;
+                    }
+                    else if (imageRect.x > 0 && imageRect.y < heightDiff) {
+                        this._tmpOffsetY = yPositionDiff - this.padding;
+                        this._tmpOffsetX = xPositionDiff * -1 + this.padding;
+                    }
+                    if (imageWidth < imageViewportWidth) {
+                        this._tmpOffsetX = 0;
+                    }
+                    if (imageHeight < imageViewportHeight) {
+                        this._tmpOffsetY = 0;
+                    }
+                    this._offsetY = this._tmpOffsetY;
+                    this._offsetX = this._tmpOffsetX;
+                    this._renderer.setStyle(image, 'transform', `translate(${this._tmpOffsetX}px,${this._tmpOffsetY}px)`);
+                }
+            }
+        });
+    }
+    onBackdropClick() {
+        this.pictureRef.close();
+    }
+    onPreventClick(event) {
+        event.preventDefault();
+        event.stopPropagation();
+    }
+    toggleZoom() {
+        if (this.scale === this.scaleMin) {
+            this.scale = this.scaleMax;
+        }
+        else {
+            this.scale = this.scaleMin;
+            this._renderer.setStyle(this.image, 'transform', `translate(0px,0px)`);
+            this._offsetX = 0;
+            this._offsetY = 0;
+            this._tmpOffsetY = 0;
+            this._tmpOffsetX = 0;
+        }
+        const element = this.elementRef.nativeElement;
+        element.style.setProperty('--emr-image-viewer-picture-scale', this.scale.toString());
+    }
+    onDragStart(event) {
+        event.stopPropagation();
+        event.preventDefault();
+        this.alreadyDragged = true;
+    }
+    _transform(offsetY, offsetX) {
+        const image = this.image;
+        const scaleFactor = (1 / this.scale);
+        let translateX = this._offsetX + offsetX;
+        // let offsetStartX = ((image.width / 2) - translateX) / scaleFactor;
+        // let offsetEndX = ((image.width / 2) + translateX) / scaleFactor;
+        let translateY = this._offsetY + offsetY;
+        // let offsetStartY = ((image.height / 2) - translateY) / scaleFactor;
+        // let offsetEndY = ((image.height / 2) + translateY) / scaleFactor;
+        // let thumbHalfWidth = 150;
+        //
+        // if (offsetStartX <= thumbHalfWidth && translateX > 0) {
+        //   translateX = (image.width / 2) - (thumbHalfWidth * scaleFactor);
+        // } else if (offsetEndX <= thumbHalfWidth && translateX < 0) {
+        //   translateX = -((image.width / 2) - (thumbHalfWidth * scaleFactor));
+        // }
+        //
+        // if (offsetStartY <= thumbHalfWidth && translateY > 0) {
+        //   translateY = (image.height / 2) - (thumbHalfWidth * scaleFactor);
+        // } else if (offsetEndY <= thumbHalfWidth && translateY < 0) {
+        //   translateY = -((image.height / 2) - (thumbHalfWidth * scaleFactor));
+        // }
+        this._tmpOffsetY = translateY;
+        this._tmpOffsetX = translateX;
+        this._renderer.setStyle(image, 'transform', `translate(${translateX}px,${translateY}px)`);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: ImageViewerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.10", 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\">\r\n  @if (hasTitle()) {\r\n    <div class=\"title\">\r\n      @if (data.titleTplRef) {\r\n        <ng-container [ngTemplateOutlet]=\"data.titleTplRef\"></ng-container>\r\n      } @else if (data.caption) {\r\n        {{ data.title }}\r\n      }\r\n    </div>\r\n  }\r\n</div>\r\n<div class=\"controls\" (click)=\"onPreventClick($event)\">\r\n  <div class=\"w-max\">\r\n    <button (click)=\"pictureRef.close()\" class=\"close\">\r\n      <mat-icon>close</mat-icon>\r\n    </button>\r\n  </div>\r\n  <div class=\"w-max\">\r\n    <button class=\"zoom\" (click)=\"toggleZoom()\" [disabled]=\"scaleMax === 1 || null\">\r\n      @if (scale === this.scaleMin) {\r\n        <mat-icon>zoom_in</mat-icon>\r\n      } @else {\r\n        <mat-icon>zoom_out</mat-icon>\r\n      }\r\n    </button>\r\n  </div>\r\n</div>\r\n<div class=\"content\" (click)=\"onBackdropClick()\">\r\n  <div class=\"image\" (dragstart)=\"onDragStart($event)\">\r\n    @if (loading) {\r\n      <div class=\"spinner\">\r\n        <mat-spinner/>\r\n      </div>\r\n    }\r\n    <img [src]=\"data.sourceUrl\" alt=\"\" (load)=\"onLoad($event)\" (click)=\"onPreventClick($event)\" class=\"img\">\r\n  </div>\r\n  @if (hasAside()) {\r\n    <aside class=\"aside\" (click)=\"onPreventClick($event)\">\r\n      <div class=\"aside-header\">\r\n        @if (data.captionTplRef) {\r\n          <ng-container [ngTemplateOutlet]=\"data.captionTplRef\"></ng-container>\r\n        } @else if (data.caption) {\r\n          {{ data.caption }}\r\n        }\r\n      </div>\r\n      <div class=\"aside-body\">\r\n        <div class=\"aside-body-scroll\">\r\n          @if (data.descriptionTplRef) {\r\n            <ng-container [ngTemplateOutlet]=\"data.descriptionTplRef\"></ng-container>\r\n          } @else if (data.description) {\r\n            {{ data.description }}\r\n          }\r\n        </div>\r\n      </div>\r\n    </aside>\r\n  }\r\n</div>\r\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.1.14 | 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.10", ngImport: i0, type: ImageViewerComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'emr-image-viewer', exportAs: 'emrImageViewer', imports: [
+                        MatIcon,
+                        MatProgressSpinner,
+                        NgTemplateOutlet
+                    ], host: {
+                        'class': 'emr-image-viewer',
+                        '[class.loading]': 'loading',
+                        '[class.dragging]': '_dragging',
+                        '[class.scaled]': 'scale !== 1'
+                    }, template: "<div class=\"title-container\">\r\n  @if (hasTitle()) {\r\n    <div class=\"title\">\r\n      @if (data.titleTplRef) {\r\n        <ng-container [ngTemplateOutlet]=\"data.titleTplRef\"></ng-container>\r\n      } @else if (data.caption) {\r\n        {{ data.title }}\r\n      }\r\n    </div>\r\n  }\r\n</div>\r\n<div class=\"controls\" (click)=\"onPreventClick($event)\">\r\n  <div class=\"w-max\">\r\n    <button (click)=\"pictureRef.close()\" class=\"close\">\r\n      <mat-icon>close</mat-icon>\r\n    </button>\r\n  </div>\r\n  <div class=\"w-max\">\r\n    <button class=\"zoom\" (click)=\"toggleZoom()\" [disabled]=\"scaleMax === 1 || null\">\r\n      @if (scale === this.scaleMin) {\r\n        <mat-icon>zoom_in</mat-icon>\r\n      } @else {\r\n        <mat-icon>zoom_out</mat-icon>\r\n      }\r\n    </button>\r\n  </div>\r\n</div>\r\n<div class=\"content\" (click)=\"onBackdropClick()\">\r\n  <div class=\"image\" (dragstart)=\"onDragStart($event)\">\r\n    @if (loading) {\r\n      <div class=\"spinner\">\r\n        <mat-spinner/>\r\n      </div>\r\n    }\r\n    <img [src]=\"data.sourceUrl\" alt=\"\" (load)=\"onLoad($event)\" (click)=\"onPreventClick($event)\" class=\"img\">\r\n  </div>\r\n  @if (hasAside()) {\r\n    <aside class=\"aside\" (click)=\"onPreventClick($event)\">\r\n      <div class=\"aside-header\">\r\n        @if (data.captionTplRef) {\r\n          <ng-container [ngTemplateOutlet]=\"data.captionTplRef\"></ng-container>\r\n        } @else if (data.caption) {\r\n          {{ data.caption }}\r\n        }\r\n      </div>\r\n      <div class=\"aside-body\">\r\n        <div class=\"aside-body-scroll\">\r\n          @if (data.descriptionTplRef) {\r\n            <ng-container [ngTemplateOutlet]=\"data.descriptionTplRef\"></ng-container>\r\n          } @else if (data.description) {\r\n            {{ data.description }}\r\n          }\r\n        </div>\r\n      </div>\r\n    </aside>\r\n  }\r\n</div>\r\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.1.14 | MIT License | https://tailwindcss.com */\n"] }]
+        }] });
+
+class ImageViewerDirective {
+    _overlay = inject(Overlay);
+    _injector = inject(Injector);
+    _destroyRef = inject(DestroyRef);
+    get api() {
+        return {
+            open: (options) => this._open(options)
+        };
+    }
+    _open(options) {
+        const pictureRef = new PictureRef();
+        const overlayRef = this._overlay.create({
+            positionStrategy: this._overlay.position().global(),
+            hasBackdrop: true
+        });
+        const injector = Injector.create({
+            providers: [
+                {
+                    provide: IMAGE_VIEWER_PICTURE_REF,
+                    useValue: pictureRef
+                },
+                {
+                    provide: IMAGE_VIEWER_PICTURE_DATA,
+                    useValue: options
+                }
+            ],
+            parent: this._injector
+        });
+        const portal = new ComponentPortal(ImageViewerComponent, null, injector);
+        overlayRef.attach(portal);
+        pictureRef.closed.pipe(takeUntilDestroyed(this._destroyRef)).subscribe(() => {
+            overlayRef.detach();
+        });
+        return pictureRef;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: ImageViewerDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.10", type: ImageViewerDirective, isStandalone: true, selector: "[emrImageViewer]", host: { classAttribute: "emr-image-viewer" }, exportAs: ["emrImageViewer"], ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: ImageViewerDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[emrImageViewer]',
+                    exportAs: 'emrImageViewer',
+                    standalone: true,
+                    host: {
+                        'class': 'emr-image-viewer',
+                    }
+                }]
+        }] });
+
+class ImageViewerPictureCaptionDirective {
+    templateRef = inject(TemplateRef);
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: ImageViewerPictureCaptionDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.10", type: ImageViewerPictureCaptionDirective, isStandalone: true, selector: "[emrImageViewerPictureCaption]", ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: ImageViewerPictureCaptionDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[emrImageViewerPictureCaption]',
+                    standalone: true
+                }]
+        }] });
+
+class ImageViewerPictureDescriptionDirective {
+    templateRef = inject(TemplateRef);
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: ImageViewerPictureDescriptionDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.10", type: ImageViewerPictureDescriptionDirective, isStandalone: true, selector: "[emrImageViewerPictureDescription]", ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: ImageViewerPictureDescriptionDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[emrImageViewerPictureDescription]',
+                    standalone: true
+                }]
+        }] });
+
+class ImageViewerPictureTitleDirective {
+    templateRef = inject(TemplateRef);
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: ImageViewerPictureTitleDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.10", type: ImageViewerPictureTitleDirective, isStandalone: true, selector: "[emrImageViewerPictureTitle]", ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: ImageViewerPictureTitleDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[emrImageViewerPictureTitle]',
+                    standalone: true
+                }]
+        }] });
+
+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" }] : []));
+    onClick(event) {
+        event.preventDefault();
+        event.stopPropagation();
+        this._imageViewer.api.open({
+            sourceUrl: this.sourceUrl(),
+            title: this.title(),
+            caption: this.caption(),
+            description: this.description(),
+            titleTplRef: this._titleTplRef()?.templateRef,
+            captionTplRef: this._captionTplRef()?.templateRef,
+            descriptionTplRef: this._descriptionTplRef()?.templateRef
+        });
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: ImageViewerPictureDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.2.0", version: "20.3.10", 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.10", ngImport: i0, type: ImageViewerPictureDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[emrImageViewerPicture]',
+                    exportAs: 'emrImageViewerPicture',
+                    standalone: true,
+                    providers: [
+                        {
+                            provide: IMAGE_VIEWER,
+                            useExisting: ImageViewerPictureDirective
+                        }
+                    ],
+                    host: {
+                        'class': 'emr-image-viewer-picture',
+                        '(click)': 'onClick($event)'
+                    }
+                }]
+        }], propDecorators: { _titleTplRef: [{ type: i0.ContentChild, args: [i0.forwardRef(() => ImageViewerPictureTitleDirective), { isSignal: true }] }], _captionTplRef: [{ type: i0.ContentChild, args: [i0.forwardRef(() => ImageViewerPictureCaptionDirective), { isSignal: true }] }], _descriptionTplRef: [{ type: i0.ContentChild, args: [i0.forwardRef(() => ImageViewerPictureDescriptionDirective), { isSignal: true }] }], sourceUrl: [{ type: i0.Input, args: [{ isSignal: true, alias: "sourceUrl", required: true }] }], caption: [{ type: i0.Input, args: [{ isSignal: true, alias: "caption", required: false }] }], title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: false }] }], description: [{ type: i0.Input, args: [{ isSignal: true, alias: "description", required: false }] }] } });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { ImageViewerDirective, ImageViewerPictureCaptionDirective, ImageViewerPictureDescriptionDirective, ImageViewerPictureDirective, ImageViewerPictureTitleDirective };
+//# sourceMappingURL=elementar-rt-components-image-viewer.mjs.map

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

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