import { getUniqueString as s } from "../../common/utils/index.js";
import { n as a } from "../../_plugin-vue2_normalizer-DSLOjnn3.js";
import { TOOLTIP_DELAY_MS as o, TOOLTIP_DIRECTIONS as i } from "../tooltip/tooltip-constants.js";
import l from "../popover/popover.js";
import { POPOVER_APPEND_TO_VALUES as u, POPOVER_PADDING_CLASSES as c } from "../popover/popover-constants.js";
const d = {
  name: "DtHovercard",
  components: {
    DtPopover: l
  },
  props: {
    /**
       * Controls whether the hovercard is shown. Leaving this null will have the hovercard trigger on hover 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
    },
    /**
    * Fade transition when the content display is toggled.
    * @type boolean
    * @values true, false
    */
    transition: {
      type: Boolean,
      default: !1
    },
    /**
      * If the popover does not fit in the direction described by "placement",
     * it will attempt to change its direction to the "fallbackPlacements".
     * @see https://popper.js.org/docs/v2/modifiers/flip/#fallbackplacements"
     */
    fallbackPlacements: {
      type: Array,
      default: () => ["auto"]
    },
    /**
    * The direction the popover displays relative to the anchor.
    * @see https://atomiks.github.io/tippyjs/v6/all-props/#placement"
    * @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: "top-start",
      validator(t) {
        return i.includes(t);
      }
    },
    /**
    * Padding size class for the popover content.
    * @values none, small, medium, large
    */
    padding: {
      type: String,
      default: "large",
      validator: (t) => Object.keys(c).some((e) => e === t)
    },
    /**
     * Displaces the content box from its anchor element
     * by the specified number of pixels.
     * @see https://atomiks.github.io/tippyjs/v6/all-props/#offset"
     */
    offset: {
      type: Array,
      default: () => [0, 16]
    },
    /**
    * The id of the tooltip
    */
    id: {
      type: String,
      default() {
        return s();
      }
    },
    /**
    * 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: ""
    },
    /**
     * Additional class name for the content wrapper element.
     */
    contentClass: {
      type: [String, Array, Object],
      default: ""
    },
    /**
    * 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) => u.includes(t) || t instanceof HTMLElement
    },
    /**
     * The enter delay in milliseconds before the hovercard is shown.
     * @type number
     */
    enterDelay: {
      type: Number,
      default: o
    },
    /**
     * The leave delay in milliseconds before the hovercard is hidden.
     * @type number
     */
    leaveDelay: {
      type: Number,
      default: o
    }
  },
  emits: [
    /**
     * Emitted when popover is shown or hidden
     *
     * @event opened
     * @type {Boolean | Array}
     */
    "opened"
  ],
  data() {
    return {
      hovercardOpen: this.open,
      anchorEl: null,
      observer: null,
      inTimer: null,
      outTimer: null,
      contentFocused: !1,
      mouseOverHovercard: !1
    };
  },
  watch: {
    open: {
      handler: function(t) {
        this.hovercardOpen = t;
      },
      immediate: !0
    }
  },
  mounted() {
    this.$nextTick(() => {
      var t, e, r;
      this.anchorEl = (r = (e = (t = this.$refs.popover) == null ? void 0 : t.$refs) == null ? void 0 : e.anchor) == null ? void 0 : r.firstElementChild, this.observer = new MutationObserver(() => {
        this.anchorEl && !this.anchorEl.isConnected && (this.hovercardOpen = !1);
      }), this.observer.observe(document.body, {
        childList: !0,
        subtree: !0
      });
    });
  },
  beforeDestroy() {
    this.observer && this.observer.disconnect(), clearTimeout(this.inTimer), clearTimeout(this.outTimer);
  },
  methods: {
    setInTimer() {
      this.open === null && (clearTimeout(this.outTimer), this.inTimer = setTimeout(() => {
        this.hovercardOpen = !0;
      }, this.enterDelay));
    },
    setOutTimer() {
      this.open === null && (clearTimeout(this.inTimer), this.outTimer = setTimeout(() => {
        this.hovercardOpen = !1;
      }, this.leaveDelay));
    },
    onMouseEnter() {
      this.mouseOverHovercard = !0, this.setInTimer();
    },
    onMouseLeave() {
      this.mouseOverHovercard = !1, !this.contentFocused && this.open === null && (clearTimeout(this.inTimer), this.setOutTimer());
    },
    onContentFocusIn() {
      this.contentFocused = !0, this.setInTimer();
    },
    onContentFocusOut() {
      this.contentFocused = !1, this.mouseOverHovercard || this.setOutTimer();
    }
  }
};
var f = function() {
  var e = this, r = e._self._c;
  return r("dt-popover", { ref: "popover", attrs: { id: e.id, open: e.hovercardOpen, placement: e.placement, "content-class": e.contentClass, "dialog-class": e.dialogClass, "fallback-placements": e.fallbackPlacements, padding: e.padding, transition: e.transition ? "fade" : null, offset: e.offset, modal: !1, "initial-focus-element": "none", "header-class": e.headerClass, "footer-class": e.footerClass, "append-to": e.appendTo, "data-qa": "dt-hovercard", "enter-delay": e.enterDelay, "leave-delay": e.leaveDelay }, on: { opened: (n) => e.$emit("opened", n), "mouseenter-popover": e.onMouseEnter, "mouseleave-popover": e.onMouseLeave, "mouseenter-popover-anchor": e.onMouseEnter, "mouseleave-popover-anchor": e.onMouseLeave }, scopedSlots: e._u([{ key: "anchor", fn: function({ attrs: n }) {
    return [e._t("anchor", null, null, n)];
  } }, { key: "content", fn: function() {
    return [r("div", { on: { focusin: e.onContentFocusIn, focusout: e.onContentFocusOut } }, [e._t("content")], 2)];
  }, proxy: !0 }, { key: "headerContent", fn: function() {
    return [e._t("headerContent")];
  }, proxy: !0 }, { key: "footerContent", fn: function() {
    return [e._t("footerContent")];
  }, proxy: !0 }], null, !0) });
}, p = [], m = /* @__PURE__ */ a(
  d,
  f,
  p
);
const _ = m.exports;
export {
  _ as default
};
//# sourceMappingURL=hovercard.js.map
