scrim.js 2.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293
  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, Prop, h } from "@stencil/core";
  7. import { CSS, TEXT } from "./resources";
  8. /**
  9. * @slot - A slot for adding custom content, primarily loading information.
  10. */
  11. export class Scrim {
  12. constructor() {
  13. // --------------------------------------------------------------------------
  14. //
  15. // Properties
  16. //
  17. // --------------------------------------------------------------------------
  18. /** string to override English loading text
  19. * @default "Loading"
  20. */
  21. this.intlLoading = TEXT.loading;
  22. /**
  23. * Determines if the component will have the loader overlay.
  24. * Otherwise, will render opaque disabled state.
  25. */
  26. this.loading = false;
  27. }
  28. // --------------------------------------------------------------------------
  29. //
  30. // Render Method
  31. //
  32. // --------------------------------------------------------------------------
  33. render() {
  34. const { el, loading, intlLoading } = this;
  35. const hasContent = el.innerHTML.trim().length > 0;
  36. const loaderNode = loading ? h("calcite-loader", { active: true, label: intlLoading }) : null;
  37. const contentNode = hasContent ? (h("div", { class: CSS.content },
  38. h("slot", null))) : null;
  39. return (h("div", { class: CSS.scrim },
  40. loaderNode,
  41. contentNode));
  42. }
  43. static get is() { return "calcite-scrim"; }
  44. static get encapsulation() { return "shadow"; }
  45. static get originalStyleUrls() { return {
  46. "$": ["scrim.scss"]
  47. }; }
  48. static get styleUrls() { return {
  49. "$": ["scrim.css"]
  50. }; }
  51. static get properties() { return {
  52. "intlLoading": {
  53. "type": "string",
  54. "mutable": false,
  55. "complexType": {
  56. "original": "string",
  57. "resolved": "string",
  58. "references": {}
  59. },
  60. "required": false,
  61. "optional": true,
  62. "docs": {
  63. "tags": [{
  64. "name": "default",
  65. "text": "\"Loading\""
  66. }],
  67. "text": "string to override English loading text"
  68. },
  69. "attribute": "intl-loading",
  70. "reflect": false,
  71. "defaultValue": "TEXT.loading"
  72. },
  73. "loading": {
  74. "type": "boolean",
  75. "mutable": false,
  76. "complexType": {
  77. "original": "boolean",
  78. "resolved": "boolean",
  79. "references": {}
  80. },
  81. "required": false,
  82. "optional": false,
  83. "docs": {
  84. "tags": [],
  85. "text": "Determines if the component will have the loader overlay.\nOtherwise, will render opaque disabled state."
  86. },
  87. "attribute": "loading",
  88. "reflect": true,
  89. "defaultValue": "false"
  90. }
  91. }; }
  92. static get elementRef() { return "el"; }
  93. }