@neural-ui/core 1.2.0 → 1.3.0

package/fesm2022/neural-ui-core-nav.mjs

@@ -0,0 +1,952 @@
+import * as i0 from '@angular/core';
+import { inject, input, output, signal, effect, afterNextRender, DestroyRef, ChangeDetectionStrategy, ViewEncapsulation, Component } from '@angular/core';
+import { Router, NavigationEnd, RouterLink, RouterLinkActive } from '@angular/router';
+import { filter } from 'rxjs';
+import { toSignal } from '@angular/core/rxjs-interop';
+import { NeuIconComponent } from '@neural-ui/core/icon';
+import { NeuTooltipDirective } from '@neural-ui/core/tooltip';
+
+class NeuNavComponent {
+    router = inject(Router);
+    // ---- Señal reactiva de ruta activa / Reactive active route signal ----
+    currentUrl = toSignal(this.router.events.pipe(filter((e) => e instanceof NavigationEnd)), { initialValue: null });
+    // ---- Inputs ----
+    /** Lista de ítems de navegación / Navigation item list */
+    items = input([], ...(ngDevMode ? [{ debugName: "items" }] : /* istanbul ignore next */ []));
+    /** Estado inicial colapsado / Initial collapsed state */
+    collapsed = input(false, ...(ngDevMode ? [{ debugName: "collapsed" }] : /* istanbul ignore next */ []));
+    /** Muestra el botón de colapsar/expandir / Shows the collapse/expand button */
+    collapsible = input(true, ...(ngDevMode ? [{ debugName: "collapsible" }] : /* istanbul ignore next */ []));
+    /** Etiqueta accesible del <nav> / Accessible label for the <nav> */
+    ariaLabel = input('Navegación principal', ...(ngDevMode ? [{ debugName: "ariaLabel" }] : /* istanbul ignore next */ []));
+    /** Aria-label del botón cuando el nav está colapsado / Aria-label for the button when the nav is collapsed */
+    expandLabel = input('Expandir menú', ...(ngDevMode ? [{ debugName: "expandLabel" }] : /* istanbul ignore next */ []));
+    /** Aria-label del botón cuando el nav está expandido / Aria-label for the button when the nav is expanded */
+    collapseLabel = input('Colapsar menú', ...(ngDevMode ? [{ debugName: "collapseLabel" }] : /* istanbul ignore next */ []));
+    /** Emite cuando cambia el estado colapsado / Emits when the collapsed state changes */
+    collapsedChange = output();
+    // ---- Estado interno / Internal state ----
+    // Sigue el input `collapsed` del padre (permite el configurador)
+    // pero puede ser sobreescrito localmente con toggleCollapse()
+    isCollapsed = signal(this.collapsed(), ...(ngDevMode ? [{ debugName: "isCollapsed" }] : /* istanbul ignore next */ []));
+    openGroups = signal(new Set(), ...(ngDevMode ? [{ debugName: "openGroups" }] : /* istanbul ignore next */ []));
+    // ---- Flyout para modo colapsado / Flyout for collapsed mode ----
+    flyoutState = signal(null, ...(ngDevMode ? [{ debugName: "flyoutState" }] : /* istanbul ignore next */ []));
+    _flyoutTimer = null;
+    constructor() {
+        // Sincroniza isCollapsed cuando el input cambia desde el padre
+        effect(() => this.isCollapsed.set(this.collapsed()), { allowSignalWrites: true });
+        // Abrimos el grupo activo DESPUÉS de que el padre haya pasado los inputs
+        afterNextRender(() => this._openActiveGroup());
+        // Limpiamos el timer del flyout al destruir el componente
+        inject(DestroyRef).onDestroy(() => {
+            if (this._flyoutTimer)
+                clearTimeout(this._flyoutTimer);
+        });
+    }
+    // ---- Helpers de estado / State helpers ----
+    toggleCollapse() {
+        this.isCollapsed.update((v) => {
+            const next = !v;
+            this.collapsedChange.emit(next);
+            return next;
+        });
+    }
+    toggleGroup(id) {
+        this.openGroups.update((s) => {
+            const next = new Set(s);
+            if (next.has(id))
+                next.delete(id);
+            else
+                next.add(id);
+            return next;
+        });
+    }
+    isGroupOpen(id) {
+        return this.openGroups().has(id);
+    }
+    isCurrentRoute(route) {
+        if (!route)
+            return false;
+        // Consume la señal para que OnPush re-evalúe tras navegación
+        this.currentUrl();
+        return this.router.url === route || this.router.url.startsWith(route + '?');
+    }
+    isGroupActive(item) {
+        if (!item.children?.length)
+            return false;
+        return item.children.some((c) => this.isCurrentRoute(c.route ?? '') ||
+            (c.children?.some((g) => this.isCurrentRoute(g.route ?? '')) ?? false));
+    }
+    // ---- Flyout handlers ----
+    onGroupMouseEnter(item, event) {
+        if (!this.isCollapsed() || !item.children?.length)
+            return;
+        if (this._flyoutTimer) {
+            clearTimeout(this._flyoutTimer);
+            this._flyoutTimer = null;
+        }
+        const rect = event.currentTarget.getBoundingClientRect();
+        this.flyoutState.set({ item, top: rect.top, left: rect.right });
+    }
+    onGroupMouseLeave() {
+        if (!this.isCollapsed())
+            return;
+        this._flyoutTimer = setTimeout(() => this.flyoutState.set(null), 150);
+    }
+    onFlyoutMouseEnter() {
+        if (this._flyoutTimer) {
+            clearTimeout(this._flyoutTimer);
+            this._flyoutTimer = null;
+        }
+    }
+    onFlyoutMouseLeave() {
+        this._flyoutTimer = setTimeout(() => this.flyoutState.set(null), 150);
+    }
+    _openActiveGroup() {
+        const toOpen = new Set();
+        for (const item of this.items()) {
+            if (!item.children)
+                continue;
+            for (const child of item.children) {
+                if (child.route && this.router.url.startsWith(child.route)) {
+                    toOpen.add(item.id);
+                }
+                if (child.children) {
+                    for (const grand of child.children) {
+                        if (grand.route && this.router.url.startsWith(grand.route)) {
+                            toOpen.add(item.id);
+                            toOpen.add(child.id);
+                        }
+                    }
+                }
+            }
+        }
+        if (toOpen.size > 0) {
+            this.openGroups.set(toOpen);
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: NeuNavComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.8", type: NeuNavComponent, isStandalone: true, selector: "neu-nav", inputs: { items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: false, transformFunction: null }, collapsed: { classPropertyName: "collapsed", publicName: "collapsed", isSignal: true, isRequired: false, transformFunction: null }, collapsible: { classPropertyName: "collapsible", publicName: "collapsible", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, expandLabel: { classPropertyName: "expandLabel", publicName: "expandLabel", isSignal: true, isRequired: false, transformFunction: null }, collapseLabel: { classPropertyName: "collapseLabel", publicName: "collapseLabel", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { collapsedChange: "collapsedChange" }, ngImport: i0, template: `
+    <div class="neu-nav-wrapper" [class.neu-nav-wrapper--collapsed]="isCollapsed()">
+      <nav
+        class="neu-nav"
+        [class.neu-nav--collapsed]="isCollapsed()"
+        [attr.aria-label]="ariaLabel()"
+      >
+        <!-- Brand slot -->
+        <div class="neu-nav__brand">
+          <!-- Icono visible solo en modo colapsado -->
+          <div class="neu-nav__brand-icon">
+            <ng-content select="[neu-nav-brand-icon]" />
+          </div>
+          <!-- Contenido completo visible en modo expandido -->
+          <div class="neu-nav__brand-content">
+            <ng-content select="[neu-nav-brand]" />
+          </div>
+        </div>
+
+        <!-- Items (nivel 1) -->
+        <div class="neu-nav__items" role="list">
+          @for (item of items(); track item.id) {
+            @if (item.children?.length) {
+              <!-- NIVEL 1 — Grupo acordeón -->
+              <div
+                class="neu-nav__group"
+                [class.neu-nav__group--open]="isGroupOpen(item.id)"
+                role="listitem"
+                (mouseenter)="onGroupMouseEnter(item, $event)"
+                (mouseleave)="onGroupMouseLeave()"
+              >
+                <button
+                  class="neu-nav__item neu-nav__item--parent"
+                  type="button"
+                  [class.neu-nav__item--active]="isGroupActive(item)"
+                  [class.neu-nav__item--disabled]="item.disabled"
+                  [attr.aria-expanded]="isGroupOpen(item.id)"
+                  [attr.aria-haspopup]="true"
+                  [attr.disabled]="item.disabled ? '' : null"
+                  [neuTooltip]="isCollapsed() ? item.label : ''"
+                  neuTooltipPosition="right"
+                  (click)="!isCollapsed() && toggleGroup(item.id)"
+                >
+                  <neu-icon
+                    [name]="item.icon"
+                    size="18px"
+                    class="neu-nav__item-icon"
+                    aria-hidden="true"
+                  />
+                  <span class="neu-nav__item-label">{{ item.label }}</span>
+                  @if (item.badge) {
+                    <span
+                      class="neu-nav__item-badge neu-nav__item-badge--{{
+                        item.badgeVariant ?? 'default'
+                      }}"
+                      >{{ item.badge }}</span
+                    >
+                  }
+                  <neu-icon
+                    name="lucideChevronRight"
+                    size="14px"
+                    class="neu-nav__group-chevron"
+                    aria-hidden="true"
+                  />
+                </button>
+
+                <!-- Submenú nivel 2 -->
+                @if (!isCollapsed() && isGroupOpen(item.id)) {
+                  <div class="neu-nav__submenu" role="list">
+                    @for (child of item.children; track child.id) {
+                      @if (child.children?.length) {
+                        <!-- NIVEL 2 — Subgrupo acordeón -->
+                        <div
+                          class="neu-nav__group neu-nav__group--nested"
+                          [class.neu-nav__group--open]="isGroupOpen(child.id)"
+                          role="listitem"
+                        >
+                          <button
+                            class="neu-nav__item neu-nav__item--child neu-nav__item--parent"
+                            type="button"
+                            [class.neu-nav__item--active]="isGroupActive(child)"
+                            [class.neu-nav__item--disabled]="child.disabled"
+                            [attr.aria-expanded]="isGroupOpen(child.id)"
+                            [attr.aria-haspopup]="true"
+                            [attr.disabled]="child.disabled ? '' : null"
+                            (click)="toggleGroup(child.id)"
+                          >
+                            <neu-icon
+                              [name]="child.icon"
+                              size="15px"
+                              class="neu-nav__item-icon"
+                              aria-hidden="true"
+                            />
+                            <span class="neu-nav__item-label">{{ child.label }}</span>
+                            @if (child.badge) {
+                              <span
+                                class="neu-nav__item-badge neu-nav__item-badge--{{
+                                  child.badgeVariant ?? 'default'
+                                }}"
+                                >{{ child.badge }}</span
+                              >
+                            }
+                            <neu-icon
+                              name="lucideChevronRight"
+                              size="13px"
+                              class="neu-nav__group-chevron"
+                              aria-hidden="true"
+                            />
+                          </button>
+
+                          <!-- Submenú nivel 3 -->
+                          @if (isGroupOpen(child.id)) {
+                            <div class="neu-nav__submenu neu-nav__submenu--nested" role="list">
+                              @for (grand of child.children; track grand.id) {
+                                @if (grand.href) {
+                                  <!-- NIVEL 3 — Enlace externo -->
+                                  <a
+                                    class="neu-nav__item neu-nav__item--grandchild"
+                                    [class.neu-nav__item--disabled]="grand.disabled"
+                                    [href]="grand.disabled ? null : grand.href"
+                                    target="_blank"
+                                    rel="noopener noreferrer"
+                                    [attr.aria-disabled]="grand.disabled ? 'true' : null"
+                                    role="listitem"
+                                  >
+                                    <neu-icon
+                                      [name]="grand.icon"
+                                      size="14px"
+                                      class="neu-nav__item-icon"
+                                      aria-hidden="true"
+                                    />
+                                    <span class="neu-nav__item-label">{{ grand.label }}</span>
+                                    <neu-icon
+                                      name="lucideExternalLink"
+                                      size="11px"
+                                      class="neu-nav__external-icon"
+                                      aria-hidden="true"
+                                    />
+                                  </a>
+                                } @else {
+                                  <!-- NIVEL 3 — Enlace interno -->
+                                  <a
+                                    class="neu-nav__item neu-nav__item--grandchild"
+                                    [class.neu-nav__item--disabled]="grand.disabled"
+                                    [routerLink]="grand.disabled ? null : (grand.route ?? null)"
+                                    routerLinkActive="neu-nav__item--active"
+                                    [routerLinkActiveOptions]="{ exact: true }"
+                                    [attr.aria-current]="
+                                      isCurrentRoute(grand.route ?? '') ? 'page' : null
+                                    "
+                                    role="listitem"
+                                  >
+                                    <neu-icon
+                                      [name]="grand.icon"
+                                      size="14px"
+                                      class="neu-nav__item-icon"
+                                      aria-hidden="true"
+                                    />
+                                    <span class="neu-nav__item-label">{{ grand.label }}</span>
+                                    @if (grand.badge) {
+                                      <span
+                                        class="neu-nav__item-badge neu-nav__item-badge--{{
+                                          grand.badgeVariant ?? 'default'
+                                        }}"
+                                        >{{ grand.badge }}</span
+                                      >
+                                    }
+                                  </a>
+                                }
+                              }
+                            </div>
+                          }
+                        </div>
+                      } @else if (child.href) {
+                        <!-- NIVEL 2 — Enlace externo -->
+                        <a
+                          class="neu-nav__item neu-nav__item--child"
+                          [class.neu-nav__item--disabled]="child.disabled"
+                          [href]="child.disabled ? null : child.href"
+                          target="_blank"
+                          rel="noopener noreferrer"
+                          [attr.aria-disabled]="child.disabled ? 'true' : null"
+                          role="listitem"
+                        >
+                          <neu-icon
+                            [name]="child.icon"
+                            size="15px"
+                            class="neu-nav__item-icon"
+                            aria-hidden="true"
+                          />
+                          <span class="neu-nav__item-label">{{ child.label }}</span>
+                          @if (child.badge) {
+                            <span
+                              class="neu-nav__item-badge neu-nav__item-badge--{{
+                                child.badgeVariant ?? 'default'
+                              }}"
+                              >{{ child.badge }}</span
+                            >
+                          }
+                          <neu-icon
+                            name="lucideExternalLink"
+                            size="12px"
+                            class="neu-nav__external-icon"
+                            aria-hidden="true"
+                          />
+                        </a>
+                      } @else {
+                        <!-- NIVEL 2 — Enlace interno -->
+                        <a
+                          class="neu-nav__item neu-nav__item--child"
+                          [class.neu-nav__item--disabled]="child.disabled"
+                          [routerLink]="child.disabled ? null : (child.route ?? null)"
+                          routerLinkActive="neu-nav__item--active"
+                          [routerLinkActiveOptions]="{ exact: true }"
+                          [attr.aria-current]="isCurrentRoute(child.route ?? '') ? 'page' : null"
+                          role="listitem"
+                        >
+                          <neu-icon
+                            [name]="child.icon"
+                            size="15px"
+                            class="neu-nav__item-icon"
+                            aria-hidden="true"
+                          />
+                          <span class="neu-nav__item-label">{{ child.label }}</span>
+                          @if (child.badge) {
+                            <span
+                              class="neu-nav__item-badge neu-nav__item-badge--{{
+                                child.badgeVariant ?? 'default'
+                              }}"
+                              >{{ child.badge }}</span
+                            >
+                          }
+                        </a>
+                      }
+                    }
+                  </div>
+                }
+              </div>
+            } @else if (item.href) {
+              <!-- NIVEL 1 — Enlace externo -->
+              <a
+                class="neu-nav__item"
+                [class.neu-nav__item--disabled]="item.disabled"
+                [href]="item.disabled ? null : item.href"
+                target="_blank"
+                rel="noopener noreferrer"
+                [attr.aria-disabled]="item.disabled ? 'true' : null"
+                [neuTooltip]="isCollapsed() ? item.label : ''"
+                neuTooltipPosition="right"
+                role="listitem"
+              >
+                <neu-icon
+                  [name]="item.icon"
+                  size="18px"
+                  class="neu-nav__item-icon"
+                  aria-hidden="true"
+                />
+                <span class="neu-nav__item-label">{{ item.label }}</span>
+                @if (item.badge) {
+                  <span
+                    class="neu-nav__item-badge neu-nav__item-badge--{{
+                      item.badgeVariant ?? 'default'
+                    }}"
+                    >{{ item.badge }}</span
+                  >
+                }
+                <neu-icon
+                  name="lucideExternalLink"
+                  size="13px"
+                  class="neu-nav__external-icon"
+                  aria-hidden="true"
+                />
+              </a>
+            } @else {
+              <!-- NIVEL 1 — Enlace interno -->
+              <a
+                class="neu-nav__item"
+                [class.neu-nav__item--disabled]="item.disabled"
+                [routerLink]="item.disabled ? null : (item.route ?? null)"
+                routerLinkActive="neu-nav__item--active"
+                [routerLinkActiveOptions]="{ exact: item.route === '/' }"
+                [attr.aria-current]="isCurrentRoute(item.route ?? '') ? 'page' : null"
+                [neuTooltip]="isCollapsed() ? item.label : ''"
+                neuTooltipPosition="right"
+                role="listitem"
+              >
+                <neu-icon
+                  [name]="item.icon"
+                  size="18px"
+                  class="neu-nav__item-icon"
+                  aria-hidden="true"
+                />
+                <span class="neu-nav__item-label">{{ item.label }}</span>
+                @if (item.badge) {
+                  <span
+                    class="neu-nav__item-badge neu-nav__item-badge--{{
+                      item.badgeVariant ?? 'default'
+                    }}"
+                    >{{ item.badge }}</span
+                  >
+                }
+              </a>
+            }
+          }
+        </div>
+
+        <!-- Footer slot -->
+        <div class="neu-nav__footer">
+          <ng-content select="[neu-nav-footer]" />
+        </div>
+      </nav>
+
+      <!-- Flyout panel para grupos en modo colapsado -->
+      @if (flyoutState(); as flyout) {
+        <div
+          class="neu-nav__flyout"
+          [style.top.px]="flyout.top"
+          [style.left.px]="flyout.left"
+          role="menu"
+          (mouseenter)="onFlyoutMouseEnter()"
+          (mouseleave)="onFlyoutMouseLeave()"
+        >
+          <div class="neu-nav__flyout-title">{{ flyout.item.label }}</div>
+          @for (child of flyout.item.children ?? []; track child.id) {
+            @if (child.children?.length) {
+              <div class="neu-nav__flyout-group">
+                <span class="neu-nav__flyout-group-label">{{ child.label }}</span>
+                @for (grand of child.children; track grand.id) {
+                  @if (grand.href) {
+                    <a
+                      class="neu-nav__flyout-item"
+                      role="menuitem"
+                      [href]="grand.href"
+                      target="_blank"
+                      rel="noopener noreferrer"
+                      (click)="flyoutState.set(null)"
+                    >
+                      <neu-icon [name]="grand.icon" size="13px" aria-hidden="true" />
+                      <span>{{ grand.label }}</span>
+                      <neu-icon
+                        name="lucideExternalLink"
+                        size="10px"
+                        class="neu-nav__external-icon"
+                      />
+                    </a>
+                  } @else {
+                    <a
+                      class="neu-nav__flyout-item"
+                      role="menuitem"
+                      [routerLink]="grand.route"
+                      routerLinkActive="neu-nav__flyout-item--active"
+                      (click)="flyoutState.set(null)"
+                    >
+                      <neu-icon [name]="grand.icon" size="13px" aria-hidden="true" />
+                      <span>{{ grand.label }}</span>
+                    </a>
+                  }
+                }
+              </div>
+            } @else if (child.href) {
+              <a
+                class="neu-nav__flyout-item"
+                role="menuitem"
+                [href]="child.href"
+                target="_blank"
+                rel="noopener noreferrer"
+                (click)="flyoutState.set(null)"
+              >
+                <neu-icon [name]="child.icon" size="13px" aria-hidden="true" />
+                <span>{{ child.label }}</span>
+                <neu-icon name="lucideExternalLink" size="10px" class="neu-nav__external-icon" />
+              </a>
+            } @else {
+              <a
+                class="neu-nav__flyout-item"
+                role="menuitem"
+                [routerLink]="child.route"
+                routerLinkActive="neu-nav__flyout-item--active"
+                (click)="flyoutState.set(null)"
+              >
+                <neu-icon [name]="child.icon" size="13px" aria-hidden="true" />
+                <span>{{ child.label }}</span>
+              </a>
+            }
+          }
+        </div>
+      }
+
+      <!-- Pestaña collapse/expand — fuera del nav para no ser recortada -->
+      @if (collapsible()) {
+        <button
+          class="neu-nav__toggle-tab"
+          type="button"
+          [attr.aria-label]="isCollapsed() ? expandLabel() : collapseLabel()"
+          [attr.aria-expanded]="!isCollapsed()"
+          (click)="toggleCollapse()"
+        >
+          <neu-icon
+            [name]="isCollapsed() ? 'lucideChevronRight' : 'lucideChevronLeft'"
+            size="12px"
+            aria-hidden="true"
+          />
+        </button>
+      }
+    </div>
+  `, isInline: true, styles: ["@charset \"UTF-8\";.neu-nav{display:flex;flex-direction:column;width:268px;height:100%;background:var(--neu-surface);border-right:1px solid var(--neu-border);transition:width .28s cubic-bezier(.4,0,.2,1);overflow:hidden;flex-shrink:0;-webkit-user-select:none;user-select:none}.neu-nav--collapsed{width:64px}.neu-nav--collapsed .neu-nav__brand{justify-content:center;padding:0;gap:0}.neu-nav--collapsed .neu-nav__brand-content{flex:0 0 0;width:0;opacity:0;overflow:hidden;pointer-events:none}.neu-nav--collapsed .neu-nav__items{padding-left:0;padding-right:0}.neu-nav--collapsed .neu-nav__item{justify-content:center;width:64px;padding:0;gap:0}.neu-nav--collapsed .neu-nav__item--parent .neu-nav__group-chevron{margin-left:0}.neu-nav--collapsed .neu-nav__item-label,.neu-nav--collapsed .neu-nav__item-badge,.neu-nav--collapsed .neu-nav__group-chevron,.neu-nav--collapsed .neu-nav__external-icon{flex:0 0 0;width:0;margin:0;opacity:0;overflow:hidden;pointer-events:none;white-space:nowrap}.neu-nav--collapsed .neu-nav__footer{height:0;opacity:0;overflow:hidden;pointer-events:none}.neu-nav__brand{display:flex;align-items:center;justify-content:space-between;min-height:64px;padding:0 var(--neu-space-4);border-bottom:1px solid var(--neu-border);flex-shrink:0;gap:var(--neu-space-3)}.neu-nav__brand-content{flex:1;min-width:0;display:flex;align-items:center;gap:10px;transition:opacity .2s ease,width .28s cubic-bezier(.4,0,.2,1);overflow:hidden}.neu-nav__brand-icon{display:none;align-items:center;justify-content:center;width:64px;height:64px;flex-shrink:0;background:none;border:none;cursor:pointer;padding:0;color:inherit}.neu-nav__brand-icon:focus-visible{outline:2px solid var(--neu-primary);outline-offset:-2px}.neu-nav--collapsed .neu-nav__brand-icon{display:flex}.neu-nav-wrapper{position:relative;height:100%;flex-shrink:0;display:flex}.neu-nav__toggle-tab{position:absolute;right:-13px;top:16px;transform:none;width:13px;height:40px;display:flex;align-items:center;justify-content:center;background:var(--neu-surface);border:1px solid var(--neu-border);border-left:none;border-radius:0 6px 6px 0;color:var(--neu-text-muted);cursor:pointer;padding:0;z-index:10;transition:background var(--neu-transition),color var(--neu-transition)}.neu-nav__toggle-tab:hover{background:var(--neu-surface-2);color:var(--neu-text)}.neu-nav__toggle-tab:focus-visible{outline:2px solid var(--neu-primary);outline-offset:2px}.neu-nav__items{flex:1;overflow-y:auto;overflow-x:hidden;padding:var(--neu-space-3) var(--neu-space-2);display:flex;flex-direction:column;gap:2px}.neu-nav__items::-webkit-scrollbar{width:4px}.neu-nav__items::-webkit-scrollbar-track{background:transparent}.neu-nav__items::-webkit-scrollbar-thumb{background:var(--neu-border);border-radius:4px}.neu-nav__item{position:relative;display:flex;align-items:center;gap:10px;height:40px;padding:0 var(--neu-space-3);border-radius:8px;font-size:var(--neu-text-sm);font-weight:500;color:var(--neu-text-muted);text-decoration:none;cursor:pointer;background:none;border:none;font-family:inherit;width:100%;text-align:left;transition:background var(--neu-transition),color var(--neu-transition);white-space:nowrap;flex-shrink:0}.neu-nav__item:focus-visible{outline:2px solid var(--neu-primary);outline-offset:-2px}.neu-nav__item:hover:not(.neu-nav__item--disabled){background:var(--neu-surface-2);color:var(--neu-text)}.neu-nav__item:hover:not(.neu-nav__item--disabled) .neu-nav__item-icon{color:var(--neu-text)}.neu-nav__item--active{background:var(--neu-primary-50);color:var(--neu-primary);font-weight:600}.neu-nav__item--active .neu-nav__item-icon{color:var(--neu-primary)}.neu-nav__item--active:before{content:\"\";position:absolute;left:0;top:6px;bottom:6px;width:3px;background:var(--neu-primary);border-radius:0 var(--neu-radius-full) var(--neu-radius-full) 0}.neu-nav__item--disabled{opacity:.4;cursor:not-allowed;pointer-events:none}.neu-nav__item--child{height:36px;padding-left:calc(var(--neu-space-3) + 6px);font-size:.8125rem}.neu-nav__item--parent .neu-nav__group-chevron{margin-left:auto;flex-shrink:0;transition:transform var(--neu-transition);color:var(--neu-text-disabled)}.neu-nav__item-icon{flex-shrink:0;color:var(--neu-text-disabled);transition:color var(--neu-transition)}.neu-nav__item-label{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;transition:opacity .2s ease,width .28s cubic-bezier(.4,0,.2,1)}.neu-nav__item-badge{flex-shrink:0;font-size:10px;font-weight:700;line-height:1;padding:2px 6px;border-radius:var(--neu-radius-full);text-transform:uppercase;letter-spacing:.04em;transition:opacity .2s ease}.neu-nav__item-badge--default{background:var(--neu-surface-3);color:var(--neu-text-muted)}.neu-nav__item-badge--success{background:var(--neu-success-bg);color:var(--neu-success-text)}.neu-nav__item-badge--warning{background:var(--neu-warning-bg);color:var(--neu-warning-text)}.neu-nav__item-badge--danger{background:var(--neu-error-bg);color:var(--neu-error-text)}.neu-nav__item-badge--info{background:var(--neu-info-bg);color:var(--neu-info-text)}.neu-nav__group{display:flex;flex-direction:column}.neu-nav__group--open .neu-nav__group-chevron{transform:rotate(90deg)}.neu-nav__group--open>.neu-nav__item--parent{color:var(--neu-text);background:var(--neu-surface-2)}.neu-nav__group--open>.neu-nav__item--parent .neu-nav__item-icon{color:var(--neu-text-muted)}.neu-nav__submenu{display:flex;flex-direction:column;gap:1px;padding:2px 0 4px var(--neu-space-3);margin-top:2px;border-left:2px solid var(--neu-border);margin-left:calc(var(--neu-space-3) + 9px)}.neu-nav__submenu--nested{padding-left:var(--neu-space-2);margin-left:calc(var(--neu-space-2) + 7px);border-color:var(--neu-border);border-left-style:dashed}.neu-nav__item--grandchild{height:32px;padding-left:calc(var(--neu-space-2) + 4px);font-size:.75rem}.neu-nav__external-icon{flex-shrink:0;margin-left:auto;color:var(--neu-text-disabled);opacity:.7;transition:opacity var(--neu-transition),color var(--neu-transition)}.neu-nav__item:hover .neu-nav__external-icon{opacity:1;color:var(--neu-text-muted)}.neu-nav__footer{border-top:1px solid var(--neu-border);padding:var(--neu-space-3) var(--neu-space-4);flex-shrink:0;font-size:var(--neu-text-xs);color:var(--neu-text-muted);transition:opacity .2s ease,height .28s cubic-bezier(.4,0,.2,1)}.neu-nav--collapsed .neu-nav__item--parent:after{content:\"\\203a\";position:absolute;right:8px;top:50%;transform:translateY(-50%);font-size:11px;line-height:1;color:var(--neu-text-disabled);pointer-events:none}.neu-nav__flyout{position:fixed;z-index:1000;min-width:200px;max-width:240px;background:var(--neu-surface);border:1px solid var(--neu-border);border-radius:8px;box-shadow:0 4px 20px #0000001f;padding:6px;margin-left:6px}.neu-nav__flyout-title{font-size:.6875rem;font-weight:700;color:var(--neu-text-muted);text-transform:uppercase;letter-spacing:.06em;padding:4px 8px 6px}.neu-nav__flyout-item{display:flex;align-items:center;gap:8px;height:34px;padding:0 8px;border-radius:6px;font-size:.8125rem;color:var(--neu-text-muted);text-decoration:none;cursor:pointer;white-space:nowrap;transition:background var(--neu-transition),color var(--neu-transition)}.neu-nav__flyout-item:hover{background:var(--neu-surface-2);color:var(--neu-text)}.neu-nav__flyout-item--active{background:var(--neu-primary-50);color:var(--neu-primary);font-weight:600}.neu-nav__flyout-item .neu-nav__external-icon{margin-left:auto;opacity:.6}.neu-nav__flyout-group{margin-top:4px;padding-top:4px;border-top:1px solid var(--neu-border)}.neu-nav__flyout-group-label{display:block;font-size:.6875rem;font-weight:600;color:var(--neu-text-disabled);text-transform:uppercase;letter-spacing:.05em;padding:2px 8px 4px}\n"], dependencies: [{ kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: RouterLinkActive, selector: "[routerLinkActive]", inputs: ["routerLinkActiveOptions", "ariaCurrentWhenActive", "routerLinkActive"], outputs: ["isActiveChange"], exportAs: ["routerLinkActive"] }, { kind: "component", type: NeuIconComponent, selector: "neu-icon", inputs: ["name", "strokeWidth", "size"] }, { kind: "directive", type: NeuTooltipDirective, selector: "[neuTooltip]", inputs: ["neuTooltip", "neuTooltipPosition", "neuTooltipDisabled"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: NeuNavComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'neu-nav', imports: [RouterLink, RouterLinkActive, NeuIconComponent, NeuTooltipDirective], encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, template: `
+    <div class="neu-nav-wrapper" [class.neu-nav-wrapper--collapsed]="isCollapsed()">
+      <nav
+        class="neu-nav"
+        [class.neu-nav--collapsed]="isCollapsed()"
+        [attr.aria-label]="ariaLabel()"
+      >
+        <!-- Brand slot -->
+        <div class="neu-nav__brand">
+          <!-- Icono visible solo en modo colapsado -->
+          <div class="neu-nav__brand-icon">
+            <ng-content select="[neu-nav-brand-icon]" />
+          </div>
+          <!-- Contenido completo visible en modo expandido -->
+          <div class="neu-nav__brand-content">
+            <ng-content select="[neu-nav-brand]" />
+          </div>
+        </div>
+
+        <!-- Items (nivel 1) -->
+        <div class="neu-nav__items" role="list">
+          @for (item of items(); track item.id) {
+            @if (item.children?.length) {
+              <!-- NIVEL 1 — Grupo acordeón -->
+              <div
+                class="neu-nav__group"
+                [class.neu-nav__group--open]="isGroupOpen(item.id)"
+                role="listitem"
+                (mouseenter)="onGroupMouseEnter(item, $event)"
+                (mouseleave)="onGroupMouseLeave()"
+              >
+                <button
+                  class="neu-nav__item neu-nav__item--parent"
+                  type="button"
+                  [class.neu-nav__item--active]="isGroupActive(item)"
+                  [class.neu-nav__item--disabled]="item.disabled"
+                  [attr.aria-expanded]="isGroupOpen(item.id)"
+                  [attr.aria-haspopup]="true"
+                  [attr.disabled]="item.disabled ? '' : null"
+                  [neuTooltip]="isCollapsed() ? item.label : ''"
+                  neuTooltipPosition="right"
+                  (click)="!isCollapsed() && toggleGroup(item.id)"
+                >
+                  <neu-icon
+                    [name]="item.icon"
+                    size="18px"
+                    class="neu-nav__item-icon"
+                    aria-hidden="true"
+                  />
+                  <span class="neu-nav__item-label">{{ item.label }}</span>
+                  @if (item.badge) {
+                    <span
+                      class="neu-nav__item-badge neu-nav__item-badge--{{
+                        item.badgeVariant ?? 'default'
+                      }}"
+                      >{{ item.badge }}</span
+                    >
+                  }
+                  <neu-icon
+                    name="lucideChevronRight"
+                    size="14px"
+                    class="neu-nav__group-chevron"
+                    aria-hidden="true"
+                  />
+                </button>
+
+                <!-- Submenú nivel 2 -->
+                @if (!isCollapsed() && isGroupOpen(item.id)) {
+                  <div class="neu-nav__submenu" role="list">
+                    @for (child of item.children; track child.id) {
+                      @if (child.children?.length) {
+                        <!-- NIVEL 2 — Subgrupo acordeón -->
+                        <div
+                          class="neu-nav__group neu-nav__group--nested"
+                          [class.neu-nav__group--open]="isGroupOpen(child.id)"
+                          role="listitem"
+                        >
+                          <button
+                            class="neu-nav__item neu-nav__item--child neu-nav__item--parent"
+                            type="button"
+                            [class.neu-nav__item--active]="isGroupActive(child)"
+                            [class.neu-nav__item--disabled]="child.disabled"
+                            [attr.aria-expanded]="isGroupOpen(child.id)"
+                            [attr.aria-haspopup]="true"
+                            [attr.disabled]="child.disabled ? '' : null"
+                            (click)="toggleGroup(child.id)"
+                          >
+                            <neu-icon
+                              [name]="child.icon"
+                              size="15px"
+                              class="neu-nav__item-icon"
+                              aria-hidden="true"
+                            />
+                            <span class="neu-nav__item-label">{{ child.label }}</span>
+                            @if (child.badge) {
+                              <span
+                                class="neu-nav__item-badge neu-nav__item-badge--{{
+                                  child.badgeVariant ?? 'default'
+                                }}"
+                                >{{ child.badge }}</span
+                              >
+                            }
+                            <neu-icon
+                              name="lucideChevronRight"
+                              size="13px"
+                              class="neu-nav__group-chevron"
+                              aria-hidden="true"
+                            />
+                          </button>
+
+                          <!-- Submenú nivel 3 -->
+                          @if (isGroupOpen(child.id)) {
+                            <div class="neu-nav__submenu neu-nav__submenu--nested" role="list">
+                              @for (grand of child.children; track grand.id) {
+                                @if (grand.href) {
+                                  <!-- NIVEL 3 — Enlace externo -->
+                                  <a
+                                    class="neu-nav__item neu-nav__item--grandchild"
+                                    [class.neu-nav__item--disabled]="grand.disabled"
+                                    [href]="grand.disabled ? null : grand.href"
+                                    target="_blank"
+                                    rel="noopener noreferrer"
+                                    [attr.aria-disabled]="grand.disabled ? 'true' : null"
+                                    role="listitem"
+                                  >
+                                    <neu-icon
+                                      [name]="grand.icon"
+                                      size="14px"
+                                      class="neu-nav__item-icon"
+                                      aria-hidden="true"
+                                    />
+                                    <span class="neu-nav__item-label">{{ grand.label }}</span>
+                                    <neu-icon
+                                      name="lucideExternalLink"
+                                      size="11px"
+                                      class="neu-nav__external-icon"
+                                      aria-hidden="true"
+                                    />
+                                  </a>
+                                } @else {
+                                  <!-- NIVEL 3 — Enlace interno -->
+                                  <a
+                                    class="neu-nav__item neu-nav__item--grandchild"
+                                    [class.neu-nav__item--disabled]="grand.disabled"
+                                    [routerLink]="grand.disabled ? null : (grand.route ?? null)"
+                                    routerLinkActive="neu-nav__item--active"
+                                    [routerLinkActiveOptions]="{ exact: true }"
+                                    [attr.aria-current]="
+                                      isCurrentRoute(grand.route ?? '') ? 'page' : null
+                                    "
+                                    role="listitem"
+                                  >
+                                    <neu-icon
+                                      [name]="grand.icon"
+                                      size="14px"
+                                      class="neu-nav__item-icon"
+                                      aria-hidden="true"
+                                    />
+                                    <span class="neu-nav__item-label">{{ grand.label }}</span>
+                                    @if (grand.badge) {
+                                      <span
+                                        class="neu-nav__item-badge neu-nav__item-badge--{{
+                                          grand.badgeVariant ?? 'default'
+                                        }}"
+                                        >{{ grand.badge }}</span
+                                      >
+                                    }
+                                  </a>
+                                }
+                              }
+                            </div>
+                          }
+                        </div>
+                      } @else if (child.href) {
+                        <!-- NIVEL 2 — Enlace externo -->
+                        <a
+                          class="neu-nav__item neu-nav__item--child"
+                          [class.neu-nav__item--disabled]="child.disabled"
+                          [href]="child.disabled ? null : child.href"
+                          target="_blank"
+                          rel="noopener noreferrer"
+                          [attr.aria-disabled]="child.disabled ? 'true' : null"
+                          role="listitem"
+                        >
+                          <neu-icon
+                            [name]="child.icon"
+                            size="15px"
+                            class="neu-nav__item-icon"
+                            aria-hidden="true"
+                          />
+                          <span class="neu-nav__item-label">{{ child.label }}</span>
+                          @if (child.badge) {
+                            <span
+                              class="neu-nav__item-badge neu-nav__item-badge--{{
+                                child.badgeVariant ?? 'default'
+                              }}"
+                              >{{ child.badge }}</span
+                            >
+                          }
+                          <neu-icon
+                            name="lucideExternalLink"
+                            size="12px"
+                            class="neu-nav__external-icon"
+                            aria-hidden="true"
+                          />
+                        </a>
+                      } @else {
+                        <!-- NIVEL 2 — Enlace interno -->
+                        <a
+                          class="neu-nav__item neu-nav__item--child"
+                          [class.neu-nav__item--disabled]="child.disabled"
+                          [routerLink]="child.disabled ? null : (child.route ?? null)"
+                          routerLinkActive="neu-nav__item--active"
+                          [routerLinkActiveOptions]="{ exact: true }"
+                          [attr.aria-current]="isCurrentRoute(child.route ?? '') ? 'page' : null"
+                          role="listitem"
+                        >
+                          <neu-icon
+                            [name]="child.icon"
+                            size="15px"
+                            class="neu-nav__item-icon"
+                            aria-hidden="true"
+                          />
+                          <span class="neu-nav__item-label">{{ child.label }}</span>
+                          @if (child.badge) {
+                            <span
+                              class="neu-nav__item-badge neu-nav__item-badge--{{
+                                child.badgeVariant ?? 'default'
+                              }}"
+                              >{{ child.badge }}</span
+                            >
+                          }
+                        </a>
+                      }
+                    }
+                  </div>
+                }
+              </div>
+            } @else if (item.href) {
+              <!-- NIVEL 1 — Enlace externo -->
+              <a
+                class="neu-nav__item"
+                [class.neu-nav__item--disabled]="item.disabled"
+                [href]="item.disabled ? null : item.href"
+                target="_blank"
+                rel="noopener noreferrer"
+                [attr.aria-disabled]="item.disabled ? 'true' : null"
+                [neuTooltip]="isCollapsed() ? item.label : ''"
+                neuTooltipPosition="right"
+                role="listitem"
+              >
+                <neu-icon
+                  [name]="item.icon"
+                  size="18px"
+                  class="neu-nav__item-icon"
+                  aria-hidden="true"
+                />
+                <span class="neu-nav__item-label">{{ item.label }}</span>
+                @if (item.badge) {
+                  <span
+                    class="neu-nav__item-badge neu-nav__item-badge--{{
+                      item.badgeVariant ?? 'default'
+                    }}"
+                    >{{ item.badge }}</span
+                  >
+                }
+                <neu-icon
+                  name="lucideExternalLink"
+                  size="13px"
+                  class="neu-nav__external-icon"
+                  aria-hidden="true"
+                />
+              </a>
+            } @else {
+              <!-- NIVEL 1 — Enlace interno -->
+              <a
+                class="neu-nav__item"
+                [class.neu-nav__item--disabled]="item.disabled"
+                [routerLink]="item.disabled ? null : (item.route ?? null)"
+                routerLinkActive="neu-nav__item--active"
+                [routerLinkActiveOptions]="{ exact: item.route === '/' }"
+                [attr.aria-current]="isCurrentRoute(item.route ?? '') ? 'page' : null"
+                [neuTooltip]="isCollapsed() ? item.label : ''"
+                neuTooltipPosition="right"
+                role="listitem"
+              >
+                <neu-icon
+                  [name]="item.icon"
+                  size="18px"
+                  class="neu-nav__item-icon"
+                  aria-hidden="true"
+                />
+                <span class="neu-nav__item-label">{{ item.label }}</span>
+                @if (item.badge) {
+                  <span
+                    class="neu-nav__item-badge neu-nav__item-badge--{{
+                      item.badgeVariant ?? 'default'
+                    }}"
+                    >{{ item.badge }}</span
+                  >
+                }
+              </a>
+            }
+          }
+        </div>
+
+        <!-- Footer slot -->
+        <div class="neu-nav__footer">
+          <ng-content select="[neu-nav-footer]" />
+        </div>
+      </nav>
+
+      <!-- Flyout panel para grupos en modo colapsado -->
+      @if (flyoutState(); as flyout) {
+        <div
+          class="neu-nav__flyout"
+          [style.top.px]="flyout.top"
+          [style.left.px]="flyout.left"
+          role="menu"
+          (mouseenter)="onFlyoutMouseEnter()"
+          (mouseleave)="onFlyoutMouseLeave()"
+        >
+          <div class="neu-nav__flyout-title">{{ flyout.item.label }}</div>
+          @for (child of flyout.item.children ?? []; track child.id) {
+            @if (child.children?.length) {
+              <div class="neu-nav__flyout-group">
+                <span class="neu-nav__flyout-group-label">{{ child.label }}</span>
+                @for (grand of child.children; track grand.id) {
+                  @if (grand.href) {
+                    <a
+                      class="neu-nav__flyout-item"
+                      role="menuitem"
+                      [href]="grand.href"
+                      target="_blank"
+                      rel="noopener noreferrer"
+                      (click)="flyoutState.set(null)"
+                    >
+                      <neu-icon [name]="grand.icon" size="13px" aria-hidden="true" />
+                      <span>{{ grand.label }}</span>
+                      <neu-icon
+                        name="lucideExternalLink"
+                        size="10px"
+                        class="neu-nav__external-icon"
+                      />
+                    </a>
+                  } @else {
+                    <a
+                      class="neu-nav__flyout-item"
+                      role="menuitem"
+                      [routerLink]="grand.route"
+                      routerLinkActive="neu-nav__flyout-item--active"
+                      (click)="flyoutState.set(null)"
+                    >
+                      <neu-icon [name]="grand.icon" size="13px" aria-hidden="true" />
+                      <span>{{ grand.label }}</span>
+                    </a>
+                  }
+                }
+              </div>
+            } @else if (child.href) {
+              <a
+                class="neu-nav__flyout-item"
+                role="menuitem"
+                [href]="child.href"
+                target="_blank"
+                rel="noopener noreferrer"
+                (click)="flyoutState.set(null)"
+              >
+                <neu-icon [name]="child.icon" size="13px" aria-hidden="true" />
+                <span>{{ child.label }}</span>
+                <neu-icon name="lucideExternalLink" size="10px" class="neu-nav__external-icon" />
+              </a>
+            } @else {
+              <a
+                class="neu-nav__flyout-item"
+                role="menuitem"
+                [routerLink]="child.route"
+                routerLinkActive="neu-nav__flyout-item--active"
+                (click)="flyoutState.set(null)"
+              >
+                <neu-icon [name]="child.icon" size="13px" aria-hidden="true" />
+                <span>{{ child.label }}</span>
+              </a>
+            }
+          }
+        </div>
+      }
+
+      <!-- Pestaña collapse/expand — fuera del nav para no ser recortada -->
+      @if (collapsible()) {
+        <button
+          class="neu-nav__toggle-tab"
+          type="button"
+          [attr.aria-label]="isCollapsed() ? expandLabel() : collapseLabel()"
+          [attr.aria-expanded]="!isCollapsed()"
+          (click)="toggleCollapse()"
+        >
+          <neu-icon
+            [name]="isCollapsed() ? 'lucideChevronRight' : 'lucideChevronLeft'"
+            size="12px"
+            aria-hidden="true"
+          />
+        </button>
+      }
+    </div>
+  `, styles: ["@charset \"UTF-8\";.neu-nav{display:flex;flex-direction:column;width:268px;height:100%;background:var(--neu-surface);border-right:1px solid var(--neu-border);transition:width .28s cubic-bezier(.4,0,.2,1);overflow:hidden;flex-shrink:0;-webkit-user-select:none;user-select:none}.neu-nav--collapsed{width:64px}.neu-nav--collapsed .neu-nav__brand{justify-content:center;padding:0;gap:0}.neu-nav--collapsed .neu-nav__brand-content{flex:0 0 0;width:0;opacity:0;overflow:hidden;pointer-events:none}.neu-nav--collapsed .neu-nav__items{padding-left:0;padding-right:0}.neu-nav--collapsed .neu-nav__item{justify-content:center;width:64px;padding:0;gap:0}.neu-nav--collapsed .neu-nav__item--parent .neu-nav__group-chevron{margin-left:0}.neu-nav--collapsed .neu-nav__item-label,.neu-nav--collapsed .neu-nav__item-badge,.neu-nav--collapsed .neu-nav__group-chevron,.neu-nav--collapsed .neu-nav__external-icon{flex:0 0 0;width:0;margin:0;opacity:0;overflow:hidden;pointer-events:none;white-space:nowrap}.neu-nav--collapsed .neu-nav__footer{height:0;opacity:0;overflow:hidden;pointer-events:none}.neu-nav__brand{display:flex;align-items:center;justify-content:space-between;min-height:64px;padding:0 var(--neu-space-4);border-bottom:1px solid var(--neu-border);flex-shrink:0;gap:var(--neu-space-3)}.neu-nav__brand-content{flex:1;min-width:0;display:flex;align-items:center;gap:10px;transition:opacity .2s ease,width .28s cubic-bezier(.4,0,.2,1);overflow:hidden}.neu-nav__brand-icon{display:none;align-items:center;justify-content:center;width:64px;height:64px;flex-shrink:0;background:none;border:none;cursor:pointer;padding:0;color:inherit}.neu-nav__brand-icon:focus-visible{outline:2px solid var(--neu-primary);outline-offset:-2px}.neu-nav--collapsed .neu-nav__brand-icon{display:flex}.neu-nav-wrapper{position:relative;height:100%;flex-shrink:0;display:flex}.neu-nav__toggle-tab{position:absolute;right:-13px;top:16px;transform:none;width:13px;height:40px;display:flex;align-items:center;justify-content:center;background:var(--neu-surface);border:1px solid var(--neu-border);border-left:none;border-radius:0 6px 6px 0;color:var(--neu-text-muted);cursor:pointer;padding:0;z-index:10;transition:background var(--neu-transition),color var(--neu-transition)}.neu-nav__toggle-tab:hover{background:var(--neu-surface-2);color:var(--neu-text)}.neu-nav__toggle-tab:focus-visible{outline:2px solid var(--neu-primary);outline-offset:2px}.neu-nav__items{flex:1;overflow-y:auto;overflow-x:hidden;padding:var(--neu-space-3) var(--neu-space-2);display:flex;flex-direction:column;gap:2px}.neu-nav__items::-webkit-scrollbar{width:4px}.neu-nav__items::-webkit-scrollbar-track{background:transparent}.neu-nav__items::-webkit-scrollbar-thumb{background:var(--neu-border);border-radius:4px}.neu-nav__item{position:relative;display:flex;align-items:center;gap:10px;height:40px;padding:0 var(--neu-space-3);border-radius:8px;font-size:var(--neu-text-sm);font-weight:500;color:var(--neu-text-muted);text-decoration:none;cursor:pointer;background:none;border:none;font-family:inherit;width:100%;text-align:left;transition:background var(--neu-transition),color var(--neu-transition);white-space:nowrap;flex-shrink:0}.neu-nav__item:focus-visible{outline:2px solid var(--neu-primary);outline-offset:-2px}.neu-nav__item:hover:not(.neu-nav__item--disabled){background:var(--neu-surface-2);color:var(--neu-text)}.neu-nav__item:hover:not(.neu-nav__item--disabled) .neu-nav__item-icon{color:var(--neu-text)}.neu-nav__item--active{background:var(--neu-primary-50);color:var(--neu-primary);font-weight:600}.neu-nav__item--active .neu-nav__item-icon{color:var(--neu-primary)}.neu-nav__item--active:before{content:\"\";position:absolute;left:0;top:6px;bottom:6px;width:3px;background:var(--neu-primary);border-radius:0 var(--neu-radius-full) var(--neu-radius-full) 0}.neu-nav__item--disabled{opacity:.4;cursor:not-allowed;pointer-events:none}.neu-nav__item--child{height:36px;padding-left:calc(var(--neu-space-3) + 6px);font-size:.8125rem}.neu-nav__item--parent .neu-nav__group-chevron{margin-left:auto;flex-shrink:0;transition:transform var(--neu-transition);color:var(--neu-text-disabled)}.neu-nav__item-icon{flex-shrink:0;color:var(--neu-text-disabled);transition:color var(--neu-transition)}.neu-nav__item-label{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;transition:opacity .2s ease,width .28s cubic-bezier(.4,0,.2,1)}.neu-nav__item-badge{flex-shrink:0;font-size:10px;font-weight:700;line-height:1;padding:2px 6px;border-radius:var(--neu-radius-full);text-transform:uppercase;letter-spacing:.04em;transition:opacity .2s ease}.neu-nav__item-badge--default{background:var(--neu-surface-3);color:var(--neu-text-muted)}.neu-nav__item-badge--success{background:var(--neu-success-bg);color:var(--neu-success-text)}.neu-nav__item-badge--warning{background:var(--neu-warning-bg);color:var(--neu-warning-text)}.neu-nav__item-badge--danger{background:var(--neu-error-bg);color:var(--neu-error-text)}.neu-nav__item-badge--info{background:var(--neu-info-bg);color:var(--neu-info-text)}.neu-nav__group{display:flex;flex-direction:column}.neu-nav__group--open .neu-nav__group-chevron{transform:rotate(90deg)}.neu-nav__group--open>.neu-nav__item--parent{color:var(--neu-text);background:var(--neu-surface-2)}.neu-nav__group--open>.neu-nav__item--parent .neu-nav__item-icon{color:var(--neu-text-muted)}.neu-nav__submenu{display:flex;flex-direction:column;gap:1px;padding:2px 0 4px var(--neu-space-3);margin-top:2px;border-left:2px solid var(--neu-border);margin-left:calc(var(--neu-space-3) + 9px)}.neu-nav__submenu--nested{padding-left:var(--neu-space-2);margin-left:calc(var(--neu-space-2) + 7px);border-color:var(--neu-border);border-left-style:dashed}.neu-nav__item--grandchild{height:32px;padding-left:calc(var(--neu-space-2) + 4px);font-size:.75rem}.neu-nav__external-icon{flex-shrink:0;margin-left:auto;color:var(--neu-text-disabled);opacity:.7;transition:opacity var(--neu-transition),color var(--neu-transition)}.neu-nav__item:hover .neu-nav__external-icon{opacity:1;color:var(--neu-text-muted)}.neu-nav__footer{border-top:1px solid var(--neu-border);padding:var(--neu-space-3) var(--neu-space-4);flex-shrink:0;font-size:var(--neu-text-xs);color:var(--neu-text-muted);transition:opacity .2s ease,height .28s cubic-bezier(.4,0,.2,1)}.neu-nav--collapsed .neu-nav__item--parent:after{content:\"\\203a\";position:absolute;right:8px;top:50%;transform:translateY(-50%);font-size:11px;line-height:1;color:var(--neu-text-disabled);pointer-events:none}.neu-nav__flyout{position:fixed;z-index:1000;min-width:200px;max-width:240px;background:var(--neu-surface);border:1px solid var(--neu-border);border-radius:8px;box-shadow:0 4px 20px #0000001f;padding:6px;margin-left:6px}.neu-nav__flyout-title{font-size:.6875rem;font-weight:700;color:var(--neu-text-muted);text-transform:uppercase;letter-spacing:.06em;padding:4px 8px 6px}.neu-nav__flyout-item{display:flex;align-items:center;gap:8px;height:34px;padding:0 8px;border-radius:6px;font-size:.8125rem;color:var(--neu-text-muted);text-decoration:none;cursor:pointer;white-space:nowrap;transition:background var(--neu-transition),color var(--neu-transition)}.neu-nav__flyout-item:hover{background:var(--neu-surface-2);color:var(--neu-text)}.neu-nav__flyout-item--active{background:var(--neu-primary-50);color:var(--neu-primary);font-weight:600}.neu-nav__flyout-item .neu-nav__external-icon{margin-left:auto;opacity:.6}.neu-nav__flyout-group{margin-top:4px;padding-top:4px;border-top:1px solid var(--neu-border)}.neu-nav__flyout-group-label{display:block;font-size:.6875rem;font-weight:600;color:var(--neu-text-disabled);text-transform:uppercase;letter-spacing:.05em;padding:2px 8px 4px}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { items: [{ type: i0.Input, args: [{ isSignal: true, alias: "items", required: false }] }], collapsed: [{ type: i0.Input, args: [{ isSignal: true, alias: "collapsed", required: false }] }], collapsible: [{ type: i0.Input, args: [{ isSignal: true, alias: "collapsible", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], expandLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "expandLabel", required: false }] }], collapseLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "collapseLabel", required: false }] }], collapsedChange: [{ type: i0.Output, args: ["collapsedChange"] }] } });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { NeuNavComponent };
+//# sourceMappingURL=neural-ui-core-nav.mjs.map