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

import ngModule from '../../module';
import Component from '../../lib/component';
import './style.scss';

/**
 * Basic element for user input. You can use this to supply a way for the user
 * to toggle an option.
 *
 * @property {String} label Label to display along the component
 * @property {any} field The value with which the element is linked
 * @property {Boolean} checked Whether the checkbox is checked
 * @property {Boolean} disabled Put component in disabled mode
 * @property {Boolean} tripleState Switch between three states when clicked
 * @property {Boolean} indeterminate Sets the element into indeterminate state
 * @property {String} info Shows a text information tooltip to the user
 */
export default class Controller extends Component {
    constructor($element, $, $attrs) {
        super($element, $);

        let element = this.element;
        element.addEventListener('click', e => this.onClick(e));
        element.addEventListener('keydown', e => this.onKeydown(e));
        element.tabIndex = 0;
    }

    set field(value) {
        this._field = value;
        this.element.classList.toggle('checked', Boolean(value));
        this.indeterminate = Boolean(value == null && this.tripleState);
    }

    get field() {
        return this._field;
    }

    set disabled(value) {
        this.element.tabIndex = !value ? 0 : -1;
        this.element.classList.toggle('disabled', Boolean(value));
        this._disabled = value;
    }

    get disabled() {
        return this._disabled;
    }

    set indeterminate(value) {
        this._indeterminate = value;
        this.element.classList.toggle('indeterminate', Boolean(value));
    }

    get indeterminate() {
        return this._indeterminate;
    }

    set tripleState(value) {
        this._tripleState = value;
        this.field = this.field;
    }

    get tripleState() {
        return this._tripleState;
    }

    onClick(event) {
        event.preventDefault();

        if (this.disabled) return;

        if (this.tripleState) {
            if (this.field == null)
                this.field = true;
            else if (this.field)
                this.field = false;
            else
                this.field = null;
        } else
            this.field = !this.field;

        this.$.$applyAsync();
        this.element.dispatchEvent(new Event('change'));
        this.emit('change', {value: this.field});
    }

    onKeydown(event) {
        if (event.code == 'Space')
            this.onClick(event);
    }
}

Controller.$inject = ['$element', '$scope', '$attrs'];

ngModule.component('vnCheck', {
    template: require('./index.html'),
    controller: Controller,

    bindings: {
        label: '@?',
        field: '=?',
        checked: '<?',
        disabled: '<?',
        tripleState: '<?',
        indeterminate: '<?',
        info: '@?'
    }
});