'use strict';

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

const shared_tailwindElement_index = require('../../chunks/index-BxQ_0s_1.js');
const property = require('../../chunks/property-D6IL6zax.js');
const index = require('../../chunks/index-CaJky2qL.js');
const chunkLQIOVPBE = require('../../chunks/chunk-LQIOVPBE-kQFZF_OS.js');

var __defProp = Object.defineProperty;
var __decorateClass = (decorators, target, key, kind) => {
  var result = void 0 ;
  for (var i = decorators.length - 1, decorator; i >= 0; i--)
    if (decorator = decorators[i])
      result = (decorator(target, key, result) ) || result;
  if (result) __defProp(target, key, result);
  return result;
};
class LuksoModal extends chunkLQIOVPBE.withTheme(shared_tailwindElement_index.TailwindElement) {
  constructor() {
    super(...arguments);
    this.isOpen = false;
    this.disableAnimations = false;
    this.size = "small";
    this.hasBottomPadding = false;
    this.styles = index.ce({
      slots: {
        wrapper: "opacity-0 fixed z-[1011] transition-opacity inset-0 w-screen h-screen overflow-y-auto overscroll-none scrolling-touch touch-pan-y",
        inner: "min-h-screen flex items-center justify-center px-6 pt-6 w-full",
        overlay: "bg-[rgba(196,202,206,0.6)] backdrop-blur-sm fixed inset-0 w-[100vw] h-[100vh] z-[1010] dark:bg-[rgba(196,202,206,0.1)]",
        dialog: "bg-neutral-98 rounded-12 shadow-neutral-shadow-round-3xl z-[1012] mx-auto dark:bg-neutral-10"
      },
      variants: {
        isOpen: {
          true: {
            wrapper: "opacity-100 visible w-[100vw] h-[100vh]"
          },
          false: {
            wrapper: "hidden"
          }
        },
        size: {
          small: {
            dialog: "w-[352px]"
          },
          medium: {
            dialog: "w-[849px]"
          },
          full: {
            dialog: "w-full"
          },
          auto: {}
        },
        disableAnimations: {
          false: {
            wrapper: "animation-duration-300 delay-300",
            overlay: "animation-duration-300"
          }
        },
        hasBottomPadding: {
          true: {
            inner: "pb-[120px]"
          },
          false: {
            inner: "pb-6"
          }
        }
      },
      compoundVariants: [
        {
          disableAnimations: false,
          isOpen: true,
          class: {
            wrapper: "animate-fade-in",
            overlay: "animate-fade-in"
          }
        }
      ]
    });
  }
  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, inner } = this.styles({
      isOpen: this.isOpen,
      size: this.size,
      disableAnimations: this.disableAnimations,
      hasBottomPadding: this.hasBottomPadding
    });
    return shared_tailwindElement_index.x`
      <div data-testid="modal" class=${wrapper()}>
        <div class=${inner()}>
          <div class=${overlay()} @click=${this.handleBackdropClick}></div>
          <div class=${dialog()}>
            <slot></slot>
          </div>
        </div>
      </div>
    `;
  }
}
__decorateClass([
  property.n({ type: Boolean, attribute: "is-open" })
], LuksoModal.prototype, "isOpen");
__decorateClass([
  property.n({ type: Boolean, attribute: "disable-animations" })
], LuksoModal.prototype, "disableAnimations");
__decorateClass([
  property.n({ type: String })
], LuksoModal.prototype, "size");
__decorateClass([
  property.n({ type: Boolean, attribute: "has-bottom-padding" })
], LuksoModal.prototype, "hasBottomPadding");
customElements.define("lukso-modal", LuksoModal);

exports.LuksoModal = LuksoModal;
