build(material-experimental/menubar): add material menubar skeleton and dev-app (#20084)

Add the material-experimental/menubar component skeletons and the accompanying dev app
and its configuration.

Author: andy9775

.github/CODEOWNERS

@@ -119,6 +119,7 @@
 /src/material-experimental/mdc-table/**            @andrewseguin
 /src/material-experimental/mdc-theming/**          @mmalerba
 /src/material-experimental/mdc-typography/**       @mmalerba
+/src/material-experimental/menubar/**              @jelbourn @andy9775
 /src/material-experimental/popover-edit/**         @kseamon @andrewseguin
 
 # CDK experimental package
@@ -185,6 +186,7 @@
 /src/dev-app/mdc-table/**                          @andrewseguin
 /src/dev-app/mdc-tabs/**                           @crisbeto
 /src/dev-app/menu/**                               @crisbeto
+/src/dev-app/menubar/**                            @jelbourn @andy9775
 /src/dev-app/overlay/**                            @jelbourn @crisbeto
 /src/dev-app/paginator/**                          @andrewseguin
 /src/dev-app/platform/**                           @jelbourn @devversion

src/dev-app/BUILD.bazel

@@ -62,6 +62,7 @@ ng_module(
         "//src/dev-app/mdc-table",
         "//src/dev-app/mdc-tabs",
         "//src/dev-app/menu",
+        "//src/dev-app/menubar",
         "//src/dev-app/paginator",
         "//src/dev-app/platform",
         "//src/dev-app/popover-edit",

src/dev-app/dev-app/dev-app-layout.ts

@@ -50,6 +50,7 @@ export class DevAppLayout {
     {name: 'List', route: '/list'},
     {name: 'Live Announcer', route: '/live-announcer'},
     {name: 'Menu', route: '/menu'},
+    {name: 'Menubar', route: '/menubar'},
     {name: 'Paginator', route: '/paginator'},
     {name: 'Platform', route: '/platform'},
     {name: 'Popover Edit', route: '/popover-edit'},

src/dev-app/dev-app/routes.ts

@@ -65,6 +65,10 @@ export const DEV_APP_ROUTES: Routes = [
     path: 'live-announcer',
     loadChildren: 'live-announcer/live-announcer-demo-module#LiveAnnouncerDemoModule'
   },
+  {
+    path: 'menubar',
+    loadChildren: 'menubar/mat-menubar-demo-module#MatMenuBarDemoModule'
+  },
   {path: 'mdc-button', loadChildren: 'mdc-button/mdc-button-demo-module#MdcButtonDemoModule'},
   {path: 'mdc-card', loadChildren: 'mdc-card/mdc-card-demo-module#MdcCardDemoModule'},
   {

src/dev-app/menubar/BUILD.bazel

@@ -0,0 +1,15 @@
+load("//tools:defaults.bzl", "ng_module")
+
+package(default_visibility = ["//visibility:public"])
+
+ng_module(
+    name = "menubar",
+    srcs = glob(["**/*.ts"]),
+    assets = [
+        "mat-menubar-demo.html",
+    ],
+    deps = [
+        "//src/material-experimental/menubar",
+        "@npm//@angular/router",
+    ],
+)

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

@@ -0,0 +1,18 @@
+/**
+ * @license
+ * Copyright Google LLC All Rights Reserved.
+ *
+ * Use of this source code is governed by an MIT-style license that can be
+ * found in the LICENSE file at https://angular.io/license
+ */
+
+import {NgModule} from '@angular/core';
+import {RouterModule} from '@angular/router';
+import {MatMenuBarModule} from '@angular/material-experimental/menubar';
+import {MatMenuBarDemo} from './mat-menubar-demo';
+
+@NgModule({
+  imports: [MatMenuBarModule, RouterModule.forChild([{path: '', component: MatMenuBarDemo}])],
+  declarations: [MatMenuBarDemo],
+})
+export class MatMenuBarDemoModule {}

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

@@ -0,0 +1,5 @@
+<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>

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

@@ -0,0 +1,14 @@
+/**
+ * @license
+ * Copyright Google LLC All Rights Reserved.
+ *
+ * Use of this source code is governed by an MIT-style license that can be
+ * found in the LICENSE file at https://angular.io/license
+ */
+
+import {Component} from '@angular/core';
+
+@Component({
+  templateUrl: 'mat-menubar-demo.html',
+})
+export class MatMenuBarDemo {}

src/material-experimental/config.bzl

@@ -27,6 +27,7 @@ entryPoints = [
     "mdc-snack-bar",
     "mdc-table",
     "mdc-tabs",
+    "menubar",
     "popover-edit",
 ]
 

src/material-experimental/menubar/BUILD.bazel

@@ -0,0 +1,39 @@
+load("//tools:defaults.bzl", "ng_module", "sass_binary", "sass_library")
+
+package(default_visibility = ["//visibility:public"])
+
+ng_module(
+    name = "menubar",
+    srcs = glob(
+        ["**/*.ts"],
+        exclude = ["**/*.spec.ts"],
+    ),
+    assets = [
+        ":menubar.css",
+        ":menubar-item.css",
+    ] + glob(["**/*.html"]),
+    module_name = "@angular/material-experimental/menubar",
+    deps = [
+        "@npm//@angular/core",
+    ],
+)
+
+sass_library(
+    name = "menubar_scss_lib",
+    srcs = glob(["**/_*.scss"]),
+)
+
+sass_binary(
+    name = "menubar_scss",
+    src = "menubar.scss",
+)
+
+sass_binary(
+    name = "menubar_item_scss",
+    src = "menubar-item.scss",
+)
+
+filegroup(
+    name = "source-files",
+    srcs = glob(["**/*.ts"]),
+)

src/material-experimental/menubar/_menubar-theme.scss

@@ -0,0 +1,9 @@
+/**
+ * @license
+ * Copyright Google LLC All Rights Reserved.
+ *
+ * Use of this source code is governed by an MIT-style license that can be
+ * found in the LICENSE file at https://angular.io/license
+ */
+
+export * from './public-api';

src/material-experimental/menubar/index.ts

@@ -0,0 +1 @@
+<ng-content></ng-content>

src/material-experimental/menubar/menubar-item.html

@@ -0,0 +1,24 @@
+/**
+ * @license
+ * Copyright Google LLC All Rights Reserved.
+ *
+ * Use of this source code is governed by an MIT-style license that can be
+ * found in the LICENSE file at https://angular.io/license
+ */
+
+import {Component, ViewEncapsulation, ChangeDetectionStrategy} from '@angular/core';
+
+/**
+ * A material design MenubarItem adhering to the functionality of CdkMenuItem and
+ * CdkMenuItemTrigger. Its main purpose is to trigger menus and it lives inside of
+ * MatMenubar.
+ */
+@Component({
+  selector: 'mat-menubar-item',
+  exportAs: 'matMenubarItem',
+  templateUrl: 'menubar-item.html',
+  styleUrls: ['menubar-item.css'],
+  encapsulation: ViewEncapsulation.None,
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class MatMenuBarItem {}

src/material-experimental/menubar/menubar-item.scss

@@ -0,0 +1,17 @@
+/**
+ * @license
+ * Copyright Google LLC All Rights Reserved.
+ *
+ * Use of this source code is governed by an MIT-style license that can be
+ * found in the LICENSE file at https://angular.io/license
+ */
+
+import {NgModule} from '@angular/core';
+import {MatMenuBar} from './menubar';
+import {MatMenuBarItem} from './menubar-item';
+
+@NgModule({
+  exports: [MatMenuBar, MatMenuBarItem],
+  declarations: [MatMenuBar, MatMenuBarItem],
+})
+export class MatMenuBarModule {}

src/material-experimental/menubar/menubar-item.ts

@@ -0,0 +1 @@
+<ng-content></ng-content>

src/material-experimental/menubar/menubar-module.ts

@@ -0,0 +1,23 @@
+/**
+ * @license
+ * Copyright Google LLC All Rights Reserved.
+ *
+ * Use of this source code is governed by an MIT-style license that can be
+ * found in the LICENSE file at https://angular.io/license
+ */
+
+import {Component, ViewEncapsulation, ChangeDetectionStrategy} from '@angular/core';
+
+/**
+ * A material design Menubar adhering to the functionality of CdkMenuBar. MatMenubar
+ * should contain MatMenubarItems which trigger their own sub-menus.
+ */
+@Component({
+  selector: 'mat-menubar',
+  exportAs: 'matMenubar',
+  templateUrl: 'menubar.html',
+  styleUrls: ['menubar.css'],
+  encapsulation: ViewEncapsulation.None,
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class MatMenuBar {}

src/material-experimental/menubar/menubar.html

@@ -0,0 +1,11 @@
+/**
+ * @license
+ * Copyright Google LLC All Rights Reserved.
+ *
+ * Use of this source code is governed by an MIT-style license that can be
+ * found in the LICENSE file at https://angular.io/license
+ */
+
+export * from './menubar';
+export * from './menubar-item';
+export * from './menubar-module';