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

import ngModule from '../../module';
import Toggle from '../toggle';
import './style.scss';

/**
 * Basic element for user input. You can use this to supply a way for the user
 * to toggle an option.
 *
 * @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 Check extends Toggle {
    set field(value) {
        super.field = value;
        this.element.classList.toggle('checked', Boolean(value));
        this.indeterminate = Boolean(value == null && this.tripleState);
    }

    get field() {
        return super.field;
    }

    set checked(value) {
        this.field = Boolean(value);
    }

    get checked() {
        return Boolean(this.field);
    }

    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) {
        if (super.onClick(event)) 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.changed();
    }
}

ngModule.vnComponent('vnCheck', {
    template: require('./index.html'),
    controller: Check,
    bindings: {
        tripleState: '<?',
        indeterminate: '<?',
        info: '@?'
    }
});