[ADF-1731] update material2 beta12 e angular2 4.4.5 (#2475)

* update material2 beta12
update angular2 4.4.5

* fix changed version js-api

* update types hammerjs

* fix test

* clean old doc

* fix pagination test

* fix test

* missing update packages

* fix <mat-form-field> for select box

* start task component test

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

@@ -1,15 +1,15 @@
 <div class="about-container">
     <h3>Server settings</h3>
-    <md-list>
+    <mat-list>
         <small>The values below are taken from the AppConfigService and loaded from the '{{ configFile }}' file.</small>
-        <md-list-item>
+        <mat-list-item>
-            <h4 md-line> Alfresco Process Services URL: {{ bpmHost }}</h4>
+            <h4 matLine> Alfresco Process Services URL: {{ bpmHost }}</h4>
-        </md-list-item>
+        </mat-list-item>
-        <md-divider></md-divider>
+        <mat-divider></mat-divider>
-        <md-list-item>
+        <mat-list-item>
-            <h4 md-line>Alfresco Content Services URL: {{ ecmHost }}</h4>
+            <h4 matLine>Alfresco Content Services URL: {{ ecmHost }}</h4>
-        </md-list-item>
+        </mat-list-item>
-    </md-list>
+    </mat-list>
 
     <h3>Product Versions</h3>
     <div *ngIf="bpmVersion">

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

@@ -1,11 +1,11 @@
-<md-tab-group [(selectedIndex)]="activeTab">
+<mat-tab-group [(selectedIndex)]="activeTab">
-    <md-tab id="tasks-header" href="#tasks" label="{{'PS-TAB.TASKS-TAB' | translate}}">
+    <mat-tab id="tasks-header" href="#tasks" label="{{'PS-TAB.TASKS-TAB' | translate}}">
         <div class="page-content">
             <div class="activiti-demo-grid" fxLayout="row" fxLayout.lt-lg="column" fxLayoutAlign="stretch">
                 <div class="activiti-demo-grid-item activiti-demo-tasks-menu" fxFlex.gt-md="225px">
                     <div class="activiti-demo-list-buttons">
-                        <button color="primary" md-raised-button data-automation-id="btn-start-task" class="activiti-demo-list-buttons-start" (click)="navigateStartTask()">
+                        <button color="primary" mat-raised-button data-automation-id="btn-start-task" class="activiti-demo-list-buttons-start" (click)="navigateStartTask()">
-                            <md-icon>add</md-icon>
+                            <mat-icon>add</mat-icon>
                             <span>{{'PS-TAB.START-TASK' | translate}}</span>
                         </button>
                     </div>
@@ -77,18 +77,18 @@
                             adf-task-audit
                             [task-id]="currentTaskId"
                             [download]="true"
-                            md-icon-button (clicked)="onAuditClick($event)" (error)="onAuditError($event)">
+                            mat-icon-button (clicked)="onAuditClick($event)" (error)="onAuditError($event)">
-                            <md-icon>assignment_ind</md-icon>
+                            <mat-icon>assignment_ind</mat-icon>
                         </button>
                         <hr>
                     </div>
-                    <md-card>
+                    <mat-card>
-                        <md-card-content>
+                        <mat-card-content>
                             <activiti-task-attachments
                                 [taskId]="currentTaskId">
                             </activiti-task-attachments>
-                        </md-card-content>
+                        </mat-card-content>
-                    </md-card>
+                    </mat-card>
                 </div>
                 <div class="activiti-demo-grid-item activiti-demo-tasks-start" *ngIf="isStartTaskMode()" fxFlex.gt-md="1 1 auto">
                     <adf-start-task
@@ -99,8 +99,8 @@
                 </div>
             </div>
         </div>
-    </md-tab>
+    </mat-tab>
-    <md-tab id="processes-header" href="#processes"
+    <mat-tab id="processes-header" href="#processes"
             label="{{'PS-TAB.PROCESSES-TAB' | translate}}">
         <div class="page-content">
             <div class="activiti-demo-grid" fxLayout="row" fxLayout.lt-lg="column" fxLayoutAlign="stretch">
@@ -108,11 +108,11 @@
                     <div class="activiti-demo-list-buttons">
                         <button
                             color="primary"
-                            md-raised-button
+                            mat-raised-button
                             class="activiti-demo-list-buttons-start"
                             data-automation-id="btn-start-process"
                             (click)="navigateStartProcess()">
-                            <md-icon>add</md-icon>
+                            <mat-icon>add</mat-icon>
                             <span>{{'PS-TAB.START-PROCESS' | translate}}</span>
                         </button>
                     </div>
@@ -161,21 +161,21 @@
                         {{'PS-TAB.AUDIT-LOG' | translate}}
                         <button adf-process-audit
                                 [process-id]="currentProcessInstanceId"
-                                [download]="true" md-icon-button
+                                [download]="true" mat-icon-button
                                 [format]="'pdf'"
                                 (clicked)="onAuditClick($event)"
                                 (error)="onAuditError($event)">
-                            <md-icon>assignment_ind</md-icon>
+                            <mat-icon>assignment_ind</mat-icon>
                         </button>
                         <hr>
                     </div>
-                    <md-card>
+                    <mat-card>
-                        <md-card-content>
+                        <mat-card-content>
                             <activiti-process-attachments
                                 [processId]="currentProcessInstanceId">
                             </activiti-process-attachments>
-                        </md-card-content>
+                        </mat-card-content>
-                    </md-card>
+                    </mat-card>
                 </div>
                 <div class="activiti-demo-grid-item activiti-demo-processes-start" fxFlex.gt-md="1 1 auto"
                      *ngIf="isStartProcessMode()">
@@ -187,8 +187,8 @@
                 </div>
             </div>
         </div>
-    </md-tab>
+    </mat-tab>
-    <md-tab id="report-header" href="#report"
+    <mat-tab id="report-header" href="#report"
             label="{{'PS-TAB.REPORTS-TAB' | translate}}">
         <div class="activiti-demo-grid" fxLayout="row" fxLayout.lt-lg="column" fxLayoutAlign="stretch">
             <div class="activiti-demo-grid-item activiti-demo-reports-menu" fxFlex.gt-md="300px">
@@ -216,8 +216,8 @@
                 </div>
             </div>
         </div>
-    </md-tab>
+    </mat-tab>
-</md-tab-group>
+</mat-tab-group>
 
 <div *ngIf="fileShowed">
     <alfresco-viewer

demo-shell-ng2/app/components/activiti/activiti-show-diagram.component.html

@@ -1,4 +1,4 @@
 <div>
-    <button md-mini-fab  (click)="onClickBack()" ><md-icon>keyboard_backspace</md-icon></button>
+    <button mat-mini-fab  (click)="onClickBack()" ><mat-icon>keyboard_backspace</mat-icon></button>
     <adf-diagram [processInstanceId]="processDefinitionId"></adf-diagram>
 </div>

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

@@ -1,18 +1,18 @@
-<md-sidenav-container class="adf-nav-container">
+<mat-sidenav-container class="adf-nav-container">
-    <md-sidenav #sidenav class="adf-sidenav" position="end" mode="push">
+    <mat-sidenav #sidenav class="adf-sidenav" position="end" mode="push">
-        <md-nav-list>
+        <mat-nav-list>
-            <a md-list-item *ngFor="let link of links" [routerLink]="link.href" routerLinkActive="active" [routerLinkActiveOptions]="{ exact: true }" (click)="sidenav.close()" class="adf-sidenav-link">
+            <a mat-list-item *ngFor="let link of links" [routerLink]="link.href" routerLinkActive="active" [routerLinkActiveOptions]="{ exact: true }" (click)="sidenav.close()" class="adf-sidenav-link">
-                <md-icon mdListIcon>{{link.icon}}</md-icon>
+                <mat-icon matListIcon>{{link.icon}}</mat-icon>
                 <span>{{link.title | translate }}</span>
             </a>
-            <a md-list-item adf-logout (click)="sidenav.close()">
+            <a mat-list-item adf-logout (click)="sidenav.close()">
-                <md-icon mdListIcon>exit_to_app</md-icon>
+                <mat-icon matListIcon>exit_to_app</mat-icon>
                 <span>Logout</span>
             </a>
-        </md-nav-list>
+        </mat-nav-list>
-    </md-sidenav>
+    </mat-sidenav>
 
-    <md-toolbar color="primary" class="adf-app-layout-toolbar" md-no-ink>
+    <mat-toolbar color="primary" class="adf-app-layout-toolbar" md-no-ink>
         <adf-userinfo
             class="adf-app-layout-user-profile"
             [menuPositionX]="'before'"
@@ -25,25 +25,25 @@
 
         <search-bar fxFlex="0 1 auto"></search-bar>
 
-        <a fxFlex="0 0 auto" class="adf-toolbar-link" fxShow fxHide.lt-md="true" md-button data-automation-id="home" href="" routerLink="/home" routerLinkActive="active" [routerLinkActiveOptions]="{ exact: true }">{{'APP_LAYOUT.HOME' | translate }}</a>
+        <a fxFlex="0 0 auto" class="adf-toolbar-link" fxShow fxHide.lt-md="true" mat-button data-automation-id="home" href="" routerLink="/home" routerLinkActive="active" [routerLinkActiveOptions]="{ exact: true }">{{'APP_LAYOUT.HOME' | translate }}</a>
-        <a fxFlex="0 0 auto" class="adf-toolbar-link" fxShow fxHide.lt-md="true" md-button data-automation-id="files" href="" routerLink="/files" routerLinkActive="active" [routerLinkActiveOptions]="{ exact: true }">{{'APP_LAYOUT.CONTENT_SERVICES' | translate }}</a>
+        <a fxFlex="0 0 auto" class="adf-toolbar-link" fxShow fxHide.lt-md="true" mat-button data-automation-id="files" href="" routerLink="/files" routerLinkActive="active" [routerLinkActiveOptions]="{ exact: true }">{{'APP_LAYOUT.CONTENT_SERVICES' | translate }}</a>
-        <a fxFlex="0 0 auto" class="adf-toolbar-link" fxShow fxHide.lt-md="true"  md-button data-automation-id="activiti" href="" routerLink="/activiti" routerLinkActive="active" [routerLinkActiveOptions]="{ exact: true }">{{'APP_LAYOUT.PROCESS_SERVICES' | translate }}</a>
+        <a fxFlex="0 0 auto" class="adf-toolbar-link" fxShow fxHide.lt-md="true"  mat-button data-automation-id="activiti" href="" routerLink="/activiti" routerLinkActive="active" [routerLinkActiveOptions]="{ exact: true }">{{'APP_LAYOUT.PROCESS_SERVICES' | translate }}</a>
-        <a fxFlex="0 0 auto" class="adf-toolbar-link" fxShow fxHide.lt-md="true" md-button data-automation-id="login" href="" routerLink="/login">Login</a>
+        <a fxFlex="0 0 auto" class="adf-toolbar-link" fxShow fxHide.lt-md="true" mat-button data-automation-id="login" href="" routerLink="/login">Login</a>
 
         <theme-picker></theme-picker>
-        <button md-icon-button [mdMenuTriggerFor]="langMenu">
+        <button mat-icon-button [matMenuTriggerFor]="langMenu">
-            <md-icon>language</md-icon>
+            <mat-icon>language</mat-icon>
         </button>
-        <md-menu #langMenu="mdMenu">
+        <mat-menu #langMenu="matMenu">
-            <button md-menu-item (click)="changeLanguage('en')">English</button>
+            <button mat-menu-item (click)="changeLanguage('en')">English</button>
-            <button md-menu-item (click)="changeLanguage('it')">Italian</button>
+            <button mat-menu-item (click)="changeLanguage('it')">Italian</button>
-            <button md-menu-item (click)="changeLanguage('ru')">Russian</button>
+            <button mat-menu-item (click)="changeLanguage('ru')">Russian</button>
-        </md-menu>
+        </mat-menu>
 
-        <button md-icon-button (click)="sidenav.open()">
+        <button mat-icon-button (click)="sidenav.open()">
-            <md-icon>menu</md-icon>
+            <mat-icon>menu</mat-icon>
         </button>
-    </md-toolbar>
+    </mat-toolbar>
 
     <router-outlet></router-outlet>
-</md-sidenav-container>
+</mat-sidenav-container>

demo-shell-ng2/app/components/app-layout/app-layout.component.scss

@@ -33,7 +33,7 @@
             line-height: $toolbarHeight;
             overflow: hidden;
 
-            md-toolbar-row {
+            mat-toolbar-row {
                 height: $toolbarHeight;
                 align-items: stretch;
                 justify-content: space-between;

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

@@ -9,7 +9,7 @@
         (executeRowAction)="onExecuteRowAction($event)"
         (row-click)="onRowClick($event)"
         (row-dblclick)="onRowDblClick($event)">
-      <!-- HTML column definition demo -->
+        <!-- HTML column definition demo -->
         <!--
         <data-columns>
             <data-column type="image" key="icon" [sortable]="false"></data-column>
@@ -22,20 +22,22 @@
     </alfresco-datatable>
 </div>
 <div class="p-10" data-automation-id="multiselect">
-    <md-checkbox [(ngModel)]="multiselect">{{ 'DATATABLE.MULTISELECT'| translate }}</md-checkbox>
+    <mat-checkbox [(ngModel)]="multiselect">{{ 'DATATABLE.MULTISELECT'| translate }}</mat-checkbox>
 </div>
 <div class="p-10">
     <p>{{ 'DATATABLE.MULTISELECT_DESCRIPTION'| translate }}</p>
-    <md-select placeholder="Selection Mode" [(ngModel)]="selectionMode" name="food">
+    <mat-form-field>
-        <md-option *ngFor="let mode of selectionModes" [value]="mode.value">
+        <mat-select placeholder="Selection Mode" [(ngModel)]="selectionMode" name="food">
-            {{mode.viewValue}}
+            <mat-option *ngFor="let mode of selectionModes" [value]="mode.value">
-        </md-option>
+                {{mode.viewValue}}
-    </md-select>
+            </mat-option>
+        </mat-select>
+    </mat-form-field>
 </div>
 <div class="p-10">
-    <button md-raised-button (click)="reset()">{{ 'DATATABLE.RESET_DEFAULT'| translate }}</button>
+    <button mat-raised-button (click)="reset()">{{ 'DATATABLE.RESET_DEFAULT'| translate }}</button>
-    <button md-raised-button (click)="addRow()">{{ 'DATATABLE.ADD_ROW'| translate }}</button>
+    <button mat-raised-button (click)="addRow()">{{ 'DATATABLE.ADD_ROW'| translate }}</button>
-    <button md-raised-button (click)="replaceRows()">{{ 'DATATABLE.REPLACE_ROWS'| translate }}</button>
+    <button mat-raised-button (click)="replaceRows()">{{ 'DATATABLE.REPLACE_ROWS'| translate }}</button>
-    <button md-raised-button (click)="replaceColumns()">{{ 'DATATABLE.REPLACE_COLUMNS'| translate }}</button>
+    <button mat-raised-button (click)="replaceColumns()">{{ 'DATATABLE.REPLACE_COLUMNS'| translate }}</button>
-    <button md-raised-button (click)="getRowForNode()">{{ 'DATATABLE.LOAD_NODE'| translate }}</button>
+    <button mat-raised-button (click)="getRowForNode()">{{ 'DATATABLE.LOAD_NODE'| translate }}</button>
 </div>

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

@@ -1,20 +1,22 @@
 <adf-toolbar>
     <adf-toolbar-title>
-        <md-select [(ngModel)]="selectedSource">
+        <mat-form-field>
-            <md-option *ngFor="let source of sources" [value]="source.value">
+            <mat-select [(ngModel)]="selectedSource">
-                {{ source.title }}
+                <mat-option *ngFor="let source of sources" [value]="source.value">
-            </md-option>
+                    {{ source.title }}
-        </md-select>
+                </mat-option>
+            </mat-select>
+        </mat-form-field>
     </adf-toolbar-title>
 
     <div fxFlex="0 1 auto" class="adf-document-action-buttons" fxShow fxHide.lt-sm="true">
-        <button md-icon-button
+        <button mat-icon-button
-            (restore)="documentList.reload()"
+                (restore)="documentList.reload()"
-            [disabled]="!documentList.selection.length"
+                [disabled]="!documentList.selection.length"
-            *ngIf="selectedSource === '-trashcan-'"
+                *ngIf="selectedSource === '-trashcan-'"
-            location="/files"
+                location="/files"
-            [adf-restore]="documentList.selection">
+                [adf-restore]="documentList.selection">
-            <md-icon>restore</md-icon>
+            <mat-icon>restore</mat-icon>
         </button>
     </div>
 </adf-toolbar>

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

@@ -9,105 +9,105 @@
         [adf-node-permission]="'create'"
         [adf-nodes]="getCurrentDocumentListNode()">
         <div *ngIf="errorMessage" class="error-message">
-            <button (click)="resetError()" md-icon-button>
+            <button (click)="resetError()" mat-icon-button>
-                <md-icon>highlight_off</md-icon>
+                <mat-icon>highlight_off</mat-icon>
             </button>
             <span class="error-message--text">{{errorMessage}}</span>
         </div>
         <adf-toolbar [color]="toolbarColor" class="adf-files-toolbar">
             <adf-toolbar-title fxFlex="0 1 auto">
                 <adf-breadcrumb fxShow fxHide.lt-sm="true"
-                    class="files-breadcrumb"
+                                class="files-breadcrumb"
-                    root="Personal Files"
+                                root="Personal Files"
-                    [target]="documentList"
+                                [target]="documentList"
-                    [folderNode]="documentList.folderNode">
+                                [folderNode]="documentList.folderNode">
                 </adf-breadcrumb>
                 <adf-dropdown-breadcrumb fxHide fxShow.lt-sm="true"
-                    class="files-breadcrumb"
+                                         class="files-breadcrumb"
-                    [target]="documentList"
+                                         [target]="documentList"
-                    [folderNode]="documentList.folderNode">
+                                         [folderNode]="documentList.folderNode">
                 </adf-dropdown-breadcrumb>
             </adf-toolbar-title>
 
             <adf-toolbar-divider fxFlex="0 0 auto"></adf-toolbar-divider>
 
             <div fxFlex="0 0 auto" class="adf-document-action-buttons" fxShow fxHide.lt-sm="true">
-                <button md-icon-button
+                <button mat-icon-button
-                    (click)="onCreateFolderClicked($event)">
+                        (click)="onCreateFolderClicked($event)">
-                    <md-icon>create_new_folder</md-icon>
+                    <mat-icon>create_new_folder</mat-icon>
                 </button>
-                <button md-icon-button
+                <button mat-icon-button
-                    [disabled]="!hasSelection(documentList.selection)"
+                        [disabled]="!hasSelection(documentList.selection)"
-                    title="Download"
+                        title="Download"
-                    (click)="downloadNodes(documentList.selection)">
+                        (click)="downloadNodes(documentList.selection)">
-                    <md-icon>get_app</md-icon>
+                    <mat-icon>get_app</mat-icon>
                 </button>
-                <button md-icon-button
+                <button mat-icon-button
                         adf-node-permission="delete"
                         [adf-nodes]="documentList.selection">
-                    <md-icon>delete</md-icon>
+                    <mat-icon>delete</mat-icon>
                 </button>
-                <button md-icon-button
+                <button mat-icon-button
-                    #favorite="adfFavorite"
+                        #favorite="adfFavorite"
-                    (toggle)="documentList.reload()"
+                        (toggle)="documentList.reload()"
-                    [adf-node-favorite]="documentList.selection">
+                        [adf-node-favorite]="documentList.selection">
-                    <md-icon>
+                    <mat-icon>
                         {{ favorite.hasFavorites() ? 'star' :'star_border' }}
-                    </md-icon>
+                    </mat-icon>
                 </button>
             </div>
 
-            <button fxFlex="0 0 auto" md-icon-button [mdMenuTriggerFor]="themePicker">
+            <button fxFlex="0 0 auto" mat-icon-button [matMenuTriggerFor]="themePicker">
-                <md-icon>format_color_fill</md-icon>
+                <mat-icon>format_color_fill</mat-icon>
             </button>
 
-            <md-menu #themePicker="mdMenu">
+            <mat-menu #themePicker="matMenu">
-                <button md-menu-item (click)="toolbarColor = 'default'">Default</button>
+                <button mat-menu-item (click)="toolbarColor = 'default'">Default</button>
-                <button md-menu-item (click)="toolbarColor = 'primary'">Primary</button>
+                <button mat-menu-item (click)="toolbarColor = 'primary'">Primary</button>
-                <button md-menu-item (click)="toolbarColor = 'accent'">Accent</button>
+                <button mat-menu-item (click)="toolbarColor = 'accent'">Accent</button>
-                <button md-menu-item (click)="toolbarColor = 'warn'">Warn</button>
+                <button mat-menu-item (click)="toolbarColor = 'warn'">Warn</button>
-            </md-menu>
+            </mat-menu>
 
             <adf-toolbar-divider fxFlex="0 0 auto" fxHide fxShow.lt-sm="true"></adf-toolbar-divider>
 
-            <button fxFlex="0 0 auto" md-icon-button [mdMenuTriggerFor]="menu" fxHide fxShow.lt-sm="true">
+            <button fxFlex="0 0 auto" mat-icon-button [matMenuTriggerFor]="menu" fxHide fxShow.lt-sm="true">
-                <md-icon>more_vert</md-icon>
+                <mat-icon>more_vert</mat-icon>
             </button>
-            <md-menu #menu="mdMenu">
+            <mat-menu #menu="matMenu">
-                <button md-menu-item
+                <button mat-menu-item
-                    (click)="onCreateFolderClicked($event)">
+                        (click)="onCreateFolderClicked($event)">
-                    <md-icon>create_new_folder</md-icon>
+                    <mat-icon>create_new_folder</mat-icon>
                     <span>New folder</span>
                 </button>
-                <button md-menu-item
+                <button mat-menu-item
-                    [disabled]="!hasSelection(documentList.selection)"
+                        [disabled]="!hasSelection(documentList.selection)"
-                    title="Download"
+                        title="Download"
-                    (click)="downloadNodes(documentList.selection)">
+                        (click)="downloadNodes(documentList.selection)">
-                    <md-icon>get_app</md-icon>
+                    <mat-icon>get_app</mat-icon>
                     <span>Download</span>
                 </button>
-                <button md-menu-item
+                <button mat-menu-item
                         adf-node-permission="delete"
                         [adf-nodes]="documentList.selection">
-                    <md-icon>delete</md-icon>
+                    <mat-icon>delete</mat-icon>
                     <span>Delete</span>
                 </button>
-            </md-menu>
+            </mat-menu>
         </adf-toolbar>
         <adf-document-list
-                #documentList
+            #documentList
-                [permissionsStyle]="permissionsStyle"
+            [permissionsStyle]="permissionsStyle"
-                [currentFolderId]="currentFolderId"
+            [currentFolderId]="currentFolderId"
-                [contextMenuActions]="true"
+            [contextMenuActions]="true"
-                [contentActions]="true"
+            [contentActions]="true"
-                [allowDropFiles]="true"
+            [allowDropFiles]="true"
-                [selectionMode]="selectionMode"
+            [selectionMode]="selectionMode"
-                [multiselect]="multiselect"
+            [multiselect]="multiselect"
-                (error)="onNavigationError($event)"
+            (error)="onNavigationError($event)"
-                (success)="resetError()"
+            (success)="resetError()"
-                (preview)="showFile($event)"
+            (preview)="showFile($event)"
-                (folderChange)="onFolderChange($event)"
+            (folderChange)="onFolderChange($event)"
-                (permissionError)="handlePermissionError($event)">
+            (permissionError)="handlePermissionError($event)">
             <data-columns>
                 <data-column
                     key="$thumbnail"
@@ -244,30 +244,41 @@
 
     <div class="container">
         <section>
-            <md-slide-toggle [color]="'primary'" [(ngModel)]="multiselect">{{'DOCUMENT_LIST.MULTISELECT_CHECKBOXES' | translate}}</md-slide-toggle>
+            <mat-slide-toggle [color]="'primary'" [(ngModel)]="multiselect">{{'DOCUMENT_LIST.MULTISELECT_CHECKBOXES' |
+                translate}}
+            </mat-slide-toggle>
         </section>
 
         <section>
-            <md-slide-toggle [color]="'primary'" [(ngModel)]="multipleFileUpload">{{'DOCUMENT_LIST.MULTIPLE_FILE_UPLOAD' | translate}}</md-slide-toggle>
+            <mat-slide-toggle [color]="'primary'" [(ngModel)]="multipleFileUpload">
+                {{'DOCUMENT_LIST.MULTIPLE_FILE_UPLOAD' | translate}}
+            </mat-slide-toggle>
         </section>
 
         <section>
-            <md-slide-toggle [color]="'primary'" [(ngModel)]="folderUpload">{{'DOCUMENT_LIST.FOLDER_UPLOAD' | translate}}</md-slide-toggle>
+            <mat-slide-toggle [color]="'primary'" [(ngModel)]="folderUpload">{{'DOCUMENT_LIST.FOLDER_UPLOAD' |
+                translate}}
+            </mat-slide-toggle>
         </section>
 
         <section>
-            <md-slide-toggle [color]="'primary'" [(ngModel)]="acceptedFilesTypeShow">{{'DOCUMENT_LIST.CUSTOM_FILTER' | translate}}</md-slide-toggle>
+            <mat-slide-toggle [color]="'primary'" [(ngModel)]="acceptedFilesTypeShow">{{'DOCUMENT_LIST.CUSTOM_FILTER' |
+                translate}}
+            </mat-slide-toggle>
         </section>
 
         <section>
-            <md-slide-toggle [color]="'primary'" [(ngModel)]="versioning">{{'DOCUMENT_LIST.ENABLE_VERSIONING' | translate}}</md-slide-toggle>
+            <mat-slide-toggle [color]="'primary'" [(ngModel)]="versioning">{{'DOCUMENT_LIST.ENABLE_VERSIONING' |
+                translate}}
+            </mat-slide-toggle>
         </section>
 
         <h5>Upload</h5>
         <section *ngIf="acceptedFilesTypeShow">
-            <md-input-container>
+            <mat-form-field>
-                <input mdInput placeholder="Extension accepted" [(ngModel)]="acceptedFilesType"  data-automation-id="accepted-files-type">
+                <input matInput placeholder="Extension accepted" [(ngModel)]="acceptedFilesType"
-            </md-input-container>
+                       data-automation-id="accepted-files-type">
+            </mat-form-field>
         </section>
         <div *ngIf="!acceptedFilesTypeShow">
             <adf-upload-button
@@ -301,9 +312,9 @@
             </adf-upload-button>
         </div>
         <section>
-            <md-checkbox [(ngModel)]="enableUpload">
+            <mat-checkbox [(ngModel)]="enableUpload">
                 {{'DOCUMENT_LIST.DESCRIPTION_UPLOAD' | translate}}
-            </md-checkbox>
+            </mat-checkbox>
         </section>
     </div>
 
@@ -311,11 +322,13 @@
         <p>
             {{'DOCUMENT_LIST.MULTISELECT_DESCRIPTION' | translate}}
         </p>
-        <md-select placeholder="Selection Mode" [(ngModel)]="selectionMode" name="food">
+        <mat-form-field>
-            <md-option *ngFor="let mode of selectionModes" [value]="mode.value">
+            <mat-select placeholder="Selection Mode" [(ngModel)]="selectionMode" name="food">
-                {{mode.viewValue}}
+                <mat-option *ngFor="let mode of selectionModes" [value]="mode.value">
-            </md-option>
+                    {{mode.viewValue}}
-        </md-select>
+                </mat-option>
+            </mat-select>
+        </mat-form-field>
     </div>
 </div>
 

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

@@ -16,7 +16,7 @@
  */
 
 import { ChangeDetectorRef, Component, Input, OnInit, Optional, ViewChild } from '@angular/core';
-import { MdDialog } from '@angular/material';
+import { MatDialog } from '@angular/material';
 import { ActivatedRoute, Params, Router } from '@angular/router';
 import { MinimalNodeEntity } from 'alfresco-js-api';
 import {
@@ -84,7 +84,7 @@ export class FilesComponent implements OnInit {
                 private notificationService: NotificationService,
                 private uploadService: UploadService,
                 private contentService: AlfrescoContentService,
-                private dialog: MdDialog,
+                private dialog: MatDialog,
                 private translateService: AlfrescoTranslationService,
                 private router: Router,
                 @Optional() private route: ActivatedRoute,

demo-shell-ng2/app/components/form/form-list-demo.component.html

@@ -4,5 +4,5 @@
     <adf-form [form]="form" [data]="restoredData">
     </adf-form>
 </div>
-<button md-button (click)="store()" color="primary">{{'FORM-LIST.STORE' | translate }}</button>
+<button mat-button (click)="store()" color="primary">{{'FORM-LIST.STORE' | translate }}</button>
-<button md-button (click)="restore()" color="primary">{{'FORM-LIST.RESTORE' | translate }}</button>
+<button mat-button (click)="restore()" color="primary">{{'FORM-LIST.RESTORE' | translate }}</button>

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

@@ -1,187 +1,187 @@
 <!-- DOCUMENT LIST-->
-<md-card class="adf-home-card">
+<mat-card class="adf-home-card">
-        <md-card-title class="adf-home-card-title adf-primary-background-color"  routerLink="/files">
+        <mat-card-title class="adf-home-card-title adf-primary-background-color"  routerLink="/files">
             <h2 >
-                <md-icon>dvr</md-icon>
+                <mat-icon>dvr</mat-icon>
                 <span class="adf-home-card__text">DocumentList - Content Services</span>
             </h2>
-        </md-card-title>
+        </mat-card-title>
-    <md-card-content>
+    <mat-card-content>
         Demonstrates multiple Alfresco Content Services components used together to display the files of your Content Services instance:
         <ul class="adf-home-feature-list">
             <li>
-                <md-icon>brightness_1</md-icon>
+                <mat-icon>brightness_1</mat-icon>
                 <span class="adf-home-feature-list__text">Communication with the Rest Api and core services</span>
                 <a href="https://www.npmjs.com/package/ng2-alfresco-core" target="_blank">ng2-alfresco-core</a>
             </li>
             <li>
-                <md-icon>dvr</md-icon>
+                <mat-icon>dvr</mat-icon>
                 <span class="adf-home-feature-list__text">Document List</span>
                 <a href="https://www.npmjs.com/package/ng2-alfresco-documentlist" target="_blank">ng2-alfresco-documentlist</a>
             </li>
             <li>
-                <md-icon>file_upload</md-icon>
+                <mat-icon>file_upload</mat-icon>
                 <span class="adf-home-feature-list__text">Upload</span>
                 <a href="https://www.npmjs.com/package/ng2-alfresco-upload" target="_blank">ng2-alfresco-upload</a>
             </li>
             <li>
-                <md-icon>view_module</md-icon>
+                <mat-icon>view_module</mat-icon>
                 <span class="adf-home-feature-list__text">DataTable</span>
                 <a href="https://www.npmjs.com/package/ng2-alfresco-datatable" target="_blank">ng2-alfresco-datatable</a>
             </li>
         </ul>
-    </md-card-content>
+    </mat-card-content>
-</md-card>
+</mat-card>
 
 
 <!-- Process Services-->
-<md-card class="adf-home-card">
+<mat-card class="adf-home-card">
-        <md-card-title class="adf-home-card-title adf-primary-background-color"  routerLink="/activiti">
+        <mat-card-title class="adf-home-card-title adf-primary-background-color"  routerLink="/activiti">
             <h2 >
-                <md-icon>apps</md-icon>
+                <mat-icon>apps</mat-icon>
                 <span class="adf-home-card__text">Process Services</span>
             </h2>
-        </md-card-title>
+        </mat-card-title>
-    <md-card-content>
+    <mat-card-content>
         Demonstrates multiple Alfresco Process Services components used together to show your Process Services process and tasks:
         <ul class="adf-home-feature-list">
             <li>
-                <md-icon>brightness_1</md-icon>
+                <mat-icon>brightness_1</mat-icon>
                 <span class="adf-home-feature-list__text">Communication with the Rest Api and core services</span>
                 <a href="https://www.npmjs.com/package/ng2-alfresco-core" target="_blank">ng2-alfresco-core</a>
             </li>
             <li>
-                <md-icon>view_module</md-icon>
+                <mat-icon>view_module</mat-icon>
                 <span class="adf-home-feature-list__text">App List</span>
                 <a href="https://www.npmjs.com/package/ng2-activiti-tasklist" target="_blank">ng2-activiti-apps</a>
             </li>
             <li>
-                <md-icon>view_headline</md-icon>
+                <mat-icon>view_headline</mat-icon>
                 <span class="adf-home-feature-list__text">Task List</span>
                 <a href="https://www.npmjs.com/package/ng2-activiti-tasklist" target="_blank">ng2-activiti-tasklist</a>
             </li>
             <li>
-                <md-icon>view_headline</md-icon>
+                <mat-icon>view_headline</mat-icon>
                 <span class="adf-home-feature-list__text">Process List</span>
                 <a href="https://www.npmjs.com/package/ng2-activiti-processlist" target="_blank">ng2-activiti-processlist</a>
             </li>
             <li>
-                <md-icon>view_quilt</md-icon>
+                <mat-icon>view_quilt</mat-icon>
                 <span class="adf-home-feature-list__text">Form</span>
                 <a href="https://www.npmjs.com/package/ng2-activiti-form" target="_blank">ng2-activiti-form</a>
             </li>
             <li>
-                <md-icon>pie_chart</md-icon>
+                <mat-icon>pie_chart</mat-icon>
                 <span class="adf-home-feature-list__text">Analytics</span>
                 <a href="https://www.npmjs.com/package/ng2-activiti-analytics" target="_blank">ng2-activiti-analytics</a>,
                 <a href="https://www.npmjs.com/package/ng2-activiti-diagrams" target="_blank">ng2-activiti-diagrams</a>
             </li>
             <li>
-                <md-icon>view_module</md-icon>
+                <mat-icon>view_module</mat-icon>
                 <span class="adf-home-feature-list__text">DataTable</span>
                 <a href="https://www.npmjs.com/package/ng2-alfresco-datatable" target="_blank">ng2-alfresco-datatable</a>
             </li>
         </ul>
-    </md-card-content>
+    </mat-card-content>
-</md-card>
+</mat-card>
 
 
 <!-- DATATABLE-->
-<md-card class="adf-home-card">
+<mat-card class="adf-home-card">
-        <md-card-title class="adf-home-card-title adf-primary-background-color"  routerLink="/datatable">
+        <mat-card-title class="adf-home-card-title adf-primary-background-color"  routerLink="/datatable">
             <h2 >
-                <md-icon>view_module</md-icon>
+                <mat-icon>view_module</mat-icon>
                 <span class="adf-home-card__text">DataTable - Content Services & Process Services</span>
             </h2>
-        </md-card-title>
+        </mat-card-title>
-    <md-card-content>
+    <mat-card-content>
         Basic table component:
         <ul class="adf-home-feature-list">
             <li>
-                <md-icon>brightness_1</md-icon>
+                <mat-icon>brightness_1</mat-icon>
                 <span class="adf-home-feature-list__text">Communication with the Rest Api and core services</span>
                 <a href="https://www.npmjs.com/package/ng2-alfresco-core" target="_blank">ng2-alfresco-core</a>
             </li>
         </ul>
-    </md-card-content>
+    </mat-card-content>
-</md-card>
+</mat-card>
 
 <!-- UPLOADER-->
-<md-card class="adf-home-card">
+<mat-card class="adf-home-card">
-        <md-card-title class="adf-home-card-title adf-primary-background-color"  routerLink="/uploader">
+        <mat-card-title class="adf-home-card-title adf-primary-background-color"  routerLink="/uploader">
             <h2 >
-                <md-icon>file_upload</md-icon>
+                <mat-icon>file_upload</mat-icon>
                 <span class="adf-home-card__text">Uploader - Content Services</span>
             </h2>
-        </md-card-title>
+        </mat-card-title>
-    <md-card-content>
+    <mat-card-content>
         Basic table uploader component for the Content Services & Process Services:
         <ul class="adf-home-feature-list">
             <li>
-                <md-icon>brightness_1</md-icon>
+                <mat-icon>brightness_1</mat-icon>
                 <span class="adf-home-feature-list__text">Communication with the Rest Api and core services</span>
                 <a href="https://www.npmjs.com/package/ng2-alfresco-core" target="_blank">ng2-alfresco-core</a>
             </li>
         </ul>
-    </md-card-content>
+    </mat-card-content>
-</md-card>
+</mat-card>
 
 <!-- LOGIN-->
-<md-card class="adf-home-card">
+<mat-card class="adf-home-card">
-        <md-card-title class="adf-home-card-title adf-primary-background-color"  routerLink="/login">
+        <mat-card-title class="adf-home-card-title adf-primary-background-color"  routerLink="/login">
             <h2 >
-                <md-icon>account_circle</md-icon>
+                <mat-icon>account_circle</mat-icon>
                 <span class="adf-home-card__text">Login - Content Services & Process Services</span>
             </h2>
-        </md-card-title>
+        </mat-card-title>
-    <md-card-content>
+    <mat-card-content>
         Login component for the Content Services and Process Services:
         <ul class="adf-home-feature-list">
             <li>
-                <md-icon>brightness_1</md-icon>
+                <mat-icon>brightness_1</mat-icon>
                 <span class="adf-home-feature-list__text">Communication with the Rest Api and core services</span>
                 <a href="https://www.npmjs.com/package/ng2-alfresco-core" target="_blank">ng2-alfresco-core</a>
             </li>
         </ul>
-    </md-card-content>
+    </mat-card-content>
-</md-card>
+</mat-card>
 
 <!-- WEBSCRIPT-->
-<md-card class="adf-home-card">
+<mat-card class="adf-home-card">
-    <md-card-title class="adf-home-card-title adf-primary-background-color"  routerLink="/webscript">
+    <mat-card-title class="adf-home-card-title adf-primary-background-color"  routerLink="/webscript">
         <h2 >
-            <md-icon>extension</md-icon>
+            <mat-icon>extension</mat-icon>
             <span class="adf-home-card__text">Webscript - Content Services</span>
         </h2>
-    </md-card-title>
+    </mat-card-title>
-    <md-card-content>
+    <mat-card-content>
         Displays and creates webscripts in your Content Services instance:
         <ul class="adf-home-feature-list">
             <li>
-                <md-icon>brightness_1</md-icon>
+                <mat-icon>brightness_1</mat-icon>
                 <span class="adf-home-feature-list__text">Communication with the Rest Api and core services</span>
                 <a href="https://www.npmjs.com/package/ng2-alfresco-core" target="_blank">ng2-alfresco-core</a>
             </li>
         </ul>
-    </md-card-content>
+    </mat-card-content>
-</md-card>
+</mat-card>
 
 <!-- TAG-->
-<md-card class="adf-home-card">
+<mat-card class="adf-home-card">
-        <md-card-title class="adf-home-card-title adf-primary-background-color"  routerLink="/tag">
+        <mat-card-title class="adf-home-card-title adf-primary-background-color"  routerLink="/tag">
             <h2 >
-                <md-icon>local_offer</md-icon>
+                <mat-icon>local_offer</mat-icon>
                 <span class="adf-home-card__text">Tag - Content Services</span>
             </h2>
-        </md-card-title>
+        </mat-card-title>
-    <md-card-content>
+    <mat-card-content>
         Displays and adds tags to the node of your Content Services instance:
         <ul class="adf-home-feature-list">
             <li>
-                <md-icon>brightness_1</md-icon>
+                <mat-icon>brightness_1</mat-icon>
                 <span class="adf-home-feature-list__text">Communication with Rest</span>
                 <a href="https://www.npmjs.com/package/ng2-alfresco-core" target="_blank">ng2-alfresco-core</a>
             </li>
         </ul>
-    </md-card-content>
+    </mat-card-content>
-</md-card>
+</mat-card>

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

@@ -2,47 +2,47 @@
 
 <div class="settings">
     <p class="toggle">
-        <md-slide-toggle
+        <mat-slide-toggle
             id="switch1"
             [color]="'primary'"
             (change)="toggleECM()"
             [checked]="isECM">
             {{ 'LOGIN.CONTENT_SERVICES'| translate }}
-        </md-slide-toggle>
+        </mat-slide-toggle>
     </p>
     <p class="toggle">
-        <md-slide-toggle
+        <mat-slide-toggle
             id="switch2"
             [color]="'primary'"
             (change)="toggleBPM()"
             [checked]="isBPM">
             {{ 'LOGIN.PROCESS_SERVICES'| translate }}
-        </md-slide-toggle>
+        </mat-slide-toggle>
     </p>
     <p class="toggle">
-        <md-slide-toggle
+        <mat-slide-toggle
             id="switch3"
             [color]="'primary'"
             (change)="toggleCSRF()"
             [checked]="!disableCsrf">
             CSRF
-        </md-slide-toggle>
+        </mat-slide-toggle>
     </p>
     <p class="toggle">
-        <md-slide-toggle
+        <mat-slide-toggle
             id="switch4"
             [color]="'primary'"
             (change)="toggleFooter()"
             [checked]="showFooter">
             {{ 'LOGIN.LOGIN_FOOTER'| translate }}
-        </md-slide-toggle>
+        </mat-slide-toggle>
     </p>
 </div>
 
 <!--SETTING BUTTON-->
 
-<a md-fab class="setting-button" data-automation-id="settings" href="" routerLink="/settings" >
+<a mat-fab class="setting-button" data-automation-id="settings" href="" routerLink="/settings" >
-    <md-icon>settings</md-icon>
+    <mat-icon>settings</mat-icon>
 </a>
 
 <alfresco-login
@@ -57,40 +57,40 @@
     (onError)="onError($event)">
     <div class="mobile-settings">
         <p>
-            <md-slide-toggle
+            <mat-slide-toggle
                 id="switch1-mobile"
                 [color]="'primary'"
                 (change)="toggleECM()"
                 [checked]="isECM">
                 {{ 'LOGIN.CONTENT_SERVICES'| translate }}
-            </md-slide-toggle>
+            </mat-slide-toggle>
         </p>
         <p>
-            <md-slide-toggle
+            <mat-slide-toggle
                 id="switch2-mobile"
                 [color]="'primary'"
                 (change)="toggleBPM()"
                 [checked]="isBPM">
                 {{ 'LOGIN.PROCESS_SERVICES'| translate }}
-            </md-slide-toggle>
+            </mat-slide-toggle>
         </p>
         <p>
-            <md-slide-toggle
+            <mat-slide-toggle
                 id="switch3-mobile"
                 [color]="'primary'"
                 (change)="toggleCSRF()"
                 [checked]="!disableCsrf">
                 CSRF
-            </md-slide-toggle>
+            </mat-slide-toggle>
         </p>
         <p>
-            <md-slide-toggle
+            <mat-slide-toggle
                 id="switch4-mobile"
                 [color]="'primary'"
                 (change)="toggleFooter()"
                 [checked]="showFooter">
                 {{ 'LOGIN.LOGIN_FOOTER'| translate }}
-            </md-slide-toggle>
+            </mat-slide-toggle>
         </p>
     </div>
 </alfresco-login>

demo-shell-ng2/app/components/search/search-bar.component.html

@@ -10,5 +10,5 @@
 <adf-viewer *ngIf="fileShowed" [(showViewer)]="fileShowed"
                  [fileNodeId]="fileNodeId"
                  [overlayMode]="true">
-    <md-spinner></md-spinner>
+    <mat-spinner></mat-spinner>
 </adf-viewer>

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

@@ -9,6 +9,6 @@
     <adf-viewer [(showViewer)]="fileShowed"
                      [fileNodeId]="fileNodeId"
                      [overlayMode]="true">
-        <md-spinner></md-spinner>
+        <mat-spinner></mat-spinner>
     </adf-viewer>
 </div>

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

@@ -1,17 +1,17 @@
 <div class="adf-setting-container">
     <div class="adf-setting-card-padding"></div>
-    <md-toolbar color="primary" >
+    <mat-toolbar color="primary" >
         <h3>{{'SETTINGS.TITLE' | translate}}</h3>
-    </md-toolbar>
+    </mat-toolbar>
 
-    <md-card class="adf-setting-card">
+    <mat-card class="adf-setting-card">
-        <md-card-content>
+        <mat-card-content>
 
-            <md-card-subtitle>{{'SETTINGS.CS-HOST' | translate }}</md-card-subtitle>
+            <mat-card-subtitle>{{'SETTINGS.CS-HOST' | translate }}</mat-card-subtitle>
 
-            <md-input-container class="full-width">
+            <mat-form-field class="full-width">
-                <md-icon class="adf-settings-link-icon" mdPrefix>link</md-icon>
+                <mat-icon class="adf-settings-link-icon" matPrefix>link</mat-icon>
-                <input mdInput
+                <input matInput
                        [formControl]="urlFormControlEcm"
                        data-automation-id="ecmHost"
                        type="text"
@@ -20,17 +20,17 @@
                        id="ecmHost"
                        value="{{ecmHost}}"
                        placeholder="http(s)://host|ip:port(/path)">
-                <md-error *ngIf="urlFormControlEcm.hasError('pattern')">
+                <mat-error *ngIf="urlFormControlEcm.hasError('pattern')">
                     {{ 'SETTINGS.NOT_VALID'| translate }}
-                </md-error>
+                </mat-error>
-            </md-input-container>
+            </mat-form-field>
             <p>
             <p>
-            <md-card-subtitle>{{'SETTINGS.BP-HOST' | translate }}</md-card-subtitle>
+            <mat-card-subtitle>{{'SETTINGS.BP-HOST' | translate }}</mat-card-subtitle>
 
-            <md-input-container class="full-width">
+            <mat-form-field class="full-width">
-                <md-icon class="adf-settings-link-icon" mdPrefix>link</md-icon>
+                <mat-icon class="adf-settings-link-icon" matPrefix>link</mat-icon>
-                <input mdInput
+                <input matInput
                        [formControl]="urlFormControlBpm"
                        data-automation-id="bpmHost"
                        type="text"
@@ -39,23 +39,23 @@
                        id="bpmHost"
                        value="{{bpmHost}}"
                        placeholder="http(s)://host|ip:port(/path)">
-                <md-error *ngIf="urlFormControlBpm.hasError('pattern')">
+                <mat-error *ngIf="urlFormControlBpm.hasError('pattern')">
                     {{ 'SETTINGS.NOT_VALID'| translate }}
-                </md-error>
+                </mat-error>
-            </md-input-container>
+            </mat-form-field>
 
-        </md-card-content>
+        </mat-card-content>
-        <md-card-actions class="adf-settings-actions">
+        <mat-card-actions class="adf-settings-actions">
 
-            <button md-button onclick="window.history.back()" color="primary">
+            <button mat-button onclick="window.history.back()" color="primary">
                 {{'SETTINGS.BACK' | translate }}
             </button>
 
-            <button md-raised-button (click)="save($event)" [disabled]="urlFormControlBpm.hasError('pattern') || urlFormControlEcm.hasError('pattern')" color="primary">
+            <button mat-raised-button (click)="save($event)" [disabled]="urlFormControlBpm.hasError('pattern') || urlFormControlEcm.hasError('pattern')" color="primary">
                 {{'SETTINGS.APPLY' | translate }}
             </button>
 
-        </md-card-actions>
+        </mat-card-actions>
-    </md-card>
+    </mat-card>
     <div class="adf-setting-card-padding"></div>
 </div>

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

@@ -3,19 +3,19 @@
 
 <div fxLayout="row" fxLayout.lt-lg="column" fxLayoutAlign="stretch">
     <div class="adf-social-example-area" fxFlex.gt-md="1 1 auto">
-        <md-card>
+        <mat-card>
             <div class="adf-social-title">
                 {{'SOCIAL.LIKE' | translate }}
             </div>
             <adf-like [nodeId]="nodeId"></adf-like>
-        </md-card>
+        </mat-card>
     </div>
     <div class="adf-social-example-area" fxFlex.gt-md="1 1 auto">
-        <md-card>
+        <mat-card>
             <div class="adf-social-title">
                 {{'SOCIAL.RATING' | translate }}
             </div>
             <adf-rating [nodeId]="nodeId"></adf-rating>
-        </md-card>
+        </mat-card>
     </div>
 </div>

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

@@ -2,24 +2,24 @@
 <input id="nodeId" type="text" size="48" [(ngModel)]="nodeId"><br>
 <div fxLayout="row" fxLayout.lt-lg="column" fxLayoutAlign="stretch">
     <div class="adf-tag-example-area" fxFlex.gt-md="1 1 auto">
-        <md-card>
+        <mat-card>
             <adf-tag-node-actions-list [nodeId]="nodeId"></adf-tag-node-actions-list>
-        </md-card>
+        </mat-card>
     </div>
     <div class="adf-tag-example-area" fxFlex.gt-md="1 1 auto">
-        <md-card>
+        <mat-card>
             <div class="adf-tag-example-title">
                 {{'TAG.LIST' | translate }}
             </div>
             <adf-tag-list></adf-tag-list>
-        </md-card>
+        </mat-card>
     </div>
     <div class="adf-tag-example-area" fxFlex.gt-md="1 1 auto">
-        <md-card>
+        <mat-card>
             <div class="adf-tag-example-title">
                 {{'TAG.NODE_LIST' | translate }}
             </div>
             <adf-tag-node-list [nodeId]="nodeId"></adf-tag-node-list>
-        </md-card>
+        </mat-card>
     </div>
 </div>

demo-shell-ng2/app/components/theme-picker/theme-picker.css

@@ -1,8 +1,8 @@
-.docs-theme-picker-menu .md-menu-content {
+.docs-theme-picker-menu .mat-menu-content {
     padding: 8px;
 }
 
-.docs-theme-picker-menu [md-menu-item] {
+.docs-theme-picker-menu [mat-menu-item] {
     flex: 0 0 auto;
     padding: 0;
     overflow: hidden;

demo-shell-ng2/app/components/theme-picker/theme-picker.html

@@ -1,17 +1,17 @@
-<button md-icon-button [md-menu-trigger-for]="themeMenu" mdTooltip="Select a theme!">
+<button mat-icon-button [mat-menu-trigger-for]="themeMenu" matTooltip="Select a theme!">
-    <md-icon>format_color_fill</md-icon>
+    <mat-icon>format_color_fill</mat-icon>
 </button>
 
-<md-menu class="docs-theme-picker-menu" #themeMenu="mdMenu" x-position="before">
+<mat-menu class="docs-theme-picker-menu" #themeMenu="matMenu" x-position="before">
-    <md-list-item *ngFor="let theme of themes"  md-menu-item (click)="installTheme(theme)" >
+    <mat-list-item *ngFor="let theme of themes"  mat-menu-item (click)="installTheme(theme)" >
-        <md-icon md-list-icon [mdTooltip]="theme.name" class="docs-theme-chosen-icon" [style.color]="theme.accent"
+        <mat-icon mat-list-icon [matTooltip]="theme.name" class="docs-theme-chosen-icon" [style.color]="theme.accent"
                  [style.background]="theme.primary"
                  *ngIf="currentTheme === theme">check_circle
-        </md-icon>
+        </mat-icon>
-        <md-icon md-list-icon [mdTooltip]="theme.name" class="docs-theme-chosen-icon" [style.color]="theme.accent"
+        <mat-icon mat-list-icon [matTooltip]="theme.name" class="docs-theme-chosen-icon" [style.color]="theme.accent"
                  [style.background]="theme.primary"
                  *ngIf="currentTheme !== theme">invert_colors
-        </md-icon>
+        </mat-icon>
         {{theme.name}}
-    </md-list-item>
+    </mat-list-item>
-</md-menu>
+</mat-menu>

demo-shell-ng2/app/components/theme-picker/theme-picker.ts

@@ -1,8 +1,8 @@
 import { CommonModule } from '@angular/common';
 import { ChangeDetectionStrategy, Component, NgModule } from '@angular/core';
 import {
-    MdButtonModule, MdGridListModule, MdIconModule, MdMenuModule,
+    MatButtonModule, MatGridListModule, MatIconModule, MatMenuModule,
-    MdTooltipModule
+    MatTooltipModule
 } from '@angular/material';
 import { StyleManager } from './style-manager/style-manager';
 import { DocsSiteTheme, ThemeStorage } from './theme-storage/theme-storage';
@@ -116,11 +116,11 @@ export class ThemePickerComponent {
 
 @NgModule({
     imports: [
-        MdButtonModule,
+        MatButtonModule,
-        MdIconModule,
+        MatIconModule,
-        MdMenuModule,
+        MatMenuModule,
-        MdGridListModule,
+        MatGridListModule,
-        MdTooltipModule,
+        MatTooltipModule,
         CommonModule
     ],
     exports: [ThemePickerComponent],

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

@@ -17,21 +17,21 @@
 
 import { NgModule } from '@angular/core';
 import {
-    MdDialogModule,
+    MatDialogModule,
-    MdInputModule,
+    MatInputModule,
-    MdProgressBarModule,
+    MatProgressBarModule,
-    MdSelectModule,
+    MatSelectModule,
-    MdSidenavModule,
+    MatSidenavModule,
-    MdSlideToggleModule
+    MatSlideToggleModule
 } from '@angular/material';
 
 const MATERIAL_MODULES = [
-    MdSlideToggleModule,
+    MatSlideToggleModule,
-    MdInputModule,
+    MatInputModule,
-    MdSelectModule,
+    MatSelectModule,
-    MdDialogModule,
+    MatDialogModule,
-    MdSidenavModule,
+    MatSidenavModule,
-    MdProgressBarModule
+    MatProgressBarModule
 ];
 
 @NgModule({

demo-shell-ng2/package.json

@@ -56,19 +56,19 @@
     "alfresco"
   ],
   "dependencies": {
-    "@angular/animations": "4.3.6",
+    "@angular/animations": "4.4.5",
-    "@angular/cdk": "2.0.0-beta.10",
+    "@angular/cdk": "2.0.0-beta.12",
-    "@angular/common": "4.3.6",
+    "@angular/common": "4.4.5",
-    "@angular/compiler": "4.3.6",
+    "@angular/compiler": "4.4.5",
-    "@angular/compiler-cli": "4.3.6",
+    "@angular/compiler-cli": "4.4.5",
-    "@angular/core": "4.3.6",
+    "@angular/core": "4.4.5",
     "@angular/flex-layout": "2.0.0-beta.9",
-    "@angular/forms": "4.3.6",
+    "@angular/forms": "4.4.5",
-    "@angular/http": "4.3.6",
+    "@angular/http": "4.4.5",
-    "@angular/material": "2.0.0-beta.10",
+    "@angular/material": "2.0.0-beta.12",
-    "@angular/platform-browser": "4.3.6",
+    "@angular/platform-browser": "4.4.5",
-    "@angular/platform-browser-dynamic": "4.3.6",
+    "@angular/platform-browser-dynamic": "4.4.5",
-    "@angular/router": "4.3.6",
+    "@angular/router": "4.4.5",
     "@ngx-translate/core": "7.0.0",
     "alfresco-js-api": "1.9.0",
     "chart.js": "2.5.0",
@@ -106,7 +106,7 @@
     "zone.js": "0.8.12"
   },
   "devDependencies": {
-    "@types/hammerjs": "2.0.34",
+    "@types/hammerjs": "2.0.35",
     "@types/jasmine": "2.5.35",
     "@types/node": "6.0.45",
     "adf-tslint-rules": "0.0.3",

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

@@ -32,17 +32,17 @@
     "url": "https://github.com/Alfresco/alfresco-ng2-components/issues"
   },
   "dependencies": {
-    "@angular/animations": "4.3.6",
+    "@angular/animations": "4.4.5",
-    "@angular/cdk": "2.0.0-beta.10",
+    "@angular/cdk": "2.0.0-beta.12",
-    "@angular/common": "4.3.6",
+    "@angular/common": "4.4.5",
-    "@angular/compiler": "4.3.6",
+    "@angular/compiler": "4.4.5",
-    "@angular/core": "4.3.6",
+    "@angular/core": "4.4.5",
-    "@angular/forms": "4.3.6",
+    "@angular/forms": "4.4.5",
-    "@angular/http": "4.3.6",
+    "@angular/http": "4.4.5",
-    "@angular/material": "2.0.0-beta.10",
+    "@angular/material": "2.0.0-beta.12",
-    "@angular/platform-browser": "4.3.6",
+    "@angular/platform-browser": "4.4.5",
-    "@angular/platform-browser-dynamic": "4.3.6",
+    "@angular/platform-browser-dynamic": "4.4.5",
-    "@angular/router": "4.3.6",
+    "@angular/router": "4.4.5",
     "@ngx-translate/core": "7.0.0",
     "alfresco-js-api": "1.9.0",
     "chart.js": "2.5.0",
@@ -59,7 +59,7 @@
     "zone.js": "0.8.12"
   },
   "devDependencies": {
-    "@types/hammerjs": "2.0.34",
+    "@types/hammerjs": "2.0.35",
     "@types/jasmine": "2.5.35",
     "@types/node": "6.0.45",
     "adf-tslint-rules": "0.0.3",

ng2-components/ng2-activiti-analytics/src/components/analytics-generator.component.html

@@ -1,11 +1,11 @@
 <div *ngIf="reports">
     <div class="report-icons">
-        <button md-icon-button
+        <button mat-icon-button
                 *ngFor="let report of reports; let idx = index"
-                [mdTooltip]="report.title"
+                [matTooltip]="report.title"
                 [color]="isCurrent(idx) ? 'primary' : null"
                 (click)="selectCurrent(idx)">
-            <md-icon>{{report.icon}}</md-icon>
+            <mat-icon>{{report.icon}}</mat-icon>
         </button>
     </div>
     <div class="clear-both"> </div>
@@ -84,12 +84,12 @@
                     <h4>{{report.title}}</h4>
                     <div *ngIf="!report.hasDatasets()">{{'ANALYTICS.MESSAGES.NO-DATA-FOUND' | translate}}</div>
                     <div *ngIf="report.hasDatasets()">
-                        <md-checkbox
+                        <mat-checkbox
                             color="primary"
                             [id]="'stacked-id'"
                             [checked]="report.options.scales.xAxes[0].stacked"
                             [(ngModel)]="report.options.scales.xAxes[0].stacked"
-                            (change)="refresh(report)">Stacked</md-checkbox>
+                            (change)="refresh(report)">Stacked</mat-checkbox>
 
                         <canvas baseChart class="chart"
                                 [datasets]="report.datasets"

ng2-components/ng2-activiti-analytics/src/components/analytics-report-list.component.html

@@ -1,32 +1,32 @@
 <div class="adf-analytics-report-list menu-container">
-    <md-nav-list *ngIf="isList()">
+    <mat-nav-list *ngIf="isList()">
-        <md-list-item
+        <mat-list-item
             class="activiti-filters__entry"
             (click)="selectReport(report)"
             *ngFor="let report of reports; let idx = index"
             [class.active]="currentReport === report">
             <span [attr.id]="'report-list-' + idx" class="activiti-filters__label">
-                <md-icon md-list-icon
+                <mat-icon mat-list-icon
                     [attr.data-automation-id]="report.name + '_filter'"
-                    class="activiti-filters__entry-icon">assignment</md-icon>
+                    class="activiti-filters__entry-icon">assignment</mat-icon>
                 <span class="text">{{report.name}}</span>
             </span>
-        </md-list-item>
+        </mat-list-item>
-    </md-nav-list>
+    </mat-nav-list>
     <div class="adf-report-card-grids" *ngIf="isGrid()">
-        <md-card (click)="selectReport(report)" class="adf-report-card" *ngFor="let report of reports;">
+        <mat-card (click)="selectReport(report)" class="adf-report-card" *ngFor="let report of reports;">
             <div class="adf-report-card-logo logo">
-                <md-icon class="adf-report-card-logo-icon">equalizer</md-icon>
+                <mat-icon class="adf-report-card-logo-icon">equalizer</mat-icon>
             </div>
-            <div md-card-title class="adf-report-card-title">
+            <div mat-card-title class="adf-report-card-title">
                 <h1 class="application-title">{{report.name}}</h1>
             </div>
-            <div md-card-content class="adf-report-card-content">
+            <div mat-card-content class="adf-report-card-content">
                 <p>{{report.description}}</p>
             </div>
-            <div md-card-actions class="adf-report-card-actions">
+            <div mat-card-actions class="adf-report-card-actions">
-                <md-icon class="adf-report-card-actions-icon" *ngIf="isSelected(report)">done</md-icon>
+                <mat-icon class="adf-report-card-actions-icon" *ngIf="isSelected(report)">done</mat-icon>
             </div>
-        </md-card>
+        </mat-card>
     </div>
 </div>

ng2-components/ng2-activiti-analytics/src/components/analytics-report-parameters.component.html

@@ -5,9 +5,9 @@
                 <adf-toolbar>
                     <adf-toolbar-title class="adf-report-title-container">
                         <div *ngIf="isEditable">
-                            <md-input-container class="adf-full-width-input">
+                            <mat-form-field class="adf-full-width-input">
                                 <input
-                                    mdInput
+                                    matInput
                                     type="text"
                                     class="adf-edit-report-title"
                                     id="reportName"
@@ -18,30 +18,30 @@
                                     (blur)="editTitle($event)"
                                     (keyup.enter)="editTitle($event)"
                                 />
-                            </md-input-container>
+                            </mat-form-field>
                         </div>
                         <div class="adf-report-title" *ngIf="!isEditable" (click)="editEnable()">
-                            <md-icon class="adf-report-icon" >mode_edit</md-icon>
+                            <mat-icon class="adf-report-icon" >mode_edit</mat-icon>
                             <h4>{{reportParameters.name}}</h4>
                         </div>
                     </adf-toolbar-title>
                     <div *ngIf="!isEditable">
-                        <button md-button mdTooltip="{{'ANALYTICS.MESSAGES.ICON-SETTING' | translate}}"
+                        <button mat-button matTooltip="{{'ANALYTICS.MESSAGES.ICON-SETTING' | translate}}"
                                 (click)="toggleParameters()">
-                            <md-icon>settings</md-icon>
+                            <mat-icon>settings</mat-icon>
                         </button>
-                        <button md-button id="delete-button" (click)="deleteReport(reportId)"
+                        <button mat-button id="delete-button" (click)="deleteReport(reportId)"
-                                mdTooltip="{{'ANALYTICS.MESSAGES.ICON-DELETE' | translate}}">
+                                matTooltip="{{'ANALYTICS.MESSAGES.ICON-DELETE' | translate}}">
-                            <md-icon>delete</md-icon>
+                            <mat-icon>delete</mat-icon>
                         </button>
                         <span *ngIf="isFormValid()">
-                            <button md-button id="export-button" (click)="showDialog('Export')"
+                            <button mat-button id="export-button" (click)="showDialog('Export')"
-                                    mdTooltip="{{'ANALYTICS.MESSAGES.ICON-EXPORT-CSV' | translate}}">
+                                    matTooltip="{{'ANALYTICS.MESSAGES.ICON-EXPORT-CSV' | translate}}">
-                                <md-icon>file_download</md-icon>
+                                <mat-icon>file_download</mat-icon>
                             </button>
-                            <button md-button id="save-button" (click)="showDialog('Save')"
+                            <button mat-button id="save-button" (click)="showDialog('Save')"
-                                    mdTooltip="{{'ANALYTICS.MESSAGES.ICON-SAVE' | translate}}">
+                                    matTooltip="{{'ANALYTICS.MESSAGES.ICON-SAVE' | translate}}">
-                                <md-icon>save</md-icon>
+                                <mat-icon>save</mat-icon>
                             </button>
                         </span>
                     </div>
@@ -102,30 +102,30 @@
                 </div>
                 <ng-template #reportNameDialog>
                     <div id="report-dialog" class="adf-report-dialog">
-                        <h5 md-dialog-title id="report-dialog-title">{{action}} report</h5>
+                        <h5 matDialogTitle id="report-dialog-title">{{action}} report</h5>
-                        <div md-dialog-content>
+                        <div mat-dialog-content>
                             <div *ngIf="isSaveAction()" id="save-title-submessage" class="export-message">
                                 {{'DIALOG.SAVE_MESSAGE' | translate}}
                             </div>
                             <div class="save-export-input">
-                                <md-input-container class="example-full-width" floatPlaceholder="always">
+                                <mat-form-field class="example-full-width" floatPlaceholder="always">
-                                    <input mdInput
+                                    <input matInput
                                         type="text"
                                         id="repName"
                                         placeholder="Report Name"
                                         [value]="reportName"
                                         [(ngModel)]="reportName"
                                         [ngModelOptions]="{standalone: true}">
-                                </md-input-container>
+                                </mat-form-field>
                             </div>
                         </div>
-                        <div md-dialog-actions>
+                        <div mat-dialog-actions>
-                            <button md-button
+                            <button mat-button
                                 color="accent"
                                 type="button"
                                 id="close-dialog-button"
                                 (click)="closeDialog()">Close</button>
-                            <button md-button
+                            <button mat-button
                                 color="primary"
                                 type="button"
                                 id="action-dialog-button"

ng2-components/ng2-activiti-analytics/src/components/analytics-report-parameters.component.scss

@@ -93,7 +93,7 @@
 }
 
 .adf-report-dialog {
-    .mat-input-container {
+    .mat-form-field {
         width: 100%;
     }
 

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

@@ -30,7 +30,7 @@ import {
     ViewEncapsulation
 } from '@angular/core';
 import { FormBuilder, FormControl, FormGroup, Validators } from '@angular/forms';
-import { MdDialog } from '@angular/material';
+import { MatDialog } from '@angular/material';
 import * as moment from 'moment';
 import { ParameterValueModel, ReportParameterDetailsModel, ReportParametersModel, ReportQuery } from 'ng2-activiti-diagrams';
 import { ContentService, LogService } from 'ng2-alfresco-core';
@@ -105,7 +105,7 @@ export class AnalyticsReportParametersComponent implements OnInit, OnChanges, On
                 private formBuilder: FormBuilder,
                 private logService: LogService,
                 private contentService: ContentService,
-                private dialog: MdDialog) {
+                private dialog: MatDialog) {
     }
 
     ngOnInit() {

ng2-components/ng2-activiti-analytics/src/components/widgets/checkbox/checkbox.widget.html

@@ -1,9 +1,9 @@
 <div [formGroup]="formGroup">
-        <md-checkbox
+        <mat-checkbox
         color="primary"
         formControlName="{{controllerName}}"
         [id]="field.id"
         [checked]="field.value"
         [(ngModel)]="field.value"
-        (ngModelChange)="changeValue(field)">{{field.nameKey | translate}}</md-checkbox>
+        (ngModelChange)="changeValue(field)">{{field.nameKey | translate}}</mat-checkbox>
 </div>

ng2-components/ng2-activiti-analytics/src/components/widgets/date-range/date-range.widget.html

@@ -7,48 +7,48 @@
        {{'DATE-WIDGET.MESSAGES.START-DATE-REQUIRED' | translate}}
     </small>
 
-            <md-grid-list cols="2" rowHeight="80px">
+            <mat-grid-list cols="2" rowHeight="80px">
-                <md-grid-tile>
+                <mat-grid-tile>
-                    <md-input-container>
+                    <mat-form-field>
                         <input
-                            mdInput
+                            matInput
                             [min]="minDate"
                             [max]="maxDate"
                             formControlName="startDate"
-                            [mdDatepicker]="startDate"
+                            [matDatepicker]="startDate"
                             [value]="startDatePicker"
                             (keydown)="true"
                             (dateChange)="onGroupValueChanged()"
                             placeholder="{{'DATE-WIDGET.START-DATE' | translate}}"
                             id="startDate_id"
                             required>
-                        <md-datepicker-toggle mdSuffix [for]="startDate" ></md-datepicker-toggle>
+                        <mat-datepicker-toggle matSuffix [for]="startDate" ></mat-datepicker-toggle>
-                    </md-input-container>
+                    </mat-form-field>
-                    <md-datepicker
+                    <mat-datepicker
                         #startDate
                         [touchUi]="true">
-                    </md-datepicker>
+                    </mat-datepicker>
-                </md-grid-tile>
+                </mat-grid-tile>
-                <md-grid-tile>
+                <mat-grid-tile>
-                    <md-input-container>
+                    <mat-form-field>
                         <input
-                            mdInput
+                            matInput
                             [min]="minDate"
                             [max]="maxDate"
                             formControlName="endDate"
-                            [mdDatepicker]="endDate"
+                            [matDatepicker]="endDate"
                             [value]="endDatePicker"
                             (keydown)="true"
                             (dateChange)="onGroupValueChanged()"
                             placeholder="{{'DATE-WIDGET.END-DATE' | translate}}"
                             id="endDate_id"
                             required>
-                        <md-datepicker-toggle mdSuffix [for]="endDate" ></md-datepicker-toggle>
+                        <mat-datepicker-toggle matSuffix [for]="endDate" ></mat-datepicker-toggle>
-                    </md-input-container>
+                    </mat-form-field>
-                    <md-datepicker
+                    <mat-datepicker
                         #endDate
                         [touchUi]="true">
-                    </md-datepicker>
+                    </mat-datepicker>
-                </md-grid-tile>
+                </mat-grid-tile>
-            </md-grid-list>
+            </mat-grid-list>
 </div>

ng2-components/ng2-activiti-analytics/src/components/widgets/date-range/date-range.widget.ts

@@ -17,7 +17,7 @@
 
 import { Component, EventEmitter, Input, OnInit, Output, ViewEncapsulation } from '@angular/core';
 import { AbstractControl, FormControl, FormGroup, Validators } from '@angular/forms';
-import { DateAdapter, MD_DATE_FORMATS } from '@angular/material';
+import { DateAdapter, MAT_DATE_FORMATS } from '@angular/material';
 import * as moment from 'moment';
 import { Moment } from 'moment';
 import { MOMENT_DATE_FORMATS, MomentDateAdapter } from 'ng2-alfresco-core';
@@ -27,7 +27,7 @@ import { MOMENT_DATE_FORMATS, MomentDateAdapter } from 'ng2-alfresco-core';
     templateUrl: './date-range.widget.html',
     providers: [
         {provide: DateAdapter, useClass: MomentDateAdapter},
-        {provide: MD_DATE_FORMATS, useValue: MOMENT_DATE_FORMATS}],
+        {provide: MAT_DATE_FORMATS, useValue: MOMENT_DATE_FORMATS}],
     styleUrls: ['./date-range.widget.scss'],
     encapsulation: ViewEncapsulation.None
 })

ng2-components/ng2-activiti-analytics/src/components/widgets/duration/duration.widget.html

@@ -1,8 +1,8 @@
 <div class="adf-duration-widget-grid">
     <div class="adf-duration-widget-cell">
         <div class="adf-number-widget">
-            <md-input-container class="example-full-width" floatPlaceholder="always">
+            <mat-form-field class="example-full-width" floatPlaceholder="always">
-                <input mdInput
+                <input matInput
                     placeholder="{{field.nameKey | translate}}"
                     type="text"
                     pattern="-?[0-9]*(\.[0-9]+)?"
@@ -10,7 +10,7 @@
                     [value]="field.value"
                     [(ngModel)]="field.value"
                     (ngModelChange)="calculateDuration()">
-             </md-input-container>
+             </mat-form-field>
         </div>
     </div>
     <div class="adf-duration-widget-cell">

ng2-components/ng2-activiti-analytics/src/components/widgets/duration/duration.widget.scss

@@ -10,7 +10,7 @@
 .adf-number-widget {
     width: 100%;
 
-    .mat-input-container {
+    .mat-form-field {
         width: 100%;
     }
 }

ng2-components/ng2-activiti-analytics/src/components/widgets/number/number.widget.html

@@ -1,6 +1,6 @@
 <div class="adf-number-widget" [formGroup]="formGroup">
-    <md-input-container class="example-full-width" floatPlaceholder="always">
+    <mat-form-field class="example-full-width" floatPlaceholder="always">
-        <input mdInput
+        <input matInput
             placeholder="{{field.nameKey | translate}}"
             formControlName="{{controllerName}}"
             type="text"
@@ -9,5 +9,5 @@
             [value]="field.value"
             [(ngModel)]="field.value"
             (ngModelChange)="changeValue(field)">
-    </md-input-container>
+    </mat-form-field>
 </div>

ng2-components/ng2-activiti-analytics/src/components/widgets/number/number.widget.scss

@@ -1,7 +1,7 @@
 .adf-number-widget {
      width: 100%;
 
-     .mat-input-container {
+     .mat-form-field {
          width: 100%;
      }
 }

ng2-components/ng2-activiti-analytics/src/material.module.ts

@@ -17,28 +17,28 @@
 
 import { NgModule } from '@angular/core';
 import {
-    MdButtonModule,
+    MatButtonModule,
-    MdCheckboxModule,
+    MatCheckboxModule,
-    MdDatepickerModule,
+    MatDatepickerModule,
-    MdGridListModule,
+    MatGridListModule,
-    MdIconModule,
+    MatIconModule,
-    MdInputModule,
+    MatInputModule,
-    MdListModule,
+    MatListModule,
-    MdNativeDateModule,
+    MatNativeDateModule,
-    MdTooltipModule
+    MatTooltipModule
 } from '@angular/material';
 
 export function modules() {
     return [
-        MdButtonModule,
+        MatButtonModule,
-        MdInputModule,
+        MatInputModule,
-        MdIconModule,
+        MatIconModule,
-        MdTooltipModule,
+        MatTooltipModule,
-        MdNativeDateModule,
+        MatNativeDateModule,
-        MdDatepickerModule,
+        MatDatepickerModule,
-        MdCheckboxModule,
+        MatCheckboxModule,
-        MdListModule,
+        MatListModule,
-        MdGridListModule
+        MatGridListModule
     ];
 }
 

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

@@ -28,17 +28,17 @@
     "url": "https://github.com/Alfresco/alfresco-ng2-components/issues"
   },
   "dependencies": {
-    "@angular/animations": "4.3.6",
+    "@angular/animations": "4.4.5",
-    "@angular/cdk": "2.0.0-beta.10",
+    "@angular/cdk": "2.0.0-beta.12",
-    "@angular/common": "4.3.6",
+    "@angular/common": "4.4.5",
-    "@angular/compiler": "4.3.6",
+    "@angular/compiler": "4.4.5",
-    "@angular/core": "4.3.6",
+    "@angular/core": "4.4.5",
-    "@angular/forms": "4.3.6",
+    "@angular/forms": "4.4.5",
-    "@angular/http": "4.3.6",
+    "@angular/http": "4.4.5",
-    "@angular/material": "2.0.0-beta.10",
+    "@angular/material": "2.0.0-beta.12",
-    "@angular/platform-browser": "4.3.6",
+    "@angular/platform-browser": "4.4.5",
-    "@angular/platform-browser-dynamic": "4.3.6",
+    "@angular/platform-browser-dynamic": "4.4.5",
-    "@angular/router": "4.3.6",
+    "@angular/router": "4.4.5",
     "@ngx-translate/core": "7.0.0",
     "alfresco-js-api": "1.9.0",
     "core-js": "2.4.1",
@@ -51,7 +51,7 @@
     "zone.js": "0.8.12"
   },
   "devDependencies": {
-    "@types/hammerjs": "2.0.34",
+    "@types/hammerjs": "2.0.35",
     "@types/jasmine": "2.5.35",
     "@types/node": "6.0.45",
     "adf-tslint-rules": "0.0.3",

ng2-components/ng2-activiti-form/docs/extensibility.md

@@ -1,261 +0,0 @@
-# Form Extensibility and Customisation
-
-_Note: it is assumed you are familiar with Alfresco Activiti form definition structure._
-
-- How components and widgets are rendered on a Form
-- Replacing default form widgets with custom components
-- Replacing custom stencils with custom components
-
-
-
-## How components and widgets are rendered on a Form
-
-All form field editors (aka widgets) on a Form are rendered by means of `FormFieldComponent`
-that takes an instance of a `FormFieldModel`:
-
-```html
-<form-field [field]="field"></form-field>
-```
-
-This component depends on `FormRenderingService` service to map `FormFieldModel` to UI component
-based on field type or metadata information.
-
-### Component type resolvers
-
-`FormRenderingService` maps field types to corresponding instances exposing `ComponentTypeResolver` interface:
-
-```ts
-export interface ComponentTypeResolver {
-    (field: FormFieldModel): Type<{}>;
-}
-```
-
-Typically a `ComponentTypeResolver` is a function that takes `FormFieldModel` and returns corresponding component type.
-It can be either a predefined component type or a dynamically evaluated based on field properties and metadata.
-
-#### Static component mapping
-
-You can (re)map fields like in the following:
-
-```ts
-let customResolver: ComponentTypeResolver = () => CustomWidgetComponent;
-formRenderingService.setComponentTypeResolver('text', customResolver, true);
-```
-
-or simply:
-
-```ts
-formRenderingService.setComponentTypeResolver('text', () => CustomWidgetComponent, true);
-```
-
-#### Dynamic component mapping
-
-Alternatively your resolver may return different component types based on `FormFieldModel` state and condition:
-
-```ts
-let customResolver: ComponentTypeResolver = (field: FormFieldModel): Type<{}> => {
-    if (field) {
-        let params = field.params;
-    }
-    return UnknownWidgetComponent;
-};
-formRenderingService.setComponentTypeResolver('text', customResolver, true);
-```
-
-### Default component mappings
-
-Stencil Name | Field Type | Component Type |
-| --- | --- | --- |
-| Text | text | TextWidgetComponent |
-| Number | integer | NumberWidgetComponent |
-| Multi-line text | multi-line-text | MultilineTextWidgetComponentComponent |
-| Checkbox | boolean | CheckboxWidgetComponent |
-| Dropdown | dropdown | DropdownWidgetComponent |
-| Date | date | DateWidgetComponent |
-| Amount | amount | AmountWidgetComponent |
-| Radio buttons | radio-buttons | RadioButtonsWidgetComponent |
-| Hyperlink | hyperlink | HyperlinkWidgetComponent |
-| Display value | readonly | DisplayValueWidgetComponent |
-| Display text | readonly-text | DisplayTextWidgetComponentComponent |
-| Typeahead | typeahead | TypeaheadWidgetComponent |
-| People | people | PeopleWidgetComponent |
-| Group of people | functional-group | FunctionalGroupWidgetComponent |
-| Dynamic table | dynamic-table | DynamicTableWidgetComponent |
-| N/A | container | ContainerWidgetComponent (layout component) |
-| Header | group | ContainerWidgetComponent |
-| Attach | upload | AttachWidgetComponent or UploadWidgetComponent (based on metadata) |
-| N/A | N/A | UnknownWidgetComponent |
-
-
-
-## Replacing default form widgets with custom components
-
-This is a short walkthrough on replacing a standard `Text` widget with a custom component for all Alfresco Activiti forms
-rendered within `<activiti-form>` component.
-
-First let's create a simple Alfresco Activiti form with `Text` widgets:
-
-![default text widget](assets/text-default-widget.png)
-
-Every custom widget must inherit `WidgetComponent` class in order to function properly:
-
-```ts
-import { Component } from '@angular/core';
-import { WidgetComponent } from 'ng2-activiti-form';
-
-@Component({
-    selector: 'custom-editor',
-    template: `
-        <div style="color: red">Look, I'm a custom editor!</div>
-    `
-})
-export class CustomEditorComponent extends WidgetComponent {}
-```
-
-Now you will need to add it to the application module or any custom module that is imported into the application one:
-
-```ts
-import { NgModule } from '@angular/core';
-import { CustomEditorComponent } from './custom-editor.component';
-
-@NgModule({
-    declarations: [ CustomEditorComponent ],
-    exports: [ CustomEditorComponent ],
-    entryComponents: [ CustomEditorComponent ]
-})
-export class CustomEditorsModule {}
-```
-
-Every custom widget should be added into all three module collections: `declarations`, `exports` and `entryComponents`.
-
-If you decided to store custom widgets in a separate dedicated module (and optionally as separate redistributable library)
-don't forget to import it into your main application one:
-
-```ts
-@NgModule({
-    imports: [
-        // ...
-        CustomEditorsModule
-        // ...
-    ],
-    providers: [],
-    bootstrap: [ AppComponent ]
-})
-export class AppModule {}
-```
-
-Now you can import `FormRenderingService` in any of your Views and override default mapping similar to the following:
-
-```ts
-import { Component } from '@angular/core';
-import { CustomEditorComponent } from './custom-editor.component';
-
-@Component({...})
-export class MyView {
-
-    constructor(formRenderingService: FormRenderingService) {
-        formRenderingService.setComponentTypeResolver('text', () => CustomEditorComponent, true);
-    }
-
-}
-```
-
-At runtime it should look similar to the following:
-
-![custom text widget](assets/text-custom-widget.png)
-
-
-
-## Replacing custom stencils with custom components
-
-This is a short walkthrough on rendering custom Alfresco Activiti stencils by means of custom Angular 2 components.
-
-### Creating custom stencil
-
-First let's create a basic stencil and call it `Custom Stencil 01`:
-
-![custom stencil](assets/activiti-stencil-01.png)
-
-_Note the `internal identifier` value as it will become a `field type` value when corresponding form is rendered._
-
-Next put some simple html layout for `Form runtime template` and `Form editor template` fields:
-
-```html
-<div style="color: blue">Custom activiti stencil</div>
-```
-
-Now you are ready to design a test form based on your custom stencil:
-
-![custom stencil form](assets/activiti-stencil-02.png)
-
-Once wired with a new task it should look like the following within Alfresco Activiti web application:
-
-![custom stencil task](assets/activiti-stencil-03.png)
-
-### Creating custom widget
-
-If you load previously created task into ADF `<activiti-form>` component you will see something like the following:
-
-![adf stencil](assets/adf-stencil-01.png)
-
-Let's create an Angular 2 component to render missing content:
-
-```ts
-import { Component } from '@angular/core';
-import { WidgetComponent } from 'ng2-activiti-form';
-
-@Component({
-    selector: 'custom-stencil-01',
-    template: `<div style="color: green">ADF version of custom Activiti stencil</div>`
-})
-export class CustomStencil01 extends WidgetComponent {}
-```
-
-Put it inside custom module:
-
-```ts
-import { NgModule } from '@angular/core';
-import { CustomStencil01 } from './custom-stencil-01.component';
-
-@NgModule({
-    declarations: [ CustomStencil01 ],
-    exports: [ CustomStencil01 ],
-    entryComponents: [ CustomStencil01 ]
-})
-export class CustomEditorsModule {}
-```
-
-And import into your Application Module
-
-```ts
-@NgModule({
-    imports: [
-        // ...
-        CustomEditorsModule
-        // ...
-    ],
-    providers: [],
-    bootstrap: [ AppComponent ]
-})
-export class AppModule {}
-```
-
-Now you can import `FormRenderingService` in any of your Views and provide new mapping:
-
-```ts
-import { Component } from '@angular/core';
-import { CustomStencil01 } from './custom-stencil-01.component';
-
-@Component({...})
-export class MyView {
-
-    constructor(formRenderingService: FormRenderingService) {
-        formRenderingService.setComponentTypeResolver('custom_stencil_01', () => CustomStencil01, true);
-    }
-
-}
-```
-
-At runtime you should now see your custom Angular 2 component rendered in place of the stencils:
-
-![adf stencil runtime](assets/adf-stencil-02.png)

ng2-components/ng2-activiti-form/docs/stencils.md

@@ -1,144 +0,0 @@
-# Form Stencils with Angular 2
-
-Form component provides basic support for custom stencils created with Activiti stencil editor.
-
-## Installing
-
-Configuring support for stencils requires the following configuration for your `index.html` file:
-
-```html
-<!-- Stencils integration -->
-<script src="node_modules/ng2-activiti-form/stencils/runtime.ng1.js"></script>
-<script src="node_modules/ng2-activiti-form/stencils/runtime.adf.js"></script>
-<script src="http://<activiti-app-root>/app/rest/script-files/controllers"></script>
-```
-
-Where `<activiti-app-root>` should be replaced with a valid url pointing to your Activiti installation, for example:
-
-```html
-<script src="http://localhost:9999/activiti-app/app/rest/script-files/controllers"></script>
-```
-- `/app/rest/script-files/controllers`
-    provides all stencil controllers stored within Activiti
-
-- `runtime.ng1.js`
-    provides a compatibility layer for controllers created with Angular 1
-    (this is to avoid runtime errors when loading Angular 1 code into `<activiti-form>` component)
-
-- `runtime.adf.js`
-    provides API for stencil management and registration,
-    i.e. mapping html templates with corresponding controller classes
-
-## Creating new stencil
-
-Create a new stencil and add a new item called `ng2 component 01`.
-
-The internal identifier in this case should be `ng2_component_01`.
-This value will be used as field type when form gets rendered.
-
-## Form runtime template
-
-This should be a valid Angular 2 component template that you want to render in `<activiti-form>` component:
-
-```html
-<div>
-    <div>Angular2 Component</div>
-    <div>Created by: {{name}}</div>
-</div>
-```
-
-## Form editor template
-
-This can be any html layout to be rendered as a component placeholder in Activiti Form Designer.
-
-```html
-<div>
-    <div style="color: blue">
-        Angular2 Component 01
-    </div>
-</div>
-```
-
-## Custom component controller
-
-This field should contain JavaScript code for Angular 2 component class.
-
-_Note: If you are using TypeScript then you should be putting transpiled JavaScript code here,
-you can try official [TypeScript playground](http://www.typescriptlang.org/play/)
-to see how TS code gets transpiled into JS._
-
-### JavaScript code
-
-```js
-var SampleClass1 = (function () {
-    function SampleClass1() {
-        this.name = 'Denys';
-        console.log('ng2_component_01 ctor');
-    }
-    SampleClass1.prototype.ngOnInit = function () {
-      console.log('OnInit called');
-    };
-    return SampleClass1;
-}());
-```
-
-### TypeScript code
-
-The TypeScript version of the code above is:
-
-```ts
-import { OnInit } from '@angular/core';
-
-class SampleClass1 implements OnInit {
-
-  constructor() {
-    console.log('ctor called');
-  }
-
-  ngOnInit() {
-    console.log('OnInit called');
-  }
-
-}
-```
-
-### Mapping template with component class
-
-In order to map **form runtime template** with the corresponding component class
-you will need to register both parts with `adf.registerComponent(identifier, class)` api:
-
-```js
-if (adf) {
-    adf.registerComponent('ng2_component_01', SampleClass1);
-}
-```
-
-### Final result
-
-```js
-var SampleClass1 = (function () {
-    function SampleClass1() {
-        this.name = 'Denys';
-        console.log('ng2_component_01 ctor');
-    }
-    SampleClass1.prototype.ngOnInit = function () {
-      console.log('OnInit called');
-    };
-    return SampleClass1;
-}());
-
-if (adf) {
-    adf.registerComponent('ng2_component_01', SampleClass1);
-}
-```
-
-## Runtime result
-
-When rendered on the form this stencil item should look like the following:
-
-```html
-Angular2 Component
-Created by: Denys
-```
-
-ADF Form component will automatically assemble and compile a valid Angular 2 component on the fly.

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

@@ -35,17 +35,17 @@
     "activiti"
   ],
   "dependencies": {
-    "@angular/animations": "4.3.6",
+    "@angular/animations": "4.4.5",
-    "@angular/cdk": "2.0.0-beta.10",
+    "@angular/cdk": "2.0.0-beta.12",
-    "@angular/common": "4.3.6",
+    "@angular/common": "4.4.5",
-    "@angular/compiler": "4.3.6",
+    "@angular/compiler": "4.4.5",
-    "@angular/core": "4.3.6",
+    "@angular/core": "4.4.5",
-    "@angular/forms": "4.3.6",
+    "@angular/forms": "4.4.5",
-    "@angular/http": "4.3.6",
+    "@angular/http": "4.4.5",
-    "@angular/material": "2.0.0-beta.10",
+    "@angular/material": "2.0.0-beta.12",
-    "@angular/platform-browser": "4.3.6",
+    "@angular/platform-browser": "4.4.5",
-    "@angular/platform-browser-dynamic": "4.3.6",
+    "@angular/platform-browser-dynamic": "4.4.5",
-    "@angular/router": "4.3.6",
+    "@angular/router": "4.4.5",
     "@ngx-translate/core": "7.0.0",
     "alfresco-js-api": "1.9.0",
     "core-js": "2.4.1",
@@ -58,7 +58,7 @@
     "zone.js": "0.8.12"
   },
   "devDependencies": {
-    "@types/hammerjs": "2.0.34",
+    "@types/hammerjs": "2.0.35",
     "@types/jasmine": "2.5.35",
     "@types/node": "6.0.45",
     "adf-tslint-rules": "0.0.3",

ng2-components/ng2-activiti-form/src/components/form-field/form-field.component.spec.ts

@@ -16,7 +16,7 @@
  */
 
 import { async, ComponentFixture, TestBed } from '@angular/core/testing';
-import { MdInputModule } from '@angular/material';
+import { MatInputModule } from '@angular/material';
 import { CoreModule } from 'ng2-alfresco-core';
 import { ErrorWidgetComponent } from '../widgets/error/error.component';
 import { FormRenderingService } from './../../services/form-rendering.service';
@@ -38,7 +38,7 @@ describe('FormFieldComponent', () => {
     beforeEach(async(() => {
         TestBed.configureTestingModule({
                 imports: [CoreModule,
-                    MdInputModule
+                    MatInputModule
                 ],
                 declarations: [
                     FormFieldComponent,

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

@@ -3,22 +3,22 @@
     </ng-content>
 </div>
 <div *ngIf="hasForm()" class="{{form.className}}">
-    <md-card>
+    <mat-card>
-        <md-card-header>
+        <mat-card-header>
-            <md-card-title>
+            <mat-card-title>
                 <h4 *ngIf="isTitleEnabled()">
                     <div *ngIf="showRefreshButton" class="adf-form-reload-button">
-                        <button md-icon-button (click)="onRefreshClicked()">
+                        <button mat-icon-button (click)="onRefreshClicked()">
-                            <md-icon>refresh</md-icon>
+                            <mat-icon>refresh</mat-icon>
                         </button>
                     </div>
-                    <md-icon>{{ form.isValid ? 'event_available' : 'event_busy' }}</md-icon>
+                    <mat-icon>{{ form.isValid ? 'event_available' : 'event_busy' }}</mat-icon>
                     <span>{{form.taskName}}</span>
 
                 </h4>
-            </md-card-title>
+            </mat-card-title>
-        </md-card-header>
+        </mat-card-header>
-        <md-card-content>
+        <mat-card-content>
             <div *ngIf="form.hasTabs()">
                 <tabs-widget [tabs]="form.tabs" (formTabChanged)="checkVisibility($event);"></tabs-widget>
             </div>
@@ -28,25 +28,25 @@
                     <form-field [field]="field.field"></form-field>
                 </div>
             </div>
-        </md-card-content>
+        </mat-card-content>
-        <md-card-actions *ngIf="form.hasOutcomes()">
+        <mat-card-actions *ngIf="form.hasOutcomes()">
             <!--[class.mdl-button--colored]="!outcome.isSystem"-->
             <button *ngFor="let outcome of form.outcomes"
-                    md-button
+                    mat-button
                     [disabled]="!isOutcomeButtonEnabled(outcome)"
                     [class.adf-form-hide-button]="!isOutcomeButtonVisible(outcome, form.readOnly)"
                     (click)="onOutcomeClicked(outcome, $event)">
                 {{outcome.name | uppercase}}
             </button>
-        </md-card-actions>
+        </mat-card-actions>
-    </md-card>
+    </mat-card>
 </div>
 <!--
 For debugging and data visualisation purposes,
 will be removed during future revisions
 -->
 <div *ngIf="showDebugButton" class="adf-form-debug-container">
-    <md-slide-toggle [(ngModel)]="debugMode">Debug mode</md-slide-toggle>
+    <mat-slide-toggle [(ngModel)]="debugMode">Debug mode</mat-slide-toggle>
     <div *ngIf="debugMode && hasForm()">
         <h4>Values</h4>
         <pre>{{form.values | json}}</pre>

ng2-components/ng2-activiti-form/src/components/form.component.visibility.spec.ts

@@ -106,9 +106,9 @@ describe('FormComponent UI and visibiltiy', () => {
             expect(dropdown).toBeDefined();
             expect(dropdown).not.toBeNull();
 
-            const optOne = fixture.debugElement.queryAll(By.css('[id="md-option-1"]'));
+            const optOne = fixture.debugElement.queryAll(By.css('[id="mat-option-1"]'));
-            const optTwo = fixture.debugElement.queryAll(By.css('[id="md-option-2"]'));
+            const optTwo = fixture.debugElement.queryAll(By.css('[id="mat-option-2"]'));
-            const optThree = fixture.debugElement.queryAll(By.css('[id="md-option-3"]'));
+            const optThree = fixture.debugElement.queryAll(By.css('[id="mat-option-3"]'));
 
             expect(optOne[0].nativeElement.innerText).toEqual('united kingdom');
             expect(optTwo[0].nativeElement.innerText).toEqual('italy');

ng2-components/ng2-activiti-form/src/components/material.module.ts

@@ -17,23 +17,23 @@
 
 import { NgModule } from '@angular/core';
 import {
-    MD_PLACEHOLDER_GLOBAL_OPTIONS, MdAutocompleteModule, MdButtonModule, MdCardModule,
+    MAT_PLACEHOLDER_GLOBAL_OPTIONS, MatAutocompleteModule, MatButtonModule, MatCardModule,
-    MdCheckboxModule, MdDatepickerModule, MdGridListModule, MdIconModule, MdInputModule,
+    MatCheckboxModule, MatDatepickerModule, MatGridListModule, MatIconModule, MatInputModule,
-    MdListModule, MdOptionModule, MdRadioModule, MdSelectModule, MdSlideToggleModule, MdTableModule,
+    MatListModule, MatOptionModule, MatRadioModule, MatSelectModule, MatSlideToggleModule, MatTableModule,
-    MdTabsModule
+    MatTabsModule
 } from '@angular/material';
 
 export function modules() {
     return [
-        MdAutocompleteModule, MdButtonModule, MdCardModule, MdCheckboxModule,
+        MatAutocompleteModule, MatButtonModule, MatCardModule, MatCheckboxModule,
-        MdDatepickerModule, MdGridListModule, MdIconModule, MdInputModule, MdListModule,
+        MatDatepickerModule, MatGridListModule, MatIconModule, MatInputModule, MatListModule,
-        MdOptionModule, MdRadioModule, MdSelectModule, MdSlideToggleModule, MdTableModule, MdTabsModule
+        MatOptionModule, MatRadioModule, MatSelectModule, MatSlideToggleModule, MatTableModule, MatTabsModule
     ];
 }
 
 @NgModule({
     providers: [
-        {provide: MD_PLACEHOLDER_GLOBAL_OPTIONS, useValue: { float: 'never' }}
+        {provide: MAT_PLACEHOLDER_GLOBAL_OPTIONS, useValue: { float: 'never' }}
     ],
     imports: modules(),
     exports: modules()

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

@@ -1,11 +1,11 @@
 <div class="adf-start-form-container" *ngIf="hasForm()">
-    <md-card>
+    <mat-card>
-        <md-card-header>
+        <mat-card-header>
-            <md-card-title>
+            <mat-card-title>
                 <h2 *ngIf="isTitleEnabled()" class="mdl-card__title-text">{{form.taskName}}</h2>
-            </md-card-title>
+            </mat-card-title>
-        </md-card-header>
+        </mat-card-header>
-        <md-card-content>
+        <mat-card-content>
             <div *ngIf="form.hasTabs()">
                 <tabs-widget [tabs]="form.tabs" (formTabChanged)="checkVisibility($event);"></tabs-widget>
             </div>
@@ -15,23 +15,23 @@
                     <form-field [field]="field.field"></form-field>
                 </div>
             </div>
-        </md-card-content>
+        </mat-card-content>
-        <md-card-content class="adf-start-form-actions" *ngIf="showOutcomeButtons && form.hasOutcomes()" #outcomesContainer>
+        <mat-card-content class="adf-start-form-actions" *ngIf="showOutcomeButtons && form.hasOutcomes()" #outcomesContainer>
              <ng-content select="[form-custom-button]"></ng-content>
             <button *ngFor="let outcome of form.outcomes"
-                    md-button
+                    mat-button
                     [disabled]="!isOutcomeButtonEnabled(outcome)"
                     [class.mdl-button--colored]="!outcome.isSystem"
                     [class.adf-form-hide-button]="!isOutcomeButtonVisible(outcome, form.readOnly)"
                     (click)="onOutcomeClicked(outcome, $event)">
                 {{outcome.name}}
             </button>
-        </md-card-content>
+        </mat-card-content>
-        <md-card-actions *ngIf="showRefreshButton">
+        <mat-card-actions *ngIf="showRefreshButton">
-            <button md-button
+            <button mat-button
                     (click)="onRefreshClicked()">
-                <md-icon>refresh</md-icon>
+                <mat-icon>refresh</mat-icon>
             </button>
-        </md-card-actions>
+        </mat-card-actions>
-    </md-card>
+    </mat-card>
 </div>

ng2-components/ng2-activiti-form/src/components/start-form.component.spec.ts

@@ -235,7 +235,7 @@ describe('ActivitiStartForm', () => {
                 const formFields = component.form.getFormFields();
                 const labelField = formFields.find(field => field.id === 'mockTypeDropDown');
                 const dropDownWidget = fixture.debugElement.nativeElement.querySelector('dropdown-widget');
-                const selectElement = fixture.debugElement.nativeElement.querySelector('.adf-dropdown-widget>md-select .mat-select-trigger');
+                const selectElement = fixture.debugElement.nativeElement.querySelector('.adf-dropdown-widget>mat-select .mat-select-trigger');
                 selectElement.click();
                 expect(selectElement).toBeDefined();
                 expect(dropDownWidget).toBeDefined();
@@ -365,8 +365,8 @@ describe('ActivitiStartForm', () => {
             component.ngOnChanges({ processDefinitionId: new SimpleChange(exampleId1, exampleId2, true) });
             fixture.whenStable().then(() => {
                 fixture.detectChanges();
-                const titleIcon = fixture.debugElement.nativeElement.querySelector('md-card-title>md-icon');
+                const titleIcon = fixture.debugElement.nativeElement.querySelector('mat-card-title>mat-icon');
-                const titleElement = fixture.debugElement.nativeElement.querySelector('md-card-title>h2');
+                const titleElement = fixture.debugElement.nativeElement.querySelector('mat-card-title>h2');
                 const actionButtons = fixture.debugElement.nativeElement.querySelectorAll('.mat-button');
                 expect(titleIcon).toBeDefined();
                 expect(titleElement).toBeDefined();

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

@@ -1,8 +1,8 @@
 <div class="adf-amount-widget__container adf-amount-widget {{field.className}}" [class.adf-invalid]="!field.isValid" [class.adf-readonly]="field.readOnly">
-    <md-input-container floatPlaceholder="never" class="adf-amount-widget__input">
+    <mat-form-field floatPlaceholder="never" class="adf-amount-widget__input">
         <label class="adf-label" [attr.for]="field.id">{{field.name}}<span *ngIf="isRequired()">*</span></label>
-        <span mdPrefix class="adf-amount-widget__prefix-spacing"> {{currency }}</span>
+        <span matPrefix class="adf-amount-widget__prefix-spacing"> {{currency }}</span>
-        <input mdInput
+        <input matInput
                 class="adf-amount-widget"
                 type="text"
                 [id]="field.id"
@@ -12,7 +12,7 @@
                 (ngModelChange)="checkVisibility(field)"
                 [disabled]="field.readOnly"
                 placeholder="{{field.placeholder}}">
-    </md-input-container>
+    </mat-form-field>
     <error-widget [error]="field.validationSummary" ></error-widget>
     <error-widget *ngIf="isInvalidFieldRequired()" required="{{ 'FORM.FIELD.REQUIRED' | translate }}"></error-widget>
 </div>

ng2-components/ng2-activiti-form/src/components/widgets/amount/amount.widget.spec.ts

@@ -16,7 +16,7 @@
  */
 
 import { async, ComponentFixture, TestBed } from '@angular/core/testing';
-import { MdInputModule } from '@angular/material';
+import { MatInputModule } from '@angular/material';
 import { CoreModule } from 'ng2-alfresco-core';
 import { ActivitiAlfrescoContentService } from '../../../services/activiti-alfresco.service';
 import { ErrorWidgetComponent } from '../error/error.component';
@@ -34,7 +34,7 @@ describe('AmountWidgetComponent', () => {
         TestBed.configureTestingModule({
             imports: [
                 CoreModule,
-                MdInputModule
+                MatInputModule
             ],
             declarations: [
                 AmountWidgetComponent,

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

@@ -1,5 +1,5 @@
 <div [ngClass]="field.className">
-    <md-checkbox
+    <mat-checkbox
         [id]="field.id"
         color="primary"
         [required]="field.required"
@@ -8,5 +8,5 @@
         (change)="onChange()">
         {{field.name}}
         <span *ngIf="field.required">*</span>
-    </md-checkbox>
+    </mat-checkbox>
 </div>

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

@@ -2,10 +2,10 @@
     <h4 class="container-widget__header-text" id="container-header"
         [class.collapsible]="content?.isCollapsible()">
         <button *ngIf="content?.isCollapsible()"
-                md-icon-button
+                mat-icon-button
                 class="mdl-button--icon"
                 (click)="onExpanderClicked()">
-            <md-icon>{{ content?.isExpanded ? 'expand_less' : 'expand_more' }}</md-icon>
+            <mat-icon>{{ content?.isExpanded ? 'expand_less' : 'expand_more' }}</mat-icon>
         </button>
         <span (click)="onExpanderClicked()" id="container-header-label">{{content.name}}</span>
     </h4>

ng2-components/ng2-activiti-form/src/components/widgets/container/container.widget.scss

@@ -51,7 +51,7 @@
             width: 100%;
         }
 
-        md-input-container {
+        mat-form-field {
             width: 100%;
         }
 

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

@@ -1,5 +1,5 @@
-<md-card class="adf-content-container" *ngIf="content">
+<mat-card class="adf-content-container" *ngIf="content">
-    <md-card-content *ngIf="showDocumentContent">
+    <mat-card-content *ngIf="showDocumentContent">
         <div *ngIf="content.isThumbnailSupported()" >
             <img id="thumbnailPreview" class="adf-img-upload-widget" [src]="content.thumbnailUrl" alt="{{content.name}}">
         </div>
@@ -9,14 +9,14 @@
             </div>
         </div>
         <div class="mdl-card__supporting-text upload-widget__content-text">{{content.name}}</div>
-    </md-card-content>
+    </mat-card-content>
 
-    <md-card-actions>
+    <mat-card-actions>
-        <button md-icon-button id="view" (click)="openViewer(content)">
+        <button mat-icon-button id="view" (click)="openViewer(content)">
-            <md-icon class="md-24">zoom_in</md-icon>
+            <mat-icon class="mat-24">zoom_in</mat-icon>
         </button>
-        <button md-icon-button id="download" (click)="download(content)">
+        <button mat-icon-button id="download" (click)="download(content)">
-            <md-icon class="md-24">file_download</md-icon>
+            <mat-icon class="mat-24">file_download</mat-icon>
         </button>
-    </md-card-actions>
+    </mat-card-actions>
-</md-card>
+</mat-card>

ng2-components/ng2-activiti-form/src/components/widgets/content/content.widget.spec.ts

@@ -17,7 +17,7 @@
 
 import { DebugElement, SimpleChange } from '@angular/core';
 import { async, ComponentFixture, TestBed } from '@angular/core/testing';
-import { MdTabsModule } from '@angular/material';
+import { MatTabsModule } from '@angular/material';
 import { By } from '@angular/platform-browser';
 import { AlfrescoTranslationService, ContentService, CoreModule } from 'ng2-alfresco-core';
 import { Observable } from 'rxjs/Rx';
@@ -65,7 +65,7 @@ describe('ContentWidgetComponent', () => {
     beforeEach(async(() => {
         TestBed.configureTestingModule({
             imports: [
-                MdTabsModule,
+                MatTabsModule,
                 CoreModule
             ],
             declarations: [

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

@@ -1,9 +1,9 @@
 <div class="{{field.className}}" *ngIf="field?.isVisible" id="data-widget" [class.adf-invalid]="!field.isValid || field.validationSummary.message">
-    <md-input-container class="adf-date-widget">
+    <mat-form-field class="adf-date-widget">
         <label class="adf-label" [attr.for]="field.id">{{field.name}} ({{field.dateDisplayFormat}})<span *ngIf="isRequired()">*</span></label>
-        <input mdInput
+        <input matInput
                [id]="field.id"
-               [mdDatepicker]="datePicker"
+               [matDatepicker]="datePicker"
                [(value)]="displayDate"
                [required]="isRequired()"
                [disabled]="field.readOnly"
@@ -12,10 +12,10 @@
                (focusout)="onDateChanged($event.srcElement.value)"
                (dateChange)="onDateChanged($event)"
                placeholder="{{field.placeholder}}">
-        <md-datepicker-toggle  mdSuffix [for]="datePicker" [disabled]="field.readOnly" ></md-datepicker-toggle>
+        <mat-datepicker-toggle  matSuffix [for]="datePicker" [disabled]="field.readOnly" ></mat-datepicker-toggle>
-    </md-input-container>
+    </mat-form-field>
     <error-widget [error]="field.validationSummary"></error-widget>
     <error-widget *ngIf="isInvalidFieldRequired()" required="{{ 'FORM.FIELD.REQUIRED' | translate }}"></error-widget>
-    <md-datepicker #datePicker [touchUi]="true" [startAt]="startAt" ></md-datepicker>
+    <mat-datepicker #datePicker [touchUi]="true" [startAt]="startAt" ></mat-datepicker>
 </div>
 

ng2-components/ng2-activiti-form/src/components/widgets/date/date.widget.ts

@@ -18,7 +18,7 @@
 /* tslint:disable:component-selector  */
 
 import { Component, OnInit, ViewEncapsulation } from '@angular/core';
-import { DateAdapter, MD_DATE_FORMATS } from '@angular/material';
+import { DateAdapter, MAT_DATE_FORMATS } from '@angular/material';
 import * as moment from 'moment';
 import { Moment } from 'moment';
 import { MOMENT_DATE_FORMATS, MomentDateAdapter } from 'ng2-alfresco-core';
@@ -29,7 +29,7 @@ import { baseHost , WidgetComponent } from './../widget.component';
     selector: 'date-widget',
     providers: [
         {provide: DateAdapter, useClass: MomentDateAdapter},
-        {provide: MD_DATE_FORMATS, useValue: MOMENT_DATE_FORMATS}],
+        {provide: MAT_DATE_FORMATS, useValue: MOMENT_DATE_FORMATS}],
     templateUrl: './date.widget.html',
     styleUrls: ['./date.widget.scss'],
     host: baseHost,

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

@@ -1,16 +1,20 @@
 <div class="adf-dropdown-widget {{field.className}}"
      [class.adf-invalid]="!field.isValid" [class.adf-readonly]="field.readOnly" *ngIf="field?.isVisible">
     <label class="adf-label" [attr.for]="field.id">{{field.name}}<span *ngIf="isRequired()">*</span></label>
-    <md-select class="adf-select"
+    <mat-form-field>
-            [id]="field.id"
+        <mat-select class="adf-select"
-            [(ngModel)]="field.value"
+                    [id]="field.id"
-            [disabled]="field.readOnly"
+                    [(ngModel)]="field.value"
-            (ngModelChange)="checkVisibility(field)">
+                    [disabled]="field.readOnly"
-        <md-option *ngFor="let opt of field.options"
+                    (ngModelChange)="checkVisibility(field)">
-                   [value]="getOptionValue(opt, field.value)"
+            <mat-option *ngFor="let opt of field.options"
-                   [id]="opt.id">{{opt.name}}</md-option>
+                        [value]="getOptionValue(opt, field.value)"
-        <md-option id="readonlyOption" *ngIf="isReadOnlyType()" [value]="field.value">{{field.value}}</md-option>
+                        [id]="opt.id">{{opt.name}}
-    </md-select>
+            </mat-option>
-    <error-widget [error]="field.validationSummary" ></error-widget>
+            <mat-option id="readonlyOption" *ngIf="isReadOnlyType()" [value]="field.value">{{field.value}}</mat-option>
-    <error-widget class="adf-dropdown-required-message" *ngIf="isInvalidFieldRequired()" required="{{ 'FORM.FIELD.REQUIRED' | translate }}"></error-widget>
+        </mat-select>
+    </mat-form-field>
+    <error-widget [error]="field.validationSummary"></error-widget>
+    <error-widget class="adf-dropdown-required-message" *ngIf="isInvalidFieldRequired()"
+                  required="{{ 'FORM.FIELD.REQUIRED' | translate }}"></error-widget>
 </div>

ng2-components/ng2-activiti-form/src/components/widgets/dropdown/dropdown.widget.spec.ts

@@ -153,9 +153,9 @@ describe('DropdownWidgetComponent', () => {
 
                 openSelect();
 
-                const optOne = fixture.debugElement.queryAll(By.css('[id="md-option-1"]'));
+                const optOne = fixture.debugElement.queryAll(By.css('[id="mat-option-1"]'));
-                const optTwo = fixture.debugElement.queryAll(By.css('[id="md-option-2"]'));
+                const optTwo = fixture.debugElement.queryAll(By.css('[id="mat-option-2"]'));
-                const optThree = fixture.debugElement.queryAll(By.css('[id="md-option-3"]'));
+                const optThree = fixture.debugElement.queryAll(By.css('[id="mat-option-3"]'));
 
                 expect(optOne).not.toBeNull();
                 expect(optTwo).not.toBeNull();
@@ -236,9 +236,9 @@ describe('DropdownWidgetComponent', () => {
 
                 openSelect();
 
-                const optOne = fixture.debugElement.queryAll(By.css('[id="md-option-1"]'));
+                const optOne = fixture.debugElement.queryAll(By.css('[id="mat-option-1"]'));
-                const optTwo = fixture.debugElement.queryAll(By.css('[id="md-option-2"]'));
+                const optTwo = fixture.debugElement.queryAll(By.css('[id="mat-option-2"]'));
-                const optThree = fixture.debugElement.queryAll(By.css('[id="md-option-3"]'));
+                const optThree = fixture.debugElement.queryAll(By.css('[id="mat-option-3"]'));
 
                 expect(optOne).not.toBeNull();
                 expect(optTwo).not.toBeNull();

ng2-components/ng2-activiti-form/src/components/widgets/dynamic-table/dynamic-table.widget.html

@@ -25,31 +25,31 @@
         </div>
 
         <div *ngIf="!readOnly">
-            <button md-button
+            <button mat-button
                     [disabled]="!hasSelection()"
                     (click)="moveSelectionUp()">
-                <md-icon>arrow_upward</md-icon>
+                <mat-icon>arrow_upward</mat-icon>
             </button>
-            <button md-button
+            <button mat-button
                     [disabled]="!hasSelection()"
                     (click)="moveSelectionDown()">
-                <md-icon>arrow_downward</md-icon>
+                <mat-icon>arrow_downward</mat-icon>
             </button>
-            <button md-button
+            <button mat-button
                     [disabled]="field.readOnly"
                     id="{{content.id}}-add-row"
                     (click)="addNewRow()">
-                <md-icon>add_circle_outline</md-icon>
+                <mat-icon>add_circle_outline</mat-icon>
             </button>
-            <button md-button
+            <button mat-button
                     [disabled]="!hasSelection()"
                     (click)="deleteSelection()">
-                <md-icon>remove_circle_outline</md-icon>
+                <mat-icon>remove_circle_outline</mat-icon>
             </button>
-            <button md-button
+            <button mat-button
                     [disabled]="!hasSelection()"
                     (click)="editSelection()">
-                <md-icon>edit</md-icon>
+                <mat-icon>edit</mat-icon>
             </button>
         </div>
      </div>

ng2-components/ng2-activiti-form/src/components/widgets/dynamic-table/editors/boolean/boolean.editor.html

@@ -1,5 +1,5 @@
  <label [attr.for]="column.id">
-    <md-checkbox
+    <mat-checkbox
         color="primary"
         [id]="column.id"
         [checked]="table.getCellValue(row, column)"
@@ -7,5 +7,5 @@
         [disabled]="!column.editable"
         (change)="onValueChanged(row, column, $event)">
     <span class="adf-checkbox-label">{{column.name}}</span>
-    </md-checkbox>
+    </mat-checkbox>
 </label>

ng2-components/ng2-activiti-form/src/components/widgets/dynamic-table/editors/date/date.editor.html

@@ -1,16 +1,16 @@
 <div>
-    <md-input-container class="adf-date-editor">
+    <mat-form-field class="adf-date-editor">
         <label [attr.for]="column.id">{{column.name}} (d-M-yyyy)</label>
-        <input mdInput
+        <input matInput
             id="dateInput"
             type="text"
-            [mdDatepicker]="datePicker"
+            [matDatepicker]="datePicker"
             [value]="value"
             [id]="column.id"
             [required]="column.required"
             [disabled]="!column.editable"
            (focusout)="onDateChanged($event.srcElement.value)">
-        <md-datepicker-toggle  *ngIf="column.editable" mdSuffix [for]="datePicker" class="adf-date-editor-button" ></md-datepicker-toggle>
+        <mat-datepicker-toggle  *ngIf="column.editable" matSuffix [for]="datePicker" class="adf-date-editor-button" ></mat-datepicker-toggle>
-    </md-input-container>
+    </mat-form-field>
-    <md-datepicker #datePicker (dateChange)="onDateChanged($event)" [touchUi]="true"></md-datepicker>
+    <mat-datepicker #datePicker (dateChange)="onDateChanged($event)" [touchUi]="true"></mat-datepicker>
 </div>

ng2-components/ng2-activiti-form/src/components/widgets/dynamic-table/editors/date/date.editor.ts

@@ -18,7 +18,7 @@
  /* tslint:disable:component-selector  */
 
 import { Component, Input, OnInit } from '@angular/core';
-import { DateAdapter, MD_DATE_FORMATS } from '@angular/material';
+import { DateAdapter, MAT_DATE_FORMATS } from '@angular/material';
 import * as moment from 'moment';
 import { Moment } from 'moment';
 import { MOMENT_DATE_FORMATS, MomentDateAdapter } from 'ng2-alfresco-core';
@@ -29,7 +29,7 @@ import { DynamicTableColumn, DynamicTableModel, DynamicTableRow } from './../../
     templateUrl: './date.editor.html',
     providers: [
         {provide: DateAdapter, useClass: MomentDateAdapter},
-        {provide: MD_DATE_FORMATS, useValue: MOMENT_DATE_FORMATS}],
+        {provide: MAT_DATE_FORMATS, useValue: MOMENT_DATE_FORMATS}],
     styleUrls: ['./date.editor.scss']
 })
 export class DateEditorComponent implements OnInit {

ng2-components/ng2-activiti-form/src/components/widgets/dynamic-table/editors/dropdown/dropdown.editor.html

@@ -1,14 +1,16 @@
 <div class="dropdown-editor">
     <label [attr.for]="column.id">{{column.name}}</label>
-    <md-select
+    <mat-form-field>
-        floatPlaceholder="never"
+        <mat-select
-        class="adf-dropdown-editor-select"
+            floatPlaceholder="never"
-        [id]="column.id"
+            class="adf-dropdown-editor-select"
-        [(ngModel)]="value"
+            [id]="column.id"
-        [required]="column.required"
+            [(ngModel)]="value"
-        [disabled]="!column.editable"
+            [required]="column.required"
-        (change)="onValueChanged(row, column, $event)">
+            [disabled]="!column.editable"
-        <md-option></md-option>
+            (change)="onValueChanged(row, column, $event)">
-        <md-option *ngFor="let opt of options" [value]="opt.name" [id]="opt.id">{{opt.name}}</md-option>
+            <mat-option></mat-option>
-    </md-select>
+            <mat-option *ngFor="let opt of options" [value]="opt.name" [id]="opt.id">{{opt.name}}</mat-option>
+        </mat-select>
+    </mat-form-field>
 </div>

ng2-components/ng2-activiti-form/src/components/widgets/dynamic-table/editors/dropdown/dropdown.editor.spec.ts

@@ -246,9 +246,9 @@ describe('DropdownEditorComponent', () => {
 
                 openSelect();
 
-                const optOne = fixture.debugElement.queryAll(By.css('[id="md-option-1"]'));
+                const optOne = fixture.debugElement.queryAll(By.css('[id="mat-option-1"]'));
-                const optTwo = fixture.debugElement.queryAll(By.css('[id="md-option-2"]'));
+                const optTwo = fixture.debugElement.queryAll(By.css('[id="mat-option-2"]'));
-                const optThree = fixture.debugElement.queryAll(By.css('[id="md-option-3"]'));
+                const optThree = fixture.debugElement.queryAll(By.css('[id="mat-option-3"]'));
 
                 expect(optOne).not.toBeNull();
                 expect(optTwo).not.toBeNull();
@@ -294,9 +294,9 @@ describe('DropdownEditorComponent', () => {
 
                 openSelect();
 
-                const optOne = fixture.debugElement.queryAll(By.css('[id="md-option-1"]'));
+                const optOne = fixture.debugElement.queryAll(By.css('[id="mat-option-1"]'));
-                const optTwo = fixture.debugElement.queryAll(By.css('[id="md-option-2"]'));
+                const optTwo = fixture.debugElement.queryAll(By.css('[id="mat-option-2"]'));
-                const optThree = fixture.debugElement.queryAll(By.css('[id="md-option-3"]'));
+                const optThree = fixture.debugElement.queryAll(By.css('[id="mat-option-3"]'));
 
                 expect(optOne).not.toBeNull();
                 expect(optTwo).not.toBeNull();

ng2-components/ng2-activiti-form/src/components/widgets/dynamic-table/editors/row.editor.html

@@ -35,7 +35,7 @@
     </div>
     <error-widget [error]="validationSummary.text"></error-widget>
     <div>
-        <button md-button (click)="onCancelChanges()">Cancel</button>
+        <button mat-button (click)="onCancelChanges()">Cancel</button>
-        <button md-button (click)="onSaveChanges()">Save</button>
+        <button mat-button (click)="onSaveChanges()">Save</button>
     </div>
 </div>

ng2-components/ng2-activiti-form/src/components/widgets/dynamic-table/editors/text/text.editor.html

@@ -1,12 +1,12 @@
 <div class="adf-text-editor">
-    <md-input-container>
+    <mat-form-field>
     <label [attr.for]="column.id">{{displayName}}</label>
-    <input mdInput
+    <input matInput
         type="text"
         [value]="table.getCellValue(row, column)"
         (keyup)="onValueChanged(row, column, $event)"
         [required]="column.required"
         [disabled]="!column.editable"
         [id]="column.id">
-    </md-input-container>
+    </mat-form-field>
 </div>

ng2-components/ng2-activiti-form/src/components/widgets/functional-group/functional-group.widget.html

@@ -1,9 +1,9 @@
 <div class="adf-group-widget {{field.className}}"
      [class.is-dirty]="value"
      [class.adf-invalid]="!field.isValid" [class.adf-readonly]="field.readOnly" id="functional-group-div" *ngIf="field.isVisible">
-    <md-input-container>
+    <mat-form-field>
         <label class="adf-label" [attr.for]="field.id">{{field.name}}<span *ngIf="isRequired()">*</span></label>
-        <input mdInput
+        <input matInput
                class="adf-input"
                type="text"
                [id]="field.id"
@@ -11,16 +11,16 @@
                (keyup)="onKeyUp($event)"
                [disabled]="field.readOnly"
                placeholder="{{field.placeholder}}"
-               [mdAutocomplete]="auto">
+               [matAutocomplete]="auto">
-        <md-autocomplete #auto="mdAutocomplete" (optionSelected)="onItemSelect($event.option.value)">
+        <mat-autocomplete #auto="matAutocomplete" (optionSelected)="onItemSelect($event.option.value)">
-            <md-option *ngFor="let item of groups"
+            <mat-option *ngFor="let item of groups"
                        [id]="field.id +'-'+item.id"
                        (click)="onItemClick(item, $event)"  [value]="item">
                 <span>{{item.name}}</span>
-            </md-option>
+            </mat-option>
-        </md-autocomplete>
+        </mat-autocomplete>
 
-    </md-input-container>
+    </mat-form-field>
     <error-widget [error]="field.validationSummary"></error-widget>
     <error-widget *ngIf="isInvalidFieldRequired()" required="{{ 'FORM.FIELD.REQUIRED' | translate }}"></error-widget>
 </div>

ng2-components/ng2-activiti-form/src/components/widgets/multiline-text/multiline-text.widget.html

@@ -1,9 +1,9 @@
 <div class="adf-multiline-text-widget {{field.className}}"
      [class.adf-invalid]="!field.isValid" [class.adf-readonly]="field.readOnly">
-    <md-input-container floatPlaceholder="never">
+    <mat-form-field floatPlaceholder="never">
         <label class="adf-label" [attr.for]="field.id">{{field.name}}<span *ngIf="isRequired()">*</span></label>
-        <textarea mdInput class="adf-input"
+        <textarea matInput class="adf-input"
-                  md-autosize
+                  matTextareaAutosize
                   type="text"
                   rows="3"
                   [id]="field.id"
@@ -13,7 +13,7 @@
                   [disabled]="field.readOnly || readOnly"
                   placeholder="{{field.placeholder}}">
         </textarea>
-    </md-input-container>
+    </mat-form-field>
     <div *ngIf="field.maxLength > 0" class="adf-multiline-word-counter">
         <span>{{field?.value?.length || 0}}/{{field.maxLength}}</span>
     </div>

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

@@ -1,8 +1,8 @@
 <div class="adf-textfield adf-number-widget {{field.className}}"
      [class.adf-invalid]="!field.isValid" [class.adf-readonly]="field.readOnly">
-    <md-input-container>
+    <mat-form-field>
         <label class="adf-label" [attr.for]="field.id">{{field.name}}<span *ngIf="isRequired()">*</span></label>
-        <input mdInput
+        <input matInput
                class="adf-input"
                type="text"
                pattern="-?[0-9]*(\.[0-9]+)?"
@@ -13,7 +13,7 @@
                (ngModelChange)="checkVisibility(field)"
                [disabled]="field.readOnly"
                placeholder="{{field.placeholder}}">
-    </md-input-container>
+    </mat-form-field>
     <error-widget [error]="field.validationSummary" ></error-widget>
     <error-widget *ngIf="isInvalidFieldRequired()" required="{{ 'FORM.FIELD.REQUIRED' | translate }}"></error-widget>
 </div>

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

@@ -4,10 +4,10 @@
      [class.adf-readonly]="field.readOnly"
      id="people-widget-content"
      *ngIf="field.isVisible">
-    <md-input-container>
+    <mat-form-field>
         <label class="adf-label" [attr.for]="field.id">{{field.name}}<span *ngIf="isRequired()">*</span></label>
         <input #inputValue
-               mdInput
+               matInput
                class="adf-input"
                type="text"
                [id]="field.id"
@@ -15,9 +15,9 @@
                (keyup)="onKeyUp($event)"
                [disabled]="field.readOnly"
                placeholder="{{field.placeholder}}"
-               [mdAutocomplete]="auto">
+               [matAutocomplete]="auto">
-        <md-autocomplete #auto="mdAutocomplete" (optionSelected)="onItemSelect($event.option.value)"  [displayWith]="getDisplayName">
+        <mat-autocomplete #auto="matAutocomplete" (optionSelected)="onItemSelect($event.option.value)"  [displayWith]="getDisplayName">
-            <md-option *ngFor="let user of users; let i = index" [value]="user">
+            <mat-option *ngFor="let user of users; let i = index" [value]="user">
                 <div class="adf-people-widget-row" id="adf-people-widget-user-{{i}}">
                     <div class="adf-people-widget-pic">
                         {{getInitialUserName(user.firstName, user.lastName)}}
@@ -28,9 +28,9 @@
                     </div>
                     <span class="adf-people-label-name">{{getDisplayName(user)}}</span>
                 </div>
-            </md-option>
+            </mat-option>
-        </md-autocomplete>
+        </mat-autocomplete>
-    </md-input-container>
+    </mat-form-field>
     <error-widget [error]="field.validationSummary"></error-widget>
     <error-widget *ngIf="isInvalidFieldRequired()" required="{{ 'FORM.FIELD.REQUIRED' | translate }}"></error-widget>
 </div>

ng2-components/ng2-activiti-form/src/components/widgets/radio-buttons/radio-buttons.widget.html

@@ -2,8 +2,8 @@
      [class.adf-invalid]="!field.isValid" [class.adf-readonly]="field.readOnly" [id]="field.id" *ngIf="field?.isVisible">
     <div class="adf-radio-button-container">
         <label class="adf-label" [attr.for]="field.id">{{field.name}}<span *ngIf="isRequired()">*</span></label>
-        <md-radio-group class="adf-radio-group" [(ngModel)]="field.value">
+        <mat-radio-group class="adf-radio-group" [(ngModel)]="field.value">
-            <md-radio-button
+            <mat-radio-button
                 [id]="field.id + '-' + opt.id"
                 [name]="field.id"
                 [value]="opt.id"
@@ -13,8 +13,8 @@
                 color="primary"
                 class="adf-radio-button" *ngFor="let opt of field.options" >
                 {{opt.name}}
-            </md-radio-button>
+            </mat-radio-button>
-        </md-radio-group>
+        </mat-radio-group>
     </div>
     <error-widget [error]="field.validationSummary" ></error-widget>
     <error-widget *ngIf="isInvalidFieldRequired()" required="{{ 'FORM.FIELD.REQUIRED' | translate }}"></error-widget>

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

@@ -1,9 +1,9 @@
 <div *ngIf="hasTabs()" class="alfresco-tabs-widget">
-    <md-tab-group>
+    <mat-tab-group>
-        <md-tab *ngFor="let tab of visibleTabs" [label]="tab.title">
+        <mat-tab *ngFor="let tab of visibleTabs" [label]="tab.title">
             <div *ngFor="let field of tab.fields">
                 <form-field [field]="field.field"></form-field>
              </div>
-        </md-tab>
+        </mat-tab>
-    </md-tab-group>
+    </mat-tab-group>
 </div>

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

@@ -1,8 +1,8 @@
 <div class="adf-textfield adf-text-widget {{field.className}}"
      [class.adf-invalid]="!field.isValid" [class.adf-readonly]="field.readOnly">
-    <md-input-container>
+    <mat-form-field>
         <label class="adf-label" [attr.for]="field.id">{{field.name}}<span *ngIf="isRequired()">*</span></label>
-        <input mdInput
+        <input matInput
                class="adf-input"
                type="text"
                [id]="field.id"
@@ -13,7 +13,7 @@
                [disabled]="field.readOnly || readOnly"
                [textMask]="{mask: mask, isReversed: isMaskReversed}"
                placeholder="{{field.placeholder}}">
-    </md-input-container>
+    </mat-form-field>
     <error-widget [error]="field.validationSummary"></error-widget>
     <error-widget *ngIf="isInvalidFieldRequired()" required="{{ 'FORM.FIELD.REQUIRED' | translate }}"></error-widget>
 </div>

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

@@ -4,9 +4,9 @@
         [class.adf-invalid]="!field.isValid"
         [class.adf-readonly]="field.readOnly"
         id="typehead-div" *ngIf="field.isVisible">
-        <md-input-container>
+        <mat-form-field>
             <label class="adf-label" [attr.for]="field.id">{{field.name}}</label>
-            <input mdInput class="adf-input"
+            <input matInput class="adf-input"
                    type="text"
                    [id]="field.id"
                    [(ngModel)]="value"
@@ -14,13 +14,13 @@
                    (keyup)="onKeyUp($event)"
                    [disabled]="field.readOnly"
                    placeholder="{{field.placeholder}}"
-                   [mdAutocomplete]="auto">
+                   [matAutocomplete]="auto">
-            <md-autocomplete #auto="mdAutocomplete" (optionSelected)="onItemSelect($event.option.value)">
+            <mat-autocomplete #auto="matAutocomplete" (optionSelected)="onItemSelect($event.option.value)">
-                <md-option *ngFor="let item of options" [value]="item">
+                <mat-option *ngFor="let item of options" [value]="item">
                     <span [id]="field.name+'_option_'+item.id">{{item.name}}</span>
-                </md-option>
+                </mat-option>
-            </md-autocomplete>
+            </mat-autocomplete>
-        </md-input-container>
+        </mat-form-field>
 
         <error-widget [error]="field.validationSummary"></error-widget>
         <error-widget *ngIf="isInvalidFieldRequired()" required="{{ 'FORM.FIELD.REQUIRED' | translate }}"></error-widget>

ng2-components/ng2-activiti-form/src/components/widgets/typeahead/typeahead.widget.spec.ts

@@ -378,9 +378,9 @@ describe('TypeaheadWidgetComponent', () => {
                 typeaheadWidgetComponent.onKeyUp(keyboardEvent);
                 fixture.detectChanges();
                 fixture.whenStable().then(() => {
-                    expect(fixture.debugElement.queryAll(By.css('[id="md-option-1"]'))).toBeDefined();
+                    expect(fixture.debugElement.queryAll(By.css('[id="mat-option-1"]'))).toBeDefined();
-                    expect(fixture.debugElement.queryAll(By.css('[id="md-option-2"]'))).toBeDefined();
+                    expect(fixture.debugElement.queryAll(By.css('[id="mat-option-2"]'))).toBeDefined();
-                    expect(fixture.debugElement.queryAll(By.css('[id="md-option-3"]'))).toBeDefined();
+                    expect(fixture.debugElement.queryAll(By.css('[id="mat-option-3"]'))).toBeDefined();
                 });
             }));
         });

ng2-components/ng2-activiti-form/src/components/widgets/unknown/unknown.widget.ts

@@ -24,12 +24,12 @@ import { baseHost , WidgetComponent } from './../widget.component';
 @Component({
     selector: 'unknown-widget',
     template: `
-            <md-list class="adf-unknown-widget">
+            <mat-list class="adf-unknown-widget">
-                <md-list-item>
+                <mat-list-item>
-                     <md-icon class="md-24">error_outline</md-icon>
+                     <mat-icon class="mat-24">error_outline</mat-icon>
                      <span class="adf-unknown-text">Unknown type: {{field.type}}</span>
-                </md-list-item>
+                </mat-list-item>
-            </md-list>
+            </mat-list>
 
     `,
     styleUrls: ['./unknown.widget.scss'],

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

@@ -4,9 +4,9 @@
     <label class="adf-label" [attr.for]="field.id" >{{field.name}}<span *ngIf="isRequired()">*</span></label>
     <div class="adf-upload-widget-container">
         <div>
-            <md-list *ngIf="hasFile">
+            <mat-list *ngIf="hasFile">
-                <md-list-item class="adf-upload-files-row" *ngFor="let file of field.value">
+                <mat-list-item class="adf-upload-files-row" *ngFor="let file of field.value">
-                    <img md-list-icon class="adf-upload-widget__icon"
+                    <img mat-list-icon class="adf-upload-widget__icon"
                             [id]="'file-'+file.id+'-icon'"
                             [src]="getIcon(file.mimeType)"
                             [alt]="mimeTypeIcon"
@@ -14,12 +14,12 @@
                             (keyup.enter)="fileClicked(file)"
                             role="button"
                             tabindex="0"/>
-                    <span md-line id="{{'file-'+file.id}}" (click)="fileClicked(file)" (keyup.enter)="fileClicked(file)" role="button" tabindex="0" class="adf-file">{{decode(file.name)}}</span>
+                    <span matLine id="{{'file-'+file.id}}" (click)="fileClicked(file)" (keyup.enter)="fileClicked(file)" role="button" tabindex="0" class="adf-file">{{decode(file.name)}}</span>
-                    <button *ngIf="!field.readOnly" md-icon-button [id]="'file-'+file.id+'-remove'" (click)="reset(file);" (keyup.enter)="reset(file);">
+                    <button *ngIf="!field.readOnly" mat-icon-button [id]="'file-'+file.id+'-remove'" (click)="reset(file);" (keyup.enter)="reset(file);">
-                        <md-icon class="md-24">highlight_off</md-icon>
+                        <mat-icon class="mat-24">highlight_off</mat-icon>
                     </button>
-                </md-list-item>
+                </mat-list-item>
-            </md-list>
+            </mat-list>
         </div>
         <input *ngIf="!hasFile"
                #file

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

@@ -17,12 +17,12 @@
 
 import { NgModule } from '@angular/core';
 import {
-    MdButtonModule,
+    MatButtonModule,
-    MdCardModule,
+    MatCardModule,
-    MdChipsModule,
+    MatChipsModule,
-    MdInputModule,
+    MatInputModule,
-    MdProgressSpinnerModule,
+    MatProgressSpinnerModule,
-    MdSelectModule
+    MatSelectModule
 } from '@angular/material';
 import { ActivitiFormModule } from 'ng2-activiti-form';
 import { ActivitiTaskListModule } from 'ng2-activiti-tasklist';
@@ -122,12 +122,12 @@ export const ACTIVITI_PROCESSLIST_PROVIDERS: [any] = [
         DataTableModule,
         ActivitiFormModule,
         ActivitiTaskListModule,
-        MdProgressSpinnerModule,
+        MatProgressSpinnerModule,
-        MdButtonModule,
+        MatButtonModule,
-        MdCardModule,
+        MatCardModule,
-        MdInputModule,
+        MatInputModule,
-        MdChipsModule,
+        MatChipsModule,
-        MdSelectModule
+        MatSelectModule
     ],
     declarations: [
         ...ACTIVITI_PROCESSLIST_DIRECTIVES

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

@@ -34,18 +34,18 @@
     "alfresco"
   ],
   "dependencies": {
-    "@angular/animations": "4.3.6",
+    "@angular/animations": "4.4.5",
-    "@angular/cdk": "2.0.0-beta.10",
+    "@angular/cdk": "2.0.0-beta.12",
-    "@angular/common": "4.3.6",
+    "@angular/common": "4.4.5",
-    "@angular/compiler": "4.3.6",
+    "@angular/compiler": "4.4.5",
-    "@angular/core": "4.3.6",
+    "@angular/core": "4.4.5",
-    "@angular/forms": "4.3.6",
-    "@angular/http": "4.3.6",
-    "@angular/material": "2.0.0-beta.10",
     "@angular/flex-layout": "2.0.0-beta.9",
-    "@angular/platform-browser": "4.3.6",
+    "@angular/forms": "4.4.5",
-    "@angular/platform-browser-dynamic": "4.3.6",
+    "@angular/http": "4.4.5",
-    "@angular/router": "4.3.6",
+    "@angular/material": "2.0.0-beta.12",
+    "@angular/platform-browser": "4.4.5",
+    "@angular/platform-browser-dynamic": "4.4.5",
+    "@angular/router": "4.4.5",
     "@ngx-translate/core": "7.0.0",
     "alfresco-js-api": "1.9.0",
     "core-js": "2.4.1",
@@ -61,7 +61,7 @@
     "zone.js": "0.8.12"
   },
   "devDependencies": {
-    "@types/hammerjs": "2.0.34",
+    "@types/hammerjs": "2.0.35",
     "@types/jasmine": "2.5.35",
     "@types/node": "6.0.45",
     "adf-tslint-rules": "0.0.3",

ng2-components/ng2-activiti-processlist/src/components/create-process-attachment.component.html

@@ -1,13 +1,13 @@
 <button
     id="add_new_process_content_button"
     color="primary"
-    md-button
+    mat-button
-    md-raised-button
+    mat-raised-button
-    md-icon-button
+    mat-icon-button
     class="adf-create-attachment"
     [adf-upload]="true"
     mode="['click']"
     [multiple]="true"
     (upload-files)="onFileUpload($event)">
-    <md-icon>add</md-icon>
+    <mat-icon>add</mat-icon>
 </button>

ng2-components/ng2-activiti-processlist/src/components/process-attachment-list.component.html

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

ng2-components/ng2-activiti-processlist/src/components/process-attachment-list.component.spec.ts

@@ -17,7 +17,7 @@
 
 import { NgZone, SimpleChange } from '@angular/core';
 import { async, ComponentFixture, TestBed } from '@angular/core/testing';
-import { MdProgressSpinnerModule } from '@angular/material';
+import { MatProgressSpinnerModule } from '@angular/material';
 import { By } from '@angular/platform-browser';
 import { TranslateService } from '@ngx-translate/core';
 import { ActivitiContentService } from 'ng2-activiti-form';
@@ -45,7 +45,7 @@ describe('ProcessAttachmentListComponent', () => {
             imports: [
                 CoreModule,
                 DataTableModule,
-                MdProgressSpinnerModule
+                MatProgressSpinnerModule
             ],
             declarations: [
                 ProcessAttachmentListComponent

ng2-components/ng2-activiti-processlist/src/components/process-comments.component.spec.ts

@@ -17,7 +17,7 @@
 
 import { DatePipe } from '@angular/common';
 import { async, ComponentFixture, TestBed } from '@angular/core/testing';
-import { MdInputModule } from '@angular/material';
+import { MatInputModule } from '@angular/material';
 import { Observable } from 'rxjs/Rx';
 
 import {
@@ -45,7 +45,7 @@ describe('ActivitiProcessInstanceComments', () => {
             imports: [
                 CoreModule,
                 DataTableModule,
-                MdInputModule
+                MatInputModule
             ],
             declarations: [
                 ProcessCommentsComponent,

ng2-components/ng2-activiti-processlist/src/components/process-filters.component.html

@@ -1,9 +1,9 @@
 <div class="menu-container">
-    <md-list>
+    <mat-list>
-        <md-list-item (click)="selectFilter(filter)" *ngFor="let filter of filters"
+        <mat-list-item (click)="selectFilter(filter)" *ngFor="let filter of filters"
                         class="adf-filters__entry" [class.active]="currentFilter === filter">
-            <md-icon *ngIf="hasIcon" mdListIcon class="adf-filters__entry-icon">assignment</md-icon>
+            <mat-icon *ngIf="hasIcon" matListIcon class="adf-filters__entry-icon">assignment</mat-icon>
-            <span mdLine [attr.data-automation-id]="filter.name + '_filter'">{{filter.name}}</span>
+            <span matLine [attr.data-automation-id]="filter.name + '_filter'">{{filter.name}}</span>
-        </md-list-item>
+        </mat-list-item>
-    </md-list>
+    </mat-list>
 </div>

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

@@ -1,37 +1,37 @@
 <div *ngIf="!processInstanceDetails">{{ 'DETAILS.MESSAGES.NONE'|translate }}</div>
-<md-card *ngIf="processInstanceDetails">
+<mat-card *ngIf="processInstanceDetails">
-    <md-card-header>
+    <mat-card-header>
-        <md-card-title>{{ getProcessNameOrDescription('medium') }}</md-card-title>
+        <mat-card-title>{{ getProcessNameOrDescription('medium') }}</mat-card-title>
-    </md-card-header>
+    </mat-card-header>
-    <md-card-content>
+    <mat-card-content>
         <adf-process-instance-header
             [processInstance]="processInstanceDetails"
             (showProcessDiagram)="onShowProcessDiagram($event)">
         </adf-process-instance-header>
 
-        <button class="adf-in-medias-res-button" md-button id="show-diagram-button" type="button" md-button md-raised-button [disabled]="isDiagramDisabled()" (click)="onShowProcessDiagram(processInstanceId)">{{ 'DETAILS.BUTTON.SHOW_DIAGRAM' | translate }}</button>
+        <button class="adf-in-medias-res-button" mat-button id="show-diagram-button" type="button" mat-button mat-raised-button [disabled]="isDiagramDisabled()" (click)="onShowProcessDiagram(processInstanceId)">{{ 'DETAILS.BUTTON.SHOW_DIAGRAM' | translate }}</button>
 
-        <md-card>
+        <mat-card>
-            <md-card-content>
+            <mat-card-content>
                 <adf-process-instance-tasks
                     [processInstanceDetails]="processInstanceDetails"
                     (taskClick)="onTaskClicked($event)">
                 </adf-process-instance-tasks>
-            </md-card-content>
+            </mat-card-content>
-        </md-card>
+        </mat-card>
 
         <div data-automation-id="header-status" *ngIf="isRunning()" class="adf-in-medias-res-button">
-            <button md-button type="button" (click)="cancelProcess()">{{ 'DETAILS.BUTTON.CANCEL' | translate }}</button>
+            <button mat-button type="button" (click)="cancelProcess()">{{ 'DETAILS.BUTTON.CANCEL' | translate }}</button>
         </div>
 
-        <md-card>
+        <mat-card>
-            <md-card-content>
+            <mat-card-content>
                 <adf-process-instance-comments #activiticomments
                     [readOnly]="false"
                     [processInstanceId]="processInstanceDetails.id">
                 </adf-process-instance-comments>
-            </md-card-content>
+            </mat-card-content>
-        </md-card>
+        </mat-card>
 
-    </md-card-content>
+    </mat-card-content>
-</md-card>
+</mat-card>

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

@@ -1,5 +1,5 @@
-<md-card *ngIf="processInstance" class="adf-card-container">
+<mat-card *ngIf="processInstance" class="adf-card-container">
-    <md-card-content>
+    <mat-card-content>
         <adf-card-view [properties]="properties"></adf-card-view>
-    </md-card-content>
+    </mat-card-content>
-</md-card>
+</mat-card>