f3b49378e4
fixes #2268 BREAKING CHANGE: Before @Directive({ hostListeners: {'event': 'statement'}, hostProperties: {'expression': 'hostProp'}, hostAttributes: {'attr': 'value'}, hostActions: {'action': 'statement'} }) After @Directive({ host: { '(event)': 'statement', '[hostProp]': 'expression' // k & v swapped 'attr': 'value', '@action': 'statement' } })
60 lines
1.5 KiB
TypeScript
60 lines
1.5 KiB
TypeScript
import {Component, View, Attribute} from 'angular2/angular2';
|
|
import {isPresent} from 'angular2/src/facade/lang';
|
|
import {KEY_SPACE} from 'angular2_material/src/core/constants';
|
|
import {KeyboardEvent} from 'angular2/src/facade/browser';
|
|
import {NumberWrapper} from 'angular2/src/facade/lang';
|
|
|
|
// TODO(jelbourn): without gesture support, this is identical to MdCheckbox.
|
|
|
|
@Component({
|
|
selector: 'md-switch',
|
|
properties: ['checked', 'disabled'],
|
|
host: {
|
|
'(keydown)': 'onKeydown($event)',
|
|
'[attr.aria-checked]': 'checked',
|
|
'[attr.aria-disabled]': 'disabled_',
|
|
'[attr.role]': 'role'
|
|
}
|
|
})
|
|
@View({templateUrl: 'angular2_material/src/components/switcher/switch.html', directives: []})
|
|
export class MdSwitch {
|
|
/** Whether this switch is checked. */
|
|
checked: boolean;
|
|
|
|
/** Whether this switch is disabled. */
|
|
disabled_: boolean;
|
|
|
|
tabindex: number;
|
|
role: string;
|
|
|
|
constructor(@Attribute('tabindex') tabindex: string) {
|
|
this.role = 'checkbox';
|
|
this.checked = false;
|
|
this.tabindex = isPresent(tabindex) ? NumberWrapper.parseInt(tabindex, 10) : 0;
|
|
}
|
|
|
|
get disabled() {
|
|
return this.disabled_;
|
|
}
|
|
|
|
set disabled(value) {
|
|
this.disabled_ = isPresent(value) && value !== false;
|
|
}
|
|
|
|
onKeydown(event: KeyboardEvent) {
|
|
if (event.keyCode === KEY_SPACE) {
|
|
event.preventDefault();
|
|
this.toggle(event);
|
|
}
|
|
}
|
|
|
|
toggle(event) {
|
|
if (this.disabled) {
|
|
event.stopPropagation();
|
|
return;
|
|
}
|
|
|
|
this.checked = !this.checked;
|
|
}
|
|
}
|