salix/front/core/components/input-number/index.js

import ngModule from '../../module';
import Textfield from '../textfield/textfield';
import './style.scss';

export default class InputNumber extends Textfield {

    constructor($element, $scope, $attrs, vnTemplate, $transclude) {
        super($element, $scope, $attrs, vnTemplate, $transclude);

        this.input.addEventListener('change', () => {
            this.validateValue();
        });
    }

    get value() {
        return this._value;
    }

    set value(value) {
        this._value = value;
        this.hasValue = this._value !== null;

        if (this.hasValue) this.element.classList.add('not-empty');
        else this.element.classList.remove('not-empty');

        this.element.querySelector('.infix').classList.remove('invalid', 'validated');
    }

    get max() {
        return this.input.max;
    }

    set max(value) {
        if (value)
            this.input.max = value;
    }

    get min() {
        return this.input.min;
    }

    set min(value) {
        if (!value) value = 0;
        this.input.min = value;
    }

    get step() {
        return parseFloat(this.input.step);
    }

    set step(value) {
        this.input.step = value;
    }

    validateValue() {
        if ((this.validate() !== undefined && !this.validate()) ||
            (this.max && this.value > this.max) ||
            (this.min && this.value < this.min) ||
            (this.step && this.value % this.step != 0)) {
            this.$element[0].querySelector('.infix').classList.add('invalid', 'validated');
        }

        if (this.onChange)
            this.onChange();
    }

    add() {
        if (this.step && this.value % this.step != 0) {
            this.value += (this.step - this.value % this.step);
        } else {
            this.value += this.step;
        }

        this.validateValue();
    }

    remove() {
        if (this.step && this.value % this.step != 0) {
            this.value -= (this.step + this.value % this.step);
        } else {
            this.value -= this.step;
        }
        this.validateValue();
    }
}

InputNumber.$inject = ['$element', '$scope', '$attrs', 'vnTemplate', '$transclude'];

ngModule.component('vnInputNumber', {
    template: require('./index.html'),
    controller: InputNumber,
    bindings: {
        label: '@?',
        disabled: '<?',
        min: '<?',
        max: '<?',
        step: '<?',
        rule: '@?',
        value: '=model',
        validate: '&',
        onChange: '&',
        onClear: '&'
    }
});