[ADF-1518] Update material2 beta 10 and angular 4.3.6 (#2304)

* ignore pkg lock

* update pkg json

* date picker update material beta.10

* isDateInstance moment adapter

* style and  datepicker update material2 beta 10

* update test dateitem to beta10

* regenerate style files

* use material icons web font

* fix data range material 2 beta 10

* minors cleaning

* recreate styles

* remove unused componentHandler var

* fix failing test checkbox

ng2-components/ng2-alfresco-core/src/components/view/card-view-dateitem.component.html

@@ -1,24 +1,24 @@
 <div class="adf-property-label">{{ property.label }}</div>
 <div class="adf-property-value">
-    <span *ngIf="!isEditble()">
+    <span *ngIf="!isEditable()">
         <span [attr.data-automation-id]="'card-dateitem-' + property.key">{{ property.displayValue }}</span>
     </span>
-    <span *ngIf="isEditble()" class="adf-dateitem-editable">
-        <input class="adf-invisible-date-input" [mdDatepicker]="picker" value="{{property.value}}">
+    <span *ngIf="isEditable()" class="adf-dateitem-editable">
+        <input class="adf-invisible-date-input" [mdDatepicker]="picker" [value]="valueDate"
+               (dateChange)="onDateChanged($event)">
         <span
             class="adf-datepicker-toggle"
             [attr.data-automation-id]="'datepicker-label-toggle-' + property.key"
             (click)="showDatePicker($event)">{{ property.displayValue }}
         </span>
-        <button
+        <md-datepicker-toggle
             [attr.data-automation-id]="'datepickertoggle-' + property.key"
-            [mdDatepickerToggle]="picker">
-        </button>
+            [for]="picker">
+        </md-datepicker-toggle>
         <md-datepicker #picker
-            [attr.data-automation-id]="'datepicker-' + property.key"
-            (selectedChanged)="dateChanged($event)"
-            [startAt]="property.value"
-            [touchUi]="true">
+                       [attr.data-automation-id]="'datepicker-' + property.key"
+                       [startAt]="valueDate"
+                       [touchUi]="true">
         </md-datepicker>
     </span>
 </div>

ng2-components/ng2-alfresco-core/src/components/view/card-view-dateitem.component.scss

@@ -14,14 +14,14 @@
         &-dateitem-editable {
             cursor: pointer;
 
-            button {
+            md-icon {
                 width: 16px;
                 height: 16px;
                 opacity: 0.5;
                 margin-left: 4px;
             }
 
-            &:hover button {
+            &:hover md-icon {
                 opacity: 1;
             }
         }

ng2-components/ng2-alfresco-core/src/components/view/card-view-dateitem.component.spec.ts

@@ -18,6 +18,7 @@
 import { async, ComponentFixture, TestBed } from '@angular/core/testing';
 import { MdDatepickerModule, MdInputModule, MdNativeDateModule } from '@angular/material';
 import { By } from '@angular/platform-browser';
+import * as moment from 'moment';
 import { CardViewDateItemModel } from '../../models/card-view-dateitem.model';
 import { CardViewUpdateService } from '../../services/card-view-update.service';
 import { CardViewDateItemComponent } from './card-view-dateitem.component';
@@ -46,7 +47,7 @@ describe('CardViewDateItemComponent', () => {
     beforeEach(() => {
         fixture = TestBed.createComponent(CardViewDateItemComponent);
         component = fixture.componentInstance;
-        component.property = new CardViewDateItemModel ({
+        component.property = new CardViewDateItemModel({
             label: 'Date label',
             value: new Date('07/10/2017'),
             key: 'datekey',
@@ -131,17 +132,17 @@ describe('CardViewDateItemComponent', () => {
         component.editable = true;
         component.property.editable = true;
         const cardViewUpdateService = TestBed.get(CardViewUpdateService);
-        const expectedDate = new Date('11/11/2017');
+        const expectedDate = moment('Jul 10 2017', 'MMM DD YY');
         fixture.detectChanges();
 
         cardViewUpdateService.itemUpdated$.subscribe(
             (updateNotification) => {
                 expect(updateNotification.target).toBe(component.property);
-                expect(updateNotification.changed).toEqual({ datekey: expectedDate });
+                expect(updateNotification.changed).toEqual({datekey: expectedDate.toDate()});
                 done();
             }
         );
 
-        component.datepicker.selectedChanged.next(expectedDate);
+        component.onDateChanged({value: expectedDate});
     });
 });

ng2-components/ng2-alfresco-core/src/components/view/card-view-dateitem.component.ts

@@ -15,17 +15,27 @@
  * limitations under the License.
  */
 
-import { Component, Input, ViewChild } from '@angular/core';
+import { Component, Input, OnInit, ViewChild } from '@angular/core';
 import { MdDatepicker } from '@angular/material';
+import { DateAdapter, MD_DATE_FORMATS } from '@angular/material';
+import * as moment from 'moment';
+import { Moment } from 'moment';
 import { CardViewDateItemModel } from '../../models/card-view-dateitem.model';
 import { CardViewUpdateService } from '../../services/card-view-update.service';
+import { MOMENT_DATE_FORMATS, MomentDateAdapter } from '../../utils/momentDateAdapter';
 
 @Component({
+    providers: [
+        {provide: DateAdapter, useClass: MomentDateAdapter},
+        {provide: MD_DATE_FORMATS, useValue: MOMENT_DATE_FORMATS}],
     selector: 'adf-card-view-dateitem',
     templateUrl: './card-view-dateitem.component.html',
     styleUrls: ['./card-view-dateitem.component.scss']
 })
-export class CardViewDateItemComponent {
+export class CardViewDateItemComponent implements OnInit {
+
+    public SHOW_FORMAT: string = 'MMM DD YY';
+
     @Input()
     property: CardViewDateItemModel;
 
@@ -35,9 +45,22 @@ export class CardViewDateItemComponent {
     @ViewChild(MdDatepicker)
     public datepicker: MdDatepicker<any>;
 
-    constructor(private cardViewUpdateService: CardViewUpdateService) {}
+    valueDate: Moment;
 
-    isEditble() {
+    constructor(private cardViewUpdateService: CardViewUpdateService, public dateAdapter: DateAdapter<Moment>) {
+    }
+
+    ngOnInit() {
+        let momentDateAdapter = <MomentDateAdapter> this.dateAdapter;
+        momentDateAdapter.overrideDisplyaFormat = this.SHOW_FORMAT;
+
+        if (this.property.value) {
+            this.valueDate = moment(this.property.value, this.SHOW_FORMAT);
+        }
+
+    }
+
+    isEditable() {
         return this.editable && this.property.editable;
     }
 
@@ -45,7 +68,14 @@ export class CardViewDateItemComponent {
         this.datepicker.open();
     }
 
-    dateChanged(changed) {
-        this.cardViewUpdateService.update(this.property, { [this.property.key]: changed });
+    onDateChanged(newDateValue) {
+        if (newDateValue) {
+            let momentDate = moment(newDateValue.value, this.SHOW_FORMAT, true);
+            if (momentDate.isValid()) {
+                this.valueDate = momentDate;
+                this.cardViewUpdateService.update(this.property, {[this.property.key]: momentDate.toDate()});
+            }
+        }
     }
+
 }