diff --git a/src/lib/progress-spinner/progress-spinner.html b/src/lib/progress-spinner/progress-spinner.html index 4de40c2dca21..cb5f8db64b44 100644 --- a/src/lib/progress-spinner/progress-spinner.html +++ b/src/lib/progress-spinner/progress-spinner.html @@ -6,8 +6,8 @@ --> diff --git a/src/lib/progress-spinner/progress-spinner.spec.ts b/src/lib/progress-spinner/progress-spinner.spec.ts index d00d31881999..e5edabe4d411 100644 --- a/src/lib/progress-spinner/progress-spinner.spec.ts +++ b/src/lib/progress-spinner/progress-spinner.spec.ts @@ -140,7 +140,7 @@ describe('MatProgressSpinner', () => { fixture.componentInstance.strokeWidth = 40; fixture.detectChanges(); - expect(parseInt(circleElement.style.strokeWidth)).toBe(30, 'Expected the custom stroke ' + + expect(parseInt(circleElement.style.strokeWidth)).toBe(40, 'Expected the custom stroke ' + 'width to be applied to the circle element as a percentage of the element size.'); expect(svgElement.getAttribute('viewBox')) .toBe('0 0 130 130', 'Expected the viewBox to be adjusted based on the stroke width.'); @@ -153,8 +153,8 @@ describe('MatProgressSpinner', () => { fixture.componentInstance.strokeWidth = 40; fixture.detectChanges(); - expect(element.style.width).toBe('130px'); - expect(element.style.height).toBe('130px'); + expect(element.style.width).toBe('100px'); + expect(element.style.height).toBe('100px'); }); it('should not collapse the host element if the stroke width is less than the default', () => { @@ -217,10 +217,10 @@ describe('MatProgressSpinner', () => { expect(spinner.componentInstance.strokeWidth).toBe(11); expect(spinner.componentInstance.value).toBe(25); - expect(spinner.nativeElement.style.width).toBe('38px'); - expect(spinner.nativeElement.style.height).toBe('38px'); - expect(svgElement.style.width).toBe('38px'); - expect(svgElement.style.height).toBe('38px'); + expect(spinner.nativeElement.style.width).toBe('37px'); + expect(spinner.nativeElement.style.height).toBe('37px'); + expect(svgElement.style.width).toBe('37px'); + expect(svgElement.style.height).toBe('37px'); expect(svgElement.getAttribute('viewBox')).toBe('0 0 38 38'); }); diff --git a/src/lib/progress-spinner/progress-spinner.ts b/src/lib/progress-spinner/progress-spinner.ts index 509e42794578..dc7b88885c33 100644 --- a/src/lib/progress-spinner/progress-spinner.ts +++ b/src/lib/progress-spinner/progress-spinner.ts @@ -11,8 +11,6 @@ import { ChangeDetectionStrategy, Input, ElementRef, - SimpleChanges, - OnChanges, ViewEncapsulation, Optional, Inject, @@ -82,8 +80,8 @@ const INDETERMINATE_ANIMATION_TEMPLATE = ` host: { 'role': 'progressbar', 'class': 'mat-progress-spinner', - '[style.width.px]': '_elementSize', - '[style.height.px]': '_elementSize', + '[style.width.px]': 'diameter', + '[style.height.px]': 'diameter', '[attr.aria-valuemin]': 'mode === "determinate" ? 0 : null', '[attr.aria-valuemax]': 'mode === "determinate" ? 100 : null', '[attr.aria-valuenow]': 'value', @@ -95,16 +93,12 @@ const INDETERMINATE_ANIMATION_TEMPLATE = ` changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, }) -export class MatProgressSpinner extends _MatProgressSpinnerMixinBase implements CanColor, - OnChanges { +export class MatProgressSpinner extends _MatProgressSpinnerMixinBase implements CanColor { private _value = 0; private _strokeWidth: number; private _fallbackAnimation = false; - /** The width and height of the host element. Will grow with stroke width. */ - _elementSize = BASE_SIZE; - /** Tracks diameters of existing instances to de-dupe generated styles (default d = 100) */ private static diameters = new Set([BASE_SIZE]); @@ -123,7 +117,6 @@ export class MatProgressSpinner extends _MatProgressSpinnerMixinBase implements if (!this._fallbackAnimation && !MatProgressSpinner.diameters.has(this._diameter)) { this._attachStyleNode(); } - this._updateElementSize(); } private _diameter = BASE_SIZE; @@ -164,12 +157,6 @@ export class MatProgressSpinner extends _MatProgressSpinnerMixinBase implements _elementRef.nativeElement.classList.add(animationClass); } - ngOnChanges(changes: SimpleChanges) { - if (changes.strokeWidth || changes.diameter) { - this._updateElementSize(); - } - } - /** The radius of the spinner, adjusted for stroke width. */ get _circleRadius() { return (this.diameter - BASE_STROKE_WIDTH) / 2; @@ -202,7 +189,7 @@ export class MatProgressSpinner extends _MatProgressSpinnerMixinBase implements /** Stroke width of the circle in percent. */ get _circleStrokeWidth() { - return this.strokeWidth / this._elementSize * 100; + return this.strokeWidth / this.diameter * 100; } /** Dynamically generates a style tag containing the correct animation for this diameter. */ @@ -230,11 +217,6 @@ export class MatProgressSpinner extends _MatProgressSpinnerMixinBase implements .replace(/END_VALUE/g, `${0.2 * this._strokeCircumference}`) .replace(/DIAMETER/g, `${this.diameter}`); } - - /** Updates the spinner element size based on its diameter. */ - private _updateElementSize() { - this._elementSize = this._diameter + Math.max(this.strokeWidth - BASE_STROKE_WIDTH, 0); - } } @@ -251,8 +233,8 @@ export class MatProgressSpinner extends _MatProgressSpinnerMixinBase implements 'role': 'progressbar', 'mode': 'indeterminate', 'class': 'mat-spinner mat-progress-spinner', - '[style.width.px]': '_elementSize', - '[style.height.px]': '_elementSize', + '[style.width.px]': 'diameter', + '[style.height.px]': 'diameter', }, inputs: ['color'], templateUrl: 'progress-spinner.html',