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.validateValue();

            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.hasValue = !(value === null || value === undefined || value === '');

        if (!this.hasOwnProperty('_value') && this.hasValue || value === '')
            this.input.value = value;

        this._value = value;

        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) 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) {
        if (value) this.input.step = value;
    }

    get validationError() {
        return this.input.validationMessage;
    }

    /**
     * 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.hideError();
            this.showError();
        } else
            this.hideError();
    }

    /**
     * Shows the input validation error
     */
    showError() {
        const infixElement = this.element.querySelector('.infix');
        const infixClassList = infixElement.classList;

        const errorSpan = document.createElement('span');
        errorSpan.className = 'mdl-textfield__error';

        const errorText = document.createTextNode(this.validationError);

        errorSpan.append(errorText);
        infixElement.append(errorSpan);

        infixClassList.add('validated', 'invalid');
    }

    /**
     * Hides the input validation error
     */
    hideError() {
        const infixElement = this.element.querySelector('.infix');
        const infixClassList = infixElement.classList;
        const errorElement = this.element.querySelector('.infix span.mdl-textfield__error');

        if (errorElement)
            errorElement.remove();

        infixClassList.remove('validated', 'invalid');
    }
}

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

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