@alegendstale/holly-components/dist/components/tool-tip/tool-tip.js

Reusable UI components created using lit

import { LitElement as y, html as g } from "lit";
import { query as a, property as f, customElement as c } from "lit/decorators.js";
import n from "./tool-tip.styles.js";
var x = Object.defineProperty, m = Object.getOwnPropertyDescriptor, h = (e, t, r, o) => {
  for (var i = o > 1 ? void 0 : o ? m(t, r) : t, s = e.length - 1, l; s >= 0; s--)
    (l = e[s]) && (i = (o ? l(t, r, i) : l(i)) || i);
  return o && i && x(t, r, i), i;
};
const v = ["hover", "click", "manual"];
let p = class extends y {
  constructor() {
    super(...arguments), this.display = !1, this._trigger = "manual", this.text = "";
  }
  set trigger(e) {
    this._trigger = e, e === "hover" && (this.display = !0);
  }
  get trigger() {
    return this._trigger;
  }
  render() {
    return g`
			<slot
				@click=${() => this.trigger === "click" ? this.display = !this.display : null}
			>
			</slot>
			<p id="tip">
				${this.text}
			</p>
		`;
  }
  /** Clamps the tooltip position to within the bounds.  */
  clampPosition(e, t) {
    if (!this.textEl || !t) return { x: 0, y: 0 };
    let r = this.textEl.offsetWidth, o = this.textEl.offsetHeight, i = e.x - t.left > t.width / 2 ? e.x - t.left - 56 : e.x - t.left + 64, s = r / 2;
    i < 0 + s ? i = 0 + s : i + r > t.width + s && (i = t.width - r + s);
    let l = e.y - t.top - o / 4;
    return l < 0 ? l = 0 : l + o > t.height && (l = t.height - o), { x: i, y: l };
  }
  /** Sets the tooltip position, clamped to a set of bounds. */
  setClampedPosition({ x: e, y: t }, r) {
    this.setPosition(this.clampPosition({ x: e, y: t }, r));
  }
  /** Sets the tooltip position. */
  setPosition({ x: e, y: t }) {
    this.style.setProperty("--tooltip-x", `${e}px`), this.style.setProperty("--tooltip-y", `${t}px`);
  }
};
p.styles = [n];
h([
  a("p")
], p.prototype, "textEl", 2);
h([
  f({ type: Boolean, reflect: !0, useDefault: !0 })
], p.prototype, "display", 2);
h([
  f({ type: String, reflect: !0 })
], p.prototype, "trigger", 1);
h([
  f({ type: String, reflect: !0 })
], p.prototype, "text", 2);
p = h([
  c("tool-tip")
], p);
export {
  p as ToolTip,
  v as triggerTypes
};