checkbox updates

ionic/components/checkbox/checkbox.scss

@@ -10,14 +10,7 @@
 }
 
 .checkbox input {
-  position: absolute;
-  width: 0;
-  height: 0;
-  margin: 0;
-  padding: 0;
-  opacity: 0;
-  border: none;
-  @include appearance(none);
+  display: none;
 }
 
 .checkbox .input-label {

ionic/components/checkbox/checkbox.ts

@@ -2,7 +2,6 @@ import {
   View,
   Directive,
   ElementRef,
-  Renderer,
   Optional,
   Parent,
   NgControl
@@ -12,83 +11,57 @@ import {Ion} from '../ion';
 import {IonInputItem} from '../form/input';
 import {IonicConfig} from '../../config/config';
 import {IonicComponent, IonicView} from '../../config/annotations';
-import {Icon} from '../icon/icon';
+import {TapClick} from '../button/button';
 
 
 @IonicComponent({
   selector: 'ion-checkbox',
   host: {
     'class': 'item',
-    '[attr.aria-checked]': 'input.checked'
+    'role': 'checkbox',
+    '[attr.aria-checked]': 'input.checked',
+    '[attr.aria-disabled]': 'input.disabled',
+    '[attr.aria-labelledby]': 'labelId',
+    '(^click)': 'click($event)'
   }
 })
 @IonicView({
   template:
   '<div class="item-media media-checkbox">' +
+    '<input type="checkbox" aria-hidden="true">' +
     '<div class="checkbox-icon"></div>' +
   '</div>' +
-  '<div class="item-content">' +
+  '<div class="item-content" id="{{labelId}}">' +
     '<content></content>' +
   '</div>'
 })
 export class Checkbox extends IonInputItem {
   constructor(
-    cd: NgControl,
-    renderer: Renderer,
+    @Optional() cd: NgControl,
     elementRef: ElementRef,
-    config: IonicConfig
+    config: IonicConfig,
+    tapClick: TapClick
   ) {
     super(elementRef, config);
     this.onChange = (_) => {};
     this.onTouched = (_) => {};
-    this.renderer = renderer;
-    this.elementRef = elementRef;
+    this.tapClick = tapClick;
     this.cd = cd;
 
-    cd.valueAccessor = this;
+    if (cd) cd.valueAccessor = this;
+  }
+
+  click(ev) {
+    if (this.tapClick.allowClick(ev)) {
+      ev.preventDefault();
+      ev.stopPropagation();
+      this.input.checked = !this.input.checked;
+    }
   }
 
   onInit() {
     super.onInit();
-    console.log("checkbox onInit")
-  }
-
-  onAllChangesDone() {
-    console.log("checkbox onAllChangesDone")
-    if (this._checked !== void 0 && this.input.checked != this._checked) {
-      if (this.input.checked !== void 0) {
-        console.warn("Checkbox checked is set in view template and Control declaration.\n" +
-                      "Value: " + !!this._checked + " from Control takes precedence");
-      }
-      this.input.checked = !!this._checked;
-    }
-    if (this._value !== void 0 && this.input.value != this._value) {
-      if (this.input.value !== void 0) {
-        console.warn("Checkbox value is set in view template and Control declaration.\n" +
-                      "Value: " + this._value + " from Control takes precedence");
-      }
-      this.input.value = this._value;
-    }
-    if (this.input.value === void 0) {
-      this.input.value = "on";
-    }
-    if (this.input.checked === void 0) {
-      this.input.checked = false;
-    }
-    //TODO check validity
-    this.cd.control._value = {"checked": !!this.input.checked, "value": this.input.value};
-
-    //TODO only want to call this once, we want to set input.checked directly on subsequent
-    // writeValue's
-    this.onAllChangesDone = () => {};
-    // this.onChange({"checked": this.input.checked, "value": this.input.value});
-  }
-
-  //from clicking the label or selecting with keyboard
-  //view -> model (Control)
-  toggle() {
-    this.input.checked = this._checked = !this.input.checked;
-    this.onChange({"checked": this.input.checked, "value": this.input.value});
+    this.labelId = 'label-' + this.id;
   }
 
   // Called by the model (Control) to update the view
@@ -113,7 +86,6 @@ export class Checkbox extends IonInputItem {
     console.log("writeValue, " + this.input.id + " checked: " + this._checked);
     console.log("writeValue " + this.input.id + " value: " + this._value);
 
-    // this.cd.control._value = {"checked": this.input.checked, "value": this.input.value};
   }
 
   // Used by the view to update the model (Control)

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

@@ -9,10 +9,9 @@
     <ion-list>
 
       <ion-checkbox ng-control="appleCtrl">
-        <label id="appleLabel">Apple</label>
-        <input checked type="checkbox">
+        Apple
       </ion-checkbox>
-
+<!--
       <ion-checkbox ng-control="bananaCtrl">
         <label>Banana</label>
         <input value="test" type="checkbox">
@@ -26,13 +25,13 @@
       <ion-checkbox ng-control="grapeCtrl">
         <label>Grape</label>
         <input value="test" checked="checked" type="checkbox">
-      </ion-checkbox>
+      </ion-checkbox> -->
 
     <ion-list>
 
   </form>
 
-  <p>
+  <p aria-hidden="true">
     <code>appleCtrl.dirty: {{fruitsForm.controls.appleCtrl.dirty}}</code><br>
     <code>appleCtrl.value: {{fruitsForm.controls.appleCtrl.value.value}}</code><br>
     <code>appleCtrl.checked: {{fruitsForm.controls.appleCtrl.value.checked}}</code><br>