ngx-bootstrap
Version:
Native Angular Bootstrap Components
196 lines • 13.1 kB
JavaScript
/* tslint:disable:no-forward-ref max-file-line-count */
import { ChangeDetectionStrategy, ChangeDetectorRef, Component, EventEmitter, forwardRef, Input, Output } from '@angular/core';
import { NG_VALUE_ACCESSOR } from '@angular/forms';
import { TimepickerActions } from './reducer/timepicker.actions';
import { TimepickerStore } from './reducer/timepicker.store';
import { getControlsValue } from './timepicker-controls.util';
import { TimepickerConfig } from './timepicker.config';
import { isValidDate, padNumber, parseTime, isInputValid } from './timepicker.utils';
export var TIMEPICKER_CONTROL_VALUE_ACCESSOR = {
provide: NG_VALUE_ACCESSOR,
// tslint:disable-next-line
useExisting: forwardRef(function () { return TimepickerComponent; }),
multi: true
};
var TimepickerComponent = (function () {
function TimepickerComponent(_config, _cd, _store, _timepickerActions) {
var _this = this;
this._cd = _cd;
this._store = _store;
this._timepickerActions = _timepickerActions;
/** emits true if value is a valid date */
this.isValid = new EventEmitter();
// min\max validation for input fields
this.invalidHours = false;
this.invalidMinutes = false;
this.invalidSeconds = false;
// control value accessor methods
this.onChange = Function.prototype;
this.onTouched = Function.prototype;
Object.assign(this, _config);
// todo: add unsubscribe
_store
.select(function (state) { return state.value; })
.subscribe(function (value) {
// update UI values if date changed
_this._renderTime(value);
_this.onChange(value);
_this._store.dispatch(_this._timepickerActions.updateControls(getControlsValue(_this)));
});
_store
.select(function (state) { return state.controls; })
.subscribe(function (controlsState) {
_this.isValid.emit(isInputValid(_this.hours, _this.minutes, _this.seconds, _this.isPM()));
Object.assign(_this, controlsState);
_cd.markForCheck();
});
}
Object.defineProperty(TimepickerComponent.prototype, "isSpinnersVisible", {
get: function () {
return this.showSpinners && !this.readonlyInput;
},
enumerable: true,
configurable: true
});
TimepickerComponent.prototype.isPM = function () {
return this.showMeridian && this.meridian === this.meridians[1];
};
TimepickerComponent.prototype.prevDef = function ($event) {
$event.preventDefault();
};
TimepickerComponent.prototype.wheelSign = function ($event) {
return Math.sign($event.deltaY) * -1;
};
TimepickerComponent.prototype.ngOnChanges = function (changes) {
this._store.dispatch(this._timepickerActions.updateControls(getControlsValue(this)));
};
TimepickerComponent.prototype.changeHours = function (step, source) {
if (source === void 0) { source = ''; }
this._store.dispatch(this._timepickerActions.changeHours({ step: step, source: source }));
};
TimepickerComponent.prototype.changeMinutes = function (step, source) {
if (source === void 0) { source = ''; }
this._store.dispatch(this._timepickerActions.changeMinutes({ step: step, source: source }));
};
TimepickerComponent.prototype.changeSeconds = function (step, source) {
if (source === void 0) { source = ''; }
this._store.dispatch(this._timepickerActions.changeSeconds({ step: step, source: source }));
};
TimepickerComponent.prototype.updateHours = function (hours) {
this.hours = hours;
this._updateTime();
};
TimepickerComponent.prototype.updateMinutes = function (minutes) {
this.minutes = minutes;
this._updateTime();
};
TimepickerComponent.prototype.updateSeconds = function (seconds) {
this.seconds = seconds;
this._updateTime();
};
TimepickerComponent.prototype._updateTime = function () {
if (!isInputValid(this.hours, this.minutes, this.seconds, this.isPM())) {
this.onChange(null);
return;
}
this._store.dispatch(this._timepickerActions
.setTime({
hour: this.hours,
minute: this.minutes,
seconds: this.seconds,
isPM: this.isPM()
}));
};
TimepickerComponent.prototype.toggleMeridian = function () {
if (!this.showMeridian || this.readonlyInput) {
return;
}
var _hoursPerDayHalf = 12;
this._store.dispatch(this._timepickerActions.changeHours({ step: _hoursPerDayHalf, source: '' }));
};
/**
* Write a new value to the element.
*/
TimepickerComponent.prototype.writeValue = function (obj) {
if (isValidDate(obj)) {
this._store.dispatch(this._timepickerActions.writeValue(parseTime(obj)));
}
};
/**
* Set the function to be called when the control receives a change event.
*/
TimepickerComponent.prototype.registerOnChange = function (fn) {
this.onChange = fn;
};
/**
* Set the function to be called when the control receives a touch event.
*/
TimepickerComponent.prototype.registerOnTouched = function (fn) {
this.onTouched = fn;
};
/**
* This function is called when the control status changes to or from "DISABLED".
* Depending on the value, it will enable or disable the appropriate DOM element.
*
* @param isDisabled
*/
TimepickerComponent.prototype.setDisabledState = function (isDisabled) {
this.readonlyInput = isDisabled;
};
TimepickerComponent.prototype._renderTime = function (value) {
if (!isValidDate(value)) {
this.hours = '';
this.minutes = '';
this.seconds = '';
this.meridian = this.meridians[0];
return;
}
var _value = parseTime(value);
var _hoursPerDayHalf = 12;
var _hours = _value.getHours();
if (this.showMeridian) {
this.meridian = this.meridians[_hours >= _hoursPerDayHalf ? 1 : 0];
_hours = _hours % _hoursPerDayHalf;
// should be 12 PM, not 00 PM
if (_hours === 0) {
_hours = _hoursPerDayHalf;
}
}
this.hours = padNumber(_hours);
this.minutes = padNumber(_value.getMinutes());
this.seconds = padNumber(_value.getUTCSeconds());
};
TimepickerComponent.decorators = [
{ type: Component, args: [{
selector: 'timepicker',
changeDetection: ChangeDetectionStrategy.OnPush,
providers: [TIMEPICKER_CONTROL_VALUE_ACCESSOR, TimepickerStore],
template: "\n <table>\n <tbody>\n <tr class=\"text-center\" [class.hidden]=\"!isSpinnersVisible\">\n <!-- increment hours button-->\n <td>\n <a class=\"btn btn-link\" [class.disabled]=\"!canIncrementHours\"\n (click)=\"changeHours(hourStep)\">\n <span class=\"glyphicon glyphicon-chevron-up\"></span>\n </a>\n </td>\n <!-- divider -->\n <td> </td>\n <!-- increment minutes button -->\n <td>\n <a class=\"btn btn-link\" [class.disabled]=\"!canIncrementMinutes\"\n (click)=\"changeMinutes(minuteStep)\">\n <span class=\"glyphicon glyphicon-chevron-up\"></span>\n </a>\n </td>\n <!-- divider -->\n <td *ngIf=\"showSeconds\"> </td>\n <!-- increment seconds button -->\n <td *ngIf=\"showSeconds\">\n <a class=\"btn btn-link\" [class.disabled]=\"!canIncrementSeconds\"\n (click)=\"changeSeconds(secondsStep)\">\n <span class=\"glyphicon glyphicon-chevron-up\"></span>\n </a>\n </td>\n <!-- space between -->\n <td> </td>\n <!-- meridian placeholder-->\n <td *ngIf=\"showMeridian\"></td>\n </tr>\n <tr>\n <!-- hours -->\n <td class=\"form-group\" [class.has-error]=\"invalidHours\">\n <input type=\"text\" style=\"width:50px;\"\n class=\"form-control text-center\"\n placeholder=\"HH\"\n maxlength=\"2\"\n [readonly]=\"readonlyInput\"\n [value]=\"hours\"\n (wheel)=\"prevDef($event);changeHours(hourStep * wheelSign($event), 'wheel')\"\n (keydown.ArrowUp)=\"changeHours(hourStep, 'key')\"\n (keydown.ArrowDown)=\"changeHours(-hourStep, 'key')\"\n (change)=\"updateHours($event.target.value)\"></td>\n <!-- divider -->\n <td> : </td>\n <!-- minutes -->\n <td class=\"form-group\" [class.has-error]=\"invalidMinutes\">\n <input style=\"width:50px;\" type=\"text\"\n class=\"form-control text-center\"\n placeholder=\"MM\"\n maxlength=\"2\"\n [readonly]=\"readonlyInput\"\n [value]=\"minutes\"\n (wheel)=\"prevDef($event);changeMinutes(minuteStep * wheelSign($event), 'wheel')\"\n (keydown.ArrowUp)=\"changeMinutes(minuteStep, 'key')\"\n (keydown.ArrowDown)=\"changeMinutes(-minuteStep, 'key')\"\n (change)=\"updateMinutes($event.target.value)\">\n </td>\n <!-- divider -->\n <td *ngIf=\"showSeconds\"> : </td>\n <!-- seconds -->\n <td class=\"form-group\" *ngIf=\"showSeconds\" [class.has-error]=\"invalidSeconds\">\n <input style=\"width:50px;\" type=\"text\"\n class=\"form-control text-center\"\n placeholder=\"SS\"\n maxlength=\"2\"\n [readonly]=\"readonlyInput\"\n [value]=\"seconds\"\n (wheel)=\"prevDef($event);changeSeconds(secondsStep * wheelSign($event), 'wheel')\"\n (keydown.ArrowUp)=\"changeSeconds(secondsStep, 'key')\"\n (keydown.ArrowDown)=\"changeSeconds(-secondsStep, 'key')\"\n (change)=\"updateSeconds($event.target.value)\">\n </td>\n <!-- space between -->\n <td> </td>\n <!-- meridian -->\n <td *ngIf=\"showMeridian\">\n <button type=\"button\" class=\"btn btn-default text-center\"\n [disabled]=\"readonlyInput\"\n [class.disabled]=\"readonlyInput\"\n (click)=\"toggleMeridian()\">\n {{meridian}}\n </button>\n </td>\n </tr>\n <tr class=\"text-center\" [class.hidden]=\"!isSpinnersVisible\">\n <!-- decrement hours button-->\n <td>\n <a class=\"btn btn-link\" [class.disabled]=\"!canDecrementHours\" (click)=\"changeHours(-hourStep)\">\n <span class=\"glyphicon glyphicon-chevron-down\"></span>\n </a>\n </td>\n <!-- divider -->\n <td> </td>\n <!-- decrement minutes button-->\n <td>\n <a class=\"btn btn-link\" [class.disabled]=\"!canDecrementMinutes\" (click)=\"changeMinutes(-minuteStep)\">\n <span class=\"glyphicon glyphicon-chevron-down\"></span>\n </a>\n </td>\n <!-- divider -->\n <td *ngIf=\"showSeconds\"> </td>\n <!-- decrement seconds button-->\n <td *ngIf=\"showSeconds\">\n <a class=\"btn btn-link\" [class.disabled]=\"!canDecrementSeconds\" (click)=\"changeSeconds(-secondsStep)\">\n <span class=\"glyphicon glyphicon-chevron-down\"></span>\n </a>\n </td>\n <!-- space between -->\n <td> </td>\n <!-- meridian placeholder-->\n <td *ngIf=\"showMeridian\"></td>\n </tr>\n </tbody>\n </table>\n "
},] },
];
/** @nocollapse */
TimepickerComponent.ctorParameters = function () { return [
{ type: TimepickerConfig, },
{ type: ChangeDetectorRef, },
{ type: TimepickerStore, },
{ type: TimepickerActions, },
]; };
TimepickerComponent.propDecorators = {
'hourStep': [{ type: Input },],
'minuteStep': [{ type: Input },],
'secondsStep': [{ type: Input },],
'readonlyInput': [{ type: Input },],
'mousewheel': [{ type: Input },],
'arrowkeys': [{ type: Input },],
'showSpinners': [{ type: Input },],
'showMeridian': [{ type: Input },],
'showSeconds': [{ type: Input },],
'meridians': [{ type: Input },],
'min': [{ type: Input },],
'max': [{ type: Input },],
'isValid': [{ type: Output },],
};
return TimepickerComponent;
}());
export { TimepickerComponent };
//# sourceMappingURL=timepicker.component.js.map