diff --git a/ionic/components/checkbox/checkbox.scss b/ionic/components/checkbox/checkbox.scss
index c41e4d0029..7131649925 100644
--- a/ionic/components/checkbox/checkbox.scss
+++ b/ionic/components/checkbox/checkbox.scss
@@ -11,10 +11,12 @@
.checkbox-on {
display: none;
+ pointer-events: none;
}
.checkbox-off {
display: block;
+ pointer-events: none;
}
.checkbox[aria-checked=true] {
diff --git a/ionic/components/checkbox/checkbox.ts b/ionic/components/checkbox/checkbox.ts
index 64ec7acaa2..8c6eb12ce6 100644
--- a/ionic/components/checkbox/checkbox.ts
+++ b/ionic/components/checkbox/checkbox.ts
@@ -1,117 +1,92 @@
-import {View, ElementRef, Renderer, EventEmitter, onChange, onInit} from 'angular2/angular2';
-import {isPresent} from 'angular2/src/facade/lang';
-import {setProperty} from 'angular2/src/forms/directives/shared'
-
-//pretty sure this has changed in the latest angular
-import {NgControl} from 'angular2/forms';
+import {
+ View,
+ Directive,
+ ElementRef,
+ Optional,
+ Parent,
+ NgControl
+} from 'angular2/angular2';
import {Ion} from '../ion';
import {IonicConfig} from '../../config/config';
-import {IonicComponent} from '../../config/annotations';
+import {IonicComponent, IonicView} from '../../config/annotations';
import {Icon} from '../icon/icon';
@IonicComponent({
selector: 'ion-checkbox',
- properties: [
- 'checked',
- 'disabled',
- 'value'
- ],
+ host: {
+ 'class': 'item',
+ '[attr.aria-checked]': 'checked'
+ },
defaultProperties: {
'iconOff': 'ion-ios-circle-outline',
'iconOn': 'ion-ios-checkmark'
- },
- //events: ['change'],
- host: {
- '(^click)': 'onClick($event)',
- //'(change)': 'onChange($event.checked)',
- '(blur)': 'onTouched()',
- //'[checked]': 'checked',
- '[attr.aria-checked]': 'checked',
- '[attr.aria-disabled]': 'disabled',
- '[attr.value]': 'value',
- 'role': 'checkbox',
- 'class': 'item',
- '[class.ng-untouched]': 'ngClassUntouched',
- '[class.ng-touched]': 'ngClassTouched',
- '[class.ng-pristine]': 'ngClassPristine',
- '[class.ng-dirty]': 'ngClassDirty',
- '[class.ng-valid]': 'ngClassValid',
- '[class.ng-invalid]': 'ngClassInvalid'
- },
- appInjector: [ NgControl ]
- //lifecycle: [onChange]
+ }
})
-@View({
- template: `
-
-
-
-
- `,
- directives: [Icon]
+@IonicView({
+ template:
+ '' +
+ '' +
+ '' +
+ '' +
+ '
' +
+ '' +
+ '
' +
+ '' +
+ '
' +
+ '
'
})
export class Checkbox extends Ion {
+
+ _checkbox: CheckboxInput;
+
constructor(
- ngControl: NgControl,
- renderer: Renderer,
elementRef: ElementRef,
ionicConfig: IonicConfig
) {
super(elementRef, ionicConfig);
-
- this.ngControl = ngControl;
- this.renderer = renderer;
- this.elementRef = elementRef;
- this.ngControl.valueAccessor = this;
-
- //this.change = new EventEmitter("change");
}
- /**
- * Much like ngModel, this is called from our valueAccessor for the attached
- * ControlDirective to update the value internally.
- */
- writeValue(value) {
- // Convert it to a boolean
- this.checked = !!value;
+ onAllChangesDone() {
+ // Enforce that this directive actually contains a checkbox
+ if (this._checkbox == null) {
+ throw 'No found inside of ';
+ }
}
- set checked(checked) {
- this._checked = checked;
- // doesn't trigger change/validation for control?
- setProperty(this.renderer, this.elementRef, "checked", checked);
- //this.ngControl.control.checked = checked;
- //this.change.next(checked);
- }
- get checked() {
- return this._checked
- }
- onClick() {
- this.checked = !this.checked;
+ registerCheckbox(checkboxDir) {
+ if (this._checkbox != null) {
+ throw 'Only one is allowed per '
+ }
+ this._checkbox = checkboxDir.elementRef.nativeElement;
+ this._checkboxDir = checkboxDir;
}
- get ngClassUntouched() {
- return isPresent(this.ngControl.control) ? this.ngControl.control.untouched : false;
- }
- get ngClassTouched() {
- return isPresent(this.ngControl.control) ? this.ngControl.control.touched : false;
- }
- get ngClassPristine() {
- return isPresent(this.ngControl.control) ? this.ngControl.control.pristine : false;
- }
- get ngClassDirty() { return isPresent(this.ngControl.control) ? this.ngControl.control.dirty : false; }
- get ngClassValid() { return isPresent(this.ngControl.control) ? this.ngControl.control.valid : false; }
- get ngClassInvalid() {
- return isPresent(this.ngControl.control) ? !this.ngControl.control.valid : false;
- }
+ onClick(e) {
+ let val = !this._checkbox.checked;
+ this._checkbox.checked = val;
+ this.checked = val;
- registerOnChange(fn): void { this.onChange = fn; }
- registerOnTouched(fn): void { this.onTouched = fn; }
+ //TODO figure out a way to trigger change on the actual input to trigger
+ // form updates
+ // this._checkbox.dispatchEvent(e);
+ //this._checkboxDir.control.valueAccessor.writeValue(val);
+ }
+}
+
+@Directive({
+ selector: 'input[type=checkbox]'
+})
+export class CheckboxInput {
+ constructor(
+ elementRef: ElementRef,
+ @Optional() @Parent() container: Checkbox,
+ @Optional() control: NgControl
+ ) {
+ this.elementRef = elementRef;
+ this.control = control ? control : null;
+ container && container.registerCheckbox(this);
+ }
}
diff --git a/ionic/components/checkbox/test/basic/index.ts b/ionic/components/checkbox/test/basic/index.ts
index 3c784fbcad..cce5ee7155 100644
--- a/ionic/components/checkbox/test/basic/index.ts
+++ b/ionic/components/checkbox/test/basic/index.ts
@@ -17,40 +17,12 @@ import {
import {App, Checkbox, Content, List} from 'ionic/ionic';
//import {IONIC_DIRECTIVES} from 'ionic/ionic'
-// @Component({
-// selector: 'checkbox-wrapper',
-// properties: [
-// 'ctrl'
-// ]
-// })
-// @View({ //TODO: Pass in component property as checkbox content?
-// template: `
-// {{ctrlname}}
-// `,
-// directives: [IonicApp, Checkbox, NgFormControl]
-// })
-// class CheckboxWrapper{
-// constructor(@Query(Checkbox, {descendants: true}) checkboxes: QueryList){
-// this.checkboxes = checkboxes;
-//
-// //doesn't work
-// this.checkboxes.onChange(this.onCheckboxChange);
-// setTimeout(() => console.log(this.ctrlname));
-//
-// //setTimeout(() => this.onCheckboxChange(), 3000);
-// }
-//
-// onCheckboxChange(val) {
-// debugger;
-// }
-// }
-
@App({
- templateUrl: 'main.html',
- directives: [Checkbox, List, Content, NgControlName, NgFormModel]
+ templateUrl: 'main.html'
})
class IonicApp {
constructor() {
+
// var fb = new FormBuilder();
// this.controls = {
// appleCtrl : ['', Validators.required],
@@ -62,15 +34,12 @@ class IonicApp {
// this.fruitsForm = fb.group(this.controls);
this.fruitsForm = new ControlGroup({
- "appleCtrl": new Control("APPLE", isChecked),
- "bananaCtrl": new Control("BANANA", isChecked),
- "grapeCtrl": new Control("GRAPE", isChecked),
- "cherryCtrl": new Control("CHERRY", isChecked)
+ "appleCtrl": new Control("", isChecked),
+ "bananaCtrl": new Control("", isChecked),
+ // "bananaCtrl": new Control("BANANA", isChecked),
+ // "grapeCtrl": new Control("GRAPE", isChecked),
+ // "cherryCtrl": new Control("CHERRY", isChecked)
});
- this.appleCtrl = "appleCtrl";
- this.bananaCtrl = "bananaCtrl";
- this.grapeCtrl = "grapeCtrl";
- this.cherryCtrl = "cherryCtrl";
function isChecked(ctrl) {
if (ctrl.checked) {
diff --git a/ionic/components/checkbox/test/basic/main.html b/ionic/components/checkbox/test/basic/main.html
index 2915588fca..ae2a54024a 100644
--- a/ionic/components/checkbox/test/basic/main.html
+++ b/ionic/components/checkbox/test/basic/main.html
@@ -1,20 +1,28 @@
+ appleCtrl.dirty: {{fruitsForm.controls.appleCtrl.dirty}}
+ appleCtrl.value: {{fruitsForm.controls.appleCtrl.value}}
+ apple.value: {{apple.value}}
+ apple.checked: {{apple.checked}}
+ bananaCtrl.dirty: {{fruitsForm.controls.bananaCtrl.dirty}}
+ bananaCtrl.value: {{fruitsForm.controls.bananaCtrl.value}}
+ banana.value: {{banana.value}}
+ banana.checked: {{banana.checked}}
diff --git a/ionic/config/annotations.ts b/ionic/config/annotations.ts
index fa184c880e..8a9f301660 100644
--- a/ionic/config/annotations.ts
+++ b/ionic/config/annotations.ts
@@ -11,7 +11,7 @@ import {
List, Item, ItemGroup, ItemGroupTitle,
Toolbar,
Icon,
- Checkbox, Switch,
+ Checkbox, CheckboxInput, Switch,
Input, TextInput, Label,
Segment, SegmentButton, SegmentControlValueAccessor,
RadioGroup, RadioButton, SearchBar,
@@ -55,6 +55,8 @@ export const IonicDirectives = [
forwardRef(() => Segment),
forwardRef(() => SegmentButton),
forwardRef(() => SegmentControlValueAccessor),
+ forwardRef(() => Checkbox),
+ forwardRef(() => CheckboxInput),
//Checkbox, Switch
//RadioGroup, RadioButton, SearchBar,