feat(arc): implement breadcrumb feature

GH-126

Author: Vaibhav Bhalla

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

@@ -9,7 +9,10 @@ export class TitleService {
     const title = this.titles.find(u => u.id === id);
     return of(title);
   }
-  getTitleNameForBreadcrumb(id: string): Observable<string> {
+  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}`)),

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

@@ -9,7 +9,8 @@ export class UserService {
     const user = this.users.find(u => u.id === id);
     return of(user);
   }
-  getUserNameForBreadcrumb(id: string): Observable<string> {
+  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}`)),

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

@@ -5,42 +5,69 @@
     >
       <li class="breadcrumb-item">
         <ng-container *ngIf="!breadcrumbs[0].skipLink; else noLinkFirst">
-          <a [routerLink]="breadcrumbs[0].url">{{ breadcrumbs[0].label }}</a>
+          <a
+            [routerLink]="breadcrumbs[0].url"
+            [title]="breadcrumbs[0].label"
+            class="breadcrumb-label"
+          >
+            {{ getTrimmedLabel(breadcrumbs[0].label) }}
+          </a>
         </ng-container>
         <ng-template #noLinkFirst>
-          <span>{{ breadcrumbs[0].label }}</span>
+          <span class="breadcrumb-label" [title]="breadcrumbs[0].label">
+            {{ getTrimmedLabel(breadcrumbs[0].label) }}
+          </span>
         </ng-template>
       </li>
-      <span class="separator">{{ separator }}</span>
+
+      <span class="{{ separatorClass }}">{{ separator }}</span>
 
       <li class="breadcrumb-item clickable" (click)="toggleExpand()">...</li>
-      <span class="separator">{{ separator }}</span>
+      <span class="{{ separatorClass }}">{{ separator }}</span>
 
-      <li class="breadcrumb-item" [class.active]="true">
+      <li class="breadcrumb-item active">
         <ng-container
           *ngIf="!breadcrumbs[breadcrumbs.length - 1].skipLink; else noLinkLast"
         >
-          <a [routerLink]="breadcrumbs[breadcrumbs.length - 1].url">
-            {{ breadcrumbs[breadcrumbs.length - 1].label }}
+          <a
+            [routerLink]="breadcrumbs[breadcrumbs.length - 1].url"
+            [title]="breadcrumbs[breadcrumbs.length - 1].label"
+            class="breadcrumb-label"
+          >
+            {{ getTrimmedLabel(breadcrumbs[breadcrumbs.length - 1].label) }}
           </a>
         </ng-container>
         <ng-template #noLinkLast>
-          <span>{{ breadcrumbs[breadcrumbs.length - 1].label }}</span>
+          <span
+            class="breadcrumb-label"
+            [title]="breadcrumbs[breadcrumbs.length - 1].label"
+          >
+            {{ getTrimmedLabel(breadcrumbs[breadcrumbs.length - 1].label) }}
+          </span>
         </ng-template>
       </li>
     </ng-container>
 
+    <!-- Full breadcrumb trail -->
     <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>
+            <a
+              [routerLink]="breadcrumb.url"
+              [title]="breadcrumb.label"
+              class="breadcrumb-label"
+            >
+              {{ getTrimmedLabel(breadcrumb.label) }}
+            </a>
           </ng-container>
           <ng-template #noLink>
-            <span>{{ breadcrumb.label }}</span>
+            <span class="breadcrumb-label" [title]="breadcrumb.label">
+              {{ getTrimmedLabel(breadcrumb.label) }}
+            </span>
           </ng-template>
         </li>
-        <span *ngIf="!last" class="separator">{{ separator }}</span>
+        <span *ngIf="!last" class="{{ separatorClass }}">{{ separator }}</span>
       </ng-container>
     </ng-template>
   </ul>

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

@@ -9,7 +9,7 @@
   .breadcrumb-item {
     display: flex;
     align-items: center;
-    font-size: 14px;
+    font-size: 0.875rem;
     color: #555;
 
     a {
@@ -25,6 +25,7 @@
       font-weight: 600;
       color: #333;
     }
+
     &.clickable {
       cursor: pointer;
       color: #007bff;
@@ -34,11 +35,20 @@
         color: #0056b3;
       }
     }
+
+    .breadcrumb-label {
+      max-width: 12rem; // You can adjust this
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+      display: inline-block;
+      vertical-align: middle;
+    }
   }
 
   .separator {
-    margin: 0 6px;
+    margin: 0 0.375rem;
     color: #aaa;
-    font-size: 14px;
+    font-size: 0.875rem;
   }
 }

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

@@ -20,6 +20,7 @@ export class BreadcrumbComponent implements OnInit {
   @Input() maxItems = 8;
   @Input() separatorClass = 'separator';
   @Input() itemClass = 'breadcrumb-item';
+  @Input() maxLabelLength = 30;
 
   expanded = false;
   private destroy$ = new Subject<void>();
@@ -31,6 +32,11 @@ export class BreadcrumbComponent implements OnInit {
       }
     });
   }
+  getTrimmedLabel(label: string): string {
+    return label.length > this.maxLabelLength
+      ? label.slice(0, this.maxLabelLength).trimEnd() + '…'
+      : label;
+  }
   ngOnDestroy(): void {
     this.destroy$.next();
     this.destroy$.complete();

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

@@ -66,7 +66,9 @@ export class BreadcrumbService {
     const asyncConfig = data?.asyncBreadcrumb;
     if (asyncConfig?.service && asyncConfig?.method) {
       const params = route.paramMap;
-      const paramValue = params.get('id');
+      const paramValue = Object.fromEntries(
+        params.keys.map(k => [k, params.get(k)]),
+      );
       const fallback =
         asyncConfig.fallbackLabel?.(params) || this._toTitleCase(path);
       const loadingLabel = asyncConfig.loadingLabel || fallback;

projects/arc/src/app/main/bread-crumb-introduction/bread-crumb-introduction.component.html

@@ -121,6 +121,20 @@ <h3>3. Breadcrumb Inputs</h3>
         <td>itemClass</td>
         <td>Custom class applied to each breadcrumb element.</td>
       </tr>
+      <tr>
+        <td>maxLabelLength</td>
+        <td>
+          Maximum number of characters shown in each breadcrumb label before it
+          gets trimmed with an ellipsis (…)
+        </td>
+      </tr>
+      <tr>
+        <td>maxItems</td>
+        <td>
+          Maximum number of breadcrumb items to display before collapsing the
+          middle items into an expandable “...” element
+        </td>
+      </tr>
     </tbody>
   </table>
 </div>

projects/arc/src/app/main/main.component.html

@@ -31,6 +31,7 @@
       [maxItems]="2"
       [itemClass]="'breadcrumb-item'"
       [separatorClass]="'separator'"
+      [maxLabelLength]="10"
     ></app-breadcrumb>
     <router-outlet class="main-router"></router-outlet>
   </nb-layout-column>