162 lines
3.2 KiB
JavaScript
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: '&'
|
|
}
|
|
});
|