prototype(progress-bar): create prototype progress bar based on MDC web

.github/CODEOWNERS

@@ -161,7 +161,7 @@
 /src/dev-app/mdc-checkbox/**                       @mmalerba
 /src/dev-app/mdc-chips/**                          @mmalerba
 /src/dev-app/mdc-menu/**                           @crisbeto
-# Note to implementer: please repossess
+/src/dev-app/mdc-progress-bar/**                   @crisbeto
 /src/dev-app/mdc-radio/**                          @mmalerba
 /src/dev-app/mdc-slide-toggle/**                   @crisbeto
 /src/dev-app/mdc-slider/**                         @devversion
@@ -214,7 +214,7 @@
 /src/e2e-app/mdc-checkbox/**                       @mmalerba
 /src/e2e-app/mdc-chips/**                          @mmalerba
 /src/e2e-app/mdc-menu/**                           @crisbeto
-# Note to implementer: please repossess
+/src/e2e-app/mdc-progress-bar/**                   @crisbeto
 /src/e2e-app/mdc-radio/**                          @mmalerba
 /src/e2e-app/mdc-slide-toggle/**                   @crisbeto
 /src/e2e-app/mdc-tabs/**                           @crisbeto

src/dev-app/BUILD.bazel

@@ -45,6 +45,7 @@ ng_module(
         "//src/dev-app/mdc-checkbox",
         "//src/dev-app/mdc-chips",
         "//src/dev-app/mdc-menu",
+        "//src/dev-app/mdc-progress-bar",
         "//src/dev-app/mdc-radio",
         "//src/dev-app/mdc-slide-toggle",
         "//src/dev-app/mdc-slider",

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

@@ -76,10 +76,10 @@ export class DevAppLayout {
     {name: 'MDC Chips', route: '/mdc-chips'},
     {name: 'MDC Menu', route: '/mdc-menu'},
     {name: 'MDC Radio', route: '/mdc-radio'},
+    {name: 'MDC Progress Bar', route: '/mdc-progress-bar'},
     {name: 'MDC Tabs', route: '/mdc-tabs'},
     {name: 'MDC Slide Toggle', route: '/mdc-slide-toggle'},
     {name: 'MDC Slider', route: '/mdc-slider'},
-
   ];
 
   constructor(

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

@@ -55,6 +55,10 @@ export const DEV_APP_ROUTES: Routes = [
     path: 'mdc-checkbox',
     loadChildren: 'mdc-checkbox/mdc-checkbox-demo-module#MdcCheckboxDemoModule'
   },
+  {
+    path: 'mdc-progress-bar',
+    loadChildren: 'mdc-progress-bar/mdc-progress-bar-demo-module#MdcProgressBarDemoModule'
+  },
   {path: 'mdc-chips', loadChildren: 'mdc-chips/mdc-chips-demo-module#MdcChipsDemoModule'},
   {path: 'mdc-menu', loadChildren: 'mdc-menu/mdc-menu-demo-module#MdcMenuDemoModule'},
   {path: 'mdc-radio', loadChildren: 'mdc-radio/mdc-radio-demo-module#MdcRadioDemoModule'},

src/dev-app/mdc-progress-bar/BUILD.bazel

@@ -0,0 +1,25 @@
+package(default_visibility = ["//visibility:public"])
+
+load("@io_bazel_rules_sass//:defs.bzl", "sass_binary")
+load("//tools:defaults.bzl", "ng_module")
+
+ng_module(
+    name = "mdc-progress-bar",
+    srcs = glob(["**/*.ts"]),
+    assets = [
+        "mdc-progress-bar-demo.html",
+        ":mdc_progress_bar_demo_scss",
+    ],
+    deps = [
+        "//src/material-experimental/mdc-button",
+        "//src/material-experimental/mdc-progress-bar",
+        "//src/material/button-toggle",
+        "@npm//@angular/forms",
+        "@npm//@angular/router",
+    ],
+)
+
+sass_binary(
+    name = "mdc_progress_bar_demo_scss",
+    src = "mdc-progress-bar-demo.scss",
+)

src/dev-app/mdc-progress-bar/mdc-progress-bar-demo-module.ts

@@ -0,0 +1,30 @@
+/**
+ * @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 {CommonModule} from '@angular/common';
+import {NgModule} from '@angular/core';
+import {RouterModule} from '@angular/router';
+import {FormsModule} from '@angular/forms';
+import {MatProgressBarModule} from '@angular/material-experimental/mdc-progress-bar';
+import {MatButtonModule} from '@angular/material-experimental/mdc-button';
+import {MatButtonToggleModule} from '@angular/material/button-toggle';
+import {MdcProgressBarDemo} from './mdc-progress-bar-demo';
+
+@NgModule({
+  imports: [
+    CommonModule,
+    FormsModule,
+    MatProgressBarModule,
+    MatButtonModule,
+    MatButtonToggleModule,
+    RouterModule.forChild([{path: '', component: MdcProgressBarDemo}]),
+  ],
+  declarations: [MdcProgressBarDemo],
+})
+export class MdcProgressBarDemoModule {
+}

src/dev-app/mdc-progress-bar/mdc-progress-bar-demo.html

@@ -0,0 +1,51 @@
+<mat-button-toggle-group class="demo-progress-bar-controls" [(ngModel)]="color">
+  <mat-button-toggle value="primary">Primary Color</mat-button-toggle>
+  <mat-button-toggle value="accent">Accent Color</mat-button-toggle>
+  <mat-button-toggle value="warn">Warn Color</mat-button-toggle>
+</mat-button-toggle-group>
+
+<h1>Determinate</h1>
+
+<div class="demo-progress-bar-controls">
+  <span>Value: {{determinateProgressValue}}</span>
+  <br/>
+  <span>Last animation complete value: {{determinateAnimationEndValue}}</span>
+  <button mat-raised-button (click)="stepDeterminateProgressVal(10)">Increase</button>
+  <button mat-raised-button (click)="stepDeterminateProgressVal(-10)">Decrease</button>
+</div>
+
+<div class="demo-progress-bar-container">
+  <mat-progress-bar mode="determinate" [value]="determinateProgressValue" [color]="color"
+                    (animationEnd)="determinateAnimationEndValue = $event.value">
+  </mat-progress-bar>
+</div>
+
+<h1>Buffer</h1>
+
+<div class="demo-progress-bar-controls">
+  <span>Value: {{bufferProgressValue}}</span>
+  <br/>
+  <span>Last animation complete value: {{bufferAnimationEndValue}}</span>
+  <button mat-raised-button (click)="stepBufferProgressVal(10)">Increase</button>
+  <button mat-raised-button (click)="stepBufferProgressVal(-10)">Decrease</button>
+  <span class="demo-progress-bar-spacer"></span>
+  <span>Buffer Value: {{bufferBufferValue}}</span>
+  <button mat-raised-button (click)="stepBufferBufferVal(10)">Increase</button>
+  <button mat-raised-button (click)="stepBufferBufferVal(-10)">Decrease</button>
+</div>
+
+<div class="demo-progress-bar-container">
+  <mat-progress-bar [value]="bufferProgressValue" [bufferValue]="bufferBufferValue" mode="buffer"
+                   [color]="color" (animationEnd)="bufferAnimationEndValue = $event.value">
+  </mat-progress-bar>
+</div>
+
+<h1>Indeterminate</h1>
+<div class="demo-progress-bar-container">
+  <mat-progress-bar mode="indeterminate" [color]="color"></mat-progress-bar>
+</div>
+
+<h1>Query</h1>
+<div class="demo-progress-bar-container">
+  <mat-progress-bar mode="query" [color]="color"></mat-progress-bar>
+</div>

src/dev-app/mdc-progress-bar/mdc-progress-bar-demo.scss

@@ -0,0 +1,16 @@
+.demo-progress-bar-container {
+  width: 100%;
+
+  mat-progress-bar {
+    margin: 20px 0;
+  }
+}
+
+.demo-progress-bar-spacer {
+  display: inline-block;
+  width: 50px;
+}
+
+.demo-progress-bar-controls {
+  margin: 10px 0;
+}

src/dev-app/mdc-progress-bar/mdc-progress-bar-demo.ts

@@ -0,0 +1,40 @@
+/**
+ * @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: 'mdc-progress-bar-demo',
+  templateUrl: 'mdc-progress-bar-demo.html',
+  styleUrls: ['mdc-progress-bar-demo.css'],
+})
+export class MdcProgressBarDemo {
+  color: string = 'primary';
+  determinateProgressValue: number = 30;
+  determinateAnimationEndValue: number;
+  bufferAnimationEndValue: number;
+  bufferProgressValue: number = 30;
+  bufferBufferValue: number = 40;
+
+  stepDeterminateProgressVal(val: number) {
+    this.determinateProgressValue = this._clampValue(val + this.determinateProgressValue);
+  }
+
+  stepBufferProgressVal(val: number) {
+    this.bufferProgressValue = this._clampValue(val + this.bufferProgressValue);
+  }
+
+  stepBufferBufferVal(val: number) {
+    this.bufferBufferValue = this._clampValue(val + this.bufferBufferValue);
+  }
+
+  private _clampValue(value: number) {
+    return Math.max(0, Math.min(100, value));
+  }
+}

src/dev-app/system-config.js

@@ -64,6 +64,7 @@ var MATERIAL_EXPERIMENTAL_PACKAGES = [
   'mdc-helpers',
   'mdc-menu',
   'mdc-radio',
+  'mdc-progress-bar',
   'mdc-slide-toggle',
   'mdc-slider',
   'popover-edit',

src/e2e-app/BUILD.bazel

@@ -38,6 +38,7 @@ ng_module(
         "//src/material-experimental/mdc-checkbox",
         "//src/material-experimental/mdc-chips",
         "//src/material-experimental/mdc-menu",
+        "//src/material-experimental/mdc-progress-bar",
         "//src/material-experimental/mdc-radio",
         "//src/material-experimental/mdc-slide-toggle",
         "//src/material-experimental/mdc-tabs",
@@ -79,6 +80,7 @@ sass_binary(
         "//src/material-experimental/mdc-chips:mdc_chips_scss_lib",
         "//src/material-experimental/mdc-helpers:mdc_scss_deps_lib",
         "//src/material-experimental/mdc-menu:mdc_menu_scss_lib",
+        "//src/material-experimental/mdc-progress-bar:mdc_progress_bar_scss_lib",
         "//src/material-experimental/mdc-radio:mdc_radio_scss_lib",
         "//src/material-experimental/mdc-slide-toggle:mdc_slide_toggle_scss_lib",
         "//src/material-experimental/mdc-tabs:mdc_tabs_scss_lib",

src/e2e-app/e2e-app/e2e-app-layout.html

@@ -31,6 +31,7 @@
   <a mat-list-item [routerLink]="['mdc-radio']">MDC Radio</a>
   <a mat-list-item [routerLink]="['mdc-slide-toggle']">MDC Slide Toggle</a>
   <a mat-list-item [routerLink]="['mdc-tabs']">MDC Tabs</a>
+  <a mat-list-item [routerLink]="['mdc-progress-bar']">MDC Progress bar</a>
 </mat-nav-list>
 
 <main>

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

@@ -19,6 +19,7 @@ import {MdcMenuE2e} from '../mdc-menu/mdc-menu-e2e';
 import {MdcRadioE2e} from '../mdc-radio/mdc-radio-e2e';
 import {MdcSlideToggleE2e} from '../mdc-slide-toggle/mdc-slide-toggle-e2e';
 import {MdcTabsE2e} from '../mdc-tabs/mdc-tabs-e2e';
+import {MdcProgressBarE2E} from '../mdc-progress-bar/mdc-progress-bar-e2e';
 import {MenuE2E} from '../menu/menu-e2e';
 import {ProgressBarE2E} from '../progress-bar/progress-bar-e2e';
 import {ProgressSpinnerE2E} from '../progress-spinner/progress-spinner-e2e';
@@ -53,6 +54,7 @@ export const E2E_APP_ROUTES: Routes = [
   {path: 'mdc-radio', component: MdcRadioE2e},
   {path: 'mdc-slide-toggle', component: MdcSlideToggleE2e},
   {path: 'mdc-tabs', component: MdcTabsE2e},
+  {path: 'mdc-progress-bar', component: MdcProgressBarE2E},
   {path: 'menu', component: MenuE2E},
   {path: 'progress-bar', component: ProgressBarE2E},
   {path: 'progress-spinner', component: ProgressSpinnerE2E},

src/e2e-app/main-module.ts

@@ -37,6 +37,7 @@ import {StepperE2eModule} from './stepper/stepper-e2e-module';
 import {TabsE2eModule} from './tabs/tabs-e2e-module';
 import {ToolbarE2eModule} from './toolbar/toolbar-e2e-module';
 import {VirtualScrollE2eModule} from './virtual-scroll/virtual-scroll-e2e-module';
+import {MdcProgressBarE2eModule} from './mdc-progress-bar/mdc-progress-bar-e2e-module';
 
 @NgModule({
   imports: [
@@ -66,6 +67,7 @@ import {VirtualScrollE2eModule} from './virtual-scroll/virtual-scroll-e2e-module
     MdcRadioE2eModule,
     MdcSlideToggleE2eModule,
     MdcTabsE2eModule,
+    MdcProgressBarE2eModule,
     MenuE2eModule,
     ProgressBarE2eModule,
     ProgressSpinnerE2eModule,

src/e2e-app/mdc-progress-bar/mdc-progress-bar-e2e-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 {MatProgressBarModule} from '@angular/material-experimental/mdc-progress-bar';
+import {MdcProgressBarE2E} from './mdc-progress-bar-e2e';
+
+@NgModule({
+  imports: [MatProgressBarModule],
+  declarations: [MdcProgressBarE2E],
+})
+export class MdcProgressBarE2eModule {
+}

src/e2e-app/mdc-progress-bar/mdc-progress-bar-e2e.html

@@ -0,0 +1,4 @@
+<mat-progress-bar mode="determinate" [value]="determinateValue"></mat-progress-bar>
+<mat-progress-bar mode="buffer" [value]="bufferValue"></mat-progress-bar>
+<mat-progress-bar mode="query"></mat-progress-bar>
+<mat-progress-bar mode="indeterminate"></mat-progress-bar>

src/e2e-app/mdc-progress-bar/mdc-progress-bar-e2e.ts

@@ -0,0 +1,17 @@
+import {Component} from '@angular/core';
+
+
+@Component({
+  moduleId: module.id,
+  selector: 'mdc-progress-bar-e2e',
+  templateUrl: 'mdc-progress-bar-e2e.html',
+  styles: [`
+    mat-progress-bar {
+      margin-bottom: 10px;
+    }
+  `]
+})
+export class MdcProgressBarE2E {
+  determinateValue: number = 57;
+  bufferValue: number = 35;
+}

src/e2e-app/theme.scss

@@ -8,6 +8,7 @@
 @import '../material-experimental/mdc-radio/mdc-radio';
 @import '../material-experimental/mdc-slide-toggle/mdc-slide-toggle';
 @import '../material-experimental/mdc-tabs/mdc-tabs';
+@import '../material-experimental/mdc-progress-bar/mdc-progress-bar';
 
 // Plus imports for other components in your app.
 
@@ -25,6 +26,7 @@
 @include mat-radio-typography-mdc(mat-typography-config());
 @include mat-slide-toggle-typography-mdc(mat-typography-config());
 @include mat-tabs-typography-mdc(mat-typography-config());
+@include mat-progress-bar-typography-mdc(mat-typography-config());
 
 // Define the default theme (same as the example above).
 $candy-app-primary: mat-palette($mat-indigo);
@@ -43,3 +45,4 @@ $candy-app-theme: mat-light-theme($candy-app-primary, $candy-app-accent);
 @include mat-radio-theme-mdc($candy-app-theme);
 @include mat-slide-toggle-theme-mdc($candy-app-theme);
 @include mat-tabs-theme-mdc($candy-app-theme);
+@include mat-progress-bar-theme-mdc($candy-app-theme);

src/material-experimental/config.bzl

@@ -13,6 +13,7 @@ entryPoints = [
     "mdc-helpers",
     "mdc-menu",
     "mdc-menu/testing",
+    "mdc-progress-bar",
     "mdc-radio",
     "mdc-select",
     "mdc-sidenav",