feat(material-experimental/menubar): update the dev-app to include a fake mat-menu (#20365)

Fake mat-menu and mat-menu-item in the dev-app in order to aid in development of mat-menubar.
Once mat-menu extends CdkMenu, the fakses should be removed.

Author: andy9775

src/dev-app/menubar/BUILD.bazel

@@ -1,4 +1,4 @@
-load("//tools:defaults.bzl", "ng_module")
+load("//tools:defaults.bzl", "ng_module", "sass_binary")
 
 package(default_visibility = ["//visibility:public"])
 
@@ -7,9 +7,16 @@ ng_module(
     srcs = glob(["**/*.ts"]),
     assets = [
         "mat-menubar-demo.html",
+        ":mat_menubar_demo_scss",
     ],
     deps = [
+        "//src/cdk-experimental/menu",
         "//src/material-experimental/menubar",
         "@npm//@angular/router",
     ],
 )
+
+sass_binary(
+    name = "mat_menubar_demo_scss",
+    src = "mat-menubar-demo.scss",
+)

src/dev-app/menubar/mat-menubar-demo-module.ts

@@ -9,10 +9,15 @@
 import {NgModule} from '@angular/core';
 import {RouterModule} from '@angular/router';
 import {MatMenuBarModule} from '@angular/material-experimental/menubar';
-import {MatMenuBarDemo} from './mat-menubar-demo';
+import {CdkMenuModule} from '@angular/cdk-experimental/menu';
+import {MatMenuBarDemo, DemoMenu, DemoMenuItem} from './mat-menubar-demo';
 
 @NgModule({
-  imports: [MatMenuBarModule, RouterModule.forChild([{path: '', component: MatMenuBarDemo}])],
-  declarations: [MatMenuBarDemo],
+  imports: [
+    CdkMenuModule,
+    MatMenuBarModule,
+    RouterModule.forChild([{path: '', component: MatMenuBarDemo}]),
+  ],
+  declarations: [MatMenuBarDemo, DemoMenu, DemoMenuItem],
 })
 export class MatMenuBarDemoModule {}

src/dev-app/menubar/mat-menubar-demo.html

@@ -1,5 +1,27 @@
 <mat-menubar>
-  <mat-menubar-item>File</mat-menubar-item>
-  <mat-menubar-item>Edit</mat-menubar-item>
-  <mat-menubar-item>View</mat-menubar-item>
+  <mat-menubar-item [cdkMenuTriggerFor]="file">File</mat-menubar-item>
+  <mat-menubar-item [cdkMenuTriggerFor]="edit">Edit</mat-menubar-item>
+  <mat-menubar-item [cdkMenuTriggerFor]="view">View</mat-menubar-item>
 </mat-menubar>
+
+<ng-template cdkMenuPanel #file="cdkMenuPanel">
+  <demo-menu [cdkMenuPanel]="file">
+    <demo-menu-item>Share</demo-menu-item>
+    <demo-menu-item>Open</demo-menu-item>
+    <demo-menu-item>Make a Copy</demo-menu-item>
+  </demo-menu>
+</ng-template>
+
+<ng-template cdkMenuPanel #edit="cdkMenuPanel">
+  <demo-menu [cdkMenuPanel]="edit">
+    <demo-menu-item>Undo</demo-menu-item>
+    <demo-menu-item>Redo</demo-menu-item>
+  </demo-menu>
+</ng-template>
+
+<ng-template cdkMenuPanel #view="cdkMenuPanel">
+  <demo-menu [cdkMenuPanel]="view">
+    <demo-menu-item>Show Ruler</demo-menu-item>
+    <demo-menu-item>Show Document Outline</demo-menu-item>
+  </demo-menu>
+</ng-template>

src/dev-app/menubar/mat-menubar-demo.scss

@@ -0,0 +1,28 @@
+.mat-menu {
+  display: flex;
+  flex-direction: column;
+
+  max-height: 808px;
+  min-height: 64px;
+  max-width: 280px;
+  min-width: 112px;
+
+  padding: 8px 0;
+
+  border-radius: 4px;
+  box-shadow: #0003 0 2px 4px -1px, #00000024 0 4px 5px 0, #0000001f 0 1px 10px 0;
+
+  cursor: pointer;
+
+  &[aria-orientation='horizontal'] {
+    flex-direction: row;
+  }
+}
+
+.mat-menu-item {
+  display: block;
+  padding: 16px;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+}

src/dev-app/menubar/mat-menubar-demo.ts

@@ -6,9 +6,48 @@
  * found in the LICENSE file at https://angular.io/license
  */
 
-import {Component} from '@angular/core';
+import {Component, ViewEncapsulation} from '@angular/core';
+import {CdkMenu, CdkMenuItem, CdkMenuGroup, CDK_MENU} from '@angular/cdk-experimental/menu';
 
 @Component({
   templateUrl: 'mat-menubar-demo.html',
 })
 export class MatMenuBarDemo {}
+
+// TODO: Remove the fake when mat-menu is re-built with CdkMenu directives
+@Component({
+  selector: 'demo-menu',
+  exportAs: 'demoMenu',
+  template: '<ng-content></ng-content>',
+  host: {
+    '[tabindex]': '_isInline() ? 0 : null',
+    'role': 'menu',
+    'class': 'cdk-menu mat-menu mat-menu-panel',
+    '[class.cdk-menu-inline]': '_isInline()',
+    '[attr.aria-orientation]': 'orientation',
+  },
+  providers: [
+    {provide: CdkMenuGroup, useExisting: DemoMenu},
+    {provide: CDK_MENU, useExisting: DemoMenu},
+  ],
+  styleUrls: ['mat-menubar-demo.css'],
+  encapsulation: ViewEncapsulation.None,
+})
+export class DemoMenu extends CdkMenu {}
+
+// TODO: Remove the fake when mat-menu-item is re-built with CdkMenu directives
+@Component({
+  selector: 'demo-menu-item',
+  exportAs: 'demoMenuItem',
+  host: {
+    '[tabindex]': '_tabindex',
+    'type': 'button',
+    'role': 'menuitem',
+    'class': 'cdk-menu-item mat-menu-item',
+    '[attr.aria-disabled]': 'disabled || null',
+  },
+  template: '<ng-content></ng-content>',
+  styleUrls: ['mat-menubar-demo.css'],
+  encapsulation: ViewEncapsulation.None,
+})
+export class DemoMenuItem extends CdkMenuItem {}