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

UI library for web applications using Lit

import { property as l } from "lit/decorators.js";
import { unsafeCSS as f, LitElement as h, html as m } from "lit";
import "../../chain-filter-963a1f6f.js";
import { c as d } from "../../click-outside-cd5a1f33.js";
import { classMap as c } from "lit/directives/class-map.js";
const u = `:host{display:inline-flex;position:fixed;background:var(--wolf-theme-color);transition:transform .2s ease-in-out;overflow:hidden}:host .wolf-drawer{width:100%}:host([variant=left-right]){transform:translate(-200%)}:host([isopen]){transform:translate(0)}:host([variant=right-left]){transform:translate(200%)}:host([variant=right-left]) .wolf-drawer.opened{transform:translate(0)}:host([variant=top-bottom]){transform:translateY(-100%)}:host([variant=top-bottom]) .wolf-drawer.opened{transform:translateY(0)}:host([variant=bottom-top]){transform:translateY(100%)}:host([variant=bottom-top]) .wolf-drawer.opened{display:flex;transform:translateY(0)}
`;
var v = Object.defineProperty, w = Object.getOwnPropertyDescriptor, p = (o, r, s, e) => {
  for (var t = e > 1 ? void 0 : e ? w(r, s) : r, a = o.length - 1, n; a >= 0; a--)
    (n = o[a]) && (t = (e ? n(r, s, t) : n(t)) || t);
  return e && t && v(r, s, t), t;
};
const x = "wolf-drawer";
class i extends h {
  constructor() {
    super(...arguments), this.variant = "left-right", this.isOpen = !1, this.closeDrawer = () => {
      this.isOpen = !1, this.dispatchEvent(new CustomEvent("close", { bubbles: !0, composed: !0 }));
    };
  }
  updated(r) {
    super.updated(r), this.isOpen && d(this, this.closeDrawer);
  }
  open() {
    this.isOpen = !0;
  }
  render() {
    return m`<div class=${c({ "wolf-drawer": !0, opened: this.isOpen })}><slot></slot></div>`;
  }
}
i.styles = f(u);
p([
  l({ reflect: !0 })
], i.prototype, "variant", 2);
p([
  l({ type: Boolean, reflect: !0 })
], i.prototype, "isOpen", 2);
export {
  i as WolfDrawer,
  x as tagName
};