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

162 lines
3.2 KiB
JavaScript

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) 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();
}
/**
* 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: '&'
}
});