progressbar.js 10 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139
  1. /**
  2. * @fileoverview added by tsickle
  3. * @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
  4. */
  5. import { ChangeDetectionStrategy, Component, Input, ViewEncapsulation } from '@angular/core';
  6. import { getValueInRange, isNumber } from '../util/util';
  7. import { NgbProgressbarConfig } from './progressbar-config';
  8. /**
  9. * A directive that provides feedback on the progress of a workflow or an action.
  10. */
  11. export class NgbProgressbar {
  12. /**
  13. * @param {?} config
  14. */
  15. constructor(config) {
  16. /**
  17. * The current value for the progress bar.
  18. *
  19. * Should be in the `[0, max]` range.
  20. */
  21. this.value = 0;
  22. this.max = config.max;
  23. this.animated = config.animated;
  24. this.striped = config.striped;
  25. this.textType = config.textType;
  26. this.type = config.type;
  27. this.showValue = config.showValue;
  28. this.height = config.height;
  29. }
  30. /**
  31. * The maximal value to be displayed in the progress bar.
  32. *
  33. * Should be a positive number. Will default to 100 otherwise.
  34. * @param {?} max
  35. * @return {?}
  36. */
  37. set max(max) {
  38. this._max = !isNumber(max) || max <= 0 ? 100 : max;
  39. }
  40. /**
  41. * @return {?}
  42. */
  43. get max() { return this._max; }
  44. /**
  45. * @return {?}
  46. */
  47. getValue() { return getValueInRange(this.value, this.max); }
  48. /**
  49. * @return {?}
  50. */
  51. getPercentValue() { return 100 * this.getValue() / this.max; }
  52. }
  53. NgbProgressbar.decorators = [
  54. { type: Component, args: [{
  55. selector: 'ngb-progressbar',
  56. changeDetection: ChangeDetectionStrategy.OnPush,
  57. encapsulation: ViewEncapsulation.None,
  58. template: `
  59. <div class="progress" [style.height]="height">
  60. <div class="progress-bar{{type ? ' bg-' + type : ''}}{{textType ? ' text-' + textType : ''}}
  61. {{animated ? ' progress-bar-animated' : ''}}{{striped ? ' progress-bar-striped' : ''}}" role="progressbar" [style.width.%]="getPercentValue()"
  62. [attr.aria-valuenow]="getValue()" aria-valuemin="0" [attr.aria-valuemax]="max">
  63. <span *ngIf="showValue" i18n="@@ngb.progressbar.value">{{getPercentValue()}}%</span><ng-content></ng-content>
  64. </div>
  65. </div>
  66. `
  67. }] }
  68. ];
  69. /** @nocollapse */
  70. NgbProgressbar.ctorParameters = () => [
  71. { type: NgbProgressbarConfig }
  72. ];
  73. NgbProgressbar.propDecorators = {
  74. max: [{ type: Input }],
  75. animated: [{ type: Input }],
  76. striped: [{ type: Input }],
  77. showValue: [{ type: Input }],
  78. textType: [{ type: Input }],
  79. type: [{ type: Input }],
  80. value: [{ type: Input }],
  81. height: [{ type: Input }]
  82. };
  83. if (false) {
  84. /**
  85. * @type {?}
  86. * @private
  87. */
  88. NgbProgressbar.prototype._max;
  89. /**
  90. * If `true`, the stripes on the progress bar are animated.
  91. *
  92. * Takes effect only for browsers supporting CSS3 animations, and if `striped` is `true`.
  93. * @type {?}
  94. */
  95. NgbProgressbar.prototype.animated;
  96. /**
  97. * If `true`, the progress bars will be displayed as striped.
  98. * @type {?}
  99. */
  100. NgbProgressbar.prototype.striped;
  101. /**
  102. * If `true`, the current percentage will be shown in the `xx%` format.
  103. * @type {?}
  104. */
  105. NgbProgressbar.prototype.showValue;
  106. /**
  107. * Optional text variant type of the progress bar.
  108. *
  109. * Supports types based on Bootstrap background color variants, like:
  110. * `"success"`, `"info"`, `"warning"`, `"danger"`, `"primary"`, `"secondary"`, `"dark"` and so on.
  111. *
  112. * \@since 5.2.0
  113. * @type {?}
  114. */
  115. NgbProgressbar.prototype.textType;
  116. /**
  117. * The type of the progress bar.
  118. *
  119. * Supports types based on Bootstrap background color variants, like:
  120. * `"success"`, `"info"`, `"warning"`, `"danger"`, `"primary"`, `"secondary"`, `"dark"` and so on.
  121. * @type {?}
  122. */
  123. NgbProgressbar.prototype.type;
  124. /**
  125. * The current value for the progress bar.
  126. *
  127. * Should be in the `[0, max]` range.
  128. * @type {?}
  129. */
  130. NgbProgressbar.prototype.value;
  131. /**
  132. * The height of the progress bar.
  133. *
  134. * Accepts any valid CSS height values, ex. `"2rem"`
  135. * @type {?}
  136. */
  137. NgbProgressbar.prototype.height;
  138. }
  139. //# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoicHJvZ3Jlc3NiYXIuanMiLCJzb3VyY2VSb290Ijoibmc6Ly9AbmctYm9vdHN0cmFwL25nLWJvb3RzdHJhcC8iLCJzb3VyY2VzIjpbInByb2dyZXNzYmFyL3Byb2dyZXNzYmFyLnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiI7Ozs7QUFBQSxPQUFPLEVBQUMsdUJBQXVCLEVBQUUsU0FBUyxFQUFFLEtBQUssRUFBRSxpQkFBaUIsRUFBQyxNQUFNLGVBQWUsQ0FBQztBQUMzRixPQUFPLEVBQUMsZUFBZSxFQUFFLFFBQVEsRUFBQyxNQUFNLGNBQWMsQ0FBQztBQUN2RCxPQUFPLEVBQUMsb0JBQW9CLEVBQUMsTUFBTSxzQkFBc0IsQ0FBQzs7OztBQW1CMUQsTUFBTSxPQUFPLGNBQWM7Ozs7SUFnRXpCLFlBQVksTUFBNEI7Ozs7OztRQVQvQixVQUFLLEdBQUcsQ0FBQyxDQUFDO1FBVWpCLElBQUksQ0FBQyxHQUFHLEdBQUcsTUFBTSxDQUFDLEdBQUcsQ0FBQztRQUN0QixJQUFJLENBQUMsUUFBUSxHQUFHLE1BQU0sQ0FBQyxRQUFRLENBQUM7UUFDaEMsSUFBSSxDQUFDLE9BQU8sR0FBRyxNQUFNLENBQUMsT0FBTyxDQUFDO1FBQzlCLElBQUksQ0FBQyxRQUFRLEdBQUcsTUFBTSxDQUFDLFFBQVEsQ0FBQztRQUNoQyxJQUFJLENBQUMsSUFBSSxHQUFHLE1BQU0sQ0FBQyxJQUFJLENBQUM7UUFDeEIsSUFBSSxDQUFDLFNBQVMsR0FBRyxNQUFNLENBQUMsU0FBUyxDQUFDO1FBQ2xDLElBQUksQ0FBQyxNQUFNLEdBQUcsTUFBTSxDQUFDLE1BQU0sQ0FBQztJQUM5QixDQUFDOzs7Ozs7OztJQWhFRCxJQUNJLEdBQUcsQ0FBQyxHQUFXO1FBQ2pCLElBQUksQ0FBQyxJQUFJLEdBQUcsQ0FBQyxRQUFRLENBQUMsR0FBRyxDQUFDLElBQUksR0FBRyxJQUFJLENBQUMsQ0FBQyxDQUFDLENBQUMsR0FBRyxDQUFDLENBQUMsQ0FBQyxHQUFHLENBQUM7SUFDckQsQ0FBQzs7OztJQUVELElBQUksR0FBRyxLQUFhLE9BQU8sSUFBSSxDQUFDLElBQUksQ0FBQyxDQUFDLENBQUM7Ozs7SUE2RHZDLFFBQVEsS0FBSyxPQUFPLGVBQWUsQ0FBQyxJQUFJLENBQUMsS0FBSyxFQUFFLElBQUksQ0FBQyxHQUFHLENBQUMsQ0FBQyxDQUFDLENBQUM7Ozs7SUFFNUQsZUFBZSxLQUFLLE9BQU8sR0FBRyxHQUFHLElBQUksQ0FBQyxRQUFRLEVBQUUsR0FBRyxJQUFJLENBQUMsR0FBRyxDQUFDLENBQUMsQ0FBQzs7O1lBMUYvRCxTQUFTLFNBQUM7Z0JBQ1QsUUFBUSxFQUFFLGlCQUFpQjtnQkFDM0IsZUFBZSxFQUFFLHVCQUF1QixDQUFDLE1BQU07Z0JBQy9DLGFBQWEsRUFBRSxpQkFBaUIsQ0FBQyxJQUFJO2dCQUNyQyxRQUFRLEVBQUU7Ozs7Ozs7O0dBUVQ7YUFDRjs7OztZQWxCTyxvQkFBb0I7OztrQkEyQnpCLEtBQUs7dUJBWUwsS0FBSztzQkFLTCxLQUFLO3dCQUtMLEtBQUs7dUJBVUwsS0FBSzttQkFRTCxLQUFLO29CQU9MLEtBQUs7cUJBT0wsS0FBSzs7Ozs7OztJQTdETiw4QkFBcUI7Ozs7Ozs7SUFtQnJCLGtDQUEyQjs7Ozs7SUFLM0IsaUNBQTBCOzs7OztJQUsxQixtQ0FBNEI7Ozs7Ozs7Ozs7SUFVNUIsa0NBQTBCOzs7Ozs7OztJQVExQiw4QkFBc0I7Ozs7Ozs7SUFPdEIsK0JBQW1COzs7Ozs7O0lBT25CLGdDQUF3QiIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7Q2hhbmdlRGV0ZWN0aW9uU3RyYXRlZ3ksIENvbXBvbmVudCwgSW5wdXQsIFZpZXdFbmNhcHN1bGF0aW9ufSBmcm9tICdAYW5ndWxhci9jb3JlJztcbmltcG9ydCB7Z2V0VmFsdWVJblJhbmdlLCBpc051bWJlcn0gZnJvbSAnLi4vdXRpbC91dGlsJztcbmltcG9ydCB7TmdiUHJvZ3Jlc3NiYXJDb25maWd9IGZyb20gJy4vcHJvZ3Jlc3NiYXItY29uZmlnJztcblxuLyoqXG4gKiBBIGRpcmVjdGl2ZSB0aGF0IHByb3ZpZGVzIGZlZWRiYWNrIG9uIHRoZSBwcm9ncmVzcyBvZiBhIHdvcmtmbG93IG9yIGFuIGFjdGlvbi5cbiAqL1xuQENvbXBvbmVudCh7XG4gIHNlbGVjdG9yOiAnbmdiLXByb2dyZXNzYmFyJyxcbiAgY2hhbmdlRGV0ZWN0aW9uOiBDaGFuZ2VEZXRlY3Rpb25TdHJhdGVneS5PblB1c2gsXG4gIGVuY2Fwc3VsYXRpb246IFZpZXdFbmNhcHN1bGF0aW9uLk5vbmUsXG4gIHRlbXBsYXRlOiBgXG4gICAgPGRpdiBjbGFzcz1cInByb2dyZXNzXCIgW3N0eWxlLmhlaWdodF09XCJoZWlnaHRcIj5cbiAgICAgIDxkaXYgY2xhc3M9XCJwcm9ncmVzcy1iYXJ7e3R5cGUgPyAnIGJnLScgKyB0eXBlIDogJyd9fXt7dGV4dFR5cGUgPyAnIHRleHQtJyArIHRleHRUeXBlIDogJyd9fVxuICAgICAge3thbmltYXRlZCA/ICcgcHJvZ3Jlc3MtYmFyLWFuaW1hdGVkJyA6ICcnfX17e3N0cmlwZWQgPyAnIHByb2dyZXNzLWJhci1zdHJpcGVkJyA6ICcnfX1cIiByb2xlPVwicHJvZ3Jlc3NiYXJcIiBbc3R5bGUud2lkdGguJV09XCJnZXRQZXJjZW50VmFsdWUoKVwiXG4gICAgICBbYXR0ci5hcmlhLXZhbHVlbm93XT1cImdldFZhbHVlKClcIiBhcmlhLXZhbHVlbWluPVwiMFwiIFthdHRyLmFyaWEtdmFsdWVtYXhdPVwibWF4XCI+XG4gICAgICAgIDxzcGFuICpuZ0lmPVwic2hvd1ZhbHVlXCIgaTE4bj1cIkBAbmdiLnByb2dyZXNzYmFyLnZhbHVlXCI+e3tnZXRQZXJjZW50VmFsdWUoKX19JTwvc3Bhbj48bmctY29udGVudD48L25nLWNvbnRlbnQ+XG4gICAgICA8L2Rpdj5cbiAgICA8L2Rpdj5cbiAgYFxufSlcbmV4cG9ydCBjbGFzcyBOZ2JQcm9ncmVzc2JhciB7XG4gIHByaXZhdGUgX21heDogbnVtYmVyO1xuXG4gIC8qKlxuICAgKiBUaGUgbWF4aW1hbCB2YWx1ZSB0byBiZSBkaXNwbGF5ZWQgaW4gdGhlIHByb2dyZXNzIGJhci5cbiAgICpcbiAgICogU2hvdWxkIGJlIGEgcG9zaXRpdmUgbnVtYmVyLiBXaWxsIGRlZmF1bHQgdG8gMTAwIG90aGVyd2lzZS5cbiAgICovXG4gIEBJbnB1dCgpXG4gIHNldCBtYXgobWF4OiBudW1iZXIpIHtcbiAgICB0aGlzLl9tYXggPSAhaXNOdW1iZXIobWF4KSB8fCBtYXggPD0gMCA/IDEwMCA6IG1heDtcbiAgfVxuXG4gIGdldCBtYXgoKTogbnVtYmVyIHsgcmV0dXJuIHRoaXMuX21heDsgfVxuXG4gIC8qKlxuICAgKiBJZiBgdHJ1ZWAsIHRoZSBzdHJpcGVzIG9uIHRoZSBwcm9ncmVzcyBiYXIgYXJlIGFuaW1hdGVkLlxuICAgKlxuICAgKiBUYWtlcyBlZmZlY3Qgb25seSBmb3IgYnJvd3NlcnMgc3VwcG9ydGluZyBDU1MzIGFuaW1hdGlvbnMsIGFuZCBpZiBgc3RyaXBlZGAgaXMgYHRydWVgLlxuICAgKi9cbiAgQElucHV0KCkgYW5pbWF0ZWQ6IGJvb2xlYW47XG5cbiAgLyoqXG4gICAqIElmIGB0cnVlYCwgdGhlIHByb2dyZXNzIGJhcnMgd2lsbCBiZSBkaXNwbGF5ZWQgYXMgc3RyaXBlZC5cbiAgICovXG4gIEBJbnB1dCgpIHN0cmlwZWQ6IGJvb2xlYW47XG5cbiAgLyoqXG4gICAqIElmIGB0cnVlYCwgdGhlIGN1cnJlbnQgcGVyY2VudGFnZSB3aWxsIGJlIHNob3duIGluIHRoZSBgeHglYCBmb3JtYXQuXG4gICAqL1xuICBASW5wdXQoKSBzaG93VmFsdWU6IGJvb2xlYW47XG5cbiAgLyoqXG4gICAqIE9wdGlvbmFsIHRleHQgdmFyaWFudCB0eXBlIG9mIHRoZSBwcm9ncmVzcyBiYXIuXG4gICAqXG4gICAqIFN1cHBvcnRzIHR5cGVzIGJhc2VkIG9uIEJvb3RzdHJhcCBiYWNrZ3JvdW5kIGNvbG9yIHZhcmlhbnRzLCBsaWtlOlxuICAgKiAgYFwic3VjY2Vzc1wiYCwgYFwiaW5mb1wiYCwgYFwid2FybmluZ1wiYCwgYFwiZGFuZ2VyXCJgLCBgXCJwcmltYXJ5XCJgLCBgXCJzZWNvbmRhcnlcImAsIGBcImRhcmtcImAgYW5kIHNvIG9uLlxuICAgKlxuICAgKiBAc2luY2UgNS4yLjBcbiAgICovXG4gIEBJbnB1dCgpIHRleHRUeXBlOiBzdHJpbmc7XG5cbiAgLyoqXG4gICAqIFRoZSB0eXBlIG9mIHRoZSBwcm9ncmVzcyBiYXIuXG4gICAqXG4gICAqIFN1cHBvcnRzIHR5cGVzIGJhc2VkIG9uIEJvb3RzdHJhcCBiYWNrZ3JvdW5kIGNvbG9yIHZhcmlhbnRzLCBsaWtlOlxuICAgKiAgYFwic3VjY2Vzc1wiYCwgYFwiaW5mb1wiYCwgYFwid2FybmluZ1wiYCwgYFwiZGFuZ2VyXCJgLCBgXCJwcmltYXJ5XCJgLCBgXCJzZWNvbmRhcnlcImAsIGBcImRhcmtcImAgYW5kIHNvIG9uLlxuICAgKi9cbiAgQElucHV0KCkgdHlwZTogc3RyaW5nO1xuXG4gIC8qKlxuICAgKiBUaGUgY3VycmVudCB2YWx1ZSBmb3IgdGhlIHByb2dyZXNzIGJhci5cbiAgICpcbiAgICogU2hvdWxkIGJlIGluIHRoZSBgWzAsIG1heF1gIHJhbmdlLlxuICAgKi9cbiAgQElucHV0KCkgdmFsdWUgPSAwO1xuXG4gIC8qKlxuICAgKiBUaGUgaGVpZ2h0IG9mIHRoZSBwcm9ncmVzcyBiYXIuXG4gICAqXG4gICAqIEFjY2VwdHMgYW55IHZhbGlkIENTUyBoZWlnaHQgdmFsdWVzLCBleC4gYFwiMnJlbVwiYFxuICAgKi9cbiAgQElucHV0KCkgaGVpZ2h0OiBzdHJpbmc7XG5cbiAgY29uc3RydWN0b3IoY29uZmlnOiBOZ2JQcm9ncmVzc2JhckNvbmZpZykge1xuICAgIHRoaXMubWF4ID0gY29uZmlnLm1heDtcbiAgICB0aGlzLmFuaW1hdGVkID0gY29uZmlnLmFuaW1hdGVkO1xuICAgIHRoaXMuc3RyaXBlZCA9IGNvbmZpZy5zdHJpcGVkO1xuICAgIHRoaXMudGV4dFR5cGUgPSBjb25maWcudGV4dFR5cGU7XG4gICAgdGhpcy50eXBlID0gY29uZmlnLnR5cGU7XG4gICAgdGhpcy5zaG93VmFsdWUgPSBjb25maWcuc2hvd1ZhbHVlO1xuICAgIHRoaXMuaGVpZ2h0ID0gY29uZmlnLmhlaWdodDtcbiAgfVxuXG4gIGdldFZhbHVlKCkgeyByZXR1cm4gZ2V0VmFsdWVJblJhbmdlKHRoaXMudmFsdWUsIHRoaXMubWF4KTsgfVxuXG4gIGdldFBlcmNlbnRWYWx1ZSgpIHsgcmV0dXJuIDEwMCAqIHRoaXMuZ2V0VmFsdWUoKSAvIHRoaXMubWF4OyB9XG59XG4iXX0=