refactor: improve breadcrumb component structure and remove unused imports

- Enhanced the breadcrumb.component.html for better readability by restructuring the template and using structural directives.
- Streamlined the rendering logic for previous and last nodes in the breadcrumb.
- Removed the unused CommonModule import from breadcrumb.component.ts to simplify dependencies.

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

@@ -1,5 +1,5 @@
+@if (folderNode) {
     <nav
-    *ngIf="folderNode"
         data-automation-id="breadcrumb"
         class="adf-breadcrumb-container"
         role="navigation"
@@ -39,11 +39,11 @@
         @for (item of lastNodes; track item.id; let last = $last) {
             <div
                 [class.adf-active]="last"
-            [ngSwitch]="breadcrumbItemIsAnchor(last)"
                 title="{{ item.name ?? '' | translate }}"
                 class="adf-breadcrumb-item">
+                @switch (breadcrumbItemIsAnchor(last)) {
+                    @case (true) {
                         <a
-                *ngSwitchCase="true"
                             href="#"
                             [attr.data-automation-id]="'breadcrumb_' + item.name"
                             class="adf-breadcrumb-item-anchor"
@@ -51,18 +51,23 @@
                         >
                             {{ item.name ?? '' | translate }}
                         </a>
-
+                    }
-            <div *ngSwitchDefault class="adf-breadcrumb-item-current" aria-current="location">
+                    @default {
-                {{ (selectedRowItemsCount < 1 ? item.name : 'BREADCRUMB.HEADER.SELECTED') | translate: { count: selectedRowItemsCount } }}
+                        <div class="adf-breadcrumb-item-current" aria-current="location">
+                            {{ (selectedRowItemsCount < 1 ? item.name ?? '' : 'BREADCRUMB.HEADER.SELECTED') | translate: { count: selectedRowItemsCount } }}
                         </div>
+                    }
+                }
 
-            <mat-icon class="adf-breadcrumb-item-chevron" *ngIf="!last" adf-icon="chevron_right" />
+                @if (!last) {
+                    <mat-icon class="adf-breadcrumb-item-chevron" adf-icon="chevron_right" />
+                }
             </div>
         }
     </nav>
 
+    @if (!folderNode && hasRoot) {
         <nav
-    *ngIf="!folderNode && hasRoot"
             data-automation-id="breadcrumb"
             role="navigation"
             [attr.aria-label]="'BREADCRUMB.ARIA-LABEL.BREADCRUMB' | translate"
@@ -73,3 +78,5 @@
                 </div>
             </div>
         </nav>
+    }
+}

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

@@ -31,7 +31,6 @@ import {
 import { MatSelect, MatSelectModule } from '@angular/material/select';
 import { Node, PathElement } from '@alfresco/js-api';
 import { DocumentListComponent } from '../document-list/components/document-list.component';
-import { CommonModule } from '@angular/common';
 import { TranslatePipe, TranslateService } from '@ngx-translate/core';
 import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
 import { IconModule } from '@alfresco/adf-core';
@@ -39,7 +38,7 @@ import { LiveAnnouncer } from '@angular/cdk/a11y';
 
 @Component({
     selector: 'adf-breadcrumb',
-    imports: [CommonModule, IconModule, TranslatePipe, MatSelectModule],
+    imports: [IconModule, TranslatePipe, MatSelectModule],
     templateUrl: './breadcrumb.component.html',
     styleUrls: ['./breadcrumb.component.scss'],
     encapsulation: ViewEncapsulation.None,