Skip to content

Commit af3f745

Browse files
committed
feat(progress-spinner): add injection token for configuring the diameter globally
Adds the `MAT_PROGRESS_SPINNER_DEFAULT_OPTIONS` injection token that can be used to globally configure the diameter (and any other options we decide to add) for all progress spinners. Fixes #11490.
1 parent 9bf720a commit af3f745

File tree

2 files changed

+56
-6
lines changed

2 files changed

+56
-6
lines changed

src/lib/progress-spinner/progress-spinner.spec.ts

Lines changed: 26 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,11 @@
11
import {TestBed, async} from '@angular/core/testing';
22
import {Component} from '@angular/core';
33
import {By} from '@angular/platform-browser';
4-
import {MatProgressSpinnerModule, MatProgressSpinner} from './index';
4+
import {
5+
MatProgressSpinnerModule,
6+
MatProgressSpinner,
7+
MAT_PROGRESS_SPINNER_DEFAULT_OPTIONS,
8+
} from './index';
59

610

711
describe('MatProgressSpinner', () => {
@@ -232,6 +236,27 @@ describe('MatProgressSpinner', () => {
232236
expect(spinner.nativeElement.style.width).toBe('32px');
233237
expect(spinner.nativeElement.style.height).toBe('32px');
234238
});
239+
240+
it('should be able to set a default diameter', () => {
241+
TestBed
242+
.resetTestingModule()
243+
.configureTestingModule({
244+
imports: [MatProgressSpinnerModule],
245+
declarations: [BasicProgressSpinner],
246+
providers: [{
247+
provide: MAT_PROGRESS_SPINNER_DEFAULT_OPTIONS,
248+
useValue: {diameter: 23}
249+
}]
250+
})
251+
.compileComponents();
252+
253+
const fixture = TestBed.createComponent(BasicProgressSpinner);
254+
fixture.detectChanges();
255+
256+
const progressElement = fixture.debugElement.query(By.css('mat-progress-spinner'));
257+
expect(progressElement.componentInstance.diameter).toBe(23);
258+
});
259+
235260
});
236261

237262

src/lib/progress-spinner/progress-spinner.ts

Lines changed: 30 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -14,6 +14,7 @@ import {
1414
ElementRef,
1515
ViewEncapsulation,
1616
Optional,
17+
InjectionToken,
1718
} from '@angular/core';
1819
import {ANIMATION_MODULE_TYPE} from '@angular/platform-browser/animations';
1920
import {CanColor, mixinColor} from '@angular/material/core';
@@ -43,6 +44,24 @@ export class MatProgressSpinnerBase {
4344
}
4445
export const _MatProgressSpinnerMixinBase = mixinColor(MatProgressSpinnerBase, 'primary');
4546

47+
/** Default `mat-progress-spinner` options that can be overridden. */
48+
export interface MatProgressSpinnerDefaultOptions {
49+
/** Diameter of the spinner. */
50+
diameter?: number;
51+
}
52+
53+
/** Injection token to be used to override the default options for `mat-progress-spinner`. */
54+
export const MAT_PROGRESS_SPINNER_DEFAULT_OPTIONS =
55+
new InjectionToken<MatProgressSpinnerDefaultOptions>('mat-progress-spinner-default-options', {
56+
providedIn: 'root',
57+
factory: MAT_PROGRESS_SPINNER_DEFAULT_OPTIONS_FACTORY,
58+
});
59+
60+
/** @docs-private */
61+
export function MAT_PROGRESS_SPINNER_DEFAULT_OPTIONS_FACTORY(): MatProgressSpinnerDefaultOptions {
62+
return {diameter: BASE_SIZE};
63+
}
64+
4665
// .0001 percentage difference is necessary in order to avoid unwanted animation frames
4766
// for example because the animation duration is 4 seconds, .1% accounts to 4ms
4867
// which are enough to see the flicker described in
@@ -120,7 +139,8 @@ export class MatProgressSpinner extends _MatProgressSpinnerMixinBase implements
120139
this._attachStyleNode();
121140
}
122141
}
123-
private _diameter = BASE_SIZE;
142+
private _diameter = this._defaults && this._defaults.diameter ?
143+
this._defaults.diameter : BASE_SIZE;
124144

125145
/** Stroke width of the progress spinner. */
126146
@Input()
@@ -131,7 +151,6 @@ export class MatProgressSpinner extends _MatProgressSpinnerMixinBase implements
131151
this._strokeWidth = coerceNumberProperty(value);
132152
}
133153

134-
135154
/** Mode of the progress circle */
136155
@Input() mode: ProgressSpinnerMode = 'determinate';
137156

@@ -147,7 +166,10 @@ export class MatProgressSpinner extends _MatProgressSpinnerMixinBase implements
147166
constructor(public _elementRef: ElementRef,
148167
platform: Platform,
149168
@Optional() @Inject(DOCUMENT) private _document: any,
150-
@Optional() @Inject(ANIMATION_MODULE_TYPE) public _animationMode?: string) {
169+
// @deletion-target 7.0.0 _animationMode and _defaults parameters to be made required.
170+
@Optional() @Inject(ANIMATION_MODULE_TYPE) public _animationMode?: string,
171+
@Inject(MAT_PROGRESS_SPINNER_DEFAULT_OPTIONS)
172+
private _defaults?: MatProgressSpinnerDefaultOptions) {
151173

152174
super(_elementRef);
153175
this._fallbackAnimation = platform.EDGE || platform.TRIDENT;
@@ -249,8 +271,11 @@ export class MatProgressSpinner extends _MatProgressSpinnerMixinBase implements
249271
export class MatSpinner extends MatProgressSpinner {
250272
constructor(elementRef: ElementRef, platform: Platform,
251273
@Optional() @Inject(DOCUMENT) document: any,
252-
@Optional() @Inject(ANIMATION_MODULE_TYPE) _animationMode?: string) {
253-
super(elementRef, platform, document, _animationMode);
274+
// @deletion-targets 7.0.0 animationMode and defaults parameters to be made required.
275+
@Optional() @Inject(ANIMATION_MODULE_TYPE) animationMode?: string,
276+
@Inject(MAT_PROGRESS_SPINNER_DEFAULT_OPTIONS)
277+
defaults?: MatProgressSpinnerDefaultOptions) {
278+
super(elementRef, platform, document, animationMode, defaults);
254279
this.mode = 'indeterminate';
255280
}
256281
}

0 commit comments

Comments
 (0)