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;
    }

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

    /**
     * Decreases the input value
     */
    stepDown() {
        this.input.stepDown();
    }
}
InputNumber.$inject = ['$element', '$scope', '$attrs', 'vnTemplate'];

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