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

import ngModule from '../../module';
import Input from '../../lib/input';
import './style.scss';

export default class InputNumber extends Input {
    constructor($element, $scope, $attrs, vnTemplate) {
        super($element, $scope);
        this.displayControls = false;
        this.hasFocus = false;

        vnTemplate.normalizeInputAttrs($attrs);

        this.registerEvents();
    }

    /**
     * Registers all event emitters
     */
    registerEvents() {
        this.input.addEventListener('change', event => {
            if (!isNaN(this.value))
                this.input.value = this.value;

            this.emit('change', {event});
        });

        this.input.addEventListener('focus', event => {
            this.emit('focus', {event});
        });
    }

    /**
     * Gets current value
     */
    get value() {
        return this._value;
    }

    /**
     * Sets input value
     *
     * @param {Number} value - 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.validateValue();
    }

    /**
     * Gets max value
     */
    get max() {
        return this.input.max;
    }

    /**
     * Sets max allowed value
     *
     * @param {Number} value - Value
     */
    set max(value) {
        if (value) this.input.max = value;
    }

    /**
     * Gets min value
     */
    get min() {
        return this.input.min;
    }

    /**
     * Sets min allowed value
     *
     * @param {Number} value - Value
     */
    set min(value) {
        if (!value) value = 0;
        this.input.min = value;
    }

    /**
     * Gets min step value
     */
    get step() {
        return parseFloat(this.input.step);
    }

    /**
     * Sets min step value
     *
     * @param {Number} value - Value
     */
    set step(value) {
        this.input.step = value;
    }

    /**
     * Increases the input value
     */
    stepUp() {
        this.input.stepUp();
    }

    /**
     * Decreases the input value
     */
    stepDown() {
        this.input.stepDown();
    }

    /**
     * Validates a valid input value
     *
     * @return {Boolean} - True if has a valid value
     */
    hasValidValue() {
        return this.input.checkValidity();
    }

    /**
     * Changes the input element
     * if has a validation error
     */
    validateValue() {
        if (!this.hasValidValue()) {
            this.element.querySelector('.infix')
                .classList.add('invalid', 'validated');
        } else {
            this.element.querySelector('.infix')
                .classList.remove('invalid', 'validated');
        }
    }
}

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

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