angular-progress-bar
Version:
An angular progress-bar
136 lines (130 loc) • 10.1 kB
JavaScript
import { Component, Input, NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
import { CommonModule } from '@angular/common';
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
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',] }]
};
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
class ProgressBarModule {
}
ProgressBarModule.decorators = [
{ type: NgModule, args: [{
imports: [
CommonModule
],
declarations: [ProgressBarComponent],
exports: [ProgressBarComponent],
schemas: [CUSTOM_ELEMENTS_SCHEMA]
},] }
];
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
export { ProgressBarComponent, ProgressBarModule };
//# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiYW5ndWxhci1wcm9ncmVzcy1iYXIuanMubWFwIiwic291cmNlcyI6WyJuZzovL2FuZ3VsYXItcHJvZ3Jlc3MtYmFyL2xpYi9hbmd1bGFyLXByb2dyZXNzLWJhci5jb21wb25lbnQudHMiLCJuZzovL2FuZ3VsYXItcHJvZ3Jlc3MtYmFyL2xpYi9hbmd1bGFyLXByb2dyZXNzLWJhci5tb2R1bGUudHMiXSwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgQ29tcG9uZW50LCBJbnB1dCB9IGZyb20gJ0Bhbmd1bGFyL2NvcmUnO1xyXG5cclxuQENvbXBvbmVudCh7XHJcbiAgc2VsZWN0b3I6XHJcbiAgICAgICdwcm9ncmVzcy1iYXInLFxyXG4gIHN0eWxlczogW2BcclxuICAgICAgICAucHJvZ3Jlc3Mtb3V0ZXIge1xyXG4gICAgICAgICAgd2lkdGg6IDk2JTtcclxuICAgICAgICAgIG1hcmdpbjogMTBweCAyJTtcclxuICAgICAgICAgIHBhZGRpbmc6IDNweDtcclxuICAgICAgICAgIGJhY2tncm91bmQtY29sb3I6ICNmNGY0ZjQ7XHJcbiAgICAgICAgICBib3JkZXI6IDFweCBzb2xpZCAjZGNkY2RjO1xyXG4gICAgICAgICAgY29sb3I6ICNmZmY7XHJcbiAgICAgICAgICBib3JkZXItcmFkaXVzOiAyMHB4O1xyXG4gICAgICAgICAgdGV4dC1hbGlnbjogY2VudGVyO1xyXG4gICAgICAgIH1cclxuICAgICAgICAucHJvZ3Jlc3MtaW5uZXIge1xyXG4gICAgICAgICAgbWluLXdpZHRoOiAxNSU7XHJcbiAgICAgICAgICBtaW4taGVpZ2h0OjE4cHg7XHJcbiAgICAgICAgICB3aGl0ZS1zcGFjZTogbm93cmFwO1xyXG4gICAgICAgICAgb3ZlcmZsb3c6IGhpZGRlbjtcclxuICAgICAgICAgIHBhZGRpbmc6IDBweDtcclxuICAgICAgICAgIGJvcmRlci1yYWRpdXM6IDIwcHg7XHJcbiAgYF0sXHJcbiAgdGVtcGxhdGU6XHJcbiAgYFxyXG4gIDxkaXYgY2xhc3M9XFxcInByb2dyZXNzLW91dGVyXFxcIj5cclxuICAgIDxkaXYgY2xhc3M9XFxcInByb2dyZXNzLWlubmVyXFxcIiBbc3R5bGUud2lkdGhdPVxcXCJ3aGljaFByb2dyZXNzKHByb2dyZXNzKSArICclJ1xcXCIgW3N0eWxlLmJhY2tncm91bmQtY29sb3JdPVxcXCJkZWdyYWRlZCA9PSBudWxsID8gY29sb3IgOiB3aGljaENvbG9yKHByb2dyZXNzKVxcXCI+XHJcbiAgICAgIDxuZy1jb250YWluZXIgKm5nSWY9XCIhZGlzYWJsZWRQXCI+IFxyXG4gICAgICAgIHt7d2hpY2hQcm9ncmVzcyhwcm9ncmVzcyl9fSVcclxuICAgICAgPC9uZy1jb250YWluZXI+XHJcbiAgICAgIDxuZy1jb250YWluZXIgKm5nSWY9XCJkaXNhYmxlZFBcIj4gXHJcbiAgICAgICAge3t3aGljaFByb2dyZXNzKHByb2dyZXNzKX19XHJcbiAgICAgIDwvbmctY29udGFpbmVyPlxyXG4gICAgPC9kaXY+XHJcbiAgPC9kaXY+XHJcbiAgYFxyXG59KVxyXG5leHBvcnQgY2xhc3MgUHJvZ3Jlc3NCYXJDb21wb25lbnQge1xyXG5cclxuLyoqIElucHV0cyAqKi9cclxuICBASW5wdXQoJ3Byb2dyZXNzJykgcHJvZ3Jlc3M6IHN0cmluZztcclxuICBASW5wdXQoJ2NvbG9yJykgY29sb3I6IHN0cmluZztcclxuICBASW5wdXQoJ2NvbG9yLWRlZ3JhZGVkJykgZGVncmFkZWQ6IGFueTtcclxuICBASW5wdXQoJ2Rpc2FibGUtcGVyY2VudGFnZScpIGRpc2FibGVkUDogYm9vbGVhbjtcclxuXHJcblxyXG5jb25zdHJ1Y3RvcigpIHtcclxuICAvLyBEZWZhdWx0IGNvbG9yXHJcbiAgdGhpcy5jb2xvciA9IFwiIzQ4OGFmZlwiO1xyXG4gIHRoaXMuZGlzYWJsZWRQID0gZmFsc2U7XHJcbn1cclxuXHJcbi8qKlxyXG4gKiBSZXR1cm5zIGEgY29sb3IgZm9yIGEgY2VydGFpbiBwZXJjZW50XHJcbiAqIEBwYXJhbSBwZXJjZW50IFRoZSBjdXJyZW50IHByb2dyZXNzXHJcbiAqL1xyXG53aGljaENvbG9yKHBlcmNlbnQ6IHN0cmluZyl7XHJcbiAgLy8gR2V0IGFsbCBlbnRyaWVzIGluZGV4IGFzIGFuIGFycmF5XHJcbiAgbGV0IGs6IEFycmF5PGFueT4gPSBPYmplY3Qua2V5cyh0aGlzLmRlZ3JhZGVkKTtcclxuICAvLyBDb252ZXJ0IHN0cmluZyB0byBudW1iZXJcclxuICBrLmZvckVhY2goKGUsIGkpID0+IGtbaV0gPSArZSk7XHJcbiAgLy8gU29ydCB0aGVtIGJ5IHZhbHVlXHJcbiAgayA9IGsuc29ydCgoYSwgYikgPT4gYSAtIGIpO1xyXG4gIC8vIFBlcmNlbnQgYXMgbnVtYmVyXHJcbiAgbGV0IHAgPSArcGVyY2VudFxyXG4gIC8vIFNldCBsYXN0IGJ5IGRlZmF1bHQgYXMgdGhlIGZpcnN0IG9jY3VycmVuY2VcclxuICBsZXQgbGFzdCA9IGtbMF07XHJcbiAgLy8gRm9yZWFjaCBrZXlzIFxyXG4gIGZvcihsZXQgdmFsIG9mIGspe1xyXG4gICAgLy8gaWYgY3VycmVudCB2YWwgaXMgPCB0aGFuIHBlcmNlbnRcclxuICAgIGlmKHZhbCA8IHApe1xyXG4gICAgICBsYXN0ID0gdmFsO1xyXG4gICAgfVxyXG4gICAgLy8gaWYgdmFsID49IHBlcmNlbnQgdGhlbiB0aGUgdmFsIHRoYXQgd2UgY291bGQgc2hvdyBoYXMgYmVlbiByZWFjaGVkXHJcbiAgICBlbHNlIGlmKHZhbCA+PSBwIC0xKXtcclxuICAgICAgcmV0dXJuIHRoaXMuZGVncmFkZWRbbGFzdF07XHJcbiAgICB9XHJcbiAgfVxyXG4gIC8vIGlmIGl0cyB0aGUgbGFzdCBvbmUgcmV0dXJuIHRoZSBsYXN0XHJcbiAgcmV0dXJuIHRoaXMuZGVncmFkZWRbbGFzdF07XHJcbn1cclxuXHJcbndoaWNoUHJvZ3Jlc3MocHJvZ3Jlc3M6IHN0cmluZyl7XHJcbiAgdHJ5e1xyXG4gICAgcmV0dXJuIE1hdGgucm91bmQoK3Byb2dyZXNzICogMTAwKSAvIDEwMDtcclxuICB9XHJcbiAgY2F0Y2h7XHJcbiAgICByZXR1cm4gcHJvZ3Jlc3M7XHJcbiAgfVxyXG59XHJcbn0iLCJpbXBvcnQgeyBOZ01vZHVsZSB9IGZyb20gJ0Bhbmd1bGFyL2NvcmUnO1xyXG5pbXBvcnQgeyBQcm9ncmVzc0JhckNvbXBvbmVudCB9IGZyb20gJy4vYW5ndWxhci1wcm9ncmVzcy1iYXIuY29tcG9uZW50JztcclxuaW1wb3J0IHsgQ1VTVE9NX0VMRU1FTlRTX1NDSEVNQSB9IGZyb20gJ0Bhbmd1bGFyL2NvcmUnO1xyXG5pbXBvcnQgeyBDb21tb25Nb2R1bGUgfSBmcm9tIFwiQGFuZ3VsYXIvY29tbW9uXCI7XHJcblxyXG5ATmdNb2R1bGUoe1xyXG4gIGltcG9ydHM6IFtcclxuICAgIENvbW1vbk1vZHVsZVxyXG4gIF0sXHJcbiAgZGVjbGFyYXRpb25zOiBbUHJvZ3Jlc3NCYXJDb21wb25lbnRdLFxyXG4gIGV4cG9ydHM6IFtQcm9ncmVzc0JhckNvbXBvbmVudF0sXHJcbiAgc2NoZW1hczogW0NVU1RPTV9FTEVNRU5UU19TQ0hFTUFdXHJcbn0pXHJcbmV4cG9ydCBjbGFzcyBQcm9ncmVzc0Jhck1vZHVsZSB7IH0iXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6Ijs7Ozs7OztBQUFBLE1Bc0NhLG9CQUFvQjtJQVNqQzs7UUFFRSxJQUFJLENBQUMsS0FBSyxHQUFHLFNBQVMsQ0FBQztRQUN2QixJQUFJLENBQUMsU0FBUyxHQUFHLEtBQUssQ0FBQztLQUN4Qjs7Ozs7O0lBTUQsVUFBVSxDQUFDLE9BQWU7OztZQUVwQixDQUFDLEdBQWUsTUFBTSxDQUFDLElBQUksQ0FBQyxJQUFJLENBQUMsUUFBUSxDQUFDOztRQUU5QyxDQUFDLENBQUMsT0FBTyxDQUFDLENBQUMsQ0FBQyxFQUFFLENBQUMsS0FBSyxDQUFDLENBQUMsQ0FBQyxDQUFDLEdBQUcsQ0FBQyxDQUFDLENBQUMsQ0FBQzs7UUFFL0IsQ0FBQyxHQUFHLENBQUMsQ0FBQyxJQUFJLENBQUMsQ0FBQyxDQUFDLEVBQUUsQ0FBQyxLQUFLLENBQUMsR0FBRyxDQUFDLENBQUMsQ0FBQzs7O1lBRXhCLENBQUMsR0FBRyxDQUFDLE9BQU87Ozs7O1lBRVosSUFBSSxHQUFHLENBQUMsQ0FBQyxDQUFDLENBQUM7O1FBRWYsS0FBSSxJQUFJLEdBQUcsSUFBSSxDQUFDLEVBQUM7O1lBRWYsSUFBRyxHQUFHLEdBQUcsQ0FBQyxFQUFDO2dCQUNULElBQUksR0FBRyxHQUFHLENBQUM7YUFDWjs7aUJBRUksSUFBRyxHQUFHLElBQUksQ0FBQyxHQUFFLENBQUMsRUFBQztnQkFDbEIsT0FBTyxJQUFJLENBQUMsUUFBUSxDQUFDLElBQUksQ0FBQyxDQUFDO2FBQzVCO1NBQ0Y7O1FBRUQsT0FBTyxJQUFJLENBQUMsUUFBUSxDQUFDLElBQUksQ0FBQyxDQUFDO0tBQzVCOzs7OztJQUVELGFBQWEsQ0FBQyxRQUFnQjtRQUM1QixJQUFHO1lBQ0QsT0FBTyxJQUFJLENBQUMsS0FBSyxDQUFDLENBQUMsUUFBUSxHQUFHLEdBQUcsQ0FBQyxHQUFHLEdBQUcsQ0FBQztTQUMxQztRQUNELFdBQUs7WUFDSCxPQUFPLFFBQVEsQ0FBQztTQUNqQjtLQUNGOzs7WUF4RkEsU0FBUyxTQUFDO2dCQUNULFFBQVEsRUFDSixjQUFjO2dCQW9CbEIsUUFBUSxFQUNSOzs7Ozs7Ozs7OztHQVdDO3lCQS9CUTs7Ozs7Ozs7Ozs7Ozs7Ozs7O0dBa0JSO2FBY0Y7Ozs7O3VCQUlFLEtBQUssU0FBQyxVQUFVO29CQUNoQixLQUFLLFNBQUMsT0FBTzt1QkFDYixLQUFLLFNBQUMsZ0JBQWdCO3dCQUN0QixLQUFLLFNBQUMsb0JBQW9COzs7Ozs7O0FDNUM3QixNQWFhLGlCQUFpQjs7O1lBUjdCLFFBQVEsU0FBQztnQkFDUixPQUFPLEVBQUU7b0JBQ1AsWUFBWTtpQkFDYjtnQkFDRCxZQUFZLEVBQUUsQ0FBQyxvQkFBb0IsQ0FBQztnQkFDcEMsT0FBTyxFQUFFLENBQUMsb0JBQW9CLENBQUM7Z0JBQy9CLE9BQU8sRUFBRSxDQUFDLHNCQUFzQixDQUFDO2FBQ2xDOzs7Ozs7Ozs7Ozs7Ozs7In0=