@angular/material 13.0.0-next.4 → 13.0.0-next.8

package/fesm2020/progress-spinner.mjs

@@ -0,0 +1,326 @@
+import * as i0 from '@angular/core';
+import { InjectionToken, Component, ChangeDetectionStrategy, ViewEncapsulation, Optional, Inject, Input, NgModule } from '@angular/core';
+import * as i2 from '@angular/common';
+import { DOCUMENT, CommonModule } from '@angular/common';
+import { mixinColor, MatCommonModule } from '@angular/material/core';
+import { coerceNumberProperty } from '@angular/cdk/coercion';
+import * as i1 from '@angular/cdk/platform';
+import { _getShadowRoot } from '@angular/cdk/platform';
+import { ANIMATION_MODULE_TYPE } from '@angular/platform-browser/animations';
+
+/**
+ * @license
+ * Copyright Google LLC All Rights Reserved.
+ *
+ * Use of this source code is governed by an MIT-style license that can be
+ * found in the LICENSE file at https://angular.io/license
+ */
+/**
+ * Base reference size of the spinner.
+ * @docs-private
+ */
+const BASE_SIZE = 100;
+/**
+ * Base reference stroke width of the spinner.
+ * @docs-private
+ */
+const BASE_STROKE_WIDTH = 10;
+// Boilerplate for applying mixins to MatProgressSpinner.
+/** @docs-private */
+const _MatProgressSpinnerBase = mixinColor(class {
+    constructor(_elementRef) {
+        this._elementRef = _elementRef;
+    }
+}, 'primary');
+/** Injection token to be used to override the default options for `mat-progress-spinner`. */
+const MAT_PROGRESS_SPINNER_DEFAULT_OPTIONS = new InjectionToken('mat-progress-spinner-default-options', {
+    providedIn: 'root',
+    factory: MAT_PROGRESS_SPINNER_DEFAULT_OPTIONS_FACTORY,
+});
+/** @docs-private */
+function MAT_PROGRESS_SPINNER_DEFAULT_OPTIONS_FACTORY() {
+    return { diameter: BASE_SIZE };
+}
+// .0001 percentage difference is necessary in order to avoid unwanted animation frames
+// for example because the animation duration is 4 seconds, .1% accounts to 4ms
+// which are enough to see the flicker described in
+// https://github.com/angular/components/issues/8984
+const INDETERMINATE_ANIMATION_TEMPLATE = `
+ @keyframes mat-progress-spinner-stroke-rotate-DIAMETER {
+    0%      { stroke-dashoffset: START_VALUE;  transform: rotate(0); }
+    12.5%   { stroke-dashoffset: END_VALUE;    transform: rotate(0); }
+    12.5001%  { stroke-dashoffset: END_VALUE;    transform: rotateX(180deg) rotate(72.5deg); }
+    25%     { stroke-dashoffset: START_VALUE;  transform: rotateX(180deg) rotate(72.5deg); }
+
+    25.0001%   { stroke-dashoffset: START_VALUE;  transform: rotate(270deg); }
+    37.5%   { stroke-dashoffset: END_VALUE;    transform: rotate(270deg); }
+    37.5001%  { stroke-dashoffset: END_VALUE;    transform: rotateX(180deg) rotate(161.5deg); }
+    50%     { stroke-dashoffset: START_VALUE;  transform: rotateX(180deg) rotate(161.5deg); }
+
+    50.0001%  { stroke-dashoffset: START_VALUE;  transform: rotate(180deg); }
+    62.5%   { stroke-dashoffset: END_VALUE;    transform: rotate(180deg); }
+    62.5001%  { stroke-dashoffset: END_VALUE;    transform: rotateX(180deg) rotate(251.5deg); }
+    75%     { stroke-dashoffset: START_VALUE;  transform: rotateX(180deg) rotate(251.5deg); }
+
+    75.0001%  { stroke-dashoffset: START_VALUE;  transform: rotate(90deg); }
+    87.5%   { stroke-dashoffset: END_VALUE;    transform: rotate(90deg); }
+    87.5001%  { stroke-dashoffset: END_VALUE;    transform: rotateX(180deg) rotate(341.5deg); }
+    100%    { stroke-dashoffset: START_VALUE;  transform: rotateX(180deg) rotate(341.5deg); }
+  }
+`;
+/**
+ * `<mat-progress-spinner>` component.
+ */
+class MatProgressSpinner extends _MatProgressSpinnerBase {
+    constructor(elementRef, 
+    /**
+     * @deprecated `_platform` parameter no longer being used.
+     * @breaking-change 14.0.0
+     */
+    _platform, _document, animationMode, defaults) {
+        super(elementRef);
+        this._document = _document;
+        this._diameter = BASE_SIZE;
+        this._value = 0;
+        /** Mode of the progress circle */
+        this.mode = 'determinate';
+        const trackedDiameters = MatProgressSpinner._diameters;
+        this._spinnerAnimationLabel = this._getSpinnerAnimationLabel();
+        // The base size is already inserted via the component's structural styles. We still
+        // need to track it so we don't end up adding the same styles again.
+        if (!trackedDiameters.has(_document.head)) {
+            trackedDiameters.set(_document.head, new Set([BASE_SIZE]));
+        }
+        this._noopAnimations = animationMode === 'NoopAnimations' &&
+            (!!defaults && !defaults._forceAnimations);
+        if (defaults) {
+            if (defaults.diameter) {
+                this.diameter = defaults.diameter;
+            }
+            if (defaults.strokeWidth) {
+                this.strokeWidth = defaults.strokeWidth;
+            }
+        }
+    }
+    /** The diameter of the progress spinner (will set width and height of svg). */
+    get diameter() { return this._diameter; }
+    set diameter(size) {
+        this._diameter = coerceNumberProperty(size);
+        this._spinnerAnimationLabel = this._getSpinnerAnimationLabel();
+        // If this is set before `ngOnInit`, the style root may not have been resolved yet.
+        if (this._styleRoot) {
+            this._attachStyleNode();
+        }
+    }
+    /** Stroke width of the progress spinner. */
+    get strokeWidth() {
+        return this._strokeWidth || this.diameter / 10;
+    }
+    set strokeWidth(value) {
+        this._strokeWidth = coerceNumberProperty(value);
+    }
+    /** Value of the progress circle. */
+    get value() {
+        return this.mode === 'determinate' ? this._value : 0;
+    }
+    set value(newValue) {
+        this._value = Math.max(0, Math.min(100, coerceNumberProperty(newValue)));
+    }
+    ngOnInit() {
+        const element = this._elementRef.nativeElement;
+        // Note that we need to look up the root node in ngOnInit, rather than the constructor, because
+        // Angular seems to create the element outside the shadow root and then moves it inside, if the
+        // node is inside an `ngIf` and a ShadowDom-encapsulated component.
+        this._styleRoot = _getShadowRoot(element) || this._document.head;
+        this._attachStyleNode();
+        element.classList.add('mat-progress-spinner-indeterminate-animation');
+    }
+    /** The radius of the spinner, adjusted for stroke width. */
+    _getCircleRadius() {
+        return (this.diameter - BASE_STROKE_WIDTH) / 2;
+    }
+    /** The view box of the spinner's svg element. */
+    _getViewBox() {
+        const viewBox = this._getCircleRadius() * 2 + this.strokeWidth;
+        return `0 0 ${viewBox} ${viewBox}`;
+    }
+    /** The stroke circumference of the svg circle. */
+    _getStrokeCircumference() {
+        return 2 * Math.PI * this._getCircleRadius();
+    }
+    /** The dash offset of the svg circle. */
+    _getStrokeDashOffset() {
+        if (this.mode === 'determinate') {
+            return this._getStrokeCircumference() * (100 - this._value) / 100;
+        }
+        return null;
+    }
+    /** Stroke width of the circle in percent. */
+    _getCircleStrokeWidth() {
+        return this.strokeWidth / this.diameter * 100;
+    }
+    /** Dynamically generates a style tag containing the correct animation for this diameter. */
+    _attachStyleNode() {
+        const styleRoot = this._styleRoot;
+        const currentDiameter = this._diameter;
+        const diameters = MatProgressSpinner._diameters;
+        let diametersForElement = diameters.get(styleRoot);
+        if (!diametersForElement || !diametersForElement.has(currentDiameter)) {
+            const styleTag = this._document.createElement('style');
+            styleTag.setAttribute('mat-spinner-animation', this._spinnerAnimationLabel);
+            styleTag.textContent = this._getAnimationText();
+            styleRoot.appendChild(styleTag);
+            if (!diametersForElement) {
+                diametersForElement = new Set();
+                diameters.set(styleRoot, diametersForElement);
+            }
+            diametersForElement.add(currentDiameter);
+        }
+    }
+    /** Generates animation styles adjusted for the spinner's diameter. */
+    _getAnimationText() {
+        const strokeCircumference = this._getStrokeCircumference();
+        return INDETERMINATE_ANIMATION_TEMPLATE
+            // Animation should begin at 5% and end at 80%
+            .replace(/START_VALUE/g, `${0.95 * strokeCircumference}`)
+            .replace(/END_VALUE/g, `${0.2 * strokeCircumference}`)
+            .replace(/DIAMETER/g, `${this._spinnerAnimationLabel}`);
+    }
+    /** Returns the circle diameter formatted for use with the animation-name CSS property. */
+    _getSpinnerAnimationLabel() {
+        // The string of a float point number will include a period ‘.’ character,
+        // which is not valid for a CSS animation-name.
+        return this.diameter.toString().replace('.', '_');
+    }
+}
+/**
+ * Tracks diameters of existing instances to de-dupe generated styles (default d = 100).
+ * We need to keep track of which elements the diameters were attached to, because for
+ * elements in the Shadow DOM the style tags are attached to the shadow root, rather
+ * than the document head.
+ */
+MatProgressSpinner._diameters = new WeakMap();
+MatProgressSpinner.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.0-next.15", ngImport: i0, type: MatProgressSpinner, deps: [{ token: i0.ElementRef }, { token: i1.Platform }, { token: DOCUMENT, optional: true }, { token: ANIMATION_MODULE_TYPE, optional: true }, { token: MAT_PROGRESS_SPINNER_DEFAULT_OPTIONS }], target: i0.ɵɵFactoryTarget.Component });
+MatProgressSpinner.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.0.0-next.15", type: MatProgressSpinner, selector: "mat-progress-spinner", inputs: { color: "color", diameter: "diameter", strokeWidth: "strokeWidth", mode: "mode", value: "value" }, host: { attributes: { "role": "progressbar", "tabindex": "-1" }, properties: { "class._mat-animation-noopable": "_noopAnimations", "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": "mode === \"determinate\" ? value : null", "attr.mode": "mode" }, classAttribute: "mat-progress-spinner" }, exportAs: ["matProgressSpinner"], usesInheritance: true, ngImport: i0, template: "<!--\n  preserveAspectRatio of xMidYMid meet as the center of the viewport is the circle's\n  center. The center of the circle will remain at the center of the mat-progress-spinner\n  element containing the SVG.\n-->\n<!--\n  All children need to be hidden for screen readers in order to support ChromeVox.\n  More context in the issue: https://github.com/angular/components/issues/22165.\n-->\n<svg\n  [style.width.px]=\"diameter\"\n  [style.height.px]=\"diameter\"\n  [attr.viewBox]=\"_getViewBox()\"\n  preserveAspectRatio=\"xMidYMid meet\"\n  focusable=\"false\"\n  [ngSwitch]=\"mode === 'indeterminate'\"\n  aria-hidden=\"true\">\n\n  <!--\n    Technically we can reuse the same `circle` element, however Safari has an issue that breaks\n    the SVG rendering in determinate mode, after switching between indeterminate and determinate.\n    Using a different element avoids the issue. An alternative to this is adding `display: none`\n    for a split second and then removing it when switching between modes, but it's hard to know\n    for how long to hide the element and it can cause the UI to blink.\n  -->\n  <circle\n    *ngSwitchCase=\"true\"\n    cx=\"50%\"\n    cy=\"50%\"\n    [attr.r]=\"_getCircleRadius()\"\n    [style.animation-name]=\"'mat-progress-spinner-stroke-rotate-' + _spinnerAnimationLabel\"\n    [style.stroke-dashoffset.px]=\"_getStrokeDashOffset()\"\n    [style.stroke-dasharray.px]=\"_getStrokeCircumference()\"\n    [style.stroke-width.%]=\"_getCircleStrokeWidth()\"></circle>\n\n  <circle\n    *ngSwitchCase=\"false\"\n    cx=\"50%\"\n    cy=\"50%\"\n    [attr.r]=\"_getCircleRadius()\"\n    [style.stroke-dashoffset.px]=\"_getStrokeDashOffset()\"\n    [style.stroke-dasharray.px]=\"_getStrokeCircumference()\"\n    [style.stroke-width.%]=\"_getCircleStrokeWidth()\"></circle>\n</svg>\n", styles: [".mat-progress-spinner{display:block;position:relative;overflow:hidden}.mat-progress-spinner svg{position:absolute;transform:rotate(-90deg);top:0;left:0;transform-origin:center;overflow:visible}.mat-progress-spinner circle{fill:transparent;transform-origin:center;transition:stroke-dashoffset 225ms linear}._mat-animation-noopable.mat-progress-spinner circle{transition:none;animation:none}.cdk-high-contrast-active .mat-progress-spinner circle{stroke:CanvasText}.mat-progress-spinner.mat-progress-spinner-indeterminate-animation[mode=indeterminate] svg{animation:mat-progress-spinner-linear-rotate 2000ms linear infinite}._mat-animation-noopable.mat-progress-spinner.mat-progress-spinner-indeterminate-animation[mode=indeterminate] svg{transition:none;animation:none}.mat-progress-spinner.mat-progress-spinner-indeterminate-animation[mode=indeterminate] circle{transition-property:stroke;animation-duration:4000ms;animation-timing-function:cubic-bezier(0.35, 0, 0.25, 1);animation-iteration-count:infinite}._mat-animation-noopable.mat-progress-spinner.mat-progress-spinner-indeterminate-animation[mode=indeterminate] circle{transition:none;animation:none}@keyframes mat-progress-spinner-linear-rotate{0%{transform:rotate(0deg)}100%{transform:rotate(360deg)}}@keyframes mat-progress-spinner-stroke-rotate-100{0%{stroke-dashoffset:268.606171575px;transform:rotate(0)}12.5%{stroke-dashoffset:56.5486677px;transform:rotate(0)}12.5001%{stroke-dashoffset:56.5486677px;transform:rotateX(180deg) rotate(72.5deg)}25%{stroke-dashoffset:268.606171575px;transform:rotateX(180deg) rotate(72.5deg)}25.0001%{stroke-dashoffset:268.606171575px;transform:rotate(270deg)}37.5%{stroke-dashoffset:56.5486677px;transform:rotate(270deg)}37.5001%{stroke-dashoffset:56.5486677px;transform:rotateX(180deg) rotate(161.5deg)}50%{stroke-dashoffset:268.606171575px;transform:rotateX(180deg) rotate(161.5deg)}50.0001%{stroke-dashoffset:268.606171575px;transform:rotate(180deg)}62.5%{stroke-dashoffset:56.5486677px;transform:rotate(180deg)}62.5001%{stroke-dashoffset:56.5486677px;transform:rotateX(180deg) rotate(251.5deg)}75%{stroke-dashoffset:268.606171575px;transform:rotateX(180deg) rotate(251.5deg)}75.0001%{stroke-dashoffset:268.606171575px;transform:rotate(90deg)}87.5%{stroke-dashoffset:56.5486677px;transform:rotate(90deg)}87.5001%{stroke-dashoffset:56.5486677px;transform:rotateX(180deg) rotate(341.5deg)}100%{stroke-dashoffset:268.606171575px;transform:rotateX(180deg) rotate(341.5deg)}}\n"], directives: [{ type: i2.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { type: i2.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.0-next.15", ngImport: i0, type: MatProgressSpinner, decorators: [{
+            type: Component,
+            args: [{ selector: 'mat-progress-spinner', exportAs: 'matProgressSpinner', host: {
+                        'role': 'progressbar',
+                        'class': 'mat-progress-spinner',
+                        // set tab index to -1 so screen readers will read the aria-label
+                        // Note: there is a known issue with JAWS that does not read progressbar aria labels on FireFox
+                        'tabindex': '-1',
+                        '[class._mat-animation-noopable]': `_noopAnimations`,
+                        '[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]': 'mode === "determinate" ? value : null',
+                        '[attr.mode]': 'mode',
+                    }, inputs: ['color'], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: "<!--\n  preserveAspectRatio of xMidYMid meet as the center of the viewport is the circle's\n  center. The center of the circle will remain at the center of the mat-progress-spinner\n  element containing the SVG.\n-->\n<!--\n  All children need to be hidden for screen readers in order to support ChromeVox.\n  More context in the issue: https://github.com/angular/components/issues/22165.\n-->\n<svg\n  [style.width.px]=\"diameter\"\n  [style.height.px]=\"diameter\"\n  [attr.viewBox]=\"_getViewBox()\"\n  preserveAspectRatio=\"xMidYMid meet\"\n  focusable=\"false\"\n  [ngSwitch]=\"mode === 'indeterminate'\"\n  aria-hidden=\"true\">\n\n  <!--\n    Technically we can reuse the same `circle` element, however Safari has an issue that breaks\n    the SVG rendering in determinate mode, after switching between indeterminate and determinate.\n    Using a different element avoids the issue. An alternative to this is adding `display: none`\n    for a split second and then removing it when switching between modes, but it's hard to know\n    for how long to hide the element and it can cause the UI to blink.\n  -->\n  <circle\n    *ngSwitchCase=\"true\"\n    cx=\"50%\"\n    cy=\"50%\"\n    [attr.r]=\"_getCircleRadius()\"\n    [style.animation-name]=\"'mat-progress-spinner-stroke-rotate-' + _spinnerAnimationLabel\"\n    [style.stroke-dashoffset.px]=\"_getStrokeDashOffset()\"\n    [style.stroke-dasharray.px]=\"_getStrokeCircumference()\"\n    [style.stroke-width.%]=\"_getCircleStrokeWidth()\"></circle>\n\n  <circle\n    *ngSwitchCase=\"false\"\n    cx=\"50%\"\n    cy=\"50%\"\n    [attr.r]=\"_getCircleRadius()\"\n    [style.stroke-dashoffset.px]=\"_getStrokeDashOffset()\"\n    [style.stroke-dasharray.px]=\"_getStrokeCircumference()\"\n    [style.stroke-width.%]=\"_getCircleStrokeWidth()\"></circle>\n</svg>\n", styles: [".mat-progress-spinner{display:block;position:relative;overflow:hidden}.mat-progress-spinner svg{position:absolute;transform:rotate(-90deg);top:0;left:0;transform-origin:center;overflow:visible}.mat-progress-spinner circle{fill:transparent;transform-origin:center;transition:stroke-dashoffset 225ms linear}._mat-animation-noopable.mat-progress-spinner circle{transition:none;animation:none}.cdk-high-contrast-active .mat-progress-spinner circle{stroke:CanvasText}.mat-progress-spinner.mat-progress-spinner-indeterminate-animation[mode=indeterminate] svg{animation:mat-progress-spinner-linear-rotate 2000ms linear infinite}._mat-animation-noopable.mat-progress-spinner.mat-progress-spinner-indeterminate-animation[mode=indeterminate] svg{transition:none;animation:none}.mat-progress-spinner.mat-progress-spinner-indeterminate-animation[mode=indeterminate] circle{transition-property:stroke;animation-duration:4000ms;animation-timing-function:cubic-bezier(0.35, 0, 0.25, 1);animation-iteration-count:infinite}._mat-animation-noopable.mat-progress-spinner.mat-progress-spinner-indeterminate-animation[mode=indeterminate] circle{transition:none;animation:none}@keyframes mat-progress-spinner-linear-rotate{0%{transform:rotate(0deg)}100%{transform:rotate(360deg)}}@keyframes mat-progress-spinner-stroke-rotate-100{0%{stroke-dashoffset:268.606171575px;transform:rotate(0)}12.5%{stroke-dashoffset:56.5486677px;transform:rotate(0)}12.5001%{stroke-dashoffset:56.5486677px;transform:rotateX(180deg) rotate(72.5deg)}25%{stroke-dashoffset:268.606171575px;transform:rotateX(180deg) rotate(72.5deg)}25.0001%{stroke-dashoffset:268.606171575px;transform:rotate(270deg)}37.5%{stroke-dashoffset:56.5486677px;transform:rotate(270deg)}37.5001%{stroke-dashoffset:56.5486677px;transform:rotateX(180deg) rotate(161.5deg)}50%{stroke-dashoffset:268.606171575px;transform:rotateX(180deg) rotate(161.5deg)}50.0001%{stroke-dashoffset:268.606171575px;transform:rotate(180deg)}62.5%{stroke-dashoffset:56.5486677px;transform:rotate(180deg)}62.5001%{stroke-dashoffset:56.5486677px;transform:rotateX(180deg) rotate(251.5deg)}75%{stroke-dashoffset:268.606171575px;transform:rotateX(180deg) rotate(251.5deg)}75.0001%{stroke-dashoffset:268.606171575px;transform:rotate(90deg)}87.5%{stroke-dashoffset:56.5486677px;transform:rotate(90deg)}87.5001%{stroke-dashoffset:56.5486677px;transform:rotateX(180deg) rotate(341.5deg)}100%{stroke-dashoffset:268.606171575px;transform:rotateX(180deg) rotate(341.5deg)}}\n"] }]
+        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i1.Platform }, { type: undefined, decorators: [{
+                    type: Optional
+                }, {
+                    type: Inject,
+                    args: [DOCUMENT]
+                }] }, { type: undefined, decorators: [{
+                    type: Optional
+                }, {
+                    type: Inject,
+                    args: [ANIMATION_MODULE_TYPE]
+                }] }, { type: undefined, decorators: [{
+                    type: Inject,
+                    args: [MAT_PROGRESS_SPINNER_DEFAULT_OPTIONS]
+                }] }]; }, propDecorators: { diameter: [{
+                type: Input
+            }], strokeWidth: [{
+                type: Input
+            }], mode: [{
+                type: Input
+            }], value: [{
+                type: Input
+            }] } });
+/**
+ * `<mat-spinner>` component.
+ *
+ * This is a component definition to be used as a convenience reference to create an
+ * indeterminate `<mat-progress-spinner>` instance.
+ */
+class MatSpinner extends MatProgressSpinner {
+    constructor(elementRef, platform, document, animationMode, defaults) {
+        super(elementRef, platform, document, animationMode, defaults);
+        this.mode = 'indeterminate';
+    }
+}
+MatSpinner.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.0-next.15", ngImport: i0, type: MatSpinner, deps: [{ token: i0.ElementRef }, { token: i1.Platform }, { token: DOCUMENT, optional: true }, { token: ANIMATION_MODULE_TYPE, optional: true }, { token: MAT_PROGRESS_SPINNER_DEFAULT_OPTIONS }], target: i0.ɵɵFactoryTarget.Component });
+MatSpinner.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.0.0-next.15", type: MatSpinner, selector: "mat-spinner", inputs: { color: "color" }, host: { attributes: { "role": "progressbar", "mode": "indeterminate" }, properties: { "class._mat-animation-noopable": "_noopAnimations", "style.width.px": "diameter", "style.height.px": "diameter" }, classAttribute: "mat-spinner mat-progress-spinner" }, usesInheritance: true, ngImport: i0, template: "<!--\n  preserveAspectRatio of xMidYMid meet as the center of the viewport is the circle's\n  center. The center of the circle will remain at the center of the mat-progress-spinner\n  element containing the SVG.\n-->\n<!--\n  All children need to be hidden for screen readers in order to support ChromeVox.\n  More context in the issue: https://github.com/angular/components/issues/22165.\n-->\n<svg\n  [style.width.px]=\"diameter\"\n  [style.height.px]=\"diameter\"\n  [attr.viewBox]=\"_getViewBox()\"\n  preserveAspectRatio=\"xMidYMid meet\"\n  focusable=\"false\"\n  [ngSwitch]=\"mode === 'indeterminate'\"\n  aria-hidden=\"true\">\n\n  <!--\n    Technically we can reuse the same `circle` element, however Safari has an issue that breaks\n    the SVG rendering in determinate mode, after switching between indeterminate and determinate.\n    Using a different element avoids the issue. An alternative to this is adding `display: none`\n    for a split second and then removing it when switching between modes, but it's hard to know\n    for how long to hide the element and it can cause the UI to blink.\n  -->\n  <circle\n    *ngSwitchCase=\"true\"\n    cx=\"50%\"\n    cy=\"50%\"\n    [attr.r]=\"_getCircleRadius()\"\n    [style.animation-name]=\"'mat-progress-spinner-stroke-rotate-' + _spinnerAnimationLabel\"\n    [style.stroke-dashoffset.px]=\"_getStrokeDashOffset()\"\n    [style.stroke-dasharray.px]=\"_getStrokeCircumference()\"\n    [style.stroke-width.%]=\"_getCircleStrokeWidth()\"></circle>\n\n  <circle\n    *ngSwitchCase=\"false\"\n    cx=\"50%\"\n    cy=\"50%\"\n    [attr.r]=\"_getCircleRadius()\"\n    [style.stroke-dashoffset.px]=\"_getStrokeDashOffset()\"\n    [style.stroke-dasharray.px]=\"_getStrokeCircumference()\"\n    [style.stroke-width.%]=\"_getCircleStrokeWidth()\"></circle>\n</svg>\n", styles: [".mat-progress-spinner{display:block;position:relative;overflow:hidden}.mat-progress-spinner svg{position:absolute;transform:rotate(-90deg);top:0;left:0;transform-origin:center;overflow:visible}.mat-progress-spinner circle{fill:transparent;transform-origin:center;transition:stroke-dashoffset 225ms linear}._mat-animation-noopable.mat-progress-spinner circle{transition:none;animation:none}.cdk-high-contrast-active .mat-progress-spinner circle{stroke:CanvasText}.mat-progress-spinner.mat-progress-spinner-indeterminate-animation[mode=indeterminate] svg{animation:mat-progress-spinner-linear-rotate 2000ms linear infinite}._mat-animation-noopable.mat-progress-spinner.mat-progress-spinner-indeterminate-animation[mode=indeterminate] svg{transition:none;animation:none}.mat-progress-spinner.mat-progress-spinner-indeterminate-animation[mode=indeterminate] circle{transition-property:stroke;animation-duration:4000ms;animation-timing-function:cubic-bezier(0.35, 0, 0.25, 1);animation-iteration-count:infinite}._mat-animation-noopable.mat-progress-spinner.mat-progress-spinner-indeterminate-animation[mode=indeterminate] circle{transition:none;animation:none}@keyframes mat-progress-spinner-linear-rotate{0%{transform:rotate(0deg)}100%{transform:rotate(360deg)}}@keyframes mat-progress-spinner-stroke-rotate-100{0%{stroke-dashoffset:268.606171575px;transform:rotate(0)}12.5%{stroke-dashoffset:56.5486677px;transform:rotate(0)}12.5001%{stroke-dashoffset:56.5486677px;transform:rotateX(180deg) rotate(72.5deg)}25%{stroke-dashoffset:268.606171575px;transform:rotateX(180deg) rotate(72.5deg)}25.0001%{stroke-dashoffset:268.606171575px;transform:rotate(270deg)}37.5%{stroke-dashoffset:56.5486677px;transform:rotate(270deg)}37.5001%{stroke-dashoffset:56.5486677px;transform:rotateX(180deg) rotate(161.5deg)}50%{stroke-dashoffset:268.606171575px;transform:rotateX(180deg) rotate(161.5deg)}50.0001%{stroke-dashoffset:268.606171575px;transform:rotate(180deg)}62.5%{stroke-dashoffset:56.5486677px;transform:rotate(180deg)}62.5001%{stroke-dashoffset:56.5486677px;transform:rotateX(180deg) rotate(251.5deg)}75%{stroke-dashoffset:268.606171575px;transform:rotateX(180deg) rotate(251.5deg)}75.0001%{stroke-dashoffset:268.606171575px;transform:rotate(90deg)}87.5%{stroke-dashoffset:56.5486677px;transform:rotate(90deg)}87.5001%{stroke-dashoffset:56.5486677px;transform:rotateX(180deg) rotate(341.5deg)}100%{stroke-dashoffset:268.606171575px;transform:rotateX(180deg) rotate(341.5deg)}}\n"], directives: [{ type: i2.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { type: i2.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.0-next.15", ngImport: i0, type: MatSpinner, decorators: [{
+            type: Component,
+            args: [{ selector: 'mat-spinner', host: {
+                        'role': 'progressbar',
+                        'mode': 'indeterminate',
+                        'class': 'mat-spinner mat-progress-spinner',
+                        '[class._mat-animation-noopable]': `_noopAnimations`,
+                        '[style.width.px]': 'diameter',
+                        '[style.height.px]': 'diameter',
+                    }, inputs: ['color'], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: "<!--\n  preserveAspectRatio of xMidYMid meet as the center of the viewport is the circle's\n  center. The center of the circle will remain at the center of the mat-progress-spinner\n  element containing the SVG.\n-->\n<!--\n  All children need to be hidden for screen readers in order to support ChromeVox.\n  More context in the issue: https://github.com/angular/components/issues/22165.\n-->\n<svg\n  [style.width.px]=\"diameter\"\n  [style.height.px]=\"diameter\"\n  [attr.viewBox]=\"_getViewBox()\"\n  preserveAspectRatio=\"xMidYMid meet\"\n  focusable=\"false\"\n  [ngSwitch]=\"mode === 'indeterminate'\"\n  aria-hidden=\"true\">\n\n  <!--\n    Technically we can reuse the same `circle` element, however Safari has an issue that breaks\n    the SVG rendering in determinate mode, after switching between indeterminate and determinate.\n    Using a different element avoids the issue. An alternative to this is adding `display: none`\n    for a split second and then removing it when switching between modes, but it's hard to know\n    for how long to hide the element and it can cause the UI to blink.\n  -->\n  <circle\n    *ngSwitchCase=\"true\"\n    cx=\"50%\"\n    cy=\"50%\"\n    [attr.r]=\"_getCircleRadius()\"\n    [style.animation-name]=\"'mat-progress-spinner-stroke-rotate-' + _spinnerAnimationLabel\"\n    [style.stroke-dashoffset.px]=\"_getStrokeDashOffset()\"\n    [style.stroke-dasharray.px]=\"_getStrokeCircumference()\"\n    [style.stroke-width.%]=\"_getCircleStrokeWidth()\"></circle>\n\n  <circle\n    *ngSwitchCase=\"false\"\n    cx=\"50%\"\n    cy=\"50%\"\n    [attr.r]=\"_getCircleRadius()\"\n    [style.stroke-dashoffset.px]=\"_getStrokeDashOffset()\"\n    [style.stroke-dasharray.px]=\"_getStrokeCircumference()\"\n    [style.stroke-width.%]=\"_getCircleStrokeWidth()\"></circle>\n</svg>\n", styles: [".mat-progress-spinner{display:block;position:relative;overflow:hidden}.mat-progress-spinner svg{position:absolute;transform:rotate(-90deg);top:0;left:0;transform-origin:center;overflow:visible}.mat-progress-spinner circle{fill:transparent;transform-origin:center;transition:stroke-dashoffset 225ms linear}._mat-animation-noopable.mat-progress-spinner circle{transition:none;animation:none}.cdk-high-contrast-active .mat-progress-spinner circle{stroke:CanvasText}.mat-progress-spinner.mat-progress-spinner-indeterminate-animation[mode=indeterminate] svg{animation:mat-progress-spinner-linear-rotate 2000ms linear infinite}._mat-animation-noopable.mat-progress-spinner.mat-progress-spinner-indeterminate-animation[mode=indeterminate] svg{transition:none;animation:none}.mat-progress-spinner.mat-progress-spinner-indeterminate-animation[mode=indeterminate] circle{transition-property:stroke;animation-duration:4000ms;animation-timing-function:cubic-bezier(0.35, 0, 0.25, 1);animation-iteration-count:infinite}._mat-animation-noopable.mat-progress-spinner.mat-progress-spinner-indeterminate-animation[mode=indeterminate] circle{transition:none;animation:none}@keyframes mat-progress-spinner-linear-rotate{0%{transform:rotate(0deg)}100%{transform:rotate(360deg)}}@keyframes mat-progress-spinner-stroke-rotate-100{0%{stroke-dashoffset:268.606171575px;transform:rotate(0)}12.5%{stroke-dashoffset:56.5486677px;transform:rotate(0)}12.5001%{stroke-dashoffset:56.5486677px;transform:rotateX(180deg) rotate(72.5deg)}25%{stroke-dashoffset:268.606171575px;transform:rotateX(180deg) rotate(72.5deg)}25.0001%{stroke-dashoffset:268.606171575px;transform:rotate(270deg)}37.5%{stroke-dashoffset:56.5486677px;transform:rotate(270deg)}37.5001%{stroke-dashoffset:56.5486677px;transform:rotateX(180deg) rotate(161.5deg)}50%{stroke-dashoffset:268.606171575px;transform:rotateX(180deg) rotate(161.5deg)}50.0001%{stroke-dashoffset:268.606171575px;transform:rotate(180deg)}62.5%{stroke-dashoffset:56.5486677px;transform:rotate(180deg)}62.5001%{stroke-dashoffset:56.5486677px;transform:rotateX(180deg) rotate(251.5deg)}75%{stroke-dashoffset:268.606171575px;transform:rotateX(180deg) rotate(251.5deg)}75.0001%{stroke-dashoffset:268.606171575px;transform:rotate(90deg)}87.5%{stroke-dashoffset:56.5486677px;transform:rotate(90deg)}87.5001%{stroke-dashoffset:56.5486677px;transform:rotateX(180deg) rotate(341.5deg)}100%{stroke-dashoffset:268.606171575px;transform:rotateX(180deg) rotate(341.5deg)}}\n"] }]
+        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i1.Platform }, { type: undefined, decorators: [{
+                    type: Optional
+                }, {
+                    type: Inject,
+                    args: [DOCUMENT]
+                }] }, { type: undefined, decorators: [{
+                    type: Optional
+                }, {
+                    type: Inject,
+                    args: [ANIMATION_MODULE_TYPE]
+                }] }, { type: undefined, decorators: [{
+                    type: Inject,
+                    args: [MAT_PROGRESS_SPINNER_DEFAULT_OPTIONS]
+                }] }]; } });
+
+/**
+ * @license
+ * Copyright Google LLC All Rights Reserved.
+ *
+ * Use of this source code is governed by an MIT-style license that can be
+ * found in the LICENSE file at https://angular.io/license
+ */
+class MatProgressSpinnerModule {
+}
+MatProgressSpinnerModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.0-next.15", ngImport: i0, type: MatProgressSpinnerModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+MatProgressSpinnerModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.0.0-next.15", ngImport: i0, type: MatProgressSpinnerModule, declarations: [MatProgressSpinner,
+        MatSpinner], imports: [MatCommonModule, CommonModule], exports: [MatProgressSpinner,
+        MatSpinner,
+        MatCommonModule] });
+MatProgressSpinnerModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.0.0-next.15", ngImport: i0, type: MatProgressSpinnerModule, imports: [[MatCommonModule, CommonModule], MatCommonModule] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.0-next.15", ngImport: i0, type: MatProgressSpinnerModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    imports: [MatCommonModule, CommonModule],
+                    exports: [
+                        MatProgressSpinner,
+                        MatSpinner,
+                        MatCommonModule
+                    ],
+                    declarations: [
+                        MatProgressSpinner,
+                        MatSpinner
+                    ],
+                }]
+        }] });
+
+/**
+ * @license
+ * Copyright Google LLC All Rights Reserved.
+ *
+ * Use of this source code is governed by an MIT-style license that can be
+ * found in the LICENSE file at https://angular.io/license
+ */
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { MAT_PROGRESS_SPINNER_DEFAULT_OPTIONS, MAT_PROGRESS_SPINNER_DEFAULT_OPTIONS_FACTORY, MatProgressSpinner, MatProgressSpinnerModule, MatSpinner };
+//# sourceMappingURL=progress-spinner.mjs.map

package/fesm2020/progress-spinner.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"progress-spinner.mjs","sources":["../../../../../../src/material/progress-spinner/progress-spinner.ts","../../../../../../src/material/progress-spinner/progress-spinner.html","../../../../../../src/material/progress-spinner/progress-spinner-module.ts","../../../../../../src/material/progress-spinner/public-api.ts","../../../../../../src/material/progress-spinner/index.ts"],"sourcesContent":["/**\n * @license\n * Copyright Google LLC All Rights Reserved.\n *\n * Use of this source code is governed by an MIT-style license that can be\n * found in the LICENSE file at https://angular.io/license\n */\n\nimport {coerceNumberProperty, NumberInput} from '@angular/cdk/coercion';\nimport {Platform, _getShadowRoot} from '@angular/cdk/platform';\nimport {DOCUMENT} from '@angular/common';\nimport {\n  ChangeDetectionStrategy,\n  Component,\n  ElementRef,\n  Inject,\n  InjectionToken,\n  Input,\n  Optional,\n  ViewEncapsulation,\n  OnInit,\n} from '@angular/core';\nimport {CanColor, mixinColor} from '@angular/material/core';\nimport {ANIMATION_MODULE_TYPE} from '@angular/platform-browser/animations';\n\n\n/** Possible mode for a progress spinner. */\nexport type ProgressSpinnerMode = 'determinate' | 'indeterminate';\n\n/**\n * Base reference size of the spinner.\n * @docs-private\n */\nconst BASE_SIZE = 100;\n\n/**\n * Base reference stroke width of the spinner.\n * @docs-private\n */\nconst BASE_STROKE_WIDTH = 10;\n\n// Boilerplate for applying mixins to MatProgressSpinner.\n/** @docs-private */\nconst _MatProgressSpinnerBase = mixinColor(class {\n  constructor(public _elementRef: ElementRef) {}\n}, 'primary');\n\n/** Default `mat-progress-spinner` options that can be overridden. */\nexport interface MatProgressSpinnerDefaultOptions {\n  /** Diameter of the spinner. */\n  diameter?: number;\n  /** Width of the spinner's stroke. */\n  strokeWidth?: number;\n  /**\n   * Whether the animations should be force to be enabled, ignoring if the current environment is\n   * using NoopAnimationsModule.\n   */\n  _forceAnimations?: boolean;\n}\n\n/** Injection token to be used to override the default options for `mat-progress-spinner`. */\nexport const MAT_PROGRESS_SPINNER_DEFAULT_OPTIONS =\n    new InjectionToken<MatProgressSpinnerDefaultOptions>('mat-progress-spinner-default-options', {\n      providedIn: 'root',\n      factory: MAT_PROGRESS_SPINNER_DEFAULT_OPTIONS_FACTORY,\n    });\n\n/** @docs-private */\nexport function MAT_PROGRESS_SPINNER_DEFAULT_OPTIONS_FACTORY(): MatProgressSpinnerDefaultOptions {\n  return {diameter: BASE_SIZE};\n}\n\n// .0001 percentage difference is necessary in order to avoid unwanted animation frames\n// for example because the animation duration is 4 seconds, .1% accounts to 4ms\n// which are enough to see the flicker described in\n// https://github.com/angular/components/issues/8984\nconst INDETERMINATE_ANIMATION_TEMPLATE = `\n @keyframes mat-progress-spinner-stroke-rotate-DIAMETER {\n    0%      { stroke-dashoffset: START_VALUE;  transform: rotate(0); }\n    12.5%   { stroke-dashoffset: END_VALUE;    transform: rotate(0); }\n    12.5001%  { stroke-dashoffset: END_VALUE;    transform: rotateX(180deg) rotate(72.5deg); }\n    25%     { stroke-dashoffset: START_VALUE;  transform: rotateX(180deg) rotate(72.5deg); }\n\n    25.0001%   { stroke-dashoffset: START_VALUE;  transform: rotate(270deg); }\n    37.5%   { stroke-dashoffset: END_VALUE;    transform: rotate(270deg); }\n    37.5001%  { stroke-dashoffset: END_VALUE;    transform: rotateX(180deg) rotate(161.5deg); }\n    50%     { stroke-dashoffset: START_VALUE;  transform: rotateX(180deg) rotate(161.5deg); }\n\n    50.0001%  { stroke-dashoffset: START_VALUE;  transform: rotate(180deg); }\n    62.5%   { stroke-dashoffset: END_VALUE;    transform: rotate(180deg); }\n    62.5001%  { stroke-dashoffset: END_VALUE;    transform: rotateX(180deg) rotate(251.5deg); }\n    75%     { stroke-dashoffset: START_VALUE;  transform: rotateX(180deg) rotate(251.5deg); }\n\n    75.0001%  { stroke-dashoffset: START_VALUE;  transform: rotate(90deg); }\n    87.5%   { stroke-dashoffset: END_VALUE;    transform: rotate(90deg); }\n    87.5001%  { stroke-dashoffset: END_VALUE;    transform: rotateX(180deg) rotate(341.5deg); }\n    100%    { stroke-dashoffset: START_VALUE;  transform: rotateX(180deg) rotate(341.5deg); }\n  }\n`;\n\n/**\n * `<mat-progress-spinner>` component.\n */\n@Component({\n  selector: 'mat-progress-spinner',\n  exportAs: 'matProgressSpinner',\n  host: {\n    'role': 'progressbar',\n    'class': 'mat-progress-spinner',\n    // set tab index to -1 so screen readers will read the aria-label\n    // Note: there is a known issue with JAWS that does not read progressbar aria labels on FireFox\n    'tabindex': '-1',\n    '[class._mat-animation-noopable]': `_noopAnimations`,\n    '[style.width.px]': 'diameter',\n    '[style.height.px]': 'diameter',\n    '[attr.aria-valuemin]': 'mode === \"determinate\" ? 0 : null',\n    '[attr.aria-valuemax]': 'mode === \"determinate\" ? 100 : null',\n    '[attr.aria-valuenow]': 'mode === \"determinate\" ? value : null',\n    '[attr.mode]': 'mode',\n  },\n  inputs: ['color'],\n  templateUrl: 'progress-spinner.html',\n  styleUrls: ['progress-spinner.css'],\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  encapsulation: ViewEncapsulation.None,\n})\nexport class MatProgressSpinner extends _MatProgressSpinnerBase implements OnInit, CanColor {\n  private _diameter = BASE_SIZE;\n  private _value = 0;\n  private _strokeWidth: number;\n\n  /**\n   * Element to which we should add the generated style tags for the indeterminate animation.\n   * For most elements this is the document, but for the ones in the Shadow DOM we need to\n   * use the shadow root.\n   */\n  private _styleRoot: Node;\n\n  /**\n   * Tracks diameters of existing instances to de-dupe generated styles (default d = 100).\n   * We need to keep track of which elements the diameters were attached to, because for\n   * elements in the Shadow DOM the style tags are attached to the shadow root, rather\n   * than the document head.\n   */\n  private static _diameters = new WeakMap<Node, Set<number>>();\n\n  /** Whether the _mat-animation-noopable class should be applied, disabling animations.  */\n  _noopAnimations: boolean;\n\n  /** A string that is used for setting the spinner animation-name CSS property */\n  _spinnerAnimationLabel: string;\n\n  /** The diameter of the progress spinner (will set width and height of svg). */\n  @Input()\n  get diameter(): number { return this._diameter; }\n  set diameter(size: number) {\n    this._diameter = coerceNumberProperty(size);\n    this._spinnerAnimationLabel = this._getSpinnerAnimationLabel();\n\n    // If this is set before `ngOnInit`, the style root may not have been resolved yet.\n    if (this._styleRoot) {\n      this._attachStyleNode();\n    }\n  }\n\n  /** Stroke width of the progress spinner. */\n  @Input()\n  get strokeWidth(): number {\n    return this._strokeWidth || this.diameter / 10;\n  }\n  set strokeWidth(value: number) {\n    this._strokeWidth = coerceNumberProperty(value);\n  }\n\n  /** Mode of the progress circle */\n  @Input() mode: ProgressSpinnerMode = 'determinate';\n\n  /** Value of the progress circle. */\n  @Input()\n  get value(): number {\n    return this.mode === 'determinate' ? this._value : 0;\n  }\n  set value(newValue: number) {\n    this._value = Math.max(0, Math.min(100, coerceNumberProperty(newValue)));\n  }\n\n  constructor(elementRef: ElementRef<HTMLElement>,\n              /**\n               * @deprecated `_platform` parameter no longer being used.\n               * @breaking-change 14.0.0\n               */\n              _platform: Platform,\n              @Optional() @Inject(DOCUMENT) private _document: any,\n              @Optional() @Inject(ANIMATION_MODULE_TYPE) animationMode: string,\n              @Inject(MAT_PROGRESS_SPINNER_DEFAULT_OPTIONS)\n                  defaults?: MatProgressSpinnerDefaultOptions) {\n\n    super(elementRef);\n\n    const trackedDiameters = MatProgressSpinner._diameters;\n    this._spinnerAnimationLabel = this._getSpinnerAnimationLabel();\n\n    // The base size is already inserted via the component's structural styles. We still\n    // need to track it so we don't end up adding the same styles again.\n    if (!trackedDiameters.has(_document.head)) {\n      trackedDiameters.set(_document.head, new Set<number>([BASE_SIZE]));\n    }\n\n    this._noopAnimations = animationMode === 'NoopAnimations' &&\n        (!!defaults && !defaults._forceAnimations);\n\n    if (defaults) {\n      if (defaults.diameter) {\n        this.diameter = defaults.diameter;\n      }\n\n      if (defaults.strokeWidth) {\n        this.strokeWidth = defaults.strokeWidth;\n      }\n    }\n  }\n\n  ngOnInit() {\n    const element = this._elementRef.nativeElement;\n\n    // Note that we need to look up the root node in ngOnInit, rather than the constructor, because\n    // Angular seems to create the element outside the shadow root and then moves it inside, if the\n    // node is inside an `ngIf` and a ShadowDom-encapsulated component.\n    this._styleRoot = _getShadowRoot(element) || this._document.head;\n    this._attachStyleNode();\n    element.classList.add('mat-progress-spinner-indeterminate-animation');\n  }\n\n  /** The radius of the spinner, adjusted for stroke width. */\n  _getCircleRadius() {\n    return (this.diameter - BASE_STROKE_WIDTH) / 2;\n  }\n\n  /** The view box of the spinner's svg element. */\n  _getViewBox() {\n    const viewBox = this._getCircleRadius() * 2 + this.strokeWidth;\n    return `0 0 ${viewBox} ${viewBox}`;\n  }\n\n  /** The stroke circumference of the svg circle. */\n  _getStrokeCircumference(): number {\n    return 2 * Math.PI * this._getCircleRadius();\n  }\n\n  /** The dash offset of the svg circle. */\n  _getStrokeDashOffset() {\n    if (this.mode === 'determinate') {\n      return this._getStrokeCircumference() * (100 - this._value) / 100;\n    }\n\n    return null;\n  }\n\n  /** Stroke width of the circle in percent. */\n  _getCircleStrokeWidth() {\n    return this.strokeWidth / this.diameter * 100;\n  }\n\n  /** Dynamically generates a style tag containing the correct animation for this diameter. */\n  private _attachStyleNode(): void {\n    const styleRoot = this._styleRoot;\n    const currentDiameter = this._diameter;\n    const diameters = MatProgressSpinner._diameters;\n    let diametersForElement = diameters.get(styleRoot);\n\n    if (!diametersForElement || !diametersForElement.has(currentDiameter)) {\n      const styleTag: HTMLStyleElement = this._document.createElement('style');\n      styleTag.setAttribute('mat-spinner-animation', this._spinnerAnimationLabel);\n      styleTag.textContent = this._getAnimationText();\n      styleRoot.appendChild(styleTag);\n\n      if (!diametersForElement) {\n        diametersForElement = new Set<number>();\n        diameters.set(styleRoot, diametersForElement);\n      }\n\n      diametersForElement.add(currentDiameter);\n    }\n  }\n\n  /** Generates animation styles adjusted for the spinner's diameter. */\n  private _getAnimationText(): string {\n    const strokeCircumference = this._getStrokeCircumference();\n    return INDETERMINATE_ANIMATION_TEMPLATE\n        // Animation should begin at 5% and end at 80%\n        .replace(/START_VALUE/g, `${0.95 * strokeCircumference}`)\n        .replace(/END_VALUE/g, `${0.2 * strokeCircumference}`)\n        .replace(/DIAMETER/g, `${this._spinnerAnimationLabel}`);\n  }\n\n  /** Returns the circle diameter formatted for use with the animation-name CSS property. */\n  private _getSpinnerAnimationLabel(): string {\n    // The string of a float point number will include a period ‘.’ character,\n    // which is not valid for a CSS animation-name.\n    return this.diameter.toString().replace('.', '_');\n  }\n\n  static ngAcceptInputType_diameter: NumberInput;\n  static ngAcceptInputType_strokeWidth: NumberInput;\n  static ngAcceptInputType_value: NumberInput;\n}\n\n\n/**\n * `<mat-spinner>` component.\n *\n * This is a component definition to be used as a convenience reference to create an\n * indeterminate `<mat-progress-spinner>` instance.\n */\n@Component({\n  selector: 'mat-spinner',\n  host: {\n    'role': 'progressbar',\n    'mode': 'indeterminate',\n    'class': 'mat-spinner mat-progress-spinner',\n    '[class._mat-animation-noopable]': `_noopAnimations`,\n    '[style.width.px]': 'diameter',\n    '[style.height.px]': 'diameter',\n  },\n  inputs: ['color'],\n  templateUrl: 'progress-spinner.html',\n  styleUrls: ['progress-spinner.css'],\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  encapsulation: ViewEncapsulation.None,\n})\nexport class MatSpinner extends MatProgressSpinner {\n  constructor(elementRef: ElementRef<HTMLElement>, platform: Platform,\n              @Optional() @Inject(DOCUMENT) document: any,\n              @Optional() @Inject(ANIMATION_MODULE_TYPE) animationMode: string,\n              @Inject(MAT_PROGRESS_SPINNER_DEFAULT_OPTIONS)\n                  defaults?: MatProgressSpinnerDefaultOptions) {\n    super(elementRef, platform, document, animationMode, defaults);\n    this.mode = 'indeterminate';\n  }\n}\n","<!--\n  preserveAspectRatio of xMidYMid meet as the center of the viewport is the circle's\n  center. The center of the circle will remain at the center of the mat-progress-spinner\n  element containing the SVG.\n-->\n<!--\n  All children need to be hidden for screen readers in order to support ChromeVox.\n  More context in the issue: https://github.com/angular/components/issues/22165.\n-->\n<svg\n  [style.width.px]=\"diameter\"\n  [style.height.px]=\"diameter\"\n  [attr.viewBox]=\"_getViewBox()\"\n  preserveAspectRatio=\"xMidYMid meet\"\n  focusable=\"false\"\n  [ngSwitch]=\"mode === 'indeterminate'\"\n  aria-hidden=\"true\">\n\n  <!--\n    Technically we can reuse the same `circle` element, however Safari has an issue that breaks\n    the SVG rendering in determinate mode, after switching between indeterminate and determinate.\n    Using a different element avoids the issue. An alternative to this is adding `display: none`\n    for a split second and then removing it when switching between modes, but it's hard to know\n    for how long to hide the element and it can cause the UI to blink.\n  -->\n  <circle\n    *ngSwitchCase=\"true\"\n    cx=\"50%\"\n    cy=\"50%\"\n    [attr.r]=\"_getCircleRadius()\"\n    [style.animation-name]=\"'mat-progress-spinner-stroke-rotate-' + _spinnerAnimationLabel\"\n    [style.stroke-dashoffset.px]=\"_getStrokeDashOffset()\"\n    [style.stroke-dasharray.px]=\"_getStrokeCircumference()\"\n    [style.stroke-width.%]=\"_getCircleStrokeWidth()\"></circle>\n\n  <circle\n    *ngSwitchCase=\"false\"\n    cx=\"50%\"\n    cy=\"50%\"\n    [attr.r]=\"_getCircleRadius()\"\n    [style.stroke-dashoffset.px]=\"_getStrokeDashOffset()\"\n    [style.stroke-dasharray.px]=\"_getStrokeCircumference()\"\n    [style.stroke-width.%]=\"_getCircleStrokeWidth()\"></circle>\n</svg>\n","/**\n * @license\n * Copyright Google LLC All Rights Reserved.\n *\n * Use of this source code is governed by an MIT-style license that can be\n * found in the LICENSE file at https://angular.io/license\n */\nimport {NgModule} from '@angular/core';\nimport {CommonModule} from '@angular/common';\nimport {MatCommonModule} from '@angular/material/core';\nimport {MatProgressSpinner, MatSpinner} from './progress-spinner';\n\n\n@NgModule({\n  imports: [MatCommonModule, CommonModule],\n  exports: [\n    MatProgressSpinner,\n    MatSpinner,\n    MatCommonModule\n  ],\n  declarations: [\n    MatProgressSpinner,\n    MatSpinner\n  ],\n})\nexport class MatProgressSpinnerModule {}\n","/**\n * @license\n * Copyright Google LLC All Rights Reserved.\n *\n * Use of this source code is governed by an MIT-style license that can be\n * found in the LICENSE file at https://angular.io/license\n */\n\nexport * from './progress-spinner-module';\nexport {\n  MatProgressSpinner,\n  MatSpinner,\n  MAT_PROGRESS_SPINNER_DEFAULT_OPTIONS,\n  ProgressSpinnerMode,\n  MatProgressSpinnerDefaultOptions,\n  MAT_PROGRESS_SPINNER_DEFAULT_OPTIONS_FACTORY,\n} from './progress-spinner';\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":"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"}