[ADF-2739] Improved breadcrumb logic (#3287)

* [ADF-2739] Long names in breadcrumb fixed

* [ADF-2739] Updated styles

* [ADF-2739] Fixing @mixin for breadcrumb

* [ADF-2739] Waiting for changes in demo-shell

* [ADF-2739] Fixed @mixin

* [ADF-2739] Fixed issue related to breadcrumb position

* [ADF-2739] Improved ngOnChanges call for breadcrumb

* [ADF-2739] Fixed issues with lint

* [ADF-2739] Removed comment in dropdown breadcrumb component file

* [ADF-2739] Changed recalculateNodes method from public to protected

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

@@ -1,29 +1,46 @@
 <div *ngIf="folderNode" data-automation-id="breadcrumb" class="adf-breadcrumb-container">
-    <li *ngFor="let item of route; let last = last"
-        [class.active]="last"
-        [ngSwitch]="last"
-        title="{{ item.name | translate }}"
-        class="adf-breadcrumb-item">
-
-        <a *ngSwitchDefault href="#" [attr.data-automation-id]="'breadcrumb_' + item.name"
-           class="adf-breadcrumb-item-anchor"
-           (click)="onRoutePathClick(item, $event)">
-            {{ item.name | translate }}
-        </a>
-
-        <div *ngSwitchCase="true" class="adf-breadcrumb-item-current">
-            {{ item.name | translate }}
-        </div>
-
-        <mat-icon class="adf-breadcrumb-item-chevron" *ngIf="!last">
-            chevron_right
-        </mat-icon>
-    </li>
-</div>
-<div *ngIf="!folderNode && hasRoot">
-    <li class="adf-breadcrumb-item">
-        <div class="adf-breadcrumb-item-current">
-            {{ root | translate }}
-        </div>
-    </li>
-</div>
+        <button
+            *ngIf="hasPreviousNodes()"
+            tabindex="0"
+            class="adf-breadcrumb-dropdown-trigger"
+            (click)="open()">
+            <mat-icon [class.isRoot]="!hasPreviousNodes()">folder</mat-icon>
+            <mat-icon [class.isRoot]="!hasPreviousNodes()" class="adf-breadcrumb-dropdown-trigger-arrow">arrow_drop_down</mat-icon>
+        </button>
+    
+        <mat-select
+            #select
+            *ngIf="hasPreviousNodes()"
+            class="adf-breadcrumb-dropdown-path"
+            tabindex="0">
+    
+            <mat-option
+                *ngFor="let node of previousNodes;"
+                (click)="onRoutePathClick(node, $event)"
+                class="adf-breadcrumb-path-option"
+                tabindex="0">
+                {{ node.name }}
+            </mat-option>
+        </mat-select>
+    
+        <li *ngFor="let item of lastNodes; let last = last"
+            [class.active]="last"
+            [ngSwitch]="last"
+            title="{{ item.name | translate }}"
+            class="adf-breadcrumb-item">
+    
+            <a *ngSwitchDefault href="#" [attr.data-automation-id]="'breadcrumb_' + item.name"
+               class="adf-breadcrumb-item-anchor"
+               (click)="onRoutePathClick(item, $event)">
+                {{ item.name | translate }}
+            </a>
+    
+            <div *ngSwitchCase="true" class="adf-breadcrumb-item-current">
+                {{ item.name | translate }}
+            </div>
+    
+            <mat-icon class="adf-breadcrumb-item-chevron" *ngIf="!last">
+                chevron_right
+            </mat-icon>
+        </li>
+    </div>