import { tMap as e } from "./global.js";
import { delay as t, timeout as n } from "../../helpers/utils.js";
import { useClickOutside as r } from "../../composition/useClickOutside.js";
import { Teleport as i, Transition as a, createBlock as o, createCommentVNode as s, createElementVNode as c, createVNode as l, defineComponent as u, mergeProps as d, normalizeClass as f, normalizeStyle as p, onUnmounted as m, openBlock as h, reactive as g, ref as _, renderSlot as v, resolveDynamicComponent as y, useCssVars as b, watch as x, withCtx as S, withModifiers as C } from "vue";
import { uniqueId as w } from "@milaboratories/helpers";
var T = /* @__PURE__ */ u({
	name: "PlTooltip",
	props: {
		openDelay: { default: 100 },
		closeDelay: { default: 1e3 },
		position: { default: "top" },
		hide: { type: Boolean },
		gap: { default: 8 },
		offsetToTheEdge: { default: 8 },
		element: { default: "div" },
		maxWidth: { default: "300px" },
		container: { default: "body" },
		hoverable: {
			type: Boolean,
			default: !0
		}
	},
	emits: ["tooltip:close"],
	setup(u, { emit: T }) {
		b((e) => ({ v0ef0814d: L }));
		let E = T, D = Symbol(), O = u, k = g({
			open: !1,
			over: !1,
			tooltipOpen: !1,
			key: Symbol()
		});
		e.set(D, () => M()), x(() => k.open, (e) => {
			requestAnimationFrame(() => {
				k.tooltipOpen = e;
			});
		});
		let A = () => {}, j = () => {
			k.open = !0;
			for (let [t, n] of e.entries()) t !== D && n();
		}, M = () => {
			k.open = !1, E("tooltip:close");
		}, N = async () => {
			O.hide || !O.hoverable || (k.over = !0, A(), await t(O.openDelay ?? 100), k.over && j());
		}, P = () => {
			O.hoverable && (k.over = !1, A = n(() => {
				k.over || M();
			}, O.closeDelay));
		};
		x(() => O.hide, (e) => {
			e ? M() : O.hoverable || j();
		});
		let F = _(), I = _();
		r([F, I], () => M()), m(() => {
			e.delete(D);
		});
		let L = `--anchor-${w()}`;
		return (e, t) => (h(), o(y(u.element), d({ class: e.$style.plTooltipAnchorWrapper }, e.$attrs, {
			ref_key: "rootRef",
			ref: F,
			onClick: N,
			onMouseover: N,
			onMouseleave: P
		}), {
			default: S(() => [v(e.$slots, "default"), l(a, { name: "pl-tooltip-fade" }, {
				default: S(() => [e.$slots.tooltip && k.tooltipOpen ? (h(), o(i, {
					key: 0,
					to: u.container
				}, [c("div", {
					class: f([e.$style.plTooltipContainer, {
						[e.$style.top]: O.position === "top",
						[e.$style.bottom]: O.position === "bottom",
						[e.$style.left]: O.position === "left",
						[e.$style.right]: O.position === "right",
						[e.$style.topLeft]: O.position === "top-left"
					}]),
					style: p({
						"--anchorName": L,
						"--gap": u.gap + "px",
						"--offsetToTheEdge": u.offsetToTheEdge + "px",
						"--plTooltipMaxWidth": u.maxWidth
					})
				}, [c("div", {
					class: f(e.$style.plTooltipBox),
					onClick: t[0] ||= C(() => {}, ["stop"])
				}, [c("div", {
					ref_key: "tooltip",
					ref: I,
					class: f([e.$style.plTooltipContent, u.position]),
					onMouseover: N,
					onMouseleave: P
				}, [c("div", null, [v(e.$slots, "tooltip")])], 34)], 2), c("div", { class: f(e.$style.plTooltipBeak) }, null, 2)], 6)], 8, ["to"])) : s("", !0)]),
				_: 3
			})]),
			_: 3
		}, 16, ["class"]));
	}
});
export { T as default };

//# sourceMappingURL=PlTooltip.vue2.js.map