Skip to content

Commit bd902ae

Browse files
crisbetocrisbeto
committed
prototype(progress-bar): create prototype progress bar based on MDC web
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 c2562fb commit bd902ae

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

+1111
-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: 29 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,29 @@
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+
"//src/material/core",
18+
"//src/material/form-field",
19+
"//src/material/input",
20+
"//src/material/select",
21+
"@npm//@angular/forms",
22+
"@npm//@angular/router",
23+
],
24+
)
25+
26+
sass_binary(
27+
name = "mdc_progress_bar_demo_scss",
28+
src = "mdc-progress-bar-demo.scss",
29+
)

‎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',

‎src/e2e-app/BUILD.bazel

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -38,6 +38,7 @@ ng_module(
3838
"//src/material-experimental/mdc-checkbox",
3939
"//src/material-experimental/mdc-chips",
4040
"//src/material-experimental/mdc-menu",
41+
"//src/material-experimental/mdc-progress-bar",
4142
"//src/material-experimental/mdc-radio",
4243
"//src/material-experimental/mdc-slide-toggle",
4344
"//src/material-experimental/mdc-tabs",
@@ -79,6 +80,7 @@ sass_binary(
7980
"//src/material-experimental/mdc-chips:mdc_chips_scss_lib",
8081
"//src/material-experimental/mdc-helpers:mdc_scss_deps_lib",
8182
"//src/material-experimental/mdc-menu:mdc_menu_scss_lib",
83+
"//src/material-experimental/mdc-progress-bar:mdc_progress_bar_scss_lib",
8284
"//src/material-experimental/mdc-radio:mdc_radio_scss_lib",
8385
"//src/material-experimental/mdc-slide-toggle:mdc_slide_toggle_scss_lib",
8486
"//src/material-experimental/mdc-tabs:mdc_tabs_scss_lib",

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

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -31,6 +31,7 @@
3131
<a mat-list-item [routerLink]="['mdc-radio']">MDC Radio</a>
3232
<a mat-list-item [routerLink]="['mdc-slide-toggle']">MDC Slide Toggle</a>
3333
<a mat-list-item [routerLink]="['mdc-tabs']">MDC Tabs</a>
34+
<a mat-list-item [routerLink]="['mdc-progress-bar']">MDC Progress bar</a>
3435
</mat-nav-list>
3536

3637
<main>

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

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -19,6 +19,7 @@ import {MdcMenuE2e} from '../mdc-menu/mdc-menu-e2e';
1919
import {MdcRadioE2e} from '../mdc-radio/mdc-radio-e2e';
2020
import {MdcSlideToggleE2e} from '../mdc-slide-toggle/mdc-slide-toggle-e2e';
2121
import {MdcTabsE2e} from '../mdc-tabs/mdc-tabs-e2e';
22+
import {MdcProgressBarE2E} from '../mdc-progress-bar/mdc-progress-bar-e2e';
2223
import {MenuE2E} from '../menu/menu-e2e';
2324
import {ProgressBarE2E} from '../progress-bar/progress-bar-e2e';
2425
import {ProgressSpinnerE2E} from '../progress-spinner/progress-spinner-e2e';
@@ -53,6 +54,7 @@ export const E2E_APP_ROUTES: Routes = [
5354
{path: 'mdc-radio', component: MdcRadioE2e},
5455
{path: 'mdc-slide-toggle', component: MdcSlideToggleE2e},
5556
{path: 'mdc-tabs', component: MdcTabsE2e},
57+
{path: 'mdc-progress-bar', component: MdcProgressBarE2E},
5658
{path: 'menu', component: MenuE2E},
5759
{path: 'progress-bar', component: ProgressBarE2E},
5860
{path: 'progress-spinner', component: ProgressSpinnerE2E},

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

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -37,6 +37,7 @@ import {StepperE2eModule} from './stepper/stepper-e2e-module';
3737
import {TabsE2eModule} from './tabs/tabs-e2e-module';
3838
import {ToolbarE2eModule} from './toolbar/toolbar-e2e-module';
3939
import {VirtualScrollE2eModule} from './virtual-scroll/virtual-scroll-e2e-module';
40+
import {MdcProgressBarE2eModule} from './mdc-progress-bar/mdc-progress-bar-e2e-module';
4041

4142
@NgModule({
4243
imports: [
@@ -66,6 +67,7 @@ import {VirtualScrollE2eModule} from './virtual-scroll/virtual-scroll-e2e-module
6667
MdcRadioE2eModule,
6768
MdcSlideToggleE2eModule,
6869
MdcTabsE2eModule,
70+
MdcProgressBarE2eModule,
6971
MenuE2eModule,
7072
ProgressBarE2eModule,
7173
ProgressSpinnerE2eModule,

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

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
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 {NgModule} from '@angular/core';
10+
import {MatProgressBarModule} from '@angular/material-experimental/mdc-progress-bar';
11+
import {MdcProgressBarE2E} from './mdc-progress-bar-e2e';
12+
13+
@NgModule({
14+
imports: [MatProgressBarModule],
15+
declarations: [MdcProgressBarE2E],
16+
})
17+
export class MdcProgressBarE2eModule {
18+
}

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

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
<mat-progress-bar mode="determinate" [value]="determinateValue"></mat-progress-bar>
2+
<mat-progress-bar mode="buffer" [value]="bufferValue"></mat-progress-bar>
3+
<mat-progress-bar mode="query"></mat-progress-bar>
4+
<mat-progress-bar mode="indeterminate"></mat-progress-bar>

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

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
import {Component} from '@angular/core';
2+
3+
4+
@Component({
5+
moduleId: module.id,
6+
selector: 'mdc-progress-bar-e2e',
7+
templateUrl: 'mdc-progress-bar-e2e.html',
8+
styles: [`
9+
mat-progress-bar {
10+
margin-bottom: 10px;
11+
}
12+
`]
13+
})
14+
export class MdcProgressBarE2E {
15+
determinateValue: number = 57;
16+
bufferValue: number = 35;
17+
}

‎src/e2e-app/theme.scss

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,7 @@
88
@import '../material-experimental/mdc-radio/mdc-radio';
99
@import '../material-experimental/mdc-slide-toggle/mdc-slide-toggle';
1010
@import '../material-experimental/mdc-tabs/mdc-tabs';
11+
@import '../material-experimental/mdc-progress-bar/mdc-progress-bar';
1112

1213
// Plus imports for other components in your app.
1314

@@ -25,6 +26,7 @@
2526
@include mat-radio-typography-mdc(mat-typography-config());
2627
@include mat-slide-toggle-typography-mdc(mat-typography-config());
2728
@include mat-tabs-typography-mdc(mat-typography-config());
29+
@include mat-progress-bar-typography-mdc(mat-typography-config());
2830

2931
// Define the default theme (same as the example above).
3032
$candy-app-primary: mat-palette($mat-indigo);
@@ -43,3 +45,4 @@ $candy-app-theme: mat-light-theme($candy-app-primary, $candy-app-accent);
4345
@include mat-radio-theme-mdc($candy-app-theme);
4446
@include mat-slide-toggle-theme-mdc($candy-app-theme);
4547
@include mat-tabs-theme-mdc($candy-app-theme);
48+
@include mat-progress-bar-theme-mdc($candy-app-theme);

‎src/material-experimental/config.bzl

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -13,6 +13,7 @@ entryPoints = [
1313
"mdc-helpers",
1414
"mdc-menu",
1515
"mdc-menu/testing",
16+
"mdc-progress-bar",
1617
"mdc-radio",
1718
"mdc-select",
1819
"mdc-sidenav",

0 commit comments

Comments
 (0)