Skip to content

Commit ca84a45

Browse files
annieywannieyw
committed
copy over existing demo to MDC-based demo (needs fix)
1 parent d5548d3 commit ca84a45

13 files changed

+157
-9
lines changed

‎rollup-globals.bzl

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -41,6 +41,7 @@ ROLLUP_GLOBALS = {
4141
"@material/auto-init": "mdc.autoInit",
4242
"@material/base": "mdc.base",
4343
"@material/checkbox": "mdc.checkbox",
44+
"@material/circular-progress": "mdc.circularProgress",
4445
"@material/chips": "mdc.chips",
4546
"@material/dialog": "mdc.dialog",
4647
"@material/dom": "mdc.dom",

‎src/dev-app/BUILD.bazel

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -129,6 +129,7 @@ filegroup(
129129
"@npm//:node_modules/@material/base/dist/mdc.base.js",
130130
"@npm//:node_modules/@material/checkbox/dist/mdc.checkbox.js",
131131
"@npm//:node_modules/@material/chips/dist/mdc.chips.js",
132+
"@npm//:node_modules/@material/circular-progress/dist/mdc.circularProgress.js",
132133
"@npm//:node_modules/@material/data-table/dist/mdc.dataTable.js",
133134
"@npm//:node_modules/@material/dialog/dist/mdc.dialog.js",
134135
"@npm//:node_modules/@material/dom/dist/mdc.dom.js",

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

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -12,6 +12,10 @@ ng_module(
1212
deps = [
1313
"//src/material-experimental/mdc-progress-spinner",
1414
"@npm//@angular/router",
15+
"//src/material/button",
16+
"//src/material/button-toggle",
17+
"//src/material/checkbox",
18+
"@npm//@angular/forms",
1519
],
1620
)
1721

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

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -10,9 +10,17 @@ import {NgModule} from '@angular/core';
1010
import {MatProgressSpinnerModule} from '@angular/material-experimental/mdc-progress-spinner';
1111
import {RouterModule} from '@angular/router';
1212
import {MdcProgressSpinnerDemo} from './mdc-progress-spinner-demo';
13+
import {MatButtonModule} from '@angular/material/button';
14+
import {MatCheckboxModule} from '@angular/material/checkbox';
15+
import {MatButtonToggleModule} from '@angular/material/button-toggle';
16+
import {FormsModule} from '@angular/forms';
1317

1418
@NgModule({
1519
imports: [
20+
MatButtonModule,
21+
MatCheckboxModule,
22+
MatButtonToggleModule,
23+
FormsModule,
1624
MatProgressSpinnerModule,
1725
RouterModule.forChild([{path: '', component: MdcProgressSpinnerDemo}]),
1826
],

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

Lines changed: 32 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1 +1,32 @@
1-
<mat-progress-spinner></mat-progress-spinner>
1+
<h1>Determinate</h1>
2+
3+
<div class="demo-progress-spinner-controls">
4+
<p>Value: {{progressValue}}</p>
5+
<button mat-raised-button (click)="step(10)">Increase</button>
6+
<button mat-raised-button (click)="step(-10)">Decrease</button>
7+
<mat-checkbox [(ngModel)]="isDeterminate">Is determinate</mat-checkbox>
8+
</div>
9+
10+
<div class="demo-progress-spinner">
11+
<mat-progress-spinner [mode]="isDeterminate ? 'determinate' : 'indeterminate'"
12+
[value]="progressValue" color="warn" [strokeWidth]="1.6" [diameter]="16"></mat-progress-spinner>
13+
<mat-progress-spinner [mode]="isDeterminate ? 'determinate' : 'indeterminate'"
14+
[value]="progressValue" color="accent" [strokeWidth]="1" [diameter]="32"></mat-progress-spinner>
15+
<mat-progress-spinner [mode]="isDeterminate ? 'determinate' : 'indeterminate'"
16+
[value]="progressValue" color="primary" [diameter]="50"></mat-progress-spinner>
17+
</div>
18+
19+
<h1>Indeterminate</h1>
20+
21+
<mat-button-toggle-group class="demo-progress-spinner-controls" [(ngModel)]="color">
22+
<mat-button-toggle value="primary">Primary Color</mat-button-toggle>
23+
<mat-button-toggle value="accent">Accent Color</mat-button-toggle>
24+
<mat-button-toggle value="warn">Warn Color</mat-button-toggle>
25+
</mat-button-toggle-group>
26+
27+
<div class="demo-progress-spinner">
28+
<mat-progress-spinner mode="indeterminate" [color]="color"></mat-progress-spinner>
29+
<mat-progress-spinner mode="indeterminate" [color]="color"></mat-progress-spinner>
30+
<mat-spinner [color]="color"></mat-spinner>
31+
</div>
32+

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

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

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

Lines changed: 11 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -7,10 +7,20 @@
77
*/
88

99
import {Component} from '@angular/core';
10+
import {ThemePalette} from '@angular/material/core';
11+
1012

1113
@Component({
1214
selector: 'mdc-progress-spinner-demo',
1315
templateUrl: 'mdc-progress-spinner-demo.html',
1416
styleUrls: ['mdc-progress-spinner-demo.css'],
1517
})
16-
export class MdcProgressSpinnerDemo {}
18+
export class MdcProgressSpinnerDemo {
19+
progressValue = 60;
20+
color: ThemePalette = 'primary';
21+
isDeterminate = true;
22+
23+
step(val: number) {
24+
this.progressValue = Math.max(0, Math.min(100, val + this.progressValue));
25+
}
26+
}

‎src/material-experimental/mdc-progress-spinner/_progress-spinner-theme.scss

Lines changed: 16 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,10 +2,25 @@
22
@import '@material/theme/functions.import';
33
@import '../mdc-helpers/mdc-helpers';
44

5+
@mixin _mat-mdc-progress-spinner-color($color) {
6+
@include mdc-circular-progress-color($color, $query: $mat-theme-styles-query);
7+
@include mdc-circular-progress-indeterminate-colors($color, $query: $mat-theme-styles-query);
8+
}
9+
510
@mixin mat-mdc-progress-spinner-color($config-or-theme) {
611
$config: mat-get-color-config($config-or-theme);
712
@include mat-using-mdc-theme($config) {
8-
@include mdc-circular-progress-core-styles($query: $mat-base-styles-without-animation-query);
13+
.mat-mdc-progress-spinner {
14+
@include _mat-mdc-progress-spinner-color(primary);
15+
16+
&.mat-accent {
17+
@include _mat-mdc-progress-spinner-color(secondary);
18+
}
19+
20+
&.mat-warn {
21+
@include _mat-mdc-progress-spinner-color(error);
22+
}
23+
}
924
}
1025
}
1126

‎src/material-experimental/mdc-progress-spinner/module.ts

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -8,11 +8,11 @@
88

99
import {NgModule} from '@angular/core';
1010
import {MatCommonModule} from '@angular/material/core';
11-
import {MatProgressSpinner} from './progress-spinner';
11+
import {MatProgressSpinner, MatSpinner} from './progress-spinner';
1212

1313
@NgModule({
14-
exports: [MatProgressSpinner, MatCommonModule],
15-
declarations: [MatProgressSpinner],
14+
exports: [MatProgressSpinner, MatSpinner, MatCommonModule],
15+
declarations: [MatProgressSpinner, MatSpinner],
1616
})
1717
export class MatProgressSpinnerModule {
1818
}

‎src/material-experimental/mdc-progress-spinner/progress-spinner.scss

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -3,3 +3,9 @@
33

44

55
@include mdc-circular-progress-core-styles($query: $mat-base-styles-without-animation-query);
6+
7+
.mat-mdc-progress-spinner {
8+
&:not(._mat-animation-noopable) {
9+
@include mdc-circular-progress-core-styles($query: animation);
10+
}
11+
}

‎src/material-experimental/mdc-progress-spinner/progress-spinner.ts

Lines changed: 60 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -9,8 +9,8 @@
99
import {
1010
AfterViewInit,
1111
ChangeDetectionStrategy,
12-
Component, ElementRef, Inject, InjectionToken,
13-
Input, NgZone,
12+
Component, ElementRef, Inject,
13+
Input,
1414
OnDestroy, Optional,
1515
ViewEncapsulation
1616
} from '@angular/core';
@@ -89,13 +89,23 @@ export class MatProgressSpinner extends _MatProgressSpinnerMixinBase implements
8989
private _rootElement: HTMLElement;
9090
private _determinateCircle: HTMLElement;
9191

92-
constructor(public _elementRef: ElementRef<HTMLElement>, private _ngZone: NgZone,
92+
constructor(public _elementRef: ElementRef<HTMLElement>,
9393
@Optional() @Inject(ANIMATION_MODULE_TYPE) animationMode: string,
9494
@Inject(MAT_PROGRESS_SPINNER_DEFAULT_OPTIONS)
9595
defaults?: MatProgressSpinnerDefaultOptions) {
9696
super(_elementRef);
9797
this._noopAnimations = animationMode === 'NoopAnimations' &&
9898
(!!defaults && !defaults._forceAnimations);
99+
100+
if (defaults) {
101+
if (defaults.diameter) {
102+
this.diameter = defaults.diameter;
103+
}
104+
105+
if (defaults.strokeWidth) {
106+
this.strokeWidth = defaults.strokeWidth;
107+
}
108+
}
99109
}
100110

101111
/**
@@ -140,7 +150,22 @@ export class MatProgressSpinner extends _MatProgressSpinnerMixinBase implements
140150
}
141151
private _diameter = BASE_SIZE;
142152

153+
/** Stroke width of the progress spinner. */
154+
@Input()
155+
get strokeWidth(): number {
156+
return this._strokeWidth || this.diameter / 10;
157+
}
158+
set strokeWidth(value: number) {
159+
this._strokeWidth = coerceNumberProperty(value);
160+
}
161+
private _strokeWidth: number;
162+
143163
ngAfterViewInit() {
164+
const element = this._elementRef.nativeElement;
165+
166+
this._rootElement = element.querySelector('.mdc-circular-progress') as HTMLElement;
167+
this._determinateCircle = element.querySelector('.mdc-circular-progress__determinate-container') as HTMLElement;
168+
144169
this._foundation = new MDCCircularProgressFoundation(this._adapter);
145170
this._foundation.init();
146171
this._syncFoundation();
@@ -162,3 +187,35 @@ export class MatProgressSpinner extends _MatProgressSpinnerMixinBase implements
162187
}
163188
}
164189
}
190+
191+
/**
192+
* `<mat-spinner>` component.
193+
*
194+
* This is a component definition to be used as a convenience reference to create an
195+
* indeterminate `<mat-progress-spinner>` instance.
196+
*/
197+
@Component({
198+
selector: 'mat-spinner',
199+
host: {
200+
'role': 'progressbar',
201+
'mode': 'indeterminate',
202+
'class': 'mat-spinner mat-progress-spinner',
203+
'[class._mat-animation-noopable]': `_noopAnimations`,
204+
'[style.width.px]': 'diameter',
205+
'[style.height.px]': 'diameter',
206+
},
207+
inputs: ['color'],
208+
templateUrl: 'progress-spinner.html',
209+
styleUrls: ['progress-spinner.css'],
210+
changeDetection: ChangeDetectionStrategy.OnPush,
211+
encapsulation: ViewEncapsulation.None,
212+
})
213+
export class MatSpinner extends MatProgressSpinner {
214+
constructor(elementRef: ElementRef<HTMLElement>,
215+
@Optional() @Inject(ANIMATION_MODULE_TYPE) animationMode: string,
216+
@Inject(MAT_PROGRESS_SPINNER_DEFAULT_OPTIONS)
217+
defaults?: MatProgressSpinnerDefaultOptions) {
218+
super(elementRef, animationMode, defaults);
219+
this.mode = 'indeterminate';
220+
}
221+
}

‎src/material-experimental/mdc_require_config.js

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,7 @@ require.config({
77
'@material/base': '/base/npm/node_modules/@material/base/dist/mdc.base',
88
'@material/checkbox': '/base/npm/node_modules/@material/checkbox/dist/mdc.checkbox',
99
'@material/chips': '/base/npm/node_modules/@material/chips/dist/mdc.chips',
10+
'@material/circular-progress': '/base/npm/node_modules/@material/circular-progress/dist/mdc.circularProgress',
1011
'@material/dialog': '/base/npm/node_modules/@material/dialog/dist/mdc.dialog',
1112
'@material/dom': '/base/npm/node_modules/@material/dom/dist/mdc.dom',
1213
'@material/drawer': '/base/npm/node_modules/@material/drawer/dist/mdc.drawer',

‎tools/system-config-tmpl.js

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -42,6 +42,7 @@ var pathMapping = {
4242
'@material/base': 'node:@material/base/dist/mdc.base.js',
4343
'@material/checkbox': 'node:@material/checkbox/dist/mdc.checkbox.js',
4444
'@material/chips': 'node:@material/chips/dist/mdc.chips.js',
45+
'@material/circular-progress': 'node:@material/circular-progress/dist/mdc.circularProgress.js',
4546
'@material/dialog': 'node:@material/dialog/dist/mdc.dialog.js',
4647
'@material/dom': 'node:@material/dom/dist/mdc.dom.js',
4748
'@material/drawer': 'node:@material/drawer/dist/mdc.drawer.js',

0 commit comments

Comments
 (0)