@nuraly/lumenui 0.1.0

package/dist/src/components/modal/bundle.js

@@ -0,0 +1,442 @@
+import{css as a,LitElement as o,nothing as t,html as e}from"lit";import{property as i,state as r,customElement as s}from"lit/decorators.js";import{classMap as n}from"lit/directives/class-map.js";import{styleMap as l}from"lit/directives/style-map.js";import{NuralyUIBaseMixin as d}from"@nuralyui/common/mixins";
+/**
+ * @license
+ * Copyright 2023 Nuraly, Laabidi Aymen
+ * SPDX-License-Identifier: MIT
+ */var c,h,m,u;!function(a){a.Small="small",a.Medium="medium",a.Large="large",a.ExtraLarge="xl"}(c||(c={})),function(a){a.Center="center",a.Top="top",a.Bottom="bottom"}(h||(h={})),function(a){a.Fade="fade",a.Zoom="zoom",a.SlideUp="slide-up",a.SlideDown="slide-down",a.None="none"}(m||(m={})),function(a){a.Static="static",a.Closable="closable",a.None="none"}(u||(u={}));const p="",v=1e3,y=a=>Object.values(c).includes(a),f=a=>Object.values(h).includes(a),b=a=>Object.values(m).includes(a),g=a=>Object.values(u).includes(a),x={size:c.Medium,position:h.Center,animation:m.Fade,backdrop:u.Closable,closable:!0,draggable:!1,resizable:!1,fullscreen:!1,destroyOnClose:!1,zIndex:1e3},k={title:p,showCloseButton:!0,icon:p,draggable:!1},w={showCancelButton:!1,showOkButton:!1,cancelText:"Cancel",okText:"OK",okType:"primary"},z=a`
+  :host {
+    display: contents;
+    font-family: var(--nuraly-font-family);
+    
+    /* Force CSS custom property inheritance to ensure theme switching works properly */
+    color: var(--nuraly-color-text);
+    background-color: var(--nuraly-color-background);
+    
+    /* Ensure theme variables are properly inherited */
+    --modal-border-radius: var(--nuraly-border-radius-modal, 8px);
+    
+    /* Ensure clean state transitions when theme changes */
+    * {
+      transition: all var(--nuraly-transition-fast, 0.15s) ease;
+    }
+  }
+
+  /* Force re-evaluation of theme-dependent properties on theme change */
+  :host([data-theme]) {
+    color: inherit;
+    background-color: inherit;
+  }
+
+  /* Modal backdrop */
+  .modal-backdrop {
+    position: fixed;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background-color: var(--nuraly-color-modal-backdrop, rgba(0, 0, 0, 0.45));
+    z-index: var(--nuraly-z-modal-backdrop, 1000);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    padding: var(--nuraly-spacing-modal-padding, var(--nuraly-spacing-05, 1rem));
+    backdrop-filter: var(--nuraly-modal-backdrop-filter, none);
+    
+    &.modal-backdrop--hidden {
+      display: none;
+    }
+    
+    &.modal-backdrop--position-top {
+      align-items: flex-start;
+      padding-top: var(--nuraly-spacing-modal-top, var(--nuraly-spacing-07, 2rem));
+    }
+    
+    &.modal-backdrop--position-bottom {
+      align-items: flex-end;
+      padding-bottom: var(--nuraly-spacing-modal-bottom, var(--nuraly-spacing-07, 2rem));
+    }
+  }
+
+  /* Nested modals support */
+  .modal-backdrop {
+    /* Ensure each modal backdrop has its own stacking context */
+    z-index: var(--nuraly-z-modal-backdrop, 1000);
+  }
+
+  /* Nested modal backdrop styling */
+  .modal-backdrop + .modal-backdrop {
+    /* Subsequent modals get slightly darker backdrop */
+    background-color: var(--nuraly-color-modal-backdrop-nested, rgba(0, 0, 0, 0.6));
+  }
+
+  /* Nested modal animation delay to avoid conflicts */
+  .modal-backdrop:not(:first-of-type) {
+    animation-delay: 0.1s;
+  }
+
+  /* Modal container */
+  .modal {
+    position: relative;
+    background-color: var(--nuraly-color-modal-background, var(--nuraly-color-background, #ffffff));
+    border-radius: var(--modal-border-radius);
+    box-shadow: var(--nuraly-shadow-modal, 
+      0 6px 16px 0 rgba(0, 0, 0, 0.08), 
+      0 3px 6px -4px rgba(0, 0, 0, 0.12),
+      0 9px 28px 8px rgba(0, 0, 0, 0.05)
+    );
+    border: var(--nuraly-border-modal, 1px solid var(--nuraly-color-border, #e0e0e0));
+    max-height: calc(100vh - var(--nuraly-spacing-modal-margin, var(--nuraly-spacing-07, 2rem)) * 2);
+    max-width: calc(100vw - var(--nuraly-spacing-modal-margin, var(--nuraly-spacing-07, 2rem)) * 2);
+    display: flex;
+    flex-direction: column;
+    outline: none;
+    
+    &:focus {
+      outline: var(--nuraly-focus-outline, 2px solid var(--nuraly-color-primary, #0f62fe));
+      outline-offset: var(--nuraly-focus-outline-offset, 1px);
+    }
+  }
+
+
+  /* Modal sizes */
+  .modal--size-small {
+    width: var(--nuraly-modal-width-small, 400px);
+    min-height: var(--nuraly-modal-min-height-small, 200px);
+  }
+
+  .modal--size-medium {
+    width: var(--nuraly-modal-width-medium, 600px);
+    min-height: var(--nuraly-modal-min-height-medium, 300px);
+  }
+
+  .modal--size-large {
+    width: var(--nuraly-modal-width-large, 800px);
+    min-height: var(--nuraly-modal-min-height-large, 400px);
+  }
+
+  .modal--size-xl {
+    width: var(--nuraly-modal-width-xl, 1000px);
+    min-height: var(--nuraly-modal-min-height-xl, 500px);
+  }
+
+  .modal--fullscreen {
+    width: 100vw;
+    height: 100vh;
+    max-width: 100vw;
+    max-height: 100vh;
+    border-radius: 0;
+  }
+
+  /* Modal header */
+  .modal-header {
+    padding: var(--nuraly-spacing-modal-header, var(--nuraly-spacing-05, 1rem) var(--nuraly-spacing-06, 1.5rem));
+    border-bottom: var(--nuraly-border-modal-header, 1px solid var(--nuraly-color-border, #e0e0e0));
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    min-height: var(--nuraly-modal-header-height);
+    flex-shrink: 0;
+    
+    &.modal-header--draggable {
+      cursor: move;
+      user-select: none;
+    }
+  }
+
+  .modal-header-content {
+    display: flex;
+    align-items: center;
+    gap: var(--nuraly-spacing-03, 0.5rem);
+    flex: 1;
+    min-width: 0;
+  }
+
+  .modal-header-icon {
+    flex-shrink: 0;
+    width: var(--nuraly-modal-header-icon-size, 20px);
+    height: var(--nuraly-modal-header-icon-size, 20px);
+    color: var(--nuraly-color-modal-header-icon, var(--nuraly-color-text-secondary, #525252));
+  }
+
+  .modal-title {
+    font-size: var(--nuraly-font-size-modal-title, var(--nuraly-font-size-04, 1.125rem));
+    font-weight: var(--nuraly-font-weight-modal-title, var(--nuraly-font-weight-medium, 500));
+    color: var(--nuraly-color-modal-title, var(--nuraly-color-text, #161616));
+    margin: 0;
+    line-height: var(--nuraly-line-height-02, 1.375);
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
+  .modal-close-button {
+    flex-shrink: 0;
+    width: var(--nuraly-modal-close-size, 32px);
+    height: var(--nuraly-modal-close-size, 32px);
+    border: none;
+    background: transparent;
+    border-radius: var(--nuraly-border-radius-sm, 4px);
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    color: var(--nuraly-color-modal-close-icon, var(--nuraly-color-text-secondary, #525252));
+    transition: all var(--nuraly-transition-fast, 0.15s) ease;
+    
+    &:hover {
+      background-color: var(--nuraly-color-modal-close-hover, var(--nuraly-color-background-hover, #f4f4f4));
+      color: var(--nuraly-color-modal-close-icon-hover, var(--nuraly-color-text, #161616));
+    }
+    
+    &:focus {
+      outline: var(--nuraly-focus-outline, 2px solid var(--nuraly-color-primary, #0f62fe));
+      outline-offset: var(--nuraly-focus-outline-offset, 1px);
+    }
+    
+    &:active {
+      background-color: var(--nuraly-color-modal-close-active, var(--nuraly-color-background-active, #c6c6c6));
+    }
+  }
+
+  .modal-close-icon {
+    width: var(--nuraly-modal-close-icon-size, 16px);
+    height: var(--nuraly-modal-close-icon-size, 16px);
+  }
+
+  /* Carbon theme specific - sharp corners for close button */
+  :host([data-theme="carbon"]) .modal-close-button,
+  :host([data-theme="carbon-light"]) .modal-close-button,
+  :host([data-theme="carbon-dark"]) .modal-close-button {
+    border-radius: 0;
+  }
+
+  /* Modal body */
+  .modal-body {
+    flex: 1;
+    padding: var(--nuraly-spacing-modal-body, var(--nuraly-spacing-05, 1rem) var(--nuraly-spacing-06, 1.5rem));
+    overflow-y: auto;
+    color: var(--nuraly-color-modal-body-text, var(--nuraly-color-text, #161616));
+    line-height: var(--nuraly-line-height-03, 1.5);
+  }
+
+  /* Modal footer */
+  .modal-footer {
+    padding: var(--nuraly-spacing-modal-footer, var(--nuraly-spacing-03, 0.5rem) var(--nuraly-spacing-05, 1rem));
+    border-top: var(--nuraly-border-modal-footer, 1px solid var(--nuraly-color-border, #e0e0e0));
+    display: flex;
+    align-items: center;
+    justify-content: flex-end;
+    gap: var(--nuraly-spacing-03, 0.5rem);
+    min-height: var(--nuraly-modal-footer-height, 48px);
+    flex-shrink: 0;
+  }
+
+  /* Animation keyframes */
+  @keyframes modalFadeIn {
+    from {
+      opacity: 0;
+      transform: scale(0.9);
+    }
+    to {
+      opacity: 1;
+      transform: scale(1);
+    }
+  }
+
+  @keyframes modalZoomIn {
+    from {
+      opacity: 0;
+      transform: scale(0.7);
+    }
+    to {
+      opacity: 1;
+      transform: scale(1);
+    }
+  }
+
+  @keyframes modalSlideUp {
+    from {
+      opacity: 0;
+      transform: translateY(20px);
+    }
+    to {
+      opacity: 1;
+      transform: translateY(0);
+    }
+  }
+
+  @keyframes modalSlideDown {
+    from {
+      opacity: 0;
+      transform: translateY(-20px);
+    }
+    to {
+      opacity: 1;
+      transform: translateY(0);
+    }
+  }
+
+  @keyframes backdropFadeIn {
+    from {
+      opacity: 0;
+    }
+    to {
+      opacity: 1;
+    }
+  }
+
+  /* Animation classes */
+  .modal-backdrop--animation-fade {
+    animation: backdropFadeIn var(--nuraly-transition-modal, 0.3s) ease;
+  }
+
+  .modal--animation-fade {
+    animation: modalFadeIn var(--nuraly-transition-modal, 0.3s) ease;
+  }
+
+  .modal--animation-zoom {
+    animation: modalZoomIn var(--nuraly-transition-modal, 0.3s) ease;
+  }
+
+  .modal--animation-slide-up {
+    animation: modalSlideUp var(--nuraly-transition-modal, 0.3s) ease;
+  }
+
+  .modal--animation-slide-down {
+    animation: modalSlideDown var(--nuraly-transition-modal, 0.3s) ease;
+  }
+
+  /* Dragging state */
+  .modal--dragging {
+    user-select: none;
+    cursor: move;
+  }
+
+  /* Resizing handles (when resizable) */
+  .modal--resizable {
+    resize: both;
+    overflow: auto;
+  }
+
+  .resize-handle {
+    position: absolute;
+    bottom: 0;
+    right: 0;
+    width: 20px;
+    height: 20px;
+    cursor: se-resize;
+    background: linear-gradient(
+      -45deg,
+      transparent 40%,
+      var(--nuraly-color-border, #e0e0e0) 40%,
+      var(--nuraly-color-border, #e0e0e0) 60%,
+      transparent 60%
+    );
+  }
+
+  /* Responsive behavior */
+  @media (max-width: 768px) {
+    .modal-backdrop {
+      padding: var(--nuraly-spacing-02, 0.25rem);
+    }
+    
+    .modal--size-small,
+    .modal--size-medium,
+    .modal--size-large,
+    .modal--size-xl {
+      width: 100%;
+      max-width: none;
+    }
+    
+    .modal-header,
+    .modal-body,
+    .modal-footer {
+      padding-left: var(--nuraly-spacing-04, 0.75rem);
+      padding-right: var(--nuraly-spacing-04, 0.75rem);
+    }
+  }
+
+  /* Dark theme support through CSS custom properties */
+  @media (prefers-color-scheme: dark) {
+    :host(:not([data-theme])) {
+      --nuraly-color-modal-backdrop: rgba(0, 0, 0, 0.6);
+    }
+  }
+`
+/**
+ * @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),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 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()}}
+/**
+ * @license
+ * Copyright 2023 Nuraly, Laabidi Aymen
+ * SPDX-License-Identifier: MIT
+ */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(),r=t.animate(i,{duration:300,easing:"ease",fill:"forwards"});r.addEventListener("finish",()=>{this.animationState="open",r.commitStyles(),r.cancel(),t.style.transform="",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">
+            <slot name="header"></slot>
+          </div>
+        `:o?e`
+          <div class="modal-header-content">
+            ${this.headerIcon?e`
+              <nr-icon class="modal-header-icon" name="${this.headerIcon}"></nr-icon>
+            `:t}
+            ${this.modalTitle?e`
+              <h2 class="modal-title">${this.modalTitle}</h2>
+            `:t}
+          </div>
+        `:t}
+        
+        ${this.showCloseButton?e`
+          <button
+            class="modal-close-button"
+            @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="x"></nr-icon>
+          </button>
+        `:t}
+      </div>
+    `:t}renderFooter(){return this.querySelector('[slot="footer"]')?e`
+      <div class="modal-footer">
+        <slot name="footer"></slot>
+      </div>
+    `:t}updated(){this.updateDataTheme()}updateDataTheme(){this.closest("[data-theme]")||this.setAttribute("data-theme",this.currentTheme)}render(){return this.open||"closed"!==this.animationState?e`
+      <div 
+        class=${n(this.getBackdropClasses())}
+        @click=${this.handleBackdropClick}
+        style=${l(this.getModalStyles())}>
+        
+        <div 
+          class=${n(this.getModalClasses())}
+          role="dialog"
+          aria-modal="true"
+          aria-labelledby=${this.modalTitle?"modal-title":t}
+          tabindex="-1">
+          
+          ${this.renderHeader()}
+          
+          <div class="modal-body">
+            <slot></slot>
+          </div>
+          
+          ${this.renderFooter()}
+          
+          ${this.resizable?e`
+            <div class="resize-handle"></div>
+          `:t}
+        </div>
+      </div>
+    `: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/dist/src/components/modal/index.d.ts

@@ -0,0 +1,10 @@
+/**
+ * @license
+ * Copyright 2023 Nuraly, Laabidi Aymen
+ * SPDX-License-Identifier: MIT
+ */
+export * from './modal.component.js';
+export * from './modal.types.js';
+export * from './modal-manager.js';
+export * from './controllers/index.js';
+//# sourceMappingURL=index.d.ts.map

package/dist/src/components/modal/index.js

@@ -0,0 +1,10 @@
+/**
+ * @license
+ * Copyright 2023 Nuraly, Laabidi Aymen
+ * SPDX-License-Identifier: MIT
+ */
+export * from './modal.component.js';
+export * from './modal.types.js';
+export * from './modal-manager.js';
+export * from './controllers/index.js';
+//# sourceMappingURL=index.js.map

package/dist/src/components/modal/modal-manager.d.ts

@@ -0,0 +1,72 @@
+/**
+ * @license
+ * Copyright 2023 Nuraly, Laabidi Aymen
+ * SPDX-License-Identifier: MIT
+ */
+/**
+ * Modal stack item interface
+ */
+export interface ModalStackItem {
+    modal: any;
+    previousFocus: Element | null;
+    zIndex: number;
+    id: string;
+}
+/**
+ * Modal Manager - Singleton class to handle nested modals
+ * Manages the modal stack, z-index allocation, and focus management
+ */
+declare class ModalManagerClass {
+    private modalStack;
+    private baseZIndex;
+    private zIndexIncrement;
+    private bodyScrollDisabled;
+    private originalBodyOverflow;
+    /**
+     * Opens a modal and adds it to the stack
+     */
+    openModal(modal: any): number;
+    /**
+     * Closes a modal and removes it from the stack
+     */
+    closeModal(modal: any): void;
+    /**
+     * Gets the current z-index for a modal
+     */
+    getModalZIndex(modal: any): number;
+    /**
+     * Checks if a modal is the top modal in the stack
+     */
+    isTopModal(modal: any): boolean;
+    /**
+     * Gets the number of open modals
+     */
+    getStackDepth(): number;
+    /**
+     * Closes all modals
+     */
+    closeAllModals(): void;
+    /**
+     * Gets all open modal IDs
+     */
+    getOpenModalIds(): string[];
+    /**
+     * Checks if any modals are open
+     */
+    hasOpenModals(): boolean;
+    private generateModalId;
+    private updateModalZIndex;
+    private disableBodyScroll;
+    private restoreBodyScroll;
+    /**
+     * Handle Escape key for nested modals - only close the top modal
+     */
+    handleEscapeKey(): boolean;
+    /**
+     * Handle backdrop clicks - only close if it's the top modal
+     */
+    handleBackdropClick(modal: any): boolean;
+}
+export declare const ModalManager: ModalManagerClass;
+export {};
+//# sourceMappingURL=modal-manager.d.ts.map