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

.github/CODEOWNERS

@@ -21,6 +21,7 @@
 /src/lib/paginator/**                              @andrewseguin
 /src/lib/prebuilt-themes/**                        @jelbourn
 /src/lib/progress-bar/**                           @jelbourn @crisbeto @josephperrott
+/src/lib/progress-container/**                     @jelbourn @crisbeto
 /src/lib/progress-spinner/**                       @jelbourn @crisbeto @josephperrott
 /src/lib/radio/**                                  @jelbourn @devversion
 /src/lib/schematics/**                             @devversion @jelbourn
@@ -129,6 +130,7 @@
 /src/demo-app/platform/**                          @jelbourn @devversion
 /src/demo-app/portal/**                            @jelbourn
 /src/demo-app/progress-bar/**                      @jelbourn @crisbeto @josephperrott
+/src/demo-app/progress-container/**                @jelbourn @crisbeto
 /src/demo-app/progress-spinner/**                  @jelbourn @crisbeto @josephperrott
 /src/demo-app/radio/**                             @jelbourn @devversion
 /src/demo-app/ripple/**                            @devversion
@@ -162,6 +164,7 @@
 /e2e/components/list-e2e.spec.ts                   @jelbourn @crisbeto @devversion
 /e2e/components/menu-e2e.spec.ts                   @crisbeto
 /e2e/components/progress-bar-e2e.spec.ts           @jelbourn @crisbeto @josephperrott
+/e2e/components/progress-container-e2e.spec.ts     @jelbourn @crisbeto
 /e2e/components/progress-spinner-e2e.spec.ts       @jelbourn @crisbeto @josephperrott
 /e2e/components/radio-e2e.spec.ts                  @jelbourn @devversion
 /e2e/components/sidenav-e2e.spec.ts                @mmalerba
@@ -182,6 +185,7 @@
 /src/e2e-app/input/**                              @mmalerba
 /src/e2e-app/menu/**                               @crisbeto
 /src/e2e-app/progress-bar/**                       @jelbourn @crisbeto @josephperrott
+/src/e2e-app/progress-container/**                 @jelbourn @crisbeto
 /src/e2e-app/progress-spinner/**                   @jelbourn @crisbeto @josephperrott
 /src/e2e-app/radio/**                              @jelbourn @devversion
 /src/e2e-app/sidenav/**                            @mmalerba

packages.bzl

@@ -53,6 +53,7 @@ MATERIAL_PACKAGES = [
   "menu",
   "paginator",
   "progress-bar",
+  "progress-container",
   "progress-spinner",
   "radio",
   "select",

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.ts

@@ -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/system-config.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/e2e-app/e2e-app-module.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/routes.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/progress-container/progress-container-e2e.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/e2e-app/progress-container/progress-container-e2e.ts

@@ -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/system-config.ts

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

src/lib/progress-container/BUILD.bazel

@@ -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-container",
+  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/README.md

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

src/lib/progress-container/index.ts

@@ -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/progress-container-module.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.html

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

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

@@ -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.scss

@@ -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;
+}