feat(arc): implement breadcrumb feature

projects/arc-lib/src/lib/components/breadcrumb/breadcrumb-demo/mock-data.constants.ts

@@ -0,0 +1,10 @@
+import {TitleDetails, UserDetails} from './user-title.interface';
+
+export const USERS: UserDetails[] = [
+  {id: '123', name: 'John Doe', email: 'john.doe123@example.com'},
+  {id: '124', name: 'Jane Smith', email: 'jane.smith124@example.com'},
+];
+export const TITLES: TitleDetails[] = [
+  {id: '1', title: 'Contract.pdf'},
+  {id: '2', title: 'Appointment.pdf'},
+];

projects/arc-lib/src/lib/components/breadcrumb/breadcrumb-demo/user-title.interface.ts

@@ -0,0 +1,9 @@
+export interface UserDetails {
+  id: string;
+  name: string;
+  email: string;
+}
+export interface TitleDetails {
+  id: string;
+  title: string;
+}

projects/arc-lib/src/lib/components/breadcrumb/breadcrumb-demo/user-title/user-title.component.html

@@ -0,0 +1,5 @@
+<div class="container mt-4">
+  <h2>Documentation</h2>
+  <p><strong>ID:</strong>{{ title?.id }}</p>
+  <p><strong>Title:</strong>{{ title?.title }}</p>
+</div>

projects/arc-lib/src/lib/components/breadcrumb/breadcrumb-demo/user-title/user-title.component.ts

@@ -0,0 +1,23 @@
+import {Component} from '@angular/core';
+import {ActivatedRoute} from '@angular/router';
+import {TitleDetails} from '../user-title.interface';
+import {TitleService} from './user-title.service';
+
+@Component({
+  selector: 'lib-user-title',
+  templateUrl: './user-title.component.html',
+})
+export class UserTitleComponent {
+  title: TitleDetails;
+  constructor(
+    private readonly route: ActivatedRoute,
+    private readonly titleService: TitleService,
+  ) {
+    const id = this.route.snapshot.paramMap.get('id');
+    if (id) {
+      this.titleService.getTitleById(id).subscribe(title => {
+        this.title = title;
+      });
+    }
+  }
+}

projects/arc-lib/src/lib/components/breadcrumb/breadcrumb-demo/user-title/user-title.service.ts

@@ -0,0 +1,19 @@
+import {catchError, delay, map, Observable, of} from 'rxjs';
+import {TITLES} from '../mock-data.constants';
+import {TitleDetails} from '../user-title.interface';
+
+export class TitleService {
+  private readonly titles = TITLES;
+
+  getTitleById(id: string): Observable<TitleDetails> {
+    const title = this.titles.find(u => u.id === id);
+    return of(title);
+  }
+  getTitleNameForBreadcrumb(id: string): Observable<string> {
+    return this.getTitleById(id).pipe(
+      map(titles => titles?.title || `Document #${id}`),
+      catchError(() => of(`Document #${id}`)),
+      delay(2000), // Simulating network delay
+    );
+  }
+}

projects/arc-lib/src/lib/components/breadcrumb/breadcrumb-demo/user/user.component.html

@@ -0,0 +1,8 @@
+<div class="container mt-4">
+  <h2>User Details</h2>
+  <p><strong>ID:</strong> {{ user?.id }}</p>
+  <p><strong>Name:</strong> {{ user?.name }}</p>
+  <p><strong>Email:</strong> {{ user?.email }}</p>
+
+  <router-outlet></router-outlet>
+</div>

projects/arc-lib/src/lib/components/breadcrumb/breadcrumb-demo/user/user.component.ts

@@ -0,0 +1,27 @@
+import {CommonModule} from '@angular/common';
+import {Component} from '@angular/core';
+import {ActivatedRoute, RouterModule} from '@angular/router';
+import {UserDetails} from '../user-title.interface';
+import {UserService} from './user.service';
+
+@Component({
+  selector: 'lib-user',
+  standalone: true,
+  templateUrl: './user.component.html',
+  imports: [CommonModule, RouterModule],
+})
+export class UserComponent {
+  user: UserDetails;
+
+  constructor(
+    private readonly route: ActivatedRoute,
+    private readonly userService: UserService,
+  ) {
+    const id = this.route.snapshot.paramMap.get('id');
+    if (id) {
+      this.userService.getUserById(id).subscribe(user => {
+        this.user = user;
+      });
+    }
+  }
+}

projects/arc-lib/src/lib/components/breadcrumb/breadcrumb-demo/user/user.service.ts

@@ -0,0 +1,19 @@
+import {catchError, delay, map, Observable, of} from 'rxjs';
+import {USERS} from '../mock-data.constants';
+import {UserDetails} from '../user-title.interface';
+
+export class UserService {
+  private readonly users = USERS;
+
+  getUserById(id: string): Observable<UserDetails> {
+    const user = this.users.find(u => u.id === id);
+    return of(user);
+  }
+  getUserNameForBreadcrumb(id: string): Observable<string> {
+    return this.getUserById(id).pipe(
+      map(user => user?.name || `User #${id}`),
+      catchError(() => of(`User #${id}`)),
+      delay(4000),
+    );
+  }
+}

projects/arc-lib/src/lib/components/breadcrumb/breadcrumb.component.html

@@ -0,0 +1,47 @@
+<nav aria-label="breadcrumb" *ngIf="breadcrumbs$ | async as breadcrumbs">
+  <ul class="breadcrumb">
+    <ng-container
+      *ngIf="breadcrumbs.length > maxItems && !expanded; else fullBreadcrumb"
+    >
+      <li class="breadcrumb-item">
+        <ng-container *ngIf="!breadcrumbs[0].skipLink; else noLinkFirst">
+          <a [routerLink]="breadcrumbs[0].url">{{ breadcrumbs[0].label }}</a>
+        </ng-container>
+        <ng-template #noLinkFirst>
+          <span>{{ breadcrumbs[0].label }}</span>
+        </ng-template>
+      </li>
+      <span class="separator">{{ separator }}</span>
+
+      <li class="breadcrumb-item clickable" (click)="toggleExpand()">...</li>
+      <span class="separator">{{ separator }}</span>
+
+      <li class="breadcrumb-item" [class.active]="true">
+        <ng-container
+          *ngIf="!breadcrumbs[breadcrumbs.length - 1].skipLink; else noLinkLast"
+        >
+          <a [routerLink]="breadcrumbs[breadcrumbs.length - 1].url">
+            {{ breadcrumbs[breadcrumbs.length - 1].label }}
+          </a>
+        </ng-container>
+        <ng-template #noLinkLast>
+          <span>{{ breadcrumbs[breadcrumbs.length - 1].label }}</span>
+        </ng-template>
+      </li>
+    </ng-container>
+
+    <ng-template #fullBreadcrumb>
+      <ng-container *ngFor="let breadcrumb of breadcrumbs; let last = last">
+        <li class="breadcrumb-item" [class.active]="last">
+          <ng-container *ngIf="!breadcrumb.skipLink && !last; else noLink">
+            <a [routerLink]="breadcrumb.url">{{ breadcrumb.label }}</a>
+          </ng-container>
+          <ng-template #noLink>
+            <span>{{ breadcrumb.label }}</span>
+          </ng-template>
+        </li>
+        <span *ngIf="!last" class="separator">{{ separator }}</span>
+      </ng-container>
+    </ng-template>
+  </ul>
+</nav>

projects/arc-lib/src/lib/components/breadcrumb/breadcrumb.component.scss

@@ -0,0 +1,44 @@
+.breadcrumb {
+  display: flex;
+  flex-wrap: wrap;
+  list-style: none;
+  padding: 0;
+  margin: 0;
+  background-color: transparent;
+
+  .breadcrumb-item {
+    display: flex;
+    align-items: center;
+    font-size: 14px;
+    color: #555;
+
+    a {
+      color: #007bff;
+      text-decoration: none;
+
+      &:hover {
+        text-decoration: underline;
+      }
+    }
+
+    &.active {
+      font-weight: 600;
+      color: #333;
+    }
+    &.clickable {
+      cursor: pointer;
+      color: #007bff;
+      text-decoration: underline;
+
+      &:hover {
+        color: #0056b3;
+      }
+    }
+  }
+
+  .separator {
+    margin: 0 6px;
+    color: #aaa;
+    font-size: 14px;
+  }
+}

projects/arc-lib/src/lib/components/breadcrumb/breadcrumb.component.ts

@@ -0,0 +1,41 @@
+import {Component, Input, isDevMode, OnInit} from '@angular/core';
+import {CommonModule} from '@angular/common';
+import {Breadcrumb} from './breadcrumb.interface';
+import {BreadcrumbService} from './breadcrumb.service';
+import {Observable, Subject, takeUntil} from 'rxjs';
+import {RouterModule} from '@angular/router';
+
+@Component({
+  selector: 'app-breadcrumb',
+  templateUrl: './breadcrumb.component.html',
+  standalone: true,
+  imports: [CommonModule, RouterModule],
+  styleUrls: ['./breadcrumb.component.scss'],
+})
+export class BreadcrumbComponent implements OnInit {
+  breadcrumbs$: Observable<Breadcrumb[]> = this.breadcrumbService.breadcrumbs;
+
+  @Input() staticBreadcrumbs = [];
+  @Input() separator = '>';
+  @Input() maxItems = 8;
+  @Input() separatorClass = 'separator';
+  @Input() itemClass = 'breadcrumb-item';
+
+  expanded = false;
+  private destroy$ = new Subject<void>();
+  constructor(private readonly breadcrumbService: BreadcrumbService) {}
+  ngOnInit(): void {
+    this.breadcrumbs$.pipe(takeUntil(this.destroy$)).subscribe(breadcrumbs => {
+      if (isDevMode()) {
+        console.log('Breadcrumbs:', breadcrumbs);
+      }
+    });
+  }
+  ngOnDestroy(): void {
+    this.destroy$.next();
+    this.destroy$.complete();
+  }
+  toggleExpand() {
+    this.expanded = !this.expanded;
+  }
+}

projects/arc-lib/src/lib/components/breadcrumb/breadcrumb.interface.ts

@@ -0,0 +1,5 @@
+export interface Breadcrumb {
+  label: string;
+  url: string;
+  skipLink?: boolean;
+}

projects/arc-lib/src/lib/components/breadcrumb/breadcrumb.service.ts

@@ -0,0 +1,109 @@
+import {Injectable, Injector} from '@angular/core';
+import {ActivatedRouteSnapshot, NavigationEnd, Router} from '@angular/router';
+import {BehaviorSubject} from 'rxjs';
+import {filter} from 'rxjs/operators';
+import {Breadcrumb} from './breadcrumb.interface';
+
+@Injectable({providedIn: 'root'})
+export class BreadcrumbService {
+  private readonly breadcrumbs$ = new BehaviorSubject<Breadcrumb[]>([]);
+
+  constructor(
+    private readonly router: Router,
+    private readonly injector: Injector,
+  ) {
+    this.router.events
+      .pipe(filter(event => event instanceof NavigationEnd))
+      .subscribe(async () => {
+        const root = this.router.routerState.snapshot.root;
+        const breadcrumbs = this.buildBreadcrumbs(root);
+        this.breadcrumbs$.next(breadcrumbs);
+      });
+  }
+
+  private buildBreadcrumbs(
+    route: ActivatedRouteSnapshot,
+    url = '',
+    breadcrumbs: Breadcrumb[] = [],
+  ): Breadcrumb[] {
+    if (!route.routeConfig) {
+      return route.firstChild
+        ? this.buildBreadcrumbs(route.firstChild, url, breadcrumbs)
+        : breadcrumbs;
+    }
+
+    let path = route.routeConfig.path || '';
+
+    // Replace route params like :id with actual values
+    Object.keys(route.params).forEach(key => {
+      path = path.replace(`:${key}`, route.params[key]);
+    });
+    const nextUrl = path ? `${url}/${path}` : url;
+    const label = this._resolveLabel(route, path, nextUrl);
+    const skipLink = route.routeConfig.data?.['skipLink'] ?? false;
+
+    if (label && label.trim() !== '') {
+      breadcrumbs.push({label, url: nextUrl, skipLink});
+    }
+
+    return route.firstChild
+      ? this.buildBreadcrumbs(route.firstChild, nextUrl, breadcrumbs)
+      : breadcrumbs;
+  }
+
+  private _toTitleCase(str: string): string {
+    return str.replace(/-/g, ' ').replace(/\b\w/g, char => char.toUpperCase());
+  }
+
+  private _resolveLabel(
+    route: ActivatedRouteSnapshot,
+    path: string,
+    currentUrl: string,
+  ): string {
+    const data = route.routeConfig?.data;
+
+    //async breadcrumb logic
+    const asyncConfig = data?.asyncBreadcrumb;
+    if (asyncConfig?.service && asyncConfig?.method) {
+      const params = route.paramMap;
+      const paramValue = params.get('id');
+      const fallback =
+        asyncConfig.fallbackLabel?.(params) || this._toTitleCase(path);
+      const loadingLabel = asyncConfig.loadingLabel || fallback;
+
+      setTimeout(async () => {
+        try {
+          const serviceInstance = this.injector.get(asyncConfig.service);
+          const result$ = serviceInstance[asyncConfig.method](paramValue);
+          const result = await result$.toPromise();
+          this.updateBreadcrumbLabel(currentUrl, result);
+        } catch (error) {
+          console.warn('Async breadcrumb load failed:', error);
+        }
+      }, 0);
+
+      return loadingLabel;
+    }
+    const breadcrumbData = data?.['breadcrumb'];
+
+    if (typeof breadcrumbData === 'string') {
+      return breadcrumbData;
+    }
+
+    return this._toTitleCase(path);
+  }
+  updateBreadcrumbLabel(url: string, newLabel: string): void {
+    const currentBreadcrumbs = this.breadcrumbs$.getValue();
+    const index = currentBreadcrumbs.findIndex(bc => bc.url === url);
+    if (index !== -1) {
+      currentBreadcrumbs[index] = {
+        ...currentBreadcrumbs[index],
+        label: newLabel,
+      };
+      this.breadcrumbs$.next([...currentBreadcrumbs]);
+    }
+  }
+  get breadcrumbs() {
+    return this.breadcrumbs$.asObservable();
+  }
+}