From 31db995a92ee0c42fe9300adf9ac022f3b1106bb Mon Sep 17 00:00:00 2001
From: Denys Vuika <denis.vuyka@gmail.com>
Date: Mon, 7 Aug 2017 18:39:48 +0100
Subject: [PATCH] breadcrumb fixes (#2181)

---
 .../app/components/files/files.component.html |  1 +
 demo-shell-ng2/app/vendor.ts                  |  3 +++
 .../ng2-alfresco-documentlist/README.md       |  2 +-
 .../breadcrumb/breadcrumb.component.ts        | 26 +++----------------
 4 files changed, 9 insertions(+), 23 deletions(-)

diff --git a/demo-shell-ng2/app/components/files/files.component.html b/demo-shell-ng2/app/components/files/files.component.html
index 9487ad1528..7dd326db3e 100644
--- a/demo-shell-ng2/app/components/files/files.component.html
+++ b/demo-shell-ng2/app/components/files/files.component.html
@@ -18,6 +18,7 @@
                 <adf-toolbar-title>
                     <adf-breadcrumb *ngIf="!useDropdownBreadcrumb"
                         class="files-breadcrumb"
+                        root="Personal Files"
                         [target]="documentList"
                         [folderNode]="documentList.folderNode">
                     </adf-breadcrumb>
diff --git a/demo-shell-ng2/app/vendor.ts b/demo-shell-ng2/app/vendor.ts
index a575d73428..0940011d06 100644
--- a/demo-shell-ng2/app/vendor.ts
+++ b/demo-shell-ng2/app/vendor.ts
@@ -33,6 +33,9 @@ import 'ng2-alfresco-userinfo';
 import 'ng2-alfresco-viewer';
 import 'ng2-alfresco-webscript';
 
+// Load the Angular Material 2 stylesheet
+import '@angular/material/prebuilt-themes/indigo-pink.css';
+
 // Polyfill(s) for dialogs
 require('script-loader!dialog-polyfill/dialog-polyfill');
 import 'dialog-polyfill/dialog-polyfill.css';
diff --git a/ng2-components/ng2-alfresco-documentlist/README.md b/ng2-components/ng2-alfresco-documentlist/README.md
index 5518147527..64cbfedc27 100644
--- a/ng2-components/ng2-alfresco-documentlist/README.md
+++ b/ng2-components/ng2-alfresco-documentlist/README.md
@@ -359,7 +359,7 @@ DocumentList provides simple breadcrumb element to indicate the current position
 | --- | --- | --- |
 | target | DocumentListComponent | (optional) DocumentList component to operate with. Upon clicks will instruct the given component to update. |
 | folderNode | [MinimalNodeEntryEntity](https://github.com/Alfresco/alfresco-js-api/blob/master/src/alfresco-core-rest-api/docs/NodeMinimalEntry.md) | Active node, builds UI based on `folderNode.path.elements` collection. |
-| root | String |  (optional) Name of the folder where you want start the breadcrumb. Note the root will always be shown as first element and it will continue to be displayed until you are not in a subfolder of it. |
+| root | String |  (optional) Name of the root element of the breadcrumb. You can use this property to rename "Company Home" to "Personal Files" for example.  |
 
 ### Events
 
diff --git a/ng2-components/ng2-alfresco-documentlist/src/components/breadcrumb/breadcrumb.component.ts b/ng2-components/ng2-alfresco-documentlist/src/components/breadcrumb/breadcrumb.component.ts
index f984d42a45..5a3b43a621 100644
--- a/ng2-components/ng2-alfresco-documentlist/src/components/breadcrumb/breadcrumb.component.ts
+++ b/ng2-components/ng2-alfresco-documentlist/src/components/breadcrumb/breadcrumb.component.ts
@@ -44,7 +44,7 @@ export class BreadcrumbComponent implements OnChanges {
     @Output()
     navigate: EventEmitter<PathElementEntity> = new EventEmitter<PathElementEntity>();
 
-    public ngOnChanges(changes: SimpleChanges): void {
+    ngOnChanges(changes: SimpleChanges): void {
         if (changes.folderNode) {
 
             let node: MinimalNodeEntryEntity = changes.folderNode.currentValue;
@@ -57,8 +57,8 @@ export class BreadcrumbComponent implements OnChanges {
                     name: node.name
                 });
 
-                if (this.root) {
-                    route = this.checkRoot(route);
+                if (this.root && route.length > 0) {
+                    route[0].name = this.root;
                 }
 
                 this.route = route;
@@ -66,25 +66,7 @@ export class BreadcrumbComponent implements OnChanges {
         }
     }
 
-    private checkRoot(route: PathElementEntity[]): PathElementEntity[] {
-        let isRoot = false;
-        route = route.filter((currentElement) => {
-            if (currentElement.name === this.root) {
-                isRoot = true;
-            }
-            return isRoot;
-        });
-
-        if (route.length === 0) {
-            route.push(<PathElementEntity> {
-                id: undefined,
-                name: this.root
-            });
-        }
-        return route;
-    }
-
-    public onRoutePathClick(route: PathElementEntity, event?: Event): void {
+    onRoutePathClick(route: PathElementEntity, event?: Event): void {
         if (event) {
             event.preventDefault();
         }