import { P as p, x as b, n as m } from "./plus-base-10eea8a6.mjs";
import { e as h } from "./custom-element-eaccb8d2.mjs";
import v from "./plus.js";
import { s as x } from "./index-975d3293.mjs";
const C = x({
  slots: {
    base: ["plus-modal font-sans antialiased text-color-default"],
    modalOverlay: ["modal-overlay fixed inset-0 z-40 bg-black bg-opacity-50"],
    modalClass: ["modal fixed z-50 inset-0 overflow-y-auto p-4"],
    modalContainer: ["modal-container relative w-full mx-auto my-8 bg-color-base rounded-lg shadow-xl text-base"],
    modalHeader: ["modal-header flex justify-between items-center bg-color-base font-semibold  rounded-t-lg border-b border-color-default"],
    modalBody: ["modal-body "],
    modalFooter: ["modal-footer flex justify-end items-center  gap-2 rounded-b-lg"],
    modalCloseButtonClass: ["modal-close-button absolute top-0 right-0 text-color-default"]
  },
  variants: {
    size: {
      xs: {
        base: [],
        modalContainer: ["max-w-xl"]
        // modalHeader: ["text-base py-3 px-5"],
        // modalCloseButtonClass: ["text-sm py-3.5 px-4"],
        // modalBody: ["px-4"],
        // modalFooter: ["p-4"],
      },
      sm: {
        base: [],
        modalContainer: ["max-w-3xl"]
        // modalHeader: ["text-base py-3 px-5"],
        // modalCloseButtonClass: ["text-sm py-3.5 px-4"],
        // modalBody: ["px-4"],
        // modalFooter: ["p-4"],
      },
      md: {
        base: [],
        modalContainer: ["max-w-4xl"]
        // modalHeader: ["text-lg py-3.5 px-5"],
        // modalCloseButtonClass: ["text-md py-4 px-5"],
        // modalBody: ["px-5"],
        // modalFooter: ["p-5"],
      },
      lg: {
        base: [],
        modalContainer: ["max-w-5xl"]
        // modalHeader: ["text-xl py-4 px-6"],
        // modalCloseButtonClass: ["text-lg py-4 px-6"],
        // modalBody: ["px-6"],
        // modalFooter: ["p-6"],
      },
      xl: {
        base: [],
        modalContainer: ["max-w-6xl"]
        // modalHeader: ["text-2xl py-5 px-7"],
        // modalCloseButtonClass: ["text-xl py-5 px-7"],
        // modalBody: ["px-7"],
        // modalFooter: ["p-7"],
      }
    },
    isOpen: {
      true: {
        modalClass: ["block"],
        modalOverlay: ["block"]
      },
      false: {
        modalClass: ["hidden"],
        modalOverlay: ["hidden"]
      }
    },
    fullWidth: {
      true: {
        modalContainer: ["max-w-full"]
      },
      false: {
        modalContainer: []
      }
    }
  },
  compoundVariants: [],
  defaultVariants: {
    size: "md",
    isOpen: !1,
    fullWidth: !1
  }
});
var y = Object.defineProperty, w = Object.getOwnPropertyDescriptor, r = (i, l, a, o) => {
  for (var e = o > 1 ? void 0 : o ? w(l, a) : l, s = i.length - 1, t; s >= 0; s--)
    (t = i[s]) && (e = (o ? t(l, a, e) : t(e)) || e);
  return o && e && y(l, a, e), e;
};
let d = class extends p {
  constructor() {
    super(), this.size = v.Sizes.md, this.isOpen = !1, this.fullWidth = !1;
  }
  connectedCallback() {
    super.connectedCallback(), this.addEventListener("plus-modal-before-show", this.modalShow), this.addEventListener("plus-modal-before-hide", this.modalHide);
  }
  hide() {
    this.emit("plus-modal-before-hide");
  }
  modalHide() {
    this.isOpen = !1, this.emit("plus-modal-hide");
  }
  show() {
    this.emit("plus-modal-before-show");
  }
  modalShow() {
    this.isOpen = !0, this.emit("plus-modal-show");
  }
  render() {
    const { size: i, isOpen: l, fullWidth: a } = this, { base: o, modalClass: e, modalOverlay: s, modalContainer: t, modalHeader: n, modalBody: u, modalFooter: f, modalCloseButtonClass: c } = C({ size: i, isOpen: l, fullWidth: a });
    return b`<div class=${o()}>
      <div class=${s()} aria-label="Close" @click=${() => this.hide()}></div>
      <div class=${e()}>
        <div class=${t()}>
          <slot name="close">
            <button class=${c()} aria-label="Close" @click=${() => this.hide()}><i class="fas fa-xmark"></i></button>
          </slot>
          <div class=${n()}>
            <slot name="header"></slot>
          </div>
          <div class=${u()}>
            <slot name="body"></slot>
            <slot></slot>
          </div>
          <div class=${f()}>
            <slot name="footer"></slot>
          </div>
        </div>
      </div>
    </div>`;
  }
};
r([
  m()
], d.prototype, "size", 2);
r([
  m({ type: Boolean, attribute: "is-open" })
], d.prototype, "isOpen", 2);
r([
  m({ reflect: !0, attribute: "full-width", type: Boolean })
], d.prototype, "fullWidth", 2);
d = r([
  h("plus-modal")
], d);
export {
  d as ModalComponent
};
