From 1f88676c23cc548562395eaad6445950efc24002 Mon Sep 17 00:00:00 2001 From: crisbeto Date: Wed, 6 Jun 2018 16:25:43 +0200 Subject: [PATCH] fix(progress-spinner): animation not working when default size is set via token Fixes the progress spinner's animation not working when a different diameter is passed in through the `MAT_PROGRESS_SPINNER_DEFAULT_OPTIONS` token. The issue comes from the fact that setting the defaults wasn't going through the appropriate setters, which meant that we weren't generating the appropriate `style` tag for that size. Fixes #11687. --- src/lib/progress-spinner/progress-spinner.ts | 19 ++++++++++++++----- 1 file changed, 14 insertions(+), 5 deletions(-) diff --git a/src/lib/progress-spinner/progress-spinner.ts b/src/lib/progress-spinner/progress-spinner.ts index d6a28b9d3d60..db1678447dbb 100644 --- a/src/lib/progress-spinner/progress-spinner.ts +++ b/src/lib/progress-spinner/progress-spinner.ts @@ -119,7 +119,7 @@ const INDETERMINATE_ANIMATION_TEMPLATE = ` export class MatProgressSpinner extends _MatProgressSpinnerMixinBase implements CanColor { private _value = 0; - private _strokeWidth = this._defaults ? this._defaults.strokeWidth : undefined; + private _strokeWidth: number; private _fallbackAnimation = false; /** Tracks diameters of existing instances to de-dupe generated styles (default d = 100) */ @@ -141,8 +141,7 @@ export class MatProgressSpinner extends _MatProgressSpinnerMixinBase implements this._attachStyleNode(); } } - private _diameter = this._defaults && this._defaults.diameter ? - this._defaults.diameter : BASE_SIZE; + private _diameter = BASE_SIZE; /** Stroke width of the progress spinner. */ @Input() @@ -168,14 +167,24 @@ export class MatProgressSpinner extends _MatProgressSpinnerMixinBase implements constructor(public _elementRef: ElementRef, platform: Platform, @Optional() @Inject(DOCUMENT) private _document: any, - // @deletion-target 7.0.0 _animationMode and _defaults parameters to be made required. + // @deletion-target 7.0.0 _animationMode and defaults parameters to be made required. @Optional() @Inject(ANIMATION_MODULE_TYPE) public _animationMode?: string, @Inject(MAT_PROGRESS_SPINNER_DEFAULT_OPTIONS) - private _defaults?: MatProgressSpinnerDefaultOptions) { + defaults?: MatProgressSpinnerDefaultOptions) { super(_elementRef); this._fallbackAnimation = platform.EDGE || platform.TRIDENT; + if (defaults) { + if (defaults.diameter) { + this.diameter = defaults.diameter; + } + + if (defaults.strokeWidth) { + this.strokeWidth = defaults.strokeWidth; + } + } + // On IE and Edge, we can't animate the `stroke-dashoffset` // reliably so we fall back to a non-spec animation. const animationClass =