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,75 +1,82 @@
-<nav
+@if (folderNode) {
-    *ngIf="folderNode"
+    <nav
-    data-automation-id="breadcrumb"
+        data-automation-id="breadcrumb"
-    class="adf-breadcrumb-container"
+        class="adf-breadcrumb-container"
-    role="navigation"
+        role="navigation"
-    [attr.aria-label]="'BREADCRUMB.ARIA-LABEL.BREADCRUMB' | translate"
+        [attr.aria-label]="'BREADCRUMB.ARIA-LABEL.BREADCRUMB' | translate"
->
+    >
-    @if (hasPreviousNodes()) {
+        @if (hasPreviousNodes()) {
-        <button
+            <button
-            tabindex="0"
+                tabindex="0"
-            class="adf-breadcrumb-dropdown-trigger"
+                class="adf-breadcrumb-dropdown-trigger"
-            (click)="open()"
+                (click)="open()"
-            [attr.aria-label]="'BREADCRUMB.ARIA-LABEL.DROPDOWN' | translate"
+                [attr.aria-label]="'BREADCRUMB.ARIA-LABEL.DROPDOWN' | translate"
-        >
-            <div class="adf-breadcrumb-dropdown-trigger-icon">
-                <mat-icon [class.adf-isRoot]="!hasPreviousNodes()" adf-icon="folder" />
-                <mat-icon [class.adf-isRoot]="!hasPreviousNodes()" class="adf-breadcrumb-dropdown-trigger-arrow" adf-icon="arrow_drop_down" />
-            </div>
-        </button>
-        <mat-select
-            #dropdown
-            class="adf-breadcrumb-dropdown-path"
-            tabindex="-1"
-            role="button"
-        >
-        @for (node of previousNodes; track node.id) {
-            <mat-option
-                (click)="onRoutePathClick(node, $event)"
-                (onSelectionChange)="onRouteClick(node)"
-                class="adf-breadcrumb-path-option"
-                [disabled]="readOnly"
             >
-                {{ node.name ?? '' | translate }}
+                <div class="adf-breadcrumb-dropdown-trigger-icon">
-            </mat-option>
+                    <mat-icon [class.adf-isRoot]="!hasPreviousNodes()" adf-icon="folder" />
-            }
+                    <mat-icon [class.adf-isRoot]="!hasPreviousNodes()" class="adf-breadcrumb-dropdown-trigger-arrow" adf-icon="arrow_drop_down" />
-        </mat-select>
+                </div>
-    }
+            </button>
-
+            <mat-select
-    @for (item of lastNodes; track item.id; let last = $last) {
+                #dropdown
-        <div
+                class="adf-breadcrumb-dropdown-path"
-            [class.adf-active]="last"
+                tabindex="-1"
-            [ngSwitch]="breadcrumbItemIsAnchor(last)"
+                role="button"
-            title="{{ item.name ?? '' | translate }}"
-            class="adf-breadcrumb-item">
-            <a
-                *ngSwitchCase="true"
-                href="#"
-                [attr.data-automation-id]="'breadcrumb_' + item.name"
-                class="adf-breadcrumb-item-anchor"
-                (click)="onRoutePathClick(item, $event)"
             >
-                {{ item.name ?? '' | translate }}
+            @for (node of previousNodes; track node.id) {
-            </a>
+                <mat-option
+                    (click)="onRoutePathClick(node, $event)"
+                    (onSelectionChange)="onRouteClick(node)"
+                    class="adf-breadcrumb-path-option"
+                    [disabled]="readOnly"
+                >
+                    {{ node.name ?? '' | translate }}
+                </mat-option>
+                }
+            </mat-select>
+        }
 
-            <div *ngSwitchDefault class="adf-breadcrumb-item-current" aria-current="location">
+        @for (item of lastNodes; track item.id; let last = $last) {
-                {{ (selectedRowItemsCount < 1 ? item.name : 'BREADCRUMB.HEADER.SELECTED') | translate: { count: selectedRowItemsCount } }}
+            <div
+                [class.adf-active]="last"
+                title="{{ item.name ?? '' | translate }}"
+                class="adf-breadcrumb-item">
+                @switch (breadcrumbItemIsAnchor(last)) {
+                    @case (true) {
+                        <a
+                            href="#"
+                            [attr.data-automation-id]="'breadcrumb_' + item.name"
+                            class="adf-breadcrumb-item-anchor"
+                            (click)="onRoutePathClick(item, $event)"
+                        >
+                            {{ item.name ?? '' | translate }}
+                        </a>
+                    }
+                    @default {
+                        <div class="adf-breadcrumb-item-current" aria-current="location">
+                            {{ (selectedRowItemsCount < 1 ? item.name ?? '' : 'BREADCRUMB.HEADER.SELECTED') | translate: { count: selectedRowItemsCount } }}
+                        </div>
+                    }
+                }
+
+                @if (!last) {
+                    <mat-icon class="adf-breadcrumb-item-chevron" adf-icon="chevron_right" />
+                }
             </div>
+        }
+    </nav>
 
-            <mat-icon class="adf-breadcrumb-item-chevron" *ngIf="!last" adf-icon="chevron_right" />
+    @if (!folderNode && hasRoot) {
-        </div>
+        <nav
+            data-automation-id="breadcrumb"
+            role="navigation"
+            [attr.aria-label]="'BREADCRUMB.ARIA-LABEL.BREADCRUMB' | translate"
+        >
+            <div class="adf-breadcrumb-item adf-active" role="group">
+                <div class="adf-breadcrumb-item-current">
+                    {{ root ?? '' | translate }}
+                </div>
+            </div>
+        </nav>
     }
-</nav>
+}
-
-<nav
-    *ngIf="!folderNode && hasRoot"
-    data-automation-id="breadcrumb"
-    role="navigation"
-    [attr.aria-label]="'BREADCRUMB.ARIA-LABEL.BREADCRUMB' | translate"
->
-    <div class="adf-breadcrumb-item adf-active" role="group">
-        <div class="adf-breadcrumb-item-current">
-            {{ root ?? '' | translate }}
-        </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,