[AAE-4569] Added readOnly property to breadcrumb components (#6636)

* [AAE-4569] Added readOnly property to breadcrumb components

* [AAE-4569] Add method for testing if an anchor element should be used

* [AAE-4569] Add missing return type

* [AAE-4569] Add unit test

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

@@ -33,6 +33,7 @@
             (click)="onRoutePathClick(node, $event)"
             (onSelectionChange)="onRoutePathClick(node, $event)"
             class="adf-breadcrumb-path-option"
+            [disabled]="readOnly"
         >
             {{ node.name | translate }}
         </mat-option>
@@ -41,11 +42,11 @@
     <div
         *ngFor="let item of lastNodes; let last = last"
         [class.adf-active]="last"
-        [ngSwitch]="last"
+        [ngSwitch]="breadcrumbItemIsAnchor(last)"
         title="{{ item.name | translate }}"
         class="adf-breadcrumb-item">
         <a
-            *ngSwitchDefault
+            *ngSwitchCase="true"
             href="#"
             [attr.data-automation-id]="'breadcrumb_' + item.name"
             class="adf-breadcrumb-item-anchor"
@@ -54,7 +55,7 @@
             {{ item.name | translate }}
         </a>
 
-        <div *ngSwitchCase="true" class="adf-breadcrumb-item-current" role="heading" aria-level="2"
+        <div *ngSwitchDefault class="adf-breadcrumb-item-current" role="heading" aria-level="2"
             aria-current="location">
             {{ item.name | translate }}
         </div>

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

@@ -160,6 +160,19 @@ describe('Breadcrumb', () => {
 
             expect(documentListComponent.navigateTo).toHaveBeenCalledWith('folder1');
         });
+
+        it('should not navigate if component is read-only', () => {
+            spyOn(documentListComponent, 'navigateTo').and.stub();
+
+            component.target = documentListComponent;
+            component.readOnly = true;
+            component.ngOnInit();
+
+            documentListComponent.$folderNode.next(folderNode);
+            component.onRoutePathClick(component.route[0]);
+
+            expect(documentListComponent.navigateTo).not.toHaveBeenCalled();
+        });
     });
 
     it('should not parse the route when node not provided', () => {

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

@@ -92,6 +92,10 @@ export class BreadcrumbComponent implements OnInit, OnChanges, OnDestroy {
         return !!this.root;
     }
 
+    /** If true, prevents the user from navigating away from the active node. */
+    @Input()
+    readOnly: boolean = false;
+
     /** Emitted when the user clicks on a breadcrumb. */
     @Output()
     navigate = new EventEmitter<PathElementEntity>();
@@ -178,12 +182,16 @@ export class BreadcrumbComponent implements OnInit, OnChanges, OnDestroy {
         return position;
     }
 
+    breadcrumbItemIsAnchor(lastItem): boolean {
+        return !this.readOnly && !lastItem;
+    }
+
     onRoutePathClick(route: PathElementEntity, event?: Event): void {
         if (event && event.type === 'click') {
             event.preventDefault();
         }
 
-        if (route) {
+        if (route && !this.readOnly) {
             this.navigate.emit(route);
 
             if (this.target) {

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

@@ -25,7 +25,8 @@
                 (click)="onRoutePathClick(node, $event)"
                 (onSelectionChange)="onRoutePathClick(node, $event)"
                 class="adf-dropdown-breadcrumb-path-option"
-                data-automation-class="dropdown-breadcrumb-path-option">
+                data-automation-class="dropdown-breadcrumb-path-option"
+                [disabled]="readOnly">
                 {{ node.name | translate }}
             </mat-option>
         </mat-select>