ngx-bootstrap-progressbar.js 8.5 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322
  1. import { Injectable, Component, Input, HostBinding, ElementRef, Host, Renderer2, NgModule } from '@angular/core';
  2. import { isBs3 } from 'ngx-bootstrap/utils';
  3. import { CommonModule } from '@angular/common';
  4. /**
  5. * @fileoverview added by tsickle
  6. * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
  7. */
  8. class ProgressbarConfig {
  9. constructor() {
  10. /**
  11. * if `true` changing value of progress bar will be animated
  12. */
  13. this.animate = false;
  14. /**
  15. * maximum total value of progress element
  16. */
  17. this.max = 100;
  18. }
  19. }
  20. ProgressbarConfig.decorators = [
  21. { type: Injectable }
  22. ];
  23. /**
  24. * @fileoverview added by tsickle
  25. * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
  26. */
  27. class ProgressbarComponent {
  28. /**
  29. * @param {?} config
  30. */
  31. constructor(config) {
  32. this.isStacked = false;
  33. this.addClass = true;
  34. /* tslint:disable-next-line:no-any */
  35. this.bars = [];
  36. this._max = 100;
  37. Object.assign(this, config);
  38. }
  39. /**
  40. * if `true` changing value of progress bar will be animated
  41. * @param {?} value
  42. * @return {?}
  43. */
  44. set animate(value) {
  45. this._animate = value;
  46. this.bars.forEach((/**
  47. * @param {?} b
  48. * @return {?}
  49. */
  50. (b) => {
  51. b.animate = value;
  52. }));
  53. }
  54. /**
  55. * If `true`, striped classes are applied
  56. * @param {?} value
  57. * @return {?}
  58. */
  59. set striped(value) {
  60. this._striped = value;
  61. this.bars.forEach((/**
  62. * @param {?} b
  63. * @return {?}
  64. */
  65. (b) => {
  66. b.striped = value;
  67. }));
  68. }
  69. /**
  70. * current value of progress bar. Could be a number or array of objects
  71. * like {"value":15,"type":"info","label":"15 %"}
  72. * @param {?} value
  73. * @return {?}
  74. */
  75. set value(value) {
  76. this.isStacked = Array.isArray(value);
  77. this._value = value;
  78. }
  79. /**
  80. * @return {?}
  81. */
  82. get isBs3() {
  83. return isBs3();
  84. }
  85. /**
  86. * maximum total value of progress element
  87. * @return {?}
  88. */
  89. get max() {
  90. return this._max;
  91. }
  92. /**
  93. * @param {?} v
  94. * @return {?}
  95. */
  96. set max(v) {
  97. this._max = v;
  98. this.bars.forEach((/**
  99. * @param {?} bar
  100. * @return {?}
  101. */
  102. (bar) => {
  103. bar.recalculatePercentage();
  104. }));
  105. }
  106. /**
  107. * @param {?} bar
  108. * @return {?}
  109. */
  110. addBar(bar) {
  111. bar.animate = this._animate;
  112. bar.striped = this._striped;
  113. this.bars.push(bar);
  114. }
  115. /**
  116. * @param {?} bar
  117. * @return {?}
  118. */
  119. removeBar(bar) {
  120. this.bars.splice(this.bars.indexOf(bar), 1);
  121. }
  122. }
  123. ProgressbarComponent.decorators = [
  124. { type: Component, args: [{
  125. selector: 'progressbar',
  126. template: "<bar [type]=\"type\" [value]=\"_value\" *ngIf=\"!isStacked\">\n <ng-content></ng-content>\n</bar>\n<ng-template [ngIf]=\"isStacked\">\n <bar *ngFor=\"let item of _value\" [type]=\"item.type\" [value]=\"item.value\">{{ item.label }}</bar>\n</ng-template>\n",
  127. styles: [`
  128. :host {
  129. width: 100%;
  130. display: flex;
  131. }
  132. `]
  133. }] }
  134. ];
  135. /** @nocollapse */
  136. ProgressbarComponent.ctorParameters = () => [
  137. { type: ProgressbarConfig }
  138. ];
  139. ProgressbarComponent.propDecorators = {
  140. animate: [{ type: Input }],
  141. striped: [{ type: Input }],
  142. type: [{ type: Input }],
  143. value: [{ type: Input }],
  144. max: [{ type: HostBinding, args: ['attr.max',] }, { type: Input }],
  145. addClass: [{ type: HostBinding, args: ['class.progress',] }]
  146. };
  147. /**
  148. * @fileoverview added by tsickle
  149. * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
  150. */
  151. // todo: number pipe
  152. // todo: use query from progress?
  153. class BarComponent {
  154. /**
  155. * @param {?} el
  156. * @param {?} progress
  157. * @param {?} renderer
  158. */
  159. constructor(el, progress, renderer) {
  160. this.el = el;
  161. this.renderer = renderer;
  162. this.addClass = true;
  163. this.percent = 0;
  164. this.progress = progress;
  165. }
  166. /**
  167. * provide one of the four supported contextual classes: `success`, `info`, `warning`, `danger`
  168. * @return {?}
  169. */
  170. get type() {
  171. return this._type;
  172. }
  173. /**
  174. * @param {?} v
  175. * @return {?}
  176. */
  177. set type(v) {
  178. this._type = v;
  179. this.applyTypeClasses();
  180. }
  181. /**
  182. * current value of progress bar
  183. * @return {?}
  184. */
  185. get value() {
  186. return this._value;
  187. }
  188. /**
  189. * @param {?} v
  190. * @return {?}
  191. */
  192. set value(v) {
  193. if (!v && v !== 0) {
  194. return;
  195. }
  196. this._value = v;
  197. this.recalculatePercentage();
  198. }
  199. /**
  200. * @return {?}
  201. */
  202. get setBarWidth() {
  203. this.recalculatePercentage();
  204. return this.percent;
  205. }
  206. /**
  207. * @return {?}
  208. */
  209. get isBs3() {
  210. return isBs3();
  211. }
  212. /**
  213. * @return {?}
  214. */
  215. ngOnInit() {
  216. this.progress.addBar(this);
  217. }
  218. /**
  219. * @return {?}
  220. */
  221. ngOnDestroy() {
  222. this.progress.removeBar(this);
  223. }
  224. /**
  225. * @return {?}
  226. */
  227. recalculatePercentage() {
  228. this.percent = +(this.value / this.progress.max * 100).toFixed(2);
  229. /** @type {?} */
  230. const totalPercentage = this.progress.bars
  231. .reduce((/**
  232. * @param {?} total
  233. * @param {?} bar
  234. * @return {?}
  235. */
  236. function (total, bar) {
  237. return total + bar.percent;
  238. }), 0);
  239. if (totalPercentage > 100) {
  240. this.percent -= totalPercentage - 100;
  241. }
  242. }
  243. /**
  244. * @private
  245. * @return {?}
  246. */
  247. applyTypeClasses() {
  248. if (this._prevType) {
  249. /** @type {?} */
  250. const barTypeClass = `progress-bar-${this._prevType}`;
  251. /** @type {?} */
  252. const bgClass = `bg-${this._prevType}`;
  253. this.renderer.removeClass(this.el.nativeElement, barTypeClass);
  254. this.renderer.removeClass(this.el.nativeElement, bgClass);
  255. this._prevType = null;
  256. }
  257. if (this._type) {
  258. /** @type {?} */
  259. const barTypeClass = `progress-bar-${this._type}`;
  260. /** @type {?} */
  261. const bgClass = `bg-${this._type}`;
  262. this.renderer.addClass(this.el.nativeElement, barTypeClass);
  263. this.renderer.addClass(this.el.nativeElement, bgClass);
  264. this._prevType = this._type;
  265. }
  266. }
  267. }
  268. BarComponent.decorators = [
  269. { type: Component, args: [{
  270. selector: 'bar',
  271. template: "<ng-content></ng-content>\n",
  272. host: {
  273. role: 'progressbar',
  274. 'aria-valuemin': '0',
  275. '[class.progress-bar-animated]': '!isBs3 && animate',
  276. '[class.progress-bar-striped]': 'striped',
  277. '[class.active]': 'isBs3 && animate',
  278. '[attr.aria-valuenow]': 'value',
  279. '[attr.aria-valuetext]': 'percent ? percent.toFixed(0) + "%" : ""',
  280. '[attr.aria-valuemax]': 'max',
  281. '[style.height.%]': '"100"'
  282. }
  283. }] }
  284. ];
  285. /** @nocollapse */
  286. BarComponent.ctorParameters = () => [
  287. { type: ElementRef },
  288. { type: ProgressbarComponent, decorators: [{ type: Host }] },
  289. { type: Renderer2 }
  290. ];
  291. BarComponent.propDecorators = {
  292. type: [{ type: Input }],
  293. value: [{ type: Input }],
  294. setBarWidth: [{ type: HostBinding, args: ['style.width.%',] }],
  295. addClass: [{ type: HostBinding, args: ['class.progress-bar',] }]
  296. };
  297. /**
  298. * @fileoverview added by tsickle
  299. * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
  300. */
  301. class ProgressbarModule {
  302. /**
  303. * @return {?}
  304. */
  305. static forRoot() {
  306. return { ngModule: ProgressbarModule, providers: [ProgressbarConfig] };
  307. }
  308. }
  309. ProgressbarModule.decorators = [
  310. { type: NgModule, args: [{
  311. imports: [CommonModule],
  312. declarations: [BarComponent, ProgressbarComponent],
  313. exports: [BarComponent, ProgressbarComponent]
  314. },] }
  315. ];
  316. export { BarComponent, ProgressbarComponent, ProgressbarConfig, ProgressbarModule };
  317. //# sourceMappingURL=ngx-bootstrap-progressbar.js.map