@nuraly/lumenui 0.3.5 → 0.3.7

package/dist/src/components/iconpicker/icon-picker.component.js

@@ -214,10 +214,10 @@ let NrIconPickerElement = class NrIconPickerElement extends NuralyUIBaseMixin(Li
         // Limit visible icons for performance
         const visibleIcons = this.filteredIcons.slice(0, this.maxVisible);
         return html `
-      <div class="dropdown-content">
+      <div class="dropdown-content" part="panel">
         ${this.showSearch
             ? html `
-              <div class="search-container">
+              <div class="search-container" part="search">
                 <nr-input
                   size="small"
                   .placeholder=${DEFAULT_SEARCH_PLACEHOLDER}
@@ -230,7 +230,7 @@ let NrIconPickerElement = class NrIconPickerElement extends NuralyUIBaseMixin(Li
               </div>
             `
             : nothing}
-        <div class="icons-grid-container">
+        <div class="icons-grid-container" part="grid">
           <lit-virtualizer
             .items=${visibleIcons}
             .layout=${grid({ itemSize: '40px' })}
@@ -268,7 +268,7 @@ let NrIconPickerElement = class NrIconPickerElement extends NuralyUIBaseMixin(Li
             '--dropdown-max-height': 'var(--icon-picker-dropdown-max-height)'
         })}
       >
-        <div slot="trigger" class="trigger-container">
+        <div slot="trigger" class="trigger-container" part="trigger">
           ${this.renderTrigger()}
         </div>
         <div slot="content">

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

@@ -405,6 +405,7 @@ const p=e=>{class t extends e{constructor(){super(...arguments),this.t=null}crea
  */var x=function(e,t,i,n){for(var s,o=arguments.length,r=o<3?t:null===n?n=Object.getOwnPropertyDescriptor(t,i):n,a=e.length-1;a>=0;a--)(s=e[a])&&(r=(o<3?s(r):o>3?s(t,i,r):s(t,i))||r);return o>3&&r&&Object.defineProperty(t,i,r),r};let k=class extends((e=>c(l(h(p(e)))))(n)){constructor(){super(),this.requiredComponents=["nr-icon","nr-dropdown"],this.items=[],this.size="medium",this.arrowPosition="right",this._contextMenuState=null,this._editingPath=null,this._editingValue="",this._pendingClickTimeout=null,this._pendingClickPath=null,this._linkIndex=0,this.stateController=new f(this),this.keyboardController=new w(this,this.stateController),this.accessibilityController=new y(this,this.stateController)}firstUpdated(){this._initializeSelectedState(),this.accessibilityController.updateAriaAttributes()}updated(e){e.has("items")&&(this._initializeSelectedState(),this._initializeOpenedState()),this.accessibilityController.updateAriaAttributes()}_initializeOpenedState(){this._openSubMenusFromItems(this.items,[])}_openSubMenusFromItems(e,t){for(let i=0;i<e.length;i++){const n=e[i],s=[...t,i];n.children&&(n.opened&&this.stateController.openSubMenu(s),this._openSubMenusFromItems(n.children,s))}}_initializeSelectedState(){this._linkIndex=0,this._findSelectedPath(this.items)}_findSelectedPath(e,t=[]){for(let i=0;i<e.length;i++){const n=e[i],s=[...t,i];if(n.children){if(this._findSelectedPath(n.children,s))return!0}else if(n.selected)return this.stateController.setSelectedPath(s),!0}return!1}_handleLinkClick(e,t,i,n){var s;if(null===(s=null==n?void 0:n.target)||void 0===s?void 0:s.classList.contains("action-icon"))return;if("click"===(null==n?void 0:n.type)){if(n.detail>0)return}const o=e.join("-");if(i&&"mousedown"===(null==n?void 0:n.type))return this._pendingClickTimeout&&clearTimeout(this._pendingClickTimeout),this._pendingClickPath=o,void(this._pendingClickTimeout=setTimeout(()=>{this._pendingClickPath===o&&(this._executeClick(e,t),this._pendingClickPath=null)},200));this._executeClick(e,t)}_executeClick(e,t){this.stateController.setSelectedPath(e),this.dispatchEvent(new CustomEvent("change",{bubbles:!0,composed:!0,detail:{path:e,value:t}})),this.requestUpdate()}_handleSubMenuClick(e,t,i,n){const s=n,o=n.target;if("toggle-icon"===o.id||o.closest("#toggle-icon"))return;if("click"===n.type)return 0===s.detail?(this.stateController.toggleSubMenu(e),void this.requestUpdate()):void 0;const r=e.join("-");if(i)return this._pendingClickTimeout&&clearTimeout(this._pendingClickTimeout),this._pendingClickPath=r,void(this._pendingClickTimeout=setTimeout(()=>{this._pendingClickPath===r&&(this._executeSubMenuClick(e,t),this._pendingClickPath=null)},200));this._executeSubMenuClick(e,t)}_executeSubMenuClick(e,t){this.stateController.setSelectedPath([]),this.stateController.clearHighlights(),this.stateController.setHighlighted(e,!0),this.stateController.toggleSubMenu(e),this.dispatchEvent(new CustomEvent("change",{bubbles:!0,composed:!0,detail:{path:e,value:t}})),this.requestUpdate()}_toggleSubMenu(e,t){t.stopPropagation(),this.stateController.toggleSubMenu(e),this.requestUpdate()}_handleSubMenuMouseEnter(e){this.stateController.setHovered(e,!0),this.requestUpdate()}_handleSubMenuMouseLeave(e){this.stateController.setHovered(e,!1),this.requestUpdate()}_handleActionClick(e,t){const i=t.detail.item,n=t.detail.originalEvent,s=t.detail.dropdown;this.dispatchEvent(new CustomEvent("action-click",{detail:{value:i.value,path:e,item:i,originalEvent:n,close:()=>{s&&("function"==typeof s.hide?s.hide():"function"==typeof s.close&&s.close())}},composed:!0,bubbles:!0}))}_handleContextMenu(e,t,i){var n,s;(null===(s=null===(n=t.menu)||void 0===n?void 0:n.actions)||void 0===s?void 0:s.length)&&(i.preventDefault(),i.stopPropagation(),this._contextMenuState={path:e,x:i.clientX,y:i.clientY,actions:t.menu.actions},this.requestUpdate(),this.updateComplete.then(()=>{var e;const t=null===(e=this.shadowRoot)||void 0===e?void 0:e.querySelector("#context-menu-dropdown");t&&"function"==typeof t.show&&t.show()}))}_handleContextMenuAction(e,t){const i=t.detail.item,n=t.detail.originalEvent,s=t.detail.dropdown,o=()=>{this._contextMenuState=null,s&&("function"==typeof s.hide?s.hide():"function"==typeof s.close&&s.close()),this.requestUpdate()};this.dispatchEvent(new CustomEvent("action-click",{detail:{value:i.value,path:e,item:i,originalEvent:n,close:o},composed:!0,bubbles:!0})),o()}_handleContextMenuClose(){this._contextMenuState=null,this.requestUpdate()}_handleDoubleClick(e,t,i){if(t.disabled)return;i.preventDefault(),i.stopPropagation(),this._pendingClickTimeout&&(clearTimeout(this._pendingClickTimeout),this._pendingClickTimeout=null,this._pendingClickPath=null);const n=e.join("-");this._editingPath=n,this._editingValue=t.text,this.requestUpdate(),this.updateComplete.then(()=>{var e;const t=null===(e=this.shadowRoot)||void 0===e?void 0:e.querySelector(`input[data-edit-path="${n}"]`);t&&(t.focus(),t.select())})}_handleEditInput(e){e.stopPropagation();const t=e.target;this._editingValue=t.value}_handleEditKeyDown(e,t,i){if(i.stopPropagation(),console.log("Edit keydown:",i.key,"editingValue:",this._editingValue),"Enter"===i.key){i.preventDefault();const n=i.target;this._editingValue=n.value,console.log("Saving with value:",this._editingValue),this._saveEdit(e,t)}else"Escape"===i.key&&(i.preventDefault(),this._cancelEdit())}_handleEditBlur(e,t,i){var n;const s=i.relatedTarget;s&&(null===(n=this.shadowRoot)||void 0===n?void 0:n.contains(s))||setTimeout(()=>{this._editingPath===e.join("-")&&this._saveEdit(e,t)},200)}_saveEdit(e,t){const i=this._editingValue.trim();if(console.log("_saveEdit called:",{newValue:i,originalText:t,willEmit:i&&i!==t}),i&&i!==t){const n={path:e,oldValue:t,newValue:i};this.onLabelEdit&&(console.log("Calling onLabelEdit callback"),this.onLabelEdit(n)),console.log("Dispatching label-edit event from:",this.tagName);const s=new CustomEvent("label-edit",{bubbles:!0,composed:!0,detail:n});this.dispatchEvent(s)}this._editingPath=null,this._editingValue="",this.requestUpdate()}_cancelEdit(){this._editingPath=null,this._editingValue="",this.requestUpdate()}_isEditing(e){return this._editingPath===e.join("-")}_isPathSelected(e){return this.stateController.isPathSelected(e)}_convertActionsToDropdownItems(e){return e.map(e=>({id:e.value,label:e.label,value:e.value,icon:e.icon,additionalData:e.additionalData}))}_renderMenuLink(e,n){var s,o,r;const a=n.join("-"),l=this._isPathSelected(n),d=this._isEditing(n),c=this._linkIndex++;return t`
       <li
         class="menu-link ${l?"selected":""} ${e.disabled?"disabled":""} ${d?"editing":""}"
+        part="link"
         data-path=${a}
         data-index=${c}
         tabindex=${d?-1:0}
@@ -452,6 +453,7 @@ const p=e=>{class t extends e{constructor(){super(...arguments),this.t=null}crea
     `}_renderSubMenu(e,n){var s,o,r;const a=n.join("-"),l=this.stateController.isSubMenuOpen(n)||e.opened,d=this.stateController.isSubMenuHovered(n),c=this.stateController.isSubMenuHighlighted(n),h=e.selected,u=this._isEditing(n),m=e.iconPosition||this.arrowPosition,p="left"===m||"left"===m;return t`
       <ul
         class="sub-menu ${c?"highlighted":""} ${e.disabled?"disabled":""} ${h?"selected":""} ${p?"arrow-left":"arrow-right"} ${u?"editing":""}"
+        part="submenu"
         data-path=${a}
         tabindex=${u?-1:0}
         @mouseenter=${()=>this._handleSubMenuMouseEnter(n)}
@@ -459,6 +461,7 @@ const p=e=>{class t extends e{constructor(){super(...arguments),this.t=null}crea
         @click=${e.disabled||u?i:e=>{const t=e;e.target.classList.contains("sub-menu")&&0===t.detail&&(e.stopPropagation(),this.stateController.toggleSubMenu(n),this.requestUpdate())}}>
         <div
           class="sub-menu-header"
+          part="submenu-header"
           @mousedown=${e.disabled||u?i:t=>this._handleSubMenuClick(n,e.text,!!e.editable,t)}
           @click=${e.disabled||u?i:t=>this._handleSubMenuClick(n,e.text,!!e.editable,t)}
           @dblclick=${!e.disabled&&e.editable?t=>this._handleDoubleClick(n,e,t):i}
@@ -506,7 +509,7 @@ const p=e=>{class t extends e{constructor(){super(...arguments),this.t=null}crea
             `:i}
           </div>
         </div>
-        <div class="sub-menu-children" style="display: ${l?"block":"none"}">
+        <div class="sub-menu-children" part="submenu-content" style="display: ${l?"block":"none"}">
           ${e.children?this._renderMenuItems(e.children,n):i}
         </div>
       </ul>
@@ -523,7 +526,7 @@ const p=e=>{class t extends e{constructor(){super(...arguments),this.t=null}crea
         <span slot="trigger" style="display: block; width: 1px; height: 1px;"></span>
       </nr-dropdown>
     `}render(){return this._linkIndex=0,t`
-      <ul class="menu-root menu--${this.size}">
+      <ul class="menu-root menu--${this.size}" part="root">
         ${this._renderMenuItems(this.items)}
       </ul>
       ${this._renderContextMenu()}

package/dist/src/components/menu/menu.component.js

@@ -396,6 +396,7 @@ let NrMenuElement = class NrMenuElement extends NuralyUIBaseMixin(LitElement) {
         return html `
       <li
         class="menu-link ${isSelected ? 'selected' : ''} ${menu.disabled ? 'disabled' : ''} ${isEditing ? 'editing' : ''}"
+        part="link"
         data-path=${pathKey}
         data-index=${linkIndex}
         tabindex=${isEditing ? -1 : 0}
@@ -458,6 +459,7 @@ let NrMenuElement = class NrMenuElement extends NuralyUIBaseMixin(LitElement) {
         return html `
       <ul
         class="sub-menu ${isHighlighted ? 'highlighted' : ''} ${menu.disabled ? 'disabled' : ''} ${isSelected ? 'selected' : ''} ${isLeftPosition ? 'arrow-left' : 'arrow-right'} ${isEditing ? 'editing' : ''}"
+        part="submenu"
         data-path=${pathKey}
         tabindex=${isEditing ? -1 : 0}
         @mouseenter=${() => this._handleSubMenuMouseEnter(path)}
@@ -475,6 +477,7 @@ let NrMenuElement = class NrMenuElement extends NuralyUIBaseMixin(LitElement) {
         } : nothing}>
         <div
           class="sub-menu-header"
+          part="submenu-header"
           @mousedown=${!menu.disabled && !isEditing ? (e) => this._handleSubMenuClick(path, menu.text, !!menu.editable, e) : nothing}
           @click=${!menu.disabled && !isEditing ? (e) => this._handleSubMenuClick(path, menu.text, !!menu.editable, e) : nothing}
           @dblclick=${!menu.disabled && menu.editable ? (e) => this._handleDoubleClick(path, menu, e) : nothing}
@@ -522,7 +525,7 @@ let NrMenuElement = class NrMenuElement extends NuralyUIBaseMixin(LitElement) {
             ` : nothing}
           </div>
         </div>
-        <div class="sub-menu-children" style="display: ${isOpen ? 'block' : 'none'}">
+        <div class="sub-menu-children" part="submenu-content" style="display: ${isOpen ? 'block' : 'none'}">
           ${menu.children ? this._renderMenuItems(menu.children, path) : nothing}
         </div>
       </ul>
@@ -560,7 +563,7 @@ let NrMenuElement = class NrMenuElement extends NuralyUIBaseMixin(LitElement) {
     render() {
         this._linkIndex = 0;
         return html `
-      <ul class="menu-root menu--${this.size}">
+      <ul class="menu-root menu--${this.size}" part="root">
         ${this._renderMenuItems(this.items)}
       </ul>
       ${this._renderContextMenu()}

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

@@ -392,25 +392,26 @@ const D=t=>{class e extends t{constructor(){super(...arguments),this.t=null}crea
  * Copyright 2023 Nuraly, Laabidi Aymen
  * SPDX-License-Identifier: MIT
  */var B=function(t,e,o,i){for(var s,a=arguments.length,n=a<3?e:null===i?i=Object.getOwnPropertyDescriptor(e,o):i,r=t.length-1;r>=0;r--)(s=t[r])&&(n=(a<3?s(n):a>3?s(e,o,n):s(e,o))||n);return a>3&&n&&Object.defineProperty(e,o,n),n};let I=class extends((t=>E(C(M(D(t)))))(i)){constructor(){super(...arguments),this.open=!1,this.size=l.Medium,this.position=h.Center,this.animation=c.Fade,this.backdrop=m.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 A(this),this.keyboardController=new T(this),this.closeModal=()=>{if(!this.closable)return;const t=new CustomEvent("modal-before-close",{bubbles:!0,cancelable:!0,detail:{modal:this,cancel:()=>t.preventDefault()}});this.dispatchEvent(t)&&(this.open=!1,this.dispatchEvent(new CustomEvent("modal-close",{bubbles:!0,composed:!0,detail:{modal:this}})))},this.handleBackdropClick=t=>{this.backdrop===m.Closable&&t.target===t.currentTarget&&j.handleBackdropClick(this)&&this.closeModal()}}connectedCallback(){super.connectedCallback(),this.validateDependencies()}disconnectedCallback(){super.disconnectedCallback(),this.previousActiveElement instanceof HTMLElement&&this.previousActiveElement.focus()}willUpdate(t){super.willUpdate(t),t.has("open")&&(this.open?this.handleOpen():this.handleClose())}handleOpen(){const t=j.openModal(this);this.zIndex=t,this.animationState="opening",this.dispatchEvent(new CustomEvent("modal-open",{bubbles:!0,detail:{modal:this,stackDepth:j.getStackDepth()}})),this.updateComplete.then(()=>{this.startOpenAnimation()})}startOpenAnimation(){var t,e;const o=null===(t=this.shadowRoot)||void 0===t?void 0:t.querySelector(".modal"),i=null===(e=this.shadowRoot)||void 0===e?void 0:e.querySelector(".modal-backdrop");if(!o||!i)return;const{modalKeyframes:s}=this.getAnimationKeyframes(),a=o.animate(s,{duration:300,easing:"ease",fill:"forwards"});a.addEventListener("finish",()=>{this.animationState="open",a.commitStyles(),a.cancel(),o.style.transform="",j.isTopModal(this)&&this.keyboardController.focusFirstElement(),this.dispatchEvent(new CustomEvent("modal-after-open",{bubbles:!0,detail:{modal:this,stackDepth:j.getStackDepth()}}))})}getAnimationKeyframes(){let t;switch(this.animation){case"fade":default:t=[{opacity:0,transform:"scale(0.9)"},{opacity:1,transform:"scale(1)"}];break;case"zoom":t=[{opacity:0,transform:"scale(0.7)"},{opacity:1,transform:"scale(1)"}];break;case"slide-up":t=[{opacity:0,transform:"translateY(20px)"},{opacity:1,transform:"translateY(0)"}];break;case"slide-down":t=[{opacity:0,transform:"translateY(-20px)"},{opacity:1,transform:"translateY(0)"}]}return{modalKeyframes:t,backdropKeyframes:[{opacity:0},{opacity:1}]}}handleClose(){this.animationState="closing",j.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 t={};return this.zIndex&&(t["--nuraly-z-modal-backdrop"]=this.zIndex.toString()),this.width&&(t.width=this.width),this.height&&(t.height=this.height),t}renderHeader(){const t=this.querySelector('[slot="header"]'),i=this.modalTitle||this.headerIcon;return t||i||this.showCloseButton?o`
-      <div class="modal-header ${this.modalDraggable?"modal-header--draggable":""}">
+      <div class="modal-header ${this.modalDraggable?"modal-header--draggable":""}" part="header">
         ${t?o`
-          <div class="modal-header-content">
+          <div class="modal-header-content" part="header-content">
             <slot name="header"></slot>
           </div>
         `:i?o`
-          <div class="modal-header-content">
+          <div class="modal-header-content" part="header-content">
             ${this.headerIcon?o`
-              <nr-icon class="modal-header-icon" name="${this.headerIcon}"></nr-icon>
+              <nr-icon class="modal-header-icon" part="header-icon" name="${this.headerIcon}"></nr-icon>
             `:e}
             ${this.modalTitle?o`
-              <h2 class="modal-title">${this.modalTitle}</h2>
+              <h2 class="modal-title" part="title">${this.modalTitle}</h2>
             `:e}
           </div>
         `:e}
-        
+
         ${this.showCloseButton?o`
           <button
             class="modal-close-button"
+            part="close-button"
             @click=${t=>{t.stopPropagation(),this.open=!1,this.dispatchEvent(new CustomEvent("modal-close",{bubbles:!0,composed:!0,detail:{modal:this}}))}}
             aria-label="Close modal"
             type="button">
@@ -419,25 +420,27 @@ const D=t=>{class e extends t{constructor(){super(...arguments),this.t=null}crea
         `:e}
       </div>
     `:e}renderFooter(){return this.querySelector('[slot="footer"]')?o`
-      <div class="modal-footer">
+      <div class="modal-footer" part="footer">
         <slot name="footer"></slot>
       </div>
     `:e}updated(){this.updateDataTheme()}updateDataTheme(){this.closest("[data-theme]")||this.setAttribute("data-theme",this.currentTheme)}render(){return this.open||"closed"!==this.animationState?o`
-      <div 
+      <div
         class=${r(this.getBackdropClasses())}
+        part="backdrop"
         @click=${this.handleBackdropClick}
         style=${d(this.getModalStyles())}>
-        
-        <div 
+
+        <div
           class=${r(this.getModalClasses())}
+          part="panel"
           role="dialog"
           aria-modal="true"
           aria-labelledby=${this.modalTitle?"modal-title":e}
           tabindex="-1">
-          
+
           ${this.renderHeader()}
-          
-          <div class="modal-body">
+
+          <div class="modal-body" part="body">
             <slot></slot>
           </div>
           

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

@@ -308,25 +308,26 @@ let NrModalElement = class NrModalElement extends NuralyUIBaseMixin(LitElement)
             return nothing;
         }
         return html `
-      <div class="modal-header ${this.modalDraggable ? 'modal-header--draggable' : ''}">
+      <div class="modal-header ${this.modalDraggable ? 'modal-header--draggable' : ''}" part="header">
         ${hasCustomHeader ? html `
-          <div class="modal-header-content">
+          <div class="modal-header-content" part="header-content">
             <slot name="header"></slot>
           </div>
         ` : hasTitle ? html `
-          <div class="modal-header-content">
+          <div class="modal-header-content" part="header-content">
             ${this.headerIcon ? html `
-              <nr-icon class="modal-header-icon" name="${this.headerIcon}"></nr-icon>
+              <nr-icon class="modal-header-icon" part="header-icon" name="${this.headerIcon}"></nr-icon>
             ` : nothing}
             ${this.modalTitle ? html `
-              <h2 class="modal-title">${this.modalTitle}</h2>
+              <h2 class="modal-title" part="title">${this.modalTitle}</h2>
             ` : nothing}
           </div>
         ` : nothing}
-        
+
         ${this.showCloseButton ? html `
           <button
             class="modal-close-button"
+            part="close-button"
             @click=${(e) => {
             e.stopPropagation();
             this.open = false;
@@ -350,7 +351,7 @@ let NrModalElement = class NrModalElement extends NuralyUIBaseMixin(LitElement)
             return nothing;
         }
         return html `
-      <div class="modal-footer">
+      <div class="modal-footer" part="footer">
         <slot name="footer"></slot>
       </div>
     `;
@@ -368,21 +369,23 @@ let NrModalElement = class NrModalElement extends NuralyUIBaseMixin(LitElement)
             return nothing;
         }
         return html `
-      <div 
+      <div
         class=${classMap(this.getBackdropClasses())}
+        part="backdrop"
         @click=${this.handleBackdropClick}
         style=${styleMap(this.getModalStyles())}>
-        
-        <div 
+
+        <div
           class=${classMap(this.getModalClasses())}
+          part="panel"
           role="dialog"
           aria-modal="true"
           aria-labelledby=${this.modalTitle ? 'modal-title' : nothing}
           tabindex="-1">
-          
+
           ${this.renderHeader()}
-          
-          <div class="modal-body">
+
+          <div class="modal-body" part="body">
             <slot></slot>
           </div>