dap-design-system/dist/components/tooltip/tooltip.component.js

Official design system for the DÁP (dap.gov.hu)

var g = (d, t, s) => new Promise((l, o) => {
  var p = (h) => {
    try {
      u(s.next(h));
    } catch (c) {
      o(c);
    }
  }, n = (h) => {
    try {
      u(s.throw(h));
    } catch (c) {
      o(c);
    }
  }, u = (h) => h.done ? l(h.value) : Promise.resolve(h.value).then(p, n);
  u((s = s.apply(d, t)).next());
});
import { clsx as m } from "../../node_modules/clsx/dist/clsx.js";
import "../../node_modules/@lit/reactive-element/reactive-element.js";
import "../../node_modules/lit-html/lit-html.js";
import "../../node_modules/lit-element/lit-element.js";
import { property as r } from "../../node_modules/@lit/reactive-element/decorators/property.js";
import { state as v } from "../../node_modules/@lit/reactive-element/decorators/state.js";
import { html as f } from "../../node_modules/lit-html/static.js";
import { DdsElement as y } from "../../internal/dds-hu-element.js";
import b from "../popup/popup.component.js";
import T from "./tooltip.scss.js";
import { unsafeCSS as w } from "../../node_modules/@lit/reactive-element/css-tag.js";
var O = Object.defineProperty, C = Object.getOwnPropertyDescriptor, i = (d, t, s, l) => {
  for (var o = l > 1 ? void 0 : l ? C(t, s) : t, p = d.length - 1, n; p >= 0; p--)
    (n = d[p]) && (o = (l ? n(t, s, o) : n(o)) || o);
  return l && o && O(t, s, o), o;
};
const $ = 8, a = class a extends y {
  constructor() {
    super(...arguments), this.placement = "bottom", this.opened = !1, this.mode = "tooltip", this.noArrow = !1, this.floatingStrategy = "absolute", this.disableViewportAutoClose = !1, this._trigger = "hover focus", this.mouseOverTooltip = !1, this.handleBlur = () => {
      this.hasTrigger("focus") && this.hideTooltip();
    }, this.handleClick = () => {
      this.hasTrigger("click") && (this.opened && !this.hasTrigger("focus") ? this.hideTooltip() : this.showTooltip());
    }, this.handleFocus = () => {
      this.hasTrigger("focus") && this.showTooltip();
    }, this.handleMouseOver = () => {
      this.hasTrigger("hover") && this.showTooltip();
    }, this.handleMouseOut = () => {
      this.mouseOverTooltip || this.hasTrigger("hover") && this.hideTooltip();
    }, this.hasTrigger = (t) => this.trigger.split(" ").includes(t);
  }
  set trigger(t) {
    this._trigger = t;
  }
  get trigger() {
    return this.mode ? this.mode === "toggle" ? "click" : this._trigger : "hover focus";
  }
  connectedCallback() {
    super.connectedCallback(), this.addEventListener("blur", this.handleBlur, !0), this.addEventListener("focus", this.handleFocus, !0), this.addEventListener("click", this.handleClick), this.addEventListener("mouseover", this.handleMouseOver), this.addEventListener("mouseout", this.handleMouseOut);
  }
  disconnectedCallback() {
    this.removeEventListener("blur", this.handleBlur, !0), this.removeEventListener("focus", this.handleFocus, !0), this.removeEventListener("click", this.handleClick), this.removeEventListener("mouseover", this.handleMouseOver), this.removeEventListener("mouseout", this.handleMouseOut), super.disconnectedCallback();
  }
  firstUpdated(t) {
    super.firstUpdated(t), this.setAttribute("role", "status");
  }
  showTooltip() {
    return g(this, null, function* () {
      if (this.opened)
        return;
      this.opened = !0;
      const t = this.querySelector('[slot="trigger"]');
      t && t.setAttribute("aria-expanded", "true");
    });
  }
  hideTooltip() {
    return g(this, null, function* () {
      if (!this.opened)
        return;
      this.opened = !1;
      const t = this.querySelector('[slot="trigger"]');
      t && t.setAttribute("aria-expanded", "false");
    });
  }
  render() {
    return f`
      <dap-ds-popup
        part="base"
        role="tooltip"
        id="tooltip"
        exportparts="
          popup:base__popup,
          arrow:base__arrow
        "
        class=${m("tooltip", {
      "tooltip--open": this.opened,
      "tooltip--tooltip": this.mode === "tooltip",
      "tooltip--toggle": this.mode === "toggle"
    })}
        ?opened=${this.opened}
        placement=${this.placement}
        offset=${$}
        floatingStrategy=${this.floatingStrategy}
        ?disableViewportAutoClose=${this.disableViewportAutoClose}
        ?hasArrow=${!this.noArrow}
        @dds-close=${this.hideTooltip}
        @dds-closed=${this.hideTooltip}
        @dds-opened=${this.showTooltip}>
        <slot
          part="trigger"
          name="trigger"
          slot="trigger"
          aria-describedby="tooltip"></slot>
        ${this.content ? f`${this.content}` : f`<slot></slot>`}
      </dap-ds-popup>
    `;
  }
};
a.tagName = "dap-ds-tooltip", a.dependencies = {
  "dap-ds-popup": b
}, a.styles = w(T);
let e = a;
i([
  r()
], e.prototype, "content", 2);
i([
  r({ reflect: !0 })
], e.prototype, "placement", 2);
i([
  r({ type: Boolean, reflect: !0 })
], e.prototype, "opened", 2);
i([
  r()
], e.prototype, "mode", 2);
i([
  r({ type: Boolean, reflect: !0 })
], e.prototype, "noArrow", 2);
i([
  r({ reflect: !0 })
], e.prototype, "floatingStrategy", 2);
i([
  r({ type: Boolean })
], e.prototype, "disableViewportAutoClose", 2);
i([
  r()
], e.prototype, "trigger", 1);
i([
  v()
], e.prototype, "mouseOverTooltip", 2);
export {
  e as default
};
//# sourceMappingURL=tooltip.component.js.map