@angular/material
Version:
Angular Material
259 lines (255 loc) • 20.8 kB
JavaScript
import * as i0 from '@angular/core';
import { InjectionToken, inject, ElementRef, numberAttribute, Component, ChangeDetectionStrategy, ViewEncapsulation, Input, ViewChild, NgModule } from '@angular/core';
import { NgTemplateOutlet } from '@angular/common';
import { _getAnimationsState } from './_animation-chunk.mjs';
import { BidiModule } from '@angular/cdk/bidi';
import '@angular/cdk/layout';
const MAT_PROGRESS_SPINNER_DEFAULT_OPTIONS = new InjectionToken('mat-progress-spinner-default-options', {
providedIn: 'root',
factory: () => ({
diameter: BASE_SIZE
})
});
const BASE_SIZE = 100;
const BASE_STROKE_WIDTH = 10;
class MatProgressSpinner {
_elementRef = inject(ElementRef);
_noopAnimations;
get color() {
return this._color || this._defaultColor;
}
set color(value) {
this._color = value;
}
_color;
_defaultColor = 'primary';
_determinateCircle;
constructor() {
const defaults = inject(MAT_PROGRESS_SPINNER_DEFAULT_OPTIONS);
const animationsState = _getAnimationsState();
const element = this._elementRef.nativeElement;
this._noopAnimations = animationsState === 'di-disabled' && !!defaults && !defaults._forceAnimations;
this.mode = element.nodeName.toLowerCase() === 'mat-spinner' ? 'indeterminate' : 'determinate';
if (!this._noopAnimations && animationsState === 'reduced-motion') {
element.classList.add('mat-progress-spinner-reduced-motion');
}
if (defaults) {
if (defaults.color) {
this.color = this._defaultColor = defaults.color;
}
if (defaults.diameter) {
this.diameter = defaults.diameter;
}
if (defaults.strokeWidth) {
this.strokeWidth = defaults.strokeWidth;
}
}
}
mode;
get value() {
return this.mode === 'determinate' ? this._value : 0;
}
set value(v) {
this._value = Math.max(0, Math.min(100, v || 0));
}
_value = 0;
get diameter() {
return this._diameter;
}
set diameter(size) {
this._diameter = size || 0;
}
_diameter = BASE_SIZE;
get strokeWidth() {
return this._strokeWidth ?? this.diameter / 10;
}
set strokeWidth(value) {
this._strokeWidth = value || 0;
}
_strokeWidth;
_circleRadius() {
return (this.diameter - BASE_STROKE_WIDTH) / 2;
}
_viewBox() {
const viewBox = this._circleRadius() * 2 + this.strokeWidth;
return `0 0 ${viewBox} ${viewBox}`;
}
_strokeCircumference() {
return 2 * Math.PI * this._circleRadius();
}
_strokeDashOffset() {
if (this.mode === 'determinate') {
return this._strokeCircumference() * (100 - this._value) / 100;
}
return null;
}
_circleStrokeWidth() {
return this.strokeWidth / this.diameter * 100;
}
static ɵfac = i0.ɵɵngDeclareFactory({
minVersion: "12.0.0",
version: "21.0.0",
ngImport: i0,
type: MatProgressSpinner,
deps: [],
target: i0.ɵɵFactoryTarget.Component
});
static ɵcmp = i0.ɵɵngDeclareComponent({
minVersion: "16.1.0",
version: "21.0.0",
type: MatProgressSpinner,
isStandalone: true,
selector: "mat-progress-spinner, mat-spinner",
inputs: {
color: "color",
mode: "mode",
value: ["value", "value", numberAttribute],
diameter: ["diameter", "diameter", numberAttribute],
strokeWidth: ["strokeWidth", "strokeWidth", numberAttribute]
},
host: {
attributes: {
"role": "progressbar",
"tabindex": "-1"
},
properties: {
"class": "\"mat-\" + color",
"class._mat-animation-noopable": "_noopAnimations",
"class.mdc-circular-progress--indeterminate": "mode === \"indeterminate\"",
"style.width.px": "diameter",
"style.height.px": "diameter",
"style.--mat-progress-spinner-size": "diameter + \"px\"",
"style.--mat-progress-spinner-active-indicator-width": "diameter + \"px\"",
"attr.aria-valuemin": "0",
"attr.aria-valuemax": "100",
"attr.aria-valuenow": "mode === \"determinate\" ? value : null",
"attr.mode": "mode"
},
classAttribute: "mat-mdc-progress-spinner mdc-circular-progress"
},
viewQueries: [{
propertyName: "_determinateCircle",
first: true,
predicate: ["determinateSpinner"],
descendants: true
}],
exportAs: ["matProgressSpinner"],
ngImport: i0,
template: "<ng-template #circle>\n <svg [attr.viewBox]=\"_viewBox()\" class=\"mdc-circular-progress__indeterminate-circle-graphic\"\n xmlns=\"http://www.w3.org/2000/svg\" focusable=\"false\">\n <circle [attr.r]=\"_circleRadius()\"\n [style.stroke-dasharray.px]=\"_strokeCircumference()\"\n [style.stroke-dashoffset.px]=\"_strokeCircumference() / 2\"\n [style.stroke-width.%]=\"_circleStrokeWidth()\"\n cx=\"50%\" cy=\"50%\"/>\n </svg>\n</ng-template>\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<div class=\"mdc-circular-progress__determinate-container\" aria-hidden=\"true\" #determinateSpinner>\n <svg [attr.viewBox]=\"_viewBox()\" class=\"mdc-circular-progress__determinate-circle-graphic\"\n xmlns=\"http://www.w3.org/2000/svg\" focusable=\"false\">\n <circle [attr.r]=\"_circleRadius()\"\n [style.stroke-dasharray.px]=\"_strokeCircumference()\"\n [style.stroke-dashoffset.px]=\"_strokeDashOffset()\"\n [style.stroke-width.%]=\"_circleStrokeWidth()\"\n class=\"mdc-circular-progress__determinate-circle\"\n cx=\"50%\" cy=\"50%\"/>\n </svg>\n</div>\n<!--TODO: figure out why there are 3 separate svgs-->\n<div class=\"mdc-circular-progress__indeterminate-container\" aria-hidden=\"true\">\n <div class=\"mdc-circular-progress__spinner-layer\">\n <div class=\"mdc-circular-progress__circle-clipper mdc-circular-progress__circle-left\">\n <ng-container [ngTemplateOutlet]=\"circle\"></ng-container>\n </div>\n <div class=\"mdc-circular-progress__gap-patch\">\n <ng-container [ngTemplateOutlet]=\"circle\"></ng-container>\n </div>\n <div class=\"mdc-circular-progress__circle-clipper mdc-circular-progress__circle-right\">\n <ng-container [ngTemplateOutlet]=\"circle\"></ng-container>\n </div>\n </div>\n</div>\n",
styles: [".mat-mdc-progress-spinner{--mat-progress-spinner-animation-multiplier: 1;display:block;overflow:hidden;line-height:0;position:relative;direction:ltr;transition:opacity 250ms cubic-bezier(0.4, 0, 0.6, 1)}.mat-mdc-progress-spinner circle{stroke-width:var(--mat-progress-spinner-active-indicator-width, 4px)}.mat-mdc-progress-spinner._mat-animation-noopable,.mat-mdc-progress-spinner._mat-animation-noopable .mdc-circular-progress__determinate-circle{transition:none !important}.mat-mdc-progress-spinner._mat-animation-noopable .mdc-circular-progress__indeterminate-circle-graphic,.mat-mdc-progress-spinner._mat-animation-noopable .mdc-circular-progress__spinner-layer,.mat-mdc-progress-spinner._mat-animation-noopable .mdc-circular-progress__indeterminate-container{animation:none !important}.mat-mdc-progress-spinner._mat-animation-noopable .mdc-circular-progress__indeterminate-container circle{stroke-dasharray:0 !important}@media(forced-colors: active){.mat-mdc-progress-spinner .mdc-circular-progress__indeterminate-circle-graphic,.mat-mdc-progress-spinner .mdc-circular-progress__determinate-circle{stroke:currentColor;stroke:CanvasText}}.mat-progress-spinner-reduced-motion{--mat-progress-spinner-animation-multiplier: 1.25}.mdc-circular-progress__determinate-container,.mdc-circular-progress__indeterminate-circle-graphic,.mdc-circular-progress__indeterminate-container,.mdc-circular-progress__spinner-layer{position:absolute;width:100%;height:100%}.mdc-circular-progress__determinate-container{transform:rotate(-90deg)}.mdc-circular-progress--indeterminate .mdc-circular-progress__determinate-container{opacity:0}.mdc-circular-progress__indeterminate-container{font-size:0;letter-spacing:0;white-space:nowrap;opacity:0}.mdc-circular-progress--indeterminate .mdc-circular-progress__indeterminate-container{opacity:1;animation:mdc-circular-progress-container-rotate calc(1568.2352941176ms*var(--mat-progress-spinner-animation-multiplier)) linear infinite}.mdc-circular-progress__determinate-circle-graphic,.mdc-circular-progress__indeterminate-circle-graphic{fill:rgba(0,0,0,0)}.mat-mdc-progress-spinner .mdc-circular-progress__determinate-circle,.mat-mdc-progress-spinner .mdc-circular-progress__indeterminate-circle-graphic{stroke:var(--mat-progress-spinner-active-indicator-color, var(--mat-sys-primary))}@media(forced-colors: active){.mat-mdc-progress-spinner .mdc-circular-progress__determinate-circle,.mat-mdc-progress-spinner .mdc-circular-progress__indeterminate-circle-graphic{stroke:CanvasText}}.mdc-circular-progress__determinate-circle{transition:stroke-dashoffset 500ms cubic-bezier(0, 0, 0.2, 1)}.mdc-circular-progress__gap-patch{position:absolute;top:0;left:47.5%;box-sizing:border-box;width:5%;height:100%;overflow:hidden}.mdc-circular-progress__gap-patch .mdc-circular-progress__indeterminate-circle-graphic{left:-900%;width:2000%;transform:rotate(180deg)}.mdc-circular-progress__circle-clipper .mdc-circular-progress__indeterminate-circle-graphic{width:200%}.mdc-circular-progress__circle-right .mdc-circular-progress__indeterminate-circle-graphic{left:-100%}.mdc-circular-progress--indeterminate .mdc-circular-progress__circle-left .mdc-circular-progress__indeterminate-circle-graphic{animation:mdc-circular-progress-left-spin calc(1333ms*var(--mat-progress-spinner-animation-multiplier)) cubic-bezier(0.4, 0, 0.2, 1) infinite both}.mdc-circular-progress--indeterminate .mdc-circular-progress__circle-right .mdc-circular-progress__indeterminate-circle-graphic{animation:mdc-circular-progress-right-spin calc(1333ms*var(--mat-progress-spinner-animation-multiplier)) cubic-bezier(0.4, 0, 0.2, 1) infinite both}.mdc-circular-progress__circle-clipper{display:inline-flex;position:relative;width:50%;height:100%;overflow:hidden}.mdc-circular-progress--indeterminate .mdc-circular-progress__spinner-layer{animation:mdc-circular-progress-spinner-layer-rotate calc(5332ms*var(--mat-progress-spinner-animation-multiplier)) cubic-bezier(0.4, 0, 0.2, 1) infinite both}@keyframes mdc-circular-progress-container-rotate{to{transform:rotate(360deg)}}@keyframes mdc-circular-progress-spinner-layer-rotate{12.5%{transform:rotate(135deg)}25%{transform:rotate(270deg)}37.5%{transform:rotate(405deg)}50%{transform:rotate(540deg)}62.5%{transform:rotate(675deg)}75%{transform:rotate(810deg)}87.5%{transform:rotate(945deg)}100%{transform:rotate(1080deg)}}@keyframes mdc-circular-progress-left-spin{from{transform:rotate(265deg)}50%{transform:rotate(130deg)}to{transform:rotate(265deg)}}@keyframes mdc-circular-progress-right-spin{from{transform:rotate(-265deg)}50%{transform:rotate(-130deg)}to{transform:rotate(-265deg)}}\n"],
dependencies: [{
kind: "directive",
type: NgTemplateOutlet,
selector: "[ngTemplateOutlet]",
inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"]
}],
changeDetection: i0.ChangeDetectionStrategy.OnPush,
encapsulation: i0.ViewEncapsulation.None
});
}
i0.ɵɵngDeclareClassMetadata({
minVersion: "12.0.0",
version: "21.0.0",
ngImport: i0,
type: MatProgressSpinner,
decorators: [{
type: Component,
args: [{
selector: 'mat-progress-spinner, mat-spinner',
exportAs: 'matProgressSpinner',
host: {
'role': 'progressbar',
'class': 'mat-mdc-progress-spinner mdc-circular-progress',
'tabindex': '-1',
'[class]': '"mat-" + color',
'[class._mat-animation-noopable]': `_noopAnimations`,
'[class.mdc-circular-progress--indeterminate]': 'mode === "indeterminate"',
'[style.width.px]': 'diameter',
'[style.height.px]': 'diameter',
'[style.--mat-progress-spinner-size]': 'diameter + "px"',
'[style.--mat-progress-spinner-active-indicator-width]': 'diameter + "px"',
'[attr.aria-valuemin]': '0',
'[attr.aria-valuemax]': '100',
'[attr.aria-valuenow]': 'mode === "determinate" ? value : null',
'[attr.mode]': 'mode'
},
changeDetection: ChangeDetectionStrategy.OnPush,
encapsulation: ViewEncapsulation.None,
imports: [NgTemplateOutlet],
template: "<ng-template #circle>\n <svg [attr.viewBox]=\"_viewBox()\" class=\"mdc-circular-progress__indeterminate-circle-graphic\"\n xmlns=\"http://www.w3.org/2000/svg\" focusable=\"false\">\n <circle [attr.r]=\"_circleRadius()\"\n [style.stroke-dasharray.px]=\"_strokeCircumference()\"\n [style.stroke-dashoffset.px]=\"_strokeCircumference() / 2\"\n [style.stroke-width.%]=\"_circleStrokeWidth()\"\n cx=\"50%\" cy=\"50%\"/>\n </svg>\n</ng-template>\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<div class=\"mdc-circular-progress__determinate-container\" aria-hidden=\"true\" #determinateSpinner>\n <svg [attr.viewBox]=\"_viewBox()\" class=\"mdc-circular-progress__determinate-circle-graphic\"\n xmlns=\"http://www.w3.org/2000/svg\" focusable=\"false\">\n <circle [attr.r]=\"_circleRadius()\"\n [style.stroke-dasharray.px]=\"_strokeCircumference()\"\n [style.stroke-dashoffset.px]=\"_strokeDashOffset()\"\n [style.stroke-width.%]=\"_circleStrokeWidth()\"\n class=\"mdc-circular-progress__determinate-circle\"\n cx=\"50%\" cy=\"50%\"/>\n </svg>\n</div>\n<!--TODO: figure out why there are 3 separate svgs-->\n<div class=\"mdc-circular-progress__indeterminate-container\" aria-hidden=\"true\">\n <div class=\"mdc-circular-progress__spinner-layer\">\n <div class=\"mdc-circular-progress__circle-clipper mdc-circular-progress__circle-left\">\n <ng-container [ngTemplateOutlet]=\"circle\"></ng-container>\n </div>\n <div class=\"mdc-circular-progress__gap-patch\">\n <ng-container [ngTemplateOutlet]=\"circle\"></ng-container>\n </div>\n <div class=\"mdc-circular-progress__circle-clipper mdc-circular-progress__circle-right\">\n <ng-container [ngTemplateOutlet]=\"circle\"></ng-container>\n </div>\n </div>\n</div>\n",
styles: [".mat-mdc-progress-spinner{--mat-progress-spinner-animation-multiplier: 1;display:block;overflow:hidden;line-height:0;position:relative;direction:ltr;transition:opacity 250ms cubic-bezier(0.4, 0, 0.6, 1)}.mat-mdc-progress-spinner circle{stroke-width:var(--mat-progress-spinner-active-indicator-width, 4px)}.mat-mdc-progress-spinner._mat-animation-noopable,.mat-mdc-progress-spinner._mat-animation-noopable .mdc-circular-progress__determinate-circle{transition:none !important}.mat-mdc-progress-spinner._mat-animation-noopable .mdc-circular-progress__indeterminate-circle-graphic,.mat-mdc-progress-spinner._mat-animation-noopable .mdc-circular-progress__spinner-layer,.mat-mdc-progress-spinner._mat-animation-noopable .mdc-circular-progress__indeterminate-container{animation:none !important}.mat-mdc-progress-spinner._mat-animation-noopable .mdc-circular-progress__indeterminate-container circle{stroke-dasharray:0 !important}@media(forced-colors: active){.mat-mdc-progress-spinner .mdc-circular-progress__indeterminate-circle-graphic,.mat-mdc-progress-spinner .mdc-circular-progress__determinate-circle{stroke:currentColor;stroke:CanvasText}}.mat-progress-spinner-reduced-motion{--mat-progress-spinner-animation-multiplier: 1.25}.mdc-circular-progress__determinate-container,.mdc-circular-progress__indeterminate-circle-graphic,.mdc-circular-progress__indeterminate-container,.mdc-circular-progress__spinner-layer{position:absolute;width:100%;height:100%}.mdc-circular-progress__determinate-container{transform:rotate(-90deg)}.mdc-circular-progress--indeterminate .mdc-circular-progress__determinate-container{opacity:0}.mdc-circular-progress__indeterminate-container{font-size:0;letter-spacing:0;white-space:nowrap;opacity:0}.mdc-circular-progress--indeterminate .mdc-circular-progress__indeterminate-container{opacity:1;animation:mdc-circular-progress-container-rotate calc(1568.2352941176ms*var(--mat-progress-spinner-animation-multiplier)) linear infinite}.mdc-circular-progress__determinate-circle-graphic,.mdc-circular-progress__indeterminate-circle-graphic{fill:rgba(0,0,0,0)}.mat-mdc-progress-spinner .mdc-circular-progress__determinate-circle,.mat-mdc-progress-spinner .mdc-circular-progress__indeterminate-circle-graphic{stroke:var(--mat-progress-spinner-active-indicator-color, var(--mat-sys-primary))}@media(forced-colors: active){.mat-mdc-progress-spinner .mdc-circular-progress__determinate-circle,.mat-mdc-progress-spinner .mdc-circular-progress__indeterminate-circle-graphic{stroke:CanvasText}}.mdc-circular-progress__determinate-circle{transition:stroke-dashoffset 500ms cubic-bezier(0, 0, 0.2, 1)}.mdc-circular-progress__gap-patch{position:absolute;top:0;left:47.5%;box-sizing:border-box;width:5%;height:100%;overflow:hidden}.mdc-circular-progress__gap-patch .mdc-circular-progress__indeterminate-circle-graphic{left:-900%;width:2000%;transform:rotate(180deg)}.mdc-circular-progress__circle-clipper .mdc-circular-progress__indeterminate-circle-graphic{width:200%}.mdc-circular-progress__circle-right .mdc-circular-progress__indeterminate-circle-graphic{left:-100%}.mdc-circular-progress--indeterminate .mdc-circular-progress__circle-left .mdc-circular-progress__indeterminate-circle-graphic{animation:mdc-circular-progress-left-spin calc(1333ms*var(--mat-progress-spinner-animation-multiplier)) cubic-bezier(0.4, 0, 0.2, 1) infinite both}.mdc-circular-progress--indeterminate .mdc-circular-progress__circle-right .mdc-circular-progress__indeterminate-circle-graphic{animation:mdc-circular-progress-right-spin calc(1333ms*var(--mat-progress-spinner-animation-multiplier)) cubic-bezier(0.4, 0, 0.2, 1) infinite both}.mdc-circular-progress__circle-clipper{display:inline-flex;position:relative;width:50%;height:100%;overflow:hidden}.mdc-circular-progress--indeterminate .mdc-circular-progress__spinner-layer{animation:mdc-circular-progress-spinner-layer-rotate calc(5332ms*var(--mat-progress-spinner-animation-multiplier)) cubic-bezier(0.4, 0, 0.2, 1) infinite both}@keyframes mdc-circular-progress-container-rotate{to{transform:rotate(360deg)}}@keyframes mdc-circular-progress-spinner-layer-rotate{12.5%{transform:rotate(135deg)}25%{transform:rotate(270deg)}37.5%{transform:rotate(405deg)}50%{transform:rotate(540deg)}62.5%{transform:rotate(675deg)}75%{transform:rotate(810deg)}87.5%{transform:rotate(945deg)}100%{transform:rotate(1080deg)}}@keyframes mdc-circular-progress-left-spin{from{transform:rotate(265deg)}50%{transform:rotate(130deg)}to{transform:rotate(265deg)}}@keyframes mdc-circular-progress-right-spin{from{transform:rotate(-265deg)}50%{transform:rotate(-130deg)}to{transform:rotate(-265deg)}}\n"]
}]
}],
ctorParameters: () => [],
propDecorators: {
color: [{
type: Input
}],
_determinateCircle: [{
type: ViewChild,
args: ['determinateSpinner']
}],
mode: [{
type: Input
}],
value: [{
type: Input,
args: [{
transform: numberAttribute
}]
}],
diameter: [{
type: Input,
args: [{
transform: numberAttribute
}]
}],
strokeWidth: [{
type: Input,
args: [{
transform: numberAttribute
}]
}]
}
});
const MatSpinner = MatProgressSpinner;
class MatProgressSpinnerModule {
static ɵfac = i0.ɵɵngDeclareFactory({
minVersion: "12.0.0",
version: "21.0.0",
ngImport: i0,
type: MatProgressSpinnerModule,
deps: [],
target: i0.ɵɵFactoryTarget.NgModule
});
static ɵmod = i0.ɵɵngDeclareNgModule({
minVersion: "14.0.0",
version: "21.0.0",
ngImport: i0,
type: MatProgressSpinnerModule,
imports: [MatProgressSpinner, MatSpinner],
exports: [MatProgressSpinner, MatSpinner, BidiModule]
});
static ɵinj = i0.ɵɵngDeclareInjector({
minVersion: "12.0.0",
version: "21.0.0",
ngImport: i0,
type: MatProgressSpinnerModule,
imports: [BidiModule]
});
}
i0.ɵɵngDeclareClassMetadata({
minVersion: "12.0.0",
version: "21.0.0",
ngImport: i0,
type: MatProgressSpinnerModule,
decorators: [{
type: NgModule,
args: [{
imports: [MatProgressSpinner, MatSpinner],
exports: [MatProgressSpinner, MatSpinner, BidiModule]
}]
}]
});
export { MAT_PROGRESS_SPINNER_DEFAULT_OPTIONS, MatProgressSpinner, MatProgressSpinnerModule, MatSpinner };
//# sourceMappingURL=progress-spinner.mjs.map