checkbox wip

ionic/components/checkbox/checkbox.js

@@ -3,8 +3,10 @@ import {ElementRef} from 'angular2/angular2'
 import {Component, Directive} from 'angular2/src/core/annotations_impl/annotations';
 import {Ancestor} from 'angular2/src/core/annotations_impl/visibility';
 import {View} from 'angular2/src/core/annotations_impl/view';
+import {onInit} from 'angular2/angular2';
 
-//import {ControlGroup, ControlDirective} from 'angular2/forms';
+//pretty sure this has changed in the latest angular
+import {ControlDirective} from 'angular2/forms';
 import {IonicComponent} from '../../config/component';
 import {Icon} from '../icon/icon';
 
@@ -13,8 +15,8 @@ import {Icon} from '../icon/icon';
 @View({
   template: `
   <div class="item-media media-checkbox">
-    <icon [name]="timsIcon" class="checkbox-off"></icon>
-    <icon class="checkbox-on"></icon>
+    <icon [name]="iconOff" class="checkbox-off"></icon>
+    <icon [name]="iconOn" class="checkbox-on"></icon>
   </div>
 
   <div class="item-content">
@@ -29,14 +31,19 @@ export class Checkbox {
   static get config() {
     return {
       selector: 'ion-checkbox',
-      properties: [
-        'checked'
-      ],
+      properties: [ 'checked', 'disabled', 'value' ],
+      appInjector: [ ControlDirective ],
       hostListeners: {
         '^click': 'onClick($event)'
       },
       hostAttributes: {
-        'role': 'checkbox'
+        'role': 'checkbox',
+        'class': 'item'
+      },
+      hostProperties: {
+        'checked' : 'attr.aria-checked',
+        'disabled' : 'attr.aria-disabled',
+        'value': 'attr.value'
       },
       defaultProperties: {
         'iconOff': 'ion-ios-circle-outline',
@@ -46,20 +53,14 @@ export class Checkbox {
   }
 
   constructor(
-    elementRef: ElementRef//,
-//    cd: ControlDirective
+    cd: ControlDirective
   ) {
-    this.domElement = elementRef.domElement
-    this.domElement.classList.add('item')
+    this.controlDirective = cd;
+    cd.valueAccessor = this;
+  }
 
-    this.timsIcon = 'hi-tim'
-
-    // this.controlDirective = cd;
-    // cd.valueAccessor = this;
-
-    // TODO: This is a hack and not a very good one at that
-    // this.domElement.querySelector('.checkbox-off').classList.add(this.config.properties.iconOff.defaults.ios);
-    // this.domElement.querySelector('.checkbox-on').classList.add(this.config.properties.iconOn.defaults.ios);
+  onInit() {
+    Checkbox.applyConfig(this);
   }
 
   /**

ionic/components/checkbox/test/basic/index.js

@@ -1,25 +1,29 @@
 import {Component, Directive} from 'angular2/src/core/annotations_impl/annotations';
 import {View} from 'angular2/src/core/annotations_impl/view';
 
-//import {FormBuilder, Validators, FormDirectives, ControlGroup} from 'angular2/forms';
+import {FormBuilder, Validators, formDirectives} from 'angular2/forms';
 import {Checkbox, Content, List} from 'ionic/ionic';
 //import {IONIC_DIRECTIVES} from 'ionic/ionic'
 
 @Component({ selector: 'ion-view' })
 @View({
   templateUrl: 'main.html',
-  directives: [Checkbox, List, Content]
+  directives: [formDirectives].concat([Checkbox, List, Content])
 })
 class IonicApp {
   constructor() {
-    // var fb = new FormBuilder();
-    // this.form = fb.group({
-    //   addCats: ['yes', Validators.required]
-    // });
+     var fb = new FormBuilder();
+     this.fruitsForm = fb.group({
+       appleCtrl: ['', Validators.required],
+       bananaCtrl: ['', Validators.required],
+       grapeCtrl: ['', Validators.required],
+       cherryCtrl: ['', Validators.required]
+     });
+     debugger;
   }
 
   doSubmit(event) {
-    console.log('Submitting form', this.form.value);
+    console.log('Submitting form', this.fruitsForm.value);
     event.preventDefault();
   }
 }

ionic/components/checkbox/test/basic/main.html

@@ -1,11 +1,20 @@
 <ion-content>
-  <form (^submit)="doSubmit($event)" [control-group]="form">
+  <form (^submit)="doSubmit($event)" [control-group]="fruitsForm">
 
     <ion-list>
       <div class="list-header">Some Switches</div>
-      <ion-checkbox control="addCats">
+      <ion-checkbox control="appleCtrl">
         Apples
       </ion-checkbox>
+      <ion-checkbox control="bananaCtrl">
+        Bananas
+      </ion-checkbox>
+      <ion-checkbox control="grapeCtrl">
+        Grapes
+      </ion-checkbox>
+      <ion-checkbox control="cherryCtrl">
+        Cherries
+      </ion-checkbox>
     </ion-list>
   </form>
 </ion-content>

ionic/components/segment/segment.js

@@ -22,6 +22,7 @@ export class Segment {
   static get config() {
     return {
       selector: 'ion-segment',
+      appInjector: [ControlDirective],
       hostListeners: {
         'click': 'buttonClicked($event)'
       },
@@ -41,7 +42,7 @@ export class Segment {
   ) {
     console.log('ELEMENT REF INJECT', elementRef);
     this.domElement = elementRef.domElement
-    this.config = Segment.config.invoke(this)
+    //this.config = Segment.config.invoke(this)
     this.elementRef = elementRef;
     this.renderer = renderer;
     this.controlDirective = cd;
@@ -107,7 +108,7 @@ export class Segment {
 
     this.value = segmentButton.value;
     // TODO: Better way to do this?
-    this.controlDirective._control().updateValue(this.value);
+    //this.controlDirective._control().updateValue(this.value);
   }
 }