Skip to content

Commit fc6cb10

Browse files
crisbetommalerba
crisbeto
authored and
mmalerba
committed
prototype(progress-bar): create prototype progress bar based o… (#17224)
Implements the Angular Material progress bar on top of MDC web. The public API and behavior should be identical, aside from slight differences in the animation timings and easing curves.
1 parent 5509c23 commit fc6cb10

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

44 files changed

+1106
-4
lines changed

‎.github/CODEOWNERS

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -161,7 +161,7 @@
161161
/src/dev-app/mdc-checkbox/** @mmalerba
162162
/src/dev-app/mdc-chips/** @mmalerba
163163
/src/dev-app/mdc-menu/** @crisbeto
164-
# Note to implementer: please repossess
164+
/src/dev-app/mdc-progress-bar/** @crisbeto
165165
/src/dev-app/mdc-radio/** @mmalerba
166166
/src/dev-app/mdc-slide-toggle/** @crisbeto
167167
/src/dev-app/mdc-slider/** @devversion
@@ -214,7 +214,7 @@
214214
/src/e2e-app/mdc-checkbox/** @mmalerba
215215
/src/e2e-app/mdc-chips/** @mmalerba
216216
/src/e2e-app/mdc-menu/** @crisbeto
217-
# Note to implementer: please repossess
217+
/src/e2e-app/mdc-progress-bar/** @crisbeto
218218
/src/e2e-app/mdc-radio/** @mmalerba
219219
/src/e2e-app/mdc-slide-toggle/** @crisbeto
220220
/src/e2e-app/mdc-tabs/** @crisbeto

‎src/dev-app/BUILD.bazel

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -45,6 +45,7 @@ ng_module(
4545
"//src/dev-app/mdc-checkbox",
4646
"//src/dev-app/mdc-chips",
4747
"//src/dev-app/mdc-menu",
48+
"//src/dev-app/mdc-progress-bar",
4849
"//src/dev-app/mdc-radio",
4950
"//src/dev-app/mdc-slide-toggle",
5051
"//src/dev-app/mdc-slider",

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -76,10 +76,10 @@ export class DevAppLayout {
7676
{name: 'MDC Chips', route: '/mdc-chips'},
7777
{name: 'MDC Menu', route: '/mdc-menu'},
7878
{name: 'MDC Radio', route: '/mdc-radio'},
79+
{name: 'MDC Progress Bar', route: '/mdc-progress-bar'},
7980
{name: 'MDC Tabs', route: '/mdc-tabs'},
8081
{name: 'MDC Slide Toggle', route: '/mdc-slide-toggle'},
8182
{name: 'MDC Slider', route: '/mdc-slider'},
82-
8383
];
8484

8585
constructor(

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

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -55,6 +55,10 @@ export const DEV_APP_ROUTES: Routes = [
5555
path: 'mdc-checkbox',
5656
loadChildren: 'mdc-checkbox/mdc-checkbox-demo-module#MdcCheckboxDemoModule'
5757
},
58+
{
59+
path: 'mdc-progress-bar',
60+
loadChildren: 'mdc-progress-bar/mdc-progress-bar-demo-module#MdcProgressBarDemoModule'
61+
},
5862
{path: 'mdc-chips', loadChildren: 'mdc-chips/mdc-chips-demo-module#MdcChipsDemoModule'},
5963
{path: 'mdc-menu', loadChildren: 'mdc-menu/mdc-menu-demo-module#MdcMenuDemoModule'},
6064
{path: 'mdc-radio', loadChildren: 'mdc-radio/mdc-radio-demo-module#MdcRadioDemoModule'},

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

Lines changed: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
package(default_visibility = ["//visibility:public"])
2+
3+
load("@io_bazel_rules_sass//:defs.bzl", "sass_binary")
4+
load("//tools:defaults.bzl", "ng_module")
5+
6+
ng_module(
7+
name = "mdc-progress-bar",
8+
srcs = glob(["**/*.ts"]),
9+
assets = [
10+
"mdc-progress-bar-demo.html",
11+
":mdc_progress_bar_demo_scss",
12+
],
13+
deps = [
14+
"//src/material-experimental/mdc-button",
15+
"//src/material-experimental/mdc-progress-bar",
16+
"//src/material/button-toggle",
17+
"@npm//@angular/forms",
18+
"@npm//@angular/router",
19+
],
20+
)
21+
22+
sass_binary(
23+
name = "mdc_progress_bar_demo_scss",
24+
src = "mdc-progress-bar-demo.scss",
25+
)

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

Lines changed: 30 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,30 @@
1+
/**
2+
* @license
3+
* Copyright Google LLC All Rights Reserved.
4+
*
5+
* Use of this source code is governed by an MIT-style license that can be
6+
* found in the LICENSE file at https://angular.io/license
7+
*/
8+
9+
import {CommonModule} from '@angular/common';
10+
import {NgModule} from '@angular/core';
11+
import {RouterModule} from '@angular/router';
12+
import {FormsModule} from '@angular/forms';
13+
import {MatProgressBarModule} from '@angular/material-experimental/mdc-progress-bar';
14+
import {MatButtonModule} from '@angular/material-experimental/mdc-button';
15+
import {MatButtonToggleModule} from '@angular/material/button-toggle';
16+
import {MdcProgressBarDemo} from './mdc-progress-bar-demo';
17+
18+
@NgModule({
19+
imports: [
20+
CommonModule,
21+
FormsModule,
22+
MatProgressBarModule,
23+
MatButtonModule,
24+
MatButtonToggleModule,
25+
RouterModule.forChild([{path: '', component: MdcProgressBarDemo}]),
26+
],
27+
declarations: [MdcProgressBarDemo],
28+
})
29+
export class MdcProgressBarDemoModule {
30+
}

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

Lines changed: 51 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,51 @@
1+
<mat-button-toggle-group class="demo-progress-bar-controls" [(ngModel)]="color">
2+
<mat-button-toggle value="primary">Primary Color</mat-button-toggle>
3+
<mat-button-toggle value="accent">Accent Color</mat-button-toggle>
4+
<mat-button-toggle value="warn">Warn Color</mat-button-toggle>
5+
</mat-button-toggle-group>
6+
7+
<h1>Determinate</h1>
8+
9+
<div class="demo-progress-bar-controls">
10+
<span>Value: {{determinateProgressValue}}</span>
11+
<br/>
12+
<span>Last animation complete value: {{determinateAnimationEndValue}}</span>
13+
<button mat-raised-button (click)="stepDeterminateProgressVal(10)">Increase</button>
14+
<button mat-raised-button (click)="stepDeterminateProgressVal(-10)">Decrease</button>
15+
</div>
16+
17+
<div class="demo-progress-bar-container">
18+
<mat-progress-bar mode="determinate" [value]="determinateProgressValue" [color]="color"
19+
(animationEnd)="determinateAnimationEndValue = $event.value">
20+
</mat-progress-bar>
21+
</div>
22+
23+
<h1>Buffer</h1>
24+
25+
<div class="demo-progress-bar-controls">
26+
<span>Value: {{bufferProgressValue}}</span>
27+
<br/>
28+
<span>Last animation complete value: {{bufferAnimationEndValue}}</span>
29+
<button mat-raised-button (click)="stepBufferProgressVal(10)">Increase</button>
30+
<button mat-raised-button (click)="stepBufferProgressVal(-10)">Decrease</button>
31+
<span class="demo-progress-bar-spacer"></span>
32+
<span>Buffer Value: {{bufferBufferValue}}</span>
33+
<button mat-raised-button (click)="stepBufferBufferVal(10)">Increase</button>
34+
<button mat-raised-button (click)="stepBufferBufferVal(-10)">Decrease</button>
35+
</div>
36+
37+
<div class="demo-progress-bar-container">
38+
<mat-progress-bar [value]="bufferProgressValue" [bufferValue]="bufferBufferValue" mode="buffer"
39+
[color]="color" (animationEnd)="bufferAnimationEndValue = $event.value">
40+
</mat-progress-bar>
41+
</div>
42+
43+
<h1>Indeterminate</h1>
44+
<div class="demo-progress-bar-container">
45+
<mat-progress-bar mode="indeterminate" [color]="color"></mat-progress-bar>
46+
</div>
47+
48+
<h1>Query</h1>
49+
<div class="demo-progress-bar-container">
50+
<mat-progress-bar mode="query" [color]="color"></mat-progress-bar>
51+
</div>

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

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
.demo-progress-bar-container {
2+
width: 100%;
3+
4+
mat-progress-bar {
5+
margin: 20px 0;
6+
}
7+
}
8+
9+
.demo-progress-bar-spacer {
10+
display: inline-block;
11+
width: 50px;
12+
}
13+
14+
.demo-progress-bar-controls {
15+
margin: 10px 0;
16+
}

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

Lines changed: 40 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,40 @@
1+
/**
2+
* @license
3+
* Copyright Google LLC All Rights Reserved.
4+
*
5+
* Use of this source code is governed by an MIT-style license that can be
6+
* found in the LICENSE file at https://angular.io/license
7+
*/
8+
9+
import {Component} from '@angular/core';
10+
11+
@Component({
12+
moduleId: module.id,
13+
selector: 'mdc-progress-bar-demo',
14+
templateUrl: 'mdc-progress-bar-demo.html',
15+
styleUrls: ['mdc-progress-bar-demo.css'],
16+
})
17+
export class MdcProgressBarDemo {
18+
color: string = 'primary';
19+
determinateProgressValue: number = 30;
20+
determinateAnimationEndValue: number;
21+
bufferAnimationEndValue: number;
22+
bufferProgressValue: number = 30;
23+
bufferBufferValue: number = 40;
24+
25+
stepDeterminateProgressVal(val: number) {
26+
this.determinateProgressValue = this._clampValue(val + this.determinateProgressValue);
27+
}
28+
29+
stepBufferProgressVal(val: number) {
30+
this.bufferProgressValue = this._clampValue(val + this.bufferProgressValue);
31+
}
32+
33+
stepBufferBufferVal(val: number) {
34+
this.bufferBufferValue = this._clampValue(val + this.bufferBufferValue);
35+
}
36+
37+
private _clampValue(value: number) {
38+
return Math.max(0, Math.min(100, value));
39+
}
40+
}

‎src/dev-app/system-config.js

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -64,6 +64,7 @@ var MATERIAL_EXPERIMENTAL_PACKAGES = [
6464
'mdc-helpers',
6565
'mdc-menu',
6666
'mdc-radio',
67+
'mdc-progress-bar',
6768
'mdc-slide-toggle',
6869
'mdc-slider',
6970
'popover-edit',

0 commit comments

Comments
 (0)