feat(progress-container): add progress-container component

* Add two new components: `mat-progress-container` and `mat-progress-content`
  for use with new directive `matProgress`
* When triggered, the `matProgress` directive will emit an event that notifies
  the components which will, if triggered to show the progress container, add
  that template to the view and hide the progress content, and otherwise remove
  the template from the view and show the progress content

Author: Adam Plumer

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

@@ -76,6 +76,7 @@ export class DemoApp {
     {name: 'Platform', route: '/platform'},
     {name: 'Portal', route: '/portal'},
     {name: 'Progress Bar', route: '/progress-bar'},
+    {name: 'Progress Container', route: '/progress-container'},
     {name: 'Progress Spinner', route: '/progress-spinner'},
     {name: 'Radio', route: '/radio'},
     {name: 'Ripple', route: '/ripple'},

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

@@ -64,6 +64,7 @@ import {VirtualScrollDemo} from '../virtual-scroll/virtual-scroll-demo';
 import {DemoApp, Home} from './demo-app';
 import {DEMO_APP_ROUTES} from './routes';
 import {DragAndDropDemo} from '../drag-drop/drag-drop-demo';
+import {ProgressContainerDemo} from '../progress-container/progress-container-demo';
 
 @NgModule({
   imports: [
@@ -116,6 +117,7 @@ import {DragAndDropDemo} from '../drag-drop/drag-drop-demo';
     PlatformDemo,
     PortalDemo,
     ProgressBarDemo,
+    ProgressContainerDemo,
     ProgressSpinnerDemo,
     RadioDemo,
     RippleDemo,

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

@@ -56,6 +56,7 @@ import {PaginatorDemo} from '../paginator/paginator-demo';
 import {ExamplesPage} from '../examples-page/examples-page';
 import {TableDemo} from '../table/table-demo';
 import {DragAndDropDemo} from '../drag-drop/drag-drop-demo';
+import {ProgressContainerDemo} from '../progress-container/progress-container-demo';
 
 export const DEMO_APP_ROUTES: Routes = [
   {path: '', component: DemoApp, children: [
@@ -86,6 +87,7 @@ export const DEMO_APP_ROUTES: Routes = [
     {path: 'platform', component: PlatformDemo},
     {path: 'portal', component: PortalDemo},
     {path: 'progress-bar', component: ProgressBarDemo},
+    {path: 'progress-container', component: ProgressContainerDemo},
     {path: 'progress-spinner', component: ProgressSpinnerDemo},
     {path: 'radio', component: RadioDemo},
     {path: 'ripple', component: RippleDemo},

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

@@ -43,6 +43,7 @@ import {
   MatNativeDateModule,
   MatPaginatorModule,
   MatProgressBarModule,
+  MatProgressContainerModule,
   MatProgressSpinnerModule,
   MatRadioModule,
   MatRippleModule,
@@ -87,6 +88,7 @@ import {
     MatMenuModule,
     MatPaginatorModule,
     MatProgressBarModule,
+    MatProgressContainerModule,
     MatProgressSpinnerModule,
     MatRadioModule,
     MatRippleModule,

src/demo-app/progress-container/progress-container-demo.html

@@ -0,0 +1,8 @@
+<button mat-raised-button [matProgress]="trigger" (click)="trigger = !trigger">
+  <mat-progress-container>
+    <mat-spinner></mat-spinner>
+  </mat-progress-container>
+  <mat-progress-content>
+    TOGGLE
+  </mat-progress-content>
+</button>

src/demo-app/progress-container/progress-container-demo.scss

@@ -0,0 +1,19 @@
+/**
+ * @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({
+  moduleId: module.id,
+  selector: 'progress-container-demo',
+  templateUrl: 'progress-container-demo.html',
+  styleUrls: ['progress-container-demo.css'],
+})
+export class ProgressContainerDemo {
+  trigger: boolean = false;
+}

src/demo-app/progress-container/progress-container-demo.ts

@@ -85,6 +85,7 @@ System.config({
     '@angular/material/menu': 'dist/packages/material/menu/index.js',
     '@angular/material/paginator': 'dist/packages/material/paginator/index.js',
     '@angular/material/progress-bar': 'dist/packages/material/progress-bar/index.js',
+    '@angular/material/progress-container': 'dist/packages/material/progress-container/index.js',
     '@angular/material/progress-spinner': 'dist/packages/material/progress-spinner/index.js',
     '@angular/material/radio': 'dist/packages/material/radio/index.js',
     '@angular/material/select': 'dist/packages/material/select/index.js',

src/demo-app/system-config.ts

@@ -17,6 +17,7 @@ import {
   MatMenuModule,
   MatNativeDateModule,
   MatProgressBarModule,
+  MatProgressContainerModule,
   MatProgressSpinnerModule,
   MatRadioModule,
   MatSidenavModule,
@@ -45,6 +46,7 @@ import {SidenavE2E} from './sidenav/sidenav-e2e';
 import {SlideToggleE2E} from './slide-toggle/slide-toggle-e2e';
 import {BasicTabs} from './tabs/tabs-e2e';
 import {VirtualScrollE2E} from './virtual-scroll/virtual-scroll-e2e';
+import {ProgressContainerE2E} from './progress-container/progress-container-e2e';
 
 /**
  * NgModule that contains all Material modules that are required to serve the e2e-app.
@@ -62,6 +64,7 @@ import {VirtualScrollE2E} from './virtual-scroll/virtual-scroll-e2e';
     MatListModule,
     MatMenuModule,
     MatProgressBarModule,
+    MatProgressContainerModule,
     MatProgressSpinnerModule,
     MatRadioModule,
     MatSidenavModule,
@@ -97,6 +100,7 @@ export class E2eMaterialModule {}
     InputE2E,
     MenuE2E,
     ProgressBarE2E,
+    ProgressContainerE2E,
     ProgressSpinnerE2E,
     SidenavE2E,
     SimpleCheckboxes,

src/e2e-app/e2e-app-module.ts

@@ -10,6 +10,7 @@ import {SimpleCheckboxes} from '../checkbox/checkbox-e2e';
 import {DialogE2E} from '../dialog/dialog-e2e';
 import {GridListE2E} from '../grid-list/grid-list-e2e';
 import {ProgressBarE2E} from '../progress-bar/progress-bar-e2e';
+import {ProgressContainerE2E} from '../progress-container/progress-container-e2e';
 import {ProgressSpinnerE2E} from '../progress-spinner/progress-spinner-e2e';
 import {SlideToggleE2E} from '../slide-toggle/slide-toggle-e2e';
 import {InputE2E} from '../input/input-e2e';
@@ -38,6 +39,7 @@ export const E2E_APP_ROUTES: Routes = [
   {path: 'list', component: ListOverviewExample},
   {path: 'menu', component: MenuE2E},
   {path: 'progress-bar', component: ProgressBarE2E},
+  {path: 'progress-container', component: ProgressContainerE2E},
   {path: 'progress-spinner', component: ProgressSpinnerE2E},
   {path: 'radio', component: SimpleRadioButtons},
   {path: 'sidenav', component: SidenavE2E},

src/e2e-app/e2e-app/routes.ts

@@ -0,0 +1,8 @@
+<button mat-raised-button [matProgress]="trigger" (click)="trigger = !trigger">
+  <mat-progress-container>
+    <mat-spinner></mat-spinner>
+  </mat-progress-container>
+  <mat-progress-content>
+    TOGGLE
+  </mat-progress-content>
+</button>

src/e2e-app/progress-container/progress-container-e2e.html

@@ -0,0 +1,10 @@
+import {Component} from '@angular/core';
+
+@Component({
+  moduleId: module.id,
+  selector: 'progress-container-e2e',
+  templateUrl: 'progress-container-e2e.html',
+})
+export class ProgressContainerE2E {
+  trigger = true;
+}

src/e2e-app/progress-container/progress-container-e2e.ts

@@ -0,0 +1,36 @@
+package(default_visibility=["//visibility:public"])
+
+load("@io_bazel_rules_sass//sass:sass.bzl", "sass_library", "sass_binary")
+load("//tools:defaults.bzl", "ng_module")
+
+ng_module(
+  name = "progress-bar",
+  srcs = glob(["**/*.ts"], exclude=["**/*.spec.ts"]),
+  module_name = "@angular/material/progress-container",
+  assets = [":progress-container.css"] + glob(["**/*.html"]),
+  deps = [
+    "@angular//packages/common",
+    "@angular//packages/core",
+    "@rxjs",
+    "//src/lib/core",
+    "//src/cdk/coercion"
+  ],
+)
+
+
+# TODO(jelbourn): replace this w/ sass_library when it supports acting like a filegroup
+filegroup(
+  name = "progress_container_scss_partials",
+  srcs = glob(["**/_*.scss"]),
+)
+
+sass_binary(
+  name = "progress_container_scss",
+  src = "progress-container.scss",
+  deps = ["//src/lib/core:core_scss_lib"],
+)
+
+sass_library(
+  name = "theme",
+  srcs = glob(["**/*-theme.scss"]),
+)

src/lib/progress-container/BUILD.bazel

@@ -0,0 +1 @@
+Please see the official documentation at https://material.angular.io/components/component/progress-container

src/lib/progress-container/README.md

@@ -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/lib/progress-container/index.ts

@@ -0,0 +1,22 @@
+/**
+ * @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 {CommonModule} from '@angular/common';
+import {MatCommonModule} from '@angular/material/core';
+import {MatProgressContainer} from './progress-container';
+import {MatProgress} from './progress-directive';
+import {MatProgressContent} from './progress-content';
+
+
+@NgModule({
+  imports: [CommonModule, MatCommonModule],
+  exports: [MatProgressContainer, MatProgress, MatProgressContent, MatCommonModule],
+  declarations: [MatProgressContainer, MatProgress, MatProgressContent],
+})
+export class MatProgressContainerModule {}

src/lib/progress-container/progress-container-module.ts

@@ -0,0 +1,5 @@
+<ng-template>
+  <div class="mat-progress-container">
+    <ng-content></ng-content>
+  </div>
+</ng-template>

src/lib/progress-container/progress-container.html

@@ -0,0 +1,46 @@
+`<mat-progress-bar>` is a horizontal progress-bar for indicating progress and activity.
+
+### Progress mode
+The progress-bar supports four modes: determinate, indeterminate, buffer and query.
+
+#### Determinate
+Operations where the percentage of the operation complete is known should use the 
+determinate indicator.
+
+<!-- example(progress-bar-determinate) -->
+
+This is the default mode and the progress is represented by the `value` property.
+
+#### Indeterminate
+Operations where the user is asked to wait while something finishes and it’s 
+not necessary to indicate how long it will take should use the indeterminate indicator.
+
+<!-- example(progress-bar-indeterminate) -->
+
+In this mode the `value` property is ignored.
+
+#### Buffer
+Operations where the user wants to indicate some activity or loading from the server, 
+use the buffer indicator.
+
+<!-- example(progress-bar-buffer) -->
+
+In "buffer" mode, `value` determines the progress of the primary bar while the `bufferValue` is 
+used to show the additional buffering progress.
+
+#### Query
+For situations where the user wants to indicate pre-loading (until the loading can actually be made), 
+use the query indicator.
+
+<!-- example(progress-bar-query) -->
+
+In "query" mode, the progress-bar renders as an inverted "indeterminate" bar. Once the response 
+progress is available, the `mode` should be changed to determinate to convey the progress. In
+this mode the `value` property is ignored.
+
+### Theming
+The color of a progress-bar can be changed by using the `color` property. By default, progress-bars
+use the theme's primary color. This can be changed to `'accent'` or `'warn'`.  
+
+### Accessibility
+Each progress bar should be given a meaningful label via `aria-label` or `aria-labelledby`.

src/lib/progress-container/progress-container.md

@@ -0,0 +1,15 @@
+.mat-progress {
+  opacity: 0;
+  visibility: hidden;
+}
+
+.mat-progress-container {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+}
+
+.mat-progress-host {
+  position: relative;
+}

src/lib/progress-container/progress-container.scss

@@ -0,0 +1,62 @@
+/**
+ * @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 {
+  ChangeDetectionStrategy,
+  Component,
+  Host,
+  OnDestroy,
+  OnInit,
+  TemplateRef,
+  ViewChild,
+  ViewContainerRef,
+  ViewEncapsulation,
+  ViewRef,
+} from '@angular/core';
+import {MatProgress} from './progress-directive';
+import {Subscription} from 'rxjs';
+
+@Component({
+  moduleId: module.id,
+  selector: 'mat-progress-container',
+  templateUrl: 'progress-container.html',
+  styleUrls: ['progress-container.css'],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  encapsulation: ViewEncapsulation.None,
+})
+export class MatProgressContainer implements OnInit, OnDestroy {
+  @ViewChild(TemplateRef)
+  private _templateRef: TemplateRef<any>;
+  private _openSubscription: Subscription;
+  private _containerViewRef: ViewRef | null = null;
+
+  constructor(@Host() private _progressDirective: MatProgress,
+              private _viewContainerRef: ViewContainerRef) {
+    if (!_progressDirective) {
+      throw new Error(`Cannot instantiate MatProgressContainer without an ancestor
+       MatProgress directive`);
+    }
+    this._toggleProgress = this._toggleProgress.bind(this);
+  }
+
+  ngOnInit() {
+    this._openSubscription = this._progressDirective.show.subscribe(this._toggleProgress);
+  }
+
+  ngOnDestroy() {
+    this._openSubscription.unsubscribe();
+  }
+
+  private _toggleProgress(evt: boolean) {
+    if (evt && !this._containerViewRef) {
+      this._containerViewRef = this._viewContainerRef.createEmbeddedView(this._templateRef);
+    } else if (!evt && this._containerViewRef) {
+      this._viewContainerRef.remove(this._viewContainerRef.indexOf(this._containerViewRef));
+      this._containerViewRef = null;
+    }
+  }
+}

src/lib/progress-container/progress-container.spec.ts

@@ -0,0 +1,29 @@
+/**
+ * @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 {ChangeDetectionStrategy, Component, Host, ViewEncapsulation} from '@angular/core';
+import {MatProgress} from './progress-directive';
+
+@Component({
+  moduleId: module.id,
+  selector: 'mat-progress-content',
+  template: '<ng-content></ng-content>',
+  host: {
+    '[attr.aria-hidden]': '_showProgress',
+    '[class.mat-progress]': '_showProgress',
+  },
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  encapsulation: ViewEncapsulation.None,
+})
+export class MatProgressContent {
+  /** @docs-private */
+  get _showProgress(): boolean {
+    return this._progressDirective.showProgress;
+  }
+
+  constructor(@Host() private _progressDirective: MatProgress) {}
+}