calcite-popover-manager.js 5.4 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 { proxyCustomElement, HTMLElement, h } from '@stencil/core/internal/client';
  7. import { c as createObserver } from './observers.js';
  8. const popoverManagerCss = "@-webkit-keyframes in{0%{opacity:0}100%{opacity:1}}@keyframes in{0%{opacity:0}100%{opacity:1}}@-webkit-keyframes in-down{0%{opacity:0;-webkit-transform:translate3D(0, -5px, 0);transform:translate3D(0, -5px, 0)}100%{opacity:1;-webkit-transform:translate3D(0, 0, 0);transform:translate3D(0, 0, 0)}}@keyframes in-down{0%{opacity:0;-webkit-transform:translate3D(0, -5px, 0);transform:translate3D(0, -5px, 0)}100%{opacity:1;-webkit-transform:translate3D(0, 0, 0);transform:translate3D(0, 0, 0)}}@-webkit-keyframes in-up{0%{opacity:0;-webkit-transform:translate3D(0, 5px, 0);transform:translate3D(0, 5px, 0)}100%{opacity:1;-webkit-transform:translate3D(0, 0, 0);transform:translate3D(0, 0, 0)}}@keyframes in-up{0%{opacity:0;-webkit-transform:translate3D(0, 5px, 0);transform:translate3D(0, 5px, 0)}100%{opacity:1;-webkit-transform:translate3D(0, 0, 0);transform:translate3D(0, 0, 0)}}@-webkit-keyframes in-scale{0%{opacity:0;-webkit-transform:scale3D(0.95, 0.95, 1);transform:scale3D(0.95, 0.95, 1)}100%{opacity:1;-webkit-transform:scale3D(1, 1, 1);transform:scale3D(1, 1, 1)}}@keyframes in-scale{0%{opacity:0;-webkit-transform:scale3D(0.95, 0.95, 1);transform:scale3D(0.95, 0.95, 1)}100%{opacity:1;-webkit-transform:scale3D(1, 1, 1);transform:scale3D(1, 1, 1)}}:root{--calcite-animation-timing:calc(150ms * var(--calcite-internal-duration-factor));--calcite-internal-duration-factor:var(--calcite-duration-factor, 1);--calcite-internal-animation-timing-fast:calc(100ms * var(--calcite-internal-duration-factor));--calcite-internal-animation-timing-medium:calc(200ms * var(--calcite-internal-duration-factor));--calcite-internal-animation-timing-slow:calc(300ms * var(--calcite-internal-duration-factor))}.calcite-animate{opacity:0;-webkit-animation-fill-mode:both;animation-fill-mode:both;-webkit-animation-duration:var(--calcite-animation-timing);animation-duration:var(--calcite-animation-timing)}.calcite-animate__in{-webkit-animation-name:in;animation-name:in}.calcite-animate__in-down{-webkit-animation-name:in-down;animation-name:in-down}.calcite-animate__in-up{-webkit-animation-name:in-up;animation-name:in-up}.calcite-animate__in-scale{-webkit-animation-name:in-scale;animation-name:in-scale}:root{--calcite-popper-transition:var(--calcite-animation-timing)}:host([hidden]){display:none}:host{position:relative;display:block}";
  9. const PopoverManager = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
  10. constructor() {
  11. super();
  12. this.__registerHost();
  13. this.__attachShadow();
  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. * @default `[data-calcite-popover-reference]`
  23. */
  24. this.selector = "[data-calcite-popover-reference]";
  25. /**
  26. * Automatically closes any currently open popovers when clicking outside of a popover.
  27. */
  28. this.autoClose = false;
  29. }
  30. autoCloseHandler() {
  31. this.setAutoClose();
  32. }
  33. // --------------------------------------------------------------------------
  34. //
  35. // Lifecycle
  36. //
  37. // --------------------------------------------------------------------------
  38. connectedCallback() {
  39. var _a;
  40. this.setAutoClose();
  41. (_a = this.mutationObserver) === null || _a === void 0 ? void 0 : _a.observe(this.el, { childList: true, subtree: true });
  42. }
  43. disconnectedCallback() {
  44. var _a;
  45. (_a = this.mutationObserver) === null || _a === void 0 ? void 0 : _a.disconnect();
  46. }
  47. // --------------------------------------------------------------------------
  48. //
  49. // Render Methods
  50. //
  51. // --------------------------------------------------------------------------
  52. render() {
  53. return h("slot", null);
  54. }
  55. // --------------------------------------------------------------------------
  56. //
  57. // Private Methods
  58. //
  59. // --------------------------------------------------------------------------
  60. setAutoClose() {
  61. const { autoClose, el } = this;
  62. el.querySelectorAll("calcite-popover").forEach((popover) => (popover.autoClose = autoClose));
  63. }
  64. get el() { return this; }
  65. static get watchers() { return {
  66. "autoClose": ["autoCloseHandler"]
  67. }; }
  68. static get style() { return popoverManagerCss; }
  69. }, [1, "calcite-popover-manager", {
  70. "selector": [1],
  71. "autoClose": [516, "auto-close"]
  72. }]);
  73. function defineCustomElement$1() {
  74. if (typeof customElements === "undefined") {
  75. return;
  76. }
  77. const components = ["calcite-popover-manager"];
  78. components.forEach(tagName => { switch (tagName) {
  79. case "calcite-popover-manager":
  80. if (!customElements.get(tagName)) {
  81. customElements.define(tagName, PopoverManager);
  82. }
  83. break;
  84. } });
  85. }
  86. defineCustomElement$1();
  87. const CalcitePopoverManager = PopoverManager;
  88. const defineCustomElement = defineCustomElement$1;
  89. export { CalcitePopoverManager, defineCustomElement };