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,22 @@
+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(
+    params: Record<string, string>,
+  ): Observable<string> {
+    const id = params['id'];
+    return this.getTitleById(id).pipe(
+      map(titles => titles?.title || `Document #${id}`),
+      catchError(() => of(`Document #${id}`)),
+      delay(4000), // 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,20 @@
+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(params: Record<string, string>): Observable<string> {
+    const id = params['id']; // Access any param key dynamically
+    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,121 @@
+<nav aria-label="breadcrumb">
+  <div
+    *ngIf="(loading$ | async) && showLoadingSkeleton"
+    class="breadcrumb-skeleton"
+  >
+    <div class="skeleton-item"></div>
+    <span [class]="separatorClass">{{ separator }}</span>
+    <div class="skeleton-item"></div>
+    <span [class]="separatorClass">{{ separator }}</span>
+    <div class="skeleton-item"></div>
+  </div>
+
+  <ng-container *ngIf="!(loading$ | async)">
+    <ul class="breadcrumb" *ngIf="breadcrumbs$ | async as breadcrumbs">
+      <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"
+              [title]="breadcrumbs[0].label"
+              class="breadcrumb-label"
+            >
+              <nb-icon
+                *ngIf="breadcrumbs[0].icon"
+                [icon]="breadcrumbs[0].icon"
+                class="breadcrumb-icon"
+              ></nb-icon>
+              {{ getTrimmedLabel(breadcrumbs[0].label) }}
+            </a>
+          </ng-container>
+          <ng-template #noLinkFirst>
+            <span class="breadcrumb-label" [title]="breadcrumbs[0].label">
+              <nb-icon
+                *ngIf="breadcrumbs[0].icon"
+                [icon]="breadcrumbs[0].icon"
+                class="breadcrumb-icon"
+              ></nb-icon>
+              {{ getTrimmedLabel(breadcrumbs[0].label) }}
+            </span>
+          </ng-template>
+        </li>
+
+        <span class="{{ separatorClass }}">{{ separator }}</span>
+
+        <li class="breadcrumb-item clickable" (click)="toggleExpand()">...</li>
+        <span class="{{ separatorClass }}">{{ separator }}</span>
+
+        <li class="breadcrumb-item active">
+          <ng-container
+            *ngIf="
+              !breadcrumbs[breadcrumbs.length - 1].skipLink;
+              else noLinkLast
+            "
+          >
+            <a
+              [routerLink]="breadcrumbs[breadcrumbs.length - 1].url"
+              [title]="breadcrumbs[breadcrumbs.length - 1].label"
+              class="breadcrumb-label"
+            >
+              <nb-icon
+                *ngIf="breadcrumbs[breadcrumbs.length - 1].icon"
+                [icon]="breadcrumbs[breadcrumbs.length - 1].icon"
+                class="breadcrumb-icon"
+              ></nb-icon>
+              {{ getTrimmedLabel(breadcrumbs[breadcrumbs.length - 1].label) }}
+            </a>
+          </ng-container>
+          <ng-template #noLinkLast>
+            <span
+              class="breadcrumb-label"
+              [title]="breadcrumbs[breadcrumbs.length - 1].label"
+            >
+              <nb-icon
+                *ngIf="breadcrumbs[breadcrumbs.length - 1].icon"
+                [icon]="breadcrumbs[breadcrumbs.length - 1].icon"
+                class="breadcrumb-icon"
+              ></nb-icon>
+              {{ getTrimmedLabel(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"
+                [title]="breadcrumb.label"
+                class="breadcrumb-label"
+              >
+                <nb-icon
+                  *ngIf="breadcrumb.icon"
+                  [icon]="breadcrumb.icon"
+                  class="breadcrumb-icon"
+                ></nb-icon>
+                {{ getTrimmedLabel(breadcrumb.label) }}
+              </a>
+            </ng-container>
+            <ng-template #noLink>
+              <span class="breadcrumb-label" [title]="breadcrumb.label">
+                <nb-icon
+                  *ngIf="breadcrumb.icon"
+                  [icon]="breadcrumb.icon"
+                  class="breadcrumb-icon"
+                ></nb-icon>
+                {{ getTrimmedLabel(breadcrumb.label) }}
+              </span>
+            </ng-template>
+          </li>
+          <span *ngIf="!last" class="{{ separatorClass }}">{{
+            separator
+          }}</span>
+        </ng-container>
+      </ng-template>
+    </ul>
+  </ng-container>
+</nav>

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

@@ -0,0 +1,86 @@
+.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: 0.875rem;
+    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;
+      }
+    }
+
+    .breadcrumb-label {
+      max-width: 12rem; // Restrict label width
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+      display: inline-block;
+      vertical-align: middle;
+    }
+  }
+
+  .separator {
+    margin: 0 0.375rem;
+    color: #aaa;
+    font-size: 0.875rem;
+  }
+}
+
+.breadcrumb-skeleton {
+  display: flex;
+  align-items: center;
+  padding: 0.5rem 0;
+
+  .skeleton-item {
+    height: 1rem;
+    background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
+    background-size: 200% 100%;
+    animation: loading 1.5s infinite;
+    border-radius: 4px;
+    min-width: 3.75rem;
+    max-width: 7.5rem;
+    width: 5rem;
+  }
+
+  .separator {
+    margin: 0 0.375rem;
+    color: #ccc;
+    font-size: 0.875rem;
+  }
+}
+
+@keyframes loading {
+  0% {
+    background-position: 200% 0;
+  }
+  100% {
+    background-position: -200% 0;
+  }
+}