@dialpad/dialtone-vue 2.125.0 → 2.125.1

package/dist/lib/popover.js

@@ -0,0 +1,779 @@
+import { b as l, P as s, c as p, f as d, d as c, e as h, a as u, l as f, n as m, h as i } from "../chunks/popover_constants-qjlEkroB.js";
+import { g as Q } from "../chunks/popover_constants-qjlEkroB.js";
+import { getUniqueString as r, isOutOfViewPort as v } from "./utils.js";
+import { Portal as y } from "@linusborg/vue-simple-portal";
+import { M as _ } from "../chunks/modal-VuMFkZFH.js";
+import { n as a } from "../chunks/_plugin-vue2_normalizer-u6G_3nkj.js";
+import { DtButton as O } from "./button.js";
+import { DtIcon as E } from "./icon.js";
+import { S as g, a as P } from "../chunks/sr_only_close_button-JGole5Xi.js";
+import { DtLazyShow as b } from "./lazy-show.js";
+import "tippy.js";
+import "./constants.js";
+import "vue";
+import "../chunks/link_constants-vIUB92L4.js";
+import "@dialpad/dialtone-icons/vue2";
+import "../chunks/icon_constants-OpYAAKwF.js";
+import "@dialpad/dialtone-icons/icons.json";
+import "./skeleton.js";
+const C = {
+  name: "PopoverHeaderFooter",
+  components: {
+    DtButton: O,
+    DtIcon: E
+  },
+  props: {
+    // eslint-disable-next-line vue/require-default-prop
+    type: {
+      type: String,
+      validator: function(t) {
+        return ["header", "footer"].includes(t);
+      }
+    },
+    /**
+     * Additional class name for the content wrapper element.
+     */
+    contentClass: {
+      type: [String, Array, Object],
+      default: ""
+    },
+    /**
+     * Determines visibility for close button
+     * @values true, false
+     */
+    showCloseButton: {
+      type: Boolean,
+      default: !1
+    },
+    /**
+     * A set of props to be passed into the popover's header close button.
+     * Requires an 'ariaLabel' property.
+     */
+    closeButtonProps: {
+      type: Object,
+      default: () => {
+      }
+    }
+  },
+  emits: [
+    /**
+     * Emitted when popover is closed
+     *
+     * @event close
+     * @type { Boolean }
+     */
+    "close"
+  ],
+  methods: {
+    focusCloseButton() {
+      var e;
+      const t = (e = this.$refs["popover__close-button"]) == null ? void 0 : e.$el;
+      t == null || t.focus();
+    }
+  }
+};
+var S = function() {
+  var e = this, o = e._self._c;
+  return o("div", { class: {
+    "d-popover__header": e.type === "header",
+    "d-popover__footer": e.type === "footer"
+  }, attrs: { "data-qa": "dt-popover-header-footer" } }, [e.$slots.content ? o("div", { class: [{
+    "d-popover__header__content": e.type === "header",
+    "d-popover__footer__content": e.type === "footer"
+  }, e.contentClass], attrs: { "data-qa": "dt-popover-header-footer-content" } }, [e._t("content")], 2) : e._e(), e.showCloseButton ? o("dt-button", e._b({ ref: "popover__close-button", class: {
+    "d-popover__header__close-button": e.type === "header",
+    "d-popover__footer__close-button": e.type === "footer"
+  }, attrs: { "data-qa": "dt-popover-close", importance: "outlined", kind: "muted", circle: "" }, on: { click: function(n) {
+    return e.$emit("close");
+  } }, scopedSlots: e._u([{ key: "icon", fn: function() {
+    return [o("dt-icon", { attrs: { name: "close", size: "300" } })];
+  }, proxy: !0 }], null, !1, 2538694920) }, "dt-button", e.closeButtonProps, !1)) : e._e()], 1);
+}, w = [], T = /* @__PURE__ */ a(
+  C,
+  S,
+  w,
+  !1,
+  null,
+  null,
+  null,
+  null
+);
+const x = T.exports, L = {
+  name: "DtPopover",
+  /********************
+   * CHILD COMPONENTS *
+   ********************/
+  components: {
+    SrOnlyCloseButton: g,
+    DtLazyShow: b,
+    PopoverHeaderFooter: x,
+    Portal: y
+  },
+  mixins: [_, P],
+  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: !1
+    },
+    /**
+     * 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: (t) => l.includes(t)
+    },
+    /**
+     * 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: (t) => Object.keys(s).some((e) => e === t)
+    },
+    /**
+     * 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: (t) => p.includes(t)
+    },
+    /**
+     * 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 r();
+      }
+    },
+    /**
+     *  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: !0
+    },
+    /**
+     * 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: !0
+    },
+    /**
+     * 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: () => ["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: !0
+    },
+    /**
+     * 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: !1,
+      validator: (t) => d.includes(t)
+    },
+    /**
+     * 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: !1
+    },
+    /**
+     * 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: (t) => c.includes(t) || t instanceof HTMLElement || t.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: !1
+    },
+    /**
+     * Sets the element to which the popover is going to append to.
+     * 'body' will append to the nearest body (supports shadow DOM).
+     * @values 'body', 'parent', HTMLElement,
+     */
+    appendTo: {
+      type: [HTMLElement, String],
+      default: "body",
+      validator: (t) => h.includes(t) || t 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: !1
+    },
+    /**
+     * 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: (t) => t === null || t.enter && t.leave && Object.keys(t).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: s,
+      POPOVER_HEADER_FOOTER_PADDING_CLASSES: u,
+      intersectionObserver: null,
+      isOutsideViewport: !1,
+      isOpen: !1,
+      anchorEl: null,
+      popoverContentEl: null,
+      inTimer: null,
+      outTimer: null
+    };
+  },
+  computed: {
+    popoverListeners() {
+      return {
+        ...this.$listeners,
+        keydown: (t) => {
+          this.onKeydown(t), this.$emit("keydown", t);
+        },
+        "after-leave": (t) => {
+          this.onLeaveTransitionComplete();
+        },
+        "after-enter": (t) => {
+          this.onEnterTransitionComplete();
+        }
+      };
+    },
+    calculatedMaxHeight() {
+      return this.isOutsideViewport && this.modal ? "calc(100vh - var(--dt-space-300))" : this.maxHeight;
+    },
+    labelledBy() {
+      return this.ariaLabelledby || !this.ariaLabel && r("DtPopover__anchor");
+    },
+    currentHovercard() {
+      var t;
+      return (t = this.timer) == null ? void 0 : t.current.value;
+    }
+  },
+  watch: {
+    $props: {
+      immediate: !0,
+      deep: !0,
+      handler() {
+        this.validateProps();
+      }
+    },
+    modal(t) {
+      var e;
+      (e = this.tip) == null || e.setProps({
+        zIndex: t ? 650 : this.calculateAnchorZindex()
+      });
+    },
+    offset(t) {
+      var e;
+      (e = this.tip) == null || e.setProps({
+        offset: t
+      });
+    },
+    sticky(t) {
+      var e;
+      (e = this.tip) == null || e.setProps({
+        sticky: t
+      });
+    },
+    fallbackPlacements() {
+      var t;
+      (t = this.tip) == null || t.setProps({
+        popperOptions: this.popperOptions()
+      });
+    },
+    tether() {
+      var t;
+      (t = this.tip) == null || t.setProps({
+        popperOptions: this.popperOptions()
+      });
+    },
+    placement(t) {
+      var e;
+      (e = this.tip) == null || e.setProps({
+        placement: t
+      });
+    },
+    open: {
+      handler: function(t) {
+        t !== null && (this.isOpen = t);
+      },
+      immediate: !0
+    },
+    isOpen(t, e) {
+      t ? (this.initTippyInstance(), this.tip.show()) : !t && e !== t && (this.removeEventListeners(), this.tip.hide());
+    },
+    currentHovercard() {
+      this.hovercard && this.timer && (this.currentHovercard === this.id ? this.isOpen = !0 : this.isOpen = !1);
+    }
+  },
+  mounted() {
+    var e;
+    const t = this.externalAnchor ? this.$refs.anchor.getRootNode().querySelector(`#${this.externalAnchor}`) : null;
+    this.anchorEl = t ?? this.$refs.anchor.children[0], this.popoverContentEl = (e = this.$refs.content) == null ? void 0 : e.$el, this.isOpen && (this.initTippyInstance(), this.tip.show()), this.intersectionObserver = new IntersectionObserver(this.hasIntersectedViewport), this.intersectionObserver.observe(this.popoverContentEl);
+  },
+  beforeDestroy() {
+    var t;
+    (t = this.tip) == null || t.destroy(), this.intersectionObserver.disconnect(), this.removeReferences(), this.removeEventListeners();
+  },
+  /******************
+   *     METHODS    *
+   ******************/
+  methods: {
+    hasIntersectedViewport(t) {
+      var n;
+      const e = (n = t == null ? void 0 : t[0]) == null ? void 0 : n.target;
+      if (!e)
+        return;
+      const o = v(e);
+      this.isOutsideViewport = o.bottom || o.top;
+    },
+    popperOptions() {
+      return f({
+        fallbackPlacements: this.fallbackPlacements,
+        tether: this.tether,
+        hasHideModifierEnabled: !0
+      });
+    },
+    validateProps() {
+      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 t;
+      return 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.
+      (t = this.anchorEl) != null && t.closest(".d-zi-drawer") ? 650 : 300;
+    },
+    defaultToggleOpen(t) {
+      var e, o;
+      this.hovercard || this.openOnContext || (this.open ?? ((e = this.anchorEl) != null && e.contains(t.target) && !((o = this.anchorEl) != null && o.disabled) && this.toggleOpen()));
+    },
+    async onContext(t) {
+      this.openOnContext && (t.preventDefault(), this.isOpen = !0, await this.$nextTick(), this.tip.setProps({
+        placement: "right-start",
+        getReferenceClientRect: () => ({
+          width: 0,
+          height: 0,
+          top: t.clientY,
+          bottom: t.clientY,
+          left: t.clientX,
+          right: t.clientX
+        })
+      }));
+    },
+    toggleOpen() {
+      this.isOpen = !this.isOpen;
+    },
+    onArrowKeyPress(t) {
+      var e;
+      this.open === null && this.openWithArrowKeys && (e = this.anchorEl) != null && e.contains(t.target) && (this.isOpen || (this.isOpen = !0));
+    },
+    addEventListeners() {
+      window.addEventListener("dt-popover-close", this.closePopover), this.contentWidth === "anchor" && window.addEventListener("resize", this.onResize);
+    },
+    removeEventListeners() {
+      window.removeEventListener("dt-popover-close", this.closePopover), this.contentWidth === "anchor" && window.removeEventListener("resize", this.onResize);
+    },
+    closePopover() {
+      this.isOpen = !1;
+    },
+    /*
+    * 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 t, e;
+      if (this.modal) {
+        const o = (t = this.anchorEl) == null ? void 0 : t.closest("body, .tippy-box");
+        if (!o)
+          return;
+        ((e = o.tagName) == null ? void 0 : e.toLowerCase()) === "body" ? (o.classList.add("d-of-hidden"), this.tip.setProps({ offset: this.offset })) : o.classList.add("d-zi-popover");
+      }
+    },
+    /*
+    * Resets the prevent scrolling properties set in preventScrolling() back to normal.
+    **/
+    enableScrolling() {
+      var e, o;
+      const t = (e = this.anchorEl) == null ? void 0 : e.closest("body, .tippy-box");
+      t && (((o = t.tagName) == null ? void 0 : o.toLowerCase()) === "body" ? (t.classList.remove("d-of-hidden"), this.tip.setProps({ offset: this.offset })) : t.classList.remove("d-zi-popover"));
+    },
+    removeReferences() {
+      this.anchorEl = null, this.popoverContentEl = null, this.tip = null;
+    },
+    async onShow() {
+      this.contentWidth === "anchor" && await this.setPopoverContentAnchorWidth(), this.contentWidth === null && (this.popoverContentEl.style.width = "auto"), this.addEventListeners();
+    },
+    async onLeaveTransitionComplete() {
+      var t;
+      this.modal && (await this.focusFirstElement(this.$refs.anchor), await this.$nextTick(), this.enableScrolling()), (t = this.tip) == null || t.unmount(), this.$emit("opened", !1), this.open !== null && this.$emit("update:open", !1);
+    },
+    async onEnterTransitionComplete() {
+      this.focusInitialElement(), await this.$nextTick(), this.preventScrolling(), this.$emit("opened", !0, this.$refs.popover__content), this.open !== null && this.$emit("update:open", !0);
+    },
+    focusInitialElement() {
+      var t, e;
+      this.initialFocusElement === "dialog" && ((e = (t = this.$refs.content) == null ? void 0 : t.$el) == null || e.focus()), this.initialFocusElement.startsWith("#") && this.focusInitialElementById(), this.initialFocusElement === "first" && this.focusFirstElementIfNeeded(this.$refs.popover__content), this.initialFocusElement instanceof HTMLElement && this.initialFocusElement.focus();
+    },
+    focusInitialElementById() {
+      var e, o, n;
+      const t = (o = (e = this.$refs.content) == null ? void 0 : e.$el) == null ? void 0 : o.querySelector(this.initialFocusElement);
+      t ? t.focus() : console.warn('Could not find the element specified in dt-popover prop "initialFocusElement". Defaulting to focusing the dialog.'), t ? t.focus() : (n = this.$refs.content) == null || n.$el.focus();
+    },
+    onResize() {
+      this.closePopover();
+    },
+    onClickOutside() {
+      if (!this.hideOnClick)
+        return;
+      this.popoverContentEl.querySelector(".d-popover__anchor--opened") || this.closePopover();
+    },
+    onKeydown(t) {
+      t.key === "Tab" && this.modal && this.focusTrappedTabPress(t, this.popoverContentEl), t.key === "Escape" && this.closePopover();
+    },
+    async setPopoverContentAnchorWidth() {
+      var t;
+      await this.$nextTick(), this.popoverContentEl.style.width = `${(t = this.anchorEl) == null ? void 0 : t.clientWidth}px`;
+    },
+    focusFirstElementIfNeeded(t) {
+      var o, n;
+      this._getFocusableElements(t, !0).length !== 0 ? this.focusFirstElement(t) : this.showCloseButton ? (o = this.$refs.popover__header) == null || o.focusCloseButton() : (n = this.$refs.content) == null || n.$el.focus();
+    },
+    initTippyInstance() {
+      var t, e;
+      this.tip = m(this.anchorEl, {
+        popperOptions: this.popperOptions(),
+        contentElement: this.popoverContentEl,
+        placement: this.placement,
+        offset: this.offset,
+        sticky: this.sticky,
+        appendTo: this.appendTo === "body" ? (e = (t = this.anchorEl) == null ? void 0 : t.getRootNode()) == null ? void 0 : e.querySelector("body") : this.appendTo,
+        interactive: !0,
+        trigger: "manual",
+        // We have to manage hideOnClick functionality manually to handle
+        // popover within popover situations.
+        hideOnClick: !1,
+        zIndex: this.modal ? 650 : this.calculateAnchorZindex(),
+        onClickOutside: this.onClickOutside,
+        onShow: this.onShow
+      });
+    },
+    //  ============================================================================
+    //  $ HOVERCARD
+    //  ----------------------------------------------------------------------------
+    setInTimer() {
+      this.inTimer = setTimeout(() => {
+        this.isOpen = !0;
+      }, i);
+    },
+    setOutTimer() {
+      this.outTimer = setTimeout(() => {
+        this.isOpen = !1;
+      }, i);
+    },
+    onEnterAnchor() {
+      this.hovercard && (this.timer ? this.timer.enter(this.id) : (clearTimeout(this.outTimer), this.setInTimer()));
+    },
+    onLeaveAnchor() {
+      this.hovercard && (this.timer ? this.timer.leave() : (clearTimeout(this.inTimer), this.setOutTimer()));
+    },
+    onEnterContent() {
+      this.hovercard && (this.timer ? this.timer.enter(this.id) : clearTimeout(this.outTimer));
+    },
+    onLeaveContent() {
+      this.hovercard && (this.timer ? this.timer.leave() : this.setOutTimer());
+    }
+    //  ============================================================================
+    //  $ HOVERCARD
+    //  ----------------------------------------------------------------------------
+  }
+};
+var k = function() {
+  var e = this, o = e._self._c;
+  return o("div", [e.modal && e.isOpen ? o("portal", [o("div", { staticClass: "d-modal--transparent", attrs: { "aria-hidden": e.modal && e.isOpen ? "false" : "true" }, on: { click: function(n) {
+    n.preventDefault(), n.stopPropagation();
+  } } })]) : e._e(), o(e.elementType, e._g({ ref: "popover", tag: "component", class: ["d-popover", { "d-popover__anchor--opened": e.isOpen }], attrs: { "data-qa": "dt-popover-container" } }, e.$listeners), [o("div", { ref: "anchor", attrs: { id: !e.ariaLabelledby && e.labelledBy, "data-qa": e.$attrs["data-qa"] ? `${e.$attrs["data-qa"]}-anchor` : "dt-popover-anchor", tabindex: e.openOnContext ? 0 : void 0 }, on: { "!click": function(n) {
+    return e.defaultToggleOpen.apply(null, arguments);
+  }, contextmenu: e.onContext, keydown: [function(n) {
+    return !n.type.indexOf("key") && e._k(n.keyCode, "up", 38, n.key, ["Up", "ArrowUp"]) ? null : (n.preventDefault(), e.onArrowKeyPress.apply(null, arguments));
+  }, function(n) {
+    return !n.type.indexOf("key") && e._k(n.keyCode, "down", 40, n.key, ["Down", "ArrowDown"]) ? null : (n.preventDefault(), e.onArrowKeyPress.apply(null, arguments));
+  }], "!keydown": function(n) {
+    return !n.type.indexOf("key") && e._k(n.keyCode, "escape", void 0, n.key, void 0) ? null : e.closePopover.apply(null, arguments);
+  }, mouseenter: e.onEnterAnchor, mouseleave: e.onLeaveAnchor } }, [e._t("anchor", null, { attrs: {
+    "aria-expanded": e.isOpen.toString(),
+    "aria-controls": e.id,
+    "aria-haspopup": e.role
+  } })], 2), o("dt-lazy-show", e._g({ ref: "content", class: ["d-popover__dialog", { "d-popover__dialog--modal": e.modal }, e.dialogClass], style: {
+    "max-height": e.calculatedMaxHeight,
+    "max-width": e.maxWidth
+  }, attrs: { id: e.id, role: e.role, "data-qa": e.$attrs["data-qa"] ? `${e.$attrs["data-qa"]}__dialog` : "dt-popover", "aria-hidden": `${!e.isOpen}`, "aria-labelledby": e.labelledBy, "aria-label": e.ariaLabel, "aria-modal": `${!e.modal}`, transition: e.transition, show: e.isOpen, tabindex: e.contentTabindex, appear: "" }, on: { mouseenter: e.onEnterContent, mouseleave: e.onLeaveContent } }, e.popoverListeners), [e.$slots.headerContent || e.showCloseButton ? o("popover-header-footer", { ref: "popover__header", class: e.POPOVER_HEADER_FOOTER_PADDING_CLASSES[e.padding], attrs: { "content-class": e.headerClass, type: "header", "show-close-button": e.showCloseButton, "close-button-props": e.closeButtonProps }, on: { close: e.closePopover }, scopedSlots: e._u([{ key: "content", fn: function() {
+    return [e._t("headerContent", null, { close: e.closePopover })];
+  }, proxy: !0 }], null, !0) }) : e._e(), o("div", { ref: "popover__content", class: [
+    "d-popover__content",
+    e.POPOVER_PADDING_CLASSES[e.padding],
+    e.contentClass
+  ], attrs: { "data-qa": e.$attrs["data-qa"] ? `${e.$attrs["data-qa"]}-content` : "dt-popover-content" } }, [e._t("content", null, { close: e.closePopover })], 2), e.$slots.footerContent ? o("popover-header-footer", { ref: "popover__footer", class: e.POPOVER_HEADER_FOOTER_PADDING_CLASSES[e.padding], attrs: { type: "footer", "content-class": e.footerClass }, scopedSlots: e._u([{ key: "content", fn: function() {
+    return [e._t("footerContent", null, { close: e.closePopover })];
+  }, proxy: !0 }], null, !0) }) : e._e(), e.showVisuallyHiddenClose ? o("sr-only-close-button", { attrs: { "visually-hidden-close-label": e.visuallyHiddenCloseLabel }, on: { close: e.closePopover } }) : e._e()], 1)], 1)], 1);
+}, A = [], $ = /* @__PURE__ */ a(
+  L,
+  k,
+  A,
+  !1,
+  null,
+  null,
+  null,
+  null
+);
+const Z = $.exports;
+export {
+  Z as DtPopover,
+  h as POPOVER_APPEND_TO_VALUES,
+  p as POPOVER_CONTENT_WIDTHS,
+  Q as POPOVER_DIRECTIONS,
+  u as POPOVER_HEADER_FOOTER_PADDING_CLASSES,
+  c as POPOVER_INITIAL_FOCUS_STRINGS,
+  s as POPOVER_PADDING_CLASSES,
+  l as POPOVER_ROLES,
+  d as POPOVER_STICKY_VALUES
+};
+//# sourceMappingURL=popover.js.map