@alegendstale/holly-components/dist/components/absolute-container/absolute-container.js

Reusable UI components created using lit

import { LitElement as h, html as c } from "lit";
import { query as u, property as a, state as f, customElement as m } from "lit/decorators.js";
import { styleMap as g } from "lit/directives/style-map.js";
import d from "./absolute-container.styles.js";
import { HCVisibilityEvent as y } from "../../events/visibility.js";
var _ = Object.defineProperty, v = Object.getOwnPropertyDescriptor, n = (e, t, o, l) => {
  for (var i = l > 1 ? void 0 : l ? v(t, o) : t, r = e.length - 1, p; r >= 0; r--)
    (p = e[r]) && (i = (l ? p(t, o, i) : p(i)) || i);
  return l && i && _(t, o, i), i;
};
let s = class extends h {
  constructor() {
    super(...arguments), this._open = !1, this.left = 0, this.top = 0, this.disableContextEvent = !1;
  }
  set open(e) {
    this._open = e, requestAnimationFrame(() => {
      if (!this._dialog) return;
      const t = this._dialog;
      t.open ? t.close() : t.showModal();
    }), this.dispatchEvent(new y({ isVisible: e }));
  }
  get open() {
    return this._open;
  }
  render() {
    const e = {
      inset: this.left === 0 && this.top === 0 ? 0 : "unset",
      left: `${this.left}px`,
      top: `${this.top}px`
    };
    return c`
			<dialog
				part='__dialog'
				style=${g(e)}
				@mousedown=${(t) => {
      if (!(t.target instanceof HTMLDialogElement)) return;
      const o = t.target.getBoundingClientRect();
      (t.clientX < o.left || t.clientX > o.right || t.clientY < o.top || t.clientY > o.bottom) && (this.open = !1);
    }}
				@contextmenu=${(t) => this.disableContextEvent && t.preventDefault()}
			>
				<slot></slot>
			</dialog>
		`;
  }
  /** Toggle whether container is open. */
  toggle() {
    this.open = !this.open;
  }
  /** Set whether the container is open. */
  setOpen(e) {
    this.open = e;
  }
  /** Set the x and y position of the container. */
  setPosition(e, t) {
    this.left = e, this.top = t;
  }
};
s.styles = [d];
n([
  u("dialog")
], s.prototype, "_dialog", 2);
n([
  a({ type: Boolean, reflect: !0 })
], s.prototype, "open", 1);
n([
  f()
], s.prototype, "left", 2);
n([
  f()
], s.prototype, "top", 2);
n([
  a({ type: Boolean, reflect: !0 })
], s.prototype, "disableContextEvent", 2);
s = n([
  m("absolute-container")
], s);
export {
  s as AbsoluteContainer
};