progress.js 3.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127
  1. /*!
  2. * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  3. * See https://github.com/Esri/calcite-components/blob/master/LICENSE.md for details.
  4. * v1.0.0-beta.82
  5. */
  6. import { Component, Element, h, Prop } from "@stencil/core";
  7. export class Progress {
  8. constructor() {
  9. /** Use indeterminate if finding actual progress value is impossible */
  10. this.type = "determinate";
  11. /** Fraction completed, in the range of 0 - 1.0 */
  12. this.value = 0;
  13. /** For indeterminate progress bars, reverse the animation direction */
  14. this.reversed = false;
  15. }
  16. render() {
  17. const isDeterminate = this.type === "determinate";
  18. const barStyles = isDeterminate ? { width: `${this.value * 100}%` } : {};
  19. return (h("div", { "aria-label": this.label || this.text, "aria-valuemax": 1, "aria-valuemin": 0, "aria-valuenow": this.value, role: "progressbar" },
  20. h("div", { class: "track" },
  21. h("div", { class: {
  22. bar: true,
  23. indeterminate: this.type === "indeterminate",
  24. reversed: this.reversed
  25. }, style: barStyles })),
  26. this.text ? h("div", { class: "text" }, this.text) : null));
  27. }
  28. static get is() { return "calcite-progress"; }
  29. static get encapsulation() { return "shadow"; }
  30. static get originalStyleUrls() { return {
  31. "$": ["progress.scss"]
  32. }; }
  33. static get styleUrls() { return {
  34. "$": ["progress.css"]
  35. }; }
  36. static get properties() { return {
  37. "type": {
  38. "type": "string",
  39. "mutable": false,
  40. "complexType": {
  41. "original": "\"indeterminate\" | \"determinate\"",
  42. "resolved": "\"determinate\" | \"indeterminate\"",
  43. "references": {}
  44. },
  45. "required": false,
  46. "optional": false,
  47. "docs": {
  48. "tags": [],
  49. "text": "Use indeterminate if finding actual progress value is impossible"
  50. },
  51. "attribute": "type",
  52. "reflect": false,
  53. "defaultValue": "\"determinate\""
  54. },
  55. "value": {
  56. "type": "number",
  57. "mutable": false,
  58. "complexType": {
  59. "original": "number",
  60. "resolved": "number",
  61. "references": {}
  62. },
  63. "required": false,
  64. "optional": false,
  65. "docs": {
  66. "tags": [],
  67. "text": "Fraction completed, in the range of 0 - 1.0"
  68. },
  69. "attribute": "value",
  70. "reflect": false,
  71. "defaultValue": "0"
  72. },
  73. "label": {
  74. "type": "string",
  75. "mutable": false,
  76. "complexType": {
  77. "original": "string",
  78. "resolved": "string",
  79. "references": {}
  80. },
  81. "required": false,
  82. "optional": false,
  83. "docs": {
  84. "tags": [],
  85. "text": "Label for the progress indicator"
  86. },
  87. "attribute": "label",
  88. "reflect": false
  89. },
  90. "text": {
  91. "type": "string",
  92. "mutable": false,
  93. "complexType": {
  94. "original": "string",
  95. "resolved": "string",
  96. "references": {}
  97. },
  98. "required": false,
  99. "optional": false,
  100. "docs": {
  101. "tags": [],
  102. "text": "Text to display for the progress indicator"
  103. },
  104. "attribute": "text",
  105. "reflect": false
  106. },
  107. "reversed": {
  108. "type": "boolean",
  109. "mutable": false,
  110. "complexType": {
  111. "original": "boolean",
  112. "resolved": "boolean",
  113. "references": {}
  114. },
  115. "required": false,
  116. "optional": false,
  117. "docs": {
  118. "tags": [],
  119. "text": "For indeterminate progress bars, reverse the animation direction"
  120. },
  121. "attribute": "reversed",
  122. "reflect": false,
  123. "defaultValue": "false"
  124. }
  125. }; }
  126. static get elementRef() { return "el"; }
  127. }