support deprecated and new forms api

mseemann · Aug 7, 2016 · c47bcf1 · c47bcf1
1 parent 39ff1fe
commit c47bcf1
Show file tree

Hide file tree

Showing 17 changed files with 603 additions and 348 deletions.
diff --git a/package.json b/package.json
@@ -31,8 +31,9 @@
     "url": "git+https://github.com/mseemann/angular2-mdl.git"
   },
   "dependencies": {
+    "@angular/common": "2.0.0-rc.4",
     "@angular/core": "2.0.0-rc.4",
-    "@angular/common": "2.0.0-rc.4"
+    "@angular/forms": "0.2.0"
   },
   "devDependencies": {
     "@angular/compiler": "2.0.0-rc.4",
@@ -63,9 +64,9 @@
     "rxjs": "5.0.0-beta.6",
     "systemjs": "0.19.31",
     "ts-node": "0.9.3",
-    "tslint": "3.13.0",
-    "typescript": "1.9.0-dev.20160615-1.0",
-    "typings": "1.3.1",
+    "tslint": "3.14.0",
+    "typescript": "2.0.0",
+    "typings": "1.3.2",
     "zone.js": "0.6.12"
   }
 }
diff --git a/src/app/snackbar/snackbar.component.html b/src/app/snackbar/snackbar.component.html
@@ -1,14 +1,14 @@
 <h4>Snackbar </h4>
 
-<mdl-button mdl-button-type="raised" mdl-colored mdl-ripple (click)="showSnackbar()">Show Snackbar</mdl-button>
+<mdl-button mdl-button-type="raised" mdl-colored="primary" mdl-ripple (click)="showSnackbar()">Show Snackbar</mdl-button>
 
 
 
 
 <pre prism>
   <![CDATA[
 
-  <mdl-button mdl-button-type="raised" mdl-colored mdl-ripple (click)="showSnackbar()">Show Snackbar</mdl-button>
+  <mdl-button mdl-button-type="raised" mdl-colored="primary" mdl-ripple (click)="showSnackbar()">Show Snackbar</mdl-button>
 
   <script>
   export class SnackbarDemo {

diff --git a/src/components/checkbox/mdl-checkbox.component.spec.ts b/src/components/checkbox/mdl-checkbox.component.spec.ts
@@ -3,39 +3,45 @@ import {
   expect,
   it,
   inject,
-  beforeEach
+  beforeEach,
+  addProviders
 } from '@angular/core/testing';
 import { By, DOCUMENT } from '@angular/platform-browser';
 import { Component} from '@angular/core';
 import { TestComponentBuilder } from '@angular/compiler/testing';
 import { MdlCheckboxComponent } from './mdl-checkbox.component';
+import { disableDeprecatedForms, provideForms} from '@angular/forms';
+
 
 describe('Component: MdlCheckbox', () => {
 
   var builder: TestComponentBuilder;
   var doc: HTMLDocument;
 
-  beforeEach(inject([TestComponentBuilder, DOCUMENT], function (tcb: TestComponentBuilder, document) {
-    builder = tcb;
-    doc = document;
-  }));
+  describe('with deprecated forms api', () => {
 
-  it('should add the css class mdl-checkbox to the host element', () => {
+    beforeEach(inject([TestComponentBuilder, DOCUMENT], function (tcb: TestComponentBuilder, document) {
+      builder = tcb;
+      doc = document;
+    }));
 
-    return builder
-      .createAsync(MdlTestCheckboxComponent).then( (fixture) => {
+    it('should add the css class mdl-checkbox to the host element', ( done ) => {
 
-        fixture.detectChanges();
+      return builder
+        .createAsync(MdlTestCheckboxComponent).then( (fixture) => {
 
-        let checkboxEl: HTMLElement = fixture.nativeElement.children.item(0);
-        expect(checkboxEl.classList.contains('mdl-checkbox')).toBe(true);
+          fixture.detectChanges();
 
-      });
-  });
+          let checkboxEl: HTMLElement = fixture.nativeElement.children.item(0);
+          expect(checkboxEl.classList.contains('mdl-checkbox')).toBe(true);
 
-  it('should support ngModel', () => {
-    return builder
-      .createAsync(MdlTestCheckboxComponent).then( (fixture) => {
+          done();
+        });
+    });
+
+    it('should support ngModel', ( done ) => {
+      return builder
+        .createAsync(MdlTestCheckboxComponent).then( (fixture) => {
 
           fixture.detectChanges();
 
@@ -45,19 +51,22 @@ describe('Component: MdlCheckbox', () => {
 
           instance.checkboxValue1 = true;
           fixture.detectChanges();
+
           expect(el.checked).toEqual(true);
 
           component.value = false;
           fixture.detectChanges();
           expect(el.checked).toEqual(false);
 
-      });
-  });
+          done();
+
+        });
+    });
 
-  it('should change the value on click', () => {
-    return builder
-      .createAsync(MdlTestCheckboxComponent).then( (fixture) => {
-        fixture.detectChanges();
+    it('should change the value on click', ( done ) => {
+      return builder
+        .createAsync(MdlTestCheckboxComponent).then( (fixture) => {
+          fixture.detectChanges();
 
           let instance = fixture.componentInstance;
           let el: HTMLInputElement = fixture.debugElement.query(By.css('input')).nativeElement;
@@ -72,13 +81,14 @@ describe('Component: MdlCheckbox', () => {
 
           expect(el.checked).toEqual(true);
 
-      });
-  });
+          done();
+        });
+    });
 
-  it('should mark the component as focused and blured', () => {
-    return builder
-      .createAsync(MdlTestCheckboxComponent).then( (fixture) => {
-        fixture.detectChanges();
+    it('should mark the component as focused and blured', ( done ) => {
+      return builder
+        .createAsync(MdlTestCheckboxComponent).then( (fixture) => {
+          fixture.detectChanges();
 
           let inputEl: HTMLInputElement = fixture.debugElement.query(By.css('input')).nativeElement;
 
@@ -98,9 +108,38 @@ describe('Component: MdlCheckbox', () => {
           fixture.detectChanges();
           expect(checkboxEl.classList.contains('is-focused')).toBe(false);
 
-      });
+          done();
+        });
+    });
   });
 
+
+  describe('with new forms api', () => {
+    beforeEach( () => {
+      addProviders([
+        disableDeprecatedForms(),
+        provideForms()
+      ]);
+    });
+
+    beforeEach(inject([TestComponentBuilder, DOCUMENT], function (tcb: TestComponentBuilder, document) {
+      builder = tcb;
+      doc = document;
+    }));
+
+    it('should be possible to create the testcomponnet if the new forms api is used', ( done ) => {
+
+      return builder
+        .createAsync(MdlTestCheckboxComponent).then( (fixture) => {
+
+          done();
+        });
+
+    });
+
+  });
+
+
 });
 
 

diff --git a/src/components/checkbox/mdl-checkbox.component.ts b/src/components/checkbox/mdl-checkbox.component.ts
@@ -3,24 +3,32 @@ import {
   ElementRef,
   Provider,
   Renderer,
-  forwardRef,
-  Input
+  forwardRef
 } from '@angular/core';
+import {
+  NG_VALUE_ACCESSOR as DEPRECTAED_NG_VALUE_ACCESSOR,
+  ControlValueAccessor as DEPRECATED_ControlValueAccessor
+} from '@angular/common';
 import {
   NG_VALUE_ACCESSOR,
   ControlValueAccessor
-} from '@angular/common';
+} from '@angular/forms';
 
 const MD_INPUT_CONTROL_VALUE_ACCESSOR = new Provider(NG_VALUE_ACCESSOR, {
   useExisting: forwardRef(() => MdlCheckboxComponent),
   multi: true
 });
 
+const DEPRECATED_MD_INPUT_CONTROL_VALUE_ACCESSOR = new Provider(DEPRECTAED_NG_VALUE_ACCESSOR, {
+  useExisting: forwardRef(() => MdlCheckboxComponent),
+  multi: true
+});
+
 const IS_FOCUSED = 'is-focused';
 
 @Component({
   selector: 'mdl-checkbox',
-  providers: [MD_INPUT_CONTROL_VALUE_ACCESSOR],
+  providers: [MD_INPUT_CONTROL_VALUE_ACCESSOR, DEPRECATED_MD_INPUT_CONTROL_VALUE_ACCESSOR],
   host: {
     '(click)': 'onClick()',
     '[class.mdl-checkbox]': 'true',
@@ -31,7 +39,7 @@ const IS_FOCUSED = 'is-focused';
   <input type="checkbox" class="mdl-checkbox__input" 
     (focus)="onFocus()" 
     (blur)="onBlur()"
-    [(ngModel)]="value">
+    [ngModel]="value">
   <span class="mdl-checkbox__label"><ng-content></ng-content></span>
   <span class="mdl-checkbox__focus-helper"></span>
   <span class="mdl-checkbox__box-outline">
@@ -40,7 +48,7 @@ const IS_FOCUSED = 'is-focused';
   `,
   inputs: ['value']
 })
-export class MdlCheckboxComponent implements ControlValueAccessor {
+export class MdlCheckboxComponent implements ControlValueAccessor, DEPRECATED_ControlValueAccessor {
 
   private value_: boolean = false;
 

diff --git a/src/components/icon-toggle/mdl-icon-toggle.component.spec.ts b/src/components/icon-toggle/mdl-icon-toggle.component.spec.ts
@@ -3,34 +3,66 @@ import {
   expect,
   it,
   inject,
-  beforeEach
+  beforeEach,
+  addProviders
 } from '@angular/core/testing';
 import { DOCUMENT } from '@angular/platform-browser';
 import { Component } from '@angular/core';
 import { TestComponentBuilder } from '@angular/compiler/testing';
 import { MdlIconToggleComponent } from './mdl-icon-toggle.component';
+import { disableDeprecatedForms, provideForms} from '@angular/forms';
 
 describe('Component: MdlIconToggle', () => {
 
   var builder: TestComponentBuilder;
   var doc: HTMLDocument;
 
-  beforeEach(inject([TestComponentBuilder, DOCUMENT], function (tcb: TestComponentBuilder, document) {
-    builder = tcb;
-    doc = document;
-  }));
+  describe('with deprecated forms api', () => {
 
-  it('should add the css class mdl-icon-toggle to the host element', () => {
+    beforeEach(inject([TestComponentBuilder, DOCUMENT], function (tcb: TestComponentBuilder, document) {
+      builder = tcb;
+      doc = document;
+    }));
 
-    return builder
-      .createAsync(MdlTestIconToggleComponent).then( (fixture) => {
+    it('should add the css class mdl-icon-toggle to the host element', () => {
 
-        fixture.detectChanges();
+      return builder
+        .createAsync(MdlTestIconToggleComponent).then( (fixture) => {
 
-        let checkboxEl: HTMLElement = fixture.nativeElement.children.item(0);
-        expect(checkboxEl.classList.contains('mdl-icon-toggle')).toBe(true);
+          fixture.detectChanges();
+
+          let checkboxEl: HTMLElement = fixture.nativeElement.children.item(0);
+          expect(checkboxEl.classList.contains('mdl-icon-toggle')).toBe(true);
+
+        });
+    });
+  });
+
+  describe('with new forms api', () => {
+
+    beforeEach( () => {
+      addProviders([
+        disableDeprecatedForms(),
+        provideForms()
+      ]);
+    });
+    beforeEach(inject([TestComponentBuilder, DOCUMENT], function (tcb: TestComponentBuilder, document) {
+      builder = tcb;
+      doc = document;
+    }));
+
+    it('should create the testcomponent', ( done ) => {
+
+      return builder
+        .createAsync(MdlTestIconToggleComponent).then( (fixture) => {
+
+          fixture.detectChanges();
+
+          done();
+
+        });
+    });
 
-      });
   });
 
 });

diff --git a/src/components/icon-toggle/mdl-icon-toggle.component.ts b/src/components/icon-toggle/mdl-icon-toggle.component.ts
@@ -6,11 +6,19 @@ import {
   forwardRef
 } from '@angular/core';
 import {
-  NG_VALUE_ACCESSOR
+  NG_VALUE_ACCESSOR as DEPRECATED_NG_VALUE_ACCESSOR
 } from '@angular/common';
+import {
+  NG_VALUE_ACCESSOR
+} from '@angular/forms';
 import { MdlIconComponent } from './../icon/mdl-icon.component';
 import { MdlCheckboxComponent } from './../checkbox/mdl-checkbox.component';
 
+const DEPRECATED_MD_INPUT_CONTROL_VALUE_ACCESSOR = new Provider(DEPRECATED_NG_VALUE_ACCESSOR, {
+  useExisting: forwardRef(() => MdlIconToggleComponent),
+  multi: true
+});
+
 const MD_INPUT_CONTROL_VALUE_ACCESSOR = new Provider(NG_VALUE_ACCESSOR, {
   useExisting: forwardRef(() => MdlIconToggleComponent),
   multi: true
@@ -19,7 +27,7 @@ const MD_INPUT_CONTROL_VALUE_ACCESSOR = new Provider(NG_VALUE_ACCESSOR, {
 
 @Component({
   selector: 'mdl-icon-toggle',
-  providers: [MD_INPUT_CONTROL_VALUE_ACCESSOR],
+  providers: [DEPRECATED_MD_INPUT_CONTROL_VALUE_ACCESSOR, MD_INPUT_CONTROL_VALUE_ACCESSOR],
   host: {
     '(click)': 'onClick()',
     '[class.mdl-icon-toggle]': 'true',