42 lines
1.1 KiB
JavaScript
42 lines
1.1 KiB
JavaScript
import ngModule from '../../module';
|
|
import FormInput from '../form-input';
|
|
import './style.scss';
|
|
|
|
/**
|
|
* Base component with common logic and styles for checkbox and radio button.
|
|
*
|
|
* @property {Boolean} checked Whether the checkbox is checked
|
|
*/
|
|
export default class Toggle extends FormInput {
|
|
constructor($element, $) {
|
|
super($element, $);
|
|
this.initTabIndex();
|
|
this.classList.add('vn-toggle');
|
|
this.element.addEventListener('click', e => this.onClick(e));
|
|
this.element.addEventListener('keydown', e => this.onKeydown(e));
|
|
}
|
|
|
|
onKeydown(event) {
|
|
if (!event.defaultPrevented && event.code == 'Space')
|
|
this.element.click();
|
|
}
|
|
|
|
onClick(event) {
|
|
if (!this.editable || event.defaultPrevented)
|
|
return true;
|
|
}
|
|
|
|
changed() {
|
|
this.$.$applyAsync();
|
|
this.element.dispatchEvent(new Event('change'));
|
|
this.emit('change', {value: this.field});
|
|
}
|
|
}
|
|
|
|
ngModule.vnComponent('vnToggle', {
|
|
controller: Toggle,
|
|
bindings: {
|
|
checked: '<?'
|
|
}
|
|
});
|