fix(context-menu): open by trigger in shadow dom (#418)

projects/ng-aquila/src/context-menu/context-menu-trigger.directive.ts

@@ -10,7 +10,7 @@ import {
   OverlayRef,
   ScrollStrategy,
 } from '@angular/cdk/overlay';
-import { normalizePassiveListenerOptions } from '@angular/cdk/platform';
+import { _getEventTarget } from '@angular/cdk/platform';
 import { TemplatePortal } from '@angular/cdk/portal';
 import {
   AfterContentInit,
@@ -471,8 +471,8 @@ export class NxContextMenuTriggerDirective
   private _waitForClose() {
     return this._documentClickObservable
       .pipe(
-        map(event => event.target as Node),
-        filter((target: Node) => !this._element.nativeElement.contains(target)),
+        map(event => _getEventTarget(event)),
+        filter(target => !this._element.nativeElement.contains(target as Node | null)),
         takeUntil(this.contextMenu.closed))
       .subscribe(() => {
         this.closeContextMenu();

projects/ng-aquila/src/context-menu/context-menu.spec.ts

@@ -10,6 +10,7 @@ import {
   ViewChildren,
   QueryList,
   Type,
+  ViewEncapsulation,
 } from '@angular/core';
 import { Direction, Directionality } from '@angular/cdk/bidi';
 import { OverlayContainer } from '@angular/cdk/overlay';
@@ -40,6 +41,21 @@ import { NxButtonComponent, NxButtonModule } from '@aposin/ng-aquila/button';
 // For better readablity here, We can safely ignore some conventions in our specs
 // tslint:disable:component-class-suffix
 
+@Component({
+    template: `
+      <nx-context-menu #menu="nxContextMenu">
+        <button nxContextMenuItem>Settings</button>
+        <button nxContextMenuItem>Preferences</button>
+      </nx-context-menu>
+      <button nxButton="tertiary small" [nxContextMenuTriggerFor]="menu" #trigger>Open</button>
+    `,
+    encapsulation: ViewEncapsulation.ShadowDom,
+})
+class ShadowDomTestComponent {
+    @ViewChild('trigger', { static: true, read: ElementRef }) trigger?: ElementRef<HTMLButtonElement>;
+    @ViewChild('menu', { static: true, read: NxContextMenuComponent }) menu?: NxContextMenuComponent;
+}
+
 class MockNgZone extends NgZone {
   onStable: EventEmitter<any> = new EventEmitter(false);
 
@@ -92,13 +108,31 @@ describe('nxContextMenu', () => {
 
   }
 
+  function getContextMenuElement(): HTMLDivElement | null {
+    return overlayContainer.getContainerElement().querySelector('.nx-context-menu');
+  }
+
   afterEach(inject([OverlayContainer], (currentOverlayContainer: OverlayContainer) => {
     // Since we're resetting the testing module in some of the tests,
     // we can potentially have multiple overlay containers.
     currentOverlayContainer.ngOnDestroy();
     overlayContainer.ngOnDestroy();
   }));
 
+  it('should open the menu in ShadowDom mode', fakeAsync(() => {
+    const fixture = createComponent(ShadowDomTestComponent);
+    fixture.detectChanges();
+    expect(getContextMenuElement()).toBeNull();
+    fixture.componentInstance.trigger!.nativeElement.click();
+    fixture.detectChanges();
+    flush();
+    expect(getContextMenuElement()).toBeTruthy();
+    fixture.componentInstance.trigger!.nativeElement.click();
+    fixture.detectChanges();
+    flush();
+    expect(getContextMenuElement()).toBeNull();
+  }));
+
   it('should open the menu as an idempotent operation', () => {
     const fixture = createComponent(SimpleMenu);
     fixture.detectChanges();