mirror of
https://github.com/ionic-team/ionic-framework.git
synced 2025-08-18 19:21:34 +08:00
88 lines
2.1 KiB
TypeScript
88 lines
2.1 KiB
TypeScript
import {
|
|
View,
|
|
Directive,
|
|
ElementRef,
|
|
Optional,
|
|
Parent,
|
|
NgControl
|
|
} from 'angular2/angular2';
|
|
|
|
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';
|
|
|
|
|
|
@IonicComponent({
|
|
selector: 'ion-checkbox',
|
|
host: {
|
|
'[class.item]': 'item',
|
|
'[attr.aria-checked]': 'input.checked',
|
|
// '(^click)': 'onClick($event)'
|
|
},
|
|
defaultProperties: {
|
|
'iconOff': 'ion-ios-circle-outline',
|
|
'iconOn': 'ion-ios-checkmark'
|
|
}
|
|
})
|
|
@IonicView({
|
|
template:
|
|
'<div class="item-media media-checkbox">' +
|
|
'<icon [name]="iconOff" class="checkbox-off"></icon>' +
|
|
'<icon [name]="iconOn" class="checkbox-on"></icon>' +
|
|
'</div>' +
|
|
'<div class="item-content">' +
|
|
'<content></content>' +
|
|
'</div>'
|
|
})
|
|
export class Checkbox extends IonInputItem {
|
|
constructor(
|
|
elementRef: ElementRef,
|
|
config: IonicConfig
|
|
) {
|
|
super(elementRef, config);
|
|
this.item = true;
|
|
}
|
|
|
|
// onClick(ev) {
|
|
// debugger
|
|
// // toggling with spacebar fires mouse event
|
|
// if (ev.target.tagName === "INPUT") return;
|
|
//
|
|
// this.input.checked = !this.input.checked;
|
|
//
|
|
// //TODO trigger change/mouse event on the actual input to trigger
|
|
// // form updates
|
|
//
|
|
// // this._checkbox.dispatchEvent(e);
|
|
// //this._checkboxDir.control.valueAccessor.writeValue(val);
|
|
// }
|
|
|
|
onChangeEvent(input) {
|
|
//TODO can we just assume this will always be true?
|
|
this.input.checked = this.input.elementRef.nativeElement.checked;
|
|
}
|
|
|
|
focus() {
|
|
let mouseClick = new MouseEvent("click", {
|
|
bubbles: true,
|
|
cancelable: true,
|
|
});
|
|
this.input && this.input.elementRef.nativeElement.dispatchEvent(mouseClick);
|
|
}
|
|
}
|
|
|
|
|
|
// 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);
|
|
// }
|
|
// }
|