ngx-pluto
Version:
122 lines • 11.4 kB
JavaScript
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
import { Component, ViewEncapsulation, Input } from '@angular/core';
import { daffProgressIndicatorAnimation } from './progress-bar.animation';
/**
* @ignore
*/
export class NpProgressBar {
constructor() {
this.colors = [];
this.height = 15;
this.gradient = true;
this.type = 'progress';
this.leftText = '';
this.rightText = '';
this.percentage = 0;
this.background = `linear-gradient(to right, #22BABB, #CCFDD7)`;
}
/**
* @return {?}
*/
get fillState() {
return {
value: 100 - this.percentage,
params: {
percentage: 100 - this.percentage
}
};
}
/**
* @return {?}
*/
ngOnInit() {
this.buildBackgroundColors();
}
/**
* @return {?}
*/
buildBackgroundColors() {
if (this.colors && this.colors.length > 0) {
if (this.colors.length === 1) {
this.background = this.colors[0];
return;
}
/** @type {?} */
let gradientColors = '';
/** @type {?} */
let gradientPercent = Math.round(this.percentage / this.colors.length);
if (this.type === 'progress') {
this.colors.forEach((/**
* @param {?} color
* @return {?}
*/
color => {
if (this.gradient) {
gradientColors += color + ', ';
}
else {
gradientColors += color + ' ' + gradientPercent + '%, ';
}
}));
}
else {
if (!this.leftText && this.leftText != '0') {
this.leftText = this.percentage + '';
}
if (!this.rightText && this.rightText != '0') {
this.rightText = (100 - this.percentage) + '';
}
/** @type {?} */
let left = this.percentage;
this.percentage = 100;
gradientColors = this.colors[0] + ' ' + left + '%, ' + this.colors[1] + ' 0%, ';
}
gradientColors = gradientColors.substring(0, gradientColors.length - 2); // Remove tail's comma and space
this.background = `linear-gradient(to right, ` + gradientColors + `)`;
}
}
}
NpProgressBar.decorators = [
{ type: Component, args: [{
selector: `np-progress-bar`,
template: "<div class=\"progress-bar-wrapper\" [ngStyle]=\"{'height.px': height}\">\r\n <div class=\"progress-bar progress\" [ngStyle]=\"{'background': background}\"></div>\r\n <div [@fill]=\"fillState\" class=\"progress-bar shrinker\"></div>\r\n <span class=\"left-percent-text\" [ngStyle]=\"{'line-height.px': height}\"\r\n *ngIf=\"type === 'percent'\">{{ leftText }}</span>\r\n <span class=\"right-percent-text\"\r\n [ngStyle]=\"{'right': 'calc(' + (100 - percentage) + '% + 5px)', 'line-height.px': height}\"\r\n *ngIf=\"type === 'percent'\">{{ rightText }}</span>\r\n</div>\r\n",
encapsulation: ViewEncapsulation.None,
animations: [
daffProgressIndicatorAnimation.fill
],
styles: [".progress-bar-wrapper{height:15px;margin:0 auto;position:relative;top:50%;transform:translateY(-50%);overflow:hidden}.progress-bar-wrapper .progress-bar{width:100%;height:100%}.progress-bar-wrapper .progress{color:#fff;text-align:center;animation-direction:reverse}.progress-bar-wrapper .shrinker{background-color:#eceff4;position:absolute;top:0;right:0;width:100%}.progress-bar-wrapper .left-percent-text{position:absolute;color:#fff;left:5px;top:0}.progress-bar-wrapper .right-percent-text{position:absolute;color:#fff;top:0}"]
}] }
];
/** @nocollapse */
NpProgressBar.ctorParameters = () => [];
NpProgressBar.propDecorators = {
colors: [{ type: Input }],
height: [{ type: Input }],
gradient: [{ type: Input }],
type: [{ type: Input }],
leftText: [{ type: Input }],
rightText: [{ type: Input }],
percentage: [{ type: Input }]
};
if (false) {
/** @type {?} */
NpProgressBar.prototype.colors;
/** @type {?} */
NpProgressBar.prototype.height;
/** @type {?} */
NpProgressBar.prototype.gradient;
/** @type {?} */
NpProgressBar.prototype.type;
/** @type {?} */
NpProgressBar.prototype.leftText;
/** @type {?} */
NpProgressBar.prototype.rightText;
/** @type {?} */
NpProgressBar.prototype.percentage;
/** @type {?} */
NpProgressBar.prototype.background;
}
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoicHJvZ3Jlc3MtYmFyLmpzIiwic291cmNlUm9vdCI6Im5nOi8vbmd4LXBsdXRvLyIsInNvdXJjZXMiOlsibGliL3Byb2dyZXNzLWJhci9wcm9ncmVzcy1iYXIudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6Ijs7OztBQUFBLE9BQU8sRUFBRSxTQUFTLEVBQUUsaUJBQWlCLEVBQTZCLEtBQUssRUFBRSxNQUFNLGVBQWUsQ0FBQztBQUMvRixPQUFPLEVBQUUsOEJBQThCLEVBQUUsTUFBTSwwQkFBMEIsQ0FBQzs7OztBQWUxRSxNQUFNLE9BQU8sYUFBYTtJQXFCeEI7UUFuQlMsV0FBTSxHQUFrQixFQUFFLENBQUM7UUFDM0IsV0FBTSxHQUFXLEVBQUUsQ0FBQztRQUNwQixhQUFRLEdBQVksSUFBSSxDQUFDO1FBQ3pCLFNBQUksR0FBMkIsVUFBVSxDQUFDO1FBQzFDLGFBQVEsR0FBVyxFQUFFLENBQUM7UUFDdEIsY0FBUyxHQUFXLEVBQUUsQ0FBQztRQUV2QixlQUFVLEdBQUcsQ0FBQyxDQUFDO1FBVXhCLGVBQVUsR0FBVyw2Q0FBNkMsQ0FBQztJQUVuRCxDQUFDOzs7O0lBWGpCLElBQUksU0FBUztRQUNYLE9BQU87WUFDTCxLQUFLLEVBQUUsR0FBRyxHQUFHLElBQUksQ0FBQyxVQUFVO1lBQzVCLE1BQU0sRUFBRTtnQkFDTixVQUFVLEVBQUUsR0FBRyxHQUFHLElBQUksQ0FBQyxVQUFVO2FBQ2xDO1NBQ0YsQ0FBQztJQUNKLENBQUM7Ozs7SUFNRCxRQUFRO1FBQ04sSUFBSSxDQUFDLHFCQUFxQixFQUFFLENBQUM7SUFDL0IsQ0FBQzs7OztJQUVELHFCQUFxQjtRQUNuQixJQUFJLElBQUksQ0FBQyxNQUFNLElBQUksSUFBSSxDQUFDLE1BQU0sQ0FBQyxNQUFNLEdBQUcsQ0FBQyxFQUFFO1lBQ3pDLElBQUksSUFBSSxDQUFDLE1BQU0sQ0FBQyxNQUFNLEtBQUssQ0FBQyxFQUFFO2dCQUM1QixJQUFJLENBQUMsVUFBVSxHQUFHLElBQUksQ0FBQyxNQUFNLENBQUMsQ0FBQyxDQUFDLENBQUM7Z0JBQ2pDLE9BQU87YUFDUjs7Z0JBRUcsY0FBYyxHQUFHLEVBQUU7O2dCQUNuQixlQUFlLEdBQUcsSUFBSSxDQUFDLEtBQUssQ0FBQyxJQUFJLENBQUMsVUFBVSxHQUFHLElBQUksQ0FBQyxNQUFNLENBQUMsTUFBTSxDQUFDO1lBQ3RFLElBQUksSUFBSSxDQUFDLElBQUksS0FBSyxVQUFVLEVBQUU7Z0JBQzVCLElBQUksQ0FBQyxNQUFNLENBQUMsT0FBTzs7OztnQkFBQyxLQUFLLENBQUMsRUFBRTtvQkFDMUIsSUFBSSxJQUFJLENBQUMsUUFBUSxFQUFFO3dCQUNqQixjQUFjLElBQUksS0FBSyxHQUFHLElBQUksQ0FBQztxQkFDaEM7eUJBQU07d0JBQ0wsY0FBYyxJQUFJLEtBQUssR0FBRyxHQUFHLEdBQUcsZUFBZSxHQUFHLEtBQUssQ0FBQztxQkFDekQ7Z0JBQ0gsQ0FBQyxFQUFDLENBQUM7YUFDSjtpQkFBTTtnQkFDTCxJQUFJLENBQUMsSUFBSSxDQUFDLFFBQVEsSUFBSSxJQUFJLENBQUMsUUFBUSxJQUFJLEdBQUcsRUFBRTtvQkFDMUMsSUFBSSxDQUFDLFFBQVEsR0FBRyxJQUFJLENBQUMsVUFBVSxHQUFHLEVBQUUsQ0FBQztpQkFDdEM7Z0JBQ0QsSUFBSSxDQUFDLElBQUksQ0FBQyxTQUFTLElBQUksSUFBSSxDQUFDLFNBQVMsSUFBSSxHQUFHLEVBQUU7b0JBQzVDLElBQUksQ0FBQyxTQUFTLEdBQUcsQ0FBQyxHQUFHLEdBQUcsSUFBSSxDQUFDLFVBQVUsQ0FBQyxHQUFHLEVBQUUsQ0FBQztpQkFDL0M7O29CQUVHLElBQUksR0FBRyxJQUFJLENBQUMsVUFBVTtnQkFDMUIsSUFBSSxDQUFDLFVBQVUsR0FBRyxHQUFHLENBQUM7Z0JBQ3RCLGNBQWMsR0FBRyxJQUFJLENBQUMsTUFBTSxDQUFDLENBQUMsQ0FBQyxHQUFHLEdBQUcsR0FBRyxJQUFJLEdBQUcsS0FBSyxHQUFHLElBQUksQ0FBQyxNQUFNLENBQUMsQ0FBQyxDQUFDLEdBQUcsT0FBTyxDQUFDO2FBQ2pGO1lBRUQsY0FBYyxHQUFHLGNBQWMsQ0FBQyxTQUFTLENBQUMsQ0FBQyxFQUFFLGNBQWMsQ0FBQyxNQUFNLEdBQUcsQ0FBQyxDQUFDLENBQUMsQ0FBSSxnQ0FBZ0M7WUFDNUcsSUFBSSxDQUFDLFVBQVUsR0FBRyw0QkFBNEIsR0FBRyxjQUFjLEdBQUcsR0FBRyxDQUFDO1NBQ3ZFO0lBQ0gsQ0FBQzs7O1lBdEVGLFNBQVMsU0FBQztnQkFDVCxRQUFRLEVBQUUsaUJBQWlCO2dCQUMzQixvbEJBQWdDO2dCQUVoQyxhQUFhLEVBQUUsaUJBQWlCLENBQUMsSUFBSTtnQkFDckMsVUFBVSxFQUFFO29CQUNWLDhCQUE4QixDQUFDLElBQUk7aUJBQ3BDOzthQUNGOzs7OztxQkFJRSxLQUFLO3FCQUNMLEtBQUs7dUJBQ0wsS0FBSzttQkFDTCxLQUFLO3VCQUNMLEtBQUs7d0JBQ0wsS0FBSzt5QkFFTCxLQUFLOzs7O0lBUE4sK0JBQW9DOztJQUNwQywrQkFBNkI7O0lBQzdCLGlDQUFrQzs7SUFDbEMsNkJBQW1EOztJQUNuRCxpQ0FBK0I7O0lBQy9CLGtDQUFnQzs7SUFFaEMsbUNBQXdCOztJQVV4QixtQ0FBbUUiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBDb21wb25lbnQsIFZpZXdFbmNhcHN1bGF0aW9uLCBPbkluaXQsIENoYW5nZURldGVjdG9yUmVmLCBJbnB1dCB9IGZyb20gJ0Bhbmd1bGFyL2NvcmUnO1xyXG5pbXBvcnQgeyBkYWZmUHJvZ3Jlc3NJbmRpY2F0b3JBbmltYXRpb24gfSBmcm9tICcuL3Byb2dyZXNzLWJhci5hbmltYXRpb24nO1xyXG5cclxuLyoqXHJcbiAqIEBpZ25vcmVcclxuICovXHJcbkBDb21wb25lbnQoe1xyXG4gIHNlbGVjdG9yOiBgbnAtcHJvZ3Jlc3MtYmFyYCxcclxuICB0ZW1wbGF0ZVVybDogJ3Byb2dyZXNzLWJhci5odG1sJyxcclxuICBzdHlsZVVybHM6IFsncHJvZ3Jlc3MtYmFyLnNjc3MnXSxcclxuICBlbmNhcHN1bGF0aW9uOiBWaWV3RW5jYXBzdWxhdGlvbi5Ob25lLFxyXG4gIGFuaW1hdGlvbnM6IFtcclxuICAgIGRhZmZQcm9ncmVzc0luZGljYXRvckFuaW1hdGlvbi5maWxsXHJcbiAgXVxyXG59KVxyXG5cclxuZXhwb3J0IGNsYXNzIE5wUHJvZ3Jlc3NCYXIgaW1wbGVtZW50cyBPbkluaXQge1xyXG5cclxuICBASW5wdXQoKSBjb2xvcnM6IEFycmF5PHN0cmluZz4gPSBbXTtcclxuICBASW5wdXQoKSBoZWlnaHQ6IG51bWJlciA9IDE1O1xyXG4gIEBJbnB1dCgpIGdyYWRpZW50OiBib29sZWFuID0gdHJ1ZTtcclxuICBASW5wdXQoKSB0eXBlOiAncHJvZ3Jlc3MnIHwgJ3BlcmNlbnQnID0gJ3Byb2dyZXNzJztcclxuICBASW5wdXQoKSBsZWZ0VGV4dDogc3RyaW5nID0gJyc7XHJcbiAgQElucHV0KCkgcmlnaHRUZXh0OiBzdHJpbmcgPSAnJztcclxuXHJcbiAgQElucHV0KCkgcGVyY2VudGFnZSA9IDA7XHJcbiAgZ2V0IGZpbGxTdGF0ZSgpOiBhbnkge1xyXG4gICAgcmV0dXJuIHtcclxuICAgICAgdmFsdWU6IDEwMCAtIHRoaXMucGVyY2VudGFnZSxcclxuICAgICAgcGFyYW1zOiB7XHJcbiAgICAgICAgcGVyY2VudGFnZTogMTAwIC0gdGhpcy5wZXJjZW50YWdlXHJcbiAgICAgIH1cclxuICAgIH07XHJcbiAgfVxyXG5cclxuICBiYWNrZ3JvdW5kOiBzdHJpbmcgPSBgbGluZWFyLWdyYWRpZW50KHRvIHJpZ2h0LCAjMjJCQUJCLCAjQ0NGREQ3KWA7XHJcblxyXG4gIGNvbnN0cnVjdG9yKCkgeyB9XHJcblxyXG4gIG5nT25Jbml0KCkge1xyXG4gICAgdGhpcy5idWlsZEJhY2tncm91bmRDb2xvcnMoKTtcclxuICB9XHJcblxyXG4gIGJ1aWxkQmFja2dyb3VuZENvbG9ycygpIHtcclxuICAgIGlmICh0aGlzLmNvbG9ycyAmJiB0aGlzLmNvbG9ycy5sZW5ndGggPiAwKSB7XHJcbiAgICAgIGlmICh0aGlzLmNvbG9ycy5sZW5ndGggPT09IDEpIHtcclxuICAgICAgICB0aGlzLmJhY2tncm91bmQgPSB0aGlzLmNvbG9yc1swXTtcclxuICAgICAgICByZXR1cm47XHJcbiAgICAgIH1cclxuXHJcbiAgICAgIGxldCBncmFkaWVudENvbG9ycyA9ICcnO1xyXG4gICAgICBsZXQgZ3JhZGllbnRQZXJjZW50ID0gTWF0aC5yb3VuZCh0aGlzLnBlcmNlbnRhZ2UgLyB0aGlzLmNvbG9ycy5sZW5ndGgpO1xyXG4gICAgICBpZiAodGhpcy50eXBlID09PSAncHJvZ3Jlc3MnKSB7XHJcbiAgICAgICAgdGhpcy5jb2xvcnMuZm9yRWFjaChjb2xvciA9PiB7XHJcbiAgICAgICAgICBpZiAodGhpcy5ncmFkaWVudCkge1xyXG4gICAgICAgICAgICBncmFkaWVudENvbG9ycyArPSBjb2xvciArICcsICc7XHJcbiAgICAgICAgICB9IGVsc2Uge1xyXG4gICAgICAgICAgICBncmFkaWVudENvbG9ycyArPSBjb2xvciArICcgJyArIGdyYWRpZW50UGVyY2VudCArICclLCAnO1xyXG4gICAgICAgICAgfVxyXG4gICAgICAgIH0pO1xyXG4gICAgICB9IGVsc2Uge1xyXG4gICAgICAgIGlmICghdGhpcy5sZWZ0VGV4dCAmJiB0aGlzLmxlZnRUZXh0ICE9ICcwJykge1xyXG4gICAgICAgICAgdGhpcy5sZWZ0VGV4dCA9IHRoaXMucGVyY2VudGFnZSArICcnO1xyXG4gICAgICAgIH1cclxuICAgICAgICBpZiAoIXRoaXMucmlnaHRUZXh0ICYmIHRoaXMucmlnaHRUZXh0ICE9ICcwJykge1xyXG4gICAgICAgICAgdGhpcy5yaWdodFRleHQgPSAoMTAwIC0gdGhpcy5wZXJjZW50YWdlKSArICcnO1xyXG4gICAgICAgIH1cclxuXHJcbiAgICAgICAgbGV0IGxlZnQgPSB0aGlzLnBlcmNlbnRhZ2U7XHJcbiAgICAgICAgdGhpcy5wZXJjZW50YWdlID0gMTAwO1xyXG4gICAgICAgIGdyYWRpZW50Q29sb3JzID0gdGhpcy5jb2xvcnNbMF0gKyAnICcgKyBsZWZ0ICsgJyUsICcgKyB0aGlzLmNvbG9yc1sxXSArICcgMCUsICc7XHJcbiAgICAgIH1cclxuXHJcbiAgICAgIGdyYWRpZW50Q29sb3JzID0gZ3JhZGllbnRDb2xvcnMuc3Vic3RyaW5nKDAsIGdyYWRpZW50Q29sb3JzLmxlbmd0aCAtIDIpOyAgICAvLyBSZW1vdmUgdGFpbCdzIGNvbW1hIGFuZCBzcGFjZVxyXG4gICAgICB0aGlzLmJhY2tncm91bmQgPSBgbGluZWFyLWdyYWRpZW50KHRvIHJpZ2h0LCBgICsgZ3JhZGllbnRDb2xvcnMgKyBgKWA7XHJcbiAgICB9XHJcbiAgfVxyXG59XHJcblxyXG5cclxuIl19