checkbox updates

ionic/components/button/button.ts

@@ -34,7 +34,7 @@ export class TapDisabled {}
 
 
 @Directive({
-  selector: 'a,button,[tappable]',
+  selector: 'button,[button],[tappable],ion-checkbox',
   host: {
     '(^touchstart)': 'touchStart($event)',
     '(^touchend)': 'touchEnd($event)',
@@ -143,14 +143,21 @@ export class TapClick {
     });
   }
 
-  click(ev) {
+  allowClick(ev) {
     if (!ev.isIonicTap) {
       if (this.disableClick || !this.start) {
+        return false;
+      }
+    }
+    return true;
+  }
+
+  click(ev) {
+    if (!this.allowClick(ev)) {
       ev.preventDefault();
       ev.stopPropagation();
     }
   }
-  }
 
   onDestroy() {
     this.ele = null;

ionic/components/checkbox/checkbox.scss

@@ -10,14 +10,7 @@
 }
 
 .checkbox input {
-  position: absolute;
+  display: none;
-  width: 0;
-  height: 0;
-  margin: 0;
-  padding: 0;
-  opacity: 0;
-  border: none;
-  @include appearance(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,
+    @Optional() cd: NgControl,
-    renderer: Renderer,
     elementRef: ElementRef,
-    config: IonicConfig
+    config: IonicConfig,
+    tapClick: TapClick
   ) {
     super(elementRef, config);
     this.onChange = (_) => {};
     this.onTouched = (_) => {};
-    this.renderer = renderer;
+    this.tapClick = tapClick;
-    this.elementRef = elementRef;
     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")
+    this.labelId = 'label-' + this.id;
-  }
-
-  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});
   }
 
   // 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>
+        Apple
-        <input checked type="checkbox">
       </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>

ionic/components/form/tap-input.ts

@@ -10,12 +10,15 @@ import {RadioButton} from '../radio/radio';
 
 @Directive({
   selector: 'input[type=checkbox],input[type=radio]',
-  properties: [ 'checked', 'name', 'value' ],
+  properties: [
+    'checked',
+    'name',
+    'value'
+  ],
   host: {
     '[checked]': 'checked',
     '[value]': 'value',
     '[attr.name]': 'name',
-    '(change)': 'toggle()',
     'class': 'tap-input input'
   }
 })
@@ -43,15 +46,4 @@ export class TapInput extends IonInput {
     this.tabIndex = this.tabIndex || '';
   }
 
-  onInit() {
-    console.log("tapinput oninit, " + this.id + " checked: " + this.checked);
-    console.log("tapinput oninit, " + this.id + " value: " + this.value);
-  }
-
-  //to detect switching/selecting inputs with the keyboard
-  //view -> model (Control)
-  toggle() {
-    this.container && this.container.toggle(this);
-  }
-
 }

ionic/components/item/item.scss

@@ -50,6 +50,7 @@ button.item.item {
     min-width: 26px;
     text-align: center;
   }
+
   icon[small]:first-child {
     min-width: 18px;
   }
@@ -58,6 +59,11 @@ button.item.item {
     background-color: #d9d9d9;
   }
 
+  transition: background 300ms ease-out;
+  &:active {
+    transition-duration: 0s;
+  }
+
 }
 
 .list .item.item {