ngx-bootstrap
Version:
Angular Bootstrap
806 lines (795 loc) • 48.3 kB
JavaScript
import * as i0 from '@angular/core';
import { Injectable, forwardRef, input, output, ViewEncapsulation, ChangeDetectionStrategy, Component, NgModule } from '@angular/core';
import { NG_VALUE_ACCESSOR } from '@angular/forms';
import { BehaviorSubject } from 'rxjs';
import { MiniStore, MiniState } from 'ngx-bootstrap/mini-ngrx';
class TimepickerActions {
static { this.WRITE_VALUE = '[timepicker] write value from ng model'; }
static { this.CHANGE_HOURS = '[timepicker] change hours'; }
static { this.CHANGE_MINUTES = '[timepicker] change minutes'; }
static { this.CHANGE_SECONDS = '[timepicker] change seconds'; }
static { this.SET_TIME_UNIT = '[timepicker] set time unit'; }
static { this.UPDATE_CONTROLS = '[timepicker] update controls'; }
writeValue(value) {
return {
type: TimepickerActions.WRITE_VALUE,
payload: value
};
}
changeHours(event) {
return {
type: TimepickerActions.CHANGE_HOURS,
payload: event
};
}
changeMinutes(event) {
return {
type: TimepickerActions.CHANGE_MINUTES,
payload: event
};
}
changeSeconds(event) {
return {
type: TimepickerActions.CHANGE_SECONDS,
payload: event
};
}
setTime(value) {
return {
type: TimepickerActions.SET_TIME_UNIT,
payload: value
};
}
updateControls(value) {
return {
type: TimepickerActions.UPDATE_CONTROLS,
payload: value
};
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: TimepickerActions, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: TimepickerActions, providedIn: 'platform' }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: TimepickerActions, decorators: [{
type: Injectable,
args: [{ providedIn: 'platform' }]
}] });
const dex = 10;
const hoursPerDay = 24;
const hoursPerDayHalf = 12;
const minutesPerHour = 60;
const secondsPerMinute = 60;
function isValidDate(value) {
if (!value) {
return false;
}
if (value instanceof Date && isNaN(value.getHours())) {
return false;
}
if (typeof value === 'string') {
return isValidDate(new Date(value));
}
return true;
}
function isValidLimit(controls, newDate) {
if (controls.min && newDate < controls.min) {
return false;
}
if (controls.max && newDate > controls.max) {
return false;
}
return true;
}
function toNumber(value) {
if (typeof value === 'undefined') {
return NaN;
}
if (typeof value === 'number') {
return value;
}
return parseInt(value, dex);
}
function isNumber(value) {
return !isNaN(toNumber(value));
}
function parseHours(value, isPM = false) {
const hour = toNumber(value);
if (isNaN(hour) ||
hour < 0 ||
hour > (isPM ? hoursPerDayHalf : hoursPerDay)) {
return NaN;
}
return hour;
}
function parseMinutes(value) {
const minute = toNumber(value);
if (isNaN(minute) || minute < 0 || minute > minutesPerHour) {
return NaN;
}
return minute;
}
function parseSeconds(value) {
const seconds = toNumber(value);
if (isNaN(seconds) || seconds < 0 || seconds > secondsPerMinute) {
return NaN;
}
return seconds;
}
function parseTime(value) {
if (typeof value === 'string') {
return new Date(value);
}
return value;
}
function changeTime(value, diff) {
if (!value) {
return changeTime(createDate(new Date(), 0, 0, 0), diff);
}
if (!diff) {
return value;
}
let hour = value.getHours();
let minutes = value.getMinutes();
let seconds = value.getSeconds();
if (diff.hour) {
hour = hour + toNumber(diff.hour);
}
if (diff.minute) {
minutes = minutes + toNumber(diff.minute);
}
if (diff.seconds) {
seconds = seconds + toNumber(diff.seconds);
}
return createDate(value, hour, minutes, seconds);
}
function setTime(value, opts) {
let hour = parseHours(opts.hour);
const minute = parseMinutes(opts.minute);
const seconds = parseSeconds(opts.seconds) || 0;
if (opts.isPM && hour !== 12) {
hour += hoursPerDayHalf;
}
if (!value) {
if (!isNaN(hour) && !isNaN(minute)) {
return createDate(new Date(), hour, minute, seconds);
}
return value;
}
if (isNaN(hour) || isNaN(minute)) {
return value;
}
return createDate(value, hour, minute, seconds);
}
function createDate(value, hours, minutes, seconds) {
const newValue = new Date(value.getFullYear(), value.getMonth(), value.getDate(), hours, minutes, seconds, value.getMilliseconds());
// #3139 ensure date part remains unchanged
newValue.setFullYear(value.getFullYear());
newValue.setMonth(value.getMonth());
newValue.setDate(value.getDate());
return newValue;
}
function padNumber(value) {
const _value = value.toString();
if (_value.length > 1) {
return _value;
}
return `0${_value}`;
}
function isHourInputValid(hours, isPM) {
return !isNaN(parseHours(hours, isPM));
}
function isMinuteInputValid(minutes) {
return !isNaN(parseMinutes(minutes));
}
function isSecondInputValid(seconds) {
return !isNaN(parseSeconds(seconds));
}
function isInputLimitValid(diff, max, min) {
const newDate = setTime(new Date(), diff);
if (!newDate) {
return false;
}
if (max && newDate > max) {
return false;
}
if (min && newDate < min) {
return false;
}
return true;
}
function isOneOfDatesEmpty(hours, minutes, seconds) {
return hours.length === 0 || minutes.length === 0 || seconds.length === 0;
}
function isInputValid(hours, minutes = '0', seconds = '0', isPM) {
return isHourInputValid(hours, isPM)
&& isMinuteInputValid(minutes)
&& isSecondInputValid(seconds);
}
function canChangeValue(state, event) {
if (state.readonlyInput || state.disabled) {
return false;
}
if (event) {
if (event.source === 'wheel' && !state.mousewheel) {
return false;
}
if (event.source === 'key' && !state.arrowkeys) {
return false;
}
}
return true;
}
function canChangeHours(event, controls) {
if (!event.step) {
return false;
}
if (event.step > 0 && !controls.canIncrementHours) {
return false;
}
if (event.step < 0 && !controls.canDecrementHours) {
return false;
}
return true;
}
function canChangeMinutes(event, controls) {
if (!event.step) {
return false;
}
if (event.step > 0 && !controls.canIncrementMinutes) {
return false;
}
if (event.step < 0 && !controls.canDecrementMinutes) {
return false;
}
return true;
}
function canChangeSeconds(event, controls) {
if (!event.step) {
return false;
}
if (event.step > 0 && !controls.canIncrementSeconds) {
return false;
}
if (event.step < 0 && !controls.canDecrementSeconds) {
return false;
}
return true;
}
function getControlsValue(state) {
const { hourStep, minuteStep, secondsStep, readonlyInput, disabled, mousewheel, arrowkeys, showSpinners, showMeridian, showSeconds, meridians, min, max } = state;
return {
hourStep,
minuteStep,
secondsStep,
readonlyInput,
disabled,
mousewheel,
arrowkeys,
showSpinners,
showMeridian,
showSeconds,
meridians,
min,
max
};
}
function timepickerControls(value, state) {
const hoursPerDay = 24;
const hoursPerDayHalf = 12;
const { min, max, hourStep, minuteStep, secondsStep, showSeconds } = state;
const res = {
canIncrementHours: true,
canIncrementMinutes: true,
canIncrementSeconds: true,
canDecrementHours: true,
canDecrementMinutes: true,
canDecrementSeconds: true,
canToggleMeridian: true
};
if (!value) {
return res;
}
// compare dates
if (max) {
const _newHour = changeTime(value, { hour: hourStep });
res.canIncrementHours = max > _newHour && (value.getHours() + hourStep) < hoursPerDay;
if (!res.canIncrementHours) {
const _newMinutes = changeTime(value, { minute: minuteStep });
res.canIncrementMinutes = showSeconds
? max > _newMinutes
: max >= _newMinutes;
}
if (!res.canIncrementMinutes) {
const _newSeconds = changeTime(value, { seconds: secondsStep });
res.canIncrementSeconds = max >= _newSeconds;
}
if (value.getHours() < hoursPerDayHalf) {
res.canToggleMeridian = changeTime(value, { hour: hoursPerDayHalf }) < max;
}
}
if (min) {
const _newHour = changeTime(value, { hour: -hourStep });
res.canDecrementHours = min < _newHour;
if (!res.canDecrementHours) {
const _newMinutes = changeTime(value, { minute: -minuteStep });
res.canDecrementMinutes = showSeconds
? min < _newMinutes
: min <= _newMinutes;
}
if (!res.canDecrementMinutes) {
const _newSeconds = changeTime(value, { seconds: -secondsStep });
res.canDecrementSeconds = min <= _newSeconds;
}
if (value.getHours() >= hoursPerDayHalf) {
res.canToggleMeridian = changeTime(value, { hour: -hoursPerDayHalf }) > min;
}
}
return res;
}
/** Provides default configuration values for timepicker */
class TimepickerConfig {
constructor() {
/** hours change step */
this.hourStep = 1;
/** minutes change step */
this.minuteStep = 5;
/** seconds changes step */
this.secondsStep = 10;
/** if true works in 12H mode and displays AM/PM. If false works in 24H mode and hides AM/PM */
this.showMeridian = true;
/** meridian labels based on locale */
this.meridians = ['AM', 'PM'];
/** if true hours and minutes fields will be readonly */
this.readonlyInput = false;
/** if true hours and minutes fields will be disabled */
this.disabled = false;
/** if true emptyTime is not marked as invalid */
this.allowEmptyTime = false;
/** if true scroll inside hours and minutes inputs will change time */
this.mousewheel = true;
/** if true the values of hours and minutes can be changed using the up/down arrow keys on the keyboard */
this.arrowkeys = true;
/** if true spinner arrows above and below the inputs will be shown */
this.showSpinners = true;
/** show seconds in timepicker */
this.showSeconds = false;
/** show minutes in timepicker */
this.showMinutes = true;
/** placeholder for hours field in timepicker */
this.hoursPlaceholder = 'HH';
/** placeholder for minutes field in timepicker */
this.minutesPlaceholder = 'MM';
/** placeholder for seconds field in timepicker */
this.secondsPlaceholder = 'SS';
/** hours aria label */
this.ariaLabelHours = 'hours';
/** minutes aria label */
this.ariaLabelMinutes = 'minutes';
/** seconds aria label */
this.ariaLabelSeconds = 'seconds';
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: TimepickerConfig, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: TimepickerConfig, providedIn: 'root' }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: TimepickerConfig, decorators: [{
type: Injectable,
args: [{
providedIn: 'root'
}]
}] });
const initialState = {
value: void 0,
config: new TimepickerConfig(),
controls: {
canIncrementHours: true,
canIncrementMinutes: true,
canIncrementSeconds: true,
canDecrementHours: true,
canDecrementMinutes: true,
canDecrementSeconds: true,
canToggleMeridian: true
}
};
function timepickerReducer(state = initialState, action) {
switch (action.type) {
case TimepickerActions.WRITE_VALUE: {
return Object.assign({}, state, { value: action.payload });
}
case TimepickerActions.CHANGE_HOURS: {
if (!canChangeValue(state.config, action.payload) ||
!canChangeHours(action.payload, state.controls)) {
return state;
}
const _newTime = changeTime(state.value, { hour: action.payload.step });
if ((state.config.max || state.config.min) && !isValidLimit(state.config, _newTime)) {
return state;
}
return Object.assign({}, state, { value: _newTime });
}
case TimepickerActions.CHANGE_MINUTES: {
if (!canChangeValue(state.config, action.payload) ||
!canChangeMinutes(action.payload, state.controls)) {
return state;
}
const _newTime = changeTime(state.value, { minute: action.payload.step });
if ((state.config.max || state.config.min) && !isValidLimit(state.config, _newTime)) {
return state;
}
return Object.assign({}, state, { value: _newTime });
}
case TimepickerActions.CHANGE_SECONDS: {
if (!canChangeValue(state.config, action.payload) ||
!canChangeSeconds(action.payload, state.controls)) {
return state;
}
const _newTime = changeTime(state.value, {
seconds: action.payload.step
});
if ((state.config.max || state.config.min) && !isValidLimit(state.config, _newTime)) {
return state;
}
return Object.assign({}, state, { value: _newTime });
}
case TimepickerActions.SET_TIME_UNIT: {
if (!canChangeValue(state.config)) {
return state;
}
const _newTime = setTime(state.value, action.payload);
return Object.assign({}, state, { value: _newTime });
}
case TimepickerActions.UPDATE_CONTROLS: {
const _newControlsState = timepickerControls(state.value, action.payload);
const _newState = {
value: state.value,
config: action.payload,
controls: _newControlsState
};
if (state.config.showMeridian !== _newState.config.showMeridian) {
if (state.value) {
_newState.value = new Date(state.value);
}
}
return Object.assign({}, state, _newState);
}
default:
return state;
}
}
class TimepickerStore extends MiniStore {
constructor() {
const _dispatcher = new BehaviorSubject({
type: '[mini-ngrx] dispatcher init'
});
const state = new MiniState(initialState, _dispatcher, timepickerReducer);
super(_dispatcher, timepickerReducer, state);
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: TimepickerStore, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: TimepickerStore, providedIn: 'platform' }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: TimepickerStore, decorators: [{
type: Injectable,
args: [{ providedIn: 'platform' }]
}], ctorParameters: () => [] });
const TIMEPICKER_CONTROL_VALUE_ACCESSOR = {
provide: NG_VALUE_ACCESSOR,
useExisting: forwardRef(() => TimepickerComponent),
multi: true
};
class TimepickerComponent {
// Helper method to convert input signals to TimepickerComponentState
getComponentState() {
return {
hourStep: this.hourStep(),
minuteStep: this.minuteStep(),
secondsStep: this.secondsStep(),
readonlyInput: this.readonlyInput(),
disabled: this.disabled,
mousewheel: this.mousewheel(),
arrowkeys: this.arrowkeys(),
showSpinners: this.showSpinners(),
showMeridian: this.showMeridian(),
showSeconds: this.showSeconds(),
meridians: this.meridians(),
min: this.min(),
max: this.max()
};
}
constructor(_config, _cd, _store, _timepickerActions) {
this._config = _config;
this._cd = _cd;
this._store = _store;
this._timepickerActions = _timepickerActions;
/** hours change step */
this.hourStep = input(this._config.hourStep, ...(ngDevMode ? [{ debugName: "hourStep" }] : []));
/** minutes change step */
this.minuteStep = input(this._config.minuteStep, ...(ngDevMode ? [{ debugName: "minuteStep" }] : []));
/** seconds change step */
this.secondsStep = input(this._config.secondsStep, ...(ngDevMode ? [{ debugName: "secondsStep" }] : []));
/** if true hours and minutes fields will be readonly */
this.readonlyInput = input(this._config.readonlyInput, ...(ngDevMode ? [{ debugName: "readonlyInput" }] : []));
/** if true hours and minutes fields will be disabled */
// eslint-disable-next-line @angular-eslint/no-input-rename
this.disabledInput = input(this._config.disabled, { ...(ngDevMode ? { debugName: "disabledInput" } : {}), alias: 'disabled' });
/** if true scroll inside hours and minutes inputs will change time */
this.mousewheel = input(this._config.mousewheel, ...(ngDevMode ? [{ debugName: "mousewheel" }] : []));
/** if true the values of hours and minutes can be changed using the up/down arrow keys on the keyboard */
this.arrowkeys = input(this._config.arrowkeys, ...(ngDevMode ? [{ debugName: "arrowkeys" }] : []));
/** if true spinner arrows above and below the inputs will be shown */
this.showSpinners = input(this._config.showSpinners, ...(ngDevMode ? [{ debugName: "showSpinners" }] : []));
/** if true meridian button will be shown */
this.showMeridian = input(this._config.showMeridian, ...(ngDevMode ? [{ debugName: "showMeridian" }] : []));
/** show minutes in timepicker */
this.showMinutes = input(this._config.showMinutes, ...(ngDevMode ? [{ debugName: "showMinutes" }] : []));
/** show seconds in timepicker */
this.showSeconds = input(this._config.showSeconds, ...(ngDevMode ? [{ debugName: "showSeconds" }] : []));
/** meridian labels based on locale */
this.meridians = input(this._config.meridians, ...(ngDevMode ? [{ debugName: "meridians" }] : []));
/** minimum time user can select */
this.min = input(this._config.min, ...(ngDevMode ? [{ debugName: "min" }] : []));
/** maximum time user can select */
this.max = input(this._config.max, ...(ngDevMode ? [{ debugName: "max" }] : []));
/** placeholder for hours field in timepicker */
this.hoursPlaceholder = input(this._config.hoursPlaceholder, ...(ngDevMode ? [{ debugName: "hoursPlaceholder" }] : []));
/** placeholder for minutes field in timepicker */
this.minutesPlaceholder = input(this._config.minutesPlaceholder, ...(ngDevMode ? [{ debugName: "minutesPlaceholder" }] : []));
/** placeholder for seconds field in timepicker */
this.secondsPlaceholder = input(this._config.secondsPlaceholder, ...(ngDevMode ? [{ debugName: "secondsPlaceholder" }] : []));
/** emits true if value is a valid date */
this.isValid = output();
/** emits value of meridian*/
this.meridianChange = output();
// ui variables
this.hours = '';
this.minutes = '';
this.seconds = '';
this.meridian = '';
this.disabled = false;
// min\max validation for input fields
this.invalidHours = false;
this.invalidMinutes = false;
this.invalidSeconds = false;
// aria-label variables
this.labelHours = 'hours';
this.labelMinutes = 'minutes';
this.labelSeconds = 'seconds';
// time picker controls state
this.canIncrementHours = true;
this.canIncrementMinutes = true;
this.canIncrementSeconds = true;
this.canDecrementHours = true;
this.canDecrementMinutes = true;
this.canDecrementSeconds = true;
this.canToggleMeridian = true;
// eslint-disable-next-line @typescript-eslint/no-explicit-any
this.onChange = Function.prototype;
// eslint-disable-next-line @typescript-eslint/no-explicit-any
this.onTouched = Function.prototype;
this.config = _config;
this.timepickerSub = _store.select(state => state.value)
.subscribe((value) => {
// update UI values if date changed
this._renderTime(value);
this.onChange(value);
this._store.dispatch(this._timepickerActions.updateControls(getControlsValue(this.getComponentState())));
});
_store.select(state => state.controls)
.subscribe((controlsState) => {
const isTimepickerInputValid = isInputValid(this.hours, this.minutes, this.seconds, this.isPM());
const isValidResult = this.config.allowEmptyTime ?
this.isOneOfDatesIsEmpty() || isTimepickerInputValid
: isTimepickerInputValid;
this.isValid.emit(isValidResult);
Object.assign(this, controlsState);
_cd.markForCheck();
});
}
/** @deprecated - please use `isEditable` instead */
get isSpinnersVisible() {
return this.showSpinners() && !this.readonlyInput();
}
get isEditable() {
return !(this.readonlyInput() || this.disabled);
}
resetValidation() {
this.invalidHours = false;
this.invalidMinutes = false;
this.invalidSeconds = false;
}
isPM() {
return this.showMeridian() && this.meridian === this.meridians()[1];
}
prevDef($event) {
$event.preventDefault();
}
wheelSign($event) {
return Math.sign($event.deltaY || 0) * -1;
}
ngOnChanges() {
this._store.dispatch(this._timepickerActions.updateControls(getControlsValue(this.getComponentState())));
}
changeHours(step, source = '') {
this.resetValidation();
this._store.dispatch(this._timepickerActions.changeHours({ step, source }));
}
changeMinutes(step, source = '') {
this.resetValidation();
this._store.dispatch(this._timepickerActions.changeMinutes({ step, source }));
}
changeSeconds(step, source = '') {
this.resetValidation();
this._store.dispatch(this._timepickerActions.changeSeconds({ step, source }));
}
updateHours(target) {
this.resetValidation();
this.hours = target.value;
const isTimepickerInputValid = isHourInputValid(this.hours, this.isPM()) && this.isValidLimit();
const isValidResult = this.config.allowEmptyTime ?
this.isOneOfDatesIsEmpty() || isTimepickerInputValid
: isTimepickerInputValid;
if (!isValidResult) {
this.invalidHours = true;
this.isValid.emit(false);
this.onChange(null);
return;
}
this._updateTime();
}
updateMinutes(target) {
this.resetValidation();
this.minutes = target.value;
const isTimepickerInputValid = isMinuteInputValid(this.minutes) && this.isValidLimit();
const isValidResult = this.config.allowEmptyTime ?
this.isOneOfDatesIsEmpty() || isTimepickerInputValid
: isTimepickerInputValid;
if (!isValidResult) {
this.invalidMinutes = true;
this.isValid.emit(false);
this.onChange(null);
return;
}
this._updateTime();
}
updateSeconds(target) {
this.resetValidation();
this.seconds = target.value;
const isTimepickerInputValid = isSecondInputValid(this.seconds) && this.isValidLimit();
const isValidResult = this.config.allowEmptyTime ?
this.isOneOfDatesIsEmpty() || isTimepickerInputValid
: isTimepickerInputValid;
if (!isValidResult) {
this.invalidSeconds = true;
this.isValid.emit(false);
this.onChange(null);
return;
}
this._updateTime();
}
isValidLimit() {
return isInputLimitValid({
hour: this.hours,
minute: this.minutes,
seconds: this.seconds,
isPM: this.isPM()
}, this.max(), this.min());
}
isOneOfDatesIsEmpty() {
return isOneOfDatesEmpty(this.hours, this.minutes, this.seconds);
}
_updateTime() {
const _seconds = this.showSeconds() ? this.seconds : void 0;
const _minutes = this.showMinutes() ? this.minutes : void 0;
const isTimepickerInputValid = isInputValid(this.hours, _minutes, _seconds, this.isPM());
const isValidResult = this.config.allowEmptyTime ?
this.isOneOfDatesIsEmpty() || isTimepickerInputValid
: isTimepickerInputValid;
if (!isValidResult) {
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()
}));
}
toggleMeridian() {
if (!this.showMeridian() || !this.isEditable) {
return;
}
const _hoursPerDayHalf = 12;
this._store.dispatch(this._timepickerActions.changeHours({
step: _hoursPerDayHalf,
source: ''
}));
}
/**
* Write a new value to the element.
*/
writeValue(obj) {
if (isValidDate(obj)) {
this.resetValidation();
this._store.dispatch(this._timepickerActions.writeValue(parseTime(obj)));
}
else if (obj == null) {
this._store.dispatch(this._timepickerActions.writeValue());
}
}
/**
* Set the function to be called when the control receives a change event.
*/
// eslint-disable-next-line @typescript-eslint/no-explicit-any
registerOnChange(fn) {
this.onChange = fn;
}
/**
* Set the function to be called when the control receives a touch event.
*/
registerOnTouched(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
*/
setDisabledState(isDisabled) {
this.disabled = isDisabled;
this._cd.markForCheck();
}
ngOnDestroy() {
this.timepickerSub?.unsubscribe();
}
_renderTime(value) {
if (!value || !isValidDate(value)) {
this.hours = '';
this.minutes = '';
this.seconds = '';
this.meridian = this.meridians()[0];
this.meridianChange.emit(this.meridian);
return;
}
const _value = parseTime(value);
if (!_value) {
return;
}
const _hoursPerDayHalf = 12;
let _hours = _value.getHours();
if (this.showMeridian()) {
this.meridian = this.meridians()[_hours >= _hoursPerDayHalf ? 1 : 0];
this.meridianChange.emit(this.meridian);
_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());
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: TimepickerComponent, deps: [{ token: TimepickerConfig }, { token: i0.ChangeDetectorRef }, { token: TimepickerStore }, { token: TimepickerActions }], target: i0.ɵɵFactoryTarget.Component }); }
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.0", type: TimepickerComponent, isStandalone: true, selector: "timepicker", inputs: { hourStep: { classPropertyName: "hourStep", publicName: "hourStep", isSignal: true, isRequired: false, transformFunction: null }, minuteStep: { classPropertyName: "minuteStep", publicName: "minuteStep", isSignal: true, isRequired: false, transformFunction: null }, secondsStep: { classPropertyName: "secondsStep", publicName: "secondsStep", isSignal: true, isRequired: false, transformFunction: null }, readonlyInput: { classPropertyName: "readonlyInput", publicName: "readonlyInput", isSignal: true, isRequired: false, transformFunction: null }, disabledInput: { classPropertyName: "disabledInput", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, mousewheel: { classPropertyName: "mousewheel", publicName: "mousewheel", isSignal: true, isRequired: false, transformFunction: null }, arrowkeys: { classPropertyName: "arrowkeys", publicName: "arrowkeys", isSignal: true, isRequired: false, transformFunction: null }, showSpinners: { classPropertyName: "showSpinners", publicName: "showSpinners", isSignal: true, isRequired: false, transformFunction: null }, showMeridian: { classPropertyName: "showMeridian", publicName: "showMeridian", isSignal: true, isRequired: false, transformFunction: null }, showMinutes: { classPropertyName: "showMinutes", publicName: "showMinutes", isSignal: true, isRequired: false, transformFunction: null }, showSeconds: { classPropertyName: "showSeconds", publicName: "showSeconds", isSignal: true, isRequired: false, transformFunction: null }, meridians: { classPropertyName: "meridians", publicName: "meridians", isSignal: true, isRequired: false, transformFunction: null }, min: { classPropertyName: "min", publicName: "min", isSignal: true, isRequired: false, transformFunction: null }, max: { classPropertyName: "max", publicName: "max", isSignal: true, isRequired: false, transformFunction: null }, hoursPlaceholder: { classPropertyName: "hoursPlaceholder", publicName: "hoursPlaceholder", isSignal: true, isRequired: false, transformFunction: null }, minutesPlaceholder: { classPropertyName: "minutesPlaceholder", publicName: "minutesPlaceholder", isSignal: true, isRequired: false, transformFunction: null }, secondsPlaceholder: { classPropertyName: "secondsPlaceholder", publicName: "secondsPlaceholder", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { isValid: "isValid", meridianChange: "meridianChange" }, providers: [TIMEPICKER_CONTROL_VALUE_ACCESSOR, TimepickerStore, TimepickerActions], usesOnChanges: true, ngImport: i0, template: "<table>\n <tbody>\n <tr class=\"text-center\" [hidden]=\"!showSpinners()\">\n <!-- increment hours button-->\n <td>\n <a class=\"btn btn-link\" [class.disabled]=\"!canIncrementHours || !isEditable\"\n (click)=\"changeHours(hourStep())\"\n href=\"javascript:void(0);\"\n ><span class=\"bs-chevron bs-chevron-up\"></span></a>\n </td>\n <!-- divider -->\n @if (showMinutes()) {\n <td> </td>\n }\n <!-- increment minutes button -->\n @if (showMinutes()) {\n <td>\n <a class=\"btn btn-link\" [class.disabled]=\"!canIncrementMinutes || !isEditable\"\n (click)=\"changeMinutes(minuteStep())\"\n href=\"javascript:void(0);\"\n ><span class=\"bs-chevron bs-chevron-up\"></span></a>\n </td>\n }\n <!-- divider -->\n @if (showSeconds()) {\n <td> </td>\n }\n <!-- increment seconds button -->\n @if (showSeconds()) {\n <td>\n <a class=\"btn btn-link\" [class.disabled]=\"!canIncrementSeconds || !isEditable\"\n (click)=\"changeSeconds(secondsStep())\"\n href=\"javascript:void(0);\"\n >\n <span class=\"bs-chevron bs-chevron-up\"></span>\n </a>\n </td>\n }\n <!-- space between -->\n @if (showMeridian()) {\n <td> </td>\n }\n <!-- meridian placeholder-->\n @if (showMeridian()) {\n <td></td>\n }\n </tr>\n <tr>\n <!-- hours -->\n <td class=\"form-group mb-3\" [class.has-error]=\"invalidHours\">\n <input type=\"text\" [class.is-invalid]=\"invalidHours\"\n class=\"form-control text-center bs-timepicker-field\"\n [placeholder]=\"hoursPlaceholder()\"\n maxlength=\"2\"\n [readonly]=\"readonlyInput()\"\n [disabled]=\"disabled\"\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)\" [attr.aria-label]=\"labelHours\"></td>\n <!-- divider -->\n @if (showMinutes()) {\n <td> : </td>\n }\n <!-- minutes -->\n @if (showMinutes()) {\n <td class=\"form-group mb-3\" [class.has-error]=\"invalidMinutes\">\n <input type=\"text\" [class.is-invalid]=\"invalidMinutes\"\n class=\"form-control text-center bs-timepicker-field\"\n [placeholder]=\"minutesPlaceholder()\"\n maxlength=\"2\"\n [readonly]=\"readonlyInput()\"\n [disabled]=\"disabled\"\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)\" [attr.aria-label]=\"labelMinutes\">\n </td>\n }\n <!-- divider -->\n @if (showSeconds()) {\n <td> : </td>\n }\n <!-- seconds -->\n @if (showSeconds()) {\n <td class=\"form-group mb-3\" [class.has-error]=\"invalidSeconds\">\n <input type=\"text\" [class.is-invalid]=\"invalidSeconds\"\n class=\"form-control text-center bs-timepicker-field\"\n [placeholder]=\"secondsPlaceholder()\"\n maxlength=\"2\"\n [readonly]=\"readonlyInput()\"\n [disabled]=\"disabled\"\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)\" [attr.aria-label]=\"labelSeconds\">\n </td>\n }\n <!-- space between -->\n @if (showMeridian()) {\n <td> </td>\n }\n <!-- meridian -->\n @if (showMeridian()) {\n <td>\n <button type=\"button\" class=\"btn btn-default text-center\"\n [disabled]=\"!isEditable || !canToggleMeridian\"\n [class.disabled]=\"!isEditable || !canToggleMeridian\"\n (click)=\"toggleMeridian()\"\n >{{ meridian }}\n </button>\n </td>\n }\n </tr>\n <tr class=\"text-center\" [hidden]=\"!showSpinners()\">\n <!-- decrement hours button-->\n <td>\n <a class=\"btn btn-link\" [class.disabled]=\"!canDecrementHours || !isEditable\"\n (click)=\"changeHours(-hourStep())\"\n href=\"javascript:void(0);\"\n >\n <span class=\"bs-chevron bs-chevron-down\"></span>\n </a>\n </td>\n <!-- divider -->\n @if (showMinutes()) {\n <td> </td>\n }\n <!-- decrement minutes button-->\n @if (showMinutes()) {\n <td>\n <a class=\"btn btn-link\" [class.disabled]=\"!canDecrementMinutes || !isEditable\"\n (click)=\"changeMinutes(-minuteStep())\"\n href=\"javascript:void(0);\"\n >\n <span class=\"bs-chevron bs-chevron-down\"></span>\n </a>\n </td>\n }\n <!-- divider -->\n @if (showSeconds()) {\n <td> </td>\n }\n <!-- decrement seconds button-->\n @if (showSeconds()) {\n <td>\n <a class=\"btn btn-link\" [class.disabled]=\"!canDecrementSeconds || !isEditable\"\n (click)=\"changeSeconds(-secondsStep())\"\n href=\"javascript:void(0);\"\n >\n <span class=\"bs-chevron bs-chevron-down\"></span>\n </a>\n </td>\n }\n <!-- space between -->\n @if (showMeridian()) {\n <td> </td>\n }\n <!-- meridian placeholder-->\n @if (showMeridian()) {\n <td></td>\n }\n </tr>\n </tbody>\n</table>\n", styles: [".bs-chevron{border-style:solid;display:block;width:9px;height:9px;position:relative;border-width:3px 0px 0 3px}.bs-chevron-up{-webkit-transform:rotate(45deg);transform:rotate(45deg);top:2px}.bs-chevron-down{-webkit-transform:rotate(-135deg);transform:rotate(-135deg);top:-2px}.bs-timepicker-field{width:65px;padding:.375rem .55rem}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: TimepickerComponent, decorators: [{
type: Component,
args: [{ selector: 'timepicker', changeDetection: ChangeDetectionStrategy.OnPush, providers: [TIMEPICKER_CONTROL_VALUE_ACCESSOR, TimepickerStore, TimepickerActions], encapsulation: ViewEncapsulation.None, standalone: true, imports: [], template: "<table>\n <tbody>\n <tr class=\"text-center\" [hidden]=\"!showSpinners()\">\n <!-- increment hours button-->\n <td>\n <a class=\"btn btn-link\" [class.disabled]=\"!canIncrementHours || !isEditable\"\n (click)=\"changeHours(hourStep())\"\n href=\"javascript:void(0);\"\n ><span class=\"bs-chevron bs-chevron-up\"></span></a>\n </td>\n <!-- divider -->\n @if (showMinutes()) {\n <td> </td>\n }\n <!-- increment minutes button -->\n @if (showMinutes()) {\n <td>\n <a class=\"btn btn-link\" [class.disabled]=\"!canIncrementMinutes || !isEditable\"\n (click)=\"changeMinutes(minuteStep())\"\n href=\"javascript:void(0);\"\n ><span class=\"bs-chevron bs-chevron-up\"></span></a>\n </td>\n }\n <!-- divider -->\n @if (showSeconds()) {\n <td> </td>\n }\n <!-- increment seconds button -->\n @if (showSeconds()) {\n <td>\n <a class=\"btn btn-link\" [class.disabled]=\"!canIncrementSeconds || !isEditable\"\n (click)=\"changeSeconds(secondsStep())\"\n href=\"javascript:void(0);\"\n >\n <span class=\"bs-chevron bs-chevron-up\"></span>\n </a>\n </td>\n }\n <!-- space between -->\n @if (showMeridian()) {\n <td> </td>\n }\n <!-- meridian placeholder-->\n @if (showMeridian()) {\n <td></td>\n }\n </tr>\n <tr>\n <!-- hours -->\n <td class=\"form-group mb-3\" [class.has-error]=\"invalidHours\">\n <input type=\"text\" [class.is-invalid]=\"invalidHours\"\n class=\"form-control text-center bs-timepicker-field\"\n [placeholder]=\"hoursPlaceholder()\"\n maxlength=\"2\"\n [readonly]=\"readonlyInput()\"\n [disabled]=\"disabled\"\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)\" [attr.aria-label]=\"labelHours\"></td>\n <!-- divider -->\n @if (showMinutes()) {\n <td> : </td>\n }\n <!-- minutes -->\n @if (showMinutes()) {\n <td class=\"form-group mb-3\" [class.has-error]=\"invalidMinutes\">\n <input type=\"text\" [class.is-invalid]=\"invalidMinutes\"\n class=\"form-control text-center bs-timepicker-field\"\n [placeholder]=\"minutesPlaceholder()\"\n maxlength=\"2\"\n [readonly]=\"readonlyInput()\"\n [disabled]=\"disabled\"\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)\" [attr.aria-label]=\"labelMinutes\">\n </td>\n }\n <!-- divider -->\n @if (showSeconds()) {\n <td> : </td>\n }\n <!-- seconds -->\n @if (showSeconds()) {\n <td class=\"form-group mb-3\" [class.has-error]=\"invalidSeconds\">\n <input type=\"text\" [class.is-invalid]=\"invalidSeconds\"\n class=\"form-control text-center bs-timepicker-field\"\n [placeholder]=\"secondsPlaceholder()\"\n maxlength=\"2\"\n [readonly]=\"readonlyInput()\"\n [disabled]=\"disabled\"\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)\" [attr.aria-label]=\"labelSeconds\">\n </td>\n }\n <!-- space between -->\n @if (showMeridian()) {\n <td> </td>\n }\n <!-- meridian -->\n @if (showMeridian()) {\n <td>\n <button type=\"button\" class=\"btn btn-default text-center\"\n [disabled]=\"!isEditable || !canToggleMeridian\"\n [class.disabled]=\"!isEditable || !canToggleMeridian\"\n (click)=\"toggleMeridian()\"\n >{{ meridian }}\n </button>\n </td>\n }\n </tr>\n <tr class=\"text-center\" [hidden]=\"!showSpinners()\">\n <!-- decrement hours button-->\n <td>\n <a class=\"btn btn-link\" [class.disabled]=\"!canDecrementHours || !isEditable\"\n (click)=\"changeHours(-hourStep())\"\n href=\"javascript:void(0);\"\n >\n <span class=\"bs-chevron bs-chevron-down\"></span>\n </a>\n </td>\n <!-- divider -->\n @if (showMinutes()) {\n <td> </td>\n }\n <!-- decrement minutes button-->\n @if (showMinutes()) {\n <td>\n <a class=\"btn btn-link\" [class.disabled]=\"!canDecrementMinutes || !isEditable\"\n (click)=\"changeMinutes(-minuteStep())\"\n href=\"javascript:void(0);\"\n >\n <span class=\"bs-chevron bs-chevron-down\"></span>\n </a>\n </td>\n }\n <!-- divider -->\n @if (showSeconds()) {\n <td> </td>\n }\n <!-- decrement seconds button-->\n @if (showSeconds()) {\n <td>\n <a class=\"btn btn-link\" [class.disabled]=\"!canDecrementSeconds || !isEditable\"\n (click)=\"changeSeconds(-secondsStep())\"\n href=\"javascript:void(0);\"\n >\n <span class=\"bs-chevron bs-chevron-down\"></span>\n </a>\n </td>\n }\n <!-- space between -->\n @if (showMeridian()) {\n <td> </td>\n }\n <!-- meridian placeholder-->\n @if (showMeridian()) {\n <td></td>\n }\n </tr>\n </tbody>\n</table>\n", styles: [".bs-chevron{border-style:solid;display:block;width:9px;height:9px;position:relative;border-width:3px 0px 0 3px}.bs-chevron-up{-webkit-transform:rotate(45deg);transform:rotate(45deg);top:2px}.bs-chevron-down{-webkit-transform:rotate(-135deg);transform:rotate(-135deg);top:-2px}.bs-timepicker-field{width:65px;padding:.375rem .55rem}\n"] }]
}], ctorParameters: () => [{ type: TimepickerConfig }, { type: i0.ChangeDetectorRef }, { type: TimepickerStore }, { type: TimepickerActions }], propDecorators: { hourStep: [{ type: i0.Input, args: [{ isSignal: true, alias: "hourStep", required: false }] }], minuteStep: [{ type: i0.Input, args: [{ isSignal: true, alias: "minuteStep", required: false }] }], secondsStep: [{ type: i0.Input, args: [{ isSignal: true, alias: "secondsStep", required: false }] }], readonlyInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "readonlyInput", required: false }] }], disabledInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], mousewheel: [{ type: i0.Input, args: [{ isSignal: true, alias: "mousewheel", required: false }] }], arrowkeys: [{ type: i0.Input, args: [{ isSignal: true, alias: "arrowkeys", required: false }] }], showSpinners: [{ type: i0.Input, args: [{ isSignal: true, alias: "showSpinners", required: false }] }], showMeridian: [{ type: i0.Input, args: [{ isSignal: true, alias: "showMeridian", required: false }] }], showMinutes: [{ type: i0.Input, args: [{ isSignal: true, alias: "showMinutes", required: false }] }], showSeconds: [{ type: i0.Input, args: [{ isSignal: true, alias: "showSeconds", required: false }] }], meridians: [{ type: i0.Input, args: [{ isSignal: true, alias: "meridians", required: false }] }], min: [{ type: i0.Input, args: [{ isSignal: true, alias: "min", required: false }] }], max: [{ type: i0.Input, args: [{ isSignal: true, alias: "max", required: false }] }], hoursPlaceholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "hoursPlaceholder", required: false }] }], minutesPlaceholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "minutesPlaceholder", required: false }] }], secondsPlaceholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "secondsPlaceholder", required: false }] }], isValid: [{ type: i0.Output, args: ["isValid"] }], meridianChange: [{ type: i0.Output, args: ["meridianChange"] }] } });
class TimepickerModule {
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: TimepickerModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.2.0", ngImport: i0, type: TimepickerModule, imports: [TimepickerComponent], exports: [TimepickerComponent] }); }
static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: TimepickerModule }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: TimepickerModule, decorators: [{
type: NgModule,
args: [{
imports: [TimepickerComponent],
exports: [TimepickerComponent],
}]
}] });
/**
* Generated bundle index. Do not edit.
*/
export { TimepickerActions, TimepickerComponent, TimepickerConfig, TimepickerModule, TimepickerStore };
//# sourceMappingURL=ngx-bootstrap-timepicker.mjs.map