@nuraly/lumenui 0.1.0

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

@@ -0,0 +1,520 @@
+import{css as e,LitElement as n,html as t,nothing as i}from"lit";import{property as o,state as r,customElement as s}from"lit/decorators.js";import{NuralyUIBaseMixin as l}from"@nuralyui/common/mixins";import{BaseComponentController as a}from"@nuralyui/common/controllers";const u=[e`
+  /* Root menu container */
+  :host {
+    display: block;
+  }
+
+  .menu-root {
+    font-size: var(--nuraly-menu-font-size);
+    font-family: var(--nuraly-menu-font-family);
+    font-weight: var(--nuraly-menu-font-weight);
+    line-height: var(--nuraly-menu-line-height);
+    list-style: none;
+    margin: 0;
+    padding: 0;
+  }
+
+  /* Menu Link Styles */
+  .menu-link {
+    list-style: none;
+    display: flex;
+    align-items: center;
+    cursor: pointer;
+    padding: var(--nuraly-menu-link-padding, 1px);
+    color: var(--nuraly-menu-link-color);
+    background-color: var(--nuraly-menu-link-background-color);
+    border-left: 4px solid transparent;
+    border-top: 2px solid transparent;
+    border-right: 2px solid transparent;
+    border-bottom: 2px solid transparent;
+    border-radius: var(--nuraly-menu-border-radius);
+    margin-bottom: 4px;
+    gap: 8px;
+  }
+
+  .menu-link.disabled {
+    color: var(--nuraly-menu-disabled-link-color);
+    cursor: not-allowed;
+    opacity: 0.6;
+  }
+
+  .menu-link:not(.disabled):not(.selected):hover {
+    background-color: var(--nuraly-menu-hover-link-background-color);
+    color: var(--nuraly-menu-hover-link-color);
+  }
+
+  .menu-link.selected {
+    background-color: var(--nuraly-menu-selected-link-background-color);
+    color: var(--nuraly-menu-selected-color);
+    border-left-color: var(--nuraly-menu-selected-link-border-color, var(--nuraly-menu-selected-color));
+  }
+
+  .menu-link:not(.disabled):not(.selected):focus {
+    outline: none;
+    border-color: var(--nuraly-menu-focus-border-color, var(--nuraly-menu-focus-color));
+    border-left-color: transparent;
+    color: var(--nuraly-menu-focus-color);
+  }
+
+  .menu-link.selected:not(.disabled):focus {
+    outline: none;
+    border-left-color: var(--nuraly-menu-selected-link-border-color, var(--nuraly-menu-selected-color));
+    border-top-color: var(--nuraly-menu-focus-border-color, var(--nuraly-menu-focus-color));
+    border-right-color: var(--nuraly-menu-focus-border-color, var(--nuraly-menu-focus-color));
+    border-bottom-color: var(--nuraly-menu-focus-border-color, var(--nuraly-menu-focus-color));
+    color: var(--nuraly-menu-focus-color);
+  }
+
+  /* Focus-visible for keyboard navigation */
+  .menu-link:not(.disabled):focus-visible {
+    outline: none;
+    border-top-color: var(--nuraly-menu-focus-border-color, var(--nuraly-menu-focus-color));
+    border-right-color: var(--nuraly-menu-focus-border-color, var(--nuraly-menu-focus-color));
+    border-bottom-color: var(--nuraly-menu-focus-border-color, var(--nuraly-menu-focus-color));
+  }
+
+  .menu-link:not(.disabled):not(.selected):focus-visible {
+    border-left-color: var(--nuraly-menu-focus-border-color, var(--nuraly-menu-focus-color));
+    color: var(--nuraly-menu-focus-color);
+  }
+
+  .menu-link.selected:not(.disabled):focus-visible {
+    border-left-color: var(--nuraly-menu-selected-link-border-color, var(--nuraly-menu-selected-color));
+    color: var(--nuraly-menu-focus-color);
+  }
+
+  .menu-link:not(.disabled):not(.selected):active {
+    color: var(--nuraly-menu-active-color);
+    background-color: var(--nuraly-menu-active-background-color);
+  }
+
+  .menu-link.selected:not(.disabled):active {
+    background-color: var(--nuraly-menu-active-background-color);
+    color: var(--nuraly-menu-active-color);
+    border-left-color: var(--nuraly-menu-selected-link-border-color, var(--nuraly-menu-selected-color));
+  }
+
+  .menu-link .action-text-container {
+    width: 100%;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    position: relative;
+  }
+
+  .menu-link .text-container {
+    flex: 1;
+    min-width: 0;
+  }
+
+  .menu-link nr-icon {
+    display: flex;
+    align-items: center;
+    --nuraly-color-icon: var(--nuraly-menu-link-icon-color);
+    --nuraly-icon-size: var(--nuraly-menu-icon-size, 20px);
+    flex-shrink: 0;
+  }
+
+  .menu-link nr-icon:first-child {
+    padding-right: 0;
+    padding-left: 0;
+  }
+
+  .menu-link:not(.disabled):not(.selected):hover nr-icon {
+    --nuraly-color-icon: var(--nuraly-menu-hover-link-icon-color);
+  }
+
+  .menu-link.selected nr-icon {
+    --nuraly-color-icon: var(--nuraly-menu-selected-link-icon-color);
+  }
+
+  /* Sub Menu Styles */
+  .sub-menu {
+    display: flex;
+    flex-direction: column;
+    padding-left: 0;
+    list-style: none;
+    color: var(--nuraly-sub-menu-color);
+    margin-bottom: 4px;
+  }
+
+  .sub-menu.disabled .sub-menu-header {
+    color: var(--nuraly-sub-menu-disabled-color);
+    cursor: not-allowed;
+    opacity: 0.6;
+  }
+
+  .sub-menu.highlighted .sub-menu-header {
+    background-color: var(--nuraly-sub-menu-highlighted-background-color);
+    color: var(--nuraly-sub-menu-highlighted-color);
+  }
+
+  .sub-menu .sub-menu-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    cursor: pointer;
+    padding: var(--nuraly-sub-menu-header-padding, 1px);
+    border-left: 4px solid transparent;
+    border-top: 2px solid transparent;
+    border-right: 2px solid transparent;
+    border-bottom: 2px solid transparent;
+    border-radius: var(--nuraly-menu-border-radius);
+    gap: 8px;
+  }
+
+  .sub-menu .sub-menu-header span {
+    flex: 1;
+    min-width: 0;
+    padding-left: 0;
+  }
+
+  .sub-menu .text-icon {
+    flex-shrink: 0;
+    --nuraly-color-icon: var(--nuraly-sub-menu-text-icon-color);
+    --nuraly-icon-size: var(--nuraly-menu-icon-size, 20px);
+  }
+
+  .sub-menu .icons-container {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    position: relative;
+    flex-shrink: 0;
+    /* Reserve space for dropdown to prevent layout shift */
+    min-width: fit-content;
+    /* Fixed height to prevent vertical shifting */
+    height: 100%;
+    min-height: 20px;
+  }
+
+  .menu-link .icon-container {
+    display: flex;
+    align-items: center;
+    position: relative;
+    flex-shrink: 0;
+    /* Fixed height to prevent vertical shifting */
+    height: 100%;
+    min-height: 20px;
+  }
+
+  .sub-menu nr-dropdown,
+  .menu-link nr-dropdown {
+    /* Keep in normal flow but ensure it doesn't grow/shrink */
+    display: inline-flex;
+    flex-shrink: 0;
+    flex-grow: 0;
+    align-items: center;
+    vertical-align: middle;
+  }
+
+  .sub-menu .action-icon,
+  .menu-link .action-icon {
+    flex-shrink: 0;
+    cursor: pointer;
+  }
+
+  .sub-menu .action-icon {
+    --nuraly-color-icon: var(--nuraly-sub-menu-action-icon-color);
+    --nuraly-icon-size: var(--nuraly-menu-icon-size, 16px);
+  }
+
+  .sub-menu .status-icon {
+    --nuraly-color-icon: var(--nuraly-sub-menu-status-icon-color);
+    --nuraly-icon-size: var(--nuraly-menu-icon-size, 16px);
+  }
+
+  .sub-menu .text-icon {
+    --nuraly-color-icon: var(--nuraly-sub-menu-text-icon-color);
+    --nuraly-icon-size: var(--nuraly-menu-icon-size, 20px);
+  }
+
+  .sub-menu #toggle-icon {
+    --nuraly-color-icon: var(--nuraly-sub-menu-toggle-icon-color);
+    --nuraly-icon-size: var(--nuraly-menu-icon-size, 16px);
+  }
+
+  .sub-menu:not(.disabled):not(.selected) .sub-menu-header:focus {
+    outline: none;
+    border-color: var(--nuraly-sub-menu-focus-border-color, var(--nuraly-sub-menu-focus-color));
+    border-left-color: transparent;
+    color: var(--nuraly-sub-menu-focus-color);
+  }
+
+  .sub-menu.selected:not(.disabled) .sub-menu-header:focus {
+    outline: none;
+    border-left-color: var(--nuraly-menu-selected-link-border-color, var(--nuraly-menu-selected-color));
+    border-top-color: var(--nuraly-sub-menu-focus-border-color, var(--nuraly-sub-menu-focus-color));
+    border-right-color: var(--nuraly-sub-menu-focus-border-color, var(--nuraly-sub-menu-focus-color));
+    border-bottom-color: var(--nuraly-sub-menu-focus-border-color, var(--nuraly-sub-menu-focus-color));
+    color: var(--nuraly-sub-menu-focus-color);
+  }
+
+  /* Focus-visible for keyboard navigation on submenus */
+  .sub-menu:not(.disabled) .sub-menu-header:focus-visible {
+    outline: none;
+    border-top-color: var(--nuraly-sub-menu-focus-border-color, var(--nuraly-sub-menu-focus-color));
+    border-right-color: var(--nuraly-sub-menu-focus-border-color, var(--nuraly-sub-menu-focus-color));
+    border-bottom-color: var(--nuraly-sub-menu-focus-border-color, var(--nuraly-sub-menu-focus-color));
+  }
+
+  .sub-menu:not(.disabled):not(.selected) .sub-menu-header:focus-visible {
+    border-left-color: var(--nuraly-sub-menu-focus-border-color, var(--nuraly-sub-menu-focus-color));
+    color: var(--nuraly-sub-menu-focus-color);
+  }
+
+  .sub-menu.selected:not(.disabled) .sub-menu-header:focus-visible {
+    border-left-color: var(--nuraly-menu-selected-link-border-color, var(--nuraly-menu-selected-color));
+    color: var(--nuraly-sub-menu-focus-color);
+  }
+
+  .sub-menu:not(.disabled) .sub-menu-header:hover {
+    background-color: var(--nuraly-sub-menu-hover-background-color);
+    color: var(--nuraly-sub-menu-hover-color);
+  }
+
+  .sub-menu.selected:not(.disabled) .sub-menu-header {
+    background-color: var(--nuraly-menu-selected-link-background-color);
+    color: var(--nuraly-menu-selected-color);
+    border-left-color: var(--nuraly-menu-selected-link-border-color, var(--nuraly-menu-selected-color));
+  }
+
+  .sub-menu.selected:not(.disabled) .sub-menu-header:active {
+    background-color: var(--nuraly-sub-menu-active-background-color);
+    color: var(--nuraly-sub-menu-active-color);
+    border-left-color: var(--nuraly-menu-selected-link-border-color, var(--nuraly-menu-selected-color));
+  }
+
+  .sub-menu:not(.disabled):not(.selected) .sub-menu-header:active {
+    background-color: var(--nuraly-sub-menu-active-background-color);
+    color: var(--nuraly-sub-menu-active-color);
+  }
+
+  .sub-menu-children {
+    padding-left: var(--nuraly-sub-menu-nested-padding-left);
+  }
+
+  /* Arrow positioning for left arrow */
+  .sub-menu.arrow-left .sub-menu-header {
+    padding-left: var(--nuraly-sub-menu-arrow-left-padding, 8px); /* Add space for left arrow */
+  }
+
+  .sub-menu.arrow-left .sub-menu-header #toggle-icon {
+    margin-right: 8px; /* Space between arrow and text */
+    order: -1; /* Place arrow at the beginning */
+  }
+
+  /* Arrow positioning for right arrow (default) */
+  .sub-menu.arrow-right .sub-menu-header #toggle-icon {
+    margin-left: 8px; /* Space between text and arrow */
+  }
+
+  /* Ensure proper spacing in the header */
+  .sub-menu.arrow-left .sub-menu-header span {
+    padding-left: 0; /* Remove left padding when arrow is on the left */
+  }
+
+  /* Size Variants */
+  .menu--small .menu-link {
+    padding: var(--nuraly-menu-link-padding-small, 1px);
+  }
+
+  .menu--small .sub-menu .sub-menu-header {
+    padding: var(--nuraly-sub-menu-header-padding-small, 1px);
+  }
+
+  .menu--medium .menu-link {
+    padding: var(--nuraly-menu-link-padding-medium, 1px);
+  }
+
+  .menu--medium .sub-menu .sub-menu-header {
+    padding: var(--nuraly-sub-menu-header-padding-medium, 1px);
+  }
+
+  .menu--large .menu-link {
+    padding: var(--nuraly-menu-link-padding-large, 1px);
+  }
+
+  .menu--large .sub-menu .sub-menu-header {
+    padding: var(--nuraly-sub-menu-header-padding-large, 1px);
+  }
+
+  /* Edit input styles */
+  .edit-input {
+    flex: 1;
+    min-width: 0;
+    font-size: inherit;
+    font-family: inherit;
+    font-weight: inherit;
+    line-height: inherit;
+    color: inherit;
+    background-color: var(--nuraly-menu-edit-input-background, transparent);
+    border: none;
+    border-radius: 0;
+    padding: 0;
+    margin: 0;
+    outline: none;
+  }
+
+  .edit-input:focus {
+    outline: none;
+    box-shadow: none;
+  }
+
+  .menu-link.editing,
+  .sub-menu.editing > .sub-menu-header {
+    background-color: var(--nuraly-menu-edit-background, transparent);
+  }
+
+`];
+/**
+ * @license
+ * Copyright 2023 Nuraly, Laabidi Aymen
+ * SPDX-License-Identifier: MIT
+ */
+class c extends a{dispatchMenuEvent(e,n,t={}){try{const i=new CustomEvent(e,Object.assign({detail:n,bubbles:!0,composed:!0,cancelable:!0},t));return this._host.dispatchEvent(i)}catch(e){return this.handleError(e,"dispatchEvent"),!1}}isDisabled(){return!1}getElementByPath(e){var n;return(null===(n=this._host.shadowRoot)||void 0===n?void 0:n.querySelector(`[data-path="${e}"]`))||null}getAllMenuLinks(){var e;return Array.from((null===(e=this._host.shadowRoot)||void 0===e?void 0:e.querySelectorAll(".menu-link, .sub-menu"))||[])}isElementInteractive(e){if(!e)return!1;const n=e.classList.contains("disabled"),t=null!==e.offsetParent;return!n&&t}}
+/**
+ * @license
+ * Copyright 2023 Nuraly, Laabidi Aymen
+ * SPDX-License-Identifier: MIT
+ */class d extends c{constructor(){super(...arguments),this._selectedPath=[],this._openSubMenus=new Set,this._hoveredSubMenus=new Set,this._highlightedSubMenus=new Set}get selectedPath(){return this._selectedPath}set selectedPath(e){this._selectedPath=e}get openSubMenus(){return this._openSubMenus}get hoveredSubMenus(){return this._hoveredSubMenus}get highlightedSubMenus(){return this._highlightedSubMenus}setSelectedPath(e){try{this._selectedPath=e,this.clearHighlights(),this.requestUpdate(),this.dispatchMenuEvent("selection-changed",{path:e,timestamp:Date.now()})}catch(e){this.handleError(e,"setSelectedPath")}}toggleSubMenu(e){try{const n=e.join("-");this._openSubMenus.has(n)?this.closeSubMenu(e):this.openSubMenu(e)}catch(e){this.handleError(e,"toggleSubMenu")}}openSubMenu(e){try{const n=e.join("-");this._openSubMenus.has(n)||(this._openSubMenus.add(n),this.requestUpdate(),this.dispatchMenuEvent("submenu-opened",{path:e,pathKey:n,timestamp:Date.now()}))}catch(e){this.handleError(e,"openSubMenu")}}closeSubMenu(e){try{const n=e.join("-");this._openSubMenus.has(n)&&(this._openSubMenus.delete(n),this.requestUpdate(),this.dispatchMenuEvent("submenu-closed",{path:e,pathKey:n,timestamp:Date.now()}))}catch(e){this.handleError(e,"closeSubMenu")}}closeAllSubMenus(){try{this._openSubMenus.clear(),this.requestUpdate(),this.dispatchMenuEvent("all-submenus-closed",{timestamp:Date.now()})}catch(e){this.handleError(e,"closeAllSubMenus")}}setHovered(e,n){try{const t=e.join("-");n?this._hoveredSubMenus.add(t):this._hoveredSubMenus.delete(t),this.requestUpdate()}catch(e){this.handleError(e,"setHovered")}}setHighlighted(e,n){try{const t=e.join("-");n?this._highlightedSubMenus.add(t):this._highlightedSubMenus.delete(t),this.requestUpdate()}catch(e){this.handleError(e,"setHighlighted")}}clearHighlights(){try{this._highlightedSubMenus.clear(),this.requestUpdate()}catch(e){this.handleError(e,"clearHighlights")}}isPathSelected(e){return e.length===this._selectedPath.length&&e.every((e,n)=>e===this._selectedPath[n])}isSubMenuOpen(e){const n=e.join("-");return this._openSubMenus.has(n)}isSubMenuHovered(e){const n=e.join("-");return this._hoveredSubMenus.has(n)}isSubMenuHighlighted(e){const n=e.join("-");return this._highlightedSubMenus.has(n)}reset(){try{this._selectedPath=[],this._openSubMenus.clear(),this._hoveredSubMenus.clear(),this._highlightedSubMenus.clear(),this.requestUpdate(),this.dispatchMenuEvent("state-reset",{timestamp:Date.now()})}catch(e){this.handleError(e,"reset")}}}
+/**
+ * @license
+ * Copyright 2023 Nuraly, Laabidi Aymen
+ * SPDX-License-Identifier: MIT
+ */class h extends c{constructor(e,n){super(e),this.typeAheadBuffer="",this.typeAheadTimeout=null,this.currentFocusIndex=-1,this.stateController=n}hostConnected(){this.host.addEventListener("keydown",this.handleKeydown.bind(this))}hostDisconnected(){this.host.removeEventListener("keydown",this.handleKeydown.bind(this)),this.typeAheadTimeout&&clearTimeout(this.typeAheadTimeout)}handleKeydown(e){try{const n=e.target;if("INPUT"===n.tagName||"TEXTAREA"===n.tagName||n.isContentEditable)return;const t=e.key;if(["ArrowUp","ArrowDown","ArrowLeft","ArrowRight"].includes(t))return void this.handleArrowNavigation(e);if("Enter"===t||" "===t)return void this.handleActivation(e);if("Escape"===t)return void this.handleEscape(e);if("Home"===t||"End"===t)return void this.handleHomeEnd(e);if(1===t.length&&!e.ctrlKey&&!e.metaKey&&!e.altKey)return void this.handleTypeAhead(e)}catch(e){this.handleError(e,"handleKeydown")}}handleArrowNavigation(e){var n;try{e.preventDefault();const t=this.getAllMenuLinks(),i=null===(n=this.host.shadowRoot)||void 0===n?void 0:n.activeElement,o=t.indexOf(i);switch(e.key){case"ArrowDown":this.navigateDown(t,o);break;case"ArrowUp":this.navigateUp(t,o);break;case"ArrowRight":this.expandOrNavigate(i);break;case"ArrowLeft":this.collapseOrNavigate(i)}this.dispatchMenuEvent("keyboard-navigation",{key:e.key,currentIndex:o,timestamp:Date.now()})}catch(e){this.handleError(e,"handleArrowNavigation")}}navigateDown(e,n){let t=n+1;for(;t<e.length;){const n=e[t];if(this.isElementInteractive(n))return n.focus(),void(this.currentFocusIndex=t);t++}if(n>=0)for(let n=0;n<e.length;n++)if(this.isElementInteractive(e[n]))return e[n].focus(),void(this.currentFocusIndex=n)}navigateUp(e,n){let t=n-1;for(;t>=0;){const n=e[t];if(this.isElementInteractive(n))return n.focus(),void(this.currentFocusIndex=t);t--}if(n>=0)for(let n=e.length-1;n>=0;n--)if(this.isElementInteractive(e[n]))return e[n].focus(),void(this.currentFocusIndex=n)}expandOrNavigate(e){if(e&&e.classList.contains("sub-menu")){const n=e.getAttribute("data-path");if(n){const e=n.split("-").map(Number);this.stateController.openSubMenu(e)}}}collapseOrNavigate(e){if(e&&e.classList.contains("sub-menu")){const n=e.getAttribute("data-path");if(n){const e=n.split("-").map(Number);this.stateController.closeSubMenu(e)}}}handleActivation(e){var n;try{e.preventDefault();const t=null===(n=this.host.shadowRoot)||void 0===n?void 0:n.activeElement;if(!t||!this.isElementInteractive(t))return;t.click(),this.dispatchMenuEvent("keyboard-activation",{key:e.key,element:t,timestamp:Date.now()})}catch(e){this.handleError(e,"handleActivation")}}handleEscape(e){try{e.preventDefault(),this.stateController.closeAllSubMenus(),this.dispatchMenuEvent("keyboard-escape",{timestamp:Date.now()})}catch(e){this.handleError(e,"handleEscape")}}handleHomeEnd(e){try{e.preventDefault();const n=this.getAllMenuLinks(),t=n.filter(e=>this.isElementInteractive(e));if(0===t.length)return;if("Home"===e.key)t[0].focus(),this.currentFocusIndex=n.indexOf(t[0]);else{const e=t[t.length-1];e.focus(),this.currentFocusIndex=n.indexOf(e)}this.dispatchMenuEvent("keyboard-home-end",{key:e.key,timestamp:Date.now()})}catch(e){this.handleError(e,"handleHomeEnd")}}handleTypeAhead(e){try{e.preventDefault(),this.typeAheadTimeout&&clearTimeout(this.typeAheadTimeout),this.typeAheadBuffer+=e.key.toLowerCase(),this.typeAheadTimeout=window.setTimeout(()=>{this.typeAheadBuffer="",this.typeAheadTimeout=null},500);const n=this.getAllMenuLinks(),t=this.currentFocusIndex>=0?this.currentFocusIndex:-1;for(let e=t+1;e<n.length;e++)if(this.matchesTypeAhead(n[e]))return n[e].focus(),void(this.currentFocusIndex=e);for(let e=0;e<=t;e++)if(this.matchesTypeAhead(n[e]))return n[e].focus(),void(this.currentFocusIndex=e);this.dispatchMenuEvent("keyboard-typeahead",{buffer:this.typeAheadBuffer,timestamp:Date.now()})}catch(e){this.handleError(e,"handleTypeAhead")}}matchesTypeAhead(e){var n;if(!this.isElementInteractive(e))return!1;return((null===(n=e.textContent)||void 0===n?void 0:n.trim().toLowerCase())||"").startsWith(this.typeAheadBuffer)}resetTypeAhead(){this.typeAheadBuffer="",this.typeAheadTimeout&&(clearTimeout(this.typeAheadTimeout),this.typeAheadTimeout=null)}}
+/**
+ * @license
+ * Copyright 2023 Nuraly, Laabidi Aymen
+ * SPDX-License-Identifier: MIT
+ */class m extends c{constructor(e,n){super(e),this.announcementElement=null,this.stateController=n}hostConnected(){this.createAnnouncementElement(),this.updateAriaAttributes()}hostDisconnected(){this.removeAnnouncementElement()}createAnnouncementElement(){this.announcementElement||(this.announcementElement=document.createElement("div"),this.announcementElement.setAttribute("role","status"),this.announcementElement.setAttribute("aria-live","polite"),this.announcementElement.setAttribute("aria-atomic","true"),this.announcementElement.style.position="absolute",this.announcementElement.style.left="-10000px",this.announcementElement.style.width="1px",this.announcementElement.style.height="1px",this.announcementElement.style.overflow="hidden",document.body.appendChild(this.announcementElement))}removeAnnouncementElement(){this.announcementElement&&this.announcementElement.parentNode&&(this.announcementElement.parentNode.removeChild(this.announcementElement),this.announcementElement=null)}updateAriaAttributes(){try{this.updateMenuRoot(),this.updateAllMenuItems(),this.updateAllSubMenus()}catch(e){this.handleError(e,"updateAriaAttributes")}}updateMenuRoot(){var e;const n=null===(e=this.host.shadowRoot)||void 0===e?void 0:e.querySelector(".menu-root");n&&(n.setAttribute("role","menu"),n.setAttribute("aria-label","Main menu"))}updateAllMenuItems(){var e;const n=null===(e=this.host.shadowRoot)||void 0===e?void 0:e.querySelectorAll(".menu-link");null==n||n.forEach(e=>{e.setAttribute("role","menuitem"),e.setAttribute("tabindex","0");const n=e.getAttribute("data-path");if(n){const t=n.split("-").map(Number),i=this.stateController.isPathSelected(t);this.setAriaSelected(e,i)}e.classList.contains("disabled")&&e.setAttribute("aria-disabled","true")})}updateAllSubMenus(){var e;const n=null===(e=this.host.shadowRoot)||void 0===e?void 0:e.querySelectorAll(".sub-menu");null==n||n.forEach(e=>{e.setAttribute("role","menuitem"),e.setAttribute("tabindex","0");const n=e.getAttribute("data-path");if(n){const t=n.split("-").map(Number),i=this.stateController.isSubMenuOpen(t),o=e.querySelector(".sub-menu-header");o&&(o.setAttribute("aria-haspopup","true"),this.setAriaExpanded(o,i))}e.classList.contains("disabled")&&e.setAttribute("aria-disabled","true")})}setAriaExpanded(e,n){try{e.setAttribute("aria-expanded",n.toString())}catch(e){this.handleError(e,"setAriaExpanded")}}setAriaSelected(e,n){try{n?(e.setAttribute("aria-selected","true"),e.setAttribute("aria-current","page")):(e.removeAttribute("aria-selected"),e.removeAttribute("aria-current"))}catch(e){this.handleError(e,"setAriaSelected")}}manageFocus(e){try{this.isElementInteractive(e)&&(e.focus(),e.scrollIntoView({behavior:"smooth",block:"nearest",inline:"nearest"}))}catch(e){this.handleError(e,"manageFocus")}}announceToScreenReader(e){try{this.announcementElement&&(this.announcementElement.textContent="",setTimeout(()=>{this.announcementElement&&(this.announcementElement.textContent=e)},100))}catch(e){this.handleError(e,"announceToScreenReader")}}announceSelection(e,n){const t=`Selected ${e}, level ${n.length}`;this.announceToScreenReader(t)}announceSubMenuToggle(e,n){const t=`${e} submenu ${n?"expanded":"collapsed"}`;this.announceToScreenReader(t)}focusFirstItem(){const e=this.getAllMenuLinks().find(e=>this.isElementInteractive(e));e&&this.manageFocus(e)}focusLastItem(){const e=this.getAllMenuLinks().filter(e=>this.isElementInteractive(e)),n=e[e.length-1];n&&this.manageFocus(n)}}
+/**
+ * @license
+ * Copyright 2023 Nuraly, Laabidi Aymen
+ * SPDX-License-Identifier: MIT
+ */var b=function(e,n,t,i){for(var o,r=arguments.length,s=r<3?n:null===i?i=Object.getOwnPropertyDescriptor(n,t):i,l=e.length-1;l>=0;l--)(o=e[l])&&(s=(r<3?o(s):r>3?o(n,t,s):o(n,t))||s);return r>3&&s&&Object.defineProperty(n,t,s),s};let v=class extends(l(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 d(this),this.keyboardController=new h(this,this.stateController),this.accessibilityController=new m(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,n){for(let t=0;t<e.length;t++){const i=e[t],o=[...n,t];i.children&&(i.opened&&this.stateController.openSubMenu(o),this._openSubMenusFromItems(i.children,o))}}_initializeSelectedState(){this._linkIndex=0,this._findSelectedPath(this.items)}_findSelectedPath(e,n=[]){for(let t=0;t<e.length;t++){const i=e[t],o=[...n,t];if(i.children){if(this._findSelectedPath(i.children,o))return!0}else if(i.selected)return this.stateController.setSelectedPath(o),!0}return!1}_handleLinkClick(e,n,t,i){var o;if(null===(o=null==i?void 0:i.target)||void 0===o?void 0:o.classList.contains("action-icon"))return;if("click"===(null==i?void 0:i.type)){if(i.detail>0)return}const r=e.join("-");if(t&&"mousedown"===(null==i?void 0:i.type))return this._pendingClickTimeout&&clearTimeout(this._pendingClickTimeout),this._pendingClickPath=r,void(this._pendingClickTimeout=setTimeout(()=>{this._pendingClickPath===r&&(this._executeClick(e,n),this._pendingClickPath=null)},200));this._executeClick(e,n)}_executeClick(e,n){this.stateController.setSelectedPath(e),this.dispatchEvent(new CustomEvent("change",{bubbles:!0,composed:!0,detail:{path:e,value:n}})),this.requestUpdate()}_handleSubMenuClick(e,n,t,i){const o=i,r=i.target;if("toggle-icon"===r.id||r.closest("#toggle-icon"))return;if("click"===i.type)return 0===o.detail?(this.stateController.toggleSubMenu(e),void this.requestUpdate()):void 0;const s=e.join("-");if(t)return this._pendingClickTimeout&&clearTimeout(this._pendingClickTimeout),this._pendingClickPath=s,void(this._pendingClickTimeout=setTimeout(()=>{this._pendingClickPath===s&&(this._executeSubMenuClick(e,n),this._pendingClickPath=null)},200));this._executeSubMenuClick(e,n)}_executeSubMenuClick(e,n){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:n}})),this.requestUpdate()}_toggleSubMenu(e,n){n.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,n){const t=n.detail.item,i=n.detail.originalEvent,o=n.detail.dropdown;this.dispatchEvent(new CustomEvent("action-click",{detail:{value:t.value,path:e,item:t,originalEvent:i,close:()=>{o&&("function"==typeof o.hide?o.hide():"function"==typeof o.close&&o.close())}},composed:!0,bubbles:!0}))}_handleContextMenu(e,n,t){var i,o;(null===(o=null===(i=n.menu)||void 0===i?void 0:i.actions)||void 0===o?void 0:o.length)&&(t.preventDefault(),t.stopPropagation(),this._contextMenuState={path:e,x:t.clientX,y:t.clientY,actions:n.menu.actions},this.requestUpdate(),this.updateComplete.then(()=>{var e;const n=null===(e=this.shadowRoot)||void 0===e?void 0:e.querySelector("#context-menu-dropdown");n&&"function"==typeof n.show&&n.show()}))}_handleContextMenuAction(e,n){const t=n.detail.item,i=n.detail.originalEvent,o=n.detail.dropdown,r=()=>{this._contextMenuState=null,o&&("function"==typeof o.hide?o.hide():"function"==typeof o.close&&o.close()),this.requestUpdate()};this.dispatchEvent(new CustomEvent("action-click",{detail:{value:t.value,path:e,item:t,originalEvent:i,close:r},composed:!0,bubbles:!0})),r()}_handleContextMenuClose(){this._contextMenuState=null,this.requestUpdate()}_handleDoubleClick(e,n,t){if(n.disabled)return;t.preventDefault(),t.stopPropagation(),this._pendingClickTimeout&&(clearTimeout(this._pendingClickTimeout),this._pendingClickTimeout=null,this._pendingClickPath=null);const i=e.join("-");this._editingPath=i,this._editingValue=n.text,this.requestUpdate(),this.updateComplete.then(()=>{var e;const n=null===(e=this.shadowRoot)||void 0===e?void 0:e.querySelector(`input[data-edit-path="${i}"]`);n&&(n.focus(),n.select())})}_handleEditInput(e){e.stopPropagation();const n=e.target;this._editingValue=n.value}_handleEditKeyDown(e,n,t){if(t.stopPropagation(),console.log("Edit keydown:",t.key,"editingValue:",this._editingValue),"Enter"===t.key){t.preventDefault();const i=t.target;this._editingValue=i.value,console.log("Saving with value:",this._editingValue),this._saveEdit(e,n)}else"Escape"===t.key&&(t.preventDefault(),this._cancelEdit())}_handleEditBlur(e,n,t){var i;const o=t.relatedTarget;o&&(null===(i=this.shadowRoot)||void 0===i?void 0:i.contains(o))||setTimeout(()=>{this._editingPath===e.join("-")&&this._saveEdit(e,n)},200)}_saveEdit(e,n){const t=this._editingValue.trim();if(console.log("_saveEdit called:",{newValue:t,originalText:n,willEmit:t&&t!==n}),t&&t!==n){const i={path:e,oldValue:n,newValue:t};this.onLabelEdit&&(console.log("Calling onLabelEdit callback"),this.onLabelEdit(i)),console.log("Dispatching label-edit event from:",this.tagName);const o=new CustomEvent("label-edit",{bubbles:!0,composed:!0,detail:i});this.dispatchEvent(o)}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 o,r,s;const l=n.join("-"),a=this._isPathSelected(n),u=this._isEditing(n),c=this._linkIndex++;return t`
+      <li
+        class="menu-link ${a?"selected":""} ${e.disabled?"disabled":""} ${u?"editing":""}"
+        data-path=${l}
+        data-index=${c}
+        tabindex=${u?-1:0}
+        @mousedown=${e.disabled||u?i:t=>this._handleLinkClick(n,e.text,!!e.editable,t)}
+        @click=${e.disabled||u?i:t=>this._handleLinkClick(n,e.text,!!e.editable,t)}
+        @dblclick=${e.disabled?i:t=>this._handleDoubleClick(n,e,t)}
+        @contextmenu=${!e.disabled&&(null===(o=e.menu)||void 0===o?void 0:o.actions)?t=>this._handleContextMenu(n,e,t):i}>
+        <div class="icon-container">
+          ${e.icon?t`
+            ${e.text?t`<nr-icon name="${e.icon}" size="small"></nr-icon>`:t`<div class="icon-only"><nr-icon name="${e.icon}"></nr-icon></div>`}
+          `:i}
+        </div>
+        ${e.text?t`
+          <div class="action-text-container">
+            <div class="text-container" @dblclick=${e.disabled?i:t=>this._handleDoubleClick(n,e,t)}>
+              ${u?t`
+                <input
+                  type="text"
+                  class="edit-input"
+                  data-edit-path=${l}
+                  .value=${this._editingValue}
+                  @input=${this._handleEditInput}
+                  @keydown=${t=>this._handleEditKeyDown(n,e.text,t)}
+                  @blur=${t=>this._handleEditBlur(n,e.text,t)}
+                />
+              `:t`<span>${e.text}</span>`}
+            </div>
+            <div class="icon-container">
+              ${(null===(r=e.status)||void 0===r?void 0:r.icon)?t`
+                <nr-icon name=${e.status.icon} class="status-icon"  size="small"></nr-icon>
+              `:i}
+              ${(null===(s=e.menu)||void 0===s?void 0:s.actions)?t`
+                <nr-dropdown
+                  .items=${this._convertActionsToDropdownItems(e.menu.actions)}
+                  trigger="click"
+                  placement="bottom-end"
+                  @nr-dropdown-item-click=${e=>this._handleActionClick(n,e)}>
+                  <nr-icon name="${e.menu.icon}" class="action-icon" slot="trigger"  size="small"></nr-icon>
+                </nr-dropdown>
+              `:i}
+            </div>
+          </div>
+        `:i}
+      </li>
+    `}_renderSubMenu(e,n){var o,r,s;const l=n.join("-"),a=this.stateController.isSubMenuOpen(n)||e.opened,u=this.stateController.isSubMenuHovered(n),c=this.stateController.isSubMenuHighlighted(n),d=e.selected,h=this._isEditing(n),m=e.iconPosition||this.arrowPosition,b="left"===m||"left"===m;return t`
+      <ul
+        class="sub-menu ${c?"highlighted":""} ${e.disabled?"disabled":""} ${d?"selected":""} ${b?"arrow-left":"arrow-right"} ${h?"editing":""}"
+        data-path=${l}
+        tabindex=${h?-1:0}
+        @mouseenter=${()=>this._handleSubMenuMouseEnter(n)}
+        @mouseleave=${()=>this._handleSubMenuMouseLeave(n)}
+        @click=${e.disabled||h?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"
+          @mousedown=${e.disabled||h?i:t=>this._handleSubMenuClick(n,e.text,!!e.editable,t)}
+          @click=${e.disabled||h?i:t=>this._handleSubMenuClick(n,e.text,!!e.editable,t)}
+          @dblclick=${!e.disabled&&e.editable?t=>this._handleDoubleClick(n,e,t):i}
+          @contextmenu=${!e.disabled&&(null===(o=e.menu)||void 0===o?void 0:o.actions)?t=>this._handleContextMenu(n,e,t):i}>
+          ${b&&e.children&&e.children.length?t`
+            <nr-icon
+              id="toggle-icon"
+              name="${a?"ChevronDown":"ChevronRight"}"
+              @mousedown=${e.disabled?i:e=>this._toggleSubMenu(n,e)}
+              size="small">
+            </nr-icon>
+          `:i}
+          ${e.icon?t`<nr-icon class="text-icon" name="${e.icon}" size="small"></nr-icon>`:i}
+          ${h?t`
+            <input
+              type="text"
+              class="edit-input"
+              data-edit-path=${l}
+              .value=${this._editingValue}
+              @input=${this._handleEditInput}
+              @keydown=${t=>this._handleEditKeyDown(n,e.text,t)}
+              @blur=${t=>this._handleEditBlur(n,e.text,t)}
+            />
+          `:t`<span class="menu-text" @dblclick=${e.disabled?i:t=>this._handleDoubleClick(n,e,t)}>${e.text}</span>`}
+          <div class="icons-container">
+            ${(null===(r=e.status)||void 0===r?void 0:r.icon)?t`
+              <nr-icon name=${e.status.icon} class="status-icon" size="small"></nr-icon>
+            `:i}
+            ${(c||u)&&(null===(s=e.menu)||void 0===s?void 0:s.actions)?t`
+              <nr-dropdown
+                .items=${this._convertActionsToDropdownItems(e.menu.actions)}
+                trigger="click"
+                placement="bottom-end"
+                @nr-dropdown-item-click=${e=>this._handleActionClick(n,e)}>
+                <nr-icon name="${e.menu.icon}" class="action-icon" slot="trigger" size="small"></nr-icon>
+              </nr-dropdown>
+            `:i}
+            ${!b&&e.children&&e.children.length?t`
+              <nr-icon
+                id="toggle-icon"
+                name="${a?"ChevronDown":"ChevronRight"}"
+                @mousedown=${e.disabled?i:e=>this._toggleSubMenu(n,e)}
+                size="small">
+              </nr-icon>
+            `:i}
+          </div>
+        </div>
+        <div class="sub-menu-children" style="display: ${a?"block":"none"}">
+          ${e.children?this._renderMenuItems(e.children,n):i}
+        </div>
+      </ul>
+    `}_renderMenuItems(e,n=[]){return e.map((e,t)=>{const i=[...n,t];return e.children?this._renderSubMenu(e,i):this._renderMenuLink(e,i)})}_renderContextMenu(){if(!this._contextMenuState)return i;const{x:e,y:n,actions:o,path:r}=this._contextMenuState;return t`
+      <nr-dropdown
+        id="context-menu-dropdown"
+        .items=${this._convertActionsToDropdownItems(o)}
+        trigger="manual"
+        placement="bottom-start"
+        style="position: fixed; top: ${n}px; left: ${e}px; z-index: 9999;"
+        @nr-dropdown-item-click=${e=>this._handleContextMenuAction(r,e)}
+        @nr-dropdown-close=${()=>this._handleContextMenuClose()}
+      >
+        <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}">
+        ${this._renderMenuItems(this.items)}
+      </ul>
+      ${this._renderContextMenu()}
+    `}};v.styles=u,b([o({type:Array})],v.prototype,"items",void 0),b([o({type:String})],v.prototype,"size",void 0),b([o({type:String})],v.prototype,"arrowPosition",void 0),b([o({type:Object,attribute:!1})],v.prototype,"onLabelEdit",void 0),b([r()],v.prototype,"_contextMenuState",void 0),b([r()],v.prototype,"_editingPath",void 0),b([r()],v.prototype,"_editingValue",void 0),v=b([s("nr-menu")],v);export{v as NrMenuElement};

package/dist/src/components/menu/index.d.ts

@@ -0,0 +1,4 @@
+export * from './menu.component.js';
+export { MenuSize, IconPosition } from './menu.types.js';
+export type { IMenu, IAction } from './menu.types.js';
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1,2 @@
+export * from './menu.component.js';
+//# sourceMappingURL=index.js.map

package/dist/src/components/menu/menu.component.d.ts

@@ -0,0 +1,87 @@
+/**
+ * @license
+ * Copyright 2023 Nuraly, Laabidi Aymen
+ * SPDX-License-Identifier: MIT
+ */
+import { LitElement } from 'lit';
+import { IMenu, MenuSize, IconPosition } from './menu.types.js';
+declare const NrMenuElement_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;
+/**
+ * Versatile menu component for hierarchical navigation with support for nested submenus.
+ *
+ * @example
+ * ```html
+ * <nr-menu .items=${menuItems}></nr-menu>
+ * <nr-menu .items=${menuItems} arrowPosition="left"></nr-menu>
+ * ```
+ *
+ * @fires change - Menu item selected
+ * @fires action-click - Menu action clicked
+ * @fires label-edit - Menu item label edited (detail: { path, oldValue, newValue })
+ *
+ * @slot - Menu items (auto-generated from items property)
+ */
+export declare class NrMenuElement extends NrMenuElement_base {
+    static styles: import("lit").CSSResult[];
+    requiredComponents: string[];
+    /** Menu items configuration */
+    items: IMenu[];
+    /** Menu size variant (small, medium, large) */
+    size: MenuSize | string;
+    /** Default arrow icon position for submenus (left or right) */
+    arrowPosition: IconPosition | string;
+    /** Callback for label edit events (alternative to event listener) */
+    onLabelEdit?: (detail: {
+        path: number[];
+        oldValue: string;
+        newValue: string;
+    }) => void;
+    /** Track context menu state */
+    private _contextMenuState;
+    /** Track which menu item is currently being edited (path as string for comparison) */
+    private _editingPath;
+    /** Temporary value while editing */
+    private _editingValue;
+    /** Pending click timeout for double-click detection */
+    private _pendingClickTimeout;
+    /** Path of pending click */
+    private _pendingClickPath;
+    private stateController;
+    private keyboardController;
+    private accessibilityController;
+    private _linkIndex;
+    constructor();
+    firstUpdated(): void;
+    updated(changedProperties: Map<string, unknown>): void;
+    private _initializeOpenedState;
+    private _openSubMenusFromItems;
+    private _initializeSelectedState;
+    private _findSelectedPath;
+    private _handleLinkClick;
+    private _executeClick;
+    private _handleSubMenuClick;
+    private _executeSubMenuClick;
+    private _toggleSubMenu;
+    private _handleSubMenuMouseEnter;
+    private _handleSubMenuMouseLeave;
+    private _handleActionClick;
+    private _handleContextMenu;
+    private _handleContextMenuAction;
+    private _handleContextMenuClose;
+    private _handleDoubleClick;
+    private _handleEditInput;
+    private _handleEditKeyDown;
+    private _handleEditBlur;
+    private _saveEdit;
+    private _cancelEdit;
+    private _isEditing;
+    private _isPathSelected;
+    private _convertActionsToDropdownItems;
+    private _renderMenuLink;
+    private _renderSubMenu;
+    private _renderMenuItems;
+    private _renderContextMenu;
+    render(): import("lit-html").TemplateResult<1>;
+}
+export {};
+//# sourceMappingURL=menu.component.d.ts.map