salix/front/core/components/toggle/index.js

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: '<?'
    }
});