[ADF-3053] breadcrumb fixes (#3406)

* translate breadcrumb root in demo shell

* optional "max items" feature and style fixes

* should not be restricted by default

* style updates

* toolbar and breadcrumb layout fixes

* breadcrumb demo and testing page

* full toolbar scenario

* fix translation issue with the dropdown and custom root

* a11y fixes

* fix issue with duplicate id, remove unused attribute

demo-shell/src/app/components/breadcrumb-demo/breadcrumb-demo.component.html

@@ -0,0 +1,72 @@
+<main>
+    <h1>Breadcrumb</h1>
+    <ul>
+        <li>Try creating and navigating long paths</li>
+        <li>Try resizing the browser width to ensure items are trimmed as expected</li>
+    </ul>
+
+    <h2>1. Standalone (fixed size)</h2>
+    <small>Component is used in the fixed-width layout</small>
+
+    <div class="breadcrumb-container-restricted">
+        <adf-breadcrumb root="APP.PERSONAL-FILES" [target]="documentList" [folderNode]="documentList.folderNode">
+        </adf-breadcrumb>
+    </div>
+
+    <h2>2. Standalone (full width)</h2>
+    <small>Component fits the parent container width</small>
+
+    <div>
+        <adf-breadcrumb root="APP.PERSONAL-FILES" [target]="documentList" [folderNode]="documentList.folderNode">
+        </adf-breadcrumb>
+    </div>
+
+    <h2>3. Toolbar (standalone)</h2>
+    <small>Component used as a child of the Toolbar component</small>
+
+    <adf-toolbar>
+        <adf-breadcrumb root="APP.PERSONAL-FILES" [target]="documentList" [folderNode]="documentList.folderNode">
+        </adf-breadcrumb>
+    </adf-toolbar>
+
+    <h2>4. Toolbar (title)</h2>
+    <small>Component is wrapped into the Toolbar Title component</small>
+
+    <adf-toolbar>
+        <adf-toolbar-title>
+            <adf-breadcrumb root="APP.PERSONAL-FILES" [target]="documentList" [folderNode]="documentList.folderNode">
+            </adf-breadcrumb>
+        </adf-toolbar-title>
+    </adf-toolbar>
+
+    <h2>5. Toolbar with separators and buttons</h2>
+    <small>
+        Component is wrapped into the Toolbar Title component.
+        The toolbar also has separators and buttons that might provide impact on breadcrumb layout.
+        Buttons do nothing and are present for layout purposes.
+    </small>
+
+    <adf-toolbar class="full-content-toolbar">
+        <adf-toolbar-title fxFlex="0 1 auto">
+            <adf-breadcrumb root="APP.PERSONAL-FILES" [target]="documentList" [folderNode]="documentList.folderNode">
+            </adf-breadcrumb>
+        </adf-toolbar-title>
+        <adf-toolbar-divider fxFlex="0 0 auto"></adf-toolbar-divider>
+        <div fxFlex="0 0 auto">
+            <button mat-icon-button aria-label="Create a new folder button">
+                <mat-icon>create_new_folder</mat-icon>
+            </button>
+            <button mat-icon-button aria-label="Edit node button">
+                <mat-icon>create</mat-icon>
+            </button>
+            <button mat-icon-button aria-label="Delete node icon button">
+                <mat-icon>delete</mat-icon>
+            </button>
+        </div>
+    </adf-toolbar>
+
+    <div class="content">
+        <adf-document-list #documentList currentFolderId="-my-">
+        </adf-document-list>
+    </div>
+</main>