@angular/material
Version:
Angular Material
133 lines (128 loc) • 8.1 kB
JavaScript
/**
* @license
* Copyright Google Inc. 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
*/
import { ChangeDetectionStrategy, Component, Input, NgModule, ViewEncapsulation } from '@angular/core';
import { CommonModule } from '@angular/common';
import { MdCommonModule } from '@angular/material/core';
/**
* <md-progress-bar> component.
*/
class MdProgressBar {
constructor() {
/**
* Color of the progress bar.
*/
this.color = 'primary';
this._value = 0;
this._bufferValue = 0;
/**
* Mode of the progress bar.
*
* Input must be one of these values: determinate, indeterminate, buffer, query, defaults to
* 'determinate'.
* Mirrored to mode attribute.
*/
this.mode = 'determinate';
}
/**
* Value of the progressbar. Defaults to zero. Mirrored to aria-valuenow.
* @return {?}
*/
get value() { return this._value; }
/**
* @param {?} v
* @return {?}
*/
set value(v) { this._value = clamp(v || 0); }
/**
* Buffer value of the progress bar. Defaults to zero.
* @return {?}
*/
get bufferValue() { return this._bufferValue; }
/**
* @param {?} v
* @return {?}
*/
set bufferValue(v) { this._bufferValue = clamp(v || 0); }
/**
* Gets the current transform value for the progress bar's primary indicator.
* @return {?}
*/
_primaryTransform() {
let /** @type {?} */ scale = this.value / 100;
return { transform: `scaleX(${scale})` };
}
/**
* Gets the current transform value for the progress bar's buffer indicator. Only used if the
* progress mode is set to buffer, otherwise returns an undefined, causing no transformation.
* @return {?}
*/
_bufferTransform() {
if (this.mode == 'buffer') {
let /** @type {?} */ scale = this.bufferValue / 100;
return { transform: `scaleX(${scale})` };
}
}
}
MdProgressBar.decorators = [
{ type: Component, args: [{selector: 'md-progress-bar, mat-progress-bar',
host: {
'role': 'progressbar',
'aria-valuemin': '0',
'aria-valuemax': '100',
'[attr.aria-valuenow]': 'value',
'[attr.mode]': 'mode',
'[class.mat-primary]': 'color == "primary"',
'[class.mat-accent]': 'color == "accent"',
'[class.mat-warn]': 'color == "warn"',
'class': 'mat-progress-bar',
},
template: "<div class=\"mat-progress-bar-background mat-progress-bar-element\"></div><div class=\"mat-progress-bar-buffer mat-progress-bar-element\" [ngStyle]=\"_bufferTransform()\"></div><div class=\"mat-progress-bar-primary mat-progress-bar-fill mat-progress-bar-element\" [ngStyle]=\"_primaryTransform()\"></div><div class=\"mat-progress-bar-secondary mat-progress-bar-fill mat-progress-bar-element\"></div>",
styles: [".mat-progress-bar{display:block;height:5px;overflow:hidden;position:relative;transform:translateZ(0);transition:opacity 250ms linear;width:100%}.mat-progress-bar .mat-progress-bar-element,.mat-progress-bar .mat-progress-bar-fill::after{height:100%;position:absolute;width:100%}.mat-progress-bar .mat-progress-bar-background{background-repeat:repeat-x;background-size:10px 4px;display:none}.mat-progress-bar .mat-progress-bar-buffer{transform-origin:top left;transition:transform 250ms ease}.mat-progress-bar .mat-progress-bar-secondary{display:none}.mat-progress-bar .mat-progress-bar-fill{animation:none;transform-origin:top left;transition:transform 250ms ease}.mat-progress-bar .mat-progress-bar-fill::after{animation:none;content:'';display:inline-block;left:0}.mat-progress-bar[dir=rtl],[dir=rtl] .mat-progress-bar{transform:rotateY(180deg)}.mat-progress-bar[mode=query]{transform:rotateZ(180deg)}.mat-progress-bar[mode=query][dir=rtl],[dir=rtl] .mat-progress-bar[mode=query]{transform:rotateZ(180deg) rotateY(180deg)}.mat-progress-bar[mode=indeterminate] .mat-progress-bar-fill,.mat-progress-bar[mode=query] .mat-progress-bar-fill{transition:none}.mat-progress-bar[mode=indeterminate] .mat-progress-bar-primary,.mat-progress-bar[mode=query] .mat-progress-bar-primary{animation:mat-progress-bar-primary-indeterminate-translate 2s infinite linear;left:-145.166611%}.mat-progress-bar[mode=indeterminate] .mat-progress-bar-primary.mat-progress-bar-fill::after,.mat-progress-bar[mode=query] .mat-progress-bar-primary.mat-progress-bar-fill::after{animation:mat-progress-bar-primary-indeterminate-scale 2s infinite linear}.mat-progress-bar[mode=indeterminate] .mat-progress-bar-secondary,.mat-progress-bar[mode=query] .mat-progress-bar-secondary{animation:mat-progress-bar-secondary-indeterminate-translate 2s infinite linear;left:-54.888891%;display:block}.mat-progress-bar[mode=indeterminate] .mat-progress-bar-secondary.mat-progress-bar-fill::after,.mat-progress-bar[mode=query] .mat-progress-bar-secondary.mat-progress-bar-fill::after{animation:mat-progress-bar-secondary-indeterminate-scale 2s infinite linear}.mat-progress-bar[mode=buffer] .mat-progress-bar-background{animation:mat-progress-bar-background-scroll 250ms infinite linear;display:block}@keyframes mat-progress-bar-primary-indeterminate-translate{0%{transform:translateX(0)}20%{animation-timing-function:cubic-bezier(.5,0,.70173,.49582);transform:translateX(0)}59.15%{animation-timing-function:cubic-bezier(.30244,.38135,.55,.95635);transform:translateX(83.67142%)}100%{transform:translateX(200.61106%)}}@keyframes mat-progress-bar-primary-indeterminate-scale{0%{transform:scaleX(.08)}36.65%{animation-timing-function:cubic-bezier(.33473,.12482,.78584,1);transform:scaleX(.08)}69.15%{animation-timing-function:cubic-bezier(.06,.11,.6,1);transform:scaleX(.66148)}100%{transform:scaleX(.08)}}@keyframes mat-progress-bar-secondary-indeterminate-translate{0%{animation-timing-function:cubic-bezier(.15,0,.51506,.40969);transform:translateX(0)}25%{animation-timing-function:cubic-bezier(.31033,.28406,.8,.73371);transform:translateX(37.65191%)}48.35%{animation-timing-function:cubic-bezier(.4,.62704,.6,.90203);transform:translateX(84.38617%)}100%{transform:translateX(160.27778%)}}@keyframes mat-progress-bar-secondary-indeterminate-scale{0%{animation-timing-function:cubic-bezier(.15,0,.51506,.40969);transform:scaleX(.08)}19.15%{animation-timing-function:cubic-bezier(.31033,.28406,.8,.73371);transform:scaleX(.4571)}44.15%{animation-timing-function:cubic-bezier(.4,.62704,.6,.90203);transform:scaleX(.72796)}100%{transform:scaleX(.08)}}@keyframes mat-progress-bar-background-scroll{to{transform:translateX(-10px)}}"],
changeDetection: ChangeDetectionStrategy.OnPush,
encapsulation: ViewEncapsulation.None,
preserveWhitespaces: false,
},] },
];
/**
* @nocollapse
*/
MdProgressBar.ctorParameters = () => [];
MdProgressBar.propDecorators = {
'color': [{ type: Input },],
'value': [{ type: Input },],
'bufferValue': [{ type: Input },],
'mode': [{ type: Input },],
};
/**
* Clamps a value to be between two numbers, by default 0 and 100.
* @param {?} v
* @param {?=} min
* @param {?=} max
* @return {?}
*/
function clamp(v, min = 0, max = 100) {
return Math.max(min, Math.min(max, v));
}
class MdProgressBarModule {
}
MdProgressBarModule.decorators = [
{ type: NgModule, args: [{
imports: [CommonModule, MdCommonModule],
exports: [MdProgressBar, MdCommonModule],
declarations: [MdProgressBar],
},] },
];
/**
* @nocollapse
*/
MdProgressBarModule.ctorParameters = () => [];
/**
* Generated bundle index. Do not edit.
*/
export { MdProgressBarModule, MdProgressBar, MdProgressBar as MatProgressBar, MdProgressBarModule as MatProgressBarModule };
//# sourceMappingURL=progress-bar.js.map