@angular/material
Version:
Angular Material
215 lines (203 loc) • 12.8 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
*/
(function (global, factory) {
typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@angular/core'), require('@angular/common'), require('@angular/material/core')) :
typeof define === 'function' && define.amd ? define(['exports', '@angular/core', '@angular/common', '@angular/material/core'], factory) :
(factory((global.ng = global.ng || {}, global.ng.material = global.ng.material || {}, global.ng.material.progressBar = global.ng.material.progressBar || {}),global.ng.core,global.ng.common,global.ng.material.core));
}(this, (function (exports,_angular_core,_angular_common,_angular_material_core) { 'use strict';
/*! *****************************************************************************
Copyright (c) Microsoft Corporation. All rights reserved.
Licensed under the Apache License, Version 2.0 (the "License"); you may not use
this file except in compliance with the License. You may obtain a copy of the
License at http://www.apache.org/licenses/LICENSE-2.0
THIS CODE IS PROVIDED ON AN *AS IS* BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
KIND, EITHER EXPRESS OR IMPLIED, INCLUDING WITHOUT LIMITATION ANY IMPLIED
WARRANTIES OR CONDITIONS OF TITLE, FITNESS FOR A PARTICULAR PURPOSE,
MERCHANTABLITY OR NON-INFRINGEMENT.
See the Apache Version 2.0 License for specific language governing permissions
and limitations under the License.
***************************************************************************** */
/* global Reflect, Promise */
var extendStatics = Object.setPrototypeOf ||
({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
function __extends(d, b) {
extendStatics(d, b);
function __() { this.constructor = d; }
d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
}
/**
* @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 = _angular_material_core.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: _angular_core.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: _angular_core.ChangeDetectionStrategy.OnPush,
encapsulation: _angular_core.ViewEncapsulation.None,
preserveWhitespaces: false,
},] },
];
/** @nocollapse */
MatProgressBar.ctorParameters = function () { return [
{ type: _angular_core.ElementRef, },
]; };
MatProgressBar.propDecorators = {
"value": [{ type: _angular_core.Input },],
"bufferValue": [{ type: _angular_core.Input },],
"mode": [{ type: _angular_core.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: _angular_core.NgModule, args: [{
imports: [_angular_common.CommonModule, _angular_material_core.MatCommonModule],
exports: [MatProgressBar, _angular_material_core.MatCommonModule],
declarations: [MatProgressBar],
},] },
];
/** @nocollapse */
MatProgressBarModule.ctorParameters = function () { return []; };
return MatProgressBarModule;
}());
exports.MatProgressBarModule = MatProgressBarModule;
exports.MatProgressBarBase = MatProgressBarBase;
exports._MatProgressBarMixinBase = _MatProgressBarMixinBase;
exports.MatProgressBar = MatProgressBar;
Object.defineProperty(exports, '__esModule', { value: true });
})));
//# sourceMappingURL=material-progress-bar.umd.js.map