@ng-doc/app/fesm2022/ng-doc-app-components-image-viewer.mjs.map

<!-- PROJECT LOGO --> <br /> <div align="center"> <a href="https://github.com/ng-doc/ng-doc"> <img src="https://ng-doc.com/assets/images/ng-doc.svg?raw=true" alt="Logo" height="150px"> </a>

{"version":3,"file":"ng-doc-app-components-image-viewer.mjs","sources":["../../../../libs/app/components/image-viewer/image-viewer.component.ts","../../../../libs/app/components/image-viewer/image-viewer.component.html","../../../../libs/app/components/image-viewer/ng-doc-app-components-image-viewer.ts"],"sourcesContent":["import {\n  ChangeDetectionStrategy,\n  ChangeDetectorRef,\n  Component,\n  ElementRef,\n  HostListener,\n  inject,\n  input,\n  TemplateRef,\n  viewChild,\n} from '@angular/core';\nimport { NgDocOverlayContainerComponent, NgDocOverlayService } from '@ng-doc/ui-kit';\nimport { NgDocOverlayRef } from '@ng-doc/ui-kit/classes';\n\n@Component({\n  selector: 'ng-doc-image-viewer',\n  imports: [],\n  templateUrl: './image-viewer.component.html',\n  styleUrl: './image-viewer.component.scss',\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  host: {\n    '[attr.data-opened]': '!!overlayRef',\n  },\n})\nexport class NgDocImageViewerComponent {\n  src = input.required<string>();\n  alt = input.required<string>();\n\n  protected readonly image = viewChild('image', { read: TemplateRef });\n  protected readonly overlay = inject(NgDocOverlayService);\n  protected readonly element = inject(ElementRef<HTMLElement>).nativeElement;\n  protected readonly changeDetectorRef = inject(ChangeDetectorRef);\n  protected overlayRef?: NgDocOverlayRef;\n\n  @HostListener('click')\n  clickEvent(): void {\n    this.overlayRef?.close();\n\n    const { width, height, top, left } = this.element.getBoundingClientRect();\n    const windowWidth = window.innerWidth;\n    const windowHeight = window.innerHeight;\n    const ratio = Math.min(windowWidth / width, windowHeight / height);\n    const newWidth = width * ratio;\n    const newHeight = height * ratio;\n\n    this.overlayRef = this.overlay.open(this.image(), {\n      overlayContainer: NgDocOverlayContainerComponent,\n      positionStrategy: this.overlay\n        .globalPositionStrategy()\n        .centerHorizontally()\n        .centerVertically(),\n      scrollStrategy: this.overlay.scrollStrategy().block(),\n      hasBackdrop: true,\n      backdropClass: 'ng-doc-blur-backdrop',\n      openAnimation: [\n        [\n          {\n            position: 'fixed',\n            width: `${width}px`,\n            height: `${height}px`,\n            top: `${top}px`,\n            left: `${left}px`,\n            transform: 'translate(0%, 0)',\n          },\n          {\n            position: 'fixed',\n            width: `${newWidth}px`,\n            height: `${newHeight}px`,\n            top: '50%',\n            left: '50%',\n            transform: 'translate(-50%, -50%)',\n          },\n        ],\n        {\n          duration: 300,\n          easing: 'cubic-bezier(0.25, 0.8, 0.25, 1)',\n        },\n        //\n        // group([\n        //   animate(\n        //     '300ms cubic-bezier(0.25, 0.8, 0.25, 1)',\n        //     style({\n        //       width: `${newWidth}px`,\n        //       height: `${newHeight}px`,\n        //       top: '50%',\n        //       left: '50%',\n        //       transform: 'translate(-50%, -50%)',\n        //     }),\n        //   ),\n        //   query('.ng-doc-image-container', [\n        //     style({ padding: 0 }),\n        //     animate('300ms cubic-bezier(0.25, 0.8, 0.25, 1)', style({ padding: '16px' })),\n        //   ]),\n        // ]),\n      ],\n      // closeAnimation: [\n      //   style({\n      //     position: 'fixed',\n      //     width: `${newWidth}px`,\n      //     height: `${newHeight}px`,\n      //     top: '50%',\n      //     left: '50%',\n      //     transform: 'translate(-50%, -50%)',\n      //   }),\n      //   group([\n      //     animate(\n      //       '300ms cubic-bezier(0.25, 0.8, 0.25, 1)',\n      //       style({ width, height, top, left, transform: 'translate(0%, 0)' }),\n      //     ),\n      //     query(\n      //       '.ng-doc-image-container',\n      //       animate('300ms cubic-bezier(0.25, 0.8, 0.25, 1)', style({ padding: 0 })),\n      //     ),\n      //   ]),\n      // ],\n    });\n\n    this.overlayRef.afterClose().subscribe(() => {\n      this.overlayRef = undefined;\n      this.changeDetectorRef.markForCheck();\n    });\n  }\n\n  protected enterContainer(element: HTMLElement): void {\n    console.log('enterContainer');\n    element.animate([{ padding: 0 }, { padding: '16px' }], {\n      duration: 300,\n      easing: 'cubic-bezier(0.25, 0.8, 0.25, 1)',\n    });\n  }\n}\n","<ng-content></ng-content>\n\n<ng-template #image>\n  <div\n    class=\"ng-doc-image-container\"\n    (click)=\"overlayRef?.close()\"\n    (animate.enter)=\"enterContainer(element)\"\n    #element>\n    <img class=\"ng-doc-scaled-image\" [src]=\"src()\" [alt]=\"alt()\" />\n  </div>\n</ng-template>\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}