feat(list-details): support usage with the Angular router

This makes the `list-details` detects a `router-outlet` inside the `si-details-pane`.
In addition, the "empty state" route must be flagged
by setting `data: { SI_EMPTY_DETAILS: true }` in the route configuration.
That way the `list-details` can detect whether the current route is the empty state or not.

Author: spike-rabbit

playwright/e2e/element-examples/si-list-details.spec.ts

@@ -103,4 +103,13 @@ test.describe('si-list-details', () => {
       axeRulesSet: [{ id: 'scrollable-region-focusable', enabled: false }]
     });
   });
+
+  test('with router in mobile mode', async ({ page, si }) => {
+    await page.setViewportSize({ width: 600, height: 800 }); // mdMinimum is 768px
+    await si.visitExample('si-list-details/si-list-details-router');
+    await page.getByRole('cell', { name: 'Max Meier 2', exact: true }).click();
+    await expect(page.getByText(`"name": "Max Meier 2"`)).toBeInViewport();
+    await page.goBack();
+    await expect(page.getByRole('cell', { name: 'Max Meier 2', exact: true })).toBeInViewport();
+  });
 });

projects/element-ng/list-details/si-details-pane-header/si-details-pane-header.component.ts

@@ -13,8 +13,10 @@ import {
   viewChild
 } from '@angular/core';
 import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
+import { ActivatedRoute, Router } from '@angular/router';
 import { SiTranslatePipe, t, TranslatableString } from '@siemens/element-translate-ng/translate';
 
+import { SiDetailsPaneComponent } from '../si-details-pane/si-details-pane.component';
 import { SiListDetailsComponent } from '../si-list-details.component';
 
 /** @experimental */
@@ -55,6 +57,18 @@ export class SiDetailsPaneHeaderComponent {
    */
   readonly backButtonText = input(t(() => $localize`:@@SI_LIST_DETAILS.BACK:Back`));
 
+  /**
+   * The URL to navigate to when the back buttons is clicked.
+   * This is only used when the `si-details-pane` is used with a router-outlet.
+   *
+   * @defaultValue '../'
+   */
+  readonly backButtonUrl = input('../');
+
+  private isRouterBased = inject(SiDetailsPaneComponent).isRouterBased;
+  private router = inject(Router, { optional: true });
+  private activatedRoute = inject(ActivatedRoute, { optional: true });
+
   private readonly backButton = viewChild<ElementRef<HTMLElement>>('backButton');
 
   constructor() {
@@ -74,6 +88,12 @@ export class SiDetailsPaneHeaderComponent {
   }
 
   protected backClicked(): void {
-    this.parent.detailsBackClicked();
+    this.parent.detailsBackClicked({
+      animationDone: this.isRouterBased()
+        ? // We navigate back after the animation is done.
+          // This ensures, that the details pane visible while animating.
+          () => this.router!.navigate([this.backButtonUrl()], { relativeTo: this.activatedRoute })
+        : undefined
+    });
   }
 }

projects/element-ng/list-details/si-details-pane/si-details-pane.component.ts

@@ -2,7 +2,15 @@
  * Copyright (c) Siemens 2016 - 2025
  * SPDX-License-Identifier: MIT
  */
-import { ChangeDetectionStrategy, Component, inject } from '@angular/core';
+import {
+  ChangeDetectionStrategy,
+  Component,
+  computed,
+  contentChild,
+  effect,
+  inject
+} from '@angular/core';
+import { RouterOutlet } from '@angular/router';
 
 import { SiListDetailsComponent } from '../si-list-details.component';
 
@@ -22,4 +30,19 @@ import { SiListDetailsComponent } from '../si-list-details.component';
 })
 export class SiDetailsPaneComponent {
   protected parent = inject(SiListDetailsComponent);
+
+  private readonly routerOutlet = contentChild(RouterOutlet);
+  /** @internal */
+  readonly isRouterBased = computed(() => !!this.routerOutlet());
+
+  constructor() {
+    effect(() => {
+      const outlet = this.routerOutlet();
+      if (outlet) {
+        outlet.activateEvents.subscribe(() =>
+          this.parent.detailsActive.set(!outlet.activatedRouteData.SI_EMPTY_DETAILS)
+        );
+      }
+    });
+  }
 }

projects/element-ng/list-details/si-list-details.component.html

@@ -31,6 +31,7 @@
     [class.gap-6]="hasLargeSize()"
     [class.details-active]="detailsActive() && !hasLargeSize()"
     [@detailsExpanded]="detailsExpandedAnimation()"
+    (@detailsExpanded.done)="detailsExpandedAnimationDone()"
   >
     <ng-container *ngTemplateOutlet="listTemplate" />
     <ng-container *ngTemplateOutlet="detailsTemplate" />