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,59 +5,60 @@
     role="navigation"
     [attr.aria-label]="'BREADCRUMB.ARIA-LABEL.BREADCRUMB' | translate"
 >
-    <button
+    @if (hasPreviousNodes()) {
-        *ngIf="hasPreviousNodes()"
+        <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
-        *ngIf="hasPreviousNodes()"
-        class="adf-breadcrumb-dropdown-path"
-        tabindex="-1"
-        role="button"
-    >
-        <mat-option
-            *ngFor="let node of previousNodes"
-            (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-select>
+                <mat-icon [class.adf-isRoot]="!hasPreviousNodes()" class="adf-breadcrumb-dropdown-trigger-arrow" adf-icon="arrow_drop_down" />
-
+            </div>
-    <div
+        </button>
-        *ngFor="let item of lastNodes; let last = last"
+        <mat-select
-        [class.adf-active]="last"
+            #dropdown
-        [ngSwitch]="breadcrumbItemIsAnchor(last)"
+            class="adf-breadcrumb-dropdown-path"
-        title="{{ item.name | translate }}"
+            tabindex="-1"
-        class="adf-breadcrumb-item">
+            role="button"
-        <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"
+            [ngSwitch]="breadcrumbItemIsAnchor(last)"
+            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 }}
+            </a>
+
+            <div *ngSwitchDefault 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" />
         </div>
-
+    }
-        <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,48 +1,47 @@
-<nav *ngIf="route.length > 0" class="adf-dropdown-breadcrumb-container"
+@if (route.length > 0) {
-     role="navigation"
+  <nav class="adf-dropdown-breadcrumb-container"
-     [attr.aria-label]="'BREADCRUMB.ARIA-LABEL.BREADCRUMB' | translate">
+    role="navigation"
-
+    [attr.aria-label]="'BREADCRUMB.ARIA-LABEL.BREADCRUMB' | translate">
     <button
-        id="dropdown-breadcrumb-button"
+      id="dropdown-breadcrumb-button"
-        [tabindex]="hasPreviousNodes() ? 0 : -1"
+      [tabindex]="hasPreviousNodes() ? 0 : -1"
-        class="adf-dropdown-breadcrumb-trigger"
+      class="adf-dropdown-breadcrumb-trigger"
-        (click)="open()"
+      (click)="open()"
-        [attr.aria-label]="'BREADCRUMB.ARIA-LABEL.DROPDOWN' | translate:{ folderName: currentNode?.name }"
+      [attr.aria-label]="'BREADCRUMB.ARIA-LABEL.DROPDOWN' | translate:{ folderName: currentNode?.name }"
-        [attr.aria-haspopup]="hasPreviousNodes() ? 'true' : null"
+      [attr.aria-haspopup]="hasPreviousNodes() ? 'true' : null"
-        [attr.aria-expanded]="dropdown?.panelOpen || false"
+      [attr.aria-expanded]="dropdown?.panelOpen || false"
-        data-automation-id="dropdown-breadcrumb-trigger">
+      data-automation-id="dropdown-breadcrumb-trigger">
-        <mat-icon class="adf-dropdown-breadcrumb-icon" [class.adf-isRoot]="!hasPreviousNodes()" adf-icon="folder" />
+      <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
+          #dropdown
-            *ngIf="hasPreviousNodes()"
+          panelClass="adf-breadcrumb-dropdown-panel"
-            panelClass="adf-breadcrumb-dropdown-panel"
+          class="adf-dropdown-breadcrumb-path-select"
-            class="adf-dropdown-breadcrumb-path-select"
+          tabindex="-1"
-            tabindex="-1"
+          role="button"
-            role="button"
+          data-automation-id="dropdown-breadcrumb-path"
-            data-automation-id="dropdown-breadcrumb-path"
+          aria-labelledby="dropdown-breadcrumb-button">
-            aria-labelledby="dropdown-breadcrumb-button">
+          @for (node of previousNodes; track node) {
-
             <mat-option
-                *ngFor="let node of previousNodes;"
+              (click)="onRoutePathClick(node, $event)"
-                (click)="onRoutePathClick(node, $event)"
+              (onSelectionChange)="onRouteClick(node)"
-                (onSelectionChange)="onRouteClick(node)"
+              class="adf-dropdown-breadcrumb-path-option adf-dropdown-breadcrumb-path-option-node"
-                class="adf-dropdown-breadcrumb-path-option adf-dropdown-breadcrumb-path-option-node"
+              data-automation-class="dropdown-breadcrumb-path-option"
-                data-automation-class="dropdown-breadcrumb-path-option"
+              [disabled]="readOnly">
-                [disabled]="readOnly">
+              {{ node.name ?? '' | translate }}
-                {{ node.name | translate }}
             </mat-option>
+          }
         </mat-select>
+      }
     </div>
-
     <span
-        class="adf-current-folder"
+      class="adf-current-folder"
-        [class.adf-isRoot]="!hasPreviousNodes()"
+      [class.adf-isRoot]="!hasPreviousNodes()"
-        data-automation-id="current-folder"
+      data-automation-id="current-folder"
-        aria-current="location">{{ currentNode.name }}
+      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,