@nuralyui/menu 0.0.10 → 0.0.15

package/index.d.ts

@@ -1,2 +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/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/menu/index.ts"],"names":[],"mappings":"AAAA,cAAc,qBAAqB,CAAC","sourcesContent":["export * from './menu.component.js';\n"]}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/menu/index.ts"],"names":[],"mappings":"AAAA,cAAc,qBAAqB,CAAC","sourcesContent":["export * from './menu.component.js';\nexport { MenuSize, IconPosition } from './menu.types.js';\nexport type { IMenu, IAction } from './menu.types.js';\n"]}

package/menu.component.d.ts

@@ -1,19 +1,54 @@
+/**
+ * @license
+ * Copyright 2023 Nuraly, Laabidi Aymen
+ * SPDX-License-Identifier: MIT
+ */
 import { LitElement } from 'lit';
-import { IMenu } from './menu.types.js';
-import './templates/hy-menu-link.js';
-import './templates/hy-sub-menu.js';
-export declare class HyMenuComponent extends LitElement {
-    private _currentSelectedLink;
-    _menuLinks: NodeListOf<HTMLElement>;
-    _subMenues: NodeListOf<HTMLElement>;
+import { IMenu, MenuSize } from './menu.types.js';
+import '../icon/icon.component.js';
+import '../dropdown/dropdown.component.js';
+declare const NrMenuElement_base: (new (...args: any[]) => import("../../shared/dependency-mixin.js").DependencyAware) & (new (...args: any[]) => import("../../shared/theme-mixin.js").ThemeAware) & (new (...args: any[]) => import("../../shared/event-handler-mixin.js").EventHandlerCapable) & typeof LitElement;
+/**
+ * Versatile menu component for hierarchical navigation with support for nested submenus.
+ *
+ * @example
+ * ```html
+ * <nr-menu .items=${menuItems}></nr-menu>
+ * ```
+ *
+ * @fires change - Menu item selected
+ * @fires action-click - Menu action clicked
+ *
+ * @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;
+    private stateController;
+    private keyboardController;
+    private accessibilityController;
+    private _linkIndex;
+    constructor();
     firstUpdated(): void;
-    _getPreSelectedIndex(): void;
-    _updateSelectedLink(updateSelectedLinkEvent: CustomEvent): void;
-    _handleInitHighlighted(): void;
-    _selectMenu(selectMenuEvent: CustomEvent): void;
-    _display(items: IMenu[], path?: number[]): any;
+    updated(): void;
+    private _initializeSelectedState;
+    private _findSelectedPath;
+    private _handleLinkClick;
+    private _handleSubMenuClick;
+    private _toggleSubMenu;
+    private _handleSubMenuMouseEnter;
+    private _handleSubMenuMouseLeave;
+    private _handleActionClick;
+    private _isPathSelected;
+    private _convertActionsToDropdownItems;
+    private _renderMenuLink;
+    private _renderSubMenu;
+    private _renderMenuItems;
     render(): import("lit").TemplateResult<1>;
-    static styles: import("lit").CSSResult[][];
 }
+export {};
 //# sourceMappingURL=menu.component.d.ts.map

package/menu.component.js

@@ -1,3 +1,8 @@
+/**
+ * @license
+ * Copyright 2023 Nuraly, Laabidi Aymen
+ * SPDX-License-Identifier: MIT
+ */
 var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
     var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
     if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
@@ -5,105 +10,283 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
     return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
 /* eslint-disable @typescript-eslint/no-explicit-any */
-import { LitElement, html } from 'lit';
-import { customElement, property, queryAll } from 'lit/decorators.js';
+/* eslint-disable @typescript-eslint/no-unused-vars */
+import { LitElement, html, nothing } from 'lit';
+import { customElement, property } from 'lit/decorators.js';
 import { styles } from './menu.style.js';
-import './templates/hy-menu-link.js';
-import './templates/hy-sub-menu.js';
-let HyMenuComponent = class HyMenuComponent extends LitElement {
+import { NuralyUIBaseMixin } from '../../shared/base-mixin.js';
+import { StateController, KeyboardController, AccessibilityController } from './controllers/index.js';
+import '../icon/icon.component.js';
+import '../dropdown/dropdown.component.js';
+/**
+ * Versatile menu component for hierarchical navigation with support for nested submenus.
+ *
+ * @example
+ * ```html
+ * <nr-menu .items=${menuItems}></nr-menu>
+ * ```
+ *
+ * @fires change - Menu item selected
+ * @fires action-click - Menu action clicked
+ *
+ * @slot - Menu items (auto-generated from items property)
+ */
+let NrMenuElement = class NrMenuElement extends NuralyUIBaseMixin(LitElement) {
+    constructor() {
+        super();
+        this.requiredComponents = ['nr-icon', 'nr-dropdown'];
+        /** Menu items configuration */
+        this.items = [];
+        /** Menu size variant (small, medium, large) */
+        this.size = "medium" /* MenuSize.Medium */;
+        this._linkIndex = 0;
+        this.stateController = new StateController(this);
+        this.keyboardController = new KeyboardController(this, this.stateController);
+        this.accessibilityController = new AccessibilityController(this, this.stateController);
+    }
     firstUpdated() {
-        this._getPreSelectedIndex();
+        this._initializeSelectedState();
+        this.accessibilityController.updateAriaAttributes();
+    }
+    updated() {
+        this.accessibilityController.updateAriaAttributes();
     }
-    _getPreSelectedIndex() {
-        const listOfLinks = [...this._menuLinks.values()];
-        this._currentSelectedLink = listOfLinks.findIndex((element) => element.hasAttribute('selected'));
+    _initializeSelectedState() {
+        this._linkIndex = 0;
+        this._findSelectedPath(this.items);
     }
-    _updateSelectedLink(updateSelectedLinkEvent) {
+    _findSelectedPath(items, path = []) {
+        for (let index = 0; index < items.length; index++) {
+            const item = items[index];
+            const currentPath = [...path, index];
+            if (item.children) {
+                if (this._findSelectedPath(item.children, currentPath)) {
+                    return true;
+                }
+            }
+            else {
+                if (item.selected) {
+                    this.stateController.setSelectedPath(currentPath);
+                    return true;
+                }
+            }
+        }
+        return false;
+    }
+    _handleLinkClick(path, value, event) {
         var _a;
-        this._handleInitHighlighted();
-        const newSelectedIndex = updateSelectedLinkEvent.detail.index;
-        const value = updateSelectedLinkEvent.detail.value;
-        if (this._currentSelectedLink >= 0)
-            this._menuLinks[this._currentSelectedLink].removeAttribute('selected');
-        this._menuLinks[newSelectedIndex].setAttribute('selected', 'true');
-        this._currentSelectedLink = newSelectedIndex;
-        const pathToOption = (_a = this._menuLinks[newSelectedIndex]
-            .getAttribute('data-path')) === null || _a === void 0 ? void 0 : _a.split('-').map((valueString) => +valueString);
+        if ((_a = event === null || event === void 0 ? void 0 : event.target) === null || _a === void 0 ? void 0 : _a.classList.contains('action-icon')) {
+            return;
+        }
+        if ((event === null || event === void 0 ? void 0 : event.type) === 'click') {
+            const mouseEvent = event;
+            if (mouseEvent.detail > 0) {
+                return;
+            }
+        }
+        this.stateController.setSelectedPath(path);
         this.dispatchEvent(new CustomEvent('change', {
             bubbles: true,
             composed: true,
-            detail: { path: pathToOption, value },
+            detail: { path, value },
         }));
+        this.requestUpdate();
     }
-    _handleInitHighlighted() {
-        this._subMenues.forEach((element) => {
-            if (element.hasAttribute('highlighted')) {
-                element.removeAttribute('highlighted');
+    _handleSubMenuClick(path, value, event) {
+        const mouseEvent = event;
+        const target = event.target;
+        // Don't handle if clicking on toggle icon or its parent container
+        if (target.id === 'toggle-icon' || target.closest('#toggle-icon')) {
+            return;
+        }
+        // If it's a click event
+        if (event.type === 'click') {
+            // Check if it's keyboard activation (Enter/Space) - detail will be 0
+            if (mouseEvent.detail === 0) {
+                // Keyboard activation - toggle the submenu
+                this.stateController.toggleSubMenu(path);
+                this.requestUpdate();
+                return;
             }
-        });
-    }
-    _selectMenu(selectMenuEvent) {
-        if (this._currentSelectedLink >= 0) {
-            this._menuLinks[this._currentSelectedLink].removeAttribute('selected');
-            this._currentSelectedLink = -1;
+            // Real mouse click - already handled by mousedown, so return
+            return;
         }
-        this._handleInitHighlighted();
-        this.dispatchEvent(new CustomEvent('change', { bubbles: true, composed: true, detail: { path: selectMenuEvent.detail.path, value: selectMenuEvent.detail.value } }));
+        // This is a mousedown event - highlight and toggle the submenu
+        this.stateController.setSelectedPath([]);
+        this.stateController.clearHighlights();
+        this.stateController.setHighlighted(path, true);
+        // Toggle the submenu when clicking on header
+        this.stateController.toggleSubMenu(path);
+        this.dispatchEvent(new CustomEvent('change', {
+            bubbles: true,
+            composed: true,
+            detail: { path, value },
+        }));
+        this.requestUpdate();
+    }
+    _toggleSubMenu(path, event) {
+        event.stopPropagation();
+        this.stateController.toggleSubMenu(path);
+        this.requestUpdate();
     }
-    _display(items, path = []) {
+    _handleSubMenuMouseEnter(path) {
+        this.stateController.setHovered(path, true);
+        this.requestUpdate();
+    }
+    _handleSubMenuMouseLeave(path) {
+        this.stateController.setHovered(path, false);
+        this.requestUpdate();
+    }
+    _handleActionClick(path, event) {
+        const item = event.detail.item;
+        this.dispatchEvent(new CustomEvent('action-click', {
+            detail: { value: item.value, path, item },
+            composed: true,
+            bubbles: true,
+        }));
+    }
+    _isPathSelected(path) {
+        return this.stateController.isPathSelected(path);
+    }
+    _convertActionsToDropdownItems(actions) {
+        return actions.map(action => ({
+            id: action.value,
+            label: action.label,
+            value: action.value
+        }));
+    }
+    _renderMenuLink(menu, path) {
+        var _a, _b;
+        const pathKey = path.join('-');
+        const isSelected = this._isPathSelected(path);
+        const linkIndex = this._linkIndex++;
+        return html `
+      <li 
+        class="menu-link ${isSelected ? 'selected' : ''} ${menu.disabled ? 'disabled' : ''}"
+        data-path=${pathKey}
+        data-index=${linkIndex}
+        tabindex="0"
+        @mousedown=${!menu.disabled ? (e) => this._handleLinkClick(path, menu.text, e) : nothing}
+        @click=${!menu.disabled ? (e) => this._handleLinkClick(path, menu.text, e) : nothing}>
+        <div class="icon-container">
+          ${menu.icon ? html `
+            ${!menu.text
+            ? html `<div class="icon-only"><nr-icon name="${menu.icon}"></nr-icon></div>`
+            : html `<nr-icon name="${menu.icon}"></nr-icon>`}
+          ` : nothing}
+        </div>
+        ${menu.text ? html `
+          <div class="action-text-container">
+            <div class="text-container">
+              <span>${menu.text}</span>
+            </div>
+            <div class="icon-container">
+              ${((_a = menu.status) === null || _a === void 0 ? void 0 : _a.icon) ? html `
+                <nr-icon name=${menu.status.icon} class="status-icon"></nr-icon>
+              ` : nothing}
+              ${((_b = menu.menu) === null || _b === void 0 ? void 0 : _b.actions) ? html `
+                <nr-dropdown 
+                  .items=${this._convertActionsToDropdownItems(menu.menu.actions)} 
+                  trigger="click" 
+                  placement="bottom-end"
+                  @nr-dropdown-item-click=${(e) => this._handleActionClick(path, e)}>
+                  <nr-icon name="${menu.menu.icon}" class="action-icon" slot="trigger"></nr-icon>
+                </nr-dropdown>
+              ` : nothing}
+            </div>
+          </div>
+        ` : nothing}
+      </li>
+    `;
+    }
+    _renderSubMenu(menu, path) {
+        var _a, _b;
+        const pathKey = path.join('-');
+        const isOpen = this.stateController.isSubMenuOpen(path) || menu.opened;
+        const isHovered = this.stateController.isSubMenuHovered(path);
+        const isHighlighted = this.stateController.isSubMenuHighlighted(path);
+        const isSelected = menu.selected;
+        return html `
+      <ul 
+        class="sub-menu ${isHighlighted ? 'highlighted' : ''} ${menu.disabled ? 'disabled' : ''} ${isSelected ? 'selected' : ''}"
+        data-path=${pathKey}
+        tabindex="0"
+        @mouseenter=${() => this._handleSubMenuMouseEnter(path)}
+        @mouseleave=${() => this._handleSubMenuMouseLeave(path)}
+        @click=${!menu.disabled ? (e) => {
+            // Handle keyboard activation on the ul element
+            const target = e.target;
+            const mouseEvent = e;
+            // If click is on the ul itself (not children) and it's keyboard-generated
+            if (target.classList.contains('sub-menu') && mouseEvent.detail === 0) {
+                e.stopPropagation(); // Prevent bubbling to parent submenus
+                this.stateController.toggleSubMenu(path);
+                this.requestUpdate();
+            }
+        } : nothing}>
+        <div 
+          class="sub-menu-header"
+          @mousedown=${!menu.disabled ? (e) => this._handleSubMenuClick(path, menu.text, e) : nothing}
+          @click=${!menu.disabled ? (e) => this._handleSubMenuClick(path, menu.text, e) : nothing}>
+          ${menu.icon ? html `<nr-icon class="text-icon" name="${menu.icon}"></nr-icon>` : nothing}
+          <span>${menu.text}</span>
+          <div class="icons-container">
+            ${((_a = menu.status) === null || _a === void 0 ? void 0 : _a.icon) ? html `
+              <nr-icon name=${menu.status.icon} class="status-icon"></nr-icon>
+            ` : nothing}
+            ${(isHighlighted || isHovered) && ((_b = menu.menu) === null || _b === void 0 ? void 0 : _b.actions) ? html `
+              <nr-dropdown 
+                .items=${this._convertActionsToDropdownItems(menu.menu.actions)} 
+                trigger="click" 
+                placement="bottom-end"
+                @nr-dropdown-item-click=${(e) => this._handleActionClick(path, e)}>
+                <nr-icon name="${menu.menu.icon}" class="action-icon" slot="trigger"></nr-icon>
+              </nr-dropdown>
+            ` : nothing}
+            ${menu.children && menu.children.length ? html `
+              <nr-icon 
+                id="toggle-icon" 
+                name="${isOpen ? 'angle-up' : 'angle-down'}" 
+                @mousedown=${!menu.disabled ? (e) => this._toggleSubMenu(path, e) : nothing}>
+              </nr-icon>
+            ` : nothing}
+          </div>
+        </div>
+        <div class="sub-menu-children" style="display: ${isOpen ? 'block' : 'none'}">
+          ${menu.children ? this._renderMenuItems(menu.children, path) : nothing}
+        </div>
+      </ul>
+    `;
+    }
+    _renderMenuItems(items, parentPath = []) {
         return items.map((menu, index) => {
-            const currentPath = [...path, index].join('-');
+            const currentPath = [...parentPath, index];
             if (menu.children) {
-                return html `
-          <hy-sub-menu 
-          .menu=${menu} 
-          .text=${menu.text} 
-          .icon=${menu.icon} 
-          .disabled=${menu.disabled} 
-          .status=${menu.status}
-          ?selected=${menu.selected}
-          data-path=${currentPath} 
-          @select-menu=${this._selectMenu}>
-            ${this._display(menu.children, [...path, index])}
-          </hy-sub-menu>
-        `;
+                return this._renderSubMenu(menu, currentPath);
             }
             else {
-                return html ` <hy-menu-link
-          data-path=${currentPath}
-          icon=${menu.icon}
-          .menu=${menu.menu}
-          .status=${menu.status}
-          text=${menu.text}
-          link=${menu.link}
-          iconposition=${menu.iconPosition}
-          ?selected=${menu.selected}
-          ?disabled=${menu.disabled}
-          @selected-link=${this._updateSelectedLink}
-        ></hy-menu-link>`;
+                return this._renderMenuLink(menu, currentPath);
             }
         });
     }
     render() {
+        this._linkIndex = 0;
         return html `
-      <ul>
-        ${this._display(this.items)}
+      <ul class="menu-root menu--${this.size}">
+        ${this._renderMenuItems(this.items)}
       </ul>
     `;
     }
 };
-HyMenuComponent.styles = [styles];
-__decorate([
-    queryAll('hy-menu-link')
-], HyMenuComponent.prototype, "_menuLinks", void 0);
+NrMenuElement.styles = styles;
 __decorate([
-    queryAll('hy-sub-menu')
-], HyMenuComponent.prototype, "_subMenues", void 0);
+    property({ type: Array })
+], NrMenuElement.prototype, "items", void 0);
 __decorate([
-    property()
-], HyMenuComponent.prototype, "items", void 0);
-HyMenuComponent = __decorate([
-    customElement('hy-menu')
-], HyMenuComponent);
-export { HyMenuComponent };
+    property({ type: String })
+], NrMenuElement.prototype, "size", void 0);
+NrMenuElement = __decorate([
+    customElement('nr-menu')
+], NrMenuElement);
+export { NrMenuElement };
 //# sourceMappingURL=menu.component.js.map

package/menu.component.js.map

@@ -1 +1 @@
-{"version":3,"file":"menu.component.js","sourceRoot":"","sources":["../../../src/components/menu/menu.component.ts"],"names":[],"mappings":"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","sourcesContent":["/* eslint-disable @typescript-eslint/no-explicit-any */\nimport {LitElement, html} from 'lit';\nimport {customElement, property, queryAll} from 'lit/decorators.js';\nimport {styles} from './menu.style.js';\nimport {IMenu} from './menu.types.js';\nimport './templates/hy-menu-link.js';\nimport './templates/hy-sub-menu.js';\n@customElement('hy-menu')\nexport class HyMenuComponent extends LitElement {\n  private _currentSelectedLink!: number;\n  @queryAll('hy-menu-link')\n  _menuLinks!: NodeListOf<HTMLElement>;\n\n  @queryAll('hy-sub-menu')\n  _subMenues!: NodeListOf<HTMLElement>;\n\n  @property()\n  items!: IMenu[];\n\n  override firstUpdated(): void {\n    this._getPreSelectedIndex();\n  }\n\n  _getPreSelectedIndex() {\n    const listOfLinks = [...this._menuLinks.values()];\n    this._currentSelectedLink = listOfLinks.findIndex((element) => element.hasAttribute('selected'));\n  }\n\n  _updateSelectedLink(updateSelectedLinkEvent: CustomEvent) {\n    this._handleInitHighlighted();\n    const newSelectedIndex = updateSelectedLinkEvent.detail.index;\n    const value = updateSelectedLinkEvent.detail.value;\n    if (this._currentSelectedLink >= 0) this._menuLinks[this._currentSelectedLink].removeAttribute('selected');\n    this._menuLinks[newSelectedIndex].setAttribute('selected', 'true');\n    this._currentSelectedLink = newSelectedIndex;\n    const pathToOption = this._menuLinks[newSelectedIndex]\n      .getAttribute('data-path')\n      ?.split('-')\n      .map((valueString) => +valueString);\n    this.dispatchEvent(\n      new CustomEvent('change', {\n        bubbles: true,\n        composed: true,\n        detail: {path: pathToOption, value},\n      })\n    );\n  }\n\n  _handleInitHighlighted() {\n    this._subMenues.forEach((element) => {\n      if (element.hasAttribute('highlighted')) {\n        element.removeAttribute('highlighted');\n      }\n    });\n  }\n  _selectMenu(selectMenuEvent:CustomEvent){\n    if (this._currentSelectedLink >= 0) \n    {\n      this._menuLinks[this._currentSelectedLink].removeAttribute('selected');\n      this._currentSelectedLink = -1;\n    }\n\n    this._handleInitHighlighted()\n    this.dispatchEvent(new CustomEvent('change',{bubbles:true,composed:true,detail:{path:selectMenuEvent.detail.path,value:selectMenuEvent.detail.value}}));\n  }\n\n  _display(items: IMenu[], path: number[] = []): any {\n    return items.map((menu, index) => {\n      const currentPath = [...path, index].join('-');\n      if (menu.children) {\n        return html`\n          <hy-sub-menu \n          .menu=${menu} \n          .text=${menu.text} \n          .icon=${menu.icon} \n          .disabled=${menu.disabled} \n          .status=${menu.status}\n          ?selected=${menu.selected}\n          data-path=${currentPath} \n          @select-menu=${this._selectMenu}>\n            ${this._display(menu.children, [...path, index])}\n          </hy-sub-menu>\n        `;\n      } else {\n        return html` <hy-menu-link\n          data-path=${currentPath}\n          icon=${menu.icon}\n          .menu=${menu.menu}\n          .status=${menu.status}\n          text=${menu.text}\n          link=${menu.link}\n          iconposition=${menu.iconPosition}\n          ?selected=${menu.selected}\n          ?disabled=${menu.disabled}\n          @selected-link=${this._updateSelectedLink}\n        ></hy-menu-link>`;\n      }\n    });\n  }\n\n  override render() {\n    return html`\n      <ul>\n        ${this._display(this.items)}\n      </ul>\n    `;\n  }\n\n  static override styles = [styles];\n}\n"]}
+{"version":3,"file":"menu.component.js","sourceRoot":"","sources":["../../../src/components/menu/menu.component.ts"],"names":[],"mappings":"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","sourcesContent":["/**\n * @license\n * Copyright 2023 Nuraly, Laabidi Aymen\n * SPDX-License-Identifier: MIT\n */\n\n/* eslint-disable @typescript-eslint/no-explicit-any */\n/* eslint-disable @typescript-eslint/no-unused-vars */\nimport { LitElement, html, nothing } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\nimport { styles } from './menu.style.js';\nimport { IMenu, IAction, MenuSize } from './menu.types.js';\nimport { NuralyUIBaseMixin } from '../../shared/base-mixin.js';\nimport { StateController, KeyboardController, AccessibilityController } from './controllers/index.js';\nimport '../icon/icon.component.js';\nimport '../dropdown/dropdown.component.js';\n\n/**\n * Versatile menu component for hierarchical navigation with support for nested submenus.\n * \n * @example\n * ```html\n * <nr-menu .items=${menuItems}></nr-menu>\n * ```\n * \n * @fires change - Menu item selected\n * @fires action-click - Menu action clicked\n * \n * @slot - Menu items (auto-generated from items property)\n */\n@customElement('nr-menu')\nexport class NrMenuElement extends NuralyUIBaseMixin(LitElement) {\n  static override styles = styles;\n  \n  override requiredComponents = ['nr-icon', 'nr-dropdown'];\n\n  /** Menu items configuration */\n  @property({ type: Array })\n  items: IMenu[] = [];\n\n  /** Menu size variant (small, medium, large) */\n  @property({ type: String })\n  size: MenuSize | string = MenuSize.Medium;\n\n  // Controllers\n  private stateController: StateController;\n  // Keyboard controller is connected via Lit's controller system and listens to events\n  // @ts-ignore - Controller is used via Lit's reactive controller system\n  private keyboardController: KeyboardController;\n  private accessibilityController: AccessibilityController;\n\n  private _linkIndex = 0;\n\n  constructor() {\n    super();\n    this.stateController = new StateController(this);\n    this.keyboardController = new KeyboardController(this, this.stateController);\n    this.accessibilityController = new AccessibilityController(this, this.stateController);\n  }\n\n  override firstUpdated(): void {\n    this._initializeSelectedState();\n    this.accessibilityController.updateAriaAttributes();\n  }\n\n  override updated(): void {\n    this.accessibilityController.updateAriaAttributes();\n  }\n\n  private _initializeSelectedState() {\n    this._linkIndex = 0;\n    this._findSelectedPath(this.items);\n  }\n\n  private _findSelectedPath(items: IMenu[], path: number[] = []): boolean {\n    for (let index = 0; index < items.length; index++) {\n      const item = items[index];\n      const currentPath = [...path, index];\n      \n      if (item.children) {\n        if (this._findSelectedPath(item.children, currentPath)) {\n          return true;\n        }\n      } else {\n        if (item.selected) {\n          this.stateController.setSelectedPath(currentPath);\n          return true;\n        }\n      }\n    }\n    return false;\n  }\n\n  private _handleLinkClick(path: number[], value: string, event?: Event) {\n    if ((event?.target as HTMLElement)?.classList.contains('action-icon')) {\n      return;\n    }\n\n    if (event?.type === 'click') {\n      const mouseEvent = event as MouseEvent;\n      if (mouseEvent.detail > 0) {\n        return;\n      }\n    }\n\n    this.stateController.setSelectedPath(path);\n    \n    this.dispatchEvent(\n      new CustomEvent('change', {\n        bubbles: true,\n        composed: true,\n        detail: { path, value },\n      })\n    );\n    \n    this.requestUpdate();\n  }\n\n  private _handleSubMenuClick(path: number[], value: string, event: Event) {\n    const mouseEvent = event as MouseEvent;\n    const target = event.target as HTMLElement;\n    \n    // Don't handle if clicking on toggle icon or its parent container\n    if (target.id === 'toggle-icon' || target.closest('#toggle-icon')) {\n      return;\n    }\n    \n    // If it's a click event\n    if (event.type === 'click') {\n      // Check if it's keyboard activation (Enter/Space) - detail will be 0\n      if (mouseEvent.detail === 0) {\n        // Keyboard activation - toggle the submenu\n        this.stateController.toggleSubMenu(path);\n        this.requestUpdate();\n        return;\n      }\n      // Real mouse click - already handled by mousedown, so return\n      return;\n    }\n\n    // This is a mousedown event - highlight and toggle the submenu\n    \n    this.stateController.setSelectedPath([]);\n    this.stateController.clearHighlights();\n    this.stateController.setHighlighted(path, true);\n    \n    // Toggle the submenu when clicking on header\n    this.stateController.toggleSubMenu(path);\n\n    this.dispatchEvent(\n      new CustomEvent('change', {\n        bubbles: true,\n        composed: true,\n        detail: { path, value },\n      })\n    );\n    \n    this.requestUpdate();\n  }\n\n  private _toggleSubMenu(path: number[], event: Event) {\n    event.stopPropagation();\n    this.stateController.toggleSubMenu(path);\n    this.requestUpdate();\n  }\n\n  private _handleSubMenuMouseEnter(path: number[]) {\n    this.stateController.setHovered(path, true);\n    this.requestUpdate();\n  }\n\n  private _handleSubMenuMouseLeave(path: number[]) {\n    this.stateController.setHovered(path, false);\n    this.requestUpdate();\n  }\n\n  private _handleActionClick(path: number[], event: CustomEvent) {\n    const item = event.detail.item;\n    this.dispatchEvent(\n      new CustomEvent('action-click', {\n        detail: { value: item.value, path, item },\n        composed: true,\n        bubbles: true,\n      })\n    );\n  }\n\n  private _isPathSelected(path: number[]): boolean {\n    return this.stateController.isPathSelected(path);\n  }\n\n  private _convertActionsToDropdownItems(actions: IAction[]): any[] {\n    return actions.map(action => ({\n      id: action.value,\n      label: action.label,\n      value: action.value\n    }));\n  }\n\n  private _renderMenuLink(menu: IMenu, path: number[]): any {\n    const pathKey = path.join('-');\n    const isSelected = this._isPathSelected(path);\n    const linkIndex = this._linkIndex++;\n    \n    return html`\n      <li \n        class=\"menu-link ${isSelected ? 'selected' : ''} ${menu.disabled ? 'disabled' : ''}\"\n        data-path=${pathKey}\n        data-index=${linkIndex}\n        tabindex=\"0\"\n        @mousedown=${!menu.disabled ? (e: Event) => this._handleLinkClick(path, menu.text, e) : nothing}\n        @click=${!menu.disabled ? (e: Event) => this._handleLinkClick(path, menu.text, e) : nothing}>\n        <div class=\"icon-container\">\n          ${menu.icon ? html`\n            ${!menu.text \n              ? html`<div class=\"icon-only\"><nr-icon name=\"${menu.icon}\"></nr-icon></div>`\n              : html`<nr-icon name=\"${menu.icon}\"></nr-icon>`}\n          ` : nothing}\n        </div>\n        ${menu.text ? html`\n          <div class=\"action-text-container\">\n            <div class=\"text-container\">\n              <span>${menu.text}</span>\n            </div>\n            <div class=\"icon-container\">\n              ${menu.status?.icon ? html`\n                <nr-icon name=${menu.status.icon} class=\"status-icon\"></nr-icon>\n              ` : nothing}\n              ${menu.menu?.actions ? html`\n                <nr-dropdown \n                  .items=${this._convertActionsToDropdownItems(menu.menu.actions)} \n                  trigger=\"click\" \n                  placement=\"bottom-end\"\n                  @nr-dropdown-item-click=${(e: CustomEvent) => this._handleActionClick(path, e)}>\n                  <nr-icon name=\"${menu.menu.icon}\" class=\"action-icon\" slot=\"trigger\"></nr-icon>\n                </nr-dropdown>\n              ` : nothing}\n            </div>\n          </div>\n        ` : nothing}\n      </li>\n    `;\n  }\n\n  private _renderSubMenu(menu: IMenu, path: number[]): any {\n    const pathKey = path.join('-');\n    const isOpen = this.stateController.isSubMenuOpen(path) || menu.opened;\n    const isHovered = this.stateController.isSubMenuHovered(path);\n    const isHighlighted = this.stateController.isSubMenuHighlighted(path);\n    const isSelected = menu.selected;\n    \n    return html`\n      <ul \n        class=\"sub-menu ${isHighlighted ? 'highlighted' : ''} ${menu.disabled ? 'disabled' : ''} ${isSelected ? 'selected' : ''}\"\n        data-path=${pathKey}\n        tabindex=\"0\"\n        @mouseenter=${() => this._handleSubMenuMouseEnter(path)}\n        @mouseleave=${() => this._handleSubMenuMouseLeave(path)}\n        @click=${!menu.disabled ? (e: Event) => {\n          // Handle keyboard activation on the ul element\n          const target = e.target as HTMLElement;\n          const mouseEvent = e as MouseEvent;\n          // If click is on the ul itself (not children) and it's keyboard-generated\n          if (target.classList.contains('sub-menu') && mouseEvent.detail === 0) {\n            e.stopPropagation(); // Prevent bubbling to parent submenus\n            this.stateController.toggleSubMenu(path);\n            this.requestUpdate();\n          }\n        } : nothing}>\n        <div \n          class=\"sub-menu-header\"\n          @mousedown=${!menu.disabled ? (e: Event) => this._handleSubMenuClick(path, menu.text, e) : nothing}\n          @click=${!menu.disabled ? (e: Event) => this._handleSubMenuClick(path, menu.text, e) : nothing}>\n          ${menu.icon ? html`<nr-icon class=\"text-icon\" name=\"${menu.icon}\"></nr-icon>` : nothing}\n          <span>${menu.text}</span>\n          <div class=\"icons-container\">\n            ${menu.status?.icon ? html`\n              <nr-icon name=${menu.status.icon} class=\"status-icon\"></nr-icon>\n            ` : nothing}\n            ${(isHighlighted || isHovered) && menu.menu?.actions ? html`\n              <nr-dropdown \n                .items=${this._convertActionsToDropdownItems(menu.menu.actions)} \n                trigger=\"click\" \n                placement=\"bottom-end\"\n                @nr-dropdown-item-click=${(e: CustomEvent) => this._handleActionClick(path, e)}>\n                <nr-icon name=\"${menu.menu.icon}\" class=\"action-icon\" slot=\"trigger\"></nr-icon>\n              </nr-dropdown>\n            ` : nothing}\n            ${menu.children && menu.children.length ? html`\n              <nr-icon \n                id=\"toggle-icon\" \n                name=\"${isOpen ? 'angle-up' : 'angle-down'}\" \n                @mousedown=${!menu.disabled ? (e: Event) => this._toggleSubMenu(path, e) : nothing}>\n              </nr-icon>\n            ` : nothing}\n          </div>\n        </div>\n        <div class=\"sub-menu-children\" style=\"display: ${isOpen ? 'block' : 'none'}\">\n          ${menu.children ? this._renderMenuItems(menu.children, path) : nothing}\n        </div>\n      </ul>\n    `;\n  }\n\n  private _renderMenuItems(items: IMenu[], parentPath: number[] = []): any {\n    return items.map((menu, index) => {\n      const currentPath = [...parentPath, index];\n      \n      if (menu.children) {\n        return this._renderSubMenu(menu, currentPath);\n      } else {\n        return this._renderMenuLink(menu, currentPath);\n      }\n    });\n  }\n\n  override render() {\n    this._linkIndex = 0;\n    return html`\n      <ul class=\"menu-root menu--${this.size}\">\n        ${this._renderMenuItems(this.items)}\n      </ul>\n    `;\n  }\n}\n"]}