ng-hub-ui-nav 22.14.0 → 22.14.2

package/README.md

@@ -3,12 +3,12 @@
 [Español](./README.es.md) | **English**
 
 [![npm version](https://img.shields.io/npm/v/ng-hub-ui-nav.svg)](https://www.npmjs.com/package/ng-hub-ui-nav)
-[![license](https://img.shields.io/npm/l/ng-hub-ui-nav.svg)](https://github.com/carlos-morcillo/ng-hub-ui-nav/blob/main/LICENSE)
+[![license](https://img.shields.io/npm/l/ng-hub-ui-nav.svg)](https://github.com/hub-env/ng-hub-ui-nav/blob/main/LICENSE)
 
 A flexible, accessible, and highly customizable navigation component for Angular 21+. It supports horizontal menus, vertical sidebars, mobile collapse modes, stacked drill-down panels, projected start/end slots, and scroll-spy integration.
 
 > [!IMPORTANT]
-> Version `22.14.0` targets Angular 21 and follows the signal-first architecture used across `ng-hub-ui`.
+> Version `22.14.2` targets Angular 22 and follows the signal-first architecture used across `ng-hub-ui`.
 
 ## Documentation and Live Examples
 
@@ -17,6 +17,7 @@ This package is part of [Hub UI](https://hubui.dev/en/), a collection of Angular
 - Docs: https://hubui.dev/en/nav/overview/
 - Live examples: https://hubui.dev/en/nav/examples/
 - Hub UI: https://hubui.dev/en/
+- Hub UI on GitHub (issues, roadmap and contributing): https://github.com/hub-env/hub-ui
 
 ## 🧩 Library Family `ng-hub-ui`
 

package/fesm2022/ng-hub-ui-nav.mjs

@@ -452,6 +452,39 @@ class HubNavStateService {
     // ──────────────────────────────────────────────
     // Panel stack management
     // ──────────────────────────────────────────────
+    /**
+     * Whether the open panels are exactly these parents, in this order, with no drill-down
+     * and within the visible limit.
+     *
+     * A route change that stays inside them can then keep the panels instead of rebuilding
+     * them: a rebuilt panel gets a new id, the container tracks panels by id, and the panel
+     * is mounted again with its entrance animation.
+     *
+     * @param parents - The items whose panels the current route calls for, outermost first.
+     */
+    holdsPanelChain(parents) {
+        const stack = this._panelStack();
+        const effectiveMaxVisible = Math.max(1, this._config().panelMaxVisible - 1);
+        return (stack.length === parents.length &&
+            stack.length <= effectiveMaxVisible &&
+            stack.every((panel, index) => panel.parentItem.id === parents[index].id && !panel.isDrillDown && panel.history.length === 0));
+    }
+    /**
+     * Re-reads the children of the open panels in place, keeping each panel's id.
+     *
+     * The route-driven counterpart of {@link openPanel} for panels that are already open:
+     * their parents may have been rebuilt with different children (an item added, a badge
+     * changed), and the panel has to show them without being mounted again.
+     *
+     * @param parents - The same parents {@link holdsPanelChain} was asked about.
+     */
+    refreshPanelItems(parents) {
+        this._panelStack.update((stack) => stack.map((panel, index) => ({
+            ...panel,
+            parentItem: parents[index],
+            items: parents[index].children ?? []
+        })));
+    }
     /**
      * Opens a new panel for the given parent item's children.
      * If the panel count has reached `panelMaxVisible`, drills down within the last panel instead.
@@ -3309,11 +3342,20 @@ class HubNavComponent {
             return;
         }
         this._lastSyncedPath = path;
-        // Always rebuild route-driven panel state from scratch to avoid stale
-        // panel stacks when visibility limits or orientation changed.
+        const sectionItem = rootItem.children.find((child) => child.children?.length && this.state.isItemOrDescendantActive(child, url));
+        // Moving between entries of the panels already open keeps them. Rebuilding gave each
+        // panel a new id, the container tracks panels by id, and so every click inside a
+        // panel mounted it again: its entrance animation replayed and its items jumped. The
+        // contents are re-read in place, so a changed list of items still shows.
+        const wanted = sectionItem ? [rootItem, sectionItem] : [rootItem];
+        if (this.state.holdsPanelChain(wanted)) {
+            this.state.refreshPanelItems(wanted);
+            return;
+        }
+        // Anything else rebuilds from scratch, which also covers a visibility limit or an
+        // orientation that changed since the panels were opened.
         this.state.closeAllPanels();
         this.state.openPanel(rootItem, rootItems);
-        const sectionItem = rootItem.children.find((child) => child.children?.length && this.state.isItemOrDescendantActive(child, url));
         if (sectionItem) {
             // Keep root-level replacement logic scoped to true root items.
             // Passing rootItems here preserves drill-down behavior when