popover-manager.js 4.0 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.97
  5. */
  6. import { h } from "@stencil/core";
  7. import { createObserver } from "../../utils/observers";
  8. /**
  9. * @slot - A slot for adding elements that reference a 'calcite-popover' by the 'selector' property.
  10. * @deprecated No longer required for popover usage.
  11. */
  12. export class PopoverManager {
  13. constructor() {
  14. this.mutationObserver = createObserver("mutation", () => this.setAutoClose());
  15. // --------------------------------------------------------------------------
  16. //
  17. // Properties
  18. //
  19. // --------------------------------------------------------------------------
  20. /**
  21. * CSS Selector to match reference elements for popovers. Reference elements will be identified by this selector in order to open their associated popover.
  22. *
  23. * @default `[data-calcite-popover-reference]`
  24. */
  25. this.selector = "[data-calcite-popover-reference]";
  26. /**
  27. * Automatically closes any currently open popovers when clicking outside of a popover.
  28. */
  29. this.autoClose = false;
  30. }
  31. autoCloseHandler() {
  32. this.setAutoClose();
  33. }
  34. // --------------------------------------------------------------------------
  35. //
  36. // Lifecycle
  37. //
  38. // --------------------------------------------------------------------------
  39. connectedCallback() {
  40. var _a;
  41. this.setAutoClose();
  42. (_a = this.mutationObserver) === null || _a === void 0 ? void 0 : _a.observe(this.el, { childList: true, subtree: true });
  43. }
  44. disconnectedCallback() {
  45. var _a;
  46. (_a = this.mutationObserver) === null || _a === void 0 ? void 0 : _a.disconnect();
  47. }
  48. // --------------------------------------------------------------------------
  49. //
  50. // Render Methods
  51. //
  52. // --------------------------------------------------------------------------
  53. render() {
  54. return h("slot", null);
  55. }
  56. // --------------------------------------------------------------------------
  57. //
  58. // Private Methods
  59. //
  60. // --------------------------------------------------------------------------
  61. setAutoClose() {
  62. const { autoClose, el } = this;
  63. el.querySelectorAll("calcite-popover").forEach((popover) => (popover.autoClose = autoClose));
  64. }
  65. static get is() { return "calcite-popover-manager"; }
  66. static get encapsulation() { return "shadow"; }
  67. static get originalStyleUrls() {
  68. return {
  69. "$": ["popover-manager.scss"]
  70. };
  71. }
  72. static get styleUrls() {
  73. return {
  74. "$": ["popover-manager.css"]
  75. };
  76. }
  77. static get properties() {
  78. return {
  79. "selector": {
  80. "type": "string",
  81. "mutable": false,
  82. "complexType": {
  83. "original": "string",
  84. "resolved": "string",
  85. "references": {}
  86. },
  87. "required": false,
  88. "optional": false,
  89. "docs": {
  90. "tags": [{
  91. "name": "default",
  92. "text": "`[data-calcite-popover-reference]`"
  93. }],
  94. "text": "CSS Selector to match reference elements for popovers. Reference elements will be identified by this selector in order to open their associated popover."
  95. },
  96. "attribute": "selector",
  97. "reflect": true,
  98. "defaultValue": "\"[data-calcite-popover-reference]\""
  99. },
  100. "autoClose": {
  101. "type": "boolean",
  102. "mutable": false,
  103. "complexType": {
  104. "original": "boolean",
  105. "resolved": "boolean",
  106. "references": {}
  107. },
  108. "required": false,
  109. "optional": false,
  110. "docs": {
  111. "tags": [],
  112. "text": "Automatically closes any currently open popovers when clicking outside of a popover."
  113. },
  114. "attribute": "auto-close",
  115. "reflect": true,
  116. "defaultValue": "false"
  117. }
  118. };
  119. }
  120. static get elementRef() { return "el"; }
  121. static get watchers() {
  122. return [{
  123. "propName": "autoClose",
  124. "methodName": "autoCloseHandler"
  125. }];
  126. }
  127. }