import { a as TailwindElement, x } from '../../index-e73db22f.js';
import { n, e } from '../../query-assigned-elements-1c8c9e90.js';
import { c as ce } from '../../index-ca8e900d.js';
import '../../bundle-mjs-fbc6e2a8.js';

var __defProp = Object.defineProperty;
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
var __decorateClass = (decorators, target, key, kind) => {
  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc(target, key) : target;
  for (var i = decorators.length - 1, decorator; i >= 0; i--)
    if (decorator = decorators[i])
      result = (kind ? decorator(target, key, result) : decorator(result)) || result;
  if (kind && result)
    __defProp(target, key, result);
  return result;
};
let LuksoModal = class extends TailwindElement {
  constructor() {
    super(...arguments);
    this.isOpen = false;
    this.size = "small";
    this.styles = ce({
      slots: {
        wrapper: "opacity-0 fixed z-[1000] transition-opacity top-0 left-0 p-6  animation-duration-200",
        overlay: "bg-[rgba(196,202,206,0.6)] backdrop-blur-sm fixed top-0 left-0 w-[100vw] h-[100vh] z-[999] animate-fade-in animation-duration-200",
        dialog: "bg-neutral-98 rounded-12 shadow-neutral-drop-shadow-3xl z-[1001]"
      },
      variants: {
        isOpen: {
          true: {
            wrapper: "flex opacity-100 visible items-center justify-center w-[100vw] h-[100vh] animate-fade-in"
          },
          false: {
            wrapper: "invisible"
          }
        },
        size: {
          small: {
            dialog: "w-[352px]"
          },
          medium: {
            dialog: "w-[849px]"
          },
          full: {
            dialog: "w-full"
          },
          auto: {}
        }
      }
    });
  }
  close() {
    this.isOpen = false;
  }
  async handleBackdropClick() {
    await this.updateComplete;
    const clickEvent = new CustomEvent("on-backdrop-click", {
      bubbles: true,
      composed: true
    });
    this.dispatchEvent(clickEvent);
  }
  render() {
    const { wrapper, overlay, dialog } = this.styles({
      isOpen: this.isOpen,
      size: this.size
    });
    return x`
      <div data-testid="modal" class=${wrapper()}>
        <div class=${overlay()} @click=${this.handleBackdropClick}></div>
        <div class=${dialog()}>
          <slot></slot>
        </div>
      </div>
    `;
  }
};
__decorateClass([
  n({ type: Boolean, attribute: "is-open" })
], LuksoModal.prototype, "isOpen", 2);
__decorateClass([
  n({ type: String })
], LuksoModal.prototype, "size", 2);
LuksoModal = __decorateClass([
  e("lukso-modal")
], LuksoModal);

export { LuksoModal };
