@angular/material
Version:
Angular Material
195 lines (188 loc) • 11 kB
JavaScript
/**
* @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
*/
import { ChangeDetectionStrategy, Component, ElementRef, Input, NgModule, ViewEncapsulation } from '@angular/core';
import { CommonModule } from '@angular/common';
import { MatCommonModule, mixinColor } from '@angular/material/core';
import { __extends } from 'tslib';
import * as tslib_1 from 'tslib';
/**
* @fileoverview added by tsickle
* @suppress {checkTypes} checked by tsc
*/
/**
* \@docs-private
*/
var MatProgressBarBase = /** @class */ (function () {
function MatProgressBarBase(_elementRef) {
this._elementRef = _elementRef;
}
return MatProgressBarBase;
}());
var _MatProgressBarMixinBase = mixinColor(MatProgressBarBase, 'primary');
/**
* Counter used to generate unique IDs for progress bars.
*/
var progressbarId = 0;
/**
* `<mat-progress-bar>` component.
*/
var MatProgressBar = /** @class */ (function (_super) {
__extends(MatProgressBar, _super);
function MatProgressBar(_elementRef) {
var _this = _super.call(this, _elementRef) || this;
_this._elementRef = _elementRef;
_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';
/**
* The id of the progress bar.
*/
_this.progressbarId = "mat-progress-bar-" + progressbarId++;
return _this;
}
Object.defineProperty(MatProgressBar.prototype, "value", {
get: /**
* Value of the progress bar. Defaults to zero. Mirrored to aria-valuenow.
* @return {?}
*/
function () { return this._value; },
set: /**
* @param {?} v
* @return {?}
*/
function (v) { this._value = clamp(v || 0); },
enumerable: true,
configurable: true
});
Object.defineProperty(MatProgressBar.prototype, "bufferValue", {
get: /**
* Buffer value of the progress bar. Defaults to zero.
* @return {?}
*/
function () { return this._bufferValue; },
set: /**
* @param {?} v
* @return {?}
*/
function (v) { this._bufferValue = clamp(v || 0); },
enumerable: true,
configurable: true
});
/** Gets the current transform value for the progress bar's primary indicator. */
/**
* Gets the current transform value for the progress bar's primary indicator.
* @return {?}
*/
MatProgressBar.prototype._primaryTransform = /**
* Gets the current transform value for the progress bar's primary indicator.
* @return {?}
*/
function () {
var /** @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.
*/
/**
* 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 {?}
*/
MatProgressBar.prototype._bufferTransform = /**
* 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 {?}
*/
function () {
if (this.mode === 'buffer') {
var /** @type {?} */ scale = this.bufferValue / 100;
return { transform: "scaleX(" + scale + ")" };
}
};
MatProgressBar.decorators = [
{ type: Component, args: [{selector: 'mat-progress-bar',
exportAs: 'matProgressBar',
host: {
'role': 'progressbar',
'aria-valuemin': '0',
'aria-valuemax': '100',
'[attr.aria-valuenow]': 'value',
'[attr.mode]': 'mode',
'class': 'mat-progress-bar',
},
inputs: ['color'],
template: "<svg width=\"100%\" height=\"5\" focusable=\"false\" class=\"mat-progress-bar-background mat-progress-bar-element\"><defs><pattern [id]=\"progressbarId\" x=\"5\" y=\"0\" width=\"10\" height=\"5\" patternUnits=\"userSpaceOnUse\"><circle cx=\"2.5\" cy=\"2.5\" r=\"2.5\"/></pattern></defs><rect [attr.fill]=\"'url(#' + progressbarId + ')'\" width=\"100%\" height=\"100%\"/></svg><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;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{width:calc(100% + 10px)}.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{-webkit-backface-visibility:hidden;backface-visibility:hidden;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{-webkit-backface-visibility:hidden;backface-visibility:hidden;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{-webkit-backface-visibility:hidden;backface-visibility:hidden;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{-webkit-backface-visibility:hidden;backface-visibility:hidden;animation:mat-progress-bar-secondary-indeterminate-scale 2s infinite linear}.mat-progress-bar[mode=buffer] .mat-progress-bar-background{-webkit-backface-visibility:hidden;backface-visibility:hidden;animation:mat-progress-bar-background-scroll 250ms infinite linear}@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 */
MatProgressBar.ctorParameters = function () { return [
{ type: ElementRef, },
]; };
MatProgressBar.propDecorators = {
"value": [{ type: Input },],
"bufferValue": [{ type: Input },],
"mode": [{ type: Input },],
};
return MatProgressBar;
}(_MatProgressBarMixinBase));
/**
* Clamps a value to be between two numbers, by default 0 and 100.
* @param {?} v
* @param {?=} min
* @param {?=} max
* @return {?}
*/
function clamp(v, min, max) {
if (min === void 0) { min = 0; }
if (max === void 0) { max = 100; }
return Math.max(min, Math.min(max, v));
}
/**
* @fileoverview added by tsickle
* @suppress {checkTypes} checked by tsc
*/
var MatProgressBarModule = /** @class */ (function () {
function MatProgressBarModule() {
}
MatProgressBarModule.decorators = [
{ type: NgModule, args: [{
imports: [CommonModule, MatCommonModule],
exports: [MatProgressBar, MatCommonModule],
declarations: [MatProgressBar],
},] },
];
/** @nocollapse */
MatProgressBarModule.ctorParameters = function () { return []; };
return MatProgressBarModule;
}());
/**
* @fileoverview added by tsickle
* @suppress {checkTypes} checked by tsc
*/
/**
* @fileoverview added by tsickle
* @suppress {checkTypes} checked by tsc
*/
/**
* Generated bundle index. Do not edit.
*/
export { MatProgressBarModule, MatProgressBarBase, _MatProgressBarMixinBase, MatProgressBar };
//# sourceMappingURL=progress-bar.es5.js.map