ngx-bootstrap
Version:
Native Angular Bootstrap Components
288 lines • 16 kB
JavaScript
import { ChangeDetectionStrategy, ChangeDetectorRef, Component, EventEmitter, forwardRef, Input, Output, ViewEncapsulation } 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, isHourInputValid, isMinuteInputValid, isSecondInputValid, isInputLimitValid } 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 = /** @class */ (function () {
function TimepickerComponent(_config, _cd, _store, _timepickerActions) {
var _this = this;
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);
this.timepickerSub = _store
.select(function (state) { return state.value; })
.subscribe(function (value) {
// update UI values if date changed
// 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", {
/** @deprecated - please use `isEditable` instead */
get: /** @deprecated - please use `isEditable` instead */
function () {
return this.showSpinners && !this.readonlyInput;
},
enumerable: true,
configurable: true
});
Object.defineProperty(TimepickerComponent.prototype, "isEditable", {
get: function () {
return !(this.readonlyInput || this.disabled);
},
enumerable: true,
configurable: true
});
TimepickerComponent.prototype.resetValidation = function () {
this.invalidHours = false;
this.invalidMinutes = false;
this.invalidSeconds = false;
};
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.resetValidation();
this._store.dispatch(this._timepickerActions.changeHours({ step: step, source: source }));
};
TimepickerComponent.prototype.changeMinutes = function (step, source) {
if (source === void 0) { source = ''; }
this.resetValidation();
this._store.dispatch(this._timepickerActions.changeMinutes({ step: step, source: source }));
};
TimepickerComponent.prototype.changeSeconds = function (step, source) {
if (source === void 0) { source = ''; }
this.resetValidation();
this._store.dispatch(this._timepickerActions.changeSeconds({ step: step, source: source }));
};
TimepickerComponent.prototype.updateHours = function (hours) {
this.resetValidation();
this.hours = hours;
var isValid = isHourInputValid(this.hours, this.isPM()) && this.isValidLimit();
if (!isValid) {
this.invalidHours = true;
this.isValid.emit(false);
this.onChange(null);
return;
}
this._updateTime();
};
TimepickerComponent.prototype.updateMinutes = function (minutes) {
this.resetValidation();
this.minutes = minutes;
var isValid = isMinuteInputValid(this.minutes) && this.isValidLimit();
if (!isValid) {
this.invalidMinutes = true;
this.isValid.emit(false);
this.onChange(null);
return;
}
this._updateTime();
};
TimepickerComponent.prototype.updateSeconds = function (seconds) {
this.resetValidation();
this.seconds = seconds;
var isValid = isSecondInputValid(this.seconds) && this.isValidLimit();
if (!isValid) {
this.invalidSeconds = true;
this.isValid.emit(false);
this.onChange(null);
return;
}
this._updateTime();
};
TimepickerComponent.prototype.isValidLimit = function () {
return isInputLimitValid({
hour: this.hours,
minute: this.minutes,
seconds: this.seconds,
isPM: this.isPM()
}, this.max, this.min);
};
TimepickerComponent.prototype._updateTime = function () {
var _seconds = this.showSeconds ? this.seconds : void 0;
var _minutes = this.showMinutes ? this.minutes : void 0;
if (!isInputValid(this.hours, _minutes, _seconds, this.isPM())) {
this.isValid.emit(false);
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.isEditable) {
return;
}
var _hoursPerDayHalf = 12;
this._store.dispatch(this._timepickerActions.changeHours({
step: _hoursPerDayHalf,
source: ''
}));
};
/**
* Write a new value to the element.
*/
/**
* Write a new value to the element.
*/
TimepickerComponent.prototype.writeValue = /**
* Write a new value to the element.
*/
function (obj) {
if (isValidDate(obj)) {
this._store.dispatch(this._timepickerActions.writeValue(parseTime(obj)));
}
else if (obj == null) {
this._store.dispatch(this._timepickerActions.writeValue(null));
}
};
/**
* Set the function to be called when the control receives a change event.
*/
/**
* Set the function to be called when the control receives a change event.
*/
TimepickerComponent.prototype.registerOnChange = /**
* Set the function to be called when the control receives a change event.
*/
function (fn) {
this.onChange = fn;
};
/**
* Set the function to be called when the control receives a touch event.
*/
/**
* Set the function to be called when the control receives a touch event.
*/
TimepickerComponent.prototype.registerOnTouched = /**
* Set the function to be called when the control receives a touch event.
*/
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
*/
/**
* 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 = /**
* 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
*/
function (isDisabled) {
this.disabled = isDisabled;
};
TimepickerComponent.prototype.ngOnDestroy = function () {
this.timepickerSub.unsubscribe();
};
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: "<table> <tbody> <tr class=\"text-center\" [hidden]=\"!showSpinners\"> <!-- increment hours button--> <td> <a class=\"btn btn-link\" [class.disabled]=\"!canIncrementHours || !isEditable\" (click)=\"changeHours(hourStep)\" ><span class=\"bs-chevron bs-chevron-up\"></span></a> </td> <!-- divider --> <td *ngIf=\"showMinutes\"> </td> <!-- increment minutes button --> <td *ngIf=\"showMinutes\"> <a class=\"btn btn-link\" [class.disabled]=\"!canIncrementMinutes || !isEditable\" (click)=\"changeMinutes(minuteStep)\" ><span class=\"bs-chevron bs-chevron-up\"></span></a> </td> <!-- divider --> <td *ngIf=\"showSeconds\"> </td> <!-- increment seconds button --> <td *ngIf=\"showSeconds\"> <a class=\"btn btn-link\" [class.disabled]=\"!canIncrementSeconds || !isEditable\" (click)=\"changeSeconds(secondsStep)\"> <span class=\"bs-chevron bs-chevron-up\"></span> </a> </td> <!-- space between --> <td *ngIf=\"showMeridian\"> </td> <!-- meridian placeholder--> <td *ngIf=\"showMeridian\"></td> </tr> <tr> <!-- hours --> <td class=\"form-group\" [class.has-error]=\"invalidHours\"> <input type=\"text\" [class.is-invalid]=\"invalidHours\" class=\"form-control text-center bs-timepicker-field\" placeholder=\"HH\" maxlength=\"2\" [readonly]=\"readonlyInput\" [disabled]=\"disabled\" [value]=\"hours\" (wheel)=\"prevDef($event);changeHours(hourStep * wheelSign($event), 'wheel')\" (keydown.ArrowUp)=\"changeHours(hourStep, 'key')\" (keydown.ArrowDown)=\"changeHours(-hourStep, 'key')\" (change)=\"updateHours($event.target.value)\"></td> <!-- divider --> <td *ngIf=\"showMinutes\"> : </td> <!-- minutes --> <td class=\"form-group\" *ngIf=\"showMinutes\" [class.has-error]=\"invalidMinutes\"> <input type=\"text\" [class.is-invalid]=\"invalidMinutes\" class=\"form-control text-center bs-timepicker-field\" placeholder=\"MM\" maxlength=\"2\" [readonly]=\"readonlyInput\" [disabled]=\"disabled\" [value]=\"minutes\" (wheel)=\"prevDef($event);changeMinutes(minuteStep * wheelSign($event), 'wheel')\" (keydown.ArrowUp)=\"changeMinutes(minuteStep, 'key')\" (keydown.ArrowDown)=\"changeMinutes(-minuteStep, 'key')\" (change)=\"updateMinutes($event.target.value)\"> </td> <!-- divider --> <td *ngIf=\"showSeconds\"> : </td> <!-- seconds --> <td class=\"form-group\" *ngIf=\"showSeconds\" [class.has-error]=\"invalidSeconds\"> <input type=\"text\" [class.is-invalid]=\"invalidSeconds\" class=\"form-control text-center bs-timepicker-field\" placeholder=\"SS\" maxlength=\"2\" [readonly]=\"readonlyInput\" [disabled]=\"disabled\" [value]=\"seconds\" (wheel)=\"prevDef($event);changeSeconds(secondsStep * wheelSign($event), 'wheel')\" (keydown.ArrowUp)=\"changeSeconds(secondsStep, 'key')\" (keydown.ArrowDown)=\"changeSeconds(-secondsStep, 'key')\" (change)=\"updateSeconds($event.target.value)\"> </td> <!-- space between --> <td *ngIf=\"showMeridian\"> </td> <!-- meridian --> <td *ngIf=\"showMeridian\"> <button type=\"button\" class=\"btn btn-default text-center\" [disabled]=\"!isEditable || !canToggleMeridian\" [class.disabled]=\"!isEditable || !canToggleMeridian\" (click)=\"toggleMeridian()\" >{{ meridian }} </button> </td> </tr> <tr class=\"text-center\" [hidden]=\"!showSpinners\"> <!-- decrement hours button--> <td> <a class=\"btn btn-link\" [class.disabled]=\"!canDecrementHours || !isEditable\" (click)=\"changeHours(-hourStep)\"> <span class=\"bs-chevron bs-chevron-down\"></span> </a> </td> <!-- divider --> <td *ngIf=\"showMinutes\"> </td> <!-- decrement minutes button--> <td *ngIf=\"showMinutes\"> <a class=\"btn btn-link\" [class.disabled]=\"!canDecrementMinutes || !isEditable\" (click)=\"changeMinutes(-minuteStep)\"> <span class=\"bs-chevron bs-chevron-down\"></span> </a> </td> <!-- divider --> <td *ngIf=\"showSeconds\"> </td> <!-- decrement seconds button--> <td *ngIf=\"showSeconds\"> <a class=\"btn btn-link\" [class.disabled]=\"!canDecrementSeconds || !isEditable\" (click)=\"changeSeconds(-secondsStep)\"> <span class=\"bs-chevron bs-chevron-down\"></span> </a> </td> <!-- space between --> <td *ngIf=\"showMeridian\"> </td> <!-- meridian placeholder--> <td *ngIf=\"showMeridian\"></td> </tr> </tbody> </table> ",
styles: ["\n .bs-chevron {\n border-style: solid;\n display: block;\n width: 9px;\n height: 9px;\n position: relative;\n border-width: 3px 0px 0 3px;\n }\n\n .bs-chevron-up {\n -webkit-transform: rotate(45deg);\n transform: rotate(45deg);\n top: 2px;\n }\n\n .bs-chevron-down {\n -webkit-transform: rotate(-135deg);\n transform: rotate(-135deg);\n top: -2px;\n }\n\n .bs-timepicker-field {\n width: 50px;\n }\n "],
encapsulation: ViewEncapsulation.None
},] },
];
/** @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 },],
"disabled": [{ type: Input },],
"mousewheel": [{ type: Input },],
"arrowkeys": [{ type: Input },],
"showSpinners": [{ type: Input },],
"showMeridian": [{ type: Input },],
"showMinutes": [{ 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