[ADF-1038] - Dropddown Breadcrumb component (#2092)

* Update material to beta8

* Install @angular/cdk

* DropdownBreadcrumb component

* Style fixes

* Fix styling issues after rebase

* Fix Material issue in processlist

* Update material again, because of rebase errors... :/

* Fix new tslint rule raised errors

.gitignore

@@ -16,3 +16,4 @@ src/environments/
 /demo-shell-ng2/ng2-components/
 .happypack/
 .happypack/
+.history

demo-shell-ng2/app/components/files/files.component.html

@@ -12,10 +12,16 @@
         <ng-container *ngIf="useCustomToolbar">
             <adf-toolbar>
                 <adf-toolbar-title>
-                    <adf-breadcrumb
+                    <adf-breadcrumb *ngIf="!useDropdownBreadcrumb"
+                        class="files-breadcrumb"
                         [target]="documentList"
                         [folderNode]="documentList.folderNode">
                     </adf-breadcrumb>
+                    <adf-dropdown-breadcrumb  *ngIf="useDropdownBreadcrumb"
+                        class="files-breadcrumb"
+                        [target]="documentList"
+                        [folderNode]="documentList.folderNode">
+                    </adf-dropdown-breadcrumb>
                 </adf-toolbar-title>
                 <button md-icon-button (click)="onCreateFolderClicked($event)">
                     <md-icon>create_new_folder</md-icon>
@@ -125,6 +131,10 @@
 <context-menu-holder></context-menu-holder>
 
 <div class="container">
+    <section>
+        <md-slide-toggle [(ngModel)]="useDropdownBreadcrumb">Dropdown breadcrumb</md-slide-toggle>
+    </section>
+
     <section>
         <md-slide-toggle [(ngModel)]="useCustomToolbar">Use custom toolbar</md-slide-toggle>
     </section>

demo-shell-ng2/app/components/files/files.component.ts

@@ -39,6 +39,7 @@ export class FilesComponent implements OnInit {
     fileShowed: boolean = false;
 
     useCustomToolbar = true;
+    useDropdownBreadcrumb = true;
 
     @Input()
     multipleFileUpload: boolean = false;

demo-shell-ng2/package.json

@@ -56,13 +56,14 @@
   ],
   "dependencies": {
     "@angular/animations": "4.2.5",
+    "@angular/cdk": "2.0.0-beta.8",
     "@angular/common": "4.2.5",
     "@angular/compiler": "4.2.5",
     "@angular/compiler-cli": "4.2.5",
     "@angular/core": "4.2.5",
     "@angular/forms": "4.2.5",
     "@angular/http": "4.2.5",
-    "@angular/material": "2.0.0-beta.6",
+    "@angular/material": "^2.0.0-beta.8",
     "@angular/platform-browser": "4.2.5",
     "@angular/platform-browser-dynamic": "4.2.5",
     "@angular/router": "4.2.5",

ng2-components/ng2-activiti-analytics/package.json

@@ -33,15 +33,17 @@
   },
   "dependencies": {
     "@angular/animations": "4.2.5",
+    "@angular/cdk": "2.0.0-beta.8",
     "@angular/common": "4.2.5",
     "@angular/compiler": "4.2.5",
     "@angular/core": "4.2.5",
     "@angular/forms": "4.2.5",
     "@angular/http": "4.2.5",
+    "@angular/material": "^2.0.0-beta.8",
     "@angular/platform-browser": "4.2.5",
     "@angular/platform-browser-dynamic": "4.2.5",
     "@angular/router": "4.2.5",
-    "@angular/material": "2.0.0-beta.6",
+    "@ngx-translate/core": "7.0.0",
     "alfresco-js-api": "~1.6.1",
     "chart.js": "2.5.0",
     "core-js": "2.4.1",
@@ -51,7 +53,6 @@
     "ng2-activiti-diagrams": "1.6.1",
     "ng2-alfresco-core": "1.6.1",
     "ng2-charts": "1.6.0",
-    "@ngx-translate/core": "7.0.0",
     "raphael": "2.2.7",
     "reflect-metadata": "0.1.10",
     "rxjs": "5.1.0",

ng2-components/ng2-activiti-diagrams/package.json

@@ -29,20 +29,21 @@
   },
   "dependencies": {
     "@angular/animations": "4.2.5",
+    "@angular/cdk": "2.0.0-beta.8",
     "@angular/common": "4.2.5",
     "@angular/compiler": "4.2.5",
     "@angular/core": "4.2.5",
     "@angular/forms": "4.2.5",
     "@angular/http": "4.2.5",
+    "@angular/material": "^2.0.0-beta.8",
     "@angular/platform-browser": "4.2.5",
     "@angular/platform-browser-dynamic": "4.2.5",
     "@angular/router": "4.2.5",
-    "@angular/material": "2.0.0-beta.6",
+    "@ngx-translate/core": "7.0.0",
     "alfresco-js-api": "~1.6.1",
     "core-js": "2.4.1",
     "hammerjs": "2.0.8",
     "ng2-alfresco-core": "1.6.1",
-    "@ngx-translate/core": "7.0.0",
     "raphael": "2.2.6",
     "reflect-metadata": "0.1.10",
     "rxjs": "5.1.0",

ng2-components/ng2-activiti-form/package.json

@@ -36,22 +36,23 @@
   ],
   "dependencies": {
     "@angular/animations": "4.2.5",
+    "@angular/cdk": "2.0.0-beta.8",
     "@angular/common": "4.2.5",
     "@angular/compiler": "4.2.5",
     "@angular/core": "4.2.5",
     "@angular/forms": "4.2.5",
     "@angular/http": "4.2.5",
+    "@angular/material": "^2.0.0-beta.8",
     "@angular/platform-browser": "4.2.5",
     "@angular/platform-browser-dynamic": "4.2.5",
     "@angular/router": "4.2.5",
-    "@angular/material": "2.0.0-beta.6",
+    "@ngx-translate/core": "7.0.0",
     "alfresco-js-api": "~1.6.1",
     "core-js": "2.4.1",
     "hammerjs": "2.0.8",
     "md-date-time-picker": "2.2.0",
     "moment": "2.15.1",
     "ng2-alfresco-core": "1.6.1",
-    "@ngx-translate/core": "7.0.0",
     "reflect-metadata": "0.1.10",
     "rxjs": "5.1.0",
     "systemjs": "0.19.27",

ng2-components/ng2-activiti-processlist/package.json

@@ -35,15 +35,17 @@
   ],
   "dependencies": {
     "@angular/animations": "4.2.5",
+    "@angular/cdk": "2.0.0-beta.8",
     "@angular/common": "4.2.5",
     "@angular/compiler": "4.2.5",
     "@angular/core": "4.2.5",
     "@angular/forms": "4.2.5",
     "@angular/http": "4.2.5",
+    "@angular/material": "^2.0.0-beta.8",
     "@angular/platform-browser": "4.2.5",
     "@angular/platform-browser-dynamic": "4.2.5",
     "@angular/router": "4.2.5",
-    "@angular/material": "2.0.0-beta.6",
+    "@ngx-translate/core": "7.0.0",
     "alfresco-js-api": "~1.6.1",
     "core-js": "2.4.1",
     "hammerjs": "2.0.8",
@@ -53,7 +55,6 @@
     "ng2-activiti-tasklist": "1.6.1",
     "ng2-alfresco-core": "1.6.1",
     "ng2-alfresco-datatable": "1.6.1",
-    "@ngx-translate/core": "7.0.0",
     "reflect-metadata": "0.1.10",
     "rxjs": "5.1.0",
     "systemjs": "0.19.27",

ng2-components/ng2-activiti-processlist/src/assets/process.service.mock.ts

@@ -21,8 +21,8 @@ import {
     TaskDetailsModel,
     User
 } from 'ng2-activiti-tasklist';
-import { ProcessDefinitionRepresentation } from '../models/process-definition.model';
 import { FilterProcessRepresentationModel } from '../models/filter-process.model';
+import { ProcessDefinitionRepresentation } from '../models/process-definition.model';
 
 export let fakeFilters = {
     size: 1, total: 1, start: 0,

ng2-components/ng2-activiti-processlist/src/components/process-instance-variables.component.html

@@ -14,11 +14,11 @@
         <loading-content-template>
             <ng-template>
                 <!--Add your custom loading template here-->
-                <md-progress-spinner
+                <md-spinner
                     class="adf-variable-list-loading-margin"
                     [color]="'primary'"
                     [mode]="'indeterminate'">
-                </md-progress-spinner>
+                </md-spinner>
             </ng-template>
         </loading-content-template>
         <no-content-template>

ng2-components/ng2-activiti-tasklist/package.json

@@ -39,15 +39,17 @@
   ],
   "dependencies": {
     "@angular/animations": "4.2.5",
+    "@angular/cdk": "2.0.0-beta.8",
     "@angular/common": "4.2.5",
     "@angular/compiler": "4.2.5",
     "@angular/core": "4.2.5",
     "@angular/forms": "4.2.5",
     "@angular/http": "4.2.5",
+    "@angular/material": "^2.0.0-beta.8",
     "@angular/platform-browser": "4.2.5",
     "@angular/platform-browser-dynamic": "4.2.5",
     "@angular/router": "4.2.5",
-    "@angular/material": "2.0.0-beta.6",
+    "@ngx-translate/core": "7.0.0",
     "alfresco-js-api": "~1.6.1",
     "core-js": "2.4.1",
     "hammerjs": "2.0.8",
@@ -56,7 +58,6 @@
     "ng2-activiti-form": "1.6.1",
     "ng2-alfresco-core": "1.6.1",
     "ng2-alfresco-datatable": "1.6.1",
-    "@ngx-translate/core": "7.0.0",
     "reflect-metadata": "0.1.10",
     "rxjs": "5.1.0",
     "systemjs": "0.19.27",

ng2-components/ng2-alfresco-core/package.json

@@ -43,22 +43,23 @@
   ],
   "dependencies": {
     "@angular/animations": "4.2.5",
+    "@angular/cdk": "2.0.0-beta.8",
     "@angular/common": "4.2.5",
     "@angular/compiler": "4.2.5",
+    "@angular/compiler-cli": "4.2.5",
     "@angular/core": "4.2.5",
     "@angular/forms": "4.2.5",
     "@angular/http": "4.2.5",
+    "@angular/material": "^2.0.0-beta.8",
     "@angular/platform-browser": "4.2.5",
     "@angular/platform-browser-dynamic": "4.2.5",
     "@angular/router": "4.2.5",
-    "@angular/compiler-cli": "4.2.5",
+    "@ngx-translate/core": "7.0.0",
-    "@angular/material": "2.0.0-beta.6",
     "alfresco-js-api": "~1.6.1",
     "core-js": "2.4.1",
     "hammerjs": "2.0.8",
     "material-design-icons": "2.2.3",
     "material-design-lite": "1.2.1",
-    "@ngx-translate/core": "7.0.0",
     "reflect-metadata": "0.1.10",
     "rxjs": "5.1.0",
     "systemjs": "0.19.27",

ng2-components/ng2-alfresco-datatable/package.json

@@ -35,20 +35,21 @@
   ],
   "dependencies": {
     "@angular/animations": "4.2.5",
+    "@angular/cdk": "2.0.0-beta.8",
     "@angular/common": "4.2.5",
     "@angular/compiler": "4.2.5",
     "@angular/core": "4.2.5",
     "@angular/forms": "4.2.5",
     "@angular/http": "4.2.5",
+    "@angular/material": "^2.0.0-beta.8",
     "@angular/platform-browser": "4.2.5",
     "@angular/platform-browser-dynamic": "4.2.5",
     "@angular/router": "4.2.5",
-    "@angular/material": "2.0.0-beta.6",
+    "@ngx-translate/core": "7.0.0",
     "alfresco-js-api": "~1.6.1",
     "core-js": "2.4.1",
     "hammerjs": "2.0.8",
     "ng2-alfresco-core": "1.6.1",
-    "@ngx-translate/core": "7.0.0",
     "reflect-metadata": "0.1.10",
     "rxjs": "5.1.0",
     "systemjs": "0.19.27",

ng2-components/ng2-alfresco-documentlist/index.ts

@@ -20,6 +20,7 @@ import { CoreModule } from 'ng2-alfresco-core';
 import { DataTableModule } from 'ng2-alfresco-datatable';
 
 import { BreadcrumbComponent } from './src/components/breadcrumb/breadcrumb.component';
+import { DropdownBreadcrumbComponent } from './src/components/breadcrumb/dropdown-breadcrumb.component';
 import { ContentActionListComponent } from './src/components/content-action/content-action-list.component';
 import { ContentActionComponent } from './src/components/content-action/content-action.component';
 import { ContentColumnListComponent } from './src/components/content-column/content-column-list.component';
@@ -64,7 +65,8 @@ export const DOCUMENT_LIST_DIRECTIVES: any[] = [
     ContentActionComponent,
     ContentActionListComponent,
     EmptyFolderContentDirective,
-    BreadcrumbComponent
+    BreadcrumbComponent,
+    DropdownBreadcrumbComponent
 ];
 
 export const DOCUMENT_LIST_PROVIDERS: any[] = [

ng2-components/ng2-alfresco-documentlist/package.json

@@ -43,21 +43,22 @@
   ],
   "dependencies": {
     "@angular/animations": "4.2.5",
+    "@angular/cdk": "2.0.0-beta.8",
     "@angular/common": "4.2.5",
     "@angular/compiler": "4.2.5",
     "@angular/core": "4.2.5",
     "@angular/forms": "4.2.5",
     "@angular/http": "4.2.5",
+    "@angular/material": "^2.0.0-beta.8",
     "@angular/platform-browser": "4.2.5",
     "@angular/platform-browser-dynamic": "4.2.5",
     "@angular/router": "4.2.5",
-    "@angular/material": "2.0.0-beta.6",
+    "@ngx-translate/core": "7.0.0",
     "alfresco-js-api": "~1.6.1",
     "core-js": "2.4.1",
     "hammerjs": "2.0.8",
     "ng2-alfresco-core": "1.6.1",
     "ng2-alfresco-datatable": "1.6.1",
-    "@ngx-translate/core": "7.0.0",
     "reflect-metadata": "0.1.10",
     "rxjs": "5.1.0",
     "systemjs": "0.19.27",

ng2-components/ng2-alfresco-documentlist/src/components/breadcrumb/breadcrumb.component.html

@@ -7,9 +7,9 @@
             {{item.name}}
         </a>
 
-        <strong *ngSwitchCase="true">
+        <div *ngSwitchCase="true" class="adf-breadcrumb-item-current">
             {{item.name}}
-        </strong>
+        </div>
 
         <i class="material-icons adf-breadcrumb-item-chevron" *ngIf="!last">
             chevron_right

ng2-components/ng2-alfresco-documentlist/src/components/breadcrumb/breadcrumb.component.scss

@@ -1,11 +1,9 @@
 @import 'theming';
 
-$breadcrumb-chevron-spacer: 10px;
+$breadcrumb-chevron-spacer: 2px;
 
 .adf-breadcrumb {
     display: flex;
-    flex: 1;
-    width: 0;
 
     &-container {
         margin: 0;
@@ -14,14 +12,15 @@ $breadcrumb-chevron-spacer: 10px;
         cursor: default;
         display: flex;
         overflow: hidden;
+        height: 25px;
     }
 
     &-item {
-        position: relative;
+        padding-right: $breadcrumb-chevron-spacer;
-        padding-right: 24px + $breadcrumb-chevron-spacer;
         color: $alfresco-secondary-text-color;
-        flex: 0 1 auto;
         overflow: hidden;
+        display: flex;
+        line-height: 24px;
 
         &-anchor {
             color: inherit;
@@ -33,24 +32,12 @@ $breadcrumb-chevron-spacer: 10px;
             overflow: hidden;
         }
 
-        &-anchor:hover, &-last {
+        &-anchor:hover, &.active {
             color: $alfresco-primary-text-color;
         }
 
-        &-chevron {
+        &.active {
-            position: absolute;
+            display: block;
-            right: $breadcrumb-chevron-spacer / 2;
-            top: 50%;
-            margin-top: -12px;
-        }
-
-        &-last {
-            font-weight: bold;
-            flex: 1 0 auto;
-
-            &-chevron {
-                display: none;
-            }
         }
     }
 }

ng2-components/ng2-alfresco-documentlist/src/components/breadcrumb/breadcrumb.component.spec.ts

@@ -87,5 +87,4 @@ describe('Breadcrumb', () => {
             done();
         }, 0);
     });
-
 });

ng2-components/ng2-alfresco-documentlist/src/components/breadcrumb/breadcrumb.component.ts

@@ -23,7 +23,10 @@ import { DocumentListComponent } from '../document-list.component';
     selector: 'adf-breadcrumb, alfresco-document-list-breadcrumb',
     templateUrl: './breadcrumb.component.html',
     styleUrls: ['./breadcrumb.component.scss'],
-    encapsulation: ViewEncapsulation.None
+    encapsulation: ViewEncapsulation.None,
+    host: {
+        'class': 'adf-breadcrumb'
+    }
 })
 export class BreadcrumbComponent implements OnChanges {
 
@@ -47,7 +50,7 @@ export class BreadcrumbComponent implements OnChanges {
             let node: MinimalNodeEntryEntity = changes.folderNode.currentValue;
 
             if (node) {
-                let route = <PathElementEntity[]> (node.path.elements || []);
+                let route = <PathElementEntity[]> (node.path.elements || []).slice();
 
                 route.push(<PathElementEntity> {
                     id: node.id,

ng2-components/ng2-alfresco-documentlist/src/components/breadcrumb/dropdown-breadcrumb.component.html

@@ -0,0 +1,29 @@
+<ng-container *ngIf="route.length > 0">
+
+    <md-icon
+        class="adf-dropdown-breadcumb-trigger"
+        [class.isRoot]="!hasPreviousNodes()"
+        (click)="open()"
+        data-automation-id="dropdown-breadcrumb-trigger">folder</md-icon>
+    <i class="material-icons adf-dropddown-breadcrumb-item-chevron">chevron_right</i>
+
+    <md-select
+        *ngIf="hasPreviousNodes()"
+        class="adf-dropdown-breadcrumb-path"
+        data-automation-id="dropdown-breadcrumb-path" >
+
+        <md-option
+            *ngFor="let node of previousNodes;"
+            (click)="onRoutePathClick(node, $event)"
+            class="adf-dropdown-breadcrumb-path-option"
+            data-automation-class="dropdown-breadcrumb-path-option">
+            {{ node.name }}
+        </md-option>
+
+    </md-select>
+
+    <span
+        class="adf-current-folder"
+        [class.isRoot]="!hasPreviousNodes()"
+        data-automation-id="current-folder">{{ currentNode.name }}</span>
+</ng-container>

ng2-components/ng2-alfresco-documentlist/src/components/breadcrumb/dropdown-breadcrumb.component.scss

@@ -0,0 +1,51 @@
+@import 'theming';
+
+$dropdownHorizontalOffset: 30px;
+
+.#{$ADF} {
+    &-dropdown-breadcrumb {
+        display: flex;
+        justify-content: flex-start;
+        height: 25px;
+    }
+
+    &-dropdown-breadcumb-trigger {
+        cursor: pointer;
+    }
+
+    &-dropdown-breadcumb-trigger.isRoot {
+        cursor: not-allowed;
+    }
+
+    &-dropdown-breadcrumb-path {
+        width: 0;
+        height: 0;
+        overflow: hidden;
+        margin-top: 35px;
+        margin-left: -$dropdownHorizontalOffset;
+    }
+
+    &-current-folder {
+        margin-left: $dropdownHorizontalOffset;
+        line-height: 26px;
+    }
+
+    &-current-folder.isRoot {
+        margin-left: 0;
+    }
+
+    &-dropdown-breadcrumb-path-option.mat-option {
+        height: 28px;
+        line-height: 28px;
+        padding: 0 12px;
+        font-size: 13px;
+    }
+
+    &-dropdown-breadcrumb-path-option.mat-option:first-child {
+        padding-top: 4px;
+    }
+
+    &-dropdown-breadcrumb-path-option.mat-option:last-child {
+        padding-bottom: 4px;
+    }
+}

ng2-components/ng2-alfresco-documentlist/src/components/breadcrumb/dropdown-breadcrumb.component.spec.ts

@@ -0,0 +1,169 @@
+/*!
+ * @license
+ * Copyright 2016 Alfresco Software, Ltd.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+/*!
+ * @license
+ * Copyright 2016 Alfresco Software, Ltd.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { SimpleChange } from '@angular/core';
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+import { MdOptionModule, MdSelectModule } from '@angular/material';
+import { By } from '@angular/platform-browser';
+import { CoreModule } from 'ng2-alfresco-core';
+import { fakeNodeWithCreatePermission } from '../../assets/document-list.component.mock';
+import { DocumentListComponent } from '../document-list.component';
+import { DropdownBreadcrumbComponent } from './dropdown-breadcrumb.component';
+
+declare let jasmine: any;
+
+describe('DropdownBreadcrumb', () => {
+
+    let component: DropdownBreadcrumbComponent;
+    let fixture: ComponentFixture<DropdownBreadcrumbComponent>;
+    let element: HTMLElement;
+
+    beforeEach(async(() => {
+        TestBed.configureTestingModule({
+            imports: [
+                CoreModule.forRoot(),
+                MdSelectModule,
+                MdOptionModule
+            ],
+            declarations: [
+                DropdownBreadcrumbComponent
+            ]
+        }).compileComponents();
+    }));
+
+    beforeEach(() => {
+        fixture = TestBed.createComponent(DropdownBreadcrumbComponent);
+        element = fixture.nativeElement;
+        component = fixture.componentInstance;
+    });
+
+    function openSelect() {
+        const folderIcon = fixture.debugElement.query(By.css('[data-automation-id="dropdown-breadcrumb-trigger"]'));
+        folderIcon.triggerEventHandler('click', null);
+        fixture.detectChanges();
+    }
+
+    function triggerComponentChange(fakeNodeData) {
+        const change = new SimpleChange(null, fakeNodeData, true);
+        component.ngOnChanges({'folderNode': change});
+        fixture.detectChanges();
+    }
+
+    function clickOnTheFirstOption() {
+        const option = fixture.debugElement.query(By.css('[data-automation-class="dropdown-breadcrumb-path-option"]'));
+        option.triggerEventHandler('click', null);
+        fixture.detectChanges();
+    }
+
+    it('should display only the current folder name if there is no previous folders', () => {
+        fakeNodeWithCreatePermission.path.elements = [];
+
+        triggerComponentChange(fakeNodeWithCreatePermission);
+        openSelect();
+
+        const currentFolder = fixture.debugElement.query(By.css('[data-automation-id="current-folder"]'));
+        const path = fixture.debugElement.query(By.css('[data-automation-id="dropdown-breadcrumb-path"]'));
+        expect(path).toBeNull();
+        expect(currentFolder).not.toBeNull();
+        expect(currentFolder.nativeElement.innerText.trim()).toEqual('Test');
+    });
+
+    it('should display only the path in the selectbox', () => {
+        fakeNodeWithCreatePermission.path.elements = [
+            { id: '1', name: 'Stark Industries' },
+            { id: '2', name: 'User Homes' },
+            { id: '3', name: 'J.A.R.V.I.S' }
+        ];
+
+        triggerComponentChange(fakeNodeWithCreatePermission);
+        openSelect();
+
+        const path = fixture.debugElement.query(By.css('[data-automation-id="dropdown-breadcrumb-path"]'));
+        const options = fixture.debugElement.queryAll(By.css('[data-automation-class="dropdown-breadcrumb-path-option"]'));
+        expect(path).not.toBeNull();
+        expect(options.length).toBe(3);
+    });
+
+    it('should display the path in reverse order', () => {
+        fakeNodeWithCreatePermission.path.elements = [
+            { id: '1', name: 'Stark Industries' },
+            { id: '2', name: 'User Homes' },
+            { id: '3', name: 'J.A.R.V.I.S' }
+        ];
+
+        triggerComponentChange(fakeNodeWithCreatePermission);
+        openSelect();
+
+        const options = fixture.debugElement.queryAll(By.css('[data-automation-class="dropdown-breadcrumb-path-option"]'));
+        expect(options.length).toBe(3);
+        expect(options[0].nativeElement.innerText.trim()).toBe('J.A.R.V.I.S');
+        expect(options[1].nativeElement.innerText.trim()).toBe('User Homes');
+        expect(options[2].nativeElement.innerText.trim()).toBe('Stark Industries');
+    });
+
+    it('should emit navigation event when clicking on an option', (done) => {
+        fakeNodeWithCreatePermission.path.elements = [{ id: '1', name: 'Stark Industries' }];
+        component.navigate.subscribe(val => {
+            expect(val).toEqual({ id: '1', name: 'Stark Industries' });
+            done();
+        });
+
+        triggerComponentChange(fakeNodeWithCreatePermission);
+        openSelect();
+
+        clickOnTheFirstOption();
+    });
+
+    it('should update document list  when clicking on an option', () => {
+        let documentList = new DocumentListComponent(null, null, null, null);
+        spyOn(documentList, 'loadFolderByNodeId').and.stub();
+        component.target = documentList;
+        fakeNodeWithCreatePermission.path.elements = [{ id: '1', name: 'Stark Industries' }];
+        triggerComponentChange(fakeNodeWithCreatePermission);
+        openSelect();
+
+        clickOnTheFirstOption();
+
+        expect(documentList.loadFolderByNodeId).toHaveBeenCalledWith('1');
+    });
+
+    it('should open the selectbox when clicking on the folder icon', async(() => {
+        triggerComponentChange(fakeNodeWithCreatePermission);
+        spyOn(component.selectbox, 'open');
+
+        openSelect();
+
+        expect(component.selectbox.open).toHaveBeenCalled();
+    }));
+});

ng2-components/ng2-alfresco-documentlist/src/components/breadcrumb/dropdown-breadcrumb.component.ts

@@ -0,0 +1,66 @@
+/*!
+ * @license
+ * Copyright 2016 Alfresco Software, Ltd.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { Component, OnChanges, SimpleChanges, ViewChild, ViewEncapsulation } from '@angular/core';
+import { MdSelect } from '@angular/material';
+import { PathElementEntity } from 'alfresco-js-api';
+import { BreadcrumbComponent } from './breadcrumb.component';
+
+@Component({
+    selector: 'adf-dropdown-breadcrumb',
+    templateUrl: './dropdown-breadcrumb.component.html',
+    styleUrls: ['./dropdown-breadcrumb.component.scss'],
+    encapsulation: ViewEncapsulation.None,
+    host: {
+        'class': 'adf-dropdown-breadcrumb'
+    }
+})
+export class DropdownBreadcrumbComponent extends BreadcrumbComponent implements OnChanges {
+    @ViewChild(MdSelect) selectbox: MdSelect;
+
+    currentNode: PathElementEntity;
+    previousNodes: PathElementEntity[];
+
+    ngOnChanges(changes: SimpleChanges): void {
+        super.ngOnChanges(changes);
+        this.recalculateNodes();
+    }
+
+    /**
+     * Calculate the current and previous nodes from the route array
+     */
+    private recalculateNodes(): void {
+        this.currentNode = this.route[this.route.length - 1];
+        this.previousNodes = this.route.slice(0, this.route.length - 1).reverse();
+    }
+
+    /**
+     * Opens the selectbox overlay
+     */
+    open(): void {
+        if (this.selectbox) {
+            this.selectbox.open();
+        }
+    }
+
+    /**
+     * Return if route has more than one element (means: we are not in the root directory)
+     */
+    hasPreviousNodes(): boolean {
+        return this.previousNodes.length > 0;
+    }
+}

ng2-components/ng2-alfresco-documentlist/src/material.module.ts

@@ -16,14 +16,15 @@
  */
 
 import { NgModule } from '@angular/core';
-import { MdButtonModule, MdIconModule, MdMenuModule, MdProgressSpinnerModule } from '@angular/material';
+import { MdButtonModule, MdIconModule, MdMenuModule, MdProgressSpinnerModule, MdSelectModule } from '@angular/material';
 
 export function modules() {
     return [
         MdMenuModule,
         MdButtonModule,
         MdIconModule,
-        MdProgressSpinnerModule
+        MdProgressSpinnerModule,
+        MdSelectModule
     ];
 }
 

ng2-components/ng2-alfresco-login/package.json

@@ -47,19 +47,20 @@
   ],
   "dependencies": {
     "@angular/animations": "4.2.5",
+    "@angular/cdk": "2.0.0-beta.8",
     "@angular/common": "4.2.5",
     "@angular/compiler": "4.2.5",
     "@angular/core": "4.2.5",
     "@angular/forms": "4.2.5",
     "@angular/http": "4.2.5",
+    "@angular/material": "^2.0.0-beta.8",
     "@angular/platform-browser": "4.2.5",
     "@angular/platform-browser-dynamic": "4.2.5",
     "@angular/router": "4.2.5",
-    "@angular/material": "2.0.0-beta.6",
+    "@ngx-translate/core": "7.0.0",
     "alfresco-js-api": "~1.6.1",
     "hammerjs": "2.0.8",
     "ng2-alfresco-core": "1.6.1",
-    "@ngx-translate/core": "7.0.0",
     "reflect-metadata": "0.1.10",
     "rxjs": "5.1.0",
     "systemjs": "0.19.27",

ng2-components/ng2-alfresco-search/package.json

@@ -43,22 +43,23 @@
   ],
   "dependencies": {
     "@angular/animations": "4.2.5",
+    "@angular/cdk": "2.0.0-beta.8",
     "@angular/common": "4.2.5",
     "@angular/compiler": "4.2.5",
     "@angular/core": "4.2.5",
     "@angular/forms": "4.2.5",
     "@angular/http": "4.2.5",
+    "@angular/material": "^2.0.0-beta.8",
     "@angular/platform-browser": "4.2.5",
     "@angular/platform-browser-dynamic": "4.2.5",
     "@angular/router": "4.2.5",
-    "@angular/material": "2.0.0-beta.6",
+    "@ngx-translate/core": "7.0.0",
     "alfresco-js-api": "~1.6.1",
     "core-js": "2.4.1",
     "hammerjs": "2.0.8",
     "ng2-alfresco-core": "1.6.1",
     "ng2-alfresco-datatable": "1.6.1",
     "ng2-alfresco-documentlist": "1.6.1",
-    "@ngx-translate/core": "7.0.0",
     "reflect-metadata": "0.1.10",
     "rxjs": "5.1.0",
     "systemjs": "0.19.27",

ng2-components/ng2-alfresco-social/package.json

@@ -23,20 +23,21 @@
   },
   "dependencies": {
     "@angular/animations": "4.2.5",
+    "@angular/cdk": "2.0.0-beta.8",
     "@angular/common": "4.2.5",
     "@angular/compiler": "4.2.5",
     "@angular/core": "4.2.5",
     "@angular/forms": "4.2.5",
     "@angular/http": "4.2.5",
+    "@angular/material": "^2.0.0-beta.8",
     "@angular/platform-browser": "4.2.5",
     "@angular/platform-browser-dynamic": "4.2.5",
     "@angular/router": "4.2.5",
-    "@angular/material": "2.0.0-beta.6",
+    "@ngx-translate/core": "7.0.0",
     "alfresco-js-api": "~1.6.1",
     "core-js": "2.4.1",
     "hammerjs": "2.0.8",
     "ng2-alfresco-core": "1.6.1",
-    "@ngx-translate/core": "7.0.0",
     "reflect-metadata": "0.1.10",
     "rxjs": "5.1.0",
     "systemjs": "0.19.27",

ng2-components/ng2-alfresco-tag/package.json

@@ -23,20 +23,21 @@
   },
   "dependencies": {
     "@angular/animations": "4.2.5",
+    "@angular/cdk": "2.0.0-beta.8",
     "@angular/common": "4.2.5",
     "@angular/compiler": "4.2.5",
     "@angular/core": "4.2.5",
     "@angular/forms": "4.2.5",
     "@angular/http": "4.2.5",
+    "@angular/material": "^2.0.0-beta.8",
     "@angular/platform-browser": "4.2.5",
     "@angular/platform-browser-dynamic": "4.2.5",
     "@angular/router": "4.2.5",
-    "@angular/material": "2.0.0-beta.6",
+    "@ngx-translate/core": "7.0.0",
     "alfresco-js-api": "~1.6.1",
     "core-js": "2.4.1",
     "hammerjs": "2.0.8",
     "ng2-alfresco-core": "1.6.1",
-    "@ngx-translate/core": "7.0.0",
     "reflect-metadata": "0.1.10",
     "rxjs": "5.1.0",
     "systemjs": "0.19.27",

ng2-components/ng2-alfresco-upload/package.json

@@ -44,12 +44,13 @@
   ],
   "dependencies": {
     "@angular/animations": "4.2.5",
+    "@angular/cdk": "2.0.0-beta.8",
     "@angular/common": "4.2.5",
     "@angular/compiler": "4.2.5",
     "@angular/core": "4.2.5",
     "@angular/forms": "4.2.5",
     "@angular/http": "4.2.5",
-    "@angular/material": "2.0.0-beta.6",
+    "@angular/material": "^2.0.0-beta.8",
     "@angular/platform-browser": "4.2.5",
     "@angular/platform-browser-dynamic": "4.2.5",
     "@angular/router": "4.2.5",

ng2-components/ng2-alfresco-userinfo/package.json

@@ -23,20 +23,21 @@
   },
   "dependencies": {
     "@angular/animations": "4.2.5",
+    "@angular/cdk": "2.0.0-beta.8",
     "@angular/common": "4.2.5",
     "@angular/compiler": "4.2.5",
     "@angular/core": "4.2.5",
     "@angular/forms": "4.2.5",
     "@angular/http": "4.2.5",
+    "@angular/material": "^2.0.0-beta.8",
     "@angular/platform-browser": "4.2.5",
     "@angular/platform-browser-dynamic": "4.2.5",
     "@angular/router": "4.2.5",
-    "@angular/material": "2.0.0-beta.6",
+    "@ngx-translate/core": "7.0.0",
     "alfresco-js-api": "~1.6.1",
     "core-js": "2.4.1",
     "hammerjs": "2.0.8",
     "ng2-alfresco-core": "1.6.1",
-    "@ngx-translate/core": "7.0.0",
     "reflect-metadata": "0.1.10",
     "rxjs": "5.1.0",
     "systemjs": "0.19.27",

ng2-components/ng2-alfresco-viewer/package.json

@@ -38,20 +38,21 @@
   ],
   "dependencies": {
     "@angular/animations": "4.2.5",
+    "@angular/cdk": "2.0.0-beta.8",
     "@angular/common": "4.2.5",
     "@angular/compiler": "4.2.5",
     "@angular/core": "4.2.5",
     "@angular/forms": "4.2.5",
     "@angular/http": "4.2.5",
+    "@angular/material": "^2.0.0-beta.8",
     "@angular/platform-browser": "4.2.5",
     "@angular/platform-browser-dynamic": "4.2.5",
     "@angular/router": "4.2.5",
-    "@angular/material": "2.0.0-beta.6",
+    "@ngx-translate/core": "7.0.0",
     "alfresco-js-api": "~1.6.1",
     "core-js": "2.4.1",
     "hammerjs": "2.0.8",
     "ng2-alfresco-core": "1.6.1",
-    "@ngx-translate/core": "7.0.0",
     "pdfjs-dist": "1.5.404",
     "reflect-metadata": "0.1.10",
     "rxjs": "5.1.0",

ng2-components/ng2-alfresco-webscript/package.json

@@ -23,21 +23,22 @@
   },
   "dependencies": {
     "@angular/animations": "4.2.5",
+    "@angular/cdk": "2.0.0-beta.8",
     "@angular/common": "4.2.5",
     "@angular/compiler": "4.2.5",
     "@angular/core": "4.2.5",
     "@angular/forms": "4.2.5",
     "@angular/http": "4.2.5",
+    "@angular/material": "^2.0.0-beta.8",
     "@angular/platform-browser": "4.2.5",
     "@angular/platform-browser-dynamic": "4.2.5",
     "@angular/router": "4.2.5",
-    "@angular/material": "2.0.0-beta.6",
+    "@ngx-translate/core": "7.0.0",
     "alfresco-js-api": "~1.6.1",
     "core-js": "2.4.1",
     "hammerjs": "2.0.8",
     "ng2-alfresco-core": "1.6.1",
     "ng2-alfresco-datatable": "1.6.1",
-    "@ngx-translate/core": "7.0.0",
     "reflect-metadata": "0.1.10",
     "rxjs": "5.1.0",
     "systemjs": "0.19.27",

ng2-components/package.json

@@ -61,39 +61,40 @@
   },
   "dependencies": {
     "@angular/animations": "4.2.5",
+    "@angular/cdk": "2.0.0-beta.8",
     "@angular/common": "4.2.5",
     "@angular/compiler": "4.2.5",
+    "@angular/compiler-cli": "4.2.5",
     "@angular/core": "4.2.5",
     "@angular/forms": "4.2.5",
     "@angular/http": "4.2.5",
+    "@angular/material": "^2.0.0-beta.8",
     "@angular/platform-browser": "4.2.5",
     "@angular/platform-browser-dynamic": "4.2.5",
     "@angular/router": "4.2.5",
-    "@angular/compiler-cli": "4.2.5",
+    "@ngx-translate/core": "7.0.0",
-    "@angular/material": "2.0.0-beta.6",
     "alfresco-js-api": "~1.6.1",
+    "chart.js": "2.5.0",
     "core-js": "2.4.1",
     "hammerjs": "2.0.8",
     "material-design-icons": "2.2.3",
     "material-design-lite": "1.2.1",
-    "@ngx-translate/core": "7.0.0",
+    "md-date-time-picker": "2.2.0",
+    "minimatch": "3.0.4",
+    "moment": "2.15.1",
+    "ng2-activiti-diagrams": "1.6.1",
+    "ng2-activiti-form": "1.6.1",
+    "ng2-activiti-tasklist": "1.6.1",
+    "ng2-alfresco-core": "1.6.1",
+    "ng2-alfresco-datatable": "1.6.1",
+    "ng2-alfresco-documentlist": "1.6.1",
+    "ng2-charts": "1.6.0",
+    "pdfjs-dist": "1.5.404",
+    "raphael": "2.2.7",
     "reflect-metadata": "0.1.10",
     "rxjs": "5.1.0",
     "systemjs": "0.19.27",
-    "zone.js": "0.6.26",
+    "zone.js": "0.6.26"
-    "ng2-alfresco-core": "1.6.1",
-    "raphael": "2.2.7",
-    "chart.js": "2.5.0",
-    "md-date-time-picker": "2.2.0",
-    "moment": "2.15.1",
-    "ng2-activiti-diagrams": "1.6.1",
-    "ng2-charts": "1.6.0",
-    "ng2-activiti-form": "1.6.1",
-    "ng2-alfresco-datatable": "1.6.1",
-    "ng2-activiti-tasklist": "1.6.1",
-    "ng2-alfresco-documentlist": "1.6.1",
-    "minimatch": "3.0.4",
-    "pdfjs-dist": "1.5.404"
   },
   "devDependencies": {
     "@types/hammerjs": "2.0.34",