[ACS-4251] MatMenuItem button container now triggers click on children via querySelector instead of x-y co-ordinates. Removed embedded styles and added classes to the layout for toolbar-menu.component.html

projects/aca-shared/src/lib/components/tool-bar/toolbar-menu/toolbar-menu.component.html

@@ -12,9 +12,10 @@
 </button>
 
 <mat-menu #menu="matMenu" [overlapTrigger]="false">
-  <ng-container *ngFor="let child of actionRef.children; trackBy: trackByActionId" [ngSwitch]="child.type">
+  <ng-container *ngFor="let child of actionRef.children; trackBy: trackByActionId">
+    <ng-container [ngSwitch]="child.type">
       <ng-container *ngSwitchCase="'custom'">
-        <button mat-menu-item style="padding: 0" (click)="onCustomItemContainerClick($event)">
+        <button mat-menu-item class="aca-mat-menu-item-container" (click)="onCustomItemContainerClick($event)">
           <adf-dynamic-component [id]="child.component" [data]="child.data"></adf-dynamic-component>
         </button>
       </ng-container>
@@ -22,9 +23,10 @@
         <app-toolbar-menu-item [actionRef]="child" [menuId]="actionRef.id"></app-toolbar-menu-item>
       </ng-container>
       <ng-container *ngSwitchDefault>
-        <button mat-menu-item style="padding: 0" (click)="onCustomItemContainerClick($event)">
+        <button mat-menu-item class="aca-mat-menu-item-container" (click)="onCustomItemContainerClick($event)">
           <app-toolbar-menu-item [actionRef]="child" [menuId]="actionRef.id"></app-toolbar-menu-item>
         </button>
       </ng-container>
     </ng-container>
+  </ng-container>
 </mat-menu>

projects/aca-shared/src/lib/components/tool-bar/toolbar-menu/toolbar-menu.component.ts

@@ -23,17 +23,23 @@
  * along with Alfresco. If not, see <http://www.gnu.org/licenses/>.
  */
 
-import { Component, Input, ViewEncapsulation, HostListener, ViewChild, ViewChildren, QueryList } from '@angular/core';
+import { Component, Input, ViewEncapsulation, HostListener, ViewChild } from '@angular/core';
 import { ContentActionRef } from '@alfresco/adf-extensions';
 import { MatMenu, MatMenuTrigger } from '@angular/material/menu';
 import { ThemePalette } from '@angular/material/core';
-import { ToolbarMenuItemComponent } from '../toolbar-menu-item/toolbar-menu-item.component';
 
 @Component({
   selector: 'app-toolbar-menu',
   templateUrl: './toolbar-menu.component.html',
   encapsulation: ViewEncapsulation.None,
-  host: { class: 'app-toolbar-menu' }
+  host: { class: 'app-toolbar-menu' },
+  styles: [
+    `
+      .aca-mat-menu-item-container {
+        padding: 0;
+      }
+    `
+  ]
 })
 export class ToolbarMenuComponent {
   @Input()
@@ -48,9 +54,6 @@ export class ToolbarMenuComponent {
   @ViewChild(MatMenu)
   menu: MatMenu;
 
-  @ViewChildren(ToolbarMenuItemComponent)
-  toolbarMenuItems: QueryList<ToolbarMenuItemComponent>;
-
   @HostListener('document:keydown.Escape')
   handleKeydownEscape() {
     this.matTrigger.closeMenu();
@@ -61,19 +64,8 @@ export class ToolbarMenuComponent {
   }
 
   onCustomItemContainerClick(event) {
-    console.log(event);
+    const ev = new MouseEvent('click');
-    const el: HTMLElement = event.target;
+    event.target.querySelector('.mat-menu-item').dispatchEvent(ev);
-    const x = window.scrollX + el.getBoundingClientRect().left + 5;
-    const y = window.scrollY + el.getBoundingClientRect().top + 5;
-
-    const opts = {
-      bubbles: false,
-      screenX: x,
-      screenY: y
-    };
-
-    const ev = new MouseEvent('click', opts);
-    document.elementFromPoint(x, y).dispatchEvent(ev);
     event.stopPropagation();
   }
 }