UNPKG

@angular/material

Version:
259 lines (255 loc) 22.4 kB
import * as i0 from '@angular/core'; import { InjectionToken, inject, ElementRef, numberAttribute, Input, ViewChild, ViewEncapsulation, ChangeDetectionStrategy, Component, 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: "22.0.0-next.5", ngImport: i0, type: MatProgressSpinner, deps: [], target: i0.ɵɵFactoryTarget.Component }); static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "22.0.0-next.5", 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 {\n --mat-progress-spinner-animation-multiplier: 1;\n display: block;\n overflow: hidden;\n line-height: 0;\n position: relative;\n direction: ltr;\n transition: opacity 250ms cubic-bezier(0.4, 0, 0.6, 1);\n}\n.mat-mdc-progress-spinner circle {\n stroke-width: var(--mat-progress-spinner-active-indicator-width, 4px);\n}\n.mat-mdc-progress-spinner._mat-animation-noopable, .mat-mdc-progress-spinner._mat-animation-noopable .mdc-circular-progress__determinate-circle {\n transition: none !important;\n}\n.mat-mdc-progress-spinner._mat-animation-noopable .mdc-circular-progress__indeterminate-circle-graphic,\n.mat-mdc-progress-spinner._mat-animation-noopable .mdc-circular-progress__spinner-layer,\n.mat-mdc-progress-spinner._mat-animation-noopable .mdc-circular-progress__indeterminate-container {\n animation: none !important;\n}\n.mat-mdc-progress-spinner._mat-animation-noopable .mdc-circular-progress__indeterminate-container circle {\n stroke-dasharray: 0 !important;\n}\n@media (forced-colors: active) {\n .mat-mdc-progress-spinner .mdc-circular-progress__indeterminate-circle-graphic,\n .mat-mdc-progress-spinner .mdc-circular-progress__determinate-circle {\n stroke: currentColor;\n stroke: CanvasText;\n }\n}\n\n.mat-progress-spinner-reduced-motion {\n --mat-progress-spinner-animation-multiplier: 1.25;\n}\n\n.mdc-circular-progress__determinate-container,\n.mdc-circular-progress__indeterminate-circle-graphic,\n.mdc-circular-progress__indeterminate-container,\n.mdc-circular-progress__spinner-layer {\n position: absolute;\n width: 100%;\n height: 100%;\n}\n\n.mdc-circular-progress__determinate-container {\n transform: rotate(-90deg);\n}\n.mdc-circular-progress--indeterminate .mdc-circular-progress__determinate-container {\n opacity: 0;\n}\n\n.mdc-circular-progress__indeterminate-container {\n font-size: 0;\n letter-spacing: 0;\n white-space: nowrap;\n opacity: 0;\n}\n.mdc-circular-progress--indeterminate .mdc-circular-progress__indeterminate-container {\n opacity: 1;\n animation: mdc-circular-progress-container-rotate calc(1568.2352941176ms * var(--mat-progress-spinner-animation-multiplier)) linear infinite;\n}\n\n.mdc-circular-progress__determinate-circle-graphic,\n.mdc-circular-progress__indeterminate-circle-graphic {\n fill: transparent;\n}\n\n.mat-mdc-progress-spinner .mdc-circular-progress__determinate-circle,\n.mat-mdc-progress-spinner .mdc-circular-progress__indeterminate-circle-graphic {\n stroke: var(--mat-progress-spinner-active-indicator-color, var(--mat-sys-primary));\n}\n@media (forced-colors: active) {\n .mat-mdc-progress-spinner .mdc-circular-progress__determinate-circle,\n .mat-mdc-progress-spinner .mdc-circular-progress__indeterminate-circle-graphic {\n stroke: CanvasText;\n }\n}\n\n.mdc-circular-progress__determinate-circle {\n transition: stroke-dashoffset 500ms cubic-bezier(0, 0, 0.2, 1);\n}\n\n.mdc-circular-progress__gap-patch {\n position: absolute;\n top: 0;\n left: 47.5%;\n box-sizing: border-box;\n width: 5%;\n height: 100%;\n overflow: hidden;\n}\n\n.mdc-circular-progress__gap-patch .mdc-circular-progress__indeterminate-circle-graphic {\n left: -900%;\n width: 2000%;\n transform: rotate(180deg);\n}\n.mdc-circular-progress__circle-clipper .mdc-circular-progress__indeterminate-circle-graphic {\n width: 200%;\n}\n.mdc-circular-progress__circle-right .mdc-circular-progress__indeterminate-circle-graphic {\n left: -100%;\n}\n.mdc-circular-progress--indeterminate .mdc-circular-progress__circle-left .mdc-circular-progress__indeterminate-circle-graphic {\n animation: mdc-circular-progress-left-spin calc(1333ms * var(--mat-progress-spinner-animation-multiplier)) cubic-bezier(0.4, 0, 0.2, 1) infinite both;\n}\n.mdc-circular-progress--indeterminate .mdc-circular-progress__circle-right .mdc-circular-progress__indeterminate-circle-graphic {\n animation: mdc-circular-progress-right-spin calc(1333ms * var(--mat-progress-spinner-animation-multiplier)) cubic-bezier(0.4, 0, 0.2, 1) infinite both;\n}\n\n.mdc-circular-progress__circle-clipper {\n display: inline-flex;\n position: relative;\n width: 50%;\n height: 100%;\n overflow: hidden;\n}\n\n.mdc-circular-progress--indeterminate .mdc-circular-progress__spinner-layer {\n 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;\n}\n\n@keyframes mdc-circular-progress-container-rotate {\n to {\n transform: rotate(360deg);\n }\n}\n@keyframes mdc-circular-progress-spinner-layer-rotate {\n 12.5% {\n transform: rotate(135deg);\n }\n 25% {\n transform: rotate(270deg);\n }\n 37.5% {\n transform: rotate(405deg);\n }\n 50% {\n transform: rotate(540deg);\n }\n 62.5% {\n transform: rotate(675deg);\n }\n 75% {\n transform: rotate(810deg);\n }\n 87.5% {\n transform: rotate(945deg);\n }\n 100% {\n transform: rotate(1080deg);\n }\n}\n@keyframes mdc-circular-progress-left-spin {\n from {\n transform: rotate(265deg);\n }\n 50% {\n transform: rotate(130deg);\n }\n to {\n transform: rotate(265deg);\n }\n}\n@keyframes mdc-circular-progress-right-spin {\n from {\n transform: rotate(-265deg);\n }\n 50% {\n transform: rotate(-130deg);\n }\n to {\n transform: rotate(-265deg);\n }\n}\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: "22.0.0-next.5", 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 {\n --mat-progress-spinner-animation-multiplier: 1;\n display: block;\n overflow: hidden;\n line-height: 0;\n position: relative;\n direction: ltr;\n transition: opacity 250ms cubic-bezier(0.4, 0, 0.6, 1);\n}\n.mat-mdc-progress-spinner circle {\n stroke-width: var(--mat-progress-spinner-active-indicator-width, 4px);\n}\n.mat-mdc-progress-spinner._mat-animation-noopable, .mat-mdc-progress-spinner._mat-animation-noopable .mdc-circular-progress__determinate-circle {\n transition: none !important;\n}\n.mat-mdc-progress-spinner._mat-animation-noopable .mdc-circular-progress__indeterminate-circle-graphic,\n.mat-mdc-progress-spinner._mat-animation-noopable .mdc-circular-progress__spinner-layer,\n.mat-mdc-progress-spinner._mat-animation-noopable .mdc-circular-progress__indeterminate-container {\n animation: none !important;\n}\n.mat-mdc-progress-spinner._mat-animation-noopable .mdc-circular-progress__indeterminate-container circle {\n stroke-dasharray: 0 !important;\n}\n@media (forced-colors: active) {\n .mat-mdc-progress-spinner .mdc-circular-progress__indeterminate-circle-graphic,\n .mat-mdc-progress-spinner .mdc-circular-progress__determinate-circle {\n stroke: currentColor;\n stroke: CanvasText;\n }\n}\n\n.mat-progress-spinner-reduced-motion {\n --mat-progress-spinner-animation-multiplier: 1.25;\n}\n\n.mdc-circular-progress__determinate-container,\n.mdc-circular-progress__indeterminate-circle-graphic,\n.mdc-circular-progress__indeterminate-container,\n.mdc-circular-progress__spinner-layer {\n position: absolute;\n width: 100%;\n height: 100%;\n}\n\n.mdc-circular-progress__determinate-container {\n transform: rotate(-90deg);\n}\n.mdc-circular-progress--indeterminate .mdc-circular-progress__determinate-container {\n opacity: 0;\n}\n\n.mdc-circular-progress__indeterminate-container {\n font-size: 0;\n letter-spacing: 0;\n white-space: nowrap;\n opacity: 0;\n}\n.mdc-circular-progress--indeterminate .mdc-circular-progress__indeterminate-container {\n opacity: 1;\n animation: mdc-circular-progress-container-rotate calc(1568.2352941176ms * var(--mat-progress-spinner-animation-multiplier)) linear infinite;\n}\n\n.mdc-circular-progress__determinate-circle-graphic,\n.mdc-circular-progress__indeterminate-circle-graphic {\n fill: transparent;\n}\n\n.mat-mdc-progress-spinner .mdc-circular-progress__determinate-circle,\n.mat-mdc-progress-spinner .mdc-circular-progress__indeterminate-circle-graphic {\n stroke: var(--mat-progress-spinner-active-indicator-color, var(--mat-sys-primary));\n}\n@media (forced-colors: active) {\n .mat-mdc-progress-spinner .mdc-circular-progress__determinate-circle,\n .mat-mdc-progress-spinner .mdc-circular-progress__indeterminate-circle-graphic {\n stroke: CanvasText;\n }\n}\n\n.mdc-circular-progress__determinate-circle {\n transition: stroke-dashoffset 500ms cubic-bezier(0, 0, 0.2, 1);\n}\n\n.mdc-circular-progress__gap-patch {\n position: absolute;\n top: 0;\n left: 47.5%;\n box-sizing: border-box;\n width: 5%;\n height: 100%;\n overflow: hidden;\n}\n\n.mdc-circular-progress__gap-patch .mdc-circular-progress__indeterminate-circle-graphic {\n left: -900%;\n width: 2000%;\n transform: rotate(180deg);\n}\n.mdc-circular-progress__circle-clipper .mdc-circular-progress__indeterminate-circle-graphic {\n width: 200%;\n}\n.mdc-circular-progress__circle-right .mdc-circular-progress__indeterminate-circle-graphic {\n left: -100%;\n}\n.mdc-circular-progress--indeterminate .mdc-circular-progress__circle-left .mdc-circular-progress__indeterminate-circle-graphic {\n animation: mdc-circular-progress-left-spin calc(1333ms * var(--mat-progress-spinner-animation-multiplier)) cubic-bezier(0.4, 0, 0.2, 1) infinite both;\n}\n.mdc-circular-progress--indeterminate .mdc-circular-progress__circle-right .mdc-circular-progress__indeterminate-circle-graphic {\n animation: mdc-circular-progress-right-spin calc(1333ms * var(--mat-progress-spinner-animation-multiplier)) cubic-bezier(0.4, 0, 0.2, 1) infinite both;\n}\n\n.mdc-circular-progress__circle-clipper {\n display: inline-flex;\n position: relative;\n width: 50%;\n height: 100%;\n overflow: hidden;\n}\n\n.mdc-circular-progress--indeterminate .mdc-circular-progress__spinner-layer {\n 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;\n}\n\n@keyframes mdc-circular-progress-container-rotate {\n to {\n transform: rotate(360deg);\n }\n}\n@keyframes mdc-circular-progress-spinner-layer-rotate {\n 12.5% {\n transform: rotate(135deg);\n }\n 25% {\n transform: rotate(270deg);\n }\n 37.5% {\n transform: rotate(405deg);\n }\n 50% {\n transform: rotate(540deg);\n }\n 62.5% {\n transform: rotate(675deg);\n }\n 75% {\n transform: rotate(810deg);\n }\n 87.5% {\n transform: rotate(945deg);\n }\n 100% {\n transform: rotate(1080deg);\n }\n}\n@keyframes mdc-circular-progress-left-spin {\n from {\n transform: rotate(265deg);\n }\n 50% {\n transform: rotate(130deg);\n }\n to {\n transform: rotate(265deg);\n }\n}\n@keyframes mdc-circular-progress-right-spin {\n from {\n transform: rotate(-265deg);\n }\n 50% {\n transform: rotate(-130deg);\n }\n to {\n transform: rotate(-265deg);\n }\n}\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: "22.0.0-next.5", ngImport: i0, type: MatProgressSpinnerModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "22.0.0-next.5", ngImport: i0, type: MatProgressSpinnerModule, imports: [MatProgressSpinner, MatSpinner], exports: [MatProgressSpinner, MatSpinner, BidiModule] }); static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "22.0.0-next.5", ngImport: i0, type: MatProgressSpinnerModule, imports: [BidiModule] }); } i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.0-next.5", 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