[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

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

@@ -10,7 +10,7 @@
         </th>
         <!-- Columns -->
         <th *ngIf="multiselect">
-            <md-checkbox [checked]="isSelectAllChecked" (change)="onSelectAllClick($event)"></md-checkbox>
+            <mat-checkbox [checked]="isSelectAllChecked" (change)="onSelectAllClick($event)"></mat-checkbox>
         </th>
         <th class="adf-data-table-cell--{{col.type || 'text'}} {{col.cssClass}}"
             *ngFor="let col of data.getColumns()"
@@ -45,26 +45,26 @@
 
             <!-- Actions (left) -->
             <td *ngIf="actions && actionsPosition === 'left'">
-                <button md-icon-button [mdMenuTriggerFor]="menu"
+                <button mat-icon-button [matMenuTriggerFor]="menu"
                     [attr.data-automation-id]="'action_menu_' + idx">
-                    <md-icon>more_vert</md-icon>
+                    <mat-icon>more_vert</mat-icon>
                 </button>
-                <md-menu #menu="mdMenu">
-                    <button md-menu-item *ngFor="let action of getRowActions(row)"
+                <mat-menu #menu="matMenu">
+                    <button mat-menu-item *ngFor="let action of getRowActions(row)"
                         [attr.data-automation-id]="action.title"
                         [disabled]="action.disabled"
                         (click)="onExecuteRowAction(row, action)">
-                        <md-icon *ngIf="action.icon">{{ action.icon }}</md-icon>
+                        <mat-icon *ngIf="action.icon">{{ action.icon }}</mat-icon>
                         <span>{{ action.title }}</span>
                     </button>
-                </md-menu>
+                </mat-menu>
             </td>
 
             <td *ngIf="multiselect">
-                <md-checkbox
+                <mat-checkbox
                     [checked]="row.isSelected"
                     (change)="onCheckboxChange(row, $event)">
-                </md-checkbox>
+                </mat-checkbox>
             </td>
             <td *ngFor="let col of data.getColumns()"
                 class="adf-data-table-cell adf-data-table-cell--{{col.type || 'text'}} {{col.cssClass}}"
@@ -137,19 +137,19 @@
 
             <!-- Actions (right) -->
             <td *ngIf="actions && actionsPosition === 'right'" class="alfresco-datatable__actions-cell">
-                <button md-icon-button [mdMenuTriggerFor]="menu"
+                <button mat-icon-button [matMenuTriggerFor]="menu"
                     [attr.data-automation-id]="'action_menu_' + idx">
-                    <md-icon>more_vert</md-icon>
+                    <mat-icon>more_vert</mat-icon>
                 </button>
-                <md-menu #menu="mdMenu">
-                    <button md-menu-item *ngFor="let action of getRowActions(row)"
+                <mat-menu #menu="matMenu">
+                    <button mat-menu-item *ngFor="let action of getRowActions(row)"
                         [attr.data-automation-id]="action.title"
                         [disabled]="action.disabled"
                         (click)="onExecuteRowAction(row, action)">
-                        <md-icon *ngIf="action.icon">{{ action.icon }}</md-icon>
+                        <mat-icon *ngIf="action.icon">{{ action.icon }}</mat-icon>
                         <span>{{ action.title }}</span>
                     </button>
-                </md-menu>
+                </mat-menu>
             </td>
 
         </tr>

ng2-components/ng2-alfresco-datatable/src/components/datatable/datatable.component.spec.ts

@@ -17,7 +17,7 @@
 
 import { SimpleChange } from '@angular/core';
 import { async, ComponentFixture, TestBed } from '@angular/core/testing';
-import { MdCheckboxChange } from '@angular/material';
+import { MatCheckboxChange } from '@angular/material';
 import { RouterTestingModule } from '@angular/router/testing';
 import { CoreModule } from 'ng2-alfresco-core';
 import { MaterialModule } from '../../material.module';
@@ -440,9 +440,9 @@ describe('DataTable', () => {
 
     it('should invert "select all" status', () => {
         expect(dataTable.isSelectAllChecked).toBeFalsy();
-        dataTable.onSelectAllClick(<MdCheckboxChange> { checked: true });
+        dataTable.onSelectAllClick(<MatCheckboxChange> { checked: true });
         expect(dataTable.isSelectAllChecked).toBeTruthy();
-        dataTable.onSelectAllClick(<MdCheckboxChange> { checked: false });
+        dataTable.onSelectAllClick(<MatCheckboxChange> { checked: false });
         expect(dataTable.isSelectAllChecked).toBeFalsy();
     });
 
@@ -454,13 +454,13 @@ describe('DataTable', () => {
         dataTable.multiselect = true;
         dataTable.ngAfterContentInit();
 
-        dataTable.onSelectAllClick(<MdCheckboxChange> { checked: true });
+        dataTable.onSelectAllClick(<MatCheckboxChange> { checked: true });
         expect(dataTable.isSelectAllChecked).toBe(true);
         for (let i = 0; i < rows.length; i++) {
             expect(rows[i].isSelected).toBe(true);
         }
 
-        dataTable.onSelectAllClick(<MdCheckboxChange> { checked: false });
+        dataTable.onSelectAllClick(<MatCheckboxChange> { checked: false });
         expect(dataTable.isSelectAllChecked).toBe(false);
         for (let i = 0; i < rows.length; i++) {
             expect(rows[i].isSelected).toBe(false);
@@ -471,7 +471,7 @@ describe('DataTable', () => {
         dataTable.multiselect = true;
         dataTable.ngOnChanges({'data': new SimpleChange('123', {}, true)});
 
-        dataTable.onSelectAllClick(<MdCheckboxChange> { checked: true });
+        dataTable.onSelectAllClick(<MatCheckboxChange> { checked: true });
         expect(dataTable.isSelectAllChecked).toBe(true);
     });
 
@@ -483,7 +483,7 @@ describe('DataTable', () => {
         dataTable.multiselect = false;
         dataTable.ngAfterContentInit();
 
-        dataTable.onSelectAllClick(<MdCheckboxChange> { checked: true });
+        dataTable.onSelectAllClick(<MatCheckboxChange> { checked: true });
         expect(dataTable.isSelectAllChecked).toBe(true);
         for (let i = 0; i < rows.length; i++) {
             expect(rows[i].isSelected).toBe(false);

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

@@ -19,7 +19,7 @@ import {
     AfterContentInit, Component, ContentChild, DoCheck, ElementRef, EventEmitter, Input,
     IterableDiffers, OnChanges, Output, SimpleChange, SimpleChanges, TemplateRef
 } from '@angular/core';
-import { MdCheckboxChange } from '@angular/material';
+import { MatCheckboxChange } from '@angular/material';
 import { DataColumnListComponent } from 'ng2-alfresco-core';
 import { Observable, Observer, Subscription } from 'rxjs/Rx';
 import { DataColumn, DataRow, DataRowEvent, DataSorting, DataTableAdapter } from '../../data/datatable-adapter';
@@ -330,7 +330,7 @@ export class DataTableComponent implements AfterContentInit, OnChanges, DoCheck
         }
     }
 
-    onSelectAllClick(e: MdCheckboxChange) {
+    onSelectAllClick(e: MatCheckboxChange) {
         this.isSelectAllChecked = e.checked;
 
         if (this.multiselect) {
@@ -348,7 +348,7 @@ export class DataTableComponent implements AfterContentInit, OnChanges, DoCheck
         }
     }
 
-    onCheckboxChange(row: DataRow, event: MdCheckboxChange) {
+    onCheckboxChange(row: DataRow, event: MatCheckboxChange) {
         const newValue = event.checked;
 
         this.selectRow(row, newValue);