@arsedizioni/ars-utils 22.7.4 → 22.7.6

package/fesm2022/arsedizioni-ars-utils-ui.navigation.mjs

@@ -8,7 +8,7 @@ import * as i1 from "@angular/material/icon";
 import { MatIconModule } from "@angular/material/icon";
 import * as i2 from "@angular/material/tooltip";
 import { MatTooltipModule } from "@angular/material/tooltip";
-import { NavigationEnd, Router } from "@angular/router";
+import { NavigationCancel, NavigationEnd, NavigationError, NavigationSkipped, Router } from "@angular/router";
 import { EMPTY, distinctUntilChanged, filter, map } from "rxjs";
 import { ThemeService } from "@arsedizioni/ars-utils/core";
 import { MediaObserver } from "@arsedizioni/ars-utils/ui";
@@ -132,6 +132,7 @@ var NavigationBarComponent = class NavigationBarComponent {
 		this.itemElements = viewChildren("navItem", ...ngDevMode ? [{ debugName: "itemElements" }] : /* istanbul ignore next */ []);
 		this.panelElements = viewChildren("panelItem", ...ngDevMode ? [{ debugName: "panelElements" }] : /* istanbul ignore next */ []);
 		this.routerUrl = signal(void 0, ...ngDevMode ? [{ debugName: "routerUrl" }] : /* istanbul ignore next */ []);
+		this.pendingId = signal(void 0, ...ngDevMode ? [{ debugName: "pendingId" }] : /* istanbul ignore next */ []);
 		this.themeChanged = toSignal(this.themeService?.changed ?? EMPTY, { initialValue: void 0 });
 		this.isDark = computed(() => {
 			this.themeChanged();
@@ -283,18 +284,29 @@ var NavigationBarComponent = class NavigationBarComponent {
 			});
 			return groups;
 		}, ...ngDevMode ? [{ debugName: "renderGroups" }] : /* istanbul ignore next */ []);
+		this.routerDriven = computed(() => this.routerSync() && !!this.router, ...ngDevMode ? [{ debugName: "routerDriven" }] : /* istanbul ignore next */ []);
+		this.routedTargets = computed(() => {
+			const result = [];
+			const hrefs = this.hrefs();
+			for (const item of this.allItems()) {
+				if (item.href || item.route === void 0) continue;
+				const href = hrefs.get(item.id);
+				if (href) result.push({
+					item,
+					href
+				});
+			}
+			return result;
+		}, ...ngDevMode ? [{ debugName: "routedTargets" }] : /* istanbul ignore next */ []);
+		this.routedIds = computed(() => new Set(this.routedTargets().map((t) => t.item.id)), ...ngDevMode ? [{ debugName: "routedIds" }] : /* istanbul ignore next */ []);
 		this.routerActiveId = computed(() => {
-			if (!this.routerSync()) return void 0;
+			if (!this.routerDriven()) return void 0;
 			const url = this.routerUrl();
 			if (!url) return void 0;
 			const path = NavigationBarComponent.pathOf(url);
-			const hrefs = this.hrefs();
 			let best;
 			let bestLength = -1;
-			for (const item of this.allItems()) {
-				if (item.href || item.route === void 0) continue;
-				const href = hrefs.get(item.id);
-				if (!href) continue;
+			for (const { item, href } of this.routedTargets()) {
 				const target = NavigationBarComponent.pathOf(href);
 				if ((item.exact ? path === target : path === target || path.startsWith(target.endsWith("/") ? target : `${target}/`)) && target.length > bestLength) {
 					best = item.id;
@@ -303,7 +315,14 @@ var NavigationBarComponent = class NavigationBarComponent {
 			}
 			return best;
 		}, ...ngDevMode ? [{ debugName: "routerActiveId" }] : /* istanbul ignore next */ []);
-		this.activeId = computed(() => this.routerActiveId() ?? this.selectedId(), ...ngDevMode ? [{ debugName: "activeId" }] : /* istanbul ignore next */ []);
+		this.activeId = computed(() => {
+			const pending = this.pendingId();
+			if (pending !== void 0) return pending;
+			const routed = this.routerActiveId();
+			if (routed !== void 0) return routed;
+			const selected = this.selectedId();
+			return selected !== void 0 && this.routerDriven() && this.routedIds().has(selected) ? void 0 : selected;
+		}, ...ngDevMode ? [{ debugName: "activeId" }] : /* istanbul ignore next */ []);
 		this.defaultExpandedIds = computed(() => {
 			const result = /* @__PURE__ */ new Set();
 			for (const item of this.allItems()) if (item.expanded) result.add(item.id);
@@ -452,6 +471,7 @@ var NavigationBarComponent = class NavigationBarComponent {
 		if (router) {
 			this.routerUrl.set(router.url);
 			router.events.pipe(filter((e) => e instanceof NavigationEnd), map((e) => e.urlAfterRedirects), distinctUntilChanged(), takeUntilDestroyed(this.destroyRef)).subscribe((url) => this.routerUrl.set(url));
+			router.events.pipe(filter((e) => e instanceof NavigationEnd || e instanceof NavigationCancel || e instanceof NavigationError || e instanceof NavigationSkipped), takeUntilDestroyed(this.destroyRef)).subscribe(() => this.pendingId.set(void 0));
 		}
 	}
 	select(render, event) {
@@ -470,6 +490,7 @@ var NavigationBarComponent = class NavigationBarComponent {
 		if (render.href && (mouse.ctrlKey || mouse.metaKey || mouse.shiftKey || mouse.button === 1)) return;
 		if (render.routed && render.href) {
 			event.preventDefault();
+			if (this.routerDriven()) this.pendingId.set(item.id);
 			this.router?.navigateByUrl(render.href);
 		}
 		this.selectedId.set(item.id);