feat: add bottom sheet component

* Adds an initial implementation of the new `MatBottomSheet` service that allows users to display component-based or template-based bottom sheets.
* Sets up the various boilerplate and infrastructure necessary for a new component.

Note: this is an initial implementation that has the necessary functionality, styles and accessibility. More docs, examples and touch gestures will be added in a follow-up.

Author: crisbeto

.github/CODEOWNERS

@@ -1,6 +1,7 @@
 # Angular Material components
 /src/lib/*                                         @jelbourn
 /src/lib/autocomplete/**                           @kara @crisbeto
+/src/lib/bottom-sheet/**                           @jelbourn @crisbeto
 /src/lib/button-toggle/**                          @tinayuangao
 /src/lib/button/**                                 @tinayuangao
 /src/lib/card/**                                   @jelbourn

src/demo-app/bottom-sheet/bottom-sheet-demo.html

@@ -0,0 +1,45 @@
+<h1>Bottom sheet demo</h1>
+
+<button mat-raised-button color="primary" (click)="openComponent()">Open component sheet</button>
+<button mat-raised-button color="accent" (click)="openTemplate()">Open template sheet</button>
+
+<mat-card class="demo-dialog-card">
+  <mat-card-content>
+    <h2>Options</h2>
+
+    <p>
+      <mat-checkbox [(ngModel)]="config.hasBackdrop">Has backdrop</mat-checkbox>
+    </p>
+
+    <p>
+      <mat-checkbox [(ngModel)]="config.disableClose">Disable close</mat-checkbox>
+    </p>
+
+    <p>
+      <mat-form-field>
+        <input matInput [(ngModel)]="config.backdropClass" placeholder="Backdrop class">
+      </mat-form-field>
+    </p>
+
+    <p>
+      <mat-form-field>
+        <mat-select placeholder="Direction" [(ngModel)]="config.direction">
+          <mat-option value="ltr">LTR</mat-option>
+          <mat-option value="rtl">RTL</mat-option>
+        </mat-select>
+      </mat-form-field>
+    </p>
+
+  </mat-card-content>
+</mat-card>
+
+
+<ng-template let-bottomSheetRef="bottomSheetRef">
+  <mat-nav-list>
+    <mat-list-item (click)="bottomSheetRef.dismiss()" *ngFor="let action of [1, 2, 3]">
+      <mat-icon mat-list-icon>folder</mat-icon>
+      <span mat-line>Action {{ link }}</span>
+      <span mat-line>Description</span>
+    </mat-list-item>
+  </mat-nav-list>
+</ng-template>

src/demo-app/bottom-sheet/bottom-sheet-demo.scss

@@ -0,0 +1,8 @@
+.demo-dialog-card {
+  max-width: 405px;
+  margin: 20px 0;
+}
+
+.mat-raised-button {
+  margin-right: 5px;
+}

src/demo-app/bottom-sheet/bottom-sheet-demo.ts

@@ -0,0 +1,66 @@
+/**
+ * @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, TemplateRef, ViewChild} from '@angular/core';
+import {
+  MatBottomSheet,
+  MatBottomSheetRef,
+  MatBottomSheetConfig,
+} from '@angular/material/bottom-sheet';
+
+const defaultConfig = new MatBottomSheetConfig();
+
+@Component({
+  moduleId: module.id,
+  selector: 'bottom-sheet-demo',
+  styleUrls: ['bottom-sheet-demo.css'],
+  templateUrl: 'bottom-sheet-demo.html',
+  encapsulation: ViewEncapsulation.None,
+  preserveWhitespaces: false,
+})
+export class BottomSheetDemo {
+  config: MatBottomSheetConfig = {
+    hasBackdrop: defaultConfig.hasBackdrop,
+    disableClose: defaultConfig.disableClose,
+    backdropClass: defaultConfig.backdropClass,
+    direction: 'ltr'
+  };
+
+  @ViewChild(TemplateRef) template: TemplateRef<any>;
+
+  constructor(private _bottomSheet: MatBottomSheet) {}
+
+  openComponent() {
+    this._bottomSheet.open(ExampleBottomSheet, this.config);
+  }
+
+  openTemplate() {
+    this._bottomSheet.open(this.template, this.config);
+  }
+}
+
+
+@Component({
+  template: `
+    <mat-nav-list>
+      <a href="#" mat-list-item (click)="handleClick($event)" *ngFor="let action of [1, 2, 3]">
+        <mat-icon mat-list-icon>folder</mat-icon>
+        <span mat-line>Action {{ link }}</span>
+        <span mat-line>Description</span>
+      </a>
+    </mat-nav-list>
+  `
+})
+export class ExampleBottomSheet {
+  constructor(private sheet: MatBottomSheetRef) {}
+
+  handleClick(event: MouseEvent) {
+    event.preventDefault();
+    this.sheet.dismiss();
+  }
+}

src/demo-app/demo-app/demo-app.ts

@@ -51,6 +51,7 @@ export class DemoApp {
   dark = false;
   navItems = [
     {name: 'Autocomplete', route: '/autocomplete'},
+    {name: 'Bottom sheet', route: '/bottom-sheet'},
     {name: 'Button Toggle', route: '/button-toggle'},
     {name: 'Button', route: '/button'},
     {name: 'Card', route: '/card'},

src/demo-app/demo-app/demo-module.ts

@@ -12,6 +12,7 @@ import {NgModule} from '@angular/core';
 import {FormsModule, ReactiveFormsModule} from '@angular/forms';
 import {RouterModule} from '@angular/router';
 import {AutocompleteDemo} from '../autocomplete/autocomplete-demo';
+import {BottomSheetDemo, ExampleBottomSheet} from '../bottom-sheet/bottom-sheet-demo';
 import {BaselineDemo} from '../baseline/baseline-demo';
 import {ButtonToggleDemo} from '../button-toggle/button-toggle-demo';
 import {ButtonDemo} from '../button/button-demo';
@@ -71,6 +72,7 @@ import {TableDemoModule} from '../table/table-demo-module';
   ],
   declarations: [
     AutocompleteDemo,
+    BottomSheetDemo,
     BaselineDemo,
     ButtonDemo,
     ButtonToggleDemo,
@@ -120,6 +122,7 @@ import {TableDemoModule} from '../table/table-demo-module';
     ToolbarDemo,
     TooltipDemo,
     TypographyDemo,
+    ExampleBottomSheet,
   ],
   providers: [
     {provide: OverlayContainer, useClass: FullscreenOverlayContainer},
@@ -133,6 +136,7 @@ import {TableDemoModule} from '../table/table-demo-module';
     RotiniPanel,
     ScienceJoke,
     SpagettiPanel,
+    ExampleBottomSheet,
   ],
 })
 export class DemoModule {}

src/demo-app/demo-app/routes.ts

@@ -10,6 +10,7 @@ import {Routes} from '@angular/router';
 import {AccessibilityDemo} from '../a11y/a11y';
 import {ACCESSIBILITY_DEMO_ROUTES} from '../a11y/routes';
 import {AutocompleteDemo} from '../autocomplete/autocomplete-demo';
+import {BottomSheetDemo} from '../bottom-sheet/bottom-sheet-demo';
 import {BaselineDemo} from '../baseline/baseline-demo';
 import {ButtonToggleDemo} from '../button-toggle/button-toggle-demo';
 import {ButtonDemo} from '../button/button-demo';
@@ -55,6 +56,7 @@ export const DEMO_APP_ROUTES: Routes = [
   {path: '', component: DemoApp, children: [
     {path: '', component: Home},
     {path: 'autocomplete', component: AutocompleteDemo},
+    {path: 'bottom-sheet', component: BottomSheetDemo},
     {path: 'baseline', component: BaselineDemo},
     {path: 'button', component: ButtonDemo},
     {path: 'button-toggle', component: ButtonToggleDemo},

src/demo-app/demo-material-module.ts

@@ -9,6 +9,7 @@
 import {NgModule} from '@angular/core';
 import {
   MatAutocompleteModule,
+  MatBottomSheetModule,
   MatButtonModule,
   MatButtonToggleModule,
   MatCardModule,
@@ -56,6 +57,7 @@ import {PortalModule} from '@angular/cdk/portal';
 @NgModule({
   exports: [
     MatAutocompleteModule,
+    MatBottomSheetModule,
     MatButtonModule,
     MatButtonToggleModule,
     MatCardModule,

src/demo-app/system-config.ts

@@ -59,6 +59,7 @@ System.config({
     '@angular/cdk/table': 'dist/packages/cdk/table/index.js',
 
     '@angular/material/autocomplete': 'dist/packages/material/autocomplete/index.js',
+    '@angular/material/bottom-sheet': 'dist/packages/material/bottom-sheet/index.js',
     '@angular/material/button': 'dist/packages/material/button/index.js',
     '@angular/material/button-toggle': 'dist/packages/material/button-toggle/index.js',
     '@angular/material/card': 'dist/packages/material/card/index.js',

src/e2e-app/system-config.ts

@@ -51,6 +51,7 @@ System.config({
     '@angular/material-examples': 'dist/bundles/material-examples.umd.js',
 
     '@angular/material/autocomplete': 'dist/bundles/material-autocomplete.umd.js',
+    '@angular/material/bottom-sheet': 'dist/bundles/material-bottom-sheet.umd.js',
     '@angular/material/button': 'dist/bundles/material-button.umd.js',
     '@angular/material/button-toggle': 'dist/bundles/material-button-toggle.umd.js',
     '@angular/material/card': 'dist/bundles/material-card.umd.js',