@nuralyui/modal 0.0.8 → 0.0.9

package/bundle.js

@@ -367,22 +367,22 @@ import{css as a,LitElement as o,nothing as t,html as e}from"lit";import{property
  * @license
  * Copyright 2023 Nuraly, Laabidi Aymen
  * SPDX-License-Identifier: MIT
- */;const M=new class{constructor(){this.modalStack=[],this.baseZIndex=1e3,this.zIndexIncrement=10,this.bodyScrollDisabled=!1,this.originalBodyOverflow=""}openModal(a){const o=this.generateModalId(),t=this.baseZIndex+this.modalStack.length*this.zIndexIncrement,e={modal:a,previousFocus:document.activeElement,zIndex:t,id:o};return this.modalStack.push(e),1===this.modalStack.length&&this.disableBodyScroll(),this.updateModalZIndex(a,t),console.log(`Modal opened. Stack depth: ${this.modalStack.length}, Z-Index: ${t}`),t}closeModal(a){const o=this.modalStack.findIndex((o=>o.modal===a));if(-1===o)return void console.warn("Attempting to close a modal that is not in the stack");const t=this.modalStack[o];if(o<this.modalStack.length-1){this.modalStack.slice(o+1).forEach((a=>{a.modal&&"function"==typeof a.modal.closeModal&&a.modal.closeModal()}))}this.modalStack.splice(o),t.previousFocus instanceof HTMLElement&&setTimeout((()=>{t.previousFocus instanceof HTMLElement&&t.previousFocus.focus()}),100),0===this.modalStack.length&&this.restoreBodyScroll(),console.log(`Modal closed. Stack depth: ${this.modalStack.length}`)}getModalZIndex(a){const o=this.modalStack.find((o=>o.modal===a));return o?o.zIndex:this.baseZIndex}isTopModal(a){return 0!==this.modalStack.length&&this.modalStack[this.modalStack.length-1].modal===a}getStackDepth(){return this.modalStack.length}closeAllModals(){[...this.modalStack].reverse().forEach((a=>{a.modal&&"function"==typeof a.modal.closeModal&&a.modal.closeModal()}))}getOpenModalIds(){return this.modalStack.map((a=>a.id))}hasOpenModals(){return this.modalStack.length>0}generateModalId(){return`modal-${Date.now()}-${Math.random().toString(36).substr(2,9)}`}updateModalZIndex(a,o){a&&a.style&&a.style.setProperty("--nuraly-z-modal-backdrop",o.toString())}disableBodyScroll(){this.bodyScrollDisabled||(this.originalBodyOverflow=document.body.style.overflow,document.body.style.overflow="hidden",this.bodyScrollDisabled=!0)}restoreBodyScroll(){this.bodyScrollDisabled&&(document.body.style.overflow=this.originalBodyOverflow,this.bodyScrollDisabled=!1)}handleEscapeKey(){if(0===this.modalStack.length)return!1;const a=this.modalStack[this.modalStack.length-1].modal;return!(!a||"function"!=typeof a.closeModal||!1===a.closable)&&(a.closeModal(),!0)}handleBackdropClick(a){return this.isTopModal(a)}};"undefined"!=typeof window&&(window.ModalManager=M)
+ */;const M=new class{constructor(){this.modalStack=[],this.baseZIndex=1e3,this.zIndexIncrement=10,this.bodyScrollDisabled=!1,this.originalBodyOverflow=""}openModal(a){const o=this.generateModalId(),t=this.baseZIndex+this.modalStack.length*this.zIndexIncrement,e={modal:a,previousFocus:document.activeElement,zIndex:t,id:o};return this.modalStack.push(e),1===this.modalStack.length&&this.disableBodyScroll(),this.updateModalZIndex(a,t),t}closeModal(a){const o=this.modalStack.findIndex(o=>o.modal===a);if(-1===o)return void console.warn("Attempting to close a modal that is not in the stack");const t=this.modalStack[o];if(o<this.modalStack.length-1){this.modalStack.slice(o+1).forEach(a=>{a.modal&&"function"==typeof a.modal.closeModal&&a.modal.closeModal()})}this.modalStack.splice(o),t.previousFocus instanceof HTMLElement&&setTimeout(()=>{t.previousFocus instanceof HTMLElement&&t.previousFocus.focus()},100),0===this.modalStack.length&&this.restoreBodyScroll(),console.log(`Modal closed. Stack depth: ${this.modalStack.length}`)}getModalZIndex(a){const o=this.modalStack.find(o=>o.modal===a);return o?o.zIndex:this.baseZIndex}isTopModal(a){return 0!==this.modalStack.length&&this.modalStack[this.modalStack.length-1].modal===a}getStackDepth(){return this.modalStack.length}closeAllModals(){[...this.modalStack].reverse().forEach(a=>{a.modal&&"function"==typeof a.modal.closeModal&&a.modal.closeModal()})}getOpenModalIds(){return this.modalStack.map(a=>a.id)}hasOpenModals(){return this.modalStack.length>0}generateModalId(){return`modal-${Date.now()}-${Math.random().toString(36).substr(2,9)}`}updateModalZIndex(a,o){a&&a.style&&a.style.setProperty("--nuraly-z-modal-backdrop",o.toString())}disableBodyScroll(){this.bodyScrollDisabled||(this.originalBodyOverflow=document.body.style.overflow,document.body.style.overflow="hidden",this.bodyScrollDisabled=!0)}restoreBodyScroll(){this.bodyScrollDisabled&&(document.body.style.overflow=this.originalBodyOverflow,this.bodyScrollDisabled=!1)}handleEscapeKey(){if(0===this.modalStack.length)return!1;const a=this.modalStack[this.modalStack.length-1].modal;return!(!a||"function"!=typeof a.closeModal||!1===a.closable)&&(a.closeModal(),!0)}handleBackdropClick(a){return this.isTopModal(a)}};"undefined"!=typeof window&&(window.ModalManager=M)
 /**
  * @license
  * Copyright 2023 Nuraly, Laabidi Aymen
  * SPDX-License-Identifier: MIT
- */;class ${constructor(a){this.initialX=0,this.initialY=0,this.dragHandle=null,this.handleMouseDown=a=>{var o;if(!this.host.modalDraggable)return;a.preventDefault(),this.host.isDragging=!0,this.initialX=a.clientX-this.host.offsetX,this.initialY=a.clientY-this.host.offsetY;const t=null===(o=this.host.shadowRoot)||void 0===o?void 0:o.querySelector(".modal");t&&t.classList.add("modal--dragging")},this.handleMouseMove=a=>{var o;if(!this.host.isDragging||!this.host.modalDraggable)return;a.preventDefault();const t=a.clientX-this.initialX,e=a.clientY-this.initialY,i=null===(o=this.host.shadowRoot)||void 0===o?void 0:o.querySelector(".modal");if(i){const a=i.getBoundingClientRect(),o=window.innerWidth,r=window.innerHeight,s=-a.width/2,n=o-a.width/2,l=-a.height/2,d=r-a.height/2;this.host.offsetX=Math.max(s,Math.min(n,t)),this.host.offsetY=Math.max(l,Math.min(d,e)),i.style.transform=`translate(${this.host.offsetX}px, ${this.host.offsetY}px)`}this.host.requestUpdate()},this.handleMouseUp=()=>{var a;if(!this.host.isDragging)return;this.host.isDragging=!1;const o=null===(a=this.host.shadowRoot)||void 0===a?void 0:a.querySelector(".modal");o&&o.classList.remove("modal--dragging"),this.host.requestUpdate()},this.host=a,this.host.addController(this)}hostConnected(){this.setupDragHandlers()}hostDisconnected(){this.cleanupDragHandlers()}setupDragHandlers(){requestAnimationFrame((()=>{var a;this.dragHandle=null===(a=this.host.shadowRoot)||void 0===a?void 0:a.querySelector(".modal-header--draggable"),this.dragHandle&&this.host.modalDraggable&&(this.dragHandle.addEventListener("mousedown",this.handleMouseDown),document.addEventListener("mousemove",this.handleMouseMove),document.addEventListener("mouseup",this.handleMouseUp))}))}cleanupDragHandlers(){this.dragHandle&&this.dragHandle.removeEventListener("mousedown",this.handleMouseDown),document.removeEventListener("mousemove",this.handleMouseMove),document.removeEventListener("mouseup",this.handleMouseUp)}resetPosition(){var a;this.host.offsetX=0,this.host.offsetY=0;const o=null===(a=this.host.shadowRoot)||void 0===a?void 0:a.querySelector(".modal");o&&(o.style.transform="none"),this.host.requestUpdate()}}
+ */;class C{constructor(a){this.initialX=0,this.initialY=0,this.dragHandle=null,this.handleMouseDown=a=>{var o;if(!this.host.modalDraggable)return;a.preventDefault(),this.host.isDragging=!0,this.initialX=a.clientX-this.host.offsetX,this.initialY=a.clientY-this.host.offsetY;const t=null===(o=this.host.shadowRoot)||void 0===o?void 0:o.querySelector(".modal");t&&t.classList.add("modal--dragging")},this.handleMouseMove=a=>{var o;if(!this.host.isDragging||!this.host.modalDraggable)return;a.preventDefault();const t=a.clientX-this.initialX,e=a.clientY-this.initialY,i=null===(o=this.host.shadowRoot)||void 0===o?void 0:o.querySelector(".modal");if(i){const a=i.getBoundingClientRect(),o=window.innerWidth,r=window.innerHeight,s=-a.width/2,n=o-a.width/2,l=-a.height/2,d=r-a.height/2;this.host.offsetX=Math.max(s,Math.min(n,t)),this.host.offsetY=Math.max(l,Math.min(d,e)),i.style.transform=`translate(${this.host.offsetX}px, ${this.host.offsetY}px)`}this.host.requestUpdate()},this.handleMouseUp=()=>{var a;if(!this.host.isDragging)return;this.host.isDragging=!1;const o=null===(a=this.host.shadowRoot)||void 0===a?void 0:a.querySelector(".modal");o&&o.classList.remove("modal--dragging"),this.host.requestUpdate()},this.host=a,this.host.addController(this)}hostConnected(){this.setupDragHandlers()}hostDisconnected(){this.cleanupDragHandlers()}setupDragHandlers(){requestAnimationFrame(()=>{var a;this.dragHandle=null===(a=this.host.shadowRoot)||void 0===a?void 0:a.querySelector(".modal-header--draggable"),this.dragHandle&&this.host.modalDraggable&&(this.dragHandle.addEventListener("mousedown",this.handleMouseDown),document.addEventListener("mousemove",this.handleMouseMove),document.addEventListener("mouseup",this.handleMouseUp))})}cleanupDragHandlers(){this.dragHandle&&this.dragHandle.removeEventListener("mousedown",this.handleMouseDown),document.removeEventListener("mousemove",this.handleMouseMove),document.removeEventListener("mouseup",this.handleMouseUp)}resetPosition(){var a;this.host.offsetX=0,this.host.offsetY=0;const o=null===(a=this.host.shadowRoot)||void 0===a?void 0:a.querySelector(".modal");o&&(o.style.transform="none"),this.host.requestUpdate()}}
 /**
  * @license
  * Copyright 2023 Nuraly, Laabidi Aymen
  * SPDX-License-Identifier: MIT
- */class S{constructor(a){this.handleKeyDown=a=>{if(this.host.open)switch(a.key){case"Escape":if(this.host.closable){a.preventDefault(),a.stopPropagation();if(!M.handleEscapeKey()){const a=new CustomEvent("modal-escape",{bubbles:!0,cancelable:!0});this.host.dispatchEvent(a)&&this.host.closeModal()}}break;case"Tab":M.isTopModal(this.host)&&this.handleTabNavigation(a)}},this.host=a,this.host.addController(this)}hostConnected(){document.addEventListener("keydown",this.handleKeyDown)}hostDisconnected(){document.removeEventListener("keydown",this.handleKeyDown)}handleTabNavigation(a){var o;const t=null===(o=this.host.shadowRoot)||void 0===o?void 0:o.querySelector(".modal");if(!t)return;const e=this.getFocusableElements(t);if(0===e.length)return;const i=e[0],r=e[e.length-1];a.shiftKey?document.activeElement===i&&(a.preventDefault(),r.focus()):document.activeElement===r&&(a.preventDefault(),i.focus())}getFocusableElements(a){const o=["a[href]","button:not([disabled])","input:not([disabled])","select:not([disabled])","textarea:not([disabled])",'[tabindex]:not([tabindex="-1"])','[contenteditable="true"]'].join(", ");return Array.from(a.querySelectorAll(o)).filter((a=>a.offsetWidth>0&&a.offsetHeight>0&&!a.hidden&&"hidden"!==getComputedStyle(a).visibility))}focusFirstElement(){var a;const o=null===(a=this.host.shadowRoot)||void 0===a?void 0:a.querySelector(".modal");if(!o)return;const t=this.getFocusableElements(o);t.length>0?t[0].focus():o.focus()}focusLastElement(){var a;const o=null===(a=this.host.shadowRoot)||void 0===a?void 0:a.querySelector(".modal");if(!o)return;const t=this.getFocusableElements(o);t.length>0&&t[t.length-1].focus()}}
+ */class S{constructor(a){this.handleKeyDown=a=>{if(this.host.open)switch(a.key){case"Escape":if(this.host.closable){a.preventDefault(),a.stopPropagation();if(!M.handleEscapeKey()){const a=new CustomEvent("modal-escape",{bubbles:!0,cancelable:!0});this.host.dispatchEvent(a)&&this.host.closeModal()}}break;case"Tab":M.isTopModal(this.host)&&this.handleTabNavigation(a)}},this.host=a,this.host.addController(this)}hostConnected(){document.addEventListener("keydown",this.handleKeyDown)}hostDisconnected(){document.removeEventListener("keydown",this.handleKeyDown)}handleTabNavigation(a){var o;const t=null===(o=this.host.shadowRoot)||void 0===o?void 0:o.querySelector(".modal");if(!t)return;const e=this.getFocusableElements(t);if(0===e.length)return;const i=e[0],r=e[e.length-1];a.shiftKey?document.activeElement===i&&(a.preventDefault(),r.focus()):document.activeElement===r&&(a.preventDefault(),i.focus())}getFocusableElements(a){const o=["a[href]","button:not([disabled])","input:not([disabled])","select:not([disabled])","textarea:not([disabled])",'[tabindex]:not([tabindex="-1"])','[contenteditable="true"]'].join(", ");return Array.from(a.querySelectorAll(o)).filter(a=>a.offsetWidth>0&&a.offsetHeight>0&&!a.hidden&&"hidden"!==getComputedStyle(a).visibility)}focusFirstElement(){var a;const o=null===(a=this.host.shadowRoot)||void 0===a?void 0:a.querySelector(".modal");if(!o)return;const t=this.getFocusableElements(o);t.length>0?t[0].focus():o.focus()}focusLastElement(){var a;const o=null===(a=this.host.shadowRoot)||void 0===a?void 0:a.querySelector(".modal");if(!o)return;const t=this.getFocusableElements(o);t.length>0&&t[t.length-1].focus()}}
 /**
  * @license
  * Copyright 2023 Nuraly, Laabidi Aymen
  * SPDX-License-Identifier: MIT
- */var C=function(a,o,t,e){for(var i,r=arguments.length,s=r<3?o:null===e?e=Object.getOwnPropertyDescriptor(o,t):e,n=a.length-1;n>=0;n--)(i=a[n])&&(s=(r<3?i(s):r>3?i(o,t,s):i(o,t))||s);return r>3&&s&&Object.defineProperty(o,t,s),s};let E=class extends(d(o)){constructor(){super(...arguments),this.open=!1,this.size=c.Medium,this.position=h.Center,this.animation=m.Fade,this.backdrop=u.Closable,this.closable=!0,this.modalDraggable=!1,this.resizable=!1,this.fullscreen=!1,this.modalTitle=p,this.showCloseButton=!0,this.headerIcon=p,this.zIndex=1e3,this.width=p,this.height=p,this.isDragging=!1,this.offsetX=0,this.offsetY=0,this.animationState="closed",this.previousActiveElement=null,this.requiredComponents=["nr-icon","nr-button"],this.dragController=new $(this),this.keyboardController=new S(this),this.handleBackdropClick=a=>{this.backdrop===u.Closable&&a.target===a.currentTarget&&M.handleBackdropClick(this)&&this.closeModal()}}connectedCallback(){super.connectedCallback(),this.validateDependencies()}disconnectedCallback(){super.disconnectedCallback(),this.previousActiveElement instanceof HTMLElement&&this.previousActiveElement.focus()}willUpdate(a){super.willUpdate(a),a.has("open")&&(this.open?this.handleOpen():this.handleClose())}handleOpen(){const a=M.openModal(this);this.zIndex=a,this.animationState="opening",this.dispatchEvent(new CustomEvent("modal-open",{bubbles:!0,detail:{modal:this,stackDepth:M.getStackDepth()}})),this.updateComplete.then((()=>{this.startOpenAnimation()}))}startOpenAnimation(){var a,o;const t=null===(a=this.shadowRoot)||void 0===a?void 0:a.querySelector(".modal"),e=null===(o=this.shadowRoot)||void 0===o?void 0:o.querySelector(".modal-backdrop");if(!t||!e)return;const{modalKeyframes:i}=this.getAnimationKeyframes();t.animate(i,{duration:300,easing:"ease",fill:"forwards"}).addEventListener("finish",(()=>{this.animationState="open",M.isTopModal(this)&&this.keyboardController.focusFirstElement(),this.dispatchEvent(new CustomEvent("modal-after-open",{bubbles:!0,detail:{modal:this,stackDepth:M.getStackDepth()}}))}))}getAnimationKeyframes(){let a;switch(this.animation){case"fade":default:a=[{opacity:0,transform:"scale(0.9)"},{opacity:1,transform:"scale(1)"}];break;case"zoom":a=[{opacity:0,transform:"scale(0.7)"},{opacity:1,transform:"scale(1)"}];break;case"slide-up":a=[{opacity:0,transform:"translateY(20px)"},{opacity:1,transform:"translateY(0)"}];break;case"slide-down":a=[{opacity:0,transform:"translateY(-20px)"},{opacity:1,transform:"translateY(0)"}]}return{modalKeyframes:a,backdropKeyframes:[{opacity:0},{opacity:1}]}}handleClose(){this.animationState="closing",M.closeModal(this),this.dragController.resetPosition(),setTimeout((()=>{this.animationState="closed"}),300)}openModal(){this.open=!0}closeModal(){if(!this.closable)return;const a=new CustomEvent("modal-before-close",{bubbles:!0,cancelable:!0,detail:{modal:this,cancel:()=>a.preventDefault()}});this.dispatchEvent(a)&&(this.open=!1,this.dispatchEvent(new CustomEvent("modal-close",{bubbles:!0,detail:{modal:this}})))}getBackdropClasses(){return{"modal-backdrop":!0,"modal-backdrop--hidden":!this.open,[`modal-backdrop--position-${this.position}`]:!0}}getModalClasses(){return{modal:!0,[`modal--size-${this.size}`]:!this.fullscreen,"modal--fullscreen":this.fullscreen,[`modal--animation-${this.animation}`]:"opening"===this.animationState||"open"===this.animationState,"modal--dragging":this.isDragging,"modal--resizable":this.resizable}}getModalStyles(){const a={};return this.zIndex&&(a["--nuraly-z-modal-backdrop"]=this.zIndex.toString()),this.width&&(a.width=this.width),this.height&&(a.height=this.height),a}renderHeader(){const a=this.querySelector('[slot="header"]'),o=this.modalTitle||this.headerIcon;return a||o||this.showCloseButton?e`
+ */var $=function(a,o,t,e){for(var i,r=arguments.length,s=r<3?o:null===e?e=Object.getOwnPropertyDescriptor(o,t):e,n=a.length-1;n>=0;n--)(i=a[n])&&(s=(r<3?i(s):r>3?i(o,t,s):i(o,t))||s);return r>3&&s&&Object.defineProperty(o,t,s),s};let E=class extends(d(o)){constructor(){super(...arguments),this.open=!1,this.size=c.Medium,this.position=h.Center,this.animation=m.Fade,this.backdrop=u.Closable,this.closable=!0,this.modalDraggable=!1,this.resizable=!1,this.fullscreen=!1,this.modalTitle=p,this.showCloseButton=!0,this.headerIcon=p,this.zIndex=1e3,this.width=p,this.height=p,this.isDragging=!1,this.offsetX=0,this.offsetY=0,this.animationState="closed",this.previousActiveElement=null,this.requiredComponents=["nr-icon","nr-button"],this.dragController=new C(this),this.keyboardController=new S(this),this.closeModal=()=>{if(!this.closable)return;const a=new CustomEvent("modal-before-close",{bubbles:!0,cancelable:!0,detail:{modal:this,cancel:()=>a.preventDefault()}});this.dispatchEvent(a)&&(this.open=!1,this.dispatchEvent(new CustomEvent("modal-close",{bubbles:!0,composed:!0,detail:{modal:this}})))},this.handleBackdropClick=a=>{this.backdrop===u.Closable&&a.target===a.currentTarget&&M.handleBackdropClick(this)&&this.closeModal()}}connectedCallback(){super.connectedCallback(),this.validateDependencies()}disconnectedCallback(){super.disconnectedCallback(),this.previousActiveElement instanceof HTMLElement&&this.previousActiveElement.focus()}willUpdate(a){super.willUpdate(a),a.has("open")&&(this.open?this.handleOpen():this.handleClose())}handleOpen(){const a=M.openModal(this);this.zIndex=a,this.animationState="opening",this.dispatchEvent(new CustomEvent("modal-open",{bubbles:!0,detail:{modal:this,stackDepth:M.getStackDepth()}})),this.updateComplete.then(()=>{this.startOpenAnimation()})}startOpenAnimation(){var a,o;const t=null===(a=this.shadowRoot)||void 0===a?void 0:a.querySelector(".modal"),e=null===(o=this.shadowRoot)||void 0===o?void 0:o.querySelector(".modal-backdrop");if(!t||!e)return;const{modalKeyframes:i}=this.getAnimationKeyframes();t.animate(i,{duration:300,easing:"ease",fill:"forwards"}).addEventListener("finish",()=>{this.animationState="open",M.isTopModal(this)&&this.keyboardController.focusFirstElement(),this.dispatchEvent(new CustomEvent("modal-after-open",{bubbles:!0,detail:{modal:this,stackDepth:M.getStackDepth()}}))})}getAnimationKeyframes(){let a;switch(this.animation){case"fade":default:a=[{opacity:0,transform:"scale(0.9)"},{opacity:1,transform:"scale(1)"}];break;case"zoom":a=[{opacity:0,transform:"scale(0.7)"},{opacity:1,transform:"scale(1)"}];break;case"slide-up":a=[{opacity:0,transform:"translateY(20px)"},{opacity:1,transform:"translateY(0)"}];break;case"slide-down":a=[{opacity:0,transform:"translateY(-20px)"},{opacity:1,transform:"translateY(0)"}]}return{modalKeyframes:a,backdropKeyframes:[{opacity:0},{opacity:1}]}}handleClose(){this.animationState="closing",M.closeModal(this),this.dragController.resetPosition(),setTimeout(()=>{this.animationState="closed"},300)}openModal(){this.open=!0}getBackdropClasses(){return{"modal-backdrop":!0,"modal-backdrop--hidden":!this.open,[`modal-backdrop--position-${this.position}`]:!0}}getModalClasses(){return{modal:!0,[`modal--size-${this.size}`]:!this.fullscreen,"modal--fullscreen":this.fullscreen,[`modal--animation-${this.animation}`]:"opening"===this.animationState||"open"===this.animationState,"modal--dragging":this.isDragging,"modal--resizable":this.resizable}}getModalStyles(){const a={};return this.zIndex&&(a["--nuraly-z-modal-backdrop"]=this.zIndex.toString()),this.width&&(a.width=this.width),this.height&&(a.height=this.height),a}renderHeader(){const a=this.querySelector('[slot="header"]'),o=this.modalTitle||this.headerIcon;return a||o||this.showCloseButton?e`
       <div class="modal-header ${this.modalDraggable?"modal-header--draggable":""}">
         ${a?e`
           <div class="modal-header-content">
@@ -400,12 +400,12 @@ import{css as a,LitElement as o,nothing as t,html as e}from"lit";import{property
         `:t}
         
         ${this.showCloseButton?e`
-          <button 
+          <button
             class="modal-close-button"
-            @click=${this.closeModal}
+            @click=${a=>{a.stopPropagation(),this.open=!1,this.dispatchEvent(new CustomEvent("modal-close",{bubbles:!0,composed:!0,detail:{modal:this}}))}}
             aria-label="Close modal"
             type="button">
-            <nr-icon class="modal-close-icon" name="close"></nr-icon>
+            <nr-icon class="modal-close-icon" name="x"></nr-icon>
           </button>
         `:t}
       </div>
@@ -439,4 +439,4 @@ import{css as a,LitElement as o,nothing as t,html as e}from"lit";import{property
           `:t}
         </div>
       </div>
-    `:t}};E.styles=z,C([i({type:Boolean,reflect:!0})],E.prototype,"open",void 0),C([i({type:String})],E.prototype,"size",void 0),C([i({type:String})],E.prototype,"position",void 0),C([i({type:String})],E.prototype,"animation",void 0),C([i({type:String})],E.prototype,"backdrop",void 0),C([i({type:Boolean})],E.prototype,"closable",void 0),C([i({type:Boolean})],E.prototype,"modalDraggable",void 0),C([i({type:Boolean})],E.prototype,"resizable",void 0),C([i({type:Boolean})],E.prototype,"fullscreen",void 0),C([i({type:String})],E.prototype,"modalTitle",void 0),C([i({type:Boolean,attribute:"show-close-button"})],E.prototype,"showCloseButton",void 0),C([i({type:String})],E.prototype,"headerIcon",void 0),C([i({type:Number})],E.prototype,"zIndex",void 0),C([i({type:String})],E.prototype,"width",void 0),C([i({type:String})],E.prototype,"height",void 0),C([r()],E.prototype,"isDragging",void 0),C([i({type:Number})],E.prototype,"offsetX",void 0),C([i({type:Number})],E.prototype,"offsetY",void 0),C([r()],E.prototype,"animationState",void 0),E=C([s("nr-modal")],E);export{x as DEFAULT_MODAL_CONFIG,w as DEFAULT_MODAL_FOOTER,k as DEFAULT_MODAL_HEADER,v as DEFAULT_Z_INDEX,p as EMPTY_STRING,m as ModalAnimation,u as ModalBackdrop,$ as ModalDragController,S as ModalKeyboardController,M as ModalManager,h as ModalPosition,c as ModalSize,E as NrModalElement,b as isModalAnimation,g as isModalBackdrop,f as isModalPosition,y as isModalSize};
+    `:t}};E.styles=z,$([i({type:Boolean,reflect:!0})],E.prototype,"open",void 0),$([i({type:String})],E.prototype,"size",void 0),$([i({type:String})],E.prototype,"position",void 0),$([i({type:String})],E.prototype,"animation",void 0),$([i({type:String})],E.prototype,"backdrop",void 0),$([i({type:Boolean})],E.prototype,"closable",void 0),$([i({type:Boolean})],E.prototype,"modalDraggable",void 0),$([i({type:Boolean})],E.prototype,"resizable",void 0),$([i({type:Boolean})],E.prototype,"fullscreen",void 0),$([i({type:String})],E.prototype,"modalTitle",void 0),$([i({type:Boolean,attribute:"show-close-button"})],E.prototype,"showCloseButton",void 0),$([i({type:String})],E.prototype,"headerIcon",void 0),$([i({type:Number})],E.prototype,"zIndex",void 0),$([i({type:String})],E.prototype,"width",void 0),$([i({type:String})],E.prototype,"height",void 0),$([r()],E.prototype,"isDragging",void 0),$([i({type:Number})],E.prototype,"offsetX",void 0),$([i({type:Number})],E.prototype,"offsetY",void 0),$([r()],E.prototype,"animationState",void 0),E=$([s("nr-modal")],E);export{x as DEFAULT_MODAL_CONFIG,w as DEFAULT_MODAL_FOOTER,k as DEFAULT_MODAL_HEADER,v as DEFAULT_Z_INDEX,p as EMPTY_STRING,m as ModalAnimation,u as ModalBackdrop,C as ModalDragController,S as ModalKeyboardController,M as ModalManager,h as ModalPosition,c as ModalSize,E as NrModalElement,b as isModalAnimation,g as isModalBackdrop,f as isModalPosition,y as isModalSize};

package/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/modal/index.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAEH,cAAc,sBAAsB,CAAC;AACrC,cAAc,kBAAkB,CAAC;AACjC,cAAc,oBAAoB,CAAC;AACnC,cAAc,wBAAwB,CAAC","sourcesContent":["/**\n * @license\n * Copyright 2023 Nuraly, Laabidi Aymen\n * SPDX-License-Identifier: MIT\n */\n\nexport * from './modal.component.js';\nexport * from './modal.types.js';\nexport * from './modal-manager.js';\nexport * from './controllers/index.js';\n"]}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/components/modal/index.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAEH,cAAc,sBAAsB,CAAC;AACrC,cAAc,kBAAkB,CAAC;AACjC,cAAc,oBAAoB,CAAC;AACnC,cAAc,wBAAwB,CAAC","sourcesContent":["/**\n * @license\n * Copyright 2023 Nuraly, Laabidi Aymen\n * SPDX-License-Identifier: MIT\n */\n\nexport * from './modal.component.js';\nexport * from './modal.types.js';\nexport * from './modal-manager.js';\nexport * from './controllers/index.js';\n"]}

package/modal-manager.js

@@ -37,7 +37,6 @@ class ModalManagerClass {
         }
         // Update modal z-index
         this.updateModalZIndex(modal, zIndex);
-        console.log(`Modal opened. Stack depth: ${this.modalStack.length}, Z-Index: ${zIndex}`);
         return zIndex;
     }
     /**

package/modal-manager.js.map

@@ -1 +1 @@
-{"version":3,"file":"modal-manager.js","sourceRoot":"","sources":["../../../src/components/modal/modal-manager.ts"],"names":[],"mappings":"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","sourcesContent":["/**\n * @license\n * Copyright 2023 Nuraly, Laabidi Aymen\n * SPDX-License-Identifier: MIT\n */\n\n/**\n * Modal stack item interface\n */\nexport interface ModalStackItem {\n  modal: any; // The modal element\n  previousFocus: Element | null; // The element that had focus before this modal\n  zIndex: number; // The z-index for this modal\n  id: string; // Unique identifier\n}\n\n/**\n * Modal Manager - Singleton class to handle nested modals\n * Manages the modal stack, z-index allocation, and focus management\n */\nclass ModalManagerClass {\n  private modalStack: ModalStackItem[] = [];\n  private baseZIndex = 1000;\n  private zIndexIncrement = 10;\n  private bodyScrollDisabled = false;\n  private originalBodyOverflow = '';\n\n  /**\n   * Opens a modal and adds it to the stack\n   */\n  openModal(modal: any): number {\n    const id = this.generateModalId();\n    const zIndex = this.baseZIndex + (this.modalStack.length * this.zIndexIncrement);\n    \n    // Store the currently focused element\n    const previousFocus = document.activeElement;\n    \n    // Add to stack\n    const stackItem: ModalStackItem = {\n      modal,\n      previousFocus,\n      zIndex,\n      id\n    };\n    \n    this.modalStack.push(stackItem);\n    \n    // Disable body scroll for the first modal\n    if (this.modalStack.length === 1) {\n      this.disableBodyScroll();\n    }\n    \n    // Update modal z-index\n    this.updateModalZIndex(modal, zIndex);\n    \n    console.log(`Modal opened. Stack depth: ${this.modalStack.length}, Z-Index: ${zIndex}`);\n    \n    return zIndex;\n  }\n\n  /**\n   * Closes a modal and removes it from the stack\n   */\n  closeModal(modal: any): void {\n    const index = this.modalStack.findIndex(item => item.modal === modal);\n    \n    if (index === -1) {\n      console.warn('Attempting to close a modal that is not in the stack');\n      return;\n    }\n    \n    const stackItem = this.modalStack[index];\n    \n    // If this is not the top modal, close all modals above it first\n    if (index < this.modalStack.length - 1) {\n      const modalsToClose = this.modalStack.slice(index + 1);\n      modalsToClose.forEach(item => {\n        if (item.modal && typeof item.modal.closeModal === 'function') {\n          item.modal.closeModal();\n        }\n      });\n    }\n    \n    // Remove from stack\n    this.modalStack.splice(index);\n    \n    // Restore focus to the previous element\n    if (stackItem.previousFocus instanceof HTMLElement) {\n      // Use setTimeout to ensure the modal DOM changes are complete\n      setTimeout(() => {\n        if (stackItem.previousFocus instanceof HTMLElement) {\n          stackItem.previousFocus.focus();\n        }\n      }, 100);\n    }\n    \n    // If this was the last modal, restore body scroll\n    if (this.modalStack.length === 0) {\n      this.restoreBodyScroll();\n    }\n    \n    console.log(`Modal closed. Stack depth: ${this.modalStack.length}`);\n  }\n\n  /**\n   * Gets the current z-index for a modal\n   */\n  getModalZIndex(modal: any): number {\n    const stackItem = this.modalStack.find(item => item.modal === modal);\n    return stackItem ? stackItem.zIndex : this.baseZIndex;\n  }\n\n  /**\n   * Checks if a modal is the top modal in the stack\n   */\n  isTopModal(modal: any): boolean {\n    if (this.modalStack.length === 0) return false;\n    return this.modalStack[this.modalStack.length - 1].modal === modal;\n  }\n\n  /**\n   * Gets the number of open modals\n   */\n  getStackDepth(): number {\n    return this.modalStack.length;\n  }\n\n  /**\n   * Closes all modals\n   */\n  closeAllModals(): void {\n    // Close from top to bottom to maintain proper order\n    const modalsToClose = [...this.modalStack].reverse();\n    modalsToClose.forEach(item => {\n      if (item.modal && typeof item.modal.closeModal === 'function') {\n        item.modal.closeModal();\n      }\n    });\n  }\n\n  /**\n   * Gets all open modal IDs\n   */\n  getOpenModalIds(): string[] {\n    return this.modalStack.map(item => item.id);\n  }\n\n  /**\n   * Checks if any modals are open\n   */\n  hasOpenModals(): boolean {\n    return this.modalStack.length > 0;\n  }\n\n  private generateModalId(): string {\n    return `modal-${Date.now()}-${Math.random().toString(36).substr(2, 9)}`;\n  }\n\n  private updateModalZIndex(modal: any, zIndex: number): void {\n    if (modal && modal.style) {\n      modal.style.setProperty('--nuraly-z-modal-backdrop', zIndex.toString());\n    }\n  }\n\n  private disableBodyScroll(): void {\n    if (!this.bodyScrollDisabled) {\n      this.originalBodyOverflow = document.body.style.overflow;\n      document.body.style.overflow = 'hidden';\n      this.bodyScrollDisabled = true;\n    }\n  }\n\n  private restoreBodyScroll(): void {\n    if (this.bodyScrollDisabled) {\n      document.body.style.overflow = this.originalBodyOverflow;\n      this.bodyScrollDisabled = false;\n    }\n  }\n\n  /**\n   * Handle Escape key for nested modals - only close the top modal\n   */\n  handleEscapeKey(): boolean {\n    if (this.modalStack.length === 0) return false;\n    \n    const topModal = this.modalStack[this.modalStack.length - 1].modal;\n    if (topModal && typeof topModal.closeModal === 'function' && topModal.closable !== false) {\n      topModal.closeModal();\n      return true;\n    }\n    \n    return false;\n  }\n\n  /**\n   * Handle backdrop clicks - only close if it's the top modal\n   */\n  handleBackdropClick(modal: any): boolean {\n    return this.isTopModal(modal);\n  }\n}\n\n// Export singleton instance\nexport const ModalManager = new ModalManagerClass();\n\n// Make it available globally for debugging\nif (typeof window !== 'undefined') {\n  (window as any).ModalManager = ModalManager;\n}"]}
+{"version":3,"file":"modal-manager.js","sourceRoot":"","sources":["../../../../src/components/modal/modal-manager.ts"],"names":[],"mappings":"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","sourcesContent":["/**\n * @license\n * Copyright 2023 Nuraly, Laabidi Aymen\n * SPDX-License-Identifier: MIT\n */\n\n/**\n * Modal stack item interface\n */\nexport interface ModalStackItem {\n  modal: any; // The modal element\n  previousFocus: Element | null; // The element that had focus before this modal\n  zIndex: number; // The z-index for this modal\n  id: string; // Unique identifier\n}\n\n/**\n * Modal Manager - Singleton class to handle nested modals\n * Manages the modal stack, z-index allocation, and focus management\n */\nclass ModalManagerClass {\n  private modalStack: ModalStackItem[] = [];\n  private baseZIndex = 1000;\n  private zIndexIncrement = 10;\n  private bodyScrollDisabled = false;\n  private originalBodyOverflow = '';\n\n  /**\n   * Opens a modal and adds it to the stack\n   */\n  openModal(modal: any): number {\n    const id = this.generateModalId();\n    const zIndex = this.baseZIndex + (this.modalStack.length * this.zIndexIncrement);\n    \n    // Store the currently focused element\n    const previousFocus = document.activeElement;\n    \n    // Add to stack\n    const stackItem: ModalStackItem = {\n      modal,\n      previousFocus,\n      zIndex,\n      id\n    };\n    \n    this.modalStack.push(stackItem);\n    \n    // Disable body scroll for the first modal\n    if (this.modalStack.length === 1) {\n      this.disableBodyScroll();\n    }\n    \n    // Update modal z-index\n    this.updateModalZIndex(modal, zIndex);\n    \n    return zIndex;\n  }\n\n  /**\n   * Closes a modal and removes it from the stack\n   */\n  closeModal(modal: any): void {\n    const index = this.modalStack.findIndex(item => item.modal === modal);\n    \n    if (index === -1) {\n      console.warn('Attempting to close a modal that is not in the stack');\n      return;\n    }\n    \n    const stackItem = this.modalStack[index];\n    \n    // If this is not the top modal, close all modals above it first\n    if (index < this.modalStack.length - 1) {\n      const modalsToClose = this.modalStack.slice(index + 1);\n      modalsToClose.forEach(item => {\n        if (item.modal && typeof item.modal.closeModal === 'function') {\n          item.modal.closeModal();\n        }\n      });\n    }\n    \n    // Remove from stack\n    this.modalStack.splice(index);\n    \n    // Restore focus to the previous element\n    if (stackItem.previousFocus instanceof HTMLElement) {\n      // Use setTimeout to ensure the modal DOM changes are complete\n      setTimeout(() => {\n        if (stackItem.previousFocus instanceof HTMLElement) {\n          stackItem.previousFocus.focus();\n        }\n      }, 100);\n    }\n    \n    // If this was the last modal, restore body scroll\n    if (this.modalStack.length === 0) {\n      this.restoreBodyScroll();\n    }\n    \n    console.log(`Modal closed. Stack depth: ${this.modalStack.length}`);\n  }\n\n  /**\n   * Gets the current z-index for a modal\n   */\n  getModalZIndex(modal: any): number {\n    const stackItem = this.modalStack.find(item => item.modal === modal);\n    return stackItem ? stackItem.zIndex : this.baseZIndex;\n  }\n\n  /**\n   * Checks if a modal is the top modal in the stack\n   */\n  isTopModal(modal: any): boolean {\n    if (this.modalStack.length === 0) return false;\n    return this.modalStack[this.modalStack.length - 1].modal === modal;\n  }\n\n  /**\n   * Gets the number of open modals\n   */\n  getStackDepth(): number {\n    return this.modalStack.length;\n  }\n\n  /**\n   * Closes all modals\n   */\n  closeAllModals(): void {\n    // Close from top to bottom to maintain proper order\n    const modalsToClose = [...this.modalStack].reverse();\n    modalsToClose.forEach(item => {\n      if (item.modal && typeof item.modal.closeModal === 'function') {\n        item.modal.closeModal();\n      }\n    });\n  }\n\n  /**\n   * Gets all open modal IDs\n   */\n  getOpenModalIds(): string[] {\n    return this.modalStack.map(item => item.id);\n  }\n\n  /**\n   * Checks if any modals are open\n   */\n  hasOpenModals(): boolean {\n    return this.modalStack.length > 0;\n  }\n\n  private generateModalId(): string {\n    return `modal-${Date.now()}-${Math.random().toString(36).substr(2, 9)}`;\n  }\n\n  private updateModalZIndex(modal: any, zIndex: number): void {\n    if (modal && modal.style) {\n      modal.style.setProperty('--nuraly-z-modal-backdrop', zIndex.toString());\n    }\n  }\n\n  private disableBodyScroll(): void {\n    if (!this.bodyScrollDisabled) {\n      this.originalBodyOverflow = document.body.style.overflow;\n      document.body.style.overflow = 'hidden';\n      this.bodyScrollDisabled = true;\n    }\n  }\n\n  private restoreBodyScroll(): void {\n    if (this.bodyScrollDisabled) {\n      document.body.style.overflow = this.originalBodyOverflow;\n      this.bodyScrollDisabled = false;\n    }\n  }\n\n  /**\n   * Handle Escape key for nested modals - only close the top modal\n   */\n  handleEscapeKey(): boolean {\n    if (this.modalStack.length === 0) return false;\n    \n    const topModal = this.modalStack[this.modalStack.length - 1].modal;\n    if (topModal && typeof topModal.closeModal === 'function' && topModal.closable !== false) {\n      topModal.closeModal();\n      return true;\n    }\n    \n    return false;\n  }\n\n  /**\n   * Handle backdrop clicks - only close if it's the top modal\n   */\n  handleBackdropClick(modal: any): boolean {\n    return this.isTopModal(modal);\n  }\n}\n\n// Export singleton instance\nexport const ModalManager = new ModalManagerClass();\n\n// Make it available globally for debugging\nif (typeof window !== 'undefined') {\n  (window as any).ModalManager = ModalManager;\n}"]}

package/modal.component.d.ts

@@ -3,7 +3,7 @@
  * Copyright 2023 Nuraly, Laabidi Aymen
  * SPDX-License-Identifier: MIT
  */
-import { LitElement, nothing, PropertyValues } from 'lit';
+import { LitElement, nothing, type PropertyValues } from 'lit';
 import { ModalSize, ModalPosition, ModalAnimation, ModalBackdrop } from './modal.types.js';
 import { ModalDragHost, ModalKeyboardHost } from './controllers/index.js';
 declare const NrModalElement_base: (new (...args: any[]) => import("@nuralyui/common/mixins").DependencyAware) & (new (...args: any[]) => import("@nuralyui/common/mixins").ThemeAware) & (new (...args: any[]) => import("@nuralyui/common/mixins").EventHandlerCapable) & typeof LitElement;
@@ -106,7 +106,7 @@ export declare class NrModalElement extends NrModalElement_base implements Modal
     /**
      * Closes the modal
      */
-    closeModal(): void;
+    closeModal: () => void;
     private handleBackdropClick;
     private getBackdropClasses;
     private getModalClasses;
@@ -115,7 +115,7 @@ export declare class NrModalElement extends NrModalElement_base implements Modal
     private renderFooter;
     updated(): void;
     private updateDataTheme;
-    render(): typeof nothing | import("lit").TemplateResult<1>;
+    render(): typeof nothing | import("lit-html").TemplateResult<1>;
 }
 export {};
 //# sourceMappingURL=modal.component.d.ts.map

package/modal.component.js

@@ -106,6 +106,33 @@ let NrModalElement = class NrModalElement extends NuralyUIBaseMixin(LitElement)
         // Controllers
         this.dragController = new ModalDragController(this);
         this.keyboardController = new ModalKeyboardController(this);
+        /**
+         * Closes the modal
+         */
+        this.closeModal = () => {
+            if (!this.closable)
+                return;
+            // Dispatch before close event (cancelable)
+            const beforeCloseEvent = new CustomEvent('modal-before-close', {
+                bubbles: true,
+                cancelable: true,
+                detail: {
+                    modal: this,
+                    cancel: () => beforeCloseEvent.preventDefault()
+                }
+            });
+            const dispatched = this.dispatchEvent(beforeCloseEvent);
+            // Only close if event wasn't cancelled
+            if (dispatched) {
+                this.open = false;
+                // Dispatch close event
+                this.dispatchEvent(new CustomEvent('modal-close', {
+                    bubbles: true,
+                    composed: true,
+                    detail: { modal: this }
+                }));
+            }
+        };
         this.handleBackdropClick = (event) => {
             // Only allow backdrop close if this is the top modal and backdrop is closable
             if (this.backdrop === ModalBackdrop.Closable &&
@@ -170,6 +197,13 @@ let NrModalElement = class NrModalElement extends NuralyUIBaseMixin(LitElement)
         // When animation completes
         modalAnimation.addEventListener('finish', () => {
             this.animationState = 'open';
+            // Clear the animation's fill-forward effect to prevent transform from creating
+            // a containing block for fixed-positioned descendants (e.g., dropdowns)
+            // commitStyles() persists final state, then cancel() removes animation effect
+            modalAnimation.commitStyles();
+            modalAnimation.cancel();
+            // Now clear the transform that was committed
+            modalElement.style.transform = '';
             // Only focus if this is the top modal
             if (ModalManager.isTopModal(this)) {
                 this.keyboardController.focusFirstElement();
@@ -237,32 +271,6 @@ let NrModalElement = class NrModalElement extends NuralyUIBaseMixin(LitElement)
     openModal() {
         this.open = true;
     }
-    /**
-     * Closes the modal
-     */
-    closeModal() {
-        if (!this.closable)
-            return;
-        // Dispatch before close event (cancelable)
-        const beforeCloseEvent = new CustomEvent('modal-before-close', {
-            bubbles: true,
-            cancelable: true,
-            detail: {
-                modal: this,
-                cancel: () => beforeCloseEvent.preventDefault()
-            }
-        });
-        const dispatched = this.dispatchEvent(beforeCloseEvent);
-        // Only close if event wasn't cancelled
-        if (dispatched) {
-            this.open = false;
-            // Dispatch close event
-            this.dispatchEvent(new CustomEvent('modal-close', {
-                bubbles: true,
-                detail: { modal: this }
-            }));
-        }
-    }
     getBackdropClasses() {
         return {
             'modal-backdrop': true,
@@ -317,12 +325,20 @@ let NrModalElement = class NrModalElement extends NuralyUIBaseMixin(LitElement)
         ` : nothing}
         
         ${this.showCloseButton ? html `
-          <button 
+          <button
             class="modal-close-button"
-            @click=${this.closeModal}
+            @click=${(e) => {
+            e.stopPropagation();
+            this.open = false;
+            this.dispatchEvent(new CustomEvent('modal-close', {
+                bubbles: true,
+                composed: true,
+                detail: { modal: this }
+            }));
+        }}
             aria-label="Close modal"
             type="button">
-            <nr-icon class="modal-close-icon" name="close"></nr-icon>
+            <nr-icon class="modal-close-icon" name="x"></nr-icon>
           </button>
         ` : nothing}
       </div>

package/modal.component.js.map

@@ -1 +1 @@
-{"version":3,"file":"modal.component.js","sourceRoot":"","sources":["../../../src/components/modal/modal.component.ts"],"names":[],"mappings":"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","sourcesContent":["/**\n * @license\n * Copyright 2023 Nuraly, Laabidi Aymen\n * SPDX-License-Identifier: MIT\n */\n\nimport { html, LitElement, nothing, PropertyValues } from 'lit';\nimport { customElement, property, state } from 'lit/decorators.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { styleMap } from 'lit/directives/style-map.js';\nimport {\n  ModalSize,\n  ModalPosition,\n  ModalAnimation,\n  ModalBackdrop,\n  EMPTY_STRING\n} from './modal.types.js';\nimport { styles } from './modal.style.js';\nimport { NuralyUIBaseMixin } from '@nuralyui/common/mixins';\nimport { ModalManager } from './modal-manager.js';\n\n\n// Import controllers\nimport {\n  ModalDragController,\n  ModalDragHost,\n  ModalKeyboardController,\n  ModalKeyboardHost\n} from './controllers/index.js';\n\n/**\n * Versatile modal component with multiple sizes, animations, and enhanced functionality.\n * \n * @example\n * ```html\n * <!-- Simple usage -->\n * <nr-modal open title=\"My Modal\">\n *   <p>Modal content goes here</p>\n * </nr-modal>\n * \n * <!-- With custom configuration -->\n * <nr-modal \n *   open\n *   size=\"large\"\n *   position=\"top\"\n *   animation=\"zoom\"\n *   backdrop=\"static\"\n *   draggable>\n *   <div slot=\"header\">\n *     <nr-icon name=\"info\"></nr-icon>\n *     <span>Custom Header</span>\n *   </div>\n *   <p>Modal content</p>\n *   <div slot=\"footer\">\n *     <nr-button type=\"secondary\">Cancel</nr-button>\n *     <nr-button type=\"primary\">OK</nr-button>\n *   </div>\n * </nr-modal>\n * ```\n * \n * @fires modal-open - Modal opened\n * @fires modal-close - Modal closed\n * @fires modal-before-close - Before modal closes (cancelable)\n * @fires modal-after-open - After modal opens\n * @fires modal-escape - Escape key pressed\n * \n * @slot default - Modal body content\n * @slot header - Custom header content\n * @slot footer - Custom footer content\n */\n@customElement('nr-modal')\nexport class NrModalElement extends NuralyUIBaseMixin(LitElement) \n  implements ModalDragHost, ModalKeyboardHost {\n  static override styles = styles;\n\n  /** Whether the modal is open */\n  @property({ type: Boolean, reflect: true })\n  open = false;\n\n  /** Modal size (small, medium, large, xl) */\n  @property({ type: String })\n  size: ModalSize = ModalSize.Medium;\n\n  /** Modal position (center, top, bottom) */\n  @property({ type: String })\n  position: ModalPosition = ModalPosition.Center;\n\n  /** Animation type */\n  @property({ type: String })\n  animation: ModalAnimation = ModalAnimation.Fade;\n\n  /** Backdrop behavior */\n  @property({ type: String })\n  backdrop: ModalBackdrop = ModalBackdrop.Closable;\n\n  /** Whether the modal can be closed */\n  @property({ type: Boolean })\n  closable = true;\n\n  /** Whether the modal can be dragged */\n  @property({ type: Boolean })\n  modalDraggable = false;\n\n  /** Whether the modal is resizable */\n  @property({ type: Boolean })\n  resizable = false;\n\n  /** Whether the modal is fullscreen */\n  @property({ type: Boolean })\n  fullscreen = false;\n\n  /** Modal title */\n  @property({ type: String })\n  modalTitle = EMPTY_STRING;\n\n  /** Show close button in header */\n  @property({ type: Boolean, attribute: 'show-close-button' })\n  showCloseButton = true;\n\n  /** Header icon */\n  @property({ type: String })\n  headerIcon = EMPTY_STRING;\n\n  /** Z-index for the modal */\n  @property({ type: Number })\n  zIndex = 1000;\n\n  /** Custom width */\n  @property({ type: String })\n  width = EMPTY_STRING;\n\n  /** Custom height */\n  @property({ type: String })\n  height = EMPTY_STRING;\n\n  /** Dragging state */\n  @state()\n  isDragging = false;\n\n  /** Current X offset for dragging */\n  @property({ type: Number })\n  offsetX = 0;\n\n  /** Current Y offset for dragging */\n  @property({ type: Number })\n  offsetY = 0;\n\n  /** Animation state */\n  @state()\n  private animationState: 'closed' | 'opening' | 'open' | 'closing' = 'closed';\n\n  /** Previous focus element */\n  private previousActiveElement: Element | null = null;\n\n  override requiredComponents = ['nr-icon', 'nr-button'];\n\n  // Controllers\n  private dragController = new ModalDragController(this);\n  private keyboardController = new ModalKeyboardController(this);\n\n  override connectedCallback() {\n    super.connectedCallback();\n    this.validateDependencies();\n  }\n\n  override disconnectedCallback() {\n    super.disconnectedCallback();\n    // Restore focus when modal is destroyed\n    if (this.previousActiveElement instanceof HTMLElement) {\n      this.previousActiveElement.focus();\n    }\n  }\n\n  override willUpdate(changedProperties: PropertyValues) {\n    super.willUpdate(changedProperties);\n\n    if (changedProperties.has('open')) {\n      if (this.open) {\n        this.handleOpen();\n      } else {\n        this.handleClose();\n      }\n    }\n  }\n\n  private handleOpen() {\n    // Register with modal manager and get z-index\n    const assignedZIndex = ModalManager.openModal(this);\n    this.zIndex = assignedZIndex;\n    \n    // Set animation state to opening\n    this.animationState = 'opening';\n    \n    // Dispatch before open event\n    this.dispatchEvent(new CustomEvent('modal-open', {\n      bubbles: true,\n      detail: { modal: this, stackDepth: ModalManager.getStackDepth() }\n    }));\n\n    // Wait for DOM update, then start JavaScript animation\n    this.updateComplete.then(() => {\n      this.startOpenAnimation();\n    });\n  }\n\n  private startOpenAnimation() {\n    const modalElement = this.shadowRoot?.querySelector('.modal') as HTMLElement;\n    const backdropElement = this.shadowRoot?.querySelector('.modal-backdrop') as HTMLElement;\n    \n    if (!modalElement || !backdropElement) return;\n\n    // Get animation keyframes based on animation type\n    const { modalKeyframes} = this.getAnimationKeyframes();\n    \n    // Start animations\n    const modalAnimation = modalElement.animate(modalKeyframes, {\n      duration: 300,\n      easing: 'ease',\n      fill: 'forwards'\n    });\n\n\n    // When animation completes\n    modalAnimation.addEventListener('finish', () => {\n      this.animationState = 'open';\n      \n      // Only focus if this is the top modal\n      if (ModalManager.isTopModal(this)) {\n        this.keyboardController.focusFirstElement();\n      }\n      \n      // Dispatch after open event\n      this.dispatchEvent(new CustomEvent('modal-after-open', {\n        bubbles: true,\n        detail: { modal: this, stackDepth: ModalManager.getStackDepth() }\n      }));\n    });\n  }\n\n  private getAnimationKeyframes() {\n    const backdropKeyframes = [\n      { opacity: 0 },\n      { opacity: 1 }\n    ];\n\n    let modalKeyframes;\n    switch (this.animation) {\n      case 'fade':\n        modalKeyframes = [\n          { opacity: 0, transform: 'scale(0.9)' },\n          { opacity: 1, transform: 'scale(1)' }\n        ];\n        break;\n      case 'zoom':\n        modalKeyframes = [\n          { opacity: 0, transform: 'scale(0.7)' },\n          { opacity: 1, transform: 'scale(1)' }\n        ];\n        break;\n      case 'slide-up':\n        modalKeyframes = [\n          { opacity: 0, transform: 'translateY(20px)' },\n          { opacity: 1, transform: 'translateY(0)' }\n        ];\n        break;\n      case 'slide-down':\n        modalKeyframes = [\n          { opacity: 0, transform: 'translateY(-20px)' },\n          { opacity: 1, transform: 'translateY(0)' }\n        ];\n        break;\n      default:\n        modalKeyframes = [\n          { opacity: 0, transform: 'scale(0.9)' },\n          { opacity: 1, transform: 'scale(1)' }\n        ];\n    }\n\n    return { modalKeyframes, backdropKeyframes };\n  }\n\n  private handleClose() {\n    this.animationState = 'closing';\n    \n    // Unregister from modal manager\n    ModalManager.closeModal(this);\n    \n    // Reset drag position\n    this.dragController.resetPosition();\n    \n    // Wait for animation to complete\n    setTimeout(() => {\n      this.animationState = 'closed';\n    }, 300);\n  }\n\n  /**\n   * Opens the modal\n   */\n  openModal() {\n    this.open = true;\n  }\n\n  /**\n   * Closes the modal\n   */\n  closeModal() {\n    if (!this.closable) return;\n\n    // Dispatch before close event (cancelable)\n    const beforeCloseEvent = new CustomEvent('modal-before-close', {\n      bubbles: true,\n      cancelable: true,\n      detail: { \n        modal: this,\n        cancel: () => beforeCloseEvent.preventDefault()\n      }\n    });\n\n    const dispatched = this.dispatchEvent(beforeCloseEvent);\n    \n    // Only close if event wasn't cancelled\n    if (dispatched) {\n      this.open = false;\n      \n      // Dispatch close event\n      this.dispatchEvent(new CustomEvent('modal-close', {\n        bubbles: true,\n        detail: { modal: this }\n      }));\n    }\n  }\n\n  private handleBackdropClick = (event: MouseEvent) => {\n    // Only allow backdrop close if this is the top modal and backdrop is closable\n    if (this.backdrop === ModalBackdrop.Closable && \n        event.target === event.currentTarget && \n        ModalManager.handleBackdropClick(this)) {\n      this.closeModal();\n    }\n  };\n\n  private getBackdropClasses() {\n    return {\n      'modal-backdrop': true,\n      'modal-backdrop--hidden': !this.open,\n      [`modal-backdrop--position-${this.position}`]: true\n    };\n  }\n\n  private getModalClasses() {\n    return {\n      'modal': true,\n      [`modal--size-${this.size}`]: !this.fullscreen,\n      'modal--fullscreen': this.fullscreen,\n      [`modal--animation-${this.animation}`]: this.animationState === 'opening' || this.animationState === 'open',\n      'modal--dragging': this.isDragging,\n      'modal--resizable': this.resizable\n    };\n  }\n\n  private getModalStyles() {\n    const styles: any = {};\n    \n    if (this.zIndex) {\n      styles['--nuraly-z-modal-backdrop'] = this.zIndex.toString();\n    }\n    \n    if (this.width) {\n      styles.width = this.width;\n    }\n    \n    if (this.height) {\n      styles.height = this.height;\n    }\n    \n    return styles;\n  }\n\n  private renderHeader() {\n    const hasCustomHeader = this.querySelector('[slot=\"header\"]');\n    const hasTitle = this.modalTitle || this.headerIcon;\n    \n    if (!hasCustomHeader && !hasTitle && !this.showCloseButton) {\n      return nothing;\n    }\n\n    return html`\n      <div class=\"modal-header ${this.modalDraggable ? 'modal-header--draggable' : ''}\">\n        ${hasCustomHeader ? html`\n          <div class=\"modal-header-content\">\n            <slot name=\"header\"></slot>\n          </div>\n        ` : hasTitle ? html`\n          <div class=\"modal-header-content\">\n            ${this.headerIcon ? html`\n              <nr-icon class=\"modal-header-icon\" name=\"${this.headerIcon}\"></nr-icon>\n            ` : nothing}\n            ${this.modalTitle ? html`\n              <h2 class=\"modal-title\">${this.modalTitle}</h2>\n            ` : nothing}\n          </div>\n        ` : nothing}\n        \n        ${this.showCloseButton ? html`\n          <button \n            class=\"modal-close-button\"\n            @click=${this.closeModal}\n            aria-label=\"Close modal\"\n            type=\"button\">\n            <nr-icon class=\"modal-close-icon\" name=\"close\"></nr-icon>\n          </button>\n        ` : nothing}\n      </div>\n    `;\n  }\n\n  private renderFooter() {\n    const hasCustomFooter = this.querySelector('[slot=\"footer\"]');\n    \n    if (!hasCustomFooter) {\n      return nothing;\n    }\n\n    return html`\n      <div class=\"modal-footer\">\n        <slot name=\"footer\"></slot>\n      </div>\n    `;\n  }\n\n   override updated() {\n        this.updateDataTheme();\n    }\n\n   private updateDataTheme() {\n        if (!this.closest('[data-theme]')) {\n            this.setAttribute('data-theme', this.currentTheme);\n        }\n    }\n\n  override render() {\n    if (!this.open && this.animationState === 'closed') {\n      return nothing;\n    }\n\n    return html`\n      <div \n        class=${classMap(this.getBackdropClasses())}\n        @click=${this.handleBackdropClick}\n        style=${styleMap(this.getModalStyles())}>\n        \n        <div \n          class=${classMap(this.getModalClasses())}\n          role=\"dialog\"\n          aria-modal=\"true\"\n          aria-labelledby=${this.modalTitle ? 'modal-title' : nothing}\n          tabindex=\"-1\">\n          \n          ${this.renderHeader()}\n          \n          <div class=\"modal-body\">\n            <slot></slot>\n          </div>\n          \n          ${this.renderFooter()}\n          \n          ${this.resizable ? html`\n            <div class=\"resize-handle\"></div>\n          ` : nothing}\n        </div>\n      </div>\n    `;\n  }\n}\n"]}
+{"version":3,"file":"modal.component.js","sourceRoot":"","sources":["../../../../src/components/modal/modal.component.ts"],"names":[],"mappings":"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","sourcesContent":["/**\n * @license\n * Copyright 2023 Nuraly, Laabidi Aymen\n * SPDX-License-Identifier: MIT\n */\n\nimport { html, LitElement, nothing, type PropertyValues } from 'lit';\nimport { customElement, property, state } from 'lit/decorators.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { styleMap } from 'lit/directives/style-map.js';\nimport {\n  ModalSize,\n  ModalPosition,\n  ModalAnimation,\n  ModalBackdrop,\n  EMPTY_STRING\n} from './modal.types.js';\nimport { styles } from './modal.style.js';\nimport { NuralyUIBaseMixin } from '@nuralyui/common/mixins';\nimport { ModalManager } from './modal-manager.js';\n\n\n// Import controllers\nimport {\n  ModalDragController,\n  ModalDragHost,\n  ModalKeyboardController,\n  ModalKeyboardHost\n} from './controllers/index.js';\n\n/**\n * Versatile modal component with multiple sizes, animations, and enhanced functionality.\n * \n * @example\n * ```html\n * <!-- Simple usage -->\n * <nr-modal open title=\"My Modal\">\n *   <p>Modal content goes here</p>\n * </nr-modal>\n * \n * <!-- With custom configuration -->\n * <nr-modal \n *   open\n *   size=\"large\"\n *   position=\"top\"\n *   animation=\"zoom\"\n *   backdrop=\"static\"\n *   draggable>\n *   <div slot=\"header\">\n *     <nr-icon name=\"info\"></nr-icon>\n *     <span>Custom Header</span>\n *   </div>\n *   <p>Modal content</p>\n *   <div slot=\"footer\">\n *     <nr-button type=\"secondary\">Cancel</nr-button>\n *     <nr-button type=\"primary\">OK</nr-button>\n *   </div>\n * </nr-modal>\n * ```\n * \n * @fires modal-open - Modal opened\n * @fires modal-close - Modal closed\n * @fires modal-before-close - Before modal closes (cancelable)\n * @fires modal-after-open - After modal opens\n * @fires modal-escape - Escape key pressed\n * \n * @slot default - Modal body content\n * @slot header - Custom header content\n * @slot footer - Custom footer content\n */\n@customElement('nr-modal')\nexport class NrModalElement extends NuralyUIBaseMixin(LitElement) \n  implements ModalDragHost, ModalKeyboardHost {\n  static override styles = styles;\n\n  /** Whether the modal is open */\n  @property({ type: Boolean, reflect: true })\n  open = false;\n\n  /** Modal size (small, medium, large, xl) */\n  @property({ type: String })\n  size: ModalSize = ModalSize.Medium;\n\n  /** Modal position (center, top, bottom) */\n  @property({ type: String })\n  position: ModalPosition = ModalPosition.Center;\n\n  /** Animation type */\n  @property({ type: String })\n  animation: ModalAnimation = ModalAnimation.Fade;\n\n  /** Backdrop behavior */\n  @property({ type: String })\n  backdrop: ModalBackdrop = ModalBackdrop.Closable;\n\n  /** Whether the modal can be closed */\n  @property({ type: Boolean })\n  closable = true;\n\n  /** Whether the modal can be dragged */\n  @property({ type: Boolean })\n  modalDraggable = false;\n\n  /** Whether the modal is resizable */\n  @property({ type: Boolean })\n  resizable = false;\n\n  /** Whether the modal is fullscreen */\n  @property({ type: Boolean })\n  fullscreen = false;\n\n  /** Modal title */\n  @property({ type: String })\n  modalTitle = EMPTY_STRING;\n\n  /** Show close button in header */\n  @property({ type: Boolean, attribute: 'show-close-button' })\n  showCloseButton = true;\n\n  /** Header icon */\n  @property({ type: String })\n  headerIcon = EMPTY_STRING;\n\n  /** Z-index for the modal */\n  @property({ type: Number })\n  zIndex = 1000;\n\n  /** Custom width */\n  @property({ type: String })\n  width = EMPTY_STRING;\n\n  /** Custom height */\n  @property({ type: String })\n  height = EMPTY_STRING;\n\n  /** Dragging state */\n  @state()\n  isDragging = false;\n\n  /** Current X offset for dragging */\n  @property({ type: Number })\n  offsetX = 0;\n\n  /** Current Y offset for dragging */\n  @property({ type: Number })\n  offsetY = 0;\n\n  /** Animation state */\n  @state()\n  private animationState: 'closed' | 'opening' | 'open' | 'closing' = 'closed';\n\n  /** Previous focus element */\n  private previousActiveElement: Element | null = null;\n\n  override requiredComponents = ['nr-icon', 'nr-button'];\n\n  // Controllers\n  private dragController = new ModalDragController(this);\n  private keyboardController = new ModalKeyboardController(this);\n\n  override connectedCallback() {\n    super.connectedCallback();\n    this.validateDependencies();\n  }\n\n  override disconnectedCallback() {\n    super.disconnectedCallback();\n    // Restore focus when modal is destroyed\n    if (this.previousActiveElement instanceof HTMLElement) {\n      this.previousActiveElement.focus();\n    }\n  }\n\n  override willUpdate(changedProperties: PropertyValues) {\n    super.willUpdate(changedProperties);\n\n    if (changedProperties.has('open')) {\n      if (this.open) {\n        this.handleOpen();\n      } else {\n        this.handleClose();\n      }\n    }\n  }\n\n  private handleOpen() {\n    // Register with modal manager and get z-index\n    const assignedZIndex = ModalManager.openModal(this);\n    this.zIndex = assignedZIndex;\n    \n    // Set animation state to opening\n    this.animationState = 'opening';\n    \n    // Dispatch before open event\n    this.dispatchEvent(new CustomEvent('modal-open', {\n      bubbles: true,\n      detail: { modal: this, stackDepth: ModalManager.getStackDepth() }\n    }));\n\n    // Wait for DOM update, then start JavaScript animation\n    this.updateComplete.then(() => {\n      this.startOpenAnimation();\n    });\n  }\n\n  private startOpenAnimation() {\n    const modalElement = this.shadowRoot?.querySelector('.modal') as HTMLElement;\n    const backdropElement = this.shadowRoot?.querySelector('.modal-backdrop') as HTMLElement;\n    \n    if (!modalElement || !backdropElement) return;\n\n    // Get animation keyframes based on animation type\n    const { modalKeyframes} = this.getAnimationKeyframes();\n    \n    // Start animations\n    const modalAnimation = modalElement.animate(modalKeyframes, {\n      duration: 300,\n      easing: 'ease',\n      fill: 'forwards'\n    });\n\n\n    // When animation completes\n    modalAnimation.addEventListener('finish', () => {\n      this.animationState = 'open';\n\n      // Clear the animation's fill-forward effect to prevent transform from creating\n      // a containing block for fixed-positioned descendants (e.g., dropdowns)\n      // commitStyles() persists final state, then cancel() removes animation effect\n      modalAnimation.commitStyles();\n      modalAnimation.cancel();\n      // Now clear the transform that was committed\n      modalElement.style.transform = '';\n\n      // Only focus if this is the top modal\n      if (ModalManager.isTopModal(this)) {\n        this.keyboardController.focusFirstElement();\n      }\n      \n      // Dispatch after open event\n      this.dispatchEvent(new CustomEvent('modal-after-open', {\n        bubbles: true,\n        detail: { modal: this, stackDepth: ModalManager.getStackDepth() }\n      }));\n    });\n  }\n\n  private getAnimationKeyframes() {\n    const backdropKeyframes = [\n      { opacity: 0 },\n      { opacity: 1 }\n    ];\n\n    let modalKeyframes;\n    switch (this.animation) {\n      case 'fade':\n        modalKeyframes = [\n          { opacity: 0, transform: 'scale(0.9)' },\n          { opacity: 1, transform: 'scale(1)' }\n        ];\n        break;\n      case 'zoom':\n        modalKeyframes = [\n          { opacity: 0, transform: 'scale(0.7)' },\n          { opacity: 1, transform: 'scale(1)' }\n        ];\n        break;\n      case 'slide-up':\n        modalKeyframes = [\n          { opacity: 0, transform: 'translateY(20px)' },\n          { opacity: 1, transform: 'translateY(0)' }\n        ];\n        break;\n      case 'slide-down':\n        modalKeyframes = [\n          { opacity: 0, transform: 'translateY(-20px)' },\n          { opacity: 1, transform: 'translateY(0)' }\n        ];\n        break;\n      default:\n        modalKeyframes = [\n          { opacity: 0, transform: 'scale(0.9)' },\n          { opacity: 1, transform: 'scale(1)' }\n        ];\n    }\n\n    return { modalKeyframes, backdropKeyframes };\n  }\n\n  private handleClose() {\n    this.animationState = 'closing';\n    \n    // Unregister from modal manager\n    ModalManager.closeModal(this);\n    \n    // Reset drag position\n    this.dragController.resetPosition();\n    \n    // Wait for animation to complete\n    setTimeout(() => {\n      this.animationState = 'closed';\n    }, 300);\n  }\n\n  /**\n   * Opens the modal\n   */\n  openModal() {\n    this.open = true;\n  }\n\n  /**\n   * Closes the modal\n   */\n  closeModal = () => {\n    if (!this.closable) return;\n\n    // Dispatch before close event (cancelable)\n    const beforeCloseEvent = new CustomEvent('modal-before-close', {\n      bubbles: true,\n      cancelable: true,\n      detail: { \n        modal: this,\n        cancel: () => beforeCloseEvent.preventDefault()\n      }\n    });\n\n    const dispatched = this.dispatchEvent(beforeCloseEvent);\n\n    // Only close if event wasn't cancelled\n    if (dispatched) {\n      this.open = false;\n\n      // Dispatch close event\n      this.dispatchEvent(new CustomEvent('modal-close', {\n        bubbles: true,\n        composed: true,\n        detail: { modal: this }\n      }));\n    }\n  }\n\n  private handleBackdropClick = (event: MouseEvent) => {\n    // Only allow backdrop close if this is the top modal and backdrop is closable\n    if (this.backdrop === ModalBackdrop.Closable && \n        event.target === event.currentTarget && \n        ModalManager.handleBackdropClick(this)) {\n      this.closeModal();\n    }\n  };\n\n  private getBackdropClasses() {\n    return {\n      'modal-backdrop': true,\n      'modal-backdrop--hidden': !this.open,\n      [`modal-backdrop--position-${this.position}`]: true\n    };\n  }\n\n  private getModalClasses() {\n    return {\n      'modal': true,\n      [`modal--size-${this.size}`]: !this.fullscreen,\n      'modal--fullscreen': this.fullscreen,\n      [`modal--animation-${this.animation}`]: this.animationState === 'opening' || this.animationState === 'open',\n      'modal--dragging': this.isDragging,\n      'modal--resizable': this.resizable\n    };\n  }\n\n  private getModalStyles() {\n    const styles: any = {};\n    \n    if (this.zIndex) {\n      styles['--nuraly-z-modal-backdrop'] = this.zIndex.toString();\n    }\n    \n    if (this.width) {\n      styles.width = this.width;\n    }\n    \n    if (this.height) {\n      styles.height = this.height;\n    }\n    \n    return styles;\n  }\n\n  private renderHeader() {\n    const hasCustomHeader = this.querySelector('[slot=\"header\"]');\n    const hasTitle = this.modalTitle || this.headerIcon;\n    \n    if (!hasCustomHeader && !hasTitle && !this.showCloseButton) {\n      return nothing;\n    }\n\n    return html`\n      <div class=\"modal-header ${this.modalDraggable ? 'modal-header--draggable' : ''}\">\n        ${hasCustomHeader ? html`\n          <div class=\"modal-header-content\">\n            <slot name=\"header\"></slot>\n          </div>\n        ` : hasTitle ? html`\n          <div class=\"modal-header-content\">\n            ${this.headerIcon ? html`\n              <nr-icon class=\"modal-header-icon\" name=\"${this.headerIcon}\"></nr-icon>\n            ` : nothing}\n            ${this.modalTitle ? html`\n              <h2 class=\"modal-title\">${this.modalTitle}</h2>\n            ` : nothing}\n          </div>\n        ` : nothing}\n        \n        ${this.showCloseButton ? html`\n          <button\n            class=\"modal-close-button\"\n            @click=${(e: Event) => {\n              e.stopPropagation();\n              this.open = false;\n              this.dispatchEvent(new CustomEvent('modal-close', {\n                bubbles: true,\n                composed: true,\n                detail: { modal: this }\n              }));\n            }}\n            aria-label=\"Close modal\"\n            type=\"button\">\n            <nr-icon class=\"modal-close-icon\" name=\"x\"></nr-icon>\n          </button>\n        ` : nothing}\n      </div>\n    `;\n  }\n\n  private renderFooter() {\n    const hasCustomFooter = this.querySelector('[slot=\"footer\"]');\n    \n    if (!hasCustomFooter) {\n      return nothing;\n    }\n\n    return html`\n      <div class=\"modal-footer\">\n        <slot name=\"footer\"></slot>\n      </div>\n    `;\n  }\n\n   override updated() {\n        this.updateDataTheme();\n    }\n\n   private updateDataTheme() {\n        if (!this.closest('[data-theme]')) {\n            this.setAttribute('data-theme', this.currentTheme);\n        }\n    }\n\n  override render() {\n    if (!this.open && this.animationState === 'closed') {\n      return nothing;\n    }\n\n    return html`\n      <div \n        class=${classMap(this.getBackdropClasses())}\n        @click=${this.handleBackdropClick}\n        style=${styleMap(this.getModalStyles())}>\n        \n        <div \n          class=${classMap(this.getModalClasses())}\n          role=\"dialog\"\n          aria-modal=\"true\"\n          aria-labelledby=${this.modalTitle ? 'modal-title' : nothing}\n          tabindex=\"-1\">\n          \n          ${this.renderHeader()}\n          \n          <div class=\"modal-body\">\n            <slot></slot>\n          </div>\n          \n          ${this.renderFooter()}\n          \n          ${this.resizable ? html`\n            <div class=\"resize-handle\"></div>\n          ` : nothing}\n        </div>\n      </div>\n    `;\n  }\n}\n"]}

package/modal.style.js.map

@@ -1 +1 @@
-{"version":3,"file":"modal.style.js","sourceRoot":"","sources":["../../../src/components/modal/modal.style.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B;;;;;;GAMG;AACH,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAuWxB,CAAC","sourcesContent":["import { css } from 'lit';\n\n/**\n * Modal component styles for the Hybrid UI Library\n * Using shared CSS variables from /src/shared/themes/\n * \n * This file contains all the styling for the nr-modal component with\n * clean CSS variable usage and proper theme switching support.\n */\nexport const styles = css`\n  :host {\n    display: contents;\n    font-family: var(--nuraly-font-family);\n    \n    /* Force CSS custom property inheritance to ensure theme switching works properly */\n    color: var(--nuraly-color-text);\n    background-color: var(--nuraly-color-background);\n    \n    /* Ensure theme variables are properly inherited */\n    --modal-border-radius: var(--nuraly-border-radius-modal, 8px);\n    \n    /* Ensure clean state transitions when theme changes */\n    * {\n      transition: all var(--nuraly-transition-fast, 0.15s) ease;\n    }\n  }\n\n  /* Force re-evaluation of theme-dependent properties on theme change */\n  :host([data-theme]) {\n    color: inherit;\n    background-color: inherit;\n  }\n\n  /* Modal backdrop */\n  .modal-backdrop {\n    position: fixed;\n    top: 0;\n    left: 0;\n    right: 0;\n    bottom: 0;\n    background-color: var(--nuraly-color-modal-backdrop, rgba(0, 0, 0, 0.45));\n    z-index: var(--nuraly-z-modal-backdrop, 1000);\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    padding: var(--nuraly-spacing-modal-padding, var(--nuraly-spacing-05, 1rem));\n    backdrop-filter: var(--nuraly-modal-backdrop-filter, none);\n    \n    &.modal-backdrop--hidden {\n      display: none;\n    }\n    \n    &.modal-backdrop--position-top {\n      align-items: flex-start;\n      padding-top: var(--nuraly-spacing-modal-top, var(--nuraly-spacing-07, 2rem));\n    }\n    \n    &.modal-backdrop--position-bottom {\n      align-items: flex-end;\n      padding-bottom: var(--nuraly-spacing-modal-bottom, var(--nuraly-spacing-07, 2rem));\n    }\n  }\n\n  /* Nested modals support */\n  .modal-backdrop {\n    /* Ensure each modal backdrop has its own stacking context */\n    z-index: var(--nuraly-z-modal-backdrop, 1000);\n  }\n\n  /* Nested modal backdrop styling */\n  .modal-backdrop + .modal-backdrop {\n    /* Subsequent modals get slightly darker backdrop */\n    background-color: var(--nuraly-color-modal-backdrop-nested, rgba(0, 0, 0, 0.6));\n  }\n\n  /* Nested modal animation delay to avoid conflicts */\n  .modal-backdrop:not(:first-of-type) {\n    animation-delay: 0.1s;\n  }\n\n  /* Modal container */\n  .modal {\n    position: relative;\n    background-color: var(--nuraly-color-modal-background, var(--nuraly-color-background, #ffffff));\n    border-radius: var(--modal-border-radius);\n    box-shadow: var(--nuraly-shadow-modal, \n      0 6px 16px 0 rgba(0, 0, 0, 0.08), \n      0 3px 6px -4px rgba(0, 0, 0, 0.12),\n      0 9px 28px 8px rgba(0, 0, 0, 0.05)\n    );\n    border: var(--nuraly-border-modal, 1px solid var(--nuraly-color-border, #e0e0e0));\n    max-height: calc(100vh - var(--nuraly-spacing-modal-margin, var(--nuraly-spacing-07, 2rem)) * 2);\n    max-width: calc(100vw - var(--nuraly-spacing-modal-margin, var(--nuraly-spacing-07, 2rem)) * 2);\n    display: flex;\n    flex-direction: column;\n    outline: none;\n    \n    &:focus {\n      outline: var(--nuraly-focus-outline, 2px solid var(--nuraly-color-primary, #0f62fe));\n      outline-offset: var(--nuraly-focus-outline-offset, 1px);\n    }\n  }\n\n\n  /* Modal sizes */\n  .modal--size-small {\n    width: var(--nuraly-modal-width-small, 400px);\n    min-height: var(--nuraly-modal-min-height-small, 200px);\n  }\n\n  .modal--size-medium {\n    width: var(--nuraly-modal-width-medium, 600px);\n    min-height: var(--nuraly-modal-min-height-medium, 300px);\n  }\n\n  .modal--size-large {\n    width: var(--nuraly-modal-width-large, 800px);\n    min-height: var(--nuraly-modal-min-height-large, 400px);\n  }\n\n  .modal--size-xl {\n    width: var(--nuraly-modal-width-xl, 1000px);\n    min-height: var(--nuraly-modal-min-height-xl, 500px);\n  }\n\n  .modal--fullscreen {\n    width: 100vw;\n    height: 100vh;\n    max-width: 100vw;\n    max-height: 100vh;\n    border-radius: 0;\n  }\n\n  /* Modal header */\n  .modal-header {\n    padding: var(--nuraly-spacing-modal-header, var(--nuraly-spacing-05, 1rem) var(--nuraly-spacing-06, 1.5rem));\n    border-bottom: var(--nuraly-border-modal-header, 1px solid var(--nuraly-color-border, #e0e0e0));\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n    min-height: var(--nuraly-modal-header-height);\n    flex-shrink: 0;\n    \n    &.modal-header--draggable {\n      cursor: move;\n      user-select: none;\n    }\n  }\n\n  .modal-header-content {\n    display: flex;\n    align-items: center;\n    gap: var(--nuraly-spacing-03, 0.5rem);\n    flex: 1;\n    min-width: 0;\n  }\n\n  .modal-header-icon {\n    flex-shrink: 0;\n    width: var(--nuraly-modal-header-icon-size, 20px);\n    height: var(--nuraly-modal-header-icon-size, 20px);\n    color: var(--nuraly-color-modal-header-icon, var(--nuraly-color-text-secondary, #525252));\n  }\n\n  .modal-title {\n    font-size: var(--nuraly-font-size-modal-title, var(--nuraly-font-size-04, 1.125rem));\n    font-weight: var(--nuraly-font-weight-modal-title, var(--nuraly-font-weight-medium, 500));\n    color: var(--nuraly-color-modal-title, var(--nuraly-color-text, #161616));\n    margin: 0;\n    line-height: var(--nuraly-line-height-02, 1.375);\n    overflow: hidden;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n  }\n\n  .modal-close-button {\n    flex-shrink: 0;\n    width: var(--nuraly-modal-close-size, 32px);\n    height: var(--nuraly-modal-close-size, 32px);\n    border: none;\n    background: transparent;\n    border-radius: var(--nuraly-border-radius-sm, 4px);\n    cursor: pointer;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    color: var(--nuraly-color-modal-close-icon, var(--nuraly-color-text-secondary, #525252));\n    transition: all var(--nuraly-transition-fast, 0.15s) ease;\n    \n    &:hover {\n      background-color: var(--nuraly-color-modal-close-hover, var(--nuraly-color-background-hover, #f4f4f4));\n      color: var(--nuraly-color-modal-close-icon-hover, var(--nuraly-color-text, #161616));\n    }\n    \n    &:focus {\n      outline: var(--nuraly-focus-outline, 2px solid var(--nuraly-color-primary, #0f62fe));\n      outline-offset: var(--nuraly-focus-outline-offset, 1px);\n    }\n    \n    &:active {\n      background-color: var(--nuraly-color-modal-close-active, var(--nuraly-color-background-active, #c6c6c6));\n    }\n  }\n\n  .modal-close-icon {\n    width: var(--nuraly-modal-close-icon-size, 16px);\n    height: var(--nuraly-modal-close-icon-size, 16px);\n  }\n\n  /* Carbon theme specific - sharp corners for close button */\n  :host([data-theme=\"carbon\"]) .modal-close-button,\n  :host([data-theme=\"carbon-light\"]) .modal-close-button,\n  :host([data-theme=\"carbon-dark\"]) .modal-close-button {\n    border-radius: 0;\n  }\n\n  /* Modal body */\n  .modal-body {\n    flex: 1;\n    padding: var(--nuraly-spacing-modal-body, var(--nuraly-spacing-05, 1rem) var(--nuraly-spacing-06, 1.5rem));\n    overflow-y: auto;\n    color: var(--nuraly-color-modal-body-text, var(--nuraly-color-text, #161616));\n    line-height: var(--nuraly-line-height-03, 1.5);\n  }\n\n  /* Modal footer */\n  .modal-footer {\n    padding: var(--nuraly-spacing-modal-footer, var(--nuraly-spacing-03, 0.5rem) var(--nuraly-spacing-05, 1rem));\n    border-top: var(--nuraly-border-modal-footer, 1px solid var(--nuraly-color-border, #e0e0e0));\n    display: flex;\n    align-items: center;\n    justify-content: flex-end;\n    gap: var(--nuraly-spacing-03, 0.5rem);\n    min-height: var(--nuraly-modal-footer-height, 48px);\n    flex-shrink: 0;\n  }\n\n  /* Animation keyframes */\n  @keyframes modalFadeIn {\n    from {\n      opacity: 0;\n      transform: scale(0.9);\n    }\n    to {\n      opacity: 1;\n      transform: scale(1);\n    }\n  }\n\n  @keyframes modalZoomIn {\n    from {\n      opacity: 0;\n      transform: scale(0.7);\n    }\n    to {\n      opacity: 1;\n      transform: scale(1);\n    }\n  }\n\n  @keyframes modalSlideUp {\n    from {\n      opacity: 0;\n      transform: translateY(20px);\n    }\n    to {\n      opacity: 1;\n      transform: translateY(0);\n    }\n  }\n\n  @keyframes modalSlideDown {\n    from {\n      opacity: 0;\n      transform: translateY(-20px);\n    }\n    to {\n      opacity: 1;\n      transform: translateY(0);\n    }\n  }\n\n  @keyframes backdropFadeIn {\n    from {\n      opacity: 0;\n    }\n    to {\n      opacity: 1;\n    }\n  }\n\n  /* Animation classes */\n  .modal-backdrop--animation-fade {\n    animation: backdropFadeIn var(--nuraly-transition-modal, 0.3s) ease;\n  }\n\n  .modal--animation-fade {\n    animation: modalFadeIn var(--nuraly-transition-modal, 0.3s) ease;\n  }\n\n  .modal--animation-zoom {\n    animation: modalZoomIn var(--nuraly-transition-modal, 0.3s) ease;\n  }\n\n  .modal--animation-slide-up {\n    animation: modalSlideUp var(--nuraly-transition-modal, 0.3s) ease;\n  }\n\n  .modal--animation-slide-down {\n    animation: modalSlideDown var(--nuraly-transition-modal, 0.3s) ease;\n  }\n\n  /* Dragging state */\n  .modal--dragging {\n    user-select: none;\n    cursor: move;\n  }\n\n  /* Resizing handles (when resizable) */\n  .modal--resizable {\n    resize: both;\n    overflow: auto;\n  }\n\n  .resize-handle {\n    position: absolute;\n    bottom: 0;\n    right: 0;\n    width: 20px;\n    height: 20px;\n    cursor: se-resize;\n    background: linear-gradient(\n      -45deg,\n      transparent 40%,\n      var(--nuraly-color-border, #e0e0e0) 40%,\n      var(--nuraly-color-border, #e0e0e0) 60%,\n      transparent 60%\n    );\n  }\n\n  /* Responsive behavior */\n  @media (max-width: 768px) {\n    .modal-backdrop {\n      padding: var(--nuraly-spacing-02, 0.25rem);\n    }\n    \n    .modal--size-small,\n    .modal--size-medium,\n    .modal--size-large,\n    .modal--size-xl {\n      width: 100%;\n      max-width: none;\n    }\n    \n    .modal-header,\n    .modal-body,\n    .modal-footer {\n      padding-left: var(--nuraly-spacing-04, 0.75rem);\n      padding-right: var(--nuraly-spacing-04, 0.75rem);\n    }\n  }\n\n  /* Dark theme support through CSS custom properties */\n  @media (prefers-color-scheme: dark) {\n    :host(:not([data-theme])) {\n      --nuraly-color-modal-backdrop: rgba(0, 0, 0, 0.6);\n    }\n  }\n`;"]}
+{"version":3,"file":"modal.style.js","sourceRoot":"","sources":["../../../../src/components/modal/modal.style.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B;;;;;;GAMG;AACH,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAuWxB,CAAC","sourcesContent":["import { css } from 'lit';\n\n/**\n * Modal component styles for the Hybrid UI Library\n * Using shared CSS variables from /src/shared/themes/\n * \n * This file contains all the styling for the nr-modal component with\n * clean CSS variable usage and proper theme switching support.\n */\nexport const styles = css`\n  :host {\n    display: contents;\n    font-family: var(--nuraly-font-family);\n    \n    /* Force CSS custom property inheritance to ensure theme switching works properly */\n    color: var(--nuraly-color-text);\n    background-color: var(--nuraly-color-background);\n    \n    /* Ensure theme variables are properly inherited */\n    --modal-border-radius: var(--nuraly-border-radius-modal, 8px);\n    \n    /* Ensure clean state transitions when theme changes */\n    * {\n      transition: all var(--nuraly-transition-fast, 0.15s) ease;\n    }\n  }\n\n  /* Force re-evaluation of theme-dependent properties on theme change */\n  :host([data-theme]) {\n    color: inherit;\n    background-color: inherit;\n  }\n\n  /* Modal backdrop */\n  .modal-backdrop {\n    position: fixed;\n    top: 0;\n    left: 0;\n    right: 0;\n    bottom: 0;\n    background-color: var(--nuraly-color-modal-backdrop, rgba(0, 0, 0, 0.45));\n    z-index: var(--nuraly-z-modal-backdrop, 1000);\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    padding: var(--nuraly-spacing-modal-padding, var(--nuraly-spacing-05, 1rem));\n    backdrop-filter: var(--nuraly-modal-backdrop-filter, none);\n    \n    &.modal-backdrop--hidden {\n      display: none;\n    }\n    \n    &.modal-backdrop--position-top {\n      align-items: flex-start;\n      padding-top: var(--nuraly-spacing-modal-top, var(--nuraly-spacing-07, 2rem));\n    }\n    \n    &.modal-backdrop--position-bottom {\n      align-items: flex-end;\n      padding-bottom: var(--nuraly-spacing-modal-bottom, var(--nuraly-spacing-07, 2rem));\n    }\n  }\n\n  /* Nested modals support */\n  .modal-backdrop {\n    /* Ensure each modal backdrop has its own stacking context */\n    z-index: var(--nuraly-z-modal-backdrop, 1000);\n  }\n\n  /* Nested modal backdrop styling */\n  .modal-backdrop + .modal-backdrop {\n    /* Subsequent modals get slightly darker backdrop */\n    background-color: var(--nuraly-color-modal-backdrop-nested, rgba(0, 0, 0, 0.6));\n  }\n\n  /* Nested modal animation delay to avoid conflicts */\n  .modal-backdrop:not(:first-of-type) {\n    animation-delay: 0.1s;\n  }\n\n  /* Modal container */\n  .modal {\n    position: relative;\n    background-color: var(--nuraly-color-modal-background, var(--nuraly-color-background, #ffffff));\n    border-radius: var(--modal-border-radius);\n    box-shadow: var(--nuraly-shadow-modal, \n      0 6px 16px 0 rgba(0, 0, 0, 0.08), \n      0 3px 6px -4px rgba(0, 0, 0, 0.12),\n      0 9px 28px 8px rgba(0, 0, 0, 0.05)\n    );\n    border: var(--nuraly-border-modal, 1px solid var(--nuraly-color-border, #e0e0e0));\n    max-height: calc(100vh - var(--nuraly-spacing-modal-margin, var(--nuraly-spacing-07, 2rem)) * 2);\n    max-width: calc(100vw - var(--nuraly-spacing-modal-margin, var(--nuraly-spacing-07, 2rem)) * 2);\n    display: flex;\n    flex-direction: column;\n    outline: none;\n    \n    &:focus {\n      outline: var(--nuraly-focus-outline, 2px solid var(--nuraly-color-primary, #0f62fe));\n      outline-offset: var(--nuraly-focus-outline-offset, 1px);\n    }\n  }\n\n\n  /* Modal sizes */\n  .modal--size-small {\n    width: var(--nuraly-modal-width-small, 400px);\n    min-height: var(--nuraly-modal-min-height-small, 200px);\n  }\n\n  .modal--size-medium {\n    width: var(--nuraly-modal-width-medium, 600px);\n    min-height: var(--nuraly-modal-min-height-medium, 300px);\n  }\n\n  .modal--size-large {\n    width: var(--nuraly-modal-width-large, 800px);\n    min-height: var(--nuraly-modal-min-height-large, 400px);\n  }\n\n  .modal--size-xl {\n    width: var(--nuraly-modal-width-xl, 1000px);\n    min-height: var(--nuraly-modal-min-height-xl, 500px);\n  }\n\n  .modal--fullscreen {\n    width: 100vw;\n    height: 100vh;\n    max-width: 100vw;\n    max-height: 100vh;\n    border-radius: 0;\n  }\n\n  /* Modal header */\n  .modal-header {\n    padding: var(--nuraly-spacing-modal-header, var(--nuraly-spacing-05, 1rem) var(--nuraly-spacing-06, 1.5rem));\n    border-bottom: var(--nuraly-border-modal-header, 1px solid var(--nuraly-color-border, #e0e0e0));\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n    min-height: var(--nuraly-modal-header-height);\n    flex-shrink: 0;\n    \n    &.modal-header--draggable {\n      cursor: move;\n      user-select: none;\n    }\n  }\n\n  .modal-header-content {\n    display: flex;\n    align-items: center;\n    gap: var(--nuraly-spacing-03, 0.5rem);\n    flex: 1;\n    min-width: 0;\n  }\n\n  .modal-header-icon {\n    flex-shrink: 0;\n    width: var(--nuraly-modal-header-icon-size, 20px);\n    height: var(--nuraly-modal-header-icon-size, 20px);\n    color: var(--nuraly-color-modal-header-icon, var(--nuraly-color-text-secondary, #525252));\n  }\n\n  .modal-title {\n    font-size: var(--nuraly-font-size-modal-title, var(--nuraly-font-size-04, 1.125rem));\n    font-weight: var(--nuraly-font-weight-modal-title, var(--nuraly-font-weight-medium, 500));\n    color: var(--nuraly-color-modal-title, var(--nuraly-color-text, #161616));\n    margin: 0;\n    line-height: var(--nuraly-line-height-02, 1.375);\n    overflow: hidden;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n  }\n\n  .modal-close-button {\n    flex-shrink: 0;\n    width: var(--nuraly-modal-close-size, 32px);\n    height: var(--nuraly-modal-close-size, 32px);\n    border: none;\n    background: transparent;\n    border-radius: var(--nuraly-border-radius-sm, 4px);\n    cursor: pointer;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    color: var(--nuraly-color-modal-close-icon, var(--nuraly-color-text-secondary, #525252));\n    transition: all var(--nuraly-transition-fast, 0.15s) ease;\n    \n    &:hover {\n      background-color: var(--nuraly-color-modal-close-hover, var(--nuraly-color-background-hover, #f4f4f4));\n      color: var(--nuraly-color-modal-close-icon-hover, var(--nuraly-color-text, #161616));\n    }\n    \n    &:focus {\n      outline: var(--nuraly-focus-outline, 2px solid var(--nuraly-color-primary, #0f62fe));\n      outline-offset: var(--nuraly-focus-outline-offset, 1px);\n    }\n    \n    &:active {\n      background-color: var(--nuraly-color-modal-close-active, var(--nuraly-color-background-active, #c6c6c6));\n    }\n  }\n\n  .modal-close-icon {\n    width: var(--nuraly-modal-close-icon-size, 16px);\n    height: var(--nuraly-modal-close-icon-size, 16px);\n  }\n\n  /* Carbon theme specific - sharp corners for close button */\n  :host([data-theme=\"carbon\"]) .modal-close-button,\n  :host([data-theme=\"carbon-light\"]) .modal-close-button,\n  :host([data-theme=\"carbon-dark\"]) .modal-close-button {\n    border-radius: 0;\n  }\n\n  /* Modal body */\n  .modal-body {\n    flex: 1;\n    padding: var(--nuraly-spacing-modal-body, var(--nuraly-spacing-05, 1rem) var(--nuraly-spacing-06, 1.5rem));\n    overflow-y: auto;\n    color: var(--nuraly-color-modal-body-text, var(--nuraly-color-text, #161616));\n    line-height: var(--nuraly-line-height-03, 1.5);\n  }\n\n  /* Modal footer */\n  .modal-footer {\n    padding: var(--nuraly-spacing-modal-footer, var(--nuraly-spacing-03, 0.5rem) var(--nuraly-spacing-05, 1rem));\n    border-top: var(--nuraly-border-modal-footer, 1px solid var(--nuraly-color-border, #e0e0e0));\n    display: flex;\n    align-items: center;\n    justify-content: flex-end;\n    gap: var(--nuraly-spacing-03, 0.5rem);\n    min-height: var(--nuraly-modal-footer-height, 48px);\n    flex-shrink: 0;\n  }\n\n  /* Animation keyframes */\n  @keyframes modalFadeIn {\n    from {\n      opacity: 0;\n      transform: scale(0.9);\n    }\n    to {\n      opacity: 1;\n      transform: scale(1);\n    }\n  }\n\n  @keyframes modalZoomIn {\n    from {\n      opacity: 0;\n      transform: scale(0.7);\n    }\n    to {\n      opacity: 1;\n      transform: scale(1);\n    }\n  }\n\n  @keyframes modalSlideUp {\n    from {\n      opacity: 0;\n      transform: translateY(20px);\n    }\n    to {\n      opacity: 1;\n      transform: translateY(0);\n    }\n  }\n\n  @keyframes modalSlideDown {\n    from {\n      opacity: 0;\n      transform: translateY(-20px);\n    }\n    to {\n      opacity: 1;\n      transform: translateY(0);\n    }\n  }\n\n  @keyframes backdropFadeIn {\n    from {\n      opacity: 0;\n    }\n    to {\n      opacity: 1;\n    }\n  }\n\n  /* Animation classes */\n  .modal-backdrop--animation-fade {\n    animation: backdropFadeIn var(--nuraly-transition-modal, 0.3s) ease;\n  }\n\n  .modal--animation-fade {\n    animation: modalFadeIn var(--nuraly-transition-modal, 0.3s) ease;\n  }\n\n  .modal--animation-zoom {\n    animation: modalZoomIn var(--nuraly-transition-modal, 0.3s) ease;\n  }\n\n  .modal--animation-slide-up {\n    animation: modalSlideUp var(--nuraly-transition-modal, 0.3s) ease;\n  }\n\n  .modal--animation-slide-down {\n    animation: modalSlideDown var(--nuraly-transition-modal, 0.3s) ease;\n  }\n\n  /* Dragging state */\n  .modal--dragging {\n    user-select: none;\n    cursor: move;\n  }\n\n  /* Resizing handles (when resizable) */\n  .modal--resizable {\n    resize: both;\n    overflow: auto;\n  }\n\n  .resize-handle {\n    position: absolute;\n    bottom: 0;\n    right: 0;\n    width: 20px;\n    height: 20px;\n    cursor: se-resize;\n    background: linear-gradient(\n      -45deg,\n      transparent 40%,\n      var(--nuraly-color-border, #e0e0e0) 40%,\n      var(--nuraly-color-border, #e0e0e0) 60%,\n      transparent 60%\n    );\n  }\n\n  /* Responsive behavior */\n  @media (max-width: 768px) {\n    .modal-backdrop {\n      padding: var(--nuraly-spacing-02, 0.25rem);\n    }\n    \n    .modal--size-small,\n    .modal--size-medium,\n    .modal--size-large,\n    .modal--size-xl {\n      width: 100%;\n      max-width: none;\n    }\n    \n    .modal-header,\n    .modal-body,\n    .modal-footer {\n      padding-left: var(--nuraly-spacing-04, 0.75rem);\n      padding-right: var(--nuraly-spacing-04, 0.75rem);\n    }\n  }\n\n  /* Dark theme support through CSS custom properties */\n  @media (prefers-color-scheme: dark) {\n    :host(:not([data-theme])) {\n      --nuraly-color-modal-backdrop: rgba(0, 0, 0, 0.6);\n    }\n  }\n`;"]}

package/modal.types.js.map

@@ -1 +1 @@
-{"version":3,"file":"modal.types.js","sourceRoot":"","sources":["../../../src/components/modal/modal.types.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAEH;;GAEG;AACH,MAAM,CAAN,IAAY,SAKX;AALD,WAAY,SAAS;IACnB,4BAAe,CAAA;IACf,8BAAiB,CAAA;IACjB,4BAAe,CAAA;IACf,8BAAiB,CAAA;AACnB,CAAC,EALW,SAAS,KAAT,SAAS,QAKpB;AAED;;GAEG;AACH,MAAM,CAAN,IAAY,aAIX;AAJD,WAAY,aAAa;IACvB,kCAAiB,CAAA;IACjB,4BAAW,CAAA;IACX,kCAAiB,CAAA;AACnB,CAAC,EAJW,aAAa,KAAb,aAAa,QAIxB;AAED;;GAEG;AACH,MAAM,CAAN,IAAY,cAMX;AAND,WAAY,cAAc;IACxB,+BAAa,CAAA;IACb,+BAAa,CAAA;IACb,sCAAoB,CAAA;IACpB,0CAAwB,CAAA;IACxB,+BAAa,CAAA;AACf,CAAC,EANW,cAAc,KAAd,cAAc,QAMzB;AAED;;GAEG;AACH,MAAM,CAAN,IAAY,aAIX;AAJD,WAAY,aAAa;IACvB,kCAAiB,CAAA;IACjB,sCAAqB,CAAA;IACrB,8BAAa,CAAA,CAAC,cAAc;AAC9B,CAAC,EAJW,aAAa,KAAb,aAAa,QAIxB;AAkDD;;GAEG;AACH,MAAM,CAAC,MAAM,YAAY,GAAG,EAAE,CAAC;AAC/B,MAAM,CAAC,MAAM,eAAe,GAAG,IAAI,CAAC;AAEpC;;GAEG;AACH,MAAM,CAAC,MAAM,WAAW,GAAG,CAAC,KAAa,EAAsB,EAAE;IAC/D,OAAO,MAAM,CAAC,MAAM,CAAC,SAAS,CAAC,CAAC,QAAQ,CAAC,KAAkB,CAAC,CAAC;AAC/D,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,eAAe,GAAG,CAAC,KAAa,EAA0B,EAAE;IACvE,OAAO,MAAM,CAAC,MAAM,CAAC,aAAa,CAAC,CAAC,QAAQ,CAAC,KAAsB,CAAC,CAAC;AACvE,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,gBAAgB,GAAG,CAAC,KAAa,EAA2B,EAAE;IACzE,OAAO,MAAM,CAAC,MAAM,CAAC,cAAc,CAAC,CAAC,QAAQ,CAAC,KAAuB,CAAC,CAAC;AACzE,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,eAAe,GAAG,CAAC,KAAa,EAA0B,EAAE;IACvE,OAAO,MAAM,CAAC,MAAM,CAAC,aAAa,CAAC,CAAC,QAAQ,CAAC,KAAsB,CAAC,CAAC;AACvE,CAAC,CAAC;AAEF;;GAEG;AACH,MAAM,CAAC,MAAM,oBAAoB,GAA0B;IACzD,IAAI,EAAE,SAAS,CAAC,MAAM;IACtB,QAAQ,EAAE,aAAa,CAAC,MAAM;IAC9B,SAAS,EAAE,cAAc,CAAC,IAAI;IAC9B,QAAQ,EAAE,aAAa,CAAC,QAAQ;IAChC,QAAQ,EAAE,IAAI;IACd,SAAS,EAAE,KAAK;IAChB,SAAS,EAAE,KAAK;IAChB,UAAU,EAAE,KAAK;IACjB,cAAc,EAAE,KAAK;IACrB,MAAM,EAAE,eAAe;CACxB,CAAC;AAEF,MAAM,CAAC,MAAM,oBAAoB,GAA0B;IACzD,KAAK,EAAE,YAAY;IACnB,eAAe,EAAE,IAAI;IACrB,IAAI,EAAE,YAAY;IAClB,SAAS,EAAE,KAAK;CACjB,CAAC;AAEF,MAAM,CAAC,MAAM,oBAAoB,GAA0B;IACzD,gBAAgB,EAAE,KAAK;IACvB,YAAY,EAAE,KAAK;IACnB,UAAU,EAAE,QAAQ;IACpB,MAAM,EAAE,IAAI;IACZ,MAAM,EAAE,SAAS;CAClB,CAAC","sourcesContent":["/**\n * @license\n * Copyright 2023 Nuraly, Laabidi Aymen\n * SPDX-License-Identifier: MIT\n */\n\n/**\n * Modal size options\n */\nexport enum ModalSize {\n  Small = 'small',\n  Medium = 'medium', \n  Large = 'large',\n  ExtraLarge = 'xl'\n}\n\n/**\n * Modal position options\n */\nexport enum ModalPosition {\n  Center = 'center',\n  Top = 'top',\n  Bottom = 'bottom'\n}\n\n/**\n * Modal animation types\n */\nexport enum ModalAnimation {\n  Fade = 'fade',\n  Zoom = 'zoom',\n  SlideUp = 'slide-up',\n  SlideDown = 'slide-down',\n  None = 'none'\n}\n\n/**\n * Modal backdrop behavior\n */\nexport enum ModalBackdrop {\n  Static = 'static', // clicking backdrop doesn't close modal\n  Closable = 'closable', // clicking backdrop closes modal\n  None = 'none' // no backdrop\n}\n\n/**\n * Modal events\n */\nexport interface ModalEvents {\n  'modal-open': CustomEvent<void>;\n  'modal-close': CustomEvent<void>;\n  'modal-before-close': CustomEvent<{ cancel: () => void }>;\n  'modal-after-open': CustomEvent<void>;\n  'modal-escape': CustomEvent<void>;\n}\n\n/**\n * Modal configuration interface\n */\nexport interface ModalConfig {\n  size?: ModalSize;\n  position?: ModalPosition;\n  animation?: ModalAnimation;\n  backdrop?: ModalBackdrop;\n  closable?: boolean;\n  draggable?: boolean;\n  resizable?: boolean;\n  fullscreen?: boolean;\n  destroyOnClose?: boolean;\n  zIndex?: number;\n}\n\n/**\n * Modal header configuration\n */\nexport interface ModalHeader {\n  title?: string;\n  showCloseButton?: boolean;\n  icon?: string;\n  draggable?: boolean;\n}\n\n/**\n * Modal footer configuration\n */\nexport interface ModalFooter {\n  showCancelButton?: boolean;\n  showOkButton?: boolean;\n  cancelText?: string;\n  okText?: string;\n  okType?: 'primary' | 'secondary' | 'danger';\n}\n\n/**\n * Constants\n */\nexport const EMPTY_STRING = '';\nexport const DEFAULT_Z_INDEX = 1000;\n\n/**\n * Type guards\n */\nexport const isModalSize = (value: string): value is ModalSize => {\n  return Object.values(ModalSize).includes(value as ModalSize);\n};\n\nexport const isModalPosition = (value: string): value is ModalPosition => {\n  return Object.values(ModalPosition).includes(value as ModalPosition);\n};\n\nexport const isModalAnimation = (value: string): value is ModalAnimation => {\n  return Object.values(ModalAnimation).includes(value as ModalAnimation);\n};\n\nexport const isModalBackdrop = (value: string): value is ModalBackdrop => {\n  return Object.values(ModalBackdrop).includes(value as ModalBackdrop);\n};\n\n/**\n * Default configurations\n */\nexport const DEFAULT_MODAL_CONFIG: Required<ModalConfig> = {\n  size: ModalSize.Medium,\n  position: ModalPosition.Center,\n  animation: ModalAnimation.Fade,\n  backdrop: ModalBackdrop.Closable,\n  closable: true,\n  draggable: false,\n  resizable: false,\n  fullscreen: false,\n  destroyOnClose: false,\n  zIndex: DEFAULT_Z_INDEX\n};\n\nexport const DEFAULT_MODAL_HEADER: Required<ModalHeader> = {\n  title: EMPTY_STRING,\n  showCloseButton: true,\n  icon: EMPTY_STRING,\n  draggable: false\n};\n\nexport const DEFAULT_MODAL_FOOTER: Required<ModalFooter> = {\n  showCancelButton: false,\n  showOkButton: false,\n  cancelText: 'Cancel',\n  okText: 'OK',\n  okType: 'primary'\n};"]}
+{"version":3,"file":"modal.types.js","sourceRoot":"","sources":["../../../../src/components/modal/modal.types.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAEH;;GAEG;AACH,MAAM,CAAN,IAAY,SAKX;AALD,WAAY,SAAS;IACnB,4BAAe,CAAA;IACf,8BAAiB,CAAA;IACjB,4BAAe,CAAA;IACf,8BAAiB,CAAA;AACnB,CAAC,EALW,SAAS,KAAT,SAAS,QAKpB;AAED;;GAEG;AACH,MAAM,CAAN,IAAY,aAIX;AAJD,WAAY,aAAa;IACvB,kCAAiB,CAAA;IACjB,4BAAW,CAAA;IACX,kCAAiB,CAAA;AACnB,CAAC,EAJW,aAAa,KAAb,aAAa,QAIxB;AAED;;GAEG;AACH,MAAM,CAAN,IAAY,cAMX;AAND,WAAY,cAAc;IACxB,+BAAa,CAAA;IACb,+BAAa,CAAA;IACb,sCAAoB,CAAA;IACpB,0CAAwB,CAAA;IACxB,+BAAa,CAAA;AACf,CAAC,EANW,cAAc,KAAd,cAAc,QAMzB;AAED;;GAEG;AACH,MAAM,CAAN,IAAY,aAIX;AAJD,WAAY,aAAa;IACvB,kCAAiB,CAAA;IACjB,sCAAqB,CAAA;IACrB,8BAAa,CAAA,CAAC,cAAc;AAC9B,CAAC,EAJW,aAAa,KAAb,aAAa,QAIxB;AAkDD;;GAEG;AACH,MAAM,CAAC,MAAM,YAAY,GAAG,EAAE,CAAC;AAC/B,MAAM,CAAC,MAAM,eAAe,GAAG,IAAI,CAAC;AAEpC;;GAEG;AACH,MAAM,CAAC,MAAM,WAAW,GAAG,CAAC,KAAa,EAAsB,EAAE;IAC/D,OAAO,MAAM,CAAC,MAAM,CAAC,SAAS,CAAC,CAAC,QAAQ,CAAC,KAAkB,CAAC,CAAC;AAC/D,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,eAAe,GAAG,CAAC,KAAa,EAA0B,EAAE;IACvE,OAAO,MAAM,CAAC,MAAM,CAAC,aAAa,CAAC,CAAC,QAAQ,CAAC,KAAsB,CAAC,CAAC;AACvE,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,gBAAgB,GAAG,CAAC,KAAa,EAA2B,EAAE;IACzE,OAAO,MAAM,CAAC,MAAM,CAAC,cAAc,CAAC,CAAC,QAAQ,CAAC,KAAuB,CAAC,CAAC;AACzE,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,eAAe,GAAG,CAAC,KAAa,EAA0B,EAAE;IACvE,OAAO,MAAM,CAAC,MAAM,CAAC,aAAa,CAAC,CAAC,QAAQ,CAAC,KAAsB,CAAC,CAAC;AACvE,CAAC,CAAC;AAEF;;GAEG;AACH,MAAM,CAAC,MAAM,oBAAoB,GAA0B;IACzD,IAAI,EAAE,SAAS,CAAC,MAAM;IACtB,QAAQ,EAAE,aAAa,CAAC,MAAM;IAC9B,SAAS,EAAE,cAAc,CAAC,IAAI;IAC9B,QAAQ,EAAE,aAAa,CAAC,QAAQ;IAChC,QAAQ,EAAE,IAAI;IACd,SAAS,EAAE,KAAK;IAChB,SAAS,EAAE,KAAK;IAChB,UAAU,EAAE,KAAK;IACjB,cAAc,EAAE,KAAK;IACrB,MAAM,EAAE,eAAe;CACxB,CAAC;AAEF,MAAM,CAAC,MAAM,oBAAoB,GAA0B;IACzD,KAAK,EAAE,YAAY;IACnB,eAAe,EAAE,IAAI;IACrB,IAAI,EAAE,YAAY;IAClB,SAAS,EAAE,KAAK;CACjB,CAAC;AAEF,MAAM,CAAC,MAAM,oBAAoB,GAA0B;IACzD,gBAAgB,EAAE,KAAK;IACvB,YAAY,EAAE,KAAK;IACnB,UAAU,EAAE,QAAQ;IACpB,MAAM,EAAE,IAAI;IACZ,MAAM,EAAE,SAAS;CAClB,CAAC","sourcesContent":["/**\n * @license\n * Copyright 2023 Nuraly, Laabidi Aymen\n * SPDX-License-Identifier: MIT\n */\n\n/**\n * Modal size options\n */\nexport enum ModalSize {\n  Small = 'small',\n  Medium = 'medium', \n  Large = 'large',\n  ExtraLarge = 'xl'\n}\n\n/**\n * Modal position options\n */\nexport enum ModalPosition {\n  Center = 'center',\n  Top = 'top',\n  Bottom = 'bottom'\n}\n\n/**\n * Modal animation types\n */\nexport enum ModalAnimation {\n  Fade = 'fade',\n  Zoom = 'zoom',\n  SlideUp = 'slide-up',\n  SlideDown = 'slide-down',\n  None = 'none'\n}\n\n/**\n * Modal backdrop behavior\n */\nexport enum ModalBackdrop {\n  Static = 'static', // clicking backdrop doesn't close modal\n  Closable = 'closable', // clicking backdrop closes modal\n  None = 'none' // no backdrop\n}\n\n/**\n * Modal events\n */\nexport interface ModalEvents {\n  'modal-open': CustomEvent<void>;\n  'modal-close': CustomEvent<void>;\n  'modal-before-close': CustomEvent<{ cancel: () => void }>;\n  'modal-after-open': CustomEvent<void>;\n  'modal-escape': CustomEvent<void>;\n}\n\n/**\n * Modal configuration interface\n */\nexport interface ModalConfig {\n  size?: ModalSize;\n  position?: ModalPosition;\n  animation?: ModalAnimation;\n  backdrop?: ModalBackdrop;\n  closable?: boolean;\n  draggable?: boolean;\n  resizable?: boolean;\n  fullscreen?: boolean;\n  destroyOnClose?: boolean;\n  zIndex?: number;\n}\n\n/**\n * Modal header configuration\n */\nexport interface ModalHeader {\n  title?: string;\n  showCloseButton?: boolean;\n  icon?: string;\n  draggable?: boolean;\n}\n\n/**\n * Modal footer configuration\n */\nexport interface ModalFooter {\n  showCancelButton?: boolean;\n  showOkButton?: boolean;\n  cancelText?: string;\n  okText?: string;\n  okType?: 'primary' | 'secondary' | 'danger';\n}\n\n/**\n * Constants\n */\nexport const EMPTY_STRING = '';\nexport const DEFAULT_Z_INDEX = 1000;\n\n/**\n * Type guards\n */\nexport const isModalSize = (value: string): value is ModalSize => {\n  return Object.values(ModalSize).includes(value as ModalSize);\n};\n\nexport const isModalPosition = (value: string): value is ModalPosition => {\n  return Object.values(ModalPosition).includes(value as ModalPosition);\n};\n\nexport const isModalAnimation = (value: string): value is ModalAnimation => {\n  return Object.values(ModalAnimation).includes(value as ModalAnimation);\n};\n\nexport const isModalBackdrop = (value: string): value is ModalBackdrop => {\n  return Object.values(ModalBackdrop).includes(value as ModalBackdrop);\n};\n\n/**\n * Default configurations\n */\nexport const DEFAULT_MODAL_CONFIG: Required<ModalConfig> = {\n  size: ModalSize.Medium,\n  position: ModalPosition.Center,\n  animation: ModalAnimation.Fade,\n  backdrop: ModalBackdrop.Closable,\n  closable: true,\n  draggable: false,\n  resizable: false,\n  fullscreen: false,\n  destroyOnClose: false,\n  zIndex: DEFAULT_Z_INDEX\n};\n\nexport const DEFAULT_MODAL_HEADER: Required<ModalHeader> = {\n  title: EMPTY_STRING,\n  showCloseButton: true,\n  icon: EMPTY_STRING,\n  draggable: false\n};\n\nexport const DEFAULT_MODAL_FOOTER: Required<ModalFooter> = {\n  showCancelButton: false,\n  showOkButton: false,\n  cancelText: 'Cancel',\n  okText: 'OK',\n  okType: 'primary'\n};"]}

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@nuralyui/modal",
-    "version": "0.0.8",
+    "version": "0.0.9",
     "description": "",
     "main": "index.js",
     "type": "module",

package/react.js.map

@@ -1 +1 @@
-{"version":3,"file":"react.js","sourceRoot":"","sources":["../../../src/components/modal/react.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,eAAe,EAAE,MAAM,iBAAiB,CAAC;AAClD,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAE,cAAc,EAAE,MAAM,sBAAsB,CAAC;AAEtD,MAAM,CAAC,MAAM,OAAO,GAAG,eAAe,CAAC;IACrC,OAAO,EAAE,UAAU;IACnB,YAAY,EAAE,cAAc;IAC5B,KAAK,EAAE,KAAK;IACZ,MAAM,EAAE;QACN,YAAY,EAAE,aAAa;QAC3B,aAAa,EAAE,cAAc;QAC7B,oBAAoB,EAAE,oBAAoB;QAC1C,kBAAkB,EAAE,kBAAkB;QACtC,cAAc,EAAE,eAAe;KAChC;CACF,CAAC,CAAC","sourcesContent":["import { createComponent } from '@lit-labs/react';\nimport * as React from 'react';\nimport { NrModalElement } from './modal.component.js';\n\nexport const NrModal = createComponent({\n  tagName: 'nr-modal',\n  elementClass: NrModalElement,\n  react: React,\n  events: {\n    'modal-open': 'onModalOpen',\n    'modal-close': 'onModalClose',\n    'modal-before-close': 'onModalBeforeClose',\n    'modal-after-open': 'onModalAfterOpen',\n    'modal-escape': 'onModalEscape',\n  },\n});\n"]}
+{"version":3,"file":"react.js","sourceRoot":"","sources":["../../../../src/components/modal/react.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,eAAe,EAAE,MAAM,iBAAiB,CAAC;AAClD,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAE,cAAc,EAAE,MAAM,sBAAsB,CAAC;AAEtD,MAAM,CAAC,MAAM,OAAO,GAAG,eAAe,CAAC;IACrC,OAAO,EAAE,UAAU;IACnB,YAAY,EAAE,cAAc;IAC5B,KAAK,EAAE,KAAK;IACZ,MAAM,EAAE;QACN,YAAY,EAAE,aAAa;QAC3B,aAAa,EAAE,cAAc;QAC7B,oBAAoB,EAAE,oBAAoB;QAC1C,kBAAkB,EAAE,kBAAkB;QACtC,cAAc,EAAE,eAAe;KAChC;CACF,CAAC,CAAC","sourcesContent":["import { createComponent } from '@lit-labs/react';\nimport * as React from 'react';\nimport { NrModalElement } from './modal.component.js';\n\nexport const NrModal = createComponent({\n  tagName: 'nr-modal',\n  elementClass: NrModalElement,\n  react: React,\n  events: {\n    'modal-open': 'onModalOpen',\n    'modal-close': 'onModalClose',\n    'modal-before-close': 'onModalBeforeClose',\n    'modal-after-open': 'onModalAfterOpen',\n    'modal-escape': 'onModalEscape',\n  },\n});\n"]}