2018-09-19 13:05:07 +00:00
|
|
|
import ngModule from '../../module';
|
2019-04-02 09:02:59 +00:00
|
|
|
import Input from '../../lib/input';
|
2018-09-19 13:05:07 +00:00
|
|
|
import './style.scss';
|
|
|
|
|
2019-04-02 09:02:59 +00:00
|
|
|
export default class InputTime extends Input {
|
2019-04-11 05:29:41 +00:00
|
|
|
constructor($element, $scope) {
|
|
|
|
super($element, $scope);
|
|
|
|
|
|
|
|
this.registerEvents();
|
|
|
|
}
|
|
|
|
|
|
|
|
/**
|
|
|
|
* Registers all event emitters
|
|
|
|
*/
|
|
|
|
registerEvents() {
|
|
|
|
this.input.addEventListener('change', event => {
|
|
|
|
this.emit('change', {event});
|
|
|
|
});
|
|
|
|
|
|
|
|
this.input.addEventListener('focus', event => {
|
|
|
|
this.emit('focus', {event});
|
|
|
|
});
|
|
|
|
}
|
|
|
|
|
|
|
|
/**
|
|
|
|
* Gets current value
|
|
|
|
*/
|
2019-03-26 11:21:29 +00:00
|
|
|
get value() {
|
|
|
|
return this._value;
|
2019-03-15 06:40:45 +00:00
|
|
|
}
|
|
|
|
|
2019-04-11 05:29:41 +00:00
|
|
|
/**
|
|
|
|
* Sets input value
|
|
|
|
*
|
|
|
|
* @param {Number} value - Value
|
|
|
|
*/
|
2018-09-19 13:05:07 +00:00
|
|
|
set value(value) {
|
2019-04-11 05:29:41 +00:00
|
|
|
if (this._value === undefined && value || typeof value === 'string')
|
|
|
|
value = this.formatTime(value);
|
|
|
|
|
|
|
|
this._value = value;
|
|
|
|
this.hasValue = !(value === null || value === undefined);
|
|
|
|
|
|
|
|
if (this.hasValue)
|
|
|
|
this.element.classList.add('not-empty');
|
|
|
|
else
|
|
|
|
this.element.classList.remove('not-empty');
|
|
|
|
}
|
2018-09-24 08:43:54 +00:00
|
|
|
|
2019-04-11 05:29:41 +00:00
|
|
|
/**
|
|
|
|
* Gets max value
|
|
|
|
*/
|
|
|
|
get max() {
|
|
|
|
return this.input.max;
|
|
|
|
}
|
2019-04-02 09:02:59 +00:00
|
|
|
|
2019-04-11 05:29:41 +00:00
|
|
|
/**
|
|
|
|
* Sets max allowed value
|
|
|
|
*
|
|
|
|
* @param {Number} value - Value
|
|
|
|
*/
|
|
|
|
set max(value) {
|
|
|
|
if (value) this.input.max = value;
|
|
|
|
}
|
2018-09-19 13:05:07 +00:00
|
|
|
|
2019-04-11 05:29:41 +00:00
|
|
|
/**
|
|
|
|
* Gets min value
|
|
|
|
*/
|
|
|
|
get min() {
|
|
|
|
return this.input.min;
|
|
|
|
}
|
2018-09-19 13:05:07 +00:00
|
|
|
|
2019-04-11 05:29:41 +00:00
|
|
|
/**
|
|
|
|
* Sets min allowed value
|
|
|
|
*
|
|
|
|
* @param {Number} value - Value
|
|
|
|
*/
|
|
|
|
set min(value) {
|
|
|
|
if (value) this.input.min = value;
|
2018-09-19 13:05:07 +00:00
|
|
|
}
|
|
|
|
|
2019-04-11 05:29:41 +00:00
|
|
|
/**
|
|
|
|
* Gets min step value
|
|
|
|
*/
|
2018-09-19 13:05:07 +00:00
|
|
|
get step() {
|
2019-04-11 05:29:41 +00:00
|
|
|
return this.input.step;
|
2018-09-19 13:05:07 +00:00
|
|
|
}
|
|
|
|
|
2019-04-11 05:29:41 +00:00
|
|
|
/**
|
|
|
|
* Sets min step value
|
|
|
|
*
|
|
|
|
* @param {Number} value - Value
|
|
|
|
*/
|
2018-09-19 13:05:07 +00:00
|
|
|
set step(value) {
|
2019-04-11 05:29:41 +00:00
|
|
|
if (value) this.input.step = value;
|
|
|
|
}
|
|
|
|
|
|
|
|
/**
|
|
|
|
* Returns a formatted hour
|
|
|
|
* @param {Date} date -a
|
|
|
|
* @return {String} Formatted hour
|
|
|
|
*/
|
|
|
|
formatTime(date) {
|
|
|
|
if (typeof date === 'string') {
|
|
|
|
date = new Date(date);
|
|
|
|
date.setTime(date.getTime() + (date.getTimezoneOffset() * 60000));
|
|
|
|
}
|
|
|
|
|
|
|
|
date.setSeconds(null);
|
|
|
|
date.setMilliseconds(null);
|
|
|
|
|
|
|
|
return date;
|
2018-09-19 13:05:07 +00:00
|
|
|
}
|
|
|
|
}
|
|
|
|
|
2018-09-24 08:43:54 +00:00
|
|
|
InputTime.$inject = ['$element', '$scope', '$attrs', 'vnTemplate', '$transclude'];
|
2018-09-19 13:05:07 +00:00
|
|
|
|
|
|
|
ngModule.component('vnInputTime', {
|
|
|
|
template: require('./index.html'),
|
|
|
|
controller: InputTime,
|
|
|
|
transclude: {
|
|
|
|
leftIcons: '?tLeftIcons',
|
|
|
|
rightIcons: '?tRightIcons'
|
|
|
|
},
|
|
|
|
bindings: {
|
|
|
|
label: '@?',
|
|
|
|
disabled: '<?',
|
|
|
|
readonly: '<?',
|
|
|
|
step: '<?',
|
2019-04-11 05:29:41 +00:00
|
|
|
min: '<?',
|
|
|
|
max: '<?',
|
2018-09-19 13:05:07 +00:00
|
|
|
rule: '@?',
|
|
|
|
value: '=model',
|
|
|
|
vnTabIndex: '@?',
|
|
|
|
onChange: '&',
|
|
|
|
onClear: '&'
|
|
|
|
}
|
|
|
|
});
|