@wolf-scope/wolf-ui/dist/components/popover/popover.mjs

UI library for web applications using Lit

import { property as l } from "lit/decorators.js";
import { unsafeCSS as h, LitElement as c, html as f } from "lit";
import "../typography/register.mjs";
import "../../chain-filter-963a1f6f.js";
import { c as v } from "../../click-outside-cd5a1f33.js";
import "../typography/typography.mjs";
const m = `:host{display:inline-block;position:relative}.popover{display:none;position:absolute;z-index:1;background-color:#fff;box-shadow:0 2px 4px #0003;padding:10px;min-width:150px}:host([open]) .popover{display:block}:host([position=top]) .popover{bottom:100%}:host([position=bottom]) .popover{top:100%}:host([position=left]) .popover{right:100%}:host([position=right]) .popover{left:100%}
`;
var d = Object.defineProperty, u = Object.getOwnPropertyDescriptor, a = (p, o, s, e) => {
  for (var t = e > 1 ? void 0 : e ? u(o, s) : o, i = p.length - 1, r; i >= 0; i--)
    (r = p[i]) && (t = (e ? r(o, s, t) : r(t)) || t);
  return e && t && d(o, s, t), t;
};
const _ = "wolf-popover";
class n extends c {
  constructor() {
    super(...arguments), this.open = !1, this.position = "auto", this.toggleOpen = (o) => {
      this.open = !this.open;
    }, this.closePopover = () => {
      this.open = !1;
    };
  }
  updated(o) {
    super.updated(o), this.open && v(this, this.closePopover);
  }
  render() {
    return f`
      <slot name="trigger" @click=${this.toggleOpen}></slot>
      <div class="popover">
        <slot name="content"></slot>
      </div>
    `;
  }
}
n.styles = h(m);
a([
  l({ type: Boolean, reflect: !0 })
], n.prototype, "open", 2);
a([
  l({ type: String })
], n.prototype, "position", 2);
export {
  n as WolfPopover,
  _ as tagName
};