@layer components {
  .elevate-dialog[open] {
    @apply backdrop:bg-gray-500/75 backdrop:backdrop-blur-md z-50 bg-white overflow-y-auto;
  }
  /* Modal Center M */
  .elevate-dialog.elevate-dialog--center-m[open] {
    @apply w-full max-w-md inset-0 rounded-lg shadow-xl fixed top-1/2 left-1/2 overflow-hidden -translate-x-1/2 -translate-y-1/2 animate-fade-in-up;
  }
  .elevate-dialog.elevate-dialog--center-m.elevate-dialog--closing {
    @apply animate-fade-out-down;
  }
  /* Modal Center L */
  .elevate-dialog.elevate-dialog--center-l[open] {
    @apply w-full max-w-lg inset-0 rounded-lg shadow-xl fixed top-1/2 left-1/2 overflow-hidden -translate-x-1/2 -translate-y-1/2 animate-fade-in-up;
  }
  .elevate-dialog.elevate-dialog--center-l.elevate-dialog--closing {
    @apply animate-fade-out-down;
  }
  /* Modal Center XL */
  .elevate-dialog.elevate-dialog--center-xl[open] {
    @apply w-full max-w-xl inset-0 rounded-lg shadow-xl fixed top-1/2 left-1/2 overflow-hidden -translate-x-1/2 -translate-y-1/2 animate-fade-in-up;
  }
  .elevate-dialog.elevate-dialog--center-xl.elevate-dialog--closing {
    @apply animate-fade-out-down;
  }
  /* Modal Dialog Right */
  .elevate-dialog.elevate-dialog--right[open] {
    @apply flex m-0 ml-auto flex-col translate-none h-screen !max-h-full w-full max-w-lg animate-slide-in-right;
  }
  .elevate-dialog.elevate-dialog--right.elevate-dialog--closing {
    @apply animate-slide-out-right;
  }
  /* Modal Dialog Left */
  .elevate-dialog.elevate-dialog--left[open] {
    @apply w-full max-w-md fixed top-0 left-0 bottom-0 z-40 h-screen bg-white animate-slide-in-right;
  }
  .elevate-dialog.elevate-dialog--left.elevate-dialog--closing {
    @apply animate-slide-out-right;
  }
}

import { Controller } from "@hotwired/stimulus";
/**
 * Dialog controller for managing modal dialogs
 *
 * @class DialogController
 * @extends Controller
 */
export default class DialogController extends Controller {
  static values = {
    closeWithEscape: { type: Boolean, default: true }
  }
  // Private class field for storing initial content
  #initialContent = '';
  // Animation duration in milliseconds
  #animationDuration = 300;
  /**
   * Initialize bound event handlers
   */
  initialize() {
    this.boundEnableBodyScroll = this.enableBodyScroll.bind(this);
    this.boundHandleKeydown = this.handleKeydown.bind(this);
    this.boundHandleCancel = this.handleCancel.bind(this);
  }
  /**
   * Connect the controller
   */
  connect() {
    this.#saveInitialContent();
    this.#addEventListeners();
  }
  /**
   * Disconnect the controller
   */
  disconnect() {
    this.#removeEventListeners();
  }
  /**
   * Prevent default cancel behavior
   * @param {Event} event - The cancel event
   */
  handleCancel(event) {
    event.preventDefault();
  }
  /**
   * Handle keydown events, specifically for Escape key
   * @param {KeyboardEvent} event - The keydown event
   */
  handleKeydown(event) {
    if (event.key === "Escape" && this.closeWithEscapeValue) {
      event.preventDefault(); // Prevent default browser behavior
      this.close();
    }
  }
  /**
   * Open the dialog modal
   * @param {string} href - Optional URL to load in the turbo-frame
   */
  open(href) {
    const turboFrame = this.element.querySelector("turbo-frame");
    this.element.showModal();
    document.body.classList.add("overflow-hidden");
    if (turboFrame && href) {
      turboFrame.src = href;
    }
  }
  /**
   * Close the dialog with animation
   * @param {Event} [event] - Optional event that triggered the close
   */
  close(event) {
    if (event && event.preventDefault) {
      event.preventDefault();
    }
    this.element.classList.add('elevate-dialog--closing');
    setTimeout(() => {
      this.element.close();
      this.element.classList.remove('elevate-dialog--closing');
      this.#restoreInitialContent();
    }, this.#animationDuration);
  }
  /**
   * Handle form submission completion
   * @param {CustomEvent} event - The turbo:submit-end event
   */
  submitEnd(event) {
    if (event.detail.success) {
      this.close();
    }
  }
  /**
   * Re-enable body scrolling when dialog is closed
   */
  enableBodyScroll() {
    document.body.classList.remove("overflow-hidden");
  }
  /**
   * Handle clicks outside the dialog content
   * @param {MouseEvent} event - The click event
   */
  clickOutside(event) {
    if (event.target === this.element) {
      this.close();
    }
  }
  /**
   * Add event listeners to the dialog element
   * @private
   */
  #addEventListeners() {
    this.element.addEventListener("close", this.boundEnableBodyScroll);
    this.element.addEventListener("keydown", this.boundHandleKeydown);
    this.element.addEventListener("cancel", this.boundHandleCancel);
  }
  /**
   * Remove event listeners from the dialog element
   * @private
   */
  #removeEventListeners() {
    this.element.removeEventListener("close", this.boundEnableBodyScroll);
    this.element.removeEventListener("keydown", this.boundHandleKeydown);
    this.element.removeEventListener("cancel", this.boundHandleCancel);
  }
  /**
   * Restore the dialog to its initial content
   * @private
   */
  #restoreInitialContent() {
    this.element.innerHTML = this.#initialContent;
  }
  /**
   * Save the initial content of the dialog
   * @private
   */
  #saveInitialContent() {
    this.#initialContent = this.element.innerHTML;
  }
}