'use strict';

Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });

const shared_tailwindElement_index = require('../../index-5e074b8e.cjs');
const queryAssignedElements = require('../../query-assigned-elements-d5e45650.cjs');
const index = require('../../index-e9668573.cjs');
require('../../directive-8278ab14.cjs');

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;
};
exports.LuksoModal = class LuksoModal extends shared_tailwindElement_index.TailwindElement {
  constructor() {
    super(...arguments);
    this.isOpen = false;
    this.size = "small";
    this.wrapperStyles = `opacity-0 fixed z-[1000] transition-opacity top-0 left-0 p-6  animation-duration-200`;
    this.openStyles = `flex opacity-100 visible items-center justify-center w-[100vw] h-[100vh] animate-fade-in`;
    this.overlayStyles = `bg-[rgba(36,53,66,0.8)] backdrop-blur-sm fixed top-0 left-0 w-[100vw] h-[100vh] z-[999]`;
    this.dialogStyles = `bg-neutral-98 rounded-12 shadow-neutral-drop-shadow-3xl z-[1001]`;
  }
  close() {
    this.isOpen = false;
  }
  async handleBackdropClick() {
    await this.updateComplete;
    const clickEvent = new CustomEvent("on-backdrop-click", {
      bubbles: true,
      composed: true
    });
    this.dispatchEvent(clickEvent);
  }
  render() {
    return shared_tailwindElement_index.x`
      <div
        data-testid="modal"
        class=${index.customClassMap({
      [this.wrapperStyles]: true,
      [this.openStyles]: this.isOpen,
      ["invisible"]: !this.isOpen
    })}
      >
        <div
          class=${index.customClassMap({
      [this.overlayStyles]: true
    })}
          @click=${this.handleBackdropClick}
        ></div>
        <div
          class=${index.customClassMap({
      [this.dialogStyles]: true,
      ["w-[352px]"]: this.size === "small",
      ["w-[849px]"]: this.size === "medium",
      ["w-full"]: this.size === "full"
    })}
        >
          <slot></slot>
        </div>
      </div>
    `;
  }
};
__decorateClass([
  queryAssignedElements.n({ type: Boolean, attribute: "is-open" })
], exports.LuksoModal.prototype, "isOpen", 2);
__decorateClass([
  queryAssignedElements.n({ type: String })
], exports.LuksoModal.prototype, "size", 2);
exports.LuksoModal = __decorateClass([
  queryAssignedElements.e("lukso-modal")
], exports.LuksoModal);
