refactor: enhance breadcrumb component templates for improved readability and functionality

- Updated breadcrumb.component.html and dropdown-breadcrumb.component.html to use structural directives for better readability and maintainability.
- Simplified the rendering of previous nodes and last nodes in the breadcrumb, ensuring proper handling of optional values.
- Removed unnecessary imports in dropdown-breadcrumb.component.ts to streamline the component's dependencies.

lib/content-services/src/lib/breadcrumb/breadcrumb.component.html

@@ -5,8 +5,8 @@
     role="navigation"
     [attr.aria-label]="'BREADCRUMB.ARIA-LABEL.BREADCRUMB' | translate"
 >
+    @if (hasPreviousNodes()) {
         <button
-        *ngIf="hasPreviousNodes()"
             tabindex="0"
             class="adf-breadcrumb-dropdown-trigger"
             (click)="open()"
@@ -17,30 +17,30 @@
                 <mat-icon [class.adf-isRoot]="!hasPreviousNodes()" class="adf-breadcrumb-dropdown-trigger-arrow" adf-icon="arrow_drop_down" />
             </div>
         </button>
-
         <mat-select
             #dropdown
-        *ngIf="hasPreviousNodes()"
             class="adf-breadcrumb-dropdown-path"
             tabindex="-1"
             role="button"
         >
+        @for (node of previousNodes; track node.id) {
             <mat-option
-            *ngFor="let node of previousNodes"
                 (click)="onRoutePathClick(node, $event)"
                 (onSelectionChange)="onRouteClick(node)"
                 class="adf-breadcrumb-path-option"
                 [disabled]="readOnly"
             >
-            {{ node.name | translate }}
+                {{ node.name ?? '' | translate }}
             </mat-option>
+            }
         </mat-select>
+    }
 
+    @for (item of lastNodes; track item.id; let last = $last) {
         <div
-        *ngFor="let item of lastNodes; let last = last"
             [class.adf-active]="last"
             [ngSwitch]="breadcrumbItemIsAnchor(last)"
-        title="{{ item.name | translate }}"
+            title="{{ item.name ?? '' | translate }}"
             class="adf-breadcrumb-item">
             <a
                 *ngSwitchCase="true"
@@ -49,7 +49,7 @@
                 class="adf-breadcrumb-item-anchor"
                 (click)="onRoutePathClick(item, $event)"
             >
-            {{ item.name | translate }}
+                {{ item.name ?? '' | translate }}
             </a>
 
             <div *ngSwitchDefault class="adf-breadcrumb-item-current" aria-current="location">
@@ -58,6 +58,7 @@
 
             <mat-icon class="adf-breadcrumb-item-chevron" *ngIf="!last" adf-icon="chevron_right" />
         </div>
+    }
 </nav>
 
 <nav
@@ -68,7 +69,7 @@
 >
     <div class="adf-breadcrumb-item adf-active" role="group">
         <div class="adf-breadcrumb-item-current">
-            {{ root | translate }}
+            {{ root ?? '' | translate }}
         </div>
     </div>
 </nav>

lib/content-services/src/lib/breadcrumb/dropdown-breadcrumb.component.html

@@ -1,7 +1,7 @@
-<nav *ngIf="route.length > 0" class="adf-dropdown-breadcrumb-container"
+@if (route.length > 0) {
+  <nav class="adf-dropdown-breadcrumb-container"
     role="navigation"
     [attr.aria-label]="'BREADCRUMB.ARIA-LABEL.BREADCRUMB' | translate">
-
     <button
       id="dropdown-breadcrumb-button"
       [tabindex]="hasPreviousNodes() ? 0 : -1"
@@ -13,36 +13,35 @@
       data-automation-id="dropdown-breadcrumb-trigger">
       <mat-icon class="adf-dropdown-breadcrumb-icon" [class.adf-isRoot]="!hasPreviousNodes()" adf-icon="folder" />
     </button>
-
     <mat-icon class="adf-dropdown-breadcrumb-icon adf-dropdown-breadcrumb-item-chevron" adf-icon="chevron_right" />
-
     <div class="adf-dropdown-breadcrumb-path">
+      @if (hasPreviousNodes()) {
         <mat-select
           #dropdown
-            *ngIf="hasPreviousNodes()"
           panelClass="adf-breadcrumb-dropdown-panel"
           class="adf-dropdown-breadcrumb-path-select"
           tabindex="-1"
           role="button"
           data-automation-id="dropdown-breadcrumb-path"
           aria-labelledby="dropdown-breadcrumb-button">
-
+          @for (node of previousNodes; track node) {
             <mat-option
-                *ngFor="let node of previousNodes;"
               (click)="onRoutePathClick(node, $event)"
               (onSelectionChange)="onRouteClick(node)"
               class="adf-dropdown-breadcrumb-path-option adf-dropdown-breadcrumb-path-option-node"
               data-automation-class="dropdown-breadcrumb-path-option"
               [disabled]="readOnly">
-                {{ node.name | translate }}
+              {{ node.name ?? '' | translate }}
             </mat-option>
+          }
         </mat-select>
+      }
     </div>
-
     <span
       class="adf-current-folder"
       [class.adf-isRoot]="!hasPreviousNodes()"
       data-automation-id="current-folder"
       aria-current="location">{{ currentNode.name }}
     </span>
-</nav>
+  </nav>
+}

lib/content-services/src/lib/breadcrumb/dropdown-breadcrumb.component.ts

@@ -19,13 +19,13 @@ import { Component, OnChanges, ViewChild, ViewEncapsulation } from '@angular/cor
 import { MatSelect, MatSelectModule } from '@angular/material/select';
 import { PathElement, Node } from '@alfresco/js-api';
 import { BreadcrumbComponent } from './breadcrumb.component';
-import { CommonModule } from '@angular/common';
+
 import { TranslatePipe } from '@ngx-translate/core';
 import { IconModule } from '@alfresco/adf-core';
 
 @Component({
     selector: 'adf-dropdown-breadcrumb',
-    imports: [CommonModule, IconModule, MatSelectModule, TranslatePipe],
+    imports: [IconModule, MatSelectModule, TranslatePipe],
     templateUrl: './dropdown-breadcrumb.component.html',
     styleUrls: ['./dropdown-breadcrumb.component.scss'],
     encapsulation: ViewEncapsulation.None,