[primefaces#13305] - Fixed ESC button close preview on image Component

SoyDiego · Jul 9, 2023 · 0facc2d · 0facc2d
1 parent e1f8c18
commit 0facc2d
Showing 1 changed file with 9 additions and 3 deletions.
diff --git a/src/app/components/image/image.ts b/src/app/components/image/image.ts
@@ -1,6 +1,6 @@
 import { AnimationEvent, animate, style, transition, trigger } from '@angular/animations';
 import { CommonModule, DOCUMENT } from '@angular/common';
-import { AfterContentInit, ChangeDetectionStrategy, ChangeDetectorRef, Component, ContentChildren, ElementRef, EventEmitter, Inject, Input, NgModule, Output, QueryList, TemplateRef, ViewChild, ViewEncapsulation } from '@angular/core';
+import { AfterContentInit, ChangeDetectionStrategy, ChangeDetectorRef, Component, ContentChildren, ElementRef, EventEmitter, HostListener, Inject, Input, NgModule, Output, QueryList, TemplateRef, ViewChild, ViewEncapsulation } from '@angular/core';
 import { SafeUrl } from '@angular/platform-browser';
 import { PrimeNGConfig, PrimeTemplate, SharedModule } from 'primeng/api';
 import { DomHandler } from 'primeng/dom';
@@ -199,7 +199,7 @@ export class Image implements AfterContentInit {
         min: 0.5
     };
 
-    constructor(@Inject(DOCUMENT) private document: Document, private config: PrimeNGConfig, private cd: ChangeDetectorRef) {}
+    constructor(@Inject(DOCUMENT) private document: Document, private config: PrimeNGConfig, private cd: ChangeDetectorRef) { }
 
     ngAfterContentInit() {
         this.templates?.forEach((item) => {
@@ -340,11 +340,17 @@ export class Image implements AfterContentInit {
     imageError(event: Event) {
         this.onImageError.emit(event);
     }
+
+    @HostListener('document:keydown.escape', ['$event']) onKeydownHandler(event: KeyboardEvent) {
+        if (this.previewVisible) {
+            this.closePreview();
+        }
+    }
 }
 
 @NgModule({
     imports: [CommonModule, SharedModule, RefreshIcon, EyeIcon, UndoIcon, SearchMinusIcon, SearchPlusIcon, TimesIcon],
     exports: [Image, SharedModule],
     declarations: [Image]
 })
-export class ImageModule {}
+export class ImageModule { }