import { P as c, x as u, n } from "./plus-base-10eea8a6.mjs";
import { e as b } from "./custom-element-eaccb8d2.mjs";
import v from "./plus.js";
import { s as m } from "./index-975d3293.mjs";
const y = m({
  slots: {
    base: ["plus-drawer font-sans antialiased"],
    drawerOverlay: ["drawer-overlay fixed inset-0 z-40 bg-black bg-opacity-50"],
    drawerClass: ["drawer fixed z-50 h-full overflow-y-auto"],
    drawerContainer: ["drawer-container relative w-full h-full bg-color-base shadow-xl text-base flex flex-col justify-between"],
    drawerHeader: ["drawer-header flex justify-between items-center py-3 px-4 bg-color-base font-semibold text-lg rounded-t-lg border-b border-color-default"],
    drawerBody: ["drawer-body flex-1 p-4"],
    drawerFooter: ["drawer-footer flex justify-end items-center py-3 px-4 gap-2 rounded-b-lg"],
    drawerCloseButtonClass: ["drawer-close-button absolute top-0 right-0 p-3 text-color-default"]
  },
  variants: {
    size: {
      xs: {
        base: [],
        drawerContainer: []
      },
      sm: {
        base: [],
        drawerContainer: []
      },
      md: {
        base: [],
        drawerContainer: []
      },
      lg: {
        base: [],
        drawerContainer: []
      }
    },
    isOpen: {
      true: {
        drawerClass: ["block"],
        drawerOverlay: ["block"]
      },
      false: {
        drawerClass: ["hidden"],
        drawerOverlay: ["hidden"]
      }
    },
    orientation: {
      left: {
        drawerClass: ["h-full max-w-lg inset-y-0 left-0"],
        drawerContainer: "overflow-y-auto"
      },
      right: {
        drawerClass: ["h-full max-w-lg inset-y-0 right-0"],
        drawerContainer: "overflow-y-auto"
      },
      top: {
        drawerClass: ["h-96 w-full inset-x-0 top-0"],
        drawerContainer: "overflow-x-auto"
      },
      bottom: {
        drawerClass: ["bottom-0 h-96 w-full inset-x-0"],
        drawerContainer: "overflow-x-auto"
      }
    }
  },
  compoundVariants: [],
  defaultVariants: {
    size: "md",
    isOpen: !1,
    orientation: "right"
  }
});
var C = Object.defineProperty, x = Object.getOwnPropertyDescriptor, l = (r, s, t, a) => {
  for (var e = a > 1 ? void 0 : a ? x(s, t) : s, o = r.length - 1, i; o >= 0; o--)
    (i = r[o]) && (e = (a ? i(s, t, e) : i(e)) || e);
  return a && e && C(s, t, e), e;
};
let d = class extends c {
  constructor() {
    super(), this.size = v.Sizes.md, this.isOpen = !1, this.orientation = "right", this.keydownHandler = (r) => {
      r.key === "Escape" && this.hide();
    };
  }
  connectedCallback() {
    super.connectedCallback(), this.addEventListener("plus-drawer-before-show", this.drawerShow), this.addEventListener("plus-drawer-before-hide", this.drawerHide);
  }
  hide() {
    this.emit("plus-drawer-before-hide");
  }
  drawerHide() {
    this.isOpen = !1, this.emit("plus-drawer-hide");
  }
  show() {
    this.emit("plus-drawer-before-show");
  }
  drawerShow() {
    this.isOpen = !0, this.emit("plus-drawer-show"), document.addEventListener("keydown", this.keydownHandler);
  }
  disconnectedCallback() {
    super.disconnectedCallback(), this.removeEventListener("plus-drawer-before-show", this.drawerShow), this.removeEventListener("plus-drawer-before-hide", this.drawerHide);
  }
  render() {
    const { size: r, isOpen: s, orientation: t } = this, { base: a, drawerClass: e, drawerOverlay: o, drawerContainer: i, drawerHeader: w, drawerBody: h, drawerFooter: f, drawerCloseButtonClass: p } = y({ size: r, isOpen: s, orientation: t });
    return u`<div class=${a()}>
      <div class=${o()} @click=${() => this.hide()}></div>
      <div class=${e()}>
        <div class=${i()}>
          <slot name="close">
            <button class=${p()} aria-label="Close" @click=${() => this.hide()}><i class="fas fa-xmark"></i></button>
          </slot>
          <div class=${w()}>
            <slot name="header"></slot>
          </div>
          <div class=${h()}>
            <slot name="body"></slot>
            <slot></slot>
          </div>
          <div class=${f()}>
            <slot name="footer"></slot>
          </div>
        </div>
      </div>
    </div> `;
  }
};
l([
  n()
], d.prototype, "size", 2);
l([
  n({ type: Boolean })
], d.prototype, "isOpen", 2);
l([
  n({ type: String })
], d.prototype, "orientation", 2);
d = l([
  b("plus-drawer")
], d);
export {
  d as DrawerComponent
};
