@sondor-technology/sondor-components 1.0.4 → 1.0.6

package/src/components/modal/modal.ts

@@ -1,30 +1,15 @@
-import { LitElement, html, css, PropertyValues, nothing } from 'lit';
-import { customElement, property, query } from 'lit/decorators.js';
-import { resetStyles } from '../../styles/reset.js';
+import {LitElement, html, css, PropertyValues, nothing} from "lit";
+import {customElement, property, query} from "lit/decorators.js";
+import {resetStyles} from "../../styles/reset.js";
 
-@customElement('st-modal')
+@customElement("st-modal")
 export class StModal extends LitElement {
-  /**
-   * Controls whether the modal is open.
-   */
-  @property({ type: Boolean, reflect: true }) open = false;
+  @property({type: Boolean, reflect: true}) open = false;
+  @property({type: String}) heading = "";
+  @property({type: String}) size: "sm" | "md" | "lg" | "xl" | "xxl" = "md";
+  @property({type: Boolean}) static = false;
 
-  /**
-   * Title text displayed in the modal header.
-   */
-  @property({ type: String }) heading = '';
-
-  /**
-   * Size of the modal (sm, md, lg, xl, xxl).
-   */
-  @property({ type: String }) size: 'sm' | 'md' | 'lg' | 'xl' | 'xxl' = 'md';
-
-  /**
-   * If true, the modal cannot be closed by clicking the backdrop or pressing Esc.
-   */
-  @property({ type: Boolean }) static = false;
-
-  @query('dialog') private dialogEl!: HTMLDialogElement;
+  @query("dialog") private dialogEl!: HTMLDialogElement;
 
   private isClosing = false;
 
@@ -41,43 +26,72 @@ export class StModal extends LitElement {
         border-radius: var(--st-radius-lg, 0.5rem);
         background-color: var(--st-color-surface);
         color: var(--st-color-text);
-        
-        /* Responsive width calculation */
+
         width: calc(100% - 2rem);
         margin: auto;
-        
-        box-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
+
+        box-shadow:
+          0 20px 25px -5px rgb(0 0 0 / 0.1),
+          0 8px 10px -6px rgb(0 0 0 / 0.1);
         font-family: var(--st-font-family, inherit);
       }
 
-      /* Sizes */
-      dialog.size-sm { max-width: 400px; }
-      dialog.size-md { max-width: 500px; }
-      dialog.size-lg { max-width: 800px; }
-      dialog.size-xl { max-width: 1024px; }
-      dialog.size-xxl { max-width: 1280px; }
+      dialog.size-sm {
+        max-width: 400px;
+      }
+      dialog.size-md {
+        max-width: 500px;
+      }
+      dialog.size-lg {
+        max-width: 800px;
+      }
+      dialog.size-xl {
+        max-width: 1024px;
+      }
+      dialog.size-xxl {
+        max-width: 1280px;
+      }
 
       dialog::backdrop {
         background-color: rgba(0, 0, 0, 0.5);
         backdrop-filter: blur(2px);
       }
 
-      /* Animations */
       @keyframes fade-in {
-        from { opacity: 0; }
-        to { opacity: 1; }
+        from {
+          opacity: 0;
+        }
+        to {
+          opacity: 1;
+        }
       }
       @keyframes fade-out {
-        from { opacity: 1; }
-        to { opacity: 0; }
+        from {
+          opacity: 1;
+        }
+        to {
+          opacity: 0;
+        }
       }
       @keyframes slide-up {
-        from { opacity: 0; transform: translateY(20px) scale(0.95); }
-        to { opacity: 1; transform: translateY(0) scale(1); }
+        from {
+          opacity: 0;
+          transform: translateY(20px) scale(0.95);
+        }
+        to {
+          opacity: 1;
+          transform: translateY(0) scale(1);
+        }
       }
       @keyframes slide-down {
-        from { opacity: 1; transform: translateY(0) scale(1); }
-        to { opacity: 0; transform: translateY(20px) scale(0.95); }
+        from {
+          opacity: 1;
+          transform: translateY(0) scale(1);
+        }
+        to {
+          opacity: 0;
+          transform: translateY(20px) scale(0.95);
+        }
       }
 
       dialog[open] {
@@ -86,7 +100,7 @@ export class StModal extends LitElement {
       dialog[open]::backdrop {
         animation: fade-in 0.2s cubic-bezier(0.16, 1, 0.3, 1) forwards;
       }
-      
+
       dialog.closing {
         animation: slide-down 0.2s cubic-bezier(0.16, 1, 0.3, 1) forwards;
       }
@@ -118,7 +132,9 @@ export class StModal extends LitElement {
         align-items: center;
         justify-content: center;
         border-radius: var(--st-radius-sm);
-        transition: color 0.2s, background-color 0.2s;
+        transition:
+          color 0.2s,
+          background-color 0.2s;
       }
 
       .close-btn:hover {
@@ -141,13 +157,16 @@ export class StModal extends LitElement {
         border-top: 1px solid var(--st-color-border);
         background-color: var(--st-color-surface-muted, #f8fafc);
       }
-    `
+    `,
   ];
 
-  updated(changedProperties: PropertyValues) {
-    if (changedProperties.has('open')) {
+  // 🚀 FIX: Typed strictly and calls super
+  override updated(changedProperties: PropertyValues<this>) {
+    super.updated(changedProperties);
+
+    if (changedProperties.has("open")) {
       if (this.open) {
-        this.dialogEl.classList.remove('closing');
+        this.dialogEl.classList.remove("closing");
         this.isClosing = false;
         if (!this.dialogEl.open) {
           this.dialogEl.showModal();
@@ -161,27 +180,27 @@ export class StModal extends LitElement {
   private closeWithAnimation() {
     if (this.isClosing) return;
     this.isClosing = true;
-    this.dialogEl.classList.add('closing');
-    
+    this.dialogEl.classList.add("closing");
+
     const onAnimationEnd = () => {
-      this.dialogEl.removeEventListener('animationend', onAnimationEnd);
-      this.dialogEl.classList.remove('closing');
+      this.dialogEl.classList.remove("closing");
       this.isClosing = false;
       if (!this.open) {
         this.dialogEl.close();
       }
     };
-    
-    this.dialogEl.addEventListener('animationend', onAnimationEnd);
+
+    // 🚀 FIX: Prevent listener stacking on rapid toggles
+    this.dialogEl.addEventListener("animationend", onAnimationEnd, {once: true});
   }
 
   private handleClose() {
     this.open = false;
-    this.dispatchEvent(new CustomEvent('st-close', { bubbles: true, composed: true }));
+    this.dispatchEvent(new CustomEvent("st-close", {bubbles: true, composed: true}));
   }
 
   private handleCancel(e: Event) {
-    e.preventDefault(); 
+    e.preventDefault();
     if (!this.static) {
       this.handleClose();
     }
@@ -190,7 +209,7 @@ export class StModal extends LitElement {
   private onDialogClose() {
     if (this.open) {
       this.open = false;
-      this.dispatchEvent(new CustomEvent('st-close', { bubbles: true, composed: true }));
+      this.dispatchEvent(new CustomEvent("st-close", {bubbles: true, composed: true}));
     }
   }
 
@@ -198,7 +217,7 @@ export class StModal extends LitElement {
     if (this.static) return;
 
     const rect = this.dialogEl.getBoundingClientRect();
-    const clickedOutside = 
+    const clickedOutside =
       e.clientX < rect.left ||
       e.clientX > rect.right ||
       e.clientY < rect.top ||
@@ -211,28 +230,43 @@ export class StModal extends LitElement {
 
   render() {
     return html`
-      <dialog 
+      <dialog
         class="size-${this.size}"
-        aria-labelledby=${this.heading ? 'modal-heading' : nothing}
-        @cancel=${this.handleCancel} 
-        @click=${this.handleBackdropClick} 
+        aria-labelledby=${this.heading ? "modal-heading" : nothing}
+        @cancel=${this.handleCancel}
+        @click=${this.handleBackdropClick}
         @close=${this.onDialogClose}
       >
-        <div class="modal-header" @click=${(e: MouseEvent) => e.stopPropagation()}>
+        <!-- 🚀 FIX: Removed @click=stopPropagation from all inner wrappers -->
+        <div class="modal-header">
           <slot name="header">
             <h3 class="modal-title" id="modal-heading">${this.heading}</h3>
           </slot>
-          
-          ${!this.static ? html`
-            <button class="close-btn" @click=${this.handleClose} aria-label="Close modal">
-              <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="18" y1="6" x2="6" y2="18"></line><line x1="6" y1="6" x2="18" y2="18"></line></svg>
-            </button>
-          ` : nothing}
+
+          ${!this.static
+            ? html`
+                <button class="close-btn" @click=${this.handleClose} aria-label="Close modal">
+                  <svg
+                    width="18"
+                    height="18"
+                    viewBox="0 0 24 24"
+                    fill="none"
+                    stroke="currentColor"
+                    stroke-width="2"
+                    stroke-linecap="round"
+                    stroke-linejoin="round"
+                  >
+                    <line x1="18" y1="6" x2="6" y2="18"></line>
+                    <line x1="6" y1="6" x2="18" y2="18"></line>
+                  </svg>
+                </button>
+              `
+            : nothing}
         </div>
-        <div class="modal-body" @click=${(e: MouseEvent) => e.stopPropagation()}>
+        <div class="modal-body">
           <slot></slot>
         </div>
-        <div class="modal-footer" @click=${(e: MouseEvent) => e.stopPropagation()}>
+        <div class="modal-footer">
           <slot name="footer"></slot>
         </div>
       </dialog>
@@ -242,6 +276,6 @@ export class StModal extends LitElement {
 
 declare global {
   interface HTMLElementTagNameMap {
-    'st-modal': StModal;
+    "st-modal": StModal;
   }
-}
+}