angular-progress-bar
Version:
An angular progress-bar
117 lines • 8.9 kB
JavaScript
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
import { Component, Input } from '@angular/core';
export class ProgressBarComponent {
constructor() {
// Default color
this.color = "#488aff";
this.disabledP = false;
}
/**
* Returns a color for a certain percent
* @param {?} percent The current progress
* @return {?}
*/
whichColor(percent) {
// Get all entries index as an array
/** @type {?} */
let k = Object.keys(this.degraded);
// Convert string to number
k.forEach((e, i) => k[i] = +e);
// Sort them by value
k = k.sort((a, b) => a - b);
// Percent as number
/** @type {?} */
let p = +percent
// Set last by default as the first occurrence
;
// Set last by default as the first occurrence
/** @type {?} */
let last = k[0];
// Foreach keys
for (let val of k) {
// if current val is < than percent
if (val < p) {
last = val;
}
// if val >= percent then the val that we could show has been reached
else if (val >= p - 1) {
return this.degraded[last];
}
}
// if its the last one return the last
return this.degraded[last];
}
/**
* @param {?} progress
* @return {?}
*/
whichProgress(progress) {
try {
return Math.round(+progress * 100) / 100;
}
catch (_a) {
return progress;
}
}
}
ProgressBarComponent.decorators = [
{ type: Component, args: [{
selector: 'progress-bar',
template: `
<div class=\"progress-outer\">
<div class=\"progress-inner\" [style.width]=\"whichProgress(progress) + '%'\" [style.background-color]=\"degraded == null ? color : whichColor(progress)\">
<ng-container *ngIf="!disabledP">
{{whichProgress(progress)}}%
</ng-container>
<ng-container *ngIf="disabledP">
{{whichProgress(progress)}}
</ng-container>
</div>
</div>
`,
styles: [`
.progress-outer {
width: 96%;
margin: 10px 2%;
padding: 3px;
background-color: #f4f4f4;
border: 1px solid #dcdcdc;
color: #fff;
border-radius: 20px;
text-align: center;
}
.progress-inner {
min-width: 15%;
min-height:18px;
white-space: nowrap;
overflow: hidden;
padding: 0px;
border-radius: 20px;
`]
}] }
];
/** @nocollapse */
ProgressBarComponent.ctorParameters = () => [];
ProgressBarComponent.propDecorators = {
progress: [{ type: Input, args: ['progress',] }],
color: [{ type: Input, args: ['color',] }],
degraded: [{ type: Input, args: ['color-degraded',] }],
disabledP: [{ type: Input, args: ['disable-percentage',] }]
};
if (false) {
/**
* Inputs *
* @type {?}
*/
ProgressBarComponent.prototype.progress;
/** @type {?} */
ProgressBarComponent.prototype.color;
/** @type {?} */
ProgressBarComponent.prototype.degraded;
/** @type {?} */
ProgressBarComponent.prototype.disabledP;
}
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiYW5ndWxhci1wcm9ncmVzcy1iYXIuY29tcG9uZW50LmpzIiwic291cmNlUm9vdCI6Im5nOi8vYW5ndWxhci1wcm9ncmVzcy1iYXIvIiwic291cmNlcyI6WyJsaWIvYW5ndWxhci1wcm9ncmVzcy1iYXIuY29tcG9uZW50LnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiI7Ozs7QUFBQSxPQUFPLEVBQUUsU0FBUyxFQUFFLEtBQUssRUFBRSxNQUFNLGVBQWUsQ0FBQztBQXNDakQsTUFBTSxPQUFPLG9CQUFvQjtJQVNqQztRQUNFLGdCQUFnQjtRQUNoQixJQUFJLENBQUMsS0FBSyxHQUFHLFNBQVMsQ0FBQztRQUN2QixJQUFJLENBQUMsU0FBUyxHQUFHLEtBQUssQ0FBQztJQUN6QixDQUFDOzs7Ozs7SUFNRCxVQUFVLENBQUMsT0FBZTs7O1lBRXBCLENBQUMsR0FBZSxNQUFNLENBQUMsSUFBSSxDQUFDLElBQUksQ0FBQyxRQUFRLENBQUM7UUFDOUMsMkJBQTJCO1FBQzNCLENBQUMsQ0FBQyxPQUFPLENBQUMsQ0FBQyxDQUFDLEVBQUUsQ0FBQyxFQUFFLEVBQUUsQ0FBQyxDQUFDLENBQUMsQ0FBQyxDQUFDLEdBQUcsQ0FBQyxDQUFDLENBQUMsQ0FBQztRQUMvQixxQkFBcUI7UUFDckIsQ0FBQyxHQUFHLENBQUMsQ0FBQyxJQUFJLENBQUMsQ0FBQyxDQUFDLEVBQUUsQ0FBQyxFQUFFLEVBQUUsQ0FBQyxDQUFDLEdBQUcsQ0FBQyxDQUFDLENBQUM7OztZQUV4QixDQUFDLEdBQUcsQ0FBQyxPQUFPO1FBQ2hCLDhDQUE4Qzs7OztZQUMxQyxJQUFJLEdBQUcsQ0FBQyxDQUFDLENBQUMsQ0FBQztRQUNmLGdCQUFnQjtRQUNoQixLQUFJLElBQUksR0FBRyxJQUFJLENBQUMsRUFBQztZQUNmLG1DQUFtQztZQUNuQyxJQUFHLEdBQUcsR0FBRyxDQUFDLEVBQUM7Z0JBQ1QsSUFBSSxHQUFHLEdBQUcsQ0FBQzthQUNaO1lBQ0QscUVBQXFFO2lCQUNoRSxJQUFHLEdBQUcsSUFBSSxDQUFDLEdBQUUsQ0FBQyxFQUFDO2dCQUNsQixPQUFPLElBQUksQ0FBQyxRQUFRLENBQUMsSUFBSSxDQUFDLENBQUM7YUFDNUI7U0FDRjtRQUNELHNDQUFzQztRQUN0QyxPQUFPLElBQUksQ0FBQyxRQUFRLENBQUMsSUFBSSxDQUFDLENBQUM7SUFDN0IsQ0FBQzs7Ozs7SUFFRCxhQUFhLENBQUMsUUFBZ0I7UUFDNUIsSUFBRztZQUNELE9BQU8sSUFBSSxDQUFDLEtBQUssQ0FBQyxDQUFDLFFBQVEsR0FBRyxHQUFHLENBQUMsR0FBRyxHQUFHLENBQUM7U0FDMUM7UUFDRCxXQUFLO1lBQ0gsT0FBTyxRQUFRLENBQUM7U0FDakI7SUFDSCxDQUFDOzs7WUF4RkEsU0FBUyxTQUFDO2dCQUNULFFBQVEsRUFDSixjQUFjO2dCQW9CbEIsUUFBUSxFQUNSOzs7Ozs7Ozs7OztHQVdDO3lCQS9CUTs7Ozs7Ozs7Ozs7Ozs7Ozs7O0dBa0JSO2FBY0Y7Ozs7O3VCQUlFLEtBQUssU0FBQyxVQUFVO29CQUNoQixLQUFLLFNBQUMsT0FBTzt1QkFDYixLQUFLLFNBQUMsZ0JBQWdCO3dCQUN0QixLQUFLLFNBQUMsb0JBQW9COzs7Ozs7O0lBSDNCLHdDQUFvQzs7SUFDcEMscUNBQThCOztJQUM5Qix3Q0FBdUM7O0lBQ3ZDLHlDQUFnRCIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IENvbXBvbmVudCwgSW5wdXQgfSBmcm9tICdAYW5ndWxhci9jb3JlJztcclxuXHJcbkBDb21wb25lbnQoe1xyXG4gIHNlbGVjdG9yOlxyXG4gICAgICAncHJvZ3Jlc3MtYmFyJyxcclxuICBzdHlsZXM6IFtgXHJcbiAgICAgICAgLnByb2dyZXNzLW91dGVyIHtcclxuICAgICAgICAgIHdpZHRoOiA5NiU7XHJcbiAgICAgICAgICBtYXJnaW46IDEwcHggMiU7XHJcbiAgICAgICAgICBwYWRkaW5nOiAzcHg7XHJcbiAgICAgICAgICBiYWNrZ3JvdW5kLWNvbG9yOiAjZjRmNGY0O1xyXG4gICAgICAgICAgYm9yZGVyOiAxcHggc29saWQgI2RjZGNkYztcclxuICAgICAgICAgIGNvbG9yOiAjZmZmO1xyXG4gICAgICAgICAgYm9yZGVyLXJhZGl1czogMjBweDtcclxuICAgICAgICAgIHRleHQtYWxpZ246IGNlbnRlcjtcclxuICAgICAgICB9XHJcbiAgICAgICAgLnByb2dyZXNzLWlubmVyIHtcclxuICAgICAgICAgIG1pbi13aWR0aDogMTUlO1xyXG4gICAgICAgICAgbWluLWhlaWdodDoxOHB4O1xyXG4gICAgICAgICAgd2hpdGUtc3BhY2U6IG5vd3JhcDtcclxuICAgICAgICAgIG92ZXJmbG93OiBoaWRkZW47XHJcbiAgICAgICAgICBwYWRkaW5nOiAwcHg7XHJcbiAgICAgICAgICBib3JkZXItcmFkaXVzOiAyMHB4O1xyXG4gIGBdLFxyXG4gIHRlbXBsYXRlOlxyXG4gIGBcclxuICA8ZGl2IGNsYXNzPVxcXCJwcm9ncmVzcy1vdXRlclxcXCI+XHJcbiAgICA8ZGl2IGNsYXNzPVxcXCJwcm9ncmVzcy1pbm5lclxcXCIgW3N0eWxlLndpZHRoXT1cXFwid2hpY2hQcm9ncmVzcyhwcm9ncmVzcykgKyAnJSdcXFwiIFtzdHlsZS5iYWNrZ3JvdW5kLWNvbG9yXT1cXFwiZGVncmFkZWQgPT0gbnVsbCA/IGNvbG9yIDogd2hpY2hDb2xvcihwcm9ncmVzcylcXFwiPlxyXG4gICAgICA8bmctY29udGFpbmVyICpuZ0lmPVwiIWRpc2FibGVkUFwiPiBcclxuICAgICAgICB7e3doaWNoUHJvZ3Jlc3MocHJvZ3Jlc3MpfX0lXHJcbiAgICAgIDwvbmctY29udGFpbmVyPlxyXG4gICAgICA8bmctY29udGFpbmVyICpuZ0lmPVwiZGlzYWJsZWRQXCI+IFxyXG4gICAgICAgIHt7d2hpY2hQcm9ncmVzcyhwcm9ncmVzcyl9fVxyXG4gICAgICA8L25nLWNvbnRhaW5lcj5cclxuICAgIDwvZGl2PlxyXG4gIDwvZGl2PlxyXG4gIGBcclxufSlcclxuZXhwb3J0IGNsYXNzIFByb2dyZXNzQmFyQ29tcG9uZW50IHtcclxuXHJcbi8qKiBJbnB1dHMgKiovXHJcbiAgQElucHV0KCdwcm9ncmVzcycpIHByb2dyZXNzOiBzdHJpbmc7XHJcbiAgQElucHV0KCdjb2xvcicpIGNvbG9yOiBzdHJpbmc7XHJcbiAgQElucHV0KCdjb2xvci1kZWdyYWRlZCcpIGRlZ3JhZGVkOiBhbnk7XHJcbiAgQElucHV0KCdkaXNhYmxlLXBlcmNlbnRhZ2UnKSBkaXNhYmxlZFA6IGJvb2xlYW47XHJcblxyXG5cclxuY29uc3RydWN0b3IoKSB7XHJcbiAgLy8gRGVmYXVsdCBjb2xvclxyXG4gIHRoaXMuY29sb3IgPSBcIiM0ODhhZmZcIjtcclxuICB0aGlzLmRpc2FibGVkUCA9IGZhbHNlO1xyXG59XHJcblxyXG4vKipcclxuICogUmV0dXJucyBhIGNvbG9yIGZvciBhIGNlcnRhaW4gcGVyY2VudFxyXG4gKiBAcGFyYW0gcGVyY2VudCBUaGUgY3VycmVudCBwcm9ncmVzc1xyXG4gKi9cclxud2hpY2hDb2xvcihwZXJjZW50OiBzdHJpbmcpe1xyXG4gIC8vIEdldCBhbGwgZW50cmllcyBpbmRleCBhcyBhbiBhcnJheVxyXG4gIGxldCBrOiBBcnJheTxhbnk+ID0gT2JqZWN0LmtleXModGhpcy5kZWdyYWRlZCk7XHJcbiAgLy8gQ29udmVydCBzdHJpbmcgdG8gbnVtYmVyXHJcbiAgay5mb3JFYWNoKChlLCBpKSA9PiBrW2ldID0gK2UpO1xyXG4gIC8vIFNvcnQgdGhlbSBieSB2YWx1ZVxyXG4gIGsgPSBrLnNvcnQoKGEsIGIpID0+IGEgLSBiKTtcclxuICAvLyBQZXJjZW50IGFzIG51bWJlclxyXG4gIGxldCBwID0gK3BlcmNlbnRcclxuICAvLyBTZXQgbGFzdCBieSBkZWZhdWx0IGFzIHRoZSBmaXJzdCBvY2N1cnJlbmNlXHJcbiAgbGV0IGxhc3QgPSBrWzBdO1xyXG4gIC8vIEZvcmVhY2gga2V5cyBcclxuICBmb3IobGV0IHZhbCBvZiBrKXtcclxuICAgIC8vIGlmIGN1cnJlbnQgdmFsIGlzIDwgdGhhbiBwZXJjZW50XHJcbiAgICBpZih2YWwgPCBwKXtcclxuICAgICAgbGFzdCA9IHZhbDtcclxuICAgIH1cclxuICAgIC8vIGlmIHZhbCA+PSBwZXJjZW50IHRoZW4gdGhlIHZhbCB0aGF0IHdlIGNvdWxkIHNob3cgaGFzIGJlZW4gcmVhY2hlZFxyXG4gICAgZWxzZSBpZih2YWwgPj0gcCAtMSl7XHJcbiAgICAgIHJldHVybiB0aGlzLmRlZ3JhZGVkW2xhc3RdO1xyXG4gICAgfVxyXG4gIH1cclxuICAvLyBpZiBpdHMgdGhlIGxhc3Qgb25lIHJldHVybiB0aGUgbGFzdFxyXG4gIHJldHVybiB0aGlzLmRlZ3JhZGVkW2xhc3RdO1xyXG59XHJcblxyXG53aGljaFByb2dyZXNzKHByb2dyZXNzOiBzdHJpbmcpe1xyXG4gIHRyeXtcclxuICAgIHJldHVybiBNYXRoLnJvdW5kKCtwcm9ncmVzcyAqIDEwMCkgLyAxMDA7XHJcbiAgfVxyXG4gIGNhdGNoe1xyXG4gICAgcmV0dXJuIHByb2dyZXNzO1xyXG4gIH1cclxufVxyXG59Il19