[ACA-2176] prevent Esc click event bubble into the Viewer (#6378)

* prevent Esc click event bubble into the Viewer

* fix tests

lib/content-services/src/lib/content-node-selector/content-node-dialog.service.ts

@@ -232,8 +232,13 @@ export class ContentNodeDialogService {
         return select;
     }
 
-    private openContentNodeDialog(data: ContentNodeSelectorComponentData, currentPanelClass: string, chosenWidth: string) {
-        this.dialog.open(ContentNodeSelectorComponent, { data, panelClass: currentPanelClass, width: chosenWidth });
+    private openContentNodeDialog(data: ContentNodeSelectorComponentData, panelClass: string, width: string) {
+        this.dialog.open(ContentNodeSelectorComponent, {
+            data,
+            panelClass,
+            width,
+            disableClose: true
+        });
     }
 
     private imageResolver(row: ShareDataRow): string | null {

lib/content-services/src/lib/content-node-selector/content-node-selector.component.spec.ts

@@ -15,12 +15,11 @@
  * limitations under the License.
  */
 
-import { MAT_DIALOG_DATA } from '@angular/material/dialog';
+import { MAT_DIALOG_DATA, MatDialogModule, MatDialogRef } from '@angular/material/dialog';
 import { CUSTOM_ELEMENTS_SCHEMA, EventEmitter } from '@angular/core';
 import { ComponentFixture, TestBed } from '@angular/core/testing';
 import { ContentNodeSelectorComponent } from './content-node-selector.component';
 import { Node, NodeEntry } from '@alfresco/js-api';
-import { ContentNodeSelectorPanelComponent, UploadModule } from '@alfresco/adf-content-services';
 import { By } from '@angular/platform-browser';
 import { setupTestBed, SitesService, ContentService } from '@alfresco/adf-core';
 import { of } from 'rxjs';
@@ -29,16 +28,24 @@ import { DocumentListService } from '../document-list/services/document-list.ser
 import { DocumentListComponent } from '../document-list/components/document-list.component';
 import { ShareDataRow } from '../document-list';
 import { TranslateModule } from '@ngx-translate/core';
+import { UploadModule } from '../upload';
+import { ContentNodeSelectorPanelComponent } from './content-node-selector-panel.component';
 
 describe('ContentNodeSelectorComponent', () => {
-
     let component: ContentNodeSelectorComponent;
     let fixture: ComponentFixture<ContentNodeSelectorComponent>;
+
+    const dialogRef = {
+        keydownEvents: () => of(null),
+        backdropClick: () => of(null),
+        close: jasmine.createSpy('close')
+    };
+
     const data: any = {
         title: 'Choose along citizen...',
         actionName: 'choose',
         select: new EventEmitter<Node>(),
-        rowFilter: (shareDataRow: ShareDataRow) => shareDataRow.node.entry.name === 'impossible-name',
+        rowFilter: (shareDataRow) => shareDataRow.node.entry.name === 'impossible-name',
         imageResolver: () => 'piccolo',
         currentFolderId: 'cat-girl-nuku-nuku',
         selectionMode: 'multiple',
@@ -61,10 +68,12 @@ describe('ContentNodeSelectorComponent', () => {
         imports: [
             TranslateModule.forRoot(),
             ContentTestingModule,
+            MatDialogModule,
             UploadModule
         ],
         providers: [
-            { provide: MAT_DIALOG_DATA, useValue: data }
+            { provide: MAT_DIALOG_DATA, useValue: data },
+            { provide: MatDialogRef, useValue: dialogRef }
         ],
         schemas: [CUSTOM_ELEMENTS_SCHEMA]
     });

lib/content-services/src/lib/content-node-selector/content-node-selector.component.ts

@@ -15,10 +15,11 @@
  * limitations under the License.
  */
 
-import { Component, Inject, ViewEncapsulation } from '@angular/core';
-import { MAT_DIALOG_DATA } from '@angular/material/dialog';
+import { Component, Inject, OnInit, ViewEncapsulation } from '@angular/core';
+import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material/dialog';
 import { TranslationService, NotificationService, AllowableOperationsEnum, ContentService } from '@alfresco/adf-core';
 import { Node } from '@alfresco/js-api';
+
 import { ContentNodeSelectorComponentData } from './content-node-selector.component-data.interface';
 import { NodeEntryEvent } from '../document-list/components/node.event';
 
@@ -28,7 +29,7 @@ import { NodeEntryEvent } from '../document-list/components/node.event';
     styleUrls: ['./content-node-selector.component.scss'],
     encapsulation: ViewEncapsulation.None
 })
-export class ContentNodeSelectorComponent {
+export class ContentNodeSelectorComponent implements OnInit {
     title: string;
     action: string;
     buttonActionName: string;
@@ -41,6 +42,7 @@ export class ContentNodeSelectorComponent {
     constructor(private translation: TranslationService,
                 private contentService: ContentService,
                 private notificationService: NotificationService,
+                private dialog: MatDialogRef<ContentNodeSelectorComponent>,
                 @Inject(MAT_DIALOG_DATA) public data: ContentNodeSelectorComponentData) {
         this.action = data.actionName ? data.actionName.toUpperCase() : 'CHOOSE';
         this.buttonActionName = `NODE_SELECTOR.${this.action}`;
@@ -48,6 +50,21 @@ export class ContentNodeSelectorComponent {
         this.currentDirectoryId = data.currentFolderId;
     }
 
+    ngOnInit() {
+        this.dialog.keydownEvents().subscribe(event => {
+            // Esc
+            if (event.keyCode === 27) {
+                event.preventDefault();
+                event.stopImmediatePropagation();
+                this.close();
+            }
+        });
+
+        this.dialog.backdropClick().subscribe(() => {
+           this.close();
+        });
+    }
+
     close() {
         this.data.select.complete();
     }

lib/content-services/tsconfig.lib.json

@@ -3,7 +3,6 @@
   "compilerOptions": {
     "outDir": "../dist/content-services/",
     "baseUrl": "src",
-    "types": [],
     "paths": {
       "@alfresco/adf-extensions": ["../../dist/extensions"],
       "@alfresco/adf-extensions/*": ["../../dist/extensions/*"],

lib/core/viewer/components/viewer.component.ts

@@ -580,6 +580,10 @@ export class ViewerComponent implements OnChanges, OnInit, OnDestroy {
      */
     @HostListener('document:keyup', ['$event'])
     handleKeyboardEvent(event: KeyboardEvent) {
+        if (event && event.defaultPrevented) {
+            return;
+        }
+
         const key = event.keyCode;
 
         // Esc