[ADF-604] Upgrade @angular/material to latest version (#1909)

* update dependencies and module imports

* fix template warnings and fix import issues

* migrate Activiti Form to MdTabsModule

* fix unit tests

* fix tests

* fix unit tests

* fix unit tests

* disable test that fails only on travis

* upgrade activiti form component to angular/material

* fix test (remove MDL class check)

demo-shell-ng2/app/app.module.ts

@@ -17,6 +17,7 @@
 
 import { NgModule } from '@angular/core';
 import { BrowserModule } from '@angular/platform-browser';
+import { MdSlideToggleModule, MdInputModule } from '@angular/material';
 
 import { CoreModule } from 'ng2-alfresco-core';
 import { SearchModule } from 'ng2-alfresco-search';
@@ -37,7 +38,6 @@ import { AppComponent } from './app.component';
 import { routing } from './app.routes';
 import { CustomEditorsModule } from './components/activiti/custom-editor/custom-editor.component';
 import { Editor3DModule } from 'ng2-3d-editor';
-import { MaterialModule } from '@angular/material';
 import { ChartsModule } from 'ng2-charts';
 
 import {
@@ -62,7 +62,8 @@ import {
     imports: [
         BrowserModule,
         routing,
-        MaterialModule.forRoot(),
+        MdInputModule,
+        MdSlideToggleModule,
         CoreModule.forRoot(),
         LoginModule.forRoot(),
         SearchModule.forRoot(),

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

@@ -150,7 +150,7 @@
     <h5>Upload</h5>
     <section *ngIf="acceptedFilesTypeShow">
         <md-input-container>
-            <input md-input placeholder="Extension accepted" [(ngModel)]="acceptedFilesType"  data-automation-id="accepted-files-type">
+            <input mdInput placeholder="Extension accepted" [(ngModel)]="acceptedFilesType"  data-automation-id="accepted-files-type">
         </md-input-container>
     </section>
     <div *ngIf="!acceptedFilesTypeShow">
@@ -193,9 +193,9 @@
                      [overlayMode]="true">
 
         <extension-viewer [supportedExtensions]="['obj','3DS']" #extension>
-            <template let-urlFileContent="urlFileContent" let-extension="extension" >
+            <ng-template let-urlFileContent="urlFileContent" let-extension="extension" >
                 <threed-viewer [urlFile]="urlFileContent" [extension]="extension" ></threed-viewer>
-            </template>
+            </ng-template>
         </extension-viewer>
 
     </alfresco-viewer>

demo-shell-ng2/app/vendor.ts

@@ -39,7 +39,7 @@ import 'dialog-polyfill/dialog-polyfill.css';
 import 'flag-icon-css/css/flag-icon.min.css';
 
 // Load the Angular Material 2 stylesheet
-import '../public/css/angular-material.css';
+import '@angular/material/prebuilt-themes/indigo-pink.css';
 
 // Google Material Design Lite
 import 'material-design-lite/material.js';

demo-shell-ng2/package.json

@@ -64,7 +64,7 @@
     "@angular/platform-browser-dynamic": "~4.0.0",
     "@angular/router": "~4.0.0",
     "@angular/compiler-cli": "~4.0.0",
-    "@angular/material": "2.0.0-beta.1",
+    "@angular/material": "2.0.0-beta.6",
     "core-js": "2.4.1",
     "reflect-metadata": "0.1.9",
     "rxjs": "5.1.0",

ng2-components/config/assets/tslint.json

@@ -59,7 +59,7 @@
         "no-unused-variable": true,
         "no-use-before-declare": true,
         "no-var-keyword": true,
-        "no-var-requires": true,
+        "no-var-requires": false,
         "object-literal-sort-keys": false,
         "one-line": [
             true,

ng2-components/ng2-activiti-analytics/index.ts

@@ -16,6 +16,7 @@
  */
 
 import { NgModule, ModuleWithProviders } from '@angular/core';
+import { MdTooltipModule, MdButtonModule, MdIconModule } from '@angular/material';
 import { CoreModule } from 'ng2-alfresco-core';
 import { DiagramsModule } from 'ng2-activiti-diagrams';
 
@@ -53,7 +54,10 @@ export const ANALYTICS_PROVIDERS: any[] = [
     imports: [
         CoreModule,
         ChartsModule,
-        DiagramsModule
+        DiagramsModule,
+        MdTooltipModule,
+        MdButtonModule,
+        MdIconModule
     ],
     declarations: [
         ...ANALYTICS_DIRECTIVES
@@ -62,7 +66,10 @@ export const ANALYTICS_PROVIDERS: any[] = [
         ...ANALYTICS_PROVIDERS
     ],
     exports: [
-        ...ANALYTICS_DIRECTIVES
+        ...ANALYTICS_DIRECTIVES,
+        MdTooltipModule,
+        MdButtonModule,
+        MdIconModule
     ]
 })
 export class AnalyticsModule {

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

@@ -41,7 +41,7 @@
     "@angular/platform-browser-dynamic": "~4.0.0",
     "@angular/router": "~4.0.0",
 
-    "@angular/material": "2.0.0-beta.1",
+    "@angular/material": "2.0.0-beta.6",
     "alfresco-js-api": "~1.5.0",
     "chart.js": "2.5.0",
     "core-js": "2.4.1",

ng2-components/ng2-activiti-analytics/src/components/analytics-generator.component.spec.ts

@@ -17,6 +17,7 @@
 
 import { ComponentFixture, TestBed, async } from '@angular/core/testing';
 import { DebugElement } from '@angular/core';
+import { MdTooltipModule, MdButtonModule, MdIconModule } from '@angular/material';
 import { Observable } from 'rxjs/Rx';
 import { ChartsModule } from 'ng2-charts';
 import { CoreModule, AlfrescoTranslationService } from 'ng2-alfresco-core';
@@ -59,7 +60,11 @@ describe('AnalyticsGeneratorComponent', () => {
         TestBed.configureTestingModule({
             imports: [
                 CoreModule.forRoot(),
+                MdTooltipModule,
+                MdButtonModule,
+                MdIconModule,
                 ChartsModule,
+
                 DiagramsModule.forRoot()
             ],
             declarations: [

ng2-components/ng2-activiti-analytics/src/components/analytics-report-parameters.component.spec.ts

@@ -17,6 +17,7 @@
 
 import { ComponentFixture, TestBed, async } from '@angular/core/testing';
 import { DebugElement, SimpleChange } from '@angular/core';
+import { MdTooltipModule, MdButtonModule, OVERLAY_PROVIDERS } from '@angular/material';
 import { Observable } from 'rxjs/Rx';
 import * as moment from 'moment';
 import { CoreModule, AlfrescoTranslationService } from 'ng2-alfresco-core';
@@ -42,14 +43,17 @@ describe('AnalyticsReportParametersComponent', () => {
     beforeEach(async(() => {
         TestBed.configureTestingModule({
             imports: [
-                CoreModule.forRoot()
+                CoreModule.forRoot(),
+                MdTooltipModule,
+                MdButtonModule
             ],
             declarations: [
                 AnalyticsReportParametersComponent,
                 ...WIDGET_DIRECTIVES
             ],
             providers: [
-                AnalyticsService
+                AnalyticsService,
+                OVERLAY_PROVIDERS
             ]
         }).compileComponents();
 

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

@@ -37,7 +37,7 @@
     "@angular/platform-browser-dynamic": "~4.0.0",
     "@angular/router": "~4.0.0",
 
-    "@angular/material": "2.0.0-beta.1",
+    "@angular/material": "2.0.0-beta.6",
     "alfresco-js-api": "~1.5.0",
     "core-js": "2.4.1",
     "hammerjs": "2.0.8",

ng2-components/ng2-activiti-form/index.ts

@@ -16,6 +16,7 @@
  */
 
 import { NgModule, ModuleWithProviders } from '@angular/core';
+import { MdCheckboxModule, MdTabsModule, MdCardModule, MdButtonModule, MdIconModule, MdSlideToggleModule } from '@angular/material';
 import { CoreModule } from 'ng2-alfresco-core';
 
 import { ActivitiForm } from './src/components/activiti-form.component';
@@ -64,7 +65,13 @@ export const ACTIVITI_FORM_PROVIDERS: any[] = [
 @NgModule({
     imports: [
         CoreModule,
-        HttpModule
+        HttpModule,
+        MdCheckboxModule,
+        MdTabsModule,
+        MdCardModule,
+        MdButtonModule,
+        MdIconModule,
+        MdSlideToggleModule
     ],
     declarations: [
         ...ACTIVITI_FORM_DIRECTIVES,
@@ -77,7 +84,13 @@ export const ACTIVITI_FORM_PROVIDERS: any[] = [
         ...ACTIVITI_FORM_PROVIDERS
     ],
     exports: [
-        ...ACTIVITI_FORM_DIRECTIVES
+        ...ACTIVITI_FORM_DIRECTIVES,
+        MdCheckboxModule,
+        MdTabsModule,
+        MdCardModule,
+        MdButtonModule,
+        MdIconModule,
+        MdSlideToggleModule
     ]
 })
 export class ActivitiFormModule {

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

@@ -43,7 +43,7 @@
     "@angular/platform-browser": "~4.0.0",
     "@angular/platform-browser-dynamic": "~4.0.0",
     "@angular/router": "~4.0.0",
-    "@angular/material": "2.0.0-beta.1",
+    "@angular/material": "2.0.0-beta.6",
     "alfresco-js-api": "~1.5.0",
     "core-js": "2.4.1",
     "hammerjs": "2.0.8",

ng2-components/ng2-activiti-form/src/components/activiti-form.component.css

@@ -21,12 +21,14 @@
     font-weight: bold;
 }
 
-.activiti-form-hide-button {
+.activiti-form-reload-button {
-    display: none;
+    position: absolute;
+    right: 0;
+    top: 0;
 }
 
-.activiti-debug-button {
+.activiti-form-hide-button {
-    float: right;
+    display: none;
 }
 
 .activiti-task-title {

ng2-components/ng2-activiti-form/src/components/activiti-form.component.html

@@ -2,13 +2,23 @@
     <div *ngIf="!hasForm()">
         <h3 class="activiti-task-title">Please select a Task</h3>
     </div>
-    <div *ngIf="hasForm()">
+    <div *ngIf="hasForm()" class="{{form.className}}">
-        <div class="mdl-card mdl-shadow--2dp activiti-form-container {{form.className}}">
+        <md-card>
-            <div class="mdl-card__title">
+            <md-card-header>
-                <i *ngIf="showValidationIcon" class="material-icons">{{ form.isValid ? 'event_available' : 'event_busy' }}</i>
+                <md-card-title>
-                <h2 *ngIf="isTitleEnabled()" class="mdl-card__title-text">{{form.taskName}}</h2>
+                    <h4 *ngIf="isTitleEnabled()">
-            </div>
+                        <div *ngIf="showRefreshButton" class="activiti-form-reload-button">
-            <div class="mdl-card__media">
+                            <button md-icon-button (click)="onRefreshClicked()">
+                                <md-icon>refresh</md-icon>
+                            </button>
+                        </div>
+                        <md-icon>{{ form.isValid ? 'event_available' : 'event_busy' }}</md-icon>
+                        <span>{{form.taskName}}</span>
+
+                    </h4>
+                </md-card-title>
+            </md-card-header>
+            <md-card-content>
                 <div *ngIf="form.hasTabs()">
                     <tabs-widget [tabs]="form.tabs" (formTabChanged)="checkVisibility($event);"></tabs-widget>
                 </div>
@@ -18,40 +28,26 @@
                         <form-field [field]="field.field"></form-field>
                     </div>
                 </div>
-            </div>
+            </md-card-content>
-            <div *ngIf="form.hasOutcomes()" class="mdl-card__actions mdl-card--border">
+            <md-card-actions *ngIf="form.hasOutcomes()">
+                <!--[class.mdl-button--colored]="!outcome.isSystem"-->
                 <button *ngFor="let outcome of form.outcomes"
-                        alfresco-mdl-button
+                        md-button
                         [disabled]="!isOutcomeButtonEnabled(outcome)"
-                        [class.mdl-button--colored]="!outcome.isSystem"
                         [class.activiti-form-hide-button]="!isOutcomeButtonVisible(outcome, form.readOnly)"
                         (click)="onOutcomeClicked(outcome, $event)">
-                    {{outcome.name}}
+                    {{outcome.name | uppercase}}
                 </button>
-            </div>
+            </md-card-actions>
-            <div  *ngIf="showRefreshButton" class="mdl-card__menu" >
+        </md-card>
-                <button (click)="onRefreshClicked()"
-                        class="mdl-button mdl-button--icon mdl-js-button mdl-js-ripple-effect">
-                    <i class="material-icons">refresh</i>
-                </button>
-            </div>
-        </div>
     </div>
 </div>
 <!--
 For debugging and data visualisation purposes,
 will be removed during future revisions
 -->
-<div  *ngIf="showDebugButton" class="activiti-form-debug-container">
+<div *ngIf="showDebugButton" class="activiti-form-debug-container">
-
+    <md-slide-toggle [(ngModel)]="debugMode">Debug mode</md-slide-toggle>
-    <div class="activiti-debug-button">
-        <label class="mdl-switch mdl-js-switch mdl-js-ripple-effect" for="switch-1" [class.is-checked]="debugMode">
-            <input type="checkbox" id="switch-1" class="mdl-switch__input" [(ngModel)]="debugMode">
-            <span class="mdl-switch__label"></span>
-            <span class="debug-toggle-text">Debug mode</span>
-        </label>
-    </div>
-
     <div *ngIf="debugMode && hasForm()">
         <h4>Values</h4>
         <pre>{{form.values | json}}</pre>

ng2-components/ng2-activiti-form/src/components/widgets/tabs/tabs.widget.html

@@ -1,20 +1,9 @@
 <div *ngIf="hasTabs()" class="alfresco-tabs-widget">
-    <div alfresco-mdl-tabs>
+    <md-tab-group>
-        <div class="mdl-tabs__tab-bar">
+        <md-tab *ngFor="let tab of visibleTabs" [label]="tab.title">
-            <a *ngFor="let tab of visibleTabs; let isFirst = first"
+            <div *ngFor="let field of tab.fields">
-               id="title-{{tab.id}}"
-               [href]="'#' + tab.id"
-               class="mdl-tabs__tab" [class.is-active]="isFirst">
-                {{tab.title}}
-            </a>
-        </div>
-        <div *ngFor="let tab of visibleTabs; let isFirst = first"
-             class="mdl-tabs__panel"
-             [class.is-active]="isFirst"
-             [attr.id]="tab.id">
-             <div *ngFor="let field of tab.fields">
                 <form-field [field]="field.field"></form-field>
              </div>
-        </div>
+        </md-tab>
-    </div>
+    </md-tab-group>
 </div>

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

@@ -43,7 +43,7 @@
     "@angular/platform-browser-dynamic": "~4.0.0",
     "@angular/router": "~4.0.0",
 
-    "@angular/material": "2.0.0-beta.1",
+    "@angular/material": "2.0.0-beta.6",
     "alfresco-js-api": "~1.5.0",
     "core-js": "2.4.1",
     "hammerjs": "2.0.8",

ng2-components/ng2-activiti-tasklist/index.ts

@@ -16,12 +16,12 @@
  */
 
 import { NgModule, ModuleWithProviders } from '@angular/core';
+import { MdIconModule, MdButtonModule } from '@angular/material';
 import { CoreModule } from 'ng2-alfresco-core';
 import { DataTableModule } from 'ng2-alfresco-datatable';
 import { ActivitiFormModule } from 'ng2-activiti-form';
 import { ActivitiPeopleService } from './src/services/activiti-people.service';
 import { ActivitiTaskListService } from './src/services/activiti-tasklist.service';
-import { MaterialModule } from '@angular/material';
 
 import {
     ActivitiApps,
@@ -67,7 +67,8 @@ export const ACTIVITI_TASKLIST_PROVIDERS: any[] = [
         CoreModule,
         DataTableModule,
         ActivitiFormModule,
-        MaterialModule
+        MdIconModule,
+        MdButtonModule
     ],
     declarations: [
         ...ACTIVITI_TASKLIST_DIRECTIVES
@@ -76,7 +77,9 @@ export const ACTIVITI_TASKLIST_PROVIDERS: any[] = [
         ...ACTIVITI_TASKLIST_PROVIDERS
     ],
     exports: [
-        ...ACTIVITI_TASKLIST_DIRECTIVES
+        ...ACTIVITI_TASKLIST_DIRECTIVES,
+        MdIconModule,
+        MdButtonModule
     ]
 })
 export class ActivitiTaskListModule {

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

@@ -47,7 +47,7 @@
     "@angular/platform-browser-dynamic": "~4.0.0",
     "@angular/router": "~4.0.0",
 
-    "@angular/material": "2.0.0-beta.1",
+    "@angular/material": "2.0.0-beta.6",
     "alfresco-js-api": "~1.5.0",
     "core-js": "2.4.1",
     "hammerjs": "2.0.8",

ng2-components/ng2-activiti-tasklist/src/components/activiti-task-details.component.html

@@ -1,7 +1,7 @@
 <div *ngIf="!taskDetails">
-    <template *ngIf="noTaskDetailsTemplateComponent" ngFor [ngForOf]="[data]" [ngForTemplate]="noTaskDetailsTemplateComponent">
+    <ng-template *ngIf="noTaskDetailsTemplateComponent" ngFor [ngForOf]="[data]" [ngForTemplate]="noTaskDetailsTemplateComponent">
         {{ 'TASK_DETAILS.MESSAGES.NONE' | translate }}
-    </template>
+    </ng-template>
     <div *ngIf="!noTaskDetailsTemplateComponent">
         {{ 'TASK_DETAILS.MESSAGES.NONE' | translate }}
     </div>

ng2-components/ng2-alfresco-core/README.md

@@ -47,11 +47,6 @@ npm install --save ng2-alfresco-core
 
 - Components
     - Context Menu directive
-    - Material Design directives
-        - [mdl]
-        - [alfresco-mdl-button]
-        - [alfresco-mdl-menu]
-        - [alfresco-mdl-tabs]
 - Directives
     - UploadDirective
 - Services

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

@@ -16,12 +16,12 @@
  */
 
 import { NgModule, ModuleWithProviders } from '@angular/core';
+import { MdSnackBarModule } from '@angular/material';
 import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
 import { HttpModule, Http } from '@angular/http';
 import { CommonModule } from '@angular/common';
 import { FormsModule, ReactiveFormsModule } from '@angular/forms';
 import { TranslateModule, TranslateLoader } from 'ng2-translate/ng2-translate';
-import { MaterialModule } from '@angular/material';
 
 import {
     AlfrescoAuthenticationService,
@@ -88,12 +88,12 @@ export function createTranslateLoader(http: Http, logService: LogService) {
         ReactiveFormsModule,
         HttpModule,
         BrowserAnimationsModule,
-        MaterialModule.forRoot(),
         TranslateModule.forRoot({
             provide: TranslateLoader,
             useFactory: (createTranslateLoader),
             deps: [Http, LogService]
-        })
+        }),
+        MdSnackBarModule
     ],
     declarations: [
         ...MATERIAL_DESIGN_DIRECTIVES,
@@ -110,7 +110,6 @@ export function createTranslateLoader(http: Http, logService: LogService) {
         BrowserAnimationsModule,
         CommonModule,
         FormsModule,
-        MaterialModule,
         ReactiveFormsModule,
         HttpModule,
         TranslateModule,
@@ -119,7 +118,8 @@ export function createTranslateLoader(http: Http, logService: LogService) {
         ...COLLAPSABLE_DIRECTIVES,
         UploadDirective,
         DataColumnComponent,
-        DataColumnListComponent
+        DataColumnListComponent,
+        MdSnackBarModule
     ]
 })
 export class CoreModule {

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

@@ -52,7 +52,7 @@
     "@angular/router": "~4.0.0",
     "@angular/compiler-cli": "~4.0.0",
 
-    "@angular/material": "2.0.0-beta.1",
+    "@angular/material": "2.0.0-beta.6",
     "alfresco-js-api": "~1.5.0",
     "core-js": "2.4.1",
     "dialog-polyfill": "0.4.7",

ng2-components/ng2-alfresco-core/src/components/material/index.ts

@@ -18,19 +18,16 @@
 import { MDL } from './mdl-upgrade-element.directive';
 import { AlfrescoMdlButtonDirective } from './mdl-button.directive';
 import { AlfrescoMdlMenuDirective } from './mdl-menu.directive';
-import { AlfrescoMdlTabsDirective } from './mdl-tabs.directive';
 import { AlfrescoMdlTextFieldDirective } from './mdl-textfield.directive';
 
 export * from './mdl-upgrade-element.directive';
 export * from './mdl-button.directive';
 export * from './mdl-menu.directive';
-export * from './mdl-tabs.directive';
 export * from './mdl-textfield.directive';
 
 export const MATERIAL_DESIGN_DIRECTIVES: [any] = [
     MDL,
     AlfrescoMdlButtonDirective,
     AlfrescoMdlMenuDirective,
-    AlfrescoMdlTabsDirective,
     AlfrescoMdlTextFieldDirective
 ];

ng2-components/ng2-alfresco-core/src/components/material/mdl-tabs.directive.ts

@@ -1,79 +0,0 @@
-/*!
- * @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 {
-    Directive,
-    ElementRef,
-    AfterViewInit,
-    OnDestroy
-} from '@angular/core';
-
-declare var componentHandler;
-
-@Directive({
-    selector: '[alfresco-mdl-tabs]'
-})
-export class AlfrescoMdlTabsDirective implements AfterViewInit, OnDestroy {
-
-    private observer: MutationObserver;
-
-    constructor(private element: ElementRef) {}
-
-    ngAfterViewInit() {
-        if (componentHandler) {
-            let el = this.element.nativeElement;
-
-            el.classList.add('mdl-tabs');
-            el.classList.add('mdl-js-tabs');
-            el.classList.add('mdl-js-ripple-effect');
-            componentHandler.upgradeElement(el, 'MaterialTabs');
-
-            // watch widget DOM changes and re-upgrade MDL content
-            let tabBar = el.querySelector('.mdl-tabs__tab-bar');
-            if (tabBar) {
-                this.observer = new MutationObserver((mutations: any[]) => {
-                    let upgrade = false;
-                    mutations.forEach((mutation: MutationRecord) => {
-                        if (mutation.addedNodes && mutation.addedNodes.length > 0) {
-                            upgrade = true;
-                        }
-
-                        if (mutation.removedNodes && mutation.removedNodes.length > 0) {
-                            upgrade = true;
-                        }
-                    });
-
-                    if (upgrade) {
-                        componentHandler.downgradeElements([el]);
-                        componentHandler.upgradeElement(el);
-                    }
-                });
-
-                this.observer.observe(tabBar, {
-                    childList: true,
-                    subtree: false
-                });
-            }
-        }
-    }
-
-    ngOnDestroy() {
-        if (this.observer) {
-            this.observer.disconnect();
-        }
-    }
-}

ng2-components/ng2-alfresco-core/src/services/notification.service.spec.ts

@@ -14,11 +14,12 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
+
 import { async, ComponentFixture, TestBed } from '@angular/core/testing';
 import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
 import { Component } from '@angular/core';
 import { NotificationService } from './notification.service';
-import { MdSnackBarModule } from '@angular/material';
+import { MdSnackBarModule, MdSnackBar, OverlayModule, OVERLAY_PROVIDERS, LiveAnnouncer } from '@angular/material';
 
 describe('NotificationService', () => {
     let fixture: ComponentFixture<ComponentThatProvidesNotificationService>;
@@ -27,11 +28,15 @@ describe('NotificationService', () => {
         TestBed.configureTestingModule({
             imports: [
                 BrowserAnimationsModule,
-                MdSnackBarModule.forRoot()
+                OverlayModule,
+                MdSnackBarModule
             ],
             declarations: [ComponentThatProvidesNotificationService],
             providers: [
-                NotificationService
+                NotificationService,
+                MdSnackBar,
+                OVERLAY_PROVIDERS,
+                LiveAnnouncer
             ]
         });
 
@@ -43,33 +48,28 @@ describe('NotificationService', () => {
         fixture.detectChanges();
     });
 
-    describe('openSnackMessage', () => {
 
-        it('should open a message notification bar', (done) => {
+    it('should open a message notification bar', (done) => {
-            let promise = fixture.componentInstance.sendMessage();
+        let promise = fixture.componentInstance.sendMessage();
-            promise.afterDismissed().subscribe(() => {
+        promise.afterDismissed().subscribe(() => {
-                done();
+            done();
-            });
-
-            fixture.detectChanges();
-
-            expect(document.querySelector('snack-bar-container')).not.toBeNull();
         });
+
+        fixture.detectChanges();
+
+        expect(document.querySelector('snack-bar-container')).not.toBeNull();
     });
 
-    describe('openSnackMessageAction', () => {
 
-        it('should open a message notification bar with action', (done) => {
+    it('should open a message notification bar with action', (done) => {
-            let promise = fixture.componentInstance.sendMessageAction();
+        let promise = fixture.componentInstance.sendMessageAction();
-            promise.afterDismissed().subscribe(() => {
+        promise.afterDismissed().subscribe(() => {
-                done();
+            done();
-            });
-
-            fixture.detectChanges();
-
-            expect(document.querySelector('snack-bar-container')).not.toBeNull();
-            expect(document.querySelector('.md-simple-snackbar-action')).not.toBeNull();
         });
+
+        fixture.detectChanges();
+
+        expect(document.querySelector('snack-bar-container')).not.toBeNull();
     });
 
 });

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

@@ -16,6 +16,7 @@
  */
 
 import { NgModule, ModuleWithProviders } from '@angular/core';
+import { MdCheckboxModule, MdMenuModule, MdIconModule, MdButtonModule } from '@angular/material';
 import { CoreModule } from 'ng2-alfresco-core';
 
 export * from './src/data/index';
@@ -38,13 +39,21 @@ export const ALFRESCO_DATATABLE_DIRECTIVES: [any] = [
 
 @NgModule({
     imports: [
-        CoreModule
+        CoreModule,
+        MdCheckboxModule,
+        MdMenuModule,
+        MdIconModule,
+        MdButtonModule
     ],
     declarations: [
         ...ALFRESCO_DATATABLE_DIRECTIVES
     ],
     exports: [
-        ...ALFRESCO_DATATABLE_DIRECTIVES
+        ...ALFRESCO_DATATABLE_DIRECTIVES,
+        MdCheckboxModule,
+        MdMenuModule,
+        MdIconModule,
+        MdButtonModule
     ]
 })
 export class DataTableModule {

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

@@ -43,7 +43,7 @@
     "@angular/platform-browser-dynamic": "~4.0.0",
     "@angular/router": "~4.0.0",
 
-    "@angular/material": "2.0.0-beta.1",
+    "@angular/material": "2.0.0-beta.6",
     "alfresco-js-api": "~1.5.0",
     "core-js": "2.4.1",
     "hammerjs": "2.0.8",

ng2-components/ng2-alfresco-datatable/src/components/datatable/datatable.component.html

@@ -114,10 +114,10 @@
     <tr *ngIf="data.getRows().length === 0">
         <td class="mdl-data-table__cell--non-numeric no-content-container"
             [attr.colspan]="1 + data.getColumns().length">
-            <template *ngIf="noContentTemplate"
+            <ng-template *ngIf="noContentTemplate"
                       ngFor [ngForOf]="[data]"
                       [ngForTemplate]="noContentTemplate">
-            </template>
+            </ng-template>
         </td>
     </tr>
     </tbody>

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

@@ -16,6 +16,7 @@
  */
 
 import { NgModule, ModuleWithProviders } from '@angular/core';
+import { MdMenuModule, MdButtonModule, MdIconModule } from '@angular/material';
 import { CoreModule } from 'ng2-alfresco-core';
 import { DataTableModule } from 'ng2-alfresco-datatable';
 
@@ -75,7 +76,10 @@ export const DOCUMENT_LIST_PROVIDERS: any[] = [
 @NgModule({
     imports: [
         CoreModule,
-        DataTableModule
+        DataTableModule,
+        MdMenuModule,
+        MdButtonModule,
+        MdIconModule
     ],
     declarations: [
         ...DOCUMENT_LIST_DIRECTIVES
@@ -85,7 +89,10 @@ export const DOCUMENT_LIST_PROVIDERS: any[] = [
     ],
     exports: [
         DataTableModule,
-        ...DOCUMENT_LIST_DIRECTIVES
+        ...DOCUMENT_LIST_DIRECTIVES,
+        MdMenuModule,
+        MdButtonModule,
+        MdIconModule
     ]
 })
 export class DocumentListModule {

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

@@ -51,7 +51,7 @@
     "@angular/platform-browser-dynamic": "~4.0.0",
     "@angular/router": "~4.0.0",
 
-    "@angular/material": "2.0.0-beta.1",
+    "@angular/material": "2.0.0-beta.6",
     "alfresco-js-api": "~1.5.0",
     "core-js": "2.4.1",
     "hammerjs": "2.0.8",

ng2-components/ng2-alfresco-documentlist/src/components/document-list.component.html

@@ -20,14 +20,14 @@
     (rowDblClick)="onRowDblClick($event)">
     <div *ngIf="!isEmptyTemplateDefined()">
         <no-content-template>
-            <template>
+            <ng-template>
                 <div class="document-list_empty_template">
                     <div class="document-list__this-space-is-empty">This folder is empty</div>
                     <div class="document-list__drag-drop">Drag and Drop</div>
                     <div class="document-list__any-files-here-to-add">any files here to add</div>
                     <img [src]="emptyFolderImageUrl" class="document-list__empty_doc_lib">
                 </div>
-            </template>
+            </ng-template>
         </no-content-template>
     </div>
 </alfresco-datatable>

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

@@ -17,7 +17,7 @@
 
 import { NgModule, ModuleWithProviders } from '@angular/core';
 import { CoreModule } from 'ng2-alfresco-core';
-import { MaterialModule } from '@angular/material';
+import { MdInputModule, MdIconModule, MdCheckboxModule } from '@angular/material';
 
 import { LoginHeaderDirective } from './src/directives/login-header.directive';
 import { LoginFooterDirective } from './src/directives/login-footer.directive';
@@ -37,14 +37,19 @@ export const ALFRESCO_LOGIN_DIRECTIVES: any[] = [
 @NgModule({
     imports: [
         CoreModule,
-        MaterialModule
+        MdInputModule,
+        MdIconModule,
+        MdCheckboxModule
     ],
     declarations: [
         ...ALFRESCO_LOGIN_DIRECTIVES
     ],
     providers: [],
     exports: [
-        ...ALFRESCO_LOGIN_DIRECTIVES
+        ...ALFRESCO_LOGIN_DIRECTIVES,
+        MdInputModule,
+        MdIconModule,
+        MdCheckboxModule
     ]
 })
 export class LoginModule {

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

@@ -55,7 +55,7 @@
     "@angular/platform-browser-dynamic": "~4.0.0",
     "@angular/router": "~4.0.0",
 
-    "@angular/material": "2.0.0-beta.1",
+    "@angular/material": "2.0.0-beta.6",
     "alfresco-js-api": "~1.5.0",
     "hammerjs": "2.0.8",
     "ng2-alfresco-core": "1.5.0",

ng2-components/ng2-alfresco-login/src/components/alfresco-login.component.html

@@ -4,10 +4,10 @@
         <form [formGroup]="form" (submit)="onSubmit(form.value, $event)">
             <div class="mdl-card__title alfresco-logo">
                 <!--HEADER TEMPLATE-->
-                <template *ngIf="headerTemplate"
+                <ng-template *ngIf="headerTemplate"
                           ngFor [ngForOf]="[data]"
                           [ngForTemplate]="headerTemplate">
-                </template>
+                </ng-template>
                 <img *ngIf="!headerTemplate" class="center" [src]="logoImageUrl" alt="{{'LOGIN.LOGO' | translate }}">
             </div>
             <div class="mdl-card__supporting-text">
@@ -22,7 +22,7 @@
                 <!--USERNAME FIELD-->
                 <div class="adf-login__field" [ngClass]="{'is-invalid': isErrorStyle(form.controls.username)}">
                     <md-input-container class="adf-full-width">
-                        <input md-input placeholder="{{'LOGIN.LABEL.USERNAME' | translate }}"
+                        <input mdInput placeholder="{{'LOGIN.LABEL.USERNAME' | translate }}"
                                type="text"
                                class="adf-full-width"
                                [formControl]="form.controls['username']"
@@ -44,7 +44,7 @@
                     <md-icon *ngIf="isPasswordShow" class="alfresco-login__password-icon" data-automation-id="hide_password" (click)="toggleShowPassword()">visibility_off</md-icon>
 
                     <md-input-container class="adf-full-width">
-                        <input md-input placeholder="{{'LOGIN.LABEL.PASSWORD' | translate }}"
+                        <input mdInput placeholder="{{'LOGIN.LABEL.PASSWORD' | translate }}"
                                type="password"
                                [formControl]="form.controls['password']"
                                id="password"
@@ -70,10 +70,10 @@
             <div class="mdl-card__actions mdl-card--border mdl-card__link">
 
                 <!--FOOTER TEMPLATE-->
-                <template *ngIf="footerTemplate"
+                <ng-template *ngIf="footerTemplate"
                           ngFor [ngForOf]="[data]"
                           [ngForTemplate]="footerTemplate">
-                </template>
+                </ng-template>
                 <div class="login-action" *ngIf="!footerTemplate && showLoginActions">
                     <div id="login-action-help" class="login-action-left">
                         <a href="{{needHelpLink}}">{{'LOGIN.ACTION.HELP' | translate }}</a>

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

@@ -51,7 +51,7 @@
     "@angular/platform-browser-dynamic": "~4.0.0",
     "@angular/router": "~4.0.0",
 
-    "@angular/material": "2.0.0-beta.1",
+    "@angular/material": "2.0.0-beta.6",
     "alfresco-js-api": "~1.5.0",
     "core-js": "2.4.1",
     "hammerjs": "2.0.8",

ng2-components/ng2-alfresco-search/src/components/alfresco-search.component.html

@@ -13,14 +13,12 @@
             (success)="resetError()"
             (preview)="onPreviewFile($event)">
             <empty-folder-content>
-                <template>
+                <ng-template>
                     <div class="empty_template">
                         <div class="no-result-message">{{ 'SEARCH.RESULTS.NONE' | translate:{searchTerm: searchTerm} }}</div>
                         <img [src]="emptyFolderImageUrl" class="no-result__empty_doc_lib">
                     </div>
-                </template>
+                </ng-template>
-                <template>
-                </template>
             </empty-folder-content>
 
             <content-columns>

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

@@ -31,7 +31,7 @@
     "@angular/platform-browser-dynamic": "~4.0.0",
     "@angular/router": "~4.0.0",
 
-    "@angular/material": "2.0.0-beta.1",
+    "@angular/material": "2.0.0-beta.6",
     "alfresco-js-api": "~1.5.0",
     "core-js": "2.4.1",
     "hammerjs": "2.0.8",

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

@@ -16,6 +16,7 @@
  */
 
 import { NgModule, ModuleWithProviders } from '@angular/core';
+import { MdInputModule, MdButtonModule } from '@angular/material';
 import { CoreModule } from 'ng2-alfresco-core';
 
 import { TagActionsComponent } from './src/components/tag-actions.component';
@@ -40,7 +41,9 @@ export const TAG_PROVIDERS: any[] = [
 
 @NgModule({
     imports: [
-        CoreModule
+        CoreModule,
+        MdInputModule,
+        MdButtonModule
     ],
     declarations: [
         ...TAG_DIRECTIVES
@@ -49,7 +52,9 @@ export const TAG_PROVIDERS: any[] = [
         ...TAG_PROVIDERS
     ],
     exports: [
-        ...TAG_DIRECTIVES
+        ...TAG_DIRECTIVES,
+        MdInputModule,
+        MdButtonModule
     ]
 })
 export class TagModule {

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

@@ -31,7 +31,7 @@
     "@angular/platform-browser-dynamic": "~4.0.0",
     "@angular/router": "~4.0.0",
 
-    "@angular/material": "2.0.0-beta.1",
+    "@angular/material": "2.0.0-beta.6",
     "alfresco-js-api": "~1.5.0",
     "core-js": "2.4.1",
     "hammerjs": "2.0.8",

ng2-components/ng2-alfresco-tag/src/components/tag-actions.component.html

@@ -14,7 +14,7 @@
                 <tr>
                     <td>
                         <md-input-container class="adf-full-width">
-                            <input md-input placeholder="{{'TAG.LABEL.NEWTAG' | translate }}"
+                            <input mdInput placeholder="{{'TAG.LABEL.NEWTAG' | translate }}"
                                    type="text"
                                    class="mdl-textfield__input"
                                    (keypress)="cleanErrorMsg()"
@@ -47,7 +47,7 @@
             <tr>
                 <td>
                     <md-input-container class="adf-full-width">
-                        <input md-input placeholder="{{'TAG.LABEL.NEWTAG' | translate }}"
+                        <input mdInput placeholder="{{'TAG.LABEL.NEWTAG' | translate }}"
                                type="text"
                                class="mdl-textfield__input"
                                (keypress)="cleanErrorMsg()"

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

@@ -16,6 +16,7 @@
  */
 
 import { NgModule, ModuleWithProviders } from '@angular/core';
+import { MdIconModule } from '@angular/material';
 import { CoreModule } from 'ng2-alfresco-core';
 
 import { UploadDragAreaComponent } from './src/components/upload-drag-area.component';
@@ -65,7 +66,8 @@ export const UPLOAD_PROVIDERS: any[] = [
 
 @NgModule({
     imports: [
-        CoreModule
+        CoreModule,
+        MdIconModule
     ],
     declarations: [
         ...UPLOAD_DIRECTIVES

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

@@ -52,7 +52,7 @@
     "@angular/platform-browser-dynamic": "~4.0.0",
     "@angular/router": "~4.0.0",
 
-    "@angular/material": "2.0.0-beta.1",
+    "@angular/material": "2.0.0-beta.6",
     "alfresco-js-api": "~1.5.0",
     "core-js": "2.4.1",
     "hammerjs": "2.0.8",

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

@@ -31,7 +31,7 @@
     "@angular/platform-browser-dynamic": "~4.0.0",
     "@angular/router": "~4.0.0",
 
-    "@angular/material": "2.0.0-beta.1",
+    "@angular/material": "2.0.0-beta.6",
     "alfresco-js-api": "~1.5.0",
     "core-js": "2.4.1",
     "hammerjs": "2.0.8",

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

@@ -46,7 +46,7 @@
     "@angular/platform-browser-dynamic": "~4.0.0",
     "@angular/router": "~4.0.0",
 
-    "@angular/material": "2.0.0-beta.1",
+    "@angular/material": "2.0.0-beta.6",
     "alfresco-js-api": "~1.5.0",
     "core-js": "2.4.1",
     "hammerjs": "2.0.8",

ng2-components/ng2-alfresco-viewer/src/components/viewer.component.html

@@ -53,8 +53,11 @@
                         </div>
 
                          <span *ngFor="let extensionTemplate of extensionTemplates">
-                            <template [ngTemplateOutlet]="extensionTemplate.template"  *ngIf="extensionTemplate.isVisible"
+                            <ng-template
-                                      [ngOutletContext]="{ urlFileContent: urlFileContent, extension:extension }"></template>
+                                *ngIf="extensionTemplate.isVisible"
+                                [ngTemplateOutlet]="extensionTemplate.template"
+                                [ngOutletContext]="{ urlFileContent: urlFileContent, extension:extension }">
+                            </ng-template>
                          </span>
 
                         <div *ngIf="!supportedExtension()">

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

@@ -31,7 +31,7 @@
     "@angular/platform-browser-dynamic": "~4.0.0",
     "@angular/router": "~4.0.0",
 
-    "@angular/material": "2.0.0-beta.1",
+    "@angular/material": "2.0.0-beta.6",
     "alfresco-js-api": "~1.5.0",
     "core-js": "2.4.1",
     "hammerjs": "2.0.8",

ng2-components/package.json

@@ -64,7 +64,7 @@
     "@angular/platform-browser-dynamic": "~4.0.0",
     "@angular/router": "~4.0.0",
     "@angular/compiler-cli": "~4.0.0",
-    "@angular/material": "2.0.0-beta.1",
+    "@angular/material": "2.0.0-beta.6",
     "alfresco-js-api": "~1.5.0",
     "core-js": "2.4.1",
     "dialog-polyfill": "0.4.7",