@dialpad/dialtone-vue 2.163.0-beta.1 → 2.163.1

package/dist/packages/dialtone-vue2/components/popover/popover.vue.js

@@ -0,0 +1,888 @@
+import { POPOVER_ROLES, POPOVER_PADDING_CLASSES, POPOVER_CONTENT_WIDTHS, POPOVER_STICKY_VALUES, POPOVER_INITIAL_FOCUS_STRINGS, POPOVER_APPEND_TO_VALUES, POPOVER_HEADER_FOOTER_PADDING_CLASSES } from "./popover_constants.js";
+import { getUniqueString, warnIfUnmounted, isOutOfViewPort } from "../../../../common/utils.js";
+import { Portal } from "@linusborg/vue-simple-portal";
+import Modal from "../../common/mixins/modal.js";
+import { getPopperOptions, createTippyPopover } from "./tippy_utils.js";
+import PopoverHeaderFooter from "./popover_header_footer.vue.js";
+import SrOnlyCloseButtonMixin from "../../common/mixins/sr_only_close_button.js";
+import SrOnlyCloseButton from "../../common/sr_only_close_button.vue.js";
+import { disableRootScrolling, enableRootScrolling } from "../../../../common/utils2.js";
+import normalizeComponent from "../../../../_virtual/_plugin-vue2_normalizer.js";
+import DtLazyShow from "../lazy_show/lazy_show.vue.js";
+import { TOOLTIP_DELAY_MS } from "../tooltip/tooltip_constants.js";
+const _sfc_main = {
+  name: "DtPopover",
+  /********************
+   * CHILD COMPONENTS *
+   ********************/
+  components: {
+    SrOnlyCloseButton,
+    DtLazyShow,
+    PopoverHeaderFooter,
+    Portal
+  },
+  mixins: [Modal, SrOnlyCloseButtonMixin],
+  props: {
+    /**
+     * Controls whether the popover is shown. Leaving this null will have the popover trigger on click by default.
+     * If you set this value, the default trigger behavior will be disabled, and you can control it as you need.
+     * Supports .sync modifier
+     * @values null, true, false
+     */
+    open: {
+      type: Boolean,
+      default: null
+    },
+    /**
+     * Opens the popover on right click (context menu). If you set this value to `true`,
+     * the default trigger behavior will be disabled.
+     * @values true, false
+     */
+    openOnContext: {
+      type: Boolean,
+      default: false
+    },
+    /**
+     * Element type (tag name) of the root element of the component.
+     */
+    elementType: {
+      type: String,
+      default: "div"
+    },
+    /**
+     * Named transition when the content display is toggled.
+     * @see DtLazyShow
+     */
+    transition: {
+      type: String,
+      default: "fade"
+    },
+    /**
+     * ARIA role for the content of the popover. Defaults to "dialog".
+     * <a class="d-link" href="https://www.w3.org/TR/wai-aria/#aria-haspopup" target="_blank">aria-haspopup</a>
+     */
+    role: {
+      type: String,
+      default: "dialog",
+      validator: (role) => {
+        return POPOVER_ROLES.includes(role);
+      }
+    },
+    /**
+     * ID of the element that serves as the label for the popover content.
+     * Defaults to the "anchor" element; this exists to provide a different
+     * ID of the label element if, for example, the anchor slot contains
+     * other items that do not serve as a label. You should provide this
+     * or ariaLabel, but not both.
+     */
+    ariaLabelledby: {
+      type: String,
+      default: null
+    },
+    /**
+     * Descriptive label for the popover content. You should provide this
+     * or ariaLabelledby, but not both.
+     */
+    ariaLabel: {
+      type: String,
+      default: null
+    },
+    /**
+     * A set of props to be passed into the popover's header close button.
+     * Requires an 'ariaLabel' property, when the header popover is visible
+     */
+    closeButtonProps: {
+      type: Object,
+      default: () => ({})
+    },
+    /**
+     * Padding size class for the popover content.
+     * @values none, small, medium, large
+     */
+    padding: {
+      type: String,
+      default: "large",
+      validator: (padding) => {
+        return Object.keys(POPOVER_PADDING_CLASSES).some((item) => item === padding);
+      }
+    },
+    /**
+     * Additional class name for the content wrapper element.
+     */
+    contentClass: {
+      type: [String, Array, Object],
+      default: ""
+    },
+    /**
+     * Width configuration for the popover content. When its value is 'anchor',
+     * the popover content will have the same width as the anchor.
+     * @values null, anchor
+     */
+    contentWidth: {
+      type: String,
+      default: "",
+      validator: (contentWidth) => POPOVER_CONTENT_WIDTHS.includes(contentWidth)
+    },
+    /**
+     * Tabindex value for the content. Passing null, no tabindex attribute will be set.
+     */
+    contentTabindex: {
+      type: Number || null,
+      default: -1
+    },
+    /**
+     * External anchor id to use in those cases the anchor can't be provided via the slot.
+     * For instance, using the combobox's input as the anchor for the popover.
+     */
+    externalAnchor: {
+      type: String,
+      default: ""
+    },
+    /**
+     * The id of the tooltip
+     */
+    id: {
+      type: String,
+      default() {
+        return getUniqueString();
+      }
+    },
+    /**
+     *  Displaces the content box from its anchor element
+     *  by the specified number of pixels.
+     *  <a
+     *    class="d-link"
+     *    href="https://atomiks.github.io/tippyjs/v6/all-props/#offset"
+     *    target="_blank"
+     *  >
+     *    Tippy.js docs
+     *  </a>
+     */
+    offset: {
+      type: Array,
+      default: () => [0, 4]
+    },
+    /**
+     * Determines if the popover hides upon clicking the
+     * anchor or outside the content box.
+     * @values true, false
+     */
+    hideOnClick: {
+      type: Boolean,
+      default: true
+    },
+    /**
+     * Determines modal state. If enabled popover has a modal overlay
+     * preventing interaction with elements below it, but it is invisible.
+     * @values true, false
+     */
+    modal: {
+      type: Boolean,
+      default: true
+    },
+    /**
+     * If the popover does not fit in the direction described by "placement",
+     * it will attempt to change its direction to the "fallbackPlacements".
+     * <a
+     *   class="d-link"
+     *   href="https://popper.js.org/docs/v2/modifiers/flip/#fallbackplacements"
+     *   target="_blank"
+     * >
+     *   Popper.js docs
+     * </a>
+     * */
+    fallbackPlacements: {
+      type: Array,
+      default: () => {
+        return ["auto"];
+      }
+    },
+    /**
+     * The direction the popover displays relative to the anchor.
+     * <a
+     *   class="d-link"
+     *   href="https://atomiks.github.io/tippyjs/v6/all-props/#placement"
+     *   target="_blank"
+     * >
+     *   Tippy.js docs
+     * </a>
+     * @values top, top-start, top-end,
+     * right, right-start, right-end,
+     * left, left-start, left-end,
+     * bottom, bottom-start, bottom-end,
+     * auto, auto-start, auto-end
+     */
+    placement: {
+      type: String,
+      default: "bottom-end"
+    },
+    /**
+     * If set to false the dialog will display over top of the anchor when there is insufficient space.
+     * If set to true it will never move from its position relative to the anchor and will clip instead.
+     * <a
+     *   class="d-link"
+     *   href="https://popper.js.org/docs/v2/modifiers/prevent-overflow/#tether"
+     *   target="_blank"
+     * >
+     *   Popper.js docs
+     * </a>
+     * @values true, false
+     */
+    tether: {
+      type: Boolean,
+      default: true
+    },
+    /**
+     * If the popover sticks to the anchor. This is usually not needed, but can be needed
+     * if the reference element's position is animating, or to automatically update the popover
+     * position in those cases the DOM layout changes the reference element's position.
+     * `true` enables it, `reference` only checks the "reference" rect for changes and `popper` only
+     * checks the "popper" rect for changes.
+     * <a
+     *   class="d-link"
+     *   href="https://atomiks.github.io/tippyjs/v6/all-props/#sticky"
+     *   target="_blank"
+     * >
+     *   Tippy.js docs
+     * </a>
+     * @values true, false, reference, popper
+     */
+    sticky: {
+      type: [Boolean, String],
+      default: false,
+      validator: (sticky) => {
+        return POPOVER_STICKY_VALUES.includes(sticky);
+      }
+    },
+    /**
+     * Determines maximum height for the popover before overflow.
+     * Possible units rem|px|em
+     */
+    maxHeight: {
+      type: String,
+      default: ""
+    },
+    /**
+     * Determines maximum width for the popover before overflow.
+     * Possible units rem|px|%|em
+     */
+    maxWidth: {
+      type: String,
+      default: ""
+    },
+    /**
+     * Determines visibility for close button
+     * @values true, false
+     */
+    showCloseButton: {
+      type: Boolean,
+      default: false
+    },
+    /**
+     * Additional class name for the header content wrapper element.
+     */
+    headerClass: {
+      type: [String, Array, Object],
+      default: ""
+    },
+    /**
+     * Additional class name for the footer content wrapper element.
+     */
+    footerClass: {
+      type: [String, Array, Object],
+      default: ""
+    },
+    /**
+     * Additional class name for the dialog element.
+     */
+    dialogClass: {
+      type: [String, Array, Object],
+      default: ""
+    },
+    /**
+     * The element that is focused when the popover is opened. This can be an
+     * HTMLElement within the popover, a string starting with '#' which will
+     * find the element by ID. 'first' which will automatically focus
+     * the first element, or 'dialog' which will focus the dialog window itself.
+     * If the dialog is modal this prop cannot be 'none'.
+     * @values none, dialog, first
+     */
+    initialFocusElement: {
+      type: [String, HTMLElement],
+      default: "first",
+      validator: (initialFocusElement) => {
+        return POPOVER_INITIAL_FOCUS_STRINGS.includes(initialFocusElement) || initialFocusElement instanceof HTMLElement || initialFocusElement.startsWith("#");
+      }
+    },
+    /**
+     * If the popover should open pressing up or down arrow key on the anchor element.
+     * This can be set when not passing open prop.
+     * @values true, false
+     */
+    openWithArrowKeys: {
+      type: Boolean,
+      default: false
+    },
+    /**
+     * Sets the element to which the popover is going to append to.
+     * 'body' will append to the nearest body (supports shadow DOM).
+     * 'root' will try append to the iFrame's parent body if it is contained in an iFrame
+     * and has permissions to access it, else, it'd default to 'parent'.
+     * @values 'body', 'parent', 'root', HTMLElement
+     */
+    appendTo: {
+      type: [HTMLElement, String],
+      default: "body",
+      validator: (appendTo) => {
+        return POPOVER_APPEND_TO_VALUES.includes(appendTo) || appendTo instanceof HTMLElement;
+      }
+    },
+    /**
+     * Set this prop to true and popover component will support hovercard behaviour
+     * It will open on mouseenter and close on mouseleave with timer delay of 300ms
+     */
+    hovercard: {
+      type: Boolean,
+      default: false
+    },
+    /**
+     * The timer is used only when the hovercard prop is true.
+     * It defines the delays when opening several hovercards.
+     * It must have the keys: enter, leave and current.
+     * If null, the default delay of 300ms will be used.
+     */
+    timer: {
+      type: [Object, null],
+      default: null,
+      validator: (timer) => {
+        return timer === null || timer.enter && timer.leave && Object.keys(timer).includes("current");
+      }
+    }
+  },
+  emits: [
+    /**
+     * Emitted when popover is shown or hidden
+     *
+     * @event opened
+     * @type {Boolean | Array}
+     */
+    "opened",
+    /**
+     * Emitted to sync value with parent
+     *
+     * @event update:opened
+     * @type {Boolean | Array}
+     */
+    "update:open"
+  ],
+  data() {
+    return {
+      POPOVER_PADDING_CLASSES,
+      POPOVER_HEADER_FOOTER_PADDING_CLASSES,
+      intersectionObserver: null,
+      isOutsideViewport: false,
+      isOpen: false,
+      anchorEl: null,
+      popoverContentEl: null,
+      inTimer: null,
+      outTimer: null
+    };
+  },
+  computed: {
+    popoverListeners() {
+      return {
+        ...this.$listeners,
+        keydown: (event) => {
+          this.onKeydown(event);
+          this.$emit("keydown", event);
+        },
+        "after-leave": (event) => {
+          this.onLeaveTransitionComplete();
+        },
+        "after-enter": (event) => {
+          this.onEnterTransitionComplete();
+        }
+      };
+    },
+    calculatedMaxHeight() {
+      if (this.isOutsideViewport && this.modal) {
+        return `calc(100vh - var(--dt-space-300))`;
+      }
+      return this.maxHeight;
+    },
+    labelledBy() {
+      return this.ariaLabelledby || !this.ariaLabel && getUniqueString("DtPopover__anchor");
+    },
+    currentHovercard() {
+      var _a;
+      return (_a = this.timer) == null ? void 0 : _a.current.value;
+    }
+  },
+  watch: {
+    $props: {
+      immediate: true,
+      deep: true,
+      handler() {
+        this.validateProps();
+      }
+    },
+    modal(modal) {
+      var _a;
+      (_a = this.tip) == null ? void 0 : _a.setProps({
+        zIndex: modal ? 650 : this.calculateAnchorZindex()
+      });
+    },
+    offset(offset) {
+      var _a;
+      (_a = this.tip) == null ? void 0 : _a.setProps({
+        offset
+      });
+    },
+    sticky(sticky) {
+      var _a;
+      (_a = this.tip) == null ? void 0 : _a.setProps({
+        sticky
+      });
+    },
+    fallbackPlacements() {
+      var _a;
+      (_a = this.tip) == null ? void 0 : _a.setProps({
+        popperOptions: this.popperOptions()
+      });
+    },
+    tether() {
+      var _a;
+      (_a = this.tip) == null ? void 0 : _a.setProps({
+        popperOptions: this.popperOptions()
+      });
+    },
+    placement(placement) {
+      var _a;
+      (_a = this.tip) == null ? void 0 : _a.setProps({
+        placement
+      });
+    },
+    open: {
+      handler: function(open) {
+        if (open !== null) {
+          this.isOpen = open;
+        }
+      },
+      immediate: true
+    },
+    isOpen(isOpen, isPrev) {
+      if (isOpen) {
+        this.initTippyInstance();
+        this.tip.show();
+      } else if (!isOpen && isPrev !== isOpen) {
+        this.removeEventListeners();
+        this.tip.hide();
+      }
+    },
+    currentHovercard() {
+      if (this.hovercard && this.timer) {
+        if (this.currentHovercard === this.id) {
+          this.isOpen = true;
+        } else {
+          this.isOpen = false;
+        }
+      }
+    }
+  },
+  mounted() {
+    var _a;
+    warnIfUnmounted(this.$el, this.$options.name);
+    const externalAnchorEl = this.externalAnchor ? this.$refs.anchor.getRootNode().querySelector(`#${this.externalAnchor}`) : null;
+    this.anchorEl = externalAnchorEl ?? this.$refs.anchor.children[0];
+    this.popoverContentEl = (_a = this.$refs.content) == null ? void 0 : _a.$el;
+    if (this.isOpen) {
+      this.initTippyInstance();
+      this.tip.show();
+    }
+    this.intersectionObserver = new IntersectionObserver(this.hasIntersectedViewport);
+    this.intersectionObserver.observe(this.popoverContentEl);
+  },
+  beforeDestroy() {
+    var _a;
+    (_a = this.tip) == null ? void 0 : _a.destroy();
+    this.intersectionObserver.disconnect();
+    this.removeReferences();
+    this.removeEventListeners();
+  },
+  /******************
+   *     METHODS    *
+   ******************/
+  methods: {
+    hasIntersectedViewport(entries) {
+      var _a;
+      const dialog = (_a = entries == null ? void 0 : entries[0]) == null ? void 0 : _a.target;
+      if (!dialog) return;
+      const isOut = isOutOfViewPort(dialog);
+      this.isOutsideViewport = isOut.bottom || isOut.top;
+    },
+    popperOptions() {
+      return getPopperOptions({
+        fallbackPlacements: this.fallbackPlacements,
+        tether: this.tether,
+        hasHideModifierEnabled: true
+      });
+    },
+    validateProps() {
+      if (this.modal && this.initialFocusElement === "none") {
+        console.error('If the popover is modal you must set the initialFocusElement prop. Possible values: "dialog", "first", HTMLElement');
+      }
+    },
+    calculateAnchorZindex() {
+      var _a;
+      if (this.$el.getRootNode().querySelector('.d-modal[aria-hidden="false"], .d-modal--transparent[aria-hidden="false"]') || // Special case because we don't have any dialtone drawer component yet. Render at 650 when
+      // anchor of popover is within a drawer.
+      ((_a = this.anchorEl) == null ? void 0 : _a.closest(".d-zi-drawer"))) {
+        return 650;
+      } else {
+        return 300;
+      }
+    },
+    defaultToggleOpen(e) {
+      var _a, _b;
+      if (this.hovercard) {
+        return;
+      }
+      if (this.openOnContext) {
+        return;
+      }
+      this.open ?? (((_a = this.anchorEl) == null ? void 0 : _a.contains(e.target)) && !((_b = this.anchorEl) == null ? void 0 : _b.disabled) && this.toggleOpen());
+    },
+    async onContext(event) {
+      if (!this.openOnContext) {
+        return;
+      }
+      event.preventDefault();
+      this.isOpen = true;
+      await this.$nextTick();
+      this.tip.setProps({
+        placement: "right-start",
+        getReferenceClientRect: () => ({
+          width: 0,
+          height: 0,
+          top: event.clientY,
+          bottom: event.clientY,
+          left: event.clientX,
+          right: event.clientX
+        })
+      });
+    },
+    toggleOpen() {
+      this.isOpen = !this.isOpen;
+    },
+    onArrowKeyPress(e) {
+      var _a;
+      if (this.open !== null) {
+        return;
+      }
+      if (this.openWithArrowKeys && ((_a = this.anchorEl) == null ? void 0 : _a.contains(e.target))) {
+        if (!this.isOpen) {
+          this.isOpen = true;
+        }
+      }
+    },
+    addEventListeners() {
+      window.addEventListener("dt-popover-close", this.closePopover);
+      if (this.contentWidth === "anchor") {
+        window.addEventListener("resize", this.onResize);
+      }
+    },
+    removeEventListeners() {
+      window.removeEventListener("dt-popover-close", this.closePopover);
+      if (this.contentWidth === "anchor") {
+        window.removeEventListener("resize", this.onResize);
+      }
+    },
+    closePopover() {
+      this.isOpen = false;
+    },
+    /*
+    * Prevents scrolling outside of the currently opened modal popover by:
+    *   - when anchor is not within another popover: setting the body to overflow: hidden
+    *   - when anchor is within another popover: set the popover dialog container to it's non-modal z-index
+    *     since it is no longer the active modal. This puts it underneath the overlay and prevents scrolling.
+    **/
+    preventScrolling() {
+      var _a, _b;
+      if (this.modal) {
+        const element = (_a = this.anchorEl) == null ? void 0 : _a.closest("body, .tippy-box");
+        if (!element) return;
+        if (((_b = element.tagName) == null ? void 0 : _b.toLowerCase()) === "body") {
+          disableRootScrolling(this.anchorEl.getRootNode().host);
+          this.tip.setProps({ offset: this.offset });
+        } else {
+          element.classList.add("d-zi-popover");
+        }
+      }
+    },
+    /*
+    * Resets the prevent scrolling properties set in preventScrolling() back to normal.
+    **/
+    enableScrolling() {
+      var _a, _b;
+      const element = (_a = this.anchorEl) == null ? void 0 : _a.closest("body, .tippy-box");
+      if (!element) return;
+      if (((_b = element.tagName) == null ? void 0 : _b.toLowerCase()) === "body") {
+        enableRootScrolling(this.anchorEl.getRootNode().host);
+        this.tip.setProps({ offset: this.offset });
+      } else {
+        element.classList.remove("d-zi-popover");
+      }
+    },
+    removeReferences() {
+      this.anchorEl = null;
+      this.popoverContentEl = null;
+      this.tip = null;
+    },
+    async onShow() {
+      if (this.contentWidth === "anchor") {
+        await this.setPopoverContentAnchorWidth();
+      }
+      if (this.contentWidth === null) {
+        this.popoverContentEl.style.width = "auto";
+      }
+      this.addEventListeners();
+    },
+    async onLeaveTransitionComplete() {
+      var _a;
+      if (this.modal) {
+        await this.focusFirstElement(this.$refs.anchor);
+        await this.$nextTick();
+        this.enableScrolling();
+      }
+      (_a = this.tip) == null ? void 0 : _a.unmount();
+      this.$emit("opened", false);
+      if (this.open !== null) {
+        this.$emit("update:open", false);
+      }
+    },
+    async onEnterTransitionComplete() {
+      this.focusInitialElement();
+      await this.$nextTick();
+      this.preventScrolling();
+      this.$emit("opened", true, this.$refs.popover__content);
+      if (this.open !== null) {
+        this.$emit("update:open", true);
+      }
+    },
+    focusInitialElement() {
+      var _a, _b;
+      if (this.initialFocusElement === "dialog") {
+        (_b = (_a = this.$refs.content) == null ? void 0 : _a.$el) == null ? void 0 : _b.focus();
+      }
+      if (this.initialFocusElement.startsWith("#")) {
+        this.focusInitialElementById();
+      }
+      if (this.initialFocusElement === "first") {
+        this.focusFirstElementIfNeeded(this.$refs.popover__content);
+      }
+      if (this.initialFocusElement instanceof HTMLElement) {
+        this.initialFocusElement.focus();
+      }
+    },
+    focusInitialElementById() {
+      var _a, _b, _c;
+      const result = (_b = (_a = this.$refs.content) == null ? void 0 : _a.$el) == null ? void 0 : _b.querySelector(this.initialFocusElement);
+      if (result) {
+        result.focus();
+      } else {
+        console.warn('Could not find the element specified in dt-popover prop "initialFocusElement". Defaulting to focusing the dialog.');
+      }
+      result ? result.focus() : (_c = this.$refs.content) == null ? void 0 : _c.$el.focus();
+    },
+    onResize() {
+      this.closePopover();
+    },
+    onClickOutside() {
+      var _a;
+      if (!this.hideOnClick) return;
+      const innerModals = (_a = this.popoverContentEl) == null ? void 0 : _a.querySelector(".d-popover__anchor--opened");
+      if (!innerModals) {
+        this.closePopover();
+      }
+    },
+    onKeydown(e) {
+      if (e.key === "Tab") {
+        if (this.modal) {
+          this.focusTrappedTabPress(e, this.popoverContentEl);
+        }
+      }
+      if (e.key === "Escape") {
+        this.closePopover();
+      }
+    },
+    async setPopoverContentAnchorWidth() {
+      var _a;
+      await this.$nextTick();
+      this.popoverContentEl.style.width = `${(_a = this.anchorEl) == null ? void 0 : _a.clientWidth}px`;
+    },
+    focusFirstElementIfNeeded(domEl) {
+      var _a, _b;
+      const focusableElements = this._getFocusableElements(domEl, true);
+      if (focusableElements.length !== 0) {
+        this.focusFirstElement(domEl);
+      } else if (this.showCloseButton) {
+        (_a = this.$refs.popover__header) == null ? void 0 : _a.focusCloseButton();
+      } else {
+        (_b = this.$refs.content) == null ? void 0 : _b.$el.focus();
+      }
+    },
+    /**
+     * Return's the anchor ClientRect object relative to the window.
+     * Refer to: https://atomiks.github.io/tippyjs/v6/all-props/#getreferenceclientrect for more information
+     * @param error
+     */
+    getReferenceClientRect(error) {
+      var _a, _b;
+      const anchorReferenceRect = (_a = this.anchorEl) == null ? void 0 : _a.getBoundingClientRect();
+      if (this.appendTo !== "root" || error) return anchorReferenceRect;
+      const anchorOwnerDocument = (_b = this.anchorEl) == null ? void 0 : _b.ownerDocument;
+      const anchorParentWindow = (anchorOwnerDocument == null ? void 0 : anchorOwnerDocument.defaultView) || (anchorOwnerDocument == null ? void 0 : anchorOwnerDocument.parentWindow);
+      const anchorIframe = anchorParentWindow == null ? void 0 : anchorParentWindow.frameElement;
+      if (!anchorIframe) return anchorReferenceRect;
+      const iframeReferenceRect = anchorIframe.getBoundingClientRect();
+      return {
+        width: anchorReferenceRect == null ? void 0 : anchorReferenceRect.width,
+        height: anchorReferenceRect == null ? void 0 : anchorReferenceRect.height,
+        top: (iframeReferenceRect == null ? void 0 : iframeReferenceRect.top) + (anchorReferenceRect == null ? void 0 : anchorReferenceRect.top),
+        left: (iframeReferenceRect == null ? void 0 : iframeReferenceRect.left) + (anchorReferenceRect == null ? void 0 : anchorReferenceRect.left),
+        right: (iframeReferenceRect == null ? void 0 : iframeReferenceRect.right) + (anchorReferenceRect == null ? void 0 : anchorReferenceRect.right),
+        bottom: (iframeReferenceRect == null ? void 0 : iframeReferenceRect.bottom) + (anchorReferenceRect == null ? void 0 : anchorReferenceRect.bottom)
+      };
+    },
+    initTippyInstance() {
+      var _a, _b;
+      let internalAppendTo = null;
+      let iFrameError = false;
+      switch (this.appendTo) {
+        case "body":
+          internalAppendTo = (_b = (_a = this.anchorEl) == null ? void 0 : _a.getRootNode()) == null ? void 0 : _b.querySelector("body");
+          break;
+        case "root":
+          try {
+            internalAppendTo = window.parent.document.body;
+          } catch (err) {
+            console.error("Could not attach the popover to iframe parent window: ", err);
+            internalAppendTo = "parent";
+            iFrameError = true;
+          }
+          break;
+        default:
+          internalAppendTo = this.appendTo;
+          break;
+      }
+      this.tip = createTippyPopover(this.anchorEl, {
+        popperOptions: this.popperOptions(),
+        contentElement: this.popoverContentEl,
+        placement: this.placement,
+        offset: this.offset,
+        sticky: this.sticky,
+        appendTo: internalAppendTo,
+        interactive: true,
+        trigger: "manual",
+        getReferenceClientRect: () => this.getReferenceClientRect(iFrameError),
+        // We have to manage hideOnClick functionality manually to handle
+        // popover within popover situations.
+        hideOnClick: false,
+        zIndex: this.modal ? 650 : this.calculateAnchorZindex(),
+        onClickOutside: this.onClickOutside,
+        onShow: this.onShow
+      });
+    },
+    //  ============================================================================
+    //  $ HOVERCARD
+    //  ----------------------------------------------------------------------------
+    setInTimer() {
+      this.inTimer = setTimeout(() => {
+        this.isOpen = true;
+      }, TOOLTIP_DELAY_MS);
+    },
+    setOutTimer() {
+      this.outTimer = setTimeout(() => {
+        this.isOpen = false;
+      }, TOOLTIP_DELAY_MS);
+    },
+    onEnterAnchor() {
+      if (!this.hovercard) return;
+      if (this.timer) this.timer.enter(this.id);
+      else {
+        clearTimeout(this.outTimer);
+        this.setInTimer();
+      }
+    },
+    onLeaveAnchor() {
+      if (!this.hovercard) return;
+      if (this.timer) this.timer.leave();
+      else {
+        clearTimeout(this.inTimer);
+        this.setOutTimer();
+      }
+    },
+    onEnterContent() {
+      if (!this.hovercard) return;
+      if (this.timer) this.timer.enter(this.id);
+      else clearTimeout(this.outTimer);
+    },
+    onLeaveContent() {
+      if (!this.hovercard) return;
+      if (this.timer) this.timer.leave();
+      else this.setOutTimer();
+    }
+    //  ============================================================================
+    //  $ HOVERCARD
+    //  ----------------------------------------------------------------------------
+  }
+};
+var _sfc_render = function render() {
+  var _vm = this, _c = _vm._self._c;
+  return _c("div", [_vm.modal && _vm.isOpen ? _c("portal", [_c("div", { staticClass: "d-modal--transparent", attrs: { "aria-hidden": _vm.modal && _vm.isOpen ? "false" : "true" }, on: { "click": function($event) {
+    $event.preventDefault();
+    $event.stopPropagation();
+  } } })]) : _vm._e(), _c(_vm.elementType, _vm._g({ ref: "popover", tag: "component", class: ["d-popover", { "d-popover__anchor--opened": _vm.isOpen }], attrs: { "data-qa": "dt-popover-container" } }, _vm.$listeners), [_c("div", { ref: "anchor", attrs: { "id": !_vm.ariaLabelledby && _vm.labelledBy, "data-qa": _vm.$attrs["data-qa"] ? `${_vm.$attrs["data-qa"]}-anchor` : "dt-popover-anchor", "tabindex": _vm.openOnContext ? 0 : void 0 }, on: { "!click": function($event) {
+    return _vm.defaultToggleOpen.apply(null, arguments);
+  }, "contextmenu": _vm.onContext, "keydown": [function($event) {
+    if (!$event.type.indexOf("key") && _vm._k($event.keyCode, "up", 38, $event.key, ["Up", "ArrowUp"])) return null;
+    $event.preventDefault();
+    return _vm.onArrowKeyPress.apply(null, arguments);
+  }, function($event) {
+    if (!$event.type.indexOf("key") && _vm._k($event.keyCode, "down", 40, $event.key, ["Down", "ArrowDown"])) return null;
+    $event.preventDefault();
+    return _vm.onArrowKeyPress.apply(null, arguments);
+  }], "!keydown": function($event) {
+    if (!$event.type.indexOf("key") && _vm._k($event.keyCode, "escape", void 0, $event.key, void 0)) return null;
+    return _vm.closePopover.apply(null, arguments);
+  }, "mouseenter": _vm.onEnterAnchor, "mouseleave": _vm.onLeaveAnchor } }, [_vm._t("anchor", null, { "attrs": {
+    "aria-expanded": _vm.isOpen.toString(),
+    "aria-controls": _vm.id,
+    "aria-haspopup": _vm.role
+  } })], 2), _c("dt-lazy-show", _vm._g({ ref: "content", class: ["d-popover__dialog", { "d-popover__dialog--modal": _vm.modal }, _vm.dialogClass], style: {
+    "max-height": _vm.calculatedMaxHeight,
+    "max-width": _vm.maxWidth
+  }, attrs: { "id": _vm.id, "role": _vm.role, "data-qa": _vm.$attrs["data-qa"] ? `${_vm.$attrs["data-qa"]}__dialog` : "dt-popover", "aria-hidden": `${!_vm.isOpen}`, "aria-labelledby": _vm.labelledBy, "aria-label": _vm.ariaLabel, "aria-modal": `${!_vm.modal}`, "transition": _vm.transition, "show": _vm.isOpen, "tabindex": _vm.contentTabindex, "appear": "" }, on: { "mouseenter": _vm.onEnterContent, "mouseleave": _vm.onLeaveContent } }, _vm.popoverListeners), [_vm.$slots.headerContent || _vm.showCloseButton ? _c("popover-header-footer", { ref: "popover__header", class: _vm.POPOVER_HEADER_FOOTER_PADDING_CLASSES[_vm.padding], attrs: { "content-class": _vm.headerClass, "type": "header", "show-close-button": _vm.showCloseButton, "close-button-props": _vm.closeButtonProps }, on: { "close": _vm.closePopover }, scopedSlots: _vm._u([{ key: "content", fn: function() {
+    return [_vm._t("headerContent", null, { "close": _vm.closePopover })];
+  }, proxy: true }], null, true) }) : _vm._e(), _c("div", { ref: "popover__content", class: [
+    "d-popover__content",
+    _vm.POPOVER_PADDING_CLASSES[_vm.padding],
+    _vm.contentClass
+  ], attrs: { "data-qa": _vm.$attrs["data-qa"] ? `${_vm.$attrs["data-qa"]}-content` : "dt-popover-content" } }, [_vm._t("content", null, { "close": _vm.closePopover })], 2), _vm.$slots.footerContent ? _c("popover-header-footer", { ref: "popover__footer", class: _vm.POPOVER_HEADER_FOOTER_PADDING_CLASSES[_vm.padding], attrs: { "type": "footer", "content-class": _vm.footerClass }, scopedSlots: _vm._u([{ key: "content", fn: function() {
+    return [_vm._t("footerContent", null, { "close": _vm.closePopover })];
+  }, proxy: true }], null, true) }) : _vm._e(), _vm.showVisuallyHiddenClose ? _c("sr-only-close-button", { attrs: { "visually-hidden-close-label": _vm.visuallyHiddenCloseLabel }, on: { "close": _vm.closePopover } }) : _vm._e()], 1)], 1)], 1);
+};
+var _sfc_staticRenderFns = [];
+var __component__ = /* @__PURE__ */ normalizeComponent(
+  _sfc_main,
+  _sfc_render,
+  _sfc_staticRenderFns,
+  false,
+  null,
+  null
+);
+const DtPopover = __component__.exports;
+export {
+  DtPopover as default
+};
+//# sourceMappingURL=popover.vue.js.map